.dx-dashboard-viewer *:focus-visible {
    outline-width: $DASHBOARD_ITEM_CONTENT_OUTLINE_WIDTH;
    outline-style: solid;
    outline-color: $accentColor;
    &.dx-texteditor-input {
        outline-width: 0px;
    }
    &.dx-dashboard-tabs-container {
        outline-style: dashed;
    }
    &.widget-viewer-cell,
    &.dx-dashboard-simple-border,
    &.dx-dashboard-group-item,
    &.dx-dashboard-date-filter-button,
    &.dx-flex-card-layout {
        outline-offset: -2px;
    }
    &.dx-dashboard-ellipsis {
        border-radius: 3px;
    }
}
.dx-dashboard-widget-container .dx-state-focused:focus-visible,
div.dx-dashboard-item-container.dx-dashboard-item-container-activated:focus-visible {
    outline-width: $DASHBOARD_ITEM_OUTLINE_WIDTH;
    outline-style: solid;
    outline-color: $accentColor;
    &.dx-dashboard-standalone-item {
        outline-offset: -2px;
    }
}
div.dx-dashboard-item-container:focus-visible {
    outline-width: $DASHBOARD_ITEM_OUTLINE_WIDTH;
    outline-style: dashed;
    outline-color: $accentColor;
}
.dx-tab-content div.dx-dashboard-item-container:focus-visible,
.dx-tab-content div.dx-dashboard-item-container.dx-dashboard-item-container-activated:focus-visible {
    outline-offset: -3px;
}
.dx-dashboard-viewer {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-color: initial;
}
.dx-dashboard-layout-container {
    height: auto;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    > .dx-scrollable-wrapper {
        > .dx-scrollable-container {
            > .dx-scrollable-scrollbar {
                z-index: $layoutScrollZIndex;
            }
        }
    }
}
@mixin dashboard-flex-parent {
    display: flex;
    align-items: center;
}
dx-dashboard-layout-group, dx-dashboard-layout-tab-container {
    .dx-layout-group {
        .dx-layout-item-container {
            padding: 0;
            &:not(.dx-layout-item-container-transparent) {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                border: none;
            }
        }
    }
}
.dx-dashboard-item-container {
    box-shadow: 0px 1px 4px $dashboard-shadow;
    background-color: $dashboard-widget-bg;
    border-radius: 2px;
    box-sizing: border-box;
    pointer-events: visiblePainted; 
    pointer-events: auto;
    @include flex-v-container;
    .dx-layout-item-loading, .dx-layout-item-empty {
        &.dx-layout-item-empty-inside-tab {
            align-items: start;
        }
        @include flex-v-container;
        align-self: center;
        padding: 10px;
        width: 100%;
        text-align: center;
        color: $dashboard-toolbar-color;
        font-size: $smallFontSize;
        white-space: initial;
    }
}
.dx-dashboard-mobile-layout {
    .dx-dashboard-standalone-item-container.dx-state-disabled {
        .dx-dashboard-item-container {
            pointer-events: none;
            &.dx-layout-item-container-transparent {
                background-color: transparent;
                box-shadow: none;
                border-radius: 0px;
            }
        }
    }
}
.dx-dashboard-fullscreen-item-base {
    position: absolute; 
    bottom: 0px;
    left:0px;
    right: 0px;
    top: 0px;
    z-index: $fullscreenItemBaseZIndex;
    background-color: $dashboard-surface-bg;
}
.dx-dashboard-hidden-element {
    display: none;
}
.dx-dashboard-tab-button {
    padding: 6px 5px;
    cursor: pointer;
    > div {
        @include dx-dashboard-icon-hovered-image(24px); 
    }
}
.dx-dashboard-tabs-container {
    display: block;
}
.dx-dashboard-tabs-content {
    position: absolute;
    top: 0;
    bottom: 0;
    &.dx-dashboard-design {
        position: absolute;
        left: 0;
        right: 0;
    }
}
.dx-dashboard-layout-tabs-container {
    @include dashboard-flex-parent;
    background-color: $dashboard-tab-inactive-bg;
    .dx-dashboard-item-container {
        background-color: $dashboard-tab-inactive-bg;
    }
}
.dx-dashboard-tab-button {
    &.dx-dashboard-toggle-menu-button:focus-visible {
        outline-offset: -2px;
    }
    border-bottom: 1px solid $dashboard-border-color;
}
.dx-dashboard-layout-tabs {
    &.dx-tabs-expanded {
        display: flex;
    }
    .dx-tabs-wrapper {
        display: flex;
        border-block-start: none;
        border-block-end: none;
        -webkit-border-after: none;
        -webkit-border-before: none;
        background-color: $dashboard-border-color;
        &:after {
            border-block-start: none;
            border-inline-start: none;
            -webkit-border-start: none;
            border-block-end: none;
            border-inline-end: none;
            -webkit-border-end: none;
        }
    }
    .dx-tab-content {
        display: block;
    }
    .dx-toolbar {
        background-color: transparent;
    }
    &.dx-tabs {
        border: 0;
        .dx-dashboard-item-container {
            box-shadow: none;
            border: none;
        }
        .dx-dashboard-standalone-item:not(.dx-dashboard-hidden-element) {
            border-right: 1px solid $dashboard-border-color;
            &.dx-dashboard-ignore-border {
                border-right: none;
            }
        }
        .dx-tab {
            padding: 0;
            display: block;
            flex-basis: auto;
            flex-grow: 0;
            border-radius: 2px;
            &:not(.dx-tab-selected) {
                .dx-dashboard-standalone-item:not(.dx-dashboard-hidden-element) {
                    border-bottom: 1px solid $dashboard-border-color;
                }
                &.dx-state-hover {
                    .dx-dashboard-item-container {
                        background-color: $dashboard-tab-hover-bg;
                    }
                }
            }
            &.dx-tab-selected {
                .dx-dashboard-cover {
                    pointer-events: none;
                }
                &:after {
                    border: none;
                }
                .dx-dashboard-item-container {
                    background-color: $dashboard-widget-bg;
                }
            }
            &.dx-state-hover::after, &.dx-state-active::after {
                -webkit-border-after: none;
                border-block-start: none;
                -webkit-border-before: none;
                border-block-end: none;
                border-inline-start: none;
                -webkit-border-start: none;
                border-inline-end: none;
                -webkit-border-end: none;
            }
        }
    }
    .dx-tab-content {
        .dx-dashboard-group-item {
            padding: 0;
        }
    }
}