.code-scanner 
	display: flex 
	flex-direction: column 
	height: 100% 
	width: 100% 
	padding: 0 
	margin: 0 
	box-sizing: border-box 
	ion-header 
		--background: transparent !important 
		background-color: transparent !important 
	ion-toolbar 
		--background: #000 !important 
		background-color: #000 !important 
		opacity: .8 !important 
	ion-button 
		--background: transparent 
		--border-color: #fff 
		--color: #fff 
		--border-width: 1px 
		--border-style: solid 
	.no-border 
		--border-width: 0px !important 
	div 
		&.scanner-container 
			display: flex 
			flex-direction: column 
			width: 100% 
			height: 100% 
			div 
				&.w100 
					background-color: #000 
					opacity: .8 
					width: 100% 
					height: 30% 
					padding: 27px 
					text-align: center 
					p 
						font-family: 'Open Sans' 
						font-style: normal 
						font-weight: 700 
						font-size: 28px 
						line-height: 28px 
						letter-spacing: -0.05em 
						color: #FFFFFF 
					&:last-child 
						flex-grow: 1 
				&.scanner-zone-container 
					display: flex 
					flex-direction: row 
					width: 100% 
					align-content: space-between 
					div 
						display: block 
						background-color: #000 
						opacity: .8 
						width: 10% 
						flex-grow: 1 
						&.scanner-zone 
							background-color: transparent !important 
							width: 80% 
							height: 200px 
							flex-grow: 2 
							--b: 5px 
							--c: #fff 
							--w: 40px 
							border: var(--b) solid transparent 
							--g: #000 0 90deg, var(--c) 0 
							background: conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0, conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0, conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%, conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100% 
							background-size: var(--w) var(--w) 
							background-origin: border-box 
							background-repeat: no-repeat