@import url(root.css);
@import url(colors.css);
@import url(impcss.css); 

body {
    padding: 0;
    margin: 0;
    font-weight: var(--font-weight-regular);
    color: var(--color-900-gray);
    font-family: var(--body-font);
    font-size: var(--font-size-x-small);
    text-rendering: optimizeSpeed;
    background: var(--color-100-gray);
}


body.page,
body#top {    background: var(--color-100-gray)}
body#top { padding-top: 80px;}

body.leftTopLayout {padding-top: 96px;}
body.topLeftLayout{padding-top: 145px;}
body.summaryLayout {padding: 143px 60px 32px 13px !important;}
body.TPPADMIN.topLeftLayout {   padding-top: 92px;}
body.MandatoryVal, body.pop-up.workflow {	   overflow-x: hidden;	 }
/* #healthPiQtureLayout.leftTopLayout{ padding-top:var(--padding-4xl) !important; } */

/* utils */
.no-min-height {
    min-height: auto !important;
}

hr{ border-color: var(--color-200-gray);}
.text-semi-bold{ font-weight: var(--font-weight-semibold);}
b, strong{font-weight: var(--font-weight-semibold);}
/****Customized--scrollbar****/
::-webkit-scrollbar{width:6px;height:6px; }
::-webkit-scrollbar-track{background:var(--color-100-gray);  box-shadow:var(--shadow-sm) inset rgba(var(--gray-rgb),20%)}
::-webkit-scrollbar-thumb{background:var(--color-300-gray); cursor:pointer; height: 4px; border-radius: var(--radius-sm);  box-shadow:var(--elevation-light-sm)}
::-webkit-scrollbar-thumb:hover{background:var(--color-500-gray); cursor:pointer}
/********/

/* btn */
a, a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer; text-decoration: underline;
}

a, a:not([href]):not([class]):hover {
    text-decoration: underline;
}
.btn-block { width: 100%;}


.btn {
    border-radius: var(--radius-4xl);
    min-width:40px;
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-semibold);
    border-width: 2px;
    padding: var(--padding-lg);
    line-height: 24px;
    font-size: var(--font-size-sm);
    padding: var(--padding-xs) var(--padding-2xl);
}


.btn-chip {
    font-size: 12px !important;
    border: solid 2px var(--color-200-gray) !important;
    padding: 0 var(--padding-lg) !important;
    line-height: normal;
    border-radius: var(--radius-xl);
    font-weight: 500;
    padding: 1px  4px  !important;
    font-family: 'Poppins';
    text-align: left;
}
.btn-chip:hover, .btn-chip:focus{ border-color: var(--color-900-gray) !important; }

.btn-chip i{ width: 16px; height: 16px;}
.btn-group .btn-chip {  border-radius: var(--radius-4xl) 0px 0px var(--radius-4xl);  margin-bottom: 4px;}
.btn-group .btn-chip:last-child {  border-radius: 0px var(--radius-4xl) var(--radius-4xl)  0px;  min-width: inherit;  border-left: 0px !important;}



.btn-chip-attachment, .btn-chip-attachment:hover, .btn-chip-attachment:focus {
    height: 32px;
    font-size: var(--font-size-x-small) !important;
    border: solid 1px var(--color-200-gray);
    padding: 0 var(--padding-2xl) !important;
    /* margin-left: 8px; */
}

.btn-chip-attachment i{ width: 12px; height: 12px; background-size: contain;}

.btn-attach .btn-chip-attachment:first-child{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent !important;
    
}
.btn-attach .btn-chip-attachment:last-child{
    min-width: 30px;
    border-left-color: transparent !important;
}
.btn-attach .btn-chip-attachment:focus{
    border-color:var(--color-200-gray) ;
}
.btn-help {
    display: inline-block;
    background: url('/icons/icons/zinnia-icons/images/circle-info.svg') no-repeat center / contain !important;
    width: 16px;
    height: 16px;
    color: transparent;
    margin-left: 2px;
    top: 1px;
    position: relative;
}
/*
.btn {
    border-radius: var(--radius-4xl);
    min-width: 100px;
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-semibold);
    border-width: 2px;
    padding: var(--padding-sm);
    line-height: 22px;
    padding: var(--padding-sm) var(--padding-2xl);
}*/
.btn-lg {
    /*padding: var(--padding-lg);
    line-height: 24px;
    font-size:var(--font-size-medium);
    padding: var(--padding-lg) var(--padding-3xl);*/

    padding: var(--padding-lg);
    line-height: 24px;
    font-size: var(--font-size-sm);
    padding: var(--padding-xs) var(--padding-2xl);
}

/**.btn-primary**/
.btn-primary {
    background: var(--color-900-gray) !important;
    border-color: var(--color-900-gray) !important;
    color: var(--color-white) !important;
}

.btn-primary:hover, .btn-primary.active, .btn-primary:active {
    background: var(--color-white) !important;
    border-color: var(--color-900-gray) !important;
    color: var(--color-900-gray)!important;
}

.btn-primary:focus, .btn-check:active+.btn-primary, .btn-check:checked+.btn-primary {
    background-color: var(--color-200-gray)!important;
    color: var(--color-900-gray)!important;
}

.btn-primary:active, .btn-primary.dropdown-toggle.show {
    background-color: var(--color-100-gray)!important;
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--color-100-gray)!important;
    color: var(--color-300-gray) !important;
    border-color: var(--color-300-gray) !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/**.btn-light**/
.btn-light {
    background: var(--color-white) !important;
    border-color: var(--color-900-gray) !important;
    color: var(--color-900-gray) !important;
}

.btn-light:hover, .btn-light.active, .btn-light:active, .btn-check:active+.btn-light, .btn-check:checked+.btn-light {
    background-color: var(--color-200-gray)!important;
    color: var(--color-900-gray)!important;
}

.btn-light:focus {
    background-color: var(--color-300-gray)!important;
}

.btn-light:active, .btn-light.dropdown-toggle.show {
    background-color: var(--color-900-gray)!important;
    color: var(--color-white)!important;
}

.btn-light.disabled, .btn-light:disabled {
    background-color: var(--color-100-gray)!important;
    color: var(--color-300-gray) !important;
    border-color: var(--color-300-gray) !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* btn-text */
.btn.btn-text {
    color: var(--color-secondary);
    position: relative;
    padding: 0;
    margin-right: var(--margin-4xl);
    padding: 0px 0 1px 0;
    border: 0;
    min-width: auto;  font-size: var(--font-size-x-small);
}

.btn.btn-text i {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    left: 4px;
}

.btn.btn-text:hover, .btn.btn-text:focus, .btn.btn-text:active {
    color: var(--color-secondary-dark);
    text-decoration: none;
}

.btn.btn-text:hover i {
    color: var(--color-secondary-dark);
    text-decoration: none;
    filter: brightness(70%);
}

.btn.btn-text:nth-last-child(1) {
    margin-right: 0;
}

.btn.btn-text:before {
    content: "";
    position: absolute;
    height: 2px;
    left: 100%;
    right: 100%;
    background: transparent;
    bottom: 0;
    transition: ease 0.3s;
}

.btn.btn-text:hover:before, .btn.btn-text:focus:before, .btn.btn-text:active:before {
    background: var(--color-secondary-dark);
    left: 0;
    right: 0;
}


.preTabsBtn i{margin-right: 8px !important;top: 1px;position: relative;left: 0;}
/* Main Header */
.main-header {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    background: var(--color-white);
    box-shadow: var(--elevation-light-md);
    display: flex;
    align-items: center;
}

.main-header .container-fluid {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.main-header.sticky-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
}

/* Prevent body-level scroll — rightContent is the sole vertical scroll container */
div.leftTopLayout {
    overflow: hidden;
}

/* Content wrapper - ensures proper alignment */
.content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    width: 100%;
    min-height: calc(100vh - 96px);
    box-sizing: border-box;
    /* Match main canvas so fixed sidebar + main margins never show a contrasting strip */
    background: var(--app-bg);
}

/* SwaggerLayout content-wrapper - allow margin-top to account for fixed header */
.leftTopLayout .content-wrapper {
    margin-top: 96px !important; /* Account for fixed header height */
    background: var(--app-bg);
}

li.userinfo { margin-right: var(--margin-3xl);}

/* Header line */
.main-header:after,
.popup-panel:before,
.dropdown .dropdown-menu.dropdown-content:before,
.rightStickyMenu .icon-bar-slider:before,
.modal-content:before {content: "";  height:4px;  position: absolute;   top: 0;  left: 0;  right: 0; background: var(--color-gradient-linear); z-index: 1;}


.modal-content{ border-radius: 0;}
.modal-header {border-bottom: solid 1px var(--color-100-gray) !important;}
.modal-footer {border-top: solid 1px var(--color-100-gray);}

.main-header:after{ top:auto; bottom: 0; }

/* Loader Modal Styles */
#loaderModal .modal-content::before{ display: none;}
#loaderModal .modal-content{
    border-radius: var(--radius-md);
    border: 0; 
    font-weight: var(--font-weight-semibold);
    padding: 24px !important;
    text-align: center !important;
}

#loaderModal .loadingGIFDiv {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px !important;
}

#loaderModal .loadingGIFDiv:before {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* dropdown-user-info  */
.dropdown-menu.dropdown-user-info{
    background: var(--color-white);
    padding: var(--padding-4xl) !important;
    border-radius: var(--radius-lg);
    text-align: center;
    width: 300px;
    z-index: 1050 !important;
    display: block !important; /* Force display when rendered */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure dropdown-user-info is visible when shown */
.dropdown-menu.dropdown-user-info.show,
.dropdown-menu.dropdown-user-info:not([style*="display: none"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.dropdown-menu.dropdown-user-info .user-img{
    width: 80px;
    height: auto;
    padding: 16px;
    border: solid 2px var(--color-100-gray);
    border-radius: 100px;
    background: var(--color-50-gray);
    filter: grayscale(1);
}
.dropdown-menu.dropdown-user-info .user-img img{ filter: grayscale(1);}
.dropdown-menu.dropdown-user-info .user-name{
    font-size: var(--font-size-3x-large);
    font-weight: var(--font-weight-semibold);
    color: var(--color-900-gray);
}
/* .dropdown-menu.dropdown-user-info .logout{} */

span.role-name {
    display: block;
    font-size: var(--font-size-x-small);
    margin-bottom: var(--margin-3xl);
}
/* logo */
.navbar-brand {
    padding: var(--padding-2xl) var(--padding-3xl);
}
/* Wide mark (~2:1): larger on desktop; max-width avoids crowding the subtitle */
.navbar-brand img:not(.header-app-logo):not(.zoas-logo),
.navbar-brand .header-logo-img:not(.header-app-logo):not(.zoas-logo) {
    height: 68px !important;
    width: auto !important;
    max-height: 72px !important;
    max-width: min(400px, 52vw) !important;
    object-fit: contain !important;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .navbar-brand img:not(.header-app-logo):not(.zoas-logo),
    .navbar-brand .header-logo-img:not(.header-app-logo):not(.zoas-logo) {
        height: 52px !important;
        max-height: 56px !important;
        max-width: min(300px, 58vw) !important;
    }
    .navbar-brand .logo-container:not(.header-brand-logo-wrap) {
        width: auto !important;
        max-width: min(320px, 62vw) !important;
        height: auto !important;
    }
}
@media (max-width: 375px) {
    .navbar-brand img:not(.header-app-logo):not(.zoas-logo),
    .navbar-brand .header-logo-img:not(.header-app-logo):not(.zoas-logo) {
        height: 44px !important;
        max-height: 48px !important;
        max-width: min(260px, 70vw) !important;
    }
    .navbar-brand .logo-container:not(.header-brand-logo-wrap) {
        max-width: min(270px, 72vw) !important;
    }
}

/* Language selection */
.selectLanguage {
    /* padding: 0 var(--padding-lg) 0px var(--padding-lg); */
    border-radius: var(--radius-sm);
    filter: grayscale(1);
    /* margin-right: var(--margin-xl); */
    padding-top: 0;
    z-index: 2;
}

.selectLanguage .zi-globe{ width: 20px; height: 20px;}

.selectLanguage:hover {
    background: var(--color-50-gray);
}

.selectLanguage .form-group {
    margin-bottom: 0;
    min-height: unset;
    position: relative;
    padding-left: 20px;
    border: solid 1px var(--gray-300);
    border-radius: var(--radius-xs);
    min-height: auto;
}





/* Phase 4: Fix Language Selector Icon - Override absolute positioning */
i.zi.zi-globe {
    font-family: var(--icon-bs);
    position: relative !important; /* Phase 4 - Not absolute */
    left: auto !important; /* Phase 4 */
    font-size: 8px;
    top: auto !important; /* Phase 4 */
    color: var(--gray-500);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Phase 4: Ensure globe icon in language selector button is relative positioned */
.selectLanguage button i.zi.zi-globe {
    position: relative !important; /* Phase 4 */
    left: auto !important; /* Phase 4 */
    top: auto !important; /* Phase 4 */
}

/* Phase 4: Fix Language Selector Icon Alignment - Ensure icon, text, and arrow are perfectly aligned */
.selectLanguage button,
.selectLanguage .d-flex {
    display: flex !important;
    align-items: center !important; /* Vertical center alignment - Phase 4 */
    justify-content: flex-start !important; /* Phase 4 */
    gap: 8px !important;
    vertical-align: middle !important;
    line-height: 1 !important; /* Consistent line height - Phase 4 */
}

.selectLanguage button i.zi.zi-globe,
.selectLanguage button .zi-globe {
    position: relative !important; /* Not absolute - Phase 4 */
    top: auto !important; /* Phase 4 */
    left: auto !important; /* Phase 4 */
    display: inline-flex !important;
    align-items: center !important; /* Vertical center alignment - Phase 4 */
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex-shrink: 0 !important; /* Prevent icon shrinking - Phase 4 */
}

.selectLanguage button span {
    display: inline-flex !important;
    align-items: center !important; /* Vertical center alignment - Phase 4 */
    vertical-align: middle !important;
    line-height: 1.5 !important;
    flex-shrink: 0 !important; /* Prevent shrinking - Phase 4 */
}

.selectLanguage button svg {
    display: inline-flex !important;
    align-items: center !important; /* Vertical center alignment - Phase 4 */
    vertical-align: middle !important;
    line-height: 1 !important; /* Phase 4 */
    flex-shrink: 0 !important; /* Prevent shrinking - Phase 4 */
}

/* Phase 4: Ensure all language selector elements align on same baseline */
.selectLanguage button > * {
    vertical-align: middle !important;
    align-self: center !important;
}

.selectLanguage .form-label {
    font-size: var(--fs-xs)!important;
    font-weight: var(--font-weight-regular);
    margin-bottom: 0;
    display: none;
}

.selectLanguage > .form-group .select2-container {
    width: auto !important;
    padding-right: var(--padding-3xl);
}

.selectLanguage > .form-group .select2-container .select2-selection--single {
    border: 0 !important;
    padding-left: 0;
    padding-top: 0;
    background-color: transparent;
    height: auto !important;
    padding: 0 !important;
}

.selectLanguage > .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    border-radius: var(--radius-xs);
    font-weight: var(--font-weight-medium);
    /* font-size: 12px; */
    line-height: 24px;
    color: var(--color-900-gray);
    padding-right: var(--padding-lg) !important;
}

.selectLanguage > .form-group .select2-selection__arrow {
    right: 0 !important;
    top: -2px !important;
}

/* navlinks */
.header-actions-list {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--margin-lg);
}

.header-user-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Dashboard page - Ensure proper padding and View Summary button visibility - Phase 5: Fix Dashboard Layout */
.rightContent .dashboard-page,
.rightContent:has(.dashboard-page),
.rightContent > div:has(button:has-text("View Summary")),
.rightContent .space-y-6:has(button:has-text("View Summary")) {
    padding-top: 120px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    min-height: calc(100vh - 96px) !important;
}

/* Ensure View Summary button is visible and clickable */
.rightContent button:has-text("View Summary"),
.rightContent .btn:has-text("View Summary"),
button.btn-primary:has-text("View Summary"),
.rightContent button.btn-primary,
.rightContent button[onclick*="openPanel"],
.rightContent button:contains("View Summary") {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 101 !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

/* Ensure View Summary button in dashboard is visible */
.rightContent .d-flex.justify-content-between button.btn-primary,
.rightContent .d-flex.align-items-center button.btn-primary {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 101 !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Dashboard Layout - Prevent header overlap - ONLY for Dashboard pages */
.rightContent:has(.space-y-6):not(:has(.swagger-ui-wrapper)):not(:has(.swagger-ui)),
.rightContent .space-y-6:not(:has(.swagger-ui-wrapper)):not(:has(.swagger-ui)) {
    padding-top: 120px !important;
    min-height: calc(100vh - 96px) !important;
}

/* Ensure dashboard content doesn't merge with header - ONLY for Dashboard */
body.leftTopLayout .rightContent:has(.dashboard-page),
body.leftTopLayout .rightContent:has(.space-y-6:has(button:has-text("View Summary"))):not(:has(.swagger-ui-wrapper)):not(:has(.swagger-ui)),
body.topLeftLayout .rightContent:has(.dashboard-page),
body.topLeftLayout .rightContent:has(.space-y-6:has(button:has-text("View Summary"))):not(:has(.swagger-ui-wrapper)):not(:has(.swagger-ui)) {
    padding-top: 120px !important;
    margin-top: 0 !important;
}

/* Swagger UI pages - NO padding-top */
body.leftTopLayout .rightContent:has(.swagger-ui-wrapper),
body.leftTopLayout .rightContent:has(.swagger-ui),
body.topLeftLayout .rightContent:has(.swagger-ui-wrapper),
body.topLeftLayout .rightContent:has(.swagger-ui) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* NOTE: Swagger UI CSS rules below are no longer needed since we use iframe for complete CSS isolation */
/* These rules are kept for reference but won't affect iframe content */

/* Hide Filter by Tag Input - Remove from Swagger UI (DEPRECATED: Using iframe now) */
/*
.swagger-ui .filter-container,
.swagger-ui .filter-container input,
.swagger-ui .filter-container label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
*/

/* API Endpoints Layout - Match Reference Theme - ONLY when Swagger UI is present */
.leftTopLayout .rightContent:has(.swagger-ui-wrapper),
.leftTopLayout .rightContent:has(.swagger-ui),
.leftTopLayout .rightContent:has(#swagger-ui-container) {
    background: var(--color-100-gray) !important;
    padding-left: 20px !important;
    padding-right: 32px !important;
    padding-bottom: 32px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Dashboard Layout - Restore proper padding when Dashboard is present */
.leftTopLayout .rightContent:has(.dashboard-page),
.leftTopLayout .rightContent:has(.space-y-6:has(button:has-text("View Summary"))) {
    padding-top: 120px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background: var(--color-100-gray) !important;
}

/* Fix: Right content margin when sidebar is collapsed - Match reference URL */
.leftTopLayout .content-wrapper.collapsed .rightContent {
    margin-left: 60px; /* flush with fixed collapsed sidebar; inner gap via padding on .rightContent */
    width: calc(100% - 60px);
    max-width: calc(100vw - 60px);
}

/* Mobile: Right content full width regardless of collapse state */
@media (max-width: 600px) {
    .leftTopLayout .content-wrapper.collapsed .rightContent,
    .leftTopLayout .content-wrapper .rightContent {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
    }
}

/* Swagger UI Wrapper - Reference Theme */
.swagger-ui-wrapper {
    background: var(--color-100-gray) !important;
    padding: 20px !important;
    margin: 0 !important;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Dark Swagger Header Styles */
.dark-swagger-header {
    background: #2b2b2b !important;
    border-bottom: 1px solid #3e3e42 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure DarkSwaggerHeader positioning - it's inside rightContent */
.rightContent:has(iframe[title*="Swagger UI"]) > div:has(.dark-swagger-header) {
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
}

/* Ensure proper spacing for API endpoints page with DarkSwaggerHeader */
.rightContent:has(iframe[title*="Swagger UI"]) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 96px) !important;
    overflow: hidden !important;
}

/* OVERRIDE: When Capability View page wraps the Swagger iframe, allow scrolling.
   The capability view has content above the iframe (breadcrumb, card, tabs, toolbar)
   that needs vertical scrolling to be accessible.
   NOTE: height stays at calc(100vh - 96px) from base .rightContent rule;
   the content scrolls within rightContent (the sole scroll container). */
.rightContent:has(.capability-view-page) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* OVERRIDE: Project View page — same pattern as Capability View.
   The project view also has content above the iframe (breadcrumb, project card,
   API header, tabs) that pushes the Swagger container below the viewport on
   smaller screens (≤768px). Without this, overflow:hidden clips the container. */
.rightContent:has(.project-view-page) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Schema View Split Layout — scoped under .schema-view-container so it does not
   override API Wizard's .schema-editor-panel (same class name; global rule caused dark IDE bg + unreadable labels). */
.schema-view-container {
    display: flex;
    height: calc(100vh - 96px);
    overflow: hidden;
}

.schema-view-container .schema-editor-panel {
    width: 50%;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
}

.schema-view-container .schema-preview-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    background: var(--color-100-gray);
    overflow: auto;
}

/* Resizable divider for schema view */
.schema-view-divider {
    width: 4px;
    background: #e0e0e0;
    cursor: col-resize;
    flex-shrink: 0;
}

.schema-view-divider:hover {
    background: #49cc90;
}

.navlink {
    padding: var(--padding-xl);
}

.navlink a {
    padding: var(--padding-sm) var(--padding-lg);
    /* font-size: 12px; */
    color: var(--color-900-gray);
    text-decoration: none;
    border-radius: var(--radius-sm);
    line-height: 24px;
    height: 32px !important;
    display: inline-block;
    font-weight: var(--font-weight-medium);
}

.navlink a i {
    width: 20px;
    height: 20px;
    vertical-align: sub;
    filter: grayscale(1);
}

.navlink a:hover {
    background: var(--color-50-gray);
}

.navlink a:focus, .navlink a.active {
    background: var(--color-secondary-lightest);
}

/* user info */
.user-info {
    position: relative;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-900-gray);
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.user-info .dropdown-arrow {
    display: inline-block;
    flex-shrink: 0;
}

/* Remove any CSS-generated arrows for user-info - we use SVG instead */
.user-info:after,
.user-info:before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

.user-info:hover {
    background-color: var(--color-100-gray);
}

.user-info:focus {
    background-color: var(--color-secondary-lightest);
}

/* select2-selection__arrow */
.select2-selection__arrow b {
    display: none;
}

.select2-selection__arrow {
    background-image: url('/icons/icons/zinnia-icons/images/chevron-down.svg');
    top: 0px;
    height: 20px !important;
    width: 20px !important;
    display: inline-block;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    background-size: cover;
    right: 12px !important;
    top: 7px !important;
}

.select2-container--open .select2-selection__arrow {
    background-image: url('/icons/icons/zinnia-icons/images/chevron-up.svg'); }

/* Inbox left navigation - Responsive Sidebar ****************************************************/
.leftTopLayout .leftNav {
    background: #FFFFFF; /* White background - no grey */
    /* Fluid width: scales between 200px and 280px based on viewport */
    width: clamp(200px, 20vw, 280px);
    min-width: 200px;
    max-width: 280px;
    position: fixed;
    top: 96px; /* Match body.leftTopLayout padding-top - exactly at header bottom */
    bottom: 0;
    left: 0;
    padding: 0 8px 4px 8px;
    z-index: 100; /* Increased to ensure sidebar stays above content */
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 96px);
    box-sizing: border-box;
    border-right: none; /* Remove right border - no grey line */
    /* Ensure content is not cut off */
    max-height: calc(100vh - 96px);
    min-height: calc(100vh - 96px);
    /* Ensure scrollbar is visible and styled */
    scrollbar-width: thin;
    scrollbar-color: var(--color-300-gray) var(--color-100-gray);
    /* Smooth transition for width changes */
    transition: width 0.3s ease, transform 0.3s ease;
}

/* Webkit scrollbar styling for better visibility */
.leftTopLayout .leftNav::-webkit-scrollbar {
    width: 8px;
    display: block !important; /* Force scrollbar visibility */
}

.leftTopLayout .leftNav::-webkit-scrollbar-track {
    background: var(--color-100-gray);
    border-radius: 4px;
}

.leftTopLayout .leftNav::-webkit-scrollbar-thumb {
    background: var(--color-300-gray);
    border-radius: 4px;
}

.leftTopLayout .leftNav::-webkit-scrollbar-thumb:hover {
    background: var(--color-400-gray);
}

/* Mobile: Hide sidebar by default, show on toggle */
@media (max-width: 600px) {
    .leftTopLayout .leftNav {
        transform: translateX(-100%);
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        width: 280px; /* Fixed width when mobile overlay */
    }
    
    .leftTopLayout .leftNav.mobile-open {
        transform: translateX(0);
    }
    
    /* Main content takes full width on mobile */
    .leftTopLayout .rightContent,
    .leftTopLayout main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Fix: Sidebar collapse behavior - Match reference URL */
.content-wrapper.collapsed .leftNav {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    overflow-x: visible; /* Allow tooltips to overflow horizontally */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-300-gray) var(--color-100-gray);
    /* Ensure tooltips can overflow */
    z-index: 100;
}

/* Webkit scrollbar styling for collapsed sidebar */
.content-wrapper.collapsed .leftNav::-webkit-scrollbar {
    width: 6px;
    display: block !important; /* Force scrollbar to be visible */
}

.content-wrapper.collapsed .leftNav::-webkit-scrollbar-track {
    background: var(--color-100-gray);
    border-radius: 3px;
    display: block !important; /* Ensure track is visible */
}

.content-wrapper.collapsed .leftNav::-webkit-scrollbar-thumb {
    background: var(--color-300-gray);
    border-radius: 3px;
    display: block !important; /* Ensure thumb is visible */
}

.content-wrapper.collapsed .leftNav::-webkit-scrollbar-thumb:hover {
    background: var(--color-400-gray);
}

/* Ensure collapsed sidebar doesn't expand */
.content-wrapper.collapsed .leftNav .nav-item .nav-link {
    overflow: visible !important; /* Allow tooltip to overflow */
}

/* Hide tree toggle arrows when sidebar is collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .tree-toggle {
    display: none !important; /* Hide chevron/arrow icons when collapsed */
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide tree toggle SVG arrows when sidebar is collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .tree-toggle svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.leftTopLayout .leftNav .nav-item .nav-link {
    color: var(--color-600-gray);
    font-size: var(--font-size-x-small);
    line-height: 22px;
    position: relative; /* For tooltip positioning */
    padding: 4px 0 4px 37px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
    border: solid 1px transparent;
    display: flex;
    align-items: center; /* Align icon and text vertically */
    gap: 8px; /* Space between icon and text */
    min-height: 32px; /* Ensure consistent height for alignment */
    overflow: visible !important; /* Allow full text to be visible */
    white-space: nowrap !important; /* Prevent text wrapping - show full names */
}

/* Tooltip for collapsed sidebar items - Black background */
.content-wrapper.collapsed .leftNav .nav-item {
    position: relative; /* Ensure positioning context for tooltips */
    overflow: visible !important; /* Allow tooltip to overflow */
}

.content-wrapper.collapsed .leftNav .nav-item .nav-link {
    position: relative; /* Ensure positioning context */
    overflow: visible !important; /* Allow tooltip to overflow */
}

.content-wrapper.collapsed .leftNav .nav-item .nav-link::after {
    content: attr(data-tooltip);
    position: fixed; /* Use fixed positioning to ensure visibility across viewport */
    left: 70px !important; /* Position to the right of collapsed sidebar (60px + 10px gap) */
    /* Top will be calculated dynamically via JavaScript - use getBoundingClientRect */
    top: 0px; /* Will be set by JavaScript */
    transform: translateY(-50%);
    margin-left: 0;
    padding: 8px 12px;
    background-color: #212121 !important; /* Black background */
    color: white !important;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10000 !important; /* High z-index to ensure visibility */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    max-width: 350px; /* Increased to accommodate longer tooltip text like RUAAP description */
    text-align: center;
    /* Ensure tooltip doesn't get cut off */
    overflow: visible;
    word-wrap: break-word;
    display: block;
}

.content-wrapper.collapsed .leftNav .nav-item .nav-link:hover::after {
    opacity: 1 !important;
}

/* Tooltip arrow */
.content-wrapper.collapsed .leftNav .nav-item .nav-link::before {
    content: '';
    position: absolute; /* Use absolute positioning relative to nav-link */
    left: calc(100% + 4px); /* Position at edge of collapsed sidebar */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    border: 6px solid transparent;
    border-right-color: #212121 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10001 !important; /* Higher than tooltip */
}

.content-wrapper.collapsed .leftNav .nav-item .nav-link:hover::before {
    opacity: 1 !important;
}

/* Hide nav-label text when sidebar is collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .nav-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

/* Hide all text spans when collapsed - keep only icons/images visible */
.content-wrapper.collapsed .leftNav .nav-item .nav-link > span {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Show only images/icons when collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link img {
    display: block !important;
    visibility: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide sidebar-icon emoji/text when collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .sidebar-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Hide emoji icons in tree nodes when collapsed - more specific rule */
.content-wrapper.collapsed .leftNav .nav-item .nav-link span.sidebar-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide section title text when collapsed, show only icon */
.content-wrapper.collapsed .leftNav .sidebar-section-title .sidebar-section-title-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Center section title icon when collapsed */
.content-wrapper.collapsed .leftNav .sidebar-section-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Show section title icon when collapsed */
.content-wrapper.collapsed .leftNav .sidebar-section-title img {
    display: block !important;
    visibility: visible !important;
    margin: 0 auto !important;
}

/* Ensure icons are centered when collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

/* Ensure icon and text are properly aligned in tree structure */
.leftTopLayout .leftNav .nav-item .nav-link > span:first-of-type {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Fix Sidebar Text Visibility - Ensure full text is visible (no truncation) */
/* Note: Keep overflow-y: scroll for scrollbar, only allow horizontal overflow for text visibility */
.leftTopLayout .leftNav {
    overflow-y: scroll !important; /* Keep vertical scrollbar */
    overflow-x: visible !important; /* Allow horizontal overflow for full text visibility */
}

.leftTopLayout .leftNav .nav-item {
    overflow: visible !important; /* Allow nav items to show full text */
}

.leftTopLayout .leftNav .nav-item .nav-link {
    overflow: visible !important; /* Ensure parent allows overflow */
    white-space: nowrap !important; /* Prevent wrapping */
    max-width: none !important; /* Remove max-width constraints */
    min-width: fit-content !important; /* Allow content to determine width */
}

.leftTopLayout .leftNav .nav-item .nav-link .nav-label {
    display: inline-block !important;
    vertical-align: middle;
    line-height: 20px;
    flex: 1;
    margin-left: 0;
    overflow: visible !important; /* Show full text */
    white-space: nowrap !important; /* Prevent wrapping - show full names like Transaction103Import, CaseImportTransaction2, etc. */
    text-overflow: clip !important; /* Don't truncate with ellipsis */
    max-width: none !important; /* Remove max-width constraints */
    min-width: fit-content !important; /* Allow text to determine width */
    width: auto !important; /* Auto width based on content */
}

.leftTopLayout .leftNav .nav-item .nav-link:hover {
    background: var(--color-white);
    /* color: var(--color-white) !important; */
    border-radius: 4px !important; color: var(--color-900-gray);
}

.leftTopLayout .leftNav .nav-item .nav-link.active {
    background: var(--color-white);
    box-shadow: var(--elevation-dark-xs);
    color: var(--color-900-gray);
    border-color: var(--color-primary);
}

.leftTopLayout .leftNav .nav-item .nav-link:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    filter: grayscale(1) brightness(.95);
    left: 8px;
    background-position: center;
    top:5px;
}
.leftTopLayout .leftNav .nav-item .nav-link:hover:before {  filter: grayscale(1) brightness(.50);}

/* icon style for active tab */
.leftTopLayout .leftNav .nav-item .nav-link.active:before {
    /* background-color: var(--color-white); */
    filter: sepia(1) saturate(21) hue-rotate(12deg) brightness(1.1) contrast(1);
}

/* Icons for each tab */
.leftTopLayout .leftNav .nav-item.inbox .nav-link:before,
.leftTopLayout .leftNav .nav-item.inbox_fr .nav-link:before {                   background-image: url('/icons/icons/zinnia-icons/images/inbox-in.svg');}

.leftTopLayout .leftNav .nav-item.caselog .nav-link:before,     
.leftTopLayout .leftNav .nav-item.caselog_fr .nav-link:before {                 background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');}

.leftTopLayout .leftNav .nav-item.reports .nav-link:before,     
.leftTopLayout .leftNav .nav-item.reports_fr .nav-link:before {                 background-image: url('/icons/icons/zinnia-icons/images/document-report.svg');}

.leftTopLayout .leftNav .nav-item.reassignment .nav-link:before,        
.leftTopLayout .leftNav .nav-item.reassignment_fr .nav-link:before {            background-image: url('/icons/icons/zinnia-icons/images/save-as-2.svg');}       

.leftTopLayout .leftNav .nav-item.pendingwork .nav-link:before,     
.leftTopLayout .leftNav .nav-item.pendingwork_fr .nav-link:before {             background-image: url('/icons/icons/zinnia-icons/images/clock.svg');}

.leftTopLayout .leftNav .nav-item.unmatchedresponses .nav-link:before,
.leftTopLayout .leftNav .nav-item.unmatchedresponses_fr .nav-link:before {      background-image: url('/icons/icons/zinnia-icons/images/collection.svg');}

.leftTopLayout .leftNav .nav-item.adhocreports .nav-link:before,
.leftTopLayout .leftNav .nav-item.adhocreports_fr .nav-link:before {            background-image: url('/icons/icons/zinnia-icons/images/view-grid-add.svg');}

.leftTopLayout .leftNav .nav-item.workloadrebalance .nav-link:before,
.leftTopLayout .leftNav .nav-item.workloadrebalance_fr .nav-link:before {       background-image: url('/icons/icons/zinnia-icons/images/scale.svg');}

/* Health piqture */
.leftTopLayout .leftNav .nav-item.applicant .nav-link:before,
.leftTopLayout .leftNav .nav-item.applicant_fr .nav-link:before {               background-image: url('/icons/icons/zinnia-icons/images/circle-user.svg');}

.leftTopLayout .leftNav .nav-item.scriptCheck  .nav-link:before,
.leftTopLayout .leftNav .nav-item.scriptCheck_fr  .nav-link:before {            background-image: url('/icons/icons/zinnia-icons/images/quick-quiz.svg');}

.leftTopLayout .leftNav .nav-item.labPicture  .nav-link:before,
.leftTopLayout .leftNav .nav-item.labPicture_fr  .nav-link:before {             background-image: url('/icons/icons/zinnia-icons/images/beaker.svg');}

.leftTopLayout .leftNav .nav-item.medClaims   .nav-link:before,
.leftTopLayout .leftNav .nav-item.medClaims_fr   .nav-link:before{              background-image: url('/icons/icons/zinnia-icons/images/cash.svg');}

.leftTopLayout .leftNav .nav-item.claimDetails   .nav-link:before,
.leftTopLayout .leftNav .nav-item.claimDetails_fr   .nav-link:before  {         background-image: url('/icons/icons/zinnia-icons/images/money-bag.svg');}
 
.leftTopLayout .leftNav .nav-item.applicant    .nav-link:before,
.leftTopLayout .leftNav .nav-item.applicant_fr   .nav-link:before  {            background-image: url('/icons/icons/zinnia-icons/images/user.svg');}
 
.leftTopLayout .leftNav .nav-item.medClaims    .nav-link:before,
.leftTopLayout .leftNav .nav-item.medClaims_fr   .nav-link:before  {            background-image: url('/icons/icons/zinnia-icons/images/receipt-refund.svg');}
 


/* removed from the left and moved to top*/
.leftTopLayout .leftNav .nav-item.manuals .nav-link:before {
    background-image: url('/icons/icons/zinnia-icons/images/quick-read2.svg');
}

.leftTopLayout .leftNav .nav-item.outofoffice .nav-link:before {
    background-image: url('/icons/icons/zinnia-icons/images/date.svg');
}

/* .content-wrapper .collapsed */
.content-wrapper.collapsed .leftNav .nav-pills .nav-link {
    width: 32px;
    height: 32px;
}


/*  */
.d-flex.summmary-layout-flex { background: var(--color-white);}
.d-flex.summmary-layout-flex .rightContent .card.card-transparent {padding-top: 60px !important;}
.d-flex.summmary-layout-flex .rightContent .card.card-transparent {border-radius: var(--radius-sm);}

.summmary-layout-flex .leftNav {min-width: 260px;}
.summaryLayout:has(.summmary-layout-flex) .current-page-title{margin-left: 267px;margin-top: 0;background: no-repeat;/* border: 0; */box-shadow: none;margin-right: 8px;}
.current-page-title .primary-select{margin-top: -3px;}

/* Hide ALL text labels/spans when sidebar is collapsed - consolidated with rules below */
/* This rule is now redundant - using the more specific rules below */

/* CRITICAL FIX: Show icons when collapsed - center them in the nav link */
.content-wrapper.collapsed .leftNav .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-height: 32px !important;
}

/* Override: Hide ALL spans including first-of-type when collapsed */
.content-wrapper.collapsed .leftNav .nav-item .nav-link > span:first-of-type {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Show images/icons directly in nav-link when collapsed (not in spans) */
.content-wrapper.collapsed .leftNav .nav-item .nav-link img {
    display: block !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
}

/* Hide main label when collapsed, show tooltip label */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .nav-label {
    display: none !important;
}

.content-wrapper:not(.collapsed) .leftNav .nav-item .nav-link .link-text {
    display: none !important;
}

/* CRITICAL FIX: Disable default ::before icons for new sidebar structure */
/* This prevents duplicate icons - the new SVG icons from Sidebar.tsx should be the only ones visible */
.leftTopLayout .leftNav .nav-item .nav-link:before {
    display: none !important;
    content: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure only the SVG icon from dangerouslySetInnerHTML shows when expanded */
.leftTopLayout .leftNav .nav-item .nav-link > span:first-of-type img {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Hide any emoji or text icons that might be added */
.leftTopLayout .leftNav .nav-item .nav-link > span:first-of-type:not(:has(img)) {
    display: none !important;
}

/* Fix Sidebar Tooltip - Black Hover Tooltip - Show OUTSIDE sidebar when collapsed */
/* Note: overflow-y must remain scroll for scrollbar visibility, only overflow-x can be visible for tooltips */
.content-wrapper.collapsed .leftNav {
    overflow-y: scroll !important; /* Keep scrollbar visible */
    overflow-x: visible !important; /* Allow tooltip to overflow outside sidebar horizontally */
}

.content-wrapper.collapsed .leftNav .nav-item {
    overflow: visible !important; /* Allow tooltip to overflow */
    position: relative !important;
}

.content-wrapper.collapsed .leftNav .nav-item .nav-link {
    position: relative !important; /* Ensure parent is positioned for absolute tooltip */
    overflow: visible !important; /* Allow tooltip to overflow outside */
}

.content-wrapper.collapsed .leftNav .nav-item .nav-link .link-text {
    position: fixed !important; /* Use fixed positioning to appear outside sidebar */
    left: auto !important;
    right: auto !important;
    white-space: nowrap !important;
    z-index: 99999 !important; /* Very high z-index to ensure visibility above all elements */
    opacity: 0 !important;
    visibility: hidden !important; /* Hide when not hovered */
    pointer-events: none !important; /* Disable pointer events when hidden */
    transition: opacity 0s ease 0s, visibility 0s ease 0s !important; /* Instant appearance */
    transition-delay: 0s, 0s !important; /* Zero delay */
    padding: 8px 12px !important;
    border-radius: 4px !important;
    color: rgb(255, 255, 255) !important; /* White text */
    display: block !important; /* Not flex */
    background-color: rgb(43, 43, 43) !important; /* Black/dark background */
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    min-width: auto !important;
    text-align: left !important;
    will-change: opacity, visibility !important; /* Optimize for instant appearance */
    margin-left: 0 !important;
    top: auto !important;
    bottom: auto !important;
}

/* Show tooltip on hover when collapsed - Black tooltip OUTSIDE sidebar with instant visibility */
.content-wrapper.collapsed .leftNav .nav-item .nav-link:hover .link-text {
    opacity: 1 !important;
    visibility: visible !important; /* Make visible on hover */
    display: block !important; /* Ensure it's displayed */
    position: fixed !important; /* Fixed to viewport to appear outside sidebar */
    left: 68px !important; /* 60px collapsed sidebar + 8px gap - Position OUTSIDE sidebar */
    right: auto !important;
    background-color: rgb(43, 43, 43) !important; /* Black/dark background */
    color: rgb(255, 255, 255) !important; /* White text */
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transform: translateY(-50%) !important; /* Center vertically */
    z-index: 99999 !important; /* Very high z-index */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: auto !important; /* Enable pointer events when visible */
    transition: opacity 0s ease 0s, visibility 0s ease 0s !important; /* Instant */
    transition-delay: 0s, 0s !important; /* Zero delay */
    min-width: auto !important;
    text-align: left !important;
    margin-left: 0 !important;
    will-change: opacity, visibility !important; /* Optimize for instant appearance */
}

/* Hide nav-label when collapsed (show tooltip instead) */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .nav-label {
    display: none !important; /* Hide text label when collapsed */
}

/* Show nav-label when expanded */
.content-wrapper:not(.collapsed) .leftNav .nav-item .nav-link .nav-label {
    display: inline-block !important; /* Show text label when expanded */
}

/* Hide link-text tooltip when expanded */
.content-wrapper:not(.collapsed) .leftNav .nav-item .nav-link .link-text {
    display: none !important; /* Hide tooltip when expanded */
}

/* Keep tooltip visible when hovering over the tooltip itself */
.content-wrapper.collapsed .leftNav .nav-item .nav-link .link-text:hover {
    opacity: 1 !important;
    visibility: visible !important; /* Ensure visibility */
    pointer-events: auto !important;
    position: fixed !important; /* Maintain fixed position */
    left: 68px !important; /* Maintain position outside sidebar */
    right: auto !important;
    transform: translateY(-50%) !important; /* Center vertically */
    z-index: 99999 !important; /* Very high z-index */
    display: block !important;
}

/* Phase 1: Tooltip arrow pointing to sidebar icon - Match reference style */
.content-wrapper.collapsed .leftNav .nav-item .nav-link:hover .link-text::before {
    content: "";
    position: absolute;
    left: -6px !important;
    background-color: rgb(43, 43, 43) !important; /* Match tooltip background - Phase 1 */
    width: 12px !important;
    height: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
    border-radius: 2px 0 0 0 !important;
}

/* Hide Navigation title when collapsed */
.content-wrapper.collapsed .leftNav .toggleMenuBtn-container h2 {
    display: none !important;
}

/* Fix: Remove Orange Square from Toggle Button Container - Ensure no orange border */
.toggleMenuBtn-container {
    border: none !important; /* Remove any border */
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

/* Ensure toggle button container only has bottom border (gray, not orange) */
.toggleMenuBtn-container.border-bottom {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-200-gray) !important; /* Only gray bottom border */
    border-color: var(--color-200-gray) !important; /* Ensure gray, not orange */
}

/* Remove any orange color from toggle button container in all states */
.toggleMenuBtn-container:hover,
.toggleMenuBtn-container:active,
.toggleMenuBtn-container:focus {
    border-color: var(--color-200-gray) !important; /* Gray, not orange */
    box-shadow: none !important;
}

/* Center toggle button when collapsed - Ensure no orange border */
.content-wrapper.collapsed .leftNav .toggleMenuBtn-container {
    justify-content: center !important;
    padding: 12px !important;
    border: none !important; /* Remove all borders */
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

/* Override any Bootstrap or other CSS that might add orange border */
.toggleMenuBtn-container.border-bottom {
    border-bottom-color: var(--color-200-gray) !important; /* Gray only, not orange */
    border-bottom-width: 1px !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.toggleMenuBtn-container * {
    border-color: transparent !important; /* No orange borders on children */
}

.toggleMenuBtn-container button,
.toggleMenuBtn-container .toggleMenuBtn {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

/* Adjust nav link padding when collapsed - center icons */
.content-wrapper.collapsed .leftNav .nav-item .nav-link {
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    position: relative !important;
    min-height: 40px !important;
}

/* Fix toggle button alignment when collapsed */
.content-wrapper.collapsed .leftNav .toggleMenuBtn-container {
    padding: 12px !important;
    justify-content: center !important;
    align-items: center !important;
}

.content-wrapper.collapsed .leftNav .toggleMenuBtn {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* API Builder page - ensure tabs are visible */
.rightContent .space-y-6 {
    padding-top: 24px !important;
}

.rightContent .border-b.border-gray-200 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: sticky;
    top: 96px;
    background: white;
    z-index: 10;
    padding-bottom: 8px;
}

/* API Builder page - Match Dashboard layout and styling */
.rightContent .api-builder-page {
    padding-top: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}

/* API Builder cards - Match Dashboard card styling */
.api-builder-page .card.card-primary {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--elevation-light-sm) !important;
    margin-bottom: 24px !important;
}

.api-builder-page .card-body {
    padding: 24px !important;
}

.api-builder-page .card-title {
    font-family: var(--heading-font) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-900-gray) !important;
    font-size: var(--font-size-2x-large) !important;
}

/* API Builder buttons - Match Dashboard button styling */
.api-builder-page .btn-primary {
    border-radius: var(--radius-md) !important;
    padding: var(--padding-md) var(--padding-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-sm) !important;
}

.api-builder-page .btn-outline-secondary {
    border-radius: var(--radius-md) !important;
    padding: var(--padding-md) var(--padding-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-sm) !important;
    border: 1px solid var(--color-200-gray) !important;
}

/* API Builder form inputs - Match Dashboard input styling */
.api-builder-page .form-control,
.api-builder-page .form-select {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-200-gray) !important;
    padding: var(--padding-md) !important;
    font-size: var(--font-size-sm) !important;
}

.api-builder-page .form-label {
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-900-gray) !important;
    margin-bottom: 8px !important;
}

/* API Builder tabs - Match Dashboard tab styling */
.api-builder-page nav button {
    font-family: var(--body-font) !important;
    font-size: var(--font-size-medium) !important;
}

/* API Builder code generation cards - Enhanced styling */
.api-builder-page .codegen-card,
.api-builder-page button[class*="btn-outline-secondary"] {
    transition: all 0.2s ease !important;
}

.api-builder-page .codegen-card:hover,
.api-builder-page button[class*="btn-outline-secondary"]:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: var(--elevation-dark-xs) !important;
}

/* API Builder wizard - Match Dashboard card styling */
.api-builder-page .api-wizard-container {
    background-color: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--elevation-light-sm) !important;
    border: 1px solid var(--color-200-gray) !important;
}

/* API Wizard layout is class-driven in frontend/styles/api-builder.css.
   Keep shared skinning, but avoid style-attribute overrides that force fixed
   height/position and cause responsive collapse. */
.api-builder-page:has(.api-wizard-container) {
    background-color: #FFFFFF !important;
    font-family: 'Lato', Arial, sans-serif !important;
}

.api-builder-page:has(.api-wizard-container),
.api-builder-page:has(.api-wizard-container) > div,
.api-builder-page:has(.api-wizard-container) .api-builder-content,
.api-builder-page:has(.api-wizard-container) .api-builder-tab-content,
.api-builder-page:has(.api-wizard-container) .api-builder-wizard-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Ensure footer buttons use TPP button styles */
.api-builder-page .btn.btn-primary {
    background: var(--color-900-gray) !important;
    border-color: var(--color-900-gray) !important;
    color: var(--color-white) !important;
}

.api-builder-page .btn.btn-primary:hover,
.api-builder-page .btn.btn-primary.active,
.api-builder-page .btn.btn-primary:active {
    background: var(--color-white) !important;
    border-color: var(--color-900-gray) !important;
    color: var(--color-900-gray) !important;
}

.api-builder-page .btn.btn-light {
    background: var(--color-white) !important;
    border-color: var(--color-900-gray) !important;
    color: var(--color-900-gray) !important;
}

.api-builder-page .btn.btn-light:hover,
.api-builder-page .btn.btn-light.active,
.api-builder-page .btn.btn-light:active {
    background-color: var(--color-200-gray) !important;
    color: var(--color-900-gray) !important;
}

/* Responsive layout for wizard */
@media (max-width: 1200px) {
    .api-builder-page [style*="flexDirection: row"] {
        flex-wrap: wrap !important;
    }
    
    .api-builder-page [style*="width: 280px"][style*="minWidth: 280px"] {
        min-width: 200px !important;
    }
    
    .api-builder-page [style*="width: 300px"][style*="minWidth: 300px"] {
        min-width: 200px !important;
    }
}

/* Ensure content area has space for footer */
.api-builder-page [style*="flex: 1"][style*="overflowY: auto"][style*="padding"] {
    padding-bottom: 80px !important; /* Reserve space for footer */
}

/* TPP Theme Button Styles */
.api-builder-page button {
    font-family: 'Lato', Arial, sans-serif !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.api-builder-page button:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

.api-builder-page button:active {
    transform: translateY(0) !important;
}

/* Wizard sidebar - Clean white background */
.api-builder-page [style*="280px"][style*="backgroundColor"] {
    background-color: var(--color-white) !important;
    border-right: 1px solid var(--color-200-gray) !important;
}

/* Wizard content area - Clean white card */
.api-builder-page [style*="flex: 1"][style*="backgroundColor"][style*="white"] {
    background-color: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Wizard form inputs - Clean styling */
.api-builder-page input[type="text"],
.api-builder-page input[type="text"]:focus,
.api-builder-page textarea,
.api-builder-page textarea:focus,
.api-builder-page select,
.api-builder-page select:focus {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--padding-md) !important;
}

.api-builder-page input[type="text"]:focus,
.api-builder-page textarea:focus,
.api-builder-page select:focus {
    border-color: var(--color-accent-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1) !important;
    outline: none !important;
}


/* Fix: Remove Orange Square from Toggle Button - Collapse or expand button for the inbox layout left navigation  */
.toggleMenuBtn {
    background: transparent !important;
    border: none !important; /* Remove all borders */
    border-color: transparent !important;
    border-width: 0 !important;
    width: 32px !important;
    height: 32px !important;
    text-align: center !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
}

/* Ensure no orange border in any state */
.toggleMenuBtn:hover,
.toggleMenuBtn:active,
.toggleMenuBtn:focus,
.toggleMenuBtn:visited {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove orange from any parent container */
.toggleMenuBtn-container .toggleMenuBtn,
.toggleMenuBtn-container button.toggleMenuBtn {
    border: none !important;
    border-color: transparent !important;
}

/* Phase 7: Orange Hover Removal - Ensure toggle button hover uses dark gray, not orange */
.toggleMenuBtn:hover {
    background: var(--color-100-gray) !important;
    color: var(--color-900-gray) !important; /* Ensure text color is dark, not orange - Phase 7 */
    border-color: transparent !important; /* Remove any border color - Phase 7 */
}

.toggleMenuBtn:hover span {
    color: var(--color-900-gray) !important; /* Ensure button text is dark, not orange - Phase 7 */
}

/* Phase 7: Remove any orange color from toggle button active/focus states */
.toggleMenuBtn:active,
.toggleMenuBtn:focus {
    color: var(--color-900-gray) !important; /* Dark gray, not orange - Phase 7 */
    background: var(--color-100-gray) !important;
}

.toggleMenuBtn:active span,
.toggleMenuBtn:focus span {
    color: var(--color-900-gray) !important; /* Dark gray, not orange - Phase 7 */
}

.toggleMenuBtn:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

.toggleMenuBtn span {
    color: var(--color-700-gray) !important;
    font-weight: bold !important;
    line-height: 1 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

.toggleMenuBtn i {
    width: 16px;
    height: 16px;
    filter: grayscale(1);
}

.collapsed .toggleMenuBtn {
    left: auto !important;
    right: auto !important;
    border-radius: 4px !important;
    margin: 0 auto !important;
    position: relative !important;
}

/* Phase 7: Orange Hover Removal - Collapsed state */
.collapsed .toggleMenuBtn:hover { 
    background: var(--color-100-gray) !important;
    color: var(--color-900-gray) !important; /* Ensure text color is dark, not orange - Phase 7 */
    border-color: transparent !important; /* Remove any border color - Phase 7 */
}

.collapsed .toggleMenuBtn:hover span {
    color: var(--color-900-gray) !important; /* Ensure button text is dark, not orange - Phase 7 */
}

/* Phase 7: Remove any orange color from collapsed toggle button active/focus states */
.collapsed .toggleMenuBtn:active,
.collapsed .toggleMenuBtn:focus {
    color: var(--color-900-gray) !important; /* Dark gray, not orange - Phase 7 */
    background: var(--color-100-gray) !important;
}

.collapsed .toggleMenuBtn:active span,
.collapsed .toggleMenuBtn:focus span {
    color: var(--color-900-gray) !important; /* Dark gray, not orange - Phase 7 */
}

.collapsed .toggleMenuBtn i {
    transform: rotate(180deg);
}

/* Right Content Area - Base styling (Responsive) */
.rightContent {
    /* Margin to account for fixed sidebar - NO gap */
    margin-left: clamp(200px, 20vw, 280px);
    min-height: calc(100vh - 96px);
    height: calc(100vh - 96px);
    min-width: 0;
    margin-right: 0;
    margin-top: 0; /* No margin-top - content-wrapper already positioned */
    padding: clamp(16px, 2vw, 24px);
    /* Width adjusts based on sidebar - NO gap */
    width: calc(100% - clamp(200px, 20vw, 280px));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    max-width: calc(100vw - clamp(200px, 20vw, 280px));
    background: var(--app-bg);
    transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Mobile view - full width */
.rightContent.mobile-view,
@media (max-width: 600px) {
    .rightContent {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        padding: 16px;
    }
}

/* Right Content Area - Swagger UI specific (ONLY when Swagger UI is present) */
.rightContent:has(.swagger-ui-wrapper),
.rightContent:has(.swagger-ui),
.rightContent:has(#swagger-ui-container),
.rightContent:has(iframe[title*="Swagger UI"]) {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    background: var(--color-100-gray) !important;
    overflow: hidden !important; /* Prevent double scrollbars */
    height: calc(100vh - 96px) !important; /* Full height minus header */
    display: flex !important;
    flex-direction: column !important;
}

/* OVERRIDE: Capability View page — allow full scroll since it has content above iframe.
   Scrolls within rightContent; no body-level scroll needed. */
.rightContent:has(.capability-view-page):has(iframe[title*="Swagger UI"]) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 24px !important;
}

/* OVERRIDE: Project View page — same as Capability View override.
   Project View has breadcrumb + project card + API header + tabs above the iframe,
   pushing the Swagger container below the viewport on screens ≤768px high.
   Without this, overflow:hidden on .rightContent clips the container bottom. */
.rightContent:has(.project-view-page):has(iframe[title*="Swagger UI"]) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 24px !important;
}

/* Right Content Area - Dashboard specific (ONLY when Dashboard is present) */
.rightContent:has(.dashboard-page),
.rightContent:has(.space-y-6:has(button:has-text("View Summary"))) {
    padding-top: 24px;
    padding-left: clamp(16px, 2vw, 24px);
    padding-right: clamp(16px, 2vw, 24px);
    background: var(--color-100-gray);
    /* Fluid margin that matches sidebar */
    margin-left: clamp(208px, 20vw + 8px, 288px);
    width: calc(100% - clamp(208px, 20vw + 8px, 288px));
    transition: margin-left 0.3s ease, width 0.3s ease;
    /* Ensure dashboard maintains reasonable width */
    min-width: 320px;
    max-width: none;
    box-sizing: border-box !important;
}

/* Phase 5: Ensure dashboard doesn't collapse when summary panel opens - summary panel overlays, doesn't push */
.rightContent:has(.dashboard-page) .summary-slide-panel.open ~ *,
.rightContent:has(.dashboard-page):has(.summary-slide-panel.open) {
    width: calc(100% - 288px) !important;
    min-width: 600px !important;
    max-width: none !important;
}

/* Phase 5: Adjust summary panel left position based on sidebar state */
.content-wrapper:not(.collapsed) .summary-slide-panel {
    left: 288px !important; /* Phase 5 - Sidebar expanded (280px + 8px gap) */
    width: calc(100vw - 288px) !important; /* Phase 5 */
}

.content-wrapper.collapsed .summary-slide-panel {
    left: 64px !important; /* Phase 5 - Sidebar collapsed (56px + 8px gap) */
    width: calc(100vw - 64px) !important; /* Phase 5 */
}

/* Remove padding from rightContent when Swagger UI is present - Match FastAPI docs */
.rightContent:has(.swagger-ui-wrapper),
.rightContent .swagger-ui-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure Swagger UI wrapper has no padding/margins */
.rightContent .swagger-ui-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: calc(100vh - 96px) !important;
    background-color: rgb(237, 237, 237) !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
}

/* Prevent any card wrappers from affecting Swagger UI */
.rightContent .swagger-ui-wrapper .card,
.rightContent:has(.swagger-ui-wrapper) .card {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure Swagger UI content doesn't merge with sidebar */
.rightContent .swagger-ui-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure Swagger UI container respects sidebar margin - Use standard values */
.rightContent:has(.swagger-ui-wrapper),
.rightContent:has(iframe[title*="Swagger UI"]) {
    margin-left: 288px !important; /* Standard: 280px sidebar + 8px gap */
    width: calc(100% - 288px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important;
}

.content-wrapper.collapsed .rightContent:has(.swagger-ui-wrapper),
.content-wrapper.collapsed .rightContent:has(iframe[title*="Swagger UI"]) {
    margin-left: 60px !important;
    margin-right: 0 !important;
    width: calc(100% - 60px) !important;
}

/* Ensure iframe container fills available space */
.rightContent:has(iframe[title*="Swagger UI"]):not(:has(.capability-view-page)):not(:has(.project-view-page)) > div:not(.announcement-banner-stack) {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Capability View page — child div should not constrain height */
.rightContent:has(.capability-view-page) > div:not(.announcement-banner-stack) {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
}

/* Project View page — same pattern as Capability View child override */
.rightContent:has(.project-view-page) > div:not(.announcement-banner-stack) {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
}

/* Swagger.io Design - Match Reference Theme (Zahara API) - Exact Layout */
.swagger-ui {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: rgb(237, 237, 237);
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Main wrapper background */
.swagger-ui .wrapper {
    background-color: rgb(237, 237, 237);
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Info section styling */
.swagger-ui .info {
    background: white;
    padding: 30px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure proper container width */
.swagger-ui .wrapper > section {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Opblock body styling - Match Reference Theme */
/* CRITICAL: Only show opblock-body when endpoint is open */
.swagger-ui .opblock-body {
    background: white;
    padding: 0;
    margin: 0;
    width: 100%;
    /* Don't force display - let Swagger UI handle collapsed state */
}

.swagger-ui .opblock.is-open .opblock-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.swagger-ui .opblock-body .opblock-section {
    background: white;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    width: 100%;
    box-sizing: border-box;
}

.swagger-ui .opblock-body .opblock-section:first-child {
    border-top: none;
}

/* Swagger.io Header Styling */
.swagger-ui .topbar {
    background-color: #89bf04;
    padding: 8px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.swagger-ui .topbar .download-url-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.swagger-ui .topbar input[type="text"] {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    min-width: 300px;
}

.swagger-ui .topbar .btn-download {
    background-color: #89bf04;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.swagger-ui .topbar .btn-download:hover {
    background-color: #6ea003;
}

/* Swagger.io Info Section */
.swagger-ui .info {
    margin: 30px 0;
    padding: 0 30px;
}

.swagger-ui .info .title {
    font-size: 36px;
    font-weight: 600;
    color: #3b4151;
    margin: 0 0 10px 0;
}

.swagger-ui .info .main {
    margin: 0;
}

/* Swagger.io Server Selection */
.swagger-ui .scheme-container {
    background-color: white;
    padding: 20px 30px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.swagger-ui .scheme-container select {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    background-color: white;
    min-width: 200px;
}

/* Swagger.io Authorization Button - Green with Padlock */
.swagger-ui .btn.authorize {
    background-color: #89bf04 !important;
    border-color: #89bf04 !important;
    color: white !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.swagger-ui .btn.authorize:hover {
    background-color: #6ea003 !important;
    border-color: #6ea003 !important;
}

.swagger-ui .btn.authorize svg {
    width: 16px;
    height: 16px;
    fill: white;
}

/* Swagger.io Endpoint Cards - Match Reference Theme (Stable Implementation) */
.swagger-ui .opblock.opblock-get {
    background: rgba(97, 175, 254, 0.1);
    border: 1px solid rgb(97, 175, 254);
    border-left: 1px solid rgb(97, 175, 254);
    border-radius: 4px;
    margin: 0 0 15px;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
}

.swagger-ui .opblock.opblock-get .opblock-summary {
    background: transparent;
    padding: 5px;
    border-bottom: 1px solid rgb(97, 175, 254);
}

.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background: #61affe;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.swagger-ui .opblock.opblock-post {
    background: rgba(73, 204, 144, 0.1);
    border: 1px solid rgb(73, 204, 144);
    border-left: 1px solid rgb(73, 204, 144);
    border-radius: 4px;
    margin: 0 0 15px;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
}

.swagger-ui .opblock.opblock-post .opblock-summary {
    background: transparent;
    padding: 5px;
    border-bottom: 1px solid rgb(73, 204, 144);
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background: #49cc90;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.swagger-ui .opblock.opblock-put {
    background: rgba(252, 161, 48, 0.1);
    border: 1px solid rgb(252, 161, 48);
    border-left: 1px solid rgb(252, 161, 48);
    border-radius: 4px;
    margin: 0 0 15px;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
}

.swagger-ui .opblock.opblock-put .opblock-summary {
    background: transparent;
    padding: 5px;
    border-bottom: 1px solid rgb(252, 161, 48);
}

.swagger-ui .opblock.opblock-put .opblock-summary-method {
    background: #fca130;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.swagger-ui .opblock.opblock-delete {
    background: rgba(249, 62, 62, 0.1);
    border: 1px solid rgb(249, 62, 62);
    border-left: 1px solid rgb(249, 62, 62);
    border-radius: 4px;
    margin: 0 0 15px;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
}

.swagger-ui .opblock.opblock-delete .opblock-summary {
    background: transparent;
    padding: 5px;
    border-bottom: 1px solid rgb(249, 62, 62);
}

.swagger-ui .opblock.opblock-delete .opblock-summary-method {
    background: #f93e3e;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.swagger-ui .opblock.opblock-patch {
    background: rgba(80, 227, 194, 0.1); /* Light teal tint */
    border: 1px solid #50e3c2;
    border-left: 1px solid #50e3c2;
    border-radius: 4px;
    margin: 0 0 15px;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
}

.swagger-ui .opblock.opblock-patch .opblock-summary {
    background: transparent;
    padding: 5px;
    border-bottom: 1px solid #50e3c2;
}

.swagger-ui .opblock.opblock-patch .opblock-summary-method {
    background-color: #50e3c2;
    color: white;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px; /* Pill-shaped */
    font-size: 12px;
    min-width: 60px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Swagger.io Tag Sections - Match Reference Theme */
.swagger-ui .opblock-tag {
    font-size: 24px;
    font-weight: 600;
    color: #3b4151;
    margin: 30px 0 15px 0;
    padding: 0 20px 10px 20px;
    background: rgb(237, 237, 237);
    border-bottom: 2px solid #e0e0e0;
}

.swagger-ui .opblock-tag small {
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    margin-left: 10px;
}

/* Ensure proper spacing between tag sections */
.swagger-ui .opblock-tag-section {
    margin-bottom: 30px;
}

/* Mobile responsive for Swagger UI tag headers */
@media (max-width: 768px) {
    .swagger-ui .opblock-tag {
        font-size: 18px;
        padding: 0 10px 10px 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }
    
    .swagger-ui .opblock-tag small {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
        font-size: 12px;
    }
    
    .swagger-ui .opblock-tag-section {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .swagger-ui .opblock-tag {
        font-size: 16px;
        padding: 0 8px 8px 8px;
        margin: 20px 0 10px 0;
    }
    
    .swagger-ui .opblock-tag small {
        font-size: 11px;
    }
}

/* Swagger.io Endpoint Cards - Match Reference Theme (Stable Implementation) */
.swagger-ui .opblock {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
    margin: 0 0 15px;
    padding: 0;
    width: 100%;
    position: relative;
    overflow: visible;
}

.swagger-ui .opblock:hover {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
}

.swagger-ui .opblock.is-open {
    border-color: rgb(59, 65, 81);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 3px 0px;
    background: white;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Removed - using method-specific border-bottom colors instead */

/* Dark theme when Try it out is active */
.swagger-ui .opblock.is-open.try-out {
    background: white;
}

.swagger-ui .opblock.is-open.try-out .opblock-body {
    background: white;
}

.swagger-ui .opblock.is-open.try-out .opblock-section {
    background: white;
}

/* Prevent collapsing - CRITICAL */
.swagger-ui .opblock.is-open .opblock-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}

.swagger-ui .opblock-summary {
    padding: 5px; /* Default padding - method-specific rules override this */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    background: transparent; /* Default transparent - method-specific rules override this */
    min-height: 0px; /* Match reference */
    position: relative;
}

/* Base method button styles - Match Reference */
.swagger-ui .opblock .opblock-summary-method {
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    min-width: 60px;
    text-align: center;
}

.swagger-ui .opblock .opblock-summary-operation-id,
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated {
    align-items: center;
    color: #3b4151;
    display: flex;
    font-family: monospace;
    font-size: 16px;
    font-weight: 600;
    padding: 0 10px;
    word-break: break-word;
}

.swagger-ui .opblock .opblock-summary-path {
    flex: 1;
}

.swagger-ui .opblock .opblock-summary-description {
    color: #3b4151;
    flex: 2;
    font-family: sans-serif;
    font-size: 14px;
    margin-left: 10px;
    word-break: break-word;
}

/* Try it out button positioning - Match Reference Theme */
.swagger-ui .opblock-summary-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.swagger-ui .opblock-summary-control button,
.swagger-ui .opblock-summary-control .btn {
    background-color: #49cc90;
    border-color: #49cc90;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}

.swagger-ui .opblock-summary-control button:hover,
.swagger-ui .opblock-summary-control .btn:hover {
    background-color: #3ea372;
    border-color: #3ea372;
}

/* Swagger.io Error Display */
.swagger-ui .errors-wrapper {
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    padding: 15px 20px;
    margin: 20px 30px;
}

.swagger-ui .errors-wrapper .errors {
    color: #c00;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.swagger-ui .errors-wrapper .error {
    color: #c00;
    font-size: 13px;
    margin: 5px 0;
}

/* Swagger.io Try It Out Button - Match Reference Theme */
.swagger-ui .btn.try-out__btn,
.swagger-ui .opblock-summary-control button {
    background-color: #49cc90;
    border-color: #49cc90;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
    margin-left: auto;
}

.swagger-ui .btn.try-out__btn:hover,
.swagger-ui .opblock-summary-control button:hover {
    background-color: #3ea372;
    border-color: #3ea372;
}

.swagger-ui .btn.try-out__btn.cancel,
.swagger-ui button.cancel {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.swagger-ui .btn.try-out__btn.cancel:hover,
.swagger-ui button.cancel:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* CRITICAL: Show "Try it out" button when endpoint is expanded but NOT in try-out mode */
.swagger-ui .opblock.is-open:not(.try-out) .btn.try-out__btn:not(.cancel),
.swagger-ui .opblock.is-open:not(.try-out) button.try-out__btn:not(.cancel),
.swagger-ui .opblock.is-open:not(.try-out) .opblock-summary-control button:not(.cancel) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Hide "Cancel" button when endpoint is expanded but NOT in try-out mode */
.swagger-ui .opblock.is-open:not(.try-out) .btn.try-out__btn.cancel,
.swagger-ui .opblock.is-open:not(.try-out) button.cancel,
.swagger-ui .opblock.is-open:not(.try-out) .opblock-summary-control button.cancel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* CRITICAL: Show "Cancel" button when endpoint is in try-out mode */
.swagger-ui .opblock.is-open.try-out .btn.try-out__btn.cancel,
.swagger-ui .opblock.is-open.try-out button.cancel,
.swagger-ui .opblock.is-open.try-out .opblock-summary-control button.cancel {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Hide "Try it out" button when endpoint is in try-out mode */
.swagger-ui .opblock.is-open.try-out .btn.try-out__btn:not(.cancel),
.swagger-ui .opblock.is-open.try-out button.try-out__btn:not(.cancel),
.swagger-ui .opblock.is-open.try-out .opblock-summary-control button:not(.cancel) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Swagger.io Execute Button */
.swagger-ui .btn.execute {
    background-color: #4990e2;
    border-color: #4990e2;
    color: white;
    padding: 8px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.swagger-ui .btn.execute:hover {
    background-color: #357abd;
    border-color: #357abd;
}

/* Hide Execute button when NOT in try-out mode */
.swagger-ui .opblock.is-open:not(.try-out) .btn.execute {
    display: none !important;
    visibility: hidden !important;
}

/* Show Execute button when IN try-out mode */
.swagger-ui .opblock.is-open.try-out .btn.execute {
    display: inline-block !important;
    visibility: visible !important;
}

/* Swagger.io Response Section - Match Reference Theme (Exact Layout) */
.swagger-ui .responses-wrapper,
.swagger-ui .opblock-body .responses-wrapper {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background: white;
    width: 100%;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.swagger-ui .responses-wrapper .responses-title,
.swagger-ui .responses-wrapper h4 {
    font-size: 14px;
    font-weight: 600;
    color: #3b4151;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.swagger-ui .responses-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.swagger-ui .responses-wrapper table thead {
    background: transparent;
    border-bottom: 1px solid #e0e0e0;
}

.swagger-ui .responses-wrapper table th {
    padding: 12px 0;
    text-align: left;
    font-weight: 600;
    color: #3b4151;
    font-size: 14px;
    border-bottom: 1px solid #e0e0e0;
}

.swagger-ui .responses-wrapper table td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.swagger-ui .response-col_status {
    font-weight: 600;
    color: #3b4151;
    font-size: 14px;
    font-family: 'Courier New', monospace;
}

.swagger-ui .response-col_description {
    color: #6b7280;
    font-size: 14px;
}

.swagger-ui .response-col_links {
    color: #6b7280;
    font-size: 13px;
}

/* Response media type and content */
.swagger-ui .response-content-type {
    margin-top: 15px;
    margin-bottom: 10px;
}

.swagger-ui .response-content-type select {
    padding: 6px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    color: #3b4151;
    font-family: 'Courier New', monospace;
}

/* Response Example Value / Schema tabs */
.swagger-ui .response-content .tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
    background: white;
    padding: 0;
}

.swagger-ui .response-content .tab {
    background: white;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    border-radius: 4px 4px 0 0;
    margin-right: 0;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.swagger-ui .response-content .tab:hover {
    background: #f8f9fa;
    color: #3b4151;
}

.swagger-ui .response-content .tab.active {
    background: white;
    color: #3b4151;
    border-color: #e0e0e0;
    border-bottom-color: white;
    font-weight: 600;
}

/* Response code blocks - Match Reference (Scrollable with max-height) */
.swagger-ui .response-content .highlight-code,
.swagger-ui .response-content .microlight,
.swagger-ui .response-content pre {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border: 1px solid #1a252f;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 500px;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure response content sections are fully visible (but code blocks scroll) */
.swagger-ui .response-content,
.swagger-ui .responses-inner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    box-sizing: border-box;
}

.swagger-ui .responses-wrapper .response {
    display: table-row !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
}

/* Response table rows should be fully visible */
.swagger-ui .responses-wrapper table tbody tr {
    display: table-row !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.swagger-ui .responses-wrapper table tbody tr .response-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Swagger.io Code Blocks - Match Reference Theme (Dark Grey) */
.swagger-ui .highlight-code,
.swagger-ui .highlight-code pre,
.swagger-ui .microlight,
.swagger-ui .renderedMarkdown code {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    border: 1px solid #1a252f;
}

/* Request Body - BEFORE Try it out: Show Example Value/Schema tabs */
/* CRITICAL: Ensure request body is visible when endpoint expands */
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content,
.swagger-ui .opblock.is-open:not(.try-out) .request-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Show tabs BEFORE "Try it out" */
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content .tabs,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .tabs,
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content .tab-container,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .tab-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row !important;
}

/* CRITICAL: Show example code and schema BEFORE "Try it out" */
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content .body-param-content__example,
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content .body-param-content__schema,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .body-param-content__example,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .body-param-content__schema,
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content .tab-content.active,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .tab-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Hide editable textarea BEFORE "Try it out" */
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content textarea,
.swagger-ui .opblock.is-open:not(.try-out) .request-body textarea,
.swagger-ui .opblock.is-open:not(.try-out) .body-param-content .body-param-content__input,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .body-param-content__input {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Hide tabs AFTER "Try it out" */
.swagger-ui .opblock.is-open.try-out .body-param-content .tabs,
.swagger-ui .opblock.is-open.try-out .request-body .tabs,
.swagger-ui .opblock.is-open.try-out .body-param-content .tab-container,
.swagger-ui .opblock.is-open.try-out .request-body .tab-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Hide example code and schema AFTER "Try it out" */
.swagger-ui .opblock.is-open.try-out .body-param-content .body-param-content__example,
.swagger-ui .opblock.is-open.try-out .body-param-content .body-param-content__schema,
.swagger-ui .opblock.is-open.try-out .request-body .body-param-content__example,
.swagger-ui .opblock.is-open.try-out .request-body .body-param-content__schema,
.swagger-ui .opblock.is-open.try-out .body-param-content .tab-content,
.swagger-ui .opblock.is-open.try-out .request-body .tab-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Show editable textarea AFTER "Try it out" */
.swagger-ui .opblock.is-open.try-out .body-param-content textarea,
.swagger-ui .opblock.is-open.try-out .request-body textarea,
.swagger-ui .opblock.is-open.try-out .body-param-content .body-param-content__input,
.swagger-ui .opblock.is-open.try-out .request-body .body-param-content__input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border: 1px solid #1a252f;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 280px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.swagger-ui .body-param-content .body-param-content__example,
.swagger-ui .body-param-content .body-param-content__schema,
.swagger-ui .request-body .body-param-content__example,
.swagger-ui .request-body .body-param-content__schema,
.swagger-ui .body-param-content .body-param-content__example pre,
.swagger-ui .body-param-content .body-param-content__schema pre,
.swagger-ui .request-body .body-param-content__example pre,
.swagger-ui .request-body .body-param-content__schema pre,
.swagger-ui .body-param-content .microlight,
.swagger-ui .body-param-content .highlight-code,
.swagger-ui .body-param-content .highlight-code pre,
.swagger-ui .request-body .microlight,
.swagger-ui .request-body .highlight-code,
.swagger-ui .request-body .highlight-code pre {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border: 1px solid #1a252f;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
}

/* Example Value / Schema Tabs - Match Reference (Exact Styling) */
.swagger-ui .body-param-content .tab,
.swagger-ui .body-param-content .tabitem,
.swagger-ui .body-param-content .tablinks,
.swagger-ui .request-body .tab,
.swagger-ui .request-body .tabitem,
.swagger-ui .request-body .tablinks {
    background: white;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    border-radius: 4px 4px 0 0;
    margin-right: 0;
    margin-bottom: -1px;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    font-weight: 400;
}

.swagger-ui .body-param-content .tab:hover,
.swagger-ui .body-param-content .tabitem:hover,
.swagger-ui .body-param-content .tablinks:hover,
.swagger-ui .request-body .tab:hover,
.swagger-ui .request-body .tabitem:hover,
.swagger-ui .request-body .tablinks:hover {
    background: #f8f9fa;
    color: #3b4151;
}

.swagger-ui .body-param-content .tab.active,
.swagger-ui .body-param-content .tabitem.active,
.swagger-ui .body-param-content .tablinks.active,
.swagger-ui .request-body .tab.active,
.swagger-ui .request-body .tabitem.active,
.swagger-ui .request-body .tablinks.active {
    background: white;
    color: #3b4151;
    border-color: #e0e0e0;
    border-bottom-color: white;
    font-weight: 600;
    z-index: 2;
}

/* Tab content area */
.swagger-ui .body-param-content .tab-content,
.swagger-ui .request-body .tab-content {
    display: none;
    width: 100%;
}

.swagger-ui .body-param-content .tab-content.active,
.swagger-ui .request-body .tab-content.active {
    display: block;
}

/* Tab container - Match Reference */
.swagger-ui .body-param-content .tab-container,
.swagger-ui .body-param-content .tabs,
.swagger-ui .request-body .tab-container,
.swagger-ui .request-body .tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
    background: white;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Swagger.io Model Section */
.swagger-ui .model-box {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
}

.swagger-ui .model-title {
    font-size: 16px;
    font-weight: 600;
    color: #3b4151;
    margin-bottom: 10px;
}

/* Swagger.io Parameter Section - Match Reference Theme (Exact Layout) */
.swagger-ui .parameters-container,
.swagger-ui .opblock-body .parameters-container {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.swagger-ui .parameters-container .parameters-title,
.swagger-ui .opblock-body .parameters-container .parameters-title {
    font-size: 14px;
    font-weight: 600;
    color: #3b4151;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.swagger-ui .parameters-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.swagger-ui .parameters-container table thead {
    background: transparent;
    border-bottom: 1px solid #e0e0e0;
}

.swagger-ui .parameters-container table th {
    padding: 12px 0;
    text-align: left;
    font-weight: 600;
    color: #3b4151;
    font-size: 14px;
    border-bottom: 1px solid #e0e0e0;
}

.swagger-ui .parameters-container table td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.swagger-ui .parameter {
    margin-bottom: 15px;
    padding: 10px 0;
}

.swagger-ui .parameter__name {
    font-weight: 600;
    color: #3b4151;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.swagger-ui .parameter__type {
    color: #6b7280;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    display: inline-block;
}

.swagger-ui .parameter__in {
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    padding: 2px 6px;
    background: #f0f0f0;
    border-radius: 3px;
    margin-left: 8px;
    display: inline-block;
}

.swagger-ui .parameter input {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    margin-top: 8px;
    box-sizing: border-box;
}

.swagger-ui .parameter input:focus {
    border-color: #49cc90;
    outline: none;
    box-shadow: 0 0 0 2px rgba(73, 204, 144, 0.1);
}

/* Swagger.io Request Body - Match Reference Theme (Exact Layout) */
.swagger-ui .body-param,
.swagger-ui .request-body {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.swagger-ui .body-param .body-param-content,
.swagger-ui .request-body .body-param-content {
    margin-top: 15px;
    width: 100%;
}

/* Request body header with content type dropdown */
.swagger-ui .body-param .body-param-content h4,
.swagger-ui .request-body h4 {
    font-size: 14px;
    font-weight: 600;
    color: #3b4151;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.swagger-ui .body-param .body-param-content h4 .required,
.swagger-ui .request-body h4 .required {
    color: #f93e3e;
    margin-left: 5px;
    font-weight: 600;
}

/* Content type dropdown */
.swagger-ui .body-param .body-param-content select,
.swagger-ui .request-body select {
    padding: 6px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    color: #3b4151;
    margin-left: 10px;
}

/* Example Value / Schema tabs container - Base styling */
.swagger-ui .body-param .body-param-content .tabs,
.swagger-ui .request-body .tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
    background: white;
    padding: 0;
    gap: 0;
}

/* Tabs visible when NOT in try-out mode - Standardized selector */
.swagger-ui .opblock.is-open:not(.try-out) .body-param .body-param-content .tabs,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .tabs {
    display: flex !important;
    visibility: visible !important;
}

/* Hide tabs when in try-out mode - Standardized selector */
.swagger-ui .opblock.is-open.try-out .body-param .body-param-content .tabs,
.swagger-ui .opblock.is-open.try-out .request-body .tabs {
    display: none !important;
    visibility: hidden !important;
}

/* Example Value / Schema code blocks - Base styling (visible by default) */
.swagger-ui .body-param .body-param-content .body-param-content__example,
.swagger-ui .body-param .body-param-content .body-param-content__schema,
.swagger-ui .request-body .body-param-content__example,
.swagger-ui .request-body .body-param-content__schema {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border: 1px solid #1a252f;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    display: block;
    visibility: visible;
}

/* Example Value / Schema code blocks - Visible when NOT in try-out mode - Standardized selector */
.swagger-ui .opblock.is-open:not(.try-out) .body-param .body-param-content .body-param-content__example,
.swagger-ui .opblock.is-open:not(.try-out) .body-param .body-param-content .body-param-content__schema,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .body-param-content__example,
.swagger-ui .opblock.is-open:not(.try-out) .request-body .body-param-content__schema {
    display: block !important;
    visibility: visible !important;
}

/* Hide Example Value / Schema when in try-out mode - Standardized selector */
.swagger-ui .opblock.is-open.try-out .body-param .body-param-content .body-param-content__example,
.swagger-ui .opblock.is-open.try-out .body-param .body-param-content .body-param-content__schema,
.swagger-ui .opblock.is-open.try-out .request-body .body-param-content__example,
.swagger-ui .opblock.is-open.try-out .request-body .body-param-content__schema {
    display: none !important;
    visibility: hidden !important;
}

/* Code block content inside tabs */
.swagger-ui .body-param .body-param-content .body-param-content__example pre,
.swagger-ui .body-param .body-param-content .body-param-content__schema pre,
.swagger-ui .body-param .body-param-content .microlight,
.swagger-ui .body-param .body-param-content .highlight-code {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Swagger.io Filter Input - REMOVED (filter-container is hidden) */
/* .swagger-ui .filter-container input {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    max-width: 400px;
}

/* Swagger.io Loading State */
.swagger-ui .loading-container {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.swagger-ui .loading-container .loading {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(137, 191, 4, 0.3);
    border-radius: 50%;
    border-top-color: #89bf04;
    animation: rotate 0.8s linear infinite;
}

.rightContentHealthPiqr{
    margin-left: 220px;
    min-height: 80vh;
    min-width: 0;
}

.content-wrapper.collapsed .rightContentHealthPiqr{
    margin: 0 0 0 60px;
    padding-left: 32px;
    padding-right: 24px;
    transition: var(--transition);
    min-height: 82vh;
}

.summaryLayout .rightContent,
.topLeftLayout .rightContent{margin-left: 0;margin-right: 0px;}


/* collapsed - Standard collapsed state for all screens */
/* Use padding (not horizontal margin) so the main background paints edge-to-edge — no parent “gutter” strip */
.content-wrapper.collapsed .rightContent {
    margin-left: 60px !important; /* align with 60px fixed collapsed sidebar */
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 32px !important;
    padding-right: 24px !important;
    width: calc(100% - 60px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important; /* Smooth transitions */
    min-height: calc(100vh - 96px);
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--app-bg) !important;
}

/* Common Layout Rules - Phase 6: Ensure consistent behavior across all screens */
/* Prevent any screen from collapsing when sidebar state changes */
.rightContent:has(.dashboard-page),
.rightContent:has(.api-builder-page),
.rightContent:has(.swagger-ui-wrapper),
.rightContent:has(.swagger-ui),
.rightContent:has(iframe[title*="Swagger UI"]) {
    transition: margin-left 0.3s ease, width 0.3s ease !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Ensure all screens maintain proper padding-top to prevent header merge */
.rightContent:has(.dashboard-page),
.rightContent:has(.api-builder-page) {
    padding-top: 120px !important; /* Prevent merging with header */
}

/* Swagger UI screens don't need padding-top */
.rightContent:has(.swagger-ui-wrapper),
.rightContent:has(.swagger-ui),
.rightContent:has(iframe[title*="Swagger UI"]) {
    padding-top: 0 !important;
}

/* Ensure collapsed state maintains proper spacing for all screens */
.content-wrapper.collapsed .rightContent:has(.dashboard-page),
.content-wrapper.collapsed .rightContent:has(.api-builder-page) {
    padding-top: 120px !important; /* Prevent merging with header when collapsed */
}

.content-wrapper.collapsed .rightContent:has(.swagger-ui-wrapper),
.content-wrapper.collapsed .rightContent:has(.swagger-ui),
.content-wrapper.collapsed .rightContent:has(iframe[title*="Swagger UI"]) {
    padding-top: 0 !important;
}

/* Dashboard specific - Maintain padding when collapsed */
.content-wrapper.collapsed .rightContent:has(.dashboard-page),
.content-wrapper.collapsed .rightContent:has(.space-y-6:has(button:has-text("View Summary"))) {
    padding-top: 120px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background: var(--color-100-gray) !important;
}

/* API Builder specific - Maintain padding when collapsed */
.content-wrapper.collapsed .rightContent:has(.space-y-6):not(:has(.swagger-ui-wrapper)):not(:has(.swagger-ui)) {
    padding-top: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/*  */
.lefttop-layout-flex .leftNav{ min-width:260px;}

/* cards************************************/
.card.card-transparent,
.topLeftLayout .appSummaryCardPrimary {
    box-shadow: var(--elevation-light-sm) !important;
    background: var(--color-white);
    border: 0;
}

.card.card-primary.appSummaryCardPrimary {border: 0;box-shadow: var(--elevation-light-sm);padding:var(--padding-3xl) var(--padding-2xl);padding: 0;}
.card.card-primary.appSummaryCardPrimary .card-body {padding: 28px 24px 24px 24px;}



.card.card-transparent .card-header,
.topLeftLayout .appSummaryCardPrimary  .card-header{
    background-color: transparent !important;
    border-bottom: solid 1px var(--color-100-gray);
    padding: var(--padding-xl) var(--padding-3xl);
    align-items: center !important;
}
.card.card-transparent .card-footer,
.topLeftLayout .appSummaryCardPrimary  .card-footer {
    background-color: transparent !important;
    border-top: solid 2px var(--color-100-gray);
    padding: var(--padding-2xl) var(--padding-3xl); align-items: center !important;
}


.card.card-transparent > .card-header .card-title,
.current-page-title .card-title,
.topLeftLayout .appSummaryCardPrimary > .card-header .card-title  {
    font-size: var(--font-size-5x-large);
    /* line-height: 44px; */
    font-weight: var(--font-weight-semibold);
    margin: 0;
    /* font-family: var(--heading-font); */
}

.card.card-transparent > .card-body {
    padding: var(--padding-3xl);
}



/*  */
.popup-panel{ position: relative;}
.popup-panel> .card-header{ box-shadow: var(--elevation-light-md); border: 0 !important;}
/*  */
.card.card-section, .card.card-primary .card-body .card-primary {
    padding: 0 !important;
    box-shadow: none !important;
    border: 0;
}

.card.card-primary .card-body .card-primary.cal-panel {
    padding: var(--padding-4xl) !important;
    background: var(
    --color-50-gray);
    border: solid 2px var(
    --color-100-gray);
    box-shadow: var() rgba(var(), 40%) !important;
    border-radius: 0;
    }

/* used this for risk 360 card heading */
/* current-page-title */
.current-page-title{background: var(--color-white);margin-bottom: -8px;position: relative;z-index: 1;padding: 21px var(--padding-3xl) 17px;border-radius: 8px 8px 0 0;box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.10);border-bottom: solid 1px var(--color-100-gray);align-items: center !important;/* z-index: 1; */}
.current-page-title .card-title{margin-right: var(--margin-2xl);}
.backto-link {padding: 0;display: inline-block;/* margin-left: -5px; */padding-top: 4px;}
.backto-link i{margin: 0;}
/* card-transparent > .card-primary */
.card.card-transparent > .card-body .card-primary {
    background: var(--color-white);
    border: 0;
    border-radius: 0;
    position: relative;
    margin-bottom: 24px;
}

.card.card-transparent > .card-body .card-primary .card-header,
.offcanvas-body .card.card-primary .card-header {
    background: none;
    padding: 0px 0 4px 0;
    border: 0;
}

.card.card-transparent > .card-body .card-primary .card-header .card-title,
.offcanvas-body .card.card-primary .card-header h3.card-title {
    font-size: var(--font-size-2x-large);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}
.card.card-transparent > .card-body .card-primary .card-header .card-title1,
.offcanvas-body .card.card-primary .card-header h3.card-title {
    font-size: var(--font-size-2x-large);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}
.card-title1{
    color: var(--bs-card-title-color);
}

.card.card-transparent > .card-body .card-primary .card-body {
    padding: 0 !important;
}

.card.card-transparent > .card-body .card-primary .card-footer {
    background: none;
    padding: var(--padding-2xl) 0;
    border: 0;
    text-align: left !important;
}

/*.summaryGrid> .card-primary */

.summaryGrid{ padding: 0 !important;}
.summaryGrid .table-responsive{ margin-bottom: 0!important;}
.summaryGrid .offcanvas .table-responsive{ margin-bottom: var(--margin-2xl)!important;}
.summaryGrid .card-header{ margin-bottom: 0 !important;}
.summaryGrid > .card-primary{margin: 0 12px 19px 12px !important;}
.summaryGrid > .card-primary .card-header h3.card-title{font-size: var(--font-size-medium) !important;}
.summaryGrid > .card-primary .card-header h3.card-title a{  text-decoration: none; color: var(--color-900-gray); text-decoration: none; }
.summaryGrid > .card-primary .card-header h3.card-title a:hover{ color: var(--color-global-link); text-decoration: underline;}
.summaryGrid > .card-primary .card-header h3.card-title a i{width: 20px;height: 20px;position: relative;top: -2px;border-radius: var(--radius-sm);padding: 4px;display: inline-block;vertical-align: sub;} 

.summaryGrid > .card-primary .card-body{ padding: 0;}
.summaryGrid > .card.card-transparent > .card-body .card-primary .card-body{ padding: 0;}

.summaryGrid > .card-primary::after{ display: none  ; }

.summaryCards.card.card-transparent > .card-body{padding: 28px 13px 9px 13px;}
.summaryCards.card.card-transparent.case360Card{padding: 0px  15px;}


/*******/
.shiftbuttons .btn{margin-bottom: var(--margin-xs);}
.shiftbuttons.bCount-1{padding-top: 86px;}
.shiftbuttons.bCount-2{padding-top: 50px;}
.shiftbuttons.bCount-3{ padding-top: 30px;}
.shiftbuttons.bCount-4{padding-top: 20px;}
.shiftbuttons.button{
    margin-bottom: 2px;
}
/**************/
/* card-section */
.card.card-section,
.card.card-search,
.card.filterCard,
.card.question-panel {
    background: var(--color-white);
    border: 0;
    border-radius: 0;
    position: relative;
    margin-bottom: 24px;
}

.card.card-section> .card-header,
.card.card-search> .card-header,
.card.filterCard> .card-header,
.card.question-panel> .card-header {
    background: none;
    padding: 0 !important;
    border: 0;
}

.card.card-section> .card-header .card-title,
.card.card-search>  .card-header .card-title,
.card.filterCard>   .card-header .card-title,
.card.question-panel> .card-header .card-title {
    font-size: var(--font-size-3x-large);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.card.card-section> .card-body,
.card.card-search> .card-body
.card.filterCard> .card-body,
.card.question-panel> .card-body{
    padding: var(--padding-xl) 0 !important;
}


/* .card-search{ margin-bottom: 0 !important;} */
.card.card-search, .card.filterCard{background: var(--color-50-gray);border: solid 1px var(--color-100-gray);border-radius: 8px;}
.card.card-search .card-body{ padding: 0 12px;}
.card.card-search .card-header,
.card.card-search .card-footer{padding: 12px !important;}
.card-search .card-header .card-title i,
.card-filter .card-header .card-title i{ display: none;}

.cardQuery{background: var(--color-50-gray);border: solid 1px var(--color-200-gray);border-radius: var(--radius-md);/* margin-bottom: var(--margin-lg); */}
.cardQuery .card-body,
.card.card-transparent > .card-body .card-primary .card-body .cardQuery .card-body{padding: 8px 16px 0px 16px !important;}
.card.card-transparent > .card-body .card-primary .card-body .cardQuery .card-header{ margin-bottom: 0;}
.cardQuery .card-header{border-bottom: solid 1px var(--color-200-gray) !important;}
.cardQuery .card-header .card-title i{ display: none;}
.cardQuery .card-header h3.card-title{font-size: var(--font-size-large) !important;font-weight: var(--font-weight-semibold);margin: 0;}
.cardQuery .card-header,
.cardQuery .card-footer{padding: 8px 16px !important; }
.cardQuery .card-footer{border-top: solid 1px var(--color-200-gray) !important;}



/* card border */
.card.card-transparent > .card-body .card-primary:after {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    bottom: 0;
    border-bottom: solid 1px var(--color-100-gray);
}

.card.filterCard:after {
    content: "";
    position: absolute;
    left: -32px;
    right: -32px;
    bottom: 0;
    border-bottom: solid 2px var(--color-100-gray);
}


.card.card-transparent > .card-body .card-primary .card-body .card-primary:after { display: none;}


/* .card.card-transparent > .card-body .card-primary:nth-last-child(1):after{ display: none;} */
/* .card.card-transparent > .card-body .card-primary:nth-last-child(1){ margin-bottom: 0;} */
/* remove border */
.card.card-transparent > .card-body .card-primary.no-border:after {
    content: none;
}

/* Footer copyright*/
.copyright {
    font-size: var(--font-size-3x-small);
    color: var(--color-600-gray);
    padding: var(--padding-xl) var(--padding-3xl);
}

.summaryLayout .copyright { padding:  var(--padding-xl) var(--padding-none);}

.copyright br{ display: none;}
.copyright img {
    height: 24px;
    width: auto;
    vertical-align: middle;
    margin-left: var(--margin-sm);
}

/* dropdown  */
.dropdown {
    display: inline-block;
}

/* dropdown-toggle */
.dropdown-toggle:after {
    width: 16px;
    height: 16px;
    background-image: url(../icons/zinnia-icons/images/chevron-down.svg);
    border: 0;
    background-repeat: no-repeat;
    top: 0;
    vertical-align: middle; background-size: contain;
}

.dropdown-menu {
    border: 0;
    box-shadow: var(--elevation-light-lg);
    padding: var(--padding-2xl) 0;
    background: var(
    --color-900-gray);
    z-index: 6;
    /* Bootstrap default: hidden by default, shown with .show class */
    display: none;
}

/* Show dropdown when .show class is present */
.dropdown-menu.show {
    display: block !important;
}

/* Override for dropdown-user-info - always show when rendered */
.dropdown-menu.dropdown-user-info {
    display: block !important;
}

.dropdown-menu li a {
    display: block;
    font-size: var(--font-size-x-small);
    color: var(--color-white);
    padding: var(--padding-xs) var(--padding-2xl) 1px var(--padding-2xl);
    font-weight: var(--font-weight-light);
    text-decoration: none;
    background: var(--color-900-gray);
    font-family: var(--heading-font);
}



.dropdown-menu li a i {
    width: 16px;
    height: 16px;
    margin-right: var(--radius-lg)
}

.dropdown-item:focus, .dropdown-item:hover,
.dropdown-item.active, 
.dropdown-item:active {
    border-color: solid 2px var(--color-secondary-dark);
    background: var(--color-800-gray);
    color: var(--color-white);
}

/* dropdown cotent */
.dropdown .dropdown-menu {
    padding: 0;
}

.dropdown .dropdown-menu> .card.card-primary {
    border: 0;
}

.dropdown .dropdown-menu> .card.card-primary .card-header, .dropdown .dropdown-menu> .card.card-primary .card-footer {
    border: 0;
    background: none;
    padding: var(--padding-xl) var(--padding-4xl);
    position: relative;
}

.dropdown .dropdown-menu> .card.card-primary> .card-header {
    box-shadow: var(--elevation-light-md);
}

.dropdown .dropdown-menu> .card.card-primary .card-footer {
    border-top: solid 2px var(--color-100-gray);
    text-align: right;
}

.dropdown .dropdown-menu> .card.card-primary .card-body {
    padding: var(--padding-4xl);
}

.dropdown .dropdown-menu> .card.card-primary .card-header h3.card-title
 {    font-size: var(--font-size-5x-large);
}



.dropdown .dropdown-menu.dropdown-content.w-lg {
    width: 1000px;
}

/*  */
.dropdown .dropdown-menu> .card .card-header .btn-close {
    position: absolute;
    right: 32px;
    top: 18px;
    background: url(../icons/zinnia-icons/images/cancel.svg) !important;
    opacity: 1;
}

/* .select2-container */
.select2-container {
    display: block !important;
    width: auto !important;
}

/* .select2-container .select2-selection--single .select2-selection__rendered{ padding-top: 9px; padding-left: var(--margin-2xl) ;} */
/* table */
.table-responsive {
    border: solid 1px var(--color-200-gray);
    border-radius: var(--radius-md);
    margin-bottom: var(--margin-2xl);
}

/* table head */
.table thead tr th, .table tbody tr th {
    background: var(--color-50-gray) !important;
    padding: var(--padding-xs) var(--padding-xl);
    border-bottom: solid 1px var(--color-200-gray);
    font-family: var(--body-font);
    font-size: var(--font-size-x-small);
    height: 32px;
    /* line-height: 28px; */
    font-weight: var(--font-weight-semibold);
    vertical-align: middle;
}

/* th-no-wrap */
.th-no-wrap thead tr th {
    white-space: nowrap;
}

/* table data */
.table {
    margin: 0;
}
.table.th-no-wrap {   white-space: nowrap;}
.table tbody tr td {
    padding: var(--padding-md) var(--padding-xl);
    line-height: 19px;
    font-size: var(--font-size-x-small);
}

/* .table tbody tr:nth-last-child(1) td{ border-bottom: 0 !important;} */

.table-hover>tbody>tr:hover>* {
    --bs-table-bg-state: var(--color-50-gray) !important;
}

/*table sorting */
.sorting:after, .sorting:hover:after, .sorting_asc:after, .sorting_desc:after {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(../icons/zinnia-icons/images/sort.svg);
    vertical-align: middle;
    margin-left: var(--margin-sm);
    background-size: contain;
}

.sorting:after {
    background: none;
}

.sorting:hover {
    background-color: var(--color-100-gray) !important;
}

.sorting_desc:after, .sorting_asc:after {
    background-image: url(../icons/zinnia-icons/images/arrow-md-down.svg);
}

.sorting_asc:after {
    transform: rotate(180deg);
}

/* table pagination */
.page-toobar-table-con .btn {
    margin: 0 var(--margin-sm) !important;
    border: solid 2px var(--color-secondary) !important;
    color: var(--color-secondary)!important;
    font-weight: var(--font-weight-semibold) !important;
    height: 32px;
    padding: 0 4px !important;
    border-radius: var(--radius-sm);
    min-width: auto !important;
    line-height: 0;
}

.page-toobar-table-con .btn:hover {
    background: var(--color-secondary-lightest) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.page-toobar-table-con .btn:disabled, .page-toobar-table-con .btn.disabled {
    background: var(--color-100-gray)!important;
    border-color: var(--color-300-gray) !important;
    opacity: 1;
}

.page-toobar-table-con .btn.disabled i {
    filter: grayscale(1) brightness(2);
}

.totalRecordsFound {text-align: left;}
.page-toobar-table-con .btn i {width: 20px;height: 20px;}

/* Case summary */
#caseSummaryView {
    padding: 0;
}

ul#caseSummaryView{    
    margin-bottom: 0px;
}

ul#caseSummaryView li {
    position: relative;
    display: inline-block;
    padding: 20px 20px 20px 70px;
    margin-bottom: 8px;
    min-width: 240px;
}

ul#caseSummaryView li.icon-card {
    padding: var(--padding-2xl) var(--padding-xl) var(--padding-2xl) 60px;
    position: relative;
    color: var(--gray-700);
    border-left: solid 0 var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--color-50-gray);
    display: inline-block;
    text-decoration: none;
    width: 30%;
    margin: 0 var(--margin-lg) var(--margin-lg) 0;
    min-height: 60px;
    border: solid 2px var(--color-200-gray);
}

.summaryCasesContol {
    display: block;
    font-size: var(--font-size-4x-large);
    font-weight: var(--font-weight-semibold);
    line-height: 14px;
    font-family: var(--heading-font);
}

.summaryCaseLabel {
    font-size: var(--font-size-x-small);
}

ul#caseSummaryView li.icon-card:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 16px;
    top: 17px;
    padding-top: 5px;
    width: 32px;
    height: 32px;
    text-align: center;
    background: url(../icons/zinnia-icons/images/tasks.svg) no-repeat;
    background-position: center;
    background-size: cover !important;
}

ul#caseSummaryView li.icon-card.totalassignedpending:before {
    background: url(../icons/zinnia-icons/images/tasks.svg) no-repeat;
}

ul#caseSummaryView li.icon-card.followupdue:before {
    background: url(../icons/zinnia-icons/images/history-event.svg) no-repeat;
}

ul#caseSummaryView li.icon-card.newcasesreceivedtoday:before {
    background: url(../icons/zinnia-icons/images/view-grid-add.svg) no-repeat;
}

ul#caseSummaryView li.icon-card.faceamt2morgreater:before {
    background: url(../icons/zinnia-icons/images/money-bag.svg) no-repeat;
}

ul#caseSummaryView li.icon-card.referrals:before {
    background: url(../icons/zinnia-icons/images/user-group.svg) no-repeat;
}

ul#caseSummaryView li.icon-card.pendinguwdecision:before {
    background: url(../icons/zinnia-icons/images/rewards-portal.svg) no-repeat;
}



/************************
Custom form elements */
.form-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2x-small);
    margin-bottom: 0px !important;
}

.form-label.mandatoryLabel::after { content: "*"; position: relative; left: 4px; }
.form-label.mandatoryLabel .btn-help{margin-left: 10px;}

.form-label.mandatoryLabel .btn-help::before{content: "*";position: relative;left: -6px;color: var(--color-900-gray);top: -4px;}


.form-label:has(.btn-help)::after {  display: none;}
  
  

/*  */
input[type=text], input[type=email],
input[type=password],
.select-control,
.select2-container--default .select2-selection--single,
.input-group>.form-control,
.input-group>.form-floating,
.input-group>.form-select {
    border-radius: var(--radius-sm);
    border: solid 2px var(--color-200-gray) !important;
    padding: 4px var(--padding-xl) !important;
    color: var(--gray-900) !important;
    font-size: var(--font-size-x-small);
    height: 32px !important;
    font-weight: var(--font-weight-medium)!important;
}


.select2-container--default .select2-selection--single{border-radius: var(--radius-sm) !important;}
.select-control, /*.input-group input, */.select2-container--default .select2-selection--single{padding-right: var(--padding-5xl) !important;}


.select-control {width: 100%;appearance: none; /* removes default arrow */-webkit-appearance: none;-moz-appearance: none;background-image: url('../images/select-arrow.svg');background-size: auto 20px  !important;/* filter: grayscale(1); */background-repeat: no-repeat;background-position: right;}










.form-group {
    /* min-height: 92px; */
    margin-bottom: var(--margin-lg);
}

textarea.form-control {   height: auto; font-size: var(--font-size-x-small);}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left: calc(var(--bs-border-width) * -2);}
.form-control,
.form-select{ border-width: 2px; border-color:var(--color-200-gray) ;}
.select-control[multiple] {height: auto !important;display: block;width: 100%;padding: 0 !important;background: none;padding: var(--padding-sm) !important;}
.select-control[multiple]:hover{border-color:var(--color-secondary-dark) !important ;}
.select-control[multiple]:focus{border-color: var(--color-secondary) !important;   box-shadow: var(--elevation-dark-sm);}
.select-control[multiple] option  { padding: var(--padding-md) var(--padding-xl); border: solid 2px var(--color-white); }
.select-control[multiple] option:hover  {  border-color: var(--color-secondary-dark); }
.select-control[multiple] option:checked,
.select-control[multiple] option:focus   {  border-color: var(--color-secondary); background:var(--color-white); font-weight: var(--font-weight-semibold); color:var(--color-900-gray); }


td>.form-control, td>.select2,  td>.select-control:not(.select2-hidden-accessible){ min-width:150px;}
/* form-check */
.form-check-inline {
    margin-right: var(--margin-2xl) !important;
    margin-top: 2px;
}

.form-check-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-900-gray);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: sub;
}

/* Radio */
input[type="radio"].form-check-input {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-max);
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid var(--color-200-gray);
    background-color: var(--color-white);
    position: relative;
}

input[type="radio"].form-check-input:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: var(--color-global-link);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

input[type="radio"].form-check-input:checked {
    border-color: var(--color-secondary);
}

input[type="radio"].form-check-input:hover {
    border-color: var(--color-secondary-dark);
}

input[type="radio"].form-check-input:focus {
    outline: 2px solid var(--color-semantic-focus);
    outline-offset: 2px;
}

.table-checkbox .form-check-input{ margin-top: 0;}
.form-check-label {
    font-weight: 500;
    color: var(--color-900-gray);
    font-size: var(--font-size-x-small);
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: sub;
    margin-left: var(--margin-sm);
}

input[type="radio"].form-check-input:disabled {
    border-color: var(--color-200-gray);
    background-color: var(--color-white);
    opacity: 1;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

input[type="radio"].form-check-input:disabled:checked {
    border-color: var(--color-secondary-lightest);
}

input[type="radio"].form-check-input:disabled:checked::before {
    background-color: var(--color-secondary-lightest)!important;
}

.radio-table input[type="radio"].form-check-input,
.radio-table input[type="checkbox"].form-check-input{ margin: 0;}

/* Checkbox */
input[type="checkbox"].form-check-input {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid var(--color-200-gray);
    background-color: var(--color-white);
    position: relative;
}

input[type="checkbox"].form-check-input:checked::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background-color: var(--color-secondary);
    border-radius: 2px;
}

input[type="checkbox"].form-check-input:checked {
    border-color: var(--color-secondary);
}

input[type="checkbox"].form-check-input:hover {
    border-color: var(--color-secondary-dark);
}

input[type="checkbox"].form-check-input:focus {
    outline: 2px solid var(--color-semantic-focus);
    outline-offset: 2px;
}

input[type="checkbox"].form-check-input:disabled {
    border-color: var(--color-300-gray);
    background-color: var(--color-100-gray);
    opacity: 1;
    cursor: not-allowed !important;
    pointer-events: auto !important;
	
}

input[type="checkbox"].form-check-input:disabled:checked {
    border-color: var(--color-secondary-lightest);
}

input[type="checkbox"].form-check-input:disabled:checked::before {
    background-color: var(--color-secondary-lightest) !important;
}

/* select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    /* color: var(--color-900-gray); */
    font-weight: var(--font-weight-medium);
    line-height: normal !important;
    padding: 0 !important;
}
/***/
.input-group-text i {width: 20px;height: 20px;}
/* date  */
.date.input-group .input-group-append{position: absolute;right: 0;top: 0;border-radius: var(--radius-md) !important;filter: grayscale(1) contrast(2);z-index: 5;} 
.date.input-group .input-group-append:hover{filter: grayscale(0);cursor: pointer;} 
.date.input-group .input-group-append .input-group-text{background: transparent;border: 0;padding: var(--padding-md) var(--padding-xl);/* background: red; */} 
.date.input-group .input-group-append .input-group-text i{
    width: 20px;
    height: 20px;
    /* background-color: var(--color-white); */
    background-color: transparent;
}
.date .form-control:disabled+.input-group-append,
.date .form-control:disabled+.input-group-append:hover{ opacity: .5; filter: grayscale(1); cursor: not-allowed;}

.date.input-group .form-control{border-radius: var(--radius-sm) !important;}
/*caseInfoHeader*/
.caseInfoHeader {
    background: var(--color-100-gray);
    /* padding: 0px 15px 0px 15px; */
    border-top: solid 1px var(
    --gray-200);
    white-space: nowrap;
    left: 0;
    right: 0;
    top: 72px;
    padding: var(--padding-md) var(--padding-3xl) var(--padding-md) var(--padding-3xl);
    position: fixed;
    z-index: 99;
}


.case-info-list-container{max-width: 100%;overflow: auto;/* height: 64px; */padding-top: var(--margin-lg);}
.caseInfoHeader ul.case-info-list {margin: 0 0;padding: 0;height: auto;}
.caseInfoHeader ul.case-info-list li span.caselinfoLabel,
.caseInfoHeader ul.case-info-list li span.caselinfoText{ display: block;}

.caseInfoHeader ul.case-info-list li span.caselinfoLabel{/* font-weight:var(--font-weight-semibold); */font-size: var(--font-size-3x-small);color: var(--color-700-gray);}
.caseInfoHeader ul.case-info-list li span.caselinfoText{font-size: 13px;max-width: 200px;overflow: hidden;text-overflow: ellipsis;color: var(--color-900-gray);font-weight: var(--font-weight-semibold);}

/*.caseInfoHeader ul:hover{overflow-x: auto;}*/
.caseInfoHeader ul li {
    list-style: none;
    display: inline-block;
    padding: 4px 8px;
    border-right: solid 1px var(--gray-200);
    vertical-align: top;
    margin: 0;
    min-height: 40px;
}

.caseInfoHeader ul li:nth-last-child(1) {
    border: 0;
}

.caseInfoHeader ul li:nth-child(1) {
    padding-left: 0 ;
}

.caseInfoHeader ul li p {
    margin-bottom: 0;
    font-size: var(--fs-sm);
    line-height: 14px;
    /* height: 16px; */
    display: inline-block;
    vertical-align: top;
    margin-right: var(--margin-4xl);
}

.caseInfoHeader ul li p .caselinfoLabel {
    color: var(--color-900-gray);
    font-size: var(--font-size-x-small);
    display: block;
    padding: 5px 0;
}

.caseInfoHeader ul li p .caselinfoText {
    font-weight: var(--font-weight-semibold);
    color: var(--color-900-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    white-space: nowrap;
    display: block;
    padding: 6px 0;
}

/* caseInformation */
.caseInformation {
   padding: var(--padding-md) var(--padding-2xl) var(--padding-xs) 59px;
   border-right: solid 1px var(--color-200-gray);
   position: relative;
   height: 58px;
   margin-right: var(--margin-2xl);
}

.caseInformation:before {content:"";position: absolute;width: 48px;height: 48px;left: 0;display: inline-block;background: #fff url('/icons/icons/zinnia-icons/images/shield-heart.svg') no-repeat center;border-radius: var(--radius-sm);background-size: 32px !important;font-family: var(--heading-font);top: 6px;box-shadow: var(--elevation-dark-xs);}
.caseInformation.life:before {      background: #fff url('/icons/icons/zinnia-icons/images/shield-heart.svg') no-repeat center;}
.caseInformation.annuity:before {   background: #fff url('/icons/icons/zinnia-icons/images/money-bag.svg') no-repeat center;}
.caseInformation.disability:before{ background: #fff url('/icons/icons/zinnia-icons/images/disability.svg') no-repeat center;}

.caseInformation>.productInfo{ display: flex; align-items: center;}
.caseInformation> .productInfo .productCode.badge{background: var(--color-white);padding: var(--padding-md) var(--padding-lg) 0px var(--padding-lg);height: 24px;border: solid 2px var(--color-600-gray);color: var(--color-600-gray);border-radius: var(--radius-sm);padding-top: 3px;line-height: 16px;}
.caseInformation> .productInfo .planName{font-size: var(--font-size-x-small);font-weight: var(--font-weight-semibold);margin-left: var(--margin-sm);display: inline-block;/* font-family: var(--heading-font); */max-width: 180px;text-overflow: ellipsis;overflow: hidden;}


.caseInformation> .policyInfo{display: flex;align-items: center;margin-top: -2px;}
.caseInformation> .policyInfo .policyNumber{font-size: var(--font-size-x-large);color: var(--color-900-gray);font-weight: var(--font-weight-semibold);/* font-family: var(--heading-font); */flex: 1;}
.caseInformation> .policyInfo .caseStstus.badge{margin-left: var(--padding-2xl);}

/* badges */
.badge{padding: var(--padding-sm) var(--padding-lg) var(--padding-sm) var(--padding-lg);display: inline-block;line-height: 16px;border: solid 2px var(--color-300-gray);background: var(--color-100-gray);color: var(--color-900-gray);font-family: var(--heading-font);border-radius: var(--radius-4xl);line-height: 14px;height: 24px;}


.btn .badge {
    height: 20px;
    min-width: 20px;
    padding: 2px 4px;
}

.badge i.zi{width: 16px;height: 16px;vertical-align: top;top: -3px;position: relative;}
/*  */
.badge.default{           border-color: var(--color-300-gray); background:var(--color-100-gray);  color: var(--color-900-gray);}
/*  */
.badge.warning,
 .badge.reqTableRequired{  border-color: var(--color-semantic-warning); background:var(--color-semantic-warning-light); color: var(--color-semantic-warning);}
/*  */
.badge.success,
.badge.reqTableReceived,
.badge.reqTableReviewed{  border-color: var(--color-success-warning); background:var(--color-semantic-success-light);  color: var(--color-semantic-success);}
/*  */
.badge.info,
.badge.reqTableOrdered{   border-color: var(--color-semantic-information); background:var(--color-semantic-information-light); color: var(--color-semantic-information);}
/*  */
.badge.pending{           border-color: var(--color-semantic-pending); background:var(--color-semantic-pending-light); color: var(--color-semantic-pending);}
/*  */
.badge.error,
.badge.reqTableOrdeFail,
.reqTablePendMiss{  border-color: var(--color-semantic-error); background:var(--color-semantic-error-light); color: var(--color-semantic-error);}
/*  */
.badge.inactive{          border-color: var(--color-300-gray); background:var(--color-100-gray);  color: var(--color-300-gray);}
/*  */

/* inbox table custom badges with ::before  */
.priorityHighTd,
.priorityLowTd,
.priorityMediumTd{position: relative;padding-left: 17px !important;font-family: var(--heading-font);font-size: var(--font-size-3x-small) !important;font-weight: var(--font-weight-semibold);color: var(--color-semantic-error) !important;}

.priorityHighTd::before,
.priorityLowTd::before,
.priorityMediumTd::before{content: "";position: absolute;left: 5px;top: 4px;/* padding: var(--padding-md) var(--padding-lg) var(--padding-sm) var(--padding-lg); */display: inline-block;line-height: 16px;border: solid 2px var(--color-800-gray);background:var(--color-white);color: var(--color-800-gray);font-family: var(--heading-font);border-radius: var(--radius-4xl);height: 24px;width: 48px;}
/*  */
.priorityHighTd{color: var(--color-semantic-error) !important}
.priorityHighTd::before{border-color: var(--color-semantic-error);background: rgb(0 123 90 / 10%);background: rgb(219 0 79 / 10%);width: 53px;}
/*  */
.priorityLowTd{color: var(--color-semantic-success) !important}
.priorityLowTd::before{border-color: var(--color-semantic-success);background: rgb(0 123 90 / 10%);}
/*  */
.priorityMediumTd{color: var(--color-semantic-warning) !important}
.priorityMediumTd::before{border-color: #b74d00;background: rgb(183 77 0 / 10%);width: 72px; width: 74px;}


/* rightStickyMenu */
.rightStickyMenu .tooltip {
    white-space: nowrap;
}

.rightStickyMenu .dropstart .dropdown-toggle::before {
    display: none;
}

.rightStickyMenu {
    left: auto;
    right: 0px;
    height: 230px;
    width: 40px;
    top: 220px;
    border-radius: 20px 0px 0px 20px;
    position: fixed;
    bottom: 0px;
    z-index: 90;
}

.rightStickyMenu img {
    height: auto;
    -webkit-filter: contrast(180%);
    /* Safari 6.0 - 9.0 */
    filter: contrast(180%);
    position: relative;
    z-index: -1;
    width: 22px;
}

.rightStickyMenu > ul {
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
    /* border: solid 2px var(--color-600-gray); */
    border-radius: 8px 0 0 8px;
}

.rightStickyMenu > ul li {
    list-style-type: none;
    position: relative;
}

.rightStickyMenu > ul li.list-item:nth-child(1) a.menu-item {
    border-radius: var(--radius-md) 0 0;
}

.rightStickyMenu > ul li.list-item:nth-last-child(1) a.menu-item {
    border-radius: 0 0 0 var(--radius-md);
    border: 0;
}

.rightStickyMenu > ul li .dropdown-menu.show .icon-bar-sliderContent {
    transition: ease 0.8s;
    z-index: 0;
}

.rightStickyMenu > ul li a.menu-item {
    display: block;
    text-align: center;
    border: 0px;
    background: var(--color-white);
    border-bottom: solid 2px var(--color-100-gray);
    padding: 6px 10px 10px 10px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    width: 40px;
    color: var(--gray-50);
    font-size: 20px;
    box-shadow: var(--elevation-light-sm);
}

.rightStickyMenu > ul li a.menu-item i {
    filter: grayscale(1);
}

.rightStickyMenu > ul li a.menu-item:hover {
    color: var(--white);
    /* border-right: solid 2px var(--primary-800); */
    background: var(--color-secondary-lightest);
}

.rightStickyMenu > ul li a.menu-item:hover, .rightStickyMenu > ul li a.menu-item:active, .rightStickyMenu > ul li a.menu-item .active {
    position: relative;
    background: var(--color-secondary-lightest);
}

.rightStickyMenu > ul li a.menu-item:hover i, .rightStickyMenu > ul li a.menu-item:active i, .rightStickyMenu > ul li a.menu-item .active i {
    filter: grayscale(0);
}

.rightStickyMenu .icon-bar-slider {
    /* position: fixed; */
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 0;
    opacity: 1;
    left: 59px;
    overflow: hidden;
    background: #ffffff;
    transition: ease 0.3s;
    z-index: 10;
    max-height: 480px;
    padding: 8px;
    border-radius: var(--radius-sm);
    position: relative;
}


.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent h3 {
    font-size: var(--font-size-small);
    color: var(--color-900-gray);
    border-bottom: solid 2px var(--color-100-gray);
    padding-bottom: 5px;
    margin: 0px;
    margin-top: 5px;
    font-weight: var(--font-weight-semibold);
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu {
    padding: 0px;
    margin-bottom: 20px;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li:hover {
    background: none;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li a {
    border: 0px;
    border-bottom: solid 1px var(--color-100-gray);
    display: block;
    padding: var(--padding-md) var(--padding-4xl) var(--padding-md) var(--padding-lg);
    color: var(--color-800-gray);
    font-size: var(--font-size-2x-small);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    background: var(--color-white);
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li a:hover {
    background: var(--color-50-gray)!important;
    color: var(--gray-900);
    text-decoration: none;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li a:focus {
    text-decoration: none;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li [data-toggle="collapse"] {
    position: relative;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li [data-toggle="collapse"]:hover, .rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li [data-toggle="collapse"]:focus {
    background: var(--color-secondary-lightest) !important;
    text-decoration: none;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li [data-toggle="collapse"]:after {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 18px;
    transition: ease 0.3s;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li [data-toggle="collapse"].collapsed {
    background: none;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li [data-toggle="collapse"].collapsed:after {
    transform: rotate(180deg);
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li .slider-submenu {
    margin-bottom: var(--padding-none);
    padding-left: var(--margin-none);
    border-bottom: solid 1px var(--color-200-gray);
    border-top: solid 1px var(--color-200-gray);
    background: var(--color-white);
    /*margin-bottom: 10px;*/
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li .slider-submenu li a {
    padding: var(--padding-md) var(--padding-md) var(--padding-md) var(--padding-4xl);
    position: relative;
    font-weight: var(--font-weight-regular);
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li .slider-submenu li a:hover, .rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li .slider-submenu li a:focus {
    background: var(--color-50-gray) !important;
    text-decoration: none !important;
}

.rightStickyMenu .icon-bar-slider .icon-bar-sliderContent .slider-menu li .slider-submenu li a:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    font-size: 22px;
    font-weight: 100;
    background: url('/icons/icons/zinnia-icons/images/arrow-md-right.svg') no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.icon-bar-slider {
    left: auto;
    top: -60px;
    right: -250px;
    height: 456px;
    width: 320px !important;
    opacity: 0;
    box-shadow: var(--elevation-light-xl);
}

.icon-bar-slider .icon-bar-sliderContent {
    overflow-x: hidden;
    overflow-y: auto;
    height: 435px;
    padding-right: var(--padding-xs);
    padding: var(--padding-xl);
}

.rightStickyMenu ul li:nth-child(1) ul li {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.rightStickyMenu ul li:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: 0px;
}

.rightStickyMenu ul li:last-child ul li {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.rightStickyMenu ul li.active img {
    filter: invert(0%);
}

.rightStickyMenu ul li.active .icon-bar-slider {
    left: auto;
    right: 40px;
    opacity: 1;
    background: #ffffff !important;
    box-shadow: 8px 0px 25px rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.rightStickyMenu .list-item .menu-item .badge {
    position: absolute;
    background: var(--color-accent-two);
    right: 29px;
    top: 6px;
    box-shadow: var(--elevation-dark-sm);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-3x-small);
    border: solid 2px var(--color-white);
    padding: 3px var(--padding-md);
    color: var(--color-white);
    height: 23px;
}

/***********/
.slider-menu li a[data-bs-toggle] {
    position: relative;
    background: var(--gray-100);
}

.slider-menu li a.collapsed[data-bs-toggle] {
    position: relative;
    background: var(--white);
}

.slider-menu li a[data-bs-toggle]:before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 5px;
    transition: var(--transition);
    background: url('/icons/icons/zinnia-icons/images/chevron-up.svg') no-repeat;
}

.slider-menu li a.collapsed[data-bs-toggle]:before {
    transform: rotate(180deg);
}

/****End of right sticky menu********/

/* Alerts */
.alert:empty{ display: none;}
.alert {
    padding: var(--padding-lg);
    border: solid 1px var(--color-semantic-error-light);
    box-shadow: var(--elevation-light-sm);
    position: relative;
    padding-left: 39px;
    color: #212121;
    display: block;
}

.alert:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('/icons/icons/zinnia-icons/images/alert-exclamation.svg') !important;
    position: absolute;
    left: 8px;
    top: 5px;
}

.alert.alert-warning {  background: var(--color-semantic-warning-light);  border-color: var(--color-semantic-warning-50-percent-opacity);}
.alert.alert-warning:before { color: var(--color-semantic-warning); background-image: url('/icons/icons/zinnia-icons/images/alert-warning.svg') !important;}

/*  */
.alert.alert-success { color: var(--color-semantic-success); background: var(--color-semantic-success-light); border-color:var(--color-semantic-success-50-percent-opacity);}
.alert.alert-success:before { background-image: url('/icons/icons/zinnia-icons/images/alert-success.svg') !important;}

/*  */
.alert.alert-danger {  background: var(--color-semantic-error-light); border-color: var(--color-semantic-error-50-percent-opacity);}
.alert.alert-danger:before {   background-image: url('/icons/icons/zinnia-icons/images/alert-danger.svg') !important;}

/*  */
.alert.alert-info { background-color: var(--color-semantic-information-light); border-color:var(--color-semantic-information-50-percent-opacity) }
.alert.alert-info:before { background-image: url('/icons/icons/zinnia-icons/images/alert-info.svg') !important;}
/*  */

.alert.alert-locked {        background-color: var(--color-semantic-error-light); border-color:var(--color-semantic-error-50-percent-opacity) }
.alert.alert-locked:before { background-image: url('/icons/icons/zinnia-icons/images/lock-red.svg') !important;}
.error {color: var(--color-semantic-error); font-weight: var(--fw-600);}
/*  */
.case-options{margin: var(--margin-none) 0 var(--margin-sm) 0;}
.acelerateHolder {margin-right: var(--margin-3xl);}

/*Date Picker*/
.datepicker {
    border-radius: var(--radius-sm) !important;
    background: var(--color-white);
    box-shadow: var(--elevation-light-xs) rgba(var(--elevation-dark-sm), 20%);
    padding: 16px !important;
    overflow-y: visible;
  }
  .datepicker.dropdown-menu {
    border: 0;
    box-shadow: var(--elevation-light-lg); 
    z-index: 1065 !important; 
    padding: var(--padding-2xl) 0;
  }
  .datepicker table tr td.day.focused,  .datepicker table tr td span.focused {
    box-shadow: inset 0px 0px 0px 1px var(--color-secondary-dark) !important;
    color: var(--color-white) !important;
    font-weight: var(--font-weight-semibold) !important;
    background: var(--color-secondary) !important;
  }
  .datepicker-days .dow{
    color: var(--color-600-gray);
    font-size: var(--font-size-x-small);
  }
  .datepicker-days thead {
    border-bottom: 2px solid var(--color-100-gray);
  }
  .datepicker td{
    color: var(--color-600-gray);
  }
  .datepicker td.day{
    color: var(--color-900-gray);
    font-size: var(--font-size-x-small);
  }
  .datepicker td.day.active{background: var(--color-secondary-lightest) !important;color: var(--color-900-gray) !important;}
  .datepicker .datepicker-switch, .datepicker .prev, .datepicker .next, .datepicker tfoot tr th{ filter: grayscale(1);}
  
  
  
  /*****Decison Summary******/
  .summryCol.Coverage\/Rider
  .flatExtraDropDownList {      width: 345px;    position: absolute;      border-top: solid 2px var(--color-global-link-dark);    background: #fff;    z-index:151;margin-top:1.5px;}
  .flatExtraDropDownListVal{min-width:170px}
  .flatExtraDropDownList .input-group .form-control, .flatExtraDropDownList .input-group-addon, .flatExtraDropDownList .input-group-btn {    display: inherit;    float: left;    width: 46px;    height: 25px;}
  .flatExtraDropDownList .input-group {padding: 10px;width: auto !important;}
  .flatExtraDropDownListVal{text-overflow: ellipsis;overflow: hidden;}
  .flatExtraDropDownList .input-group .form-control{width: 65px;}
  .flatExtraDropDownList .input-group .input-group-text{ font-size: var(--font-size-x-small); line-height: 0;}
  .flatExtraDropDownList .input-group .form-control.flatYrsInput{width: 30px;}
  .flatExtraDropDownList .input-group-addon.br0{border-left: 0;border-right: 0;}
  .input-group.flatExtraInputs+.input-group.flatExtraInputs {padding-top: 0;}
  td.planDecisions_planCoverageDecisionCd .select2 {   width: 170px !important;}
  .flatExtraDropDownList {position: absolute;z-index: 100;background: var(--color-white);border-top:solid 2px var(--color-secondary-dark);width: 360px;box-shadow: 0px 7px 24px rgba(var(--color-black), 20%) !important;border-radius:var(--radius-xs);padding-top: 8px;}
  
  .flatExtraDropDownList .error{position: absolute;top: -8px; font-weight: var(--fw-500);  font-size: var(--fs-sm);}
  .flatExtraDropDownList .btn{    margin-left:2px !important;   padding: 0 5px; border-radius: 0; min-width: auto;}
  
  .reasonList {position: absolute;z-index: 20;background: var(--color-white);padding: 10px;border-top:solid 2px var(--color-secondary-dark);box-shadow: 0px 7px 24px rgba(var(--color-black), 20%) !important;display: none;min-width: 200px;}
  .reasonList .checkbox{ margin-bottom: 5px;}
  .reasonList .checkbox input{ vertical-align: middle;}

  .reasonList1 {position: absolute;z-index: 20;background: var(--color-white);padding: 10px;border-top:solid 2px var(--color-secondary-dark);box-shadow: 0px 7px 24px rgba(var(--color-black), 20%) !important;display: none;min-width: 200px;}
  .reasonList1 .checkbox{ margin-bottom: 5px;}
  .reasonList1 .checkbox input{ vertical-align: middle;}

  .flatExtraDropDownList .input-group .flatExtraInput {
      max-width: 80px;
  }
  
  .flatExtraDropDownList .input-group .flatYrsInput {
      max-width: 60px;
  }

  button.multiselect.dropdown-toggle.disable.btn.btn-primary, button.multiselect.dropdown-toggle.disable.btn.btn-primary:hover {background: var(--color-white) !important;font-weight: var(--font-weight-regular) !important; text-overflow: ellipsis;border-color: var(--color-300-gray) !important;overflow: hidden;color: #444 !important;position: relative;width: 230px;}
button.multiselect.dropdown-toggle.disable.btn.btn-primary:hover{border-color:var(--color-primary);}
.multiselect-native-select div {
    margin-top: 0px;
}

td .multiselect-container a:not(.btn-help) {
    color: var(--color-white) !important;
    cursor: pointer !important;
}


/*  */

.lefttop-layout-flex, .summmary-layout-flex{padding: var(--padding-lg)  var(--padding-lg) var(--padding-lg) var(--padding-lg);}
.lefttop-layout-flex .rightContent{width: 100%;}
.topLeftLayout .card.card-transparent{border-radius:var(--radius-sm) ;}
.topLeftLayout .content-wrapper, 
.d-flex.summmary-layout-flex{background:var(--color-50-gray);margin-bottom: 8px;border-radius:var(--radius-sm);}
.topLeftLayout .content-wrapper{margin: 0 12px;}
.topLeftLayout .leftNav .nav-pills,
.summmary-layout-flex .leftNav .nav-pills{margin-right: var(--margin-lg);padding: var(--padding-lg);/* box-shadow: var(--elevation-light-sm); *//* background: var(--color-white); */border-radius:var(--radius-sm);}
.topLeftLayout .leftNav .nav-pills li a.nav-link,
.summmary-layout-flex .leftNav .nav-pills li a.nav-link{/* border-bottom: solid 2px var(--color-100-gray); */color: var(--color-600-gray);border-radius: 0;padding: 6px 41px 6px 34px;margin: 0;/* font-family: var(--heading-font); */font-weight: 600;font-size: var(--font-size-x-small);line-height: 20px;border-radius: 4px;position: relative;/* background: var(--color-white); */margin-bottom: 2px;border: solid 1px transparent;}
.topLeftLayout .leftNav .nav-pills li a.nav-link:hover,
.summmary-layout-flex .leftNav .nav-pills li a.nav-link:hover{background: var(--color-white);color: var(--color-900-gray);}

.topLeftLayout .leftNav .nav-pills li a.nav-link:before,
.summmary-layout-flex .leftNav .nav-pills li a.nav-link:before{
    content:"";
    width: 16px;
    height: 16px;
    background-image: url(../icons/zinnia-icons/images/arrow-md-right.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    display: inline-block;
    position: absolute;
    left: 9px;
    filter: grayscale(1) brightness(.80);
    top: 8px;
    }

.topLeftLayout .leftNav .nav-pills li a.nav-link.active:before{ filter: sepia(1) saturate(21) hue-rotate(12deg) brightness(1.1) contrast(1);}

.topLeftLayout .leftNav .nav-pills li a.nav-link.active,
.summmary-layout-flex .leftNav .nav-pills li a.nav-link.active{/* border-color: var(--color-secondary); */color: var(--color-900-gray) !important;background: var(--color-white);/* border-radius: 4px; */box-shadow: var(--elevation-dark-xs) !important;border-color: var(--color-primary);}
.summmary-layout-flex .leftNav .nav-pills li a.nav-link.active:before{ filter: sepia(1) saturate(21) hue-rotate(12deg) brightness(1.1) contrast(1) !important;}
.leftNav .nav-pills li a.nav-link .badge{position: absolute;right: 8px;top: 6px !important;/* display: none; */}
.leftNav .nav-pills li a.nav-link .badge.success{width: 20px;padding: 3px 0 0 0;height: 20px;}


/*  */
.summmary-layout-flex{position: relative;top: -62px;} 



/*  */
.topLeftLayout .appSummaryCardPrimary{ margin: 8px;}


ul#Top_Tabs {display:block;background: var(--color-white);width:100%;margin-bottom: -12px;position: relative;padding: 8px 32px  0px 16px;z-index: 10;border-bottom: solid 2px var(--color-100-gray);}
.topLeftLayout ul#Top_Tabs{background: var(--color-white);left: 0;top: -8px;border-radius: var(--radius-lg) var(--radius-lg) 0 0;}
ul#Top_Tabs .nav-item{display: inline-block;}
ul#Top_Tabs .nav-item .nav-link{font-weight: var(--font-weight-semibold);padding: var(--padding-lg) var(--padding-lg) var(--padding-lg) var(--padding-4xl);position: relative;font-size: var(--font-size-medium);color: var(--color-600-gray);}
ul#Top_Tabs .nav-item .nav-link:hover{ background: var(--color-50-gray); color: var(--color-900-gray);}
ul#Top_Tabs .nav-item .nav-link:after{position: absolute;content: "";left: 0;right: 0;bottom: -1px;height: 4px;background: transparent;border-radius:var(--radius-xs)  var(--radius-xs) 0 0;}
ul#Top_Tabs .nav-item .nav-link.active{ color: var(--color-secondary); }
ul#Top_Tabs .nav-item .nav-link.active:after{ background: var(--color-secondary);}




/*Calculators related*******************/
ul#calSubTypeCode {display:block;background: var(--color-white);width:100%;margin-bottom: -12px;position: relative;padding: 8px 32px  0px 0px;z-index: 5;border-bottom: solid 2px var(--color-100-gray);}
/* .topLeftLayout ul#Top_Tabs{background: var(--color-white);left: 0;top: -8px;border-radius: var(--radius-lg) var(--radius-lg) 0 0;} */
ul#calSubTypeCode .nav-item{display: inline-block;}
ul#calSubTypeCode .nav-item .nav-link{font-weight: var(--font-weight-semibold);padding: var(--padding-lg) var(--padding-lg) var(--padding-lg) var(--padding-lg);position: relative;font-size: var(--font-size-medium);color: var(--color-600-gray);}
ul#calSubTypeCode .nav-item .nav-link:hover{ background: var(--color-50-gray); color: var(--color-900-gray);}
ul#calSubTypeCode .nav-item .nav-link:after{position: absolute;content: "";left: 0;right: 0;bottom: -1px;height: 4px;background: transparent;border-radius:var(--radius-xs)  var(--radius-xs) 0 0;}
ul#calSubTypeCode .nav-item .nav-link.active{ color: var(--color-secondary); }
ul#calSubTypeCode .nav-item .nav-link.active:after{ background: var(--color-secondary);}


/*accordion*******************/
.accordion .accordion-button{padding: 10px 39px;border-radius: 0 !important;font-weight: var(--fw-600);font-size: var(--font-size-medium);position: relative;color: var(--color-800-gray);text-decoration: none;border-bottom: solid 2px var(--color-100-gray);font-weight: 600;border-radius: var(--radius-lg) var(--radius-lg) 0 0;}
.accordion .accordion-button.collapsed{background: var(--color-50-gray);border: 0;background: transparent;}
.accordion .accordion-button:not(.collapsed){text-decoration: none;box-shadow: none;background: var(--color-50-gray);}
.accordion .accordion-button:after,
.accordion .accordion-button:not(.collapsed):after{content:"";position: absolute;font-family: var(--icon-bs);top:0;bottom: 0;text-align: center;padding-top: 4px;left: 18px;transition: none;top: 12px;background: url('/icons/icons/zinnia-icons/images/chevron-right.svg');width: 16px;height: 16px;background-size: contain;filter: grayscale(1) contrast(60);}
.accordion .accordion-button:not(.collapsed):after{content:"";transform: rotate(90deg);}

.accordion .accordion-item{border: solid 2px var(--color-100-gray) !important;border-radius: var(--radius-lg);margin-bottom: var(--margin-xl);}
.accordion .accordion-header{border-radius: 0 !important;/* border-bottom: solid 1px var(--primary-500); */}
.accordion-body{padding: var(--padding-2xl) var(--padding-5xl);background: var(--color-50-gray);}
.question-panel .card-header .card-title{font-weight: 700 !important;}

.accordion-item:has(.accordion-button){border-color: var(--primary-100);}
.accordion-item:has(.accordion-button.collapsed){border-color:var(--gray-200)}
#appSummaryList .card-primary {
    /* margin-bottom: 16px !important; */
    border: 0;
    background: transparent;
}
.accordion-item .card.card-primary .card-body{
    padding: 8px 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
.appSummaryCardPrimary .card-header{padding:8px 0;background: transparent;border-bottom: solid 2px var(--color-100-gray);}
.appSummaryCardPrimary .card-header .card-title{ margin-bottom: 0;}
.card.card-primary .card-header:has(.card-title:empty) {display: none !important;}


/* question-panel */
.accordion-body .card-primary .card-header .card-title{font-size: var(--font-size-medium);font-weight: var(--font-weight-bold);}

.nav-item.Close, .nav-item.Close_fr  {
    position: absolute;
    right: 0;
    /* background: red; */
    top: 3px;
    width: 40px;
    height: 40px;
    text-align: center;
    right: 6px;
}

/***Documents Repository***/
.docActionsTd{ position: relative;}
.docActions {position: absolute;z-index:10;box-shadow: var(--elevation-light-xl);background:var(--color-white);top: 19%;right: 88px;width: 200px;border-right: solid 2px var(--color-secondary);/* padding: 16px; */border-radius: var(--radius-xs);}
.docActions:after{content: "";font-family: var(var(--body-font));position: absolute;top: 10%;right: -10px;color: var(--color-primary);}
.docActions ul.menuBar {padding:0;margin:0;}
.docActions ul.menuBar li{ list-style-type:none;}
.docActions ul.menuBar li a{display:block;padding: var(--padding-lg);border-bottom:solid 1px var(--color-200-gray);text-decoration:none;text-align:left}
.docActions ul.menuBar li:nth-last-child(1) a{ border:0 ;}

.reIndexPop{ width: 36px; height: 36px; padding: 0; border-radius: var(--radius-3xl);  transition: ease 0.3s;}
button.reIndexPop {
    min-width: 24px;
}
.reIndexPop:hover{transform: rotate(90deg);}
/*  */
/* body.summaryLayout:has(.summary-layout-flex) .content-wrapper {   background: red !important;} */
/* login - Fluid Responsive Design */
body.login .container{
    /* Fluid margin: scales from 320px at small screens to 578px at large screens */
    margin-left: clamp(320px, 40vw, 578px);
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    transition: margin-left 0.3s ease;
}
body.login .dropdown { display: none;}
body.login:after{
    background: var(--color-100-gray) url('../icons/icons/zinnia-icons/images/bloomPetals.svg') -60px center;
    position: fixed;
    content: "";
    height: auto;
    /* Fluid background size: scales with viewport height */
    background-size: auto clamp(400px, 70vh, 700px);
    background-repeat: no-repeat;
    bottom: 0;
    top: -15px;
    left: 0;
    right: 0;
    z-index: -1;
    /* Fluid width: scales from 200px to 430px based on viewport */
    width: clamp(200px, 30vw, 430px);
    background-attachment: fixed;
    background-position: clamp(20px, 3vw, 40px) clamp(30px, 5vh, 60px);
    box-shadow: inset var(--elevation-light-md);
    transition: width 0.3s ease;
}

/* Short height screens - adjust vertical spacing */
@media (max-height: 700px) {
    .card.card-primary.login-card{ margin-top: 30px !important;}
}

/* Mobile: Hide petals and center form when viewport is too narrow */
@media (max-width: 600px) {
    body.login {
        overflow-x: hidden;
    }
    body.login .login.min-h-screen {
        width: 100%;
        padding: 0;
    }
    body.login .container {
        margin: 0 auto !important;
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 100vh;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
        padding-top: 80px !important;
    }
    body.login:after {
        display: none !important;
    }
    .card.card-primary.login-card {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    .card.card-primary.login-card .card-header,
    .card.card-primary.login-card .card-body {
        padding: 0;
        width: 100%;
    }
    .card.card-primary.login-card .card-header .login-logo-container {
        text-align: center;
        margin-bottom: 24px;
    }
    .card.card-primary.login-card .form-group {
        width: 100%;
        margin-bottom: 16px;
    }
    .card.card-primary.login-card .form-control {
        width: 100%;
        box-sizing: border-box;
    }
    .card.card-primary.login-card .card-body > form > div:last-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .login-heading {
        font-size: 1.25rem !important;
        text-align: center !important;
        word-wrap: break-word;
    }
    .login-support-text {
        font-size: 0.875rem !important;
        text-align: center !important;
        word-wrap: break-word;
    }
}

/* Very small mobile screens (360px and below) */
@media (max-width: 360px) {
    body.login .container {
        padding: 8px;
    }
    .card.card-primary.login-card {
        padding: 8px;
        width: calc(100% - 16px);
        margin-left: 8px;
        margin-right: 8px;
    }
    .card.card-primary.login-card .form-group {
        margin-left: 0;
        margin-right: 0;
    }
    .card.card-primary.login-card .form-control {
        width: 100%;
        box-sizing: border-box;
    }
    .login-heading {
        font-size: 1.25rem;
        word-wrap: break-word;
    }
    .login-support-text {
        font-size: 0.75rem;
        word-wrap: break-word;
    }
}

body.login:before{ z-index: -1;}

.login-heading{font-size: var(--font-size-x-large);font-family: var(--heading-font);margin-top: var(--margin-md); margin-bottom: 0; }
.login-support-text{font-size: var(--font-size-medium);padding-bottom: 16px; color: var(--color-500-gray);}

.card.card-primary.login-card {width: 400px;border: 0;background: transparent;margin-top: 120px;}
.card.card-primary.login-card .card-header{background: none; border: 0;  padding: 0 ;}
.card.card-primary.login-card .card-header .login-logo-container{display: block; margin-bottom: var(--margin-3xl); }
.card.card-primary.login-card .card-header .login-logo-container img { height: 120px; width: auto; }

/* Responsive login logo */
@media (max-width: 768px) {
    .card.card-primary.login-card .card-header .login-logo-container img { height: 80px; }
}
@media (max-width: 375px) {
    .card.card-primary.login-card .card-header .login-logo-container img { height: 64px; }
}

.card.card-primary.login-card .card-body{padding: 0;margin-bottom: 16px;}
.card.card-primary.login-card .card-footer{background: none;border-top: solid 2px var(--color-100-gray);display: none;}
.card.card-primary.login-card .card-footer .copyright{padding:8px 0;}
.card.card-primary.login-card .btn.btn-text{ margin-right: 32px !important;}
.card.card-primary.login-card .card-header h5.card-title{font-size: var(--font-size-5x-large);    font-weight: 600;    margin-bottom: 8px;}


.buttonbar, .top-toolbar {
    padding-bottom: 10px;
    padding-top: 0px;
}
/* .card.card-transparent > .card-body .card-primary .card-body{ padding-top: 0;} */
.card.card-transparent .card.card-primary .card-header {   margin-bottom: 8px;}
.form-group{margin-bottom: 18px;position: relative;}
.form-group.error label.error{color: var(--color-semantic-error);font-size: var(--font-size-2x-small);position: absolute;bottom: -20px;font-weight: var(--font-weight-semibold);display: block !important;}
.form-group.error label.error:before{content:"";background: url('/icons/icons/zinnia-icons/images/alert-danger.svg') no-repeat center / contain !important;margin-right: 2px;position: relative;top: 0px;width: 18px;height: 16px;display: inline-block;vertical-align: text-top;}


.form-group.error .form-control{border-color: var(--color-semantic-error) !important;}
.form-group.no-min-height {margin-bottom: 8px;}
.question-row .form-group.no-min-height {margin-bottom: 0px;}


.input-group-text{border-width: 2px;  border-color: var(--color-200-gray); padding: 2px 12px;}

.form-group.error .date span.input-group-text {
    border-color:  var(--color-semantic-error);
    color:  var(--color-semantic-error);
}

.form-group.error .select2-container--default .select2-selection--single {
    border-color: var(--color-semantic-error) !important;
}

.form-control:hover,
.select2-container--default .select2-selection--single:hover,
.select-control:hover{ border-color: var(--color-secondary-dark) !important;}

.select2-container--default .select2-selection--single{ border-radius: var(--radius-lg);}

.form-control:focus,
.select2-container--default .select2-selection--single:focus,
.select-control:focus{ border-color: var(--color-secondary) !important; box-shadow: var(--elevation-dark-sm);}



.form-control:disabled, .select-control:disabled,
.select2-container--default.select2-container--disabled .select2-selection--single,
.form-control:disabled:hover, 
.select2-container--default.select2-container--disabled .select2-selection--single
.form-control:disabled:focus, 
.select2-container--default.select2-container--disabled .select2-selection--single:focus{background-color: var(--color-100-gray) !important;border-color: var(--color-300-gray) !important;color: var(--color-300-gray) !important; cursor: not-allowed !important;}

.form-control:disabled, input[readonly],
.form-control:disabled:focus, input[readonly]:focus,
.form-control:disabled:hover, input[readonly]:hover

{
    background: var(--color-50-gray);
    color: var(--color-600-gray);
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered{ color: var(--color-300-gray) !important;}
.select2-dropdown{ border: solid 0px var(--color-200-gray) !important; border-radius: var(--radius-lg) !important; overflow: hidden !important; box-shadow: var(--elevation-light-lg);}
.select2-container .select2-results .select2-results__option{border: solid 2px var(--color-white);padding: 6px 16px;}
.select2-container .select2-results .select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true]:hover{ border-color:var(--color-secondary-dark); background: var(--white) !important; color: var(--color-900-gray) !important;}
.select2-container--default .select2-results__option[aria-selected=true]{ font-weight: var(--font-weight-semibold); border-color:var(--color-secondary);}


/*  */



ul.select2-results__options .select2-results__option:nth-last-child(1){border-radius: 0 0 8px 8px;}
/* ul.select2-results__options .select2-results__option:nth-child(1){ border-radius:8px 8px  0 0 ;} */

.select2-container--default .select2-search--dropdown .select2-search__field {border: 2px solid var(--color-200-gray);   border-radius: 8px; height: 44px;     padding: var(--padding-2xl);}

.select2-search--dropdown.select2-search--hide + .select2-results .select2-results__options .select2-results__option:nth-child(1){ border-radius:8px 8px  0 0 ;}


.form-group.error .form-check .form-check-input{ border-color: var(--color-semantic-error);}

/* requirements */
select.selectStatus option[value=Cancelled], .Cancelled{ color: var(--color-semantic-error)  }
select.selectStatus option[value=Required], .Required{   color: var(--color-semantic-warning)    }
select.selectStatus option[value=Waived], .Waived,
select.selectStatus option[value=Ordered], .Ordered{     color: var(--color-semantic-success)    }
select.selectStatus option[value=Received], .Received{   color: var(--color-semantic-success)    }
select.selectStatus option[value=OrderFail], .OrderFail{ color: var(--color-semantic-error)  }
select.selectStatus option[value=Reviewed], .Reviewed{   color: var(--color-semantic-information) }



span.reqSpan {	width: 90px;	text-overflow: ellipsis;	overflow: hidden;	white-space: nowrap;	display: inline-block;}
a.reqMoreLink {	position: relative;	top: -5px !important;	cursor: pointer;}


.shiftbuttons .btn{ min-width: auto !important; height: 32px; padding-top: 2px; margin-bottom: 8px;}


/*  */
.noRecordFound,
.dt-empty{position: relative;text-align: center;color: var(--color-500-gray); box-shadow: none !important;}
.noRecordFound::before,
.dt-empty::before{content: "";width: 40px;height: 40px;background: url('../images/no-data.svg');display: inline-block;text-align: center;margin: 0 auto;/* filter: grayscale(1); */background-size: contain;background-repeat: no-repeat;vertical-align: middle;margin-top: 4px;}


/* Loading spinner animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Loading Spinner - Match Swagger.io and Reference URL Style */
.loadingGIFDiv{
    position: relative;
    padding: 8px;
    color: var(--color-900-gray);
    font-size: var(--font-size-3x-small);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Phase 8: Loading Screen Loader - Fixed loader path and visibility */
.loadingGIFDiv:before{
    content: "";
    background: url('/images/loader.svg') no-repeat center center !important; /* Use absolute path from public - Phase 8 */
    animation: rotate 0.8s linear infinite;
    background-size: contain !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-block !important; /* Ensure visibility - Phase 8 */
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    flex-shrink: 0;
    opacity: 1 !important; /* Ensure visibility - Phase 8 */
    visibility: visible !important; /* Ensure visibility - Phase 8 */
    z-index: 1 !important; /* Ensure loader is visible - Phase 8 */
}

/* Swagger.io Loading Spinner Style */
.swagger-ui .loading-container .loading {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(137, 191, 4, 0.3);
    border-radius: 50%;
    border-top-color: #89bf04;
    animation: rotate 0.8s linear infinite;
    margin: 0 auto;
}

/* Ensure loader.svg is visible and properly sized */
.loadingGIFDiv:before,
.swagger-ui .loading-container .loading {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.Notes-Header .caseInfoHeader{ position: relative; top: 0; padding: 0; background: transparent; border-bottom: solid 2px var(--color-100-gray); margin-bottom: 16px;}
.Notes-Header .caseInfoHeader ul{ padding: 0; margin: 0;}

/*************Summary Layout Requirement card***********/
td.Received .select2-selection,
td.Reviewed .select2-selection{ background:var(--color-semantic-success-light)  !important ; border-color:var(--color-semantic-success) !important ; }

td.Ordered .select2-selection{   background:var(--color-semantic-information-light)  !important; border-color:var(--color-semantic-information) !important ; }

td.OrdeFail .select2-selection{  background:var(--color-semantic-error-light)  !important; border-color:var(--color-semantic-error) !important ; }

td.Cancel .select2-selection,
td.Cancelled .select2-selection,
td.Required .select2-selection{    background:var(--color-semantic-warning-light)  !important; border-color:var(--color-semantic-warning) !important ; }

td.PendMiss .select2-selection,
td.NotGoodO .select2-selection{  background:var(--color-semantic-pending-light)  !important; border-color:var(--color-semantic-pending) !important ; }

td.Waived .select2-selection{    background:var(--color-50-gray)  !important; border-color:var(--color-200-gray) !important ; }


/*  */
.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-bg-type: var(--color-white);}


.quesSummaryLabel b{ font-weight: var(--font-weight-medium);}


/*  */

span.Mandatory{ float: right; margin-left: 4px;}


/*  */

.modal-body{ padding: var(--padding-4xl);}
.modal-header,
.modal-footer{ padding: var(--padding-xl) var(--padding-4xl);}


/*  */
.styledList{margin: 0;padding: 0;}
.styledList li{list-style-type:none;display:block;position:relative;padding-left:16px; margin-bottom:8px;}
.styledList li:empty{ display: none;}
.styledList li:nth-last-child(1){ margin:0}
.styledList li a{padding:var(--p-2) 0}
.styledList li ul { padding:0; margin-bottom:8px;}
.styledList li ul li{margin-bottom:4px;}

.styledList li:after{position:absolute;content:"";left:0px;top: 5px;background: url('/icons/icons/zinnia-icons/images/arrow-md-right.svg') no-repeat;width: 16px;height: 12px;background-size: contain;left: 0;filter: grayscale(1);}

/*  */



.score-card{display: inline-block;width: 200px;margin-right: var(--margin-2xl);border: solid 2px var(--color-200-gray);padding: var(--padding-xl) var(--padding-2xl);border-radius: var(--radius-sm);font-weight: var(--font-weight-semibold);position: relative;padding-left: 60px;}
.score-card h3{font-size: var(--font-size-4x-large); margin: 0;}
.score-card h5{font-size: var(--font-size-x-small);margin: 0;}

.score-card:before{content:"";background: url('../images/red.png') no-repeat;width: 40px;height: 40px;display: inline-block;background-size: contain;position: absolute;left:16px;top: 17px;}

.score-card.high{   border-color: var(--color-semantic-error); background-color: var(--color-semantic-error-light); color:  var(--color-semantic-error);}
.score-card.high:before{background: url('../images/red.png') no-repeat;}


.score-card.medium, .score-card.mod{ border-color: var(--color-semantic-warning); background-color: var(--color-semantic-warning-light); color:  var(--color-semantic-warning);}
.score-card.medium:before, 
.score-card.mod:before{background: url('../images/yellow.png') no-repeat;}

.score-card.low{    border-color: var(--color-semantic-success); background-color: var(--color-semantic-success-light); color:  var(--color-semantic-success);}
.score-card.low:before{background: url('../images/green.png') no-repeat;}



.scoreLegend{ margin-top: var(--margin-3xl);}
.scoreLegend img{ height: 24px; width: auto; margin-right:var(--margin-sm); vertical-align: top;}


.listInfo{
    border-right: 1px solid #ccc;
    width: 144px;
}

.category {
    display: flex;
    margin-bottom: 4px;
}


.min-w{
    min-width: 140px;
}
/****Select2 inside modal****/
span.select2-container.select2-container--open {
    z-index: 10000;
}
.showbox{
    visibility: hidden;
}
.paddingTop {
    padding-top: 8px;
}

#password{
    position: relative;
}

#toggleEye{
    position: absolute;
    right: 14px;
    top: 29px;
}

label.reInsName{
    vertical-align: sub;
    margin-left: var(--margin-lg);
}
button.btn.btn-text i {
    vertical-align: middle;
}
.tabs-content-container .tab-content {display: none;}
.tabs-content-container .tab-content.active-content {display: block;}
.w-100{
    width: 100%;
}
.slidercaseInfoHeader li {
    list-style: none;
    display: inline;
    padding: 10px;
}
.slidercaseInfoHeader ul.case-info-list li span.caselinfoLabel{
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2x-small);
}
.slidercaseInfoHeader {
    border: 1px solid var(--color-200-gray);
   margin-bottom: 15px;
}
.slidercaseInfoHeader ul.case-info-list {
    padding-left: 10px;
}
.slidercaseInfoHeader {
    display: none;
}
.text-Red {
    color: #DB004F !important;
}

.text-Green {
    color: #007B5A !important;
}

/*Multi Role*/
    
.roleHeading{
    font-size: var(--font-size-6x-large);
    font-weight: var(--font-weight-semibold);
}
.text-center.mb-10 {
    margin-bottom: 10px;
}
.text-center.mb-20 {
    margin-bottom: 20px;
}
.icon-rolecard  .summaryCasesContol {
    display: block;
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-semibold);
    line-height: 14px;
    font-family: var(--body-font);    
    text-align: left;
    padding-left: 10px;
}
ul#caseSummaryView li.icon-rolecard {
    padding:var(--padding-2xl) var(--padding-4xl) var(--padding-2xl) 60px;
    position: relative;
    color: var(--color-secondary);
    border-left: solid 0 var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
    display: inline-block;
    text-decoration: none;
    width:270px;
    margin: var(--margin-lg) 0 0 var(--margin-lg);
    min-height: 60px;
    border: solid 2px var(--color-100-gray);
}
ul#caseSummaryView li.icon-rolecard {
    position: relative;
}
ul#caseSummaryView li.icon-rolecard:before {
    content: "";
    display: inline-block;
    position: absolute;
    right:15px;
    top:33%;
    padding-top: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
    background: url(../icons/zinnia-icons/images/chevron-right.svg) no-repeat; transition: ease 0.3s;
    background-position: center;
    background-size: cover !important; filter: grayscale(1);
}
ul#caseSummaryView li.icon-rolecard:hover:before {
    right:10px; filter: grayscale(0);

}

ul#caseSummaryView li.icon-rolecard .zi-user {
    display: inline-block;
    text-align: center;
}
span.userDiv {
    border: 2px solid var(--color-200-gray);
    padding: 8px;
    position: absolute;
    left: 7px;
    top: 7px;
    border-radius: 5px;
    background: var(--color-white); 
}

span.userDiv i { width: 32px; height: 32px;}
.summaryCaseLabel {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #6e6a6a;
    text-align: left;
    padding-left: 10px;
    display: block;
}
ul#caseSummaryView li.icon-rolecard:hover {
   border: 2px solid var(--color-secondary);
   background: var(--color-50-gray);
}

ul#caseSummaryView li.icon-rolecard:hover .userDiv i{ filter: sepia(1) saturate(21) hue-rotate(12deg) brightness(1.1) contrast(1); }
#caseSummaryView a{
    text-decoration: none;
}
.multiRoleCard{
    margin:100px 150px;
}
.card-footer{
    background-color: transparent !important;
}
.badge1 {
    background: var(--color-accent-two) !important;
    box-shadow: var(--elevation-dark-sm);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-3x-small);
    border: solid 2px var(--color-white);
    padding: 2px var(--padding-md);
    color: var(--color-white);
}
#MIBEcgCode .ecgCheckboxs {
    max-height: 244px;
    overflow-y: auto;
    padding-left: 4px;
}
#MIBEcgCode .ecgCheckboxs .form-check {
    display: inline-block;
    width: 120px;
}
input[type=text].generatedCodetextbox {
    padding: 40px !important;
    font-size: 24px;
    font-weight: 600 !important;
    text-align: center;
    /* background: var(--color-100-gray) !important; */
    border-color: var(--color-300-gray) !important;
}
#records .btn-chip:empty{display: none;}
#records h5 {
    font-weight: 600;
}




.iconButton,
.iconButton-sm{  border: solid 2px var(--color-secondary); border-radius: var(--radius-sm); background: var(--color-white); padding: 2px; display: inline-block; width: 32px; height: 32px;  }
.iconButton i,
.iconButton-sm i{ width:24px; height:24px;}
.iconButton:hover,
.iconButton-sm:hover{ background: var(--color-secondary-lightest)}
.iconButton[disabled],
.iconButton[disabled]:hover,
.iconButton.disabled,
.iconButton.disabled:hover,
.iconButton-sm[disabled],
.iconButton-sm[disabled]:hover,
.iconButton-sm.disabled,
.iconButton-sm.disabled:hover {opacity: 0.5;  background: var(--color-white);}

.iconButton-sm{width: 24px;height: 24px;padding: 0;line-height: 0;}
.iconButton-sm i{ width: 16px !important; height: 16px !important;}
.ai-icon-btn{border-color: var(--color-primary);}
.listBuilder .form-group{ margin: 0;}
.listButtons{ width: auto; display: flex; justify-content: center !important; flex-direction: column !important; padding-top:30px;}
.listButtons .iconButton{display: inline-block;margin-bottom: 8px;padding: 3px;}
.listButtons hr{margin: 8px 0px 15px 0px; border: solid 1px var(--color-200-gray);}
.listBox{display: block;}
.listBuilder .select-control[multiple] {height: 200px !important;}





/*icons for tabs**********/
#Top_Tabs .nav-item .nav-link{ position: relative;}
#Top_Tabs .nav-item .nav-link:before{content:"";background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');width: 20px;height: 20px;display: inline-block;background-size: cover;background-repeat: no-repeat;position: absolute;top: 10px;left: 8px; filter: grayscale(1);}
#Top_Tabs .nav-item .nav-link:hover:before,
#Top_Tabs .nav-item .nav-link:focus:before{ filter:grayscale(1) brightness(0.1);}

#Top_Tabs .nav-item .nav-link.active:before{ filter: grayscale(0);}
/*Close button*/
#Top_Tabs .nav-item.Close .nav-link,
#Top_Tabs .nav-item.Close_fr .nav-link{ padding-left: var(--padding-lg);}

#Top_Tabs .nav-item.Close .nav-link:before,
#Top_Tabs .nav-item.Close_fr .nav-link:before{ display: none;}

/*admin*/
#Top_Tabs .nav-item.Application .nav-link:before,
#Top_Tabs .nav-item.Application_fr .nav-link:before{               background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');   }
        
#Top_Tabs .nav-item.Company .nav-link:before,        
#Top_Tabs .nav-item.Company_fr .nav-link:before{                   background-image: url('/icons/icons/zinnia-icons/images/office-building.svg');  }
        
#Top_Tabs .nav-item.Plan .nav-link:before,        
#Top_Tabs .nav-item.Plan_fr .nav-link:before{                      background-image: url('/icons/icons/zinnia-icons/images/document-text.svg');    }
        
#Top_Tabs .nav-item.ProductSetup .nav-link:before,        
#Top_Tabs .nav-item.ProductSetup_fr .nav-link:before{              background-image: url('/icons/icons/zinnia-icons/images/settings.svg');         }
        
#Top_Tabs .nav-item.PlanCloning .nav-link:before,        
#Top_Tabs .nav-item.PlanCloning_fr .nav-link:before{               background-image: url('/icons/icons/zinnia-icons/images/duplicate.svg');        }

#Top_Tabs .nav-item.I18N .nav-link:before,
#Top_Tabs .nav-item.I18N_fr .nav-link:before{                      background-image: url('/icons/icons/zinnia-icons/images/globe.svg');            }

#Top_Tabs .nav-item.DeltaTool .nav-link:before,
#Top_Tabs .nav-item.DeltaTool_fr .nav-link:before{                 background-image: url('/icons/icons/zinnia-icons/images/lightning-bolt.svg');   }
/*Annuity*/
#Top_Tabs .nav-item.Details .nav-link:before,
#Top_Tabs .nav-item.Details_fr .nav-link:before{                   background-image: url('/icons/icons/zinnia-icons/images/document-text.svg');}

#Top_Tabs .nav-item.Documents .nav-link:before,
#Top_Tabs .nav-item.Documents_fr .nav-link:before{                 background-image: url('/icons/icons/zinnia-icons/images/document-duplicate.svg');}

#Top_Tabs .nav-item.Correspondence .nav-link:before,
#Top_Tabs .nav-item.Correspondence_fr .nav-link:before{            background-image: url('/icons/icons/zinnia-icons/images/mail.svg');}

#Top_Tabs .nav-item.Tracking .nav-link:before,
#Top_Tabs .nav-item.Tracking_fr .nav-link:before{                  background-image: url('/icons/icons/zinnia-icons/images/check-item.svg');}

#Top_Tabs .nav-item.ManualWI .nav-link:before,
#Top_Tabs .nav-item.ManualWI_fr .nav-link:before{                  background-image: url('/icons/icons/zinnia-icons/images/users.svg');}

#Top_Tabs .nav-item.SystemMessages .nav-link:before,
#Top_Tabs .nav-item.SystemMessages_fr .nav-link:before{            background-image: url('/icons/icons/zinnia-icons/images/desktop.svg');}

/*notes*/
#Top_Tabs .nav-item.notes .nav-link:before,
#Top_Tabs .nav-item.notes_fr .nav-link:before{                     background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');   }

#Top_Tabs .nav-item.drafts .nav-link:before,
#Top_Tabs .nav-item.drafts_fr .nav-link:before{                    background-image: url('/icons/icons/zinnia-icons/images/document-duplicate.svg');}

/*Data Entry*/
#Top_Tabs .nav-item.Details .nav-link:before,
#Top_Tabs .nav-item.Details_fr .nav-link:before{                   background-image: url('/icons/icons/zinnia-icons/images/document-text.svg');}

#Top_Tabs .nav-item.ApplicationDetails .nav-link:before,
#Top_Tabs .nav-item.ApplicationDetails_fr .nav-link:before{        background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');}

/*Adhoc Reports*/
#Top_Tabs .nav-item.ManageReports .nav-link:before,
#Top_Tabs .nav-item.ManageReports_fr .nav-link:before{             background-image: url('/icons/icons/zinnia-icons/images/clipboard-list.svg');}

#Top_Tabs .nav-item.DesignReport .nav-link:before,
#Top_Tabs .nav-item.DesignReport_fr .nav-link:before{              background-image: url('/icons/icons/zinnia-icons/images/view-grid-add.svg');}

#Top_Tabs .nav-item.ReportsAudit .nav-link:before,
#Top_Tabs .nav-item.ReportsAudit_fr .nav-link:before{              background-image: url('/icons/icons/zinnia-icons/images/collection.svg');}



/**** Notes Redesign****/
.summaryNotes{ padding: 104px 60px 32px 20px !important}
.notes-detail { padding: 3rem 0;}
#notes {margin-bottom: 1rem;margin-top: var(--margin-sm);}
.notes-Panel{ background:#ededed;}
.notes-item {border-left: 2px solid var(--color-100-gray);position: relative;padding: 1px 0px 16px 22px;margin-left: 140px;/* min-height: 108px; */}
.notes-item:last-child {  padding-bottom: 4rem;}
.notes-item .notes-date { position: absolute;    left: -145px;    width: 110px;    text-align: right;    margin-bottom: 8px;    color: #676767;    font-weight: 500;    font-size: 14px;  }
.notes-item .notes-date p{ margin-bottom: 0;}
.notes-item .notes-date p small{ font-size: 12px; display: block;}
.notes-item .notes-date i{ width: 16px; height: 16px; filter: grayscale(1);}
.notes-item .notes-content {  margin-top: 4px;}
.notes-item .item-header{color:#212121;font-weight: 500;font-size: 14px;min-height:22px;margin: 0;}
.notes-item .item-header span{ font-weight: var(--font-weight-semibold); }
.notes-item .notes-content .item-notes {min-height: 22px;display: block;color: #212121;font-size: 14px;padding: 8px 42px 8px 12px;background-color: #F8F8F8;border-radius: 4px;font-weight: 500;line-height: 22px;position: relative;margin: 0;}
.notes-item .notes-icon {line-height: 20px;position: absolute;left: -17px;top: -3px;width: 30px;height: 30px;text-align: center;border-radius: 4px;color: #d6d6d6;border: solid 4px var(--color-white);border-radius: var(--radius-lg);}
.notes-item .notes-icon i{    width:16px;    height: 16px; filter: brightness(0) invert(1);;}
.notes-item .notes-icon.status-notes {    background-color: #37BCC2;}
.notes-item .notes-icon.status-system {  background-color: #D47ACC;  }

.item-notes .icon-block{position: absolute; right:0px; opacity: 0; transition: ease 0.3s;}
.item-notes:hover .icon-block{position: absolute; right:8px; opacity: 1;}
.item-notes .icon-block i{background-size:contain !important;width: 20px;height: 20px;cursor: pointer;}
.item-notes .icon-block .iconButton-sm{ margin-right: 4px ;}

.attachment-list .attachment a{margin-right: var(--margin-2xl);margin-top: var(--margin-sm) !important;display: inline-block;}

.attachmentsSection #attachFilesLink{color: var(--color-secondary);cursor: pointer;/* border-right: solid 2px var(--color-100-gray); */border-radius: 0;padding-right: 0;/* margin-right: var(--margin-2xl) !important; */white-space: nowrap;margin: 0;}
#attachFilesLink i{ margin-right: 4px;}
.attachment a i{    width: 14px;    height: 14px;}
.caseInfoHeader.notes{ position:inherit !important ; padding: 0;} 
.caseInfoHeader.notes ul{ margin: 0; padding: 0;}
.Notes-container{    padding:var(--padding-lg) var(--padding-3xl); background: var(--color-white);}

.notesAttachments { margin-left: 16px; padding-left: 16px; border-left: solid 2px var(--color-100-gray);}

/**/
.btn-group.Groupbuttons .btn{    font-size: 14px;}
.btn-group.Groupbuttons>.btn-group:not(:first-child),.btn-group.Groupbuttons>:not(.btn-check:first-child)+.btn{    border-radius: 0; }
.Groupbuttons .btn-check:checked+.btn,.Groupbuttons.btn.active,.Groupbuttons.btn:first-child:active{
    color: var(--bs-btn-active-color);
    background-color:  #00628B;
    border-color: #00628B;
    border-radius: 12px 0 0 12px;
}

.btn-group.Groupbuttons>.btn:nth-child(2){
    border-radius: 0 12px 12px 0 !important;
    
}
.btn-group.Groupbuttons>.btn:nth-child(2){border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;}
.btn-group.Groupbuttons>.btn:last-child{
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.searchGroup .input-group-text{
    background: transparent;
    padding: 4px 4px;
    cursor: pointer;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.custHeadingforEndorsementCard{
    padding:21px var(--padding-3xl) 17px !important;
}


.customBodyColor{
    background-color: var(--color-white);
}

.card.card-transparent.noBoxShadow {
       box-shadow: none !important;
}
.nonMultiSelect{
    background-image: none;
    height: 270px !important;
    padding-right: 15px !important;
}

.nonMultiSelect option{
    padding: 5px !important;
}

.sessionCardMessage  { text-align: center; display: block;}


/*#attachfileid .form-check-inline{ background: red;}*/


.notes-popup{ background: var(--color-100-gray) !important}
.card.card-transparent.notes-popup .card-header{ background: var(--color-white) !important}
.card.card-transparent > .card-body.popup-body{ padding-top: var(--padding-xl);}
.popup-body .caseInfoHeader ul li p { margin-right: 0;}
.popup-body .caseInfoHeader ul li p .caselinfoLabel{ padding: 0;}
.popup-body ul#Top_Tabs{padding:var(--padding-lg) var(--padding-3xl) 0 var(--padding-3xl);}




/****session pages******/
.sessionContainer{ text-align: center; margin-top:100px;}
.sessionContainer .sessionIcon i{ width:100px; height:100px; margin-bottom:var(--margin-xl); }
.sessionContainer h3{ font-size: var(--font-size-5x-large); font-weight: var(--font-weight-semibold);}
.sessionContainer .sessionCardMessage{ font-size:var(--font-size-large); font-weight: var(--font-weight-semibold); margin-bottom: var(--margin-4xl);}
.viewReportCodes{
    width: 85% !important;
}
.recordMibCodes{
    width: 80% !important;
}

/* Your CSS styles for score-zero = 0 */
.score-zero::after{content:""; background: url('../images/green.png')no-repeat center; background-size: 16px auto; width: 16px;height: 16px; display: inline-block;position: relative;top: 2px; right: -4px;}
	/* Your CSS styles for score-five = 5 */	
.score-five::after{content:""; background: url('../images/yellow.png')no-repeat center; background-size: 16px auto; width: 16px;height: 16px;display: inline-block;position: relative;top: 2px; right: -4px;}
/* Your CSS styles for score-ten = 10 */
.score-ten::after{content:""; background: url('../images/red.png')no-repeat center; background-size: 16px auto; width: 16px;height: 16px;display: inline-block;position: relative;top: 2px; right: -4px;}



.CardSubSection .card-header h3.card-title{ font-size: 16px !important;}



/************/
.mce-tinymce.mce-container.mce-panel{ border-radius: var(--radius-md) !important; border: solid 2px var(--color-200-gray) !important; overflow: hidden;}
.mce-container.mce-container{ border-radius: 0 !important;}


/***Chips***********/
.chip {
    border: solid 2px var(--color-200-gray);
    display: inline-block;
    border-radius: var(--radius-2xl);
    /* padding: 5px var(--padding-xl); */
    line-height: normal;
    font-size: 12px;
    padding: 1px 11px 1px 12px;
    /* height: 26px; */
    font-weight: normal;
    position: relative;
    margin: 0 4px 4px 0;
    font-family: 'Poppins';
}
.chip:has(a.remove){padding-right: 32px;}
.chip:has(a.remove) a.remove{position: absolute;right: 8px;width: 20px;height: 20px;top: 1px;padding-top: 0;text-align: center;border-radius: 100px;border: solid 2px transparent;line-height: 0;}
.chip:has(a.remove) a.remove i{width: 16px;height: 16px;}
.chip:has(a.remove) a.remove:hover{border-color: var(--color-secondary);}
.control-width-50 {width: 50px;}
.ai-icon-bar-slider {
   
    height: 150px;
 
}
.ai-list-item{
    border: 1px solid #ff8200;
}
.ai-link{
    background-color: #fffbf9;
}
.minWidth250{min-width: 250px !important;}
.hand-cursor {
  cursor:pointer !important;
}


/******AI screens CSS need to clean*************/
.ai-icon-bar-slider {
   
    height: 150px;
 
}
.ai-list-item{
    border: 1px solid #ff8200;
}
.ai-link{
    background-color: #fffbf9;
}
.aiOffcanvas{
    background: linear-gradient(114deg, var(--white) 0%, var(--primary-100) 50%, var(--white) 100%);
    background-attachment: fixed;
	    margin: 0;
    background-image: url(../images/AIBGgraphic.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.aimainHeader .card-title {
    font-size: var(--font-size-5x-large);
    line-height: 44px;
    font-weight: var(--font-weight-medium);
    margin: 0;
    font-family: var(--heading-font);
}
.flex-fill.aicaseInfoHeader {
    padding: 0px 7px;
}
.aicaseInfoHeader ul.aicaseInfoList {
    padding: 0;
    width: 100%;
    overflow: auto;
}
.aicaseInfoHeader ul li {
    list-style: none;
    display: inline-block;
    padding: 4px 8px;
    border-right: solid 1px var(--gray-200);
    vertical-align: top;
    margin-right: 40px;
    min-height: 40px;
}
.aicaseInfoHeader ul li:nth-child(1) {
    padding-left: 0;
}

.flex-fill.aicaseInfoHeader {
    padding: 0px 7px;
}
.aicaseInfoHeader ul.aicaseInfoList {padding: 0;width: 100%;overflow: auto;}
.aicaseInfoHeader ul.aicaseInfoList li span.aicaselinfoLabel,
.aicaseInfoHeader ul.aicaseInfoList li span.caselinfoText{display: block;}

.aicaseInfoHeader ul.aicaseInfoList li span.aicaselinfoLabel{ font-weight:var(--font-weight-semibold); font-size: var(--font-size-x-small);}
.aicaseInfoHeader ul.aicaseInfoList li span.caselinfoText{ font-size: var(--font-size-x-large);font-weight:var(--font-weight-semibold);}

/*.aicaseInfoHeader ul:hover{overflow-x: auto;}*/
.aicaseInfoHeader ul li {
    list-style: none;
    display: inline-block;
    padding: 4px 8px;
    border-right: solid 1px var(--gray-200);
    vertical-align: top;
    margin-right: 40px;
    min-height: 40px;
}

.aicaseInfoHeader ul li:nth-last-child(1) {
    border: 0;
}

.aicaseInfoHeader ul li:nth-child(1) {
    padding-left: 0 ;
}

.aicaseInfoHeader ul li p {
    margin-bottom: 0;
    font-size: var(--fs-sm);
    line-height: 14px;
    /* height: 16px; */
    display: inline-block;
    vertical-align: top;
    margin-right: var(--margin-4xl);
}

.aicaseInfoHeader ul li p .aicaselinfoLabel {
    color: var(--color-900-gray);
    font-size: var(--font-size-x-small);
    display: block;
    padding: 5px 0;
}

.aicaseInfoHeader ul li p .caselinfoText {
    font-weight: var(--font-weight-semibold);
    color: var(--color-900-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    white-space: nowrap;
    display: block;
    padding: 6px 0;
}
#gaugeContainer {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
.riskLevel .card-title {
    text-align: center !important;
}
.w-90{width: 95% !important;}

.ai.btn-select {
    padding: 16px;
    border-radius: 8px !important;
    background-color: #ffffff;
    color: #00628B;
    box-shadow: 0,2,4,0 #000000;
    border: 1px solid #c4c4c4;
    cursor: pointer;
}
.ai.btn-upload {
    padding: 17px;
    margin-left: 10px;
    border-radius: 8px !important;
    background-color: #ffffff;
    color: #00628B;
    border: 1px solid #c4c4c4;
    width: 15rem;
    cursor: pointer;
}
 .ai.dropdown-toggle:after{
   display: none !important;
 }
 .ai.dropdown-item{color: var(--color-white);}
  .gradient-border-box {
      position: relative;
     width: 100%;
      height: 500px;
      background-color: transparent;
      border-radius: 12px;
      z-index: 0;
    padding: 16px;
    }

    .gradient-border-box::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(270deg, #ff0080, #7928ca, #2afadf, #ff0080);
      background-size: 400% 400%;
      border-radius: 14px;
      z-index: -1;
      animation: animate-border 6s linear infinite;

      /* Show only border via mask */
      mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: destination-out;
      padding: 2px;
    }

    @keyframes animate-border {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes borderAnimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    .gradient-border-box .card-body{
        height: 100%;
        overflow-y: auto;
    }
    #docDiv{
        margin-left: 8px;
    }
    .divPg .vr{vertical-align: middle;}
 
#resultsList{
    margin: 0;
    padding: 0;
}
#resultsList .iconButton-sm{
   line-height: initial;
    margin-right: 5px;
    text-align: center;
    margin-bottom: 6px;
    vertical-align: middle;
}
h3.aiSectionTitle{
    font-size: var(--font-size-large) !important;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
    margin-top: 16px;
}
p#extractiveText h3:first-child {
    margin-top: 0px;
}

p#extractiveText li {
    padding: 0;
    margin: 0;
    padding-left: 12px;
    position: relative;
    display: block;
    margin-left: 16px;
}

p#extractiveText li:before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-800-gray);
    display: inline-block;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 7px;
}
p#abstractText:empty,p#extractiveText:empty {
    display: none;
}
div#summarizeDiv,div#docDiv {
    transition: width 3s ease;
}
.hideToggleBTnHolder button{
    border-radius: var(--radius-max);
    position: absolute;
    vertical-align: middle;
    top: 50%;
    right: 0px;
    padding: 0px;
}
.hideToggleBTnHolder button i{
    width: 18px;
    height: 17px;
    position: relative;
    top: -1px;
}
#left #TPPQuesOptimizationForm .question-row .form-check{vertical-align: middle;
    float: left;} 

#left #TPPQuesOptimizationForm .question-row .form-check-label{display: block;margin-top: 2px;}


.input-group .btn{
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
#Financial #Yes{color:var(--color-semantic-success)}
#Financial #No{color:var(--color-semantic-error)}
.facTableContainer td,#requirements_dashboard td{position: relative;}

/****
** AI CSS
**/
button.chatIcon {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 16px;
    color: #fff;
    right: 32px;
    background: var(--color-gradient-linear);
    border:solid 2px #fff;
    box-shadow: var(--elevation-dark-lg);
  background-size: 300% 100%;
  animation: moveGradient 3s linear infinite;
  transition: opacity 0.3s;
}

button.chatIcon i.zi.zi-robot {
    filter: brightness(0) invert(1);
}
button.chatIcon i {
  animation: bounceLoop 2.6s ease-in-out infinite;
}

@keyframes bounceLoop {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(-6px); }
  20%  { transform: translateY(0); }
  30%  { transform: translateY(-4px); }
  40%  { transform: translateY(0); }
  100% { transform: translateY(0); } /* 60% to 100% = 1.6s pause */
}

.hr-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: #555;
  font-weight: 600;
  font-size: 14px;
}

.hr-with-text::before,
.hr-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
  margin: 0 10px;
}

button#send-btn,button#send-btn_Insight {
    position: absolute;
    right: 7px;
    border: 0px;
    top: 16px;
    background: transparent;
    z-index: 10;
}
input#chat-input,input#chat-input_Insight {
    border-radius: var(--radius-2xl);
    height: 64px !important;
    padding-left: 18px !important;
}
.input-chat-container {
    position: fixed;
    left: 15px;
    right: 15px;
    width: 98%;
    bottom: 60px;
    background: #fff;

}
#chatContainer{padding-bottom: 72px;}
.message {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 15px;
  animation: slideIn 0.3s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.message.user {
  align-self: flex-end;
  background-color: #daf1ff;
}

.message.bot {
  align-self: flex-start;
  background-color: #f1f1f1;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#typing-indicator,#typing-indicator_Insight {
  font-style: italic;
  color: #777;
  opacity: 0;
  animation: typefadeIn 0.3s forwards;
  margin-bottom: 10px;
}

@keyframes typefadeIn {
  to {
    opacity: 1;
  }
}
.chat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
   scroll-behavior: smooth;
}

.chat-input-area {
  display: flex;
      /* position: absolute;
    bottom: 16px;
    left: 40px;
    right: 40px; */
}
.feedback-buttons {
    margin-top: 5px;
  }
  
  .feedback-buttons button {
    margin-right: 5px;
    padding: 2px 6px;
    font-size: 16px;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid var(--color-200-gray);
    border-radius: 4px;
  }
  .feedback-buttons button i{    filter: grayscale(0.9) brightness(1.8);}
  .feedback-buttons button.selected i{
    filter: none;
  }
  .feedback-buttons button.selected{ border-color: var(--color-secondary);}
#docDiv,#summarizeDiv  {
  transition: all 0.5s linear;
}

#summarizeDiv {
  transform: translateX(0);
}
.expandedResponseContainer {
  width: 100% !important;
  transform: translateX(0);
}

.hiddenPdfContainer {
  width: 0 !important;
  opacity: 0;
  pointer-events: none;
  display: none !important;
}


.bot-suggestions.cardQuery .btn-chip {
    display: inline-block;
    border-radius: 16px;
    height: auto;
    padding: 4px 8px 4px 24px !important;
    margin-bottom: 8px;
    position: relative;
}
.bot-suggestions .btn-close {
    position: absolute;
    right: 10px;
}

.bot-suggestions {
    position: relative;
    padding-right: 45px !important;
}
span.suggestionsIcon{margin-right: 8px;}
span.suggestionsIcon i {
    filter: sepia(1) saturate(21) hue-rotate(12deg) brightness(1.1) contrast(1);
    animation: bounceLoop 2.6s ease-in-out infinite;
}
.bot-suggestions.cardQuery .btn-chip:before {content: "";position: absolute;width: 16px;height: 16px;background-image: url('/icons/icons/zinnia-icons/images/Vector.svg');background-repeat: no-repeat;background-size: 16px;border-radius: 0 var(--radius-sm) var(--radius-sm) 0;filter: sepia(1) saturate(21) hue-rotate(12deg) brightness(1.1) contrast(1);left: 6px;background-position: center;top: 4px;}

 .gauge {
      width: 300px;
      height: 180px;
      position: relative;
      margin: 16px auto;
      margin-top: 0px;
      text-align: center;
    }


    .needle {
      transform-origin: 100px 120px;
      transition: transform 0.5s ease-out;
    }
.riskBg{background-color: #f5f5f5 !important;}
    .labelinPie {
    margin-top: 36px;
    font-size: 16px;
    text-align: center;
    }

    text.zone-label {
      font-size: 8px;
      font-family: Arial, sans-serif;
      font-weight: bold;
      fill: white;
    }
    select#tempType {
    width: 200px !important;
    margin: 0px 15px;
    height: 60px !important;
    font-weight: 700 !important;
    color: #00628B !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 8px !important;
}
.ai-warning {
    font-size: 12px;
    padding: 4px 24px;
}
.ai-warning:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-size: contain;
    top: 7px;
}
h3.ai-resp-title {
    font-size: 16px;
    font-weight: 600;
}
ul.risk-summary-header-list {
    background: transparent;
    font-size: var(--body-font);
    font-weight: normal;
    margin-top: 8px;
}
.risk-summary-header-list li {
    font-size: 13px;
    padding: 0px 16px 0px 0px;
    background: transparent;
    border: 0;
    display: block;
}
span.isuredType {
    font-size: 13px;
}
/*******Only for AI scrrens********/
.fw-600{
    font-weight: var(--font-weight-semibold);
}
.financialFontSize{
    font-size: var(--font-size-x-large);
}
.card.card-transparent.TableBorderMilds {
    margin-top: 75px;
}
.reqcaseInfoHeader.caseInfoHeader {
    background: var(--color-50-gray);
    border-bottom: 1px solid var(--color-100-gray);
    top: 59px;
}
.reqcaseInfoHeaderHolder {
    margin-bottom: 54px;
}

#EvidenceSummary_body .text-Red {
	color:#DB004F;
}
#EvidenceSummary_body .text-Green {
	/*color:#608800;*/
	color: #007B5A !important;
}


.header-title
{
 font-size: var(--font-size-2x-large);
font-weight: var(--font-weight-semibold);
}

.overflowXexceed{overflow-x: hidden;}
#abstractText br+br {
    display: none;
}
#abstractText b{display: block}
/**New calculator dashboard***********/
.calCard{display: inline-block;margin:0 var(--margin-xl) var(--margin-xl) 0;position: relative;}
.calCard .calcButton {border: solid 2px var(--color-200-gray);background: var(--color-white);border-radius: var(--radius-md);padding: 2px 12px 2px 31px;position: relative;transition: ease 0.3s;width: 200px;text-align: left;line-height: 16px;height: 42px;vertical-align: bottom;font-size: 13px;}

.calCard:hover .calcButton,
.calCard.active .calcButton{border-color: var(--color-secondary);transform: translateY(-4px);box-shadow: var(--elevation-light-xl);z-index: 1;}
.calCard.executed .calcButton{padding-right: 33px;background: var(--color-semantic-information-light); /*border-color: var(--color-secondary);*/} 

.calCard .calcButton:before, .calCard .calcButton:after{position: absolute;content:"";width: 32px;height: 32px;display: inline-block;background: url('/icons/icons/zinnia-icons/images/calculator.svg') no-repeat center / contain !important;left: 0;top: 3px;}

.calCard.executed .calcButton:after{right: 7px;top: 8px;left: auto;background: url('/icons/icons/zinnia-icons/images/circle-checkmark.svg') no-repeat center / contain !important;width: 24px;height: 24px;}

.calCard .calcButton:before{filter: var(--gray-500); opacity: 0.7;}
.calCard.executed .calcButton:before{filter: none; opacity: 1;}
.calCard.executed .calcButton:after{ display: block;}
.calCard .calcButton:after{ display: none;}

.calCard.active .calcButton{ box-shadow: var(--elevation-light-sm); transform: translateY(0px);}
.calCard:hover .calcButton:before,
.calCard.active .calcButton:before{ filter: none; opacity: 1; }

.calCard .calData{ opacity: 0; display: none;}
/*.calCard.executed .calData{ transition: ease 0.3s; opacity: 0; position: absolute;height: 120px; left: 0;right: 0; transform: translateY(-10px); transition: ease 0.3s; }
.calCard.executed:hover .calData{background: var(--color-white);z-index: 2;left: 0;right: 0;border: solid 2px var(--color-secondary);border-radius: var(--radius-xl);padding: var(--padding-xl); opacity: 1; display: block; transform: translateY(-80px); opacity: 1; box-shadow: var(--elevation-light-xl);z-index: 1;}*/

.calCardsHolder{margin-bottom: var(--margin-xl);}

/* to chagne the disabled placeholder text color as per the standard: Start  */
input:disabled::-webkit-input-placeholder{
    color: var(--color-300-gray) !important;
}

input:disabled:-ms-input-placeholder {
    color: var(--color-300-gray) !important;
}

input:disabled::-moz-placeholder{
    color: var(--color-300-gray) !important;
    opacity: 1;
}

input:disabled::placeholder {
    color: var(--color-300-gray) !important;
    opacity: 1;
}
/* to chagne the disabled placeholder text color as per the standard:: End  */
#totalfAmount{
    margin-bottom: 28px;
}

@media print {
  header.main-header, .caseInfoHeader {
    position: static !important;
  }
}

.colorWhite{
    background-color: #fff !important;
}

body.mar0.form-template
 {
    background-color: #fff;
}

/* Swagger UI Overrides - Prevent global styles from affecting Swagger UI */
/* Swagger UI specific overrides - Match FastAPI docs exactly */
.rightContent .swagger-ui-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: calc(100vh - 96px) !important;
    background: rgb(237, 237, 237) !important;
    box-sizing: border-box !important;
}

/* Remove padding from rightContent when Swagger UI is present */
.rightContent:has(.swagger-ui-wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Override card styles when inside Swagger UI wrapper */
.swagger-ui-wrapper .card,
.swagger-ui-wrapper .card-body,
.swagger-ui-wrapper .card-primary {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* API Builder Page - Match Reference Styling */
.rightContent .api-builder-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    background: rgb(237, 237, 237);
    min-height: calc(100vh - 96px);
}

/* API Builder Tabs - Match Reference */
.rightContent .border-b.border-gray-200 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: sticky;
    top: 96px;
    background: white;
    z-index: 10;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.rightContent .border-b.border-gray-200 button {
    padding: 12px 24px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: 4px 4px 0 0;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--color-600-gray);
    position: relative;
}

.rightContent .border-b.border-gray-200 button:hover {
    background: var(--color-100-gray);
    color: var(--color-900-gray);
}

.rightContent .border-b.border-gray-200 button.btn-primary {
    background: transparent;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.rightContent .border-b.border-gray-200 button.btn-outline-secondary {
    background: transparent;
    color: var(--color-600-gray);
    border: none;
}

.rightContent .border-b.border-gray-200 button.btn-outline-secondary:hover {
    background: var(--color-100-gray);
    color: var(--color-900-gray);
}

/* API Builder Cards - Match Reference */
.rightContent .card.card-primary {
    background: white;
    border: 1px solid var(--color-200-gray);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-light-sm);
    margin-bottom: 24px;
}

.rightContent .card.card-primary .card-body {
    padding: 24px;
}

.rightContent .card.card-primary .card-title {
    font-family: var(--heading-font);
    font-weight: var(--font-weight-semibold);
    color: var(--color-900-gray);
    margin-bottom: 16px;
}

/* Template Cards - Match Reference */
.rightContent .card.h-100 {
    background: white;
    border: 2px solid var(--color-200-gray);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    box-shadow: var(--elevation-light-sm);
}

.rightContent .card.h-100:hover {
    border-color: var(--color-primary);
    box-shadow: var(--elevation-dark-xs);
    transform: translateY(-2px);
}

/* Form Elements - Match Reference */
.rightContent .form-control,
.rightContent .form-select {
    border: 2px solid var(--color-200-gray);
    border-radius: var(--radius-md);
    padding: var(--padding-sm) var(--padding-lg);
    font-size: var(--font-size-sm);
    transition: all 0.2s;
}

.rightContent .form-control:focus,
.rightContent .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.1);
    outline: none;
}

/* Buttons - Match Reference */
.rightContent .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    font-weight: var(--font-weight-semibold);
    padding: var(--padding-sm) var(--padding-2xl);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.rightContent .btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--elevation-dark-xs);
}

.rightContent .btn-secondary,
.rightContent .btn-outline-secondary {
    border: 2px solid var(--color-200-gray);
    color: var(--color-900-gray);
    background: white;
    font-weight: var(--font-weight-medium);
    padding: var(--padding-sm) var(--padding-2xl);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.rightContent .btn-secondary:hover,
.rightContent .btn-outline-secondary:hover {
    background: var(--color-100-gray);
    border-color: var(--color-300-gray);
}

/* Code Display - Match Reference */
.rightContent pre,
.rightContent code {
    background: #2c3e50;
    color: #ecf0f1;
    border-radius: var(--radius-md);
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    overflow-x: auto;
}

.rightContent .font-monospace {
    font-family: 'Courier New', monospace;
}

/* Loading States - Match Reference */
.rightContent .loading,
.rightContent .spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 117, 0, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: rotate 0.8s linear infinite;
}

/* Grid Layouts - Match Reference */
.rightContent .row.g-4 {
    margin-left: -12px;
    margin-right: -12px;
}

.rightContent .row.g-4 > * {
    padding-left: 12px;
    padding-right: 12px;
}

/* Endpoint List - Match Reference */
.rightContent .swagger-endpoint-list {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
}

.rightContent .swagger-endpoint-item {
    background: white;
    border: 1px solid var(--color-200-gray);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    transition: all 0.2s;
}

.rightContent .swagger-endpoint-item:hover {
    box-shadow: var(--elevation-light-md);
}

.rightContent .swagger-endpoint-item.expanded {
    box-shadow: var(--elevation-light-lg);
}

/* Testing Components - Match Reference */
.rightContent .card .card-body {
    background: white;
    padding: 24px;
}

.rightContent .card .card-title {
    font-family: var(--heading-font);
    font-weight: var(--font-weight-semibold);
    color: var(--color-900-gray);
    margin-bottom: 16px;
}

/* Performance Test Results - Match Reference */
.rightContent .bg-light {
    background: var(--color-100-gray) !important;
}

.rightContent .bg-success {
    background: var(--color-semantic-success-light) !important;
}

.rightContent .bg-danger {
    background: var(--color-semantic-error-light) !important;
}

/* Modal Styles - Match Reference */
.rightContent .modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--elevation-dark-lg);
}

.rightContent .modal-header {
    border-bottom: 1px solid var(--color-200-gray);
    padding: 20px 24px;
}

.rightContent .modal-body {
    padding: 24px;
}

.rightContent .modal-footer {
    border-top: 1px solid var(--color-200-gray);
    padding: 20px 24px;
}

/* Badge Styles - Match Reference */
.rightContent .badge {
    font-size: var(--font-size-3x-small);
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    font-weight: var(--font-weight-medium);
}

/* Ensure consistent spacing */
.rightContent .space-y-6 > * + * {
    margin-top: 24px;
}

.rightContent .space-y-4 > * + * {
    margin-top: 16px;
}

/* Tab Content Container */
.rightContent .mt-6 {
    background: transparent;
    padding: 0;
    margin-top: 24px;
}

/* Ensure API Builder page has proper background */
/* API Builder Page - Full width white background - NO gap */
.rightContent:has(.api-builder-page),
.rightContent:has(.api-builder-container),
.rightContent:has([class*="api-builder"]) {
    background: #FFFFFF !important; /* White background - no grey */
    min-height: calc(100vh - 96px) !important;
    padding-top: 0 !important; /* No padding-top - page handles its own spacing */
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: clamp(200px, 20vw, 280px) !important; /* Match sidebar width exactly - NO gap */
    width: calc(100% - clamp(200px, 20vw, 280px)) !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important;
}

/* API Builder Page - Collapsed sidebar state */
.content-wrapper.collapsed .rightContent:has(.api-builder-page),
.content-wrapper.collapsed .rightContent:has(.api-builder-container),
.content-wrapper.collapsed .rightContent:has([class*="api-builder"]) {
    margin-left: 60px !important; /* Collapsed sidebar width - NO gap */
    width: calc(100% - 60px) !important;
    margin-right: 0 !important; /* No margin-right needed */
    padding-top: 0 !important; /* No padding-top - page handles its own spacing */
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* API Builder Tab Styles - Improved layout and spacing */
.api-builder-page .border-b {
    border-bottom: 2px solid var(--color-200-gray) !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
}

.api-builder-page nav.d-flex {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

.api-builder-page .btn-sm {
    padding: 8px 16px !important;
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-medium) !important;
    border-radius: 4px 4px 0 0 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.api-builder-page .btn-sm:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.api-builder-page .btn-sm.btn-primary {
    border-bottom: 2px solid var(--color-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.api-builder-page .btn-sm.btn-outline-secondary {
    border-bottom: 2px solid transparent !important;
}

/* API Builder Tab Content - Improved spacing */
.api-builder-page .mt-6 {
    margin-top: 24px !important;
    padding: 0 !important;
}

/* Templates Tab - Grid layout improvements */
.api-builder-page .row.g-4 {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

.api-builder-page .col-md-6,
.api-builder-page .col-lg-3 {
    padding: 0 12px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Endpoint Builder Tab - Form improvements */
.api-builder-page .card.card-primary {
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--elevation-light-sm) !important;
    background: var(--color-white) !important;
}

.api-builder-page .card-body {
    padding: 24px !important;
}

/* Schema Generator Tab - Improved layout */
.api-builder-page .card-title {
    font-family: var(--heading-font) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-900-gray) !important;
    margin-bottom: 16px !important;
}

/* Endpoint Builder Form - World-class UI/UX */
.api-builder-page .card.card-primary {
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background: var(--color-white) !important;
    transition: box-shadow 0.3s ease !important;
}

.api-builder-page .card.card-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.api-builder-page .card-body {
    padding: 32px !important;
}

.api-builder-page .form-label {
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-900-gray) !important;
    margin-bottom: 8px !important;
    font-size: var(--font-size-small) !important;
}

.api-builder-page .form-control,
.api-builder-page .form-select {
    border: 1px solid var(--color-300-gray) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: var(--font-size-base) !important;
    transition: all 0.2s ease !important;
}

.api-builder-page .form-control:focus,
.api-builder-page .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.1) !important;
    outline: none !important;
}

.api-builder-page .btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    padding: 10px 24px !important;
    font-weight: var(--font-weight-semibold) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}

.api-builder-page .btn-primary:hover {
    background: #e66800 !important;
    border-color: #e66800 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 117, 0, 0.3) !important;
}

.api-builder-page .btn-outline-secondary {
    border: 1px solid var(--color-300-gray) !important;
    color: var(--color-700-gray) !important;
    padding: 10px 24px !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}

.api-builder-page .btn-outline-secondary:hover {
    background: var(--color-100-gray) !important;
    border-color: var(--color-400-gray) !important;
    color: var(--color-900-gray) !important;
}

/* Schema Generator - File Upload Area */
.api-builder-page .border-2.border-dashed {
    border: 2px dashed var(--color-300-gray) !important;
    border-radius: var(--radius-lg) !important;
    padding: 48px 24px !important;
    transition: all 0.3s ease !important;
    background: var(--color-50-gray) !important;
}

.api-builder-page .border-2.border-dashed:hover {
    border-color: var(--color-primary) !important;
    background: rgba(255, 117, 0, 0.05) !important;
}

/* Code Display - JSON Schema */
.api-builder-page pre,
.api-builder-page code {
    font-family: 'Courier New', monospace !important;
    font-size: var(--font-size-small) !important;
    background: var(--color-50-gray) !important;
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px !important;
    overflow-x: auto !important;
}

.api-builder-page pre {
    margin: 16px 0 !important;
    line-height: 1.6 !important;
}

/* Testing Tools Tab */
.api-builder-page .testing-tools {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
}

/* Export Tab */
.api-builder-page .export-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.api-builder-page .export-option-card {
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.api-builder-page .export-option-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Summary Dashboard Slide Panel Styles */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Phase 5: Fix View Summary Slide Panel - Match reference positioning and styling */
.summary-slide-panel {
    position: fixed !important; /* Phase 5 */
    top: 0px !important; /* Phase 5 - Full height from top */
    right: 0px !important; /* Phase 5 */
    bottom: 0px !important; /* Phase 5 */
    left: 480px !important; /* Phase 5 - When open, adjust based on sidebar width (232px expanded + 8px gap = 240px, but reference shows 480px) */
    width: calc(100vw - 480px) !important; /* Phase 5 */
    max-width: 1440px !important; /* Phase 5 */
    height: 100vh !important; /* Phase 5 */
    transform: translateX(100%) !important; /* Phase 5 - Hidden by default (when closed) */
    transition: transform 0.3s ease-in-out !important; /* Phase 5 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    z-index: 1045 !important; /* Phase 5 - Match reference z-index */
    background-color: rgb(255, 255, 255) !important; /* Phase 5 */
    box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px !important; /* Phase 5 */
    border-left: 1px solid #e0e0e0 !important;
    flex-direction: column !important;
    will-change: transform !important;
    display: none !important; /* Hidden by default */
}

.summary-slide-panel.open {
    transform: translateX(0) !important; /* Phase 5 - Slide in when open */
    display: flex !important; /* Phase 5 */
}

.summary-panel-metrics {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 200px) !important;
    min-height: 0 !important;
}

@media (max-width: 1024px) {
    .summary-slide-panel {
        width: 60% !important;
        max-width: 700px !important;
        max-height: 100vh !important;
    }
    .summary-panel-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: calc(100vh - 200px) !important;
    }
}

@media (max-width: 768px) {
    .summary-slide-panel {
        width: 80% !important;
        max-width: 100% !important;
        min-width: 300px !important;
        max-height: 100vh !important;
    }
    .summary-panel-metrics {
        max-height: calc(100vh - 200px) !important;
    }
}

@media (max-width: 640px) {
    .summary-slide-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 100vh !important;
    }
    .summary-panel-metrics {
        grid-template-columns: 1fr !important;
        max-height: calc(100vh - 200px) !important;
    }
}

/* API Testing Pages - Apply Zinnia Layout */
.api-testing-page {
    padding-top: 120px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background: rgb(237, 237, 237) !important;
    min-height: calc(100vh - 96px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* API Testing Pages - Card Styles */
.api-testing-page .card {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--elevation-light-sm) !important;
    padding: 24px !important;
}

/* API Testing Pages - Form Elements */
.api-testing-page .form-control,
.api-testing-page .form-select,
.api-testing-page textarea {
    border: 1px solid var(--color-300-gray) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: var(--font-size-base) !important;
}

.api-testing-page .form-control:focus,
.api-testing-page .form-select:focus,
.api-testing-page textarea:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
}

/* API Testing Pages - Buttons */
.api-testing-page .btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 24px !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: background-color 0.2s !important;
}

.api-testing-page .btn-primary:hover {
    background-color: var(--color-secondary) !important;
}

/* API Testing Pages - Code Blocks */
.api-testing-page pre,
.api-testing-page code {
    background-color: var(--color-50-gray) !important;
    border: 1px solid var(--color-200-gray) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px !important;
    font-size: var(--font-size-small) !important;
    font-family: monospace !important;
    overflow: auto !important;
}

/* API Testing Pages - Headers */
.api-testing-page h1,
.api-testing-page h2,
.api-testing-page h3 {
    color: var(--color-900-gray) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: 16px !important;
}

.api-testing-page h1 {
    font-size: var(--font-size-3x-large) !important;
}

.api-testing-page h2 {
    font-size: var(--font-size-large) !important;
}

.api-testing-page h3 {
    font-size: var(--font-size-medium) !important;
}

/* Fix Zinnia Layout - Apply to all screens and tabs in endpoint builder */
.api-builder-page {
    padding-top: 0 !important; /* No padding-top - page handles its own spacing */
    padding-left: 0 !important; /* No padding - negative margin handles positioning */
    padding-right: 0 !important;
    background: #FFFFFF !important; /* White background - no grey */
    min-height: calc(100vh - 96px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure all tabs in endpoint builder have consistent layout */
.api-builder-page nav[class*="tab"],
.api-builder-page .nav-tabs,
.api-builder-page .tab-nav,
.api-builder-page .border-b.border-gray-200 {
    background: transparent !important;
    border-bottom: 1px solid var(--color-200-gray) !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    padding-top: 0 !important;
}

.api-builder-page .tab-content,
.api-builder-page [class*="tab-content"],
.api-builder-page [class*="TabContent"],
.api-builder-page .mt-6 {
    padding-top: 0 !important; /* Remove extra padding from tab content */
    background: rgb(237, 237, 237) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Phase 5: Endpoint Builder - Form Elements */
.api-builder-page .form-control,
.api-builder-page .form-select,
.api-builder-page input[type="text"],
.api-builder-page input[type="email"],
.api-builder-page input[type="number"],
.api-builder-page input[type="url"],
.api-builder-page textarea,
.api-builder-page select {
    border: 1px solid var(--color-300-gray) !important; /* Phase 5 */
    border-radius: var(--radius-md) !important; /* Phase 5 */
    padding: 10px 14px !important; /* Phase 5 */
    font-size: var(--font-size-base) !important; /* Phase 5 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Phase 5 */
    background-color: var(--color-white) !important; /* Phase 5 */
    color: var(--color-900-gray) !important; /* Phase 5 */
}

.api-builder-page .form-control:focus,
.api-builder-page .form-select:focus,
.api-builder-page input:focus,
.api-builder-page textarea:focus,
.api-builder-page select:focus {
    border-color: var(--color-primary) !important; /* Phase 5 */
    outline: none !important; /* Phase 5 */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; /* Phase 5 */
}

/* Phase 5: Endpoint Builder - Buttons */
.api-builder-page .btn,
.api-builder-page button {
    transition: all 0.2s ease !important; /* Phase 5 */
    border-radius: var(--radius-md) !important; /* Phase 5 */
    font-weight: var(--font-weight-semibold) !important; /* Phase 5 */
    padding: 10px 24px !important; /* Phase 5 */
}

.api-builder-page .btn-primary,
.api-builder-page button.btn-primary {
    background-color: var(--color-primary) !important; /* Phase 5 */
    color: var(--color-white) !important; /* Phase 5 */
    border: none !important; /* Phase 5 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Phase 5 */
}

.api-builder-page .btn-primary:hover,
.api-builder-page button.btn-primary:hover {
    background-color: var(--color-secondary) !important; /* Phase 5 */
    transform: translateY(-1px) !important; /* Phase 5 - hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; /* Phase 5 - enhanced shadow on hover */
}

.api-builder-page .btn-primary:active,
.api-builder-page button.btn-primary:active {
    transform: translateY(0) !important; /* Phase 5 - reset on click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Phase 5 */
}

.api-builder-page .btn-outline-secondary,
.api-builder-page button.btn-outline-secondary {
    border: 1px solid var(--color-300-gray) !important; /* Phase 5 */
    color: var(--color-700-gray) !important; /* Phase 5 */
    background-color: var(--color-white) !important; /* Phase 5 */
}

.api-builder-page .btn-outline-secondary:hover {
    border-color: var(--color-primary) !important; /* Phase 5 */
    color: var(--color-primary) !important; /* Phase 5 */
    background-color: var(--color-50-gray) !important; /* Phase 5 */
    transform: translateY(-1px) !important; /* Phase 5 - hover effect */
}

/* Phase 5: Endpoint Builder - File Upload Area */
.api-builder-page input[type="file"] {
    border: 2px dashed var(--color-300-gray) !important; /* Phase 5 */
    border-radius: var(--radius-md) !important; /* Phase 5 */
    padding: 24px !important; /* Phase 5 */
    background-color: var(--color-50-gray) !important; /* Phase 5 */
    transition: all 0.2s ease !important; /* Phase 5 */
    cursor: pointer !important; /* Phase 5 */
}

.api-builder-page input[type="file"]:hover {
    border-color: var(--color-primary) !important; /* Phase 5 */
    background-color: var(--color-100-gray) !important; /* Phase 5 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Phase 5 */
}

.api-builder-page input[type="file"]:focus {
    border-color: var(--color-primary) !important; /* Phase 5 */
    outline: none !important; /* Phase 5 */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; /* Phase 5 */
}

/* Phase 5: Endpoint Builder - Code Display */
.api-builder-page pre,
.api-builder-page code,
.api-builder-page .code-block {
    font-family: monospace !important; /* Phase 5 */
    background-color: var(--color-50-gray) !important; /* Phase 5 */
    border: 1px solid var(--color-200-gray) !important; /* Phase 5 */
    border-radius: var(--radius-md) !important; /* Phase 5 */
    padding: 16px !important; /* Phase 5 */
    overflow: auto !important; /* Phase 5 */
    font-size: var(--font-size-small) !important; /* Phase 5 */
    line-height: 1.5 !important; /* Phase 5 */
    color: var(--color-900-gray) !important; /* Phase 5 */
}

.api-builder-page pre {
    margin: 0 !important; /* Phase 5 */
    white-space: pre-wrap !important; /* Phase 5 */
    word-wrap: break-word !important; /* Phase 5 */
}

/* Phase 5: Endpoint Builder - Tab Layouts */
.api-builder-page .border-b.border-gray-200 {
    border-bottom: 1px solid var(--color-200-gray) !important; /* Phase 5 */
    margin-bottom: 24px !important; /* Phase 5 */
}

.api-builder-page nav.d-flex button,
.api-builder-page nav.d-flex .btn {
    margin-right: 8px !important; /* Phase 5 */
    transition: all 0.2s ease !important; /* Phase 5 */
}

.api-builder-page nav.d-flex button:hover,
.api-builder-page nav.d-flex .btn:hover {
    transform: translateY(-1px) !important; /* Phase 5 - hover effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Phase 5 */
}

.api-builder-page nav.d-flex button.btn-primary,
.api-builder-page nav.d-flex .btn.btn-primary {
    border-bottom: 2px solid var(--color-primary) !important; /* Phase 5 - active tab indicator */
    font-weight: var(--font-weight-semibold) !important; /* Phase 5 */
}

/* Phase 5: Endpoint Builder - Cards */
.api-builder-page .card {
    background-color: var(--color-white) !important; /* Phase 5 */
    border: 1px solid var(--color-200-gray) !important; /* Phase 5 */
    border-radius: var(--radius-lg) !important; /* Phase 5 */
    box-shadow: var(--elevation-light-sm) !important; /* Phase 5 */
    transition: all 0.3s ease !important; /* Phase 5 */
}

.api-builder-page .card:hover {
    box-shadow: var(--elevation-dark-xs) !important; /* Phase 5 */
    transform: translateY(-2px) !important; /* Phase 5 - hover effect */
}

.api-builder-page .card-body {
    padding: 24px !important; /* Phase 5 */
}

/* Phase 5: Endpoint Builder - Badges/Tags */
.api-builder-page .badge {
    font-size: var(--font-size-3x-small) !important; /* Phase 5 */
    padding: 4px 12px !important; /* Phase 5 */
    border-radius: var(--radius-xl) !important; /* Phase 5 */
    font-weight: var(--font-weight-medium) !important; /* Phase 5 */
}

/* Enhanced World-Class Styles for All Build Your API Tabs */

/* Enhanced Templates Tab - Card Hover Effects */
.api-builder-page .col-md-6 .card,
.api-builder-page .col-lg-3 .card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1.5px solid var(--color-200-gray) !important;
}

.api-builder-page .col-md-6 .card:hover,
.api-builder-page .col-lg-3 .card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--color-primary) !important;
}

/* Enhanced Code Generation Cards */
.api-builder-page .btn-outline-secondary.w-100.h-100 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 1) 100%) !important;
    border: 2px solid var(--color-200-gray) !important;
    position: relative !important;
    overflow: hidden !important;
}

.api-builder-page .btn-outline-secondary.w-100.h-100::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.5s ease !important;
}

.api-builder-page .btn-outline-secondary.w-100.h-100:hover::before {
    left: 100% !important;
}

.api-builder-page .btn-outline-secondary.w-100.h-100:hover {
    border-color: var(--color-primary) !important;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.08) 0%, rgba(0, 123, 255, 0.03) 100%) !important;
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.2) !important;
}

/* Enhanced SID DOCX Generation Section */
.api-builder-page .mb-5.p-4 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.95) 100%) !important;
    border: 2px solid var(--color-200-gray) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

.api-builder-page .mb-5.p-4::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--color-primary), #0056b3) !important;
}

.api-builder-page .mb-5.p-4:hover {
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.15) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

/* Enhanced Form Inputs with Better Focus States */
.api-builder-page .form-control:focus,
.api-builder-page .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1), 0 2px 4px rgba(0, 123, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Enhanced Primary Buttons with Gradient */
.api-builder-page .btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #0056b3 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.api-builder-page .btn-primary::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

.api-builder-page .btn-primary:hover::after {
    width: 300px !important;
    height: 300px !important;
}

.api-builder-page .btn-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4) !important;
}

/* Enhanced Tab Navigation */
.api-builder-page nav.d-flex button.btn-primary {
    border-bottom: 3px solid var(--color-primary) !important;
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.05) 0%, transparent 100%) !important;
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.api-builder-page nav.d-flex button:not(.btn-primary):hover {
    background: rgba(0, 123, 255, 0.05) !important;
    color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

/* Enhanced Code Display with Syntax Highlighting Background */
.api-builder-page pre,
.api-builder-page code {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    border: 1px solid #3e3e3e !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Enhanced Export Cards */
.api-builder-page .export-option-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.api-builder-page .export-option-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: var(--color-primary) !important;
    transform: scaleY(0) !important;
    transition: transform 0.3s ease !important;
}

.api-builder-page .export-option-card:hover::before {
    transform: scaleY(1) !important;
}

.api-builder-page .export-option-card:hover {
    border-left: 4px solid var(--color-primary) !important;
    padding-left: 16px !important;
    transform: translateX(4px) !important;
}

/* Smooth Animations */
.api-builder-page * {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhanced Loading States */
.api-builder-page .btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative !important;
}

.api-builder-page .btn:disabled::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: spin 0.6s linear infinite !important;
}

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

/* Sidebar styles matching zinnia_tpp_swagger_ui reference */
.sidebar {
    width: 320px;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    padding: var(--spacing-2xl);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed;
    top: 96px;
    bottom: 0;
    left: 0;
    height: calc(100vh - 96px);
    z-index: 100;
    box-sizing: border-box;
}

.content-wrapper.collapsed .sidebar {
    width: 60px;
    padding: var(--spacing-md);
}

.content-wrapper.collapsed .sidebar .sidebar-header,
.content-wrapper.collapsed .sidebar .sidebar-section-title,
.content-wrapper.collapsed .sidebar .company-info,
.content-wrapper.collapsed .sidebar .tree-item span:not(.tree-toggle) {
    display: none;
}

.sidebar-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.company-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-accent-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-right: var(--spacing-lg);
    color: var(--color-white);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.company-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.company-info h2 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--color-white);
}

.company-info p {
    font-size: 12px;
    opacity: 0.8;
    color: var(--color-white);
    margin: 0;
}

.sidebar-section {
    margin-bottom: var(--spacing-2xl);
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.5px;
}

.tree-item {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    border-radius: var(--border-radius-md);
    font-size: 13px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--color-white);
}

.tree-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.tree-item.active {
    background-color: var(--color-accent-orange);
    border-left-color: var(--color-white);
}

.tree-toggle {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.tree-toggle.expanded {
    transform: rotate(90deg);
}

.tree-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.tree-children.show {
    max-height: 500px;
}

.tree-item-nested {
    padding-left: calc(16px + var(--spacing-lg) + var(--spacing-lg));
    font-size: 12px;
}

/* =====================================================
   SWAGGER UI — hide top info block only (title/version/OAS info).
   Do NOT hide Authorize / scheme-container here: same-document Swagger
   (e.g. CustomSwaggerUI) needs them; Capability iframe uses backend /docs CSS.
   ===================================================== */

/* Hide the main info/header section at the top */
.swagger-ui .information-container,
.swagger-ui .info,
.swagger-ui .info-container,
.swagger-ui .info__title,
.swagger-ui .info__contact,
.swagger-ui .info__description,
.swagger-ui .info__version {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide the "Zinnia OpenAPI Hub API" title specifically */
.swagger-ui .title {
    display: none !important;
}

/* =====================================================
   CAPABILITY VIEW PAGE — Responsive Overrides
   Ensures full scrollability on all viewports.
   ===================================================== */

/* Capability View page — swagger shell responsive heights */
.capability-swagger-shell {
    position: relative;
    width: 100% !important;
    box-sizing: border-box;
}

/* Tablet: reduce swagger shell min-height */
@media (max-width: 1024px) {
    .rightContent:has(.capability-view-page) {
        padding: 0 !important;
    }
    .capability-view-page {
        padding: 12px !important;
    }
    .capability-swagger-shell {
        min-height: 450px !important;
        height: calc(100vh - 280px) !important;
    }
    .capability-swagger-iframe-wrap {
        height: calc(100% - 90px) !important;
    }
}

/* Mobile: stack vertically, reduce heights */
@media (max-width: 768px) {
    .rightContent:has(.capability-view-page) {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
    }
    .capability-view-page {
        padding: 8px !important;
    }
    .capability-swagger-shell {
        min-height: 400px !important;
        height: calc(100vh - 240px) !important;
    }
    .capability-swagger-iframe-wrap {
        height: calc(100% - 80px) !important;
        margin-top: 80px !important;
    }
    .capability-swagger-banner {
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
    }
    .capability-apis-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .capability-apis-toolbar-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .capability-jump-api-wrap {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .capability-jump-api-select {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .capability-swagger-shell {
        min-height: 350px !important;
        height: calc(100vh - 200px) !important;
    }
    .capability-summary-card {
        padding: 8px !important;
    }
    .capability-summary-card__title {
        font-size: 18px !important;
    }
}