.arrowNav {
    display: none;
}

#title-note {
    margin-bottom: 0.67em;
}

@media (min-width: 992px) {
    #title-note {
        display:         flex;
        justify-content: space-between;
        align-items:     flex-end;
        gap:             1em;
    }
    #title-note #rankingsTitle h4 { margin-bottom: 0; }
}

#periods-data-access {
    display:         flex;
    justify-content: space-between;
    flex-wrap:       wrap-reverse;
    align-items:     stretch;
    margin-bottom:   0.5em;
}

#period-view {
    display:         flex;
    justify-content: space-between;
    line-height:     120%;
    align-items:     flex-end;
    gap:             5px;
    margin-top:      5px;
}

#period-select {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
}

#period-select a {
    display:         block;
    text-align:      center;
    cursor:          pointer;
    color:           #0076d6;
    text-decoration: none;
    border-radius:   3px;
}

#period-select a:hover {
    color:            #0050d8;
    background-color: #b1d8ff;
}

#period-select a.selected {
    color:            #002b4f;
    background-color: #2491ff;
    cursor:           default;
    text-decoration:  none;
}

#rankings-table a { text-decoration: underline; }

@media (min-width: 1200px) {
    #rankingsTitle h4 {
        margin-bottom: 0;
    }

    #periods-data-access,
    #periods-data-access * {
        font-size: 20px;
    }

    #period-select > * { width: 30px; }

    #legend li {
        font-size: 20px;
        padding:   0.5em 0;
    }
}

@media (max-width: 1199px) {
    #download > * {
        margin-bottom: 1em;
        display: inline-block;
    }

    #legend li {
        font-size: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #periods-data-access,
    #periods-data-access * {
        font-size: 18px;
    }

    #period-select > * { width: 28px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    #periods-data-access,
    #periods-data-access * {
        font-size: 16px;
    }

    #period-select > * { width: 22px; }

    #rankings-table tr * {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    #period-view {
        width: 100%;
    }

    #periods-data-access,
    #periods-data-access * {
        font-size: 14px;
    }

    #rankings-table tr * {
        font-size:   12px;
        line-height: 110%;
    }

    #rankings-table caption,
    #rankings-table .since,
    #rankings-table .ties {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    #period-select > * { width: 20px; }
}

@media (max-width: 575px) {
    #period-view > *:first-of-type { max-width: 128px; }

    #period-select > * { width: 11%; }

    #period-select {
        width: calc(100% - 133px);
        min-width: 175px;
    }

    #rankings-table .mean,
    #rankings-table .record {
        display: none;
    }
}

table#rankings-table,
table#rankings-table caption {
    margin:  0;
    padding: 0;
}

#legend {
    display:     flex;
    white-space: nowrap;
    margin:      0 !important;
    padding:     0 !important;
    list-style:  none;
    font-style:  normal;
}

#legend li {
    flex:       1 0 auto;
    text-align: center;
    margin:     0 !important;
    color:      #000000;
}

th[scope=rowgroup] { color: #1c1d1f !important; }

.warm-cool .lowest       { background-color: #2166ac !important; color: #ffffff !important; }
.warm-cool .bottom-tenth { background-color: #67a9cf !important; }
.warm-cool .bottom-third { background-color: #d1e5f0 !important; }
.warm-cool .normal       { background-color: #f5f5f5 !important; }
.warm-cool .top-third    { background-color: #fddbc7 !important; }
.warm-cool .top-tenth    { background-color: #ef8a62 !important; }
.warm-cool .highest      { background-color: #b2182b !important; color: #ffffff !important; }

.warm-cool .lowest a { color: #90b9dc; }

.wet-dry .lowest       { background-color: #8c540a !important; color: #ffffff !important; }
.wet-dry .bottom-tenth { background-color: #d8b365 !important; }
.wet-dry .bottom-third { background-color: #f6e8c3 !important; }
.wet-dry .normal       { background-color: #f5f5f5 !important; }
.wet-dry .top-third    { background-color: #c7eae5 !important; }
.wet-dry .top-tenth    { background-color: #5ab4ac !important; }
.wet-dry .highest      { background-color: #01655e !important; color: #ffffff !important; }

#rankings-table a { color: #0050d8; }

.warm-cool .highest      a,
.warm-cool .lowest       a { color: #76f3ff !important; }

.wet-dry   .lowest       a,
.wet-dry   .highest      a { color: #c9ddff !important; }

.warm-cool .top-tenth    a,
.warm-cool .bottom-tenth a,
.wet-dry   .top-tenth    a,
.wet-dry   .bottom-tenth a { color: #003287 !important; }


#rankings-table td:not(.location):not(.ties):not(.period):not(.since) {
    text-align: right;
}

#rankings-table td.period {
    white-space: nowrap;
}

td.since > div {
    display:         flex;
    justify-content: space-between;
}