*, :after, :before {
    box-sizing: border-box;
}
.video-view-fi-1 {
    display: flex;
    flex-wrap:wrap;
}

.video-view-se-1 {
    padding: 20px 50px 50px 50px;
    width: 75%;
}
.video-view-se-2 {
    width: 25%;
}
.editor-sidebar {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: stretch;
    align-items: stretch;
    max-width: 360px;
    background-color: #0066c0;
}
.sidebar-inner {
    height:79%;
}
.scroll-content {
    height: 520px;
    margin-bottom: 0px;
    margin-right: 0px;
    max-height: none;
}
.nav-tabs .btn svg {
    vertical-align: top;
    top: 0;
    margin-right: 7px;
}
.sub-card {
    position: relative;
    padding: 20px 12px;
    border-top: 1px solid #151519;
    width: 100%;
    display: -webkit-box;
    display: flex;
}
.sub-card .sub-time {
    margin-right: 8px;
}
.sub-card .sub-time .form-control {
    margin-bottom: 5px;
    display: block;
    width: 62px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    color: hsl(0deg 0% 0%);
    -webkit-transition: margin .15s;
    transition: margin .15s;
    text-align: left !important;
}
.sub-card .sub-text {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}
textarea.auto-expand {
    overflow: hidden;
    resize: none;
}
.sub-card .sub-text .form-control {
    height: 44px;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 18px;
    color: hsl(0deg 0% 0%);
}
.sub-card:first-child:last-child .sub-buttons .sub-del {
    visibility: hidden;
}
.sub-card .sub-buttons .sub-del:before {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M15.5001 6.21428L14.7858 5.5L10.5 9.78577L6.21428 5.50001L5.5 6.21429L9.78575 10.5L5.50021 14.7856L6.21448 15.4999L10.5 11.2143L14.7856 15.4999L15.4999 14.7856L11.2143 10.5L15.5001 6.21428Z'/%3E%3C/svg%3E");
}
.sub-card .sub-buttons .sub-add:before {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M11 5H10V10H5V11H10V16H11V11H16V10H11V5Z'/%3E%3C/svg%3E");
}
.sub-card .sub-buttons a {
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: rgba(21,21,25,.6);
    cursor: pointer;
    -webkit-transition: none;
    transition: none;
}
.nav-tabs .btn {
    position: relative;
    padding: 7px 14px;
    margin: 0 5px;
    font-size: 13px;
    line-height: 19px;
    border: none;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    color: #8afaff;
}
.btn-add-section.sidebar-section {
    -webkit-box-align: center;
    align-items: center;
}
.btn-add-section {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: transparent;
    border-width: 1px 0 0;
    color: #8afaff !important;
}
@media (min-width: 768px) {
    .sidebar-section {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        padding-left: 35px;
        padding-right: 35px;
    }
}

.btn svg {
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    top: -1px;
    -webkit-transition: fill .15s ease-in-out,opacity .15s ease-in-out;
    transition: fill .15s ease-in-out,opacity .15s ease-in-out;
}
.subtitle-text {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sub-card.active:after, .sub-card:hover:after {
    background-color: #00ffdc;
}
.sub-card:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: hsla(0,0%,100%,0);
}
.active {
    background-color: #0087ff;
}
.current_cell {
    z-index: 5 !important;
    border: 2px solid rgb(0, 0, 0);
}
.dialog-corner {
    border-radius:10px !important;
}
.file-source-btn .file-btn {
    margin-left: 25px !important;
    padding-left: 48px !important;
    background-color: #8c8cd1;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 1C3.34315 1 2 2.34315 2 4V16C2 17.6569 3.34315 19 5 19H15C16.6569 19 18 17.6569 18 16V4C18 2.34315 16.6569 1 15 1H5ZM4 4C4 3.44772 4.44772 3 5 3H15C15.5523 3 16 3.44772 16 4V16C16 16.5523 15.5523 17 15 17H5C4.44772 17 4 16.5523 4 16V4ZM7 9C6.44772 9 6 9.44772 6 10C6 10.5523 6.44772 11 7 11H10.75L13 11C13.5523 11 14 10.5523 14 10C14 9.44771 13.5523 9 13 9H10.75L7 9ZM11 15H10.75H7C6.44772 15 6 14.5523 6 14C6 13.4477 6.44772 13 7 13H10.75H11C11.5523 13 12 13.4477 12 14C12 14.5523 11.5523 15 11 15ZM7 5C6.44772 5 6 5.44772 6 6C6 6.55228 6.44772 7 7 7L10.75 7H13C13.5523 7 14 6.55228 14 6C14 5.44771 13.5523 5 13 5L10.75 5L7 5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center;
    display: block;
    width: 80%;
    min-height: 60px;
    margin: 0;
    padding: 16px 32px 16px 32px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    border-width: 0;
    color: #fff;
    border: 2px solid black;
}

.buttons-column .btn-dialog {
    padding: 16px 20px 16px 20px;
    align-items: center;
    align-content: center;
    margin: 6px 24px 17px 24px;
    font-weight: 600;
    font-size: 18px;
    background-color: #99b97d;
    color: #fff;
    border-radius: 6px;
}
.btn-subtitle {
    text-align: center;
    background: #000000;
    /*padding: 15px;
      display: flex;
    */
}
.btn-sm {
    border-radius: 50px !important;
    background: #73aeae;
    color: white;
}
.btn-srt .btn-sm:focus {
    outline: 0;
    color: white;
}

.btn-srt .btn-sm:active {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #333;
    text-decoration: none;
}

.btn-subtitle .saveas {
    width:60%;
}

.btn-subtitle .btn-group {
    width: 60%;
}

.btn-subtitle .dropdown {
    width: 80%;
}

.btn-subtitle .saveas em {
    margin:0;
}


/*videocontrolbar.css*/
.fas {
    color: white;
    font-size: 20px;
}

.player {
    max-width: 80vw;
    min-width: 800px;
    border: 5px solid black;
    border-radius: 10px;
    background: black;
    position: relative;
    cursor: pointer;
}


/* Containers */
.show-controls {
    width: 100%;
    height: 10%;
    z-index: 2;
    position: absolute;
    bottom: 0;
    top: 100%;
    cursor: default;
}

.controls-container {
    position: absolute;
    bottom: -5px;
    width: 100%;
    height: 100%;
    background: rgb(112 112 112 / 50%);
    box-sizing: border-box;
    z-index: 5;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.5s ease-out 2s;
}

/*.show-controls:hover .controls-container {
  opacity: 1;
  transition: all 0.2s ease-out;
}*/



.control-group {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    flex: 1;
}


/* Progress Bar */
.progress-range {
    height: 8px;
    width: calc(100% - 30px);
    background: #d4cece;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 5px;
    cursor: pointer;
    transition: height 0.1s ease-in-out;
}

    .progress-range:hover {
        height: 10px;
    }


.video-progress-bar {
    background: #344642;
    width: 0;
    height: 100%;
    border-radius: 10px;
    transition: all 0.5s ease;
}


/* Play & Pause */
.play-controls {
    text-align:center;
    flex: 1;
}

.fa-play:hover,
.fa-pause:hover {
    color: var(--primary-color);
    cursor: pointer;
}

/* Volume */
.volume-icon {
    cursor: pointer;
}

.volume {
    flex: 1;
    text-align:center;
}

.volume-range {
    height: 8px;
    width: 100px;
    background: rgba(70, 70, 70, 0.5);
    border-radius: 10px;
    position: relative;
    top: -21px;
    left: 50px;
    cursor: pointer;
}

.volume-bar {
    background: var(--font-color);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: width 0.2s ease-in;
}

    .volume-bar:hover {
        background: var(--primary-color);
    }


/* Elapsed Time & Duration */
.time {
    color: white;
    font-weight: bold;
    user-select: none;
    flex: auto;
    text-align:center;
}

/* Fullscreen */
/*.fullscreen {
  cursor: pointer;
}

.video-fullscreen {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}*/

/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 767px) {

    .video-view-fi-1 {
        display: -ms-flexbox; /* Internet Explorer 10 */
        display: -moz-box; /* Firefox */
        display: -webkit-box; /* Safari and Chrome */
        -webkit-box-orient: vertical;
    }

    .video-view-se-1 {
        -ms-flex-order: 1; /* Internet Explorer 10 */
        -moz-box-ordinal-group: 1; /* Firefox */
        -webkit-box-ordinal-group: 1; /* Safari and Chrome */
        padding: 1% 1% 1% 1%;
        width: 100%;
    }

    .video-view-se-3 {
        -ms-flex-order: 2; /* Internet Explorer 10 */
        -moz-box-ordinal-group: 2; /* Firefox */
        -webkit-box-ordinal-group: 2; /* Safari and Chrome */
        margin-top: 18%;
    }

    .video-view-se-2 {
        -ms-flex-order: 3; /* Internet Explorer 10 */
        -moz-box-ordinal-group: 3; /* Firefox */
        -webkit-box-ordinal-group: 3; /* Safari and Chrome */
        width: 100%;
        max-width: 100%;
        margin-top: 5%;
        padding: 1% 1% 1% 1%;
    }

    .scroll-content {
        height: auto;
        margin-bottom: 0px;
        margin-right: 0px;
        max-height: 540px;
    }

    .player {
        min-width: 0;
        max-width: 95vw;
    }

    .fas {
        font-size: 20px;
    }

    .controls-container {
        height: 50px;
        top: 5%;
    }

    .control-group {
        position: relative;
        /*top: -25px;*/
    }

    .sidebar-inner {
        height: auto;
    }

    .progress-range {
        width: 100%;
        top: 0;
        left: 0;
        border-radius: 0;
    }

    .video-progress-bar {
        border-radius: 0;
    }

    .volume-range {
        width: 50px;
        left: 30px;
        top: -15px;
    }

    .speed,
    .time {
        top: 3px;
    }

    select {
        font-size: 12px;
    }

    .time {
        font-size: 12px;
    }
}

/* Media Query: Large Smartphone (Horizontal) */
/*@media screen and (max-width: 900px) and (max-height: 500px) {
    .player {
        max-height: 95vh;
        max-width: auto;
    }
*/
    /*  video {
    height: 95vh;
    object-fit: cover;
  }*/

    /* .video-fullscreen {
    height: 97.5vh;
    border-radius: 0;
}
  }*/