.side-bar {
  margin-top: 160px; /* Starthöhe, bevor sticky wirkt */
  margin-right: 40px;
}

.sidebar-element-container {
  position: sticky; /* Sticky damit beim scrollen klebt, aber beim zoomen horizontal beweglich (und durch flexbox an whiteboard fixiert) */
  top: 80px; /* Abstand von oberem Bildschirmrand, bei dem es beim Scrollen kleben bleibt, sobald dieser Abstand erreicht wird */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(202, 202, 202);
  height: fit-content;
  min-height: 300px;
  width: 200px;
  border-radius: 30px;
  gap: 35px;
  padding-top: 45px;
  padding-bottom: 45px;
}


.sidebar-element {
  display: flex;
  justify-content: center;
  align-items: center;
}

.highscore-sidebar-element {
  display: none;
}

.open-highscore-container {
  display: flex;
}

.sidebar-element:hover {

}


/*
.time-sidebar-button {
  
  height: 72px;
  width: 75px;
  border-radius: 23px;
  background-color: rgba(0, 255, 251, 0.864);
  transition: background-color 0.1s;  
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}


.round-sidebar-container {
  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(143, 87, 255);
  height: 68px;
  width: 72px;
  border-radius: 30px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.chart-sidebar-icon {
  width: 40px;

}
*/

.round-sidebar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(143, 87, 255);
  height: 68px;
  width: 72px;
  border-radius: 30px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
background-image: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.15) 0%,        /* Dezentere Abdunklung unten links */
    rgba(0, 0, 0, 0.02) 45%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(248, 248, 248, 0.25) 100%  /* Subtilerer Glanz oben rechts */
  );
}

.chart-sidebar-icon {
  width: 40px;
}


/* Play-Button Background Container*/
.play-button-background-container {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(202, 202, 202);
  width: 200px;
  height: 80px;
}
.play-button-background-container.active {
  background-color: rgb(145, 145, 145);
}

.play-button-arrow {
  font-size: 40px;
  font-weight: 600;
  color: white;
  display: inline-block; 
  transform: scaleY(0.6); /* Zum Einstellen der "Spitzheit" */
  margin-left: 14px;
  margin-bottom: 4px;

  /*
  margin-top: 8px;
  background-color: rgb(145, 145, 145);
  padding-bottom: 18px;
  padding-right: 4px;
  padding-left: 4px;
  border-radius: 18px;
  */
}
.play-button-arrow.rotated {
  transform: scaleY(0.6) rotate(180deg);
  margin-top: 20px;
}



.play-button-container {
/* position: absolute;
  right: 12px;
  top: 12px; */
  display: flex;
  background-color: rgba(255, 76, 183, 0.937);
  height: 64px;
  width: 68px;
  justify-content: center;
  align-items: center;
  /* border: 6px solid #000000; */
  border-radius: 20px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);

background-image: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.15) 0%,        /* Dezentere Abdunklung unten links */
    rgba(0, 0, 0, 0.02) 45%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(248, 248, 248, 0.25) 100%  /* Subtilerer Glanz oben rechts */
  );
  margin-left: 43px;
}
.play-button-container.active {
  background-color: #76ffa8;
}


.play-sidebar-icon {
  width: 35px;
}



/* Klappbare Highscore-Ebene */
.highscore-container {
  margin-top: -50px;
  padding-bottom: 15px;
  background-color: rgb(145, 145, 145);
  display: flex;
  min-height: 235px;
  width: 200px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 15px;
}

.highscore-container-title {
  font-size: 18px;
  color: rgb(255, 128, 204);  
  font-weight: 700;
  margin-right: 20px;
  padding-top: 10px;
}
.actve-highscore-title {
  color: rgba(45, 248, 45, 0.934);
}


/* Einzelnes Highscore-Element */
.highscore-element {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  background-color: rgb(145, 145, 145);
  width: 190px;
  padding-left: 5px;
  padding-right: 5px;
}

.highscore-element-text {
  color: white;
  font-weight: 600;
  font-size: 18px;
  margin-left: 15px;
}

.highscore-type-button {
  margin-right: 4px;
  position: relative;
  background-color: rgb(237, 214, 252);
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  border-right: 1px solid rgb(200, 189, 200);
  width: max-content;
  white-space: nowrap;
  height: 45px;
  padding-left: 12px;
  cursor: pointer;
  border-radius: 10px;
}


.highscore-type-dropdown-menu {
  position: absolute;
  display: none;
  z-index: 850;
  width: 60px;
  margin-right: 84px;
}

.highscore-type-bullet-point {
  background-color: rgb(194, 250, 249);
  cursor: pointer;
  border-width: 1px;
  height: 45px;
  width: 90px;
  border-radius: 2px;
}
.highscore-type-bullet-point.upper-bullet {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.highscore-type-bullet-point.lower-bullet {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.highscore-type-bullet-point:hover {
  background-color:rgb(243, 250, 194);
}
.highscore-type-bullet-point:active {
  background-color:rgb(243, 250, 194);
}

/* Highscore-Level */
.highscore-level-button {
  margin-right: 4px;
  position: relative;
  background-color: rgb(237, 214, 252);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-right: 1px solid rgb(200, 189, 200);
  width: max-content;
  white-space: nowrap;
  height: 45px;
  padding-left: 12px;
  cursor: pointer;
  border-radius: 10px;
}

.highscore-level-button-text {

}
.highscore-arrow {
  font-size: 28px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.767);
  display: inline-block; 
  transform: scaleY(0.6); 
  margin-bottom: 5px;
  margin-left: 8px;
  margin-right: 8px;
}

.highscore-level-dropdown-menu {
  position: absolute;
  display: none;
  z-index: 850;
  width: 60px;
  margin-right: 40px;
}

.highscore-level-bullet-point {
  background-color: rgb(194, 250, 249);
  cursor: pointer;
  border-width: 1px;
  height: 45px;
  border-radius: 2px;
}
.highscore-level-bullet-point.upper-bullet {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.highscore-level-bullet-point.lower-bullet {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.highscore-level-bullet-point:hover {
  background-color:rgb(243, 250, 194);
}
.highscore-level-bullet-point:active {
  background-color:rgb(243, 250, 194);
}

/* Highscore-Time */
.highscore-time-button {
  margin-right: 4px;
  position: relative;
  background-color: rgb(237, 214, 252);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-right: 1px solid rgb(200, 189, 200);
  width: max-content;
  white-space: nowrap;
  height: 45px;
  padding-left: 12px;
  cursor: pointer;
  border-radius: 10px;
}

.highscore-level-button-text {

}

.highscore-arrow {
  font-size: 28px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.767);
  display: inline-block; 
  transform: scaleY(0.6); 
  margin-bottom: 5px;
  margin-left: 8px;
  margin-right: 8px;
}

.highscore-time-dropdown-menu {
  position: absolute;
  display: none;
  z-index: 850;
  width: 120px;
  margin-right: 60px;
}

.highscore-time-bullet-point {
  background-color: rgb(194, 250, 249);
  cursor: pointer;
  border-width: 1px;
  height: 45px;
  border-radius: 2px;
}
.highscore-time-bullet-point.upper-bullet {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.highscore-time-bullet-point.lower-bullet {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.highscore-time-bullet-point:hover {
  background-color:rgb(243, 250, 194);
}
.highscore-time-bullet-point:active {
  background-color:rgb(243, 250, 194);
}
.highscore-not-available {
  background-color: rgb(233, 233, 233);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.highscore-not-available:hover {
  background-color: rgb(214, 214, 214);
}

.open-highscore-dropdown-menu {
  display: flex;
  flex-direction: column;
}









.sidebar-trash-container{
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 6px solid #000000; */
  background-color: rgb(252, 252, 252);
  height: 68px;
  width: 72px;
  border-radius: 100px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);

background-image: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.15) 0%,        /* Dezentere Abdunklung unten links */
    rgba(0, 0, 0, 0.02) 45%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(248, 248, 248, 0.25) 100%  /* Subtilerer Glanz oben rechts */
  );


}

.trash-sidebar-icon {
  width: 38px;
}


.round-sidebar-container,
.play-button-container,
.play-button-arrow,
.sidebar-trash-container {
  cursor: pointer;
}