.dxbl-splitter {
    --dxbl-splitter-bg: #fff;
    --dxbl-splitter-color: #212529;
    --dxbl-splitter-font-family: inherit;
    --dxbl-splitter-font-size: 0.875rem;
    --dxbl-splitter-line-height: 1.4285;
    --dxbl-splitter-button-color: #212529;
    --dxbl-splitter-button-hover-color: #212529;
    --dxbl-splitter-button-focused-color: #fff;
    --dxbl-splitter-button-active-color: #fff;
    --dxbl-splitter-button-padding-cross: 0.25rem;
    --dxbl-splitter-button-padding-main: 0.25rem;
    --dxbl-splitter-button-image-size: 1rem;
    --dxbl-splitter-pane-padding-x: 0.75rem;
    --dxbl-splitter-pane-padding-y: 0.75rem;
    --dxbl-splitter-resize-handle-border-radius: 0;
    --dxbl-splitter-resize-handle-color: #212529;
    --dxbl-splitter-resize-handle-hover-color: #212529;
    --dxbl-splitter-resize-handle-focused-color: #fff;
    --dxbl-splitter-resize-handle-active-color: #fff;
    --dxbl-splitter-resize-handle-padding-cross: 0.25rem;
    --dxbl-splitter-resize-handle-padding-main: 0.25rem;
    --dxbl-splitter-resize-handle-size-cross: 0.25rem;
    --dxbl-splitter-resize-handle-size-main: 2rem;
    --dxbl-splitter-separator-bg: color-mix(in srgb, #fff 80%, #d2d2d2);
    --dxbl-splitter-separator-hover-bg: color-mix(in srgb, color-mix(in srgb, #fff 80%, #d2d2d2) 80%, #d2d2d2);
    --dxbl-splitter-separator-focused-bg: #468c93;
    --dxbl-splitter-separator-active-bg: var(--bs-primary-border-subtle);
    --dxbl-splitter-separator-border-radius: 0;
    --dxbl-splitter-separator-hover-border-radius: 0;
    --dxbl-splitter-separator-focused-border-radius: 0;
    --dxbl-splitter-separator-active-border-radius: 0;
    --dxbl-splitter-separator-gap: 0.125rem;
    --dxbl-splitter-separator-size: 0.625rem;
    --dxbl-splitter-separator-static-size: 0.375rem
}

    .dxbl-splitter.dxbl-sm {
        --dxbl-splitter-font-size: 0.75rem;
        --dxbl-splitter-line-height: 1.5;
        --dxbl-splitter-button-padding-cross: 0.25rem;
        --dxbl-splitter-button-padding-main: 0.25rem;
        --dxbl-splitter-button-image-size: 1rem;
        --dxbl-splitter-pane-padding-x: 0.5rem;
        --dxbl-splitter-pane-padding-y: 0.5rem;
        --dxbl-splitter-resize-handle-size-cross: 0.125rem;
        --dxbl-splitter-resize-handle-size-main: 1.5rem;
        --dxbl-splitter-separator-gap: 0;
        --dxbl-splitter-separator-size: 0.5rem;
        --dxbl-splitter-separator-static-size: 0.25rem
    }

    .dxbl-splitter.dxbl-lg {
        --dxbl-splitter-font-size: 1rem;
        --dxbl-splitter-line-height: 1.375;
        --dxbl-splitter-button-padding-cross: 0.375rem;
        --dxbl-splitter-button-padding-main: 0.375rem;
        --dxbl-splitter-button-image-size: 1rem;
        --dxbl-splitter-pane-padding-x: 1rem;
        --dxbl-splitter-pane-padding-y: 1rem;
        --dxbl-splitter-resize-handle-size-cross: 0.25rem;
        --dxbl-splitter-resize-handle-size-main: 2.5rem;
        --dxbl-splitter-separator-gap: 0.125rem;
        --dxbl-splitter-separator-size: 0.75rem;
        --dxbl-splitter-separator-static-size: 0.5rem
    }

.dxbl-splitter {
    background-color: var(--dxbl-splitter-bg);
    color: var(--dxbl-splitter-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--dxbl-splitter-font-family);
    font-size: var(--dxbl-splitter-font-size);
    height: 100%;
    line-height: var(--dxbl-splitter-line-height);
    min-height: 0;
    min-width: 0;
    position: relative;
    width: 100%
}

    .dxbl-splitter.dxbl-splitter-horizontal {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .dxbl-splitter.dxbl-splitter-vertical {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .dxbl-splitter > .dxbl-splitter-pane {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0%;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        max-height: 100%;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        position: relative
    }

        .dxbl-splitter > .dxbl-splitter-pane.dxbl-splitter-pane-collapsed {
            -webkit-box-flex: 0;
            -webkit-flex: 0 1 0;
            -ms-flex: 0 1 0px;
            flex: 0 1 0;
            overflow: hidden;
            visibility: hidden
        }

        .dxbl-splitter > .dxbl-splitter-pane > .dxbl-splitter-pane-content {
            height: 100%;
            padding: var(--dxbl-splitter-pane-padding-y) var(--dxbl-splitter-pane-padding-x);
            width: 100%
        }

            .dxbl-splitter > .dxbl-splitter-pane > .dxbl-splitter-pane-content:has(>.dxbl-splitter) {
                padding: 0
            }

    .dxbl-splitter > .dxbl-splitter-separator {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: var(--dxbl-splitter-separator-bg);
        border-radius: var(--dxbl-splitter-separator-border-radius);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        gap: var(--dxbl-splitter-separator-gap);
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        overflow: hidden;
        outline: 0
    }

        .dxbl-splitter > .dxbl-splitter-separator:not(.dxbl-splitter-separator-static):hover {
            --dxbl-splitter-separator-bg: var(--dxbl-splitter-separator-hover-bg);
            --dxbl-splitter-separator-border-radius: var(--dxbl-splitter-separator-hover-border-radius)
        }

        .dxbl-splitter > .dxbl-splitter-separator:not(.dxbl-splitter-separator-static):focus {
            --dxbl-splitter-button-color: var(--dxbl-splitter-button-focused-color);
            --dxbl-splitter-resize-handle-color: var(--dxbl-splitter-resize-handle-focused-color);
            --dxbl-splitter-separator-bg: var(--dxbl-splitter-separator-focused-bg);
            --dxbl-splitter-separator-border-radius: var(--dxbl-splitter-separator-focused-border-radius)
        }

        .dxbl-splitter > .dxbl-splitter-separator:not(.dxbl-splitter-separator-static):active {
            --dxbl-splitter-button-color: var(--dxbl-splitter-button-active-color);
            --dxbl-splitter-resize-handle-color: var(--dxbl-splitter-resize-handle-active-color);
            --dxbl-splitter-separator-bg: var(--dxbl-splitter-separator-active-bg);
            --dxbl-splitter-separator-border-radius: var(--dxbl-splitter-separator-active-border-radius)
        }

        .dxbl-splitter > .dxbl-splitter-separator:not(.dxbl-splitter-separator-static):not(:focus):not(:active) > .dxbl-splitter-resize-handle:hover {
            --dxbl-splitter-resize-handle-color: var(--dxbl-splitter-resize-handle-hover-color)
        }

        .dxbl-splitter > .dxbl-splitter-separator:not(.dxbl-splitter-separator-static):not(:focus):not(:active) > .dxbl-splitter-button:hover {
            --dxbl-splitter-button-color: var(--dxbl-splitter-button-hover-color)
        }

        .dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-resize-handle > .dxbl-splitter-resize-handle-image {
            background-color: var(--dxbl-splitter-resize-handle-color);
            border-radius: var(--dxbl-splitter-resize-handle-border-radius)
        }

            .dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-resize-handle > .dxbl-splitter-resize-handle-image::before {
                content: ""
            }

        .dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-button {
            color: var(--dxbl-splitter-button-color);
            cursor: pointer
        }

            .dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-button > .dxbl-image {
                display: block;
                margin: 0;
                height: var(--dxbl-splitter-button-image-size);
                width: var(--dxbl-splitter-button-image-size)
            }

.dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: var(--dxbl-splitter-separator-size)
}

    .dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator.dxbl-splitter-separator-static {
        width: var(--dxbl-splitter-separator-static-size)
    }

    .dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator.dxbl-splitter-separator-draggable {
        cursor: col-resize
    }

    .dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-resize-handle {
        padding: var(--dxbl-splitter-resize-handle-padding-main) var(--dxbl-splitter-resize-handle-padding-cross)
    }

        .dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-resize-handle > .dxbl-splitter-resize-handle-image {
            height: var(--dxbl-splitter-resize-handle-size-main);
            width: var(--dxbl-splitter-resize-handle-size-cross)
        }

    .dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-button {
        padding: var(--dxbl-splitter-button-padding-main) var(--dxbl-splitter-button-padding-cross)
    }

.dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height: var(--dxbl-splitter-separator-size)
}

    .dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator.dxbl-splitter-separator-static {
        height: var(--dxbl-splitter-separator-static-size)
    }

    .dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator.dxbl-splitter-separator-draggable {
        cursor: row-resize
    }

    .dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-resize-handle {
        padding: var(--dxbl-splitter-resize-handle-padding-cross) var(--dxbl-splitter-resize-handle-padding-main)
    }

        .dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-resize-handle > .dxbl-splitter-resize-handle-image {
            height: var(--dxbl-splitter-resize-handle-size-cross);
            width: var(--dxbl-splitter-resize-handle-size-main)
        }

    .dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator > .dxbl-splitter-button {
        padding: var(--dxbl-splitter-button-padding-cross) var(--dxbl-splitter-button-padding-main)
    }