﻿.TouchSplitter.h-ts > div {
    height: 100%;
    width: 42%;
    width: calc(50% - 4px);
}

.TouchSplitter.v-ts > div {
    width: 100%;
    height: 42%;
    height: calc(50% - 4px);
}

.TouchSplitter > div {
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    overflow: hidden;
}

.TouchSplitter.h-ts > div.splitter-bar {
    width: 1em
    cursor: col-resize;
}

.TouchSplitter.v-ts > div.splitter-bar {
    height: 1em;
    cursor: row-resize;
}

.TouchSplitter > div.splitter-bar.dock > div {
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-position: center;
}

.TouchSplitter,
.TouchSplitter > div,
.TouchSplitter > div.splitter-bar > div {
    position: relative;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .TouchSplitter > div.test-calc {
        width: 1em;
        width: calc(10px + 10px);
    }

    .TouchSplitter > div.test-em {
        width: 1em;
    }

    .TouchSplitter > div.splitter-bar > div {
        margin-top: 10px !important;
      /*  width: 1em;
        height: 1em;*/
        position: relative;
        /*background-color: rgba(0,0,0,0.2);*/
    }

    .TouchSplitter.h-ts > div.splitter-bar > div {
        /*        margin-top: -.5em;
*/ top: 40%;
    }

    .TouchSplitter.v-ts > div.splitter-bar > div {
        /*margin-left: -.5em;*/
        left: 50%;
    }

.split-me > div:first-child {
    background: #fff;
}

.split-me > div:last-child {
    background: #fff;
}

.splitter-bar {
    background: #dedde1 !important;
}

.TouchSplitter > div.splitter-bar {
    cursor: col-resize !important;
}

.TouchSplitter.docked > div.splitter-bar {
    cursor: default !important;
}

.splitter-bar > div.first,
.splitter-bar > div.second {
    background: #333;
    padding: 8px 0px !important;
    height: 32px !important;
    color: white;
    font-size: 11px;
    text-align: center;
    cursor: pointer !important;
}

    .splitter-bar > div.first:hover,
    .splitter-bar > div.second:hover {
        opacity: .50;
    }
