/*
    .dark-primary-color    { background: #C2185B; }
    .default-primary-color { background: #E91E63; }
    .light-primary-color   { background: #F8BBD0; }
    .text-primary-color    { color: #FFFFFF; }
    .accent-color          { background: #536DFE; }
    .primary-text-color    { color: #212121; }
    .secondary-text-color  { color: #727272; }
    .divider-color         { border-color: #B6B6B6; }
*/

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'helvetica neue', helvetica, arial, sans-serif;
    overflow: hidden;
    color: white;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
}

.map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-size: border-box;
    transition: height 0.25s ease-in;
}

.leaflet-container.leaflet-fullscreen-on {
    /* Browser will set ridiculuously high z-index otherwise, and hide menu */
    z-index: 10000 !important;
}

.embedded .sidebar {
    display: none;
}

.sidebar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.5);
    background-color: white;
    transition: height 0.25s ease-in;
    border-size: border-box;
    overflow-y: auto;
}

.collapse .sidebar {
    height: 48px;
    overflow-y: hidden;
}

.collapse .map {
    height: calc(100% - 48px);
}

.embedded.collapse .map, .embedded.expand .map {
    height: 100%;
}

.expand .sidebar {
    height: 50%;
}

.expand .map {
    height: 50%;
}

.minimized .sidebar {
    height: 0;
}

.minimized .map {
    height: 100%;
}

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #C2185B;
    height: 48px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.search {
    width: 0;
    font-size: 24px;
    border: none;
    border-radius: 2px;
    transition: all 0.25s ease-out;
    position: relative;
    top: -34px;
}

.header-wrapper.search-expanded>* {
    margin-left: -268px;
}

.search-expanded .search {
    margin-left: 7px;
    width: calc(100% - 56px);
}

.expand .header-wrapper, .collapse .header-wrapper {
    position: relative;
}

.header-wrapper.minimized {
    display: none;
}

.header-wrapper h1 {
    display: block;
    width: calc(100% - 120px);
}

.sidebar nav {
    padding-left: 195px;
    margin-right: 12px;
    width: 300px;
    transition: margin-left 0.25s ease-out;
}

.sidebar nav ul {
    float: left;
}

.sidebar nav li {
    display: inline-block;
    margin-left: 12px;
}

.sidebar nav li:first-child{
    margin-left: 0;
}

.sidebar nav ul {
    padding-top: 0;
    padding-left: 0;
    margin-top: -34px;
    font-size: 24px;
    list-style-type: none;
}

.sidebar nav a {
    color: white;
}

.sidebar h1 {
    font-size: 24px;
    color: white;
    padding: 0;
    margin: 6px 12px;
    overflow: hidden;    
    text-overflow: ellipsis;    
    white-space: nowrap;    
    margin-top: 0;
    padding-top: 8px;
}

.sidebar h1 a, .sidebar h1 a:hover {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

ul.locations {
    list-style: none;
    margin-top: 48px; /* To end up below fixed header */
    padding-left: 0;
}

.locations li {
    background-color: white;
    color: black;
}

.expand ul.locations, .collapse ul.locations {
    margin-top: 0px;
}

.expand .locations li, .collapse .locations li {
    display: none;
}

.collapse .locations li.selected, .expand .locations li.selected {
    display: block;
}

.locations li h2, .locations li h3 {
    padding-top: 4px;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 4px;
}

li.region {
    padding-top: 4px;
    padding-left: 4px;
    background-color: #F8BBD0;
}

.locations li a {
    padding: 4px 0 4px 10px;
    display: block;
    color: inherit;
    max-width: 260px;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.collapse .locations li a {
    text-transform: uppercase;
}

.locations li section {
    transition: max-height 0.25s ease-out;
    max-height: 0;
    overflow: hidden;
}

.locations li section h1, .locations li section h2, .locations li section h3, .locations li section h4, .locations li section h5 {
    background-color: none;
}

.location-banner-image {
    display: none;
}

.expand .location-banner-image[src] {
    display: block;
    width: 100%;
}

.expand .sidebar .locations li.selected section {
    max-height: 1024px;
}

.card {
    padding: 4px 0 4px 20px;
    margin-left: 0;
    border-bottom: 0.5px solid #e0e0e0;
}

.hidden {
    height: 0;
}

.menu {
    position: absolute;
    top:0;
    bottom: 0;
    width: 0;
    transition: width 0.25s ease-out;
    z-index: 10002;
    background-color: white;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    color: black;
}

.menu-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: none;
    z-index: 10001;
    transition: background-color 0.25s ease-out;
    pointer-events: none;
}

.menu-expand .menu-overlay{
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

.menu-expand .menu {
    width: 340px;
}

.menu-wrapper {
    width: 340px;
    padding-left: 10px;
    height: 100%;
    overflow-y: auto;
}

.menu-back {
    text-decoration: none;
}

.menu-back:before {
    content: "\2190";
    font-size: 36px;
    line-height: 0;
    position: relative;
    top: 6px;
}

.menu #base-layers, .menu #overlays {
    list-style-type: none;
    padding-left: 10px;
    font-size: 24px;
}

.menu li {
    margin-bottom: 4px;
}

.menu input {
    width: 18px;
    height: 18px;
    margin-right: 12px;
}

.poi-popup-icon {
    font-size: 48px;
    color: white;
    background-color: steelblue;
    border-radius: 4px;
    float: left;
    padding: 8px;
    margin-right: 12px;
}

.location-update-indicator {
    float: right;
    font-size: 56px;
    clear: right;
    margin-right: 16px;
    line-height: 0;
    margin-top: -17px;
}

.location-update-indicator:after {
    content: '\2022';
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.leaflet-popup-content-wrapper {
    border-radius: 0;
}

.button-group {
    float: right;
    clear: both;
}

.button-group button {
    border: none;
    background: none;
    text-transform: uppercase;
    color: #536DFE;
    cursor: pointer;
    padding: 8px;
}

.button-group button:hover {
    background-color: rgba(144, 144, 144, 0.4);
    color: black;
}

.clearfix {
    clear: both;
}

@media (min-width: 768px) {
    .map {
        top: 0;
        left: 320px;
        width: calc(100% - 320px);
        height: 100%;
        border-size: border-box;
        transition: width 0.25s ease-in;
    }

    .embedded .map {
        left: 0;
        width: 100%;
    }

    .sidebar {
        top: 0;
        bottom: 0;
        left: 0;
        width: 320px;
        height: 100%;
        z-index: 10000;
        box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.5);
    }

    .header-wrapper, .expand .header-wrapper, .collapse .header-wrapper {
        position: fixed;
        width: 320px;
        z-index: 10001;
    }

    ul.locations, .expand ul.locations, .collapse ul.locations {
        margin-top: 48px;
    }

    .collapse .sidebar, .expand .sidebar {
        height: 100%;
        overflow-y: auto;
    }

    .collapse .map, .expand .map {
        height: 100%;
    }

    .minimized .sidebar {
        width: 0;
        height: 100%;
    }

    .minimized .map {
        width: 100%;
    }

    .collapse .locations li {
        display: block;
    }

    .header-wrapper {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    }

    .header-wrapper.minimized {
        display: block;
    }

    .expand .locations li {
        display: none;
    }

    .expand .locations li.selected h3 a:before {
        content: "\2190";
        font-weight: bold;
        font-size: 36px;
        line-height: 0;
        position: relative;
        top: 6px;
    }

    .locations li.selected {
        display: block;
    }

    .locations li.selected h3 {
        background-color: #536DFE;
        color: white;
    }

    .collapse .locations li a {
        text-transform: none;
    }
}

.location-icon {
    text-shadow: 0 0 2px white;
}

.location-icon.smooth-transform {
    transition: transform 0.1s ease-out;
}

.time-today-3-hours {
    background-color: #4f1;
    color: #4f1;
}

.time-today-6-hours {
    background-color: #3c0;
    color: #3c0;
}

.time-today {
    background-color: #190;
    color: #190;
}

.time-yesterday {
    background-color: #0083cb;
    color: #0083cb;
}

.time-2-days {
    background-color: #ca31cb;
    color: #ca31cb;
}

.time-15-days {
    background-color: #ff7a00;
    color: #ff7a00;
}

.time-30-days {
    background-color: #dd3300;
    color: #dd3300;
}

.time-30-days-plus {
    background-color: #444;
    color: #444;
}

ul.route-legend-list {
    list-style-type: none;
    padding: 10px;
}

ul.route-legend-list li {
    margin-top: 8px;
}

.route-legend {
    display: inline-block;
    height: 0.7em;
    border: 0.5px solid rgba(0, 0, 0, 0.4);
    border-left: none;
    border-right: none;
    background-color: white;
    vertical-align: middle;
    margin-right: 8px;
}

.route-legend span[class|=time] {
    display: inline-block;
    width: 4em;
    height: 0.4em;
    position: relative;
    top: -0.6em;
}

ul.route-list {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.route-list button {
    border: none;
    border-radius: 2px;
    color: white;
    font-size: 14px;
    padding: 4px 8px 4px 8px;
}

.route-list h4 {
    font-size: 16px;
    display: inline;
}

.weather-widget {
}

.weather-symbol {
    width: 40px;
}

.weather-temp {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    left: -32px;
    top: -12px;
    text-shadow: 0 0 3px white;
}

.weather-report {
    font-size: 11px;
}

.locations li .weather-widget a {
    font-size: 10px;
    color: #aaa;
    padding: 6px 0 0 0;
}

.wind-direction-wrapper {
    display: inline-block;
}

.wind-direction {
    text-align: center;
    margin-top: -12px;
    display: block;
    position: relative;
    top: 10px;
    font-size: 40px;
    font-weight: bold;
    transform-origin: center;
    -ms-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -webkit-transform-origin: center;
}

.wind-speed {
    font-size: 10px;
}

.red            { background-color: #B03060; }
.orange         { background-color: #FE9A76; }
.yellow         { background-color: #FFD700; }
.olive          { background-color: #32CD32; }
.green          { background-color: #016936; }
.teal           { background-color: #008080; }
.blue           { background-color: #0E6EB8; }
.violet         { background-color: #EE82EE; }
.purple         { background-color: #B413EC; }
.pink           { background-color: #FF1493; }
.brown          { background-color: #A52A2A; }
.grey           { background-color: #A0A0A0; }
.black          { background-color: #000000; }

.geolocate-control-error {
    top: 1px;
    left: 34px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.geolocate-control-error.show {
    opacity: 1;
}

.info-wrapper {
    display: none;
    position: absolute;
    z-index: 1001;
    right: -320px;
    bottom: 48px;
    width: 320px;
    height: 240px;
    box-shadow: 0 0 6px black;
    transition: right 0.5s ease-out;
    cursor: initial;
}

.info-wrapper.show {
    display: block;
}

.info-wrapper.in {
    right: 16px;
}


.info-wrapper .close {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 4px black;
    background: none;
    border: none;
    cursor: pointer;
}