.rain-scale {
    background: white;
    padding: 3px 6px;
    font-size: 11px;
    color: #333;
    width: 200px;
    border-radius: 10px;
}
.rain-scale .gradient-bar {
    width: 100%;
    height: 15px;
    border: 1px solid rgb(0 0 0 / 27%);
    position: relative;
    margin-bottom: 4px;
    border-radius: 50px;
}
/* Original paleta (color=1) — zeleno-žuto-crvena */
#mapid[data-boja="1"] .rain-scale .gradient-bar {
    background: linear-gradient(90deg, #88ddee 0%, #00cc00 12%, #009900 22%, #006600 30%, #ffff00 38%, #ffcc00 46%, #ff9900 54%, #ff6600 62%, #ff0000 70%, #cc0000 78%, #990000 84%, #ff00ff 92%, #9900cc 100%);
}

/* Dark Sky paleta (color=2) — ljubičasto-roze (legacy) */
#mapid[data-boja="2"][data-doba="leto"] .rain-scale .gradient-bar {
    background: -webkit-gradient(linear, left top, right top, from(rgba(146,136,113,1)), color-stop(5%, rgba(206,192,135,1)), color-stop(6%, rgba(206,192,135,1)), color-stop(11%, rgba(136,221,238,1)), color-stop(16%, rgba(0,153,204,1)), color-stop(21%, rgba(0,119,160,1)), color-stop(26%, rgba(0,85,136,1)), color-stop(31%, rgba(255,238,0,1)), color-stop(36%, rgba(255,170,0,1)), color-stop(41%, rgba(255,119,0,1)), color-stop(46%, rgba(255,68,0,1)), color-stop(51%, rgba(238,0,0,1)), color-stop(55%, rgba(153,0,0,1)), color-stop(59%, rgba(153,0,0,1)), color-stop(63%, rgba(255,170,255,1)), color-stop(66%, rgba(255,119,255,1)), color-stop(73%, rgba(255,68,240,1)), color-stop(78%, rgba(255,0,255,1)), color-stop(83%, rgba(170,0,170,1)), color-stop(88%, rgba(170,0,170,1)), color-stop(97%, rgba(254,251,254,1)));
    background: -o-linear-gradient(left, rgba(146,136,113,1) 0%, rgba(206,192,135,1) 5%, rgba(206,192,135,1) 6%, rgba(136,221,238,1) 11%, rgba(0,153,204,1) 16%, rgba(0,119,160,1) 21%, rgba(0,85,136,1) 26%, rgba(255,238,0,1) 31%, rgba(255,170,0,1) 36%, rgba(255,119,0,1) 41%, rgba(255,68,0,1) 46%, rgba(238,0,0,1) 51%, rgba(153,0,0,1) 55%, rgba(153,0,0,1) 59%, rgba(255,170,255,1) 63%, rgba(255,119,255,1) 66%, rgba(255,68,240,1) 73%, rgba(255,0,255,1) 78%, rgba(170,0,170,1) 83%, rgba(170,0,170,1) 88%, rgba(254,251,254,1) 97%);
    background: linear-gradient(90deg, rgba(146,136,113,1) 0%, rgba(206,192,135,1) 5%, rgba(206,192,135,1) 6%, rgba(136,221,238,1) 11%, rgba(0,153,204,1) 16%, rgba(0,119,160,1) 21%, rgba(0,85,136,1) 26%, rgba(255,238,0,1) 31%, rgba(255,170,0,1) 36%, rgba(255,119,0,1) 41%, rgba(255,68,0,1) 46%, rgba(238,0,0,1) 51%, rgba(153,0,0,1) 55%, rgba(153,0,0,1) 59%, rgba(255,170,255,1) 63%, rgba(255,119,255,1) 66%, rgba(255,68,240,1) 73%, rgba(255,0,255,1) 78%, rgba(170,0,170,1) 83%, rgba(170,0,170,1) 88%, rgba(254,251,254,1) 97%);
}
#mapid[data-boja="2"][data-doba="zima"] .rain-scale .gradient-bar {
    background: -webkit-gradient(linear, left top, right top, from(rgba(146,136,113,1)), color-stop(5%, rgba(206,192,135,1)), color-stop(6%, rgba(206,192,135,1)), color-stop(11%, rgba(136,221,238,1)), color-stop(16%, rgba(0,153,204,1)), color-stop(21%, rgba(0,119,160,1)), color-stop(26%, rgba(0,85,136,1)), color-stop(31%, rgba(255,238,0,1)), color-stop(36%, rgba(255,170,0,1)), color-stop(41%, rgba(255,119,0,1)), color-stop(46%, rgba(255,68,0,1)), color-stop(51%, rgba(238,0,0,1)), color-stop(55%, rgba(153,0,0,1)), color-stop(59%, rgba(153,0,0,1)), color-stop(63%, rgba(255,170,255,1)), color-stop(66%, rgba(255,119,255,1)), color-stop(73%, rgba(255,68,240,1)), color-stop(78%, rgba(255,0,255,1)), color-stop(83%, rgba(170,0,170,1)), color-stop(88%, rgba(170,0,170,1)), color-stop(97%, rgba(254,251,254,1)));
    background: -o-linear-gradient(left, rgba(146,136,113,1) 0%, rgba(206,192,135,1) 5%, rgba(206,192,135,1) 6%, rgba(136,221,238,1) 11%, rgba(0,153,204,1) 16%, rgba(0,119,160,1) 21%, rgba(0,85,136,1) 26%, rgba(255,238,0,1) 31%, rgba(255,170,0,1) 36%, rgba(255,119,0,1) 41%, rgba(255,68,0,1) 46%, rgba(238,0,0,1) 51%, rgba(153,0,0,1) 55%, rgba(153,0,0,1) 59%, rgba(255,170,255,1) 63%, rgba(255,119,255,1) 66%, rgba(255,68,240,1) 73%, rgba(255,0,255,1) 78%, rgba(170,0,170,1) 83%, rgba(170,0,170,1) 88%, rgba(254,251,254,1) 97%);
    background: linear-gradient(90deg, rgba(146,136,113,1) 0%, rgba(206,192,135,1) 5%, rgba(206,192,135,1) 6%, rgba(136,221,238,1) 11%, rgba(0,153,204,1) 16%, rgba(0,119,160,1) 21%, rgba(0,85,136,1) 26%, rgba(255,238,0,1) 31%, rgba(255,170,0,1) 36%, rgba(255,119,0,1) 41%, rgba(255,68,0,1) 46%, rgba(238,0,0,1) 51%, rgba(153,0,0,1) 55%, rgba(153,0,0,1) 59%, rgba(255,170,255,1) 63%, rgba(255,119,255,1) 66%, rgba(255,68,240,1) 73%, rgba(255,0,255,1) 78%, rgba(170,0,170,1) 83%, rgba(170,0,170,1) 88%, rgba(254,251,254,1) 97%);
}

#mapid[data-boja="6"][data-doba="leto"] .rain-scale .gradient-bar {
    background: -webkit-gradient(linear, left top, right top, from(rgba(4,233,231,1)), color-stop(7%, rgba(0,239,231,1)), color-stop(12%, rgba(0,156,247,1)), color-stop(17%, rgba(0,0,247,1)), color-stop(22%, rgba(0,255,0,1)), color-stop(27%, rgba(3,183,3,1)), color-stop(32%, rgba(8,115,5,1)), color-stop(37%, rgba(255,255,0,1)), color-stop(42%, rgba(236,206,0,1)), color-stop(47%, rgba(254,147,0,1)), color-stop(52%, rgba(255,0,0,1)), color-stop(57%, rgba(189,0,0,1)), color-stop(67%, rgba(254,0,254,1)), color-stop(74%, rgba(254,0,254,1)), color-stop(82%, rgba(156,82,198,1)), color-stop(87%, rgba(156,82,198,1)), color-stop(98%, rgba(255,255,255,1)));
    background: -o-linear-gradient(left, rgba(4,233,231,1) 0%, rgba(0,239,231,1) 7%, rgba(0,156,247,1) 12%, rgba(0,0,247,1) 17%, rgba(0,255,0,1) 22%, rgba(3,183,3,1) 27%, rgba(8,115,5,1) 32%, rgba(255,255,0,1) 37%, rgba(236,206,0,1) 42%, rgba(254,147,0,1) 47%, rgba(255,0,0,1) 52%, rgba(189,0,0,1) 57%, rgba(254,0,254,1) 67%, rgba(254,0,254,1) 74%, rgba(156,82,198,1) 82%, rgba(156,82,198,1) 87%, rgba(255,255,255,1) 98%);
    background: linear-gradient(90deg, rgba(4,233,231,1) 0%, rgba(0,239,231,1) 7%, rgba(0,156,247,1) 12%, rgba(0,0,247,1) 17%, rgba(0,255,0,1) 22%, rgba(3,183,3,1) 27%, rgba(8,115,5,1) 32%, rgba(255,255,0,1) 37%, rgba(236,206,0,1) 42%, rgba(254,147,0,1) 47%, rgba(255,0,0,1) 52%, rgba(189,0,0,1) 57%, rgba(254,0,254,1) 67%, rgba(254,0,254,1) 74%, rgba(156,82,198,1) 82%, rgba(156,82,198,1) 87%, rgba(255,255,255,1) 98%);
}
#mapid[data-boja="6"][data-doba="zima"] .rain-scale .gradient-bar {
    background: -webkit-gradient(linear, left top, right top, from(rgba(4,233,231,1)), color-stop(7%, rgba(0,239,231,1)), color-stop(12%, rgba(0,156,247,1)), color-stop(17%, rgba(0,0,247,1)), color-stop(22%, rgba(0,255,0,1)), color-stop(27%, rgba(3,183,3,1)), color-stop(32%, rgba(8,115,5,1)), color-stop(37%, rgba(255,255,0,1)), color-stop(42%, rgba(236,206,0,1)), color-stop(47%, rgba(254,147,0,1)), color-stop(52%, rgba(255,0,0,1)), color-stop(57%, rgba(189,0,0,1)), color-stop(67%, rgba(254,0,254,1)), color-stop(74%, rgba(254,0,254,1)), color-stop(82%, rgba(156,82,198,1)), color-stop(87%, rgba(156,82,198,1)), color-stop(98%, rgba(255,255,255,1)));
    background: -o-linear-gradient(left, rgba(4,233,231,1) 0%, rgba(0,239,231,1) 7%, rgba(0,156,247,1) 12%, rgba(0,0,247,1) 17%, rgba(0,255,0,1) 22%, rgba(3,183,3,1) 27%, rgba(8,115,5,1) 32%, rgba(255,255,0,1) 37%, rgba(236,206,0,1) 42%, rgba(254,147,0,1) 47%, rgba(255,0,0,1) 52%, rgba(189,0,0,1) 57%, rgba(254,0,254,1) 67%, rgba(254,0,254,1) 74%, rgba(156,82,198,1) 82%, rgba(156,82,198,1) 87%, rgba(255,255,255,1) 98%);
    background: linear-gradient(90deg, rgba(4,233,231,1) 0%, rgba(0,239,231,1) 7%, rgba(0,156,247,1) 12%, rgba(0,0,247,1) 17%, rgba(0,255,0,1) 22%, rgba(3,183,3,1) 27%, rgba(8,115,5,1) 32%, rgba(255,255,0,1) 37%, rgba(236,206,0,1) 42%, rgba(254,147,0,1) 47%, rgba(255,0,0,1) 52%, rgba(189,0,0,1) 57%, rgba(254,0,254,1) 67%, rgba(254,0,254,1) 74%, rgba(156,82,198,1) 82%, rgba(156,82,198,1) 87%, rgba(255,255,255,1) 98%);
}

#mapid[data-boja="satellite"][data-doba="satellite"] .rain-scale .gradient-bar {
    background: -webkit-gradient(linear, left top, right top, from(#c2c2c2), to(#f5f5f5));
    background: -o-linear-gradient(left, #c2c2c2, #f5f5f5);
    background: linear-gradient(to right, #c2c2c2, #f5f5f5);
}
.rain-scale .skala_labels {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.rain-scale .skala_labels span {
    position: relative;
}