* {
    --mud-default-borderradius: 12px !important;
    font-family: "Outfit", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
}

.mud-button-root {
    --mud-default-borderradius: 10px !important;
    padding-right: 12px;
    padding-left: 12px;
}

.mud-icon-button {
    --mud-default-borderradius: 10px !important;
}

.StudyMaterialCollectionRow :hover {
    background-color: var(--mud-palette-background) !important;

}

.slide-in-blurred-left {
    animation: slide-in-blurred-left .6s cubic-bezier(.23,1.000,.32,1.000) both
}

@keyframes slide-in-blurred-left {
    0% {
        transform: translateX(-1000px) scaleX(2.5) scaleY(.2);
        transform-origin: 100% 50%;
        filter: blur(40px);
        opacity: 0
    }

    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1
    }
}

.scale-in-center {
    animation: scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.slide-in-blurred-top {
    animation: slide-in-blurred-top .6s cubic-bezier(.23,1.000,.32,1.000) both
}

@keyframes slide-in-blurred-top {
    0% {
        transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        transform-origin: 50% 0;
        filter: blur(40px);
        opacity: 0
    }

    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1
    }
}

.fade-in {
    animation: fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}




/* Applies only when IsMobileScreen == true */
.app-mobile-font {
    font-size: 13px !important;
}

    /* Normal HTML text */
    .app-mobile-font p,
    .app-mobile-font span,
    .app-mobile-font div,
    .app-mobile-font label,
    .app-mobile-font input,
    .app-mobile-font textarea,
    .app-mobile-font button,
    .app-mobile-font select,
    .app-mobile-font a,
    .app-mobile-font li,
    .app-mobile-font td,
    .app-mobile-font th {
        font-size: 0.86rem !important;
    }

    /* MudBlazor normal text */
    .app-mobile-font .mud-typography-body1 {
        font-size: 0.86rem !important;
    }

    .app-mobile-font .mud-typography-body2 {
        font-size: 0.76rem !important;
    }

    .app-mobile-font .mud-typography-subtitle1 {
        font-size: 0.88rem !important;
    }

    .app-mobile-font .mud-typography-subtitle2 {
        font-size: 0.78rem !important;
    }

    .app-mobile-font .mud-button {
        font-size: 0.72rem !important;
    }

    .app-mobile-font .mud-button-label {
        font-size: 0.72rem !important;
    }

    .app-mobile-font .mud-typography-caption {
        font-size: 0.66rem !important;
    }

    .app-mobile-font .mud-typography-overline {
        font-size: 0.62rem !important;
    }

    /* MudBlazor headings */
    .app-mobile-font .mud-typography-h1 {
        font-size: 2.1rem !important;
    }

    .app-mobile-font .mud-typography-h2 {
        font-size: 1.75rem !important;
    }

    .app-mobile-font .mud-typography-h3 {
        font-size: 1.5rem !important;
    }

    .app-mobile-font .mud-typography-h4 {
        font-size: 1.28rem !important;
    }

    .app-mobile-font .mud-typography-h5 {
        font-size: 1.1rem !important;
    }

    .app-mobile-font .mud-typography-h6 {
        font-size: 0.95rem !important;
    }

    /* MudBlazor component text */
    .app-mobile-font .mud-button,
    .app-mobile-font .mud-input,
    .app-mobile-font .mud-input-control,
    .app-mobile-font .mud-table,
    .app-mobile-font .mud-list-item,
    .app-mobile-font .mud-chip,
    .app-mobile-font .mud-alert,
    .app-mobile-font .mud-snackbar,
    .app-mobile-font .mud-menu-item,
    .app-mobile-font .mud-tab {
        font-size: 0.75rem !important;
    }