/* mobile-specific rules */

@media (max-width: 1000px) {
    #map {
        height: 300px;
        width: 105%;
        display: none;
        /* visibility: visible; */
    }
    .container {
        padding-left: 0;
        padding-right: 0;
    }
    #menu {
        margin-right: 5%;
    }
    .mapboxgl-ctrl-bottom-right {
        right: 5%;
    }
    .mapboxgl-canvas {
        width: 100%;
    }
    #table-container {
        padding: 2%;
    }
    .pg-preamble {
        padding-left: 10px;
    }
    .pg-header {
        padding-left: 10px;
        margin-bottom: 30px;
    }
    .pg-links {
        /* height: 120px; */
        padding-left: 10px;
        /* margin-right: 10px; */
    }
    .pre-post-section {
        /* height: 120px; */
        padding-left: 25px;
        padding-right: 25px;
    }
    .mapboxgl-ctrl-geocoder--input {
        font-size: 1rem;
    }
    body {
        width: 100%;
    }
    .report-grey {
        font-size: 1.2rem;
    }
    .report-blue {
        font-size: 1.2rem;
    }
    .report-green {
        font-size: 1.2rem;
    }
    .report-orange {
        font-size: 1.2rem;
    }
}


/* rules for larger screens  */


/* @media (min-width: 1600px) {
    .container {
        width: 1900px;
        margin-right: 100px;
        margin-left: 100px;
        right: 10;
        max-width: 100%;
    }
    .mapboxgl-canvas {
        width: 1200px;
    }
} */


/* general rules */

.mapboxgl-ctrl-geocoder {
    min-width: 100%;
    width: 100px;
    font-size: 34px;
}

.mapboxgl-canvas {
    touch-action: auto !important;
}

.mapboxgl-ctrl-geocoder--input {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: black;
}

#geocoder {
    width: 100%;
    font-size: 24px;
    z-index: 1000;
}


/* @media(min-width:1000){ */

#map {
    width: 100%;
    height: 600px;
    visibility: hidden;
}


/* } */

.text-header {
    font-size: 40px;
    font-family: 'Roboto Condensed', sans-serif;
}

.text-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}

.text-body {
    font-family: 'Roboto', sans-serif;
}

.mapboxgl-ctrl-geocoder--input {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    color: black;
}

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.99;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#page-header {
    z-index: 1001;
}

#menu {
    background: #fff;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    border-radius: 3px;
    width: 120px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-family: 'Roboto', sans-serif;
}

#menu a {
    font-size: 13px;
    color: #404040;
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    text-align: center;
}

#menu a:last-child {
    border: none;
}

#menu a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

#menu a.active {
    background-color: #3887be;
    color: #ffffff;
}

#menu a.active:hover {
    background: #3074a4;
}

.white-text {
    color: white;
}

#legend {
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 18px;
    height: 88px;
    margin-bottom: 40px;
    width: 100px;
    right: 10px;
}

.legend-key {
    display: inline-block;
    border-radius: 20%;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.report-green {
    color: #129c49;
}

.report-orange {
    color: #f89721;
}

.report-blue {
    color: #2b87c8;
}

.report-grey {
    color: #a7a9ac;
}

.section-pink {
    background-color: #fa8bab;
    color: black;
}

.section-orange {
    color: black;
    background-color: #ffa93d;
}

.pg-header {
    background-color: white;
    color: black;
    margin-bottom: 30px;
}

.pg-header.footer {
    background-color: black;
    color: black;
    margin-bottom: 0;
}

.section-stripe {
    height: 2.55vw;
}

.pg-preamble {
    background-color: #f4f4f4;
    /* background-color: #e7ecd7; */
    color: black;
    /* height: 200px; */
    margin: 0;
    /* position: absolute; */
    top: 50%;
    /* -ms-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
}

.engage {
    background-color: #fcd9fb;
    color: black;
}

.pg-links {
    background-color: #cfe7f8;
    color: black;
    /* height: 250px; */
}

.pre-post-section {
    padding-top: 1.5em;
    padding-bottom: 2.5em;
}

.table-row {
    padding-bottom: 25px;
}

h2 {
    font-size: 1.8rem;
    font-weight: bolder;
}

body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

p {
    font-size: 1.2rem;
}

li {
    font-size: 1.3rem;
}

a {
    color: black;
}

dd {
    font-size: 1.2rem;
}

.lang-select {
    color: black;
    padding-left: 20px;
}

.translate {
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 1005;
}

.mapboxgl-popup {
    max-width: 400px;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}