@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.nav-link {
display: flex;
align-items: center; /* Vertikale Ausrichtung der Inhalte zentrieren */
}

/* Stil für die Container, die die Liste scrollbar machen */
.menu-container {
height: 700px; /* Anpassen der Höhe nach Bedarf */
overflow-y: auto; /* Aktiviert das Scrollen, wenn die Liste zu lang ist */
}

.menu-container::-webkit-scrollbar {
width: 12px; /* Adjust the width as needed */
}

.menu-container::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.328);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
border-radius: 6px; /* Rounded corners of the thumb */
}

.menu-container::-webkit-scrollbar-track {
background-color:#050505; /* Background color of the track */
display: none;
}

a{
font-family: 'Roboto';  
color: #030303;
}
p{
font-family: 'Roboto';
}
h1{
font-family: 'Roboto';
}
h2{
font-family: 'Roboto';
}
h3{
font-family: 'Roboto';
}
/*Keine Einträge vohanden anzeige*/
h4{
font-family: 'Roboto';
}
h5{
font-family: 'Roboto';
font-size: 100px;
color: white;
}
.center-text {
text-align: center;
font-family: 'Roboto';
}
label{
font-family: 'Roboto';
}

tr{
font-family: 'Roboto';
padding-bottom: 20px; 
}

body{
background-color: #080710;
}
td{
font-family: 'Roboto';
}

.list-item {
display: flex;
align-items: center; /* Vertikal zentrieren */
}

.button {
font-family: 'Roboto'; 
font-weight: bold;
background-color: #08a6f2;
color: #ffffff; /* Textfarbe des Buttons */
padding: 10px 20px; /* Innenabstand des Buttons (oben/unten links/rechts) */
border: none; /* Entfernt die Standard-Rahmen des Buttons */
border-radius: 5px; /* Runde Ecken */
cursor: pointer; /* Zeigerzeichen, um anzuzeigen, dass der Button anklickbar ist */
transition: transform 0.3s;
}

.button:hover {
background-color: #08a6f2;
transform: scale(1.2);
}


.icon_wrapper{
left: -50;
}

.icon_board{
position: relative;
margin-right: 50px;
}


.button-bar {
position: fixed;
top: 0;
left: 0;
background-color: #08a6f2;
padding: 10px;
z-index: 2; /* Damit die Schaltflächen über anderen Inhalten liegen */
width: 100%; /* Die Breite auf 100% setzen, um die gesamte Breite zu decken */
}

.button-bar button {
margin-right: 10px; /* Einen Abstand zwischen den Schaltflächen hinzufügen */
color: #fff;
background-color: #08a6f2;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.button-bar button:hover {
background-color: #08a6f2;
}



.background{

z-index: 1;
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%,-50%);
left: 75%;
top: 50%;
}
.background .shape{
z-index: 1;
height: 200px;
width: 200px;
position: absolute;
border-radius: 50%;
}







/* Stile für den Bereich mit den Abstimmungsergebnissen------------------------------------------ */
.voting-results {
z-index: 20;
z-index: 10;
background-color: #f2f2f2; /* Hintergrundfarbe für den Ergebnisbereich */
padding: 20px; /* Innenabstand für den Ergebnisbereich */
margin-top: 20px; /* Abstand nach oben, um Platz unter der Navigation zu schaffen */
border-radius: 5px; /* Abgerundete Ecken für den Ergebnisbereich */

margin-left: 30%;
margin-right: 5%;
}

.voting-results p {
z-index: 20;
margin: 10px 0; /* Abstand zwischen den Abstimmungsergebnissen */
}
.voting-results table {
width: 100%;
border-collapse: collapse;

}

.voting-results th, .voting-results td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}

.voting-results th:first-child,
.voting-results td:first-child {
width: 10%; /* Hier kannst du die gewünschte Breite für die linke Spalte festlegen */
}

.voting-results th:last-child,
.voting-results td:last-child {
width: 30%; /* Hier kannst du die gewünschte Breite für die rechte Spalte festlegen */
}

.voting-results th {
background-color: #ddd;
}


/* Stile für den Bereich mit der Stände Übersicht--------------------------------------------- */
.element-list {
z-index: 20;
background-color: #f2f2f2; /* Hintergrundfarbe für den Elementliste-Bereich */
padding: 20px; /* Innenabstand für den Elementliste-Bereich */
margin-top: 20px; /* Abstand nach oben, um Platz unter den Abstimmungsergebnissen zu schaffen */
border-radius: 5px; /* Abgerundete Ecken für den Elementliste-Bereich */
margin-left: 30%;
margin-right: 5%;
}

.element-list table {
width: 100%;
border-collapse: collapse;

}

.element-list th, .element-list td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}

.element-list th {
background-color: #ddd;
}

/* Stile für den Bereich mit den QR ausdrucken-------------------------------------------------- */
.qrprint {
z-index: 10;
background-color: #f2f2f2; /* Hintergrundfarbe für den Ergebnisbereich */
padding: 20px; /* Innenabstand für den Ergebnisbereich */
margin-top: 20px; /* Abstand nach oben, um Platz unter der Navigation zu schaffen */
border-radius: 5px; /* Abgerundete Ecken für den Ergebnisbereich */
margin-left: 30%;
margin-right: 5%;
}
.qrprint p {
z-index: 20;
margin: 10px 0; /* Abstand zwischen den Abstimmungsergebnissen */
}
.qrprint a{
color: #030303;
}


/* Styling für den Bereich zum Ändern Standnamen ändern ------------------------------------ */
.element-change {
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 20px;
margin-top: 20px;
margin-left: 30%;
margin-right: 5%;
border-radius: 5px;
}

/* Styling für den Bereichstitel */
.element-change h2 {
font-size: 20px;
margin-bottom: 10px;
}

/* Styling für das Formular */
.element-change form {
max-width: 300px;
margin: 0 auto;
}

/* Styling für die Formularfelder und Labels */
.element-change label,
.element-change select,
.element-change input[type="text"] {
display: block;
margin-bottom: 10px;
}

.element-change select,
.element-change input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.element-change input[type="submit"] {
background-color: #08a6f2;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.element-change input[type="submit"]:hover {
background-color: #08a6f2;
}





/* Styling für Neuer Stand hinzufügen -------------------------------------------------- */

.element-new {
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 20px;
margin-top: 20px;
margin-left: 30%;
margin-right: 5%;
border-radius: 5px;
}
.element-new h3{
margin-left: 40%;

}
/* CSS-Animation für das Blinken */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Fügen Sie die Blinkanimation zur Erfolgsmeldung hinzu */
.blink {
animation: blink 1s infinite; /* Ändern Sie die Dauer nach Bedarf */
}

/* Styling für den Bereichstitel */
.element-new h2 {
font-size: 20px;
margin-bottom: 10px;
}

/* Styling für das Formular */
.element-new form {
max-width: 300px;
margin: 0 auto;
}

/* Styling für die Formularfelder und Labels */
.element-new label,
.element-new select,
.element-new input[type="text"] {
display: block;
margin-bottom: 10px;
}

.element-new select,
.element-new input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.element-new input[type="submit"] {
background-color: #08a6f2;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.element-new input[type="submit"]:hover {
background-color: #08a6f2;
}





/* Styling für Neuen Benutzer erstellen-------------------------------------------------------- */
.user-registration {
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 20px;
margin-top: 20px;
margin-left: 30%;
margin-right: 5%;
}

/* Styling für den Registrierungsbereich-Titel */
.user-registration h2 {
font-size: 20px;
margin-bottom: 10px;
}

/* Styling für das Registrierungsformular */
.user-registration form {
max-width: 300px;
margin: 0 auto;
}

/* Styling für die Formularfelder */
.user-registration label {
display: block;
margin-bottom: 5px;
}

.user-registration input[type="text"],
.user-registration input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.user-registration input[type="submit"] {
background-color: #08a6f2;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.user-registration input[type="submit"]:hover {
background-color: #08a6f2;
}









/* Styling für den Bereich QR Code für Stand ändern-------------------------------------------*/
.image-upload {
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 20px;
margin-top: 20px;
margin-left: 30%;
margin-right: 5%;
}

/* Styling für den Bereichstitel */
.image-upload h2 {
font-size: 20px;
margin-bottom: 10px;
}

/* Styling für das Formular */
.image-upload form {
max-width: 300px;
margin: 0 auto;
}

/* Styling für die Formularfelder und Labels */
.image-upload label,
.image-upload select,
.image-upload input[type="file"] {
display: block;
margin-bottom: 10px;
}

.image-upload select,
.image-upload input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.image-upload input[type="submit"] {
background-color: #08a6f2;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.image-upload input[type="submit"]:hover {
background-color: #0056b3;
}


/*mobile vote ansicht */

.votebtn {
background: linear-gradient(
to right,
#ff512f,
#f09819
);
margin-top: 25%;
margin-left: 14%;
width: 700px;
height: 700px;
position: absolute;
animation: moveCircle2 100s linear infinite;
border-radius: 50%; /* Macht den Button rund */
display: flex;
align-items: center;
justify-content: center;
font-size: 60px; /* Ändert die Schriftgröße */
color: #fff; /* Ändert die Textfarbe auf Weiß */
cursor: pointer; /* Zeigt einen Handzeiger beim Hover an */
transition: transform 0.2s, background 0.3s; /* Fügt Übergangseffekte hinzu */
text-decoration: none;
}
.votebtn:hover {
background: linear-gradient(
to right,
#1845ad,
#23a2f6
); /* Ändert den Farbverlauf beim Hover */
transform: scale(1.1); /* Vergrößert den Button beim Hover */
}
/* Stil für den grünen Hintergrund */
.green-button {
    background-color: green;
    /* Weitere CSS-Stile nach Bedarf */
}

/* Stil für den roten Hintergrund */
.red-button {
    background-color: red;
    /* Weitere CSS-Stile nach Bedarf */
}




.qrcode{
display: none;
}




/* CSS-Stile für das Dashboard */
.dashboard-container {
display: flex;
flex-direction: column;
align-items: center;
}


.info-window {
    margin-right: 20px;
width: 100%;
padding: 10px;
margin-bottom: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
}

.news-window {
width: 80%;
padding: 20px;
margin-bottom: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
}

.chart-window {
width: 80%;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Stil für das Balkendiagramm */
.bar-chart {
width: 100%;
height: 300px; /* Passen Sie die Höhe an Ihre Anforderungen an */
}


.balken {

background: linear-gradient(to right, #07a5f5, #25ed9f);
height: 20px; /* Höhe des Balkens anpassen */
}
.info-window{
z-index: 20;
z-index: 10;
background-color: #f2f2f2; /* Hintergrundfarbe für den Ergebnisbereich */
padding: 20px; /* Innenabstand für den Ergebnisbereich */
margin-top: 20px; /* Abstand nach oben, um Platz unter der Navigation zu schaffen */
border-radius: 5px; /* Abgerundete Ecken für den Ergebnisbereich */
margin-left: 30%;
margin-right: 10%;
width: 50%;
height: 60%;
}

.news-window{
z-index: 20;
z-index: 10;
background-color: #f2f2f2; /* Hintergrundfarbe für den Ergebnisbereich */
padding: 20px; /* Innenabstand für den Ergebnisbereich */
margin-top: 20px; /* Abstand nach oben, um Platz unter der Navigation zu schaffen */
border-radius: 5px; /* Abgerundete Ecken für den Ergebnisbereich */
margin-left: 30%;
margin-right: 10%;
width: 50%;
}
.chart-window{
z-index: 20;
z-index: 10;
background-color: #f2f2f2; /* Hintergrundfarbe für den Ergebnisbereich */
padding: 20px; /* Innenabstand für den Ergebnisbereich */
margin-top: 20px; /* Abstand nach oben, um Platz unter der Navigation zu schaffen */
border-radius: 5px; /* Abgerundete Ecken für den Ergebnisbereich */
margin-left: 30%;
margin-right: 5%;
width: 60%;
height: 200%;
}


.center-text .agreement-label {
    color: white;
}
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }