
ul,
li{
    margin: 0;
    padding: 0;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    -webkit-font-smoothing: antialiased;
}
button,
input,
select {
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    background: none;
    border: none;
    outline: none;
}
:root {
    --range-handle:          #FFC82F; /* non-focussed handle color */
    --range-handle-focus:    #FFC82F; /* focussed handle color */
    --bg: #fff;
    --text-strong: #323232;
    --text-medium: #505050;
    --close-icon: url("rw-icon-close.svg");
}
[data-theme="dark"] {
    --bg: #1b1c1f;
    --text-strong: #fff;
    --text-medium: #e8eaed;
    --close-icon: url("rw-icon-close-dark.svg");
}

.popup {
    z-index: 2;
    padding: 12px;
    background-color: var(--bg);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(7, 47, 75, 0.3);
}
#info-popup {
    position: absolute;
    top: 8px;
    left: 8px;
}
#info-popup .legend__minimize-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    background: var(--close-icon) no-repeat;
    border: none;
    outline: none;
}
#info-popup .legend__info-btn {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 12px;
    padding: 0;
}
#info-popup ul {
    display: flex;
    justify-content: center;
    margin: 0;
    list-style: none;
}
#info-popup ul .gradient {
    float: left;
    width: 16px;
    height: 204px;
    margin-right: 8px;
    border-radius: 12px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2) inset;
}
#info-popup ul li {
    margin: 0;
}
#info-popup ul li .precipitation-name {
    margin: 0 25px 12px;
    color: var(--text-strong);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
    text-transform: uppercase;
}
#info-popup .color-scheme {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 85%;
}
#info-popup .color-scheme li {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--text-medium);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}
#info-popup .color-scheme div {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2) inset;
}
#info-popup li:last-child {
    margin-left: 30px;
}
#info-popup .color-scheme li:last-child {
    margin-left: 0;
}
#info-popup.legend-minimized {
    padding-right: 12px;
}
#info-popup.legend-minimized ul li .precipitation-name,
#info-popup.legend-minimized .color-scheme,
#info-popup.legend-minimized .legend__minimize-btn {
    display: none;
}
#info-popup.legend-minimized .legend__info-btn {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 12px;
    padding: 0;
    background: url("./legend-Info-icon.svg") no-repeat center;
}
#info-popup.legend-minimized ul {
    margin-bottom: 0;
}
#info-popup.legend-minimized ul li:last-child {
    margin-left: 0;
}
#info-popup.legend-minimized ul li:last-child .gradient {
    margin-right: 0;
}
/* @media screen and (max-width: 425px) {
    #info-popup {
        display: none !important;
    }
} */
.color-s0 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        #dfdfdf 0%,
        #9bea8f 10%,
        #58ff42 20%,
        #47c278 30%,
        #4793f9 40%,
        #0c59ff 50%,
        #6153c1 60%,
        #ff93a3 70%,
        #ff3f35 80%,
        #c20511 90%,
        #ffeb0a 100%
    );
}
.color-s0 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        #8fffff 8.33%,
        #7fefff 16.67%,
        #6fdfff 25%,
        #5fcfff 33.33%,
        #4fafff 41.67%,
        #3f9fff 50%,
        #2f8fff 58.33%,
        #1f7fff 66.67%,
        #0f6fff 75%,
        #005fff 83.33%,
        #004fff 91.67%,
        #003fff 100%,
        #000fff 100%
    );
}
.color-s0 .color-overcast {
    background-color: #dfdfdf;
}
.color-s0 .color-drizzle {
    background-color: #9bea8f;
}
.color-s0 .color-light-rain {
    background-color: #47c278;
}
.color-s0 .color-moderate-rain {
    background-color: #0c59ff;
}
.color-s0 .color-shower {
    background-color: #ff93a3;
}
.color-s0 .color-hail {
    background-color: #c20511;
}
.color-s0 .color-light-snow {
    background-color: #7fefff;
}
.color-s0 .color-medium-snow {
    background-color: #5fcfff;
}
.color-s0 .color-heavy-snow {
    background-color: #3f9fff;
}
.color-s1 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        rgba(206, 192, 135, 0.59) 0%,
        rgba(226, 212, 155, 0.78) 10%,
        #8de 10%,
        #00a3e0 20%,
        #07a 30%,
        #058 40%,
        #004460 50%,
        #fe0 50%,
        #fa0 60%,
        #f70 70%,
        #f40 70%,
        #c10000 80%,
        #400 90%,
        #faf 90%,
        #f7f 100%
    );
}
.color-s1 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        #9fdfff 9.09%,
        #7fbfff 18.18%,
        #5f9fff 27.27%,
        #4f8fff 36.36%,
        #3f7fff 45.45%,
        #2f6fff 54.55%,
        #1f5fff 63.64%,
        #0f4fff 72.73%,
        #003fff 81.82%,
        #002fff 90.91%,
        #001fff 100%
    );
}
.color-s1 .color-overcast {
    background-color: #cec087;
}
.color-s1 .color-drizzle {
    background-color: #8de;
}
.color-s1 .color-light-rain {
    background-color: #07a;
}
.color-s1 .color-moderate-rain {
    background-color: #fe0;
}
.color-s1 .color-shower {
    background-color: #f40;
}
.color-s1 .color-hail {
    background-color: #faf;
}
.color-s1 .color-light-snow {
    background-color: #9fdfff;
}
.color-s1 .color-medium-snow {
    background-color: #5f9fff;
}
.color-s1 .color-heavy-snow {
    background-color: #3f7fff;
}
.color-s2 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        #087fdb 0%,
        #1c47e8 10%,
        #6e0dc6 20%,
        #c80f86 30%,
        #c06487 40%,
        #d2883b 50%,
        #fac431 60%,
        #fefb02 70%,
        #fe9a58 80%,
        #fe5f05 90%,
        #fd341c 100%
    );
}
.color-s2 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        #2fcfcf 0%,
        #9fdfff 9.09%,
        #7fbfff 18.18%,
        #5f9fff 27.27%,
        #4f8fff 36.36%,
        #3f7fff 45.45%,
        #2f6fff 54.55%,
        #1f5fff 63.64%,
        #0f4fff 72.73%,
        #003fff 81.82%,
        #002fff 90.91%,
        #001fff 100%
    );
}
.color-s2 .color-overcast {
    background-color: #087fdb;
}
.color-s2 .color-drizzle {
    background-color: #1c47e8;
}
.color-s2 .color-light-rain {
    background-color: #c80f86;
}
.color-s2 .color-moderate-rain {
    background-color: #d2883b;
}
.color-s2 .color-shower {
    background-color: #fefb02;
}
.color-s2 .color-hail {
    background-color: #fe5f05;
}
.color-s2 .color-light-snow {
    background-color: #9fdfff;
}
.color-s2 .color-medium-snow {
    background-color: #5f9fff;
}
.color-s2 .color-heavy-snow {
    background-color: #3f7fff;
}
.color-s3 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        #63eb63 0%,
        #3dc63d 10%,
        #1f9e34 20%,
        #116719 30%,
        #023002 48%,
        #023002 50%,
        #ff0 50%,
        #ff7f00 60%,
        #e60000 70%,
        #cd0000 80%,
        #9b0000 90%,
        #820000 100%
    );
}
.color-s3 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        #9fdfff 9.09%,
        #7fbfff 18.18%,
        #5f9fff 27.27%,
        #4f8fff 36.36%,
        #3f7fff 45.45%,
        #2f6fff 54.55%,
        #1f5fff 63.64%,
        #0f4fff 72.73%,
        #003fff 81.82%,
        #002fff 90.91%,
        #001fff 100%
    );
}
.color-s3 .color-overcast {
    background-color: #63eb63;
}
.color-s3 .color-drizzle {
    background-color: #3dc63d;
}
.color-s3 .color-light-rain {
    background-color: #116719;
}
.color-s3 .color-moderate-rain {
    background-color: #ff0;
}
.color-s3 .color-shower {
    background-color: #e60000;
}
.color-s3 .color-hail {
    background-color: #9b0000;
}
.color-s3 .color-light-snow {
    background-color: #9fdfff;
}
.color-s3 .color-medium-snow {
    background-color: #5f9fff;
}
.color-s3 .color-heavy-snow {
    background-color: #3f7fff;
}
.color-s5 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        #009cf7 0%,
        #0000f7 10%,
        lime 20%,
        #03b703 30%,
        #087305 40%,
        #ff0 50%,
        #ecce00 60%,
        #fe9300 70%,
        red 80%,
        #bd0000 90%,
        #bd0000 100%
    );
}
.color-s5 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        #e5fefe 0%,
        #a3f3ff 8.33%,
        #51cffd 16.67%,
        #0d99fc 25%,
        #0f75fb 33.33%,
        #1053fb 41.67%,
        #103ffb 50%,
        #0b32cf 58.33%,
        #0b32cf 66.67%,
        #0726a4 75%,
        #0726a4 83.33%,
        #031875 91.67%,
        #031875 100%
    );
}
.color-s5 .color-overcast {
    background-color: #00efe7;
}
.color-s5 .color-drizzle {
    background-color: #0000f7;
}
.color-s5 .color-light-rain {
    background-color: #03b703;
}
.color-s5 .color-moderate-rain {
    background-color: #03b703;
}
.color-s5 .color-shower {
    background-color: #fe9300;
}
.color-s5 .color-hail {
    background-color: #bd0000;
}
.color-s5 .color-light-snow {
    background-color: #51cffd;
}
.color-s5 .color-medium-snow {
    background-color: #0f75fb;
}
.color-s5 .color-heavy-snow {
    background-color: #103ffb;
}
.color-s6 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        #009f9f 0%,
        #008c4b 10%,
        #00d319 20%,
        #21fd22 30%,
        #fffd1b 40%,
        #ffd400 50%,
        #ffab00 60%,
        #ff6e00 70%,
        #f01002 80%,
        #d00523 90%,
        #e400b1 100%
    );
}
.color-s6 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        #9fdfff 9.09%,
        #7fbfff 18.18%,
        #5f9fff 27.27%,
        #4f8fff 36.36%,
        #3f7fff 45.45%,
        #2f6fff 54.55%,
        #1f5fff 63.64%,
        #0f4fff 72.73%,
        #003fff 81.82%,
        #002fff 90.91%,
        #001fff 100%
    );
}
.color-s6 .color-overcast {
    background-color: #009f9f;
}
.color-s6 .color-drizzle {
    background-color: #008c4b;
}
.color-s6 .color-light-rain {
    background-color: #21fd22;
}
.color-s6 .color-moderate-rain {
    background-color: #ffd400;
}
.color-s6 .color-shower {
    background-color: #ff6e00;
}
.color-s6 .color-hail {
    background-color: #d00523;
}
.color-s6 .color-light-snow {
    background-color: #9fdfff;
}
.color-s6 .color-medium-snow {
    background-color: #5f9fff;
}
.color-s6 .color-heavy-snow {
    background-color: #3f7fff;
}
.color-s7 .color-rain-gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 94, 182, 0.6) 20%,
        rgba(36, 88, 175, 0.87) 30%,
        #8e4b9b 40%,
        #fc5370 50%,
        #ffb76e 60%,
        #fffd05 70%,
        #fffd05 100%
    );
}
.color-s7 .color-snow-gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        #9fdfff 9.09%,
        #7fbfff 18.18%,
        #5f9fff 27.27%,
        #4f8fff 36.36%,
        #3f7fff 45.45%,
        #2f6fff 54.55%,
        #1f5fff 63.64%,
        #0f4fff 72.73%,
        #003fff 81.82%,
        #002fff 90.91%,
        #001fff 100%
    );
}
.color-s7 .color-overcast {
    background-color: #005eb6;
}
.color-s7 .color-drizzle {
    background-color: #005eb6;
}
.color-s7 .color-light-rain {
    background-color: #2458af;
}
.color-s7 .color-moderate-rain {
    background-color: #fc5370;
}
.color-s7 .color-shower {
    background-color: #fffd05;
}
.color-s7 .color-hail {
    background-color: #fffd05;
}
.color-s7 .color-light-snow {
    background-color: #9fdfff;
}
.color-s7 .color-medium-snow {
    background-color: #5f9fff;
}
.color-s7 .color-heavy-snow {
    background-color: #3f7fff;
}




#prevBtn {
    -webkit-mask-image: url(skip-previous.svg);
    mask-image: url(skip-previous.svg);
}
#nextBtn {
    -webkit-mask-image: url(skip-next.svg);
    mask-image: url(skip-next.svg);
}
#playBtn {
    -webkit-mask-image: url(play.svg);
    mask-image: url(play.svg);
}
#pauseBtn {
    -webkit-mask-image: url(pause.svg);
    mask-image: url(pause.svg);
}