span.brand-text.font-weight-light {
    font-size: 1rem;
}

.content {
    min-height: 80vh;
}

span.float-right {
    float: right !important;
}


.max-height-300 pre {
    max-height: 300px
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px
}

.theme-switch input {
    display: none
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 400ms
}

.slider::before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: 400ms;
    width: 16px
}

input:checked+.slider {
    background-color: #66bb6a
}

input:checked+.slider::before {
    transform: translateX(26px)
}

.slider.round {
    border-radius: 34px
}

.slider.round::before {
    border-radius: 50%
}


.dark-mode .navbar-white {
    background-color: #343a40 !important;
    color: #1f2d3d;
}

.dark-mode #msform fieldset {
    background: #343a40 !important;
    color: #ced4da;
}

body.dark-mode.my-custom-form {
    background: #343a40 !important;
    color: #ced4da;
}

body.dark-mode>ul#progressbar>li {
    color: #ced4da !important;
}




/* new css  */

.login-box div.card-header {
    color: #fff;
    background-color: #343a40;
}

.login-box div.card-header a {
    color: #fff;
    pointer-events: none;

}

.login-card-body,
.register-card-body {
    background-color: #fff;
    border-top: 0;
    color: #666;
    border: 1px solid #343a4094;
    padding: 20px;
}

.login-page,
.register-page {
    background-color: #EFF9F0;
}


.layout-fixed .main-sidebar {
    background-color: #343a40;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary a.brand-link {
    background-color: #343a40 !important;
    border-color: #eff9f02e;
}

.user-panel,
.user-panel {
    border-color: #eff9f02e !important;
}

.nav-sidebar>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}



.slider {
    background-color: #343a40;
    border: 1px solid #fff;
}

.navbar-light option {
    background-color: #343a40;
    color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.content-wrapper {
    background-color: #EFF9F0;
}

.content-header {
    padding: 10px 0.5rem;
}

.content-header .row {
    margin: 0 !important;
}

.nav-treeview>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.bb-1px {
    border-bottom: 1px solid #ced4da !important;
}

.bt-1px {
    border-top: 1px solid #ced4da !important;
}

.sec-active {
    border-radius: 0px !important;
    background-color: #343a40;
    color: #fff !important;
}

.customSidebar {
    height: 100% !important;
}

.customSidebar>.sidebar {
    max-height: fit-content !important;
}





.btn-mycustom {
    background-color: #343a40 !important;
    color: #fff !important;
}

.btn-mycustom:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}
.btn-mycustomOpps {
    background-color: #343a40 !important;
    color: #fff !important;
}

.btn-mycustomOpps:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}

.login-card-body .btn-block{
    background: #343a40;
    border-color: #343a40;
}


.ck.ck-editor {
    width: 100% !important;
}
.input-group-editor{
    flex-wrap: nowrap !important;
}

@media (max-width: 991.98px) {
    .input-group-editor{
        flex-wrap: wrap !important;
    }
}

.dd3-content {
    border: 1px solid #d8dbe0;
    /* margin-bottom: 5px; */
}

.dd-item .content-right {
    float: right;
}

.dd-item>button:before {
    top: 7px;
}

/* ============================================================
   Light-blue admin sidebar — menu text & icons in #0b5ed7
   (overrides AdminLTE's dark sidebar theme)
   ============================================================ */
.main-sidebar,
.main-sidebar.sidebar-dark-primary,
.main-sidebar .sidebar {
    background-color: #cfe1f9 !important;   /* slightly darker than a pale-blue swatch */
}

/* brand / logo strip — red wordmark banner (like the reference logo) */
.main-sidebar .brand-link.gps-brand {
    background: linear-gradient(180deg, #e11d2a 0%, #b30f1f 100%) !important;
    border-bottom: none !important;
    text-align: center;
    padding: 14px 8px;
    display: block;
    overflow: hidden;
}
.main-sidebar .brand-link.gps-brand .brand-text {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin: 0;
    float: none;
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* user panel */
.main-sidebar .user-panel { border-bottom: 1px solid #aecaef !important; }
.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info { color: #0b5ed7 !important; }

/* menu links, labels, chevrons and icons -> #0b5ed7 */
.main-sidebar .nav-sidebar .nav-link,
.main-sidebar .nav-sidebar .nav-link p,
.main-sidebar .nav-sidebar .nav-link .right,
.main-sidebar .nav-icon,
.main-sidebar .nav-link i {
    color: #0b5ed7 !important;
}

/* hover */
.main-sidebar .nav-sidebar .nav-link:hover {
    background-color: #bcd6f5 !important;
    color: #0b5ed7 !important;
}

/* active item (top-level + treeview) -> solid blue, white text */
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #0b5ed7 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(11, 94, 215, .35);
}
.main-sidebar .nav-sidebar .nav-link.active .nav-icon,
.main-sidebar .nav-sidebar .nav-link.active .right,
.main-sidebar .nav-sidebar .nav-link.active i,
.main-sidebar .nav-sidebar .nav-link.active p {
    color: #fff !important;
}

/* nested treeview submenu gets a subtle tint */
.main-sidebar .nav-treeview { background: rgba(255, 255, 255, .35); }
.main-sidebar .nav-treeview .nav-link:hover { background-color: #bcd6f5 !important; }

/* ============================================================
   Global admin polish — typography, surfaces & unified accent
   ============================================================ */
:root { --gps-accent: #0b5ed7; }

body, .wrapper {
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3d4c63;
}
h1, h2, h3, h4, h5, h6 { color: #1f2d3d; }
.text-muted { color: #6b7a90 !important; }

/* page surfaces */
.content-wrapper { background-color: #f3f6fb; }
.content-header { background: #eef4ff; }
.content-header h1 { font-weight: 600; letter-spacing: .2px; }

/* cards: softer, rounded, gentle shadow (instead of flat bordered boxes) */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(31, 45, 61, .06);
}
.card-header { background: transparent; border-bottom: 1px solid #eef1f6; }
.card-header .card-title { font-weight: 600; color: #33445c; }
.card-primary.card-outline { border-top: 3px solid var(--gps-accent); }

/* KPI / info boxes */
.small-box, .info-box { border-radius: 10px; box-shadow: 0 2px 12px rgba(31, 45, 61, .08); }
.small-box > .inner h3 { font-weight: 700; }

/* links & primary accent unified to #0b5ed7 */
a { color: var(--gps-accent); }
a:hover { color: #0949a6; }
.btn-primary { background-color: var(--gps-accent); border-color: var(--gps-accent); }
.btn-primary:hover, .btn-primary:focus { background-color: #0949a6; border-color: #0949a6; }
.btn-outline-primary { color: var(--gps-accent); border-color: var(--gps-accent); }
.btn-outline-primary:hover { background-color: var(--gps-accent); border-color: var(--gps-accent); }

/* quieter table headers, comfortable rows */
.table thead th, .thead-light th {
    border-top: none;
    color: #6b7a90;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: #f7f9fc;
}
.table td, .table th { vertical-align: middle; }

/* form controls: subtle focus in the accent colour */
.form-control:focus {
    border-color: #9dc0f2;
    box-shadow: 0 0 0 .2rem rgba(11, 94, 215, .15);
}

/* ============================================================
   MATERIAL (Vuetify-style) REVAMP — Roboto + elevation + shapes
   Visual only; no markup/flow/architecture changes.
   ============================================================ */
:root {
    --gps-primary: #0b5ed7;
    --gps-primary-dark: #0949a6;
    /* Material Design elevation ramp */
    --elev-1: 0 2px 1px -1px rgba(0,0,0,.16), 0 1px 1px 0 rgba(0,0,0,.10), 0 1px 3px 0 rgba(0,0,0,.08);
    --elev-2: 0 3px 1px -2px rgba(0,0,0,.16), 0 2px 2px 0 rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.09);
    --elev-4: 0 2px 4px -1px rgba(0,0,0,.16), 0 4px 5px 0 rgba(0,0,0,.10), 0 1px 10px 0 rgba(0,0,0,.09);
    --elev-8: 0 5px 5px -3px rgba(0,0,0,.16), 0 8px 10px 1px rgba(0,0,0,.10), 0 3px 14px 2px rgba(0,0,0,.09);
}

/* Roboto everywhere (Material default, like the reference admin) */
body, .wrapper, .btn, .form-control, .nav, h1, h2, h3, h4, h5, h6,
.small-box, .info-box, .card, .table {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* Material neutral canvas */
.content-wrapper { background-color: #f5f6f8; }

/* Top app bar — flat white with Material elevation */
.main-header.navbar {
    box-shadow: var(--elev-2) !important;
    border-bottom: none !important;
}

/* Cards = Material surfaces: rounded, elevated, hover-raise */
.card {
    border: none !important;
    border-radius: 10px;
    box-shadow: var(--elev-2) !important;
    transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--elev-4) !important; }
.card-header { border-bottom: 1px solid #eef1f6; border-radius: 10px 10px 0 0; }
.card-header .card-title { font-weight: 500; letter-spacing: .1px; }

/* KPI / info boxes as elevated Material tiles */
.small-box { border-radius: 10px; box-shadow: var(--elev-2) !important; overflow: hidden; }
.small-box:hover { box-shadow: var(--elev-4) !important; }
.small-box .icon > i { opacity: .28; }
.info-box { border-radius: 10px; box-shadow: var(--elev-2) !important; }
.info-box .info-box-icon { border-radius: 10px 0 0 10px; }

/* Buttons — Material: uppercase, medium weight, tracked, elevated */
.btn {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .045em;
    border-radius: 6px;
    transition: box-shadow .2s ease, background-color .2s ease;
}
.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-secondary {
    box-shadow: var(--elev-2);
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-info:hover, .btn-warning:hover, .btn-secondary:hover { box-shadow: var(--elev-4); }
.btn-primary { background-color: var(--gps-primary); border-color: var(--gps-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--gps-primary-dark); border-color: var(--gps-primary-dark); }
/* keep flat/outline/link/tool buttons shadow-free (Material "text" buttons) */
.btn-tool, .btn-link, [class*="btn-outline-"] { box-shadow: none !important; }

/* Dropdowns / modals float with higher elevation */
.dropdown-menu { border: none; border-radius: 8px; box-shadow: var(--elev-8); }
.modal-content { border: none; border-radius: 10px; box-shadow: var(--elev-8); }

/* Badges: pill, medium weight (Material chips vibe) */
.badge { border-radius: 10px; font-weight: 500; padding: .35em .6em; }

/* Inputs: rounded, Material focus ring */
.form-control { border-radius: 6px; }

/* Breadcrumb: quieter */
.content-header .breadcrumb { background: transparent; }

/* Progress bars rounded (used on reports/overview) */
.progress { border-radius: 8px; }
.progress-bar { border-radius: 8px; }

/* Sortable tables — click a header to sort ascending / descending */
.sortable-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px !important;
    white-space: nowrap;
}
.sortable-table th.sortable::after {
    content: "\f0dc";                 /* fa-sort */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .3;
    font-size: .78em;
}
.sortable-table th.sortable:hover::after { opacity: .6; }
.sortable-table th.sort-asc::after  { content: "\f0de"; opacity: 1; color: var(--gps-primary, #0b5ed7); }  /* fa-sort-up */
.sortable-table th.sort-desc::after { content: "\f0dd"; opacity: 1; color: var(--gps-primary, #0b5ed7); }  /* fa-sort-down */