/* Global */
html, body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
header {background-color: #FFFFFF;min-height: 4rem;padding: 0.5rem}
footer a {color: #EEE;text-decoration: none;}
footer a:hover {color: #FFF;text-decoration: none;}
footer > .grid-x { background-color:#333;color:#FFF;font-size:14px; padding: 20px; }
form {background-color: #444; padding: 1rem}
input[type="text"] {margin: 0}

/* Layout */
main { display: flex; align-items: stretch; }
#filter { width: 300px; display: flex; flex-direction: column; align-items: stretch; }
#results { flex: 1 1; overflow-y: auto; }
@media(min-width: 768px) and (max-width: 1023px) {
    #filter { width: 260px; }
}
@media(max-width: 767px) {
    body > .grid-y.medium-grid-frame { min-height: 100vh; }
    main { flex-direction: column-reverse; flex: 1 1 !important; }
    #filter { width: 100%; }
    #google-map { min-height: 300px; }
    #filter #results:not(.mobile-expanded) { max-height: 0; }
    #filter.mobile-expanded #results { max-height: 300px; }
    #filter .mobile-results-toggle { width: 100%; background: #4d4d4d; color: #fff; text-align: center; padding: 10px 0 5px; display: flex; align-items: center; justify-content: center; }
    #filter .mobile-results-toggle::before { content: ''; display: block; width: 20px; height: 20px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDE2IDM1MmMtOC4xODggMC0xNi4zOC0zLjEyNS0yMi42Mi05LjM3NUwyMjQgMTczLjNsLTE2OS40IDE2OS40Yy0xMi41IDEyLjUtMzIuNzUgMTIuNS00NS4yNSAwcy0xMi41LTMyLjc1IDAtNDUuMjVsMTkyLTE5MmMxMi41LTEyLjUgMzIuNzUtMTIuNSA0NS4yNSAwbDE5MiAxOTJjMTIuNSAxMi41IDEyLjUgMzIuNzUgMCA0NS4yNUM0MzIuNCAzNDguOSA0MjQuMiAzNTIgNDE2IDM1MnoiIGZpbGw9IiNmZmYiIC8+PC9zdmc+Cg==') center center no-repeat; background-size: contain; }
    #filter.mobile-expanded .mobile-results-toggle::before { transform: scaleY(-1); }
}

/* Left sidebar  */
div.result { border-bottom: 1px solid #CCC;padding: 0.5rem; cursor: pointer; }
div.result:hover { background-color: #EEE}
div.result.active { background-color: #eee; border-left: 3px solid rgb(235 38 46); padding-left: calc(0.5rem - 3px); }
div.result::after { content: ''; display: block; clear: both; }
div.result .logo { float: right; margin-left: 10px; margin-bottom: 5px; width: 33%; max-width: 100px; }
div.result p { margin: 0; }
div.result p:not(:last-child) { margin-bottom: 8px; }
div.result p.name {font-size: 11pt;line-height: 1.2}
div.result p.address {font-size: 9pt;color: #999;line-height: 1.15;}
div.result p.phone {font-size: 10pt;color: #666;line-height: 1.15;}

/* Map */
#google-map { flex: 1 1; }
.gm-style .gm-style-iw-c { padding: 0 0 12px 0 !important; }
.gm-style-iw-d { overflow-x: hidden !important; overflow-y: auto !important; }
.gm-style-iw-d + button[type="button"] { border-radius: 999px; top: 3px !important; right: 3px !important; box-shadow: 1px 1px 3px rgba(0, 0, 0, .6); transition: opacity .25s; background: #f2f2f2 !important; opacity: 1 !important; }
.gm-style-iw-d + button[type="button"]:hover { background-color: #fff !important; }
#infowindow-inner-wrap { max-width: 300px; }
#infowindow-inner-wrap .logo { margin: 0; text-align: center; }
#infowindow-inner-wrap .logo img { max-width: 100%; height: auto; }
#infowindow-inner-wrap h2 { font-weight: bold; font-size: 16px; color: #fff; padding: 30px 15px 20px; background-color: #4d4d4d; margin-bottom: 0; }
#infowindow-inner-wrap .logo + h2 { padding-top: 20px; }
#infowindow-inner-wrap .inner { padding: 5px 15px 3px; }
#infowindow-inner-wrap .inner p { margin: 10px 0; }
#infowindow-inner-wrap .inner p:last-child { margin-bottom: 0; }
#infowindow-inner-wrap .inner .address,
#infowindow-inner-wrap .inner .website,
#infowindow-inner-wrap .inner .phone,
#infowindow-inner-wrap .inner .email { padding-left: 22px; background: 0 3px no-repeat; background-size: auto 13px; }
#infowindow-inner-wrap .inner .address { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMTY4LjMgNDk5LjJDMTE2LjEgNDM1IDAgMjc5LjQgMCAxOTJDMCA4NS45NiA4NS45NiAwIDE5MiAwQzI5OCAwIDM4NCA4NS45NiAzODQgMTkyQzM4NCAyNzkuNCAyNjcgNDM1IDIxNS43IDQ5OS4yQzIwMy40IDUxNC41IDE4MC42IDUxNC41IDE2OC4zIDQ5OS4ySDE2OC4zek0xOTIgMjU2QzIyNy4zIDI1NiAyNTYgMjI3LjMgMjU2IDE5MkMyNTYgMTU2LjcgMjI3LjMgMTI4IDE5MiAxMjhDMTU2LjcgMTI4IDEyOCAxNTYuNyAxMjggMTkyQzEyOCAyMjcuMyAxNTYuNyAyNTYgMTkyIDI1NnoiLz48L3N2Zz4K'); }
#infowindow-inner-wrap .inner .website { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTEyIDI1NkM1MTIgMzk3LjQgMzk3LjQgNTEyIDI1NiA1MTJDMTE0LjYgNTEyIDAgMzk3LjQgMCAyNTZDMCAxMTQuNiAxMTQuNiAwIDI1NiAwQzM5Ny40IDAgNTEyIDExNC42IDUxMiAyNTZ6TTU3LjcxIDE5Mi4xTDY3LjA3IDIwOS40Qzc1LjM2IDIyMy45IDg4Ljk5IDIzNC42IDEwNS4xIDIzOS4yTDE2Mi4xIDI1NS43QzE4MC4yIDI2MC42IDE5MiAyNzYuMyAxOTIgMjk0LjJWMzM0LjFDMTkyIDM0NS4xIDE5OC4yIDM1NS4xIDIwOCAzNTkuMUMyMTcuOCAzNjQuOSAyMjQgMzc0LjkgMjI0IDM4NS45VjQyNC45QzIyNCA0NDAuNSAyMzguOSA0NTEuNyAyNTMuOSA0NDcuNEMyNzAuMSA0NDIuOCAyODIuNSA0MjkuMSAyODYuNiA0MTMuN0wyODkuNCA0MDIuNUMyOTMuNiAzODUuNiAzMDQuNiAzNzEuMSAzMTkuNyAzNjIuNEwzMjcuOCAzNTcuOEMzNDIuOCAzNDkuMyAzNTIgMzMzLjQgMzUyIDMxNi4xVjMwNy45QzM1MiAyOTUuMSAzNDYuOSAyODIuOSAzMzcuOSAyNzMuOUwzMzQuMSAyNzAuMUMzMjUuMSAyNjEuMSAzMTIuOCAyNTUuMSAzMDAuMSAyNTUuMUgyNTYuMUMyNDUuOSAyNTUuMSAyMzQuOSAyNTMuMSAyMjUuMiAyNDcuNkwxOTAuNyAyMjcuOEMxODYuNCAyMjUuNCAxODMuMSAyMjEuNCAxODEuNiAyMTYuN0MxNzguNCAyMDcuMSAxODIuNyAxOTYuNyAxOTEuNyAxOTIuMUwxOTcuNyAxODkuMkMyMDQuMyAxODUuOSAyMTEuOSAxODUuMyAyMTguMSAxODcuN0wyNDIuMiAxOTUuNEMyNTAuMyAxOTguMSAyNTkuMyAxOTUgMjY0LjEgMTg3LjlDMjY4LjggMTgwLjggMjY4LjMgMTcxLjUgMjYyLjkgMTY1TDI0OS4zIDE0OC44QzIzOS4zIDEzNi44IDIzOS40IDExOS4zIDI0OS42IDEwNy41TDI2NS4zIDg5LjEyQzI3NC4xIDc4Ljg1IDI3NS41IDY0LjE2IDI2OC44IDUyLjQyTDI2Ni40IDQ4LjI2QzI2Mi4xIDQ4LjA5IDI1OS41IDQ4IDI1NiA0OEMxNjMuMSA0OCA4NC40IDEwOC45IDU3LjcxIDE5Mi4xTDU3LjcxIDE5Mi4xek00MzcuNiAxNTQuNUw0MTIgMTY0LjhDMzk2LjMgMTcxLjEgMzg4LjIgMTg4LjUgMzkzLjUgMjA0LjZMNDEwLjQgMjU1LjNDNDEzLjkgMjY1LjcgNDIyLjQgMjczLjYgNDMzIDI3Ni4zTDQ2Mi4yIDI4My41QzQ2My40IDI3NC41IDQ2NCAyNjUuMyA0NjQgMjU2QzQ2NCAyMTkuMiA0NTQuNCAxODQuNiA0MzcuNiAxNTQuNUg0MzcuNnoiLz48L3N2Zz4K'); }
#infowindow-inner-wrap .inner .phone { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTExLjIgMzg3bC0yMy4yNSAxMDAuOGMtMy4yNjYgMTQuMjUtMTUuNzkgMjQuMjItMzAuNDYgMjQuMjJDMjA1LjIgNTEyIDAgMzA2LjggMCA1NC41YzAtMTQuNjYgOS45NjktMjcuMiAyNC4yMi0zMC40NWwxMDAuOC0yMy4yNUMxMzkuNy0yLjYwMiAxNTQuNyA1LjAxOCAxNjAuOCAxOC45Mmw0Ni41MiAxMDguNWM1LjQzOCAxMi43OCAxLjc3IDI3LjY3LTguOTggMzYuNDVMMTQ0LjUgMjA3LjFjMzMuOTggNjkuMjIgOTAuMjYgMTI1LjUgMTU5LjUgMTU5LjVsNDQuMDgtNTMuOGM4LjY4OC0xMC43OCAyMy42OS0xNC41MSAzNi40Ny04Ljk3NWwxMDguNSA0Ni41MUM1MDYuMSAzNTcuMiA1MTQuNiAzNzIuNCA1MTEuMiAzODd6Ii8+PC9zdmc+Cg=='); }
#infowindow-inner-wrap .inner .email { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDY0IDY0QzQ5MC41IDY0IDUxMiA4NS40OSA1MTIgMTEyQzUxMiAxMjcuMSA1MDQuOSAxNDEuMyA0OTIuOCAxNTAuNEwyNzUuMiAzMTMuNkMyNjMuOCAzMjIuMSAyNDguMiAzMjIuMSAyMzYuOCAzMTMuNkwxOS4yIDE1MC40QzcuMTEzIDE0MS4zIDAgMTI3LjEgMCAxMTJDMCA4NS40OSAyMS40OSA2NCA0OCA2NEg0NjR6TTIxNy42IDMzOS4yQzI0MC40IDM1Ni4zIDI3MS42IDM1Ni4zIDI5NC40IDMzOS4yTDUxMiAxNzZWMzg0QzUxMiA0MTkuMyA0ODMuMyA0NDggNDQ4IDQ0OEg2NEMyOC42NSA0NDggMCA0MTkuMyAwIDM4NFYxNzZMMjE3LjYgMzM5LjJ6Ii8+PC9zdmc+Cg=='); }
#infowindow-inner-wrap hr { margin-top: 10px; margin-bottom: 10px; border: 0; border-bottom: 1px solid #ececec; }
#infowindow-inner-wrap .detail-link { display: block; background-color: #eb262e; color: #fff; text-transform: uppercase; text-align: center; padding: 10px 15px 9px; font-size: 14px; font-weight: 500; }
#infowindow-inner-wrap .detail-link:hover { background-color: #e01320; }

/* Depot detail */
#depot-detail { background: #f6f6f6; }
@media(min-width: 768px) {
    #depot-detail > .grid-y { min-height: 100vh; }
}
#depot-detail header img { width: 100px; }
#depot-detail header h2 { font-size: 1.7rem; }
#depot-detail header h2 a { color: inherit; }
#depot-detail header + .grid-container { background: #fff; margin-top: 10px; margin-bottom: 30px; flex: 1 1; }