.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;-webkit-transition:stroke-dashoffset .5s ease 0s;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}.App{display:flex;justify-content:center;align-items:center;height:70vh}.container{display:grid;grid-template-columns:repeat(7,1fr);gap:30px;width:fit-content}.box{width:25px;height:25px;background-color:#ebedf0;border:1px solid #dcdcdc}.level-1{background-color:#c6e48b}.level-2{background-color:#7bc96f}.level-3{background-color:#239a3b}.level-4{background-color:#196127}.active{border:2px solid #000}