*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.wrapper{
	height: 50px;
	overflow: visible;
	backface-visibility:hidden;
	margin-top: 10px;
}

.search-box{
	height: 40px;
	background: white;
	overflow: hidden;
	position: relative;
	border-radius: 15px;
	border: red;
}

.search-box_input{
	height: 100%;
	width: 100%;
	background: #f2f9fa;
	color: brown;
	font-size: 16px;
	padding: 20px 80px 20px 20px;
	border: lightcoral;
	outline: none;
}

.search-box_btn{
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
	font-size: 20px;
	border: none;
	outline: none;
}

li{
	display: flex;
	cursor: pointer;
}

.content{
	display: none;
	background-color: #bef7b2;
	padding: 10px;
	margin-top: 10px;
	border-radius: 10px;
}

.wrapper.active .content{
	display: block;
}

.content .options{
	margin-left: 10px;
	max-height: 250px;
	overflow-y: auto;
}

.options::-webkit-scrollbar{
  width: 12px;
}

.options::-webkit-scrollbar-track{
  background: #f1f1f1;
  border-radius: 25px;
}

.options::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 25px;
}

.options::-webkit-scrollbar-thumb:hover{
  background: #b4b4b4;
}

.options li{
  height: 30px;
  font-size: 18px;
}

.options li:hover{
	background: #cfe0fa;
}

.btnMobile{
	display: none;
}

.form-Mobile{
	width: 30%;
	align-items: center;
	margin: auto;
	padding: 15px;
	border: 2px solid darkblue;
	border-radius: 20px;
	box-shadow: 5px 5px 10px gray;
}

	.divMobile{
		display: block;
		background-color: #4287f5;
	}

.botton-nav-Mobile{
	display: none;
}

@media (max-width: 700px){
	.wrapper{
/*		max-width: 200px;*/
		height: 70px;
		overflow: visible;
		backface-visibility:hidden;
		margin-top: 10px;
	}

	.search-box{
		background: white;
		width: 380px;
		height: 50px;
		overflow: hidden;
		position: relative;
		border-radius: 15px;
		border: red;
	}

	.content{
		display: none;
		background-color: #bef7b2;
		width: 400px;
		padding: 10px;
		margin-top: 10px;
		border-radius: 10px;
	}

	.content .options{
		margin-left: 10px;
		max-height: 250px;
		width: 380px;
		overflow-y: auto;
	}
	.btnMobile{
		background: #a332fa;
		color: white;
		height: 40px;
		font-size: 15px;
		border-radius: 10px;
		padding: 10px;
		display: inline-block;
/*		margin-left: 5px;*/
	}
	.menuMobile{
		display: inline-block;
		background-color: red;
	}
	.divMobile{
		display: none;
	}
	.form-Mobile{
		width: 95%;
		align-items: center;
		padding: 15px;
		border: 2px solid royalblue;
		border-radius: 20px;
		box-shadow: 5px 5px 10px gray;
	}

	.botton-nav-Mobile{
		display: block;
		padding: 6px;
		background: #aef5dd;
		position: fixed;
		bottom: 5px;
		width: 13%;
		border: 1px solid #8AC007;
		overflow: visible;
		z-index: 999;
	}
	.botton-nav-Mobile #linksMobile{
		display: none;
		position: absolute;
		background: #bcccc7;
		bottom: 60px;
		font-size: 20px;
		width: 400%;
	}

	.botton-nav-Mobile #barMobile{
		display: none;
		position: absolute;
		background: #bcccc7;
		bottom: 0px;
		left: 60px;
		font-size: 20px;
		width: 360px;
		height: 50px;
		padding: 6px;
	}	
	
	.botton-nav-Mobile #linksMobile a{
		display: block;
		margin: 20px 10px;
		background-color: #dce0f5;
		height: 40px;
		border-radius: 15px;
		padding: 6px;
	}

	#mc_motorbike_available{
		width: 420px;
	}
	
	#booking_repair{
		display: none;
	}

	.navBarMenu{
		display: none;
	}

	#contract_Main_contents{
		display: none;
	}

	#divBookingList{
		margin-left: 20px;
		width: 400px;
	}
}