@font-face {
    font-family: 'din-cond-bold';
    src: url('../fonts/d-dincondensed-bold-webfont.woff2') format('woff2'),
        url('../fonts/d-dincondensed-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din-cond';
    src: url('../fonts/d-dincondensed-webfont.woff2') format('woff2'),
        url('../fonts/d-dincondensed-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din';
    src: url('../fonts/d-din-webfont.woff2') format('woff2'),
        url('../fonts/d-din-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din-ital';
    src: url('../fonts/d-din-italic-webfont.woff2') format('woff2'),
        url('../fonts/d-din-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din-bold';
    src: url('../fonts/d-din-bold-webfont.woff2') format('woff2'),
        url('../fonts/d-din-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.site-status {
    background-color: #ac1212;
    color: #eff5ec;
    display: block;
    font: 400 15px/22px 'din', 'Helvetica Neue', Sans-serif;
    height: 50px;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    bottom: 0;
    width: 25vw;
    z-index: 5000;
}

body {
    margin: 0;
    padding: 0;
    font: 400 15px/22px 'din', 'Helvetica Neue', Sans-serif;
}

.sidebar {
    background: #eff5ec;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    height: calc(100vh - 60px);
    left: 0;
    overflow: hidden;
    padding: 0 0 0;
    position: absolute;
    top: 60px;
    transition: all 0.3s ease;
    width: 25%;
    -webkit-overflow-scrolling: touch;
}

h1 {
    font-family: 'din-cond';
    font-size: 34px;
    font-weight: normal;
    line-height: 40px;
    margin: 0 15px;
    padding: 10px 0;
}

.header {
    background-color: #1d181b;
    border-bottom: 1px solid #eee;
    color: #eff5ec;
    font-weight: normal;
    height: 60px;
    letter-spacing: 1px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    width: 25%;
}

a {
    color: #404040;
    text-decoration: none;
}

a:hover {
    color: #101010;
}

.ptr--ptr {
    background: #6a777e;
    color: #eff5ec !important;
    font-family: 'din-cond-bold';
    font-size: 18px !important;
    text-align: center;
    text-transform: uppercase;
}

.ptr--text {
    color: #eff5ec !important;
}

.listings {
    background: #eff5ec;
    height: calc(100vh - 80px);
    line-height: 1;
    overflow: auto;
    transition: background-color 0.3s;
}

.listings.loading {
    background: #eff5ec;
}

.listings .status {
    display: none;
    font-family: 'din-bold';
    font-size: 17px;
    letter-spacing: 1px;
    margin-top: 35px;
    opacity: 0;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.5s linear;
}

.listings.loading .status {
    display: block;
    opacity: 1;
    animation: loadingFadeLoop 1s infinite;
}

.listings .item {
    display: block;
    border-bottom: 1px solid #e4e4e4;
    text-decoration: none;
    transition: all 0.3s ease-out;
}

.listings .item>a {
    cursor: pointer;
    display: block;
    padding: 15px;
}

.listings .item:last-child {
    border-bottom: none;
}

.listings .item .title {
    display: block;
    /* color: #4c575d; */
    color: #000;
    font-family: 'din-cond', 'Helvetica Neue', Sans-serif;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
}

.listings .item .label {
    font-family: 'din-bold', 'Helvetica Neue', Sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 9px;
}

.listings .item .title small {
    font-weight: 400;
}

.listings .item.active .title,
.listings .item:hover .title {
    color: #4c575d;
}

.listings .item:hover,
.listings .item.active {
    background-color: #fafff8;
}

.listings .item .agency {
    display: block;
    font-family: 'din-bold', 'Helvetica Neue', Sans-serif;
    font-size: 0.75em;
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.listings .item .time {
    font-family: 'din';
    font-size: 0.75em;
}

.listings .item .relative-time {
    color: rgba(76, 87, 93, 0.5);
    font-family: 'din-ital';
}

.marker {
    border: none;
    cursor: pointer;
    height: 55px;
    width: 36px;
    background-image: url('../img/marker-fire.png');
    background-color: rgba(0, 0, 0, 0);
    background-size: 36px 55px;
    /* background-position: bottom center; */
}

.marker.portland-police {
    background-image: url('../img/marker-police.png');
}

.marker.gresham-police {
    background-image: url('../img/marker-police.png');
}

.marker.agency-medical {
    background-image: url('../img/marker-medical.png');
}

/* Marker tweaks */
.mapboxgl-popup {
    padding-bottom: 50px;
}

.custom-control {
    background: #fff;
    border-radius: 4px;
    clear: both;
    float: right;
    overflow: hidden;
    pointer-events: auto;
    margin: 10px 10px 0 0;
}

.custom-control button {
    background-color: transparent;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 30px;
    outline: none;
    padding: 0;
    pointer-events: auto;
    width: 30px;
}

.custom-control .recenter-map-button {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.32 10a2.32 2.32 0 1 1 -2.32-2.32 2.32 2.32 0 0 1 2.32 2.32zm5.23 0a.58.58 0 0 1 -.58.58h-1.48a5.53 5.53 0 0 1 -4.91 4.91v1.51a.58.58 0 1 1 -1.16 0v-1.51a5.53 5.53 0 0 1 -4.91-4.91h-1.51a.58.58 0 1 1 0-1.16h1.51a5.53 5.53 0 0 1 4.91-4.91v-1.51a.58.58 0 0 1 1.16 0v1.51a5.53 5.53 0 0 1 4.91 4.91h1.51a.58.58 0 0 1 .55.58zm-3.19 0a4.36 4.36 0 1 0 -4.36 4.36 4.37 4.37 0 0 0 4.36-4.36z' fill='%23000'/%3E%3C/svg%3E");
}

.custom-control .update-map-button {
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 20 20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5.3 8.3c.9-2.6 3.7-3.9 6.3-3 1.1.4 2 1.1 2.6 2l-.6.3c-.2.1-.3.3-.2.5 0 .1.1.1.1.2l2.3 1.4c.2.1.4 0 .5-.1 0 0 0-.1.1-.2l.3-2.7c0-.2-.1-.4-.4-.4-.1 0-.1 0-.2 0l-.6.3c-1.8-3-5.7-4-8.8-2.2-1.3.9-2.3 2.2-2.8 3.7-.1.2 0 .4.2.4h.1.8c.2.1.3 0 .3-.2z'/%3E%3Cpath d='m10 16.4c2.8 0 5.3-1.8 6.1-4.5.1-.2 0-.4-.2-.4h-.1-.8c-.1 0-.3.1-.3.2-.9 2.6-3.7 3.9-6.3 3-1.1-.4-2-1.1-2.5-2l.6-.3c.2-.1.3-.3.2-.5 0-.1-.1-.1-.1-.2l-2.3-1.4c-.2-.1-.4 0-.5.1 0 0 0 .1-.1.2l-.2 2.7c0 .2.1.4.4.4h.2l.6-.3c1 1.8 3.1 3 5.3 3z'/%3E%3Ccircle cx='10' cy='10' r='2.1'/%3E%3C/svg%3E");
    animation: loadingSpin 1s ease infinite;
    animation-play-state: paused;
}

.loading .custom-control .update-map-button {
    animation-play-state: running;
}

a.mapboxgl-ctrl-logo {
    opacity: 0.6;
}

a.mapboxgl-ctrl-logo:hover {
    opacity: 1;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    background: rgba(41, 47, 56, 0.9);
    font-size: 13px;
}

.mapboxgl-ctrl-attrib a {
    color: rgba(106, 119, 126, 0.7);
}

.mapboxgl-ctrl-attrib a:hover {
    color: rgb(129, 144, 153);
}

.mapboxgl-ctrl-attrib-inner {
    font-family: 'din-cond';
}

.mapboxgl-ctrl-attrib .mapbox-improve-map {
    color: #6a777e;
    color: rgba(106, 119, 126, 0.7);
    font-family: 'din-cond';
    font-weight: normal;
    text-decoration: underline rgba(106, 119, 126, 0.3);
}

.mapboxgl-popup-close-button {
    /* display: none; */
    border-radius: 5px;
    color: rgb(255, 255, 255);
    /* font-family: 'din-bold'; */
    line-height: 19px;
    opacity: 0.5;
    right: 2px;
    transition: opacity 0.2s linear;
    top: -13px;
    width: 21px;
}

.mapboxgl-popup-close-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.mapboxgl-popup-content {
    border-radius: 5px;
    font: 400 14px/21px 'din', 'Helvetica Neue', Sans-serif;
    padding: 0;
    width: 200px;
}

.mapboxgl-popup-content-wrapper {
    padding: 1%;
}

.mapboxgl-popup-content h3 {
    background: #4c575d;
    border-radius: 5px 5px 0 0;
    color: rgb(255, 255, 255);
    display: block;
    font-family: 'din';
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1;
    margin: 0;
    margin-top: -15px;
    padding: 6px 30px 6px 10px;
    text-transform: uppercase;
}

.mapboxgl-popup-content h3.agency-portland-police {
    background: #2d3278;
}

.mapboxgl-popup-content h3.agency-portland-fire {
    background: #ac1212;
}

.mapboxgl-popup-content h3.agency-medical {
    background: #327cbd;
}

.mapboxgl-popup-content h4 {
    margin: 0;
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding: 0 10px;
    font-weight: 400;
}

.mapboxgl-popup-content .location {
    font-family: 'din-cond';
    padding: 10px 10px 1px;
}

.mapboxgl-popup-content .agency {
    font-family: 'din-bold';
    font-size: 0.75em;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 6px 10px 0;
    text-transform: uppercase;
}

.mapboxgl-popup-content h4.agency-portland-police {
    color: #2d3278;
}

.mapboxgl-popup-content h4.agency-portland-fire {
    color: #ac1212;
}

.mapboxgl-popup-content h4.agency-medical {
    color: #327cbd;
}

.mapboxgl-popup-content .time {
    font-family: 'din';
    font-size: 12px;
    padding: 0 10px 10px;
}

.mapboxgl-popup-content div {
    padding: 10px;
}

.mapboxgl-container .leaflet-marker-icon {
    cursor: pointer;
}

.mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
    margin-top: 15px;
}

.mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
    border-bottom-color: #91c949;
}


#list-toggle {
    font-family: 'din-bold';
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 11px;
    height: 23px;
    position: absolute;
    left: 15px;
    line-height: 1;
    text-align: center;
    top: 15px;
    /* width: 23px; */
    display: none;
}

#reload {
    cursor: pointer;
    display: block;
    height: 23px;
    position: absolute;
    right: 17px;
    top: 18px;
    width: 23px;
}

#reload.loading {
    animation: loadingSpin 1s linear infinite;
}

#reset {
    cursor: pointer;
    display: block;
    height: auto;
    position: absolute;
    right: 60px;
    top: 18px;
    width: 28px;
}

.btn svg {
    height: 100%;
    opacity: 0.5;
    transition: all 0.2s linear;
    width: 100%;
}

.btn:hover svg {
    opacity: 1;
}

#map {
    position: absolute;
    left: 25%;
    top: 0;
    bottom: 0;
    width: 75%;
}

.pad {
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 1020px) {
    .header h1 {
        font-family: 'din-cond-bold';
        font-size: 24px;
        font-weight: normal;
        line-height: 30px;
        margin: 0 15px;
        padding: 14px 0;
        text-align: left;
    }
}

@media (max-width: 808px) {
    .header {
        height: 50px;
        width: 100vw;
    }

    .header h1 {
        font-family: 'din-cond-bold';
        font-size: 24px;
        font-weight: normal;
        line-height: 30px;
        margin: 0 15px;
        padding: 10px 0;
        text-align: center;
    }

    #list-toggle {
        display: block;
    }

    #reload {
        cursor: pointer;
        display: block;
        height: 18px;
        position: absolute;
        right: 17px;
        top: 16px;
        width: 18px;
    }

    #reload.loading {
        animation: loadingSpin 1s linear infinite;
    }

    #reset {
        cursor: pointer;
        display: block;
        height: 19px;
        position: absolute;
        right: 55px;
        top: 16px;
        width: 23px;
    }

    #map {
        height: calc(100vh - 50px);
        left: 0;
        top: 50px;
        width: 100%;
        z-index: 1000;
    }

    .sidebar {
        height: calc(100vh - 50px);
        left: 0;
        right: 0;
        top: 50px;
        width: 300px;
        z-index: 5000;
        left: -301px;
    }

    .sidebar.show {
        left: 0;
    }

    .sidebar .listings {}

    .listings .item .label {
        font-size: 15px;
    }

    .listings .item .time {
        font-size: 0.9em;
    }

}

@keyframes loadingSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes loadingFadeLoop {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}