:root {
  --cellwidth : 80px;
  --cellwidthin : 79px;
  --cellheight: 44px;
  --colorgreen: rgb(144,195,153);
  --colorgrey: rgba(51, 51, 51, 0.05);
  --colorwhite: GhostWhite;
  /*tmpbutton.style.background="#66FF99";
    tmpbutton.style.background="rgb(	107, 188, 126)";*/

}

html {
   background: GhostWhite;
}

img {
  width: 80px;
}

h1 {
   overflow: hidden;
}

/*generic classes */

.column-grid {
  display: grid;
  grid-auto-flow: column;
}

.row-grid {
  display: grid;
  grid-auto-flow: row;
}

.cell {
  width: var(--cellwidthin);
  height: var(--cellheight);
  text-align: center;
  overflow: hidden;
}

.grey {
  background-color: var(--colorgrey);
}

.white {
  background-color: var(--colorwhite);
}

.cell-double-width {
  width: calc(var(--cellwidth)*2);
  height: var(--cellheight);
  text-align: center;
}

.cell-double-height {
  width: var(--cellwidth);
  height: calc(var(--cellheight)*2);
  text-align: center;
}

.cell-triple-height {
  width: var(--cellwidth);
  height: calc(var(--cellheight)*3);
  text-align: center;
}


/*specific classes */


@media screen and (min-width: 1200px) {

   head, body {
     width: calc(var(--cellwidth)*15);
   }

   .header-container{
      width: 100%;
   }

   .body-container {
     display: grid;
     grid-auto-flow: column;
     width: calc(var(--cellwidth)*15);
   }

   .header-content-container {
     width: calc(var(--cellwidth)*14);
   }

   
   .content-container{
   }

   img {
     width: 80px;
   }

      
}

@media screen and (max-width: 1199px) {

   head, body {
     width: 96%;
   } 

   .header-container{
      width: 100%;
   }


   .body-container {
     display: grid;
     grid-auto-flow: column;
     width: 100%;
   }

   .header-content-container {
     width: 100%;
     overflow-x: scroll;
     scrollbar-width: none;
     }

   .content-container{
   }

   h1 {
     font-size: 20px;
   }

   img {
     width: 50px;
   }

}

}

.timescale {
   width: var(--cellwidth);
}

.timescalehour {
  /*border-bottom: 1px solid var(--colorgreen);*/
}

.day {
}

.daycourt{
  border-right: 1px solid var(--colorgreen);
  width: var(--cellwidthin);
}



.reserve {
  width: 100px;
} 

.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 200px; /* Full width (cover the whole page) */
  height: 300px; /* Full height (cover the whole page) */
  top: 20%;
  left: 20%;
  right: 0;
  bottom: 0;
  padding: 15px;
  background-color: 	GhostWhite; /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  border: 3px solid darkgrey;
  border-radius: 15px;
  box-sizing: border-box;
}


 
/* CSS */
.button {
  width: 100%;
  height: 100%; 
  border: none;
  /*padding: 0px;*/
  margin: 0;
  border-radius: 3px; /*eck radis*/
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  word-break: break-word;
}

button {
  cursor: pointer;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
}

button:disabled,
button[disabled]{
  cursor: not-allowed;
}



.item-text {
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500; /*schrift linien stärke*/
  line-height: 150%;
}


input{
   display: block;
   font-size: 1rem;
   line-height: 1;
   color: #495057;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: .25rem;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form {
   width: 96%; /*2x2% pedding* */
alli   
}

input:read-only,
input[read-only]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed/*cursor: default;*/
}


.imgbutton {
   cursor: pointer;
}