html,
body {
    height: 100%;
}

.col {
    display: table-cell;
    height: calc(100% - 60px);
    position: fixed;
    z-index: 1;
    top: 0px;
    overflow-x: hidden;
    padding-top: 20px;
}


.col {
    height: 100%;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    padding-top: 20px;
}

.left {
    left: 0;
    background-color: #111;
    width: 30%;
}

.right {
    right: 0;
    background-color: #111;
    width: 70%;
}

#splitter {
    text-align:center;
    float: left;
    padding:5px;
    margin: 0px;
    width: 99%;
    height: 30px;
}

.myBtn {
    height: 30px;
    width: 15%;
}

#map1,
#map2 {
    float: left;
    margin: 0px;
    height: 46%;
    width: 99%;
    border: solid red 1px;
}

#pano1,
#pano2 {
    float: right;
    margin: 0px;
    height: 46%;
    width: 99%;
    border: solid blue 1px;
    position: relative;
}

#floating-panel {
    position: absolute;
    top: 270px;
    left: 800px;
    z-index: 15;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: "Roboto", "sans-serif";
    line-height: 30px;
    padding-left: 10px;
}

#floating-panel {
    margin-left: -100px;
}

#marker_horisontal_1 {
    position: absolute;
    top: 460px;
    left: 650px;
    z-index: 15;
}

#marker_vertical_1 {
    position: absolute;
    top: 450px;
    left: 675px;
    z-index: 15;
}

#marker_horisontal_2 {
    position: absolute;
    top: 790px;
    left: 650px;
    z-index: 15;
}

#marker_vertical_2 {
    position: absolute;
    top: 780px;
    left: 675px;
    z-index: 15;
}

.firstOverlayLine {
    left: 50%;
}