/*
Hengevelde blauw: #00aee5
Hengevelde Roze: #ec008c

*/
body{
	margin: 0;
	height: 100vh;
	background: oldlace;
}


#container{
	display: flex; /* displays flex-items (children) inline */
	flex-direction: column; /* stacks them vertically */
	height: 100%;
	justify-content: space-between;
	/*following is needed for the glaspannel to work*/
	position: relative;
	overflow: hidden;
}

#glasspanel {
	display:none;
	position:absolute;
	top:0px;
	bottom:0px;
	opacity:0.8;
	width:100%;
	height: 100%;
	color: ghostwhite;
	text-align: center;
	padding-top: 45%;
	background: #505050;
	z-index: 5;
	font-size: 5rem;
	cursor: no-drop;
}

#Header{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #00BAF0;
	background: linear-gradient(to left, #00aee5, #ec008c);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #FFF;
	height: 60px;
	padding: 1em;
}

#logo{
	height: 100%;
	border-radius: 50%;
}
#RoomName{
	font-size: xx-large;
}

#ProductList{
	flex: 1;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.SingleItem{
	width: 47%;
	background-color: honeydew;
	margin: 1% 0;
	border-radius: 12px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 30%;
	min-width: 300px;
	box-shadow: 8px 10px 5px 2px rgba(138,148,138,1);
}

.itemColumn{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 42%;
}

.itemName{
	font-size: xx-large;
}

.counterColumn{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.down{
	transform: rotate(180deg);
}

.counterButton{
	background-image: url("../img/arrow.png");
	background-size: contain;
    background-repeat: no-repeat;
	height: 3.5rem;
	width: 3.5rem;
}
.up:active{
	transform: translateY(-8px);
	transition:translateY 200ms;
}

.down:active{
	transform: translateY(8px) rotate(180deg);
	transition:translateY 200ms;
}


.itemCount{
	padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    text-align: center;
    font-size: xx-large;
}

#Footer{
	background-color: #ec008c;
	background: linear-gradient(to left, #00aee5, #ec008c);
	height: 70px;
	height: 6%;
	min-height: 55px;
	display: flex;
    justify-content: space-around;
    align-items: center;
	padding:1%;
}

#orderButton, #HulpButton, #AfvalButton{
	height: 100%;
	width: 22%;
	color: white;
    font-weight: bold;
    border-radius: 15px;
}

#orderButton{
	background: linear-gradient(145deg, #00baf5, #009dce);
	border: 1px solid #009dce;
}
#orderButton:hover{
	background: linear-gradient(145deg, #009dce, #00baf5);
}
#HulpButton{
	background: linear-gradient(145deg, #afd765, #94b555);
	border: 1px solid #94b555;
}
#HulpButton:hover{
	background: linear-gradient(145deg, #94b555, #afd765);
}
#HulpButton.busy{
	background: linear-gradient(145deg, #e6923f, #da720b);
	border: 1px solid da720b;
}
#AfvalButton{
	background: linear-gradient(145deg, #afd765, #94b555);
	border: 1px solid #94b555;
}
#AfvalButton:hover{
	background: linear-gradient(145deg, #94b555, #afd765);
}

#AfvalButton.busy{
	background: linear-gradient(145deg, #e6923f, #da720b);
	border: 1px solid da720b;
}


.menu {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	margin: 0;
	padding: 0;
	z-index:1;
	position: absolute;
	top: 0;
	margin-top: 90px;
	left: 0;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
  }
  
  .menu-button-container {
	display: flex;
	height: 100%;
	width: 30px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  }
  
  #menu-toggle {
	display: none;
  }
  
  .menu-button,
  .menu-button::before,
  .menu-button::after {
	display: block;
	background-color: #fff;
	position: absolute;
	height: 4px;
	width: 30px;
	transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 2px;
  }
  
  .menu-button::before {
	content: '';
	margin-top: -8px;
  }
  
  .menu-button::after {
	content: '';
	margin-top: 8px;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::before {
	margin-top: 0px;
	transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
	background: rgba(255, 255, 255, 0);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
	margin-top: 0px;
	transform: rotate(-405deg);
  }
  
	#menu-toggle ~ .menu li {
	  height: 0;
	  margin: 0;
	  padding: 0;
	  border: 0;
	  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	#menu-toggle:checked ~ .menu li {
	  border: 1px solid #333;
	  height: 2.5em;
	  padding: 0.5em;
	  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.menu > li {
	  display: flex;
	  justify-content: center;
	  padding: 0.5em 0;
	  width: 100%;
	  color: white;
	  background-color: #222;
	  margin: 0 1rem;
	  overflow: hidden;
	}

	.menu > li:hover{
		background:linear-gradient(to right,  #00aee5, #ec008c);
	}
	.menu > li:active{
		background:linear-gradient(to right,  #00aee5, #ec008c);
	}
	.menu > li:not(:last-child) {
	  border-bottom: 1px solid #444;
	}

	.hidden{
		visibility: hidden;
	}

	.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  display: none;
}

#scanner{
	width: 80%;
	margin: auto; /* 15% from the top and centered */
  padding: 20px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}