/* Ashraf & Vincent */

:root {
  --tabPurple:   rgb( 86,  2, 105);
  --hoverPurple: rgb(106, 22, 125);
}

#tiger{
	    display: block;
      left: 3%;
      position: absolute;
      top: 5%;
      z-index: 1;
      width: 85;
}

#head{
	   background-color: var(--hoverPurple);
	   width: 100%;
	   height: 100px;
	   font-size: 2em;
	   border: 3px solid black;
	   text-align: center;
}

#refer{
	   position:fixed; 
     bottom: 1%;
     right: 1%;
}

#logoutBtn{
	   width: 100px;
	   text-align: center;
}

#logdiv{
	   width: 100px;
	   margin: auto;
}

#search{
	   background-color: rgb(216, 151, 232);
	   color: black;
     border: 3px solid black;
}

.account{
	width: 600px;
	height: 70px;
	margin: auto;
}



.account button{
  position: relative;
  background-color: var(--tabPurple);
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px;
  font-size: 16px;
  width: 150px;
  height: 70px;
}
.account button:hover {
  background-color: var(--hoverPurple);
}

#banner{
	width: 100%;
	height: 170px;
}

.button{
	color: rgb(255, 255, 255);
	background-color: var(--tabPurple);
	font-size: 15px;
	border-style: outset;
	cursor: pointer;
	border-radius: 10px;
	border-color: var(--tabPurple);
}
.button:hover{
	background-color: rgb(106, 22, 125);
}

.center{
	width: 300px;
	height: 50px;
	margin-left:  auto;
	margin-right: auto;
}

.confirm{
	font-size: 1.5em;
	padding-top: 30px;
	border-radius: 25px;
	text-align: center;
	color: white;
	position: fixed;
  top: 50%;
  right: 20%;
  width: 60%;
  height: 10%;
  background-color: rgb(123, 153, 181);
}

.destSelect{
	background-color: white;
	width: 35%;
}

.okButton{
	color: black;
	width: auto;
	background-color: rgb(179, 166, 191);
	font-size: 1.5em;
	border-style: outset;
	cursor: pointer;
	border-radius: 10px;
	border-color: var(--tabPurple);
}

.pageHead{
	text-align: center;
	padding-top: 20px;
	font-size: 1.5em;
}

.tab {
	position: relative;
  background-color: var(--tabPurple);
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px;
  font-size: 18px;
  width: 20%;
  height: 70px;
}
.tab:hover {
  background-color: var(--hoverPurple);
}

.rideTab{
	position: relative;
  background-color: var(--tabPurple);
  color: white;
  border: none;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px;
  font-size: 16px;
  width: 150px;
  height: 50px;
}
.rideTab:hover {
  background-color: var(--hoverPurple);
}

.logref{
	margin-left: auto;
	margin-right: auto;
	font-size: 18px;
	text-align: center;
}

.form{
  width: 350px;
  margin: auto;
  color: var(--tabPurple);
}

.requestList{
	color: var(--tabPurple);
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	font-family: helvetica;
}

.requestList label{
	width: 150px;
}

fieldset{
	background-color: rgb(230, 216, 237);
	width: 500px;
	margin: auto;
	border-radius: 15px;
}

h1{
	text-align: center;
	color: rgb(255, 255, 255);
	padding: 20px;
	background-color: rgb(122, 7, 148);
}

h2{
	text-align: center;
	color: var(--tabPurple);
}

h4{
	text-align: center;
	color: var(--tabPurple);
}

input{
	width: 35%;
}

label{
	display: inline-block;
	width: 200px;
}

input[type="radio"] {
  margin-right: 0;
}

@media only screen and (max-width: 650px) {
  .account{
  	width: 90%;
  	margin: auto;
  }
  .account button{
  	width: 25%;
  	font-size: 14px;
  }
}