@import url("/core/components/calculate/lib/repeatable-fieldsets.css?v=1");

.final-grade-calculator {
    color: inherit;
}

.final-grade-calculator #course_information,
.final-grade-calculator #projection_input .repeatable-fieldset-item,
.final-grade-calculator #projection_results .repeatable-fieldset-item {
    display: grid;
    gap: .5rem;
}

.final-grade-calculator #course_information,
.final-grade-calculator #projection_results .repeatable-fieldset-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.final-grade-calculator #projection_input .repeatable-fieldset-item {
    grid-template-columns: minmax(0, 1fr);
}

.final-grade-calculator .calcfield,
.final-grade-calculator input,
.final-grade-calculator output {
    min-width: 0;
    width: 100%;
}

.final-grade-calculator #controls {
    display: block;
}

.final-grade-calculator #controls .mlfield_sample,
.final-grade-calculator #controls .mlfield_clear {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100%;
    flex: 0 0 auto !important;
}

.final-grade-calculator .final-grade-error {
    display: none;
    margin: .75rem 0;
    padding: .75rem;
    border-left: 4px solid #f47c20;
}

.final-grade-calculator .final-grade-error.is-visible {
    display: block;
}

.final-grade-calculator [aria-invalid="true"] {
    outline: 2px solid #b42318;
    outline-offset: 1px;
}

@media (max-width: 600px) {
    .final-grade-calculator #course_information,
    .final-grade-calculator #projection_results .repeatable-fieldset-item {
        grid-template-columns: 1fr;
    }
}