body {
    padding-top: 40px;
}

.grading-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1230px;
    align-items: flex-start;
    gap: 60px;
    position: relative;
    margin: auto;
}

.grading-sheet .header {
    display: flex;
    flex-direction: column;
    height: 84px;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    background-color: transparent;
}

.grading-sheet .header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--modes-light);
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-color: var(--modes-dark);
}

.grading-sheet .text-wrapper {
    position: relative;
    width: fit-content;
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--body-medium-bold-font-family);
    font-weight: var(--body-medium-bold-font-weight);
    color: var(--modes-dark);
    font-size: var(--body-medium-bold-font-size);
    letter-spacing: var(--body-medium-bold-letter-spacing);
    line-height: var(--body-medium-bold-line-height);
    white-space: nowrap;
    font-style: var(--body-medium-bold-font-style);
}

.grading-sheet .div {
    position: relative;
    margin-bottom: 0;
    width: fit-content;
    margin-top: 0;
    font-family: var(--body-medium-light-font-family);
    font-weight: var(--body-medium-light-font-weight);
    color: #000000;
    /* font-size: var(--body-medium-light-font-size); */
    /* letter-spacing: var(--body-medium-light-letter-spacing); */
    /* line-height: var(--body-medium-light-line-height); */
    white-space: nowrap;
    /* font-style: var(--body-medium-light-font-style); */
}

.grading-sheet .summary {
    position: relative;
    width: fit-content;
    font-family: var(--body-XXS-regular-font-family);
    font-weight: var(--body-XXS-regular-font-weight);
    color: #000000;
    font-size: var(--body-XXS-regular-font-size);
    letter-spacing: var(--body-XXS-regular-letter-spacing);
    line-height: var(--body-XXS-regular-line-height);
    white-space: nowrap;
    font-style: var(--body-XXS-regular-font-style);
}

.grading-sheet .body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 32px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.grading-sheet .grade-overall {
    display: flex;
    flex-direction: column;
    width: 343px;
    align-items: flex-start;
    gap: 60px;
    position: relative;
}

.grading-sheet .frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    flex: 0 0 auto;
}

.grading-sheet .group {
    position: relative;
    width: 288.5px;
    height: 288.5px;
    background-image: url(./../img/circle_bg.svg);
    background-size: 100% 100%;
}

.grading-sheet .ellipse {
    position: absolute;
    width: 289px;
    height: 289px;
    top: 0;
    left: 0;
}

.grading-sheet .group-2 {
    position: absolute;
    width: 154px;
    height: 109px;
    top: 89px;
    left: 70px;
}

.grading-sheet .text-wrapper-2 {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--display-small-font-family);
    font-weight: var(--display-small-font-weight);
    color: #000000;
    font-size: var(--display-small-font-size);
    text-align: center;
    letter-spacing: var(--display-small-letter-spacing);
    line-height: var(--display-small-line-height);
    white-space: nowrap;
    font-style: var(--display-small-font-style);
}

.grading-sheet .text-wrapper-3 {
    position: absolute;
    top: 73px;
    left: 45px;
    font-family: var(--body-XS-regular-font-family);
    font-weight: var(--body-XS-regular-font-weight);
    color: var(--black);
    font-size: var(--body-XS-regular-font-size);
    letter-spacing: var(--body-XS-regular-letter-spacing);
    line-height: var(--body-XS-regular-line-height);
    white-space: nowrap;
    font-style: var(--body-XS-regular-font-style);
}

.grading-sheet .grading-note {
    position: relative;
    width: 343px;
    height: 116px;
    font-family: var(--body-XXS-regular-font-family);
    font-weight: var(--body-XXS-regular-font-weight);
    color: var(--secondary-600);
    font-size: var(--body-XXS-regular-font-size);
    letter-spacing: var(--body-XXS-regular-letter-spacing);
    line-height: var(--body-XXS-regular-line-height);
    font-style: var(--body-XXS-regular-font-style);
}

.grading-sheet .grade-detail {
    display: flex;
    flex-direction: initial;
    width: 816px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
}

.grading-sheet .grade-detail-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.grading-sheet .grade-rubric {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: relative;
    flex: 0 0 auto;
}

.grading-sheet .rubric-score-header {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
}

.grading-sheet .rubric-label {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--label-link-font-family);
    font-weight: var(--label-link-font-weight);
    color: var(--primary-400);
    font-size: var(--label-link-font-size);
    letter-spacing: var(--label-link-letter-spacing);
    line-height: var(--label-link-line-height);
    white-space: nowrap;
    font-style: var(--label-link-font-style);
}

.grading-sheet .rubric-score {
    position: relative;
    width: fit-content;
    font-family: var(--body-small-bold-font-family);
    font-weight: var(--body-small-bold-font-weight);
    color: var(--black);
    font-size: var(--body-small-bold-font-size);
    letter-spacing: var(--body-small-bold-letter-spacing);
    line-height: var(--body-small-bold-line-height);
    font-style: var(--body-small-bold-font-style);
}

.grading-sheet .rubric-note-wrapper {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    flex: 0 0 auto;
}

.grading-sheet .rubric-note {
    position: relative;
    width: 400px;
    height: 160px;
    margin-top: -1px;
    font-family: var(--body-XXS-regular-font-family);
    font-weight: var(--body-XXS-regular-font-weight);
    color: var(--grey-900);
    font-size: var(--body-XXS-regular-font-size);
    letter-spacing: var(--body-XXS-regular-letter-spacing);
    line-height: var(--body-XXS-regular-line-height);
    font-style: var(--body-XXS-regular-font-style);
}