﻿.vertical-split {
    width: 100%;
    overflow: hidden; /*this was advised by DevExpress on 2021.02.08*/
    /*    display: flex; should not be set to avoid internal contents to flow next*/
}

    .vertical-split.left-above {
        padding: 0px 4px 0px 2px;
    }

    .vertical-split.right-above {
        padding: 0px 2px 0px 4px;
    }

    .vertical-split.left-below {
        padding: 0px 4px 0px 2px;
    }

    .vertical-split.right-below {
        padding: 0px 2px 0px 4px;
    }

    .vertical-split.above {
        padding: 0px 2px;
    }

    .vertical-split.below {
        padding: 0px 2px;
    }

.horizontal-split {
    height: 100%;
    overflow: auto;
}

    .horizontal-split.left {
        padding: 0px 4px 0px 2px;
    }

    .horizontal-split.right {
        padding: 0px 2px 0px 4px;
    }

.gutter-vertical {
    cursor: row-resize;
    width: 100%;
    background: lightgray;
    border-color: gray;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    height: 8px !important;
}

.gutter-horizontal {
    cursor: ew-resize;
    height: 100%;
    background: gainsboro;
    border-color: gray;
}

.gutter {
    background-color: #ebe9e9;
    background-repeat: no-repeat;
    background-position: 50%;
    height: calc(100% - 50px);
}

    .gutter:hover {
        background-color: #e1e1e1;
    }

    .gutter.gutter-horizontal {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
        cursor: col-resize;
        width: 8px !important;
        margin-top: 25px;
    }

.mainblock-horizontal {
    width: 100%;
    height: calc(100vh - 110px);
    display: flex;
    justify-items: center;
}

.mainblock-vertical {
    width: 100%;
    height: 100%;
}

#Separator {
    cursor: ew-resize;
    background: gainsboro;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
