:root {
            --brand-dark: #35130e;
            --brand-mid: #5c2417;
            --brand-wave: #c1592c;
            --brand-wave2: #9c3f1c;
            --accent: #e08130;
            --accent-dark: #c1671f;
            --cream: #f6ece3;
            --ink: #241a17;
            --muted: #8a7a70;
            --cream: #F6F0E6;
            --panel: #FFFFFF;
            --orange: #E97A2C;
            --orange-deep: #D9661C;
            --brick: #7A3428;
            --brick-deep: #5C261D;
            --brick-darker: #3E1A14;
            --ink: #2B1B14;
            --ink-soft: #6B584E;
            --line: #E7DCCC;
            --gold-wave: #C98A4B;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            height: 100%;
            font-family: 'Inter', Arial, sans-serif;
            color: var(--ink);
            background: #fff;
        }

        .login-page {
            min-height: 100vh;
            display: flex;
            flex-wrap: wrap;
        }

        /* ===== LEFT BRAND PANEL ===== */
        .login-brand {
            flex: 1 1 54%;
            min-width: 320px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(120% 140% at 8% 0%, #6b2c1c 0%, transparent 55%),
                linear-gradient(160deg, var(--brand-dark) 0%, var(--brand-mid) 68%);
            color: var(--cream);
            padding: 48px 56px 64px;
            display: flex;
            flex-direction: column;
        }

        .login-brand .glow {
            position: absolute;
            top: -18%;
            right: -12%;
            width: 46%;
            aspect-ratio: 1;
            background: radial-gradient(circle, rgba(224, 129, 48, .35) 0%, transparent 68%);
            pointer-events: none;
        }

        .login-brand .motif {
            position: absolute;
            right: 6%;
            bottom: 12%;
            width: 220px;
            opacity: .5;
            pointer-events: none;
            z-index: 1;
        }

        .login-brand .wave {
            position: absolute;
            left: -10%;
            right: -10%;
            bottom: -6%;
            height: 46%;
            background: var(--brand-wave2);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            opacity: .9;
        }

        .login-brand .wave2 {
            position: absolute;
            left: -20%;
            right: -20%;
            bottom: -14%;
            height: 34%;
            background: var(--brand-wave);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        }

        .brand-top {
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 2;
        }

        .brand-top img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            border-radius: 50px;
        }

        .brand-top .name {
            font-size: 19px;
            font-weight: 700;
            line-height: 1.2;
            font-family: 'Merriweather', serif;
            margin-bottom: 3px;
        }

        .brand-top .sub {
            text-transform: uppercase;
            font-weight: 400;
            font-size: 11px;
            color: #E7C9A9;
            letter-spacing: 0.4px;
            font-family: 'Inter', Arial, sans-serif;
        }

        .brand-mid {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2;
            max-width: 560px;
        }

        .brand-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #f0c9a4;
            margin-bottom: 18px;
        }

        .brand-eyebrow::before {
            content: '';
            width: 22px;
            height: 2px;
            background: var(--accent);
            display: inline-block;
        }

        .brand-mid h1 {
            font-family: 'Merriweather', serif;
            font-size: 40px;
            line-height: 1.22;
            margin: 0 0 16px;
            font-weight: 900;
            letter-spacing: -.01em;
        }

        .brand-mid h1 span {
            color: var(--accent);
            font-style: italic;
        }

        .brand-mid p {
            font-size: 15px;
            line-height: 1.65;
            opacity: .82;
            margin: 0;
            max-width: 460px;
        }

        .brand-stats {
            display: flex;
            gap: 30px;
            margin-top: 42px;
            z-index: 2;
            flex-wrap: wrap;
        }

        .brand-stats .stat {
            padding-left: 16px;
            border-left: 2px solid rgba(240, 201, 164, .3);
        }

        .brand-stats .stat b {
            display: block;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .brand-stats .stat span {
            font-size: 12px;
            opacity: .68;
            line-height: 1.4;
            display: block;
            max-width: 130px;
        }

        .brand-bottom {
            z-index: 2;
            font-size: 12px;
            opacity: .6;
            margin-top: 32px;
        }

        /* ===== RIGHT FORM PANEL ===== */
        .login-form-side {
            flex: 1 1 46%;
            min-width: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 32px;
            background: #fff;
            position: relative;
        }

        .toP_img {
            position: absolute;
            right: 0;
            top: 0;
        }

        .toP_img img {
            width: 100%;
            max-width: 335px;
        }

        .bottom_img {
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .bottom_img img {
            width: 100%;
            max-width: 240px;
        }

        .login-form-card {
            width: 100%;
            max-width: 380px;
        }

        .login-form-card h2 {
            font-size: 27px;
            margin: 0 0 6px;
            color: var(--ink);
            letter-spacing: -.01em;
            font-family: 'Merriweather', serif;
        }

        .login-form-card .lead {
            font-size: 13px;
            color: var(--muted);
            margin: 0 0 26px;
        }

        .login-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--accent-dark);
            background: rgba(224, 129, 48, .12);
            border: 1px solid rgba(224, 129, 48, .22);
            border-radius: 20px;
            padding: 4px 12px;
            margin-bottom: 16px;
        }

        .login-type-badge i {
            font-size: 10px;
        }

        .form-field {
            margin-bottom: 18px;
        }

        .form-field label {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            color: #45392f;
            margin-bottom: 6px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap svg {
            position: absolute;
            left: 14px;
            width: 17px;
            height: 17px;
            color: var(--ink-soft);
            pointer-events: none;
            top: 50%;
            transform: translateY(-50%);
        }


        .input-wrap input {
            width: 100%;
            padding: 13px 14px 13px 38px;
            border: 1.5px solid #ece2da;
            border-radius: 9px;
            background: #faf6f3;
            font-size: 14px;
            outline: none;
            transition: border-color .15s, background .15s, box-shadow .15s;
            font-family: 'Inter', Arial, sans-serif;
        }

        .input-wrap input::placeholder {
            color: #B6A695;
        }

        .input-wrap input:focus {
            border-color: var(--accent);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(224, 129, 48, .12);
        }

        .toggle-pwd {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #b3a297;
            cursor: pointer;
            background: none;
            border: none;
            font-size: 14px;
            padding: 4px;
        }

        .toggle-pwd:hover {
            color: var(--accent-dark);
        }

        .form-row-between {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            font-size: 12.5px;
        }

        .keep-signed {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #55483f;
            cursor: pointer;
        }

        .keep-signed input {
            accent-color: var(--accent);
        }

        .hint-link {
            color: var(--orange-deep);
            text-decoration: none;
            font-weight: 600;
        }

        .hint-link:hover {
            color: var(--accent-dark);
            text-decoration: underline;
        }

        .btn-signin {
            width: 100%;
            padding: 14px;
            border-radius: 9px;
            border: none;
            background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.01em;
            cursor: pointer;
            box-shadow: 0 10px 24px -8px rgba(217, 102, 28, 0.55);
            transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
        }

        .btn-signin:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(224, 129, 48, .42);
        }

        .btn-signin:active {
            transform: translateY(0);
        }

        .btn-signin i {
            font-size: 12px;
            transition: transform .15s;
        }

        .btn-signin:hover i {
            transform: translateX(3px);
        }

        .form-footnote {
            text-align: center;
            font-size: 11.5px;
            color: #B6A695;
            margin-top: 24px;
            line-height: 1.65;
        }

        .form-footnote a {
            color: var(--orange-deep);
            text-decoration: underline;
        }

        .horizon {
            position: absolute;
            bottom: -7px;
            width: 100%;
            left: 0;
        }

        @media (max-width: 900px) {
            .login-brand {
                padding: 36px 28px 90px;
            }

            .brand-mid h1 {
                font-size: 30px;
            }

            .brand-stats {
                gap: 20px;
            }

            .login-brand .motif {
                display: none;
            }
        }

        @media(max-width:767px) {
            .login-brand {
                display: none;
            }

            .toP_img img {
                max-width: 190px;
            }

            .bottom_img img {
                max-width: 160px;
            }

            .page-header.navbar .menu-toggler{
                display: flex !important;
            }
        }


        .page-sidebar-wrapper, .page-sidebar{
            background: #3D1B15;
        }

        .page-sidebar-menu>li.nav-item.active>a, .page-sidebar-menu>li.nav-item.active.open>a {
    background: #e8791f29 !important;
    color: #fff !important;
    border-left: 3px solid #E8791F;
}
   
    :root {
        --ink: #35130E;
        --ink-2: #5C2417;
        --ink-line: rgba(255, 255, 255, 0.08);
        --ink-text-soft: rgba(255, 255, 255, 0.56);
        --paper: #F7F2EC;
        --surface: #FFFFFF;
        --line: #EAE0D5;
        --text: #241A17;
        --text-soft: #8A7A70;
        --signal: #E08130;
        --signal-soft: #FBEEDD;
        --positive: #1C7C4C;
    }

   
    .page-content-wrapper,
    .page-content {
        background-color: var(--paper) !important;
    }

    /* ---------- Top bar ---------- */
    .page-header.navbar {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e9dcc9 !important;
}

    .page-header .page-logo {
    background: #3d1b15 !important;
    border-right: 1px solid var(--ink-line);
    /* pace.js's loading bar is position:fixed/top:0/z-index:9999, the same
       top-left corner as this dark logo box - whichever renders later in the
       DOM paints over the other, and pace's bar (appended to <body> at load
       time) was winning, so a bright orange sliver visibly cut across the
       logo on every page load. Higher z-index here keeps the logo box
       (and everything in it) always on top, so the loading bar simply
       doesn't reach into this corner - it still shows normally against the
       header's white area to the right. */
    position: relative;
    z-index: 10000;
}

   .page-header.navbar .page-logo.brand-logo-lockup {
    display: flex !important;
    align-items: center;
    width: 240px !important;
    padding: 0 10px !important;
}
    .brand-logo-link {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        text-decoration: none;
        outline: none;
    }

    .page-header.navbar .page-logo .brand-logo-mark {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: contain;
}

    .brand-logo-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        min-width: 0;
    }

   .brand-logo-text b {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Merriweather', serif;
    margin-bottom: 3px;
}

    .brand-logo-text small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Collapsed sidebar: shrink the logo box down to just the icon mark +
       toggler so it lines up with the narrow icon rail beneath it, instead
       of staying full width and creating a mismatched notch. */
    body.page-sidebar-closed .page-header.navbar .page-logo.brand-logo-lockup {
        width: 70px !important;
        padding: 0 !important;
        justify-content: center;
    }

    body.page-sidebar-closed .brand-logo-text {
        display: none;
    }

    body.page-sidebar-closed .brand-logo-link {
        gap: 0;
    }

    body.page-sidebar-closed .page-header.navbar .page-logo .menu-toggler.sidebar-toggler {
        margin: 0 0 0 4px !important;
    }

    /* ---------- Sidebar toggler ("hamburger") ----------
       Was a float + negative-margin hack sitting flush against the logo
       with no hover state. Rebuilt as a plain, centered rounded button. */
    .page-header.navbar .page-logo .menu-toggler.sidebar-toggler {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 34px !important;
        height: 34px !important;
        margin: 0 0 0 auto !important;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s ease;
        flex: 0 0 34px;
        background-color: transparent !important;
        opacity: 1 !important;
    }

    .page-header.navbar .page-logo .menu-toggler.sidebar-toggler:hover {
        background: var(--ink-2);
    }

    .page-header.navbar .page-logo .menu-toggler.sidebar-toggler:before {
        position: static !important;
        float: none !important;
        display: inline !important;
        margin: 0 !important;
        width: auto !important;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: none;
    }

    .page-header-inner {
        border-bottom: 1px solid var(--ink-line);
    }

    .mydashboardsearch {
    margin: 0;
    max-width: 100%;
    background: #f4ece0;
    border: 1px solid #e9dcc9;
    border-radius: 10px;
    display: flex;
    position: relative;
}

  .mydashboardsearch input[type=text] {
    padding: 4px 20px 4px 16px;
    font-size: 13px;
    border: 1px solid rgb(255 255 255 / 0%);
    color: #7a6a5d;
    width: 100%;
    height: 38px;
    border-radius: 6px;
    outline: none;
    background: #ffffff00;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-weight: 500;
}

.mydashboardsearch button {
    color: #958374;
    padding: 0;
    width: fit-content;
    right: 10px;
    font-size: 13px !important;
    top: 6px;
    position: absolute;
    border: 0;
    background: transparent;
}

.mydashboardsearch .fa {
    font-size: 15px;
}

    .mydashboardsearch input[type=text]::placeholder {
        color: #7a6a5d;
    }

    .mydashboardsearch input[type=text]:focus {
    border-color: #e8791f;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px #fa903126;
}

   

    /* Top-right nav (user dropdown, Log Out) was white text with !important -
       fine on the theme's original dark navbar, but .page-header.navbar's
       background was overridden to white (#FFFFFF, see below) as part of
       this redesign, leaving it white-on-white and invisible. */
    .top-menu .dropdown-user .username,
    .top-menu li>a {
        font-size: 13px;
        /* color: var(--text) !important; */
    }

 

    .page-sidebar-menu>li.nav-item>a {
    color: #D8C4B2 !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 8px 15px !important;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        width: 100%;
    display: block;
}

   .page-sidebar-menu>li.nav-item>a i {
    color: #D8C4B2 !important;
    font-size: 14px;
    width: 20px;
    text-align: center;
        margin-right: 5px;
}

    .page-sidebar-menu>li.nav-item>a:hover {
    background: #e8791f29 !important;
    color: #fff !important;
}
    .page-sidebar-menu>li.nav-item>a:hover i {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .page-sidebar-menu .sub-menu {
        background: rgba(0, 0, 0, 0.18) !important;
    }

 .page-sidebar-menu .sub-menu>li>a {
    color: #D8C4B2 !important;
    font-size: 12.5px !important;
    padding: 7px 15px 5px 40px !important;
    display: flex !important;
    line-height: 19px;
}

    .page-sidebar-menu .sub-menu>li>a i {
        color: #D8C4B2 !important;
        font-size: 12px;
    }

    .page-sidebar-menu .sub-menu>li>a:hover {
        background: var(--ink-2) !important;
        color: #fff !important;
    }

    /* ---------- Collapsed (icon-only) sidebar rail ----------
       Reachable any time via the toggler, so it needs to look intentional
       on its own, not just as a leftover expanded layout squeezed down.
       Labels are hidden here (base Metronic behaviour) - a native title
       tooltip on each link (added server-side, see the sidebar markup)
       stands in for them on hover. */
    .page-sidebar-closed .page-sidebar-menu>li.nav-item>a {
        padding: 13px 0 !important;
        text-align: center;
    }

    .page-sidebar-closed .page-sidebar-menu>li.nav-item>a i {
        width: auto;
        font-size: 16px;
    }

    .page-sidebar-closed .page-sidebar-menu>li.nav-item>a .title,
    .page-sidebar-closed .page-sidebar-menu>li.nav-item>a .arrow {
        display: none;
    }

    .page-sidebar-closed .page-sidebar-menu>li.nav-item.active>a {
        border-left-color: var(--signal);
    }

    .sidenav {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .sidenav a,
    .dropdown-btn {
        display: block;
        width: 100%;
        cursor: pointer;
    }

    .dropdown-container {
        display: none;
    }

    /* Fullscreen dimmed overlay */
    #page-loader {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: grid;
        place-items: center;
        z-index: 9999;
        transition: opacity 0.6s ease;
    }

    /* Accessible spinner */
    .spinner {
        width: 64px;
        height: 64px;
        border: 6px solid #eee;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    #page-loader.hide {
        opacity: 0;
        pointer-events: none;
    }


    .page-sidebar-menu>li.nav-item.active>a i,
    .page-sidebar-menu>li.nav-item.active.open>a i {
        color: #fff !important;
    }

    .page-sidebar-menu>li.nav-item.active.open>.sub-menu {
        display: block !important;
    }

    /* ===== ACTIVE MENU HIGHLIGHT STYLES ===== */

    /* Active parent menu item (e.g., HR MANAGMENT) */
    

    .page-sidebar-menu>li.nav-item.active>a i,
    .page-sidebar-menu>li.nav-item.active.open>a i,
    .page-sidebar-menu>li.nav-item.active>a .arrow,
    .page-sidebar-menu>li.nav-item.active.open>a .arrow {
        color: #fff !important;
    }

    /* Active submenu item (e.g., Employee Registration) */
    .page-sidebar-menu .sub-menu>li.active>a {
        background: rgba(224, 129, 48, 0.16) !important;
        color: #ffffff !important;
        font-weight: 600;
        border-left: 3px solid var(--signal);
        padding-left: 49px !important;
    }

    .page-sidebar-menu .sub-menu>li.active>a i {
        color: var(--signal) !important;
    }

    /* Hover state for submenu items (keep consistent) */
    .page-sidebar-menu .sub-menu>li.active>a:hover {
        background: rgba(224, 129, 48, 0.24) !important;
        color: #ffffff !important;
    }

    /* Ensure the active parent stays open */
    .page-sidebar-menu>li.nav-item.active.open>.sub-menu {
        display: block !important;
    }

    /* Arrow visibility on active/open parent */
    .page-sidebar-menu>li.nav-item>a .arrow {
        color: rgba(255, 255, 255, 0.6);
        transition: transform 0.2s ease, color 0.2s ease;
    }

    /* Arrow rotation when submenu is open */
    .page-sidebar-menu>li.nav-item.open>a .arrow:before,
    .page-sidebar-menu>li.nav-item.active.open>a .arrow:before {
        content: "\f107" !important;
        /* fa-angle-down (pointing down = open) */
        transform: rotate(0deg);
    }

    .page-sidebar-menu>li.nav-item:not(.open)>a .arrow:before {
        content: "\f105" !important;
        /* fa-angle-right (pointing right = closed) */
    }

    /* Arrow color on active parent */
    .page-sidebar-menu>li.nav-item.active>a .arrow,
    .page-sidebar-menu>li.nav-item.active.open>a .arrow {
        color: #fff !important;
    }

    /* Make sure the arrow span renders the Font Awesome icon */
    .page-sidebar-menu>li.nav-item>a .arrow {
        font-family: 'FontAwesome';
        float: right;
        display: inline-block;
    }

    /* Hide empty arrow spans (direct links) */
    .page-sidebar-menu>li.nav-item>a .arrow:empty {
        display: none !important;
    }

    /* ---------- Global "panel" content boxes (used across nearly every
       screen in the app) — flat surface with a hairline border and a
       small accent rule instead of the stock solid-color heading bar. ---------- */
    .panel {
        background: var(--surface);
        border: 1px solid var(--line) !important;
        border-radius: 13px !important;
        box-shadow: none !important;
    }

    .panel-heading {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-bottom: 1px solid var(--line) !important;
        border-radius: 4px 4px 0 0 !important;
        padding: 14px 20px !important;
        position: relative;
    }

    .panel-heading::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--signal);
        border-radius: 4px 0 0 0;
    }

    .panel-title,
    .panel-title>b {
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: var(--text) !important;
        letter-spacing: 0;
    }

    .panel-body {
        color: var(--text);
    }

    .panel-control .btn.btn-default,
    .panel-control a {
        background: transparent !important;
        border: none !important;
        color: var(--text-soft) !important;
        box-shadow: none !important;
    }

    .panel-control .btn.btn-default:hover {
        color: var(--signal) !important;
    }

    .panel>.nav-tabs {
        border-bottom: 1px solid var(--line);
    }

    .panel .nav-tabs>li.active>a,
    .panel .nav-tabs>li.active>a:hover,
    .panel .nav-tabs>li.active>a:focus {
        color: var(--signal) !important;
        border-color: var(--line) var(--line) transparent !important;
    }

table.table thead th {
    font-size: 14px;
    font-weight: 600;
    color: #321611;
    background: #fbf7f1;
    border-bottom: 1px solid #e9dcc9 !important;
    text-transform: capitalize;
    padding: 10px 15px !important;
    white-space: nowrap;
}

table.table tbody td .act-btn {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    border: 1px solid #e9dcc9;
    background: #f4ece0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #7a6a5d;
    cursor: pointer;
}
 .act-btn {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    border: 1px solid #e9dcc9;
    background: #f4ece0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #7a6a5d;
    cursor: pointer;
}

table.table tbody td .act-btn:hover {
    background: #fbe3c7;
    color: #c4571f;
    border-color: #f0932e;
}
.row{
    display: flex;
    flex-wrap: wrap;
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}
.mt-2{
    margin-top: 10px;
}
.mt-3{
    margin-top: 15px;
}

.mt-4{
    margin-top: 20px;
}
.gap-2{
    gap: 5px;
}

    .page-header.navbar .menu-toggler {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-position: center center;
    background: #F4ECE0;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid #E9DCC9;
    border-radius: 5px;
    position: relative;
    top: 12px;
    left: 15px;
}

.page-header.navbar .menu-toggler.sidebar-toggler:before,
.page-header.navbar .menu-toggler.responsive-toggler:before {
      font-size: 16px;
    font-family: FontAwesome;
    content: "\f0c9";
    font-weight: 300;
    color: #7A6A5D;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle {
    color: #3d1b15;
    padding: 0;
}

.page-header.navbar .top-menu .navbar-nav > li:last-child a {
    color: #c4571f;
    border: 1px solid #f0932e;
    border-radius: 4px;
    padding: 7px 14px;
    background: #fbe3c7;
}

.portlet.light .portlet-body {
    overflow-x: scroll;
    width: 100%;
}

.portlet.light .portlet-body::-webkit-scrollbar {
    height: 5px;
}

.portlet.light .portlet-body::-webkit-scrollbar-track {
    background: #F4ECE0;
    border-radius: 10px;
}

.portlet.light .portlet-body::-webkit-scrollbar-thumb {
    background: #e08130;
    border-radius: 10px;
}

.portlet.light .portlet-body::-webkit-scrollbar-thumb:hover {
    background: #c96d20;
}

.portlet.light .portlet-body.form {
    overflow-x: unset;
}


.mainInput label {
    color: #41332c;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 6px;
    font-size: 12px;
}

.mainInput .form-control {
    border: 1px solid #E9DCC9;
    border-radius: 10px;
    padding: 10px 15px;
    height: auto;
    background: #f4ece059;
}

.mainInput .form-control:focus {
    border-color: #e8791f;
    background: #ffffff1a !important;
    box-shadow: 0 0 0 4px #fa903126 !important;
}

.mainInput .form-control::placeholder{
  color: #7a6a5d;
  font-size: 13px;
  font-weight: 500;
}

.mainInput {
    position: relative;
}

.mainInput .help-block {
    position: absolute;
    margin: 0;
    right: 20px;
    bottom: 10px;
}

.main_flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn_1 {
    padding: 7px 20px;
    border: 1px solid #e08130;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    background: #e08130;
    color: #fff;
    transition: 0.5s;
}

.btn_1:hover{
  color: #e08130;
  background-color: transparent;
}

.btn_2 {
    padding: 7px 20px;
    border: 1px solid #321611;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    background: #321611;
    color: #fff;
    transition: 0.5s;
}

.btn_2:hover{
  color: #321611;
  background-color: transparent;
}

.align-items-center{
  align-items: center;
}

.align-items-end{
  align-items: end;
}

.d-flex{
  display: flex;
}

.form-control, output {
    font-size: 13px;
    line-height: 1.42857;
    color: #57422c;
    display: block;
    font-weight: 500;
}

#SearchTxtBox {
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    outline: none;
    background: #f4ece059;
    border: 1px solid #E9DCC9;
    font-size: 13px;
    font-weight: 500;
}

.lenth_box span {
    font-size: 12px;
    font-weight: 500;
}

.lenth_box select {
    border: 1px solid #E9DCC9;
    border-radius: 10px;
    padding: 5px 6px;
    background: #f4ece059;
    font-size: 11px;
    font-weight: 500;
    margin: 0px 5px;
}

.myforms .btn-group-xs > .btn, .myforms .btn-xs {
    padding: 5px 8px;
    font-size: 10px;
    line-height: 1.2;
    border-radius: 30px;
}

.btn-primary {
    color: #fff;
    background-color: #e08130;
    border-color: #e08130;
}

.btn-primary:hover {
    color: #fff;
    background-color: #ad6426;
    border-color: #ad6426;
}

label.label, .view-sub-ratings {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px 5px 20px !important;
    border-radius: 20px;
    white-space: nowrap;
    position: relative;
    text-transform: capitalize;
}

label.label:before, .view-sub-ratings::before {
    content:'';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.view-sub-ratings::before{
    background: #F59E0B;
}

.view-sub-ratings {
    background: #e081302b;
    color: #F59E0B;
}

.view-sub-ratings:hover{
    color: #fff;
    background: #F59E0B;
}

.view-sub-ratings:hover::before{
    background: #fff;
}


label.label.label-danger {
    background: #f6deda;
    color: #b23a2e;
}

label.label.label-danger::before {
    background: #b23a2e;
}

label.label.label-success.ng-scope {
    background: #deeee3;
    color: #2f6f52;
}

label.label.label-success.ng-scope::before {
    background: #2f6f52;
}

form.form-inline.ng-pristine.ng-valid .form-control, select.form-control.cmp-row-period, #cmpSchemeTable select, .table_input  {
    font-size: 12px;
    border: 1px solid #E9DCC9;
    border-radius: 9px;
    height: auto;
}

form.form-inline.ng-pristine.ng-valid .form-control::placeholder{
    color: #57422c;
}

.mainInput .dropdown {
    border: 1px solid #E9DCC9;
    border-radius: 10px;
    padding: 6px 15px;
    height: auto;
    background: #f4ece059;
}

.mainInput .dropdown button {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    line-height: 15px;
}

.input-group-addon {
    padding: 12px 20px;
}

.mainInput .input-group.date {
    width: 100%;
    display: flex;
}
/* ---------- Main menu as a drawer on small screens ----------
   Below 991px the sidebar slides in from the left over the page, full height,
   with the page dimmed behind it and a close button of its own.

   The geometry is declared !important and qualified with a leading body on
   purpose. This panel is also a Bootstrap .navbar-collapse, which carries its
   own max-height and positioning for mobile, and the theme scripts can leave a
   slimScroll wrapper around the menu - either of which otherwise reasserts
   itself the moment the collapse transition ends and snaps the drawer back
   into a short box part-way down the page.

   Bootstrap collapse still owns the open/closed state: it puts .in on the
   panel. The panel stays displayed so the slide can animate, and is pushed
   off-screen and made unclickable when closed. */
@media (max-width: 991px) {

    body .page-sidebar.navbar-collapse,
    body .page-sidebar.navbar-collapse.collapse,
    body .page-sidebar.navbar-collapse.collapsing,
    body .page-sidebar.navbar-collapse.in {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        float: none !important;
        width: 86vw !important;
        max-width: 320px !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 10060 !important;
        background: var(--ink, #3A1A12);
        box-shadow: 2px 0 24px rgba(0, 0, 0, .35);
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    body .page-sidebar.navbar-collapse {
        transform: translateX(-100%) !important;
        visibility: hidden;
        pointer-events: none;
    }

    body .page-sidebar.navbar-collapse.in,
    body .page-sidebar.navbar-collapse.collapsing {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform .22s ease;
    }

    /* The theme may wrap the menu in a slimScroll box sized for the desktop
       rail; inside the drawer, the drawer itself does the scrolling. */
    body .page-sidebar .slimScrollDiv,
    body .page-sidebar .page-sidebar-menu {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body .page-sidebar .slimScrollBar,
    body .page-sidebar .slimScrollRail {
        display: none !important;
    }

    /* The page behind, dimmed. Scoped with :has so it shows only while the
       drawer is open; browsers without :has simply get no dimming. */
    body:has(.page-sidebar.navbar-collapse.in)::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 10055;
    }

    body:has(.page-sidebar.navbar-collapse.in) {
        overflow: hidden;
    }

    .sidebar-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        position: sticky;
        top: 0;
        background: var(--ink, #3A1A12);
        z-index: 2;
    }

    .sidebar-drawer-title {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-drawer-close {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, .08);
        color: #fff !important;
        font-size: 20px;
        text-decoration: none !important;
    }

    /* Inside the drawer the list reads top to bottom, tidied: even rows, one
       line each, a clear mark on the section you are in. */
    body .page-sidebar .page-sidebar-menu {
        padding: 8px 10px 24px !important;
    }

    .page-sidebar-menu>li.nav-item>a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        border-left: 0 !important;
        padding: 11px 12px !important;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-sidebar-menu>li.nav-item>a i {
        width: 18px;
        margin: 0;
        font-size: 14px;
        text-align: center;
        opacity: .85;
    }

    .page-sidebar-menu>li.nav-item>a .arrow {
        margin-left: auto;
        float: none;
        opacity: .7;
    }

    .page-sidebar-menu>li.nav-item.active>a,
    .page-sidebar-menu>li.nav-item.open>a {
        background: rgba(232, 121, 31, .18) !important;
        color: #fff !important;
    }

    .page-sidebar-menu>li.nav-item.active>a i,
    .page-sidebar-menu>li.nav-item.open>a i {
        color: #fff !important;
        opacity: 1;
    }

    .page-sidebar-menu .sub-menu {
        background: transparent !important;
        padding: 2px 0 6px 10px !important;
        border-left: 1px solid rgba(255, 255, 255, .10);
        margin-left: 18px;
    }

    .page-sidebar-menu .sub-menu>li>a {
        padding: 8px 10px !important;
        border-radius: 7px;
        font-size: 11.5px !important;
        line-height: 1.3;
    }

    .page-sidebar-menu .sub-menu>li.active>a {
        background: rgba(232, 121, 31, .22) !important;
        color: #fff !important;
    }

    /* The content keeps the full width - the drawer floats over it. */
    .page-content-wrapper,
    .page-content {
        margin-left: 0 !important;
    }
}

@media (min-width: 992px) {
    .sidebar-drawer-head {
        display: none;
    }
}

/* ---------- Header bar on small screens ----------
   The hamburger sat on offsets meant for the desktop header and Log Out was
   wide enough to wrap onto two lines, so the two controls sat at different
   heights with the brand squeezed between them. */
@media (max-width: 991px) {

    .page-header.navbar .page-header-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        min-height: 58px;
    }

    .page-header.navbar .page-logo.brand-logo-lockup {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        float: none;
        width: auto;
        height: auto;
    }

    .brand-logo-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-logo-text small {
        display: none;
    }

    .page-header.navbar .menu-toggler.responsive-toggler {
        display: flex !important;
        position: static;
        top: auto;
        left: auto;
        margin: 0;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        order: 2;
    }

    .page-header.navbar .top-menu {
        order: 3;
        flex: 0 0 auto;
        margin: 0;
    }

    .page-header.navbar .top-menu .navbar-nav {
        display: flex;
        align-items: center;
        margin: 0;
        float: none;
    }

    .page-header.navbar .top-menu .navbar-nav>li {
        float: none;
    }

    .page-header.navbar .top-menu .navbar-nav>li:last-child a {
        display: inline-flex;
        align-items: center;
        height: 38px;
        padding: 0 14px;
        font-size: 12.5px;
        white-space: nowrap;
    }
}

/* ---------- Registration and other myform-col forms on small screens ----------
   .myform-col in style.css is a CSS grid of a fixed number of columns - four by
   default, or whatever .mycol-N says - with no breakpoints at all. On a phone
   that kept four columns on a 440px screen, so every field was a sliver, the
   labels wrapped onto two and three lines against a 26px line-height and the
   rows ran into each other.

   These are layout-only overrides: one column on a phone, two on a small
   tablet, and any cell that was told to span columns simply takes the full
   row. No markup, no Angular bindings and no validation are touched. */
@media (max-width: 767px) {

    .myform-col,
    .myform-col.mycol-1,
    .myform-col.mycol-2,
    .myform-col.mycol-3,
    .myform-col.mycol-5,
    .myform-col.mycol-6,
    .myform-col.mycol-7,
    .myform-col.mycol-8,
    .myform-col.mycol-9 {
        grid-template-columns: 1fr !important;
        grid-column-gap: 0 !important;
        grid-row-gap: 14px !important;
    }

    .myform-col .form-group[class*="merge"] {
        grid-column: 1 / -1 !important;
    }

    /* Labels sit on their own line, close to the field they name. */
    .myform-col .form-group>.control-label,
    .myform-col .form-group>label {
        display: block;
        line-height: 1.35;
        margin-bottom: 5px;
        font-size: 12px;
    }

    .myform-col .form-group {
        margin-bottom: 0;
        min-width: 0;
    }

    /* superseded by the input-group rules below */
    .myform-col .form-group select {
        width: 100% !important;
    }

    /* The red validation message is absolutely placed inside the field on the
       desktop layout; on a phone it belongs under the field, where it cannot
       sit on top of what is being typed. */
    .myform-col .form-group .help-block {
        position: static !important;
        margin-top: 4px;
    }

    /* Check boxes and their wrapped labels line up instead of stepping down. */
    .myform-col .checkbox,
    .myform-col .radio {
        margin: 4px 0;
    }

    .myform-col .checkbox label,
    .myform-col .radio label {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        line-height: 1.35;
        font-size: 12.5px;
    }

    .myform-col .checkbox label input,
    .myform-col .radio label input {
        position: static;
        margin: 2px 0 0;
        flex: 0 0 auto;
    }

    /* Section headings get air above them so a form reads as blocks. */
    .ai-heading {
        margin-top: 14px;
        font-size: 13px;
    }

    /* Wizard steps stay a horizontal row of four on a phone: the circle centred
       with its title beneath, scaled down to fit, rather than a tall column of
       numbers. The connecting line is dropped - at this width it has no room to
       run between the circles without crossing the titles. */
    .wizard .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start;
        border: 0;
    }

    .wizard .nav-tabs>li {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
        float: none !important;
        text-align: center;
        margin: 0;
    }

    .wizard .nav-tabs>li>a {
        display: block !important;
        padding: 0 2px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: center;
        white-space: normal;
        font-size: 10.5px;
        line-height: 1.25;
    }

    .wizard span.round-tab {
        position: static !important;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 28px;
        margin: 0 auto 5px;
        font-size: 12px;
    }

    .wizard span.round-tab i {
        font-size: 12px;
    }

    .wizard .nav-tabs li.active>a>.round-tab::after,
    .wizard .nav-tabs li.done>a>.round-tab::after {
        font-size: 12px;
    }

    .connecting-line {
        display: none;
    }

    .wizard li:after {
        display: none;
    }

    /* Step buttons at the foot of each step, side by side and reachable. */
    .main_flex,
    .wizard-footer {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .main_flex .btn_1,
    .main_flex .btn_2 {
        flex: 1 1 auto;
    }
}

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

    .myform-col,
    .myform-col.mycol-3,
    .myform-col.mycol-5,
    .myform-col.mycol-6,
    .myform-col.mycol-7,
    .myform-col.mycol-8,
    .myform-col.mycol-9 {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-column-gap: 16px !important;
        grid-row-gap: 16px !important;
    }

    .myform-col .form-group[class*="merge"] {
        grid-column: 1 / -1 !important;
    }
}

/* ---------- Registration forms on small screens, corrections ----------
   Two things the first pass got wrong.

   1. Cells that span columns. Besides .merge*, these forms use .sa-span-2 and
      .sa-span-3 (and the entity variants). In a one-column grid, "span 2" does
      not fold down - CSS grid creates an implicit second column for it, and
      that column then applies to every row, which is why whole sections stayed
      two-up on a phone with headings squeezed into a 90px cell. Every spanning
      cell is pinned to the full row instead.

   2. Input groups. Forcing width:100% on every .form-control also hit the
      inputs inside an .input-group, so the calendar button of a date field was
      pushed onto its own line below the field. Input groups are laid out
      explicitly here: field takes the room, button keeps its own width. */
@media (max-width: 767px) {

    .myform-col .form-group[class*="merge"],
    .myform-col [class*="sa-span-"],
    .myform-col .sa-full,
    .myform-col .sa-heading,
    .myform-col .ai-heading,
    .myform-col .sa-checks {
        grid-column: 1 / -1 !important;
    }

    /* Headings read as section breaks, not as another field. */
    .myform-col .sa-heading,
    .myform-col .ai-heading {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 16px 0 2px !important;
        word-break: normal;
    }

    /* Field + addon stay on one line. */
    .myform-col .form-group .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        width: 100% !important;
    }

    .myform-col .form-group .input-group>.form-control {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    .myform-col .form-group .input-group>.input-group-addon,
    .myform-col .form-group .input-group>.input-group-btn,
    .myform-col .form-group .input-group>.input-group-btn>.btn {
        flex: 0 0 auto;
        width: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* A field that is not in an input group still fills the row. */
    .myform-col .form-group>.form-control,
    .myform-col .form-group>select.form-control {
        width: 100% !important;
    }

    /* The check box groups get room to breathe rather than one word per line. */
    .myform-col .sa-checks {
        gap: 8px 20px !important;
        min-height: 0 !important;
    }

    .myform-col .sa-checks label {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* "Add address", "Add bank account", "Add business detail" and the like get
       their own full-width row instead of being wedged beside a field. */
    .myform-col .btn_1,
    .myform-col .btn_2,
    .myform-col .form-group>.btn {
        width: 100%;
    }
}

/* Two columns on a small tablet: spanning cells take the full row there too,
   for the same implicit-column reason. */
@media (min-width: 768px) and (max-width: 991px) {

    .myform-col .form-group[class*="merge"],
    .myform-col [class*="sa-span-"],
    .myform-col .sa-full,
    .myform-col .sa-heading,
    .myform-col .ai-heading,
    .myform-col .sa-checks {
        grid-column: 1 / -1 !important;
    }
}

/* ---------- Wizard steps across, not down, on small screens ----------
   jquery-steps.min.css lays the steps out as a vertical list by default and
   only turns them into a horizontal row from 768px up (a display:table switch
   in its own @media block). Below that the registration wizard therefore read
   as a stack of four lines. This repeats that horizontal layout for phones at
   a smaller scale: circle centred, title beneath it, and the connector drawn
   between circles rather than down the left-hand side.

   These selectors match the plugin exactly (.form-wizard is the class jQuery
   Steps puts on the container), so they override rule for rule. */
@media (max-width: 767px) {

    .form-wizard>.steps>ul {
        display: table;
        width: 100%;
        table-layout: fixed;
        margin: 0;
        padding: 0;
    }

    .form-wizard>.steps>ul>li {
        display: table-cell;
        width: auto;
        vertical-align: top;
    }

    .form-wizard>.steps>ul>li+li {
        margin-top: 0;
    }

    .form-wizard>.steps>ul>li>a {
        padding: 0 2px;
        text-align: center;
    }

    .form-wizard>.steps>ul>li>a>.number,
    .form-wizard>.steps>ul>li>a>.title {
        display: block;
        margin: 0 auto;
    }

    .form-wizard>.steps>ul>li>a>.number {
        width: 34px;
        height: 34px;
        line-height: 26px;
        font-size: 12.5px;
        border-width: 3px;
    }

    .form-wizard>.steps>ul>li>a>.number:after {
        font-size: 17px;
    }

    .form-wizard>.steps>ul>li>a>.title {
        width: auto;
        text-align: center;
        line-height: 1.25;
        font-size: 10.5px;
        white-space: normal;
        word-break: normal;
    }

    .form-wizard>.steps>ul>li>a>.number+.title,
    .form-wizard>.steps>ul>li>a>.title+.number {
        padding-left: 0;
        margin-top: 5px;
    }

    /* The connector runs between the circles at their vertical centre. */
    .form-wizard>.steps>ul>li>a:after {
        width: auto;
        height: 2px;
        top: 17px;
        bottom: auto;
        left: 0;
        right: 0;
    }

    .form-wizard>.steps>ul>li:first-child>a:after {
        top: 17px;
        left: 50%;
    }

    .form-wizard>.steps>ul>li:last-child>a:after {
        top: 17px;
        right: 50%;
    }
}