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

#map {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}
body{
  margin: 0px;
  overflow: hidden !important;
}
.ol-attribution{
  display: none;
}
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-link {
  color: #61dafb;
}

#copyright{
  position: absolute;
  right: 10px;
  bottom: -13px;
  display: flex;
  align-items: first baseline;
  z-index: 1;
}
#copy{
  background-image: url("./src/images/frcat.png");
  width: 198px;
  height: 65px;
  background-repeat: no-repeat;
  background-size: contain;
}


@media only screen and (max-width: 600px) {
  #copyright{
    bottom: 65px;
  }
}


#sidebar{
  z-index: 20;
  background-color: #F0F0F0;
  position: absolute;
  width: 296px;
  height: 97vh;
  border-radius: 30px;
  box-shadow: black 0px 0px 10px;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translate(10px, 10px);
  display: flex;
  flex-direction: column;
}
#logo-Raceway{
  background-color: black;
  min-height: 80px;
  background-repeat: no-repeat;
  background-size: 250px;
  background-position-x: 21px;
  background-position-y: 16px;
  border-radius: 30px 30px 0px 0px;
}
#pathfinder{
  display: flex;
  align-items: center;
  padding: 10px;
}
#pathfinder input{
  width: 100%;
  height: 30px;
  border-radius: 20px;
  background-color: #F5E0E0;
  border-width: 0px;
  padding-left: 33px;
}
#iconSearch{
  position: relative;
  top: -38px;
  left: 18px;
}

#sidebar.hide{
  transform: translate(-296px,10px) !important;
}
#displayToggle{
  transform: translate(322px,16px) scale(2);
  background-color: black;
  color: white;
  display: flex;
  aspect-ratio: 1;
  border-radius: 10px;
  align-items: center;
  border-width: 0px !important;
}
#displayToggle, .list-el-goto, .pathfinderToggle{
  cursor: pointer;
}
#locationsList{
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width:none;
  padding:10px;
}

.list-el {
  padding: 5px;
  padding-left: 10px;
  background-color: white;
  border-radius: 20px;
  margin-bottom: 8px;
  padding-left: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.container-pathfinder{
  max-height: 44px;
}
.list-el-goto{
  padding: 5px;
  background-color: rgb(198, 198, 198);
  border-radius: 20px;
  aspect-ratio: 1;
  max-width: min-content;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 0px !important;
}
.list-el-name {
  width: 100%;
}
.directions-bar {
  border-radius: 20px;
  border: 0px;
  margin-bottom: 3px;
  padding-left: 10px;
  height: 28px;
}
#DirectionsBar {
  margin: 10px;
  display: flex;
  background: #a3baff;
  border-radius: 20px;
  border-radius: 20px;
  flex-direction: column;
  position:relative;
  z-index: 1;
  opacity: 1;
  transition: all ease 0.4s;
  padding: 6px;
}
#DirectionsBar.hide{
  transform: translate(0px,10px) !important;
  height: 0px;
  opacity: 0;
  z-index: -4;
}
#directionsBar-combiner {
  background: #a3baff;
  width: 26px;
  height: 32px;
  position: relative;
  top: -17px;
  left: 85%;
  margin-bottom: -44px;
  transition: all ease 0.2s;
  z-index: 0;

}
#directionsBar-combiner.hide {
  height: 0px;
  top: -36px;
  background-color: rgba(0,0,0,0);
}
.pathfinderToggle{
  border: 0px;
  border-radius: 20px;
  background-color: #a3baff;
  padding: 10px;
  aspect-ratio: 1;
  height: fit-content;
  scale: 0.6;
  position: relative;
  right: 9px;
  top: 8px;
}

@media only screen and (max-width: 600px) {
  #sidebar{
      width: 96vw;
      transform: translate(10px, 10px);
  }
  #sidebar.hide{
      transform: translate(10px,92svh) !important;
  }
  #displayToggle{
      transform: translate(84vw,26px) scale(2);
  }
  #directionsBar-combiner{
      left: 92%;
  }
}