@import url("https://use.typekit.net/hga2mqz.css");
:root {
    --bs-success: red; /* your custom color */
    --bs-font-sans-serif: "new-frank", sans-serif;
    --bs-body-font-family: "new-frank", sans-serif;
}

::-webkit-scrollbar {
    width: 3px; /* Adjust width */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/*bootstrap button customis*/
#top-main-menu {
    min-height: 60px;
}

body.area-themed #top-main-menu {
    background: linear-gradient(180deg, var(--area-header-colour) 0%, var(--area-header-colour-end) 147.5%) !important;
}

body.area-themed #sidebar.collapsed ul li.selected,
body.area-themed #sidebar.collapsed ul li:hover {
    background: linear-gradient(180deg, var(--area-header-colour) 0%, var(--area-header-colour-end) 147.5%);
}

body.area-themed #sidebar .nav-item.selected > .d-flex .sidenav-text {
    color: var(--area-header-colour);
}

/* Areas without dedicated .operations/.sales/... rules (Fleet, Tickets, HR, etc.)
   still need coloured grid headers and selected tabs so white labels stay visible. */
body.area-themed .dx-datagrid-headers table tbody tr.dx-header-row > td,
body.area-themed .dx-pivotgrid .dx-area-column-cell,
body.area-themed .dx-pivotgrid .dx-area-column-cell td,
body.area-themed .dx-pivotgrid .dx-column-header,
body.area-themed .dx-pivotgrid .dx-area-description-cell,
body.area-themed .dx-pivotgrid .dx-pivot-row-field-header,
body.area-themed .dxpgColumnFieldValue_MetropolisBlue,
body.area-themed .dxpgArea_MetropolisBlue,
body.area-themed .dxgvHeader_MetropolisBlue,
body.area-themed .dx-pager .dx-page-sizes .dx-selection,
body.area-themed .dx-pager .dx-pages .dx-selection,
body.area-themed .dxtc-stripContainer .dxtc-activeTab a,
body.area-themed .dxtc-stripContainer .dxtc-tabHover a,
body.area-themed .dxpcLite_MetropolisBlue .dxpc-header,
body.area-themed .dx-tab.dx-state-focused,
body.area-themed .dx-tab.dx-tab-selected,
body.area-themed .dx-popup-wrapper .dx-popup-title,
body.area-themed .dx-tab-selected.dx-tab.dx-state-hover {
    background: linear-gradient(180deg, var(--area-header-colour) 0%, var(--area-header-colour-end) 147.5%);
}

body.area-themed .dx-datagrid-headers,
body.area-themed .dx-pivotgrid .dx-area-column-cell,
body.area-themed .dx-pivotgrid .dx-column-header,
body.area-themed .dx-pivotgrid .dx-area-description-cell,
body.area-themed .dx-pivotgrid .dx-pivot-row-field-header {
    color: #fff;
}

body.area-themed .dx-tab.dx-tab-selected,
body.area-themed .dx-tab.dx-tab-selected .dx-tab-text,
body.area-themed .dx-tab.dx-tab-selected .dx-icon,
body.area-themed .dxtc-stripContainer .dxtc-activeTab a {
    color: #fff;
}

body.area-themed .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid var(--area-header-colour);
}

body.area-themed .dx-tab.dx-state-hover:not(.dx-tab-selected) {
    background: color-mix(in srgb, var(--area-header-colour) 10%, transparent);
}

.side-navigation .dashboard .nav-link > i {
    color: var(--home-header-colour, #0079C9);
}

body > .d-flex {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#content.main-content-pan {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

#content.main-content-pan > #top-main-menu {
    flex: 0 0 auto;
}

#content.main-content-pan > .p-2 {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

/* BeginForm wraps header + content-pane, so it must be the flex column. */
#content.main-content-pan > .p-2 > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

#content.main-content-pan > .p-2 > #main-header,
#content.main-content-pan > .p-2 > form > #main-header {
    flex: 0 0 auto;
    width: 100%;
}

#content.main-content-pan > .p-2 > #content-pane,
#content.main-content-pan > .p-2 > form > #content-pane {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

/* Foundation .small-12 only sets width on children of .grid-x; the pane is also a .grid-x. */
#content-pane > #MainContentPane {
    flex: 1 1 auto;
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
    min-width: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.success-gradient {
    background: linear-gradient(180deg, #01C6E9 0%, #009D6F 100%);    
}
.text-success {
    color: #0CB56B !important;
}

.button-medium {
    font-size:14px !important; font-weight:700;
}
.button-medium i {
    vertical-align:text-bottom; font-size:16px; margin-right:3px;
}
.custom-button-primary, .dx-fileuploader-button,
.dx-button.custom-button-primary,
.dx-button.custom-button-primary.dx-button-success,
.dx-button.custom-button-primary.dx-button-success.dx-state-hover,
.dx-button.custom-button-primary.dx-button-success.dx-state-focused,
.dx-button.custom-button-primary.dx-button-success.dx-state-active {
    background: linear-gradient(180deg, #01C6E9 0%, #009D6F 100%) !important;
    color: #fff !important;
    border: 0 !important;
}

.dx-fileuploader-button {color:#fff;}

.custom-button-light {
    background: #ddd !important;
    border: 1px solid #ccc;
    color: #000 !important;
    box-shadow: none !important;
}

.btn-height {height:36px !important;}

.custom-button-primary.text-white .dx-icon {color:#fff;}

.heading-underline:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -5px;
    width: 43px;
    height: 3px;
    background-color: #0CB56B;
}
.cursor-pointer {cursor:pointer;}

.main-content-pan {
    background: #EDEDED;
}

.side-navigation ul {
    margin: 0;
}

.side-navigation ul li {
    list-style-type: none;
    padding: 9px 0;
    background:transparent;
}

.side-navigation ul li a {
    text-decoration: none;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    color: #000000;
}

    .side-navigation ul li.selected a {
        font-weight: 700;
    }

.collapsed ul li .sidenav-text, .collapsed ul li .icon-arrow-down, .collapsed ul li .menu-chevron {
    display: none;
}

#sidebar ul li .sidenav-text {
    font-size: 15px !important;
    line-height: 22px;
}
.side-navigation.collapsed {
    padding: 0px !important;
}
.collapsed ul{
    padding:0px !important;
}
.collapsed ul li .custom-icon,
.collapsed ul li .nav-link > i:not(.menu-chevron) {
    margin-right: 0;
}
.collapsed ul li{
    text-align:center;
    border-bottom:1px solid #ddd;
}
.collapsed ul li a{
    display:inline-block !important;
}


/*.collapsed ul li.selected, .collapsed ul li:hover {
    background: linear-gradient(135deg, #b3b3b3, #e6e6e6, #999999);
}*/


.collapsed li.dashboard{
    margin-bottom:0px !important;
    height:45px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.collapsed .submenu.show{
    display:none !important;
}
.logo-collapsed {
    display: none !important;
}
.logo-expand {
    display: block !important;
}
.logo-expand img, .logo-collapsed img {
    max-width:100%;
}
.collapsed .logo-expand {
    display: none !important;
}

.collapsed .logo-collapsed {
    display: block !important;
}
.collapsed .version{
    display:none;
}

div#sidebar.collapsed .toggle-icon {
    display: none;
}



.side-navigation .custom-icon,
.side-navigation .nav-link > i:not(.menu-chevron) {
    font-size: 22px;
    margin-right: 10px;
    width: 1.25em;
    text-align: center;
    vertical-align: middle;
}

.side-navigation .icon-home,
.side-navigation .dashboard .nav-link > i {
    color: #0079C9;
}

.side-navigation .icon-Operations,
.side-navigation .nav-item.operations > .d-flex .nav-link > i {
    color: #0CB56B;
}

.side-navigation .icon-Sales,
.side-navigation .nav-item.sales > .d-flex .nav-link > i {
    color: #D90F27;
}

.side-navigation .icon-Finance,
.side-navigation .nav-item.finance > .d-flex .nav-link > i {
    color: #044B94;
}

.side-navigation .icon-HealthAndSafety,
.side-navigation .nav-item.healthandsafety > .d-flex .nav-link > i {
    color: #FF5F1F;
}

.side-navigation .icon-management,
.side-navigation .nav-item.management > .d-flex .nav-link > i {
    color: #4B2FA6;
}

.side-navigation .icon-admin,
.side-navigation .nav-item.admin > .d-flex .nav-link > i {
    color: #2A3F54;
}

.side-navigation .nav-item.fleet > .d-flex .nav-link > i {
    color: #0CB56B;
}

.side-navigation .nav-item.hr > .d-flex .nav-link > i {
    color: #4B2FA6;
}

.side-navigation .nav-item.reporting > .d-flex .nav-link > i,
.side-navigation .nav-item.tickets > .d-flex .nav-link > i,
.side-navigation .nav-item.device > .d-flex .nav-link > i {
    color: #044B94;
}

.side-navigation .nav-item.favourites > .d-flex .nav-link > i {
    color: #efaf01;
}

.collapsed ul li.selected .nav-link > i:not(.menu-chevron),
.collapsed ul li:hover .nav-link > i:not(.menu-chevron),
.collapsed ul li.selected .nav-link > .custom-icon,
.collapsed ul li:hover .nav-link > .custom-icon {
    color: var(--area-header-fg, #fff) !important;
}
.accordion-button:not(.collapsed){
    font-weight:bold;
}
.dx-datagrid .dx-row > td, .dx-datagrid .dx-row > td {font-size:14px;}

.home #top-main-menu, home .dxpgColumnFieldValue_MetropolisBlue, .home .dxpgArea_MetropolisBlue, .home .dxgvHeader_MetropolisBlue,
.home .collapsed ul li.dashboard.selected, .collapsed ul li.dashboard:hover {
    /*background: #0079C9;*/
    background: linear-gradient(180deg, #0079C9 0%, #003C63 147.5%);
}

.home .collapsed ul li.selected .custom-icon, .collapsed ul li.dashboard:hover .custom-icon {color:#fff;}

.home #sidebar .selected .sidenav-text, .home #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #0079C9;
}

.operations #top-main-menu, .operations .dx-datagrid-headers table tbody tr.dx-header-row > td, .operations .dxpgColumnFieldValue_MetropolisBlue, .operations .dxpgArea_MetropolisBlue, .dxgvHeader_MetropolisBlue,
.operations .collapsed ul li.operations.selected, .collapsed ul li.operations:hover, .operations .dx-pager .dx-page-sizes .dx-selection, .operations .dx-pager .dx-pages .dx-selection,
.operations .dxtc-stripContainer .dxtc-activeTab a, .operations .dxtc-stripContainer .dxtc-tabHover a,
.operations .dxpcLite_MetropolisBlue .dxpc-header, .operations .dx-tab.dx-state-focused, .operations .dx-tab.dx-tab-selected,
.operations .dx-popup-wrapper .dx-popup-title, .operations .dx-tab-selected.dx-tab.dx-state-hover {
    /*background: #0CB56B;*/
    background: linear-gradient(180deg, #0CB56B 0%, #00693B 147.5%);
}
.operations .collapsed ul li.operations.selected .custom-icon, .collapsed ul li.operations:hover .custom-icon {color:#ffffff;}

.operations #sidebar .selected .sidenav-text, .operations #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #0CB56B;
}
.operations .dx-tabpanel .dx-tabs {
    border-bottom:3px solid #04854d;
}
.operations .dx-tab.dx-state-hover {
    background: rgba(4, 133, 77, 0.1);
}
.operations .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #058a50;
}

.operations .dx-tab.dx-state-hover {
    background: rgba(5, 138, 80, 0.1);
}

.fleet .dx-datagrid-headers table tbody tr.dx-header-row > td, .fleet .dxpgColumnFieldValue_MetropolisBlue, .fleet .dxpgArea_MetropolisBlue, .fleet .dxgvHeader_MetropolisBlue,
.fleet .collapsed ul li.fleet.selected, .collapsed ul li.fleet:hover, .fleet .dx-pager .dx-page-sizes .dx-selection, .fleet .dx-pager .dx-pages .dx-selection,
.fleet .dxtc-stripContainer .dxtc-activeTab a, .fleet .dxtc-stripContainer .dxtc-tabHover a,
.fleet .dxpcLite_MetropolisBlue .dxpc-header, .fleet .dx-tab.dx-state-focused, .fleet .dx-tab.dx-tab-selected,
.fleet .dx-popup-wrapper .dx-popup-title, .fleet .dx-tab-selected.dx-tab.dx-state-hover {
    background: linear-gradient(180deg, #0CB56B 0%, #00693B 147.5%);
}

.fleet .collapsed ul li.fleet.selected .custom-icon, .collapsed ul li.fleet:hover .custom-icon {color:#ffffff;}

.fleet #sidebar .selected .sidenav-text, .fleet #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #0CB56B;
}

.fleet .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #04854d;
}

.fleet .dx-tab.dx-state-hover {
    background: rgba(4, 133, 77, 0.1);
}

.fleet .dx-datagrid-headers {
    color: #fff;
}

.sales #top-main-menu, .sales .dx-datagrid-headers table tbody tr.dx-header-row > td, .sales .dxpgColumnFieldValue_MetropolisBlue, .sales .dxpgArea_MetropolisBlue, .sales .dxgvHeader_MetropolisBlue,
.sales .collapsed ul li.sales.selected, .collapsed ul li.sales:hover, .sales .dx-pager .dx-page-sizes .dx-selection, .sales .dx-pager .dx-pages .dx-selection,
.sales .dxtc-stripContainer .dxtc-activeTab a, .sales .dxtc-stripContainer .dxtc-tabHover a,
.sales .dxpcLite_MetropolisBlue .dxpc-header, .sales .dx-tab.dx-state-focused, .sales .dx-tab.dx-tab-selected,
.sales .dx-popup-wrapper .dx-popup-title, .sales .dx-tab-selected.dx-tab.dx-state-hover {
    /*background: #D90F27;*/
    background: linear-gradient(180deg, #E90004 0%, #830002 152%);
}
.sales .dx-datagrid-headers, .operations .dx-datagrid-headers, .fleet .dx-datagrid-headers, .sales .collapsed ul li.selected .custom-icon,
.collapsed ul li.sales:hover .custom-icon {
    color: #fff;
}

.sales .dx-datagrid-headers .dx-datagrid-filter-row,
.operations .dx-datagrid-headers .dx-datagrid-filter-row,
.fleet .dx-datagrid-headers .dx-datagrid-filter-row,
.finance .dx-datagrid-headers .dx-datagrid-filter-row,
.admin .dx-datagrid-headers .dx-datagrid-filter-row,
.management .dx-datagrid-headers .dx-datagrid-filter-row,
.healthandsafety .dx-datagrid-headers .dx-datagrid-filter-row,
.home .dx-datagrid-headers .dx-datagrid-filter-row,
body.area-themed .dx-datagrid-headers .dx-datagrid-filter-row,
.dx-datagrid-headers .dx-datagrid-filter-row,
.dx-datagrid-headers .dx-datagrid-filter-row > td,
.dx-treelist-headers .dx-treelist-filter-row,
.dx-treelist-headers .dx-treelist-filter-row > td {
    color: #333 !important;
    background-color: #f5f5f5 !important;
    background-image: none !important;
}

.sales #sidebar .selected .sidenav-text, .sales #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #D90F27;
}
.sales .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #aa0003;
}

.sales .dx-tab.dx-state-hover {
    background: rgba(170, 0, 3, 0.1);
}


.finance #top-main-menu, .finance .dx-datagrid-headers table tbody tr.dx-header-row > td, .finance .dxpgColumnFieldValue_MetropolisBlue, .finance .dxpgArea_MetropolisBlue, .finance .dxgvHeader_MetropolisBlue,
.finance .collapsed ul li.finance.selected, .collapsed ul li.finance:hover, .finance .dx-pager .dx-page-sizes .dx-selection, .finance .dx-pager .dx-pages .dx-selection,
.finance .dxtc-stripContainer .dxtc-activeTab a, .finance .dxtc-stripContainer .dxtc-tabHover a,
.finance .dxpcLite_MetropolisBlue .dxpc-header, .finance .dx-tab.dx-state-focused, .finance .dx-tab.dx-tab-selected,
.finance .dx-popup-wrapper .dx-popup-title, .finance .dx-tab-selected.dx-tab.dx-state-hover {
    /*background: #044B94;*/
    background: linear-gradient(180deg, #044B94 0%, #01172E 188.5%);
}

.finance .collapsed ul li.selected .custom-icon, .collapsed ul li.finance:hover .custom-icon {color:#fff;}

.finance #sidebar .selected .sidenav-text, .finance #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #044B94;
}

.finance .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #033263;
}

.finance .dx-tab.dx-state-hover {
    background: rgba(13, 50, 99, 0.1);
}

.healthandsafety #top-main-menu, .healthandsafety .dx-datagrid-headers table tbody tr.dx-header-row > td, .healthandsafety .dxpgColumnFieldValue_MetropolisBlue, .healthandsafety .dxpgArea_MetropolisBlue, .healthandsafety .dxgvHeader_MetropolisBlue,
.healthandsafety .collapsed ul li.healthandsafety.selected, .collapsed ul li.healthandsafety:hover, .healthandsafety .dx-pager .dx-page-sizes .dx-selection, .healthandsafety .dx-pager .dx-pages .dx-selection,
.healthandsafety .dxtc-stripContainer .dxtc-activeTab a, .healthandsafety .dxtc-stripContainer .dxtc-tabHover a,
.healthandsafety .dxpcLite_MetropolisBlue .dxpc-header, .healthandsafety .dx-tab.dx-state-focused, .healthandsafety .dx-tab.dx-tab-selected,
.healthandsafety .table-striped .header, .healthandsafety .dx-popup-wrapper .dx-popup-title, .healthandsafety .dx-tab-selected.dx-tab.dx-state-hover {
    /*background: #FF5F1F;*/
    background: linear-gradient(180deg, #FF5F1F 0%, #993913 159%);
}
    .healthandsafety .collapsed ul li.selected .custom-icon, .collapsed ul li.healthandsafety:hover .custom-icon {
        color: #fff;
    }

.healthandsafety #sidebar .selected .sidenav-text, .healthandsafety #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #FF5F1F;
}
.healthandsafety .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #c24918;
}

.healthandsafety .dx-tab.dx-state-hover {
    background: rgba(194, 73, 24, 0.1);
}

.management #top-main-menu, .management .dx-datagrid-headers table tbody tr.dx-header-row > td, .management .dxpgColumnFieldValue_MetropolisBlue, .management .dxpgArea_MetropolisBlue, .management .dxgvHeader_MetropolisBlue,
.management .collapsed ul li.management.selected, .collapsed ul li.management:hover, .management .dx-pager .dx-page-sizes .dx-selection, .management .dx-pager .dx-pages .dx-selection,
.management .dxtc-stripContainer .dxtc-activeTab a, .management .dxtc-stripContainer .dxtc-tabHover a,
.management .dxpcLite_MetropolisBlue .dxpc-header, .management .dx-tab.dx-state-focused, .management .dx-tab.dx-tab-selected,
.management .dx-popup-wrapper .dx-popup-title, .management .dx-tab-selected.dx-tab.dx-state-hover {
    /*background: #4B2FA6;*/
    background: linear-gradient(180deg, #4B2FA6 0%, #1D1240 178%);
}

.management .collapsed ul li.selected .custom-icon, .collapsed ul li.management:hover .custom-icon {
    color: #fff;
}

.management #sidebar .selected .sidenav-text, .management #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #4B2FA6;
}
.management .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #342172;
}

.management .dx-tab.dx-state-hover {
    background: rgba(52, 33, 114, 0.1);
}

.admin #top-main-menu, .admin .dx-datagrid-headers table tbody tr.dx-header-row > td, .admin .dxpgColumnFieldValue_MetropolisBlue, .admin .dxpgArea_MetropolisBlue, .admin .dxgvHeader_MetropolisBlue,
.admin .collapsed ul li.admin.selected, .collapsed ul li.admin:hover, .admin .dx-pager .dx-page-sizes .dx-selection, .admin .dx-pager .dx-pages .dx-selection,
.admin .dxtc-stripContainer .dxtc-activeTab a, .admin .dxtc-stripContainer .dxtc-tabHover a,
.admin .dxpcLite_MetropolisBlue .dxpc-header, .admin .dx-tab.dx-state-focused, .admin .dx-tab.dx-tab-selected,
.admin .table-striped .header, .admin .dx-popup-wrapper .dx-popup-title, .admin .dx-tab-selected.dx-tab.dx-state-hover {
    /*background: #2A3F54;*/
    background: linear-gradient(0deg, #2A3F54 0%, #5D8CBA 156.5%);
}

.admin .collapsed ul li.selected .custom-icon, .collapsed ul li.admin:hover .custom-icon,
.admin .table-striped .header th, .healthandsafety .table-striped .header th{
    color: #fff;
}

.admin #sidebar .selected .sidenav-text, .admin #sidebar .submenu .selected .nav-link .sidenav-text {
    color: #2A3F54;
}

.admin .dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #2a4054;
}

.admin .dx-tab.dx-state-hover {
    background: rgba(42, 64, 84, 0.1);
}

.sales #sidebar .selected .submenu .sidenav-text,
.admin #sidebar .selected .submenu .sidenav-text,
.management #sidebar .selected .submenu .sidenav-text,
.healthandsafety #sidebar .selected .submenu .sidenav-text,
.finance #sidebar .selected .submenu .sidenav-text,
.operations #sidebar .selected .submenu .sidenav-text,
.fleet #sidebar .selected .submenu .sidenav-text,
.home #sidebar .selected .submenu .sidenav-text {
    color: #000000;
}

/* --- dx grid customize color theme --- */

.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort-indicator:hover,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort-indicator, .dx-datagrid-headers .dx-header-filter,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort, .dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort:hover,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-datagrid-text-content, .dx-datagrid-headers .dx-datagrid-table .dx-row > td,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-column-indicators .dx-sort-up:hover, .dxpgColumnFieldValue_MetropolisBlue, .dxpgArea_MetropolisBlue, .dxgvHeader_MetropolisBlue, .dxgvHeader_MetropolisBlue td,
.dx-pivotgrid .dx-area-column-cell td, .dx-pivotgrid .dx-pivot-row-field-header {
    color: #ffffff !important;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified),
.dx-treelist-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.dx-treelist-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.dx-treelist-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #d9f3e8;
    color: #000;
}

.dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td,
.dx-treelist-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #eaf8f1;
}

.home .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.home .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.home .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #d9ebf7;
    color: #000;
}
.home .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #eaf4fb;
}

.operations .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.operations .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.operations .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #d3f2e4;
    color: #000;
}
.operations .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #e7f8f0;
}

.fleet .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.fleet .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.fleet .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #d3f2e4;
    color: #000;
}
.fleet .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #e7f8f0;
}

.sales .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.sales .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.sales .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #fde8e8;
    color: #000;
}
.sales .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #fef3f3;
}

.finance .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.finance .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.finance .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #d9e4ef;
    color: #000;
}
.finance .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #eaf0f6;
}

.healthandsafety .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.healthandsafety .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.healthandsafety .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #ffe9e0;
    color: #000;
}
.healthandsafety .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #fff3ee;
}

.management .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.management .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.management .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #e4e0f2;
    color: #000;
}
.management .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #f1eef8;
}

.admin .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
.admin .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.admin .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified) {
    background: #e4ebf2;
    color: #000;
}
.admin .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
    background: #f0f4f8;
}
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:not(.dx-validation-pending):not(.dx-datagrid-select-all) {
    border: 1px solid #E2E2E2;
}
.dx-datagrid-header-panel, .dx-datagrid-borders > .dx-datagrid-filter-panel, .dx-datagrid-borders > .dx-datagrid-headers, .dxgvGroupPanel_MetropolisBlue {
    border-bottom: 0px !important;
}
.dx-data-row td, .dx-datagrid-borders > .dx-datagrid-filter-panel, .dx-datagrid-borders > .dx-datagrid-headers {
    /*border: 0px !important;*/
    box-shadow: none !important;
}

/* --- DX tab UI --- */
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs, .dx-tabpanel > .dx-tabpanel-tabs .dx-tab, .dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):last-of-type {
    box-shadow: none !important;
}
.dx-tab.dx-tab-selected::before {display:none;}
.dx-tab {
    background-color: #f5f5f5;
}
.dx-tabpanel-tabs,
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs,
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-wrapper,
.dx-tabpanel > .dx-tabpanel-tabs .dx-scrollable,
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-nav-button {
    background-color: #f5f5f5 !important;
}
.dx-datagrid-header-panel,
.dx-datagrid-header-panel .dx-toolbar,
.dx-treelist-header-panel,
.dx-treelist-header-panel .dx-toolbar {
    background-color: #f5f5f5;
}
.dx-datagrid-filter-row .dx-texteditor,
.dx-datagrid-filter-row .dx-texteditor-input,
.dx-treelist-filter-row .dx-texteditor,
.dx-treelist-filter-row .dx-texteditor-input {
    background-color: #f5f5f5;
    color: #333;
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tab {
    border-radius:9px 9px 0 0;
    border:1px solid rgba(221, 221, 221, 0.4);
    border-bottom:0;
}

.dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.dxtcLite_MetropolisBlue > .dxtc-stripContainer .dxtc-activeTab,
.dxtcLite_MetropolisBlue > .dxtc-stripContainer .dxtc-activeTab a{
    border-radius: 9px 9px 0 0;
}
/*.dx-tab.dx-state-hover {
    background: rgba(233, 0, 4, 0.1);
}*/
/*.dx-tabpanel .dx-tabs {
    border-bottom: 3px solid #aa0003;
}*/
/* --- //DX tab UI --- */
/* --- //dx grid customize color theme --- */
#sidebar {
    width: 280px;
    height: 100vh;
    flex: 0 0 auto;
    transition: all 0.3s;
    overflow: auto;
    position: relative;
    box-shadow: 5px 0 5px -6px rgba(0, 0, 0, 0.3);
}

#sidebar.collapsed {
    width: 60px;
    border-right:1px solid #cccccc;
}
.nav-link:focus, .nav-link:hover{
    color:#000 !important
}

/*#content {
    width: calc(100% - 280px);
}*/
#sidebar + #content {
    width: auto;
    max-width: calc(100% - 280px);
    transition: width 0.3s ease;
}
#sidebar.collapsed + #content {
    max-width: calc(100% - 60px);
}

.circle-btn-pin {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
}

.circle-btn-pin .fa-thumbtack {
    color: inherit;
    font-size: 14px;
    line-height: 1;
    width: 1em;
    height: 1em;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-btn-pin .fa-thumbtack::before {
    display: block;
    line-height: 1;
}

.toggle-icon .fa-thumbtack {
    color: #0065A8;
}

.toggle-icon.active .fa-thumbtack {
    color: #fff;
}

.profile-pic {
    /*    width: 45px;*/
    max-height: 43px;
    border-radius: 50%;
}
.profile-upload-pic {
    width:140px; border-radius:10px;
    border:1px solid #ddd;
}
.profile-upload-pic img {
    width: 100%; border-radius:10px;
}
.dx-btn-custome #btnUpload, .dx-btn-custome #btnProfileUpload {
    background: linear-gradient(180deg, #01C6E9 0%, #009D6F 100%);
    border: 0 !important; margin-top:9px;
}
    .dx-btn-custome #btnUpload:hover, .dx-btn-custome #btnProfileUpload:hover {
        color: #fff !important;
    }
#top-main-menu #account-username {
    color: #FFF;
    margin: 0 12px !important;
    cursor: pointer;
}

#top-main-menu #account-username.dropdown-toggle::after {
    display: none;
}

.account-username-menu-name {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
}

    .notifications {
        font-size: 12px;
        font-family: "new-frank", sans-serif !important;
    }

    .search-wrapper {
        position: relative;
        width: 580px;
        max-width: 40vw;
        margin: auto;
        flex: 0 1 auto;
        min-width: 180px;
    }

        .search-wrapper .SearchCombo {
            border-radius: 13px;
            padding-left: 40px;
            font-size: 14px;
            color: #4C6EF8
        }

    .search-box::placeholder {
        color: #4C6EF8; /* change to any color you want */
    }

    .search-icon {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        /*color: #4C6EF8;*/
        font-size: 20px;
        z-index: 99;
    }

.toggle-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
    color: #0065A8;
    flex-shrink: 0;
}

.toggle-icon.active {
    background: linear-gradient(180deg, #002842 -43.75%, #0065A8 68.9%);
    color: #fff;
}

    .dropdown-item {
        padding: 8px 16px !important;
        text-decoration: none !important;
        font-size: 14px;
    }
    .dropdown-item.active, .dropdown-item:active{
        background-color:transparent !important;
        color:#000 !important;
    }

    .notification-badge {
        background: #ffffff;
        border-radius: 5px;
        padding: 7px;
        position: relative;
        cursor: pointer;
    }

    .notificationAlert {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #FF5F1F;
        position: absolute;
        top: 4px;
        right: 4px;
    }

    .notification-badge i {
        color: #D90F27;
    }
    /*side navigation*/

    .side-navigation ul li a {
        font-size: 15px;
    }

    .nav-item .icon-arrow-down,
    .nav-item .menu-chevron {
        font-size: 12px;
    }

    .nav-link .icon-arrow-down,
    .nav-link .menu-chevron {
        margin-left: auto;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }


    .nav-link[aria-expanded="true"] .icon-arrow-down,
    .nav-link[aria-expanded="true"] .menu-chevron {
        transform: rotate(180deg);
    }

    .submenu-heading {
        font-size: 14px;
        font-weight: 700;
        color: #0079C9 !important;
        /*text-transform: uppercase;*/
        list-style: none;
    }

    /*.group-buttons {
        transform: scale(0.8);
    }*/
    /*
.side-navigation {    
    transition: width 0.3s ease;
    overflow: hidden;
}

    .side-navigation.collapsed {
        width: 80px;
    }

        .side-navigation.collapsed .nav-link span,
        .side-navigation.collapsed .logo-expand {
            display: none;
        }

        .side-navigation.collapsed .logo-collapsed {
            display: inline-block;
        }

.logo-collapsed {
    display: none;
}
*/
    /*header*/
    .page-header {
        min-height: inherit !important;
    }

    .content-container {
        width: 100% !important;
        padding: 16px;
    }
    /*Dashboard card styles*/
    .charts .card {
        border: 1px solid #E9E5FF;
        box-shadow: 0px 4px 10px 1px #DDDDDD80;
        border-radius: 20px;
        background: #fff;
    }

    .charts {
        margin-bottom: 10px;
    }

        .charts .custom-padding {
            padding: 0px 5px !important;
        }

    .dashboard-chart-wrapper,
    .chart-wrapper {
        position: relative;
    }

    .dashboard-chart-wrapper .home-dashboard-chart {
        width: 100%;
    }

    .charts .card > .d-flex.p-3 {
        position: relative;
        justify-content: center;
    }

    .charts .card > .d-flex.p-3 > h2 {
        text-align: center;
        width: 100%;
        padding: 0 40px;
        margin: 0;
    }
    /* Notification drawer below header */
    .notification-drawer {
        margin-top: 60px;
        height: calc(100% - 60px);
        width: 350px;
        z-index: 9999;
    }

    .avatar-circle {
        width: 55px;
        height: 55px;
        border: 2px solid #0d9cff;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .sender-name {
        color: #0d9cff;
    }

    .action-icons i {
        color: #b5b5b5;
        font-size: 16px;
        cursor: pointer;
    }

        .action-icons i:hover {
            color: #0d9cff;
        }
    /* // Notification drawer below header */

    /* ---- Search box customize --- */

    .home #top-main-menu .search-icon {
        color: #0079C9 !important;
    }

    .sales #top-main-menu .search-icon {
        color: #D90F27 !important;
    }

    .Finance #top-main-menu .search-icon {
        color: #044B94 !important;
    }

    .operations #top-main-menu .search-icon {
        color: #0CB56B !important;
    }

    .healthandsafety #top-main-menu .search-icon {
        color: #FF5F1F !important;
    }

    .management #top-main-menu .search-icon {
        color: #4B2FA6 !important;
    }

    .admin #top-main-menu .search-icon {
        color: #2A3F54 !important;
    }

    .global-search {
        border-radius: 10px !important;
        border: none !important;
        width: 100% !important;
        height: 35px !important;
    }

        .global-search #SearchCombo_B-1 {
            display: none
        }

        .global-search input[type="text"] {
            padding-left: 25px !important;
            padding-right: 10px !important;
        }
    /* ---- //Search box customize --- */

    #SearchCombo_DDD_LLBVSTC {
        padding: 5px;
        border-radius: 10px;
    }

    .dxeListBoxItem_MetropolisBlue {
        color: #373737;
        padding-right: 5px;
        font-size: 14px;
        padding: 8px 5px 8px 5px;
        border-bottom: 1px solid #dddddd;
    }


/* --- grid td border radio style ---- */
.dx-datagrid-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Clip the square grid outline so it follows the rounded header corners. */
.dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-headers {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    overflow: hidden;
}

.dx-datagrid-borders > .dx-datagrid-headers {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.dx-datagrid-headers .dx-header-row > td {
    border-top-color: transparent !important;
}

/* Column name and header-filter / sort icons on one line; funnel to the right.
   Do not set display:flex on the td — that takes cells out of table layout. */
.dx-datagrid-headers .dx-header-row > td:not([class*="dx-command"]) {
    text-align: left;
    white-space: normal;
    vertical-align: middle;
    padding-top: 6px;
    padding-bottom: 6px;
}

.dx-datagrid-headers .dx-header-row > td:not([class*="dx-command"]) > .dx-datagrid-text-content {
    display: inline-block;
    float: none !important;
    width: auto;
    max-width: calc(100% - 22px);
    margin: 0 !important;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
}

.dx-datagrid-headers .dx-header-row .dx-header-filter-indicator,
.dx-datagrid-headers .dx-header-row .dx-sort-indicator {
    max-width: calc(100% - 22px);
}

.dx-datagrid-headers .dx-header-row > td:not([class*="dx-command"]) > .dx-column-indicators {
    display: inline-flex;
    align-items: center;
    float: right;
    width: auto;
    height: auto;
    margin: 0 0 0 4px;
    vertical-align: middle;
}

/* Filter-row operation chooser: same funnel as column header filter (\f050),
   not the find/magnifying-glass glyph (\f027). Dropdown items keep their
   equals/contains/etc. icons because they render in .dx-filter-menu. */
.dx-datagrid-filter-row .dx-menu-item-content .dx-icon::before,
.dx-treelist-filter-row .dx-menu-item-content .dx-icon::before {
    content: "\f050";
    font-family: DXIcons, sans-serif;
}

.dx-datagrid .dx-icon-filter-operation-default::before,
.dx-datagrid-container .dx-icon-filter-operation-default::before,
.dx-treelist .dx-icon-filter-operation-default::before,
.dx-treelist-container .dx-icon-filter-operation-default::before {
    content: "\f050";
}

.dx-datagrid-headers .dx-header-row > td:first-child {
    border-left-color: transparent !important;
}

.dx-datagrid-headers .dx-header-row > td:last-child {
    border-right-color: transparent !important;
}

.dx-datagrid-headers .dx-header-row > td:first-child,
.dxgvTable_MetropolisBlue #GrdMain_DXHeadersRow0 > td:first-child,
.dxpgMainTable_MetropolisBlue:first-child tbody > tr:first-child > td:first-child,
.table .header th:first-child, #GrdWeekdayBudgetSpec td:first-child,
.dxgvTable_MetropolisBlue #GrdAllUsersAvailability_DXHeadersRow0 > td:first-child {
    border-top-left-radius: 9px;
}

.dx-datagrid-headers .dx-header-row > td:last-child,
.dxgvTable_MetropolisBlue #GrdMain_DXHeadersRow0 td:last-child,
.dxgvTable_MetropolisBlue #GrdAllUsersAvailability_DXHeadersRow0 > td:last-child,
.dxgvTable_MetropolisBlueGrdAllUsersAvailability_col10,

/* --- the last child rounded visibilty ---- */
.dxgvTable_MetropolisBlue #GrdMain_DXHeadersRow0 td:nth-last-child(2),
.dxgvTable_MetropolisBlue #GrdAllUsersAvailability_DXHeadersRow0 td:nth-last-child(2),

.dxpgMainTable_MetropolisBlue:first-child tbody > tr:first-child > td:last-child,
.table .header th:last-child, #GrdWeekdayBudgetSpec td:last-child {
    border-top-right-radius: 9px;
}

/* --- //grid td border radio style ---- */

/* --- DX pivot grid: match DataGrid chrome --- */
.dx-pivotgrid {
    border-radius: 9px;
    overflow: hidden;
}

.dx-pivotgrid .dx-area-description-cell {
    position: relative;
    vertical-align: bottom;
    padding: 0 !important;
}

.dx-pivotgrid .dx-area-description-cell .dx-pivotgrid-toolbar {
    display: none;
}

.dx-pivot-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 36px;
    margin: 0 0 4px;
}

.dx-pivot-toolbar .dx-button .dx-icon {
    font-size: 18px;
}

.dx-pivotgrid .dx-area-column-cell .dx-expand,
.dx-pivotgrid .dx-area-column-cell .dx-pivotgrid-collapsed .dx-expand,
.dx-pivotgrid .dx-area-column-cell .dx-pivotgrid-expanded .dx-expand {
    color: #fff !important;
}

.dx-pivotgrid .dx-pivot-row-field-headers {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 36px;
    height: 100%;
}

.dx-pivotgrid .dx-pivot-row-field-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.dx-pivotgrid .dx-pivot-row-field-header:last-child {
    flex: 1 1 auto;
    border-right: 0;
}

.dx-pivotgrid .dx-area-column-cell td,
.dx-pivotgrid .dx-area-description-cell,
.dx-pivotgrid .dx-pivot-row-field-header {
    color: #fff;
}

.dx-pivotgrid .dx-area-column-cell td {
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 8px;
}

.dx-pivotgrid td {
    font-size: 14px;
}

.dx-pivotgrid .dx-area-row-cell td,
.dx-pivotgrid .dx-area-data-cell td {
    border-color: #E2E2E2 !important;
}

.dx-pivotgrid .dx-area-description-cell,
.dx-pivotgrid .dx-area-row-cell {
    border-right-color: #E2E2E2 !important;
}

.operations .dx-pivotgrid .dx-area-column-cell,
.operations .dx-pivotgrid .dx-area-column-cell td,
.operations .dx-pivotgrid .dx-column-header,
.operations .dx-pivotgrid .dx-area-description-cell,
.operations .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #0CB56B 0%, #00693B 147.5%);
}

.fleet .dx-pivotgrid .dx-area-column-cell,
.fleet .dx-pivotgrid .dx-area-column-cell td,
.fleet .dx-pivotgrid .dx-column-header,
.fleet .dx-pivotgrid .dx-area-description-cell,
.fleet .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #0CB56B 0%, #00693B 147.5%);
}

.sales .dx-pivotgrid .dx-area-column-cell,
.sales .dx-pivotgrid .dx-area-column-cell td,
.sales .dx-pivotgrid .dx-column-header,
.sales .dx-pivotgrid .dx-area-description-cell,
.sales .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #E90004 0%, #830002 152%);
}

.finance .dx-pivotgrid .dx-area-column-cell,
.finance .dx-pivotgrid .dx-area-column-cell td,
.finance .dx-pivotgrid .dx-column-header,
.finance .dx-pivotgrid .dx-area-description-cell,
.finance .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #044B94 0%, #01172E 188.5%);
}

.healthandsafety .dx-pivotgrid .dx-area-column-cell,
.healthandsafety .dx-pivotgrid .dx-area-column-cell td,
.healthandsafety .dx-pivotgrid .dx-column-header,
.healthandsafety .dx-pivotgrid .dx-area-description-cell,
.healthandsafety .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #FF5F1F 0%, #993913 159%);
}

.management .dx-pivotgrid .dx-area-column-cell,
.management .dx-pivotgrid .dx-area-column-cell td,
.management .dx-pivotgrid .dx-column-header,
.management .dx-pivotgrid .dx-area-description-cell,
.management .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #4B2FA6 0%, #1D1240 178%);
}

.admin .dx-pivotgrid .dx-area-column-cell,
.admin .dx-pivotgrid .dx-area-column-cell td,
.admin .dx-pivotgrid .dx-column-header,
.admin .dx-pivotgrid .dx-area-description-cell,
.admin .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(0deg, #2A3F54 0%, #5D8CBA 156.5%);
}

.home .dx-pivotgrid .dx-area-column-cell,
.home .dx-pivotgrid .dx-area-column-cell td,
.home .dx-pivotgrid .dx-column-header,
.home .dx-pivotgrid .dx-area-description-cell,
.home .dx-pivotgrid .dx-pivot-row-field-header {
    background: linear-gradient(180deg, #0079C9 0%, #003C63 147.5%);
}

.page-heading {
    font-size: 18px;
    font-weight: 700;
}

#main-header .page-heading,
#main-header .page-title,
.area-landing .page-heading {
    display: none;
}

#main-header.page-header {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 0;
    min-width: 0;
}

.page-header-toolbar,
#main-header,
#main-header #title-pane,
#title-pane,
#content-pane,
#content-pane > #MainContentPane {
    background-color: #f5f5f5;
}

.page-header-toolbar,
#main-header #title-pane {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 12px;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 4px 0 !important;
    overflow: visible;
    margin-right: 0;
}

.page-header-toolbar.align-items-end,
.page-header-toolbar .align-items-end,
#main-header #title-pane.align-items-end,
#main-header #title-pane .align-items-end {
    align-items: flex-end !important;
}

.page-header-toolbar > .row,
#main-header #title-pane > .row {
    display: contents !important;
}

.page-header-toolbar > .row > [class*="col"],
#main-header #title-pane > .row > [class*="col"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    order: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center !important;
    align-self: flex-end;
    gap: 6px;
    margin-top: 0;
}

.page-header-toolbar > .row > [class*="col"]:has(> .d-block):not(:has(.dx-checkbox)):not(:has([id*="CheckBox"])):not(:has(.checkbox-host)):not(:has([id*="ShowInActive"])):not(:has([id*="ShowResolved"])):not(:has([id="IncludeAllContainer"])):not(:has([id="IncludeApprovedContainer"])),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):not(:has(.dx-checkbox)):not(:has([id*="CheckBox"])):not(:has(.checkbox-host)):not(:has([id*="ShowInActive"])):not(:has([id*="ShowResolved"])):not(:has([id="IncludeAllContainer"])):not(:has([id="IncludeApprovedContainer"])) {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
}

.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has(.dx-checkbox),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="CheckBox"]),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has(.checkbox-host),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="ShowInActive"]),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="ShowResolved"]),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id="IncludeAllContainer"]),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id="IncludeApprovedContainer"]),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has(.dx-checkbox),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="CheckBox"]),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has(.checkbox-host),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="ShowInActive"]),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="ShowResolved"]),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id="IncludeAllContainer"]),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id="IncludeApprovedContainer"]) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 8px;
}

.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has(.dx-checkbox) > .d-block,
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="CheckBox"]) > .d-block,
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has(.checkbox-host) > .d-block,
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="ShowInActive"]) > .d-block,
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="ShowResolved"]) > .d-block,
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id="IncludeAllContainer"]) > .d-block,
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id="IncludeApprovedContainer"]) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has(.dx-checkbox) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="CheckBox"]) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has(.checkbox-host) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="ShowInActive"]) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="ShowResolved"]) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id="IncludeAllContainer"]) > .d-block,
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id="IncludeApprovedContainer"]) > .d-block {
    order: 2;
}

.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has(.dx-checkbox) > :not(.d-block),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="CheckBox"]) > :not(.d-block),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has(.checkbox-host) > :not(.d-block),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="ShowInActive"]) > :not(.d-block),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id*="ShowResolved"]) > :not(.d-block),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id="IncludeAllContainer"]) > :not(.d-block),
.page-header-toolbar > .row > [class*="col"]:has(> .d-block):has([id="IncludeApprovedContainer"]) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has(.dx-checkbox) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="CheckBox"]) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has(.checkbox-host) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="ShowInActive"]) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id*="ShowResolved"]) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id="IncludeAllContainer"]) > :not(.d-block),
#main-header #title-pane > .row > [class*="col"]:has(> .d-block):has([id="IncludeApprovedContainer"]) > :not(.d-block) {
    order: 1;
}

.page-header-toolbar > .row > [class*="col"]:has(> .page-heading),
.page-header-toolbar > .row > [class*="col"]:has(> .page-title),
#main-header #title-pane > .row > [class*="col"]:has(> .page-heading),
#main-header #title-pane > .row > [class*="col"]:has(> .page-title) {
    display: none;
}

.page-header-toolbar:not(.dump-register-header) > .row > [class*="col"]:has(#pendingChanges),
.page-header-toolbar:not(.dump-register-header) > .row > [class*="col"]:has(.pending-host),
.page-header-toolbar:not(.dump-register-header) > .row > #pendingChanges,
#main-header #title-pane:not(.dump-register-header) > .row > [class*="col"]:has(#pendingChanges),
#main-header #title-pane:not(.dump-register-header) > .row > [class*="col"]:has(.pending-host),
#main-header #title-pane:not(.dump-register-header) > .row > #pendingChanges {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.page-header-toolbar > .row > [class*="col"].page-header-actions,
.page-header-toolbar > .row > [class*="col"]:has(.page-header-actions),
#main-header #title-pane > .row > [class*="col"].page-header-actions,
#main-header #title-pane > .row > [class*="col"]:has(.page-header-actions) {
    order: 3;
    margin-left: auto;
}

.page-header-toolbar:not(.dump-register-header):has(#pendingChanges),
#main-header #title-pane:not(.dump-register-header):has(#pendingChanges) {
    flex-wrap: nowrap;
}

.page-header-toolbar .page-heading {
    margin-bottom: 0;
}

.page-header-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center !important;
    gap: 8px;
}

.page-header-actions > div:not(.dx-button) {
    display: inline-flex;
    align-items: center;
    min-width: 90px;
    min-height: 32px;
}

.page-header-actions > div[id*="Help"]:not(.dx-button) {
    min-width: 40px;
}

.page-header-toolbar .dx-checkbox,
#main-header #title-pane .dx-checkbox {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.page-header-actions > div.hide,
.page-header-actions > .hide {
    min-width: 0;
}

/* Keep dxButton hosts; match UX_UI success-gradient / light Refresh.
   Hosts are often the .dx-button themselves ($('#X').dxButton()), not a wrapper. */
.page-header-actions .dx-button {
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    border: 0 !important;
}

.page-header-actions .dx-button .dx-button-text,
.page-header-actions .dx-button .dx-icon {
    color: inherit;
}

.page-header-actions > div:not([id*="Refresh"]):not([id*="Help"]):not([id*="Delete"]):not([id*="Cancel"]):not(#btnToggleClander).dx-button,
.page-header-actions > div:not([id*="Refresh"]):not([id*="Help"]):not([id*="Delete"]):not([id*="Cancel"]):not(#btnToggleClander) .dx-button {
    background: linear-gradient(180deg, #01C6E9 0%, #009D6F 100%) !important;
    color: #fff !important;
}

.page-header-actions > div:not([id*="Refresh"]):not([id*="Help"]):not([id*="Delete"]):not([id*="Cancel"]):not(#btnToggleClander).dx-button .dx-icon,
.page-header-actions > div:not([id*="Refresh"]):not([id*="Help"]):not([id*="Delete"]):not([id*="Cancel"]):not(#btnToggleClander) .dx-button .dx-icon {
    color: #fff !important;
}

.page-header-actions [id*="Refresh"].dx-button,
.page-header-actions [id*="Refresh"] .dx-button,
.page-header-actions #btnRefresh.dx-button,
.page-header-actions #btnRefresh .dx-button,
.page-header-actions #btnToggleClander.dx-button,
.page-header-actions #btnToggleClander .dx-button,
.page-header-actions [id*="Help"].dx-button,
.page-header-actions [id*="Help"] .dx-button {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
}

.page-header-actions [id*="Help"].dx-button,
.page-header-actions [id*="Help"] .dx-button {
    min-width: 40px;
    padding: 0 10px;
}

.page-header-actions [id*="Refresh"].dx-button .dx-icon,
.page-header-actions [id*="Refresh"] .dx-button .dx-icon,
.page-header-actions #btnRefresh.dx-button .dx-icon,
.page-header-actions #btnRefresh .dx-button .dx-icon,
.page-header-actions #btnToggleClander.dx-button .dx-icon,
.page-header-actions #btnToggleClander .dx-button .dx-icon {
    color: #6c757d !important;
}

.page-header-actions [id*="Help"].dx-button .dx-icon,
.page-header-actions [id*="Help"] .dx-button .dx-icon {
    color: #337ab7 !important;
}

.page-header-actions [id*="Delete"].dx-button,
.page-header-actions [id*="Delete"] .dx-button,
.page-header-actions [id*="Cancel"].dx-button,
.page-header-actions [id*="Cancel"] .dx-button {
    background: #dc3545 !important;
    color: #fff !important;
}

.page-header-actions [id*="Delete"].dx-button .dx-icon,
.page-header-actions [id*="Delete"] .dx-button .dx-icon,
.page-header-actions [id*="Cancel"].dx-button .dx-icon,
.page-header-actions [id*="Cancel"] .dx-button .dx-icon {
    color: #fff !important;
}

#navbar-breadcrumb {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 16px;
    overflow: hidden;
    max-width: 100%;
}

#top-main-menu .navbar {
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
    gap: 12px;
}

#top-main-menu .navbar > .d-flex.align-items-center.ms-auto {
    flex: 0 0 auto;
    min-width: 0;
}

#main-header nav[aria-label="breadcrumb"] {
    display: none;
}

#navbar-breadcrumb .breadcrumb,
#navbar-breadcrumb .breadcrumb a,
#navbar-breadcrumb .breadcrumb span,
#navbar-breadcrumb .breadcrumb-item,
#navbar-breadcrumb .breadcrumb-item.active {
    background: transparent;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

#navbar-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

#navbar-breadcrumb .breadcrumb-item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#navbar-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem;
}

#navbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: rgba(255, 255, 255, 0.65);
    padding-right: 0.5rem;
    font-size: 14px;
}

#navbar-breadcrumb .breadcrumb-item a,
#navbar-breadcrumb .breadcrumb-item span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

#navbar-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
}

#navbar-breadcrumb .breadcrumb-item.active {
    color: #fff;
    font-weight: 700;
    flex: 1 1 auto;
}

.account-environment-info {
    padding: 8px 16px 4px;
    min-width: 180px;
}

.account-environment-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-environment-info.is-live .account-environment-label {
    color: #198754;
}

.account-environment-info.is-uat .account-environment-label {
    color: #fd7e14;
}

.account-environment-version {
    font-size: 12px;
    color: #6c757d;
}

.page-header-toolbar .d-block,
#main-header #title-pane .d-block {
    display: block !important;
    font-size: 13px;
    color: #5d5d5d;
    margin: 0;
    white-space: nowrap;
    line-height: 1.2;
    height: auto;
}

.page-header-toolbar .custom-date-field,
.page-header-toolbar .custom-dropdown-field,
#main-header #title-pane .custom-date-field,
#main-header #title-pane .custom-dropdown-field {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

#main-header .dx-texteditor.dx-editor-filled .dx-texteditor-input,
.page-header-toolbar .dx-texteditor.dx-editor-filled .dx-texteditor-input,
#title-pane .dx-texteditor.dx-editor-filled .dx-texteditor-input {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

#main-header .dx-texteditor,
.page-header-toolbar .dx-texteditor,
#title-pane .dx-texteditor {
    min-height: 32px;
    height: 32px;
}

.area-landing-kpi-grid,
.area-landing-chart {
    width: 100%;
    min-height: 280px;
}

.area-landing-chart {
    min-height: 400px;
}
.custom-date-picker .dx-texteditor-input {
    padding-right: 32px !important;
}
.dx-texteditor.dx-editor-filled .dx-texteditor-input {
    padding-top: 10px !important;
    padding-bottom:10px !important;
    border:0;
    /*border-radius:6px;*/
}
.dx-texteditor-input-container .dx-placeholder {
    top:-4px;
}

.dx-dropdowneditor-input-wrapper, .dx-dropdowneditor-input-wrapper {
    border-radius:6px;
}

/*.dxbButton_MetropolisBlue, .dxeTextBox_MetropolisBlue, .dxeMemoSys, .dxeButtonEdit_MetropolisBlue {
    border-radius:4px !important;
}*/

.dx-tabpanel-container .dx-lookup-field-wrapper,
.dx-tabpanel-container .dx-dropdowneditor-input-wrapper,
.dx-tabpanel-container .dx-texteditor-input-container,
.dx-tabpanel-container .dx-selectbox-container {
    /*border-radius: 6px;*/
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.dx-dropdowneditor-input-wrapper .dx-texteditor-input-container {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dx-datagrid-content .dx-texteditor-input-container,
.dx-datagrid-content .dx-dropdowneditor-input-wrapper {
    border-radius: 0;
}

.dxgvControl_MetropolisBlue a {
    color: #0072C6 !important;
}

/* --- date picker icon margin --- */

.dx-editor-filled .dx-texteditor-buttons-container:last-child > .dx-dropdowneditor-button:last-child {
    margin-left: 8px;
}
.dx-texteditor.dx-editor-filled::after{
    border-bottom:0px !important;
}
#main-header .dx-datebox.dx-texteditor,
.page-header-toolbar .dx-datebox.dx-texteditor,
.dx-list-header-filters .dx-datebox.dx-texteditor,
.custom-date-field .dx-datebox.dx-texteditor,
#main-header .dx-selectbox.dx-texteditor,
.page-header-toolbar .dx-selectbox.dx-texteditor,
.dx-list-header-filters .dx-selectbox.dx-texteditor,
.custom-dropdown-field .dx-selectbox.dx-texteditor {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px;
    box-shadow: none !important;
}

#main-header .dx-selectbox.dx-texteditor,
.page-header-toolbar .dx-selectbox.dx-texteditor,
.dx-list-header-filters .dx-selectbox.dx-texteditor,
.custom-dropdown-field .dx-selectbox.dx-texteditor {
    overflow: hidden;
}

#main-header .dx-datebox.dx-texteditor,
.page-header-toolbar .dx-datebox.dx-texteditor,
.dx-list-header-filters .dx-datebox.dx-texteditor,
.custom-date-field .dx-datebox.dx-texteditor,
.date-box-host .dx-datebox.dx-texteditor,
.custom-date-picker .dx-datebox.dx-texteditor {
    overflow: visible;
}

#main-header .dx-datebox .dx-dropdowneditor-button,
.page-header-toolbar .dx-datebox .dx-dropdowneditor-button,
.dx-list-header-filters .dx-datebox .dx-dropdowneditor-button,
.custom-date-field .dx-datebox .dx-dropdowneditor-button,
.date-box-host .dx-datebox .dx-dropdowneditor-button,
.custom-date-picker .dx-datebox .dx-dropdowneditor-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dx-overlay-wrapper.dx-datebox-wrapper,
.dx-datebox-wrapper {
    z-index: 2000;
}

#main-header .dx-datebox.dx-texteditor.dx-state-focused,
.page-header-toolbar .dx-datebox.dx-texteditor.dx-state-focused,
.dx-list-header-filters .dx-datebox.dx-texteditor.dx-state-focused,
.custom-date-field .dx-datebox.dx-texteditor.dx-state-focused,
#main-header .dx-selectbox.dx-texteditor.dx-state-focused,
.page-header-toolbar .dx-selectbox.dx-texteditor.dx-state-focused,
.dx-list-header-filters .dx-selectbox.dx-texteditor.dx-state-focused,
.custom-dropdown-field .dx-selectbox.dx-texteditor.dx-state-focused {
    border-color: #86b7fe !important;
}

#main-header .dx-datebox .dx-texteditor-input-container,
#main-header .dx-datebox .dx-dropdowneditor-input-wrapper,
#main-header .dx-datebox .dx-texteditor-input,
.page-header-toolbar .dx-datebox .dx-texteditor-input-container,
.page-header-toolbar .dx-datebox .dx-dropdowneditor-input-wrapper,
.page-header-toolbar .dx-datebox .dx-texteditor-input,
.dx-list-header-filters .dx-datebox .dx-texteditor-input-container,
.dx-list-header-filters .dx-datebox .dx-dropdowneditor-input-wrapper,
.dx-list-header-filters .dx-datebox .dx-texteditor-input,
.custom-date-field .dx-datebox .dx-texteditor-input-container,
.custom-date-field .dx-datebox .dx-dropdowneditor-input-wrapper,
.custom-date-field .dx-datebox .dx-texteditor-input,
#main-header .dx-selectbox .dx-texteditor-input-container,
#main-header .dx-selectbox .dx-dropdowneditor-input-wrapper,
#main-header .dx-selectbox .dx-texteditor-input,
.page-header-toolbar .dx-selectbox .dx-texteditor-input-container,
.page-header-toolbar .dx-selectbox .dx-dropdowneditor-input-wrapper,
.page-header-toolbar .dx-selectbox .dx-texteditor-input,
.dx-list-header-filters .dx-selectbox .dx-texteditor-input-container,
.dx-list-header-filters .dx-selectbox .dx-dropdowneditor-input-wrapper,
.dx-list-header-filters .dx-selectbox .dx-texteditor-input,
.custom-dropdown-field .dx-selectbox .dx-texteditor-input-container,
.custom-dropdown-field .dx-selectbox .dx-dropdowneditor-input-wrapper,
.custom-dropdown-field .dx-selectbox .dx-texteditor-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#main-header .dx-datebox.dx-texteditor.dx-editor-filled::after,
.page-header-toolbar .dx-datebox.dx-texteditor.dx-editor-filled::after,
.dx-list-header-filters .dx-datebox.dx-texteditor.dx-editor-filled::after,
.custom-date-field .dx-datebox.dx-texteditor.dx-editor-filled::after,
#main-header .dx-selectbox.dx-texteditor.dx-editor-filled::after,
.page-header-toolbar .dx-selectbox.dx-texteditor.dx-editor-filled::after,
.dx-list-header-filters .dx-selectbox.dx-texteditor.dx-editor-filled::after,
.custom-dropdown-field .dx-selectbox.dx-texteditor.dx-editor-filled::after {
    display: none;
}

.custom-date-field .dx-datebox .dx-dropdowneditor-input-wrapper {
    border-radius: 6px;
}
.custom-date-field .dx-texteditor-input {width:140px;}

.custom-dropdown-field .dx-selectbox-container {
    border-radius: 6px;
    border: 0 !important;
}
.custom-dropdown-field .dx-placeholder {
    top: 0;
}
.custom-dropdown-field .dx-texteditor-input-container {
    border: none !important;
    line-height: 0;
}

.custom-dropdown-field .dx-texteditor.dx-editor-filled .dx-texteditor-input {
    border: none !important;
}
.custom-rounded-dropdown .dxeButtonEditSys {
    border: 0;
    border-radius: 6px !important;
    width:auto !important;
    /*border-bottom-left-radius: 9px !important;*/
}
.custom-rounded-dropdown .dxeButtonEditSys .dxeButton {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}


/*  --- Accordion styles-- ---*/
.accordion-header button {
    font-size: 13px;
}
.accordion-button:not(.collapsed) {
    color:#0079C9; font-weight:normal;
}
.accordion-button:focus {box-shadow:none;}


.accordion.subemneu-accordion {
    border: 0;
    background: transparent; margin-left:20px;
}
.subemneu-accordion .menu-dashboard-link.accordion-button {
    text-decoration: none;
    color: #0079C9;
}
.subemneu-accordion .menu-dashboard-link.accordion-button:hover,
.subemneu-accordion .menu-dashboard-link.accordion-button:focus {
    color: #0079C9 !important;
    background: transparent;
}
.subemneu-accordion .menu-dashboard-item.selected .menu-dashboard-link {
    font-weight: 700;
}
.subemneu-accordion .accordion-item {border:0; background:transparent;}
.subemneu-accordion .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: #0079C9;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    font-size: 15px !important;
    padding-bottom: 8px !important;
}
.subemneu-accordion .accordion-button::after {display:none;}
.subemneu-accordion .accordion-button .menu-chevron {
    margin-left: auto;
    font-size: 12px;
    width: auto;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}
.subemneu-accordion .accordion-button.collapsed .menu-chevron {
    transform: rotate(0deg);
}

/*.subemneu-accordion ul li a:hover span {
    color: rgba(0, 121, 201, 0.7) !important;
}*/

.bookmark-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bookmark-icon {
    display: none !important;
    font-size: 18px !important;
    cursor: pointer;
    color: rgba(144, 144, 144, 0.3) !important;
}
.active.bookmark-icon {
    display: inline-block !important;
    color: #efaf01 !important;
}

.bookmark-item:hover .bookmark-icon {
    display: inline-block !important;
}

.side-navigation .icon-bookmark {
    color: #efaf01;
}

/*  --- //Accordion styles-- ---*/
#edit-pane {
    width: 100%;
    box-shadow: none;
    background-color: #fff;
    border-radius: 10px;
}
#edit-pane > div {border:0; padding:0;}
#edit-pane > div:last-child {border-bottom:0;}

.custom-container {
    display:flex; width:100%; min-height:100%;
}
.custom-container .custom-col-left {
    width:70%;
    overflow:hidden;
    background:#fff;
}
.custom-container .custom-col-right {
    width:30%;
}
.dxgvControl_MetropolisBlue.dxgv, .max-width {
    max-width: 100%;
}

/* Admin > UserGroupForms > List */
#permissions-access {margin:0;}
#permissions-access .permission-list {margin:0 !important;}

#permissions-access .permission-list table {
    margin: 0 !important;
    width: 100% !important;
}
.permission.phover td {
    background-color: #E6E6E6 !important;
    
}
#permissions-access .permission-list {float:none !important;}
    #permissions-access .permission-list table tr td.link {
        background-color: #eaeaea;
    }

#objectmapping-table .objectmapping-list {
    width:100% !important; margin:0 !important; display:inherit !important;
    border:0 !important;
}

/* //Admin > UserGroupForms > List */

/*  -- Grid pagination styles --  */
.dx-pager .dx-page-sizes .dx-page-size, .dx-pager .dx-pages .dx-page {
    padding: 8px 5px;
    margin: 5px;
}
/*  //-- Grid pagination styles --  */

/* -- tab styles --- */

.dxtc-stripContainer .dxtc-activeTab a, .dxtc-stripContainer .dxtc-tabHover a, .dxpcLite_MetropolisBlue .dxpc-header {   
    padding: 10px 32px !important;
}
.dxtcLite_MetropolisBlue > .dxtc-stripContainer .dxtc-link {
    padding: 10px 32px !important;
}
.dx-pager .dx-page-sizes .dx-page-size.dx-first-child, .dx-pager .dx-page-sizes .dx-page-size:first-child {
    margin-left:5px !important;
}

.sales .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.sales .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.sales .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.sales .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.sales .dx-tab.dx-tab-selected::before {
    border-bottom: 4px solid #b00003 !important;
}

.admin .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.admin .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.admin .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.admin .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.admin .dx-tab.dx-tab-selected::before {
    border-bottom: 4px solid #2c4258 !important;
}

.admin .dx-tab.dx-tab-selected .dx-tab-text, .finance .dx-tab.dx-tab-selected .dx-tab-text,
.management .dx-tab.dx-tab-selected .dx-tab-text, .operations .dx-tab.dx-tab-selected .dx-tab-text,
.healthandsafety .dx-tab.dx-tab-selected .dx-tab-text, .sales .dx-tab.dx-tab-selected .dx-tab-text,
.fleet .dx-tab.dx-tab-selected .dx-tab-text, .tickets .dx-tab.dx-tab-selected .dx-tab-text,
.hr .dx-tab.dx-tab-selected .dx-tab-text, .supplier .dx-tab.dx-tab-selected .dx-tab-text,
.dx-tab.dx-tab-selected .dx-icon {
    color: #fff;
}

.management .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.management .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.management .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.management .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.management .dx-tab.dx-tab-selected::before {
    border-bottom: 4px solid #3b2583 !important;
}

.operations .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.operations .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.operations .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.operations .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.operations .dx-tab.dx-tab-selected::before {
    border-bottom: 4px solid #05874e !important;
}

.finance .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.finance .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.finance .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.finance .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.finance .dx-tab.dx-tab-selected::before {
    border-bottom: 4px solid #023162 !important;
}

.healthandsafety .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.healthandsafety .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.healthandsafety .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.healthandsafety .dxtcLite_MetropolisBlue.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.healthandsafety .dx-tab.dx-tab-selected::before {
    border-bottom: 4px solid #c44918 !important;
}


/* -- //tab styles --- */

/* --- breadcrubm styles --- */

.breadcrumb span {display:inline-block;}
.breadcrumb, .breadcrumb a, .breadcrumb span {
    font-size: 16px; color:#999;
}
.breadcrumb-item.active {color:#000; font-size: 16px; font-weight:700;}
.breadcrumb-item + .breadcrumb-item::before {font-size:16px;}
/* --- //breadcrubm styles --- */

.dx-scrollable-scroll-content {
    background-color:#999999 !important;
}

/* Tooltip Box */
/*.fox-tooltip .tooltip-inner {
    background-color: #000 !important;
    color: #fff !important;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 220px;
}*/

/* Tooltip Arrow Size */
/*.fox-tooltip .tooltip-arrow {
    width: 1rem !important;
    height: 1rem !important;
}*/

/* RIGHT */
/*.fox-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #000 !important;
    border-width: 0.5rem 0.5rem 0.5rem 0 !important;
}*/

/* LEFT */
/*.fox-tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #000 !important;
    border-width: 0.5rem 0 0.5rem 0.5rem !important;
}*/

/* TOP */
/*.fox-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #000 !important;
    border-width: 0.5rem 0.5rem 0 !important;
}*/

/* BOTTOM */
/*.fox-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #000 !important;
    border-width: 0 0.5rem 0.5rem !important;
}*/


/* ----- loader ----*/

.loader-wrapper {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    position: relative;
    width: 80px;
    height: 80px;
}

    .loader::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 5px solid #e5e5e5;
        border-top: 5px solid #0079C9;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        background:#fff;
    }

.logo-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: url('/Assets/Img/fox-head.png') center / contain no-repeat;
    transform: translate(-50%, -50%);
    animation: pulse 0.6s ease-in-out infinite;
}

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

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* ----- //loader ----*/

.dx-toolbar.filter-option-list {
    background:none;
}
.filter-option-list .dx-toolbar-button {padding-right:15px;}
#RightContentPane {background-color:#f5f5f5;}

/*.dxlp-loadingImage {
    background-image: url('/Assets/Img/fox-head.png') !important;
    background-size: 50px 50px;
    width: 50px !important;
    height: 50px !important;
}

.dxlp-loadingImage,
.dxlpLoadingImage {
    display: none !important;
}*/

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.3);
    z-index: 99999;
}

.loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

#ToDate_B-1Img {
    display: none !important;
}

#ToDate_B-1 {
    background: url('/Assets/Img/cal.png') center center no-repeat;
    background-size: 24px 24px;
    padding-right: 25px;
}

#ToDate_B-1, 
#ToDate_B-0 {
    width: 16px !important;
    min-width: 16px !important;
}
/* Increase icon size */
#ToDate_B-1Img {
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;    
}

#FromDate_B-1Img {
    display: none !important;
}

#FromDate_B-1 {
    background: url('/Assets/Img/cal.png') center center no-repeat;
    background-size: 22px 22px;
    padding-right: 25px;    
}
#FromDate_B-1
#FromDate_B-0 {
    width: 16px !important;
    min-width: 16px !important;
}
#FromDate_B-1Img {
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
}
.date-control-custom table {
    border-radius: 6px !important;
    border:0;
}
.date-control-custom table td:first-child {padding:8px 2px 8px 8px;}
.date-control-custom table td:last-child {
    padding: 0 25px 0px 10px !important;
}
.date-control-custom table td.dxeButtonEditButtonHover_MetropolisBlue {
    background-color:transparent !important;
}

.chart-maximized {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999;
    background: #fff;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    padding: 8px 64px 16px 16px;
}

    .chart-maximized > .d-flex.p-3 {
        flex: 0 0 auto;
    }

    .chart-maximized .icon-new-window {
        display: none !important;
    }

    .chart-maximized > .d-flex.px-3 {
        flex: 0 0 auto;
        padding-right: 8px;
    }

    .chart-maximized .dashboard-chart-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .chart-maximized .area-landing-chart,
    .chart-maximized .area-landing-kpi-grid,
    .chart-maximized .home-dashboard-chart {
        flex: 1 1 auto;
        min-height: 280px;
        height: auto !important;
        width: 100%;
    }

    .chart-maximized .home-dashboard-legend {
        flex: 0 0 auto;
        height: auto !important;
        max-height: 30vh;
        overflow: auto;
        width: 100%;
        margin-top: 8px;
    }

#chartCloseBtn {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 100000;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: none;
}

.cursor-pointer {
    cursor: pointer
}

.charts .card .icon-new-window {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 18px;
    color: #A1A5B6;
    flex-shrink: 0;
}

.search-wrapper #SearchCombo,
.search-wrapper .dx-selectbox,
.search-wrapper .dx-texteditor {
    width: 100%;
    background: #fff;
    border-radius: 13px;
}

.search-wrapper .dx-texteditor.dx-editor-outlined {
    border: none;
    background: #fff;
}

.search-wrapper .dx-texteditor-input {
    padding-left: 36px !important;
    height: 35px;
    font-size: 14px;
}

.search-wrapper .dx-placeholder {
    padding-left: 36px;
}

.tickets #top-main-menu,
.hr #top-main-menu,
.fleet #top-main-menu,
.supplier #top-main-menu {
    background: linear-gradient(180deg, #2A3F54 0%, #1a2833 147.5%);
}

/* Stacked form fields: label above input (Address Edit General pattern) */
.stacked-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px 12px;
    box-sizing: border-box;
}

.stacked-field .form-label {
    display: block;
    font-weight: bold;
    line-height: 1.2;
    padding: 0 0 6px 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stacked-field .field-host {
    width: 100%;
    min-width: 0;
}

.stacked-field .field-host > div {
    width: 100%;
    max-width: 100%;
}

/* Overflow scroll cues — visual only, content stays scrollable */
.scroll-cue-host {
    position: relative;
    min-height: 0;
}

.dx-tabpanel .dx-multiview-item-content.scroll-cue-host {
    position: relative;
}

.dx-multiview-item-content > .scroll-cue-host,
.job-approval-detail__devices-host,
.dx-dual-list-body-host {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.job-approval-detail__devices-host > .job-approval-detail__devices,
.dx-dual-list-body-host > .dx-dual-list-body,
.dx-multiview-item-content > .scroll-cue-host > .scrollable {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.dx-datagrid-rowsview.scroll-cue-host {
    display: block;
    overflow: hidden;
}

.scroll-cue {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 52px;
    z-index: 3;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    color: var(--area-header-colour, #0079C9);
    font-size: 40px;
}

.scroll-cue--up {
    top: 0;
    background: linear-gradient(to bottom, #fff 35%, rgba(255, 255, 255, 0));
}

.scroll-cue--down {
    bottom: 0;
    background: linear-gradient(to top, #fff 35%, rgba(255, 255, 255, 0));
}

.scroll-cue-host.can-scroll-up > .scroll-cue--up,
.scroll-cue-host.can-scroll-down > .scroll-cue--down {
    display: flex;
}