.green-button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 .green-button1 {
	background-color: #4CAF50; /* Green */
	border: none;
	border-radius: 50%;
	color: white;padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
 .green-button2 {
	background-color: #4CAF50; /* Green */
	border: none;
	border-radius: 12px;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 .green-button3 {
 background-color: #4CAF50; /* Green */
 border: none;border-radius:4em;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 .greenBtnMap {
 background: url('maps.png') no-repeat;
 padding-left: 16px;
 border: none;
 border-radius:12px;
 color: white;
 padding: 15px 32px;
 text-align: right;text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
}																																		
 .ActualTripBtnMap {
 background: url('actualtrip.png') no-repeat;
 padding-left: 16px;
 border: none;
 border-radius:12px;
 color: white;
 padding: 15px 32px;
 text-align: right;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
}
 .msgBtn {
 background: 10px url('Mail.png') no-repeat;padding-left: 10px;background-color: #4CAF50; /* Green */
 border: none;color: white;padding: 15px 32px;text-align: right;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);vertical-align: middle;
}
 .msgBtnYes1 {
	background: 10px url('Mail.png') no-repeat;
	padding-left: 10px;
	background-color: red; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: right;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	vertical-align: middle;
}
 .msgBtnYes2 {
	background: 10px url('Mail.png') no-repeat;
	padding-left: 10px;
	background-color: red; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: right;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	vertical-align: middle;
}
 .truck {
 background: url('truck.png') no-repeat bottom;padding-left: 16px;border: none;border-radius:12px;color: white;padding: 15px 32px;text-align: right;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
}
 .key {
 background: url('key.png') no-repeat bottom;
 padding-left: 6px;
 border: none;
 border-radius:2px;
 color: white;
 padding: 6px 6px;
 text-align: right;
 text-decoration: none;
 display: inline-block;
 font-size: 8px;
 margin: 2px 2px;
 cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
}

 .exit {
	background: 75px url('exit.png') no-repeat;
	padding-left: 10px;
	border: none;
	border-radius: none;
	color: Black;
	padding: 15px 50px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
 .nextStopBtn {
 background: 110px url('Next.png') no-repeat;padding-left: 10px;border-style: solid;border-color: #4CAF50;border-radius: 12px;color: green;padding: 15px 32px;text-align: left;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);vertical-align: middle;
}
 .refreshBtn {
 background: url('refresh.png') no-repeat;background-color: Transparent;border: none;border-radius: 50%;color: Black;padding: 20px 30px;color: green;text-align: left;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;vertical-align: middle;
}
 .refreshMapBtn {
 background: url('Refresh_googlemap.png') no-repeat;background-color: Transparent;border: none;border-radius: none ;color: Black;padding: 30px 50px;color: green;text-align: left;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;vertical-align: middle;}
 .find {
 background: url('find.png') no-repeat;background-color: Transparent;border: none;border-radius: none ;color: Black;padding: 30px 50px;color: green;text-align: left;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;vertical-align: middle;
}
 .refreshSmallBtn {
	background: url('refreshsmall.png') no-repeat;
	background-color: Transparent;
	border: none;
	color: Black;
	padding: 10px 15px;
	color: green;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;vertical-align: middle;
}
 .darkred-button {
	background-color: #8B0000; /* Dark Red */
	border: none;
	border-radius: 12px;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 .data-display {
	color: blue;
}
 .helpBtn {
	background: url('Help.png') no-repeat;
	background-color: Transparent;
	border: none;
	padding: 30px 50px;
	color: green;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
 	transition-duration: 0.4s;
	vertical-align: middle;
}
 .helpSmallBtn {
	background: url('HelpSmall.png') no-repeat;
	background-color: Transparent;
	border: none;
	color: Black;
	padding: 18px 15px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin: 2px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
 	transition-duration: 0.4s;
	vertical-align: middle;
}
.full-screen {
	background: 2px url('full-screen.png') no-repeat;
	border: none;
	padding: 13px 14px;
}
.green-rectangle{
	background:green;
	height:10px;
	border: none;
}
.red-rectangle{
	background-color: #ff8080;
	height:10px;
	border: none;
}
.grey-rectangle{
	background:gray;
	height:10px;
	border: none;
}
.lightgrey-rectangle{
	background:#d3d3d3;
	height:10px;
	border: none;
}
.lightblue-rectangle{
	background:lightblue;
	height:10px;
	border:2px solid #00008b;
}
.green-button4 {
	background-color: #4CAF50; /* Green */
	border: none;
	border-radius: 12px;
	color: white;
	padding: 3px 7px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
 .locked-input {
	border: none;
	background: transparent;
	color: blue;
	height: auto;
	width: auto;
}

 .calendar {

        max-width: 240px;

        margin-left: auto;

        margin-right: auto;

      }

 .calendar table {

        width: 100%;

      }

 .dateField {
        width: 140px;

        padding: 6px;

        -webkit-border-radius: 6px;

        -moz-border-radius: 6px;

        color: #555;

        background-color: white;

        margin-left: auto;

        margin-right: auto;

        text-align: center;

      }

 #popupDateField:hover {

        background-color: #cde;

        cursor: pointer;

      }

 .directions {
	background: 150px url('directions.png') no-repeat;
	padding-left: 10px;
	border: none;
	border-radius: none;
	color: Black;
	padding: 15px 70px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
 .driver-button {
	background: 43px url('location.jpg') no-repeat;
	background-color: #4CAF50;
        border-style: solid;
        border-color: #4CAF50;
	border-radius: 10px;
	color: white;
	padding: 3px 1px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
 .orange-button {
	background-color: #FFA500; /* Green */
	border: none;
	border-radius: 12px;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.orange-rectangle{
	background-color: #ffa500;
	height:10px;
	border: none;
}
 .camera-button {
	background: url('camera.png') no-repeat;
	padding-left: 16px;
	border: none;
	border-radius: 12px;
	color: Black;
	padding: 32px 30px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 0;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
 .poco-camera-button {
	background: url('poco-camera.png') no-repeat;
	padding-left: 16px;
	border: none;
	border-radius: 12px;
	color: Black;
	padding: 32px 30px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 0;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
 .send-button {
	background: url('send.png') no-repeat;
	padding-left: 16px;
	border: none;
	border-radius: 12px;
	color: Black;
	padding: 32px 30px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 0;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.dropbtn {
  background: url('arrowDown.png') no-repeat;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}