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

/*LEVEL 0*/
#map {
  height: 100%;
  z-index: 0;
  background-color:blue;
}

/*LEVEL 1*/
#homeBar{
  display:none;
  z-index: 1;
  position:absolute;
  top:0;
  left:0;

  background-color:#75d0ff;
  opacity:0.90;
  width:100%;
  height:13%;
  text-align:center;
}

#homeBarLogo{
  display:inline-block;
  height:90%;
  opacity:100%;
}

/*LEVEL 2*/

#homeIcon{
  position: relative;
  width: 50%;
  height: 50%;
  left:25%;
}

#homeButton{
  display: none;
  z-index: 2;
  position: absolute;
  bottom: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0)
}

/*LEVEL 3*/

#greyMask{
  display:none;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.70;
}

/*LEVEL 4*/
#buttonGround{
  display:none;
  z-index: 4;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 45%;
  width: 100%;
  background-color: #E8E7EC;
  opacity: 1;
}

/*LEVEL 5*/
#buttonBox{
  display:none;
  z-index: 5;
  position:absolute;
  bottom:0%;
  width:100%;
  height:45%;
}

.options{
  position:relative;
  width:100%;
  height:16%;
  margin-top:1px;
  background-color: white;
}

.options p{
  font-size: 0.9rem;
  font-family: Georgia, serif;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

#Cancel{
  margin-top:1%;
}

#getRidePanel{
  display:none;
  z-index:6;
  position: absolute;
  top:13%;
  height:20%;
  background-color:#75d0ff;
  opacity:0.90;
  width:100%;
}

.inputField{
  position: relative;
  top:0;
  left:0;
  height:33.3%;
  width:100%;
}

.inputFieldText{
  position: absolute;
  top:0;
  left:0;
  width:20%;
  height:100%;
}

.inputFieldTextBox{
  position: absolute;
  top:0;
  right:10%;
  width:70%;
  height:100%;
}

.inputField p{
  font-size: 0.9rem;
  font-family: Georgia, serif;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.inputField input{
  font-size: 0.9rem;
  font-family: Georgia, serif;
  width:100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

#getSearch{
  background-color: #47fc23;
  width:50%;
  height:90%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

#getSearch p{
  color: white;
  font-size:1.2rem;
  font-family: "Comic Sans MS", cursive, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

#getRideDriverPanel{
  display:none;
  z-index:6;
  position: absolute;
  bottom:5%;
  left:5%;
  background-color:#75d0ff;
  opacity:0.80;
  width:90%;
  height:25%;
}

#getRideDriverImage{
  position: absolute;
  top:0%;
  left:0%;
  width:30%;
  height:80%;
}
#getRideDriverInfo{
  position: absolute;
  font-size:0.7rem;
  top:0%;
  right:0%;
  width:60%;
  height:80%;
}
#getRideDriverButtons{
  position: absolute;
  bottom:0%;
  left:0%;
  width:100%;
  height:20%;
  background-color: green;
}
#getRideDriverAccept{
  position: absolute;
  width:33.3%;
  height:100%;
  left:0;
  background-color: #47fc23;
}
#getRideDriverNext{
  position: absolute;
  width:33.3%;
  height:100%;
  left:33.3%;
  background-color: #BBBBBB;
}
#getRideDriverQuit{
  position: absolute;
  width:33.3%;
  height:100%;
  left:66.6%;
  background-color: #FF8888;
}
#getRideDriverButtons div p{
  color: white;
  font-size:1rem;
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -80%);
  text-align:center;
}
#getRiderDriverImagePic{
  height:100%;
  width:auto;
}

#giveRidePanel{
  display:none;
  z-index:6;
  position: absolute;
  top:13%;
  height:20%;
  background-color:#75d0ff;
  opacity:0.90;
  width:100%;
}

#giveSearch{
  background-color: #47fc23;
  width:50%;
  height:90%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

#giveSearch p{
  color: white;
  font-size:1.2rem;
  font-family: "Comic Sans MS", cursive, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

#giveRidePassengerPanel{
  display:none;
  z-index:6;
  position: absolute;
  bottom:5%;
  left:5%;
  background-color:#75d0ff;
  opacity:0.80;
  width:90%;
  height:25%;
}

#giveRidePassengerImage{
  position: absolute;
  top:0%;
  left:0%;
  width:30%;
  height:80%;
}
#giveRidePassengerInfo{
  position: absolute;
  font-size:0.7rem;
  top:0%;
  right:0%;
  width:60%;
  height:80%;
}
#giveRidePassengerButtons{
  position: absolute;
  bottom:0%;
  left:0%;
  width:100%;
  height:20%;
  background-color: green;
}
#giveRidePassengerAccept{
  position: absolute;
  width:33.3%;
  height:100%;
  left:0;
  background-color: #47fc23;
}
#giveRidePassengerNext{
  position: absolute;
  width:33.3%;
  height:100%;
  left:33.3%;
  background-color: #BBBBBB;
}
#giveRidePassengerQuit{
  position: absolute;
  width:33.3%;
  height:100%;
  left:66.6%;
  background-color: #FF8888;
}
#giveRidePassengerButtons div p{
  color: white;
  font-size:1rem;
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -80%);
  text-align:center;
}
#giveRidePassengerImagePic{
  height:100%;
  width:auto;
}

/*My Profile*/
#myProfilePanel{
  display:none;
  z-index: 6;
  opacity:0.90;
  position:absolute;
  top:13%;
  left:0%;
  width:100%;
  height:40%;
  background-color:#75d0ff;
  text-align:center;
}

#myProfilePanel img{
  height:40%;
  width:auto;
  margin: 0px;
}

#myProfilePanel p{
  margin: 0px;
  font-size: 1rem;
  color: white;
}

#myProfileButtonPanel{
  display:none;
  z-index: 6;
  opacity:0.90;
  position:absolute;
  bottom:3%;
  left:0%;
  width:100%;
  height:10%;
}

#myProfileCreditButton{
  position:absolute;
  left:1%;
  height:100%;
  width:48%;
  background-color:#aaaaaa;
}

#myProfileBackButton{
  position:absolute;
  right:1%;
  height:100%;
  width:48%;
  background-color:#aaaaaa;
}

#myProfileButtonPanel div p {
  color: white;
  font-size:1.2rem;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#myProfileCreditPanel{
  display:none;
  z-index: 6;
  opacity:0.90;
  position:absolute;
  top:53%;
  left:0%;
  width:100%;
  height:30%;
  background-color:#75d0ff;
  text-align:center;
  color: white;
  font-size:1rem;
}

#myProfileCreditPanel p{
  margin: 0px;
}

#successInfo{
  z-index:7;
  font-size:0.7rem;
  position:absolute;
  top:0%;
  left:0%;
  display:none;
  height:3%;
  width:100%;
  background-color:#5df21c;
  opacity:0.90;
  text-align:center;
}

#myProfileCreditSellButton{
  position:absolute;
  left:1%;
  bottom:2%;
  width:48%;
  height: 18%;
  background-color: #47fc23;
}

#myProfileCreditBuyButton{
  position:absolute;
  right:1%;
  bottom:2%;
  width:48%;
  height: 18%;
  background-color: #47fc23;
}

#aboutPanel{
  display:none;
  z-index: 6;
  position:absolute;
  top:13%;
  left:0%;
  width:100%;
  height:87%;
  background-color:#75d0ff;
  opacity:0.98;
  text-align:center;
  color:#FFFFFF;
  font-size:0.9rem;
}

#aboutNextButton{
  position:absolute;
  bottom:10%;
  width:100%;
  height:10%;
  background-color:#563cff;
  opacity:0.90;
  text-align:center;
  font-size: 2rem;
  color:white;
}

#aboutQuitButton{
  position:absolute;
  bottom:0;
  width:100%;
  height:10%;
  background-color:#56ff3c;
  opacity:0.90;
  text-align:center;
  font-size: 2rem;
  color:white;
}

#loginPanel{
  display:none;
  z-index: 8;
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  background-color:#75d0ff;
  opacity:0.90;
  text-align:center;
  color:black;
  font-size:1rem;
}

#loginPanel img{
  position:absolute;
  top:5%;
  height:25%;
  width:auto;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

#loginName{
  position:absolute;
  top:35%;
  height: 3%;
  width: 80%;
  font-size:1rem;
  text-align:center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

#loginPas{
  position:absolute;
  top:40%;
  height: 3%;
  width: 80%;
  font-size:1rem;
  text-align:center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

#loginButton{
  position:absolute;
  bottom:10%;
  left:40%;
  height: 7%;
  width: 20%;
  font-size:1.5rem;
  text-align:center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

#loginButton:hover{
  color:white;
}

#globalCancelButton{
  display:none;
  z-index: 7;
  position:absolute;
  bottom:10%;
  width:50%;
  height:9%;
  background-color:#75d0ff;
  opacity:0.90;
  color:white;
  font-size:2rem;
  text-align:center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

#globalCancelButton p{
  position:absolute;
  margin:0px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}