.page-theme-custom {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #383838;
    --rz-base-50: #e0e0e0;
    --rz-base-100: #a0a0a0;
    --rz-base-200: #6c6c6c;
    --rz-base-300: #545454;
    --rz-base-400: #383838;
    --rz-base-500: #333333;
    --rz-base-600: #2e2e2e;
    --rz-base-700: #252525;
    --rz-base-800: #1e1e1e;
    --rz-base-900: #121212;
    --rz-base-light: #a0a0a0;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #252525;
    --rz-base-darker: #000000;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #121212;
    --rz-on-base-lighter: #121212;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-primary: #e6e6e6 !important;
    --rz-primary-light: #e5e5e5 !important;
    --rz-primary-lighter: rgb(47, 47, 47) !important;
    --rz-primary-dark: #c4c4c4 !important;
    --rz-primary-darker: #e6e6e6 !important;
    --rz-secondary: #6a6a6a !important;
    --rz-secondary-light: #b0b0b0 !important;
    --rz-secondary-lighter: rgba(180, 180, 180, 0.2) !important;
    --rz-secondary-dark: #515151 !important;
    --rz-secondary-darker: #3a3a3a !important;
    --rz-on-primary: #1a1a1a !important;
    --rz-on-primary-light: #1a1a1a !important;
    --rz-on-primary-lighter: #d7d7d7 !important;
    --rz-on-primary-dark: #0d0d0d !important;
    --rz-on-primary-darker: #000004 !important;
    --rz-on-secondary: #ffffff !important;
    --rz-on-secondary-light: #ffffff !important;
    --rz-on-secondary-lighter: #ffffff !important;
    --rz-on-secondary-dark: #ffffff !important;
    --rz-on-secondary-darker: #ffffff !important;
}


/*Sidebar*/
nav {
    background-color: #ffffff !important;
    border-right: 1px solid #e0e0e0;
}

.menu-bar-container .fa-solid {
    color: #757575;
}

nav ul li p {
    color: #212121;
}

nav ul li:hover {
    background-color: rgb(243 243 243);
    color: #000000;
    transition: background-color 0.3s ease;
    padding: 10px;
}

nav ul li:hover .fa-solid {
    color: #212121;
}

nav ul li:hover p {
    color: #000000;
}

.menu-bar-container .active .fa-solid {
    color: #212121;
}

nav ul li.active {
    background-color: #f5f5f5;
    padding: 10px;
}

nav ul li.active p {
    color: #000000;
}

/*Sidebar button close*/

.toggle-sidebar-button-open,
.toggle-sidebar-button-close {
    background-color: #fbfbfb;
    color: #000000;
    border: 1px solid #e0e0e0;
}

.toggle-sidebar-button-open:hover,
.toggle-sidebar-button-close:hover {
    background-color: #d0001f;
    color: #ffffff;
}


/*Top bar*/
.global-status-bar-card {
    background-color: #ffffff !important;
    padding: 2px !important;
    border-bottom: 1px solid #e0e0e0;
}

.global-status-bar-card-wrapper {
    color: #616161;
}

.global-status-bar-tabs-wrapper .rz-tabview-title {
    color: #000000 !important;
}

.device-health-summary-label {
    color: #000000;
}

/*Header of page*/
.header {
    background-color: #f9f9f9;
}

/*Body of page*/
.rz-body {
    background-color: #f9f9f9;
}

:root {
    --header-color: #f5f5f5;
    --white: #fff;
    --bg-primary: #f5f5f5;
    --bg-secondary: #ff7e33;
    --fg-primary: #111;
    --transporters-list-table-bg: #ffffff;
    --menu-separator: 1px solid #f1f1f4;
    --throughput-bar-background: #f5f5f5;
    --rc-card-battery-depleted-color: #999;
    --icon-background-color: #ffffff;
}

:root {
    --rz-primary: #4a4949 !important;
    --rz-primary-light: #4a4d4e !important;
    --rz-primary-lighter: rgba(19, 23, 24, 0.1) !important;
    --rz-primary-dark: #0e1111 !important;
    --rz-primary-darker: #080a0a !important;
    --rz-secondary: #5a5a5a !important;
    --rz-secondary-light: #b0b0b0 !important;
    --rz-secondary-lighter: rgba(90, 90, 90, 0.1) !important;
    --rz-secondary-dark: #383838 !important;
    --rz-secondary-darker: #1f1f1f !important;
    --rz-on-primary: #ffffff !important;
    --rz-on-primary-light: #ffffff !important;
    --rz-on-primary-lighter: #4a4949 !important;
    --rz-on-primary-dark: #ffffff !important;
    --rz-on-primary-darker: #ffffff !important;
    --rz-on-secondary: #ffffff !important;
    --rz-on-secondary-light: #ffffff !important;
    --rz-on-secondary-lighter: #ffffff !important;
    --rz-on-secondary-dark: #ffffff !important;
    --rz-on-secondary-darker: #ffffff !important;
    --rz-layout-body-background-color: #f5f5f5 !important;
    --rz-grid-selected-color: #424242 !important;
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: opacity 0.3s;
    box-shadow: var(--rz-dialog-shadow);
}

.tooltip-theme-background{
    background-color: #ffffff !important;
}

.rz-tabview-title { color: black; }

.login-image {
    content: url("/assets/Logo_black_vertical.png");
    width: 150px;
    height: auto;
}

.side-bar-logo-image {
    content: url("/assets/Logo_light_theme_horizontal.svg");
}

.w-100 {
    width: 100%;
}

.rz-pager-page { 
    color: var(--rz-pager-numeric-button-color) !important;
}

.rz-pager-last, .rz-pager-next {
    color: var(--rz-pager-next-button-color) !important;
}

.rz-pager-first, .rz-pager-prev {
    color: var(--rz-pager-back-button-color) !important;
}

.rz-grid-table thead tr th { 
    background: #f8fafb; 
}

/*Cards*/
.rz-card {
    background-color: #ffffff;
}

.rz-card-battery-percentage-bar-background {
    background-color: #7c7c7c
}

.rz-card-throughput-bar-background {
    background-color: #f5f5f5;
}


/* custom style to override and fix radzen columns title that dont grow down and instead get cut */
.rz-datatable-thead th .rz-column-title-content,
.rz-grid-table thead th .rz-column-title-content {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/*  make the table column go bellow if it can't fit current space */
.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    overflow: visible;
    white-space: pre-wrap;
    text-align: start;
}

/*User dropdown menu*/
ul.rz-profile-menu {
    background-color: transparent !important;
    padding-block: unset !important;
    padding-inline: unset !important;
}

ul.rz-profile-menu .rz-navigation-menu {
    margin-block: 10px !important;
    width: 250px;
}

ul.rz-profile-menu .rz-navigation-item-icon-children {
    color: black;
}

ul.rz-profile-menu .rz-navigation-menu .rzi {
    color: black;
}

/*Taxi Manual Control*/
.taxi-manual-control .rz-button.rz-base.rz-shade-default { 
    background-color: #1b1e2a; 
    color: #ffffff; 
}


/*Parameters Page*/
    td:has(.parameter-changed) {
    background-color: #579fe0 !important;
}    


/*ThroughputSummary filters*/
.throughputSummary-filters-row{
        font-size: var(--rz-grid-header-font-size);
        border: 1px solid #e0e0e0;
        background-color: #f8fafb;
        color:black;
    }

        .throughputSummary-filters-column-border-right{
        border-right: 1px solid #e0e0e0;
    }

            .throughputSummary-filters-column-font-weight{
        font-weight: var(--rz-grid-header-font-weight);
    }