/*CSS Style Sheet for index.html*/
body {
    margin: 0;
    background-color: rgb(101, 168, 231);
    background-color: #003087;
    /*height: 70vh;
    /*overflow: hidden;
    /*padding: 5px;
    /*background-color: rebeccapurple;*/
  
}
#main-content{
    /*background-color: rgb(38, 226, 211);*/
    /*border-style: solid;
    border-width: 15px;*/
    padding: 25px;
    position: relative;
    clear: both;

}

#svg-container{
 /* display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 60%;
	vertical-align: middle; 
  overflow: hidden;
  border-style: solid;
  border-width: 15px;
  border-color: rgb(148, 192, 233); */
 /*background-color: rgb(56, 56, 56); */
  width: 100%;
  clear: both;
  padding-bottom: 20px;
  height: 600px;
  /*
  display: block;
  position: absolute; 
  z-index: 2;
  border-style: solid;
  border-width: 5px;
  border-color: rgb(86, 57, 218);
  margin: auto; */
}


svg{
  width: 100%;
  height: 598px;
  border-style: solid;
  border-width: 5px;
  background-color: rgb(36, 36, 36);
  border-color: rgb(245, 148, 37);
  border-color: #FA4616;
}


#myBtn {
  position: absolute;
}

canvas{
  border-style: solid;
  border-width: 5px;
  border-color: green;
  margin: auto;
  display: block;
}

h2{
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 20px;
}
p{
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 18px;
  margin: 0;
}
br{
  margin:0;
}


#carInfo{
  margin: auto;
}

tr,th{
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 18px;
  padding: 0 15px 0 15px;
}
#tableData{
  display: none;
}

#commands{
 /* position: relative;
   float: left;
  border-style: solid;
  border-width: 5px;
  border-color: rgb(86, 57, 218);
  margin: auto;
  border-style: solid;
  border-width: 5px;
  border-color: green;
  clear: both; */
  /*background-color: rgb(161, 212, 20);*/
  border-style: solid;
  border-width: 5px;
  border-color: rgb(245, 148, 37);
  border-color: #FA4616;
  background-image: linear-gradient(#FA4616, #FA4616);
  background-size: 5px 100%;
  background-repeat: no-repeat;
  background-position: 60% 50%;
  overflow: hidden;
}
#buttons{
  padding-left: 20px;
  float: left;
  width: 58%;
  /*background-color: rgb(161, 212, 20);*/
}


#displayCars{
  text-align: center;
  margin: auto;
  float: right;
  width: 39%;
  /*background-color: #d92fdf;*/
}



button{
  background-color: #e2e2e2;
  color: black;
  border: 2px solid #181818;
  border-radius: 4px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer; 
}

input[type=text]{
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 3px solid #FA4616;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=number]{
  padding: 10px 15px;
  margin: 8px 0;
  width: 100px;
  display: inline-block;
  border: 3px solid #FA4616;
  border-radius: 4px;
  box-sizing: border-box;
}

button:hover{
  box-shadow: 0 20px 16px 0 rgba(0,0,0,0.4), 0 17px 50px 0 rgba(0,0,0,0.19);
}



#greenBtn,#aStarPath,#dijkstraPath,#graphicalSim,#performanceSim{
  transition-duration: 0.4s;
  background-color: #df2f2f;
}
#tableToCSV{
  transition-duration: 0.4s;
  background-color: rgb(216, 216, 216);
}
#greenBtn:hover,#aStarPath:hover,#dijkstraPath:hover{
  background-color: #ffffff;
}