@media (max-width: 768px) {
	.gpqr-scanner-popper {
		position: fixed !important;
		right: 0 !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		transform: none !important;
	}
}

.gpqr-scanner-popper {
	display: none;
	box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
	background: white;
	padding: 10px;
	min-width: 330px;
	z-index: 99999;
}

.gpqr_ginput_container * {
	transition: none !important;
}

.gpqr_ginput_container.ginput_container_text > input {
	order: 1;
	flex: 1;
}

/* Size-specific flex rules */
.gpqr_ginput_container.ginput_container_text > input.medium {
	flex: 0 0 calc(50% - 16px / 2);
}

.gpqr_ginput_container.ginput_container_text > input.small {
	flex: 0 0 calc(25% - 1rem * 3 / 4);
}
/* End size-specific flex rules */

.gpqr_ginput_container.ginput_container_text * {
	order: 3;
	flex-basis: 100%;
}

.gpqr_ginput_container.ginput_container_text {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.gpqr-scanner-button {
	padding: 0;
	border: 0;
	cursor: pointer;
	vertical-align: top;
	order: 2 !important;
	flex: 0 !important;
}

.gpqr-scanner-button svg {
	width: 36px;
	height: 36px;
	vertical-align: bottom;
}

button.gpqr-scanner-close {
	position: absolute;
	z-index: 10;
	top: 10px;
	right: 10px;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	line-height: 0;
	/* Line height behaves weird with × */
	font-size: 20px;
}

.gpqr-scanner-popper [id*="__header_message"] {
	max-width: calc(100% - 40px);
	margin-right: 40px;
}

.gpqr-scanner-popper button[id*="__camera_permission_button"] {
	cursor: pointer;
}

.gpqr-scanner-popper [id*="__scan_region"] video {
	margin-top: 30px;
}

.gpqr-scanner-popper [id*="__scan_region"] img {
	display: inline-block;
}

.gpqr-scanner-popper [id*="__dashboard_section_csr"] button {
	margin-top: 10px;
}

.gpqr-scanner-popper input[type="file"] {
	border: 1px solid #ddd;
	border-radius: 2px;
	padding: 3px;
	margin-bottom: 5px;
}

/* Basic styles/colors */
button.gpqr-scanner-close {
	border-radius: 100%;
	background: #444;
	color: #fff;
	border: 0;
}

button.gpqr-scanner-close:hover {
	background: #555;
}

.gpqr-scanner-popper button[id*="__camera_permission_button"] {
	border-radius: 5px;
	background: #444;
	color: #fff;
	border: 0;
	padding: 6px 10px;
	margin-bottom: .5rem;
	font-size: 1rem;
}

.gpqr-scanner-popper button[id*="__camera_permission_button"]:hover {
	background: #555;
}

.gpqr-scanner-popper a[id*="__dashboard_section_swaplink"] {
	font-size: .9rem;
}

.gpqr-scanner-button, .gpqr-scanner-button:hover, .gpqr-scanner-button:active, .gpqr-scanner-button:focus {
	background: none;
}

.gpqr-scanner-button svg .cls-2 {
	stroke: #333;
}

.gpqr-scanner-button:hover svg .cls-2 {
	stroke: #666;
}

/*
 * html5-qrcode overrides
 */
/* Hide camera select */
#scanner-container__camera_selection {
	display: none !important;
}

#scanner-container__dashboard_section_csr > span:first-of-type {
	display: none !important;
}

/* Remove default border style */
.gpqr-scanner-popper .scanner-container {
	border: 0 !important;
}

/* Hide the info button */
.gpqr-scanner-popper .scanner-container > div:first-child > img {
	display: none;
}