[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{-webkit-transition-duration:50ms;-moz-transition-duration:50ms;-o-transition-duration:50ms;transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{-webkit-transition-delay:50ms;-moz-transition-delay:50ms;-o-transition-delay:50ms;transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{-webkit-transition-duration:.1s;-moz-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{-webkit-transition-duration:.15s;-moz-transition-duration:.15s;-o-transition-duration:.15s;transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{-webkit-transition-delay:.15s;-moz-transition-delay:.15s;-o-transition-delay:.15s;transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{-webkit-transition-duration:.25s;-moz-transition-duration:.25s;-o-transition-duration:.25s;transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{-webkit-transition-duration:.35s;-moz-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{-webkit-transition-delay:.35s;-moz-transition-delay:.35s;-o-transition-delay:.35s;transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{-webkit-transition-duration:.4s;-moz-transition-duration:.4s;-o-transition-duration:.4s;transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-o-transition-delay:.4s;transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{-webkit-transition-duration:.45s;-moz-transition-duration:.45s;-o-transition-duration:.45s;transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{-webkit-transition-delay:.45s;-moz-transition-delay:.45s;-o-transition-delay:.45s;transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{-webkit-transition-duration:.55s;-moz-transition-duration:.55s;-o-transition-duration:.55s;transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{-webkit-transition-delay:.55s;-moz-transition-delay:.55s;-o-transition-delay:.55s;transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{-webkit-transition-duration:.6s;-moz-transition-duration:.6s;-o-transition-duration:.6s;transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{-webkit-transition-delay:.6s;-moz-transition-delay:.6s;-o-transition-delay:.6s;transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{-webkit-transition-duration:.65s;-moz-transition-duration:.65s;-o-transition-duration:.65s;transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{-webkit-transition-delay:.65s;-moz-transition-delay:.65s;-o-transition-delay:.65s;transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{-webkit-transition-duration:.7s;-moz-transition-duration:.7s;-o-transition-duration:.7s;transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{-webkit-transition-delay:.7s;-moz-transition-delay:.7s;-o-transition-delay:.7s;transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{-webkit-transition-duration:.75s;-moz-transition-duration:.75s;-o-transition-duration:.75s;transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{-webkit-transition-delay:.8s;-moz-transition-delay:.8s;-o-transition-delay:.8s;transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{-webkit-transition-duration:.85s;-moz-transition-duration:.85s;-o-transition-duration:.85s;transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{-webkit-transition-delay:.85s;-moz-transition-delay:.85s;-o-transition-delay:.85s;transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{-webkit-transition-duration:.9s;-moz-transition-duration:.9s;-o-transition-duration:.9s;transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{-webkit-transition-delay:.9s;-moz-transition-delay:.9s;-o-transition-delay:.9s;transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{-webkit-transition-duration:.95s;-moz-transition-duration:.95s;-o-transition-duration:.95s;transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{-webkit-transition-delay:.95s;-moz-transition-delay:.95s;-o-transition-delay:.95s;transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{-webkit-transition-duration:1.05s;-moz-transition-duration:1.05s;-o-transition-duration:1.05s;transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{-webkit-transition-delay:1.05s;-moz-transition-delay:1.05s;-o-transition-delay:1.05s;transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{-webkit-transition-duration:1.1s;-moz-transition-duration:1.1s;-o-transition-duration:1.1s;transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{-webkit-transition-delay:1.1s;-moz-transition-delay:1.1s;-o-transition-delay:1.1s;transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{-webkit-transition-duration:1.15s;-moz-transition-duration:1.15s;-o-transition-duration:1.15s;transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{-webkit-transition-delay:1.15s;-moz-transition-delay:1.15s;-o-transition-delay:1.15s;transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{-webkit-transition-duration:1.2s;-moz-transition-duration:1.2s;-o-transition-duration:1.2s;transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{-webkit-transition-delay:1.2s;-moz-transition-delay:1.2s;-o-transition-delay:1.2s;transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{-webkit-transition-duration:1.25s;-moz-transition-duration:1.25s;-o-transition-duration:1.25s;transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{-webkit-transition-delay:1.25s;-moz-transition-delay:1.25s;-o-transition-delay:1.25s;transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{-webkit-transition-duration:1.3s;-moz-transition-duration:1.3s;-o-transition-duration:1.3s;transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{-webkit-transition-delay:1.3s;-moz-transition-delay:1.3s;-o-transition-delay:1.3s;transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{-webkit-transition-duration:1.35s;-moz-transition-duration:1.35s;-o-transition-duration:1.35s;transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{-webkit-transition-delay:1.35s;-moz-transition-delay:1.35s;-o-transition-delay:1.35s;transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{-webkit-transition-duration:1.4s;-moz-transition-duration:1.4s;-o-transition-duration:1.4s;transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{-webkit-transition-delay:1.4s;-moz-transition-delay:1.4s;-o-transition-delay:1.4s;transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{-webkit-transition-duration:1.45s;-moz-transition-duration:1.45s;-o-transition-duration:1.45s;transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{-webkit-transition-delay:1.45s;-moz-transition-delay:1.45s;-o-transition-delay:1.45s;transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;-o-transition-duration:1.5s;transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{-webkit-transition-delay:1.5s;-moz-transition-delay:1.5s;-o-transition-delay:1.5s;transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{-webkit-transition-duration:1.55s;-moz-transition-duration:1.55s;-o-transition-duration:1.55s;transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{-webkit-transition-delay:1.55s;-moz-transition-delay:1.55s;-o-transition-delay:1.55s;transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{-webkit-transition-duration:1.6s;-moz-transition-duration:1.6s;-o-transition-duration:1.6s;transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{-webkit-transition-delay:1.6s;-moz-transition-delay:1.6s;-o-transition-delay:1.6s;transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{-webkit-transition-duration:1.65s;-moz-transition-duration:1.65s;-o-transition-duration:1.65s;transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{-webkit-transition-delay:1.65s;-moz-transition-delay:1.65s;-o-transition-delay:1.65s;transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{-webkit-transition-duration:1.7s;-moz-transition-duration:1.7s;-o-transition-duration:1.7s;transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{-webkit-transition-delay:1.7s;-moz-transition-delay:1.7s;-o-transition-delay:1.7s;transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{-webkit-transition-duration:1.75s;-moz-transition-duration:1.75s;-o-transition-duration:1.75s;transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{-webkit-transition-delay:1.75s;-moz-transition-delay:1.75s;-o-transition-delay:1.75s;transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{-webkit-transition-duration:1.8s;-moz-transition-duration:1.8s;-o-transition-duration:1.8s;transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{-webkit-transition-delay:1.8s;-moz-transition-delay:1.8s;-o-transition-delay:1.8s;transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{-webkit-transition-duration:1.85s;-moz-transition-duration:1.85s;-o-transition-duration:1.85s;transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{-webkit-transition-delay:1.85s;-moz-transition-delay:1.85s;-o-transition-delay:1.85s;transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{-webkit-transition-duration:1.9s;-moz-transition-duration:1.9s;-o-transition-duration:1.9s;transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{-webkit-transition-delay:1.9s;-moz-transition-delay:1.9s;-o-transition-delay:1.9s;transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{-webkit-transition-duration:1.95s;-moz-transition-duration:1.95s;-o-transition-duration:1.95s;transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{-webkit-transition-delay:1.95s;-moz-transition-delay:1.95s;-o-transition-delay:1.95s;transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{-webkit-transition-duration:2s;-moz-transition-duration:2s;-o-transition-duration:2s;transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{-webkit-transition-delay:2s;-moz-transition-delay:2s;-o-transition-delay:2s;transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{-webkit-transition-duration:2.05s;-moz-transition-duration:2.05s;-o-transition-duration:2.05s;transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{-webkit-transition-delay:2.05s;-moz-transition-delay:2.05s;-o-transition-delay:2.05s;transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{-webkit-transition-duration:2.1s;-moz-transition-duration:2.1s;-o-transition-duration:2.1s;transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{-webkit-transition-delay:2.1s;-moz-transition-delay:2.1s;-o-transition-delay:2.1s;transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{-webkit-transition-duration:2.15s;-moz-transition-duration:2.15s;-o-transition-duration:2.15s;transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{-webkit-transition-delay:2.15s;-moz-transition-delay:2.15s;-o-transition-delay:2.15s;transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{-webkit-transition-duration:2.2s;-moz-transition-duration:2.2s;-o-transition-duration:2.2s;transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{-webkit-transition-delay:2.2s;-moz-transition-delay:2.2s;-o-transition-delay:2.2s;transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{-webkit-transition-duration:2.25s;-moz-transition-duration:2.25s;-o-transition-duration:2.25s;transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{-webkit-transition-delay:2.25s;-moz-transition-delay:2.25s;-o-transition-delay:2.25s;transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{-webkit-transition-duration:2.3s;-moz-transition-duration:2.3s;-o-transition-duration:2.3s;transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{-webkit-transition-delay:2.3s;-moz-transition-delay:2.3s;-o-transition-delay:2.3s;transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{-webkit-transition-duration:2.35s;-moz-transition-duration:2.35s;-o-transition-duration:2.35s;transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{-webkit-transition-delay:2.35s;-moz-transition-delay:2.35s;-o-transition-delay:2.35s;transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{-webkit-transition-duration:2.4s;-moz-transition-duration:2.4s;-o-transition-duration:2.4s;transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{-webkit-transition-delay:2.4s;-moz-transition-delay:2.4s;-o-transition-delay:2.4s;transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{-webkit-transition-duration:2.45s;-moz-transition-duration:2.45s;-o-transition-duration:2.45s;transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{-webkit-transition-delay:2.45s;-moz-transition-delay:2.45s;-o-transition-delay:2.45s;transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{-webkit-transition-duration:2.5s;-moz-transition-duration:2.5s;-o-transition-duration:2.5s;transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{-webkit-transition-delay:2.5s;-moz-transition-delay:2.5s;-o-transition-delay:2.5s;transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{-webkit-transition-duration:2.55s;-moz-transition-duration:2.55s;-o-transition-duration:2.55s;transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{-webkit-transition-delay:2.55s;-moz-transition-delay:2.55s;-o-transition-delay:2.55s;transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{-webkit-transition-duration:2.6s;-moz-transition-duration:2.6s;-o-transition-duration:2.6s;transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{-webkit-transition-delay:2.6s;-moz-transition-delay:2.6s;-o-transition-delay:2.6s;transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{-webkit-transition-duration:2.65s;-moz-transition-duration:2.65s;-o-transition-duration:2.65s;transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{-webkit-transition-delay:2.65s;-moz-transition-delay:2.65s;-o-transition-delay:2.65s;transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{-webkit-transition-duration:2.7s;-moz-transition-duration:2.7s;-o-transition-duration:2.7s;transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{-webkit-transition-delay:2.7s;-moz-transition-delay:2.7s;-o-transition-delay:2.7s;transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{-webkit-transition-duration:2.75s;-moz-transition-duration:2.75s;-o-transition-duration:2.75s;transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{-webkit-transition-delay:2.75s;-moz-transition-delay:2.75s;-o-transition-delay:2.75s;transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{-webkit-transition-duration:2.8s;-moz-transition-duration:2.8s;-o-transition-duration:2.8s;transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{-webkit-transition-delay:2.8s;-moz-transition-delay:2.8s;-o-transition-delay:2.8s;transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{-webkit-transition-duration:2.85s;-moz-transition-duration:2.85s;-o-transition-duration:2.85s;transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{-webkit-transition-delay:2.85s;-moz-transition-delay:2.85s;-o-transition-delay:2.85s;transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{-webkit-transition-duration:2.9s;-moz-transition-duration:2.9s;-o-transition-duration:2.9s;transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{-webkit-transition-delay:2.9s;-moz-transition-delay:2.9s;-o-transition-delay:2.9s;transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{-webkit-transition-duration:2.95s;-moz-transition-duration:2.95s;-o-transition-duration:2.95s;transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{-webkit-transition-delay:2.95s;-moz-transition-delay:2.95s;-o-transition-delay:2.95s;transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{-webkit-transition-duration:3s;-moz-transition-duration:3s;-o-transition-duration:3s;transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{-webkit-transition-delay:3s;-moz-transition-delay:3s;-o-transition-delay:3s;transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.25,.25,.75,.75);-moz-transition-timing-function:cubic-bezier(.25,.25,.75,.75);-o-transition-timing-function:cubic-bezier(.25,.25,.75,.75);transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;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]{-webkit-transition-timing-function:cubic-bezier(.6,-.28,.735,.045);-moz-transition-timing-function:cubic-bezier(.6,-.28,.735,.045);-o-transition-timing-function:cubic-bezier(.6,-.28,.735,.045);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]{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);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]{-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);-moz-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);-o-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);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]{-webkit-transition-timing-function:cubic-bezier(.47,0,.745,.715);-moz-transition-timing-function:cubic-bezier(.47,0,.745,.715);-o-transition-timing-function:cubic-bezier(.47,0,.745,.715);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]{-webkit-transition-timing-function:cubic-bezier(.39,.575,.565,1);-moz-transition-timing-function:cubic-bezier(.39,.575,.565,1);-o-transition-timing-function:cubic-bezier(.39,.575,.565,1);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]{-webkit-transition-timing-function:cubic-bezier(.445,.05,.55,.95);-moz-transition-timing-function:cubic-bezier(.445,.05,.55,.95);-o-transition-timing-function:cubic-bezier(.445,.05,.55,.95);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]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);-moz-transition-timing-function:cubic-bezier(.55,.085,.68,.53);-o-transition-timing-function:cubic-bezier(.55,.085,.68,.53);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]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);-moz-transition-timing-function:cubic-bezier(.25,.46,.45,.94);-o-transition-timing-function:cubic-bezier(.25,.46,.45,.94);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]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);-moz-transition-timing-function:cubic-bezier(.455,.03,.515,.955);-o-transition-timing-function:cubic-bezier(.455,.03,.515,.955);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]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);-moz-transition-timing-function:cubic-bezier(.55,.085,.68,.53);-o-transition-timing-function:cubic-bezier(.55,.085,.68,.53);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]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);-moz-transition-timing-function:cubic-bezier(.25,.46,.45,.94);-o-transition-timing-function:cubic-bezier(.25,.46,.45,.94);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]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);-moz-transition-timing-function:cubic-bezier(.455,.03,.515,.955);-o-transition-timing-function:cubic-bezier(.455,.03,.515,.955);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]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);-moz-transition-timing-function:cubic-bezier(.55,.085,.68,.53);-o-transition-timing-function:cubic-bezier(.55,.085,.68,.53);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]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);-moz-transition-timing-function:cubic-bezier(.25,.46,.45,.94);-o-transition-timing-function:cubic-bezier(.25,.46,.45,.94);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]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);-moz-transition-timing-function:cubic-bezier(.455,.03,.515,.955);-o-transition-timing-function:cubic-bezier(.455,.03,.515,.955);transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;-o-transition-property:opacity,-o-transform;-moz-transition-property:opacity,transform,-moz-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform,-moz-transform,-o-transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}[data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);-moz-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}[data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);-moz-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}[data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);-moz-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}[data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);-moz-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);-moz-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);-moz-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);-moz-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);-moz-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;-o-transition-property:opacity,-o-transform;-moz-transition-property:opacity,transform,-moz-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform,-moz-transform,-o-transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);-moz-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}[data-aos=zoom-in]{-webkit-transform:scale(.6);-moz-transform:scale(.6);-o-transform:scale(.6);transform:scale(.6)}[data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);-moz-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);-moz-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);-moz-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);-moz-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}[data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);-moz-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);-moz-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);-moz-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);-moz-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:-o-transform;-moz-transition-property:transform, -moz-transform;transition-property:transform;transition-property:transform, -webkit-transform, -moz-transform, -o-transform}[data-aos^=slide][data-aos^=slide].aos-animate{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}[data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}[data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);-moz-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}[data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}[data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:-o-transform;-moz-transition-property:transform, -moz-transform;transition-property:transform;transition-property:transform, -webkit-transform, -moz-transform, -o-transform}[data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);-moz-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);-moz-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);-moz-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);-moz-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);-moz-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);-moz-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);-moz-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);-moz-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)} .arco-popup .arco-slide-from-left-enter, .arco-popup .arco-slide-from-left-exit-active, .arco-popup .arco-slide-from-left-exit-done { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } .arco-popup .arco-slide-from-left-enter.translateZ, .arco-popup .arco-slide-from-left-exit-active.translateZ, .arco-popup .arco-slide-from-left-exit-done.translateZ { -webkit-transform: translate(-100%, 0) translateZ(2PX); -moz-transform: translate(-100%, 0) translateZ(2PX); transform: translate(-100%, 0) translateZ(2PX); } .arco-popup .arco-slide-from-right-enter, .arco-popup .arco-slide-from-right-exit-active, .arco-popup .arco-slide-from-right-exit-done { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } .arco-popup .arco-slide-from-right-enter.translateZ, .arco-popup .arco-slide-from-right-exit-active.translateZ, .arco-popup .arco-slide-from-right-exit-done.translateZ { -webkit-transform: translate(100%, 0) translateZ(2PX); -moz-transform: translate(100%, 0) translateZ(2PX); transform: translate(100%, 0) translateZ(2PX); } .arco-popup .arco-slide-from-top-enter, .arco-popup .arco-slide-from-top-exit-active, .arco-popup .arco-slide-from-top-exit-done { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } .arco-popup .arco-slide-from-top-enter.translateZ, .arco-popup .arco-slide-from-top-exit-active.translateZ, .arco-popup .arco-slide-from-top-exit-done.translateZ { -webkit-transform: translate(0, -100%) translateZ(2PX); -moz-transform: translate(0, -100%) translateZ(2PX); transform: translate(0, -100%) translateZ(2PX); } .arco-popup .arco-slide-from-bottom-enter, .arco-popup .arco-slide-from-bottom-exit-active, .arco-popup .arco-slide-from-bottom-exit-done { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); } .arco-popup .arco-slide-from-bottom-enter.translateZ, .arco-popup .arco-slide-from-bottom-exit-active.translateZ, .arco-popup .arco-slide-from-bottom-exit-done.translateZ { -webkit-transform: translate(0, 100%) translateZ(2PX); -moz-transform: translate(0, 100%) translateZ(2PX); transform: translate(0, 100%) translateZ(2PX); } .arco-popup-content[class*="-enter-active"], .arco-popup-mask[class*="-enter-active"] { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ; -o-transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ; -moz-transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ; transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ; } .arco-popup-content[class*="-enter-active"].translateZ, .arco-popup-mask[class*="-enter-active"].translateZ { -webkit-transform: translateZ(2PX); -moz-transform: translateZ(2PX); transform: translateZ(2PX); } .arco-popup [class*="-exit-active"] { -webkit-transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ; -o-transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ; -moz-transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ; transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ; } .arco-popup-content { background: #ffffff ; position: fixed; z-index: 1001; } .arco-popup-content.need-bottom-offset { padding-bottom: env(safe-area-inset-bottom); } .arco-popup-content.left { left: 0; top: 0; height: 100%; } .arco-popup-content.top { left: 0; top: 0; width: 100%; } .arco-popup-content.right { right: 0; top: 0; height: 100%; } .arco-popup-content.bottom { left: 0; bottom: 0; width: 100%; } .arco-popup-content.translateZ { -webkit-transform: translateZ(2PX); -moz-transform: translateZ(2PX); transform: translateZ(2PX); } .arco-popup-mask { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; background: rgba(0, 0, 0, 0.6) ; } .arco-popup-mask.translateZ { -webkit-transform: translateZ(1PX); -moz-transform: translateZ(1PX); transform: translateZ(1PX); } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ body { --red-1: 255,236,232; --red-2: 253,205,197; --red-3: 251,172,163; --red-4: 249,137,129; --red-5: 247,101,96; --red-6: 245,63,63; --red-7: 203,39,45; --red-8: 161,21,30; --red-9: 119,8,19; --red-10: 77,0,10; --orangered-1: 255,243,232; --orangered-2: 253,221,195; --orangered-3: 252,197,159; --orangered-4: 250,172,123; --orangered-5: 249,144,87; --orangered-6: 247,114,52; --orangered-7: 204,81,32; --orangered-8: 162,53,17; --orangered-9: 119,31,6; --orangered-10: 77,14,0; --orange-1: 255,247,232; --orange-2: 255,228,186; --orange-3: 255,207,139; --orange-4: 255,182,93; --orange-5: 255,154,46; --orange-6: 255,125,0; --orange-7: 210,95,0; --orange-8: 166,69,0; --orange-9: 121,46,0; --orange-10: 77,27,0; --gold-1: 255,252,232; --gold-2: 253,244,191; --gold-3: 252,233,150; --gold-4: 250,220,109; --gold-5: 249,204,69; --gold-6: 247,186,30; --gold-7: 204,146,19; --gold-8: 162,109,10; --gold-9: 119,75,4; --gold-10: 77,45,0; --yellow-1: 254,255,232; --yellow-2: 254,254,190; --yellow-3: 253,250,148; --yellow-4: 252,242,107; --yellow-5: 251,232,66; --yellow-6: 250,220,25; --yellow-7: 207,175,15; --yellow-8: 163,132,8; --yellow-9: 120,93,3; --yellow-10: 77,56,0; --lime-1: 252,255,232; --lime-2: 237,248,187; --lime-3: 220,241,144; --lime-4: 201,233,104; --lime-5: 181,226,65; --lime-6: 159,219,29; --lime-7: 126,183,18; --lime-8: 95,148,10; --lime-9: 67,112,4; --lime-10: 42,77,0; --green-1: 232,255,234; --green-2: 175,240,181; --green-3: 123,225,136; --green-4: 76,210,99; --green-5: 35,195,67; --green-6: 0,180,42; --green-7: 0,154,41; --green-8: 0,128,38; --green-9: 0,102,34; --green-10: 0,77,28; --cyan-1: 232,255,251; --cyan-2: 183,244,236; --cyan-3: 137,233,224; --cyan-4: 94,223,214; --cyan-5: 55,212,207; --cyan-6: 20,201,201; --cyan-7: 13,165,170; --cyan-8: 7,130,139; --cyan-9: 3,97,108; --cyan-10: 0,66,77; --blue-1: 232,247,255; --blue-2: 195,231,254; --blue-3: 159,212,253; --blue-4: 123,192,252; --blue-5: 87,169,251; --blue-6: 52,145,250; --blue-7: 32,108,207; --blue-8: 17,75,163; --blue-9: 6,48,120; --blue-10: 0,26,77; --arcoblue-1: 232,243,255; --arcoblue-2: 190,218,255; --arcoblue-3: 148,191,255; --arcoblue-4: 106,161,255; --arcoblue-5: 64,128,255; --arcoblue-6: 22,93,255; --arcoblue-7: 14,66,210; --arcoblue-8: 7,44,166; --arcoblue-9: 3,26,121; --arcoblue-10: 0,13,77; --purple-1: 245,232,255; --purple-2: 221,190,246; --purple-3: 195,150,237; --purple-4: 168,113,227; --purple-5: 141,78,218; --purple-6: 114,46,209; --purple-7: 85,29,176; --purple-8: 60,16,143; --purple-9: 39,6,110; --purple-10: 22,0,77; --pinkpurple-1: 255,232,251; --pinkpurple-2: 247,186,239; --pinkpurple-3: 240,142,230; --pinkpurple-4: 232,101,223; --pinkpurple-5: 225,62,219; --pinkpurple-6: 217,26,217; --pinkpurple-7: 176,16,182; --pinkpurple-8: 138,9,147; --pinkpurple-9: 101,3,112; --pinkpurple-10: 66,0,77; --magenta-1: 255,232,241; --magenta-2: 253,194,219; --magenta-3: 251,157,199; --magenta-4: 249,121,183; --magenta-5: 247,84,168; --magenta-6: 245,49,157; --magenta-7: 203,30,131; --magenta-8: 161,16,105; --magenta-9: 119,6,79; --magenta-10: 77,0,52; --gray-1: 247,248,250; --gray-2: 242,243,245; --gray-3: 229,230,235; --gray-4: 201,205,212; --gray-5: 169,174,184; --gray-6: 134,144,156; --gray-7: 107,119,133; --gray-8: 78,89,105; --gray-9: 39,46,59; --gray-10: 29,33,41; --success-1: var(--green-1); --success-2: var(--green-2); --success-3: var(--green-3); --success-4: var(--green-4); --success-5: var(--green-5); --success-6: var(--green-6); --success-7: var(--green-7); --success-8: var(--green-8); --success-9: var(--green-9); --success-10: var(--green-10); --primary-1: var(--arcoblue-1); --primary-2: var(--arcoblue-2); --primary-3: var(--arcoblue-3); --primary-4: var(--arcoblue-4); --primary-5: var(--arcoblue-5); --primary-6: var(--arcoblue-6); --primary-7: var(--arcoblue-7); --primary-8: var(--arcoblue-8); --primary-9: var(--arcoblue-9); --primary-10: var(--arcoblue-10); --danger-1: var(--red-1); --danger-2: var(--red-2); --danger-3: var(--red-3); --danger-4: var(--red-4); --danger-5: var(--red-5); --danger-6: var(--red-6); --danger-7: var(--red-7); --danger-8: var(--red-8); --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: var(--orange-1); --warning-2: var(--orange-2); --warning-3: var(--orange-3); --warning-4: var(--orange-4); --warning-5: var(--orange-5); --warning-6: var(--orange-6); --warning-7: var(--orange-7); --warning-8: var(--orange-8); --warning-9: var(--orange-9); --warning-10: var(--orange-10); --link-1: var(--arcoblue-1); --link-2: var(--arcoblue-2); --link-3: var(--arcoblue-3); --link-4: var(--arcoblue-4); --link-5: var(--arcoblue-5); --link-6: var(--arcoblue-6); --link-7: var(--arcoblue-7); --link-8: var(--arcoblue-8); --link-9: var(--arcoblue-9); --link-10: var(--arcoblue-10); } body[arco-theme='dark'] { --red-1: 77,0,10; --red-2: 119,6,17; --red-3: 161,22,31; --red-4: 203,46,52; --red-5: 245,78,78; --red-6: 247,105,101; --red-7: 249,141,134; --red-8: 251,176,167; --red-9: 253,209,202; --red-10: 255,240,236; --orangered-1: 77,14,0; --orangered-2: 119,30,5; --orangered-3: 162,55,20; --orangered-4: 204,87,41; --orangered-5: 247,126,69; --orangered-6: 249,146,90; --orangered-7: 250,173,125; --orangered-8: 252,198,161; --orangered-9: 253,222,197; --orangered-10: 255,244,235; --orange-1: 77,27,0; --orange-2: 121,48,4; --orange-3: 166,75,10; --orange-4: 210,105,19; --orange-5: 255,141,31; --orange-6: 255,150,38; --orange-7: 255,179,87; --orange-8: 255,205,135; --orange-9: 255,227,184; --orange-10: 255,247,232; --gold-1: 77,45,0; --gold-2: 119,75,4; --gold-3: 162,111,15; --gold-4: 204,150,31; --gold-5: 247,192,52; --gold-6: 249,204,68; --gold-7: 250,220,108; --gold-8: 252,233,149; --gold-9: 253,244,190; --gold-10: 255,252,232; --yellow-1: 77,56,0; --yellow-2: 120,94,7; --yellow-3: 163,134,20; --yellow-4: 207,179,37; --yellow-5: 250,225,60; --yellow-6: 251,233,75; --yellow-7: 252,243,116; --yellow-8: 253,250,157; --yellow-9: 254,254,198; --yellow-10: 254,255,240; --lime-1: 42,77,0; --lime-2: 68,112,6; --lime-3: 98,148,18; --lime-4: 132,183,35; --lime-5: 168,219,57; --lime-6: 184,226,75; --lime-7: 203,233,112; --lime-8: 222,241,152; --lime-9: 238,248,194; --lime-10: 253,255,238; --green-1: 0,77,28; --green-2: 4,102,37; --green-3: 10,128,45; --green-4: 18,154,55; --green-5: 29,180,64; --green-6: 39,195,70; --green-7: 80,210,102; --green-8: 126,225,139; --green-9: 178,240,183; --green-10: 235,255,236; --cyan-1: 0,66,77; --cyan-2: 6,97,108; --cyan-3: 17,131,139; --cyan-4: 31,166,170; --cyan-5: 48,201,201; --cyan-6: 63,212,207; --cyan-7: 102,223,215; --cyan-8: 144,233,225; --cyan-9: 190,244,237; --cyan-10: 240,255,252; --blue-1: 0,26,77; --blue-2: 5,47,120; --blue-3: 19,76,163; --blue-4: 41,113,207; --blue-5: 70,154,250; --blue-6: 90,170,251; --blue-7: 125,193,252; --blue-8: 161,213,253; --blue-9: 198,232,254; --blue-10: 234,248,255; --arcoblue-1: 0,13,77; --arcoblue-2: 4,27,121; --arcoblue-3: 14,50,166; --arcoblue-4: 29,77,210; --arcoblue-5: 48,111,255; --arcoblue-6: 60,126,255; --arcoblue-7: 104,159,255; --arcoblue-8: 147,190,255; --arcoblue-9: 190,218,255; --arcoblue-10: 234,244,255; --purple-1: 22,0,77; --purple-2: 39,6,110; --purple-3: 62,19,143; --purple-4: 90,37,176; --purple-5: 123,61,209; --purple-6: 142,81,218; --purple-7: 169,116,227; --purple-8: 197,154,237; --purple-9: 223,194,246; --purple-10: 247,237,255; --pinkpurple-1: 66,0,77; --pinkpurple-2: 101,3,112; --pinkpurple-3: 138,13,147; --pinkpurple-4: 176,27,182; --pinkpurple-5: 217,46,217; --pinkpurple-6: 225,61,219; --pinkpurple-7: 232,102,223; --pinkpurple-8: 240,146,230; --pinkpurple-9: 247,193,240; --pinkpurple-10: 255,242,253; --magenta-1: 77,0,52; --magenta-2: 119,8,80; --magenta-3: 161,23,108; --magenta-4: 203,43,136; --magenta-5: 245,69,166; --magenta-6: 247,86,169; --magenta-7: 249,122,184; --magenta-8: 251,158,200; --magenta-9: 253,195,219; --magenta-10: 255,232,241; --gray-1: 23,23,26; --gray-2: 46,46,48; --gray-3: 72,72,73; --gray-4: 95,95,96; --gray-5: 120,120,122; --gray-6: 146,146,147; --gray-7: 171,171,172; --gray-8: 197,197,197; --gray-9: 223,223,223; --gray-10: 246,246,246; --primary-1: var(--arcoblue-1); --primary-2: var(--arcoblue-2); --primary-3: var(--arcoblue-3); --primary-4: var(--arcoblue-4); --primary-5: var(--arcoblue-5); --primary-6: var(--arcoblue-6); --primary-7: var(--arcoblue-7); --primary-8: var(--arcoblue-8); --primary-9: var(--arcoblue-9); --primary-10: var(--arcoblue-10); --success-1: var(--green-1); --success-2: var(--green-2); --success-3: var(--green-3); --success-4: var(--green-4); --success-5: var(--green-5); --success-6: var(--green-6); --success-7: var(--green-7); --success-8: var(--green-8); --success-9: var(--green-9); --success-10: var(--green-10); --danger-1: var(--red-1); --danger-2: var(--red-2); --danger-3: var(--red-3); --danger-4: var(--red-4); --danger-5: var(--red-5); --danger-6: var(--red-6); --danger-7: var(--red-7); --danger-8: var(--red-8); --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: var(--orange-1); --warning-2: var(--orange-2); --warning-3: var(--orange-3); --warning-4: var(--orange-4); --warning-5: var(--orange-5); --warning-6: var(--orange-6); --warning-7: var(--orange-7); --warning-8: var(--orange-8); --warning-9: var(--orange-9); --warning-10: var(--orange-10); --link-1: var(--arcoblue-1); --link-2: var(--arcoblue-2); --link-3: var(--arcoblue-3); --link-4: var(--arcoblue-4); --link-5: var(--arcoblue-5); --link-6: var(--arcoblue-6); --link-7: var(--arcoblue-7); --link-8: var(--arcoblue-8); --link-9: var(--arcoblue-9); --link-10: var(--arcoblue-10); } body { --color-white: #ffffff; --color-black: #000000; --color-border: rgb(var(--gray-3)); --color-bg-popup: var(--color-bg-5); --color-bg-1: #fff; --color-bg-2: #fff; --color-bg-3: #fff; --color-bg-4: #fff; --color-bg-5: #fff; --color-bg-white: #fff; --color-neutral-1: rgb(var(--gray-1)); --color-neutral-2: rgb(var(--gray-2)); --color-neutral-3: rgb(var(--gray-3)); --color-neutral-4: rgb(var(--gray-4)); --color-neutral-5: rgb(var(--gray-5)); --color-neutral-6: rgb(var(--gray-6)); --color-neutral-7: rgb(var(--gray-7)); --color-neutral-8: rgb(var(--gray-8)); --color-neutral-9: rgb(var(--gray-9)); --color-neutral-10: rgb(var(--gray-10)); --color-text-1: var(--color-neutral-10); --color-text-2: var(--color-neutral-8); --color-text-3: var(--color-neutral-6); --color-text-4: var(--color-neutral-4); --color-border-1: var(--color-neutral-2); --color-border-2: var(--color-neutral-3); --color-border-3: var(--color-neutral-4); --color-border-4: var(--color-neutral-6); --color-fill-1: var(--color-neutral-1); --color-fill-2: var(--color-neutral-2); --color-fill-3: var(--color-neutral-3); --color-fill-4: var(--color-neutral-4); --color-primary-light-1: rgb(var(--primary-1)); --color-primary-light-2: rgb(var(--primary-2)); --color-primary-light-3: rgb(var(--primary-3)); --color-primary-light-4: rgb(var(--primary-4)); --color-secondary: var(--color-neutral-2); --color-secondary-hover: var(--color-neutral-3); --color-secondary-active: var(--color-neutral-4); --color-secondary-disabled: var(--color-neutral-1); --color-danger-light-1: rgb(var(--danger-1)); --color-danger-light-2: rgb(var(--danger-2)); --color-danger-light-3: rgb(var(--danger-3)); --color-danger-light-4: rgb(var(--danger-4)); --color-success-light-1: rgb(var(--success-1)); --color-success-light-2: rgb(var(--success-2)); --color-success-light-3: rgb(var(--success-3)); --color-success-light-4: rgb(var(--success-4)); --color-warning-light-1: rgb(var(--warning-1)); --color-warning-light-2: rgb(var(--warning-2)); --color-warning-light-3: rgb(var(--warning-3)); --color-warning-light-4: rgb(var(--warning-4)); --color-link-light-1: rgb(var(--link-1)); --color-link-light-2: rgb(var(--link-2)); --color-link-light-3: rgb(var(--link-3)); --color-link-light-4: rgb(var(--link-4)); --border-radius-none: 0; --border-radius-small: 2px; --border-radius-medium: 4px; --border-radius-large: 8px; --border-radius-circle: 50%; --color-tooltip-bg: rgb(var(--gray-10)); --color-spin-layer-bg: rgba(255, 255, 255, 0.6); --color-menu-dark-bg: #232324; --color-menu-light-bg: #ffffff; --color-menu-dark-hover: rgba(255, 255, 255, 0.04); --color-mask-bg: rgba(29, 33, 41, 0.6); } body[arco-theme='dark'] { --color-white: rgba(255, 255, 255, 0.9); --color-black: #000000; --color-border: #333335; --color-bg-1: #17171a; --color-bg-2: #232324; --color-bg-3: #2a2a2b; --color-bg-4: #313132; --color-bg-5: #373739; --color-bg-white: #f6f6f6; --color-text-1: rgba(255, 255, 255, 0.9); --color-text-2: rgba(255, 255, 255, 0.7); --color-text-3: rgba(255, 255, 255, 0.5); --color-text-4: rgba(255, 255, 255, 0.3); --color-fill-1: rgba(255, 255, 255, 0.04); --color-fill-2: rgba(255, 255, 255, 0.08); --color-fill-3: rgba(255, 255, 255, 0.12); --color-fill-4: rgba(255, 255, 255, 0.16); --color-primary-light-1: rgba(var(--primary-6), 0.2); --color-primary-light-2: rgba(var(--primary-6), 0.35); --color-primary-light-3: rgba(var(--primary-6), 0.5); --color-primary-light-4: rgba(var(--primary-6), 0.65); --color-secondary: rgba(var(--gray-9), 0.08); --color-secondary-hover: rgba(var(--gray-8), 0.16); --color-secondary-active: rgba(var(--gray-7), 0.24); --color-secondary-disabled: rgba(var(--gray-9), 0.08); --color-danger-light-1: rgba(var(--danger-6), 0.2); --color-danger-light-2: rgba(var(--danger-6), 0.35); --color-danger-light-3: rgba(var(--danger-6), 0.5); --color-danger-light-4: rgba(var(--danger-6), 0.65); --color-success-light-1: rgba(var(--success-6), 0.2); --color-success-light-2: rgba(var(--success-6), 0.35); --color-success-light-3: rgba(var(--success-6), 0.5); --color-success-light-4: rgba(var(--success-6), 0.65); --color-warning-light-1: rgba(var(--warning-6), 0.2); --color-warning-light-2: rgba(var(--warning-6), 0.35); --color-warning-light-3: rgba(var(--warning-6), 0.5); --color-warning-light-4: rgba(var(--warning-6), 0.65); --color-link-light-1: rgba(var(--link-6), 0.2); --color-link-light-2: rgba(var(--link-6), 0.35); --color-link-light-3: rgba(var(--link-6), 0.5); --color-link-light-4: rgba(var(--link-6), 0.65); --color-tooltip-bg: #373739; --color-spin-layer-bg: rgba(51, 51, 51, 0.6); --color-menu-dark-bg: #232324; --color-menu-light-bg: #232324; --color-menu-dark-hover: var(--color-fill-2); --color-mask-bg: rgba(23, 23, 26, 0.6); } /* stylelint-disable */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html, body { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-font-smoothing: antialiased; /* chrome、safari */ -moz-osx-font-smoothing: grayscale; /* firefox */ font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; padding: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * 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; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } tr, th { margin: 0; padding: 0; } /** * 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 */ } /* Text-level semantics ========================================================================== */ /** * 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; -moz-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; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 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 */ 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 { -moz-box-sizing: border-box; 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'] { -moz-box-sizing: border-box; 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 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } * { outline: none; } /** * remove input clear icon in IE & Edge */ input::-ms-clear, input::-ms-reveal { display: none; } .arco-icon { display: inline-block; color: inherit; font-style: normal; width: 1em; height: 1em; vertical-align: -2px; stroke: currentColor; } .arco-icon[fill='currentColor'] { fill: currentColor; stroke: none; } .arco-icon[stroke='currentColor'] { stroke: currentColor; fill: none; } .arco-icon[fill='currentColor'][stroke='currentColor'] { fill: currentColor; stroke: currentColor; } .arco-icon-loading { -webkit-animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1); -moz-animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1); animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1); } @-webkit-keyframes arco-loading-circle { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes arco-loading-circle { 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes arco-loading-circle { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .arco-icon-hover { position: relative; display: inline-block; cursor: pointer; line-height: 0; } .arco-icon-hover .arco-icon { position: relative; vertical-align: -0.09em; } .arco-icon-hover::before { content: ''; position: absolute; display: block; border-radius: var(--border-radius-circle); background-color: transparent; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-icon-hover:hover::before { background-color: var(--color-fill-2); } .arco-icon-hover.arco-icon-hover-disabled::before { opacity: 0; } .arco-icon-hover::before { top: 50%; left: 50%; height: 20px; width: 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .arco-icon-hover-size-mini::before { top: 50%; left: 50%; height: 20px; width: 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .arco-icon-hover-size-small::before { top: 50%; left: 50%; height: 20px; width: 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .arco-icon-hover-size-large::before { top: 50%; left: 50%; height: 24px; width: 24px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .arco-icon-hover-size-huge::before { top: 50%; left: 50%; height: 24px; width: 24px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .fadeInStandard-enter, .fadeInStandard-appear { opacity: 0; } .fadeInStandard-enter-active, .fadeInStandard-appear-active { opacity: 1; -webkit-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .fadeInStandard-exit { opacity: 1; } .fadeInStandard-exit-active { opacity: 0; -webkit-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .fadeIn-enter, .fadeIn-appear { opacity: 0; } .fadeIn-enter-active, .fadeIn-appear-active { opacity: 1; -webkit-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); } .fadeIn-exit { opacity: 1; } .fadeIn-exit-active { opacity: 0; -webkit-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); } .slideDynamicOrigin-enter, .slideDynamicOrigin-appear { opacity: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.9) translateZ(0); -moz-transform: scaleY(0.9) translateZ(0); transform: scaleY(0.9) translateZ(0); } .slideDynamicOrigin-enter-active, .slideDynamicOrigin-appear-active { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); -webkit-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideDynamicOrigin-exit { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); -webkit-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideDynamicOrigin-exit-active { opacity: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.9) translateZ(0); -moz-transform: scaleY(0.9) translateZ(0); transform: scaleY(0.9) translateZ(0); -webkit-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideLeft-enter, .slideLeft-appear { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .slideLeft-enter-active, .slideLeft-appear-active { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideLeft-exit { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .slideLeft-exit-active { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideRight-enter, .slideRight-appear { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .slideRight-enter-active, .slideRight-appear-active { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideRight-exit { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .slideRight-exit-active { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideTop-enter, .slideTop-appear { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .slideTop-enter-active, .slideTop-appear-active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideTop-exit { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .slideTop-exit-active { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideBottom-enter, .slideBottom-appear { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .slideBottom-enter-active, .slideBottom-appear-active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slideBottom-exit { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .slideBottom-exit-active { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .zoomIn-enter, .zoomIn-appear { opacity: 0; -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } .zoomIn-enter-active, .zoomIn-appear-active { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .zoomIn-exit { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .zoomIn-exit-active { opacity: 0; -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -webkit-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInFadeOut-enter, .zoomInFadeOut-appear { opacity: 0; -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } .zoomInFadeOut-enter-active, .zoomInFadeOut-appear-active { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .zoomInFadeOut-exit { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .zoomInFadeOut-exit-active { opacity: 0; -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -webkit-transition: opacity 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: opacity 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.2s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInBig-enter, .zoomInBig-appear { opacity: 0; -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } .zoomInBig-enter-active, .zoomInBig-appear-active { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 1, 1); transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), -o-transform 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1), -moz-transform 0.2s cubic-bezier(0, 0, 1, 1); transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1); transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 1, 1), -moz-transform 0.2s cubic-bezier(0, 0, 1, 1), -o-transform 0.2s cubic-bezier(0, 0, 1, 1); } .zoomInBig-exit { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .zoomInBig-exit-active { opacity: 0; -webkit-transform: scale(0.2, 0.2); -moz-transform: scale(0.2, 0.2); -o-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 1, 1); transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), -o-transform 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1), -moz-transform 0.2s cubic-bezier(0, 0, 1, 1); transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1); transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 1, 1), -moz-transform 0.2s cubic-bezier(0, 0, 1, 1), -o-transform 0.2s cubic-bezier(0, 0, 1, 1); } .zoomInLeft-enter, .zoomInLeft-appear { opacity: 0.1; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); } .zoomInLeft-enter-active, .zoomInLeft-appear-active { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInLeft-exit { opacity: 1; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .zoomInLeft-exit-active { opacity: 0.1; -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInTop-enter, .zoomInTop-appear { opacity: 0; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8) translateZ(0); -moz-transform: scaleY(0.8) translateZ(0); transform: scaleY(0.8) translateZ(0); } .zoomInTop-enter-active, .zoomInTop-appear-active { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); -webkit-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInTop-exit { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); } .zoomInTop-exit-active { opacity: 0; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8) translateZ(0); -moz-transform: scaleY(0.8) translateZ(0); transform: scaleY(0.8) translateZ(0); -webkit-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInBottom-enter, .zoomInBottom-appear { opacity: 0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8) translateZ(0); -moz-transform: scaleY(0.8) translateZ(0); transform: scaleY(0.8) translateZ(0); } .zoomInBottom-enter-active, .zoomInBottom-appear-active { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); -webkit-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoomInBottom-exit { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); } .zoomInBottom-exit-active { opacity: 0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8) translateZ(0); -moz-transform: scaleY(0.8) translateZ(0); transform: scaleY(0.8) translateZ(0); -webkit-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -o-transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); -moz-transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -moz-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), -o-transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } body { font-size: 14px; } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ /***** Outline *****/ /***** Primary *****/ /***** Secondary *****/ /***** Dashed *****/ /***** Text *****/ /***** focus-visible *****/ .arco-btn { display: inline-block; position: relative; outline: none; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; white-space: nowrap; -webkit-transition: all 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: all 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: all 0.1s cubic-bezier(0, 0, 1, 1); transition: all 0.1s cubic-bezier(0, 0, 1, 1); -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.5715; } .arco-btn > a:only-child { color: currentColor; } .arco-btn:active { -webkit-transition: none; -o-transition: none; -moz-transition: none; transition: none; } .arco-btn:empty { display: inline-block; vertical-align: bottom; } .arco-btn-long { display: block; width: 100%; } .arco-btn-link { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-decoration: none; } .arco-btn-link:not([href]) { color: var(--color-text-4); } .arco-btn-link:hover { text-decoration: none; } .arco-btn-loading { cursor: default; position: relative; } .arco-btn-loading::before { content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: 1; display: block; background: #fff; border-radius: inherit; opacity: 0.4; -webkit-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); pointer-events: none; } .arco-btn-loading-fixed-width { -webkit-transition: none; -o-transition: none; -moz-transition: none; transition: none; } .arco-btn-two-chinese-chars > *:not(svg) { letter-spacing: 0.3em; margin-right: -0.3em; } a.arco-btn-icon-only { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; vertical-align: top; } .arco-btn-outline:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); } .arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: rgb(var(--primary-5)); color: rgb(var(--primary-5)); background-color: transparent; } .arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: rgb(var(--primary-7)); color: rgb(var(--primary-7)); background-color: transparent; } .arco-btn-outline:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-3)); } .arco-btn-outline.arco-btn-disabled { background-color: transparent; color: var(--color-primary-light-3); border: 1px solid var(--color-primary-light-3); cursor: not-allowed; } .arco-btn-outline.arco-btn-status-warning:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--warning-6)); border-color: rgb(var(--warning-6)); } .arco-btn-outline.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: rgb(var(--warning-5)); color: rgb(var(--warning-5)); background-color: transparent; } .arco-btn-outline.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: rgb(var(--warning-7)); color: rgb(var(--warning-7)); background-color: transparent; } .arco-btn-outline.arco-btn-status-warning:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--warning-3)); } .arco-btn-outline.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: transparent; border: 1px solid var(--color-warning-light-3); } .arco-btn-outline.arco-btn-status-danger:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--danger-6)); border-color: rgb(var(--danger-6)); } .arco-btn-outline.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: rgb(var(--danger-5)); color: rgb(var(--danger-5)); background-color: transparent; } .arco-btn-outline.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: rgb(var(--danger-7)); color: rgb(var(--danger-7)); background-color: transparent; } .arco-btn-outline.arco-btn-status-danger:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--danger-3)); } .arco-btn-outline.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: transparent; border: 1px solid var(--color-danger-light-3); } .arco-btn-outline.arco-btn-status-success:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--success-6)); border-color: rgb(var(--success-6)); } .arco-btn-outline.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: rgb(var(--success-5)); color: rgb(var(--success-5)); background-color: transparent; } .arco-btn-outline.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: rgb(var(--success-7)); color: rgb(var(--success-7)); background-color: transparent; } .arco-btn-outline.arco-btn-status-success:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--success-3)); } .arco-btn-outline.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: transparent; border: 1px solid var(--color-success-light-3); } .arco-btn-primary:not(.arco-btn-disabled) { background-color: rgb(var(--primary-6)); color: #fff; border: 1px solid transparent; } .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: #fff; background-color: rgb(var(--primary-5)); } .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: #fff; background-color: rgb(var(--primary-7)); } .arco-btn-primary:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-3)); } .arco-btn-primary.arco-btn-disabled { background-color: var(--color-primary-light-3); color: #fff; border: 1px solid transparent; cursor: not-allowed; } .arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled) { background-color: rgb(var(--warning-6)); color: #fff; border-color: transparent; } .arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: #fff; background-color: rgb(var(--warning-5)); } .arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: #fff; background-color: rgb(var(--warning-7)); } .arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--warning-3)); } .arco-btn-primary.arco-btn-status-warning.arco-btn-disabled { color: #fff; background-color: var(--color-warning-light-3); border: 1px solid transparent; } .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled) { background-color: rgb(var(--danger-6)); color: #fff; border-color: transparent; } .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: #fff; background-color: rgb(var(--danger-5)); } .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: #fff; background-color: rgb(var(--danger-7)); } .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--danger-3)); } .arco-btn-primary.arco-btn-status-danger.arco-btn-disabled { color: #fff; background-color: var(--color-danger-light-3); border: 1px solid transparent; } .arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled) { background-color: rgb(var(--success-6)); color: #fff; border-color: transparent; } .arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: #fff; background-color: rgb(var(--success-5)); } .arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: #fff; background-color: rgb(var(--success-7)); } .arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--success-3)); } .arco-btn-primary.arco-btn-status-success.arco-btn-disabled { color: #fff; background-color: var(--color-success-light-3); border: 1px solid transparent; } .arco-btn-secondary:not(.arco-btn-disabled) { background-color: var(--color-secondary); color: var(--color-text-2); border: 1px solid transparent; } .arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: var(--color-text-2); background-color: var(--color-secondary-hover); } .arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: var(--color-text-2); background-color: var(--color-secondary-active); } .arco-btn-secondary:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px var(--color-neutral-4); } .arco-btn-secondary.arco-btn-disabled { background-color: var(--color-secondary-disabled); color: var(--color-text-4); border: 1px solid transparent; cursor: not-allowed; } .arco-btn-secondary.arco-btn-status-warning:not(.arco-btn-disabled) { background-color: var(--color-warning-light-1); color: rgb(var(--warning-6)); border-color: transparent; } .arco-btn-secondary.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--warning-6)); background-color: var(--color-warning-light-2); } .arco-btn-secondary.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--warning-6)); background-color: var(--color-warning-light-3); } .arco-btn-secondary.arco-btn-status-warning:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--warning-3)); } .arco-btn-secondary.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: var(--color-warning-light-1); border: 1px solid transparent; } .arco-btn-secondary.arco-btn-status-danger:not(.arco-btn-disabled) { background-color: var(--color-danger-light-1); color: rgb(var(--danger-6)); border-color: transparent; } .arco-btn-secondary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--danger-6)); background-color: var(--color-danger-light-2); } .arco-btn-secondary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--danger-6)); background-color: var(--color-danger-light-3); } .arco-btn-secondary.arco-btn-status-danger:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--danger-3)); } .arco-btn-secondary.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: var(--color-danger-light-1); border: 1px solid transparent; } .arco-btn-secondary.arco-btn-status-success:not(.arco-btn-disabled) { background-color: var(--color-success-light-1); color: rgb(var(--success-6)); border-color: transparent; } .arco-btn-secondary.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--success-6)); background-color: var(--color-success-light-2); } .arco-btn-secondary.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--success-6)); background-color: var(--color-success-light-3); } .arco-btn-secondary.arco-btn-status-success:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--success-3)); } .arco-btn-secondary.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: var(--color-success-light-1); border: 1px solid transparent; } .arco-btn-dashed:not(.arco-btn-disabled) { background-color: var(--color-fill-2); color: var(--color-text-2); border: 1px dashed var(--color-neutral-3); } .arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: var(--color-neutral-4); color: var(--color-text-2); background-color: var(--color-fill-3); } .arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: var(--color-neutral-5); color: var(--color-text-2); background-color: var(--color-fill-4); } .arco-btn-dashed:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px var(--color-neutral-4); } .arco-btn-dashed.arco-btn-disabled { background-color: var(--color-fill-2); color: var(--color-text-4); border: 1px dashed var(--color-neutral-3); cursor: not-allowed; } .arco-btn-dashed.arco-btn-status-warning:not(.arco-btn-disabled) { background-color: var(--color-warning-light-1); color: rgb(var(--warning-6)); border-color: var(--color-warning-light-2); } .arco-btn-dashed.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: var(--color-warning-light-3); color: rgb(var(--warning-6)); background-color: var(--color-warning-light-2); } .arco-btn-dashed.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: var(--color-warning-light-4); color: rgb(var(--warning-6)); background-color: var(--color-warning-light-3); } .arco-btn-dashed.arco-btn-status-warning:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--warning-3)); } .arco-btn-dashed.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: var(--color-warning-light-1); border: 1px dashed var(--color-warning-light-2); } .arco-btn-dashed.arco-btn-status-danger:not(.arco-btn-disabled) { background-color: var(--color-danger-light-1); color: rgb(var(--danger-6)); border-color: var(--color-danger-light-2); } .arco-btn-dashed.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: var(--color-danger-light-3); color: rgb(var(--danger-6)); background-color: var(--color-danger-light-2); } .arco-btn-dashed.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: var(--color-danger-light-4); color: rgb(var(--danger-6)); background-color: var(--color-danger-light-3); } .arco-btn-dashed.arco-btn-status-danger:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--danger-3)); } .arco-btn-dashed.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: var(--color-danger-light-1); border: 1px dashed var(--color-danger-light-2); } .arco-btn-dashed.arco-btn-status-success:not(.arco-btn-disabled) { background-color: var(--color-success-light-1); color: rgb(var(--success-6)); border-color: var(--color-success-light-2); } .arco-btn-dashed.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: var(--color-success-light-3); color: rgb(var(--success-6)); background-color: var(--color-success-light-2); } .arco-btn-dashed.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: var(--color-success-light-4); color: rgb(var(--success-6)); background-color: var(--color-success-light-3); } .arco-btn-dashed.arco-btn-status-success:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--success-3)); } .arco-btn-dashed.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: var(--color-success-light-1); border: 1px dashed var(--color-success-light-2); } .arco-btn-text:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--primary-6)); border: 1px solid transparent; } .arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--primary-6)); background-color: var(--color-fill-2); } .arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--primary-6)); background-color: var(--color-fill-3); } .arco-btn-text:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px var(--color-neutral-4); } .arco-btn-text.arco-btn-disabled { background-color: transparent; color: var(--color-primary-light-3); border: 1px solid transparent; cursor: not-allowed; } .arco-btn-text.arco-btn-status-warning:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--warning-6)); border-color: transparent; } .arco-btn-text.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--warning-6)); background-color: var(--color-fill-2); } .arco-btn-text.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--warning-6)); background-color: var(--color-fill-3); } .arco-btn-text.arco-btn-status-warning:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--warning-3)); } .arco-btn-text.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: transparent; border: 1px solid transparent; } .arco-btn-text.arco-btn-status-danger:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--danger-6)); border-color: transparent; } .arco-btn-text.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--danger-6)); background-color: var(--color-fill-2); } .arco-btn-text.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--danger-6)); background-color: var(--color-fill-3); } .arco-btn-text.arco-btn-status-danger:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--danger-3)); } .arco-btn-text.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: transparent; border: 1px solid transparent; } .arco-btn-text.arco-btn-status-success:not(.arco-btn-disabled) { background-color: transparent; color: rgb(var(--success-6)); border-color: transparent; } .arco-btn-text.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):hover { border-color: transparent; color: rgb(var(--success-6)); background-color: var(--color-fill-2); } .arco-btn-text.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):active { border-color: transparent; color: rgb(var(--success-6)); background-color: var(--color-fill-3); } .arco-btn-text.arco-btn-status-success:not(.arco-btn-disabled):focus-visible { box-shadow: 0 0 0 2px rgb(var(--success-3)); } .arco-btn-text.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: transparent; border: 1px solid transparent; } .arco-btn-size-mini { padding: 0 11px; font-size: 12px; height: 24px; border-radius: var(--border-radius-small); } .arco-btn-size-mini > svg + span, .arco-btn-size-mini > span + svg { margin-left: 4px; } .arco-btn-size-mini svg { vertical-align: -2px; } .arco-btn-size-mini.arco-btn-rtl > svg + span, .arco-btn-size-mini.arco-btn-rtl > span + svg { margin-left: 0; margin-right: 4px; } .arco-btn-size-mini.arco-btn-loading-fixed-width.arco-btn-loading { padding-left: 3px; padding-right: 3px; } .arco-btn-size-mini.arco-btn-icon-only { width: 24px; height: 24px; padding: 0; } .arco-btn-size-mini.arco-btn-shape-circle { width: 24px; height: 24px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-mini.arco-btn-shape-round { border-radius: -webkit-calc(24px * 0.5); border-radius: -moz-calc(24px * 0.5); border-radius: calc(24px * 0.5); } .arco-btn-group .arco-btn-size-mini:first-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-size-mini:last-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-size-mini.arco-btn-shape-round:first-child { border-radius: -webkit-calc(24px * 0.5) 0 0 -webkit-calc(24px * 0.5); border-radius: -moz-calc(24px * 0.5) 0 0 -moz-calc(24px * 0.5); border-radius: calc(24px * 0.5) 0 0 calc(24px * 0.5); } .arco-btn-group .arco-btn-size-mini.arco-btn-shape-round:last-child { border-radius: 0 -webkit-calc(24px * 0.5) -webkit-calc(24px * 0.5) 0; border-radius: 0 -moz-calc(24px * 0.5) -moz-calc(24px * 0.5) 0; border-radius: 0 calc(24px * 0.5) calc(24px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-mini:first-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-mini:last-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-rtl.arco-btn-size-mini.arco-btn-shape-round:first-child { border-radius: 0 -webkit-calc(24px * 0.5) -webkit-calc(24px * 0.5) 0; border-radius: 0 -moz-calc(24px * 0.5) -moz-calc(24px * 0.5) 0; border-radius: 0 calc(24px * 0.5) calc(24px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-mini.arco-btn-shape-round:last-child { border-radius: -webkit-calc(24px * 0.5) 0 0 -webkit-calc(24px * 0.5); border-radius: -moz-calc(24px * 0.5) 0 0 -moz-calc(24px * 0.5); border-radius: calc(24px * 0.5) 0 0 calc(24px * 0.5); } .arco-btn-size-small { padding: 0 15px; font-size: 14px; height: 28px; border-radius: var(--border-radius-small); } .arco-btn-size-small > svg + span, .arco-btn-size-small > span + svg { margin-left: 6px; } .arco-btn-size-small svg { vertical-align: -2px; } .arco-btn-size-small.arco-btn-rtl > svg + span, .arco-btn-size-small.arco-btn-rtl > span + svg { margin-left: 0; margin-right: 6px; } .arco-btn-size-small.arco-btn-loading-fixed-width.arco-btn-loading { padding-left: 5px; padding-right: 5px; } .arco-btn-size-small.arco-btn-icon-only { width: 28px; height: 28px; padding: 0; } .arco-btn-size-small.arco-btn-shape-circle { width: 28px; height: 28px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-small.arco-btn-shape-round { border-radius: -webkit-calc(28px * 0.5); border-radius: -moz-calc(28px * 0.5); border-radius: calc(28px * 0.5); } .arco-btn-group .arco-btn-size-small:first-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-size-small:last-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-size-small.arco-btn-shape-round:first-child { border-radius: -webkit-calc(28px * 0.5) 0 0 -webkit-calc(28px * 0.5); border-radius: -moz-calc(28px * 0.5) 0 0 -moz-calc(28px * 0.5); border-radius: calc(28px * 0.5) 0 0 calc(28px * 0.5); } .arco-btn-group .arco-btn-size-small.arco-btn-shape-round:last-child { border-radius: 0 -webkit-calc(28px * 0.5) -webkit-calc(28px * 0.5) 0; border-radius: 0 -moz-calc(28px * 0.5) -moz-calc(28px * 0.5) 0; border-radius: 0 calc(28px * 0.5) calc(28px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-small:first-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-small:last-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-rtl.arco-btn-size-small.arco-btn-shape-round:first-child { border-radius: 0 -webkit-calc(28px * 0.5) -webkit-calc(28px * 0.5) 0; border-radius: 0 -moz-calc(28px * 0.5) -moz-calc(28px * 0.5) 0; border-radius: 0 calc(28px * 0.5) calc(28px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-small.arco-btn-shape-round:last-child { border-radius: -webkit-calc(28px * 0.5) 0 0 -webkit-calc(28px * 0.5); border-radius: -moz-calc(28px * 0.5) 0 0 -moz-calc(28px * 0.5); border-radius: calc(28px * 0.5) 0 0 calc(28px * 0.5); } .arco-btn-size-default { padding: 0 15px; font-size: 14px; height: 32px; border-radius: var(--border-radius-small); } .arco-btn-size-default > svg + span, .arco-btn-size-default > span + svg { margin-left: 8px; } .arco-btn-size-default svg { vertical-align: -2px; } .arco-btn-size-default.arco-btn-rtl > svg + span, .arco-btn-size-default.arco-btn-rtl > span + svg { margin-left: 0; margin-right: 8px; } .arco-btn-size-default.arco-btn-loading-fixed-width.arco-btn-loading { padding-left: 4px; padding-right: 4px; } .arco-btn-size-default.arco-btn-icon-only { width: 32px; height: 32px; padding: 0; } .arco-btn-size-default.arco-btn-shape-circle { width: 32px; height: 32px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-default.arco-btn-shape-round { border-radius: -webkit-calc(32px * 0.5); border-radius: -moz-calc(32px * 0.5); border-radius: calc(32px * 0.5); } .arco-btn-group .arco-btn-size-default:first-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-size-default:last-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-size-default.arco-btn-shape-round:first-child { border-radius: -webkit-calc(32px * 0.5) 0 0 -webkit-calc(32px * 0.5); border-radius: -moz-calc(32px * 0.5) 0 0 -moz-calc(32px * 0.5); border-radius: calc(32px * 0.5) 0 0 calc(32px * 0.5); } .arco-btn-group .arco-btn-size-default.arco-btn-shape-round:last-child { border-radius: 0 -webkit-calc(32px * 0.5) -webkit-calc(32px * 0.5) 0; border-radius: 0 -moz-calc(32px * 0.5) -moz-calc(32px * 0.5) 0; border-radius: 0 calc(32px * 0.5) calc(32px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-default:first-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-default:last-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-rtl.arco-btn-size-default.arco-btn-shape-round:first-child { border-radius: 0 -webkit-calc(32px * 0.5) -webkit-calc(32px * 0.5) 0; border-radius: 0 -moz-calc(32px * 0.5) -moz-calc(32px * 0.5) 0; border-radius: 0 calc(32px * 0.5) calc(32px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-default.arco-btn-shape-round:last-child { border-radius: -webkit-calc(32px * 0.5) 0 0 -webkit-calc(32px * 0.5); border-radius: -moz-calc(32px * 0.5) 0 0 -moz-calc(32px * 0.5); border-radius: calc(32px * 0.5) 0 0 calc(32px * 0.5); } .arco-btn-size-large { padding: 0 19px; font-size: 14px; height: 36px; border-radius: var(--border-radius-small); } .arco-btn-size-large > svg + span, .arco-btn-size-large > span + svg { margin-left: 8px; } .arco-btn-size-large svg { vertical-align: -2px; } .arco-btn-size-large.arco-btn-rtl > svg + span, .arco-btn-size-large.arco-btn-rtl > span + svg { margin-left: 0; margin-right: 8px; } .arco-btn-size-large.arco-btn-loading-fixed-width.arco-btn-loading { padding-left: 8px; padding-right: 8px; } .arco-btn-size-large.arco-btn-icon-only { width: 36px; height: 36px; padding: 0; } .arco-btn-size-large.arco-btn-shape-circle { width: 36px; height: 36px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-large.arco-btn-shape-round { border-radius: -webkit-calc(36px * 0.5); border-radius: -moz-calc(36px * 0.5); border-radius: calc(36px * 0.5); } .arco-btn-group .arco-btn-size-large:first-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-size-large:last-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-size-large.arco-btn-shape-round:first-child { border-radius: -webkit-calc(36px * 0.5) 0 0 -webkit-calc(36px * 0.5); border-radius: -moz-calc(36px * 0.5) 0 0 -moz-calc(36px * 0.5); border-radius: calc(36px * 0.5) 0 0 calc(36px * 0.5); } .arco-btn-group .arco-btn-size-large.arco-btn-shape-round:last-child { border-radius: 0 -webkit-calc(36px * 0.5) -webkit-calc(36px * 0.5) 0; border-radius: 0 -moz-calc(36px * 0.5) -moz-calc(36px * 0.5) 0; border-radius: 0 calc(36px * 0.5) calc(36px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-large:first-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-large:last-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-btn-group .arco-btn-rtl.arco-btn-size-large.arco-btn-shape-round:first-child { border-radius: 0 -webkit-calc(36px * 0.5) -webkit-calc(36px * 0.5) 0; border-radius: 0 -moz-calc(36px * 0.5) -moz-calc(36px * 0.5) 0; border-radius: 0 calc(36px * 0.5) calc(36px * 0.5) 0; } .arco-btn-group .arco-btn-rtl.arco-btn-size-large.arco-btn-shape-round:last-child { border-radius: -webkit-calc(36px * 0.5) 0 0 -webkit-calc(36px * 0.5); border-radius: -moz-calc(36px * 0.5) 0 0 -moz-calc(36px * 0.5); border-radius: calc(36px * 0.5) 0 0 calc(36px * 0.5); } .arco-btn-group { display: inline-block; } .arco-btn-group .arco-btn-outline:not(:first-child), .arco-btn-group .arco-btn-dashed:not(:first-child) { margin-left: -1px; } .arco-btn-group .arco-btn-primary:not(:last-child) { border-right: 1px solid rgb(var(--primary-5)); } .arco-btn-group .arco-btn-secondary:not(:last-child) { border-right: 1px solid var(--color-secondary-hover); } .arco-btn-group .arco-btn-text:not(:last-child) { border-right: 1px solid transparent; } .arco-btn-group .arco-btn-status-warning:not(:last-child) { border-right: 1px solid rgb(var(--warning-5)); } .arco-btn-group .arco-btn-status-warning:not(:last-child).arco-btn-text { border-right: 1px solid var(--color-fill-2); } .arco-btn-group .arco-btn-status-danger:not(:last-child) { border-right: 1px solid rgb(var(--danger-5)); } .arco-btn-group .arco-btn-status-danger:not(:last-child).arco-btn-text { border-right: 1px solid var(--color-fill-2); } .arco-btn-group .arco-btn-status-success:not(:last-child) { border-right: 1px solid rgb(var(--success-5)); } .arco-btn-group .arco-btn-status-success:not(:last-child).arco-btn-text { border-right: 1px solid var(--color-fill-2); } .arco-btn-group .arco-btn-rtl.arco-btn-outline:not(:first-child), .arco-btn-group .arco-btn-rtl.arco-btn-dashed:not(:first-child) { margin-left: 0; margin-right: -1px; } .arco-btn-group .arco-btn-rtl.arco-btn-primary:not(:last-child) { border-left: 1px solid rgb(var(--primary-5)); border-right: 0; } .arco-btn-group .arco-btn-rtl.arco-btn-secondary:not(:last-child) { border-left: 1px solid var(--color-secondary-hover); border-right: 0; } .arco-btn-group .arco-btn-rtl.arco-btn-text:not(:last-child) { border-left: 1px solid transparent; border-right: 0; } .arco-btn-group .arco-btn-rtl.arco-btn-status-warning:not(:last-child) { border-left: 1px solid rgb(var(--warning-5)); border-right: 0; } .arco-btn-group .arco-btn-rtl.arco-btn-status-warning:not(:last-child).arco-btn-text { border-left: 1px solid var(--color-fill-2); } .arco-btn-group .arco-btn-rtl.arco-btn-status-danger:not(:last-child) { border-left: 1px solid rgb(var(--danger-5)); border-right: 0; } .arco-btn-group .arco-btn-rtl.arco-btn-status-danger:not(:last-child).arco-btn-text { border-left: 1px solid var(--color-fill-2); } .arco-btn-group .arco-btn-rtl.arco-btn-status-success:not(:last-child) { border-left: 1px solid rgb(var(--success-5)); border-right: 0; } .arco-btn-group .arco-btn-rtl.arco-btn-status-success:not(:last-child).arco-btn-text { border-left: 1px solid var(--color-fill-2); } .arco-btn-group .arco-btn-outline:hover, .arco-btn-group .arco-btn-dashed:hover, .arco-btn-group .arco-btn-outline:active, .arco-btn-group .arco-btn-dashed:active { z-index: 2; } .arco-btn-group .arco-btn:not(:first-child):not(:last-child) { border-radius: 0; } .arco-btn-rtl { direction: rtl; } body[arco-theme='dark'] .arco-btn-primary.arco-btn-disabled { color: rgba(255, 255, 255, 0.3); } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ /******** 基础配置项 end *******/ /******** 基础配置项 end *******/ /******** 高级配置项 *******/ /******** 高级配置项 end *******/ .arco-input { padding-top: 4px; padding-bottom: 4px; line-height: 1.5715; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; border-radius: var(--border-radius-small); color: var(--color-text-1); padding-left: 12px; padding-right: 12px; font-size: 14px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); border: 1px solid transparent; background-color: var(--color-fill-2); } .arco-input::-webkit-input-placeholder { color: var(--color-text-3); } .arco-input::-moz-placeholder { color: var(--color-text-3); } .arco-input:-ms-input-placeholder { color: var(--color-text-3); } .arco-input::-ms-input-placeholder { color: var(--color-text-3); } .arco-input::placeholder { color: var(--color-text-3); } .arco-input:hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-input:focus, .arco-input.arco-input-focus { border-color: rgb(var(--primary-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-input-error { border-color: transparent; background-color: var(--color-danger-light-1); } .arco-input-error:hover { border-color: transparent; background-color: var(--color-danger-light-2); } .arco-input-error:focus, .arco-input-error.arco-input-focus { border-color: rgb(var(--danger-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-input-disabled { background-color: var(--color-fill-2); cursor: not-allowed; color: var(--color-text-4); -webkit-text-fill-color: var(--color-text-4); border-color: transparent; } .arco-input-disabled:hover { border-color: transparent; background-color: var(--color-fill-2); color: var(--color-text-4); } .arco-input-disabled::-webkit-input-placeholder { color: var(--color-text-4); } .arco-input-disabled::-moz-placeholder { color: var(--color-text-4); } .arco-input-disabled:-ms-input-placeholder { color: var(--color-text-4); } .arco-input-disabled::-ms-input-placeholder { color: var(--color-text-4); } .arco-input-disabled::placeholder { color: var(--color-text-4); } .arco-input input:disabled { color: var(--color-text-4); opacity: 1; -webkit-text-fill-color: var(--color-text-4); } .arco-input-word-limit { font-size: 12px; color: var(--color-text-3); padding-left: 8px; } .arco-input-word-limit-error { color: rgb(var(--danger-6)); } .arco-input-size-mini { line-height: 1.667; font-size: 12px; padding-top: 1px; padding-bottom: 1px; } .arco-input-size-small { padding-top: 2px; padding-bottom: 2px; font-size: 14px; } .arco-input-size-large { padding-top: 6px; padding-bottom: 6px; font-size: 14px; } .arco-input-group-wrapper-mini .arco-input-group-addbefore, .arco-input-group-wrapper-mini .arco-input-group-addafter { padding-left: 8px; padding-right: 8px; } .arco-input-inner-wrapper.arco-input-inner-wrapper-mini { padding-left: 8px; padding-right: 8px; } .arco-input-size-mini { padding-left: 8px; padding-right: 8px; } .arco-input-group-wrapper-small .arco-input-group-addbefore, .arco-input-group-wrapper-small .arco-input-group-addafter { padding-left: 12px; padding-right: 12px; } .arco-input-inner-wrapper.arco-input-inner-wrapper-small { padding-left: 12px; padding-right: 12px; } .arco-input-size-small { padding-left: 12px; padding-right: 12px; } .arco-input-group-wrapper-large .arco-input-group-addbefore, .arco-input-group-wrapper-large .arco-input-group-addafter { padding-left: 16px; padding-right: 16px; } .arco-input-inner-wrapper.arco-input-inner-wrapper-large { padding-left: 16px; padding-right: 16px; } .arco-input-size-large { padding-left: 16px; padding-right: 16px; } .arco-input-clear-wrapper .arco-input { padding-right: 24px; } .arco-input-clear-icon { font-size: 12px; cursor: pointer; color: var(--color-text-2); } .arco-input-clear-icon:focus-visible::before { box-shadow: 0 0 0 2px rgb(var(--primary-6)); } .arco-input-clear-icon > svg { -webkit-transition: color 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.1s cubic-bezier(0, 0, 1, 1); transition: color 0.1s cubic-bezier(0, 0, 1, 1); position: relative; } .arco-input-inner-wrapper { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--border-radius-small); color: var(--color-text-1); padding-left: 12px; padding-right: 12px; font-size: 14px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); border: 1px solid transparent; background-color: var(--color-fill-2); display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; width: 100%; position: relative; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .arco-input-inner-wrapper::-webkit-input-placeholder { color: var(--color-text-3); } .arco-input-inner-wrapper::-moz-placeholder { color: var(--color-text-3); } .arco-input-inner-wrapper:-ms-input-placeholder { color: var(--color-text-3); } .arco-input-inner-wrapper::-ms-input-placeholder { color: var(--color-text-3); } .arco-input-inner-wrapper::placeholder { color: var(--color-text-3); } .arco-input-inner-wrapper:hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-input-inner-wrapper:focus, .arco-input-inner-wrapper.arco-input-inner-wrapper-focus { border-color: rgb(var(--primary-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-input-inner-wrapper-error { border-color: transparent; background-color: var(--color-danger-light-1); } .arco-input-inner-wrapper-error:hover { border-color: transparent; background-color: var(--color-danger-light-2); } .arco-input-inner-wrapper-error:focus, .arco-input-inner-wrapper-error.arco-input-inner-wrapper-focus { border-color: rgb(var(--danger-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-input-inner-wrapper .arco-input { padding-left: 0; padding-right: 0; border-radius: 0; border: none; background: none; } .arco-input-inner-wrapper .arco-input:hover, .arco-input-inner-wrapper .arco-input:focus { background: none; box-shadow: none; } .arco-input-inner-wrapper-has-prefix > .arco-input-clear-wrapper .arco-input, .arco-input-inner-wrapper-has-prefix > .arco-input { padding-left: 12px; } .arco-input-inner-wrapper > .arco-input-clear-wrapper { height: 100%; } .arco-input-inner-wrapper > .arco-input-clear-wrapper .arco-input { padding-right: 12px; } .arco-input-inner-wrapper > .arco-input-clear-wrapper .arco-input-clear-icon { right: 8px; } .arco-input-inner-wrapper .arco-input-group-prefix, .arco-input-inner-wrapper .arco-input-group-suffix { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; height: 100%; } .arco-input-inner-wrapper .arco-input-group-prefix > svg, .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .arco-input-inner-wrapper .arco-input-group-prefix { color: var(--color-text-2); } .arco-input-inner-wrapper .arco-input-group-suffix { color: var(--color-text-2); } .arco-input-inner-wrapper-disabled { background-color: var(--color-fill-2); cursor: not-allowed; color: var(--color-text-4); -webkit-text-fill-color: var(--color-text-4); border-color: transparent; } .arco-input-inner-wrapper-disabled:hover { border-color: transparent; background-color: var(--color-fill-2); color: var(--color-text-4); } .arco-input-inner-wrapper-disabled::-webkit-input-placeholder { color: var(--color-text-4); } .arco-input-inner-wrapper-disabled::-moz-placeholder { color: var(--color-text-4); } .arco-input-inner-wrapper-disabled:-ms-input-placeholder { color: var(--color-text-4); } .arco-input-inner-wrapper-disabled::-ms-input-placeholder { color: var(--color-text-4); } .arco-input-inner-wrapper-disabled::placeholder { color: var(--color-text-4); } .arco-input-inner-wrapper-disabled .arco-input-group-prefix, .arco-input-inner-wrapper-disabled .arco-input-group-suffix { color: inherit; } .arco-input-inner-wrapper .arco-input-clear-icon { display: none; } .arco-input-inner-wrapper:hover .arco-input-clear-icon { display: inline-block; } .arco-input-inner-wrapper:hover .arco-input-clear-icon ~ .arco-input-group-suffix { margin-left: 4px; } .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-focus) .arco-input-clear-icon:hover::before { background-color: var(--color-fill-4); } .arco-input-group { display: table; width: 100%; height: 100%; } .arco-input-group > .arco-input-inner-wrapper, .arco-input-group > .arco-input { border-radius: 0; } .arco-input-group > .arco-input-inner-wrapper-focus, .arco-input-group > .arco-input-focus { border-radius: var(--border-radius-small); } .arco-input-group > :first-child { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-input-group > :last-child { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); } .arco-input-group-addbefore, .arco-input-group-addafter { width: 1px; display: table-cell; white-space: nowrap; height: 100%; vertical-align: middle; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 12px; color: var(--color-text-1); background-color: var(--color-fill-2); border: 1px solid transparent; } .arco-input-group-addbefore > svg, .arco-input-group-addafter > svg { font-size: 14px; } .arco-input-group-addafter { border-left: 1px solid var(--color-neutral-3); } .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-addbefore { border-right: 1px solid var(--color-neutral-3); } .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper { width: 100%; display: inline-block; vertical-align: top; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group { font-size: 12px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-inner-wrapper .arco-input-group-prefix, .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 12px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-inner-wrapper .arco-input-group-prefix > svg, .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 12px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore, .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter { font-size: 12px; height: 22px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore > svg, .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter > svg { font-size: 12px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-group-wrapper-mini .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-inner-wrapper .arco-input-group-prefix, .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-inner-wrapper .arco-input-group-prefix > svg, .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore, .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter { font-size: 14px; height: 26px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore > svg, .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter > svg { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-group-wrapper-small .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-inner-wrapper .arco-input-group-prefix, .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-inner-wrapper .arco-input-group-prefix > svg, .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore, .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter { font-size: 14px; height: 34px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore > svg, .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter > svg { font-size: 14px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-group-wrapper-large .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group { font-size: 14px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-prefix, .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 14px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-prefix > svg, .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore, .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter { font-size: 14px; height: 22px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore > svg, .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter > svg { font-size: 14px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper { height: 100%; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input { height: 100%; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input-clear-wrapper { height: 100%; } .arco-input-group-wrapper.arco-input-custom-height .arco-input-inner-wrapper .arco-input-clear-wrapper .arco-input { height: 100%; } .arco-input-group-wrapper .arco-input-inner-wrapper { height: 100%; } .arco-input-group-wrapper.arco-input-disabled { cursor: not-allowed; } .arco-input-mirror { position: absolute; top: 0; left: 0; visibility: hidden; } .arco-textarea { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; border-radius: var(--border-radius-small); color: var(--color-text-1); padding-left: 12px; padding-right: 12px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); border: 1px solid transparent; background-color: var(--color-fill-2); font-size: 14px; vertical-align: top; position: relative; padding: 4px 12px; max-width: 100%; min-height: 32px; height: auto; line-height: 1.5715; resize: vertical; overflow: auto; } .arco-textarea::-webkit-input-placeholder { color: var(--color-text-3); } .arco-textarea::-moz-placeholder { color: var(--color-text-3); } .arco-textarea:-ms-input-placeholder { color: var(--color-text-3); } .arco-textarea::-ms-input-placeholder { color: var(--color-text-3); } .arco-textarea::placeholder { color: var(--color-text-3); } .arco-textarea:hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-textarea:focus, .arco-textarea.arco-textarea-focus { border-color: rgb(var(--primary-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-textarea-error { border-color: transparent; background-color: var(--color-danger-light-1); } .arco-textarea-error:hover { border-color: transparent; background-color: var(--color-danger-light-2); } .arco-textarea-error:focus, .arco-textarea-error.arco-textarea-focus { border-color: rgb(var(--danger-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-textarea-disabled { background-color: var(--color-fill-2); cursor: not-allowed; color: var(--color-text-4); -webkit-text-fill-color: var(--color-text-4); border-color: transparent; } .arco-textarea-disabled:hover { border-color: transparent; background-color: var(--color-fill-2); color: var(--color-text-4); } .arco-textarea-disabled::-webkit-input-placeholder { color: var(--color-text-4); } .arco-textarea-disabled::-moz-placeholder { color: var(--color-text-4); } .arco-textarea-disabled:-ms-input-placeholder { color: var(--color-text-4); } .arco-textarea-disabled::-ms-input-placeholder { color: var(--color-text-4); } .arco-textarea-disabled::placeholder { color: var(--color-text-4); } .arco-input-group.arco-input-group-compact > .arco-select { vertical-align: unset; } .arco-input-group.arco-input-group-compact > .arco-select .arco-select-view { border-radius: 0; } .arco-input-group.arco-input-group-compact > * { border-radius: 0; } .arco-input-group.arco-input-group-compact > * .arco-input-group > :last-child, .arco-input-group.arco-input-group-compact > * .arco-input-group > :first-child { border-radius: 0; } .arco-input-group.arco-input-group-compact > *:not(:last-child) { position: relative; border-right: 1px solid var(--color-neutral-3); -moz-box-sizing: border-box; box-sizing: border-box; } .arco-input-group.arco-input-group-compact > *:first-child, .arco-input-group.arco-input-group-compact > *:first-child .arco-input-group > *:first-child { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-input-group.arco-input-group-compact > *:first-child .arco-select .arco-select-view, .arco-input-group.arco-input-group-compact > *:first-child .arco-input-group > *:first-child .arco-select .arco-select-view { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-input-group.arco-input-group-compact > *:last-child, .arco-input-group.arco-input-group-compact > *:last-child .arco-input-group > *:last-child { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); } .arco-input-group.arco-input-group-compact > *:last-child .arco-select .arco-select-view, .arco-input-group.arco-input-group-compact > *:last-child .arco-input-group > *:last-child .arco-select .arco-select-view { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); } .arco-input-group.arco-input-group-compact > .arco-input:not(:last-child) { border-right-color: var(--color-neutral-3); } .arco-input-group.arco-input-group-compact > .arco-input:not(:last-child):focus { border-right-color: rgb(var(--primary-6)); } .size-height-size-mini { line-height: 1.667; font-size: 12px; padding-top: 1px; padding-bottom: 1px; } .size-height-size-small { padding-top: 2px; padding-bottom: 2px; font-size: 14px; } .size-height-size-large { padding-top: 6px; padding-bottom: 6px; font-size: 14px; } .size-height-group-wrapper-mini .arco-input-group-addbefore, .size-height-group-wrapper-mini .arco-input-group-addafter { padding-left: 8px; padding-right: 8px; } .size-height-inner-wrapper.size-height-inner-wrapper-mini { padding-left: 8px; padding-right: 8px; } .size-height-size-mini { padding-left: 8px; padding-right: 8px; } .size-height-group-wrapper-small .arco-input-group-addbefore, .size-height-group-wrapper-small .arco-input-group-addafter { padding-left: 12px; padding-right: 12px; } .size-height-inner-wrapper.size-height-inner-wrapper-small { padding-left: 12px; padding-right: 12px; } .size-height-size-small { padding-left: 12px; padding-right: 12px; } .size-height-group-wrapper-large .arco-input-group-addbefore, .size-height-group-wrapper-large .arco-input-group-addafter { padding-left: 16px; padding-right: 16px; } .size-height-inner-wrapper.size-height-inner-wrapper-large { padding-left: 16px; padding-right: 16px; } .size-height-size-large { padding-left: 16px; padding-right: 16px; } .group-size.group-size-mini .arco-input-group { font-size: 12px; } .group-size.group-size-mini .arco-input-inner-wrapper .arco-input-group-prefix, .group-size.group-size-mini .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 12px; } .group-size.group-size-mini .arco-input-inner-wrapper .arco-input-group-prefix > svg, .group-size.group-size-mini .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 12px; } .group-size.group-size-mini .arco-input-group-addbefore, .group-size.group-size-mini .arco-input-group-addafter { font-size: 12px; height: 22px; } .group-size.group-size-mini .arco-input-group-addbefore > svg, .group-size.group-size-mini .arco-input-group-addafter > svg { font-size: 12px; } .group-size.group-size-mini .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.group-size-mini .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .group-size.group-size-mini .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.group-size-mini .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.group-size-mini .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.group-size-mini .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.group-size-mini .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .group-size.group-size-mini .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.group-size-mini .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.group-size-mini .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.group-size-small .arco-input-group { font-size: 14px; } .group-size.group-size-small .arco-input-inner-wrapper .arco-input-group-prefix, .group-size.group-size-small .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 14px; } .group-size.group-size-small .arco-input-inner-wrapper .arco-input-group-prefix > svg, .group-size.group-size-small .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .group-size.group-size-small .arco-input-group-addbefore, .group-size.group-size-small .arco-input-group-addafter { font-size: 14px; height: 26px; } .group-size.group-size-small .arco-input-group-addbefore > svg, .group-size.group-size-small .arco-input-group-addafter > svg { font-size: 14px; } .group-size.group-size-small .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.group-size-small .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .group-size.group-size-small .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.group-size-small .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.group-size-small .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.group-size-small .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.group-size-small .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .group-size.group-size-small .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.group-size-small .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.group-size-small .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.group-size-large .arco-input-group { font-size: 14px; } .group-size.group-size-large .arco-input-inner-wrapper .arco-input-group-prefix, .group-size.group-size-large .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 14px; } .group-size.group-size-large .arco-input-inner-wrapper .arco-input-group-prefix > svg, .group-size.group-size-large .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .group-size.group-size-large .arco-input-group-addbefore, .group-size.group-size-large .arco-input-group-addafter { font-size: 14px; height: 34px; } .group-size.group-size-large .arco-input-group-addbefore > svg, .group-size.group-size-large .arco-input-group-addafter > svg { font-size: 14px; } .group-size.group-size-large .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.group-size-large .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .group-size.group-size-large .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.group-size-large .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.group-size-large .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.group-size-large .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.group-size-large .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .group-size.group-size-large .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.group-size-large .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.group-size-large .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.arco-input-custom-height .arco-input-group { font-size: 14px; } .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-prefix, .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-suffix { font-size: 14px; } .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-prefix > svg, .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input-group-suffix > svg { font-size: 14px; } .group-size.arco-input-custom-height .arco-input-group-addbefore, .group-size.arco-input-custom-height .arco-input-group-addafter { font-size: 14px; height: 22px; } .group-size.arco-input-custom-height .arco-input-group-addbefore > svg, .group-size.arco-input-custom-height .arco-input-group-addafter > svg { font-size: 14px; } .group-size.arco-input-custom-height .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.arco-input-custom-height .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .group-size.arco-input-custom-height .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .group-size.arco-input-custom-height .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.arco-input-custom-height .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.arco-input-custom-height .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.arco-input-custom-height .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .group-size.arco-input-custom-height .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .group-size.arco-input-custom-height .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .group-size.arco-input-custom-height .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .group-size.arco-input-custom-height .arco-input-inner-wrapper { height: 100%; } .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input { height: 100%; } .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input-clear-wrapper { height: 100%; } .group-size.arco-input-custom-height .arco-input-inner-wrapper .arco-input-clear-wrapper .arco-input { height: 100%; } .arco-textarea-wrapper { display: inline-block; position: relative; width: 100%; } .arco-textarea-clear-wrapper:hover .arco-textarea-clear-icon { display: inline-block; } .arco-textarea-clear-wrapper .arco-textarea { padding-right: 20px; } .arco-textarea-word-limit { position: absolute; font-size: 12px; bottom: 6px; right: 10px; color: var(--color-text-3); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .arco-textarea-word-limit-error { color: rgb(var(--danger-6)); } .arco-textarea-clear-icon { display: none; position: absolute; right: 10px; top: 10px; font-size: 12px; color: var(--color-text-2); } .arco-textarea-clear-icon > svg { -webkit-transition: color 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.1s cubic-bezier(0, 0, 1, 1); transition: color 0.1s cubic-bezier(0, 0, 1, 1); position: relative; } .arco-input-search.arco-input-group-wrapper .arco-input-group-addbefore { -webkit-transition: all 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: all 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: all 0.1s cubic-bezier(0, 0, 1, 1); transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-search.arco-input-group-wrapper .arco-input-group-addafter { padding: 0; border: none; } .arco-input-search.arco-input-group-wrapper .arco-input-group-suffix { color: var(--color-text-2); font-size: 14px; } .arco-input-search.arco-input-group-wrapper:not(.arco-input-disabled) .arco-input-group-addbefore { cursor: pointer; color: var(--color-text-2); font-size: 14px; } .arco-input-search.arco-input-group-wrapper .arco-input-search-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; height: 100%; font-size: 14px; color: var(--color-white); } .arco-input-search-button .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-rtl) { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-password.arco-input-group-wrapper:not(.arco-input-disabled) .arco-input-group-suffix { cursor: pointer; color: var(--color-text-2); font-size: 12px; } .arco-input-password.arco-input-group-wrapper .arco-input-password-visibility-icon:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-6)); border-radius: var(--border-radius-small); } .arco-input-group-wrapper-rtl { direction: rtl; } .arco-input-group-wrapper-rtl .arco-input-word-limit { padding-left: 0; padding-right: input-padding-word-limit-left; } .arco-input-group-wrapper-rtl.arco-input-clear-wrapper .arco-input { padding-right: 0; padding-left: 24px; } .arco-input-group-wrapper-rtl .arco-input-group > :first-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-input-group-wrapper-rtl .arco-input-group > :last-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-input-group-wrapper-rtl .arco-input-group-addafter { border-left: none; border-right: 1px solid var(--color-neutral-3); } .arco-input-group-wrapper-rtl .arco-input-group-addafter .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper-rtl .arco-input-group-addafter .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-group-wrapper-rtl .arco-input-group-addafter .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -13px; margin-right: -12px; } .arco-input-group-wrapper-rtl .arco-input-group-addafter .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper-rtl .arco-input-group-addafter .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper-rtl .arco-input-group-addbefore { border-right: none; border-left: 1px solid var(--color-neutral-3); } .arco-input-group-wrapper-rtl .arco-input-group-addbefore .item-style { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper-rtl .arco-input-group-addbefore .arco-input { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-group-wrapper-rtl .arco-input-group-addbefore .arco-select { margin-top: -1px; margin-bottom: -1px; width: auto; height: 100%; margin-left: -12px; margin-right: -13px; } .arco-input-group-wrapper-rtl .arco-input-group-addbefore .arco-select .arco-select-view { border-radius: 0; background-color: inherit; border-color: transparent; } .arco-input-group-wrapper-rtl .arco-input-group-addbefore .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:not(:last-child) { border-right: none; border-left: 1px solid var(--color-neutral-3); } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:first-child, .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:first-child .arco-input-group > *:first-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:first-child .arco-select .arco-select-view, .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:first-child .arco-input-group > *:first-child .arco-select .arco-select-view { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:last-child, .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:last-child .arco-input-group > *:last-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:last-child .arco-select .arco-select-view, .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > *:last-child .arco-input-group > *:last-child .arco-select .arco-select-view { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > .arco-input:not(:last-child) { border-left-color: var(--color-neutral-3); } .arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact > .arco-input:not(:last-child):focus { border-left-color: rgb(var(--primary-6)); } .arco-input-group-wrapper-rtl.arco-input-search .arco-input-search-btn { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-input-inner-wrapper-rtl { direction: rtl; } .arco-input-inner-wrapper-rtl.arco-input-inner-wrapper-has-prefix > .arco-input-clear-wrapper .arco-input, .arco-input-inner-wrapper-rtl.arco-input-inner-wrapper-has-prefix > .arco-input { padding-left: 0; padding-right: 12px; } .arco-input-inner-wrapper-rtl > .arco-input-clear-wrapper .arco-input { padding-right: 0; padding-left: 12px; } .arco-input-inner-wrapper-rtl > .arco-input-clear-wrapper .arco-input-clear-icon { right: auto; right: initial; left: 8px; } .arco-input-inner-wrapper-rtl:hover .arco-input-clear-icon ~ .arco-input-group-suffix { margin-left: 4px; } .arco-input-search-button .arco-input-inner-wrapper-rtl { border-left: none; border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; } .arco-textarea-wrapper-rtl { direction: rtl; } .arco-textarea-wrapper-rtl .arco-textarea { padding-left: 20px; } .arco-textarea-wrapper-rtl .arco-textarea-word-limit { right: auto; right: initial; left: 10px; } .arco-textarea-wrapper-rtl .arco-textarea-clear-icon { right: auto; right: initial; left: 10px; } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ .arco-trigger { position: absolute; z-index: 1000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .arco-trigger-arrow { background-color: var(--color-bg-5); content: ''; height: 8px; width: 8px; position: absolute; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; z-index: -1; } .arco-trigger[trigger-placement='top'] .arco-trigger-arrow, .arco-trigger[trigger-placement='tl'] .arco-trigger-arrow, .arco-trigger[trigger-placement='tr'] .arco-trigger-arrow { bottom: -4px; margin-left: -4px; border-top: none; border-left: none; border-bottom-right-radius: 2px; } .arco-trigger[trigger-placement='bottom'] .arco-trigger-arrow, .arco-trigger[trigger-placement='bl'] .arco-trigger-arrow, .arco-trigger[trigger-placement='br'] .arco-trigger-arrow { top: -4px; margin-left: -4px; border-bottom: none; border-right: none; border-top-left-radius: 2px; } .arco-trigger[trigger-placement='left'] .arco-trigger-arrow, .arco-trigger[trigger-placement='lt'] .arco-trigger-arrow, .arco-trigger[trigger-placement='lb'] .arco-trigger-arrow { right: -4px; margin-top: -4px; border-left: none; border-bottom: none; border-top-right-radius: 2px; } .arco-trigger[trigger-placement='right'] .arco-trigger-arrow, .arco-trigger[trigger-placement='rt'] .arco-trigger-arrow, .arco-trigger[trigger-placement='rb'] .arco-trigger-arrow { left: -4px; margin-top: -4px; border-top: none; border-right: none; border-bottom-left-radius: 2px; } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ /********************************************** * Popup Box **********************************************/ /********************************************** * Popup Options * status: default / disabled / selected / hover **********************************************/ /********************************************** * Theme dark **********************************************/ .arco-dropdown-menu { position: relative; -moz-box-sizing: border-box; box-sizing: border-box; max-height: 200px; padding: 4px 0; border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); background-color: var(--color-bg-popup); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); overflow: auto; } .arco-dropdown-menu-hidden { display: none; } .arco-dropdown-menu-item, .arco-dropdown-menu-pop-header { position: relative; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px; font-size: 14px; line-height: 36px; text-align: left; cursor: pointer; z-index: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-1); background-color: transparent; } .arco-dropdown-menu-item.arco-dropdown-menu-selected, .arco-dropdown-menu-pop-header.arco-dropdown-menu-selected { color: var(--color-text-1); background-color: transparent; font-weight: 500; -webkit-transition: all 0.1s cubic-bezier(0, 0, 1, 1); -o-transition: all 0.1s cubic-bezier(0, 0, 1, 1); -moz-transition: all 0.1s cubic-bezier(0, 0, 1, 1); transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-dropdown-menu-item:hover, .arco-dropdown-menu-pop-header:hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-dropdown-menu-item:focus-visible, .arco-dropdown-menu-pop-header:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-6)) inset; } .arco-dropdown-menu-item.arco-dropdown-menu-active, .arco-dropdown-menu-pop-header.arco-dropdown-menu-active { box-shadow: 0 0 0 1px rgb(var(--primary-6)) inset; } .arco-dropdown-menu-item.arco-dropdown-menu-disabled, .arco-dropdown-menu-pop-header.arco-dropdown-menu-disabled { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-dropdown-menu-item a, .arco-dropdown-menu-pop-header a, .arco-dropdown-menu-item a:hover, .arco-dropdown-menu-pop-header a:hover, .arco-dropdown-menu-item a:focus, .arco-dropdown-menu-pop-header a:focus, .arco-dropdown-menu-item a:active, .arco-dropdown-menu-pop-header a:active { color: inherit; cursor: inherit; text-decoration: none; } .arco-dropdown-menu-item > a:only-child::before, .arco-dropdown-menu-pop-header > a:only-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .arco-dropdown-menu-pop-header { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; } .arco-dropdown-menu-pop-header .arco-dropdown-menu-icon-suffix { margin-left: 12px; } .arco-dropdown-menu-group:first-child .arco-dropdown-menu-group-title { margin-top: 4px; } .arco-dropdown-menu-group-title { margin-top: 8px; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 0 12px; line-height: 20px; font-size: 12px; color: var(--color-text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-dropdown-menu-dark { border-color: var(--color-menu-dark-bg); background-color: var(--color-menu-dark-bg); } .arco-dropdown-menu-dark .arco-dropdown-menu-item, .arco-dropdown-menu-dark .arco-dropdown-menu-pop-header { color: var(--color-text-4); background-color: transparent; } .arco-dropdown-menu-dark .arco-dropdown-menu-item.arco-dropdown-menu-selected, .arco-dropdown-menu-dark .arco-dropdown-menu-pop-header.arco-dropdown-menu-selected { color: var(--color-white); background-color: transparent; } .arco-dropdown-menu-dark .arco-dropdown-menu-item.arco-dropdown-menu-selected:hover, .arco-dropdown-menu-dark .arco-dropdown-menu-pop-header.arco-dropdown-menu-selected:hover { color: var(--color-white); } .arco-dropdown-menu-dark .arco-dropdown-menu-item:hover, .arco-dropdown-menu-dark .arco-dropdown-menu-pop-header:hover { color: var(--color-text-4); background-color: var(--color-menu-dark-hover); } .arco-dropdown-menu-dark .arco-dropdown-menu-item.arco-dropdown-menu-disabled, .arco-dropdown-menu-dark .arco-dropdown-menu-pop-header.arco-dropdown-menu-disabled { color: var(--color-text-2); background-color: transparent; } .arco-dropdown-menu-dark .arco-dropdown-menu-group-title { color: var(--color-text-3); } .arco-dropdown-menu-pop-trigger .arco-trigger-arrow { display: none; } .arco-dropdown-menu + .arco-trigger-arrow { background-color: var(--color-bg-popup); } .arco-dropdown-menu-rtl .arco-dropdown-menu-item, .arco-dropdown-menu-rtl .arco-dropdown-menu-pop-header { text-align: right; } .arco-dropdown-menu-rtl .arco-dropdown-menu-item .arco-dropdown-menu-icon-suffix, .arco-dropdown-menu-rtl .arco-dropdown-menu-pop-header .arco-dropdown-menu-icon-suffix { margin-left: 0; margin-right: 12px; } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ .arco-tooltip-content { padding: 8px 12px; background-color: var(--color-tooltip-bg); font-size: 14px; border-radius: var(--border-radius-small); color: #fff; line-height: 1.5715; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-tooltip-content-inner { word-wrap: break-word; text-align: left; } .arco-tooltip-mini { font-size: 14px; padding: 4px 12px; } .arco-trigger-arrow.arco-tooltip-arrow { background-color: var(--color-tooltip-bg); } body[arco-theme='dark'] .arco-tooltip-content { border: 1px solid var(--color-neutral-3); } body[arco-theme='dark'] .arco-tooltip .arco-trigger-arrow.arco-tooltip-arrow { z-index: 1; } body[arco-theme='dark'] .arco-trigger[trigger-placement='top'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='tl'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='tr'] .arco-trigger-arrow.arco-tooltip-arrow { border-bottom: 1px solid var(--color-neutral-3); border-right: 1px solid var(--color-neutral-3); } body[arco-theme='dark'] .arco-trigger[trigger-placement='bottom'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='bl'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='br'] .arco-trigger-arrow.arco-tooltip-arrow { border-top: 1px solid var(--color-neutral-3); border-left: 1px solid var(--color-neutral-3); } body[arco-theme='dark'] .arco-trigger[trigger-placement='left'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='lt'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='lb'] .arco-trigger-arrow.arco-tooltip-arrow { border-top: 1px solid var(--color-neutral-3); border-right: 1px solid var(--color-neutral-3); } body[arco-theme='dark'] .arco-trigger[trigger-placement='right'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='rt'] .arco-trigger-arrow.arco-tooltip-arrow, body[arco-theme='dark'] .arco-trigger[trigger-placement='rb'] .arco-trigger-arrow.arco-tooltip-arrow { border-left: 1px solid var(--color-neutral-3); border-bottom: 1px solid var(--color-neutral-3); } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ /********************************************** * theme: light / dark * status: default / disabled / selected / hover **********************************************/ /********************************************** * horizontal / vertical **********************************************/ /************************************************ * collapse ***********************************************/ /************************************************ * popButton ***********************************************/ @-webkit-keyframes arco-menu-selected-item-label-enter { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes arco-menu-selected-item-label-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes arco-menu-selected-item-label-enter { from { opacity: 0; } to { opacity: 1; } } .arco-menu { position: relative; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 14px; line-height: 1.5715; -webkit-transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-menu-indent { display: inline-block; width: 20px; } .arco-menu .arco-menu-item, .arco-menu .arco-menu-group-title, .arco-menu .arco-menu-pop-header, .arco-menu .arco-menu-inline-header { position: relative; border-radius: var(--border-radius-small); -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .arco-menu .arco-menu-item.arco-menu-disabled, .arco-menu .arco-menu-group-title.arco-menu-disabled, .arco-menu .arco-menu-pop-header.arco-menu-disabled, .arco-menu .arco-menu-inline-header.arco-menu-disabled { cursor: not-allowed; } .arco-menu .arco-menu-item.arco-menu-selected, .arco-menu .arco-menu-group-title.arco-menu-selected, .arco-menu .arco-menu-pop-header.arco-menu-selected, .arco-menu .arco-menu-inline-header.arco-menu-selected { font-weight: 500; -webkit-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.2s cubic-bezier(0, 0, 1, 1); transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu .arco-menu-item.arco-menu-selected svg, .arco-menu .arco-menu-group-title.arco-menu-selected svg, .arco-menu .arco-menu-pop-header.arco-menu-selected svg, .arco-menu .arco-menu-inline-header.arco-menu-selected svg { -webkit-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.2s cubic-bezier(0, 0, 1, 1); transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu .arco-menu-item .arco-icon, .arco-menu .arco-menu-group-title .arco-icon, .arco-menu .arco-menu-pop-header .arco-icon, .arco-menu .arco-menu-inline-header .arco-icon { margin-right: 16px; } .arco-menu-light { background-color: var(--color-menu-light-bg); } .arco-menu-light .arco-menu-item, .arco-menu-light .arco-menu-group-title, .arco-menu-light .arco-menu-pop-header, .arco-menu-light .arco-menu-inline-header { background-color: var(--color-menu-light-bg); color: var(--color-text-2); } .arco-menu-light .arco-menu-item .arco-icon, .arco-menu-light .arco-menu-group-title .arco-icon, .arco-menu-light .arco-menu-pop-header .arco-icon, .arco-menu-light .arco-menu-inline-header .arco-icon { color: var(--color-text-3); } .arco-menu-light .arco-menu-item:hover, .arco-menu-light .arco-menu-group-title:hover, .arco-menu-light .arco-menu-pop-header:hover, .arco-menu-light .arco-menu-inline-header:hover { background-color: var(--color-fill-2); color: var(--color-text-2); } .arco-menu-light .arco-menu-item:hover .arco-icon, .arco-menu-light .arco-menu-group-title:hover .arco-icon, .arco-menu-light .arco-menu-pop-header:hover .arco-icon, .arco-menu-light .arco-menu-inline-header:hover .arco-icon { color: var(--color-text-3); } .arco-menu-light .arco-menu-item:focus-visible, .arco-menu-light .arco-menu-group-title:focus-visible, .arco-menu-light .arco-menu-pop-header:focus-visible, .arco-menu-light .arco-menu-inline-header:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-6)) inset; } .arco-menu-light .arco-menu-item.arco-menu-selected, .arco-menu-light .arco-menu-group-title.arco-menu-selected, .arco-menu-light .arco-menu-pop-header.arco-menu-selected, .arco-menu-light .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-item.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-group-title.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-pop-header.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-item.arco-menu-disabled, .arco-menu-light .arco-menu-group-title.arco-menu-disabled, .arco-menu-light .arco-menu-pop-header.arco-menu-disabled, .arco-menu-light .arco-menu-inline-header.arco-menu-disabled { background-color: var(--color-menu-light-bg); color: var(--color-text-4); } .arco-menu-light .arco-menu-item.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-group-title.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-pop-header.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-disabled .arco-icon { color: var(--color-text-4); } .arco-menu-light .arco-menu-item.arco-menu-selected { background-color: var(--color-fill-2); } .arco-menu-light .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-fill-2); } .arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected, .arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected, .arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected, .arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected { background: none; -webkit-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.2s cubic-bezier(0, 0, 1, 1); transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover, .arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover, .arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover, .arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-fill-2); } .arco-menu-light .arco-menu-group-title { color: var(--color-text-3); pointer-events: none; } .arco-menu-light .arco-menu-collapse-button { background-color: var(--color-fill-1); color: var(--color-text-3); } .arco-menu-light .arco-menu-collapse-button:hover { background-color: var(--color-fill-3); } .arco-menu-light .arco-menu-collapse-button:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-6)); } .arco-menu-dark { background-color: var(--color-menu-dark-bg); } .arco-menu-dark .arco-menu-item, .arco-menu-dark .arco-menu-group-title, .arco-menu-dark .arco-menu-pop-header, .arco-menu-dark .arco-menu-inline-header { background-color: var(--color-menu-dark-bg); color: var(--color-text-4); } .arco-menu-dark .arco-menu-item .arco-icon, .arco-menu-dark .arco-menu-group-title .arco-icon, .arco-menu-dark .arco-menu-pop-header .arco-icon, .arco-menu-dark .arco-menu-inline-header .arco-icon { color: var(--color-text-3); } .arco-menu-dark .arco-menu-item:hover, .arco-menu-dark .arco-menu-group-title:hover, .arco-menu-dark .arco-menu-pop-header:hover, .arco-menu-dark .arco-menu-inline-header:hover { background-color: var(--color-menu-dark-hover); color: var(--color-text-4); } .arco-menu-dark .arco-menu-item:hover .arco-icon, .arco-menu-dark .arco-menu-group-title:hover .arco-icon, .arco-menu-dark .arco-menu-pop-header:hover .arco-icon, .arco-menu-dark .arco-menu-inline-header:hover .arco-icon { color: var(--color-text-3); } .arco-menu-dark .arco-menu-item:focus-visible, .arco-menu-dark .arco-menu-group-title:focus-visible, .arco-menu-dark .arco-menu-pop-header:focus-visible, .arco-menu-dark .arco-menu-inline-header:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-6)) inset; } .arco-menu-dark .arco-menu-item.arco-menu-selected, .arco-menu-dark .arco-menu-group-title.arco-menu-selected, .arco-menu-dark .arco-menu-pop-header.arco-menu-selected, .arco-menu-dark .arco-menu-inline-header.arco-menu-selected { color: var(--color-white); } .arco-menu-dark .arco-menu-item.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-group-title.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-pop-header.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon { color: var(--color-white); } .arco-menu-dark .arco-menu-item.arco-menu-disabled, .arco-menu-dark .arco-menu-group-title.arco-menu-disabled, .arco-menu-dark .arco-menu-pop-header.arco-menu-disabled, .arco-menu-dark .arco-menu-inline-header.arco-menu-disabled { background-color: var(--color-menu-dark-bg); color: var(--color-text-2); } .arco-menu-dark .arco-menu-item.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-group-title.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-pop-header.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-disabled .arco-icon { color: var(--color-text-2); } .arco-menu-dark .arco-menu-item.arco-menu-selected { background-color: var(--color-menu-dark-hover); } .arco-menu-dark .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon { color: rgb(var(--primary-6)); } .arco-menu-dark .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-menu-dark-hover); } .arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected, .arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected, .arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected, .arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected { background: none; -webkit-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.2s cubic-bezier(0, 0, 1, 1); transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover, .arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover, .arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover, .arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-menu-dark-hover); } .arco-menu-dark .arco-menu-group-title { color: var(--color-text-3); pointer-events: none; } .arco-menu-dark .arco-menu-collapse-button { background-color: rgb(var(--primary-6)); color: var(--color-white); } .arco-menu-dark .arco-menu-collapse-button:hover { background-color: rgb(var(--primary-7)); } .arco-menu-dark .arco-menu-collapse-button:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-6)); } .arco-menu a, .arco-menu a:hover, .arco-menu a:focus, .arco-menu a:active { color: inherit; cursor: inherit; text-decoration: none; } .arco-menu-item-inner > a:only-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .arco-menu-inner { -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; overflow: auto; } .arco-menu-vertical .arco-menu-item, .arco-menu-vertical .arco-menu-group-title, .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header { padding: 0 12px; line-height: 40px; } .arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix .arco-icon, .arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix .arco-icon, .arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon, .arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon { margin-right: 0; } .arco-menu-vertical .arco-menu-item, .arco-menu-vertical .arco-menu-group-title, .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header { margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-menu-vertical .arco-menu-item .arco-menu-item-inner, .arco-menu-vertical .arco-menu-group-title .arco-menu-item-inner, .arco-menu-vertical .arco-menu-pop-header .arco-menu-item-inner, .arco-menu-vertical .arco-menu-inline-header .arco-menu-item-inner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } .arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix, .arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix, .arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix, .arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix { position: absolute; right: 12px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix.is-open, .arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix.is-open, .arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix.is-open, .arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix.is-open { -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .arco-menu-vertical .arco-menu-inner { padding: 4px 8px; } .arco-menu-vertical .arco-menu-item.arco-menu-item-indented { display: -webkit-flex; display: -moz-box; display: flex; } .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header { padding-right: 28px; } .arco-menu-horizontal { width: auto; height: auto; } .arco-menu-horizontal .arco-menu-item, .arco-menu-horizontal .arco-menu-group-title, .arco-menu-horizontal .arco-menu-pop-header, .arco-menu-horizontal .arco-menu-inline-header { padding: 0 12px; line-height: 30px; } .arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix .arco-icon, .arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix .arco-icon, .arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon, .arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon { margin-right: 0; } .arco-menu-horizontal .arco-menu-item .arco-icon, .arco-menu-horizontal .arco-menu-group-title .arco-icon, .arco-menu-horizontal .arco-menu-pop-header .arco-icon, .arco-menu-horizontal .arco-menu-inline-header .arco-icon { margin-right: 16px; } .arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix, .arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix, .arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix, .arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix { margin-left: 6px; } .arco-menu-horizontal .arco-menu-inner { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 14px 20px; } .arco-menu-horizontal .arco-menu-item, .arco-menu-horizontal .arco-menu-pop { display: inline-block; vertical-align: middle; -webkit-flex-shrink: 0; flex-shrink: 0; } .arco-menu-horizontal .arco-menu-item:not(:first-child), .arco-menu-horizontal .arco-menu-pop:not(:first-child) { margin-left: 12px; } .arco-menu-horizontal .arco-menu-pop::after { content: ' '; width: 100%; height: 14px; position: absolute; left: 0; bottom: -14px; } .arco-menu-overflow-wrap { width: 100%; } .arco-menu-overflow-sub-menu-mirror { margin-left: 12px; } .arco-menu-overflow-sub-menu-mirror, .arco-menu-overflow-hidden-menu-item { position: absolute !important; white-space: nowrap; visibility: hidden; pointer-events: none; } .arco-menu-selected-label { position: absolute; left: 12px; right: 12px; bottom: -14px; height: 3px; background-color: rgb(var(--primary-6)); -webkit-animation: arco-menu-selected-item-label-enter 0.2s cubic-bezier(0, 0, 1, 1); -moz-animation: arco-menu-selected-item-label-enter 0.2s cubic-bezier(0, 0, 1, 1); animation: arco-menu-selected-item-label-enter 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu-pop-button { width: auto; background: none; box-shadow: none; } .arco-menu-pop-button.arco-menu-collapse { width: auto; } .arco-menu-pop-button .arco-menu-item, .arco-menu-pop-button .arco-menu-group-title, .arco-menu-pop-button .arco-menu-pop-header, .arco-menu-pop-button .arco-menu-inline-header { width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 1px solid transparent; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-bottom: 16px; } .arco-menu-collapse { width: 48px; } .arco-menu-collapse .arco-menu-inner { padding: 4px 4px; } .arco-menu-collapse .arco-menu-group-title, .arco-menu-collapse .arco-menu-icon-suffix { display: none; } .arco-menu-collapse .arco-menu-item .arco-icon, .arco-menu-collapse .arco-menu-group-title .arco-icon, .arco-menu-collapse .arco-menu-pop-header .arco-icon, .arco-menu-collapse .arco-menu-inline-header .arco-icon { margin-right: 100vw; } .arco-menu-collapse .arco-menu-collapse-button { right: unset; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .arco-menu-collapse-button { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; position: absolute; right: 12px; bottom: 12px; width: 24px; height: 24px; border-radius: var(--border-radius-small); cursor: pointer; } .arco-menu-inline-content { overflow: hidden; height: auto; -webkit-transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-menu-item-tooltip a { color: inherit; cursor: pointer; text-decoration: none; } .arco-menu-item-tooltip a:hover, .arco-menu-item-tooltip a:focus, .arco-menu-item-tooltip a:active { color: inherit; } .arco-menu-item-tooltip a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .arco-menu-pop-trigger.arco-trigger-position-bl { -webkit-transform: translateY(14px); -moz-transform: translateY(14px); -o-transform: translateY(14px); transform: translateY(14px); } .arco-menu-pop-trigger.arco-trigger-position-bl .arco-trigger-arrow { z-index: 0; border-left: 1px solid var(--color-neutral-3); border-top: 1px solid var(--color-neutral-3); } .arco-menu-pop-trigger.arco-trigger[trigger-placement='rt'] { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); -o-transform: translateX(8px); transform: translateX(8px); } .arco-menu-pop-trigger.arco-trigger[trigger-placement='rt'] .arco-trigger-arrow { z-index: 0; border-left: 1px solid var(--color-neutral-3); border-bottom: 1px solid var(--color-neutral-3); } .arco-menu-pop-trigger.arco-trigger[trigger-placement='lt'] { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -o-transform: translateX(-8px); transform: translateX(-8px); } .arco-menu-pop-trigger.arco-trigger[trigger-placement='lt'] .arco-trigger-arrow { z-index: 0; border-right: 1px solid var(--color-neutral-3); border-top: 1px solid var(--color-neutral-3); } .arco-menu-pop-trigger .arco-dropdown-menu-dark ~ .arco-trigger-arrow-container .arco-trigger-arrow { background-color: var(--color-menu-dark-bg); border-color: var(--color-menu-dark-bg); } .arco-menu-rtl { direction: rtl; } .arco-menu-rtl .arco-menu-item .arco-icon, .arco-menu-rtl .arco-menu-group-title .arco-icon, .arco-menu-rtl .arco-menu-pop-header .arco-icon, .arco-menu-rtl .arco-menu-inline-header .arco-icon { margin-right: 0; margin-left: 16px; } .arco-menu-rtl.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix .arco-icon, .arco-menu-rtl.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix .arco-icon, .arco-menu-rtl.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon, .arco-menu-rtl.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon { margin-left: 0; } .arco-menu-rtl.arco-menu-horizontal .arco-menu-item .arco-icon, .arco-menu-rtl.arco-menu-horizontal .arco-menu-group-title .arco-icon, .arco-menu-rtl.arco-menu-horizontal .arco-menu-pop-header .arco-icon, .arco-menu-rtl.arco-menu-horizontal .arco-menu-inline-header .arco-icon { margin-right: 0; margin-left: 16px; } .arco-menu-rtl.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix, .arco-menu-rtl.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix, .arco-menu-rtl.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix, .arco-menu-rtl.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix { margin-left: 0; margin-right: 6px; } .arco-menu-rtl.arco-menu-horizontal .arco-menu-item:not(:first-child), .arco-menu-rtl.arco-menu-horizontal .arco-menu-pop:not(:first-child) { margin-left: 0; margin-right: 12px; } .arco-menu-rtl.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix .arco-icon, .arco-menu-rtl.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix .arco-icon, .arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon, .arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon { margin-left: 0; } .arco-menu-rtl.arco-menu-vertical .arco-menu-item, .arco-menu-rtl.arco-menu-vertical .arco-menu-group-title, .arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header, .arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header { text-overflow: clip; } .arco-menu-rtl.arco-menu-vertical .arco-menu-item .arco-menu-item-inner, .arco-menu-rtl.arco-menu-vertical .arco-menu-group-title .arco-menu-item-inner, .arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header .arco-menu-item-inner, .arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header .arco-menu-item-inner { text-overflow: clip; } .arco-menu-rtl.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix, .arco-menu-rtl.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix, .arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix, .arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix { right: auto; right: initial; left: 12px; } .arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header, .arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header { padding-right: 12px; padding-left: 28px; } .arco-menu-rtl .arco-menu-pop::after { right: 0; left: auto; left: initial; } .arco-menu-rtl .arco-menu-collapse .arco-menu-item .arco-icon, .arco-menu-rtl .arco-menu-collapse .arco-menu-group-title .arco-icon, .arco-menu-rtl .arco-menu-collapse .arco-menu-pop-header .arco-icon, .arco-menu-rtl .arco-menu-collapse .arco-menu-inline-header .arco-icon { margin-left: 100vw; } .arco-menu-rtl .arco-menu-collapse-button { right: auto; right: initial; left: 12px; } .arco-menu-rtl .arco-menu-pop-trigger.arco-trigger-position-bl .arco-trigger-arrow { border-left: none; border-right: 1px solid var(--color-neutral-3); } .arco-menu-rtl .arco-menu-pop-trigger.arco-trigger[trigger-placement='rt'] { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -o-transform: translateX(-8px); transform: translateX(-8px); } .arco-menu-rtl .arco-menu-pop-trigger.arco-trigger[trigger-placement='lt'] { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); -o-transform: translateX(8px); transform: translateX(8px); } .arco-menu-rtl .arco-menu-pop-trigger.arco-trigger[trigger-placement='lt'] .arco-trigger-arrow { border-right: none; border-left: 1px solid var(--color-neutral-3); } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ .arco-icon-hover.arco-tabs-icon-hover::before { width: 16px; height: 16px; } .arco-tabs .arco-tabs-icon-hover { font-size: 12px; color: var(--color-text-2); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .arco-tabs-dropdown-icon { font-size: 12px; margin-left: 6px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .arco-tabs-close-icon { margin-left: 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .arco-tabs-close-icon:focus-visible .arco-icon-hover::before { box-shadow: 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-add-icon { font-size: 12px; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 0 8px; } .arco-tabs-add-icon:focus-visible .arco-icon-hover::before { box-shadow: 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-add { position: relative; } .arco-tabs-left-icon { margin-left: 10px; margin-right: 6px; } .arco-tabs-right-icon { margin-right: 10px; margin-left: 6px; } .arco-tabs-up-icon { margin-bottom: 10px; } .arco-tabs-down-icon { margin-top: 10px; } .arco-tabs-nav-icon-disabled { cursor: not-allowed; color: var(--color-text-4); } .arco-tabs { position: relative; overflow: hidden; } .arco-tabs-header-nav { position: relative; } .arco-tabs-header-nav::before { content: ''; clear: both; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: var(--color-neutral-3); display: block; } .arco-tabs-header-nav-bottom::before { top: 0; } .arco-tabs-header-nav-bottom .arco-tabs-header-ink { top: 0; } .arco-tabs-header-wrapper { display: -webkit-flex; display: -moz-box; display: flex; overflow: hidden; -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; } .arco-tabs-header { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -moz-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -o-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); white-space: nowrap; } .arco-tabs-header-extra { width: auto; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; line-height: 32px; -webkit-flex-shrink: 0; flex-shrink: 0; } .arco-tabs-header-extra .arco-tabs-add-icon { padding-left: 0; } .arco-tabs-header-title { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; cursor: pointer; color: var(--color-text-2); -webkit-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: color 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: color 0.2s cubic-bezier(0, 0, 1, 1); transition: color 0.2s cubic-bezier(0, 0, 1, 1); display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; line-height: 1.5715; padding: 4px 0; } .arco-tabs-header-title-text { display: inline-block; } .arco-tabs-header-title:hover { color: var(--color-text-2); font-weight: 400; } .arco-tabs-header-title-disabled, .arco-tabs-header-title-disabled:hover { color: var(--color-text-4); cursor: not-allowed; } .arco-tabs-header-title-active, .arco-tabs-header-title-active:hover { color: rgb(var(--primary-6)); font-weight: 500; } .arco-tabs-header-title-active.arco-tabs-header-title-disabled, .arco-tabs-header-title-active:hover.arco-tabs-header-title-disabled { color: var(--color-primary-light-3); } .arco-tabs-header-ink { position: absolute; bottom: 0; right: auto; right: initial; top: auto; top: initial; height: 2px; background-color: rgb(var(--primary-6)); -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-header-ink.arco-tabs-header-ink-no-animation { -webkit-transition: none; -o-transition: none; -moz-transition: none; transition: none; } .arco-tabs-header-ink-disabled { background-color: var(--color-primary-light-3); } .arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 40px; } .arco-tabs-header-nav-line .arco-tabs-header-title { line-height: 1.5715; margin: 0 16px; padding: 8px 0; } .arco-tabs-header-nav-line .arco-tabs-header-title-text { display: inline-block; position: relative; padding: 1px 0; } .arco-tabs-header-nav-line .arco-tabs-header-title-text::before { content: ''; z-index: -1; opacity: 1; -webkit-transition: all 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: all 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: all 0.2s cubic-bezier(0, 0, 1, 1); transition: all 0.2s cubic-bezier(0, 0, 1, 1); border-radius: var(--border-radius-small); position: absolute; top: 0; bottom: 0; left: -8px; right: -8px; background-color: transparent; } .arco-tabs-header-nav-line .arco-tabs-header-title:hover .arco-tabs-header-title-text::before { background-color: var(--color-fill-2); } .arco-tabs-header-nav-line .arco-tabs-header-title:focus-visible .arco-tabs-header-title-text::before { box-shadow: inset 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-header-nav-line .arco-tabs-header-title-active .arco-tabs-header-title-text::before, .arco-tabs-header-nav-line .arco-tabs-header-title-active:hover .arco-tabs-header-title-text::before { background-color: transparent; } .arco-tabs-header-nav-line .arco-tabs-header-title-disabled .arco-tabs-header-title-text::before, .arco-tabs-header-nav-line .arco-tabs-header-title-disabled:hover .arco-tabs-header-title-text::before { opacity: 0; } .arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal > .arco-tabs-header-scroll .arco-tabs-header-title:first-of-type { margin-left: 16px; } .arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding > .arco-tabs-header-title:first-of-type, .arco-tabs-header-nav-text.arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding > .arco-tabs-header-title:first-of-type { margin-left: 0; } .arco-tabs-header-nav-card .arco-tabs-header-title, .arco-tabs-header-nav-card-gutter .arco-tabs-header-title { font-size: 14px; border: 1px solid var(--color-neutral-3); -webkit-transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1); transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1); padding: 4px 16px; } .arco-tabs-header-nav-card .arco-tabs-header-title:focus-visible, .arco-tabs-header-nav-card-gutter .arco-tabs-header-title:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-header-nav-card .arco-tabs-header-title-editable, .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable { padding-right: 12px; } .arco-tabs-header-nav-card .arco-tabs-header-title-editable:not(.arco-tabs-header-title-active):hover .arco-icon-hover:hover::before, .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable:not(.arco-tabs-header-title-active):hover .arco-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-tabs-header-nav-card .arco-tabs-add-icon, .arco-tabs-header-nav-card-gutter .arco-tabs-add-icon { color: var(--color-text-2); height: 32px; } .arco-tabs-header-nav-card .arco-tabs-header-title { border-right: none; background-color: transparent; } .arco-tabs-header-nav-card .arco-tabs-header-title:last-child { border-right: 1px solid var(--color-neutral-3); border-top-right-radius: var(--border-radius-small); } .arco-tabs-header-nav-card .arco-tabs-header-title:first-child { border-top-left-radius: var(--border-radius-small); } .arco-tabs-header-nav-card .arco-tabs-header-title:hover { background-color: var(--color-fill-3); } .arco-tabs-header-nav-card .arco-tabs-header-title-disabled, .arco-tabs-header-nav-card .arco-tabs-header-title-disabled:hover { background-color: transparent; } .arco-tabs-header-nav-card .arco-tabs-header-title-active, .arco-tabs-header-nav-card .arco-tabs-header-title-active:hover { border-bottom-color: var(--color-bg-2); background-color: transparent; } .arco-tabs-header-nav-card-gutter .arco-tabs-header-title { margin-left: 4px; border-right: 1px solid var(--color-neutral-3); background-color: var(--color-fill-1); border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; } .arco-tabs-header-nav-card-gutter .arco-tabs-header-title:hover { background-color: var(--color-fill-3); } .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-disabled, .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-disabled:hover { background-color: var(--color-fill-1); } .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active, .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active:hover { border-bottom-color: var(--color-bg-2); background-color: transparent; } .arco-tabs-header-nav-card-gutter .arco-tabs-header-title:first-child { margin-left: 0; } .arco-tabs-header-nav-text::before { display: none; } .arco-tabs-header-nav-text .arco-tabs-header-title { position: relative; line-height: 1.5715; margin: 0 9px; font-size: 14px; padding: 5px 0; } .arco-tabs-header-nav-text .arco-tabs-header-title:not(:first-of-type)::before { height: 12px; position: absolute; width: 2px; background-color: var(--color-fill-3); content: ''; display: block; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: -9px; } .arco-tabs-header-nav-text .arco-tabs-header-title-text { padding-left: 8px; padding-right: 8px; background-color: transparent; } .arco-tabs-header-nav-text .arco-tabs-header-title-text:hover { background-color: var(--color-fill-2); } .arco-tabs-header-nav-text .arco-tabs-header-title:focus-visible .arco-tabs-header-title-text { box-shadow: inset 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-header-nav-text .arco-tabs-header-title-active .arco-tabs-header-title-text, .arco-tabs-header-nav-text .arco-tabs-header-title-active .arco-tabs-header-title-text:hover { background-color: transparent; } .arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text, .arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text:hover { background-color: transparent; } .arco-tabs-header-nav-text .arco-tabs-header-title-active.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text, .arco-tabs-header-nav-text .arco-tabs-header-title-active.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text:hover { background-color: var(--color-primary-light-3); } .arco-tabs-header-nav-rounded::before { display: none; } .arco-tabs-header-nav-rounded .arco-tabs-header-title { padding: 5px 0; padding-left: 16px; padding-right: 16px; margin: 0 6px; font-size: 14px; background-color: transparent; border-radius: 32px; } .arco-tabs-header-nav-rounded .arco-tabs-header-title:hover { background-color: var(--color-fill-2); } .arco-tabs-header-nav-rounded .arco-tabs-header-title:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-header-nav-rounded .arco-tabs-header-title-disabled:hover { background-color: transparent; } .arco-tabs-header-nav-rounded .arco-tabs-header-title-active, .arco-tabs-header-nav-rounded .arco-tabs-header-title-active:hover { background-color: var(--color-fill-2); } .arco-tabs-header-nav-capsule::before { display: none; } .arco-tabs-header-nav-capsule .arco-tabs-header-wrapper { -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; } .arco-tabs-header-nav-capsule .arco-tabs-header { line-height: 1; background-color: var(--color-fill-2); border-radius: var(--border-radius-small); padding: 3px 3px; } .arco-tabs-header-nav-capsule .arco-tabs-header-title { line-height: 26px; padding: 0 12px; background-color: transparent; position: relative; font-size: 14px; border-radius: var(--border-radius-small); } .arco-tabs-header-nav-capsule .arco-tabs-header-title:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary-light-3); } .arco-tabs-header-nav-capsule .arco-tabs-header-title:hover { background-color: var(--color-bg-2); } .arco-tabs-header-nav-capsule .arco-tabs-header-title-disabled:hover { background-color: unset; } .arco-tabs-header-nav-capsule .arco-tabs-header-title-active, .arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover { background-color: var(--color-bg-2); } .arco-tabs-header-nav-capsule .arco-tabs-header-title-active::before, .arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover::before, .arco-tabs-header-nav-capsule .arco-tabs-header-title-active + .arco-tabs-header-title::before, .arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover + .arco-tabs-header-title::before { opacity: 0; } .arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type) { margin-left: 3px; } .arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type)::before { position: absolute; top: 50%; left: -2px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; height: 14px; width: 1px; background-color: var(--color-fill-3); content: ''; -webkit-transition: all 0.2s cubic-bezier(0, 0, 1, 1); -o-transition: all 0.2s cubic-bezier(0, 0, 1, 1); -moz-transition: all 0.2s cubic-bezier(0, 0, 1, 1); transition: all 0.2s cubic-bezier(0, 0, 1, 1); } .arco-tabs-header-scroll { overflow: hidden; position: relative; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .arco-tabs-content { width: 100%; overflow: hidden; padding-top: 16px; -moz-box-sizing: border-box; box-sizing: border-box; } .arco-tabs-content .arco-tabs-content-inner { display: -webkit-flex; display: -moz-box; display: flex; width: 100%; } .arco-tabs-content .arco-tabs-content-item { width: 100%; overflow: hidden; height: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .arco-tabs-content .arco-tabs-content-item.arco-tabs-content-item-active { height: auto; } .arco-tabs-card > .arco-tabs-content, .arco-tabs-card-gutter > .arco-tabs-content { border: 1px solid var(--color-neutral-3); border-top: none; } .arco-tabs-animation.arco-tabs-content-inner { -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-horizontal.arco-tabs-justify { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; height: 100%; } .arco-tabs-horizontal.arco-tabs-justify .arco-tabs-content, .arco-tabs-horizontal.arco-tabs-justify .arco-tabs-content-inner, .arco-tabs-horizontal.arco-tabs-justify .arco-tabs-pane { height: 100%; } .arco-tabs-header-size-mini.arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 32px; font-size: 12px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-line .arco-tabs-header-title { font-size: 12px; padding-top: 6px; padding-bottom: 6px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 32px; font-size: 12px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-card .arco-tabs-header-title, .arco-tabs-header-size-mini.arco-tabs-header-nav-card-gutter .arco-tabs-header-title { font-size: 12px; padding-top: 2px; padding-bottom: 2px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-card .arco-tabs-header-extra, .arco-tabs-header-size-mini.arco-tabs-header-nav-card-gutter .arco-tabs-header-extra { line-height: 24px; font-size: 12px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-card .arco-tabs-add-icon, .arco-tabs-header-size-mini.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon { height: 24px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-capsule .arco-tabs-header-title { font-size: 12px; line-height: 18px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-capsule .arco-tabs-header-extra { line-height: 24px; font-size: 12px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-rounded .arco-tabs-header-title { font-size: 12px; padding-top: 3px; padding-bottom: 3px; } .arco-tabs-header-size-mini.arco-tabs-header-nav-rounded .arco-tabs-header-extra { line-height: 24px; font-size: 12px; } .arco-tabs-header-size-small.arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 36px; font-size: 14px; } .arco-tabs-header-size-small.arco-tabs-header-nav-line .arco-tabs-header-title { font-size: 14px; padding-top: 6px; padding-bottom: 6px; } .arco-tabs-header-size-small.arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 36px; font-size: 14px; } .arco-tabs-header-size-small.arco-tabs-header-nav-card .arco-tabs-header-title, .arco-tabs-header-size-small.arco-tabs-header-nav-card-gutter .arco-tabs-header-title { font-size: 14px; padding-top: 2px; padding-bottom: 2px; } .arco-tabs-header-size-small.arco-tabs-header-nav-card .arco-tabs-header-extra, .arco-tabs-header-size-small.arco-tabs-header-nav-card-gutter .arco-tabs-header-extra { line-height: 28px; font-size: 14px; } .arco-tabs-header-size-small.arco-tabs-header-nav-card .arco-tabs-add-icon, .arco-tabs-header-size-small.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon { height: 28px; } .arco-tabs-header-size-small.arco-tabs-header-nav-capsule .arco-tabs-header-title { font-size: 14px; line-height: 22px; } .arco-tabs-header-size-small.arco-tabs-header-nav-capsule .arco-tabs-header-extra { line-height: 28px; font-size: 14px; } .arco-tabs-header-size-small.arco-tabs-header-nav-rounded .arco-tabs-header-title { font-size: 14px; padding-top: 3px; padding-bottom: 3px; } .arco-tabs-header-size-small.arco-tabs-header-nav-rounded .arco-tabs-header-extra { line-height: 28px; font-size: 14px; } .arco-tabs-header-size-large.arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 44px; font-size: 14px; } .arco-tabs-header-size-large.arco-tabs-header-nav-line .arco-tabs-header-title { font-size: 14px; padding-top: 10px; padding-bottom: 10px; } .arco-tabs-header-size-large.arco-tabs-header-nav-line .arco-tabs-header-extra { line-height: 44px; font-size: 14px; } .arco-tabs-header-size-large.arco-tabs-header-nav-card .arco-tabs-header-title, .arco-tabs-header-size-large.arco-tabs-header-nav-card-gutter .arco-tabs-header-title { font-size: 14px; padding-top: 6px; padding-bottom: 6px; } .arco-tabs-header-size-large.arco-tabs-header-nav-card .arco-tabs-header-extra, .arco-tabs-header-size-large.arco-tabs-header-nav-card-gutter .arco-tabs-header-extra { line-height: 36px; font-size: 14px; } .arco-tabs-header-size-large.arco-tabs-header-nav-card .arco-tabs-add-icon, .arco-tabs-header-size-large.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon { height: 36px; } .arco-tabs-header-size-large.arco-tabs-header-nav-capsule .arco-tabs-header-title { font-size: 14px; line-height: 30px; } .arco-tabs-header-size-large.arco-tabs-header-nav-capsule .arco-tabs-header-extra { line-height: 36px; font-size: 14px; } .arco-tabs-header-size-large.arco-tabs-header-nav-rounded .arco-tabs-header-title { font-size: 14px; padding-top: 7px; padding-bottom: 7px; } .arco-tabs-header-size-large.arco-tabs-header-nav-rounded .arco-tabs-header-extra { line-height: 36px; font-size: 14px; } /* Vertical */ .arco-tabs-header-nav-vertical { float: left; height: 100%; } .arco-tabs-header-nav-vertical::before { position: absolute; left: auto; left: initial; bottom: 0; right: 0; top: 0; width: 1px; height: 100%; clear: both; } .arco-tabs-header-nav-vertical .arco-tabs-add-icon { margin-left: 0; margin-top: 8px; padding: 0 16px; height: auto; } .arco-tabs-header-nav-right { float: right; } .arco-tabs-header-nav-vertical .arco-tabs-header { height: auto; } .arco-tabs-header-nav-vertical .arco-tabs-header-scroll { -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .arco-tabs-header-nav-vertical .arco-tabs-header-overflow-scroll { padding: 6px 0; } .arco-tabs-header-nav-vertical .arco-tabs-header-wrapper { height: 100%; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .arco-tabs-header-nav-vertical .arco-tabs-header-ink { position: absolute; left: auto; left: initial; right: 0; bottom: auto; bottom: initial; width: 2px; -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -o-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); -moz-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-header-nav-vertical .arco-tabs-header-title { display: block; white-space: nowrap; margin: 0; margin-top: 12px; } .arco-tabs-header-nav-vertical .arco-tabs-header-title:first-of-type { margin-top: 0; } .arco-tabs-header-nav-right::before { right: unset; left: 0; } .arco-tabs-header-nav-right .arco-tabs-header-ink { left: 0; right: unset; } .arco-tabs-header-nav-vertical .arco-tabs-header-scroll { position: relative; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } .arco-tabs-header-nav-line.arco-tabs-header-nav-vertical .arco-tabs-header-title { padding: 0 20px; } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title { margin: 0; position: relative; border: 1px solid var(--color-neutral-3); border-bottom-color: transparent; } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title:first-child { border-top-left-radius: var(--border-radius-small); } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title-active, .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title-active:hover { border-bottom-color: transparent; border-right-color: var(--color-bg-2); } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title:last-child { border-bottom: 1px solid var(--color-neutral-3); border-bottom-left-radius: var(--border-radius-small); } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title { margin-left: 0; border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); position: relative; } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:not(:first-of-type) { margin-top: 4px; } .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active, .arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active:hover { border-right-color: var(--color-bg-2); border-bottom-color: var(--color-neutral-3); } .arco-tabs-content-vertical { width: auto; height: 100%; padding: 0; } .arco-tabs-right .arco-tabs-content-vertical { padding-right: 16px; } .arco-tabs-left .arco-tabs-content-vertical { padding-left: 16px; } .arco-tabs-card > .arco-tabs-content-vertical, .arco-tabs-card-gutter > .arco-tabs-content-vertical { border: 1px solid var(--color-neutral-3); border-left: none; } .arco-tabs-rtl { direction: rtl; } .arco-tabs-rtl .arco-tabs-close-icon { margin-left: 0; margin-right: 8px; } .arco-tabs-rtl .arco-tabs-left-icon, .arco-tabs-rtl .arco-tabs-right-icon { margin-left: 6px; margin-right: 10px; } .arco-tabs-rtl .arco-tabs-header-nav-line > .arco-tabs-header-nav-horizontal .arco-tabs-header-scroll > .arco-tabs-header-title:first-of-type { margin-right: 0; } .arco-tabs-rtl .arco-tabs-header-nav-line > .arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding > .arco-tabs-header-title:first-of-type, .arco-tabs-rtl .arco-tabs-header-nav-text > .arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding > .arco-tabs-header-title:first-of-type { margin-right: 0; } .arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title-editable, .arco-tabs-rtl .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable { padding-left: 12px; padding-right: 0; } .arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title { border-right: 1px solid var(--color-neutral-3); border-left: none; } .arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title:last-child { border-left: 1px solid var(--color-neutral-3); border-top-left-radius: var(--border-radius-small); border-top-right-radius: 0; } .arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title:first-child { border-top-left-radius: 0; border-top-right-radius: var(--border-radius-small); } .arco-tabs-rtl .arco-tabs-header-nav-card-gutter .arco-tabs-header-title { margin-right: 4px; } .arco-tabs-rtl .arco-tabs-header-nav-card-gutter .arco-tabs-header-title:first-child { margin-right: 0; } .arco-tabs-rtl .arco-tabs-header-nav-text .arco-tabs-header-title:not(:first-of-type)::before { left: auto; left: initial; right: -9px; } .arco-tabs-rtl .arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type) { margin-left: 0; margin-right: 3px; } .arco-tabs-rtl .arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type)::before { right: -2px; left: auto; left: initial; } body[arco-theme='dark'] .arco-tabs-header-nav-capsule .arco-tabs-header-title-active { background-color: var(--color-fill-3); } body[arco-theme='dark'] .arco-tabs-header-nav-capsule .arco-tabs-header-title:not(body[arco-theme='dark'] .arco-tabs-header-nav-capsule .arco-tabs-header-title-disabled):hover { background-color: var(--color-fill-3); } .affix_674e6 { -moz-box-sizing: border-box; box-sizing: border-box; display: none; position: fixed; left: 0; width: 100%; overflow: hidden; background-color: #1d2129; z-index: 1000; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 0 24px; } .affix_674e6::after { content: ""; position: absolute; right: -23.487px; bottom: -112.707px; width: 500px; height: 100px; -webkit-transform: rotate(-4.084deg); -moz-transform: rotate(-4.084deg); -o-transform: rotate(-4.084deg); transform: rotate(-4.084deg); background: -webkit-gradient(linear, left top, right top, from(#ff7f66), color-stop(15%, #e566ff), color-stop(70%, #387bff), to(#32e5c8)); background: -webkit-linear-gradient(left, #ff7f66 0%, #e566ff 15%, #387bff 70%, #32e5c8 100%); background: -moz-linear-gradient(left, #ff7f66 0%, #e566ff 15%, #387bff 70%, #32e5c8 100%); background: linear-gradient(90deg, #ff7f66 0%, #e566ff 15%, #387bff 70%, #32e5c8 100%); -webkit-filter: blur(25px); filter: blur(25px); } @media (min-width: 1024px) { .affix_674e6 { padding: 0 32px; } } .affix_674e6 > * { width: 100%; } .affix_674e6 .content_674e6 { color: white; display: grid; grid-template-columns: 1fr auto 1fr; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .affix_674e6 .content_674e6 .center-content_674e6 { grid-column: 2; justify-self: center; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: stretch; -moz-box-align: stretch; align-items: stretch; } .affix_674e6 .content_674e6 .center-content_674e6 .icon_674e6 { height: 30px; margin-right: 8px; } @media (min-width: 768px) { .affix_674e6 .content_674e6 .center-content_674e6 .icon_674e6 { height: 36px; margin-right: 16px; } } .affix_674e6 .content_674e6 .center-content_674e6 .title_674e6 { font-size: 12px; line-height: 17px; letter-spacing: 0px; font-weight: 400; color: white; margin: auto; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (min-width: 768px) { .affix_674e6 .content_674e6 .center-content_674e6 .title_674e6 { font-size: 14px; line-height: 20px; letter-spacing: 0px; font-weight: 400; } } .affix_674e6 .content_674e6 .right-content_674e6 { grid-column: 3; justify-self: end; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .affix_674e6 .content_674e6 .right-content_674e6 > * { margin-left: 12px; } @media (min-width: 768px) { .affix_674e6 .content_674e6 .right-content_674e6 > * { margin-left: 16px; } } .affix_674e6 .content_674e6 .right-content_674e6 .close-button_674e6 { cursor: pointer; color: white; -webkit-transition: 0.2s ease color; -o-transition: 0.2s ease color; -moz-transition: 0.2s ease color; transition: 0.2s ease color; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .affix_674e6 .content_674e6 .right-content_674e6 .close-button_674e6:hover { color: white; } .affix-visible_674e6 { display: -webkit-flex; display: -moz-box; display: flex; } .affix-top_674e6 { top: 0; -webkit-transition: 0.1s -webkit-transform ease; transition: 0.1s -webkit-transform ease; -o-transition: 0.1s -o-transform ease; -moz-transition: 0.1s transform ease, 0.1s -moz-transform ease; transition: 0.1s transform ease; transition: 0.1s transform ease, 0.1s -webkit-transform ease, 0.1s -moz-transform ease, 0.1s -o-transform ease; } .affix-bottom_674e6 { bottom: 0; -webkit-transition: 0.3s -webkit-transform ease; transition: 0.3s -webkit-transform ease; -o-transition: 0.3s -o-transform ease; -moz-transition: 0.3s transform ease, 0.3s -moz-transform ease; transition: 0.3s transform ease; transition: 0.3s transform ease, 0.3s -webkit-transform ease, 0.3s -moz-transform ease, 0.3s -o-transform ease; } .button_674e6 .button-text_674e6 { font-weight: 500; font-size: 13px; line-height: 22px; letter-spacing: 0.3%; } @media (min-width: 768px) { .button_674e6 .button-text_674e6 { font-size: 12px; line-height: 17px; letter-spacing: 0px; font-weight: 400; } } .button_674e6.arco-btn { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; height: auto; border-radius: 4px; border-width: 1px; margin-left: 16px; } .button_674e6.arco-btn-outline:not(.arco-btn-disabled) { color: white; border-color: white; } .button_674e6.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-loading):active { color: white; border-color: white; } .button_674e6.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-loading):hover { color: white; border-color: white; } .container_542b1 { display: none; gap: 8px; white-space: nowrap; } @media (min-width: 768px) { .container_542b1 { display: -webkit-flex; display: -moz-box; display: flex; } } .duration_542b1 { font-size: 16px; line-height: 22px; letter-spacing: 0px; font-weight: 400; font-weight: 600; color: white; } .text_542b1 { font-size: 14px; line-height: 20px; letter-spacing: 0px; font-weight: 400; color: white; } .timing_542b1 { /* Fixed width to prevent countdown string from shifting */ width: 84px; } @charset "UTF-8"; /* ─── Design tokens (inlined for package self-containment) ─── */ /* ── Inline arrow icon (replaces CSS ::after pseudo-elements) ── */ .inlineArrow_1fc22 { display: inline-block; width: 14px; height: 14px; -webkit-flex: 0 0 14px; -moz-box-flex: 0; flex: 0 0 14px; margin-left: 4px; vertical-align: middle; position: relative; top: -0.1em; opacity: 0; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .header_1fc22 { position: fixed; inset: 0 0 auto; z-index: 100; height: 64px; max-height: 64px; background: transparent; overflow: visible; font-family: "Inter", system-ui, sans-serif; /* Solid opaque layer — fades in on hover/focus to replace the blur */ } .header_1fc22::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 88px; pointer-events: none; background: rgba(12, 13, 14, 0.16); backdrop-filter: blur(56px) saturate(160%) brightness(0.8); -webkit-backdrop-filter: blur(56px) saturate(160%) brightness(0.8); mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(24%, rgb(0, 0, 0)), color-stop(48%, rgba(0, 0, 0, 0.88)), color-stop(72%, rgba(0, 0, 0, 0.52)), color-stop(90%, rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0))); mask-image: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 24%, rgba(0, 0, 0, 0.88) 48%, rgba(0, 0, 0, 0.52) 72%, rgba(0, 0, 0, 0.16) 90%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(24%, rgb(0, 0, 0)), color-stop(48%, rgba(0, 0, 0, 0.88)), color-stop(72%, rgba(0, 0, 0, 0.52)), color-stop(90%, rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0))); -webkit-mask-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 24%, rgba(0, 0, 0, 0.88) 48%, rgba(0, 0, 0, 0.52) 72%, rgba(0, 0, 0, 0.16) 90%, rgba(0, 0, 0, 0) 100%); -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .header_1fc22::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #0c0d0e; opacity: 0; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .header_1fc22:hover::after, .header_1fc22:focus-within::after, .header_1fc22.headerDropdownOpen_1fc22::after { opacity: 1; } .header_1fc22:hover::before, .header_1fc22:focus-within::before, .header_1fc22.headerDropdownOpen_1fc22::before { opacity: 0; } .navShell_1fc22 { position: relative; z-index: 1001; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; height: 100%; width: min(1408px, 100% - 32px); margin: 0 auto; } /* ── Brand ── */ .brandDropdown_1fc22 { position: relative; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; z-index: 2; padding: 10px 14px 18px 10px; margin: -10px -14px -18px -10px; } .brand_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; min-width: 0; color: #ffffff; text-decoration: none; cursor: pointer; } .brand_1fc22:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.42); outline-offset: 6px; } .brandTrigger_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 0; margin-left: 8px; border: 0; background: none; cursor: pointer; } .brandTrigger_1fc22:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.42); outline-offset: 4px; border-radius: 4px; } .brandLogo_1fc22 { display: block; width: 122px; height: 24px; -webkit-flex: 0 0 122px; -moz-box-flex: 0; flex: 0 0 122px; } .brandCaret_1fc22 { width: 10px; height: 10px; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, opacity 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; opacity: 0.84; } .brandMenu_1fc22 { position: absolute; top: -webkit-calc(100% - 10px); top: -moz-calc(100% - 10px); top: calc(100% - 10px); left: 0; display: grid; gap: 4px; min-width: 388px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(18, 19, 21, 0.96); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); -webkit-transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, visibility 0.2s ease, -o-transform 0.2s ease; -moz-transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, -moz-transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .brandMenuItem_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; width: 100%; gap: 4px; min-height: 68px; padding: 12px 14px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .brandMenuItem_1fc22:hover, .brandMenuItem_1fc22:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; } .brandMenuTitle_1fc22 { font-size: 16px; line-height: 24px; font-weight: 500; color: #ffffff; } .brandMenuDesc_1fc22 { font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.6); } .brandDropdownOpen_1fc22 .brandMenu_1fc22 { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .brandDropdownOpen_1fc22 .brandCaret_1fc22 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; } /* ── Nav ── */ .mainNav_1fc22 { position: absolute; left: 0; right: 0; z-index: 1; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 0; pointer-events: none; } .navDropdown_1fc22 { position: relative; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: stretch; -moz-box-align: stretch; align-items: stretch; pointer-events: auto; } .navDropdown_1fc22::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } .navDropdownTrigger_1fc22 { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; } .navMegaMenu_1fc22 { position: fixed; top: 64px; left: 0; width: 100vw; height: auto; min-height: 0; padding: 0 16px 0; -moz-box-sizing: border-box; box-sizing: border-box; background: #0c0d0e; border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-8px); -webkit-transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, visibility 0.2s ease, -o-transform 0.2s ease; -moz-transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, -moz-transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; z-index: 4; } .navDropdownScrim_1fc22 { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(12, 13, 14, 0.56); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.2s ease, visibility 0.2s ease; -o-transition: opacity 0.2s ease, visibility 0.2s ease; -moz-transition: opacity 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 3; } .navDropdownOpen_1fc22 .navMegaMenu_1fc22 { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .navDropdownOpen_1fc22 .navDropdownScrim_1fc22 { opacity: 1; visibility: visible; } .navMegaMenuShell_1fc22 { width: min(1040px, 100vw - 32px); margin: 0 auto; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: stretch; -moz-box-align: stretch; align-items: stretch; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 72px; height: auto; } .navMegaMenuShellLearn_1fc22 { gap: 90px; } .navMegaMenuMain_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: stretch; -moz-box-align: stretch; align-items: stretch; gap: 72px; height: auto; } .navMegaColumn_1fc22 { -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; padding: 32px 0; height: auto; overflow: visible; } .navMegaModels_1fc22 { min-width: 283px; width: auto; padding-right: 32px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .navMegaBuild_1fc22 { width: 263px; } .navMegaProductBuild_1fc22 { width: 283px; } .navMegaLearnColumn_1fc22 { width: 283px; } .navMegaLearnColumnDivider_1fc22 { border-right: 1px solid rgba(255, 255, 255, 0.1); } .navMegaLearnInitiatives_1fc22 { padding-left: 0; } .navMegaHeading_1fc22 { margin: 0 0 24px; color: rgba(255, 255, 255, 0.6); font-size: 16px; line-height: 24px; font-weight: 600; } .navMegaHeadingStrong_1fc22 { font-weight: 700; } .navMegaModelList_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 18px; } .navMegaLinkList_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 24px; } .navMegaModelItem_1fc22 { border: 0; background: none; cursor: pointer; padding: 0; color: #ffffff; text-align: left; display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .navMegaModelItem_1fc22:hover .navMegaModelTitle_1fc22, .navMegaModelItem_1fc22:focus-visible .navMegaModelTitle_1fc22 { opacity: 0.76; } .navMegaModelItem_1fc22:focus-visible { outline: none; } .navMegaModelTitle_1fc22 { font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; } .navMegaModelItem_1fc22:hover .navMegaModelTitle_1fc22 .inlineArrow_1fc22, .navMegaModelItem_1fc22:focus-visible .navMegaModelTitle_1fc22 .inlineArrow_1fc22 { opacity: 1; } .navMegaModelDesc_1fc22 { color: rgba(255, 255, 255, 0.8); font-size: 12px; line-height: 20px; font-weight: 500; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .navMegaLink_1fc22 { border: 0; background: none; cursor: pointer; padding: 0; color: #ffffff; text-align: left; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; font-size: 16px; line-height: 24px; font-weight: 600; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; white-space: nowrap; } .navMegaLink_1fc22:hover, .navMegaLink_1fc22:focus-visible { opacity: 0.76; outline: none; } .navMegaLink_1fc22:hover .inlineArrow_1fc22, .navMegaLink_1fc22:focus-visible .inlineArrow_1fc22 { opacity: 1; } .navMegaLink_1fc22 + .navMegaLink_1fc22 { margin-top: 28px; } .navMegaTextLink_1fc22 { border: 0; background: none; padding: 0; color: #ffffff; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; font-size: 16px; line-height: 24px; font-weight: 600; text-align: left; cursor: pointer; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; white-space: nowrap; } .navMegaTextLink_1fc22:hover, .navMegaTextLink_1fc22:focus-visible { opacity: 0.76; outline: none; } .navMegaTextLink_1fc22:hover .inlineArrow_1fc22, .navMegaTextLink_1fc22:focus-visible .inlineArrow_1fc22 { opacity: 1; } .navMegaCta_1fc22 { margin-top: 28px; -webkit-align-self: flex-start; align-self: flex-start; width: auto; padding-inline: 16px; } /* ── Spotlight ── */ .navMegaSpotlight_1fc22 { width: 252px; -moz-box-sizing: border-box; box-sizing: border-box; padding: 32px 0; height: auto; } .spotlightCard_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; min-height: 132px; padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; text-decoration: none; color: inherit; cursor: default; } .spotlightCardWithBg_1fc22 { background-size: cover; background-position: center; } .spotlightCard_1fc22[href] { cursor: pointer; } .spotlightCard_1fc22[href]:hover { opacity: 0.88; } .spotlightCardChanging_1fc22 { opacity: 0.78; } .spotlightCopy_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 4px; } .spotlightTitle_1fc22 { margin: 0; color: #ffffff; font-size: 16px; line-height: 1; font-weight: 500; } .spotlightDesc_1fc22 { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 12px; line-height: 1.25; font-weight: 400; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.5em; } .spotlightMeter_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 2px; height: 2px; } .spotlightMeterDot_1fc22 { width: 16px; -webkit-flex: 0 0 16px; -moz-box-flex: 0; flex: 0 0 16px; height: 100%; background: rgba(255, 255, 255, 0.2); } .spotlightMeterDotActive_1fc22 { background: #ffffff; } /* ── Nav links ── */ .navLink_1fc22 { position: relative; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 22px; font-weight: 500; padding: 4px 16px 6px; text-decoration: none; pointer-events: auto; cursor: pointer; } .navLink_1fc22::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: #ffffff; border-radius: 0.5px; opacity: 0; -webkit-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; -moz-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .navLink_1fc22:hover::after { opacity: 1; } .navLink_1fc22:hover { color: #ffffff; } .navDropdownOpen_1fc22 > .navLink_1fc22 { color: #ffffff; } .navDropdownOpen_1fc22 > .navLink_1fc22::after { opacity: 1; } /* ── Actions ── */ .navActions_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; margin-left: auto; position: relative; z-index: 2; } .iconButton_1fc22 { display: grid; place-items: center; width: 32px; height: 32px; padding: 8px; border-radius: 999px; border: 0; background: none; cursor: pointer; } .iconButton_1fc22 img, .iconButton_1fc22 svg { width: 16px; height: 16px; } /* ── Login link (text-only, from source .login-link) ── */ .loginLink_1fc22 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 4px; padding: 5px 12px; border: 0; background: none; color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 21px; font-weight: 400; text-decoration: none; cursor: pointer; } .loginLink_1fc22:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.42); outline-offset: 4px; } /* ── User Avatar (logged-in state) ── */ .userAvatarWrapper_1fc22 { position: relative; } .userAvatar_1fc22 { cursor: pointer; width: 36px; height: 36px; border-radius: 50%; background-color: #ffffff; display: -webkit-flex; display: -moz-box; display: flex; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: #42464e; font-weight: 600; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.18); -webkit-transition: background-color 0.2s ease, border-color 0.2s ease; -o-transition: background-color 0.2s ease, border-color 0.2s ease; -moz-transition: background-color 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease; } .userDropdownMenu_1fc22 { position: absolute; top: -webkit-calc(100% + 8px); top: -moz-calc(100% + 8px); top: calc(100% + 8px); right: 0; min-width: 240px; background: #2c3033; border: 1px solid #33373b; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); padding: 0; z-index: 200; -webkit-animation: fadeIn_1fc22 0.15s ease; -moz-animation: fadeIn_1fc22 0.15s ease; animation: fadeIn_1fc22 0.15s ease; overflow: hidden; } .userDropdownHeader_1fc22 { padding: 8px 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .userDropdownName_1fc22 { color: #ffffff; font-size: 14px; font-weight: 600; line-height: 22px; margin: 0; } .userDropdownEmail_1fc22 { color: rgba(255, 255, 255, 0.6980392157); font-size: 12px; font-weight: 500; line-height: 20px; } .userDropdownBody_1fc22 { padding: 8px; } .userDropdownItem_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 10px; height: 40px; padding: 0 12px; color: #ffffff; font-size: 14px; font-weight: 500; line-height: 22px; text-decoration: none; border-radius: 6px; -webkit-transition: background-color 0.15s ease, color 0.15s ease; -o-transition: background-color 0.15s ease, color 0.15s ease; -moz-transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease; } .userDropdownItem_1fc22:hover { background-color: rgba(255, 255, 255, 0.0509803922); color: #ffffff; } .userDropdownSignout_1fc22 { width: 100%; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; height: 40px; padding: 0 12px; border: 0; background: transparent; color: #ffffff; font-size: 14px; font-weight: 500; line-height: 22px; text-align: left; cursor: pointer; text-decoration: none; border-radius: 6px; -webkit-transition: background-color 0.15s ease, color 0.15s ease; -o-transition: background-color 0.15s ease, color 0.15s ease; -moz-transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease; } .userDropdownSignout_1fc22:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.0509803922); } /* ── Mobile user section (logged-in) ── */ .mobileMenuUserSection_1fc22 { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; margin-top: 8px; } .mobileMenuUserRow_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; padding-bottom: 12px; } .mobileMenuUserAvatar_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #ffffff; color: #42464e; font-weight: 600; font-size: 13px; -webkit-flex-shrink: 0; flex-shrink: 0; } .mobileMenuUserName_1fc22 { color: #ffffff; font-size: 14px; font-weight: 500; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobileMenuUserLink_1fc22 { display: block; padding: 10px 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 20px; text-decoration: none; } .mobileMenuUserLink_1fc22:hover { color: #ffffff; } .mobileMenuSignoutLink_1fc22 { display: block; width: 100%; padding: 10px 0; border: 0; background: none; color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; } .mobileMenuSignoutLink_1fc22:hover { color: #ffffff; } /* ── CTA button (ghost pill, from source .cta-button + .nav-actions .cta-button) ── */ .ctaButton_1fc22 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; min-height: 36px; padding: 5px 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: #ffffff; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.039px; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .ctaButton_1fc22:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.34); } /* ── Filled pill (used inside mega-menus, e.g. "Explore 100+ models") ── */ .pillButton_1fc22 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; min-height: 40px; padding: 5px 16px; border: 0; border-radius: 999px; background: #ffffff; color: #0c0d0e; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: 0.039px; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-transition: opacity 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, background-color 0.2s ease, -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .pillButton_1fc22:hover { background: #eef1f4; } /* ── Mobile ── */ .mobileMenuButton_1fc22 { display: none; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border-radius: 999px; border: 0; background: none; color: #ffffff; cursor: pointer; font-size: 20px; } .mobileMenuButton_1fc22 svg { width: 24px; height: 24px; } /* ── Mobile overlay ── */ .mobileOverlay_1fc22 { position: fixed; inset: 64px 0 0; background: rgba(0, 0, 0, 0.56); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 998; -webkit-animation: fadeIn_1fc22 0.25s ease forwards; -moz-animation: fadeIn_1fc22 0.25s ease forwards; animation: fadeIn_1fc22 0.25s ease forwards; } .mobileOverlayClosing_1fc22 { -webkit-animation: fadeOut_1fc22 0.25s ease forwards; -moz-animation: fadeOut_1fc22 0.25s ease forwards; animation: fadeOut_1fc22 0.25s ease forwards; } @-webkit-keyframes fadeIn_1fc22 { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn_1fc22 { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn_1fc22 { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut_1fc22 { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeOut_1fc22 { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut_1fc22 { from { opacity: 1; } to { opacity: 0; } } .mobileMenu_1fc22 { display: none; } .mobileMenuSection_1fc22 { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobileMenuTab_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; width: 100%; padding: 16px 0; border: 0; background: transparent; color: #ffffff; font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer; text-align: left; } .mobileMenuCaret_1fc22 { -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; -o-transition: -o-transform 0.25s ease; -moz-transition: transform 0.25s ease, -moz-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease, -moz-transform 0.25s ease, -o-transform 0.25s ease; } .mobileMenuSectionOpen_1fc22 .mobileMenuCaret_1fc22 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .mobileSubmenu_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 4px; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s ease; -o-transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s ease; -moz-transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s ease; transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s ease; padding-bottom: 0; } .mobileMenuSectionOpen_1fc22 .mobileSubmenu_1fc22 { max-height: 500px; padding-bottom: 16px; } .mobileSubmenu_1fc22 a { display: block; padding: 8px 0; color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 22px; font-weight: 500; text-decoration: none; -webkit-transition: color 0.2s ease; -o-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .mobileSubmenu_1fc22 a:hover { color: #ffffff; } .mobileMenuTopLink_1fc22 { display: block; padding: 16px 0; color: #ffffff; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; } .mobileMenuLoginLink_1fc22 { display: block; padding: 16px 0; border: 0; background: none; color: #ffffff; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; text-align: left; cursor: pointer; } .mobileMenuCta_1fc22 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; height: 40px; padding: 5px 20px; margin-top: 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: #ffffff; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; cursor: pointer; -webkit-align-self: flex-start; align-self: flex-start; -webkit-transition: background-color 0.2s ease, border-color 0.2s ease; -o-transition: background-color 0.2s ease, border-color 0.2s ease; -moz-transition: background-color 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease; width: 100%; } .mobileMenuCta_1fc22:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.34); } @-webkit-keyframes mobileMenuSlideDown_1fc22 { from { opacity: 0; -webkit-transform: translateY(-12px); transform: translateY(-12px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes mobileMenuSlideDown_1fc22 { from { opacity: 0; -moz-transform: translateY(-12px); transform: translateY(-12px); } to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } } @keyframes mobileMenuSlideDown_1fc22 { from { opacity: 0; -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); -o-transform: translateY(-12px); transform: translateY(-12px); } to { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes mobileMenuSlideUp_1fc22 { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-12px); transform: translateY(-12px); } } @-moz-keyframes mobileMenuSlideUp_1fc22 { from { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -moz-transform: translateY(-12px); transform: translateY(-12px); } } @keyframes mobileMenuSlideUp_1fc22 { from { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); -o-transform: translateY(-12px); transform: translateY(-12px); } } .mobileMenuClosing_1fc22 { -webkit-animation: mobileMenuSlideUp_1fc22 0.25s ease forwards !important; -moz-animation: mobileMenuSlideUp_1fc22 0.25s ease forwards !important; animation: mobileMenuSlideUp_1fc22 0.25s ease forwards !important; } @media (max-width: 1280px) and (min-width: 1080px) { .navMegaMenuShell_1fc22 { gap: 32px; } .navMegaMenuShellLearn_1fc22 { gap: 40px; } .navMegaMenuMain_1fc22 { gap: 32px; } .navMegaModels_1fc22 { min-width: 220px; padding-right: 24px; } .navMegaBuild_1fc22 { width: 200px; } .navMegaProductBuild_1fc22 { width: 220px; } .navMegaLearnColumn_1fc22 { width: 200px; } } @media (max-width: 1280px) { .mainNav_1fc22 { display: none; } .navActions_1fc22 { display: none; } .mobileMenuButton_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; } .mobileMenu_1fc22 { display: none; } .mobileMenuOpen_1fc22 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 0; padding: 0 24px 24px; background: #0c0d0e; max-height: -webkit-calc(100vh - 60px); max-height: -moz-calc(100vh - 60px); max-height: calc(100vh - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; z-index: 999; -webkit-animation: mobileMenuSlideDown_1fc22 0.25s ease forwards; -moz-animation: mobileMenuSlideDown_1fc22 0.25s ease forwards; animation: mobileMenuSlideDown_1fc22 0.25s ease forwards; } } /* ════════════════════════════════════════════════════════════════════════ LIGHT MODE OVERRIDES Applied when useHeaderTheme resolves to 'light' (body without arco-theme="dark"). ════════════════════════════════════════════════════════════════════════ */ .header_1fc22.light_1fc22 { /* ── Header background layers ── */ /* ── Nav mega menu ── */ /* ── Scrim ── */ /* ── Column borders ── */ /* ── Mega headings ── */ /* ── Model items ── */ /* ── Mega links (Build section) ── */ /* ── Spotlight card ── */ /* ── Nav links ── */ /* ── CTA button (secondary/outline) ── */ /* ── Pill button (filled, inside mega-menus) ── */ /* ── Login link ── */ /* ── User avatar ── */ /* ── User dropdown ── */ /* ── Brand dropdown (light — matches old Header implementation) ── */ /* ── Inline arrow icon ── */ /* ── Mobile hamburger ── */ /* ── Mobile overlay ── */ /* ── Mobile menu ── */ /* ── Mobile user section ── */ } .header_1fc22.light_1fc22::before { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(56px) saturate(160%) brightness(1.1); -webkit-backdrop-filter: blur(56px) saturate(160%) brightness(1.1); } .header_1fc22.light_1fc22::after { background: #ffffff; } .header_1fc22.light_1fc22 .navMegaMenu_1fc22 { background: #ffffff; border-top-color: #eaedf1; } .header_1fc22.light_1fc22 .navDropdownScrim_1fc22 { background: rgba(255, 255, 255, 0.56); } .header_1fc22.light_1fc22 .navMegaModels_1fc22 { border-right-color: #eaedf1; } .header_1fc22.light_1fc22 .navMegaLearnColumnDivider_1fc22 { border-right-color: #eaedf1; } .header_1fc22.light_1fc22 .navMegaHeading_1fc22 { color: #86909c; } .header_1fc22.light_1fc22 .navMegaModelItem_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .navMegaModelTitle_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .navMegaModelDesc_1fc22 { color: #42464e; } .header_1fc22.light_1fc22 .navMegaLink_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .navMegaTextLink_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .spotlightCard_1fc22 { background: #f6f8fa; } .header_1fc22.light_1fc22 .spotlightTitle_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .spotlightDesc_1fc22 { color: #86909c; } .header_1fc22.light_1fc22 .spotlightMeterDot_1fc22 { background: rgba(0, 0, 0, 0.2); } .header_1fc22.light_1fc22 .spotlightMeterDotActive_1fc22 { background: #0c0d0e; } .header_1fc22.light_1fc22 .navLink_1fc22 { color: rgba(0, 0, 0, 0.6); } .header_1fc22.light_1fc22 .navLink_1fc22::after { background: #0c0d0e; } .header_1fc22.light_1fc22 .navLink_1fc22:hover { color: #0c0d0e; } .header_1fc22.light_1fc22 .navDropdownOpen_1fc22 > .navLink_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .ctaButton_1fc22 { border-color: #dde2e9; color: #0c0d0e; } .header_1fc22.light_1fc22 .ctaButton_1fc22:hover { background: rgba(0, 0, 0, 0.04); border-color: #c9cdd4; } .header_1fc22.light_1fc22 .pillButton_1fc22 { background: #0c0d0e; color: #ffffff; } .header_1fc22.light_1fc22 .pillButton_1fc22:hover { background: #1d2129; } .header_1fc22.light_1fc22 .loginLink_1fc22 { color: #42464e; } .header_1fc22.light_1fc22 .loginLink_1fc22:focus-visible { outline-color: rgba(0, 0, 0, 0.2); } .header_1fc22.light_1fc22 .userAvatar_1fc22 { background-color: #0c0d0e; color: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .header_1fc22.light_1fc22 .userDropdownMenu_1fc22 { background: #ffffff; border-color: #eaedf1; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .header_1fc22.light_1fc22 .userDropdownHeader_1fc22 { border-bottom-color: #eaedf1; } .header_1fc22.light_1fc22 .userDropdownName_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .userDropdownEmail_1fc22 { color: #86909c; } .header_1fc22.light_1fc22 .userDropdownBody_1fc22 { background: #ffffff; } .header_1fc22.light_1fc22 .userDropdownItem_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .userDropdownItem_1fc22:hover { background-color: #f6f8fa; color: #0c0d0e; } .header_1fc22.light_1fc22 .userDropdownSignout_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .userDropdownSignout_1fc22:hover { color: #0c0d0e; background-color: #f6f8fa; } .header_1fc22.light_1fc22 .brand_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .brand_1fc22:focus-visible { outline-color: rgba(0, 0, 0, 0.2); } .header_1fc22.light_1fc22 .brandCaret_1fc22 { -webkit-filter: invert(1); filter: invert(1); opacity: 0.56; } .header_1fc22.light_1fc22 .brandTrigger_1fc22:focus-visible { outline-color: rgba(0, 0, 0, 0.2); } .header_1fc22.light_1fc22 .brandMenu_1fc22 { background: #ffffff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.28); } .header_1fc22.light_1fc22 .brandMenuItem_1fc22:hover, .header_1fc22.light_1fc22 .brandMenuItem_1fc22:focus-visible { background: #f6f8fa; } .header_1fc22.light_1fc22 .brandMenuTitle_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .brandMenuDesc_1fc22 { color: #42464e; } .header_1fc22.light_1fc22 .inlineArrow_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuButton_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileOverlay_1fc22 { background: rgba(255, 255, 255, 0.56); } .header_1fc22.light_1fc22 .mobileMenuSection_1fc22 { border-bottom-color: #eaedf1; } .header_1fc22.light_1fc22 .mobileMenuTab_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileSubmenu_1fc22 a { color: #42464e; } .header_1fc22.light_1fc22 .mobileSubmenu_1fc22 a:hover { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuTopLink_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuLoginLink_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuSignoutLink_1fc22 { color: #42464e; } .header_1fc22.light_1fc22 .mobileMenuSignoutLink_1fc22:hover { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuCta_1fc22 { border-color: #dde2e9; color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuCta_1fc22:hover { background: rgba(0, 0, 0, 0.04); border-color: #c9cdd4; } .header_1fc22.light_1fc22 .mobileMenuUserAvatar_1fc22 { background-color: #0c0d0e; color: #ffffff; } .header_1fc22.light_1fc22 .mobileMenuUserName_1fc22 { color: #0c0d0e; } .header_1fc22.light_1fc22 .mobileMenuUserLink_1fc22 { color: #42464e; } .header_1fc22.light_1fc22 .mobileMenuUserLink_1fc22:hover { color: #0c0d0e; } /* Light mobile menu background override (needs to reach into &Open compound) */ @media (max-width: 1280px) { .header_1fc22.light_1fc22 .mobileMenuOpen_1fc22 { background: #ffffff; } } @media (max-width: 767px) { .pc-display-only_1fc22 { display: none !important; } } @-webkit-keyframes gradientScroll_4302d { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-moz-keyframes gradientScroll_4302d { 0% { -moz-transform: translateX(0); transform: translateX(0); } 100% { -moz-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes gradientScroll_4302d { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } .searchBar_4302d { position: relative; -webkit-align-items: center; -moz-box-align: center; align-items: center; height: 36px; background: transparent; cursor: pointer; border: none; width: 20px; } @media (max-width: 1023px) { .searchBar_4302d { display: none; } } .searchBarInner_4302d { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; } .searchIcon_4302d, .searchPlaceholder_4302d { position: relative; z-index: 1; } .searchIcon_4302d { width: 20px; height: 20px; -webkit-flex-shrink: 0; flex-shrink: 0; } .searchPlaceholder_4302d { font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #737a87; white-space: nowrap; text-align: center; } .backdrop_fc36b { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 998; } @-webkit-keyframes gradientScroll_fc36b { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } @-moz-keyframes gradientScroll_fc36b { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } @keyframes gradientScroll_fc36b { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } @-webkit-keyframes expandFromTrigger_fc36b { from { -webkit-transform: scaleX(0.15) scaleY(0.3); transform: scaleX(0.15) scaleY(0.3); opacity: 0.5; } to { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); opacity: 1; } } @-moz-keyframes expandFromTrigger_fc36b { from { -moz-transform: scaleX(0.15) scaleY(0.3); transform: scaleX(0.15) scaleY(0.3); opacity: 0.5; } to { -moz-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); opacity: 1; } } @keyframes expandFromTrigger_fc36b { from { -webkit-transform: scaleX(0.15) scaleY(0.3); -moz-transform: scaleX(0.15) scaleY(0.3); -o-transform: scaleX(0.15) scaleY(0.3); transform: scaleX(0.15) scaleY(0.3); opacity: 0.5; } to { -webkit-transform: scaleX(1) scaleY(1); -moz-transform: scaleX(1) scaleY(1); -o-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); opacity: 1; } } @-webkit-keyframes slowFadeIn_fc36b { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes slowFadeIn_fc36b { from { opacity: 0; } to { opacity: 1; } } @keyframes slowFadeIn_fc36b { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOutGradient_fc36b { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeOutGradient_fc36b { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOutGradient_fc36b { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes collapseToTrigger_fc36b { from { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); opacity: 1; } to { -webkit-transform: scaleX(0.15) scaleY(0.3); transform: scaleX(0.15) scaleY(0.3); opacity: 0; } } @-moz-keyframes collapseToTrigger_fc36b { from { -moz-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); opacity: 1; } to { -moz-transform: scaleX(0.15) scaleY(0.3); transform: scaleX(0.15) scaleY(0.3); opacity: 0; } } @keyframes collapseToTrigger_fc36b { from { -webkit-transform: scaleX(1) scaleY(1); -moz-transform: scaleX(1) scaleY(1); -o-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); opacity: 1; } to { -webkit-transform: scaleX(0.15) scaleY(0.3); -moz-transform: scaleX(0.15) scaleY(0.3); -o-transform: scaleX(0.15) scaleY(0.3); transform: scaleX(0.15) scaleY(0.3); opacity: 0; } } @-webkit-keyframes fadeInGradient_fc36b { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeInGradient_fc36b { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInGradient_fc36b { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes quickFadeOut_fc36b { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes quickFadeOut_fc36b { from { opacity: 1; } to { opacity: 0; } } @keyframes quickFadeOut_fc36b { from { opacity: 1; } to { opacity: 0; } } .searchWrapper_fc36b { -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; position: relative; min-width: 0; margin: 0 16px; margin: var(--sb-wrapper-margin, 0 16px); z-index: 999; -webkit-align-self: stretch; align-self: stretch; } .searchCard_fc36b { position: absolute; top: 0; left: 0; right: 0; background: #fff; background: var(--sb-card-bg, #fff); border: 1px solid #dde2e9; border: 1px solid var(--sb-card-border, #dde2e9); border-radius: 8px; -webkit-filter: drop-shadow(0px 5px 60px rgba(51, 65, 101, 0.1)); filter: drop-shadow(0px 5px 60px rgba(51, 65, 101, 0.1)); -webkit-transform-origin: top right; -moz-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-animation: expandFromTrigger_fc36b 0.1s ease-out forwards; -moz-animation: expandFromTrigger_fc36b 0.1s ease-out forwards; animation: expandFromTrigger_fc36b 0.1s ease-out forwards; } .searchCard_fc36b::after { content: ""; display: block; display: var(--sb-gradient-border, block); position: absolute; inset: -1.5px; border-radius: 10px; z-index: 1; pointer-events: none; background: -webkit-gradient(linear, left top, right top, from(#387bff), color-stop(10%, #e566ff), color-stop(20%, #ff7f66), color-stop(30%, #e566ff), color-stop(40%, #387bff), color-stop(50%, #32e5c8), color-stop(60%, #387bff), color-stop(70%, #e566ff), color-stop(80%, #ff7f66), color-stop(90%, #e566ff), to(#387bff)); background: -webkit-linear-gradient(left, #387bff 0%, #e566ff 10%, #ff7f66 20%, #e566ff 30%, #387bff 40%, #32e5c8 50%, #387bff 60%, #e566ff 70%, #ff7f66 80%, #e566ff 90%, #387bff 100%); background: -moz-linear-gradient(left, #387bff 0%, #e566ff 10%, #ff7f66 20%, #e566ff 30%, #387bff 40%, #32e5c8 50%, #387bff 60%, #e566ff 70%, #ff7f66 80%, #e566ff 90%, #387bff 100%); background: linear-gradient(90deg, #387bff 0%, #e566ff 10%, #ff7f66 20%, #e566ff 30%, #387bff 40%, #32e5c8 50%, #387bff 60%, #e566ff 70%, #ff7f66 80%, #e566ff 90%, #387bff 100%); background-size: 200% 100%; -webkit-animation: gradientScroll_fc36b 3s linear infinite, fadeOutGradient_fc36b 0.4s ease-out 0.3s forwards; -moz-animation: gradientScroll_fc36b 3s linear infinite, fadeOutGradient_fc36b 0.4s ease-out 0.3s forwards; animation: gradientScroll_fc36b 3s linear infinite, fadeOutGradient_fc36b 0.4s ease-out 0.3s forwards; -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); -webkit-mask: -webkit-linear-gradient(#fff 0 0) content-box, -webkit-linear-gradient(#fff 0 0); padding: 1.5px; -webkit-mask-composite: xor; mask-composite: exclude; } .searchCard_fc36b.closing_fc36b { -webkit-animation: collapseToTrigger_fc36b 0.2s ease-in forwards; -moz-animation: collapseToTrigger_fc36b 0.2s ease-in forwards; animation: collapseToTrigger_fc36b 0.2s ease-in forwards; } .searchCard_fc36b.closing_fc36b::after { -webkit-animation: gradientScroll_fc36b 3s linear infinite, fadeInGradient_fc36b 0.1s ease-in forwards; -moz-animation: gradientScroll_fc36b 3s linear infinite, fadeInGradient_fc36b 0.1s ease-in forwards; animation: gradientScroll_fc36b 3s linear infinite, fadeInGradient_fc36b 0.1s ease-in forwards; } .expandedSearch_fc36b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 4px; height: 48px; height: var(--sb-input-height, 48px); padding: 0 16px; background: #fff; background: var(--sb-input-bg, #fff); border-radius: 8px 8px 0 0; } .expandedSearch_fc36b > * { opacity: 0; -webkit-animation: slowFadeIn_fc36b 0.15s ease-out 0.1s forwards; -moz-animation: slowFadeIn_fc36b 0.15s ease-out 0.1s forwards; animation: slowFadeIn_fc36b 0.15s ease-out 0.1s forwards; } .closing_fc36b .expandedSearch_fc36b > * { -webkit-animation: quickFadeOut_fc36b 0.1s ease-in forwards; -moz-animation: quickFadeOut_fc36b 0.1s ease-in forwards; animation: quickFadeOut_fc36b 0.1s ease-in forwards; } .aiIcon_fc36b { width: 16px; height: 16px; -webkit-flex-shrink: 0; flex-shrink: 0; } .searchInput_fc36b { -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; border: none; outline: none; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; line-height: 17px; color: #0c0d0e; color: var(--sb-text-color, #0c0d0e); background: transparent; min-width: 0; } .searchInput_fc36b::-webkit-input-placeholder { color: #737a87; } .searchInput_fc36b::-moz-placeholder { color: #737a87; } .searchInput_fc36b:-ms-input-placeholder { color: #737a87; } .searchInput_fc36b::-ms-input-placeholder { color: #737a87; } .searchInput_fc36b::placeholder { color: #737a87; } .submitBtn_fc36b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 28px; width: var(--sb-btn-size, 28px); height: 28px; height: var(--sb-btn-size, 28px); border-radius: -webkit-calc(28px / 2); border-radius: -moz-calc(28px / 2); border-radius: calc(28px / 2); border-radius: -webkit-calc(var(--sb-btn-size, 28px) / 2); border-radius: -moz-calc(var(--sb-btn-size, 28px) / 2); border-radius: calc(var(--sb-btn-size, 28px) / 2); border: none; background: #737a87; background: var(--sb-btn-bg, #737a87); cursor: pointer; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-transition: background-color 0.15s ease; -o-transition: background-color 0.15s ease; -moz-transition: background-color 0.15s ease; transition: background-color 0.15s ease; } .submitBtn_fc36b:hover { background-color: #5a5f68; } .submitBtn_fc36b svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .autocompleteDropdown_fc36b { opacity: 0; -webkit-animation: slowFadeIn_fc36b 0.15s ease-out 0.15s forwards; -moz-animation: slowFadeIn_fc36b 0.15s ease-out 0.15s forwards; animation: slowFadeIn_fc36b 0.15s ease-out 0.15s forwards; } .closing_fc36b .autocompleteDropdown_fc36b { -webkit-animation: quickFadeOut_fc36b 0.1s ease-in forwards; -moz-animation: quickFadeOut_fc36b 0.1s ease-in forwards; animation: quickFadeOut_fc36b 0.1s ease-in forwards; } .autocompleteList_fc36b { list-style: none; margin: 0; padding: 0 8px 16px 8px; } .autocompleteItem_fc36b { display: -webkit-flex; display: -moz-box; display: flex; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; color: #0c0d0e; color: var(--sb-text-color, #0c0d0e); cursor: pointer; -webkit-transition: background-color 0.1s ease; -o-transition: background-color 0.1s ease; -moz-transition: background-color 0.1s ease; transition: background-color 0.1s ease; height: 38px; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; -webkit-align-self: stretch; align-self: stretch; line-height: 22px; padding: 0 8px; } .autocompleteItem_fc36b:hover { background-color: #f5f6f7; background-color: var(--sb-item-hover-bg, #f5f6f7); } .autocompleteItemActive_fc36b { background-color: #f5f6f7; background-color: var(--sb-item-hover-bg, #f5f6f7); } .autocompleteText_fc36b { min-width: 0; } .autocompleteMatch_fc36b { color: inherit; font-weight: 600; } .resultsDropdown_fc36b { border-top: 1px solid #e5e6eb; opacity: 0; -webkit-animation: slowFadeIn_fc36b 0.15s ease-out 0.15s forwards; -moz-animation: slowFadeIn_fc36b 0.15s ease-out 0.15s forwards; animation: slowFadeIn_fc36b 0.15s ease-out 0.15s forwards; } .closing_fc36b .resultsDropdown_fc36b { -webkit-animation: quickFadeOut_fc36b 0.1s ease-in forwards; -moz-animation: quickFadeOut_fc36b 0.1s ease-in forwards; animation: quickFadeOut_fc36b 0.1s ease-in forwards; } .resultsList_fc36b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; padding: 8px; gap: 0; max-height: 400px; overflow-y: auto; background: #fff; background: var(--sb-card-bg, #fff); border-radius: 0 0 8px 8px; } .row_c0bd0 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; gap: 12px; padding: 8px; cursor: pointer; text-decoration: none; color: inherit; border-radius: 6px; -webkit-transition: background-color 0.15s ease; -o-transition: background-color 0.15s ease; -moz-transition: background-color 0.15s ease; transition: background-color 0.15s ease; } .row_c0bd0:hover { background-color: #f7f8fa; } .icon_c0bd0 { width: 32px; height: 32px; border-radius: 6px; -o-object-fit: cover; object-fit: cover; -webkit-flex-shrink: 0; flex-shrink: 0; background-color: #f2f3f5; } .info_c0bd0 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; min-width: 0; -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; } .name_c0bd0 { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; line-height: 17px; color: #0c0d0e; } .description_c0bd0 { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 14px; color: #737a87; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rightSection_c0bd0 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: auto; } @media (max-width: 1036px) { .rightSection_c0bd0 { display: none; } } .freeTrialText_c0bd0 { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 400; line-height: 20px; color: #737a87; white-space: nowrap; } @media (max-width: 1280px) { .freeTrialText_c0bd0 { display: none; } } .actionBtn_c0bd0 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; padding: 0 12px; height: 24px; border: 1px solid #dde2e9; border-radius: 1000px; background: #fff; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 500; line-height: 20px; color: #0c0d0e; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-transition: border-color 0.15s ease, background-color 0.15s ease; -o-transition: border-color 0.15s ease, background-color 0.15s ease; -moz-transition: border-color 0.15s ease, background-color 0.15s ease; transition: border-color 0.15s ease, background-color 0.15s ease; } .actionBtn_c0bd0:hover { border-color: #b7bcc5; background-color: #f7f8fa; } .actionIcon_c0bd0 { width: 12px; height: 12px; } .actionIcon_c0bd0 svg { width: 12px; height: 12px; } .chevron_c0bd0 { -webkit-flex-shrink: 0; flex-shrink: 0; width: 16px; height: 16px; } @-webkit-keyframes textShine_9b861 { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @-moz-keyframes textShine_9b861 { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes textShine_9b861 { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .linkBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: transparent !important; color: #42464e; padding: 0; height: 36px; border: none !important; box-shadow: none !important; font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: 0px; text-decoration: none; position: relative; } .linkBtn_9b861.arco-btn:not(.arco-btn-disabled)::after { content: ""; position: absolute; left: 0; bottom: 3px; height: 1px; width: 0; background: -webkit-gradient(linear, left top, right top, from(#ff7f66), color-stop(15%, #e666ff), color-stop(70%, #387bff), to(#32e6c8)); background: -webkit-linear-gradient(left, #ff7f66 0%, #e666ff 15%, #387bff 70%, #32e6c8 100%); background: -moz-linear-gradient(left, #ff7f66 0%, #e666ff 15%, #387bff 70%, #32e6c8 100%); background: linear-gradient(90deg, #ff7f66 0%, #e666ff 15%, #387bff 70%, #32e6c8 100%); -o-transition: width 0.06s ease-out; -moz-transition: width 0.06s ease-out; transition: width 0.06s ease-out; -webkit-transition: width 0.06s ease-out; } .linkBtn_9b861.arco-btn:not(.arco-btn-disabled):hover, .linkBtn_9b861.arco-btn:not(.arco-btn-disabled):active { color: #0c0d0e !important; background-color: transparent !important; } .linkBtn_9b861.arco-btn:not(.arco-btn-disabled):hover::after, .linkBtn_9b861.arco-btn:not(.arco-btn-disabled):active::after { width: 100%; -o-transition: width 0.06s ease-in; -moz-transition: width 0.06s ease-in; transition: width 0.06s ease-in; -webkit-transition: width 0.06s ease-in; } [data-popover-active="true"] .linkBtn_9b861.arco-btn:not(.arco-btn-disabled)::after { width: 100% !important; } .linkBtn_9b861.disableUnderline_9b861.arco-btn::after { display: none !important; } .iconBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: transparent !important; color: #0c0d0e; border: none !important; box-shadow: none !important; border-radius: 4px; padding: 8px; width: 36px; height: 36px; min-height: 36px; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .iconBtn_9b861.arco-btn:not(.arco-btn-disabled) img, .iconBtn_9b861.arco-btn:not(.arco-btn-disabled) svg { width: 20px; height: 20px; } .iconBtn_9b861.arco-btn:not(.arco-btn-disabled):hover, .iconBtn_9b861.arco-btn:not(.arco-btn-disabled):active { background: -webkit-linear-gradient(12.14deg, #f1f9ff -3.23%, #edf3ff 51.11%, #faf4ff 98.65%) !important; background: -moz-linear-gradient(12.14deg, #f1f9ff -3.23%, #edf3ff 51.11%, #faf4ff 98.65%) !important; background: linear-gradient(77.86deg, #f1f9ff -3.23%, #edf3ff 51.11%, #faf4ff 98.65%) !important; } .outlineBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: transparent; color: #0c0d0e; border: 1px solid #dde2e9 !important; box-shadow: none !important; height: 28px; padding: 0 12px; border-radius: 1000px; font-size: 13px; line-height: 20px; font-weight: 500; } .outlineBtn_9b861.arco-btn:not(.arco-btn-disabled):hover { background-color: #f6f8fa !important; border-color: #b8bfc8 !important; color: #0c0d0e !important; } .outlineBtn_9b861.arco-btn:not(.arco-btn-disabled):active { background-color: #e5e8eb !important; } .primaryBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: #0c0d0e; color: white; border: none !important; box-shadow: none !important; height: 28px; padding: 0 12px; border-radius: 1000px; font-size: 13px; line-height: 20px; font-weight: 500; } .primaryBtn_9b861.arco-btn:not(.arco-btn-disabled):hover { background-color: #303132 !important; color: white !important; } .primaryBtn_9b861.arco-btn:not(.arco-btn-disabled):active { background-color: #545658 !important; } .textBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0; height: auto !important; min-height: 24px; font-weight: 500; font-size: 14px; line-height: 20px; color: #0c0d0e; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; } .textBtn_9b861.arco-btn:not(.arco-btn-disabled) .icon { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 16px; height: 16px; line-height: 0; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .textBtn_9b861.arco-btn:not(.arco-btn-disabled):hover:not(:disabled) { color: #1664ff !important; } .textBtn_9b861.arco-btn:not(.arco-btn-disabled):hover:not(:disabled) .icon, .textBtn_9b861.arco-btn:not(.arco-btn-disabled):hover:not(:disabled) .iconMask_9b861 { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); } .textBtn_9b861.dark_9b861.arco-btn:not(.arco-btn-disabled) { color: #ffffff; } .textBtn_9b861.dark_9b861.arco-btn:not(.arco-btn-disabled):hover:not(:disabled) { color: #c5c5c5 !important; } .textBtn_9b861 .iconMask_9b861 { display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .gradientBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0px; padding: 0; height: auto; min-height: 24px; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; background: -webkit-gradient(linear, left top, right top, from(#3b91ff), color-stop(#0d5eff), color-stop(#c069ff), color-stop(#0d5eff), color-stop(#3b91ff), color-stop(#0d5eff), to(#c069ff)); background: -webkit-linear-gradient(left, #3b91ff, #0d5eff, #c069ff, #0d5eff, #3b91ff, #0d5eff, #c069ff); background: -moz-linear-gradient(left, #3b91ff, #0d5eff, #c069ff, #0d5eff, #3b91ff, #0d5eff, #c069ff); background: linear-gradient(to right, #3b91ff, #0d5eff, #c069ff, #0d5eff, #3b91ff, #0d5eff, #c069ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; background-size: 400% auto; animation: textShine_9b861 8s linear infinite reverse; } .featuredBtn_9b861.arco-btn:not(.arco-btn-disabled) { background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0px; padding: 0; height: auto; min-height: 24px; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 4px; position: relative; } .featuredBtn_9b861.arco-btn:not(.arco-btn-disabled) .featuredIcon_9b861 { width: 12px; height: 12px; -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; } .featuredBtn_9b861.arco-btn:not(.arco-btn-disabled) .featuredIcon_9b861::before { content: ""; position: absolute; inset: 0; background: -webkit-gradient(linear, left top, right top, from(#387bff), color-stop(#e566ff), color-stop(#ff7f66), color-stop(#e566ff), color-stop(#387bff), color-stop(#32e5c8), to(#387bff)); background: -webkit-linear-gradient(left, #387bff, #e566ff, #ff7f66, #e566ff, #387bff, #32e5c8, #387bff); background: -moz-linear-gradient(left, #387bff, #e566ff, #ff7f66, #e566ff, #387bff, #32e5c8, #387bff); background: linear-gradient(to right, #387bff, #e566ff, #ff7f66, #e566ff, #387bff, #32e5c8, #387bff); background-size: 1500% auto; background-position: 0% 50%; -webkit-mask: var(--icon-url) no-repeat center/contain; mask: var(--icon-url) no-repeat center/contain; } .featuredBtn_9b861.arco-btn:not(.arco-btn-disabled) .featuredText_9b861 { background: -webkit-gradient(linear, left top, right top, from(#387bff), color-stop(#e566ff), color-stop(#ff7f66), color-stop(#e566ff), color-stop(#387bff), color-stop(#32e5c8), color-stop(#387bff), to(#e566ff)); background: -webkit-linear-gradient(left, #387bff, #e566ff, #ff7f66, #e566ff, #387bff, #32e5c8, #387bff, #e566ff); background: -moz-linear-gradient(left, #387bff, #e566ff, #ff7f66, #e566ff, #387bff, #32e5c8, #387bff, #e566ff); background: linear-gradient(to right, #387bff, #e566ff, #ff7f66, #e566ff, #387bff, #32e5c8, #387bff, #e566ff); background-size: 750% auto; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .featuredBtn_9b861.arco-btn:not(.arco-btn-disabled):hover .featuredIcon_9b861::before, .featuredBtn_9b861.arco-btn:not(.arco-btn-disabled):hover .featuredText_9b861 { animation: textShine_9b861 4s linear infinite reverse; } @charset "UTF-8"; .affix_880d9 { position: relative; z-index: 999; width: 100vw; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .affix_880d9[data-hidden=true] { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .fixedAffix_880d9 { position: fixed; top: 0; left: 0; } .container_880d9 { position: relative; display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; height: 60px; padding: 0 24px; z-index: 999; background-color: #fff; -webkit-transition: box-shadow 0.2s ease, border-bottom 0.2s ease, -webkit-transform 0.2s ease; transition: box-shadow 0.2s ease, border-bottom 0.2s ease, -webkit-transform 0.2s ease; -o-transition: box-shadow 0.2s ease, border-bottom 0.2s ease, -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, box-shadow 0.2s ease, border-bottom 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, border-bottom 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, border-bottom 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .container_880d9 * { -moz-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 1280px) { .container_880d9 { padding: 0; } } .container_880d9[data-hidden=true] { box-shadow: none; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .container_880d9[data-scrolled=true] { box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(29, 33, 41, 0.1019607843); border-bottom: 1px solid #eaedf1; } .containerSearchActive_880d9 { overflow: visible; } .main_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; align-items: center; width: 100%; margin: 0 auto; } @media (min-width: 1280px) and (max-width: 1680px) { .main_880d9 { width: 1200px; } } @media (min-width: 1681px) { .main_880d9 { width: 1440px; } } @media (min-width: 1281px) { .mainFullWidth_880d9 { width: 100% !important; padding: var(--content-padding) !important; } } .mainRight_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; } .mobileRightIcons_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; } @media (min-width: 768px) { .mobileRightIcons_880d9 { gap: 0; } } @media (min-width: 1280px) { .mobileRightIcons_880d9 { display: none; } } .mobileUserAvatar_880d9 { display: none; } @media (max-width: 767px) { .mobileUserAvatar_880d9 { display: -webkit-flex; display: -moz-box; display: flex; } } .mainRightNav_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; } .mainLeft_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; overflow: visible; } .mainLeftSearchActive_880d9 { -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; overflow: visible; } .mainLeftSearchActive_880d9 .mainLeftNav_880d9 { display: none !important; } .featuredWrapper_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding-right: 20px; margin-right: 20px; border-right: 1px solid #dde2e9; } .mobileHeaderLeft_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; overflow: hidden; } .mobileBackButton_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; color: #1d2129; font-size: 20px; -webkit-flex-shrink: 0; flex-shrink: 0; } .mobileBackButton_880d9:active { opacity: 0.7; } .mobileTitle_880d9 { font-size: 16px; font-weight: 600; line-height: 20px; color: #1d2129; -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mainLeftNav_880d9 { display: none; overflow: hidden; } @media (min-width: 1280px) { .mainLeftNav_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } } .mainLeftNav_880d9 .arco-btn { padding: 0 12px; } .mainLeftScroll_880d9 > .arco-tabs-header-nav:before { display: none; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header { display: -webkit-flex; display: -moz-box; display: flex; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header > .arco-tabs-header-title { margin: 0; padding: 0; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header > .arco-tabs-header-title:not(:first-child) { margin-left: 24px; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header > .arco-tabs-header-title > .arco-tabs-header-title-text { padding: 0; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header > .arco-tabs-header-title > .arco-tabs-header-title-text:before { display: none; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header > .arco-tabs-header-ink { display: none; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-left-icon { height: 34px; background: -webkit-gradient(linear, left top, right top, color-stop(70%, white), to(transparent)); background: -webkit-linear-gradient(left, white 70%, transparent); background: -moz-linear-gradient(left, white 70%, transparent); background: linear-gradient(90deg, white 70%, transparent); display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; margin: 0; padding-left: 8px; padding-right: 8px; position: absolute; left: -8px; z-index: 5; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-left-icon > svg { stroke-width: 6px; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-right-icon { height: 30px; background: -webkit-gradient(linear, right top, left top, color-stop(70%, white), to(transparent)); background: -webkit-linear-gradient(right, white 70%, transparent); background: -moz-linear-gradient(right, white 70%, transparent); background: linear-gradient(270deg, white 70%, transparent); display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; margin: 0; padding-left: 8px; padding-right: 8px; position: absolute; right: -8px; z-index: 5; } .mainLeftScroll_880d9 > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-right-icon > svg { stroke-width: 6px; } .mainLeftScroll_880d9[data-has-featured=true] > .arco-tabs-header-nav > .arco-tabs-header-scroll > .arco-tabs-header-wrapper > .arco-tabs-header > .arco-tabs-header-title:nth-child(2) { margin-left: 0; } .mobileMenuIcon_880d9 { cursor: pointer; margin-top: 4px; display: block; } @media (min-width: 1280px) { .mobileMenuIcon_880d9 { display: none; } } .mobileMenuIcon_880d9 svg { font-size: 20px; } @media (min-width: 768px) { .mobileMenuIconSmDisplay_880d9 { display: none; } } .divider_880d9 { height: 18px; width: 1px; background-color: rgba(77, 77, 77, 0.4); margin: 0 4px; } .userAvatar_880d9 { cursor: pointer; width: 36px; height: 36px; border-radius: 50%; background-color: #ecf2ff; display: -webkit-flex; display: -moz-box; display: flex; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: #0055ff; font-weight: 600; font-size: 14px; } .dropdownMenu_880d9 .arco-dropdown-menu-inner { padding: 0 !important; } .dropdownMenu_880d9 .arco-dropdown-menu-item { border-radius: 0 !important; color: var(--color-text-1) !important; height: 36px !important; line-height: 36px !important; } .dropdownMenu_880d9 .arco-dropdown-menu-item:not(:last-child) { margin-bottom: 0 !important; } .dropdownMenu_880d9 .arco-dropdown-menu-item:hover, .dropdownMenu_880d9 .arco-dropdown-menu-pop-header:hover { color: var(--color-text-1) !important; background-color: #f1f3f5 !important; } .dropdownMenu_880d9 .arco-dropdown-menu-item:not(.arco-dropdown-menu-disabled):hover:before { display: none !important; } @media (max-width: 767px) { .pc-display-only_880d9 { display: none !important; } } @media (min-width: 768px) { .mobile-display-only_880d9 { display: none !important; } } /* ── Brand Dropdown (light theme) ── */ .brandDropdown_880d9 { position: relative; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; z-index: 999; padding: 10px 8px 18px 0; margin: -10px 0 -18px 0; } .brandLogoLink_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-decoration: none; margin-right: 8px; } .brandTrigger_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; } .brandTrigger_880d9:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.2); outline-offset: 4px; border-radius: 4px; } .brandCaret_880d9 { width: 12px; height: 12px; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, opacity 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; opacity: 0.56; -webkit-filter: invert(1); filter: invert(1); } .brandMenu_880d9 { position: absolute; top: -webkit-calc(100% - 10px); top: -moz-calc(100% - 10px); top: calc(100% - 10px); left: -10px; display: grid; gap: 4px; min-width: 388px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.0784313725); border-radius: 12px; background: #fff; box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.2784313725); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); -webkit-transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, visibility 0.2s ease, -o-transform 0.2s ease; -moz-transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, -moz-transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .brandMenuItem_880d9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; width: 100%; gap: 4px; min-height: 68px; padding: 12px 14px; border: 0; border-radius: 8px; background: none; text-decoration: none; text-align: left; cursor: pointer; -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .brandMenuItem_880d9:hover, .brandMenuItem_880d9:focus-visible { background: #f6f8fa; outline: none; } .brandMenuTitle_880d9 { font-size: 16px; line-height: 24px; font-weight: 400; color: #0c0d0e; } .brandMenuDesc_880d9 { font-size: 12px; line-height: 18px; color: #42464e; } .brandDropdownOpen_880d9 .brandMenu_880d9 { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .brandDropdownOpen_880d9 .brandCaret_880d9 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; } @media (max-width: 767px) { .brandMenu_880d9 { min-width: min(388px, 100vw - 48px); } } .button_e1b09 { cursor: pointer; } .buttonWithTitle_e1b09 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; cursor: pointer; } .buttonWithTitle_e1b09 img { width: 20px; height: 20px; } @media (min-width: 1024px) { .buttonWithTitle_e1b09 { padding: 0 16px; } } .popoverContent_e1b09 { padding-top: 20px; padding-bottom: 4px; } .footerPopoverContent_e1b09 { padding-bottom: 8px; } .dropdownMenu_e1b09 { min-width: 140px; max-height: 300px; background-color: #fff; border-radius: 4px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05), 0px 15px 35px -2px rgba(0, 0, 0, 0.05); overflow: auto; } .menuItem_e1b09 { height: 36px; line-height: 36px; padding: 0 16px; color: #1d2129; cursor: pointer; -webkit-transition: background-color 0.2s; -o-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .menuItem_e1b09:hover { background-color: #f6f8fa; } .footerButton_e1b09 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 18px; background: transparent; color: #fff; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; cursor: pointer; font-family: inherit; font-size: 14px; } .footerButton_e1b09:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); } .footerButton_e1b09 img { width: 20px; height: 20px; } .footerButton_e1b09 span { font-size: 14px; line-height: 20px; } .trigger_be366 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; cursor: pointer; } .popoverContainer_be366 { position: fixed; z-index: 1000; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; pointer-events: none; } .popoverContainerVisible_be366 { opacity: 1; pointer-events: auto; } .popoverContent_be366 { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-8px); -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out; -o-transition: -o-transform 0.15s ease-in-out; -moz-transition: transform 0.15s ease-in-out, -moz-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -moz-transform 0.15s ease-in-out, -o-transform 0.15s ease-in-out; } .popoverContainerVisible_be366 .popoverContent_be366 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .popoverContent_dcc2b { padding-top: 4px; } .dropdownMenu_dcc2b { min-width: 200px; background-color: #fff; border-radius: 4px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05), 0px 15px 35px -2px rgba(0, 0, 0, 0.05); padding: 6px 6px 22px 6px; } .menuItem_dcc2b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; height: 40px; padding: 0 16px; color: #1d2129; cursor: pointer; -webkit-transition: background-color 0.2s, color 0.2s; -o-transition: background-color 0.2s, color 0.2s; -moz-transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s; text-decoration: none; } .menuItem_dcc2b:hover { background-color: #f6f8fa; color: #1664ff; } .menuItem_dcc2b:hover .menuIcon_dcc2b svg path { fill: #1664ff; } .menuItem_dcc2b:hover .menuIcon_dcc2b img { -webkit-filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(2595%) hue-rotate(212deg) brightness(102%) contrast(104%); filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(2595%) hue-rotate(212deg) brightness(102%) contrast(104%); } .menuIcon_dcc2b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 20px; height: 20px; -webkit-flex-shrink: 0; flex-shrink: 0; } .menuIcon_dcc2b svg { width: 20px; height: 20px; } .menuIcon_dcc2b svg path { fill: #4e5969; -webkit-transition: fill 0.2s; -o-transition: fill 0.2s; -moz-transition: fill 0.2s; transition: fill 0.2s; } .menuIcon_dcc2b img { width: 20px; height: 20px; -webkit-transition: -webkit-filter 0.2s; transition: -webkit-filter 0.2s; -o-transition: filter 0.2s; -moz-transition: filter 0.2s; transition: filter 0.2s; transition: filter 0.2s, -webkit-filter 0.2s; } .menuText_dcc2b { -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; font-size: 14px; line-height: 20px; } .signOutButton_dcc2b { margin: 8px 12px 0; padding: 8px 12px; border: 1px solid #dde2e9; border-radius: 4px; background-color: #fff; color: #1d2129; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .signOutButton_dcc2b:hover { background-color: #f6f8fa; border-color: #c9cdd4; } @-webkit-keyframes pulse_cbaed { 0% { background-position: 200% 0; } 57.14% { background-position: -200% 0; } 100% { background-position: -200% 0; } } @-moz-keyframes pulse_cbaed { 0% { background-position: 200% 0; } 57.14% { background-position: -200% 0; } 100% { background-position: -200% 0; } } @keyframes pulse_cbaed { 0% { background-position: 200% 0; } 57.14% { background-position: -200% 0; } 100% { background-position: -200% 0; } } .skeletonContainer_cbaed { width: 100%; height: 64px; display: -webkit-flex; display: -moz-box; display: flex; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; background: #ffffff; } .pcView_cbaed { display: none; width: 100%; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; align-items: center; } @media (min-width: 1281px) { .pcView_cbaed { display: -webkit-flex; display: -moz-box; display: flex; } } @media (min-width: 1280px) and (max-width: 1680px) { .pcView_cbaed { width: 1200px; } } @media (min-width: 1681px) { .pcView_cbaed { width: 1440px; } } @media (min-width: 1281px) { .pcViewFullWidth_cbaed { width: 100% !important; padding: var(--content-padding) !important; } } .pcViewFullWidth_cbaed .leftSection_cbaed { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 20px; } .pcViewFullWidth_cbaed .rightSection_cbaed { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; } .pcViewFullWidth_cbaed .logo_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 120px; height: 20px; margin-right: 12px; } .pcViewFullWidth_cbaed .featured_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 110px; height: 16px; } .pcViewFullWidth_cbaed .divider_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 1px; height: 24px; border-radius: 0; } .pcViewFullWidth_cbaed .navTab_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 60px; height: 16px; } .pcViewFullWidth_cbaed .linkButton_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 60px; height: 16px; } .pcViewFullWidth_cbaed .signupButton_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 80px; height: 36px; border-radius: 1000px; } .tabletView_cbaed { display: none; width: 100%; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; align-items: center; } @media (min-width: 768px) and (max-width: 1280px) { .tabletView_cbaed { display: -webkit-flex; display: -moz-box; display: flex; } } .tabletView_cbaed .leftSection_cbaed { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .tabletView_cbaed .rightSection_cbaed { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; } .tabletView_cbaed .logo_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 120px; height: 20px; } .tabletView_cbaed .linkButton_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 60px; height: 16px; } .tabletView_cbaed .signupButton_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 80px; height: 36px; border-radius: 1000px; } .tabletView_cbaed .hamburger_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 20px; height: 20px; } .mobileView_cbaed { display: none; width: 100%; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; align-items: center; } @media (max-width: 767px) { .mobileView_cbaed { display: -webkit-flex; display: -moz-box; display: flex; } } .mobileView_cbaed .leftSection_cbaed { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .mobileView_cbaed .rightSection_cbaed { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; } .mobileView_cbaed .logo_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 120px; height: 20px; } .mobileView_cbaed .linkButton_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 60px; height: 16px; } .mobileView_cbaed .hamburger_cbaed { background: -webkit-gradient(linear, left top, right top, from(#f1f3f5), color-stop(40%, #f1f3f5), color-stop(50%, #ffffff), color-stop(60%, #f1f3f5), to(#f1f3f5)); background: -webkit-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: -moz-linear-gradient(left, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 40%, #ffffff 50%, #f1f3f5 60%, #f1f3f5 100%); background-size: 200% 100%; -webkit-animation: pulse_cbaed 7s ease-in-out infinite; -moz-animation: pulse_cbaed 7s ease-in-out infinite; animation: pulse_cbaed 7s ease-in-out infinite; border-radius: 4px; width: 20px; height: 20px; } @charset "UTF-8"; /* ─── Design tokens (from Figma node 120:12296) ─── */ /* Dark-theme counterparts (Figma only specs light; dark is the inverse) */ /* Active nav underline — brand gradient (from Figma Rectangle 1781) */ /* ── Breakpoints ── * Desktop ≥ 1024px : logo · label · full nav · Sign in + Sign up * Tablet 640–1023 : logo · label · Sign up + hamburger * Mobile < 640px : logo · hamburger */ .header_1a08b { position: fixed; inset: 0 0 auto; z-index: 100; height: 60px; background: #0c0d0e; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: "Inter", system-ui, sans-serif; -webkit-transition: margin-top 0.1s ease, -webkit-transform 0.2s ease; transition: margin-top 0.1s ease, -webkit-transform 0.2s ease; -o-transition: margin-top 0.1s ease, -o-transform 0.2s ease; -moz-transition: margin-top 0.1s ease, transform 0.2s ease, -moz-transform 0.2s ease; transition: margin-top 0.1s ease, transform 0.2s ease; transition: margin-top 0.1s ease, transform 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .header_1a08b[data-hidden=true] { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .navShell_1a08b { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; gap: 24px; } /* ── Left: brand logo · divider · label ── */ .leftGroup_1a08b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; } .brand_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .brandLogo_1a08b { height: 19px; width: auto; display: block; color: #ffffff; } .brandDivider_1a08b { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.16); -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; } .brandLabel_1a08b { color: #ffffff; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; } /* ── Center: nav (active item = bold + underline) ── * Absolutely centred in the bar so it stays in the true middle regardless of * the left/right group widths (per "Seedance 2.0 should be centered"). */ .mainNav_1a08b { position: absolute; left: 50%; top: 0; bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 24px; } .navLink_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; text-decoration: none; white-space: nowrap; } .navLinkText_1a08b { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; line-height: 20px; -webkit-transition: color 0.2s ease; -o-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .navLink_1a08b:hover .navLinkText_1a08b { color: #ffffff; } .navLinkActive_1a08b .navLinkText_1a08b { color: #ffffff; font-weight: 600; } .navLinkUnderline_1a08b { width: 100%; height: 1px; background: -webkit-gradient(linear, left top, right top, from(#ff7f66), color-stop(15%, #e566ff), color-stop(70%, #387bff), to(#32e5c8)); background: -webkit-linear-gradient(left, #ff7f66 0%, #e566ff 15%, #387bff 70%, #32e5c8 100%); background: -moz-linear-gradient(left, #ff7f66 0%, #e566ff 15%, #387bff 70%, #32e5c8 100%); background: linear-gradient(90deg, #ff7f66 0%, #e566ff 15%, #387bff 70%, #32e5c8 100%); } /* ── Right: actions ── */ .rightGroup_1a08b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; } .navActions_1a08b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; } .signInButton_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; -webkit-transition: color 0.2s ease; -o-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .signInButton_1a08b:hover { color: #ffffff; } .signUpButton_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 1000px; background: #ffffff; color: #0c0d0e; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .signUpButton_1a08b:hover { opacity: 0.85; } /* ── User avatar + dropdown ── */ .userAvatarWrapper_1a08b { position: relative; } .userAvatar_1a08b { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #ffffff; font-size: 15px; font-weight: 600; cursor: pointer; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-transform: uppercase; } .userDropdownMenu_1a08b { position: absolute; top: -webkit-calc(100% + 8px); top: -moz-calc(100% + 8px); top: calc(100% + 8px); right: 0; min-width: 240px; background: #ffffff; border: 1px solid #eaedf1; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); overflow: hidden; z-index: 20; } .userDropdownBody_1a08b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; padding: 8px; } .userDropdownHeader_1a08b { padding: 8px 12px 12px; border-bottom: 1px solid #eaedf1; margin-bottom: 4px; } .userDropdownName_1a08b { margin: 0; color: #0c0d0e; font-size: 14px; font-weight: 600; } .userDropdownEmail_1a08b { margin: 2px 0 0; color: #42464e; font-size: 12px; } .userDropdownItem_1a08b, .userDropdownSignout_1a08b { display: block; width: 100%; text-align: left; padding: 10px 12px; border: none; background: none; border-radius: 8px; color: #0c0d0e; font-size: 14px; text-decoration: none; cursor: pointer; } .userDropdownItem_1a08b:hover, .userDropdownSignout_1a08b:hover { background: #f4f6f9; } .userDropdownSignout_1a08b { color: #d0021b; } /* ── Mobile/tablet hamburger ── */ .mobileMenuButton_1a08b { display: none; background: none; border: none; cursor: pointer; color: #ffffff; padding: 4px; } .mobileOverlay_1a08b { position: fixed; inset: 60px 0 0; background: rgba(0, 0, 0, 0.5); z-index: 90; } .mobileMenu_1a08b { position: fixed; top: 60px; left: 0; right: 0; background: #0c0d0e; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 24px 24px; display: none; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 4px; z-index: 95; } .mobileMenu_1a08b.mobileMenuOpen_1a08b { display: -webkit-flex; display: -moz-box; display: flex; } .mobileMenuLink_1a08b, .mobileMenuSignoutLink_1a08b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 14px 0; border: none; background: none; color: rgba(255, 255, 255, 0.7); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mobileMenuLinkActive_1a08b { color: #ffffff; font-weight: 600; } .mobileMenuSignoutLink_1a08b { color: #ff6b6b; } .mobileMenuAuth_1a08b { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 12px; margin-top: 20px; } .mobileSignIn_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; height: 48px; border-radius: 1000px; border: 1px solid rgba(255, 255, 255, 0.24); background: none; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; } .mobileSignUp_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; height: 48px; border-radius: 1000px; background: #ffffff; color: #0c0d0e; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; } /* ── Light theme (Figma default) ── */ .light_1a08b { background: #ffffff; border-bottom: 1px solid #dde2e9; } .light_1a08b .brandDivider_1a08b { background: #dde2e9; } .light_1a08b .brandLabel_1a08b { color: #0c0d0e; } .light_1a08b .brandLogo_1a08b { color: #1c2633; } .light_1a08b .brandLogoMark_1a08b { fill: #006aff; } .light_1a08b .navLinkText_1a08b { color: #42464e; } .light_1a08b .navLink_1a08b:hover .navLinkText_1a08b, .light_1a08b .navLinkActive_1a08b .navLinkText_1a08b { color: #0c0d0e; } .light_1a08b .signInButton_1a08b { color: #42464e; } .light_1a08b .signInButton_1a08b:hover { color: #0c0d0e; } .light_1a08b .signUpButton_1a08b { background: #0c0d0e; color: #ffffff; } .light_1a08b .userAvatar_1a08b { border-color: #eaedf1; background: #f4f6f9; color: #0c0d0e; } .light_1a08b .mobileMenuButton_1a08b { color: #0c0d0e; } .light_1a08b .mobileMenu_1a08b { background: #ffffff; border-top: 1px solid #dde2e9; } .light_1a08b .mobileMenuLink_1a08b { color: #42464e; border-bottom: 1px solid #dde2e9; } .light_1a08b .mobileMenuLinkActive_1a08b { color: #0c0d0e; } .light_1a08b .mobileSignIn_1a08b { border-color: #dde2e9; color: #0c0d0e; } .light_1a08b .mobileSignUp_1a08b { background: #0c0d0e; color: #ffffff; } /* ── Tablet: 640–1023px — collapse nav + Sign in into the hamburger menu ── */ @media (max-width: 1023px) { .mainNav_1a08b { display: none; } .signInButton_1a08b { display: none; } .mobileMenuButton_1a08b { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; } } /* ── Mobile: <640px — collapse Sign up + avatar + brand label into the menu ── */ @media (max-width: 639px) { .signUpButton_1a08b { display: none; } .userAvatarWrapper_1a08b { display: none; } .brandDivider_1a08b, .brandLabel_1a08b { display: none; } .navShell_1a08b { padding: 0 16px; } } @charset "UTF-8"; /* ─── Design tokens (inlined for package self-containment) ─── */ .footerWrapper_083fb { position: relative; z-index: 6; background: #0c0d0e; /* Override shared Footer's .body width (1200px / 1440px) → 1408px cap */ } .footerWrapper_083fb [class*=body] { width: min(1408px, 100% - 32px) !important; } .footerWrapper_083fb [class*=container] { padding: 0; } .footerWrapper_083fb [class*=navListItem] { margin-bottom: 16px; } /* ── Back to top (inside the footer bottom bar via slot) ── */ .backToTop_083fb { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; width: -webkit-max-content; width: -moz-max-content; width: max-content; min-height: 36px; margin: 0; padding: 5px 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: #ffffff; font-size: 14px; font-weight: 500; line-height: 22px; white-space: nowrap; cursor: pointer; -webkit-transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease; -o-transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -o-transform 0.2s ease; -moz-transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -moz-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease; } .backToTop_083fb:hover, .backToTop_083fb:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.34); outline: none; } .backToTopIcon_083fb { display: block; width: 12px; height: 12px; } @charset "UTF-8"; /* ── Megatype carousel (above footer) ── */ .megatypeShell_ec6c0 { width: min(1408px, 100% - 32px); margin: 0 auto; padding: 80px 0 0; opacity: 0; -webkit-transform: translateY(72px); -moz-transform: translateY(72px); -o-transform: translateY(72px); transform: translateY(72px); } .revealed_ec6c0 { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 1s cubic-bezier(0.16, 1, 0.3, 1); -o-transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), -o-transform 1s cubic-bezier(0.16, 1, 0.3, 1); -moz-transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), -moz-transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 1s cubic-bezier(0.16, 1, 0.3, 1), -moz-transform 1s cubic-bezier(0.16, 1, 0.3, 1), -o-transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .megatype_ec6c0 { position: relative; display: grid; grid-template-columns: 1092fr 316fr; -webkit-align-items: stretch; -moz-box-align: stretch; align-items: stretch; gap: 0; width: 100%; aspect-ratio: 1408/234; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .megatypeWordmark_ec6c0 { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: left center; object-position: left center; } .megatypeIconViewport_ec6c0 { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; } .megatypeIconTrack_ec6c0 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; width: 100%; height: auto; will-change: transform; -webkit-transition: -webkit-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); transition: -webkit-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); -o-transition: -o-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); -moz-transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), -moz-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), -moz-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), -o-transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .megatypeIconTrackResetting_ec6c0 { -webkit-transition: none !important; -o-transition: none !important; -moz-transition: none !important; transition: none !important; } .megatypeIcon_ec6c0 { display: block; width: 100%; max-height: 100%; -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; -o-object-fit: contain; object-fit: contain; -o-object-position: left center; object-position: left center; } @media (max-width: 920px) { .megatypeShell_ec6c0 { padding: 48px 0 24px; } } .container_303ae { background: #0c0d0e; padding: 0 24px; } @media (min-width: 1024px) { .container_303ae { padding: 0 32px; } } .body_303ae { width: 100%; margin: 0 auto; padding-top: 64px; padding-bottom: 20px; } @media (min-width: 1280px) { .body_303ae { padding-bottom: 32px; } } @media (min-width: 1280px) and (max-width: 1680px) { .body_303ae { width: 1200px; } } @media (min-width: 1681px) { .body_303ae { width: 1440px; } } .mainContent_303ae { display: -webkit-flex; display: -moz-box; display: flex; gap: 80px; padding-bottom: 64px; } @media (min-width: 768px) { .mainContent_303ae { padding-bottom: 80px; } } @media (min-width: 1280px) { .mainContent_303ae { padding-bottom: 64px; border-bottom: 1px solid #42464e; } } @media (min-width: 1024px) and (max-width: 1680px) { .mainContent_303ae { gap: 64px; } } @media (min-width: 1681px) { .mainContent_303ae { gap: 120px; } } .leftSection_303ae { display: none; } @media (min-width: 1280px) { .leftSection_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 40px; min-width: 168px; } } .logo_303ae { width: 41px; height: auto; } @media (max-width: 1279px) { .logo_303ae { display: none; } } .socialIcons_303ae { display: -webkit-flex; display: -moz-box; display: flex; gap: 16px; } @media (max-width: 1279px) { .socialIcons_303ae { gap: 32px; } } .socialIcons_303ae a { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; -webkit-transition: background-color 0.2s; -o-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .socialIcons_303ae a:hover { background-color: rgba(255, 255, 255, 0.1); } .socialIcons_303ae a img { width: 20px; height: 20px; } .navColumns_303ae { -webkit-flex: 1 1; -moz-box-flex: 1; flex: 1 1; display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 768px) { .navColumns_303ae { grid-template-columns: repeat(2, 1fr); gap: 48px 120px; } } @media (min-width: 1024px) { .navColumns_303ae { grid-template-columns: repeat(4, 1fr); gap: 32px; } } @media (min-width: 1681px) { .navColumns_303ae { gap: 48px; } } .navList_303ae { page-break-inside: avoid; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } .navGroup_303ae { margin-bottom: 48px; } .navGroup_303ae:last-child { margin-bottom: 0; } .navListTitle_303ae { color: #fff; font-size: 16px; font-weight: 600; line-height: 20px; margin-bottom: 24px; } .navListItem_303ae { max-width: 240px; margin-bottom: 16px; } .navListItem_303ae:last-child { margin-bottom: 0; } .navListItem_303ae a { font-weight: 400; font-size: 14px; line-height: 20px; border-bottom: 1px solid transparent; -webkit-transition: 0.1s border-bottom linear; -o-transition: 0.1s border-bottom linear; -moz-transition: 0.1s border-bottom linear; transition: 0.1s border-bottom linear; text-decoration: none !important; color: rgba(255, 255, 255, 0.7) !important; display: inline-block; } .navListItem_303ae a:hover { color: #fff !important; border-bottom-color: rgba(255, 255, 255, 0.7); } .bottom_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; gap: 24px; margin-top: 24px; border-top: 1px solid #42464e; padding-top: 20px; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } @media (min-width: 1024px) { .bottom_303ae { -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; } } @media (min-width: 1280px) { .bottom_303ae { -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; padding-top: 28px; margin-top: 0; border-top: none; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-flex-direction: row; flex-direction: row; } } .bottomLeft_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 8px; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } @media (min-width: 768px) { .bottomLeft_303ae { -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-flow: row wrap; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } } @media (min-width: 1024px) { .bottomLeft_303ae { -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } } .bottomLeftSecondLine_303ae { display: -webkit-flex; display: -moz-box; display: flex; gap: 8px; -webkit-align-items: center; -moz-box-align: center; align-items: center; margin-top: 12px; } .bottomLeftText_303ae { font-size: 14px; line-height: 24px; color: #ffffff; } .bottomLeftText_303ae a { color: #ffffff !important; text-decoration: none !important; -webkit-transition: color 0.2s; -o-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s; } .bottomLeftText_303ae a:hover { color: rgba(255, 255, 255, 0.9) !important; } .copyrightDivider_303ae { width: 1px; height: 17px; background-color: #42464e; margin: 0 6px; } .bottomLeftDivider_303ae { font-size: 14px; color: rgba(255, 255, 255, 0.3); } .bottomCenter_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .bottomRightGroup_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 24px; margin-left: auto; } .bottomRight_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; -webkit-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 1279px) { .bottomRight_303ae { display: none; } } .mention_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 4px; } @media (min-width: 768px) { .mention_303ae { -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } } @media (min-width: 1024px) { .mention_303ae { -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } } .mentionText_303ae { font-size: 12px; line-height: 20px; font-weight: 400; color: #ffffff; } .mentionLink_303ae { line-height: 12px; display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .mentionLink_303ae img { height: 16px; width: auto; } .mobileFooter_303ae { display: -webkit-flex; display: -moz-box; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 64px; } @media (min-width: 768px) { .mobileFooter_303ae { -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; gap: 0; } } .socialIconsMobile_303ae { display: none; } @media (max-width: 1279px) { .socialIconsMobile_303ae { display: -webkit-flex; display: -moz-box; display: flex; gap: 32px; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .socialIconsMobile_303ae a { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; -webkit-transition: background-color 0.2s; -o-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .socialIconsMobile_303ae a:hover { background-color: rgba(255, 255, 255, 0.1); } .socialIconsMobile_303ae a img { width: 20px; height: 20px; } } .languageSwitcher_303ae { display: -webkit-flex; display: -moz-box; display: flex; } @media (max-width: 1279px) { .languageSwitcher_303ae { display: none; } } .languageSwitcherMobile_303ae { display: none; } @media (max-width: 1279px) { .languageSwitcherMobile_303ae { display: -webkit-flex; display: -moz-box; display: flex; } } .promoNotice_455b9 { position: fixed; right: 16px; bottom: 16px; z-index: 160; width: min(400px, 100vw - 48px); padding: 16px; border: 1px solid #2c3033; border-radius: 12px; background: rgba(33, 36, 38, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translate3d(0, 18px, 0) scale(0.97); -moz-transform: translate3d(0, 18px, 0) scale(0.97); transform: translate3d(0, 18px, 0) scale(0.97); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.46s ease, -webkit-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.46s ease, -webkit-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); -o-transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.46s ease, -o-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); -moz-transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.46s ease, -moz-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.46s ease; transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.46s ease, -webkit-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), -moz-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), -o-transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); } .isVisible_455b9 { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .header_455b9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; gap: 12px; } .eyebrow_455b9 { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: 0; } .closeButton_455b9 { -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.8); cursor: pointer; opacity: 0.92; } .closeButton_455b9:hover, .closeButton_455b9:focus-visible { opacity: 1; outline: none; } .body_455b9 { display: -webkit-flex; display: -moz-box; display: flex; gap: 16px; margin-top: 12px; } .copy_455b9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex: 0 0 200px; -moz-box-flex: 0; flex: 0 0 200px; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; gap: 16px; min-width: 0; } .text_455b9 { display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 8px; } .text_455b9 h3, .text_455b9 p { margin: 0; } .text_455b9 h3 { color: #ffffff; font-size: 18px; line-height: 26px; font-weight: 600; } .text_455b9 p { color: rgba(255, 255, 255, 0.8); font-size: 12px; line-height: 20px; font-weight: 500; } .cta_455b9 { display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; min-height: 32px; padding: 5px 16px; border-radius: 1000px; background: #ffffff; color: #0c0d0e; font-size: 13px; line-height: 22px; font-weight: 500; letter-spacing: 0.039px; white-space: nowrap; text-decoration: none; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .cta_455b9:hover { opacity: 0.85; } .visual_455b9 { position: relative; -webkit-flex: 1 1 auto; -moz-box-flex: 1; flex: 1 1 auto; min-width: 120px; border-radius: 8px; overflow: hidden; background: #1e2124; } .visual_455b9 img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .promoNotice_455b9 { right: 8px; bottom: 8px; width: -webkit-calc(100vw - 16px); width: -moz-calc(100vw - 16px); width: calc(100vw - 16px); } .body_455b9 { -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .copy_455b9 { -webkit-flex: none; -moz-box-flex: 0; flex: none; } .visual_455b9 { display: none; } } /*# sourceMappingURL=1150.c98f7b6f.css.map*/