:root {
    --bs-primary: var(--primaryBgColor);
    --bs-blue: var(--primaryBgColor);
    --bs-link-color: var(--primaryBgColor);
    --bs-link-color-rgb: var(--primaryBgColorRgb);
    --bs-link-hover-color: #828282;
    --bs-link-hover-color-rgb: 130, 130, 130;
}

.filter-panel .dxbl-text-edit {
    --dxbl-text-edit-focus-shadow-blur: calc(0.0rem);
    --dxbl-text-edit-focus-border-color: var(--textEditFocusedBorderColor);
    --dxbl-text-edit-border-radius: 0px;
}

.filter-panel .form-check-input {
    border-color: var(--textEditFocusedBorderColor) !important;
}

.filter-panel .form-control,
.view-navbar .form-control {
    background-color: var(--textEditBgColor);
}

.dxbl-text-edit {
    --dxbl-text-edit-bg: var(--textEditBgColor);
    --dxbl-text-edit-btn-bg: var(--textEditBgColor);
    --dxbl-text-edit-border-color: var(--textEditBorderColor);
}

.filter-panel .dxbl-text-edit.dxbl-sm,
.view-navbar .dxbl-text-edit.dxbl-sm {
    --dxbl-text-edit-border-radius: 0px;
}

.dropdown-menu-dark {
    --bs-dropdown-bg: #5e5e5e;
    --bs-dropdown-link-active-bg: var(--primaryBgColor);
}

/* badge */
.badge.badge-primary {
    background-color: var(--primaryBadgeColor);
    color: white;
}

.badge.bg-success {
    background-color: #7dbf22 !important;
}

.badge.bg-info {
    background-color: #5fb6fd !important;
}

.badge.bg-warning {
    background-color: #f9d906 !important;
}

.badge.bg-light {
    background-color: #d7d7d7 !important;
}


/* btn-primary */
.btn-primary {
    --bs-btn-bg: var(--primaryBgColor) !important;
    --bs-btn-border-color: var(--primaryBgColor) !important;
    --bs-btn-hover-bg: var(--primaryBgColorHover) !important;
    --bs-btn-hover-border-color: var(--primaryBgColorHover) !important;
    --bs-btn-active-bg: var(--primaryBgColor) !important;
    --bs-btn-active-border-color: var(--primaryBgColor) !important;
    --bs-btn-disabled-bg: var(--primaryBgColor) !important;
    --bs-btn-disabled-border-color: var(--primaryBgColor) !important;
    --bs-btn-color: var(--primaryColor) !important;
    --bs-btn-hover-color: var(--primaryColor) !important;
    --bs-btn-active-color: var(--primaryColor) !important;
    --bs-btn-disabled-color: var(--primaryColor) !important;
}

.btn-success {
    --bs-btn-bg: var(--successBgColor) !important;
    --bs-btn-border-color: var(--successBgColor) !important;
    --bs-btn-hover-bg: var(--successBgColorHover) !important;
    --bs-btn-hover-border-color: var(--successBgColorHover) !important;
    --bs-btn-active-bg: var(--successBgColor) !important;
    --bs-btn-active-border-color: var(--successBgColor) !important;
    --bs-btn-disabled-bg: var(--successBgColor) !important;
    --bs-btn-disabled-border-color: var(--successBgColor) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--primaryBgColor) !important;
    --bs-btn-border-color: var(--primaryBgColor) !important;
    --bs-btn-hover-bg: var(--primaryBgColorHover) !important;
    --bs-btn-hover-border-color: var(--primaryBgColorHover) !important;
    --bs-btn-focus-shadow-rgb: var(--primaryBgColorRgb) !important;
    --bs-btn-active-bg: var(--primaryBgColorHover) !important;
    --bs-btn-active-border-color: var(--primaryBgColorHover) !important;
    --bs-btn-disabled-color: var(--primaryBgColorHover) !important;
    --bs-btn-disabled-border-color: var(--primaryBgColorHover) !important;
}


.ui-cmp-card .card .btn-light {
    --bs-btn-bg: var(--lightColor);
    --bs-btn-border-color: var(--lightColor);
    --bs-btn-hover-bg: var(--lightColorHover);
    --bs-btn-hover-border-color: var(--lightColorHover);
    --bs-btn-active-bg: var(--lightColor);
    --bs-btn-active-border-color: var(--lightColor);
    --bs-btn-disabled-bg: var(--lightColor);
    --bs-btn-disabled-border-color: var(--lightColor);
    --bs-btn-color: var(--lightTextColor);
    --bs-btn-hover-color: var(--lightTextColor);
    --bs-btn-active-color: var(--lightTextColor);
    --bs-btn-disabled-color: var(--lightTextColor);
}

.dxbl-btn-standalone.dxbl-btn-primary {
    --dxbl-btn-color: rgb(255, 255, 255);
    --dxbl-btn-bg: var(--primaryBgColor) !important;
    --dxbl-btn-border-color: #ffffff00;
    --dxbl-btn-active-bg: var(--primaryBgColor) !important;
    --dxbl-btn-active-color: rgb(255, 255, 255);
    --dxbl-btn-active-border-color: #ffffff00;
    --dxbl-btn-hover-bg: var(--primaryBgColorHover) !important;
    --dxbl-btn-hover-color: rgb(255, 255, 255);
    --dxbl-btn-hover-border-color: #ffffff00 !important;
    --dxbl-btn-disabled-bg: #d7d7d7;
    --dxbl-btn-disabled-color: rgb(255, 255, 255);
    --dxbl-btn-disabled-border-color: #ffffff00;
    --dxbl-btn-focus-outline-size: 0.125rem;
    --dxbl-btn-focus-outline-offset: 0.063rem;
    --dxbl-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --dxbl-btn-focus-bg: var(--primaryBgColor) !important;
    --dxbl-btn-focus-color: rgb(255, 255, 255);
    --dxbl-btn-focus-border-bg: #ffffff00 !important;
    --dxbl-btn-focus-outline-color: var(--primaryBgColor) !important;
}

.dxbl-grid-command-cell .dxbl-btn.dxbl-btn-primary {
    --dxbl-btn-color: #ffffff;
}

.dxbl-btn-standalone.dxbl-btn-danger {
    --dxbl-btn-color: rgb(255, 255, 255);
    --dxbl-btn-bg: #DC3545;
    --dxbl-btn-border-color: #ffffff00;
    --dxbl-btn-active-bg: #842029;
    --dxbl-btn-active-color: rgb(255, 255, 255);
    --dxbl-btn-active-border-color: #ffffff00;
    --dxbl-btn-hover-bg: #B02A37;
    --dxbl-btn-hover-color: rgb(255, 255, 255);
    --dxbl-btn-hover-border-color: #ffffff00;
    --dxbl-btn-disabled-bg: #F1AEB5;
    --dxbl-btn-disabled-color: rgb(255, 255, 255);
    --dxbl-btn-disabled-border-color: #ffffff00;
    --dxbl-btn-focus-outline-size: 0.125rem;
    --dxbl-btn-focus-outline-offset: 0.063rem;
    --dxbl-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --dxbl-btn-focus-bg: #DC3545;
    --dxbl-btn-focus-color: rgb(255, 255, 255);
    --dxbl-btn-focus-border-bg: #ffffff00;
    --dxbl-btn-focus-outline-color: #6F42C1;
}

.dxbl-grid-command-cell .dxbl-btn.dxbl-btn-danger {
    --dxbl-btn-color: #ffffff;
}


/* grid */

.grid-container {
    background-color: var(--gridBg);
}

.dxbl-grid-command-cell .dxbl-btn {
    --dxbl-btn-color: var(--gridColor);
}


.dxbl-grid {
    --dxbl-grid-header-font-weight: 500;
    --dxbl-grid-bg: transparent;
    --dxbl-grid-color: var(--gridColor);
    --dxbl-grid-border-color: var(--gridBorderColor);
    --dxbl-grid-header-color: var(--gridHeaderColor);
    --dxbl-grid-focus-color: var(--gridFocusColor);
    --dxbl-grid-focus-bg: var(--gridFocusBg) !important;
}

.dxbl-grid a {
    color: var(--gridLinkColor) !important;
}

/* card */
.ui-cmp-card .card {
    background-color: var(--cardBgColor) !important;
}

.ui-cmp-card .card:hover {
    background-color: var(--cardBgColorHover) !important;
}

.ui-cmp-card.selected .card {
    background-color: var(--cardBgColorSelected) !important;
}

.ui-cmp-card.selected .card:hover {
    background-color: var(--cardBgColorSelectedHover) !important;
}

.ui-cmp-card.selected .card.focused {
    background-color: var(--cardBgColorSelectedHover) !important;
}


.ui-cmp-card .card .card-body {
    flex: 1 1 auto;
    padding: 4px;
    color: var(--cardTextColor);
}

.ui-cmp-card .card .card-footer {
    padding: 4px;
}

.ui-cmp-card .card .card-body-contain img {
    filter: var(--cardImgFilter);
}

.ui-cmp-card .card .card-body .card-title {
    color: var(--cardTitleColor);
    margin: 5px;
}

.ui-cmp-card .card .card-footer .btn.btn-delete {
    color: var(--cardTextColor);
}

.ui-cmp-card .card-value {
    color: var(--primaryTextColor);
    font-weight: 400;
}


/* card-accent */
.ui-cmp-card .card.card-accent {
    background-color: var(--cardBgColorAccent) !important;
}

.ui-cmp-card .card.card-accent .card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--cardTextColorAccent);
}

.ui-cmp-card .card.card-accent .card-body-contain img {
    filter: var(--cardImgFilterAccent);
}

.ui-cmp-card .card.card-accent .card-body-contain i {
    color: var(--cardTitleColorAccent);
}

.ui-cmp-card .card.card-accent .card-body .card-title {
    color: var(--cardTitleColorAccent);
    margin-bottom: 8px !important;
}

.ui-cmp-card .card.card-accent .card-title {
    font-size: 20px;
}


/* doccument */

#doc-toolbar {
    border-bottom: 1px solid var(--docBorderColor);
}

#doc-page .jumbotron .title {
    color: var(--docPrimaryTextColor) !important;
}

#doc-page .jumbotron .description {
    color: var(--docTextColor) !important;
}

#doc-page .jumbotron .description:after {
    border-bottom: 5px solid var(--docPrimaryTextColor) !important;
}

#doc-page .breadcrumb-item a {
    color: var(--docPrimaryTextColor);
}

#doc-page .breadcrumb-item + .breadcrumb-item::before {
    color: var(--docTextColor);
}

#doc-page .breadcrumb-item.active {
    color: var(--docTextColor);
}

#doc-page .form-check-label {
    color: var(--docTextColor);
}

#doc-content .doc-page-content {
    background-color: var(--docBgColor);
    color: var(--docTextColor);
}

#doc-content .card {
    --bs-card-title-color: var(--docCardTitleColor);
    --bs-card-subtitle-color: var(--docTextColor);
    --bs-card-border-color: var(--docCardBorderColor);
    --bs-card-color: var(--docTextColor);
    --bs-card-bg: var(--docCardBgColor);
}

#doc-content .card .card-footer .voir-plus a {
    color: var(--docPrimaryTextColor) !important;
}

#doc-content .card .card-footer .voir-plus i {
    color: var(--docPrimaryTextColor) !important;
}

#doc-content a {
    color: var(--docPrimaryTextColor) !important;
}

#doc-content .card:hover {
    background-color: var(--docCardBgColorHover) !important;
}

#doc-content .selected .card {
    background-color: var(--cardBgColorSelected) !important;
}

#doc-content .selected .card:hover {
    background-color: var(--docCardBgColorSelected) !important;
}

#doc-content .selected .card.focused {
    background-color: var(--docCardBgColorSelected) !important;
}

#doc-content .card .card-header .title {
    color: var(--docCardTitleColor) !important;
}

#doc-content .card .card-header .description {
    color: var(--docTextColor) !important;
}

#doc-content .card .card-header i {
    color: var(--docTextColor) !important;
}

#doc-drawer {
    background-color: var(--docBgColor) !important;
    border-right: 1px solid var(--docBorderColor);
}

#doc-drawer .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active {
    background-color: var(--docLeftMenuFocusedBdColor) !important;
    color: var(--docLeftMenuFocusedColor) !important;
}

#doc-drawer .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(.dxbl-active) {
    color: var(--docTextColor) !important;
}

#doc-drawer .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn > svg.dxbl-image {
    color: var(--docTextColor) !important;
}

#doc-drawer .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active::before {
    background-color: transparent !important;
}

#doc-content footer {
    background-color: var(--docBgColor) !important;
    color: var(--docTextColor);
    border-top: 1px solid var(--docBorderColor);
}


/* information */


#page-info .jumbotron .title {
    color: var(--docPrimaryTextColor) !important;
}

#page-info .jumbotron .lead {
    color: var(--docTextColor) !important;
}

#page-info .jumbotron .lead:after {
    border-bottom: 5px solid var(--docPrimaryTextColor) !important;
}

#page-info .item-info-content {
    background-color: var(--docBgColor);
    color: var(--docTextColor);
}

#page-info .jumbotron {
    border-bottom: 1px solid var(--docBorderColor) !important;
}

#page-info .card {
    --bs-card-title-color: var(--docCardTitleColor);
    --bs-card-subtitle-color: var(--docTextColor);
    --bs-card-border-color: var(--docCardBorderColor);
    --bs-card-color: var(--docTextColor);
    --bs-card-bg: var(--docCardBgColor);
}


#page-info .card .card-footer .voir-plus a {
    color: var(--docPrimaryTextColor) !important;
}

#page-info .card .card-footer .voir-plus i {
    color: var(--docPrimaryTextColor) !important;
}

#page-info a {
    color: var(--docPrimaryTextColor) !important;
}

#page-info .card:hover {
    background-color: var(--docCardBgColorHover) !important;
}

#page-info .selected .card {
    background-color: var(--cardBgColorSelected) !important;
}

#page-info .selected .card:hover {
    background-color: var(--docCardBgColorSelected) !important;
}

#page-info .selected .card.focused {
    background-color: var(--docCardBgColorSelected) !important;
}

#page-info .card .card-header .title {
    color: var(--docCardTitleColor) !important;
}

#page-info .card .card-header .description {
    color: var(--docTextColor) !important;
}

#page-info .card .card-header i {
    color: var(--docCardTitleColor) !important;
}


/* check */
.form-check-input:checked {
    background-color: var(--primaryBgColor) !important;
    border-color: var(--primaryBgColor) !important;
}

/* filter panel */
.filter-panel {
    background-color: var(--filterPanelBgColor) !important;
    border-right: var(--filterPanelBorderRight) !important;
    color: var(--filterPanelGrpHeaderTextColor);
}

.page-filter {
    background-color: transparent;
    border: 0px solid transparent;
}

.page-filter .grp {
    background-color: transparent;
    border: 0px solid transparent;
}

.page-filter .grp .dxbl-group {
    background-color: var(--filterPanelGrpBgColor);
    border: 1px solid var(--filterPanelGrpBorderColor);
    color: var(--filterPanelGrpHeaderTextColor);
}

.page-filter .grp .dxbl-group .dxbl-group-body {
    color: var(--filterPanelGrpHeaderTextColor);
}

.page-filter .grp .dxbl-group .dxbl-group-header {
    background-color: var(--filterPanelGrpHeaderBgColor);
    color: var(--filterPanelGrpHeaderTextColor);
}

.page-filter .grp .dxbl-group .dxbl-group-header img {
    filter: var(--filterPanelGrpHeaderImgFilter);
    color: var(--filterPanelGrpHeaderTextColor);
}

.page-filter .grp .dxbl-group .dxbl-group-header:before {
    background-color: transparent;
}

.filter-panel .collapse-filter-panel i {
    color: var(--imgColor) !important;
}


/* filter-panel-collapsed */
.main-content.side-bar-visible .filter-panel-collapsed {
    background-color: transparent !important;
}

.main-content.side-bar-not-visible .filter-panel-collapsed {
    background-color: var(--filterPanelCollapsedBgColor) !important;
}

.main-content.side-bar-not-visible .filter-panel-collapsed i {
    color: var(--filterPanelCollapsedTextColor) !important;
}

.filter-panel-collapsed i {
    color: var(--imgColor) !important;
}

/* grid */
.dxbl-grid-focused-row a {
    color: white;
}

.dxbl-grid > .dxbl-grid-toolbar-panel, .dxbl-grid > .dxbl-grid-top-panel {
    background-color: #f4f4f4;
}


/* indicator */
.dxbl-wait-indicator {
    --dxbl-wait-indicator-color: #e0e0e0;
}

.dxbl-wait-indicator.dxbl-wait-indicator-spin > svg > g > g {
    stroke: var(--primaryTextColor);
}


/* main-layout */
.main-layout {
    background-color: var(--mainContainerBgColor) !important;
}

/* modal */
.modal {
    --bs-modal-bg: var(--modalBgColor);
    --bs-modal-border-color: var(--modalBorderColor);
    --bs-modal-border-radius: var(--modalBorderRadius);
    --bs-modal-box-shadow: var(--modalBoxShadow);
    --bs-modal-header-border-color: var(--modalHeaderBorderColor);
    --bs-modal-footer-border-color: var(--modalFooterBorderColor);
}

.dxbl-modal {
    --dxbl-popup-bg: var(--modalBgColor);
    --dxbl-popup-border-color: var(--modalBorderColor);
    --dxbl-popup-border-radius: var(--modalBorderRadius);
    --dxbl-popup-box-shadow: var(--modalBoxShadow);
    --dxbl-popup-header-border-color: var(--modalHeaderBorderColor);
    --dxbl-popup-footer-border-color: var(--modalFooterBorderColor);
}

.modal-dialog .modal-header {
    padding: var(--bs-modal-header-padding);
    background-color: var(--modalHeaderBgColor);
    border-top-left-radius: var(--modalBorderRadius);
    border-top-right-radius: var(--modalBorderRadius);
    font-size: 14px !important;
    padding: 7px !important;
}


.dxbl-sc-hint {
    --dxbl-scheduler-flyout-border-radius: var(--modalBorderRadius);
}

.dxbl-flyout {
    --dxbl-flyout-border-radius: var(--modalBorderRadius);
}

.modal-dialog .badge.badge-primary {
    background-color: var(--primaryBgColor);
    color: white;
}

.modal-dialog {
    scrollbar-color: #b6b6b6 #f5f5f5ee;
}

.modal-dialog .badge.badge-primary {
    background-color: var(--primaryBgColor);
}


/* navbar-nav */
#navbar-container .navbar-nav .nav-link {
    color: var(--navLinkColor) !important;
}

#navbar-container .navbar-nav .nav-link:hover {
    color: var(--navLinkColorHover) !important;
}

#navbar-container .navbar-nav .nav-link.active,
#navbar-container .navbar-nav .nav-link.show {
    color: var(--navLinkColorActive) !important;
}


/* navbar-container */
#navbar-container {
    background-color: var(--navBarColor) !important;
}

#navbar-container .btn-primary {
    --bs-btn-bg: var(--navBarBtnPrimaryBgColor) !important;
    --bs-btn-border-color: var(--navBarBtnPrimaryBgColor) !important;
    --bs-btn-hover-bg: var(--navBarBtnPrimaryHoverBgColor) !important;
    --bs-btn-hover-border-color: var(--navBarBtnPrimaryHoverBgColor) !important;
    --bs-btn-active-bg: var(--navBarBtnPrimaryBgColor) !important;
    --bs-btn-active-border-color: var(--navBarBtnPrimaryBgColor) !important;
    --bs-btn-disabled-bg: var(--navBarBtnPrimaryBgColor) !important;
    --bs-btn-disabled-border-color: var(--navBarBtnPrimaryBgColor) !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-color: white !important;
    --bs-btn-disabled-color: white !important;
}


/* nav-tabs */

.dxbl-tabs {
    --dxbl-tabs-separator-border-color: var(--navTabBorderColor);
}

.dxbl-tabs > .dxbl-tabs-tablist {
    color: var(--navTabTextColor);
}

.nav-tabs .nav-item .nav-link.active {
    color: var(--navTabTextColorActive);
}

.tabs-container .nav-tabs .nav-item {
    margin-top: 3px;
}

.tabs-container .nav-tabs {
    --bs-nav-tabs-border-color: var(--navTabBorderColor) !important;
}

.tabs-container .nav-tabs .nav-item .nav-link {
    color: var(--navTabTextColor) !important;
    border-bottom: 1px solid var(--navTabBorderColor) !important;
    height: 38px;
}

.tabs-container .nav-tabs .nav-item .nav-link.active {
    color: var(--navTabTextColorActive);
    background-color: transparent !important;
    border-right: 1px solid var(--navTabBorderColor) !important;
    border-left: 1px solid var(--navTabBorderColor) !important;
    border-top: 1px solid var(--navTabBorderColor) !important;
    border-bottom: 1px solid var(--mainContainerBgColor) !important;
}


.tabs-container .nav-link:hover {
    background-color: #ffffff05 !important;
}

.dxbl-tabs > .dxbl-tabs-tablist {
    background-color: transparent;
}


/* kanban */
.kanban-column {
    border: 1px solid var(--kanbanBorderColor) !important;
    background-color: var(--kanbanBgColor) !important;
}

/*
.kanban-column .kanban-card .card {
    border: 1px solid var(--kanbanCardBorderColor) !important;
    background-color: var(--kanbanCardBgColor) !important;
}

.kanban-column .kanban-card.selected .card {
    border: 1px solid var(--kanbanCardFocusedBorderColor) !important;
    background-color: var(--kanbanCardFocusedBgColor) !important;
}

.kanban-column .kanban-card.selected .card:hover {
    border: 1px solid var(--kanbanCardFocusedBorderColor) !important;
    background-color: var(--kanbanCardFocusedBgColor) !important;
}

.kanban-column .kanban-card.selected .card.focused {
    border: 1px solid var(--kanbanCardFocusedBorderColor) !important;
    background-color: var(--kanbanCardFocusedBgColor) !important;
}

.kanban-column .kanban-card .card .card-body-contain .card-title {
    color: var(--kanbanCardHeaderTextColor) !important;
}

.kanban-column .kanban-card .card .card-body-contain .card-desc {
    color: var(--kanbanCardTextColor) !important;
}
*/

/* rounded-pill */
.badge.rounded-pill.bg-primary {
    background-color: var(--roundedBadgePrimary) !important;
}

/* scheduler */

.dxbl-scheduler {
    --dxbl-scheduler-background-color: var(--gridBg);
}

.dxbl-scheduler {
    background-color: var(--gridBg) !important;
}




/*
.dxbl-scheduler-color {
    --dxbl-scheduler-light-color: #292929ed;
}

.dxbl-scheduler {
    --dxbl-scheduler-border-color: #515151;
    --dxbl-scheduler-background-color: #313131 !important;
    background-color: #ffffffbf !important;
    color: #bfbfbf;
    border: 0px solid transparent;
}

.dxbl-scheduler .dxbl-sc-dayview .dxbl-sc-headers-scroll-area .dxbl-sc-headers-container .dxbl-sc-table.dxbl-sc-horizontal-view {
    border-top: 0px solid transparent;
}

.dxbl-scheduler .dxbl-sc-tb-wrapper {
    background-color: #313131;
}
*/


/* sidebar-container */
.main-layout .main-content .sidebar-container {
    background-color: var(--sideBarBgColor) !important;
}

.main-layout .main-content .sidebar-container .nav-link {
    color: var(--sideBarTextColor) !important;
    margin: 4px;
    border-radius: 2px;
}

.main-layout .main-content .sidebar-container .nav-link.active {
    color: var(--sideBarTextActiveColor) !important;
    background-color: #ffffff7d !important;
}

.sidebar-compact {
    background-color: var(--sideBarCollapsedColor) !important;
}

.main-layout .main-content .sidebar-container .dxbl-treeview-tmpl {
    color: var(--sideBarTextColor);
}

.main-layout .main-content .sidebar-container .dxbl-treeview-tmpl.dxbl-active {
    background-color: var(--sideBarBgColorActive) !important;
    color: var(--sideBarTextActiveColor);
}

.main-layout .main-content .sidebar-container .dxbl-treeview-tmpl:hover {
    background-color: var(--mainContainerBgColor) !important;
}

.main-layout .main-content .sidebar-container .dxbl-treeview-tmpl.dxbl-active i {
    color: var(--sideBarTextActiveColor) !important;
}

.sidebar.sidebar-container i {
    color: var(--imgColor) !important;
}


/* spinner */
.loading-indicator-panel .spinner-border.text-primary {
    color: var(--primaryBgColor) !important;
}

.loading-indicator-panel .spinner-border {
    --bs-spinner-width: 2.4rem;
    --bs-spinner-height: 2.4rem;
    --bs-spinner-border-width: 0.40em;
}

/* splitter-preview-panel */
.splitter-preview-panel {
    background-color: var(--splitterPreviewPanel) !important;
}


/* view-navbar */
.view-navbar .navbar-nav img {
    filter: var(--imgFilter);
}

.dshbrd-item .card.dshbrd-item-card {
    border: 1px solid var(--dshbrdBorderColor) !important;
    background-color: var(--dshbrdCardBgColor) !important;
    color: var(--dshbrdTextColor) !important;
}

.dshbrd-item .card.dshbrd-item-card .card-header {
    border-bottom: 1px solid var(--dshbrdBorderColor) !important;
}

.dshbrd-item .card.dshbrd-item-card .dxc-chart text {
    fill: var(--dshbrdChartTextColor) !important;
}

.dx-chart-legend-text {
    color: var(--dshbrdTextColor) !important;
}

.dx-chart .dxc-arg-elements text {
    fill: var(--dshbrdChartTextColor) !important;
}

.card-container,
.dshbrd-grid,
.filter-panel,
.kanban-container,
.kanban-column-content,
.main-layout .main-content .sidebar-container,
.dxbl-tabs-content {
    scrollbar-color: var(--scrollbarThumb) var(--scrollbarTrack) !important;
}

/* theme devexpress berry */
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before, 
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before {
    background-color: var(--primaryBgColor);
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
    background-color: var(--textColorAccent);
}

.dxbl-tabs {
    --dxbl-tabs-tab-selected-color: var(--textColorAccent);
    --dxbl-tabs-tab-focus-outline-color: var(--textColorAccent);
}

.form-control:focus {
    border-color: #9bbcfb;
    box-shadow: 0 0 0 0.2rem rgb(10 54 190 / 8%);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgb(10 54 190 / 16%);
}

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--primaryBgColor);
    --dxbl-checkbox-switch-checked-bg: var(--primaryBgColor);
    --dxbl-checkbox-radio-checked-border-color: var(--primaryBgColor);
    --dxbl-checkbox-radio-check-bg: var(--primaryBgColor);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-switch-checked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-radio-checked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-radio-checked-hover-border-color: var(--primaryBgColorHover);
    --dxbl-checkbox-checked-focus-shadow-color: rgba(10, 54, 190, 0.1);
    --dxbl-checkbox-unchecked-focus-shadow-color: rgba(10, 54, 190, 0.1);
    --dxbl-checkbox-switch-element-bg: #fff;
    --dxbl-checkbox-switch-element-unchecked-bg: #fff;
}

.dxbl-checkbox.valid.modified:not([type=checkbox]) {
    --dxbl-checkbox-check-element-checked-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-switch-checked-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-checked-focus-shadow-color: rgba(10, 54, 190, 0.1);
    --dxbl-checkbox-unchecked-focus-shadow-color: rgba(10, 54, 190, 0.1);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-switch-checked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-radio-checked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-check-element-unchecked-border-color: var(--primaryBgColorHover);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--primaryBgColorHover);
    --dxbl-checkbox-switch-unchecked-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--primaryBgColorHover);
    --dxbl-checkbox-radio-unchecked-hover-border-color: var(--primaryBgColorHover);
}

.dxbl-text-edit {
    --dxbl-text-edit-focus-shadow-color: rgb(10, 54, 190 / 16%);
    --dxbl-text-edit-focus-border-color: var(--textEditFocusedBorderColor);
    --dxbl-text-edit-readonly-bg: var(--textEditBgColor);
}

.dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before,
.dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before {
    background-color: var(--primaryBgColor);
}

.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]).dxbl-list-box-item-focused, 
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]):focus, 
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]).dxbl-list-box-item-focused, 
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]):focus {
    outline: .15rem solid #ffffff00;
}