.backbutton1 a{
    color: white;
    font-size: 22px;
}

body{
    
  font-family: "Lexend", sans-serif;
  font-weight: 300;
  font-style: normal;


}

#filterInput::placeholder {
    font-size: 16px; /* Größe anpassen wie bei einer h2 */
    font-weight: bold;
    color: #fff; /* Farbe anpassen */
}
/* Progress bar colors */

.bg-1 {
    --bs-bg-opacity: 1;
     background-color: #4DE6C9 !important; 

}
.progress-bar.bg-1-old {
     box-shadow: 0 0 2px rgba(66, 228, 199, 0.9), 0 0 4px rgba(66, 228, 199, 0.4), 0 0 1rem rgba(66, 228, 199, 0.3), 0 0 4rem rgba(255, 215, 0, 0.1); 

}

.bg-2 {
    --bs-bg-opacity: 1;
     background-color: #4DE6C9 !important; 

}
.progress-bar.bg-2-old {
     box-shadow: 0 0 2px rgba(192, 192, 192, 0.9), 0 0 4px rgba(192, 192, 192, 0.4), 0 0 1rem rgba(192, 192, 192, 0.3), 0 0 4rem rgba(255, 193, 7, 0.1); 

}

.bg-3 {
    --bs-bg-opacity: 1;
     background-color: #4DE6C9 !important; 

}
.progress-bar.bg-3-old {
     box-shadow: 0 0 2px rgba(205, 127, 50, 0.9), 0 0 4px rgba(205, 127, 50, 0.4), 0 0 1rem rgba(205, 127, 50, 0.3), 0 0 4rem rgba(205, 127, 50, 0.1); 

}

.streak-days{
    font-size: 75%;
}



.streak-1{
    font-size: 75%;
    color: #4DE6C9;
}
.streak-2{
    font-size: 75%;
    color: #4DE6C9;
}
.streak-3{
    font-size: 75%;
    color: #4DE6C9;
}
table.table th{
    color: #4DE6C9;
}

/* END Progress bar colors END */


.table-names{
    color: white;
}


.round-img {
    width: 100px;  /* Größe des Bildes */
    height: 100px; /* Sicherstellen, dass es quadratisch ist */
    border-radius: 50%;
    object-fit: cover; /* Verhindert Verzerrungen */
}

.table-container {
    overflow-x: auto; /* Erlaubt horizontales Scrollen */
    max-width: 100%;  /* Begrenzung auf das umgebende div */
}