:root {
    --primary-color: rgb(4, 30, 60);
    --secondary-color: #b3bbc4;
    --white: #fff;
    --btn-hover: rgb(24, 104, 216);
    --primary-gradient: linear-gradient(45deg, #074091, #2f84f9);
    --primary-font-family: 'Williams';
    --secondary-font-family: 'Inter';
}

label {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px var(--secondary-color) inset !important;
}
#fileuploader-container {
    padding: 15px;
}
.e-btn, .e-css.e-btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500 !important;
    transition: .5s !important;
    text-transform: uppercase !important;
}
    .e-btn:hover, .e-css.e-btn:hover {
        color: var(--btn-hover) !important;
        border-color: var(--btn-hover) !important;
    }
.topup-next-btn:hover {
    background-color: var(--primary-color) !important;
}
.topup-label {
    color: var(--primary-color) !important;
}
.dx-widget .dx-fileuploader-input-wrapper .dx-button {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: 1px solid var(--primary-color);
    font-weight: 500 !important;
    transition: .5s;
}

    .dx-fileuploader-input-wrapper .dx-button:hover {
        background-color: transparent !important;
        color: var(--btn-hover) !important;
    }
.e-input-group.e-success, .e-input-group.e-control-wrapper.e-success, .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left) {
    border-color: #041e3c !important;
}
.e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success, .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success, .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success, .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
    box-shadow: 0 0 0 4px rgb(4 30 60 / 25%) !important;
}
.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
    color: var(--primary-color) !important;
}
.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
    color: var(--primary-color) !important;
}
.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
    color: var(--primary-color) !important;
}
.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
    color: var(--primary-color) !important;
}
.dx-popup-wrapper > .dx-overlay-content {
    border: 1px solid var(--btn-hover) !important;
}
.e-btn.e-flat, .e-css.e-btn.e-flat {
    border: none !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-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--btn-hover) !important;
}
.dx-editor-filled.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon, .dx-editor-filled.dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon {
    background-color: var(--primary-color) !important;
}
.dx-dropdowneditor-icon {
    background: rgb(4 30 60 / 60%);
    color: #fff !important;
}
.dx-editor-filled .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon, .dx-editor-filled .dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon, .dx-editor-filled.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon, .dx-editor-filled.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background-color: rgb(4 30 60 / 60%) !important;
}
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: rgb(4 30 60 / 60%) !important;
    box-shadow: 0 0 0px 4px rgb(4 30 60 / 25%) !important;
}
.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
    background: rgb(4 30 60 / 60%) !important;
    color: #ffffff !important;
}
.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon, .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
    background: rgb(4 30 60 / 60%) !important;
    color: #ffffff !important;
}
.e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #6c757d !important;
    color: #fff !important;
}
.e-footer-content .e-btn:hover.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: var(--primary-color) !important;
    color: #fff !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: 1px solid var(--btn-hover) !important;
}

.e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: transparent !important;
    color: var(--btn-hover) !important;
}
.character-count {
    margin-top: 5px;
}
.e-dlg-content {
    color: var(--primary-color) !important;
}

.dx-treeview-select-all-item .dx-checkbox-text {
    color: var(--primary-color) !important;
}

.dx-treeview-item-with-checkbox .dx-treeview-item {
    color: var(--primary-color) !important;
    opacity: .8;
}

.dx-treeview-item.dx-state-hover {
    background-color: rgba(0, 0, 0, .04);
    opacity: 1 !important;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5, .e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 {
    stroke: var(--primary-color) !important;
}

input {
    height: 46px !important;
}
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    min-width: 36px !important;
}
.e-input-group, .e-input-group.e-control-wrapper {
    border-color: var(--primary-color) !important;
}
tr.system-functionality span.rounded.mt-1.mb-1.e-input-group.e-control-container.e-control-wrapper.e-valid-input {
    border-radius: 4px !important;
    border: 1px solid var(--primary-color) !important;
}
.e-pagerdropdown input {
    height: 34px !important;
}

.e-pagerdropdown .e-input-group {
    border-radius: 4px !important
}

.dx-texteditor.dx-editor-outlined {
    width: 100%;
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
}
.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon, .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon {
    background-color: var(--primary-color) !important;
}
.dx-searchbox .dx-texteditor-input {
    padding-left: 24px !important;
}
.dx-datagrid-column-chooser-button .dx-button-content {
    padding: 12px 7px !important;
}

.dx-loadindicator-icon .dx-loadindicator-segment {
    background: var(--primary-color) !important;
}
.dx-calendar-cell.dx-calendar-selected-date span {
    background-color: var(--primary-color) !important;
}
.dx-calendar-cell.dx-calendar-today span {
    border: 2px solid var(--primary-color) !important;
}
.e-input-group.e-error, .e-input-group.e-control-wrapper.e-error, .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    border-color: #dc3545 !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: var(--secondary-color) !important;
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll, .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll{
    background: transparent !important;
}

#btnTopUpNext.dx-button-has-text .dx-button-content {
/*    padding: 0px !important;*/
    flex-direction: row-reverse;
}
input.e-control.e-checkbox.e-lib {
    height: auto !important;
}

#ReviewFormNext.dx-button-has-text .dx-button-content {
    flex-direction: row-reverse;
}

.notifyError, .notifySuccess {
    z-index: 99999999 !important;
}

.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner .e-spinner-inner {
    top: 0px !important;
}