.grade-circle {
    width: min(40px, 100%);
    aspect-ratio: 1 / 1;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
}

.projection-bar {
    width: 100%;
    background-color: #e5e5e5;
    border-radius: 15px;
    height: 30px;
    line-height: 20px;
    position: relative;
}

@media (prefers-color-scheme: dark) {
    .projection-bar {
        background-color: rgb(55, 60, 62);
    }
}

.projection-bar-overlay {
    display: inline-block;
    position: absolute;
    background-color: #C7C7C7;
    color: #151515;
    padding: 1%;
    text-align: right;
    border-radius: 15px;
    padding-right: 10px;
    height: inherit;
    line-height: inherit;
    z-index: 9;
}

.projection-bar .remainder {
    display: inline-block;
    position: absolute;
    color: white;
    padding: 1%;
    text-align: right;
    height: inherit;
    padding-right: 10px;
    line-height: inherit;
    z-index: 9;
}