.elessar-handle { display: block; background-color: rgba(0,0,0,0.2); height: 100%; width: 5px; cursor: ew-resize; position: absolute; top: 0; bottom: 0; }
    .elessar-handle:first-child { left: 0; }
    .elessar-handle:last-child { right: 0; }
.elessar-vertical .elessar-handle { height: 5px; width: 100%; left: 0; right: 0; top: auto; bottom: auto; cursor: ns-resize; }
    .elessar-vertical .elessar-handle:first-child { top: 0; }
    .elessar-vertical .elessar-handle:last-child { bottom: 0; }
.elessar-indicator { position: absolute; background: black; border-color: white; border-style: solid; border-width: 0 1px; width: 2px; height: 100%; z-index: 15; }
.elessar-vertical .elessar-indicator { width: 100%; height: 2px; }
.elessar-range { position: absolute; cursor: -webkit-grab; cursor: -moz-grab; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; background: #1F8DB8; width: 0; z-index: 100; text-align: center; }

    .elessar-range.green { background-color: #00BF00 }
    .elessar-range.orange { background-color: #F0711C }
    .elessar-range.red { background-color: #F01C1F }

    .elessar-range.colour0 { color: #fff; background-color: #f44336 }
    .elessar-range.colour1 { color: #fff; background-color: #e81e63 }
    .elessar-range.colour2 { color: #fff; background-color: #9c27b0 }
    .elessar-range.colour3 { color: #fff; background-color: #673ab7 }
    .elessar-range.colour4 { color: #fff; background-color: #3f51b5 }
    .elessar-range.colour5 { color: #fff; background-color: #2196f3 }
    .elessar-range.colour6 { color: #fff; background-color: #03a9f4 }
    .elessar-range.colour7 { color: #fff; background-color: #00bcd4 }
    .elessar-range.colour8 { color: #fff; background-color: #009688 }
    .elessar-range.colour9 { color: #fff; background-color: #4caf50 }
    .elessar-range.colour10 { color: #fff; background-color: #8bc34a }
    .elessar-range.colour11 { color: #000; background-color: #cddc39 }
    .elessar-range.colour12 { color: #000; background-color: #ffeb3b }
    .elessar-range.colour13 { color: #000; background-color: #ffc107 }
    .elessar-range.colour14 { color: #fff; background-color: #ff9800 }
    .elessar-range.colour15 { color: #fff; background-color: #ff5722 }

    .elessar-range.no-resize .elessar-handle { width: 0px !important }

.elessar-vertical .elessar-range { width: auto; height: 0; }
.elessar-label { position: absolute; z-index: 5; pointer-events: none; border-left: 1px solid #999; padding-left: 10px; }
.elessar-readonly { background-color: #777; cursor: default !important; }
.elessar-phantom { background-color: transparent; background: rgba(0,0,0,0.5); color: white; cursor: pointer !important; }
.elessar-rangebar { position: relative; height: 30px; line-height: 30px; background: #ccc; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.elessar-delete-confirm { background: red; }
body.elessar-resizing, body.elessar-dragging { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    body.elessar-resizing,
    body.elessar-resizing .bar,
    body.elessar-resizing .handle { cursor: ew-resize !important; }
        body.elessar-resizing.elessar-resizing-vertical,
        body.elessar-resizing.elessar-resizing-vertical .bar,
        body.elessar-resizing.elessar-resizing-vertical .handle { cursor: ns-resize !important; }
    body.elessar-dragging,
    body.elessar-dragging .bar,
    body.elessar-dragging .handle { cursor: move !important; cursor: -webkit-grabbing !important; cursor: -moz-grabbing !important; cursor: grabbing !important; }