.workspace {
    position: fixed;
    margin: 0 0;
    padding: 50px 0 0 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.workspace .editor {
    position:relative;
    flex: auto
}

sub-editor {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 0;
    padding: 0 0;
    border: 1px solid silver;
    display: flex
}

sub-editor .ace {
    flex: 1;
    height: 100%;
}

.editor.xero .ace-tm.selected:not(.ace_focus) .ace_content {
  background-color: lightyellow
}

.editor.xero .ace-tm.ace_focus.selected:not(.read-only) .ace_marker-layer .ace_active-line {
    background-color: yellow
}

.ace-tm.ace_focus.read-only .ace_marker-layer .ace_active-line {
    background-color: darkorange
}

.ace-tm .ace_directive.ace_keyword {
    background-color: lightgreen;
    color: darkgreen;
}

.ace-tm .ace_directive.ace_value {
    background-color: lightblue;
    color: blue;
}

sub-editor .annotations {
    height: 100%;
    width: 33%;
    border-left:1px solid gray;
    overflow-y: auto
}

sub-video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: dimgray;
    margin: auto auto;
    padding: 0 0;
    text-align: center;
}

sub-video.egg {
    background: linear-gradient(to bottom,
        #f00000,
        #f00000 16.67%,
        #ff8000 16.67%,
        #ff8000 33.33%,
        #ffff00 33.33%,
        #ffff00 50%,
        #007940 50%,
        #007940 66.67%,
        #4040ff 66.67%,
        #4040ff 83.33%,
        #a000c0 83.33%,
        #a000c0);
}

sub-video .display {
    position: relative;
    height: 100%;
    display: inline-block;
    margin: 0 0;
    padding: 0 0;
}

sub-video .display video {
    height: 100%;
    background-color: black;
}

sub-video .display canvas {
    position: absolute;
    top: 0;
    left: 0
}

sub-video-controls {
    width: 100%;
    height: 34px;
    padding: 0 0;
    margin: 0 0;
    text-align: left;
    background-color: whitesmoke;
}

sub-video-controls .seekbar {
    background-color: silver;
    width: 100%;
    height: 10px;
}

sub-video-controls .seekbar .bar {
    height: 100%;
    background-color: darkorange;
}

sub-video-controls .buttons * {
    height: 24px;
}

sub-video-controls .buttons .btn {
    padding: 0 0;
    width: 24px;
    text-align: center;
    line-height: 24px;
}

sub-video-controls .panels > span {
    display: inline-block;
    font-size: 14px;
    padding: 2px 10px;
    color: darkred;
    vertical-align: middle
}

sub-video-controls .panels >span+span {
    border-left: 1px solid silver
}

.modal-full {
    width: 95vw;
    margin: 0 auto;
    height: 95vh;
    top: 3vh
}

.modal-full .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.modal-full .modal-content .modal-body {
    flex: 1
}

.full-height {
    height: 100%
}

textarea.full-height {
    resize: none;
    height: 100%;
}

.time { position: absolute }
.time9 { background-color: rgba(255, 255, 255, 0.1); }
.time8 { background-color: rgba(255, 255, 255, 0.2); }
.time7 { background-color: rgba(255, 255, 255, 0.3); }
.time6 { background-color: rgba(255, 255, 255, 0.4); }
.time5 { background-color: rgba(255, 255, 255, 0.5); }
.time4 { background-color: rgba(255, 255, 255, 0.6); }
.time3 { background-color: rgba(255, 255, 255, 0.7); }
.time2 { background-color: rgba(255, 255, 255, 0.8); }
.time1 { background-color: rgba(255, 255, 255, 0.9); }
.time0 { background-color: rgba(0, 255, 0, 0.5); }

.btn-danger {
    background-color:#ff5959;
    color:black;   
}

.btn-danger.active {
    background-color:#eeeeee;
    border-color: rgb(79, 79, 79);
    color:black;
    
}