.dx-button{
    border-radius: .5em !important;
    padding: .25em .5em !important;
    font-size: 1em !important;
}

.dx-button-text {
    color: var(--dark);
}

.primaryBtn .dx-button-text, .dangerBtn .dx-button-text, .forcePrimaryBtn .dx-button-text {
    color: white;
}

.primaryBtn.dx-button-mode-contained {
    background-color: var(--primary);
    color: var(--light) !important;
    font-weight: 600 !important;
}

.primaryBtn.dx-button-mode-contained.dx-state-hover {
    background-color: var(--primary-light);
}

.primaryBtn i.dx-icon {
    color: white !important;
}

.dx-field-button-item:has(.buttonContentLeft) {
    text-align: left !important;
}

.forcePrimaryBtn.dx-button-mode-contained {
    background-color: var(--primary) !important;
    color: white !important;
    font-weight: 600 !important;
}

.forcePrimaryBtn.dx-button-mode-contained.dx-state-hover {
    background-color: var(--primary-light);
}

.forcePrimaryBtn i.dx-icon {
    color: white !important;
}

.dangerBtn {
    background: var(--danger) !important;
    color: white !important;
    font-weight: 600 !important;
}

.dangerBtn:active i {
    color: var(--danger) !important;
}

.dangerBtn:active {
    background: var(--light) !important;
    color: white !important;
    border: 1px solid var(--danger);
}

.dangerBtn:active .dx-button-text {
    color: var(--danger) !important;
}

/* ------------------------------------------------- */

.dx-context-menu-container-border {
    box-shadow: none !important;
    border: none !important;
    background-color: rgba(0, 0, 0, .04) !important;
}

.dx-context-menu .dx-submenu{
    background-color: var(--alt-light) !important;
}

.dx-context-menu-content-delimiter::before{
    background-color: var(--alt-light) !important;
}

/* ------------------------------------------------- */
.dx-popup-normal:has(.broadcastPopup) .dx-popup-title {
    background-color: var(--danger) !important;
    color: var(--light) !important;
}

.dx-popup-normal .dx-toolbar-items-container {
    display: flex !important;
    align-items: center !important;
    color: white;
}

.dx-datagrid-column-chooser .dx-popup-normal .dx-toolbar-items-container{
    color: unset;
}

.dx-popup-normal .dx-toolbar-after, .dx-popup-normal .dx-toolbar-before, .dx-popup-normal .dx-toolbar-center {
    top: unset !important;
}

/* ------------------------------------------------- */

.dx-menu-base .dx-menu-item-content {
    padding: 0 !important;
}

ul.dx-menu-items-container.dx-menu-no-icons {
    padding: 0 !important
}

.dx-submenu {
    margin: 0 !important;
    border: none !important;
}

.dx-overlay-content.dx-inner-overlay.dx-context-menu.dx-menu-base {
    /* height: fit-content !important; changed 15.4.2025 because of submenu clipping */
}

/* ------------------------------------------------- */

.dx-gridbase-a11y-status-container {
    display: none;
}

/* ------------------------------------------------- */

ul.dx-menu-items-container li .dx-item-content {
    padding: .5em 1em !important;
}

/* ------------------------------------------------- */

.dx-loadpanel-content {
    background: var(--primary) !important;
    color: white !important;
    border: 1px solid var(--primary) !important;
    border-radius: .5em !important;
    height: 8em !important;
}

.dx-loadindicator-icon .dx-loadindicator-segment{
    background: var(--light) !important;
}

/* ------------------------------------------------- */

.dx-overlay-content, .dx-selectbox-popup-wrapper {
    z-index: 100000 !important;
}

/* ------------------------------------------------- */
tr>td.dx-command-select {
    min-width: 25px !important;
    max-width: 25px !important;
    width: 25px !important;
}

.dx-popup-normal .dx-toolbar-items-container{
    color: var(--dark);
}

tbody tr td.dx-command-select.dx-editor-cell.dx-editor-inline-block:has(.dx-checkbox) {
    text-align: center !important;
}

.dx-toolbar-label {
    max-width: unset !important;
}

.dx-tabpanel-container .dx-multiview-item-content.dx-item-content {
    padding: 1em;
}

/* ------------------------------------------------- */

.dx-form-group-with-caption.dx-form-group {
    background-color: var(--alt-light);
    border-radius: .5em;
    padding: .25em .75em;
}

.dx-form-group-caption {
    display: block;
    width: 100%;
    padding: .25em 0;
}

/* ------------------------------------------------- */

td.centerColumn[role="gridcell"] {
    text-align: center !important;
}

.grid.alignLeft tr.dx-column-lines:not(.dx-header-row) td.centerColumn[role="gridcell"] {
    text-align: center !important;
}

/* ------------------------------------------------- */

.dx-overlay-wrapper.dx-popup-wrapper.dx-dropdowneditor-overlay.dx-dropdownlist-popup-wrapper.dx-selectbox-popup-wrapper .dx-overlay-content { /* list dropdown menu auto width */
    width: auto !important;
}

.dx-overlay-wrapper.dx-popup-wrapper.dx-dropdowneditor-overlay.dx-dropdownlist-popup-wrapper.dx-selectbox-popup-wrapper .dx-list-item { /* list dropdown menu auto width */
    display: block;
}

/* ------------------------------------------------- */
@media only screen and (max-width: 720px) {
    .dx-overlay-wrapper:has(.dx-datebox-datetime-time-side) { /* make date time popup fullscreen */
        transform: translate(0, 0) !important;
    }

    .dx-overlay-content:has(.dx-datebox-datetime-time-side) { /* make date time popup fullscreen */
        transform: translate(calc((100dvw - 100%) / 2), calc((100dvh - 100%) / 2)) !important;
    }

    .dx-overlay-content:has(.dx-datebox-datetime-time-side)>div>.dx-widget.dx-collection { /* make date time popup fullscreen */
        flex-direction: column !important;
    }

    .dx-overlay-content:has(.dx-datebox-datetime-time-side) .dx-item-content>div:has(.dx-calendar.dx-calendar-view-month) { /* make date time popup fullscreen */
        display: flex;
        justify-content: center;
    }
}

/* ------------------------------------------------- */

.dx-menu .dx-menu-item-expanded {
    background-color: rgba(0, 0, 0, .04) !important;
}

div.dx-button-mode-contained.dx-state-focused.primaryBtn {
    background-color: var(--primary);
    color: var(--light) !important;
}

div.dx-button-mode-contained.dx-state-focused {
    background-color: unset;
    color: var(--light) !important;
}

div.dx-button-mode-contained.dx-state-active {
    background-color: #c2c2c2 !important;
    color: var(--light) !important;
}