/* CSS Styles für alle Geräte (Können später durch spezifische Einstellungen überschrieben werden)

   Die Idee ist, das Hier alle vorhanden Styles auftauchen (ggf. auch ohne Inhalt)
   Diese können dann im SInne der Vererbung in den gerätespezifischen CSS Dateien überschrieben
   oder erweitert werden
*/


/* Hauptseite */
body {
  background-color: #8f8f8f;
  font-family: Arial, Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

/* Kopf Bereich */
header {
  float: left;
  padding: 0;
  color: white;
  width: 100%;
  background-color: white;
}

header .header-title {
  background: url("../view/img/main_background.png") repeat-x fixed 0 0;
  background-position: top left;
  width: 100%;
  z-index: 999;
  border-bottom: 3px solid black;
}

header .header-title h1 {
  text-align: center;
  color: transparent;
  font-size: 40pt;
  padding-top: 2px;
  margin: 0;
  visibility: hidden;
}
/*
  header .header-title h2 {
    text-align: center;
    font-size: 28px;
    font-weight: bolder;
    margin: auto;
  }
*/

/* Center the logo of Resy*/
header .resylogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

header .header-title h3 {
  visibility: hidden;
  height: 0;
}

header .header-title img {
  align-items: center;
}

/* Ausgabe des Menues */

nav {
  /* Rahmen um das Menue */

  height: auto;
  width: 100%;
  padding: 0;
  float: left;
  background-color: black;
}

nav ul {
  /* Listen Elemenet ohne Bullet Points anzeigen */
  list-style-type: none;
  display: flex;
  text-decoration: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Listen Menu ohne Unterstreichung auf. */
nav ul li a:hover,
nav ul li a:focus {
  text-decoration: none;
  color: antiquewhite;
}

/* design des Elemente <a></a> */
nav ul li a {
  color: white;
  font-size: 19px;
  padding: 7px 5px;
}

/*
nav .action {
  Eintrag im Hauptmenu, der diket eine Action aufruft
  position: relative;
  display: inline-block;
  color: white;
  margin: 0;
  padding: 8px 20px;
}

*/
/* sorgt für die Positionierung der einzelnen Menüpunkte */

nav ul li.item {
  position: relative;
  width: auto;
  padding: 20px 20px 20px 20px;
  text-align: center;
}

/* fügt beim Überfliegen mit der Maus eine Farbe, Border und padding hinzu  */
nav > ul > li:hover,
nav > ul > li:focus {
  /*  color: #ad5c0a; */
  background-color: #ad5c0a;
}

nav a {
  /* Links im Menü nicht als Link darstellen */
  color: white;
}

/* Dropdown menu design
* -------------------------------
* -------------------------------
*/
/*
nav .dropdown {

}
*/

nav .dropdown-content {
  /* Untermenü zuerst ausgeblendet */
  display: none;
}
/* bringt die Dropdown-Liste unter dem Menü erscheinen  */
nav ul li:hover .dropdown-content {
  display: block;
  position: absolute;
  background-color: black;
  margin-top: 20px;
  margin-left: -20px;
  border-top: 3px solid cyan;
  z-index: 1;
}

/* Dropdown vertikal erscheinen lassen*/
nav ul li:hover .dropdown-content ul {
  display: block;
  margin: 10px;
}
/* Gestaltung der einzelnen Elemente des Untermenüs*/
nav ul li:hover .dropdown-content ul li {
  width: 300px;
  padding: 10px;
  border-bottom: 1px solid white;
  border-radius: 0;
  text-align: left;
}

/* das letzte Element keinen unteren Rand hat */
nav ul li:hover .dropdown-content ul li:last-child {
  border-bottom: none;
}

/*die Standardfarbe des Untermenüelements auf Weiß ändern. */
nav ul li:hover .dropdown-content ul li a {
  color: white;
  font-size: 17px;
}
/* die Farbe des Untermenüelements ändern, wenn :hover */
nav ul li:hover .dropdown-content ul li a:hover {
  color: lightgray;
}

/***der benutzer icon (Menu) */
nav ul li a .resyBenutzerName{
  font-size: 17px;
  font-weight:bold;
}


/*** Ermöglicht, dass die Menüs mit Icon nebeneinander angezeigt werden. */
nav img{
  float: left;
}

/*
nav .dropdown:hover {
  Untermenü einblenden
  color: white;
  background-color: black;
}
*/

/*
 nav .dropdown:hover .dropdown-content {
   display: block;
 }
*/

/* Hautfenster */
.main {
  display: block;
  float: left;
  clear: both;
  background: /* url(../img/background-1.png) no-repeat */ right bottom #fff;
  min-height: 380px;
  width: 100%;
  padding: 40px 0 140px 0;
}

/* macht die Tabelle responsive */

/* Fusszeile */
footer {
  float: left;
  color: white;
  font-size: 15px;
  background-color: black;
  width: 100%;
  height: 150px;
}

footer .logo {
  padding: 15px 15px;
  background-position: 50% center;
  height: 50px;
}

footer .VersionInfo {
  text-align: center;
}
footer .VersionInfo a {
  color: #ad5c0a;
}

footer .Impressum {
  padding-top: 10px;
  text-align: center;
}

footer .Impressum a {
  color: #ad5c0a;
}

footer .Copyright {
  text-align: center;
  font-size: 13px;
}

/* Rahmen vom Login Form */
.data .form_login {
  width: 350px;
  margin: auto;
}

.data .form_changepassword {
  margin: 0;
}

/* Eingabeformulare */
label {
  display: block;
  width: 15em;
}

fieldset {
  background-color: lightgrey;
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 1em;
  padding-right: 1em;
}

legend {
  background-color: black;
  font-size: 15px;
  color: white;
  padding: 5px 10px;
}

/* Aus Ausklappbare Bereiche */
summary:focus {
  outline: none;
}
summary {

}
details {

}
/* Navigationselemente */

/* Ausgabe Tabellen mit Daten und Suchergebnissen */

.ResultTable {
  border-color: #333333;
}
.ResultTable tr th,
.tablestatfooter td {
  background-color: #003673;
  color: white;
  border: none;
}
/* Betreff von Tabelle */
.ResultTable th {
  border: none;

  padding: 5px 5px;
  vertical-align: bottom;
}

.ResultTable td {
  padding: 5px 5px;
}

/* Responsive tabelle */
.ResultTable tbody {
  overflow-x: scroll;
  max-height: 48vh;
}

/* .ResultTable caption {
  visibility: hidden;
}
*/

/* Ausgabetabele scrollen Head und Footer stehen lassen */

/*
.ResultTable tbody
{
  display: block;
  overflow: scroll;
  max-height: 48vh;
}


.ResultTable thead, tfoot tr
{
  display:table;
  width:calc(100% - 1.5em);
  width: fit-content;
  table-layout:fixed;
}

.ResultTable tbody tr
{
  display:table;
  width:100%;
  table-layout:fixed;
}
*/


/* Design für die InfosBox*/

.infosBox {
  float: left;
  width: auto;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;

}

#WheelsetViewWheels {
  padding-top: 10px;

}

/** Design (LADEPLATZ)*/

Form[name = "LadeplatzCreate"]{
  width: fit-content;
}



/* kleine Button in Tabelle */
.button_edit {
  background: url(./img/pencil.png) no-repeat center;
  height: 18px;
  width: 18px;
  cursor: pointer;
  margin-right: 5px;
  padding: 0;
  overflow: hidden;
  color: transparent;
}

.button_edit:hover {
  color: transparent;
}

.button_delete {
  background: url(./img/garbage_can.png) no-repeat center;
  height: 18px;
  width: 18px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  color: transparent;
}

.button_delete:hover {
  color: transparent;
}

.button_csv {
  background: url(./img/floppy_disk.png) no-repeat center;
  height: 18px;
  width: 18px;
  cursor: pointer;
  margin-right: 5px;
  padding: 0;
  overflow: hidden;
  color: transparent;
}

.button_csv:hover {
  color: transparent;
}

.button_colselect {
  background: url(./img/table_selection_column.png) no-repeat center;
  height: 18px;
  width: 18px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  color: transparent;
}

.button_colselect:hover {
  color: transparent;
}

.ButtonSubmit {
  margin-top: 7px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bolder;
}

.ButtonReset {
  margin-top: 7px;
  margin-left: 15px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bolder;
}

/* Aktionsbuttons in der Radsatz Liste */
.button_order_cart,
.button_order_now,
.button_cancel {
  margin: 3px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  font-weight: bolder;
}

/* Warenkorb */
.cart_counter {
  display: block;
  width: 20px;
  position: absolute;
  top: 0px;
  left: 90%;
  font-size: smaller;
  border-style: solid;
  border-radius: 10px;
  border-color: lightblue;
  background-color: lightblue;
  color: black;
  text-align: center;
}