@use "sass:math";
.dx-layout {
    @include dx-dashboard-noselect;
    display: table;
    border-spacing: 0px;
}
.dx-layout-group {
    display: table-row;
}
.dx-layout-item {
    display: table-cell;
    vertical-align: top;
}
.flex-center-align {
    align-self: center;
}
.dx-dashboard-loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.dx-layout-item-wrapper {
    @include dx-dashboard-noselect;
    position: relative;
    display: inline-block;
    vertical-align: top;
    pointer-events: none;
    .dx-layout-item-container {
        margin: math.div($splitterSize, 2);
        &.dx-layout-item-container-transparent {
            background-color: transparent;
            box-shadow: none;
            border-radius: 0px;
        }
        .dx-dashboard-loading-indicator {
            top: math.div($splitterSize, 2);
            left: math.div($splitterSize, 2);
            bottom: math.div($splitterSize, 2);
            right: math.div($splitterSize, 2);
        }
    }
}
.dx-layout.dx-layout-drag-in-progress {
    .dx-layout-item-wrapper, .dx-layout-item-container, .dx-layout-item-cover {
        @include dx-dashboard-noselect;
        pointer-events: none;
    }
}
.dx-layout-item-cover {
    @include dx-dashboard-noselect;
    position: absolute;
    top: math.div($splitterSize, 2);
    left: math.div($splitterSize, 2);
    right: math.div($splitterSize, 2);
    bottom: math.div($splitterSize, 2);
    background-color: azure;
    opacity: 0.6;
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid lightblue;
    box-sizing: border-box;
}
.dx-layout-item-cover.dx-layout-selected {
    pointer-events: none;
    opacity: 0.15;
    background-color: transparent;
}
$locations: top left right bottom;
@each $location in $locations {
    .dx-layout-item-cover.dx-drag-over-#{$location} {
        border-#{$location}: 10px solid blue;
        box-sizing: border-box;
    }
}
.dx-dragbar-e {
    position: absolute;
    top: 0px;
    right: -(math.div($splitterSize, 2));
    width: $splitterSize;
    cursor: ew-resize;
    pointer-events: auto;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
.dx-dragbar-s {
    position: absolute;
    left: 0px;
    bottom: -(math.div($splitterSize, 2));
    height: $splitterSize;
    cursor: ns-resize;
    pointer-events: auto;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
.dx-ghostbar-e {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    pointer-events: auto;
    position: absolute;
    width: $splitterSize;
    cursor: ew-resize;
    background: $layoutResizerBackground;
}
.dx-ghostbar-s {
    position: absolute;
    height: $splitterSize;
    cursor: ns-resize;
    background: $layoutResizerBackground;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
.dx-dashboard-cover {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}