.circuits-sidebar{
  position:fixed;
  left:0;
  bottom:0;
  top:50px;
  width:288px;
  background-color: black;
  z-index: 3;
  border-radius: 0px 30px 30px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:10px;
  
  transition: 0.3s;

}
.circuits-sidebar .tooltip{
  top:90px;
  left:270px;
}
  
}
@keyframes slide-right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}
@keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}



.circuit-collapse, .circuit-open{
  position: fixed;
  left:308px;
  top:50%;
  border:none;
  color:white;
  text-orientation: upright;
  font-family: F1-black, sans-serif;
  font-size:10px;
  writing-mode: vertical-lr;
  background-color: black;
  padding:5px 8px 5px 2px;
  border-radius: 0px 10px 10px 0px;
  z-index: 3;
}
.circuit-open{
  left:0px;
}
.circuit-collapse:hover, .circuit-open:hover{
  color:#E10600;
  cursor:default;
}
.circuit-title{
  font-family: F1-bold,sans-serif;
  background: linear-gradient(to right, #FFFFFF,#E10600);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  text-align: center;
  font-size:40px;
  margin-top: 15px;
}
.circuits-search-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.circuits-search{
  
  border: none;
  padding:2px 5px 2px 5px;
  width:205px;
  height: 28px;
  font-family: F1-regular,sans-serif;
}
.search-icon{
  width:24px;
  height: 24px;
  background-color: white;
  padding:4px 2px 4px 2px;
  border-radius: 5px 0px 0px 5px;
}

.go-icon{
  width:24px;
  height: 24px;
  background-color: white;
  padding:4px 2px 4px 2px;
  border-radius: 0px 5px 5px 0px;
}
.go-button{
  background-color:white;
  border:none;
  padding:0;
  height: 32px;
  border-radius: 0px 5px 5px 0px;
  margin:0px;
}
.search-results-container{
  background-color: white;
  width: 267px;
  height:80%;
  display: flex;
  flex-direction: column;
  justify-self: center;
  border-radius: 5px;
  margin-top:8px;

}
.matching-results{
  font-family: F1-bold;
  padding:5px;
}
.more-results{
  font-family: F1-bold;
  padding:2px;

}
.matching-results-container, .more-results-container{
  flex:1fr;
  display: flex;
  flex-direction: column;
}

.all-circuits{
  max-height:300px;
  overflow-y: scroll;
  list-style: none;
}
.matching-circuits{
  max-height: 100px;
  overflow-y: scroll;
  list-style: none;

}
li:hover{
  color:red;
  cursor:default;
}