[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)} body { font-family: Roboto, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif, Helvetica Neue, -apple-system, BlinkMacSystemFont, noto sans; } 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: #fcfdfe; --color-bg-3: #fafbfc; --color-bg-4: #f6f8fa; --color-bg-5: #f1f3f5; --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: #020814; --color-text-2: #41464f; --color-text-3: #80838a; --color-text-4: #ccced0; --color-fill-1: #ccced0; --color-fill-2: #80838a; --color-fill-3: #41464f; --color-fill-4: #020814; --color-border-1: var(--color-neutral-2); --color-border-2: #eaedf1; --color-border-3: #dde2e9; --color-border-4: var(--color-neutral-6); --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-black: #000000; --color-border: #333335; --color-bg-1: #131416; --color-bg-2: #232324; --color-bg-3: #2a2a2b; --color-bg-4: #313132; --color-bg-5: #373739; --color-bg-white: rgba(255, 255, 255, 0.001); --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: #42464e; --color-fill-2: #737a87; --color-fill-3: #9da3af; --color-fill-4: #c7ccd6; --color-border-1: #353535; --color-border-2: rgba(234, 237, 241, 0.05); --color-border-3: rgba(221, 226, 233, 0.15); --color-border-4: #6d6d6d; --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); } 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; --primary-1: 243, 247, 255; --primary-2: 235, 241, 255; --primary-3: 151, 188, 255; --primary-4: 110, 159, 255; --primary-5: 56, 123, 255; --primary-6: 22, 100, 255; --primary-7: 23, 89, 221; --primary-8: 17, 74, 185; --primary-9: 0, 36, 120; --primary-10: 0, 20, 77; --link-1: 232, 241, 255; --link-2: 201, 223, 255; --link-3: 150, 192, 255; --link-4: 99, 162, 255; --link-5: 48, 132, 255; --link-6: 0, 102, 252; --link-7: 0, 81, 201; --link-8: 0, 61, 150; --link-9: 0, 36, 120; --link-10: 0, 20, 77; --success-1: 238, 249, 241; --success-2: 225, 246, 230; --success-3: 124, 205, 148; --success-4: 92, 174, 119; --success-5: 48, 146, 86; --success-6: 42, 129, 75; --success-7: 35, 112, 64; --success-8: 28, 94, 53; --success-9: 7, 90, 47; --success-10: 0, 77, 40; --danger-1: 253, 245, 245; --danger-2: 255, 236, 236; --danger-3: 255, 163, 160; --danger-4: 255, 112, 109; --danger-5: 238, 63, 56; --danger-6: 215, 49, 42; --danger-7: 189, 41, 35; --danger-8: 159, 33, 28; --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: 254, 248, 235; --warning-2: 255, 243, 220; --warning-3: 249, 199, 109; --warning-4: 240, 165, 15; --warning-5: 208, 141, 6; --warning-6: 189, 126, 0; --warning-7: 153, 102, 0; --warning-8: 122, 82, 0; --warning-9: var(--orange-9); --warning-10: var(--orange-10); --color-text-5: #ffffff; --color-fill-5: #ffffff; --color-fill-6: #fcfdfe; --color-fill-7: #0c0d0e; --color-bg-6: rgba(24, 25, 27, 0.05); --color-bg-7: #f6f8fa; --color-bg-8: #ffffff; --color-bg-9: #ffffff; --color-grey-1: #f6f8fa; --color-grey-2: #f6f6f6; --color-grey-3: #eceded; --color-grey-4: #a0a2a7; --color-grey-5: #676b72; --color-grey-6: #41464f; --color-grey-7: #343840; --color-grey-8: #292a2e; --color-alpha-link1: #f4f7ff; --color-alpha-link2: #ebf1ff; --color-alpha-link3: #97bcff; --color-alpha-success1: #eef9f1; --color-alpha-success2: #e1f6e6; --color-alpha-success3: #7ccd94; --color-alpha-danger1: #fdf5f5; --color-alpha-danger2: #ffecec; --color-alpha-danger3: #ffa3a0; --color-alpha-warning1: #fef8eb; --color-alpha-warning2: #fff3dc; --color-alpha-warning3: #f9c76d; --base-grey-1: 236, 237, 237; --base-grey-2: 246, 246, 246; --base-grey-3: 236, 237, 237; --base-grey-4: 160, 162, 167; --base-grey-5: 103, 107, 114; --base-grey-6: 65, 70, 79; --base-grey-7: 52, 56, 64; --base-grey-8: 43, 48, 58; --base-grey-9: var(--arcoblue-9); --base-grey-10: var(--arcoblue-10); --oranged-1: 255, 242, 232; --oranged-2: 255, 234, 219; --oranged-3: 255, 179, 122; --oranged-4: 255, 131, 43; --oranged-5: 235, 98, 0; --oranged-6: 192, 79, 0; --oranged-7: 168, 68, 0; --oranged-8: 137, 60, 0; --oranged-9: 105, 33, 0; --oranged-10: 77, 22, 0; --teal-1: 238, 248, 255; --teal-2: 228, 243, 252; --teal-3: 128, 197, 224; --teal-4: 88, 168, 196; --teal-5: 56, 136, 163; --teal-6: 36, 117, 142; --teal-7: 7, 108, 133; --teal-8: 0, 90, 112; --teal-9: var(--arcoblue-9); --teal-10: var(--arcoblue-10); --violet-1: 250, 244, 255; --violet-2: 242, 234, 251; --violet-3: 193, 163, 237; --violet-4: 162, 133, 212; --violet-5: 135, 99, 184; --violet-6: 110, 76, 159; --violet-7: 96, 63, 142; --violet-8: 83, 45, 134; --violet-9: var(--arcoblue-9); --violet-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: 36, 46, 64; --primary-2: 39, 51, 76; --primary-3: 49, 80, 143; --primary-4: 22, 100, 255; --primary-5: 151, 188, 255; --primary-6: 102, 158, 255; --primary-7: 56, 123, 255; --primary-8: 147, 193, 255; --primary-9: 183, 221, 254; --primary-10: 232, 245, 255; --link-1: 0, 20, 77; --link-2: 4, 39, 120; --link-3: 10, 62, 164; --link-4: 19, 88, 208; --link-5: 30, 120, 252; --link-6: 38, 131, 253; --link-7: 86, 164, 253; --link-8: 135, 194, 254; --link-9: 183, 221, 254; --link-10: 232, 245, 255; --success-1: 0, 77, 40; --success-2: 8, 90, 47; --success-3: 20, 103, 57; --success-4: 35, 116, 69; --success-5: 54, 129, 82; --success-6: 81, 154, 106; --success-7: 112, 179, 133; --success-8: 149, 205, 165; --success-9: 190, 230, 200; --success-10: 236, 255, 240; --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: 83, 57, 0; --warning-2: 112, 75, 0; --warning-3: 149, 99, 0; --warning-4: 189, 126, 0; --warning-5: 249, 199, 109; --warning-6: 240, 165, 15; --warning-7: 208, 141, 6; --warning-8: 255, 243, 220; --warning-9: var(--orange-9); --warning-10: var(--orange-10); --color-text-5: #000000; --color-fill-5: #ffffff; --color-fill-6: rgba(0, 0, 0, 0.2); --color-fill-7: #ffffff; --color-bg-6: rgba(199, 204, 214, 0.1); --color-bg-7: #1a1b1e; --color-bg-8: #282a2f; --color-bg-9: #212327; --color-grey-1: rgba(246, 248, 250, 0.12); --color-grey-2: rgba(246, 248, 250, 0.2); --color-grey-3: #c7ccd6; --color-grey-4: #9da3af; --color-grey-5: #6e7687; --color-grey-6: #41464f; --color-grey-7: #343840; --color-grey-8: #2f3237; --color-alpha-link1: rgba(13, 55, 141, 0.5); --color-alpha-link2: rgba(17, 74, 185, 0.2); --color-alpha-link3: rgba(102, 158, 255, 0.3); --color-alpha-success1: rgba(7, 72, 36, 0.5); --color-alpha-success2: rgba(28, 94, 53, 0.2); --color-alpha-success3: rgba(92, 174, 119, 0.3); --color-alpha-danger1: rgba(126, 13, 7, 0.5); --color-alpha-danger2: rgba(159, 33, 28, 0.2); --color-alpha-danger3: rgba(255, 112, 109, 0.3); --color-alpha-warning1: rgba(83, 57, 0, 0.5); --color-alpha-warning2: rgba(112, 75, 0, 0.2); --color-alpha-warning3: rgba(240, 165, 15, 0.3); --base-grey-1: var(--arcoblue-1); --base-grey-2: 37, 37, 37; --base-grey-3: 42, 42, 42; --base-grey-4: 46, 46, 46; --base-grey-5: 51, 51, 51; --base-grey-6: 56, 56, 56; --base-grey-7: 45, 45, 45; --base-grey-8: 65, 65, 65; --base-grey-9: var(--arcoblue-9); --base-grey-10: var(--arcoblue-10); --oranged-1: 77, 22, 0; --oranged-2: 105, 35, 3; --oranged-3: 134, 52, 8; --oranged-4: 163, 72, 15; --oranged-5: 192, 93, 23; --oranged-6: 205, 110, 31; --oranged-7: 217, 143, 74; --oranged-8: 230, 177, 122; --oranged-9: 242, 212, 174; --oranged-10: 255, 245, 232; --teal-1: var(--arcoblue-1); --teal-2: var(--arcoblue-2); --teal-3: var(--arcoblue-3); --teal-4: var(--arcoblue-4); --teal-5: var(--arcoblue-5); --teal-6: var(--arcoblue-6); --teal-7: var(--arcoblue-7); --teal-8: var(--arcoblue-8); --teal-9: var(--arcoblue-9); --teal-10: var(--arcoblue-10); --violet-1: var(--arcoblue-1); --violet-2: var(--arcoblue-2); --violet-3: var(--arcoblue-3); --violet-4: var(--arcoblue-4); --violet-5: var(--arcoblue-5); --violet-6: var(--arcoblue-6); --violet-7: var(--arcoblue-7); --violet-8: var(--arcoblue-8); --violet-9: var(--arcoblue-9); --violet-10: var(--arcoblue-10); } /******** 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); } /*# sourceMappingURL=5611.10acd54d.css.map*/