input[type=range].timeline-thumb::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    border: 1px solid #d6d6d6;
    background: #efefef;
}

input[type=range].timeline-thumb::-moz-range-track {
    width: 100%;
    height: 6px;
    border: 1px solid #d6d6d6;
    background: #efefef;
}

input[type=range].timeline-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: #767676;
    cursor: grab;
    margin-left: -2px;
    margin-top: -6px;
}

input[type=range].timeline-thumb::-moz-range-thumb {
    -moz-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: #767676;
    cursor: grab;
}

input[type=range].timeline-thumb {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    /* Specific width is required for Firefox. */
    background: transparent;
    /* Otherwise white in Chrome */
}

input[type=range].timeline-thumb:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.asr-word.asr-warning {
    color: blueviolet !important;
}

.asr-word.low-chance-word {
    color: red !important;
}

.bg-local-mode {
    background-color: rosybrown;
}

.nodrag {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.history-recovered {
    background-color: lightpink !important;
}

.history-inserted {
    background-color: #D9EAD3 !important;
}

.history-deleted {
    background-color: lightcoral !important;
}

.history-text-inserted {
    color: green !important;
}

.history-text-deleted {
    color: red !important;
    text-decoration: line-through !important;
}

.node-readonly {
    background-color: #e0e0e0 !important;
}

.node-dependon {
    background-color: #c3fbc3 !important;
}

.node-locked {
    background-color: #ffe0e0;
}

#editorid {
    div[contenteditable=true] {
        outline: 0 solid transparent;
    }

    &.new-editor {
        div[contenteditable=true] {
            box-shadow: 5px 0 0 0 mediumvioletred;
        }
    }
}

.no-focus-border:focus, .parag:focus, .asr-parag:focus {
    outline: none;
}

.b-popup {
    display: none;
    width: 317px;
    position: absolute;
    top: 44px;
    line-height: 0px;
    z-index: 9999;
}

.b-popup .b-popup-content {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #000;
}

.b-color-btn {
    width: 24px !important;
    height: 24px !important;
    padding: 0px !important;
}

.b-border-btn {
    border: 1px solid black;
    border-radius: .25rem;
}

.b-no-border-btn {
    border: 1px solid white;
    border-radius: .25rem;
}

.btn-volume {
    width: 40px;
    display: grid;
    justify-items: right;
}

.video-player-100 {
    /*height: 276px;*/
    width: 490px;
}

.video-player-125 {
    /*height: 345px;*/
    width: 612px;
}

.video-player-150 {
    /*height: 414px;*/
    width: 735px;
}

.video-player-175 {
    /*height: 483px;*/
    width: 857px;
}

.video-player-200 {
    /*height: 552px;*/
    width: 980px;
}

.column-100 {
    min-width: 249px;
    max-width: 249px;
}

.column-125 {
    min-width: 310px;
    max-width: 310px;
}

.column-150 {
    min-width: 371px;
    max-width: 371px;
}

.column-175 {
    min-width: 432px;
    max-width: 432px;
}

.column-200 {
    min-width: 494px;
    max-width: 494px;
}


.video-overlay {
    position: absolute;
    display: flex;
    align-items: center;
}

.control-overlay {
    margin: 0.5rem;
    padding: 0.5rem;
    background-color: gray;
    opacity: 0.7;
    position: absolute;
    display: flex;
    align-items: center;
}

.no-padding > p {
    padding: 0px;
    margin: 0px;
}

.chat_attach_panel {
    display: flex;
    flex-flow: column;
}

.flat-panel {
    flex: 1;
    display: flex;
    flex-flow: column;
    width: 300px;
    margin: 5px !important;
}

.flat-body {
    height: 100%;
    overflow-y: auto;
}

.body-comments {
    height: calc(100vh - 145px);
    overflow-y: auto;
}

.fa-stack + .fa-stack {
    margin-left: .3em;
}

.modal-comments {
    width: 60%;
    height: 60%;
    padding: 0px;
    margin: 0px;
}

.red-font {
    color: red;
}

.attach {
    margin: 4px 4px 4px 4px;
    background-color: #fae4c2;
    border-radius: 2px;
    padding: 5px;
}

.comment-message {
    margin: 4px;
    background-color: #c9eefc;
    border-radius: 5px;
    padding: 4px;
}

.self-message {
    margin: 4px 4px 4px 20px;
    background-color: #c9eefc;
    border-radius: 5px;
    padding: 5px;
}

.other-message {
    margin: 4px 20px 4px 4px;
    background-color: #c3fbc3;
    border-radius: 5px;
    padding: 5px;
}

.system-event {
    color: #808080;
}

.ql-editor .ql-font-arial {
    font-family: 'Arial'
}

.ql-editor .ql-font-courier {
    font-family: 'Courier New'
}

.ql-editor .ql-font-times {
    font-family: 'Times New Roman'
}

div.node-event span.timeline {
    background-color: #985959 !important;
}

div.asr-parag span.asr-word.timeline {
    background-color: #985959 !important;
}

div.node-event.timeline {
    background-color: #D9EAD3 !important;
}

.no-tool-panel {
    height: calc(100vh - 105px);
    overflow: auto;
}

.tool-panel {
    height: calc(100vh - 155px);
    overflow: auto;
}

.panel {
    margin: 0px;
}

.divtext {
    padding: 5px;
    width: 100%;
    min-height: 80px;
    overflow: auto;
}

.inner-scroll-y {
    overflow-y: auto;
    height: calc(100% - 92px);
    padding-left: 10px;
}

.inner-b-scroll-y {
    overflow-y: auto;
    height: calc(100% - 42px);
}

.scroll-y {
    overflow-y: auto;
    height: 100%;
}

.spell-error {
    text-decoration: underline !important;
    text-decoration-color: red !important;
    text-decoration-style: dotted !important;
}

.spell-ignore {
    text-decoration: underline !important;
    text-decoration-color: gray !important;
    text-decoration-style: dotted !important;
}

.shifted {
    /*padding-left:15px;*/
    font-style: italic;
}

.ql-editor .role {
    background-color: red;
}

.ql-editor .attr {
    background-color: red;
}

.ql-editor .paragraphattr {
    background-color: red;
    display: inline-block;
}

.protocol-paragraphattr {
    display: inline-block;
    vertical-align: top;
}

.ql-editor .orstart {
    background-color: green;
}

.ql-editor .orstop {
    background-color: green;
}

.ql-editor .andstart {
    background-color: green;
}

.ql-editor .andstop {
    background-color: green;
}

.nochilds {
    padding-left: 30px;
}

.ql-editor {
    padding: 0px;
}

.ql-toolbar {
    background-color: #f5f5f5;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.popup-item-selected {
    background-color: #d9edf7;
    color: black;
}


.container {
    margin-top: 10px;
}

.progress {
    margin: 0px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 4px;
}

.vertical {
    display: inline-block;
    width: 70px;
    height: 30px;
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

[hidden] {
    display: none !important;
}

.quadrant-1 {
    transform-origin: left top;
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
}

.quadrant-2 {
    transform-origin: right top;
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
}

.quadrant-3 {
    transform-origin: left bottom;
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
}

.quadrant-4 {
    transform-origin: right bottom;
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
}

.video-player-panel {
    overflow: hidden;
}

tr-auto-complete .autocomplete-panel {
    cursor: default;
    min-width: 80px;
    max-height: 250px;
    overflow-y: auto;
    max-width: 400px
}

tr-auto-complete .autocomplete-panel .autocomplete-item {
    transition: background-color 0.3s ease-in-out;
}

tr-auto-complete .autocomplete-panel .autocomplete-item.selected {
    background-color: #d9edf7;
}

tr-spell-suggest .spellsuggest-panel {
    cursor: default;
    min-width: 80px;
    max-height: 250px;
    overflow-y: auto;
    max-width: 400px
}

tr-spell-suggest .spellsuggest-panel .spellsuggest-item {
    transition: background-color 0.3s ease-in-out;
}

tr-spell-suggest .spellsuggest-panel .spellsuggest-item.selected {
    background-color: #d9edf7;
}


/*.progress progress-bar-vertical{
    margin:5px;
    height: 70px;
    width: 20px;
    display: flex;
    align-items: flex-end;
}*/

/*.progress-bar-vertical {
    width: 100%;
    height: 0;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
}*/

/* ----- RANGE -----*/

/* ----- RANGE -----*/
/*.protocol{*/
/*  position: fixed;*/
/*  height: calc(100% - 56px);*/
/*}*/

.full-video {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding-top: 0 !important;
}

.editor {
    cursor: text;
}