@font-face {
    font-family: 'Galey-Semi-Bold';
    src: url('assets/fonts/Prestigetype Studio - Galey Semi Bold.ttf');
}

@font-face {
    font-family: 'Galey-Extra-Light';
    src: url('assets/fonts/Prestigetype Studio - Galey Rounded Extra Light.ttf');
}

:root {
    --Primary: #008080;
    --Primary_rgba: 0, 128, 128;
    --Primary_Dark: #004646;
    --Primary_Dark_rgba: 0, 70, 70;
    --Secondary: #FF6F61;
    --Secondary_rgba: 255, 111, 97;
    --Tertiary: #98FF98;
    --Tertiary_rgba: 152, 255, 152;
    --Quaternary: #FFEB3B;
    --Quaternary_rgba: 255, 235, 59;
    --Gray-Shade100: #1A1A1A;
    --Gray-Shade100_rgba: 26, 26, 26;
    --Gray-Shade50: #A7A7A7;
    --Gray-Shade50_rgba: 167, 167, 167;
    --Success: #3AA942;
    --Warning: #ef7b45;
    --Danger: #D84727;
    --Error: #B20606;
    --Dark: #151514;
    --mud-typography-caption-family: Galey-Semi-Bold !important;
}

* {
    font-family: "Galey-Semi-Bold" !important;
}

main {
    background: url(assets/images/bg.png);
    background-repeat: repeat;
    background-size: contain;
}

h4, h5, h6,
.rounded-card-100 > div > .mud-typography {
    font-family: "Galey-Semi-Bold" !important;
}

.validation-message {
    color: var(--Secondary);
}

.button {
    padding: 15px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    min-width: 300px;
}

    .button.small {
        width: 100px;
    }

    .button.smaller {
        width: 100px;
        min-width: 100px !important;
    }

        .button.smaller.top-nav-bar {
            padding: 8px 12px;
            text-decoration: none;
            height: 40px;
        }

            .button.smaller.top-nav-bar:hover {
                text-decoration: none;
            }

.button-stretch {
    align-self: stretch;
}

.mud-progress-circular.mud-progress-large{
    height:100px !important;
    width:100px !important;
}

.button-primary {
    background: var(--Primary);
    color: white;
}

    .button-primary:hover {
        background: var(--Primary_Dark);
    }

.button-outlined-primary {
    border-color: var(--Primary);
    color: var(--Primary);
}

    .button-outlined-primary:hover {
        background: var(--Primary_Dark);
        color: white;
    }

.button-filled-danger {
    border-color: var(--Secondary);
    background: var(--Danger);
    color: white;
}

    .button-filled-danger:hover {
        background: var(--Quaternary);
        color: var(--Dark);
    }

.button-danger {
    background: var(--Secondary);
    color: white;
}

    .button-danger:hover {
        background: var(--Danger);
    }

.mud-alert-filled-warning {
    background: var(--Quaternary) !important;
    color: var(--Gray-Shade100);
}

.mud-alert-filled-error {
    background: var(--Secondary) !important;
}

.mud-chip-color-primary {
    background: var(--Primary) !important;
}

.mud-typography-body1 > .mud-breadcrumb-item {
    font-family: "Galey-Extra-Light" !important;
    font-weight: 600;
    font-size: 12pt;
}

.mud-border-primary {
    border-color: var(--Primary) !important;
}

.mud-overlay .mud-overlay-scrim.mud-overlay-light {
    background-color: rgba(255,255,255,0.85);
}

.mud-avatar-filled.mud-avatar-filled-primary {
    background: var(--Primary) !important;
}

h6 {
    font-size: 11pt !important;
}

.mud-primary-text, .mud-breadcrumb-item.mud-disabled > a {
    color: var(--Primary) !important;
}

.pic.announcement-head-pic {
    width: 100%;
    height: 225px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.rounded-card {
    border-radius: 18.4px;
}

.rounded-circle {
    border-radius: 100%;
}

.rounded-card.announcement {
    width: 450px;
    padding: 10px;
}

.rounded-card.course-details {
    width: 205px;
    height: 140px;
    padding: 10px;
    color: var(--Primary);
    background-repeat: no-repeat;
    background-position-x: 80px;
}

    .rounded-card.course-details.disabled {
        box-shadow: unset;
        background-color: rgba(var(--Gray-Shade100_rgba), 0.10);
        filter: grayscale(100%);
        opacity: 0.5;
    }

.rounded-card.score-podium-1,
.rounded-card.score-podium-2,
.rounded-card.score-podium-3,
.rounded-card.score-podium-4,
.rounded-card.score-podium-5 {
    width: 60px;
    padding: 10px;
    color: var(--Gray-Shade100);
    background-color: rgba(var(--Primary_rgba), 0.15);
}

.rounded-card.score-podium-1 {
    height: 220px;
    color: var(--Primary);
}

.rounded-card.score-podium-2 {
    height: 150px;
}

.rounded-card.score-podium-3 {
    height: 120px;
}

.rounded-card.score-podium-4 {
    height: 90px;
}

.rounded-card.score-podium-5 {
    height: 60px;
}

.rounded-card.course-details:hover {
    box-shadow: var(--mud-elevation-25);
    background-color: rgba(var(--Quaternary_rgba), 1);
}

.rounded-card.course-details.disabled:hover {
    box-shadow: unset;
    background-color: rgba(var(--Gray-Shade100_rgba), 0.10);
}

.rounded-card.course-details.sessions {
    background-image: url('assets/images/course-details-sessions.png');
}

.rounded-card.course-details.assignments {
    background-image: url('assets/images/course-details-assignments.png');
}

.rounded-card.course-details.exams {
    background-image: url('assets/images/course-details-exams.png');
}

.rounded-card.course-details.live-sessions {
    background-image: url('assets/images/course-details-live-sessions.png');
    background-position-x: 32px;
}

.rounded-card.course-details.announcements {
    background-image: url('assets/images/announcements.png');
    background-position-x: 92px;
}

.rounded-card-100 {
    padding: 5px 10px;
}

.rounded-card-small {
    border-radius: 92px;
    width: 80%;
}

.rounded-card-smaller {
    border-radius: 92px;
    width: 250px;
}

.rounded-card-100 {
    border-radius: 92px;
    width: 100%;
}

    .rounded-card-100 > div > .mud-typography-body2 {
        margin-top: 3px;
    }

.mud-tab {
    text-transform: none !important;
    color: black !important;
}

    .mud-tab.mud-tab-active {
        color: var(--Primary) !important;
    }

.bg-primary-10 {
    background-color: rgba(var(--Primary_rgba), 0.10);
}

.bg-primary-20 {
    background-color: rgba(var(--Primary_rgba), 0.20);
}

.bg-primary-25 {
    background-color: rgba(var(--Primary_rgba), 0.25);
}

.bg-primary-100 {
    background-color: var(--Primary);
    color: white;
}

.bg-secondary-20 {
    background-color: rgba(var(--Secondary_rgba), 0.20);
}

.bg-secondary-25 {
    background-color: rgba(var(--Secondary_rgba), 0.25);
}

.bg-secondary-100 {
    background-color: var(--Secondary);
}

.bg-tertiary-20 {
    background-color: rgba(var(--Tertiary_rgba), 0.30);
}

.bg-tertiary-25 {
    background-color: rgba(var(--Tertiary_rgba), 0.55);
}

.bg-tertiary-100 {
    background-color: var(--Tertiary);
}

.bg-quaternary-20 {
    background-color: rgba(var(--Quaternary_rgba), 0.30);
}

.bg-quaternary-25 {
    background-color: rgba(var(--Quaternary_rgba), 0.55);
}

.bg-quaternary-100 {
    background-color: var(--Quaternary);
}

.bg-grayshade100-20 {
    background-color: rgba(var(--Gray-Shade100_rgba), 0.10);
}

.bg-grayshade100-25 {
    background-color: rgba(var(--Gray-Shade100_rgba), 0.15);
}

.bg-grayshade100-100 {
    background-color: var(--Gray-Shade100);
    color: white;
}

.fg-grayshade50 {
    color: var(--Gray-Shade50);
}

.mud-paper-outlined.primary {
    border-color: rgba(var(--Primary_rgba), 0.45);
    border-width: 1px;
}

.mud-disabled {
    color: rgba(var(--Gray-Shade100_rgba), 0.35) !important;
}

.grow {
    animation: grow 1s ease-out forwards;
}

.fadein {
    opacity: 0;
    animation: fadeIn 0.7s ease-in forwards;
    animation-delay: 0.3s;
}

@keyframes grow {
    from {
        height: 80px;
        background-color: rgba(var(--Quaternary_rgba), 0);
    }

    to {
        height: 220px;
        background-color: var(--Quaternary);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}