/* Stil für Balkendiagramm */
  #chartContainer {
    display: flex;
    height: 200px;
    justify-content: flex-start; /* Ausrichtung am linken Rand */
    align-items: flex-end; /* Balken von unten nach oben ausrichten */
    padding: 0 10px;
    border-bottom: 1px solid black;
  }

  .bar {
    flex: 0 0 auto; /* Feste Breite für die Balken */
    margin-right: 5px; /* Abstand zwischen den Balken */
    color: white;
    padding: 5px;
    text-align: center;
    width: 50px;
  }

  .green-bar {
    background-color: green;
  }

  .yellow-bar {
    background-color: #F9DB32;
  }

  .red-bar {
    background-color: red;
  }

  #smiley_voting {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    padding: 50px;
    border: 2px solid black;
    font-size: 6vw;
  }
  
  #smiley_voting i {
    margin: 0 2%;
    cursor: pointer;
    flex-grow: 1; /* Die Smilies nehmen den verfügbaren Platz gleichmäßig ein */
    text-align: center;
  }
  
  #green_smiley {
    color: green;
  }
  
  #yellow_smiley {
    color: #F9DB32;
  }
  
  #red_smiley {
    color: red;
  }
  
  /* Für kleine Bildschirme die Schriftgröße der Smilies anpassen */
  @media (max-width: 600px) {
    #smiley_voting i {
      font-size: 5vw; /* Prozentuale Schriftgröße basierend auf der Bildschirmbreite */
      margin: 0 1%;
    }
  }

.smile-danke{
    font-size: 20%;
    position: absolute;
    bottom: 0px;
    color:black;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.smiley-clicked {
    animation: wiggle 0.5s linear;
}