/* Waiting-list portal theme: header/nav restyle (site-wide) + home page (.wl-home) */
:root {
    --wl-gold: #C09A58;
    --wl-slate-900: #0f172a;
    --wl-slate-800: #1e293b;
    --wl-slate-700: #334155;
    --wl-slate-600: #475569;
    --wl-slate-500: #64748b;
    --wl-slate-200: #e2e8f0;
    --wl-slate-100: #f1f5f9;
    --wl-slate-50: #f8fafc;
    --wl-mohp-900: #082f49;
    --wl-mohp-800: #0c4a6e;
    --wl-mohp-700: #075985;
    --wl-mohp-600: #0369a1;
    --wl-mohp-500: #0284c7;
    --wl-sky-50: #f0f9ff;
    --wl-sky-100: #e0f2fe;
    --wl-emerald: #059669;
    --wl-emerald-dark: #047857;
    --wl-red: #dc2626;
    --wl-red-dark: #b91c1c;
    --wl-amber: #d97706;
    --wl-amber-dark: #b45309;
    --wl-slate-300: #cbd5e1;
}

body { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; background: var(--wl-slate-50); color: var(--wl-slate-800); }

/* ---------- Strip 1: branding ---------- */
header .site-head {
    background: #fff;
    border-bottom: 3px solid var(--wl-gold);
    padding: 14px 0;
    color: var(--wl-mohp-900);
    min-height: 0;
}
header .site-head p { margin: 0 0 2px; color: var(--wl-mohp-800); font-weight: 700; }
header .site-head .wl-topstrip-brand span,
header .site-head .wl-topstrip-mcit span { color: var(--wl-mohp-800); font-weight: 700; }
header .site-head img { max-height: 70px; width: auto; }

/* Strip 1 layout: plain flex, own class names so Bootstrap/RTL float
   utilities (.pull-right/.pull-left/.col-*) and the vendor's absolute-
   positioning rules (which keyed off .logo/.mcit) never apply here. */
header .wl-topstrip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
/*    padding: 14px 15px;*/
}
/* kill Bootstrap's .container clearfix pseudo-elements: as flex items they'd
   count as two extra empty boxes and break the space-between layout */
header .wl-topstrip:before,
header .wl-topstrip:after {
    content: none;
    display: none;
}
header .wl-topstrip-brand,
header .wl-topstrip-mcit {
    display: flex;
    align-items: center;
    gap: 12px;
}
header .wl-topstrip-mcit a { display: flex; }

/* logout form + hospital alert bell (used to carry Bootstrap's .navbar-right,
   which floats !important; own classes so they sit in normal flow instead) */
header .wl-topstrip-logout,
header .wl-topstrip-alert {
    float: none;
    margin: 0 0 6px;
}

/* logout name/dropdown list (used to carry Bootstrap's .nav/.navbar-nav,
   which float their <li>s; plain list, no float involved) */
header .wl-topstrip-userlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
header .wl-topstrip-userlist > li { float: none; }

/* user menu button */
header .wl-user-menu { position: relative; }
header .wl-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
/*    background: var(--wl-sky-50);*/
    border: 1px solid var(--wl-sky-100);
    color: var(--wl-mohp-800);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
header .wl-user-toggle:hover,
header .wl-user-toggle:focus,
header .wl-user-menu.open .wl-user-toggle {
    background: var(--wl-sky-100);
    border-color: var(--wl-mohp-500);
    color: var(--wl-mohp-700);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(3, 105, 161, .18);
}
header .wl-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
/*    background: linear-gradient(135deg, var(--wl-mohp-700), var(--wl-mohp-500));*/
    color: #fff;
    font-size: 12px;
    flex: none;
}
header .wl-user-name { white-space: nowrap; }
header .wl-user-caret {
    font-size: 10px;
    color: var(--wl-gold);
    transition: transform .2s;
}
header .wl-user-menu.open .wl-user-caret { transform: rotate(180deg); }

/* user menu dropdown */
header .wl-user-dropdown {
    min-width: 170px;
    padding: 6px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--wl-slate-200);
    border-top: 3px solid var(--wl-gold);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .18);
    animation: wl-dropdown-in .15s ease-out;
}
header .wl-user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-slate-700);
    transition: background .15s, color .15s;
}
header .wl-user-dropdown-link:hover,
header .wl-user-dropdown-link:focus {
    background: var(--wl-sky-50);
    color: var(--wl-mohp-700);
    text-decoration: none;
}
header .wl-user-dropdown-link .fa { color: var(--wl-gold); width: 14px; text-align: center; }
@keyframes wl-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Strip 2: links ---------- */
header .navbar-default {
    background: linear-gradient(90deg, var(--wl-mohp-900), var(--wl-mohp-700));
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(8, 47, 73, .25);
}
header .navbar-default .navbar-nav > li > a {
    color: #e0f2fe;
    font-weight: 600;
    font-size: 15px;
    padding-left: 14px;
    padding-right: 14px;
    transition: background .2s, color .2s;
}
header .navbar-default .navbar-nav > li > a:hover,
header .navbar-default .navbar-nav > li > a:focus,
header .navbar-default .navbar-nav > .open > a,
header .navbar-default .navbar-nav > .open > a:hover,
header .navbar-default .navbar-nav > .open > a:focus {
    background: rgba(255, 255, 255, .12);
    color: var(--wl-gold);
}
header .navbar-default .navbar-nav > .active > a,
header .navbar-default .navbar-nav > .active > a:hover,
header .navbar-default .navbar-nav > .active > a:focus {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--wl-gold);
}
header .navbar-default .navbar-toggle { border-color: rgba(255, 255, 255, .4); }
header .navbar-default .navbar-toggle .icon-bar { background: #fff; }
header .navbar-default .dropdown-menu {
    border: 1px solid var(--wl-slate-200);
    border-top: 3px solid var(--wl-gold);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .18);
}
header .navbar-default .dropdown-menu > li > a { color: var(--wl-slate-700); font-weight: 600; }
header .navbar-default .dropdown-menu > li > a:hover,
header .navbar-default .dropdown-menu > li > a:focus {
    background: var(--wl-sky-50);
    color: var(--wl-mohp-700);
}
header .navbar-default .navbar-nav a,
header .navbar-default .navbar-text { color: #e0f2fe; }
header .navbar-default .dropdown-menu > li > a { color: var(--wl-slate-700); }

/* ---------- Home page ---------- */
.wl-home { direction: rtl; text-align: right; color: var(--wl-slate-800); }
.wl-home * { box-sizing: border-box; }
.wl-home .wl-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.wl-home h3, .wl-home h4, .wl-home p { margin: 0; }

.wl-badge {
    display: inline-block; font-size: 12px; font-weight: 700; color: var(--wl-mohp-600);
    background: var(--wl-sky-100); padding: 4px 12px; border-radius: 999px;
}
.wl-section-title { font-size: 28px; font-weight: 900; color: var(--wl-slate-900); margin: 12px 0 10px; }
.wl-section-sub { font-size: 14px; color: var(--wl-slate-600); }

/* stats */
.wl-stats {
    background: #fff; border: 1px solid var(--wl-slate-200); border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .12); max-width: 1280px; margin: 24px auto 0; padding: 24px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.wl-stat { padding: 8px; }
.wl-stat + .wl-stat { border-right: 1px solid var(--wl-slate-100); }
.wl-stat .num { font-size: 36px; font-weight: 900; line-height: 1.2; }
.wl-stat .lbl { font-size: 14px; font-weight: 600; color: var(--wl-slate-600); margin-top: 4px; }
.wl-stat .tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 6px; }
.c-mohp { color: var(--wl-mohp-700); } .c-slate { color: var(--wl-slate-800); }
.c-gold { color: var(--wl-gold); } .c-green { color: #059669; }
.t-green { color: #047857; background: #ecfdf5; } .t-sky { color: var(--wl-mohp-700); background: var(--wl-sky-50); }
.t-amber { color: #b45309; background: #fffbeb; } .t-purple { color: #7e22ce; background: #faf5ff; }

/* sections */
.wl-section { padding: 64px 0; }
.wl-section.alt { background: var(--wl-slate-100); border-top: 1px solid var(--wl-slate-200); }
.wl-head-center { text-align: center; max-width: 760px; margin: 0 auto 48px; }

.wl-grid { display: grid; gap: 24px; }
.wl-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.wl-grid.g4 { grid-template-columns: repeat(4, 1fr); }

.wl-card {
    background: #fff; border: 1px solid var(--wl-slate-200); border-radius: 16px; padding: 24px;
    transition: border-color .2s, box-shadow .2s;
}
.wl-card:hover { border-color: var(--wl-mohp-500); box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .12); }
.wl-icon {
    width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 16px; transition: transform .2s;
}
.wl-card:hover .wl-icon { transform: scale(1.1); }
.wl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wl-card h4 { font-size: 18px; font-weight: 700; color: var(--wl-slate-900); }
.wl-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.wl-card .desc { font-size: 12px; color: var(--wl-slate-500); margin-bottom: 16px; line-height: 1.7; }
.wl-card .foot {
    border-top: 1px solid var(--wl-slate-100); padding-top: 12px; display: flex;
    align-items: center; justify-content: space-between; font-size: 12px; color: var(--wl-slate-600);
}
.wl-link { background: none; border: 0; padding: 0; color: var(--wl-mohp-600); font-weight: 700; cursor: pointer; font-family: inherit; }
.wl-link:hover { text-decoration: underline; }
.bg-red { background: #fef2f2; color: #dc2626; } .pl-red { background: #fee2e2; color: #b91c1c; }
.bg-sky { background: var(--wl-sky-50); color: var(--wl-mohp-600); } .pl-green { background: #d1fae5; color: #047857; }
.bg-amber { background: #fffbeb; color: #d97706; } .pl-blue { background: #dbeafe; color: #1d4ed8; }
.bg-teal { background: #f0fdfa; color: #0d9488; } .pl-teal { background: #ccfbf1; color: #0f766e; }
.bg-purple { background: #faf5ff; color: #9333ea; } .pl-purple { background: #f3e8ff; color: #7e22ce; }
.bg-indigo { background: #eef2ff; color: #4f46e5; } .pl-indigo { background: #e0e7ff; color: #4338ca; }

/* steps */
.wl-step { text-align: center; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.wl-step .n {
    width: 40px; height: 40px; border-radius: 50%; background: var(--wl-mohp-700); color: #fff;
    font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.wl-step .n.done { background: #059669; }
.wl-step h4 { font-size: 16px; margin-bottom: 8px; }
.wl-step p { font-size: 12px; color: var(--wl-slate-600); line-height: 1.8; }

/* hospitals */
.wl-hosp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.wl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-filters select {
    font-family: inherit; font-size: 12px; font-weight: 700; background: #fff; color: var(--wl-slate-700);
    border: 1px solid #cbd5e1; border-radius: 12px; padding: 8px 12px; outline: none;
}
.wl-filters select:focus { border-color: var(--wl-mohp-600); }
.wl-hosp { padding: 20px; }
.wl-hosp:hover { box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .12); border-color: var(--wl-slate-200); }
.wl-hosp .row1 { display: flex; align-items: flex-start; justify-content: space-between; }
.wl-hosp .org { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.wl-hosp h4 { font-size: 16px; margin-top: 6px; }
.wl-hosp .loc { font-size: 12px; color: var(--wl-slate-500); }
.wl-dot { width: 10px; height: 10px; border-radius: 50%; background: #10b981; flex: none; }
.wl-tags { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wl-slate-100); display: flex; flex-wrap: wrap; gap: 6px; }
.wl-tags span { font-size: 11px; color: var(--wl-slate-600); background: var(--wl-slate-100); padding: 2px 8px; border-radius: 4px; }

/* faq */
.wl-faq { max-width: 896px; margin: 0 auto; }
.wl-faq-item {
    background: #fff; border: 1px solid var(--wl-slate-200); border-radius: 16px; padding: 20px;
    margin-bottom: 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.wl-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-faq-q h4 { font-size: 15px; font-weight: 700; color: var(--wl-slate-900); }
.wl-faq-q .ic { color: var(--wl-mohp-600); font-weight: 700; font-size: 22px; }
.wl-faq-a { display: none; font-size: 14px; color: var(--wl-slate-600); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wl-slate-100); line-height: 1.9; }
.wl-faq-item.open .wl-faq-a { display: block; }

/* footer */
footer {
    background: var(--wl-slate-900);
    border-top: 3px solid var(--wl-gold);
    height: auto;
    min-height: 0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .copyrights {
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}
footer .copyrights img { max-height: 28px; margin-inline-start: 12px; vertical-align: middle; }
footer .copyrights:hover { color: var(--wl-gold); }

.main-label{
    font-size: 15px !important;
}

.sub-label {
    font-size: 14px !important;
}

@media (max-width: 991px) {
    .wl-stats, .wl-grid.g4 { grid-template-columns: repeat(2, 1fr); }
    .wl-grid.g3 { grid-template-columns: repeat(2, 1fr); }
    .wl-stat:nth-child(odd) { border-right: 0; }
}
@media (max-width: 575px) {
    .wl-stats, .wl-grid.g3, .wl-grid.g4 { grid-template-columns: 1fr; }
    .wl-stat + .wl-stat { border-right: 0; border-top: 1px solid var(--wl-slate-100); }
    .wl-section-title { font-size: 22px; }
}

/* =====================================================================
   Global UI kit — form fields, buttons, dropdowns, tables, pagination,
   labels/badges, panels, modals. Plain Bootstrap 3 class selectors, no
   "header" scoping, so this reaches every view without per-page edits.
   The header/nav (strip 1 + strip 2) keeps its own more-specific rules
   above and is untouched by anything here.
   ===================================================================== */

/* ---------- form fields ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
textarea,
select {
    border: 1px solid var(--wl-slate-200) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px;
    color: var(--wl-slate-800) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--wl-mohp-600) !important;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15) !important;
    outline: none !important;
    background-color: #fff !important;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--wl-slate-50) !important;
    color: var(--wl-slate-500) !important;
    cursor: not-allowed !important;
}
::placeholder { color: var(--wl-slate-500) !important; opacity: 1 !important; }
/* native selects: flat modern chevron instead of the OS arrow (RTL: arrow
   sits on the left, matching the reference design's icon placement) */
select.form-control,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .7rem center;
    background-size: 12px;
    padding-left: 28px;
}
select.form-control::-ms-expand,
select::-ms-expand { display: none; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--wl-mohp-600); }

/* ---------- input groups (e.g. a lookup field + attached search button) ---------- */
/* Scoped to .input-group only: the input here already renders at Bootstrap's
   own fixed 34px (untouched), but the attached button is sized by padding
   alone and ends up taller. Match the button to that existing 34px instead
   of introducing a new height value. */
.input-group-addon,
.input-group-btn > .btn {
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background-color: #fff;
    border: 1px solid var(--wl-slate-200);
    color: var(--wl-slate-500);
    font-size: 13px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus {
    background-color: var(--wl-sky-50);
    color: var(--wl-mohp-700);
    border-color: var(--wl-mohp-500);
    z-index: 2;
}
/* rounder join-side corners instead of the stock 4px; same selector list
   bootstrap-rtl.min.css uses for this, so it wins the same specificity tie */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.input-group > .form-control {
    border: 1px solid var(--wl-slate-200);
}

/* ---------- buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .55; box-shadow: none; }
.btn-default {
    background: #fff;
    border-color: var(--wl-slate-200);
    color: var(--wl-slate-700);
}
.btn-default:hover, .btn-default:focus {
    background: var(--wl-slate-50);
    border-color: var(--wl-slate-300);
    color: var(--wl-slate-800);
}
.btn-primary {
    background: linear-gradient(90deg, var(--wl-mohp-700), var(--wl-mohp-600));
    border-color: var(--wl-mohp-700);
    color: #fff;
    box-shadow: 0 2px 8px rgba(3, 105, 161, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(90deg, var(--wl-mohp-800), var(--wl-mohp-700));
    border-color: var(--wl-mohp-800);
    color: #fff;
}
.btn-success {
    background: var(--wl-emerald);
    border-color: var(--wl-emerald);
    color: #fff;
}
.btn-success:hover, .btn-success:focus { background: var(--wl-emerald-dark); border-color: var(--wl-emerald-dark); }
.btn-danger {
    background: var(--wl-red);
    border-color: var(--wl-red);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus { background: var(--wl-red-dark); border-color: var(--wl-red-dark); }
.btn-warning {
    background: var(--wl-amber);
    border-color: var(--wl-amber);
    color: #fff;
}
.btn-warning:hover, .btn-warning:focus { background: var(--wl-amber-dark); border-color: var(--wl-amber-dark); }
.btn-info {
    background: var(--wl-mohp-500);
    border-color: var(--wl-mohp-500);
    color: #fff;
}
.btn-info:hover, .btn-info:focus { background: var(--wl-mohp-600); border-color: var(--wl-mohp-600); }
.btn-link { color: var(--wl-mohp-600); font-weight: 700; }
.btn-link:hover, .btn-link:focus { color: var(--wl-mohp-700); text-decoration: underline; }

/* ---------- dropdowns (site-wide; header keeps its own, more specific rules) ---------- */
.dropdown-menu {
    border: 1px solid var(--wl-slate-200);
    border-top: 3px solid var(--wl-gold);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .15);
    padding: 6px;
    margin-top: 4px;
}
.dropdown-menu > li > a {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-slate-700);
    transition: background .15s, color .15s;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--wl-sky-50);
    color: var(--wl-mohp-700);
}
.dropdown-menu > .divider { background-color: var(--wl-slate-100); margin: 6px 0; }

/* ---------- Select2 (jQuery plugin used on ~24 views) ---------- */
/* Select2 builds its own DOM (.select2-container/.select2-dropdown/...), not
   a native <select>, so nothing above reaches it — a separate component with
   its own vendor CSS. Each view loads its own select2(.min).css inline in
   the body (not through _Layout's <head>), which actually places it AFTER
   this stylesheet in source order; !important is used deliberately here so
   this still wins regardless of that per-view load order, which isn't ours
   to control without touching all 24 views. Chrome (color/border/radius/
   shadow/spacing) only — Select2's own positioning logic is left alone. */
.select2-container--default .select2-selection--single {
    height: 34px !important;
    border: 1px solid var(--wl-slate-200) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--wl-mohp-600) !important;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: var(--wl-slate-800);
    font-size: 13px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wl-slate-500) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wl-mohp-600) transparent;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--wl-slate-200) !important;
    border-radius: 10px !important;
    min-height: 34px !important;
    background-color: #fff !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--wl-mohp-600) !important;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15) !important;
}
.select2-container--default .select2-selection__choice {
    background-color: var(--wl-sky-50) !important;
    border: 1px solid var(--wl-sky-100) !important;
    border-radius: 999px !important;
    color: var(--wl-mohp-700) !important;
    padding: 2px 10px !important;
    font-size: 12px;
    font-weight: 600;
}
.select2-container--default .select2-selection__choice__remove {
    color: var(--wl-mohp-500) !important;
}
.select2-container--default .select2-selection__choice__remove:hover {
    color: var(--wl-red) !important;
}

.select2-dropdown {
    border: 1px solid var(--wl-slate-200) !important;
    border-top: 3px solid var(--wl-gold) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .18) !important;
    overflow: hidden;
}
.select2-search--dropdown { padding: 8px !important; }
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--wl-slate-200) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 13px;
    outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wl-mohp-600) !important;
}
.select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px;
    color: var(--wl-slate-700);
}
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--wl-sky-50) !important;
    color: var(--wl-mohp-700) !important;
}
.select2-results__option[aria-selected="true"] {
    background-color: var(--wl-slate-100) !important;
    color: var(--wl-mohp-800) !important;
    font-weight: 700;
}

/* ---------- tables ---------- */
.table-responsive {
    border: 1px solid var(--wl-slate-200);
    border-radius: 14px;
/*    overflow: hidden;*/
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, .08);
}
.table-responsive > .table { margin-bottom: 0; }
/* Both selector forms on purpose: the plain "th"/"td" one catches older
   views that write bare <tr> rows with no <thead> at all (the browser still
   wraps them in an implicit <tbody>, but never invents a <thead>). The
   thead/tbody-scoped one matches Bootstrap's own selector specificity
   (.table>thead>tr>th, 3 chained type-selectors) so it actually wins on
   well-formed tables too — a plain ".table th" alone is LESS specific than
   Bootstrap's default and silently loses to it (its 8px padding, in
   particular, was still showing through). */
.table th,
.table > thead > tr > th {
    background-color: var(--wl-mohp-800) !important;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: 0;
    padding: 12px 14px !important;
    vertical-align: middle;
/*    white-space: nowrap;*/
}
.table td,
.table > tbody > tr > td {
    padding: 12px 14px !important;
    font-size: 14px;
    color: var(--wl-slate-800);
    border-top: 1px solid var(--wl-slate-100);
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--wl-slate-50); }
.table-hover > tbody > tr:hover { background-color: var(--wl-sky-50); }
.table-bordered,
.table-bordered th,
.table-bordered td,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: 1px solid var(--wl-slate-200); }

/* ---------- pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: var(--wl-slate-200);
    color: var(--wl-slate-700);
    font-weight: 600;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
    background: var(--wl-sky-50);
    color: var(--wl-mohp-700);
    border-color: var(--wl-mohp-500);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--wl-mohp-700);
    border-color: var(--wl-mohp-700);
    color: #fff;
}
.pagination > .disabled > a,
.pagination > .disabled > span { color: var(--wl-slate-500); }

/* ---------- labels / badges ---------- */
.label, .badge {
    border-radius: 999px;
    font-weight: 700;
}
.label-primary { background-color: var(--wl-mohp-600); }
.label-success { background-color: var(--wl-emerald); }
.label-danger { background-color: var(--wl-red); }
.label-warning { background-color: var(--wl-amber); }
.label-info { background-color: var(--wl-mohp-500); }
.label-default { background-color: var(--wl-slate-500); }
.badge { background-color: var(--wl-mohp-600); }

/* ---------- panels ---------- */
.panel {
    border-radius: 14px;
    border: 1px solid var(--wl-slate-200);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, .08);
}
.panel-heading {
    border-radius: 13px 13px 0 0 !important;
    background: var(--wl-slate-50);
    border-bottom: 1px solid var(--wl-slate-200);
    font-weight: 700;
    color: var(--wl-mohp-800);
}
.panel-primary { border-color: var(--wl-mohp-700); }
.panel-primary > .panel-heading {
    background: var(--wl-mohp-700);
    color: #fff;
    border-color: var(--wl-mohp-700);
}
.panel-footer {
    border-radius: 0 0 13px 13px;
    background: var(--wl-slate-50);
    border-top: 1px solid var(--wl-slate-200);
}

/* ---------- modals ---------- */
.modal-content {
    border-radius: 16px;
    border: 0;
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, .25);
    overflow: hidden;
}
.modal-header {
    background: var(--wl-mohp-800);
    color: #fff;
    border-bottom: 0;
    padding: 16px 20px;
}
.modal-header .close { color: #fff; opacity: .8; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }
.modal-title { font-weight: 700; }
.modal-footer {
    background: var(--wl-slate-50);
    border-top: 1px solid var(--wl-slate-200);
    padding: 14px 20px;
}