.loader-container{background-color:#000;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:9999}.loader-container .loader{--R:30px;--g1:#514b82 96%,#0000;--g2:#eee 96%,#0000;animation:l30 2s linear infinite;aspect-ratio:1;border-radius:50%;display:grid;mask:linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0);width:calc(var(--R)*2)}.loader-container .loader:after,.loader-container .loader:before{background:radial-gradient(farthest-side,var(--g1)) calc(var(--R) + var(--R)*.866 - var(--R)) calc(var(--R) - var(--R)*.5 - var(--R)),radial-gradient(farthest-side,var(--g1)) calc(var(--R) + var(--R)*.866 - var(--R)) calc(var(--R) - var(--R)*.5 - var(--R)),radial-gradient(farthest-side,var(--g2)) calc(var(--R) + var(--R)*.5 - var(--R)) calc(var(--R) - var(--R)*.866 - var(--R)),radial-gradient(farthest-side,var(--g1)) 0 calc(var(--R)*-1),radial-gradient(farthest-side,var(--g2)) calc(var(--R) - var(--R)*.5 - var(--R)) calc(var(--R) - var(--R)*.866 - var(--R)),radial-gradient(farthest-side,var(--g1)) calc(var(--R) - var(--R)*.866 - var(--R)) calc(var(--R) - var(--R)*.5 - var(--R)),radial-gradient(farthest-side,var(--g2)) calc(var(--R)*-1) 0,radial-gradient(farthest-side,var(--g1)) calc(var(--R) - var(--R)*.866 - var(--R)) calc(var(--R) + var(--R)*.5 - var(--R));background-repeat:no-repeat;background-size:calc(var(--R)*2) calc(var(--R)*2);content:"";grid-area:1/1;width:50%}.loader-container .loader:after{transform:rotate(180deg);transform-origin:right}@keyframes l30{to{transform:rotate(-1turn)}}.color-switcher{align-items:start;display:flex;position:fixed;right:0;top:59%;transform:translate(200px,-50%);transition-duration:.5s;transition-timing-function:cubic-bezier(.785,.135,.15,.86);z-index:118}.color-switcher.opened{transform:translateY(-50%)}.color-switcher:dir(rtl){flex-direction:row-reverse;transform:translate(200px,-50%)}.color-switcher:dir(rtl).opened{transform:translateY(-50%)}.color-switcher .color-switcher-btn{align-items:center;background-color:rgb(var(--white));border:none;display:flex;height:50px;justify-content:center;transition-duration:.3s;width:50px}.color-switcher .color-switcher-btn svg{font-size:1.5rem}.color-switcher .pallets{background-color:rgb(var(--white));padding:20px;width:200px}.color-switcher .pallets .color-btn{border:none;border-radius:4px;height:40px;width:40px}.color-switcher .pallets .ltr,.color-switcher .pallets .rtl{border-radius:4px}.color-switcher .pallets .ltr.active,.color-switcher .pallets .rtl.active{background-color:rgb(var(--primary))}
