@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap";.material-symbols-outlined{font-family:"Material Symbols Outlined";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;font-size:1.125rem;line-height:1;display:inline-block;vertical-align:middle}.chart-container{position:relative;width:450px;height:450px;margin:0 auto}@media screen and (max-width: 991px){.chart-container{width:300px;height:300px}}.chart-container .donut-chart{position:absolute;top:0;left:0;width:100%;height:100%}.chart-container .donut-chart .label{position:absolute;top:50%;left:50%;pointer-events:none;transform:translate(-50%, -50%) rotate(var(--angle)) translate(165px);transform-origin:center;opacity:0}@media screen and (max-width: 991px){.chart-container .donut-chart .label{transform:translate(-50%, -50%) rotate(var(--angle)) translate(105px)}}.chart-container .donut-chart .label span{display:block;transform:rotate(calc(-1 * var(--angle)));color:#fff;font-size:13px;line-height:1.3;text-align:center;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media screen and (max-width: 991px){.chart-container .donut-chart .label span{font-size:11px}}.chart-container .donut-chart .label span b{display:block;font-weight:800;font-size:14px;margin-top:2px}.chart-container .donut-chart svg{width:100%;height:100%;overflow:visible}.chart-container .donut-chart .slice{transition:stroke-width .3s ease;cursor:pointer}.chart-container .donut-chart .slice:hover{stroke-width:200}.chart-container .donut-chart.animate .label{animation:appear .2s ease-in forwards;animation-delay:2s}.chart-container .donut-chart.animate .slice{animation:2s ease-in forwards}.chart-container .donut-chart.animate .slice-1{animation-name:drawSlice1}.chart-container .donut-chart.animate .slice-2{animation-name:drawSlice2}.chart-container .donut-chart.animate .slice-3{animation-name:drawSlice3}.chart-container .donut-chart.animate .slice-4{animation-name:drawSlice4}.chart-container .donut-chart.animate .slice-5{animation-name:drawSlice5}.chart-container .donut-chart.animate .slice-6{animation-name:drawSlice6}.chart-container .donut-chart.animate .slice-7{animation-name:drawSlice7}.chart-container .donut-chart .chart-center{position:absolute;top:50%;left:50%;width:40%;height:40%;background:#fff;border-radius:50%;transform:translate(-50%, -50%);box-shadow:0 0 10px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:center;align-items:center}.chart-container .donut-chart .chart-center .center-icon{font-size:36px;color:#333;font-variation-settings:"FILL" 1}.chart-container .donut-chart .chart-center .center-text{font-weight:600;font-size:14px;letter-spacing:1px;color:#555;margin-top:5px}.label span{display:block;transform:rotate(calc(-1 * var(--angle)));color:#fff;font-size:13px;line-height:1.3;text-align:center;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}.label span b{display:block;font-weight:800;font-size:14px;margin-top:2px}@keyframes drawSlice1{from{stroke-dashoffset:847.8}to{stroke-dashoffset:0}}@keyframes drawSlice2{from{stroke-dashoffset:610.2}to{stroke-dashoffset:-237.6}}@keyframes drawSlice3{from{stroke-dashoffset:457.6}to{stroke-dashoffset:-390.2}}@keyframes drawSlice4{from{stroke-dashoffset:305}to{stroke-dashoffset:-542.8}}@keyframes drawSlice5{from{stroke-dashoffset:228.7}to{stroke-dashoffset:-619.1}}@keyframes drawSlice6{from{stroke-dashoffset:152.4}to{stroke-dashoffset:-695.4}}@keyframes drawSlice7{from{stroke-dashoffset:76.1}to{stroke-dashoffset:-771.7}}@keyframes appear{from{opacity:0}to{opacity:1}}