.climate-table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    table-layout: auto;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 30px -1px 20px -1px;
}

.climate-table th {
    font-size: 16px;
    padding: 0 0 8px 0;
}

.climate-table td {
    width: 50px;
    min-width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    background: #f5f5f5;
    font-size: 16px;
    border: 3px solid #fff;
}

.climate-table th.subject,
.climate-table td.subject {
    width: auto;
    padding: 0 15px 0 0;
    text-align: left;
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 2;
    white-space: nowrap;
    border: 3px solid #fff;
}
.climate-table th.subject {
    border: 0;
}
.climate-table td.subject.wrap {
    white-space: normal;
    text-wrap: balance;
}
.climate-table td.subject::before {
    display: block;
    content: "";
    background: #fff;
    position: absolute;
    z-index: 1;
    top: -3px;
    left: -2px;
    bottom: -3px;
    width: 2px;
}

.climate-table td.value {
    width: auto;
    max-width: max-content;
    font-size: 14px;
    font-weight: 600;
    background: #f5f5f5;
    color: #212427;
    background-clip: content-box;
}

.climate-table td.temp-min-20 { background: #48b7ff; }
.climate-table td.temp-min-19 { background: #4ac0fe; }
.climate-table td.temp-min-18 { background: #51c3fe; }
.climate-table td.temp-min-17 { background: #56c9fe; }
.climate-table td.temp-min-16 { background: #5accfe; }
.climate-table td.temp-min-15 { background: #5fcdfe; }
.climate-table td.temp-min-14 { background: #68d6fd; }
.climate-table td.temp-min-13 { background: #6edeff; }
.climate-table td.temp-min-12 { background: #72e0fd; }
.climate-table td.temp-min-11 { background: #76e6fd; }
.climate-table td.temp-min-10 { background: #7be8fd; }
.climate-table td.temp-min-9 { background: #82ecfd; }
.climate-table td.temp-min-8 { background: #8cf2fd; }
.climate-table td.temp-min-7 { background: #95f9fd; }
.climate-table td.temp-min-6 { background: #9dfcfd; }
.climate-table td.temp-min-5 { background: #a3fdfe; }
.climate-table td.temp-min-4 { background: #aefefe; }
.climate-table td.temp-min-3 { background: #b8fefe; }
.climate-table td.temp-min-2 { background: #c2fffe; }
.climate-table td.temp-min-1 { background: #cdfdfe; }
.climate-table td.temp-0 { background: #d3fffe; }
.climate-table td.temp-1 { background: #defefd; }
.climate-table td.temp-2 { background: #e3ffed; }
.climate-table td.temp-3 { background: #ecffe2; }
.climate-table td.temp-4 { background: #f4ffd6; }
.climate-table td.temp-5 { background: #fffec6; }
.climate-table td.temp-6 { background: #fffdb5; }
.climate-table td.temp-7 { background: #fffaaa; }
.climate-table td.temp-8 { background: #fff77a; }
.climate-table td.temp-9 { background: #fff25e; }
.climate-table td.temp-10 { background: #fff055; }
.climate-table td.temp-11 { background: #ffeb4a; }
.climate-table td.temp-12 { background: #ffdf47; }
.climate-table td.temp-13 { background: #ffda42; }
.climate-table td.temp-14 { background: #ffd038; }
.climate-table td.temp-15 { background: #fcb831; }
.climate-table td.temp-16 { background: #fca02c; color: #fff; }
.climate-table td.temp-17 { background: #fd9628; color: #fff; }
.climate-table td.temp-18 { background: #fd8020; color: #fff; }
.climate-table td.temp-19 { background: #fd711b; color: #fff; }
.climate-table td.temp-20 { background: #fe5013; color: #fff; }
.climate-table td.temp-21 { background: #ff430f; color: #fff; }
.climate-table td.temp-22 { background: #ff340b; color: #fff; }
.climate-table td.temp-23 { background: #ff2708; color: #fff; }
.climate-table td.temp-24 { background: #ff2005; color: #fff; }
.climate-table td.temp-25 { background: #ff0e03; color: #fff; }
.climate-table td.temp-26 { background: #fc0d03; color: #fff; }
.climate-table td.temp-27 { background: #f90d03; color: #fff; }
.climate-table td.temp-28 { background: #ef0d03; color: #fff; }
.climate-table td.temp-29 { background: #e80d03; color: #fff; }
.climate-table td.temp-30 { background: #e60d03; color: #fff; }
.climate-table td.temp-31 { background: #dd0c02; color: #fff; }
.climate-table td.temp-32 { background: #db0c02; color: #fff; }
.climate-table td.temp-33 { background: #d40b02; color: #fff; }
.climate-table td.temp-34 { background: #d00b02; color: #fff; }
.climate-table td.temp-35 { background: #cc0b02; color: #fff; }
.climate-table td.temp-36 { background: #c30a02; color: #fff; }
.climate-table td.temp-37 { background: #c00a02; color: #fff; }
.climate-table td.temp-38 { background: #b60a02; color: #fff; }
.climate-table td.temp-39 { background: #b30902; color: #fff; }
.climate-table td.temp-40 { background: #b30a02; color: #fff; }
.climate-table td.temp-41 { background: #ad0902; color: #fff; }
.climate-table td.temp-42 { background: #a10802; color: #fff; }
.climate-table td.temp-43 { background: #9e0802; color: #fff; }
.climate-table td.temp-44 { background: #9a0802; color: #fff; }
.climate-table td.temp-45 { background: #990802; color: #fff; }
.climate-table td.temp-46 { background: #940702; color: #fff; }
.climate-table td.temp-47 { background: #8f0702; color: #fff; }
.climate-table td.temp-48 { background: #880702; color: #fff; }
.climate-table td.temp-49 { background: #860702; color: #fff; }
.climate-table td.temp-50 { background: #800702; color: #fff; }

.climate-table td.precip-0 { background: #e6f7ff; }
.climate-table td.precip-20 { background: #abe3ff; }
.climate-table td.precip-50 { background: #6dcefe; color: #fff; }
.climate-table td.precip-100 { background: #2eb9fe; color: #fff; }
.climate-table td.precip-200 { background: #29a7e5; color: #fff; }
.climate-table td.precip-300 { background: #2594cb; color: #fff; }
.climate-table td.precip-400 { background: #2185b7; color: #fff; }

.climate-table td.snow-0 { background: #fef0ff; }
.climate-table td.snow-5 { background: #fcceff; }
.climate-table td.snow-20 { background: #fea5e9; }
.climate-table td.snow-50 { background: #fb82c9; }
.climate-table td.snow-100 { background: #f56abb; }
.climate-table td.snow-200 { background: #e438a6; }

.climate-table td.uv-0 { background: #f5f5f5; }
.climate-table td.uv-1 { background: #9dbd00; color: #fff; }
.climate-table td.uv-2 { background: #9dbd00; color: #fff; }
.climate-table td.uv-3 { background: #ffbc01; color: #fff; }
.climate-table td.uv-4 { background: #ffbc01; color: #fff; }
.climate-table td.uv-5 { background: #ff9000; color: #fff; }
.climate-table td.uv-6 { background: #ff9000; color: #fff; }
.climate-table td.uv-7 { background: #f55023; color: #fff; }
.climate-table td.uv-8 { background: #f55023; color: #fff; }
.climate-table td.uv-9 { background: #c52b26; color: #fff; }
.climate-table td.uv-10 { background: #c52b26; color: #fff; }
.climate-table td.uv-11 { background: #9e47cc; color: #fff; }

.climate-table td.value .icons {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.climate-table td.storm-inactive {
    background: #8db600;
}
.climate-table td.storm-active {
    background: #ff0000;
}
    .climate-table td.storm-active img {
        display: block;
        margin: 0 auto;
    }

.climate-table td.best-red {
    background: #ff0000;
}
.climate-table td.best-orange {
    background: #ffa500;
}
.climate-table td.best-green {
    background: #8db600;
}
    .climate-table td.best-month img {
        display: block;
        margin: 0 auto;
    }

@media only screen and (max-width: 600px) {
    .climate-table {
        border-spacing: 6px;
    }
        .climate-table th,
        .climate-table td {
            font-size: 14px;
        }
        .climate-table td.value {
            width: auto;
        }
        .climate-table td.value {
            font-size: 12px;
        }
        .climate-table td.storm-active img {
            width: 12px;
            height: 12px;
        }
        .climate-table td.best-month img {
            width: 10px;
            height: 10px;
        }
}