/*=============================================================*/
/* Left Navigation Columns */
/*=============================================================*/
#frame-nav, #frame-mctrl {
    border-bottom: none;
    border-right: 1px solid darkgray;
    padding: 10px;
    overflow-y: auto;
}

#frame-nav {
    visibility: visible;
    flex: 0 0 325px;
}

#frame-mctrl {
    flex: 0 0 275px;
    display: none; 
}


#frame-content {
    flex: 1 1 0;
    display: flex;
    margin: 0;
    font-size: 14px;
}

.panel-opt-toggle {
    flex: 0 0 20px;
    background-color: #a8a8a8;
    border-right: 1px solid #000;
}

    .panel-opt-toggle .opt-toggle {
        width: 20px;
        margin-top: 12px;
        cursor: pointer;
    }

.frame-header {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--regional-mode);
    margin: 4px 0 16px 0;
    display: block;
}

.select-label {
    display: block;
    margin: 10px 0 4px 0;
}

select.map-options,
.nav-select {
    font-size: 0.9em;
    display: block;
    margin-bottom: 12px;
    height: 24px;
    width: 100%;
}

.info-icon {
    margin-left: 2px;
    cursor: pointer;
}

.info-select {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

    .info-select select {
        height: 24px;
        width: 100%;
    }

.radio-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
}

    .radio-container label {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.coordinate-table {
    border-collapse: separate;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    padding-top: 5px;
}

.gray-text {
    font-size: 0.80em;
    padding: 5px;
    font-style: italic;
    color: dimgrey;
}

/************************************************************/
/* jQuery UI Accordion Customization                        */
/************************************************************/
.ui-accordion .ui-accordion-content {
    padding: 20px;
}

.ui-accordion {
    font-family: 'PT Sans';
    font-size: 1.0em;
}

.ui-accordion-header {
    color: white !important;
}
    .ui-accordion-header a {
        color: white !important;
    }

.ui-accordion-header.ui-state-default {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.ui-icon {
    margin-top: 0px;
}

.ui-widget {
    font-family: 'PT Sans' !important;
}

.ui-accordion-header {
    transition: background-color 4s ease, color 4s ease;
}

.ui-state-active .ui-icon {
    background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_white_256x240.png) !important;
}

.ui-state-default .ui-icon  {
    background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_white_256x240.png) !important;
}

#header-container {
    transition: background-color 4s ease;
}

.frame-header {
    transition: color 4s ease;
}

#dash-head {
    transition: background-color 4s ease;
}

/* Regional mode */
.mode-regional .ui-accordion-header.ui-state-active {
    background: var(--regional-mode);
}

.mode-regional .ui-accordion-header.ui-state-default {
    background: var(--regional-mode);
}

#header-container.mode-regional {
    background-color: var(--regional-mode);
}

.frame-header.mode-regional {
    color: var(--regional-mode);
}

#dash-head.mode-regional {
    background-color: var(--regional-mode);
}

/* Site prioritization mode */
.mode-site .ui-accordion-header.ui-state-active {
    background: var(--site-mode);
}

.mode-site .ui-accordion-header.ui-state-default {
    background: var(--site-mode);
}

#header-container.mode-site {
    background-color: var(--site-mode);
}

.frame-header.mode-site {
    color: var(--site-mode);
}

#dash-head.mode-site {
    background-color: var(--site-mode);
}

.ui-accordion-content {
    padding: 20px;
    display: none; 
}

/*=============================================================*/
/* Map Layers */
/*=============================================================*/
.mlayer-container {
    font-size: 0.95em;
    padding: 4px 0;
    width: 100%;
}

    .mlayer-container > div:first-child {
        display: flex;
        align-items: center;
        width: 100%;
        flex-wrap: nowrap;
    }

    .mlayer-container label.leg-title {
        flex-grow: 1; 
        white-space: nowrap; 
        padding-bottom: 4px;
    }

    .mlayer-container .leg-subtitle {
        font-size: 12px;
        font-style: italic;
        text-indent: 0;
        margin: 8px 0;
    }

.mlegend-container {
    padding-left: 20px;
}

/* Legend list */
ul.legend {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}

    ul.legend li {
        margin-bottom: 4px;
    }

        ul.legend li > div {
            display: flex;
            align-items: center;
            gap: 6px;
        }

.leg-text {
    font-size: 0.95em;
}

/* Toggle button */
a.mlayer-toggle,
a.meth-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    height: 16px;
    font-size: .8em;
    border: 1px solid #a9a9a9;
    text-decoration: none;
}

/* Checkboxes */
.mlayer-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Labels */
label.disp-select {
    font-weight: normal;
    font-style: italic;
    padding-left: 25px;
}

label.leg-label {
    font-weight: normal;
}

/*=============================================================*/
/* Opacity Controls */
/*=============================================================*/
.opacity-container {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 10px 0 0;
}

.opacity-title {
    min-width: 45%;
    margin-left: 0px;
}

.opacity-slider {
    min-width: 85%;
    margin-top: 4px;
}

a,
input[type="button"],
ul li {
    outline: none !important;
}

    a.mlayer-toggle:focus,
    a.meth-toggle:focus {
        outline: none !important;
    }