@media all and (min-width: 480px) {
	div.container {
		display: none;
	}
}

body {
	background-color: #f5f5f5;
}

div.loader {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 999;
	
	background-color: #f9f9f9;
}

	div.loader div.icon {
		width: 50px;
		height: 50px;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	div.loader div.icon span {
		font-size: 50px;

		animation: spin 1s linear infinite;
	}

div.container {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	
	background-color: #f5f5f5;
}

	div.container div.content {
		display: none;
		padding: 20px;
		
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 94px;
		left: 0px;
	}
		div.container div.content:first-child {
			display: block;
		}
		
		div.container div.content div.title {
			width: calc(100% - 20px);
			
			margin: 0px 0px 20px 0px;
			padding: 13px;
			
			background-color: #6aac28;
			border-radius: 6px;
			text-align: center;
			font-size: 20px;
			color: #fff;
		}
		
		div.container div.content div.scroll {
			padding: 20px 0px 0px 0px;
			
			position: absolute;
			top: 89px;
			right: 20px;
			bottom: 0px;
			left: 20px;
			
			border-top: 1px solid #ccc;
			
			overflow-x: hidden;
			overflow-y: scroll;
		}
		
		div.container div.content div.agenda {
			width: calc(100% - 44px);
			
			margin: 0px 0px 20px 0px;
			padding: 20px;
			
			position: relative;
			
			background-color: #eee;
			border: 2px solid #ccc;
			border-radius: 6px;
			font-size: 18px;
			line-height: 24px;
		}
			div.container div.content div.agenda.gray {
				background-color: #f1f1f1;
				border-color: #aaa;
				color: #ccc;
			}
		
			div.container div.content div.agenda small {
				font-size: 15px;
			}
		
			div.container div.content div.agenda div.charger {
				width: 30px;
				height: 30px;
				
				display: flex;
  				align-items: center;
		 		justify-content: center;
				
				position: absolute;
				top: 5px;
				right: 42px;
				
				background-color: #ac2828;
				border-radius: 10px;
				border: 2px solid #ccc;
				color: #ffffff;
			}
			div.container div.content div.agenda div.charger.right {
				position: absolute;
				top: 5px;
				right: 5px;
			}

			div.container div.content div.agenda div.print {
				width: 30px;
				height: 30px;
				
				display: flex;
  				align-items: center;
		 		justify-content: center;
				
				position: absolute;
				top: 5px;
				right: 5px;
				
				background-color: #6aac28;
				border-radius: 10px;
				border: 2px solid #ccc;
				color: #fff;
			}
			
				div.container div.content div.agenda div.charger span,
				div.container div.content div.agenda div.print span {
					font-size: 18px;
				}

			div.container div.content div.agenda hr {
				width: 100%;
				height: 1px;
				
				margin: 20px 0px;
				
				background-color: #bbb;
				border: none;
				color: #bbb;
			}
			
			div.container div.content div.agenda input[type='text'] {
				width: calc(100% - 32px);
				
				margin: 20px 0px -10px 0px;
				padding: 12px 15px;
				
				background: #fff;
				border: 1px solid #000;
				border-radius: 5px;
				font-size: 16px;
				color: #000;
				letter-spacing: 0.5px;
				text-transform: uppercase;
				text-align: center;
			}
			
				div.container div.content div.agenda.gray input[type='text'] {
					background: #ddd;
					border: 1px solid #ccc;
					border-radius: 5px;
					font-size: 16px;
					color: #aaa;
					text-transform: uppercase;
					text-align: center;
				}
			
			div.container div.content div.agenda input[type='button'] {
				width: calc(100% - 0px);
				
				margin: 20px 0px 0px 0px;
				padding: 12px 15px;
				
				background: #000;
				border: 1px solid #000;
				border-radius: 5px;
				font-size: 16px;
				color: #fff;
				letter-spacing: 0.5px;
				text-transform: uppercase;
				text-align: center;
			}
				div.container div.content div.agenda.gray input[type='button'] {
					width: calc(100% - 0px);
					
					margin: 20px 0px 0px 0px;
					padding: 12px 15px;
					
					background: #ddd;
					border: 1px solid #ccc;
					border-radius: 5px;
					font-size: 16px;
					color: #aaa;
					text-transform: uppercase;
					text-align: center;
				}
		
		div.container div.content div.empty {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
			div.container div.content div.empty span {
				font-size: 150px;
				color: #aaa;
			}
	
	div.container div.menu {
		padding: 20px 0px;
		
		position: absolute;
		right: 0px;
		bottom: 0px;
		left: 0px;
		
		background-color: #eee;
		border-top: 1px solid #ccc;
	}
	
		div.container div.menu ul {
			height: 53px;
			
			margin: 0px;
			padding: 0px 10px;
			
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
		}
		
			div.container div.menu ul li {
				margin: 0px 5px;
				padding: 14px 100px 14px 20px;
				display: inline-block;
				
				position: relative;
				
				background-color: #ddd;
				border-radius: 5px;
				
				list-style-type: none;
				font-size: 20px;
				color: #aaa;
				text-transform: uppercase;
			}
				div.container div.menu ul li.counter {
					padding: 14px 20px 14px 20px;
					
					background-color: #6aac28;
						
					color: #fff;
				}
				
					div.container div.menu ul li.counter span {
						margin: 2px 5px 0px 0px !important;
						float: left;
						font-size: 20px !important;
					}
				
				div.container div.menu ul li.active {
					background-color: #000;
					
					color: #fff;
				}
			
				div.container div.menu ul li div {
					width: 80px;
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					position: absolute;
					top: 0px;
					right: 0px;
					bottom: 0px;
					
					background-color: #bbb;
					border-radius: 0px 5px 5px 0px;
					color: #aaa;
				}
					div.container div.menu ul li.active div {
						background-color: #6aac28;
						
						color: #fff;
					}

						div.container div.menu ul li div span {
							margin: 0px 0px 0px 0px;
							font-size: 18px;
						}
					

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes blink { 
   50% { border-color: red; } 
}