/*CSS für Zwischenräume bei Tischen (horizontal)*/

#rowtableblank
{
/*
background-color:aqua;
border:1px black solid;
*/

/**/
min-height:60px;
height:60px;


}


/*
CSS für die Ausgabe der Plätze und die Maskierung der Checkboxen
Gestaltung über die CSS Flex Eigenschaften für die Zentrierung in Spalte und Reihe
*/

#tablecontainer
{
width:100%;
display:flex;
flex-direction:row;
justify-content:center;
	
}



#rowcentertable
{
min-width:100px;
/*Spezielles Flex Zuweisung damit Ausgabe ans untere Ende des Divs geschoben wird*/
display:flex;
flex-direction:column;
justify-content:flex-star;

}




/*Ausgabe falls links und rechts mit Text beschriftet. Beispiel senkrecht "Eingang" , "Fenster"
Ausgabe erfogt senkrecht nach unten
*/
#rowcentertable_wr_sk
{
/*Spezielles Flex Zuweisung damit Ausgabe ans untere Ende des Divs geschoben wird*/
display:flex;
flex-direction:column;
justify-content:flex-star;
/*background-color:fuchsia;*/

writing-mode: vertical-lr;
text-orientation: upright;

font-weight:bold;
font-size:1.2em;
text-align:center;
padding:0 10px 0 10px;


}

/*Ausgabe falls links und rechts mit Text beschriftet. Beispiel senkrecht "Eingang" , "Fenster"*/
#rowcentertable_wr_mitte
{
/*min-width:100px;*/
/*Spezielles Flex Zuweisung damit Ausgabe ans untere Ende des Divs geschoben wird*/
display:flex;
flex-direction:column;
justify-content:flex-star;

}


/*Ausgabe des Tisch nach unten ans Ende des Divs verlegen*/
#rowcentertable_bottom
{
min-width:100px;
/*Spezielles Flex Zuweisung damit Ausgabe ans untere Ende des Divs geschoben wird*/
display:flex;
flex-direction:column;
justify-content:flex-end;


}


/*Nicht zwingen notwendig*/
#rowcenter
{

}


/******************
Ausgabe Text Seite
******************/


/*
*
*Ausgabe für Text
*echo '<li class="seattm "><label></label></li>';
*/

.seattm {
  display: flex;
  padding: 1px; 
  position: relative;
    
}

.seattm label {
  display: block;
  position: relative;
  min-width:100px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  /*background:#FFFFFF;
  background:yellow;*/
  font-weight:bold;
}
.seattm label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}




/******************
Ausgabe Text Beschriftung über der Tischbestuhlung
******************/
.seataus {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seataus label {
  display: block;
  position: relative;
  min-width:72px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #B6B6B6;
  margin-bottom:10px;
  font-weight:bold;
}
.seataus label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}






/* Liste 

ul {
  list-style: none;
  padding: 0;

}
*/

.seats {

  list-style: none;
  padding: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  margin:0;
  font-size:10px;
  
}

.seat {
  display: flex;
  /*flex: 0 0 14.28571428571429%; => Original*/
  /*flex: 0 0 3%; Breite des li Elements mit der Platz Nr*/
  /**/padding: 1px; 

}


/*

Spalte in der Mitte nach drei Plätzen
.seat:nth-child(3) {
  margin-right: 14.28571428571429%;
}
*/
.seat input[type=checkbox] {

  position: absolute;
}
.seat input[type=checkbox]:checked + label {
  background: #bada55;
}





/*Ausgabe der Plätze wenn nicht Reserviert für Checkbox Auswahl*/
.seat label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  /*padding: 1px 0 ;*/
  padding:4px 0 0 0;
  /*margin: 1px 0 1px 0;*/
  background: #FFCC99;
  border-radius: 5px;

}
.seat label:before {
  /*width: 75%;
  height: 100%;*/
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);

}
.seat label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}



/*
=> Speziall Typ falls TempTime Aktiv und reload der Bestuhlun erfolgte => checkbox als markiert betrachten und grün!!
Spalte in der Mitte nach drei Plätzen
.seat:nth-child(3) {
  margin-right: 14.28571428571429%;
}
*/
.seatrest input[type=checkbox] {

  position: absolute;
}
.seatrest input[type=checkbox]:checked + label {
  background: #bada55;
}





/*Ausgabe der Plätze wenn nicht Reserviert für Checkbox Auswahl*/
.seatrest label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  /*padding: 1px 0 ;*/
  padding:4px 0 0 0;
  /*margin: 1px 0 1px 0;
  background: #FFCC99;*/
  background:aqua;
  border-radius: 5px;

}
.seatrest label:before {
  /*width: 75%;
  height: 100%;*/
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);

}
.seatrest label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}






/*
CSS für Auswahl und Freigabe der Datenplätze
*/

}

.seatic {
  display: flex;
  padding: 1px; 

}


.seatic input[type=checkbox] {

  position: absolute;
}
.seatic input[type=checkbox]:checked + label {
  background: #F90;
}


/*Ausgabe der Plätze wenn nicht Reserviert für Checkbox Auswahl*/
.seatic label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  margin:1px;
  background: #FFCC99;
  border-radius: 5px;

}
.seatic label:before {
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);

}
.seatic label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}



/*
*
*Ausgabe als Tisch weiss für Platzhalter
*
*/

.seattw {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seattw label {
  display: block;
  position: relative;
  min-width:20px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  /*
  background:yellow;
  */
}
.seattw label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}





/*
*
*Ausgabe als Tisch
*
*/

.seatt {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seatt label {
  display: block;
  position: relative;
  min-width:20px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #B6B6B6;
}
.seatt label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}





/*
*
*Ausgabe der Plätze für Druck bzw nach Reservationsabschluss, nicht reserviert
*
*/

.seatp {
 padding: 1px; 
  position: relative;
}

/*Ausgabe der Plätze wenn nicht Reserviert*/
.seatp label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #FFCC99;
}
.seatp label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}




/*
*
*Ausgabe der Plätze für Vorschau mit den ausgewählten Plätzen => Preis und Vorschau aktiv
*
*/

.seatv {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seatv label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #bada55;
}
.seatv label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}




/*
*
*Ausgabe der Plätze wenn besetzt
*
*/

.seatb {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seatb label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #FF0000;
}
.seatb label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}




/*
*
*Ausgabe der Plätze wenn inaktiv geschaltet
*
*/

.seati {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seati label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #F90;
}
.seati label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}





/*
*
*Ausgabe als Tisch in Weiss für Platzhalter
*=> echo '<li class="seattw"><label></label></li>';

*
*/

.seattw {
  display: flex;
  padding: 1px; 
  position: relative;
}

.seattw label {
  display: block;
  position: relative;
  min-width:20px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  /*background:#FFFFFF;
  background:yellow;*/
}
.seattw label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}



/*
*
*Ausgabe der Plätze als Platzhalter (temp grün, sonst weiss!!
*=> echo '<li class="seatw"><label></label></li>';
*
*/

.seatw {
  display: flex;
  padding: 1px; 
  position: relative;
    
}

.seatw label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  /*background:#FFFFFF;
  background:aqua;*/
}
.seatw label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}





/*
*
*Ausgabe der Plätze als Platzhalter mit fetter Schrift
*=> echo '<li class="seatwf"><label></label></li>';
*
*/

.seatwf {
  display: flex;
  padding: 1px; 
  position: relative;
    
}

.seatwf label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  font-weight:bold;
  /*background:#FFFFFF;
  background:aqua;*/
}
.seatwf label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}





/*
*
*Ausgabe der Plätze als Platzhalter (temp grün, sonst grau!!
*=> echo '<li class="seatw"><label></label></li>';
*
*/

.seatg {
  display: flex;
  padding: 1px; 
  position: relative;
    
}

.seatg label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background:#CCCCCC;
}
.seatg label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}



/*Einblendung Reihe als Zwischenraum*/
#seatrow
{
	height:25px!important;
	width:300px !important;
	min-width:300px!important;
	min-height:25px!important;
	/*background-color:aqua !important;
	border: 1px black solid !important;*/
	margin:auto;
	text-align: center;
	font-weight: bold;
}





/*

Spalte in der Mitte nach drei Plätzen
.seat:nth-child(3) {
  margin-right: 14.28571428571429%;
}
*/

.seatzus {
  display: flex;
  /*flex: 0 0 14.28571428571429%; => Original*/
  /*flex: 0 0 3%; Breite des li Elements mit der Platz Nr*/
  /**/padding: 1px; 

}



.seatzus input[type=checkbox] {

  position: absolute;
}
.seatzus input[type=checkbox]:checked + label {
  background: #bada55;
}



/*Ausgabe der Plätze wenn nicht Reserviert für Checkbox Auswahl*/
.seatzus label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  /*padding: 1px 0 ;*/
  padding:4px 0 0 0;
  /*margin: 1px 0 1px 0;*/
  background: #FFFF00;
  border-radius: 5px;

}
.seatzus label:before {
  /*width: 75%;
  height: 100%;*/
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);

}
.seatzus label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}



/*
*
*Ausgabe der Plätze für Druck bzw nach Reservationsabschluss, nicht reserviert
*
*/

.seatpzus {
 padding: 1px; 
  position: relative;
}

/*Ausgabe der Plätze wenn nicht Reserviert*/
.seatpzus label {
  display: block;
  position: relative;
  min-width:25px;
  min-height:20px;
  text-align: center;
  padding:4px 0 0 0;
  border-radius: 5px;
  background: #FFFF00;
}
.seatpzus label:before {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
}