@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    src: url("/assets/compiled/fonts/rubik/rubik-v31-hebrew-regular.woff2") format("woff2");
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 600;
    font-display: block;
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    src: url("/assets/compiled/fonts/rubik/rubik-v31-hebrew-600.woff2") format("woff2");
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 700;
    font-display: block;
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    src: url("/assets/compiled/fonts/rubik/rubik-v31-hebrew-700.woff2") format("woff2");
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 800;
    font-display: block;
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    src: url("/assets/compiled/fonts/rubik/rubik-v31-hebrew-800.woff2") format("woff2");
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    src: url("/assets/compiled/fonts/rubik/rubik-v31-hebrew-900.woff2") format("woff2");
}

/* Arabic letters. The Rubik files carry Hebrew and Latin only, so Arabic used to fall
   back to Arial. Declared after the Rubik faces so it wins for Arabic code points;
   unicode-range means a page with no Arabic on it never downloads the file.
   One face per Rubik weight (400/600/700/800/900), never a single "100 900" range: the browser
   picks ONE set of faces whose weight descriptors match, and a range is a different set
   from "700", so the Rubik set won, this face was never used and Arabic bold rendered
   as regular Arial. The file is a variable font, so each face gets its own weight. */
@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/compiled/fonts/noto-sans-arabic/noto-sans-arabic-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url("/assets/compiled/fonts/noto-sans-arabic/noto-sans-arabic-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url("/assets/compiled/fonts/noto-sans-arabic/noto-sans-arabic-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 800;
    font-display: block;
    src: url("/assets/compiled/fonts/noto-sans-arabic/noto-sans-arabic-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "RubikLocal";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/assets/compiled/fonts/noto-sans-arabic/noto-sans-arabic-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "RubikFallback";
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    size-adjust: 102%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    src: local("Arial"), local("Helvetica"), local("Segoe UI");
}

.idf,
.idf:active {
    border-style: solid;
    border-radius: 4px
}

body {
    top: 0;
    margin: 0;
    letter-spacing: 0.01em;
    word-break: keep-all;
    overflow-wrap: normal;
    font-family: var(--app-font-family);
    font-synthesis: none;
    line-height: 1.5;
}

@supports (-webkit-touch-callout: none) {

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    button,
    input,
    textarea,
    select,
    td,
    th {
        font-kerning: none;
        font-variant-ligatures: none;
        font-optical-sizing: none;
        text-rendering: optimizeSpeed;
    }
}

a,
b,
div,
h1,
h2,
h3,
h4,
h5,
h6,
input,
p,
select,
span,
table,
td,
textarea,
th,
tr,
label,
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
button {
    font-family: var(--app-font-family);
    word-break: keep-all;
    overflow-wrap: normal;
    font-weight: 700 !important;
}


/* body,
a,
label,
button,
div,
input,
p,
select,
span,
table,
td,
textarea,
th,
tr {
    font-family: var(--app-body-font-family) !important;
}
*/


/* The theme sizes the sidebar with height: 100vh, which on iPhone is taller than the visible
   area, so the box ran past the bottom edge and the last menu item could not be scrolled into
   view. top: 0 + bottom: 0 (already set by the theme) end it at the visible bottom instead.
   #sidebar beats the dark build's html[data-bs-theme=dark] .sidebar-wrapper. */
#sidebar .sidebar-wrapper {
    height: auto;
}

.sidebar-wrapper .menu .sidebar-link {
    margin-inline-start: -0.5rem;
    margin-inline-end: -0.5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
    border-radius: 8px;
    gap: 0.25rem;
}

.sidebar-wrapper .menu .sidebar-link i {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link {
    background-color: var(--bs-sidebar-hover) !important;
}


.display-mobile-only,
.display-mobile-only-flex,
.grecaptcha-badge {
    display: none !important
}

.box-hover:hover {
    background-color: var(--bs-white-bg)
}

.digital-signature-title-color {
    color: var(--digital-signature-title-color) !important
}

#main_dev {
    transition: background-color, color !important
}

.form-select {
    display: inline-block;
    text-align: start !important
}

.form-check-input {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer
}

.checkbox-text {
    margin-inline-start: 10px;
    position: relative;
    top: 2px
}

.nav-card {
    background: var(--bs-white-bg);
    border-radius: 22px;
    padding: 20px 20px 24px;
    text-align: center;
    cursor: pointer;
    position: relative;
    border-bottom: 7px solid #c5caf6;
    box-shadow: 0 18px 40px rgba(30, 60, 140, .18);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.nav-title {
    margin-top: 6px;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 600;
    color: var(--bs-body-color);
}

/*
 * Inline-flow when the "חדש" pill is present inside a nav title.
 *
 * The previous flex layout treated a multi-line wrapped title as ONE
 * flex item and the pill as ANOTHER, which pushed the pill to the side
 * (visible as a stranded badge floating to the left when the school
 * name wrapped to two rows). Swapping to inline lets the pill flow
 * through the text:
 *   - 1-line title → pill sits at the end of the line, after the text.
 *   - 2-line title with room → pill lands on line 2 right after the text.
 *   - 2-line title that fills the row → pill wraps cleanly to line 3
 *     instead of jutting out beside line 2.
 *
 * `white-space: nowrap` already on the pill itself keeps "חדש" + the
 * SVG sparkles glued together as one unbreakable inline-block unit.
 */
.nav-title:has(.sidebar-new-pill) {
    display: block;
    line-height: 1.4;
}
.nav-title .sidebar-new-pill {
    vertical-align: middle;
}

.nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(30, 60, 140, .18);
}

.nav-card:active {
    transform: translateY(-1px);
}

.chat-new-badge {
    font-size: 0.65rem;
    vertical-align: middle;
    animation: chat-badge-pulse 2s ease-in-out infinite;
}

@keyframes chat-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.icon-wrapper {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.icon-wrapper i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #ffffff;
    line-height: 1;
}

.page-heading {
    margin-top: 30px !important;
    margin-bottom: 15px !important
}

/* The top bar (.topbar-menu) is 55px and out of the flow, and #main_div keeps only 2rem above the
   page (2.5rem on a phone): a page clears the bar through its own top space, the 30px of
   .page-heading above. A message box that opens a page (the "no access" / "module off" exits) has
   10px, and being position: relative it was painted over the bar (11/11/2026). It takes the
   heading's 30px. "Opens the page" = nothing shown between the header's last line
   (.levels_after_hr, inc/header.php) and the box, or the <center> / .page-content it is first in. */
.levels_after_hr ~ :is(.error_message, .info_message, .warning_message, .success_message, .alert):not(.levels_after_hr ~ :not(link, style, script, meta, noscript, template, input, .modal) ~ *),
.levels_after_hr ~ :is(center, .page-content):not(.levels_after_hr ~ :not(link, style, script, meta, noscript, template, input, .modal) ~ *) > :is(.error_message, .info_message, .warning_message, .success_message, .alert):first-child {
    margin-top: 30px;
}

.modal-footer {
    justify-content: flex-start
}

.ql-editor li:not(.ql-direction-rtl):before {
    margin: 0 !important
}

.dselect-wrapper {
    width: fit-content !important;
    display: inline-block !important
}

.table thead th {
    color: #38477e !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    padding: .75rem 1.5rem !important;
    text-transform: capitalize !important;
    background-color: var(--bs-table-th-bg);
    border-bottom: 2px solid #d2ddf1 !important;
    text-align: center
}

.ps__rail-y {
    display: block !important;
    position: fixed !important;
    opacity: 1 !important;
    inset-inline-start: -20px !important;
    visibility: hidden !important
}

.close,
.close_btn {
    right: 5px;
    top: 5px
}

.btn-big {
    min-width: 150px
}

* {
    box-sizing: border-box;
}


@media print {

    .col-md-10,
    .col-md-12,
    .col-md-2,
    .col-md-4,
    .col-md-6,
    .col-md-8 {
        width: 100% !important
    }

    .btn,
    .btn_accessibility,
    .dont_print,
    .page-heading,
    .sidebar-desktop,
    .topbar-menu,
    .button,
    .warning_message,
    .info_message,
    .error_message,
    .action-bar,
    .form-check-input,
    .status-summary,
    #pgChatToggle,
    #pgChatWidget,
    #NagishLiTrigger,
    .pg-loginas-bar {
        display: none !important
    }

    /* Keep half a gutter: a .row pulls out .75rem on each side, and on an RTL page Chrome then
       shifts the sheet left and cuts its left edge (PG-605) */
    #main_div {
        padding: 0 .75rem;
        margin: 0
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    /* .table thead th (24px a side) and .premium-table table tbody td (16px) are !important on
       screen and outrank .table th / .table td, so they set the padding on paper too and the
       teachers' release list ran off a portrait sheet (PG-652). The two extra selectors outrank
       them; at 4px 6px and 12px its widest row (class column, a 'חזר לביה"ס' badge) still fits
       a 10mm-margin A4 with room to spare. */
    .table th,
    .table td,
    .table thead th,
    .premium-table .table tbody td {
        border: 1px solid #dee2e6 !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
    }

    /* badges carry an inline 14px in some lists */
    .table .badge {
        font-size: 12px !important;
    }

    .table thead th {
        background-color: #f0f0f0 !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .card-header {
        border: none !important;
        background: none !important;
    }
}

@media screen and (max-width:1199px) {
    .modal-dialog {
        max-width: 100% !important;
        margin: 0px !important
    }

    .modal-dialog:not([class*="modal-fullscreen"]) {
        margin: var(--bs-modal-margin) 0 !important
    }

    /* The signed-in site's top bar (.topbar-menu, 55px) and a window drawn above everything: a tall
       window began 1.75rem from the top, half over the bar ("יצירת השאלה" on a phone, 11/11/2026).
       In #app the window keeps to the screen under the bar. The dialog is laid out in the .modal's
       content box, so centring, the scrolling dialog and a fullscreen one follow the padding by
       themselves; the cap on .modal-content gives the same 55px back. A computer keeps its windows. */
    #app .modal {
        padding-top: 55px;
    }

    #app .modal-dialog:not([class*="modal-fullscreen"]) .modal-content {
        max-height: calc(100vh - 55px - var(--bs-modal-margin) * 2) !important;
        max-height: calc(100dvh - 55px - var(--bs-modal-margin) * 2) !important;
    }

    .form-select {
        max-width: none !important;
    }

    .appointment_box,
    .col-md-10,
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .dselect-wrapper,
    .form-control,
    .mobile-full-size {
        width: 100% !important
    }

    .topbar-menu {
        width: 100% !important;
        background: linear-gradient(135deg, rgba(21, 43, 120, 0.92), rgba(18, 35, 95, 0.96)) !important;
        box-shadow: 0 4px 12px rgba(21, 43, 120, 0.3) !important;
        display: flex !important;
        align-items: center;
    }

    .topbar-menu .float_left,
    .topbar-menu .float_right {
        float: none !important;
    }

    .topbar-center-label {
        flex: 1;
        justify-content: center;
    }

    .topbar-menu .burger-btn i,
    .topbar-menu .topbar-center-label span,
    .topbar-menu .topbar-center-label a {
        color: #fff !important;
        text-decoration: none !important;
        -webkit-text-decoration: none !important;
    }

    .topbar-menu #header_name_avatar {
        border: 2px solid rgba(255, 255, 255, 0.5);
    }

    .topbar-menu #header_current_avatar_container {
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
    }

    .modal-content {
        max-width: 95% !important;
        min-height: auto !important;
        overflow-y: auto !important;
    }

    .float-right-mobile {
        float: right !important
    }

    .mobile-full-size {
        margin: 0 !important
    }

    .row_count_text {
        position: static !important;
        margin: 10px
    }

    .display-pc-only,
    .driver-popover-arrow {
        display: none !important
    }

    .offset-md-4 {
        margin-inline-start: 0 !important
    }

    .dselect-clear {
        padding: 0 !important;
        top: 1px;
        position: absolute;
        inset-inline-start: 5px
    }

    .form-select {
        /* Logical, so the caret side follows the build: in RTL the caret sits at the
           left (inline-end) and the .dselect-clear button at inset-inline-start. */
        padding-block: .375rem;
        padding-inline-start: 1.35rem;
        padding-inline-end: 1.75rem;
    }

    .form-control {
        display: block
    }

    .display-mobile-only,
    .dselect-wrapper {
        display: block !important
    }

    .display-mobile-only-flex {
        display: flex !important
    }

    .table>:not(caption)>*>* {
        padding: .6rem 0 !important;
        font-size: 14px !important
    }

    .table thead th {
        padding: .75rem .5rem !important
    }

    .table tbody td:first-child {
        padding-inline-start: 10px !important
    }

    .mobile-navbar {
        display: block
    }

    .btn {
        margin-top: 5px !important
    }

    .appointment_container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
    }

    .buttons-container {
        gap: 12px;
    }

    .approve-action-btn {
        width: 56px;
        height: 56px;
    }

    .approve-action-btn svg {
        width: 40px;
        height: 40px;
    }

    .approve_container {
        gap: 10px;
    }

    .arrow-circle {
        width: 56px;
        height: 56px;
    }

    .approve-message {
        width: 44px;
        height: 44px;
    }

    .error_message,
    .success_message,
    .info_message,
    .warning_message {
        font-family: var(--app-font-family);
        font-weight: 700;
        font-size: 16px;
        text-align: center;
    }

}

.appointment_box,
.col-md-4 .dselect {
    width: 100% !important
}

.error_message,
.info_message,
.success_message,
.warning_message {
    margin-top: 5px
}

.dselect-clear svg {
    width: .7rem;
    height: .7rem
}

.appointment_box {
    margin: 20px 0 0 !important
}

.modal-content {
    max-height: calc(100vh - var(--bs-modal-margin) * 2) !important;
    max-height: calc(100dvh - var(--bs-modal-margin) * 2) !important;
    padding: 20px !important
}

.idf {
    border-color: var(--main-color);
    background-image: url("/assets/compiled/images/idf.png");
    width: 272px;
    height: 37px;
    background-repeat: no-repeat;
    cursor: pointer
}

.idf:active {
    box-shadow: 0 5px #666;
    transform: translateY(4px)
}

@media screen and (min-width:1199px) {
    .margin-right-pc-only {
        margin-inline-start: 10px !important
    }

    .table thead th {
        font-size: 16px !important
    }

    .table td {
        font-size: 16px
    }

    .col-md-6 {
        width: 50%
    }

    .dselect-clear {
        padding: 0 !important;
        top: 5px;
        position: absolute;
        inset-inline-start: 5px
    }

    .form-select {
        /* Logical, so the caret side follows the build: in RTL the caret sits at the
           left (inline-end) and the .dselect-clear button at inset-inline-start. */
        padding-block: .375rem !important;
        padding-inline-start: 1.25rem !important;
        padding-inline-end: 3rem !important;
    }

    .appointment_container {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
    }
}

#load,
#search,
.mobile-navbar {
    display: none
}

.topbar-menu {
    background-color: var(--bs-white-bg);
    position: absolute;
    inset-inline-end: 0;
    height: 55px;
    box-shadow: 0 2px 4px rgba(0, 0, 20, .08), 0 1px 2px rgba(0, 0, 20, .08);
    padding: .625rem 1.5rem;
    width: calc(100% - 300px);
    text-align: end
}

.dropdown-menu {
    border: none;
    border-radius: .5rem;
    box-shadow: 0 0 1px rgba(60, 66, 87, .05), 0 3px 6px rgba(60, 66, 87, .1), 0 9px 24px rgba(60, 66, 87, .2);
    color: var(--bs-body-color);
    font-size: .875rem;
    line-height: 1.375rem;
    z-index: 9999999999
}

.dropdown-avatar {
    text-align: start !important;
    position: absolute !important;
    inset-inline-end: 0 !important;
    top: 10px !important
}

.error_message,
.success_message {
    margin-bottom: 1rem;
    font-family: var(--app-font-family);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.close_btn {
    position: absolute;
    width: 15px;
    height: 15px
}

.form-control,
input,
select {
    display: inline-block
}

.col-md-4 .form-control,
.col-md-4 input,
.col-md-4 select,
.modal-content textarea {
    max-width: none !important
}

@media screen and (max-width:800px) {
    .appointment_box {
        width: 100% !important
    }

    .w-100-mobile {
        width: 100% !important
    }
}

/* ==========================================================================
   .switcher — the on/off switch
   Markup (unchanged): <div class="switcher"><input type="checkbox" id="x"><label for="x"></label></div>
   The label is the track, ::before the knob. CSS only. No word inside: "פעיל" next to "לשלוח התראה?"
   or "לכבות התראה…" read as the opposite of the setting (Roi, 2026-10-02) — the fill and the knob say it.

   Read like a phone in Hebrew: off = pale track, knob on the right;
   on = navy fill, knob on the left with a check. The input is
   hidden visually, not with display:none, so Tab and Space reach it.

   TWIN: M/assets/css/theme_custom.css carries the same switch in the panel's
   purple; this one is recoloured to the public navy (#152b78 → #2e54b8, the
   premium-table pair). The two differ only in their tokens and the check
   colour inside the knob. Dark tokens live in app-dark-custom.css.
   Change one, change the other.

   Beats, in order:
     1. 0ms      the leading edge of the knob runs toward the new side (stretch)
     2. 0-380ms  the fill pours along the track behind it
     3. 90ms     the trailing edge follows, overshoots a hair and settles
     4. 230ms    the check pops inside the knob (the sa-pop curve)
   Press and hold: the knob widens, like a phone.
   ========================================================================== */

.switcher {
    --sw-a: #152b78;                      /* on, start of the fill (--main-color) */
    --sw-b: #2e54b8;                      /* on, end of the fill */
    --sw-off: #d6ddf0;                    /* off track: the same navy, deep enough to read as "off" on a white card */
    --sw-edge: rgba(21, 43, 120, .50);
    --sw-edge-hover: rgba(21, 43, 120, .75);
    --sw-halo: rgba(21, 43, 120, .10);
    --sw-knob: #ffffff;
    --sw-knob-shadow: 0 1px 3px rgba(26, 18, 80, .35), 0 0 0 1px rgba(26, 18, 80, .14);
    --sw-focus: 0 0 0 2px #fff, 0 0 0 4px #152b78;
    --sw-ease: cubic-bezier(.4, 0, .2, 1);
    --sw-spring: cubic-bezier(.3, 1.35, .5, 1);      /* the knob edges: a small settle */
    --sw-pop: cubic-bezier(.34, 1.56, .64, 1);       /* the check: same curve as sa-pop */
    --w: 52px;       /* a phone's proportion, now that no word sits in it */
    --h: 32px;
    --k: 24px;       /* knob */
    --p: 4px;        /* gap between knob and track */
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.switcher input[type=checkbox] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* track: a gradient twice as wide as the track; sliding it pours the fill in */
.switcher label {
    position: relative;
    display: block;
    width: var(--w);
    height: var(--h);
    border-radius: 999px;
    background-image: linear-gradient(to left, var(--sw-a) 0%, var(--sw-b) 45%, var(--sw-off) 55%, var(--sw-off) 100%);
    background-size: 220% 100%;
    background-position: 0% 0;
    box-shadow: inset 0 0 0 1.5px var(--sw-edge), 0 0 0 0 var(--sw-halo);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-position 380ms cubic-bezier(.45, 0, .2, 1),
        box-shadow 160ms var(--sw-ease);
}

.switcher input:checked + label {
    background-position: 100% 0;
    box-shadow: inset 0 0 0 1.5px transparent, 0 0 0 0 var(--sw-halo);
}

.switcher:hover input:not(:disabled) + label {
    box-shadow: inset 0 0 0 1.5px var(--sw-edge-hover), 0 0 0 5px var(--sw-halo);
}

.switcher:hover input:checked:not(:disabled) + label {
    box-shadow: inset 0 0 0 1.5px transparent, 0 0 0 5px var(--sw-halo);
}

.switcher input:focus-visible + label {
    box-shadow: var(--sw-focus);
}

.switcher input:disabled + label {
    opacity: .5;
    pointer-events: none;
}

/* knob: its two edges move separately — leading edge first, trailing edge 90ms
   later — which stretches it on the way and lets it land with a small settle */
.switcher label::before {
    content: "";
    position: absolute;
    top: var(--p);
    bottom: var(--p);
    inset-inline-start: var(--p);
    inset-inline-end: calc(100% - var(--p) - var(--k));
    border-radius: 999px;
    background-color: var(--sw-knob);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23152b78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0 0;
    box-shadow: var(--sw-knob-shadow);
    /* going OFF = moving toward start: start edge leads */
    transition:
        inset-inline-start 320ms var(--sw-spring) 0ms,
        inset-inline-end 320ms var(--sw-spring) 90ms,
        background-size 120ms var(--sw-ease) 0ms;
}

.switcher input:checked + label::before {
    inset-inline-start: calc(100% - var(--p) - var(--k));
    inset-inline-end: var(--p);
    background-size: calc(var(--k) * .58) calc(var(--k) * .58);
    /* going ON = moving toward end: end edge leads, then the check pops */
    transition:
        inset-inline-end 320ms var(--sw-spring) 0ms,
        inset-inline-start 320ms var(--sw-spring) 90ms,
        background-size 280ms var(--sw-pop) 230ms;
}

/* press and hold: the knob widens toward the side it is about to go */
.switcher label:active::before {
    inset-inline-end: calc(100% - var(--p) - var(--k) - var(--k) * .3);
    transition: inset-inline-end 140ms var(--sw-ease) 0ms;
}

.switcher input:checked + label:active::before {
    inset-inline-start: calc(100% - var(--p) - var(--k) - var(--k) * .3);
    inset-inline-end: var(--p);
    transition: inset-inline-start 140ms var(--sw-ease) 0ms;
}

@media (prefers-reduced-motion: reduce) {
    .switcher label,
    .switcher label::before { transition: none !important; }
}

/* The message boxes (success / error / warning / info) and the toast (showToast, assets/compiled/html/toast.html), PG-1108
   (11/11/2026). A box: the surface washed with its type's colour from the start side, where a round chip with the type's
   mark sits in a glow and pops in when the box shows. The toast: filled with the type's colour, a white chip whose mark
   draws itself. The colour and the mark tell the types apart;
   no stripe down a side (Roi on PG-925: "בלי הפס על השורה"). The marks are drawn here, not taken from the icon font, so a
   page that never loads it still shows them. The panel's twin is in M/assets/css/theme_custom.css (its own purple for
   info), the boxes again in general-pages.css (the login pages). --pg-dark-ink keeps each one's ink against
   app-dark-custom.css's grey for every text in dark mode. */
:root {
    --pgm-mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.7 3.7L17.5 8.5'/%3E%3C/svg%3E");
    --pgm-mark-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E");
    --pgm-mark-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Ccircle cx='12' cy='17.6' r='1.4' fill='white' stroke='none'/%3E%3C/svg%3E");
    --pgm-mark-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6.5'/%3E%3Ccircle cx='12' cy='6.8' r='1.4' fill='white' stroke='none'/%3E%3C/svg%3E");
}

/* The paint. --pgm-c1 / --pgm-c2: the chip's two shades; --pgm-tint: the
   wash and the halo behind the chip; --pgm-glow: the chip's glow and the box's shadow. */
.info_message,
.warning_message,
.error_message,
.success_message {
    --pgm-c1: #4a6cf0;
    --pgm-c2: #1f3a9e;
    --pgm-ink: #1b2f78;
    --pgm-tint: rgba(59, 91, 219, .15);
    --pgm-soft: rgba(59, 91, 219, .08);
    --pgm-line: rgba(59, 91, 219, .3);
    --pgm-glow: rgba(31, 58, 158, .5);
    --pgm-surface: var(--bs-white-bg, #fff);
    --pg-dark-ink: var(--pgm-ink);
    --pgm-mark: var(--pgm-mark-info);
    border: 1px solid var(--pgm-line) !important;
    text-wrap: balance;
    color: var(--pgm-ink) !important;
    background:
        radial-gradient(circle at calc(100% - 38px) 50%, var(--pgm-tint) 0, transparent 110px),
        linear-gradient(to left, var(--pgm-tint), var(--pgm-soft) 85%),
        var(--pgm-surface) !important;
    box-shadow: 0 22px 40px -28px var(--pgm-glow), 0 2px 8px rgba(15, 23, 42, .05);
}

/* English: the chip sits on the left, so the wash and the halo start there */
html[dir="ltr"] :is(.info_message, .warning_message, .error_message, .success_message) {
    background:
        radial-gradient(circle at 38px 50%, var(--pgm-tint) 0, transparent 110px),
        linear-gradient(to right, var(--pgm-tint), var(--pgm-soft) 85%),
        var(--pgm-surface) !important;
}

/* The boxes' size and place */
.info_message,
.warning_message,
.error_message,
.success_message {
    position: relative;
    width: 100%;
    max-width: 560px !important;
    margin: 10px auto 1rem;
    padding: 18px 74px;
    border-radius: 20px;
    font-family: var(--app-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    overflow: hidden;
}

.info_message::before,
.warning_message::before,
.error_message::before,
.success_message::before {
    content: "";
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    height: min(44px, calc(100% - 12px));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--pgm-mark) center / 50% 50% no-repeat, linear-gradient(145deg, var(--pgm-c1), var(--pgm-c2));
    box-shadow: 0 10px 20px -8px var(--pgm-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
    animation: pgmChipIn .55s cubic-bezier(.34, 1.56, .64, 1) .05s both;
}

@keyframes pgmChipIn {
    from { transform: translateY(-50%) scale(.3); opacity: 0; }
    to { transform: translateY(-50%) scale(1); opacity: 1; }
}

.success_message {
    --pgm-c1: #2fd39c;
    --pgm-c2: #079265;
    --pgm-ink: #065b3f;
    --pgm-tint: rgba(16, 185, 129, .17);
    --pgm-soft: rgba(16, 185, 129, .09);
    --pgm-line: rgba(16, 185, 129, .34);
    --pgm-glow: rgba(7, 146, 101, .55);
    --pgm-mark: var(--pgm-mark-check);
}

.error_message {
    --pgm-c1: #ff6680;
    --pgm-c2: #e11d48;
    --pgm-ink: #9f1239;
    --pgm-tint: rgba(244, 63, 94, .15);
    --pgm-soft: rgba(244, 63, 94, .08);
    --pgm-line: rgba(244, 63, 94, .32);
    --pgm-glow: rgba(225, 29, 72, .5);
    --pgm-mark: var(--pgm-mark-x);
}

.warning_message {
    --pgm-c1: #ffc043;
    --pgm-c2: #f07800;
    --pgm-ink: #8a4300;
    --pgm-tint: rgba(245, 158, 11, .2);
    --pgm-soft: rgba(245, 158, 11, .11);
    --pgm-line: rgba(240, 140, 0, .4);
    --pgm-glow: rgba(240, 120, 0, .55);
    --pgm-mark: var(--pgm-mark-bang);
}

/* Dark: the surface follows the theme (--bs-white-bg); the ink lightens and the wash grows */
html[data-bs-theme=dark] .info_message {
    --pgm-ink: #cdd8ff;
    --pgm-tint: rgba(74, 108, 240, .26);
    --pgm-soft: rgba(74, 108, 240, .12);
    --pgm-line: rgba(74, 108, 240, .45);
}

html[data-bs-theme=dark] .success_message {
    --pgm-ink: #a7f3d0;
    --pgm-tint: rgba(47, 211, 156, .22);
    --pgm-soft: rgba(47, 211, 156, .1);
    --pgm-line: rgba(47, 211, 156, .4);
}

html[data-bs-theme=dark] .error_message {
    --pgm-ink: #fecdd3;
    --pgm-tint: rgba(255, 102, 128, .22);
    --pgm-soft: rgba(255, 102, 128, .1);
    --pgm-line: rgba(255, 102, 128, .42);
}

html[data-bs-theme=dark] .warning_message {
    --pgm-ink: #fde68a;
    --pgm-tint: rgba(255, 192, 67, .2);
    --pgm-soft: rgba(255, 192, 67, .1);
    --pgm-line: rgba(255, 192, 67, .4);
}

html[data-bs-theme=dark] :is(.info_message, .warning_message, .error_message, .success_message) {
    box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .9);
}

/* A phone: the text takes the room beside the chip instead of keeping a chip's width free on the other side too */
@media (max-width: 575.98px) {
    .info_message,
    .warning_message,
    .error_message,
    .success_message {
        padding: 16px 18px;
        padding-inline-start: 72px;
    }
}

/* The toast. It keeps .bg-<type>: the support chat's "מה הפונה ראה" (chat/assets/support_seen.js) watches
   .toast.bg-danger, and Bootstrap's fill is painted over here. --pgm-tink: the text and the X; --pgm-gl: the mark in the
   white chip. A warning is amber with dark text: white on amber cannot be read. */
#toastContainer .toast.pg-toast {
    --pgm-c1: #4a6cf0;
    --pgm-c2: #1f3a9e;
    --pgm-glow: rgba(31, 58, 158, .55);
    --pgm-tink: #fff;
    --pg-dark-ink: var(--pgm-tink);
    --pgm-xbg: rgba(255, 255, 255, .2);
    --pgm-gl: var(--pgm-c2);
    position: relative;
    width: 400px;
    max-width: 100%;
    color: var(--pgm-tink) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
        linear-gradient(to left, var(--pgm-c2), var(--pgm-c1)) !important;
    border: 0 !important;
    border-radius: 20px;
    box-shadow: 0 24px 44px -18px var(--pgm-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
    overflow: hidden;
    transition: opacity .25s linear, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

#toastContainer .toast.pg-toast.showing {
    transform: translateY(14px) scale(.96);
}

#toastContainer .pg-toast[dir="ltr"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
        linear-gradient(to right, var(--pgm-c2), var(--pgm-c1)) !important;
}

#toastContainer .pg-toast.bg-success {
    --pgm-c1: #12a777;
    --pgm-c2: #046c4b;
    --pgm-glow: rgba(7, 146, 101, .6);
}

#toastContainer .pg-toast.bg-danger {
    --pgm-c1: #f43f5e;
    --pgm-c2: #c8102f;
    --pgm-glow: rgba(225, 29, 72, .55);
}

#toastContainer .pg-toast.bg-warning {
    --pgm-c1: #ffd166;
    --pgm-c2: #f7a116;
    --pgm-glow: rgba(240, 140, 0, .55);
    --pgm-tink: #3d2000;
    --pgm-xbg: rgba(61, 32, 0, .1);
    --pgm-gl: #c2410c;
}

#toastContainer .pg-toast__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 15px;
}

#toastContainer .pg-toast__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .22), 0 6px 14px -4px rgba(0, 0, 0, .25);
}

#toastContainer .pg-toast__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--pgm-gl);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#toastContainer .pg-toast__icon .pg-toast__dot {
    fill: var(--pgm-gl);
    stroke: none;
}

/* On show the chip pops and its mark draws itself (pathLength="1" on each path) */
#toastContainer .pg-toast.show .pg-toast__icon {
    animation: pgToastChip .5s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}

#toastContainer .pg-toast.show .pg-toast__icon path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pgToastDraw .4s ease-out .35s forwards;
}

@keyframes pgToastChip {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pgToastDraw {
    to { stroke-dashoffset: 0; }
}

#toastContainer .pg-toast .toast-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.45;
    text-align: start;
    text-wrap: pretty;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
    color: inherit !important;
}

#toastContainer .pg-toast.bg-warning .toast-body {
    text-shadow: none;
}

#toastContainer .pg-toast .btn-close {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--pgm-xbg) !important;
    filter: none !important;
    opacity: 1;
    box-shadow: none;
}

#toastContainer .pg-toast .btn-close::before,
#toastContainer .pg-toast .btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--pgm-tink);
    transform: translate(-50%, -50%) rotate(45deg);
}

#toastContainer .pg-toast .btn-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#toastContainer .pg-toast .btn-close:hover,
#toastContainer .pg-toast .btn-close:focus-visible {
    background: rgba(255, 255, 255, .34) !important;
}

#toastContainer .pg-toast.bg-warning .btn-close:hover,
#toastContainer .pg-toast.bg-warning .btn-close:focus-visible {
    background: rgba(61, 32, 0, .18) !important;
}

html[data-bs-theme=dark] #toastContainer .toast.pg-toast {
    box-shadow: 0 24px 44px -16px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* A phone: the toasts take the screen's width, 12px from each edge */
@media (max-width: 575.98px) {
    #toastContainer {
        inset-inline: 0 !important;
        width: auto;
        margin: 0 !important;
        padding: 0 12px 16px !important;
    }

    #toastContainer .toast.pg-toast {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .info_message::before,
    .warning_message::before,
    .error_message::before,
    .success_message::before,
    #toastContainer .pg-toast.show .pg-toast__icon {
        animation: none;
    }

    #toastContainer .pg-toast.show .pg-toast__icon path {
        animation: none;
        stroke-dashoffset: 0;
    }

    #toastContainer .toast.pg-toast,
    #toastContainer .toast.pg-toast.showing {
        transition: opacity .2s linear;
        transform: none;
    }
}

.success_message .close,
.error_message .close,
.info_message .close,
.success_message .close_btn,
.error_message .close_btn,
.info_message .close_btn,
.success_message .btn-close,
.error_message .btn-close,
.info_message .btn-close {
    display: none !important;
    pointer-events: none !important;
}

.button.button-disabled {
    opacity: 0.8;
    pointer-events: none;
    cursor: not-allowed;
}

.left_arrow,
.right_arrow {
    padding: 5px;
    cursor: pointer
}

.close {
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer
}

.appointment_container {
    display: block
}

.arrow-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--bs-white-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--bs-border-color);
    transition: opacity 0.3s, background-color 0.2s;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--bs-body-color);
}

.arrow-circle:hover {
    background-color: var(--bs-light);
}

.center,
.otp_div {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center
}

.arrow-circle.disabled {
    opacity: .3;
    pointer-events: none
}

.buttons-container {
    max-width: 880px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (min-width: 1200px) {
    .approve_container {
        gap: 40px;
    }
}

.approve_container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.approve-action-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.approve-action-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.approve-action-btn:active {
    transform: scale(0.96);
}

.approve-confirm {
    background: #198754;
    color: #fff;
    box-shadow: 0 4px 14px rgba(25, 135, 84, 0.45);
}

.approve-confirm:hover {
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.55);
}

.approve-decline {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.45);
}

.approve-decline:hover {
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.55);
}

.approve-message {
    width: 52px;
    height: 52px;
    background: var(--bs-white-bg);
    color: var(--bs-primary);
    border: 2px solid var(--bs-border-color) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.approve-message:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary) !important;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb, 67, 94, 190), 0.2), 0 4px 12px rgba(var(--bs-primary-rgb, 67, 94, 190), 0.3);
}


.in-bl,
.left_arrow {
    display: inline-block
}

.arrow-circle,
.lin,
.pointer,
.svg_fill {
    cursor: pointer
}

.error_message,
.success_message,
.info_message,
.warning_message {
    font-family: var(--app-font-family);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

#app {
    direction: rtl
}

.theme-toggle {
    color: #fff
}

input::placeholder,
textarea::placeholder {
    text-align: start !important
}

/* dir="auto" takes its direction from what is typed. Empty, it has nothing to go by and falls
   back to ltr, so the placeholder sat on the left of a Hebrew or Arabic page. Until the first
   character it follows the page; from then on the text decides as before. */
input[dir="auto"]:placeholder-shown,
textarea[dir="auto"]:placeholder-shown {
    direction: inherit;
}

.home_mobile_box,
.modal-content,
.modal-content>p,
.otp_div,
.separator,
.table {
    text-align: center
}

.light {
    top: 0 !important
}

.avatar-2xl img {
    width: 120px;
    height: 120px
}

.submenu_active {
    background-color: var(--bs-card-bg)
}

.appointment_box_small {
    margin-inline-start: 10px !important
}

.appointment_box,
.nums_div {
    margin-inline-start: 20px
}

.burger-btn i {
    font-size: 30px !important
}

.burger-btn {
    margin-top: -5px
}

.table_pages .nums_div .selected {
    background-color: var(--main-color);
    color: #fff
}

.table_pages>.right_arrow {
    position: relative;
    top: 4
}

.right_arrow {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border: solid var(--main-color);
    border-width: 0 3px 3px 0;
    float: right;
    margin-top: 10px
}

.left_arrow {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    border: solid var(--main-color);
    border-width: 0 3px 3px 0
}

.table_pages .nums_div span {
    color: var(--bs-body-color);
    padding: 7px;
    border-radius: 6px;
    margin-inline-start: 15px;
    cursor: pointer
}

.left_row_container {
    background-color: #d9dcff;
    border-radius: 5px;
    padding: 5px 5px 3px 10px
}

.row_count_text {
    position: absolute;
    top: 25px
}

.relative,
.spinner,
.spinner_text {
    position: relative
}

.otp_div {
    direction: ltr
}

/* Only the digit-box flavour becomes a flex row — .otp_div is reused elsewhere
   to wrap a single phone/ID text field, which must keep its own layout.
   The code boxes stay on one line — a lone 6th box dropping to its own row
   reads as a broken layout on a phone. They shrink instead of wrapping
   (see min-width:0 below). Overrides the shared .center/.otp_div rule. */
.otp_div:has(input[type="number"]) {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap
}

.otp_div input[type=number] {
    width: 52px !important;
    height: 58px;
    max-width: 52px !important;
    /* a flex item defaults to min-width:auto and refuses to shrink; without
       this the row overflows once nowrap is on */
    min-width: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-input-bg);
    color: var(--bs-body-color);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.otp_div input[type=number]:focus {
    border-color: #1b8fd4;
    box-shadow: 0 0 0 4px rgba(27, 143, 212, 0.16);
    transform: translateY(-1px);
    outline: none;
}

.otp_div input::-webkit-inner-spin-button,
.otp_div input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.center {
    display: flex;
    justify-content: center
}

.appointment_box_add {
    background-color: var(--main-color) !important;
    color: var(--bs-white-bg);
    background-repeat: no-repeat !important;
    background-position: 95% center !important;
    cursor: pointer !important;
    padding: 50px 10px;
    min-height: auto !important
}

.appointment_box_add_background {
    padding-inline-start: 16px !important;
    background-size: 35px 35px !important;
    background-image: url(/M/images/add_btn_hover.png) !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center !important
}

.appointment_selected_pill {
    width: auto !important;
    display: inline-block !important;
    min-height: auto !important;
    padding: 10px 10px !important;
    margin-top: 10px !important;
}

.close_black {
    background-image: url(/assets/compiled/images/closeBlack.png) !important;
    padding-inline-start: 35px !important;
    background-size: 15px 15px !important
}

.appointment_box_add:disabled,
.appointment_box_add[disabled] {
    background-color: #ccc !important;
    color: #666 !important;
    border: 1px solid #999 !important;
    cursor: not-allowed !important
}

.appointment-full-notice {
    text-align: center;
    padding: 28px 20px;
    margin: 12px auto;
    max-width: 320px;
    border-radius: 16px;
    background: var(--bs-white-bg);
    border: 1px solid var(--bs-border-color)
}

.appointment-full-notice i {
    font-size: 2.2rem;
    color: var(--bs-secondary-color);
    display: block;
    margin: 0 auto 10px;
    width: fit-content
}

.appointment-full-notice-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 4px
}

.appointment-full-notice-text {
    font-size: 0.85rem;
    color: var(--bs-secondary-color)
}

.appointment-full-notice-lg {
    grid-column: 1 / -1;
    max-width: 480px;
    width: 100%;
    margin: 20px auto;
    padding: 40px 28px
}

.appointment-full-notice-lg i {
    font-size: 3rem
}

.appointment-full-notice-lg .appointment-full-notice-title {
    font-size: 1.3rem
}

.appointment-full-notice-lg .appointment-full-notice-text {
    font-size: 0.95rem
}

.appointment_box_small {
    width: 270px !important;
    padding: 35px 10px
}

.appointment_box,
.home_mobile_box {
    padding: 15px 10px;
    min-height: 100px;
    cursor: pointer
}

.appointment_hover_green {
    background-color: green !important
}

.appointment_box {
    background-color: var(--bs-white-bg);
    -webkit-box-shadow: 2px 2px 3px rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 5%);
    border-radius: 10px;
    margin-top: 30px;
    border: 1px solid var(--bs-border-color);
    display: inline-block;
    transform: translate(0, 0);
    transition: background-color 1s, color 1s, -webkit-box-shadow .5s, box-shadow .5s, transform .5s !important
}

.appointment_box:hover,
.home_mobile_box:hover {
    -webkit-box-shadow: 2px 2px 3px rgb(0 0 0 / 45%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 45%);
    transform: translate(-10px, -10px);
    transition: -webkit-box-shadow .5s, shadow .5s, transform .5s, background-color .5s !important
}

.appointment_box_focus {
    background-color: var(--main-color);
    color: var(--bs-white-bg);
    -webkit-box-shadow: 2px 2px 3px rgb(0 0 0 / 45%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 45%);
    transform: translate(-10px, -10px);
    transition: background-color 1s, color 1s, -webkit-box-shadow .5s, shadow .5s, transform .5s
}

.index_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

.home_mobile_box {
    box-shadow: 0 .375rem 1rem 0 rgba(19, 17, 32, .18);
    font-size: 18px;
    background-color: var(--bs-white-bg) !important;
    border-radius: 10px;
    margin-top: 20px !important;
    margin: 5px;
    border: 0 !important;
    display: inline-block;
    transform: translate(0, 0);
    transition: background-color 1s, color 1s, -webkit-box-shadow .5s, box-shadow .5s, transform .5s !important
}

@media only screen and (max-width:1650px) and (min-width:1450px) {
    .shadow_box_logo {
        right: 10% !important
    }

    .shadow_box_app_logo {
        left: 10% !important
    }
}

@media only screen and (max-width:1450px) and (min-width:1300px) {
    .shadow_box_logo {
        right: 5% !important
    }

    .shadow_box_app_logo {
        left: 5% !important
    }
}

@media only screen and (max-width:1300px) and (min-width:800px) {
    .shadow_box_logo {
        right: 30px !important
    }

    .shadow_box_app_logo {
        left: 30px !important
    }
}

@media only screen and (max-width:800px) {
    .appointment_box_mobile {
        min-height: 30px !important;
        margin-top: 15px !important
    }

    .appointment_box {
        margin-inline-start: 0
    }

    .appointment_box.appointment_box_add_background {
        display: block !important;
        width: 100% !important;
    }

    .appointment_selected_pill {
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .appointment_box.appointment_box_small {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .appointment_box_circle {
        width: auto !important;
        margin-inline-start: 10px;
        margin-top: 15px !important;
        padding: 15px !important
    }

    .big_br,
    .shadow_box_app_logo,
    .shadow_box_logo {
        display: none
    }

    .shadow_box {
        width: 100% !important;
        -webkit-box-shadow: 0 0 0 !important;
        box-shadow: 0 0 0 !important;
        margin-top: 0 !important;
        background-color: var(--bs-white-bg) !important;
        padding: 0 !important
    }

    .mobile_div {
        padding: 20px !important
    }

    .br_90 {
        line-height: 90px !important
    }

    .shadow_box>h1 {
        padding-top: 10px
    }
}

.color_box {
    width: 10px;
    height: 3px;
    margin-inline-end: 10px;
    display: inline-table
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-warning,
.btn-danger-dark {
    border: none;
    border-radius: 12px;
    padding: 0.55rem 1.5rem;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
    color: white;
}

.btn-primary {
    background: linear-gradient(135deg, #1b3a8f, #12235f);
    box-shadow: 0 10px 18px rgba(21, 43, 120, 0.25);
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d, #565e64);
    box-shadow: 0 10px 18px rgba(108, 117, 125, 0.25);
}

.btn-success {
    background: linear-gradient(135deg, #198754, #146c43);
    box-shadow: 0 10px 18px rgba(25, 135, 84, 0.25);
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    box-shadow: 0 10px 18px rgba(220, 53, 69, 0.25);
}

.btn-danger-dark {
    background: linear-gradient(135deg, #8b1e28, #5c0f18) !important;
    box-shadow: 0 10px 18px rgba(139, 30, 40, 0.25);
}

.btn-info {
    background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
    box-shadow: 0 10px 18px rgba(13, 202, 240, 0.25);
}

.btn-warning {
    background: linear-gradient(135deg, #ffc107, #d39e00);
    box-shadow: 0 10px 18px rgba(255, 193, 7, 0.25);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark,
.btn-dark {
    border-radius: 12px;
    padding: 0.55rem 1.5rem;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.btn-outline-primary {
    color: #1b3a8f;
    border-color: #1b3a8f;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-success {
    color: #198754;
    border-color: #198754;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-dark {
    color: #212529;
    border-color: #212529;
}

.btn-dark {
    background: linear-gradient(135deg, #212529, #121416);
    color: #fff;
    border: none;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, #1b3a8f, #12235f);
    color: #fff;
}

.btn-outline-secondary:hover {
    background: linear-gradient(135deg, #6c757d, #565e64);
    color: #fff;
}

.btn-outline-success:hover {
    background: linear-gradient(135deg, #198754, #146c43);
    color: #fff;
}

.btn-outline-danger:hover {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    color: #fff;
}

.btn-outline-info:hover {
    background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
    color: #fff;
}

.btn-outline-warning:hover {
    background: linear-gradient(135deg, #ffc107, #d39e00);
    color: #212529;
}

.btn-outline-dark:hover {
    background: linear-gradient(135deg, #212529, #121416);
    color: #fff;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-dark:hover,
.btn-danger-dark:hover {
    filter: brightness(1.10);
}


.shadow_box {
    background-color: var(--bs-white-bg);
    -webkit-box-shadow: 0 0 10px #0700ff;
    box-shadow: 0 0 10px #0700ff;
    border-radius: 30px;
    padding: 50px 20px;
    margin-top: 30px;
    width: 500px;
    min-height: 600px !important
}

.separator {
    display: flex;
    align-items: center;
    font-size: large
}

.separator::after,
.separator::before {
    content: '';
    flex: 3;
    border-bottom: 1px solid #8b8a8a
}

.separator:not(:empty)::before {
    margin-inline-end: .55em
}

.separator:not(:empty)::after {
    margin-inline-start: .55em
}

.float_right {
    float: right
}

.float_left {
    float: left
}

/* The topbar's two bespoke floats mean "start" (burger) and "end" (avatar), which only
   lines up with left/right while the page is RTL. Mirror them for an LTR viewer; the base
   rules above keep deciding for Hebrew and Arabic. The <=1199px `float:none !important`
   override still wins over these, so the mobile flex layout is untouched. */
html[dir="ltr"] .topbar-menu .float_right {
    float: left
}

html[dir="ltr"] .topbar-menu .float_left {
    float: right
}

.spinner_text {
    color: var(--bs-body-color);
    font-size: 26px !important;
    font-weight: 700
}

.spinner {
    height: 50px;
    border: 1px solid transparent;
    border-radius: 3px
}

.spinner:before {
    content: '';
    background-size: 50px 50px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    margin-top: -20px;
    margin-inline-end: -10px;
    border-radius: 50%;
    border: 2px solid #152b78;
    border-top-color: var(--bs-white-bg);
    animation: .9s linear infinite spinner
}

@keyframes spinner {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.ajax_loader_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bs-body-bg-overlay, rgba(255, 255, 255, .3))
}

.ajax_loader_container .spinner {
    margin-top: 0
}

.modal-content>p {
    padding: 20px
}

.close_model {
    color: red;
    float: right;
    font-size: 16px;
    font-weight: 700;
    position: relative
}

.close_model:focus,
.close_model:hover {
    color: #aaa;
    text-decoration: none;
    cursor: pointer
}


.submit_btn_big {
    cursor: pointer !important;
    padding-inline-end: 26px !important;
    width: 150px !important;
}


.gradiant_button {
    position: relative;
    height: 50px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    z-index: 111
}

.green_gradiant .inner {
    background: -webkit-linear-gradient(right, #10b981, #058360, #10b981, #046c4f)
}

.blue_torquoise_gradiant .inner {
    background: -webkit-linear-gradient(right, #00dbde, #152b78, #00dbde, #152b78)
}

.blue_gradiant .inner {
    background: -webkit-linear-gradient(right, rgb(72 154 255), rgba(0, 103, 230, 1), rgb(72 154 255), rgba(0, 103, 230, 1));
}


.gradiant_button .inner {
    position: absolute;
    height: 100%;
    width: 300%;
    inset-inline-end: -100%;
    z-index: -1;
    transition: .4s
}

.gradiant_button:active .inner,
.gradiant_button:hover .inner {
    left: 0
}

.gradiant_button button {
    width: 100%;
    height: 100%;
    border: none;
    background: 0 0;
    outline: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    font-weight: 700
}

.gradiant_button .success-text {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-align: center;
}

@media screen and (max-width:700px) {

    /* no !important — a module stylesheet (e.g. exits.css) must be able to own
       the gap of its own OTP row */
    .otp_div {
        gap: 4px;
    }

    .otp_div input[type=number] {
        width: 44px !important;
        max-width: 44px !important;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 10px;
    }
}

/* Narrow phones — with nowrap the boxes shrink to whatever is left, and on the
   9-box ID forms that was under 20px. Nothing can be won from the box width
   itself (9 x 44px never fits), so the width is recovered from the spacing:
   the inherited margin is dropped and the gap steps down. The font-size steps
   down with it so the digit still sits comfortably inside the shrunken box.
   Values are mirrored in general-pages.css, which loads after this file on the
   external pages — both must agree or the result depends on the load order. */
@media screen and (max-width:430px) {
    .otp_div {
        gap: 3px;
    }

    .otp_div input[type=number] {
        margin: 0;
        font-size: 1.35rem;
    }
}

@media screen and (max-width:360px) {
    .otp_div {
        gap: 2px;
    }

    .otp_div input[type=number] {
        font-size: 1.2rem;
    }
}

.color-danger {
    color: #87262f;
}

.badge {
    min-width: 55px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: inline-block;
}

.btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.card-header {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.card .card-header~.card-body {
    padding-top: 1.5rem;
}

.card {
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
}

.card-rounded {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) !important;
}

.top-shadow {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 10px;
}

.fc-event-title {
    text-align: start;
    margin-inline-start: 3px;
}

@media (max-width: 767.98px) {
    select {
        width: 100% !important;
        margin-top: 5px !important;
    }

    .card-margin-top-mobile {
        margin-top: 2.2rem;
        border: none
    }
}



.chartGraphics {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white-bg);
    border-radius: 10px;
    border-radius: 0.5rem;
    box-shadow: 0 0.375rem 1rem 0 rgba(19, 17, 32, .18);
}

/* body {
    top: 0px !important;
    line-height: 1.5 !important;
} */

.spinner-border-lg {
    width: 3rem;
    height: 3rem;
}

.modal-dialog {
    width: 100%;
    justify-content: center;
}

.modal-title {
    font-size: 1.5rem !important;
    text-align: center;
    width: 100%;
}

.modal-content {
    padding: 5px !important;
}

.modal-footer {
    text-align: center;
    justify-content: center;
}

.modal-fullscreen .modal-content {
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color) !important;
    border-radius: var(--bs-modal-border-radius) !important;
}

[class*="modal-fullscreen"] .modal-content {
    max-height: 100% !important;
}

.min-w-auto {
    min-width: auto !important;
}

.max-width-none {
    max-width: none !important;
}


.document-card-title {
    border-bottom: 1px solid var(--bs-document-card-title-border) !important;
}

.bg-base-200 {
    --tw-bg-opacity: 1;
    background-color: var(--bs-box-bg);
}

.file-drop {
    background-color: var(--bs-file-drop);
}

.file-drop-hover:hover {
    background-color: var(--bs-file-drop-hover);
}

.border-dashed {
    border: 1px dashed var(--bs-border-color)
}

.alert-info {
    background-color: var(--bs-primary);
}

.btn-ghost {
    --bs-btn-font-weight: 600;
    --bs-btn-color: #717b84;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-hover-color: var(--bs-gray-600);
    --bs-btn-hover-bg: var(--bs-gray-300);
    --bs-btn-hover-border-color: var(--bs-gray-300);
    --bs-btn-focus-shadow-rgb: var(--bd-gray-300-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: var(--bs-gray-300);
    --bs-btn-active-border-color: var(--bs-gray-300)
}

.btn-group-sm>.btn-icon.btn,
.btn-icon.btn-sm {
    height: 2rem;
    width: 2rem;
}

.more_action .btn-icon.btn-sm {
    height: 2.5rem;
    width: 2.5rem;
}

.more_action .icon-xl {
    width: 28px;
    height: 28px;
}

.icon-md {
    height: 1.5rem !important;
    line-height: 1.5rem !important;
    width: 1.5rem !important;
}

.bi-static-before::before {
    position: static !important;
    display: block !important;
}

.icon-lg {
    height: 2rem !important;
    line-height: 2rem !important;
    width: 2rem !important;
}

.dropdown-item {
    cursor: pointer;
}

.btn.btn-icon {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    font-size: .92969rem;
    font-weight: 400;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 2.5rem;
}

@media (min-width: 576px) {
    .modal-ml {
        --bs-modal-width: 650px;
    }
}

.modal-md input,
.modal-md .form-select,
.modal-md .dselect-wrapper,
.modal-md textarea {
    width: 100% !important;
    max-width: none !important;
}

.modal-extra-padding .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-extra-padding .modal-footer,
.modal-extra-padding .modal-body {
    padding-right: 3rem;
    padding-left: 3rem;
}

.modal-extra-padding .modal-footer * {
    margin: 0px !important;
}

html[data-bs-theme=light] .flatpickr-input[readonly] {
    background-color: var(--bs-input-bg);
}

.modal-body {
    overflow-y: auto !important;
}

html {
    height: 100%;
    /* auto, not scroll: `scroll` painted a permanent scrollbar on every page,
       including the station screens that always fit the viewport (measured on
       first_use.php: scrollHeight === clientHeight, scrollTop refuses to leave
       0). The bar was inert and unexplainable to whoever stood at the kiosk.
       The cost of `auto` is the classic one — the 15px bar appears and
       disappears between a long page and a short one, so content shifts
       sideways on navigation. */
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}
body.modal-open {
    padding-inline-start: 0 !important;
}
.modal {
    overscroll-behavior: contain;
    --bs-modal-margin: 1.75rem;
}

.dselect-w-100 {
    width: 100% !important;
    max-width: none !important;
}

.dselect-w-100 button.form-select {
    width: 100% !important;
    max-width: none !important;
    text-align: start !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-active-color) !important;
    background-color: var(--bs-dropdown-link-active-bg) !important;
}

a[href]:not(.submenu-link):not(.btn):not(.underline-none):not(:has(*)) {
    text-decoration: underline !important;
}

.table-responsive {
    /* Fixes dropdown beeing clipped */
    -webkit-overflow-scrolling: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    /* optional, if you want both axes */
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-bottom-left-radius: .3rem;
    border-top-left-radius: .3rem;
}

.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,
.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-bottom-right-radius: .3rem;
    border-top-right-radius: .3rem;
}

/* The two rules above soften the OUTER corners of an input-group to .3rem. They were written
   physically, for the RTL build, where "left" is the group's end and "right" its start — so in an
   LTR page they land on the INNER corners instead and re-round the seam that Bootstrap squares
   off, leaving the button floating beside the field with a gap. Released the other way for ltr
   only: an html[dir="ltr"] selector can never match a Hebrew or Arabic viewer, so the base rules
   keep deciding there. */
html[dir="ltr"] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: .3rem;
    border-top-right-radius: .3rem;
}

html[dir="ltr"] .input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),
html[dir="ltr"] .input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,
html[dir="ltr"] .input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,
html[dir="ltr"] .input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
html[dir="ltr"] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
html[dir="ltr"] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
html[dir="ltr"] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
html[dir="ltr"] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: .3rem;
    border-top-left-radius: .3rem;
}

hr {
    width: 100%;
    background: var(--bs-border-color);
    height: 1px;
}

.dir-ltr {
    direction: ltr !important;
}

.placeholder-ltr::placeholder {
    direction: ltr !important;
    text-align: end !important;
}

/* English: `end` parks the hint at the right of the box. In an RTL page that right edge is where
   the line starts, so the hint sits under the caret; in English `end` is the far side and the
   hint drifts away from it. Released for ltr only — the base rule above keeps deciding for a
   Hebrew or Arabic viewer. */
html[dir="ltr"] .placeholder-ltr::placeholder {
    text-align: start !important;
}

.form-switch .form-check-input {
    width: 2.8em;
}

.modal {
    z-index: 999999999999 !important;
}

.modal-backdrop {
    z-index: 999999999 !important;
}

.text-blue,
.text-blue:hover,
.text-blue:active {
    color: var(--bs-blue);
}

#NagishLiTrigger {
    right: 10px !important;
    max-width: 50px;
    max-height: 50px;
    bottom: 20px !important;
}

#NagishLiTrigger span img {
    width: 20px;
}

.nagishli-trigger-icon {
    background-color: var(--primary) !important;
}

.cur-year {
    direction: ltr !important;
}

.max-w-100 {
    max-width: 100% !important;
}

.minh-80vh {
    min-height: 80vh
}

.minh-70vh {
    min-height: 70vh
}

.minh-60vh {
    min-height: 60vh
}

.box-shadow-primary {
    box-shadow: 0 0 10px var(--bs-primary) !important;
}

@media (max-width: 969.98px) {
    .mx-none-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.underline-none {
    text-decoration: none !important;
}


.sidebar-wrapper .sidebar-header img {
    height: 2rem !important;
}

.dselect .dropdown-item {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100vw;
}

/* On a phone the open list spans the screen less 16px a side. Popper places it and keeps it
   16px from the screen's edges (popperConfig in dselect.js), so it opens centred wherever the
   toggle sits — a fixed side offset here pushed it 7vw past the left edge. */
@media (max-width: 900px) {
    .dselect .dropdown-menu {
        width: calc(100vw - 32px);
    }
}

.bi {
    height: auto !important;
}

.mb-6 {
    margin-bottom: 1.5rem !important;
}

.nav-line-bottom {
    border-bottom: 1px solid var(--bs-border-color)
}

.nav-line-bottom .nav-item .nav-link {
    border-radius: 0;
    color: var(--bs-secondary-color);
    font-weight: bold;
    margin-bottom: -1px;
    padding: .875rem 1.25rem
}

@media (max-width:576px) {
    .nav-line-bottom .nav-item .nav-link {
        padding: .8rem
    }
}

.nav-line-bottom .nav-item .nav-link.active {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-primary);
    color: var(--bs-primary)
}

@media (max-width:576px) {
    .nav-line-bottom .nav-item .nav-link.active {
        padding: .747rem
    }
}

.nav-line-bottom .nav-item .nav-link:hover {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-primary);
    color: var(--bs-primary)
}

.nav-line-bottom .nav-item .nav-link .badge {
    line-height: 1.4
}

@media (max-width:576px) {
    .nav-line-bottom {
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden
    }

    .nav-line-bottom::-webkit-scrollbar {
        display: none
    }
}

.nav-lb-tab {
    border-bottom: 1px solid var(--bs-border-color)
}

@media (max-width:576px) {
    .nav-lb-tab {
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden
    }

    .nav-lb-tab::-webkit-scrollbar {
        display: none
    }
}

.nav-lb-tab .nav-item {
    margin: 0 1.5rem
}

.nav-lb-tab .nav-item .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bs-secondary-color);
    font-weight: bold;
    margin-bottom: -1px;
    padding: 16px 0;
    white-space: nowrap
}

.nav-lb-tab .nav-item .nav-link.active,
.nav-lb-tab .nav-item .nav-link:hover {
    background-color: transparent;
    border-bottom: 2px solid var(--bs-primary);
    color: var(--bs-primary)
}

.nav-lt-tab {
    border-top: 1px solid var(--bs-border-color)
}

@media (max-width:768px) {
    .nav-lt-tab {
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden
    }

    .nav-lt-tab::-webkit-scrollbar {
        display: none
    }
}

.nav-lt-tab .nav-item {
    margin: -.0625rem 1rem 0
}

.nav-lt-tab .nav-item .nav-link {
    border-radius: 0;
    border-top: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-weight: bold;
    padding: 1rem 0
}

.nav-lt-tab .nav-item .nav-link.active,
.nav-lt-tab .nav-item .nav-link:hover {
    background-color: transparent;
    border-top: 2px solid var(--bs-primary);
    color: var(--bs-primary)
}

[class*="badge-"][class*="-soft"] {
    padding: 6px 14px;
    border-radius: 50rem;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    border: 1px solid;
}

.badge-success-soft {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
    border-color: rgba(25, 135, 84, 0.25);
}

.badge-secondary-soft {
    background-color: rgba(71, 85, 105, 0.12);
    color: #475569;
    border-color: rgba(71, 85, 105, 0.25);
}

.badge-info-soft {
    background-color: rgba(13, 202, 240, 0.12);
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.25);
}

.badge-danger-soft {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.25);
}

.badge-warning-soft {
    background-color: rgba(255, 193, 7, 0.15);
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.25);
}

.badge-primary-soft {
    background-color: rgba(77, 58, 210, 0.12);
    color: #4d3ad2;
    border-color: rgba(77, 58, 210, 0.25);
}

.img-4by3-md {
    width: 5.25rem;
}

.success-text {
    min-height: 70px !important;
}

.input-spinner .button-minus,
.input-spinner .button-plus,
.quantity-field {
    background-color: transparent;
    border-color: var(--bs-gray-300);
    color: var(--bs-secondary-color) !important;
    height: 2rem;
    width: 1.8rem;
    border-radius: .5rem;
}

.button-minus:hover,
.button-plus:hover {
    background-color: var(--bs-gray-400);
}

.input-group .btn {
    position: relative;
    z-index: 2;
}

.input-spinner .form-input {
    background: 0 0;
    border: 1px solid var(--bs-gray-300);
    color: var(--bs-gray-500);
    height: 100%;
    min-height: 2rem;
    text-align: center;
    width: 2rem !important;
}

.form-control-sm {
    border-radius: var(--bs-border-radius-sm);
    font-size: .765625rem;
    min-height: calc(1.5em + .5rem + var(--bs-border-width) * 2);
    padding: .25rem .5rem;
}

.form-control-sm {
    border-radius: var(--bs-border-radius-sm);
    font-size: .765625rem;
    min-height: calc(1.5em + .5rem + var(--bs-border-width) * 2);
    padding: .25rem .5rem;
}

.quantity-field .form-control-sm .form-input {
    white-space: nowrap !important;
    box-sizing: border-box;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    font-size: .765625rem;
    padding: .25rem .5rem;
    background: 0 0;
    border: 1px solid var(--bs-gray-300);
    color: var(--bs-gray-500);
    height: 100%;
    min-height: 2rem;
    text-align: center;
    width: 2rem !important;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-inline-end: calc(var(--bs-border-width)*-1);
}

.quantity-field::-webkit-inner-spin-button,
.quantity-field::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

@media (max-width:1199.98px) {
    .box {
        width: 100% !important;
    }
}

.box_small {
    width: 270px !important;
    padding: 35px 10px;
    margin-inline-start: 10px !important
}

.close_primary {
    background-image: url("/assets/compiled/images/close_primary.png") !important;
    padding-inline-start: 35px !important;
    background-size: 15px 15px !important
}

.box {
    -webkit-box-shadow: 2px 2px 3px rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 5%);
    border-radius: 10px;
    margin-top: 30px;
    border: 1px solid var(--bs-border-color);
    display: inline-block;
    transform: translate(0, 0);
    transition: background-color 1s, color 1s, -webkit-box-shadow .5s, box-shadow .5s, transform .5s !important
}

.box {
    -webkit-box-shadow: 2px 2px 3px rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 5%);
    border-radius: 10px;
    margin-top: 30px;
    border: 1px solid var(--bs-border-color);
    display: inline-block;
    transform: translate(0, 0);
    transition: background-color 1s, color 1s, -webkit-box-shadow .5s, box-shadow .5s, transform .5s !important;
    padding: 15px 10px;
    min-height: auto;
    cursor: pointer;
    color: white;
    margin: 20px 0 0 !important;
}

.box_small {
    margin-inline-start: 10px !important;
    width: 270px !important;
    padding: 15px 10px;
}

.box:hover,
.home_mobile_box:hover {
    box-shadow: 2px 2px 3px rgb(0 0 0 / 45%);
    transform: translate(-10px, -10px);
    transition: -webkit-box-shadow .5s, shadow .5s, transform .5s, background-color .5s !important;
}

.box_primary {
    background-color: var(--bs-primary);
}

.quantity-field {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.gradiant_button {
    position: relative;
    height: 75px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    z-index: 111
}

.purple_gradiant .inner {
    background: -webkit-linear-gradient(right, rgb(21 88 171), #593cc1, rgb(36 111 204), #593cc1);
}

.form-check-input-xl {
    width: 1.75em;
    height: 1.75em;
}

.rounded-3 {
    border-radius: .5rem !important;
}

@media (min-width: 1200px) {
    .modal-xxl {
        --bs-modal-width: 1340px;
    }
}

:root {
    --dt-row-selected: 13, 110, 253;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 9, 10, 11;
    --dt-row-stripe: 0, 0, 0;
    --dt-row-hover: 0, 0, 0;
    --dt-column-ordering: 0, 0, 0;
    --dt-html-background: white;
    --bs-secondary-border-subtle: #b5bbc3;
    --main-color: #152b78;
    --app-font-family: "RubikLocal", "RubikFallback", sans-serif;
    --bs-error-message-bg: #f8d7da;
    --bs-white-font-bg: #fff;
    --bs-white-bg: #fff;
    --bs-table-th-bg: #e6ecf9;
    --bs-box-bg: #e8ecf4;
    --tutorial-bg: #fff;
    --tutorial-bg-hover: #e2e1e1;
    --digital-signature-title-color: #152b78;
    --bs-digital-signature-bg: #e8ecf4;
    --bs-border-color: #dce7f1;
    --bs-link-color-rgb: 21, 43, 120;
    --bs-link-hover-color-rgb: 54, 75, 152;
    --bs-input-bg: #fff;
    --bs-document-card-title-border: #c0cde0;
    --bs-file-drop: #ecf3fe;
    --bs-file-drop-hover: #e4edfc;
    --bs-sidebar-hover: #14255f;
    --bs-body-bg-overlay: rgba(255, 255, 255, .3);
    --bs-modal-border-radius: 16px;
}

table.dataTable>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.9);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
    color: rgb(255, 255, 255);
    color: rgb(var(--dt-row-selected-text));
}

.dtsp-name {
    text-align: start !important;
}

.dt-scroll-body {
    top: 10px;
}

.dtsp-pill {
    color: white !important;
    background-color: var(--bs-primary) !important;
}
.top-40{
    top: 40%;
}
.bg-primary-soft {
    background-color: rgba(0, 57, 255, .12) !important
}

.dtsp-panesContainer {
    display: none;
}

.dtsp-titleRow {
    padding: 0px 10px 0px 10px;
}

div.dtsp-panesContainer button.dtsp-clearAll,
div.dtsp-panesContainer button.dtsp-collapseAll,
div.dtsp-panesContainer button.dtsp-showAll {
    float: left !important;
}

.dtsp-title {
    float: right !important;
}

.dtsp-panesContainer * {
    font-weight: bold;
}

.dtsp-closeSearch {
    color: var(--bs-success);
}

.dt-info {
    margin-top: 20px;
}

#filterBadge {
    border-radius: 0.375rem !important;
    min-width: auto !important;
}

.w-fit-content {
    width: fit-content
}

.dt-search {
    margin-inline-start: 10px;
    margin-top: 3px
}

.dt-search>label {
    font-weight: 700 !important
}

.dt-search>.form-control {
    margin-inline-start: 5px
}

.dt-buttons {
    margin: 20px 0 10px 10px;
    float: left
}

.dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #6c757d, #565e64);
    box-shadow: 0 10px 18px rgba(108, 117, 125, 0.25);
}

.dt-buttons .btn {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 !important;
}

.dt-buttons .btn+.btn {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.dt-buttons .btn:last-child {
    border-inline-start: 0 !important;
}

.dt-buttons .btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.dt-container .dt-layout-row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dt-container .dt-layout-row:first-child .dt-layout-start,
.dt-container .dt-layout-row:first-child .dt-layout-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dt-container .dt-layout-row:first-child .dt-buttons {
    margin: 0;
    float: none;
}

.dt-container .dt-layout-row:first-child .dt-search,
.dt-container .dt-layout-row:first-child .dt-length {
    margin: 0;
}

.dt-container {
    margin-top: 3px
}


.dt-paging {
    margin-bottom: 10px
}


.dt-search {
    margin-inline-start: 10px;
    margin-top: 3px
}

.dt-search>label {
    font-weight: 700 !important
}

.dt-search>.form-control {
    margin-inline-start: 5px;
    padding: .5rem 1rem !important;
    height: auto !important;
    font-size: 1rem !important;
}

.dt-buttons {
    margin: 0 0 10px 10px;
    float: left
}

.dt-container {
    margin-top: 3px
}

.btn-group {
    direction: rtl
}

.dt-paging {
    margin-bottom: 10px
}

@media screen and (min-width:768px) {

    .dt-info,
    .dt-paging nav {
        margin-inline-start: 15px
    }

    .dt-paging {
        width: fit-content;
        float: right;
        padding-bottom: 15px;
    }

    .dt-length {
        width: fit-content;
        float: left;
        margin-inline-end: 10px;
    }
}

.dt-length label,
.dt-length {
    font-weight: bold !important;
}

.dt-column-order:after,
.dt-column-order:before {
    color: var(--bs-primary)
}

.dt-column-order:before {
    bottom: 52%
}

.dt-column-order:after {
    color: var(--bs-primary)
}

.table>:not(caption)>*>* {
    border-bottom-width: var(--bs-border-width);
    padding: .75rem 1rem;
}

/* Hide the sizing thead DataTables clones into the scroll body under scrollX — and
   ONLY that one. A descendant selector here also swallowed the thead of any table
   nested inside a cell (the per-order item tables in external/book_ordering/orders.php
   lost their מק"ט / שם / כמות / מחיר headers), so it is scoped to the direct child. */
.dt-scroll-body > table > .table-light {
    display: none !important;
}

.dt-scroll-body {
    top: 0px !important
}

.dt-column-title {
    margin-inline-start: 5px;
}

.dt-column-order::before {
    margin-top: -2px;
}

.dt-column-order::after {
    margin-top: 2px;
}

.dt-scroll .dt-scroll-body {
    max-height: none !important;
    height: auto !important;
}

.dtsp-panesContainer .dt-scroll .dt-scroll-body {
    top: 10px !important;
    max-height: 200px !important;
    height: 200px !important;
}

.dt-column-order {
    right: 12px !important;
    left: auto !important;
}

.dt-column-title {
    float: right !important;
    text-align: start !important;
}

table.dataTable th {
    text-align: start !important;
}

.dtsp-searchPane .dt-buttons {
    margin: 40px 0 10px 10px !important;
}

.dtsp-buttonGroup * {
    min-width: auto !important;
}

.dt-length-0 {
    width: 100px !important;
}

.dataTable {
    width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

.dataTable th,
.dataTable td {
    white-space: nowrap !important;
    padding: 12px 15px !important;
    text-align: start !important;
    min-width: max-content !important;
}

.dataTable th:nth-child(2),
.dataTable td:nth-child(2) {
    min-width: 80px !important;
    width: 80px !important;
}

.dataTable .fixed-width-column {
    white-space: normal !important;
    word-break: break-word;
    min-width: 350px !important;
    max-width: 450px !important;
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table,
.dataTables_scrollBody table {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (min-width: 800px) {

    .appointment_box,
    .btn_div {
        width: 70%;
    }
}

.layout-row {
    display: block;
    width: 100%;
    padding: 2px 0;
}

.layout-row-split {
    display: table;
    width: 100%;
    table-layout: auto;
}

.layout-row-split-auto {
    display: table;
    width: 100%;
    table-layout: auto;
}

.layout-row+.layout-row {
    margin-top: 6px;
}

.layout-col {
    display: block;
    width: 100%;
}

.layout-row-split .layout-col {
    display: table-cell;
    width: auto;
    vertical-align: middle;
}

.layout-row-split-equal {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.layout-row-split-equal .layout-col {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

.layout-row-split-auto .layout-col {
    display: table-cell;
    width: auto;
    vertical-align: middle;
}

.layout-col-fit {
    width: 1%;
}

.layout-col-fill {
    width: auto;
}

.layout-row-split-auto .layout-col-fit .badge {
    white-space: nowrap;
}

.layout-badges-no-wrap {
    white-space: nowrap;
}

.layout-badges-no-wrap .badge {
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .layout-row-split-auto .layout-col-fit .badge {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .layout-badges-no-wrap {
        white-space: normal;
    }

    .layout-badges-no-wrap .badge {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.layout-col-right {
    text-align: start !important;
}

.layout-col-left {
    text-align: end !important;
}

.layout-spacer {
    height: 6px;
}

.layout-spacer-lg {
    height: 12px;
}

.layout-meta {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.layout-actions {
    justify-content: flex-start;
    gap: 8px;
}

.layout-row .badge {
    padding: .35rem .6rem;
    border-radius: 999px;
}

@media screen and (max-width: 600px) {
    .layout-row-split {
        display: table;
    }
}

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn-sm,
.btn-lg {
    white-space: nowrap;
}

/* ...but a dselect's toggle is a button.form-select too, and a long chosen option ran out of
   its box and over the buttons beside it (the teacher's form report picker over "חזרה", PG-1085).
   The panel has no such rule, so its toggle wraps; here it wraps the same way. */
.dselect-wrapper > button.form-select {
    white-space: normal;
}

#dt-length-0 {
    max-width: 80px !important;
    margin-bottom: 5px;
    padding: .375rem 1.35rem .375rem 1.75rem !important;
}

.dt-buttons .btn {
    border-right: 0px !important;
    border: 0px !important
}

.max-width-90 {
    max-width: 90% !important;
}

.icon-xxl {
    height: 4rem;
    width: 4rem;
    font-size: 1.5rem;
}

.icon-shape {
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1;
}

.icon-shape > .bi {
    height: auto !important;
    width: auto !important;
    font-size: inherit;
}

.pagination-print-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .action-bar .layout-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .action-bar .layout-row > .btn,
    .action-bar .layout-row > a.btn {
        flex: 1 1 calc(50% - 3px);
        white-space: nowrap;
        margin-inline-end: 0 !important;
        margin-bottom: 0 !important;
        font-size: 0.85rem;
        padding-inline: 0.5rem;
    }

    .action-bar .layout-row > .btn > i,
    .action-bar .layout-row > a.btn > i {
        margin-inline-end: 4px;
    }

    .table .btn-success.btn-sm span {
        display: none;
    }

    .table .btn-success.btn-sm {
        padding: 0.3rem 0.6rem;
    }
}

.sidebar-link:has(.sidebar-new-pill) > span:last-child {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.sidebar-new-pill {
    position: relative;
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    white-space: nowrap;
    margin-inline-start: 16px;
    overflow: visible;
    flex-shrink: 0;
}

.sidebar-new-lines {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    fill: none;
    stroke: #c084fc;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: sidebar-lines-pulse 2.5s ease-in-out infinite;
}

@keyframes sidebar-lines-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
}

/* ============================================================
   CREATE CERTIFICATION — step form (regular RTL panel)
   ============================================================ */
.cert-create-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a8bc4, #0c5a8a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.cert-step-card {
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    direction: rtl;
    text-align: start;
}
.cert-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e9f0;
}
.cert-step-badge {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: #1a8bc4;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.cert-step-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: #222;
    display: flex;
    align-items: center;
}
.cert-step-body {
    padding: 1.25rem;
}
.cert-info-box {
    background: #eef4ff;
    border: 1px solid #c5d8f8;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.87rem;
    color: #1a4e8a;
    line-height: 1.65;
    margin-top: 1rem;
}
.cert-warn-box {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 10px;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
    color: #7b5800;
    font-size: 0.9rem;
}

.ticket-list-thumb {
    max-width: 60px;
    border-radius: 8px;
    cursor: pointer;
}

.sa-wrap {
    text-align: center;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
}
.sa-top,
.sa-bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sa-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding-top: 0.5rem;
}
.sa-title {
    font-size: 1.6rem;
    color: var(--main-color);
    margin-bottom: 0.75rem;
}
.sa-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1rem;
}
.sa-icon img,
.sa-icon svg {
    width: 100%;
    height: 100%;
}
.sa-icon:has(> img[src*="logo_p_check"]) {
    padding: 10px;
    box-sizing: border-box;
    background: #e8f7f1;
    border-radius: 50%;
}
.sa-text {
    font-size: 0.95rem;
    /* 28/10 (Amit: "לא רואים אותו") — the same clear ink as the panel's (theme_custom.css .sa-text) */
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
[data-bs-theme="dark"] .sa-text {
    color: #e2e8f0;
}
.sa-reveal {
    visibility: hidden;
    opacity: 0;
}
.sa-reveal.sa-visible {
    visibility: visible;
    animation: sa-reveal-in 0.4s ease forwards;
}
@keyframes sa-reveal-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.sa-icon.sa-pop {
    animation: sa-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Must stay AFTER .sa-icon.sa-pop: both are specificity (0,2,0) and both set the
   `animation` shorthand, so source order decides. Mirrors M/assets/css/theme_custom.css. */
.sa-icon.sa-spinning {
    animation: sa-spin 1s linear infinite;
}
@keyframes sa-spin {
    to { transform: rotate(360deg); }
}
@keyframes sa-pop-in {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
}

/* sms_system/insert - teacher messaging */
.sms-form-section {
    background: var(--bs-gray-100);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.sms-student-row {
    transition: background-color 0.15s;
}

.sms-student-row:hover {
    background-color: rgba(var(--main-color-rgb, 67, 94, 190), 0.04);
}

.sms-student-row td {
    vertical-align: middle;
}

.sms-message-cell textarea {
    margin-top: 0.5rem;
}

.sms-message-preview {
    background: rgba(var(--main-color-rgb, 67, 94, 190), 0.06);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.sms-select-all-row td {
    background: var(--bs-gray-100);
    border-bottom: 2px solid var(--bs-border-color);
}

.sms-spinner-text {
    color: var(--main-color);
    font-size: 1.5rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .sms-spinner-text {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   .premium-table — premium DataTables treatment for the REGULAR panel.
   Ported from the admin panel (M/assets/css/theme_custom.css), with the accent
   recolored from purple to the regular panel's blue (#152b78). Opt-in: add the
   class `premium-table` to a DataTables page's outer .card. Targets the shared
   initAjaxDataTable() markup (.dt-search / .dt-buttons / .dt-paging / table).
   ========================================================================== */
.premium-table {
    --pt-primary: #152b78;
    --pt-primary-light: #2e54b8;
    --pt-line: #e7ecf7;
    --pt-soft: #f6f8fc;
    --pt-muted: #7c84a3;
    --pt-ink: #1e2440;
    box-shadow: 0 18px 44px -30px rgba(30, 35, 55, .5);
}

/* dark charcoal segmented toolbar (advanced-filter / columns / export) */
.premium-table .dt-buttons.btn-group,
.premium-table .dt-buttons.btn-group .btn-group {
    gap: 0 !important;
}
.premium-table .dt-buttons.btn-group {
    background: linear-gradient(135deg, #6c757d, #565e64);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(108, 117, 125, 0.25);
}
[data-bs-theme=dark] .premium-table .dt-buttons.btn-group {
    background: linear-gradient(135deg, #3a4252, #2f353e);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
}
.premium-table .dt-buttons.btn-group .btn,
.premium-table .dt-buttons.btn-group .btn-group .btn {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-inline-start: -1px !important;
}
.premium-table .dt-buttons.btn-group .btn:first-child,
.premium-table .dt-buttons.btn-group .btn-group:first-child .btn {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    margin-inline-start: 0 !important;
}
.premium-table .dt-buttons.btn-group .btn:last-child,
.premium-table .dt-buttons.btn-group .btn-group:last-child .btn {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* header: bold title + a faint gradient separator instead of a hard line */
.premium-table > .card-header {
    position: relative;
    background: #fff !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}
.premium-table > .card-header h4,
.premium-table > .card-header h5 {
    font-weight: 800;
    color: var(--pt-ink);
    letter-spacing: -.02em;
}
.premium-table > .card-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 1.5rem;
    left: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, transparent, var(--pt-primary-light), transparent);
    opacity: .35;
}
/* breathing room below the header separator when the table sits directly in the
   card (no padded .card-body to provide it, unlike pages that wrap it in one) */
.premium-table > .card-header:has(+ :not(.card-body)) {
    margin-bottom: 1rem !important;
}

/* search box → pill with focus ring */
.premium-table .dt-search > .form-control {
    border-radius: 999px;
    border: 1px solid #d2ddf1;
    background: #f2f6fc;
    padding-inline: 1.1rem !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.premium-table .dt-search > .form-control:focus {
    background: #fff;
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 .2rem rgba(21, 43, 120, .14);
}

/* header row: recolor only (blue band + muted labels). Padding untouched so the
   DataTables sort arrows keep their reserved space. */
.premium-table table thead th,
.premium-table table thead.table-light th {
    background: #e6ecf9 !important;
    color: #38477e !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #d2ddf1 !important;
}
/* round the header band corners ONLY when the table is inset — i.e. inside a
   padded .card-body. Flush tables (.table-responsive directly in the card, or a
   .card-body.px-0) span edge-to-edge, so rounding would notch the card corner. */
.premium-table .card-body:not(.px-0) table thead th:first-child { border-top-right-radius: 12px; }
.premium-table .card-body:not(.px-0) table thead th:last-child { border-top-left-radius: 12px; }
.premium-table .card-body.px-0 .dt-paging {
    margin-inline-start: 45px !important;
    margin-bottom: 14px !important;
}

/* dark mode (neutral dark slate; only applies when data-bs-theme=dark) */
[data-bs-theme=dark] .premium-table > .card-header {
    background: #1e293b !important;
}
[data-bs-theme=dark] .premium-table > .card-header h4,
[data-bs-theme=dark] .premium-table > .card-header h5 {
    color: #e7ecf5;
}
[data-bs-theme=dark] .premium-table table thead th,
[data-bs-theme=dark] .premium-table table thead.table-light th {
    background: #242c46 !important;
    color: #a7afcb !important;
    border-bottom-color: #323c5a !important;
}
[data-bs-theme=dark] .premium-table table tbody td {
    border-bottom-color: #333d5c !important;
}
[data-bs-theme=dark] .premium-table table tbody tr:hover td {
    background-color: #28324d !important;
}
[data-bs-theme=dark] .premium-table .dt-search > .form-control {
    background: #1a2336;
    border-color: #323c5a;
    color: #e7ecf5;
}
[data-bs-theme=dark] .premium-table .dt-length select {
    background: #1a2336;
    border-color: #323c5a;
    color: #e7ecf5;
}
[data-bs-theme=dark] .premium-table .pagination .page-link {
    background: linear-gradient(180deg, #2a3350 0%, #232c44 100%) !important;
    border-color: #3a4566 !important;
    color: #c6cce0 !important;
}
[data-bs-theme=dark] .premium-table .pagination .page-link:hover {
    background: linear-gradient(180deg, #34406a 0%, #2c3759 100%) !important;
    color: #fff !important;
}
[data-bs-theme=dark] .premium-table tbody .badge { border-color: transparent !important; }
[data-bs-theme=dark] .premium-table tbody .badge.bg-success { background: rgba(16, 185, 129, .2) !important; color: #34d399 !important; }
[data-bs-theme=dark] .premium-table tbody .badge.bg-danger  { background: rgba(244, 63, 94, .2) !important; color: #fb7185 !important; }
[data-bs-theme=dark] .premium-table tbody .badge.bg-warning { background: rgba(245, 158, 11, .2) !important; color: #fbbf24 !important; }
[data-bs-theme=dark] .premium-table tbody .badge.bg-info    { background: rgba(59, 130, 246, .2) !important; color: #60a5fa !important; }
[data-bs-theme=dark] .premium-table tbody .badge.bg-primary { background: rgba(99, 130, 230, .22) !important; color: #93b4f7 !important; }
[data-bs-theme=dark] .premium-table tbody .badge.bg-secondary { background: rgba(148, 163, 184, .2) !important; color: #cbd5e1 !important; }

/* body rows: taller, zebra striping, soft dividers, accent hover */
.premium-table table tbody td {
    padding: 10px 16px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e1e3f0 !important;
}
.premium-table table tbody tr {
    transition: background .15s ease;
}
.premium-table table tbody tr:hover td {
    background-color: #ecf1fb !important;
}
.premium-table table tbody tr:last-child td {
    border-bottom: none !important;
}

/* pagination → one connected segmented control. Targets the bare Bootstrap
   `.pagination` so it covers BOTH the DataTables pager (.dt-paging .pagination)
   and the shared server-side pager from M/inc/pagination.php. */
.premium-table .pagination {
    gap: 0 !important;
}
/* kill any per-item spacing (e.g. the JS pager adds .mx-1) so segments touch */
.premium-table .pagination .page-item {
    margin: 0 !important;
}
.premium-table .pagination .page-link {
    position: relative;
    margin: 0 !important;
    margin-inline-start: -1px !important;
    border: 1px solid #d2ddf1 !important;
    border-radius: 0 !important;
    padding: .45rem .95rem !important;
    color: #2c3a6b !important;
    font-weight: 600;
    background: linear-gradient(180deg, #e3eaf8 0%, #d2ddf2 100%) !important;
    transition: all .2s ease;
}
.premium-table .pagination .page-item:first-child .page-link {
    margin-inline-start: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
.premium-table .pagination .page-item:last-child .page-link {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
.premium-table .pagination .page-link:hover {
    z-index: 1;
    border-color: var(--pt-primary) !important;
    color: var(--pt-primary) !important;
    background: linear-gradient(180deg, #cdd9f1 0%, #b9c9ec 100%) !important;
}
.premium-table .pagination .page-item.active .page-link {
    z-index: 2;
    background: linear-gradient(135deg, var(--pt-primary-light), var(--pt-primary)) !important;
    border-color: var(--pt-primary) !important;
    color: #fff !important;
}
.premium-table .pagination .page-item.disabled .page-link {
    opacity: .55;
}

/* length select + info text */
.premium-table .dt-length select {
    border-radius: 8px;
    border: 1px solid var(--pt-line);
}
.premium-table .dt-info {
    color: var(--pt-muted);
    font-size: .85rem;
}
[data-bs-theme=dark] .premium-table .dt-info {
    color: #8a92b3;
}

/* scroll-body sizing thead: neutralize color only (don't touch layout) */
.premium-table .dt-scroll-body table thead th {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

/* status chips → soft tinted pills */
.premium-table tbody .badge {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    border-radius: 999px;
    padding: .38em .8em;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .01em;
    line-height: 1.25;
    border: 1px solid transparent;
    vertical-align: middle;
}
/* leading status dot (uses the badge text colour) */
.premium-table tbody .badge::before {
    content: "";
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.premium-table tbody .badge.bg-success   { background: #ecfdf3 !important; color: #067647 !important; border-color: #a9efc5 !important; }
.premium-table tbody .badge.bg-danger    { background: #fef3f2 !important; color: #b42318 !important; border-color: #fecdca !important; }
.premium-table tbody .badge.bg-warning   { background: #fffaeb !important; color: #b54708 !important; border-color: #fedf89 !important; }
.premium-table tbody .badge.bg-info      { background: #eff8ff !important; color: #175cd3 !important; border-color: #b2ddff !important; }
.premium-table tbody .badge.bg-primary   { background: #eef2fb !important; color: #152b78 !important; border-color: #c7d3f0 !important; }
.premium-table tbody .badge.bg-secondary { background: #f8fafc !important; color: #475467 !important; border-color: #e4e7ec !important; }
.premium-table tbody .badge.bg-dark      { background: #f2f4f7 !important; color: #344054 !important; border-color: #d0d5dd !important; }
.premium-table tbody .badge.bg-light     { background: #f8fafc !important; color: #475467 !important; border-color: #e4e7ec !important; }

/* legacy span-based pager (.table_pages) used by table_pages.js pages that don't
   render the Bootstrap .pagination markup → match the premium blue treatment.
   Scoped to .premium-table so non-opted-in pages keep their current pager. */
.premium-table .table_pages .nums_div span {
    border: 1px solid #d2ddf1;
    background: linear-gradient(180deg, #e3eaf8 0%, #d2ddf2 100%);
    color: #2c3a6b !important;
    border-radius: 8px;
    padding: .4rem .8rem;
    margin-inline-start: 8px;
    font-weight: 600;
    transition: all .2s ease;
}
.premium-table .table_pages .nums_div span:hover {
    border-color: var(--pt-primary);
    color: var(--pt-primary) !important;
    background: linear-gradient(180deg, #cdd9f1 0%, #b9c9ec 100%);
}
.premium-table .table_pages .nums_div .selected {
    background: linear-gradient(135deg, var(--pt-primary-light), var(--pt-primary)) !important;
    border-color: var(--pt-primary);
    color: #fff !important;
}
.premium-table .table_pages .right_arrow,
.premium-table .table_pages .left_arrow {
    border-color: var(--pt-primary);
}
[data-bs-theme=dark] .premium-table .table_pages .nums_div span {
    background: linear-gradient(180deg, #2a3350 0%, #232c44 100%);
    border-color: #3a4566;
    color: #c6cce0 !important;
}



/* short.php — the /s/{token} interstitial, shown only when a short link points off-site,
   plus its two broken-link states. Sits on the blue general-pages background. */
.sl-wrap {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.sl-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(34, 62, 156, .18);
}

.sl-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #223e9c;
    margin-bottom: .5rem;
}

.sl-title-bad {
    color: #d64550;
}

.sl-note {
    color: #6c757d;
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.sl-note-last {
    margin-bottom: 0;
}

.sl-url {
    background: #f4f6fb;
    border-radius: 10px;
    padding: .65rem .8rem;
    font-size: .8rem;
    color: #495057;
    word-break: break-all;
    margin-bottom: 1.25rem;
}

.sl-btn {
    width: 100%;
}

/* ── מעבר למערכת הפדגוגית ─────────────────────────────────────────────
   The label IS the pedagogy wordmark, so the row carries no Hebrew caption
   beside it — the logo says the name. Sized by height only: the artwork is
   691x255 and a forced width squashes it. Shared by both panels; keep the two
   copies identical. */
.pedagogy-wordmark {
    height: 1.15rem;
    width: auto;
    max-width: 100%;
    display: block;
    flex: 0 0 auto;
}

.pedagogy-out {
    font-size: .75em;
    opacity: .5;
    margin-inline-start: .15rem;
}

/* The standalone pill, for a card header rather than a sidebar row. */
.pedagogy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border: 1px solid rgba(0, 106, 182, .35);
    border-radius: 15px;
    background: #fff;
    color: #00334C;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pedagogy-link-btn:hover,
.pedagogy-link-btn:focus-visible {
    border-color: #006AB6;
    box-shadow: 0 2px 10px -4px rgba(0, 106, 182, .7);
}

[data-bs-theme="dark"] .pedagogy-link-btn {
    background: transparent;
    border-color: rgba(90, 169, 224, .5);
}

/* The same wordmark as a tile in the home grid. The sidebar sizes it by height
   inside a row; here it IS the tile's badge, standing where every other card
   puts its 75px icon circle — so it is sized by WIDTH and left to find its own
   height. Fixing the height instead would let max-width squash the 691x255
   artwork the moment the card is narrower than 2.71x that height, which is the
   distortion the sidebar rule exists to avoid in the first place.
   pedagogy_logo.png (not the white one) carries its own blue field, so the tile
   needs no plate behind it and reads the same on a light or a dark card. */
.pedagogy-wordmark.pedagogy-nav-logo {
    height: auto;
    width: 100%;
    max-width: 176px;
    margin: 6px auto 12px;
    border-radius: 14px;
}

/* ── Multi-select dselect (ticket type) ──
   dselect prints one .dselect-tag per selection at display:block, so the toggle grows
   ~24px per pick next to 38px siblings. Cap it and let it scroll. overflow-x has to be
   spelled out: per spec the second axis computes to `auto` once one axis is not
   `visible`, and that clips each tag's remove X out of reach.
   `height: auto` has to come first: the toggle inherits a fixed 46px height from the
   theme's .form-select, and a fixed height makes max-height inert — measured at three
   tags the box stayed 46px around 63px of content, so the third tag and its remove X
   were only reachable by scrolling a 44px strip. */
.dselect-wrapper.dselect-multi-compact > button.form-select {
    /* `height: auto` lets the toggle grow with the tags, but it also beats the height a
       page pins on its fields (this selector is more specific), and an empty picker then
       collapsed to 23px next to 46px siblings. The floor keeps it the size of a normal
       field; a page with taller fields raises it through the variable. */
    height: auto;
    min-height: var(--dselect-multi-min-height, 38px);
    max-height: 132px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The placeholder option must exist (a `multiple` dselect with no empty option renders a
   blank toggle) and must be disabled (it is a marker, not a choice) — but dselect still
   gives it a row in the list. :only-child keeps a genuine "no options" message visible. */
.dselect-wrapper.dselect-multi-compact .dselect-items > .dropdown-item[data-dselect-value=""]:not(:only-child) {
    display: none;
}

/* The tag's remove X is an inline SVG printed straight after the label, so it sits on the
   text baseline — visually raised — and butts up against the last letter with no gap.
   Laying the tag out as a flex row centres the X on the label and opens a real space;
   `flex: 0 0 auto` keeps it at its 14px even when the label is long enough to overflow. */
.dselect-wrapper.dselect-multi-compact .dselect-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dselect-wrapper.dselect-multi-compact .dselect-tag-remove {
    flex: 0 0 auto;
}

/* ── "כניסה בתור" by the pgishonim team — the strip at the top of the page ──────────
   www/inc/header.php, inside #main_div, only while a staff member or a support employee is in as a
   parent, teacher or student (loginAsPerson()). Amber: this is somebody else's site, and whatever is
   done here is done in their name. The way back is the one filled button on it. Dark mode lives in
   app-dark-custom.css — that file's `*` text rule loads after this one and would win. */
.pg-loginas-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    /* #main_div starts under the fixed 55px top bar (its 32px padding is not enough on its own). */
    margin: 32px 0 16px;
    padding: 10px 16px;
    border: 1px solid #f1d7a1;
    border-radius: 12px;
    background: #fff8ed;
    color: #1e2440;
    font-size: .9375rem;
}

.pg-loginas-bar__who {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
}

.pg-loginas-bar__back {
    border-radius: 999px;
    white-space: nowrap;
}

.pg-loginas-bar__back:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #152b78;
}

/* ── A new phone number waiting its 48 hours — the strip at the top of the page ──────────────
   www/inc/header.php, inside #main_div, on every page of an account whose new number has not
   taken over yet (inc/functions/phone_change.php). The same shape as the "כניסה בתור" strip, in
   the site's navy: a notice about the account itself, with one way to stop it. Dark mode lives in
   app-dark-custom.css. */
.pg-phonewait-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 32px 0 16px;
    padding: 10px 16px;
    border: 1px solid #cfd9f3;
    border-radius: 12px;
    background: #eef2fc;
    color: #1e2440;
    font-size: .9375rem;
}

/* Under the "כניסה בתור" strip the gap to the top bar is already taken. */
.pg-loginas-bar + .pg-phonewait-bar {
    margin-top: 0;
}

.pg-phonewait-bar__text b {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.pg-phonewait-bar__ask {
    color: #637381;
}

.pg-phonewait-bar__cancel {
    border: 1px solid #152b78;
    border-radius: 999px;
    color: #152b78;
    background: #fff;
    white-space: nowrap;
    transition: background-color 160ms cubic-bezier(.4, 0, .2, 1), color 160ms cubic-bezier(.4, 0, .2, 1);
}

.pg-phonewait-bar__cancel:hover {
    background: #152b78;
    color: #fff;
}

.pg-phonewait-bar__cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #152b78;
}

@media (prefers-reduced-motion: reduce) {
    .pg-phonewait-bar__cancel {
        transition: none;
    }
}

/* "החלפת מספר טלפון" in update_info.php: the line under the phone while a new one waits, the
   window's lead sentence, and the six-digit code field. */
.pc-wait-note,
.pc-modal-lead {
    color: #637381;
    font-size: .875rem;
}

.pc-wait-note b {
    color: #1e2440;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.form-control.pc-code {
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

/* "לא הגיע הקוד? שלחו בווצאפ" under the code: the link's hit area grows without moving the lines around it. */
.pc-wa {
    color: #637381;
    font-size: .9375rem;
    text-align: center;
}

.btn.pc-wa__btn {
    padding: 8px 4px;
    margin: -8px -4px;
    border: 0;
    font-size: inherit;
    vertical-align: baseline;
    box-shadow: none;
}

.pc-wa__btn .bi-whatsapp {
    color: #1a9e4b;
}

/* ---------------------------------------------------------------------------
   English (left to right). These components pin direction: rtl above; that is
   correct for Hebrew and Arabic and wrong for a language that reads the other
   way, so release them - and only them - when the page itself is ltr.
   --------------------------------------------------------------------------- */
html[dir="ltr"] #app,
html[dir="ltr"] .btn-group,
html[dir="ltr"] .cert-step-card {
    direction: ltr;
}

/* The switcher needs no override here: since 2026-09-23 its knob moves with inset-inline-start/end,
   which mirror with the page (the old knob moved by translateX and had to be flipped by hand). */