.editor-container {
	height: 100%;
	padding-right: 0px;
    padding-left: 0px;
	max-width: 100%;
}

.editor-container {
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* position: relative; */
    /* width: 100%; */
    /* min-width: 320px; */
    /* overflow: hidden; */
    -webkit-align-items: stretch;
    align-items: stretch;
	height: calc(100vh - 72px);
}

.editor-container .row {
	margin: 0;
}

.video-editor {
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    height: calc(100vh - 72px);
}

.menuboard {
	height: 64px;
	background-color: rgba(4, 4, 60, 0.89);
	transform: translate3d(0, 0, 0);
}

.operbtndiv {
	display: flex;
	justify-content: center;
	align-items: center;
}

.operbtn {
	margin: 10px;
    padding-top: 6px;
	padding-bottom: 6px;
    padding-right: 45px;
    padding-left: 45px;
    font-size: 13px;
    font-weight: 500;
	background-color: #00BCD4;
    border-color: #00BCD4;
	border-radius: 100px;
}

.processboard {	
	margin: 0;
	height: calc(100vh - 72px);
	background-color: black;
}

.processinfo {
	margin: auto auto;
}

.processbar {
	text-align: center;
}

.processdesc {
	color: white;
    padding-top: 10px;
}

.operationboard {	
	margin: 0;
	#height: calc(100vh - 72px);
}

.operationboard {
	display: -webkit-flex;
    display: flex;
    #-webkit-flex-direction: column;
    #flex-direction: column;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

.displayboard {
	background-color: rgba(0, 0, 0, 0.86);
	padding-left: 0px;
	padding-right: 0px;
	min-height: 100%;
}

.video-wrapper {
	margin-left: 0px;
	margin-right: 0px;
	position: relative;
    display: -webkit-flex;
    display: flex;
	align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-justify-content: center;
    justify-content: center;
	min-height: 100%;
}

.video-holder {
	width: 100%;
	text-align: center;
	overflow: hidden;
	#min-height: 400px;
}

.video-holder .plyr--video {
	width: 100%;
    height: 100%;
}

.video-holder video {
	position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.video-hodler .plyr video {
	width: 100%;
    height: 100%;
}

.video-holder .plyr__video-wrapper {
	width: 100%;
    height: 100%;
}

.video-holder .plyr__video-wrapper .video-fit {
	width: auto;
	height: auto;
	max-width: 100%;
}

.video-center {
	left: 50%;
    #padding: 15px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.video-fit {	
}

.thumb-wrapper {
}

.thumb-wrapper .thumb-inner {
	display: -webkit-flex;
    display: flex;
    padding: 15px 15px;
	background-color: #2c2c2e;
}

.thumb-wrapper .thumb-group {
	position: relative;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 60px;
    margin-left: 24px;
}

.thumb-wrapper .thumb-group:first-child {
    margin-left: 0;
}

@media (min-width: 768px) {
	.thumb-wrapper .thumb-group {
		min-height: 68px;
	}
}

.thumb-wrapper .thumb-frames {
	position: relative;
    display: -webkit-flex;
    display: flex;
    font-size: 0;
    white-space: nowrap;
	height: 100%;
}

@media (min-width: 768px) {
	.thumb-wrapper .thumb-frames div {
		height: 68px;
	}
}

.thumb-wrapper .thumb-frames div {
    position: relative;
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    min-width: 88px;
    overflow: hidden;
    background-color: #000;
}

.thumb-wrapper .thumb-frames div img {
	position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%) scale(1.04);
    transform: translate(-50%,-50%) scale(1.04);
    -o-object-fit: cover;
    object-fit: cover;
}

.thumb-wrapper .thumb-frames div, .no-scroll .thumb-frames div {
    min-width: 0;
}

.thumb-wrapper .thumb-timeline {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    line-height: 255px;
}

.thumb-wrapper .loading {
    display: inline-block;
    background-color: rgba(0,0,0,.8);
    background-size: 25%;
    background-position: center;
    background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;utf8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-eclipse" style="animation-play-state: running; animation-delay: 0s; background: none;"><path stroke="none" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="%2300E0FF" style="animation-play-state: running; animation-delay: 0s;"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animateTransform></path></svg>')
}

.thumb-wrapper .thumb-timeline .mask {
	position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(47,47,52,.62);
}

.thumb-wrapper .thumb-timeline .mask.right {
	right: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.thumb-wrapper .thumb-timeline .mask.left {
	left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.thumb-wrapper .thumb-timeline .slider {
	position: absolute;
    z-index: 1;
    top: -4px;
    bottom: -4px;
    width: 11px;
    background-color: #00ab69;
    cursor: ew-resize;
}

.thumb-wrapper .thumb-timeline .slide-from {
	margin-left: -13px;
    border-radius: 2px 0 0 2px;
}

.thumb-wrapper .thumb-timeline .slide-to {
	margin-left: 2px;
    border-radius: 0 2px 2px 0;
}

.thumb-wrapper .thumb-timeline .ttframe {
	position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
}

.thumb-wrapper .thumb-timeline .ttframe:after {
	content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    display: block;
    border-radius: 2px;
    border: 2px solid #00ab69;
    box-shadow: inset 0 0 0 2px #2c2c2e;
}

.thumb-wrapper .thumb-timeline .ttcurrent {
	top: -15px;
    bottom: -15px;
    width: 1px;
    font-size: 0;
    background-color: #fff;
    opacity: .75;
}

.ttcurrent {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    cursor: default;
    white-space: nowrap;
    z-index: 2;
}

.thumb-wrapper .thumb-timeline .ttcurrent:before {
	content: "";
    display: block;
    height: 7px;
    width: 9px;
    position: absolute;
    top: 0;
    left: -4px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='9' height='7' viewBox='0 0 9 7'%3E%3Cpath d='M9,0L4.5,7L0,0H9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
}

.optionboard {
	background-color: rgba(248, 249, 250, 0.98);
	min-height: 100%;
	padding: 0;
}

.option-holder {
	width: 100%;
	height: 90%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.option-start {
	height: 10%;
	cursor: pointer;
	background-color: rgba(30, 151, 30, 0.71);
}

.option-start:hover {
	background-color: rgba(30, 151, 30, 1.0);
	box-shadow: 0 10px 50px 2px rgba(26, 223, 111, 0.5);
}

.option-start .desc {
	text-align: center;
	color: white;
	font-weight: 600;
	font-size: 24px;
}

.option {
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
	border-bottom: 1px solid black;
}

.option .option-label {
	margin: 10px auto;
	font-weight: bold;
	font-size: 16px;
}

.option .mirror-wrapper {
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	cursor: pointer;
}

.option .cropper-wrapper {
	display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.option .mirror-wrapper label {
	padding-left: 10px;
	font-size: 16px;
	font-weight: bold;
	color: black;
	cursor: pointer;
}

.option .mirror-wrapper label:hover {
	color: black;
}

.option .mirror-wrapper .disable {
	color: gray;
}

.option .towrapper {
	padding: 9px 20px;
    font-size: 15px;
    line-height: 20px;
    color: #999;
}

.rotate {
}

.reverse .active {
	background-color: black;
	color: white;
	font-weight: bold;
}


.border3 {
	border: 1px solid black;
	border-right: none;
}

.right-border {
	border-right: 1px solid black;;
}

.centerall {
	display: flex;
	align-items: center;
}

.videoboard {
	#width: 75%;
}

@media (max-width: 576px) {
	.videoboard {
		width: 100%;
	}
}

.row.videoboard {
	margin: auto;
}

.video-option {
	border-bottom: 1px solid gray;
	border-right: 1px solid gray;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	height: 90px;
}

.optioncenter {
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-option:hover {
	cursor: pointer;
	background: white;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 24px 0px;
	z-index: 1;
	font-weight: bold;
}

.video-option .wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.video-option .wrapper span {
	
}

.video-option .item {
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0;
	padding-right: 0;
}

.video-option .item .icon {
	width: 32px;
	height: 32px;
}

.video-option .item .desc {
	font-size: 16px;
}

.video-option.download {
	background-color: #08b37f;
	color: white;
	font-weight: bold;
}

.video-option.nowatermark {	
	background-color: #1a90a8;
	color: white;
	font-weight: bold;
}

.video-option.continue {
	background-color: #e9ecef;
	color: black;
	font-weight: bold;
}

.video-option.more {
}

.video-option.download:hover {	
	background-color: #06966a;
}

.video-option.nowatermark:hover {
	background-color: #127e94;
}

.video-option.continue:hover {
	background-color: #f8f9fa;
}

.video-option.more:hover {
}

.video-option .icon {
	width: 48px;
	height: 48px;
}

.video-option .docimg {
	width: 48px;
	height: 48px;
}

/*
	video result
*/

.full-width-box .basecontainer {
	height: 100%;
    padding-right: 0px;
    padding-left: 0px;
    max-width: 100%;
	padding-top: 0px;
}

.videocontainer {
	width: 75%;
	padding-left: 10px;
	padding-right: 10px;
	max-height: calc(100vh - 128px);
	margin: auto;
}

@media (max-width: 576px) {
	.videocontainer {
		width: 100%;
		padding-left: 5px;
		padding-right: 5px;
	}
}

body.noscroll {
  height: 100vh;
  overflow-y: hidden;
}

/* video overlay editor */
.overlay {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	background-color: rgb(54, 56, 55);
	overflow: hidden;
	transition: 0.5s;
}

.overlay-content {
	position: relative;
	height: 100%;
	width: 100%;
	text-align: center;
	#margin-top: 30px;
	display: flex;
}

.overlay-content .videowrapper {
	#margin: auto auto;
	height: 100vh;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
}

.overlay-content .videowrapper video {
	max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.overlay-content .videowrapper .cropper-bg {
	background-image: none!important;
}

.overlay-content .videowrapper .cropper-crop-box {
	box-shadow: 0 0 0 999px rgba(0,0,0,.5);
}

.overlay-content .videowrapper .cropper-modal {
	background-color: #0000;
}

.overlay .overlay-menu {
	width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #212529c7;
	background: -webkit-linear-gradient(to bottom, #212529, #21252982 100%);
	background: linear-gradient(to bottom, #212529, #21252982 100%);
	box-shadow: 0 10px 50px 2px #496683;

	text-align: left;
	color: white;
}

.overlay .overlay-menu .return {
	cursor: pointer;
	font-weight: bold;
    font-size: 24px;
}

.overlay .overlay-option, .overlay .overlay-statusbar {
    min-width: 100%;
    #position: fixed;
    #z-index: 100;
    #bottom: 0;
    #left: 0;
    #background-color: #212529c7;
	background: -webkit-linear-gradient(to bottom, #212529, #21252982 100%);
	background: linear-gradient(to bottom, #212529, #21252982 100%);
	box-shadow: 0 10px 50px 2px #496683;

	text-align: center;
	color: white;
}

.overlay .overlay-option:hover, .overlay .overlay-menu:hover {
	#background: -webkit-linear-gradient(to bottom, #132832eb, #3f4c59 100%);
	#background: linear-gradient(to bottom, #132832eb, #3f4c59 100%);
}

.overlay .overlay-option .row, .overlay .overlay-menu .row {
	height: 100%;
	margin: auto auto;
	min-height: 36px;
}

.overlay .overlay-option .format {
	display: inline-block;
    width: auto;
    margin-bottom: 0;
}

.overlay .tbprogress {
	-webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-color: #5cb85c;
}

.overlay .overlay-option .span {
	padding-right: 10px;
	color: white;
	font-size: 12px;
}

.overlay .overlay-option .format select {
	padding: 0 0;
	height: unset;
    width: unset;
	font-size: 12px;
}

.overlay .overlay-option .format select:hover {
	cursor: pointer;
}

.overlay .overlay-option .btnwrapper, .overlay .overlay-statusbar .btnwrapper {
	text-align: center;
    color: white;
    border-radius: 10px;
    border: 1px solid #31a94d;
    padding: 15px;
    margin: 5px;
	background: #0ec23d;
	font-weight: bold;
}

.overlay .overlay-option .btnwrapper:hover, .overlay .overlay-statusbar .btnwrapper:hover {
	cursor: pointer;
}

.overlay .overlay-option .option {
	
	border: 2px solid white;
	border-radius: 30px;
	
	background: #0c0808ab;

	height: 48px;
    display: flex;
    
	align-content: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    
	margin: 0;
    padding: 10px 20px;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}

.overlay .overlay-option .clickable {
}

.overlay .overlay-option .clickable:hover {
	cursor: pointer;
}

.overlay .overlay-option .option ul {
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    margin: 0 0 0 0px;
    list-style: none;
}

.overlay .overlay-option .option .desc {
}

.overlay .overlay-option .option span {
    width: 100%;
    text-align: center;
    #vertical-align: middle;
}

.overlay .overlay-option .option li {
	height: 40px;
    width: 40px;
	background-color: white;
	cursor: pointer;
	color: black;
	font-size: 12px;
}

.overlay .overlay-option .option li:hover {
	-webkit-box-shadow: 0px 0px 9px 5px rgba(54,85,163,0.63);
	-moz-box-shadow: 0px 0px 9px 5px rgba(54,85,163,0.63);
	box-shadow: 0px 0px 9px 5px rgba(54,85,163,0.63);
	transform: translate3d(0, 0, 0);
}

.overlay .overlay-option .option li svg {
	margin: 0 auto;
    display: block;
}

.overlay .overlay-option .option .option-label {
	margin: 10px auto;
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
    color: white;
    font-size: 12px;
}

.overlay .overlay-option .option .option-body {
	display: inline-block;
}

.overlay .overlay-option .reverse-option .active {
	background-color: #0a9e2c;
	color: white;
	font-weight: bold;
}

.overlay .overlay-option .option .mirror-wrapper {
	padding-top: 0;
	padding-bottom: 0px;
	text-align: center;
	cursor: pointer;
}

.overlay-statusbar.animation, .overlay-option.animation {
	background: linear-gradient(to right, #21252982 0%, #dee2e6 5%, #21252982 10%);
    background-size: 200% 100%;
    animation: slide 3s infinite;
}

@-webkit-keyframes pulse {
  
	0% {
		@include transform(scale(1));
	}

	70% {
		@include transform(scale(1));
		box-shadow: 0 0 0 5000px rgba(#5a99d4, 0);
	}
	
	100% {
		@include transform(scale(1));
		box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
	}
}

@keyframes pulse {
  
	0% {
		@include transform(scale(1));
	}

	70% {
		@include transform(scale(1));
		box-shadow: 0 0 0 5000px rgba(#5a99d4, 0);
	}
	
	100% {
		@include transform(scale(1));
		box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
	}
}

@keyframes slide {
	0% {
		background-position: 0% 100%;
	}

	100% {
		background-position: -95% 100%;
	}
}

@-webkit-keyframes slide {
	0% {
		background-position: 0% 100%;
	}

	100% {
		background-position: -95% 100%;
	}
}