:root {
    --primary-color: #6BA43A;
    --secondary-color: #E6F2DB;
    --popup-bg: #E6F2DBCF;
    --bg-color: #BBC630;
    --text-color: #222E3A;
    --white: #fff;
    --btn-hover: #498417;
    --bg-secondary: BAD235;
}
label.controlabel{
    color: var(--text-color);
}
label {
    margin-bottom: 5px;
    color: var(--text-color) !important;
}


.e-btn.e-info:focus, .e-css.e-btn.e-info:focus {
    box-shadow: 0 0 0 4px rgb(107 164 58 / 50%) !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn:focus, .btn:active:focus, .btn.active:focus{
    outline: none !important;
}
.e-input-focus {
    box-shadow: 0 0 0 4px rgba(107, 164, 58, .25) !important;
    border-color: var(--primary-color) !important;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #6ba43a9e !important;
    box-shadow: 0 0 0 4px rgba(107, 164, 58, .25) !important;
}
.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: var(--primary-color) !important;
    color: var(--white) !important;
}

.e-grid.e-gridhover .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--secondary-color) !important;
}
.e-pager .e-currentitem {
    border: 3px solid var(--bg-color) !important;
}
.e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day{
    background: var(--primary-color) !important;
}
.e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 2px 0 var(--primary-color), inset 0 2px var(--primary-color), inset -2px 0 var(--primary-color), inset 0 -2px var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus {
    box-shadow: 0 0 0 4px rgba(107, 164, 58, .25) !important;
}
.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: none !important;
}
.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active {
    background-color: var(--bg-color) !important;
    border-color: var(--bg-color) !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: var(--bg-color) !important;
    border-color: var(--bg-color) !important;
}
.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on {
    background-color: var(--bg-color) !important;
}
.e-switch-wrapper.e-active .e-switch-inner, .e-switch-wrapper:active .e-switch-inner, .e-css.e-switch-wrapper.e-active .e-switch-inner, .e-css.e-switch-wrapper:active .e-switch-inner {
    box-shadow: 0 0 0 4px rgba(107, 164, 58, .25) !important;
}
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
    box-shadow: 0 0 0 4px rgba(107, 164, 58, .25) !important;
}
.e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-checkbox-wrapper .e-checkbox:active + .e-frame, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(107, 164, 58, .25) !important;
}
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text, .e-schedule .e-schedule-toolbar .e-active-view .e-icons{
    color: var(--primary-color) !important;
}
.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
    color: #fff !important;
}
.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
    color: #fff !important;
}

.dx-loadindicator-icon .dx-loadindicator-segment {
    background: var(--primary-color) !important;
}
.e-contextmenu-wrapper ul .e-disabled .e-menu-icon, .e-contextmenu-container ul .e-disabled .e-menu-icon {
    color: #fff !important;
}

.e-contextmenu-wrapper ul .e-disabled, .e-contextmenu-container ul .e-disabled.e-menu-item {
    opacity: 1 !important;
    background: #ddd !important;
}