body {
    padding: 64px 0 0 0;
    font-family: "Inter", sans-serif;
    color: #3f3f3f;
}

/* --- HEADER --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 2rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(60,186,159,0.08);
    /*border-bottom: 1px solid #e0e0e0;*/
    flex-direction: row;
    flex-wrap: nowrap !important;
}


/* --- Home Menu --- */
.home-menu-btn {
    background: linear-gradient(90deg, #3cba9f 0%, #244880;
    100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(60,186,159,0.10);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 18px;
}

    .home-menu-btn:hover, .home-menu-btn:focus {
        background: linear-gradient(90deg, #244880;
        0%, #3cba9f 100%);
        box-shadow: 0 4px 16px rgba(60,186,159,0.18);
        transform: translateY(-2px) scale(1.03);
        color: #fff;
        text-decoration: none;
    }

/* --- Manage Subscription Menu --- */
.manage-sub-btn {
    background: linear-gradient(90deg, #244880;
    0%, #3cba9f 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(60,186,159,0.10);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 18px;
}

    .manage-sub-btn:hover, .manage-sub-btn:focus {
        background: linear-gradient(90deg, #3cba9f 0%, #244880;
        100%);
        box-shadow: 0 4px 16px rgba(60,186,159,0.18);
        transform: translateY(-2px) scale(1.03);
        color: #fff;
        text-decoration: none;
    }

/* --- USER MENU --- */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.user-icon-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
    outline: none;
}

    .user-icon-btn svg {
        order: 2;
        margin-left: 8px;
        transition: box-shadow 0.2s;
    }

        .user-icon-btn svg circle {
            fill: #244880;
        }

        .user-icon-btn svg path {
            width: 18px;
            height: 18px;
        }
/*        .user-icon-btn:focus svg, .user-icon-btn:hover svg {
        box-shadow: 0 0 0 2px #3cba9f33;
    }*/

.user-name {
    order: 1;
    color: #244880;
    font-weight: 500;
    font-size: 14px;
    /*    background: #e0f7fa;
    border-radius: 6px;
    padding: 6px 14px;
    box-shadow: 0 1px 4px rgba(60,186,159,0.08);*/
    display: inline-block;
}

.user-dropdown {
    position: absolute;
    top: 110%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(60,186,159,0.12);
    padding: 5px;
    /*    padding: 12px 18px;*/
    /*    min-width: 140px;*/
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* --- LOGOUT BUTTON --- */
.logout-btn {
    background: #244880;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(60,186,159,0.10);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .logout-btn:hover, .logout-btn:focus {
        background: #244880;
        box-shadow: 0 4px 16px rgba(60,186,159,0.18);
        transform: translateY(-2px) scale(1.03);
    }

/* --- PROJECT TITLE --- */
.project-title {
    font-weight: 700;
    color: #244880;
    font-size: 2em;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(60,186,159,0.10);
    margin-right: 1.5rem;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}

/* --- BODY CONTENT --- */
.body-content {
    min-height: calc(100vh - 120px);
    flex: 1;
    overflow-x: hidden;
    padding: 30px 0px 56px 0px;
}

.login-body-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* --- FOOTER --- */
.main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    padding: 5px 0 4px 0;
    background: #244880;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    /*    border-top: 1px solid #e0e0e0;*/
    box-shadow: 0 -2px 12px rgba(60,186,159,0.06);
}

/* --- LOGIN PAGE --- */
.login-bg {
    min-height: calc(100vh - 116px);
    background: linear-gradient(120deg, #e0f7fa 0%, #3cba9f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.body-content.login-body-content {
    padding-top: 0;
    /*    padding-bottom: 52px;*/ padding-bottom: 0;
    background: #fff;
    min-height: 100vh;
    position: absolute;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: -64px;
}

.login-card {
    /*   background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(60,186,159,0.10);
    padding: 48px 32px 40px 32px;*/
    max-width: 370px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.7s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.login-icon {
    margin-bottom: 22px;
}

.login-title {
    font-size: 2.1em;
    color: #244880;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.login-desc {
    color: #6c757d;
    font-size: 1.15em;
    margin-bottom: 28px;
}

.login-btn {
    background: linear-gradient(90deg, #3cba9f 0%, #244880;
    100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 16px 36px;
    font-size: 1.18em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(60,186,159,0.10);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

    .login-btn:hover, .login-btn:focus {
        background: linear-gradient(90deg, #244880;
        0%, #3cba9f 100%);
        box-shadow: 0 6px 18px rgba(60,186,159,0.22);
        transform: translateY(-2px) scale(1.03);
    }

/* --- Saas Management Page --- */
.saas-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 32px rgba(60,186,159,0.13);
    max-width: 480px;
    margin: 48px auto 0 auto;
    padding: 38px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.7s;
}

.saas-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.saas-icon {
    flex-shrink: 0;
}

/*.saas-title {
    font-size: 2em;
    color: #244880;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}*/

.saas-desc {
    color: #6c757d;
    font-size: 1.15em;
    margin-bottom: 28px;
    text-align: center;
}

.saas-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 18px;
}

.saas-result {
    margin-top: 18px;
    background: #e0f7fa;
    color: #244880;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 1.08em;
    text-align: center;
    box-shadow: 0 2px 8px rgba(60,186,159,0.08);
    min-width: 220px;
    max-width: 100%;
    word-break: break-word;
}

/* --- Home Page Shared --- */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: .3em;
}

.custom-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f8f9fa;
    border: 2px solid #244880;
    border-radius: 8px;
    padding: 10px 40px 10px 16px;
    font-size: 1.1em;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(60, 186, 159, 0.08);
    width: 100%;
    max-width: 320px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2317497b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}

    .custom-dropdown:focus {
        border-color: #2a9d8f;
        box-shadow: 0 0 0 2px rgba(60, 186, 159, 0.15);
    }

    .custom-dropdown option {
        color: #333;
        background: #fff;
    }

        .custom-dropdown option:hover {
            background: #244880 !important;
            color: #fff;
        }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2rem;
}

.filter-dropdown {
    min-width: 180px;
    flex: 0 0 220px;
}

.filter-slider {
    flex: 1 1 300px;
    min-width: 220px;
}

.slider-tooltip {
    position: absolute;
    background: #244880;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 1em;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: opacity 0.15s;
}

    .slider-tooltip::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #244880 transparent transparent transparent;
    }

input[type="range"].form-range {
    -webkit-appearance: none;
    width: 100%;
    height: 0.5rem;
    background: linear-gradient(90deg, #244880 0%, #244880 var(--range-progress, 100%), #e0e0e0 var(--range-progress, 100%), #e0e0e0 100%);
    border-radius: 4px;
    outline: none;
    box-shadow: 0 1px 4px rgba(60,186,159,0.10);
    position: relative;
    z-index: 1;
    padding: 0;
}

    input[type="range"].form-range::-webkit-slider-runnable-track {
        height: 6px;
        background: transparent;
        border-radius: 4px;
        position: relative;
        z-index: 2;
        margin: 0;
    }

    input[type="range"].form-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #828282;
        border: none;
        box-shadow: 0 2px 8px rgba(60,186,159,0.10);
        cursor: pointer;
        position: relative;
        z-index: 3;
        margin-top: -8px;
        transition: background 0.2s;
    }

    input[type="range"].form-range:focus::-webkit-slider-thumb {
        outline: none;
    }

    input[type="range"].form-range::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #828282;
        border: none;
        box-shadow: 0 2px 8px rgba(60,186,159,0.10);
        cursor: pointer;
        position: relative;
        z-index: 3;
        transition: background 0.2s;
    }

    input[type="range"].form-range:focus::-moz-range-thumb {
        outline: none;
    }

    input[type="range"].form-range::-ms-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #828282;
        border: none;
        box-shadow: 0 2px 8px rgba(60,186,159,0.10);
        cursor: pointer;
        position: relative;
        z-index: 3;
        transition: background 0.2s;
    }

.slider-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    user-select: none;
    pointer-events: auto;
}

    .slider-play-btn.disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

.chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 32px;
}

.reviewed-chart-box {
    border-radius: 22px;
    border: 1px solid #D0DDEA;
    background: #FFF;
    box-shadow: 0 4px 22.3px 0 #E4EDEF;
    padding: 14px 16px;
    /*    margin: 0 auto 24px auto;*/
    margin: 0;
    /*    max-width: 295px;*/
    max-width: 275px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reviewed-chart-details {
    text-align: left;
    margin-top: 10px;
    width: 100%;
    max-width: 200px;
    font-size: 0.85rem;
}

.responsive-indicator {
    display: inline-block;
    width: 10px;
    height: 6px;
    background-color: #244880;
    margin-right: 5px;
    vertical-align: middle;
}

.not-responsive-indicator {
    display: inline-block;
    width: 10px;
    height: 6px;
    background-color: #6c757d;
    margin-right: 5px;
    vertical-align: middle;
}

.chart-container {
    justify-items: center;
}

/*.chart-row {
    gap: 16px;
}*/

.d-md-none {
    display: none !important;
}

.d-md-inline {
    display: inline !important;
}

.content.px-4 {
    padding: 0 !important;
}

/* --- Reusable Shared Utilities (moved from component-scoped CSS) --- */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 2rem;
    padding: .45rem .95rem;
    font-weight: 500;
}

    .btn-pill .btn-icon {
        font-size: 1rem;
    }

.btn-soft-primary {
    background: #eef5ff;
    color: #244880;
    border: 1px solid #d3e4ff;
}

    .btn-soft-primary:hover {
        background: #d9eaff;
        color: #0a58ca;
    }

.btn-soft-danger {
    background: #fdecec;
    color: #dc3545;
    border: 1px solid #fac4c9;
}

    .btn-soft-danger:hover {
        background: #fbd3d6;
        color: #b02a37;
    }

.multi-text {
    min-height: 110px;
}

/* --- Layout with side nav --- */
/* One place for the left navigation width. Everything that depends on it (the nav itself, the content's left
   padding and the widest a data table may be) reads this value. At 1024px and below the navigation is a
   slide-out drawer, which keeps its original 250px. */
:root {
    --side-nav-width: 190px;
}

@media (max-width: 1024px) {
    :root {
        --side-nav-width: 250px;
    }
}

.layout-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: #f2f6f9;
}

.side-nav {
    width: var(--side-nav-width);
    background: #244880;
    color: #fff;
    padding-top: 0;
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 27px;
}

body .side-nav[b-lmay3gmvqw] {
    min-width: var(--side-nav-width);
    max-width: var(--side-nav-width);
}

.side-nav .top-row {
    background: #244880;
}

.body-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: var(--side-nav-width);
}

.layout-container {
    gap: 32px;
}

/*
.body-wrapper {
    padding-right: 16px;
}
*/

.side-nav {
    padding-right: 8px;
    box-sizing: border-box;
}

.no-display {
    display: none !important;
}

.left-menu .nav-item:first-child {
    margin-top: 0 !important;
}

.left-menu .nav-item:last-child {
    margin-bottom: 0 !important;
}

.left-menu .group-list {
    margin-bottom: 0 !important;
}

.left-menu .section-group {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}


.rightpanel_links, .what_new, .picture_title {
    margin: 0 0 20px 8px;
}

    .rightpanel_links h3, .what_new h3, .picture_title h3 {
        padding: 8px 12px;
        margin: 0;
        background: #244880;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
    }

    .rightpanel_links ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .rightpanel_links ul li {
            padding: 0;
            margin: 0;
            list-style: none;
            border-bottom: 1px dashed #eee;
        }

            .rightpanel_links ul li a {
                padding: 5px 12px;
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                text-decoration: none;
                color: #244880;
                transition: all linear 0.3s;
                display: block;
            }

                .rightpanel_links ul li a:hover, .rightpanel_links ul li a.active {
                    text-decoration: none;
                    color: #3767B0;
                    transition: all linear 0.3s;
                    background: #f7f7f7;
                }

a.expand_all {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #244880;
    transition: all linear 0.3s;
}

    a.expand_all:hover {
        text-decoration: none;
        color: #3767B0;
        transition: all linear 0.3s;
    }

.include_heading {
    padding: 5px 12px;
    margin: 0;
    border-bottom: 2px solid #244880;
    display: flex;
    align-items: center;
    gap: 8px;
    .include_heading
}

    .include_heading a {
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: #244880;
        transition: all linear 0.3s;
    }

        .include_heading a:hover {
            text-decoration: none;
            color: #244880;
            transition: all linear 0.3s;
        }

.knowledge_update {
    padding: 5px 12px 0 12px;
}

    .knowledge_update a {
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
        color: #244880;
        transition: all linear 0.3s;
    }

        .knowledge_update a:hover {
            text-decoration: none;
            color: #244880;
            transition: all linear 0.3s;
        }

.top-menu-list {
    overflow: visible !important;
}

.dropdown-menu {
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

    .dropdown-menu li a.dropdown-item {
        font-size: 14px;
        color: #535353;
    }

        .dropdown-menu li a.dropdown-item:hover, .dropdown-menu li a.dropdown-item:focus, .dropdown-menu li a.dropdown-item:active, .dropdown-menu li a.dropdown-item.active {
            background: #244880;
            color: #fff;
        }

/* Covers button.dropdown-item used in Knowledge Detail Sections / Tools menus
   (Bootstrap default only styles li > a variants) */
.dropdown-item {
    font-size: 14px;
    color: #535353;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #244880 !important;
    color: #fff !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #244880 !important;
    color: #fff !important;
}

/* Disabled items must not show hover colour */
.dropdown-item.disabled:hover,
.dropdown-item:disabled:hover,
.dropdown-item.disabled:focus,
.dropdown-item:disabled:focus {
    background-color: transparent !important;
    color: #6c757d !important;
    cursor: default;
}

.what_new .custom-dropdown {
    border: 1px solid #244880;
    border-radius: 5px;
    padding: 5px 40px 5px 11px;
    font-size: 0.813rem;
}

.picture {
    margin: 8px 0px 0 0px;
}

    .picture img {
        max-width: 100%;
        /*        border: 2px solid #3cba9f;*/
    }

.nav-cursor {
    cursor: default !important;
}

/* Hide Bootstrap's default caret added by dropdown-toggle */
.top-menu .dropdown-toggle::after {
    display: none !important;
}

.btn-more {
    font-size: 13px !important;
    color: #1f7c89 !important; /* override bootstrap .btn-link */
}

/* Ensure our color wins over .btn-link in all states */
button.btn-more.btn,
button.btn-more.btn-link {
    color: #1f7c89 !important;
    text-decoration: none;
}

    button.btn-more.btn-link:hover,
    button.btn-more.btn-link:focus,
    button.btn-more.btn-link:active {
        color: #176571 !important;
        text-decoration: underline;
    }

/* Document preview eye-icon button: hidden on pointer devices, visible on touch-only */
@media (hover: hover) {
    .kd-preview-tap-btn { display: none; }
}
@media (hover: none) {
    .kd-preview-tap-btn {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }
}

.container.web_padadjust {
    padding-left: 0;
}

@media (min-width: 1280px) and (max-width:1900px) {
    .reviewed-chart-box {
        max-width: inherit;
        width: calc(25% - 15px);
    }

    .rightPanel .filter-dropdown {
        flex: 0 0 180px;
    }
}

@media (min-width:768px) and (max-width:1279px) {
    .reviewed-chart-box {
        max-width: inherit;
        width: calc(50% - 32px);
    }

    .filter-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-dropdown, .filter-slider {
        flex: 0 0 0;
        font-size: 0.85rem;
        width: 100%;
        min-width: 80px;
    }

    .custom-dropdown {
        font-size: 0.85rem;
        max-width: inherit;
    }

        .custom-dropdown option {
            font-size: 0.813rem;
        }

    .container.mt-5 {
        margin-top: 1rem !important;
    }

    .rightPanel {
        padding: 0 12px 0 0;
    }
}

@media (max-width: 1100px) {
    .logout-btn {
        font-size: 0.95em;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-user-name[b-p3ovf8mzcl] {
        background: #fff !important;
    }
}

@media (max-width: 767px) {
    .main-header {
        min-height: 57px;
        padding: 0 0.5rem;
    }

    .project-title {
        font-size: 0.85rem;
    }

    .user-name {
        font-size: 0.80em;
        padding: 3px 6px;
        white-space: nowrap;
    }

    .logout-btn {
        font-size: 0.95em;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-user-name[b-p3ovf8mzcl] {
        background: #fff !important;
    }

    .main-footer {
        font-size: 0.77em;
        padding: 6px 0 5px 0;
    }

    .login-card {
        padding: 24px 8px 20px 8px;
        max-width: 320px;
    }

    .login-title {
        font-size: 1.3em;
    }

    .login-btn {
        font-size: 1em;
        padding: 12px 8px;
    }

    .reviewed-chart-box {
        max-width: inherit;
        padding: 12px 4px;
        margin-bottom: 12px;
    }

    .reviewed-chart-details {
        font-size: 0.85em;
        max-width: 200px;
    }

    .chart-row {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .filter-dropdown, .filter-slider {
        flex: 0 0 0;
        font-size: 0.813rem;
        width: 100%;
    }

    .filter-slider {
        flex: 1 1 100%;
    }

    .d-md-inline {
        display: none !important;
    }

    .d-md-none {
        display: block !important;
    }

    .container.mt-5 {
        margin-top: 1.5rem !important;
    }

    .custom-dropdown {
        max-width: inherit;
        font-size: 0.813rem;
    }

    .filter-slider .me-2 {
        margin-right: 3px !important;
    }

    .filter-slider .ms-2 {
        margin-left: 3px !important;
    }

    .date_displaytext {
        font-size: 0.813rem
    }

    .user-menu .user-icon-btn svg {
        width: 26px !important;
        height: 26px !important;
    }

    .filter-row.mb-4 {
        margin-bottom: 0.5rem !important;
    }

    .login-bg {
        min-height: calc(100vh - 94px);
    }

    .body-content {
        padding-top: 38px;
        padding-bottom: 34px;
    }

    body .page-content-spacing {
        padding: 0 12px 0px 12px !important;
    }

        body .page-content-spacing[b-shf9fbwkt9] {
            padding: 0 12px 40px 12px !important;
        }

    nav.primary-menu {
        position: absolute;
        left: 0px;
        top: 50px;
        width: 100%;
    }

    .primary-menu ul[b-lmay3gmvqw] {
        gap: 10px;
        padding: 0 10px !important;
        flex-direction: row !important;
    }

    .primary-menu ul > li[b-lmay3gmvqw] {
        position: relative;
        width: calc(50% - 10px);
    }

    .container.mt-5.position-relative {
        margin-top: 7rem !important;
    }

    .date_displaytext {
        text-align: left !important;
    }
}

@media (max-width: 991px) {
    .layout-container {
        gap: 0;
    }

    .body-content {
        padding-left: 0;
    }

    .side-nav {
        padding-right: 0;
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .login-bg {
        min-height: calc(100vh - 115px);
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .page-content-spacing {
        padding: 0 12px 48px 12px !important;
    }
}
/* Shared vertical icon button (Edit/Delete) */
.btn-icon-vert {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .4rem .55rem;
    line-height: 1;
}

    .btn-icon-vert i {
        margin: 0 0 .2rem 0;
        font-size: 1rem;
    }

    .btn-icon-vert .btn-label {
        font-size: .65rem;
    }
/* Shared data table & pagination (moved from component CSS) */
.fancy-names-table {
    --row-hover: #f5f9ff;
    --sorted-bg: #fff7e0;
}

    .fancy-names-table thead.sticky-header th {
        position: sticky;
        top: 0;
        background: #ddebf9 !important;
        z-index: 3;
    }

    .fancy-names-table thead.sticky-header .filters-row th {
        top: 32px;
    }

    .fancy-names-table tbody tr.data-row:hover {
        background: none !important;
    }

    .fancy-names-table th.sorted-col {
        background: linear-gradient(#fff3cd,#ffe8a1);
    }

    .fancy-names-table td.sorted-cell {
        background: var(--sorted-bg);
        font-weight: 500;
    }

    .fancy-names-table td, .fancy-names-table th {
        padding: .55rem .65rem;
        vertical-align: top;
    }

    /* New shared header filter spacing for tables (Names & KeyDocs) */
    .fancy-names-table thead .hdr-row th,
    .kd-table thead .hdr-row th {
        position: relative;
        padding-right: 2rem;
    }

/* Shared header cell should allow overflow for attached popovers */
.kd-table thead tr.hdr-row th {
    overflow: visible;
}

    /* When a column filter is open, elevate its header to avoid overlap */
    .kd-table thead tr.hdr-row th.filter-open {
        z-index: 3000;
    }

/* Shared filter toggle button */
.btn-filter {
    background: transparent;
    border: none;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: #666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: .35rem;
    right: .35rem;
    background: #244880;
    border-radius: 50px;
    color: #ffffff;
    line-height: 1.5rem;
    text-align: center;
    transition: all linear 0.2s;
}

    .btn-filter:hover {
        color: #bceae6;
        transition: all linear 0.2s;
    }

    .btn-filter:focus {
        outline: none;
        box-shadow: none;
    }

    .btn-filter i {
        position: relative;
        top: 2px;
    }
/* Shared filters row visibility helpers */
.filters-row th {
    background: #f1f3f5;
}

.filters-row input {
    min-width: 120px;
}

.filters-row.filters-hidden {
    display: none;
}

.pagination-bar .pagination .page-link {
    min-width: 32px;
    text-align: center;
}

.pagination-bar .ellipsis {
    pointer-events: none;
}

.list-footer {
    background: #fff;
    padding-bottom: 1.25rem;
}

.footer-spacer {
    height: 36px;
}
/* Generic table wrapper (formerly names-table) */
.data-table-wrapper {
    position: relative;
    max-width: calc(100vw - var(--side-nav-width) - 24px);
    overflow-x: auto;
    overflow-y: visible; /* do not create an inner scroll; let page handle vertical scroll */
    -webkit-overflow-scrolling: touch;
}

/* Override Bootstrap table-responsive vertical overflow to avoid inner scrollbars
   when filter menus are open. */
.table-responsive {
    overflow-y: visible !important;
}

/* When a column filter dropdown is open, ensure the container is tall enough for
   the menu to be fully visible. Applied only when needed so tables with few rows
   have no excess whitespace in normal state. */
.table-responsive:has(.filter-open) {
    min-height: 320px;
}

/* Ensure table allows overlay menus without forcing inner scroll */
.data-table-wrapper > table,
.kd-table {
    overflow: visible;
}

.data-table-wrapper > table {
    min-width: 1100px;
}

.web_charrtadjust {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


@media (max-width:992px) {
    .data-table-wrapper > table {
        min-width: 1000px;
    }
}

@media (max-width:1024px) {


    .body-content {
        padding-right: 0px;
    }

    .container.web_padadjust {
        padding-left: 12px;
    }

    .web_charrtadjust {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #accordionExample .accordion-button.icon-only.collapsed {
        background: none !important;
        box-shadow: none !important;
    }

    #accordionExample .accordion-item, #accordionExample .accordion-button.icon-only:not(.collapsed) {
        background: none;
        border: 0;
    }

    #accordionExample .accordion-button.icon-only .accordion-icon {
        background: #244880;
        color: #e6f6f0;
    }

    #accordionExample .accordion-collapse {
        background: #fff;
        border-bottom: 1px solid #dee2e6;
    }

    #accordionExample .accordion-button.icon-only:not(.collapsed) {
        background: #fff !important;
        box-shadow: none !important;
    }

    #accordionExample .accordion-body {
        padding-top: 0px;
    }
}

img {
    max-width: 100%;
}

.mobile-menu-trigger .mm-bar {
    background: #244880 !important;
}

.mobile-user-block {
    background: #244880 !important;
    box-shadow: none !important;
}

.group-item.nav-item a {
    background: none !important;
    padding: 5px 10px !important;
    height: 2rem !important;
}

.nav-anchor {
    text-decoration: none !important;
}

.left-menu .nav-item a {
    color: #d7d7d7 !important;
    font-weight: 400 !important;
}

    .left-menu .nav-item a:hover {
        font-weight: 400 !important;
        color: #fff !important;
    }

    .left-menu .nav-item a.active {
        font-weight: bold !important;
        color: #fff !important;
    }

.nav-cursor {
    cursor: default !important;
}

/* --- Reusable multi-select filter menu (shared across Razor pages) --- */
.table-filter-menu {
    position: absolute;
    z-index: 99;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    /*padding: .5rem;*/
    padding: 0 .5rem 0 .5rem;
    width: min(360px, 360px);
    max-height: 270px;
    overflow: auto;
    border-radius: 6px;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    font-size: .9rem;
}

.table-filter-menu-search {
    position: sticky;
    top: 0;
    z-index: 4500;
    background: #fff;
    /*padding: .5rem .5rem .35rem .5rem;*/
    padding: 1rem .5rem .35rem .5rem;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    margin: 0 0 .35rem 0;
}

.table-filter-menu .form-control {
    font-size: .85rem;
    border: 1px solid #244880;
    border-radius: .375rem;
    background: #fff; /* ensure opaque background over list items */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}

    .table-filter-menu .form-control::placeholder {
        color: #9aa0a6;
    }

.table-filter-menu .form-check {
    margin-bottom: .2rem;
    padding: .35rem .45rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .table-filter-menu .form-check:hover,
    .table-filter-menu .form-check:focus-within {
        background: #f4feff;
    }

.table-filter-menu .form-check-label {
    user-select: none;
    font-size: .75rem;
    color: #333;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    /*    line-height: 1.3;*/
}

/* Emphasize the first option (usually Select All) */
.table-filter-menu .form-check:first-of-type .form-check-label {
    font-weight: 600;
}

.table-filter-menu .form-check-input {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #3767B0;
    border: 2px solid #244880;
    margin-top: .1rem; /* better alignment for multi-line labels */
}

    .table-filter-menu .form-check-input:focus {
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
        border-color: #3767B0;
    }

    .table-filter-menu .form-check-input:checked {
        background-color: #244880;
        border-color: #244880;
    }

        /* Highlight checked rows and labels */
        .table-filter-menu .form-check-input:checked + .form-check-label {
            font-weight: 600;
        }

.table-filter-menu .form-check:has(.form-check-input:checked) {
    background: #f4feff;
}

.table-filter-menu .btn {
    min-width: 72px;
}

.table-filter-menu .small.text-muted {
    padding-top: .25rem;
    padding-left: .45rem;
}

/* Keep bottom actions (Filter/Cancel) always visible */
.table-filter-menu .d-flex.gap-2.mt-2 {
    position: sticky;
    bottom: 0;
    background: #fff; /* ensure opaque footer */
    /*padding: .5rem .25rem .25rem .25rem;*/
    padding: .5rem .25rem 1rem .25rem;
    margin-top: .5rem; /* separate from list */
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.06);
    z-index: 4000; /* elevate above scroll content */
}

/* Prevent list items from overlaying sticky header/footer; keep them in a lower stacking layer */
.table-filter-menu .form-check {
    position: relative;
    z-index: 0; /* lower than sticky header/footer */
}

/* Subtle scrollbar to match the popover look */
.table-filter-menu::-webkit-scrollbar {
    width: 10px;
}

.table-filter-menu::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 6px;
}

.table-filter-menu::-webkit-scrollbar-thumb {
    background: #cbd3da;
    border-radius: 6px;
    border: 2px solid #f1f3f5;
}

    .table-filter-menu::-webkit-scrollbar-thumb:hover {
        background: #b6c0c8;
    }

/* Responsive adjustments for phones and small tablets */
@media (max-width: 768px) {
    .table-filter-menu {
        position: absolute; /* anchor to header cell on mobile */
        width: 360px;
        /*        max-height: 56vh;*/
        font-size: .85rem;
        left: auto; /* align with header cell */
        right: 0;
        top: calc(100% + 6px); /* below the header cell */
    }

        .table-filter-menu .form-check-input {
            width: .95rem;
            height: .95rem;
        }
}

/* Landscape tablets/smaller laptops */
@media (max-width: 1366px) and (orientation: landscape) {
    .table-filter-menu {
        /*        max-height: 56vh;*/
    }
}

/* Very short landscape viewports (common on phones rotated) */
@media (orientation: landscape) and (max-height: 500px) {
    .table-filter-menu {
        position: absolute; /* keep anchored to header cell */
        left: auto;
        right: 0;
        top: calc(100% + 6px);
        width: 360px;
        /*        max-height: 48vh; */
    }
}



.table-filter-menu .form-check {
    align-items: flex-start;
}

.table thead th {
    padding: 8px 30px 8px 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #244880;
    background: #ddebf9 !important;
}

.table tbody tr td {
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #3f3f3f;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    vertical-align: middle;
}

    .table tbody tr td:last-child {
        border-right: 1px solid #eee;
    }



.table tbody tr:hover > * {
    /*    --bs-table-bg-state: transparent!important;*/
}

.table tbody tr td a.doc-number, .table tbody tr td a {
    color: #244880;
    text-decoration: none;
}

    .table tbody tr td a.doc-number:hover, .table tbody tr td a:hover {
        color: #3767B0;
        text-decoration: underline;
    }

.active > .page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #244880;
    border-color: #244880;
}

.page-link {
    color: #244880;
}

.kd-row .custom-dropdown {
    border: 1px solid #244880;
    border-radius: 5px;
    padding: 5px 40px 5px 11px;
    font-size: 0.813rem;
}

.kd-row .form-control {
    border-radius: 6px;
    border: 1px solid #DAE4E6;
    /* background: #FFF; */
    box-shadow: 0 4px 8.9px 0 rgba(228, 237, 239, 0.86);
    padding: 5px 11px;
    font-size: 0.813rem;
}

.action-bar .form-control {
    color: #535353;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #E2E2E2;
    background: #FFF;
}



.kd-action-link {
    color: #fff !important;
}

.h3, h3 {
    color: #244880;
}

.form-check-input {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #3767B0;
    border: 2px solid #E2E2E2;
    margin-top: .2rem;
}

.kd-preview .form-check-input {
    margin-top: .1rem;
}

.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
    border-color: #244880;
}

.form-check-input:checked {
    background-color: #244880;
    border-color: #244880;
}

.col-form-label {
    font-size: 14px;
}

.form-control {
    border: 1px solid rgb(23 73 123);
    border-radius: 5px;
    padding: 5px 11px;
    font-size: 0.813rem;
}

.form-select.custom-dropdown {
    border-radius: 6px;
    border: 1px solid #DAE4E6;
    /*    background: #FFF;*/
    box-shadow: 0 4px 8.9px 0 rgba(228, 237, 239, 0.86);
    padding: 5px 40px 5px 11px;
    font-size: 0.813rem;
    max-width: inherit;
}

.alpha-letter:hover, .alpha-letter.active {
    background: #244880;
    !important;
    border-color: #244880;
    !important;
}

.form-check-label {
    font-size: 0.813rem;
}

.fw-semibold {
    color: #244880;
}

.transfer-actions {
    background: #f3f9ff !important;
    border: 1px solid #244880;
    !important;
}


.transfer-list {
    border: 1px solid #244880;
    !important;
}

h5 {
    font-size: 1rem !important;
}

.btn-cluster .btn {
    display: inline-flex;
    gap: 5px;
}

.flatpickr-months .flatpickr-month {
    color: #244880;
    background: #c2d4e7 !important;
    font-size: 13px;
}

.flatpickr-months .flatpickr-current-month {
    font-size: 15px;
    color: #244880;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgb(113 166 219);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    margin-top: -11px;
    color: #244880;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover:hover svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #244880;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #244880;
    !important;
    border-color: #244880;
    !important;
    color: #fff;
}

/*
.flatpickr-calendar .flatpickr-day.today:hover, .flatpickr-calendar .flatpickr-day.today:focus,
.flatpickr-calendar .flatpickr-day.today {
    background: #3cba9f !important;
    border-color: #3cba9f !important;
    color: #fff;
}
    */

.flatpickr-calendar span.flatpickr-weekday {
    color: #244880;
}

.main-header .mobile-menu-trigger {
    position: absolute !important;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.mobile-user-block {
    display: none;
}

.login_ctrl {
    position: relative;
    left: 25%;
    text-align: center;
    /*    background: #f9f9f9;*/
    padding: 70px 50px;
    /*    border: 1px solid #eee;*/
}

.login_logo {
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    padding-top: 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.login-card {
    position: relative;
    /*  left:25%;
    transform:translateX(50%);*/
    max-width: 520px;
}

    .login-card:after {
        content: "";
        position: absolute;
        inset: -2px;
        /*        background: radial-gradient(700px 200px at 15% 0%, rgba(14, 165, 164, .22), transparent 55%), radial-gradient(600px 260px at 110% 10%, rgba(37, 99, 235, .18), transparent 55%);*/
        pointer-events: none;
        border-radius: 20px;
    }

.ms-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 0;
    border: 1px solid rgba(15, 23, 42, .18);
    background: #244880;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
    user-select: none;
    transition: all linear 0.2s;
}

body .login-bg {
    background: url(../images/login_bg.jpg) no-repeat top left #fff;
    background-size: 50% auto;
    min-height: 100vh;
}

body .login-title {
    color: #244880;
}

body .btn-success {
    background: #7AC143 !important;
    border-color: #7AC143 !important;
}

    body .btn-success:hover,
    body .btn-success:focus-visible {
        background: #649E37 !important;
        border-color: #649E37 !important;
    }

body .btn-primary {
    background: #244880 !important;
    border-color: #244880 !important;
}

    body .btn-primary:hover,
    body .btn-primary:focus-visible {
        background: #1d3a68 !important;
        border-color: #1d3a68 !important;
    }

/* Outline-primary buttons: border/text use theme colour; hover fills with theme */
body .btn-outline-primary {
    color: #244880 !important;
    border-color: #244880 !important;
}

    body .btn-outline-primary:hover,
    body .btn-outline-primary:focus-visible,
    body .btn-outline-primary:active,
    body .btn-outline-primary.active {
        background-color: #244880 !important;
        border-color: #244880 !important;
        color: #fff !important;
    }

body .btn-secondary {
    background: #808285 !important;
    border-color: #808285 !important;
}

    body .btn-secondary:hover,
    body .btn-secondary:focus-visible {
        background: #696B6D !important;
        border-color: #696B6D !important;
    }

body .btn-info {
    color: #FFF !important;
    background: #00C1DE !important;
    border-color: #00C1DE !important;
}

    body .btn-info:hover,
    body .btn-info:focus-visible {
        color: #FFF !important;
        background: #009EB6 !important;
        border-color: #009EB6 !important;
    }

body .btn-black {
    color: #FFF !important;
    background: #3F3F3F !important;
    border-color: #3F3F3F !important;
}

    body .btn-black:hover,
    body .btn-black:focus-visible {
        color: #FFF !important;
        background: #323232 !important;
        border-color: #323232 !important;
    }

body .login-desc {
    color: #3f3f3f;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

body .project-logo {
    max-height: 45px !important;
}

body .main-header {
    position: fixed !important;
}

.mobfixed_dorpdown {
    position: fixed;
    top: 57px;
    left: 0;
    width: 100%;
    z-index: 9;
}

.accordion-button.icon-only .accordion-icon {
    width: 30px !important;
    height: 30px !important;
}

nav.top-menu .top-menu-link {
    padding: 8px 14px;
    color: #535353;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #E2E2E2;
    background: #FFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

body .loading-progress-text {
    padding-top: 64px;
}

.ms-btn:hover {
    transition: all linear 0.2s;
    border: 1px solid rgba(15, 23, 42, .30);
    background: #093560;
}

/* Global input error border (for required/invalid fields in Blazor) */
.nl-input-error {
    border-color: #dc3545 !important;
}

    .nl-input-error:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 .2rem rgba(220,53,69,.25) !important;
    }

/*---------------14-01-26 start-----------------*/
.what_new .filter-dropdown {
    flex: 0 0 180px;
}

.rightPanel .accordion .accordion-button {
    background: #FFF !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
}

.rightPanel .accordion-button:focus, .rightPanel .accordion-button:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


.update_icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
}

    .update_icon:after {
        content: '';
        position: absolute;
        top: -2px;
        left: 6px;
        border: 7px solid transparent;
        border-bottom: 7px solid #ff0000;
    }

.new_icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    background: url('../images/new.png') no-repeat center center;
    background-size: cover;
}

.rightpanel_links ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
}
/*---------------14-01-26 end-----------------*/
#accordionFlushExample .rightpanel_links {
    max-height: 325px;
    overflow-x: hidden;
    overflow-y: auto;
}

/*05-02-2026 Start*/
.left-menu .section-group .group-header {
    background: none;
    position: relative;
    border-radius: 8px;
    padding: 0.75rem;
}

    .left-menu .section-group .group-header:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .left-menu .section-group .group-header[aria-expanded] {
        background: rgba(255, 255, 255, 1);
        color: #244880;
    }

.left-menu .section-group .group-caret {
    position: absolute;
    right: 12px;
    width: 7px;
    height: 7px;
    border: 0;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: rotate(43deg);
}

    .left-menu .section-group .group-caret.open {
        transform: rotate(134deg);
        border-color: #333;
        margin-top: -3px;
    }

nav.top-menu .top-menu-link .caret {
    width: 7px;
    height: 7px;
    border: 0;
    border-top: 1.5px solid #535353;
    border-right: 1.5px solid #535353;
    transform: rotate(134deg);
    font-size: 0;
}

nav.top-menu .top-menu-link:hover, nav.top-menu .top-menu-link:focus {
    border: 1px solid #244880;
    background: #244880;
    color: #fff;
}

    nav.top-menu .top-menu-link:hover .caret {
        border-top: 1.5px solid #fff;
        border-right: 1.5px solid #fff;
    }

.rightPanel .accordion-button::after {
    width: 0.75rem;
    height: 0.75rem;
    background-size: 0.75rem;
}

.reviewed-chart-box h5.mb-2 {
    font-size: 15px !important;
    font-weight: 600;
    margin-bottom: 8px !important;
}

.reviewed-chart-details .fw-bold.mt-2 {
    font-size: 15px !important;
    font-weight: 600;
    text-align: center;
    margin-top: 6px !important;
}

reviewed-chart-details div:nth-child(2) {
    border-top: 1px solid #eee;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: #E6EEFA !important;
    --bs-table-bg-state: #E6EEFA !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #F8FAFB !important;
}

.table-striped > tbody > tr:nth-of-type(odd):hover > * {
    --bs-table-bg-type: #E6EEFA !important;
}

.table-hover > tbody > tr:hover:nth-of-type(odd) > * {
    --bs-table-bg-type: #E6EEFA !important;
}

table tr td .btn-soft-primary, table tr td .btn-soft-danger {
    background: none !important;
    border: none !important;
}

/*.btn-secondary {
    background: #7ac100;
    border-color: #7ac100;
}

    .btn-secondary:hover {
        background: #558701 !important;
        border-color: #558701 !important;
    }*/

/*05-02-2026 End*/

body .spinner-border {
    border-color: #244880;
    border-right-color: transparent;
}

body .title-loading .spinner-border {
    border-color: #fff;
    border-right-color: transparent;
}

.rgtpanel-leftpad-0 {
    padding-left: 0 !important;
}

body a {
    color: #244880;
    text-decoration: none;
}

    body a:hover {
        text-decoration: underline;
    }

li a:hover {
    text-decoration: none;
}

.pagination-bar {
    padding: 0 15px !important;
}

body .page-content-spacing {
    padding: 0 12px 0px 12px !important;
}

    body .page-content-spacing[b-shf9fbwkt9] {
        padding: 0 12px 40px 12px !important;
    }

body .names-table[b-hhngly0mih] {
    max-width: calc(100vw - var(--side-nav-width) - 24px);
}

.rightPanel {
    margin-right: 12px;
}

.container.web_charrtadjust {
    padding-left: 15px !important;
}

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

@media (min-width: 1150px) and (max-width:1400px) {
    .data-table-wrapper.chronology-list {
        max-width: calc(100vw - var(--side-nav-width) - 24px);
    }
}

@media (min-width: 1400px) and (max-width:1900px) {
    .date_displaytext {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width:1366px) {
    body .page-content-spacing {
        padding: 0 12px 0px 12px !important;
    }

        body .page-content-spacing[b-shf9fbwkt9] {
            padding: 0 12px 40px 12px !important;
        }
}





@media (max-width: 1300px) {
    body .login-bg {
        background-size: cover;
    }

    .login_ctrl {
        background: rgba(255, 255, 255, 0.95);
        left: 0;
    }

    .include_heading {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1100px) {
    .mobile-user-block {
        display: block;
    }
}

@media (max-width:1024px) {

    .body-wrapper {
        padding-left: 0;
    }

    .project-title {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    body .data-table-wrapper {
        max-width: calc(100vw - 24px);
    }

    body .names-table[b-hhngly0mih] {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width:990px) {
    body {
        padding-top: 86px;
    }

        body .loading-progress-text {
            padding-top: 90px;
        }

    .body-content.login-body-content {
        margin-top: -23px;
    }
}

@media (min-width: 768px) and (max-width:1300px) {
    .what_new .filter-dropdown {
        flex: 0 0 0px;
    }
}



@media (max-width:767px) {
    .body-content.login-body-content {
        /*            padding-bottom: 35px;*/
        margin-top: -25px;
    }

    .rightPanel {
        padding: 0 16px 0 8px;
    }

    .what_new .filter-dropdown {
        flex: 0 0 0px;
    }

    .rgtpanel-leftpad-0 {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .rightPanel {
        margin-right: 0;
    }
}

/* Floating scroll button */
.scroll-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: #3767B0;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0;
    transition: background-color .15s ease, opacity .15s ease;
    opacity: .85;
}

.scroll-fab:hover {
    background-color: #2a529a;
    opacity: 1;
    color: #fff;
}

.scroll-fab i {
    font-size: 1.4rem;
    line-height: 1;
}

/* Knowledge detail edit mode: collapse left sidebar for maximum editing space */
body.knowledge-edit-mode .side-nav {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease;
}

body.knowledge-edit-mode .body-wrapper {
    padding-left: 0 !important;
    transition: padding-left 0.25s ease;
}

@media (max-width: 991px) {
    /* On mobile the sidebar is already hidden, so edit mode has no additional effect */
    body.knowledge-edit-mode .body-wrapper {
        padding-left: 0 !important;
    }
}

/* Knowledge list — content indicator */
.knowledge-item-link {
    color: #244880;
    text-decoration: none;
}

/* Quill custom toolbar button: Insert Table */
.ql-table::before {
    content: "\25A6";
    font-size: 1rem;
    line-height: 1;
}

/* Print styles for knowledge page browser PDF */
@media print {
    .no-print { display: none !important; }
}

/* Hide leading/trailing empty paragraphs saved by Quill in read-mode content */
.sp-html-content > p:first-child:empty,
.sp-html-content > p:first-child > br:only-child,
.sp-html-content > p:last-child:empty,
.sp-html-content > p:last-child > br:only-child {
    display: none;
}

/* ── Document Preview floating panel ────────────────────────────────────────
   Shared between KeyDocsList and KnowledgeDetail Key Documents sections.
   KeyDocsList also has the identical rule in its component-scoped CSS;
   this global copy ensures it applies on the Knowledge Detail page too. */
.doc-preview-container {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 640px;
    height: 480px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 1500;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.doc-preview-container iframe,
.doc-preview-container embed,
.doc-preview-container object {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 1024px) {
    .doc-preview-container {
        top: auto;
        left: auto;
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        height: 50vh;
    }
}

/* Transparent backdrop behind the doc-preview-container; tapping it closes the preview.
   On pointer/hover devices (desktop) pointer-events are disabled so normal page interaction
   is not blocked. On touch-only devices it intercepts taps outside the preview panel. */
.preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1499;
    background: transparent;
    cursor: default;
}
@media (hover: hover) {
    .preview-backdrop { pointer-events: none; }
}

/* Quill editor table rendering */
.ql-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}
.ql-editor table td {
    border: 1px solid #aaa;
    padding: 4px 8px;
    min-width: 40px;
}

/* ── Knowledge detail page toolbar ─────────────────────────────────────────
   Normal-flow toolbar. The fixed main-header sits at z-index 2000 so it
   always covers the toolbar when the page is scrolled.
   Dropdown overlays (1049) and menus (1050-1060) are safely below the
   header (2000).                                                           */
.kd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 6px 0;
    margin-bottom: 0.75rem;
}

.kd-toolbar-left,
.kd-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Tablets and smaller — stack toolbar halves vertically */
@media (max-width: 767px) {
    .kd-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .kd-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    /* Shrink the dropdown toggle buttons on mobile */
    .kd-toolbar-right .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Small tablets (768–991px) — keep inline but allow wrapping */
@media (min-width: 768px) and (max-width: 991px) {
    .kd-toolbar-right .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
    }
}

/* ── Mobile/tablet dropdown positioning (< 768px) ───────────────────────────
   The inline right:0 style pins the dropdown's right edge to the button
   right edge, so on narrow screens the panel extends off the left of the
   viewport. Override to anchor from the left edge instead (opens rightward).
   The nested Previous/Next submenu cannot fly further left on a phone, so
   it is made to expand inline below its trigger item.                      */
@media (max-width: 767px) {
    /* Sections / Tools panels: open rightward from the button's left edge */
    .kd-toolbar-right > .position-relative > .dropdown-menu.show {
        right: auto !important;
        left: 0 !important;
        max-width: min(300px, calc(100vw - 16px)) !important;
    }

    /* Previous/Next submenu: flow inline beneath the trigger row */
    .kd-toolbar-right .dropdown-menu.show .dropdown-menu.show {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 180px;
        overflow-y: auto;
        border-radius: 0 !important;
        border-left: 3px solid #244880;
        box-shadow: none !important;
        margin: 2px 0 4px;
        background-color: #eef2f7 !important;
    }

}