.abaixo {
    color: #DC2626;
}
.passado {
    color: #059669;
}
.parcial {
    color: #2563EB;
}
.incompleto {
    color: #D97706;
}

.loader-bg {
    animation: reveal 2s cubic-bezier(.24,.59,.44,.98) forwards;
}

.loader-bg-fast {
    animation: reveal 1s cubic-bezier(.24,.59,.44,.98) forwards;
}

@keyframes reveal {
    0% {display: block; opacity: 0; backdrop-filter: grayscale(0%)}
    100% {opacity: 100%; backdrop-filter: grayscale(90%)}
}

.loader {
    border: 8px solid #D1D5DB;
    border-bottom: 8px solid #3B82F6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 100%;
    width: 120px;
    height: 120px;
}

.loader-fast {
    border: 8px solid #D1D5DB;
    border-bottom: 8px solid #3B82F6;
    border-radius: 50%;
    animation: spin .75s linear infinite;
    opacity: 100%;
    width: 120px;
    height: 120px;
}


@keyframes spin {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}