html {
	text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	background-color: #f8f8f8;
	/* overflow: hidden; */
	/* font-family: 'Crimson Text', serif; */
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	color: #777;
	height: 100vh;
}

img {
	max-width: 100%;
	height: auto;
}

input {
	color: inherit !important;
	border-radius: 0 !important;
}

select {
	border-radius: 0 !important;
}

.field-container {
	position: relative;
}

.form-container {
	max-width: 330px;
	margin: 0 auto;
}

.form-control:focus,
.form-select:focus {
	 border-color: #ced4da;
	 outline: 0;
	 box-shadow: 0 0 0 .25rem rgba(147, 145, 145, 0.25);
}

.main-container {
	height: 100vh;
}
.main-container .inner {
	max-height: 100%;
	overflow: auto;
	width: 100%;
}

.intro-text {
	max-width: 670px;
	margin-left: auto;
	margin-right: auto;
}
.intro-text.home {
	 font-weight: 600;
	 font-size: 18px;
	 max-width: 670px;
}

.logo-container {
	position: relative;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}
.logo-inner {
	padding-bottom: 64%;
}
.logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* BUTTONS */
#reader__dashboard_section_csr button,
.btn-qdl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease-out;
	border-radius: 0;
	padding: 0.8em 1.6em;
	font-size: 12px;
	font-family: "Open Sans",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.8;
	text-align: center;
	vertical-align: middle;
	min-height: 44px;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.btn-qdl-sm {
	 padding: 0 1em;
	 min-height: 38px;
}

.btn.disabled,
.btn:disabled {
	opacity: 0.3;
}

.btn .spinner-border {
	display: none;
}

.btn-loading .spinner-border {
	display: block;
}
.btn-loading .icon {
	display: none;
}


#reader__dashboard_section_csr button,
.btn-qdl-primary {
	color: #fff;
	background-color: #939191;
	border-color: #939191;
}

#reader__dashboard_section_csr button:hover,
#reader__dashboard_section_csr button:active,
#reader__dashboard_section_csr button:focus,
.btn-qdl-primary:hover,
.btn-qdl-primary:active,
.btn-qdl-primary:focus {
	color: #fff;
	background-color: #acabab;
	border-color: #acabab;
}

#reader__dashboard_section_csr button:active:focus,
#reader__dashboard_section_csr button:focus,
.btn-qdl:active:focus,
.btn-qdl:focus {
	box-shadow: 0 0 0 0.25rem rgb(172, 171, 171, 0.5);
}

.btn-qdl-secondary {
	color: #939191;
	background-color: transparent;
	border-color: #939191;
}

.btn-qdl-secondary:hover,
.btn-qdl-secondary:active,
.btn-qdl-secondary:focus {
	color: #acabab;
	background-color: transparent;
	border-color: #acabab;
}


/* pages */
.page {
	display: none;
}

.page-intro {
	/* display: none; */
}
.page-qr-result {
	/* display: none; */
}


/* SCANNER */
#reader__dashboard_section > div:last-child,
#reader > div:first-child {
	display: none !important;
}

#reader {
	/* min-height: 312px;
	display: flex;
	flex-direction: column; */
}

#reader__scan_region {
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* flex: 1 1 0; */
}
#reader__scan_region img {
	margin-top: 5px;
}
#reader__scan_region br {
	display: none;
}

#reader__dashboard_section_csr {
	margin: 0 15px;
}

#reader__camera_selection {
	margin-bottom: 10px;

	 display: block;
	 width: 100%;
	 padding: .375rem 2.25rem .375rem .75rem;
	 -moz-padding-start: calc(0.75rem - 3px);
	 font-size: 1rem;
	 font-weight: 400;
	 line-height: 1.5;
	 color: #212529;
	 background-color: #fff;
	 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	 background-repeat: no-repeat;
	 background-position: right .75rem center;
	 background-size: 16px 12px;
	 border: 1px solid #ced4da;
	 border-radius: .25rem;
	 transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	 -webkit-appearance: none;
	 -moz-appearance: none;
	 appearance: none;
	 word-wrap: normal;
}

#reader__camera_selection:focus {
	 border-color: #86b7fe;
	 outline: 0;
	 box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.qr-scanner-container {
	max-width: 330px;
	margin-left: auto;
	margin-right: auto;
}

.or {
	font-weight: 700;
}

/* CARD LIST */
.card-list {
	position: relative;
	border: 1px solid #ced4da;
	width: 100%;
	min-height: 123px;
	background-color: #fff;
	font-size: 14px;
}

.card-container {
	line-height: 1.4;
	text-align: left;
}
.card-container .label {
	font-family: 'Crimson Text', serif;
	font-weight: 700;
	font-size: 16px;
}
.card-container .card-badge {
	font-size: 10px;
	text-transform: uppercase;
}

/* CARD DETAILS */
.card-details {
	position: relative;
	border: 1px solid #ced4da;
	width: 100%;
	min-height: 200px;
	background-color: #fff;
	font-size: 14px;
}
.card-details .data {
	position: relative;
}
.card-details .data .label {
	font-weight: 700;
	display: inline-block;
}

.card-details .data .value {
	white-space: nowrap;
}
.card-details .badge-container {
	position: absolute;
	top: 0;
	right: 0;
}
.card-details .card-badge {
	font-size: 10px;
	text-transform: uppercase;
}

.input-loader {
	position: absolute;
	display: none;
	top: 8px;
	right: 15px;
	width: 22px;
	height: 22px;
}
.loading ~ .input-loader {
	display: block;
}
.input-loader:before {
	content: "";
	height: 100%;
	width: 100%;
	border-radius: 2.85714rem;
	border: solid 2px;
	border-color: #fff #fff #999 #999;
	display: block;
	position: relative;
	top: 50%;
	transform-style: preserve-3d;
	animation: spin .5s infinite cubic-bezier(.69,.31,.56,.83);
}

.loader {
	background-color: rgba(255,255,255,1);
	z-index: 20;
	bottom: 0;
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 250ms ease-out;
	width: 100%;
}

@keyframes spin {
	 0% {
		  transform: translateY(-50%) rotate(0)
	 }

	 100% {
		  transform: translateY(-50%) rotate(360deg)
	 }
}

.loader:before {
	 height: 2.85714rem;
	 width: 2.85714rem;
	 border-radius: 2.85714rem;
	 border: solid 2px;
	 border-color: #fff #fff #999 #999;
	 content: "";
	 display: block;
	 left: 0;
	 margin: 0 auto;
	 position: absolute;
	 right: 0;
	 top: 50%;
	 transform: translateY(-50%) rotate(0);
	 transform-style: preserve-3d;
	 animation: spin .5s infinite cubic-bezier(.69,.31,.56,.83);
}

.note-container {
	border: 1px solid #ced4da;
	padding: 5px;
}

/* MODAL */
.modal-title {
	font-size: 18px;
}
.modal-body {
	
}



/* CREATE PAGE */
#gf-amount {
	text-align: left;
}
#customer-results {
	position: absolute;
	z-index: 3;
	margin-top: 10px;
	overflow: auto;
	max-height: 300px;
}
#selected-customer {
	position: relative;
	margin-top: 10px;
}
#selected-customer .btn-close {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
}
#selected-customer .customer {

}
#gf-customer {
	padding-right: 58px;
}

.list-group-item-action {
	background-color: #fff !important;
}

.input-search {
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='search' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-search fa-w-16 fa-2x'%3e%3cpath fill='%23939191' d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z' class=''%3e%3c/path%3e%3c/svg%3e");
	background-size: 22px 22px;
	background-position: calc(100% - 15px) 50%;
}

#btn-search-customer .icon {
	width: 1rem;
	height: 1rem;
}
#btn-search-customer .icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.field-value {
	font-size: 13px;
}

#btn-create-customer {
	width: 100%;
}

.card-list .list-group {
	max-height: 360px;
	overflow: auto;
}

.code {
	text-transform: uppercase;
}

/* ---------------------------- MEDIA QUERIES -------------------------- */

@media (max-width: 1199px) {

}
@media (max-width: 991px) {

}
@media (max-width: 767px) {
	
}
@media (max-width: 575px) {
	.logo-container {
		max-width: 300px;
	}
}
@media (max-width: 480px) {
	.logo-container {
		max-width: 260px;
	}
}