:root {
    --cos2-gray-dark: #5B5B5B;
    --cos2-gray: #F2F2F2;
    --cos2-success: #47A375;
    --cos2-important: #FF0000;
    --cos2-accent: #FFA500;
    --primary: #0c99fd;
    --secondary: #47A375;
    --ol-button-size: 2.5rem;
    --ol-button-margin:.5rem;
}

@keyframes spin {
    100% {
        transform: rotate(-360deg);
    }
}

@font-face {
    font-family: "Notes ESA";
    src: url(fonts/NotesEsaReg.otf);
}

@font-face {
    font-family: "Notes ESA Bold";
    src: url(fonts/NotesEsaBol.otf);
}

.popover, .ui-widget, .ui-widget *:not(i) {
    font-family: "Notes ESA" !important;
}

html, body {
    font-family: "Notes ESA";
}

    body.loading .loading-indicator {
        display: grid;
    }

.material-icons {
    vertical-align: middle;
}

.loading-indicator {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: none;
    place-items: center;
}

    .loading-indicator .loading-wrapper {
        --offset: 10rem;
        left: calc(var(--offset) * -1);
        top: calc(var(--offset) * -1);
        transform: scale(.9);
    }

    .loading-indicator .logo {
        /*box-shadow: 1px 1px 28px 21px #06060657;*/
        border-radius: 10rem;
    }

    .loading-indicator .spin {
        position: absolute;
        animation: spin 4s linear infinite;
        border-radius: 100%;
    }

.icon {
    width: .5rem;
    vertical-align: baseline;
}

strong, .font-weight-bold {
    font-family: "Notes ESA Bold" !important;
    font-weight: 100 !important;
}

.user-panel {
    background-color: var(--cos2-gray-dark);
    color: white;
}

    .user-panel .btn {
        border-color: white;
        color: white;
    }

.user-button {
    background-color: var(--cos2-success);
}

.btn:not(.btn-link) {
    border: solid 1px;
    border-radius: 0;
}

    .btn.notifications {
        border: none;        
    }

        .btn.notifications sup {
            top: -8px;
            font-size: x-small;
        }

.notifications .bell {
    --size: 2.2rem;
    width: var(--size);
    height: var(--size);
    display: inline-block;
    background-image: url(img/cos/bells.png);
    background-position-x: -.1rem;
}

.notifications[data-severity="None"] .bell {
    background-position-x: 2.4rem;
    pointer-events: none;
}

.notifications[data-severity="Warning"] .bell {
    background-position-x: -2.6rem;
}

.notifications[data-severity="Info"] .bell {
    background-position-x: 4.8rem;
}

.btn.locate {
    border-color: var(--cos2-accent) !important;
    color: var(--cos2-accent);
}

.btn-primary {
    border-color: var(--cos2-success) !important;    
}

.bg-gray {
    background-color: var(--cos2-gray);
}

#sidebar {
    box-shadow: 4px 47px 40px var(--darken-9);
    background: white;
}

.wrapper {
    border-top: solid 1px #aaa;
}

.disaster-title {
    background-color: var(--cos2-gray);
}

.switch .badge-pill {
    font-size: x-small;
}

#search-results li {
    border-radius: .2em;
    padding: .2em;
    background-color: transparent;
    background-size: 1.5em 1.5em;
    white-space: nowrap;
    list-style: none;
    font-size: .8em;
    line-height: 1.6em;
}

[data-disaster-type] {
    --size: 1.5rem;
    display: inline-block;
    padding: 0;
    background-size: cover !important;
    height: var(--size);
    width: var(--size);
    border-radius: 2em;
    border: solid 1px var(--color-white);
    vertical-align: middle;
}


[data-disaster-type] {
    background: url(img/cos/disasters_icons/multiple.png) no-repeat left center;
}

[data-disaster-type="all"] {
    background: url(img/cos/disasters_icons/all.png) no-repeat center center;
}

[data-disaster-type="other"] {
    background: url(img/cos/disasters_icons/other.png) no-repeat left center;
}

[data-disaster-type="earthquake"] {
    background: url(img/cos/disasters_icons/earthquake.png) no-repeat left center;
}

[data-disaster-type="fire"] {
    background: url(img/cos/disasters_icons/wildfire.png) no-repeat left center;
}

[data-disaster-type="flood"] {
    background: url(img/cos/disasters_icons/flood.png) no-repeat left center;
}

[data-disaster-type="ice"] {
    background: url(img/cos/disasters_icons/sea_ice.png) no-repeat left center;
}

[data-disaster-type="landslide"] {
    background: url(img/cos/disasters_icons/landslide.png) no-repeat left center;
}

[data-disaster-type="ocean_wave"] {
    background: url(img/cos/disasters_icons/tsunami.png) no-repeat left center;
}

[data-disaster-type="oil_spill"] {
    background: url(img/cos/disasters_icons/oil_spill.png) no-repeat left center;
}

[data-disaster-type="snow"], [data-disaster-type="snowhazard"], [data-disaster-type="snow_hazard"] {
    background: url(img/cos/disasters_icons/snow_hazard.png) no-repeat left center;
}

[data-disaster-type="storm"], [data-disaster-type="cyclone"] {
    background: url(img/cos/disasters_icons/storm.png) no-repeat left center;
}

[data-disaster-type="volcano"], [data-disaster-type="volcano_eruption"] {
    background: url(img/cos/disasters_icons/volcanic_eruption.png) no-repeat left center;
}

[data-disaster-type="multiple"] {
    background: url(img/cos/disasters_icons/multiple.png) no-repeat left center;
}

.results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    grid-gap: .5rem;
}

.scrollable {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.search-performed .disaster-title h2,
.search-performed #activation-nav-tabs .badge,
.search-performed .tab-pane:not(#tab-search) {
    display: none !important;
}

.search-performed #activation-nav-tabs {
    pointer-events: none;
}

.search-performed .disable-on-search {
    opacity: .1;
}

.search-performed .show-on-search {
    display: flex !important;
}

.search-performed .highlight-on-search {
    box-shadow: 0 -3px 5px #4195fc;
    border: none !important;
}

.disaster-switch .badge {
    float: right;
    margin-left: 4px;
}

.disaster-switch, .switch__label {
    white-space: nowrap;
    display: flex;
    justify-content: start;
    align-items: center;
}

.disaster-type-label {
    max-width: 4rem;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ol-control button, .ol-scale-line {
    background-color: #4c4c4e;
}

.ol-control button {
    width: var(--ol-button-size);
    height: var(--ol-button-size);
    background-size: contain;
    opacity: .5;
    transition: all linear .2s;
}

    .ol-control button:hover {
        opacity: .8;
    }

.ol-scale-line {
    left: initial;
    position: fixed;
    bottom: 1.5rem;
    margin: .5rem;
    opacity: .7;
    right: 0;
}

.ol-zoom {
    top: var(--ol-button-margin);
    right: var(--ol-button-margin);
    left: initial;
}

.ol-mouse-position {
    top: initial;
    bottom: var(--ol-button-margin);
    left: var(--ol-button-margin);
    font-size: x-small;
    right: unset;
}


.ol-full-screen {
    right: var(--ol-button-margin);
    top: calc(2*var(--ol-button-size) + 3*var(--ol-button-margin));
}

.ol-full-screen button {
    background-image: url(img/cos/fullscreen.png);
}

.ol-zoom-in {
    background-image: url(img/cos/zoom_in.png);
}

.ol-zoom-out {
    background-image: url(img/cos/zoom_out.png);
}