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

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

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

@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Regular.ttf");
}

@font-face {
    font-family: "OpenSansBold";
    src: url("../fonts/OpenSans-Bold.ttf");
}

html {
    font-size: 14px;
}

body.main-map {
    overflow-y: hidden;
}

/*body.warning-detail {
    overflow-y:hidden;
}*/

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
}

.navbar {
    margin-bottom: 0rem !important;
}

#map {
    width: 100%;
    height: 100vh;
}

.container-fluid {
    margin: 0px;
    padding: 0px;
}

.warning-banner {
    background-color: #FF3333;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 1px 1px 3px #000000;
}

.side-panel-container {
    position: fixed;
    right: -315px;
    top: 175px;
    width: 350px;
    border: 1px solid #000000;
    border-radius: 10px 0px 0px 10px;
    background-color: lightgray;
    opacity: 0.85;
}

    .side-panel-container h3 {
        text-align: center;
        margin-top: 5px;
    }

.map-window .expand-arrow {
    position: relative;
    width: 35px;
    height: 355px;
    padding-top: 160px;
    padding-left: 5px;
    font-weight: bold;
    color: #FFFFFF;
    float: left;
    border-radius: 7px 0px 0px 7px;
    background-color: #414141;
}

.selector-panel .button {
    position: absolute;
    bottom: 20px;
    left: 120px
}

    .selector-panel .button button {
        border: 1px solid black;
        padding: 5px 10px 5px 10px;
        border-radius: 5px;
    }

        .selector-panel .button button:hover {
            background-color: #828282;
        }

.selector-panel label {
    text-shadow: 1px 1px 5px #414141;
}

#expand-arrow-collapse {
    display: none;
}

.map-window .side-panel {
    position: relative;
    left: 35px;
    width: 315px;
    height: 350px;
}

.warning-popup h2 {
    font-family: YouTubeSansBold;
    font-size: 2.0em;
    font-weight: bold;
    text-shadow: 1px 1px 9px #484848;
}

.warning-popup h3 {
    font-family: YouTubeSansRegular;
    font-size: 1.3em;
}

.warning-popup p {
    font-family: YouTubeSansRegular;
    font-size: 1.2em;
}

.warning-popup .more-information-link {
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    font-size: 1.3em;
}

    .warning-popup .more-information-link:hover {
        text-decoration: underline;
    }

.warning-count-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 175px;
    height: 45px;
    border-radius: 7px;
    background-color: #FFFFFF;
    box-shadow: 5px 5px 20px #000000;
    opacity: 0.65;
    padding: 10px;
}

    .warning-count-panel p {
        color: #000000;
    }

    .warning-count-panel .warning-count {
        float: right;
    }

.warning-detail {
    font-family: OpenSans;
    overflow-y: hidden;
}

.warning-details {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom:15px;
}

.warning-details .warning-detail-content {
    display:block;
}

.warning-details > * {
    padding-left: 15px;
}

.warning-details h1 {
    font-family: OpenSansBold;
    padding: 7px 2px 10px 37px;
    margin-left: -24px;
}

.warning-details h2 {
    font-family: OpenSansBold;
    font-size: 1.25em;
    padding-left: 15px;
}

.warning-details h3 {
    font-size:1.0em;
    font-weight:bold;
}

.warning-details .main-description {
    font-size: 0.8em;
    line-height: 17px;
}

.additional-properties {
    font-size:0.9em;
}

.additional-properties label, .additional-properties span {
    padding:5px;
    display:inline-block;
}

.additional-properties span {
    font-weight:bold;
}

    .additional-properties span.standard-label {
        width: 200px;
    }

    .additional-properties span.standard-label-value {
        width: 225px;
        border-radius:4px;
        font-weight:normal;
    }

    .additional-properties span.container-label {
        width: 500px;
        display: block;
        padding: 2px;
    }

    .hail-size-1 {
        background-color: lawngreen;
    }

.hail-size-2 {
    background-color: greenyellow;
}

.hail-size-3 {
    background-color: yellow;
}

.hail-size-4 {
    background-color: orange;
}

.hail-size-5 {
    background-color: orangered;
}

.hail-size-6 {
    background-color: red;
}

.hail-size-6 {
    background-color: deeppink;
}

.hail-size-7 {
    background-color: purple;
    color:#FFFFFF;
}

#warning-detail-panel {
    overflow-y:hidden;

}