@font-face{
    font-family:"Noto Naskh Arabic";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("../fonts/noto-naskh-arabic/NotoNaskhArabic-Regular.ttf") format("truetype");
}

@font-face{
    font-family:"Noto Naskh Arabic";
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url("../fonts/noto-naskh-arabic/NotoNaskhArabic-Medium.ttf") format("truetype");
}

:root{
    --app-font:"Noto Naskh Arabic", Tahoma, Arial, sans-serif;
    --site-header-height:85px;
    --page-bg:#f2f2f2;
    --box-bg:#ffffff;
    --text-color:#111111;
    --option-bg:#eeeeee;
    --button-bg:#eeeeee;
    --border-color:#dddddd;
    --muted-color:#777777;
    --menu-sheet-bg:#f7f7f8;
    --menu-card-bg:#ffffff;
    --menu-row-border:#e5e5e8;
    --menu-text:#111111;
    --menu-muted:#666666;
    --menu-circle-bg:#ffffff;
    --menu-icon-filter:brightness(0);
    --menu-wordmark-filter:none;
    --danger-bg:rgba(255, 91, 119, .11);
    --danger-border:#ff8fa2;
    --danger-text:#111111;
    --danger-icon-filter:brightness(0) saturate(100%) invert(19%) sepia(84%) saturate(2498%) hue-rotate(333deg) brightness(93%) contrast(91%);
}

:root.dark,
body.dark{
    --page-bg:#151515;
    --box-bg:#242424;
    --text-color:#f4f4f4;
    --option-bg:#333333;
    --button-bg:#3a3a3a;
    --border-color:#444444;
    --muted-color:#bbbbbb;
    --menu-sheet-bg:#191919;
    --menu-card-bg:#2b2b2d;
    --menu-row-border:#3a3a3d;
    --menu-text:#f4f4f4;
    --menu-muted:#a8a8ad;
    --menu-circle-bg:#1c1c20;
    --menu-icon-filter:brightness(0) invert(1);
    --menu-wordmark-filter:brightness(0) invert(1);
    --danger-bg:rgba(255, 91, 119, .14);
    --danger-border:#b83f58;
    --danger-text:#f4f4f4;
    --danger-icon-filter:brightness(0) saturate(100%) invert(74%) sepia(23%) saturate(1093%) hue-rotate(300deg) brightness(103%) contrast(101%);
}

html,
body{
    overscroll-behavior-y:contain;
}

html.bakloria-booting body{
    visibility:hidden;
}

html.bakloria-ready body{
    visibility:visible;
}

html.connection-status-hidden [data-connection-status]{
    display:none !important;
}


.site-header{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:16px 32px;
    background:var(--box-bg);
    border-bottom:1px solid var(--border-color);
    position:relative;
}

.developer-mode-badge{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    display:none;
    align-items:center;
    justify-content:center;
    padding:5px 13px 4px;
    border:1px solid color-mix(in srgb, #ef4444 48%, var(--border-color));
    border-radius:999px;
    background:color-mix(in srgb, #ef4444 12%, var(--box-bg));
    color:#ef4444;
    font-size:14px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
}

html.developer-mode .developer-mode-badge{
    display:inline-flex;
}

.brand{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
}

.brand img{
    width:52px;
    height:52px;
    display:block;
}

.menu-trigger{
    width:48px;
    height:48px;
    display:block;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    border:1px solid var(--border-color);
    border-radius:50%;
    background:var(--button-bg);
    cursor:pointer;
    position:relative;
}

.menu-trigger span{
    width:20px;
    height:2px;
    position:absolute;
    left:50%;
    top:50%;
    border-radius:999px;
    background:var(--text-color);
    display:block;
    margin:0;
    transform:translate(-50%, -50%);
}

.menu-trigger span:nth-of-type(1){
    transform:translate(-50%, -50%) translateY(-7px);
}

.menu-trigger span:nth-of-type(3){
    transform:translate(-50%, -50%) translateY(7px);
}

.app-menu-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(0, 0, 0, 0);
    pointer-events:none;
    transition:background 220ms ease;
    overscroll-behavior:contain;
}

.app-menu-overlay.open{
    background:rgba(0, 0, 0, 0.55);
    pointer-events:auto;
}

.app-menu-sheet{
    position:relative;
    width:min(100%, 430px);
    max-height:calc(100dvh - var(--site-header-height));
    overflow:auto;
    box-sizing:border-box;
    padding:28px 20px 54px;
    border-radius:36px 36px 0 0;
    background:var(--menu-sheet-bg);
    color:var(--menu-text);
    transform:translateY(105%);
    transition:transform 260ms ease;
    box-shadow:0 -18px 45px rgba(0, 0, 0, 0.38);
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-y;
    overscroll-behavior:contain;
    will-change:transform;
}

.app-menu-sheet::-webkit-scrollbar{
    width:0;
    height:0;
}

.app-menu-overlay.open .app-menu-sheet{
    transform:translateY(0);
}

.app-menu-sheet.is-dragging{
    transition:none;
    touch-action:none;
}

.menu-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.menu-circle{
    width:48px;
    height:48px;
    margin:0;
    padding:0;
    border:1px solid var(--menu-row-border);
    border-radius:50%;
    background:var(--menu-circle-bg);
    color:var(--menu-text);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.menu-circle-icon{
    width:28px;
    height:28px;
    color:var(--menu-text);
    display:block;
    filter:var(--menu-icon-filter);
}

.menu-profile{
    text-align:center;
    margin-bottom:22px;
}

.menu-logo-img{
    width:74px;
    height:74px;
    margin:0 auto 12px;
    display:block;
}

.menu-wordmark-img{
    width:178px;
    max-width:78%;
    height:auto;
    display:block;
    margin:0 auto 16px;
    filter:var(--menu-wordmark-filter);
}

.menu-profile h2{
    margin:0;
    font-size:32px;
    font-weight:500;
}

.menu-profile p{
    margin:6px 0 16px;
    color:var(--menu-muted);
    font-size:17px;
}

.connection-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:var(--menu-muted);
    font-size:15px;
    line-height:1.5;
}

.connection-status-icon{
    width:22px;
    height:22px;
    display:block;
    flex:0 0 auto;
}

.connection-status.is-loading .connection-status-icon{
    animation:bakloria-status-spin 900ms linear infinite;
}

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

.offline-mark{
    color:var(--menu-muted);
    font-size:15px;
}

.menu-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:18px;
    background:var(--menu-card-bg);
}

.menu-view{
    overflow:hidden;
    transition:height 420ms cubic-bezier(.22, 1, .36, 1);
}

.menu-view-inner{
    will-change:transform, opacity;
}

.menu-view-inner.is-forward{
    animation:bakloria-menu-slide-forward 360ms cubic-bezier(.22, 1, .36, 1) both;
}

.menu-view-inner.is-back{
    animation:bakloria-menu-slide-back 360ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes bakloria-menu-slide-forward{
    from{
        opacity:0;
        transform:translateX(-100%);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes bakloria-menu-slide-back{
    from{
        opacity:0;
        transform:translateX(100%);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

.menu-card.single{
    margin-top:0;
}

.menu-row{
    direction:ltr;
    height:58px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:42px 1fr 34px;
    align-items:center;
    gap:10px;
    padding:0 16px;
    color:var(--menu-text);
    text-decoration:none;
    border-bottom:0;
    position:relative;
    font-size:21px;
    width:100%;
    background:transparent;
    border-top:0;
    border-left:0;
    border-right:0;
    font-family:inherit;
    top:auto;
}

.menu-row:not(:last-child)::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:1px;
    background:var(--menu-row-border);
}

.menu-row:last-child{
    border-bottom:0;
}

.menu-label{
    direction:rtl;
    height:58px;
    position:relative;
    top:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:right;
    font-size:18px;
    line-height:58px;
    transform:translateY(1px);
}

.menu-icon{
    position:relative;
    top:auto;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--menu-text);
    line-height:1;
}

.menu-icon-img{
    width:26px;
    height:26px;
    display:block;
    color:var(--menu-text);
    filter:var(--menu-icon-filter);
}

.menu-arrow{
    position:relative;
    top:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:24px;
    height:58px;
    direction:ltr;
    color:#7d7d82;
    line-height:0;
}

.menu-arrow-icon{
    width:24px;
    height:24px;
    display:block;
    filter:var(--menu-icon-filter);
    opacity:.55;
}

.menu-arrow.blank{
    visibility:hidden;
}

.app-menu-overlay .menu-row,
.app-menu-overlay .menu-row *,
.app-menu-overlay .menu-label,
.app-menu-overlay .menu-icon,
.app-menu-overlay .menu-icon-img,
.app-menu-overlay .menu-arrow,
.app-menu-overlay .menu-arrow-icon{
    top:auto !important;
}

.app-menu-overlay .menu-row{
    height:58px !important;
    min-height:58px !important;
    align-items:center !important;
    line-height:1 !important;
}

.app-menu-overlay .menu-label{
    height:auto !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    line-height:1.15 !important;
    transform:translateY(3px) !important;
}

.app-menu-overlay .menu-icon,
.app-menu-overlay .menu-arrow{
    height:58px !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    transform:none !important;
}

.app-menu-overlay .menu-icon-img,
.app-menu-overlay .menu-arrow-icon{
    align-self:center !important;
    transform:none !important;
}

.app-menu-overlay .reset-progress{
    height:58px !important;
    min-height:58px !important;
    padding-block:0 !important;
}

.app-menu-overlay .menu-badge{
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    padding:0 9px !important;
    border-radius:999px !important;
    background:#ff3655 !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:500 !important;
    box-sizing:border-box !important;
    justify-self:start !important;
    top:auto !important;
    transform:none !important;
}

.app-menu-overlay .menu-badge-number{
    display:block !important;
    line-height:1 !important;
    transform:translateY(2px) !important;
}

.switch-row{
    cursor:pointer;
}

.switch{
    width:46px;
    height:26px;
    position:relative;
    border-radius:999px;
    background:#8c8c8f;
}

.switch span{
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ffffff;
    transition:left 180ms ease;
}

.switch.active{
    background:#28d857;
}

.switch.active span{
    left:23px;
}

.menu-note{
    margin:10px 6px 16px;
    color:var(--menu-muted);
    text-align:center;
    font-size:16px;
    line-height:1.7;
}

.reset-progress{
    height:58px;
    min-height:58px;
    border:0;
    outline:0;
    border-radius:0;
    margin:0;
    width:100%;
    padding:0 16px;
    background:transparent;
    color:var(--danger-text);
    overflow:visible;
}

.menu-card.reset-card{
    border:1px solid var(--danger-border);
    border-radius:22px;
    background:var(--danger-bg);
}

.reset-progress .menu-icon-img{
    filter:var(--danger-icon-filter);
}

.reset-confirm-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    z-index:140;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    box-sizing:border-box;
    background:rgba(0, 0, 0, .58);
}

.reset-confirm-overlay.open{
    display:grid;
    place-items:center;
}

.reset-confirm-modal{
    width:min(100%, 430px);
    box-sizing:border-box;
    padding:22px;
    border:1px solid var(--menu-row-border);
    border-radius:20px;
    background:var(--menu-sheet-bg);
    color:var(--menu-text);
    text-align:right;
    box-shadow:0 18px 48px rgba(0, 0, 0, .32);
}

.reset-confirm-modal h2{
    margin:0 0 10px;
    font-size:22px;
}

.reset-confirm-modal p{
    margin:0;
    color:var(--menu-muted);
    font-size:16px;
    line-height:1.8;
}

.reset-confirm-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:18px;
}

.reset-confirm-actions button{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:12px;
    border:1px solid var(--menu-row-border);
    font-family:inherit;
    font-size:17px;
    cursor:pointer;
}

.reset-confirm-actions button:disabled{
    cursor:wait;
    opacity:.72;
}

.reset-confirm-cancel{
    background:var(--button-bg);
    color:var(--text-color);
}

.reset-confirm-approve{
    background:var(--danger-bg);
    border-color:var(--danger-border) !important;
    color:var(--danger-text);
    font-weight:500;
}

.reset-confirm-approve.is-working::after{
    content:"";
    width:16px;
    height:16px;
    display:inline-block;
    margin-right:8px;
    border:2px solid currentColor;
    border-top-color:transparent;
    border-radius:50%;
    animation:bakloria-reset-spin 800ms linear infinite;
}

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

.menu-note.small{
    margin-top:16px;
    font-size:15px;
}

:root{
    --project-vertical-shift:2px;
}

.page-main{
    width:100%;
    box-sizing:border-box;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.site-footer{
    width:100%;
    box-sizing:border-box;
    padding:18px 20px;
    text-align:center;
    background:var(--box-bg);
    color:var(--muted-color);
    border-top:1px solid var(--border-color);
}

.site-footer-links{
    margin:0 auto 10px;
    padding:0;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    white-space:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
}

.site-footer-links::-webkit-scrollbar{
    display:none;
}

.site-footer-links a{
    color:var(--muted-color);
    text-decoration:none;
    font-size:15px;
    line-height:1.5;
}

.site-footer-links a:hover{
    color:var(--text-color);
}

.site-footer-copy{
    font-size:14px;
    line-height:1.6;
}

@media (max-width:700px){
    .site-header{
        padding:16px 24px;
    }

    .page-main{
        padding:24px;
    }
}

.global-shift-text,
button,
a[href],
.selection-button,
.home-stage-button,
.quiz-download-button,
.quiz-download-lesson-item,
.quiz-download-lesson-status,
.selection-kicker,
.selection-heading,
.selection-meta,
.selection-description,
.selection-title,
.menu-profile h2,
.menu-profile p,
.connection-status,
.offline-mark,
.site-footer-links a,
.site-footer-copy,
.home-profile-line,
.notifications-title,
.notifications-settings,
.reset-confirm-actions button,
.quiz-question,
.quiz-empty-detail,
.quiz-note,
.static-page-title,
.static-page-body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li{
    position:relative;
    top:var(--project-vertical-shift);
}

.home-stage-button,
.selection-button,
.stage-grade-button,
.stage-term-button,
.home-stage-button *,
.selection-button *,
.stage-grade-button *,
.stage-term-button *{
    top:auto;
}

.home-stage-icon,
.selection-icon,
.stage-grade-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    transform:none;
}

.home-stage-icon img,
.selection-icon img,
.selection-icon-shape,
.stage-grade-icon img,
.stage-term-button img,
.home-stage-arrow,
.selection-arrow,
.stage-grade-arrow{
    position:static;
    top:auto;
}

.home-stage-arrow,
.selection-arrow,
.stage-grade-arrow,
.stage-term-button img{
    transform:scaleX(-1) !important;
}

.stage-grade-parent[aria-expanded="true"] .stage-grade-arrow,
.stage-grade-button[aria-expanded="true"] .stage-grade-arrow{
    transform:scaleX(-1) rotate(-90deg) !important;
}

.home-stage-button,
.selection-button,
.stage-grade-button{
    padding-inline-start:11px !important;
    padding-inline-end:20px !important;
}

.stage-term-button{
    padding-inline-start:16px !important;
    padding-inline-end:16px !important;
}

.home-stage-icon,
.selection-icon,
.stage-grade-icon{
    align-self:center;
    flex:0 0 42px;
}

.home-stage-text,
.home-stage-text strong,
.selection-title,
.stage-grade-title{
    position:relative;
    top:auto;
    line-height:1;
    transform:translateY(2px);
}

.stage-term-button{
    line-height:1;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

.stage-term-button span,
.stage-term-button strong{
    position:relative;
    top:auto;
    line-height:1;
    transform:translateY(2px);
}

.home-stage-icon,
.stage-grade-icon{
    display:grid !important;
    place-items:center !important;
    transform:translateY(-2px) !important;
}

.selection-icon{
    display:grid !important;
    place-items:center !important;
    transform:translateY(0) !important;
}

.home-stage-icon img,
.selection-icon img,
.selection-icon-shape,
.stage-grade-icon img{
    align-self:center !important;
    justify-self:center !important;
    transform:translateY(0) !important;
}

.stage-term-button img{
    align-self:center !important;
    transform:scaleX(-1) translateY(-2px) !important;
}

@media (max-width:700px){
    .home-stage-button,
    .selection-button,
    .stage-grade-button{
        padding-inline-start:9px !important;
        padding-inline-end:16px !important;
    }
}

.home-stage-button,
.selection-button,
.stage-grade-button,
.stage-term-button{
    min-height:64px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    padding-block:0 !important;
    padding-inline-start:11px !important;
    padding-inline-end:20px !important;
    line-height:1.15 !important;
}

.home-stage-icon,
.selection-icon,
.stage-grade-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    flex:0 0 42px !important;
    display:grid !important;
    place-items:center !important;
    align-self:center !important;
    transform:none !important;
    line-height:1 !important;
}

.home-stage-icon img,
.selection-icon img,
.selection-icon-shape,
.stage-grade-icon img{
    width:24px !important;
    height:24px !important;
    align-self:center !important;
    justify-self:center !important;
    transform:none !important;
}

.home-stage-text,
.home-stage-text strong,
.selection-title,
.stage-grade-title,
.stage-term-button span,
.stage-term-button strong{
    top:auto !important;
    line-height:1.15 !important;
    transform:translateY(1px) !important;
}

.home-stage-arrow,
.selection-arrow,
.stage-grade-arrow,
.stage-term-button img{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    align-self:center !important;
    transform:scaleX(-1) !important;
}

.stage-term-button img{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
}

.stage-grade-parent[aria-expanded="true"] .stage-grade-arrow,
.stage-grade-button[aria-expanded="true"] .stage-grade-arrow{
    transform:scaleX(-1) rotate(-90deg) !important;
}

@media (max-width:700px){
    .home-stage-button,
    .selection-button,
    .stage-grade-button,
    .stage-term-button{
        min-height:60px !important;
        padding-inline-start:9px !important;
        padding-inline-end:16px !important;
    }
}