@charset "utf-8";

/* *{background:none!important;border:none!important;box-shadow:none!important;outline:none!important;text-decoration:none!important;box-sizing:border-box}html,body{color:#e0e0ff;background:#0b0816} */

/*  ========================= Theme styles setup start ========================= */

/* --------------- Content Styles Setup --------------- */

.table-responsive, .sidebar-wrapper, .panel-wrapper{ overscroll-behavior: auto !important; touch-action: auto !important;}
 /* This allows the "bounce" effect on scroll for inner panels, while still containing it within the panel. */

/* container */
.app#html[data-bs-theme] .vbox, 
.app#html[data-bs-theme] section#content, 
.app#html[data-bs-theme] section.container-fluid, 
.app#html[data-bs-theme] .hbox > aside, 
.app#html[data-bs-theme] .hbox > section,
.app#html[data-bs-theme] .customwrapper, 
.app#html[data-bs-theme] #content .customwrapper,
.app#html[data-bs-theme] .scrollable.wrapper {    
    position: unset !important;
    width: 100% !important;
    max-width: -webkit-fill-available !important;
    height: auto !important;
    max-height: unset !important;
    background-color: transparent !important;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    display: flex !important;
    overflow: unset !important; /* added explicitly to tell browsers to not apply any overflow styles like overscroll-behavior: none to avoid scroll compatibility issue on browsers like edge - #imrudeen */
}
.app#html[data-bs-theme] section#content .customwrapper{position: relative !important;}
.app#html[data-bs-theme] section#content{padding: var(--app-spacing-sm) var(--app-spacing-xs) !important;}
.vbox, section#content, section.container-fluid, .hbox > aside, .hbox > section{background-color:transparent !important; border-width:0 !important; }
.customwrapper, #content .customwrapper{background-color:transparent !important; border-width:0 !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .row, .app#html[data-bs-theme] .row [class*="col-"]:not(#calculation_model [class*="col-"]){ min-width: 0; /* Fixes flexbox overflow issues, display: grid; -> on parent affects overflow on accounts/dashboard page, calc modal cols excluded bcz there input cust min-width cols required - #imrudeen */}

/* reset */
.app#html[data-bs-theme] header, .app#html[data-bs-theme] footer{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] li:not([class*="select2"]),.app#html[data-bs-theme] section, .app#html[data-bs-theme] div:not(.ns-row):not(.stepscta div):not(.note-editor div):not(.calendar div):not(.fm-title):not([class*="text-"]):not(.sec_title):not(.substitutesDiv):not(.tooltip-inner), .app#html[data-bs-theme] label:not(.error):not([class*="btn"]):not([class*="bg-"]){color: var(--bs-body-color) !important; border-color: var(--bs-border-color-translucent) !important;} /* :not([class*="text-bg"]) updated to :not([class*="text-"]) based on custom layout invite vendor - #imrudeen */
[data-bs-theme] span:not(.badge):not(.stepscta span):not([class*='text-']):not(.project-header-labels-item), [data-bs-theme] em{color: inherit !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .app-main a:not(.note-editor *):not(.header_counts a){color: var(--bs-link-color);}  /* !important -> not working on all different cases of types, :not([class*="text-"]) added based on custom layout invite vendor - #imrudeen */
[data-bs-theme] a[class*='btn']{/*color: inherit !important;*/}

/* breadcrumb */
.app#html[data-bs-theme] .mybreadcrumb, .app#html[data-bs-theme] .breadcrumb{background-color:transparent !important; border-width:0 !important; color: var(--bs-body-color); }
.app#html[data-bs-theme] .breadcrumb li, .app#html[data-bs-theme] .breadcrumb a, .app#html[data-bs-theme] .breadcrumb span{color: inherit !important;}
.app#html[data-bs-theme] .breadcrumb li.active{color: inherit !important;}
.app#html[data-bs-theme] .breadcrumb li + li:not(#breadcrumpmore)::before{color: inherit !important;}

/* panel */
[data-bs-theme]{--panel-bg:var(--bs-body-secondary-bg);}
[data-bs-theme=light]{--panel-bg:#f5f5f5; }
.app#html[data-bs-theme] .panel:not(.chart_panel):not(.details-panel):not(#room_accordion > .panel):not(.panel-menu-item):not(.overviewcta):not(.comment-body), .app#html[data-bs-theme] #content .panel:not(.chart_panel):not(.details-panel):not(.panel-menu-item):not(.overviewcta):not(.comment-body){background-color:transparent !important; box-shadow: unset !important; border-width:0 !important; border-color: var(--bs-border-color-translucent) !important; /* overflow: hidden !important ; */ } /* overflow: hidden !important; -> removed to avoid setcolumn options getting hidden on some views like Accounting Activities etc - #imrudeen */
.app#html[data-bs-theme] .panel-body{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0;}
.app#html[data-bs-theme] .panel-footer{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0;} /* var(--panel-bg) -> removed from panel-footer, bcz on some view it was not looking good */
.app#html[data-bs-theme] .panel-heading{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important;   border-bottom-width: 1px; border-bottom-style: solid;}
.app#html[data-bs-theme] .panel-title{color: inherit !important;}

.app#html[data-bs-theme] .clientInvoiceSec.panel, .app#html[data-bs-theme] .vendorInvoiceSec.panel{background-color:var(--panel-bg) !important;}
.app#html[data-bs-theme] .invoiceSectionItem.panel{background-color:rgba(var(--bs-black-rgb),0.15) !important;}
.app#html[data-bs-theme] .sec_item_type.panel{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 2px !important;}
.app#html[data-bs-theme] .stickypanel.panel{background-color:rgba(var(--bs-black-rgb),0.03) !important;border-color: var(--bs-border-color-translucent) !important; border-width: 1px !important;}
.app#html[data-bs-theme] .panel-dashboard{grid-gap: 1rem; display: grid; width: 100%; max-width: 100%; /* display: flex; flex-wrap: wrap; */}  /* display: grid; -> affects overflow on accounts/dashboard page so added width: 100%; max-width: 100%; - #imrudeen */
.app#html[data-bs-theme] .panel-dashboard > .row > [class*="col-"] > .panel{background-color:var(--panel-bg) !important;}

.app#html[data-bs-theme] .invoiceSectionCls{background-color:transparent !important; border-width: 0 !important;}

/* panel - chart-panel */
[data-bs-theme]{--chart-panel-bg: var(--bs-body-secondary-bg); --chart-panel-heading-bg:rgba(var(--bs-black-rgb),0.15); --chart-panel-bg-rgb:var(--bs-white-rgb); --chart-panel-bg-opacity:0.1;}
[data-bs-theme=light]{--chart-panel-bg-rgb:var(--bs-black-rgb); --chart-panel-bg-opacity:0.03;}
.app#html[data-bs-theme] .panel.chart_panel{ background-color:rgba(var(--chart-panel-bg-rgb),var(--chart-panel-bg-opacity)) !important;  border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .panel.chart_panel .panel-heading{background-color:rgba(var(--chart-panel-bg-rgb),var(--chart-panel-bg-opacity)) !important;  border-width:0 !important; border-color: var(--bs-border-color-translucent) !important;} 

/* panel - overviewcta-panel */
[data-bs-theme]{--overviewcta-panel-bg: var(--bs-body-secondary-bg); --overviewcta-panel-heading-bg:rgba(var(--bs-black-rgb),0.15); --overviewcta-panel-bg-rgb:var(--bs-white-rgb); --overviewcta-panel-bg-opacity:0.1;}
[data-bs-theme=light]{--overviewcta-panel-bg-rgb:var(--bs-black-rgb); --overviewcta-panel-bg-opacity:0.03;}
.app#html[data-bs-theme] .panel.overviewcta_panel{ background-color:rgba(var(--overviewcta-panel-bg-rgb),var(--overviewcta-panel-bg-opacity)) !important;  border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .panel.overviewcta_panel .panel-heading{background-color:rgba(var(--overviewcta-panel-bg-rgb),var(--overviewcta-panel-bg-opacity)) !important;  border-width:0 !important; border-color: var(--bs-border-color-translucent) !important;} 

/* panel - comments-panel */
.app#html[data-bs-theme] .comment-body.panel{background-color:var(--app-bg-subpanel, --bs-body-secondary-bg) !important;}
.app#html[data-bs-theme] #internal_comments_panel_body .panel-body{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0;}
.app#html[data-bs-theme] .comment-list:before{background-color:var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .arrow, .app#html[data-bs-theme] .arrow.left{border-color: transparent !important;}
.app#html[data-bs-theme] .arrow:after, .app#html[data-bs-theme] .arrow.left:after{border-left-width: 0; border-right-color: var(--bs-body-secondary-bg) !important;}
.app#html[data-bs-theme] .topbar .nav-links li i.arrow:after{border-right-color: transparent !important;}

.app#html[data-bs-theme] .panel-body.projectsSummary{border-width: 1px; border-style: solid;}

/* panel - ldrk-panel */
[data-bs-theme]{--panel-ldrk-bg: rgba(var(--bs-black-rgb),0.1);}
[data-bs-theme=light]{--panel-ldrk-bg: rgba(var(--bs-black-rgb),0.03);}
.app#html[data-bs-theme] .panel--ldrk.panel{background-color: var(--panel-ldrk-bg) !important;border-color: var(--bs-border-color-translucent) !important; border-width: 0px !important;}

/* panel - accordion */
[data-bs-theme] .accordion-item.panel{background-color: var(--dialer-window-bg) !important; border-width:1 !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .app-main #content #room_accordion .panel{background-color: var(--app-bg-subpanel) !important; border-width:1px !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .app-main .btnunderline{ text-decoration: underline !important; }

.app#html[data-bs-theme] .app-main #content #sidePanel .panel{background-color: var(--app-bg-subpanel) !important; border-width:1px !important; border-color: var(--bs-border-color-translucent) !important;}


/* cards */
[data-bs-theme] .card{--card-bg-rgb:var(--bs-white-rgb); --card-bg-opacity:0.1; background-color:rgba(var(--card-bg-rgb),var(--card-bg-opacity)) !important; /*background-color:var(--bs-body-tertiary-bg) !important;*/ border-width:0 !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}

[data-bs-theme=light] .card{--card-bg-rgb:var(--bs-black-rgb); --card-bg-opacity:0.03;}
.app#html[data-bs-theme] .card[class*=icon-card]{background-color:var(--card-bg) !important; color: var(--bs-white) !important;}
#html[data-bs-theme=light] .card[class*=icon-card] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6){color: var(--bs-white) !important;}
.app#html[data-bs-theme] .card[class*=icon-card] a, .app#html[data-bs-theme] .panel .card[class*=icon-card] table> tbody> tr td a:not([class*="btn-"]){color: inherit !important;}
.app#html[data-bs-theme] .card.icon-card-success{--card-bg: var(--bs-success);  }
.app#html[data-bs-theme] .card.icon-card-danger{--card-bg: var(--bs-danger); }
.app#html[data-bs-theme] .card.icon-card-info{--card-bg: var(--bs-info);}
.app#html[data-bs-theme] .card.icon-card-primary{--card-bg: var(--bs-primary);}
.app#html[data-bs-theme] .card.icon-card-warning{--card-bg: var(--bs-warning);}
.app#html[data-bs-theme] .card.icon-card-secondary{--card-bg: var(--bs-secondary);}
.app#html[data-bs-theme] .card.icon-card-light{--card-bg: var(--bs-secondary);}
.app#html[data-bs-theme] .card.icon-card-default{--card-bg: var(--bs-secondary);}
.app#html[data-bs-theme] .card.icon-card-dark{--card-bg: var(--bs-dark);}

/* table */
[data-bs-theme]{--table-color: var(--bs-body-color); --table-bg: var(--bs-body-secondary-bg); --table-caption-bg: var(--bs-body-bg); --table-th-bg: var(--bs-body-bg); --table-td-bg: var(--bs-body-secondary-bg); --table-title-bg: rgba(var(--bs-black-rgb), 0.15);  --table-selected-bg: rgba(var(--bs-black-rgb), 0.1);}
[data-bs-theme=light]{--table-color: var(--bs-body-color); --table-bg: var(--bs-body-bg); --table-caption-bg: var(--bs-body-secondary-bg); --table-th-bg: var(--bs-body-secondary-bg); --table-td-bg: var(--bs-body-bg); --table-title-bg: rgba(var(--bs-white-rgb), 0.03); --table-selected-bg: rgba(var(--bs-black-rgb), 0.03);}
[data-bs-theme=light] .table-responsive{--bs-border-color-translucent: rgba(0, 0, 0, 0.1);}
.app#html[data-bs-theme] .table-responsive{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] table{
    background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; color: var(--table-color) !important; border-width: 0 !important; background: transparent !important; 
}
.app#html[data-bs-theme] .app-body table caption{background-color: var(--table-caption-bg) !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .app-body table thead, .app#html[data-bs-theme] .app-body table tbody, .app#html[data-bs-theme] .app-body table tfoot, .app#html[data-bs-theme] .app-body #content table thead, .app#html[data-bs-theme] .app-body #content table tbody, .app#html[data-bs-theme] .app-body #content table tfoot{background: transparent !important; background-color: transparent !important; color: inherit !important;}
.app#html[data-bs-theme] .app-body table tr, .app#html[data-bs-theme] .app-body table tbody tr{background-color: transparent !important; color: inherit !important; border-width: 0px !important;  border-color: var(--bs-border-color-translucent) !important; border-style: solid !important; box-shadow: unset !important; } /* box-shadow: unset !important; -> added to avoid row shadow on projects dashboard page tables - #imrudeen */
.app#html[data-bs-theme] .app-body table tr:not(:last-child), .app#html[data-bs-theme] .app-body table tbody tr:not(:last-child){border-bottom-width: 1px !important; border-top-width: 0px !important;}
.app#html[data-bs-theme] .app-body table th, .app#html[data-bs-theme] .app-body table thead th, .app#html[data-bs-theme] .app-body table thead td, .app#html[data-bs-theme] .app-body table tbody th, .app#html[data-bs-theme] .app-body table tr th, .app#html[data-bs-theme] .app-body table tr:nth-child(odd) th, .app#html[data-bs-theme] .app-body table tr:nth-child(even) th{background: var(--app-bg-subpanel, --table-th-bg) !important; background-color: var(--app-bg-subpanel, --table-th-bg) !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important;}
.app#html[data-bs-theme] .app-body table td{background: transparent !important; background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; color: inherit !important; border-width: 0 !important;}
.app#html[data-bs-theme] .app-body table td.dataTables_empty{color: var(--bs-danger) !important;}

.app#html[data-bs-theme] .table-wrapper{background-color: transparent !important; }
.app#html[data-bs-theme] .table-title{background-color:var(--table-title-bg) !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important; margin: 0;}

/* table - child table/ expandable tables */
.app#html[data-bs-theme] table td.child ul{background-color: transparent !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; box-shadow: unset !important;}
.app#html[data-bs-theme] table td.child ul li{background-color: var(--table-th-bg) !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important;}

/* data-table */
[data-bs-theme]{ --dt-table-header-bg: rgba(var(--bs-black-rgb), 0.15); --dt-table-color: var(--bs-body-color); --dt-table-pagination-active-bg: var(--bs-highlight-bg); --dt-form-control-bg: var(--bs-body-secondary-bg);}
[data-bs-theme=light]{--dt-table-header-bg: rgba(var(--bs-black-rgb), 0.03); --dt-form-control-bg: var(--bs-body-bg);}
.app#html[data-bs-theme] .dtheader, .app#html[data-bs-theme] .dtfooter{background-color: var(--dt-table-header-bg) !important; color: var(--dt-table-color) !important;}
.app#html[data-bs-theme] .dtheader input[type='search']{background-color:var(--dt-form-control-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0; }
.app#html[data-bs-theme] .dtheader select, .app#html[data-bs-theme] .dtheader select.form-control, .app#html[data-bs-theme] .dtheader .form-control{background-color:var(--dt-form-control-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0; }
.app#html[data-bs-theme] .dataTableslength li{color: var(--form-control-color) !important; font-size: 11px;}
.app#html[data-bs-theme] .dataTables_info{margin: 0 !important;}

.app#html[data-bs-theme] .dataTables_processing{background-color: var(--dt-form-control-bg) !important; color: var(--bs-body-color) !important; 
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; padding: 10px !important; border-radius: 4px !important; box-shadow: 0px 0px 10px 3px #ccc !important; margin: 0 !important; z-index: 1040; width: auto !important; height: auto !important; min-width: 150px; display: grid; place-content: center;
    border-radius: var(--app-radius) !important; overflow: hidden !important; background: var(--glass-surface-gradient) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border-color) !important; border-top: 1px solid var(--glass-highlight) !important; box-shadow: 0 5px 35px -5px rgba(0, 0, 0, 0.5), 0 0 20px -5px var(--glass-shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
 }
 .app#html[data-bs-theme] .dataTables_scroll{position: relative; max-height: unset !important; overflow: unset !important;}
 .app#html[data-bs-theme] .dataTables_scrollBody thead th,  .app#html[data-bs-theme] .dataTables_scrollBody tfoot th{padding: unset !important;}
 .app#html[data-bs-theme] .dataTables_scrollBody thead{/* display: none !important; */} /* this will disturb datatables native functionality that leads to unexpected body overflow behavior - #imriudeem */


.app#html[data-bs-theme] .pagination{display: flex; grid-gap: 0.1rem;}
.app#html[data-bs-theme] .pagination > li > a, .app#html[data-bs-theme] .pagination > li > span{background-color:var(--form-control-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; border-radius: var(--bs-border-radius) !important; margin: 0 !important; font-size: inherit !important;}
.app#html[data-bs-theme] .pagination .active a, .app#html[data-bs-theme] .pagination .active span, .app#html[data-bs-theme] .pagination .active a:hover, .app#html[data-bs-theme] .pagination .active span:hover, .app#html[data-bs-theme] .pagination .active a:focus, .app#html[data-bs-theme] .pagination .active span:focus{background-color:var(--dt-table-pagination-active-bg) !important; color: var(--form-control-color) !important;}
.app#html[data-bs-theme] .pagination > li > a:hover, .app#html[data-bs-theme] .pagination > li > span:hover, .app#html[data-bs-theme] .pagination > li > a:focus, .app#html[data-bs-theme] .pagination > li > span:focus{background-color:var(--dt-table-pagination-active-bg) !important; color: var(--form-control-color) !important;}
.app#html[data-bs-theme] .pagination > .disabled > span, .app#html[data-bs-theme] .pagination > .disabled > span:hover, .app#html[data-bs-theme] .pagination > .disabled > span:focus, .app#html[data-bs-theme] .pagination > .disabled > a, .app#html[data-bs-theme] .pagination > .disabled > a:hover, .app#html[data-bs-theme] .pagination > .disabled > a:focus{background-color:var(--form-control-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; }

/*modals*/
[data-bs-theme]{--modal-content-bg:var(--bs-body-bg); --modal-header-bg:var(--bs-body-secondary-bg); --modal-footer-bg:var(--bs-body-bg); --modal-close-btn-color:var(--bs-danger); }
[data-bs-theme=light]{--modal-footer-bg:var(--bs-body-bg); }
.app#html[data-bs-theme] .app-body .modal-content{ background-color:var(--modal-content-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; 
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg);
    border: var(--app-border) !important;
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-elevation) !important;
    backdrop-filter: var(--app-blur-strength);
}
.app#html[data-bs-theme] .app-body .modal-body{background-color: transparent !important; }
.app#html[data-bs-theme] .app-body .modal-header{ background-color:var(--modal-header-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0; 
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg);
    backdrop-filter: var(--app-blur-strength);
}
.app#html[data-bs-theme] .app-body .modal-footer{ background-color:var(--modal-footer-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 1px; 
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg);
    backdrop-filter: var(--app-blur-strength);
}
.app#html[data-bs-theme] .app-body .close{background-color: transparent !important; color: var(--modal-close-btn-color) !important; text-shadow: unset; border-width: 0px !important;}

.app#html[data-bs-theme] .notification_count_cta{background-color:var(--bs-body-bg) !important; box-shadow: unset !important; }
.app#html[data-bs-theme] .notification_count_cta:before, .app#html[data-bs-theme] .notification_count_cta:after{background-color:transparent !important; }

.app#html[data-bs-theme] .sec_info{ background-color:var(--app-bg-subpanel, rgba(var(--bs-black-rgb),0.1)) !important; }
.app#html[data-bs-theme] .sec_title, .app#html[data-bs-theme] .substitutesDiv{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; color: var(--app-accent) !important;}

[data-bs-theme]{--fc-bg:rgba(var(--bs-black-rgb),0.2); --fc-label-bg:rgba(var(--bs-black-rgb),0.5);}
[data-bs-theme=light]{--fc-bg:rgba(var(--bs-black-rgb),0.03); --fc-label-bg:rgba(var(--bs-black-rgb),0.05);}
.app#html[data-bs-theme] .formcta{background-color: var(--fc-bg) !important; color: var(--bs-body-color); border: 1px solid var(--bs-border-color-translucent) !important;
padding: var(--app-spacing-sm) var(--app-spacing-md) !important;}
.app#html[data-bs-theme] .formcta .form-group{margin: 0 !important;}
.app#html[data-bs-theme] .formcta .form-group .row{background-color:var(--app-bg-subpanel, --bs-body-secondary-bg) !important; color: inherit !important; margin: 0.25rem 0 !important; padding: 0 !important;} /* --app-bg-subpanel -> based on project details audit modal - #imrudeen */
.app#html[data-bs-theme] .formcta label{background-color: var(--app-bg-subpanel, --fc-label-bg) !important;  color: inherit !important;} /* --app-bg-subpanel -> based on project details audit modal - #imrudeen */
.app#html[data-bs-theme] .formcta label + [class*="col-"]{background-color:transparent !important;  color: inherit !important;}
.app#html[data-bs-theme] .formcta p{ color: inherit !important;}
.app#html[data-bs-theme]  .formcta .formctalabel{background-color:var(--app-bg-subpanel, --bs-body-secondary-bg) !important; color: inherit !important; 
    background-color: transparent !important;
    color: var(--app-accent) !important; 
    position: unset !important;
    padding: 0 !important; margin-bottom: var(--app-spacing-sm) !important;}
.app#html[data-bs-theme] .formcta label + [class*="col-"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6){color: inherit !important;}

/*tooltip - setTimeout(() => { debugger; }, 3000); then hover */
[data-bs-theme]{--tooltip-bg:var(--app-accent); --tooltip-color:var(--bs-white); --info-tooltip-bg:var(--tooltip-bg); --info-tooltip-bfr-color:var(--tooltip-bg); }
/* [data-bs-theme=light]{--tooltip-bg:var(--bs-black); --tooltip-color:var(--bs-white);} */

.app#html[data-bs-theme] .tooltip .tooltip-inner{background-color:var(--tooltip-bg, rgba(0, 0, 0, 0.9)) !important; color: var(--tooltip-color) !important;}
.app#html[data-bs-theme] .tooltip .tooltip-arrow{border-color:transparent !important; }
.app#html[data-bs-theme] .tooltip.top .tooltip-arrow { border-top-color: rgba(0, 0, 0, 0.9); border-top-color: var(--tooltip-bg) !important;}
.app#html[data-bs-theme] .tooltip.right .tooltip-arrow {  border-right-color: rgba(0, 0, 0, 0.9);  border-right-color: var(--tooltip-bg) !important;}
.app#html[data-bs-theme] .tooltip.bottom .tooltip-arrow {  border-bottom-color: rgba(0, 0, 0, 0.9);  border-bottom-color: var(--tooltip-bg) !important;}
.app#html[data-bs-theme] .tooltip.left .tooltip-arrow {  border-left-color: rgba(0, 0, 0, 0.9);  border-left-color: var(--tooltip-bg) !important;}
.app#html[data-bs-theme] .app-body .tooltip .tooltip-arrow{border-width: 0px;}
.app#html[data-bs-theme] .app-body .tooltip .tooltip-arrow::before{ border-top-color: var(--tooltip-bg); }

.app#html[data-bs-theme] .info_view{background-color:var(--info-tooltip-bg) !important;  box-shadow: var(--app-shadow-glow); color: var(--bs-white) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important;}
.app#html[data-bs-theme] .info_view:before{color: var(--info-tooltip-bfr-color) !important;}

/*sweet alert*/
.app#html[data-bs-theme] .app-main{ --sweet-alert-bg:var(--bs-body-secondary-bg); }
.app#html[data-bs-theme] .sweet-alert{/* background-color: var(--app-bg-subpanel, --sweet-alert-bg) !important; border-color: var(--bs-border-color-translucent) !important; box-shadow: unset !important; border-width: 0 !important; */ color: var(--bs-body-color) !important; 
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg);
    border: var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: 0;
    box-shadow: var(--app-shadow-elevation);
    backdrop-filter: var(--app-blur-strength);
}
.app#html[data-bs-theme] .sweet-alert p{color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .sweet-alert .sa-icon.sa-success { border-color: #A5DC86 !important; }
.app#html[data-bs-theme] .sweet-alert .sa-icon.sa-danger { border-color: #F27474 !important; }
.app#html[data-bs-theme] .sweet-alert .sa-icon.sa-info { border-color: #C9DAE1 !important; }
.app#html[data-bs-theme] .sweet-alert .sa-icon.sa-warning { border-color: #F8BB86 !important; }
.app#html[data-bs-theme] .sweet-alert button{background-color: #0091D3 !important; }
.app#html[data-bs-theme] .sweet-alert button:hover { background-color: #006FA3 !important; }
.app#html[data-bs-theme] .sweet-alert button:ative { background-color: #0092D6 !important; }
.app#html[data-bs-theme] .sweet-alert button.cancel { background-color: #FF1414 !important; }
.app#html[data-bs-theme] .sweet-alert button.cancel:hover { background-color: #d20000 !important; }
.app#html[data-bs-theme] .sweet-alert button.cancel:active {background-color: #FF0E12 !important; }
.app#html[data-bs-theme] .sweet-alert .sa-icon.sa-success .sa-fix{background-color:transparent !important;}
.app#html[data-bs-theme] .sweet-alert .sa-icon.sa-success::before, .app#html[data-bs-theme] .sweet-alert .sa-icon.sa-success::after{background-color:transparent !important;}

/* tab */
.app#html[data-bs-theme] .tab-content{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0px !important; border-style: solid !important; box-shadow: unset !important;}  /* border-width: 0px-> required by default, if you wants with border then add custom css based on scenario - #imrudeen */
.app#html[data-bs-theme] .tab-pane{background-color:transparent !important; }

/*list*/
[data-bs-theme]{--project-details-menu-bg: var(--bs-body-secondary-bg); --project-details-menu-hover-start-bg: rgba(var(--bs-black-rgb),0.2); --project-details-menu-hover-end-bg: rgba(var(--bs-black-rgb),0.4); --project-details-menu-active-border-color:var(--bs-success);}
[data-bs-theme=light]{ --project-details-menu-hover-start-bg: rgba(var(--bs-black-rgb),0.08); --project-details-menu-hover-end-bg: rgba(var(--bs-black-rgb),0.1);}
li{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}

.app#html[data-bs-theme] .app-main .nav{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-bottom: 1px solid var(--bs-border-color-translucent) !important;} /* border-bottom -> required by default, if you wants without border then add custom css based on scenario - #imrudeen */
.app#html[data-bs-theme] .app-main .nav li{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .app-main .nav li a{background:linear-gradient(to right, var(--project-details-menu-hover-end-bg) 50%, var(--project-details-menu-hover-start-bg) 50%) !important; background-size: 200% 100% !important; background-position: right bottom !important; transition: all 0.5s ease-out; border:1px solid var(--bs-border-color-translucent) !important; border-bottom: 2px solid transparent !important; border-top: 1px solid var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important; border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0;}
.app#html[data-bs-theme] .app-main .nav li a:hover{background-position: left bottom !important; transition: all 0.5s ease-out;}
.app#html[data-bs-theme] .app-main .nav li.active a{border-bottom-color: var(--project-details-menu-active-border-color) !important; border-top: 1px solid var(--bs-border-color-translucent) !important; }

.app#html[data-bs-theme] .create_projects_modal .nav li{ background-color:transparent !important; }
.app#html[data-bs-theme] .panel-dashboard .dashboard-nav-tabs li.active::before{border-color: transparent; border-top-color: var(--project-details-menu-active-border-color); border-width: 7px; border-style: solid;}

.app#html[data-bs-theme] .panel-heading .nav{border-width: 0 !important;}

.app#html[data-bs-theme] .app-main .nav.nav-list li a{background:transparent !important; background-color:transparent !important;}

.app#html[data-bs-theme] .tabs_nav_list_group {background-color:transparent !important;}
.app#html[data-bs-theme] .tabs_nav_list_items{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .tabs_nav_list_group .tabs_nav_list_items a{background:linear-gradient(to right, var(--project-details-menu-hover-end-bg) 50%, var(--project-details-menu-hover-start-bg) 50%) !important; background-size: 200% 100% !important; background-position: right bottom !important; transition: all 0.5s ease-out; border-color: var(--bs-border-color-translucent) !important; border-bottom: 2px solid transparent !important;}
.app#html[data-bs-theme] .tabs_nav_list_group .tabs_nav_list_items a:hover{background-position: left bottom !important; transition: all 0.5s ease-out;}
.app#html[data-bs-theme] .tabs_nav_list_group .tabs_nav_list_items.active a{border-bottom-color: var(--project-details-menu-active-border-color) !important;}

.app#html[data-bs-theme] .sortable_form_container .sortable li, .app#html[data-bs-theme] .sortable_form_container .sortables li{background-color:transparent !important;}

.app#html[data-bs-theme] .list-group .list-group-item{background-color: var(--app-bg-subpanel, --bs-body-secondary-bg) !important; padding: 0.5rem 1rem; border: 1px solid var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .list-group#note-items .list-group-item{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .list-group#note-items .list-group-item.active{background-color: var(--bs-success) !important; }
.app#html[data-bs-theme] .list-group#note-items .list-group-item:hover{background-color: var(--bs-highlight-bg) !important; }

.app#html[data-bs-theme] .ug-item{/* background-color: var(--app-glass-bg) !important;background: var(--glass-surface-gradient) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; */}

.app#html[data-bs-theme] .modal .nav{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; border-bottom: 1px solid var(--bs-border-color-translucent) !important;} /* border-bottom -> required by default, if you wants without border then add custom css based on scenario - #imrudeen */
.app#html[data-bs-theme] .modal .nav li{background-color:transparent !important; border-color: var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .modal .nav li a{background:linear-gradient(to right, var(--project-details-menu-hover-end-bg) 50%, var(--project-details-menu-hover-start-bg) 50%) !important; background-size: 200% 100% !important; background-position: right bottom !important; transition: all 0.5s ease-out; border:1px solid var(--bs-border-color-translucent) !important; border-bottom: 2px solid transparent !important; border-top: 1px solid var(--bs-border-color-translucent) !important; color: var(--bs-body-color) !important; border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0;}
.app#html[data-bs-theme] .modal .nav li a:hover{background-position: left bottom !important; transition: all 0.5s ease-out;}
.app#html[data-bs-theme] .modal .nav li.active a{border-bottom-color: var(--project-details-menu-active-border-color) !important; border-top: 1px solid var(--bs-border-color-translucent) !important; }

/* forms - form/form-group */
.app#html[data-bs-theme] .form{background-color:transparent !important;}
.app#html[data-bs-theme] .form-group{background-color:transparent !important;}

/* forms - form_wrapper */
[data-bs-theme]{--fw-bg:rgba(var(--bs-black-rgb),0.15);}
[data-bs-theme=light]{--fw-bg:rgba(var(--bs-black-rgb),0.05);}
[data-bs-theme=light] .form_wrapper{--select2-bg: var(--bs-body-bg); --form-control-bg: var(--bs-body-bg);}
.app#html[data-bs-theme] .form_wrapper .bg-primary{background-color: transparent !important;}
.app#html[data-bs-theme] .form_wrapper .bg-primary h5{background-color: var(--fw-bg) !important; color: var(--bs-body-color) !important; border-bottom: 1px solid var(--bs-border-color-translucent);}
.app#html[data-bs-theme] .form_wrapper .bg-primary h5::after{ background-color: transparent !important; box-shadow: unset !important;}
.app#html[data-bs-theme] .form_wrapper .bg-primary + .row{background-color: var(--fw-bg) !important; box-shadow: unset !important;}

/* forms - form-group-wrapper */
[data-bs-theme]{--fgwc-bg:rgba(var(--bs-black-rgb),0.15); }
[data-bs-theme=light]{--fgwc-bg:rgba(var(--bs-black-rgb),0.05); }
.app#html[data-bs-theme] .fgwc-item{background-color: var(--fgwc-bg) !important;}
.app#html[data-bs-theme] .create-master .header{background-color: var(--bs-body-secondary-bg) !important;}

/* forms - form-controls */
[data-bs-theme]{ --form-control-bg:var(--bs-body-secondary-bg); --form-control-color: var(--bs-body-color); }

.app#html[data-bs-theme] .control-label{color: var(--form-control-color) !important;}

#html .form-control, .app#html[data-bs-theme] input[type='text'], .app#html[data-bs-theme] input[type='email'], .app#html[data-bs-theme] input[type='password']{background-color:var(--form-control-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; border-radius: var(--bs-border-radius-lg);}

#html .review_item .form-control, #html .details-panel .form-control{--form-control-bg:var(--bs-body-bg); }

.app#html[data-bs-theme] .did-floating-input, .app#html[data-bs-theme] .did-floating-select, .app#html[data-bs-theme] .input-group-text{background-color: var(--form-control-bg) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .did-floating-label, .app#html[data-bs-theme] .did-floating-input:focus ~ .did-floating-label, .app#html[data-bs-theme]  .did-floating-select:focus ~ .did-floating-label, .app#html[data-bs-theme] .did-floating-input:not(:placeholder-shown) ~ .did-floating-label{background-color: var(--form-control-bg) !important; color: var(--bs-body-color) !important;}

.app#html[data-bs-theme] .input-group .get_vendor_inv_calculations, .app#html[data-bs-theme] .input-group .getcalculations, .app#html[data-bs-theme] .input-group .amountField {background-color: var(--form-control-bg) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important;}
.app#html[data-bs-theme] .get_vendor_inv_calculations + .input-group-addon, .app#html[data-bs-theme] .getcalculations + .input-group-addon{background-color: var(--form-control-bg) !important; border-width: 0 !important;}

.app#html[data-bs-theme] .switch span:after{background-color: var(--form-control-bg) !important;}
.app#html[data-bs-theme] .status-switch.switch span:after, .app#html[data-bs-theme] .avail_switch.switch span:after{background-color: transparent!important;}

.app#html[data-bs-theme] .noUi-background{background-color: var(--form-control-bg) !important; box-shadow: unset !important;}
.app#html[data-bs-theme] .noUi-target{border-width: 0 !important;}

.app#html[data-bs-theme] .input-group{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .input-group input:not([class*="btn"]):not([type="checkbox"]){background-color: var(--form-control-bg) !important; color: var(--form-control-color) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; box-shadow: unset !important;} /* .app#html[data-bs-theme] .input-group input[type="* "] -> removed from here due to syntax error cause input btn colors - #imrudeen */
.app#html[data-bs-theme] .input-group-addon{background-color: var(--form-control-bg) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; color: inherit !important;}

/* forms - select form-controls */
[data-bs-theme] .details-panel, [data-bs-theme] .chart_panel{--form-control-bg:var(--bs-body-bg);}
.app#html[data-bs-theme] select.form-control{/*--form-control-bg:rgba(var(--bs-dark-rgb),1);*/ background-color:var(--form-control-bg) !important; color: var(--form-control-color) !important; border-width: 0; width: 100%;}

.app#html[data-bs-theme] table select.form-control{--form-control-bg:var(--bs-body-bg); background-color:var(--form-control-bg) !important; color: var(--form-control-color) !important; border-width: 0; width: auto;} /*--form-control-bg:rgba(var(--bs-dark-rgb),0.5); -> not suits on projects subtab vendors table */

/*.app#html[data-bs-theme] select.form-control{width: auto;}*/

/* forms - select2 */
[data-bs-theme]{--select2-bg:var(--bs-body-secondary-bg); --select2-color: var(--bs-body-color); --select2-dd-bg:var(--bs-body-bg) ; --select2-dd-color: var(--bs-body-color); --select2-dd-results-highlight-bg:rgba(var(--bs-white-rgb),0.09); --select2-dd-results-highlight-bg:var(--bs-highlight-bg); --select2-search-selection-choice-bg:rgba(var(--bs-black-rgb),0.3); --select2-search-field-bg:rgba(var(--bs-black-rgb),0.2); --select2-placeholder-color:rgba(255,255,255,0.6);}
[data-bs-theme=light]{--select2-placeholder-color:rgba(0,0,0,0.5);}
[data-bs-theme] .details-panel, [data-bs-theme] .chart_panel{--select2-bg:var(--bs-body-bg);}

.select2-dropdown, [data-bs-theme] .select2-dropdown { background-color:var(--select2-dd-bg) !important; color: var(--select2-dd-color) !important; border-color: var(--bs-border-color-translucent) !important;}
.select2-results__option{ background-color:transparent !important; color: inherit !important;}
[data-bs-theme] .select2, [data-bs-theme] .select2-container{background-color:var(--select2-bg) !important; color: var(--select2-color) !important; border-radius: var(--bs-border-radius-lg);}
.select2-hidden-accessible, #html select.select2_ajax{background-color:transparent !important; color: inherit !important;}
.selection, .app#html[data-bs-theme] .selection{background:transparent !important; background-color:transparent !important; color: inherit !important;}
.select2-selection, #html .select2-selection{background:transparent !important; background-color:transparent !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important;}
.select2-selection__rendered, .app#html[data-bs-theme] .app-body .select2-selection__rendered{background-color:transparent !important; color: inherit !important;}
.select2-results__option--highlighted{ background-color:var(--select2-dd-results-highlight-bg) !important; color: inherit !important;}
.select2-results__option:not(:last-child) { border-bottom-color: var(--bs-border-color-translucent) !important;}
.select2-selection__rendered .select2-selection__choice{background-color:var(--select2-search-selection-choice-bg) !important; color: inherit !important; border-color: var(--bs-border-color-translucent) !important;}
.select2-selection__clear, #html .select2-selection__clear{color: var(--bs-danger) !important;}
#html .select2-search{/*--select2-search-bg:rgba(var(--bs-white-rgb),0.15); background-color:var(--select2-search-bg) !important;*/ background-color:transparent !important; color: inherit !important;}
/* [data-bs-theme] .select2-search--inline .select2-search__field{background-color:transparent !important; color: inherit !important;} */
.select2-search--dropdown .select2-search__field{background-color:var(--select2-search-field-bg) !important; color: inherit !important; border-width: 0 !important;}
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color: var(--select2-placeholder-color) !important; opacity: 1;}

/* forms - webkits */
[data-bs-theme]{--bs-date-input-fiter: invert(1);}
[data-bs-theme=light]{--bs-date-input-fiter: invert(0);}
.app#html[data-bs-theme] input[type=date]::-webkit-datetime-edit-month-field { color: var(--bs-body-color) !important; }
.app#html[data-bs-theme] input[type=date]::-webkit-datetime-edit-day-field { color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] input[type=date]::-webkit-datetime-edit-year-field { color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] input[type=date]::-webkit-calendar-picker-indicator, .app#html[data-bs-theme] input[type=time]::-webkit-calendar-picker-indicator{ color: var(--bs-body-color) !important;filter: var(--bs-date-input-fiter) ;}

/* forms - placeholders */
[data-bs-theme]{--placeholder-color:rgba(255,255,255,0.6);}
[data-bs-theme=light]{--placeholder-color:rgba(0,0,0,0.5);}
#html ::placeholder{color:var(--placeholder-color)!important;opacity:1}#html :-ms-input-placeholder{color:var(--placeholder-color)}#html ::-ms-input-placeholder{color:var(--placeholder-color)}
#html input::-webkit-textfield-decoration-container{color:var(--app-text-primary);}

/* dropdown-menu */
[data-bs-theme] .dropdown-menu{--dropdown-menu-bg:var(--bs-body-bg) ; --dropdown-menu-color: var(--bs-body-color); background:var(--dropdown-menu-bg) !important;  background-color:var(--dropdown-menu-bg) !important; color: var(--dropdown-menu-color) !important; border-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] .dropdown-menu > li:not(:last-child){border-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] .dropdown-menu > li > a, [data-bs-theme] .dropdown-menu .dropdown-item{background-color:transparent !important; color: inherit !important;}
[data-bs-theme] .dropdown-menu > li > a:hover, [data-bs-theme] .dropdown-menu .dropdown-item:hover{background-color:var(--bs-highlight-bg) !important; color: inherit !important;}

/* highcharts */
[data-bs-theme]{--hc-color:var(--bs-body-color);}
[data-bs-theme=light] .highcharts-container{--bs-border-color-translucent:rgba(0, 0, 0, 0.05); background:transparent !important;background-color:transparent !important;}
.app#html[data-bs-theme] .highcharts-container, .app#html[data-bs-theme] .chart_panel .highcharts-container{background-color:transparent !important;}
.app#html[data-bs-theme] .highcharts-figure{background-color:transparent !important;}
.app#html[data-bs-theme] .highcharts-background{fill:transparent !important;}
.app#html[data-bs-theme] .highcharts-root text, .app#html[data-bs-theme] .highcharts-root text a, #html .highcharts-tooltip text tspan{fill: var(--hc-color) !important; }
.app#html[data-bs-theme] .highcharts-grid-line{stroke: var(--bs-border-color-translucent);}

.app#html[data-bs-theme] .highcharts-point{stroke-width: 0px;}
.app#html[data-bs-theme] .highcharts-tooltip{background-color: var(--bs-body-bg) !important;}
.app#html[data-bs-theme] .highcharts-tooltip span, .app#html[data-bs-theme] .highcharts-tooltip span span{color:var(--wht) !important;}
.app#html[data-bs-theme] .highcharts-tooltip a{color:var( --bs-link) !important;}
.app#html[data-bs-theme] path.highcharts-label-box.highcharts-tooltip-box { fill: #000 !important;}

.app#html[data-bs-theme] .highcharts-button-symbol{stroke: var(--bs-body-color) !important; }
.app#html[data-bs-theme] .highcharts-button-box{stroke: var(--bs-border-color-translucent) !important; fill: rgba(var(--bs-white-rgb),0.09) !important;}
.app#html[data-bs-theme] .highcharts-menu{background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color-translucent) !important; color:var( --bs-body-color) !important;}
.app#html[data-bs-theme] .highcharts-menu .highcharts-menu-item{background-color: transparent !important; color:var( --bs-body-color) !important;}
.app#html[data-bs-theme] .highcharts-menu .highcharts-menu-item:hover{background-color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .highcharts-breadcrumbs-separator { fill: #110000 !important;}

[data-bs-theme] .panel .highcharts-data-table table caption{background-color: var(--bs-body-bg) !important; color:var( --bs-link) !important;}
.app#html[data-bs-theme] .highcharts-tooltip table, .app#html[data-bs-theme] .highcharts-tooltip td{background: transparent !important; background-color: transparent !important; color: inherit !important;}

/*calendar*/
.app#html[data-bs-theme] .calendar-table{background-color: transparent!important; border-color: var(--bs-border-color-translucent) !important;border-width: 0;}
.app#html[data-bs-theme] .ranges li{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .ranges li.active, .app#html[data-bs-theme] .ranges li:hover{background-color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .daterangepicker td.active, .app#html[data-bs-theme] .daterangepicker td.active.in-range, .app#html[data-bs-theme] .daterangepicker td.active:hover{background-color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .daterangepicker td.in-range{background-color: var(--bs-body-tertiary-bg) !important;}
.app#html[data-bs-theme] .daterangepicker td.off, .app#html[data-bs-theme] .daterangepicker td.off.in-range, .app#html[data-bs-theme] .daterangepicker td.off.start-date, .app#html[data-bs-theme] .daterangepicker td.off.end-date{background-color: rgba(var(--bs-black-rgb),0.15) !important;}

.app#html[data-bs-theme] .datepicker td.active, .app#html[data-bs-theme] .datepicker td.active:hover{background-color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .datepicker td.old, .app#html[data-bs-theme] .datepicker td.new{background-color: rgba(var(--bs-black-rgb),0.15) !important;}

.app#html[data-bs-theme] .xdsoft_datetimepicker{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important;border-width: 0;}
.app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div{background-color: transparent!important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{background-color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_calendar td:hover, .app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover{background-color: var(--bs-body-tertiary-bg) !important;}
.app#html[data-bs-theme] .xdsoft_time_box{border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_prev, .app#html[data-bs-theme] .xdsoft_datetimepicker .xdsoft_next{filter: brightness(0) invert(1);}

.app#html[data-bs-theme] .calendar { border-radius:var(--app-radius); overflow:hidden; border:1px solid var(--glass-border-color); background:transparent !important; background-color:var(--app-glass-bg) !important; backdrop-filter:var(--glass-blur); box-shadow:var(--app-shadow-sm); }
.app#html[data-bs-theme] .calendar .fc-toolbar { background:transparent !important; background-color:var(--app-glass-bg) !important; backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border-color); padding:var(--app-spacing-sm) var(--app-spacing-md)!important; margin-bottom:0!important; border-radius:var(--app-radius) var(--app-radius) 0 0; }
.app#html[data-bs-theme] .calendar .fc-toolbar h2 { color:var(--app-text-primary); font-weight:var(--app-font-weight-bold); }
.app#html[data-bs-theme] .calendar.fc .fc-row .fc-content-skeleton table thead td { background:transparent !important; background-color:var(--app-bg-subpanel) !important; color:var(--app-text-primary); font-weight:600; font-size:1.1rem; padding:10px 6px; border:1px solid var(--glass-border-color); }
.app#html[data-bs-theme] .calendar .fc-widget-content .fc-sat, .app#html[data-bs-theme] .calendar .fc-widget-content .fc-sun, .app#html[data-bs-theme] .calendar.fc .fc-row .fc-content-skeleton table thead td.fc-sat, .app#html[data-bs-theme] .calendar.fc .fc-row .fc-content-skeleton table thead td.fc-sun { background:transparent !important; background-color:rgba(var(--app-accent-rgb),0.09) !important; color:var(--app-accent) !important; border-color:rgba(var(--app-accent-rgb),0.22) !important; }
.app#html[data-bs-theme] .fc .fc-daygrid-day.fc-day-today, .app#html[data-bs-theme] .calendar.fc .fc-row .fc-content-skeleton table thead td.fc-state-highlight { background:transparent !important; background-color:rgba(var(--app-accent-rgb),0.14)!important; border-color:rgba(var(--app-accent-rgb),0.35)!important; color:var(--app-accent)!important; font-weight:700; }
.app#html[data-bs-theme] .calendar a.fc-day-grid-event, .app#html[data-bs-theme] .calendar a.fc-daygrid-event { border:none!important; border-radius:var(--app-radius-sm); margin:2px 4px; padding:1px 4px; font-size:0.88rem; }
.app#html[data-bs-theme] .calendar a.fc-day-grid-event .fc-content, .app#html[data-bs-theme] .calendar a.fc-daygrid-event .fc-event-main { background:transparent !important; background-color:var(--app-accent) !important; color:var(--bs-white) !important; padding:3px 7px; border-radius:var(--app-radius-sm) !important; white-space: normal !important; }
.app#html[data-bs-theme] .fc .fc-daygrid-day.fc-day-other, .app#html[data-bs-theme] .calendar .fc-day-number.fc-other-month { background:transparent !important; background-color:var(--app-bg-subpanel)!important; color:var(--app-text-muted)!important; }
.app#html[data-bs-theme] .calendar.fc td, .app#html[data-bs-theme] .calendar.fc th { border-color:var(--glass-border-color)!important; border-width: 1px !important;}
.app#html[data-bs-theme] .fc .fc-button, .app#html[data-bs-theme] .fc .fc-button-group>* { background:transparent !important; background-color:var(--app-bg-hover) !important; color:var(--app-text-primary) !important; border:1px solid var(--glass-border-color) !important; border-radius:var(--app-radius-sm) !important; transition:var(--app-transition-fast) !important; }
.app#html[data-bs-theme] .fc .fc-button:hover, .app#html[data-bs-theme] .fc .fc-button:focus, .app#html[data-bs-theme] .fc .fc-button.fc-state-active { background:transparent !important; background-color:var(--app-accent) !important; color:var(--bs-white) !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px rgba(var(--app-accent-rgb),0.20) !important; }
.app#html[data-bs-theme] a.fc-event:not([class*="btn-"]) { background:transparent !important; background-color:var(--app-accent) !important; color:var(--bs-white) !important; border-color:var(--app-accent) !important; white-space: normal !important;}

/* sortable - set columns */
.app#html[data-bs-theme] #sortableDiv div[class*="col-"]{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important;border-width: 0;}
.app#html[data-bs-theme] #columns_inactive, .app#html[data-bs-theme] .columns_inactive, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row #columns_inactive, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row .columns_inactive, .app#html[data-bs-theme] #columns_active, .app#html[data-bs-theme] .columns_active, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row #columns_active, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row .columns_active{display: flex !important; flex-direction: column !important; gap: 0.25rem !important;}
.app#html[data-bs-theme] #columns_inactive li, .app#html[data-bs-theme] .columns_inactive li, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row #columns_inactive li, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row .columns_inactive li{background-color: var(--app-bg-hover, --bs-body-secondary-bg) !important; color: var(--bs-body-color) !important; padding: 0.25rem; margin: 0;}
.app#html[data-bs-theme] #columns_active li, .app#html[data-bs-theme] .columns_active li, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row #columns_active li, .app#html[data-bs-theme] .dragdrop_status .dropdown-menu #sortableDiv .row .columns_active li{background-color: var(--app-bg-active, --bs-highlight-bg) !important; color: var(--bs-body-color) !important;padding: 0.25rem; margin: 0;}
.app#html[data-bs-theme] #sortableDiv div[class*="col-"] h3{color: var(--bs-white) !important; background-color: var(--bs-body-bg);}
.app#html[data-bs-theme] .dragdrop_status .dropdown-menu .btn{margin: 0 !important;}

/* note editors */
.app#html[data-bs-theme] .btn .note-current-fontname{color: inherit !important;}
.app#html[data-bs-theme] .btn .note-icon-caret{color: inherit !important;}

/* attendance - calendar */
[data-bs-theme]{
    --cd-bg: #236faa; --cd-color: var(--bs-body-color); --hh-bg: var(--bs-body-tertiary-bg); 
    --cd-pto-bg: #6a552e; --cd-pto-task-color: #FFA500;
    --cd-co-bg: #6a3030; --cd-co-task-color: #fec0c0;
    --cd-cohd-bg: #6a3030; --cd-task-cohd-color: #fec0c0;
    --cd-hd-bg: #653b2c; --cd-hd-task-color: #efa88e;
    --cd-ad-bg: #78313d; --cd-ad-task-color: #ffa2b1;
    --cd-pd-bg: #0e5a4b; --cd-pd-task-color: #a2e3cd;
    --cd-wo-bg: #4e496e; --cd-wo-task-color: #bebef8;
    --cd-ltm-bg: #4e496e; --cd-ltm-task-color: #bebef8;
    --cd-active-bg: #224968; --cd-active-task-color: #FFA500;
    --cd-inactive-bg: #0170c7; --cd-inactive-task-color: #FFA500;
}
[data-bs-theme=light]{
    --cd-bg: var(--bs-body-bg); --cd-color: var(--bs-body-color); --hh-bg: #fffeb7; 
    --cd-pto-bg: #FFECC9; --cd-pto-color: #FFA500; --cd-pto-task-color: #FFA500;
    --cd-co-bg: #FFD6D6; --cd-co-color: #800000; --cd-co-task-color: #800000;
    --cd-cohd-bg: #E3F5FF; --cd-cohd-color: #6495ED; --cd-cohd-task-color: #009461;
    --cd-hd-bg: #FFCEBC; --cd-hd-color: #FF4500; --cd-hd-task-color: #FF4500;
    --cd-ad-bg: rgba(255,218,218,1.00); --cd-ad-color: #F77272; --cd-ad-task-color: #fd588a;
    --cd-pd-bg: #c2ffdb; --cd-pd-color: #1BB681; --cd-pd-task-color: #009461;
    --cd-wo-bg: #DFDFFF; --cd-wo-color: #0000FF; --cd-wo-task-color: #0000FF;
    --cd-hod-bg: #FAFAC1; --cd-hod-color: #808000; --cd-hod-task-color: #808000;
    --cd-ltm-bg: #4e496e; --cd-ltm-color: #bebef8; --cd-ltm-task-color: #d16239;
    --cd-active-bg: #d7ffba; --cd-active-color: #FFA500; --cd-active-task-color: #FFA500;
    --cd-inactive-bg: var(--bs-body-secondary-bg); --cd-inactive-color: #FFA500; --cd-inactive-task-color: #FFA500;
}

.app#html[data-bs-theme] .hintsheader{ background-color: var(--hh-bg);}
.app#html[data-bs-theme] .calendar__sidebar .sidebar__heading{color:var( --bs-white) !important;}
.app#html[data-bs-theme] .calendar__sidebar .sidebar__list-item, .app#html[data-bs-theme] .calendar__sidebar .sidebar__list-item span{color:var( --bs-white) !important;}
.app#html[data-bs-theme] .title-bar{background: #65b7f8;}
.app#html[data-bs-theme] .top-bar__days{background-color:rgba(1,1,1,0.3); border-color: var(--bs-border-color-translucent) !important; color: var(--bs-white) !important;}
.app#html[data-bs-theme] .calendar__days_content{background: #4391ce; }

.app#html[data-bs-theme] .calendar__day{ background-color: var(--cd-bg); border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .calendardayinfo:hover{border-bottom-width: 3px; border-bottom-color: var(--bs-border-color-translucent);}
.app#html[data-bs-theme] .calendar__day .calendar__date{ color:var(--cd-color) !important; }

.app#html[data-bs-theme] .calendar__day.paidtimeoff__day{ color:var(--cd-pto-color) !important; background-color: var(--cd-pto-bg) !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .calendar__day.compoff__day{ color:var(--cd-co-color) !important; background-color: var(--cd-co-bg)  !important;}
.app#html[data-bs-theme] .calendar__day.compoffhalf__day{ color:var(--cd-cohd-color) !important; background-color: var(--cd-cohd-bg)  !important;}
.app#html[data-bs-theme] .calendar__day.half__day{ color:var(--cd-hd-color) !important; background-color: var(--cd-hd-bg)  !important; border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .calendar__day.absent__day{ color:var(--cd-ad-color) !important; background-color: var(--cd-ad-bg)  !important;border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .calendar__day.present__day{ color:var(--cd-pd-color) !important; background-color: var(--cd-pd-bg) !important;}
.app#html[data-bs-theme] .calendar__day.weekoff__day{color:var(--cd-wo-color) !important; background-color: var(--cd-wo-bg); border: 1px solid var(--bs-border-color-translucent);}
.app#html[data-bs-theme] .calendar__day.active{ color:var(--cd-active-color) !important; background-color: var(--cd-active-bg) !important; border-bottom-width: 3px; border-bottom-color: var(--bs-border-color-translucent);}
.app#html[data-bs-theme] .calendar__day.inactive{ color:var(--cd-inactive-color) !important; background-color: var(--cd-inactive-bg) !important;}

.app#html[data-bs-theme] .calendar__day.holiday__day .calendar__task{color:var(--cd-hod-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.paidtimeoff__day .calendar__task{color:var(--cd-pto-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.compoff__day .calendar__task{color:var(--cd-co-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.compoffhalf__day .calendar__task{color:var(--cd-cohd-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.half__day .calendar__task{color:var(--cd-hd-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.absent__day .calendar__task{color:var(--cd-ad-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.present__day .calendar__task{color:var(--cd-pd-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.weekoff__day .calendar__task{color:var(--cd-wo-task-color) !important;}
.app#html[data-bs-theme] .calendar__day.ltm__day .calendar__task{color:var(--cd-ltm-task-color) !important;}

/* callout & summaryDiv */
[data-bs-theme]{--callout-color: var(--bs-info-text-emphasis); --callout-bg: rgba(var(--bs-info-rgb), 0.1); --callout-border: var(--bs-info-border-subtle); --callout-link: 10, 88, 202; --callout-code-color: #ab296a; --bs-link-color-rgb: var(--callout-link); --bs-code-color: var(--callout-code-color); }
.app#html[data-bs-theme] .callout, .app#html[data-bs-theme] .summaryDiv{padding: 1rem; margin-top: 1rem; margin-bottom: 1rem; color: var(--callout-color, inherit); background-color: var(--callout-bg, var(--bs-gray-100)) !important; border-left: 0.25rem solid var(--callout-border, var(--bs-gray-300)) !important; border-radius: var(--bs-border-radius-lg) !important; border: none;}
[data-bs-theme] .callout .highlight{background-color: rgba(0,0,0,0.05)}

[data-bs-theme] .callout-info, [data-bs-theme] .summaryDiv-info{--callout-color: var(--bs-info-text-emphasis); --callout-bg: rgba(var(--bs-info-rgb), 0.1); --callout-border: var(--bs-info-border-subtle)}
[data-bs-theme] .callout-warning, [data-bs-theme] .summaryDiv-warning{--callout-color: var(--bs-warning-text-emphasis); --callout-bg: rgba(var(--bs-warning-rgb), 0.1);  --callout-border: var(--bs-warning-border-subtle)}
[data-bs-theme] .callout-danger, [data-bs-theme] .summaryDiv-danger{--callout-color: var(--bs-danger-text-emphasis); --callout-bg: rgba(var(--bs-danger-rgb), 0.2); --callout-border: var(--bs-danger-border-subtle)}

[data-bs-theme="light"] .callout-info, [data-bs-theme="light"] .summaryDiv-info{--callout-color: var(--bs-info-text-emphasis);--callout-bg: var(--bs-info-bg-subtle);--callout-border: var(--bs-info-border-subtle)}
[data-bs-theme="light"] .callout-warning, [data-bs-theme="light"] .summaryDiv-warning{--callout-color: var(--bs-warning-text-emphasis);--callout-bg: var(--bs-warning-bg-subtle);--callout-border: var(--bs-warning-border-subtle)}
[data-bs-theme="light"] .callout-danger, [data-bs-theme="light"] .summaryDiv-danger{--callout-color: var(--bs-danger-text-emphasis);--callout-bg: var(--bs-danger-bg-subtle);--callout-border: var(--bs-danger-border-subtle)}

/*toast*/
[data-bs-theme]{--toast-bg:var(--bs-body-secondary-bg);}
[data-bs-theme=light]{--toast-bg:var(--bs-body-bg);}
.app#html[data-bs-theme] .toast-custom{background-color: var(--toast-bg) !important; color:var(--bs-body-color) !important; border-color:var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .toast-header-custom{color:inherit !important; border-color:var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .toast-body-custom{color:inherit !important;}
.app#html[data-bs-theme] .text-muted, .app#html[data-bs-theme] .close{color:inherit !important;}

.activity_notification_timeline_sec .timeline-marker:before{border-color: var(--an-tml-marker-bg) !important; border-width: 1px; background:var(--an-tml-marker-bg) ;}
.activity_notification_timeline_sec .period .timeline-marker:before{ background: transparent !important; border-width: 1px;}
.activity_notification_timeline_sec .timeline-marker:after{background:var(--an-tml-marker-bg)  !important; width: 1px;}

/* general / common */
[data-bs-theme]{--gallery_product-bg:rgba(var(--bs-black-rgb),0.15); --gallery_product-selected-border-color:var(--bs-warning);}
[data-bs-theme] .s_project_type { color: var(--red) !important;}
[data-bs-theme] .s_status { color:  var(--grn) !important;}
[data-bs-theme] .s_work_order { color:  var(--inf) !important;}
[data-bs-theme] .s_pm{color: #c420cf;}
[data-bs-theme] header#projectViewHeader{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important;border-width: 0;}
[data-bs-theme] header#projectViewHeader #reviewSection{background-color: transparent!important; border-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] header#projectViewHeader #reviewSection .review_item{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important; }
[data-bs-theme] header#projectViewHeader #reviewSection .review_item:before{background-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] header#projectViewHeader #reviewSection .review_item p{background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0; color: (--bs-body-color) !important;}
[data-bs-theme] #projectBasicInfo{
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), transparent !important;
    border: var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    padding: 0;
    box-shadow: var(--app-shadow-elevation);
    backdrop-filter: var(--app-blur-strength);
}
[data-bs-theme] #projectBasicInfo #propHeadInTd, [data-bs-theme] .review_section{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] #propHeadInTd, [data-bs-theme] #propBody, [data-bs-theme] .leftDiv, [data-bs-theme] .managerAgentDiv{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; }
[data-bs-theme] #propBody [style*="background"]{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] #propBody .spanLable{background-color: transparent !important;}
[data-bs-theme] .modal #projectBasicInfo .spanLable{background-color: var(--app-bg-subpanel, --bs-body-secondary-bg) !important;}
[data-bs-theme] #propBody[class*="col-"]{border-color: var(--bs-border-color-translucent) !important; border-width: 0;}

/* [data-bs-theme] .stepscta, [data-bs-theme] #steps{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0;}
[data-bs-theme] .step{background-color: var(--bs-border-color-translucent) !important; border-color: var(--bs-border-color-translucent) !important;}
[data-bs-theme] .step.done{background-color: var(--app-accent) !important;}
[data-bs-theme] .step.active{background-color: var(--app-bg-active) !important;}
[data-bs-theme] .step.inactive{background-color: var(--bs-border-color-translucent) !important;} */
[data-bs-theme] .stepscta{background:transparent}
#html[data-bs-theme] #steps{background:var(--glass-surface-gradient);backdrop-filter:var(--app-blur-strength);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow-sm);}
[data-bs-theme] .step{background-color:var(--bs-body-secondary-bg);border-color:var(--glass-border-color);color:var(--app-text-muted); box-shadow:var(--app-shadow-sm);/* background:var(--glass-surface-gradient);backdrop-filter:var(--app-blur-strength);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow-sm); */}
[data-bs-theme] .step:before{background-color:var(--bs-body-quaternary-bg)}
[data-bs-theme] .step.active{border-color:var(--app-accent);color:var(--app-accent)}
[data-bs-theme] .step.active:before{background:linear-gradient(to right,var(--app-accent) 0%,var(--app-accent-secondary) 100%)}
[data-bs-theme] .step.active:after{color:var(--app-accent)}
[data-bs-theme] .step.done{/* background-color:var(--app-accent);border-color:var(--app-accent);color:#fff */}
[data-bs-theme] .step.done:before{background-color:var(--app-accent)}
[data-bs-theme] .step .stepspan{background-color:var(--bs-body-tertiary-bg);border-color:var(--glass-border-color)}
[data-bs-theme] .step.done .stepspan{background-color:var(--app-accent);border-color:transparent;color:#fff}
[data-bs-theme] .step.inactive{background-color:var(--bs-body-quinary-bg);border-color:var(--glass-border-color);color:var(--app-text-muted)}
[data-bs-theme] .step.inactive:before{background-color:var(--bs-body-quaternary-bg)}
[data-bs-theme] .timestamp{background:var(--bs-body-tertiary-bg);color:var(--app-text-primary);border-color:var(--glass-border-color)}
[data-bs-theme] .trackText,.step .trackText.trackText1{color:var(--app-text-primary)}
[data-bs-theme] .step .trackText.trackText2,.step .trackText.trackText3{color:var(--app-text-muted)}
[data-bs-theme] .step .trackText.tracktime{color:var(--app-accent-secondary)!important}
[data-bs-theme] .stepscta.tracker_stepacta .step,.stepscta.tracker_stepacta .step .stepspan{background-color:var(--bs-body-secondary-bg)}
[data-bs-theme] .stepscta.tracker_stepacta .step.done,.stepscta.tracker_stepacta .step.done .stepspan{background-color:var(--app-accent)}
[data-bs-theme] .stepscta.tracker_stepacta .step.inactive,.stepscta.tracker_stepacta .step.inactive .stepspan{background-color:var(--bs-body-quinary-bg)}
[data-bs-theme] .stepscta.tracker_stepacta .step:before{background-color:var(--bs-body-secondary-bg)}
[data-bs-theme] .stepscta.tracker_stepacta .step.done:before{background-color:var(--app-accent)}
[data-bs-theme] .stepscta.tracker_stepacta .step.inactive:before{background-color:var(--bs-body-quinary-bg)}
[data-bs-theme] .stepscta.tracker_stepacta .step .stepspan i{color:var(--app-text-primary)!important}
[data-bs-theme] .stepscta.tracker_stepacta .step.done .stepspan i{color:#fff!important}

[data-bs-theme] .sortable_form_container p:first-child{ color:  var(--bs-body-color) !important;}
[data-bs-theme] #sidebar{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important;border-width: 0; color:  var(--bs-body-color) !important;}
[data-bs-theme] #docsSubmenu{background-color: var(--bs-body-secondary-bg) !important; border-color: var(--bs-border-color-translucent) !important;border-width: 0; color:  var(--bs-body-color) !important;}
[data-bs-theme] .card-counter{box-shadow: unset;}
.app#html[data-bs-theme] .card-counter .text-danger{color:  var(--bs-body-color) !important;}
.app#html[data-bs-theme] .filter, .app#html[data-bs-theme] .ribbonbox{background: var(--gallery_product-bg) !important; background-color: var(--gallery_product-bg) !important; border-color: var(--bs-border-color-translucent) !important; box-shadow: unset;}
.app#html[data-bs-theme] .highlight .gallery_product{border-color: var(--gallery_product-selected-border-color) !important;}
.app#html[data-bs-theme] .gallery_product{border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .filter .elem, .app#html[data-bs-theme] .filter .file-icon{background: var(--gallery_product-bg) !important; background-color: var(--gallery_product-bg) !important;}
.app#html[data-bs-theme] .filesgallery_wrapper .gallery_product .filedetails .filedetailstable td a:not([class*="btn"]){color:  var(--bs-body-color) !important;}
.app#html[data-bs-theme] .account_dashboard .panel-body .tab-pane > h5{background-color: rgba(var(--bs-black-rgb), 0.15) !important;}
.app#html[data-bs-theme] form#insert_appointment_schedule p{background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; min-height: unset !important; padding: 0;}
.app#html[data-bs-theme] form#insert_appointment_schedule label{color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] #internal_comments_panel_body .comment-list .comment-item .comment-body .panel-body *{color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .information{background-color: transparent !important;}
.app#html[data-bs-theme] .information .details{border-color: var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .onlinecls{background-color: var(--bs-success) !important; color: var(--bs-white) !important;}
.app#html[data-bs-theme] .awaycls, .app#html[data-bs-theme] .badge-danger{background-color: var(--bs-danger) !important; color: var(--bs-white) !important;}
.app#html[data-bs-theme] .section-content{background-color: var(--bs-body-bg) !important;}
.app#html[data-bs-theme] .section-content section:nth-child(odd){background-color: var(--bs-body-bg) !important;}
.app#html[data-bs-theme] .section-content section:nth-child(even){background-color: var(--bs-body-bg) !important;}
.app#html[data-bs-theme] .section-nav a{color: var(--bs-white) !important; }
.app#html[data-bs-theme] .section-nav .active > a, .app#html[data-bs-theme] .section-nav a:hover, .app#html[data-bs-theme] .section-nav a:focus{background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .section-nav a:hover::before, .app#html[data-bs-theme] .section-nav .active > a::before{box-shadow: 0 -20px 0 0 var(--bs-body-bg) !important;}
.app#html[data-bs-theme] .section-nav a:hover::after, .app#html[data-bs-theme] .section-nav .active > a::after{box-shadow: 0 20px 0 0 var(--bs-body-bg) !important;} 
@media screen and (max-width: 767px){
.app#html[data-bs-theme] .section-nav a:hover::before, .app#html[data-bs-theme] .section-nav .active > a::before,
.app#html[data-bs-theme] .section-nav a:hover::after, .app#html[data-bs-theme] .section-nav .active > a::after{box-shadow: 0 20px 0 0 var(--bs-body-bg) !important;}
}
.app#html[data-bs-theme] .messagetitle{background-color: transparent !important;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li, .app#html[data-bs-theme] .app-main .nav li.commentListCls{border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; float: unset;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li:not(:last-child), .app#html[data-bs-theme] .app-main .nav li.commentListCls:not(:last-child){border-bottom-color: var(--bs-border-color-translucent) !important; border-bottom-width: 1px !important;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li.highlightliCls, .app#html[data-bs-theme] .app-main .nav li.commentListCls.highlightliCls{background-color: var(--bs-body-secondary-bg) !important;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li a, .app#html[data-bs-theme] .app-main .nav li.commentListCls a{background: transparent !important; color: var(--bs-body-color) !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--bs-border-color-translucent) !important;}
.app#html[data-bs-theme] .messagetitle.comment-sub{padding: 0.5rem; margin: 0; min-width: 0; max-width: 100%; }
.app#html[data-bs-theme] .app-main .nav li.message_list_li a.unreadCls, .app#html[data-bs-theme] .app-main .nav li.commentListCls a.unreadCls{opacity: 1;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li span, .app#html[data-bs-theme] .app-main .nav li.commentListCls span{color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li span.text-success, .app#html[data-bs-theme] .app-main .nav li.commentListCls span.text-success{color: rgba(var(--text-success-color-rgb), var(--text-success-color-opacity)) !important;}
.app#html[data-bs-theme] .app-main .nav li.message_list_li span.text-danger, .app#html[data-bs-theme] .app-main .nav li.commentListCls span.text-danger{color: rgba(var(--text-danger-color-rgb), var(--text-danger-color-opacity)) !important;}
.app#html[data-bs-theme] .cmt_responded, .app#html[data-bs-theme] .cmt_notresponded{background-color: var(--bs-body-secondary-bg) !important;}
.app#html[data-bs-theme] .ul-group-label, .app#html[data-bs-theme] .ul-group-value{color: var(--bs-body-color);}
.app#html[data-bs-theme] .ul-group-bordered.ul-group:not(:last-child){border-bottom-color: var(--bs-border-color-translucent);}
.app#html[data-bs-theme] .directory-list .folder, .app#html[data-bs-theme] .directory-list .folder > a{ background-color: transparent !important; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important;     color: var(--app-text-primary) !important;}
.app#html[data-bs-theme] .tool-nav-links{ background-color: transparent; border-color: var(--bs-border-color-translucent) !important; border-width: 0 !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .tool-nav-links a{background-color: var(--bs-body-secondary-bg) !important; color: inherit !important;}
.app#html[data-bs-theme] .tool-nav-links a li, .app#html[data-bs-theme] .tool-nav-links a span{color: inherit !important;}
.app#html[data-bs-theme] .tool-nav-links a.enabled li{color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .tool-nav-links a:not(.disabled):hover{background-color: var(--bs-highlight-bg) !important;}
.app#html[data-bs-theme] .tool-nav-links a:not(.disabled):hover li{color: inherit !important;}
.app#html[data-bs-theme] .menu{background-color: transparent;}

.app#html[data-bs-theme] .folder-grid .folder{ 
    background: var(--app-bg-active); border: var(--app-border) !important; border-top: 1px solid var(--glass-highlight) !important; border-radius: var(--app-radius-sm) !important; box-shadow: var(--app-shadow-elevation) !important; backdrop-filter: var(--app-blur-strength); 
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg); border: var(--app-border); border-radius: var(--app-radius-sm); padding: 0; box-shadow: var(--app-shadow-elevation); backdrop-filter: var(--app-blur-strength); 
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; transform: translateZ(0) !important;
}
.app#html[data-bs-theme] .folder-grid .folder:hover{transform: translateY(-4px) !important;}

.app#html[data-bs-theme] .common-cls [id*="shownlist"]{padding: 0.5rem !important;}
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul{ flex: 1; display: flex; align-items: stretch; justify-content: stretch; flex-direction: unset; flex-wrap: wrap; gap:0.5rem;}
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul li{border-width: 0 !important; margin: 0 !important; flex: 1; display: flex; align-items: stretch; justify-content: stretch;}
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul li a{margin: 0 !important; padding:1rem !important; flex: 1; display: flex; align-items: stretch; justify-content: stretch; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul li a p{ color: var(--bs-body-color) !important;}

.bg-inverse-secondary{background-color: var(--bs-inverse-secondary) !important; color: var(--bs-body-color) !important;}

.overdue-cn-banner{background-color: transparent !important; color: var(--bs-body-color) !important; border-color:var(--bs-border-color-translucent) !important;}
.upload-area, .drop-zone{background: transparent !important; background-color: transparent !important; border: var(--app-border); border-radius: var(--app-radius-sm); backdrop-filter: var(--app-blur-strength); border-style: dashed !important;}

.title_and_orderType{color: var(--bs-body-color) !important;}

div#total_amt_paid, div#actual_margin, #margin_quoted, .final_expenses .col-md-5-value div,  #html[data-bs-theme] .app-body .form-group-new input, #html[data-bs-theme] .app-body .form-group-new select{background-color: var(--bs-border-color-translucent) !important;}
/* Force solid background for native dropdown options so text is visible */
#html[data-bs-theme] .app-body .form-group-new select option {
    background-color: var(--bs-body-secondary-bg) !important; /* Must be a solid color */
    color: var(--app-text-primary) !important;
}
.amount_sec:before, .percent_sec:before{background-color: var(--bs-border-color-translucent) !important;}
span.col-md-7-label{white-space: normal; word-break: break-word; display: flex; align-items: center;}

/* label */
.app#html[data-bs-theme] .app-main .label:not([class*="bg-"]):not([class*="label-"]){background-color: transparent !important; color: var(--bs-body-color) !important;border: 1px solid var(--bs-border-color-translucent) !important; line-height: inherit !important; padding: 0.25rem !important;}
.app#html[data-bs-theme] .app-main .label-success{border-color: var(--bs-success) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .app-main .label-danger{border-color: var(--bs-danger) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .app-main .label-warning{border-color: var(--bs-warning) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .app-main .label-info{border-color: var(--bs-info) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] .app-main .label-primary{border-color: var(--bs-primary) !important; color: var(--bs-body-color) !important;}

.app#html[data-bs-theme] .app-main label{font-weight: normal !important;}
.app#html[data-bs-theme] .app-main label abbr{border-width:0 !important; text-decoration: none !important;}

/* shadow root text */
[data-bs-theme]{--sr-text-color: var(--bs-body-color);}
[data-bs-theme=light]{--sr-text-color: var(--bs-body-color);}
.app#html[data-bs-theme] .text-dark.activate_links *{background-color: transparent !important; color: var(--bs-body-color) !important;}

/* avatar */
.app#html[data-bs-theme] .avatar{box-shadow: unset !important; background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color-translucent) !important; color:var( --bs-white-color) !important;}

/* caret */
[data-bs-theme]{--caret-color:var(--bs-border-color-translucent);}
.app#html[data-bs-theme] .caret{border-top: 4px solid var(--caret-color) !important; border-left-color: transparent !important; border-right-color: transparent !important;}

/* h tags */
.app#html[data-bs-theme] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.note-editor *){color: var(--bs-body-color) !important;}

/* text- dark/black/primary/danger/success/warning/info */
:root{ --bs-text-opacity:1; --bs-text-opacity_02:0.2; --bs-text-opacity_03:0.3; --bs-text-opacity_04:0.4; --bs-text-opacity_05:0.5; --bs-text-opacity_06:0.6; --bs-text-opacity_07:0.7; --bs-text-opacity_08:0.8; --bs-text-opacity_09:0.9;}
[data-bs-theme="light"]{    
    --text-muted-color: var(--bs-black-rgb); --text-muted-color-opacity: var(--bs-text-opacity_07);
    --text-dark-color-rgb: var(--bs-black-rgb); --text-dark-color-opacity: var(--bs-text-opacity);
    --text-black-color: var(--bs-black-rgb); --text-black-color-opacity: var(--bs-text-opacity);
    --text-secondary-color-rgb: var(--bs-secondary-rgb); --text-secondary-color-opacity: var(--bs-text-opacity);
    --text-light-color-rgb: var(--bs-light-rgb); --text-light-color-opacity: var(--bs-text-opacity);
    --text-primary-color-rgb: var(--bs-primary-rgb); --text-primary-color-opacity: var(--bs-text-opacity);
    --text-success-color-rgb: var(--bs-success-rgb); --text-success-color-opacity: var(--bs-text-opacity);
    --text-info-color-rgb: var(--bs-info-rgb); --text-info-color-opacity: var(--bs-text-opacity);
    --text-warning-color-rgb: var(--bs-warning-rgb); --text-warning-color-opacity: var(--bs-text-opacity);
    --text-danger-color-rgb: var(--bs-danger-rgb); --text-danger-color-opacity: var(--bs-text-opacity);
    --text-white-color-rgb: var(--bs-white-rgb); --text-white-color-opacity: var(--bs-text-opacity);
    --text-body-color-rgb: var(--bs-body-rgb); --text-body-color-opacity: var(--bs-text-opacity);
    
}
[data-bs-theme="dark"]{--bs-primary-rgb :72,146,255; --bs-success-rgb :0,197,106; --bs-info-rgb :15,200,213; --bs-warning-rgb :220,179,53; --bs-danger-rgb :220,53,69;}
[data-bs-theme="blue"]{--bs-primary-rgb :72,146,255; --bs-success-rgb :0,197,106; --bs-info-rgb :15,200,213; --bs-warning-rgb :220,179,53; --bs-danger-rgb :220,53,69;}
[data-bs-theme="green"]{ --bs-primary-rgb :72,146,255; --bs-success-rgb :0,197,106; --bs-info-rgb :15,200,213; --bs-warning-rgb :220,179,53; --bs-danger-rgb :220,53,69;}
[data-bs-theme="red"]{ --bs-primary-rgb :72,146,255; --bs-success-rgb :0,197,106; --bs-info-rgb :15,200,213; --bs-warning-rgb :220,179,53; --bs-danger-rgb :255,112,125; }

[data-bs-theme="dark"],[data-bs-theme="blue"],[data-bs-theme="red"],[data-bs-theme="green"]{ 
    --text-muted-color: var(--bs-white-rgb); --text-muted-color-opacity: var(--bs-text-opacity); 
    --text-dark-color-rgb: var(--bs-white-rgb); --text-dark-color-opacity: var(--bs-text-opacity);
    --text-black-color: var(--bs-white-rgb); --text-black-color-opacity: var(--bs-text-opacity);
    --text-secondary-color-rgb: var(--bs-white-rgb); --text-secondary-color-opacity: var(--bs-text-opacity);
    --text-light-color-rgb: var(--bs-white-rgb); --text-light-color-opacity: var(--bs-text-opacity);
    --text-primary-color-rgb: var(--bs-primary-rgb); --text-primary-color-opacity: var(--bs-text-opacity);
    --text-success-color-rgb: var(--bs-success-rgb); --text-success-color-opacity: var(--bs-text-opacity);
    --text-info-color-rgb: var(--bs-info-rgb); --text-info-color-opacity: var(--bs-text-opacity);
    --text-warning-color-rgb: var(--bs-warning-rgb); --text-warning-color-opacity: var(--bs-text-opacity);
    --text-danger-color-rgb: var(--bs-danger-rgb); --text-danger-color-opacity: var(--bs-text-opacity);
    --text-white-color-rgb: var(--bs-white-rgb); --text-white-color-opacity: var(--bs-text-opacity);
    --text-body-color-rgb: var(--bs-white-rgb); --text-body-color-opacity: var(--bs-text-opacity);
}

.app#html[data-bs-theme] .text-muted{color: rgba(var(--text-muted-color),var(--text-muted-color-opacity)) !important;}
.app#html[data-bs-theme] .text-dark{ color: rgba(var(--text-dark-color-rgb), var(--text-dark-color-opacity)) !important;}
.app#html[data-bs-theme] .text-black{color: rgba(var(--text-black-color-rgb), var(--text-dark-color-opacity)) !important;}
.app#html[data-bs-theme] .text-secondary{color: rgba(var(--text-secondary-color-rgb), var(--text-secondary-color-opacity)) !important;}
.app#html[data-bs-theme] .text-light{color: rgba(var(--text-light-color-rgb), var(--text-light-color-opacity)) !important;}
.app#html[data-bs-theme] .text-primary{color: rgba(var(--text-primary-color-rgb), var(--text-primary-color-opacity)) !important;}
.app#html[data-bs-theme] .text-success{color: rgba(var(--text-success-color-rgb), var(--text-success-color-opacity)) !important;}
.app#html[data-bs-theme] .text-info{color: rgba(var(--text-primary-color-rgb), var(--text-primary-color-opacity)) !important;}
.app#html[data-bs-theme] .text-warning{color: rgba(var(--text-warning-color-rgb), var(--text-warning-color-opacity)) !important;}
.app#html[data-bs-theme] .text-danger{color: rgba(var(--text-danger-color-rgb), var(--text-danger-color-opacity)) !important;}
.app#html[data-bs-theme] .text-white{color: rgba(var(--text-white-color-rgb), var(--text-white-color-opacity)) !important;}
.app#html[data-bs-theme] .text-body{color: rgba(var(--text-body-color-rgb), var(--text-body-color-opacity)) !important;}

/* bg- dark/black/primary/danger/success/warning/info */
[data-bs-theme]{--bs-light: #f8f9fa;}
.app#html[data-bs-theme] .bg-light{background-color: var(--bs-body-secondary-bg) !important; color:var( --bs-body-color) !important;}
.app#html[data-bs-theme] .bg-danger{ background-color: var(--bs-danger) !important;  color:var( --bs-white) !important;}
.app#html[data-bs-theme] .bg-success{ background-color: var(--bs-success) !important;  color:var( --bs-white) !important;}
.app#html[data-bs-theme] .bg-warning{ background-color: var(--bs-warning) !important;  color:var( --bs-black) !important;}
.app#html[data-bs-theme] .bg-info{ background-color: var(--bs-info) !important;  color:var( --bs-white) !important;}
.app#html[data-bs-theme] .bg-primary{ background-color: var(--bs-primary) !important;  color:var( --bs-white) !important;}
.app#html[data-bs-theme] .bg-dark{ background-color: var(--bs-dark) !important;  color:var( --bs-white) !important;}

/* text-bg - dark/black/primary/danger/success/warning/info */
.app#html[data-bs-theme] .text-bg-primary { color: #fff !important; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-secondary { color: #fff !important; background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-success { color: #fff !important; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-danger { color: #fff !important; background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-warning { color: #000 !important; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-info { color: #000 !important; background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-light { color: #000 !important; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;}
.app#html[data-bs-theme] .text-bg-dark { color: #fff !important; background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;}

/* buttons */
[data-bs-theme] .btn-default, [data-bs-theme] .btn-secondary, [data-bs-theme] a.btn[class*='btn-default']{color: var(--bs-black) !important;}
[data-bs-theme] .btn-warning{color: var(--bs-black) !important;}
.app#html[data-bs-theme] .btn-danger, .app#html[data-bs-theme] .btn-success, .app#html[data-bs-theme] .btn-info, .app#html[data-bs-theme] .btn-primary, .app#html[data-bs-theme] .btn-dark, .app#html[data-bs-theme] .btn:not([class*="accordion"])[data-bs-dismiss="modal"], .app#html[data-bs-theme]  .btn-default[type="submit"] {color: var(--bs-white) !important;}

[data-bs-theme]{
    --default-start-bg:#e5e5e5;
    --default-end-bg:#cccccc;
    --light-start-bg:#232031;
    --light-end-bg:#232031;
    --secondary-start-bg:#e5e5e5;
    --secondary-end-bg:#cccccc;
    --dark-start-bg:#232031;
    --dark-end-bg:#38354a;
    --success-start-bg:#11987c;
    --success-end-bg:#207866;
    --danger-start-bg:#d54f66;
    --danger-end-bg:#b83b51;
    --primary-start-bg:#7266ba;
    --primary-end-bg:#5446ac;
    --info-start-bg:#11A7DB;
    --info-end-bg:#007da8;
    --warning-start-bg:#EBA600;
    --warning-end-bg:#ffbc1a;
    --orange-start-bg:#ff7901;
    --orange-end-bg:#e46c00;
    --rating-start-bg:#BB2222;
    --rating-end-bg:#a52a2a;  
    --dark-tabs-link-start-bg:#161443;
    --dark-tabs-link-end-bg:#353358; 
    
    --btn-start-bg:var(--dark-start-bg); --btn-end-bg:var(--dark-end-bg); --btn-color:var( --bs-white);
}

.customwrapper .btn-group .btn-default{border: 1px solid var(--bs-border-color-translucent) !important}
tr.shown tr td *.btn-success{background-color: unset !important}

.btn-dark, .customwrapper .btn-dark, .pmd-card-dark, .navbar-nav#header-timers>li{--btn-start-bg:var(--dark-start-bg); --btn-end-bg:var(--dark-end-bg);}
.customwrapper .btn-dark.active{--btn-start-bg:var(--success-start-bg); --btn-end-bg:var(--success-end-bg);}
.btn-primary, .customwrapper .btn-primary, .pmd-card-primary, .customwrapper .totaltimespent, p.pstatus.unassigned{--btn-start-bg:var(--primary-start-bg); --btn-end-bg:var(--primary-end-bg); }
.btn-default, .customwrapper .btn-default, .pmd-card-default, .customwrapper table.table-striped > tbody > tr td a.btn-default, .dark_mode .customwrapper table.table-striped > tbody > tr td a.btn-default, #projectslistview, #projectsfolderview{--btn-start-bg:var(--default-start-bg); --btn-end-bg:var(--default-end-bg); --btn-color:var(--bs-black); }
.btn-secondary, .customwrapper .btn-secondary, .pmd-card-secondary{--btn-start-bg:var(--secondary-start-bg); --btn-end-bg:var(--secondary-end-bg); --btn-color:var(--bs-black); }
.btn-danger, .customwrapper .btn-danger, .pmd-card-danger, .mywrapper .btn-cancel, .customwrapper .switch span, .modal .switch span, .dt-buttons a.reset_dt, .charttypebtn{--btn-start-bg:var(--danger-start-bg); --btn-end-bg:var(--danger-end-bg); }
.btn-success, .customwrapper .btn-success, .pmd-card-success, tr.shown tr td *.btn-success, .customwrapper .switch input:checked span, .switch input:checked + span, .modal .switch input:checked span, .calculator_wrapper ul.dropdown-menu > li > a.btn-success, .dt-buttons a.buttons-csv, #projectslistview.active, #projectsfolderview.active{--btn-start-bg:var(--success-start-bg); --btn-end-bg:var(--success-end-bg);}
.btn-info, .customwrapper .btn-info, .pmd-card-info, .modal .btn-info, .calculator_wrapper ul.dropdown-menu > li > a.btn-info, .dark_mode .customwrapper .pro-nav-tabs.nav-tabs-dashed li.btn-info{--btn-start-bg:var(--info-start-bg); --btn-end-bg:var(--info-end-bg)}
.customwrapper .btn-orange{--btn-start-bg:var(--orange-start-bg); --btn-end-bg:var(--orange-end-bg);}
.customwrapper .btn-warning, .modal .btn-warning, .calculator_wrapper ul.dropdown-menu > li > a.btn-warning, p.pstatus.bid_request{--btn-start-bg:var(--warning-start-bg); --btn-end-bg:var(--warning-end-bg);}
.customwrapper .rating-email-btn{--btn-start-bg:var(--rating-start-bg); --btn-end-bg:var(--rating-end-bg);}
.pro-nav-tabs.nav-tabs-dashed li a{--btn-start-bg:var(--secondary-start-bg); --btn-end-bg:var(--secondary-end-bg); --btn-color:var(--bs-white);}

.dark_mode .pro-nav-tabs.nav-tabs-dashed li a{--btn-start-bg:var(--dark-tabs-link-start-bg); --btn-end-bg:var(--dark-tabs-link-end-bg); --btn-color:var(--bs-white); }
.customwrapper .btn-closed, .modal .btn-closed, .customwrapper .btn-closed, .modal .btn-closed{--btn-start-bg:var(--danger-start-bg); --btn-end-bg:var(--danger-end-bg); }
.btn:not([class*="accordion"])[data-bs-dismiss="modal"], .btn[data-bs-dismiss="modal"][class*="btn-danger"], .navbar-nav#header-timers>li.login_btns{--btn-start-bg:var(--danger-start-bg); --btn-end-bg:var(--danger-end-bg); }
.btn[class*="btn-"][type="submit"], .btn[data-bs-dismiss="modal"][class*="btn-success"], .card .btn[class*="btn-"][type="submit"], .navbar-nav#header-timers>li.away_btn_success{--btn-start-bg:var(--success-start-bg); --btn-end-bg:var(--success-end-bg); }

.btn-dark, .btn-primary, .btn-info, .btn-warning, .btn-danger, .btn-succes,
.btn-dark, .customwrapper .btn-dark, .pmd-card-dark, .navbar-nav#header-timers>li,
.customwrapper .btn-dark.active,
.btn-primary, .customwrapper .btn-primary, .pmd-card-primary, .customwrapper .totaltimespent, p.pstatus.unassigned,
.btn-default, .customwrapper .btn-default, .pmd-card-default, .customwrapper table.table-striped > tbody > tr td a.btn-default, .dark_mode .customwrapper table.table-striped > tbody > tr td a.btn-default, #projectslistview, #projectsfolderview,
.btn-secondary, .customwrapper .btn-secondary, .pmd-card-secondary,
.btn-danger, .customwrapper .btn-danger, .pmd-card-danger, .mywrapper .btn-cancel, .customwrapper .switch span, .modal .switch span, .dt-buttons a.reset_dt, .charttypebtn,
.btn-success, .customwrapper .btn-success, .pmd-card-success, tr.shown tr td *.btn-success, .customwrapper .switch input:checked span, .modal .switch input:checked span, .calculator_wrapper ul.dropdown-menu > li > a.btn-success, .dt-buttons a.buttons-csv, #projectslistview.active, #projectsfolderview.active,
.btn-info, .customwrapper .btn-info, .pmd-card-info, .modal .btn-info, .calculator_wrapper ul.dropdown-menu > li > a.btn-info, .dark_mode .customwrapper .pro-nav-tabs.nav-tabs-dashed li.btn-info,
.customwrapper .btn-orange,
.customwrapper .btn-warning, .modal .btn-warning, .calculator_wrapper ul.dropdown-menu > li > a.btn-warning, p.pstatus.bid_request,
.customwrapper .rating-email-btn,
.pro-nav-tabs.nav-tabs-dashed li a,
.dark_mode .pro-nav-tabs.nav-tabs-dashed li a,
.customwrapper .btn-closed, .modal .btn-closed, .customwrapper .btn-closed, .modal .btn-closed,
.btn:not([class*="accordion"])[data-bs-dismiss="modal"], .btn[data-bs-dismiss="modal"][class*="btn-danger"], .navbar-nav#header-timers>li.login_btns,
.btn[class*="btn-"][type="submit"], .btn[data-bs-dismiss="modal"][class*="btn-success"], .card .btn[class*="btn-"][type="submit"], .navbar-nav#header-timers>li.away_btn_success
{    
    background: linear-gradient(to right, var(--btn-end-bg) 50%, var(--btn-start-bg) 50%) !important;
    background-size: 200% 100% !important;
    background-position: right bottom !important;
    transition: all 0.5s ease-out;
    color: var(--btn-color, #ffffff) !important;
    border: 0 !important;
}

.btn-dark:hover, .customwrapper .btn-dark:hover, .pmd-card-dark:hover, .navbar-nav#header-timers>li:hover,
.customwrapper .btn-dark.active:hover,
.btn-primary:hover, .customwrapper .btn-primary:hover, .pmd-card-primary:hover, .customwrapper .totaltimespent:hover, p.pstatus.unassigned:hover,
.btn-default:hover, .customwrapper .btn-default:hover, .pmd-card-default:hover, .customwrapper table.table-striped > tbody > tr td a.btn-default:hover,.dark_mode .customwrapper table.table-striped > tbody > tr td a.btn-default:hover, #projectslistview:hover, #projectsfolderview:hover,
.btn-secondary:hover, .customwrapper .btn-secondary:hover, .pmd-card-secondary:hover,
.btn-danger:hover, .customwrapper .btn-danger:hover, .pmd-card-danger:hover, .mywrapper .btn-cancel:hover, .customwrapper .switch span:hover, .modal .switch span:hover,.dt-buttons a.reset_dt:hover, .charttypebtn:hover,
.btn-success:hover, .customwrapper .btn-success:hover, .pmd-card-success:hover, tr.shown tr td *.btn-success:hover, .customwrapper .switch input:checked span:hover, .modal .switch input:checked span:hover, .calculator_wrapper ul.dropdown-menu > li > a.btn-success:hover, .dt-buttons a.buttons-csv:hover, #projectslistview.active:hover, #projectsfolderview.active:hover,
.btn-info:hover, .customwrapper .btn-info:hover, .pmd-card-info:hover , .modal .btn-info:hover, .calculator_wrapper ul.dropdown-menu > li > a.btn-info:hover, .dark_mode .customwrapper .pro-nav-tabs.nav-tabs-dashed li.btn-info:hover,
.customwrapper .btn-orange:hover,
.customwrapper .btn-warning:hover, .modal .btn-warning:hover, .calculator_wrapper ul.dropdown-menu > li > a.btn-warning:hover, p.pstatus.bid_request:hover,
.customwrapper .rating-email-btn:hover,
.pro-nav-tabs.nav-tabs-dashed li a:hover, .dark_mode .pro-nav-tabs.nav-tabs-dashed li a:hover,
.customwrapper .btn-closed:hover, .modal .btn-closed:hover, .customwrapper .btn-closed:focus, .modal .btn-closed:focus,
.btn:not([class*="accordion"])[data-bs-dismiss="modal"]:hover, .btn[data-bs-dismiss="modal"][class*="btn-danger"]:hover, .navbar-nav#header-timers>li.login_btns:hover,
.btn[class*="btn-"][type="submit"]:hover, .btn[data-bs-dismiss="modal"][class*="btn-success"]:hover, .navbar-nav#header-timers>li.away_btn_success:hover
{background-position: left bottom !important}

/* custom bg & table td - dark/black/primary/danger/success/warning/info */
[data-bs-theme]{
    --status-bg-dark: #232031;
    --status-bg-gray: #747070;
    --status-bg-green: green;
    --status-bg-green-one: #00b050;
    --status-bg-skyblue: #9bc2e6;
    --status-bg-skyblue-one: #1e2122;
    --status-bg-orange: #f4b084;
    --status-bg-blue: #000082;
    --status-bg-violet: #703080;
    --status-bg-violet-one: #9250d0;
    --status-bg-yellow: #ffc000;
    --status-bg-red: #c00000;
}
.bid_request > a,.bid_approval>a {  color: #fff !important; }

.status_empty{background: var(--status-bg-dark) !important; color: var(--bs-body-color) !important;}
.bid_request{  --bs-body-color: var(--bs-black); background: var(--status-bg-yellow) !important; color: var(--bs-body-color) !important;}
.bid_approval, .status_scheduled, .status_visited{  background: var(--status-bg-green) !important ; color: var(--bs-body-color) !important;}
.assigned, .inspection_set, .status_in_progress{background: var(--status-bg-skyblue) !important; color: var(--bs-body-color) !important;}
.awaiting_bid,.work_in_progress,.bid_request_corrections{background: var(--status-bg-orange) !important; color: var(--bs-body-color) !important;}
.bid_submitted,.payment_received,.invoiced{background: var(--status-bg-blue) !important; color: var(--bs-body-color) !important;}
.in_review,.qc_review{background: var(--status-bg-violet) !important; color: var(--bs-body-color) !important;}
.on_hold, .cancelled, .pstatus.cancelled {--bs-body-color: var(--bs-black); background: var(--status-bg-yellow) !important; color: var(--bs-body-color) !important;}
.on_hold p a span, .cancelled p a span, .client_pending_corrections p a span { --bs-body-color: var(--bs-black); color: var(--bs-body-color) !important;}
.bid_received{background: var(--status-bg-skyblue-one) !important; color: var(--bs-white) !important;}
.invoice_review,.client_pending_corrections{background: var(--status-bg-yellow) !important; color: var(--bs-body-color) !important;}
.emergency_proj, .status_cancelled, .status_rescheduled, .b-red, .final_walk_through_pending{background: var(--status-bg-red) !important; color: var(--bs-body-color) !important;}
.project_completed{background: var(--status-bg-green-one) !important; color: var(--bs-body-color) !important;}
.unassigned {  background: var(--status-bg-violet-one) !important; color: var(--bs-body-color) !important;}

.app#html[data-bs-theme] table tr.selected{background-color: transparent !important;}
.app#html[data-bs-theme] table tr.selected td:not(.status_empty):not(.bid_request):not(.bid_approval):not(.status_scheduled):not(.status_visited):not(.assigned):not(.inspection_set):not(.status_in_progress):not(.awaiting_bid):not(.work_in_progress):not(.bid_request_corrections):not(.bid_submitted):not(.payment_received):not(.invoiced):not(.in_review):not(.qc_review):not(.on_hold):not(.cancelled):not(.pstatus):not(.bid_received):not(.invoice_review):not(.client_pending_corrections):not(.emergency_proj):not(.status_cancelled):not(.status_rescheduled):not(.b-red):not(.final_walk_through_pending):not(.project_completed):not(.unassigned)
{background: var(--table-selected-bg) !important; background-color: var(--table-selected-bg) !important; background: var(--table-selected-bg) !important; box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.3) !important;}


.app#html[data-bs-theme] table td p, .app#html[data-bs-theme] table td p a:not(.btn), .app#html[data-bs-theme] table td p span, .app#html[data-bs-theme] table td p i{background-color: transparent !important; color: inherit !important;}

.app#html[data-bs-theme] table td.status_empty{background: var(--status-bg-dark) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.bid_request{  --bs-body-color: var(--bs-black); background: var(--status-bg-yellow) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.bid_approval, .app#html[data-bs-theme] table td.status_scheduled, .app#html[data-bs-theme] table td.status_visited{  background: var(--status-bg-green) !important ; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.assigned, .app#html[data-bs-theme] table td.inspection_set, .app#html[data-bs-theme] table td.status_in_progress{background: var(--status-bg-skyblue) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.awaiting_bid, .app#html[data-bs-theme] table td.work_in_progress, .app#html[data-bs-theme] table td.bid_request_corrections{background: var(--status-bg-orange) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.bid_submitted, .app#html[data-bs-theme] table td.payment_received, .app#html[data-bs-theme] table td.invoiced{background: var(--status-bg-blue) !important; color: var(--bs-body-color) !important;}

.app#html[data-bs-theme] table td.in_review, .app#html[data-bs-theme] table td.qc_review{background: var(--status-bg-violet) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.on_hold, .app#html[data-bs-theme] table td.cancelled, .app#html[data-bs-theme] table td.pstatus.cancelled {--bs-body-color: var(--bs-black); background: var(--status-bg-yellow) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.on_hold p a span, .app#html[data-bs-theme] table td.cancelled p a span, .app#html[data-bs-theme] table td.client_pending_corrections p a span { --bs-body-color: var(--bs-black); color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.bid_received{background: var(--status-bg-skyblue-one) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.invoice_review, .app#html[data-bs-theme] table td.client_pending_corrections{background: var(--status-bg-yellow) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.emergency_proj, .app#html[data-bs-theme] table td.status_cancelled, .app#html[data-bs-theme] table td.status_rescheduled, .app#html[data-bs-theme] table td.b-red, .app#html[data-bs-theme] table td.final_walk_through_pending{background: var(--status-bg-red) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.project_completed{background: var(--status-bg-green-one) !important; color: var(--bs-body-color) !important;}
.app#html[data-bs-theme] table td.unassigned {  background: var(--status-bg-violet-one) !important; color: var(--bs-body-color) !important;}


.app#html[data-bs-theme] table td.bid_submitted.color_white, .app#html[data-bs-theme] table td.payment_received.color_white, .app#html[data-bs-theme] table td.invoiced.color_white,
.app#html[data-bs-theme] table td.bid_approval.color_white, .app#html[data-bs-theme] table td.status_scheduled.color_white, .app#html[data-bs-theme] table td.status_visited.color_white{color: var(--bs-white) !important;}

/* leads/kanban - article */
[data-bs-theme]{--kanban-bg: rgba(var(--bs-black-rgb),0.3);}
[data-bs-theme=light]{--kanban-bg: rgba(var(--bs-black-rgb),0.03);}
.app#html[data-bs-theme] .sortableKanbanBoards_row{grid-gap: 0.5rem;}
.app#html[data-bs-theme] .sortableKanbanBoards_cols .panel{background: var(--panel-bg) !important; background-color: var(--panel-bg) !important; box-shadow: unset !important; max-height: unset; }
.app#html[data-bs-theme] .kanban-centered{display: grid; grid-gap: 0.5rem; padding: 0; margin: 0;}
.app#html[data-bs-theme] .kanban-entry{background-color: var(--kanban-bg) !important; box-shadow: unset !important; border-left: 4px solid var(--bs-highlight-bg) !important; color: var(--bs-body-color) !important; border-radius: var(--bs-border-radius-xl) !important; padding: 0; margin: 0;}
.app#html[data-bs-theme] .kanban-label{background-color: transparent !important; border-color: var(--bs-border-color-translucent); border-width: 0px !important; color: inherit !important;}
.app#html[data-bs-theme] .kanban-label h2{font-size: 16px !important;}
.app#html[data-bs-theme] .kanban-label h2 a{font-size: inherit !important;}


/*  ========================= Theme styles setup end ========================= */


/* ========================= Themes - toolbar styles setup ========================= */
.navbar.navbar_style1.nav_theme a.fabItem[data-theme-content="green"]{--nt-body-bg: #127600; color: var(--nt-body-bg) !important;}
.navbar.navbar_style1.nav_theme a.fabItem[data-theme-content="red"]{--nt-body-bg: #ac128f; color: var(--nt-body-bg) !important;}
.navbar.navbar_style1.nav_theme a.fabItem[data-theme-content="blue"]{--nt-body-bg: #0d369d; color: var(--nt-body-bg) !important;}
.navbar.navbar_style1.nav_theme a.fabItem[data-theme-content="dark"]{--nt-body-bg: #333333; color: var(--nt-body-bg) !important;}
.navbar.navbar_style1.nav_theme a.fabItem[data-theme-content="light"]{--nt-body-bg: #8c8b8b; color: var(--nt-body-bg) !important;}

.fab{position: absolute; z-index: 3; display: flex;align-items: center;justify-content: center;transform-origin: center;transition: 0.25s} /*z-index: 3; -> should be greater than or 3 - #imrudeen*/
.fab.active .fabTrigger{transform: scale(1); cursor: pointer;}
.fab.active .fabTrigger .icon{background: transparent;transition: background 0.3s ease}
.fab.active .fabTrigger .icon, .fab.active .fabTrigger .icon:before, .fab.active .fabTrigger .icon:after{height: 0.1rem}
.fab.active .fabTrigger .icon:before, .fab.active .fabTrigger .icon:after{width: 15px;transform-origin: 50% 50%;transition: all 100ms ease, width 100ms 100ms ease, transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65)}
.fab.active .fabTrigger .icon:before{left: 50%;transform: translateX(-50%) rotate(45deg)}
.fab.active .fabTrigger .icon:after{right: 50%;transform: translateX(50%) rotate(-45deg)}
.fab.active .fabNav .fabItem{opacity: 1;visibility: visible;transition: 0.35s cubic-bezier(0.4, 2.08, 0.55, 1)}

.fab .fabTrigger{position: relative;z-index: 1;width: 40px;height: 40px;color: #FFF;cursor: pointer;outline: none;border: 0;border-radius: 100px;background: rgba(255,255,255,0.5); transform: scale(0.675);box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(108, 46, 185, 0.2);transition: 0.35s cubic-bezier(0.4, 2.08, 0.55, 1);}
.fab .fabTrigger .icon{top: 50%;left: 50%;transform: translate(-50%, -50%);transition: background 0.3s ease; padding: 0;}
.fab .fabTrigger .icon, .fab .fabTrigger .icon:before, .fab .fabTrigger .icon:after{position: absolute;display: block;background: #000;width: 3px;height: 3px;border-radius: 10px}
.fab .fabTrigger .icon:before, .fab .fabTrigger .icon:after{content: '';transition: all 100ms ease, right 100ms 100ms ease, left 100ms 100ms ease}
.fab .fabTrigger .icon:before{left: -7px;transform: translateX(-50%)}
.fab .fabTrigger .icon:after{right: -7px;transform: translateX(50%)}

.fab .fabNav{display: none;align-items: center}
.fab.active .fabNav{display: flex;align-items: center}
.fab .fabNav .fabItem{position: relative;display: flex;align-items: center;justify-content: center;/*margin: 0 12px;*/width: 30px;height: 30px;font-family: 'Noto Sans', sans-serif;outline: none;border: 0;text-decoration: none;border-radius: 100px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(108, 46, 185, 0.2);opacity: 0.0001;visibility: hidden;will-change: transform;transition: 0.35s cubic-bezier(0.4, 2.08, 0.55, 1); cursor: pointer;}
.fab .fabNav .fabItem:before{content: "";position: absolute;z-index: -1;top: 0;left: 0;width: 100%;height: 100%;border-radius: 100%;background-color: #fff;transition: 0.25s}
.fab .fabNav .fabItem i{color: #000;transition: 0.25s}
.fab .fabNav .fabItem:hover:before{background-color: #000}
.fab .fabNav .fabItem:hover i{color: #fff}
.fab .fabNav .fabItem:hover .fabTooltip{opacity: 1;visibility: visible}
/*.fab .fabNav .fabItem{ border: 1px solid rgba(var(--bs-white-rgb), 1); box-shadow: unset;}*/
/*.fab .fabNav .fabItem[data-theme-content="green"]:before{background-color: var(--bs-success); border: 10px solid rgba(var(--bs-white-rgb), 0.6);}
.fab .fabNav .fabItem[data-theme-content="red"]:before{background-color: var(--bs-danger); border: 10px solid rgba(var(--bs-white-rgb), 0.6);}
.fab .fabNav .fabItem[data-theme-content="blue"]:before{background-color: var(--bs-primary); border: 10px solid rgba(var(--bs-white-rgb), 0.6);}
.fab .fabNav .fabItem[data-theme-content="dark"]:before{background-color: #002a33; border: 10px solid rgba(var(--bs-white-rgb), 0.5);}
.fab .fabNav .fabItem[data-theme-content="light"]:before{background-color: var(--bs-white); border: 10px solid rgba(var(--bs-dark-rgb), 0.2);}*/

.fab .fabTooltip{position: absolute;z-index: -2;padding: 5px;color: #FFF;font-size: 12px;border-radius: 5px;background: rgba(0, 0, 0, 0.8);opacity: 0;visibility: hidden;cursor: default;pointer-events: none;transition: 0.5s}

.fabHorizontal{flex-direction: row;bottom: 100px;left: 50%;transform: translate(-50%, 0); grid-gap: 0.5rem;}
.fabHorizontal.active .fabNav.fabNav--left .fabItem{left: 0;transform: scale(1) translateX(0)}
.fabHorizontal.active .fabNav.fabNav--right .fabItem{right: 0;transform: scale(1) translateX(0)}
.fabHorizontal .fabTrigger{/*margin: 0 12px*/}
.fabHorizontal .fabNav{flex-direction: row; grid-gap: 0.5rem;}
.fabHorizontal .fabNav.fabItem:hover .fabTooltip{top: calc(-100% - 10px); transform: translate(-50%, 50%) scale(1)}
.fabHorizontal .fabNav.fabNav--left .fabItem{left: 45px;transform: scale(0.8) translateX(10px)}
.fabHorizontal .fabNav.fabNav--left .fabItem:nth-child(1){transition-delay: 0.5s}
.fabHorizontal .fabNav.fabNav--left .fabItem:nth-child(2){transition-delay: 0.4s}
.fabHorizontal .fabNav.fabNav--left .fabItem:nth-child(3){transition-delay: 0.3s}
.fabHorizontal .fabNav.fabNav--left .fabItem:nth-child(4){transition-delay: 0.2s}
.fabHorizontal .fabNav.fabNav--left .fabItem:nth-child(5){transition-delay: 0.1s}
.fabHorizontal .fabNav.fabNav--right .fabItem{right: 45px;transform: scale(0.8) translateX(-10px)}
.fabHorizontal .fabNav.fabNav--right .fabItem:nth-child(1){transition-delay: 0.1s}
.fabHorizontal .fabNav.fabNav--right .fabItem:nth-child(2){transition-delay: 0.2s}
.fabHorizontal .fabNav.fabNav--right .fabItem:nth-child(3){transition-delay: 0.3s}
.fabHorizontal .fabNav.fabNav--right .fabItem:nth-child(4){transition-delay: 0.4s}
.fabHorizontal .fabNav.fabNav--right .fabItem:nth-child(5){transition-delay: 0.5s}
.fabHorizontal .fabTooltip{top: -80%;left: 50%;transform-origin: center center;transform: translate(-50%, 50%) scale(0)}

.fabVertical{flex-direction: column;top: 2%;right: 0px;transform: translate(0, 0%); grid-gap: 0.5rem;} /*top: 50%; transform: translate(0, -50%); -> based on header nav transition position update - #imrudeen*/
.fabVertical.active .fabNav.fabNav--left .fabItem{left: 0;transform: scale(1) translateX(0)}
.fabVertical.active .fabNav.fabNav--right .fabItem{right: 0;transform: scale(1) translateX(0)}
.fabVertical .fabTrigger{/*margin: 12px 0;*/ grid-gap: 0.25rem; transform: rotate(90deg) scale(0.675);}
.fabVertical .fabNav{flex-direction: column; grid-gap: 0.25rem;}
.fabVertical .fabNav .fabItem{/*margin: 12px 0*/}
.fabVertical .fabNav .fabItem:hover .fabTooltip{right: calc(100% + 10px);transform: translate(0, -50%) scale(1)}
.fabVertical .fabNav.fabNav--left .fabItem{left: 0;transform: scale(0.8) translateY(10px)}
.fabVertical .fabNav.fabNav--left .fabItem:nth-child(1){transition-delay: 0.5s}
.fabVertical .fabNav.fabNav--left .fabItem:nth-child(2){transition-delay: 0.4s}
.fabVertical .fabNav.fabNav--left .fabItem:nth-child(3){transition-delay: 0.3s}
.fabVertical .fabNav.fabNav--left .fabItem:nth-child(4){transition-delay: 0.2s}
.fabVertical .fabNav.fabNav--left .fabItem:nth-child(5){transition-delay: 0.1s}
.fabVertical .fabNav.fabNav--right .fabItem{left: 0%;transform: scale(0.8) translateY(-10px)}
.fabVertical .fabNav.fabNav--right .fabItem:nth-child(1){transition-delay: 0.1s}
.fabVertical .fabNav.fabNav--right .fabItem:nth-child(2){transition-delay: 0.2s}
.fabVertical .fabNav.fabNav--right .fabItem:nth-child(3){transition-delay: 0.3s}
.fabVertical .fabNav.fabNav--right .fabItem:nth-child(4){transition-delay: 0.4s}
.fabVertical .fabNav.fabNav--right .fabItem:nth-child(5){transition-delay: 0.5s}
.fabVertical .fabTooltip{top: 50%;right: 0;transform-origin: center right;transform: translate(0, -50%) scale(0)}

/* ========================= darkmode & lightmode - overwrite theme on any theme styles setup start ========================= */
/*[data-bs-theme] .light_mode .nav_theme{--nt-body-bg: #23214b; --nt-body-bg-1: #253B73; --nt-body-bg-2: #1A42A6; --nt-shadow-bg: #cccccc; --nt-body-hover-bg: #ffffff; --nt-body-color:#ffffff; --nt-body-hover-color: #000000;}
[data-bs-theme] .dark_mode .nav_theme{--nt-body-bg: #23214b; --nt-body-bg-1: #253B73; --nt-body-bg-2: #1A42A6; --nt-shadow-bg: #2f2c53; --nt-body-hover-bg: #171535; --nt-body-color:#ffffff; --nt-body-hover-color: #ffffff; --nt-border-color-translucent: rgba(255, 255, 255, 0.09); --nt-child-border-color-translucent: var(--nt-border-color-translucent);}*/
/* ========================= darkmode & lightmode - overwrite theme on any theme styles setup end ========================= */


/* Project PDF Styles */
[data-bs-theme]{--pdf-body-bg:var(--bs-body-bg); --pdf-header-bg:var(--bs-body-secondary-bg); --pdf-color:var(--bs-body-color); --pdf-link-color:var(--bs-primary); --pdf-highlight-color:var(--bs-danger); --pdf-border-color: var(--bs-border-color-translucent) ;}

#html.project_pdf #printpagebutton{margin: 2rem auto !important; background-color:var(--bs-success) !important;  background-color:var(--bs-success) !important; color: var(--bs-white) !important;}
#html.project_pdf, #html.project_pdf #body_section{background-color:var(--pdf-body-bg) !important; color: var(--pdf-color) !important; border-color: var(--pdf-border-color) !important;}
#html.project_pdf{height: 100vh !important; overflow: hidden overlay !important; }
#html.project_pdf #body_section{height: 100vh !important; overflow: unset !important; }
#html.project_pdf .container{ background-color:inherit !important; color: inherit !important; margin: 2rem auto !important; border-color: var(--pdf-border-color) !important; border-radius: var(--bs-border-radius-xxl); margin: 2rem auto !important;}
#html.project_pdf #body_section header{  color: inherit !important; background-color: linear-gradient(var(--pdf-body-bg),var(--pdf-header-bg)) !important; background-repeat: no-repeat;}
#html.project_pdf table{ background-color:var(--pdf-header-bg) !important; color: inherit !important; border-color: var(--pdf-border-color) !important;}
#html.project_pdf table th{ background-color:inherit !important; color: inherit !important; border-color: var(--pdf-border-color) !important;}
#html.project_pdf table td{ background-color:transparent !important; color: inherit !important; border-color: var(--pdf-border-color) !important;}
#html.project_pdf *{color: var(--pdf-color) !important;}
#html.project_pdf .highlightText, .app#html[data-bs-theme] .app-main.project_pdf h1.highlightText{color: var(--pdf-highlight-color) !important; border-color: var(--pdf-border-color) !important;}
#html.project_pdf .from{border-color: var(--pdf-highlight-color) !important;}

#html.project_pdf .comments_heading{border-color: var(--pdf-border-color) !important;}
#html.project_pdf .comment-body.panel{background-color:var(--pdf-header-bg) !important;}



/* .app#html[data-bs-theme] body{background:radial-gradient(circle at 10% 20%,rgba(255,60,120,.35),transparent 35%),radial-gradient(circle at 90% 80%,rgba(106,92,255,.35),transparent 40%),radial-gradient(circle at 50% 0%,rgba(255,140,0,.25),transparent 45%),radial-gradient(circle at 50% 100%,rgba(0,224,164,.18),transparent 50%),linear-gradient(145deg,#070b14,#121a2f 40%,#070b14 85%);background-attachment:fixed;background-size:cover;}

.app#html[data-bs-theme] .app-sidebar, .app#html[data-bs-theme] .app-header{ background:transparent !important; background-color:rgba(255,255,255,.08)!important;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25) !important; overflow:hidden !important;}
.app#html[data-bs-theme] .app-sidebar::before, .app#html[data-bs-theme] .app-header::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(255,60,120,.7),rgba(106,92,255,.6),rgba(0,224,164,.6),rgba(255,140,0,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7;}
.app#html[data-bs-theme] .app-sidebar::after,.app#html[data-bs-theme] .app-header::after{ content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent);border-radius:inherit;pointer-events:none;opacity:.35;} */

/* =========================================================
   PREMIUM 3D GLASS CARDS (Variable-Based)
   ========================================================= */

/* 1. CRITICAL RESET: Remove solid colors from ALL panels */
.app#html[data-bs-theme] .app-wrap .app-main .panel,
.app#html[data-bs-theme] .app-wrap .app-main .card,
.app#html[data-bs-theme] .common-cls,
.app#html[data-bs-theme] .glass {
    background: transparent !important;
    background-color: transparent !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: unset !important;
    transition: unset !important;
}

/* Remove old pseudo-elements */
.app#html[data-bs-theme] .app-wrap .app-main .panel::after,
.app#html[data-bs-theme] .app-wrap .app-main .card::after,
.app#html[data-bs-theme] .glass::after {
    content: unset;
}

/* 2. THE GLASS SHELL */
.app#html[data-bs-theme] .app-wrap .app-main .panel.chart_panel,
.app#html[data-bs-theme] .app-wrap .app-main .panel.details-panel,
.app#html[data-bs-theme] .app-wrap .app-main .panel.comment-body,
.app#html[data-bs-theme] .app-wrap .app-main #content .panel-dashboard > .row > [class*="col-"] > .panel,
.app#html[data-bs-theme] .app-wrap .app-main .card,
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul li a,
.app#html[data-bs-theme] .glass {
    position: relative;
    border-radius: var(--app-radius) !important;
    overflow: hidden !important;
    margin-bottom: 24px;

    /* DYNAMIC SURFACE */
    background: var(--glass-surface-gradient) !important;

    /* OPTICS */
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;

    /* DYNAMIC BORDERS */
    border: 1px solid var(--glass-border-color) !important;
    border-top: 1px solid var(--glass-highlight) !important;

    /* REFINED SHADOWS (Less Imposing) */
    box-shadow:
        /* 1. Main Drop Shadow: Lower opacity (0.5 vs 0.95) and closer Y-offset */
        0 5px 35px -5px rgba(0, 0, 0, 0.5),         
        
        /* 2. Theme Glow: Softer spread */
        0 0 20px -5px var(--glass-shadow-color),       
        
        /* 3. Inner Bevels (Thickness) */
        inset 0 1px 0 rgba(255, 255, 255, 0.3),        
        inset 0 -1px 0 rgba(0, 0, 0, 0.3)              
        !important;

    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transform: translateZ(0) !important;
}

/* 3. DIAGONAL REFLECTION LAYER (The Sheen) */
.app#html[data-bs-theme] .app-wrap .app-main .panel.chart_panel::after,
.app#html[data-bs-theme] .app-wrap .app-main .panel.details-panel::after,
.app#html[data-bs-theme] .app-wrap .app-main .panel.comment-body::after,
.app#html[data-bs-theme] .app-wrap .app-main #content .panel-dashboard > .row > [class*="col-"] > .panel::after,
.app#html[data-bs-theme] .app-wrap .app-main .card::after,
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul li a::after,
.app#html[data-bs-theme] .glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: var(--glass-sheen-gradient);
    mix-blend-mode: overlay; /* Blends better with dark backgrounds */
}

/* 4. INTERACTIVE HOVER STATE */
.app#html[data-bs-theme] .app-wrap .app-main .panel.chart_panel:hover,
.app#html[data-bs-theme] .app-wrap .app-main .panel.details-panel:hover,
.app#html[data-bs-theme] .app-wrap .app-main .panel.comment-body:hover,
.app#html[data-bs-theme] .app-wrap .app-main #content .panel-dashboard > .row > [class*="col-"] > .panel:hover,
.app#html[data-bs-theme] .app-wrap .app-main .card:hover,
.app#html[data-bs-theme] .common-cls [id*="shownlist"] ul li a:hover,
.app#html[data-bs-theme] .glass:hover {
    transform: translateY(-4px) !important; /* Reduced float distance */
    
    /* Brighter surface on hover */
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 100%) !important;
    
    /* Slightly sharper shadow on hover, but not "heavy" */
    box-shadow:
        0 15px 40px -7px rgba(0, 0, 0, 0.6),
        0 0 30px -5px var(--glass-shadow-color), /* Intensify Glow Only */
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4) 
        !important;
        
    border-top-color: #ffffff !important; /* Brighter highlight on hover */
}


/* ==========================================================================
   PREMIUM GLASSMORPHISM POPOVERS (Matches applayout.css Theme Engine)
   ========================================================================== */

/* 1. Main Popover Body (Glass effect) */
.app#html[data-bs-theme] .popover,
.app#html[data-bs-theme] .iconpicker-popover {
    background: var(--glass-surface-gradient), var(--app-glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border-color) !important;
    border-top: 1px solid var(--glass-highlight) !important;
    box-shadow: var(--app-shadow-elevation) !important;
    color: var(--app-text-primary) !important;
    background-color: transparent !important; 
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Popover Header / Title area */
.app#html[data-bs-theme] .popover-header,
.app#html[data-bs-theme] .iconpicker-popover .popover-title {
    background-color: rgba(var(--app-text-primary-rgb), 0.02) !important;
    color: var(--app-text-primary) !important;
    border-bottom: 1px solid var(--glass-border-color) !important;
    font-weight: var(--app-font-weight-bold);
}

/* 3. Popover Content Area */
.app#html[data-bs-theme] .popover-body,
.app#html[data-bs-theme] .iconpicker-popover .popover-content {
    background-color: transparent !important; /* Let the glass show through */
    color: var(--app-text-primary) !important;
}

/* 4. Icon Picker Specific Fixes (Search bar & Hover states) */
.app#html[data-bs-theme] .iconpicker-popover .iconpicker-search {
    background: rgba(var(--app-text-primary-rgb), 0.04) !important;
    border: 1px solid var(--glass-border-color) !important;
    color: var(--app-text-primary) !important;
    border-radius: var(--app-radius-sm) !important;
}

.app#html[data-bs-theme] .iconpicker .iconpicker-items{
    background-color: transparent !important; /* Let the glass show through */
    color: var(--app-text-primary) !important;
}
.app#html[data-bs-theme] .iconpicker-popover .iconpicker-item {
    background-color: var(--app-bg-subpanel) !important;
    color: var(--app-text-primary) !important;
    border-radius: var(--app-radius-sm) !important;
    transition: var(--app-transition-fast);
    box-shadow: unset !important;
}

.app#html[data-bs-theme] .iconpicker-popover .iconpicker-item:hover,
.app#html[data-bs-theme] .iconpicker-popover .iconpicker-item.iconpicker-selected {
    background-color: var(--app-bg-active) !important;
    color: var(--app-accent) !important;
}

/* 5. The Pointer Arrows (Matched to the glass background) */
.app#html[data-bs-theme] .popover.bottom .arrow::after,
.app#html[data-bs-theme] .popover.bs-popover-bottom .arrow::after {
    border-bottom-color: var(--app-glass-bg) !important; 
}

.app#html[data-bs-theme] .popover.top .arrow::after,
.app#html[data-bs-theme] .popover.bs-popover-top .arrow::after {
    border-top-color: var(--app-glass-bg) !important; 
}

.app#html[data-bs-theme] .popover.right .arrow::after,
.app#html[data-bs-theme] .popover.bs-popover-right .arrow::after {
    border-right-color: var(--app-glass-bg) !important; 
}

.app#html[data-bs-theme] .popover.left .arrow::after,
.app#html[data-bs-theme] .popover.bs-popover-left .arrow::after {
    border-left-color: var(--app-glass-bg) !important; 
}