/*
 * cExam shared interface system.
 * Loaded after the legacy stylesheet so control-panel and public-page actions
 * use one visual language without changing the live exam runtime.
 */
/* Single-choice fields retain native HTML values, validation and keyboard behavior.
 * Keep their picker in the page's top layer on supporting browsers, rather than
 * relying on an OS popup whose opening animation cannot be controlled by CSS.
 * Select2, multiple selects and visible listboxes keep their existing renderer.
 */
select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible) {
    animation: none !important;
    transition: none !important;
    border-color: #cbd5e1;
    background-position: right 12px center;
}

@supports (appearance: base-select) and selector(::picker(select)) {
    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible),
    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible)::picker(select) {
        appearance: base-select !important;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible) {
        background-image: none !important;
        color-scheme: light;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
        padding-inline-end: 12px !important;
    }

    /* Bootstrap's block form controls override the base-select flex layout,
     * pushing the picker icon below the value. Keep both in the same row.
     * Do not override explicitly hidden controls or inline display toggles. */
    select:not([hidden]):not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible) {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible):focus-visible {
        outline: 2px solid #9bc9e8 !important;
        outline-offset: 2px !important;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible)::picker(select) {
        box-sizing: border-box;
        inline-size: anchor-size(width);
        min-inline-size: 0;
        max-inline-size: calc(100vw - 24px);
        max-block-size: min(320px, 45dvh);
        overflow: auto;
        overscroll-behavior: contain;
        margin-block: 4px;
        padding: 4px;
        border: 1px solid #bfd3e5;
        border-radius: 12px;
        background: #fff;
        color: #1e293b;
        box-shadow: 0 6px 18px rgba(15, 76, 129, .14);
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible)::picker-icon {
        flex: 0 0 auto;
        margin-inline-start: auto;
        color: #085294;
        animation: none !important;
        transition: none !important;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible) option {
        padding: 10px 12px;
        border: 0;
        border-radius: 8px;
        background: #fff;
        color: #1e293b;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible) option:is(:hover, :focus, :checked) {
        background: #eaf5fd;
        color: #07528f;
    }

    select:not([multiple]):is(:not([size]), [size="1"]):not(.multiple-select-field):not(.select2-hidden-accessible) option:disabled {
        color: #64748b;
        background: #f8fafc;
    }
}

:root {
    /* Blue action colours and gradients are owned by site-theme.css. */
    --cexam-ui-green-a: #39c978;
    --cexam-ui-green-b: #168b4a;
    --cexam-ui-green-c: #0b6471;
    --cexam-ui-red-a: #ef5a67;
    --cexam-ui-red-b: #c7111e;
    --cexam-ui-red-c: #8f1427;
    --cexam-ui-purple-a: #8b5cf6;
    --cexam-ui-purple-b: #5b5ce2;
    --cexam-ui-purple-c: #2869bf;
    --cexam-ui-orange-a: #f8b424;
    --cexam-ui-orange-b: #f97316;
    --cexam-ui-orange-c: #d95147;
    --cexam-ui-slate-a: #ffffff;
    --cexam-ui-slate-b: #eef5fb;
    --cexam-ui-slate-c: #d9e8f5;
    --cexam-ui-action-radius: 13px;
    --cexam-ui-action-height: 50px;
    --cexam-ui-action-padding: 13px 22px;
    --cexam-ui-action-font-size: 15px;
    --cexam-ui-nav-mobile-size: 40px;
    --cexam-ui-nav-mobile-radius: 11px;
}

/* -------------------------------------------------------------------------
 * Shared decorated shell structure — appearance lives in site-theme.css
 * ---------------------------------------------------------------------- */
.common_card {
    position: relative !important;
    box-sizing: border-box;
}

/* Public pages previously added another 50px inside the same decorated frame. */
.common_card > .candidate_dashboard {
    position: relative;
    z-index: 2;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.common_card > .common_border_frame {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* Structural helpers; the central theme owns title and frame geometry. */
.common_card .common_vector { pointer-events: none; z-index: 4; }
.common_card .common_vector img { display: block; height: auto; }
.site_heading.cexam-page-heading .head_vector { margin: 0; padding: 0; line-height: 0; }
.cexam-page-heading + section > .container > .common_card,
.cexam-page-heading ~ section > .container > .common_card { margin-top: 0; }
.common_card > .candidate_dashboard { padding-top: 0 !important; padding-bottom: 0 !important; }
.common-shell .me-guide { max-width: none; margin: 0; padding: 0; }
.common-shell .cdoc { max-width: none; margin: 0; padding: 0; }

/* -------------------------------------------------------------------------
 * Primary navigation toggle
 * ---------------------------------------------------------------------- */
button.navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 13px !important;
    background: var(--cexam-ui-blue-background) !important;
    background-size: 100% 100% !important;
    color: var(--cexam-ui-blue-ink) !important;
    box-shadow: var(--cexam-ui-blue-shadow) !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

button.navbar-toggler i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 32px;
    line-height: 1;
}

button.navbar-toggler:hover,
button.navbar-toggler:focus {
    background: var(--cexam-ui-blue-background) !important;
    color: var(--cexam-ui-blue-ink) !important;
    filter: none;
    box-shadow: var(--cexam-ui-blue-hover-shadow) !important;
    transform: translateY(-1px);
}

button.navbar-toggler:focus-visible {
    outline: 3px solid var(--cexam-ui-blue-focus) !important;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    button.navbar-toggler,
    .site_header .header_left :is(.header-login, .header-logout) {
        box-sizing: border-box;
        height: var(--cexam-ui-nav-mobile-size) !important;
        min-height: var(--cexam-ui-nav-mobile-size) !important;
        border-radius: var(--cexam-ui-nav-mobile-radius) !important;
    }

    button.navbar-toggler {
        width: var(--cexam-ui-nav-mobile-size) !important;
    }

    .site_header .header_left :is(.header-login, .header-logout) {
        min-width: 82px;
        padding: 0 14px !important;
        font-size: 14px !important;
    }

    button.navbar-toggler i {
        font-size: 24px;
    }

}

/* -------------------------------------------------------------------------
 * Shared action geometry
 * ---------------------------------------------------------------------- */
.cexam-ui-button,
.cexam-q-button,
.g-btn,
.cstm_btn,
.search-btn,
.site_btn,
.school-profile-btn,
.edit-btn,
.add-school,
.create_candidate_account_btn,
.additional-info-sm,
.next_btn,
.buy_exam a,
.btn:not(.btn-close):not(.accordion-button):not(.navbar-toggler):not(.note-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: var(--cexam-ui-action-height) !important;
    height: auto !important;
    padding: var(--cexam-ui-action-padding) !important;
    border: 1px solid transparent !important;
    border-radius: var(--cexam-ui-action-radius) !important;
    box-sizing: border-box;
    color: #fff;
    font-family: inherit !important;
    font-size: var(--cexam-ui-action-font-size) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal;
    cursor: pointer;
    box-shadow: var(--cexam-ui-action-shadow, 0 8px 18px rgba(15, 76, 129, .18), inset 0 1px 0 rgba(255,255,255,.22)) !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.cexam-ui-button:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.cexam-ui-button:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.cexam-q-button:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.cexam-q-button:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.g-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.g-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.cstm_btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.cstm_btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.search-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.search-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.site_btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.site_btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.school-profile-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.school-profile-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.edit-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.edit-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.add-school:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.add-school:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.create_candidate_account_btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.create_candidate_account_btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.additional-info-sm:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.additional-info-sm:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.next_btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.next_btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.buy_exam a:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.buy_exam a:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.btn:not(.btn-close):not(.accordion-button):not(.navbar-toggler):not(.note-btn):where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.btn:not(.btn-close):not(.accordion-button):not(.navbar-toggler):not(.note-btn):where(:not(:disabled):not([disabled]):not(.disabled)):focus {
    color: #fff;
    filter: var(--cexam-ui-action-hover-filter, brightness(1.05));
    box-shadow: var(--cexam-ui-action-hover-shadow, 0 12px 24px rgba(15, 76, 129, .25), inset 0 1px 0 rgba(255,255,255,.28)) !important;
    transform: translateY(-2px);
}

.cexam-ui-button:focus-visible,
.cexam-q-button:focus-visible,
.g-btn:focus-visible,
.cstm_btn:focus-visible,
.search-btn:focus-visible,
.site_btn:focus-visible,
.school-profile-btn:focus-visible,
.edit-btn:focus-visible,
.add-school:focus-visible,
.create_candidate_account_btn:focus-visible,
.additional-info-sm:focus-visible,
.next_btn:focus-visible,
.buy_exam a:focus-visible,
.btn:not(.btn-close):not(.accordion-button):not(.navbar-toggler):not(.note-btn):focus-visible {
    outline: 3px solid var(--cexam-ui-blue-focus) !important;
    outline-offset: 3px;
}

.cexam-ui-button:disabled,
.cexam-ui-button[disabled],
.cexam-q-button:disabled,
.cexam-q-button[disabled],
.g-btn:disabled,
.g-btn[disabled],
.cstm_btn:disabled,
.cstm_btn[disabled],
.search-btn:disabled,
.search-btn[disabled],
.btn:disabled,
.btn[disabled] {
    cursor: not-allowed !important;
    filter: grayscale(.35) !important;
    opacity: .58 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Compact table and Bootstrap-small actions keep the same shape. */
.g-btn.g-table,
.btn-sm:not(.note-btn),
.cexam-ui-button.is-small,
.cexam-q-button.is-small {
    min-height: 40px !important;
    padding: 9px 14px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
}

.btn-lg:not(.note-btn),
.cexam-ui-button.is-large {
    min-height: 56px !important;
    padding: 15px 28px !important;
    font-size: 17px !important;
}

/* -------------------------------------------------------------------------
 * Shared action colours
 * ---------------------------------------------------------------------- */
.cexam-ui-button-primary,
.cexam-q-button-primary,
.g-blue,
.cstm_btn,
.search-btn,
.school-profile-btn,
.edit-btn,
.add-school,
.create_candidate_account_btn,
.additional-info-sm,
.btn-primary {
    /* Bootstrap's more-specific geometry rules consume the same state tokens. */
    --cexam-ui-action-shadow: var(--cexam-ui-blue-shadow);
    --cexam-ui-action-hover-shadow: var(--cexam-ui-blue-hover-shadow);
    --cexam-ui-action-hover-filter: none;
    border-color: var(--cexam-ui-blue-border) !important;
    background: var(--cexam-ui-blue-background) !important;
    background-size: 100% 100% !important;
    color: var(--cexam-ui-blue-ink) !important;
    box-shadow: var(--cexam-ui-blue-shadow) !important;
    filter: none;
}

.cexam-ui-button-primary:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.cexam-ui-button-primary:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.cexam-q-button-primary:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.cexam-q-button-primary:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.g-blue:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.g-blue:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.cstm_btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.cstm_btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.search-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.search-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.school-profile-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.school-profile-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.edit-btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.edit-btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.add-school:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.add-school:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.create_candidate_account_btn:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.create_candidate_account_btn:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.additional-info-sm:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.additional-info-sm:where(:not(:disabled):not([disabled]):not(.disabled)):focus,
.btn-primary:where(:not(:disabled):not([disabled]):not(.disabled)):hover,
.btn-primary:where(:not(:disabled):not([disabled]):not(.disabled)):focus {
    background: var(--cexam-ui-blue-background) !important;
    background-size: 100% 100% !important;
    box-shadow: var(--cexam-ui-blue-hover-shadow) !important;
    filter: none;
}

.cexam-ui-button-success,
.cexam-q-button-success,
.g-green,
.site_btn,
.btn-success {
    border-color: #116f3e !important;
    background: linear-gradient(135deg, var(--cexam-ui-green-a) 0%, var(--cexam-ui-green-b) 52%, var(--cexam-ui-green-c) 100%) !important;
    color: #fff !important;
}

.cexam-ui-button-success:hover,
.cexam-q-button-success:hover,
.g-green:hover,
.site_btn:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #46d486 0%, #117c42 52%, #095762 100%) !important;
}

.cexam-ui-button-danger,
.cexam-q-button-danger,
.g-red,
.common_card .red_button,
.red_button,
.red-btn-round .site_btn,
.red-btn-round a.site_btn,
.btn-danger {
    border-color: #b4232e !important;
    background: linear-gradient(135deg, var(--cexam-ui-red-a) 0%, var(--cexam-ui-red-b) 52%, var(--cexam-ui-red-c) 100%) !important;
    color: #fff !important;
}

.cexam-ui-button-danger:hover,
.cexam-q-button-danger:hover,
.g-red:hover,
.common_card .red_button:hover,
.red_button:hover,
.red-btn-round .site_btn:hover,
.red-btn-round a.site_btn:hover,
.red-btn-round a.site_btn:focus,
.btn-danger:hover {
    background: linear-gradient(135deg, #f36a75 0%, #b80f1c 52%, #7f1021 100%) !important;
}

.cexam-ui-button-purple,
.g-purple {
    border-color: #5148ba !important;
    background: linear-gradient(135deg, var(--cexam-ui-purple-a) 0%, var(--cexam-ui-purple-b) 52%, var(--cexam-ui-purple-c) 100%) !important;
    color: #fff !important;
}

.cexam-ui-button-warning,
.g-orange,
.btn-warning {
    border-color: #cf6412 !important;
    background: linear-gradient(135deg, var(--cexam-ui-orange-a) 0%, var(--cexam-ui-orange-b) 55%, var(--cexam-ui-orange-c) 100%) !important;
    color: #fff !important;
}

.cexam-ui-button-light,
.cexam-q-button-light,
.btn-light,
.btn-secondary:not(.note-btn) {
    border-color: #bfd3e5 !important;
    background: linear-gradient(135deg, var(--cexam-ui-slate-a) 0%, var(--cexam-ui-slate-b) 55%, var(--cexam-ui-slate-c) 100%) !important;
    color: #164b75 !important;
    box-shadow: 0 6px 14px rgba(15,76,129,.09), inset 0 1px 0 #fff !important;
}

.cexam-ui-button-light:hover,
.cexam-q-button-light:hover,
.btn-light:hover,
.btn-secondary:not(.note-btn):hover {
    background: linear-gradient(135deg, #fff 0%, #e6f1fb 48%, #cfe3f4 100%) !important;
    color: #07528f !important;
}

.site_btn.site_btn-secondary,
.cexam-ui-button-secondary {
    border-color: #5148ba !important;
    background: linear-gradient(135deg, #7086ee 0%, #5358cf 52%, #33459d 100%) !important;
    color: #fff !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light {
    background: #fff !important;
    box-shadow: 0 5px 12px rgba(15,76,129,.08) !important;
}
.btn-outline-primary { border-color: var(--cexam-ui-blue-border) !important; color: var(--cexam-ui-blue-a) !important; }
.btn-outline-secondary { border-color: #94a3b8 !important; color: #475569 !important; }
.btn-outline-danger { border-color: #c7111e !important; color: #b11220 !important; }
.btn-outline-light { border-color: rgba(255,255,255,.78) !important; color: #fff !important; background: rgba(255,255,255,.08) !important; }

.btn-outline-primary:hover { background: var(--cexam-ui-blue-background) !important; background-size:100% 100%!important; color:var(--cexam-ui-blue-ink)!important; filter:none; }
.btn-outline-secondary:hover { background: linear-gradient(135deg, #64748b, #475569, #334155) !important; color:#fff !important; }
.btn-outline-danger:hover { background: linear-gradient(135deg, var(--cexam-ui-red-a), var(--cexam-ui-red-b), var(--cexam-ui-red-c)) !important; color:#fff !important; }
.btn-outline-light:hover { background:#fff !important; color:#075ea9 !important; }

/* Legacy full-width red form actions keep their useful form width. */
.common_card .red_button {
    width: 100% !important;
    max-width: 350px !important;
    margin: 10px auto 20px !important;
}

.search-bar .search-btn {
    margin-top: 32px;
}

.invites .additional-info-sm {
    margin: 22px 0 !important;
}

/* An inline text action is intentionally not rendered as a full CTA. */
.cexam-inline-action {
    color: #b11220 !important;
    font-weight: 850;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

@media (max-width: 575px) {
    .cexam-ui-button,
    .cexam-q-button,
    .g-btn,
    .cstm_btn,
    .search-btn,
    .site_btn,
    .school-profile-btn,
    .edit-btn,
    .add-school,
    .create_candidate_account_btn,
    .additional-info-sm,
    .next_btn,
    .btn:not(.btn-close):not(.accordion-button):not(.navbar-toggler):not(.note-btn) {
        min-height: 46px !important;
        padding: 12px 17px !important;
        font-size: 14px !important;
    }
}

/* Legacy layout hooks retained while their visual styling is centralized. */
.website-btn {
    margin-top: 50px;
    margin-bottom: 40px;
}
.g-btn {
    margin: 5px;
}
/* Searchable selects share the neutral border of neighbouring form fields. */
.select2-container--bootstrap-5 { border:0; box-shadow:none; }
.select2-container--bootstrap-5 .select2-selection,
.common_card form span.select2-container--bootstrap-5 span.select2-selection { border:1px solid #cbd5e1; border-radius:11px; box-shadow:none; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.common_card form span.select2-container--bootstrap-5.select2-container--focus span.select2-selection,
.common_card form span.select2-container--bootstrap-5.select2-container--open span.select2-selection { border-color:#0b6fb8; box-shadow:0 0 0 3px rgb(11 111 184 / 12%); }
.select2-container--bootstrap-5 .select2-dropdown { border-color:#cbd5e1; }
.select2-container--bootstrap-5 .select2-selection--single { background-position:right 12px center; }
.cexam-people-form-shell .select2-container--bootstrap-5 .select2-selection { min-height:48px; display:flex; align-items:center; background:#fff; color:#1e293b; }
.cexam-people-form-shell .select2-container--bootstrap-5 .select2-selection__rendered { width:100%; }

/* Summernote palettes are editor controls, not full-size page actions. Keep
 * both palettes together and leave the real colour input hidden until its
 * native picker is requested by Summernote. */
body .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu {
    width: 354px;
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: min(420px, 70dvh);
    overflow: auto;
    padding: 10px;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    white-space: normal;
}
body .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu.show { display:grid; }
body .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu:not(:has(.note-palette + .note-palette)) { width:182px; grid-template-columns:minmax(0,1fr); }
body .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette {
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
}
body .note-editor.note-frame .note-toolbar .note-palette .note-palette-title {
    margin: 0 0 7px;
    padding: 2px 0 7px;
    color: #234e70;
    font: 600 12px/1.35 Arial,sans-serif;
    text-align: left;
}
body .note-editor.note-frame .note-toolbar .note-palette :is(.note-color-reset,.note-color-select) {
    display: block !important;
    width: 100% !important;
    min-height: 28px !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 5px 4px !important;
    border: 1px solid #d6e3ed !important;
    border-radius: 5px !important;
    background: #f3f8fc !important;
    color: #234e70 !important;
    box-shadow: none !important;
    transform: none !important;
    font: 500 11px/1.35 Arial,sans-serif !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}
body .note-editor.note-frame .note-toolbar .note-palette :is(.note-color-reset,.note-color-select):hover { background:#e3f0fa!important; }
body .note-editor.note-frame .note-toolbar .note-color-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); height:auto; }
body .note-editor.note-frame .note-toolbar .note-color .note-color-btn {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
}
body .note-editor.note-frame .note-toolbar .note-color .note-color-btn:hover { outline:2px solid #183d61; outline-offset:-2px; }
body .note-editor.note-frame .note-toolbar .note-color .note-color-select-btn { display:none!important; }
body .note-editor.note-frame .note-toolbar .note-holder { margin-bottom:6px; }
body :is(.cexam-blog-content,.cexam-experience) .note-editor.note-frame { overflow:visible; }
body :is(.cexam-blog-content,.cexam-experience) .note-editor.note-frame .note-toolbar { border-radius:13px 13px 0 0; }
body :is(.cexam-blog-content,.cexam-experience) .note-editor.note-frame .note-statusbar { border-radius:0 0 13px 13px; }
@media(max-width:575px) {
    body .note-editor.note-frame .note-toolbar { position:relative; }
    body .note-editor.note-frame .note-toolbar .note-color,
    body .note-editor.note-frame .note-toolbar .note-color .note-btn-group { position:static; }
    body .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu {
        width:294px;
        max-width:calc(100% - 12px);
        padding:8px;
        gap:8px;
        inset:auto!important;
        left:6px!important;
        top:100%!important;
        transform:none!important;
    }
}

/* The central responsive-tables component stacks record tables on small screens. */
.table-responsive,.xp-tablewrap,.dash-data-scroll { max-width:100%; min-width:0; overscroll-behavior-inline:contain; }
.common_card :is(th,td) { overflow-wrap:anywhere; }
@media(max-width:1024px) {
    .table-responsive > table:not(:has(td[data-label])) :is(th,td) { text-align:left; }
}

/* Small-screen content containers: constrain actual content rather than hiding overflow. */
@media screen and (max-width:1100px) {
    body.cexam-site-theme .common_card :is(h1,h2,h3,h4,h5,h6,p,li) {
        overflow-wrap:anywhere;
    }
    body.cexam-site-theme .cexam-q-toolbar > .cexam-q-field {
        min-width:0!important;
        max-width:100%;
    }
    body.cexam-site-theme .cexam-score-module-grid,
    body.cexam-site-theme .cexam-license-filter-grid {
        grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
    }
    body.cexam-site-theme .prepare-sec .row figure {
        width:min(200px, 100%);
        height:auto;
        aspect-ratio:1;
        margin-inline:auto;
    }
    body.cexam-site-theme :is(.me-guide .mg-card, .partner_sec_row, .cdoc-nav a) {
        min-width:0;
        overflow-wrap:anywhere;
    }
    body.cexam-site-theme .cexam-result-lifecycle-page .cexam-q-toolbar > .cexam-q-field {
        min-width:0!important;
        max-width:100%;
        flex-basis:100%!important;
    }
    body.cexam-site-theme .cexam-result-lifecycle-page .cexam-q-toolbar > button {
        max-width:100%;
        white-space:normal;
    }
    body.cexam-site-theme #ma-home .ma-features {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    body.cexam-site-theme #ma-home .ma-feature {
        min-width:0;
        overflow-wrap:anywhere;
    }
    body.cexam-site-theme #ma-home :is(.ma-topbar > .container, .ma-cta .d-flex) {
        flex-wrap:wrap;
    }
}
@media screen and (max-width:600px) {
    body.cexam-site-theme #ma-home .ma-features {grid-template-columns:minmax(0,1fr);}
    body.cexam-site-theme #ma-home .ma-cta .btn {white-space:normal;max-width:100%;}
    body.cexam-site-theme .cexam-q-button {max-width:100%;white-space:normal;overflow-wrap:anywhere;}
    body.cexam-site-theme .cexam-license-quota-form {grid-template-columns:minmax(0,1fr);}
    body.cexam-site-theme .cexam-license-quota-form .cexam-q-actions {min-width:0;}
    body.cexam-site-theme .cexam-license-quota-form .cexam-q-button {margin-inline:0;}
    body.cexam-site-theme .cexam-question-content .cexam-bank-card-actions .cexam-q-button {flex-basis:100%;}
    body.cexam-site-theme .me-sec-step > ul {flex-direction:column;gap:20px;}
    body.cexam-site-theme .me-sec-step > ul::before {display:none;}
    body.cexam-site-theme .me-sec-step > ul > li {text-align:center;}
}