/* videoEditor */

body { padding: 0; }
.editor-container .jumbotron h1,
.editor-container .jumbotron .h1 { font-size: 50px; margin-top: 0; text-shadow: 1px 1px 0 #fff; }
.editor-container { padding: 20px; }
.editor-container .list-group {  }
.editor-container .header { padding: 0; }
.editor-container .header h1 { color: #3D7989; }
.editor-container table.table { margin:0; background-color: #fff; }
.editor-container .editor-wrapper { padding: 30px; margin: 0 auto; }

#editor { padding: 10px 0 0 0; }
#video-preview { /*width:790px;*/ min-height: 300px; float: left; position: relative; }
#video-preview .left,
#video-preview .right { height: 300px; overflow: hidden; text-align: center; background-color: #777; }
#video-preview .left { border-right: 1px solid #777; }
#video-preview .right { border-left: 1px solid #777; }
#video-preview .left img,
#video-preview .right img { width:100%; }
#input-list {  }
#listInput { margin-bottom: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; font-size: 12px; }
#listOutput { padding: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; font-size: 12px; }
#v_time_in,
#v_time_out { background-color: #B2B2B2; color:#fff; font-size: 13px; }
#segments { position: relative; width:100%; height: 12px; margin-top:20px; background-color: #fff; border: 1px solid #B2B2B2; }
#segments div { height: 10px; position: absolute; left:0; top:0; background: #B2B2B2; border-left: 1px solid #777; border-right: 1px solid #777; cursor: pointer; text-align: center; font-size: 9px; }
#segments div.active { background: #777; color:#fff; }
.editor-container .time-line { margin: 15px 0; }
.editor-container .actions { padding: 0 0 15px 0; }
.editor-container .actions > div > div { padding-top: 5px; padding-bottom: 5px; }
.editor-container .time-line-b { padding: 0 0 17px 0; font-size: 18px; }
.editor-container .ui-widget-content { background: #B2B2B2; border: 1px solid #B2B2B2; height: 10px; border-radius: 0; }
.editor-container .ui-widget-header { height: 10px; background: #636363; border: 1px solid #636363; border-radius: 0; }
.editor-container .ui-slider .ui-slider-handle,
.editor-container .ui-slider .ui-slider-handle.ui-state-focus { width: 5px; height: 14px; margin-left: -2px; margin-top: 2px; background: #3D3D3D; border: 0; border-radius: 0; }
.editor-container .ui-slider .ui-slider-handle:focus { outline: none; }
#time-range { margin-bottom: 2px; }

.editor-container .ui-slider .ui-slider-handle:after,
.editor-container .ui-slider .ui-slider-handle:before { content: ''; position: absolute; left: -7px; right: 0; width: 0; height:0; background: transparent; border-radius: 0; border-color: #3D3D3D; outline: none; }
.editor-container .ui-slider .ui-slider-handle:after { margin-top:-7px; border-top: 9px solid #3D3D3D; border-right: 9px solid transparent; border-left: 9px solid transparent; border-bottom: 0; }
.editor-container .ui-slider .ui-slider-handle:before { margin-top:12px; border-bottom: 9px solid #3D3D3D; border-right: 9px solid transparent; border-left: 9px solid transparent; border-top: 0; }

.editor-container .ui-slider .ui-slider-handle.ui-handle-active { background-color: #000; }
.editor-container .ui-slider .ui-slider-handle.ui-handle-active:after { border-top-color: #000; }
.editor-container .ui-slider .ui-slider-handle.ui-handle-active:before { border-bottom-color: #000; }

.editor-container .ui-slider .ui-slider-handle:nth-child(2) { cursor: e-resize; }
.editor-container .ui-slider .ui-slider-handle:nth-child(3) { cursor: w-resize; }

#video-player { width:100%; height: 300px; overflow: hidden; float: left; text-align: center; position: absolute; left:0; top:0; background-color: #777; }
#video-player button.btn-close,
#video-player button.btn-getposition { width: 30px; height: 30px; padding: 0; position: absolute; right: 8px; top: 8px; z-index: 999; color: #eee; font-size: 20px; background: none; border: 1px solid #777; border-radius: 4px; }
#video-player button.btn-close:hover,
#video-player button.btn-getposition:hover { border-color: #fff; }
#video-player button.btn-getposition { right: auto; left: 8px; font-size: 15px; font-weight: bold; }
#video-player button.btn-getposition.pos-out { left: 45px; }
#video-player button.btn-close > *,
#video-player button.btn-getposition > * { line-height: 28px; }
#video-player button.btn-close:hover,
#video-player button.btn-getposition:hover { color: #fff; }
#v_player { width: 100%; height: 300px; background-color: #777; }
.flowplayer { height: 300px; background-color: #000; }
.flowplayer .fp-embed { display: none !important; }

@media (max-width: 992px) {
  .collapse { display: none; }
  #input-list { margin-bottom: 10px; }
}
@media (min-width: 992px) {
  .collapse { display: block; }
}