*
{
	font-family: 'Raleway';
}

body
{
	background-color: #f1f1f1 !important;
}

	div.scan-error
	{
		width: 200px;
		
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 999;
		
		transform: translate(-50%, -50%);
		padding: 40px;
		display: table;
		
		background-color: #fff;
		
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		
		-moz-box-shadow: 0px 0px 20px #DD0000;
		-webkit-box-shadow: 0px 0px 20px #DD0000;
		box-shadow: 0px 0px 20px #DD0000;
	}
	
		div.scan-error img
		{
			width: 100%;
		}
		
		div.scan-error div.error
		{
			width: calc(100% - 20px);
			
			padding: 10px;
			display: table;
			
			background-color: #e5d81e;
			
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			
			font-size: 14px;
			font-weight: bold;
			text-align: center;
		}
		
		div.scan-error div.button
		{
			width: calc(100% - 22px);
			
			margin: 10px 0px 0px 0px;
			padding: 10px;
			
			background-color: #ff0000;
			border: 1px solid #980202;
			
			border-radius: 7px;
			-moz-border-radius: 7px;
			-webkit-border-radius: 7px;
			
			font-size: 14px;
			color: #fff;
			font-weight: bold;
			text-align: center;
		}
	
	div.touch-me
	{
		width: 100px;
		height: 100px;
		
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 999;
		
		display: none;
		transform: translate(-50%, -50%);
	}
	
		div.touch-me span
		{
			font-size: 100px;
			color: #fff;
			
			text-shadow: 0px 0px 10px #000;
		}
		
	div.unique-id
	{
		width: 125px;
		
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 999;
		
		margin: 150px 0px 0px 0px;
		padding: 10px 0px;
		display: table;
		transform: translate(-50%, -50%);
		
		background-color: #DAA520;
		
		color: #fff;
		text-align: center;
		
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px;
		border-radius: 4px;
		
		-moz-box-shadow: 0px 0px 5px #000;
		-webkit-box-shadow: 0px 0px 5px #000;
		box-shadow: 0px 0px 5px #000;

	}	
	
	div.print-button
	{
		width: 200px;
		
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 999;
		
		margin: 80px 0px 0px -100px;
		padding: 10px 0px;
		display: table;
		
		background-color: #fff;
		
		color: #DD0000;
		text-align: center;
		
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px;
		border-radius: 4px;
		
		-moz-box-shadow: 0px 0px 5px #000;
		-webkit-box-shadow: 0px 0px 5px #000;
		box-shadow: 0px 0px 5px #000;
	}

	body div.popup-bg
	{
		position: fixed;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		z-index: 998;
		
		display: none;
		
		background-color: #DD0000;
		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
	
	body div.popup-container
	{
		width: 200px;
		height: 200px;
		
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 999;
		
		padding: 25px;
		display: none;
		
		background-color: #fff;
		
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
		
		-moz-box-shadow: 0px 0px 20px #DD0000;
		-webkit-box-shadow: 0px 0px 20px #DD0000;
		box-shadow: 0px 0px 20px #DD0000;
		
		transform: translate(-50%, -50%);
	}
	
		body div.popup-container iframe
		{
			width: 100%;
			height: 100%;
			
			border: none;
		}
	
		body div.popup-container div.popup-close
		{
			width: 40px;
			height: 40px;
			
			position: absolute;
			top: -20px;
			right: -20px;
			
			display: flex;
			align-items: center;
			justify-content: center;
			
			-moz-border-radius: 40px;
			-webkit-border-radius: 40px;
			-khtml-border-radius: 40px;
			border-radius: 40px;
			
			background-color: #000;
			border: 4px solid #fff;
			
			font-size: 22px;
			color: #fff;
		}

	body div.menu
	{
		width: 60px;
		
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		
		background-color: #232731;
	}
	
		body div.menu ul
		{
			width: calc(100% - 24px);
			
			margin: 0px;
			padding: 12px;
		}
		
			body div.menu ul a
			{
				text-decoration: none !important;
			}
		
			body div.menu ul li
			{
				margin: 0px 0px 10px 0px;
				padding: 0px;
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				list-style-type: none;
				
				background-color: #313746;
				
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-khtml-border-radius: 5px;
				border-radius: 5px;
			}
			body div.menu ul li.gold
			{
				background-color: #DAA520;
				color: #FAFAD2;
			}
			body div.menu ul li.red
			{
				background-color: #DE0000;
			}
			body div.menu ul li.active
			{
				background-color: #DE0000;
				
				color: #fff;
			}
				body div.menu ul li.gold span
				{
					color: inherit;
				}
				
				body div.menu ul li.active span
				{
					color: #fff;
				}
			
				body div.menu ul li img
				{
					width: 100%;
				}
				
				body div.menu ul li span
				{
					width: 30px;
					height: 30px;
					
					margin: 3px 0px;
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					font-size: 17px;
					color: #798295;
				}
				
	body div.header
	{
		height: 52px;
		
		position: fixed;
		top: 0px;
		right: 0px;
		left: 60px;
		
		padding: 0px 10px;
		
		background-color: #fff;
		
		border-bottom: 1px solid #ddd;
	}
		
		body div.header div.info
		{
			margin: 12px 0px 10px 5px;
			padding: 7px 10px;
			float: left;
			
			background-color: black;
			
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			-khtml-border-radius: 4px;
			border-radius: 4px;
			
			font-size: 13px;
			color: #fff;
		}
		body div.header div.info.blue
		{
			background-color: #0069d4;
		}
		body div.header div.info.red
		{
			background-color: #DD0000;
		}
		body div.header div.info.yellow
		{
			background-color: #DAA520;
		}
		body div.header div.info:first-child
		{
			margin: 12px 0px 10px 10px;
		}
		
			body div.header div.info span
			{
				margin: 0px 3px 0px 0px;
			}
		
		body div.header div.button
		{
			width: 32px;
			height: 32px;
			
			margin: 10px 5px 10px 0px;
			float: right;
			
			display: flex;
			align-items: center;
			justify-content: center;
		}
		body div.header div.button:first-child
		{
			margin-right: 10px;
		}
		
			body div.header div.button span
			{
				width: 100%;
				
				font-size: 25px;
				color: #000;
			}
			body div.header div.button span.red
			{
				color: #DE0000;
			}
			body div.header div.button span.far.fa-bell
			{
				color: #ccc;
			}
			body div.header div.button span.fas.fa-bell
			{
				color: #DAA520;
			}
			
	body div.content
	{
		position: absolute;
		top: 73px;
		right: 20px;
		bottom: 20px;
		left: 80px;
		
		padding: 20px;
	}
	
		body div.content div.container
		{
			position: absolute;
			top: 0px;
			right: 0px;
			bottom: 50px;
			left: 0px;
			
			padding-bottom: 10px;
			
			background-color: #fff;
			border: 1px solid #ddd;
			
			overflow-x: hidden;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
		}
		body div.content div.container.small
		{
			bottom: 270px;
		}
		body div.content div.container.gray
		{
			background-color: transparent !important;
			border: none !important;
		}
		
			body div.content div.container img
			{
				width: 400px;
				
				position: absolute;
				top: 50%;
				left: 50%;
				
				transform: translate(-50%, -50%);
			}
			
			body div.content div.container table
			{
				width: 100%;
			}
			
				body div.content div.container table td
				{
					padding: 10px 15px;
					
					border-bottom: 1px solid #eee;
				}
				body div.content div.container table tr.active td
				{
					background-color: #eee;
				}
				
				body div.content div.container table thead td
				{
					padding-top: 15px;
					
					font-weight: bold;
					color: #ccc;
				}
				
				body div.content div.container table tbody td
				{
					font-size: 14px;
				}
		
		body div.content div.button-row
		{
			height: 40px;
			
			position: absolute;
			right: 0px;
			bottom: 0px;
			left: 0px;
		}
		
			body div.content div.button-row input
			{
				width: auto !important;
				
				margin: 0px 5px 0px 0px;
				float: left;
			}
			
			body div.content div.button-row div.spacer
			{
				width: 1px;
				height: 40px;
				
				margin: 0px 10px !important;
				float: left;
				
				background-color: #ccc;
			}
		
		body div.content div.main-keypad
		{
			height: 250px;
			
			position: absolute;
			right: 0px;
			bottom: 0px;
			left: 0px;
		}
		
			body div.content div.main-keypad a
			{
				display: block;
				
				color: inherit;
				text-decoration: none;
			}
		
			body div.content div.main-keypad span.search-icon
			{
				position: absolute;
				top: 11px;
				left: 10px;
			}
		
			body div.content div.main-keypad span.grand-total-icon
			{
				position: absolute;
				top: 57px;
				left: 10px;
				
				font-size: 12px;
			}
		
			body div.content div.main-keypad div.block
			{
				height: 100%;
				
				float: left;
			}
			
				body div.content div.main-keypad div.block ul
				{
					margin: 0px;
					padding: 0px;
				}
				
					body div.content div.main-keypad div.block ul li
					{
						float: left;
						
						display: flex;
						align-items: center;
						justify-content: center;
						
						background-color: #fff;
						
						border: 1px solid #ddd;
						
						-moz-border-radius: 5px;
						-webkit-border-radius: 5px;
						-khtml-border-radius: 5px;
						border-radius: 5px;
						
						font-size: 30px;
						color: #798295;
						
						list-style-type: none;
					}
			
			body div.content div.main-keypad div.block-1
			{
				width: calc(30% - 10px);
				
				margin: 0px 20px 0px 0px;
			}
			
				body div.content div.main-keypad div.block-1 ul li
				{
					width: calc(33.33% - 4px);
					height: 91px;
					
					margin: 0px 0px 0px 3px;
				}
				body div.content div.main-keypad div.block-1 ul li:first-child
				{
					margin: 0px;
				}
			
			body div.content div.main-keypad div.block-2
			{
				width: 10%;
			}
			
				body div.content div.main-keypad div.block-2 ul
				{
					height: 100%;
				}
			
					body div.content div.main-keypad div.block-2 ul li
					{
						width: calc(100% - 2px);
						height: calc(25% - 4px) !important;
						
						margin: 3px 0px 0px 0px;
					}
					body div.content div.main-keypad div.block-2 ul li:first-child
					{
						margin: 0px;
					}
			
			body div.content div.main-keypad div.block-3
			{
				width: calc(40% - 40px);
				
				margin: 0px 20px 0px 10px;
			}
			
				body div.content div.main-keypad div.block-3 ul
				{
					height: 100%;
				}
			
					body div.content div.main-keypad div.block-3 ul li
					{
						width: calc(33.33% - 4px);
						height: calc(25% - 4px) !important;
						
						margin: 3px 3px 0px 0px;
					}
					body div.content div.main-keypad div.block-3 ul li.last
					{
						margin-right: 0px !important;
					}
					body div.content div.main-keypad div.block-3 ul li.top
					{
						margin-top: 0px !important;
					}
			
			body div.content div.main-keypad div.block-4
			{
				width: 20%;
			}
			
				body div.content div.main-keypad div.block-4 ul
				{
					height: 100%;
				}
			
				body div.content div.main-keypad div.block-4 ul li
				{
					width: calc(50% - 4px);
					height: calc(25% - 3px);
					
					margin: 0px 0px 3px 3px;
				}
				body div.content div.main-keypad div.block-4 ul li.first
				{
					margin-left: 0px;
				}
				body div.content div.main-keypad div.block-4 ul li.submit
				{
					width: calc(100% - 2px) !important;
					
					background: none;
					border: none;
				}
				body div.content div.main-keypad div.block-4 ul li.large
				{
					width: calc(100% - 2px) !important;
					height: calc(50% - 3px);
					
					margin: 0px;
				}
				
					body div.content div.main-keypad div.block-4 ul li.large span
					{
						font-size: 65px;
						color: #DD0000;
					}