.donut-container{--tw-bg-opacity:1;background-color:rgb(255 0 102/var(--tw-bg-opacity,1));width:100px;height:100px;position:relative;overflow:hidden}.donut-container,.half-donut{border-radius:50%}.half-donut{--tw-rotate:45deg;width:100%;height:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));clip-path:polygon(100% 0,100% 100%,0 100%);position:absolute}.pie-wrapper{width:200px;height:100px;position:relative;overflow:hidden}.pie-wrapper:before{box-sizing:border-box;transform-origin:50% 0;z-index:1;--tw-content:"";content:var(--tw-content);border:50px solid #31a35340;border-bottom:50px;border-radius:300px 300px 0 0;width:200px;height:100px;position:absolute;top:0;left:0}.pie-wrapper-in{width:100px;height:50px;position:relative;overflow:hidden}.pie-wrapper-in:before{border:50px solid bg-primary;box-sizing:border-box;transform-origin:50% 0;z-index:1;--tw-content:"";content:var(--tw-content);border-bottom:50px;border-radius:300px 300px 0 0;width:100px;height:50px;position:absolute;top:0;left:0}