@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto.ttf) format('truetype-variations');
    font-weight: 100 1000;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Arabic';
    src: url('../fonts/NotoSansArabic-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('../fonts/NotoNaskhArabic-Variable.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --mud-typography-default-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-h1-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-h2-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-h3-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-h4-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-h5-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-h6-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-subtitle1-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-subtitle2-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-body1-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-body2-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-button-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-caption-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-overline-family: Roboto, 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif !important;
    --mud-typography-button-text-transform: none !important;
}

html[dir=ltr] .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 11px) scale(1);
}

html[dir=ltr] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
html[dir=ltr] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.7);
}

.mud-application-layout-rtl .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 1.35rem;
}

.mud-application-layout-rtl .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(-14px, 8px) scale(1);
}

.mud-application-layout-rtl .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(-14px, -9px) scale(0.7) !important;
}

.mud-application-layout-rtl .mud-ltr ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    left: 0;
    right: unset;
    transform: translate(14px, 8px) scale(1);
    transform-origin: top left;
}

.mud-application-layout-rtl .mud-shrink.mud-ltr ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input.mud-ltr:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform-origin: top left;
    transform: translate(14px, -9px) scale(0.7) !important;
}