.dx-dropdowneditor-icon::before {
    color: var(--prim-color) !important;
    font-family: 'Material Symbols Outlined'; /* your material icon font */
    font-size: 20px;
}

.dx-selectbox .dx-dropdowneditor-icon::before {
    content: "arrow_drop_down" !important;
}

.dx-datebox .dx-dropdowneditor-icon::before {
    content: "event" !important;
}

.dx-switch-container {
    color: var(--prim-color) !important;
    width: 50px !important;
}

.dx-tag-content {
    background-color: var(--prim-color) !important;
    color: var(--white-color) !important;
    border-radius: 10px !important;
}

.dx-tag-remove-button::after {
    color: var(--white-color) !important;
    background-color: var(--white-color) !important;
    margin-top: -1px !important;
}

.dx-tag-remove-button::before {
    color: var(--white-color) !important;
    background-color: var(--white-color) !important;
}

.dx-list-select-all-label {
    color: var(--prim-color) !important;
}

.dx-scheduler-cell-sizes-vertical {
    height: 30px !important; /* Adjust as needed */
}

.dx-numberbox {
    border-radius: 10px !important;
    border-color: var(--prim-color) !important;
    height: 38px !important;
    max-height: 50px !important;
    padding: 0px 5px 0 22px !important;
    font-family: "Poppins", sans-serif !important;
}

.dx-timeview-field .dx-numberbox {
    padding: 0px 5px !important;
}

.dx-numberbox .dx-texteditor-input-container .dx-texteditor-input {
    padding: 0px 0px 0px 0px !important;
}

.dx-numberbox-spin-up-icon::before, .dx-numberbox-spin-down-icon::before {
    color: var(--prim-color) !important; /* Change the color of the spin buttons */
}

.dx-icon-clear::before {
    color: var(--prim-color) !important; /* Change the color of the clear icon */
}

.dx-switch {
    margin-left: 12px !important;
}

.dx-switch-handle::before {
    color: var(--prim-color) !important;
    background-color: var(--prim-color) !important;
}

.dx-viewport, .dx-widget {
    font-family: "Poppins", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important;
}

.dx-dropdowneditor-icon {
    background-color: transparent !important;
}

.dx-item-content.dx-list-item-content {
    color: var(--prim-color) !important;
}

.dx-placeholder {
    color: var(--prim-color) !important;
}

.dx-selectbox.dx-texteditor,
.dx-datebox.dx-texteditor {
    border-radius: 23px !important;
}

.dx-dropdowneditor {
    font-family: "Poppins", sans-serif !important;
    height: 38px; /* Match form-control height */
    padding: 0 0.375rem !important; /* Match form-control padding */
    font-size: 1rem; /* Match form-control font size */
    box-sizing: border-box; /* Include padding and border in the height */
}

    .dx-dropdowneditor.dx-state-focused,
    .dx-dropdowneditor.dx-state-active,
    .dx-dropdowneditor.dx-state-hover {
        border: 1px solid var(--prim-color); /* or any color you want */
        box-shadow: 0 0 0 1px var(--prim-color); /* optional glow */
    }

.dx-texteditor-input {
    color: var(--prim-color) !important;
    font-family: "Poppins", sans-serif !important;
}

.dx-texteditor.form-check-input {
    color: var(--prim-color) !important;
}

.bg-white .dx-selectbox.dx-dropdowneditor,
.bg-white .dx-datebox.dx-dropdowneditor {
    border-color: var(--prim-color) !important;
}

.week-date-box .dx-texteditor-input {
    margin-left: 40px;
    text-align: center !important;
    font-weight: 500 !important;
}