.dui-split-layout {
    overflow: hidden;
    display: flex;
}
.dui-split-layout.dui-horizontal {
    --dui-split-layout-splitter-width:var(--dui-split-layout-splitter-size);
    --dui-split-layout-splitter-height:100%;
    --dui-split-layout-splitter-cursor:col-resize;
    flex-direction: row;
}
.dui-split-layout.dui-vertical {
    --dui-split-layout-splitter-width:100%;
    --dui-split-layout-splitter-height:var(--dui-split-layout-splitter-size);
    --dui-split-layout-splitter-cursor:row-resize;
    flex-direction: column;
}

.dui-horizontal .dui-split-panel {
    height: 100%;
}
.dui-vertical .dui-split-panel {
    width: 100%;
}

.dui-split-layout,
.dui-split-layout-splitter,
.dui-split-panel {
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dui-horizontal .dui-split-panel:not(.dui-hidden),
.dui-horizontal .dui-split-layout-splitter:not(.dui-hidden)  {
    display: inline-block;
}
.dui-vertical .dui-split-panel:not(.dui-hidden) ,
.dui-vertical  .dui-split-layout-splitter:not(.dui-hidden)  {
    display: block;
}

.dui-split-layout-splitter {
    width: var(--dui-split-layout-splitter-width);
    height: var(--dui-split-layout-splitter-height);
    cursor: var(--dui-split-layout-splitter-cursor);
    background-color: var(--dui-split-layout-splitter-background, var(--dui-accent));
}

.dui-splitter-handle{
    border: var(--dui-split-layout-handle-border-size) var(--dui-split-layout-handle-border-style)  var(--dui-split-layout-handle-border-color, var(--dui-accent))  ;
    background-color: var(--dui-split-layout-handle-background, var(--dui-accent-d-4));
}

.dui-splitter-handle.dui-horizontal {
    position: relative;
    top: calc(50% - var(--dui-split-layout-splitter-handle-size)/2);
    height: var(--dui-split-layout-splitter-handle-size);
    width: 100%;
}

.dui-splitter-handle.dui-vertical {
    width: var(--dui-split-layout-splitter-handle-size);
    height: 100%;
    position: relative;
    left: calc(50% - var(--dui-split-layout-splitter-handle-size)/2);
}