/*global*/
html * {
    font-family: Roboto, "Helvetica Neue", sans-serif !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
html, body {
    height: 99%;
}
body {
    margin: 0;
}


/*miscellaneous*/
.link:hover {
    font-size: larger;
}
.underline {
    text-decoration: underline !important;
}
.background {
    fill: none;
    pointer-events: all;
}
.wrapper {
    display: block;
}
.zm-btn-wrapper {
    display: block;
}


/*header container*/
#header-div {
    background-color: #343A40;
    padding: 1%;
}
#header-div:hover {
    background-color: #363E45
}
@media screen and (min-width: 768px) {
    #header-div {
        padding: 0.5% 1% 0.5% 1%;
    }
}
@media screen and (max-width: 575px) {
    #header-div {
        padding: 1.5% 5% 1.5% 5%;
    }
}


/*header text*/
#header-text {
    color: #FFFFFF;
}
#header-text:hover {
    color: #F2F2F2;
}
#header-refs-span {
    float: right;
    color: #A9A9A9;
}
#header-refs-span:hover {
    cursor: pointer;
    color: #A2A2A2;
}
@media screen and (max-width: 575px) {
    #header-span, #header-refs-span {
        display: block;
    }
    #header-refs-span {
        float: none;
        font-size: smaller;
    }
}

/*comment container*/
#comment-div {
    background-color: #F5F5F5;
    padding: 1%;
}
#comment-div:hover {
    background-color: #F2F2F2;
}
@media screen and (min-width: 768px) {
    #comment-div {
        padding: 0.5% 1% 0.5% 1%;
    }
}
@media screen and (max-width: 575px) {
    #comment-div {
        padding: 1.5% 5% 1.5% 5%;
    }
}


/*comment text*/
#comment-text {
    color: #A9A9A9;
    font-size: small;
}
#comment-text:hover {
    color: #A2A2A2;
}


/*autocomplete*/
.form-control {
    background-color: lightblue;
    font-size: x-small !important;
    margin: 1% 0% 0% 1%;
    width: 33%;
}


/*hr break*/
#break {
    margin: 0 0;
    color: #A9A9A9;
}
.break-mobile {
    margin: 1% 5% 0% 5%;
    color: #A9A9A9;
}


/*footer container*/
#footer-div {
    padding-top: 1%;
}
@media screen and (min-width: 768px) {
    #footer-div {
        padding: 0.5% 1% 0% 1%;
    }
}
@media screen and (max-width: 575px) {
    #footer-div {
        padding: 1.5% 5% 5% 5%;
    }
}


/*footer text*/
#footer-text {
    color: #2F4F4F;
    font-size: x-small;
}
#footer-text:hover {
    color: #6D8484;
}
@media screen and (max-width: 575px) {
    #footer-text {
        font-size: 7.25px;
    }
}


/*map containers*/
#map-div {
    padding: 1.5%;
}
@media screen and (min-width: 992px) {
    #map-div {
        height: 48vw;
        max-height: 75%;
    }
}
@media screen and (min-width: 1065px) and (max-width: 1162px) {
    #map-div {
        height: 45vw;
        max-height: 72%;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    #map-div {
        height: 50vw;
        max-height: 68%;
        min-height: 64%;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
    #map-div {
        height: 56vw;
        max-height: 69%;
        min-height: 56%;
    }
}
@media screen and (max-width: 575px) {
    #map-div {
        height: 56vw;
        max-height: 48%;
        min-height: 33%;
    }
}
@media screen and (max-width: 767px) {
    #map-div {
        justify-content: center;
    }
}
#map-row {
    width: 100%;
    height: 100%;
}
#map-col {
    height: 100%;
}
@media screen and (max-width: 767px) {
    #map-col {
        justify-content: center;
    }
}
@media screen and (max-width: 575px) {
    #map-col {
        width: 100%;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    #map-col {
        padding-right: 2.5%;
    }
}


/*legend container*/
#legend-col {
    max-width: 20%;
    background-color: #F5F5F5;
    padding: 1%;
    overflow-wrap: break-word;
    font-size: small !important;
    color: #A9A9A9;
}
#legend-col:hover {
    background-color: #F2F2F2;
    color: #A2A2A2;
}
@media screen and (max-width: 991px) {
    #legend-col {
        max-width: 15%;
    }
}
#legend-div-mobile {
    padding: 1%;
    margin: 1%;
    background-color: #343A40;
    opacity: 0.75;
    color: #A9A9A9;
    overflow-wrap: break-word;
    font-size: small !important;
}
#legend-div-mobile:hover {
    background-color: #363E45;
    color: #A2A2A2;
}
@media screen and (min-width: 768px) {
    #legend-div-mobile {
        padding: 0.5% 1% 0.5% 1%;
    }
}
@media screen and (max-width: 575px) {
    #legend-div-mobile {
        padding: 1.5% 4% 1.5% 4%;
    }
}


/*legend text*/
t {
    font-size: larger !important;
    color: #2F4F4F !important;
}
lbl {
    color: #2F4F4F !important;
}
.article {
    font-size: smaller !important;
}
@media screen and (max-width: 991px) {
    t {
        font-size: large !important;
        color: #2F4F4F !important;
    }
    lbl {
        color: #E4E7EC !important;
    }
    .article {
        font-size: x-small !important;
    }
    .article-mobile {
        font-size: x-small !important;
        color: #C2C4C6 !important;
    }
}


/*zoom buttons container*/
#map-button {
    margin: 0.25% 1% 0% 0.25%;
    width: 2.5vw;
    background-color: #FFFFFF;
    opacity: 0.75;
}
#map-button:hover {
    background-color: #F2F2F2;
    opacity: 0.75;
}
#map-button-mobile {
    display: inline-flex;
    justify-content: center;
    margin: 1.5% 0% 1.5% 0%;
    background-color: #F5F5F5;
    opacity: 0.75;
}
#map-button-mobile:hover {
    background-color: #F2F2F2;
}


/*zoom buttons*/
.zoom-button {
    align-self: center;
    text-align: center;
    color: #A9A9A9;
}
.zoom-button:hover {
    color: #A2A2A2;
    cursor: pointer;
}
.zoom-button-mobile {
    display: inline-block;
    vertical-align: middle;
    padding: 0.25% 3% 0.25% 3%;
    align-self: center;
    text-align: center;
    font-size: x-small !important;
    color: #A9A9A9;
}
.zoom-button-mobile:hover {
    color: #6D8484;
    cursor: pointer;
}


/*references wrapper*/
#refs-div {
    display: none;
    opacity: 0;
}

/*references comment*/
#refs-comment-div {
    padding: 1%;
    background-color: #F5F5F5;
    color: #A9A9A9;
    font-size: small;
}
#refs-comment-div:hover {
    background-color: #F2F2F2;
    color: #A2A2A2;
}
@media screen and (min-width: 768px) {
    #refs-comment-div {
        padding: 0.5% 1% 0.5% 1%;
    }
}
@media screen and (max-width: 575px) {
    #refs-comment-div {
        padding: 1.5% 5% 1.5% 5%;
    }
}
#refs-comment-text {
    line-height: 1.5 !important;
}


/*references list*/
#refs-text {
    display: inline;
    justify-content: center;
    padding: 1% 0% 1% 0%;
}
@media screen and (max-width: 575px) {
    #refs-text {
        line-height: 1 !important;
    }
}
.list-group-item {
    font-size: medium;
    padding: 1% 1% 1% 1%;
}
.list-group-item:hover {
    background-color: #F5F5F5;
}
@media screen and (min-width: 768px) {
    .list-group-item {
        padding: 1% 1% 1% 1%;
    }
}
@media screen and (max-width: 575px) {
    .list-group-item {
        padding: 1.5% 5% 1.5% 5%;
    }
    .ref-link {
        font-size: small;
    }
}
.ref-sub {
    font-size: small;
    color: #A9A9A9;
}
@media screen and (max-width: 575px) {
    .ref-sub {
        font-size: x-small;
    }
}