/* dl scanner */
#sweti_scanner_video_container{
	/* display: none;
	 */
}

#sweti_scanner_question_container{
	text-align: center;
	display: flex;
	float: right;
}

#sweti_scanner_heading { 
	margin-bottom: 20px;

}

.scanner_btn {
	text-align: center;
	background-color: var(--light-blue-color);
	border: none;
	color: white;
	padding: 5px 32px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	transition-duration: 0.4s;
	margin-right: 11px;
}

.scanner_btn:hover {
	cursor: pointer;
}

#sweti_scanner_snap {
	display: block;
	background-color: var(--light-blue-color);
	border: none;
	color: white;
	text-align: center;
	position: absolute;
	bottom: 0;
	height: 54px;
	width: 50%;
	align-content: center;
	left: 0;
}

#sweti_scanner_snap:hover {
	cursor: pointer;
}

#sweti_scanner_snap.dl_nonactive {
	display: none;
}

#sweti_scanner_snap.tmp_disabled {
	background-color: grey;
}

#sweti_scanner_snap.tmp_disabled:hover {
	cursor: not-allowed;
}

#sweti_scanner_canvas{
	display: none;
}

#sweti_scanner_video_container.active {
	position: fixed;
	z-index: 1003;
	display: flex;
	top: 0;
	margin: auto;
	text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
}

#sweti_scanner_video_container.active.mobile{
	/* left: 0; */
	/* max-width: unset; */
}

#sweti_scanner_bg.active {
	background: white;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1000;
	text-align: center;
}

#sweti_scanner_bg.active.existingMemberError{
	/*
	align-content: center;
	background: #00000050;
	top:60px;
	left:unset;
	right:unset;
	bottom:unset;
	height: unset;
	width: 60%;
	padding: 13px 17px;
	*/
	background: rgba(255, 255, 255, 0.82);
	position: fixed;
	width: 80%;
	padding: 13px 17px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
	border-radius: 16px;
	border: 1px solid #167CFF;
}

.dl_guideline.active.mobile {
	/* width: 61%; */
	align-content: center;
}

.exitExistingMemberBtn {
    background: #0c3964;
    padding: 3px 12px;
    color: white;
    width: fit-content;
    border-radius: 50%;
    position: absolute;
    bottom: 37px;
    right: -16px;
}

.exitExistingMemberBtn:hover {
	cursor: pointer;
}

.dl_nonactive {
	display: none;
}

#dl_close {
	display: block;
	background-color: var(--light-blue-color);
	border: none;
	padding: 15px 32px;
	color: white;
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 auto 0 auto;
	text-align: center;
	align-content: center;
	height: 54px;
	width: 50%;
}

#dl_close:hover {
	cursor: pointer;
}

#dl_close.dl_nonactive {
	display: none;
}

#sweti_scanner_video {
	/* transform: rotateY(180deg); */
	margin: 0;
	padding: 0;
	max-width: 771px;
}

.dl_guideline.active {
	z-index: 1000;
	position: absolute;
	border: 3px dotted black;
	aspect-ratio: 1.525 / 1;
	-webkit-aspect-ratio: 1.525 / 1;
	width: 60%;
	max-width: 604px;
}

#dl_video_container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 10em;
	left: 0;
	right: 0;
	margin: auto;
}

span#dl_transition_message {
	font-size: 27px;
	top: 50%;
	position: relative;
	text-align: center;
}

#sweti_scanner_video_container.active .dl_license_msg {
	font-size: 24px;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: green;
    padding: 31px 2px;
    color: white;
    z-index: 100;
    line-height: 1em;
}
/*  Phone */
@media only screen and (max-width:430px) and (orientation: portrait) {
	#sweti_scanner_video_container.active {
		/* max-width: 81%; */
		/* left: unset; */
		/* top:10%; */
	}
	.dl_guideline.active.mobile{
		width:63%;
	}
}
@media only screen and (max-width:932px) and (orientation: landscape) {
	#sweti_scanner_video_container.active {
		/* max-width: 90%; */
		/* left: unset; */
		/* top:12%; */
	}
	.dl_guideline.active.mobile{
		width: 36%;
	}
	#sweti_scanner_video {
		/* max-width:24%; */
	}
	#dl_close {
		/* max-width: 30%; */
		/* padding: 4px 32px; */
		/* font-size: 12px; */
	}
	#sweti_scanner_snap {
		/* max-width: 30%; */
		/* padding: 4px 32px; */
		/* font-size: 12px; */
	}
}
/* Tablet */	

@media only screen
and (min-device-width : 430px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	#sweti_scanner_video_container.active {
		/* max-width: 81%; */
		/* left: unset; */
		/* top:10%; */
	}
	.dl_guideline.active.mobile {
		/* width: 60%; */
	}

	.dl_guideline.active {
		/* width: 60%; */
	}
}
@media only screen
and (min-device-width : 1024px)
and (max-device-height : 823px)
and (orientation : landscape) {
	/* For landscape layouts only */
	#sweti_scanner_video_container.active {
		/* top: 10%; */
		/* left: unset; */
	}

	.dl_guideline.active {
		/* width: 18%; */
	}
	#sweti_scanner_video {
		/* max-width:40%; */
	}
	.dl_guideline.active.mobile {
		/* width: 33%; */
	}
	#dl_close {
		/* max-width:40%; */
		/* padding: 6px 32px; */
		/* font-size: 14px; */
	}
	#sweti_scanner_snap {
		/* max-width:40%; */
		padding: 6px 32px;
		font-size: 14px;
	}
}

@media only screen and (min-width:321px)
and (max-width:768px)
and (orientation: landscape) 
{

}

/* Desktop */
@media only screen and (min-width:769px)
and (min-device-height : 824px) {
	#sweti_scanner_video_container.active {
		/* top: 10%; */
	}

	.dl_guideline.active {
		/* width: 10%; */
	}
	#sweti_scanner_video {
		/* max-width: fit-content; */
		/* this needs to be readressed for desktop this is messing with mobil and ipad
		 * transform: rotateY(180deg);*/
	}
	.dl_guideline.active.mobile {
		/* width: 47%; */
	}

	#dl_close {
	}
	#sweti_scanner_snap {
	}
	#sweti_scanner_video_container.active.mobile {
	    /* width: 75%; */
	    /* left: 12%; */
	}
}

/* delete these two tmp if broken */
/* tmp desktop css */
@media only screen and (min-width: 1440px) and (min-device-height: 769px) {
/*@media only screen and (min-width: 1440px) and (min-device-height: 952px) {*/
  #sweti_scanner_video_container.active {/* top: 10%; */}
  .dl_guideline.active {/* width: 33%; */}
  #sweti_scanner_video {/* max-width: fit-content; */}
  .dl_guideline.active.mobile {/* width: 46%; */}
  #dl_close { max-width: 50%; padding: 6px 32px; font-size: 14px; }
  #sweti_scanner_snap {/* max-width: 50%; *//* padding: 6px 32px; *//* font-size: 14px; */}
  #sweti_scanner_video_container.active.mobile {/* width: 55%; *//* left: 23%; */}
}

/* tmp ipad css */
@media only screen and (min-width: 1536px) and (min-device-height: 2048px) {
  #sweti_scanner_video_container.active { top: 10%; }
  .dl_guideline.active { width: 33%; }
  #sweti_scanner_video { max-width: fit-content; }
  .dl_guideline.active.mobile { width: 47%; }
  #dl_close { max-width: 50%; padding: 6px 32px; font-size: 14px; }
  #sweti_scanner_snap { max-width: 50%; padding: 6px 32px; font-size: 14px; }
  #sweti_scanner_video_container.active.mobile { width: 80%; left: 10%; }
}

#dl_icon_img {
	height: 38px;
}

#dl_icon_img:hover{
	cursor: pointer;
}

#dl_example_img {
	display: none;
}

#dl_example_img.active {
	display: block;
	opacity: 10%;
}

@keyframes dl_opacity {
    0% {
	    opacity: 80%;
    }
    20% {
		opacity: 20%;
	}
	40% {
		opacity: 80%;
	}
	60% {
		opacity: 20%;
	}
	80%{
		opacity: 80%;
	}
	100% {
		opacity: 5%;
	}
}

img#dl_example_img.active {
    animation: dl_opacity 7500ms ease-in-out;
}


@media only screen
and (orientation : landscape) {
	#sweti_scanner_bg.active {
		/* background:red; */
	}
	#sweti_scanner_video_container.active.mobile {
		width: 100%;
		/* height: 100vh; */
		/* max-height: 100vh; */
	}
	#sweti_scanner_video_container.active .dl_license_msg {
		padding: 10px;
	}
	div.active #dl_video_container {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

#sweti_dl_error_message {
    color: red;
    font-weight: 700;
}

div#scannerFirstPageContainer {
    display: flex;
    justify-content: center;
    text-align: center;
}

#scannerFirstPageContent p {
    padding: 10px;
    margin: 18px 0;
    font-size: 19px;
}

button#startScannerBtn.scanner_btn {
    padding: 15px 20px;
    border: none;
}

button#skipScannerBtn.scanner_btn {
    padding: 15px 20px;
    border: none;
}


div#scannerFirstPageHeader h2 {
    text-transform: uppercase;
}