/* This is styling for left and right panel handles */


/* General styling */

.handle {
    width: 22px;
    height: 65px;
    position: absolute;
    opacity: 0.7;
    border: 1px solid #07a4cf;
    overflow: hidden !important;
}

.handle-1 {
 	top: 120px;    
}

.handle-2 {
    top: 220px;
}

.handle-3 {
    top: 320px;
}

.handle-label {
    width: 20px;
    height: 63px;
    position: absolute;
   	text-shadow: none;
}


/* Left side handles' styling */

.handle-left {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.handle-1-left {
    background: #07a4cf;
}

.handle-2-left {
    background: #07a4cf;
}

.handle-3-left {
    background: #07a4cf;
}

.handle-label-left {
    top: 18px;
    left: 22px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    writing-mode: lr-bt; 
}

.handle-label-1-left {
    color: #ffffff;
}

.handle-label-2-left {
    color : #ffffff;
}

.handle-label-3-left {
    color: #ffffff;
}

.handle-visible-left {
    transition: 0.5s;
    left: 0px;
}

.handle-hidden-left {
    transition: 0.5s;
	left: -25px;  
}


/* Right side handle' styling */

.handle-right {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.handle-1-right {
    background: #FFDC16;
}

.handle-2-right {
    background: #07a4cf;   
}

.handle-3-right {
    background: #F49DC1;    
}

.handle-label-right {
    top: -18px;
    right: 22px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    writing-mode: lr-tb; 
}

.handle-label-1-right {
    color: #C9A700;
}

.handle-label-2-right {
    color: #ffffff;
}

.handle-label-3-right {
    color: #ffffff;
}

.handle-visible-right {
    transition: 0.5s;
    right: 0px;
}

.handle-hidden-right {
    transition: 0.5s;
	right: -25px;  
}