/* SP OVERWIRTE*/

/*****************************Button Sets*********************************/
/*dxbl-menu-item .dxbl-btn {
    background-color: var(--w-color-light);
    height: auto;
    font-weight: 400;
}*/


    .dxbl-btn img {
        margin-right: 3px;
    }

/* secondary button bg, usually dropdown button of textbox */
/*.dxbl-btn-outline-secondary {
    background-color: var(--w-color-light) !important;
}*/


/*quit button in popup*/
.float-right {
    float: right;
}

/*****************************Button Sets*********************************/


::deep .dx-menu-item-text {
    font-size: 12px !important;
}

/* form group header */
.dxbl-group > .dxbl-group-header > .dxbl-text {
    margin: 5px;
}

/*grid cell padding*/
.dxbl-grid tr {
    --dxbl-grid-text-cell-padding-y: 0px;
    --dxbl-grid-text-cell-padding-x: 0px;
}

/*when empty, combox's input bg color should be white*/
dxbl-combobox.dxbl-text-edit.dxbl-readonly::before {
    background-color: var(--w-color-light) !important;
}

/*popup modal radius*/
.dxbl-modal {
    --dxbl-popup-border-radius: 0px !important
}


/*font*/
@font-face {
    font-family: "Aktiv Grotesk", "Arial" !important;
    src: url('../fonts/AktivGrotesk-Regular.ttf') format('truetype');
}

/*override font*/
:root {
    font-size: 15px;
    --bs-font-sans-serif: "Aktiv Grotesk", "Arial", "OpenSans" !important;
}

/*combobox customized styles*/
.combox-box-dropdown-button {
    border: 0px !important;
}

.combox-box-dropdpwn-button-icon:before {
    content: url("../_content/WAGO.SolutionsPlatform.UILibrary/wago-icons-svg/btn-chevron-down.svg" );
}

.full-height {
    height: 100%;
}

/*fake multiselect combobox. Because DevExpress doesn't have this, it's consisted by DxTextBox, DxListBox and DxDropDown*/
.combobox-multiselect-menu {
    height: auto !important;
    overflow: hidden !important;
    border: 0px !important;
}

    .combobox-multiselect-menu li {
        padding: 12px !important;
        border-bottom: solid 1px var(--color-secondary) !important;
    }

         .combobox-multiselect-menu li:hover {
            background-color: var(--color-primary) !important;
        }

/* custom popup scrollbar */

.dxbl-popup .dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar > .dxbl-scroll-viewer-scroll-thumb {
    background-color: var(--w-color-primary);
    width: 8px !important;
}

.dxbl-popup .dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar {
    background-color: var(--w-color-neutral-7);
}

.dxbl-popup ::-webkit-scrollbar-track {
    background-color: var(--w-color-neutral-7);
}

.dxbl-popup ::-webkit-scrollbar {
    width: 8px;
    background-color: var(--w-color-neutral-7);
    margin-left: 5px;
}

.dxbl-popup ::-webkit-scrollbar-thumb {
    background-color: var(--w-color-primary);
}

/* sort menu */

/*DevExpress 23.1 the MenuItem are popups and not in the scope of component they belongs to.*/
.sort-menu-icon-selected {
    filter: invert(100%) sepia(8%) saturate(187%) hue-rotate(246deg) brightness(118%) contrast(100%);
}

.sort-menu-item-selected .dxbl-menu-item .dxbl-btn {
    background-color: var(--w-color-neutral-70);
    color: var(--w-color-light);
}

/* custom DxGrid pager */
.dxbl-grid{
    background-color: var(--w-color-neutral-7) !important;
}

.dxbl-pager-container {
    align-self: center;
}

    .dxbl-pager-container .dxbl-pager{
        gap: 10px;
    }

    .dxbl-pager-container button {
        width: 48px;
        background-color: var(--w-color-neutral-7) !important;
        border-width: 1px!important;
    }

        .dxbl-pager-container button:not(.dxbl-pager-page-btn):not(.dxbl-disabled) {
            border-color: var(--w-color-anthracite)
        }

            .dxbl-pager-container button:not(.dxbl-pager-page-btn):not(.dxbl-disabled):hover {
                border-width: 1px 2px 2px 1px !important;
                border-color: var(--w-color-anthracite)
            }
            .dxbl-pager-container button:not(.dxbl-pager-page-btn):not(.dxbl-disabled):active {
                border-width: 2px 1px 1px 2px !important;
                border-color: var(--w-color-anthracite)
            }

            .dxbl-pager-container button:not(.dxbl-pager-page-btn):not(.dxbl-disabled) .dxbl-image {
                filter: brightness(0) saturate(100%) invert(12%) sepia(14%) saturate(1539%) hue-rotate(178deg) brightness(94%) contrast(91%);
                opacity: 100% !important;
            }

    .dxbl-pager-container .dxbl-pager-page-btn{
        border: 0px;
        color: var(--w-color-neutral-70)
    }

    .dxbl-pager-container .dxbl-pager-page-btn:hover {
        border: 2px var(--w-color-primary) solid !important;
    }


    .dxbl-pager-container .dxbl-pager .dxbl-pager-active-page-btn {
        background-color: var(--w-color-primary) !important;
        color: var(--w-color-anthracite) !important;
    }

    .dxbl-pager-container .dxbl-pager .dxbl-disabled .dxbl-image {
        filter: brightness(0) saturate(100%) invert(96%) sepia(5%) saturate(271%) hue-rotate(172deg) brightness(84%) contrast(103%);
    }