@media only screen and (max-width:6000px) {

    .ClimateLoopControls {
        display: none;
    }

    .ClimateControls {
        height: 100%;
        width: 100%;
        font-size: 14px;
    }

    .ClimateDropDownDiv {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 5px;
    }

    #opacityScaleClimateDiv {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;

    }

    .ClimateControls label {
        flex: 2;
        padding-right: 0px;
    }

    .ClimateControls select,
    .ClimateControls input {
        flex: 1;
    }

    .climateSelect {
        padding: 5px 10px;
        /* Inner spacing */
        font-size: 12px;
        /* Readable font size */
        border-radius: 4px;
        /* Slightly rounded corners */
        border: 1px solid rgb(29, 52, 76);
        /* Light border */
        background-color: rgb(29, 52, 76);
        /* Light background */
        color: white;
        /* Dark text */
        cursor: pointer;
        transition-duration: 0.2s;
    }

    .climateSelect:hover {
        background-color: rgb(22, 39, 56)
    }

    #dateRangeClimateDiv {
        margin-top: 8px;
    }

    #dateRange {
        width: 80%;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 2px;
        margin-top: 8px;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        /* subtle border */
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.05);
        /* frosted-glass effect */
        color: #ffffff;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
        /* subtle modern touch */
    }

    #dateRange::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    #dateRange:focus {
        outline: none;
        border: 1px solid #666666;
        box-shadow: 0 0 8px rgba(102, 194, 255, 0.4);
        background-color: rgba(255, 255, 255, 0.08);
    }

    #submitClimateBut {
        background-color: rgb(29, 52, 76);
        border: 1px solid rgb(29, 52, 76);
        margin: 8px 10px;
        font-size: 16px;
        color: white;
        cursor: pointer;
        transition-duration: 0.2s;
        width: 100px;
        height: 30px;
        border-radius: 10px;
        font-size: 14px;
    }

    #submitClimateBut.expanding {
        transition: 0.5s;
        /* Disable transition while the text and width change */
    }

    #submitClimateBut:hover {
        background-color: rgb(229, 132, 17) !important;
        border-color: 1px solid rgb(229, 132, 17) !important;
        border-left: 1px solid rgb(229, 132, 17) !important;
        border-top-color: rgb(229, 132, 17) !important;
        border-bottom-color: rgb(229, 132, 17) !important;
        color: white;
    }

    /* See if the color bar works */
    #climateColorScaleBar {
        display: flex;
        flex-direction: column-reverse;
        /* So min is at bottom */
        width: 30px;
        height: 347px;
        border: 1px solid black;
        margin-right: 10px;
        margin-top: 9px;
    }

    .color-segment {
        position: relative;
        width: 100%;
        flex-grow: 1;
    }

    .color-segment::before,
    .color-segment::after {
        content: '';
        position: absolute;
        right: -5px;
        /* or left: -5px for left-side ticks */
        width: 6px;
        height: 1px;
        background-color: white;
    }

    .color-segment::before {
        top: 0px;
    }

    .color-segment::after {
        bottom: -1px;
        transform: translateY(-50%);
    }

    #climateLabels {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        height: 366px;
        font-size: 15px;
    }

    #climateScaleContainer {
        display: flex;
        align-items: flex-start;
        margin: 10px;
    }

    #divClimateScale {
        display: none;
    }

    #climateScaleUnits {
        margin-top: -5px;
    }

}