#cities:not(:only-of-type):first-of-type {
    display: none;
}

.loader-overlay .noaa-loader {
    top: 150px;
}

#title-data-info {
    display:         flex;
    justify-content: space-between;
    flex-wrap:       wrap;
    margin-bottom:   1em;
}

#section-title {
    margin-top: 0;
}

/* Nav Menu */
/************/
#cag-nav {
    margin-bottom: 1em;
}

#scopes {
    justify-content: flex-start;
    margin:          0 !important;
    position:        relative;
    z-index:         1;
}

#scopes li {
    position: relative;
}

#scopes > li > a {
    white-space: nowrap;
}

#scopes #scope-home {
    flex: 0;
}

.tabs > *.selected#scope-home::before,
.tabs > *#scope-home:hover::before {
    visibility:       hidden !important;
    background-color: transparent !important;
}
.tabs > *:not(.selected):hover > a { color: #1c1d1f !important; }

/* No dropdown section menu for selected scope
 * (hide icon indicating hidden dropdown menu)
 */
#scopes > .selected > a > .click-icon {
    display: none;
}

.selected-section-menu {
    margin-top: 0 !important;
    font-size: 0.8em;
}

@media (max-width: 767px) {
    #scopes {
        font-size: 14px;
    }

    .selected-section-menu {
        font-size: 12px;
    }
}

.section-menu {
    z-index:         2;
    display:         none;
    position:        absolute;
    min-width:       100%;
    font-size:       0.9em;
    border-style:    solid;
    border-color:    #dcdee0;
    border-width:    0 thin thin thin;
    list-style:      none;
    margin:          0 !important;
    padding:         0 !important;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07)
    ;
}

.section-menu > * {
    font-family:        "Source Sans Pro",sans-serif !important;
    text-align:         left;
    color:              #1c1d1f;
    margin:             0 !important;
    padding:            0 !important;
    position:           relative;
    cursor:             default;
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

.section-menu > * a {
    color:              #0070CC !important;
    background-color:   #ffffff;
    display:            block;
    height:             100%;
    padding:            0.75em 0.5em !important;
    color:              #1c1d1f;
    text-decoration:    none;
    font-family:        "Source Sans Pro",sans-serif;
    line-height:        1.25em;
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

.section-menu,
.section-menu > *:last-of-type,
.section-menu > *:last-of-type a {
    border-radius: 0 0 5px 5px;
}

@media (min-width: 576px) {
    .section-menu > * a {
        white-space: nowrap;
    }
}

.section-menu > *.selected a {
    cursor: default;
    background-color: #ffffff;
    color:            #1c1d1f !important;
}
.section-menu > *:not(.selected):hover a {
    color:            #0050d8 !important;
    background-color: #dcdee0;
}
/************/
/* Nav Menu */

/* Data Info */
/*************/
#data-info .modal-body { padding-top: 0; }

#data-info { font-size: 14px; }

#regional-data-info {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
}

#regional-data-info > div:first-of-type {
    flex: 1 0 59%;
}

#regional-data-info > div:last-of-type {
    flex: 1 0 40%;
}

#cities th {
    position: sticky;
    top:      0;
    z-index:  2;
}

#cities td.id,
#cities td.begdate {
    text-align: right;
}

@media (max-width: 991px) {
    .monthlong { display: none; }
}

@media (min-width: 430px) {
    #cities td.id {
        white-space: nowrap;
    }
}

#cities tr.ushcn {
    background-color: #a8f2ff;
}
#cities tr.ushcn:nth-child(2n) {
    background-color: #52daf2;
}

#cities tr.ushcn a {
    color: #0050d8;
}
#cities tr.ushcn:nth-child(2n) a {
    color: #004AC8;
}

@media (min-width: 992px) {
    #cities .state-name { display: table-cell; }
    #cities .state-abbr { display: none; }
}

@media (max-width: 991px) {
    #cities .state-name { display: none; }
    #cities .state-abbr { display: table-cell; }
}

@media (max-width: 575px) {
    #cities  { font-size: 0.8em; }
    #cities tr td.id {
        word-break: break-all;
    }

    #title-data-info > * {
        width:      100%;
        text-align: center;
    }
}
/*************/
/* Data Info */

/* Form */
/********/
#select-form #form-sections {
    display:         flex;
    justify-content: space-between;
}

#select-form #form-sections.with-note {
    flex-wrap: wrap-reverse;
}

#select-form #form-sections:not(.with-note) {
    flex-wrap:   wrap;
    align-items: flex-start;
}

#select-form #required {
    flex:        1 0 auto;
    line-height: 2.25em;
}

#select-form #required label {
    display:        inline-block;
    width:          100px;
    vertical-align: top;
}

#select-form #options {
    border-radius: 5px;
}

#select-form #options *:not(p):not(.noUi-value-horizontal) {
    font-size: 18px !important;
}
#select-form #options *:not(p).small {
    font-size: 0.8em !important;
}

#select-form #required select,
#select-form #required input:not([type=submit]):not(.latlon) {
    display: inline-block;
    width: calc(100% - 105px);
}

input.year-input {
    padding: 0.25em 0.7em;
    border: 1px solid var(--gray);
    border-radius: 3px;
}

@media (min-width: 992px) {
    #select-form #required {
        margin-right: 15px;
    }

    #select-form #options {
        flex: 0 1 33%;
    }

    #submit-div {
        position: relative;
    }
}

#form-notes {
    line-height: 1.35em;
    font-size:   16px;
    font-style:  italic;
}

#form-notes p:first-of-type {
    margin-top: 0;
}

:not(#select-form) #form-notes {
    margin-bottom: 1em;
}

@media (min-width: 1200px) {
    #select-form #required {
        flex: 1 0 calc(50% - 15px);
    }

    #select-form #form-notes {
        flex: 0 1 50%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #select-form #required {
        flex: 1 0 calc(60% - 15px);
    }

    #select-form #form-notes {
        flex: 0 1 40%;
    }
}

@media (max-width: 991px) {
    #select-form #required {
        width: 100%;
    }

    #select-form #options {
        width:      100%;
        margin-top: 0.5em;
    }

    #select-form #form-notes {
        width:         100%;
        margin-bottom: 1em;
    }
}

#select-form :disabled { background-color: #dcdee0; }
/********/
/* Form */

/* Global Coordinates & Start/End Years */
/****************************************/
.row-2-cols {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .row-2-cols > *:first-child {
        margin-right: 20px;
    }
    .row-2-cols > * {
        width: calc(50% - 10px);
    }
}

@media (max-width: 767px) {
    .row-2-cols > * {
        width: 100%;
    }
}

.row-2-cols > * {
    vertical-align: top;
    white-space: nowrap;
}

.row-2-cols input {
    display: inline-block;
    width:   calc(100% - 105px);
    padding: 0.25em 0.7em;
    border: 1px solid var(--gray);
    border-radius: 3px;
    line-height: 150%;
}
/****************************************/
/* Global Coordinates & Start/End Years */

/* NoUiSlider */
/**************/
#period-slider,
#base-period-slider,
#trend-period-slider,
#single-year-slider {

    /* Anchor the absolutely positioned pips and handles to this container */
    position: relative !important;

    /* Spacing & Track */
    margin-top: 0.5em;
    margin-bottom: 60px;
    margin-left: 15px;
    margin-right: 15px;
    height: 12px;
    border: none;
    background: #d3d9df;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;

    /* Connect Bar */
    .noUi-connect {
        background: #0176D5 !important;
    }

    /* Handles */
    .noUi-handle {
        position: absolute !important;
        z-index: 10 !important;
        width: 22px !important;
        height: 22px !important;
        right: -11px !important;
        top: -5px !important;
        border-radius: 50% !important;
        background: #00569c !important;
        border: 2px solid #162e51 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        cursor: grab;

        /* Kill default grip lines */
        &:before,
        &:after {
            display: none !important;
        }

        &:active {
            cursor: grabbing;
        }
    }

    /* --- Disabled Styling --- */
    &[disabled] {
        opacity: 0.6 !important;

        .noUi-connect {
            background: #a8b2bd !important;
        }
        .noUi-handle {
            border-color: #a8b2bd !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
        }
        .noUi-tooltip {
            background: #7a8794 !important;

            &::after {
                border-color: #7a8794 transparent transparent transparent !important;
            }
        }
    }

    .noUi-base {
        position: relative !important; 
        z-index: 10 !important;
        width: 100% !important;
        height: 100% !important;
    }
    /* --- Pips (Tick Marks & Labels) --- */
    .noUi-pips-horizontal {
        z-index: 1 !important;
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
        top: 100% !important;
        padding: 10px 0 0 0 !important;
        height: 50px !important;
        color: #2b3a4a !important;
    }

    /* Force absolute positioning so inline left percentages apply */
    .noUi-marker-horizontal,
    .noUi-value-horizontal {
        position: absolute !important;
    }

    /* The Text Labels (Years) */
    .noUi-value-horizontal {
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        padding-top: 0 !important; /* Adjust this to fine-tune the gap */
        transform: translateX(-50%) !important; /* Only shift X-axis */
    }

    /* Base marker styles */
    .noUi-marker-horizontal {
        width: 2px !important;
        top: 10px !important; /* Push down exactly to the padding edge */
    }

    /* Major Tick Marks (above the labels) */
    .noUi-marker-horizontal.noUi-marker-large {
        height: 10px !important;
        background: #2b3a4a !important;
    }

    /* Minor Tick Marks (between the labels) */
    .noUi-marker-horizontal.noUi-marker-normal,
    .noUi-marker-horizontal.noUi-marker-sub {
        height: 5px !important;
        background: #3d4551 !important;
    }

    /* Gray out text for unavailable years */
    .noUi-value.disabled-pip {
        color: #b0b0b0 !important;
        opacity: 0.6 !important;
    }

    /* Gray out the tick marks for unavailable years */
    .noUi-marker.disabled-marker {
        background: #e0e0e0 !important;
    }
}

/* Align single-year slider with the year input field */
#select-form #single-year-slider {
    margin-left: 105px;
    width: calc(100% - 105px);
    margin-bottom: 60px;
}

@media (max-width: 575px) {
    #select-form #single-year-slider {
        margin-left: 0;
        width: 100%;
    }
}
/**************/
/* NoUiSlider */

/* Values Table */
/****************/
#values-table {
    table-layout: fixed;
}

#values-table caption {
    font-style: normal;
}

/* --- Vertical Sticky (Header Rows) --- */

#values-table thead tr th {
    position: sticky;
    z-index: 2;
}

/* Row 1 sticks to the top */
#values-table thead tr:first-child th {
    top: 0;
}

/* Row 2 sticks below Row 1.
   Adjust this value to match the pixel height of your first row. */
#values-table thead tr:nth-child(2) th {
    top: 48px;
}

/* Ensure cells that span both rows stay above Row 2 */
#values-table thead tr th[rowspan="2"] {
    z-index: 3;
}

/* --- Horizontal Sticky (First Column) --- */

/* Sticky column for both header and body */
#values-table thead tr th[scope=row],
#values-table tbody tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* --- The Intersection (Top-Left Cell) --- */

/* This cell is both horizontally and vertically sticky.
   It needs the highest z-index to stay on top of everything. */
#values-table thead tr th[scope=row] {
    z-index: 4;
    padding: 0;
}

#values-table thead tr th[scope=row] a {
    text-decoration: none;
    color: #0076d6;
    display: block;
    padding: 10px 15px;
    border-right: solid 1px #8d9297;
}

table#values-table tr:nth-child(2n) th[scope=row] {
    background-color: #dcdee0;
}

table#values-table tr.even td a,
table#values-table tr:nth-child(2n) th[scope=row] a {
    color: #0050d8;
}

table#values-table tr.odd td a,
table#values-table tr:nth-child(2n+1) th[scope=row] a {
    color: #0076d6;
}

#values-table td:not(.location):not(.left) {
    text-align: right;
}

/*- Designations -*/
/*----------------*/
ul#designations {
    list-style: none;
    padding:    0 !important;
}

ul#designations .designation-symbol {
    width: 16px;
}

table td.rank {
    position: relative;
}

table td.rank .designation {
    position: absolute;
    display:  block;
}

table td.rank .designation {
    font-size: 0.8em;
    top:       8px;
}

table td.rank .designation.tie {
    right: 8px;
}

table td.rank .designation.insufficient-variability {
    right: 2px;
}
/*----------------*/
/*- Designations -*/

/****************/
/* Values Table */

.references li a {
    word-break: break-all;
}