.grade-table, .exam-score-table {
    /* border: 1px solid var(--tep-gray-800); */
    display: flex;
    border-radius: 4px;
}

.subject-container, .mock-container {
    background-color: var(--tep-gray-100);
    border-right: 1px solid var(--tep-gray-300);
    width: 241px;
}

.grade-container, .exam-score-container {
    display: flex;
    overflow-x: auto;
    background-color: var(--tep-gray-100);
    width: 100%;
}

.date-column {
    min-width: fit-content;
}

.exam-section-column {
    min-width: 100px;
}

.subject-row, .mock-row {
    padding: 0.25rem;
    height: 40px;
}

.subject, .mock {
    display: flex;
    align-items: center;
    width: 240px;
}

.header-cell, .subject-cell, .mock-cell {
    color: var(--tep-gray-800);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: -0.24px;
}

.mock-cell:not(:last-child) {
    border-bottom: 1px solid var(--tep-gray-300);
}

.exam-section-column:not(:last-child) {
    border-right: 1px solid var(--tep-gray-300);
}

.header-cell {
    display: flex;
    align-items: center;
    background-color: var(--tep-gray-200);
    height: 40px;
}

.exam-section-column .header-cell {
    padding-left: 8px;
    padding-right: 8px;
}

.exam-row-info {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 8px;
    padding-right: 8px;
}

.subject-cell, .mock-cell {
    background-color: var(--tep-gray-100);
}

.date-cell, .grade-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grade-cell, .score-cell {
    border-radius: 4px;
    color: white;
    font-size: 12px;
    margin: 0.25rem 0.25rem;
    height: calc(40px - 0.25rem);
    width: calc(60px - 0.25rem);
    transition: all 0.1s ease-in-out;
    background: linear-gradient(#0000, rgb(0 0 0/10%)) top/100% 800%;
}

.grade-cell[data-comment], .score-cell[data-comment] {
    border: 2px solid var(--tep-blue);
}

.grade-cell-content, .score-cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.grade-cell[data-bs-toggle], .score-cell[data-bs-toggle] {
    cursor: pointer;
}

.grade-cell[data-bs-toggle]:hover, .score-cell[data-bs-toggle]:hover {
    background-position: bottom;
}

.grade-cell.empty {
    color: var(--tep-gray-600);
    background-color: var(--tep-gray-300);
}

.stats-graph-button {
    border-radius: 4px;
    border: none;
    width: 30px;
    height: 30px;
    color: white;
    background: linear-gradient(#0000, rgb(0 0 0/10%)) top/100% 800%;
    background-color: var(--tep-blue);
    transition: all 0.1s ease-in-out;
}

.stats-graph-button:hover {
    background-position: bottom;
}

.stats-graph-button::before {
    font: var(--fa-font-regular);
    content: "\f643";
}