:root {
  --green: #8ec377;
}

body{
    font-family: Arial;
    font-size: 16pt;
    padding: 0px;
    margin: 0px;
}

table, th, td{
    border: 0px solid black;
    border-radius: 3px;
    font-size: 16pt;
    text-align: left;
    border-collapse: collapse;
}

td{
  padding: 5px;
}

th{
    text-align: center;
    padding: 5px;
}

/*----------------Rechner Table--------------------*/
.rechner{
    border: 0px;
    margin: 0px;
    border-collapse: collapse;
    /*width: 100%;*/
}
.rechner tr td, .rechner tr th{
    border-radius: 0px;
    margin: 0px;
}

.rechner tr:nth-child(odd){
    background-color: #f0f0f0;
}

.rechner table{
    border-collapse: collapse;
}

.gruppe tr:nth-child(odd){
    background-color: #d0d0d0;
}

table[class=ggruppe]{
  width: 100%;
}

table[class=ggruppe] tr{
  background-color: var(--green);
}

.ggruppe tr:nth-child(odd){
  background-color: var(--green);
}

/*-----------Anmelden Registrieren--------*/
.anReg{
    border-radius: 0px;
    margin-left: auto;
    margin-right: auto;
}

.anReg tr th, .anreg tr td{
    border: 0px;
    border-radius: 0px;
}

.anRegButt{
    width: 100%;
    border-radius: 0px;
    font-size: 16pt;
    background-color: #dfdfdf;
}

.button, button[type=button], input[type=button], input[type=submit], input[type=reset] {
    background-color: #868a86;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-family: arial;
    font-size: 16pt;
    color: #000000;
}

button[class=buttonGreen]{
    background-color: var(--green);
    border: none;
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-family: arial;
    font-size: 16pt;
}

button[class=buttonGrey]{
  background-color: #666666;
  border: none;
  border-radius: 8px;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-family: arial;
  font-size: 14pt;
}

/*button[type=button]{
    padding: 5px;
}*/

input[type=text], input[type=password], input[type=number], input[type=tel], input[type=email]{
    /*max-width: 100%;*/
    padding: 6px 10px;
    border-radius: 4px;
    margin: 2px;
    box-sizing: border-box;
    font-family: arial;
    font-size: 16pt;
}

div[class=antrag] input[type=text], div[class=antrag] input[type=email], div[class=antrag] select{
  width: 70%;
}

select {
    max-width: 100%;
    padding: 6px 10px;
    margin: 0px;
    border-radius: 4px;
    background-color: #e0e0e0;
    font-family: arial;
    font-size: 16pt;
    color: #000000;  
}

div[class="header"]{
    border: 0px solid black;
    border-radius: 25px;
    background-color: var(--green);
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 16pt;
    color: white;
}

div[class="spoiler"]{
    padding: 15px;
    text-align: left;
}

div[class="div1"]{
    padding: 20px;
    text-align: left;
}

/*-------------Infofelder--------*/
/*
<div class="tooltip">TEXT <img src="/img/info.jpg" style="height: 12pt;"><span class="tooltiptext">INFOTEXT</span></div>
*/

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px black;
}

.tooltip img{
    height: 12pt;
}

.tooltip .tooltiptext {
visibility: hidden;
width: max-content;
max-width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

@media (max-width: 480px) {
  .tooltip .tooltiptext{
    max-width: 200px;
  }
}
@media (max-width: 768px) {
  .tooltip .tooltiptext{
    max-width: 400px;
  }
}
@media (max-width: 1024px) {
  .tooltip .tooltiptext{
    max-width: 500px;
  }
}
@media (max-width: 1200px) {
  .tooltip .tooltiptext{
    max-width: 600px;
  }
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

/*--------------------------Drag and Drop---------------------------*/

#drop-area {
    border: 3px dashed #000000;
    border-radius: 20px;
    width: 80%;
    font-family: sans-serif;
    margin: 20px auto;
    padding: 80px 20px 80px 20px;
    text-align: center;
  }
  #drop-area.highlight {
    border-color: purple;
  }
  p {
    margin-top: 0;
  }
  .my-form {
    margin-bottom: 10px;
  }
  #gallery {
    margin-top: 10px;
  }
  #gallery img {
    width: 150px;
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .button {
    display: inline-block;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  .button:hover {
    background: #ddd;
  }
  #fileElem {
    display: none;
  }

/*------------------------------Der Navigationbalken--------------------------------------*/
.navbar {
    overflow: hidden;
    background-color: var(--green);
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 1;
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #007722;
  }

.spoiler td{
    text-align: left;
}

li{
    text-align: left;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 70%;
  max-width: 100%;
}

/*----------------------------------------Checkbox-----------------------------------*/