.matchframes { *zoom: 1; }
.matchframes:before, .matchframes:after { content: " "; display: table; }
.matchframes:after { clear: both; }

@font-face { font-family: robold; src: url("fonts/Roboto-Bold.eot"); src: url("fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Bold.woff") format("woff"), url("fonts/Roboto-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: romed; src: url("fonts/Roboto-Medium.eot"); src: url("fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Medium.woff") format("woff"), url("fonts/Roboto-Medium.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: rocond; src: url("fonts/Roboto-Condensed.eot"); src: url("fonts/Roboto-Condensed.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Condensed.woff") format("woff"), url("fonts/Roboto-Condensed.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: roreg; src: url("fonts/Roboto-Regular.eot"); src: url("fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Regular.woff") format("woff"), url("fonts/Roboto-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/Roboto-Thin1.woff) format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(fonts/Roboto-Light1.woff) format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url(fonts/Roboto-Regular1.woff) format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/Roboto-Bold1.woff) format('woff'); }

* { margin: 0; padding: 0; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { * { -webkit-text-size-adjust: none; } }
button::-moz-focus-inner { padding: 0; border: 0; }

input[type="submit"]::-moz-focus-inner { padding: 0; border: 0; }

body { font-family: "Myriad Pro",Arial,sans-serif; font-weight: normal; font-size: 12px; line-height: 1.4; background: #292A30; }

a img, fieldset { border: none; }
a { text-decoration: none; }

/* sticky footer */
html, body { height: 100%; }
.wrap { min-height: 100%; margin: 0 auto -83px; }
footer, .push { height: 83px; }
/* / sticky footer */

.contenttop { height: 222px; background: #3E4046; padding: 8px 15px 0 15px; border-bottom: 3px solid #D0565D; }

.content { padding: 15px; }
.restore .content { padding-top: 8px; }

.icon-download { background: url('../img/icons-s9986c51ffe.png') 0 -322px no-repeat; width: 19px; height: 24px; }

.icon-locked { background: url('../img/icons-s9986c51ffe.png') 0 -809px no-repeat; width: 13px; height: 13px; }
.icon-locked.is-unlocked { background: url('../img/icons-s9986c51ffe.png') 0 -754px no-repeat; width: 13px; height: 14px; position: relative; top: -5px; }

.icon-detect { background: url('../img/icons-s9986c51ffe.png') 0 -572px no-repeat; width: 25px; height: 25px; }

.icon-check { background: url('../img/icons-s9986c51ffe.png') 0 -721px no-repeat; width: 29px; height: 23px; }

.icon-ready { background: url('../img/icons-s9986c51ffe.png') 0 -958px no-repeat; width: 16px; height: 12px; }
.savethematch .icon-ready{
	top: -2px;
	width: 29px;
	height: 23px;
	background-position: 0 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAXCAYAAAD3CERpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MEE5NTg4NDIyMzgxMUUzQjNDOEY5M0IwQjNBODAyRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5MEE5NTg4NTIyMzgxMUUzQjNDOEY5M0IwQjNBODAyRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjkwQTk1ODgyMjIzODExRTNCM0M4RjkzQjBCM0E4MDJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkwQTk1ODgzMjIzODExRTNCM0M4RjkzQjBCM0E4MDJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dfjruwAAAKpJREFUeNq8lEsOgCAMRGEOrS505Ua9dI0uDAoo/UliDGDnWTolEFHwevpxpdI6gtMYpo3SdzrgCazN4Q0sreMP4HM/HoX9A2h+vBzgMncRWhEusJjpm9UtgBn0y+oWwBu0xeoWwAvaanUL4Nkyx/3ocSvVgGemb5sewOt4LcEtWuB8bAHMWkYD5sRCEyyNgVZE8pPQiEnLAamopv6QZKN1Orh1s2itXYABAE7owFCwizbYAAAAAElFTkSuQmCC);
}
.icon-upload { background: url('../img/icons-s9986c51ffe.png') 0 -924px no-repeat; width: 19px; height: 24px; }

.icon-processing { background: url('../img/icons-s9986c51ffe.png') 0 -671px no-repeat; width: 15px; height: 15px; }

.icon-uploading { background: url('../img/icons-s9986c51ffe.png') 0 -1124px no-repeat; width: 9px; height: 13px; }

.icon-processingbig { background: url('../img/icons-s9986c51ffe.png') 0 -607px no-repeat; width: 29px; height: 29px; display: inline-block;}

.icon-uploadingbig { background: url('../img/icons-s9986c51ffe.png') 0 -832px no-repeat; width: 25px; height: 36px; }

.icon-uploadingbig1 { background: url('../img/icons-s9986c51ffe.png') 0 -878px no-repeat; width: 25px; height: 36px; }

#chromaSwitch { position: absolute; width: 24px; height: 24px; top: 14px; right: 12px; cursor: pointer; background: url(../img/color_wheel.png); -webkit-filter: grayscale(100%);}
#chromaSwitch.enabled { -webkit-filter: none; }

.signout { position: absolute; top: 18px; right: 48px; }
.signout a { text-transform: none; font-size: 13px; color: #777c89; }
.signout a:visited { color: #777c89; }

.videos { font-size: 0; }
.videos .videos__add { position: absolute; right: 15px; top: 0; display: block; width: 164px; background: #4D4F54; height: 53px; line-height: 53px; text-align: left; padding-left: 15px; text-transform: uppercase; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; }
.videos .videos__add:hover { background: #595c61; }
.videos .videos__add i { background: url('../img/icons-s9986c51ffe.png') 0 -1090px no-repeat; width: 24px; height: 24px; vertical-align: middle; display: inline-block; margin-right: 13px; position: relative; top: -2px; }
.videos .videos__header { margin-bottom: 11px; }
.videos .videos__header h2 { font-size: 32px; font-family: 'Roboto', sans-serif; font-weight: 100; color: #f0f1f3; display: inline-block; margin-right: 15px; }
.videos .videos__header nav { display: inline-block; font-size: 16px; color: #777c89; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0; }
.videos .videos__header nav a { color: #777c89; text-decoration: none; padding-right: 15px; margin-right: 9px; font-size: 16px; position: relative; }
.videos .videos__header nav a.is-active { color: #fff; }
.videos .videos__header nav a:before { content: ' '; position: absolute; right: 0; bottom: 2px; border-right: 1px solid #4F525A; height: 15px; }
.videos .videos__header nav a:last-child:before { display: none; }
.videos .videos__header nav i { display: inline-block; margin-right: 8px; }
.videos .videos__header .videos__uploaded i { background: url('../img/icons-s9986c51ffe.png') 0 -1124px no-repeat; width: 9px; height: 13px; }
.videos .videos__header .videos__uploaded.is-active i { background: url('../img/icons-s9986c51ffe.png') 0 -1170px no-repeat; width: 9px; height: 13px; }
.videos .videos__header .videos__ready i { background: url('../img/icons-s9986c51ffe.png') 0 -958px no-repeat; width: 16px; height: 12px; }
.videos .videos__header .videos__ready.is-active i { background: url('../img/icons-s9986c51ffe.png') 0 -1002px no-repeat; width: 16px; height: 12px; }
.videos .videos__header .videos__processing i { background: url('../img/icons-s9986c51ffe.png') 0 -671px no-repeat; width: 15px; height: 15px; position: relative; top: 1px; }
.videos .videos__header .videos__processing.is-active i { background: url('../img/icons-s9986c51ffe.png') 0 -671px no-repeat; width: 15px; height: 15px; }
.videos .videos__scroll { overflow: hidden; height: 185px; padding-top: 8px; overflow-y: hidden; overflow-x: auto; white-space: nowrap; padding-left: 4px; margin-left: -4px; }
.videos .videos__scroll .video { margin-bottom: 100px; cursor: pointer; }
.bvideo.is-processing + .videos { display: none; }
.bvideo.is-ready + .videos { display: none; }

.video { display: inline-block; width: 179px; vertical-align: top; padding-right: 15px; font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: 400; margin-bottom: 15px; }
.video .video__pic { position: relative; z-index: 2; }
.video .video__pic img, .video .video__pic canvas { display: block; }
.video .video__pic canvas { position: absolute; }
.video .video__status { height: 3px; background: #777C88; position: relative; z-index: 2; }
.video .video__status i { display: block; height: 3px; background: #F0F1F3; }
.video .video__title { width: 179px; overflow: hidden; font-size: 16px; color: #a7a8ad; font-weight: 400; padding-top: 2px; position: relative; z-index: 2; }
.video .video__textstatus { color: #777c89; font-size: 13px; text-transform: uppercase; position: relative; z-index: 2; font-weight: 600; }
.video .video__textstatus i { display: inline-block; margin-right: 3px; }
.video.is-uploading .video__textstatus i { background: url('../img/icons-s9986c51ffe.png') 0 -1124px no-repeat; width: 9px; height: 13px; }
.video.need-resume .video__status i { background: #FF8870; }
.video.need-resume.is-active .readd { color: #3e4047; }
.video.is-ready .video__status { background: #007691; }
.video.is-ready .video__status i { display: none; }
.video.is-ready .video__textstatus i { background: url('../img/icons-s9986c51ffe.png') 0 -958px no-repeat; width: 16px; height: 12px; }
.video.is-processing .video__status { background: #007691; }
.video.is-processing .video__status i { width: 100% !important; background: #F0F1F3; }
.video.is-processing .video__textstatus i { background: url('../img/icons-s9986c51ffe.png') 0 -671px no-repeat; width: 15px; height: 15px; position: relative; top: 3px; }
.video.is-active { position: relative; }
.video.is-active:before { z-index: 1; position: absolute; left: -4px; top: -5px; content: ' '; background: url('../img/icons-s9986c51ffe.png') 0 -356px no-repeat; width: 188px; height: 179px; }
.video.is-active .video__pic { box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); }
.video.is-active .video__title { color: #fff; }
.video.is-active .video__textstatus { color: #3e4047; }
.video.is-active.is-ready .video__textstatus i { background: url('../img/icons-s9986c51ffe.png') 0 -980px no-repeat; width: 16px; height: 12px; }
.video.is-active.is-processing .video__textstatus i { background: url('../img/icons-s9986c51ffe.png') 0 -696px no-repeat; width: 15px; height: 15px; }
.video.is-active.is-uploading .video__textstatus i { background: url('../img/icons-s9986c51ffe.png') 0 -1147px no-repeat; width: 9px; height: 13px; }
.video .video__remove { position: absolute; background: url('../img/icons-s9986c51ffe.png') 0 -1046px no-repeat; width: 12px; height: 12px; right: 0; top: 4px; cursor: pointer; }
.video.is-button { width: 179px; }
.video.is-button label { cursor: pointer; }
.video.is-button .video__textstatus { text-transform: none; font-size: 13px; color: #777c89; white-space: normal; padding-top: 5px; }
.video.is-button .video__pic { width: 179px; height: 110px; background: #4D4F54; line-height: 110px; text-transform: uppercase; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 600; text-align: center; }
.video.is-button .video__pic i { background: url('../img/icons-s9986c51ffe.png') 0 -1090px no-repeat; width: 24px; height: 24px; vertical-align: middle; display: inline-block; margin-right: 13px; }

#project-tabs { margin-top: 24px }
#project-tabs #tab { padding-top: 0; }

.bvideo { margin: 10px 0 0 0; position: relative; display: inline-block; width: 100%; }
.bvideo .error { display: none; }
.bvideo.need-resume .error { display: block; }
.bvideo .bvideo__pic { float: left; margin-right: 15px; }
.bvideo .bvideo__pic label[for] { cursor: pointer; }
.bvideo .bvideo__pic.dragover > .overlay { width: 480px; height: 272px; position: absolute; background-color: #000; opacity: 0.3; }
.bvideo .bvideo__pic img, .bvideo .bvideo__pic canvas , .bvideo .bvideo__pic video { display: block; }
.bvideo .bvideo__pic canvas { position: absolute; }
.bvideo .bvideo__pic .debug_frame_number { position: absolute; color: #fff; }
.bvideo .bvideo__status { height: 3px; background: #777C88; position: relative; z-index: 2; }
.bvideo .bvideo__status i { display: block; height: 3px; background: #F0F1F3; }
.bvideo.need-resume .bvideo__status i { background: #FF8870; }
.bvideo.is-uploaded .bvideo__status { background: #F0F1F3; }
.bvideo.is-uploaded .bvideo__status i { display: none; }
.bvideo.is-ready .bvideo__status { background: #007691; }
.bvideo.is-ready .bvideo__status i { display: none; }
.bvideo.is-ready .bvideo__pic video { display: inline-block; }
.bvideo.is-ready .bvideo__status { display: none; }
.bvideo.is-processing .bvideo__status { background: #007691; }
.bvideo.is-processing .bvideo__status i { width: 100% !important; background: #F0F1F3; }
.bvideo .bvideo__remove { font-size: 13px; bottom: -2em; left: 495px; top: 60px; font-size: 16px; color: #777c89; font-family: 'Roboto', sans-serif; font-weight: 700; cursor: pointer; text-transform: uppercase; display: flex;}
.bvideo .bvideo__remove i { background: url('../img/icons-s9986c51ffe.png') 0 -778px no-repeat; width: 21px; height: 21px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.bvideo .bvideo__remove:hover { color: #fff; }
.bvideo .bvideo__title { font-size: 40px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; font-family: 'Roboto', sans-serif; font-weight: 100; color: #fff; }
.bvideo .bvideo__content { position: absolute; bottom: 0; right: 0; left: 495px; color: #777c89; }
.bvideo.is-ready .bvideo__content { left: 978px; }
.bvideo .bvideo__content h3 { font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 32px; margin-bottom: 3px; }
.bvideo .bvideo__content p { font-size: 13px; line-height: 1.4; }

.addvideo { width: 480px; }
.addvideo label { cursor: pointer; }
.addvideo .video__textstatus { text-transform: none; font-size: 13px; color: #777c89; white-space: normal; padding-top: 5px; }
.addvideo .video__pic { width: 480px; height: 272px; background: #4D4F54; line-height: 272px; text-transform: uppercase; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 600; text-align: center; }
.addvideo .video__pic i { background: url('../img/icons-s9986c51ffe.png') 0 -1090px no-repeat; width: 24px; height: 24px; vertical-align: middle; display: inline-block; margin-right: 13px; }
.addvideo .video__pic.dragover { background-color: black; }

.error { background: #3E4046; border-left: 3px solid #FF8870; padding: 10px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 13px; color: #a7a8ad; margin: 5px 0; width: 60%; }
.error strong { display: block; font-family: 'Roboto', sans-serif; font-weight: 600; }
.project-error.error { width: 457px; }

.readd { color: #FF8870; text-transform: uppercase; }

.status { font-size: 13px; text-transform: uppercase; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 600; max-width: 300px; }
.status a { color: #fff; text-decoration: none; }
.status i { vertical-align: middle; margin-right: 4px; display: inline-block; }
.is-uploaded .status, .is-ready .status { cursor: pointer; }
.is-processing .status, .is-uploading .status { color: #777c89; }
.is-processing .status i, .is-uploading .status i { margin-bottom: 7px; }
.is-uploading .status i { margin-bottom: 0; vertical-align: middle; position: relative; top: 6px; margin-left: 7px; margin-right: 11px; }
.status strong { font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 64px; vertical-align: middle; }
.status.button__border { border: 1px solid #4D4F54; padding: 10px; }

.doublevideo { margin-bottom: 50px; margin-top: 20px; min-width: 1000px; overflow: hidden; }
.restore .doublevideo { margin: 0; display: flex; min-width: auto;}
/* .doublevideo .doublevideo__col { position: relative; float: left; width: 49.5%; } */
.doublevideo .doublevideo__col img, .doublevideo .doublevideo__col video { width: 100%; }
.doublevideo .doublevideo__col:first-child { margin-right: 1%; }
.restore .doublevideo .doublevideo__col { flex:1; width: auto;}
.doublevideo h3 { font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 32px; color: #f0f1f3; margin-bottom: 5px; }
.doublevideo h3 span { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 13px; color: #777c89; margin-left: 15px; text-transform: uppercase; }

.controls { margin-top: 5px; }
.controls > div { margin-right: 10px; vertical-align: middle; display: inline-block; cursor: pointer; }
.controls > div:active { position: relative; top: 1px; }
.controls .controls__time { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 13px; color: #777c89; margin-left: 15px; text-transform: uppercase; cursor: default; }
.controls .controls__back { background: url('../img/icons-s9986c51ffe.png') 0 -260px no-repeat; width: 23px; height: 21px; }
.controls .controls__forw { background: url('../img/icons-s9986c51ffe.png') 0 -229px no-repeat; width: 23px; height: 21px; }
.controls .controls__play { background: url('../img/icons-s9986c51ffe.png') 0 -291px no-repeat; width: 16px; height: 21px; }
.controls .controls__pause { background: url('../img/icons-s9986c51ffe.png') 0 -545px no-repeat; width: 18px; height: 17px; }

.download, .detect, .savethematch { text-transform: uppercase; font-size: 13px; margin-top: 6px; height: 30px; line-height: 30px; font-family: "robold",sans-serif; font-weight: normal; }
.download a, .detect a, .savethematch a { color: #fff; text-decoration: none; }
.download i, .detect i, .savethematch i { margin-right: 6px; vertical-align: middle; display: inline-block; position: relative; }
.savethematch{
	margin-top: 0;
	margin-right: 15px;
}

.matchframes { background: #151616; margin: 0 -15px; clear: both; overflow: hidden; overflow-y: visible; -ms-overflow-x: hidden; overflow-x: hidden; }
/* .matchframes .savethematch { float: right; margin-right: 20px; } */
.matchframes .matchframes__scan { background: #3E4046; border-top: 1px solid #54565D; margin-top: 7px; position: relative; overflow: hidden; }
.matchframes .matchframes__scan .matchframes__logo, .content .matchframes__logo { position: fixed; bottom: 45px; right: 20px; background: url('../img/icons-s9986c51ffe.png') 0 -93px no-repeat; width: 173px; height: 38px; }
.matchframes .matchframes__scan .detect { margin: 5px 0 6px 15px; }
.matchframes .matchframes__scan .scans__wrap { margin-top: 3px; }
.matchframes .matchframes__header { margin: 5px 0; height: 23px; line-height: 23px; padding-left: 15px; color: #727782; font-size: 13px; text-transform: uppercase; font-family: "robold",sans-serif; }
.matchframes .matchframes__header > span, .matchframes .matchframes__header strong { font-weight: normal; }
.matchframes .matchframes__header small { font-family: "roreg",sans-serif; font-size: 13px; margin-right: 2px; }
.matchframes .matchframes__header strong { color: #A7A8AD; }
.matchframes .matchframes__header .name { display: inline-block; width: 60px; }
.matchframes .matchframes__header .frame__number { color: #727782; background-color: transparent; border: 0; outline: 0; font-family: "robold",sans-serif; font-size: 13px; font-weight: normal; }
.matchframes .matchframes__scrollocked { width: 150px; font-size: 13px; text-transform: uppercase; color: #777c89; display: inline-block; font-weight: bold; position: absolute; right: 0; cursor: pointer; }
.matchframes .matchframes__scrollocked i { display: inline-block; margin-right: 5px; vertical-align: middle; position: relative; top: -2px; }
.matchframes .matchframes__scrollocked i.is-unlocked { top: -3px; left: -4px; }

.vstatus { height: 15px; background: #000; margin: 0 -15px 4px -15px; position: relative; }
.vstatus .vstatus__range { background: #777C88; box-shadow: 0 0 6px rgba(119, 124, 136, 0.7); float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 15px; }
.vstatus .vstatus__range.is-red { background: #F78870; box-shadow: 0 0 6px rgba(247, 136, 112, 0.7); }
.vstatus .vstatus__range.is-white { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
.vstatus .vstatus__range.is-blue { background: #1C7692; box-shadow: 0 0 6px rgba(28, 118, 146, 0.7); }
.vstatus .vstatus__range.is-black { background: #000; box-shadow: 0 0 6px rgba(0, 0, 0, 0.7); }
.vstatus__redthing { position: absolute; height: 15px; top: 0; width: 2px; background: #E71E2E; z-index: 2; }
.vstatus__current_moment { position: absolute; z-index: 1; background: #FFF; box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 15px; pointer-events: none; }

.frames__wrap { position: relative; }
.frames { width: 100%; position: relative; margin-bottom: 3px; height: 82px; white-space: nowrap; vertical-align: top; font-size: 0; background: #3E4047; display: inline-block; overflow: hidden; }
.frames .frame { width: 146px; height: 82px; font-size: 12px; margin-right: 1px; display: inline-block; position: relative; z-index: 20; }
.frames .frame.is-overlayed:before { background: rgba(255, 255, 255, 0.4); content: ' '; position: absolute; right: 0px; top: 0; left: 0; bottom: 0; }
.frames .frame.is-done:after { content: ' '; height: 20px; left: 0; bottom: 20px; right: -1px; background: #FDCC56; height: 2px; border-bottom: 1px solid #FEEAB7; border-top: 1px solid rgba(0, 0, 0, 0.7); z-index: 200; position: absolute; }
.frames .frame.is-usethisscan { z-index: 1000; }
.frames .frame:hover { z-index: 1000; }

.matchframes__original .frames__title { display: none; }
.matchframes__scan .frames__wrap .frames__title { position: absolute; left: 0; bottom: 4px; height: 20px; line-height: 20px; font-size: 13px; color: #969aa3; background: rgba(0, 0, 0, 0.3); z-index: 100; padding-right: 10px; font-family: "roreg",sans-serif; }
.matchframes__scan .frames__wrap:hover .frames__title { color: #fff; }

.frame__cursor { position: absolute; }
.frame__cursor .border { position: absolute; top: -3px; left: -3px; border: 3px solid #777C88; width: 146px; height: 82px; z-index: 30; }
.frame__cursor.superselect { z-index: 10000; }
.frame__cursor.superselect .border { border-color: #FFFFFF}
.frame__cursor.superselect .superselect__left { position: absolute; right: 100%; top: -3px; bottom: -3px; width: 0px; background: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; overflow: hidden; }
.frame__cursor.superselect .superselect__left i { background: url('../img/icons-s9986c51ffe.png') 0 -1024px no-repeat; width: 12px; height: 12px; position: absolute; left: 6px; top: 38px; }
.frame__cursor.superselect:hover .superselect__left, .frame__cursor.superselect:hover .superselect__right { width: 24px; }
.frame__cursor.superselect .superselect__right { position: absolute; left: 100%; top: -3px; bottom: -3px; width: 0px; background: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; overflow: hidden; cursor: pointer; }
.frame__cursor.superselect .superselect__right i { background: url('../img/icons-s9986c51ffe.png') 0 -1068px no-repeat; width: 12px; height: 12px; position: absolute; left: 6px; top: 38px; }

.matchframes__scan .frame__cursor.superselect:hover .usethisscan, .usethisscan:hover { display: block; }
.usethisscan { position: absolute; top: -3px; left: -3px; width: 146px; height: 82px; border: 3px solid #FFFFFF; z-index: 500; display: none; }
.usethisscan .usethisscan__title { background: #fff; color: #3e4047; font-size: 13px; text-transform: uppercase; height: 22px; line-height: 22px; position: absolute; bottom: -25px; left: -3px; right: -3px; padding-left: 3px; font-family: "robold",sans-serif; cursor: pointer; }
.usethisscan .usethisscan__title i { background: url('../img/icons-s9986c51ffe.png') 0 -646px no-repeat; width: 15px; height: 15px; display: inline-block; margin-right: 5px; vertical-align: middle; position: relative; top: -2px; }


.MODE_MASTER .video-scan { display: none; }
.MODE_MASTER .matchframes #savepair { display: none; }
.MODE_MASTER .matchframes #deletepair { display: none; }
.MODE_MASTER .matchframes .matchframes__header.scan { display: none; }
.MODE_MASTER .matchframes .matchframes__scrollocked { display: none; }
.MODE_MASTER .matchframes #show-all-scans { display: none; }
.MODE_MASTER .matchframes .scans__wrap { display: none; }
.MODE_MASTER .superselect__left { display: none; }
.MODE_MASTER .superselect__right { display: none; }
/* .MODE_MASTER #find-frame { display: block; } */

.MODE_SINGLE_SCAN .matchframes #savepair { display: block; }
.MODE_SINGLE_SCAN .matchframes #deletepair { display: block; }
.MODE_SINGLE_SCAN .matchframes .matchframes__scrollocked { display: block; }
.MODE_SINGLE_SCAN .matchframes #show-all-scans { display: block; }
.MODE_SINGLE_SCAN .matchframes .scans__wrap { display: none; }
.MODE_SINGLE_SCAN[scrolllock=false] .superselect__left { display: none; }
.MODE_SINGLE_SCAN[scrolllock=false] .superselect__right { display: none; }
.MODE_SINGLE_SCAN #find-frame { display: none; }

.MODE_ALL_SCANS .matchframes #savepair { display: none; }
.MODE_ALL_SCANS .matchframes #deletepair { display: none; }
.MODE_ALL_SCANS .matchframes .matchframes__header.scan { display: none; }
.MODE_ALL_SCANS .matchframes .matchframes__scrollocked { display: none; }
.MODE_ALL_SCANS .matchframes #show-all-scans { display: none; }
.MODE_ALL_SCANS .matchframes .scans__wrap { display: block; }
.MODE_ALL_SCANS .superselect__left { display: none; }
.MODE_ALL_SCANS .superselect__right { display: none; }
.MODE_ALL_SCANS #find-frame { display: none; }

.login { background: #3E4047; position: relative; height: 100%; min-height: 848px; }
.login .login__botlogo { position: absolute; width: 100%; text-align: center; bottom: 20px; }
.login .login__botlogo i, .login .login__botlogo a { background: url('../img/icons-s9986c51ffe.png') 0 -141px no-repeat; width: 81px; height: 78px; display: inline-block; }
.login .login__head { padding: 72px 0 66px 0; text-align: center; background: #19191D; border-bottom: 3px solid #868992; }
.login .login__head .login__logo { background: url('../img/icons-s9986c51ffe.png') 0 0 no-repeat; width: 558px; height: 83px; display: inline-block; }
.login .login__content { width: 460px; margin: 0 auto; }

.form { margin-top: 122px; }
.form .form__submit { margin-top: 10px; background: #4D4F55; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; color: #fff; text-decoration: none; display: inline-block; height: 56px; line-height: 56px; padding: 0 21px 0 14px; }
.form .form__submit:hover { background: #656870; }
.form .form__submit i { display: inline-block; margin-right: 10px; position: relative; top: 5px; }

.field { margin-bottom: 40px; }
.field .input { background: #292A31; color: #F0F1F3; display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 8px 10px; border-style: none; font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 22px; line-height: 1; border-bottom: 3px solid #3E4047; outline: none; }
.field .input.is-ok { border-bottom: 3px solid #1C7692; }
.field .input.is-error { border-bottom: 3px solid #F78870; }
.field label { display: block; line-height: 1; font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 32px; color: #f0f1f3; margin-bottom: 10px; }
.field label span { text-transform: uppercase; font-size: 13px; margin-left: 15px; font-family: 'Roboto', sans-serif; font-weight: 600; }
.field label span.is-error { color: #fc896b; }

.listvideos { background: #292A31; margin: -15px -15px 0 -15px;position: relative;padding: 15px; }
.listvideos h2 { font-size: 32px; font-family: 'Roboto', sans-serif; font-weight: 100; color: #f0f1f3; font-weight: 100; margin-bottom: 20px; }
.listvideos h2 span { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 13px; color: #6F737F; text-transform: uppercase; margin-left: 10px; }
.is-newbackground { background: #3E4047; }
.is-newbackground .listvideos{
	margin-bottom: 80px;
}
.is-newbackground .content{
	position: relative;
}

.videoitem { margin-bottom: 40px; display: inline-block; width: 100%; }
.videoitem.is-new .videoitem__pic img { border-bottom-color: #fff; }
.videoitem .videoitem__pic { margin-right: 15px; float: left; }
.videoitem .videoitem__pic img { border-bottom: 3px solid #777C88; }
.videoitem .videoitem__meta { font-size: 13px; color: #777c89; font-weight: normal; }
.videoitem .videoitem__meta strong { font-family: 'Roboto', sans-serif; font-weight: 600; color: #fff; text-transform: uppercase; }
.videoitem .videoitem__title { font-size: 16px; color: #a7a8ad; font-weight: normal; font-family: 'Roboto', sans-serif; font-weight: 600; text-decoration: none; }
.videoitem .videoitem__title a { color: #a7a8ad; text-decoration: none; }
.videoitem .videoitem__title b { display: block; margin-top: 0px; font-size: 13px; color: #777c89; font-weight: normal; text-transform: uppercase; }


.restore{
	background: #3E4047;
}
.restore .content{
	background: #292A30;
	padding-bottom: 0;
}
.matchframes br{
	display: none;
}
.doublevideo__col .detect{
	position: relative;
	width: 100%;
	text-align: center;
	justify-content: center;
}
.matchframes{position: relative;}

#diff-timeline { position: relative; min-height: 50px; }
.diff-buttons { position: absolute; right: 0; top: -60px; }
.diff-button { display: inline-block; }

.diffrow { margin: 20px 0 20px 0; padding: 30px 0 30px 0; position: relative; overflow-x: hidden; }
.diffrow img { display: block; }
.diffrow .diffrow__zoom { position: absolute; bottom: 7px; right: 0; }
.is-timelinepage .diffrow .diffrow__zoom { bottom: 7px; }
.diffrow .diffrow__zoom .diffrow__zoomplus, .diffrow .diffrow__zoom .diffrow__zoomminus { background: url('../img/icons-sa5291731fd.png') 0 -726px no-repeat; width: 11px; height: 11px; display: inline-block; vertical-align: middle; margin-left: 7px; cursor: pointer; }
.diffrow .diffrow__zoom .diffrow__zoomplus.is-disabled, .diffrow .diffrow__zoom .diffrow__zoomminus.is-disabled { opacity: 0.4; cursor: default; }
.diffrow .diffrow__zoom .diffrow__zoomminus { background: url('../img/icons-sa5291731fd.png') 0 -772px no-repeat; width: 11px; height: 11px; margin-right: 7px; }
.diffrow .diffrow__zoom span { text-transform: uppercase; color: #777c88; font-weight: 400; display: inline-block; vertical-align: middle; position: relative; }
.diffrow .diffrow__zoom span strong { font-weight: 600; }
.diffrow .diffrow__marker { position: absolute; left: 50%; margin-left: -7px; background: url('../img/icons-sa5291731fd.png') 0 -121px no-repeat; width: 13px; height: 60px; top: -20px; cursor: pointer; }
.diffrow .diffrow__marker.thick { background: url('../img/icons-sa5291731fd.png') 0 -121px no-repeat; }
.diffrow .diffrow__marker.thin { background: url('../img/icons-sa5291731fd.png') -16px -121px no-repeat; }
.diffrow .diffrow__hideprecise { position: absolute; right: 0; top: -21px; font-weight: 600; font-size: 13px; color: #777c88; text-transform: uppercase; cursor: pointer; }
.is-timelinepage .diffrow .diffrow__hideprecise { top: -25px; }
.diffrow .diffrow__hideprecise.is-hiddenprecise i { background: url('../img/icons-sa5291731fd.png') 0 -216px no-repeat; width: 13px; height: 13px; }
.diffrow .diffrow__hideprecise i { background: url('../img/icons-sa5291731fd.png') 0 -239px no-repeat; width: 13px; height: 13px; vertical-align: middle; display: inline-block; margin-right: 4px; }
.diffrow .diffrow__hideprecise span { display: inline-block; vertical-align: middle; }
.diffrow .diffrow__filmstrip { position: relative; z-index: 2; overflow: hidden; white-space: nowrap; }
.diffrow .diffrow__filmstrip:last-child .diffrow__title { top: auto; bottom: -18px; }
.is-timelinepage .diffrow .diffrow__filmstrip:last-child .diffrow__title { bottom: -22px; }
.diffrow .diffrow__title { position: absolute; top: -20px; font-size: 13px; color: #777c88; font-weight: 300; left: 10px; }
.is-timelinepage .diffrow .diffrow__title { top: -24px; }
.diffrow .diffrow__title strong { font-weight: 600; margin-right: 10px; }
.diffrow .timerange div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 30px; }
.diffrow .timerange .divint {position: absolute; text-align: center; width: 100%; line-height: 30px; background: #00aec9; }
.diffrow .timerange .selected {border-style: solid; border-color: #fff; line-height: 25px; }
.diffrow .timerange .selected img { height: 56.3%!important; }
.diffrow .timerange .divint img {vertical-align: middle; display: initial; height: 45%}
.diffrow .timerange div.is-white { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
.diffrow .timerange div.is-blue { background: #1C7692; box-shadow: 0 0 6px rgba(28, 118, 146, 0.7); }
.diffrow .timerange div.is-lightblue { background: #56CCFD; box-shadow: 0 0 6px rgba(86, 204, 253, 0.7); }
.diffrow .timelinediff { position: absolute; z-index: 1; height: 71px; background: #F78870; margin-top: -3px; }
.diffrow .timerange { display: inline-block; height: 30px; position: relative; }
.diffrow .movedBubble .movedBubbleInternal {display: none; }
.diffrow .movedBubble .selected {position: absolute; border-style: solid; border-color: #fff; display: inline-block; bottom: 70px; font-weight: bold; background: #fff;
	display: block!important; box-sizing: border-box; }
.diffrow.loading { opacity: 0.2; }

.diffrow-inner { }
#diff-scroll { position: relative; }

.clear { clear: both; }

.theredthing { position: absolute; top: 0; bottom: 0; z-index: 20; width: 5px; border-left: 1px solid #eb212e; cursor: move; }
.theredthing:hover { background: rgba(235, 33, 46, 0.5); }

.curtain { position: absolute; width: 480px; height: 272px; background-image: url('../img/noscene.png'); }
.spinner-curtain { position: absolute; width: 480px; height: 272px; background-color: #000; opacity: 0.8 }
.spinner-curtain .spinner { width: 480px; height: 272px; background-image: url('../img/video-spinner.gif'); }

#diff-timeline .processing { margin-top: 23px; }

.l-controls { background: #3e4047; border-top: 5px solid #2b2c33; height: 78px; min-width: 1200px; }
.diff__controls { padding: 17px; position: relative; }
.diff__controls h2 { font-size: 32px; font-family: 'Roboto', sans-serif; font-weight: 100; color: #747985; display: inline-block; margin-right: 15px; cursor: pointer; }
.diff__controls .logo { position: absolute; right: 20px; bottom: 7px; background: url('../img/icons-sa5291731fd.png') 0 0 no-repeat; width: 173px; height: 38px; font: 0/0 a; text-shadow: none; color: transparent; }
.diff__controls .remove { font-size: 16px; color: #777c89; font-family: 'Roboto', sans-serif; font-weight: 700; cursor: pointer; margin: 10px 0 0 8px; width: 90px; }
.diff__controls .remove i { background: url('../img/icons-s9986c51ffe.png') 0 -778px no-repeat; width: 21px; height: 21px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.diff__controls .remove:hover { color: #fff; }

.detail { position: absolute; margin: 10px 50%; }
.detail > div { margin-left: -50% }
.detail .detail__more, .detail .detail__less { display: inline-block; font-size: 13px; text-transform: uppercase; color: #777c88; line-height: 1.1; vertical-align: bottom; font-weight: 600; }
.detail .detail__range { display: inline-block; position: relative; vertical-align: baseline; margin: 0 4px; background: url('../img/icons-sa5291731fd.png') 0 -74px no-repeat; width: 370px; height: 18px; }
.detail .detail__range .detail__rangefill { background: url('../img/icons-sa5291731fd.png') 0 -93px no-repeat; width: 370px; height: 18px; position: absolute; left: 0; top: 0; }
.detail .detail__range .detail__rangethumb { background: url('../img/icons-sa5291731fd.png') 0 -747px no-repeat; width: 6px; height: 15px; position: absolute; right: -2px; bottom: -3px; cursor: pointer; }
.detail .detail__range .detail__rangevalue { position: absolute; width: 3em; text-align: center; right: -1.5em; top: -18px; color: #777c88; font-weight: 300; }

/* PLAYER COMPONENT */
:root {
  --body-bg: #292A30;
  --gray: #777c89;
  --text-accent: #fff;
  --bg: #3E4047;
  --unit: 10px;
  --half: calc(0.5 * var(--unit));
  --thumb: var(--unit);
  --orange: #FF8870;
}
html{
	color: var(--gray);
	font-size: var(--unit);
}
.orange-bg{
	background: var(--orange);
}
.generic-title {
	font-size: 3.2rem;
	overflow: hidden;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	color: #fff;
	color: var(--text-accent);
}

.generic-input{
	background: none;
    border: none;
    color: var(--gray);
    padding: var(--half);
    width: 9ch;
}
.generic-input:focus{
	outline: 1px solid;
}
.flex-list{
	display: flex;
}
.flex__column--space-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.projects-list{
	width: 100%;
	overflow: hidden;
	padding: calc(0.7 * var(--unit));
}

.player__controls{
	display: flex;
	align-items: center;
}
.player__timestrip {
	position: relative;
	height: var(--half);
	background: var(--gray);
}

.player__timestrip:before, .player__timestrip:after{
	content: "";
	position: absolute;
	left: 0;
	height: 15px;
	width: 100%;
}
.player__timestrip:after{
	top: 0;
}
.player__timestrip:before{
	bottom: 100%;
}
.timestrip{
	position: absolute;
	height: 100%;
	background: white;
}
.addfile {
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	display: flex;
	height: 100%;
	width: 100%;
	background: var(--bg);
	text-align: center;
}

.addfile__button {
	height: 100%;
	width: 100%;
}

.addfile__label {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.addfile__label i { background: url('../img/icons-s9986c51ffe.png') 0 -1090px no-repeat; width: 24px; height: 24px; vertical-align: middle; display: inline-block; margin-right: 13px; position: relative; top: -2px; }
.addfile__input {
	height: 0;
	width: 0;
	overflow: hidden;
}
/*
* SCENE LIST COMPONENT
*/
.scene{
	overflow: hidden;
}
.scene-frames{
	height: calc(6 * var(--unit));
	position: relative;
	background: var(--bg);
}
.scene-frames img{
	width: 100%;
}
.scene-thumbs{
	position: relative;
	display: inline-flex;
}
.scene-pointer{
	position: absolute;
	height: 100%;
	width: 2px;
	left: 0;
	background: red;}
input[type=range].scenes-range {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range].scenes-range:focus {
  outline: none;
}
.scene-pages {
	padding: 10px 0;
}
/* WEBKIT */
input[type=range].scenes-range::-webkit-slider-runnable-track{
	width: 100%;
	background: var(--bg);
	height: 1rem;
	cursor: pointer;
}
input[type=range].scenes-range::-webkit-slider-thumb{
	height: 1rem;
  border-radius: 0px;
  background: var(--gray);
  cursor: pointer;
  width: var(--thumb);
  -webkit-appearance: none;
}

/* MOZ */
input[type=range].scenes-range::-moz-range-track {
  width: 100%;
	background: var(--bg);
	height: 1rem;
	cursor: pointer;
}
input[type=range].scenes-range::-moz-range-thumb {
  height: 1rem;
  border-radius: 0px;
  background: var(--gray);
  cursor: pointer;
  width: var(--thumb);
}
/* MS */
input[type=range].scenes-range::-ms-track {
   width: 100%;
	background: var(--bg);
	height: 1rem;
	cursor: pointer;
}
input[type=range].scenes-range::-ms-thumb {
  height: 1rem;
  border-radius: 0px;
  background: var(--gray);
  cursor: pointer;
  width: var(--thumb);
}

.video-master, .video-scan{
	/*height: 27vh;*/
	width: 48vh;
	margin: auto;
}
#scene-list{
	margin-bottom:35px;
}

.resize-handler {
	height: 10px;
	cursor: row-resize;
	margin: 0 -15px;
	box-shadow: 0px -1px 1px rgba(255, 255, 255, 0.1);
}

.flex {
	display: flex;
}
.flex-center {
	display: flex;
	align-items: center;
}
.flex-end{
	flex: 1;
    justify-content: flex-end;
}
.mr-15{
	margin-right: 15px; 
}
.flex-col{
	display: flex;
	flex:1;
	flex-direction: column;
}
@media all and (max-width: 910px) {
  .hide-sm {
    display: none;
  }
}

.restore .video-scan, .restore .video-master {
	position: relative;
}

#master-coords, #scan-coords {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
    pointer-events: none;
}