[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}
@charset "UTF-8";
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*
Declare variables before making them global.
dart-sass doesn't allow to declare variable with !global.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
.cdk-overlay-container, .cdk-global-overlay-wrapper {
pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cdk-overlay-container {
position: fixed;
z-index: 1000;
}
.cdk-overlay-container:empty {
display: none;
}
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
.cdk-overlay-backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 0.6;
}
.cdk-overlay-dark-backdrop {
background: rgba(0, 0, 0, 0.32);
}
.cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
opacity: 0;
}
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.cdk-global-scrollblock {
position: fixed;
width: 100%;
overflow-y: scroll;
}
/**
* In case when Nebular Layout custom scroll `withScroll` mode is enabled
* we need to disable default CDK scroll blocker (@link NbBlockScrollStrategyAdapter) on HTML element
* so that it won't add additional positioning.
*/
.nb-global-scrollblock {
position: static;
width: auto;
overflow: hidden;
}
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* This mixin generates keyfames.
* Because of all keyframes can't be scoped,
* we need to puts unique name in each btn-pulse call.
*/
/*
According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.
Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then nebular components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.
Implementation code:
@mixin nb-rtl() {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
@at-root {selector-append(':host-context([dir=rtl])', &)} {
@content;
}
}
And when we call it somewhere:
:host {
.some-class {
@include nb-rtl() {
...
}
}
}
:host-context(...) {
.some-class {
@include nb-rtl() {
...
}
}
}
Result will look like:
:host-context([dir=rtl]):host .some-class {
...
}
:host-context([dir=rtl]):host-context(...) .some-class {
...
}
*
Side note:
:host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html
:host-context([dir=rtl]):host-context(...) should match any permutation,
so order is not important.
*
Currently, there're two problems with this approach:
First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
:host-context(...) {
...
}
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
p {
@include nb-rtl() { ... }
}
}
We are not able to go up to :host level to place content passed to mixin.
The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
*
Side note:
Currently, nb-install-component uses another approach where :host prepended with the theme name
(https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
but it was made to be able to use current realization of rtl and it can be rewritten back to
:host-context($theme) once we will be able to use multiple shadow selectors.
*
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
***
Possible solution
check if we in theme by some theme variables and if so append, otherwise nest like
@at-root :host-context([dir=rtl]) {
// add # to scss interpolation statement.
// it works in comments and we can't use it here
{&} {
@content;
}
}
What if :host specified? Can we add space in :host-context(...) :host?
Or maybe add :host selector anyway? If multiple :host selectors are allowed
***
Problems with the current approach.
1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.
General problems.
Ltr is default document direction, but for proper work of nb-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*!
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*!
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*
* Normalization of HTML elements, manually forked from Normalize.css to remove
* styles targeting irrelevant browsers while applying new styles.
*
* Normalize is licensed MIT. https://github.com/necolas/normalize.css
*/
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
}
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/*!
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
.visually-hidden {
/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
nb-layout .scrollable-container {
scrollbar-face-color: var(--layout-scrollbar-color);
scrollbar-track-color: var(--layout-scrollbar-background-color);
}
nb-layout .scrollable-container::-webkit-scrollbar {
width: var(--layout-scrollbar-width);
height: var(--layout-scrollbar-width);
}
nb-layout .scrollable-container::-webkit-scrollbar-thumb {
background: var(--layout-scrollbar-color);
cursor: pointer;
border-radius: var(--layout-scrollbar-width)/2;
}
nb-layout .scrollable-container::-webkit-scrollbar-track {
background: var(--layout-scrollbar-background-color);
}
nb-layout.with-scroll .scrollable-container {
overflow: auto;
height: 100vh;
display: block;
}
@media (max-width: 767.98px) {
nb-layout.with-scroll .scrollable-container {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
.layout {
min-width: var(--layout-window-mode-min-width);
}
nb-layout.window-mode {
background: var(--layout-window-mode-background-color);
display: block;
}
nb-layout.window-mode .scrollable-container {
max-width: var(--layout-window-mode-max-width);
margin: 0 auto;
}
nb-layout.window-mode .layout nb-layout-header {
max-width: var(--layout-window-mode-max-width);
margin-left: auto;
margin-right: auto;
width: 100%;
}
nb-layout.window-mode .layout nb-layout-header nav {
max-width: var(--layout-window-mode-max-width);
margin: 0 auto;
}
@media screen and (min-width: var(--layout-window-mode-max-width)20px) {
nb-layout.window-mode {
padding-top: var(--layout-window-mode-padding-top)/4;
}
nb-layout.window-mode nb-layout-header.fixed {
top: var(--layout-window-mode-padding-top)/4;
}
nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed {
height: calc(100vh - var(--layout-window-mode-padding-top)/4 - var(--header-height));
top: calc(var(--layout-window-mode-padding-top)/4 + var(--header-height));
}
nb-layout.window-mode nb-sidebar.fixed {
left: calc((100vw - var(--layout-window-mode-max-width)) / 2);
}
nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right {
right: calc((100vw - var(--layout-window-mode-max-width)) / 2);
}
nb-layout.window-mode .layout .layout-container nb-sidebar.fixed {
top: calc(var(--header-height) + var(--layout-window-mode-padding-top)/4);
}
nb-layout.window-mode .scrollable-container {
height: calc(100vh - var(--layout-window-mode-padding-top)/4);
box-shadow: var(--layout-window-shadow);
}
nb-layout.window-mode nb-layout.with-scroll .scrollable-container {
height: calc(100vh - var(--layout-window-mode-padding-top)/4);
}
}
@media screen and (min-width: var(--layout-window-mode-max-width)150px) {
nb-layout.window-mode {
padding-top: var(--layout-window-mode-padding-top)/2;
}
nb-layout.window-mode nb-layout-header.fixed {
top: var(--layout-window-mode-padding-top)/2;
}
nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed {
height: calc(100vh - var(--layout-window-mode-padding-top)/2 - var(--header-height));
top: calc(var(--layout-window-mode-padding-top)/2 + var(--header-height));
}
nb-layout.window-mode nb-sidebar.fixed {
left: calc((100vw - var(--layout-window-mode-max-width)) / 2);
}
nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right {
right: calc((100vw - var(--layout-window-mode-max-width)) / 2);
}
nb-layout.window-mode .layout .layout-container nb-sidebar.fixed {
top: calc(var(--header-height) + var(--layout-window-mode-padding-top)/2);
}
nb-layout.window-mode .scrollable-container {
height: calc(100vh - var(--layout-window-mode-padding-top)/2);
box-shadow: var(--layout-window-shadow);
}
nb-layout.window-mode nb-layout.with-scroll .scrollable-container {
height: calc(100vh - var(--layout-window-mode-padding-top)/2);
}
}
@media screen and (min-width: var(--layout-window-mode-max-width)300px) {
nb-layout.window-mode {
padding-top: var(--layout-window-mode-padding-top);
}
nb-layout.window-mode nb-layout-header.fixed {
top: var(--layout-window-mode-padding-top);
}
nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed {
height: calc(100vh - var(--layout-window-mode-padding-top) - var(--header-height));
top: calc(var(--layout-window-mode-padding-top) + var(--header-height));
}
nb-layout.window-mode nb-sidebar.fixed {
left: calc((100vw - var(--layout-window-mode-max-width)) / 2);
}
nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right {
right: calc((100vw - var(--layout-window-mode-max-width)) / 2);
}
nb-layout.window-mode .layout .layout-container nb-sidebar.fixed {
top: calc(var(--header-height) + var(--layout-window-mode-padding-top));
}
nb-layout.window-mode .scrollable-container {
height: calc(100vh - var(--layout-window-mode-padding-top));
box-shadow: var(--layout-window-shadow);
}
nb-layout.window-mode nb-layout.with-scroll .scrollable-container {
height: calc(100vh - var(--layout-window-mode-padding-top));
}
}
nb-layout .layout {
background-color: var(--layout-background-color);
color: var(--layout-text-color);
font-family: var(--layout-text-font-family);
font-size: var(--layout-text-font-size);
font-weight: var(--layout-text-font-weight);
line-height: var(--layout-text-line-height);
min-height: var(--layout-min-height);
}
nb-layout .layout .layout-container nb-sidebar.fixed,
nb-layout .layout .layout-container nb-sidebar .main-container-fixed {
top: var(--header-height);
}
nb-layout .layout .layout-container .content nb-layout-footer {
box-shadow: var(--footer-shadow);
}
nb-layout .layout .layout-container .content nb-layout-footer nav {
background-color: var(--footer-background-color);
border-top: var(--footer-divider-width) var(--footer-divider-style) var(--footer-divider-color);
color: var(--footer-text-color);
font-family: var(--footer-text-font-family);
font-size: var(--footer-text-font-size);
font-weight: var(--footer-text-font-weight);
line-height: var(--footer-text-line-height);
padding: var(--footer-padding);
}
nb-layout .layout .layout-container .content nb-layout-footer nav a {
color: var(--footer-text-highlight-color);
}
nb-layout .layout .layout-container .content nb-layout-footer nav a:focus, nb-layout .layout .layout-container .content nb-layout-footer nav a:active, nb-layout .layout .layout-container .content nb-layout-footer nav a:hover {
color: var(--footer-text-highlight-color);
}
nb-layout .layout .layout-container .content.center {
width: var(--layout-content-width);
flex: 0 100 var(--layout-content-width) !important;
}
nb-layout .layout .layout-container .content .columns nb-layout-column {
padding: var(--layout-padding);
}
@media (max-width: 991.98px) {
nb-layout .layout .layout-container .content .columns nb-layout-column {
padding: var(--layout-medium-padding);
}
}
@media (max-width: 767.98px) {
nb-layout .layout .layout-container .content .columns nb-layout-column {
padding: var(--layout-small-padding);
}
}
nb-layout-header {
background-color: var(--header-background-color);
color: var(--header-text-color);
font-family: var(--header-text-font-family);
font-size: var(--header-text-font-size);
font-weight: var(--header-text-font-weight);
line-height: var(--header-text-line-height);
}
nb-layout-header nav {
color: var(--header-text-color);
box-shadow: var(--header-shadow);
height: var(--header-height);
padding: var(--header-padding);
}
nb-layout-header nav a {
color: var(--header-text-color);
}
nb-layout-header nav a:focus, nb-layout-header nav a:active, nb-layout-header nav a:hover {
color: var(--header-text-color);
}
nb-layout-header ~ .layout-container {
min-height: calc(var(--layout-min-height) - var(--header-height));
}
nb-layout-header.fixed ~ .layout-container {
padding-top: var(--header-height);
min-height: var(--layout-min-height);
}
nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container {
height: calc(var(--sidebar-height) - var(--header-height));
}
nb-layout.with-subheader nb-sidebar .main-container {
box-shadow: none;
}
nb-sidebar {
background-color: var(--sidebar-background-color);
box-shadow: var(--sidebar-shadow);
color: var(--sidebar-text-color);
font-family: var(--sidebar-text-font-family);
font-size: var(--sidebar-text-font-size);
font-weight: var(--sidebar-text-font-weight);
line-height: var(--sidebar-text-line-height);
width: var(--sidebar-width);
}
nb-sidebar .main-container {
height: var(--sidebar-height);
width: var(--sidebar-width);
}
nb-sidebar .scrollable {
padding: var(--sidebar-padding);
position: relative;
-webkit-transform: translate3d(0, 0, 0);
scrollbar-face-color: var(--sidebar-scrollbar-color);
scrollbar-track-color: var(--sidebar-scrollbar-background-color);
}
@media (max-width: 767.98px) {
nb-sidebar .scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
nb-sidebar .scrollable::-webkit-scrollbar {
width: var(--sidebar-scrollbar-width);
height: var(--sidebar-scrollbar-width);
}
nb-sidebar .scrollable::-webkit-scrollbar-thumb {
background: var(--sidebar-scrollbar-color);
cursor: pointer;
border-radius: var(--sidebar-scrollbar-width)/2;
}
nb-sidebar .scrollable::-webkit-scrollbar-track {
background: var(--sidebar-scrollbar-background-color);
}
nb-sidebar.collapsed {
width: 0;
padding: 0;
}
nb-sidebar.collapsed .main-container {
width: 0;
padding: 0;
}
nb-sidebar.collapsed .scrollable {
width: 0;
padding: 0;
overflow: hidden;
}
nb-sidebar.collapsed nb-sidebar-header, nb-sidebar.collapsed nb-sidebar-footer {
width: 0;
padding: 0;
overflow: hidden;
}
nb-sidebar.compacted {
width: var(--sidebar-width-compact);
}
nb-sidebar.compacted .main-container {
width: var(--sidebar-width-compact);
}
nb-sidebar.compacted nb-menu {
width: var(--sidebar-width-compact);
}
nb-sidebar.compacted nb-menu .menu-item a.active {
position: relative;
}
nb-sidebar.compacted nb-menu .menu-item a.active::before {
position: absolute;
content: "";
top: 0;
height: 100%;
width: 4px;
background: var(--sidebar-menu-item-highlight-color);
}
[dir=ltr] nb-sidebar.compacted nb-menu .menu-item a.active::before {
left: 0;
}
[dir=rtl] nb-sidebar.compacted nb-menu .menu-item a.active::before {
right: 0;
}
nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a span, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a nb-badge, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a .expand-state {
display: none;
}
nb-sidebar.compacted nb-menu .menu-items > .menu-item {
transition: border-color 1s ease;
}
nb-sidebar.compacted nb-menu .menu-items > .menu-item.menu-group {
display: block;
color: transparent;
width: 0;
padding: 0;
overflow: hidden;
}
nb-sidebar.compacted nb-menu .menu-items > .menu-item i {
margin-right: 0;
}
nb-sidebar.compacted nb-menu .menu-items > .menu-item a {
justify-content: center;
}
nb-sidebar.compacted nb-menu .menu-items > .menu-item > .expanded {
display: none;
}
nb-sidebar.compacted.left.fixed ~ .content {
margin-left: var(--sidebar-width-compact);
}
nb-sidebar.compacted.fixed.right ~ .content {
margin-left: 0;
margin-right: var(--sidebar-width-compact);
}
nb-sidebar.compacted.left.fixed ~ .content.center {
padding-left: var(--sidebar-width-compact);
}
nb-sidebar.compacted.fixed.right ~ .content.center {
padding-left: 0;
padding-right: var(--sidebar-width-compact);
}
[dir=ltr] nb-sidebar.compacted.start.fixed ~ .content {
margin-left: var(--sidebar-width-compact);
}
[dir=rtl] nb-sidebar.compacted.start.fixed ~ .content {
margin-right: var(--sidebar-width-compact);
}
[dir=ltr] nb-sidebar.compacted.fixed.end ~ .content {
margin-right: var(--sidebar-width-compact);
}
[dir=rtl] nb-sidebar.compacted.fixed.end ~ .content {
margin-left: var(--sidebar-width-compact);
}
[dir=ltr] nb-sidebar.compacted.start.fixed ~ .content.center {
padding-left: var(--sidebar-width-compact);
}
[dir=rtl] nb-sidebar.compacted.start.fixed ~ .content.center {
padding-right: var(--sidebar-width-compact);
}
[dir=ltr] nb-sidebar.compacted.fixed.end ~ .content.center {
padding-right: var(--sidebar-width-compact);
}
[dir=rtl] nb-sidebar.compacted.fixed.end ~ .content.center {
padding-left: var(--sidebar-width-compact);
}
nb-sidebar.fixed.left.collapsed + .content, nb-sidebar.fixed.start.collapsed + .content {
margin-left: 0;
}
nb-sidebar.fixed.right.collapsed + .content, nb-sidebar.fixed.end.collapsed + .content {
margin-right: 0;
}
nb-sidebar.expanded {
width: var(--sidebar-width);
}
nb-sidebar.expanded > .scrollable {
width: var(--sidebar-width);
}
nb-sidebar nb-sidebar-header {
padding: var(--sidebar-padding);
height: var(--sidebar-header-height);
}
nb-sidebar nb-sidebar-footer {
padding: var(--sidebar-padding);
height: var(--sidebar-footer-height);
}
nb-sidebar nb-menu {
margin: 0 -var(--sidebar-padding) -var(--sidebar-padding);
}
nb-calendar-view-mode [nbButton].appearance-ghost.status-basic, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:hover, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:active,
nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic,
nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle],
nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:hover,
nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus,
nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:active {
color: var(--calendar-navigation-text-color);
font-family: var(--calendar-navigation-text-font-family);
font-size: var(--calendar-navigation-title-text-font-size);
font-weight: var(--calendar-navigation-title-text-font-weight);
line-height: var(--calendar-navigation-title-text-line-height);
}
nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active),
nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus,
nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle]:focus,
nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active) {
box-shadow: none;
}
[dir=ltr] nb-calendar-pageable-navigation {
margin-left: auto;
}
[dir=rtl] nb-calendar-pageable-navigation {
margin-right: auto;
}
nb-calendar-picker {
display: block;
padding-top: var(--calendar-picker-padding-top);
padding-bottom: var(--calendar-picker-padding-bottom);
}
[dir=ltr] nb-calendar-picker {
padding-right: var(--calendar-picker-padding-end);
padding-left: var(--calendar-picker-padding-start);
}
[dir=rtl] nb-calendar-picker {
padding-right: var(--calendar-picker-padding-start);
padding-left: var(--calendar-picker-padding-end);
}
nb-calendar-days-names {
background: var(--calendar-weekday-background);
border-top: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color);
border-bottom: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color);
}
[dir=ltr] nb-calendar-days-names {
padding-left: var(--calendar-picker-padding-start);
padding-right: var(--calendar-picker-padding-end);
}
[dir=rtl] nb-calendar-days-names {
padding-left: var(--calendar-picker-padding-end);
padding-right: var(--calendar-picker-padding-start);
}
nb-calendar-days-names .day {
width: var(--calendar-weekday-width);
height: var(--calendar-weekday-height);
color: var(--calendar-weekday-text-color);
font-size: var(--calendar-weekday-text-font-size);
font-weight: var(--calendar-weekday-text-font-weight);
line-height: var(--calendar-weekday-text-line-height);
}
nb-calendar-days-names .day.holiday {
color: var(--calendar-weekday-holiday-text-color);
}
nb-calendar-days-names.size-large .day {
width: var(--calendar-weekday-large-width);
height: var(--calendar-weekday-large-height);
}
nb-calendar-week-numbers {
background: var(--calendar-weeknumber-background);
font-size: var(--calendar-weeknumber-text-font-size);
font-weight: var(--calendar-weeknumber-text-font-weight);
line-height: var(--calendar-weeknumber-text-line-height);
color: var(--calendar-weeknumber-text-color);
padding-bottom: var(--calendar-picker-padding-bottom);
}
nb-calendar-week-numbers .sign-container {
display: flex;
flex-direction: column;
border-top: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color);
border-bottom: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color);
margin-bottom: var(--calendar-picker-padding-top);
}
nb-calendar-week-numbers .sign,
nb-calendar-week-numbers .week-number {
display: flex;
align-items: center;
justify-content: center;
height: var(--calendar-weeknumber-height);
width: var(--calendar-weeknumber-width);
}
nb-calendar-week-numbers.size-large .sign,
nb-calendar-week-numbers.size-large .week-number {
height: var(--calendar-weeknumber-large-height);
width: var(--calendar-weeknumber-large-width);
}
[dir=ltr] nb-calendar-day-picker nb-calendar-week-numbers {
border-right: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color);
}
[dir=rtl] nb-calendar-day-picker nb-calendar-week-numbers {
border-left: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color);
}
nb-calendar-picker .day-cell {
width: var(--calendar-day-cell-width);
height: var(--calendar-day-cell-height);
}
nb-calendar-picker .day-cell.size-large {
width: var(--calendar-day-cell-large-width);
height: var(--calendar-day-cell-large-height);
}
nb-calendar-picker .month-cell {
width: var(--calendar-month-cell-width);
height: var(--calendar-month-cell-height);
}
nb-calendar-picker .month-cell.size-large {
width: var(--calendar-month-cell-large-width);
height: var(--calendar-month-cell-large-height);
}
nb-calendar-picker .year-cell {
width: var(--calendar-year-cell-width);
height: var(--calendar-year-cell-height);
}
nb-calendar-picker .year-cell.size-large {
width: var(--calendar-year-cell-large-width);
height: var(--calendar-year-cell-large-height);
}
nb-calendar-picker .cell-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
border-radius: var(--calendar-border-radius);
}
nb-calendar-picker .day-cell,
nb-calendar-picker .month-cell,
nb-calendar-picker .year-cell {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--calendar-text-font-family);
font-size: var(--calendar-text-font-size);
font-weight: var(--calendar-text-font-weight);
line-height: var(--calendar-text-line-height);
color: var(--calendar-text-color);
text-transform: uppercase;
cursor: pointer;
}
nb-calendar-picker .day-cell, nb-calendar-picker .day-cell .cell-content,
nb-calendar-picker .month-cell,
nb-calendar-picker .month-cell .cell-content,
nb-calendar-picker .year-cell,
nb-calendar-picker .year-cell .cell-content {
transition-duration: 0.15s;
transition-property: background-color, border-color, color;
transition-timing-function: ease-in;
}
nb-calendar-picker .day-cell.empty, nb-calendar-picker .day-cell.disabled,
nb-calendar-picker .month-cell.empty,
nb-calendar-picker .month-cell.disabled,
nb-calendar-picker .year-cell.empty,
nb-calendar-picker .year-cell.disabled {
cursor: default;
}
nb-calendar-picker .day-cell.bounding-month,
nb-calendar-picker .month-cell.bounding-month,
nb-calendar-picker .year-cell.bounding-month {
color: var(--calendar-cell-inactive-text-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty):hover .cell-content,
nb-calendar-picker .month-cell:not(.disabled):not(.empty):hover .cell-content,
nb-calendar-picker .year-cell:not(.disabled):not(.empty):hover .cell-content {
background-color: var(--calendar-cell-hover-background-color);
border-color: var(--calendar-cell-hover-border-color);
color: var(--calendar-cell-hover-text-color);
font-size: var(--calendar-cell-hover-text-font-size);
font-weight: var(--calendar-cell-hover-text-font-weight);
line-height: var(--calendar-cell-hover-text-line-height);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty):active .cell-content,
nb-calendar-picker .month-cell:not(.disabled):not(.empty):active .cell-content,
nb-calendar-picker .year-cell:not(.disabled):not(.empty):active .cell-content {
background-color: var(--calendar-cell-active-background-color);
border-color: var(--calendar-cell-active-border-color);
color: var(--calendar-cell-active-text-color);
font-size: var(--calendar-cell-active-text-font-size);
font-weight: var(--calendar-cell-active-text-font-weight);
line-height: var(--calendar-cell-active-text-line-height);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content {
background-color: var(--calendar-cell-today-background-color);
border: 1px solid var(--calendar-cell-today-border-color);
color: var(--calendar-cell-today-text-color);
font-size: var(--calendar-cell-today-text-font-size);
font-weight: var(--calendar-cell-today-text-font-weight);
line-height: var(--calendar-cell-today-text-line-height);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:hover,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:hover,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:hover {
background-color: var(--calendar-cell-today-hover-background-color);
border-color: var(--calendar-cell-today-hover-border-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:active,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:active,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:active {
background-color: var(--calendar-cell-today-active-background-color);
border-color: var(--calendar-cell-today-active-border-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content {
background-color: var(--calendar-cell-selected-background-color);
border-color: var(--calendar-cell-selected-border-color);
color: var(--calendar-cell-selected-text-color);
font-size: var(--calendar-cell-selected-text-font-size);
font-weight: var(--calendar-cell-selected-text-font-weight);
line-height: var(--calendar-cell-selected-text-line-height);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:hover,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:hover,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:hover {
background-color: var(--calendar-cell-selected-hover-background-color);
border-color: var(--calendar-cell-selected-hover-border-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:active,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:active,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:active {
background-color: var(--calendar-cell-selected-active-background-color);
border-color: var(--calendar-cell-selected-active-border-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected {
background-color: var(--calendar-cell-selected-background-color);
border-radius: var(--calendar-border-radius);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content {
background-color: var(--calendar-cell-today-selected-background-color);
border-color: var(--calendar-cell-today-selected-border-color);
color: var(--calendar-cell-today-selected-text-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:hover,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:hover,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:hover {
background-color: var(--calendar-cell-today-selected-hover-background-color);
border-color: var(--calendar-cell-today-selected-hover-border-color);
}
nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:focus,
nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:focus,
nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:focus {
background-color: var(--calendar-cell-today-selected-active-background-color);
border-color: var(--calendar-cell-today-selected-active-border-color);
}
nb-calendar-picker .day-cell.disabled,
nb-calendar-picker .month-cell.disabled,
nb-calendar-picker .year-cell.disabled {
color: var(--calendar-cell-disabled-text-color);
}
nb-calendar-picker .day-cell.disabled.today .cell-content,
nb-calendar-picker .month-cell.disabled.today .cell-content,
nb-calendar-picker .year-cell.disabled.today .cell-content {
border: 1px solid var(--calendar-cell-today-disabled-border-color);
}
nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty) {
background-color: var(--calendar-cell-selected-background-color);
border-radius: 0;
}
[dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start {
border-top-left-radius: var(--calendar-border-radius);
border-bottom-left-radius: var(--calendar-border-radius);
}
[dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start {
border-top-right-radius: var(--calendar-border-radius);
border-bottom-right-radius: var(--calendar-border-radius);
}
[dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end {
border-top-right-radius: var(--calendar-border-radius);
border-bottom-right-radius: var(--calendar-border-radius);
}
[dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end {
border-top-left-radius: var(--calendar-border-radius);
border-bottom-left-radius: var(--calendar-border-radius);
}
nb-base-calendar nb-card {
background-color: var(--calendar-background-color);
border: var(--calendar-border-width) var(--calendar-border-style) var(--calendar-border-color);
box-shadow: none;
margin: 0;
width: var(--calendar-width);
overflow: hidden;
}
nb-base-calendar nb-card-body {
padding: 0;
}
nb-base-calendar .calendar-navigation {
border: none;
display: flex;
padding: var(--calendar-navigation-padding);
color: var(--calendar-navigation-text-color);
font-family: var(--calendar-navigation-text-font-family);
font-size: var(--calendar-navigation-title-text-font-size);
font-weight: var(--calendar-navigation-title-text-font-weight);
line-height: var(--calendar-navigation-title-text-line-height);
}
nb-base-calendar:not(.has-navigation) nb-calendar-week-numbers .sign-container,
nb-base-calendar:not(.has-navigation) nb-calendar-days-names {
border-top: 0;
}
nb-base-calendar.has-week-number nb-card {
width: calc(var(--calendar-width) + var(--calendar-weeknumber-width) + var(--calendar-weeknumber-divider-width));
}
nb-base-calendar.has-week-number .month-cell,
nb-base-calendar.has-week-number .year-cell {
flex: 1 0 auto;
}
nb-base-calendar.size-large nb-card {
width: var(--calendar-large-width);
}
nb-base-calendar.size-large.has-week-number nb-card {
width: calc(var(--calendar-large-width) + var(--calendar-weeknumber-large-width) + var(--calendar-weeknumber-divider-width));
}
nb-card {
background-color: var(--card-background-color);
border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
border-radius: var(--card-border-radius);
box-shadow: var(--card-shadow);
color: var(--card-text-color);
font-family: var(--card-text-font-family);
font-size: var(--card-text-font-size);
font-weight: var(--card-text-font-weight);
line-height: var(--card-text-line-height);
margin-bottom: var(--card-margin-bottom);
scrollbar-face-color: var(--card-scrollbar-color);
scrollbar-track-color: var(--card-scrollbar-background-color);
}
nb-card::-webkit-scrollbar {
width: var(--card-scrollbar-width);
height: var(--card-scrollbar-width);
}
nb-card::-webkit-scrollbar-thumb {
background: var(--card-scrollbar-color);
cursor: pointer;
border-radius: var(--card-scrollbar-width)/2;
}
nb-card::-webkit-scrollbar-track {
background: var(--card-scrollbar-background-color);
}
nb-card.size-tiny {
height: var(--card-height-tiny);
}
nb-card.size-small {
height: var(--card-height-small);
}
nb-card.size-medium {
height: var(--card-height-medium);
}
nb-card.size-large {
height: var(--card-height-large);
}
nb-card.size-giant {
height: var(--card-height-giant);
}
nb-card.status-basic nb-card-header {
background-color: var(--card-header-basic-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-basic-background-color);
color: var(--card-header-basic-text-color);
}
nb-card.status-basic nb-card-header a,
nb-card.status-basic nb-card-header a:hover {
color: var(--card-header-basic-text-color);
}
nb-card.status-primary nb-card-header {
background-color: var(--card-header-primary-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-primary-background-color);
color: var(--card-header-primary-text-color);
}
nb-card.status-primary nb-card-header a,
nb-card.status-primary nb-card-header a:hover {
color: var(--card-header-primary-text-color);
}
nb-card.status-success nb-card-header {
background-color: var(--card-header-success-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-success-background-color);
color: var(--card-header-success-text-color);
}
nb-card.status-success nb-card-header a,
nb-card.status-success nb-card-header a:hover {
color: var(--card-header-success-text-color);
}
nb-card.status-warning nb-card-header {
background-color: var(--card-header-warning-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-warning-background-color);
color: var(--card-header-warning-text-color);
}
nb-card.status-warning nb-card-header a,
nb-card.status-warning nb-card-header a:hover {
color: var(--card-header-warning-text-color);
}
nb-card.status-danger nb-card-header {
background-color: var(--card-header-danger-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-danger-background-color);
color: var(--card-header-danger-text-color);
}
nb-card.status-danger nb-card-header a,
nb-card.status-danger nb-card-header a:hover {
color: var(--card-header-danger-text-color);
}
nb-card.status-info nb-card-header {
background-color: var(--card-header-info-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-info-background-color);
color: var(--card-header-info-text-color);
}
nb-card.status-info nb-card-header a,
nb-card.status-info nb-card-header a:hover {
color: var(--card-header-info-text-color);
}
nb-card.status-control nb-card-header {
background-color: var(--card-header-control-background-color);
border-bottom-width: 0;
border-bottom-color: var(--card-header-control-background-color);
color: var(--card-header-control-text-color);
}
nb-card.status-control nb-card-header a,
nb-card.status-control nb-card-header a:hover {
color: var(--card-header-control-text-color);
}
nb-card.accent-basic {
border-top-color: var(--card-header-basic-background-color);
}
nb-card.accent-primary {
border-top-color: var(--card-header-primary-background-color);
}
nb-card.accent-success {
border-top-color: var(--card-header-success-background-color);
}
nb-card.accent-warning {
border-top-color: var(--card-header-warning-background-color);
}
nb-card.accent-danger {
border-top-color: var(--card-header-danger-background-color);
}
nb-card.accent-info {
border-top-color: var(--card-header-info-background-color);
}
nb-card.accent-control {
border-top-color: var(--card-header-control-background-color);
}
nb-card.accent {
border-top-style: var(--card-border-style);
border-top-width: var(--card-border-radius);
}
nb-card.accent nb-card-header {
border-radius: 0;
}
nb-card-body {
flex: 1;
-ms-flex: 1 1 auto;
overflow: auto;
padding: var(--card-padding);
position: relative;
scrollbar-face-color: var(--card-scrollbar-color);
scrollbar-track-color: var(--card-scrollbar-background-color);
}
nb-card-body::-webkit-scrollbar {
width: var(--card-scrollbar-width);
height: var(--card-scrollbar-width);
}
nb-card-body::-webkit-scrollbar-thumb {
background: var(--card-scrollbar-color);
cursor: pointer;
border-radius: var(--card-scrollbar-width)/2;
}
nb-card-body::-webkit-scrollbar-track {
background: var(--card-scrollbar-background-color);
}
nb-card-footer {
padding: var(--card-padding);
border-top: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color);
border-bottom-left-radius: var(--card-border-radius);
border-bottom-right-radius: var(--card-border-radius);
}
nb-card-header {
padding: var(--card-padding);
border-bottom: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color);
border-top-left-radius: var(--card-border-radius);
border-top-right-radius: var(--card-border-radius);
color: var(--card-header-text-color);
font-family: var(--card-header-text-font-family);
font-size: var(--card-header-text-font-size);
font-weight: var(--card-header-text-font-weight);
line-height: var(--card-header-text-line-height);
}
nb-card-header h1 {
margin: 0;
}
nb-card-header h2 {
margin: 0;
}
nb-card-header h3 {
margin: 0;
}
nb-card-header h4 {
margin: 0;
}
nb-card-header h5 {
margin: 0;
}
nb-card-header h6 {
margin: 0;
}
nb-reveal-card {
box-shadow: var(--card-shadow);
margin-bottom: var(--card-margin-bottom);
}
.second-card-container {
height: 100%;
border-radius: var(--card-border-radius);
}
.reveal-button {
line-height: var(--card-text-line-height);
padding: var(--card-padding);
}
.flip-button {
line-height: var(--card-text-line-height);
margin-bottom: var(--card-margin-bottom);
padding: var(--card-padding);
}
[dir=ltr] .flipcard-body .front-container {
margin-right: -100%;
}
[dir=rtl] .flipcard-body .front-container {
margin-left: -100%;
}
nb-tabset {
background-color: var(--tabset-background-color);
border-radius: var(--tabset-border-radius);
box-shadow: var(--tabset-shadow);
}
nb-tabset .tabset {
border-bottom: var(--tabset-divider-width) var(--tabset-divider-style) var(--tabset-divider-color);
}
nb-tabset .tab-link {
background-color: var(--tabset-tab-background-color);
cursor: pointer;
padding: var(--tabset-tab-padding);
color: var(--tabset-tab-text-color);
font-family: var(--tabset-tab-text-font-family);
font-size: var(--tabset-tab-text-font-size);
font-weight: var(--tabset-tab-text-font-weight);
line-height: var(--tabset-tab-text-line-height);
text-transform: var(--tabset-tab-text-transform);
}
nb-tabset .tab-link::before {
background-color: var(--tabset-tab-underline-color);
height: var(--tabset-tab-underline-width);
}
nb-tabset nb-badge.dot-mode.position-left {
left: var(--tabset-tab–badge-dot-mode-horizontal-offset);
}
nb-tabset nb-badge.dot-mode.position-right {
right: var(--tabset-tab–badge-dot-mode-horizontal-offset);
}
[dir=ltr] nb-tabset nb-badge.dot-mode.position-start {
left: var(--tabset-tab–badge-dot-mode-horizontal-offset);
}
[dir=rtl] nb-tabset nb-badge.dot-mode.position-start {
right: var(--tabset-tab–badge-dot-mode-horizontal-offset);
}
[dir=ltr] nb-tabset nb-badge.dot-mode.position-end {
right: var(--tabset-tab–badge-dot-mode-horizontal-offset);
}
[dir=rtl] nb-tabset nb-badge.dot-mode.position-end {
left: var(--tabset-tab–badge-dot-mode-horizontal-offset);
}
nb-tabset .tab.active .tab-link {
background-color: var(--tabset-tab-active-background-color);
color: var(--tabset-tab-active-text-color);
}
nb-tabset .tab.active .tab-link::before {
background-color: var(--tabset-tab-active-underline-color);
}
nb-tabset .tab:focus .tab-link {
background-color: var(--tabset-tab-focus-background-color);
color: var(--tabset-tab-focus-text-color);
}
nb-tabset .tab:focus .tab-link::before {
background-color: var(--tabset-tab-focus-underline-color);
}
nb-tabset .tab:hover .tab-link {
color: var(--tabset-tab-hover-text-color);
background-color: var(--tabset-tab-hover-background-color);
}
nb-tabset .tab:hover .tab-link::before {
background-color: var(--tabset-tab-hover-underline-color);
}
nb-tabset .tab.disabled {
cursor: default;
pointer-events: none;
}
nb-tabset .tab.disabled .tab-link {
background-color: var(--tabset-tab-disabled-background-color);
color: var(--tabset-tab-disabled-text-color);
cursor: default;
pointer-events: none;
}
nb-tabset .tab.disabled .tab-link::before {
background-color: var(--tabset-tab-disabled-underline-color);
}
@media screen and (max-width: var(--tabset-tab-text-hide-breakpoint)) {
nb-tabset .tab.responsive .tab-text {
display: none;
}
}
nb-tabset nb-tab {
background-color: var(--tabset-content-background-color);
color: var(--tabset-content-text-color);
font-family: var(--tabset-content-text-font-family);
font-size: var(--tabset-content-text-font-size);
font-weight: var(--tabset-content-text-font-weight);
line-height: var(--tabset-content-text-line-height);
padding: var(--tabset-content-padding);
scrollbar-face-color: var(--tabset-scrollbar-color);
scrollbar-track-color: var(--tabset-scrollbar-background-color);
}
nb-tabset nb-tab::-webkit-scrollbar {
width: var(--tabset-scrollbar-width);
height: var(--tabset-scrollbar-width);
}
nb-tabset nb-tab::-webkit-scrollbar-thumb {
background: var(--tabset-scrollbar-color);
cursor: pointer;
border-radius: var(--tabset-scrollbar-width)/2;
}
nb-tabset nb-tab::-webkit-scrollbar-track {
background: var(--tabset-scrollbar-background-color);
}
nb-route-tabset {
scrollbar-face-color: var(--route-tabset-scrollbar-color);
scrollbar-track-color: var(--route-tabset-scrollbar-background-color);
background-color: var(--route-tabset-background-color);
border-radius: var(--route-tabset-border-radius);
box-shadow: var(--route-tabset-shadow);
}
nb-route-tabset::-webkit-scrollbar {
width: var(--route-tabset-scrollbar-width);
height: var(--route-tabset-scrollbar-width);
}
nb-route-tabset::-webkit-scrollbar-thumb {
background: var(--route-tabset-scrollbar-color);
cursor: pointer;
border-radius: var(--route-tabset-scrollbar-width)/2;
}
nb-route-tabset::-webkit-scrollbar-track {
background: var(--route-tabset-scrollbar-background-color);
}
nb-route-tabset .route-tabset {
border-bottom: var(--route-tabset-divider-width) var(--route-tabset-divider-style) var(--route-tabset-divider-color);
}
nb-route-tabset .tab-link {
background-color: var(--route-tabset-tab-background-color);
cursor: pointer;
padding: var(--route-tabset-tab-padding);
color: var(--route-tabset-tab-text-color);
font-family: var(--route-tabset-tab-text-font-family);
font-size: var(--route-tabset-tab-text-font-size);
font-weight: var(--route-tabset-tab-text-font-weight);
line-height: var(--route-tabset-tab-text-line-height);
text-transform: var(--route-tabset-tab-text-transform);
}
nb-route-tabset .tab-link::before {
background-color: var(--route-tabset-tab-underline-color);
height: var(--route-tabset-tab-underline-width);
}
nb-route-tabset .route-tab.active .tab-link {
background-color: var(--tabset-tab-active-background-color);
color: var(--tabset-tab-active-text-color);
}
nb-route-tabset .route-tab.active .tab-link::before {
background-color: var(--tabset-tab-active-underline-color);
}
nb-route-tabset .route-tab:focus .tab-link {
background-color: var(--route-tabset-tab-focus-background-color);
color: var(--route-tabset-tab-focus-text-color);
}
nb-route-tabset .route-tab:focus .tab-link::before {
background-color: var(--route-tabset-tab-focus-underline-color);
}
nb-route-tabset .route-tab:hover .tab-link {
background-color: var(--route-tabset-tab-hover-background-color);
color: var(--route-tabset-tab-hover-text-color);
}
nb-route-tabset .route-tab:hover .tab-link::before {
background-color: var(--route-tabset-tab-hover-underline-color);
}
nb-route-tabset .route-tab.disabled {
cursor: default;
pointer-events: none;
}
nb-route-tabset .route-tab.disabled .tab-link {
background-color: var(--route-tabset-tab-disabled-background-color);
color: var(--route-tabset-tab-disabled-text-color);
cursor: default;
pointer-events: none;
}
nb-route-tabset .route-tab.disabled .tab-link::before {
background-color: var(--route-tabset-tab-disabled-underline-color);
}
@media screen and (max-width: var(--route-tabset-tab-text-hide-breakpoint)) {
nb-route-tabset .route-tab.responsive .tab-text {
display: none;
}
}
nb-menu {
background-color: var(--menu-background-color);
}
nb-menu ul.menu-items {
margin: 0;
padding: 0;
}
nb-menu .menu-group,
nb-menu .menu-item a {
font-family: var(--menu-text-font-family);
font-size: var(--menu-text-font-size);
font-weight: var(--menu-text-font-weight);
line-height: var(--menu-text-line-height);
padding: var(--menu-item-padding);
}
nb-menu .menu-group,
nb-menu .menu-group nb-icon.menu-icon {
color: var(--menu-group-text-color);
}
nb-menu .menu-item a {
color: var(--menu-text-color);
border-radius: var(--menu-item-border-radius);
}
nb-menu .menu-item a.active {
background-color: var(--menu-item-active-background-color);
color: var(--menu-item-active-text-color);
}
nb-menu .menu-item a.active .menu-icon {
color: var(--menu-item-icon-active-color);
}
nb-menu .menu-item a:hover {
background-color: var(--menu-item-hover-background-color);
color: var(--menu-item-hover-text-color);
cursor: var(--menu-item-hover-cursor);
}
nb-menu .menu-item a:hover .menu-icon {
color: var(--menu-item-icon-hover-color);
}
nb-menu .menu-item .menu-icon {
color: var(--menu-item-icon-color);
font-size: var(--menu-item-icon-width);
margin: var(--menu-item-icon-margin);
width: 1em;
text-align: center;
}
nb-menu .menu-item .expand-state {
color: var(--menu-item-icon-color);
}
nb-menu .menu-item {
border-bottom: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color);
}
nb-menu .menu-item:first-child {
border-top: none;
}
nb-menu .menu-item:last-child {
border-bottom: none;
}
nb-menu .menu-item .menu-item:first-child {
border-top: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color);
}
nb-menu .menu-item > .menu-items {
background-color: var(--menu-submenu-background-color);
margin: var(--menu-submenu-margin);
padding: var(--menu-submenu-padding);
}
nb-menu .menu-item > .menu-items > .menu-item {
background: var(--menu-submenu-background-color);
color: var(--menu-submenu-text-color);
}
nb-menu .menu-item > .menu-items > .menu-item a {
border-color: var(--menu-submenu-item-border-color);
border-style: var(--menu-submenu-item-border-style);
border-width: var(--menu-submenu-item-border-width);
padding: var(--menu-submenu-item-padding);
}
nb-menu .menu-item > .menu-items > .menu-item a.active {
background-color: var(--menu-submenu-item-active-background-color);
border-color: var(--menu-submenu-item-active-border-color);
color: var(--menu-submenu-item-active-text-color);
}
nb-menu .menu-item > .menu-items > .menu-item a.active .menu-icon {
color: var(--menu-submenu-item-icon-active-color);
}
nb-menu .menu-item > .menu-items > .menu-item a:hover {
background-color: var(--menu-submenu-item-hover-background-color);
border-color: var(--menu-submenu-item-hover-border-color);
color: var(--menu-submenu-item-hover-text-color);
}
nb-menu .menu-item > .menu-items > .menu-item a:hover .menu-icon {
color: var(--menu-submenu-item-icon-hover-color);
}
nb-menu .menu-item > .menu-items > .menu-item a.active:hover {
background-color: var(--menu-submenu-item-active-hover-background-color);
border-color: var(--menu-submenu-item-active-hover-border-color);
color: var(--menu-submenu-item-active-hover-text-color);
}
nb-menu .menu-item > .menu-items > .menu-item a.active:hover .menu-icon {
color: var(--menu-submenu-item-icon-active-hover-color);
}
nb-menu .menu-item > .menu-items > .menu-group, nb-menu .menu-item > .menu-items > .menu-group nb-icon.menu-icon {
color: var(--menu-group-text-color);
}
nb-user .user-picture {
background-color: var(--user-picture-box-background-color);
border: var(--user-picture-box-border-width) solid var(--user-picture-box-border-color);
}
nb-user .initials {
color: var(--user-initials-text-color);
font-family: var(--user-initials-text-font-family);
font-weight: var(--user-initials-text-font-weight);
}
nb-user .user-name {
color: var(--user-name-text-color);
font-family: var(--user-name-text-font-family);
font-weight: var(--user-name-text-font-weight);
}
nb-user .user-title {
color: var(--user-title-text-color);
font-family: var(--user-title-text-font-family);
font-weight: var(--user-title-text-font-weight);
}
nb-user.size-tiny .user-picture {
height: var(--user-tiny-height);
width: var(--user-tiny-width);
}
nb-user.size-tiny .initials {
font-size: var(--user-tiny-initials-text-font-size);
line-height: var(--user-tiny-initials-text-line-height);
}
nb-user.size-tiny .user-name {
font-size: var(--user-tiny-name-text-font-size);
line-height: var(--user-tiny-name-text-line-height);
}
nb-user.size-tiny .user-title {
font-size: var(--user-tiny-title-text-font-size);
line-height: var(--user-tiny-title-text-line-height);
}
nb-user.size-small .user-picture {
height: var(--user-small-height);
width: var(--user-small-width);
}
nb-user.size-small .initials {
font-size: var(--user-small-initials-text-font-size);
line-height: var(--user-small-initials-text-line-height);
}
nb-user.size-small .user-name {
font-size: var(--user-small-name-text-font-size);
line-height: var(--user-small-name-text-line-height);
}
nb-user.size-small .user-title {
font-size: var(--user-small-title-text-font-size);
line-height: var(--user-small-title-text-line-height);
}
nb-user.size-medium .user-picture {
height: var(--user-medium-height);
width: var(--user-medium-width);
}
nb-user.size-medium .initials {
font-size: var(--user-medium-initials-text-font-size);
line-height: var(--user-medium-initials-text-line-height);
}
nb-user.size-medium .user-name {
font-size: var(--user-medium-name-text-font-size);
line-height: var(--user-medium-name-text-line-height);
}
nb-user.size-medium .user-title {
font-size: var(--user-medium-title-text-font-size);
line-height: var(--user-medium-title-text-line-height);
}
nb-user.size-large .user-picture {
height: var(--user-large-height);
width: var(--user-large-width);
}
nb-user.size-large .initials {
font-size: var(--user-large-initials-text-font-size);
line-height: var(--user-large-initials-text-line-height);
}
nb-user.size-large .user-name {
font-size: var(--user-large-name-text-font-size);
line-height: var(--user-large-name-text-line-height);
}
nb-user.size-large .user-title {
font-size: var(--user-large-title-text-font-size);
line-height: var(--user-large-title-text-line-height);
}
nb-user.size-giant .user-picture {
height: var(--user-giant-height);
width: var(--user-giant-width);
}
nb-user.size-giant .initials {
font-size: var(--user-giant-initials-text-font-size);
line-height: var(--user-giant-initials-text-line-height);
}
nb-user.size-giant .user-name {
font-size: var(--user-giant-name-text-font-size);
line-height: var(--user-giant-name-text-line-height);
}
nb-user.size-giant .user-title {
font-size: var(--user-giant-title-text-font-size);
line-height: var(--user-giant-title-text-line-height);
}
nb-user.shape-rectangle .user-picture {
border-radius: var(--user-rectangle-border-radius);
}
nb-user.shape-semi-round .user-picture {
border-radius: var(--user-semi-round-border-radius);
}
nb-user.shape-round .user-picture {
border-radius: var(--user-round-border-radius);
}
nb-actions {
background-color: var(--actions-background-color);
color: var(--actions-text-color);
font-family: var(--actions-text-font-family);
font-weight: var(--actions-text-font-weight);
line-height: var(--actions-text-line-height);
}
nb-actions.size-tiny nb-action {
font-size: var(--actions-tiny-text-font-size);
height: var(--actions-tiny-height);
padding: var(--actions-tiny-padding);
}
nb-actions.size-tiny nb-action nb-icon {
font-size: var(--actions-tiny-icon-height);
}
nb-actions.size-small nb-action {
font-size: var(--actions-small-text-font-size);
height: var(--actions-small-height);
padding: var(--actions-small-padding);
}
nb-actions.size-small nb-action nb-icon {
font-size: var(--actions-small-icon-height);
}
nb-actions.size-medium nb-action {
font-size: var(--actions-medium-text-font-size);
height: var(--actions-medium-height);
padding: var(--actions-medium-padding);
}
nb-actions.size-medium nb-action nb-icon {
font-size: var(--actions-medium-icon-height);
}
nb-actions.size-large nb-action {
font-size: var(--actions-large-text-font-size);
height: var(--actions-large-height);
padding: var(--actions-large-padding);
}
nb-actions.size-large nb-action nb-icon {
font-size: var(--actions-large-icon-height);
}
nb-actions.size-giant nb-action {
font-size: var(--actions-giant-text-font-size);
height: var(--actions-giant-height);
padding: var(--actions-giant-padding);
}
nb-actions.size-giant nb-action nb-icon {
font-size: var(--actions-giant-icon-height);
}
[dir=ltr] nb-action {
border-left: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color);
}
[dir=rtl] nb-action {
border-right: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color);
}
[dir=ltr] nb-action:first-child {
border-left: none !important;
}
[dir=rtl] nb-action:first-child {
border-right: none !important;
}
nb-action nb-icon {
color: var(--actions-icon-color);
}
nb-action.disabled {
color: var(--actions-disabled-text-color);
}
nb-action.disabled nb-icon {
color: var(--actions-disabled-icon-color);
}
nb-search-field .close-button {
z-index: 1;
}
nb-search-field .search {
background: var(--search-background-color);
}
nb-search-field .search span.info {
color: var(--search-info-text-color);
font-family: var(--search-info-text-font-family);
font-size: var(--search-info-text-font-size);
font-weight: var(--search-info-text-font-weight);
line-height: var(--search-info-text-line-height);
}
nb-search-field .search input {
border-bottom: var(--search-divider-width) var(--search-divider-style) var(--search-divider-color);
color: var(--search-text-color);
font-family: var(--search-text-font-family);
font-size: var(--search-text-font-size);
font-weight: var(--search-text-font-weight);
line-height: var(--search-text-line-height);
}
nb-search-field .search input::placeholder {
color: var(--search-placeholder-text-color);
}
nb-search-field .search input::-ms-clear {
display: none;
}
nb-search-field.rotate-layout {
opacity: 0;
background: var(--search-background-color);
}
nb-search-field.modal-zoomin .search::before,
nb-search-field.modal-zoomin .search::after {
border: 1.5rem solid var(--search-extra-background-color);
}
nb-search-field.modal-half .form-wrapper {
background: var(--search-background-color);
}
nb-search-field.modal-half .search::before {
background: var(--search-extra-background-color);
}
nb-search-field.modal-drop .form-content::after {
background: var(--search-divider-color);
}
nb-search-field.modal-drop .search::before {
background: var(--search-background-color);
}
nb-search-field.curtain .search::after {
background: var(--search-background-color);
}
nb-search-field.curtain .search {
background: var(--search-background-color);
}
nb-search-field.column-curtain::before {
background: var(--search-background-color);
}
nb-search-field.column-curtain::after {
background: transparent;
}
nb-search-field.column-curtain.show::after {
background: var(--search-extra-background-color);
}
.nb-spinner-container {
position: relative;
}
nb-spinner .message {
color: var(--spinner-text-color);
font-family: var(--spinner-text-font-family);
font-size: var(--spinner-text-font-size);
font-weight: var(--spinner-text-font-weight);
line-height: var(--spinner-text-line-height);
}
nb-spinner.status-basic {
background-color: var(--spinner-basic-background-color);
}
nb-spinner.status-basic .spin-circle {
border-top-color: var(--spinner-basic-circle-filled-color);
border-right-color: var(--spinner-basic-circle-empty-color);
border-bottom-color: var(--spinner-basic-circle-filled-color);
border-left-color: var(--spinner-basic-circle-filled-color);
}
nb-spinner.status-primary {
background-color: var(--spinner-primary-background-color);
}
nb-spinner.status-primary .spin-circle {
border-top-color: var(--spinner-primary-circle-filled-color);
border-right-color: var(--spinner-primary-circle-empty-color);
border-bottom-color: var(--spinner-primary-circle-filled-color);
border-left-color: var(--spinner-primary-circle-filled-color);
}
nb-spinner.status-success {
background-color: var(--spinner-success-background-color);
}
nb-spinner.status-success .spin-circle {
border-top-color: var(--spinner-success-circle-filled-color);
border-right-color: var(--spinner-success-circle-empty-color);
border-bottom-color: var(--spinner-success-circle-filled-color);
border-left-color: var(--spinner-success-circle-filled-color);
}
nb-spinner.status-warning {
background-color: var(--spinner-warning-background-color);
}
nb-spinner.status-warning .spin-circle {
border-top-color: var(--spinner-warning-circle-filled-color);
border-right-color: var(--spinner-warning-circle-empty-color);
border-bottom-color: var(--spinner-warning-circle-filled-color);
border-left-color: var(--spinner-warning-circle-filled-color);
}
nb-spinner.status-danger {
background-color: var(--spinner-danger-background-color);
}
nb-spinner.status-danger .spin-circle {
border-top-color: var(--spinner-danger-circle-filled-color);
border-right-color: var(--spinner-danger-circle-empty-color);
border-bottom-color: var(--spinner-danger-circle-filled-color);
border-left-color: var(--spinner-danger-circle-filled-color);
}
nb-spinner.status-info {
background-color: var(--spinner-info-background-color);
}
nb-spinner.status-info .spin-circle {
border-top-color: var(--spinner-info-circle-filled-color);
border-right-color: var(--spinner-info-circle-empty-color);
border-bottom-color: var(--spinner-info-circle-filled-color);
border-left-color: var(--spinner-info-circle-filled-color);
}
nb-spinner.status-control {
background-color: var(--spinner-control-background-color);
}
nb-spinner.status-control .spin-circle {
border-top-color: var(--spinner-control-circle-filled-color);
border-right-color: var(--spinner-control-circle-empty-color);
border-bottom-color: var(--spinner-control-circle-filled-color);
border-left-color: var(--spinner-control-circle-filled-color);
}
nb-spinner.size-tiny {
font-size: var(--spinner-height-tiny);
}
nb-spinner.size-small {
font-size: var(--spinner-height-small);
}
nb-spinner.size-medium {
font-size: var(--spinner-height-medium);
}
nb-spinner.size-large {
font-size: var(--spinner-height-large);
}
nb-spinner.size-giant {
font-size: var(--spinner-height-giant);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
40% {
transform: rotate(230deg);
}
100% {
transform: rotate(360deg);
}
}
.nb-timepicker-container {
width: var(--timepicker-container-width);
height: var(--timepicker-container-height);
}
.nb-timepicker-container .list-item {
color: var(--timepicker-cell-text-color);
font-size: var(--timepicker-cell-text-font-size);
font-family: var(--timepicker-cell-text-font-family);
height: var(--timepicker-cell-height);
line-height: var(--timepicker-cell-text-line-height);
font-weight: var(--timepicker-cell-text-font-weight);
}
.nb-timepicker-container .list-item:first-child {
border-top: none;
}
.nb-timepicker-container .list-item:hover {
background-color: var(--timepicker-cell-hover-background-color);
color: var(--timepicker-cell-hover-text-color);
}
.nb-timepicker-container .list-item:focus {
background-color: var(--timepicker-cell-focus-background-color);
color: var(--timepicker-cell-focus-text-color);
}
.nb-timepicker-container .list-item.selected {
background-color: var(--timepicker-cell-active-background-color);
color: var(--timepicker-cell-active-text-color);
}
.nb-timepicker-container .values-list {
scrollbar-face-color: var(--timepicker-scrollbar-color);
scrollbar-track-color: var(--timepicker-scrollbar-background-color);
}
[dir=ltr] .nb-timepicker-container .values-list:not(:last-of-type) {
border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color);
}
[dir=rtl] .nb-timepicker-container .values-list:not(:last-of-type) {
border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color);
}
.nb-timepicker-container .values-list::-webkit-scrollbar {
width: var(--timepicker-scrollbar-width);
height: var(--timepicker-scrollbar-width);
}
.nb-timepicker-container .values-list::-webkit-scrollbar-thumb {
background: var(--timepicker-scrollbar-color);
cursor: pointer;
border-radius: var(--timepicker-scrollbar-width)/2;
}
.nb-timepicker-container .values-list::-webkit-scrollbar-track {
background: var(--timepicker-scrollbar-background-color);
}
[dir=ltr] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) {
margin-right: -var(--timepicker-scrollbar-width);
}
[dir=rtl] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) {
margin-left: -var(--timepicker-scrollbar-width);
}
.nb-timepicker-container .header-cell {
color: var(--timepicker-header-cell-text-color);
font-size: var(--timepicker-header-cell-text-font-size);
font-family: var(--timepicker-header-cell-text-font-family);
height: var(--timepicker-header-cell-height);
line-height: var(--timepicker-header-cell-text-line-height);
font-weight: var(--timepicker-header-cell-text-font-weight);
}
[dir=ltr] .nb-timepicker-container .header-cell:not(:last-child) {
border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color);
}
[dir=rtl] .nb-timepicker-container .header-cell:not(:last-child) {
border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color);
}
.nb-timepicker-container .column-header {
border-bottom: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color);
}
[dir=ltr] .nb-timepicker-container .actions-footer {
padding-left: 0.625rem;
}
[dir=rtl] .nb-timepicker-container .actions-footer {
padding-right: 0.625rem;
}
nb-checkbox .label {
padding: var(--checkbox-padding);
}
nb-checkbox .custom-checkbox {
width: var(--checkbox-width);
height: var(--checkbox-height);
border-style: var(--checkbox-border-style);
border-width: var(--checkbox-border-width);
border-radius: var(--checkbox-border-radius);
position: relative;
}
nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox {
box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color);
}
nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox:not(:hover):not(:active) {
box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color), inset var(--checkbox-focus-inset-shadow-length) var(--checkbox-outline-color);
}
nb-checkbox .native-input:focus:checked + .custom-checkbox {
box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color);
}
nb-checkbox nb-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
nb-checkbox .text {
font-family: var(--checkbox-text-font-family);
font-size: var(--checkbox-text-font-size);
font-weight: var(--checkbox-text-font-weight);
line-height: var(--checkbox-text-line-height);
}
[dir=ltr] nb-checkbox .text:not(:empty) {
padding-left: var(--checkbox-text-space);
}
[dir=rtl] nb-checkbox .text:not(:empty) {
padding-right: var(--checkbox-text-space);
}
nb-checkbox.status-basic .custom-checkbox {
background-color: var(--checkbox-basic-background-color);
border-color: var(--checkbox-basic-border-color);
}
nb-checkbox.status-basic .text {
color: var(--checkbox-basic-text-color);
}
nb-checkbox.status-basic .custom-checkbox.checked {
background-color: var(--checkbox-basic-checked-background-color);
border-color: var(--checkbox-basic-checked-border-color);
}
nb-checkbox.status-basic .custom-checkbox.checked nb-icon {
color: var(--checkbox-basic-checked-checkmark-color);
}
nb-checkbox.status-basic .custom-checkbox.indeterminate {
background-color: var(--checkbox-basic-indeterminate-background-color);
border-color: var(--checkbox-basic-indeterminate-border-color);
}
nb-checkbox.status-basic .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-basic-indeterminate-checkmark-color);
}
nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-basic-focus-background-color);
border-color: var(--checkbox-basic-focus-border-color);
}
nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-basic-focus-checked-background-color);
border-color: var(--checkbox-basic-focus-checked-border-color);
}
nb-checkbox.status-basic .custom-checkbox:hover {
background-color: var(--checkbox-basic-hover-background-color);
border-color: var(--checkbox-basic-hover-border-color);
}
nb-checkbox.status-basic .custom-checkbox:hover.indeterminate, nb-checkbox.status-basic .custom-checkbox:hover.checked {
background-color: var(--checkbox-basic-hover-checked-background-color);
border-color: var(--checkbox-basic-hover-checked-border-color);
}
nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-basic-active-background-color);
border-color: var(--checkbox-basic-active-border-color);
}
nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-basic-active-checked-background-color);
border-color: var(--checkbox-basic-active-checked-border-color);
}
nb-checkbox.status-basic .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-basic-disabled-background-color);
border-color: var(--checkbox-basic-disabled-border-color);
}
nb-checkbox.status-basic .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-basic-disabled-checkmark-color);
}
nb-checkbox.status-basic .native-input:disabled ~ .text {
color: var(--checkbox-basic-disabled-text-color);
}
nb-checkbox.status-basic .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-basic .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-basic-disabled-checked-background-color);
border-color: var(--checkbox-basic-disabled-checked-border-color);
}
nb-checkbox.status-primary .custom-checkbox {
background-color: var(--checkbox-primary-background-color);
border-color: var(--checkbox-primary-border-color);
}
nb-checkbox.status-primary .text {
color: var(--checkbox-primary-text-color);
}
nb-checkbox.status-primary .custom-checkbox.checked {
background-color: var(--checkbox-primary-checked-background-color);
border-color: var(--checkbox-primary-checked-border-color);
}
nb-checkbox.status-primary .custom-checkbox.checked nb-icon {
color: var(--checkbox-primary-checked-checkmark-color);
}
nb-checkbox.status-primary .custom-checkbox.indeterminate {
background-color: var(--checkbox-primary-indeterminate-background-color);
border-color: var(--checkbox-primary-indeterminate-border-color);
}
nb-checkbox.status-primary .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-primary-indeterminate-checkmark-color);
}
nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-primary-focus-background-color);
border-color: var(--checkbox-primary-focus-border-color);
}
nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-primary-focus-checked-background-color);
border-color: var(--checkbox-primary-focus-checked-border-color);
}
nb-checkbox.status-primary .custom-checkbox:hover {
background-color: var(--checkbox-primary-hover-background-color);
border-color: var(--checkbox-primary-hover-border-color);
}
nb-checkbox.status-primary .custom-checkbox:hover.indeterminate, nb-checkbox.status-primary .custom-checkbox:hover.checked {
background-color: var(--checkbox-primary-hover-checked-background-color);
border-color: var(--checkbox-primary-hover-checked-border-color);
}
nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-primary-active-background-color);
border-color: var(--checkbox-primary-active-border-color);
}
nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-primary-active-checked-background-color);
border-color: var(--checkbox-primary-active-checked-border-color);
}
nb-checkbox.status-primary .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-primary-disabled-background-color);
border-color: var(--checkbox-primary-disabled-border-color);
}
nb-checkbox.status-primary .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-primary-disabled-checkmark-color);
}
nb-checkbox.status-primary .native-input:disabled ~ .text {
color: var(--checkbox-primary-disabled-text-color);
}
nb-checkbox.status-primary .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-primary .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-primary-disabled-checked-background-color);
border-color: var(--checkbox-primary-disabled-checked-border-color);
}
nb-checkbox.status-success .custom-checkbox {
background-color: var(--checkbox-success-background-color);
border-color: var(--checkbox-success-border-color);
}
nb-checkbox.status-success .text {
color: var(--checkbox-success-text-color);
}
nb-checkbox.status-success .custom-checkbox.checked {
background-color: var(--checkbox-success-checked-background-color);
border-color: var(--checkbox-success-checked-border-color);
}
nb-checkbox.status-success .custom-checkbox.checked nb-icon {
color: var(--checkbox-success-checked-checkmark-color);
}
nb-checkbox.status-success .custom-checkbox.indeterminate {
background-color: var(--checkbox-success-indeterminate-background-color);
border-color: var(--checkbox-success-indeterminate-border-color);
}
nb-checkbox.status-success .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-success-indeterminate-checkmark-color);
}
nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-success-focus-background-color);
border-color: var(--checkbox-success-focus-border-color);
}
nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-success-focus-checked-background-color);
border-color: var(--checkbox-success-focus-checked-border-color);
}
nb-checkbox.status-success .custom-checkbox:hover {
background-color: var(--checkbox-success-hover-background-color);
border-color: var(--checkbox-success-hover-border-color);
}
nb-checkbox.status-success .custom-checkbox:hover.indeterminate, nb-checkbox.status-success .custom-checkbox:hover.checked {
background-color: var(--checkbox-success-hover-checked-background-color);
border-color: var(--checkbox-success-hover-checked-border-color);
}
nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-success-active-background-color);
border-color: var(--checkbox-success-active-border-color);
}
nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-success-active-checked-background-color);
border-color: var(--checkbox-success-active-checked-border-color);
}
nb-checkbox.status-success .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-success-disabled-background-color);
border-color: var(--checkbox-success-disabled-border-color);
}
nb-checkbox.status-success .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-success-disabled-checkmark-color);
}
nb-checkbox.status-success .native-input:disabled ~ .text {
color: var(--checkbox-success-disabled-text-color);
}
nb-checkbox.status-success .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-success .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-success-disabled-checked-background-color);
border-color: var(--checkbox-success-disabled-checked-border-color);
}
nb-checkbox.status-warning .custom-checkbox {
background-color: var(--checkbox-warning-background-color);
border-color: var(--checkbox-warning-border-color);
}
nb-checkbox.status-warning .text {
color: var(--checkbox-warning-text-color);
}
nb-checkbox.status-warning .custom-checkbox.checked {
background-color: var(--checkbox-warning-checked-background-color);
border-color: var(--checkbox-warning-checked-border-color);
}
nb-checkbox.status-warning .custom-checkbox.checked nb-icon {
color: var(--checkbox-warning-checked-checkmark-color);
}
nb-checkbox.status-warning .custom-checkbox.indeterminate {
background-color: var(--checkbox-warning-indeterminate-background-color);
border-color: var(--checkbox-warning-indeterminate-border-color);
}
nb-checkbox.status-warning .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-warning-indeterminate-checkmark-color);
}
nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-warning-focus-background-color);
border-color: var(--checkbox-warning-focus-border-color);
}
nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-warning-focus-checked-background-color);
border-color: var(--checkbox-warning-focus-checked-border-color);
}
nb-checkbox.status-warning .custom-checkbox:hover {
background-color: var(--checkbox-warning-hover-background-color);
border-color: var(--checkbox-warning-hover-border-color);
}
nb-checkbox.status-warning .custom-checkbox:hover.indeterminate, nb-checkbox.status-warning .custom-checkbox:hover.checked {
background-color: var(--checkbox-warning-hover-checked-background-color);
border-color: var(--checkbox-warning-hover-checked-border-color);
}
nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-warning-active-background-color);
border-color: var(--checkbox-warning-active-border-color);
}
nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-warning-active-checked-background-color);
border-color: var(--checkbox-warning-active-checked-border-color);
}
nb-checkbox.status-warning .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-warning-disabled-background-color);
border-color: var(--checkbox-warning-disabled-border-color);
}
nb-checkbox.status-warning .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-warning-disabled-checkmark-color);
}
nb-checkbox.status-warning .native-input:disabled ~ .text {
color: var(--checkbox-warning-disabled-text-color);
}
nb-checkbox.status-warning .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-warning .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-warning-disabled-checked-background-color);
border-color: var(--checkbox-warning-disabled-checked-border-color);
}
nb-checkbox.status-danger .custom-checkbox {
background-color: var(--checkbox-danger-background-color);
border-color: var(--checkbox-danger-border-color);
}
nb-checkbox.status-danger .text {
color: var(--checkbox-danger-text-color);
}
nb-checkbox.status-danger .custom-checkbox.checked {
background-color: var(--checkbox-danger-checked-background-color);
border-color: var(--checkbox-danger-checked-border-color);
}
nb-checkbox.status-danger .custom-checkbox.checked nb-icon {
color: var(--checkbox-danger-checked-checkmark-color);
}
nb-checkbox.status-danger .custom-checkbox.indeterminate {
background-color: var(--checkbox-danger-indeterminate-background-color);
border-color: var(--checkbox-danger-indeterminate-border-color);
}
nb-checkbox.status-danger .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-danger-indeterminate-checkmark-color);
}
nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-danger-focus-background-color);
border-color: var(--checkbox-danger-focus-border-color);
}
nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-danger-focus-checked-background-color);
border-color: var(--checkbox-danger-focus-checked-border-color);
}
nb-checkbox.status-danger .custom-checkbox:hover {
background-color: var(--checkbox-danger-hover-background-color);
border-color: var(--checkbox-danger-hover-border-color);
}
nb-checkbox.status-danger .custom-checkbox:hover.indeterminate, nb-checkbox.status-danger .custom-checkbox:hover.checked {
background-color: var(--checkbox-danger-hover-checked-background-color);
border-color: var(--checkbox-danger-hover-checked-border-color);
}
nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-danger-active-background-color);
border-color: var(--checkbox-danger-active-border-color);
}
nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-danger-active-checked-background-color);
border-color: var(--checkbox-danger-active-checked-border-color);
}
nb-checkbox.status-danger .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-danger-disabled-background-color);
border-color: var(--checkbox-danger-disabled-border-color);
}
nb-checkbox.status-danger .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-danger-disabled-checkmark-color);
}
nb-checkbox.status-danger .native-input:disabled ~ .text {
color: var(--checkbox-danger-disabled-text-color);
}
nb-checkbox.status-danger .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-danger .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-danger-disabled-checked-background-color);
border-color: var(--checkbox-danger-disabled-checked-border-color);
}
nb-checkbox.status-info .custom-checkbox {
background-color: var(--checkbox-info-background-color);
border-color: var(--checkbox-info-border-color);
}
nb-checkbox.status-info .text {
color: var(--checkbox-info-text-color);
}
nb-checkbox.status-info .custom-checkbox.checked {
background-color: var(--checkbox-info-checked-background-color);
border-color: var(--checkbox-info-checked-border-color);
}
nb-checkbox.status-info .custom-checkbox.checked nb-icon {
color: var(--checkbox-info-checked-checkmark-color);
}
nb-checkbox.status-info .custom-checkbox.indeterminate {
background-color: var(--checkbox-info-indeterminate-background-color);
border-color: var(--checkbox-info-indeterminate-border-color);
}
nb-checkbox.status-info .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-info-indeterminate-checkmark-color);
}
nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-info-focus-background-color);
border-color: var(--checkbox-info-focus-border-color);
}
nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-info-focus-checked-background-color);
border-color: var(--checkbox-info-focus-checked-border-color);
}
nb-checkbox.status-info .custom-checkbox:hover {
background-color: var(--checkbox-info-hover-background-color);
border-color: var(--checkbox-info-hover-border-color);
}
nb-checkbox.status-info .custom-checkbox:hover.indeterminate, nb-checkbox.status-info .custom-checkbox:hover.checked {
background-color: var(--checkbox-info-hover-checked-background-color);
border-color: var(--checkbox-info-hover-checked-border-color);
}
nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-info-active-background-color);
border-color: var(--checkbox-info-active-border-color);
}
nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-info-active-checked-background-color);
border-color: var(--checkbox-info-active-checked-border-color);
}
nb-checkbox.status-info .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-info-disabled-background-color);
border-color: var(--checkbox-info-disabled-border-color);
}
nb-checkbox.status-info .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-info-disabled-checkmark-color);
}
nb-checkbox.status-info .native-input:disabled ~ .text {
color: var(--checkbox-info-disabled-text-color);
}
nb-checkbox.status-info .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-info .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-info-disabled-checked-background-color);
border-color: var(--checkbox-info-disabled-checked-border-color);
}
nb-checkbox.status-control .custom-checkbox {
background-color: var(--checkbox-control-background-color);
border-color: var(--checkbox-control-border-color);
}
nb-checkbox.status-control .text {
color: var(--checkbox-control-text-color);
}
nb-checkbox.status-control .custom-checkbox.checked {
background-color: var(--checkbox-control-checked-background-color);
border-color: var(--checkbox-control-checked-border-color);
}
nb-checkbox.status-control .custom-checkbox.checked nb-icon {
color: var(--checkbox-control-checked-checkmark-color);
}
nb-checkbox.status-control .custom-checkbox.indeterminate {
background-color: var(--checkbox-control-indeterminate-background-color);
border-color: var(--checkbox-control-indeterminate-border-color);
}
nb-checkbox.status-control .custom-checkbox.indeterminate nb-icon {
color: var(--checkbox-control-indeterminate-checkmark-color);
}
nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox {
background-color: var(--checkbox-control-focus-background-color);
border-color: var(--checkbox-control-focus-border-color);
}
nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.checked {
background-color: var(--checkbox-control-focus-checked-background-color);
border-color: var(--checkbox-control-focus-checked-border-color);
}
nb-checkbox.status-control .custom-checkbox:hover {
background-color: var(--checkbox-control-hover-background-color);
border-color: var(--checkbox-control-hover-border-color);
}
nb-checkbox.status-control .custom-checkbox:hover.indeterminate, nb-checkbox.status-control .custom-checkbox:hover.checked {
background-color: var(--checkbox-control-hover-checked-background-color);
border-color: var(--checkbox-control-hover-checked-border-color);
}
nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox {
background-color: var(--checkbox-control-active-background-color);
border-color: var(--checkbox-control-active-border-color);
}
nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.checked {
background-color: var(--checkbox-control-active-checked-background-color);
border-color: var(--checkbox-control-active-checked-border-color);
}
nb-checkbox.status-control .native-input:disabled + .custom-checkbox {
background-color: var(--checkbox-control-disabled-background-color);
border-color: var(--checkbox-control-disabled-border-color);
}
nb-checkbox.status-control .native-input:disabled + .custom-checkbox nb-icon {
color: var(--checkbox-control-disabled-checkmark-color);
}
nb-checkbox.status-control .native-input:disabled ~ .text {
color: var(--checkbox-control-disabled-text-color);
}
nb-checkbox.status-control .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-control .native-input:disabled:checked + .custom-checkbox {
background-color: var(--checkbox-control-disabled-checked-background-color);
border-color: var(--checkbox-control-disabled-checked-border-color);
}
nb-toggle .toggle {
height: var(--toggle-height);
width: var(--toggle-width);
border-width: var(--toggle-border-width);
border-style: solid;
border-radius: var(--toggle-border-radius);
cursor: var(--toggle-cursor);
/*
We need to set initial positions as Angular animations won't work in IE11 if positions have no initial value.
Setting it in SCSS as we don't have access to theme variables from TS.
*/
}
[dir=ltr] nb-toggle .toggle.checked .toggle-switcher {
left: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width));
}
[dir=ltr] nb-toggle .toggle:not(.checked) .toggle-switcher {
right: 0;
}
[dir=rtl] nb-toggle .toggle.checked .toggle-switcher {
right: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width));
}
[dir=rtl] nb-toggle .toggle:not(.checked) .toggle-switcher {
left: 0;
}
nb-toggle .native-input:enabled:focus + .toggle {
box-shadow: 0 0 0 var(--toggle-outline-width) var(--toggle-outline-color);
}
nb-toggle .native-input:disabled + .toggle {
cursor: var(--toggle-disabled-cursor);
}
nb-toggle .toggle-switcher {
width: var(--toggle-switcher-size);
height: var(--toggle-switcher-size);
}
nb-toggle .toggle-switcher nb-icon {
height: var(--toggle-switcher-icon-size);
width: var(--toggle-switcher-icon-size);
}
nb-toggle .text {
font-family: var(--toggle-text-font-family);
font-size: var(--toggle-text-font-size);
font-weight: var(--toggle-text-font-weight);
line-height: var(--toggle-text-line-height);
}
nb-toggle.status-basic .text {
color: var(--toggle-basic-text-color);
}
nb-toggle.status-basic .toggle {
background-color: var(--toggle-basic-background-color);
border-color: var(--toggle-basic-border-color);
}
nb-toggle.status-basic .toggle.checked {
background-color: var(--toggle-basic-checked-background-color);
border-color: var(--toggle-basic-checked-border-color);
}
nb-toggle.status-basic .native-input:enabled:focus + .toggle {
background-color: var(--toggle-basic-focus-background-color);
border-color: var(--toggle-basic-focus-border-color);
}
nb-toggle.status-basic .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-basic-focus-checked-background-color);
border-color: var(--toggle-basic-focus-checked-border-color);
}
nb-toggle.status-basic .native-input:enabled:active + .toggle {
background-color: var(--toggle-basic-active-background-color);
border-color: var(--toggle-basic-active-border-color);
}
nb-toggle.status-basic .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-basic-active-checked-background-color);
border-color: var(--toggle-basic-active-checked-border-color);
}
nb-toggle.status-basic .native-input:enabled + .toggle:hover {
background-color: var(--toggle-basic-hover-background-color);
border-color: var(--toggle-basic-hover-border-color);
}
nb-toggle.status-basic .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-basic-hover-checked-background-color);
border-color: var(--toggle-basic-hover-checked-border-color);
}
nb-toggle.status-basic .toggle-switcher {
background-color: var(--toggle-basic-checked-switcher-background-color);
}
nb-toggle.status-basic .toggle-switcher nb-icon {
color: var(--toggle-basic-checked-switcher-checkmark-color);
}
nb-toggle.status-basic .native-input:disabled + .toggle {
background-color: var(--toggle-basic-disabled-background-color);
border-color: var(--toggle-basic-disabled-border-color);
}
nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-basic-disabled-switcher-background-color);
}
nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-basic-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-basic .native-input:disabled ~ .text {
color: var(--toggle-basic-disabled-text-color);
}
nb-toggle.status-primary .text {
color: var(--toggle-primary-text-color);
}
nb-toggle.status-primary .toggle {
background-color: var(--toggle-primary-background-color);
border-color: var(--toggle-primary-border-color);
}
nb-toggle.status-primary .toggle.checked {
background-color: var(--toggle-primary-checked-background-color);
border-color: var(--toggle-primary-checked-border-color);
}
nb-toggle.status-primary .native-input:enabled:focus + .toggle {
background-color: var(--toggle-primary-focus-background-color);
border-color: var(--toggle-primary-focus-border-color);
}
nb-toggle.status-primary .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-primary-focus-checked-background-color);
border-color: var(--toggle-primary-focus-checked-border-color);
}
nb-toggle.status-primary .native-input:enabled:active + .toggle {
background-color: var(--toggle-primary-active-background-color);
border-color: var(--toggle-primary-active-border-color);
}
nb-toggle.status-primary .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-primary-active-checked-background-color);
border-color: var(--toggle-primary-active-checked-border-color);
}
nb-toggle.status-primary .native-input:enabled + .toggle:hover {
background-color: var(--toggle-primary-hover-background-color);
border-color: var(--toggle-primary-hover-border-color);
}
nb-toggle.status-primary .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-primary-hover-checked-background-color);
border-color: var(--toggle-primary-hover-checked-border-color);
}
nb-toggle.status-primary .toggle-switcher {
background-color: var(--toggle-primary-checked-switcher-background-color);
}
nb-toggle.status-primary .toggle-switcher nb-icon {
color: var(--toggle-primary-checked-switcher-checkmark-color);
}
nb-toggle.status-primary .native-input:disabled + .toggle {
background-color: var(--toggle-primary-disabled-background-color);
border-color: var(--toggle-primary-disabled-border-color);
}
nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-primary-disabled-switcher-background-color);
}
nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-primary-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-primary .native-input:disabled ~ .text {
color: var(--toggle-primary-disabled-text-color);
}
nb-toggle.status-success .text {
color: var(--toggle-success-text-color);
}
nb-toggle.status-success .toggle {
background-color: var(--toggle-success-background-color);
border-color: var(--toggle-success-border-color);
}
nb-toggle.status-success .toggle.checked {
background-color: var(--toggle-success-checked-background-color);
border-color: var(--toggle-success-checked-border-color);
}
nb-toggle.status-success .native-input:enabled:focus + .toggle {
background-color: var(--toggle-success-focus-background-color);
border-color: var(--toggle-success-focus-border-color);
}
nb-toggle.status-success .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-success-focus-checked-background-color);
border-color: var(--toggle-success-focus-checked-border-color);
}
nb-toggle.status-success .native-input:enabled:active + .toggle {
background-color: var(--toggle-success-active-background-color);
border-color: var(--toggle-success-active-border-color);
}
nb-toggle.status-success .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-success-active-checked-background-color);
border-color: var(--toggle-success-active-checked-border-color);
}
nb-toggle.status-success .native-input:enabled + .toggle:hover {
background-color: var(--toggle-success-hover-background-color);
border-color: var(--toggle-success-hover-border-color);
}
nb-toggle.status-success .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-success-hover-checked-background-color);
border-color: var(--toggle-success-hover-checked-border-color);
}
nb-toggle.status-success .toggle-switcher {
background-color: var(--toggle-success-checked-switcher-background-color);
}
nb-toggle.status-success .toggle-switcher nb-icon {
color: var(--toggle-success-checked-switcher-checkmark-color);
}
nb-toggle.status-success .native-input:disabled + .toggle {
background-color: var(--toggle-success-disabled-background-color);
border-color: var(--toggle-success-disabled-border-color);
}
nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-success-disabled-switcher-background-color);
}
nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-success-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-success .native-input:disabled ~ .text {
color: var(--toggle-success-disabled-text-color);
}
nb-toggle.status-warning .text {
color: var(--toggle-warning-text-color);
}
nb-toggle.status-warning .toggle {
background-color: var(--toggle-warning-background-color);
border-color: var(--toggle-warning-border-color);
}
nb-toggle.status-warning .toggle.checked {
background-color: var(--toggle-warning-checked-background-color);
border-color: var(--toggle-warning-checked-border-color);
}
nb-toggle.status-warning .native-input:enabled:focus + .toggle {
background-color: var(--toggle-warning-focus-background-color);
border-color: var(--toggle-warning-focus-border-color);
}
nb-toggle.status-warning .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-warning-focus-checked-background-color);
border-color: var(--toggle-warning-focus-checked-border-color);
}
nb-toggle.status-warning .native-input:enabled:active + .toggle {
background-color: var(--toggle-warning-active-background-color);
border-color: var(--toggle-warning-active-border-color);
}
nb-toggle.status-warning .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-warning-active-checked-background-color);
border-color: var(--toggle-warning-active-checked-border-color);
}
nb-toggle.status-warning .native-input:enabled + .toggle:hover {
background-color: var(--toggle-warning-hover-background-color);
border-color: var(--toggle-warning-hover-border-color);
}
nb-toggle.status-warning .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-warning-hover-checked-background-color);
border-color: var(--toggle-warning-hover-checked-border-color);
}
nb-toggle.status-warning .toggle-switcher {
background-color: var(--toggle-warning-checked-switcher-background-color);
}
nb-toggle.status-warning .toggle-switcher nb-icon {
color: var(--toggle-warning-checked-switcher-checkmark-color);
}
nb-toggle.status-warning .native-input:disabled + .toggle {
background-color: var(--toggle-warning-disabled-background-color);
border-color: var(--toggle-warning-disabled-border-color);
}
nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-warning-disabled-switcher-background-color);
}
nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-warning-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-warning .native-input:disabled ~ .text {
color: var(--toggle-warning-disabled-text-color);
}
nb-toggle.status-danger .text {
color: var(--toggle-danger-text-color);
}
nb-toggle.status-danger .toggle {
background-color: var(--toggle-danger-background-color);
border-color: var(--toggle-danger-border-color);
}
nb-toggle.status-danger .toggle.checked {
background-color: var(--toggle-danger-checked-background-color);
border-color: var(--toggle-danger-checked-border-color);
}
nb-toggle.status-danger .native-input:enabled:focus + .toggle {
background-color: var(--toggle-danger-focus-background-color);
border-color: var(--toggle-danger-focus-border-color);
}
nb-toggle.status-danger .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-danger-focus-checked-background-color);
border-color: var(--toggle-danger-focus-checked-border-color);
}
nb-toggle.status-danger .native-input:enabled:active + .toggle {
background-color: var(--toggle-danger-active-background-color);
border-color: var(--toggle-danger-active-border-color);
}
nb-toggle.status-danger .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-danger-active-checked-background-color);
border-color: var(--toggle-danger-active-checked-border-color);
}
nb-toggle.status-danger .native-input:enabled + .toggle:hover {
background-color: var(--toggle-danger-hover-background-color);
border-color: var(--toggle-danger-hover-border-color);
}
nb-toggle.status-danger .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-danger-hover-checked-background-color);
border-color: var(--toggle-danger-hover-checked-border-color);
}
nb-toggle.status-danger .toggle-switcher {
background-color: var(--toggle-danger-checked-switcher-background-color);
}
nb-toggle.status-danger .toggle-switcher nb-icon {
color: var(--toggle-danger-checked-switcher-checkmark-color);
}
nb-toggle.status-danger .native-input:disabled + .toggle {
background-color: var(--toggle-danger-disabled-background-color);
border-color: var(--toggle-danger-disabled-border-color);
}
nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-danger-disabled-switcher-background-color);
}
nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-danger-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-danger .native-input:disabled ~ .text {
color: var(--toggle-danger-disabled-text-color);
}
nb-toggle.status-info .text {
color: var(--toggle-info-text-color);
}
nb-toggle.status-info .toggle {
background-color: var(--toggle-info-background-color);
border-color: var(--toggle-info-border-color);
}
nb-toggle.status-info .toggle.checked {
background-color: var(--toggle-info-checked-background-color);
border-color: var(--toggle-info-checked-border-color);
}
nb-toggle.status-info .native-input:enabled:focus + .toggle {
background-color: var(--toggle-info-focus-background-color);
border-color: var(--toggle-info-focus-border-color);
}
nb-toggle.status-info .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-info-focus-checked-background-color);
border-color: var(--toggle-info-focus-checked-border-color);
}
nb-toggle.status-info .native-input:enabled:active + .toggle {
background-color: var(--toggle-info-active-background-color);
border-color: var(--toggle-info-active-border-color);
}
nb-toggle.status-info .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-info-active-checked-background-color);
border-color: var(--toggle-info-active-checked-border-color);
}
nb-toggle.status-info .native-input:enabled + .toggle:hover {
background-color: var(--toggle-info-hover-background-color);
border-color: var(--toggle-info-hover-border-color);
}
nb-toggle.status-info .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-info-hover-checked-background-color);
border-color: var(--toggle-info-hover-checked-border-color);
}
nb-toggle.status-info .toggle-switcher {
background-color: var(--toggle-info-checked-switcher-background-color);
}
nb-toggle.status-info .toggle-switcher nb-icon {
color: var(--toggle-info-checked-switcher-checkmark-color);
}
nb-toggle.status-info .native-input:disabled + .toggle {
background-color: var(--toggle-info-disabled-background-color);
border-color: var(--toggle-info-disabled-border-color);
}
nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-info-disabled-switcher-background-color);
}
nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-info-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-info .native-input:disabled ~ .text {
color: var(--toggle-info-disabled-text-color);
}
nb-toggle.status-control .text {
color: var(--toggle-control-text-color);
}
nb-toggle.status-control .toggle {
background-color: var(--toggle-control-background-color);
border-color: var(--toggle-control-border-color);
}
nb-toggle.status-control .toggle.checked {
background-color: var(--toggle-control-checked-background-color);
border-color: var(--toggle-control-checked-border-color);
}
nb-toggle.status-control .native-input:enabled:focus + .toggle {
background-color: var(--toggle-control-focus-background-color);
border-color: var(--toggle-control-focus-border-color);
}
nb-toggle.status-control .native-input:enabled:focus + .toggle.checked {
background-color: var(--toggle-control-focus-checked-background-color);
border-color: var(--toggle-control-focus-checked-border-color);
}
nb-toggle.status-control .native-input:enabled:active + .toggle {
background-color: var(--toggle-control-active-background-color);
border-color: var(--toggle-control-active-border-color);
}
nb-toggle.status-control .native-input:enabled:active + .toggle.checked {
background-color: var(--toggle-control-active-checked-background-color);
border-color: var(--toggle-control-active-checked-border-color);
}
nb-toggle.status-control .native-input:enabled + .toggle:hover {
background-color: var(--toggle-control-hover-background-color);
border-color: var(--toggle-control-hover-border-color);
}
nb-toggle.status-control .native-input:enabled + .toggle:hover.checked {
background-color: var(--toggle-control-hover-checked-background-color);
border-color: var(--toggle-control-hover-checked-border-color);
}
nb-toggle.status-control .toggle-switcher {
background-color: var(--toggle-control-checked-switcher-background-color);
}
nb-toggle.status-control .toggle-switcher nb-icon {
color: var(--toggle-control-checked-switcher-checkmark-color);
}
nb-toggle.status-control .native-input:disabled + .toggle {
background-color: var(--toggle-control-disabled-background-color);
border-color: var(--toggle-control-disabled-border-color);
}
nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher {
background-color: var(--toggle-control-disabled-switcher-background-color);
}
nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher nb-icon {
color: var(--toggle-control-disabled-checked-switcher-checkmark-color);
}
nb-toggle.status-control .native-input:disabled ~ .text {
color: var(--toggle-control-disabled-text-color);
}
nb-progress-bar .progress-container {
border-radius: var(--progress-bar-border-radius);
}
nb-progress-bar .progress-value {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--progress-bar-text-font-family);
transition-duration: var(--progress-bar-animation-duration);
transition-property: width, background-color;
}
nb-progress-bar.size-tiny .progress-container {
height: var(--progress-bar-tiny-height);
}
nb-progress-bar.size-tiny .progress-value {
font-size: var(--progress-bar-tiny-text-font-size);
font-weight: var(--progress-bar-tiny-text-font-weight);
line-height: var(--progress-bar-tiny-text-line-height);
}
nb-progress-bar.size-small .progress-container {
height: var(--progress-bar-small-height);
}
nb-progress-bar.size-small .progress-value {
font-size: var(--progress-bar-small-text-font-size);
font-weight: var(--progress-bar-small-text-font-weight);
line-height: var(--progress-bar-small-text-line-height);
}
nb-progress-bar.size-medium .progress-container {
height: var(--progress-bar-medium-height);
}
nb-progress-bar.size-medium .progress-value {
font-size: var(--progress-bar-medium-text-font-size);
font-weight: var(--progress-bar-medium-text-font-weight);
line-height: var(--progress-bar-medium-text-line-height);
}
nb-progress-bar.size-large .progress-container {
height: var(--progress-bar-large-height);
}
nb-progress-bar.size-large .progress-value {
font-size: var(--progress-bar-large-text-font-size);
font-weight: var(--progress-bar-large-text-font-weight);
line-height: var(--progress-bar-large-text-line-height);
}
nb-progress-bar.size-giant .progress-container {
height: var(--progress-bar-giant-height);
}
nb-progress-bar.size-giant .progress-value {
font-size: var(--progress-bar-giant-text-font-size);
font-weight: var(--progress-bar-giant-text-font-weight);
line-height: var(--progress-bar-giant-text-line-height);
}
nb-progress-bar.status-basic .progress-container {
background-color: var(--progress-bar-basic-background-color);
}
nb-progress-bar.status-basic .progress-value {
background-color: var(--progress-bar-basic-filled-background-color);
color: var(--progress-bar-basic-text-color);
}
nb-progress-bar.status-primary .progress-container {
background-color: var(--progress-bar-primary-background-color);
}
nb-progress-bar.status-primary .progress-value {
background-color: var(--progress-bar-primary-filled-background-color);
color: var(--progress-bar-primary-text-color);
}
nb-progress-bar.status-success .progress-container {
background-color: var(--progress-bar-success-background-color);
}
nb-progress-bar.status-success .progress-value {
background-color: var(--progress-bar-success-filled-background-color);
color: var(--progress-bar-success-text-color);
}
nb-progress-bar.status-warning .progress-container {
background-color: var(--progress-bar-warning-background-color);
}
nb-progress-bar.status-warning .progress-value {
background-color: var(--progress-bar-warning-filled-background-color);
color: var(--progress-bar-warning-text-color);
}
nb-progress-bar.status-danger .progress-container {
background-color: var(--progress-bar-danger-background-color);
}
nb-progress-bar.status-danger .progress-value {
background-color: var(--progress-bar-danger-filled-background-color);
color: var(--progress-bar-danger-text-color);
}
nb-progress-bar.status-info .progress-container {
background-color: var(--progress-bar-info-background-color);
}
nb-progress-bar.status-info .progress-value {
background-color: var(--progress-bar-info-filled-background-color);
color: var(--progress-bar-info-text-color);
}
nb-progress-bar.status-control .progress-container {
background-color: var(--progress-bar-control-background-color);
}
nb-progress-bar.status-control .progress-value {
background-color: var(--progress-bar-control-filled-background-color);
color: var(--progress-bar-control-text-color);
}
nb-badge {
border-radius: var(--badge-border-radius);
font-family: var(--badge-text-font-family);
font-size: var(--badge-text-font-size);
font-weight: var(--badge-text-font-weight);
line-height: var(--badge-text-line-height);
padding: var(--badge-padding);
}
nb-badge.dot-mode {
padding: var(--badge-dot-mode-padding);
border-radius: var(--badge-dot-mode-border-radius);
}
nb-badge.status-basic {
color: var(--badge-basic-text-color);
background-color: var(--badge-basic-background-color);
}
nb-badge.status-primary {
color: var(--badge-primary-text-color);
background-color: var(--badge-primary-background-color);
}
nb-badge.status-success {
color: var(--badge-success-text-color);
background-color: var(--badge-success-background-color);
}
nb-badge.status-warning {
color: var(--badge-warning-text-color);
background-color: var(--badge-warning-background-color);
}
nb-badge.status-danger {
color: var(--badge-danger-text-color);
background-color: var(--badge-danger-background-color);
}
nb-badge.status-info {
color: var(--badge-info-text-color);
background-color: var(--badge-info-background-color);
}
nb-badge.status-control {
color: var(--badge-control-text-color);
background-color: var(--badge-control-background-color);
}
nb-stepper.horizontal .header .step {
width: var(--stepper-step-index-width);
margin: 0 var(--stepper-step-index-width)/2;
}
nb-stepper.horizontal .header .connector {
margin: var(--stepper-horizontal-connector-margin);
}
nb-stepper.vertical .header .connector {
margin: var(--stepper-vertical-connector-margin);
}
nb-stepper .header .connector {
background-color: var(--stepper-connector-background-color);
}
nb-stepper .header .connector-past {
background-color: var(--stepper-connector-completed-background-color);
}
nb-stepper .header .label-index {
border-radius: var(--stepper-step-index-border-radius);
border-color: var(--stepper-step-index-border-color);
border-style: var(--stepper-step-index-border-style);
border-width: var(--stepper-step-index-border-width);
width: var(--stepper-step-index-width);
height: var(--stepper-step-index-width);
}
nb-stepper .header .step {
color: var(--stepper-step-text-color);
font-family: var(--stepper-step-text-font-family);
font-size: var(--stepper-step-text-font-size);
font-weight: var(--stepper-step-text-font-weight);
line-height: var(--stepper-step-text-line-height);
}
nb-stepper .header .step.label-index {
border-color: var(--stepper-step-index-border-color);
}
nb-stepper .header .step.selected {
color: var(--stepper-step-active-text-color);
}
nb-stepper .header .step.selected .label-index {
border-color: var(--stepper-step-index-active-border-color);
}
nb-stepper .header .step.completed {
color: var(--stepper-step-completed-text-color);
}
nb-stepper .header .step.completed .label-index {
background-color: var(--stepper-step-index-completed-background-color);
border-color: var(--stepper-step-index-completed-border-color);
color: var(--stepper-step-index-completed-text-color);
}
nb-stepper .step-content {
padding: var(--stepper-step-content-padding);
}
nb-alert {
border-radius: var(--alert-border-radius);
box-shadow: var(--alert-shadow);
font-family: var(--alert-text-font-family);
font-size: var(--alert-text-font-size);
font-weight: var(--alert-text-font-weight);
line-height: var(--alert-text-line-height);
padding: var(--alert-padding);
margin-bottom: var(--alert-bottom-margin);
scrollbar-face-color: var(--alert-scrollbar-color);
scrollbar-track-color: var(--alert-scrollbar-background-color);
}
nb-alert::-webkit-scrollbar {
width: var(--alert-scrollbar-width);
height: var(--alert-scrollbar-width);
}
nb-alert::-webkit-scrollbar-thumb {
background: var(--alert-scrollbar-color);
cursor: pointer;
border-radius: var(--alert-scrollbar-width)/2;
}
nb-alert::-webkit-scrollbar-track {
background: var(--alert-scrollbar-background-color);
}
[dir=ltr] nb-alert.closable {
padding-right: var(--alert-closable-start-padding);
}
[dir=rtl] nb-alert.closable {
padding-left: var(--alert-closable-start-padding);
}
nb-alert .close {
padding: var(--alert-padding);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
font-family: monospace;
}
nb-alert.size-tiny {
height: var(--alert-tiny-height);
}
nb-alert.size-small {
height: var(--alert-small-height);
}
nb-alert.size-medium {
height: var(--alert-medium-height);
}
nb-alert.size-large {
height: var(--alert-large-height);
}
nb-alert.size-giant {
height: var(--alert-giant-height);
}
nb-alert.status-basic {
color: var(--alert-basic-text-color);
background-color: var(--alert-basic-background-color);
}
nb-alert.status-basic a,
nb-alert.status-basic a:hover {
color: var(--alert-basic-text-color);
}
nb-alert.accent-basic {
border-top: var(--alert-border-radius) solid var(--alert-accent-basic-color);
}
nb-alert.outline-basic {
border: var(--alert-outline-width) solid var(--alert-outline-basic-color);
}
nb-alert.status-primary {
color: var(--alert-primary-text-color);
background-color: var(--alert-primary-background-color);
}
nb-alert.status-primary a,
nb-alert.status-primary a:hover {
color: var(--alert-primary-text-color);
}
nb-alert.accent-primary {
border-top: var(--alert-border-radius) solid var(--alert-accent-primary-color);
}
nb-alert.outline-primary {
border: var(--alert-outline-width) solid var(--alert-outline-primary-color);
}
nb-alert.status-success {
color: var(--alert-success-text-color);
background-color: var(--alert-success-background-color);
}
nb-alert.status-success a,
nb-alert.status-success a:hover {
color: var(--alert-success-text-color);
}
nb-alert.accent-success {
border-top: var(--alert-border-radius) solid var(--alert-accent-success-color);
}
nb-alert.outline-success {
border: var(--alert-outline-width) solid var(--alert-outline-success-color);
}
nb-alert.status-warning {
color: var(--alert-warning-text-color);
background-color: var(--alert-warning-background-color);
}
nb-alert.status-warning a,
nb-alert.status-warning a:hover {
color: var(--alert-warning-text-color);
}
nb-alert.accent-warning {
border-top: var(--alert-border-radius) solid var(--alert-accent-warning-color);
}
nb-alert.outline-warning {
border: var(--alert-outline-width) solid var(--alert-outline-warning-color);
}
nb-alert.status-danger {
color: var(--alert-danger-text-color);
background-color: var(--alert-danger-background-color);
}
nb-alert.status-danger a,
nb-alert.status-danger a:hover {
color: var(--alert-danger-text-color);
}
nb-alert.accent-danger {
border-top: var(--alert-border-radius) solid var(--alert-accent-danger-color);
}
nb-alert.outline-danger {
border: var(--alert-outline-width) solid var(--alert-outline-danger-color);
}
nb-alert.status-info {
color: var(--alert-info-text-color);
background-color: var(--alert-info-background-color);
}
nb-alert.status-info a,
nb-alert.status-info a:hover {
color: var(--alert-info-text-color);
}
nb-alert.accent-info {
border-top: var(--alert-border-radius) solid var(--alert-accent-info-color);
}
nb-alert.outline-info {
border: var(--alert-outline-width) solid var(--alert-outline-info-color);
}
nb-alert.status-control {
color: var(--alert-control-text-color);
background-color: var(--alert-control-background-color);
}
nb-alert.status-control a,
nb-alert.status-control a:hover {
color: var(--alert-control-text-color);
}
nb-alert.accent-control {
border-top: var(--alert-border-radius) solid var(--alert-accent-control-color);
}
nb-alert.outline-control {
border: var(--alert-outline-width) solid var(--alert-outline-control-color);
}
nb-chat {
background-color: var(--chat-background-color);
border: var(--chat-border);
border-radius: var(--chat-border-radius);
box-shadow: var(--chat-shadow);
color: var(--chat-text-color);
font-family: var(--chat-text-font-family);
font-size: var(--chat-text-font-size);
font-weight: var(--chat-text-font-weight);
line-height: var(--chat-text-line-height);
}
nb-chat nb-icon {
font-size: inherit;
}
nb-chat .header {
border-bottom: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color);
border-top-left-radius: var(--chat-border-radius);
border-top-right-radius: var(--chat-border-radius);
padding: var(--chat-padding);
font-family: var(--chat-header-text-font-family);
font-size: var(--chat-header-text-font-size);
font-weight: var(--chat-header-text-font-weight);
line-height: var(--chat-header-text-line-height);
}
nb-chat .scrollable {
overflow: auto;
flex: 1;
scrollbar-face-color: var(--chat-scrollbar-color);
scrollbar-track-color: var(--chat-scrollbar-background-color);
}
nb-chat .scrollable::-webkit-scrollbar {
width: var(--chat-scrollbar-width);
height: var(--chat-scrollbar-width);
}
nb-chat .scrollable::-webkit-scrollbar-thumb {
background: var(--chat-scrollbar-color);
cursor: pointer;
border-radius: var(--chat-scrollbar-width)/2;
}
nb-chat .scrollable::-webkit-scrollbar-track {
background: var(--chat-scrollbar-background-color);
}
nb-chat .messages {
padding: var(--chat-padding);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-shrink: 0;
flex-direction: column;
}
nb-chat .no-messages {
text-align: center;
}
nb-chat.size-tiny {
height: var(--chat-tiny-height);
}
nb-chat.size-small {
height: var(--chat-small-height);
}
nb-chat.size-medium {
height: var(--chat-medium-height);
}
nb-chat.size-large {
height: var(--chat-large-height);
}
nb-chat.size-giant {
height: var(--chat-giant-height);
}
nb-chat.status-basic .header {
background-color: var(--chat-basic-background-color);
color: var(--chat-basic-text-color);
}
nb-chat.status-primary .header {
background-color: var(--chat-primary-background-color);
color: var(--chat-primary-text-color);
}
nb-chat.status-success .header {
background-color: var(--chat-success-background-color);
color: var(--chat-success-text-color);
}
nb-chat.status-warning .header {
background-color: var(--chat-warning-background-color);
color: var(--chat-warning-text-color);
}
nb-chat.status-danger .header {
background-color: var(--chat-danger-background-color);
color: var(--chat-danger-text-color);
}
nb-chat.status-info .header {
background-color: var(--chat-info-background-color);
color: var(--chat-info-text-color);
}
nb-chat.status-control .header {
background-color: var(--chat-control-background-color);
color: var(--chat-control-text-color);
}
nb-chat-message {
margin-bottom: 1.5rem;
display: flex;
flex-direction: row;
}
nb-chat-message .message {
flex: 1;
}
nb-chat-message .avatar {
border-radius: 50%;
flex-shrink: 0;
background: var(--chat-message-avatar-background-color);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 2.5rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
font-size: 0.875rem;
color: white;
}
nb-chat-message nb-chat-message-text {
display: flex;
flex-direction: column;
}
nb-chat-message nb-chat-message-text .sender {
font-size: 0.875rem;
color: var(--chat-message-sender-text-color);
margin-bottom: 0.5rem;
}
nb-chat-message nb-chat-message-text p {
word-break: break-word;
white-space: pre-wrap;
max-width: 100%;
margin-bottom: 0;
}
nb-chat-message nb-chat-message-text .text {
padding: 1rem;
border-radius: 0.5rem;
}
nb-chat-message nb-chat-message-file {
display: flex;
flex-direction: column;
}
nb-chat-message nb-chat-message-file a {
color: var(--chat-message-file-text-color);
background: var(--chat-message-file-background-color);
font-size: 4rem;
text-align: center;
border: 1px solid var(--chat-message-file-text-color);
width: 10rem;
height: 10rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 0.5rem;
}
nb-chat-message nb-chat-message-file a:hover, nb-chat-message nb-chat-message-file a:focus {
text-decoration: none;
color: var(--chat-message-file-text-color);
}
nb-chat-message nb-chat-message-file a div {
background-size: cover;
width: 100%;
height: 100%;
}
nb-chat-message nb-chat-message-file nb-chat-message-text {
display: block;
margin-bottom: 0.5rem;
}
nb-chat-message nb-chat-message-file .message-content-group {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: wrap;
}
nb-chat-message nb-chat-message-file .message-content-group a {
margin-bottom: 1rem;
width: 5rem;
height: 5rem;
}
[dir=ltr] nb-chat-message nb-chat-message-file .message-content-group a {
margin-right: 1rem;
}
[dir=rtl] nb-chat-message nb-chat-message-file .message-content-group a {
margin-left: 1rem;
}
nb-chat-message nb-chat-message-quote p.quote {
font-style: italic;
font-size: 0.875rem;
background: var(--chat-message-quote-background-color);
color: var(--chat-message-quote-text-color);
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
}
nb-chat-message nb-chat-message-quote .sender {
font-size: 0.875rem;
color: var(--chat-message-sender-text-color);
margin-bottom: 0.5rem;
}
[dir=ltr] nb-chat-message.not-reply .message {
margin-left: 0.5rem;
}
[dir=rtl] nb-chat-message.not-reply .message {
margin-right: 0.5rem;
}
[dir=ltr] nb-chat-message.not-reply .message {
margin-right: 3rem;
}
[dir=rtl] nb-chat-message.not-reply .message {
margin-left: 3rem;
}
nb-chat-message.not-reply nb-chat-message-text {
align-items: flex-start;
}
nb-chat-message.not-reply nb-chat-message-text .text {
background: var(--chat-message-background);
color: var(--chat-message-text-color);
}
[dir=ltr] nb-chat-message.not-reply nb-chat-message-text .text {
border-top-left-radius: 0;
}
[dir=rtl] nb-chat-message.not-reply nb-chat-message-text .text {
border-top-right-radius: 0;
}
nb-chat-message.not-reply nb-chat-message-file {
align-items: flex-start;
}
nb-chat-message.reply {
flex-direction: row-reverse;
}
nb-chat-message.reply .message {
margin-left: 0;
}
[dir=ltr] nb-chat-message.reply .message {
margin-right: 0.5rem;
}
[dir=rtl] nb-chat-message.reply .message {
margin-left: 0.5rem;
}
[dir=ltr] nb-chat-message.reply .message {
margin-left: 3rem;
}
[dir=rtl] nb-chat-message.reply .message {
margin-right: 3rem;
}
nb-chat-message.reply nb-chat-message-text {
align-items: flex-end;
}
[dir=ltr] nb-chat-message.reply nb-chat-message-text .sender {
text-align: right;
}
[dir=rtl] nb-chat-message.reply nb-chat-message-text .sender {
text-align: left;
}
nb-chat-message.reply nb-chat-message-text .text {
background: var(--chat-message-reply-background-color);
color: var(--chat-message-reply-text-color);
}
[dir=ltr] nb-chat-message.reply nb-chat-message-text .text {
border-top-right-radius: 0;
}
[dir=rtl] nb-chat-message.reply nb-chat-message-text .text {
border-top-left-radius: 0;
}
nb-chat-message.reply nb-chat-message-file {
align-items: flex-end;
}
nb-chat-form {
display: flex;
flex-direction: column;
padding: var(--chat-padding);
border-top: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color);
}
nb-chat-form .message-row {
flex-direction: row;
display: flex;
}
nb-chat-form input {
flex: 1;
}
nb-chat-form input.with-button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
[dir=ltr] nb-chat-form input.with-button {
border-bottom-right-radius: 0;
}
[dir=ltr] nb-chat-form input.with-button {
border-top-right-radius: 0;
}
[dir=rtl] nb-chat-form input.with-button {
border-bottom-left-radius: 0;
}
[dir=rtl] nb-chat-form input.with-button {
border-top-left-radius: 0;
}
nb-chat-form .send-button nb-icon {
font-size: 1.5rem;
}
[dir=ltr] nb-chat-form .send-button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
[dir=rtl] nb-chat-form .send-button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
nb-chat-form .dropped-files {
display: flex;
flex-direction: row;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
nb-chat-form .dropped-files div {
background-size: cover;
width: 3rem;
height: 3rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid currentColor;
text-align: center;
font-size: 2rem;
position: relative;
}
[dir=ltr] nb-chat-form .dropped-files div {
margin-right: 0.5rem;
}
[dir=rtl] nb-chat-form .dropped-files div {
margin-left: 0.5rem;
}
nb-chat-form .dropped-files div .remove {
position: absolute;
right: -0.5rem;
top: -0.875rem;
font-size: 0.875rem;
line-height: 1;
cursor: pointer;
}
nb-chat-form .dropped-files div nb-icon {
width: 65%;
height: 100%;
}
nb-accordion {
display: block;
box-shadow: var(--accordion-shadow);
border-radius: var(--accordion-border-radius);
}
nb-accordion-item-header {
position: relative;
border-bottom-width: var(--accordion-header-border-width);
border-bottom-style: var(--accordion-header-border-style);
border-bottom-color: var(--accordion-header-border-color);
color: var(--accordion-header-text-color);
font-family: var(--accordion-header-text-font-family);
font-size: var(--accordion-header-text-font-size);
font-weight: var(--accordion-header-text-font-weight);
line-height: var(--accordion-header-text-line-height);
padding: var(--accordion-padding);
}
nb-accordion-item-header h1 {
margin: 0;
}
nb-accordion-item-header h2 {
margin: 0;
}
nb-accordion-item-header h3 {
margin: 0;
}
nb-accordion-item-header h4 {
margin: 0;
}
nb-accordion-item-header h5 {
margin: 0;
}
nb-accordion-item-header h6 {
margin: 0;
}
nb-accordion-item-header .expansion-indicator {
position: absolute;
}
[dir=ltr] nb-accordion-item-header .expansion-indicator {
right: 1rem;
}
[dir=rtl] nb-accordion-item-header .expansion-indicator {
left: 1rem;
}
nb-accordion-item {
background-color: var(--accordion-item-background-color);
color: var(--accordion-item-text-color);
font-family: var(--accordion-item-text-font-family);
font-size: var(--accordion-item-text-font-size);
font-weight: var(--accordion-item-text-font-weight);
line-height: var(--accordion-item-text-line-height);
}
nb-accordion-item.disabled nb-accordion-item-header {
color: var(--accordion-header-disabled-text-color);
cursor: default;
}
nb-accordion-item:first-child {
border-top-left-radius: var(--accordion-border-radius);
border-top-right-radius: var(--accordion-border-radius);
}
nb-accordion-item:last-child {
border-bottom-left-radius: var(--accordion-border-radius);
border-bottom-right-radius: var(--accordion-border-radius);
}
nb-accordion-item:last-child.collapsed nb-accordion-item-header {
border-bottom: none;
}
nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header {
border-top-color: var(--accordion-header-border-color);
border-top-style: var(--accordion-header-border-style);
border-top-width: var(--accordion-header-border-width);
}
nb-accordion-item-body .item-body {
flex: 1;
-ms-flex: 1 1 auto;
overflow: auto;
padding: var(--accordion-padding);
position: relative;
}
[nbButton], [nbButtonToggle] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
user-select: none;
cursor: var(--button-cursor);
font-family: var(--button-text-font-family);
font-weight: var(--button-text-font-weight);
}
[nbButton]:hover, [nbButtonToggle]:hover, [nbButton]:focus, [nbButtonToggle]:focus {
text-decoration: none;
}
[nbButton].full-width, .full-width[nbButtonToggle] {
width: 100%;
}
[nbButton] nb-icon, [nbButtonToggle] nb-icon {
vertical-align: top;
}
[nbButton].nb-transition, .nb-transition[nbButtonToggle] {
transition-duration: 0.15s;
transition-property: background-color, border-color, box-shadow, color;
transition-timing-function: ease-in;
}
[nbButton]:focus, [nbButtonToggle]:focus {
position: relative;
outline: none;
box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color);
}
[nbButton][disabled], [disabled][nbButtonToggle] {
cursor: var(--button-disabled-cursor);
}
[nbButton].size-tiny, .size-tiny[nbButtonToggle] {
font-size: var(--button-tiny-text-font-size);
line-height: var(--button-tiny-text-line-height);
}
[nbButton].size-tiny nb-icon, .size-tiny[nbButtonToggle] nb-icon {
font-size: var(--button-tiny-text-font-size);
height: var(--button-tiny-icon-size);
width: var(--button-tiny-icon-size);
margin-top: var(--button-tiny-icon-vertical-margin);
margin-bottom: var(--button-tiny-icon-vertical-margin);
}
[dir=ltr] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-right: var(--button-tiny-icon-offset);
}
[dir=rtl] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-left: var(--button-tiny-icon-offset);
}
[dir=ltr] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-left: var(--button-tiny-icon-offset);
}
[dir=rtl] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-right: var(--button-tiny-icon-offset);
}
[nbButton].size-tiny.icon-start.icon-end.appearance-filled, .size-tiny.icon-start.icon-end.appearance-filled[nbButtonToggle] {
padding: var(--icon-button-filled-tiny-padding);
}
[nbButton].size-tiny.icon-start.icon-end.appearance-outline, .size-tiny.icon-start.icon-end.appearance-outline[nbButtonToggle] {
padding: var(--icon-button-outline-tiny-padding);
}
[nbButton].size-tiny.icon-start.icon-end.appearance-ghost, .size-tiny.icon-start.icon-end.appearance-ghost[nbButtonToggle] {
padding: var(--icon-button-ghost-tiny-padding);
}
[nbButton].size-tiny.icon-start.icon-end.appearance-hero, .size-tiny.icon-start.icon-end.appearance-hero[nbButtonToggle] {
padding: var(--icon-button-hero-tiny-padding);
}
[nbButton].size-small, .size-small[nbButtonToggle] {
font-size: var(--button-small-text-font-size);
line-height: var(--button-small-text-line-height);
}
[nbButton].size-small nb-icon, .size-small[nbButtonToggle] nb-icon {
font-size: var(--button-small-text-font-size);
height: var(--button-small-icon-size);
width: var(--button-small-icon-size);
margin-top: var(--button-small-icon-vertical-margin);
margin-bottom: var(--button-small-icon-vertical-margin);
}
[dir=ltr] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-right: var(--button-small-icon-offset);
}
[dir=rtl] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-left: var(--button-small-icon-offset);
}
[dir=ltr] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-left: var(--button-small-icon-offset);
}
[dir=rtl] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-right: var(--button-small-icon-offset);
}
[nbButton].size-small.icon-start.icon-end.appearance-filled, .size-small.icon-start.icon-end.appearance-filled[nbButtonToggle] {
padding: var(--icon-button-filled-small-padding);
}
[nbButton].size-small.icon-start.icon-end.appearance-outline, .size-small.icon-start.icon-end.appearance-outline[nbButtonToggle] {
padding: var(--icon-button-outline-small-padding);
}
[nbButton].size-small.icon-start.icon-end.appearance-ghost, .size-small.icon-start.icon-end.appearance-ghost[nbButtonToggle] {
padding: var(--icon-button-ghost-small-padding);
}
[nbButton].size-small.icon-start.icon-end.appearance-hero, .size-small.icon-start.icon-end.appearance-hero[nbButtonToggle] {
padding: var(--icon-button-hero-small-padding);
}
[nbButton].size-medium, .size-medium[nbButtonToggle] {
font-size: var(--button-medium-text-font-size);
line-height: var(--button-medium-text-line-height);
}
[nbButton].size-medium nb-icon, .size-medium[nbButtonToggle] nb-icon {
font-size: var(--button-medium-text-font-size);
height: var(--button-medium-icon-size);
width: var(--button-medium-icon-size);
margin-top: var(--button-medium-icon-vertical-margin);
margin-bottom: var(--button-medium-icon-vertical-margin);
}
[dir=ltr] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-right: var(--button-medium-icon-offset);
}
[dir=rtl] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-left: var(--button-medium-icon-offset);
}
[dir=ltr] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-left: var(--button-medium-icon-offset);
}
[dir=rtl] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-right: var(--button-medium-icon-offset);
}
[nbButton].size-medium.icon-start.icon-end.appearance-filled, .size-medium.icon-start.icon-end.appearance-filled[nbButtonToggle] {
padding: var(--icon-button-filled-medium-padding);
}
[nbButton].size-medium.icon-start.icon-end.appearance-outline, .size-medium.icon-start.icon-end.appearance-outline[nbButtonToggle] {
padding: var(--icon-button-outline-medium-padding);
}
[nbButton].size-medium.icon-start.icon-end.appearance-ghost, .size-medium.icon-start.icon-end.appearance-ghost[nbButtonToggle] {
padding: var(--icon-button-ghost-medium-padding);
}
[nbButton].size-medium.icon-start.icon-end.appearance-hero, .size-medium.icon-start.icon-end.appearance-hero[nbButtonToggle] {
padding: var(--icon-button-hero-medium-padding);
}
[nbButton].size-large, .size-large[nbButtonToggle] {
font-size: var(--button-large-text-font-size);
line-height: var(--button-large-text-line-height);
}
[nbButton].size-large nb-icon, .size-large[nbButtonToggle] nb-icon {
font-size: var(--button-large-text-font-size);
height: var(--button-large-icon-size);
width: var(--button-large-icon-size);
margin-top: var(--button-large-icon-vertical-margin);
margin-bottom: var(--button-large-icon-vertical-margin);
}
[dir=ltr] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-right: var(--button-large-icon-offset);
}
[dir=rtl] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-left: var(--button-large-icon-offset);
}
[dir=ltr] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-left: var(--button-large-icon-offset);
}
[dir=rtl] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-right: var(--button-large-icon-offset);
}
[nbButton].size-large.icon-start.icon-end.appearance-filled, .size-large.icon-start.icon-end.appearance-filled[nbButtonToggle] {
padding: var(--icon-button-filled-large-padding);
}
[nbButton].size-large.icon-start.icon-end.appearance-outline, .size-large.icon-start.icon-end.appearance-outline[nbButtonToggle] {
padding: var(--icon-button-outline-large-padding);
}
[nbButton].size-large.icon-start.icon-end.appearance-ghost, .size-large.icon-start.icon-end.appearance-ghost[nbButtonToggle] {
padding: var(--icon-button-ghost-large-padding);
}
[nbButton].size-large.icon-start.icon-end.appearance-hero, .size-large.icon-start.icon-end.appearance-hero[nbButtonToggle] {
padding: var(--icon-button-hero-large-padding);
}
[nbButton].size-giant, .size-giant[nbButtonToggle] {
font-size: var(--button-giant-text-font-size);
line-height: var(--button-giant-text-line-height);
}
[nbButton].size-giant nb-icon, .size-giant[nbButtonToggle] nb-icon {
font-size: var(--button-giant-text-font-size);
height: var(--button-giant-icon-size);
width: var(--button-giant-icon-size);
margin-top: var(--button-giant-icon-vertical-margin);
margin-bottom: var(--button-giant-icon-vertical-margin);
}
[dir=ltr] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-right: var(--button-giant-icon-offset);
}
[dir=rtl] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon {
margin-left: var(--button-giant-icon-offset);
}
[dir=ltr] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-left: var(--button-giant-icon-offset);
}
[dir=rtl] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon {
margin-right: var(--button-giant-icon-offset);
}
[nbButton].size-giant.icon-start.icon-end.appearance-filled, .size-giant.icon-start.icon-end.appearance-filled[nbButtonToggle] {
padding: var(--icon-button-filled-giant-padding);
}
[nbButton].size-giant.icon-start.icon-end.appearance-outline, .size-giant.icon-start.icon-end.appearance-outline[nbButtonToggle] {
padding: var(--icon-button-outline-giant-padding);
}
[nbButton].size-giant.icon-start.icon-end.appearance-ghost, .size-giant.icon-start.icon-end.appearance-ghost[nbButtonToggle] {
padding: var(--icon-button-ghost-giant-padding);
}
[nbButton].size-giant.icon-start.icon-end.appearance-hero, .size-giant.icon-start.icon-end.appearance-hero[nbButtonToggle] {
padding: var(--icon-button-hero-giant-padding);
}
[nbButton].shape-rectangle, .shape-rectangle[nbButtonToggle] {
border-radius: var(--button-rectangle-border-radius);
}
[nbButton].shape-semi-round, .shape-semi-round[nbButtonToggle] {
border-radius: var(--button-semi-round-border-radius);
}
[nbButton].shape-round, .shape-round[nbButtonToggle] {
border-radius: var(--button-round-border-radius);
}
a[nbButton], a[nbButtonToggle] {
text-decoration: none;
}
[nbButton].appearance-filled, .appearance-filled[nbButtonToggle] {
border-style: var(--button-filled-border-style);
border-width: var(--button-filled-border-width);
text-transform: var(--button-filled-text-transform);
}
[nbButton].appearance-filled.size-tiny, .appearance-filled.size-tiny[nbButtonToggle] {
padding: var(--button-filled-tiny-padding);
}
[nbButton].appearance-filled.size-small, .appearance-filled.size-small[nbButtonToggle] {
padding: var(--button-filled-small-padding);
}
[nbButton].appearance-filled.size-medium, .appearance-filled.size-medium[nbButtonToggle] {
padding: var(--button-filled-medium-padding);
}
[nbButton].appearance-filled.size-large, .appearance-filled.size-large[nbButtonToggle] {
padding: var(--button-filled-large-padding);
}
[nbButton].appearance-filled.size-giant, .appearance-filled.size-giant[nbButtonToggle] {
padding: var(--button-filled-giant-padding);
}
[nbButton].appearance-filled.status-basic, .appearance-filled.status-basic[nbButtonToggle] {
background-color: var(--button-filled-basic-background-color);
border-color: var(--button-filled-basic-border-color);
color: var(--button-filled-basic-text-color);
}
[nbButton].appearance-filled.status-basic:focus, .appearance-filled.status-basic[nbButtonToggle]:focus {
background-color: var(--button-filled-basic-focus-background-color);
border-color: var(--button-filled-basic-focus-border-color);
}
[nbButton].appearance-filled.status-basic:hover, .appearance-filled.status-basic[nbButtonToggle]:hover {
background-color: var(--button-filled-basic-hover-background-color);
border-color: var(--button-filled-basic-hover-border-color);
}
[nbButton].appearance-filled.status-basic:active, .appearance-filled.status-basic[nbButtonToggle]:active {
background-color: var(--button-filled-basic-active-background-color);
border-color: var(--button-filled-basic-active-border-color);
}
[nbButton].appearance-filled.status-basic[disabled], .appearance-filled.status-basic[disabled][nbButtonToggle] {
background-color: var(--button-filled-basic-disabled-background-color);
border-color: var(--button-filled-basic-disabled-border-color);
color: var(--button-filled-basic-disabled-text-color);
}
[nbButton].appearance-filled.status-primary, .appearance-filled.status-primary[nbButtonToggle] {
background-color: var(--button-filled-primary-background-color);
border-color: var(--button-filled-primary-border-color);
color: var(--button-filled-primary-text-color);
}
[nbButton].appearance-filled.status-primary:focus, .appearance-filled.status-primary[nbButtonToggle]:focus {
background-color: var(--button-filled-primary-focus-background-color);
border-color: var(--button-filled-primary-focus-border-color);
}
[nbButton].appearance-filled.status-primary:hover, .appearance-filled.status-primary[nbButtonToggle]:hover {
background-color: var(--button-filled-primary-hover-background-color);
border-color: var(--button-filled-primary-hover-border-color);
}
[nbButton].appearance-filled.status-primary:active, .appearance-filled.status-primary[nbButtonToggle]:active {
background-color: var(--button-filled-primary-active-background-color);
border-color: var(--button-filled-primary-active-border-color);
}
[nbButton].appearance-filled.status-primary[disabled], .appearance-filled.status-primary[disabled][nbButtonToggle] {
background-color: var(--button-filled-primary-disabled-background-color);
border-color: var(--button-filled-primary-disabled-border-color);
color: var(--button-filled-primary-disabled-text-color);
}
[nbButton].appearance-filled.status-success, .appearance-filled.status-success[nbButtonToggle] {
background-color: var(--button-filled-success-background-color);
border-color: var(--button-filled-success-border-color);
color: var(--button-filled-success-text-color);
}
[nbButton].appearance-filled.status-success:focus, .appearance-filled.status-success[nbButtonToggle]:focus {
background-color: var(--button-filled-success-focus-background-color);
border-color: var(--button-filled-success-focus-border-color);
}
[nbButton].appearance-filled.status-success:hover, .appearance-filled.status-success[nbButtonToggle]:hover {
background-color: var(--button-filled-success-hover-background-color);
border-color: var(--button-filled-success-hover-border-color);
}
[nbButton].appearance-filled.status-success:active, .appearance-filled.status-success[nbButtonToggle]:active {
background-color: var(--button-filled-success-active-background-color);
border-color: var(--button-filled-success-active-border-color);
}
[nbButton].appearance-filled.status-success[disabled], .appearance-filled.status-success[disabled][nbButtonToggle] {
background-color: var(--button-filled-success-disabled-background-color);
border-color: var(--button-filled-success-disabled-border-color);
color: var(--button-filled-success-disabled-text-color);
}
[nbButton].appearance-filled.status-warning, .appearance-filled.status-warning[nbButtonToggle] {
background-color: var(--button-filled-warning-background-color);
border-color: var(--button-filled-warning-border-color);
color: var(--button-filled-warning-text-color);
}
[nbButton].appearance-filled.status-warning:focus, .appearance-filled.status-warning[nbButtonToggle]:focus {
background-color: var(--button-filled-warning-focus-background-color);
border-color: var(--button-filled-warning-focus-border-color);
}
[nbButton].appearance-filled.status-warning:hover, .appearance-filled.status-warning[nbButtonToggle]:hover {
background-color: var(--button-filled-warning-hover-background-color);
border-color: var(--button-filled-warning-hover-border-color);
}
[nbButton].appearance-filled.status-warning:active, .appearance-filled.status-warning[nbButtonToggle]:active {
background-color: var(--button-filled-warning-active-background-color);
border-color: var(--button-filled-warning-active-border-color);
}
[nbButton].appearance-filled.status-warning[disabled], .appearance-filled.status-warning[disabled][nbButtonToggle] {
background-color: var(--button-filled-warning-disabled-background-color);
border-color: var(--button-filled-warning-disabled-border-color);
color: var(--button-filled-warning-disabled-text-color);
}
[nbButton].appearance-filled.status-danger, .appearance-filled.status-danger[nbButtonToggle] {
background-color: var(--button-filled-danger-background-color);
border-color: var(--button-filled-danger-border-color);
color: var(--button-filled-danger-text-color);
}
[nbButton].appearance-filled.status-danger:focus, .appearance-filled.status-danger[nbButtonToggle]:focus {
background-color: var(--button-filled-danger-focus-background-color);
border-color: var(--button-filled-danger-focus-border-color);
}
[nbButton].appearance-filled.status-danger:hover, .appearance-filled.status-danger[nbButtonToggle]:hover {
background-color: var(--button-filled-danger-hover-background-color);
border-color: var(--button-filled-danger-hover-border-color);
}
[nbButton].appearance-filled.status-danger:active, .appearance-filled.status-danger[nbButtonToggle]:active {
background-color: var(--button-filled-danger-active-background-color);
border-color: var(--button-filled-danger-active-border-color);
}
[nbButton].appearance-filled.status-danger[disabled], .appearance-filled.status-danger[disabled][nbButtonToggle] {
background-color: var(--button-filled-danger-disabled-background-color);
border-color: var(--button-filled-danger-disabled-border-color);
color: var(--button-filled-danger-disabled-text-color);
}
[nbButton].appearance-filled.status-info, .appearance-filled.status-info[nbButtonToggle] {
background-color: var(--button-filled-info-background-color);
border-color: var(--button-filled-info-border-color);
color: var(--button-filled-info-text-color);
}
[nbButton].appearance-filled.status-info:focus, .appearance-filled.status-info[nbButtonToggle]:focus {
background-color: var(--button-filled-info-focus-background-color);
border-color: var(--button-filled-info-focus-border-color);
}
[nbButton].appearance-filled.status-info:hover, .appearance-filled.status-info[nbButtonToggle]:hover {
background-color: var(--button-filled-info-hover-background-color);
border-color: var(--button-filled-info-hover-border-color);
}
[nbButton].appearance-filled.status-info:active, .appearance-filled.status-info[nbButtonToggle]:active {
background-color: var(--button-filled-info-active-background-color);
border-color: var(--button-filled-info-active-border-color);
}
[nbButton].appearance-filled.status-info[disabled], .appearance-filled.status-info[disabled][nbButtonToggle] {
background-color: var(--button-filled-info-disabled-background-color);
border-color: var(--button-filled-info-disabled-border-color);
color: var(--button-filled-info-disabled-text-color);
}
[nbButton].appearance-filled.status-control, .appearance-filled.status-control[nbButtonToggle] {
background-color: var(--button-filled-control-background-color);
border-color: var(--button-filled-control-border-color);
color: var(--button-filled-control-text-color);
}
[nbButton].appearance-filled.status-control:focus, .appearance-filled.status-control[nbButtonToggle]:focus {
background-color: var(--button-filled-control-focus-background-color);
border-color: var(--button-filled-control-focus-border-color);
}
[nbButton].appearance-filled.status-control:hover, .appearance-filled.status-control[nbButtonToggle]:hover {
background-color: var(--button-filled-control-hover-background-color);
border-color: var(--button-filled-control-hover-border-color);
}
[nbButton].appearance-filled.status-control:active, .appearance-filled.status-control[nbButtonToggle]:active {
background-color: var(--button-filled-control-active-background-color);
border-color: var(--button-filled-control-active-border-color);
}
[nbButton].appearance-filled.status-control[disabled], .appearance-filled.status-control[disabled][nbButtonToggle] {
background-color: var(--button-filled-control-disabled-background-color);
border-color: var(--button-filled-control-disabled-border-color);
color: var(--button-filled-control-disabled-text-color);
}
[nbButton].appearance-outline, .appearance-outline[nbButtonToggle] {
border-style: var(--button-outline-border-style);
border-width: var(--button-outline-border-width);
text-transform: var(--button-outline-text-transform);
}
[nbButton].appearance-outline:focus, .appearance-outline[nbButtonToggle]:focus {
box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color);
}
[nbButton].appearance-outline:focus:not(:hover):not(:active), .appearance-outline[nbButtonToggle]:focus:not(:hover):not(:active) {
box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-outline-focus-inset-shadow-length) var(--button-outline-color);
}
[nbButton].appearance-outline.size-tiny, .appearance-outline.size-tiny[nbButtonToggle] {
padding: var(--button-outline-tiny-padding);
}
[nbButton].appearance-outline.size-small, .appearance-outline.size-small[nbButtonToggle] {
padding: var(--button-outline-small-padding);
}
[nbButton].appearance-outline.size-medium, .appearance-outline.size-medium[nbButtonToggle] {
padding: var(--button-outline-medium-padding);
}
[nbButton].appearance-outline.size-large, .appearance-outline.size-large[nbButtonToggle] {
padding: var(--button-outline-large-padding);
}
[nbButton].appearance-outline.size-giant, .appearance-outline.size-giant[nbButtonToggle] {
padding: var(--button-outline-giant-padding);
}
[nbButton].appearance-outline.status-basic, .appearance-outline.status-basic[nbButtonToggle] {
background-color: var(--button-outline-basic-background-color);
border-color: var(--button-outline-basic-border-color);
color: var(--button-outline-basic-text-color);
}
[nbButton].appearance-outline.status-basic:focus, .appearance-outline.status-basic[nbButtonToggle]:focus {
background-color: var(--button-outline-basic-focus-background-color);
border-color: var(--button-outline-basic-focus-border-color);
color: var(--button-outline-basic-focus-text-color);
}
[nbButton].appearance-outline.status-basic:hover, .appearance-outline.status-basic[nbButtonToggle]:hover {
background-color: var(--button-outline-basic-hover-background-color);
border-color: var(--button-outline-basic-hover-border-color);
color: var(--button-outline-basic-hover-text-color);
}
[nbButton].appearance-outline.status-basic:active, .appearance-outline.status-basic[nbButtonToggle]:active {
background-color: var(--button-outline-basic-active-background-color);
border-color: var(--button-outline-basic-active-border-color);
color: var(--button-outline-basic-active-text-color);
}
[nbButton].appearance-outline.status-basic[disabled], .appearance-outline.status-basic[disabled][nbButtonToggle] {
background-color: var(--button-outline-basic-disabled-background-color);
border-color: var(--button-outline-basic-disabled-border-color);
color: var(--button-outline-basic-disabled-text-color);
}
[nbButton].appearance-outline.status-primary, .appearance-outline.status-primary[nbButtonToggle] {
background-color: var(--button-outline-primary-background-color);
border-color: var(--button-outline-primary-border-color);
color: var(--button-outline-primary-text-color);
}
[nbButton].appearance-outline.status-primary:focus, .appearance-outline.status-primary[nbButtonToggle]:focus {
background-color: var(--button-outline-primary-focus-background-color);
border-color: var(--button-outline-primary-focus-border-color);
color: var(--button-outline-primary-focus-text-color);
}
[nbButton].appearance-outline.status-primary:hover, .appearance-outline.status-primary[nbButtonToggle]:hover {
background-color: var(--button-outline-primary-hover-background-color);
border-color: var(--button-outline-primary-hover-border-color);
color: var(--button-outline-primary-hover-text-color);
}
[nbButton].appearance-outline.status-primary:active, .appearance-outline.status-primary[nbButtonToggle]:active {
background-color: var(--button-outline-primary-active-background-color);
border-color: var(--button-outline-primary-active-border-color);
color: var(--button-outline-primary-active-text-color);
}
[nbButton].appearance-outline.status-primary[disabled], .appearance-outline.status-primary[disabled][nbButtonToggle] {
background-color: var(--button-outline-primary-disabled-background-color);
border-color: var(--button-outline-primary-disabled-border-color);
color: var(--button-outline-primary-disabled-text-color);
}
[nbButton].appearance-outline.status-success, .appearance-outline.status-success[nbButtonToggle] {
background-color: var(--button-outline-success-background-color);
border-color: var(--button-outline-success-border-color);
color: var(--button-outline-success-text-color);
}
[nbButton].appearance-outline.status-success:focus, .appearance-outline.status-success[nbButtonToggle]:focus {
background-color: var(--button-outline-success-focus-background-color);
border-color: var(--button-outline-success-focus-border-color);
color: var(--button-outline-success-focus-text-color);
}
[nbButton].appearance-outline.status-success:hover, .appearance-outline.status-success[nbButtonToggle]:hover {
background-color: var(--button-outline-success-hover-background-color);
border-color: var(--button-outline-success-hover-border-color);
color: var(--button-outline-success-hover-text-color);
}
[nbButton].appearance-outline.status-success:active, .appearance-outline.status-success[nbButtonToggle]:active {
background-color: var(--button-outline-success-active-background-color);
border-color: var(--button-outline-success-active-border-color);
color: var(--button-outline-success-active-text-color);
}
[nbButton].appearance-outline.status-success[disabled], .appearance-outline.status-success[disabled][nbButtonToggle] {
background-color: var(--button-outline-success-disabled-background-color);
border-color: var(--button-outline-success-disabled-border-color);
color: var(--button-outline-success-disabled-text-color);
}
[nbButton].appearance-outline.status-warning, .appearance-outline.status-warning[nbButtonToggle] {
background-color: var(--button-outline-warning-background-color);
border-color: var(--button-outline-warning-border-color);
color: var(--button-outline-warning-text-color);
}
[nbButton].appearance-outline.status-warning:focus, .appearance-outline.status-warning[nbButtonToggle]:focus {
background-color: var(--button-outline-warning-focus-background-color);
border-color: var(--button-outline-warning-focus-border-color);
color: var(--button-outline-warning-focus-text-color);
}
[nbButton].appearance-outline.status-warning:hover, .appearance-outline.status-warning[nbButtonToggle]:hover {
background-color: var(--button-outline-warning-hover-background-color);
border-color: var(--button-outline-warning-hover-border-color);
color: var(--button-outline-warning-hover-text-color);
}
[nbButton].appearance-outline.status-warning:active, .appearance-outline.status-warning[nbButtonToggle]:active {
background-color: var(--button-outline-warning-active-background-color);
border-color: var(--button-outline-warning-active-border-color);
color: var(--button-outline-warning-active-text-color);
}
[nbButton].appearance-outline.status-warning[disabled], .appearance-outline.status-warning[disabled][nbButtonToggle] {
background-color: var(--button-outline-warning-disabled-background-color);
border-color: var(--button-outline-warning-disabled-border-color);
color: var(--button-outline-warning-disabled-text-color);
}
[nbButton].appearance-outline.status-danger, .appearance-outline.status-danger[nbButtonToggle] {
background-color: var(--button-outline-danger-background-color);
border-color: var(--button-outline-danger-border-color);
color: var(--button-outline-danger-text-color);
}
[nbButton].appearance-outline.status-danger:focus, .appearance-outline.status-danger[nbButtonToggle]:focus {
background-color: var(--button-outline-danger-focus-background-color);
border-color: var(--button-outline-danger-focus-border-color);
color: var(--button-outline-danger-focus-text-color);
}
[nbButton].appearance-outline.status-danger:hover, .appearance-outline.status-danger[nbButtonToggle]:hover {
background-color: var(--button-outline-danger-hover-background-color);
border-color: var(--button-outline-danger-hover-border-color);
color: var(--button-outline-danger-hover-text-color);
}
[nbButton].appearance-outline.status-danger:active, .appearance-outline.status-danger[nbButtonToggle]:active {
background-color: var(--button-outline-danger-active-background-color);
border-color: var(--button-outline-danger-active-border-color);
color: var(--button-outline-danger-active-text-color);
}
[nbButton].appearance-outline.status-danger[disabled], .appearance-outline.status-danger[disabled][nbButtonToggle] {
background-color: var(--button-outline-danger-disabled-background-color);
border-color: var(--button-outline-danger-disabled-border-color);
color: var(--button-outline-danger-disabled-text-color);
}
[nbButton].appearance-outline.status-info, .appearance-outline.status-info[nbButtonToggle] {
background-color: var(--button-outline-info-background-color);
border-color: var(--button-outline-info-border-color);
color: var(--button-outline-info-text-color);
}
[nbButton].appearance-outline.status-info:focus, .appearance-outline.status-info[nbButtonToggle]:focus {
background-color: var(--button-outline-info-focus-background-color);
border-color: var(--button-outline-info-focus-border-color);
color: var(--button-outline-info-focus-text-color);
}
[nbButton].appearance-outline.status-info:hover, .appearance-outline.status-info[nbButtonToggle]:hover {
background-color: var(--button-outline-info-hover-background-color);
border-color: var(--button-outline-info-hover-border-color);
color: var(--button-outline-info-hover-text-color);
}
[nbButton].appearance-outline.status-info:active, .appearance-outline.status-info[nbButtonToggle]:active {
background-color: var(--button-outline-info-active-background-color);
border-color: var(--button-outline-info-active-border-color);
color: var(--button-outline-info-active-text-color);
}
[nbButton].appearance-outline.status-info[disabled], .appearance-outline.status-info[disabled][nbButtonToggle] {
background-color: var(--button-outline-info-disabled-background-color);
border-color: var(--button-outline-info-disabled-border-color);
color: var(--button-outline-info-disabled-text-color);
}
[nbButton].appearance-outline.status-control, .appearance-outline.status-control[nbButtonToggle] {
background-color: var(--button-outline-control-background-color);
border-color: var(--button-outline-control-border-color);
color: var(--button-outline-control-text-color);
}
[nbButton].appearance-outline.status-control:focus, .appearance-outline.status-control[nbButtonToggle]:focus {
background-color: var(--button-outline-control-focus-background-color);
border-color: var(--button-outline-control-focus-border-color);
color: var(--button-outline-control-focus-text-color);
}
[nbButton].appearance-outline.status-control:hover, .appearance-outline.status-control[nbButtonToggle]:hover {
background-color: var(--button-outline-control-hover-background-color);
border-color: var(--button-outline-control-hover-border-color);
color: var(--button-outline-control-hover-text-color);
}
[nbButton].appearance-outline.status-control:active, .appearance-outline.status-control[nbButtonToggle]:active {
background-color: var(--button-outline-control-active-background-color);
border-color: var(--button-outline-control-active-border-color);
color: var(--button-outline-control-active-text-color);
}
[nbButton].appearance-outline.status-control[disabled], .appearance-outline.status-control[disabled][nbButtonToggle] {
background-color: var(--button-outline-control-disabled-background-color);
border-color: var(--button-outline-control-disabled-border-color);
color: var(--button-outline-control-disabled-text-color);
}
[nbButton].appearance-ghost, .appearance-ghost[nbButtonToggle] {
background-color: var(--button-ghost-background-color);
border-color: var(--button-ghost-border-color);
border-style: var(--button-ghost-border-style);
border-width: var(--button-ghost-border-width);
text-transform: var(--button-ghost-text-transform);
}
[nbButton].appearance-ghost:focus, .appearance-ghost[nbButtonToggle]:focus {
box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color);
}
[nbButton].appearance-ghost:focus:not(:hover):not(:active), .appearance-ghost[nbButtonToggle]:focus:not(:hover):not(:active) {
box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-ghost-focus-inset-shadow-length) var(--button-outline-color);
}
[nbButton].appearance-ghost.size-tiny, .appearance-ghost.size-tiny[nbButtonToggle] {
padding: var(--button-ghost-tiny-padding);
}
[nbButton].appearance-ghost.size-small, .appearance-ghost.size-small[nbButtonToggle] {
padding: var(--button-ghost-small-padding);
}
[nbButton].appearance-ghost.size-medium, .appearance-ghost.size-medium[nbButtonToggle] {
padding: var(--button-ghost-medium-padding);
}
[nbButton].appearance-ghost.size-large, .appearance-ghost.size-large[nbButtonToggle] {
padding: var(--button-ghost-large-padding);
}
[nbButton].appearance-ghost.size-giant, .appearance-ghost.size-giant[nbButtonToggle] {
padding: var(--button-ghost-giant-padding);
}
[nbButton].appearance-ghost.status-basic, .appearance-ghost.status-basic[nbButtonToggle] {
color: var(--button-ghost-basic-text-color);
}
[nbButton].appearance-ghost.status-basic:focus, .appearance-ghost.status-basic[nbButtonToggle]:focus {
background-color: var(--button-ghost-basic-focus-background-color);
border-color: var(--button-ghost-basic-focus-border-color);
color: var(--button-ghost-basic-focus-text-color);
}
[nbButton].appearance-ghost.status-basic:hover, .appearance-ghost.status-basic[nbButtonToggle]:hover {
background-color: var(--button-ghost-basic-hover-background-color);
border-color: var(--button-ghost-basic-hover-border-color);
color: var(--button-ghost-basic-hover-text-color);
}
[nbButton].appearance-ghost.status-basic:active, .appearance-ghost.status-basic[nbButtonToggle]:active {
background-color: var(--button-ghost-basic-active-background-color);
border-color: var(--button-ghost-basic-active-border-color);
color: var(--button-ghost-basic-active-text-color);
}
[nbButton].appearance-ghost.status-basic[disabled], .appearance-ghost.status-basic[disabled][nbButtonToggle] {
background-color: var(--button-ghost-basic-disabled-background-color);
border-color: var(--button-ghost-basic-disabled-border-color);
color: var(--button-ghost-basic-disabled-text-color);
}
[nbButton].appearance-ghost.status-primary, .appearance-ghost.status-primary[nbButtonToggle] {
color: var(--button-ghost-primary-text-color);
}
[nbButton].appearance-ghost.status-primary:focus, .appearance-ghost.status-primary[nbButtonToggle]:focus {
background-color: var(--button-ghost-primary-focus-background-color);
border-color: var(--button-ghost-primary-focus-border-color);
color: var(--button-ghost-primary-focus-text-color);
}
[nbButton].appearance-ghost.status-primary:hover, .appearance-ghost.status-primary[nbButtonToggle]:hover {
background-color: var(--button-ghost-primary-hover-background-color);
border-color: var(--button-ghost-primary-hover-border-color);
color: var(--button-ghost-primary-hover-text-color);
}
[nbButton].appearance-ghost.status-primary:active, .appearance-ghost.status-primary[nbButtonToggle]:active {
background-color: var(--button-ghost-primary-active-background-color);
border-color: var(--button-ghost-primary-active-border-color);
color: var(--button-ghost-primary-active-text-color);
}
[nbButton].appearance-ghost.status-primary[disabled], .appearance-ghost.status-primary[disabled][nbButtonToggle] {
background-color: var(--button-ghost-primary-disabled-background-color);
border-color: var(--button-ghost-primary-disabled-border-color);
color: var(--button-ghost-primary-disabled-text-color);
}
[nbButton].appearance-ghost.status-success, .appearance-ghost.status-success[nbButtonToggle] {
color: var(--button-ghost-success-text-color);
}
[nbButton].appearance-ghost.status-success:focus, .appearance-ghost.status-success[nbButtonToggle]:focus {
background-color: var(--button-ghost-success-focus-background-color);
border-color: var(--button-ghost-success-focus-border-color);
color: var(--button-ghost-success-focus-text-color);
}
[nbButton].appearance-ghost.status-success:hover, .appearance-ghost.status-success[nbButtonToggle]:hover {
background-color: var(--button-ghost-success-hover-background-color);
border-color: var(--button-ghost-success-hover-border-color);
color: var(--button-ghost-success-hover-text-color);
}
[nbButton].appearance-ghost.status-success:active, .appearance-ghost.status-success[nbButtonToggle]:active {
background-color: var(--button-ghost-success-active-background-color);
border-color: var(--button-ghost-success-active-border-color);
color: var(--button-ghost-success-active-text-color);
}
[nbButton].appearance-ghost.status-success[disabled], .appearance-ghost.status-success[disabled][nbButtonToggle] {
background-color: var(--button-ghost-success-disabled-background-color);
border-color: var(--button-ghost-success-disabled-border-color);
color: var(--button-ghost-success-disabled-text-color);
}
[nbButton].appearance-ghost.status-warning, .appearance-ghost.status-warning[nbButtonToggle] {
color: var(--button-ghost-warning-text-color);
}
[nbButton].appearance-ghost.status-warning:focus, .appearance-ghost.status-warning[nbButtonToggle]:focus {
background-color: var(--button-ghost-warning-focus-background-color);
border-color: var(--button-ghost-warning-focus-border-color);
color: var(--button-ghost-warning-focus-text-color);
}
[nbButton].appearance-ghost.status-warning:hover, .appearance-ghost.status-warning[nbButtonToggle]:hover {
background-color: var(--button-ghost-warning-hover-background-color);
border-color: var(--button-ghost-warning-hover-border-color);
color: var(--button-ghost-warning-hover-text-color);
}
[nbButton].appearance-ghost.status-warning:active, .appearance-ghost.status-warning[nbButtonToggle]:active {
background-color: var(--button-ghost-warning-active-background-color);
border-color: var(--button-ghost-warning-active-border-color);
color: var(--button-ghost-warning-active-text-color);
}
[nbButton].appearance-ghost.status-warning[disabled], .appearance-ghost.status-warning[disabled][nbButtonToggle] {
background-color: var(--button-ghost-warning-disabled-background-color);
border-color: var(--button-ghost-warning-disabled-border-color);
color: var(--button-ghost-warning-disabled-text-color);
}
[nbButton].appearance-ghost.status-danger, .appearance-ghost.status-danger[nbButtonToggle] {
color: var(--button-ghost-danger-text-color);
}
[nbButton].appearance-ghost.status-danger:focus, .appearance-ghost.status-danger[nbButtonToggle]:focus {
background-color: var(--button-ghost-danger-focus-background-color);
border-color: var(--button-ghost-danger-focus-border-color);
color: var(--button-ghost-danger-focus-text-color);
}
[nbButton].appearance-ghost.status-danger:hover, .appearance-ghost.status-danger[nbButtonToggle]:hover {
background-color: var(--button-ghost-danger-hover-background-color);
border-color: var(--button-ghost-danger-hover-border-color);
color: var(--button-ghost-danger-hover-text-color);
}
[nbButton].appearance-ghost.status-danger:active, .appearance-ghost.status-danger[nbButtonToggle]:active {
background-color: var(--button-ghost-danger-active-background-color);
border-color: var(--button-ghost-danger-active-border-color);
color: var(--button-ghost-danger-active-text-color);
}
[nbButton].appearance-ghost.status-danger[disabled], .appearance-ghost.status-danger[disabled][nbButtonToggle] {
background-color: var(--button-ghost-danger-disabled-background-color);
border-color: var(--button-ghost-danger-disabled-border-color);
color: var(--button-ghost-danger-disabled-text-color);
}
[nbButton].appearance-ghost.status-info, .appearance-ghost.status-info[nbButtonToggle] {
color: var(--button-ghost-info-text-color);
}
[nbButton].appearance-ghost.status-info:focus, .appearance-ghost.status-info[nbButtonToggle]:focus {
background-color: var(--button-ghost-info-focus-background-color);
border-color: var(--button-ghost-info-focus-border-color);
color: var(--button-ghost-info-focus-text-color);
}
[nbButton].appearance-ghost.status-info:hover, .appearance-ghost.status-info[nbButtonToggle]:hover {
background-color: var(--button-ghost-info-hover-background-color);
border-color: var(--button-ghost-info-hover-border-color);
color: var(--button-ghost-info-hover-text-color);
}
[nbButton].appearance-ghost.status-info:active, .appearance-ghost.status-info[nbButtonToggle]:active {
background-color: var(--button-ghost-info-active-background-color);
border-color: var(--button-ghost-info-active-border-color);
color: var(--button-ghost-info-active-text-color);
}
[nbButton].appearance-ghost.status-info[disabled], .appearance-ghost.status-info[disabled][nbButtonToggle] {
background-color: var(--button-ghost-info-disabled-background-color);
border-color: var(--button-ghost-info-disabled-border-color);
color: var(--button-ghost-info-disabled-text-color);
}
[nbButton].appearance-ghost.status-control, .appearance-ghost.status-control[nbButtonToggle] {
color: var(--button-ghost-control-text-color);
}
[nbButton].appearance-ghost.status-control:focus, .appearance-ghost.status-control[nbButtonToggle]:focus {
background-color: var(--button-ghost-control-focus-background-color);
border-color: var(--button-ghost-control-focus-border-color);
color: var(--button-ghost-control-focus-text-color);
}
[nbButton].appearance-ghost.status-control:hover, .appearance-ghost.status-control[nbButtonToggle]:hover {
background-color: var(--button-ghost-control-hover-background-color);
border-color: var(--button-ghost-control-hover-border-color);
color: var(--button-ghost-control-hover-text-color);
}
[nbButton].appearance-ghost.status-control:active, .appearance-ghost.status-control[nbButtonToggle]:active {
background-color: var(--button-ghost-control-active-background-color);
border-color: var(--button-ghost-control-active-border-color);
color: var(--button-ghost-control-active-text-color);
}
[nbButton].appearance-ghost.status-control[disabled], .appearance-ghost.status-control[disabled][nbButtonToggle] {
background-color: var(--button-ghost-control-disabled-background-color);
border-color: var(--button-ghost-control-disabled-border-color);
color: var(--button-ghost-control-disabled-text-color);
}
[nbButton].appearance-hero, .appearance-hero[nbButtonToggle] {
text-shadow: var(--button-hero-text-shadow);
text-transform: var(--button-hero-text-transform);
}
[nbButton].appearance-hero.size-tiny, .appearance-hero.size-tiny[nbButtonToggle] {
padding: var(--button-hero-tiny-padding);
}
[nbButton].appearance-hero.size-small, .appearance-hero.size-small[nbButtonToggle] {
padding: var(--button-hero-small-padding);
}
[nbButton].appearance-hero.size-medium, .appearance-hero.size-medium[nbButtonToggle] {
padding: var(--button-hero-medium-padding);
}
[nbButton].appearance-hero.size-large, .appearance-hero.size-large[nbButtonToggle] {
padding: var(--button-hero-large-padding);
}
[nbButton].appearance-hero.size-giant, .appearance-hero.size-giant[nbButtonToggle] {
padding: var(--button-hero-giant-padding);
}
[nbButton].appearance-hero.status-basic, .appearance-hero.status-basic[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-basic-left-background-color), var(--button-hero-basic-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow);
color: var(--button-hero-basic-text-color);
}
[nbButton].appearance-hero.status-basic:focus, .appearance-hero.status-basic[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-basic-focus-left-background-color), var(--button-hero-basic-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-basic:hover, .appearance-hero.status-basic[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-basic-hover-left-background-color), var(--button-hero-basic-hover-right-background-color));
}
[nbButton].appearance-hero.status-basic:active, .appearance-hero.status-basic[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-basic-active-left-background-color), var(--button-hero-basic-active-right-background-color));
}
[nbButton].appearance-hero.status-basic[disabled], .appearance-hero.status-basic[disabled][nbButtonToggle] {
background-color: var(--button-hero-basic-disabled-background-color);
background-image: none;
color: var(--button-hero-basic-disabled-text-color);
}
[nbButton].appearance-hero.status-basic.button-pulse, .appearance-hero.status-basic.button-pulse[nbButtonToggle] {
animation: button-hero-basic-pulse 0.75s infinite alternate;
}
@keyframes button-hero-basic-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-basic-left-background-color);
opacity: 0.8;
}
}
[nbButton].appearance-hero.status-primary, .appearance-hero.status-primary[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-primary-left-background-color), var(--button-hero-primary-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow);
color: var(--button-hero-primary-text-color);
}
[nbButton].appearance-hero.status-primary:focus, .appearance-hero.status-primary[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-primary-focus-left-background-color), var(--button-hero-primary-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-primary:hover, .appearance-hero.status-primary[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-primary-hover-left-background-color), var(--button-hero-primary-hover-right-background-color));
}
[nbButton].appearance-hero.status-primary:active, .appearance-hero.status-primary[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-primary-active-left-background-color), var(--button-hero-primary-active-right-background-color));
}
[nbButton].appearance-hero.status-primary[disabled], .appearance-hero.status-primary[disabled][nbButtonToggle] {
background-color: var(--button-hero-primary-disabled-background-color);
background-image: none;
color: var(--button-hero-primary-disabled-text-color);
}
[nbButton].appearance-hero.status-primary.button-pulse, .appearance-hero.status-primary.button-pulse[nbButtonToggle] {
animation: button-hero-primary-pulse 0.75s infinite alternate;
}
@keyframes button-hero-primary-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-primary-left-background-color);
opacity: 0.8;
}
}
[nbButton].appearance-hero.status-success, .appearance-hero.status-success[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-success-left-background-color), var(--button-hero-success-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow);
color: var(--button-hero-success-text-color);
}
[nbButton].appearance-hero.status-success:focus, .appearance-hero.status-success[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-success-focus-left-background-color), var(--button-hero-success-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-success:hover, .appearance-hero.status-success[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-success-hover-left-background-color), var(--button-hero-success-hover-right-background-color));
}
[nbButton].appearance-hero.status-success:active, .appearance-hero.status-success[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-success-active-left-background-color), var(--button-hero-success-active-right-background-color));
}
[nbButton].appearance-hero.status-success[disabled], .appearance-hero.status-success[disabled][nbButtonToggle] {
background-color: var(--button-hero-success-disabled-background-color);
background-image: none;
color: var(--button-hero-success-disabled-text-color);
}
[nbButton].appearance-hero.status-success.button-pulse, .appearance-hero.status-success.button-pulse[nbButtonToggle] {
animation: button-hero-success-pulse 0.75s infinite alternate;
}
@keyframes button-hero-success-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-success-left-background-color);
opacity: 0.8;
}
}
[nbButton].appearance-hero.status-warning, .appearance-hero.status-warning[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-warning-left-background-color), var(--button-hero-warning-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow);
color: var(--button-hero-warning-text-color);
}
[nbButton].appearance-hero.status-warning:focus, .appearance-hero.status-warning[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-warning-focus-left-background-color), var(--button-hero-warning-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-warning:hover, .appearance-hero.status-warning[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-warning-hover-left-background-color), var(--button-hero-warning-hover-right-background-color));
}
[nbButton].appearance-hero.status-warning:active, .appearance-hero.status-warning[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-warning-active-left-background-color), var(--button-hero-warning-active-right-background-color));
}
[nbButton].appearance-hero.status-warning[disabled], .appearance-hero.status-warning[disabled][nbButtonToggle] {
background-color: var(--button-hero-warning-disabled-background-color);
background-image: none;
color: var(--button-hero-warning-disabled-text-color);
}
[nbButton].appearance-hero.status-warning.button-pulse, .appearance-hero.status-warning.button-pulse[nbButtonToggle] {
animation: button-hero-warning-pulse 0.75s infinite alternate;
}
@keyframes button-hero-warning-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-warning-left-background-color);
opacity: 0.8;
}
}
[nbButton].appearance-hero.status-danger, .appearance-hero.status-danger[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-danger-left-background-color), var(--button-hero-danger-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow);
color: var(--button-hero-danger-text-color);
}
[nbButton].appearance-hero.status-danger:focus, .appearance-hero.status-danger[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-danger-focus-left-background-color), var(--button-hero-danger-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-danger:hover, .appearance-hero.status-danger[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-danger-hover-left-background-color), var(--button-hero-danger-hover-right-background-color));
}
[nbButton].appearance-hero.status-danger:active, .appearance-hero.status-danger[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-danger-active-left-background-color), var(--button-hero-danger-active-right-background-color));
}
[nbButton].appearance-hero.status-danger[disabled], .appearance-hero.status-danger[disabled][nbButtonToggle] {
background-color: var(--button-hero-danger-disabled-background-color);
background-image: none;
color: var(--button-hero-danger-disabled-text-color);
}
[nbButton].appearance-hero.status-danger.button-pulse, .appearance-hero.status-danger.button-pulse[nbButtonToggle] {
animation: button-hero-danger-pulse 0.75s infinite alternate;
}
@keyframes button-hero-danger-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-danger-left-background-color);
opacity: 0.8;
}
}
[nbButton].appearance-hero.status-info, .appearance-hero.status-info[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-info-left-background-color), var(--button-hero-info-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow);
color: var(--button-hero-info-text-color);
}
[nbButton].appearance-hero.status-info:focus, .appearance-hero.status-info[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-info-focus-left-background-color), var(--button-hero-info-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-info:hover, .appearance-hero.status-info[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-info-hover-left-background-color), var(--button-hero-info-hover-right-background-color));
}
[nbButton].appearance-hero.status-info:active, .appearance-hero.status-info[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-info-active-left-background-color), var(--button-hero-info-active-right-background-color));
}
[nbButton].appearance-hero.status-info[disabled], .appearance-hero.status-info[disabled][nbButtonToggle] {
background-color: var(--button-hero-info-disabled-background-color);
background-image: none;
color: var(--button-hero-info-disabled-text-color);
}
[nbButton].appearance-hero.status-info.button-pulse, .appearance-hero.status-info.button-pulse[nbButtonToggle] {
animation: button-hero-info-pulse 0.75s infinite alternate;
}
@keyframes button-hero-info-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-info-left-background-color);
opacity: 0.8;
}
}
[nbButton].appearance-hero.status-control, .appearance-hero.status-control[nbButtonToggle] {
background-image: linear-gradient(to right, var(--button-hero-control-left-background-color), var(--button-hero-control-right-background-color));
border: none;
box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow);
color: var(--button-hero-control-text-color);
}
[nbButton].appearance-hero.status-control:focus, .appearance-hero.status-control[nbButtonToggle]:focus {
background-image: linear-gradient(to right, var(--button-hero-control-focus-left-background-color), var(--button-hero-control-focus-right-background-color));
box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color);
}
[nbButton].appearance-hero.status-control:hover, .appearance-hero.status-control[nbButtonToggle]:hover {
background-image: linear-gradient(to right, var(--button-hero-control-hover-left-background-color), var(--button-hero-control-hover-right-background-color));
}
[nbButton].appearance-hero.status-control:active, .appearance-hero.status-control[nbButtonToggle]:active {
background-image: linear-gradient(to right, var(--button-hero-control-active-left-background-color), var(--button-hero-control-active-right-background-color));
}
[nbButton].appearance-hero.status-control[disabled], .appearance-hero.status-control[disabled][nbButtonToggle] {
background-color: var(--button-hero-control-disabled-background-color);
background-image: none;
color: var(--button-hero-control-disabled-text-color);
}
[nbButton].appearance-hero.status-control.button-pulse, .appearance-hero.status-control.button-pulse[nbButtonToggle] {
animation: button-hero-control-pulse 0.75s infinite alternate;
}
@keyframes button-hero-control-pulse {
0% {
box-shadow: none;
opacity: 0.3;
}
100% {
box-shadow: 0 0 1rem 0 var(--button-hero-control-left-background-color);
opacity: 0.8;
}
}
nb-button-group {
display: inline-flex;
}
[dir=ltr] nb-button-group [nbButton]:first-child:not(:last-child),
[dir=ltr] nb-button-group [nbButtonToggle]:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[dir=ltr] nb-button-group [nbButton]:last-child:not(:first-child),
[dir=ltr] nb-button-group [nbButtonToggle]:last-child:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[dir=rtl] nb-button-group [nbButton]:first-child:not(:last-child),
[dir=rtl] nb-button-group [nbButtonToggle]:first-child:not(:last-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[dir=rtl] nb-button-group [nbButton]:last-child:not(:first-child),
[dir=rtl] nb-button-group [nbButtonToggle]:last-child:not(:first-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nb-button-group [nbButton]:not(:first-child):not(:last-child),
nb-button-group [nbButtonToggle]:not(:first-child):not(:last-child) {
border-radius: 0;
}
nb-button-group [nbButton].appearance-filled, nb-button-group [nbButton].appearance-ghost,
nb-button-group [nbButtonToggle].appearance-filled,
nb-button-group [nbButtonToggle].appearance-ghost {
border-color: transparent;
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-basic-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-basic-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-basic,
nb-button-group [nbButtonToggle].appearance-filled.status-basic {
color: var(--button-group-filled-button-basic-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-primary-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-primary-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-primary,
nb-button-group [nbButtonToggle].appearance-filled.status-primary {
color: var(--button-group-filled-button-primary-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-success-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-success-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-success,
nb-button-group [nbButtonToggle].appearance-filled.status-success {
color: var(--button-group-filled-button-success-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-warning-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-warning-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-warning,
nb-button-group [nbButtonToggle].appearance-filled.status-warning {
color: var(--button-group-filled-button-warning-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-danger-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-danger-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-danger,
nb-button-group [nbButtonToggle].appearance-filled.status-danger {
color: var(--button-group-filled-button-danger-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-info-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-info-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-info,
nb-button-group [nbButtonToggle].appearance-filled.status-info {
color: var(--button-group-filled-button-info-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-filled-control-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-filled-control-divider-color);
}
nb-button-group [nbButton].appearance-filled.status-control,
nb-button-group [nbButtonToggle].appearance-filled.status-control {
color: var(--button-group-filled-button-control-text-color);
}
[dir=ltr] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=ltr] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-left-color: var(--button-group-ghost-divider-color);
}
[dir=rtl] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),
[dir=rtl] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
border-right-color: var(--button-group-ghost-divider-color);
}
nb-list-item {
border-bottom: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color);
color: var(--list-item-text-color);
font-family: var(--list-item-font-family);
font-size: var(--list-item-font-size);
font-weight: var(--list-item-font-weight);
line-height: var(--list-item-line-height);
padding: var(--list-item-padding);
}
nb-list-item:first-child {
border-top: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color);
}
[nbInput] {
border-style: var(--input-border-style);
border-width: var(--input-border-width);
font-family: var(--input-text-font-family);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
[nbInput].nb-transition {
transition-duration: 0.15s;
transition-property: border, background-color, color, box-shadow;
transition-timing-function: ease-in;
}
[nbInput]::placeholder {
font-family: var(--input-placeholder-text-font-family);
text-overflow: ellipsis;
}
[nbInput]:focus {
outline: none;
}
[nbInput].input-full-width {
width: 100%;
}
[nbInput].status-basic {
background-color: var(--input-basic-background-color);
border-color: var(--input-basic-border-color);
color: var(--input-basic-text-color);
}
[nbInput].status-basic::placeholder {
color: var(--input-basic-placeholder-text-color);
}
[nbInput].status-basic:focus {
background-color: var(--input-basic-focus-background-color);
border-color: var(--input-basic-focus-border-color);
}
[nbInput].status-basic:hover {
background-color: var(--input-basic-hover-background-color);
border-color: var(--input-basic-hover-border-color);
}
[nbInput].status-basic:disabled {
background-color: var(--input-basic-disabled-background-color);
border-color: var(--input-basic-disabled-border-color);
color: var(--input-basic-disabled-text-color);
}
[nbInput].status-basic:disabled::placeholder {
color: var(--input-basic-disabled-placeholder-text-color);
}
[nbInput].status-primary {
background-color: var(--input-primary-background-color);
border-color: var(--input-primary-border-color);
color: var(--input-primary-text-color);
}
[nbInput].status-primary::placeholder {
color: var(--input-primary-placeholder-text-color);
}
[nbInput].status-primary:focus {
background-color: var(--input-primary-focus-background-color);
border-color: var(--input-primary-focus-border-color);
}
[nbInput].status-primary:hover {
background-color: var(--input-primary-hover-background-color);
border-color: var(--input-primary-hover-border-color);
}
[nbInput].status-primary:disabled {
background-color: var(--input-primary-disabled-background-color);
border-color: var(--input-primary-disabled-border-color);
color: var(--input-primary-disabled-text-color);
}
[nbInput].status-primary:disabled::placeholder {
color: var(--input-primary-disabled-placeholder-text-color);
}
[nbInput].status-success {
background-color: var(--input-success-background-color);
border-color: var(--input-success-border-color);
color: var(--input-success-text-color);
}
[nbInput].status-success::placeholder {
color: var(--input-success-placeholder-text-color);
}
[nbInput].status-success:focus {
background-color: var(--input-success-focus-background-color);
border-color: var(--input-success-focus-border-color);
}
[nbInput].status-success:hover {
background-color: var(--input-success-hover-background-color);
border-color: var(--input-success-hover-border-color);
}
[nbInput].status-success:disabled {
background-color: var(--input-success-disabled-background-color);
border-color: var(--input-success-disabled-border-color);
color: var(--input-success-disabled-text-color);
}
[nbInput].status-success:disabled::placeholder {
color: var(--input-success-disabled-placeholder-text-color);
}
[nbInput].status-warning {
background-color: var(--input-warning-background-color);
border-color: var(--input-warning-border-color);
color: var(--input-warning-text-color);
}
[nbInput].status-warning::placeholder {
color: var(--input-warning-placeholder-text-color);
}
[nbInput].status-warning:focus {
background-color: var(--input-warning-focus-background-color);
border-color: var(--input-warning-focus-border-color);
}
[nbInput].status-warning:hover {
background-color: var(--input-warning-hover-background-color);
border-color: var(--input-warning-hover-border-color);
}
[nbInput].status-warning:disabled {
background-color: var(--input-warning-disabled-background-color);
border-color: var(--input-warning-disabled-border-color);
color: var(--input-warning-disabled-text-color);
}
[nbInput].status-warning:disabled::placeholder {
color: var(--input-warning-disabled-placeholder-text-color);
}
[nbInput].status-danger {
background-color: var(--input-danger-background-color);
border-color: var(--input-danger-border-color);
color: var(--input-danger-text-color);
}
[nbInput].status-danger::placeholder {
color: var(--input-danger-placeholder-text-color);
}
[nbInput].status-danger:focus {
background-color: var(--input-danger-focus-background-color);
border-color: var(--input-danger-focus-border-color);
}
[nbInput].status-danger:hover {
background-color: var(--input-danger-hover-background-color);
border-color: var(--input-danger-hover-border-color);
}
[nbInput].status-danger:disabled {
background-color: var(--input-danger-disabled-background-color);
border-color: var(--input-danger-disabled-border-color);
color: var(--input-danger-disabled-text-color);
}
[nbInput].status-danger:disabled::placeholder {
color: var(--input-danger-disabled-placeholder-text-color);
}
[nbInput].status-info {
background-color: var(--input-info-background-color);
border-color: var(--input-info-border-color);
color: var(--input-info-text-color);
}
[nbInput].status-info::placeholder {
color: var(--input-info-placeholder-text-color);
}
[nbInput].status-info:focus {
background-color: var(--input-info-focus-background-color);
border-color: var(--input-info-focus-border-color);
}
[nbInput].status-info:hover {
background-color: var(--input-info-hover-background-color);
border-color: var(--input-info-hover-border-color);
}
[nbInput].status-info:disabled {
background-color: var(--input-info-disabled-background-color);
border-color: var(--input-info-disabled-border-color);
color: var(--input-info-disabled-text-color);
}
[nbInput].status-info:disabled::placeholder {
color: var(--input-info-disabled-placeholder-text-color);
}
[nbInput].status-control {
background-color: var(--input-control-background-color);
border-color: var(--input-control-border-color);
color: var(--input-control-text-color);
}
[nbInput].status-control::placeholder {
color: var(--input-control-placeholder-text-color);
}
[nbInput].status-control:focus {
background-color: var(--input-control-focus-background-color);
border-color: var(--input-control-focus-border-color);
}
[nbInput].status-control:hover {
background-color: var(--input-control-hover-background-color);
border-color: var(--input-control-hover-border-color);
}
[nbInput].status-control:disabled {
background-color: var(--input-control-disabled-background-color);
border-color: var(--input-control-disabled-border-color);
color: var(--input-control-disabled-text-color);
}
[nbInput].status-control:disabled::placeholder {
color: var(--input-control-disabled-placeholder-text-color);
}
[nbInput].size-tiny {
font-size: var(--input-tiny-text-font-size);
font-weight: var(--input-tiny-text-font-weight);
line-height: var(--input-tiny-text-line-height);
padding: var(--input-tiny-padding);
}
[nbInput].size-tiny:not(.input-full-width) {
max-width: var(--input-tiny-max-width);
}
[nbInput].size-tiny::placeholder {
font-size: var(--input-tiny-placeholder-text-font-size);
font-weight: var(--input-tiny-placeholder-text-font-weight);
line-height: var(--input-tiny-placeholder-text-line-height);
}
[nbInput].size-small {
font-size: var(--input-small-text-font-size);
font-weight: var(--input-small-text-font-weight);
line-height: var(--input-small-text-line-height);
padding: var(--input-small-padding);
}
[nbInput].size-small:not(.input-full-width) {
max-width: var(--input-small-max-width);
}
[nbInput].size-small::placeholder {
font-size: var(--input-small-placeholder-text-font-size);
font-weight: var(--input-small-placeholder-text-font-weight);
line-height: var(--input-small-placeholder-text-line-height);
}
[nbInput].size-medium {
font-size: var(--input-medium-text-font-size);
font-weight: var(--input-medium-text-font-weight);
line-height: var(--input-medium-text-line-height);
padding: var(--input-medium-padding);
}
[nbInput].size-medium:not(.input-full-width) {
max-width: var(--input-medium-max-width);
}
[nbInput].size-medium::placeholder {
font-size: var(--input-medium-placeholder-text-font-size);
font-weight: var(--input-medium-placeholder-text-font-weight);
line-height: var(--input-medium-placeholder-text-line-height);
}
[nbInput].size-large {
font-size: var(--input-large-text-font-size);
font-weight: var(--input-large-text-font-weight);
line-height: var(--input-large-text-line-height);
padding: var(--input-large-padding);
}
[nbInput].size-large:not(.input-full-width) {
max-width: var(--input-large-max-width);
}
[nbInput].size-large::placeholder {
font-size: var(--input-large-placeholder-text-font-size);
font-weight: var(--input-large-placeholder-text-font-weight);
line-height: var(--input-large-placeholder-text-line-height);
}
[nbInput].size-giant {
font-size: var(--input-giant-text-font-size);
font-weight: var(--input-giant-text-font-weight);
line-height: var(--input-giant-text-line-height);
padding: var(--input-giant-padding);
}
[nbInput].size-giant:not(.input-full-width) {
max-width: var(--input-giant-max-width);
}
[nbInput].size-giant::placeholder {
font-size: var(--input-giant-placeholder-text-font-size);
font-weight: var(--input-giant-placeholder-text-font-weight);
line-height: var(--input-giant-placeholder-text-line-height);
}
[nbInput].shape-rectangle {
border-radius: var(--input-rectangle-border-radius);
}
[nbInput].shape-semi-round {
border-radius: var(--input-semi-round-border-radius);
}
[nbInput].shape-round {
border-radius: var(--input-round-border-radius);
}
nb-form-field [nbInput] {
width: 100%;
}
[dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-tiny {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-tiny {
padding-right: var(--form-field-addon-tiny-width);
}
[dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-tiny {
padding-right: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-tiny {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-small {
padding-left: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-small {
padding-right: var(--form-field-addon-small-width);
}
[dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-small {
padding-right: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-small {
padding-left: var(--form-field-addon-small-width);
}
[dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-medium {
padding-left: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-medium {
padding-right: var(--form-field-addon-medium-width);
}
[dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-medium {
padding-right: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-medium {
padding-left: var(--form-field-addon-medium-width);
}
[dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-large {
padding-left: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-large {
padding-right: var(--form-field-addon-large-width);
}
[dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-large {
padding-right: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-large {
padding-left: var(--form-field-addon-large-width);
}
[dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-giant {
padding-left: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-giant {
padding-right: var(--form-field-addon-giant-width);
}
[dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-giant {
padding-right: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-giant {
padding-left: var(--form-field-addon-giant-width);
}
.overlay-backdrop {
background: var(--overlay-backdrop-background-color);
}
.cdk-overlay-container {
z-index: 1040;
}
nb-popover {
border: var(--popover-border-width) solid var(--popover-border-color);
border-radius: var(--popover-border-radius);
background: var(--popover-background-color);
box-shadow: var(--popover-shadow);
color: var(--popover-text-color);
}
nb-popover .primitive-overlay {
font-family: var(--popover-text-font-family);
font-size: var(--popover-text-font-size);
font-weight: var(--popover-text-font-weight);
line-height: var(--popover-text-line-height);
padding: var(--popover-padding);
}
nb-popover .arrow {
border-left: var(--popover-arrow-size) solid transparent;
border-right: var(--popover-arrow-size) solid transparent;
border-bottom: var(--popover-arrow-size) solid var(--popover-border-color);
}
nb-popover .arrow::after {
position: absolute;
content: " ";
width: 0;
height: 0;
top: 3px;
left: calc(50% - var(--popover-arrow-size));
border-left: var(--popover-arrow-size) solid transparent;
border-right: var(--popover-arrow-size) solid transparent;
border-bottom: var(--popover-arrow-size) solid var(--popover-background-color);
-webkit-clip-path: inset(0 0 2px);
clip-path: inset(0 0 2px);
}
nb-popover.nb-overlay-bottom .arrow {
top: calc(-1 * var(--popover-arrow-size) + 1px);
left: calc(50% - var(--popover-arrow-size));
}
nb-popover.nb-overlay-bottom-start .arrow {
top: calc(-1 * var(--popover-arrow-size) + 1px);
}
[dir=ltr] nb-popover.nb-overlay-bottom-start .arrow {
right: var(--popover-arrow-size);
}
[dir=rtl] nb-popover.nb-overlay-bottom-start .arrow {
left: var(--popover-arrow-size);
}
nb-popover.nb-overlay-bottom-end .arrow {
top: calc(-1 * var(--popover-arrow-size) + 1px);
}
[dir=ltr] nb-popover.nb-overlay-bottom-end .arrow {
left: var(--popover-arrow-size);
}
[dir=rtl] nb-popover.nb-overlay-bottom-end .arrow {
right: var(--popover-arrow-size);
}
nb-popover.nb-overlay-left .arrow {
right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px);
top: calc(50% - var(--popover-arrow-size)/2);
transform: rotate(90deg);
}
nb-popover.nb-overlay-start-top .arrow {
right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px);
bottom: var(--popover-arrow-size);
transform: rotate(90deg);
}
nb-popover.nb-overlay-start-bottom .arrow {
right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px);
top: var(--popover-arrow-size);
transform: rotate(90deg);
}
nb-popover.nb-overlay-top .arrow {
bottom: calc(-1 * var(--popover-arrow-size) + 1px);
left: calc(50% - var(--popover-arrow-size));
transform: rotate(180deg);
}
nb-popover.nb-overlay-top-start .arrow {
bottom: calc(-1 * var(--popover-arrow-size) + 1px);
transform: rotate(180deg);
}
[dir=ltr] nb-popover.nb-overlay-top-start .arrow {
right: var(--popover-arrow-size);
}
[dir=rtl] nb-popover.nb-overlay-top-start .arrow {
left: var(--popover-arrow-size);
}
nb-popover.nb-overlay-top-end .arrow {
bottom: calc(-1 * var(--popover-arrow-size) + 1px);
transform: rotate(180deg);
}
[dir=ltr] nb-popover.nb-overlay-top-end .arrow {
left: var(--popover-arrow-size);
}
[dir=rtl] nb-popover.nb-overlay-top-end .arrow {
right: var(--popover-arrow-size);
}
nb-popover.nb-overlay-right .arrow {
left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px);
top: calc(50% - var(--popover-arrow-size)/2);
transform: rotate(270deg);
}
nb-popover.nb-overlay-end-top .arrow {
left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px);
bottom: var(--popover-arrow-size);
transform: rotate(270deg);
}
nb-popover.nb-overlay-end-bottom .arrow {
left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px);
top: var(--popover-arrow-size);
transform: rotate(270deg);
}
.context-menu-host {
/*
Fixes click not being bubbled to the body in Safari.
https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
*/
cursor: pointer;
}
nb-context-menu {
background-color: var(--context-menu-background-color);
border-color: var(--context-menu-border-color);
border-style: var(--context-menu-border-style);
border-width: var(--context-menu-border-width);
border-radius: var(--context-menu-border-radius);
box-shadow: var(--context-menu-shadow);
min-width: var(--context-menu-min-width);
max-width: var(--context-menu-max-width);
}
nb-context-menu nb-menu {
border-radius: var(--context-menu-border-radius);
overflow: hidden;
text-align: var(--context-menu-text-align);
}
nb-select .select-button {
min-width: var(--select-min-width);
cursor: var(--select-cursor);
font-family: var(--select-text-font-family);
}
nb-select .select-button.placeholder {
font-family: var(--select-placeholder-text-font-family);
}
nb-select .select-button:focus {
outline: none;
}
nb-select .select-button[disabled] {
cursor: var(--select-disabled-cursor);
}
nb-select.size-tiny .select-button {
font-size: var(--select-tiny-text-font-size);
font-weight: var(--select-tiny-text-font-weight);
line-height: var(--select-tiny-text-line-height);
}
nb-select.size-tiny .select-button.placeholder {
font-size: var(--select-tiny-placeholder-text-font-size);
font-weight: var(--select-tiny-placeholder-text-font-weight);
}
nb-select.size-tiny .select-button.empty::before {
content: " ";
display: block;
height: var(--select-tiny-text-line-height);
}
nb-select.size-tiny:not(.full-width) {
max-width: var(--select-tiny-max-width);
}
nb-select.size-small .select-button {
font-size: var(--select-small-text-font-size);
font-weight: var(--select-small-text-font-weight);
line-height: var(--select-small-text-line-height);
}
nb-select.size-small .select-button.placeholder {
font-size: var(--select-small-placeholder-text-font-size);
font-weight: var(--select-small-placeholder-text-font-weight);
}
nb-select.size-small .select-button.empty::before {
content: " ";
display: block;
height: var(--select-small-text-line-height);
}
nb-select.size-small:not(.full-width) {
max-width: var(--select-small-max-width);
}
nb-select.size-medium .select-button {
font-size: var(--select-medium-text-font-size);
font-weight: var(--select-medium-text-font-weight);
line-height: var(--select-medium-text-line-height);
}
nb-select.size-medium .select-button.placeholder {
font-size: var(--select-medium-placeholder-text-font-size);
font-weight: var(--select-medium-placeholder-text-font-weight);
}
nb-select.size-medium .select-button.empty::before {
content: " ";
display: block;
height: var(--select-medium-text-line-height);
}
nb-select.size-medium:not(.full-width) {
max-width: var(--select-medium-max-width);
}
nb-select.size-large .select-button {
font-size: var(--select-large-text-font-size);
font-weight: var(--select-large-text-font-weight);
line-height: var(--select-large-text-line-height);
}
nb-select.size-large .select-button.placeholder {
font-size: var(--select-large-placeholder-text-font-size);
font-weight: var(--select-large-placeholder-text-font-weight);
}
nb-select.size-large .select-button.empty::before {
content: " ";
display: block;
height: var(--select-large-text-line-height);
}
nb-select.size-large:not(.full-width) {
max-width: var(--select-large-max-width);
}
nb-select.size-giant .select-button {
font-size: var(--select-giant-text-font-size);
font-weight: var(--select-giant-text-font-weight);
line-height: var(--select-giant-text-line-height);
}
nb-select.size-giant .select-button.placeholder {
font-size: var(--select-giant-placeholder-text-font-size);
font-weight: var(--select-giant-placeholder-text-font-weight);
}
nb-select.size-giant .select-button.empty::before {
content: " ";
display: block;
height: var(--select-giant-text-line-height);
}
nb-select.size-giant:not(.full-width) {
max-width: var(--select-giant-max-width);
}
nb-select.shape-rectangle .select-button {
border-radius: var(--select-rectangle-border-radius);
}
nb-select.shape-semi-round .select-button {
border-radius: var(--select-semi-round-border-radius);
}
nb-select.shape-round .select-button {
border-radius: var(--select-round-border-radius);
}
nb-select.appearance-outline .select-button {
border-style: var(--select-outline-border-style);
border-width: var(--select-outline-border-width);
}
nb-select.appearance-outline .select-button.top {
border-top-style: var(--select-outline-adjacent-border-style);
border-top-width: var(--select-outline-adjacent-border-width);
}
nb-select.appearance-outline .select-button.bottom {
border-bottom-style: var(--select-outline-adjacent-border-style);
border-bottom-width: var(--select-outline-adjacent-border-width);
}
nb-select.appearance-outline.status-basic .select-button {
background-color: var(--select-outline-basic-background-color);
border-color: var(--select-outline-basic-border-color);
color: var(--select-outline-basic-text-color);
}
nb-select.appearance-outline.status-basic .select-button.placeholder {
color: var(--select-outline-basic-placeholder-text-color);
}
nb-select.appearance-outline.status-basic .select-button nb-icon {
color: var(--select-outline-basic-icon-color);
}
nb-select.appearance-outline.status-basic .select-button:focus {
background-color: var(--select-outline-basic-focus-background-color);
border-color: var(--select-outline-basic-focus-border-color);
}
nb-select.appearance-outline.status-basic .select-button:hover {
background-color: var(--select-outline-basic-hover-background-color);
border-color: var(--select-outline-basic-hover-border-color);
}
nb-select.appearance-outline.status-basic .select-button[disabled] {
color: var(--select-outline-basic-disabled-text-color);
background-color: var(--select-outline-basic-disabled-background-color);
border-color: var(--select-outline-basic-disabled-border-color);
}
nb-select.appearance-outline.status-basic .select-button[disabled] nb-icon {
color: var(--select-outline-basic-disabled-icon-color);
}
nb-select.appearance-outline.status-basic .select-button.bottom, nb-select.appearance-outline.status-basic .select-button.top {
border-color: var(--select-outline-basic-open-border-color);
}
nb-select.appearance-outline.status-basic .select-button.top {
border-top-color: var(--select-outline-basic-adjacent-border-color);
}
nb-select.appearance-outline.status-basic .select-button.bottom {
border-bottom-color: var(--select-outline-basic-adjacent-border-color);
}
nb-select.appearance-outline.status-primary .select-button {
background-color: var(--select-outline-primary-background-color);
border-color: var(--select-outline-primary-border-color);
color: var(--select-outline-primary-text-color);
}
nb-select.appearance-outline.status-primary .select-button.placeholder {
color: var(--select-outline-primary-placeholder-text-color);
}
nb-select.appearance-outline.status-primary .select-button nb-icon {
color: var(--select-outline-primary-icon-color);
}
nb-select.appearance-outline.status-primary .select-button:focus {
background-color: var(--select-outline-primary-focus-background-color);
border-color: var(--select-outline-primary-focus-border-color);
}
nb-select.appearance-outline.status-primary .select-button:hover {
background-color: var(--select-outline-primary-hover-background-color);
border-color: var(--select-outline-primary-hover-border-color);
}
nb-select.appearance-outline.status-primary .select-button[disabled] {
color: var(--select-outline-primary-disabled-text-color);
background-color: var(--select-outline-primary-disabled-background-color);
border-color: var(--select-outline-primary-disabled-border-color);
}
nb-select.appearance-outline.status-primary .select-button[disabled] nb-icon {
color: var(--select-outline-primary-disabled-icon-color);
}
nb-select.appearance-outline.status-primary .select-button.bottom, nb-select.appearance-outline.status-primary .select-button.top {
border-color: var(--select-outline-primary-open-border-color);
}
nb-select.appearance-outline.status-primary .select-button.top {
border-top-color: var(--select-outline-primary-adjacent-border-color);
}
nb-select.appearance-outline.status-primary .select-button.bottom {
border-bottom-color: var(--select-outline-primary-adjacent-border-color);
}
nb-select.appearance-outline.status-success .select-button {
background-color: var(--select-outline-success-background-color);
border-color: var(--select-outline-success-border-color);
color: var(--select-outline-success-text-color);
}
nb-select.appearance-outline.status-success .select-button.placeholder {
color: var(--select-outline-success-placeholder-text-color);
}
nb-select.appearance-outline.status-success .select-button nb-icon {
color: var(--select-outline-success-icon-color);
}
nb-select.appearance-outline.status-success .select-button:focus {
background-color: var(--select-outline-success-focus-background-color);
border-color: var(--select-outline-success-focus-border-color);
}
nb-select.appearance-outline.status-success .select-button:hover {
background-color: var(--select-outline-success-hover-background-color);
border-color: var(--select-outline-success-hover-border-color);
}
nb-select.appearance-outline.status-success .select-button[disabled] {
color: var(--select-outline-success-disabled-text-color);
background-color: var(--select-outline-success-disabled-background-color);
border-color: var(--select-outline-success-disabled-border-color);
}
nb-select.appearance-outline.status-success .select-button[disabled] nb-icon {
color: var(--select-outline-success-disabled-icon-color);
}
nb-select.appearance-outline.status-success .select-button.bottom, nb-select.appearance-outline.status-success .select-button.top {
border-color: var(--select-outline-success-open-border-color);
}
nb-select.appearance-outline.status-success .select-button.top {
border-top-color: var(--select-outline-success-adjacent-border-color);
}
nb-select.appearance-outline.status-success .select-button.bottom {
border-bottom-color: var(--select-outline-success-adjacent-border-color);
}
nb-select.appearance-outline.status-warning .select-button {
background-color: var(--select-outline-warning-background-color);
border-color: var(--select-outline-warning-border-color);
color: var(--select-outline-warning-text-color);
}
nb-select.appearance-outline.status-warning .select-button.placeholder {
color: var(--select-outline-warning-placeholder-text-color);
}
nb-select.appearance-outline.status-warning .select-button nb-icon {
color: var(--select-outline-warning-icon-color);
}
nb-select.appearance-outline.status-warning .select-button:focus {
background-color: var(--select-outline-warning-focus-background-color);
border-color: var(--select-outline-warning-focus-border-color);
}
nb-select.appearance-outline.status-warning .select-button:hover {
background-color: var(--select-outline-warning-hover-background-color);
border-color: var(--select-outline-warning-hover-border-color);
}
nb-select.appearance-outline.status-warning .select-button[disabled] {
color: var(--select-outline-warning-disabled-text-color);
background-color: var(--select-outline-warning-disabled-background-color);
border-color: var(--select-outline-warning-disabled-border-color);
}
nb-select.appearance-outline.status-warning .select-button[disabled] nb-icon {
color: var(--select-outline-warning-disabled-icon-color);
}
nb-select.appearance-outline.status-warning .select-button.bottom, nb-select.appearance-outline.status-warning .select-button.top {
border-color: var(--select-outline-warning-open-border-color);
}
nb-select.appearance-outline.status-warning .select-button.top {
border-top-color: var(--select-outline-warning-adjacent-border-color);
}
nb-select.appearance-outline.status-warning .select-button.bottom {
border-bottom-color: var(--select-outline-warning-adjacent-border-color);
}
nb-select.appearance-outline.status-danger .select-button {
background-color: var(--select-outline-danger-background-color);
border-color: var(--select-outline-danger-border-color);
color: var(--select-outline-danger-text-color);
}
nb-select.appearance-outline.status-danger .select-button.placeholder {
color: var(--select-outline-danger-placeholder-text-color);
}
nb-select.appearance-outline.status-danger .select-button nb-icon {
color: var(--select-outline-danger-icon-color);
}
nb-select.appearance-outline.status-danger .select-button:focus {
background-color: var(--select-outline-danger-focus-background-color);
border-color: var(--select-outline-danger-focus-border-color);
}
nb-select.appearance-outline.status-danger .select-button:hover {
background-color: var(--select-outline-danger-hover-background-color);
border-color: var(--select-outline-danger-hover-border-color);
}
nb-select.appearance-outline.status-danger .select-button[disabled] {
color: var(--select-outline-danger-disabled-text-color);
background-color: var(--select-outline-danger-disabled-background-color);
border-color: var(--select-outline-danger-disabled-border-color);
}
nb-select.appearance-outline.status-danger .select-button[disabled] nb-icon {
color: var(--select-outline-danger-disabled-icon-color);
}
nb-select.appearance-outline.status-danger .select-button.bottom, nb-select.appearance-outline.status-danger .select-button.top {
border-color: var(--select-outline-danger-open-border-color);
}
nb-select.appearance-outline.status-danger .select-button.top {
border-top-color: var(--select-outline-danger-adjacent-border-color);
}
nb-select.appearance-outline.status-danger .select-button.bottom {
border-bottom-color: var(--select-outline-danger-adjacent-border-color);
}
nb-select.appearance-outline.status-info .select-button {
background-color: var(--select-outline-info-background-color);
border-color: var(--select-outline-info-border-color);
color: var(--select-outline-info-text-color);
}
nb-select.appearance-outline.status-info .select-button.placeholder {
color: var(--select-outline-info-placeholder-text-color);
}
nb-select.appearance-outline.status-info .select-button nb-icon {
color: var(--select-outline-info-icon-color);
}
nb-select.appearance-outline.status-info .select-button:focus {
background-color: var(--select-outline-info-focus-background-color);
border-color: var(--select-outline-info-focus-border-color);
}
nb-select.appearance-outline.status-info .select-button:hover {
background-color: var(--select-outline-info-hover-background-color);
border-color: var(--select-outline-info-hover-border-color);
}
nb-select.appearance-outline.status-info .select-button[disabled] {
color: var(--select-outline-info-disabled-text-color);
background-color: var(--select-outline-info-disabled-background-color);
border-color: var(--select-outline-info-disabled-border-color);
}
nb-select.appearance-outline.status-info .select-button[disabled] nb-icon {
color: var(--select-outline-info-disabled-icon-color);
}
nb-select.appearance-outline.status-info .select-button.bottom, nb-select.appearance-outline.status-info .select-button.top {
border-color: var(--select-outline-info-open-border-color);
}
nb-select.appearance-outline.status-info .select-button.top {
border-top-color: var(--select-outline-info-adjacent-border-color);
}
nb-select.appearance-outline.status-info .select-button.bottom {
border-bottom-color: var(--select-outline-info-adjacent-border-color);
}
nb-select.appearance-outline.status-control .select-button {
background-color: var(--select-outline-control-background-color);
border-color: var(--select-outline-control-border-color);
color: var(--select-outline-control-text-color);
}
nb-select.appearance-outline.status-control .select-button.placeholder {
color: var(--select-outline-control-placeholder-text-color);
}
nb-select.appearance-outline.status-control .select-button nb-icon {
color: var(--select-outline-control-icon-color);
}
nb-select.appearance-outline.status-control .select-button:focus {
background-color: var(--select-outline-control-focus-background-color);
border-color: var(--select-outline-control-focus-border-color);
}
nb-select.appearance-outline.status-control .select-button:hover {
background-color: var(--select-outline-control-hover-background-color);
border-color: var(--select-outline-control-hover-border-color);
}
nb-select.appearance-outline.status-control .select-button[disabled] {
color: var(--select-outline-control-disabled-text-color);
background-color: var(--select-outline-control-disabled-background-color);
border-color: var(--select-outline-control-disabled-border-color);
}
nb-select.appearance-outline.status-control .select-button[disabled] nb-icon {
color: var(--select-outline-control-disabled-icon-color);
}
nb-select.appearance-outline.status-control .select-button.bottom, nb-select.appearance-outline.status-control .select-button.top {
border-color: var(--select-outline-control-open-border-color);
}
nb-select.appearance-outline.status-control .select-button.top {
border-top-color: var(--select-outline-control-adjacent-border-color);
}
nb-select.appearance-outline.status-control .select-button.bottom {
border-bottom-color: var(--select-outline-control-adjacent-border-color);
}
nb-select.appearance-outline.size-tiny .select-button {
padding: var(--select-outline-tiny-padding);
}
[dir=ltr] nb-select.appearance-outline.size-tiny .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-outline.size-tiny .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button {
padding-right: var(--form-field-addon-tiny-width);
}
nb-select.appearance-outline.size-small .select-button {
padding: var(--select-outline-small-padding);
}
[dir=ltr] nb-select.appearance-outline.size-small .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-outline.size-small .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button {
padding-left: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button {
padding-right: var(--form-field-addon-small-width);
}
nb-select.appearance-outline.size-medium .select-button {
padding: var(--select-outline-medium-padding);
}
[dir=ltr] nb-select.appearance-outline.size-medium .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-outline.size-medium .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button {
padding-left: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button {
padding-right: var(--form-field-addon-medium-width);
}
nb-select.appearance-outline.size-large .select-button {
padding: var(--select-outline-large-padding);
}
[dir=ltr] nb-select.appearance-outline.size-large .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-outline.size-large .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button {
padding-left: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button {
padding-right: var(--form-field-addon-large-width);
}
nb-select.appearance-outline.size-giant .select-button {
padding: var(--select-outline-giant-padding);
}
[dir=ltr] nb-select.appearance-outline.size-giant .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-outline.size-giant .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button {
padding-left: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button {
padding-right: var(--form-field-addon-giant-width);
}
nb-select.appearance-filled .select-button {
border-style: var(--select-filled-border-style);
border-width: var(--select-filled-border-width);
}
nb-select.appearance-filled.size-tiny .select-button {
padding: var(--select-filled-tiny-padding);
}
[dir=ltr] nb-select.appearance-filled.size-tiny .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-filled.size-tiny .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button {
padding-right: var(--form-field-addon-tiny-width);
}
nb-select.appearance-filled.size-small .select-button {
padding: var(--select-filled-small-padding);
}
[dir=ltr] nb-select.appearance-filled.size-small .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-filled.size-small .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button {
padding-left: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button {
padding-right: var(--form-field-addon-small-width);
}
nb-select.appearance-filled.size-medium .select-button {
padding: var(--select-filled-medium-padding);
}
[dir=ltr] nb-select.appearance-filled.size-medium .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-filled.size-medium .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button {
padding-left: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button {
padding-right: var(--form-field-addon-medium-width);
}
nb-select.appearance-filled.size-large .select-button {
padding: var(--select-filled-large-padding);
}
[dir=ltr] nb-select.appearance-filled.size-large .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-filled.size-large .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button {
padding-left: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button {
padding-right: var(--form-field-addon-large-width);
}
nb-select.appearance-filled.size-giant .select-button {
padding: var(--select-filled-giant-padding);
}
[dir=ltr] nb-select.appearance-filled.size-giant .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-filled.size-giant .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button {
padding-left: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button {
padding-right: var(--form-field-addon-giant-width);
}
nb-select.appearance-filled.status-basic .select-button {
background-color: var(--select-filled-basic-background-color);
border-color: var(--select-filled-basic-border-color);
color: var(--select-filled-basic-text-color);
}
nb-select.appearance-filled.status-basic .select-button.placeholder {
color: var(--select-filled-basic-placeholder-text-color);
}
nb-select.appearance-filled.status-basic .select-button:focus {
background-color: var(--select-filled-basic-focus-background-color);
border-color: var(--select-filled-basic-focus-border-color);
}
nb-select.appearance-filled.status-basic .select-button:hover {
background-color: var(--select-filled-basic-hover-background-color);
border-color: var(--select-filled-basic-hover-border-color);
}
nb-select.appearance-filled.status-basic .select-button[disabled] {
background-color: var(--select-filled-basic-disabled-background-color);
border-color: var(--select-filled-basic-disabled-border-color);
color: var(--select-filled-basic-disabled-text-color);
}
nb-select.appearance-filled.status-basic .select-button[disabled] nb-icon {
color: var(--select-filled-basic-disabled-icon-color);
}
nb-select.appearance-filled.status-basic .select-button nb-icon {
color: var(--select-filled-basic-icon-color);
}
nb-select.appearance-filled.status-primary .select-button {
background-color: var(--select-filled-primary-background-color);
border-color: var(--select-filled-primary-border-color);
color: var(--select-filled-primary-text-color);
}
nb-select.appearance-filled.status-primary .select-button.placeholder {
color: var(--select-filled-primary-placeholder-text-color);
}
nb-select.appearance-filled.status-primary .select-button:focus {
background-color: var(--select-filled-primary-focus-background-color);
border-color: var(--select-filled-primary-focus-border-color);
}
nb-select.appearance-filled.status-primary .select-button:hover {
background-color: var(--select-filled-primary-hover-background-color);
border-color: var(--select-filled-primary-hover-border-color);
}
nb-select.appearance-filled.status-primary .select-button[disabled] {
background-color: var(--select-filled-primary-disabled-background-color);
border-color: var(--select-filled-primary-disabled-border-color);
color: var(--select-filled-primary-disabled-text-color);
}
nb-select.appearance-filled.status-primary .select-button[disabled] nb-icon {
color: var(--select-filled-primary-disabled-icon-color);
}
nb-select.appearance-filled.status-primary .select-button nb-icon {
color: var(--select-filled-primary-icon-color);
}
nb-select.appearance-filled.status-success .select-button {
background-color: var(--select-filled-success-background-color);
border-color: var(--select-filled-success-border-color);
color: var(--select-filled-success-text-color);
}
nb-select.appearance-filled.status-success .select-button.placeholder {
color: var(--select-filled-success-placeholder-text-color);
}
nb-select.appearance-filled.status-success .select-button:focus {
background-color: var(--select-filled-success-focus-background-color);
border-color: var(--select-filled-success-focus-border-color);
}
nb-select.appearance-filled.status-success .select-button:hover {
background-color: var(--select-filled-success-hover-background-color);
border-color: var(--select-filled-success-hover-border-color);
}
nb-select.appearance-filled.status-success .select-button[disabled] {
background-color: var(--select-filled-success-disabled-background-color);
border-color: var(--select-filled-success-disabled-border-color);
color: var(--select-filled-success-disabled-text-color);
}
nb-select.appearance-filled.status-success .select-button[disabled] nb-icon {
color: var(--select-filled-success-disabled-icon-color);
}
nb-select.appearance-filled.status-success .select-button nb-icon {
color: var(--select-filled-success-icon-color);
}
nb-select.appearance-filled.status-warning .select-button {
background-color: var(--select-filled-warning-background-color);
border-color: var(--select-filled-warning-border-color);
color: var(--select-filled-warning-text-color);
}
nb-select.appearance-filled.status-warning .select-button.placeholder {
color: var(--select-filled-warning-placeholder-text-color);
}
nb-select.appearance-filled.status-warning .select-button:focus {
background-color: var(--select-filled-warning-focus-background-color);
border-color: var(--select-filled-warning-focus-border-color);
}
nb-select.appearance-filled.status-warning .select-button:hover {
background-color: var(--select-filled-warning-hover-background-color);
border-color: var(--select-filled-warning-hover-border-color);
}
nb-select.appearance-filled.status-warning .select-button[disabled] {
background-color: var(--select-filled-warning-disabled-background-color);
border-color: var(--select-filled-warning-disabled-border-color);
color: var(--select-filled-warning-disabled-text-color);
}
nb-select.appearance-filled.status-warning .select-button[disabled] nb-icon {
color: var(--select-filled-warning-disabled-icon-color);
}
nb-select.appearance-filled.status-warning .select-button nb-icon {
color: var(--select-filled-warning-icon-color);
}
nb-select.appearance-filled.status-danger .select-button {
background-color: var(--select-filled-danger-background-color);
border-color: var(--select-filled-danger-border-color);
color: var(--select-filled-danger-text-color);
}
nb-select.appearance-filled.status-danger .select-button.placeholder {
color: var(--select-filled-danger-placeholder-text-color);
}
nb-select.appearance-filled.status-danger .select-button:focus {
background-color: var(--select-filled-danger-focus-background-color);
border-color: var(--select-filled-danger-focus-border-color);
}
nb-select.appearance-filled.status-danger .select-button:hover {
background-color: var(--select-filled-danger-hover-background-color);
border-color: var(--select-filled-danger-hover-border-color);
}
nb-select.appearance-filled.status-danger .select-button[disabled] {
background-color: var(--select-filled-danger-disabled-background-color);
border-color: var(--select-filled-danger-disabled-border-color);
color: var(--select-filled-danger-disabled-text-color);
}
nb-select.appearance-filled.status-danger .select-button[disabled] nb-icon {
color: var(--select-filled-danger-disabled-icon-color);
}
nb-select.appearance-filled.status-danger .select-button nb-icon {
color: var(--select-filled-danger-icon-color);
}
nb-select.appearance-filled.status-info .select-button {
background-color: var(--select-filled-info-background-color);
border-color: var(--select-filled-info-border-color);
color: var(--select-filled-info-text-color);
}
nb-select.appearance-filled.status-info .select-button.placeholder {
color: var(--select-filled-info-placeholder-text-color);
}
nb-select.appearance-filled.status-info .select-button:focus {
background-color: var(--select-filled-info-focus-background-color);
border-color: var(--select-filled-info-focus-border-color);
}
nb-select.appearance-filled.status-info .select-button:hover {
background-color: var(--select-filled-info-hover-background-color);
border-color: var(--select-filled-info-hover-border-color);
}
nb-select.appearance-filled.status-info .select-button[disabled] {
background-color: var(--select-filled-info-disabled-background-color);
border-color: var(--select-filled-info-disabled-border-color);
color: var(--select-filled-info-disabled-text-color);
}
nb-select.appearance-filled.status-info .select-button[disabled] nb-icon {
color: var(--select-filled-info-disabled-icon-color);
}
nb-select.appearance-filled.status-info .select-button nb-icon {
color: var(--select-filled-info-icon-color);
}
nb-select.appearance-filled.status-control .select-button {
background-color: var(--select-filled-control-background-color);
border-color: var(--select-filled-control-border-color);
color: var(--select-filled-control-text-color);
}
nb-select.appearance-filled.status-control .select-button.placeholder {
color: var(--select-filled-control-placeholder-text-color);
}
nb-select.appearance-filled.status-control .select-button:focus {
background-color: var(--select-filled-control-focus-background-color);
border-color: var(--select-filled-control-focus-border-color);
}
nb-select.appearance-filled.status-control .select-button:hover {
background-color: var(--select-filled-control-hover-background-color);
border-color: var(--select-filled-control-hover-border-color);
}
nb-select.appearance-filled.status-control .select-button[disabled] {
background-color: var(--select-filled-control-disabled-background-color);
border-color: var(--select-filled-control-disabled-border-color);
color: var(--select-filled-control-disabled-text-color);
}
nb-select.appearance-filled.status-control .select-button[disabled] nb-icon {
color: var(--select-filled-control-disabled-icon-color);
}
nb-select.appearance-filled.status-control .select-button nb-icon {
color: var(--select-filled-control-icon-color);
}
nb-select.appearance-hero .select-button {
border: none;
}
nb-select.appearance-hero.size-tiny .select-button {
padding: var(--select-hero-tiny-padding);
}
[dir=ltr] nb-select.appearance-hero.size-tiny .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-hero.size-tiny .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button {
padding-right: var(--form-field-addon-tiny-width);
}
nb-select.appearance-hero.size-small .select-button {
padding: var(--select-hero-small-padding);
}
[dir=ltr] nb-select.appearance-hero.size-small .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-hero.size-small .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button {
padding-left: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button {
padding-right: var(--form-field-addon-small-width);
}
nb-select.appearance-hero.size-medium .select-button {
padding: var(--select-hero-medium-padding);
}
[dir=ltr] nb-select.appearance-hero.size-medium .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-hero.size-medium .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button {
padding-left: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button {
padding-right: var(--form-field-addon-medium-width);
}
nb-select.appearance-hero.size-large .select-button {
padding: var(--select-hero-large-padding);
}
[dir=ltr] nb-select.appearance-hero.size-large .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-hero.size-large .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button {
padding-left: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button {
padding-right: var(--form-field-addon-large-width);
}
nb-select.appearance-hero.size-giant .select-button {
padding: var(--select-hero-giant-padding);
}
[dir=ltr] nb-select.appearance-hero.size-giant .select-button {
padding-right: var(--select-icon-offset);
}
[dir=rtl] nb-select.appearance-hero.size-giant .select-button {
padding-left: var(--select-icon-offset);
}
[dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button {
padding-left: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button {
padding-right: var(--form-field-addon-giant-width);
}
nb-select.appearance-hero.status-basic .select-button {
background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color));
color: var(--select-hero-basic-text-color);
}
nb-select.appearance-hero.status-basic .select-button.placeholder {
color: var(--select-hero-basic-placeholder-text-color);
}
nb-select.appearance-hero.status-basic .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color));
}
nb-select.appearance-hero.status-basic .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color));
}
nb-select.appearance-hero.status-basic .select-button[disabled] {
color: var(--select-hero-basic-disabled-text-color);
background-color: var(--select-hero-basic-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-basic .select-button[disabled] nb-icon {
color: var(--select-hero-basic-disabled-icon-color);
}
nb-select.appearance-hero.status-basic .select-button nb-icon {
color: var(--select-hero-basic-icon-color);
}
nb-select.appearance-hero.status-primary .select-button {
background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color));
color: var(--select-hero-primary-text-color);
}
nb-select.appearance-hero.status-primary .select-button.placeholder {
color: var(--select-hero-primary-placeholder-text-color);
}
nb-select.appearance-hero.status-primary .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color));
}
nb-select.appearance-hero.status-primary .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color));
}
nb-select.appearance-hero.status-primary .select-button[disabled] {
color: var(--select-hero-primary-disabled-text-color);
background-color: var(--select-hero-primary-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-primary .select-button[disabled] nb-icon {
color: var(--select-hero-primary-disabled-icon-color);
}
nb-select.appearance-hero.status-primary .select-button nb-icon {
color: var(--select-hero-primary-icon-color);
}
nb-select.appearance-hero.status-success .select-button {
background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color));
color: var(--select-hero-success-text-color);
}
nb-select.appearance-hero.status-success .select-button.placeholder {
color: var(--select-hero-success-placeholder-text-color);
}
nb-select.appearance-hero.status-success .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color));
}
nb-select.appearance-hero.status-success .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color));
}
nb-select.appearance-hero.status-success .select-button[disabled] {
color: var(--select-hero-success-disabled-text-color);
background-color: var(--select-hero-success-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-success .select-button[disabled] nb-icon {
color: var(--select-hero-success-disabled-icon-color);
}
nb-select.appearance-hero.status-success .select-button nb-icon {
color: var(--select-hero-success-icon-color);
}
nb-select.appearance-hero.status-warning .select-button {
background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color));
color: var(--select-hero-warning-text-color);
}
nb-select.appearance-hero.status-warning .select-button.placeholder {
color: var(--select-hero-warning-placeholder-text-color);
}
nb-select.appearance-hero.status-warning .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color));
}
nb-select.appearance-hero.status-warning .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color));
}
nb-select.appearance-hero.status-warning .select-button[disabled] {
color: var(--select-hero-warning-disabled-text-color);
background-color: var(--select-hero-warning-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-warning .select-button[disabled] nb-icon {
color: var(--select-hero-warning-disabled-icon-color);
}
nb-select.appearance-hero.status-warning .select-button nb-icon {
color: var(--select-hero-warning-icon-color);
}
nb-select.appearance-hero.status-danger .select-button {
background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color));
color: var(--select-hero-danger-text-color);
}
nb-select.appearance-hero.status-danger .select-button.placeholder {
color: var(--select-hero-danger-placeholder-text-color);
}
nb-select.appearance-hero.status-danger .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color));
}
nb-select.appearance-hero.status-danger .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color));
}
nb-select.appearance-hero.status-danger .select-button[disabled] {
color: var(--select-hero-danger-disabled-text-color);
background-color: var(--select-hero-danger-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-danger .select-button[disabled] nb-icon {
color: var(--select-hero-danger-disabled-icon-color);
}
nb-select.appearance-hero.status-danger .select-button nb-icon {
color: var(--select-hero-danger-icon-color);
}
nb-select.appearance-hero.status-info .select-button {
background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color));
color: var(--select-hero-info-text-color);
}
nb-select.appearance-hero.status-info .select-button.placeholder {
color: var(--select-hero-info-placeholder-text-color);
}
nb-select.appearance-hero.status-info .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color));
}
nb-select.appearance-hero.status-info .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color));
}
nb-select.appearance-hero.status-info .select-button[disabled] {
color: var(--select-hero-info-disabled-text-color);
background-color: var(--select-hero-info-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-info .select-button[disabled] nb-icon {
color: var(--select-hero-info-disabled-icon-color);
}
nb-select.appearance-hero.status-info .select-button nb-icon {
color: var(--select-hero-info-icon-color);
}
nb-select.appearance-hero.status-control .select-button {
background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color));
color: var(--select-hero-control-text-color);
}
nb-select.appearance-hero.status-control .select-button.placeholder {
color: var(--select-hero-control-placeholder-text-color);
}
nb-select.appearance-hero.status-control .select-button:focus {
background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color));
}
nb-select.appearance-hero.status-control .select-button:hover {
background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color));
}
nb-select.appearance-hero.status-control .select-button[disabled] {
color: var(--select-hero-control-disabled-text-color);
background-color: var(--select-hero-control-disabled-background-color);
background-image: none;
}
nb-select.appearance-hero.status-control .select-button[disabled] nb-icon {
color: var(--select-hero-control-disabled-icon-color);
}
nb-select.appearance-hero.status-control .select-button nb-icon {
color: var(--select-hero-control-icon-color);
}
nb-form-field nb-select {
width: 100%;
}
nb-option-list {
background-color: var(--option-list-background-color);
border-color: var(--option-list-border-color);
border-style: var(--option-list-border-style);
border-width: var(--option-list-border-width);
border-radius: var(--option-list-border-radius);
box-shadow: var(--option-list-shadow);
overflow: hidden;
}
nb-option-list .option-list {
height: 100%;
max-height: var(--option-list-max-height);
margin: 0;
padding: 0;
overflow: auto;
}
nb-option-list.position-top {
border-bottom: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color);
}
nb-option-list.position-bottom {
border-top: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color);
}
nb-option-group {
color: var(--option-group-text-color);
font-family: var(--option-text-font-family);
}
nb-option-list.size-tiny nb-option-group {
font-size: var(--option-tiny-text-font-size);
font-weight: var(--option-tiny-text-font-weight);
line-height: var(--option-tiny-text-line-height);
}
nb-option-list.size-tiny nb-option-group .option-group-title {
padding: var(--option-tiny-padding);
}
nb-option-list.size-tiny nb-option-group nb-option {
padding-left: var(--option-group-tiny-start-padding);
}
nb-option-list.size-small nb-option-group {
font-size: var(--option-small-text-font-size);
font-weight: var(--option-small-text-font-weight);
line-height: var(--option-small-text-line-height);
}
nb-option-list.size-small nb-option-group .option-group-title {
padding: var(--option-small-padding);
}
nb-option-list.size-small nb-option-group nb-option {
padding-left: var(--option-group-small-start-padding);
}
nb-option-list.size-medium nb-option-group {
font-size: var(--option-medium-text-font-size);
font-weight: var(--option-medium-text-font-weight);
line-height: var(--option-medium-text-line-height);
}
nb-option-list.size-medium nb-option-group .option-group-title {
padding: var(--option-medium-padding);
}
nb-option-list.size-medium nb-option-group nb-option {
padding-left: var(--option-group-medium-start-padding);
}
nb-option-list.size-large nb-option-group {
font-size: var(--option-large-text-font-size);
font-weight: var(--option-large-text-font-weight);
line-height: var(--option-large-text-line-height);
}
nb-option-list.size-large nb-option-group .option-group-title {
padding: var(--option-large-padding);
}
nb-option-list.size-large nb-option-group nb-option {
padding-left: var(--option-group-large-start-padding);
}
nb-option-list.size-giant nb-option-group {
font-size: var(--option-giant-text-font-size);
font-weight: var(--option-giant-text-font-weight);
line-height: var(--option-giant-text-line-height);
}
nb-option-list.size-giant nb-option-group .option-group-title {
padding: var(--option-giant-padding);
}
nb-option-list.size-giant nb-option-group nb-option {
padding-left: var(--option-group-giant-start-padding);
}
nb-option {
background-color: var(--option-background-color);
color: var(--option-text-color);
font-family: var(--option-text-font-family);
}
nb-option.active {
background-color: var(--option-active-background-color);
color: var(--option-active-text-color);
}
nb-option.selected {
background-color: var(--option-selected-background-color);
color: var(--option-selected-text-color);
}
nb-option:focus {
background-color: var(--option-focus-background-color);
color: var(--option-focus-text-color);
outline: none;
}
nb-option:focus.selected {
background-color: var(--option-selected-focus-background-color);
color: var(--option-selected-focus-text-color);
}
nb-option:hover {
background-color: var(--option-hover-background-color);
color: var(--option-hover-text-color);
}
nb-option:hover.selected {
background-color: var(--option-selected-hover-background-color);
color: var(--option-selected-hover-text-color);
}
nb-option.multiple.selected {
background-color: var(--option-background-color);
color: var(--option-text-color);
}
nb-option.multiple:focus {
background-color: var(--option-focus-background-color);
color: var(--option-focus-text-color);
}
nb-option-list.size-tiny nb-option {
font-size: var(--option-tiny-text-font-size);
font-weight: var(--option-tiny-text-font-weight);
line-height: var(--option-tiny-text-line-height);
padding: var(--option-tiny-padding);
}
nb-option-list.size-small nb-option {
font-size: var(--option-small-text-font-size);
font-weight: var(--option-small-text-font-weight);
line-height: var(--option-small-text-line-height);
padding: var(--option-small-padding);
}
nb-option-list.size-medium nb-option {
font-size: var(--option-medium-text-font-size);
font-weight: var(--option-medium-text-font-weight);
line-height: var(--option-medium-text-line-height);
padding: var(--option-medium-padding);
}
nb-option-list.size-large nb-option {
font-size: var(--option-large-text-font-size);
font-weight: var(--option-large-text-font-weight);
line-height: var(--option-large-text-line-height);
padding: var(--option-large-padding);
}
nb-option-list.size-giant nb-option {
font-size: var(--option-giant-text-font-size);
font-weight: var(--option-giant-text-font-weight);
line-height: var(--option-giant-text-line-height);
padding: var(--option-giant-padding);
}
nb-option,
nb-option-group {
-webkit-user-select: none;
user-select: none;
}
nb-option[disabled],
nb-option-group[disabled] {
background-color: var(--option-disabled-background-color);
color: var(--option-disabled-text-color);
}
nb-toast {
border-style: var(--toastr-border-style);
border-width: var(--toastr-border-width);
border-radius: var(--toastr-border-radius);
padding: var(--toastr-padding);
box-shadow: var(--toastr-shadow);
}
nb-toast .title {
font-family: var(--toastr-title-text-font-family);
font-size: var(--toastr-title-text-font-size);
font-weight: var(--toastr-title-text-font-weight);
line-height: var(--toastr-title-text-line-height);
}
nb-toast .message {
font-family: var(--toastr-text-font-family);
font-size: var(--toastr-text-font-size);
font-weight: var(--toastr-text-font-weight);
line-height: var(--toastr-text-line-height);
}
nb-toast .icon-container {
border-radius: var(--toastr-border-radius);
min-width: 2.5rem;
min-height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
}
[dir=ltr] nb-toast .icon-container {
margin-right: 1.25rem;
}
[dir=rtl] nb-toast .icon-container {
margin-left: 1.25rem;
}
nb-toast .icon-container nb-icon {
font-size: 1.5rem;
}
nb-toast.status-basic {
background: var(--toastr-basic-background-color);
border-color: var(--toastr-basic-border-color);
color: var(--toastr-basic-text-color);
}
nb-toast.status-basic .title {
color: var(--toastr-basic-text-color);
}
nb-toast.status-basic.destroy-by-click:hover {
background: var(--toastr-destroyable-basic-hover-background-color);
border-color: var(--toastr-destroyable-basic-hover-border-color);
}
nb-toast.status-basic .icon-container {
background: var(--toastr-icon-basic-background-color);
color: var(--toastr-icon-basic-color);
}
nb-toast.status-primary {
background: var(--toastr-primary-background-color);
border-color: var(--toastr-primary-border-color);
color: var(--toastr-primary-text-color);
}
nb-toast.status-primary .title {
color: var(--toastr-primary-text-color);
}
nb-toast.status-primary.destroy-by-click:hover {
background: var(--toastr-destroyable-primary-hover-background-color);
border-color: var(--toastr-destroyable-primary-hover-border-color);
}
nb-toast.status-primary .icon-container {
background: var(--toastr-icon-primary-background-color);
color: var(--toastr-icon-primary-color);
}
nb-toast.status-success {
background: var(--toastr-success-background-color);
border-color: var(--toastr-success-border-color);
color: var(--toastr-success-text-color);
}
nb-toast.status-success .title {
color: var(--toastr-success-text-color);
}
nb-toast.status-success.destroy-by-click:hover {
background: var(--toastr-destroyable-success-hover-background-color);
border-color: var(--toastr-destroyable-success-hover-border-color);
}
nb-toast.status-success .icon-container {
background: var(--toastr-icon-success-background-color);
color: var(--toastr-icon-success-color);
}
nb-toast.status-warning {
background: var(--toastr-warning-background-color);
border-color: var(--toastr-warning-border-color);
color: var(--toastr-warning-text-color);
}
nb-toast.status-warning .title {
color: var(--toastr-warning-text-color);
}
nb-toast.status-warning.destroy-by-click:hover {
background: var(--toastr-destroyable-warning-hover-background-color);
border-color: var(--toastr-destroyable-warning-hover-border-color);
}
nb-toast.status-warning .icon-container {
background: var(--toastr-icon-warning-background-color);
color: var(--toastr-icon-warning-color);
}
nb-toast.status-danger {
background: var(--toastr-danger-background-color);
border-color: var(--toastr-danger-border-color);
color: var(--toastr-danger-text-color);
}
nb-toast.status-danger .title {
color: var(--toastr-danger-text-color);
}
nb-toast.status-danger.destroy-by-click:hover {
background: var(--toastr-destroyable-danger-hover-background-color);
border-color: var(--toastr-destroyable-danger-hover-border-color);
}
nb-toast.status-danger .icon-container {
background: var(--toastr-icon-danger-background-color);
color: var(--toastr-icon-danger-color);
}
nb-toast.status-info {
background: var(--toastr-info-background-color);
border-color: var(--toastr-info-border-color);
color: var(--toastr-info-text-color);
}
nb-toast.status-info .title {
color: var(--toastr-info-text-color);
}
nb-toast.status-info.destroy-by-click:hover {
background: var(--toastr-destroyable-info-hover-background-color);
border-color: var(--toastr-destroyable-info-hover-border-color);
}
nb-toast.status-info .icon-container {
background: var(--toastr-icon-info-background-color);
color: var(--toastr-icon-info-color);
}
nb-toast.status-control {
background: var(--toastr-control-background-color);
border-color: var(--toastr-control-border-color);
color: var(--toastr-control-text-color);
}
nb-toast.status-control .title {
color: var(--toastr-control-text-color);
}
nb-toast.status-control.destroy-by-click:hover {
background: var(--toastr-destroyable-control-hover-background-color);
border-color: var(--toastr-destroyable-control-hover-border-color);
}
nb-toast.status-control .icon-container {
background: var(--toastr-icon-control-background-color);
color: var(--toastr-icon-control-color);
}
.toastr-overlay-container {
z-index: 1041;
}
nb-tooltip {
box-shadow: var(--tooltip-shadow);
background: var(--tooltip-background-color);
border: var(--tooltip-border-width) var(--tooltip-border-style) var(--tooltip-border-color);
border-radius: var(--tooltip-border-radius);
padding: var(--tooltip-padding);
max-width: var(--tooltip-max-width);
}
nb-tooltip nb-icon:only-child {
height: var(--tooltip-icon-height);
width: var(--tooltip-icon-width);
}
nb-tooltip nb-icon:not(:only-child) {
height: var(--tooltip-text-font-size);
width: var(--tooltip-text-font-size);
}
nb-tooltip .content {
color: var(--tooltip-text-color);
font-family: var(--tooltip-text-font-family);
font-size: var(--tooltip-text-font-size);
font-weight: var(--tooltip-text-font-weight);
line-height: var(--tooltip-text-line-height);
}
nb-tooltip .arrow {
border-bottom: 6px var(--tooltip-border-style) var(--tooltip-background-color);
}
nb-tooltip.status-basic {
background: var(--tooltip-basic-background-color);
border-color: var(--tooltip-basic-border-color);
}
nb-tooltip.status-basic .arrow {
border-bottom-color: var(--tooltip-basic-background-color);
}
nb-tooltip.status-basic .content {
color: var(--tooltip-basic-text-color);
}
nb-tooltip.status-primary {
background: var(--tooltip-primary-background-color);
border-color: var(--tooltip-primary-border-color);
}
nb-tooltip.status-primary .arrow {
border-bottom-color: var(--tooltip-primary-background-color);
}
nb-tooltip.status-primary .content {
color: var(--tooltip-primary-text-color);
}
nb-tooltip.status-success {
background: var(--tooltip-success-background-color);
border-color: var(--tooltip-success-border-color);
}
nb-tooltip.status-success .arrow {
border-bottom-color: var(--tooltip-success-background-color);
}
nb-tooltip.status-success .content {
color: var(--tooltip-success-text-color);
}
nb-tooltip.status-warning {
background: var(--tooltip-warning-background-color);
border-color: var(--tooltip-warning-border-color);
}
nb-tooltip.status-warning .arrow {
border-bottom-color: var(--tooltip-warning-background-color);
}
nb-tooltip.status-warning .content {
color: var(--tooltip-warning-text-color);
}
nb-tooltip.status-danger {
background: var(--tooltip-danger-background-color);
border-color: var(--tooltip-danger-border-color);
}
nb-tooltip.status-danger .arrow {
border-bottom-color: var(--tooltip-danger-background-color);
}
nb-tooltip.status-danger .content {
color: var(--tooltip-danger-text-color);
}
nb-tooltip.status-info {
background: var(--tooltip-info-background-color);
border-color: var(--tooltip-info-border-color);
}
nb-tooltip.status-info .arrow {
border-bottom-color: var(--tooltip-info-background-color);
}
nb-tooltip.status-info .content {
color: var(--tooltip-info-text-color);
}
nb-tooltip.status-control {
background: var(--tooltip-control-background-color);
border-color: var(--tooltip-control-border-color);
}
nb-tooltip.status-control .arrow {
border-bottom-color: var(--tooltip-control-background-color);
}
nb-tooltip.status-control .content {
color: var(--tooltip-control-text-color);
}
nb-datepicker-container nb-card {
border-color: var(--datepicker-border-color);
border-style: var(--datepicker-border-style);
border-width: var(--datepicker-border-width);
border-radius: var(--datepicker-border-radius);
background: var(--datepicker-background-color);
box-shadow: var(--datepicker-shadow);
}
nb-calendar-with-time .nb-timepicker-container,
nb-calendar-with-time nb-base-calendar nb-card {
border: none;
}
nb-calendar-with-time .column-header {
border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color);
border-radius: 0;
}
nb-calendar-with-time .timepicker-section.size-large nb-list-item {
height: var(--calendar-day-cell-large-height);
}
nb-calendar-with-time .timepicker-section.size-large .header-cell {
height: var(--calendar-weekday-large-height);
}
[dir=ltr] nb-calendar-with-time .timepicker-section {
border-left: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color);
}
[dir=rtl] nb-calendar-with-time .timepicker-section {
border-right: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color);
}
nb-calendar-with-time .timepicker-single-column-width {
width: var(--timepicker-single-column-width);
}
nb-calendar-with-time .timepicker-multiple-column-width {
width: var(--timepicker-multiple-column-width);
}
nb-calendar-with-time .picker-title {
height: var(--timepicker-title-height);
padding: var(--timepicker-title-padding);
}
nb-radio .outer-circle,
nb-radio .inner-circle {
height: var(--radio-height);
width: var(--radio-width);
}
nb-radio .outer-circle {
border-style: var(--radio-border-style);
border-width: var(--radio-border-width);
}
nb-radio .native-input:enabled:focus + .outer-circle {
box-shadow: 0 0 0 var(--radio-outline-width) var(--radio-outline-color);
}
nb-radio.status-basic .native-input:enabled + .outer-circle {
background-color: var(--radio-basic-background-color);
border-color: var(--radio-basic-border-color);
}
nb-radio.status-basic .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-basic-checked-background-color);
border-color: var(--radio-basic-checked-border-color);
}
nb-radio.status-basic .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-basic-inner-circle-color);
}
nb-radio.status-basic .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-basic-focus-background-color);
border-color: var(--radio-basic-focus-border-color);
}
nb-radio.status-basic .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-basic-focus-checked-background-color);
border-color: var(--radio-basic-focus-checked-border-color);
}
nb-radio.status-basic .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-basic-focus-inner-circle-color);
}
nb-radio.status-basic label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-basic-hover-background-color);
border-color: var(--radio-basic-hover-border-color);
}
nb-radio.status-basic label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-basic-hover-checked-background-color);
border-color: var(--radio-basic-hover-checked-border-color);
}
nb-radio.status-basic label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-basic-hover-inner-circle-color);
}
nb-radio.status-basic label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-basic-active-background-color);
border-color: var(--radio-basic-active-border-color);
}
nb-radio.status-basic label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-basic-active-checked-background-color);
border-color: var(--radio-basic-active-checked-border-color);
}
nb-radio.status-basic label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-basic-active-inner-circle-color);
}
nb-radio.status-basic .text {
color: var(--radio-basic-text-color);
}
nb-radio.status-basic .native-input:disabled + .outer-circle {
background-color: var(--radio-basic-disabled-background-color);
border-color: var(--radio-basic-disabled-border-color);
}
nb-radio.status-basic .native-input:disabled ~ .text {
color: var(--radio-basic-disabled-text-color);
}
nb-radio.status-basic .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-basic-disabled-checked-background-color);
border-color: var(--radio-basic-disabled-checked-border-color);
}
nb-radio.status-basic .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-basic-disabled-checked-inner-circle-color);
}
nb-radio.status-primary .native-input:enabled + .outer-circle {
background-color: var(--radio-primary-background-color);
border-color: var(--radio-primary-border-color);
}
nb-radio.status-primary .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-primary-checked-background-color);
border-color: var(--radio-primary-checked-border-color);
}
nb-radio.status-primary .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-primary-inner-circle-color);
}
nb-radio.status-primary .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-primary-focus-background-color);
border-color: var(--radio-primary-focus-border-color);
}
nb-radio.status-primary .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-primary-focus-checked-background-color);
border-color: var(--radio-primary-focus-checked-border-color);
}
nb-radio.status-primary .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-primary-focus-inner-circle-color);
}
nb-radio.status-primary label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-primary-hover-background-color);
border-color: var(--radio-primary-hover-border-color);
}
nb-radio.status-primary label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-primary-hover-checked-background-color);
border-color: var(--radio-primary-hover-checked-border-color);
}
nb-radio.status-primary label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-primary-hover-inner-circle-color);
}
nb-radio.status-primary label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-primary-active-background-color);
border-color: var(--radio-primary-active-border-color);
}
nb-radio.status-primary label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-primary-active-checked-background-color);
border-color: var(--radio-primary-active-checked-border-color);
}
nb-radio.status-primary label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-primary-active-inner-circle-color);
}
nb-radio.status-primary .text {
color: var(--radio-primary-text-color);
}
nb-radio.status-primary .native-input:disabled + .outer-circle {
background-color: var(--radio-primary-disabled-background-color);
border-color: var(--radio-primary-disabled-border-color);
}
nb-radio.status-primary .native-input:disabled ~ .text {
color: var(--radio-primary-disabled-text-color);
}
nb-radio.status-primary .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-primary-disabled-checked-background-color);
border-color: var(--radio-primary-disabled-checked-border-color);
}
nb-radio.status-primary .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-primary-disabled-checked-inner-circle-color);
}
nb-radio.status-success .native-input:enabled + .outer-circle {
background-color: var(--radio-success-background-color);
border-color: var(--radio-success-border-color);
}
nb-radio.status-success .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-success-checked-background-color);
border-color: var(--radio-success-checked-border-color);
}
nb-radio.status-success .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-success-inner-circle-color);
}
nb-radio.status-success .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-success-focus-background-color);
border-color: var(--radio-success-focus-border-color);
}
nb-radio.status-success .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-success-focus-checked-background-color);
border-color: var(--radio-success-focus-checked-border-color);
}
nb-radio.status-success .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-success-focus-inner-circle-color);
}
nb-radio.status-success label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-success-hover-background-color);
border-color: var(--radio-success-hover-border-color);
}
nb-radio.status-success label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-success-hover-checked-background-color);
border-color: var(--radio-success-hover-checked-border-color);
}
nb-radio.status-success label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-success-hover-inner-circle-color);
}
nb-radio.status-success label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-success-active-background-color);
border-color: var(--radio-success-active-border-color);
}
nb-radio.status-success label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-success-active-checked-background-color);
border-color: var(--radio-success-active-checked-border-color);
}
nb-radio.status-success label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-success-active-inner-circle-color);
}
nb-radio.status-success .text {
color: var(--radio-success-text-color);
}
nb-radio.status-success .native-input:disabled + .outer-circle {
background-color: var(--radio-success-disabled-background-color);
border-color: var(--radio-success-disabled-border-color);
}
nb-radio.status-success .native-input:disabled ~ .text {
color: var(--radio-success-disabled-text-color);
}
nb-radio.status-success .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-success-disabled-checked-background-color);
border-color: var(--radio-success-disabled-checked-border-color);
}
nb-radio.status-success .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-success-disabled-checked-inner-circle-color);
}
nb-radio.status-warning .native-input:enabled + .outer-circle {
background-color: var(--radio-warning-background-color);
border-color: var(--radio-warning-border-color);
}
nb-radio.status-warning .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-warning-checked-background-color);
border-color: var(--radio-warning-checked-border-color);
}
nb-radio.status-warning .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-warning-inner-circle-color);
}
nb-radio.status-warning .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-warning-focus-background-color);
border-color: var(--radio-warning-focus-border-color);
}
nb-radio.status-warning .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-warning-focus-checked-background-color);
border-color: var(--radio-warning-focus-checked-border-color);
}
nb-radio.status-warning .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-warning-focus-inner-circle-color);
}
nb-radio.status-warning label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-warning-hover-background-color);
border-color: var(--radio-warning-hover-border-color);
}
nb-radio.status-warning label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-warning-hover-checked-background-color);
border-color: var(--radio-warning-hover-checked-border-color);
}
nb-radio.status-warning label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-warning-hover-inner-circle-color);
}
nb-radio.status-warning label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-warning-active-background-color);
border-color: var(--radio-warning-active-border-color);
}
nb-radio.status-warning label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-warning-active-checked-background-color);
border-color: var(--radio-warning-active-checked-border-color);
}
nb-radio.status-warning label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-warning-active-inner-circle-color);
}
nb-radio.status-warning .text {
color: var(--radio-warning-text-color);
}
nb-radio.status-warning .native-input:disabled + .outer-circle {
background-color: var(--radio-warning-disabled-background-color);
border-color: var(--radio-warning-disabled-border-color);
}
nb-radio.status-warning .native-input:disabled ~ .text {
color: var(--radio-warning-disabled-text-color);
}
nb-radio.status-warning .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-warning-disabled-checked-background-color);
border-color: var(--radio-warning-disabled-checked-border-color);
}
nb-radio.status-warning .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-warning-disabled-checked-inner-circle-color);
}
nb-radio.status-danger .native-input:enabled + .outer-circle {
background-color: var(--radio-danger-background-color);
border-color: var(--radio-danger-border-color);
}
nb-radio.status-danger .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-danger-checked-background-color);
border-color: var(--radio-danger-checked-border-color);
}
nb-radio.status-danger .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-danger-inner-circle-color);
}
nb-radio.status-danger .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-danger-focus-background-color);
border-color: var(--radio-danger-focus-border-color);
}
nb-radio.status-danger .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-danger-focus-checked-background-color);
border-color: var(--radio-danger-focus-checked-border-color);
}
nb-radio.status-danger .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-danger-focus-inner-circle-color);
}
nb-radio.status-danger label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-danger-hover-background-color);
border-color: var(--radio-danger-hover-border-color);
}
nb-radio.status-danger label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-danger-hover-checked-background-color);
border-color: var(--radio-danger-hover-checked-border-color);
}
nb-radio.status-danger label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-danger-hover-inner-circle-color);
}
nb-radio.status-danger label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-danger-active-background-color);
border-color: var(--radio-danger-active-border-color);
}
nb-radio.status-danger label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-danger-active-checked-background-color);
border-color: var(--radio-danger-active-checked-border-color);
}
nb-radio.status-danger label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-danger-active-inner-circle-color);
}
nb-radio.status-danger .text {
color: var(--radio-danger-text-color);
}
nb-radio.status-danger .native-input:disabled + .outer-circle {
background-color: var(--radio-danger-disabled-background-color);
border-color: var(--radio-danger-disabled-border-color);
}
nb-radio.status-danger .native-input:disabled ~ .text {
color: var(--radio-danger-disabled-text-color);
}
nb-radio.status-danger .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-danger-disabled-checked-background-color);
border-color: var(--radio-danger-disabled-checked-border-color);
}
nb-radio.status-danger .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-danger-disabled-checked-inner-circle-color);
}
nb-radio.status-info .native-input:enabled + .outer-circle {
background-color: var(--radio-info-background-color);
border-color: var(--radio-info-border-color);
}
nb-radio.status-info .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-info-checked-background-color);
border-color: var(--radio-info-checked-border-color);
}
nb-radio.status-info .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-info-inner-circle-color);
}
nb-radio.status-info .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-info-focus-background-color);
border-color: var(--radio-info-focus-border-color);
}
nb-radio.status-info .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-info-focus-checked-background-color);
border-color: var(--radio-info-focus-checked-border-color);
}
nb-radio.status-info .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-info-focus-inner-circle-color);
}
nb-radio.status-info label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-info-hover-background-color);
border-color: var(--radio-info-hover-border-color);
}
nb-radio.status-info label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-info-hover-checked-background-color);
border-color: var(--radio-info-hover-checked-border-color);
}
nb-radio.status-info label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-info-hover-inner-circle-color);
}
nb-radio.status-info label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-info-active-background-color);
border-color: var(--radio-info-active-border-color);
}
nb-radio.status-info label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-info-active-checked-background-color);
border-color: var(--radio-info-active-checked-border-color);
}
nb-radio.status-info label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-info-active-inner-circle-color);
}
nb-radio.status-info .text {
color: var(--radio-info-text-color);
}
nb-radio.status-info .native-input:disabled + .outer-circle {
background-color: var(--radio-info-disabled-background-color);
border-color: var(--radio-info-disabled-border-color);
}
nb-radio.status-info .native-input:disabled ~ .text {
color: var(--radio-info-disabled-text-color);
}
nb-radio.status-info .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-info-disabled-checked-background-color);
border-color: var(--radio-info-disabled-checked-border-color);
}
nb-radio.status-info .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-info-disabled-checked-inner-circle-color);
}
nb-radio.status-control .native-input:enabled + .outer-circle {
background-color: var(--radio-control-background-color);
border-color: var(--radio-control-border-color);
}
nb-radio.status-control .native-input:enabled:checked + .outer-circle {
background-color: var(--radio-control-checked-background-color);
border-color: var(--radio-control-checked-border-color);
}
nb-radio.status-control .native-input:enabled:checked ~ .inner-circle {
background-color: var(--radio-control-inner-circle-color);
}
nb-radio.status-control .native-input:enabled:focus + .outer-circle {
background-color: var(--radio-control-focus-background-color);
border-color: var(--radio-control-focus-border-color);
}
nb-radio.status-control .native-input:enabled:checked:focus + .outer-circle {
background-color: var(--radio-control-focus-checked-background-color);
border-color: var(--radio-control-focus-checked-border-color);
}
nb-radio.status-control .native-input:enabled:checked:focus ~ .inner-circle {
background-color: var(--radio-control-focus-inner-circle-color);
}
nb-radio.status-control label:hover .native-input:enabled + .outer-circle {
background-color: var(--radio-control-hover-background-color);
border-color: var(--radio-control-hover-border-color);
}
nb-radio.status-control label:hover .native-input:checked:enabled + .outer-circle {
background-color: var(--radio-control-hover-checked-background-color);
border-color: var(--radio-control-hover-checked-border-color);
}
nb-radio.status-control label:hover .native-input:checked:enabled ~ .inner-circle {
background-color: var(--radio-control-hover-inner-circle-color);
}
nb-radio.status-control label .native-input:enabled:active + .outer-circle {
background-color: var(--radio-control-active-background-color);
border-color: var(--radio-control-active-border-color);
}
nb-radio.status-control label .native-input:enabled:checked:active + .outer-circle {
background-color: var(--radio-control-active-checked-background-color);
border-color: var(--radio-control-active-checked-border-color);
}
nb-radio.status-control label .native-input:enabled:checked:active ~ .inner-circle {
background-color: var(--radio-control-active-inner-circle-color);
}
nb-radio.status-control .text {
color: var(--radio-control-text-color);
}
nb-radio.status-control .native-input:disabled + .outer-circle {
background-color: var(--radio-control-disabled-background-color);
border-color: var(--radio-control-disabled-border-color);
}
nb-radio.status-control .native-input:disabled ~ .text {
color: var(--radio-control-disabled-text-color);
}
nb-radio.status-control .native-input:disabled:checked + .outer-circle {
background-color: var(--radio-control-disabled-checked-background-color);
border-color: var(--radio-control-disabled-checked-border-color);
}
nb-radio.status-control .native-input:disabled:checked ~ .inner-circle {
background-color: var(--radio-control-disabled-checked-inner-circle-color);
}
nb-radio .text {
font-family: var(--radio-text-font-family);
font-size: var(--radio-text-font-size);
font-weight: var(--radio-text-font-weight);
line-height: var(--radio-text-line-height);
}
[dir=ltr] nb-radio .text {
margin-left: var(--radio-width);
}
[dir=rtl] nb-radio .text {
margin-right: var(--radio-width);
}
.nb-tree-grid-header-cell,
.nb-tree-grid-cell,
.nb-tree-grid-footer-cell {
height: var(--tree-grid-row-min-height);
padding: var(--tree-grid-cell-padding);
border: var(--tree-grid-cell-border-width) var(--tree-grid-cell-border-style) var(--tree-grid-cell-border-color);
}
.nb-tree-grid-header-row {
background: var(--tree-grid-header-background-color);
color: var(--tree-grid-header-text-color);
font-family: var(--tree-grid-header-text-font-family);
font-size: var(--tree-grid-header-text-font-size);
font-weight: var(--tree-grid-header-text-font-weight);
line-height: var(--tree-grid-header-text-line-height);
}
.nb-tree-grid-footer-row {
background: var(--tree-grid-footer-background-color);
color: var(--tree-grid-footer-text-color);
font-family: var(--tree-grid-footer-text-font-family);
font-size: var(--tree-grid-footer-text-font-size);
font-weight: var(--tree-grid-footer-text-font-weight);
line-height: var(--tree-grid-footer-text-line-height);
}
.nb-tree-grid-row {
background: var(--tree-grid-row-background-color);
color: var(--tree-grid-row-text-color);
font-family: var(--tree-grid-row-text-font-family);
font-size: var(--tree-grid-row-text-font-size);
font-weight: var(--tree-grid-row-text-font-weight);
line-height: var(--tree-grid-row-text-line-height);
}
.nb-tree-grid-row:hover {
background: var(--tree-grid-row-hover-background-color);
}
.nb-tree-grid-row:nth-child(2n):not(:hover) {
background-color: var(--tree-grid-row-even-background-color);
}
.nb-tree-grid-header-cell button {
vertical-align: middle;
}
nb-tree-grid-row-toggle nb-icon, nb-sort-icon nb-icon {
font-size: inherit;
vertical-align: middle;
color: currentColor;
}
.nb-tree-grid-header-change-sort-button {
background: var(--tree-grid-sort-header-button-background-color);
border: var(--tree-grid-sort-header-button-border);
padding: var(--tree-grid-sort-header-button-padding);
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
line-height: inherit;
}
nb-icon {
font-size: var(--icon-font-size);
line-height: var(--icon-line-height);
width: var(--icon-width);
height: var(--icon-height);
}
nb-icon svg {
vertical-align: var(--icon-svg-vertical-align);
}
nb-icon.status-basic {
color: var(--icon-basic-color);
}
nb-icon.status-primary {
color: var(--icon-primary-color);
}
nb-icon.status-success {
color: var(--icon-success-color);
}
nb-icon.status-warning {
color: var(--icon-warning-color);
}
nb-icon.status-danger {
color: var(--icon-danger-color);
}
nb-icon.status-info {
color: var(--icon-info-color);
}
nb-icon.status-control {
color: var(--icon-control-color);
}
.nb-form-control-container {
max-width: inherit;
}
.nb-form-field-addon {
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.nb-form-field-addon-disabled {
color: var(--form-field-addon-disabled-text-color);
}
nb-form-field.nb-transition .nb-form-field-addon {
transition-duration: 0.15s;
transition-property: color;
transition-timing-function: ease-in;
}
.nb-form-field-addon-basic {
color: var(--form-field-addon-basic-text-color);
}
.nb-form-field-addon-basic-highlight {
color: var(--form-field-addon-basic-highlight-text-color);
}
.nb-form-field-addon-primary {
color: var(--form-field-addon-primary-text-color);
}
.nb-form-field-addon-primary-highlight {
color: var(--form-field-addon-primary-highlight-text-color);
}
.nb-form-field-addon-success {
color: var(--form-field-addon-success-text-color);
}
.nb-form-field-addon-success-highlight {
color: var(--form-field-addon-success-highlight-text-color);
}
.nb-form-field-addon-warning {
color: var(--form-field-addon-warning-text-color);
}
.nb-form-field-addon-warning-highlight {
color: var(--form-field-addon-warning-highlight-text-color);
}
.nb-form-field-addon-danger {
color: var(--form-field-addon-danger-text-color);
}
.nb-form-field-addon-danger-highlight {
color: var(--form-field-addon-danger-highlight-text-color);
}
.nb-form-field-addon-info {
color: var(--form-field-addon-info-text-color);
}
.nb-form-field-addon-info-highlight {
color: var(--form-field-addon-info-highlight-text-color);
}
.nb-form-field-addon-control {
color: var(--form-field-addon-control-text-color);
}
.nb-form-field-addon-control-highlight {
color: var(--form-field-addon-control-highlight-text-color);
}
.nb-form-field-limited-width.nb-form-field-size-tiny {
max-width: var(--form-field-tiny-max-width);
}
.nb-form-field-prefix-tiny,
.nb-form-field-suffix-tiny {
height: var(--form-field-addon-tiny-height);
width: var(--form-field-addon-tiny-width);
font-size: var(--form-field-addon-tiny-font-size);
line-height: var(--form-field-addon-tiny-line-height);
font-weight: var(--form-field-addon-tiny-font-weight);
}
.nb-form-field-prefix-tiny nb-icon,
.nb-form-field-suffix-tiny nb-icon {
font-size: var(--form-field-addon-tiny-icon-size);
line-height: var(--form-field-addon-tiny-icon-size);
}
[dir=ltr] .nb-form-field-prefix-tiny {
margin-right: calc(var(--form-field-addon-tiny-width) * -1);
}
[dir=rtl] .nb-form-field-prefix-tiny {
margin-left: calc(var(--form-field-addon-tiny-width) * -1);
}
[dir=ltr] .nb-form-field-suffix-tiny {
margin-left: calc(var(--form-field-addon-tiny-width) * -1);
}
[dir=rtl] .nb-form-field-suffix-tiny {
margin-right: calc(var(--form-field-addon-tiny-width) * -1);
}
.nb-form-field-limited-width.nb-form-field-size-small {
max-width: var(--form-field-small-max-width);
}
.nb-form-field-prefix-small,
.nb-form-field-suffix-small {
height: var(--form-field-addon-small-height);
width: var(--form-field-addon-small-width);
font-size: var(--form-field-addon-small-font-size);
line-height: var(--form-field-addon-small-line-height);
font-weight: var(--form-field-addon-small-font-weight);
}
.nb-form-field-prefix-small nb-icon,
.nb-form-field-suffix-small nb-icon {
font-size: var(--form-field-addon-small-icon-size);
line-height: var(--form-field-addon-small-icon-size);
}
[dir=ltr] .nb-form-field-prefix-small {
margin-right: calc(var(--form-field-addon-small-width) * -1);
}
[dir=rtl] .nb-form-field-prefix-small {
margin-left: calc(var(--form-field-addon-small-width) * -1);
}
[dir=ltr] .nb-form-field-suffix-small {
margin-left: calc(var(--form-field-addon-small-width) * -1);
}
[dir=rtl] .nb-form-field-suffix-small {
margin-right: calc(var(--form-field-addon-small-width) * -1);
}
.nb-form-field-limited-width.nb-form-field-size-medium {
max-width: var(--form-field-medium-max-width);
}
.nb-form-field-prefix-medium,
.nb-form-field-suffix-medium {
height: var(--form-field-addon-medium-height);
width: var(--form-field-addon-medium-width);
font-size: var(--form-field-addon-medium-font-size);
line-height: var(--form-field-addon-medium-line-height);
font-weight: var(--form-field-addon-medium-font-weight);
}
.nb-form-field-prefix-medium nb-icon,
.nb-form-field-suffix-medium nb-icon {
font-size: var(--form-field-addon-medium-icon-size);
line-height: var(--form-field-addon-medium-icon-size);
}
[dir=ltr] .nb-form-field-prefix-medium {
margin-right: calc(var(--form-field-addon-medium-width) * -1);
}
[dir=rtl] .nb-form-field-prefix-medium {
margin-left: calc(var(--form-field-addon-medium-width) * -1);
}
[dir=ltr] .nb-form-field-suffix-medium {
margin-left: calc(var(--form-field-addon-medium-width) * -1);
}
[dir=rtl] .nb-form-field-suffix-medium {
margin-right: calc(var(--form-field-addon-medium-width) * -1);
}
.nb-form-field-limited-width.nb-form-field-size-large {
max-width: var(--form-field-large-max-width);
}
.nb-form-field-prefix-large,
.nb-form-field-suffix-large {
height: var(--form-field-addon-large-height);
width: var(--form-field-addon-large-width);
font-size: var(--form-field-addon-large-font-size);
line-height: var(--form-field-addon-large-line-height);
font-weight: var(--form-field-addon-large-font-weight);
}
.nb-form-field-prefix-large nb-icon,
.nb-form-field-suffix-large nb-icon {
font-size: var(--form-field-addon-large-icon-size);
line-height: var(--form-field-addon-large-icon-size);
}
[dir=ltr] .nb-form-field-prefix-large {
margin-right: calc(var(--form-field-addon-large-width) * -1);
}
[dir=rtl] .nb-form-field-prefix-large {
margin-left: calc(var(--form-field-addon-large-width) * -1);
}
[dir=ltr] .nb-form-field-suffix-large {
margin-left: calc(var(--form-field-addon-large-width) * -1);
}
[dir=rtl] .nb-form-field-suffix-large {
margin-right: calc(var(--form-field-addon-large-width) * -1);
}
.nb-form-field-limited-width.nb-form-field-size-giant {
max-width: var(--form-field-giant-max-width);
}
.nb-form-field-prefix-giant,
.nb-form-field-suffix-giant {
height: var(--form-field-addon-giant-height);
width: var(--form-field-addon-giant-width);
font-size: var(--form-field-addon-giant-font-size);
line-height: var(--form-field-addon-giant-line-height);
font-weight: var(--form-field-addon-giant-font-weight);
}
.nb-form-field-prefix-giant nb-icon,
.nb-form-field-suffix-giant nb-icon {
font-size: var(--form-field-addon-giant-icon-size);
line-height: var(--form-field-addon-giant-icon-size);
}
[dir=ltr] .nb-form-field-prefix-giant {
margin-right: calc(var(--form-field-addon-giant-width) * -1);
}
[dir=rtl] .nb-form-field-prefix-giant {
margin-left: calc(var(--form-field-addon-giant-width) * -1);
}
[dir=ltr] .nb-form-field-suffix-giant {
margin-left: calc(var(--form-field-addon-giant-width) * -1);
}
[dir=rtl] .nb-form-field-suffix-giant {
margin-right: calc(var(--form-field-addon-giant-width) * -1);
}
nb-tag {
border-style: var(--tag-border-style);
border-width: var(--tag-border-width);
border-radius: var(--tag-border-radius);
display: inline-flex;
align-items: center;
font-family: var(--tag-text-font-family);
text-transform: var(--tag-text-transform);
cursor: default;
}
nb-tag.nb-transition {
transition-duration: 0.15s;
transition-property: background-color, border-color, color;
transition-timing-function: ease-in;
}
nb-tag.size-tiny {
font-size: var(--tag-tiny-text-font-size);
font-weight: var(--tag-tiny-text-font-weight);
line-height: var(--tag-tiny-text-line-height);
padding: var(--tag-tiny-padding);
}
nb-tag.size-small {
font-size: var(--tag-small-text-font-size);
font-weight: var(--tag-small-text-font-weight);
line-height: var(--tag-small-text-line-height);
padding: var(--tag-small-padding);
}
nb-tag.size-medium {
font-size: var(--tag-medium-text-font-size);
font-weight: var(--tag-medium-text-font-weight);
line-height: var(--tag-medium-text-line-height);
padding: var(--tag-medium-padding);
}
nb-tag.size-large {
font-size: var(--tag-large-text-font-size);
font-weight: var(--tag-large-text-font-weight);
line-height: var(--tag-large-text-line-height);
padding: var(--tag-large-padding);
}
nb-tag.size-giant {
font-size: var(--tag-giant-text-font-size);
font-weight: var(--tag-giant-text-font-weight);
line-height: var(--tag-giant-text-line-height);
padding: var(--tag-giant-padding);
}
nb-tag.appearance-filled.status-basic {
background-color: var(--tag-filled-basic-background-color);
border-color: var(--tag-filled-basic-border-color);
color: var(--tag-filled-basic-text-color);
}
nb-tag.appearance-filled.status-basic.selected {
background-color: var(--tag-filled-basic-selected-background-color);
border-color: var(--tag-filled-basic-selected-border-color);
}
nb-tag.appearance-filled.status-basic.active {
background-color: var(--tag-filled-basic-active-background-color);
border-color: var(--tag-filled-basic-active-border-color);
}
nb-tag.appearance-filled.status-basic:hover {
background-color: var(--tag-filled-basic-hover-background-color);
border-color: var(--tag-filled-basic-hover-border-color);
}
nb-tag.appearance-filled.status-primary {
background-color: var(--tag-filled-primary-background-color);
border-color: var(--tag-filled-primary-border-color);
color: var(--tag-filled-primary-text-color);
}
nb-tag.appearance-filled.status-primary.selected {
background-color: var(--tag-filled-primary-selected-background-color);
border-color: var(--tag-filled-primary-selected-border-color);
}
nb-tag.appearance-filled.status-primary.active {
background-color: var(--tag-filled-primary-active-background-color);
border-color: var(--tag-filled-primary-active-border-color);
}
nb-tag.appearance-filled.status-primary:hover {
background-color: var(--tag-filled-primary-hover-background-color);
border-color: var(--tag-filled-primary-hover-border-color);
}
nb-tag.appearance-filled.status-success {
background-color: var(--tag-filled-success-background-color);
border-color: var(--tag-filled-success-border-color);
color: var(--tag-filled-success-text-color);
}
nb-tag.appearance-filled.status-success.selected {
background-color: var(--tag-filled-success-selected-background-color);
border-color: var(--tag-filled-success-selected-border-color);
}
nb-tag.appearance-filled.status-success.active {
background-color: var(--tag-filled-success-active-background-color);
border-color: var(--tag-filled-success-active-border-color);
}
nb-tag.appearance-filled.status-success:hover {
background-color: var(--tag-filled-success-hover-background-color);
border-color: var(--tag-filled-success-hover-border-color);
}
nb-tag.appearance-filled.status-warning {
background-color: var(--tag-filled-warning-background-color);
border-color: var(--tag-filled-warning-border-color);
color: var(--tag-filled-warning-text-color);
}
nb-tag.appearance-filled.status-warning.selected {
background-color: var(--tag-filled-warning-selected-background-color);
border-color: var(--tag-filled-warning-selected-border-color);
}
nb-tag.appearance-filled.status-warning.active {
background-color: var(--tag-filled-warning-active-background-color);
border-color: var(--tag-filled-warning-active-border-color);
}
nb-tag.appearance-filled.status-warning:hover {
background-color: var(--tag-filled-warning-hover-background-color);
border-color: var(--tag-filled-warning-hover-border-color);
}
nb-tag.appearance-filled.status-danger {
background-color: var(--tag-filled-danger-background-color);
border-color: var(--tag-filled-danger-border-color);
color: var(--tag-filled-danger-text-color);
}
nb-tag.appearance-filled.status-danger.selected {
background-color: var(--tag-filled-danger-selected-background-color);
border-color: var(--tag-filled-danger-selected-border-color);
}
nb-tag.appearance-filled.status-danger.active {
background-color: var(--tag-filled-danger-active-background-color);
border-color: var(--tag-filled-danger-active-border-color);
}
nb-tag.appearance-filled.status-danger:hover {
background-color: var(--tag-filled-danger-hover-background-color);
border-color: var(--tag-filled-danger-hover-border-color);
}
nb-tag.appearance-filled.status-info {
background-color: var(--tag-filled-info-background-color);
border-color: var(--tag-filled-info-border-color);
color: var(--tag-filled-info-text-color);
}
nb-tag.appearance-filled.status-info.selected {
background-color: var(--tag-filled-info-selected-background-color);
border-color: var(--tag-filled-info-selected-border-color);
}
nb-tag.appearance-filled.status-info.active {
background-color: var(--tag-filled-info-active-background-color);
border-color: var(--tag-filled-info-active-border-color);
}
nb-tag.appearance-filled.status-info:hover {
background-color: var(--tag-filled-info-hover-background-color);
border-color: var(--tag-filled-info-hover-border-color);
}
nb-tag.appearance-filled.status-control {
background-color: var(--tag-filled-control-background-color);
border-color: var(--tag-filled-control-border-color);
color: var(--tag-filled-control-text-color);
}
nb-tag.appearance-filled.status-control.selected {
background-color: var(--tag-filled-control-selected-background-color);
border-color: var(--tag-filled-control-selected-border-color);
}
nb-tag.appearance-filled.status-control.active {
background-color: var(--tag-filled-control-active-background-color);
border-color: var(--tag-filled-control-active-border-color);
}
nb-tag.appearance-filled.status-control:hover {
background-color: var(--tag-filled-control-hover-background-color);
border-color: var(--tag-filled-control-hover-border-color);
}
nb-tag.appearance-outline.status-basic {
background-color: var(--tag-outline-basic-background-color);
border-color: var(--tag-outline-basic-border-color);
color: var(--tag-outline-basic-text-color);
}
nb-tag.appearance-outline.status-basic.selected {
background-color: var(--tag-outline-basic-selected-background-color);
border-color: var(--tag-outline-basic-selected-border-color);
color: var(--tag-outline-basic-selected-text-color);
}
nb-tag.appearance-outline.status-basic.active {
background-color: var(--tag-outline-basic-active-background-color);
border-color: var(--tag-outline-basic-active-border-color);
color: var(--tag-outline-basic-active-text-color);
}
nb-tag.appearance-outline.status-basic:hover {
background-color: var(--tag-outline-basic-hover-background-color);
border-color: var(--tag-outline-basic-hover-border-color);
color: var(--tag-outline-basic-hover-text-color);
}
nb-tag.appearance-outline.status-primary {
background-color: var(--tag-outline-primary-background-color);
border-color: var(--tag-outline-primary-border-color);
color: var(--tag-outline-primary-text-color);
}
nb-tag.appearance-outline.status-primary.selected {
background-color: var(--tag-outline-primary-selected-background-color);
border-color: var(--tag-outline-primary-selected-border-color);
color: var(--tag-outline-primary-selected-text-color);
}
nb-tag.appearance-outline.status-primary.active {
background-color: var(--tag-outline-primary-active-background-color);
border-color: var(--tag-outline-primary-active-border-color);
color: var(--tag-outline-primary-active-text-color);
}
nb-tag.appearance-outline.status-primary:hover {
background-color: var(--tag-outline-primary-hover-background-color);
border-color: var(--tag-outline-primary-hover-border-color);
color: var(--tag-outline-primary-hover-text-color);
}
nb-tag.appearance-outline.status-success {
background-color: var(--tag-outline-success-background-color);
border-color: var(--tag-outline-success-border-color);
color: var(--tag-outline-success-text-color);
}
nb-tag.appearance-outline.status-success.selected {
background-color: var(--tag-outline-success-selected-background-color);
border-color: var(--tag-outline-success-selected-border-color);
color: var(--tag-outline-success-selected-text-color);
}
nb-tag.appearance-outline.status-success.active {
background-color: var(--tag-outline-success-active-background-color);
border-color: var(--tag-outline-success-active-border-color);
color: var(--tag-outline-success-active-text-color);
}
nb-tag.appearance-outline.status-success:hover {
background-color: var(--tag-outline-success-hover-background-color);
border-color: var(--tag-outline-success-hover-border-color);
color: var(--tag-outline-success-hover-text-color);
}
nb-tag.appearance-outline.status-warning {
background-color: var(--tag-outline-warning-background-color);
border-color: var(--tag-outline-warning-border-color);
color: var(--tag-outline-warning-text-color);
}
nb-tag.appearance-outline.status-warning.selected {
background-color: var(--tag-outline-warning-selected-background-color);
border-color: var(--tag-outline-warning-selected-border-color);
color: var(--tag-outline-warning-selected-text-color);
}
nb-tag.appearance-outline.status-warning.active {
background-color: var(--tag-outline-warning-active-background-color);
border-color: var(--tag-outline-warning-active-border-color);
color: var(--tag-outline-warning-active-text-color);
}
nb-tag.appearance-outline.status-warning:hover {
background-color: var(--tag-outline-warning-hover-background-color);
border-color: var(--tag-outline-warning-hover-border-color);
color: var(--tag-outline-warning-hover-text-color);
}
nb-tag.appearance-outline.status-danger {
background-color: var(--tag-outline-danger-background-color);
border-color: var(--tag-outline-danger-border-color);
color: var(--tag-outline-danger-text-color);
}
nb-tag.appearance-outline.status-danger.selected {
background-color: var(--tag-outline-danger-selected-background-color);
border-color: var(--tag-outline-danger-selected-border-color);
color: var(--tag-outline-danger-selected-text-color);
}
nb-tag.appearance-outline.status-danger.active {
background-color: var(--tag-outline-danger-active-background-color);
border-color: var(--tag-outline-danger-active-border-color);
color: var(--tag-outline-danger-active-text-color);
}
nb-tag.appearance-outline.status-danger:hover {
background-color: var(--tag-outline-danger-hover-background-color);
border-color: var(--tag-outline-danger-hover-border-color);
color: var(--tag-outline-danger-hover-text-color);
}
nb-tag.appearance-outline.status-info {
background-color: var(--tag-outline-info-background-color);
border-color: var(--tag-outline-info-border-color);
color: var(--tag-outline-info-text-color);
}
nb-tag.appearance-outline.status-info.selected {
background-color: var(--tag-outline-info-selected-background-color);
border-color: var(--tag-outline-info-selected-border-color);
color: var(--tag-outline-info-selected-text-color);
}
nb-tag.appearance-outline.status-info.active {
background-color: var(--tag-outline-info-active-background-color);
border-color: var(--tag-outline-info-active-border-color);
color: var(--tag-outline-info-active-text-color);
}
nb-tag.appearance-outline.status-info:hover {
background-color: var(--tag-outline-info-hover-background-color);
border-color: var(--tag-outline-info-hover-border-color);
color: var(--tag-outline-info-hover-text-color);
}
nb-tag.appearance-outline.status-control {
background-color: var(--tag-outline-control-background-color);
border-color: var(--tag-outline-control-border-color);
color: var(--tag-outline-control-text-color);
}
nb-tag.appearance-outline.status-control.selected {
background-color: var(--tag-outline-control-selected-background-color);
border-color: var(--tag-outline-control-selected-border-color);
color: var(--tag-outline-control-selected-text-color);
}
nb-tag.appearance-outline.status-control.active {
background-color: var(--tag-outline-control-active-background-color);
border-color: var(--tag-outline-control-active-border-color);
color: var(--tag-outline-control-active-text-color);
}
nb-tag.appearance-outline.status-control:hover {
background-color: var(--tag-outline-control-hover-background-color);
border-color: var(--tag-outline-control-hover-border-color);
color: var(--tag-outline-control-hover-text-color);
}
.nb-tag-remove {
cursor: pointer;
}
.nb-tag-remove.size-tiny {
font-size: var(--tag-tiny-text-line-height);
}
[dir=ltr] .nb-tag-remove.size-tiny {
margin-left: var(--tag-tiny-close-offset);
margin-right: calc(var(--tag-tiny-close-offset) * -1);
}
[dir=rtl] .nb-tag-remove.size-tiny {
margin-right: var(--tag-tiny-close-offset);
margin-left: calc(var(--tag-tiny-close-offset) * -1);
}
.nb-tag-remove.size-small {
font-size: var(--tag-small-text-line-height);
}
[dir=ltr] .nb-tag-remove.size-small {
margin-left: var(--tag-small-close-offset);
margin-right: calc(var(--tag-small-close-offset) * -1);
}
[dir=rtl] .nb-tag-remove.size-small {
margin-right: var(--tag-small-close-offset);
margin-left: calc(var(--tag-small-close-offset) * -1);
}
.nb-tag-remove.size-medium {
font-size: var(--tag-medium-text-line-height);
}
[dir=ltr] .nb-tag-remove.size-medium {
margin-left: var(--tag-medium-close-offset);
margin-right: calc(var(--tag-medium-close-offset) * -1);
}
[dir=rtl] .nb-tag-remove.size-medium {
margin-right: var(--tag-medium-close-offset);
margin-left: calc(var(--tag-medium-close-offset) * -1);
}
.nb-tag-remove.size-large {
font-size: var(--tag-large-text-line-height);
}
[dir=ltr] .nb-tag-remove.size-large {
margin-left: var(--tag-large-close-offset);
margin-right: calc(var(--tag-large-close-offset) * -1);
}
[dir=rtl] .nb-tag-remove.size-large {
margin-right: var(--tag-large-close-offset);
margin-left: calc(var(--tag-large-close-offset) * -1);
}
.nb-tag-remove.size-giant {
font-size: var(--tag-giant-text-line-height);
}
[dir=ltr] .nb-tag-remove.size-giant {
margin-left: var(--tag-giant-close-offset);
margin-right: calc(var(--tag-giant-close-offset) * -1);
}
[dir=rtl] .nb-tag-remove.size-giant {
margin-right: var(--tag-giant-close-offset);
margin-left: calc(var(--tag-giant-close-offset) * -1);
}
nb-tag-list {
display: inline-flex;
outline: none;
}
nb-tag-list.size-tiny .nb-tag-list-tags-wrapper {
margin: calc(var(--tag-list-tiny-tag-offset) * -1);
}
nb-tag-list.size-tiny .nb-tag-list-tags-wrapper nb-tag,
nb-tag-list.size-tiny .nb-tag-list-tags-wrapper .nb-tag-input {
margin: var(--tag-list-tiny-tag-offset);
}
nb-tag-list.size-small .nb-tag-list-tags-wrapper {
margin: calc(var(--tag-list-small-tag-offset) * -1);
}
nb-tag-list.size-small .nb-tag-list-tags-wrapper nb-tag,
nb-tag-list.size-small .nb-tag-list-tags-wrapper .nb-tag-input {
margin: var(--tag-list-small-tag-offset);
}
nb-tag-list.size-medium .nb-tag-list-tags-wrapper {
margin: calc(var(--tag-list-medium-tag-offset) * -1);
}
nb-tag-list.size-medium .nb-tag-list-tags-wrapper nb-tag,
nb-tag-list.size-medium .nb-tag-list-tags-wrapper .nb-tag-input {
margin: var(--tag-list-medium-tag-offset);
}
nb-tag-list.size-large .nb-tag-list-tags-wrapper {
margin: calc(var(--tag-list-large-tag-offset) * -1);
}
nb-tag-list.size-large .nb-tag-list-tags-wrapper nb-tag,
nb-tag-list.size-large .nb-tag-list-tags-wrapper .nb-tag-input {
margin: var(--tag-list-large-tag-offset);
}
nb-tag-list.size-giant .nb-tag-list-tags-wrapper {
margin: calc(var(--tag-list-giant-tag-offset) * -1);
}
nb-tag-list.size-giant .nb-tag-list-tags-wrapper nb-tag,
nb-tag-list.size-giant .nb-tag-list-tags-wrapper .nb-tag-input {
margin: var(--tag-list-giant-tag-offset);
}
.nb-tag-list-tags-wrapper {
display: inline-flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
flex: 1;
}
.nb-tag-list-with-input {
border-style: var(--input-border-style);
border-width: var(--input-border-width);
font-family: var(--input-text-font-family);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.nb-tag-list-with-input.nb-transition {
transition-duration: 0.15s;
transition-property: border, background-color, color, box-shadow;
transition-timing-function: ease-in;
}
.nb-tag-list-with-input::placeholder {
font-family: var(--input-placeholder-text-font-family);
text-overflow: ellipsis;
}
.nb-tag-list-with-input:focus {
outline: none;
}
.nb-tag-list-with-input.input-full-width {
width: 100%;
}
.nb-tag-list-with-input.shape-rectangle {
border-radius: var(--tag-list-with-input-rectangle-border-radius);
}
.nb-tag-list-with-input.shape-semi-round {
border-radius: var(--tag-list-with-input-semi-round-border-radius);
}
.nb-tag-list-with-input.shape-round {
border-radius: var(--tag-list-with-input-round-border-radius);
}
.nb-tag-list-with-input.size-tiny {
padding: var(--tag-list-with-input-tiny-padding);
}
.nb-tag-list-with-input.size-small {
padding: var(--tag-list-with-input-small-padding);
}
.nb-tag-list-with-input.size-medium {
padding: var(--tag-list-with-input-medium-padding);
}
.nb-tag-list-with-input.size-large {
padding: var(--tag-list-with-input-large-padding);
}
.nb-tag-list-with-input.size-giant {
padding: var(--tag-list-with-input-giant-padding);
}
.nb-tag-list-with-input.status-basic {
background-color: var(--tag-input-basic-background-color);
border-color: var(--tag-input-basic-border-color);
}
.nb-tag-list-with-input.status-basic.focus {
background-color: var(--tag-input-basic-focus-background-color);
border-color: var(--tag-input-basic-focus-border-color);
}
.nb-tag-list-with-input.status-primary {
background-color: var(--tag-input-primary-background-color);
border-color: var(--tag-input-primary-border-color);
}
.nb-tag-list-with-input.status-primary.focus {
background-color: var(--tag-input-primary-focus-background-color);
border-color: var(--tag-input-primary-focus-border-color);
}
.nb-tag-list-with-input.status-success {
background-color: var(--tag-input-success-background-color);
border-color: var(--tag-input-success-border-color);
}
.nb-tag-list-with-input.status-success.focus {
background-color: var(--tag-input-success-focus-background-color);
border-color: var(--tag-input-success-focus-border-color);
}
.nb-tag-list-with-input.status-warning {
background-color: var(--tag-input-warning-background-color);
border-color: var(--tag-input-warning-border-color);
}
.nb-tag-list-with-input.status-warning.focus {
background-color: var(--tag-input-warning-focus-background-color);
border-color: var(--tag-input-warning-focus-border-color);
}
.nb-tag-list-with-input.status-danger {
background-color: var(--tag-input-danger-background-color);
border-color: var(--tag-input-danger-border-color);
}
.nb-tag-list-with-input.status-danger.focus {
background-color: var(--tag-input-danger-focus-background-color);
border-color: var(--tag-input-danger-focus-border-color);
}
.nb-tag-list-with-input.status-info {
background-color: var(--tag-input-info-background-color);
border-color: var(--tag-input-info-border-color);
}
.nb-tag-list-with-input.status-info.focus {
background-color: var(--tag-input-info-focus-background-color);
border-color: var(--tag-input-info-focus-border-color);
}
.nb-tag-list-with-input.status-control {
background-color: var(--tag-input-control-background-color);
border-color: var(--tag-input-control-border-color);
}
.nb-tag-list-with-input.status-control.focus {
background-color: var(--tag-input-control-focus-background-color);
border-color: var(--tag-input-control-focus-border-color);
}
nb-form-field nb-tag-list {
width: 100%;
}
[dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny {
padding-right: var(--form-field-addon-tiny-width);
}
[dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny {
padding-right: var(--form-field-addon-tiny-width);
}
[dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny {
padding-left: var(--form-field-addon-tiny-width);
}
[dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small {
padding-left: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small {
padding-right: var(--form-field-addon-small-width);
}
[dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small {
padding-right: var(--form-field-addon-small-width);
}
[dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small {
padding-left: var(--form-field-addon-small-width);
}
[dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium {
padding-left: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium {
padding-right: var(--form-field-addon-medium-width);
}
[dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium {
padding-right: var(--form-field-addon-medium-width);
}
[dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium {
padding-left: var(--form-field-addon-medium-width);
}
[dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large {
padding-left: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large {
padding-right: var(--form-field-addon-large-width);
}
[dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large {
padding-right: var(--form-field-addon-large-width);
}
[dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large {
padding-left: var(--form-field-addon-large-width);
}
[dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant {
padding-left: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant {
padding-right: var(--form-field-addon-giant-width);
}
[dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant {
padding-right: var(--form-field-addon-giant-width);
}
[dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant {
padding-left: var(--form-field-addon-giant-width);
}
.nb-tag-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: transparent;
background: transparent;
outline: none;
flex: 1;
padding: 0;
min-width: var(--tag-input-min-width);
font-family: var(--tag-input-text-font-family);
}
.nb-tag-input::placeholder {
font-family: var(--tag-input-placeholder-text-font-family);
}
.nb-tag-input.size-tiny {
font-size: var(--tag-input-tiny-text-font-size);
font-weight: var(--tag-input-tiny-text-font-weight);
line-height: var(--tag-input-tiny-text-line-height);
padding: var(--tag-input-tiny-padding);
}
.nb-tag-input.size-tiny::placeholder {
font-size: var(--tag-input-tiny-placeholder-text-font-size);
font-weight: var(--tag-input-tiny-placeholder-text-font-weight);
line-height: var(--tag-input-tiny-placeholder-text-line-height);
}
.nb-tag-input.size-small {
font-size: var(--tag-input-small-text-font-size);
font-weight: var(--tag-input-small-text-font-weight);
line-height: var(--tag-input-small-text-line-height);
padding: var(--tag-input-small-padding);
}
.nb-tag-input.size-small::placeholder {
font-size: var(--tag-input-small-placeholder-text-font-size);
font-weight: var(--tag-input-small-placeholder-text-font-weight);
line-height: var(--tag-input-small-placeholder-text-line-height);
}
.nb-tag-input.size-medium {
font-size: var(--tag-input-medium-text-font-size);
font-weight: var(--tag-input-medium-text-font-weight);
line-height: var(--tag-input-medium-text-line-height);
padding: var(--tag-input-medium-padding);
}
.nb-tag-input.size-medium::placeholder {
font-size: var(--tag-input-medium-placeholder-text-font-size);
font-weight: var(--tag-input-medium-placeholder-text-font-weight);
line-height: var(--tag-input-medium-placeholder-text-line-height);
}
.nb-tag-input.size-large {
font-size: var(--tag-input-large-text-font-size);
font-weight: var(--tag-input-large-text-font-weight);
line-height: var(--tag-input-large-text-line-height);
padding: var(--tag-input-large-padding);
}
.nb-tag-input.size-large::placeholder {
font-size: var(--tag-input-large-placeholder-text-font-size);
font-weight: var(--tag-input-large-placeholder-text-font-weight);
line-height: var(--tag-input-large-placeholder-text-line-height);
}
.nb-tag-input.size-giant {
font-size: var(--tag-input-giant-text-font-size);
font-weight: var(--tag-input-giant-text-font-weight);
line-height: var(--tag-input-giant-text-line-height);
padding: var(--tag-input-giant-padding);
}
.nb-tag-input.size-giant::placeholder {
font-size: var(--tag-input-giant-placeholder-text-font-size);
font-weight: var(--tag-input-giant-placeholder-text-font-weight);
line-height: var(--tag-input-giant-placeholder-text-line-height);
}
.nb-tag-input.status-basic {
color: var(--tag-input-basic-text-color);
}
.nb-tag-input.status-basic::placeholder {
color: var(--tag-input-basic-placeholder-text-color);
}
.nb-tag-input.status-basic:disabled {
color: var(--tag-input-basic-disabled-text-color);
}
.nb-tag-input.status-basic:disabled::placeholder {
color: var(--tag-input-basic-disabled-placeholder-text-color);
}
.nb-tag-input.status-primary {
color: var(--tag-input-primary-text-color);
}
.nb-tag-input.status-primary::placeholder {
color: var(--tag-input-primary-placeholder-text-color);
}
.nb-tag-input.status-primary:disabled {
color: var(--tag-input-primary-disabled-text-color);
}
.nb-tag-input.status-primary:disabled::placeholder {
color: var(--tag-input-primary-disabled-placeholder-text-color);
}
.nb-tag-input.status-success {
color: var(--tag-input-success-text-color);
}
.nb-tag-input.status-success::placeholder {
color: var(--tag-input-success-placeholder-text-color);
}
.nb-tag-input.status-success:disabled {
color: var(--tag-input-success-disabled-text-color);
}
.nb-tag-input.status-success:disabled::placeholder {
color: var(--tag-input-success-disabled-placeholder-text-color);
}
.nb-tag-input.status-warning {
color: var(--tag-input-warning-text-color);
}
.nb-tag-input.status-warning::placeholder {
color: var(--tag-input-warning-placeholder-text-color);
}
.nb-tag-input.status-warning:disabled {
color: var(--tag-input-warning-disabled-text-color);
}
.nb-tag-input.status-warning:disabled::placeholder {
color: var(--tag-input-warning-disabled-placeholder-text-color);
}
.nb-tag-input.status-danger {
color: var(--tag-input-danger-text-color);
}
.nb-tag-input.status-danger::placeholder {
color: var(--tag-input-danger-placeholder-text-color);
}
.nb-tag-input.status-danger:disabled {
color: var(--tag-input-danger-disabled-text-color);
}
.nb-tag-input.status-danger:disabled::placeholder {
color: var(--tag-input-danger-disabled-placeholder-text-color);
}
.nb-tag-input.status-info {
color: var(--tag-input-info-text-color);
}
.nb-tag-input.status-info::placeholder {
color: var(--tag-input-info-placeholder-text-color);
}
.nb-tag-input.status-info:disabled {
color: var(--tag-input-info-disabled-text-color);
}
.nb-tag-input.status-info:disabled::placeholder {
color: var(--tag-input-info-disabled-placeholder-text-color);
}
.nb-tag-input.status-control {
color: var(--tag-input-control-text-color);
}
.nb-tag-input.status-control::placeholder {
color: var(--tag-input-control-placeholder-text-color);
}
.nb-tag-input.status-control:disabled {
color: var(--tag-input-control-disabled-text-color);
}
.nb-tag-input.status-control:disabled::placeholder {
color: var(--tag-input-control-disabled-placeholder-text-color);
}
body {
color: var(--text-basic-color);
font-family: var(--text-paragraph-font-family);
font-size: var(--text-paragraph-font-size);
font-weight: var(--text-paragraph-font-weight);
line-height: var(--text-paragraph-line-height);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--text-basic-color);
}
h1,
.h1 {
font-size: var(--text-heading-1-font-size);
font-family: var(--text-heading-1-font-family);
font-weight: var(--text-heading-1-font-weight);
line-height: var(--text-heading-1-line-height);
}
h2,
.h2 {
font-size: var(--text-heading-2-font-size);
font-family: var(--text-heading-2-font-family);
font-weight: var(--text-heading-2-font-weight);
line-height: var(--text-heading-2-line-height);
}
h3,
.h3 {
font-size: var(--text-heading-3-font-size);
font-family: var(--text-heading-3-font-family);
font-weight: var(--text-heading-3-font-weight);
line-height: var(--text-heading-3-line-height);
}
h4,
.h4 {
font-size: var(--text-heading-4-font-size);
font-family: var(--text-heading-4-font-family);
font-weight: var(--text-heading-4-font-weight);
line-height: var(--text-heading-4-line-height);
}
h5,
.h5 {
font-size: var(--text-heading-5-font-size);
font-family: var(--text-heading-5-font-family);
font-weight: var(--text-heading-5-font-weight);
line-height: var(--text-heading-5-line-height);
}
h6,
.h6 {
font-size: var(--text-heading-6-font-size);
font-family: var(--text-heading-6-font-family);
font-weight: var(--text-heading-6-font-weight);
line-height: var(--text-heading-6-line-height);
}
.subtitle,
.subtitle-2 {
color: var(--text-basic-color);
}
.subtitle {
font-family: var(--text-subtitle-font-family);
font-size: var(--text-subtitle-font-size);
font-weight: var(--text-subtitle-font-weight);
line-height: var(--text-subtitle-line-height);
}
.subtitle-2 {
font-family: var(--text-subtitle-2-font-family);
font-size: var(--text-subtitle-2-font-size);
font-weight: var(--text-subtitle-2-font-weight);
line-height: var(--text-subtitle-2-line-height);
}
p,
.paragraph {
color: var(--text-basic-color);
font-family: var(--text-paragraph-font-family);
font-size: var(--text-paragraph-font-size);
font-weight: var(--text-paragraph-font-weight);
line-height: var(--text-paragraph-line-height);
}
.paragraph-2 {
color: var(--text-basic-color);
font-family: var(--text-paragraph-2-font-family);
font-size: var(--text-paragraph-2-font-size);
font-weight: var(--text-paragraph-2-font-weight);
line-height: var(--text-paragraph-2-line-height);
}
a {
color: var(--link-text-color);
-webkit-text-decoration: var(--link-text-decoration);
text-decoration: var(--link-text-decoration);
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
}
a:focus {
color: var(--link-text-focus-color);
}
a:hover {
color: var(--link-text-hover-color);
}
a.link-control, a.link-control:hover {
color: var(--text-control-color);
}
a.link-alternate, a.link-alternate:hover {
color: var(--text-alternate-color);
}
.label {
color: var(--text-hint-color);
font-family: var(--text-label-font-family);
font-size: var(--text-label-font-size);
font-weight: var(--text-label-font-weight);
line-height: var(--text-label-line-height);
}
.caption {
font-family: var(--text-caption-font-family);
font-size: var(--text-caption-font-size);
font-weight: var(--text-caption-font-weight);
line-height: var(--text-caption-line-height);
}
.caption-2 {
font-family: var(--text-caption-2-font-family);
font-size: var(--text-caption-2-font-size);
font-weight: var(--text-caption-2-font-weight);
line-height: var(--text-caption-2-line-height);
}
.caption,
.caption-2 {
color: var(--text-hint-color);
}
.caption.status-basic,
.caption-2.status-basic {
color: var(--text-basic-color);
}
.caption.status-primary,
.caption-2.status-primary {
color: var(--text-primary-color);
}
.caption.status-success,
.caption-2.status-success {
color: var(--text-success-color);
}
.caption.status-warning,
.caption-2.status-warning {
color: var(--text-warning-color);
}
.caption.status-danger,
.caption-2.status-danger {
color: var(--text-danger-color);
}
.caption.status-info,
.caption-2.status-info {
color: var(--text-info-color);
}
.caption.status-control,
.caption-2.status-control {
color: var(--text-control-color);
}
li {
color: var(--list-item-text-color);
font-family: var(--list-item-font-family);
font-size: var(--list-item-font-size);
font-weight: var(--list-item-font-weight);
line-height: var(--list-item-line-height);
}
.text-alternate {
color: var(--text-alternate-color);
}
.text-disabled {
color: var(--text-disabled-color);
}
.text-hint {
color: var(--text-hint-color);
}
.text-basic {
color: var(--text-basic-color);
}
.text-primary {
color: var(--text-primary-color);
}
.text-success {
color: var(--text-success-color);
}
.text-warning {
color: var(--text-warning-color);
}
.text-danger {
color: var(--text-danger-color);
}
.text-info {
color: var(--text-info-color);
}
.text-control {
color: var(--text-control-color);
}
ng2-smart-table table tr th,
ng2-smart-table table tr th a {
font-family: var(--smart-table-header-font-family);
font-size: var(--smart-table-header-font-size);
font-weight: var(--smart-table-header-font-weight);
line-height: var(--smart-table-header-line-height);
color: var(--smart-table-header-fg);
}
ng2-smart-table table tr td {
font-family: var(--smart-table-font-family);
font-size: var(--smart-table-font-size);
font-weight: var(--smart-table-font-weight);
line-height: var(--smart-table-line-height);
color: var(--smart-table-fg);
}
ng2-smart-table table tr th,
ng2-smart-table table tr td {
position: relative;
padding: var(--smart-table-padding);
border: 1px solid var(--smart-table-separator);
vertical-align: middle;
}
ng2-smart-table table tr.ng2-smart-titles th {
padding: var(--smart-table-padding);
}
[dir=ltr] ng2-smart-table table tr.ng2-smart-titles th {
padding-right: 1.75rem;
}
[dir=rtl] ng2-smart-table table tr.ng2-smart-titles th {
padding-left: 1.75rem;
}
ng2-smart-table table tr.ng2-smart-titles th a:hover, ng2-smart-table table tr.ng2-smart-titles th a:active, ng2-smart-table table tr.ng2-smart-titles th a:visited {
color: var(--smart-table-header-fg);
text-decoration: none;
}
ng2-smart-table table tr.ng2-smart-titles th a.sort.asc, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc {
font-weight: var(--smart-table-header-font-weight);
}
ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after {
border-bottom-color: var(--smart-table-fg-secondary);
border-width: 0.375rem;
position: absolute;
margin: 0;
top: 50%;
transform: translate(0, -50%);
}
[dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after {
right: 0.75rem;
}
[dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after {
left: 0.75rem;
}
ng2-smart-table table tr.ng2-smart-titles th a.sort.asc.desc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc.desc::after {
transform: translate(0, -50%) rotate(180deg);
}
ng2-smart-table thead tr {
background: var(--smart-table-header-bg);
}
ng2-smart-table thead tr.ng2-smart-filters th {
padding: var(--smart-table-filter-padding);
}
ng2-smart-table thead tr.ng2-smart-filters th .ng2-smart-filter input {
line-height: var(--smart-table-line-height);
}
ng2-smart-table tbody tr.selected, ng2-smart-table tbody tr:hover {
background: var(--smart-table-bg-active) !important;
}
ng2-smart-table tbody tr:nth-child(2n) {
background-color: var(--smart-table-bg-even);
}
ng2-smart-table th.ng2-smart-actions-title-add a {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem !important;
padding: var(--smart-table-filter-padding);
border-color: var(--smart-table-add-button-border-color);
background-color: var(--smart-table-add-button-background-color);
color: var(--smart-table-add-button-text-color);
border-radius: 0.375rem;
}
ng2-smart-table th.ng2-smart-actions-title-add a:focus {
border-color: var(--smart-table-add-button-focus-border-color);
}
ng2-smart-table th.ng2-smart-actions-title-add a:hover {
text-decoration: none;
background-color: var(--smart-table-add-button-hover-background-color);
border-color: var(--smart-table-add-button-hover-border-color);
}
ng2-smart-table th.ng2-smart-actions-title-add a:active {
background-color: var(--smart-table-add-button-active-background-color);
border-color: var(--smart-table-add-button-active-border-color);
}
ng2-smart-table .ng2-smart-actions {
padding: 0;
height: 1px;
}
ng2-smart-table .ng2-smart-actions ng2-st-tbody-edit-delete, ng2-smart-table .ng2-smart-actions ng2-st-tbody-create-cancel, ng2-smart-table .ng2-smart-actions ng2-st-actions {
display: flex;
height: 100%;
}
ng2-smart-table .ng2-smart-actions a.ng2-smart-action {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
font-size: 2rem !important;
color: var(--smart-table-fg-secondary);
}
ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child) {
border-right: 1px solid var(--smart-table-separator);
}
ng2-smart-table .ng2-smart-actions a.ng2-smart-action:hover {
text-decoration: none;
}
ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-create:hover,
ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-edit:hover,
ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-save:hover {
color: var(--smart-table-action-add-edit-hover-text-color);
}
ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-cancel:hover,
ng2-smart-table .ng2-smart-actions .ng2-smart-action-delete-delete:hover,
ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-cancel:hover {
color: var(--smart-table-action-cancel-delete-hover-text-color);
}
ng2-smart-table table-cell-edit-mode {
display: block;
margin: -7.5px -12px;
}
ng2-smart-table ng2-smart-table-pager {
display: block;
}
ng2-smart-table nav.ng2-smart-pagination-nav {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination {
display: flex;
padding: 0;
}
ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:focus, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:hover {
background-color: var(--smart-table-paging-hover);
color: var(--smart-table-paging-disabled-text-color);
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination {
font-family: var(--smart-table-paging-font-family);
font-size: var(--smart-table-paging-font-size);
line-height: var(--smart-table-paging-line-height);
border: var(--smart-table-paging-border-color) solid var(--smart-table-paging-border-width);
border-radius: var(--smart-table-border-radius);
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination li {
overflow: hidden;
}
[dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) {
border-right: 1px solid var(--smart-table-separator);
}
[dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) {
border-left: 1px solid var(--smart-table-separator);
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-prev, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-next {
font-size: var(--smart-table-paging-font-size);
line-height: var(--smart-table-paging-line-height);
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span {
font-size: var(--smart-table-paging-font-size);
line-height: var(--smart-table-paging-line-height);
background-color: transparent;
color: var(--smart-table-paging-page-text-color);
padding: 0.75rem 1.25rem;
border: none;
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:focus {
border-color: var(--smart-table-paging-page-focus-border-color);
color: var(--smart-table-paging-page-focus-text-color);
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:hover {
background-color: var(--smart-table-paging-hover);
border-color: var(--smart-table-paging-hover-border-color);
color: var(--smart-table-paging-hover-text-color);
text-decoration: none;
}
[dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span {
border-top-left-radius: var(--smart-table-border-radius);
border-bottom-left-radius: var(--smart-table-border-radius);
}
[dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span {
border-top-right-radius: var(--smart-table-border-radius);
border-bottom-right-radius: var(--smart-table-border-radius);
}
[dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span {
border-top-right-radius: var(--smart-table-border-radius);
border-bottom-right-radius: var(--smart-table-border-radius);
}
[dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span {
border-top-left-radius: var(--smart-table-border-radius);
border-bottom-left-radius: var(--smart-table-border-radius);
}
ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:focus {
color: var(--smart-table-paging-fg-active);
background-color: var(--smart-table-paging-bg-active);
}
.nb-theme-default {
--link-text-color: var(--text-primary-color);
--link-text-decoration: underline;
--link-text-focus-color: var(--text-primary-focus-color);
--link-text-hover-color: var(--text-primary-hover-color);
--card-background-color: var(--background-basic-color-1);
--card-text-color: var(--text-basic-color);
--card-text-font-family: var(--text-paragraph-font-family);
--card-text-font-size: var(--text-paragraph-font-size);
--card-text-font-weight: var(--text-paragraph-font-weight);
--card-text-line-height: var(--text-paragraph-line-height);
--card-border-width: 0.0625rem;
--card-border-style: solid;
--card-border-color: var(--border-basic-color-4);
--card-border-radius: var(--border-radius);
--card-padding: 1rem 1.5rem;
--card-shadow: none;
--card-divider-color: var(--divider-color);
--card-divider-style: var(--divider-style);
--card-divider-width: var(--divider-width);
--card-header-text-color: var(--text-basic-color);
--card-header-text-font-family: var(--text-subtitle-font-family);
--card-header-text-font-size: var(--text-subtitle-font-size);
--card-header-text-font-weight: var(--text-subtitle-font-weight);
--card-header-text-line-height: var(--text-subtitle-line-height);
--card-header-basic-background-color: var(--background-basic-color-2);
--card-header-basic-text-color: var(--text-basic-color);
--card-header-primary-background-color: var(--color-primary-default);
--card-header-primary-text-color: var(--text-control-color);
--card-header-info-background-color: var(--color-info-default);
--card-header-info-text-color: var(--text-control-color);
--card-header-success-background-color: var(--color-success-default);
--card-header-success-text-color: var(--text-control-color);
--card-header-warning-background-color: var(--color-warning-default);
--card-header-warning-text-color: var(--text-control-color);
--card-header-danger-background-color: var(--color-danger-default);
--card-header-danger-text-color: var(--text-control-color);
--card-header-control-background-color: var(--color-control-default);
--card-header-control-text-color: var(--color-basic-800);
--card-height-tiny: 13.5rem;
--card-height-small: 21.1875rem;
--card-height-medium: 28.875rem;
--card-height-large: 36.5625rem;
--card-height-giant: 44.25rem;
--card-margin-bottom: 1.875rem;
--card-scrollbar-color: var(--scrollbar-color);
--card-scrollbar-background-color: var(--scrollbar-background-color);
--card-scrollbar-width: var(--scrollbar-width);
--header-background-color: var(--background-basic-color-1);
--header-text-color: var(--text-basic-color);
--header-text-font-family: var(--text-paragraph-font-family);
--header-text-font-size: var(--text-paragraph-font-size);
--header-text-font-weight: var(--text-paragraph-font-weight);
--header-text-line-height: var(--text-paragraph-line-height);
--header-height: 4.75rem;
--header-padding: 1.25rem;
--header-shadow: var(--shadow);
--footer-background-color: var(--background-basic-color-1);
--footer-text-color: var(--text-basic-color);
--footer-text-font-family: var(--text-paragraph-font-family);
--footer-text-font-size: var(--text-paragraph-font-size);
--footer-text-font-weight: var(--text-paragraph-font-weight);
--footer-text-line-height: var(--text-paragraph-line-height);
--footer-text-highlight-color: var(--color-primary-hover);
--footer-height: 4.725rem;
--footer-padding: 1.25rem;
--footer-divider-color: var(--divider-color);
--footer-divider-style: var(--divider-style);
--footer-divider-width: var(--divider-width);
--footer-shadow: var(--shadow);
--layout-background-color: var(--background-basic-color-3);
--layout-text-color: var(--text-basic-color);
--layout-text-font-family: var(--text-paragraph-font-family);
--layout-text-font-size: var(--text-paragraph-font-size);
--layout-text-font-weight: var(--text-paragraph-font-weight);
--layout-text-line-height: var(--text-paragraph-line-height);
--layout-min-height: 100vh;
--layout-content-width: 900px;
--layout-window-mode-min-width: 300px;
--layout-window-mode-max-width: 1920px;
--layout-window-mode-background-color: var(--background-basic-color-3);
--layout-window-mode-padding-top: 4.75rem;
--layout-window-shadow: var(--shadow);
--layout-padding: 2.25rem 2.25rem 0.75rem;
--layout-medium-padding: 1.5rem 1.5rem 0.5rem;
--layout-small-padding: 1rem 1rem 0;
--layout-scrollbar-background-color: var(--scrollbar-background-color);
--layout-scrollbar-color: var(--scrollbar-color);
--layout-scrollbar-width: var(--scrollbar-width);
--sidebar-background-color: var(--background-basic-color-1);
--sidebar-text-color: var(--text-basic-color);
--sidebar-text-font-family: var(--text-paragraph-font-family);
--sidebar-text-font-size: var(--text-paragraph-font-size);
--sidebar-text-font-weight: var(--text-paragraph-font-weight);
--sidebar-text-line-height: var(--text-paragraph-line-height);
--sidebar-height: 100vh;
--sidebar-width: 16rem;
--sidebar-width-compact: 3.5rem;
--sidebar-padding: 1.25rem;
--sidebar-header-height: 3.5rem;
--sidebar-footer-height: 3.5rem;
--sidebar-shadow: var(--shadow);
--sidebar-menu-item-highlight-color: var(--color-primary-default);
--sidebar-scrollbar-background-color: var(--scrollbar-background-color);
--sidebar-scrollbar-color: var(--scrollbar-color);
--sidebar-scrollbar-width: var(--scrollbar-width);
--menu-background-color: transparent;
--menu-text-color: var(--text-basic-color);
--menu-text-font-family: var(--text-subtitle-2-font-family);
--menu-text-font-size: var(--text-subtitle-2-font-size);
--menu-text-font-weight: var(--text-subtitle-2-font-weight);
--menu-text-line-height: var(--text-subtitle-2-line-height);
--menu-group-text-color: var(--text-hint-color);
--menu-item-border-radius: 0;
--menu-item-padding: 0.75rem 1rem;
--menu-item-hover-background-color: var(--menu-background-color);
--menu-item-hover-cursor: pointer;
--menu-item-hover-text-color: var(--text-primary-hover-color);
--menu-item-icon-hover-color: var(--menu-item-hover-text-color);
--menu-item-active-background-color: var(--menu-background-color);
--menu-item-active-text-color: var(--text-primary-color);
--menu-item-icon-active-color: var(--menu-item-active-text-color);
--menu-item-icon-color: var(--text-hint-color);
--menu-item-icon-margin: 0 0.5rem 0 0;
--menu-item-icon-width: 1.25rem;
--menu-item-divider-color: var(--divider-color);
--menu-item-divider-style: var(--divider-style);
--menu-item-divider-width: var(--divider-width);
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-text-color: var(--text-basic-color);
--menu-submenu-margin: 0;
--menu-submenu-padding: 0 1.25rem;
--menu-submenu-item-border-color: var(--menu-submenu-background-color);
--menu-submenu-item-border-style: solid;
--menu-submenu-item-border-width: 0;
--menu-submenu-item-border-radius: 0;
--menu-submenu-item-padding: var(--menu-item-padding);
--menu-submenu-item-hover-background-color: var(--menu-background-color);
--menu-submenu-item-hover-border-color: var(--menu-submenu-item-border-color);
--menu-submenu-item-hover-text-color: var(--menu-item-hover-text-color);
--menu-submenu-item-icon-hover-color: var(--menu-item-icon-hover-color);
--menu-submenu-item-active-background-color: var(--menu-background-color);
--menu-submenu-item-active-border-color: var(--color-primary-default);
--menu-submenu-item-active-text-color: var(--menu-item-active-text-color);
--menu-submenu-item-icon-active-color: var(--menu-item-icon-active-color);
--menu-submenu-item-active-hover-background-color: var(--menu-submenu-item-hover-background-color);
--menu-submenu-item-active-hover-border-color: var(--color-primary-hover);
--menu-submenu-item-active-hover-text-color: var(--menu-submenu-item-hover-text-color);
--menu-submenu-item-icon-active-hover-color: var(--menu-submenu-item-icon-hover-color);
--tabset-background-color: transparent;
--tabset-border-radius: 0;
--tabset-shadow: none;
--tabset-tab-background-color: transparent;
--tabset-tab-padding: 1rem 2rem;
--tabset-tab-text-color: var(--text-hint-color);
--tabset-tab-text-font-family: var(--text-button-font-family);
--tabset-tab-text-font-size: var(--text-button-medium-font-size);
--tabset-tab-text-font-weight: var(--text-button-font-weight);
--tabset-tab-text-line-height: var(--text-button-medium-line-height);
--tabset-tab-text-transform: uppercase;
--tabset-tab-underline-width: 0.25rem;
--tabset-tab-underline-color: transparent;
--tabset-tab-active-background-color: transparent;
--tabset-tab-active-text-color: var(--text-primary-color);
--tabset-tab-active-underline-color: var(--text-primary-color);
--tabset-tab-focus-background-color: transparent;
--tabset-tab-focus-text-color: var(--text-primary-focus-color);
--tabset-tab-focus-underline-color: var(--text-primary-focus-color);
--tabset-tab-hover-background-color: transparent;
--tabset-tab-hover-text-color: var(--text-primary-hover-color);
--tabset-tab-hover-underline-color: var(--text-primary-hover-color);
--tabset-tab-disabled-background-color: transparent;
--tabset-tab-disabled-text-color: var(--text-disabled-color);
--tabset-tab-disabled-underline-color: transparent;
--tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem;
--tabset-tab-badge-dot-mode-padding: 0.25rem;
--tabset-divider-color: var(--divider-color);
--tabset-divider-style: var(--divider-style);
--tabset-divider-width: var(--divider-width);
--tabset-content-background-color: transparent;
--tabset-content-padding: 1rem 2rem;
--tabset-content-text-color: var(--text-basic-color);
--tabset-content-text-font-family: var(--text-paragraph-font-family);
--tabset-content-text-font-size: var(--text-paragraph-font-size);
--tabset-content-text-font-weight: var(--text-paragraph-font-weight);
--tabset-content-text-line-height: var(--text-paragraph-line-height);
--tabset-scrollbar-color: var(--scrollbar-color);
--tabset-scrollbar-background-color: var(--scrollbar-background-color);
--tabset-scrollbar-width: var(--scrollbar-width);
--tabset-tab-text-hide-breakpoint: 36rem;
--route-tabset-background-color: transparent;
--route-tabset-border-radius: 0;
--route-tabset-shadow: none;
--route-tabset-tab-background-color: transparent;
--route-tabset-tab-padding: 1rem 2rem;
--route-tabset-tab-text-color: var(--text-hint-color);
--route-tabset-tab-text-font-family: var(--text-button-font-family);
--route-tabset-tab-text-font-size: var(--text-button-medium-font-size);
--route-tabset-tab-text-font-weight: var(--text-button-font-weight);
--route-tabset-tab-text-line-height: var(--text-button-medium-line-height);
--route-tabset-tab-text-transform: uppercase;
--route-tabset-tab-underline-width: 0.25rem;
--route-tabset-tab-underline-color: transparent;
--route-tabset-tab-active-background-color: transparent;
--route-tabset-tab-active-text-color: var(--text-primary-color);
--route-tabset-tab-active-underline-color: var(--text-primary-color);
--route-tabset-tab-focus-background-color: transparent;
--route-tabset-tab-focus-text-color: var(--text-primary-focus-color);
--route-tabset-tab-focus-underline-color: var(--text-primary-focus-color);
--route-tabset-tab-hover-background-color: transparent;
--route-tabset-tab-hover-text-color: var(--text-primary-hover-color);
--route-tabset-tab-hover-underline-color: var(--text-primary-hover-color);
--route-tabset-tab-disabled-background-color: transparent;
--route-tabset-tab-disabled-text-color: var(--text-disabled-color);
--route-tabset-tab-disabled-underline-color: transparent;
--route-tabset-divider-color: var(--divider-color);
--route-tabset-divider-style: var(--divider-style);
--route-tabset-divider-width: var(--divider-width);
--route-tabset-scrollbar-color: var(--scrollbar-color);
--route-tabset-scrollbar-background-color: var(--scrollbar-background-color);
--route-tabset-scrollbar-width: var(--scrollbar-width);
--route-tabset-tab-text-hide-breakpoint: 36rem;
--user-picture-box-background-color: transparent;
--user-picture-box-border-color: var(--border-basic-color-3);
--user-picture-box-border-width: 1px;
--user-initials-text-color: var(--text-basic-color);
--user-initials-text-font-family: var(--text-paragraph-font-family);
--user-initials-text-font-weight: var(--text-paragraph-font-weight);
--user-name-text-color: var(--text-basic-color);
--user-name-text-font-family: var(--text-paragraph-font-family);
--user-name-text-font-weight: var(--text-paragraph-font-weight);
--user-title-text-color: var(--text-basic-color);
--user-title-text-font-family: var(--text-paragraph-2-font-family);
--user-title-text-font-weight: var(--text-paragraph-2-font-weight);
--user-rectangle-border-radius: 0.5rem;
--user-semi-round-border-radius: 0.75rem;
--user-round-border-radius: 50%;
--user-tiny-height: 1.25rem;
--user-tiny-width: 1.25rem;
--user-tiny-initials-text-font-size: var(--text-caption-font-size);
--user-tiny-initials-text-line-height: var(--text-caption-line-height);
--user-tiny-name-text-font-size: var(--text-caption-font-size);
--user-tiny-name-text-line-height: var(--text-caption-line-height);
--user-tiny-title-text-font-size: var(--text-caption-font-size);
--user-tiny-title-text-line-height: var(--text-caption-line-height);
--user-small-height: 1.5rem;
--user-small-width: 1.5rem;
--user-small-initials-text-font-size: var(--text-caption-font-size);
--user-small-initials-text-line-height: var(--text-caption-line-height);
--user-small-name-text-font-size: var(--text-caption-font-size);
--user-small-name-text-line-height: var(--text-caption-line-height);
--user-small-title-text-font-size: var(--text-caption-font-size);
--user-small-title-text-line-height: var(--text-caption-line-height);
--user-medium-height: 2.5rem;
--user-medium-width: 2.5rem;
--user-medium-initials-text-font-size: var(--text-paragraph-font-size);
--user-medium-initials-text-line-height: var(--text-paragraph-line-height);
--user-medium-name-text-font-size: var(--text-paragraph-font-size);
--user-medium-name-text-line-height: var(--text-paragraph-line-height);
--user-medium-title-text-font-size: var(--text-caption-font-size);
--user-medium-title-text-line-height: var(--text-caption-line-height);
--user-large-height: 3.25rem;
--user-large-width: 3.25rem;
--user-large-initials-text-font-size: var(--text-paragraph-font-size);
--user-large-initials-text-line-height: var(--text-paragraph-line-height);
--user-large-name-text-font-size: var(--text-paragraph-font-size);
--user-large-name-text-line-height: var(--text-paragraph-line-height);
--user-large-title-text-font-size: var(--text-paragraph-2-font-size);
--user-large-title-text-line-height: var(--text-paragraph-2-line-height);
--user-giant-height: 4rem;
--user-giant-width: 4rem;
--user-giant-initials-text-font-size: var(--text-paragraph-font-size);
--user-giant-initials-text-line-height: var(--text-paragraph-line-height);
--user-giant-name-text-font-size: var(--text-paragraph-font-size);
--user-giant-name-text-line-height: var(--text-paragraph-line-height);
--user-giant-title-text-font-size: var(--text-paragraph-font-size);
--user-giant-title-text-line-height: var(--text-paragraph-line-height);
--popover-text-color: var(--text-basic-color);
--popover-text-font-family: var(--text-paragraph-font-family);
--popover-text-font-size: var(--text-paragraph-font-size);
--popover-text-font-weight: var(--text-paragraph-font-weight);
--popover-text-line-height: var(--text-paragraph-line-height);
--popover-background-color: var(--background-basic-color-1);
--popover-border-width: 1px;
--popover-border-color: transparent;
--popover-border-radius: var(--border-radius);
--popover-shadow: var(--shadow);
--popover-arrow-size: 0.6875rem;
--popover-padding: 0.75rem 1rem;
--context-menu-background-color: var(--background-basic-color-1);
--context-menu-border-color: transparent;
--context-menu-border-style: solid;
--context-menu-border-width: 0;
--context-menu-border-radius: var(--border-radius);
--context-menu-text-align: center;
--context-menu-min-width: 10rem;
--context-menu-max-width: 15rem;
--context-menu-shadow: var(--shadow);
--actions-background-color: transparent;
--actions-divider-color: var(--divider-color);
--actions-divider-style: var(--divider-style);
--actions-divider-width: var(--divider-width);
--actions-icon-color: var(--text-hint-color);
--actions-text-color: var(--text-basic-color);
--actions-text-font-family: var(--text-button-font-family);
--actions-text-font-weight: var(--text-button-font-weight);
--actions-text-line-height: var(--text-button-medium-line-height);
--actions-disabled-icon-color: var(--text-disabled-color);
--actions-disabled-text-color: var(--text-disabled-color);
--actions-tiny-height: 1rem;
--actions-tiny-icon-height: var(--actions-tiny-height);
--actions-tiny-padding: 0 1.25rem;
--actions-tiny-text-font-size: var(--text-button-tiny-font-size);
--actions-small-height: 1.5rem;
--actions-small-icon-height: var(--actions-small-height);
--actions-small-padding: 0 1.25rem;
--actions-small-text-font-size: var(--text-button-small-font-size);
--actions-medium-height: 2.25rem;
--actions-medium-icon-height: var(--actions-medium-height);
--actions-medium-padding: 0 1.25rem;
--actions-medium-text-font-size: var(--text-button-medium-font-size);
--actions-large-height: 3.5rem;
--actions-large-icon-height: var(--actions-large-height);
--actions-large-padding: 0 1.25rem;
--actions-large-text-font-size: var(--text-button-large-font-size);
--actions-giant-height: 4rem;
--actions-giant-icon-height: var(--actions-giant-height);
--actions-giant-padding: 0 1.25rem;
--actions-giant-text-font-size: var(--text-button-giant-font-size);
--search-background-color: var(--background-basic-color-1);
--search-divider-color: var(--divider-color);
--search-divider-style: var(--divider-style);
--search-divider-width: var(--divider-width);
--search-extra-background-color: var(--color-primary-default);
--search-text-color: var(--text-basic-color);
--search-text-font-family: var(--text-heading-1-font-family);
--search-text-font-size: var(--text-heading-1-font-size);
--search-text-font-weight: var(--text-heading-1-font-weight);
--search-text-line-height: var(--text-heading-1-line-height);
--search-placeholder-text-color: var(--text-hint-color);
--search-info-text-color: var(--text-hint-color);
--search-info-text-font-family: var(--text-subtitle-font-family);
--search-info-text-font-size: var(--text-subtitle-font-size);
--search-info-text-font-weight: var(--text-subtitle-font-weight);
--search-info-text-line-height: var(--text-subtitle-line-height);
--smart-table-header-font-family: var(--text-paragraph-font-family);
--smart-table-header-font-size: var(--text-paragraph-font-size);
--smart-table-header-font-weight: var(--text-paragraph-font-weight);
--smart-table-header-line-height: var(--text-paragraph-line-height);
--smart-table-header-fg: var(--text-basic-color);
--smart-table-header-bg: var(--background-basic-color-1);
--smart-table-font-family: var(--text-paragraph-font-family);
--smart-table-font-size: var(--text-paragraph-font-size);
--smart-table-font-weight: var(--text-paragraph-font-weight);
--smart-table-line-height: var(--text-paragraph-line-height);
--smart-table-fg: var(--text-basic-color);
--smart-table-bg: var(--background-basic-color-1);
--smart-table-bg-even: var(--background-basic-color-2);
--smart-table-fg-secondary: var(--text-basic-color);
--smart-table-bg-active: var(--background-basic-color-3);
--smart-table-padding: 0.875rem 1.25rem;
--smart-table-filter-padding: 0.375rem 0.5rem;
--smart-table-separator: var(--divider-color);
--smart-table-border-radius: var(--border-radius);
--smart-table-action-add-edit-hover-text-color: var(--color-primary-default);
--smart-table-action-cancel-delete-hover-text-color: var(--color-danger-default);
--smart-table-add-button-border-color: var(--button-filled-primary-border-color);
--smart-table-add-button-background-color: var(--button-filled-primary-background-color);
--smart-table-add-button-text-color: var(--button-filled-primary-text-color);
--smart-table-add-button-focus-border-color: var(--button-filled-primary-focus-border-color);
--smart-table-add-button-hover-background-color: var(--button-filled-primary-hover-background-color);
--smart-table-add-button-hover-border-color: var(--button-filled-primary-hover-border-color);
--smart-table-add-button-active-background-color: var(--button-filled-primary-active-background-color);
--smart-table-add-button-active-border-color: var(--button-filled-primary-active-border-color);
--smart-table-paging-font-family: var(--button-text-font-family);
--smart-table-paging-font-size: var(--button-medium-text-font-size);
--smart-table-paging-line-height: var(--button-medium-text-line-height);
--smart-table-paging-border-color: var(--divider-color);
--smart-table-paging-border-width: var(--divider-width);
--smart-table-paging-fg-active: var(--text-control-color);
--smart-table-paging-bg-active: var(--color-primary-default);
--smart-table-paging-hover: transparent;
--smart-table-paging-hover-border-color: var(--button-outline-primary-hover-border-color);
--smart-table-paging-hover-text-color: var(--button-outline-primary-hover-text-color);
--smart-table-paging-disabled-text-color: var(--button-outline-primary-disabled-text-color);
--smart-table-paging-page-text-color: var(--button-outline-primary-text-color);
--smart-table-paging-page-focus-border-color: var(--button-outline-primary-focus-border-color);
--smart-table-paging-page-focus-text-color: var(--button-outline-primary-focus-text-color);
--toastr-border-style: solid;
--toastr-border-width: 1px;
--toastr-border-radius: var(--border-radius);
--toastr-padding: 1rem;
--toastr-shadow: var(--shadow);
--toastr-text-font-family: var(--text-paragraph-2-font-family);
--toastr-text-font-size: var(--text-paragraph-2-font-size);
--toastr-text-font-weight: var(--text-paragraph-2-font-weight);
--toastr-text-line-height: var(--text-paragraph-2-line-height);
--toastr-title-text-font-family: var(--text-subtitle-font-family);
--toastr-title-text-font-size: var(--text-subtitle-font-size);
--toastr-title-text-font-weight: var(--text-subtitle-font-weight);
--toastr-title-text-line-height: var(--text-subtitle-line-height);
--toastr-basic-background-color: var(--background-basic-color-1);
--toastr-basic-border-color: var(--border-basic-color-3);
--toastr-basic-text-color: var(--text-basic-color);
--toastr-icon-basic-background-color: var(--background-basic-color-1);
--toastr-icon-basic-color: var(--text-basic-color);
--toastr-destroyable-basic-hover-background-color: var(--background-basic-color-1);
--toastr-destroyable-basic-hover-border-color: var(--border-basic-color-3);
--toastr-primary-background-color: var(--color-primary-default);
--toastr-primary-border-color: var(--color-primary-default);
--toastr-primary-text-color: var(--text-control-color);
--toastr-icon-primary-background-color: var(--background-basic-color-1);
--toastr-icon-primary-color: var(--color-primary-default);
--toastr-destroyable-primary-hover-background-color: var(--color-primary-hover);
--toastr-destroyable-primary-hover-border-color: var(--color-primary-hover);
--toastr-success-background-color: var(--color-success-default);
--toastr-success-border-color: var(--color-success-default);
--toastr-success-text-color: var(--text-control-color);
--toastr-icon-success-background-color: var(--background-basic-color-1);
--toastr-icon-success-color: var(--color-success-default);
--toastr-destroyable-success-hover-background-color: var(--color-success-hover);
--toastr-destroyable-success-hover-border-color: var(--color-success-hover);
--toastr-info-background-color: var(--color-info-default);
--toastr-info-border-color: var(--color-info-default);
--toastr-info-text-color: var(--text-control-color);
--toastr-icon-info-background-color: var(--background-basic-color-1);
--toastr-icon-info-color: var(--color-info-default);
--toastr-destroyable-info-hover-background-color: var(--color-info-hover);
--toastr-destroyable-info-hover-border-color: var(--color-info-hover);
--toastr-warning-background-color: var(--color-warning-default);
--toastr-warning-border-color: var(--color-warning-default);
--toastr-warning-text-color: var(--text-control-color);
--toastr-icon-warning-background-color: var(--background-basic-color-1);
--toastr-icon-warning-color: var(--color-warning-default);
--toastr-destroyable-warning-hover-background-color: var(--color-warning-hover);
--toastr-destroyable-warning-hover-border-color: var(--color-warning-hover);
--toastr-danger-background-color: var(--color-danger-default);
--toastr-danger-border-color: var(--color-danger-default);
--toastr-danger-text-color: var(--text-control-color);
--toastr-icon-danger-background-color: var(--background-basic-color-1);
--toastr-icon-danger-color: var(--color-danger-default);
--toastr-destroyable-danger-hover-background-color: var(--color-danger-hover);
--toastr-destroyable-danger-hover-border-color: var(--color-danger-hover);
--toastr-control-background-color: var(--color-control-default);
--toastr-control-border-color: var(--color-control-default);
--toastr-control-text-color: var(--color-basic-800);
--toastr-icon-control-background-color: var(--color-control-default);
--toastr-icon-control-color: var(--color-basic-800);
--toastr-destroyable-control-hover-background-color: var(--color-control-hover);
--toastr-destroyable-control-hover-border-color: var(--color-control-hover);
--button-cursor: pointer;
--button-outline-width: var(--outline-width);
--button-outline-color: var(--outline-color);
--button-text-font-family: var(--text-button-font-family);
--button-text-font-weight: var(--text-button-font-weight);
--button-disabled-cursor: default;
--button-tiny-text-font-size: var(--text-button-tiny-font-size);
--button-tiny-text-line-height: var(--text-button-tiny-line-height);
--button-tiny-icon-size: 0.75rem;
--button-tiny-icon-vertical-margin: -0.125rem;
--button-tiny-icon-offset: 0.375rem;
--button-small-text-font-size: var(--text-button-small-font-size);
--button-small-text-line-height: var(--text-button-small-line-height);
--button-small-icon-size: 1rem;
--button-small-icon-vertical-margin: -0.125rem;
--button-small-icon-offset: 0.375rem;
--button-medium-text-font-size: var(--text-button-medium-font-size);
--button-medium-text-line-height: var(--text-button-medium-line-height);
--button-medium-icon-size: 1.25rem;
--button-medium-icon-vertical-margin: -0.125rem;
--button-medium-icon-offset: 0.5rem;
--button-large-text-font-size: var(--text-button-large-font-size);
--button-large-text-line-height: var(--text-button-large-line-height);
--button-large-icon-size: 1.5rem;
--button-large-icon-vertical-margin: -0.125rem;
--button-large-icon-offset: 0.75rem;
--button-giant-text-font-size: var(--text-button-giant-font-size);
--button-giant-text-line-height: var(--text-button-giant-line-height);
--button-giant-icon-size: 1.5rem;
--button-giant-icon-vertical-margin: -0.125rem;
--button-giant-icon-offset: 0.75rem;
--button-rectangle-border-radius: var(--border-radius);
--button-semi-round-border-radius: 0.75rem;
--button-round-border-radius: 1.5rem;
--button-filled-border-style: solid;
--button-filled-border-width: 0.0625rem;
--button-filled-text-transform: uppercase;
--button-filled-tiny-padding: 0.3125rem 0.625rem;
--button-filled-small-padding: 0.4375rem 0.875rem;
--button-filled-medium-padding: 0.6875rem 1.125rem;
--button-filled-large-padding: 0.8125rem 1.125rem;
--button-filled-giant-padding: 0.9375rem 1.375rem;
--button-filled-basic-background-color: var(--color-basic-default);
--button-filled-basic-border-color: var(--color-basic-default-border);
--button-filled-basic-text-color: var(--color-basic-800);
--button-filled-basic-focus-background-color: var(--color-basic-focus);
--button-filled-basic-focus-border-color: var(--color-basic-focus-border);
--button-filled-basic-hover-background-color: var(--color-basic-hover);
--button-filled-basic-hover-border-color: var(--color-basic-hover-border);
--button-filled-basic-active-background-color: var(--color-basic-active);
--button-filled-basic-active-border-color: var(--color-basic-active-border);
--button-filled-basic-disabled-background-color: var(--color-basic-disabled);
--button-filled-basic-disabled-border-color: var(--color-basic-disabled-border);
--button-filled-basic-disabled-text-color: var(--text-disabled-color);
--button-filled-primary-background-color: var(--color-primary-default);
--button-filled-primary-border-color: var(--color-primary-default-border);
--button-filled-primary-text-color: var(--text-control-color);
--button-filled-primary-focus-background-color: var(--color-primary-focus);
--button-filled-primary-focus-border-color: var(--color-primary-focus-border);
--button-filled-primary-hover-background-color: var(--color-primary-hover);
--button-filled-primary-hover-border-color: var(--color-primary-hover-border);
--button-filled-primary-active-background-color: var(--color-primary-active);
--button-filled-primary-active-border-color: var(--color-primary-active-border);
--button-filled-primary-disabled-background-color: var(--color-primary-disabled);
--button-filled-primary-disabled-border-color: var(--color-primary-disabled-border);
--button-filled-primary-disabled-text-color: var(--text-disabled-color);
--button-filled-success-background-color: var(--color-success-default);
--button-filled-success-border-color: var(--color-success-default-border);
--button-filled-success-text-color: var(--text-control-color);
--button-filled-success-focus-background-color: var(--color-success-focus);
--button-filled-success-focus-border-color: var(--color-success-focus-border);
--button-filled-success-hover-background-color: var(--color-success-hover);
--button-filled-success-hover-border-color: var(--color-success-hover-border);
--button-filled-success-active-background-color: var(--color-success-active);
--button-filled-success-active-border-color: var(--color-success-active-border);
--button-filled-success-disabled-background-color: var(--color-success-disabled);
--button-filled-success-disabled-border-color: var(--color-success-disabled-border);
--button-filled-success-disabled-text-color: var(--text-disabled-color);
--button-filled-info-background-color: var(--color-info-default);
--button-filled-info-border-color: var(--color-info-default-border);
--button-filled-info-text-color: var(--text-control-color);
--button-filled-info-focus-background-color: var(--color-info-focus);
--button-filled-info-focus-border-color: var(--color-info-focus-border);
--button-filled-info-hover-background-color: var(--color-info-hover);
--button-filled-info-hover-border-color: var(--color-info-hover-border);
--button-filled-info-active-background-color: var(--color-info-active);
--button-filled-info-active-border-color: var(--color-info-active-border);
--button-filled-info-disabled-background-color: var(--color-info-disabled);
--button-filled-info-disabled-border-color: var(--color-info-disabled-border);
--button-filled-info-disabled-text-color: var(--text-disabled-color);
--button-filled-warning-background-color: var(--color-warning-default);
--button-filled-warning-border-color: var(--color-warning-default-border);
--button-filled-warning-text-color: var(--text-control-color);
--button-filled-warning-focus-background-color: var(--color-warning-focus);
--button-filled-warning-focus-border-color: var(--color-warning-focus-border);
--button-filled-warning-hover-background-color: var(--color-warning-hover);
--button-filled-warning-hover-border-color: var(--color-warning-hover-border);
--button-filled-warning-active-background-color: var(--color-warning-active);
--button-filled-warning-active-border-color: var(--color-warning-active-border);
--button-filled-warning-disabled-background-color: var(--color-warning-disabled);
--button-filled-warning-disabled-border-color: var(--color-warning-disabled-border);
--button-filled-warning-disabled-text-color: var(--text-disabled-color);
--button-filled-danger-background-color: var(--color-danger-default);
--button-filled-danger-border-color: var(--color-danger-default-border);
--button-filled-danger-text-color: var(--text-control-color);
--button-filled-danger-focus-background-color: var(--color-danger-focus);
--button-filled-danger-focus-border-color: var(--color-danger-focus-border);
--button-filled-danger-hover-background-color: var(--color-danger-hover);
--button-filled-danger-hover-border-color: var(--color-danger-hover-border);
--button-filled-danger-active-background-color: var(--color-danger-active);
--button-filled-danger-active-border-color: var(--color-danger-active-border);
--button-filled-danger-disabled-background-color: var(--color-danger-disabled);
--button-filled-danger-disabled-border-color: var(--color-danger-disabled-border);
--button-filled-danger-disabled-text-color: var(--text-disabled-color);
--button-filled-control-background-color: var(--color-control-default);
--button-filled-control-border-color: var(--color-control-default-border);
--button-filled-control-text-color: var(--color-basic-800);
--button-filled-control-focus-background-color: var(--color-control-focus);
--button-filled-control-focus-border-color: var(--color-control-focus-border);
--button-filled-control-hover-background-color: var(--color-control-hover);
--button-filled-control-hover-border-color: var(--color-control-hover-border);
--button-filled-control-active-background-color: var(--color-control-active);
--button-filled-control-active-border-color: var(--color-control-active-border);
--button-filled-control-disabled-background-color: var(--color-control-disabled);
--button-filled-control-disabled-border-color: var(--color-control-disabled-border);
--button-filled-control-disabled-text-color: var(--text-disabled-color);
--button-outline-border-style: solid;
--button-outline-border-width: 0.0625rem;
--button-outline-text-transform: uppercase;
--button-outline-focus-inset-shadow-length: 0 0 0 100vmax;
--button-outline-tiny-padding: 0.3125rem 0.625rem;
--button-outline-small-padding: 0.4375rem 0.875rem;
--button-outline-medium-padding: 0.6875rem 1.125rem;
--button-outline-large-padding: 0.8125rem 1.125rem;
--button-outline-giant-padding: 0.9375rem 1.375rem;
--button-outline-basic-background-color: var(--color-basic-transparent-default);
--button-outline-basic-border-color: var(--color-basic-transparent-default-border);
--button-outline-basic-text-color: var(--text-hint-color);
--button-outline-basic-focus-background-color: var(--color-basic-transparent-focus);
--button-outline-basic-focus-border-color: var(--color-basic-transparent-focus-border);
--button-outline-basic-focus-text-color: var(--text-hint-color);
--button-outline-basic-hover-background-color: var(--color-basic-transparent-hover);
--button-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border);
--button-outline-basic-hover-text-color: var(--text-hint-color);
--button-outline-basic-active-background-color: var(--color-basic-transparent-active);
--button-outline-basic-active-border-color: var(--color-basic-transparent-active-border);
--button-outline-basic-active-text-color: var(--text-hint-color);
--button-outline-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--button-outline-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--button-outline-basic-disabled-text-color: var(--text-disabled-color);
--button-outline-primary-background-color: var(--color-primary-transparent-default);
--button-outline-primary-border-color: var(--color-primary-transparent-default-border);
--button-outline-primary-text-color: var(--text-primary-color);
--button-outline-primary-focus-background-color: var(--color-primary-transparent-focus);
--button-outline-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--button-outline-primary-focus-text-color: var(--text-primary-color);
--button-outline-primary-hover-background-color: var(--color-primary-transparent-hover);
--button-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--button-outline-primary-hover-text-color: var(--text-primary-color);
--button-outline-primary-active-background-color: var(--color-primary-transparent-active);
--button-outline-primary-active-border-color: var(--color-primary-transparent-active-border);
--button-outline-primary-active-text-color: var(--text-primary-color);
--button-outline-primary-disabled-background-color: var(--color-primary-transparent-disabled);
--button-outline-primary-disabled-border-color: var(--color-primary-transparent-disabled-border);
--button-outline-primary-disabled-text-color: var(--text-disabled-color);
--button-outline-success-background-color: var(--color-success-transparent-default);
--button-outline-success-border-color: var(--color-success-transparent-default-border);
--button-outline-success-text-color: var(--text-success-color);
--button-outline-success-focus-background-color: var(--color-success-transparent-focus);
--button-outline-success-focus-border-color: var(--color-success-transparent-focus-border);
--button-outline-success-focus-text-color: var(--text-success-color);
--button-outline-success-hover-background-color: var(--color-success-transparent-hover);
--button-outline-success-hover-border-color: var(--color-success-transparent-hover-border);
--button-outline-success-hover-text-color: var(--text-success-color);
--button-outline-success-active-background-color: var(--color-success-transparent-active);
--button-outline-success-active-border-color: var(--color-success-transparent-active-border);
--button-outline-success-active-text-color: var(--text-success-color);
--button-outline-success-disabled-background-color: var(--color-success-transparent-disabled);
--button-outline-success-disabled-border-color: var(--color-success-transparent-disabled-border);
--button-outline-success-disabled-text-color: var(--text-disabled-color);
--button-outline-info-background-color: var(--color-info-transparent-default);
--button-outline-info-border-color: var(--color-info-transparent-default-border);
--button-outline-info-text-color: var(--text-info-color);
--button-outline-info-focus-background-color: var(--color-info-transparent-focus);
--button-outline-info-focus-border-color: var(--color-info-transparent-focus-border);
--button-outline-info-focus-text-color: var(--text-info-color);
--button-outline-info-hover-background-color: var(--color-info-transparent-hover);
--button-outline-info-hover-border-color: var(--color-info-transparent-hover-border);
--button-outline-info-hover-text-color: var(--text-info-color);
--button-outline-info-active-background-color: var(--color-info-transparent-active);
--button-outline-info-active-border-color: var(--color-info-transparent-active-border);
--button-outline-info-active-text-color: var(--text-info-color);
--button-outline-info-disabled-background-color: var(--color-info-transparent-disabled);
--button-outline-info-disabled-border-color: var(--color-info-transparent-disabled-border);
--button-outline-info-disabled-text-color: var(--text-disabled-color);
--button-outline-warning-background-color: var(--color-warning-transparent-default);
--button-outline-warning-border-color: var(--color-warning-transparent-default-border);
--button-outline-warning-text-color: var(--text-warning-color);
--button-outline-warning-focus-background-color: var(--color-warning-transparent-focus);
--button-outline-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--button-outline-warning-focus-text-color: var(--text-warning-color);
--button-outline-warning-hover-background-color: var(--color-warning-transparent-hover);
--button-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--button-outline-warning-hover-text-color: var(--text-warning-color);
--button-outline-warning-active-background-color: var(--color-warning-transparent-active);
--button-outline-warning-active-border-color: var(--color-warning-transparent-active-border);
--button-outline-warning-active-text-color: var(--text-warning-color);
--button-outline-warning-disabled-background-color: var(--color-warning-transparent-disabled);
--button-outline-warning-disabled-border-color: var(--color-warning-transparent-disabled-border);
--button-outline-warning-disabled-text-color: var(--text-disabled-color);
--button-outline-danger-background-color: var(--color-danger-transparent-default);
--button-outline-danger-border-color: var(--color-danger-transparent-default-border);
--button-outline-danger-text-color: var(--text-danger-color);
--button-outline-danger-focus-background-color: var(--color-danger-transparent-focus);
--button-outline-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--button-outline-danger-focus-text-color: var(--text-danger-color);
--button-outline-danger-hover-background-color: var(--color-danger-transparent-hover);
--button-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--button-outline-danger-hover-text-color: var(--text-danger-color);
--button-outline-danger-active-background-color: var(--color-danger-transparent-active);
--button-outline-danger-active-border-color: var(--color-danger-transparent-active-border);
--button-outline-danger-active-text-color: var(--text-danger-color);
--button-outline-danger-disabled-background-color: var(--color-danger-transparent-disabled);
--button-outline-danger-disabled-border-color: var(--color-danger-transparent-disabled-border);
--button-outline-danger-disabled-text-color: var(--text-disabled-color);
--button-outline-control-background-color: var(--color-control-transparent-default);
--button-outline-control-border-color: var(--color-control-transparent-default-border);
--button-outline-control-text-color: var(--text-control-color);
--button-outline-control-focus-background-color: var(--color-control-transparent-focus);
--button-outline-control-focus-border-color: var(--color-control-transparent-focus-border);
--button-outline-control-focus-text-color: var(--text-control-color);
--button-outline-control-hover-background-color: var(--color-control-transparent-hover);
--button-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--button-outline-control-hover-text-color: var(--text-control-color);
--button-outline-control-active-background-color: var(--color-control-transparent-active);
--button-outline-control-active-border-color: var(--color-control-transparent-active-border);
--button-outline-control-active-text-color: var(--text-control-color);
--button-outline-control-disabled-background-color: var(--color-control-transparent-disabled);
--button-outline-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--button-outline-control-disabled-text-color: var(--text-disabled-color);
--button-ghost-background-color: transparent;
--button-ghost-border-color: transparent;
--button-ghost-border-style: solid;
--button-ghost-border-width: 0.0625rem;
--button-ghost-text-transform: uppercase;
--button-ghost-focus-inset-shadow-length: 0 0 0 100vmax;
--button-ghost-tiny-padding: 0.3125rem 0.625rem;
--button-ghost-small-padding: 0.4375rem 0.875rem;
--button-ghost-medium-padding: 0.6875rem 1.125rem;
--button-ghost-large-padding: 0.8125rem 1.125rem;
--button-ghost-giant-padding: 0.9375rem 1.375rem;
--button-ghost-basic-text-color: var(--color-basic-600);
--button-ghost-basic-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-basic-focus-text-color: var(--color-basic-600);
--button-ghost-basic-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-basic-hover-border-color: transparent;
--button-ghost-basic-hover-text-color: var(--color-basic-600);
--button-ghost-basic-active-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-active-border-color: transparent;
--button-ghost-basic-active-text-color: var(--color-basic-600);
--button-ghost-basic-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-disabled-border-color: transparent;
--button-ghost-basic-disabled-text-color: var(--text-disabled-color);
--button-ghost-primary-text-color: var(--text-primary-color);
--button-ghost-primary-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-primary-focus-text-color: var(--text-primary-color);
--button-ghost-primary-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-primary-hover-border-color: transparent;
--button-ghost-primary-hover-text-color: var(--text-primary-color);
--button-ghost-primary-active-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-active-border-color: transparent;
--button-ghost-primary-active-text-color: var(--text-primary-color);
--button-ghost-primary-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-disabled-border-color: transparent;
--button-ghost-primary-disabled-text-color: var(--text-disabled-color);
--button-ghost-success-text-color: var(--text-success-color);
--button-ghost-success-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-success-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-success-focus-text-color: var(--text-success-color);
--button-ghost-success-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-success-hover-border-color: transparent;
--button-ghost-success-hover-text-color: var(--text-success-color);
--button-ghost-success-active-background-color: var(--color-basic-transparent-200);
--button-ghost-success-active-border-color: transparent;
--button-ghost-success-active-text-color: var(--text-success-color);
--button-ghost-success-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-success-disabled-border-color: transparent;
--button-ghost-success-disabled-text-color: var(--text-disabled-color);
--button-ghost-info-text-color: var(--text-info-color);
--button-ghost-info-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-info-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-info-focus-text-color: var(--text-info-color);
--button-ghost-info-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-info-hover-border-color: transparent;
--button-ghost-info-hover-text-color: var(--text-info-color);
--button-ghost-info-active-background-color: var(--color-basic-transparent-200);
--button-ghost-info-active-border-color: transparent;
--button-ghost-info-active-text-color: var(--text-info-color);
--button-ghost-info-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-info-disabled-border-color: transparent;
--button-ghost-info-disabled-text-color: var(--text-disabled-color);
--button-ghost-warning-text-color: var(--text-warning-color);
--button-ghost-warning-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-warning-focus-text-color: var(--text-warning-color);
--button-ghost-warning-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-warning-hover-border-color: transparent;
--button-ghost-warning-hover-text-color: var(--text-warning-color);
--button-ghost-warning-active-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-active-border-color: transparent;
--button-ghost-warning-active-text-color: var(--text-warning-color);
--button-ghost-warning-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-disabled-border-color: transparent;
--button-ghost-warning-disabled-text-color: var(--text-disabled-color);
--button-ghost-danger-text-color: var(--text-danger-color);
--button-ghost-danger-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-danger-focus-text-color: var(--text-danger-color);
--button-ghost-danger-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-danger-hover-border-color: transparent;
--button-ghost-danger-hover-text-color: var(--text-danger-color);
--button-ghost-danger-active-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-active-border-color: transparent;
--button-ghost-danger-active-text-color: var(--text-danger-color);
--button-ghost-danger-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-disabled-border-color: transparent;
--button-ghost-danger-disabled-text-color: var(--text-disabled-color);
--button-ghost-control-text-color: var(--color-basic-100);
--button-ghost-control-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-control-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-control-focus-text-color: var(--color-basic-100);
--button-ghost-control-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-control-hover-border-color: transparent;
--button-ghost-control-hover-text-color: var(--color-basic-100);
--button-ghost-control-active-background-color: var(--color-basic-transparent-200);
--button-ghost-control-active-border-color: transparent;
--button-ghost-control-active-text-color: var(--color-basic-100);
--button-ghost-control-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-control-disabled-border-color: transparent;
--button-ghost-control-disabled-text-color: var(--text-disabled-color);
--button-hero-border-color: transparent;
--button-hero-border-style: solid;
--button-hero-border-width: 0;
--button-hero-text-transform: uppercase;
--button-hero-tiny-padding: 0.375rem 0.6875rem;
--button-hero-small-padding: 0.5rem 0.9375rem;
--button-hero-medium-padding: 0.75rem 1.1875rem;
--button-hero-large-padding: 0.875rem 1.1875rem;
--button-hero-giant-padding: 1rem 1.4375rem;
--button-hero-shadow: 0 0 transparent;
--button-hero-text-shadow: var(--shadow);
--button-hero-bevel-size: 0 0 0 0;
--button-hero-glow-size: 0 0 0 0;
--button-hero-outline-color: var(--outline-color);
--button-hero-outline-width: var(--outline-width);
--button-hero-basic-text-color: var(--color-basic-600);
--button-hero-basic-bevel-color: var(--color-basic-600);
--button-hero-basic-glow-color: var(--color-basic-700);
--button-hero-basic-left-background-color: var(--color-basic-200);
--button-hero-basic-right-background-color: var(--color-basic-default);
--button-hero-basic-focus-left-background-color: var(--color-basic-300);
--button-hero-basic-focus-right-background-color: var(--color-basic-focus);
--button-hero-basic-hover-left-background-color: var(--color-basic-100);
--button-hero-basic-hover-right-background-color: var(--color-basic-hover);
--button-hero-basic-active-left-background-color: var(--color-basic-300);
--button-hero-basic-active-right-background-color: var(--color-basic-active);
--button-hero-basic-disabled-background-color: var(--color-basic-disabled);
--button-hero-basic-disabled-text-color: var(--text-disabled-color);
--button-hero-primary-text-color: var(--text-control-color);
--button-hero-primary-bevel-color: var(--color-primary-600);
--button-hero-primary-glow-color: var(--color-primary-700);
--button-hero-primary-left-background-color: var(--color-primary-400);
--button-hero-primary-right-background-color: var(--color-primary-default);
--button-hero-primary-focus-left-background-color: var(--color-primary-500);
--button-hero-primary-focus-right-background-color: var(--color-primary-focus);
--button-hero-primary-hover-left-background-color: var(--color-primary-300);
--button-hero-primary-hover-right-background-color: var(--color-primary-hover);
--button-hero-primary-active-left-background-color: var(--color-primary-500);
--button-hero-primary-active-right-background-color: var(--color-primary-active);
--button-hero-primary-disabled-background-color: var(--color-primary-disabled);
--button-hero-primary-disabled-text-color: var(--text-disabled-color);
--button-hero-success-text-color: var(--text-control-color);
--button-hero-success-bevel-color: var(--color-success-600);
--button-hero-success-glow-color: var(--color-success-700);
--button-hero-success-left-background-color: var(--color-success-400);
--button-hero-success-right-background-color: var(--color-success-default);
--button-hero-success-focus-left-background-color: var(--color-success-500);
--button-hero-success-focus-right-background-color: var(--color-success-focus);
--button-hero-success-hover-left-background-color: var(--color-success-300);
--button-hero-success-hover-right-background-color: var(--color-success-hover);
--button-hero-success-active-left-background-color: var(--color-success-500);
--button-hero-success-active-right-background-color: var(--color-success-active);
--button-hero-success-disabled-background-color: var(--color-success-disabled);
--button-hero-success-disabled-text-color: var(--text-disabled-color);
--button-hero-info-text-color: var(--text-control-color);
--button-hero-info-bevel-color: var(--color-info-600);
--button-hero-info-glow-color: var(--color-info-700);
--button-hero-info-left-background-color: var(--color-info-400);
--button-hero-info-right-background-color: var(--color-info-default);
--button-hero-info-focus-left-background-color: var(--color-info-500);
--button-hero-info-focus-right-background-color: var(--color-info-focus);
--button-hero-info-hover-left-background-color: var(--color-info-300);
--button-hero-info-hover-right-background-color: var(--color-info-hover);
--button-hero-info-active-left-background-color: var(--color-info-500);
--button-hero-info-active-right-background-color: var(--color-info-active);
--button-hero-info-disabled-background-color: var(--color-info-disabled);
--button-hero-info-disabled-text-color: var(--text-disabled-color);
--button-hero-warning-text-color: var(--text-control-color);
--button-hero-warning-bevel-color: var(--color-warning-600);
--button-hero-warning-glow-color: var(--color-warning-700);
--button-hero-warning-left-background-color: var(--color-warning-400);
--button-hero-warning-right-background-color: var(--color-warning-default);
--button-hero-warning-focus-left-background-color: var(--color-warning-500);
--button-hero-warning-focus-right-background-color: var(--color-warning-focus);
--button-hero-warning-hover-left-background-color: var(--color-warning-300);
--button-hero-warning-hover-right-background-color: var(--color-warning-hover);
--button-hero-warning-active-left-background-color: var(--color-warning-500);
--button-hero-warning-active-right-background-color: var(--color-warning-active);
--button-hero-warning-disabled-background-color: var(--color-warning-disabled);
--button-hero-warning-disabled-text-color: var(--text-disabled-color);
--button-hero-danger-text-color: var(--text-control-color);
--button-hero-danger-bevel-color: var(--color-danger-600);
--button-hero-danger-glow-color: var(--color-danger-700);
--button-hero-danger-left-background-color: var(--color-danger-400);
--button-hero-danger-right-background-color: var(--color-danger-default);
--button-hero-danger-focus-left-background-color: var(--color-danger-500);
--button-hero-danger-focus-right-background-color: var(--color-danger-focus);
--button-hero-danger-hover-left-background-color: var(--color-danger-300);
--button-hero-danger-hover-right-background-color: var(--color-danger-hover);
--button-hero-danger-active-left-background-color: var(--color-danger-500);
--button-hero-danger-active-right-background-color: var(--color-danger-active);
--button-hero-danger-disabled-background-color: var(--color-danger-disabled);
--button-hero-danger-disabled-text-color: var(--text-disabled-color);
--button-hero-control-text-color: var(--color-basic-800);
--button-hero-control-bevel-color: var(--color-basic-600);
--button-hero-control-glow-color: var(--color-basic-700);
--button-hero-control-left-background-color: var(--color-control-default);
--button-hero-control-right-background-color: var(--color-control-default);
--button-hero-control-focus-left-background-color: var(--color-basic-200);
--button-hero-control-focus-right-background-color: var(--color-control-focus);
--button-hero-control-hover-left-background-color: var(--color-basic-100);
--button-hero-control-hover-right-background-color: var(--color-control-hover);
--button-hero-control-active-left-background-color: var(--color-basic-200);
--button-hero-control-active-right-background-color: var(--color-control-active);
--button-hero-control-disabled-background-color: var(--color-basic-transparent-300);
--button-hero-control-disabled-text-color: var(--text-disabled-color);
--button-group-filled-button-basic-text-color: var(--text-hint-color);
--button-group-filled-button-primary-text-color: var(--button-filled-primary-text-color);
--button-group-filled-button-success-text-color: var(--button-filled-success-text-color);
--button-group-filled-button-info-text-color: var(--button-filled-info-text-color);
--button-group-filled-button-warning-text-color: var(--button-filled-warning-text-color);
--button-group-filled-button-danger-text-color: var(--button-filled-danger-text-color);
--button-group-filled-button-control-text-color: var(--button-filled-control-text-color);
--button-group-filled-basic-divider-color: var(--color-basic-focus-border);
--button-group-filled-primary-divider-color: var(--color-primary-focus);
--button-group-filled-success-divider-color: var(--color-success-focus);
--button-group-filled-info-divider-color: var(--color-info-focus);
--button-group-filled-warning-divider-color: var(--color-warning-focus);
--button-group-filled-danger-divider-color: var(--color-danger-focus);
--button-group-filled-control-divider-color: var(--color-control-focus);
--button-group-ghost-divider-color: var(--color-basic-focus-border);
--icon-button-filled-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-filled-small-padding: 0.5625rem 0.4375rem;
--icon-button-filled-medium-padding: 0.6875rem 0.5625rem;
--icon-button-filled-large-padding: 0.8125rem 0.6875rem;
--icon-button-filled-giant-padding: 1.0625rem 0.9375rem;
--icon-button-outline-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-outline-small-padding: 0.5625rem 0.4375rem;
--icon-button-outline-medium-padding: 0.6875rem 0.5625rem;
--icon-button-outline-large-padding: 0.8125rem 0.6875rem;
--icon-button-outline-giant-padding: 1.0625rem 0.9375rem;
--icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-ghost-small-padding: 0.5625rem 0.4375rem;
--icon-button-ghost-medium-padding: 0.6875rem 0.5625rem;
--icon-button-ghost-large-padding: 0.8125rem 0.6875rem;
--icon-button-ghost-giant-padding: 1.0625rem 0.9375rem;
--icon-button-hero-tiny-padding: 0.5rem 0.375rem;
--icon-button-hero-small-padding: 0.5625rem 0.5rem;
--icon-button-hero-medium-padding: 0.75rem 0.5625rem;
--icon-button-hero-large-padding: 0.875rem 0.6875rem;
--icon-button-hero-giant-padding: 1.0625rem 1rem;
--input-border-style: solid;
--input-border-width: 1px;
--input-outline-color: var(--outline-color);
--input-outline-width: var(--outline-width);
--input-placeholder-text-font-family: var(--text-paragraph-font-family);
--input-text-font-family: var(--text-subtitle-font-family);
--input-basic-text-color: var(--text-basic-color);
--input-basic-placeholder-text-color: var(--text-hint-color);
--input-basic-background-color: var(--background-basic-color-2);
--input-basic-border-color: var(--border-basic-color-4);
--input-basic-focus-background-color: var(--background-basic-color-1);
--input-basic-focus-border-color: var(--color-primary-default-border);
--input-basic-hover-background-color: var(--background-basic-color-3);
--input-basic-hover-border-color: var(--border-basic-color-4);
--input-basic-disabled-background-color: var(--background-basic-color-2);
--input-basic-disabled-border-color: var(--border-basic-color-4);
--input-basic-disabled-text-color: var(--text-disabled-color);
--input-basic-disabled-placeholder-text-color: var(--text-disabled-color);
--input-primary-text-color: var(--text-basic-color);
--input-primary-placeholder-text-color: var(--text-hint-color);
--input-primary-background-color: var(--background-basic-color-2);
--input-primary-border-color: var(--color-primary-default);
--input-primary-focus-background-color: var(--background-basic-color-1);
--input-primary-focus-border-color: var(--color-primary-focus-border);
--input-primary-hover-background-color: var(--background-basic-color-3);
--input-primary-hover-border-color: var(--color-primary-hover-border);
--input-primary-disabled-background-color: var(--background-basic-color-2);
--input-primary-disabled-border-color: var(--border-basic-color-4);
--input-primary-disabled-text-color: var(--text-disabled-color);
--input-primary-disabled-placeholder-text-color: var(--text-disabled-color);
--input-success-text-color: var(--text-basic-color);
--input-success-placeholder-text-color: var(--text-hint-color);
--input-success-background-color: var(--background-basic-color-2);
--input-success-border-color: var(--color-success-default);
--input-success-focus-background-color: var(--background-basic-color-1);
--input-success-focus-border-color: var(--color-success-focus-border);
--input-success-hover-background-color: var(--background-basic-color-3);
--input-success-hover-border-color: var(--color-success-hover-border);
--input-success-disabled-background-color: var(--background-basic-color-2);
--input-success-disabled-border-color: var(--border-basic-color-4);
--input-success-disabled-text-color: var(--text-disabled-color);
--input-success-disabled-placeholder-text-color: var(--text-disabled-color);
--input-info-text-color: var(--text-basic-color);
--input-info-placeholder-text-color: var(--text-hint-color);
--input-info-background-color: var(--background-basic-color-2);
--input-info-border-color: var(--color-info-default);
--input-info-focus-background-color: var(--background-basic-color-1);
--input-info-focus-border-color: var(--color-info-focus-border);
--input-info-hover-background-color: var(--background-basic-color-3);
--input-info-hover-border-color: var(--color-info-hover-border);
--input-info-disabled-background-color: var(--background-basic-color-2);
--input-info-disabled-border-color: var(--border-basic-color-4);
--input-info-disabled-text-color: var(--text-disabled-color);
--input-info-disabled-placeholder-text-color: var(--text-disabled-color);
--input-warning-text-color: var(--text-basic-color);
--input-warning-placeholder-text-color: var(--text-hint-color);
--input-warning-background-color: var(--background-basic-color-2);
--input-warning-border-color: var(--color-warning-default);
--input-warning-focus-background-color: var(--background-basic-color-1);
--input-warning-focus-border-color: var(--color-warning-focus-border);
--input-warning-hover-background-color: var(--background-basic-color-3);
--input-warning-hover-border-color: var(--color-warning-hover-border);
--input-warning-disabled-background-color: var(--background-basic-color-2);
--input-warning-disabled-border-color: var(--border-basic-color-4);
--input-warning-disabled-text-color: var(--text-disabled-color);
--input-warning-disabled-placeholder-text-color: var(--text-disabled-color);
--input-danger-text-color: var(--text-basic-color);
--input-danger-placeholder-text-color: var(--text-hint-color);
--input-danger-background-color: var(--background-basic-color-2);
--input-danger-border-color: var(--color-danger-default);
--input-danger-focus-background-color: var(--background-basic-color-1);
--input-danger-focus-border-color: var(--color-danger-focus-border);
--input-danger-hover-background-color: var(--background-basic-color-3);
--input-danger-hover-border-color: var(--color-danger-hover-border);
--input-danger-disabled-background-color: var(--background-basic-color-2);
--input-danger-disabled-border-color: var(--border-basic-color-4);
--input-danger-disabled-text-color: var(--text-disabled-color);
--input-danger-disabled-placeholder-text-color: var(--text-disabled-color);
--input-control-text-color: var(--text-control-color);
--input-control-placeholder-text-color: var(--text-control-color);
--input-control-background-color: var(--color-basic-control-transparent-300);
--input-control-border-color: var(--color-basic-control-transparent-500);
--input-control-focus-background-color: var(--color-basic-control-transparent-500);
--input-control-focus-border-color: var(--color-control-transparent-focus-border);
--input-control-hover-background-color: var(--color-basic-control-transparent-400);
--input-control-hover-border-color: var(--color-control-transparent-hover-border);
--input-control-disabled-background-color: var(--color-control-transparent-disabled);
--input-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--input-control-disabled-text-color: var(--text-control-color);
--input-control-disabled-placeholder-text-color: var(--text-control-color);
--input-rectangle-border-radius: var(--border-radius);
--input-semi-round-border-radius: 0.75rem;
--input-round-border-radius: 1.5rem;
--input-tiny-text-font-size: var(--text-caption-2-font-size);
--input-tiny-text-font-weight: var(--text-caption-2-font-weight);
--input-tiny-text-line-height: var(--text-caption-2-line-height);
--input-tiny-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-tiny-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-tiny-padding: 0.1875rem 1rem;
--input-tiny-max-width: 20rem;
--input-small-text-font-size: var(--text-subtitle-2-font-size);
--input-small-text-font-weight: var(--text-subtitle-2-font-weight);
--input-small-text-line-height: var(--text-subtitle-2-line-height);
--input-small-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-small-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-small-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-small-padding: 0.1875rem 1rem;
--input-small-max-width: 20rem;
--input-medium-text-font-size: var(--text-subtitle-font-size);
--input-medium-text-font-weight: var(--text-subtitle-font-weight);
--input-medium-text-line-height: var(--text-subtitle-line-height);
--input-medium-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-medium-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-medium-padding: 0.4375rem 1rem;
--input-medium-max-width: 20rem;
--input-large-text-font-size: var(--text-subtitle-font-size);
--input-large-text-font-weight: var(--text-subtitle-font-weight);
--input-large-text-line-height: var(--text-subtitle-line-height);
--input-large-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-large-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-large-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-large-padding: 0.6875rem 1rem;
--input-large-max-width: 30rem;
--input-giant-text-font-size: var(--text-heading-6-font-size);
--input-giant-text-font-weight: var(--text-heading-6-font-weight);
--input-giant-text-line-height: var(--text-heading-6-line-height);
--input-giant-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-giant-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-giant-padding: 0.9375rem 1rem;
--input-giant-max-width: 30rem;
--checkbox-height: 1.25rem;
--checkbox-width: 1.25rem;
--checkbox-border-style: solid;
--checkbox-border-width: 1px;
--checkbox-border-radius: 3px;
--checkbox-outline-width: var(--outline-width);
--checkbox-outline-color: var(--outline-color);
--checkbox-text-font-family: var(--text-subtitle-2-font-family);
--checkbox-text-font-size: var(--text-subtitle-2-font-size);
--checkbox-text-font-weight: var(--text-subtitle-2-font-weight);
--checkbox-text-line-height: var(--text-subtitle-2-line-height);
--checkbox-text-space: 0.6875rem;
--checkbox-padding: 0;
--checkbox-focus-inset-shadow-length: 0 0 0 100vmax;
--checkbox-basic-text-color: var(--text-basic-color);
--checkbox-basic-background-color: var(--color-basic-transparent-default);
--checkbox-basic-border-color: var(--color-basic-transparent-default-border);
--checkbox-basic-checked-background-color: var(--color-primary-default);
--checkbox-basic-checked-border-color: var(--color-primary-default-border);
--checkbox-basic-checked-checkmark-color: var(--text-control-color);
--checkbox-basic-indeterminate-background-color: var(--color-primary-default);
--checkbox-basic-indeterminate-border-color: var(--color-primary-default-border);
--checkbox-basic-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-basic-focus-background-color: var(--color-basic-transparent-focus);
--checkbox-basic-focus-border-color: var(--color-basic-transparent-focus-border);
--checkbox-basic-focus-checked-background-color: var(--color-primary-focus);
--checkbox-basic-focus-checked-border-color: var(--color-primary-focus-border);
--checkbox-basic-hover-background-color: var(--color-primary-transparent-hover);
--checkbox-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--checkbox-basic-hover-checked-background-color: var(--color-primary-hover);
--checkbox-basic-hover-checked-border-color: var(--color-primary-hover-border);
--checkbox-basic-active-background-color: var(--color-basic-transparent-active);
--checkbox-basic-active-border-color: var(--color-basic-transparent-active-border);
--checkbox-basic-active-checked-background-color: var(--color-primary-active);
--checkbox-basic-active-checked-border-color: var(--color-primary-active-border);
--checkbox-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-basic-disabled-checkmark-color: var(--text-control-color);
--checkbox-basic-disabled-text-color: var(--text-disabled-color);
--checkbox-basic-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-basic-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-primary-text-color: var(--text-basic-color);
--checkbox-primary-background-color: var(--color-primary-transparent-default);
--checkbox-primary-border-color: var(--color-primary-transparent-default-border);
--checkbox-primary-checked-background-color: var(--color-primary-default);
--checkbox-primary-checked-border-color: var(--color-primary-default-border);
--checkbox-primary-checked-checkmark-color: var(--text-control-color);
--checkbox-primary-indeterminate-background-color: var(--color-primary-default);
--checkbox-primary-indeterminate-border-color: var(--color-primary-default-border);
--checkbox-primary-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-primary-focus-background-color: var(--color-primary-transparent-focus);
--checkbox-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--checkbox-primary-focus-checked-background-color: var(--color-primary-focus);
--checkbox-primary-focus-checked-border-color: var(--color-primary-focus-border);
--checkbox-primary-hover-background-color: var(--color-primary-transparent-hover);
--checkbox-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--checkbox-primary-hover-checked-background-color: var(--color-primary-hover);
--checkbox-primary-hover-checked-border-color: var(--color-primary-hover-border);
--checkbox-primary-active-background-color: var(--color-primary-transparent-active);
--checkbox-primary-active-border-color: var(--color-primary-transparent-active-border);
--checkbox-primary-active-checked-background-color: var(--color-primary-active);
--checkbox-primary-active-checked-border-color: var(--color-primary-active-border);
--checkbox-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-primary-disabled-checkmark-color: var(--text-control-color);
--checkbox-primary-disabled-text-color: var(--text-disabled-color);
--checkbox-primary-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-primary-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-success-text-color: var(--text-basic-color);
--checkbox-success-background-color: var(--color-success-transparent-default);
--checkbox-success-border-color: var(--color-success-transparent-default-border);
--checkbox-success-checked-background-color: var(--color-success-default);
--checkbox-success-checked-border-color: var(--color-success-default-border);
--checkbox-success-checked-checkmark-color: var(--text-control-color);
--checkbox-success-indeterminate-background-color: var(--color-success-default);
--checkbox-success-indeterminate-border-color: var(--color-success-default-border);
--checkbox-success-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-success-focus-background-color: var(--color-success-transparent-focus);
--checkbox-success-focus-border-color: var(--color-success-transparent-focus-border);
--checkbox-success-focus-checked-background-color: var(--color-success-focus);
--checkbox-success-focus-checked-border-color: var(--color-success-focus-border);
--checkbox-success-hover-background-color: var(--color-success-transparent-hover);
--checkbox-success-hover-border-color: var(--color-success-transparent-hover-border);
--checkbox-success-hover-checked-background-color: var(--color-success-hover);
--checkbox-success-hover-checked-border-color: var(--color-success-hover-border);
--checkbox-success-active-background-color: var(--color-success-transparent-active);
--checkbox-success-active-border-color: var(--color-success-transparent-active-border);
--checkbox-success-active-checked-background-color: var(--color-success-active);
--checkbox-success-active-checked-border-color: var(--color-success-active-border);
--checkbox-success-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-success-disabled-checkmark-color: var(--text-control-color);
--checkbox-success-disabled-text-color: var(--text-disabled-color);
--checkbox-success-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-success-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-info-text-color: var(--text-basic-color);
--checkbox-info-background-color: var(--color-info-transparent-default);
--checkbox-info-border-color: var(--color-info-transparent-default-border);
--checkbox-info-checked-background-color: var(--color-info-default);
--checkbox-info-checked-border-color: var(--color-info-default-border);
--checkbox-info-checked-checkmark-color: var(--text-control-color);
--checkbox-info-indeterminate-background-color: var(--color-info-default);
--checkbox-info-indeterminate-border-color: var(--color-info-default-border);
--checkbox-info-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-info-focus-background-color: var(--color-info-transparent-focus);
--checkbox-info-focus-border-color: var(--color-info-transparent-focus-border);
--checkbox-info-focus-checked-background-color: var(--color-info-focus);
--checkbox-info-focus-checked-border-color: var(--color-info-focus-border);
--checkbox-info-hover-background-color: var(--color-info-transparent-hover);
--checkbox-info-hover-border-color: var(--color-info-transparent-hover-border);
--checkbox-info-hover-checked-background-color: var(--color-info-hover);
--checkbox-info-hover-checked-border-color: var(--color-info-hover-border);
--checkbox-info-active-background-color: var(--color-info-transparent-active);
--checkbox-info-active-border-color: var(--color-info-transparent-active-border);
--checkbox-info-active-checked-background-color: var(--color-info-active);
--checkbox-info-active-checked-border-color: var(--color-info-active-border);
--checkbox-info-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-info-disabled-checkmark-color: var(--text-control-color);
--checkbox-info-disabled-text-color: var(--text-disabled-color);
--checkbox-info-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-info-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-warning-text-color: var(--text-basic-color);
--checkbox-warning-background-color: var(--color-warning-transparent-default);
--checkbox-warning-border-color: var(--color-warning-transparent-default-border);
--checkbox-warning-checked-background-color: var(--color-warning-default);
--checkbox-warning-checked-border-color: var(--color-warning-default-border);
--checkbox-warning-checked-checkmark-color: var(--text-control-color);
--checkbox-warning-indeterminate-background-color: var(--color-warning-default);
--checkbox-warning-indeterminate-border-color: var(--color-warning-default-border);
--checkbox-warning-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-warning-focus-background-color: var(--color-warning-transparent-focus);
--checkbox-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--checkbox-warning-focus-checked-background-color: var(--color-warning-focus);
--checkbox-warning-focus-checked-border-color: var(--color-warning-focus-border);
--checkbox-warning-hover-background-color: var(--color-warning-transparent-hover);
--checkbox-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--checkbox-warning-hover-checked-background-color: var(--color-warning-hover);
--checkbox-warning-hover-checked-border-color: var(--color-warning-hover-border);
--checkbox-warning-active-background-color: var(--color-warning-transparent-active);
--checkbox-warning-active-border-color: var(--color-warning-transparent-active-border);
--checkbox-warning-active-checked-background-color: var(--color-warning-active);
--checkbox-warning-active-checked-border-color: var(--color-warning-active-border);
--checkbox-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-warning-disabled-checkmark-color: var(--text-control-color);
--checkbox-warning-disabled-text-color: var(--text-disabled-color);
--checkbox-warning-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-warning-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-danger-text-color: var(--text-basic-color);
--checkbox-danger-background-color: var(--color-danger-transparent-default);
--checkbox-danger-border-color: var(--color-danger-transparent-default-border);
--checkbox-danger-checked-background-color: var(--color-danger-default);
--checkbox-danger-checked-border-color: var(--color-danger-default-border);
--checkbox-danger-checked-checkmark-color: var(--text-control-color);
--checkbox-danger-indeterminate-background-color: var(--color-danger-default);
--checkbox-danger-indeterminate-border-color: var(--color-danger-default-border);
--checkbox-danger-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-danger-focus-background-color: var(--color-danger-transparent-focus);
--checkbox-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--checkbox-danger-focus-checked-background-color: var(--color-danger-focus);
--checkbox-danger-focus-checked-border-color: var(--color-danger-focus-border);
--checkbox-danger-hover-background-color: var(--color-danger-transparent-hover);
--checkbox-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--checkbox-danger-hover-checked-background-color: var(--color-danger-hover);
--checkbox-danger-hover-checked-border-color: var(--color-danger-hover-border);
--checkbox-danger-active-background-color: var(--color-danger-transparent-active);
--checkbox-danger-active-border-color: var(--color-danger-transparent-active-border);
--checkbox-danger-active-checked-background-color: var(--color-danger-active);
--checkbox-danger-active-checked-border-color: var(--color-danger-active-border);
--checkbox-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-danger-disabled-checkmark-color: var(--text-control-color);
--checkbox-danger-disabled-text-color: var(--text-disabled-color);
--checkbox-danger-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-danger-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-control-text-color: var(--text-control-color);
--checkbox-control-background-color: var(--color-control-transparent-default);
--checkbox-control-border-color: var(--color-control-transparent-default-border);
--checkbox-control-checked-background-color: var(--color-control-default);
--checkbox-control-checked-border-color: var(--color-control-default-border);
--checkbox-control-checked-checkmark-color: var(--color-basic-800);
--checkbox-control-indeterminate-background-color: var(--color-control-default);
--checkbox-control-indeterminate-border-color: var(--color-control-default-border);
--checkbox-control-indeterminate-checkmark-color: var(--color-basic-800);
--checkbox-control-focus-background-color: var(--color-control-transparent-focus);
--checkbox-control-focus-border-color: var(--color-control-transparent-focus-border);
--checkbox-control-focus-checked-background-color: var(--color-control-focus);
--checkbox-control-focus-checked-border-color: var(--color-control-focus-border);
--checkbox-control-hover-background-color: var(--color-control-transparent-hover);
--checkbox-control-hover-border-color: var(--color-control-transparent-hover-border);
--checkbox-control-hover-checked-background-color: var(--color-control-hover);
--checkbox-control-hover-checked-border-color: var(--color-control-hover-border);
--checkbox-control-active-background-color: var(--color-control-transparent-active);
--checkbox-control-active-border-color: var(--color-control-transparent-active-border);
--checkbox-control-active-checked-background-color: var(--color-control-active);
--checkbox-control-active-checked-border-color: var(--color-control-active-border);
--checkbox-control-disabled-background-color: var(--color-control-transparent-disabled);
--checkbox-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--checkbox-control-disabled-checkmark-color: var(--text-control-color);
--checkbox-control-disabled-text-color: var(--text-control-color);
--checkbox-control-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-control-disabled-checked-border-color: var(--color-basic-transparent-600);
--badge-dot-mode-border-radius: 0.5rem;
--badge-dot-mode-padding: 0.3rem;
--badge-border-radius: var(--border-radius);
--badge-text-font-family: var(--text-button-font-family);
--badge-text-font-size: var(--text-button-tiny-font-size);
--badge-text-font-weight: var(--text-button-font-weight);
--badge-text-line-height: var(--text-button-tiny-line-height);
--badge-padding: 0.25rem 0.4rem;
--badge-basic-background-color: var(--background-basic-color-2);
--badge-basic-text-color: var(--text-basic-color);
--badge-primary-background-color: var(--color-primary-default);
--badge-primary-text-color: var(--text-control-color);
--badge-success-background-color: var(--color-success-default);
--badge-success-text-color: var(--text-control-color);
--badge-info-background-color: var(--color-info-default);
--badge-info-text-color: var(--text-control-color);
--badge-warning-background-color: var(--color-warning-default);
--badge-warning-text-color: var(--text-control-color);
--badge-danger-background-color: var(--color-danger-default);
--badge-danger-text-color: var(--text-control-color);
--badge-control-background-color: var(--color-control-default);
--badge-control-text-color: var(--color-basic-800);
--progress-bar-animation-duration: 400ms;
--progress-bar-border-radius: var(--border-radius);
--progress-bar-text-font-family: var(--text-subtitle-font-family);
--progress-bar-tiny-height: 1rem;
--progress-bar-tiny-text-font-size: var(--text-subtitle-2-font-size);
--progress-bar-tiny-text-font-weight: var(--text-subtitle-2-font-weight);
--progress-bar-tiny-text-line-height: var(--text-subtitle-2-line-height);
--progress-bar-small-height: 1.25rem;
--progress-bar-small-text-font-size: var(--text-subtitle-2-font-size);
--progress-bar-small-text-font-weight: var(--text-subtitle-2-font-weight);
--progress-bar-small-text-line-height: var(--text-subtitle-2-line-height);
--progress-bar-medium-height: 1.375rem;
--progress-bar-medium-text-font-size: var(--text-subtitle-font-size);
--progress-bar-medium-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-medium-text-line-height: var(--text-subtitle-line-height);
--progress-bar-large-height: 1.5rem;
--progress-bar-large-text-font-size: var(--text-subtitle-font-size);
--progress-bar-large-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-large-text-line-height: var(--text-subtitle-line-height);
--progress-bar-giant-height: 1.75rem;
--progress-bar-giant-text-font-size: var(--text-subtitle-font-size);
--progress-bar-giant-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-giant-text-line-height: var(--text-subtitle-line-height);
--progress-bar-basic-background-color: var(--background-basic-color-2);
--progress-bar-basic-filled-background-color: var(--background-basic-color-4);
--progress-bar-basic-text-color: var(--text-basic-color);
--progress-bar-primary-background-color: var(--background-basic-color-3);
--progress-bar-primary-filled-background-color: var(--color-primary-default);
--progress-bar-primary-text-color: var(--text-control-color);
--progress-bar-success-background-color: var(--background-basic-color-3);
--progress-bar-success-filled-background-color: var(--color-success-default);
--progress-bar-success-text-color: var(--text-control-color);
--progress-bar-info-background-color: var(--background-basic-color-3);
--progress-bar-info-filled-background-color: var(--color-info-default);
--progress-bar-info-text-color: var(--text-control-color);
--progress-bar-warning-background-color: var(--background-basic-color-3);
--progress-bar-warning-filled-background-color: var(--color-warning-default);
--progress-bar-warning-text-color: var(--text-control-color);
--progress-bar-danger-background-color: var(--background-basic-color-3);
--progress-bar-danger-filled-background-color: var(--color-danger-default);
--progress-bar-danger-text-color: var(--text-control-color);
--progress-bar-control-background-color: var(--background-basic-color-3);
--progress-bar-control-filled-background-color: var(--color-control-default);
--progress-bar-control-text-color: var(--color-basic-800);
--alert-border-radius: var(--border-radius);
--alert-bottom-margin: 1.5rem;
--alert-padding: 1rem 1.125rem;
--alert-scrollbar-color: var(--scrollbar-color);
--alert-scrollbar-background-color: var(--scrollbar-background-color);
--alert-scrollbar-width: var(--scrollbar-width);
--alert-shadow: none;
--alert-text-font-family: var(--text-paragraph-font-family);
--alert-text-font-size: var(--text-subtitle-font-size);
--alert-text-font-weight: var(--text-subtitle-font-weight);
--alert-text-line-height: var(--text-subtitle-line-height);
--alert-closable-start-padding: 3rem;
--alert-tiny-height: 4.5rem;
--alert-small-height: 5.75rem;
--alert-medium-height: 7rem;
--alert-medium-padding: 1rem 1.125rem;
--alert-large-height: 8.25rem;
--alert-giant-height: 9.5rem;
--alert-basic-background-color: var(--background-basic-color-2);
--alert-basic-text-color: var(--text-basic-color);
--alert-primary-background-color: var(--color-primary-default);
--alert-primary-text-color: var(--text-control-color);
--alert-success-background-color: var(--color-success-default);
--alert-success-text-color: var(--text-control-color);
--alert-info-background-color: var(--color-info-default);
--alert-info-text-color: var(--text-control-color);
--alert-warning-background-color: var(--color-warning-default);
--alert-warning-text-color: var(--text-control-color);
--alert-danger-background-color: var(--color-danger-default);
--alert-danger-text-color: var(--text-control-color);
--alert-control-background-color: var(--color-control-default);
--alert-control-text-color: var(--color-basic-800);
--alert-accent-basic-color: var(--border-basic-color-3);
--alert-accent-primary-color: var(--color-primary-default);
--alert-accent-info-color: var(--color-info-default);
--alert-accent-success-color: var(--color-success-default);
--alert-accent-warning-color: var(--color-warning-default);
--alert-accent-danger-color: var(--color-danger-default);
--alert-accent-control-color: var(--color-control-default);
--alert-outline-width: 1px;
--alert-outline-basic-color: var(--color-basic-focus-border);
--alert-outline-primary-color: var(--color-primary-focus-border);
--alert-outline-info-color: var(--color-info-focus-border);
--alert-outline-success-color: var(--color-success-focus-border);
--alert-outline-warning-color: var(--color-warning-focus-border);
--alert-outline-danger-color: var(--color-danger-focus-border);
--alert-outline-control-color: var(--color-control-focus-border);
--chat-background-color: var(--background-basic-color-1);
--chat-border: none;
--chat-border-radius: var(--border-radius);
--chat-shadow: var(--shadow);
--chat-padding: 1rem 1.25rem;
--chat-scrollbar-color: var(--scrollbar-color);
--chat-scrollbar-background-color: var(--scrollbar-background-color);
--chat-scrollbar-width: var(--scrollbar-width);
--chat-text-color: var(--text-basic-color);
--chat-text-font-family: var(--text-paragraph-font-family);
--chat-text-font-size: var(--text-paragraph-font-size);
--chat-text-font-weight: var(--text-paragraph-font-weight);
--chat-text-line-height: var(--text-paragraph-line-height);
--chat-header-text-font-family: var(--text-subtitle-font-family);
--chat-header-text-font-size: var(--text-subtitle-font-size);
--chat-header-text-font-weight: var(--text-subtitle-font-weight);
--chat-header-text-line-height: var(--text-subtitle-line-height);
--chat-tiny-height: 13.5rem;
--chat-small-height: 21rem;
--chat-medium-height: 28.5rem;
--chat-large-height: 36rem;
--chat-giant-height: 43.5rem;
--chat-basic-background-color: var(--background-basic-color-1);
--chat-basic-text-color: var(--text-basic-color);
--chat-primary-background-color: var(--color-primary-default);
--chat-primary-text-color: var(--text-control-color);
--chat-success-background-color: var(--color-success-default);
--chat-success-text-color: var(--text-control-color);
--chat-info-background-color: var(--color-info-default);
--chat-info-text-color: var(--text-control-color);
--chat-warning-background-color: var(--color-warning-default);
--chat-warning-text-color: var(--text-control-color);
--chat-danger-background-color: var(--color-danger-default);
--chat-danger-text-color: var(--text-control-color);
--chat-control-background-color: var(--color-control-default);
--chat-control-text-color: var(--color-basic-800);
--chat-divider-color: var(--divider-color);
--chat-divider-style: var(--divider-style);
--chat-divider-width: var(--divider-width);
--chat-message-background: var(--color-primary-default);
--chat-message-text-color: var(--text-control-color);
--chat-message-reply-background-color: var(--background-basic-color-2);
--chat-message-reply-text-color: var(--text-basic-color);
--chat-message-avatar-background-color: var(--color-basic-500);
--chat-message-sender-text-color: var(--text-hint-color);
--chat-message-quote-background-color: var(--background-basic-color-2);
--chat-message-quote-text-color: var(--text-hint-color);
--chat-message-file-text-color: var(--text-hint-color);
--chat-message-file-background-color: transparent;
--spinner-text-color: var(--text-basic-color);
--spinner-text-font-family: var(--text-button-font-family);
--spinner-text-font-size: var(--text-button-medium-font-size);
--spinner-text-font-weight: var(--text-button-font-weight);
--spinner-text-line-height: var(--text-button-medium-line-height);
--spinner-basic-background-color: var(--color-basic-transparent-200);
--spinner-basic-circle-filled-color: var(--text-hint-color);
--spinner-basic-circle-empty-color: transparent;
--spinner-primary-background-color: var(--color-basic-transparent-200);
--spinner-primary-circle-filled-color: var(--color-primary-default);
--spinner-primary-circle-empty-color: transparent;
--spinner-info-background-color: var(--color-basic-transparent-200);
--spinner-info-circle-filled-color: var(--color-info-default);
--spinner-info-circle-empty-color: transparent;
--spinner-success-background-color: var(--color-basic-transparent-200);
--spinner-success-circle-filled-color: var(--color-success-default);
--spinner-success-circle-empty-color: transparent;
--spinner-warning-background-color: var(--color-basic-transparent-200);
--spinner-warning-circle-filled-color: var(--color-warning-default);
--spinner-warning-circle-empty-color: transparent;
--spinner-danger-background-color: var(--color-basic-transparent-200);
--spinner-danger-circle-filled-color: var(--color-danger-default);
--spinner-danger-circle-empty-color: transparent;
--spinner-control-background-color: var(--color-basic-control-transparent-200);
--spinner-control-circle-filled-color: var(--color-control-default);
--spinner-control-circle-empty-color: transparent;
--spinner-height-tiny: 1rem;
--spinner-height-small: 1.25rem;
--spinner-height-medium: 1.5rem;
--spinner-height-large: 1.75rem;
--spinner-height-giant: 2rem;
--stepper-step-text-color: var(--text-hint-color);
--stepper-step-text-font-family: var(--text-paragraph-font-family);
--stepper-step-text-font-size: var(--text-paragraph-font-size);
--stepper-step-text-font-weight: var(--text-paragraph-font-weight);
--stepper-step-text-line-height: var(--text-paragraph-line-height);
--stepper-step-active-text-color: var(--text-primary-active-color);
--stepper-step-completed-text-color: var(--text-primary-color);
--stepper-step-index-border-color: var(--border-basic-color-4);
--stepper-step-index-border-style: solid;
--stepper-step-index-border-width: 1px;
--stepper-step-index-border-radius: 50%;
--stepper-step-index-width: 2rem;
--stepper-step-index-active-border-color: var(--color-primary-active);
--stepper-step-index-completed-background-color: var(--color-primary-default);
--stepper-step-index-completed-border-color: var(--color-primary-default);
--stepper-step-index-completed-text-color: var(--text-control-color);
--stepper-connector-background-color: var(--background-basic-color-3);
--stepper-connector-completed-background-color: var(--color-primary-default);
--stepper-horizontal-connector-margin: 1rem;
--stepper-vertical-connector-margin: 1rem;
--stepper-step-content-padding: 1.25rem;
--accordion-border-radius: var(--border-radius);
--accordion-padding: 1.25rem;
--accordion-shadow: var(--shadow);
--accordion-header-text-color: var(--text-basic-color);
--accordion-header-text-font-family: var(--text-subtitle-font-family);
--accordion-header-text-font-size: var(--text-subtitle-font-size);
--accordion-header-text-font-weight: var(--text-subtitle-font-weight);
--accordion-header-text-line-height: var(--text-subtitle-line-height);
--accordion-header-disabled-text-color: var(--text-disabled-color);
--accordion-header-border-color: var(--border-basic-color-3);
--accordion-header-border-style: solid;
--accordion-header-border-width: 1px;
--accordion-item-background-color: var(--background-basic-color-1);
--accordion-item-text-color: var(--text-basic-color);
--accordion-item-text-font-family: var(--text-paragraph-font-family);
--accordion-item-text-font-size: var(--text-paragraph-font-size);
--accordion-item-text-font-weight: var(--text-paragraph-font-weight);
--accordion-item-text-line-height: var(--text-paragraph-line-height);
--list-item-divider-color: var(--divider-color);
--list-item-divider-style: var(--divider-style);
--list-item-divider-width: var(--divider-width);
--list-item-padding: 1rem;
--list-item-text-color: var(--text-basic-color);
--list-item-font-family: var(--text-paragraph-font-family);
--list-item-font-size: var(--text-paragraph-font-size);
--list-item-font-weight: var(--text-paragraph-font-weight);
--list-item-line-height: var(--text-paragraph-line-height);
--calendar-width: 20.625rem;
--calendar-background-color: var(--background-basic-color-1);
--calendar-border-color: var(--border-basic-color-4);
--calendar-border-style: solid;
--calendar-border-width: 0.0625rem;
--calendar-border-radius: var(--border-radius);
--calendar-text-color: var(--text-basic-color);
--calendar-text-font-family: var(--text-subtitle-font-family);
--calendar-text-font-size: var(--text-subtitle-font-size);
--calendar-text-font-weight: var(--text-subtitle-font-weight);
--calendar-text-line-height: var(--text-subtitle-line-height);
--calendar-picker-padding-top: 0.25rem;
--calendar-picker-padding-bottom: 0.625rem;
--calendar-picker-padding-start: 0.625rem;
--calendar-picker-padding-end: 0.625rem;
--calendar-navigation-text-color: var(--text-basic-color);
--calendar-navigation-text-font-family: var(--text-button-font-family);
--calendar-navigation-title-text-font-size: var(--text-button-medium-font-size);
--calendar-navigation-title-text-font-weight: var(--text-button-font-weight);
--calendar-navigation-title-text-line-height: var(--text-button-medium-line-height);
--calendar-navigation-padding: 0.625rem 0.25rem;
--calendar-cell-inactive-text-color: var(--text-hint-color);
--calendar-cell-disabled-text-color: var(--text-disabled-color);
--calendar-cell-hover-background-color: var(--background-basic-color-2);
--calendar-cell-hover-border-color: var(--background-basic-color-2);
--calendar-cell-hover-text-color: var(--text-basic-color);
--calendar-cell-hover-text-font-size: var(--calendar-text-font-size);
--calendar-cell-hover-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-hover-text-line-height: var(--calendar-text-line-height);
--calendar-cell-active-background-color: var(--color-primary-active);
--calendar-cell-active-border-color: var(--color-primary-active-border);
--calendar-cell-active-text-color: var(--text-control-color);
--calendar-cell-active-text-font-size: var(--calendar-text-font-size);
--calendar-cell-active-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-active-text-line-height: var(--calendar-text-line-height);
--calendar-cell-today-background-color: var(--color-primary-transparent-default);
--calendar-cell-today-border-color: var(--color-primary-transparent-default-border);
--calendar-cell-today-text-color: var(--text-basic-color);
--calendar-cell-today-text-font-size: var(--calendar-text-font-size);
--calendar-cell-today-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-today-text-line-height: var(--calendar-text-line-height);
--calendar-cell-today-hover-background-color: var(--color-primary-transparent-hover);
--calendar-cell-today-hover-border-color: var(--color-primary-transparent-hover-border);
--calendar-cell-today-active-background-color: var(--color-primary-transparent-active);
--calendar-cell-today-active-border-color: var(--color-primary-transparent-active-border);
--calendar-cell-today-disabled-border-color: var(--border-basic-color-4);
--calendar-cell-today-selected-background-color: var(--color-control-transparent-default);
--calendar-cell-today-selected-border-color: transparent;
--calendar-cell-today-selected-text-color: var(--text-control-color);
--calendar-cell-today-selected-hover-background-color: var(--color-control-transparent-hover);
--calendar-cell-today-selected-hover-border-color: transparent;
--calendar-cell-today-selected-active-background-color: var(--color-control-transparent-active);
--calendar-cell-today-selected-active-border-color: transparent;
--calendar-cell-today-in-range-background-color: var(--color-control-transparent-default);
--calendar-cell-today-in-range-border-color: transparent;
--calendar-cell-today-in-range-text-color: var(--text-control-color);
--calendar-cell-today-in-range-hover-background-color: var(--color-control-transparent-hover);
--calendar-cell-today-in-range-hover-border-color: transparent;
--calendar-cell-today-in-range-active-background-color: var(--color-control-transparent-active);
--calendar-cell-today-in-range-active-border-color: transparent;
--calendar-cell-selected-background-color: var(--color-primary-default);
--calendar-cell-selected-border-color: var(--color-primary-default-border);
--calendar-cell-selected-text-color: var(--text-control-color);
--calendar-cell-selected-text-font-size: var(--calendar-text-font-size);
--calendar-cell-selected-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-selected-text-line-height: var(--calendar-text-line-height);
--calendar-cell-selected-hover-background-color: var(--color-primary-hover);
--calendar-cell-selected-hover-border-color: var(--color-primary-hover-border);
--calendar-cell-selected-active-background-color: var(--color-primary-active);
--calendar-cell-selected-active-border-color: var(--color-primary-active-border);
--calendar-day-cell-width: 2.75rem;
--calendar-day-cell-height: 2.75rem;
--calendar-month-cell-width: 4.8125rem;
--calendar-month-cell-height: var(--calendar-day-cell-height);
--calendar-year-cell-width: var(--calendar-month-cell-width);
--calendar-year-cell-height: var(--calendar-month-cell-height);
--calendar-weekday-background: transparent;
--calendar-weekday-divider-color: var(--divider-color);
--calendar-weekday-divider-width: var(--divider-width);
--calendar-weekday-text-color: var(--text-hint-color);
--calendar-weekday-text-font-size: var(--text-subtitle-font-size);
--calendar-weekday-text-font-weight: var(--text-subtitle-font-weight);
--calendar-weekday-text-line-height: var(--text-subtitle-line-height);
--calendar-weekday-holiday-text-color: var(--calendar-weekday-text-color);
--calendar-weekday-height: var(--calendar-day-cell-height);
--calendar-weekday-width: var(--calendar-day-cell-width);
--calendar-weeknumber-background: transparent;
--calendar-weeknumber-divider-color: var(--divider-color);
--calendar-weeknumber-divider-width: var(--divider-width);
--calendar-weeknumber-text-color: var(--text-hint-color);
--calendar-weeknumber-text-font-size: var(--text-subtitle-font-size);
--calendar-weeknumber-text-font-weight: var(--text-subtitle-font-weight);
--calendar-weeknumber-text-line-height: var(--text-subtitle-line-height);
--calendar-weeknumber-height: var(--calendar-weekday-height);
--calendar-weeknumber-width: var(--calendar-weekday-width);
--calendar-large-width: 22.375rem;
--calendar-day-cell-large-width: 3rem;
--calendar-day-cell-large-height: 3rem;
--calendar-weekday-large-height: var(--calendar-day-cell-large-width);
--calendar-weekday-large-width: var(--calendar-day-cell-large-height);
--calendar-weeknumber-large-height: var(--calendar-weekday-large-height);
--calendar-weeknumber-large-width: var(--calendar-weekday-large-width);
--calendar-month-cell-large-width: 5.25rem;
--calendar-month-cell-large-height: var(--calendar-day-cell-large-height);
--calendar-year-cell-large-width: var(--calendar-month-cell-large-width);
--calendar-year-cell-large-height: var(--calendar-month-cell-large-height);
--overlay-backdrop-background-color: rgba(0, 0, 0, 0.35);
--tooltip-background-color: var(--background-alternative-color-3);
--tooltip-border-color: transparent;
--tooltip-border-style: dashed;
--tooltip-border-width: 0;
--tooltip-border-radius: var(--border-radius);
--tooltip-padding: 0.5rem 1rem;
--tooltip-text-color: var(--text-alternate-color);
--tooltip-text-font-family: var(--text-caption-font-family);
--tooltip-text-font-size: var(--text-caption-font-size);
--tooltip-text-font-weight: var(--text-caption-font-weight);
--tooltip-text-line-height: var(--text-caption-line-height);
--tooltip-icon-height: 1rem;
--tooltip-icon-width: 1rem;
--tooltip-max-width: 16rem;
--tooltip-basic-background-color: var(--background-basic-color-3);
--tooltip-basic-border-color: transparent;
--tooltip-basic-text-color: var(--text-basic-color);
--tooltip-primary-background-color: var(--color-primary-default);
--tooltip-primary-border-color: transparent;
--tooltip-primary-text-color: var(--text-control-color);
--tooltip-info-background-color: var(--color-info-default);
--tooltip-info-border-color: transparent;
--tooltip-info-text-color: var(--text-control-color);
--tooltip-success-background-color: var(--color-success-default);
--tooltip-success-border-color: transparent;
--tooltip-success-text-color: var(--text-control-color);
--tooltip-warning-background-color: var(--color-warning-default);
--tooltip-warning-border-color: transparent;
--tooltip-warning-text-color: var(--text-control-color);
--tooltip-danger-background-color: var(--color-danger-default);
--tooltip-danger-border-color: transparent;
--tooltip-danger-text-color: var(--text-control-color);
--tooltip-control-background-color: var(--color-control-default);
--tooltip-control-border-color: transparent;
--tooltip-control-text-color: var(--color-basic-800);
--tooltip-shadow: var(--shadow);
--option-list-max-height: 20rem;
--option-list-shadow: none;
--option-list-background-color: var(--background-basic-color-1);
--option-list-border-style: solid;
--option-list-border-width: 0.0625rem;
--option-list-border-color: var(--border-basic-color-4);
--option-list-border-radius: var(--border-radius);
--option-list-adjacent-border-color: var(--option-list-border-color);
--option-list-adjacent-border-style: var(--option-list-border-style);
--option-list-adjacent-border-width: var(--option-list-border-width);
--option-group-text-color: var(--text-hint-color);
--option-group-tiny-start-padding: 1.25rem;
--option-group-small-start-padding: 1.75rem;
--option-group-medium-start-padding: 2.25rem;
--option-group-large-start-padding: 2.25rem;
--option-group-giant-start-padding: 2.75rem;
--option-background-color: var(--background-basic-color-1);
--option-text-color: var(--text-basic-color);
--option-text-font-family: var(--text-subtitle-font-family);
--option-hover-background-color: var(--color-basic-transparent-hover);
--option-hover-text-color: var(--text-basic-color);
--option-active-background-color: var(--color-basic-transparent-active);
--option-active-text-color: var(--text-basic-color);
--option-focus-background-color: var(--color-basic-transparent-focus);
--option-focus-text-color: var(--text-basic-color);
--option-selected-background-color: var(--color-primary-default);
--option-selected-text-color: var(--text-control-color);
--option-selected-hover-background-color: var(--color-primary-hover);
--option-selected-hover-text-color: var(--text-control-color);
--option-selected-active-background-color: var(--color-primary-active);
--option-selected-active-text-color: var(--text-control-color);
--option-selected-focus-background-color: var(--color-primary-focus);
--option-selected-focus-text-color: var(--text-control-color);
--option-disabled-background-color: var(--background-basic-color-1);
--option-disabled-text-color: var(--text-disabled-color);
--option-tiny-text-font-size: var(--text-caption-2-font-size);
--option-tiny-text-font-weight: var(--text-caption-2-font-weight);
--option-tiny-text-line-height: var(--text-caption-2-line-height);
--option-tiny-padding: var(--select-outline-tiny-padding);
--option-small-text-font-size: var(--text-subtitle-2-font-size);
--option-small-text-font-weight: var(--text-subtitle-2-font-weight);
--option-small-text-line-height: var(--text-subtitle-2-line-height);
--option-small-padding: var(--select-outline-small-padding);
--option-medium-text-font-size: var(--text-subtitle-font-size);
--option-medium-text-font-weight: var(--text-subtitle-font-weight);
--option-medium-text-line-height: var(--text-subtitle-line-height);
--option-medium-padding: var(--select-outline-medium-padding);
--option-large-text-font-size: var(--text-subtitle-font-size);
--option-large-text-font-weight: var(--text-subtitle-font-weight);
--option-large-text-line-height: var(--text-subtitle-line-height);
--option-large-padding: var(--select-outline-large-padding);
--option-giant-text-font-size: var(--text-heading-6-font-size);
--option-giant-text-font-weight: var(--text-heading-6-font-weight);
--option-giant-text-line-height: var(--text-heading-6-line-height);
--option-giant-padding: var(--select-outline-giant-padding);
--select-cursor: pointer;
--select-disabled-cursor: default;
--select-min-width: 13rem;
--select-outline-width: var(--outline-width);
--select-outline-color: var(--outline-color);
--select-icon-offset: 2rem;
--select-text-font-family: var(--text-subtitle-font-family);
--select-placeholder-text-font-family: var(--text-paragraph-font-family);
--select-tiny-text-font-size: var(--text-caption-2-font-size);
--select-tiny-text-font-weight: var(--text-caption-2-font-weight);
--select-tiny-text-line-height: var(--text-caption-2-line-height);
--select-tiny-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-tiny-max-width: 20rem;
--select-small-text-font-size: var(--text-subtitle-2-font-size);
--select-small-text-font-weight: var(--text-subtitle-2-font-weight);
--select-small-text-line-height: var(--text-subtitle-2-line-height);
--select-small-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-small-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-small-max-width: 20rem;
--select-medium-text-font-size: var(--text-subtitle-font-size);
--select-medium-text-font-weight: var(--text-subtitle-font-weight);
--select-medium-text-line-height: var(--text-subtitle-line-height);
--select-medium-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-medium-max-width: 20rem;
--select-large-text-font-size: var(--text-subtitle-font-size);
--select-large-text-font-weight: var(--text-subtitle-font-weight);
--select-large-text-line-height: var(--text-subtitle-line-height);
--select-large-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-large-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-large-max-width: 30rem;
--select-giant-text-font-size: var(--text-heading-6-font-size);
--select-giant-text-font-weight: var(--text-heading-6-font-weight);
--select-giant-text-line-height: var(--text-heading-6-line-height);
--select-giant-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-giant-max-width: 30rem;
--select-rectangle-border-radius: var(--border-radius);
--select-semi-round-border-radius: 0.75rem;
--select-round-border-radius: 1.5rem;
--select-outline-border-style: solid;
--select-outline-border-width: 1px;
--select-outline-tiny-padding: 0.1875rem 1rem;
--select-outline-small-padding: 0.1875rem 1rem;
--select-outline-medium-padding: 0.4375rem 1rem;
--select-outline-large-padding: 0.6875rem 1rem;
--select-outline-giant-padding: 0.9375rem 1rem;
--select-outline-basic-icon-color: var(--text-hint-color);
--select-outline-basic-text-color: var(--text-basic-color);
--select-outline-basic-placeholder-text-color: var(--text-hint-color);
--select-outline-basic-background-color: var(--background-basic-color-2);
--select-outline-basic-border-color: var(--border-basic-color-4);
--select-outline-basic-focus-background-color: var(--background-basic-color-1);
--select-outline-basic-focus-border-color: var(--color-primary-default);
--select-outline-basic-hover-background-color: var(--background-basic-color-3);
--select-outline-basic-hover-border-color: var(--border-basic-color-4);
--select-outline-basic-disabled-background-color: var(--background-basic-color-2);
--select-outline-basic-disabled-border-color: var(--border-basic-color-4);
--select-outline-basic-disabled-icon-color: var(--text-disabled-color);
--select-outline-basic-disabled-text-color: var(--text-disabled-color);
--select-outline-primary-icon-color: var(--text-hint-color);
--select-outline-primary-text-color: var(--text-basic-color);
--select-outline-primary-placeholder-text-color: var(--text-hint-color);
--select-outline-primary-background-color: var(--background-basic-color-2);
--select-outline-primary-border-color: var(--color-primary-default);
--select-outline-primary-focus-background-color: var(--background-basic-color-1);
--select-outline-primary-focus-border-color: var(--color-primary-focus);
--select-outline-primary-hover-background-color: var(--background-basic-color-3);
--select-outline-primary-hover-border-color: var(--color-primary-hover);
--select-outline-primary-disabled-background-color: var(--background-basic-color-2);
--select-outline-primary-disabled-border-color: var(--border-basic-color-4);
--select-outline-primary-disabled-icon-color: var(--text-disabled-color);
--select-outline-primary-disabled-text-color: var(--text-disabled-color);
--select-outline-success-icon-color: var(--text-hint-color);
--select-outline-success-text-color: var(--text-basic-color);
--select-outline-success-placeholder-text-color: var(--text-hint-color);
--select-outline-success-background-color: var(--background-basic-color-2);
--select-outline-success-border-color: var(--color-success-default);
--select-outline-success-focus-background-color: var(--background-basic-color-1);
--select-outline-success-focus-border-color: var(--color-success-focus);
--select-outline-success-hover-background-color: var(--background-basic-color-3);
--select-outline-success-hover-border-color: var(--color-success-hover);
--select-outline-success-disabled-background-color: var(--background-basic-color-2);
--select-outline-success-disabled-border-color: var(--border-basic-color-4);
--select-outline-success-disabled-icon-color: var(--text-disabled-color);
--select-outline-success-disabled-text-color: var(--text-disabled-color);
--select-outline-info-icon-color: var(--text-hint-color);
--select-outline-info-text-color: var(--text-basic-color);
--select-outline-info-placeholder-text-color: var(--text-hint-color);
--select-outline-info-background-color: var(--background-basic-color-2);
--select-outline-info-border-color: var(--color-info-default);
--select-outline-info-focus-background-color: var(--background-basic-color-1);
--select-outline-info-focus-border-color: var(--color-info-focus);
--select-outline-info-hover-background-color: var(--background-basic-color-3);
--select-outline-info-hover-border-color: var(--color-info-hover);
--select-outline-info-disabled-background-color: var(--background-basic-color-2);
--select-outline-info-disabled-border-color: var(--border-basic-color-4);
--select-outline-info-disabled-icon-color: var(--text-disabled-color);
--select-outline-info-disabled-text-color: var(--text-disabled-color);
--select-outline-warning-icon-color: var(--text-hint-color);
--select-outline-warning-text-color: var(--text-basic-color);
--select-outline-warning-placeholder-text-color: var(--text-hint-color);
--select-outline-warning-background-color: var(--background-basic-color-2);
--select-outline-warning-border-color: var(--color-warning-default);
--select-outline-warning-focus-background-color: var(--background-basic-color-1);
--select-outline-warning-focus-border-color: var(--color-warning-focus);
--select-outline-warning-hover-background-color: var(--background-basic-color-3);
--select-outline-warning-hover-border-color: var(--color-warning-hover);
--select-outline-warning-disabled-background-color: var(--background-basic-color-2);
--select-outline-warning-disabled-border-color: var(--border-basic-color-4);
--select-outline-warning-disabled-icon-color: var(--text-disabled-color);
--select-outline-warning-disabled-text-color: var(--text-disabled-color);
--select-outline-danger-icon-color: var(--text-hint-color);
--select-outline-danger-text-color: var(--text-basic-color);
--select-outline-danger-placeholder-text-color: var(--text-hint-color);
--select-outline-danger-background-color: var(--background-basic-color-2);
--select-outline-danger-border-color: var(--color-danger-default);
--select-outline-danger-focus-background-color: var(--background-basic-color-1);
--select-outline-danger-focus-border-color: var(--color-danger-focus);
--select-outline-danger-hover-background-color: var(--background-basic-color-3);
--select-outline-danger-hover-border-color: var(--color-danger-hover);
--select-outline-danger-disabled-background-color: var(--background-basic-color-2);
--select-outline-danger-disabled-border-color: var(--border-basic-color-4);
--select-outline-danger-disabled-icon-color: var(--text-disabled-color);
--select-outline-danger-disabled-text-color: var(--text-disabled-color);
--select-outline-control-icon-color: var(--color-basic-100);
--select-outline-control-text-color: var(--color-basic-100);
--select-outline-control-placeholder-text-color: var(--color-basic-100);
--select-outline-control-background-color: var(--color-basic-control-transparent-300);
--select-outline-control-border-color: var(--color-basic-control-transparent-500);
--select-outline-control-focus-background-color: var(--color-basic-control-transparent-500);
--select-outline-control-focus-border-color: var(--color-control-transparent-focus-border);
--select-outline-control-hover-background-color: var(--color-basic-control-transparent-400);
--select-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--select-outline-control-disabled-background-color: var(--color-control-transparent-disabled);
--select-outline-control-disabled-border-color: var(--color-basic-control-transparent-500);
--select-outline-control-disabled-icon-color: var(--color-basic-100);
--select-outline-control-disabled-text-color: var(--color-basic-100);
--select-outline-adjacent-border-style: var(--select-outline-border-style);
--select-outline-adjacent-border-width: var(--select-outline-border-width);
--select-outline-basic-open-border-color: var(--select-outline-basic-border-color);
--select-outline-basic-adjacent-border-color: var(--select-outline-basic-border-color);
--select-outline-primary-open-border-color: var(--select-outline-primary-border-color);
--select-outline-primary-adjacent-border-color: var(--select-outline-primary-border-color);
--select-outline-success-open-border-color: var(--select-outline-success-border-color);
--select-outline-success-adjacent-border-color: var(--select-outline-success-border-color);
--select-outline-info-open-border-color: var(--select-outline-info-border-color);
--select-outline-info-adjacent-border-color: var(--select-outline-info-border-color);
--select-outline-warning-open-border-color: var(--select-outline-warning-border-color);
--select-outline-warning-adjacent-border-color: var(--select-outline-warning-border-color);
--select-outline-danger-open-border-color: var(--select-outline-danger-border-color);
--select-outline-danger-adjacent-border-color: var(--select-outline-danger-border-color);
--select-outline-control-open-border-color: var(--select-outline-control-border-color);
--select-outline-control-adjacent-border-color: var(--select-outline-control-border-color);
--select-filled-border-style: solid;
--select-filled-border-width: 1px;
--select-filled-tiny-padding: 0.1875rem 1rem;
--select-filled-small-padding: 0.1875rem 1rem;
--select-filled-medium-padding: 0.4375rem 1rem;
--select-filled-large-padding: 0.6875rem 1rem;
--select-filled-giant-padding: 0.9375rem 1rem;
--select-filled-basic-background-color: var(--color-basic-default);
--select-filled-basic-border-color: var(--color-basic-default-border);
--select-filled-basic-icon-color: var(--color-basic-800);
--select-filled-basic-text-color: var(--color-basic-800);
--select-filled-basic-placeholder-text-color: var(--text-hint-color);
--select-filled-basic-focus-background-color: var(--color-basic-focus);
--select-filled-basic-focus-border-color: var(--color-basic-focus-border);
--select-filled-basic-hover-background-color: var(--color-basic-hover);
--select-filled-basic-hover-border-color: var(--color-basic-hover-border);
--select-filled-basic-disabled-background-color: var(--background-basic-color-2);
--select-filled-basic-disabled-border-color: var(--border-basic-color-2);
--select-filled-basic-disabled-icon-color: var(--text-disabled-color);
--select-filled-basic-disabled-text-color: var(--text-disabled-color);
--select-filled-primary-background-color: var(--color-primary-default);
--select-filled-primary-border-color: var(--color-primary-default-border);
--select-filled-primary-icon-color: var(--text-control-color);
--select-filled-primary-text-color: var(--text-control-color);
--select-filled-primary-placeholder-text-color: var(--text-control-color);
--select-filled-primary-focus-background-color: var(--color-primary-focus);
--select-filled-primary-focus-border-color: var(--color-primary-focus-border);
--select-filled-primary-hover-background-color: var(--color-primary-hover);
--select-filled-primary-hover-border-color: var(--color-primary-hover-border);
--select-filled-primary-disabled-background-color: var(--background-basic-color-2);
--select-filled-primary-disabled-border-color: var(--border-basic-color-2);
--select-filled-primary-disabled-icon-color: var(--text-disabled-color);
--select-filled-primary-disabled-text-color: var(--text-disabled-color);
--select-filled-success-background-color: var(--color-success-default);
--select-filled-success-border-color: var(--color-success-default-border);
--select-filled-success-icon-color: var(--text-control-color);
--select-filled-success-text-color: var(--text-control-color);
--select-filled-success-placeholder-text-color: var(--text-control-color);
--select-filled-success-focus-background-color: var(--color-success-focus);
--select-filled-success-focus-border-color: var(--color-success-focus-border);
--select-filled-success-hover-background-color: var(--color-success-hover);
--select-filled-success-hover-border-color: var(--color-success-hover-border);
--select-filled-success-disabled-background-color: var(--background-basic-color-2);
--select-filled-success-disabled-border-color: var(--border-basic-color-2);
--select-filled-success-disabled-icon-color: var(--text-disabled-color);
--select-filled-success-disabled-text-color: var(--text-disabled-color);
--select-filled-info-background-color: var(--color-info-default);
--select-filled-info-border-color: var(--color-info-default-border);
--select-filled-info-icon-color: var(--text-control-color);
--select-filled-info-text-color: var(--text-control-color);
--select-filled-info-placeholder-text-color: var(--text-control-color);
--select-filled-info-focus-background-color: var(--color-info-focus);
--select-filled-info-focus-border-color: var(--color-info-focus-border);
--select-filled-info-hover-background-color: var(--color-info-hover);
--select-filled-info-hover-border-color: var(--color-info-hover-border);
--select-filled-info-disabled-background-color: var(--background-basic-color-2);
--select-filled-info-disabled-border-color: var(--border-basic-color-2);
--select-filled-info-disabled-icon-color: var(--text-disabled-color);
--select-filled-info-disabled-text-color: var(--text-disabled-color);
--select-filled-warning-background-color: var(--color-warning-default);
--select-filled-warning-border-color: var(--color-warning-default-border);
--select-filled-warning-icon-color: var(--text-control-color);
--select-filled-warning-text-color: var(--text-control-color);
--select-filled-warning-placeholder-text-color: var(--text-control-color);
--select-filled-warning-focus-background-color: var(--color-warning-focus);
--select-filled-warning-focus-border-color: var(--color-warning-focus-border);
--select-filled-warning-hover-background-color: var(--color-warning-hover);
--select-filled-warning-hover-border-color: var(--color-warning-hover-border);
--select-filled-warning-disabled-background-color: var(--background-basic-color-2);
--select-filled-warning-disabled-border-color: var(--border-basic-color-2);
--select-filled-warning-disabled-icon-color: var(--text-disabled-color);
--select-filled-warning-disabled-text-color: var(--text-disabled-color);
--select-filled-danger-background-color: var(--color-danger-default);
--select-filled-danger-border-color: var(--color-danger-default-border);
--select-filled-danger-icon-color: var(--text-control-color);
--select-filled-danger-text-color: var(--text-control-color);
--select-filled-danger-placeholder-text-color: var(--text-control-color);
--select-filled-danger-focus-background-color: var(--color-danger-focus);
--select-filled-danger-focus-border-color: var(--color-danger-focus-border);
--select-filled-danger-hover-background-color: var(--color-danger-hover);
--select-filled-danger-hover-border-color: var(--color-danger-hover-border);
--select-filled-danger-disabled-background-color: var(--background-basic-color-2);
--select-filled-danger-disabled-border-color: var(--border-basic-color-2);
--select-filled-danger-disabled-icon-color: var(--text-disabled-color);
--select-filled-danger-disabled-text-color: var(--text-disabled-color);
--select-filled-control-background-color: var(--color-control-default);
--select-filled-control-border-color: var(--color-control-default-border);
--select-filled-control-icon-color: var(--color-basic-800);
--select-filled-control-text-color: var(--color-basic-800);
--select-filled-control-placeholder-text-color: var(--text-hint-color);
--select-filled-control-focus-background-color: var(--color-control-focus);
--select-filled-control-focus-border-color: var(--color-control-focus-border);
--select-filled-control-hover-background-color: var(--color-control-hover);
--select-filled-control-hover-border-color: var(--color-control-hover-border);
--select-filled-control-disabled-background-color: var(--background-basic-color-2);
--select-filled-control-disabled-border-color: var(--border-basic-color-2);
--select-filled-control-disabled-icon-color: var(--text-disabled-color);
--select-filled-control-disabled-text-color: var(--text-disabled-color);
--select-hero-tiny-padding: 0.25rem 1rem;
--select-hero-small-padding: 0.25rem 1rem;
--select-hero-medium-padding: 0.5rem 1rem;
--select-hero-large-padding: 0.75rem 1rem;
--select-hero-giant-padding: 1rem 1rem;
--select-hero-basic-left-background-color: var(--color-basic-200);
--select-hero-basic-right-background-color: var(--color-basic-default);
--select-hero-basic-icon-color: var(--color-basic-800);
--select-hero-basic-text-color: var(--color-basic-800);
--select-hero-basic-placeholder-text-color: var(--text-hint-color);
--select-hero-basic-focus-left-background-color: var(--color-basic-300);
--select-hero-basic-focus-right-background-color: var(--color-basic-400);
--select-hero-basic-hover-left-background-color: var(--color-basic-100);
--select-hero-basic-hover-right-background-color: var(--color-basic-hover);
--select-hero-basic-disabled-background-color: var(--background-basic-color-2);
--select-hero-basic-disabled-icon-color: var(--text-disabled-color);
--select-hero-basic-disabled-text-color: var(--text-disabled-color);
--select-hero-primary-left-background-color: var(--color-primary-400);
--select-hero-primary-right-background-color: var(--color-primary-default);
--select-hero-primary-icon-color: var(--text-control-color);
--select-hero-primary-text-color: var(--text-control-color);
--select-hero-primary-placeholder-text-color: var(--text-control-color);
--select-hero-primary-focus-left-background-color: var(--color-primary-500);
--select-hero-primary-focus-right-background-color: var(--color-primary-focus);
--select-hero-primary-hover-left-background-color: var(--color-primary-300);
--select-hero-primary-hover-right-background-color: var(--color-primary-hover);
--select-hero-primary-disabled-background-color: var(--background-basic-color-2);
--select-hero-primary-disabled-icon-color: var(--text-disabled-color);
--select-hero-primary-disabled-text-color: var(--text-disabled-color);
--select-hero-success-left-background-color: var(--color-success-400);
--select-hero-success-right-background-color: var(--color-success-default);
--select-hero-success-icon-color: var(--text-control-color);
--select-hero-success-text-color: var(--text-control-color);
--select-hero-success-placeholder-text-color: var(--text-control-color);
--select-hero-success-focus-left-background-color: var(--color-success-500);
--select-hero-success-focus-right-background-color: var(--color-success-focus);
--select-hero-success-hover-left-background-color: var(--color-success-300);
--select-hero-success-hover-right-background-color: var(--color-success-hover);
--select-hero-success-disabled-background-color: var(--background-basic-color-2);
--select-hero-success-disabled-icon-color: var(--text-disabled-color);
--select-hero-success-disabled-text-color: var(--text-disabled-color);
--select-hero-info-left-background-color: var(--color-info-400);
--select-hero-info-right-background-color: var(--color-info-default);
--select-hero-info-icon-color: var(--text-control-color);
--select-hero-info-text-color: var(--text-control-color);
--select-hero-info-placeholder-text-color: var(--text-control-color);
--select-hero-info-focus-left-background-color: var(--color-info-500);
--select-hero-info-focus-right-background-color: var(--color-info-focus);
--select-hero-info-hover-left-background-color: var(--color-info-300);
--select-hero-info-hover-right-background-color: var(--color-info-hover);
--select-hero-info-disabled-background-color: var(--background-basic-color-2);
--select-hero-info-disabled-icon-color: var(--text-disabled-color);
--select-hero-info-disabled-text-color: var(--text-disabled-color);
--select-hero-warning-left-background-color: var(--color-warning-400);
--select-hero-warning-right-background-color: var(--color-warning-default);
--select-hero-warning-icon-color: var(--text-control-color);
--select-hero-warning-text-color: var(--text-control-color);
--select-hero-warning-placeholder-text-color: var(--text-control-color);
--select-hero-warning-focus-left-background-color: var(--color-warning-500);
--select-hero-warning-focus-right-background-color: var(--color-warning-focus);
--select-hero-warning-hover-left-background-color: var(--color-warning-300);
--select-hero-warning-hover-right-background-color: var(--color-warning-hover);
--select-hero-warning-disabled-background-color: var(--background-basic-color-2);
--select-hero-warning-disabled-icon-color: var(--text-disabled-color);
--select-hero-warning-disabled-text-color: var(--text-disabled-color);
--select-hero-danger-left-background-color: var(--color-danger-400);
--select-hero-danger-right-background-color: var(--color-danger-default);
--select-hero-danger-icon-color: var(--text-control-color);
--select-hero-danger-text-color: var(--text-control-color);
--select-hero-danger-placeholder-text-color: var(--text-control-color);
--select-hero-danger-focus-left-background-color: var(--color-danger-500);
--select-hero-danger-focus-right-background-color: var(--color-danger-focus);
--select-hero-danger-hover-left-background-color: var(--color-danger-300);
--select-hero-danger-hover-right-background-color: var(--color-danger-hover);
--select-hero-danger-disabled-background-color: var(--background-basic-color-2);
--select-hero-danger-disabled-icon-color: var(--text-disabled-color);
--select-hero-danger-disabled-text-color: var(--text-disabled-color);
--select-hero-control-left-background-color: var(--color-control-default);
--select-hero-control-right-background-color: var(--color-control-default);
--select-hero-control-icon-color: var(--color-basic-800);
--select-hero-control-text-color: var(--color-basic-800);
--select-hero-control-placeholder-text-color: var(--text-hint-color);
--select-hero-control-focus-left-background-color: var(--color-basic-200);
--select-hero-control-focus-right-background-color: var(--color-control-focus);
--select-hero-control-hover-left-background-color: var(--color-basic-100);
--select-hero-control-hover-right-background-color: var(--color-control-hover);
--select-hero-control-disabled-background-color: var(--background-basic-color-2);
--select-hero-control-disabled-icon-color: var(--text-disabled-color);
--select-hero-control-disabled-text-color: var(--text-disabled-color);
--datepicker-background-color: var(--background-basic-color-1);
--datepicker-border-color: var(--border-basic-color-4);
--datepicker-border-style: solid;
--datepicker-border-width: 0.0625rem;
--datepicker-border-radius: var(--border-radius);
--datepicker-shadow: none;
--timepicker-cell-text-color: var(--text-basic-color);
--timepicker-cell-hover-background-color: var(--background-basic-color-2);
--timepicker-cell-hover-text-color: var(--text-basic-color);
--timepicker-cell-focus-background-color: var(--color-basic-focus);
--timepicker-cell-focus-text-color: var(--text-basic-color);
--timepicker-cell-active-background-color: var(--color-primary-default);
--timepicker-cell-active-text-color: var(--text-control-color);
--timepicker-cell-text-font-size: var(--text-subtitle-font-size);
--timepicker-cell-text-font-family: var(--text-subtitle-font-family);
--timepicker-cell-text-line-height: var(--text-subtitle-line-height);
--timepicker-cell-text-font-weight: var(--text-subtitle-font-weight);
--timepicker-cell-height: 2.75rem;
--timepicker-header-cell-text-color: var(--text-hint-color);
--timepicker-header-cell-text-font-size: var(--text-subtitle-font-size);
--timepicker-header-cell-text-font-family: var(--text-subtitle-font-family);
--timepicker-header-cell-height: 2.75rem;
--timepicker-header-cell-text-line-height: var(--text-subtitle-line-height);
--timepicker-header-cell-text-font-weight: var(--text-subtitle-font-weight);
--timepicker-border-color: var(--datepicker-border-color);
--timepicker-border-style: var(--datepicker-border-style);
--timepicker-border-width: var(--datepicker-border-width);
--timepicker-scrollbar-color: var(--scrollbar-color);
--timepicker-scrollbar-background-color: var(--scrollbar-background-color);
--timepicker-scrollbar-width: var(--scrollbar-width);
--timepicker-single-column-width: 5rem;
--timepicker-multiple-column-width: 13.875rem;
--timepicker-title-height: 3.75rem;
--timepicker-title-padding: var(--text-paragraph-line-height);
--timepicker-container-width: 20rem;
--timepicker-container-height: 26.1875rem;
--radio-width: 1.25rem;
--radio-height: 1.25rem;
--radio-border-style: solid;
--radio-border-width: 1px;
--radio-text-font-family: var(--text-subtitle-2-font-family);
--radio-text-font-size: var(--text-subtitle-2-font-size);
--radio-text-font-weight: var(--text-subtitle-2-font-weight);
--radio-text-line-height: var(--text-subtitle-2-line-height);
--radio-outline-color: var(--outline-color);
--radio-outline-width: var(--outline-width);
--radio-basic-text-color: var(--text-basic-color);
--radio-basic-border-color: var(--color-basic-transparent-default-border);
--radio-basic-background-color: var(--color-basic-transparent-default);
--radio-basic-checked-background-color: transparent;
--radio-basic-checked-border-color: var(--color-primary-default-border);
--radio-basic-inner-circle-color: var(--color-primary-default);
--radio-basic-focus-border-color: var(--color-primary-transparent-focus-border);
--radio-basic-focus-background-color: var(--color-primary-transparent-focus);
--radio-basic-focus-checked-background-color: transparent;
--radio-basic-focus-checked-border-color: var(--color-primary-focus-border);
--radio-basic-focus-inner-circle-color: var(--color-primary-focus);
--radio-basic-hover-background-color: var(--color-primary-transparent-hover);
--radio-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--radio-basic-hover-inner-circle-color: var(--color-primary-hover);
--radio-basic-hover-checked-background-color: transparent;
--radio-basic-hover-checked-border-color: var(--color-primary-hover-border);
--radio-basic-active-background-color: var(--color-primary-transparent-active);
--radio-basic-active-border-color: var(--color-primary-transparent-active-border);
--radio-basic-active-inner-circle-color: var(--color-primary-active);
--radio-basic-active-checked-background-color: transparent;
--radio-basic-active-checked-border-color: var(--color-primary-active-border);
--radio-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-basic-disabled-text-color: var(--text-disabled-color);
--radio-basic-disabled-checked-background-color: transparent;
--radio-basic-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-basic-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-primary-text-color: var(--text-basic-color);
--radio-primary-border-color: var(--color-primary-transparent-default-border);
--radio-primary-background-color: var(--color-primary-transparent-default);
--radio-primary-checked-background-color: transparent;
--radio-primary-checked-border-color: var(--color-primary-default-border);
--radio-primary-inner-circle-color: var(--color-primary-default);
--radio-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--radio-primary-focus-background-color: var(--color-primary-transparent-focus);
--radio-primary-focus-checked-background-color: transparent;
--radio-primary-focus-checked-border-color: var(--color-primary-focus-border);
--radio-primary-focus-inner-circle-color: var(--color-primary-focus);
--radio-primary-hover-background-color: var(--color-primary-transparent-hover);
--radio-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--radio-primary-hover-inner-circle-color: var(--color-primary-hover);
--radio-primary-hover-checked-background-color: transparent;
--radio-primary-hover-checked-border-color: var(--color-primary-hover-border);
--radio-primary-active-border-color: var(--color-primary-transparent-active-border);
--radio-primary-active-background-color: var(--color-primary-transparent-active);
--radio-primary-active-checked-background-color: transparent;
--radio-primary-active-checked-border-color: var(--color-primary-active-border);
--radio-primary-active-inner-circle-color: var(--color-primary-active);
--radio-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-primary-disabled-text-color: var(--text-disabled-color);
--radio-primary-disabled-checked-background-color: transparent;
--radio-primary-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-primary-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-success-text-color: var(--text-basic-color);
--radio-success-border-color: var(--color-success-transparent-default-border);
--radio-success-background-color: var(--color-success-transparent-default);
--radio-success-checked-background-color: transparent;
--radio-success-checked-border-color: var(--color-success-default-border);
--radio-success-inner-circle-color: var(--color-success-default);
--radio-success-focus-border-color: var(--color-success-transparent-focus-border);
--radio-success-focus-background-color: var(--color-success-transparent-focus);
--radio-success-focus-checked-background-color: transparent;
--radio-success-focus-checked-border-color: var(--color-success-focus-border);
--radio-success-focus-inner-circle-color: var(--color-success-focus);
--radio-success-hover-background-color: var(--color-success-transparent-hover);
--radio-success-hover-border-color: var(--color-success-transparent-hover-border);
--radio-success-hover-inner-circle-color: var(--color-success-hover);
--radio-success-hover-checked-background-color: transparent;
--radio-success-hover-checked-border-color: var(--color-success-hover-border);
--radio-success-active-background-color: var(--color-success-transparent-active);
--radio-success-active-border-color: var(--color-success-transparent-active-border);
--radio-success-active-checked-background-color: transparent;
--radio-success-active-checked-border-color: var(--color-success-active-border);
--radio-success-active-inner-circle-color: var(--color-success-active);
--radio-success-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-success-disabled-text-color: var(--text-disabled-color);
--radio-success-disabled-checked-background-color: transparent;
--radio-success-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-success-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-info-text-color: var(--text-basic-color);
--radio-info-border-color: var(--color-info-transparent-default-border);
--radio-info-background-color: var(--color-info-transparent-default);
--radio-info-checked-background-color: transparent;
--radio-info-checked-border-color: var(--color-info-default-border);
--radio-info-inner-circle-color: var(--color-info-default);
--radio-info-focus-background-color: var(--color-info-transparent-focus);
--radio-info-focus-border-color: var(--color-info-transparent-focus-border);
--radio-info-focus-checked-background-color: transparent;
--radio-info-focus-checked-border-color: var(--color-info-focus-border);
--radio-info-focus-inner-circle-color: var(--color-info-focus);
--radio-info-hover-background-color: var(--color-info-transparent-hover);
--radio-info-hover-border-color: var(--color-info-transparent-hover-border);
--radio-info-hover-inner-circle-color: var(--color-info-hover);
--radio-info-hover-checked-background-color: transparent;
--radio-info-hover-checked-border-color: var(--color-info-hover-border);
--radio-info-active-background-color: var(--color-info-transparent-active);
--radio-info-active-border-color: var(--color-info-transparent-active-border);
--radio-info-active-checked-background-color: transparent;
--radio-info-active-checked-border-color: var(--color-info-active-border);
--radio-info-active-inner-circle-color: var(--color-info-active);
--radio-info-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-info-disabled-text-color: var(--text-disabled-color);
--radio-info-disabled-checked-background-color: transparent;
--radio-info-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-info-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-warning-text-color: var(--text-basic-color);
--radio-warning-border-color: var(--color-warning-transparent-default-border);
--radio-warning-background-color: var(--color-warning-transparent-default);
--radio-warning-checked-background-color: transparent;
--radio-warning-checked-border-color: var(--color-warning-default-border);
--radio-warning-inner-circle-color: var(--color-warning-default);
--radio-warning-focus-background-color: var(--color-warning-transparent-focus);
--radio-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--radio-warning-focus-checked-background-color: transparent;
--radio-warning-focus-checked-border-color: var(--color-warning-focus-border);
--radio-warning-focus-inner-circle-color: var(--color-warning-focus);
--radio-warning-hover-background-color: var(--color-warning-transparent-hover);
--radio-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--radio-warning-hover-inner-circle-color: var(--color-warning-hover);
--radio-warning-hover-checked-background-color: transparent;
--radio-warning-hover-checked-border-color: var(--color-warning-hover-border);
--radio-warning-active-background-color: var(--color-warning-transparent-active);
--radio-warning-active-border-color: var(--color-warning-transparent-active-border);
--radio-warning-active-checked-background-color: transparent;
--radio-warning-active-checked-border-color: var(--color-warning-active-border);
--radio-warning-active-inner-circle-color: var(--color-warning-active);
--radio-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-warning-disabled-text-color: var(--text-disabled-color);
--radio-warning-disabled-checked-background-color: transparent;
--radio-warning-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-warning-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-danger-text-color: var(--text-basic-color);
--radio-danger-border-color: var(--color-danger-transparent-default-border);
--radio-danger-background-color: var(--color-danger-transparent-default);
--radio-danger-checked-background-color: transparent;
--radio-danger-checked-border-color: var(--color-danger-default-border);
--radio-danger-inner-circle-color: var(--color-danger-default);
--radio-danger-focus-background-color: var(--color-danger-transparent-focus);
--radio-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--radio-danger-focus-checked-background-color: transparent;
--radio-danger-focus-checked-border-color: var(--color-danger-focus-border);
--radio-danger-focus-inner-circle-color: var(--color-danger-focus);
--radio-danger-hover-background-color: var(--color-danger-transparent-hover);
--radio-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--radio-danger-hover-inner-circle-color: var(--color-danger-hover);
--radio-danger-hover-checked-background-color: transparent;
--radio-danger-hover-checked-border-color: var(--color-danger-hover-border);
--radio-danger-active-background-color: var(--color-danger-transparent-active);
--radio-danger-active-border-color: var(--color-danger-transparent-active-border);
--radio-danger-active-checked-background-color: transparent;
--radio-danger-active-checked-border-color: var(--color-danger-active-border);
--radio-danger-active-inner-circle-color: var(--color-danger-active);
--radio-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-danger-disabled-text-color: var(--text-disabled-color);
--radio-danger-disabled-checked-background-color: transparent;
--radio-danger-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-danger-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-control-text-color: var(--text-control-color);
--radio-control-background-color: var(--color-control-transparent-default);
--radio-control-border-color: var(--color-control-transparent-default-border);
--radio-control-checked-background-color: transparent;
--radio-control-checked-border-color: var(--color-control-default-border);
--radio-control-inner-circle-color: var(--color-control-default);
--radio-control-focus-background-color: var(--color-control-transparent-focus);
--radio-control-focus-border-color: var(--color-control-transparent-focus-border);
--radio-control-focus-checked-background-color: transparent;
--radio-control-focus-checked-border-color: var(--color-control-focus-border);
--radio-control-focus-inner-circle-color: var(--color-control-focus);
--radio-control-hover-background-color: var(--color-control-transparent-hover);
--radio-control-hover-border-color: var(--color-control-transparent-hover-border);
--radio-control-hover-inner-circle-color: var(--color-control-hover);
--radio-control-hover-checked-background-color: transparent;
--radio-control-hover-checked-border-color: var(--color-control-hover-border);
--radio-control-active-background-color: var(--color-control-transparent-active);
--radio-control-active-border-color: var(--color-control-transparent-active-border);
--radio-control-active-checked-background-color: transparent;
--radio-control-active-checked-border-color: var(--color-control-active-border);
--radio-control-active-inner-circle-color: var(--color-control-active);
--radio-control-disabled-background-color: var(--color-control-transparent-disabled);
--radio-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--radio-control-disabled-text-color: var(--color-basic-100);
--radio-control-disabled-checked-background-color: transparent;
--radio-control-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-control-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--tree-grid-cell-border-width: 1px;
--tree-grid-cell-border-style: solid;
--tree-grid-cell-border-color: var(--border-basic-color-2);
--tree-grid-row-min-height: 2rem;
--tree-grid-cell-padding: 0.875rem 1.25rem;
--tree-grid-header-background-color: var(--background-basic-color-1);
--tree-grid-header-text-color: var(--text-basic-color);
--tree-grid-header-text-font-family: var(--text-subtitle-font-family);
--tree-grid-header-text-font-size: var(--text-subtitle-font-size);
--tree-grid-header-text-font-weight: var(--text-subtitle-font-weight);
--tree-grid-header-text-line-height: var(--text-subtitle-line-height);
--tree-grid-footer-background-color: var(--background-basic-color-1);
--tree-grid-footer-text-color: var(--text-basic-color);
--tree-grid-footer-text-font-family: var(--tree-grid-header-text-font-family);
--tree-grid-footer-text-font-size: var(--tree-grid-header-text-font-size);
--tree-grid-footer-text-font-weight: var(--tree-grid-header-text-font-weight);
--tree-grid-footer-text-line-height: var(--tree-grid-header-text-line-height);
--tree-grid-row-background-color: var(--background-basic-color-1);
--tree-grid-row-even-background-color: var(--background-basic-color-1);
--tree-grid-row-hover-background-color: var(--background-basic-color-1);
--tree-grid-row-text-color: var(--text-basic-color);
--tree-grid-row-text-font-family: var(--text-paragraph-font-family);
--tree-grid-row-text-font-size: var(--text-paragraph-font-size);
--tree-grid-row-text-font-weight: var(--text-paragraph-font-weight);
--tree-grid-row-text-line-height: var(--text-paragraph-line-height);
--tree-grid-sort-header-button-background-color: transparent;
--tree-grid-sort-header-button-border: none;
--tree-grid-sort-header-button-padding: 0;
--icon-font-size: 1.25rem;
--icon-line-height: 1;
--icon-width: 1em;
--icon-height: 1em;
--icon-svg-vertical-align: top;
--icon-basic-color: var(--text-hint-color);
--icon-primary-color: var(--color-primary-default);
--icon-info-color: var(--color-info-default);
--icon-success-color: var(--color-success-default);
--icon-warning-color: var(--color-warning-default);
--icon-danger-color: var(--color-danger-default);
--icon-control-color: var(--color-basic-100);
--tag-text-font-family: var(--text-subtitle-font-family);
--tag-text-transform: capitalize;
--tag-border-width: 0.0625rem;
--tag-border-style: solid;
--tag-border-radius: 1.5rem;
--tag-tiny-text-font-size: var(--input-tiny-text-font-size);
--tag-tiny-text-font-weight: var(--input-tiny-text-font-weight);
--tag-tiny-text-line-height: var(--input-tiny-text-line-height);
--tag-tiny-padding: 0.0625rem 0.9375rem;
--tag-tiny-close-offset: 0.625rem;
--tag-small-text-font-size: var(--input-small-text-font-size);
--tag-small-text-font-weight: var(--input-small-text-font-weight);
--tag-small-text-line-height: var(--input-small-text-line-height);
--tag-small-padding: 0.0625rem 0.9375rem;
--tag-small-close-offset: 0.625rem;
--tag-medium-text-font-size: var(--input-medium-text-font-size);
--tag-medium-text-font-weight: var(--input-medium-text-font-weight);
--tag-medium-text-line-height: var(--input-medium-text-line-height);
--tag-medium-padding: 0.1875rem 0.9375rem;
--tag-medium-close-offset: 0.625rem;
--tag-large-text-font-size: var(--input-large-text-font-size);
--tag-large-text-font-weight: var(--input-large-text-font-weight);
--tag-large-text-line-height: var(--input-large-text-line-height);
--tag-large-padding: 0.3125rem 0.9375rem;
--tag-large-close-offset: 0.625rem;
--tag-giant-text-font-size: var(--input-giant-text-font-size);
--tag-giant-text-font-weight: var(--input-giant-text-font-weight);
--tag-giant-text-line-height: var(--input-giant-text-line-height);
--tag-giant-padding: 0.4375rem 0.9375rem;
--tag-giant-close-offset: 0.625rem;
--tag-filled-basic-background-color: var(--color-basic-default);
--tag-filled-basic-border-color: var(--color-basic-default-border);
--tag-filled-basic-text-color: var(--color-basic-800);
--tag-filled-basic-active-background-color: var(--color-basic-focus);
--tag-filled-basic-active-border-color: var(--color-basic-focus-border);
--tag-filled-basic-hover-background-color: var(--color-basic-hover);
--tag-filled-basic-hover-border-color: var(--color-basic-hover-border);
--tag-filled-basic-selected-background-color: color-basic-actove;
--tag-filled-basic-selected-border-color: var(--color-basic-active-border);
--tag-filled-primary-background-color: var(--color-primary-default);
--tag-filled-primary-border-color: var(--color-primary-default-border);
--tag-filled-primary-text-color: var(--text-control-color);
--tag-filled-primary-active-background-color: var(--color-primary-focus);
--tag-filled-primary-active-border-color: var(--color-primary-focus-border);
--tag-filled-primary-hover-background-color: var(--color-primary-hover);
--tag-filled-primary-hover-border-color: var(--color-primary-hover-border);
--tag-filled-primary-selected-background-color: color-primary-actove;
--tag-filled-primary-selected-border-color: var(--color-primary-active-border);
--tag-filled-success-background-color: var(--color-success-default);
--tag-filled-success-border-color: var(--color-success-default-border);
--tag-filled-success-text-color: var(--text-control-color);
--tag-filled-success-active-background-color: var(--color-success-focus);
--tag-filled-success-active-border-color: var(--color-success-focus-border);
--tag-filled-success-hover-background-color: var(--color-success-hover);
--tag-filled-success-hover-border-color: var(--color-success-hover-border);
--tag-filled-success-selected-background-color: color-success-actove;
--tag-filled-success-selected-border-color: var(--color-success-active-border);
--tag-filled-info-background-color: var(--color-info-default);
--tag-filled-info-border-color: var(--color-info-default-border);
--tag-filled-info-text-color: var(--text-control-color);
--tag-filled-info-active-background-color: var(--color-info-focus);
--tag-filled-info-active-border-color: var(--color-info-focus-border);
--tag-filled-info-hover-background-color: var(--color-info-hover);
--tag-filled-info-hover-border-color: var(--color-info-hover-border);
--tag-filled-info-selected-background-color: color-info-actove;
--tag-filled-info-selected-border-color: var(--color-info-active-border);
--tag-filled-warning-background-color: var(--color-warning-default);
--tag-filled-warning-border-color: var(--color-warning-default-border);
--tag-filled-warning-text-color: var(--text-control-color);
--tag-filled-warning-active-background-color: var(--color-warning-focus);
--tag-filled-warning-active-border-color: var(--color-warning-focus-border);
--tag-filled-warning-hover-background-color: var(--color-warning-hover);
--tag-filled-warning-hover-border-color: var(--color-warning-hover-border);
--tag-filled-warning-selected-background-color: color-warning-actove;
--tag-filled-warning-selected-border-color: var(--color-warning-active-border);
--tag-filled-danger-background-color: var(--color-danger-default);
--tag-filled-danger-border-color: var(--color-danger-default-border);
--tag-filled-danger-text-color: var(--text-control-color);
--tag-filled-danger-active-background-color: var(--color-danger-focus);
--tag-filled-danger-active-border-color: var(--color-danger-focus-border);
--tag-filled-danger-hover-background-color: var(--color-danger-hover);
--tag-filled-danger-hover-border-color: var(--color-danger-hover-border);
--tag-filled-danger-selected-background-color: color-danger-actove;
--tag-filled-danger-selected-border-color: var(--color-danger-active-border);
--tag-filled-control-background-color: var(--color-control-default);
--tag-filled-control-border-color: var(--color-control-default-border);
--tag-filled-control-text-color: var(--color-basic-800);
--tag-filled-control-active-background-color: var(--color-control-hover);
--tag-filled-control-active-border-color: var(--color-control-hover-border);
--tag-filled-control-hover-background-color: var(--color-control-focus);
--tag-filled-control-hover-border-color: var(--color-control-focus-border);
--tag-filled-control-selected-background-color: color-control-actove;
--tag-filled-control-selected-border-color: var(--color-control-active-border);
--tag-outline-basic-background-color: var(--color-basic-transparent-default);
--tag-outline-basic-border-color: var(--color-basic-transparent-default-border);
--tag-outline-basic-text-color: var(--text-hint-color);
--tag-outline-basic-active-background-color: var(--color-basic-transparent-focus);
--tag-outline-basic-active-border-color: var(--color-basic-transparent-focus-border);
--tag-outline-basic-active-text-color: var(--text-hint-color);
--tag-outline-basic-hover-background-color: var(--color-basic-transparent-hover);
--tag-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border);
--tag-outline-basic-hover-text-color: var(--text-hint-color);
--tag-outline-basic-selected-background-color: var(--color-basic-transparent-active);
--tag-outline-basic-selected-border-color: var(--color-basic-transparent-active-border);
--tag-outline-basic-selected-text-color: var(--text-hint-color);
--tag-outline-primary-background-color: var(--color-primary-transparent-default);
--tag-outline-primary-border-color: var(--color-primary-transparent-default-border);
--tag-outline-primary-text-color: var(--text-primary-color);
--tag-outline-primary-active-background-color: var(--color-primary-transparent-focus);
--tag-outline-primary-active-border-color: var(--color-primary-transparent-focus-border);
--tag-outline-primary-active-text-color: var(--text-primary-color);
--tag-outline-primary-hover-background-color: var(--color-primary-transparent-hover);
--tag-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--tag-outline-primary-hover-text-color: var(--text-primary-color);
--tag-outline-primary-selected-background-color: var(--color-primary-transparent-active);
--tag-outline-primary-selected-border-color: var(--color-primary-transparent-active-border);
--tag-outline-primary-selected-text-color: var(--text-primary-color);
--tag-outline-success-background-color: var(--color-success-transparent-default);
--tag-outline-success-border-color: var(--color-success-transparent-default-border);
--tag-outline-success-text-color: var(--text-success-color);
--tag-outline-success-active-background-color: var(--color-success-transparent-focus);
--tag-outline-success-active-border-color: var(--color-success-transparent-focus-border);
--tag-outline-success-active-text-color: var(--text-success-color);
--tag-outline-success-hover-background-color: var(--color-success-transparent-hover);
--tag-outline-success-hover-border-color: var(--color-success-transparent-hover-border);
--tag-outline-success-hover-text-color: var(--text-success-color);
--tag-outline-success-selected-background-color: var(--color-success-transparent-active);
--tag-outline-success-selected-border-color: var(--color-success-transparent-active-border);
--tag-outline-success-selected-text-color: var(--text-success-color);
--tag-outline-info-background-color: var(--color-info-transparent-default);
--tag-outline-info-border-color: var(--color-info-transparent-default-border);
--tag-outline-info-text-color: var(--text-info-color);
--tag-outline-info-active-background-color: var(--color-info-transparent-focus);
--tag-outline-info-active-border-color: var(--color-info-transparent-focus-border);
--tag-outline-info-active-text-color: var(--text-info-color);
--tag-outline-info-hover-background-color: var(--color-info-transparent-hover);
--tag-outline-info-hover-border-color: var(--color-info-transparent-hover-border);
--tag-outline-info-hover-text-color: var(--text-info-color);
--tag-outline-info-selected-background-color: var(--color-info-transparent-active);
--tag-outline-info-selected-border-color: var(--color-info-transparent-active-border);
--tag-outline-info-selected-text-color: var(--text-info-color);
--tag-outline-warning-background-color: var(--color-warning-transparent-default);
--tag-outline-warning-border-color: var(--color-warning-transparent-default-border);
--tag-outline-warning-text-color: var(--text-warning-color);
--tag-outline-warning-active-background-color: var(--color-warning-transparent-focus);
--tag-outline-warning-active-border-color: var(--color-warning-transparent-focus-border);
--tag-outline-warning-active-text-color: var(--text-warning-color);
--tag-outline-warning-hover-background-color: var(--color-warning-transparent-hover);
--tag-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--tag-outline-warning-hover-text-color: var(--text-warning-color);
--tag-outline-warning-selected-background-color: var(--color-warning-transparent-active);
--tag-outline-warning-selected-border-color: var(--color-warning-transparent-active-border);
--tag-outline-warning-selected-text-color: var(--text-warning-color);
--tag-outline-danger-background-color: var(--color-danger-transparent-default);
--tag-outline-danger-border-color: var(--color-danger-transparent-default-border);
--tag-outline-danger-text-color: var(--text-danger-color);
--tag-outline-danger-active-background-color: var(--color-danger-transparent-focus);
--tag-outline-danger-active-border-color: var(--color-danger-transparent-focus-border);
--tag-outline-danger-active-text-color: var(--text-danger-color);
--tag-outline-danger-hover-background-color: var(--color-danger-transparent-hover);
--tag-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--tag-outline-danger-hover-text-color: var(--text-danger-color);
--tag-outline-danger-selected-background-color: var(--color-danger-transparent-active);
--tag-outline-danger-selected-border-color: var(--color-danger-transparent-active-border);
--tag-outline-danger-selected-text-color: var(--text-danger-color);
--tag-outline-control-background-color: var(--color-control-transparent-default);
--tag-outline-control-border-color: var(--color-control-transparent-default-border);
--tag-outline-control-text-color: var(--text-control-color);
--tag-outline-control-active-background-color: var(--color-control-transparent-focus);
--tag-outline-control-active-border-color: var(--color-control-transparent-focus-border);
--tag-outline-control-active-text-color: var(--text-control-color);
--tag-outline-control-hover-background-color: var(--color-control-transparent-hover);
--tag-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--tag-outline-control-hover-text-color: var(--text-control-color);
--tag-outline-control-selected-background-color: var(--color-control-transparent-active);
--tag-outline-control-selected-border-color: var(--color-control-transparent-active-border);
--tag-outline-control-selected-text-color: var(--text-control-color);
--tag-list-tiny-tag-offset: 0.0625rem;
--tag-list-small-tag-offset: 0.125rem;
--tag-list-medium-tag-offset: 0.25rem;
--tag-list-large-tag-offset: 0.375rem;
--tag-list-giant-tag-offset: 0.5rem;
--tag-list-with-input-tiny-padding: 0.0625rem 1rem;
--tag-list-with-input-small-padding: 0.0625rem 1rem;
--tag-list-with-input-medium-padding: 0.1875rem 1rem;
--tag-list-with-input-large-padding: 0.3125rem 1rem;
--tag-list-with-input-giant-padding: 0.4375rem 1rem;
--tag-list-with-input-rectangle-border-radius: var(--input-rectangle-border-radius);
--tag-list-with-input-semi-round-border-radius: var(--input-semi-round-border-radius);
--tag-list-with-input-round-border-radius: var(--input-round-border-radius);
--tag-input-min-width: 6rem;
--tag-input-text-font-family: var(--input-text-font-family);
--tag-input-placeholder-text-font-family: var(--input-placeholder-text-font-family);
--tag-input-basic-background-color: var(--input-basic-background-color);
--tag-input-basic-border-color: var(--input-basic-border-color);
--tag-input-basic-text-color: var(--input-basic-text-color);
--tag-input-basic-placeholder-text-color: var(--input-basic-placeholder-text-color);
--tag-input-basic-focus-background-color: var(--input-basic-focus-background-color);
--tag-input-basic-focus-border-color: var(--input-basic-focus-border-color);
--tag-input-basic-disabled-text-color: var(--input-basic-disabled-text-color);
--tag-input-basic-disabled-placeholder-text-color: var(--input-basic-disabled-placeholder-text-color);
--tag-input-primary-background-color: var(--input-primary-background-color);
--tag-input-primary-border-color: var(--input-primary-border-color);
--tag-input-primary-text-color: var(--input-primary-text-color);
--tag-input-primary-placeholder-text-color: var(--input-primary-placeholder-text-color);
--tag-input-primary-focus-background-color: var(--input-primary-focus-background-color);
--tag-input-primary-focus-border-color: var(--input-primary-focus-border-color);
--tag-input-primary-disabled-text-color: var(--input-primary-disabled-text-color);
--tag-input-primary-disabled-placeholder-text-color: var(--input-primary-disabled-placeholder-text-color);
--tag-input-success-background-color: var(--input-success-background-color);
--tag-input-success-border-color: var(--input-success-border-color);
--tag-input-success-text-color: var(--input-success-text-color);
--tag-input-success-placeholder-text-color: var(--input-success-placeholder-text-color);
--tag-input-success-focus-background-color: var(--input-success-focus-background-color);
--tag-input-success-focus-border-color: var(--input-success-focus-border-color);
--tag-input-success-disabled-text-color: var(--input-success-disabled-text-color);
--tag-input-success-disabled-placeholder-text-color: var(--input-success-disabled-placeholder-text-color);
--tag-input-info-background-color: var(--input-info-background-color);
--tag-input-info-border-color: var(--input-info-border-color);
--tag-input-info-text-color: var(--input-info-text-color);
--tag-input-info-placeholder-text-color: var(--input-info-placeholder-text-color);
--tag-input-info-focus-background-color: var(--input-info-focus-background-color);
--tag-input-info-focus-border-color: var(--input-info-focus-border-color);
--tag-input-info-disabled-text-color: var(--input-info-disabled-text-color);
--tag-input-info-disabled-placeholder-text-color: var(--input-info-disabled-placeholder-text-color);
--tag-input-warning-background-color: var(--input-warning-background-color);
--tag-input-warning-border-color: var(--input-warning-border-color);
--tag-input-warning-text-color: var(--input-warning-text-color);
--tag-input-warning-placeholder-text-color: var(--input-warning-placeholder-text-color);
--tag-input-warning-focus-background-color: var(--input-warning-focus-background-color);
--tag-input-warning-focus-border-color: var(--input-warning-focus-border-color);
--tag-input-warning-disabled-text-color: var(--input-warning-disabled-text-color);
--tag-input-warning-disabled-placeholder-text-color: var(--input-warning-disabled-placeholder-text-color);
--tag-input-danger-background-color: var(--input-danger-background-color);
--tag-input-danger-border-color: var(--input-danger-border-color);
--tag-input-danger-text-color: var(--input-danger-text-color);
--tag-input-danger-placeholder-text-color: var(--input-danger-placeholder-text-color);
--tag-input-danger-focus-background-color: var(--input-danger-focus-background-color);
--tag-input-danger-focus-border-color: var(--input-danger-focus-border-color);
--tag-input-danger-disabled-text-color: var(--input-danger-disabled-text-color);
--tag-input-danger-disabled-placeholder-text-color: var(--input-danger-disabled-placeholder-text-color);
--tag-input-control-background-color: var(--input-control-background-color);
--tag-input-control-border-color: var(--input-control-border-color);
--tag-input-control-text-color: var(--input-control-text-color);
--tag-input-control-placeholder-text-color: var(--input-control-placeholder-text-color);
--tag-input-control-focus-background-color: var(--input-control-focus-background-color);
--tag-input-control-focus-border-color: var(--input-control-focus-border-color);
--tag-input-control-disabled-text-color: var(--input-control-disabled-text-color);
--tag-input-control-disabled-placeholder-text-color: var(--input-control-disabled-placeholder-text-color);
--tag-input-tiny-text-font-size: var(--input-tiny-text-font-size);
--tag-input-tiny-text-font-weight: var(--input-tiny-text-font-weight);
--tag-input-tiny-text-line-height: var(--input-tiny-text-line-height);
--tag-input-tiny-placeholder-text-font-size: var(--input-tiny-placeholder-text-font-size);
--tag-input-tiny-placeholder-text-font-weight: var(--input-tiny-placeholder-text-font-weight);
--tag-input-tiny-placeholder-text-line-height: var(--input-tiny-placeholder-text-line-height);
--tag-input-tiny-padding: 0.125rem 0;
--tag-input-small-text-font-size: var(--input-small-text-font-size);
--tag-input-small-text-font-weight: var(--input-small-text-font-weight);
--tag-input-small-text-line-height: var(--input-small-text-line-height);
--tag-input-small-placeholder-text-font-size: var(--input-small-placeholder-text-font-size);
--tag-input-small-placeholder-text-font-weight: var(--input-small-placeholder-text-font-weight);
--tag-input-small-placeholder-text-line-height: var(--input-small-placeholder-text-line-height);
--tag-input-small-padding: 0.125rem 0;
--tag-input-medium-text-font-size: var(--input-medium-text-font-size);
--tag-input-medium-text-font-weight: var(--input-medium-text-font-weight);
--tag-input-medium-text-line-height: var(--input-medium-text-line-height);
--tag-input-medium-placeholder-text-font-size: var(--input-medium-placeholder-text-font-size);
--tag-input-medium-placeholder-text-font-weight: var(--input-medium-placeholder-text-font-weight);
--tag-input-medium-placeholder-text-line-height: var(--input-medium-placeholder-text-line-height);
--tag-input-medium-padding: 0.25rem 0;
--tag-input-large-text-font-size: var(--input-large-text-font-size);
--tag-input-large-text-font-weight: var(--input-large-text-font-weight);
--tag-input-large-text-line-height: var(--input-large-text-line-height);
--tag-input-large-placeholder-text-font-size: var(--input-large-placeholder-text-font-size);
--tag-input-large-placeholder-text-font-weight: var(--input-large-placeholder-text-font-weight);
--tag-input-large-placeholder-text-line-height: var(--input-large-placeholder-text-line-height);
--tag-input-large-padding: 0.375rem 0;
--tag-input-giant-text-font-size: var(--input-giant-text-font-size);
--tag-input-giant-text-font-weight: var(--input-giant-text-font-weight);
--tag-input-giant-text-line-height: var(--input-giant-text-line-height);
--tag-input-giant-placeholder-text-font-size: var(--input-giant-placeholder-text-font-size);
--tag-input-giant-placeholder-text-font-weight: var(--input-giant-placeholder-text-font-weight);
--tag-input-giant-placeholder-text-line-height: var(--input-giant-placeholder-text-line-height);
--tag-input-giant-padding: 0.5rem 0;
--toggle-height: 1.875rem;
--toggle-width: 3.125rem;
--toggle-border-width: 1px;
--toggle-border-radius: 100px;
--toggle-outline-width: var(--outline-width);
--toggle-outline-color: var(--outline-color);
--toggle-switcher-size: 1.75rem;
--toggle-switcher-icon-size: 0.75rem;
--toggle-text-font-family: var(--text-subtitle-2-font-family);
--toggle-text-font-size: var(--text-subtitle-2-font-size);
--toggle-text-font-weight: var(--text-subtitle-2-font-weight);
--toggle-text-line-height: var(--text-subtitle-2-line-height);
--toggle-cursor: pointer;
--toggle-disabled-cursor: default;
--toggle-basic-text-color: var(--text-basic-color);
--toggle-basic-background-color: var(--color-basic-transparent-default);
--toggle-basic-border-color: var(--color-basic-transparent-default-border);
--toggle-basic-checked-background-color: var(--color-primary-default);
--toggle-basic-checked-border-color: var(--color-primary-default-border);
--toggle-basic-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-basic-checked-switcher-checkmark-color: var(--color-primary-default);
--toggle-basic-focus-background-color: var(--color-primary-transparent-focus);
--toggle-basic-focus-border-color: var(--color-primary-transparent-focus-border);
--toggle-basic-focus-checked-background-color: var(--color-primary-focus);
--toggle-basic-focus-checked-border-color: var(--color-primary-focus-border);
--toggle-basic-hover-background-color: var(--color-primary-transparent-hover);
--toggle-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--toggle-basic-hover-checked-background-color: var(--color-primary-hover);
--toggle-basic-hover-checked-border-color: var(--color-primary-hover-border);
--toggle-basic-active-background-color: var(--color-primary-transparent-active);
--toggle-basic-active-border-color: var(--color-primary-transparent-active-border);
--toggle-basic-active-checked-background-color: var(--color-primary-active);
--toggle-basic-active-checked-border-color: var(--color-primary-active-border);
--toggle-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-basic-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-basic-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-basic-disabled-text-color: var(--text-disabled-color);
--toggle-primary-text-color: var(--text-basic-color);
--toggle-primary-background-color: var(--color-primary-transparent-default);
--toggle-primary-border-color: var(--color-primary-transparent-default-border);
--toggle-primary-checked-background-color: var(--color-primary-default);
--toggle-primary-checked-border-color: var(--color-primary-default-border);
--toggle-primary-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-primary-checked-switcher-checkmark-color: var(--color-primary-default);
--toggle-primary-focus-background-color: var(--color-primary-transparent-focus);
--toggle-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--toggle-primary-focus-checked-background-color: var(--color-primary-focus);
--toggle-primary-focus-checked-border-color: var(--color-primary-focus-border);
--toggle-primary-hover-background-color: var(--color-primary-transparent-hover);
--toggle-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--toggle-primary-hover-checked-background-color: var(--color-primary-hover);
--toggle-primary-hover-checked-border-color: var(--color-primary-hover-border);
--toggle-primary-active-background-color: var(--color-primary-transparent-active);
--toggle-primary-active-border-color: var(--color-primary-transparent-active-border);
--toggle-primary-active-checked-background-color: var(--color-primary-active);
--toggle-primary-active-checked-border-color: var(--color-primary-active-border);
--toggle-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-primary-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-primary-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-primary-disabled-text-color: var(--text-disabled-color);
--toggle-success-text-color: var(--text-basic-color);
--toggle-success-background-color: var(--color-success-transparent-default);
--toggle-success-border-color: var(--color-success-transparent-default-border);
--toggle-success-checked-background-color: var(--color-success-default);
--toggle-success-checked-border-color: var(--color-success-default-border);
--toggle-success-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-success-checked-switcher-checkmark-color: var(--color-success-default);
--toggle-success-focus-background-color: var(--color-success-transparent-focus);
--toggle-success-focus-border-color: var(--color-success-transparent-focus-border);
--toggle-success-focus-checked-background-color: var(--color-success-focus);
--toggle-success-focus-checked-border-color: var(--color-success-focus-border);
--toggle-success-hover-background-color: var(--color-success-transparent-hover);
--toggle-success-hover-border-color: var(--color-success-transparent-hover-border);
--toggle-success-hover-checked-background-color: var(--color-success-hover);
--toggle-success-hover-checked-border-color: var(--color-success-hover-border);
--toggle-success-active-background-color: var(--color-success-transparent-active);
--toggle-success-active-border-color: var(--color-success-transparent-active-border);
--toggle-success-active-checked-background-color: var(--color-success-active);
--toggle-success-active-checked-border-color: var(--color-success-active-border);
--toggle-success-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-success-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-success-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-success-disabled-text-color: var(--text-disabled-color);
--toggle-info-text-color: var(--text-basic-color);
--toggle-info-background-color: var(--color-info-transparent-default);
--toggle-info-border-color: var(--color-info-transparent-default-border);
--toggle-info-checked-background-color: var(--color-info-default);
--toggle-info-checked-border-color: var(--color-info-default-border);
--toggle-info-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-info-checked-switcher-checkmark-color: var(--color-info-default);
--toggle-info-focus-background-color: var(--color-info-transparent-focus);
--toggle-info-focus-border-color: var(--color-info-transparent-focus-border);
--toggle-info-focus-checked-background-color: var(--color-info-focus);
--toggle-info-focus-checked-border-color: var(--color-info-focus-border);
--toggle-info-hover-background-color: var(--color-info-transparent-hover);
--toggle-info-hover-border-color: var(--color-info-transparent-hover-border);
--toggle-info-hover-checked-background-color: var(--color-info-hover);
--toggle-info-hover-checked-border-color: var(--color-info-hover-border);
--toggle-info-active-background-color: var(--color-info-transparent-active);
--toggle-info-active-border-color: var(--color-info-transparent-active-border);
--toggle-info-active-checked-background-color: var(--color-info-active);
--toggle-info-active-checked-border-color: var(--color-info-active-border);
--toggle-info-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-info-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-info-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-info-disabled-text-color: var(--text-disabled-color);
--toggle-warning-text-color: var(--text-basic-color);
--toggle-warning-background-color: var(--color-warning-transparent-default);
--toggle-warning-border-color: var(--color-warning-transparent-default-border);
--toggle-warning-checked-background-color: var(--color-warning-default);
--toggle-warning-checked-border-color: var(--color-warning-default-border);
--toggle-warning-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-warning-checked-switcher-checkmark-color: var(--color-warning-default);
--toggle-warning-focus-background-color: var(--color-warning-transparent-focus);
--toggle-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--toggle-warning-focus-checked-background-color: var(--color-warning-focus);
--toggle-warning-focus-checked-border-color: var(--color-warning-focus-border);
--toggle-warning-hover-background-color: var(--color-warning-transparent-hover);
--toggle-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--toggle-warning-hover-checked-background-color: var(--color-warning-hover);
--toggle-warning-hover-checked-border-color: var(--color-warning-hover-border);
--toggle-warning-active-background-color: var(--color-warning-transparent-active);
--toggle-warning-active-border-color: var(--color-warning-transparent-active-border);
--toggle-warning-active-checked-background-color: var(--color-warning-active);
--toggle-warning-active-checked-border-color: var(--color-warning-active-border);
--toggle-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-warning-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-warning-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-warning-disabled-text-color: var(--text-disabled-color);
--toggle-danger-text-color: var(--text-basic-color);
--toggle-danger-background-color: var(--color-danger-transparent-default);
--toggle-danger-border-color: var(--color-danger-transparent-default-border);
--toggle-danger-checked-background-color: var(--color-danger-default);
--toggle-danger-checked-border-color: var(--color-danger-default-border);
--toggle-danger-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-danger-checked-switcher-checkmark-color: var(--color-danger-default);
--toggle-danger-focus-background-color: var(--color-danger-transparent-focus);
--toggle-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--toggle-danger-focus-checked-background-color: var(--color-danger-focus);
--toggle-danger-focus-checked-border-color: var(--color-danger-focus-border);
--toggle-danger-hover-background-color: var(--color-danger-transparent-hover);
--toggle-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--toggle-danger-hover-checked-background-color: var(--color-danger-hover);
--toggle-danger-hover-checked-border-color: var(--color-danger-hover-border);
--toggle-danger-active-background-color: var(--color-danger-transparent-active);
--toggle-danger-active-border-color: var(--color-danger-transparent-active-border);
--toggle-danger-active-checked-background-color: var(--color-danger-active);
--toggle-danger-active-checked-border-color: var(--color-danger-active-border);
--toggle-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-danger-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-danger-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-danger-disabled-text-color: var(--text-disabled-color);
--toggle-control-text-color: var(--color-basic-100);
--toggle-control-background-color: var(--color-control-transparent-default);
--toggle-control-border-color: var(--color-control-transparent-default-border);
--toggle-control-checked-background-color: var(--color-control-transparent-default);
--toggle-control-checked-border-color: var(--color-control-transparent-default-border);
--toggle-control-checked-switcher-background-color: var(--color-control-default);
--toggle-control-checked-switcher-checkmark-color: var(--color-basic-800);
--toggle-control-focus-background-color: var(--color-control-transparent-focus);
--toggle-control-focus-border-color: var(--color-control-transparent-focus-border);
--toggle-control-focus-checked-background-color: var(--color-control-transparent-focus);
--toggle-control-focus-checked-border-color: var(--color-control-transparent-focus-border);
--toggle-control-hover-background-color: var(--color-control-transparent-hover);
--toggle-control-hover-border-color: var(--color-control-transparent-hover-border);
--toggle-control-hover-checked-background-color: var(--color-control-transparent-hover);
--toggle-control-hover-checked-border-color: var(--color-control-transparent-hover-border);
--toggle-control-active-background-color: var(--color-control-transparent-active);
--toggle-control-active-border-color: var(--color-control-transparent-active-border);
--toggle-control-active-checked-background-color: var(--color-control-transparent-active);
--toggle-control-active-checked-border-color: var(--color-control-transparent-active-border);
--toggle-control-disabled-background-color: var(--color-control-transparent-disabled);
--toggle-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--toggle-control-disabled-switcher-background-color: var(--color-basic-transparent-600);
--toggle-control-disabled-checked-switcher-checkmark-color: var(--color-basic-100);
--toggle-control-disabled-text-color: var(--text-control-color);
--form-field-tiny-max-width: var(--input-tiny-max-width);
--form-field-small-max-width: var(--input-small-max-width);
--form-field-medium-max-width: var(--input-medium-max-width);
--form-field-large-max-width: var(--input-large-max-width);
--form-field-giant-max-width: var(--input-giant-max-width);
--form-field-addon-basic-text-color: var(--color-basic-600);
--form-field-addon-basic-highlight-text-color: var(--color-primary-500);
--form-field-addon-primary-text-color: var(--color-primary-500);
--form-field-addon-primary-highlight-text-color: var(--color-primary-600);
--form-field-addon-success-text-color: var(--color-success-500);
--form-field-addon-success-highlight-text-color: var(--color-success-600);
--form-field-addon-info-text-color: var(--color-info-500);
--form-field-addon-info-highlight-text-color: var(--color-info-600);
--form-field-addon-warning-text-color: var(--color-warning-500);
--form-field-addon-warning-highlight-text-color: var(--color-warning-600);
--form-field-addon-danger-text-color: var(--color-danger-500);
--form-field-addon-danger-highlight-text-color: var(--color-danger-600);
--form-field-addon-control-text-color: var(--color-control-default);
--form-field-addon-control-highlight-text-color: var(--color-control-default);
--form-field-addon-disabled-text-color: var(--text-disabled-color);
--form-field-addon-tiny-height: 1.5rem;
--form-field-addon-tiny-width: var(--form-field-addon-tiny-height);
--form-field-addon-tiny-icon-size: var(--button-tiny-icon-size);
--form-field-addon-tiny-font-size: var(--text-button-tiny-font-size);
--form-field-addon-tiny-line-height: var(--text-button-tiny-line-height);
--form-field-addon-tiny-font-weight: var(--text-button-font-weight);
--form-field-addon-small-height: 2rem;
--form-field-addon-small-width: var(--form-field-addon-small-height);
--form-field-addon-small-icon-size: var(--button-small-icon-size);
--form-field-addon-small-font-size: var(--text-button-small-font-size);
--form-field-addon-small-line-height: var(--text-button-small-line-height);
--form-field-addon-small-font-weight: var(--text-button-font-weight);
--form-field-addon-medium-height: 2.5rem;
--form-field-addon-medium-width: var(--form-field-addon-medium-height);
--form-field-addon-medium-icon-size: var(--button-medium-icon-size);
--form-field-addon-medium-font-size: var(--text-button-medium-font-size);
--form-field-addon-medium-line-height: var(--text-button-medium-line-height);
--form-field-addon-medium-font-weight: var(--text-button-font-weight);
--form-field-addon-large-height: 3rem;
--form-field-addon-large-width: var(--form-field-addon-large-height);
--form-field-addon-large-icon-size: var(--button-large-icon-size);
--form-field-addon-large-font-size: var(--text-button-large-font-size);
--form-field-addon-large-line-height: var(--text-button-large-line-height);
--form-field-addon-large-font-weight: var(--text-button-font-weight);
--form-field-addon-giant-height: 3.5rem;
--form-field-addon-giant-width: var(--form-field-addon-giant-height);
--form-field-addon-giant-icon-size: var(--button-giant-icon-size);
--form-field-addon-giant-font-size: var(--text-button-giant-font-size);
--form-field-addon-giant-line-height: var(--text-button-giant-line-height);
--form-field-addon-giant-font-weight: var(--text-button-font-weight);
--color-primary-100: #f2f6ff;
--color-primary-200: #d9e4ff;
--color-primary-300: #a6c1ff;
--color-primary-400: #598bff;
--color-primary-500: #3366ff;
--color-primary-600: #274bdb;
--color-primary-700: #1a34b8;
--color-primary-800: #102694;
--color-primary-900: #091c7a;
--color-primary-transparent-100: rgba(51, 102, 255, 0.08);
--color-primary-transparent-200: rgba(51, 102, 255, 0.16);
--color-primary-transparent-300: rgba(51, 102, 255, 0.24);
--color-primary-transparent-400: rgba(51, 102, 255, 0.32);
--color-primary-transparent-500: rgba(51, 102, 255, 0.4);
--color-primary-transparent-600: rgba(51, 102, 255, 0.48);
--color-success-100: #f0fff5;
--color-success-200: #ccfce3;
--color-success-300: #8cfac7;
--color-success-400: #2ce69b;
--color-success-500: #00d68f;
--color-success-600: #00b887;
--color-success-700: #00997a;
--color-success-800: #007d6c;
--color-success-900: #004a45;
--color-success-transparent-100: rgba(0, 214, 143, 0.08);
--color-success-transparent-200: rgba(0, 214, 143, 0.16);
--color-success-transparent-300: rgba(0, 214, 143, 0.24);
--color-success-transparent-400: rgba(0, 214, 143, 0.32);
--color-success-transparent-500: rgba(0, 214, 143, 0.4);
--color-success-transparent-600: rgba(0, 214, 143, 0.48);
--color-info-100: #f2f8ff;
--color-info-200: #c7e2ff;
--color-info-300: #94cbff;
--color-info-400: #42aaff;
--color-info-500: #0095ff;
--color-info-600: #006fd6;
--color-info-700: #0057c2;
--color-info-800: #0041a8;
--color-info-900: #002885;
--color-info-transparent-100: rgba(0, 149, 255, 0.08);
--color-info-transparent-200: rgba(0, 149, 255, 0.16);
--color-info-transparent-300: rgba(0, 149, 255, 0.24);
--color-info-transparent-400: rgba(0, 149, 255, 0.32);
--color-info-transparent-500: rgba(0, 149, 255, 0.4);
--color-info-transparent-600: rgba(0, 149, 255, 0.48);
--color-warning-100: #fffdf2;
--color-warning-200: #fff1c2;
--color-warning-300: #ffe59e;
--color-warning-400: #ffc94d;
--color-warning-500: #ffaa00;
--color-warning-600: #db8b00;
--color-warning-700: #b86e00;
--color-warning-800: #945400;
--color-warning-900: #703c00;
--color-warning-transparent-100: rgba(255, 170, 0, 0.08);
--color-warning-transparent-200: rgba(255, 170, 0, 0.16);
--color-warning-transparent-300: rgba(255, 170, 0, 0.24);
--color-warning-transparent-400: rgba(255, 170, 0, 0.32);
--color-warning-transparent-500: rgba(255, 170, 0, 0.4);
--color-warning-transparent-600: rgba(255, 170, 0, 0.48);
--color-danger-100: #fff2f2;
--color-danger-200: #ffd6d9;
--color-danger-300: #ffa8b4;
--color-danger-400: #ff708d;
--color-danger-500: #ff3d71;
--color-danger-600: #db2c66;
--color-danger-700: #b81d5b;
--color-danger-800: #94124e;
--color-danger-900: #700940;
--color-danger-transparent-100: rgba(255, 61, 113, 0.08);
--color-danger-transparent-200: rgba(255, 61, 113, 0.16);
--color-danger-transparent-300: rgba(255, 61, 113, 0.24);
--color-danger-transparent-400: rgba(255, 61, 113, 0.32);
--color-danger-transparent-500: rgba(255, 61, 113, 0.4);
--color-danger-transparent-600: rgba(255, 61, 113, 0.48);
--color-basic-100: #ffffff;
--color-basic-200: #f7f9fc;
--color-basic-300: #edf1f7;
--color-basic-400: #e4e9f2;
--color-basic-500: #c5cee0;
--color-basic-600: #8f9bb3;
--color-basic-700: #2e3a59;
--color-basic-800: #222b45;
--color-basic-900: #192038;
--color-basic-1000: #151a30;
--color-basic-1100: #101426;
--color-basic-transparent-100: rgba(143, 155, 179, 0.08);
--color-basic-transparent-200: rgba(143, 155, 179, 0.16);
--color-basic-transparent-300: rgba(143, 155, 179, 0.24);
--color-basic-transparent-400: rgba(143, 155, 179, 0.32);
--color-basic-transparent-500: rgba(143, 155, 179, 0.4);
--color-basic-transparent-600: rgba(143, 155, 179, 0.48);
--color-basic-control-transparent-100: rgba(255, 255, 255, 0.08);
--color-basic-control-transparent-200: rgba(255, 255, 255, 0.16);
--color-basic-control-transparent-300: rgba(255, 255, 255, 0.24);
--color-basic-control-transparent-400: rgba(255, 255, 255, 0.32);
--color-basic-control-transparent-500: rgba(255, 255, 255, 0.4);
--color-basic-control-transparent-600: rgba(255, 255, 255, 0.48);
--color-basic-focus: var(--color-basic-400);
--color-basic-hover: var(--color-basic-200);
--color-basic-default: var(--color-basic-300);
--color-basic-active: var(--color-basic-400);
--color-basic-disabled: var(--color-basic-transparent-300);
--color-basic-focus-border: var(--color-basic-500);
--color-basic-hover-border: var(--color-basic-hover);
--color-basic-default-border: var(--color-basic-default);
--color-basic-active-border: var(--color-basic-active);
--color-basic-disabled-border: var(--color-basic-disabled);
--color-basic-transparent-focus: var(--color-basic-transparent-300);
--color-basic-transparent-hover: var(--color-basic-transparent-200);
--color-basic-transparent-default: var(--color-basic-transparent-100);
--color-basic-transparent-active: var(--color-basic-transparent-300);
--color-basic-transparent-disabled: var(--color-basic-transparent-200);
--color-basic-transparent-focus-border: var(--color-basic-600);
--color-basic-transparent-hover-border: var(--color-basic-600);
--color-basic-transparent-default-border: var(--color-basic-600);
--color-basic-transparent-active-border: var(--color-basic-600);
--color-basic-transparent-disabled-border: var(--color-basic-transparent-300);
--color-primary-focus: var(--color-primary-600);
--color-primary-hover: var(--color-primary-400);
--color-primary-default: var(--color-primary-500);
--color-primary-active: var(--color-primary-600);
--color-primary-disabled: var(--color-basic-transparent-300);
--color-primary-focus-border: var(--color-primary-700);
--color-primary-hover-border: var(--color-primary-hover);
--color-primary-default-border: var(--color-primary-default);
--color-primary-active-border: var(--color-primary-active);
--color-primary-disabled-border: var(--color-primary-disabled);
--color-primary-transparent-focus: var(--color-primary-transparent-300);
--color-primary-transparent-hover: var(--color-primary-transparent-200);
--color-primary-transparent-default: var(--color-primary-transparent-100);
--color-primary-transparent-active: var(--color-primary-transparent-300);
--color-primary-transparent-disabled: var(--color-basic-transparent-200);
--color-primary-transparent-focus-border: var(--color-primary-500);
--color-primary-transparent-hover-border: var(--color-primary-500);
--color-primary-transparent-default-border: var(--color-primary-500);
--color-primary-transparent-active-border: var(--color-primary-500);
--color-primary-transparent-disabled-border: var(--color-basic-transparent-300);
--color-success-focus: var(--color-success-600);
--color-success-hover: var(--color-success-400);
--color-success-default: var(--color-success-500);
--color-success-active: var(--color-success-600);
--color-success-disabled: var(--color-basic-transparent-300);
--color-success-focus-border: var(--color-success-700);
--color-success-hover-border: var(--color-success-hover);
--color-success-default-border: var(--color-success-default);
--color-success-active-border: var(--color-success-active);
--color-success-disabled-border: var(--color-success-disabled);
--color-success-transparent-focus: var(--color-success-transparent-300);
--color-success-transparent-focus-border: var(--color-success-500);
--color-success-transparent-hover: var(--color-success-transparent-200);
--color-success-transparent-hover-border: var(--color-success-500);
--color-success-transparent-default: var(--color-success-transparent-100);
--color-success-transparent-default-border: var(--color-success-500);
--color-success-transparent-active: var(--color-success-transparent-300);
--color-success-transparent-active-border: var(--color-success-500);
--color-success-transparent-disabled: var(--color-basic-transparent-200);
--color-success-transparent-disabled-border: var(--color-basic-transparent-300);
--color-info-focus: var(--color-info-600);
--color-info-hover: var(--color-info-400);
--color-info-default: var(--color-info-500);
--color-info-active: var(--color-info-600);
--color-info-disabled: var(--color-basic-transparent-300);
--color-info-focus-border: var(--color-info-700);
--color-info-hover-border: var(--color-info-hover);
--color-info-default-border: var(--color-info-default);
--color-info-active-border: var(--color-info-active);
--color-info-disabled-border: var(--color-info-disabled);
--color-info-transparent-focus: var(--color-info-transparent-300);
--color-info-transparent-hover: var(--color-info-transparent-200);
--color-info-transparent-default: var(--color-info-transparent-100);
--color-info-transparent-active: var(--color-info-transparent-300);
--color-info-transparent-disabled: var(--color-basic-transparent-200);
--color-info-transparent-focus-border: var(--color-info-500);
--color-info-transparent-hover-border: var(--color-info-500);
--color-info-transparent-default-border: var(--color-info-500);
--color-info-transparent-active-border: var(--color-info-500);
--color-info-transparent-disabled-border: var(--color-basic-transparent-300);
--color-warning-focus: var(--color-warning-600);
--color-warning-hover: var(--color-warning-400);
--color-warning-default: var(--color-warning-500);
--color-warning-active: var(--color-warning-600);
--color-warning-disabled: var(--color-basic-transparent-300);
--color-warning-focus-border: var(--color-warning-700);
--color-warning-hover-border: var(--color-warning-hover);
--color-warning-default-border: var(--color-warning-default);
--color-warning-active-border: var(--color-warning-active);
--color-warning-disabled-border: var(--color-warning-disabled);
--color-warning-transparent-focus: var(--color-warning-transparent-300);
--color-warning-transparent-hover: var(--color-warning-transparent-200);
--color-warning-transparent-default: var(--color-warning-transparent-100);
--color-warning-transparent-active: var(--color-warning-transparent-300);
--color-warning-transparent-disabled: var(--color-basic-transparent-200);
--color-warning-transparent-focus-border: var(--color-warning-500);
--color-warning-transparent-hover-border: var(--color-warning-500);
--color-warning-transparent-default-border: var(--color-warning-500);
--color-warning-transparent-active-border: var(--color-warning-500);
--color-warning-transparent-disabled-border: var(--color-basic-transparent-300);
--color-danger-focus: var(--color-danger-600);
--color-danger-hover: var(--color-danger-400);
--color-danger-default: var(--color-danger-500);
--color-danger-active: var(--color-danger-600);
--color-danger-disabled: var(--color-basic-transparent-300);
--color-danger-focus-border: var(--color-danger-700);
--color-danger-hover-border: var(--color-danger-hover);
--color-danger-default-border: var(--color-danger-default);
--color-danger-active-border: var(--color-danger-active);
--color-danger-disabled-border: var(--color-danger-disabled);
--color-danger-transparent-focus: var(--color-danger-transparent-300);
--color-danger-transparent-hover: var(--color-danger-transparent-200);
--color-danger-transparent-default: var(--color-danger-transparent-100);
--color-danger-transparent-active: var(--color-danger-transparent-300);
--color-danger-transparent-disabled: var(--color-basic-transparent-200);
--color-danger-transparent-focus-border: var(--color-danger-500);
--color-danger-transparent-hover-border: var(--color-danger-500);
--color-danger-transparent-default-border: var(--color-danger-500);
--color-danger-transparent-active-border: var(--color-danger-500);
--color-danger-transparent-disabled-border: var(--color-basic-transparent-300);
--color-control-focus: var(--color-basic-300);
--color-control-hover: var(--color-basic-200);
--color-control-default: var(--color-basic-100);
--color-control-active: var(--color-basic-300);
--color-control-disabled: var(--color-basic-transparent-300);
--color-control-focus-border: var(--color-basic-500);
--color-control-hover-border: var(--color-control-hover);
--color-control-default-border: var(--color-control-default);
--color-control-active-border: var(--color-control-active);
--color-control-disabled-border: var(--color-control-disabled);
--color-control-transparent-focus: var(--color-basic-control-transparent-300);
--color-control-transparent-hover: var(--color-basic-control-transparent-200);
--color-control-transparent-default: var(--color-basic-control-transparent-100);
--color-control-transparent-active: var(--color-basic-control-transparent-300);
--color-control-transparent-disabled: var(--color-basic-transparent-200);
--color-control-transparent-focus-border: var(--color-basic-100);
--color-control-transparent-hover-border: var(--color-basic-100);
--color-control-transparent-default-border: var(--color-basic-100);
--color-control-transparent-active-border: var(--color-basic-100);
--color-control-transparent-disabled-border: var(--color-basic-transparent-300);
--background-basic-color-1: var(--color-basic-100);
--background-basic-color-2: var(--color-basic-200);
--background-basic-color-3: var(--color-basic-300);
--background-basic-color-4: var(--color-basic-400);
--border-basic-color-1: var(--color-basic-100);
--border-basic-color-2: var(--color-basic-200);
--border-basic-color-3: var(--color-basic-300);
--border-basic-color-4: var(--color-basic-400);
--border-basic-color-5: var(--color-basic-500);
--background-alternative-color-1: var(--color-basic-800);
--background-alternative-color-2: var(--color-basic-900);
--background-alternative-color-3: var(--color-basic-1000);
--background-alternative-color-4: var(--color-basic-1100);
--border-alternative-color-1: var(--color-basic-800);
--border-alternative-color-2: var(--color-basic-900);
--border-alternative-color-3: var(--color-basic-1000);
--border-alternative-color-4: var(--color-basic-1100);
--border-alternative-color-5: var(--color-basic-1100);
--background-primary-color-1: var(--color-primary-500);
--background-primary-color-2: var(--color-primary-600);
--background-primary-color-3: var(--color-primary-700);
--background-primary-color-4: var(--color-primary-800);
--border-primary-color-1: var(--color-basic-500);
--border-primary-color-2: var(--color-basic-600);
--border-primary-color-3: var(--color-basic-700);
--border-primary-color-4: var(--color-basic-800);
--border-primary-color-5: var(--color-basic-900);
--text-basic-color: var(--color-basic-800);
--text-alternate-color: var(--color-basic-100);
--text-control-color: var(--color-basic-100);
--text-disabled-color: var(--color-basic-transparent-600);
--text-hint-color: var(--color-basic-600);
--text-primary-color: var(--color-primary-default);
--text-primary-focus-color: var(--color-primary-focus);
--text-primary-hover-color: var(--color-primary-hover);
--text-primary-active-color: var(--color-primary-active);
--text-primary-disabled-color: var(--color-primary-400);
--text-success-color: var(--color-success-default);
--text-success-focus-color: var(--color-success-focus);
--text-success-hover-color: var(--color-success-hover);
--text-success-active-color: var(--color-success-active);
--text-success-disabled-color: var(--color-success-400);
--text-info-color: var(--color-info-default);
--text-info-focus-color: var(--color-info-focus);
--text-info-hover-color: var(--color-info-hover);
--text-info-active-color: var(--color-info-active);
--text-info-disabled-color: var(--color-info-400);
--text-warning-color: var(--color-warning-default);
--text-warning-focus-color: var(--color-warning-focus);
--text-warning-hover-color: var(--color-warning-hover);
--text-warning-active-color: var(--color-warning-active);
--text-warning-disabled-color: var(--color-warning-400);
--text-danger-color: var(--color-danger-default);
--text-danger-focus-color: var(--color-danger-focus);
--text-danger-hover-color: var(--color-danger-hover);
--text-danger-active-color: var(--color-danger-active);
--text-danger-disabled-color: var(--color-danger-400);
--font-family-primary: Open Sans, sans-serif;
--font-family-secondary: var(--font-family-primary);
--text-heading-1-font-family: var(--font-family-secondary);
--text-heading-1-font-size: 2.25rem;
--text-heading-1-font-weight: 700;
--text-heading-1-line-height: 3rem;
--text-heading-2-font-family: var(--font-family-secondary);
--text-heading-2-font-size: 2rem;
--text-heading-2-font-weight: 700;
--text-heading-2-line-height: 2.5rem;
--text-heading-3-font-family: var(--font-family-secondary);
--text-heading-3-font-size: 1.875rem;
--text-heading-3-font-weight: 700;
--text-heading-3-line-height: 2.5rem;
--text-heading-4-font-family: var(--font-family-secondary);
--text-heading-4-font-size: 1.625rem;
--text-heading-4-font-weight: 700;
--text-heading-4-line-height: 2rem;
--text-heading-5-font-family: var(--font-family-secondary);
--text-heading-5-font-size: 1.375rem;
--text-heading-5-font-weight: 700;
--text-heading-5-line-height: 2rem;
--text-heading-6-font-family: var(--font-family-secondary);
--text-heading-6-font-size: 1.125rem;
--text-heading-6-font-weight: 700;
--text-heading-6-line-height: 1.5rem;
--text-subtitle-font-family: var(--font-family-primary);
--text-subtitle-font-size: 0.9375rem;
--text-subtitle-font-weight: 600;
--text-subtitle-line-height: 1.5rem;
--text-subtitle-2-font-family: var(--font-family-primary);
--text-subtitle-2-font-size: 0.8125rem;
--text-subtitle-2-font-weight: 600;
--text-subtitle-2-line-height: 1.5rem;
--text-paragraph-font-family: var(--font-family-primary);
--text-paragraph-font-size: 0.9375rem;
--text-paragraph-font-weight: 400;
--text-paragraph-line-height: 1.25rem;
--text-paragraph-2-font-family: var(--font-family-primary);
--text-paragraph-2-font-size: 0.8125rem;
--text-paragraph-2-font-weight: 400;
--text-paragraph-2-line-height: 1.125rem;
--text-label-font-family: var(--font-family-primary);
--text-label-font-size: 0.75rem;
--text-label-font-weight: 700;
--text-label-line-height: 1rem;
--text-caption-font-family: var(--font-family-primary);
--text-caption-font-size: 0.75rem;
--text-caption-font-weight: 400;
--text-caption-line-height: 1rem;
--text-caption-2-font-family: var(--font-family-primary);
--text-caption-2-font-size: 0.75rem;
--text-caption-2-font-weight: 600;
--text-caption-2-line-height: 1rem;
--text-button-font-family: var(--font-family-primary);
--text-button-font-weight: 700;
--text-button-tiny-font-size: 0.625rem;
--text-button-tiny-line-height: 0.75rem;
--text-button-small-font-size: 0.75rem;
--text-button-small-line-height: 1rem;
--text-button-medium-font-size: 0.875rem;
--text-button-medium-line-height: 1rem;
--text-button-large-font-size: 1rem;
--text-button-large-line-height: 1.25rem;
--text-button-giant-font-size: 1.125rem;
--text-button-giant-line-height: 1.5rem;
--border-radius: 0.25rem;
--outline-width: 0.375rem;
--outline-color: var(--color-basic-transparent-200);
--scrollbar-color: var(--background-basic-color-4);
--scrollbar-background-color: var(--background-basic-color-2);
--scrollbar-width: 0.3125rem;
--shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1);
--divider-color: var(--border-basic-color-3);
--divider-style: solid;
--divider-width: 1px;
}
.nb-theme-dark {
--link-text-color: var(--text-primary-color);
--link-text-decoration: underline;
--link-text-focus-color: var(--text-primary-focus-color);
--link-text-hover-color: var(--text-primary-hover-color);
--card-background-color: var(--background-basic-color-1);
--card-text-color: var(--text-basic-color);
--card-text-font-family: var(--text-paragraph-font-family);
--card-text-font-size: var(--text-paragraph-font-size);
--card-text-font-weight: var(--text-paragraph-font-weight);
--card-text-line-height: var(--text-paragraph-line-height);
--card-border-width: 0.0625rem;
--card-border-style: solid;
--card-border-color: var(--border-basic-color-4);
--card-border-radius: var(--border-radius);
--card-padding: 1rem 1.5rem;
--card-shadow: none;
--card-divider-color: var(--divider-color);
--card-divider-style: var(--divider-style);
--card-divider-width: var(--divider-width);
--card-header-text-color: var(--text-basic-color);
--card-header-text-font-family: var(--text-subtitle-font-family);
--card-header-text-font-size: var(--text-subtitle-font-size);
--card-header-text-font-weight: var(--text-subtitle-font-weight);
--card-header-text-line-height: var(--text-subtitle-line-height);
--card-header-basic-background-color: var(--background-basic-color-2);
--card-header-basic-text-color: var(--text-basic-color);
--card-header-primary-background-color: var(--color-primary-default);
--card-header-primary-text-color: var(--text-control-color);
--card-header-info-background-color: var(--color-info-default);
--card-header-info-text-color: var(--text-control-color);
--card-header-success-background-color: var(--color-success-default);
--card-header-success-text-color: var(--text-control-color);
--card-header-warning-background-color: var(--color-warning-default);
--card-header-warning-text-color: var(--text-control-color);
--card-header-danger-background-color: var(--color-danger-default);
--card-header-danger-text-color: var(--text-control-color);
--card-header-control-background-color: var(--color-control-default);
--card-header-control-text-color: var(--color-basic-800);
--card-height-tiny: 13.5rem;
--card-height-small: 21.1875rem;
--card-height-medium: 28.875rem;
--card-height-large: 36.5625rem;
--card-height-giant: 44.25rem;
--card-margin-bottom: 1.875rem;
--card-scrollbar-color: var(--scrollbar-color);
--card-scrollbar-background-color: var(--scrollbar-background-color);
--card-scrollbar-width: var(--scrollbar-width);
--header-background-color: var(--background-basic-color-1);
--header-text-color: var(--text-basic-color);
--header-text-font-family: var(--text-paragraph-font-family);
--header-text-font-size: var(--text-paragraph-font-size);
--header-text-font-weight: var(--text-paragraph-font-weight);
--header-text-line-height: var(--text-paragraph-line-height);
--header-height: 4.75rem;
--header-padding: 1.25rem;
--header-shadow: var(--shadow);
--footer-background-color: var(--background-basic-color-1);
--footer-text-color: var(--text-basic-color);
--footer-text-font-family: var(--text-paragraph-font-family);
--footer-text-font-size: var(--text-paragraph-font-size);
--footer-text-font-weight: var(--text-paragraph-font-weight);
--footer-text-line-height: var(--text-paragraph-line-height);
--footer-text-highlight-color: var(--color-primary-hover);
--footer-height: 4.725rem;
--footer-padding: 1.25rem;
--footer-divider-color: var(--divider-color);
--footer-divider-style: var(--divider-style);
--footer-divider-width: var(--divider-width);
--footer-shadow: var(--shadow);
--layout-background-color: var(--background-basic-color-3);
--layout-text-color: var(--text-basic-color);
--layout-text-font-family: var(--text-paragraph-font-family);
--layout-text-font-size: var(--text-paragraph-font-size);
--layout-text-font-weight: var(--text-paragraph-font-weight);
--layout-text-line-height: var(--text-paragraph-line-height);
--layout-min-height: 100vh;
--layout-content-width: 900px;
--layout-window-mode-min-width: 300px;
--layout-window-mode-max-width: 1920px;
--layout-window-mode-background-color: var(--background-basic-color-3);
--layout-window-mode-padding-top: 4.75rem;
--layout-window-shadow: var(--shadow);
--layout-padding: 2.25rem 2.25rem 0.75rem;
--layout-medium-padding: 1.5rem 1.5rem 0.5rem;
--layout-small-padding: 1rem 1rem 0;
--layout-scrollbar-background-color: var(--scrollbar-background-color);
--layout-scrollbar-color: var(--scrollbar-color);
--layout-scrollbar-width: var(--scrollbar-width);
--sidebar-background-color: var(--background-basic-color-1);
--sidebar-text-color: var(--text-basic-color);
--sidebar-text-font-family: var(--text-paragraph-font-family);
--sidebar-text-font-size: var(--text-paragraph-font-size);
--sidebar-text-font-weight: var(--text-paragraph-font-weight);
--sidebar-text-line-height: var(--text-paragraph-line-height);
--sidebar-height: 100vh;
--sidebar-width: 16rem;
--sidebar-width-compact: 3.5rem;
--sidebar-padding: 1.25rem;
--sidebar-header-height: 3.5rem;
--sidebar-footer-height: 3.5rem;
--sidebar-shadow: var(--shadow);
--sidebar-menu-item-highlight-color: var(--color-primary-default);
--sidebar-scrollbar-background-color: var(--scrollbar-background-color);
--sidebar-scrollbar-color: var(--scrollbar-color);
--sidebar-scrollbar-width: var(--scrollbar-width);
--menu-background-color: transparent;
--menu-text-color: var(--text-basic-color);
--menu-text-font-family: var(--text-subtitle-2-font-family);
--menu-text-font-size: var(--text-subtitle-2-font-size);
--menu-text-font-weight: var(--text-subtitle-2-font-weight);
--menu-text-line-height: var(--text-subtitle-2-line-height);
--menu-group-text-color: var(--text-hint-color);
--menu-item-border-radius: 0;
--menu-item-padding: 0.75rem 1rem;
--menu-item-hover-background-color: var(--menu-background-color);
--menu-item-hover-cursor: pointer;
--menu-item-hover-text-color: var(--text-primary-hover-color);
--menu-item-icon-hover-color: var(--menu-item-hover-text-color);
--menu-item-active-background-color: var(--menu-background-color);
--menu-item-active-text-color: var(--text-primary-color);
--menu-item-icon-active-color: var(--menu-item-active-text-color);
--menu-item-icon-color: var(--text-hint-color);
--menu-item-icon-margin: 0 0.5rem 0 0;
--menu-item-icon-width: 1.25rem;
--menu-item-divider-color: var(--divider-color);
--menu-item-divider-style: var(--divider-style);
--menu-item-divider-width: var(--divider-width);
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-text-color: var(--text-basic-color);
--menu-submenu-margin: 0;
--menu-submenu-padding: 0 1.25rem;
--menu-submenu-item-border-color: var(--menu-submenu-background-color);
--menu-submenu-item-border-style: solid;
--menu-submenu-item-border-width: 0;
--menu-submenu-item-border-radius: 0;
--menu-submenu-item-padding: var(--menu-item-padding);
--menu-submenu-item-hover-background-color: var(--menu-background-color);
--menu-submenu-item-hover-border-color: var(--menu-submenu-item-border-color);
--menu-submenu-item-hover-text-color: var(--menu-item-hover-text-color);
--menu-submenu-item-icon-hover-color: var(--menu-item-icon-hover-color);
--menu-submenu-item-active-background-color: var(--menu-background-color);
--menu-submenu-item-active-border-color: var(--color-primary-default);
--menu-submenu-item-active-text-color: var(--menu-item-active-text-color);
--menu-submenu-item-icon-active-color: var(--menu-item-icon-active-color);
--menu-submenu-item-active-hover-background-color: var(--menu-submenu-item-hover-background-color);
--menu-submenu-item-active-hover-border-color: var(--color-primary-hover);
--menu-submenu-item-active-hover-text-color: var(--menu-submenu-item-hover-text-color);
--menu-submenu-item-icon-active-hover-color: var(--menu-submenu-item-icon-hover-color);
--tabset-background-color: transparent;
--tabset-border-radius: 0;
--tabset-shadow: none;
--tabset-tab-background-color: transparent;
--tabset-tab-padding: 1rem 2rem;
--tabset-tab-text-color: var(--text-hint-color);
--tabset-tab-text-font-family: var(--text-button-font-family);
--tabset-tab-text-font-size: var(--text-button-medium-font-size);
--tabset-tab-text-font-weight: var(--text-button-font-weight);
--tabset-tab-text-line-height: var(--text-button-medium-line-height);
--tabset-tab-text-transform: uppercase;
--tabset-tab-underline-width: 0.25rem;
--tabset-tab-underline-color: transparent;
--tabset-tab-active-background-color: transparent;
--tabset-tab-active-text-color: var(--text-primary-color);
--tabset-tab-active-underline-color: var(--text-primary-color);
--tabset-tab-focus-background-color: transparent;
--tabset-tab-focus-text-color: var(--text-primary-focus-color);
--tabset-tab-focus-underline-color: var(--text-primary-focus-color);
--tabset-tab-hover-background-color: transparent;
--tabset-tab-hover-text-color: var(--text-primary-hover-color);
--tabset-tab-hover-underline-color: var(--text-primary-hover-color);
--tabset-tab-disabled-background-color: transparent;
--tabset-tab-disabled-text-color: var(--text-disabled-color);
--tabset-tab-disabled-underline-color: transparent;
--tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem;
--tabset-tab-badge-dot-mode-padding: 0.25rem;
--tabset-divider-color: var(--divider-color);
--tabset-divider-style: var(--divider-style);
--tabset-divider-width: var(--divider-width);
--tabset-content-background-color: transparent;
--tabset-content-padding: 1rem 2rem;
--tabset-content-text-color: var(--text-basic-color);
--tabset-content-text-font-family: var(--text-paragraph-font-family);
--tabset-content-text-font-size: var(--text-paragraph-font-size);
--tabset-content-text-font-weight: var(--text-paragraph-font-weight);
--tabset-content-text-line-height: var(--text-paragraph-line-height);
--tabset-scrollbar-color: var(--scrollbar-color);
--tabset-scrollbar-background-color: var(--scrollbar-background-color);
--tabset-scrollbar-width: var(--scrollbar-width);
--tabset-tab-text-hide-breakpoint: 36rem;
--route-tabset-background-color: transparent;
--route-tabset-border-radius: 0;
--route-tabset-shadow: none;
--route-tabset-tab-background-color: transparent;
--route-tabset-tab-padding: 1rem 2rem;
--route-tabset-tab-text-color: var(--text-hint-color);
--route-tabset-tab-text-font-family: var(--text-button-font-family);
--route-tabset-tab-text-font-size: var(--text-button-medium-font-size);
--route-tabset-tab-text-font-weight: var(--text-button-font-weight);
--route-tabset-tab-text-line-height: var(--text-button-medium-line-height);
--route-tabset-tab-text-transform: uppercase;
--route-tabset-tab-underline-width: 0.25rem;
--route-tabset-tab-underline-color: transparent;
--route-tabset-tab-active-background-color: transparent;
--route-tabset-tab-active-text-color: var(--text-primary-color);
--route-tabset-tab-active-underline-color: var(--text-primary-color);
--route-tabset-tab-focus-background-color: transparent;
--route-tabset-tab-focus-text-color: var(--text-primary-focus-color);
--route-tabset-tab-focus-underline-color: var(--text-primary-focus-color);
--route-tabset-tab-hover-background-color: transparent;
--route-tabset-tab-hover-text-color: var(--text-primary-hover-color);
--route-tabset-tab-hover-underline-color: var(--text-primary-hover-color);
--route-tabset-tab-disabled-background-color: transparent;
--route-tabset-tab-disabled-text-color: var(--text-disabled-color);
--route-tabset-tab-disabled-underline-color: transparent;
--route-tabset-divider-color: var(--divider-color);
--route-tabset-divider-style: var(--divider-style);
--route-tabset-divider-width: var(--divider-width);
--route-tabset-scrollbar-color: var(--scrollbar-color);
--route-tabset-scrollbar-background-color: var(--scrollbar-background-color);
--route-tabset-scrollbar-width: var(--scrollbar-width);
--route-tabset-tab-text-hide-breakpoint: 36rem;
--user-picture-box-background-color: transparent;
--user-picture-box-border-color: var(--border-basic-color-3);
--user-picture-box-border-width: 1px;
--user-initials-text-color: var(--text-basic-color);
--user-initials-text-font-family: var(--text-paragraph-font-family);
--user-initials-text-font-weight: var(--text-paragraph-font-weight);
--user-name-text-color: var(--text-basic-color);
--user-name-text-font-family: var(--text-paragraph-font-family);
--user-name-text-font-weight: var(--text-paragraph-font-weight);
--user-title-text-color: var(--text-basic-color);
--user-title-text-font-family: var(--text-paragraph-2-font-family);
--user-title-text-font-weight: var(--text-paragraph-2-font-weight);
--user-rectangle-border-radius: 0.5rem;
--user-semi-round-border-radius: 0.75rem;
--user-round-border-radius: 50%;
--user-tiny-height: 1.25rem;
--user-tiny-width: 1.25rem;
--user-tiny-initials-text-font-size: var(--text-caption-font-size);
--user-tiny-initials-text-line-height: var(--text-caption-line-height);
--user-tiny-name-text-font-size: var(--text-caption-font-size);
--user-tiny-name-text-line-height: var(--text-caption-line-height);
--user-tiny-title-text-font-size: var(--text-caption-font-size);
--user-tiny-title-text-line-height: var(--text-caption-line-height);
--user-small-height: 1.5rem;
--user-small-width: 1.5rem;
--user-small-initials-text-font-size: var(--text-caption-font-size);
--user-small-initials-text-line-height: var(--text-caption-line-height);
--user-small-name-text-font-size: var(--text-caption-font-size);
--user-small-name-text-line-height: var(--text-caption-line-height);
--user-small-title-text-font-size: var(--text-caption-font-size);
--user-small-title-text-line-height: var(--text-caption-line-height);
--user-medium-height: 2.5rem;
--user-medium-width: 2.5rem;
--user-medium-initials-text-font-size: var(--text-paragraph-font-size);
--user-medium-initials-text-line-height: var(--text-paragraph-line-height);
--user-medium-name-text-font-size: var(--text-paragraph-font-size);
--user-medium-name-text-line-height: var(--text-paragraph-line-height);
--user-medium-title-text-font-size: var(--text-caption-font-size);
--user-medium-title-text-line-height: var(--text-caption-line-height);
--user-large-height: 3.25rem;
--user-large-width: 3.25rem;
--user-large-initials-text-font-size: var(--text-paragraph-font-size);
--user-large-initials-text-line-height: var(--text-paragraph-line-height);
--user-large-name-text-font-size: var(--text-paragraph-font-size);
--user-large-name-text-line-height: var(--text-paragraph-line-height);
--user-large-title-text-font-size: var(--text-paragraph-2-font-size);
--user-large-title-text-line-height: var(--text-paragraph-2-line-height);
--user-giant-height: 4rem;
--user-giant-width: 4rem;
--user-giant-initials-text-font-size: var(--text-paragraph-font-size);
--user-giant-initials-text-line-height: var(--text-paragraph-line-height);
--user-giant-name-text-font-size: var(--text-paragraph-font-size);
--user-giant-name-text-line-height: var(--text-paragraph-line-height);
--user-giant-title-text-font-size: var(--text-paragraph-font-size);
--user-giant-title-text-line-height: var(--text-paragraph-line-height);
--popover-text-color: var(--text-basic-color);
--popover-text-font-family: var(--text-paragraph-font-family);
--popover-text-font-size: var(--text-paragraph-font-size);
--popover-text-font-weight: var(--text-paragraph-font-weight);
--popover-text-line-height: var(--text-paragraph-line-height);
--popover-background-color: var(--background-basic-color-1);
--popover-border-width: 1px;
--popover-border-color: transparent;
--popover-border-radius: var(--border-radius);
--popover-shadow: var(--shadow);
--popover-arrow-size: 0.6875rem;
--popover-padding: 0.75rem 1rem;
--context-menu-background-color: var(--background-basic-color-1);
--context-menu-border-color: transparent;
--context-menu-border-style: solid;
--context-menu-border-width: 0;
--context-menu-border-radius: var(--border-radius);
--context-menu-text-align: center;
--context-menu-min-width: 10rem;
--context-menu-max-width: 15rem;
--context-menu-shadow: var(--shadow);
--actions-background-color: transparent;
--actions-divider-color: var(--divider-color);
--actions-divider-style: var(--divider-style);
--actions-divider-width: var(--divider-width);
--actions-icon-color: var(--text-hint-color);
--actions-text-color: var(--text-basic-color);
--actions-text-font-family: var(--text-button-font-family);
--actions-text-font-weight: var(--text-button-font-weight);
--actions-text-line-height: var(--text-button-medium-line-height);
--actions-disabled-icon-color: var(--text-disabled-color);
--actions-disabled-text-color: var(--text-disabled-color);
--actions-tiny-height: 1rem;
--actions-tiny-icon-height: var(--actions-tiny-height);
--actions-tiny-padding: 0 1.25rem;
--actions-tiny-text-font-size: var(--text-button-tiny-font-size);
--actions-small-height: 1.5rem;
--actions-small-icon-height: var(--actions-small-height);
--actions-small-padding: 0 1.25rem;
--actions-small-text-font-size: var(--text-button-small-font-size);
--actions-medium-height: 2.25rem;
--actions-medium-icon-height: var(--actions-medium-height);
--actions-medium-padding: 0 1.25rem;
--actions-medium-text-font-size: var(--text-button-medium-font-size);
--actions-large-height: 3.5rem;
--actions-large-icon-height: var(--actions-large-height);
--actions-large-padding: 0 1.25rem;
--actions-large-text-font-size: var(--text-button-large-font-size);
--actions-giant-height: 4rem;
--actions-giant-icon-height: var(--actions-giant-height);
--actions-giant-padding: 0 1.25rem;
--actions-giant-text-font-size: var(--text-button-giant-font-size);
--search-background-color: var(--background-basic-color-1);
--search-divider-color: var(--divider-color);
--search-divider-style: var(--divider-style);
--search-divider-width: var(--divider-width);
--search-extra-background-color: var(--color-primary-default);
--search-text-color: var(--text-basic-color);
--search-text-font-family: var(--text-heading-1-font-family);
--search-text-font-size: var(--text-heading-1-font-size);
--search-text-font-weight: var(--text-heading-1-font-weight);
--search-text-line-height: var(--text-heading-1-line-height);
--search-placeholder-text-color: var(--text-hint-color);
--search-info-text-color: var(--text-hint-color);
--search-info-text-font-family: var(--text-subtitle-font-family);
--search-info-text-font-size: var(--text-subtitle-font-size);
--search-info-text-font-weight: var(--text-subtitle-font-weight);
--search-info-text-line-height: var(--text-subtitle-line-height);
--smart-table-header-font-family: var(--text-paragraph-font-family);
--smart-table-header-font-size: var(--text-paragraph-font-size);
--smart-table-header-font-weight: var(--text-paragraph-font-weight);
--smart-table-header-line-height: var(--text-paragraph-line-height);
--smart-table-header-fg: var(--text-basic-color);
--smart-table-header-bg: var(--background-basic-color-1);
--smart-table-font-family: var(--text-paragraph-font-family);
--smart-table-font-size: var(--text-paragraph-font-size);
--smart-table-font-weight: var(--text-paragraph-font-weight);
--smart-table-line-height: var(--text-paragraph-line-height);
--smart-table-fg: var(--text-basic-color);
--smart-table-bg: var(--background-basic-color-1);
--smart-table-bg-even: var(--background-basic-color-2);
--smart-table-fg-secondary: var(--text-basic-color);
--smart-table-bg-active: var(--background-basic-color-3);
--smart-table-padding: 0.875rem 1.25rem;
--smart-table-filter-padding: 0.375rem 0.5rem;
--smart-table-separator: var(--divider-color);
--smart-table-border-radius: var(--border-radius);
--smart-table-action-add-edit-hover-text-color: var(--color-primary-default);
--smart-table-action-cancel-delete-hover-text-color: var(--color-danger-default);
--smart-table-add-button-border-color: var(--button-filled-primary-border-color);
--smart-table-add-button-background-color: var(--button-filled-primary-background-color);
--smart-table-add-button-text-color: var(--button-filled-primary-text-color);
--smart-table-add-button-focus-border-color: var(--button-filled-primary-focus-border-color);
--smart-table-add-button-hover-background-color: var(--button-filled-primary-hover-background-color);
--smart-table-add-button-hover-border-color: var(--button-filled-primary-hover-border-color);
--smart-table-add-button-active-background-color: var(--button-filled-primary-active-background-color);
--smart-table-add-button-active-border-color: var(--button-filled-primary-active-border-color);
--smart-table-paging-font-family: var(--button-text-font-family);
--smart-table-paging-font-size: var(--button-medium-text-font-size);
--smart-table-paging-line-height: var(--button-medium-text-line-height);
--smart-table-paging-border-color: var(--divider-color);
--smart-table-paging-border-width: var(--divider-width);
--smart-table-paging-fg-active: var(--text-control-color);
--smart-table-paging-bg-active: var(--color-primary-default);
--smart-table-paging-hover: transparent;
--smart-table-paging-hover-border-color: var(--button-outline-primary-hover-border-color);
--smart-table-paging-hover-text-color: var(--button-outline-primary-hover-text-color);
--smart-table-paging-disabled-text-color: var(--button-outline-primary-disabled-text-color);
--smart-table-paging-page-text-color: var(--button-outline-primary-text-color);
--smart-table-paging-page-focus-border-color: var(--button-outline-primary-focus-border-color);
--smart-table-paging-page-focus-text-color: var(--button-outline-primary-focus-text-color);
--toastr-border-style: solid;
--toastr-border-width: 1px;
--toastr-border-radius: var(--border-radius);
--toastr-padding: 1rem;
--toastr-shadow: var(--shadow);
--toastr-text-font-family: var(--text-paragraph-2-font-family);
--toastr-text-font-size: var(--text-paragraph-2-font-size);
--toastr-text-font-weight: var(--text-paragraph-2-font-weight);
--toastr-text-line-height: var(--text-paragraph-2-line-height);
--toastr-title-text-font-family: var(--text-subtitle-font-family);
--toastr-title-text-font-size: var(--text-subtitle-font-size);
--toastr-title-text-font-weight: var(--text-subtitle-font-weight);
--toastr-title-text-line-height: var(--text-subtitle-line-height);
--toastr-basic-background-color: var(--background-basic-color-1);
--toastr-basic-border-color: var(--border-basic-color-3);
--toastr-basic-text-color: var(--text-basic-color);
--toastr-icon-basic-background-color: var(--background-basic-color-1);
--toastr-icon-basic-color: var(--text-basic-color);
--toastr-destroyable-basic-hover-background-color: var(--background-basic-color-1);
--toastr-destroyable-basic-hover-border-color: var(--border-basic-color-3);
--toastr-primary-background-color: var(--color-primary-default);
--toastr-primary-border-color: var(--color-primary-default);
--toastr-primary-text-color: var(--text-control-color);
--toastr-icon-primary-background-color: var(--background-basic-color-1);
--toastr-icon-primary-color: var(--color-primary-default);
--toastr-destroyable-primary-hover-background-color: var(--color-primary-hover);
--toastr-destroyable-primary-hover-border-color: var(--color-primary-hover);
--toastr-success-background-color: var(--color-success-default);
--toastr-success-border-color: var(--color-success-default);
--toastr-success-text-color: var(--text-control-color);
--toastr-icon-success-background-color: var(--background-basic-color-1);
--toastr-icon-success-color: var(--color-success-default);
--toastr-destroyable-success-hover-background-color: var(--color-success-hover);
--toastr-destroyable-success-hover-border-color: var(--color-success-hover);
--toastr-info-background-color: var(--color-info-default);
--toastr-info-border-color: var(--color-info-default);
--toastr-info-text-color: var(--text-control-color);
--toastr-icon-info-background-color: var(--background-basic-color-1);
--toastr-icon-info-color: var(--color-info-default);
--toastr-destroyable-info-hover-background-color: var(--color-info-hover);
--toastr-destroyable-info-hover-border-color: var(--color-info-hover);
--toastr-warning-background-color: var(--color-warning-default);
--toastr-warning-border-color: var(--color-warning-default);
--toastr-warning-text-color: var(--text-control-color);
--toastr-icon-warning-background-color: var(--background-basic-color-1);
--toastr-icon-warning-color: var(--color-warning-default);
--toastr-destroyable-warning-hover-background-color: var(--color-warning-hover);
--toastr-destroyable-warning-hover-border-color: var(--color-warning-hover);
--toastr-danger-background-color: var(--color-danger-default);
--toastr-danger-border-color: var(--color-danger-default);
--toastr-danger-text-color: var(--text-control-color);
--toastr-icon-danger-background-color: var(--background-basic-color-1);
--toastr-icon-danger-color: var(--color-danger-default);
--toastr-destroyable-danger-hover-background-color: var(--color-danger-hover);
--toastr-destroyable-danger-hover-border-color: var(--color-danger-hover);
--toastr-control-background-color: var(--color-control-default);
--toastr-control-border-color: var(--color-control-default);
--toastr-control-text-color: var(--color-basic-800);
--toastr-icon-control-background-color: var(--color-control-default);
--toastr-icon-control-color: var(--color-basic-800);
--toastr-destroyable-control-hover-background-color: var(--color-control-hover);
--toastr-destroyable-control-hover-border-color: var(--color-control-hover);
--button-cursor: pointer;
--button-outline-width: var(--outline-width);
--button-outline-color: var(--outline-color);
--button-text-font-family: var(--text-button-font-family);
--button-text-font-weight: var(--text-button-font-weight);
--button-disabled-cursor: default;
--button-tiny-text-font-size: var(--text-button-tiny-font-size);
--button-tiny-text-line-height: var(--text-button-tiny-line-height);
--button-tiny-icon-size: 0.75rem;
--button-tiny-icon-vertical-margin: -0.125rem;
--button-tiny-icon-offset: 0.375rem;
--button-small-text-font-size: var(--text-button-small-font-size);
--button-small-text-line-height: var(--text-button-small-line-height);
--button-small-icon-size: 1rem;
--button-small-icon-vertical-margin: -0.125rem;
--button-small-icon-offset: 0.375rem;
--button-medium-text-font-size: var(--text-button-medium-font-size);
--button-medium-text-line-height: var(--text-button-medium-line-height);
--button-medium-icon-size: 1.25rem;
--button-medium-icon-vertical-margin: -0.125rem;
--button-medium-icon-offset: 0.5rem;
--button-large-text-font-size: var(--text-button-large-font-size);
--button-large-text-line-height: var(--text-button-large-line-height);
--button-large-icon-size: 1.5rem;
--button-large-icon-vertical-margin: -0.125rem;
--button-large-icon-offset: 0.75rem;
--button-giant-text-font-size: var(--text-button-giant-font-size);
--button-giant-text-line-height: var(--text-button-giant-line-height);
--button-giant-icon-size: 1.5rem;
--button-giant-icon-vertical-margin: -0.125rem;
--button-giant-icon-offset: 0.75rem;
--button-rectangle-border-radius: var(--border-radius);
--button-semi-round-border-radius: 0.75rem;
--button-round-border-radius: 1.5rem;
--button-filled-border-style: solid;
--button-filled-border-width: 0.0625rem;
--button-filled-text-transform: uppercase;
--button-filled-tiny-padding: 0.3125rem 0.625rem;
--button-filled-small-padding: 0.4375rem 0.875rem;
--button-filled-medium-padding: 0.6875rem 1.125rem;
--button-filled-large-padding: 0.8125rem 1.125rem;
--button-filled-giant-padding: 0.9375rem 1.375rem;
--button-filled-basic-background-color: var(--color-basic-default);
--button-filled-basic-border-color: var(--color-basic-default-border);
--button-filled-basic-text-color: var(--color-basic-800);
--button-filled-basic-focus-background-color: var(--color-basic-focus);
--button-filled-basic-focus-border-color: var(--color-basic-focus-border);
--button-filled-basic-hover-background-color: var(--color-basic-hover);
--button-filled-basic-hover-border-color: var(--color-basic-hover-border);
--button-filled-basic-active-background-color: var(--color-basic-active);
--button-filled-basic-active-border-color: var(--color-basic-active-border);
--button-filled-basic-disabled-background-color: var(--color-basic-disabled);
--button-filled-basic-disabled-border-color: var(--color-basic-disabled-border);
--button-filled-basic-disabled-text-color: var(--text-disabled-color);
--button-filled-primary-background-color: var(--color-primary-default);
--button-filled-primary-border-color: var(--color-primary-default-border);
--button-filled-primary-text-color: var(--text-control-color);
--button-filled-primary-focus-background-color: var(--color-primary-focus);
--button-filled-primary-focus-border-color: var(--color-primary-focus-border);
--button-filled-primary-hover-background-color: var(--color-primary-hover);
--button-filled-primary-hover-border-color: var(--color-primary-hover-border);
--button-filled-primary-active-background-color: var(--color-primary-active);
--button-filled-primary-active-border-color: var(--color-primary-active-border);
--button-filled-primary-disabled-background-color: var(--color-primary-disabled);
--button-filled-primary-disabled-border-color: var(--color-primary-disabled-border);
--button-filled-primary-disabled-text-color: var(--text-disabled-color);
--button-filled-success-background-color: var(--color-success-default);
--button-filled-success-border-color: var(--color-success-default-border);
--button-filled-success-text-color: var(--text-control-color);
--button-filled-success-focus-background-color: var(--color-success-focus);
--button-filled-success-focus-border-color: var(--color-success-focus-border);
--button-filled-success-hover-background-color: var(--color-success-hover);
--button-filled-success-hover-border-color: var(--color-success-hover-border);
--button-filled-success-active-background-color: var(--color-success-active);
--button-filled-success-active-border-color: var(--color-success-active-border);
--button-filled-success-disabled-background-color: var(--color-success-disabled);
--button-filled-success-disabled-border-color: var(--color-success-disabled-border);
--button-filled-success-disabled-text-color: var(--text-disabled-color);
--button-filled-info-background-color: var(--color-info-default);
--button-filled-info-border-color: var(--color-info-default-border);
--button-filled-info-text-color: var(--text-control-color);
--button-filled-info-focus-background-color: var(--color-info-focus);
--button-filled-info-focus-border-color: var(--color-info-focus-border);
--button-filled-info-hover-background-color: var(--color-info-hover);
--button-filled-info-hover-border-color: var(--color-info-hover-border);
--button-filled-info-active-background-color: var(--color-info-active);
--button-filled-info-active-border-color: var(--color-info-active-border);
--button-filled-info-disabled-background-color: var(--color-info-disabled);
--button-filled-info-disabled-border-color: var(--color-info-disabled-border);
--button-filled-info-disabled-text-color: var(--text-disabled-color);
--button-filled-warning-background-color: var(--color-warning-default);
--button-filled-warning-border-color: var(--color-warning-default-border);
--button-filled-warning-text-color: var(--text-control-color);
--button-filled-warning-focus-background-color: var(--color-warning-focus);
--button-filled-warning-focus-border-color: var(--color-warning-focus-border);
--button-filled-warning-hover-background-color: var(--color-warning-hover);
--button-filled-warning-hover-border-color: var(--color-warning-hover-border);
--button-filled-warning-active-background-color: var(--color-warning-active);
--button-filled-warning-active-border-color: var(--color-warning-active-border);
--button-filled-warning-disabled-background-color: var(--color-warning-disabled);
--button-filled-warning-disabled-border-color: var(--color-warning-disabled-border);
--button-filled-warning-disabled-text-color: var(--text-disabled-color);
--button-filled-danger-background-color: var(--color-danger-default);
--button-filled-danger-border-color: var(--color-danger-default-border);
--button-filled-danger-text-color: var(--text-control-color);
--button-filled-danger-focus-background-color: var(--color-danger-focus);
--button-filled-danger-focus-border-color: var(--color-danger-focus-border);
--button-filled-danger-hover-background-color: var(--color-danger-hover);
--button-filled-danger-hover-border-color: var(--color-danger-hover-border);
--button-filled-danger-active-background-color: var(--color-danger-active);
--button-filled-danger-active-border-color: var(--color-danger-active-border);
--button-filled-danger-disabled-background-color: var(--color-danger-disabled);
--button-filled-danger-disabled-border-color: var(--color-danger-disabled-border);
--button-filled-danger-disabled-text-color: var(--text-disabled-color);
--button-filled-control-background-color: var(--color-control-default);
--button-filled-control-border-color: var(--color-control-default-border);
--button-filled-control-text-color: var(--color-basic-800);
--button-filled-control-focus-background-color: var(--color-control-focus);
--button-filled-control-focus-border-color: var(--color-control-focus-border);
--button-filled-control-hover-background-color: var(--color-control-hover);
--button-filled-control-hover-border-color: var(--color-control-hover-border);
--button-filled-control-active-background-color: var(--color-control-active);
--button-filled-control-active-border-color: var(--color-control-active-border);
--button-filled-control-disabled-background-color: var(--color-control-disabled);
--button-filled-control-disabled-border-color: var(--color-control-disabled-border);
--button-filled-control-disabled-text-color: var(--text-disabled-color);
--button-outline-border-style: solid;
--button-outline-border-width: 0.0625rem;
--button-outline-text-transform: uppercase;
--button-outline-focus-inset-shadow-length: 0 0 0 100vmax;
--button-outline-tiny-padding: 0.3125rem 0.625rem;
--button-outline-small-padding: 0.4375rem 0.875rem;
--button-outline-medium-padding: 0.6875rem 1.125rem;
--button-outline-large-padding: 0.8125rem 1.125rem;
--button-outline-giant-padding: 0.9375rem 1.375rem;
--button-outline-basic-background-color: var(--color-basic-transparent-default);
--button-outline-basic-border-color: var(--color-basic-transparent-default-border);
--button-outline-basic-text-color: var(--text-hint-color);
--button-outline-basic-focus-background-color: var(--color-basic-transparent-focus);
--button-outline-basic-focus-border-color: var(--color-basic-transparent-focus-border);
--button-outline-basic-focus-text-color: var(--text-hint-color);
--button-outline-basic-hover-background-color: var(--color-basic-transparent-hover);
--button-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border);
--button-outline-basic-hover-text-color: var(--text-hint-color);
--button-outline-basic-active-background-color: var(--color-basic-transparent-active);
--button-outline-basic-active-border-color: var(--color-basic-transparent-active-border);
--button-outline-basic-active-text-color: var(--text-hint-color);
--button-outline-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--button-outline-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--button-outline-basic-disabled-text-color: var(--text-disabled-color);
--button-outline-primary-background-color: var(--color-primary-transparent-default);
--button-outline-primary-border-color: var(--color-primary-transparent-default-border);
--button-outline-primary-text-color: var(--text-primary-color);
--button-outline-primary-focus-background-color: var(--color-primary-transparent-focus);
--button-outline-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--button-outline-primary-focus-text-color: var(--text-primary-color);
--button-outline-primary-hover-background-color: var(--color-primary-transparent-hover);
--button-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--button-outline-primary-hover-text-color: var(--text-primary-color);
--button-outline-primary-active-background-color: var(--color-primary-transparent-active);
--button-outline-primary-active-border-color: var(--color-primary-transparent-active-border);
--button-outline-primary-active-text-color: var(--text-primary-color);
--button-outline-primary-disabled-background-color: var(--color-primary-transparent-disabled);
--button-outline-primary-disabled-border-color: var(--color-primary-transparent-disabled-border);
--button-outline-primary-disabled-text-color: var(--text-disabled-color);
--button-outline-success-background-color: var(--color-success-transparent-default);
--button-outline-success-border-color: var(--color-success-transparent-default-border);
--button-outline-success-text-color: var(--text-success-color);
--button-outline-success-focus-background-color: var(--color-success-transparent-focus);
--button-outline-success-focus-border-color: var(--color-success-transparent-focus-border);
--button-outline-success-focus-text-color: var(--text-success-color);
--button-outline-success-hover-background-color: var(--color-success-transparent-hover);
--button-outline-success-hover-border-color: var(--color-success-transparent-hover-border);
--button-outline-success-hover-text-color: var(--text-success-color);
--button-outline-success-active-background-color: var(--color-success-transparent-active);
--button-outline-success-active-border-color: var(--color-success-transparent-active-border);
--button-outline-success-active-text-color: var(--text-success-color);
--button-outline-success-disabled-background-color: var(--color-success-transparent-disabled);
--button-outline-success-disabled-border-color: var(--color-success-transparent-disabled-border);
--button-outline-success-disabled-text-color: var(--text-disabled-color);
--button-outline-info-background-color: var(--color-info-transparent-default);
--button-outline-info-border-color: var(--color-info-transparent-default-border);
--button-outline-info-text-color: var(--text-info-color);
--button-outline-info-focus-background-color: var(--color-info-transparent-focus);
--button-outline-info-focus-border-color: var(--color-info-transparent-focus-border);
--button-outline-info-focus-text-color: var(--text-info-color);
--button-outline-info-hover-background-color: var(--color-info-transparent-hover);
--button-outline-info-hover-border-color: var(--color-info-transparent-hover-border);
--button-outline-info-hover-text-color: var(--text-info-color);
--button-outline-info-active-background-color: var(--color-info-transparent-active);
--button-outline-info-active-border-color: var(--color-info-transparent-active-border);
--button-outline-info-active-text-color: var(--text-info-color);
--button-outline-info-disabled-background-color: var(--color-info-transparent-disabled);
--button-outline-info-disabled-border-color: var(--color-info-transparent-disabled-border);
--button-outline-info-disabled-text-color: var(--text-disabled-color);
--button-outline-warning-background-color: var(--color-warning-transparent-default);
--button-outline-warning-border-color: var(--color-warning-transparent-default-border);
--button-outline-warning-text-color: var(--text-warning-color);
--button-outline-warning-focus-background-color: var(--color-warning-transparent-focus);
--button-outline-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--button-outline-warning-focus-text-color: var(--text-warning-color);
--button-outline-warning-hover-background-color: var(--color-warning-transparent-hover);
--button-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--button-outline-warning-hover-text-color: var(--text-warning-color);
--button-outline-warning-active-background-color: var(--color-warning-transparent-active);
--button-outline-warning-active-border-color: var(--color-warning-transparent-active-border);
--button-outline-warning-active-text-color: var(--text-warning-color);
--button-outline-warning-disabled-background-color: var(--color-warning-transparent-disabled);
--button-outline-warning-disabled-border-color: var(--color-warning-transparent-disabled-border);
--button-outline-warning-disabled-text-color: var(--text-disabled-color);
--button-outline-danger-background-color: var(--color-danger-transparent-default);
--button-outline-danger-border-color: var(--color-danger-transparent-default-border);
--button-outline-danger-text-color: var(--text-danger-color);
--button-outline-danger-focus-background-color: var(--color-danger-transparent-focus);
--button-outline-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--button-outline-danger-focus-text-color: var(--text-danger-color);
--button-outline-danger-hover-background-color: var(--color-danger-transparent-hover);
--button-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--button-outline-danger-hover-text-color: var(--text-danger-color);
--button-outline-danger-active-background-color: var(--color-danger-transparent-active);
--button-outline-danger-active-border-color: var(--color-danger-transparent-active-border);
--button-outline-danger-active-text-color: var(--text-danger-color);
--button-outline-danger-disabled-background-color: var(--color-danger-transparent-disabled);
--button-outline-danger-disabled-border-color: var(--color-danger-transparent-disabled-border);
--button-outline-danger-disabled-text-color: var(--text-disabled-color);
--button-outline-control-background-color: var(--color-control-transparent-default);
--button-outline-control-border-color: var(--color-control-transparent-default-border);
--button-outline-control-text-color: var(--text-control-color);
--button-outline-control-focus-background-color: var(--color-control-transparent-focus);
--button-outline-control-focus-border-color: var(--color-control-transparent-focus-border);
--button-outline-control-focus-text-color: var(--text-control-color);
--button-outline-control-hover-background-color: var(--color-control-transparent-hover);
--button-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--button-outline-control-hover-text-color: var(--text-control-color);
--button-outline-control-active-background-color: var(--color-control-transparent-active);
--button-outline-control-active-border-color: var(--color-control-transparent-active-border);
--button-outline-control-active-text-color: var(--text-control-color);
--button-outline-control-disabled-background-color: var(--color-control-transparent-disabled);
--button-outline-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--button-outline-control-disabled-text-color: var(--text-disabled-color);
--button-ghost-background-color: transparent;
--button-ghost-border-color: transparent;
--button-ghost-border-style: solid;
--button-ghost-border-width: 0.0625rem;
--button-ghost-text-transform: uppercase;
--button-ghost-focus-inset-shadow-length: 0 0 0 100vmax;
--button-ghost-tiny-padding: 0.3125rem 0.625rem;
--button-ghost-small-padding: 0.4375rem 0.875rem;
--button-ghost-medium-padding: 0.6875rem 1.125rem;
--button-ghost-large-padding: 0.8125rem 1.125rem;
--button-ghost-giant-padding: 0.9375rem 1.375rem;
--button-ghost-basic-text-color: var(--color-basic-600);
--button-ghost-basic-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-basic-focus-text-color: var(--color-basic-600);
--button-ghost-basic-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-basic-hover-border-color: transparent;
--button-ghost-basic-hover-text-color: var(--color-basic-600);
--button-ghost-basic-active-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-active-border-color: transparent;
--button-ghost-basic-active-text-color: var(--color-basic-600);
--button-ghost-basic-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-disabled-border-color: transparent;
--button-ghost-basic-disabled-text-color: var(--text-disabled-color);
--button-ghost-primary-text-color: var(--text-primary-color);
--button-ghost-primary-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-primary-focus-text-color: var(--text-primary-color);
--button-ghost-primary-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-primary-hover-border-color: transparent;
--button-ghost-primary-hover-text-color: var(--text-primary-color);
--button-ghost-primary-active-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-active-border-color: transparent;
--button-ghost-primary-active-text-color: var(--text-primary-color);
--button-ghost-primary-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-disabled-border-color: transparent;
--button-ghost-primary-disabled-text-color: var(--text-disabled-color);
--button-ghost-success-text-color: var(--text-success-color);
--button-ghost-success-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-success-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-success-focus-text-color: var(--text-success-color);
--button-ghost-success-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-success-hover-border-color: transparent;
--button-ghost-success-hover-text-color: var(--text-success-color);
--button-ghost-success-active-background-color: var(--color-basic-transparent-200);
--button-ghost-success-active-border-color: transparent;
--button-ghost-success-active-text-color: var(--text-success-color);
--button-ghost-success-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-success-disabled-border-color: transparent;
--button-ghost-success-disabled-text-color: var(--text-disabled-color);
--button-ghost-info-text-color: var(--text-info-color);
--button-ghost-info-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-info-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-info-focus-text-color: var(--text-info-color);
--button-ghost-info-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-info-hover-border-color: transparent;
--button-ghost-info-hover-text-color: var(--text-info-color);
--button-ghost-info-active-background-color: var(--color-basic-transparent-200);
--button-ghost-info-active-border-color: transparent;
--button-ghost-info-active-text-color: var(--text-info-color);
--button-ghost-info-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-info-disabled-border-color: transparent;
--button-ghost-info-disabled-text-color: var(--text-disabled-color);
--button-ghost-warning-text-color: var(--text-warning-color);
--button-ghost-warning-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-warning-focus-text-color: var(--text-warning-color);
--button-ghost-warning-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-warning-hover-border-color: transparent;
--button-ghost-warning-hover-text-color: var(--text-warning-color);
--button-ghost-warning-active-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-active-border-color: transparent;
--button-ghost-warning-active-text-color: var(--text-warning-color);
--button-ghost-warning-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-disabled-border-color: transparent;
--button-ghost-warning-disabled-text-color: var(--text-disabled-color);
--button-ghost-danger-text-color: var(--text-danger-color);
--button-ghost-danger-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-danger-focus-text-color: var(--text-danger-color);
--button-ghost-danger-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-danger-hover-border-color: transparent;
--button-ghost-danger-hover-text-color: var(--text-danger-color);
--button-ghost-danger-active-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-active-border-color: transparent;
--button-ghost-danger-active-text-color: var(--text-danger-color);
--button-ghost-danger-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-disabled-border-color: transparent;
--button-ghost-danger-disabled-text-color: var(--text-disabled-color);
--button-ghost-control-text-color: var(--color-basic-100);
--button-ghost-control-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-control-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-control-focus-text-color: var(--color-basic-100);
--button-ghost-control-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-control-hover-border-color: transparent;
--button-ghost-control-hover-text-color: var(--color-basic-100);
--button-ghost-control-active-background-color: var(--color-basic-transparent-200);
--button-ghost-control-active-border-color: transparent;
--button-ghost-control-active-text-color: var(--color-basic-100);
--button-ghost-control-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-control-disabled-border-color: transparent;
--button-ghost-control-disabled-text-color: var(--text-disabled-color);
--button-hero-border-color: transparent;
--button-hero-border-style: solid;
--button-hero-border-width: 0;
--button-hero-text-transform: uppercase;
--button-hero-tiny-padding: 0.375rem 0.6875rem;
--button-hero-small-padding: 0.5rem 0.9375rem;
--button-hero-medium-padding: 0.75rem 1.1875rem;
--button-hero-large-padding: 0.875rem 1.1875rem;
--button-hero-giant-padding: 1rem 1.4375rem;
--button-hero-shadow: 0 0 transparent;
--button-hero-text-shadow: var(--shadow);
--button-hero-bevel-size: 0 0 0 0;
--button-hero-glow-size: 0 0 0 0;
--button-hero-outline-color: var(--outline-color);
--button-hero-outline-width: var(--outline-width);
--button-hero-basic-text-color: var(--color-basic-600);
--button-hero-basic-bevel-color: var(--color-basic-600);
--button-hero-basic-glow-color: var(--color-basic-700);
--button-hero-basic-left-background-color: var(--color-basic-200);
--button-hero-basic-right-background-color: var(--color-basic-default);
--button-hero-basic-focus-left-background-color: var(--color-basic-300);
--button-hero-basic-focus-right-background-color: var(--color-basic-focus);
--button-hero-basic-hover-left-background-color: var(--color-basic-100);
--button-hero-basic-hover-right-background-color: var(--color-basic-hover);
--button-hero-basic-active-left-background-color: var(--color-basic-300);
--button-hero-basic-active-right-background-color: var(--color-basic-active);
--button-hero-basic-disabled-background-color: var(--color-basic-disabled);
--button-hero-basic-disabled-text-color: var(--text-disabled-color);
--button-hero-primary-text-color: var(--text-control-color);
--button-hero-primary-bevel-color: var(--color-primary-600);
--button-hero-primary-glow-color: var(--color-primary-700);
--button-hero-primary-left-background-color: var(--color-primary-400);
--button-hero-primary-right-background-color: var(--color-primary-default);
--button-hero-primary-focus-left-background-color: var(--color-primary-500);
--button-hero-primary-focus-right-background-color: var(--color-primary-focus);
--button-hero-primary-hover-left-background-color: var(--color-primary-300);
--button-hero-primary-hover-right-background-color: var(--color-primary-hover);
--button-hero-primary-active-left-background-color: var(--color-primary-500);
--button-hero-primary-active-right-background-color: var(--color-primary-active);
--button-hero-primary-disabled-background-color: var(--color-primary-disabled);
--button-hero-primary-disabled-text-color: var(--text-disabled-color);
--button-hero-success-text-color: var(--text-control-color);
--button-hero-success-bevel-color: var(--color-success-600);
--button-hero-success-glow-color: var(--color-success-700);
--button-hero-success-left-background-color: var(--color-success-400);
--button-hero-success-right-background-color: var(--color-success-default);
--button-hero-success-focus-left-background-color: var(--color-success-500);
--button-hero-success-focus-right-background-color: var(--color-success-focus);
--button-hero-success-hover-left-background-color: var(--color-success-300);
--button-hero-success-hover-right-background-color: var(--color-success-hover);
--button-hero-success-active-left-background-color: var(--color-success-500);
--button-hero-success-active-right-background-color: var(--color-success-active);
--button-hero-success-disabled-background-color: var(--color-success-disabled);
--button-hero-success-disabled-text-color: var(--text-disabled-color);
--button-hero-info-text-color: var(--text-control-color);
--button-hero-info-bevel-color: var(--color-info-600);
--button-hero-info-glow-color: var(--color-info-700);
--button-hero-info-left-background-color: var(--color-info-400);
--button-hero-info-right-background-color: var(--color-info-default);
--button-hero-info-focus-left-background-color: var(--color-info-500);
--button-hero-info-focus-right-background-color: var(--color-info-focus);
--button-hero-info-hover-left-background-color: var(--color-info-300);
--button-hero-info-hover-right-background-color: var(--color-info-hover);
--button-hero-info-active-left-background-color: var(--color-info-500);
--button-hero-info-active-right-background-color: var(--color-info-active);
--button-hero-info-disabled-background-color: var(--color-info-disabled);
--button-hero-info-disabled-text-color: var(--text-disabled-color);
--button-hero-warning-text-color: var(--text-control-color);
--button-hero-warning-bevel-color: var(--color-warning-600);
--button-hero-warning-glow-color: var(--color-warning-700);
--button-hero-warning-left-background-color: var(--color-warning-400);
--button-hero-warning-right-background-color: var(--color-warning-default);
--button-hero-warning-focus-left-background-color: var(--color-warning-500);
--button-hero-warning-focus-right-background-color: var(--color-warning-focus);
--button-hero-warning-hover-left-background-color: var(--color-warning-300);
--button-hero-warning-hover-right-background-color: var(--color-warning-hover);
--button-hero-warning-active-left-background-color: var(--color-warning-500);
--button-hero-warning-active-right-background-color: var(--color-warning-active);
--button-hero-warning-disabled-background-color: var(--color-warning-disabled);
--button-hero-warning-disabled-text-color: var(--text-disabled-color);
--button-hero-danger-text-color: var(--text-control-color);
--button-hero-danger-bevel-color: var(--color-danger-600);
--button-hero-danger-glow-color: var(--color-danger-700);
--button-hero-danger-left-background-color: var(--color-danger-400);
--button-hero-danger-right-background-color: var(--color-danger-default);
--button-hero-danger-focus-left-background-color: var(--color-danger-500);
--button-hero-danger-focus-right-background-color: var(--color-danger-focus);
--button-hero-danger-hover-left-background-color: var(--color-danger-300);
--button-hero-danger-hover-right-background-color: var(--color-danger-hover);
--button-hero-danger-active-left-background-color: var(--color-danger-500);
--button-hero-danger-active-right-background-color: var(--color-danger-active);
--button-hero-danger-disabled-background-color: var(--color-danger-disabled);
--button-hero-danger-disabled-text-color: var(--text-disabled-color);
--button-hero-control-text-color: var(--color-basic-800);
--button-hero-control-bevel-color: var(--color-basic-600);
--button-hero-control-glow-color: var(--color-basic-700);
--button-hero-control-left-background-color: var(--color-control-default);
--button-hero-control-right-background-color: var(--color-control-default);
--button-hero-control-focus-left-background-color: var(--color-basic-200);
--button-hero-control-focus-right-background-color: var(--color-control-focus);
--button-hero-control-hover-left-background-color: var(--color-basic-100);
--button-hero-control-hover-right-background-color: var(--color-control-hover);
--button-hero-control-active-left-background-color: var(--color-basic-200);
--button-hero-control-active-right-background-color: var(--color-control-active);
--button-hero-control-disabled-background-color: var(--color-basic-transparent-300);
--button-hero-control-disabled-text-color: var(--text-disabled-color);
--button-group-filled-button-basic-text-color: var(--text-hint-color);
--button-group-filled-button-primary-text-color: var(--button-filled-primary-text-color);
--button-group-filled-button-success-text-color: var(--button-filled-success-text-color);
--button-group-filled-button-info-text-color: var(--button-filled-info-text-color);
--button-group-filled-button-warning-text-color: var(--button-filled-warning-text-color);
--button-group-filled-button-danger-text-color: var(--button-filled-danger-text-color);
--button-group-filled-button-control-text-color: var(--button-filled-control-text-color);
--button-group-filled-basic-divider-color: var(--color-basic-focus-border);
--button-group-filled-primary-divider-color: var(--color-primary-focus);
--button-group-filled-success-divider-color: var(--color-success-focus);
--button-group-filled-info-divider-color: var(--color-info-focus);
--button-group-filled-warning-divider-color: var(--color-warning-focus);
--button-group-filled-danger-divider-color: var(--color-danger-focus);
--button-group-filled-control-divider-color: var(--color-control-focus);
--button-group-ghost-divider-color: var(--color-basic-focus-border);
--icon-button-filled-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-filled-small-padding: 0.5625rem 0.4375rem;
--icon-button-filled-medium-padding: 0.6875rem 0.5625rem;
--icon-button-filled-large-padding: 0.8125rem 0.6875rem;
--icon-button-filled-giant-padding: 1.0625rem 0.9375rem;
--icon-button-outline-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-outline-small-padding: 0.5625rem 0.4375rem;
--icon-button-outline-medium-padding: 0.6875rem 0.5625rem;
--icon-button-outline-large-padding: 0.8125rem 0.6875rem;
--icon-button-outline-giant-padding: 1.0625rem 0.9375rem;
--icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-ghost-small-padding: 0.5625rem 0.4375rem;
--icon-button-ghost-medium-padding: 0.6875rem 0.5625rem;
--icon-button-ghost-large-padding: 0.8125rem 0.6875rem;
--icon-button-ghost-giant-padding: 1.0625rem 0.9375rem;
--icon-button-hero-tiny-padding: 0.5rem 0.375rem;
--icon-button-hero-small-padding: 0.5625rem 0.5rem;
--icon-button-hero-medium-padding: 0.75rem 0.5625rem;
--icon-button-hero-large-padding: 0.875rem 0.6875rem;
--icon-button-hero-giant-padding: 1.0625rem 1rem;
--input-border-style: solid;
--input-border-width: 1px;
--input-outline-color: var(--outline-color);
--input-outline-width: var(--outline-width);
--input-placeholder-text-font-family: var(--text-paragraph-font-family);
--input-text-font-family: var(--text-subtitle-font-family);
--input-basic-text-color: var(--text-basic-color);
--input-basic-placeholder-text-color: var(--text-hint-color);
--input-basic-background-color: var(--background-basic-color-2);
--input-basic-border-color: var(--border-basic-color-4);
--input-basic-focus-background-color: var(--background-basic-color-1);
--input-basic-focus-border-color: var(--color-primary-default-border);
--input-basic-hover-background-color: var(--background-basic-color-3);
--input-basic-hover-border-color: var(--border-basic-color-4);
--input-basic-disabled-background-color: var(--background-basic-color-2);
--input-basic-disabled-border-color: var(--border-basic-color-4);
--input-basic-disabled-text-color: var(--text-disabled-color);
--input-basic-disabled-placeholder-text-color: var(--text-disabled-color);
--input-primary-text-color: var(--text-basic-color);
--input-primary-placeholder-text-color: var(--text-hint-color);
--input-primary-background-color: var(--background-basic-color-2);
--input-primary-border-color: var(--color-primary-default);
--input-primary-focus-background-color: var(--background-basic-color-1);
--input-primary-focus-border-color: var(--color-primary-focus-border);
--input-primary-hover-background-color: var(--background-basic-color-3);
--input-primary-hover-border-color: var(--color-primary-hover-border);
--input-primary-disabled-background-color: var(--background-basic-color-2);
--input-primary-disabled-border-color: var(--border-basic-color-4);
--input-primary-disabled-text-color: var(--text-disabled-color);
--input-primary-disabled-placeholder-text-color: var(--text-disabled-color);
--input-success-text-color: var(--text-basic-color);
--input-success-placeholder-text-color: var(--text-hint-color);
--input-success-background-color: var(--background-basic-color-2);
--input-success-border-color: var(--color-success-default);
--input-success-focus-background-color: var(--background-basic-color-1);
--input-success-focus-border-color: var(--color-success-focus-border);
--input-success-hover-background-color: var(--background-basic-color-3);
--input-success-hover-border-color: var(--color-success-hover-border);
--input-success-disabled-background-color: var(--background-basic-color-2);
--input-success-disabled-border-color: var(--border-basic-color-4);
--input-success-disabled-text-color: var(--text-disabled-color);
--input-success-disabled-placeholder-text-color: var(--text-disabled-color);
--input-info-text-color: var(--text-basic-color);
--input-info-placeholder-text-color: var(--text-hint-color);
--input-info-background-color: var(--background-basic-color-2);
--input-info-border-color: var(--color-info-default);
--input-info-focus-background-color: var(--background-basic-color-1);
--input-info-focus-border-color: var(--color-info-focus-border);
--input-info-hover-background-color: var(--background-basic-color-3);
--input-info-hover-border-color: var(--color-info-hover-border);
--input-info-disabled-background-color: var(--background-basic-color-2);
--input-info-disabled-border-color: var(--border-basic-color-4);
--input-info-disabled-text-color: var(--text-disabled-color);
--input-info-disabled-placeholder-text-color: var(--text-disabled-color);
--input-warning-text-color: var(--text-basic-color);
--input-warning-placeholder-text-color: var(--text-hint-color);
--input-warning-background-color: var(--background-basic-color-2);
--input-warning-border-color: var(--color-warning-default);
--input-warning-focus-background-color: var(--background-basic-color-1);
--input-warning-focus-border-color: var(--color-warning-focus-border);
--input-warning-hover-background-color: var(--background-basic-color-3);
--input-warning-hover-border-color: var(--color-warning-hover-border);
--input-warning-disabled-background-color: var(--background-basic-color-2);
--input-warning-disabled-border-color: var(--border-basic-color-4);
--input-warning-disabled-text-color: var(--text-disabled-color);
--input-warning-disabled-placeholder-text-color: var(--text-disabled-color);
--input-danger-text-color: var(--text-basic-color);
--input-danger-placeholder-text-color: var(--text-hint-color);
--input-danger-background-color: var(--background-basic-color-2);
--input-danger-border-color: var(--color-danger-default);
--input-danger-focus-background-color: var(--background-basic-color-1);
--input-danger-focus-border-color: var(--color-danger-focus-border);
--input-danger-hover-background-color: var(--background-basic-color-3);
--input-danger-hover-border-color: var(--color-danger-hover-border);
--input-danger-disabled-background-color: var(--background-basic-color-2);
--input-danger-disabled-border-color: var(--border-basic-color-4);
--input-danger-disabled-text-color: var(--text-disabled-color);
--input-danger-disabled-placeholder-text-color: var(--text-disabled-color);
--input-control-text-color: var(--text-control-color);
--input-control-placeholder-text-color: var(--text-control-color);
--input-control-background-color: var(--color-basic-control-transparent-300);
--input-control-border-color: var(--color-basic-control-transparent-500);
--input-control-focus-background-color: var(--color-basic-control-transparent-500);
--input-control-focus-border-color: var(--color-control-transparent-focus-border);
--input-control-hover-background-color: var(--color-basic-control-transparent-400);
--input-control-hover-border-color: var(--color-control-transparent-hover-border);
--input-control-disabled-background-color: var(--color-control-transparent-disabled);
--input-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--input-control-disabled-text-color: var(--text-control-color);
--input-control-disabled-placeholder-text-color: var(--text-control-color);
--input-rectangle-border-radius: var(--border-radius);
--input-semi-round-border-radius: 0.75rem;
--input-round-border-radius: 1.5rem;
--input-tiny-text-font-size: var(--text-caption-2-font-size);
--input-tiny-text-font-weight: var(--text-caption-2-font-weight);
--input-tiny-text-line-height: var(--text-caption-2-line-height);
--input-tiny-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-tiny-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-tiny-padding: 0.1875rem 1rem;
--input-tiny-max-width: 20rem;
--input-small-text-font-size: var(--text-subtitle-2-font-size);
--input-small-text-font-weight: var(--text-subtitle-2-font-weight);
--input-small-text-line-height: var(--text-subtitle-2-line-height);
--input-small-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-small-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-small-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-small-padding: 0.1875rem 1rem;
--input-small-max-width: 20rem;
--input-medium-text-font-size: var(--text-subtitle-font-size);
--input-medium-text-font-weight: var(--text-subtitle-font-weight);
--input-medium-text-line-height: var(--text-subtitle-line-height);
--input-medium-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-medium-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-medium-padding: 0.4375rem 1rem;
--input-medium-max-width: 20rem;
--input-large-text-font-size: var(--text-subtitle-font-size);
--input-large-text-font-weight: var(--text-subtitle-font-weight);
--input-large-text-line-height: var(--text-subtitle-line-height);
--input-large-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-large-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-large-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-large-padding: 0.6875rem 1rem;
--input-large-max-width: 30rem;
--input-giant-text-font-size: var(--text-heading-6-font-size);
--input-giant-text-font-weight: var(--text-heading-6-font-weight);
--input-giant-text-line-height: var(--text-heading-6-line-height);
--input-giant-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-giant-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-giant-padding: 0.9375rem 1rem;
--input-giant-max-width: 30rem;
--checkbox-height: 1.25rem;
--checkbox-width: 1.25rem;
--checkbox-border-style: solid;
--checkbox-border-width: 1px;
--checkbox-border-radius: 3px;
--checkbox-outline-width: var(--outline-width);
--checkbox-outline-color: var(--outline-color);
--checkbox-text-font-family: var(--text-subtitle-2-font-family);
--checkbox-text-font-size: var(--text-subtitle-2-font-size);
--checkbox-text-font-weight: var(--text-subtitle-2-font-weight);
--checkbox-text-line-height: var(--text-subtitle-2-line-height);
--checkbox-text-space: 0.6875rem;
--checkbox-padding: 0;
--checkbox-focus-inset-shadow-length: 0 0 0 100vmax;
--checkbox-basic-text-color: var(--text-basic-color);
--checkbox-basic-background-color: var(--color-basic-transparent-default);
--checkbox-basic-border-color: var(--color-basic-transparent-default-border);
--checkbox-basic-checked-background-color: var(--color-primary-default);
--checkbox-basic-checked-border-color: var(--color-primary-default-border);
--checkbox-basic-checked-checkmark-color: var(--text-control-color);
--checkbox-basic-indeterminate-background-color: var(--color-primary-default);
--checkbox-basic-indeterminate-border-color: var(--color-primary-default-border);
--checkbox-basic-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-basic-focus-background-color: var(--color-basic-transparent-focus);
--checkbox-basic-focus-border-color: var(--color-basic-transparent-focus-border);
--checkbox-basic-focus-checked-background-color: var(--color-primary-focus);
--checkbox-basic-focus-checked-border-color: var(--color-primary-focus-border);
--checkbox-basic-hover-background-color: var(--color-primary-transparent-hover);
--checkbox-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--checkbox-basic-hover-checked-background-color: var(--color-primary-hover);
--checkbox-basic-hover-checked-border-color: var(--color-primary-hover-border);
--checkbox-basic-active-background-color: var(--color-basic-transparent-active);
--checkbox-basic-active-border-color: var(--color-basic-transparent-active-border);
--checkbox-basic-active-checked-background-color: var(--color-primary-active);
--checkbox-basic-active-checked-border-color: var(--color-primary-active-border);
--checkbox-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-basic-disabled-checkmark-color: var(--text-control-color);
--checkbox-basic-disabled-text-color: var(--text-disabled-color);
--checkbox-basic-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-basic-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-primary-text-color: var(--text-basic-color);
--checkbox-primary-background-color: var(--color-primary-transparent-default);
--checkbox-primary-border-color: var(--color-primary-transparent-default-border);
--checkbox-primary-checked-background-color: var(--color-primary-default);
--checkbox-primary-checked-border-color: var(--color-primary-default-border);
--checkbox-primary-checked-checkmark-color: var(--text-control-color);
--checkbox-primary-indeterminate-background-color: var(--color-primary-default);
--checkbox-primary-indeterminate-border-color: var(--color-primary-default-border);
--checkbox-primary-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-primary-focus-background-color: var(--color-primary-transparent-focus);
--checkbox-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--checkbox-primary-focus-checked-background-color: var(--color-primary-focus);
--checkbox-primary-focus-checked-border-color: var(--color-primary-focus-border);
--checkbox-primary-hover-background-color: var(--color-primary-transparent-hover);
--checkbox-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--checkbox-primary-hover-checked-background-color: var(--color-primary-hover);
--checkbox-primary-hover-checked-border-color: var(--color-primary-hover-border);
--checkbox-primary-active-background-color: var(--color-primary-transparent-active);
--checkbox-primary-active-border-color: var(--color-primary-transparent-active-border);
--checkbox-primary-active-checked-background-color: var(--color-primary-active);
--checkbox-primary-active-checked-border-color: var(--color-primary-active-border);
--checkbox-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-primary-disabled-checkmark-color: var(--text-control-color);
--checkbox-primary-disabled-text-color: var(--text-disabled-color);
--checkbox-primary-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-primary-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-success-text-color: var(--text-basic-color);
--checkbox-success-background-color: var(--color-success-transparent-default);
--checkbox-success-border-color: var(--color-success-transparent-default-border);
--checkbox-success-checked-background-color: var(--color-success-default);
--checkbox-success-checked-border-color: var(--color-success-default-border);
--checkbox-success-checked-checkmark-color: var(--text-control-color);
--checkbox-success-indeterminate-background-color: var(--color-success-default);
--checkbox-success-indeterminate-border-color: var(--color-success-default-border);
--checkbox-success-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-success-focus-background-color: var(--color-success-transparent-focus);
--checkbox-success-focus-border-color: var(--color-success-transparent-focus-border);
--checkbox-success-focus-checked-background-color: var(--color-success-focus);
--checkbox-success-focus-checked-border-color: var(--color-success-focus-border);
--checkbox-success-hover-background-color: var(--color-success-transparent-hover);
--checkbox-success-hover-border-color: var(--color-success-transparent-hover-border);
--checkbox-success-hover-checked-background-color: var(--color-success-hover);
--checkbox-success-hover-checked-border-color: var(--color-success-hover-border);
--checkbox-success-active-background-color: var(--color-success-transparent-active);
--checkbox-success-active-border-color: var(--color-success-transparent-active-border);
--checkbox-success-active-checked-background-color: var(--color-success-active);
--checkbox-success-active-checked-border-color: var(--color-success-active-border);
--checkbox-success-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-success-disabled-checkmark-color: var(--text-control-color);
--checkbox-success-disabled-text-color: var(--text-disabled-color);
--checkbox-success-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-success-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-info-text-color: var(--text-basic-color);
--checkbox-info-background-color: var(--color-info-transparent-default);
--checkbox-info-border-color: var(--color-info-transparent-default-border);
--checkbox-info-checked-background-color: var(--color-info-default);
--checkbox-info-checked-border-color: var(--color-info-default-border);
--checkbox-info-checked-checkmark-color: var(--text-control-color);
--checkbox-info-indeterminate-background-color: var(--color-info-default);
--checkbox-info-indeterminate-border-color: var(--color-info-default-border);
--checkbox-info-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-info-focus-background-color: var(--color-info-transparent-focus);
--checkbox-info-focus-border-color: var(--color-info-transparent-focus-border);
--checkbox-info-focus-checked-background-color: var(--color-info-focus);
--checkbox-info-focus-checked-border-color: var(--color-info-focus-border);
--checkbox-info-hover-background-color: var(--color-info-transparent-hover);
--checkbox-info-hover-border-color: var(--color-info-transparent-hover-border);
--checkbox-info-hover-checked-background-color: var(--color-info-hover);
--checkbox-info-hover-checked-border-color: var(--color-info-hover-border);
--checkbox-info-active-background-color: var(--color-info-transparent-active);
--checkbox-info-active-border-color: var(--color-info-transparent-active-border);
--checkbox-info-active-checked-background-color: var(--color-info-active);
--checkbox-info-active-checked-border-color: var(--color-info-active-border);
--checkbox-info-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-info-disabled-checkmark-color: var(--text-control-color);
--checkbox-info-disabled-text-color: var(--text-disabled-color);
--checkbox-info-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-info-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-warning-text-color: var(--text-basic-color);
--checkbox-warning-background-color: var(--color-warning-transparent-default);
--checkbox-warning-border-color: var(--color-warning-transparent-default-border);
--checkbox-warning-checked-background-color: var(--color-warning-default);
--checkbox-warning-checked-border-color: var(--color-warning-default-border);
--checkbox-warning-checked-checkmark-color: var(--text-control-color);
--checkbox-warning-indeterminate-background-color: var(--color-warning-default);
--checkbox-warning-indeterminate-border-color: var(--color-warning-default-border);
--checkbox-warning-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-warning-focus-background-color: var(--color-warning-transparent-focus);
--checkbox-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--checkbox-warning-focus-checked-background-color: var(--color-warning-focus);
--checkbox-warning-focus-checked-border-color: var(--color-warning-focus-border);
--checkbox-warning-hover-background-color: var(--color-warning-transparent-hover);
--checkbox-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--checkbox-warning-hover-checked-background-color: var(--color-warning-hover);
--checkbox-warning-hover-checked-border-color: var(--color-warning-hover-border);
--checkbox-warning-active-background-color: var(--color-warning-transparent-active);
--checkbox-warning-active-border-color: var(--color-warning-transparent-active-border);
--checkbox-warning-active-checked-background-color: var(--color-warning-active);
--checkbox-warning-active-checked-border-color: var(--color-warning-active-border);
--checkbox-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-warning-disabled-checkmark-color: var(--text-control-color);
--checkbox-warning-disabled-text-color: var(--text-disabled-color);
--checkbox-warning-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-warning-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-danger-text-color: var(--text-basic-color);
--checkbox-danger-background-color: var(--color-danger-transparent-default);
--checkbox-danger-border-color: var(--color-danger-transparent-default-border);
--checkbox-danger-checked-background-color: var(--color-danger-default);
--checkbox-danger-checked-border-color: var(--color-danger-default-border);
--checkbox-danger-checked-checkmark-color: var(--text-control-color);
--checkbox-danger-indeterminate-background-color: var(--color-danger-default);
--checkbox-danger-indeterminate-border-color: var(--color-danger-default-border);
--checkbox-danger-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-danger-focus-background-color: var(--color-danger-transparent-focus);
--checkbox-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--checkbox-danger-focus-checked-background-color: var(--color-danger-focus);
--checkbox-danger-focus-checked-border-color: var(--color-danger-focus-border);
--checkbox-danger-hover-background-color: var(--color-danger-transparent-hover);
--checkbox-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--checkbox-danger-hover-checked-background-color: var(--color-danger-hover);
--checkbox-danger-hover-checked-border-color: var(--color-danger-hover-border);
--checkbox-danger-active-background-color: var(--color-danger-transparent-active);
--checkbox-danger-active-border-color: var(--color-danger-transparent-active-border);
--checkbox-danger-active-checked-background-color: var(--color-danger-active);
--checkbox-danger-active-checked-border-color: var(--color-danger-active-border);
--checkbox-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-danger-disabled-checkmark-color: var(--text-control-color);
--checkbox-danger-disabled-text-color: var(--text-disabled-color);
--checkbox-danger-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-danger-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-control-text-color: var(--text-control-color);
--checkbox-control-background-color: var(--color-control-transparent-default);
--checkbox-control-border-color: var(--color-control-transparent-default-border);
--checkbox-control-checked-background-color: var(--color-control-default);
--checkbox-control-checked-border-color: var(--color-control-default-border);
--checkbox-control-checked-checkmark-color: var(--color-basic-800);
--checkbox-control-indeterminate-background-color: var(--color-control-default);
--checkbox-control-indeterminate-border-color: var(--color-control-default-border);
--checkbox-control-indeterminate-checkmark-color: var(--color-basic-800);
--checkbox-control-focus-background-color: var(--color-control-transparent-focus);
--checkbox-control-focus-border-color: var(--color-control-transparent-focus-border);
--checkbox-control-focus-checked-background-color: var(--color-control-focus);
--checkbox-control-focus-checked-border-color: var(--color-control-focus-border);
--checkbox-control-hover-background-color: var(--color-control-transparent-hover);
--checkbox-control-hover-border-color: var(--color-control-transparent-hover-border);
--checkbox-control-hover-checked-background-color: var(--color-control-hover);
--checkbox-control-hover-checked-border-color: var(--color-control-hover-border);
--checkbox-control-active-background-color: var(--color-control-transparent-active);
--checkbox-control-active-border-color: var(--color-control-transparent-active-border);
--checkbox-control-active-checked-background-color: var(--color-control-active);
--checkbox-control-active-checked-border-color: var(--color-control-active-border);
--checkbox-control-disabled-background-color: var(--color-control-transparent-disabled);
--checkbox-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--checkbox-control-disabled-checkmark-color: var(--text-control-color);
--checkbox-control-disabled-text-color: var(--text-control-color);
--checkbox-control-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-control-disabled-checked-border-color: var(--color-basic-transparent-600);
--badge-dot-mode-border-radius: 0.5rem;
--badge-dot-mode-padding: 0.3rem;
--badge-border-radius: var(--border-radius);
--badge-text-font-family: var(--text-button-font-family);
--badge-text-font-size: var(--text-button-tiny-font-size);
--badge-text-font-weight: var(--text-button-font-weight);
--badge-text-line-height: var(--text-button-tiny-line-height);
--badge-padding: 0.25rem 0.4rem;
--badge-basic-background-color: var(--background-basic-color-2);
--badge-basic-text-color: var(--text-basic-color);
--badge-primary-background-color: var(--color-primary-default);
--badge-primary-text-color: var(--text-control-color);
--badge-success-background-color: var(--color-success-default);
--badge-success-text-color: var(--text-control-color);
--badge-info-background-color: var(--color-info-default);
--badge-info-text-color: var(--text-control-color);
--badge-warning-background-color: var(--color-warning-default);
--badge-warning-text-color: var(--text-control-color);
--badge-danger-background-color: var(--color-danger-default);
--badge-danger-text-color: var(--text-control-color);
--badge-control-background-color: var(--color-control-default);
--badge-control-text-color: var(--color-basic-800);
--progress-bar-animation-duration: 400ms;
--progress-bar-border-radius: var(--border-radius);
--progress-bar-text-font-family: var(--text-subtitle-font-family);
--progress-bar-tiny-height: 1rem;
--progress-bar-tiny-text-font-size: var(--text-subtitle-2-font-size);
--progress-bar-tiny-text-font-weight: var(--text-subtitle-2-font-weight);
--progress-bar-tiny-text-line-height: var(--text-subtitle-2-line-height);
--progress-bar-small-height: 1.25rem;
--progress-bar-small-text-font-size: var(--text-subtitle-2-font-size);
--progress-bar-small-text-font-weight: var(--text-subtitle-2-font-weight);
--progress-bar-small-text-line-height: var(--text-subtitle-2-line-height);
--progress-bar-medium-height: 1.375rem;
--progress-bar-medium-text-font-size: var(--text-subtitle-font-size);
--progress-bar-medium-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-medium-text-line-height: var(--text-subtitle-line-height);
--progress-bar-large-height: 1.5rem;
--progress-bar-large-text-font-size: var(--text-subtitle-font-size);
--progress-bar-large-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-large-text-line-height: var(--text-subtitle-line-height);
--progress-bar-giant-height: 1.75rem;
--progress-bar-giant-text-font-size: var(--text-subtitle-font-size);
--progress-bar-giant-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-giant-text-line-height: var(--text-subtitle-line-height);
--progress-bar-basic-background-color: var(--background-basic-color-2);
--progress-bar-basic-filled-background-color: var(--background-basic-color-4);
--progress-bar-basic-text-color: var(--text-basic-color);
--progress-bar-primary-background-color: var(--background-basic-color-3);
--progress-bar-primary-filled-background-color: var(--color-primary-default);
--progress-bar-primary-text-color: var(--text-control-color);
--progress-bar-success-background-color: var(--background-basic-color-3);
--progress-bar-success-filled-background-color: var(--color-success-default);
--progress-bar-success-text-color: var(--text-control-color);
--progress-bar-info-background-color: var(--background-basic-color-3);
--progress-bar-info-filled-background-color: var(--color-info-default);
--progress-bar-info-text-color: var(--text-control-color);
--progress-bar-warning-background-color: var(--background-basic-color-3);
--progress-bar-warning-filled-background-color: var(--color-warning-default);
--progress-bar-warning-text-color: var(--text-control-color);
--progress-bar-danger-background-color: var(--background-basic-color-3);
--progress-bar-danger-filled-background-color: var(--color-danger-default);
--progress-bar-danger-text-color: var(--text-control-color);
--progress-bar-control-background-color: var(--background-basic-color-3);
--progress-bar-control-filled-background-color: var(--color-control-default);
--progress-bar-control-text-color: var(--color-basic-800);
--alert-border-radius: var(--border-radius);
--alert-bottom-margin: 1.5rem;
--alert-padding: 1rem 1.125rem;
--alert-scrollbar-color: var(--scrollbar-color);
--alert-scrollbar-background-color: var(--scrollbar-background-color);
--alert-scrollbar-width: var(--scrollbar-width);
--alert-shadow: none;
--alert-text-font-family: var(--text-paragraph-font-family);
--alert-text-font-size: var(--text-subtitle-font-size);
--alert-text-font-weight: var(--text-subtitle-font-weight);
--alert-text-line-height: var(--text-subtitle-line-height);
--alert-closable-start-padding: 3rem;
--alert-tiny-height: 4.5rem;
--alert-small-height: 5.75rem;
--alert-medium-height: 7rem;
--alert-medium-padding: 1rem 1.125rem;
--alert-large-height: 8.25rem;
--alert-giant-height: 9.5rem;
--alert-basic-background-color: var(--background-basic-color-2);
--alert-basic-text-color: var(--text-basic-color);
--alert-primary-background-color: var(--color-primary-default);
--alert-primary-text-color: var(--text-control-color);
--alert-success-background-color: var(--color-success-default);
--alert-success-text-color: var(--text-control-color);
--alert-info-background-color: var(--color-info-default);
--alert-info-text-color: var(--text-control-color);
--alert-warning-background-color: var(--color-warning-default);
--alert-warning-text-color: var(--text-control-color);
--alert-danger-background-color: var(--color-danger-default);
--alert-danger-text-color: var(--text-control-color);
--alert-control-background-color: var(--color-control-default);
--alert-control-text-color: var(--color-basic-800);
--alert-accent-basic-color: var(--border-basic-color-3);
--alert-accent-primary-color: var(--color-primary-default);
--alert-accent-info-color: var(--color-info-default);
--alert-accent-success-color: var(--color-success-default);
--alert-accent-warning-color: var(--color-warning-default);
--alert-accent-danger-color: var(--color-danger-default);
--alert-accent-control-color: var(--color-control-default);
--alert-outline-width: 1px;
--alert-outline-basic-color: var(--color-basic-focus-border);
--alert-outline-primary-color: var(--color-primary-focus-border);
--alert-outline-info-color: var(--color-info-focus-border);
--alert-outline-success-color: var(--color-success-focus-border);
--alert-outline-warning-color: var(--color-warning-focus-border);
--alert-outline-danger-color: var(--color-danger-focus-border);
--alert-outline-control-color: var(--color-control-focus-border);
--chat-background-color: var(--background-basic-color-1);
--chat-border: none;
--chat-border-radius: var(--border-radius);
--chat-shadow: var(--shadow);
--chat-padding: 1rem 1.25rem;
--chat-scrollbar-color: var(--scrollbar-color);
--chat-scrollbar-background-color: var(--scrollbar-background-color);
--chat-scrollbar-width: var(--scrollbar-width);
--chat-text-color: var(--text-basic-color);
--chat-text-font-family: var(--text-paragraph-font-family);
--chat-text-font-size: var(--text-paragraph-font-size);
--chat-text-font-weight: var(--text-paragraph-font-weight);
--chat-text-line-height: var(--text-paragraph-line-height);
--chat-header-text-font-family: var(--text-subtitle-font-family);
--chat-header-text-font-size: var(--text-subtitle-font-size);
--chat-header-text-font-weight: var(--text-subtitle-font-weight);
--chat-header-text-line-height: var(--text-subtitle-line-height);
--chat-tiny-height: 13.5rem;
--chat-small-height: 21rem;
--chat-medium-height: 28.5rem;
--chat-large-height: 36rem;
--chat-giant-height: 43.5rem;
--chat-basic-background-color: var(--background-basic-color-1);
--chat-basic-text-color: var(--text-basic-color);
--chat-primary-background-color: var(--color-primary-default);
--chat-primary-text-color: var(--text-control-color);
--chat-success-background-color: var(--color-success-default);
--chat-success-text-color: var(--text-control-color);
--chat-info-background-color: var(--color-info-default);
--chat-info-text-color: var(--text-control-color);
--chat-warning-background-color: var(--color-warning-default);
--chat-warning-text-color: var(--text-control-color);
--chat-danger-background-color: var(--color-danger-default);
--chat-danger-text-color: var(--text-control-color);
--chat-control-background-color: var(--color-control-default);
--chat-control-text-color: var(--color-basic-800);
--chat-divider-color: var(--divider-color);
--chat-divider-style: var(--divider-style);
--chat-divider-width: var(--divider-width);
--chat-message-background: var(--color-primary-default);
--chat-message-text-color: var(--text-control-color);
--chat-message-reply-background-color: var(--background-basic-color-2);
--chat-message-reply-text-color: var(--text-basic-color);
--chat-message-avatar-background-color: var(--color-basic-500);
--chat-message-sender-text-color: var(--text-hint-color);
--chat-message-quote-background-color: var(--background-basic-color-2);
--chat-message-quote-text-color: var(--text-hint-color);
--chat-message-file-text-color: var(--text-hint-color);
--chat-message-file-background-color: transparent;
--spinner-text-color: var(--text-basic-color);
--spinner-text-font-family: var(--text-button-font-family);
--spinner-text-font-size: var(--text-button-medium-font-size);
--spinner-text-font-weight: var(--text-button-font-weight);
--spinner-text-line-height: var(--text-button-medium-line-height);
--spinner-basic-background-color: var(--color-basic-transparent-200);
--spinner-basic-circle-filled-color: var(--text-hint-color);
--spinner-basic-circle-empty-color: transparent;
--spinner-primary-background-color: var(--color-basic-transparent-200);
--spinner-primary-circle-filled-color: var(--color-primary-default);
--spinner-primary-circle-empty-color: transparent;
--spinner-info-background-color: var(--color-basic-transparent-200);
--spinner-info-circle-filled-color: var(--color-info-default);
--spinner-info-circle-empty-color: transparent;
--spinner-success-background-color: var(--color-basic-transparent-200);
--spinner-success-circle-filled-color: var(--color-success-default);
--spinner-success-circle-empty-color: transparent;
--spinner-warning-background-color: var(--color-basic-transparent-200);
--spinner-warning-circle-filled-color: var(--color-warning-default);
--spinner-warning-circle-empty-color: transparent;
--spinner-danger-background-color: var(--color-basic-transparent-200);
--spinner-danger-circle-filled-color: var(--color-danger-default);
--spinner-danger-circle-empty-color: transparent;
--spinner-control-background-color: var(--color-basic-control-transparent-200);
--spinner-control-circle-filled-color: var(--color-control-default);
--spinner-control-circle-empty-color: transparent;
--spinner-height-tiny: 1rem;
--spinner-height-small: 1.25rem;
--spinner-height-medium: 1.5rem;
--spinner-height-large: 1.75rem;
--spinner-height-giant: 2rem;
--stepper-step-text-color: var(--text-hint-color);
--stepper-step-text-font-family: var(--text-paragraph-font-family);
--stepper-step-text-font-size: var(--text-paragraph-font-size);
--stepper-step-text-font-weight: var(--text-paragraph-font-weight);
--stepper-step-text-line-height: var(--text-paragraph-line-height);
--stepper-step-active-text-color: var(--text-primary-active-color);
--stepper-step-completed-text-color: var(--text-primary-color);
--stepper-step-index-border-color: var(--border-basic-color-4);
--stepper-step-index-border-style: solid;
--stepper-step-index-border-width: 1px;
--stepper-step-index-border-radius: 50%;
--stepper-step-index-width: 2rem;
--stepper-step-index-active-border-color: var(--color-primary-active);
--stepper-step-index-completed-background-color: var(--color-primary-default);
--stepper-step-index-completed-border-color: var(--color-primary-default);
--stepper-step-index-completed-text-color: var(--text-control-color);
--stepper-connector-background-color: var(--background-basic-color-3);
--stepper-connector-completed-background-color: var(--color-primary-default);
--stepper-horizontal-connector-margin: 1rem;
--stepper-vertical-connector-margin: 1rem;
--stepper-step-content-padding: 1.25rem;
--accordion-border-radius: var(--border-radius);
--accordion-padding: 1.25rem;
--accordion-shadow: var(--shadow);
--accordion-header-text-color: var(--text-basic-color);
--accordion-header-text-font-family: var(--text-subtitle-font-family);
--accordion-header-text-font-size: var(--text-subtitle-font-size);
--accordion-header-text-font-weight: var(--text-subtitle-font-weight);
--accordion-header-text-line-height: var(--text-subtitle-line-height);
--accordion-header-disabled-text-color: var(--text-disabled-color);
--accordion-header-border-color: var(--border-basic-color-3);
--accordion-header-border-style: solid;
--accordion-header-border-width: 1px;
--accordion-item-background-color: var(--background-basic-color-1);
--accordion-item-text-color: var(--text-basic-color);
--accordion-item-text-font-family: var(--text-paragraph-font-family);
--accordion-item-text-font-size: var(--text-paragraph-font-size);
--accordion-item-text-font-weight: var(--text-paragraph-font-weight);
--accordion-item-text-line-height: var(--text-paragraph-line-height);
--list-item-divider-color: var(--divider-color);
--list-item-divider-style: var(--divider-style);
--list-item-divider-width: var(--divider-width);
--list-item-padding: 1rem;
--list-item-text-color: var(--text-basic-color);
--list-item-font-family: var(--text-paragraph-font-family);
--list-item-font-size: var(--text-paragraph-font-size);
--list-item-font-weight: var(--text-paragraph-font-weight);
--list-item-line-height: var(--text-paragraph-line-height);
--calendar-width: 20.625rem;
--calendar-background-color: var(--background-basic-color-1);
--calendar-border-color: var(--border-basic-color-4);
--calendar-border-style: solid;
--calendar-border-width: 0.0625rem;
--calendar-border-radius: var(--border-radius);
--calendar-text-color: var(--text-basic-color);
--calendar-text-font-family: var(--text-subtitle-font-family);
--calendar-text-font-size: var(--text-subtitle-font-size);
--calendar-text-font-weight: var(--text-subtitle-font-weight);
--calendar-text-line-height: var(--text-subtitle-line-height);
--calendar-picker-padding-top: 0.25rem;
--calendar-picker-padding-bottom: 0.625rem;
--calendar-picker-padding-start: 0.625rem;
--calendar-picker-padding-end: 0.625rem;
--calendar-navigation-text-color: var(--text-basic-color);
--calendar-navigation-text-font-family: var(--text-button-font-family);
--calendar-navigation-title-text-font-size: var(--text-button-medium-font-size);
--calendar-navigation-title-text-font-weight: var(--text-button-font-weight);
--calendar-navigation-title-text-line-height: var(--text-button-medium-line-height);
--calendar-navigation-padding: 0.625rem 0.25rem;
--calendar-cell-inactive-text-color: var(--text-hint-color);
--calendar-cell-disabled-text-color: var(--text-disabled-color);
--calendar-cell-hover-background-color: var(--background-basic-color-2);
--calendar-cell-hover-border-color: var(--background-basic-color-2);
--calendar-cell-hover-text-color: var(--text-basic-color);
--calendar-cell-hover-text-font-size: var(--calendar-text-font-size);
--calendar-cell-hover-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-hover-text-line-height: var(--calendar-text-line-height);
--calendar-cell-active-background-color: var(--color-primary-active);
--calendar-cell-active-border-color: var(--color-primary-active-border);
--calendar-cell-active-text-color: var(--text-control-color);
--calendar-cell-active-text-font-size: var(--calendar-text-font-size);
--calendar-cell-active-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-active-text-line-height: var(--calendar-text-line-height);
--calendar-cell-today-background-color: var(--color-primary-transparent-default);
--calendar-cell-today-border-color: var(--color-primary-transparent-default-border);
--calendar-cell-today-text-color: var(--text-basic-color);
--calendar-cell-today-text-font-size: var(--calendar-text-font-size);
--calendar-cell-today-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-today-text-line-height: var(--calendar-text-line-height);
--calendar-cell-today-hover-background-color: var(--color-primary-transparent-hover);
--calendar-cell-today-hover-border-color: var(--color-primary-transparent-hover-border);
--calendar-cell-today-active-background-color: var(--color-primary-transparent-active);
--calendar-cell-today-active-border-color: var(--color-primary-transparent-active-border);
--calendar-cell-today-disabled-border-color: var(--border-basic-color-4);
--calendar-cell-today-selected-background-color: var(--color-control-transparent-default);
--calendar-cell-today-selected-border-color: transparent;
--calendar-cell-today-selected-text-color: var(--text-control-color);
--calendar-cell-today-selected-hover-background-color: var(--color-control-transparent-hover);
--calendar-cell-today-selected-hover-border-color: transparent;
--calendar-cell-today-selected-active-background-color: var(--color-control-transparent-active);
--calendar-cell-today-selected-active-border-color: transparent;
--calendar-cell-today-in-range-background-color: var(--color-control-transparent-default);
--calendar-cell-today-in-range-border-color: transparent;
--calendar-cell-today-in-range-text-color: var(--text-control-color);
--calendar-cell-today-in-range-hover-background-color: var(--color-control-transparent-hover);
--calendar-cell-today-in-range-hover-border-color: transparent;
--calendar-cell-today-in-range-active-background-color: var(--color-control-transparent-active);
--calendar-cell-today-in-range-active-border-color: transparent;
--calendar-cell-selected-background-color: var(--color-primary-default);
--calendar-cell-selected-border-color: var(--color-primary-default-border);
--calendar-cell-selected-text-color: var(--text-control-color);
--calendar-cell-selected-text-font-size: var(--calendar-text-font-size);
--calendar-cell-selected-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-selected-text-line-height: var(--calendar-text-line-height);
--calendar-cell-selected-hover-background-color: var(--color-primary-hover);
--calendar-cell-selected-hover-border-color: var(--color-primary-hover-border);
--calendar-cell-selected-active-background-color: var(--color-primary-active);
--calendar-cell-selected-active-border-color: var(--color-primary-active-border);
--calendar-day-cell-width: 2.75rem;
--calendar-day-cell-height: 2.75rem;
--calendar-month-cell-width: 4.8125rem;
--calendar-month-cell-height: var(--calendar-day-cell-height);
--calendar-year-cell-width: var(--calendar-month-cell-width);
--calendar-year-cell-height: var(--calendar-month-cell-height);
--calendar-weekday-background: transparent;
--calendar-weekday-divider-color: var(--divider-color);
--calendar-weekday-divider-width: var(--divider-width);
--calendar-weekday-text-color: var(--text-hint-color);
--calendar-weekday-text-font-size: var(--text-subtitle-font-size);
--calendar-weekday-text-font-weight: var(--text-subtitle-font-weight);
--calendar-weekday-text-line-height: var(--text-subtitle-line-height);
--calendar-weekday-holiday-text-color: var(--calendar-weekday-text-color);
--calendar-weekday-height: var(--calendar-day-cell-height);
--calendar-weekday-width: var(--calendar-day-cell-width);
--calendar-weeknumber-background: transparent;
--calendar-weeknumber-divider-color: var(--divider-color);
--calendar-weeknumber-divider-width: var(--divider-width);
--calendar-weeknumber-text-color: var(--text-hint-color);
--calendar-weeknumber-text-font-size: var(--text-subtitle-font-size);
--calendar-weeknumber-text-font-weight: var(--text-subtitle-font-weight);
--calendar-weeknumber-text-line-height: var(--text-subtitle-line-height);
--calendar-weeknumber-height: var(--calendar-weekday-height);
--calendar-weeknumber-width: var(--calendar-weekday-width);
--calendar-large-width: 22.375rem;
--calendar-day-cell-large-width: 3rem;
--calendar-day-cell-large-height: 3rem;
--calendar-weekday-large-height: var(--calendar-day-cell-large-width);
--calendar-weekday-large-width: var(--calendar-day-cell-large-height);
--calendar-weeknumber-large-height: var(--calendar-weekday-large-height);
--calendar-weeknumber-large-width: var(--calendar-weekday-large-width);
--calendar-month-cell-large-width: 5.25rem;
--calendar-month-cell-large-height: var(--calendar-day-cell-large-height);
--calendar-year-cell-large-width: var(--calendar-month-cell-large-width);
--calendar-year-cell-large-height: var(--calendar-month-cell-large-height);
--overlay-backdrop-background-color: rgba(0, 0, 0, 0.35);
--tooltip-background-color: var(--background-alternative-color-3);
--tooltip-border-color: transparent;
--tooltip-border-style: dashed;
--tooltip-border-width: 0;
--tooltip-border-radius: var(--border-radius);
--tooltip-padding: 0.5rem 1rem;
--tooltip-text-color: var(--text-alternate-color);
--tooltip-text-font-family: var(--text-caption-font-family);
--tooltip-text-font-size: var(--text-caption-font-size);
--tooltip-text-font-weight: var(--text-caption-font-weight);
--tooltip-text-line-height: var(--text-caption-line-height);
--tooltip-icon-height: 1rem;
--tooltip-icon-width: 1rem;
--tooltip-max-width: 16rem;
--tooltip-basic-background-color: var(--background-basic-color-3);
--tooltip-basic-border-color: transparent;
--tooltip-basic-text-color: var(--text-basic-color);
--tooltip-primary-background-color: var(--color-primary-default);
--tooltip-primary-border-color: transparent;
--tooltip-primary-text-color: var(--text-control-color);
--tooltip-info-background-color: var(--color-info-default);
--tooltip-info-border-color: transparent;
--tooltip-info-text-color: var(--text-control-color);
--tooltip-success-background-color: var(--color-success-default);
--tooltip-success-border-color: transparent;
--tooltip-success-text-color: var(--text-control-color);
--tooltip-warning-background-color: var(--color-warning-default);
--tooltip-warning-border-color: transparent;
--tooltip-warning-text-color: var(--text-control-color);
--tooltip-danger-background-color: var(--color-danger-default);
--tooltip-danger-border-color: transparent;
--tooltip-danger-text-color: var(--text-control-color);
--tooltip-control-background-color: var(--color-control-default);
--tooltip-control-border-color: transparent;
--tooltip-control-text-color: var(--color-basic-800);
--tooltip-shadow: var(--shadow);
--option-list-max-height: 20rem;
--option-list-shadow: none;
--option-list-background-color: var(--background-basic-color-1);
--option-list-border-style: solid;
--option-list-border-width: 0.0625rem;
--option-list-border-color: var(--border-basic-color-4);
--option-list-border-radius: var(--border-radius);
--option-list-adjacent-border-color: var(--option-list-border-color);
--option-list-adjacent-border-style: var(--option-list-border-style);
--option-list-adjacent-border-width: var(--option-list-border-width);
--option-group-text-color: var(--text-hint-color);
--option-group-tiny-start-padding: 1.25rem;
--option-group-small-start-padding: 1.75rem;
--option-group-medium-start-padding: 2.25rem;
--option-group-large-start-padding: 2.25rem;
--option-group-giant-start-padding: 2.75rem;
--option-background-color: var(--background-basic-color-1);
--option-text-color: var(--text-basic-color);
--option-text-font-family: var(--text-subtitle-font-family);
--option-hover-background-color: var(--color-basic-transparent-hover);
--option-hover-text-color: var(--text-basic-color);
--option-active-background-color: var(--color-basic-transparent-active);
--option-active-text-color: var(--text-basic-color);
--option-focus-background-color: var(--color-basic-transparent-focus);
--option-focus-text-color: var(--text-basic-color);
--option-selected-background-color: var(--color-primary-default);
--option-selected-text-color: var(--text-control-color);
--option-selected-hover-background-color: var(--color-primary-hover);
--option-selected-hover-text-color: var(--text-control-color);
--option-selected-active-background-color: var(--color-primary-active);
--option-selected-active-text-color: var(--text-control-color);
--option-selected-focus-background-color: var(--color-primary-focus);
--option-selected-focus-text-color: var(--text-control-color);
--option-disabled-background-color: var(--background-basic-color-1);
--option-disabled-text-color: var(--text-disabled-color);
--option-tiny-text-font-size: var(--text-caption-2-font-size);
--option-tiny-text-font-weight: var(--text-caption-2-font-weight);
--option-tiny-text-line-height: var(--text-caption-2-line-height);
--option-tiny-padding: var(--select-outline-tiny-padding);
--option-small-text-font-size: var(--text-subtitle-2-font-size);
--option-small-text-font-weight: var(--text-subtitle-2-font-weight);
--option-small-text-line-height: var(--text-subtitle-2-line-height);
--option-small-padding: var(--select-outline-small-padding);
--option-medium-text-font-size: var(--text-subtitle-font-size);
--option-medium-text-font-weight: var(--text-subtitle-font-weight);
--option-medium-text-line-height: var(--text-subtitle-line-height);
--option-medium-padding: var(--select-outline-medium-padding);
--option-large-text-font-size: var(--text-subtitle-font-size);
--option-large-text-font-weight: var(--text-subtitle-font-weight);
--option-large-text-line-height: var(--text-subtitle-line-height);
--option-large-padding: var(--select-outline-large-padding);
--option-giant-text-font-size: var(--text-heading-6-font-size);
--option-giant-text-font-weight: var(--text-heading-6-font-weight);
--option-giant-text-line-height: var(--text-heading-6-line-height);
--option-giant-padding: var(--select-outline-giant-padding);
--select-cursor: pointer;
--select-disabled-cursor: default;
--select-min-width: 13rem;
--select-outline-width: var(--outline-width);
--select-outline-color: var(--outline-color);
--select-icon-offset: 2rem;
--select-text-font-family: var(--text-subtitle-font-family);
--select-placeholder-text-font-family: var(--text-paragraph-font-family);
--select-tiny-text-font-size: var(--text-caption-2-font-size);
--select-tiny-text-font-weight: var(--text-caption-2-font-weight);
--select-tiny-text-line-height: var(--text-caption-2-line-height);
--select-tiny-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-tiny-max-width: 20rem;
--select-small-text-font-size: var(--text-subtitle-2-font-size);
--select-small-text-font-weight: var(--text-subtitle-2-font-weight);
--select-small-text-line-height: var(--text-subtitle-2-line-height);
--select-small-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-small-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-small-max-width: 20rem;
--select-medium-text-font-size: var(--text-subtitle-font-size);
--select-medium-text-font-weight: var(--text-subtitle-font-weight);
--select-medium-text-line-height: var(--text-subtitle-line-height);
--select-medium-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-medium-max-width: 20rem;
--select-large-text-font-size: var(--text-subtitle-font-size);
--select-large-text-font-weight: var(--text-subtitle-font-weight);
--select-large-text-line-height: var(--text-subtitle-line-height);
--select-large-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-large-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-large-max-width: 30rem;
--select-giant-text-font-size: var(--text-heading-6-font-size);
--select-giant-text-font-weight: var(--text-heading-6-font-weight);
--select-giant-text-line-height: var(--text-heading-6-line-height);
--select-giant-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-giant-max-width: 30rem;
--select-rectangle-border-radius: var(--border-radius);
--select-semi-round-border-radius: 0.75rem;
--select-round-border-radius: 1.5rem;
--select-outline-border-style: solid;
--select-outline-border-width: 1px;
--select-outline-tiny-padding: 0.1875rem 1rem;
--select-outline-small-padding: 0.1875rem 1rem;
--select-outline-medium-padding: 0.4375rem 1rem;
--select-outline-large-padding: 0.6875rem 1rem;
--select-outline-giant-padding: 0.9375rem 1rem;
--select-outline-basic-icon-color: var(--text-hint-color);
--select-outline-basic-text-color: var(--text-basic-color);
--select-outline-basic-placeholder-text-color: var(--text-hint-color);
--select-outline-basic-background-color: var(--background-basic-color-2);
--select-outline-basic-border-color: var(--border-basic-color-4);
--select-outline-basic-focus-background-color: var(--background-basic-color-1);
--select-outline-basic-focus-border-color: var(--color-primary-default);
--select-outline-basic-hover-background-color: var(--background-basic-color-3);
--select-outline-basic-hover-border-color: var(--border-basic-color-4);
--select-outline-basic-disabled-background-color: var(--background-basic-color-2);
--select-outline-basic-disabled-border-color: var(--border-basic-color-4);
--select-outline-basic-disabled-icon-color: var(--text-disabled-color);
--select-outline-basic-disabled-text-color: var(--text-disabled-color);
--select-outline-primary-icon-color: var(--text-hint-color);
--select-outline-primary-text-color: var(--text-basic-color);
--select-outline-primary-placeholder-text-color: var(--text-hint-color);
--select-outline-primary-background-color: var(--background-basic-color-2);
--select-outline-primary-border-color: var(--color-primary-default);
--select-outline-primary-focus-background-color: var(--background-basic-color-1);
--select-outline-primary-focus-border-color: var(--color-primary-focus);
--select-outline-primary-hover-background-color: var(--background-basic-color-3);
--select-outline-primary-hover-border-color: var(--color-primary-hover);
--select-outline-primary-disabled-background-color: var(--background-basic-color-2);
--select-outline-primary-disabled-border-color: var(--border-basic-color-4);
--select-outline-primary-disabled-icon-color: var(--text-disabled-color);
--select-outline-primary-disabled-text-color: var(--text-disabled-color);
--select-outline-success-icon-color: var(--text-hint-color);
--select-outline-success-text-color: var(--text-basic-color);
--select-outline-success-placeholder-text-color: var(--text-hint-color);
--select-outline-success-background-color: var(--background-basic-color-2);
--select-outline-success-border-color: var(--color-success-default);
--select-outline-success-focus-background-color: var(--background-basic-color-1);
--select-outline-success-focus-border-color: var(--color-success-focus);
--select-outline-success-hover-background-color: var(--background-basic-color-3);
--select-outline-success-hover-border-color: var(--color-success-hover);
--select-outline-success-disabled-background-color: var(--background-basic-color-2);
--select-outline-success-disabled-border-color: var(--border-basic-color-4);
--select-outline-success-disabled-icon-color: var(--text-disabled-color);
--select-outline-success-disabled-text-color: var(--text-disabled-color);
--select-outline-info-icon-color: var(--text-hint-color);
--select-outline-info-text-color: var(--text-basic-color);
--select-outline-info-placeholder-text-color: var(--text-hint-color);
--select-outline-info-background-color: var(--background-basic-color-2);
--select-outline-info-border-color: var(--color-info-default);
--select-outline-info-focus-background-color: var(--background-basic-color-1);
--select-outline-info-focus-border-color: var(--color-info-focus);
--select-outline-info-hover-background-color: var(--background-basic-color-3);
--select-outline-info-hover-border-color: var(--color-info-hover);
--select-outline-info-disabled-background-color: var(--background-basic-color-2);
--select-outline-info-disabled-border-color: var(--border-basic-color-4);
--select-outline-info-disabled-icon-color: var(--text-disabled-color);
--select-outline-info-disabled-text-color: var(--text-disabled-color);
--select-outline-warning-icon-color: var(--text-hint-color);
--select-outline-warning-text-color: var(--text-basic-color);
--select-outline-warning-placeholder-text-color: var(--text-hint-color);
--select-outline-warning-background-color: var(--background-basic-color-2);
--select-outline-warning-border-color: var(--color-warning-default);
--select-outline-warning-focus-background-color: var(--background-basic-color-1);
--select-outline-warning-focus-border-color: var(--color-warning-focus);
--select-outline-warning-hover-background-color: var(--background-basic-color-3);
--select-outline-warning-hover-border-color: var(--color-warning-hover);
--select-outline-warning-disabled-background-color: var(--background-basic-color-2);
--select-outline-warning-disabled-border-color: var(--border-basic-color-4);
--select-outline-warning-disabled-icon-color: var(--text-disabled-color);
--select-outline-warning-disabled-text-color: var(--text-disabled-color);
--select-outline-danger-icon-color: var(--text-hint-color);
--select-outline-danger-text-color: var(--text-basic-color);
--select-outline-danger-placeholder-text-color: var(--text-hint-color);
--select-outline-danger-background-color: var(--background-basic-color-2);
--select-outline-danger-border-color: var(--color-danger-default);
--select-outline-danger-focus-background-color: var(--background-basic-color-1);
--select-outline-danger-focus-border-color: var(--color-danger-focus);
--select-outline-danger-hover-background-color: var(--background-basic-color-3);
--select-outline-danger-hover-border-color: var(--color-danger-hover);
--select-outline-danger-disabled-background-color: var(--background-basic-color-2);
--select-outline-danger-disabled-border-color: var(--border-basic-color-4);
--select-outline-danger-disabled-icon-color: var(--text-disabled-color);
--select-outline-danger-disabled-text-color: var(--text-disabled-color);
--select-outline-control-icon-color: var(--color-basic-100);
--select-outline-control-text-color: var(--color-basic-100);
--select-outline-control-placeholder-text-color: var(--color-basic-100);
--select-outline-control-background-color: var(--color-basic-control-transparent-300);
--select-outline-control-border-color: var(--color-basic-control-transparent-500);
--select-outline-control-focus-background-color: var(--color-basic-control-transparent-500);
--select-outline-control-focus-border-color: var(--color-control-transparent-focus-border);
--select-outline-control-hover-background-color: var(--color-basic-control-transparent-400);
--select-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--select-outline-control-disabled-background-color: var(--color-control-transparent-disabled);
--select-outline-control-disabled-border-color: var(--color-basic-control-transparent-500);
--select-outline-control-disabled-icon-color: var(--color-basic-100);
--select-outline-control-disabled-text-color: var(--color-basic-100);
--select-outline-adjacent-border-style: var(--select-outline-border-style);
--select-outline-adjacent-border-width: var(--select-outline-border-width);
--select-outline-basic-open-border-color: var(--select-outline-basic-border-color);
--select-outline-basic-adjacent-border-color: var(--select-outline-basic-border-color);
--select-outline-primary-open-border-color: var(--select-outline-primary-border-color);
--select-outline-primary-adjacent-border-color: var(--select-outline-primary-border-color);
--select-outline-success-open-border-color: var(--select-outline-success-border-color);
--select-outline-success-adjacent-border-color: var(--select-outline-success-border-color);
--select-outline-info-open-border-color: var(--select-outline-info-border-color);
--select-outline-info-adjacent-border-color: var(--select-outline-info-border-color);
--select-outline-warning-open-border-color: var(--select-outline-warning-border-color);
--select-outline-warning-adjacent-border-color: var(--select-outline-warning-border-color);
--select-outline-danger-open-border-color: var(--select-outline-danger-border-color);
--select-outline-danger-adjacent-border-color: var(--select-outline-danger-border-color);
--select-outline-control-open-border-color: var(--select-outline-control-border-color);
--select-outline-control-adjacent-border-color: var(--select-outline-control-border-color);
--select-filled-border-style: solid;
--select-filled-border-width: 1px;
--select-filled-tiny-padding: 0.1875rem 1rem;
--select-filled-small-padding: 0.1875rem 1rem;
--select-filled-medium-padding: 0.4375rem 1rem;
--select-filled-large-padding: 0.6875rem 1rem;
--select-filled-giant-padding: 0.9375rem 1rem;
--select-filled-basic-background-color: var(--color-basic-default);
--select-filled-basic-border-color: var(--color-basic-default-border);
--select-filled-basic-icon-color: var(--color-basic-800);
--select-filled-basic-text-color: var(--color-basic-800);
--select-filled-basic-placeholder-text-color: var(--text-hint-color);
--select-filled-basic-focus-background-color: var(--color-basic-focus);
--select-filled-basic-focus-border-color: var(--color-basic-focus-border);
--select-filled-basic-hover-background-color: var(--color-basic-hover);
--select-filled-basic-hover-border-color: var(--color-basic-hover-border);
--select-filled-basic-disabled-background-color: var(--background-basic-color-2);
--select-filled-basic-disabled-border-color: var(--border-basic-color-2);
--select-filled-basic-disabled-icon-color: var(--text-disabled-color);
--select-filled-basic-disabled-text-color: var(--text-disabled-color);
--select-filled-primary-background-color: var(--color-primary-default);
--select-filled-primary-border-color: var(--color-primary-default-border);
--select-filled-primary-icon-color: var(--text-control-color);
--select-filled-primary-text-color: var(--text-control-color);
--select-filled-primary-placeholder-text-color: var(--text-control-color);
--select-filled-primary-focus-background-color: var(--color-primary-focus);
--select-filled-primary-focus-border-color: var(--color-primary-focus-border);
--select-filled-primary-hover-background-color: var(--color-primary-hover);
--select-filled-primary-hover-border-color: var(--color-primary-hover-border);
--select-filled-primary-disabled-background-color: var(--background-basic-color-2);
--select-filled-primary-disabled-border-color: var(--border-basic-color-2);
--select-filled-primary-disabled-icon-color: var(--text-disabled-color);
--select-filled-primary-disabled-text-color: var(--text-disabled-color);
--select-filled-success-background-color: var(--color-success-default);
--select-filled-success-border-color: var(--color-success-default-border);
--select-filled-success-icon-color: var(--text-control-color);
--select-filled-success-text-color: var(--text-control-color);
--select-filled-success-placeholder-text-color: var(--text-control-color);
--select-filled-success-focus-background-color: var(--color-success-focus);
--select-filled-success-focus-border-color: var(--color-success-focus-border);
--select-filled-success-hover-background-color: var(--color-success-hover);
--select-filled-success-hover-border-color: var(--color-success-hover-border);
--select-filled-success-disabled-background-color: var(--background-basic-color-2);
--select-filled-success-disabled-border-color: var(--border-basic-color-2);
--select-filled-success-disabled-icon-color: var(--text-disabled-color);
--select-filled-success-disabled-text-color: var(--text-disabled-color);
--select-filled-info-background-color: var(--color-info-default);
--select-filled-info-border-color: var(--color-info-default-border);
--select-filled-info-icon-color: var(--text-control-color);
--select-filled-info-text-color: var(--text-control-color);
--select-filled-info-placeholder-text-color: var(--text-control-color);
--select-filled-info-focus-background-color: var(--color-info-focus);
--select-filled-info-focus-border-color: var(--color-info-focus-border);
--select-filled-info-hover-background-color: var(--color-info-hover);
--select-filled-info-hover-border-color: var(--color-info-hover-border);
--select-filled-info-disabled-background-color: var(--background-basic-color-2);
--select-filled-info-disabled-border-color: var(--border-basic-color-2);
--select-filled-info-disabled-icon-color: var(--text-disabled-color);
--select-filled-info-disabled-text-color: var(--text-disabled-color);
--select-filled-warning-background-color: var(--color-warning-default);
--select-filled-warning-border-color: var(--color-warning-default-border);
--select-filled-warning-icon-color: var(--text-control-color);
--select-filled-warning-text-color: var(--text-control-color);
--select-filled-warning-placeholder-text-color: var(--text-control-color);
--select-filled-warning-focus-background-color: var(--color-warning-focus);
--select-filled-warning-focus-border-color: var(--color-warning-focus-border);
--select-filled-warning-hover-background-color: var(--color-warning-hover);
--select-filled-warning-hover-border-color: var(--color-warning-hover-border);
--select-filled-warning-disabled-background-color: var(--background-basic-color-2);
--select-filled-warning-disabled-border-color: var(--border-basic-color-2);
--select-filled-warning-disabled-icon-color: var(--text-disabled-color);
--select-filled-warning-disabled-text-color: var(--text-disabled-color);
--select-filled-danger-background-color: var(--color-danger-default);
--select-filled-danger-border-color: var(--color-danger-default-border);
--select-filled-danger-icon-color: var(--text-control-color);
--select-filled-danger-text-color: var(--text-control-color);
--select-filled-danger-placeholder-text-color: var(--text-control-color);
--select-filled-danger-focus-background-color: var(--color-danger-focus);
--select-filled-danger-focus-border-color: var(--color-danger-focus-border);
--select-filled-danger-hover-background-color: var(--color-danger-hover);
--select-filled-danger-hover-border-color: var(--color-danger-hover-border);
--select-filled-danger-disabled-background-color: var(--background-basic-color-2);
--select-filled-danger-disabled-border-color: var(--border-basic-color-2);
--select-filled-danger-disabled-icon-color: var(--text-disabled-color);
--select-filled-danger-disabled-text-color: var(--text-disabled-color);
--select-filled-control-background-color: var(--color-control-default);
--select-filled-control-border-color: var(--color-control-default-border);
--select-filled-control-icon-color: var(--color-basic-800);
--select-filled-control-text-color: var(--color-basic-800);
--select-filled-control-placeholder-text-color: var(--text-hint-color);
--select-filled-control-focus-background-color: var(--color-control-focus);
--select-filled-control-focus-border-color: var(--color-control-focus-border);
--select-filled-control-hover-background-color: var(--color-control-hover);
--select-filled-control-hover-border-color: var(--color-control-hover-border);
--select-filled-control-disabled-background-color: var(--background-basic-color-2);
--select-filled-control-disabled-border-color: var(--border-basic-color-2);
--select-filled-control-disabled-icon-color: var(--text-disabled-color);
--select-filled-control-disabled-text-color: var(--text-disabled-color);
--select-hero-tiny-padding: 0.25rem 1rem;
--select-hero-small-padding: 0.25rem 1rem;
--select-hero-medium-padding: 0.5rem 1rem;
--select-hero-large-padding: 0.75rem 1rem;
--select-hero-giant-padding: 1rem 1rem;
--select-hero-basic-left-background-color: var(--color-basic-200);
--select-hero-basic-right-background-color: var(--color-basic-default);
--select-hero-basic-icon-color: var(--color-basic-800);
--select-hero-basic-text-color: var(--color-basic-800);
--select-hero-basic-placeholder-text-color: var(--text-hint-color);
--select-hero-basic-focus-left-background-color: var(--color-basic-300);
--select-hero-basic-focus-right-background-color: var(--color-basic-400);
--select-hero-basic-hover-left-background-color: var(--color-basic-100);
--select-hero-basic-hover-right-background-color: var(--color-basic-hover);
--select-hero-basic-disabled-background-color: var(--background-basic-color-2);
--select-hero-basic-disabled-icon-color: var(--text-disabled-color);
--select-hero-basic-disabled-text-color: var(--text-disabled-color);
--select-hero-primary-left-background-color: var(--color-primary-400);
--select-hero-primary-right-background-color: var(--color-primary-default);
--select-hero-primary-icon-color: var(--text-control-color);
--select-hero-primary-text-color: var(--text-control-color);
--select-hero-primary-placeholder-text-color: var(--text-control-color);
--select-hero-primary-focus-left-background-color: var(--color-primary-500);
--select-hero-primary-focus-right-background-color: var(--color-primary-focus);
--select-hero-primary-hover-left-background-color: var(--color-primary-300);
--select-hero-primary-hover-right-background-color: var(--color-primary-hover);
--select-hero-primary-disabled-background-color: var(--background-basic-color-2);
--select-hero-primary-disabled-icon-color: var(--text-disabled-color);
--select-hero-primary-disabled-text-color: var(--text-disabled-color);
--select-hero-success-left-background-color: var(--color-success-400);
--select-hero-success-right-background-color: var(--color-success-default);
--select-hero-success-icon-color: var(--text-control-color);
--select-hero-success-text-color: var(--text-control-color);
--select-hero-success-placeholder-text-color: var(--text-control-color);
--select-hero-success-focus-left-background-color: var(--color-success-500);
--select-hero-success-focus-right-background-color: var(--color-success-focus);
--select-hero-success-hover-left-background-color: var(--color-success-300);
--select-hero-success-hover-right-background-color: var(--color-success-hover);
--select-hero-success-disabled-background-color: var(--background-basic-color-2);
--select-hero-success-disabled-icon-color: var(--text-disabled-color);
--select-hero-success-disabled-text-color: var(--text-disabled-color);
--select-hero-info-left-background-color: var(--color-info-400);
--select-hero-info-right-background-color: var(--color-info-default);
--select-hero-info-icon-color: var(--text-control-color);
--select-hero-info-text-color: var(--text-control-color);
--select-hero-info-placeholder-text-color: var(--text-control-color);
--select-hero-info-focus-left-background-color: var(--color-info-500);
--select-hero-info-focus-right-background-color: var(--color-info-focus);
--select-hero-info-hover-left-background-color: var(--color-info-300);
--select-hero-info-hover-right-background-color: var(--color-info-hover);
--select-hero-info-disabled-background-color: var(--background-basic-color-2);
--select-hero-info-disabled-icon-color: var(--text-disabled-color);
--select-hero-info-disabled-text-color: var(--text-disabled-color);
--select-hero-warning-left-background-color: var(--color-warning-400);
--select-hero-warning-right-background-color: var(--color-warning-default);
--select-hero-warning-icon-color: var(--text-control-color);
--select-hero-warning-text-color: var(--text-control-color);
--select-hero-warning-placeholder-text-color: var(--text-control-color);
--select-hero-warning-focus-left-background-color: var(--color-warning-500);
--select-hero-warning-focus-right-background-color: var(--color-warning-focus);
--select-hero-warning-hover-left-background-color: var(--color-warning-300);
--select-hero-warning-hover-right-background-color: var(--color-warning-hover);
--select-hero-warning-disabled-background-color: var(--background-basic-color-2);
--select-hero-warning-disabled-icon-color: var(--text-disabled-color);
--select-hero-warning-disabled-text-color: var(--text-disabled-color);
--select-hero-danger-left-background-color: var(--color-danger-400);
--select-hero-danger-right-background-color: var(--color-danger-default);
--select-hero-danger-icon-color: var(--text-control-color);
--select-hero-danger-text-color: var(--text-control-color);
--select-hero-danger-placeholder-text-color: var(--text-control-color);
--select-hero-danger-focus-left-background-color: var(--color-danger-500);
--select-hero-danger-focus-right-background-color: var(--color-danger-focus);
--select-hero-danger-hover-left-background-color: var(--color-danger-300);
--select-hero-danger-hover-right-background-color: var(--color-danger-hover);
--select-hero-danger-disabled-background-color: var(--background-basic-color-2);
--select-hero-danger-disabled-icon-color: var(--text-disabled-color);
--select-hero-danger-disabled-text-color: var(--text-disabled-color);
--select-hero-control-left-background-color: var(--color-control-default);
--select-hero-control-right-background-color: var(--color-control-default);
--select-hero-control-icon-color: var(--color-basic-800);
--select-hero-control-text-color: var(--color-basic-800);
--select-hero-control-placeholder-text-color: var(--text-hint-color);
--select-hero-control-focus-left-background-color: var(--color-basic-200);
--select-hero-control-focus-right-background-color: var(--color-control-focus);
--select-hero-control-hover-left-background-color: var(--color-basic-100);
--select-hero-control-hover-right-background-color: var(--color-control-hover);
--select-hero-control-disabled-background-color: var(--background-basic-color-2);
--select-hero-control-disabled-icon-color: var(--text-disabled-color);
--select-hero-control-disabled-text-color: var(--text-disabled-color);
--datepicker-background-color: var(--background-basic-color-1);
--datepicker-border-color: var(--border-basic-color-4);
--datepicker-border-style: solid;
--datepicker-border-width: 0.0625rem;
--datepicker-border-radius: var(--border-radius);
--datepicker-shadow: none;
--timepicker-cell-text-color: var(--text-basic-color);
--timepicker-cell-hover-background-color: var(--background-basic-color-2);
--timepicker-cell-hover-text-color: var(--text-basic-color);
--timepicker-cell-focus-background-color: var(--color-basic-focus);
--timepicker-cell-focus-text-color: var(--text-basic-color);
--timepicker-cell-active-background-color: var(--color-primary-default);
--timepicker-cell-active-text-color: var(--text-control-color);
--timepicker-cell-text-font-size: var(--text-subtitle-font-size);
--timepicker-cell-text-font-family: var(--text-subtitle-font-family);
--timepicker-cell-text-line-height: var(--text-subtitle-line-height);
--timepicker-cell-text-font-weight: var(--text-subtitle-font-weight);
--timepicker-cell-height: 2.75rem;
--timepicker-header-cell-text-color: var(--text-hint-color);
--timepicker-header-cell-text-font-size: var(--text-subtitle-font-size);
--timepicker-header-cell-text-font-family: var(--text-subtitle-font-family);
--timepicker-header-cell-height: 2.75rem;
--timepicker-header-cell-text-line-height: var(--text-subtitle-line-height);
--timepicker-header-cell-text-font-weight: var(--text-subtitle-font-weight);
--timepicker-border-color: var(--datepicker-border-color);
--timepicker-border-style: var(--datepicker-border-style);
--timepicker-border-width: var(--datepicker-border-width);
--timepicker-scrollbar-color: var(--scrollbar-color);
--timepicker-scrollbar-background-color: var(--scrollbar-background-color);
--timepicker-scrollbar-width: var(--scrollbar-width);
--timepicker-single-column-width: 5rem;
--timepicker-multiple-column-width: 13.875rem;
--timepicker-title-height: 3.75rem;
--timepicker-title-padding: var(--text-paragraph-line-height);
--timepicker-container-width: 20rem;
--timepicker-container-height: 26.1875rem;
--radio-width: 1.25rem;
--radio-height: 1.25rem;
--radio-border-style: solid;
--radio-border-width: 1px;
--radio-text-font-family: var(--text-subtitle-2-font-family);
--radio-text-font-size: var(--text-subtitle-2-font-size);
--radio-text-font-weight: var(--text-subtitle-2-font-weight);
--radio-text-line-height: var(--text-subtitle-2-line-height);
--radio-outline-color: var(--outline-color);
--radio-outline-width: var(--outline-width);
--radio-basic-text-color: var(--text-basic-color);
--radio-basic-border-color: var(--color-basic-transparent-default-border);
--radio-basic-background-color: var(--color-basic-transparent-default);
--radio-basic-checked-background-color: transparent;
--radio-basic-checked-border-color: var(--color-primary-default-border);
--radio-basic-inner-circle-color: var(--color-primary-default);
--radio-basic-focus-border-color: var(--color-primary-transparent-focus-border);
--radio-basic-focus-background-color: var(--color-primary-transparent-focus);
--radio-basic-focus-checked-background-color: transparent;
--radio-basic-focus-checked-border-color: var(--color-primary-focus-border);
--radio-basic-focus-inner-circle-color: var(--color-primary-focus);
--radio-basic-hover-background-color: var(--color-primary-transparent-hover);
--radio-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--radio-basic-hover-inner-circle-color: var(--color-primary-hover);
--radio-basic-hover-checked-background-color: transparent;
--radio-basic-hover-checked-border-color: var(--color-primary-hover-border);
--radio-basic-active-background-color: var(--color-primary-transparent-active);
--radio-basic-active-border-color: var(--color-primary-transparent-active-border);
--radio-basic-active-inner-circle-color: var(--color-primary-active);
--radio-basic-active-checked-background-color: transparent;
--radio-basic-active-checked-border-color: var(--color-primary-active-border);
--radio-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-basic-disabled-text-color: var(--text-disabled-color);
--radio-basic-disabled-checked-background-color: transparent;
--radio-basic-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-basic-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-primary-text-color: var(--text-basic-color);
--radio-primary-border-color: var(--color-primary-transparent-default-border);
--radio-primary-background-color: var(--color-primary-transparent-default);
--radio-primary-checked-background-color: transparent;
--radio-primary-checked-border-color: var(--color-primary-default-border);
--radio-primary-inner-circle-color: var(--color-primary-default);
--radio-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--radio-primary-focus-background-color: var(--color-primary-transparent-focus);
--radio-primary-focus-checked-background-color: transparent;
--radio-primary-focus-checked-border-color: var(--color-primary-focus-border);
--radio-primary-focus-inner-circle-color: var(--color-primary-focus);
--radio-primary-hover-background-color: var(--color-primary-transparent-hover);
--radio-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--radio-primary-hover-inner-circle-color: var(--color-primary-hover);
--radio-primary-hover-checked-background-color: transparent;
--radio-primary-hover-checked-border-color: var(--color-primary-hover-border);
--radio-primary-active-border-color: var(--color-primary-transparent-active-border);
--radio-primary-active-background-color: var(--color-primary-transparent-active);
--radio-primary-active-checked-background-color: transparent;
--radio-primary-active-checked-border-color: var(--color-primary-active-border);
--radio-primary-active-inner-circle-color: var(--color-primary-active);
--radio-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-primary-disabled-text-color: var(--text-disabled-color);
--radio-primary-disabled-checked-background-color: transparent;
--radio-primary-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-primary-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-success-text-color: var(--text-basic-color);
--radio-success-border-color: var(--color-success-transparent-default-border);
--radio-success-background-color: var(--color-success-transparent-default);
--radio-success-checked-background-color: transparent;
--radio-success-checked-border-color: var(--color-success-default-border);
--radio-success-inner-circle-color: var(--color-success-default);
--radio-success-focus-border-color: var(--color-success-transparent-focus-border);
--radio-success-focus-background-color: var(--color-success-transparent-focus);
--radio-success-focus-checked-background-color: transparent;
--radio-success-focus-checked-border-color: var(--color-success-focus-border);
--radio-success-focus-inner-circle-color: var(--color-success-focus);
--radio-success-hover-background-color: var(--color-success-transparent-hover);
--radio-success-hover-border-color: var(--color-success-transparent-hover-border);
--radio-success-hover-inner-circle-color: var(--color-success-hover);
--radio-success-hover-checked-background-color: transparent;
--radio-success-hover-checked-border-color: var(--color-success-hover-border);
--radio-success-active-background-color: var(--color-success-transparent-active);
--radio-success-active-border-color: var(--color-success-transparent-active-border);
--radio-success-active-checked-background-color: transparent;
--radio-success-active-checked-border-color: var(--color-success-active-border);
--radio-success-active-inner-circle-color: var(--color-success-active);
--radio-success-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-success-disabled-text-color: var(--text-disabled-color);
--radio-success-disabled-checked-background-color: transparent;
--radio-success-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-success-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-info-text-color: var(--text-basic-color);
--radio-info-border-color: var(--color-info-transparent-default-border);
--radio-info-background-color: var(--color-info-transparent-default);
--radio-info-checked-background-color: transparent;
--radio-info-checked-border-color: var(--color-info-default-border);
--radio-info-inner-circle-color: var(--color-info-default);
--radio-info-focus-background-color: var(--color-info-transparent-focus);
--radio-info-focus-border-color: var(--color-info-transparent-focus-border);
--radio-info-focus-checked-background-color: transparent;
--radio-info-focus-checked-border-color: var(--color-info-focus-border);
--radio-info-focus-inner-circle-color: var(--color-info-focus);
--radio-info-hover-background-color: var(--color-info-transparent-hover);
--radio-info-hover-border-color: var(--color-info-transparent-hover-border);
--radio-info-hover-inner-circle-color: var(--color-info-hover);
--radio-info-hover-checked-background-color: transparent;
--radio-info-hover-checked-border-color: var(--color-info-hover-border);
--radio-info-active-background-color: var(--color-info-transparent-active);
--radio-info-active-border-color: var(--color-info-transparent-active-border);
--radio-info-active-checked-background-color: transparent;
--radio-info-active-checked-border-color: var(--color-info-active-border);
--radio-info-active-inner-circle-color: var(--color-info-active);
--radio-info-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-info-disabled-text-color: var(--text-disabled-color);
--radio-info-disabled-checked-background-color: transparent;
--radio-info-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-info-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-warning-text-color: var(--text-basic-color);
--radio-warning-border-color: var(--color-warning-transparent-default-border);
--radio-warning-background-color: var(--color-warning-transparent-default);
--radio-warning-checked-background-color: transparent;
--radio-warning-checked-border-color: var(--color-warning-default-border);
--radio-warning-inner-circle-color: var(--color-warning-default);
--radio-warning-focus-background-color: var(--color-warning-transparent-focus);
--radio-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--radio-warning-focus-checked-background-color: transparent;
--radio-warning-focus-checked-border-color: var(--color-warning-focus-border);
--radio-warning-focus-inner-circle-color: var(--color-warning-focus);
--radio-warning-hover-background-color: var(--color-warning-transparent-hover);
--radio-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--radio-warning-hover-inner-circle-color: var(--color-warning-hover);
--radio-warning-hover-checked-background-color: transparent;
--radio-warning-hover-checked-border-color: var(--color-warning-hover-border);
--radio-warning-active-background-color: var(--color-warning-transparent-active);
--radio-warning-active-border-color: var(--color-warning-transparent-active-border);
--radio-warning-active-checked-background-color: transparent;
--radio-warning-active-checked-border-color: var(--color-warning-active-border);
--radio-warning-active-inner-circle-color: var(--color-warning-active);
--radio-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-warning-disabled-text-color: var(--text-disabled-color);
--radio-warning-disabled-checked-background-color: transparent;
--radio-warning-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-warning-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-danger-text-color: var(--text-basic-color);
--radio-danger-border-color: var(--color-danger-transparent-default-border);
--radio-danger-background-color: var(--color-danger-transparent-default);
--radio-danger-checked-background-color: transparent;
--radio-danger-checked-border-color: var(--color-danger-default-border);
--radio-danger-inner-circle-color: var(--color-danger-default);
--radio-danger-focus-background-color: var(--color-danger-transparent-focus);
--radio-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--radio-danger-focus-checked-background-color: transparent;
--radio-danger-focus-checked-border-color: var(--color-danger-focus-border);
--radio-danger-focus-inner-circle-color: var(--color-danger-focus);
--radio-danger-hover-background-color: var(--color-danger-transparent-hover);
--radio-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--radio-danger-hover-inner-circle-color: var(--color-danger-hover);
--radio-danger-hover-checked-background-color: transparent;
--radio-danger-hover-checked-border-color: var(--color-danger-hover-border);
--radio-danger-active-background-color: var(--color-danger-transparent-active);
--radio-danger-active-border-color: var(--color-danger-transparent-active-border);
--radio-danger-active-checked-background-color: transparent;
--radio-danger-active-checked-border-color: var(--color-danger-active-border);
--radio-danger-active-inner-circle-color: var(--color-danger-active);
--radio-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-danger-disabled-text-color: var(--text-disabled-color);
--radio-danger-disabled-checked-background-color: transparent;
--radio-danger-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-danger-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-control-text-color: var(--text-control-color);
--radio-control-background-color: var(--color-control-transparent-default);
--radio-control-border-color: var(--color-control-transparent-default-border);
--radio-control-checked-background-color: transparent;
--radio-control-checked-border-color: var(--color-control-default-border);
--radio-control-inner-circle-color: var(--color-control-default);
--radio-control-focus-background-color: var(--color-control-transparent-focus);
--radio-control-focus-border-color: var(--color-control-transparent-focus-border);
--radio-control-focus-checked-background-color: transparent;
--radio-control-focus-checked-border-color: var(--color-control-focus-border);
--radio-control-focus-inner-circle-color: var(--color-control-focus);
--radio-control-hover-background-color: var(--color-control-transparent-hover);
--radio-control-hover-border-color: var(--color-control-transparent-hover-border);
--radio-control-hover-inner-circle-color: var(--color-control-hover);
--radio-control-hover-checked-background-color: transparent;
--radio-control-hover-checked-border-color: var(--color-control-hover-border);
--radio-control-active-background-color: var(--color-control-transparent-active);
--radio-control-active-border-color: var(--color-control-transparent-active-border);
--radio-control-active-checked-background-color: transparent;
--radio-control-active-checked-border-color: var(--color-control-active-border);
--radio-control-active-inner-circle-color: var(--color-control-active);
--radio-control-disabled-background-color: var(--color-control-transparent-disabled);
--radio-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--radio-control-disabled-text-color: var(--color-basic-100);
--radio-control-disabled-checked-background-color: transparent;
--radio-control-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-control-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--tree-grid-cell-border-width: 1px;
--tree-grid-cell-border-style: solid;
--tree-grid-cell-border-color: var(--border-basic-color-2);
--tree-grid-row-min-height: 2rem;
--tree-grid-cell-padding: 0.875rem 1.25rem;
--tree-grid-header-background-color: var(--background-basic-color-1);
--tree-grid-header-text-color: var(--text-basic-color);
--tree-grid-header-text-font-family: var(--text-subtitle-font-family);
--tree-grid-header-text-font-size: var(--text-subtitle-font-size);
--tree-grid-header-text-font-weight: var(--text-subtitle-font-weight);
--tree-grid-header-text-line-height: var(--text-subtitle-line-height);
--tree-grid-footer-background-color: var(--background-basic-color-1);
--tree-grid-footer-text-color: var(--text-basic-color);
--tree-grid-footer-text-font-family: var(--tree-grid-header-text-font-family);
--tree-grid-footer-text-font-size: var(--tree-grid-header-text-font-size);
--tree-grid-footer-text-font-weight: var(--tree-grid-header-text-font-weight);
--tree-grid-footer-text-line-height: var(--tree-grid-header-text-line-height);
--tree-grid-row-background-color: var(--background-basic-color-1);
--tree-grid-row-even-background-color: var(--background-basic-color-1);
--tree-grid-row-hover-background-color: var(--background-basic-color-1);
--tree-grid-row-text-color: var(--text-basic-color);
--tree-grid-row-text-font-family: var(--text-paragraph-font-family);
--tree-grid-row-text-font-size: var(--text-paragraph-font-size);
--tree-grid-row-text-font-weight: var(--text-paragraph-font-weight);
--tree-grid-row-text-line-height: var(--text-paragraph-line-height);
--tree-grid-sort-header-button-background-color: transparent;
--tree-grid-sort-header-button-border: none;
--tree-grid-sort-header-button-padding: 0;
--icon-font-size: 1.25rem;
--icon-line-height: 1;
--icon-width: 1em;
--icon-height: 1em;
--icon-svg-vertical-align: top;
--icon-basic-color: var(--text-hint-color);
--icon-primary-color: var(--color-primary-default);
--icon-info-color: var(--color-info-default);
--icon-success-color: var(--color-success-default);
--icon-warning-color: var(--color-warning-default);
--icon-danger-color: var(--color-danger-default);
--icon-control-color: var(--color-basic-100);
--tag-text-font-family: var(--text-subtitle-font-family);
--tag-text-transform: capitalize;
--tag-border-width: 0.0625rem;
--tag-border-style: solid;
--tag-border-radius: 1.5rem;
--tag-tiny-text-font-size: var(--input-tiny-text-font-size);
--tag-tiny-text-font-weight: var(--input-tiny-text-font-weight);
--tag-tiny-text-line-height: var(--input-tiny-text-line-height);
--tag-tiny-padding: 0.0625rem 0.9375rem;
--tag-tiny-close-offset: 0.625rem;
--tag-small-text-font-size: var(--input-small-text-font-size);
--tag-small-text-font-weight: var(--input-small-text-font-weight);
--tag-small-text-line-height: var(--input-small-text-line-height);
--tag-small-padding: 0.0625rem 0.9375rem;
--tag-small-close-offset: 0.625rem;
--tag-medium-text-font-size: var(--input-medium-text-font-size);
--tag-medium-text-font-weight: var(--input-medium-text-font-weight);
--tag-medium-text-line-height: var(--input-medium-text-line-height);
--tag-medium-padding: 0.1875rem 0.9375rem;
--tag-medium-close-offset: 0.625rem;
--tag-large-text-font-size: var(--input-large-text-font-size);
--tag-large-text-font-weight: var(--input-large-text-font-weight);
--tag-large-text-line-height: var(--input-large-text-line-height);
--tag-large-padding: 0.3125rem 0.9375rem;
--tag-large-close-offset: 0.625rem;
--tag-giant-text-font-size: var(--input-giant-text-font-size);
--tag-giant-text-font-weight: var(--input-giant-text-font-weight);
--tag-giant-text-line-height: var(--input-giant-text-line-height);
--tag-giant-padding: 0.4375rem 0.9375rem;
--tag-giant-close-offset: 0.625rem;
--tag-filled-basic-background-color: var(--color-basic-default);
--tag-filled-basic-border-color: var(--color-basic-default-border);
--tag-filled-basic-text-color: var(--color-basic-800);
--tag-filled-basic-active-background-color: var(--color-basic-focus);
--tag-filled-basic-active-border-color: var(--color-basic-focus-border);
--tag-filled-basic-hover-background-color: var(--color-basic-hover);
--tag-filled-basic-hover-border-color: var(--color-basic-hover-border);
--tag-filled-basic-selected-background-color: color-basic-actove;
--tag-filled-basic-selected-border-color: var(--color-basic-active-border);
--tag-filled-primary-background-color: var(--color-primary-default);
--tag-filled-primary-border-color: var(--color-primary-default-border);
--tag-filled-primary-text-color: var(--text-control-color);
--tag-filled-primary-active-background-color: var(--color-primary-focus);
--tag-filled-primary-active-border-color: var(--color-primary-focus-border);
--tag-filled-primary-hover-background-color: var(--color-primary-hover);
--tag-filled-primary-hover-border-color: var(--color-primary-hover-border);
--tag-filled-primary-selected-background-color: color-primary-actove;
--tag-filled-primary-selected-border-color: var(--color-primary-active-border);
--tag-filled-success-background-color: var(--color-success-default);
--tag-filled-success-border-color: var(--color-success-default-border);
--tag-filled-success-text-color: var(--text-control-color);
--tag-filled-success-active-background-color: var(--color-success-focus);
--tag-filled-success-active-border-color: var(--color-success-focus-border);
--tag-filled-success-hover-background-color: var(--color-success-hover);
--tag-filled-success-hover-border-color: var(--color-success-hover-border);
--tag-filled-success-selected-background-color: color-success-actove;
--tag-filled-success-selected-border-color: var(--color-success-active-border);
--tag-filled-info-background-color: var(--color-info-default);
--tag-filled-info-border-color: var(--color-info-default-border);
--tag-filled-info-text-color: var(--text-control-color);
--tag-filled-info-active-background-color: var(--color-info-focus);
--tag-filled-info-active-border-color: var(--color-info-focus-border);
--tag-filled-info-hover-background-color: var(--color-info-hover);
--tag-filled-info-hover-border-color: var(--color-info-hover-border);
--tag-filled-info-selected-background-color: color-info-actove;
--tag-filled-info-selected-border-color: var(--color-info-active-border);
--tag-filled-warning-background-color: var(--color-warning-default);
--tag-filled-warning-border-color: var(--color-warning-default-border);
--tag-filled-warning-text-color: var(--text-control-color);
--tag-filled-warning-active-background-color: var(--color-warning-focus);
--tag-filled-warning-active-border-color: var(--color-warning-focus-border);
--tag-filled-warning-hover-background-color: var(--color-warning-hover);
--tag-filled-warning-hover-border-color: var(--color-warning-hover-border);
--tag-filled-warning-selected-background-color: color-warning-actove;
--tag-filled-warning-selected-border-color: var(--color-warning-active-border);
--tag-filled-danger-background-color: var(--color-danger-default);
--tag-filled-danger-border-color: var(--color-danger-default-border);
--tag-filled-danger-text-color: var(--text-control-color);
--tag-filled-danger-active-background-color: var(--color-danger-focus);
--tag-filled-danger-active-border-color: var(--color-danger-focus-border);
--tag-filled-danger-hover-background-color: var(--color-danger-hover);
--tag-filled-danger-hover-border-color: var(--color-danger-hover-border);
--tag-filled-danger-selected-background-color: color-danger-actove;
--tag-filled-danger-selected-border-color: var(--color-danger-active-border);
--tag-filled-control-background-color: var(--color-control-default);
--tag-filled-control-border-color: var(--color-control-default-border);
--tag-filled-control-text-color: var(--color-basic-800);
--tag-filled-control-active-background-color: var(--color-control-hover);
--tag-filled-control-active-border-color: var(--color-control-hover-border);
--tag-filled-control-hover-background-color: var(--color-control-focus);
--tag-filled-control-hover-border-color: var(--color-control-focus-border);
--tag-filled-control-selected-background-color: color-control-actove;
--tag-filled-control-selected-border-color: var(--color-control-active-border);
--tag-outline-basic-background-color: var(--color-basic-transparent-default);
--tag-outline-basic-border-color: var(--color-basic-transparent-default-border);
--tag-outline-basic-text-color: var(--text-hint-color);
--tag-outline-basic-active-background-color: var(--color-basic-transparent-focus);
--tag-outline-basic-active-border-color: var(--color-basic-transparent-focus-border);
--tag-outline-basic-active-text-color: var(--text-hint-color);
--tag-outline-basic-hover-background-color: var(--color-basic-transparent-hover);
--tag-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border);
--tag-outline-basic-hover-text-color: var(--text-hint-color);
--tag-outline-basic-selected-background-color: var(--color-basic-transparent-active);
--tag-outline-basic-selected-border-color: var(--color-basic-transparent-active-border);
--tag-outline-basic-selected-text-color: var(--text-hint-color);
--tag-outline-primary-background-color: var(--color-primary-transparent-default);
--tag-outline-primary-border-color: var(--color-primary-transparent-default-border);
--tag-outline-primary-text-color: var(--text-primary-color);
--tag-outline-primary-active-background-color: var(--color-primary-transparent-focus);
--tag-outline-primary-active-border-color: var(--color-primary-transparent-focus-border);
--tag-outline-primary-active-text-color: var(--text-primary-color);
--tag-outline-primary-hover-background-color: var(--color-primary-transparent-hover);
--tag-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--tag-outline-primary-hover-text-color: var(--text-primary-color);
--tag-outline-primary-selected-background-color: var(--color-primary-transparent-active);
--tag-outline-primary-selected-border-color: var(--color-primary-transparent-active-border);
--tag-outline-primary-selected-text-color: var(--text-primary-color);
--tag-outline-success-background-color: var(--color-success-transparent-default);
--tag-outline-success-border-color: var(--color-success-transparent-default-border);
--tag-outline-success-text-color: var(--text-success-color);
--tag-outline-success-active-background-color: var(--color-success-transparent-focus);
--tag-outline-success-active-border-color: var(--color-success-transparent-focus-border);
--tag-outline-success-active-text-color: var(--text-success-color);
--tag-outline-success-hover-background-color: var(--color-success-transparent-hover);
--tag-outline-success-hover-border-color: var(--color-success-transparent-hover-border);
--tag-outline-success-hover-text-color: var(--text-success-color);
--tag-outline-success-selected-background-color: var(--color-success-transparent-active);
--tag-outline-success-selected-border-color: var(--color-success-transparent-active-border);
--tag-outline-success-selected-text-color: var(--text-success-color);
--tag-outline-info-background-color: var(--color-info-transparent-default);
--tag-outline-info-border-color: var(--color-info-transparent-default-border);
--tag-outline-info-text-color: var(--text-info-color);
--tag-outline-info-active-background-color: var(--color-info-transparent-focus);
--tag-outline-info-active-border-color: var(--color-info-transparent-focus-border);
--tag-outline-info-active-text-color: var(--text-info-color);
--tag-outline-info-hover-background-color: var(--color-info-transparent-hover);
--tag-outline-info-hover-border-color: var(--color-info-transparent-hover-border);
--tag-outline-info-hover-text-color: var(--text-info-color);
--tag-outline-info-selected-background-color: var(--color-info-transparent-active);
--tag-outline-info-selected-border-color: var(--color-info-transparent-active-border);
--tag-outline-info-selected-text-color: var(--text-info-color);
--tag-outline-warning-background-color: var(--color-warning-transparent-default);
--tag-outline-warning-border-color: var(--color-warning-transparent-default-border);
--tag-outline-warning-text-color: var(--text-warning-color);
--tag-outline-warning-active-background-color: var(--color-warning-transparent-focus);
--tag-outline-warning-active-border-color: var(--color-warning-transparent-focus-border);
--tag-outline-warning-active-text-color: var(--text-warning-color);
--tag-outline-warning-hover-background-color: var(--color-warning-transparent-hover);
--tag-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--tag-outline-warning-hover-text-color: var(--text-warning-color);
--tag-outline-warning-selected-background-color: var(--color-warning-transparent-active);
--tag-outline-warning-selected-border-color: var(--color-warning-transparent-active-border);
--tag-outline-warning-selected-text-color: var(--text-warning-color);
--tag-outline-danger-background-color: var(--color-danger-transparent-default);
--tag-outline-danger-border-color: var(--color-danger-transparent-default-border);
--tag-outline-danger-text-color: var(--text-danger-color);
--tag-outline-danger-active-background-color: var(--color-danger-transparent-focus);
--tag-outline-danger-active-border-color: var(--color-danger-transparent-focus-border);
--tag-outline-danger-active-text-color: var(--text-danger-color);
--tag-outline-danger-hover-background-color: var(--color-danger-transparent-hover);
--tag-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--tag-outline-danger-hover-text-color: var(--text-danger-color);
--tag-outline-danger-selected-background-color: var(--color-danger-transparent-active);
--tag-outline-danger-selected-border-color: var(--color-danger-transparent-active-border);
--tag-outline-danger-selected-text-color: var(--text-danger-color);
--tag-outline-control-background-color: var(--color-control-transparent-default);
--tag-outline-control-border-color: var(--color-control-transparent-default-border);
--tag-outline-control-text-color: var(--text-control-color);
--tag-outline-control-active-background-color: var(--color-control-transparent-focus);
--tag-outline-control-active-border-color: var(--color-control-transparent-focus-border);
--tag-outline-control-active-text-color: var(--text-control-color);
--tag-outline-control-hover-background-color: var(--color-control-transparent-hover);
--tag-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--tag-outline-control-hover-text-color: var(--text-control-color);
--tag-outline-control-selected-background-color: var(--color-control-transparent-active);
--tag-outline-control-selected-border-color: var(--color-control-transparent-active-border);
--tag-outline-control-selected-text-color: var(--text-control-color);
--tag-list-tiny-tag-offset: 0.0625rem;
--tag-list-small-tag-offset: 0.125rem;
--tag-list-medium-tag-offset: 0.25rem;
--tag-list-large-tag-offset: 0.375rem;
--tag-list-giant-tag-offset: 0.5rem;
--tag-list-with-input-tiny-padding: 0.0625rem 1rem;
--tag-list-with-input-small-padding: 0.0625rem 1rem;
--tag-list-with-input-medium-padding: 0.1875rem 1rem;
--tag-list-with-input-large-padding: 0.3125rem 1rem;
--tag-list-with-input-giant-padding: 0.4375rem 1rem;
--tag-list-with-input-rectangle-border-radius: var(--input-rectangle-border-radius);
--tag-list-with-input-semi-round-border-radius: var(--input-semi-round-border-radius);
--tag-list-with-input-round-border-radius: var(--input-round-border-radius);
--tag-input-min-width: 6rem;
--tag-input-text-font-family: var(--input-text-font-family);
--tag-input-placeholder-text-font-family: var(--input-placeholder-text-font-family);
--tag-input-basic-background-color: var(--input-basic-background-color);
--tag-input-basic-border-color: var(--input-basic-border-color);
--tag-input-basic-text-color: var(--input-basic-text-color);
--tag-input-basic-placeholder-text-color: var(--input-basic-placeholder-text-color);
--tag-input-basic-focus-background-color: var(--input-basic-focus-background-color);
--tag-input-basic-focus-border-color: var(--input-basic-focus-border-color);
--tag-input-basic-disabled-text-color: var(--input-basic-disabled-text-color);
--tag-input-basic-disabled-placeholder-text-color: var(--input-basic-disabled-placeholder-text-color);
--tag-input-primary-background-color: var(--input-primary-background-color);
--tag-input-primary-border-color: var(--input-primary-border-color);
--tag-input-primary-text-color: var(--input-primary-text-color);
--tag-input-primary-placeholder-text-color: var(--input-primary-placeholder-text-color);
--tag-input-primary-focus-background-color: var(--input-primary-focus-background-color);
--tag-input-primary-focus-border-color: var(--input-primary-focus-border-color);
--tag-input-primary-disabled-text-color: var(--input-primary-disabled-text-color);
--tag-input-primary-disabled-placeholder-text-color: var(--input-primary-disabled-placeholder-text-color);
--tag-input-success-background-color: var(--input-success-background-color);
--tag-input-success-border-color: var(--input-success-border-color);
--tag-input-success-text-color: var(--input-success-text-color);
--tag-input-success-placeholder-text-color: var(--input-success-placeholder-text-color);
--tag-input-success-focus-background-color: var(--input-success-focus-background-color);
--tag-input-success-focus-border-color: var(--input-success-focus-border-color);
--tag-input-success-disabled-text-color: var(--input-success-disabled-text-color);
--tag-input-success-disabled-placeholder-text-color: var(--input-success-disabled-placeholder-text-color);
--tag-input-info-background-color: var(--input-info-background-color);
--tag-input-info-border-color: var(--input-info-border-color);
--tag-input-info-text-color: var(--input-info-text-color);
--tag-input-info-placeholder-text-color: var(--input-info-placeholder-text-color);
--tag-input-info-focus-background-color: var(--input-info-focus-background-color);
--tag-input-info-focus-border-color: var(--input-info-focus-border-color);
--tag-input-info-disabled-text-color: var(--input-info-disabled-text-color);
--tag-input-info-disabled-placeholder-text-color: var(--input-info-disabled-placeholder-text-color);
--tag-input-warning-background-color: var(--input-warning-background-color);
--tag-input-warning-border-color: var(--input-warning-border-color);
--tag-input-warning-text-color: var(--input-warning-text-color);
--tag-input-warning-placeholder-text-color: var(--input-warning-placeholder-text-color);
--tag-input-warning-focus-background-color: var(--input-warning-focus-background-color);
--tag-input-warning-focus-border-color: var(--input-warning-focus-border-color);
--tag-input-warning-disabled-text-color: var(--input-warning-disabled-text-color);
--tag-input-warning-disabled-placeholder-text-color: var(--input-warning-disabled-placeholder-text-color);
--tag-input-danger-background-color: var(--input-danger-background-color);
--tag-input-danger-border-color: var(--input-danger-border-color);
--tag-input-danger-text-color: var(--input-danger-text-color);
--tag-input-danger-placeholder-text-color: var(--input-danger-placeholder-text-color);
--tag-input-danger-focus-background-color: var(--input-danger-focus-background-color);
--tag-input-danger-focus-border-color: var(--input-danger-focus-border-color);
--tag-input-danger-disabled-text-color: var(--input-danger-disabled-text-color);
--tag-input-danger-disabled-placeholder-text-color: var(--input-danger-disabled-placeholder-text-color);
--tag-input-control-background-color: var(--input-control-background-color);
--tag-input-control-border-color: var(--input-control-border-color);
--tag-input-control-text-color: var(--input-control-text-color);
--tag-input-control-placeholder-text-color: var(--input-control-placeholder-text-color);
--tag-input-control-focus-background-color: var(--input-control-focus-background-color);
--tag-input-control-focus-border-color: var(--input-control-focus-border-color);
--tag-input-control-disabled-text-color: var(--input-control-disabled-text-color);
--tag-input-control-disabled-placeholder-text-color: var(--input-control-disabled-placeholder-text-color);
--tag-input-tiny-text-font-size: var(--input-tiny-text-font-size);
--tag-input-tiny-text-font-weight: var(--input-tiny-text-font-weight);
--tag-input-tiny-text-line-height: var(--input-tiny-text-line-height);
--tag-input-tiny-placeholder-text-font-size: var(--input-tiny-placeholder-text-font-size);
--tag-input-tiny-placeholder-text-font-weight: var(--input-tiny-placeholder-text-font-weight);
--tag-input-tiny-placeholder-text-line-height: var(--input-tiny-placeholder-text-line-height);
--tag-input-tiny-padding: 0.125rem 0;
--tag-input-small-text-font-size: var(--input-small-text-font-size);
--tag-input-small-text-font-weight: var(--input-small-text-font-weight);
--tag-input-small-text-line-height: var(--input-small-text-line-height);
--tag-input-small-placeholder-text-font-size: var(--input-small-placeholder-text-font-size);
--tag-input-small-placeholder-text-font-weight: var(--input-small-placeholder-text-font-weight);
--tag-input-small-placeholder-text-line-height: var(--input-small-placeholder-text-line-height);
--tag-input-small-padding: 0.125rem 0;
--tag-input-medium-text-font-size: var(--input-medium-text-font-size);
--tag-input-medium-text-font-weight: var(--input-medium-text-font-weight);
--tag-input-medium-text-line-height: var(--input-medium-text-line-height);
--tag-input-medium-placeholder-text-font-size: var(--input-medium-placeholder-text-font-size);
--tag-input-medium-placeholder-text-font-weight: var(--input-medium-placeholder-text-font-weight);
--tag-input-medium-placeholder-text-line-height: var(--input-medium-placeholder-text-line-height);
--tag-input-medium-padding: 0.25rem 0;
--tag-input-large-text-font-size: var(--input-large-text-font-size);
--tag-input-large-text-font-weight: var(--input-large-text-font-weight);
--tag-input-large-text-line-height: var(--input-large-text-line-height);
--tag-input-large-placeholder-text-font-size: var(--input-large-placeholder-text-font-size);
--tag-input-large-placeholder-text-font-weight: var(--input-large-placeholder-text-font-weight);
--tag-input-large-placeholder-text-line-height: var(--input-large-placeholder-text-line-height);
--tag-input-large-padding: 0.375rem 0;
--tag-input-giant-text-font-size: var(--input-giant-text-font-size);
--tag-input-giant-text-font-weight: var(--input-giant-text-font-weight);
--tag-input-giant-text-line-height: var(--input-giant-text-line-height);
--tag-input-giant-placeholder-text-font-size: var(--input-giant-placeholder-text-font-size);
--tag-input-giant-placeholder-text-font-weight: var(--input-giant-placeholder-text-font-weight);
--tag-input-giant-placeholder-text-line-height: var(--input-giant-placeholder-text-line-height);
--tag-input-giant-padding: 0.5rem 0;
--toggle-height: 1.875rem;
--toggle-width: 3.125rem;
--toggle-border-width: 1px;
--toggle-border-radius: 100px;
--toggle-outline-width: var(--outline-width);
--toggle-outline-color: var(--outline-color);
--toggle-switcher-size: 1.75rem;
--toggle-switcher-icon-size: 0.75rem;
--toggle-text-font-family: var(--text-subtitle-2-font-family);
--toggle-text-font-size: var(--text-subtitle-2-font-size);
--toggle-text-font-weight: var(--text-subtitle-2-font-weight);
--toggle-text-line-height: var(--text-subtitle-2-line-height);
--toggle-cursor: pointer;
--toggle-disabled-cursor: default;
--toggle-basic-text-color: var(--text-basic-color);
--toggle-basic-background-color: var(--color-basic-transparent-default);
--toggle-basic-border-color: var(--color-basic-transparent-default-border);
--toggle-basic-checked-background-color: var(--color-primary-default);
--toggle-basic-checked-border-color: var(--color-primary-default-border);
--toggle-basic-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-basic-checked-switcher-checkmark-color: var(--color-primary-default);
--toggle-basic-focus-background-color: var(--color-primary-transparent-focus);
--toggle-basic-focus-border-color: var(--color-primary-transparent-focus-border);
--toggle-basic-focus-checked-background-color: var(--color-primary-focus);
--toggle-basic-focus-checked-border-color: var(--color-primary-focus-border);
--toggle-basic-hover-background-color: var(--color-primary-transparent-hover);
--toggle-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--toggle-basic-hover-checked-background-color: var(--color-primary-hover);
--toggle-basic-hover-checked-border-color: var(--color-primary-hover-border);
--toggle-basic-active-background-color: var(--color-primary-transparent-active);
--toggle-basic-active-border-color: var(--color-primary-transparent-active-border);
--toggle-basic-active-checked-background-color: var(--color-primary-active);
--toggle-basic-active-checked-border-color: var(--color-primary-active-border);
--toggle-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-basic-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-basic-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-basic-disabled-text-color: var(--text-disabled-color);
--toggle-primary-text-color: var(--text-basic-color);
--toggle-primary-background-color: var(--color-primary-transparent-default);
--toggle-primary-border-color: var(--color-primary-transparent-default-border);
--toggle-primary-checked-background-color: var(--color-primary-default);
--toggle-primary-checked-border-color: var(--color-primary-default-border);
--toggle-primary-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-primary-checked-switcher-checkmark-color: var(--color-primary-default);
--toggle-primary-focus-background-color: var(--color-primary-transparent-focus);
--toggle-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--toggle-primary-focus-checked-background-color: var(--color-primary-focus);
--toggle-primary-focus-checked-border-color: var(--color-primary-focus-border);
--toggle-primary-hover-background-color: var(--color-primary-transparent-hover);
--toggle-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--toggle-primary-hover-checked-background-color: var(--color-primary-hover);
--toggle-primary-hover-checked-border-color: var(--color-primary-hover-border);
--toggle-primary-active-background-color: var(--color-primary-transparent-active);
--toggle-primary-active-border-color: var(--color-primary-transparent-active-border);
--toggle-primary-active-checked-background-color: var(--color-primary-active);
--toggle-primary-active-checked-border-color: var(--color-primary-active-border);
--toggle-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-primary-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-primary-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-primary-disabled-text-color: var(--text-disabled-color);
--toggle-success-text-color: var(--text-basic-color);
--toggle-success-background-color: var(--color-success-transparent-default);
--toggle-success-border-color: var(--color-success-transparent-default-border);
--toggle-success-checked-background-color: var(--color-success-default);
--toggle-success-checked-border-color: var(--color-success-default-border);
--toggle-success-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-success-checked-switcher-checkmark-color: var(--color-success-default);
--toggle-success-focus-background-color: var(--color-success-transparent-focus);
--toggle-success-focus-border-color: var(--color-success-transparent-focus-border);
--toggle-success-focus-checked-background-color: var(--color-success-focus);
--toggle-success-focus-checked-border-color: var(--color-success-focus-border);
--toggle-success-hover-background-color: var(--color-success-transparent-hover);
--toggle-success-hover-border-color: var(--color-success-transparent-hover-border);
--toggle-success-hover-checked-background-color: var(--color-success-hover);
--toggle-success-hover-checked-border-color: var(--color-success-hover-border);
--toggle-success-active-background-color: var(--color-success-transparent-active);
--toggle-success-active-border-color: var(--color-success-transparent-active-border);
--toggle-success-active-checked-background-color: var(--color-success-active);
--toggle-success-active-checked-border-color: var(--color-success-active-border);
--toggle-success-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-success-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-success-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-success-disabled-text-color: var(--text-disabled-color);
--toggle-info-text-color: var(--text-basic-color);
--toggle-info-background-color: var(--color-info-transparent-default);
--toggle-info-border-color: var(--color-info-transparent-default-border);
--toggle-info-checked-background-color: var(--color-info-default);
--toggle-info-checked-border-color: var(--color-info-default-border);
--toggle-info-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-info-checked-switcher-checkmark-color: var(--color-info-default);
--toggle-info-focus-background-color: var(--color-info-transparent-focus);
--toggle-info-focus-border-color: var(--color-info-transparent-focus-border);
--toggle-info-focus-checked-background-color: var(--color-info-focus);
--toggle-info-focus-checked-border-color: var(--color-info-focus-border);
--toggle-info-hover-background-color: var(--color-info-transparent-hover);
--toggle-info-hover-border-color: var(--color-info-transparent-hover-border);
--toggle-info-hover-checked-background-color: var(--color-info-hover);
--toggle-info-hover-checked-border-color: var(--color-info-hover-border);
--toggle-info-active-background-color: var(--color-info-transparent-active);
--toggle-info-active-border-color: var(--color-info-transparent-active-border);
--toggle-info-active-checked-background-color: var(--color-info-active);
--toggle-info-active-checked-border-color: var(--color-info-active-border);
--toggle-info-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-info-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-info-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-info-disabled-text-color: var(--text-disabled-color);
--toggle-warning-text-color: var(--text-basic-color);
--toggle-warning-background-color: var(--color-warning-transparent-default);
--toggle-warning-border-color: var(--color-warning-transparent-default-border);
--toggle-warning-checked-background-color: var(--color-warning-default);
--toggle-warning-checked-border-color: var(--color-warning-default-border);
--toggle-warning-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-warning-checked-switcher-checkmark-color: var(--color-warning-default);
--toggle-warning-focus-background-color: var(--color-warning-transparent-focus);
--toggle-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--toggle-warning-focus-checked-background-color: var(--color-warning-focus);
--toggle-warning-focus-checked-border-color: var(--color-warning-focus-border);
--toggle-warning-hover-background-color: var(--color-warning-transparent-hover);
--toggle-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--toggle-warning-hover-checked-background-color: var(--color-warning-hover);
--toggle-warning-hover-checked-border-color: var(--color-warning-hover-border);
--toggle-warning-active-background-color: var(--color-warning-transparent-active);
--toggle-warning-active-border-color: var(--color-warning-transparent-active-border);
--toggle-warning-active-checked-background-color: var(--color-warning-active);
--toggle-warning-active-checked-border-color: var(--color-warning-active-border);
--toggle-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-warning-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-warning-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-warning-disabled-text-color: var(--text-disabled-color);
--toggle-danger-text-color: var(--text-basic-color);
--toggle-danger-background-color: var(--color-danger-transparent-default);
--toggle-danger-border-color: var(--color-danger-transparent-default-border);
--toggle-danger-checked-background-color: var(--color-danger-default);
--toggle-danger-checked-border-color: var(--color-danger-default-border);
--toggle-danger-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-danger-checked-switcher-checkmark-color: var(--color-danger-default);
--toggle-danger-focus-background-color: var(--color-danger-transparent-focus);
--toggle-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--toggle-danger-focus-checked-background-color: var(--color-danger-focus);
--toggle-danger-focus-checked-border-color: var(--color-danger-focus-border);
--toggle-danger-hover-background-color: var(--color-danger-transparent-hover);
--toggle-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--toggle-danger-hover-checked-background-color: var(--color-danger-hover);
--toggle-danger-hover-checked-border-color: var(--color-danger-hover-border);
--toggle-danger-active-background-color: var(--color-danger-transparent-active);
--toggle-danger-active-border-color: var(--color-danger-transparent-active-border);
--toggle-danger-active-checked-background-color: var(--color-danger-active);
--toggle-danger-active-checked-border-color: var(--color-danger-active-border);
--toggle-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-danger-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-danger-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-danger-disabled-text-color: var(--text-disabled-color);
--toggle-control-text-color: var(--color-basic-100);
--toggle-control-background-color: var(--color-control-transparent-default);
--toggle-control-border-color: var(--color-control-transparent-default-border);
--toggle-control-checked-background-color: var(--color-control-transparent-default);
--toggle-control-checked-border-color: var(--color-control-transparent-default-border);
--toggle-control-checked-switcher-background-color: var(--color-control-default);
--toggle-control-checked-switcher-checkmark-color: var(--color-basic-800);
--toggle-control-focus-background-color: var(--color-control-transparent-focus);
--toggle-control-focus-border-color: var(--color-control-transparent-focus-border);
--toggle-control-focus-checked-background-color: var(--color-control-transparent-focus);
--toggle-control-focus-checked-border-color: var(--color-control-transparent-focus-border);
--toggle-control-hover-background-color: var(--color-control-transparent-hover);
--toggle-control-hover-border-color: var(--color-control-transparent-hover-border);
--toggle-control-hover-checked-background-color: var(--color-control-transparent-hover);
--toggle-control-hover-checked-border-color: var(--color-control-transparent-hover-border);
--toggle-control-active-background-color: var(--color-control-transparent-active);
--toggle-control-active-border-color: var(--color-control-transparent-active-border);
--toggle-control-active-checked-background-color: var(--color-control-transparent-active);
--toggle-control-active-checked-border-color: var(--color-control-transparent-active-border);
--toggle-control-disabled-background-color: var(--color-control-transparent-disabled);
--toggle-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--toggle-control-disabled-switcher-background-color: var(--color-basic-transparent-600);
--toggle-control-disabled-checked-switcher-checkmark-color: var(--color-basic-100);
--toggle-control-disabled-text-color: var(--text-control-color);
--form-field-tiny-max-width: var(--input-tiny-max-width);
--form-field-small-max-width: var(--input-small-max-width);
--form-field-medium-max-width: var(--input-medium-max-width);
--form-field-large-max-width: var(--input-large-max-width);
--form-field-giant-max-width: var(--input-giant-max-width);
--form-field-addon-basic-text-color: var(--color-basic-600);
--form-field-addon-basic-highlight-text-color: var(--color-primary-500);
--form-field-addon-primary-text-color: var(--color-primary-500);
--form-field-addon-primary-highlight-text-color: var(--color-primary-600);
--form-field-addon-success-text-color: var(--color-success-500);
--form-field-addon-success-highlight-text-color: var(--color-success-600);
--form-field-addon-info-text-color: var(--color-info-500);
--form-field-addon-info-highlight-text-color: var(--color-info-600);
--form-field-addon-warning-text-color: var(--color-warning-500);
--form-field-addon-warning-highlight-text-color: var(--color-warning-600);
--form-field-addon-danger-text-color: var(--color-danger-500);
--form-field-addon-danger-highlight-text-color: var(--color-danger-600);
--form-field-addon-control-text-color: var(--color-control-default);
--form-field-addon-control-highlight-text-color: var(--color-control-default);
--form-field-addon-disabled-text-color: var(--text-disabled-color);
--form-field-addon-tiny-height: 1.5rem;
--form-field-addon-tiny-width: var(--form-field-addon-tiny-height);
--form-field-addon-tiny-icon-size: var(--button-tiny-icon-size);
--form-field-addon-tiny-font-size: var(--text-button-tiny-font-size);
--form-field-addon-tiny-line-height: var(--text-button-tiny-line-height);
--form-field-addon-tiny-font-weight: var(--text-button-font-weight);
--form-field-addon-small-height: 2rem;
--form-field-addon-small-width: var(--form-field-addon-small-height);
--form-field-addon-small-icon-size: var(--button-small-icon-size);
--form-field-addon-small-font-size: var(--text-button-small-font-size);
--form-field-addon-small-line-height: var(--text-button-small-line-height);
--form-field-addon-small-font-weight: var(--text-button-font-weight);
--form-field-addon-medium-height: 2.5rem;
--form-field-addon-medium-width: var(--form-field-addon-medium-height);
--form-field-addon-medium-icon-size: var(--button-medium-icon-size);
--form-field-addon-medium-font-size: var(--text-button-medium-font-size);
--form-field-addon-medium-line-height: var(--text-button-medium-line-height);
--form-field-addon-medium-font-weight: var(--text-button-font-weight);
--form-field-addon-large-height: 3rem;
--form-field-addon-large-width: var(--form-field-addon-large-height);
--form-field-addon-large-icon-size: var(--button-large-icon-size);
--form-field-addon-large-font-size: var(--text-button-large-font-size);
--form-field-addon-large-line-height: var(--text-button-large-line-height);
--form-field-addon-large-font-weight: var(--text-button-font-weight);
--form-field-addon-giant-height: 3.5rem;
--form-field-addon-giant-width: var(--form-field-addon-giant-height);
--form-field-addon-giant-icon-size: var(--button-giant-icon-size);
--form-field-addon-giant-font-size: var(--text-button-giant-font-size);
--form-field-addon-giant-line-height: var(--text-button-giant-line-height);
--form-field-addon-giant-font-weight: var(--text-button-font-weight);
--color-primary-100: #f2f6ff;
--color-primary-200: #d9e4ff;
--color-primary-300: #a6c1ff;
--color-primary-400: #598bff;
--color-primary-500: #3366ff;
--color-primary-600: #274bdb;
--color-primary-700: #1a34b8;
--color-primary-800: #102694;
--color-primary-900: #091c7a;
--color-primary-transparent-100: rgba(51, 102, 255, 0.08);
--color-primary-transparent-200: rgba(51, 102, 255, 0.16);
--color-primary-transparent-300: rgba(51, 102, 255, 0.24);
--color-primary-transparent-400: rgba(51, 102, 255, 0.32);
--color-primary-transparent-500: rgba(51, 102, 255, 0.4);
--color-primary-transparent-600: rgba(51, 102, 255, 0.48);
--color-success-100: #f0fff5;
--color-success-200: #ccfce3;
--color-success-300: #8cfac7;
--color-success-400: #2ce69b;
--color-success-500: #00d68f;
--color-success-600: #00b887;
--color-success-700: #00997a;
--color-success-800: #007d6c;
--color-success-900: #004a45;
--color-success-transparent-100: rgba(0, 214, 143, 0.08);
--color-success-transparent-200: rgba(0, 214, 143, 0.16);
--color-success-transparent-300: rgba(0, 214, 143, 0.24);
--color-success-transparent-400: rgba(0, 214, 143, 0.32);
--color-success-transparent-500: rgba(0, 214, 143, 0.4);
--color-success-transparent-600: rgba(0, 214, 143, 0.48);
--color-info-100: #f2f8ff;
--color-info-200: #c7e2ff;
--color-info-300: #94cbff;
--color-info-400: #42aaff;
--color-info-500: #0095ff;
--color-info-600: #006fd6;
--color-info-700: #0057c2;
--color-info-800: #0041a8;
--color-info-900: #002885;
--color-info-transparent-100: rgba(0, 149, 255, 0.08);
--color-info-transparent-200: rgba(0, 149, 255, 0.16);
--color-info-transparent-300: rgba(0, 149, 255, 0.24);
--color-info-transparent-400: rgba(0, 149, 255, 0.32);
--color-info-transparent-500: rgba(0, 149, 255, 0.4);
--color-info-transparent-600: rgba(0, 149, 255, 0.48);
--color-warning-100: #fffdf2;
--color-warning-200: #fff1c2;
--color-warning-300: #ffe59e;
--color-warning-400: #ffc94d;
--color-warning-500: #ffaa00;
--color-warning-600: #db8b00;
--color-warning-700: #b86e00;
--color-warning-800: #945400;
--color-warning-900: #703c00;
--color-warning-transparent-100: rgba(255, 170, 0, 0.08);
--color-warning-transparent-200: rgba(255, 170, 0, 0.16);
--color-warning-transparent-300: rgba(255, 170, 0, 0.24);
--color-warning-transparent-400: rgba(255, 170, 0, 0.32);
--color-warning-transparent-500: rgba(255, 170, 0, 0.4);
--color-warning-transparent-600: rgba(255, 170, 0, 0.48);
--color-danger-100: #fff2f2;
--color-danger-200: #ffd6d9;
--color-danger-300: #ffa8b4;
--color-danger-400: #ff708d;
--color-danger-500: #ff3d71;
--color-danger-600: #db2c66;
--color-danger-700: #b81d5b;
--color-danger-800: #94124e;
--color-danger-900: #700940;
--color-danger-transparent-100: rgba(255, 61, 113, 0.08);
--color-danger-transparent-200: rgba(255, 61, 113, 0.16);
--color-danger-transparent-300: rgba(255, 61, 113, 0.24);
--color-danger-transparent-400: rgba(255, 61, 113, 0.32);
--color-danger-transparent-500: rgba(255, 61, 113, 0.4);
--color-danger-transparent-600: rgba(255, 61, 113, 0.48);
--color-basic-100: #ffffff;
--color-basic-200: #f7f9fc;
--color-basic-300: #edf1f7;
--color-basic-400: #e4e9f2;
--color-basic-500: #c5cee0;
--color-basic-600: #8f9bb3;
--color-basic-700: #2e3a59;
--color-basic-800: #222b45;
--color-basic-900: #192038;
--color-basic-1000: #151a30;
--color-basic-1100: #101426;
--color-basic-transparent-100: rgba(143, 155, 179, 0.08);
--color-basic-transparent-200: rgba(143, 155, 179, 0.16);
--color-basic-transparent-300: rgba(143, 155, 179, 0.24);
--color-basic-transparent-400: rgba(143, 155, 179, 0.32);
--color-basic-transparent-500: rgba(143, 155, 179, 0.4);
--color-basic-transparent-600: rgba(143, 155, 179, 0.48);
--color-basic-control-transparent-100: rgba(255, 255, 255, 0.08);
--color-basic-control-transparent-200: rgba(255, 255, 255, 0.16);
--color-basic-control-transparent-300: rgba(255, 255, 255, 0.24);
--color-basic-control-transparent-400: rgba(255, 255, 255, 0.32);
--color-basic-control-transparent-500: rgba(255, 255, 255, 0.4);
--color-basic-control-transparent-600: rgba(255, 255, 255, 0.48);
--color-basic-focus: var(--color-basic-400);
--color-basic-hover: var(--color-basic-200);
--color-basic-default: var(--color-basic-300);
--color-basic-active: var(--color-basic-400);
--color-basic-disabled: var(--color-basic-transparent-300);
--color-basic-focus-border: var(--color-basic-500);
--color-basic-hover-border: var(--color-basic-hover);
--color-basic-default-border: var(--color-basic-default);
--color-basic-active-border: var(--color-basic-active);
--color-basic-disabled-border: var(--color-basic-disabled);
--color-basic-transparent-focus: var(--color-basic-transparent-300);
--color-basic-transparent-hover: var(--color-basic-transparent-200);
--color-basic-transparent-default: var(--color-basic-transparent-100);
--color-basic-transparent-active: var(--color-basic-transparent-300);
--color-basic-transparent-disabled: var(--color-basic-transparent-200);
--color-basic-transparent-focus-border: var(--color-basic-600);
--color-basic-transparent-hover-border: var(--color-basic-600);
--color-basic-transparent-default-border: var(--color-basic-600);
--color-basic-transparent-active-border: var(--color-basic-600);
--color-basic-transparent-disabled-border: var(--color-basic-transparent-300);
--color-primary-focus: var(--color-primary-600);
--color-primary-hover: var(--color-primary-400);
--color-primary-default: var(--color-primary-500);
--color-primary-active: var(--color-primary-600);
--color-primary-disabled: var(--color-basic-transparent-300);
--color-primary-focus-border: var(--color-primary-700);
--color-primary-hover-border: var(--color-primary-hover);
--color-primary-default-border: var(--color-primary-default);
--color-primary-active-border: var(--color-primary-active);
--color-primary-disabled-border: var(--color-primary-disabled);
--color-primary-transparent-focus: var(--color-primary-transparent-300);
--color-primary-transparent-hover: var(--color-primary-transparent-200);
--color-primary-transparent-default: var(--color-primary-transparent-100);
--color-primary-transparent-active: var(--color-primary-transparent-300);
--color-primary-transparent-disabled: var(--color-basic-transparent-200);
--color-primary-transparent-focus-border: var(--color-primary-500);
--color-primary-transparent-hover-border: var(--color-primary-500);
--color-primary-transparent-default-border: var(--color-primary-500);
--color-primary-transparent-active-border: var(--color-primary-500);
--color-primary-transparent-disabled-border: var(--color-basic-transparent-300);
--color-success-focus: var(--color-success-600);
--color-success-hover: var(--color-success-400);
--color-success-default: var(--color-success-500);
--color-success-active: var(--color-success-600);
--color-success-disabled: var(--color-basic-transparent-300);
--color-success-focus-border: var(--color-success-700);
--color-success-hover-border: var(--color-success-hover);
--color-success-default-border: var(--color-success-default);
--color-success-active-border: var(--color-success-active);
--color-success-disabled-border: var(--color-success-disabled);
--color-success-transparent-focus: var(--color-success-transparent-300);
--color-success-transparent-focus-border: var(--color-success-500);
--color-success-transparent-hover: var(--color-success-transparent-200);
--color-success-transparent-hover-border: var(--color-success-500);
--color-success-transparent-default: var(--color-success-transparent-100);
--color-success-transparent-default-border: var(--color-success-500);
--color-success-transparent-active: var(--color-success-transparent-300);
--color-success-transparent-active-border: var(--color-success-500);
--color-success-transparent-disabled: var(--color-basic-transparent-200);
--color-success-transparent-disabled-border: var(--color-basic-transparent-300);
--color-info-focus: var(--color-info-600);
--color-info-hover: var(--color-info-400);
--color-info-default: var(--color-info-500);
--color-info-active: var(--color-info-600);
--color-info-disabled: var(--color-basic-transparent-300);
--color-info-focus-border: var(--color-info-700);
--color-info-hover-border: var(--color-info-hover);
--color-info-default-border: var(--color-info-default);
--color-info-active-border: var(--color-info-active);
--color-info-disabled-border: var(--color-info-disabled);
--color-info-transparent-focus: var(--color-info-transparent-300);
--color-info-transparent-hover: var(--color-info-transparent-200);
--color-info-transparent-default: var(--color-info-transparent-100);
--color-info-transparent-active: var(--color-info-transparent-300);
--color-info-transparent-disabled: var(--color-basic-transparent-200);
--color-info-transparent-focus-border: var(--color-info-500);
--color-info-transparent-hover-border: var(--color-info-500);
--color-info-transparent-default-border: var(--color-info-500);
--color-info-transparent-active-border: var(--color-info-500);
--color-info-transparent-disabled-border: var(--color-basic-transparent-300);
--color-warning-focus: var(--color-warning-600);
--color-warning-hover: var(--color-warning-400);
--color-warning-default: var(--color-warning-500);
--color-warning-active: var(--color-warning-600);
--color-warning-disabled: var(--color-basic-transparent-300);
--color-warning-focus-border: var(--color-warning-700);
--color-warning-hover-border: var(--color-warning-hover);
--color-warning-default-border: var(--color-warning-default);
--color-warning-active-border: var(--color-warning-active);
--color-warning-disabled-border: var(--color-warning-disabled);
--color-warning-transparent-focus: var(--color-warning-transparent-300);
--color-warning-transparent-hover: var(--color-warning-transparent-200);
--color-warning-transparent-default: var(--color-warning-transparent-100);
--color-warning-transparent-active: var(--color-warning-transparent-300);
--color-warning-transparent-disabled: var(--color-basic-transparent-200);
--color-warning-transparent-focus-border: var(--color-warning-500);
--color-warning-transparent-hover-border: var(--color-warning-500);
--color-warning-transparent-default-border: var(--color-warning-500);
--color-warning-transparent-active-border: var(--color-warning-500);
--color-warning-transparent-disabled-border: var(--color-basic-transparent-300);
--color-danger-focus: var(--color-danger-600);
--color-danger-hover: var(--color-danger-400);
--color-danger-default: var(--color-danger-500);
--color-danger-active: var(--color-danger-600);
--color-danger-disabled: var(--color-basic-transparent-300);
--color-danger-focus-border: var(--color-danger-700);
--color-danger-hover-border: var(--color-danger-hover);
--color-danger-default-border: var(--color-danger-default);
--color-danger-active-border: var(--color-danger-active);
--color-danger-disabled-border: var(--color-danger-disabled);
--color-danger-transparent-focus: var(--color-danger-transparent-300);
--color-danger-transparent-hover: var(--color-danger-transparent-200);
--color-danger-transparent-default: var(--color-danger-transparent-100);
--color-danger-transparent-active: var(--color-danger-transparent-300);
--color-danger-transparent-disabled: var(--color-basic-transparent-200);
--color-danger-transparent-focus-border: var(--color-danger-500);
--color-danger-transparent-hover-border: var(--color-danger-500);
--color-danger-transparent-default-border: var(--color-danger-500);
--color-danger-transparent-active-border: var(--color-danger-500);
--color-danger-transparent-disabled-border: var(--color-basic-transparent-300);
--color-control-focus: var(--color-basic-300);
--color-control-hover: var(--color-basic-200);
--color-control-default: var(--color-basic-100);
--color-control-active: var(--color-basic-300);
--color-control-disabled: var(--color-basic-transparent-300);
--color-control-focus-border: var(--color-basic-500);
--color-control-hover-border: var(--color-control-hover);
--color-control-default-border: var(--color-control-default);
--color-control-active-border: var(--color-control-active);
--color-control-disabled-border: var(--color-control-disabled);
--color-control-transparent-focus: var(--color-basic-control-transparent-300);
--color-control-transparent-hover: var(--color-basic-control-transparent-200);
--color-control-transparent-default: var(--color-basic-control-transparent-100);
--color-control-transparent-active: var(--color-basic-control-transparent-300);
--color-control-transparent-disabled: var(--color-basic-transparent-200);
--color-control-transparent-focus-border: var(--color-basic-100);
--color-control-transparent-hover-border: var(--color-basic-100);
--color-control-transparent-default-border: var(--color-basic-100);
--color-control-transparent-active-border: var(--color-basic-100);
--color-control-transparent-disabled-border: var(--color-basic-transparent-300);
--background-basic-color-1: var(--color-basic-800);
--background-basic-color-2: var(--color-basic-900);
--background-basic-color-3: var(--color-basic-1000);
--background-basic-color-4: var(--color-basic-1100);
--border-basic-color-1: var(--color-basic-800);
--border-basic-color-2: var(--color-basic-900);
--border-basic-color-3: var(--color-basic-1000);
--border-basic-color-4: var(--color-basic-1100);
--border-basic-color-5: var(--color-basic-1100);
--background-alternative-color-1: var(--color-basic-100);
--background-alternative-color-2: var(--color-basic-200);
--background-alternative-color-3: var(--color-basic-300);
--background-alternative-color-4: var(--color-basic-400);
--border-alternative-color-1: var(--color-basic-100);
--border-alternative-color-2: var(--color-basic-200);
--border-alternative-color-3: var(--color-basic-300);
--border-alternative-color-4: var(--color-basic-400);
--border-alternative-color-5: var(--color-basic-500);
--background-primary-color-1: var(--color-primary-500);
--background-primary-color-2: var(--color-primary-600);
--background-primary-color-3: var(--color-primary-700);
--background-primary-color-4: var(--color-primary-800);
--border-primary-color-1: var(--color-basic-500);
--border-primary-color-2: var(--color-basic-600);
--border-primary-color-3: var(--color-basic-700);
--border-primary-color-4: var(--color-basic-800);
--border-primary-color-5: var(--color-basic-900);
--text-basic-color: var(--color-basic-100);
--text-alternate-color: var(--color-basic-900);
--text-control-color: var(--color-basic-100);
--text-disabled-color: var(--color-basic-transparent-600);
--text-hint-color: var(--color-basic-600);
--text-primary-color: var(--color-primary-default);
--text-primary-focus-color: var(--color-primary-focus);
--text-primary-hover-color: var(--color-primary-hover);
--text-primary-active-color: var(--color-primary-active);
--text-primary-disabled-color: var(--color-primary-400);
--text-success-color: var(--color-success-default);
--text-success-focus-color: var(--color-success-focus);
--text-success-hover-color: var(--color-success-hover);
--text-success-active-color: var(--color-success-active);
--text-success-disabled-color: var(--color-success-400);
--text-info-color: var(--color-info-default);
--text-info-focus-color: var(--color-info-focus);
--text-info-hover-color: var(--color-info-hover);
--text-info-active-color: var(--color-info-active);
--text-info-disabled-color: var(--color-info-400);
--text-warning-color: var(--color-warning-default);
--text-warning-focus-color: var(--color-warning-focus);
--text-warning-hover-color: var(--color-warning-hover);
--text-warning-active-color: var(--color-warning-active);
--text-warning-disabled-color: var(--color-warning-400);
--text-danger-color: var(--color-danger-default);
--text-danger-focus-color: var(--color-danger-focus);
--text-danger-hover-color: var(--color-danger-hover);
--text-danger-active-color: var(--color-danger-active);
--text-danger-disabled-color: var(--color-danger-400);
--font-family-primary: Open Sans, sans-serif;
--font-family-secondary: var(--font-family-primary);
--text-heading-1-font-family: var(--font-family-secondary);
--text-heading-1-font-size: 2.25rem;
--text-heading-1-font-weight: 700;
--text-heading-1-line-height: 3rem;
--text-heading-2-font-family: var(--font-family-secondary);
--text-heading-2-font-size: 2rem;
--text-heading-2-font-weight: 700;
--text-heading-2-line-height: 2.5rem;
--text-heading-3-font-family: var(--font-family-secondary);
--text-heading-3-font-size: 1.875rem;
--text-heading-3-font-weight: 700;
--text-heading-3-line-height: 2.5rem;
--text-heading-4-font-family: var(--font-family-secondary);
--text-heading-4-font-size: 1.625rem;
--text-heading-4-font-weight: 700;
--text-heading-4-line-height: 2rem;
--text-heading-5-font-family: var(--font-family-secondary);
--text-heading-5-font-size: 1.375rem;
--text-heading-5-font-weight: 700;
--text-heading-5-line-height: 2rem;
--text-heading-6-font-family: var(--font-family-secondary);
--text-heading-6-font-size: 1.125rem;
--text-heading-6-font-weight: 700;
--text-heading-6-line-height: 1.5rem;
--text-subtitle-font-family: var(--font-family-primary);
--text-subtitle-font-size: 0.9375rem;
--text-subtitle-font-weight: 600;
--text-subtitle-line-height: 1.5rem;
--text-subtitle-2-font-family: var(--font-family-primary);
--text-subtitle-2-font-size: 0.8125rem;
--text-subtitle-2-font-weight: 600;
--text-subtitle-2-line-height: 1.5rem;
--text-paragraph-font-family: var(--font-family-primary);
--text-paragraph-font-size: 0.9375rem;
--text-paragraph-font-weight: 400;
--text-paragraph-line-height: 1.25rem;
--text-paragraph-2-font-family: var(--font-family-primary);
--text-paragraph-2-font-size: 0.8125rem;
--text-paragraph-2-font-weight: 400;
--text-paragraph-2-line-height: 1.125rem;
--text-label-font-family: var(--font-family-primary);
--text-label-font-size: 0.75rem;
--text-label-font-weight: 700;
--text-label-line-height: 1rem;
--text-caption-font-family: var(--font-family-primary);
--text-caption-font-size: 0.75rem;
--text-caption-font-weight: 400;
--text-caption-line-height: 1rem;
--text-caption-2-font-family: var(--font-family-primary);
--text-caption-2-font-size: 0.75rem;
--text-caption-2-font-weight: 600;
--text-caption-2-line-height: 1rem;
--text-button-font-family: var(--font-family-primary);
--text-button-font-weight: 700;
--text-button-tiny-font-size: 0.625rem;
--text-button-tiny-line-height: 0.75rem;
--text-button-small-font-size: 0.75rem;
--text-button-small-line-height: 1rem;
--text-button-medium-font-size: 0.875rem;
--text-button-medium-line-height: 1rem;
--text-button-large-font-size: 1rem;
--text-button-large-line-height: 1.25rem;
--text-button-giant-font-size: 1.125rem;
--text-button-giant-line-height: 1.5rem;
--border-radius: 0.25rem;
--outline-width: 0.375rem;
--outline-color: var(--color-basic-700);
--scrollbar-color: var(--background-basic-color-4);
--scrollbar-background-color: var(--background-basic-color-2);
--scrollbar-width: 0.3125rem;
--shadow: 0 0.5rem 1rem 0 #1a1f33;
--divider-color: var(--border-basic-color-3);
--divider-style: solid;
--divider-width: 1px;
}
.nb-theme-cosmic {
--link-text-color: var(--text-primary-color);
--link-text-decoration: underline;
--link-text-focus-color: var(--text-primary-focus-color);
--link-text-hover-color: var(--text-primary-hover-color);
--card-background-color: var(--background-basic-color-1);
--card-text-color: var(--text-basic-color);
--card-text-font-family: var(--text-paragraph-font-family);
--card-text-font-size: var(--text-paragraph-font-size);
--card-text-font-weight: var(--text-paragraph-font-weight);
--card-text-line-height: var(--text-paragraph-line-height);
--card-border-width: 0.0625rem;
--card-border-style: solid;
--card-border-color: var(--border-basic-color-4);
--card-border-radius: var(--border-radius);
--card-padding: 1rem 1.5rem;
--card-shadow: none;
--card-divider-color: var(--divider-color);
--card-divider-style: var(--divider-style);
--card-divider-width: var(--divider-width);
--card-header-text-color: var(--text-basic-color);
--card-header-text-font-family: var(--text-subtitle-font-family);
--card-header-text-font-size: var(--text-subtitle-font-size);
--card-header-text-font-weight: var(--text-subtitle-font-weight);
--card-header-text-line-height: var(--text-subtitle-line-height);
--card-header-basic-background-color: var(--background-basic-color-2);
--card-header-basic-text-color: var(--text-basic-color);
--card-header-primary-background-color: var(--color-primary-default);
--card-header-primary-text-color: var(--text-control-color);
--card-header-info-background-color: var(--color-info-default);
--card-header-info-text-color: var(--text-control-color);
--card-header-success-background-color: var(--color-success-default);
--card-header-success-text-color: var(--text-control-color);
--card-header-warning-background-color: var(--color-warning-default);
--card-header-warning-text-color: var(--text-control-color);
--card-header-danger-background-color: var(--color-danger-default);
--card-header-danger-text-color: var(--text-control-color);
--card-header-control-background-color: var(--color-control-default);
--card-header-control-text-color: var(--color-basic-800);
--card-height-tiny: 13.5rem;
--card-height-small: 21.1875rem;
--card-height-medium: 28.875rem;
--card-height-large: 36.5625rem;
--card-height-giant: 44.25rem;
--card-margin-bottom: 1.875rem;
--card-scrollbar-color: var(--scrollbar-color);
--card-scrollbar-background-color: var(--scrollbar-background-color);
--card-scrollbar-width: var(--scrollbar-width);
--header-background-color: var(--background-basic-color-1);
--header-text-color: var(--text-basic-color);
--header-text-font-family: var(--text-paragraph-font-family);
--header-text-font-size: var(--text-paragraph-font-size);
--header-text-font-weight: var(--text-paragraph-font-weight);
--header-text-line-height: var(--text-paragraph-line-height);
--header-height: 4.75rem;
--header-padding: 1.25rem;
--header-shadow: var(--shadow);
--footer-background-color: var(--background-basic-color-1);
--footer-text-color: var(--text-basic-color);
--footer-text-font-family: var(--text-paragraph-font-family);
--footer-text-font-size: var(--text-paragraph-font-size);
--footer-text-font-weight: var(--text-paragraph-font-weight);
--footer-text-line-height: var(--text-paragraph-line-height);
--footer-text-highlight-color: var(--color-primary-hover);
--footer-height: 4.725rem;
--footer-padding: 1.25rem;
--footer-divider-color: var(--divider-color);
--footer-divider-style: var(--divider-style);
--footer-divider-width: var(--divider-width);
--footer-shadow: var(--shadow);
--layout-background-color: var(--background-basic-color-3);
--layout-text-color: var(--text-basic-color);
--layout-text-font-family: var(--text-paragraph-font-family);
--layout-text-font-size: var(--text-paragraph-font-size);
--layout-text-font-weight: var(--text-paragraph-font-weight);
--layout-text-line-height: var(--text-paragraph-line-height);
--layout-min-height: 100vh;
--layout-content-width: 900px;
--layout-window-mode-min-width: 300px;
--layout-window-mode-max-width: 1920px;
--layout-window-mode-background-color: var(--background-basic-color-3);
--layout-window-mode-padding-top: 4.75rem;
--layout-window-shadow: var(--shadow);
--layout-padding: 2.25rem 2.25rem 0.75rem;
--layout-medium-padding: 1.5rem 1.5rem 0.5rem;
--layout-small-padding: 1rem 1rem 0;
--layout-scrollbar-background-color: var(--scrollbar-background-color);
--layout-scrollbar-color: var(--scrollbar-color);
--layout-scrollbar-width: var(--scrollbar-width);
--sidebar-background-color: var(--background-basic-color-1);
--sidebar-text-color: var(--text-basic-color);
--sidebar-text-font-family: var(--text-paragraph-font-family);
--sidebar-text-font-size: var(--text-paragraph-font-size);
--sidebar-text-font-weight: var(--text-paragraph-font-weight);
--sidebar-text-line-height: var(--text-paragraph-line-height);
--sidebar-height: 100vh;
--sidebar-width: 16rem;
--sidebar-width-compact: 3.5rem;
--sidebar-padding: 1.25rem;
--sidebar-header-height: 3.5rem;
--sidebar-footer-height: 3.5rem;
--sidebar-shadow: var(--shadow);
--sidebar-menu-item-highlight-color: var(--color-primary-default);
--sidebar-scrollbar-background-color: var(--scrollbar-background-color);
--sidebar-scrollbar-color: var(--scrollbar-color);
--sidebar-scrollbar-width: var(--scrollbar-width);
--menu-background-color: transparent;
--menu-text-color: var(--text-basic-color);
--menu-text-font-family: var(--text-subtitle-2-font-family);
--menu-text-font-size: var(--text-subtitle-2-font-size);
--menu-text-font-weight: var(--text-subtitle-2-font-weight);
--menu-text-line-height: var(--text-subtitle-2-line-height);
--menu-group-text-color: var(--text-hint-color);
--menu-item-border-radius: 0;
--menu-item-padding: 0.75rem 1rem;
--menu-item-hover-background-color: var(--menu-background-color);
--menu-item-hover-cursor: pointer;
--menu-item-hover-text-color: var(--text-primary-hover-color);
--menu-item-icon-hover-color: var(--menu-item-hover-text-color);
--menu-item-active-background-color: var(--menu-background-color);
--menu-item-active-text-color: var(--text-primary-color);
--menu-item-icon-active-color: var(--menu-item-active-text-color);
--menu-item-icon-color: var(--text-hint-color);
--menu-item-icon-margin: 0 0.5rem 0 0;
--menu-item-icon-width: 1.25rem;
--menu-item-divider-color: var(--divider-color);
--menu-item-divider-style: var(--divider-style);
--menu-item-divider-width: var(--divider-width);
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-text-color: var(--text-basic-color);
--menu-submenu-margin: 0;
--menu-submenu-padding: 0 1.25rem;
--menu-submenu-item-border-color: var(--menu-submenu-background-color);
--menu-submenu-item-border-style: solid;
--menu-submenu-item-border-width: 0;
--menu-submenu-item-border-radius: 0;
--menu-submenu-item-padding: var(--menu-item-padding);
--menu-submenu-item-hover-background-color: var(--menu-background-color);
--menu-submenu-item-hover-border-color: var(--menu-submenu-item-border-color);
--menu-submenu-item-hover-text-color: var(--menu-item-hover-text-color);
--menu-submenu-item-icon-hover-color: var(--menu-item-icon-hover-color);
--menu-submenu-item-active-background-color: var(--menu-background-color);
--menu-submenu-item-active-border-color: var(--color-primary-default);
--menu-submenu-item-active-text-color: var(--menu-item-active-text-color);
--menu-submenu-item-icon-active-color: var(--menu-item-icon-active-color);
--menu-submenu-item-active-hover-background-color: var(--menu-submenu-item-hover-background-color);
--menu-submenu-item-active-hover-border-color: var(--color-primary-hover);
--menu-submenu-item-active-hover-text-color: var(--menu-submenu-item-hover-text-color);
--menu-submenu-item-icon-active-hover-color: var(--menu-submenu-item-icon-hover-color);
--tabset-background-color: transparent;
--tabset-border-radius: 0;
--tabset-shadow: none;
--tabset-tab-background-color: transparent;
--tabset-tab-padding: 1rem 2rem;
--tabset-tab-text-color: var(--text-hint-color);
--tabset-tab-text-font-family: var(--text-button-font-family);
--tabset-tab-text-font-size: var(--text-button-medium-font-size);
--tabset-tab-text-font-weight: var(--text-button-font-weight);
--tabset-tab-text-line-height: var(--text-button-medium-line-height);
--tabset-tab-text-transform: uppercase;
--tabset-tab-underline-width: 0.25rem;
--tabset-tab-underline-color: transparent;
--tabset-tab-active-background-color: transparent;
--tabset-tab-active-text-color: var(--text-primary-color);
--tabset-tab-active-underline-color: var(--text-primary-color);
--tabset-tab-focus-background-color: transparent;
--tabset-tab-focus-text-color: var(--text-primary-focus-color);
--tabset-tab-focus-underline-color: var(--text-primary-focus-color);
--tabset-tab-hover-background-color: transparent;
--tabset-tab-hover-text-color: var(--text-primary-hover-color);
--tabset-tab-hover-underline-color: var(--text-primary-hover-color);
--tabset-tab-disabled-background-color: transparent;
--tabset-tab-disabled-text-color: var(--text-disabled-color);
--tabset-tab-disabled-underline-color: transparent;
--tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem;
--tabset-tab-badge-dot-mode-padding: 0.25rem;
--tabset-divider-color: var(--divider-color);
--tabset-divider-style: var(--divider-style);
--tabset-divider-width: var(--divider-width);
--tabset-content-background-color: transparent;
--tabset-content-padding: 1rem 2rem;
--tabset-content-text-color: var(--text-basic-color);
--tabset-content-text-font-family: var(--text-paragraph-font-family);
--tabset-content-text-font-size: var(--text-paragraph-font-size);
--tabset-content-text-font-weight: var(--text-paragraph-font-weight);
--tabset-content-text-line-height: var(--text-paragraph-line-height);
--tabset-scrollbar-color: var(--scrollbar-color);
--tabset-scrollbar-background-color: var(--scrollbar-background-color);
--tabset-scrollbar-width: var(--scrollbar-width);
--tabset-tab-text-hide-breakpoint: 36rem;
--route-tabset-background-color: transparent;
--route-tabset-border-radius: 0;
--route-tabset-shadow: none;
--route-tabset-tab-background-color: transparent;
--route-tabset-tab-padding: 1rem 2rem;
--route-tabset-tab-text-color: var(--text-hint-color);
--route-tabset-tab-text-font-family: var(--text-button-font-family);
--route-tabset-tab-text-font-size: var(--text-button-medium-font-size);
--route-tabset-tab-text-font-weight: var(--text-button-font-weight);
--route-tabset-tab-text-line-height: var(--text-button-medium-line-height);
--route-tabset-tab-text-transform: uppercase;
--route-tabset-tab-underline-width: 0.25rem;
--route-tabset-tab-underline-color: transparent;
--route-tabset-tab-active-background-color: transparent;
--route-tabset-tab-active-text-color: var(--text-primary-color);
--route-tabset-tab-active-underline-color: var(--text-primary-color);
--route-tabset-tab-focus-background-color: transparent;
--route-tabset-tab-focus-text-color: var(--text-primary-focus-color);
--route-tabset-tab-focus-underline-color: var(--text-primary-focus-color);
--route-tabset-tab-hover-background-color: transparent;
--route-tabset-tab-hover-text-color: var(--text-primary-hover-color);
--route-tabset-tab-hover-underline-color: var(--text-primary-hover-color);
--route-tabset-tab-disabled-background-color: transparent;
--route-tabset-tab-disabled-text-color: var(--text-disabled-color);
--route-tabset-tab-disabled-underline-color: transparent;
--route-tabset-divider-color: var(--divider-color);
--route-tabset-divider-style: var(--divider-style);
--route-tabset-divider-width: var(--divider-width);
--route-tabset-scrollbar-color: var(--scrollbar-color);
--route-tabset-scrollbar-background-color: var(--scrollbar-background-color);
--route-tabset-scrollbar-width: var(--scrollbar-width);
--route-tabset-tab-text-hide-breakpoint: 36rem;
--user-picture-box-background-color: transparent;
--user-picture-box-border-color: var(--border-basic-color-3);
--user-picture-box-border-width: 1px;
--user-initials-text-color: var(--text-basic-color);
--user-initials-text-font-family: var(--text-paragraph-font-family);
--user-initials-text-font-weight: var(--text-paragraph-font-weight);
--user-name-text-color: var(--text-basic-color);
--user-name-text-font-family: var(--text-paragraph-font-family);
--user-name-text-font-weight: var(--text-paragraph-font-weight);
--user-title-text-color: var(--text-basic-color);
--user-title-text-font-family: var(--text-paragraph-2-font-family);
--user-title-text-font-weight: var(--text-paragraph-2-font-weight);
--user-rectangle-border-radius: 0.5rem;
--user-semi-round-border-radius: 0.75rem;
--user-round-border-radius: 50%;
--user-tiny-height: 1.25rem;
--user-tiny-width: 1.25rem;
--user-tiny-initials-text-font-size: var(--text-caption-font-size);
--user-tiny-initials-text-line-height: var(--text-caption-line-height);
--user-tiny-name-text-font-size: var(--text-caption-font-size);
--user-tiny-name-text-line-height: var(--text-caption-line-height);
--user-tiny-title-text-font-size: var(--text-caption-font-size);
--user-tiny-title-text-line-height: var(--text-caption-line-height);
--user-small-height: 1.5rem;
--user-small-width: 1.5rem;
--user-small-initials-text-font-size: var(--text-caption-font-size);
--user-small-initials-text-line-height: var(--text-caption-line-height);
--user-small-name-text-font-size: var(--text-caption-font-size);
--user-small-name-text-line-height: var(--text-caption-line-height);
--user-small-title-text-font-size: var(--text-caption-font-size);
--user-small-title-text-line-height: var(--text-caption-line-height);
--user-medium-height: 2.5rem;
--user-medium-width: 2.5rem;
--user-medium-initials-text-font-size: var(--text-paragraph-font-size);
--user-medium-initials-text-line-height: var(--text-paragraph-line-height);
--user-medium-name-text-font-size: var(--text-paragraph-font-size);
--user-medium-name-text-line-height: var(--text-paragraph-line-height);
--user-medium-title-text-font-size: var(--text-caption-font-size);
--user-medium-title-text-line-height: var(--text-caption-line-height);
--user-large-height: 3.25rem;
--user-large-width: 3.25rem;
--user-large-initials-text-font-size: var(--text-paragraph-font-size);
--user-large-initials-text-line-height: var(--text-paragraph-line-height);
--user-large-name-text-font-size: var(--text-paragraph-font-size);
--user-large-name-text-line-height: var(--text-paragraph-line-height);
--user-large-title-text-font-size: var(--text-paragraph-2-font-size);
--user-large-title-text-line-height: var(--text-paragraph-2-line-height);
--user-giant-height: 4rem;
--user-giant-width: 4rem;
--user-giant-initials-text-font-size: var(--text-paragraph-font-size);
--user-giant-initials-text-line-height: var(--text-paragraph-line-height);
--user-giant-name-text-font-size: var(--text-paragraph-font-size);
--user-giant-name-text-line-height: var(--text-paragraph-line-height);
--user-giant-title-text-font-size: var(--text-paragraph-font-size);
--user-giant-title-text-line-height: var(--text-paragraph-line-height);
--popover-text-color: var(--text-basic-color);
--popover-text-font-family: var(--text-paragraph-font-family);
--popover-text-font-size: var(--text-paragraph-font-size);
--popover-text-font-weight: var(--text-paragraph-font-weight);
--popover-text-line-height: var(--text-paragraph-line-height);
--popover-background-color: var(--background-basic-color-1);
--popover-border-width: 1px;
--popover-border-color: transparent;
--popover-border-radius: var(--border-radius);
--popover-shadow: var(--shadow);
--popover-arrow-size: 0.6875rem;
--popover-padding: 0.75rem 1rem;
--context-menu-background-color: var(--background-basic-color-1);
--context-menu-border-color: transparent;
--context-menu-border-style: solid;
--context-menu-border-width: 0;
--context-menu-border-radius: var(--border-radius);
--context-menu-text-align: center;
--context-menu-min-width: 10rem;
--context-menu-max-width: 15rem;
--context-menu-shadow: var(--shadow);
--actions-background-color: transparent;
--actions-divider-color: var(--divider-color);
--actions-divider-style: var(--divider-style);
--actions-divider-width: var(--divider-width);
--actions-icon-color: var(--text-hint-color);
--actions-text-color: var(--text-basic-color);
--actions-text-font-family: var(--text-button-font-family);
--actions-text-font-weight: var(--text-button-font-weight);
--actions-text-line-height: var(--text-button-medium-line-height);
--actions-disabled-icon-color: var(--text-disabled-color);
--actions-disabled-text-color: var(--text-disabled-color);
--actions-tiny-height: 1rem;
--actions-tiny-icon-height: var(--actions-tiny-height);
--actions-tiny-padding: 0 1.25rem;
--actions-tiny-text-font-size: var(--text-button-tiny-font-size);
--actions-small-height: 1.5rem;
--actions-small-icon-height: var(--actions-small-height);
--actions-small-padding: 0 1.25rem;
--actions-small-text-font-size: var(--text-button-small-font-size);
--actions-medium-height: 2.25rem;
--actions-medium-icon-height: var(--actions-medium-height);
--actions-medium-padding: 0 1.25rem;
--actions-medium-text-font-size: var(--text-button-medium-font-size);
--actions-large-height: 3.5rem;
--actions-large-icon-height: var(--actions-large-height);
--actions-large-padding: 0 1.25rem;
--actions-large-text-font-size: var(--text-button-large-font-size);
--actions-giant-height: 4rem;
--actions-giant-icon-height: var(--actions-giant-height);
--actions-giant-padding: 0 1.25rem;
--actions-giant-text-font-size: var(--text-button-giant-font-size);
--search-background-color: var(--background-basic-color-1);
--search-divider-color: var(--divider-color);
--search-divider-style: var(--divider-style);
--search-divider-width: var(--divider-width);
--search-extra-background-color: var(--color-primary-default);
--search-text-color: var(--text-basic-color);
--search-text-font-family: var(--text-heading-1-font-family);
--search-text-font-size: var(--text-heading-1-font-size);
--search-text-font-weight: var(--text-heading-1-font-weight);
--search-text-line-height: var(--text-heading-1-line-height);
--search-placeholder-text-color: var(--text-hint-color);
--search-info-text-color: var(--text-hint-color);
--search-info-text-font-family: var(--text-subtitle-font-family);
--search-info-text-font-size: var(--text-subtitle-font-size);
--search-info-text-font-weight: var(--text-subtitle-font-weight);
--search-info-text-line-height: var(--text-subtitle-line-height);
--smart-table-header-font-family: var(--text-paragraph-font-family);
--smart-table-header-font-size: var(--text-paragraph-font-size);
--smart-table-header-font-weight: var(--text-paragraph-font-weight);
--smart-table-header-line-height: var(--text-paragraph-line-height);
--smart-table-header-fg: var(--text-basic-color);
--smart-table-header-bg: var(--background-basic-color-1);
--smart-table-font-family: var(--text-paragraph-font-family);
--smart-table-font-size: var(--text-paragraph-font-size);
--smart-table-font-weight: var(--text-paragraph-font-weight);
--smart-table-line-height: var(--text-paragraph-line-height);
--smart-table-fg: var(--text-basic-color);
--smart-table-bg: var(--background-basic-color-1);
--smart-table-bg-even: var(--background-basic-color-2);
--smart-table-fg-secondary: var(--text-basic-color);
--smart-table-bg-active: var(--background-basic-color-3);
--smart-table-padding: 0.875rem 1.25rem;
--smart-table-filter-padding: 0.375rem 0.5rem;
--smart-table-separator: var(--divider-color);
--smart-table-border-radius: var(--border-radius);
--smart-table-action-add-edit-hover-text-color: var(--color-primary-default);
--smart-table-action-cancel-delete-hover-text-color: var(--color-danger-default);
--smart-table-add-button-border-color: var(--button-filled-primary-border-color);
--smart-table-add-button-background-color: var(--button-filled-primary-background-color);
--smart-table-add-button-text-color: var(--button-filled-primary-text-color);
--smart-table-add-button-focus-border-color: var(--button-filled-primary-focus-border-color);
--smart-table-add-button-hover-background-color: var(--button-filled-primary-hover-background-color);
--smart-table-add-button-hover-border-color: var(--button-filled-primary-hover-border-color);
--smart-table-add-button-active-background-color: var(--button-filled-primary-active-background-color);
--smart-table-add-button-active-border-color: var(--button-filled-primary-active-border-color);
--smart-table-paging-font-family: var(--button-text-font-family);
--smart-table-paging-font-size: var(--button-medium-text-font-size);
--smart-table-paging-line-height: var(--button-medium-text-line-height);
--smart-table-paging-border-color: var(--divider-color);
--smart-table-paging-border-width: var(--divider-width);
--smart-table-paging-fg-active: var(--text-control-color);
--smart-table-paging-bg-active: var(--color-primary-default);
--smart-table-paging-hover: transparent;
--smart-table-paging-hover-border-color: var(--button-outline-primary-hover-border-color);
--smart-table-paging-hover-text-color: var(--button-outline-primary-hover-text-color);
--smart-table-paging-disabled-text-color: var(--button-outline-primary-disabled-text-color);
--smart-table-paging-page-text-color: var(--button-outline-primary-text-color);
--smart-table-paging-page-focus-border-color: var(--button-outline-primary-focus-border-color);
--smart-table-paging-page-focus-text-color: var(--button-outline-primary-focus-text-color);
--toastr-border-style: solid;
--toastr-border-width: 1px;
--toastr-border-radius: var(--border-radius);
--toastr-padding: 1rem;
--toastr-shadow: var(--shadow);
--toastr-text-font-family: var(--text-paragraph-2-font-family);
--toastr-text-font-size: var(--text-paragraph-2-font-size);
--toastr-text-font-weight: var(--text-paragraph-2-font-weight);
--toastr-text-line-height: var(--text-paragraph-2-line-height);
--toastr-title-text-font-family: var(--text-subtitle-font-family);
--toastr-title-text-font-size: var(--text-subtitle-font-size);
--toastr-title-text-font-weight: var(--text-subtitle-font-weight);
--toastr-title-text-line-height: var(--text-subtitle-line-height);
--toastr-basic-background-color: var(--background-basic-color-1);
--toastr-basic-border-color: var(--border-basic-color-3);
--toastr-basic-text-color: var(--text-basic-color);
--toastr-icon-basic-background-color: var(--background-basic-color-1);
--toastr-icon-basic-color: var(--text-basic-color);
--toastr-destroyable-basic-hover-background-color: var(--background-basic-color-1);
--toastr-destroyable-basic-hover-border-color: var(--border-basic-color-3);
--toastr-primary-background-color: var(--color-primary-default);
--toastr-primary-border-color: var(--color-primary-default);
--toastr-primary-text-color: var(--text-control-color);
--toastr-icon-primary-background-color: var(--background-basic-color-1);
--toastr-icon-primary-color: var(--color-primary-default);
--toastr-destroyable-primary-hover-background-color: var(--color-primary-hover);
--toastr-destroyable-primary-hover-border-color: var(--color-primary-hover);
--toastr-success-background-color: var(--color-success-default);
--toastr-success-border-color: var(--color-success-default);
--toastr-success-text-color: var(--text-control-color);
--toastr-icon-success-background-color: var(--background-basic-color-1);
--toastr-icon-success-color: var(--color-success-default);
--toastr-destroyable-success-hover-background-color: var(--color-success-hover);
--toastr-destroyable-success-hover-border-color: var(--color-success-hover);
--toastr-info-background-color: var(--color-info-default);
--toastr-info-border-color: var(--color-info-default);
--toastr-info-text-color: var(--text-control-color);
--toastr-icon-info-background-color: var(--background-basic-color-1);
--toastr-icon-info-color: var(--color-info-default);
--toastr-destroyable-info-hover-background-color: var(--color-info-hover);
--toastr-destroyable-info-hover-border-color: var(--color-info-hover);
--toastr-warning-background-color: var(--color-warning-default);
--toastr-warning-border-color: var(--color-warning-default);
--toastr-warning-text-color: var(--text-control-color);
--toastr-icon-warning-background-color: var(--background-basic-color-1);
--toastr-icon-warning-color: var(--color-warning-default);
--toastr-destroyable-warning-hover-background-color: var(--color-warning-hover);
--toastr-destroyable-warning-hover-border-color: var(--color-warning-hover);
--toastr-danger-background-color: var(--color-danger-default);
--toastr-danger-border-color: var(--color-danger-default);
--toastr-danger-text-color: var(--text-control-color);
--toastr-icon-danger-background-color: var(--background-basic-color-1);
--toastr-icon-danger-color: var(--color-danger-default);
--toastr-destroyable-danger-hover-background-color: var(--color-danger-hover);
--toastr-destroyable-danger-hover-border-color: var(--color-danger-hover);
--toastr-control-background-color: var(--color-control-default);
--toastr-control-border-color: var(--color-control-default);
--toastr-control-text-color: var(--color-basic-800);
--toastr-icon-control-background-color: var(--color-control-default);
--toastr-icon-control-color: var(--color-basic-800);
--toastr-destroyable-control-hover-background-color: var(--color-control-hover);
--toastr-destroyable-control-hover-border-color: var(--color-control-hover);
--button-cursor: pointer;
--button-outline-width: var(--outline-width);
--button-outline-color: var(--outline-color);
--button-text-font-family: var(--text-button-font-family);
--button-text-font-weight: var(--text-button-font-weight);
--button-disabled-cursor: default;
--button-tiny-text-font-size: var(--text-button-tiny-font-size);
--button-tiny-text-line-height: var(--text-button-tiny-line-height);
--button-tiny-icon-size: 0.75rem;
--button-tiny-icon-vertical-margin: -0.125rem;
--button-tiny-icon-offset: 0.375rem;
--button-small-text-font-size: var(--text-button-small-font-size);
--button-small-text-line-height: var(--text-button-small-line-height);
--button-small-icon-size: 1rem;
--button-small-icon-vertical-margin: -0.125rem;
--button-small-icon-offset: 0.375rem;
--button-medium-text-font-size: var(--text-button-medium-font-size);
--button-medium-text-line-height: var(--text-button-medium-line-height);
--button-medium-icon-size: 1.25rem;
--button-medium-icon-vertical-margin: -0.125rem;
--button-medium-icon-offset: 0.5rem;
--button-large-text-font-size: var(--text-button-large-font-size);
--button-large-text-line-height: var(--text-button-large-line-height);
--button-large-icon-size: 1.5rem;
--button-large-icon-vertical-margin: -0.125rem;
--button-large-icon-offset: 0.75rem;
--button-giant-text-font-size: var(--text-button-giant-font-size);
--button-giant-text-line-height: var(--text-button-giant-line-height);
--button-giant-icon-size: 1.5rem;
--button-giant-icon-vertical-margin: -0.125rem;
--button-giant-icon-offset: 0.75rem;
--button-rectangle-border-radius: var(--border-radius);
--button-semi-round-border-radius: 0.75rem;
--button-round-border-radius: 1.5rem;
--button-filled-border-style: solid;
--button-filled-border-width: 0.0625rem;
--button-filled-text-transform: uppercase;
--button-filled-tiny-padding: 0.3125rem 0.625rem;
--button-filled-small-padding: 0.4375rem 0.875rem;
--button-filled-medium-padding: 0.6875rem 1.125rem;
--button-filled-large-padding: 0.8125rem 1.125rem;
--button-filled-giant-padding: 0.9375rem 1.375rem;
--button-filled-basic-background-color: var(--color-basic-default);
--button-filled-basic-border-color: var(--color-basic-default-border);
--button-filled-basic-text-color: var(--color-basic-800);
--button-filled-basic-focus-background-color: var(--color-basic-focus);
--button-filled-basic-focus-border-color: var(--color-basic-focus-border);
--button-filled-basic-hover-background-color: var(--color-basic-hover);
--button-filled-basic-hover-border-color: var(--color-basic-hover-border);
--button-filled-basic-active-background-color: var(--color-basic-active);
--button-filled-basic-active-border-color: var(--color-basic-active-border);
--button-filled-basic-disabled-background-color: var(--color-basic-disabled);
--button-filled-basic-disabled-border-color: var(--color-basic-disabled-border);
--button-filled-basic-disabled-text-color: var(--text-disabled-color);
--button-filled-primary-background-color: var(--color-primary-default);
--button-filled-primary-border-color: var(--color-primary-default-border);
--button-filled-primary-text-color: var(--text-control-color);
--button-filled-primary-focus-background-color: var(--color-primary-focus);
--button-filled-primary-focus-border-color: var(--color-primary-focus-border);
--button-filled-primary-hover-background-color: var(--color-primary-hover);
--button-filled-primary-hover-border-color: var(--color-primary-hover-border);
--button-filled-primary-active-background-color: var(--color-primary-active);
--button-filled-primary-active-border-color: var(--color-primary-active-border);
--button-filled-primary-disabled-background-color: var(--color-primary-disabled);
--button-filled-primary-disabled-border-color: var(--color-primary-disabled-border);
--button-filled-primary-disabled-text-color: var(--text-disabled-color);
--button-filled-success-background-color: var(--color-success-default);
--button-filled-success-border-color: var(--color-success-default-border);
--button-filled-success-text-color: var(--text-control-color);
--button-filled-success-focus-background-color: var(--color-success-focus);
--button-filled-success-focus-border-color: var(--color-success-focus-border);
--button-filled-success-hover-background-color: var(--color-success-hover);
--button-filled-success-hover-border-color: var(--color-success-hover-border);
--button-filled-success-active-background-color: var(--color-success-active);
--button-filled-success-active-border-color: var(--color-success-active-border);
--button-filled-success-disabled-background-color: var(--color-success-disabled);
--button-filled-success-disabled-border-color: var(--color-success-disabled-border);
--button-filled-success-disabled-text-color: var(--text-disabled-color);
--button-filled-info-background-color: var(--color-info-default);
--button-filled-info-border-color: var(--color-info-default-border);
--button-filled-info-text-color: var(--text-control-color);
--button-filled-info-focus-background-color: var(--color-info-focus);
--button-filled-info-focus-border-color: var(--color-info-focus-border);
--button-filled-info-hover-background-color: var(--color-info-hover);
--button-filled-info-hover-border-color: var(--color-info-hover-border);
--button-filled-info-active-background-color: var(--color-info-active);
--button-filled-info-active-border-color: var(--color-info-active-border);
--button-filled-info-disabled-background-color: var(--color-info-disabled);
--button-filled-info-disabled-border-color: var(--color-info-disabled-border);
--button-filled-info-disabled-text-color: var(--text-disabled-color);
--button-filled-warning-background-color: var(--color-warning-default);
--button-filled-warning-border-color: var(--color-warning-default-border);
--button-filled-warning-text-color: var(--text-control-color);
--button-filled-warning-focus-background-color: var(--color-warning-focus);
--button-filled-warning-focus-border-color: var(--color-warning-focus-border);
--button-filled-warning-hover-background-color: var(--color-warning-hover);
--button-filled-warning-hover-border-color: var(--color-warning-hover-border);
--button-filled-warning-active-background-color: var(--color-warning-active);
--button-filled-warning-active-border-color: var(--color-warning-active-border);
--button-filled-warning-disabled-background-color: var(--color-warning-disabled);
--button-filled-warning-disabled-border-color: var(--color-warning-disabled-border);
--button-filled-warning-disabled-text-color: var(--text-disabled-color);
--button-filled-danger-background-color: var(--color-danger-default);
--button-filled-danger-border-color: var(--color-danger-default-border);
--button-filled-danger-text-color: var(--text-control-color);
--button-filled-danger-focus-background-color: var(--color-danger-focus);
--button-filled-danger-focus-border-color: var(--color-danger-focus-border);
--button-filled-danger-hover-background-color: var(--color-danger-hover);
--button-filled-danger-hover-border-color: var(--color-danger-hover-border);
--button-filled-danger-active-background-color: var(--color-danger-active);
--button-filled-danger-active-border-color: var(--color-danger-active-border);
--button-filled-danger-disabled-background-color: var(--color-danger-disabled);
--button-filled-danger-disabled-border-color: var(--color-danger-disabled-border);
--button-filled-danger-disabled-text-color: var(--text-disabled-color);
--button-filled-control-background-color: var(--color-control-default);
--button-filled-control-border-color: var(--color-control-default-border);
--button-filled-control-text-color: var(--color-basic-800);
--button-filled-control-focus-background-color: var(--color-control-focus);
--button-filled-control-focus-border-color: var(--color-control-focus-border);
--button-filled-control-hover-background-color: var(--color-control-hover);
--button-filled-control-hover-border-color: var(--color-control-hover-border);
--button-filled-control-active-background-color: var(--color-control-active);
--button-filled-control-active-border-color: var(--color-control-active-border);
--button-filled-control-disabled-background-color: var(--color-control-disabled);
--button-filled-control-disabled-border-color: var(--color-control-disabled-border);
--button-filled-control-disabled-text-color: var(--text-disabled-color);
--button-outline-border-style: solid;
--button-outline-border-width: 0.0625rem;
--button-outline-text-transform: uppercase;
--button-outline-focus-inset-shadow-length: 0 0 0 100vmax;
--button-outline-tiny-padding: 0.3125rem 0.625rem;
--button-outline-small-padding: 0.4375rem 0.875rem;
--button-outline-medium-padding: 0.6875rem 1.125rem;
--button-outline-large-padding: 0.8125rem 1.125rem;
--button-outline-giant-padding: 0.9375rem 1.375rem;
--button-outline-basic-background-color: var(--color-basic-transparent-default);
--button-outline-basic-border-color: var(--color-basic-transparent-default-border);
--button-outline-basic-text-color: var(--text-hint-color);
--button-outline-basic-focus-background-color: var(--color-basic-transparent-focus);
--button-outline-basic-focus-border-color: var(--color-basic-transparent-focus-border);
--button-outline-basic-focus-text-color: var(--text-hint-color);
--button-outline-basic-hover-background-color: var(--color-basic-transparent-hover);
--button-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border);
--button-outline-basic-hover-text-color: var(--text-hint-color);
--button-outline-basic-active-background-color: var(--color-basic-transparent-active);
--button-outline-basic-active-border-color: var(--color-basic-transparent-active-border);
--button-outline-basic-active-text-color: var(--text-hint-color);
--button-outline-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--button-outline-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--button-outline-basic-disabled-text-color: var(--text-disabled-color);
--button-outline-primary-background-color: var(--color-primary-transparent-default);
--button-outline-primary-border-color: var(--color-primary-transparent-default-border);
--button-outline-primary-text-color: var(--text-primary-color);
--button-outline-primary-focus-background-color: var(--color-primary-transparent-focus);
--button-outline-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--button-outline-primary-focus-text-color: var(--text-primary-color);
--button-outline-primary-hover-background-color: var(--color-primary-transparent-hover);
--button-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--button-outline-primary-hover-text-color: var(--text-primary-color);
--button-outline-primary-active-background-color: var(--color-primary-transparent-active);
--button-outline-primary-active-border-color: var(--color-primary-transparent-active-border);
--button-outline-primary-active-text-color: var(--text-primary-color);
--button-outline-primary-disabled-background-color: var(--color-primary-transparent-disabled);
--button-outline-primary-disabled-border-color: var(--color-primary-transparent-disabled-border);
--button-outline-primary-disabled-text-color: var(--text-disabled-color);
--button-outline-success-background-color: var(--color-success-transparent-default);
--button-outline-success-border-color: var(--color-success-transparent-default-border);
--button-outline-success-text-color: var(--text-success-color);
--button-outline-success-focus-background-color: var(--color-success-transparent-focus);
--button-outline-success-focus-border-color: var(--color-success-transparent-focus-border);
--button-outline-success-focus-text-color: var(--text-success-color);
--button-outline-success-hover-background-color: var(--color-success-transparent-hover);
--button-outline-success-hover-border-color: var(--color-success-transparent-hover-border);
--button-outline-success-hover-text-color: var(--text-success-color);
--button-outline-success-active-background-color: var(--color-success-transparent-active);
--button-outline-success-active-border-color: var(--color-success-transparent-active-border);
--button-outline-success-active-text-color: var(--text-success-color);
--button-outline-success-disabled-background-color: var(--color-success-transparent-disabled);
--button-outline-success-disabled-border-color: var(--color-success-transparent-disabled-border);
--button-outline-success-disabled-text-color: var(--text-disabled-color);
--button-outline-info-background-color: var(--color-info-transparent-default);
--button-outline-info-border-color: var(--color-info-transparent-default-border);
--button-outline-info-text-color: var(--text-info-color);
--button-outline-info-focus-background-color: var(--color-info-transparent-focus);
--button-outline-info-focus-border-color: var(--color-info-transparent-focus-border);
--button-outline-info-focus-text-color: var(--text-info-color);
--button-outline-info-hover-background-color: var(--color-info-transparent-hover);
--button-outline-info-hover-border-color: var(--color-info-transparent-hover-border);
--button-outline-info-hover-text-color: var(--text-info-color);
--button-outline-info-active-background-color: var(--color-info-transparent-active);
--button-outline-info-active-border-color: var(--color-info-transparent-active-border);
--button-outline-info-active-text-color: var(--text-info-color);
--button-outline-info-disabled-background-color: var(--color-info-transparent-disabled);
--button-outline-info-disabled-border-color: var(--color-info-transparent-disabled-border);
--button-outline-info-disabled-text-color: var(--text-disabled-color);
--button-outline-warning-background-color: var(--color-warning-transparent-default);
--button-outline-warning-border-color: var(--color-warning-transparent-default-border);
--button-outline-warning-text-color: var(--text-warning-color);
--button-outline-warning-focus-background-color: var(--color-warning-transparent-focus);
--button-outline-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--button-outline-warning-focus-text-color: var(--text-warning-color);
--button-outline-warning-hover-background-color: var(--color-warning-transparent-hover);
--button-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--button-outline-warning-hover-text-color: var(--text-warning-color);
--button-outline-warning-active-background-color: var(--color-warning-transparent-active);
--button-outline-warning-active-border-color: var(--color-warning-transparent-active-border);
--button-outline-warning-active-text-color: var(--text-warning-color);
--button-outline-warning-disabled-background-color: var(--color-warning-transparent-disabled);
--button-outline-warning-disabled-border-color: var(--color-warning-transparent-disabled-border);
--button-outline-warning-disabled-text-color: var(--text-disabled-color);
--button-outline-danger-background-color: var(--color-danger-transparent-default);
--button-outline-danger-border-color: var(--color-danger-transparent-default-border);
--button-outline-danger-text-color: var(--text-danger-color);
--button-outline-danger-focus-background-color: var(--color-danger-transparent-focus);
--button-outline-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--button-outline-danger-focus-text-color: var(--text-danger-color);
--button-outline-danger-hover-background-color: var(--color-danger-transparent-hover);
--button-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--button-outline-danger-hover-text-color: var(--text-danger-color);
--button-outline-danger-active-background-color: var(--color-danger-transparent-active);
--button-outline-danger-active-border-color: var(--color-danger-transparent-active-border);
--button-outline-danger-active-text-color: var(--text-danger-color);
--button-outline-danger-disabled-background-color: var(--color-danger-transparent-disabled);
--button-outline-danger-disabled-border-color: var(--color-danger-transparent-disabled-border);
--button-outline-danger-disabled-text-color: var(--text-disabled-color);
--button-outline-control-background-color: var(--color-control-transparent-default);
--button-outline-control-border-color: var(--color-control-transparent-default-border);
--button-outline-control-text-color: var(--text-control-color);
--button-outline-control-focus-background-color: var(--color-control-transparent-focus);
--button-outline-control-focus-border-color: var(--color-control-transparent-focus-border);
--button-outline-control-focus-text-color: var(--text-control-color);
--button-outline-control-hover-background-color: var(--color-control-transparent-hover);
--button-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--button-outline-control-hover-text-color: var(--text-control-color);
--button-outline-control-active-background-color: var(--color-control-transparent-active);
--button-outline-control-active-border-color: var(--color-control-transparent-active-border);
--button-outline-control-active-text-color: var(--text-control-color);
--button-outline-control-disabled-background-color: var(--color-control-transparent-disabled);
--button-outline-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--button-outline-control-disabled-text-color: var(--text-disabled-color);
--button-ghost-background-color: transparent;
--button-ghost-border-color: transparent;
--button-ghost-border-style: solid;
--button-ghost-border-width: 0.0625rem;
--button-ghost-text-transform: uppercase;
--button-ghost-focus-inset-shadow-length: 0 0 0 100vmax;
--button-ghost-tiny-padding: 0.3125rem 0.625rem;
--button-ghost-small-padding: 0.4375rem 0.875rem;
--button-ghost-medium-padding: 0.6875rem 1.125rem;
--button-ghost-large-padding: 0.8125rem 1.125rem;
--button-ghost-giant-padding: 0.9375rem 1.375rem;
--button-ghost-basic-text-color: var(--color-basic-600);
--button-ghost-basic-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-basic-focus-text-color: var(--color-basic-600);
--button-ghost-basic-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-basic-hover-border-color: transparent;
--button-ghost-basic-hover-text-color: var(--color-basic-600);
--button-ghost-basic-active-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-active-border-color: transparent;
--button-ghost-basic-active-text-color: var(--color-basic-600);
--button-ghost-basic-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-basic-disabled-border-color: transparent;
--button-ghost-basic-disabled-text-color: var(--text-disabled-color);
--button-ghost-primary-text-color: var(--text-primary-color);
--button-ghost-primary-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-primary-focus-text-color: var(--text-primary-color);
--button-ghost-primary-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-primary-hover-border-color: transparent;
--button-ghost-primary-hover-text-color: var(--text-primary-color);
--button-ghost-primary-active-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-active-border-color: transparent;
--button-ghost-primary-active-text-color: var(--text-primary-color);
--button-ghost-primary-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-primary-disabled-border-color: transparent;
--button-ghost-primary-disabled-text-color: var(--text-disabled-color);
--button-ghost-success-text-color: var(--text-success-color);
--button-ghost-success-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-success-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-success-focus-text-color: var(--text-success-color);
--button-ghost-success-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-success-hover-border-color: transparent;
--button-ghost-success-hover-text-color: var(--text-success-color);
--button-ghost-success-active-background-color: var(--color-basic-transparent-200);
--button-ghost-success-active-border-color: transparent;
--button-ghost-success-active-text-color: var(--text-success-color);
--button-ghost-success-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-success-disabled-border-color: transparent;
--button-ghost-success-disabled-text-color: var(--text-disabled-color);
--button-ghost-info-text-color: var(--text-info-color);
--button-ghost-info-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-info-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-info-focus-text-color: var(--text-info-color);
--button-ghost-info-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-info-hover-border-color: transparent;
--button-ghost-info-hover-text-color: var(--text-info-color);
--button-ghost-info-active-background-color: var(--color-basic-transparent-200);
--button-ghost-info-active-border-color: transparent;
--button-ghost-info-active-text-color: var(--text-info-color);
--button-ghost-info-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-info-disabled-border-color: transparent;
--button-ghost-info-disabled-text-color: var(--text-disabled-color);
--button-ghost-warning-text-color: var(--text-warning-color);
--button-ghost-warning-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-warning-focus-text-color: var(--text-warning-color);
--button-ghost-warning-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-warning-hover-border-color: transparent;
--button-ghost-warning-hover-text-color: var(--text-warning-color);
--button-ghost-warning-active-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-active-border-color: transparent;
--button-ghost-warning-active-text-color: var(--text-warning-color);
--button-ghost-warning-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-warning-disabled-border-color: transparent;
--button-ghost-warning-disabled-text-color: var(--text-disabled-color);
--button-ghost-danger-text-color: var(--text-danger-color);
--button-ghost-danger-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-danger-focus-text-color: var(--text-danger-color);
--button-ghost-danger-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-danger-hover-border-color: transparent;
--button-ghost-danger-hover-text-color: var(--text-danger-color);
--button-ghost-danger-active-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-active-border-color: transparent;
--button-ghost-danger-active-text-color: var(--text-danger-color);
--button-ghost-danger-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-danger-disabled-border-color: transparent;
--button-ghost-danger-disabled-text-color: var(--text-disabled-color);
--button-ghost-control-text-color: var(--color-basic-100);
--button-ghost-control-focus-background-color: var(--color-basic-transparent-200);
--button-ghost-control-focus-border-color: var(--color-basic-transparent-500);
--button-ghost-control-focus-text-color: var(--color-basic-100);
--button-ghost-control-hover-background-color: var(--color-basic-transparent-100);
--button-ghost-control-hover-border-color: transparent;
--button-ghost-control-hover-text-color: var(--color-basic-100);
--button-ghost-control-active-background-color: var(--color-basic-transparent-200);
--button-ghost-control-active-border-color: transparent;
--button-ghost-control-active-text-color: var(--color-basic-100);
--button-ghost-control-disabled-background-color: var(--color-basic-transparent-200);
--button-ghost-control-disabled-border-color: transparent;
--button-ghost-control-disabled-text-color: var(--text-disabled-color);
--button-hero-border-color: transparent;
--button-hero-border-style: solid;
--button-hero-border-width: 0;
--button-hero-text-transform: uppercase;
--button-hero-tiny-padding: 0.375rem 0.6875rem;
--button-hero-small-padding: 0.5rem 0.9375rem;
--button-hero-medium-padding: 0.75rem 1.1875rem;
--button-hero-large-padding: 0.875rem 1.1875rem;
--button-hero-giant-padding: 1rem 1.4375rem;
--button-hero-shadow: 0 0 transparent;
--button-hero-text-shadow: var(--shadow);
--button-hero-bevel-size: 0 0 0 0;
--button-hero-glow-size: 0 0 0 0;
--button-hero-outline-color: var(--outline-color);
--button-hero-outline-width: var(--outline-width);
--button-hero-basic-text-color: var(--color-basic-600);
--button-hero-basic-bevel-color: var(--color-basic-600);
--button-hero-basic-glow-color: var(--color-basic-700);
--button-hero-basic-left-background-color: var(--color-basic-200);
--button-hero-basic-right-background-color: var(--color-basic-default);
--button-hero-basic-focus-left-background-color: var(--color-basic-300);
--button-hero-basic-focus-right-background-color: var(--color-basic-focus);
--button-hero-basic-hover-left-background-color: var(--color-basic-100);
--button-hero-basic-hover-right-background-color: var(--color-basic-hover);
--button-hero-basic-active-left-background-color: var(--color-basic-300);
--button-hero-basic-active-right-background-color: var(--color-basic-active);
--button-hero-basic-disabled-background-color: var(--color-basic-disabled);
--button-hero-basic-disabled-text-color: var(--text-disabled-color);
--button-hero-primary-text-color: var(--text-control-color);
--button-hero-primary-bevel-color: var(--color-primary-600);
--button-hero-primary-glow-color: var(--color-primary-700);
--button-hero-primary-left-background-color: var(--color-primary-400);
--button-hero-primary-right-background-color: var(--color-primary-default);
--button-hero-primary-focus-left-background-color: var(--color-primary-500);
--button-hero-primary-focus-right-background-color: var(--color-primary-focus);
--button-hero-primary-hover-left-background-color: var(--color-primary-300);
--button-hero-primary-hover-right-background-color: var(--color-primary-hover);
--button-hero-primary-active-left-background-color: var(--color-primary-500);
--button-hero-primary-active-right-background-color: var(--color-primary-active);
--button-hero-primary-disabled-background-color: var(--color-primary-disabled);
--button-hero-primary-disabled-text-color: var(--text-disabled-color);
--button-hero-success-text-color: var(--text-control-color);
--button-hero-success-bevel-color: var(--color-success-600);
--button-hero-success-glow-color: var(--color-success-700);
--button-hero-success-left-background-color: var(--color-success-400);
--button-hero-success-right-background-color: var(--color-success-default);
--button-hero-success-focus-left-background-color: var(--color-success-500);
--button-hero-success-focus-right-background-color: var(--color-success-focus);
--button-hero-success-hover-left-background-color: var(--color-success-300);
--button-hero-success-hover-right-background-color: var(--color-success-hover);
--button-hero-success-active-left-background-color: var(--color-success-500);
--button-hero-success-active-right-background-color: var(--color-success-active);
--button-hero-success-disabled-background-color: var(--color-success-disabled);
--button-hero-success-disabled-text-color: var(--text-disabled-color);
--button-hero-info-text-color: var(--text-control-color);
--button-hero-info-bevel-color: var(--color-info-600);
--button-hero-info-glow-color: var(--color-info-700);
--button-hero-info-left-background-color: var(--color-info-400);
--button-hero-info-right-background-color: var(--color-info-default);
--button-hero-info-focus-left-background-color: var(--color-info-500);
--button-hero-info-focus-right-background-color: var(--color-info-focus);
--button-hero-info-hover-left-background-color: var(--color-info-300);
--button-hero-info-hover-right-background-color: var(--color-info-hover);
--button-hero-info-active-left-background-color: var(--color-info-500);
--button-hero-info-active-right-background-color: var(--color-info-active);
--button-hero-info-disabled-background-color: var(--color-info-disabled);
--button-hero-info-disabled-text-color: var(--text-disabled-color);
--button-hero-warning-text-color: var(--text-control-color);
--button-hero-warning-bevel-color: var(--color-warning-600);
--button-hero-warning-glow-color: var(--color-warning-700);
--button-hero-warning-left-background-color: var(--color-warning-400);
--button-hero-warning-right-background-color: var(--color-warning-default);
--button-hero-warning-focus-left-background-color: var(--color-warning-500);
--button-hero-warning-focus-right-background-color: var(--color-warning-focus);
--button-hero-warning-hover-left-background-color: var(--color-warning-300);
--button-hero-warning-hover-right-background-color: var(--color-warning-hover);
--button-hero-warning-active-left-background-color: var(--color-warning-500);
--button-hero-warning-active-right-background-color: var(--color-warning-active);
--button-hero-warning-disabled-background-color: var(--color-warning-disabled);
--button-hero-warning-disabled-text-color: var(--text-disabled-color);
--button-hero-danger-text-color: var(--text-control-color);
--button-hero-danger-bevel-color: var(--color-danger-600);
--button-hero-danger-glow-color: var(--color-danger-700);
--button-hero-danger-left-background-color: var(--color-danger-400);
--button-hero-danger-right-background-color: var(--color-danger-default);
--button-hero-danger-focus-left-background-color: var(--color-danger-500);
--button-hero-danger-focus-right-background-color: var(--color-danger-focus);
--button-hero-danger-hover-left-background-color: var(--color-danger-300);
--button-hero-danger-hover-right-background-color: var(--color-danger-hover);
--button-hero-danger-active-left-background-color: var(--color-danger-500);
--button-hero-danger-active-right-background-color: var(--color-danger-active);
--button-hero-danger-disabled-background-color: var(--color-danger-disabled);
--button-hero-danger-disabled-text-color: var(--text-disabled-color);
--button-hero-control-text-color: var(--color-basic-800);
--button-hero-control-bevel-color: var(--color-basic-600);
--button-hero-control-glow-color: var(--color-basic-700);
--button-hero-control-left-background-color: var(--color-control-default);
--button-hero-control-right-background-color: var(--color-control-default);
--button-hero-control-focus-left-background-color: var(--color-basic-200);
--button-hero-control-focus-right-background-color: var(--color-control-focus);
--button-hero-control-hover-left-background-color: var(--color-basic-100);
--button-hero-control-hover-right-background-color: var(--color-control-hover);
--button-hero-control-active-left-background-color: var(--color-basic-200);
--button-hero-control-active-right-background-color: var(--color-control-active);
--button-hero-control-disabled-background-color: var(--color-basic-transparent-300);
--button-hero-control-disabled-text-color: var(--text-disabled-color);
--button-group-filled-button-basic-text-color: var(--text-hint-color);
--button-group-filled-button-primary-text-color: var(--button-filled-primary-text-color);
--button-group-filled-button-success-text-color: var(--button-filled-success-text-color);
--button-group-filled-button-info-text-color: var(--button-filled-info-text-color);
--button-group-filled-button-warning-text-color: var(--button-filled-warning-text-color);
--button-group-filled-button-danger-text-color: var(--button-filled-danger-text-color);
--button-group-filled-button-control-text-color: var(--button-filled-control-text-color);
--button-group-filled-basic-divider-color: var(--color-basic-focus-border);
--button-group-filled-primary-divider-color: var(--color-primary-focus);
--button-group-filled-success-divider-color: var(--color-success-focus);
--button-group-filled-info-divider-color: var(--color-info-focus);
--button-group-filled-warning-divider-color: var(--color-warning-focus);
--button-group-filled-danger-divider-color: var(--color-danger-focus);
--button-group-filled-control-divider-color: var(--color-control-focus);
--button-group-ghost-divider-color: var(--color-basic-focus-border);
--icon-button-filled-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-filled-small-padding: 0.5625rem 0.4375rem;
--icon-button-filled-medium-padding: 0.6875rem 0.5625rem;
--icon-button-filled-large-padding: 0.8125rem 0.6875rem;
--icon-button-filled-giant-padding: 1.0625rem 0.9375rem;
--icon-button-outline-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-outline-small-padding: 0.5625rem 0.4375rem;
--icon-button-outline-medium-padding: 0.6875rem 0.5625rem;
--icon-button-outline-large-padding: 0.8125rem 0.6875rem;
--icon-button-outline-giant-padding: 1.0625rem 0.9375rem;
--icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem;
--icon-button-ghost-small-padding: 0.5625rem 0.4375rem;
--icon-button-ghost-medium-padding: 0.6875rem 0.5625rem;
--icon-button-ghost-large-padding: 0.8125rem 0.6875rem;
--icon-button-ghost-giant-padding: 1.0625rem 0.9375rem;
--icon-button-hero-tiny-padding: 0.5rem 0.375rem;
--icon-button-hero-small-padding: 0.5625rem 0.5rem;
--icon-button-hero-medium-padding: 0.75rem 0.5625rem;
--icon-button-hero-large-padding: 0.875rem 0.6875rem;
--icon-button-hero-giant-padding: 1.0625rem 1rem;
--input-border-style: solid;
--input-border-width: 1px;
--input-outline-color: var(--outline-color);
--input-outline-width: var(--outline-width);
--input-placeholder-text-font-family: var(--text-paragraph-font-family);
--input-text-font-family: var(--text-subtitle-font-family);
--input-basic-text-color: var(--text-basic-color);
--input-basic-placeholder-text-color: var(--text-hint-color);
--input-basic-background-color: var(--background-basic-color-2);
--input-basic-border-color: var(--border-basic-color-4);
--input-basic-focus-background-color: var(--background-basic-color-1);
--input-basic-focus-border-color: var(--color-primary-default-border);
--input-basic-hover-background-color: var(--background-basic-color-3);
--input-basic-hover-border-color: var(--border-basic-color-4);
--input-basic-disabled-background-color: var(--background-basic-color-2);
--input-basic-disabled-border-color: var(--border-basic-color-4);
--input-basic-disabled-text-color: var(--text-disabled-color);
--input-basic-disabled-placeholder-text-color: var(--text-disabled-color);
--input-primary-text-color: var(--text-basic-color);
--input-primary-placeholder-text-color: var(--text-hint-color);
--input-primary-background-color: var(--background-basic-color-2);
--input-primary-border-color: var(--color-primary-default);
--input-primary-focus-background-color: var(--background-basic-color-1);
--input-primary-focus-border-color: var(--color-primary-focus-border);
--input-primary-hover-background-color: var(--background-basic-color-3);
--input-primary-hover-border-color: var(--color-primary-hover-border);
--input-primary-disabled-background-color: var(--background-basic-color-2);
--input-primary-disabled-border-color: var(--border-basic-color-4);
--input-primary-disabled-text-color: var(--text-disabled-color);
--input-primary-disabled-placeholder-text-color: var(--text-disabled-color);
--input-success-text-color: var(--text-basic-color);
--input-success-placeholder-text-color: var(--text-hint-color);
--input-success-background-color: var(--background-basic-color-2);
--input-success-border-color: var(--color-success-default);
--input-success-focus-background-color: var(--background-basic-color-1);
--input-success-focus-border-color: var(--color-success-focus-border);
--input-success-hover-background-color: var(--background-basic-color-3);
--input-success-hover-border-color: var(--color-success-hover-border);
--input-success-disabled-background-color: var(--background-basic-color-2);
--input-success-disabled-border-color: var(--border-basic-color-4);
--input-success-disabled-text-color: var(--text-disabled-color);
--input-success-disabled-placeholder-text-color: var(--text-disabled-color);
--input-info-text-color: var(--text-basic-color);
--input-info-placeholder-text-color: var(--text-hint-color);
--input-info-background-color: var(--background-basic-color-2);
--input-info-border-color: var(--color-info-default);
--input-info-focus-background-color: var(--background-basic-color-1);
--input-info-focus-border-color: var(--color-info-focus-border);
--input-info-hover-background-color: var(--background-basic-color-3);
--input-info-hover-border-color: var(--color-info-hover-border);
--input-info-disabled-background-color: var(--background-basic-color-2);
--input-info-disabled-border-color: var(--border-basic-color-4);
--input-info-disabled-text-color: var(--text-disabled-color);
--input-info-disabled-placeholder-text-color: var(--text-disabled-color);
--input-warning-text-color: var(--text-basic-color);
--input-warning-placeholder-text-color: var(--text-hint-color);
--input-warning-background-color: var(--background-basic-color-2);
--input-warning-border-color: var(--color-warning-default);
--input-warning-focus-background-color: var(--background-basic-color-1);
--input-warning-focus-border-color: var(--color-warning-focus-border);
--input-warning-hover-background-color: var(--background-basic-color-3);
--input-warning-hover-border-color: var(--color-warning-hover-border);
--input-warning-disabled-background-color: var(--background-basic-color-2);
--input-warning-disabled-border-color: var(--border-basic-color-4);
--input-warning-disabled-text-color: var(--text-disabled-color);
--input-warning-disabled-placeholder-text-color: var(--text-disabled-color);
--input-danger-text-color: var(--text-basic-color);
--input-danger-placeholder-text-color: var(--text-hint-color);
--input-danger-background-color: var(--background-basic-color-2);
--input-danger-border-color: var(--color-danger-default);
--input-danger-focus-background-color: var(--background-basic-color-1);
--input-danger-focus-border-color: var(--color-danger-focus-border);
--input-danger-hover-background-color: var(--background-basic-color-3);
--input-danger-hover-border-color: var(--color-danger-hover-border);
--input-danger-disabled-background-color: var(--background-basic-color-2);
--input-danger-disabled-border-color: var(--border-basic-color-4);
--input-danger-disabled-text-color: var(--text-disabled-color);
--input-danger-disabled-placeholder-text-color: var(--text-disabled-color);
--input-control-text-color: var(--text-control-color);
--input-control-placeholder-text-color: var(--text-control-color);
--input-control-background-color: var(--color-basic-control-transparent-300);
--input-control-border-color: var(--color-basic-control-transparent-500);
--input-control-focus-background-color: var(--color-basic-control-transparent-500);
--input-control-focus-border-color: var(--color-control-transparent-focus-border);
--input-control-hover-background-color: var(--color-basic-control-transparent-400);
--input-control-hover-border-color: var(--color-control-transparent-hover-border);
--input-control-disabled-background-color: var(--color-control-transparent-disabled);
--input-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--input-control-disabled-text-color: var(--text-control-color);
--input-control-disabled-placeholder-text-color: var(--text-control-color);
--input-rectangle-border-radius: var(--border-radius);
--input-semi-round-border-radius: 0.75rem;
--input-round-border-radius: 1.5rem;
--input-tiny-text-font-size: var(--text-caption-2-font-size);
--input-tiny-text-font-weight: var(--text-caption-2-font-weight);
--input-tiny-text-line-height: var(--text-caption-2-line-height);
--input-tiny-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-tiny-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-tiny-padding: 0.1875rem 1rem;
--input-tiny-max-width: 20rem;
--input-small-text-font-size: var(--text-subtitle-2-font-size);
--input-small-text-font-weight: var(--text-subtitle-2-font-weight);
--input-small-text-line-height: var(--text-subtitle-2-line-height);
--input-small-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-small-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-small-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-small-padding: 0.1875rem 1rem;
--input-small-max-width: 20rem;
--input-medium-text-font-size: var(--text-subtitle-font-size);
--input-medium-text-font-weight: var(--text-subtitle-font-weight);
--input-medium-text-line-height: var(--text-subtitle-line-height);
--input-medium-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-medium-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-medium-padding: 0.4375rem 1rem;
--input-medium-max-width: 20rem;
--input-large-text-font-size: var(--text-subtitle-font-size);
--input-large-text-font-weight: var(--text-subtitle-font-weight);
--input-large-text-line-height: var(--text-subtitle-line-height);
--input-large-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-large-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-large-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-large-padding: 0.6875rem 1rem;
--input-large-max-width: 30rem;
--input-giant-text-font-size: var(--text-heading-6-font-size);
--input-giant-text-font-weight: var(--text-heading-6-font-weight);
--input-giant-text-line-height: var(--text-heading-6-line-height);
--input-giant-placeholder-text-font-size: var(--text-paragraph-font-size);
--input-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--input-giant-placeholder-text-line-height: var(--text-paragraph-line-height);
--input-giant-padding: 0.9375rem 1rem;
--input-giant-max-width: 30rem;
--checkbox-height: 1.25rem;
--checkbox-width: 1.25rem;
--checkbox-border-style: solid;
--checkbox-border-width: 1px;
--checkbox-border-radius: 3px;
--checkbox-outline-width: var(--outline-width);
--checkbox-outline-color: var(--outline-color);
--checkbox-text-font-family: var(--text-subtitle-2-font-family);
--checkbox-text-font-size: var(--text-subtitle-2-font-size);
--checkbox-text-font-weight: var(--text-subtitle-2-font-weight);
--checkbox-text-line-height: var(--text-subtitle-2-line-height);
--checkbox-text-space: 0.6875rem;
--checkbox-padding: 0;
--checkbox-focus-inset-shadow-length: 0 0 0 100vmax;
--checkbox-basic-text-color: var(--text-basic-color);
--checkbox-basic-background-color: var(--color-basic-transparent-default);
--checkbox-basic-border-color: var(--color-basic-transparent-default-border);
--checkbox-basic-checked-background-color: var(--color-primary-default);
--checkbox-basic-checked-border-color: var(--color-primary-default-border);
--checkbox-basic-checked-checkmark-color: var(--text-control-color);
--checkbox-basic-indeterminate-background-color: var(--color-primary-default);
--checkbox-basic-indeterminate-border-color: var(--color-primary-default-border);
--checkbox-basic-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-basic-focus-background-color: var(--color-basic-transparent-focus);
--checkbox-basic-focus-border-color: var(--color-basic-transparent-focus-border);
--checkbox-basic-focus-checked-background-color: var(--color-primary-focus);
--checkbox-basic-focus-checked-border-color: var(--color-primary-focus-border);
--checkbox-basic-hover-background-color: var(--color-primary-transparent-hover);
--checkbox-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--checkbox-basic-hover-checked-background-color: var(--color-primary-hover);
--checkbox-basic-hover-checked-border-color: var(--color-primary-hover-border);
--checkbox-basic-active-background-color: var(--color-basic-transparent-active);
--checkbox-basic-active-border-color: var(--color-basic-transparent-active-border);
--checkbox-basic-active-checked-background-color: var(--color-primary-active);
--checkbox-basic-active-checked-border-color: var(--color-primary-active-border);
--checkbox-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-basic-disabled-checkmark-color: var(--text-control-color);
--checkbox-basic-disabled-text-color: var(--text-disabled-color);
--checkbox-basic-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-basic-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-primary-text-color: var(--text-basic-color);
--checkbox-primary-background-color: var(--color-primary-transparent-default);
--checkbox-primary-border-color: var(--color-primary-transparent-default-border);
--checkbox-primary-checked-background-color: var(--color-primary-default);
--checkbox-primary-checked-border-color: var(--color-primary-default-border);
--checkbox-primary-checked-checkmark-color: var(--text-control-color);
--checkbox-primary-indeterminate-background-color: var(--color-primary-default);
--checkbox-primary-indeterminate-border-color: var(--color-primary-default-border);
--checkbox-primary-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-primary-focus-background-color: var(--color-primary-transparent-focus);
--checkbox-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--checkbox-primary-focus-checked-background-color: var(--color-primary-focus);
--checkbox-primary-focus-checked-border-color: var(--color-primary-focus-border);
--checkbox-primary-hover-background-color: var(--color-primary-transparent-hover);
--checkbox-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--checkbox-primary-hover-checked-background-color: var(--color-primary-hover);
--checkbox-primary-hover-checked-border-color: var(--color-primary-hover-border);
--checkbox-primary-active-background-color: var(--color-primary-transparent-active);
--checkbox-primary-active-border-color: var(--color-primary-transparent-active-border);
--checkbox-primary-active-checked-background-color: var(--color-primary-active);
--checkbox-primary-active-checked-border-color: var(--color-primary-active-border);
--checkbox-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-primary-disabled-checkmark-color: var(--text-control-color);
--checkbox-primary-disabled-text-color: var(--text-disabled-color);
--checkbox-primary-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-primary-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-success-text-color: var(--text-basic-color);
--checkbox-success-background-color: var(--color-success-transparent-default);
--checkbox-success-border-color: var(--color-success-transparent-default-border);
--checkbox-success-checked-background-color: var(--color-success-default);
--checkbox-success-checked-border-color: var(--color-success-default-border);
--checkbox-success-checked-checkmark-color: var(--text-control-color);
--checkbox-success-indeterminate-background-color: var(--color-success-default);
--checkbox-success-indeterminate-border-color: var(--color-success-default-border);
--checkbox-success-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-success-focus-background-color: var(--color-success-transparent-focus);
--checkbox-success-focus-border-color: var(--color-success-transparent-focus-border);
--checkbox-success-focus-checked-background-color: var(--color-success-focus);
--checkbox-success-focus-checked-border-color: var(--color-success-focus-border);
--checkbox-success-hover-background-color: var(--color-success-transparent-hover);
--checkbox-success-hover-border-color: var(--color-success-transparent-hover-border);
--checkbox-success-hover-checked-background-color: var(--color-success-hover);
--checkbox-success-hover-checked-border-color: var(--color-success-hover-border);
--checkbox-success-active-background-color: var(--color-success-transparent-active);
--checkbox-success-active-border-color: var(--color-success-transparent-active-border);
--checkbox-success-active-checked-background-color: var(--color-success-active);
--checkbox-success-active-checked-border-color: var(--color-success-active-border);
--checkbox-success-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-success-disabled-checkmark-color: var(--text-control-color);
--checkbox-success-disabled-text-color: var(--text-disabled-color);
--checkbox-success-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-success-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-info-text-color: var(--text-basic-color);
--checkbox-info-background-color: var(--color-info-transparent-default);
--checkbox-info-border-color: var(--color-info-transparent-default-border);
--checkbox-info-checked-background-color: var(--color-info-default);
--checkbox-info-checked-border-color: var(--color-info-default-border);
--checkbox-info-checked-checkmark-color: var(--text-control-color);
--checkbox-info-indeterminate-background-color: var(--color-info-default);
--checkbox-info-indeterminate-border-color: var(--color-info-default-border);
--checkbox-info-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-info-focus-background-color: var(--color-info-transparent-focus);
--checkbox-info-focus-border-color: var(--color-info-transparent-focus-border);
--checkbox-info-focus-checked-background-color: var(--color-info-focus);
--checkbox-info-focus-checked-border-color: var(--color-info-focus-border);
--checkbox-info-hover-background-color: var(--color-info-transparent-hover);
--checkbox-info-hover-border-color: var(--color-info-transparent-hover-border);
--checkbox-info-hover-checked-background-color: var(--color-info-hover);
--checkbox-info-hover-checked-border-color: var(--color-info-hover-border);
--checkbox-info-active-background-color: var(--color-info-transparent-active);
--checkbox-info-active-border-color: var(--color-info-transparent-active-border);
--checkbox-info-active-checked-background-color: var(--color-info-active);
--checkbox-info-active-checked-border-color: var(--color-info-active-border);
--checkbox-info-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-info-disabled-checkmark-color: var(--text-control-color);
--checkbox-info-disabled-text-color: var(--text-disabled-color);
--checkbox-info-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-info-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-warning-text-color: var(--text-basic-color);
--checkbox-warning-background-color: var(--color-warning-transparent-default);
--checkbox-warning-border-color: var(--color-warning-transparent-default-border);
--checkbox-warning-checked-background-color: var(--color-warning-default);
--checkbox-warning-checked-border-color: var(--color-warning-default-border);
--checkbox-warning-checked-checkmark-color: var(--text-control-color);
--checkbox-warning-indeterminate-background-color: var(--color-warning-default);
--checkbox-warning-indeterminate-border-color: var(--color-warning-default-border);
--checkbox-warning-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-warning-focus-background-color: var(--color-warning-transparent-focus);
--checkbox-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--checkbox-warning-focus-checked-background-color: var(--color-warning-focus);
--checkbox-warning-focus-checked-border-color: var(--color-warning-focus-border);
--checkbox-warning-hover-background-color: var(--color-warning-transparent-hover);
--checkbox-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--checkbox-warning-hover-checked-background-color: var(--color-warning-hover);
--checkbox-warning-hover-checked-border-color: var(--color-warning-hover-border);
--checkbox-warning-active-background-color: var(--color-warning-transparent-active);
--checkbox-warning-active-border-color: var(--color-warning-transparent-active-border);
--checkbox-warning-active-checked-background-color: var(--color-warning-active);
--checkbox-warning-active-checked-border-color: var(--color-warning-active-border);
--checkbox-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-warning-disabled-checkmark-color: var(--text-control-color);
--checkbox-warning-disabled-text-color: var(--text-disabled-color);
--checkbox-warning-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-warning-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-danger-text-color: var(--text-basic-color);
--checkbox-danger-background-color: var(--color-danger-transparent-default);
--checkbox-danger-border-color: var(--color-danger-transparent-default-border);
--checkbox-danger-checked-background-color: var(--color-danger-default);
--checkbox-danger-checked-border-color: var(--color-danger-default-border);
--checkbox-danger-checked-checkmark-color: var(--text-control-color);
--checkbox-danger-indeterminate-background-color: var(--color-danger-default);
--checkbox-danger-indeterminate-border-color: var(--color-danger-default-border);
--checkbox-danger-indeterminate-checkmark-color: var(--text-control-color);
--checkbox-danger-focus-background-color: var(--color-danger-transparent-focus);
--checkbox-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--checkbox-danger-focus-checked-background-color: var(--color-danger-focus);
--checkbox-danger-focus-checked-border-color: var(--color-danger-focus-border);
--checkbox-danger-hover-background-color: var(--color-danger-transparent-hover);
--checkbox-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--checkbox-danger-hover-checked-background-color: var(--color-danger-hover);
--checkbox-danger-hover-checked-border-color: var(--color-danger-hover-border);
--checkbox-danger-active-background-color: var(--color-danger-transparent-active);
--checkbox-danger-active-border-color: var(--color-danger-transparent-active-border);
--checkbox-danger-active-checked-background-color: var(--color-danger-active);
--checkbox-danger-active-checked-border-color: var(--color-danger-active-border);
--checkbox-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--checkbox-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--checkbox-danger-disabled-checkmark-color: var(--text-control-color);
--checkbox-danger-disabled-text-color: var(--text-disabled-color);
--checkbox-danger-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-danger-disabled-checked-border-color: var(--color-basic-transparent-600);
--checkbox-control-text-color: var(--text-control-color);
--checkbox-control-background-color: var(--color-control-transparent-default);
--checkbox-control-border-color: var(--color-control-transparent-default-border);
--checkbox-control-checked-background-color: var(--color-control-default);
--checkbox-control-checked-border-color: var(--color-control-default-border);
--checkbox-control-checked-checkmark-color: var(--color-basic-800);
--checkbox-control-indeterminate-background-color: var(--color-control-default);
--checkbox-control-indeterminate-border-color: var(--color-control-default-border);
--checkbox-control-indeterminate-checkmark-color: var(--color-basic-800);
--checkbox-control-focus-background-color: var(--color-control-transparent-focus);
--checkbox-control-focus-border-color: var(--color-control-transparent-focus-border);
--checkbox-control-focus-checked-background-color: var(--color-control-focus);
--checkbox-control-focus-checked-border-color: var(--color-control-focus-border);
--checkbox-control-hover-background-color: var(--color-control-transparent-hover);
--checkbox-control-hover-border-color: var(--color-control-transparent-hover-border);
--checkbox-control-hover-checked-background-color: var(--color-control-hover);
--checkbox-control-hover-checked-border-color: var(--color-control-hover-border);
--checkbox-control-active-background-color: var(--color-control-transparent-active);
--checkbox-control-active-border-color: var(--color-control-transparent-active-border);
--checkbox-control-active-checked-background-color: var(--color-control-active);
--checkbox-control-active-checked-border-color: var(--color-control-active-border);
--checkbox-control-disabled-background-color: var(--color-control-transparent-disabled);
--checkbox-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--checkbox-control-disabled-checkmark-color: var(--text-control-color);
--checkbox-control-disabled-text-color: var(--text-control-color);
--checkbox-control-disabled-checked-background-color: var(--color-basic-transparent-600);
--checkbox-control-disabled-checked-border-color: var(--color-basic-transparent-600);
--badge-dot-mode-border-radius: 0.5rem;
--badge-dot-mode-padding: 0.3rem;
--badge-border-radius: var(--border-radius);
--badge-text-font-family: var(--text-button-font-family);
--badge-text-font-size: var(--text-button-tiny-font-size);
--badge-text-font-weight: var(--text-button-font-weight);
--badge-text-line-height: var(--text-button-tiny-line-height);
--badge-padding: 0.25rem 0.4rem;
--badge-basic-background-color: var(--background-basic-color-2);
--badge-basic-text-color: var(--text-basic-color);
--badge-primary-background-color: var(--color-primary-default);
--badge-primary-text-color: var(--text-control-color);
--badge-success-background-color: var(--color-success-default);
--badge-success-text-color: var(--text-control-color);
--badge-info-background-color: var(--color-info-default);
--badge-info-text-color: var(--text-control-color);
--badge-warning-background-color: var(--color-warning-default);
--badge-warning-text-color: var(--text-control-color);
--badge-danger-background-color: var(--color-danger-default);
--badge-danger-text-color: var(--text-control-color);
--badge-control-background-color: var(--color-control-default);
--badge-control-text-color: var(--color-basic-800);
--progress-bar-animation-duration: 400ms;
--progress-bar-border-radius: var(--border-radius);
--progress-bar-text-font-family: var(--text-subtitle-font-family);
--progress-bar-tiny-height: 1rem;
--progress-bar-tiny-text-font-size: var(--text-subtitle-2-font-size);
--progress-bar-tiny-text-font-weight: var(--text-subtitle-2-font-weight);
--progress-bar-tiny-text-line-height: var(--text-subtitle-2-line-height);
--progress-bar-small-height: 1.25rem;
--progress-bar-small-text-font-size: var(--text-subtitle-2-font-size);
--progress-bar-small-text-font-weight: var(--text-subtitle-2-font-weight);
--progress-bar-small-text-line-height: var(--text-subtitle-2-line-height);
--progress-bar-medium-height: 1.375rem;
--progress-bar-medium-text-font-size: var(--text-subtitle-font-size);
--progress-bar-medium-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-medium-text-line-height: var(--text-subtitle-line-height);
--progress-bar-large-height: 1.5rem;
--progress-bar-large-text-font-size: var(--text-subtitle-font-size);
--progress-bar-large-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-large-text-line-height: var(--text-subtitle-line-height);
--progress-bar-giant-height: 1.75rem;
--progress-bar-giant-text-font-size: var(--text-subtitle-font-size);
--progress-bar-giant-text-font-weight: var(--text-subtitle-font-weight);
--progress-bar-giant-text-line-height: var(--text-subtitle-line-height);
--progress-bar-basic-background-color: var(--background-basic-color-2);
--progress-bar-basic-filled-background-color: var(--background-basic-color-4);
--progress-bar-basic-text-color: var(--text-basic-color);
--progress-bar-primary-background-color: var(--background-basic-color-3);
--progress-bar-primary-filled-background-color: var(--color-primary-default);
--progress-bar-primary-text-color: var(--text-control-color);
--progress-bar-success-background-color: var(--background-basic-color-3);
--progress-bar-success-filled-background-color: var(--color-success-default);
--progress-bar-success-text-color: var(--text-control-color);
--progress-bar-info-background-color: var(--background-basic-color-3);
--progress-bar-info-filled-background-color: var(--color-info-default);
--progress-bar-info-text-color: var(--text-control-color);
--progress-bar-warning-background-color: var(--background-basic-color-3);
--progress-bar-warning-filled-background-color: var(--color-warning-default);
--progress-bar-warning-text-color: var(--text-control-color);
--progress-bar-danger-background-color: var(--background-basic-color-3);
--progress-bar-danger-filled-background-color: var(--color-danger-default);
--progress-bar-danger-text-color: var(--text-control-color);
--progress-bar-control-background-color: var(--background-basic-color-3);
--progress-bar-control-filled-background-color: var(--color-control-default);
--progress-bar-control-text-color: var(--color-basic-800);
--alert-border-radius: var(--border-radius);
--alert-bottom-margin: 1.5rem;
--alert-padding: 1rem 1.125rem;
--alert-scrollbar-color: var(--scrollbar-color);
--alert-scrollbar-background-color: var(--scrollbar-background-color);
--alert-scrollbar-width: var(--scrollbar-width);
--alert-shadow: none;
--alert-text-font-family: var(--text-paragraph-font-family);
--alert-text-font-size: var(--text-subtitle-font-size);
--alert-text-font-weight: var(--text-subtitle-font-weight);
--alert-text-line-height: var(--text-subtitle-line-height);
--alert-closable-start-padding: 3rem;
--alert-tiny-height: 4.5rem;
--alert-small-height: 5.75rem;
--alert-medium-height: 7rem;
--alert-medium-padding: 1rem 1.125rem;
--alert-large-height: 8.25rem;
--alert-giant-height: 9.5rem;
--alert-basic-background-color: var(--background-basic-color-2);
--alert-basic-text-color: var(--text-basic-color);
--alert-primary-background-color: var(--color-primary-default);
--alert-primary-text-color: var(--text-control-color);
--alert-success-background-color: var(--color-success-default);
--alert-success-text-color: var(--text-control-color);
--alert-info-background-color: var(--color-info-default);
--alert-info-text-color: var(--text-control-color);
--alert-warning-background-color: var(--color-warning-default);
--alert-warning-text-color: var(--text-control-color);
--alert-danger-background-color: var(--color-danger-default);
--alert-danger-text-color: var(--text-control-color);
--alert-control-background-color: var(--color-control-default);
--alert-control-text-color: var(--color-basic-800);
--alert-accent-basic-color: var(--border-basic-color-3);
--alert-accent-primary-color: var(--color-primary-default);
--alert-accent-info-color: var(--color-info-default);
--alert-accent-success-color: var(--color-success-default);
--alert-accent-warning-color: var(--color-warning-default);
--alert-accent-danger-color: var(--color-danger-default);
--alert-accent-control-color: var(--color-control-default);
--alert-outline-width: 1px;
--alert-outline-basic-color: var(--color-basic-focus-border);
--alert-outline-primary-color: var(--color-primary-focus-border);
--alert-outline-info-color: var(--color-info-focus-border);
--alert-outline-success-color: var(--color-success-focus-border);
--alert-outline-warning-color: var(--color-warning-focus-border);
--alert-outline-danger-color: var(--color-danger-focus-border);
--alert-outline-control-color: var(--color-control-focus-border);
--chat-background-color: var(--background-basic-color-1);
--chat-border: none;
--chat-border-radius: var(--border-radius);
--chat-shadow: var(--shadow);
--chat-padding: 1rem 1.25rem;
--chat-scrollbar-color: var(--scrollbar-color);
--chat-scrollbar-background-color: var(--scrollbar-background-color);
--chat-scrollbar-width: var(--scrollbar-width);
--chat-text-color: var(--text-basic-color);
--chat-text-font-family: var(--text-paragraph-font-family);
--chat-text-font-size: var(--text-paragraph-font-size);
--chat-text-font-weight: var(--text-paragraph-font-weight);
--chat-text-line-height: var(--text-paragraph-line-height);
--chat-header-text-font-family: var(--text-subtitle-font-family);
--chat-header-text-font-size: var(--text-subtitle-font-size);
--chat-header-text-font-weight: var(--text-subtitle-font-weight);
--chat-header-text-line-height: var(--text-subtitle-line-height);
--chat-tiny-height: 13.5rem;
--chat-small-height: 21rem;
--chat-medium-height: 28.5rem;
--chat-large-height: 36rem;
--chat-giant-height: 43.5rem;
--chat-basic-background-color: var(--background-basic-color-1);
--chat-basic-text-color: var(--text-basic-color);
--chat-primary-background-color: var(--color-primary-default);
--chat-primary-text-color: var(--text-control-color);
--chat-success-background-color: var(--color-success-default);
--chat-success-text-color: var(--text-control-color);
--chat-info-background-color: var(--color-info-default);
--chat-info-text-color: var(--text-control-color);
--chat-warning-background-color: var(--color-warning-default);
--chat-warning-text-color: var(--text-control-color);
--chat-danger-background-color: var(--color-danger-default);
--chat-danger-text-color: var(--text-control-color);
--chat-control-background-color: var(--color-control-default);
--chat-control-text-color: var(--color-basic-800);
--chat-divider-color: var(--divider-color);
--chat-divider-style: var(--divider-style);
--chat-divider-width: var(--divider-width);
--chat-message-background: var(--color-primary-default);
--chat-message-text-color: var(--text-control-color);
--chat-message-reply-background-color: var(--background-basic-color-2);
--chat-message-reply-text-color: var(--text-basic-color);
--chat-message-avatar-background-color: var(--color-basic-500);
--chat-message-sender-text-color: var(--text-hint-color);
--chat-message-quote-background-color: var(--background-basic-color-2);
--chat-message-quote-text-color: var(--text-hint-color);
--chat-message-file-text-color: var(--text-hint-color);
--chat-message-file-background-color: transparent;
--spinner-text-color: var(--text-basic-color);
--spinner-text-font-family: var(--text-button-font-family);
--spinner-text-font-size: var(--text-button-medium-font-size);
--spinner-text-font-weight: var(--text-button-font-weight);
--spinner-text-line-height: var(--text-button-medium-line-height);
--spinner-basic-background-color: var(--color-basic-transparent-200);
--spinner-basic-circle-filled-color: var(--text-hint-color);
--spinner-basic-circle-empty-color: transparent;
--spinner-primary-background-color: var(--color-basic-transparent-200);
--spinner-primary-circle-filled-color: var(--color-primary-default);
--spinner-primary-circle-empty-color: transparent;
--spinner-info-background-color: var(--color-basic-transparent-200);
--spinner-info-circle-filled-color: var(--color-info-default);
--spinner-info-circle-empty-color: transparent;
--spinner-success-background-color: var(--color-basic-transparent-200);
--spinner-success-circle-filled-color: var(--color-success-default);
--spinner-success-circle-empty-color: transparent;
--spinner-warning-background-color: var(--color-basic-transparent-200);
--spinner-warning-circle-filled-color: var(--color-warning-default);
--spinner-warning-circle-empty-color: transparent;
--spinner-danger-background-color: var(--color-basic-transparent-200);
--spinner-danger-circle-filled-color: var(--color-danger-default);
--spinner-danger-circle-empty-color: transparent;
--spinner-control-background-color: var(--color-basic-control-transparent-200);
--spinner-control-circle-filled-color: var(--color-control-default);
--spinner-control-circle-empty-color: transparent;
--spinner-height-tiny: 1rem;
--spinner-height-small: 1.25rem;
--spinner-height-medium: 1.5rem;
--spinner-height-large: 1.75rem;
--spinner-height-giant: 2rem;
--stepper-step-text-color: var(--text-hint-color);
--stepper-step-text-font-family: var(--text-paragraph-font-family);
--stepper-step-text-font-size: var(--text-paragraph-font-size);
--stepper-step-text-font-weight: var(--text-paragraph-font-weight);
--stepper-step-text-line-height: var(--text-paragraph-line-height);
--stepper-step-active-text-color: var(--text-primary-active-color);
--stepper-step-completed-text-color: var(--text-primary-color);
--stepper-step-index-border-color: var(--border-basic-color-4);
--stepper-step-index-border-style: solid;
--stepper-step-index-border-width: 1px;
--stepper-step-index-border-radius: 50%;
--stepper-step-index-width: 2rem;
--stepper-step-index-active-border-color: var(--color-primary-active);
--stepper-step-index-completed-background-color: var(--color-primary-default);
--stepper-step-index-completed-border-color: var(--color-primary-default);
--stepper-step-index-completed-text-color: var(--text-control-color);
--stepper-connector-background-color: var(--background-basic-color-3);
--stepper-connector-completed-background-color: var(--color-primary-default);
--stepper-horizontal-connector-margin: 1rem;
--stepper-vertical-connector-margin: 1rem;
--stepper-step-content-padding: 1.25rem;
--accordion-border-radius: var(--border-radius);
--accordion-padding: 1.25rem;
--accordion-shadow: var(--shadow);
--accordion-header-text-color: var(--text-basic-color);
--accordion-header-text-font-family: var(--text-subtitle-font-family);
--accordion-header-text-font-size: var(--text-subtitle-font-size);
--accordion-header-text-font-weight: var(--text-subtitle-font-weight);
--accordion-header-text-line-height: var(--text-subtitle-line-height);
--accordion-header-disabled-text-color: var(--text-disabled-color);
--accordion-header-border-color: var(--border-basic-color-3);
--accordion-header-border-style: solid;
--accordion-header-border-width: 1px;
--accordion-item-background-color: var(--background-basic-color-1);
--accordion-item-text-color: var(--text-basic-color);
--accordion-item-text-font-family: var(--text-paragraph-font-family);
--accordion-item-text-font-size: var(--text-paragraph-font-size);
--accordion-item-text-font-weight: var(--text-paragraph-font-weight);
--accordion-item-text-line-height: var(--text-paragraph-line-height);
--list-item-divider-color: var(--divider-color);
--list-item-divider-style: var(--divider-style);
--list-item-divider-width: var(--divider-width);
--list-item-padding: 1rem;
--list-item-text-color: var(--text-basic-color);
--list-item-font-family: var(--text-paragraph-font-family);
--list-item-font-size: var(--text-paragraph-font-size);
--list-item-font-weight: var(--text-paragraph-font-weight);
--list-item-line-height: var(--text-paragraph-line-height);
--calendar-width: 20.625rem;
--calendar-background-color: var(--background-basic-color-1);
--calendar-border-color: var(--border-basic-color-4);
--calendar-border-style: solid;
--calendar-border-width: 0.0625rem;
--calendar-border-radius: var(--border-radius);
--calendar-text-color: var(--text-basic-color);
--calendar-text-font-family: var(--text-subtitle-font-family);
--calendar-text-font-size: var(--text-subtitle-font-size);
--calendar-text-font-weight: var(--text-subtitle-font-weight);
--calendar-text-line-height: var(--text-subtitle-line-height);
--calendar-picker-padding-top: 0.25rem;
--calendar-picker-padding-bottom: 0.625rem;
--calendar-picker-padding-start: 0.625rem;
--calendar-picker-padding-end: 0.625rem;
--calendar-navigation-text-color: var(--text-basic-color);
--calendar-navigation-text-font-family: var(--text-button-font-family);
--calendar-navigation-title-text-font-size: var(--text-button-medium-font-size);
--calendar-navigation-title-text-font-weight: var(--text-button-font-weight);
--calendar-navigation-title-text-line-height: var(--text-button-medium-line-height);
--calendar-navigation-padding: 0.625rem 0.25rem;
--calendar-cell-inactive-text-color: var(--text-hint-color);
--calendar-cell-disabled-text-color: var(--text-disabled-color);
--calendar-cell-hover-background-color: var(--background-basic-color-2);
--calendar-cell-hover-border-color: var(--background-basic-color-2);
--calendar-cell-hover-text-color: var(--text-basic-color);
--calendar-cell-hover-text-font-size: var(--calendar-text-font-size);
--calendar-cell-hover-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-hover-text-line-height: var(--calendar-text-line-height);
--calendar-cell-active-background-color: var(--color-primary-active);
--calendar-cell-active-border-color: var(--color-primary-active-border);
--calendar-cell-active-text-color: var(--text-control-color);
--calendar-cell-active-text-font-size: var(--calendar-text-font-size);
--calendar-cell-active-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-active-text-line-height: var(--calendar-text-line-height);
--calendar-cell-today-background-color: var(--color-primary-transparent-default);
--calendar-cell-today-border-color: var(--color-primary-transparent-default-border);
--calendar-cell-today-text-color: var(--text-basic-color);
--calendar-cell-today-text-font-size: var(--calendar-text-font-size);
--calendar-cell-today-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-today-text-line-height: var(--calendar-text-line-height);
--calendar-cell-today-hover-background-color: var(--color-primary-transparent-hover);
--calendar-cell-today-hover-border-color: var(--color-primary-transparent-hover-border);
--calendar-cell-today-active-background-color: var(--color-primary-transparent-active);
--calendar-cell-today-active-border-color: var(--color-primary-transparent-active-border);
--calendar-cell-today-disabled-border-color: var(--border-basic-color-4);
--calendar-cell-today-selected-background-color: var(--color-control-transparent-default);
--calendar-cell-today-selected-border-color: transparent;
--calendar-cell-today-selected-text-color: var(--text-control-color);
--calendar-cell-today-selected-hover-background-color: var(--color-control-transparent-hover);
--calendar-cell-today-selected-hover-border-color: transparent;
--calendar-cell-today-selected-active-background-color: var(--color-control-transparent-active);
--calendar-cell-today-selected-active-border-color: transparent;
--calendar-cell-today-in-range-background-color: var(--color-control-transparent-default);
--calendar-cell-today-in-range-border-color: transparent;
--calendar-cell-today-in-range-text-color: var(--text-control-color);
--calendar-cell-today-in-range-hover-background-color: var(--color-control-transparent-hover);
--calendar-cell-today-in-range-hover-border-color: transparent;
--calendar-cell-today-in-range-active-background-color: var(--color-control-transparent-active);
--calendar-cell-today-in-range-active-border-color: transparent;
--calendar-cell-selected-background-color: var(--color-primary-default);
--calendar-cell-selected-border-color: var(--color-primary-default-border);
--calendar-cell-selected-text-color: var(--text-control-color);
--calendar-cell-selected-text-font-size: var(--calendar-text-font-size);
--calendar-cell-selected-text-font-weight: var(--calendar-text-font-weight);
--calendar-cell-selected-text-line-height: var(--calendar-text-line-height);
--calendar-cell-selected-hover-background-color: var(--color-primary-hover);
--calendar-cell-selected-hover-border-color: var(--color-primary-hover-border);
--calendar-cell-selected-active-background-color: var(--color-primary-active);
--calendar-cell-selected-active-border-color: var(--color-primary-active-border);
--calendar-day-cell-width: 2.75rem;
--calendar-day-cell-height: 2.75rem;
--calendar-month-cell-width: 4.8125rem;
--calendar-month-cell-height: var(--calendar-day-cell-height);
--calendar-year-cell-width: var(--calendar-month-cell-width);
--calendar-year-cell-height: var(--calendar-month-cell-height);
--calendar-weekday-background: transparent;
--calendar-weekday-divider-color: var(--divider-color);
--calendar-weekday-divider-width: var(--divider-width);
--calendar-weekday-text-color: var(--text-hint-color);
--calendar-weekday-text-font-size: var(--text-subtitle-font-size);
--calendar-weekday-text-font-weight: var(--text-subtitle-font-weight);
--calendar-weekday-text-line-height: var(--text-subtitle-line-height);
--calendar-weekday-holiday-text-color: var(--calendar-weekday-text-color);
--calendar-weekday-height: var(--calendar-day-cell-height);
--calendar-weekday-width: var(--calendar-day-cell-width);
--calendar-weeknumber-background: transparent;
--calendar-weeknumber-divider-color: var(--divider-color);
--calendar-weeknumber-divider-width: var(--divider-width);
--calendar-weeknumber-text-color: var(--text-hint-color);
--calendar-weeknumber-text-font-size: var(--text-subtitle-font-size);
--calendar-weeknumber-text-font-weight: var(--text-subtitle-font-weight);
--calendar-weeknumber-text-line-height: var(--text-subtitle-line-height);
--calendar-weeknumber-height: var(--calendar-weekday-height);
--calendar-weeknumber-width: var(--calendar-weekday-width);
--calendar-large-width: 22.375rem;
--calendar-day-cell-large-width: 3rem;
--calendar-day-cell-large-height: 3rem;
--calendar-weekday-large-height: var(--calendar-day-cell-large-width);
--calendar-weekday-large-width: var(--calendar-day-cell-large-height);
--calendar-weeknumber-large-height: var(--calendar-weekday-large-height);
--calendar-weeknumber-large-width: var(--calendar-weekday-large-width);
--calendar-month-cell-large-width: 5.25rem;
--calendar-month-cell-large-height: var(--calendar-day-cell-large-height);
--calendar-year-cell-large-width: var(--calendar-month-cell-large-width);
--calendar-year-cell-large-height: var(--calendar-month-cell-large-height);
--overlay-backdrop-background-color: rgba(0, 0, 0, 0.35);
--tooltip-background-color: var(--background-alternative-color-3);
--tooltip-border-color: transparent;
--tooltip-border-style: dashed;
--tooltip-border-width: 0;
--tooltip-border-radius: var(--border-radius);
--tooltip-padding: 0.5rem 1rem;
--tooltip-text-color: var(--text-alternate-color);
--tooltip-text-font-family: var(--text-caption-font-family);
--tooltip-text-font-size: var(--text-caption-font-size);
--tooltip-text-font-weight: var(--text-caption-font-weight);
--tooltip-text-line-height: var(--text-caption-line-height);
--tooltip-icon-height: 1rem;
--tooltip-icon-width: 1rem;
--tooltip-max-width: 16rem;
--tooltip-basic-background-color: var(--background-basic-color-3);
--tooltip-basic-border-color: transparent;
--tooltip-basic-text-color: var(--text-basic-color);
--tooltip-primary-background-color: var(--color-primary-default);
--tooltip-primary-border-color: transparent;
--tooltip-primary-text-color: var(--text-control-color);
--tooltip-info-background-color: var(--color-info-default);
--tooltip-info-border-color: transparent;
--tooltip-info-text-color: var(--text-control-color);
--tooltip-success-background-color: var(--color-success-default);
--tooltip-success-border-color: transparent;
--tooltip-success-text-color: var(--text-control-color);
--tooltip-warning-background-color: var(--color-warning-default);
--tooltip-warning-border-color: transparent;
--tooltip-warning-text-color: var(--text-control-color);
--tooltip-danger-background-color: var(--color-danger-default);
--tooltip-danger-border-color: transparent;
--tooltip-danger-text-color: var(--text-control-color);
--tooltip-control-background-color: var(--color-control-default);
--tooltip-control-border-color: transparent;
--tooltip-control-text-color: var(--color-basic-800);
--tooltip-shadow: var(--shadow);
--option-list-max-height: 20rem;
--option-list-shadow: none;
--option-list-background-color: var(--background-basic-color-1);
--option-list-border-style: solid;
--option-list-border-width: 0.0625rem;
--option-list-border-color: var(--border-basic-color-4);
--option-list-border-radius: var(--border-radius);
--option-list-adjacent-border-color: var(--option-list-border-color);
--option-list-adjacent-border-style: var(--option-list-border-style);
--option-list-adjacent-border-width: var(--option-list-border-width);
--option-group-text-color: var(--text-hint-color);
--option-group-tiny-start-padding: 1.25rem;
--option-group-small-start-padding: 1.75rem;
--option-group-medium-start-padding: 2.25rem;
--option-group-large-start-padding: 2.25rem;
--option-group-giant-start-padding: 2.75rem;
--option-background-color: var(--background-basic-color-1);
--option-text-color: var(--text-basic-color);
--option-text-font-family: var(--text-subtitle-font-family);
--option-hover-background-color: var(--color-basic-transparent-hover);
--option-hover-text-color: var(--text-basic-color);
--option-active-background-color: var(--color-basic-transparent-active);
--option-active-text-color: var(--text-basic-color);
--option-focus-background-color: var(--color-basic-transparent-focus);
--option-focus-text-color: var(--text-basic-color);
--option-selected-background-color: var(--color-primary-default);
--option-selected-text-color: var(--text-control-color);
--option-selected-hover-background-color: var(--color-primary-hover);
--option-selected-hover-text-color: var(--text-control-color);
--option-selected-active-background-color: var(--color-primary-active);
--option-selected-active-text-color: var(--text-control-color);
--option-selected-focus-background-color: var(--color-primary-focus);
--option-selected-focus-text-color: var(--text-control-color);
--option-disabled-background-color: var(--background-basic-color-1);
--option-disabled-text-color: var(--text-disabled-color);
--option-tiny-text-font-size: var(--text-caption-2-font-size);
--option-tiny-text-font-weight: var(--text-caption-2-font-weight);
--option-tiny-text-line-height: var(--text-caption-2-line-height);
--option-tiny-padding: var(--select-outline-tiny-padding);
--option-small-text-font-size: var(--text-subtitle-2-font-size);
--option-small-text-font-weight: var(--text-subtitle-2-font-weight);
--option-small-text-line-height: var(--text-subtitle-2-line-height);
--option-small-padding: var(--select-outline-small-padding);
--option-medium-text-font-size: var(--text-subtitle-font-size);
--option-medium-text-font-weight: var(--text-subtitle-font-weight);
--option-medium-text-line-height: var(--text-subtitle-line-height);
--option-medium-padding: var(--select-outline-medium-padding);
--option-large-text-font-size: var(--text-subtitle-font-size);
--option-large-text-font-weight: var(--text-subtitle-font-weight);
--option-large-text-line-height: var(--text-subtitle-line-height);
--option-large-padding: var(--select-outline-large-padding);
--option-giant-text-font-size: var(--text-heading-6-font-size);
--option-giant-text-font-weight: var(--text-heading-6-font-weight);
--option-giant-text-line-height: var(--text-heading-6-line-height);
--option-giant-padding: var(--select-outline-giant-padding);
--select-cursor: pointer;
--select-disabled-cursor: default;
--select-min-width: 13rem;
--select-outline-width: var(--outline-width);
--select-outline-color: var(--outline-color);
--select-icon-offset: 2rem;
--select-text-font-family: var(--text-subtitle-font-family);
--select-placeholder-text-font-family: var(--text-paragraph-font-family);
--select-tiny-text-font-size: var(--text-caption-2-font-size);
--select-tiny-text-font-weight: var(--text-caption-2-font-weight);
--select-tiny-text-line-height: var(--text-caption-2-line-height);
--select-tiny-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-tiny-max-width: 20rem;
--select-small-text-font-size: var(--text-subtitle-2-font-size);
--select-small-text-font-weight: var(--text-subtitle-2-font-weight);
--select-small-text-line-height: var(--text-subtitle-2-line-height);
--select-small-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-small-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-small-max-width: 20rem;
--select-medium-text-font-size: var(--text-subtitle-font-size);
--select-medium-text-font-weight: var(--text-subtitle-font-weight);
--select-medium-text-line-height: var(--text-subtitle-line-height);
--select-medium-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-medium-max-width: 20rem;
--select-large-text-font-size: var(--text-subtitle-font-size);
--select-large-text-font-weight: var(--text-subtitle-font-weight);
--select-large-text-line-height: var(--text-subtitle-line-height);
--select-large-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-large-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-large-max-width: 30rem;
--select-giant-text-font-size: var(--text-heading-6-font-size);
--select-giant-text-font-weight: var(--text-heading-6-font-weight);
--select-giant-text-line-height: var(--text-heading-6-line-height);
--select-giant-placeholder-text-font-size: var(--text-paragraph-font-size);
--select-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight);
--select-giant-max-width: 30rem;
--select-rectangle-border-radius: var(--border-radius);
--select-semi-round-border-radius: 0.75rem;
--select-round-border-radius: 1.5rem;
--select-outline-border-style: solid;
--select-outline-border-width: 1px;
--select-outline-tiny-padding: 0.1875rem 1rem;
--select-outline-small-padding: 0.1875rem 1rem;
--select-outline-medium-padding: 0.4375rem 1rem;
--select-outline-large-padding: 0.6875rem 1rem;
--select-outline-giant-padding: 0.9375rem 1rem;
--select-outline-basic-icon-color: var(--text-hint-color);
--select-outline-basic-text-color: var(--text-basic-color);
--select-outline-basic-placeholder-text-color: var(--text-hint-color);
--select-outline-basic-background-color: var(--background-basic-color-2);
--select-outline-basic-border-color: var(--border-basic-color-4);
--select-outline-basic-focus-background-color: var(--background-basic-color-1);
--select-outline-basic-focus-border-color: var(--color-primary-default);
--select-outline-basic-hover-background-color: var(--background-basic-color-3);
--select-outline-basic-hover-border-color: var(--border-basic-color-4);
--select-outline-basic-disabled-background-color: var(--background-basic-color-2);
--select-outline-basic-disabled-border-color: var(--border-basic-color-4);
--select-outline-basic-disabled-icon-color: var(--text-disabled-color);
--select-outline-basic-disabled-text-color: var(--text-disabled-color);
--select-outline-primary-icon-color: var(--text-hint-color);
--select-outline-primary-text-color: var(--text-basic-color);
--select-outline-primary-placeholder-text-color: var(--text-hint-color);
--select-outline-primary-background-color: var(--background-basic-color-2);
--select-outline-primary-border-color: var(--color-primary-default);
--select-outline-primary-focus-background-color: var(--background-basic-color-1);
--select-outline-primary-focus-border-color: var(--color-primary-focus);
--select-outline-primary-hover-background-color: var(--background-basic-color-3);
--select-outline-primary-hover-border-color: var(--color-primary-hover);
--select-outline-primary-disabled-background-color: var(--background-basic-color-2);
--select-outline-primary-disabled-border-color: var(--border-basic-color-4);
--select-outline-primary-disabled-icon-color: var(--text-disabled-color);
--select-outline-primary-disabled-text-color: var(--text-disabled-color);
--select-outline-success-icon-color: var(--text-hint-color);
--select-outline-success-text-color: var(--text-basic-color);
--select-outline-success-placeholder-text-color: var(--text-hint-color);
--select-outline-success-background-color: var(--background-basic-color-2);
--select-outline-success-border-color: var(--color-success-default);
--select-outline-success-focus-background-color: var(--background-basic-color-1);
--select-outline-success-focus-border-color: var(--color-success-focus);
--select-outline-success-hover-background-color: var(--background-basic-color-3);
--select-outline-success-hover-border-color: var(--color-success-hover);
--select-outline-success-disabled-background-color: var(--background-basic-color-2);
--select-outline-success-disabled-border-color: var(--border-basic-color-4);
--select-outline-success-disabled-icon-color: var(--text-disabled-color);
--select-outline-success-disabled-text-color: var(--text-disabled-color);
--select-outline-info-icon-color: var(--text-hint-color);
--select-outline-info-text-color: var(--text-basic-color);
--select-outline-info-placeholder-text-color: var(--text-hint-color);
--select-outline-info-background-color: var(--background-basic-color-2);
--select-outline-info-border-color: var(--color-info-default);
--select-outline-info-focus-background-color: var(--background-basic-color-1);
--select-outline-info-focus-border-color: var(--color-info-focus);
--select-outline-info-hover-background-color: var(--background-basic-color-3);
--select-outline-info-hover-border-color: var(--color-info-hover);
--select-outline-info-disabled-background-color: var(--background-basic-color-2);
--select-outline-info-disabled-border-color: var(--border-basic-color-4);
--select-outline-info-disabled-icon-color: var(--text-disabled-color);
--select-outline-info-disabled-text-color: var(--text-disabled-color);
--select-outline-warning-icon-color: var(--text-hint-color);
--select-outline-warning-text-color: var(--text-basic-color);
--select-outline-warning-placeholder-text-color: var(--text-hint-color);
--select-outline-warning-background-color: var(--background-basic-color-2);
--select-outline-warning-border-color: var(--color-warning-default);
--select-outline-warning-focus-background-color: var(--background-basic-color-1);
--select-outline-warning-focus-border-color: var(--color-warning-focus);
--select-outline-warning-hover-background-color: var(--background-basic-color-3);
--select-outline-warning-hover-border-color: var(--color-warning-hover);
--select-outline-warning-disabled-background-color: var(--background-basic-color-2);
--select-outline-warning-disabled-border-color: var(--border-basic-color-4);
--select-outline-warning-disabled-icon-color: var(--text-disabled-color);
--select-outline-warning-disabled-text-color: var(--text-disabled-color);
--select-outline-danger-icon-color: var(--text-hint-color);
--select-outline-danger-text-color: var(--text-basic-color);
--select-outline-danger-placeholder-text-color: var(--text-hint-color);
--select-outline-danger-background-color: var(--background-basic-color-2);
--select-outline-danger-border-color: var(--color-danger-default);
--select-outline-danger-focus-background-color: var(--background-basic-color-1);
--select-outline-danger-focus-border-color: var(--color-danger-focus);
--select-outline-danger-hover-background-color: var(--background-basic-color-3);
--select-outline-danger-hover-border-color: var(--color-danger-hover);
--select-outline-danger-disabled-background-color: var(--background-basic-color-2);
--select-outline-danger-disabled-border-color: var(--border-basic-color-4);
--select-outline-danger-disabled-icon-color: var(--text-disabled-color);
--select-outline-danger-disabled-text-color: var(--text-disabled-color);
--select-outline-control-icon-color: var(--color-basic-100);
--select-outline-control-text-color: var(--color-basic-100);
--select-outline-control-placeholder-text-color: var(--color-basic-100);
--select-outline-control-background-color: var(--color-basic-control-transparent-300);
--select-outline-control-border-color: var(--color-basic-control-transparent-500);
--select-outline-control-focus-background-color: var(--color-basic-control-transparent-500);
--select-outline-control-focus-border-color: var(--color-control-transparent-focus-border);
--select-outline-control-hover-background-color: var(--color-basic-control-transparent-400);
--select-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--select-outline-control-disabled-background-color: var(--color-control-transparent-disabled);
--select-outline-control-disabled-border-color: var(--color-basic-control-transparent-500);
--select-outline-control-disabled-icon-color: var(--color-basic-100);
--select-outline-control-disabled-text-color: var(--color-basic-100);
--select-outline-adjacent-border-style: var(--select-outline-border-style);
--select-outline-adjacent-border-width: var(--select-outline-border-width);
--select-outline-basic-open-border-color: var(--select-outline-basic-border-color);
--select-outline-basic-adjacent-border-color: var(--select-outline-basic-border-color);
--select-outline-primary-open-border-color: var(--select-outline-primary-border-color);
--select-outline-primary-adjacent-border-color: var(--select-outline-primary-border-color);
--select-outline-success-open-border-color: var(--select-outline-success-border-color);
--select-outline-success-adjacent-border-color: var(--select-outline-success-border-color);
--select-outline-info-open-border-color: var(--select-outline-info-border-color);
--select-outline-info-adjacent-border-color: var(--select-outline-info-border-color);
--select-outline-warning-open-border-color: var(--select-outline-warning-border-color);
--select-outline-warning-adjacent-border-color: var(--select-outline-warning-border-color);
--select-outline-danger-open-border-color: var(--select-outline-danger-border-color);
--select-outline-danger-adjacent-border-color: var(--select-outline-danger-border-color);
--select-outline-control-open-border-color: var(--select-outline-control-border-color);
--select-outline-control-adjacent-border-color: var(--select-outline-control-border-color);
--select-filled-border-style: solid;
--select-filled-border-width: 1px;
--select-filled-tiny-padding: 0.1875rem 1rem;
--select-filled-small-padding: 0.1875rem 1rem;
--select-filled-medium-padding: 0.4375rem 1rem;
--select-filled-large-padding: 0.6875rem 1rem;
--select-filled-giant-padding: 0.9375rem 1rem;
--select-filled-basic-background-color: var(--color-basic-default);
--select-filled-basic-border-color: var(--color-basic-default-border);
--select-filled-basic-icon-color: var(--color-basic-800);
--select-filled-basic-text-color: var(--color-basic-800);
--select-filled-basic-placeholder-text-color: var(--text-hint-color);
--select-filled-basic-focus-background-color: var(--color-basic-focus);
--select-filled-basic-focus-border-color: var(--color-basic-focus-border);
--select-filled-basic-hover-background-color: var(--color-basic-hover);
--select-filled-basic-hover-border-color: var(--color-basic-hover-border);
--select-filled-basic-disabled-background-color: var(--background-basic-color-2);
--select-filled-basic-disabled-border-color: var(--border-basic-color-2);
--select-filled-basic-disabled-icon-color: var(--text-disabled-color);
--select-filled-basic-disabled-text-color: var(--text-disabled-color);
--select-filled-primary-background-color: var(--color-primary-default);
--select-filled-primary-border-color: var(--color-primary-default-border);
--select-filled-primary-icon-color: var(--text-control-color);
--select-filled-primary-text-color: var(--text-control-color);
--select-filled-primary-placeholder-text-color: var(--text-control-color);
--select-filled-primary-focus-background-color: var(--color-primary-focus);
--select-filled-primary-focus-border-color: var(--color-primary-focus-border);
--select-filled-primary-hover-background-color: var(--color-primary-hover);
--select-filled-primary-hover-border-color: var(--color-primary-hover-border);
--select-filled-primary-disabled-background-color: var(--background-basic-color-2);
--select-filled-primary-disabled-border-color: var(--border-basic-color-2);
--select-filled-primary-disabled-icon-color: var(--text-disabled-color);
--select-filled-primary-disabled-text-color: var(--text-disabled-color);
--select-filled-success-background-color: var(--color-success-default);
--select-filled-success-border-color: var(--color-success-default-border);
--select-filled-success-icon-color: var(--text-control-color);
--select-filled-success-text-color: var(--text-control-color);
--select-filled-success-placeholder-text-color: var(--text-control-color);
--select-filled-success-focus-background-color: var(--color-success-focus);
--select-filled-success-focus-border-color: var(--color-success-focus-border);
--select-filled-success-hover-background-color: var(--color-success-hover);
--select-filled-success-hover-border-color: var(--color-success-hover-border);
--select-filled-success-disabled-background-color: var(--background-basic-color-2);
--select-filled-success-disabled-border-color: var(--border-basic-color-2);
--select-filled-success-disabled-icon-color: var(--text-disabled-color);
--select-filled-success-disabled-text-color: var(--text-disabled-color);
--select-filled-info-background-color: var(--color-info-default);
--select-filled-info-border-color: var(--color-info-default-border);
--select-filled-info-icon-color: var(--text-control-color);
--select-filled-info-text-color: var(--text-control-color);
--select-filled-info-placeholder-text-color: var(--text-control-color);
--select-filled-info-focus-background-color: var(--color-info-focus);
--select-filled-info-focus-border-color: var(--color-info-focus-border);
--select-filled-info-hover-background-color: var(--color-info-hover);
--select-filled-info-hover-border-color: var(--color-info-hover-border);
--select-filled-info-disabled-background-color: var(--background-basic-color-2);
--select-filled-info-disabled-border-color: var(--border-basic-color-2);
--select-filled-info-disabled-icon-color: var(--text-disabled-color);
--select-filled-info-disabled-text-color: var(--text-disabled-color);
--select-filled-warning-background-color: var(--color-warning-default);
--select-filled-warning-border-color: var(--color-warning-default-border);
--select-filled-warning-icon-color: var(--text-control-color);
--select-filled-warning-text-color: var(--text-control-color);
--select-filled-warning-placeholder-text-color: var(--text-control-color);
--select-filled-warning-focus-background-color: var(--color-warning-focus);
--select-filled-warning-focus-border-color: var(--color-warning-focus-border);
--select-filled-warning-hover-background-color: var(--color-warning-hover);
--select-filled-warning-hover-border-color: var(--color-warning-hover-border);
--select-filled-warning-disabled-background-color: var(--background-basic-color-2);
--select-filled-warning-disabled-border-color: var(--border-basic-color-2);
--select-filled-warning-disabled-icon-color: var(--text-disabled-color);
--select-filled-warning-disabled-text-color: var(--text-disabled-color);
--select-filled-danger-background-color: var(--color-danger-default);
--select-filled-danger-border-color: var(--color-danger-default-border);
--select-filled-danger-icon-color: var(--text-control-color);
--select-filled-danger-text-color: var(--text-control-color);
--select-filled-danger-placeholder-text-color: var(--text-control-color);
--select-filled-danger-focus-background-color: var(--color-danger-focus);
--select-filled-danger-focus-border-color: var(--color-danger-focus-border);
--select-filled-danger-hover-background-color: var(--color-danger-hover);
--select-filled-danger-hover-border-color: var(--color-danger-hover-border);
--select-filled-danger-disabled-background-color: var(--background-basic-color-2);
--select-filled-danger-disabled-border-color: var(--border-basic-color-2);
--select-filled-danger-disabled-icon-color: var(--text-disabled-color);
--select-filled-danger-disabled-text-color: var(--text-disabled-color);
--select-filled-control-background-color: var(--color-control-default);
--select-filled-control-border-color: var(--color-control-default-border);
--select-filled-control-icon-color: var(--color-basic-800);
--select-filled-control-text-color: var(--color-basic-800);
--select-filled-control-placeholder-text-color: var(--text-hint-color);
--select-filled-control-focus-background-color: var(--color-control-focus);
--select-filled-control-focus-border-color: var(--color-control-focus-border);
--select-filled-control-hover-background-color: var(--color-control-hover);
--select-filled-control-hover-border-color: var(--color-control-hover-border);
--select-filled-control-disabled-background-color: var(--background-basic-color-2);
--select-filled-control-disabled-border-color: var(--border-basic-color-2);
--select-filled-control-disabled-icon-color: var(--text-disabled-color);
--select-filled-control-disabled-text-color: var(--text-disabled-color);
--select-hero-tiny-padding: 0.25rem 1rem;
--select-hero-small-padding: 0.25rem 1rem;
--select-hero-medium-padding: 0.5rem 1rem;
--select-hero-large-padding: 0.75rem 1rem;
--select-hero-giant-padding: 1rem 1rem;
--select-hero-basic-left-background-color: var(--color-basic-200);
--select-hero-basic-right-background-color: var(--color-basic-default);
--select-hero-basic-icon-color: var(--color-basic-800);
--select-hero-basic-text-color: var(--color-basic-800);
--select-hero-basic-placeholder-text-color: var(--text-hint-color);
--select-hero-basic-focus-left-background-color: var(--color-basic-300);
--select-hero-basic-focus-right-background-color: var(--color-basic-400);
--select-hero-basic-hover-left-background-color: var(--color-basic-100);
--select-hero-basic-hover-right-background-color: var(--color-basic-hover);
--select-hero-basic-disabled-background-color: var(--background-basic-color-2);
--select-hero-basic-disabled-icon-color: var(--text-disabled-color);
--select-hero-basic-disabled-text-color: var(--text-disabled-color);
--select-hero-primary-left-background-color: var(--color-primary-400);
--select-hero-primary-right-background-color: var(--color-primary-default);
--select-hero-primary-icon-color: var(--text-control-color);
--select-hero-primary-text-color: var(--text-control-color);
--select-hero-primary-placeholder-text-color: var(--text-control-color);
--select-hero-primary-focus-left-background-color: var(--color-primary-500);
--select-hero-primary-focus-right-background-color: var(--color-primary-focus);
--select-hero-primary-hover-left-background-color: var(--color-primary-300);
--select-hero-primary-hover-right-background-color: var(--color-primary-hover);
--select-hero-primary-disabled-background-color: var(--background-basic-color-2);
--select-hero-primary-disabled-icon-color: var(--text-disabled-color);
--select-hero-primary-disabled-text-color: var(--text-disabled-color);
--select-hero-success-left-background-color: var(--color-success-400);
--select-hero-success-right-background-color: var(--color-success-default);
--select-hero-success-icon-color: var(--text-control-color);
--select-hero-success-text-color: var(--text-control-color);
--select-hero-success-placeholder-text-color: var(--text-control-color);
--select-hero-success-focus-left-background-color: var(--color-success-500);
--select-hero-success-focus-right-background-color: var(--color-success-focus);
--select-hero-success-hover-left-background-color: var(--color-success-300);
--select-hero-success-hover-right-background-color: var(--color-success-hover);
--select-hero-success-disabled-background-color: var(--background-basic-color-2);
--select-hero-success-disabled-icon-color: var(--text-disabled-color);
--select-hero-success-disabled-text-color: var(--text-disabled-color);
--select-hero-info-left-background-color: var(--color-info-400);
--select-hero-info-right-background-color: var(--color-info-default);
--select-hero-info-icon-color: var(--text-control-color);
--select-hero-info-text-color: var(--text-control-color);
--select-hero-info-placeholder-text-color: var(--text-control-color);
--select-hero-info-focus-left-background-color: var(--color-info-500);
--select-hero-info-focus-right-background-color: var(--color-info-focus);
--select-hero-info-hover-left-background-color: var(--color-info-300);
--select-hero-info-hover-right-background-color: var(--color-info-hover);
--select-hero-info-disabled-background-color: var(--background-basic-color-2);
--select-hero-info-disabled-icon-color: var(--text-disabled-color);
--select-hero-info-disabled-text-color: var(--text-disabled-color);
--select-hero-warning-left-background-color: var(--color-warning-400);
--select-hero-warning-right-background-color: var(--color-warning-default);
--select-hero-warning-icon-color: var(--text-control-color);
--select-hero-warning-text-color: var(--text-control-color);
--select-hero-warning-placeholder-text-color: var(--text-control-color);
--select-hero-warning-focus-left-background-color: var(--color-warning-500);
--select-hero-warning-focus-right-background-color: var(--color-warning-focus);
--select-hero-warning-hover-left-background-color: var(--color-warning-300);
--select-hero-warning-hover-right-background-color: var(--color-warning-hover);
--select-hero-warning-disabled-background-color: var(--background-basic-color-2);
--select-hero-warning-disabled-icon-color: var(--text-disabled-color);
--select-hero-warning-disabled-text-color: var(--text-disabled-color);
--select-hero-danger-left-background-color: var(--color-danger-400);
--select-hero-danger-right-background-color: var(--color-danger-default);
--select-hero-danger-icon-color: var(--text-control-color);
--select-hero-danger-text-color: var(--text-control-color);
--select-hero-danger-placeholder-text-color: var(--text-control-color);
--select-hero-danger-focus-left-background-color: var(--color-danger-500);
--select-hero-danger-focus-right-background-color: var(--color-danger-focus);
--select-hero-danger-hover-left-background-color: var(--color-danger-300);
--select-hero-danger-hover-right-background-color: var(--color-danger-hover);
--select-hero-danger-disabled-background-color: var(--background-basic-color-2);
--select-hero-danger-disabled-icon-color: var(--text-disabled-color);
--select-hero-danger-disabled-text-color: var(--text-disabled-color);
--select-hero-control-left-background-color: var(--color-control-default);
--select-hero-control-right-background-color: var(--color-control-default);
--select-hero-control-icon-color: var(--color-basic-800);
--select-hero-control-text-color: var(--color-basic-800);
--select-hero-control-placeholder-text-color: var(--text-hint-color);
--select-hero-control-focus-left-background-color: var(--color-basic-200);
--select-hero-control-focus-right-background-color: var(--color-control-focus);
--select-hero-control-hover-left-background-color: var(--color-basic-100);
--select-hero-control-hover-right-background-color: var(--color-control-hover);
--select-hero-control-disabled-background-color: var(--background-basic-color-2);
--select-hero-control-disabled-icon-color: var(--text-disabled-color);
--select-hero-control-disabled-text-color: var(--text-disabled-color);
--datepicker-background-color: var(--background-basic-color-1);
--datepicker-border-color: var(--border-basic-color-4);
--datepicker-border-style: solid;
--datepicker-border-width: 0.0625rem;
--datepicker-border-radius: var(--border-radius);
--datepicker-shadow: none;
--timepicker-cell-text-color: var(--text-basic-color);
--timepicker-cell-hover-background-color: var(--background-basic-color-2);
--timepicker-cell-hover-text-color: var(--text-basic-color);
--timepicker-cell-focus-background-color: var(--color-basic-focus);
--timepicker-cell-focus-text-color: var(--text-basic-color);
--timepicker-cell-active-background-color: var(--color-primary-default);
--timepicker-cell-active-text-color: var(--text-control-color);
--timepicker-cell-text-font-size: var(--text-subtitle-font-size);
--timepicker-cell-text-font-family: var(--text-subtitle-font-family);
--timepicker-cell-text-line-height: var(--text-subtitle-line-height);
--timepicker-cell-text-font-weight: var(--text-subtitle-font-weight);
--timepicker-cell-height: 2.75rem;
--timepicker-header-cell-text-color: var(--text-hint-color);
--timepicker-header-cell-text-font-size: var(--text-subtitle-font-size);
--timepicker-header-cell-text-font-family: var(--text-subtitle-font-family);
--timepicker-header-cell-height: 2.75rem;
--timepicker-header-cell-text-line-height: var(--text-subtitle-line-height);
--timepicker-header-cell-text-font-weight: var(--text-subtitle-font-weight);
--timepicker-border-color: var(--datepicker-border-color);
--timepicker-border-style: var(--datepicker-border-style);
--timepicker-border-width: var(--datepicker-border-width);
--timepicker-scrollbar-color: var(--scrollbar-color);
--timepicker-scrollbar-background-color: var(--scrollbar-background-color);
--timepicker-scrollbar-width: var(--scrollbar-width);
--timepicker-single-column-width: 5rem;
--timepicker-multiple-column-width: 13.875rem;
--timepicker-title-height: 3.75rem;
--timepicker-title-padding: var(--text-paragraph-line-height);
--timepicker-container-width: 20rem;
--timepicker-container-height: 26.1875rem;
--radio-width: 1.25rem;
--radio-height: 1.25rem;
--radio-border-style: solid;
--radio-border-width: 1px;
--radio-text-font-family: var(--text-subtitle-2-font-family);
--radio-text-font-size: var(--text-subtitle-2-font-size);
--radio-text-font-weight: var(--text-subtitle-2-font-weight);
--radio-text-line-height: var(--text-subtitle-2-line-height);
--radio-outline-color: var(--outline-color);
--radio-outline-width: var(--outline-width);
--radio-basic-text-color: var(--text-basic-color);
--radio-basic-border-color: var(--color-basic-transparent-default-border);
--radio-basic-background-color: var(--color-basic-transparent-default);
--radio-basic-checked-background-color: transparent;
--radio-basic-checked-border-color: var(--color-primary-default-border);
--radio-basic-inner-circle-color: var(--color-primary-default);
--radio-basic-focus-border-color: var(--color-primary-transparent-focus-border);
--radio-basic-focus-background-color: var(--color-primary-transparent-focus);
--radio-basic-focus-checked-background-color: transparent;
--radio-basic-focus-checked-border-color: var(--color-primary-focus-border);
--radio-basic-focus-inner-circle-color: var(--color-primary-focus);
--radio-basic-hover-background-color: var(--color-primary-transparent-hover);
--radio-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--radio-basic-hover-inner-circle-color: var(--color-primary-hover);
--radio-basic-hover-checked-background-color: transparent;
--radio-basic-hover-checked-border-color: var(--color-primary-hover-border);
--radio-basic-active-background-color: var(--color-primary-transparent-active);
--radio-basic-active-border-color: var(--color-primary-transparent-active-border);
--radio-basic-active-inner-circle-color: var(--color-primary-active);
--radio-basic-active-checked-background-color: transparent;
--radio-basic-active-checked-border-color: var(--color-primary-active-border);
--radio-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-basic-disabled-text-color: var(--text-disabled-color);
--radio-basic-disabled-checked-background-color: transparent;
--radio-basic-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-basic-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-primary-text-color: var(--text-basic-color);
--radio-primary-border-color: var(--color-primary-transparent-default-border);
--radio-primary-background-color: var(--color-primary-transparent-default);
--radio-primary-checked-background-color: transparent;
--radio-primary-checked-border-color: var(--color-primary-default-border);
--radio-primary-inner-circle-color: var(--color-primary-default);
--radio-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--radio-primary-focus-background-color: var(--color-primary-transparent-focus);
--radio-primary-focus-checked-background-color: transparent;
--radio-primary-focus-checked-border-color: var(--color-primary-focus-border);
--radio-primary-focus-inner-circle-color: var(--color-primary-focus);
--radio-primary-hover-background-color: var(--color-primary-transparent-hover);
--radio-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--radio-primary-hover-inner-circle-color: var(--color-primary-hover);
--radio-primary-hover-checked-background-color: transparent;
--radio-primary-hover-checked-border-color: var(--color-primary-hover-border);
--radio-primary-active-border-color: var(--color-primary-transparent-active-border);
--radio-primary-active-background-color: var(--color-primary-transparent-active);
--radio-primary-active-checked-background-color: transparent;
--radio-primary-active-checked-border-color: var(--color-primary-active-border);
--radio-primary-active-inner-circle-color: var(--color-primary-active);
--radio-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-primary-disabled-text-color: var(--text-disabled-color);
--radio-primary-disabled-checked-background-color: transparent;
--radio-primary-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-primary-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-success-text-color: var(--text-basic-color);
--radio-success-border-color: var(--color-success-transparent-default-border);
--radio-success-background-color: var(--color-success-transparent-default);
--radio-success-checked-background-color: transparent;
--radio-success-checked-border-color: var(--color-success-default-border);
--radio-success-inner-circle-color: var(--color-success-default);
--radio-success-focus-border-color: var(--color-success-transparent-focus-border);
--radio-success-focus-background-color: var(--color-success-transparent-focus);
--radio-success-focus-checked-background-color: transparent;
--radio-success-focus-checked-border-color: var(--color-success-focus-border);
--radio-success-focus-inner-circle-color: var(--color-success-focus);
--radio-success-hover-background-color: var(--color-success-transparent-hover);
--radio-success-hover-border-color: var(--color-success-transparent-hover-border);
--radio-success-hover-inner-circle-color: var(--color-success-hover);
--radio-success-hover-checked-background-color: transparent;
--radio-success-hover-checked-border-color: var(--color-success-hover-border);
--radio-success-active-background-color: var(--color-success-transparent-active);
--radio-success-active-border-color: var(--color-success-transparent-active-border);
--radio-success-active-checked-background-color: transparent;
--radio-success-active-checked-border-color: var(--color-success-active-border);
--radio-success-active-inner-circle-color: var(--color-success-active);
--radio-success-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-success-disabled-text-color: var(--text-disabled-color);
--radio-success-disabled-checked-background-color: transparent;
--radio-success-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-success-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-info-text-color: var(--text-basic-color);
--radio-info-border-color: var(--color-info-transparent-default-border);
--radio-info-background-color: var(--color-info-transparent-default);
--radio-info-checked-background-color: transparent;
--radio-info-checked-border-color: var(--color-info-default-border);
--radio-info-inner-circle-color: var(--color-info-default);
--radio-info-focus-background-color: var(--color-info-transparent-focus);
--radio-info-focus-border-color: var(--color-info-transparent-focus-border);
--radio-info-focus-checked-background-color: transparent;
--radio-info-focus-checked-border-color: var(--color-info-focus-border);
--radio-info-focus-inner-circle-color: var(--color-info-focus);
--radio-info-hover-background-color: var(--color-info-transparent-hover);
--radio-info-hover-border-color: var(--color-info-transparent-hover-border);
--radio-info-hover-inner-circle-color: var(--color-info-hover);
--radio-info-hover-checked-background-color: transparent;
--radio-info-hover-checked-border-color: var(--color-info-hover-border);
--radio-info-active-background-color: var(--color-info-transparent-active);
--radio-info-active-border-color: var(--color-info-transparent-active-border);
--radio-info-active-checked-background-color: transparent;
--radio-info-active-checked-border-color: var(--color-info-active-border);
--radio-info-active-inner-circle-color: var(--color-info-active);
--radio-info-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-info-disabled-text-color: var(--text-disabled-color);
--radio-info-disabled-checked-background-color: transparent;
--radio-info-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-info-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-warning-text-color: var(--text-basic-color);
--radio-warning-border-color: var(--color-warning-transparent-default-border);
--radio-warning-background-color: var(--color-warning-transparent-default);
--radio-warning-checked-background-color: transparent;
--radio-warning-checked-border-color: var(--color-warning-default-border);
--radio-warning-inner-circle-color: var(--color-warning-default);
--radio-warning-focus-background-color: var(--color-warning-transparent-focus);
--radio-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--radio-warning-focus-checked-background-color: transparent;
--radio-warning-focus-checked-border-color: var(--color-warning-focus-border);
--radio-warning-focus-inner-circle-color: var(--color-warning-focus);
--radio-warning-hover-background-color: var(--color-warning-transparent-hover);
--radio-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--radio-warning-hover-inner-circle-color: var(--color-warning-hover);
--radio-warning-hover-checked-background-color: transparent;
--radio-warning-hover-checked-border-color: var(--color-warning-hover-border);
--radio-warning-active-background-color: var(--color-warning-transparent-active);
--radio-warning-active-border-color: var(--color-warning-transparent-active-border);
--radio-warning-active-checked-background-color: transparent;
--radio-warning-active-checked-border-color: var(--color-warning-active-border);
--radio-warning-active-inner-circle-color: var(--color-warning-active);
--radio-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-warning-disabled-text-color: var(--text-disabled-color);
--radio-warning-disabled-checked-background-color: transparent;
--radio-warning-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-warning-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-danger-text-color: var(--text-basic-color);
--radio-danger-border-color: var(--color-danger-transparent-default-border);
--radio-danger-background-color: var(--color-danger-transparent-default);
--radio-danger-checked-background-color: transparent;
--radio-danger-checked-border-color: var(--color-danger-default-border);
--radio-danger-inner-circle-color: var(--color-danger-default);
--radio-danger-focus-background-color: var(--color-danger-transparent-focus);
--radio-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--radio-danger-focus-checked-background-color: transparent;
--radio-danger-focus-checked-border-color: var(--color-danger-focus-border);
--radio-danger-focus-inner-circle-color: var(--color-danger-focus);
--radio-danger-hover-background-color: var(--color-danger-transparent-hover);
--radio-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--radio-danger-hover-inner-circle-color: var(--color-danger-hover);
--radio-danger-hover-checked-background-color: transparent;
--radio-danger-hover-checked-border-color: var(--color-danger-hover-border);
--radio-danger-active-background-color: var(--color-danger-transparent-active);
--radio-danger-active-border-color: var(--color-danger-transparent-active-border);
--radio-danger-active-checked-background-color: transparent;
--radio-danger-active-checked-border-color: var(--color-danger-active-border);
--radio-danger-active-inner-circle-color: var(--color-danger-active);
--radio-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--radio-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--radio-danger-disabled-text-color: var(--text-disabled-color);
--radio-danger-disabled-checked-background-color: transparent;
--radio-danger-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-danger-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--radio-control-text-color: var(--text-control-color);
--radio-control-background-color: var(--color-control-transparent-default);
--radio-control-border-color: var(--color-control-transparent-default-border);
--radio-control-checked-background-color: transparent;
--radio-control-checked-border-color: var(--color-control-default-border);
--radio-control-inner-circle-color: var(--color-control-default);
--radio-control-focus-background-color: var(--color-control-transparent-focus);
--radio-control-focus-border-color: var(--color-control-transparent-focus-border);
--radio-control-focus-checked-background-color: transparent;
--radio-control-focus-checked-border-color: var(--color-control-focus-border);
--radio-control-focus-inner-circle-color: var(--color-control-focus);
--radio-control-hover-background-color: var(--color-control-transparent-hover);
--radio-control-hover-border-color: var(--color-control-transparent-hover-border);
--radio-control-hover-inner-circle-color: var(--color-control-hover);
--radio-control-hover-checked-background-color: transparent;
--radio-control-hover-checked-border-color: var(--color-control-hover-border);
--radio-control-active-background-color: var(--color-control-transparent-active);
--radio-control-active-border-color: var(--color-control-transparent-active-border);
--radio-control-active-checked-background-color: transparent;
--radio-control-active-checked-border-color: var(--color-control-active-border);
--radio-control-active-inner-circle-color: var(--color-control-active);
--radio-control-disabled-background-color: var(--color-control-transparent-disabled);
--radio-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--radio-control-disabled-text-color: var(--color-basic-100);
--radio-control-disabled-checked-background-color: transparent;
--radio-control-disabled-checked-border-color: var(--color-basic-transparent-600);
--radio-control-disabled-checked-inner-circle-color: var(--color-basic-transparent-600);
--tree-grid-cell-border-width: 1px;
--tree-grid-cell-border-style: solid;
--tree-grid-cell-border-color: var(--border-basic-color-2);
--tree-grid-row-min-height: 2rem;
--tree-grid-cell-padding: 0.875rem 1.25rem;
--tree-grid-header-background-color: var(--background-basic-color-1);
--tree-grid-header-text-color: var(--text-basic-color);
--tree-grid-header-text-font-family: var(--text-subtitle-font-family);
--tree-grid-header-text-font-size: var(--text-subtitle-font-size);
--tree-grid-header-text-font-weight: var(--text-subtitle-font-weight);
--tree-grid-header-text-line-height: var(--text-subtitle-line-height);
--tree-grid-footer-background-color: var(--background-basic-color-1);
--tree-grid-footer-text-color: var(--text-basic-color);
--tree-grid-footer-text-font-family: var(--tree-grid-header-text-font-family);
--tree-grid-footer-text-font-size: var(--tree-grid-header-text-font-size);
--tree-grid-footer-text-font-weight: var(--tree-grid-header-text-font-weight);
--tree-grid-footer-text-line-height: var(--tree-grid-header-text-line-height);
--tree-grid-row-background-color: var(--background-basic-color-1);
--tree-grid-row-even-background-color: var(--background-basic-color-1);
--tree-grid-row-hover-background-color: var(--background-basic-color-1);
--tree-grid-row-text-color: var(--text-basic-color);
--tree-grid-row-text-font-family: var(--text-paragraph-font-family);
--tree-grid-row-text-font-size: var(--text-paragraph-font-size);
--tree-grid-row-text-font-weight: var(--text-paragraph-font-weight);
--tree-grid-row-text-line-height: var(--text-paragraph-line-height);
--tree-grid-sort-header-button-background-color: transparent;
--tree-grid-sort-header-button-border: none;
--tree-grid-sort-header-button-padding: 0;
--icon-font-size: 1.25rem;
--icon-line-height: 1;
--icon-width: 1em;
--icon-height: 1em;
--icon-svg-vertical-align: top;
--icon-basic-color: var(--text-hint-color);
--icon-primary-color: var(--color-primary-default);
--icon-info-color: var(--color-info-default);
--icon-success-color: var(--color-success-default);
--icon-warning-color: var(--color-warning-default);
--icon-danger-color: var(--color-danger-default);
--icon-control-color: var(--color-basic-100);
--tag-text-font-family: var(--text-subtitle-font-family);
--tag-text-transform: capitalize;
--tag-border-width: 0.0625rem;
--tag-border-style: solid;
--tag-border-radius: 1.5rem;
--tag-tiny-text-font-size: var(--input-tiny-text-font-size);
--tag-tiny-text-font-weight: var(--input-tiny-text-font-weight);
--tag-tiny-text-line-height: var(--input-tiny-text-line-height);
--tag-tiny-padding: 0.0625rem 0.9375rem;
--tag-tiny-close-offset: 0.625rem;
--tag-small-text-font-size: var(--input-small-text-font-size);
--tag-small-text-font-weight: var(--input-small-text-font-weight);
--tag-small-text-line-height: var(--input-small-text-line-height);
--tag-small-padding: 0.0625rem 0.9375rem;
--tag-small-close-offset: 0.625rem;
--tag-medium-text-font-size: var(--input-medium-text-font-size);
--tag-medium-text-font-weight: var(--input-medium-text-font-weight);
--tag-medium-text-line-height: var(--input-medium-text-line-height);
--tag-medium-padding: 0.1875rem 0.9375rem;
--tag-medium-close-offset: 0.625rem;
--tag-large-text-font-size: var(--input-large-text-font-size);
--tag-large-text-font-weight: var(--input-large-text-font-weight);
--tag-large-text-line-height: var(--input-large-text-line-height);
--tag-large-padding: 0.3125rem 0.9375rem;
--tag-large-close-offset: 0.625rem;
--tag-giant-text-font-size: var(--input-giant-text-font-size);
--tag-giant-text-font-weight: var(--input-giant-text-font-weight);
--tag-giant-text-line-height: var(--input-giant-text-line-height);
--tag-giant-padding: 0.4375rem 0.9375rem;
--tag-giant-close-offset: 0.625rem;
--tag-filled-basic-background-color: var(--color-basic-default);
--tag-filled-basic-border-color: var(--color-basic-default-border);
--tag-filled-basic-text-color: var(--color-basic-800);
--tag-filled-basic-active-background-color: var(--color-basic-focus);
--tag-filled-basic-active-border-color: var(--color-basic-focus-border);
--tag-filled-basic-hover-background-color: var(--color-basic-hover);
--tag-filled-basic-hover-border-color: var(--color-basic-hover-border);
--tag-filled-basic-selected-background-color: color-basic-actove;
--tag-filled-basic-selected-border-color: var(--color-basic-active-border);
--tag-filled-primary-background-color: var(--color-primary-default);
--tag-filled-primary-border-color: var(--color-primary-default-border);
--tag-filled-primary-text-color: var(--text-control-color);
--tag-filled-primary-active-background-color: var(--color-primary-focus);
--tag-filled-primary-active-border-color: var(--color-primary-focus-border);
--tag-filled-primary-hover-background-color: var(--color-primary-hover);
--tag-filled-primary-hover-border-color: var(--color-primary-hover-border);
--tag-filled-primary-selected-background-color: color-primary-actove;
--tag-filled-primary-selected-border-color: var(--color-primary-active-border);
--tag-filled-success-background-color: var(--color-success-default);
--tag-filled-success-border-color: var(--color-success-default-border);
--tag-filled-success-text-color: var(--text-control-color);
--tag-filled-success-active-background-color: var(--color-success-focus);
--tag-filled-success-active-border-color: var(--color-success-focus-border);
--tag-filled-success-hover-background-color: var(--color-success-hover);
--tag-filled-success-hover-border-color: var(--color-success-hover-border);
--tag-filled-success-selected-background-color: color-success-actove;
--tag-filled-success-selected-border-color: var(--color-success-active-border);
--tag-filled-info-background-color: var(--color-info-default);
--tag-filled-info-border-color: var(--color-info-default-border);
--tag-filled-info-text-color: var(--text-control-color);
--tag-filled-info-active-background-color: var(--color-info-focus);
--tag-filled-info-active-border-color: var(--color-info-focus-border);
--tag-filled-info-hover-background-color: var(--color-info-hover);
--tag-filled-info-hover-border-color: var(--color-info-hover-border);
--tag-filled-info-selected-background-color: color-info-actove;
--tag-filled-info-selected-border-color: var(--color-info-active-border);
--tag-filled-warning-background-color: var(--color-warning-default);
--tag-filled-warning-border-color: var(--color-warning-default-border);
--tag-filled-warning-text-color: var(--text-control-color);
--tag-filled-warning-active-background-color: var(--color-warning-focus);
--tag-filled-warning-active-border-color: var(--color-warning-focus-border);
--tag-filled-warning-hover-background-color: var(--color-warning-hover);
--tag-filled-warning-hover-border-color: var(--color-warning-hover-border);
--tag-filled-warning-selected-background-color: color-warning-actove;
--tag-filled-warning-selected-border-color: var(--color-warning-active-border);
--tag-filled-danger-background-color: var(--color-danger-default);
--tag-filled-danger-border-color: var(--color-danger-default-border);
--tag-filled-danger-text-color: var(--text-control-color);
--tag-filled-danger-active-background-color: var(--color-danger-focus);
--tag-filled-danger-active-border-color: var(--color-danger-focus-border);
--tag-filled-danger-hover-background-color: var(--color-danger-hover);
--tag-filled-danger-hover-border-color: var(--color-danger-hover-border);
--tag-filled-danger-selected-background-color: color-danger-actove;
--tag-filled-danger-selected-border-color: var(--color-danger-active-border);
--tag-filled-control-background-color: var(--color-control-default);
--tag-filled-control-border-color: var(--color-control-default-border);
--tag-filled-control-text-color: var(--color-basic-800);
--tag-filled-control-active-background-color: var(--color-control-hover);
--tag-filled-control-active-border-color: var(--color-control-hover-border);
--tag-filled-control-hover-background-color: var(--color-control-focus);
--tag-filled-control-hover-border-color: var(--color-control-focus-border);
--tag-filled-control-selected-background-color: color-control-actove;
--tag-filled-control-selected-border-color: var(--color-control-active-border);
--tag-outline-basic-background-color: var(--color-basic-transparent-default);
--tag-outline-basic-border-color: var(--color-basic-transparent-default-border);
--tag-outline-basic-text-color: var(--text-hint-color);
--tag-outline-basic-active-background-color: var(--color-basic-transparent-focus);
--tag-outline-basic-active-border-color: var(--color-basic-transparent-focus-border);
--tag-outline-basic-active-text-color: var(--text-hint-color);
--tag-outline-basic-hover-background-color: var(--color-basic-transparent-hover);
--tag-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border);
--tag-outline-basic-hover-text-color: var(--text-hint-color);
--tag-outline-basic-selected-background-color: var(--color-basic-transparent-active);
--tag-outline-basic-selected-border-color: var(--color-basic-transparent-active-border);
--tag-outline-basic-selected-text-color: var(--text-hint-color);
--tag-outline-primary-background-color: var(--color-primary-transparent-default);
--tag-outline-primary-border-color: var(--color-primary-transparent-default-border);
--tag-outline-primary-text-color: var(--text-primary-color);
--tag-outline-primary-active-background-color: var(--color-primary-transparent-focus);
--tag-outline-primary-active-border-color: var(--color-primary-transparent-focus-border);
--tag-outline-primary-active-text-color: var(--text-primary-color);
--tag-outline-primary-hover-background-color: var(--color-primary-transparent-hover);
--tag-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--tag-outline-primary-hover-text-color: var(--text-primary-color);
--tag-outline-primary-selected-background-color: var(--color-primary-transparent-active);
--tag-outline-primary-selected-border-color: var(--color-primary-transparent-active-border);
--tag-outline-primary-selected-text-color: var(--text-primary-color);
--tag-outline-success-background-color: var(--color-success-transparent-default);
--tag-outline-success-border-color: var(--color-success-transparent-default-border);
--tag-outline-success-text-color: var(--text-success-color);
--tag-outline-success-active-background-color: var(--color-success-transparent-focus);
--tag-outline-success-active-border-color: var(--color-success-transparent-focus-border);
--tag-outline-success-active-text-color: var(--text-success-color);
--tag-outline-success-hover-background-color: var(--color-success-transparent-hover);
--tag-outline-success-hover-border-color: var(--color-success-transparent-hover-border);
--tag-outline-success-hover-text-color: var(--text-success-color);
--tag-outline-success-selected-background-color: var(--color-success-transparent-active);
--tag-outline-success-selected-border-color: var(--color-success-transparent-active-border);
--tag-outline-success-selected-text-color: var(--text-success-color);
--tag-outline-info-background-color: var(--color-info-transparent-default);
--tag-outline-info-border-color: var(--color-info-transparent-default-border);
--tag-outline-info-text-color: var(--text-info-color);
--tag-outline-info-active-background-color: var(--color-info-transparent-focus);
--tag-outline-info-active-border-color: var(--color-info-transparent-focus-border);
--tag-outline-info-active-text-color: var(--text-info-color);
--tag-outline-info-hover-background-color: var(--color-info-transparent-hover);
--tag-outline-info-hover-border-color: var(--color-info-transparent-hover-border);
--tag-outline-info-hover-text-color: var(--text-info-color);
--tag-outline-info-selected-background-color: var(--color-info-transparent-active);
--tag-outline-info-selected-border-color: var(--color-info-transparent-active-border);
--tag-outline-info-selected-text-color: var(--text-info-color);
--tag-outline-warning-background-color: var(--color-warning-transparent-default);
--tag-outline-warning-border-color: var(--color-warning-transparent-default-border);
--tag-outline-warning-text-color: var(--text-warning-color);
--tag-outline-warning-active-background-color: var(--color-warning-transparent-focus);
--tag-outline-warning-active-border-color: var(--color-warning-transparent-focus-border);
--tag-outline-warning-active-text-color: var(--text-warning-color);
--tag-outline-warning-hover-background-color: var(--color-warning-transparent-hover);
--tag-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--tag-outline-warning-hover-text-color: var(--text-warning-color);
--tag-outline-warning-selected-background-color: var(--color-warning-transparent-active);
--tag-outline-warning-selected-border-color: var(--color-warning-transparent-active-border);
--tag-outline-warning-selected-text-color: var(--text-warning-color);
--tag-outline-danger-background-color: var(--color-danger-transparent-default);
--tag-outline-danger-border-color: var(--color-danger-transparent-default-border);
--tag-outline-danger-text-color: var(--text-danger-color);
--tag-outline-danger-active-background-color: var(--color-danger-transparent-focus);
--tag-outline-danger-active-border-color: var(--color-danger-transparent-focus-border);
--tag-outline-danger-active-text-color: var(--text-danger-color);
--tag-outline-danger-hover-background-color: var(--color-danger-transparent-hover);
--tag-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--tag-outline-danger-hover-text-color: var(--text-danger-color);
--tag-outline-danger-selected-background-color: var(--color-danger-transparent-active);
--tag-outline-danger-selected-border-color: var(--color-danger-transparent-active-border);
--tag-outline-danger-selected-text-color: var(--text-danger-color);
--tag-outline-control-background-color: var(--color-control-transparent-default);
--tag-outline-control-border-color: var(--color-control-transparent-default-border);
--tag-outline-control-text-color: var(--text-control-color);
--tag-outline-control-active-background-color: var(--color-control-transparent-focus);
--tag-outline-control-active-border-color: var(--color-control-transparent-focus-border);
--tag-outline-control-active-text-color: var(--text-control-color);
--tag-outline-control-hover-background-color: var(--color-control-transparent-hover);
--tag-outline-control-hover-border-color: var(--color-control-transparent-hover-border);
--tag-outline-control-hover-text-color: var(--text-control-color);
--tag-outline-control-selected-background-color: var(--color-control-transparent-active);
--tag-outline-control-selected-border-color: var(--color-control-transparent-active-border);
--tag-outline-control-selected-text-color: var(--text-control-color);
--tag-list-tiny-tag-offset: 0.0625rem;
--tag-list-small-tag-offset: 0.125rem;
--tag-list-medium-tag-offset: 0.25rem;
--tag-list-large-tag-offset: 0.375rem;
--tag-list-giant-tag-offset: 0.5rem;
--tag-list-with-input-tiny-padding: 0.0625rem 1rem;
--tag-list-with-input-small-padding: 0.0625rem 1rem;
--tag-list-with-input-medium-padding: 0.1875rem 1rem;
--tag-list-with-input-large-padding: 0.3125rem 1rem;
--tag-list-with-input-giant-padding: 0.4375rem 1rem;
--tag-list-with-input-rectangle-border-radius: var(--input-rectangle-border-radius);
--tag-list-with-input-semi-round-border-radius: var(--input-semi-round-border-radius);
--tag-list-with-input-round-border-radius: var(--input-round-border-radius);
--tag-input-min-width: 6rem;
--tag-input-text-font-family: var(--input-text-font-family);
--tag-input-placeholder-text-font-family: var(--input-placeholder-text-font-family);
--tag-input-basic-background-color: var(--input-basic-background-color);
--tag-input-basic-border-color: var(--input-basic-border-color);
--tag-input-basic-text-color: var(--input-basic-text-color);
--tag-input-basic-placeholder-text-color: var(--input-basic-placeholder-text-color);
--tag-input-basic-focus-background-color: var(--input-basic-focus-background-color);
--tag-input-basic-focus-border-color: var(--input-basic-focus-border-color);
--tag-input-basic-disabled-text-color: var(--input-basic-disabled-text-color);
--tag-input-basic-disabled-placeholder-text-color: var(--input-basic-disabled-placeholder-text-color);
--tag-input-primary-background-color: var(--input-primary-background-color);
--tag-input-primary-border-color: var(--input-primary-border-color);
--tag-input-primary-text-color: var(--input-primary-text-color);
--tag-input-primary-placeholder-text-color: var(--input-primary-placeholder-text-color);
--tag-input-primary-focus-background-color: var(--input-primary-focus-background-color);
--tag-input-primary-focus-border-color: var(--input-primary-focus-border-color);
--tag-input-primary-disabled-text-color: var(--input-primary-disabled-text-color);
--tag-input-primary-disabled-placeholder-text-color: var(--input-primary-disabled-placeholder-text-color);
--tag-input-success-background-color: var(--input-success-background-color);
--tag-input-success-border-color: var(--input-success-border-color);
--tag-input-success-text-color: var(--input-success-text-color);
--tag-input-success-placeholder-text-color: var(--input-success-placeholder-text-color);
--tag-input-success-focus-background-color: var(--input-success-focus-background-color);
--tag-input-success-focus-border-color: var(--input-success-focus-border-color);
--tag-input-success-disabled-text-color: var(--input-success-disabled-text-color);
--tag-input-success-disabled-placeholder-text-color: var(--input-success-disabled-placeholder-text-color);
--tag-input-info-background-color: var(--input-info-background-color);
--tag-input-info-border-color: var(--input-info-border-color);
--tag-input-info-text-color: var(--input-info-text-color);
--tag-input-info-placeholder-text-color: var(--input-info-placeholder-text-color);
--tag-input-info-focus-background-color: var(--input-info-focus-background-color);
--tag-input-info-focus-border-color: var(--input-info-focus-border-color);
--tag-input-info-disabled-text-color: var(--input-info-disabled-text-color);
--tag-input-info-disabled-placeholder-text-color: var(--input-info-disabled-placeholder-text-color);
--tag-input-warning-background-color: var(--input-warning-background-color);
--tag-input-warning-border-color: var(--input-warning-border-color);
--tag-input-warning-text-color: var(--input-warning-text-color);
--tag-input-warning-placeholder-text-color: var(--input-warning-placeholder-text-color);
--tag-input-warning-focus-background-color: var(--input-warning-focus-background-color);
--tag-input-warning-focus-border-color: var(--input-warning-focus-border-color);
--tag-input-warning-disabled-text-color: var(--input-warning-disabled-text-color);
--tag-input-warning-disabled-placeholder-text-color: var(--input-warning-disabled-placeholder-text-color);
--tag-input-danger-background-color: var(--input-danger-background-color);
--tag-input-danger-border-color: var(--input-danger-border-color);
--tag-input-danger-text-color: var(--input-danger-text-color);
--tag-input-danger-placeholder-text-color: var(--input-danger-placeholder-text-color);
--tag-input-danger-focus-background-color: var(--input-danger-focus-background-color);
--tag-input-danger-focus-border-color: var(--input-danger-focus-border-color);
--tag-input-danger-disabled-text-color: var(--input-danger-disabled-text-color);
--tag-input-danger-disabled-placeholder-text-color: var(--input-danger-disabled-placeholder-text-color);
--tag-input-control-background-color: var(--input-control-background-color);
--tag-input-control-border-color: var(--input-control-border-color);
--tag-input-control-text-color: var(--input-control-text-color);
--tag-input-control-placeholder-text-color: var(--input-control-placeholder-text-color);
--tag-input-control-focus-background-color: var(--input-control-focus-background-color);
--tag-input-control-focus-border-color: var(--input-control-focus-border-color);
--tag-input-control-disabled-text-color: var(--input-control-disabled-text-color);
--tag-input-control-disabled-placeholder-text-color: var(--input-control-disabled-placeholder-text-color);
--tag-input-tiny-text-font-size: var(--input-tiny-text-font-size);
--tag-input-tiny-text-font-weight: var(--input-tiny-text-font-weight);
--tag-input-tiny-text-line-height: var(--input-tiny-text-line-height);
--tag-input-tiny-placeholder-text-font-size: var(--input-tiny-placeholder-text-font-size);
--tag-input-tiny-placeholder-text-font-weight: var(--input-tiny-placeholder-text-font-weight);
--tag-input-tiny-placeholder-text-line-height: var(--input-tiny-placeholder-text-line-height);
--tag-input-tiny-padding: 0.125rem 0;
--tag-input-small-text-font-size: var(--input-small-text-font-size);
--tag-input-small-text-font-weight: var(--input-small-text-font-weight);
--tag-input-small-text-line-height: var(--input-small-text-line-height);
--tag-input-small-placeholder-text-font-size: var(--input-small-placeholder-text-font-size);
--tag-input-small-placeholder-text-font-weight: var(--input-small-placeholder-text-font-weight);
--tag-input-small-placeholder-text-line-height: var(--input-small-placeholder-text-line-height);
--tag-input-small-padding: 0.125rem 0;
--tag-input-medium-text-font-size: var(--input-medium-text-font-size);
--tag-input-medium-text-font-weight: var(--input-medium-text-font-weight);
--tag-input-medium-text-line-height: var(--input-medium-text-line-height);
--tag-input-medium-placeholder-text-font-size: var(--input-medium-placeholder-text-font-size);
--tag-input-medium-placeholder-text-font-weight: var(--input-medium-placeholder-text-font-weight);
--tag-input-medium-placeholder-text-line-height: var(--input-medium-placeholder-text-line-height);
--tag-input-medium-padding: 0.25rem 0;
--tag-input-large-text-font-size: var(--input-large-text-font-size);
--tag-input-large-text-font-weight: var(--input-large-text-font-weight);
--tag-input-large-text-line-height: var(--input-large-text-line-height);
--tag-input-large-placeholder-text-font-size: var(--input-large-placeholder-text-font-size);
--tag-input-large-placeholder-text-font-weight: var(--input-large-placeholder-text-font-weight);
--tag-input-large-placeholder-text-line-height: var(--input-large-placeholder-text-line-height);
--tag-input-large-padding: 0.375rem 0;
--tag-input-giant-text-font-size: var(--input-giant-text-font-size);
--tag-input-giant-text-font-weight: var(--input-giant-text-font-weight);
--tag-input-giant-text-line-height: var(--input-giant-text-line-height);
--tag-input-giant-placeholder-text-font-size: var(--input-giant-placeholder-text-font-size);
--tag-input-giant-placeholder-text-font-weight: var(--input-giant-placeholder-text-font-weight);
--tag-input-giant-placeholder-text-line-height: var(--input-giant-placeholder-text-line-height);
--tag-input-giant-padding: 0.5rem 0;
--toggle-height: 1.875rem;
--toggle-width: 3.125rem;
--toggle-border-width: 1px;
--toggle-border-radius: 100px;
--toggle-outline-width: var(--outline-width);
--toggle-outline-color: var(--outline-color);
--toggle-switcher-size: 1.75rem;
--toggle-switcher-icon-size: 0.75rem;
--toggle-text-font-family: var(--text-subtitle-2-font-family);
--toggle-text-font-size: var(--text-subtitle-2-font-size);
--toggle-text-font-weight: var(--text-subtitle-2-font-weight);
--toggle-text-line-height: var(--text-subtitle-2-line-height);
--toggle-cursor: pointer;
--toggle-disabled-cursor: default;
--toggle-basic-text-color: var(--text-basic-color);
--toggle-basic-background-color: var(--color-basic-transparent-default);
--toggle-basic-border-color: var(--color-basic-transparent-default-border);
--toggle-basic-checked-background-color: var(--color-primary-default);
--toggle-basic-checked-border-color: var(--color-primary-default-border);
--toggle-basic-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-basic-checked-switcher-checkmark-color: var(--color-primary-default);
--toggle-basic-focus-background-color: var(--color-primary-transparent-focus);
--toggle-basic-focus-border-color: var(--color-primary-transparent-focus-border);
--toggle-basic-focus-checked-background-color: var(--color-primary-focus);
--toggle-basic-focus-checked-border-color: var(--color-primary-focus-border);
--toggle-basic-hover-background-color: var(--color-primary-transparent-hover);
--toggle-basic-hover-border-color: var(--color-primary-transparent-hover-border);
--toggle-basic-hover-checked-background-color: var(--color-primary-hover);
--toggle-basic-hover-checked-border-color: var(--color-primary-hover-border);
--toggle-basic-active-background-color: var(--color-primary-transparent-active);
--toggle-basic-active-border-color: var(--color-primary-transparent-active-border);
--toggle-basic-active-checked-background-color: var(--color-primary-active);
--toggle-basic-active-checked-border-color: var(--color-primary-active-border);
--toggle-basic-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-basic-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-basic-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-basic-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-basic-disabled-text-color: var(--text-disabled-color);
--toggle-primary-text-color: var(--text-basic-color);
--toggle-primary-background-color: var(--color-primary-transparent-default);
--toggle-primary-border-color: var(--color-primary-transparent-default-border);
--toggle-primary-checked-background-color: var(--color-primary-default);
--toggle-primary-checked-border-color: var(--color-primary-default-border);
--toggle-primary-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-primary-checked-switcher-checkmark-color: var(--color-primary-default);
--toggle-primary-focus-background-color: var(--color-primary-transparent-focus);
--toggle-primary-focus-border-color: var(--color-primary-transparent-focus-border);
--toggle-primary-focus-checked-background-color: var(--color-primary-focus);
--toggle-primary-focus-checked-border-color: var(--color-primary-focus-border);
--toggle-primary-hover-background-color: var(--color-primary-transparent-hover);
--toggle-primary-hover-border-color: var(--color-primary-transparent-hover-border);
--toggle-primary-hover-checked-background-color: var(--color-primary-hover);
--toggle-primary-hover-checked-border-color: var(--color-primary-hover-border);
--toggle-primary-active-background-color: var(--color-primary-transparent-active);
--toggle-primary-active-border-color: var(--color-primary-transparent-active-border);
--toggle-primary-active-checked-background-color: var(--color-primary-active);
--toggle-primary-active-checked-border-color: var(--color-primary-active-border);
--toggle-primary-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-primary-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-primary-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-primary-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-primary-disabled-text-color: var(--text-disabled-color);
--toggle-success-text-color: var(--text-basic-color);
--toggle-success-background-color: var(--color-success-transparent-default);
--toggle-success-border-color: var(--color-success-transparent-default-border);
--toggle-success-checked-background-color: var(--color-success-default);
--toggle-success-checked-border-color: var(--color-success-default-border);
--toggle-success-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-success-checked-switcher-checkmark-color: var(--color-success-default);
--toggle-success-focus-background-color: var(--color-success-transparent-focus);
--toggle-success-focus-border-color: var(--color-success-transparent-focus-border);
--toggle-success-focus-checked-background-color: var(--color-success-focus);
--toggle-success-focus-checked-border-color: var(--color-success-focus-border);
--toggle-success-hover-background-color: var(--color-success-transparent-hover);
--toggle-success-hover-border-color: var(--color-success-transparent-hover-border);
--toggle-success-hover-checked-background-color: var(--color-success-hover);
--toggle-success-hover-checked-border-color: var(--color-success-hover-border);
--toggle-success-active-background-color: var(--color-success-transparent-active);
--toggle-success-active-border-color: var(--color-success-transparent-active-border);
--toggle-success-active-checked-background-color: var(--color-success-active);
--toggle-success-active-checked-border-color: var(--color-success-active-border);
--toggle-success-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-success-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-success-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-success-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-success-disabled-text-color: var(--text-disabled-color);
--toggle-info-text-color: var(--text-basic-color);
--toggle-info-background-color: var(--color-info-transparent-default);
--toggle-info-border-color: var(--color-info-transparent-default-border);
--toggle-info-checked-background-color: var(--color-info-default);
--toggle-info-checked-border-color: var(--color-info-default-border);
--toggle-info-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-info-checked-switcher-checkmark-color: var(--color-info-default);
--toggle-info-focus-background-color: var(--color-info-transparent-focus);
--toggle-info-focus-border-color: var(--color-info-transparent-focus-border);
--toggle-info-focus-checked-background-color: var(--color-info-focus);
--toggle-info-focus-checked-border-color: var(--color-info-focus-border);
--toggle-info-hover-background-color: var(--color-info-transparent-hover);
--toggle-info-hover-border-color: var(--color-info-transparent-hover-border);
--toggle-info-hover-checked-background-color: var(--color-info-hover);
--toggle-info-hover-checked-border-color: var(--color-info-hover-border);
--toggle-info-active-background-color: var(--color-info-transparent-active);
--toggle-info-active-border-color: var(--color-info-transparent-active-border);
--toggle-info-active-checked-background-color: var(--color-info-active);
--toggle-info-active-checked-border-color: var(--color-info-active-border);
--toggle-info-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-info-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-info-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-info-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-info-disabled-text-color: var(--text-disabled-color);
--toggle-warning-text-color: var(--text-basic-color);
--toggle-warning-background-color: var(--color-warning-transparent-default);
--toggle-warning-border-color: var(--color-warning-transparent-default-border);
--toggle-warning-checked-background-color: var(--color-warning-default);
--toggle-warning-checked-border-color: var(--color-warning-default-border);
--toggle-warning-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-warning-checked-switcher-checkmark-color: var(--color-warning-default);
--toggle-warning-focus-background-color: var(--color-warning-transparent-focus);
--toggle-warning-focus-border-color: var(--color-warning-transparent-focus-border);
--toggle-warning-focus-checked-background-color: var(--color-warning-focus);
--toggle-warning-focus-checked-border-color: var(--color-warning-focus-border);
--toggle-warning-hover-background-color: var(--color-warning-transparent-hover);
--toggle-warning-hover-border-color: var(--color-warning-transparent-hover-border);
--toggle-warning-hover-checked-background-color: var(--color-warning-hover);
--toggle-warning-hover-checked-border-color: var(--color-warning-hover-border);
--toggle-warning-active-background-color: var(--color-warning-transparent-active);
--toggle-warning-active-border-color: var(--color-warning-transparent-active-border);
--toggle-warning-active-checked-background-color: var(--color-warning-active);
--toggle-warning-active-checked-border-color: var(--color-warning-active-border);
--toggle-warning-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-warning-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-warning-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-warning-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-warning-disabled-text-color: var(--text-disabled-color);
--toggle-danger-text-color: var(--text-basic-color);
--toggle-danger-background-color: var(--color-danger-transparent-default);
--toggle-danger-border-color: var(--color-danger-transparent-default-border);
--toggle-danger-checked-background-color: var(--color-danger-default);
--toggle-danger-checked-border-color: var(--color-danger-default-border);
--toggle-danger-checked-switcher-background-color: var(--background-basic-color-1);
--toggle-danger-checked-switcher-checkmark-color: var(--color-danger-default);
--toggle-danger-focus-background-color: var(--color-danger-transparent-focus);
--toggle-danger-focus-border-color: var(--color-danger-transparent-focus-border);
--toggle-danger-focus-checked-background-color: var(--color-danger-focus);
--toggle-danger-focus-checked-border-color: var(--color-danger-focus-border);
--toggle-danger-hover-background-color: var(--color-danger-transparent-hover);
--toggle-danger-hover-border-color: var(--color-danger-transparent-hover-border);
--toggle-danger-hover-checked-background-color: var(--color-danger-hover);
--toggle-danger-hover-checked-border-color: var(--color-danger-hover-border);
--toggle-danger-active-background-color: var(--color-danger-transparent-active);
--toggle-danger-active-border-color: var(--color-danger-transparent-active-border);
--toggle-danger-active-checked-background-color: var(--color-danger-active);
--toggle-danger-active-checked-border-color: var(--color-danger-active-border);
--toggle-danger-disabled-background-color: var(--color-basic-transparent-disabled);
--toggle-danger-disabled-border-color: var(--color-basic-transparent-disabled-border);
--toggle-danger-disabled-switcher-background-color: var(--color-basic-disabled);
--toggle-danger-disabled-checked-switcher-checkmark-color: var(--text-control-color);
--toggle-danger-disabled-text-color: var(--text-disabled-color);
--toggle-control-text-color: var(--color-basic-100);
--toggle-control-background-color: var(--color-control-transparent-default);
--toggle-control-border-color: var(--color-control-transparent-default-border);
--toggle-control-checked-background-color: var(--color-control-transparent-default);
--toggle-control-checked-border-color: var(--color-control-transparent-default-border);
--toggle-control-checked-switcher-background-color: var(--color-control-default);
--toggle-control-checked-switcher-checkmark-color: var(--color-basic-800);
--toggle-control-focus-background-color: var(--color-control-transparent-focus);
--toggle-control-focus-border-color: var(--color-control-transparent-focus-border);
--toggle-control-focus-checked-background-color: var(--color-control-transparent-focus);
--toggle-control-focus-checked-border-color: var(--color-control-transparent-focus-border);
--toggle-control-hover-background-color: var(--color-control-transparent-hover);
--toggle-control-hover-border-color: var(--color-control-transparent-hover-border);
--toggle-control-hover-checked-background-color: var(--color-control-transparent-hover);
--toggle-control-hover-checked-border-color: var(--color-control-transparent-hover-border);
--toggle-control-active-background-color: var(--color-control-transparent-active);
--toggle-control-active-border-color: var(--color-control-transparent-active-border);
--toggle-control-active-checked-background-color: var(--color-control-transparent-active);
--toggle-control-active-checked-border-color: var(--color-control-transparent-active-border);
--toggle-control-disabled-background-color: var(--color-control-transparent-disabled);
--toggle-control-disabled-border-color: var(--color-control-transparent-disabled-border);
--toggle-control-disabled-switcher-background-color: var(--color-basic-transparent-600);
--toggle-control-disabled-checked-switcher-checkmark-color: var(--color-basic-100);
--toggle-control-disabled-text-color: var(--text-control-color);
--form-field-tiny-max-width: var(--input-tiny-max-width);
--form-field-small-max-width: var(--input-small-max-width);
--form-field-medium-max-width: var(--input-medium-max-width);
--form-field-large-max-width: var(--input-large-max-width);
--form-field-giant-max-width: var(--input-giant-max-width);
--form-field-addon-basic-text-color: var(--color-basic-600);
--form-field-addon-basic-highlight-text-color: var(--color-primary-500);
--form-field-addon-primary-text-color: var(--color-primary-500);
--form-field-addon-primary-highlight-text-color: var(--color-primary-600);
--form-field-addon-success-text-color: var(--color-success-500);
--form-field-addon-success-highlight-text-color: var(--color-success-600);
--form-field-addon-info-text-color: var(--color-info-500);
--form-field-addon-info-highlight-text-color: var(--color-info-600);
--form-field-addon-warning-text-color: var(--color-warning-500);
--form-field-addon-warning-highlight-text-color: var(--color-warning-600);
--form-field-addon-danger-text-color: var(--color-danger-500);
--form-field-addon-danger-highlight-text-color: var(--color-danger-600);
--form-field-addon-control-text-color: var(--color-control-default);
--form-field-addon-control-highlight-text-color: var(--color-control-default);
--form-field-addon-disabled-text-color: var(--text-disabled-color);
--form-field-addon-tiny-height: 1.5rem;
--form-field-addon-tiny-width: var(--form-field-addon-tiny-height);
--form-field-addon-tiny-icon-size: var(--button-tiny-icon-size);
--form-field-addon-tiny-font-size: var(--text-button-tiny-font-size);
--form-field-addon-tiny-line-height: var(--text-button-tiny-line-height);
--form-field-addon-tiny-font-weight: var(--text-button-font-weight);
--form-field-addon-small-height: 2rem;
--form-field-addon-small-width: var(--form-field-addon-small-height);
--form-field-addon-small-icon-size: var(--button-small-icon-size);
--form-field-addon-small-font-size: var(--text-button-small-font-size);
--form-field-addon-small-line-height: var(--text-button-small-line-height);
--form-field-addon-small-font-weight: var(--text-button-font-weight);
--form-field-addon-medium-height: 2.5rem;
--form-field-addon-medium-width: var(--form-field-addon-medium-height);
--form-field-addon-medium-icon-size: var(--button-medium-icon-size);
--form-field-addon-medium-font-size: var(--text-button-medium-font-size);
--form-field-addon-medium-line-height: var(--text-button-medium-line-height);
--form-field-addon-medium-font-weight: var(--text-button-font-weight);
--form-field-addon-large-height: 3rem;
--form-field-addon-large-width: var(--form-field-addon-large-height);
--form-field-addon-large-icon-size: var(--button-large-icon-size);
--form-field-addon-large-font-size: var(--text-button-large-font-size);
--form-field-addon-large-line-height: var(--text-button-large-line-height);
--form-field-addon-large-font-weight: var(--text-button-font-weight);
--form-field-addon-giant-height: 3.5rem;
--form-field-addon-giant-width: var(--form-field-addon-giant-height);
--form-field-addon-giant-icon-size: var(--button-giant-icon-size);
--form-field-addon-giant-font-size: var(--text-button-giant-font-size);
--form-field-addon-giant-line-height: var(--text-button-giant-line-height);
--form-field-addon-giant-font-weight: var(--text-button-font-weight);
--color-primary-100: #faf7ff;
--color-primary-200: #ece3ff;
--color-primary-300: #d5bfff;
--color-primary-400: #b18aff;
--color-primary-500: #a16eff;
--color-primary-600: #7b51db;
--color-primary-700: #5a37b8;
--color-primary-800: #3e2494;
--color-primary-900: #29157a;
--color-primary-transparent-100: rgba(161, 110, 255, 0.08);
--color-primary-transparent-200: rgba(161, 110, 255, 0.16);
--color-primary-transparent-300: rgba(161, 110, 255, 0.24);
--color-primary-transparent-400: rgba(161, 110, 255, 0.32);
--color-primary-transparent-500: rgba(161, 110, 255, 0.4);
--color-primary-transparent-600: rgba(161, 110, 255, 0.48);
--color-success-100: #f0fff5;
--color-success-200: #ccfce3;
--color-success-300: #8cfac7;
--color-success-400: #2ce69b;
--color-success-500: #00d68f;
--color-success-600: #00b887;
--color-success-700: #00997a;
--color-success-800: #007d6c;
--color-success-900: #004a45;
--color-success-transparent-100: rgba(0, 214, 143, 0.08);
--color-success-transparent-200: rgba(0, 214, 143, 0.16);
--color-success-transparent-300: rgba(0, 214, 143, 0.24);
--color-success-transparent-400: rgba(0, 214, 143, 0.32);
--color-success-transparent-500: rgba(0, 214, 143, 0.4);
--color-success-transparent-600: rgba(0, 214, 143, 0.48);
--color-info-100: #f2f8ff;
--color-info-200: #c7e2ff;
--color-info-300: #94cbff;
--color-info-400: #42aaff;
--color-info-500: #0095ff;
--color-info-600: #006fd6;
--color-info-700: #0057c2;
--color-info-800: #0041a8;
--color-info-900: #002885;
--color-info-transparent-100: rgba(0, 149, 255, 0.08);
--color-info-transparent-200: rgba(0, 149, 255, 0.16);
--color-info-transparent-300: rgba(0, 149, 255, 0.24);
--color-info-transparent-400: rgba(0, 149, 255, 0.32);
--color-info-transparent-500: rgba(0, 149, 255, 0.4);
--color-info-transparent-600: rgba(0, 149, 255, 0.48);
--color-warning-100: #fffdf2;
--color-warning-200: #fff1c2;
--color-warning-300: #ffe59e;
--color-warning-400: #ffc94d;
--color-warning-500: #ffaa00;
--color-warning-600: #db8b00;
--color-warning-700: #b86e00;
--color-warning-800: #945400;
--color-warning-900: #703c00;
--color-warning-transparent-100: rgba(255, 170, 0, 0.08);
--color-warning-transparent-200: rgba(255, 170, 0, 0.16);
--color-warning-transparent-300: rgba(255, 170, 0, 0.24);
--color-warning-transparent-400: rgba(255, 170, 0, 0.32);
--color-warning-transparent-500: rgba(255, 170, 0, 0.4);
--color-warning-transparent-600: rgba(255, 170, 0, 0.48);
--color-danger-100: #fff2f2;
--color-danger-200: #ffd6d9;
--color-danger-300: #ffa8b4;
--color-danger-400: #970e0e;
--color-danger-500: #bd0404;
--color-danger-600: #db2c66;
--color-danger-700: #b81d5b;
--color-danger-800: #94124e;
--color-danger-900: #700940;
--color-danger-transparent-100: rgba(255, 61, 113, 0.08);
--color-danger-transparent-200: rgba(255, 61, 113, 0.16);
--color-danger-transparent-300: rgba(255, 61, 113, 0.24);
--color-danger-transparent-400: rgba(255, 61, 113, 0.32);
--color-danger-transparent-500: rgba(255, 61, 113, 0.4);
--color-danger-transparent-600: rgba(255, 61, 113, 0.48);
--color-basic-100: #ffffff;
--color-basic-200: #f7f7fc;
--color-basic-300: #f0f0fa;
--color-basic-400: #e1e1f2;
--color-basic-500: #ceceeb;
--color-basic-600: #b4b4db;
--color-basic-700: #6a6a94;
--color-basic-800: #052349;
--color-basic-900: #031b3a;
--color-basic-1000: #02142c;
--color-basic-1100: #13132b;
--color-basic-transparent-100: rgba(180, 180, 219, 0.08);
--color-basic-transparent-200: rgba(180, 180, 219, 0.16);
--color-basic-transparent-300: rgba(180, 180, 219, 0.24);
--color-basic-transparent-400: rgba(180, 180, 219, 0.32);
--color-basic-transparent-500: rgba(180, 180, 219, 0.4);
--color-basic-transparent-600: rgba(180, 180, 219, 0.48);
--color-basic-control-transparent-100: rgba(255, 255, 255, 0.08);
--color-basic-control-transparent-200: rgba(255, 255, 255, 0.16);
--color-basic-control-transparent-300: rgba(255, 255, 255, 0.24);
--color-basic-control-transparent-400: rgba(255, 255, 255, 0.32);
--color-basic-control-transparent-500: rgba(255, 255, 255, 0.4);
--color-basic-control-transparent-600: rgba(255, 255, 255, 0.48);
--color-basic-focus: var(--color-basic-400);
--color-basic-hover: var(--color-basic-200);
--color-basic-default: var(--color-basic-300);
--color-basic-active: var(--color-basic-400);
--color-basic-disabled: var(--color-basic-transparent-300);
--color-basic-focus-border: var(--color-basic-500);
--color-basic-hover-border: var(--color-basic-hover);
--color-basic-default-border: var(--color-basic-default);
--color-basic-active-border: var(--color-basic-active);
--color-basic-disabled-border: var(--color-basic-disabled);
--color-basic-transparent-focus: var(--color-basic-transparent-300);
--color-basic-transparent-hover: var(--color-basic-transparent-200);
--color-basic-transparent-default: var(--color-basic-transparent-100);
--color-basic-transparent-active: var(--color-basic-transparent-300);
--color-basic-transparent-disabled: var(--color-basic-transparent-200);
--color-basic-transparent-focus-border: var(--color-basic-600);
--color-basic-transparent-hover-border: var(--color-basic-600);
--color-basic-transparent-default-border: var(--color-basic-600);
--color-basic-transparent-active-border: var(--color-basic-600);
--color-basic-transparent-disabled-border: var(--color-basic-transparent-300);
--color-primary-focus: var(--color-primary-600);
--color-primary-hover: var(--color-primary-400);
--color-primary-default: var(--color-primary-500);
--color-primary-active: var(--color-primary-600);
--color-primary-disabled: var(--color-basic-transparent-300);
--color-primary-focus-border: var(--color-primary-700);
--color-primary-hover-border: var(--color-primary-hover);
--color-primary-default-border: var(--color-primary-default);
--color-primary-active-border: var(--color-primary-active);
--color-primary-disabled-border: var(--color-primary-disabled);
--color-primary-transparent-focus: var(--color-primary-transparent-300);
--color-primary-transparent-hover: var(--color-primary-transparent-200);
--color-primary-transparent-default: var(--color-primary-transparent-100);
--color-primary-transparent-active: var(--color-primary-transparent-300);
--color-primary-transparent-disabled: var(--color-basic-transparent-200);
--color-primary-transparent-focus-border: var(--color-primary-500);
--color-primary-transparent-hover-border: var(--color-primary-500);
--color-primary-transparent-default-border: var(--color-primary-500);
--color-primary-transparent-active-border: var(--color-primary-500);
--color-primary-transparent-disabled-border: var(--color-basic-transparent-300);
--color-success-focus: var(--color-success-600);
--color-success-hover: var(--color-success-400);
--color-success-default: var(--color-success-500);
--color-success-active: var(--color-success-600);
--color-success-disabled: var(--color-basic-transparent-300);
--color-success-focus-border: var(--color-success-700);
--color-success-hover-border: var(--color-success-hover);
--color-success-default-border: var(--color-success-default);
--color-success-active-border: var(--color-success-active);
--color-success-disabled-border: var(--color-success-disabled);
--color-success-transparent-focus: var(--color-success-transparent-300);
--color-success-transparent-focus-border: var(--color-success-500);
--color-success-transparent-hover: var(--color-success-transparent-200);
--color-success-transparent-hover-border: var(--color-success-500);
--color-success-transparent-default: var(--color-success-transparent-100);
--color-success-transparent-default-border: var(--color-success-500);
--color-success-transparent-active: var(--color-success-transparent-300);
--color-success-transparent-active-border: var(--color-success-500);
--color-success-transparent-disabled: var(--color-basic-transparent-200);
--color-success-transparent-disabled-border: var(--color-basic-transparent-300);
--color-info-focus: var(--color-info-600);
--color-info-hover: var(--color-info-400);
--color-info-default: var(--color-info-500);
--color-info-active: var(--color-info-600);
--color-info-disabled: var(--color-basic-transparent-300);
--color-info-focus-border: var(--color-info-700);
--color-info-hover-border: var(--color-info-hover);
--color-info-default-border: var(--color-info-default);
--color-info-active-border: var(--color-info-active);
--color-info-disabled-border: var(--color-info-disabled);
--color-info-transparent-focus: var(--color-info-transparent-300);
--color-info-transparent-hover: var(--color-info-transparent-200);
--color-info-transparent-default: var(--color-info-transparent-100);
--color-info-transparent-active: var(--color-info-transparent-300);
--color-info-transparent-disabled: var(--color-basic-transparent-200);
--color-info-transparent-focus-border: var(--color-info-500);
--color-info-transparent-hover-border: var(--color-info-500);
--color-info-transparent-default-border: var(--color-info-500);
--color-info-transparent-active-border: var(--color-info-500);
--color-info-transparent-disabled-border: var(--color-basic-transparent-300);
--color-warning-focus: var(--color-warning-600);
--color-warning-hover: var(--color-warning-400);
--color-warning-default: var(--color-warning-500);
--color-warning-active: var(--color-warning-600);
--color-warning-disabled: var(--color-basic-transparent-300);
--color-warning-focus-border: var(--color-warning-700);
--color-warning-hover-border: var(--color-warning-hover);
--color-warning-default-border: var(--color-warning-default);
--color-warning-active-border: var(--color-warning-active);
--color-warning-disabled-border: var(--color-warning-disabled);
--color-warning-transparent-focus: var(--color-warning-transparent-300);
--color-warning-transparent-hover: var(--color-warning-transparent-200);
--color-warning-transparent-default: var(--color-warning-transparent-100);
--color-warning-transparent-active: var(--color-warning-transparent-300);
--color-warning-transparent-disabled: var(--color-basic-transparent-200);
--color-warning-transparent-focus-border: var(--color-warning-500);
--color-warning-transparent-hover-border: var(--color-warning-500);
--color-warning-transparent-default-border: var(--color-warning-500);
--color-warning-transparent-active-border: var(--color-warning-500);
--color-warning-transparent-disabled-border: var(--color-basic-transparent-300);
--color-danger-focus: var(--color-danger-600);
--color-danger-hover: var(--color-danger-400);
--color-danger-default: var(--color-danger-500);
--color-danger-active: var(--color-danger-600);
--color-danger-disabled: var(--color-basic-transparent-300);
--color-danger-focus-border: var(--color-danger-700);
--color-danger-hover-border: var(--color-danger-hover);
--color-danger-default-border: var(--color-danger-default);
--color-danger-active-border: var(--color-danger-active);
--color-danger-disabled-border: var(--color-danger-disabled);
--color-danger-transparent-focus: var(--color-danger-transparent-300);
--color-danger-transparent-hover: var(--color-danger-transparent-200);
--color-danger-transparent-default: var(--color-danger-transparent-100);
--color-danger-transparent-active: var(--color-danger-transparent-300);
--color-danger-transparent-disabled: var(--color-basic-transparent-200);
--color-danger-transparent-focus-border: var(--color-danger-500);
--color-danger-transparent-hover-border: var(--color-danger-500);
--color-danger-transparent-default-border: var(--color-danger-500);
--color-danger-transparent-active-border: var(--color-danger-500);
--color-danger-transparent-disabled-border: var(--color-basic-transparent-300);
--color-control-focus: var(--color-basic-300);
--color-control-hover: var(--color-basic-200);
--color-control-default: var(--color-basic-100);
--color-control-active: var(--color-basic-300);
--color-control-disabled: var(--color-basic-transparent-300);
--color-control-focus-border: var(--color-basic-500);
--color-control-hover-border: var(--color-control-hover);
--color-control-default-border: var(--color-control-default);
--color-control-active-border: var(--color-control-active);
--color-control-disabled-border: var(--color-control-disabled);
--color-control-transparent-focus: var(--color-basic-control-transparent-300);
--color-control-transparent-hover: var(--color-basic-control-transparent-200);
--color-control-transparent-default: var(--color-basic-control-transparent-100);
--color-control-transparent-active: var(--color-basic-control-transparent-300);
--color-control-transparent-disabled: var(--color-basic-transparent-200);
--color-control-transparent-focus-border: var(--color-basic-100);
--color-control-transparent-hover-border: var(--color-basic-100);
--color-control-transparent-default-border: var(--color-basic-100);
--color-control-transparent-active-border: var(--color-basic-100);
--color-control-transparent-disabled-border: var(--color-basic-transparent-300);
--background-basic-color-1: var(--color-basic-800);
--background-basic-color-2: var(--color-basic-900);
--background-basic-color-3: var(--color-basic-1000);
--background-basic-color-4: var(--color-basic-1100);
--border-basic-color-1: var(--color-basic-800);
--border-basic-color-2: var(--color-basic-900);
--border-basic-color-3: var(--color-basic-1000);
--border-basic-color-4: var(--color-basic-1100);
--border-basic-color-5: var(--color-basic-1100);
--background-alternative-color-1: var(--color-basic-100);
--background-alternative-color-2: var(--color-basic-200);
--background-alternative-color-3: var(--color-basic-300);
--background-alternative-color-4: var(--color-basic-400);
--border-alternative-color-1: var(--color-basic-100);
--border-alternative-color-2: var(--color-basic-200);
--border-alternative-color-3: var(--color-basic-300);
--border-alternative-color-4: var(--color-basic-400);
--border-alternative-color-5: var(--color-basic-500);
--background-primary-color-1: var(--color-primary-500);
--background-primary-color-2: var(--color-primary-600);
--background-primary-color-3: var(--color-primary-700);
--background-primary-color-4: var(--color-primary-800);
--border-primary-color-1: var(--color-basic-500);
--border-primary-color-2: var(--color-basic-600);
--border-primary-color-3: var(--color-basic-700);
--border-primary-color-4: var(--color-basic-800);
--border-primary-color-5: var(--color-basic-900);
--text-basic-color: var(--color-basic-100);
--text-alternate-color: var(--color-basic-900);
--text-control-color: var(--color-basic-100);
--text-disabled-color: var(--color-basic-transparent-600);
--text-hint-color: var(--color-basic-600);
--text-primary-color: var(--color-primary-default);
--text-primary-focus-color: var(--color-primary-focus);
--text-primary-hover-color: var(--color-primary-hover);
--text-primary-active-color: var(--color-primary-active);
--text-primary-disabled-color: var(--color-primary-400);
--text-success-color: var(--color-success-default);
--text-success-focus-color: var(--color-success-focus);
--text-success-hover-color: var(--color-success-hover);
--text-success-active-color: var(--color-success-active);
--text-success-disabled-color: var(--color-success-400);
--text-info-color: var(--color-info-default);
--text-info-focus-color: var(--color-info-focus);
--text-info-hover-color: var(--color-info-hover);
--text-info-active-color: var(--color-info-active);
--text-info-disabled-color: var(--color-info-400);
--text-warning-color: var(--color-warning-default);
--text-warning-focus-color: var(--color-warning-focus);
--text-warning-hover-color: var(--color-warning-hover);
--text-warning-active-color: var(--color-warning-active);
--text-warning-disabled-color: var(--color-warning-400);
--text-danger-color: var(--color-danger-default);
--text-danger-focus-color: var(--color-danger-focus);
--text-danger-hover-color: var(--color-danger-hover);
--text-danger-active-color: var(--color-danger-active);
--text-danger-disabled-color: var(--color-danger-400);
--font-family-primary: Open Sans, sans-serif;
--font-family-secondary: var(--font-family-primary);
--text-heading-1-font-family: var(--font-family-secondary);
--text-heading-1-font-size: 2.25rem;
--text-heading-1-font-weight: 700;
--text-heading-1-line-height: 3rem;
--text-heading-2-font-family: var(--font-family-secondary);
--text-heading-2-font-size: 2rem;
--text-heading-2-font-weight: 700;
--text-heading-2-line-height: 2.5rem;
--text-heading-3-font-family: var(--font-family-secondary);
--text-heading-3-font-size: 1.875rem;
--text-heading-3-font-weight: 700;
--text-heading-3-line-height: 2.5rem;
--text-heading-4-font-family: var(--font-family-secondary);
--text-heading-4-font-size: 1.625rem;
--text-heading-4-font-weight: 700;
--text-heading-4-line-height: 2rem;
--text-heading-5-font-family: var(--font-family-secondary);
--text-heading-5-font-size: 1.375rem;
--text-heading-5-font-weight: 700;
--text-heading-5-line-height: 2rem;
--text-heading-6-font-family: var(--font-family-secondary);
--text-heading-6-font-size: 1.125rem;
--text-heading-6-font-weight: 700;
--text-heading-6-line-height: 1.5rem;
--text-subtitle-font-family: var(--font-family-primary);
--text-subtitle-font-size: 0.9375rem;
--text-subtitle-font-weight: 600;
--text-subtitle-line-height: 1.5rem;
--text-subtitle-2-font-family: var(--font-family-primary);
--text-subtitle-2-font-size: 0.8125rem;
--text-subtitle-2-font-weight: 600;
--text-subtitle-2-line-height: 1.5rem;
--text-paragraph-font-family: var(--font-family-primary);
--text-paragraph-font-size: 0.9375rem;
--text-paragraph-font-weight: 400;
--text-paragraph-line-height: 1.25rem;
--text-paragraph-2-font-family: var(--font-family-primary);
--text-paragraph-2-font-size: 0.8125rem;
--text-paragraph-2-font-weight: 400;
--text-paragraph-2-line-height: 1.125rem;
--text-label-font-family: var(--font-family-primary);
--text-label-font-size: 0.75rem;
--text-label-font-weight: 700;
--text-label-line-height: 1rem;
--text-caption-font-family: var(--font-family-primary);
--text-caption-font-size: 0.75rem;
--text-caption-font-weight: 400;
--text-caption-line-height: 1rem;
--text-caption-2-font-family: var(--font-family-primary);
--text-caption-2-font-size: 0.75rem;
--text-caption-2-font-weight: 600;
--text-caption-2-line-height: 1rem;
--text-button-font-family: var(--font-family-primary);
--text-button-font-weight: 700;
--text-button-tiny-font-size: 0.625rem;
--text-button-tiny-line-height: 0.75rem;
--text-button-small-font-size: 0.75rem;
--text-button-small-line-height: 1rem;
--text-button-medium-font-size: 0.875rem;
--text-button-medium-line-height: 1rem;
--text-button-large-font-size: 1rem;
--text-button-large-line-height: 1.25rem;
--text-button-giant-font-size: 1.125rem;
--text-button-giant-line-height: 1.5rem;
--border-radius: 0.25rem;
--outline-width: 0.375rem;
--outline-color: var(--color-basic-700);
--scrollbar-color: var(--background-basic-color-4);
--scrollbar-background-color: var(--background-basic-color-2);
--scrollbar-width: 0.3125rem;
--shadow: 0 0.5rem 1rem 0 #1a1f33;
--divider-color: var(--border-basic-color-3);
--divider-style: solid;
--divider-width: 1px;
}
/* You can add global styles to this file, and also import other style files */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #02142c;
color: white;
font-family: "Nunito", sans-serif;
}
body h1, body h2 {
font-family: "Cormorant", serif;
font-weight: lighter;
}
body h1 {
font-size: 60px;
}
body h3 {
font-weight: lighter;
}
@media only screen and (max-width: 600px) {
h1 {
font-size: 50px;
}
}
/*# sourceMappingURL=styles.css.map*/