:root {
    --rz-holo-gradient-border: linear-gradient(white, white) padding-box, var(--rz-holo-gradient) border-box !important; /*linear-gradient(180deg, #EC3225 0%, #8E5FFF 100%) */
    --rz-holo-gradient: linear-gradient(180deg, #EC3225 0%, #8E5FFF 100%) !important;
    --rz-holo-gradient-270deg: linear-gradient(270deg, #EC3225 0%, #8E5FFF 100%) !important;
    --rz-holo-gradient-270deg-light: linear-gradient(270deg,#eb5146 0%, #9c74fc 100%) !important;
    --rz-holo-gradient-270deg-lighter: linear-gradient(270deg,#eb6e65 0%, #b292fc 100%) !important;
    --rz-holo-gradient-270deg-dark: linear-gradient(270deg,#db2114 0%, #6f3af0 100%) !important;
    --rz-holo-gradient-270deg-darker: linear-gradient(270deg,#bf1408 0%, #4f1ec7 100%) !important;
    --rz-scrollbar-size: 8px;
    --rz-input-border: 1px solid var(--rz-primary-light);
    --rz-dialog-zindex: 1101;
}


    :root.rz-custom, .rz-custom {
        --rz-primary: #040B13 !important;
        --rz-primary-lighter: #D9DEE4 !important;
        --rz-primary-light: #535B69 !important;
        --rz-primary-dark: #03080F !important;
        --rz-primary-darker: #02060B !important;
        --rz-secondary: #535B69 !important;
        --rz-secondary-lighter: #E6E8EB !important;
        --rz-secondary-light: #6F7682 !important;
        --rz-secondary-dark: #424853 !important;
        --rz-secondary-darker: #343942 !important;
        --rz-info: #535B69 !important;
        --rz-info-lighter: #E6E8EB !important;
        --rz-info-light: #6F7682 !important;
        --rz-info-dark: #424853 !important;
        --rz-info-darker: #343942 !important;
        --rz-danger: #910a2d !important;
        --rz-danger-lighter: #fce7ec !important;
        --rz-danger-light: #e32956 !important;
        --rz-danger-dark: #660720 !important;
        --rz-danger-darker: #3d0413 !important;
        --rz-on-primary-lighter: #8D7057 !important;
        --custom-light-color: #fafafa!important;
        --custom-accent: #8D7057!important;
    }

    :root.rz-material, .rz-material {
        --rz-primary: #8E5FFF !important;
        --rz-primary-lighter: #e4ddfa !important;
        --rz-primary-light: #a079ff !important;
        --rz-primary-dark: #7750d6 !important;
        --rz-primary-darker: #6443b3 !important;
        --rz-secondary: #444C5C !important;
        --rz-secondary-lighter: #d8dae0 !important;
        --rz-secondary-light: #626976 !important;
        --rz-secondary-dark: #39404d !important;
        --rz-secondary-darker: #303541 !important;
        --rz-info: #2197F3 !important;
        --rz-info-lighter: #d2e6f8 !important;
        --rz-info-light: #45a8f5 !important;
        --rz-info-dark: #1c7fcc !important;
        --rz-info-darker: #176aab !important;
        --rz-success: #009B51 !important;
        --rz-success-lighter: #cde7de !important;
        --rz-success-light: #29ab6d !important;
        --rz-success-dark: #008244 !important;
        --rz-success-darker: #006d39 !important;
        --rz-warning: #FF9800 !important;
        --rz-warning-lighter: #f6e6d1 !important;
        --rz-warning-light: #ffa929 !important;
        --rz-warning-dark: #d68000 !important;
        --rz-warning-darker: #b36b00 !important;
        --rz-danger: #f44436 !important;
        --rz-danger-lighter: #f4d9da !important;
        --rz-danger-light: #ef5348 !important;
        --rz-danger-dark: #cd392d !important;
        --rz-danger-darker: #ab3026 !important;
        --rz-series-1: #353090 !important;
        --rz-series-2: #8E5FFF !important;
        --rz-series-3: #5F59F7 !important;
        --rz-series-4: #F4847C !important;
        --rz-series-5: #7A7AEF !important;
        --rz-series-6: #BEA9FF !important;
        --rz-series-7: #9D9DFF !important;
        --rz-series-8: #F7ADA7 !important;
    }

.dark-mode-font-color:not(.rz-light-theme):not(.force-light) {
    --rz-text-title-color: var(--rz-base-50) !important;
    --rz-text-color: var(--rz-base-50) !important;
    --rz-text-secondary-color: var(--rz-base-50) !important;
    --rz-text-tertiary-color: var(--rz-base-50) !important;
    --rz-text-contrast-color: var(--rz-white) !important;
    --rz-input-value-color: var(--rz-text-color);
    --rz-input-placeholder-color: var(--rz-base-50);
    --rz-chart-axis-color: var(--rz-base-50);
    --rz-chart-axis-label-color: var(--rz-base-50);
    --rz-chart-tooltip-background: var(--rz-base-background-color);
    --rz-chart-tooltip-color: var(--rz-text-color);
}

    .dark-mode-font-color .rz-form-field-label.rz-text-truncate {
        color: var(--rz-base-100) !important;
    }
.dark-mode-font-color .rz-light-theme.force-light .rz-form-field-label.rz-text-truncate {
    color: var(--rz-secondary) !important;
}

/* ApexCharts dark mode overrides */
.holo-chart-dark-mode .apexcharts-title-text,
.holo-chart-dark-mode .apexcharts-xaxis-label,
.holo-chart-dark-mode .apexcharts-yaxis-label,
.holo-chart-dark-mode .apexcharts-datalabel {
    fill: var(--rz-base-50) !important;
        color: var(--rz-base-50) !important;
}

.holo-chart-dark-mode .apexcharts-legend-text {
        fill: var(--rz-base-50) !important;
    color: var(--rz-base-50) !important;
}

.holo-chart-dark-mode .apexcharts-tooltip {
    background: var(--rz-base-background-color) !important;
    color: var(--rz-base-50) !important;
}

.holo-chart-dark-mode .apexcharts-tooltip-title {
    background: var(--rz-base-background-color) !important;
    border-bottom-color: var(--rz-base-400, #555) !important;
    color: var(--rz-base-50) !important;
}


.rz-border-color-holo-gradient {
    border-color: transparent;
    background: var(--rz-holo-gradient-border);
}

.rz-custom .rz-border-color-holo-default {
    border-color: #8D7057 !important;
}

.rz-border-color-holo-default {
    border-color: inherit
}

.rz-custom .rz-tabview-nav li {
    background: #535B69!important;
    color: #fff!important;
}
.rz-custom .rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    background: #333 !important;
    border-bottom: 2px solid var(--custom-accent) !important;
}

::-webkit-scrollbar-thumb {
    border: 2px !important;
}

.rz-button-md {
    height: 41.6px !important
}

.rz-button-text {
    padding: 0px 8px 0px 8px;
}

.rz-dialog-side-content {
    padding: 0;
    width: 100%;
}

.rz-panel-titlebar-icon.rz-panel-titlebar-toggler {
    cursor: pointer;
}

.rz-form-field-label {
    color: var(--rz-secondary) !important;
}

.rz-splitter > .rz-splitter-bar {
    opacity: 1;
}

.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover, .rz-sidebar-toggle {
    background-color: transparent !important;
    border-radius: unset !important;
    color: var(--rz-primary) !important;
}

.rz-panel-menu .rz-navigation-item-link {
    padding-block: 0.5rem !important;
    padding-inline: 0.5rem !important;
}
.rz-button.rz-variant-text.rz-base.rz-shade-default {
    color: var(--rz-on-base) !important;
}
.rz-panel-menu .rz-navigation-item-link {
    padding-block: 0.5rem !important;
    padding-inline: 0.5rem !important;
}

.icon-selector-dialog.rz-dialog {
    z-index: 9999 !important;
}

.rz-dialog-wrapper:has(> .icon-selector-dialog) {
    z-index: 99999 !important;
}

.rz-dropdown-panel.rz-popup {
    z-index: 99999 !important;
}

.page-designer-tree .rz-treenode {
    padding-inline-start: .3rem !important;
}

.page-designer-tree .rz-tree-toggler {
    width: max-content !important;
}

.page-designer-tree .rz-treenode-label {
    padding: 0.25rem 0 !important;
}

.page-designer-editor.monaco-editor-container {
    height: 94.5% !important;
}

.rz-tree-container, .rz-treenode-children {
    padding: 0px 0px 0px 3px !important;
}

.rz-material-light .rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before {
    color: #000;
    font-size: 1.2rem;
}

.rz-material-light .rz-splitter > .rz-splitter-bar > .rz-resize {
    border: 1.5px solid #000 !important;
    border-radius: 1px;
}

.rz-material-light .rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before {
    color: #000;
    font-size: 1.2rem;
}

.rz-material-light .rz-splitter > .rz-splitter-bar {
    opacity: 0.7 !important;
}

    .rz-material-light .rz-splitter > .rz-splitter-bar:hover {
        opacity: 1 !important;
    }

.rz-material-dark .rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before {
    color: #fff;
    font-size: 1.2rem;
}

.rz-material-dark .rz-splitter > .rz-splitter-bar > .rz-resize {
    border: 1.5px solid #fff !important;
    border-radius: 1px;
}

.rz-material-dark .rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before {
    color: #fff;
    font-size: 1.2rem;
}

.rz-material-dark .rz-splitter > .rz-splitter-bar {
    opacity: 0.7 !important;
}

    .rz-material-dark .rz-splitter > .rz-splitter-bar:hover {
        opacity: 1 !important;
    }
.rz-splitter-horizontal > .rz-splitter-bar{
    width: 9px!important;
}


/*Scroll styles*/

/* width */
::-webkit-scrollbar {
    width: 7px!important;
    height: 7px!important;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #c9c9c9 !important;
    border-radius: 7px !important;
}

/*Runtime Css Styles for material theme*/

.material-css .header {
    background-color: #FFFFFF !important;
}
.material-css .button-background-transparent {
    color: var(--rz-primary) !important;
}
.material-css .rz-sidebar-responsive {
    background-color: var(--rz-base-200) !important;
    color: #FFFFFF !important;
}

    .material-css .rz-sidebar-responsive .rz-panel-menu {
        background-color: var(--rz-base-200) !important;
        color: var(--rz-primary-darker) !important;
    }

        .material-css .rz-sidebar-responsive .rz-panel-menu .rz-navigation-item .rz-navigation-item-icon {
            color: var(--rz-primary-darker) !important;
        }

        .material-css .rz-sidebar-responsive .rz-panel-menu .rz-navigation-item-wrapper-active {
            color: var(--rz-primary-darker) !important;
        }
            .material-css .rz-sidebar-responsive .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
                color: var(--rz-primary-darker) !important;
                /*background-color: #E6E5FF !important;*/
            }

        .material-css .rz-sidebar-responsive .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
            background-color: var(--rz-base-200) !important;
            color: var(--rz-primary-darker) !important;
        }

            .material-css .rz-sidebar-responsive .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper :hover {
                color: var(--rz-primary-darker) !important;
                background-color: #EAEBEF !important;
            }


        .material-css .rz-sidebar-responsive .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
            color: var(--rz-primary-darker) !important;
            /*background-color: #E6E5FF !important;*/
        }

.material-css .rz-navigation-item-wrapper:hover {
    color: var(--rz-primary-darker) !important;
}

.material-css .rz-sidebar-responsive .rz-badge-secondary.rz-shade-default.notification-counter {
    background-color: #EC3225 !important;
}

.material-css .navigation-container-item {
    color: var(--rz-primary-darker) !important;
}


@media (min-width: 769px) {

    .material-css .userdisplayname {
        color: #444c5c !important;
    }

    .material-css .rz-sidebar {
        background-color: #eee !important;
    }

    /*Sidebar*/

    .material-css .rz-panel-menu {
        background-color: #eee !important;
        color: var(--rz-primary-darker) !important;
    }

    .material-css .rz-sidebar-collapsed .rz-panel-menu {
        background-color: #eee !important;
        color: var(--rz-primary-darker) !important;
    }



    .material-css .rz-panel-menu .rz-navigation-item .rz-navigation-item-icon {
        color: var(--rz-primary-darker) !important;
    }

    .material-css .rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-icon {
        color: var(--rz-primary-darker) !important;
    }

    .material-css .rz-panel-menu .rz-navigation-item-wrapper-active {
        color: var(--rz-primary-darker) !important;
    }


        .material-css .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
            color: var(--rz-primary-darker) !important;
            background-color: #E6E5FF !important;
        }

    .material-css .creator-menu-item .rz-panel-menu .rz-navigation-item-wrapper-active {
        background-color: none !important;
    }

    .material-css .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
        background-color: var(--rz-base-200) !important;
        color: var(--rz-primary-darker) !important;
    }

        .material-css .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper :hover {
            background-color: #EAEBEF;
            color: var(--rz-primary-darker) !important;
        }

        .material-css .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-icon {
            color: var(--rz-primary-darker) !important;
        }

    .material-css .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
        color: var(--rz-primary-darker) !important;
        background-color: #E6E5FF !important;
    }

        .material-css .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
            color: var(--rz-primary-darker) !important;
        }

    .material-css .rz-navigation-item-wrapper:hover {
        color: var(--rz-primary-darker) !important;
    }

    .material-css .rz-badge-secondary.rz-shade-default.notification-counter {
        background-color: #EC3225 !important;
    }

    .material-css .rz-sidebar-collapsed .rz-badge-secondary.rz-shade-default.notification-counter {
        background-color: #EC3225!important;
    }

    /*End sidebar*/
}

/*Css styles form custom theme in Runtime*/
/* ===========================
   Mazda Custom Theme
   =========================== */

.custom-theme-css .header {
    background-color: #333 !important;
    color: #fff!important;
}

.custom-theme-css .rz-sidebar-responsive {
    background-color: #000000 !important;

}

    .custom-theme-css .rz-sidebar-responsive .rz-panel-menu {
        background-color: #000000 !important;
    }

 .user-configuration-panel {
    width: 100%;
    background-color: #fff !important;
    color: #000 !important;
}

    .user-configuration-panel .rz-navigation-item-link:hover {
        background-color: #e5e5e5;
        color: #000 !important;
    }

.chart-value-tooltip {
    padding: 0.1rem !important;
    border: none !important;
    box-shadow: none !important;

}