:root {
	--scanner-progress-bar-width: 150px;
	--scanner-progress-bar-height: 150px;
	--scanner-progress-font-size: 2rem;
}

#scanner {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9999999999; 
}

.st-scanner-dialog {
	font-size: 13px;
	position: absolute;
	z-index: 99999999999999;
	padding: 10px 0;
	background-color: #fff;
	border: 1px solid #aaa;
	box-shadow: 0px 0px 3px 0px #aaa;
}

.st-scanner-dialog .ui-dialog-buttonset .ui-button, .scanner-button {
	background: #c1c2c4;
	text-align: center;
	border: 0;
	border-bottom: 3px solid #adafb2;
	border-radius: 3px;
	background: -webkit-linear-gradient(top, #f3f3f4, #c1c2c4);
}

.st-scanner-dialog .ui-dialog-titlebar {
	background: #d3d1d1;
	border: 1px solid #d3d1d1;
	border-radius: 3px;
	margin: 0px 5px 5px;
	background: -webkit-linear-gradient(top, #f3f3f4, #aba9a9)
}

.st-scanner-dialog .ui-dialog-title {
	color: #4b4b4b;
	font-weight: 700;
}

.st-scanner-dialog .step-box {
	width: 100%;
}

.st-scanner-dialog #vin-confirm, .st-scanner-dialog #plate-confirm {
	width: 100%;
	padding: 5px;
	font-size: 20px;
	font-weight: 700;
	touch-action: none;
}

.st-scanner-dialog #vin-confirm .vin-confirm-char, .st-scanner-dialog #plate-confirm .plate-confirm-char { 
	border: 1px #000000 solid;
	border-radius: 3px;
}

@media screen and (min-width: 1000px) {
	.st-scanner-dialog #vin-confirm .vin-confirm-char, .st-scanner-dialog #plate-confirm #plate-confirm-char { padding: 5px; }
}

.st-scanner-dialog #vin-confirm span.last-8 { color: red; }

.vin-confirm-popup, .plate-confirm-popup {
	position: fixed;
	min-width: 30px;
	z-index: 999999999999999;
}

.vin-confirm-popup table, .plate-confirm-popup table { width: 100%; }

.vin-confirm-popup td, .plate-confirm-popup td {
	width: 30px;
	padding: 5px;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	background: #FFFFFF;
	border: 1px #5d5d5d solid;
	border-radius: 3px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.vin-confirm-popup td.selected, .plate-confirm-popup td.selected { background: #39c861; }

.uf-scanner-row {
	border: 2px outset rgb(134, 134, 134);
	border-radius: 3px;
	margin-bottom: 5px;
	padding: 5px;
	background: rgb(241, 241, 241);
	font-weight: 700;
}

.uf-scanner-row .vehicle-info {
	border-bottom: 1px dashed #686868;
}

#scanner-uf-load {
	background: url(../images/loading.gif) #E8E8E8 center center no-repeat;
	background-size: 80%;
	width: 200px;
	border-radius: 5px;
	z-index: 999999999999;
	top: 50%;
	left: 50%;
	border: 1px solid #CCC;
	margin: -45px 0 0 -125px;
	padding: 40px 15px 15px;
}

#scanner-loading-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999999999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#scanner-loading-screen .circular-progress {
	width: var(--scanner-progress-bar-width);
	height: var(--scanner-progress-bar-height);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2rem;
}

#scanner-loading-screen .inner-circle {
	position: absolute;
	width: calc(var(--scanner-progress-bar-width) - 30px);
	height: calc(var(--scanner-progress-bar-height) - 30px);
	border-radius: 50%;
	background-color: lightgrey;
}

#scanner-loading-screen .content {
	position: relative;
	font-size: var(--scanner-progress-font-size);
	color: rgb(0, 0, 0, 0.8);
}

@media screen and (max-width: 978px) {
	:root {
		--scanner-progress-bar-width: 120px;
		--scanner-progress-bar-height: 120px;
		--scanner-progress-font-size: 1.3rem;
	}
}

@media screen and (max-width: 700px) {
	:root {
		--scanner-progress-bar-width: 90px;
		--scanner-progress-bar-height: 90px;
		--scanner-progress-font-size: 1rem;
	}
}

#scanner-uf-load-overlay, #scanner-loading-screen-overlay {
	width: 100%;
	height: 100%;
	background: #000;
	top: 0;
	left: 0;
	opacity: 0.3;
	z-index: 999999999998;
}

.scanner-uf-load, .scanner-loading-screen {
	position: fixed;
}

.scanner-stop-btn, .scanner-switch, .scanner-type-toggle, .scanner-capture-btn {
	background-color: #FFF;
	border-radius: 3px;
	padding: 20px; 
}

.scanner-stop-btn {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 9; 
}

.scanner-type-toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9;
}

.scanner-capture-btn {
	position: absolute;
	width: 25px;
	height: 25px;
	color: #9d9d9e;
	text-align: center;
	border-radius: 50px;
	z-index: 9;
}

.scanner-switch {
	position: absolute;
	top: 10px;
	left: 100px;
	z-index: 9;
}

.open-scanner {
	vertical-align: middle;
}

#scanner-log .scanner-status {
	padding-right: 10px;
	font-size: 0.875em;
}

.st-scanner-dialog-wrap{
	z-index:100050;
}

.scanner-customer-form {
    font-size: 14px;
    margin:10px 2px;
}

.scanner-customer-form table,
.scanner-dms-duplicate-check table{
	width:100%;
	font-size:14px;
}

.dms-duplicate-check-content .cdk-customer-list {
    font-weight: 400;
}

.uf-scanner-row .button.button-primary {
    width: 100%;
    font-size: 14px;
}

#scanner_insert_dms_customer input[name="scanner_insert_into_dms_submit"]{
	display:block;
	margin:auto;
}