@font-face {
    font-family: "IRANSharpMobile";
    src: url(/Assets/Fonts/Kurdish.ttf);
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url(/Assets/Fonts/Roboto.ttf);
    src: url('/Assets/Fonts/Roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html[dir=ltr] {
    --bs-font-sans-serif: Roboto, sans-serif !important;
}

html[dir=rtl] {
    --bs-font-sans-serif: "IRANSharpMobile", sans-serif !important;
}


html[dir=ltr] .q-order-1 {
    order: 2;
}

html[dir=ltr] .q-order-2 {
    order: 1;
}

html, body {
    height: 100%;
}

body {
    background-color: #D5D8ED;
}

.btn-language-item {
    background-color: white;
    color: #666666;
}

    .btn-language-item.active {
        background-color: #3159B2 !important;
        color: #ffffff !important;
    }

.btn-primary, .q-order-1 {
    background-color: #3159B2;
}

.text-primary {
    color: #3159B2;
}

.divider-secondary .divider-text:before, .divider-secondary .divider-text:after {
    border-top-color: #6D6E71 !important;
    border-top-width: 2px !important;
    border-radius: 50px;
}

.divider .divider-text i::before {
    font-size: 1.5rem;
}

.input-secondary {
    background-color: #F1F2F2 !important;
    border-color: #F1F2F2;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:focus:not(:placeholder-shown) ~ label, .form-floating > .form-select:focus ~ label, .form-floating > .form-select:focus:not(:placeholder-shown) ~ label {
    color: #fff;
}

.form-floating.form-floating-outline > .form-control:focus ~ label:after, .form-floating.form-floating-outline > .form-control:not(:placeholder-shown) ~ label:after, .form-floating.form-floating-outline > .form-select:focus ~ label:after, .form-floating.form-floating-outline > .form-select:not(:placeholder-shown) ~ label:after {
    top: 0.05rem;
    background-color: #3f51b5 !important;
}

.form-floating > .form-control:focus ~ label:after, .form-floating > .form-select ~ label:after {
    border-radius: 5px;
}

.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
    inset: 0.9555rem 0rem;
    height: 1.25rem;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label {
    color: #fff !important;
}

.form-check-input {
    margin-top: 0 !important;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0 !important;
}

    .validation-summary-errors ul li {
        background-color: #ff4d49;
        border-color: #ff4d49;
        padding: 5px;
        margin: 5px 0;
        border-radius: 5px;
        text-align: center;
        color: #fff
    }


.pure-material-progress-linear {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    height: 4px;
    color: #3F51B5;
    font-size: 16px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99999999;
}

    .pure-material-progress-linear::-webkit-progress-bar {
        background-color: transparent;
    }

    .pure-material-progress-linear::-webkit-progress-value {
        background-color: currentColor;
        transition: all 0.2s;
    }

    .pure-material-progress-linear::-moz-progress-bar {
        background-color: currentColor;
        transition: all 0.2s;
    }

    .pure-material-progress-linear::-ms-fill {
        border: none;
        background-color: currentColor;
        transition: all 0.2s;
    }

    .pure-material-progress-linear:indeterminate {
        background-size: 200% 100%;
        background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
        animation: pure-material-progress-linear 2s infinite linear;
    }

        .pure-material-progress-linear:indeterminate::-moz-progress-bar {
            background-color: transparent;
        }

        .pure-material-progress-linear:indeterminate::-ms-fill {
            animation-name: none;
        }

@keyframes pure-material-progress-linear {
    0% {
        background-size: 200% 100%;
        background-position: left -31.25% top 0%;
    }

    50% {
        background-size: 800% 100%;
        background-position: left -49% top 0%;
    }

    100% {
        background-size: 400% 100%;
        background-position: left -102% top 0%;
    }
}


@media (max-width: 575.98px) {
    body > .container {
        align-items: start !important;
        padding: 20px !important
    }
}

.q-sep {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(61, 99, 183, 1) 44.41%, rgba(255, 255, 255, 1) 100%);
    width: 3px;
    align-self: stretch;
    min-height: 60px;
}

.q-krg-logo {
    width: 90px;
}
.q-moe-logo {
    width: 110px;
    align-self: self-start;
        padding-right: 2px;

}

/* ── Cover image column ── */
.q-cover-col { overflow: hidden; }
.q-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

/* ── Divider ── */
.q-divider-ltr { direction: ltr; }

/* ── MOE text ── */
.q-moe-text { font-size: 1rem; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; }

/* ── Page shell ── */
body { padding-bottom: 50px; overflow-x: hidden; }

.responsive-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

@media (max-width: 767.98px) {
    .responsive-footer,
    .responsive-footer *,
    .responsive-footer a {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        padding-top: 0.3rem !important;
    }
}

.q-login-page {
    min-height: calc(100vh - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

#loginPageConfig { display: none; }

/* ── Canvas Math Captcha ── */
.captcha-row-q { display:flex; align-items:stretch; gap:0; margin-bottom:12px; width:100%; }
#captchaCanvasQ {
    flex:1; min-width:0; display:block; cursor:default;
    border:1px solid #D5D8ED; border-right:none;
    border-radius:6px 0 0 6px; background:#f0f0f0;
}
#captchaCanvasQ.shake { animation:captchaShakeQ .4s ease; outline:2px solid #e53935; }
.captcha-answer-q {
    width:48px; flex-shrink:0;
    border:1px solid #D5D8ED; border-left:none;
    border-radius:0 6px 6px 0; background:#fff;
    font-size:20px; font-weight:700; text-align:center;
    color:#222; outline:none; padding:0 4px;
    -moz-appearance:textfield;
    transition:border-color .2s, box-shadow .2s;
}
[dir=rtl] .captcha-answer-q { border-radius:6px 0 0 6px; border-left:1px solid #D5D8ED; border-right:none; }
.captcha-answer-q:focus { border-color:#3159B2; box-shadow:inset 0 0 0 2px rgba(49,89,178,.15); z-index:1; }
.captcha-answer-q::-webkit-inner-spin-button,
.captcha-answer-q::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.captcha-refresh-q {
    width:48px; flex-shrink:0;
    background:#D5D8ED; border:1px solid #D5D8ED; border-left:none;
    border-radius:0 6px 6px 0;
    color:#3159B2; font-size:16px; cursor:pointer;
    transition:background .2s, color .2s, border-color .2s;
    display:flex; align-items:center; justify-content:center;
}
.captcha-refresh-q:hover { background:#3159B2; color:#fff; border-color:#3159B2; }
.captcha-refresh-q.spin i { animation:captchaSpinQ .5s ease; }
[dir=rtl] #captchaCanvasQ    { border-radius:0 6px 6px 0; border-right:1px solid #D5D8ED; border-left:none; }
[dir=rtl] .captcha-answer-q  { border-right:none; }
[dir=rtl] .captcha-refresh-q { border-radius:6px 0 0 6px; border-right:none; border-left:1px solid #D5D8ED; }
@keyframes captchaSpinQ { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes captchaShakeQ {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-8px)} 40%{transform:translateX(8px)}
    60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}
}

/* ── Compress vertical rhythm on short/laptop viewports (height ≤ 700px) ── */
@media (max-height: 700px) and (min-width: 768px) {
    .q-login-page .mb-10  { margin-bottom: 0.75rem !important; }
    .q-login-page .pt-6   { padding-top:   0.5rem  !important; }
    .q-login-page .px-10  { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
    .q-login-page .mb-3   { margin-bottom: 0.6rem !important; }
    .q-login-page .mb-4   { margin-bottom: 0.6rem !important; }
    .q-login-page button[type=submit] { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; font-size: 1.05rem !important; }
    .q-login-page .py-4:not(button)  { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
    #captchaCanvasQ  { height: 50px !important; }
    .captcha-answer-q { min-height: 50px; height: 50px; }
    .captcha-refresh-q { height: 50px !important; }
    .q-login-page .q-order-1 img { height: 100%; object-fit: cover; }
}

/* ── Extra-short screens (height ≤ 580px) ── */
@media (max-height: 580px) and (min-width: 768px) {
    .q-login-page .mb-10  { margin-bottom: 0.4rem !important; }
    .q-login-page .pt-6   { padding-top:   0.2rem !important; }
    .q-login-page .px-10  { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .q-login-page .mb-3   { margin-bottom: 0.35rem !important; }
    .q-login-page .mb-4   { margin-bottom: 0.35rem !important; }
    .q-login-page button[type=submit] { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; font-size: 1rem !important; }
    .q-login-page .py-4:not(button)  { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
    #captchaCanvasQ  { height: 44px !important; }
    .captcha-answer-q { min-height: 44px; height: 44px; }
    .captcha-refresh-q { height: 44px !important; }
}