@randstad-design/orbit-multitheme
Version:
multitheme Front-end code based on Randstad Human Forward components
163 lines • 147 kB
CSS
.slider {
box-sizing: content-box;
max-width: 385px; }
.slider__label, .slider__tooltip, .slider__tooltip::before {
background: #fff; }
.slider__label {
font-size: 16px;
letter-spacing: 0;
line-height: 25px;
border: 1px solid #d7d7d7;
border-radius: 4px;
color: #0f1941;
display: inline-block;
padding: 5px 10px;
position: relative;
text-align: center;
z-index: 1; }
.slider__tooltip {
border: 1px solid #d7d7d7;
border-width: 0 1px 1px 0;
border-radius: 3px;
bottom: -6px;
height: 12px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: center;
transform-origin: center;
width: 12px;
z-index: 2; }
.slider__tooltip::before {
content: '';
display: block;
height: 23px;
margin: -6px 0 0 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 5px; }
.slider__range {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
display: block;
height: 100%;
min-height: 30px;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%; }
.slider__range:focus {
outline: none; }
.slider__range::-webkit-slider-runnable-track {
background: #d7d7d7;
height: 2px;
width: 100%; }
.slider__range::-webkit-slider-thumb {
background: #2175d9;
border-radius: 100%;
border: 0;
height: 13px;
width: 13px;
-webkit-transition: background-color 150ms;
transition: background-color 150ms;
-webkit-appearance: none;
appearance: none;
box-shadow: 1px 0 0 -5.5px #2175d9, 2px 0 0 -5.5px #2175d9, 3px 0 0 -5.5px #2175d9, 4px 0 0 -5.5px #2175d9, 5px 0 0 -5.5px #2175d9, 6px 0 0 -5.5px #2175d9, 7px 0 0 -5.5px #2175d9, 8px 0 0 -5.5px #2175d9, 9px 0 0 -5.5px #2175d9, 10px 0 0 -5.5px #2175d9, 11px 0 0 -5.5px #2175d9, 12px 0 0 -5.5px #2175d9, 13px 0 0 -5.5px #2175d9, 14px 0 0 -5.5px #2175d9, 15px 0 0 -5.5px #2175d9, 16px 0 0 -5.5px #2175d9, 17px 0 0 -5.5px #2175d9, 18px 0 0 -5.5px #2175d9, 19px 0 0 -5.5px #2175d9, 20px 0 0 -5.5px #2175d9, 21px 0 0 -5.5px #2175d9, 22px 0 0 -5.5px #2175d9, 23px 0 0 -5.5px #2175d9, 24px 0 0 -5.5px #2175d9, 25px 0 0 -5.5px #2175d9, 26px 0 0 -5.5px #2175d9, 27px 0 0 -5.5px #2175d9, 28px 0 0 -5.5px #2175d9, 29px 0 0 -5.5px #2175d9, 30px 0 0 -5.5px #2175d9, 31px 0 0 -5.5px #2175d9, 32px 0 0 -5.5px #2175d9, 33px 0 0 -5.5px #2175d9, 34px 0 0 -5.5px #2175d9, 35px 0 0 -5.5px #2175d9, 36px 0 0 -5.5px #2175d9, 37px 0 0 -5.5px #2175d9, 38px 0 0 -5.5px #2175d9, 39px 0 0 -5.5px #2175d9, 40px 0 0 -5.5px #2175d9, 41px 0 0 -5.5px #2175d9, 42px 0 0 -5.5px #2175d9, 43px 0 0 -5.5px #2175d9, 44px 0 0 -5.5px #2175d9, 45px 0 0 -5.5px #2175d9, 46px 0 0 -5.5px #2175d9, 47px 0 0 -5.5px #2175d9, 48px 0 0 -5.5px #2175d9, 49px 0 0 -5.5px #2175d9, 50px 0 0 -5.5px #2175d9, 51px 0 0 -5.5px #2175d9, 52px 0 0 -5.5px #2175d9, 53px 0 0 -5.5px #2175d9, 54px 0 0 -5.5px #2175d9, 55px 0 0 -5.5px #2175d9, 56px 0 0 -5.5px #2175d9, 57px 0 0 -5.5px #2175d9, 58px 0 0 -5.5px #2175d9, 59px 0 0 -5.5px #2175d9, 60px 0 0 -5.5px #2175d9, 61px 0 0 -5.5px #2175d9, 62px 0 0 -5.5px #2175d9, 63px 0 0 -5.5px #2175d9, 64px 0 0 -5.5px #2175d9, 65px 0 0 -5.5px #2175d9, 66px 0 0 -5.5px #2175d9, 67px 0 0 -5.5px #2175d9, 68px 0 0 -5.5px #2175d9, 69px 0 0 -5.5px #2175d9, 70px 0 0 -5.5px #2175d9, 71px 0 0 -5.5px #2175d9, 72px 0 0 -5.5px #2175d9, 73px 0 0 -5.5px #2175d9, 74px 0 0 -5.5px #2175d9, 75px 0 0 -5.5px #2175d9, 76px 0 0 -5.5px #2175d9, 77px 0 0 -5.5px #2175d9, 78px 0 0 -5.5px #2175d9, 79px 0 0 -5.5px #2175d9, 80px 0 0 -5.5px #2175d9, 81px 0 0 -5.5px #2175d9, 82px 0 0 -5.5px #2175d9, 83px 0 0 -5.5px #2175d9, 84px 0 0 -5.5px #2175d9, 85px 0 0 -5.5px #2175d9, 86px 0 0 -5.5px #2175d9, 87px 0 0 -5.5px #2175d9, 88px 0 0 -5.5px #2175d9, 89px 0 0 -5.5px #2175d9, 90px 0 0 -5.5px #2175d9, 91px 0 0 -5.5px #2175d9, 92px 0 0 -5.5px #2175d9, 93px 0 0 -5.5px #2175d9, 94px 0 0 -5.5px #2175d9, 95px 0 0 -5.5px #2175d9, 96px 0 0 -5.5px #2175d9, 97px 0 0 -5.5px #2175d9, 98px 0 0 -5.5px #2175d9, 99px 0 0 -5.5px #2175d9, 100px 0 0 -5.5px #2175d9, 101px 0 0 -5.5px #2175d9, 102px 0 0 -5.5px #2175d9, 103px 0 0 -5.5px #2175d9, 104px 0 0 -5.5px #2175d9, 105px 0 0 -5.5px #2175d9, 106px 0 0 -5.5px #2175d9, 107px 0 0 -5.5px #2175d9, 108px 0 0 -5.5px #2175d9, 109px 0 0 -5.5px #2175d9, 110px 0 0 -5.5px #2175d9, 111px 0 0 -5.5px #2175d9, 112px 0 0 -5.5px #2175d9, 113px 0 0 -5.5px #2175d9, 114px 0 0 -5.5px #2175d9, 115px 0 0 -5.5px #2175d9, 116px 0 0 -5.5px #2175d9, 117px 0 0 -5.5px #2175d9, 118px 0 0 -5.5px #2175d9, 119px 0 0 -5.5px #2175d9, 120px 0 0 -5.5px #2175d9, 121px 0 0 -5.5px #2175d9, 122px 0 0 -5.5px #2175d9, 123px 0 0 -5.5px #2175d9, 124px 0 0 -5.5px #2175d9, 125px 0 0 -5.5px #2175d9, 126px 0 0 -5.5px #2175d9, 127px 0 0 -5.5px #2175d9, 128px 0 0 -5.5px #2175d9, 129px 0 0 -5.5px #2175d9, 130px 0 0 -5.5px #2175d9, 131px 0 0 -5.5px #2175d9, 132px 0 0 -5.5px #2175d9, 133px 0 0 -5.5px #2175d9, 134px 0 0 -5.5px #2175d9, 135px 0 0 -5.5px #2175d9, 136px 0 0 -5.5px #2175d9, 137px 0 0 -5.5px #2175d9, 138px 0 0 -5.5px #2175d9, 139px 0 0 -5.5px #2175d9, 140px 0 0 -5.5px #2175d9, 141px 0 0 -5.5px #2175d9, 142px 0 0 -5.5px #2175d9, 143px 0 0 -5.5px #2175d9, 144px 0 0 -5.5px #2175d9, 145px 0 0 -5.5px #2175d9, 146px 0 0 -5.5px #2175d9, 147px 0 0 -5.5px #2175d9, 148px 0 0 -5.5px #2175d9, 149px 0 0 -5.5px #2175d9, 150px 0 0 -5.5px #2175d9, 151px 0 0 -5.5px #2175d9, 152px 0 0 -5.5px #2175d9, 153px 0 0 -5.5px #2175d9, 154px 0 0 -5.5px #2175d9, 155px 0 0 -5.5px #2175d9, 156px 0 0 -5.5px #2175d9, 157px 0 0 -5.5px #2175d9, 158px 0 0 -5.5px #2175d9, 159px 0 0 -5.5px #2175d9, 160px 0 0 -5.5px #2175d9, 161px 0 0 -5.5px #2175d9, 162px 0 0 -5.5px #2175d9, 163px 0 0 -5.5px #2175d9, 164px 0 0 -5.5px #2175d9, 165px 0 0 -5.5px #2175d9, 166px 0 0 -5.5px #2175d9, 167px 0 0 -5.5px #2175d9, 168px 0 0 -5.5px #2175d9, 169px 0 0 -5.5px #2175d9, 170px 0 0 -5.5px #2175d9, 171px 0 0 -5.5px #2175d9, 172px 0 0 -5.5px #2175d9, 173px 0 0 -5.5px #2175d9, 174px 0 0 -5.5px #2175d9, 175px 0 0 -5.5px #2175d9, 176px 0 0 -5.5px #2175d9, 177px 0 0 -5.5px #2175d9, 178px 0 0 -5.5px #2175d9, 179px 0 0 -5.5px #2175d9, 180px 0 0 -5.5px #2175d9, 181px 0 0 -5.5px #2175d9, 182px 0 0 -5.5px #2175d9, 183px 0 0 -5.5px #2175d9, 184px 0 0 -5.5px #2175d9, 185px 0 0 -5.5px #2175d9, 186px 0 0 -5.5px #2175d9, 187px 0 0 -5.5px #2175d9, 188px 0 0 -5.5px #2175d9, 189px 0 0 -5.5px #2175d9, 190px 0 0 -5.5px #2175d9, 191px 0 0 -5.5px #2175d9, 192px 0 0 -5.5px #2175d9, 193px 0 0 -5.5px #2175d9, 194px 0 0 -5.5px #2175d9, 195px 0 0 -5.5px #2175d9, 196px 0 0 -5.5px #2175d9, 197px 0 0 -5.5px #2175d9, 198px 0 0 -5.5px #2175d9, 199px 0 0 -5.5px #2175d9, 200px 0 0 -5.5px #2175d9, 201px 0 0 -5.5px #2175d9, 202px 0 0 -5.5px #2175d9, 203px 0 0 -5.5px #2175d9, 204px 0 0 -5.5px #2175d9, 205px 0 0 -5.5px #2175d9, 206px 0 0 -5.5px #2175d9, 207px 0 0 -5.5px #2175d9, 208px 0 0 -5.5px #2175d9, 209px 0 0 -5.5px #2175d9, 210px 0 0 -5.5px #2175d9, 211px 0 0 -5.5px #2175d9, 212px 0 0 -5.5px #2175d9, 213px 0 0 -5.5px #2175d9, 214px 0 0 -5.5px #2175d9, 215px 0 0 -5.5px #2175d9, 216px 0 0 -5.5px #2175d9, 217px 0 0 -5.5px #2175d9, 218px 0 0 -5.5px #2175d9, 219px 0 0 -5.5px #2175d9, 220px 0 0 -5.5px #2175d9, 221px 0 0 -5.5px #2175d9, 222px 0 0 -5.5px #2175d9, 223px 0 0 -5.5px #2175d9, 224px 0 0 -5.5px #2175d9, 225px 0 0 -5.5px #2175d9, 226px 0 0 -5.5px #2175d9, 227px 0 0 -5.5px #2175d9, 228px 0 0 -5.5px #2175d9, 229px 0 0 -5.5px #2175d9, 230px 0 0 -5.5px #2175d9, 231px 0 0 -5.5px #2175d9, 232px 0 0 -5.5px #2175d9, 233px 0 0 -5.5px #2175d9, 234px 0 0 -5.5px #2175d9, 235px 0 0 -5.5px #2175d9, 236px 0 0 -5.5px #2175d9, 237px 0 0 -5.5px #2175d9, 238px 0 0 -5.5px #2175d9, 239px 0 0 -5.5px #2175d9, 240px 0 0 -5.5px #2175d9, 241px 0 0 -5.5px #2175d9, 242px 0 0 -5.5px #2175d9, 243px 0 0 -5.5px #2175d9, 244px 0 0 -5.5px #2175d9, 245px 0 0 -5.5px #2175d9, 246px 0 0 -5.5px #2175d9, 247px 0 0 -5.5px #2175d9, 248px 0 0 -5.5px #2175d9, 249px 0 0 -5.5px #2175d9, 250px 0 0 -5.5px #2175d9, 251px 0 0 -5.5px #2175d9, 252px 0 0 -5.5px #2175d9, 253px 0 0 -5.5px #2175d9, 254px 0 0 -5.5px #2175d9, 255px 0 0 -5.5px #2175d9, 256px 0 0 -5.5px #2175d9, 257px 0 0 -5.5px #2175d9, 258px 0 0 -5.5px #2175d9, 259px 0 0 -5.5px #2175d9, 260px 0 0 -5.5px #2175d9, 261px 0 0 -5.5px #2175d9, 262px 0 0 -5.5px #2175d9, 263px 0 0 -5.5px #2175d9, 264px 0 0 -5.5px #2175d9, 265px 0 0 -5.5px #2175d9, 266px 0 0 -5.5px #2175d9, 267px 0 0 -5.5px #2175d9, 268px 0 0 -5.5px #2175d9, 269px 0 0 -5.5px #2175d9, 270px 0 0 -5.5px #2175d9, 271px 0 0 -5.5px #2175d9, 272px 0 0 -5.5px #2175d9, 273px 0 0 -5.5px #2175d9, 274px 0 0 -5.5px #2175d9, 275px 0 0 -5.5px #2175d9, 276px 0 0 -5.5px #2175d9, 277px 0 0 -5.5px #2175d9, 278px 0 0 -5.5px #2175d9, 279px 0 0 -5.5px #2175d9, 280px 0 0 -5.5px #2175d9, 281px 0 0 -5.5px #2175d9, 282px 0 0 -5.5px #2175d9, 283px 0 0 -5.5px #2175d9, 284px 0 0 -5.5px #2175d9, 285px 0 0 -5.5px #2175d9, 286px 0 0 -5.5px #2175d9, 287px 0 0 -5.5px #2175d9, 288px 0 0 -5.5px #2175d9, 289px 0 0 -5.5px #2175d9, 290px 0 0 -5.5px #2175d9, 291px 0 0 -5.5px #2175d9, 292px 0 0 -5.5px #2175d9, 293px 0 0 -5.5px #2175d9, 294px 0 0 -5.5px #2175d9, 295px 0 0 -5.5px #2175d9, 296px 0 0 -5.5px #2175d9, 297px 0 0 -5.5px #2175d9, 298px 0 0 -5.5px #2175d9, 299px 0 0 -5.5px #2175d9, 300px 0 0 -5.5px #2175d9, 301px 0 0 -5.5px #2175d9, 302px 0 0 -5.5px #2175d9, 303px 0 0 -5.5px #2175d9, 304px 0 0 -5.5px #2175d9, 305px 0 0 -5.5px #2175d9, 306px 0 0 -5.5px #2175d9, 307px 0 0 -5.5px #2175d9, 308px 0 0 -5.5px #2175d9, 309px 0 0 -5.5px #2175d9, 310px 0 0 -5.5px #2175d9, 311px 0 0 -5.5px #2175d9, 312px 0 0 -5.5px #2175d9, 313px 0 0 -5.5px #2175d9, 314px 0 0 -5.5px #2175d9, 315px 0 0 -5.5px #2175d9, 316px 0 0 -5.5px #2175d9, 317px 0 0 -5.5px #2175d9, 318px 0 0 -5.5px #2175d9, 319px 0 0 -5.5px #2175d9, 320px 0 0 -5.5px #2175d9, 321px 0 0 -5.5px #2175d9, 322px 0 0 -5.5px #2175d9, 323px 0 0 -5.5px #2175d9, 324px 0 0 -5.5px #2175d9, 325px 0 0 -5.5px #2175d9, 326px 0 0 -5.5px #2175d9, 327px 0 0 -5.5px #2175d9, 328px 0 0 -5.5px #2175d9, 329px 0 0 -5.5px #2175d9, 330px 0 0 -5.5px #2175d9, 331px 0 0 -5.5px #2175d9, 332px 0 0 -5.5px #2175d9, 333px 0 0 -5.5px #2175d9, 334px 0 0 -5.5px #2175d9, 335px 0 0 -5.5px #2175d9, 336px 0 0 -5.5px #2175d9, 337px 0 0 -5.5px #2175d9, 338px 0 0 -5.5px #2175d9, 339px 0 0 -5.5px #2175d9, 340px 0 0 -5.5px #2175d9, 341px 0 0 -5.5px #2175d9, 342px 0 0 -5.5px #2175d9, 343px 0 0 -5.5px #2175d9, 344px 0 0 -5.5px #2175d9, 345px 0 0 -5.5px #2175d9, 346px 0 0 -5.5px #2175d9, 347px 0 0 -5.5px #2175d9, 348px 0 0 -5.5px #2175d9, 349px 0 0 -5.5px #2175d9, 350px 0 0 -5.5px #2175d9, 351px 0 0 -5.5px #2175d9, 352px 0 0 -5.5px #2175d9, 353px 0 0 -5.5px #2175d9, 354px 0 0 -5.5px #2175d9, 355px 0 0 -5.5px #2175d9, 356px 0 0 -5.5px #2175d9, 357px 0 0 -5.5px #2175d9, 358px 0 0 -5.5px #2175d9, 359px 0 0 -5.5px #2175d9, 360px 0 0 -5.5px #2175d9, 361px 0 0 -5.5px #2175d9, 362px 0 0 -5.5px #2175d9, 363px 0 0 -5.5px #2175d9, 364px 0 0 -5.5px #2175d9, 365px 0 0 -5.5px #2175d9, 366px 0 0 -5.5px #2175d9, 367px 0 0 -5.5px #2175d9, 368px 0 0 -5.5px #2175d9, 369px 0 0 -5.5px #2175d9, 370px 0 0 -5.5px #2175d9, 371px 0 0 -5.5px #2175d9, 372px 0 0 -5.5px #2175d9, 373px 0 0 -5.5px #2175d9, 374px 0 0 -5.5px #2175d9, 375px 0 0 -5.5px #2175d9, 376px 0 0 -5.5px #2175d9, 377px 0 0 -5.5px #2175d9, 378px 0 0 -5.5px #2175d9, 379px 0 0 -5.5px #2175d9, 380px 0 0 -5.5px #2175d9, 381px 0 0 -5.5px #2175d9, 382px 0 0 -5.5px #2175d9, 383px 0 0 -5.5px #2175d9, 384px 0 0 -5.5px #2175d9, 385px 0 0 -5.5px #2175d9;
margin-top: -6.5px;
position: relative;
top: 50%; }
.slider__range::-moz-range-track {
background: #2175d9;
height: 2px;
width: 100%; }
.slider__range::-moz-range-progress {
background: #d7d7d7; }
.slider__range::-moz-range-thumb {
background: #2175d9;
border-radius: 100%;
border: 0;
height: 13px;
width: 13px;
-moz-transition: background-color 150ms;
transition: background-color 150ms;
-moz-appearance: none;
appearance: none;
margin: 0; }
.slider__range::-ms-track {
background: transparent;
border: 0;
color: transparent;
height: 2px;
width: 100%; }
.slider__range::-ms-fill-lower {
background: #d7d7d7; }
.slider__range::-ms-fill-upper {
background: #2175d9; }
.slider__range::-ms-thumb {
background: #2175d9;
border-radius: 100%;
border: 0;
height: 13px;
width: 13px;
-ms-transition: background-color 150ms;
transition: background-color 150ms;
box-shadow: none;
margin: 0;
top: 0; }
.slider__range[data-rs-slider-range-line]::-ms-tooltip {
display: none; }
.slider__values {
font-size: 16px;
letter-spacing: 0;
line-height: 25px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%; }
.slider__value > span {
margin-left: 5px; }
.bg-variant-brand-primary .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-secondary); }
.bg-variant-brand-secondary .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-primary); }
.bg-variant-brand-tertiary .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-primary); }
.bg-variant-white .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-primary); }
.bg-variant-brand-quaternary .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-secondary); }
.bg-variant-brand-quinary .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-secondary); }
.bg-variant-brand-senary .slider .slider__range::-webkit-slider-runnable-track {
background: var(--color-brand-secondary); }
.bg-variant-brand-primary .slider .slider__range::-webkit-slider-thumb {
background: var(--color-brand-secondary);
border-radius: 100%;
border: 0;
height: 13px;
width: 13px;
-webkit-transition: background-color 150ms;
transition: background-color 150ms;
box-shadow: 1px 0 0 -5.5px var(--color-brand-secondary), 2px 0 0 -5.5px var(--color-brand-secondary), 3px 0 0 -5.5px var(--color-brand-secondary), 4px 0 0 -5.5px var(--color-brand-secondary), 5px 0 0 -5.5px var(--color-brand-secondary), 6px 0 0 -5.5px var(--color-brand-secondary), 7px 0 0 -5.5px var(--color-brand-secondary), 8px 0 0 -5.5px var(--color-brand-secondary), 9px 0 0 -5.5px var(--color-brand-secondary), 10px 0 0 -5.5px var(--color-brand-secondary), 11px 0 0 -5.5px var(--color-brand-secondary), 12px 0 0 -5.5px var(--color-brand-secondary), 13px 0 0 -5.5px var(--color-brand-secondary), 14px 0 0 -5.5px var(--color-brand-secondary), 15px 0 0 -5.5px var(--color-brand-secondary), 16px 0 0 -5.5px var(--color-brand-secondary), 17px 0 0 -5.5px var(--color-brand-secondary), 18px 0 0 -5.5px var(--color-brand-secondary), 19px 0 0 -5.5px var(--color-brand-secondary), 20px 0 0 -5.5px var(--color-brand-secondary), 21px 0 0 -5.5px var(--color-brand-secondary), 22px 0 0 -5.5px var(--color-brand-secondary), 23px 0 0 -5.5px var(--color-brand-secondary), 24px 0 0 -5.5px var(--color-brand-secondary), 25px 0 0 -5.5px var(--color-brand-secondary), 26px 0 0 -5.5px var(--color-brand-secondary), 27px 0 0 -5.5px var(--color-brand-secondary), 28px 0 0 -5.5px var(--color-brand-secondary), 29px 0 0 -5.5px var(--color-brand-secondary), 30px 0 0 -5.5px var(--color-brand-secondary), 31px 0 0 -5.5px var(--color-brand-secondary), 32px 0 0 -5.5px var(--color-brand-secondary), 33px 0 0 -5.5px var(--color-brand-secondary), 34px 0 0 -5.5px var(--color-brand-secondary), 35px 0 0 -5.5px var(--color-brand-secondary), 36px 0 0 -5.5px var(--color-brand-secondary), 37px 0 0 -5.5px var(--color-brand-secondary), 38px 0 0 -5.5px var(--color-brand-secondary), 39px 0 0 -5.5px var(--color-brand-secondary), 40px 0 0 -5.5px var(--color-brand-secondary), 41px 0 0 -5.5px var(--color-brand-secondary), 42px 0 0 -5.5px var(--color-brand-secondary), 43px 0 0 -5.5px var(--color-brand-secondary), 44px 0 0 -5.5px var(--color-brand-secondary), 45px 0 0 -5.5px var(--color-brand-secondary), 46px 0 0 -5.5px var(--color-brand-secondary), 47px 0 0 -5.5px var(--color-brand-secondary), 48px 0 0 -5.5px var(--color-brand-secondary), 49px 0 0 -5.5px var(--color-brand-secondary), 50px 0 0 -5.5px var(--color-brand-secondary), 51px 0 0 -5.5px var(--color-brand-secondary), 52px 0 0 -5.5px var(--color-brand-secondary), 53px 0 0 -5.5px var(--color-brand-secondary), 54px 0 0 -5.5px var(--color-brand-secondary), 55px 0 0 -5.5px var(--color-brand-secondary), 56px 0 0 -5.5px var(--color-brand-secondary), 57px 0 0 -5.5px var(--color-brand-secondary), 58px 0 0 -5.5px var(--color-brand-secondary), 59px 0 0 -5.5px var(--color-brand-secondary), 60px 0 0 -5.5px var(--color-brand-secondary), 61px 0 0 -5.5px var(--color-brand-secondary), 62px 0 0 -5.5px var(--color-brand-secondary), 63px 0 0 -5.5px var(--color-brand-secondary), 64px 0 0 -5.5px var(--color-brand-secondary), 65px 0 0 -5.5px var(--color-brand-secondary), 66px 0 0 -5.5px var(--color-brand-secondary), 67px 0 0 -5.5px var(--color-brand-secondary), 68px 0 0 -5.5px var(--color-brand-secondary), 69px 0 0 -5.5px var(--color-brand-secondary), 70px 0 0 -5.5px var(--color-brand-secondary), 71px 0 0 -5.5px var(--color-brand-secondary), 72px 0 0 -5.5px var(--color-brand-secondary), 73px 0 0 -5.5px var(--color-brand-secondary), 74px 0 0 -5.5px var(--color-brand-secondary), 75px 0 0 -5.5px var(--color-brand-secondary), 76px 0 0 -5.5px var(--color-brand-secondary), 77px 0 0 -5.5px var(--color-brand-secondary), 78px 0 0 -5.5px var(--color-brand-secondary), 79px 0 0 -5.5px var(--color-brand-secondary), 80px 0 0 -5.5px var(--color-brand-secondary), 81px 0 0 -5.5px var(--color-brand-secondary), 82px 0 0 -5.5px var(--color-brand-secondary), 83px 0 0 -5.5px var(--color-brand-secondary), 84px 0 0 -5.5px var(--color-brand-secondary), 85px 0 0 -5.5px var(--color-brand-secondary), 86px 0 0 -5.5px var(--color-brand-secondary), 87px 0 0 -5.5px var(--color-brand-secondary), 88px 0 0 -5.5px var(--color-brand-secondary), 89px 0 0 -5.5px var(--color-brand-secondary), 90px 0 0 -5.5px var(--color-brand-secondary), 91px 0 0 -5.5px var(--color-brand-secondary), 92px 0 0 -5.5px var(--color-brand-secondary), 93px 0 0 -5.5px var(--color-brand-secondary), 94px 0 0 -5.5px var(--color-brand-secondary), 95px 0 0 -5.5px var(--color-brand-secondary), 96px 0 0 -5.5px var(--color-brand-secondary), 97px 0 0 -5.5px var(--color-brand-secondary), 98px 0 0 -5.5px var(--color-brand-secondary), 99px 0 0 -5.5px var(--color-brand-secondary), 100px 0 0 -5.5px var(--color-brand-secondary), 101px 0 0 -5.5px var(--color-brand-secondary), 102px 0 0 -5.5px var(--color-brand-secondary), 103px 0 0 -5.5px var(--color-brand-secondary), 104px 0 0 -5.5px var(--color-brand-secondary), 105px 0 0 -5.5px var(--color-brand-secondary), 106px 0 0 -5.5px var(--color-brand-secondary), 107px 0 0 -5.5px var(--color-brand-secondary), 108px 0 0 -5.5px var(--color-brand-secondary), 109px 0 0 -5.5px var(--color-brand-secondary), 110px 0 0 -5.5px var(--color-brand-secondary), 111px 0 0 -5.5px var(--color-brand-secondary), 112px 0 0 -5.5px var(--color-brand-secondary), 113px 0 0 -5.5px var(--color-brand-secondary), 114px 0 0 -5.5px var(--color-brand-secondary), 115px 0 0 -5.5px var(--color-brand-secondary), 116px 0 0 -5.5px var(--color-brand-secondary), 117px 0 0 -5.5px var(--color-brand-secondary), 118px 0 0 -5.5px var(--color-brand-secondary), 119px 0 0 -5.5px var(--color-brand-secondary), 120px 0 0 -5.5px var(--color-brand-secondary), 121px 0 0 -5.5px var(--color-brand-secondary), 122px 0 0 -5.5px var(--color-brand-secondary), 123px 0 0 -5.5px var(--color-brand-secondary), 124px 0 0 -5.5px var(--color-brand-secondary), 125px 0 0 -5.5px var(--color-brand-secondary), 126px 0 0 -5.5px var(--color-brand-secondary), 127px 0 0 -5.5px var(--color-brand-secondary), 128px 0 0 -5.5px var(--color-brand-secondary), 129px 0 0 -5.5px var(--color-brand-secondary), 130px 0 0 -5.5px var(--color-brand-secondary), 131px 0 0 -5.5px var(--color-brand-secondary), 132px 0 0 -5.5px var(--color-brand-secondary), 133px 0 0 -5.5px var(--color-brand-secondary), 134px 0 0 -5.5px var(--color-brand-secondary), 135px 0 0 -5.5px var(--color-brand-secondary), 136px 0 0 -5.5px var(--color-brand-secondary), 137px 0 0 -5.5px var(--color-brand-secondary), 138px 0 0 -5.5px var(--color-brand-secondary), 139px 0 0 -5.5px var(--color-brand-secondary), 140px 0 0 -5.5px var(--color-brand-secondary), 141px 0 0 -5.5px var(--color-brand-secondary), 142px 0 0 -5.5px var(--color-brand-secondary), 143px 0 0 -5.5px var(--color-brand-secondary), 144px 0 0 -5.5px var(--color-brand-secondary), 145px 0 0 -5.5px var(--color-brand-secondary), 146px 0 0 -5.5px var(--color-brand-secondary), 147px 0 0 -5.5px var(--color-brand-secondary), 148px 0 0 -5.5px var(--color-brand-secondary), 149px 0 0 -5.5px var(--color-brand-secondary), 150px 0 0 -5.5px var(--color-brand-secondary), 151px 0 0 -5.5px var(--color-brand-secondary), 152px 0 0 -5.5px var(--color-brand-secondary), 153px 0 0 -5.5px var(--color-brand-secondary), 154px 0 0 -5.5px var(--color-brand-secondary), 155px 0 0 -5.5px var(--color-brand-secondary), 156px 0 0 -5.5px var(--color-brand-secondary), 157px 0 0 -5.5px var(--color-brand-secondary), 158px 0 0 -5.5px var(--color-brand-secondary), 159px 0 0 -5.5px var(--color-brand-secondary), 160px 0 0 -5.5px var(--color-brand-secondary), 161px 0 0 -5.5px var(--color-brand-secondary), 162px 0 0 -5.5px var(--color-brand-secondary), 163px 0 0 -5.5px var(--color-brand-secondary), 164px 0 0 -5.5px var(--color-brand-secondary), 165px 0 0 -5.5px var(--color-brand-secondary), 166px 0 0 -5.5px var(--color-brand-secondary), 167px 0 0 -5.5px var(--color-brand-secondary), 168px 0 0 -5.5px var(--color-brand-secondary), 169px 0 0 -5.5px var(--color-brand-secondary), 170px 0 0 -5.5px var(--color-brand-secondary), 171px 0 0 -5.5px var(--color-brand-secondary), 172px 0 0 -5.5px var(--color-brand-secondary), 173px 0 0 -5.5px var(--color-brand-secondary), 174px 0 0 -5.5px var(--color-brand-secondary), 175px 0 0 -5.5px var(--color-brand-secondary), 176px 0 0 -5.5px var(--color-brand-secondary), 177px 0 0 -5.5px var(--color-brand-secondary), 178px 0 0 -5.5px var(--color-brand-secondary), 179px 0 0 -5.5px var(--color-brand-secondary), 180px 0 0 -5.5px var(--color-brand-secondary), 181px 0 0 -5.5px var(--color-brand-secondary), 182px 0 0 -5.5px var(--color-brand-secondary), 183px 0 0 -5.5px var(--color-brand-secondary), 184px 0 0 -5.5px var(--color-brand-secondary), 185px 0 0 -5.5px var(--color-brand-secondary), 186px 0 0 -5.5px var(--color-brand-secondary), 187px 0 0 -5.5px var(--color-brand-secondary), 188px 0 0 -5.5px var(--color-brand-secondary), 189px 0 0 -5.5px var(--color-brand-secondary), 190px 0 0 -5.5px var(--color-brand-secondary), 191px 0 0 -5.5px var(--color-brand-secondary), 192px 0 0 -5.5px var(--color-brand-secondary), 193px 0 0 -5.5px var(--color-brand-secondary), 194px 0 0 -5.5px var(--color-brand-secondary), 195px 0 0 -5.5px var(--color-brand-secondary), 196px 0 0 -5.5px var(--color-brand-secondary), 197px 0 0 -5.5px var(--color-brand-secondary), 198px 0 0 -5.5px var(--color-brand-secondary), 199px 0 0 -5.5px var(--color-brand-secondary), 200px 0 0 -5.5px var(--color-brand-secondary), 201px 0 0 -5.5px var(--color-brand-secondary), 202px 0 0 -5.5px var(--color-brand-secondary), 203px 0 0 -5.5px var(--color-brand-secondary), 204px 0 0 -5.5px var(--color-brand-secondary), 205px 0 0 -5.5px var(--color-brand-secondary), 206px 0 0 -5.5px var(--color-brand-secondary), 207px 0 0 -5.5px var(--color-brand-secondary), 208px 0 0 -5.5px var(--color-brand-secondary), 209px 0 0 -5.5px var(--color-brand-secondary), 210px 0 0 -5.5px var(--color-brand-secondary), 211px 0 0 -5.5px var(--color-brand-secondary), 212px 0 0 -5.5px var(--color-brand-secondary), 213px 0 0 -5.5px var(--color-brand-secondary), 214px 0 0 -5.5px var(--color-brand-secondary), 215px 0 0 -5.5px var(--color-brand-secondary), 216px 0 0 -5.5px var(--color-brand-secondary), 217px 0 0 -5.5px var(--color-brand-secondary), 218px 0 0 -5.5px var(--color-brand-secondary), 219px 0 0 -5.5px var(--color-brand-secondary), 220px 0 0 -5.5px var(--color-brand-secondary), 221px 0 0 -5.5px var(--color-brand-secondary), 222px 0 0 -5.5px var(--color-brand-secondary), 223px 0 0 -5.5px var(--color-brand-secondary), 224px 0 0 -5.5px var(--color-brand-secondary), 225px 0 0 -5.5px var(--color-brand-secondary), 226px 0 0 -5.5px var(--color-brand-secondary), 227px 0 0 -5.5px var(--color-brand-secondary), 228px 0 0 -5.5px var(--color-brand-secondary), 229px 0 0 -5.5px var(--color-brand-secondary), 230px 0 0 -5.5px var(--color-brand-secondary), 231px 0 0 -5.5px var(--color-brand-secondary), 232px 0 0 -5.5px var(--color-brand-secondary), 233px 0 0 -5.5px var(--color-brand-secondary), 234px 0 0 -5.5px var(--color-brand-secondary), 235px 0 0 -5.5px var(--color-brand-secondary), 236px 0 0 -5.5px var(--color-brand-secondary), 237px 0 0 -5.5px var(--color-brand-secondary), 238px 0 0 -5.5px var(--color-brand-secondary), 239px 0 0 -5.5px var(--color-brand-secondary), 240px 0 0 -5.5px var(--color-brand-secondary), 241px 0 0 -5.5px var(--color-brand-secondary), 242px 0 0 -5.5px var(--color-brand-secondary), 243px 0 0 -5.5px var(--color-brand-secondary), 244px 0 0 -5.5px var(--color-brand-secondary), 245px 0 0 -5.5px var(--color-brand-secondary), 246px 0 0 -5.5px var(--color-brand-secondary), 247px 0 0 -5.5px var(--color-brand-secondary), 248px 0 0 -5.5px var(--color-brand-secondary), 249px 0 0 -5.5px var(--color-brand-secondary), 250px 0 0 -5.5px var(--color-brand-secondary), 251px 0 0 -5.5px var(--color-brand-secondary), 252px 0 0 -5.5px var(--color-brand-secondary), 253px 0 0 -5.5px var(--color-brand-secondary), 254px 0 0 -5.5px var(--color-brand-secondary), 255px 0 0 -5.5px var(--color-brand-secondary), 256px 0 0 -5.5px var(--color-brand-secondary), 257px 0 0 -5.5px var(--color-brand-secondary), 258px 0 0 -5.5px var(--color-brand-secondary), 259px 0 0 -5.5px var(--color-brand-secondary), 260px 0 0 -5.5px var(--color-brand-secondary), 261px 0 0 -5.5px var(--color-brand-secondary), 262px 0 0 -5.5px var(--color-brand-secondary), 263px 0 0 -5.5px var(--color-brand-secondary), 264px 0 0 -5.5px var(--color-brand-secondary), 265px 0 0 -5.5px var(--color-brand-secondary), 266px 0 0 -5.5px var(--color-brand-secondary), 267px 0 0 -5.5px var(--color-brand-secondary), 268px 0 0 -5.5px var(--color-brand-secondary), 269px 0 0 -5.5px var(--color-brand-secondary), 270px 0 0 -5.5px var(--color-brand-secondary), 271px 0 0 -5.5px var(--color-brand-secondary), 272px 0 0 -5.5px var(--color-brand-secondary), 273px 0 0 -5.5px var(--color-brand-secondary), 274px 0 0 -5.5px var(--color-brand-secondary), 275px 0 0 -5.5px var(--color-brand-secondary), 276px 0 0 -5.5px var(--color-brand-secondary), 277px 0 0 -5.5px var(--color-brand-secondary), 278px 0 0 -5.5px var(--color-brand-secondary), 279px 0 0 -5.5px var(--color-brand-secondary), 280px 0 0 -5.5px var(--color-brand-secondary), 281px 0 0 -5.5px var(--color-brand-secondary), 282px 0 0 -5.5px var(--color-brand-secondary), 283px 0 0 -5.5px var(--color-brand-secondary), 284px 0 0 -5.5px var(--color-brand-secondary), 285px 0 0 -5.5px var(--color-brand-secondary), 286px 0 0 -5.5px var(--color-brand-secondary), 287px 0 0 -5.5px var(--color-brand-secondary), 288px 0 0 -5.5px var(--color-brand-secondary), 289px 0 0 -5.5px var(--color-brand-secondary), 290px 0 0 -5.5px var(--color-brand-secondary), 291px 0 0 -5.5px var(--color-brand-secondary), 292px 0 0 -5.5px var(--color-brand-secondary), 293px 0 0 -5.5px var(--color-brand-secondary), 294px 0 0 -5.5px var(--color-brand-secondary), 295px 0 0 -5.5px var(--color-brand-secondary), 296px 0 0 -5.5px var(--color-brand-secondary), 297px 0 0 -5.5px var(--color-brand-secondary), 298px 0 0 -5.5px var(--color-brand-secondary), 299px 0 0 -5.5px var(--color-brand-secondary), 300px 0 0 -5.5px var(--color-brand-secondary), 301px 0 0 -5.5px var(--color-brand-secondary), 302px 0 0 -5.5px var(--color-brand-secondary), 303px 0 0 -5.5px var(--color-brand-secondary), 304px 0 0 -5.5px var(--color-brand-secondary), 305px 0 0 -5.5px var(--color-brand-secondary), 306px 0 0 -5.5px var(--color-brand-secondary), 307px 0 0 -5.5px var(--color-brand-secondary), 308px 0 0 -5.5px var(--color-brand-secondary), 309px 0 0 -5.5px var(--color-brand-secondary), 310px 0 0 -5.5px var(--color-brand-secondary), 311px 0 0 -5.5px var(--color-brand-secondary), 312px 0 0 -5.5px var(--color-brand-secondary), 313px 0 0 -5.5px var(--color-brand-secondary), 314px 0 0 -5.5px var(--color-brand-secondary), 315px 0 0 -5.5px var(--color-brand-secondary), 316px 0 0 -5.5px var(--color-brand-secondary), 317px 0 0 -5.5px var(--color-brand-secondary), 318px 0 0 -5.5px var(--color-brand-secondary), 319px 0 0 -5.5px var(--color-brand-secondary), 320px 0 0 -5.5px var(--color-brand-secondary), 321px 0 0 -5.5px var(--color-brand-secondary), 322px 0 0 -5.5px var(--color-brand-secondary), 323px 0 0 -5.5px var(--color-brand-secondary), 324px 0 0 -5.5px var(--color-brand-secondary), 325px 0 0 -5.5px var(--color-brand-secondary), 326px 0 0 -5.5px var(--color-brand-secondary), 327px 0 0 -5.5px var(--color-brand-secondary), 328px 0 0 -5.5px var(--color-brand-secondary), 329px 0 0 -5.5px var(--color-brand-secondary), 330px 0 0 -5.5px var(--color-brand-secondary), 331px 0 0 -5.5px var(--color-brand-secondary), 332px 0 0 -5.5px var(--color-brand-secondary), 333px 0 0 -5.5px var(--color-brand-secondary), 334px 0 0 -5.5px var(--color-brand-secondary), 335px 0 0 -5.5px var(--color-brand-secondary), 336px 0 0 -5.5px var(--color-brand-secondary), 337px 0 0 -5.5px var(--color-brand-secondary), 338px 0 0 -5.5px var(--color-brand-secondary), 339px 0 0 -5.5px var(--color-brand-secondary), 340px 0 0 -5.5px var(--color-brand-secondary), 341px 0 0 -5.5px var(--color-brand-secondary), 342px 0 0 -5.5px var(--color-brand-secondary), 343px 0 0 -5.5px var(--color-brand-secondary), 344px 0 0 -5.5px var(--color-brand-secondary), 345px 0 0 -5.5px var(--color-brand-secondary), 346px 0 0 -5.5px var(--color-brand-secondary), 347px 0 0 -5.5px var(--color-brand-secondary), 348px 0 0 -5.5px var(--color-brand-secondary), 349px 0 0 -5.5px var(--color-brand-secondary), 350px 0 0 -5.5px var(--color-brand-secondary), 351px 0 0 -5.5px var(--color-brand-secondary), 352px 0 0 -5.5px var(--color-brand-secondary), 353px 0 0 -5.5px var(--color-brand-secondary), 354px 0 0 -5.5px var(--color-brand-secondary), 355px 0 0 -5.5px var(--color-brand-secondary), 356px 0 0 -5.5px var(--color-brand-secondary), 357px 0 0 -5.5px var(--color-brand-secondary), 358px 0 0 -5.5px var(--color-brand-secondary), 359px 0 0 -5.5px var(--color-brand-secondary), 360px 0 0 -5.5px var(--color-brand-secondary), 361px 0 0 -5.5px var(--color-brand-secondary), 362px 0 0 -5.5px var(--color-brand-secondary), 363px 0 0 -5.5px var(--color-brand-secondary), 364px 0 0 -5.5px var(--color-brand-secondary), 365px 0 0 -5.5px var(--color-brand-secondary), 366px 0 0 -5.5px var(--color-brand-secondary), 367px 0 0 -5.5px var(--color-brand-secondary), 368px 0 0 -5.5px var(--color-brand-secondary), 369px 0 0 -5.5px var(--color-brand-secondary), 370px 0 0 -5.5px var(--color-brand-secondary), 371px 0 0 -5.5px var(--color-brand-secondary), 372px 0 0 -5.5px var(--color-brand-secondary), 373px 0 0 -5.5px var(--color-brand-secondary), 374px 0 0 -5.5px var(--color-brand-secondary), 375px 0 0 -5.5px var(--color-brand-secondary), 376px 0 0 -5.5px var(--color-brand-secondary), 377px 0 0 -5.5px var(--color-brand-secondary), 378px 0 0 -5.5px var(--color-brand-secondary), 379px 0 0 -5.5px var(--color-brand-secondary), 380px 0 0 -5.5px var(--color-brand-secondary), 381px 0 0 -5.5px var(--color-brand-secondary), 382px 0 0 -5.5px var(--color-brand-secondary), 383px 0 0 -5.5px var(--color-brand-secondary), 384px 0 0 -5.5px var(--color-brand-secondary), 385px 0 0 -5.5px var(--color-brand-secondary); }
.bg-variant-brand-secondary .slider .slider__range::-webkit-slider-thumb {
background: var(--color-brand-primary);
border-radius: 100%;
border: 0;
height: 13px;
width: 13px;
-webkit-transition: background-color 150ms;
transition: background-color 150ms;
box-shadow: 1px 0 0 -5.5px var(--color-brand-primary), 2px 0 0 -5.5px var(--color-brand-primary), 3px 0 0 -5.5px var(--color-brand-primary), 4px 0 0 -5.5px var(--color-brand-primary), 5px 0 0 -5.5px var(--color-brand-primary), 6px 0 0 -5.5px var(--color-brand-primary), 7px 0 0 -5.5px var(--color-brand-primary), 8px 0 0 -5.5px var(--color-brand-primary), 9px 0 0 -5.5px var(--color-brand-primary), 10px 0 0 -5.5px var(--color-brand-primary), 11px 0 0 -5.5px var(--color-brand-primary), 12px 0 0 -5.5px var(--color-brand-primary), 13px 0 0 -5.5px var(--color-brand-primary), 14px 0 0 -5.5px var(--color-brand-primary), 15px 0 0 -5.5px var(--color-brand-primary), 16px 0 0 -5.5px var(--color-brand-primary), 17px 0 0 -5.5px var(--color-brand-primary), 18px 0 0 -5.5px var(--color-brand-primary), 19px 0 0 -5.5px var(--color-brand-primary), 20px 0 0 -5.5px var(--color-brand-primary), 21px 0 0 -5.5px var(--color-brand-primary), 22px 0 0 -5.5px var(--color-brand-primary), 23px 0 0 -5.5px var(--color-brand-primary), 24px 0 0 -5.5px var(--color-brand-primary), 25px 0 0 -5.5px var(--color-brand-primary), 26px 0 0 -5.5px var(--color-brand-primary), 27px 0 0 -5.5px var(--color-brand-primary), 28px 0 0 -5.5px var(--color-brand-primary), 29px 0 0 -5.5px var(--color-brand-primary), 30px 0 0 -5.5px var(--color-brand-primary), 31px 0 0 -5.5px var(--color-brand-primary), 32px 0 0 -5.5px var(--color-brand-primary), 33px 0 0 -5.5px var(--color-brand-primary), 34px 0 0 -5.5px var(--color-brand-primary), 35px 0 0 -5.5px var(--color-brand-primary), 36px 0 0 -5.5px var(--color-brand-primary), 37px 0 0 -5.5px var(--color-brand-primary), 38px 0 0 -5.5px var(--color-brand-primary), 39px 0 0 -5.5px var(--color-brand-primary), 40px 0 0 -5.5px var(--color-brand-primary), 41px 0 0 -5.5px var(--color-brand-primary), 42px 0 0 -5.5px var(--color-brand-primary), 43px 0 0 -5.5px var(--color-brand-primary), 44px 0 0 -5.5px var(--color-brand-primary), 45px 0 0 -5.5px var(--color-brand-primary), 46px 0 0 -5.5px var(--color-brand-primary), 47px 0 0 -5.5px var(--color-brand-primary), 48px 0 0 -5.5px var(--color-brand-primary), 49px 0 0 -5.5px var(--color-brand-primary), 50px 0 0 -5.5px var(--color-brand-primary), 51px 0 0 -5.5px var(--color-brand-primary), 52px 0 0 -5.5px var(--color-brand-primary), 53px 0 0 -5.5px var(--color-brand-primary), 54px 0 0 -5.5px var(--color-brand-primary), 55px 0 0 -5.5px var(--color-brand-primary), 56px 0 0 -5.5px var(--color-brand-primary), 57px 0 0 -5.5px var(--color-brand-primary), 58px 0 0 -5.5px var(--color-brand-primary), 59px 0 0 -5.5px var(--color-brand-primary), 60px 0 0 -5.5px var(--color-brand-primary), 61px 0 0 -5.5px var(--color-brand-primary), 62px 0 0 -5.5px var(--color-brand-primary), 63px 0 0 -5.5px var(--color-brand-primary), 64px 0 0 -5.5px var(--color-brand-primary), 65px 0 0 -5.5px var(--color-brand-primary), 66px 0 0 -5.5px var(--color-brand-primary), 67px 0 0 -5.5px var(--color-brand-primary), 68px 0 0 -5.5px var(--color-brand-primary), 69px 0 0 -5.5px var(--color-brand-primary), 70px 0 0 -5.5px var(--color-brand-primary), 71px 0 0 -5.5px var(--color-brand-primary), 72px 0 0 -5.5px var(--color-brand-primary), 73px 0 0 -5.5px var(--color-brand-primary), 74px 0 0 -5.5px var(--color-brand-primary), 75px 0 0 -5.5px var(--color-brand-primary), 76px 0 0 -5.5px var(--color-brand-primary), 77px 0 0 -5.5px var(--color-brand-primary), 78px 0 0 -5.5px var(--color-brand-primary), 79px 0 0 -5.5px var(--color-brand-primary), 80px 0 0 -5.5px var(--color-brand-primary), 81px 0 0 -5.5px var(--color-brand-primary), 82px 0 0 -5.5px var(--color-brand-primary), 83px 0 0 -5.5px var(--color-brand-primary), 84px 0 0 -5.5px var(--color-brand-primary), 85px 0 0 -5.5px var(--color-brand-primary), 86px 0 0 -5.5px var(--color-brand-primary), 87px 0 0 -5.5px var(--color-brand-primary), 88px 0 0 -5.5px var(--color-brand-primary), 89px 0 0 -5.5px var(--color-brand-primary), 90px 0 0 -5.5px var(--color-brand-primary), 91px 0 0 -5.5px var(--color-brand-primary), 92px 0 0 -5.5px var(--color-brand-primary), 93px 0 0 -5.5px var(--color-brand-primary), 94px 0 0 -5.5px var(--color-brand-primary), 95px 0 0 -5.5px var(--color-brand-primary), 96px 0 0 -5.5px var(--color-brand-primary), 97px 0 0 -5.5px var(--color-brand-primary), 98px 0 0 -5.5px var(--color-brand-primary), 99px 0 0 -5.5px var(--color-brand-primary), 100px 0 0 -5.5px var(--color-brand-primary), 101px 0 0 -5.5px var(--color-brand-primary), 102px 0 0 -5.5px var(--color-brand-primary), 103px 0 0 -5.5px var(--color-brand-primary), 104px 0 0 -5.5px var(--color-brand-primary), 105px 0 0 -5.5px var(--color-brand-primary), 106px 0 0 -5.5px var(--color-brand-primary), 107px 0 0 -5.5px var(--color-brand-primary), 108px 0 0 -5.5px var(--color-brand-primary), 109px 0 0 -5.5px var(--color-brand-primary), 110px 0 0 -5.5px var(--color-brand-primary), 111px 0 0 -5.5px var(--color-brand-primary), 112px 0 0 -5.5px var(--color-brand-primary), 113px 0 0 -5.5px var(--color-brand-primary), 114px 0 0 -5.5px var(--color-brand-primary), 115px 0 0 -5.5px var(--color-brand-primary), 116px 0 0 -5.5px var(--color-brand-primary), 117px 0 0 -5.5px var(--color-brand-primary), 118px 0 0 -5.5px var(--color-brand-primary), 119px 0 0 -5.5px var(--color-brand-primary), 120px 0 0 -5.5px var(--color-brand-primary), 121px 0 0 -5.5px var(--color-brand-primary), 122px 0 0 -5.5px var(--color-brand-primary), 123px 0 0 -5.5px var(--color-brand-primary), 124px 0 0 -5.5px var(--color-brand-primary), 125px 0 0 -5.5px var(--color-brand-primary), 126px 0 0 -5.5px var(--color-brand-primary), 127px 0 0 -5.5px var(--color-brand-primary), 128px 0 0 -5.5px var(--color-brand-primary), 129px 0 0 -5.5px var(--color-brand-primary), 130px 0 0 -5.5px var(--color-brand-primary), 131px 0 0 -5.5px var(--color-brand-primary), 132px 0 0 -5.5px var(--color-brand-primary), 133px 0 0 -5.5px var(--color-brand-primary), 134px 0 0 -5.5px var(--color-brand-primary), 135px 0 0 -5.5px var(--color-brand-primary), 136px 0 0 -5.5px var(--color-brand-primary), 137px 0 0 -5.5px var(--color-brand-primary), 138px 0 0 -5.5px var(--color-brand-primary), 139px 0 0 -5.5px var(--color-brand-primary), 140px 0 0 -5.5px var(--color-brand-primary), 141px 0 0 -5.5px var(--color-brand-primary), 142px 0 0 -5.5px var(--color-brand-primary), 143px 0 0 -5.5px var(--color-brand-primary), 144px 0 0 -5.5px var(--color-brand-primary), 145px 0 0 -5.5px var(--color-brand-primary), 146px 0 0 -5.5px var(--color-brand-primary), 147px 0 0 -5.5px var(--color-brand-primary), 148px 0 0 -5.5px var(--color-brand-primary), 149px 0 0 -5.5px var(--color-brand-primary), 150px 0 0 -5.5px var(--color-brand-primary), 151px 0 0 -5.5px var(--color-brand-primary), 152px 0 0 -5.5px var(--color-brand-primary), 153px 0 0 -5.5px var(--color-brand-primary), 154px 0 0 -5.5px var(--color-brand-primary), 155px 0 0 -5.5px var(--color-brand-primary), 156px 0 0 -5.5px var(--color-brand-primary), 157px 0 0 -5.5px var(--color-brand-primary), 158px 0 0 -5.5px var(--color-brand-primary), 159px 0 0 -5.5px var(--color-brand-primary), 160px 0 0 -5.5px var(--color-brand-primary), 161px 0 0 -5.5px var(--color-brand-primary), 162px 0 0 -5.5px var(--color-brand-primary), 163px 0 0 -5.5px var(--color-brand-primary), 164px 0 0 -5.5px var(--color-brand-primary), 165px 0 0 -5.5px var(--color-brand-primary), 166px 0 0 -5.5px var(--color-brand-primary), 167px 0 0 -5.5px var(--color-brand-primary), 168px 0 0 -5.5px var(--color-brand-primary), 169px 0 0 -5.5px var(--color-brand-primary), 170px 0 0 -5.5px var(--color-brand-primary), 171px 0 0 -5.5px var(--color-brand-primary), 172px 0 0 -5.5px var(--color-brand-primary), 173px 0 0 -5.5px var(--color-brand-primary), 174px 0 0 -5.5px var(--color-brand-primary), 175px 0 0 -5.5px var(--color-brand-primary), 176px 0 0 -5.5px var(--color-brand-primary), 177px 0 0 -5.5px var(--color-brand-primary), 178px 0 0 -5.5px var(--color-brand-primary), 179px 0 0 -5.5px var(--color-brand-primary), 180px 0 0 -5.5px var(--color-brand-primary), 181px 0 0 -5.5px var(--color-brand-primary), 182px 0 0 -5.5px var(--color-brand-primary), 183px 0 0 -5.5px var(--color-brand-primary), 184px 0 0 -5.5px var(--color-brand-primary), 185px 0 0 -5.5px var(--color-brand-primary), 186px 0 0 -5.5px var(--color-brand-primary), 187px 0 0 -5.5px var(--color-brand-primary), 188px 0 0 -5.5px var(--color-brand-primary), 189px 0 0 -5.5px var(--color-brand-primary), 190px 0 0 -5.5px var(--color-brand-primary), 191px 0 0 -5.5px var(--color-brand-primary), 192px 0 0 -5.5px var(--color-brand-primary), 193px 0 0 -5.5px var(--color-brand-primary), 194px 0 0 -5.5px var(--color-brand-primary), 195px 0 0 -5.5px var(--color-brand-primary), 196px 0 0 -5.5px var(--color-brand-primary), 197px 0 0 -5.5px var(--color-brand-primary), 198px 0 0 -5.5px var(--color-brand-primary), 199px 0 0 -5.5px var(--color-brand-primary), 200px 0 0 -5.5px var(--color-brand-primary), 201px 0 0 -5.5px var(--color-brand-primary), 202px 0 0 -5.5px var(--color-brand-primary), 203px 0 0 -5.5px var(--color-brand-primary), 204px 0 0 -5.5px var(--color-brand-primary), 205px 0 0 -5.5px var(--color-brand-primary), 206px 0 0 -5.5px var(--color-brand-primary), 207px 0 0 -5.5px var(--color-brand-primary), 208px 0 0 -5.5px var(--color-brand-primary), 209px 0 0 -5.5px var(--color-brand-primary), 210px 0 0 -5.5px var(--color-brand-primary), 211px 0 0 -5.5px var(--color-brand-primary), 212px 0 0 -5.5px var(--color-brand-primary), 213px 0 0 -5.5px var(--color-brand-primary), 214px 0 0 -5.5px var(--color-brand-primary), 215px 0 0 -5.5px var(--color-brand-primary), 216px 0 0 -5.5px var(--color-brand-primary), 217px 0 0 -5.5px var(--color-brand-primary), 218px 0 0 -5.5px var(--color-brand-primary), 219px 0 0 -5.5px var(--color-brand-primary), 220px 0 0 -5.5px var(--color-brand-primary), 221px 0 0 -5.5px var(--color-brand-primary), 222px 0 0 -5.5px var(--color-brand-primary), 223px 0 0 -5.5px var(--color-brand-primary), 224px 0 0 -5.5px var(--color-brand-primary), 225px 0 0 -5.5px var(--color-brand-primary), 226px 0 0 -5.5px var(--color-brand-primary), 227px 0 0 -5.5px var(--color-brand-primary), 228px 0 0 -5.5px var(--color-brand-primary), 229px 0 0 -5.5px var(--color-brand-primary), 230px 0 0 -5.5px var(--color-brand-primary), 231px 0 0 -5.5px var(--color-brand-primary), 232px 0 0 -5.5px var(--color-brand-primary), 233px 0 0 -5.5px var(--color-brand-primary), 234px 0 0 -5.5px var(--color-brand-primary), 235px 0 0 -5.5px var(--color-brand-primary), 236px 0 0 -5.5px var(--color-brand-primary), 237px 0 0 -5.5px var(--color-brand-primary), 238px 0 0 -5.5px var(--color-brand-primary), 239px 0 0 -5.5px var(--color-brand-primary), 240px 0 0 -5.5px var(--color-brand-primary), 241px 0 0 -5.5px var(--color-brand-primary), 242px 0 0 -5.5px var(--color-brand-primary), 243px 0 0 -5.5px var(--color-brand-primary), 244px 0 0 -5.5px var(--color-brand-primary), 245px 0 0 -5.5px var(--color-brand-primary), 246px 0 0 -5.5px var(--color-brand-primary), 247px 0 0 -5.5px var(--color-brand-primary), 248px 0 0 -5.5px var(--color-brand-primary), 249px 0 0 -5.5px var(--color-brand-primary), 250px 0 0 -5.5px var(--color-brand-primary), 251px 0 0 -5.5px var(--color-brand-primary), 252px 0 0 -5.5px var(--color-brand-primary), 253px 0 0 -5.5px var(--color-brand-primary), 254px 0 0 -5.5px var(--color-brand-primary), 255px 0 0 -5.5px var(--color-brand-primary), 256px 0 0 -5.5px var(--color-brand-primary), 257px 0 0 -5.5px var(--color-brand-primary), 258px 0 0 -5.5px var(--color-brand-primary), 259px 0 0 -5.5px var(--color-brand-primary), 260px 0 0 -5.5px var(--color-brand-primary), 261px 0 0 -5.5px var(--color-brand-primary), 262px 0 0 -5.5px var(--color-brand-primary), 263px 0 0 -5.5px var(--color-brand-primary), 264px 0 0 -5.5px var(--color-brand-primary), 265px 0 0 -5.5px var(--color-brand-primary), 266px 0 0 -5.5px var(--color-brand-primary), 267px 0 0 -5.5px var(--color-brand-primary), 268px 0 0 -5.5px var(--color-brand-primary), 269px 0 0 -5.5px var(--color-brand-primary), 270px 0 0 -5.5px var(--color-brand-primary), 271px 0 0 -5.5px var(--color-brand-primary), 272px 0 0 -5.5px var(--color-brand-primary), 273px 0 0 -5.5px var(--color-brand-primary), 274px 0 0 -5.5px var(--color-brand-primary), 275px 0 0 -5.5px var(--color-brand-primary), 276px 0 0 -5.5px var(--color-brand-primary), 277px 0 0 -5.5px var(--color-brand-primary), 278px 0 0 -5.5px var(--color-brand-primary), 279px 0 0 -5.5px var(--color-brand-primary), 280px 0 0 -5.5px var(--color-brand-primary), 281px 0 0 -5.5px var(--color-brand-primary), 282px 0 0 -5.5px var(--color-brand-primary), 283px 0 0 -5.5px var(--color-brand-primary), 284px 0 0 -5.5px var(--color-brand-primary), 285px 0 0 -5.5px var(--color-brand-primary), 286px 0 0 -5.5px var(--color-brand-primary), 287px 0 0 -5.5px var(--color-brand-primary), 288px 0 0 -5.5px var(--color-brand-primary), 289px 0 0 -5.5px var(--color-brand-primary), 290px 0 0 -5.5px var(--color-brand-primary), 291px 0 0 -5.5px var(--color-brand-primary), 292px 0 0 -5.5px var(--color-brand-primary), 293px 0 0 -5.5px var(--color-brand-primary), 294px 0 0 -5.5px var(--color-brand-primary), 295px 0 0 -5.5px var(--color-brand-primary), 296px 0 0 -5.5px var(--color-brand-primary), 297px 0 0 -5.5px var(--color-brand-primary), 298px 0 0 -5.5px var(--color-brand-primary), 299px 0 0 -5.5px var(--color-brand-primary), 300px 0 0 -5.5px var(--color-brand-primary), 301px 0 0 -5.5px var(--color-brand-primary), 302px 0 0 -5.5px var(--color-brand-primary), 303px 0 0 -5.5px var(--color-brand-primary), 304px 0 0 -5.5px var(--color-brand-primary), 305px 0 0 -5.5px var(--color-brand-primary), 306px 0 0 -5.5px var(--color-brand-primary), 307px 0 0 -5.5px var(--color-brand-primary), 308px 0 0 -5.5px var(--color-brand-primary), 309px 0 0 -5.5px var(--color-brand-primary), 310px 0 0 -5.5px var(--color-brand-primary), 311px 0 0 -5.5px var(--color-brand-primary), 312px 0 0 -5.5px var(--color-brand-primary), 313px 0 0 -5.5px var(--color-brand-primary), 314px 0 0 -5.5px var(--color-brand-primary), 315px 0 0 -5.5px var(--color-brand-primary), 316px 0 0 -5.5px var(--color-brand-primary), 317px 0 0 -5.5px var(--color-brand-primary), 318px 0 0 -5.5px var(--color-brand-primary), 319px 0 0 -5.5px var(--color-brand-primary), 320px 0 0 -5.5px var(--color-brand-primary), 321px 0 0 -5.5px var(--color-brand-primary), 322px 0 0 -5.5px var(--color-brand-primary), 323px 0 0 -5.5px var(--color-brand-primary), 324px 0 0 -5.5px var(--color-brand-primary), 325px 0 0 -5.5px var(--color-brand-primary), 326px 0 0 -5.5px var(--color-brand-primary), 327px 0 0 -5.5px var(--color-brand-primary), 328px 0 0 -5.5px var(--color-brand-primary), 329px 0 0 -5.5px var(--color-brand-primary), 330px 0 0 -5.5px var(--color-brand-primary), 331px 0 0 -5.5px var(--color-brand-primary), 332px 0 0 -5.5px var(--color-brand-primary), 333px 0 0 -5.5px var(--color-brand-primary), 334px 0 0 -5.5px var(--color-brand-primary), 335px 0 0 -5.5px var(--color-brand-primary), 336px 0 0 -5.5px var(--color-brand-primary), 337px 0 0 -5.5px var(--color-brand-primary), 338px 0 0 -5.5px var(--color-brand-primary), 339px 0 0 -5.5px var(--color-brand-primary), 340px 0 0 -5.5px var(--color-brand-primary), 341px 0 0 -5.5px var(--color-brand-primary), 342px 0 0 -5.5px var(--color-brand-primary), 343px 0 0 -5.5px var(--color-brand-primary), 344px 0 0 -5.5px var(--color-brand-primary), 345px 0 0 -5.5px var(--color-brand-primary), 346px 0 0 -5.5px var(--color-brand-primary), 347px 0 0 -5.5px var(--color-brand-primary), 348px 0 0 -5.5px var(--color-brand-primary), 349px 0 0 -5.5px var(--color-brand-primary), 350px 0 0 -5.5px var(--color-brand-primary), 351px 0 0 -5.5px var(--color-brand-primary), 352px 0 0 -5.5px var(--color-brand-primary), 353px 0 0 -5.5px var(--color-brand-primary), 354px 0 0 -5.5px var(--color-brand-primary), 355px 0 0 -5.5px var(--color-brand-primary), 356px 0 0 -5.5px var(--color-brand-primary), 357px 0 0 -5.5px var(--color-brand-primary), 358px 0 0 -5.5px var(--color-brand-primary), 359px 0 0 -5.5px var(--color-brand-primary), 360px 0 0 -5.5px var(--color-brand-primary), 361px 0 0 -5.5px var(--color-brand-primary), 362px 0 0 -5.5px var(--color-brand-primary), 363px 0 0 -5.5px var(--color-brand-primary), 364px 0 0 -5.5px var(--color-brand-primary), 365px 0 0 -5.5px var(--color-brand-primary), 366px 0 0 -5.5px var(--color-brand-primary), 367px 0 0 -5.5px var(--color-brand-primary), 368px 0 0 -5.5px var(--color-brand-primary), 369px 0 0 -5.5px var(--color-brand-primary), 370px 0 0 -5.5px var(--color-brand-primary), 371px 0 0 -5.5px var(--color-brand-primary), 372px 0 0 -5.5px var(--color-brand-primary), 373px 0 0 -5.5px var(--color-brand-primary), 374px 0 0 -5.5px var(--color-brand-primary), 375px 0 0 -5.5px var(--color-brand-primary), 376px 0 0 -5.5px var(--color-brand-primary), 377px 0 0 -5.5px var(--color-brand-primary), 378px 0 0 -5.5px var(--color-brand-primary), 379px 0 0 -5.5px var(--color-brand-primary), 380px 0 0 -5.5px var(--color-brand-primary), 381px 0 0 -5.5px var(--color-brand-primary), 382px 0 0 -5.5px var(--color-brand-primary), 383px 0 0 -5.5px var(--color-brand-primary), 384px 0 0 -5.5px var(--color-brand-primary), 385px 0 0 -5.5px var(--color-brand-primary); }
.bg-variant-brand-tertiary .slider .slider__range::-webkit-slider-thumb {
background: var(--color-