/**********************************************************************\
*
* Allgemeingültige CSS-Definitionen
*
\**********************************************************************/

body
{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  background:radial-gradient(#33383f, rgb(42, 47, 53));
  padding-top:50px; /* Abstand oben entsprechend der Höhe der Navigation Bar (einzeilige NavBar)*/
  color:white;
}


h1
{
  color:white;
}


.buttonLink, .buttonLink:visited, .buttonLink:hover
{
  text-decoration:none;
  color:black;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size:16px;
  font-weight:bold;
  margin-right:10px;
}


.buttonLink a
{
  text-decoration:none;
  color:black;
  font-size:16px;
}


/**********************************************************************\
*
* CSS für Tabellen
*
\**********************************************************************/
.tdR
{
  text-align:right;
}


/**********************************************************************\
*
* CSS für die Formatierung der unterschiedlichen Tabellen-Zeilen
*
\**********************************************************************/

.even-row
{
  background-color:#888888;
}


.odd-row
{
  background-color:#ffffff; /*Weiß*/
}


/**********************************************************************\
*
* CSS-Teil für die Login-Programme
*
\**********************************************************************/

.alert-danger
{
  color:#721c24;
  background-color:#f8d7da;
  border-color:#f5c6cb
}

.alert-danger hr
{
  border-top-color:#f1b0b7
}

.alert-danger .alert-link
{
  color:#491217
}

.inputs_container
{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


/**********************************************************************\
*
* CSS-Teil für die Daten-Tabellen
*
\**********************************************************************/

.dataTable
{
  width:100%;
  border-collapse:collapse;
  border:1px;
  margin-bottom:20px;
  color:black;
}

.dataTable th,
.dataTable td
{
  padding:10px;
  text-align:left;
  vertical-align:middle;
  border:1px solid #ccc;
}

.dataTable th
{
  background-color:blue;
  color:white;
  font-weight:bold;
  cursor:pointer;

  position:relative;
  padding-right:20px; /* Platz für den Pfeil */
}

.arrow
{
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  display:inline-block;
  width:0;
  height:0;
  vertical-align:middle;
  border:4px solid transparent;
  content:"";
}

.asc .arrow
{
  border-bottom:4px solid;
  border-top:none;
  top:calc(50% - 4px); /* Korrektur für den Pfeil */
}

.desc .arrow
{
  border-top:4px solid;
  border-bottom:none;
  top:calc(50% - 4px); /* Korrektur für den Pfeil */
}

.dataTable tr:nth-child(even)
{
  background-color:lightyellow;
}

.dataTable tr:nth-child(odd)
{
  background-color:white;
}

.dataTable tr:hover
{
  background-color:#e6e6e6;
}

.dataTable a
{
  color:white;
  font-weight:bold;
  text-decoration:none;
}


/**********************************************************************\
*
* CSS-Teil für die angepinnten Kopfzeilen (Tabellen)
* Einzeilige Nav-Bar
*
\**********************************************************************/

.sticky-header1 th
{
  position:sticky;
  top:50px;
}


/**********************************************************************\
*
* CSS-Teil für die angepinnten Kopfzeilen (Tabellen)
* Zweizeilige Nav-Bar
*
\**********************************************************************/

.sticky-header2 th
{
  position:sticky;
  top:100px;
}


/**********************************************************************\
*
* CSS-Teil für die Daten-Tabellen (Summen
*
\**********************************************************************/

.sumTable
{
  width:50%;
  border-collapse:collapse;
  border:1px;
  margin-bottom:20px;
  color:black;
}

.sumTable th,
.sumTable td
{
  padding:10px;
  text-align:left;
  vertical-align:middle;
  border:1px solid #ccc;
}

.sumTable th
{
  background-color:blue;
  color:white;
  font-weight:bold;
}

.sumTable tr:nth-child(even)
{
  background-color:lightyellow;
}

.sumTable tr:nth-child(odd)
{
  background-color:white;
}

.sumTable tr:hover
{
  background-color:#e6e6e6;
}




/**********************************************************************\
*
* CSS-Teil für die Daten-Tabellen (Summen) mit Sortiermöglichkeit
*
\**********************************************************************/

.sumTable2
{
  width:50%;
  border-collapse:collapse;
  border:1px;
  margin-bottom:20px;
  color:black;
}

.sumTable2 th,
.sumTable2 td
{
  padding:10px;
  text-align:left;
  vertical-align:middle;
  border:1px solid #ccc;
}

.sumTable2 th
{
  background-color:blue;
  color:white;
  font-weight:bold;
  cursor:pointer;

  padding-right:20px; /* Platz für den Pfeil*/
}

.sumTable2 tr:nth-child(even)
{
  background-color:lightyellow;
}

.sumTable2 tr:nth-child(odd)
{
  background-color:white;
}

.sumTable2 tr:hover
{
  background-color:#e6e6e6;
}


/**********************************************************************\
*
* CSS-Teil für die Such-Tabellen
*
\**********************************************************************/

.suchtabelle
{
  width:40%;
  min-width:300px;
  border:none;
  border-collapse:collapse;
  margin-bottom:20px;
  color:black;
}


.suchtabelle th,
.suchtabelle td
{
  padding:10px;
  text-align:left;
  vertical-align:middle;
  border:1px solid #ccc;
}

.suchtabelle th
{
  background-color:blue;
  color:white;
  font-weight:bold;
}

.suchtabelle tr:nth-child(even)
{
  background-color:lightyellow;
}

.suchtabelle tr:nth-child(odd)
{
  background-color:white;
}

.suchtabelle tr:hover
{
  background-color:#e6e6e6;
}


/**********************************************************************\
*
* CSS-Teil Hauptseite - Tabellendefinition
*
\**********************************************************************/
.indexTable
{
  width:500px; /* Die Tabelle nimmt die volle Breite ein */
  border-collapse:collapse; /* Die Tabellenzellen haben keinen Abstand zwischen sich */
}

.indexTable tr:first-child td
{
  border-top:none; /* Der TOP-Rahmen der ersten Zeile wird ausgeblendet */
}

.indexTable tr:last-child td
{
  border-bottom:none; /* Der BOTTOM-Rahmen der letzten Zeile wird ausgeblendet */
}

.indexTable td
{
  /*border:1px solid white; /* Eine einfache Rahmengestaltung für die Zellen */
  border:1px solid white;
  padding:10px; /* Ein Innenabstand für den Inhalt der Zellen */
  border-left:none; /* Der linke Rahmen der Zwischenspalten wird ausgeblendet */
  border-right:none; /* Der rechte Rahmen der Zwischenspalten wird ausgeblendet */
}

.indexTable td:not(:first-child):not(:last-child)
{
  border-color:white; /* Der Rahmen der Zwischenspalten ist weiß */
}

.indexTable td:first-child
{
  width:25%;
  text-align:right;
}

.indexTable td:nth-child(2)
{
  width:75%;
  text-align:center;
}


/**********************************************************************\
*
* CSS-Teil für die NAV-Bar
*
\**********************************************************************/
.navbar
{
  background:linear-gradient(to bottom, black, #575757);
  height:50px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  border-radius:5px;
  box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
}

.navbar a
{
  color:white;
  text-decoration:none;
  font-size:18px;
  line-height:50px;
  margin-right:20px;
  padding:0 10px;
}

.navbar a:hover
{
  background-color:lightgray;
  color:floralwhite;
}

.navbar-divider
{
  width:1px;
  height:20px;
  background-color:white;
  display:inline-block;
  margin:0 10px;
}


/**********************************************************************\
*
* CSS-Teil für die NAV-Bar 2
*
\**********************************************************************/
.navbar2
{
  background:linear-gradient(to bottom, #575757, black);
  height:50px;
  position:fixed;
  top:50px;
  left:0;
  right:0;
  z-index:9999;
  border-radius:5px;
  box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
}

.navbar2 a
{
  color:white;
  text-decoration:none;
  font-size:18px;
  line-height:50px;
  margin-right:20px;
  padding:0 10px;
}

.navbar2 a:hover
{
  background-color:lightgray;
  color:floralwhite;
}

.navbar-divider
{
  width:1px;
  height:20px;
  background-color:white;
  display:inline-block;
  margin:0 10px;
}


/**********************************************************************\
*
* CSS-Teil Hauptseite - Programm-Buttons
*
\**********************************************************************/
.buttonPR
{
  height:34px;
  width:200px;
  border-radius:1000px;
  border:none;
  color:black;
  font-family:sans-serif;
  font-size:16px;
  background:linear-gradient(to right, rgb(255, 247, 170), rgb(255, 182, 107));
}

.buttonPR a
{
  color:black;
}

.buttonPR:hover
{
  width:240px;
}

.buttonPR:focus
{
  outline:none;
  width:200px;
}

.buttonLOG
{
  height:34px;
  width:200px;
  border-radius:1000px;
  border:none;
  color:black;
  font-family:sans-serif;
  font-size:16px;
  background:linear-gradient(to right, rgb(191, 255, 149), rgb(255, 196, 196));
}

.buttonLOG a
{
  color:black;
}

.buttonLOG:hover
{
  width:240px;
}

.buttonLOG:focus
{
  outline:none;
  width:200px;
}


.buttonConf
{
  height:34px;
  width:200px;
  border-radius:1000px;
  border:none;
  color:white;
  font-family:sans-serif;
  font-size:16px;
  background:linear-gradient(to right, rgb(45, 39, 212), rgb(4, 145, 7));
}

.buttonConf:hover
{
  width:240px;
}

.buttonConf:focus
{
  outline:none;
  width:200px;
}


/********************************************************************************\
*
* CSS für die Kacheln des Buzzers
*
\********************************************************************************/

.kachel
{
  width:200px;
  height:200px;
  background-color:#eaeaea;
  margin:10px;
  display:inline-block;
  cursor:pointer;
  background-size:cover;
}

.kachel-icon
{
  width:180px;
  height:180px;
  background-repeat:no-repeat;
  background-position:center;
  margin:10px;
  background-size:contain;
}

.kachel-label
{
  text-align:center;
}


/********************************************************************************\
*
* Modales Pop-Up-Fenster
*
\********************************************************************************/

#modal
{
  position:fixed;
  z-index:9999;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  background-color:#fffbc2;
  color:black;

  display:none;

  opacity:0;
  pointer-events:none;

  transition:opacity 0.3s ease-in-out;

  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
}

#modal h2
{
  margin-top:0;
  color:black;
}

#modal p
{
  color:black;
}

.modal-open #overlay,
.modal-open #modal
{
  opacity:1;
  pointer-events:auto;
}

#modal .modal-header
{
  background-color:#eaeaea;
  padding:10px;
  border-bottom:1px solid #ccc;
}

#modal .modal-header h2
{
  margin:0;
  color:#333;
}

#modalContent
{
  padding-left:15px;
  padding-top:15px;
  padding-bottom:15px;
  padding-right:15px;
}