/* @media screen and (max-width: 2880px){
    #groups{
        font-size: 140%;
    }
    #learners{
        font-size: 140%;
    }
        
}
@media screen and (max-width: 1920px) {
    #groups{
        font-size: 75%;
    }
    #learners{
        font-size: 75%;
    }
    #student{
        font-size: 75%;
    }
}
@media screen and (max-width: 1570px) {
    #groups{
        font-size: 80%;
    }
    #learners{
        font-size: 80%;
    }
}
@media screen and (max-width: 1366px) {
    #groups{
        font-size: 70%;
    }
    #learners{
        font-size: 70%;
    }
    #student{
        font-size: 70%;
    }
} */


.black-divider {
    background-color: #3C5176 !important;
}

.altea-title {
    font-size: 33px !important;
    font-weight: 400 !important;
    position: relative !important;
    top: 0.499px !important;
    color: black !important;
}

.bg-altea {
    background: #EC5252 !important;
    color: white !important;
}

.border-altea {
    border-color: #EC5252 !important;
}

.labs-title {
    background: #EC5252 !important;
    border-radius: 3px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    color: white !important;
}

.btn-altea {
    background-color: rgb(230, 80, 82) !important;
    color: #fff !important;
}

.btn-altea.btn-style-6 {
    background-color: rgb(230, 80, 82) !important;
    color: #fff !important;
    box-shadow: 0 0.39rem 1.175rem 0.075rem rgba(230, 80, 82, 0.24) !important;
}

.btn-altea:hover {
    box-shadow: 0 12px 18.8px 1.2px rgba(230, 80, 82, 0.24) !important;
    color: #fff !important;
}

.mat-expansion-panel {
    box-shadow: none !important;
}

.mat-expansion-panel-content {
    display: block !important;
    font: inherit !important;
}

.mat-expansion-panel-body {
    padding: 0 !important;
}

app-groups-component ::-webkit-scrollbar-thumb {
    border-radius: 21px !important;
    background-color: #304777 !important;
}

app-groups-component .index__exercise::-webkit-scrollbar-thumb {
    border-radius: 21px !important;
    background-color: #ffffff !important;
}

app-groups-component-component ::-webkit-scrollbar {
    width: 8px !important;
}


app-group-admin-component::-webkit-scrollbar-thumb {
    border-radius: 21px !important;
    background-color: #304777 !important;
}

app-group-admin::-webkit-scrollbar {
    width: 8px !important;
}

.blue-header {
    background-color: #1C4360; 
    height: 3%; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 1.8vh;
    color: white;
}

.letterColor {
    color: grey
}

.blackLetterColor {
    color: black;
}

.color {
    background-color:#203341;
}

.cdk-overlay-container {
    z-index: 10000 !important;
}

.cdk-overlay-pane {
    z-index: 1100 !important;
}

.zzzzz {
    background-color: yellow;
}

.alert::before {
    border: none !important;
}

.alert {
    position: absolute;
    width: max-content !important;
    left: 0;
    right: 0 !important;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    border: none;
    z-index: 10;
}

.alert-success {
    color: #1b6a43 !important;
    background-color: #d6f5e6 !important;
    border-color: #c6f0dc !important;
}

.repUp {
    bottom: 100%;
}

.repDown {
    top: 100%;
}

.text-red {
    color: #ff5c5c;
    font-weight: 700;
}

.alert-success>* {
    color: #1b6a43 !important;
}

.fa-check:before {
    margin-top: auto;
    margin-bottom: auto;
}

app-students-admin ::-webkit-scrollbar {
    width: 8px !important;
}

app-students-admin ::-webkit-scrollbar-thumb {
    border-radius: 21px !important;
    background-color: #304777 !important;
}

app-crew-admin ::-webkit-scrollbar {
    width: 8px !important;
}

app-crew-admin ::-webkit-scrollbar-thumb {
    border-radius: 21px !important;
    background-color: #304777 !important;
}

.fa-user {
    display: flex !important;
}

.fa-user:before {
    margin-top: auto !important;
    margin-bottom: auto !important;
}