/* SPINER */

.spinner {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin: 3rem auto;
}

.spinner::before,
.spinner:after {
    content: "";
    position: absolute;
    border-radius: inherit;
}

.spinner:before {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, var(--primary-lighter) 0%, var(--primary-darker) 100%);
    animation: spin 0.75s infinite linear;
}

.spinner:after {
    width: 75%;
    height: 75%;
    background-color: var(--background);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1300px) {
    html {
        font-size: 14px;
    }
}

@media screen and (max-width: 1100px) {
    html {
        font-size: 12px;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*******/

.sortIcon {
    width: 1.3rem;
    height: auto;
    float: right;
}

/************************ PASTEL COLOR ******************************/

.T1 {
    background-color: #e2efda;
}

.T2 {
    background-color: #ddebf7;
}

.T3 {
    background-color: #fff2cc;
}

.T4 {
    background-color: #ffccff;
}

.T5 {
    background-color: #ccffff;
}

.T6 {
    background-color: #ffcccc;
}

.T7 {
    background-color: #ccffcc;
}

.OD {
    background-color: #00b0f0;
}

.OT {
    background-color: #92d050;
}

.GE {
    background-color: #ffc000;
}

.AT {
    background-color: #ededed;
}