:root{--green:#20ff4d;--red:#ff2020;--yellow:#ffff4d;--orange:#ff6342;--blue:#1890ff;--gray:#b8b8b8;--green-bg:green;--red-bg:red;--yellow-bg:yellow;--orange-bg:orange;--blue-bg:#3e8afd;--gray-bg:gray}.rotate-ring{--n:3;--d:8deg;--b:8px;--c:var(--green);--a:rotate;--t:20s;--s:200rem;width:var(--s);height:var(--s);padding:10%;border-radius:50%;border:0 solid var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.rotate-ring:before{content:"";position:absolute;width:90%;height:90%;border-radius:50%;padding:var(--b);background:var(--c);-webkit-mask:linear-gradient(#0000 0 0) content-box,repeating-conic-gradient(from calc(var(--d)/2),#000 0 calc(360deg/var(--n) - var(--d)),#0000 0 calc(360deg/var(--n)));-webkit-mask-composite:source-in;mask:linear-gradient(#0000 0 0) content-box,repeating-conic-gradient(from calc(var(--d)/2),#000 0 calc(360deg/var(--n) - var(--d)),#0000 0 calc(360deg/var(--n)));mask-composite:intersect;animation:var(--a) var(--t) linear infinite}.rotate-ring:after{content:"";position:absolute;width:85%;height:85%;border-radius:50%;border:2px solid var(--c)}.radar{--c:var(--green);--s:200rem;background:-webkit-radial-gradient(center,rgba(32,255,77,0.3) 0,rgba(32,255,77,0) 75%),-webkit-repeating-radial-gradient(rgba(32,255,77,0) 5.8%,rgba(32,255,77,0) 18%,var(--c) 18.6%,rgba(32,255,77,0) 18.9%),-webkit-linear-gradient(90deg,rgba(32,255,77,0) 49.5%,#20ff4d 50%,rgba(32,255,77,0) 50.2%),-webkit-linear-gradient(0,rgba(32,255,77,0) 49.5%,#20ff4d 50%,rgba(32,255,77,0) 50.2%);width:var(--s);height:var(--s);position:relative;border-radius:50%;border:.2rem solid var(--c);overflow:hidden}.radar:after{content:' ';display:block;background-image:linear-gradient(44deg,rgba(0,255,51,0) 50%,#0f3 100%);width:50%;height:50%;position:absolute;top:0;left:0;animation:rotate 5s infinite;animation-timing-function:linear;transform-origin:bottom right;border-radius:100% 0 0 0}.gear-icon{--n:20;--d:8deg;--b:5px;--c:var(--green);--a:rotate;--t:20s;--s:100rem;width:var(--s);height:var(--s);border-radius:50%;border:2px solid var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.gear-icon:before{content:"";position:absolute;width:calc(100%+var(--b));height:calc(100%+var(--b));border-radius:50%;padding:var(--b);background:var(--c);-webkit-mask:linear-gradient(#0000 0 0) content-box,repeating-conic-gradient(from calc(var(--d)/2),#000 0 calc(360deg/var(--n) - var(--d)),#0000 0 calc(360deg/var(--n)));-webkit-mask-composite:source-in;mask:linear-gradient(#0000 0 0) content-box,repeating-conic-gradient(from calc(var(--d)/2),#000 0 calc(360deg/var(--n) - var(--d)),#0000 0 calc(360deg/var(--n)));mask-composite:intersect;animation:var(--a) var(--t) linear infinite}.gear-icon:after{content:'';display:block;position:absolute;width:85%;height:85%;border:3px dashed;border-color:inherit;border-radius:50%}.number-ring{--s:100rem;--c:var(--green);--b:calc(var(--s) / 8);width:var(--s);height:var(--s);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;font-size:calc(var(--s) / 4);color:var(--c)}.number-ring:before{content:'';position:absolute;width:calc(100% - var(--b) * 2);height:calc(100% - var(--b) * 2);border-radius:50%;border:var(--b) solid var(--c);box-shadow:0 0 20px var(--c)}.warn-ring{--c:var(--red);animation:blink 1s infinite}.percent-ring{--s:100rem;--c:var(--main-color);--v:100%;width:var(--s);height:var(--s);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.percent-ring:before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:conic-gradient(var(--c) var(--v),var(--disabled-color) var(--v));-webkit-mask:radial-gradient(circle at center,transparent 50%,black 50%,black 80%,transparent 80%);-webkit-mask-composite:source-in;mask:radial-gradient(circle at center,transparent 50%,black 50%,black 80%,transparent 80%);mask-composite:intersect}.degree-percent{--s:100rem;--c:var(--main-color);--v:100%;--b:10px;--n:50;--d:2deg;width:var(--s);height:var(--s);border:0 solid var(--c);border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.degree-percent:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;padding:var(--b);background-image:conic-gradient(transparent 0,var(--c) var(--v),var(--disabled-color) var(--v));-webkit-mask:linear-gradient(#0000 0 0) content-box,repeating-conic-gradient(from calc(var(--d)/2),#000 0 calc(360deg/var(--n) - var(--d)),#0000 0 calc(360deg/var(--n)));-webkit-mask-composite:source-in;mask:linear-gradient(#0000 0 0) content-box,repeating-conic-gradient(from calc(var(--d)/2),#000 0 calc(360deg/var(--n) - var(--d)),#0000 0 calc(360deg/var(--n)));mask-composite:intersect}.blink-light{--c:var(--green);--a:blink;--s:10rem;display:inline-block;min-height:var(--s);min-width:var(--s);border-radius:100%;background-color:var(--c);position:relative;box-shadow:0 0 20px var(--c);animation:var(--a) 1s infinite}.blink-light:before{content:'';position:absolute;top:80%;left:80%;transform:translate(-90%,-90%);width:80%;height:80%;border-radius:100%;background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,0),rgba(255,255,255,0))}.light{--c:var(--gray);--s:10rem;display:inline-block;min-height:var(--s);min-width:var(--s);border-radius:100%;background-color:var(--c);position:relative;box-shadow:0 0 20px var(--c)}.light:before{content:'';position:absolute;top:80%;left:80%;transform:translate(-90%,-90%);width:80%;height:80%;border-radius:100%;background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,0),rgba(255,255,255,0))}.blink{animation:blink 1s linear infinite}@keyframes blink{50%{opacity:.6}}@keyframes rotate{0{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes reverse-rotate{0{transform:rotate(0)}100%{transform:rotate(-360deg)}}