h2 {
    margin-right: 120px;
}

#toggle-latest {
    width:            100px;
    top:              2.75rem;
    right:            15px;
    border-radius:    8px;
    color:            #3d4551;
    background-color: #f1f3f6;
    border:           solid 1px #dcdee0;
    transition:       background 0.25s ease,
                      color      0.25s ease,
                      border     0.25s ease,
                      box-shadow 0.25s ease;
}

#toggle-latest:hover {
    color:            #f1f3f6;
    background-color: #3d4551;
    border-color:     #8d9297;
    box-shadow:       0 4px 15px rgba(0,0,0,0.25);
}

#data-select,
#data-select > * {
    display: flex;
    gap:     10px;
}

#data-select {
    justify-content: space-between;
}

#data-select #data-scope-select button.selected {
    background-color: #3d4551;
    color: white;
}
#data-select #data-scope-select button[data-datascope="scope-national"]:enabled:not(.selected) {
    background-color: #d1e4f0;
    color: #3d4551;
}
#data-select #data-scope-select button[data-datascope="scope-national"].selected {
    background-color: #0050d8;
    color: white;
}
#data-select #data-scope-select button[data-datascope="scope-global"]:enabled:not(.selected) {
    background-color: #a8f2ff;
    color: #3d4551;
}
#data-select #data-scope-select button[data-datascope="scope-global"].selected {
    background-color: #00819B;
    color: white;
}
/**
#data-select #data-parameter-select button[data-dataparameter="parameter-tavg"]:enabled:not(.selected) {
    background-color: #fad9C6;
    color: #3d4551;
}
#data-select #data-parameter-select button[data-dataparameter="parameter-tavg"].selected {
    background-color: #b21f31;
    color: white;
}
#data-select #data-parameter-select button[data-dataparameter="parameter-pcp"]:enabled:not(.selected) {
    background-color: #c6e8e3;
    color: #3d4551;
}
#data-select #data-parameter-select button[data-dataparameter="parameter-pcp"].selected {
    background-color: #00441b;
    color: white;
}
/**/

#data {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    align-items:     stretch;
    gap:             5px;
    min-height:      450px;
}

.data-entry {
    padding:          8px;
    background-color: #3d4551;
    border-radius:    8px;
    display:          flex;
    flex-direction:   column;
    justify-content:  space-between;
    box-shadow:       0 10px 6px -6px #3d4551;
}

.data-entry .loader-overlay {
    width:         calc(100% - 16px);
    height:        calc(100% - 16px);
    border-radius: 8px;
}

.data-values {
    font-size:               18px;
    display:                 flex;
    justify-content:         space-between;
    background-color:        white;
    border-top-left-radius:  8px;
    border-top-right-radius: 8px;
    overflow:                hidden;
}

.data-values > * {
    flex:    1 0 auto;
    padding: 9px;
}

.data-values > *:first-child {
    border-top-left-radius: 8px;
}

.data-values > *:last-child {
    border-top-right-radius: 8px;
}

.map {
    padding-bottom:             8px;
    background-color:           white;
    border-bottom-left-radius:  8px;
    border-bottom-right-radius: 8px;
    flex:                       1;
    display:                    flex;
    align-items:                center;
}

@media (max-width: 1199px) {
    .data-entry .longname { display: none; }
}

@media (min-width: 992px) {
    .data-entry {
        flex: 0 0 calc(50% - 5px);
    }

    .map img {
        max-width: 550px;
    }
}

@media (min-width: 768px) {
    .data-entry { min-width: 457px; }
}

@media (max-width: 767px) {
    .data-entry {
        min-width: calc(100% - 16px);
    }

    .data-values {
        font-size: 16px;
    }

    #data-select .btn {
        font-size: 16px;
        padding: 0.3em 0.5em
    }
    #data-select .longname { display: none; }
}

@media (min-width: 576px) {
    .hi-lo-est {
        display: inline;
    }
}

@media (max-width: 575px) {
    .data-values {
        font-size: 14px;
        line-height: 110%;
    }
}

#image-modal-img { width: 70%; }
/**********/
/* Latest */

#product-categories { display: flex; }

#categories { flex: 0 1 auto; padding-top: 3em; }

#categories ul {
    margin:     0;
    padding:    0;
    list-style: none;
}

#categories ul li {
    margin:          0;
    padding:         0;
    list-style-type: none;
}

#categories ul li a {
    color:           #0076d6;
    text-decoration: none;
    font-family:     "Source Sans Pro", sans-serif;
    font-weight:     normal;
    font-size:       21px;
    line-height:     125%;
    padding:         5px 10px 5px 5px;
    display:         block;
}

#categories ul li.selected a {
    color:  #1c1d1f;
    cursor: default;
}

#scopes-products { width: 100%; }

#scopes { justify-content: flex-start; margin: 0 !important; }
#scopes > * { flex: 0 1 10rem; }
#scopes.no-scopes { visibility: hidden; }
#scopes.no-scopes > *.selected::before { background-color: transparent; }

#products {
    width:           100%;
    display:         flex;
    align-items:     stretch;
    justify-content: flex-start;
    flex-wrap:       wrap;
    margin:          0;
    padding:         0;
    list-style:      none;
 }

#products .card {
    flex:            1 0 calc(33% - 10px);
    margin:          10px 5px;
    padding:         0;
    list-style-type: none;
    vertical-align:  top;
    min-width:       230px;
}