html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.navbar {
	color: white;
	background-color: green;
	min-height: 15px;
	padding-right: 10px;
}

.navbar-brand {
	color: white;
	font-size: 180%;
	font-family: 'Lobster', 'Roboto';
	margin: 0;
	padding: 15px;
}

input[type=text] {
	color: green;
	width: 130px;
	height: 30px;
	margin-top: 10px;
	border: 1px solid white;
	border-radius: 10px;
	box-shadow: 6px 6px 12px grey;
	font-size: 16px;
	background-color: white;
	background-image: url('searchicon.png');
	background-repeat: no-repeat;
	padding-left: 40px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
	width: 600px;
}

#clock {
	position: absolute;
	float: right;
	border: 2px solid green;
	border-radius: 50%;
	background: rgba(230, 230, 230, 0.4);
	top: 65px;
	right: 10px;
	z-index: 3;
	display: flex;
}

#map {
	height: 100%;
}

#searchListBox {
	visibility: hidden;
	position: absolute;
	width: 40%;
	top: 75px;
	left: 30%;
	z-index: 5;
	border: 2px solid green;
	border-radius: 25px;
	background: rgba(230, 230, 230, 0.4);
	box-shadow: 6px 6px 12px grey;
	font-family: 'Roboto', 'sans-serif';
	line-height: 40px;
}

#searchList {
	width: 100%;
	font-size: 130%;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#searchList li {
	border: 1px solid green;
	margin-top: -1px;
	background-color: #f6f6f6;
	padding: 12px;
	display: block;
	cursor: pointer;
}

#floatingPanel {
	visibility: hidden;
	position: absolute;
	width: 25%;
	top: 75px;
	left: 5%;
	z-index: 5;
	border: 2px solid green;
	border-radius: 25px;
	background: rgba(230, 230, 230, 0.4);
	box-shadow: 6px 6px 12px grey;
	font-family: 'Roboto', 'sans-serif';
	line-height: 40px;
	align-items: center;
	justify-content: center;
}

.alert {
	margin: 20px;
	line-height: 20px;
	font-size: 90%;
	text-align: center;
	color: green;
	background-color: white;
	border-radius: 10px;
	border: 1px solid green;
	box-shadow: 6px 6px 12px grey;
}