body, html {
	margin: 0;
	padding: 0;
	height: 100vh;
	background: transparent;
}

body {
	font-family: Arial, serif;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6c93bc+0,c5ccd2+50,847c69+98 */
	background: #6c93bc; /* Old browsers */
	background: -moz-linear-gradient(top, #6c93bc 0%, #759FCC 50%, #49647A 98%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #6c93bc 0%, #759FCC 50%, #49647A 98%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #6c93bc 0%, #759FCC 50%, #49647A 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c93bc', endColorstr='#49647A', GradientType=0); /* IE6-9 */
}

body.ios-transparent-background {
	background: transparent !important;
}

body.ios-transparent-background #userMediaMainVideo {
	background: transparent !important;
}

body.ios-transparent-background .FaceFrame {
	width: 90% !important;
	padding-bottom: 90% !important;
}

#algovidonboarding_view {
	width: 100%;
	height: 100vh;
	background: transparent;
	opacity: 1;
}

#algovidonboarding_view.hide {
	transform: translateX(-100%);
	opacity: 0;
}

#algovidonboarding_view.show {
	animation-name: algovidonboarding_view_show;
	animation-duration: 0.2s;
}

@keyframes algovidonboarding_view_show {
	0%, 1% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
	}
}

/* Display */
.questionIsId, .questionIsFace, .questionIsDocument, .questionIsAntibot, .questionIsInformation, .questionIsVerification, .questionIsEnd, .questionIsTryAgain, .questionIsSpeech, .questionIsImage, .questionIsNoMoreTry {
	display: none;
}
#session_screen_main_view.identity .questionIsId {
	display: block;
}
#session_screen_main_view.face .questionIsFace {
	display: block;
}
#session_screen_main_view.document .questionIsDocument {
	display: block;
}
#session_screen_main_view.antibot .questionIsAntibot {
	display: block;
}
#session_screen_main_view.information .questionIsInformation {
	display: block;
}
#session_screen_main_view.verification .questionIsVerification {
	display: block;
}
#session_screen_main_view.tryagain .questionIsTryAgain {
	display: block;
}
#session_screen_main_view.speech .questionIsSpeech {
	display: block;
}
#session_screen_main_view.image .questionIsImage {
	display: block;
}
#session_screen_main_view.nomoretry .questionIsNoMoreTry {
	display: block;
}
#session_screen_main_view.nomoretry .questionIsTry {
	display: none;
}

.startblock {
	display: flex;
	padding: 0px !important;
}

.mainblock #counter {
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
	margin: auto;
	bottom: 0;
	text-align: center;
	font-size: 80px;
	color: #0071bc;
}


@media (min-width: 601px) {
	.nodesktop {
		display: none !important;
	}
}

@media (max-width: 600px) {

	.nomobile {
		display: none !important;
	}

	body {
		background: transparent;
	}

    .mainblock {
	    padding-top: 20px;
	    box-sizing: border-box;
	    max-height: none !important;
	    box-shadow: none !important;
    }

	.mainblock .left {
		display: none;
	}

}

/* OLD */


.mainblock .start_title {
	font-size: 25px;
	margin-bottom: 50px;
	margin-top: 20px;
}

.title {
	font-size: 25px;
	color: #00BBD9;
	margin-bottom: 20px;
	margin-top: 20px;
}

.mainblock .chooseLanguage {
	position: absolute;
	top: -60px;
}

.mainblock .left {
	color: #0071bc;
	background: #FFF;
	width: 50%;
	text-align: center;
	padding: 30px;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	box-sizing: border-box;
}

.mainblock .left .logo {
	width: 130px;
	margin-bottom: 8px;
}

.mainblock .left .bottom {
	padding: 20px;
	font-weight: normal;
	bottom: 0;
	position: absolute;
	margin: 30px;
	left: 0;
}

.mainblock .right {
	flex: 1;
	text-align: center;
	padding: 30px;
	font-size: 16px;
	position: relative;
	box-sizing: border-box;
	color: #000;
}

.mainblock .right .startbtn {
	position: absolute;
	bottom: 50px;
	margin: auto;
	left: 0;
	right: 0;
	width: 110px;
}

.mainblock {
	width: 100%;
	height: 100%;
	position: absolute;
	max-width: 902px;
	max-height: 588px;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	margin: auto;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.8);
	padding: 20px;
}

.disclaimer {
	padding: 40px 100px 60px 100px;
	color: #000;
}

.videoContainer {
	padding-bottom: 30px;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hover-video {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: auto;
	width: 100%;
	text-align: center;
	padding: 10px;
	padding-top: 100px;
	padding-bottom: 30px;
	box-sizing: border-box;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 1) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 1) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
	color: #FFF;
	font-size: 16px;
	z-index: 1000;
	margin-bottom: 30px;
}

.question-text {
	width: 100%;
	margin-bottom: 0px;
}

.question-helper {
	width: 100%;
	color: #AAA;
	margin-bottom: 20px;
}

.button img {
	width: 25px;
	height: 25px;
}

.button {
  background: #38c6e4;
  height: 50px;
  width: 50px;
  margin: auto;
  border-radius: 50%;
  padding: 13px;
	transition: all 0.2s;
	cursor: pointer;
}

.button:hover {
	background: #0071bc;
}

.button:active {
	background: #00558d;
}

.button > .processing {
	display: none;
}
.button > .listening {
	display: none;
}

.button.processing {
	opacity: 0.8;
	background: #FFF !important;
	cursor: auto !important;
}
.button.processing > * {
	display: none;
}
.button.processing > .processing {
	display: block;
}

.button.listening {
	background: #e43838;
}
.button.listening > * {
	display: none;
}
.button.listening > .listening {
	display: block;
}

.hover-video md-input-container input {
	color: #FFF;
}

.hover-video md-input-container label {
	color: #FFF;
}

#userMediaMainVideo {
	height: 100%;
	width: 100%;
	position: absolute;
	text-align: center;
	background: #000;
}

#userMediaMainVideo video {
	transform: rotate3D(0, 1, 0, 180deg);
	height: 100%;
	width: 100%;
}

#userMediaMainVideo video.back {
	transform: rotate3D(0, 1, 0, 0deg);
}

.identity .IDframe {
	display: block !important;
}

.IDframe {
	height: 80%;
	width: 80%;
	border: 5px solid #38c6e4;
	border-radius: 10px;
	position: absolute;
	z-index: 200;
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.face .FaceFrame {
	display: block !important;
}

.FaceFrame {
	width: 50%;
	padding-bottom: 50%;
	height: 0px;
	border: 5px solid #38c6e4;
	border-radius: 1000px;
	position: absolute;
	z-index: 200;
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.FacePercent {
	font-size: 30px;
	height: 100px;
	line-height: 100px;
	display: inline-block;
	font-weight: bold;
	color: #38c6e4;
	width: 100%;
	text-align: center;
}

.hover-video-session-state {
	position: absolute;
	height: 30px;
	width: 100%;
	background: #FFF;
	display: flex;
	overflow: hidden;
	bottom: 0px;
	z-index: 200;
}

.hover-video-session-state .question-head {
	flex: 1;
	background: linear-gradient(to right, #FFF , #EEE);
	text-align: center;
	color: #000;
	font-size: 16px;
	position: relative;
	line-height: 30px;
}

.hover-video-session-state .question-head::after {
	width: 0;
	height: 0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 6px solid #EEE;
	content: "";
	font-size: 0px;
	position: absolute;
	right: -6px;
	z-index: 100;
}

.hover-video-session-state .question-head.done {
	background: linear-gradient(to right, #0061ac , #0071bc);
	color: #FFF;
}

.hover-video-session-state .question-head.done::after {
	border-left-color: #0071bc;
}

.hover-video-session-state .question-head.current {
	background: #38c6e4;
	color: #FFF;
}

.hover-video-session-state .question-head.current::after {
	border-left-color: #38c6e4;
}

.mainblock .question {
	font-size: 22px;
	left: 0px;
	color: #FFF;
	height: auto;
	padding: 0px;
	width: 100%;
	margin-bottom: 10px;
	text-align: center;
	box-sizing: border-box;
}



.question-list {
	position: absolute;
	bottom: 0px;
	text-align: center;
	padding: 0;
	font-size: 0px;
	width: 100%;
	display: flex;
	background: rgb(255, 255, 255, 0.0);
	margin-left: -10px;
}

.question-list-q {
	display: inline-block;
	height: 2px;
	flex: 1;
	background: rgba(0, 0, 0, 0.72);
	margin-right: 1px;
}

.question-list-q:last-child {
	margin-right: 0px;
}

.question-list-q.done {
	background: #00d018;
}

.question-list-q.current {
	background: #ff903a;
	border-radius: 0 10px 10px 0;
}

.question-list-q.current.loading {
	background: #898989;
}

.mainblock .subtitle {
	color: rgba(255, 255, 255, 0.79);
	font-size: 14px;
	text-align: center;
}

.questions_list {
	width: 100%;
	text-align: center;
	padding: 20px;
	margin-top: 10px;
	box-sizing: border-box;
}

.a_question {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background: rgb(0, 187, 217);
	color: #FFF;
	text-align: center;
	line-height: 40px;
	font-weight: bold;
	margin: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2)
}

.a_question.active {
	box-shadow: none;
	background: transparent;
	width: 70px;
	height: 70px;
	line-height: 70px;
}

.a_question.active button {
	padding: 0;
	margin: 0;
	width: 70px;
	height: 70px;
	background: #e11;
	font-weight: bold;
	font-size: 18px;
}

.a_question.active.loading button {
	padding: 0;
	margin: 0;
	width: 70px;
	height: 70px;
	background: #888;
}

.a_question.active button:hover {
	background: #f00 !important;
}

.md-button.md-fab[disabled]:hover {
	background: #555 !important;
}

.a_question.active.loading button:hover {
	background: #555 !important;
}

.document-viewer {
	display: inline-block;
	width: 800px;
	height: 400px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.positiveStatus {
	background-color: #00b6d9 !important;
	color: #FFF !important;
}

.neutralStatus {
	background-color: #8fabba !important;
	color: #FFF !important;
}

.negativeStatus {
	background-color: #af1919 !important;
	color: #FFF !important;
}

.dot {
	background: #a2a09e;
	height: 15px;
	width: 15px;
	border-radius: 10px;
	float: right;
}

.dot.true {
	background: #00d928;
	box-shadow: 0 0 10px rgba(0, 255, 155, 0.2);
}

.dot.orange {
	background: #ffaa00;
	box-shadow: 0 0 10px rgba(255, 152, 0, 0.20);
}

.remove_btn {
	color: #8b8b8b;
	margin-left: 10px;
	margin-top: -10px;
	cursor: pointer;
	outline: none;
	top: 7px;
	position: relative;
}

/* Misc */
a {
	color: #007fff;
	text-decoration: none;
}

a:hover {
	color: #006fef;
}

.md-primary {
	background: #00BBD9 !important;
	padding-left: 30px;
	padding-right: 30px;
}

.md-whiteframe-1dp, .md-whiteframe-z1 {
	box-shadow: none;
}

/* Debug */
.debug {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: rgba(255, 255, 255, 0.5);
}

/* Error */
.error {
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: -100vh;
	left: 0px;
	background: #FFF;
	opacity: 0;
	transition: all 0.2s;
	z-index: 10000;
	text-align: center;
	padding: 100px;
	box-sizing: border-box;
}

.error.open {
	top: 0px;
	opacity: 1;
}

@keyframes shake {
	from, to {
		transform: translate3d(0, 0, 0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translate3d(-5px, 0, 0);
	}

	20%, 40%, 60%, 80% {
		transform: translate3d(5px, 0, 0);
	}
}

.shake {
	animation-name: shake;
}

.animated {
	animation-duration: 0.7s;
	animation-fill-mode: both;
}

.intl-tel-input .country-list {
	z-index: 10;
}
.intl-tel-input {
	width: 100%;
}
.error-box {
	clear: both;
	width:100%;
	text-align: center;
	padding: 15px 0;
}

.camera-flash {
	pointer-events: none;
	position: absolute;
	z-index: 100;
	background: #FFF;
	opacity: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-animation: camera-flash-animation 0.8s normal forwards ease-in-out;
	animation: camera-flash-animation 0.8s normal forwards ease-in-out;
}

@keyframes camera-flash-animation {
	0% { opacity:0; }
	10% { opacity:1; }
	100% { opacity:0; }
}