:root {
	--booking-dialogheader-color: #f7e9a3;
	--booking-dialogheader-textcolor: #777;
	--booking-dialogbg-color: #fffde8;

	--booking-sendheader-color: #5cbf60;
	--booking-sendheader-textcolor: #777;
	--booking-sendbg-color: #f0fcf0;

	--booking-errorheader-color: #e75b55;
	--booking-errorheader-textcolor: #777;
	--booking-errorbg-color: #f9d6d3;  

	--booking-take-me-color: #9fcba0;
	--booking-take-me-textcolor: white;
	--booking-taken-color: purple;
	--booking-taken-textcolor: white;

	--booking-submit-color: #b3a871;
	--booking-submit-textcolor: white;

	--booking-page-active-color: #b3a871;
	--booking-page-gone-color: #d9cb8a;
	--booking-page-todo-color: #b3a871;

	--calendar-color:#e3edf2;
	--calendar-day-name-color: #b7c9dd;


}

.wrapper {
	background-color: var(--booking-dialogheader-color); 
	font-weight: 800;
	font-size: 20px;
	line-height: 1.1em;
	color: var(--booking-dialogheader-textcolor);
	padding: 8px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center; 
}

.wrapper.send {
	background-color: var(--booking-sendheader-color); 
	color: var(--booking-sendheader-textcolor);
}

.wrapper.error {
	background-color: var(--booking-errorheader-color); 
	color: var(--booking-errorheader-textcolor);
}

.booking-bg {
	background-color: var(--booking-dialogbg-color);
}

.booking-bg.send {
	background-color: var(--booking-sendbg-color);
}

.booking-bg.error {
	background-color: var(--booking-errorbg-color);
}

.pagechoice {
	margin:0;
	margin-bottom:10px;
	height:20px;
	padding-top: 6px;
	padding-left: 3px;
	padding-right: 3px;
}

.pagechoice button {
	border: 2px solid var(--booking-page-todo-color);
 	background-color: transparent;
	color: black;
	padding: 8px 16px;
	font-size: 1em;
	box-shadow: none;
	outline: none;
	border-radius: 0;
	appearance: none;-webkit-appearance: none;-moz-appearance: none;
	box-sizing: border-box;
	border-radius: 0px;
	margin:0;
	display:inline-block;
	width:100%;
	height:1em;
}

.pagechoice button.here{
	background-color:var(--booking-page-active-color);
	border: none;
}

.pagechoice button.gone{
	background-color:var(--booking-page-gone-color);
	border: none;
}

.pagechoice button.gone.send, .pagechoice button.here.send {
	background-color: var(--booking-sendheader-color);
	border: none;
}

.pagechoice button.gone.error {
	background-color: var(--booking-errorheader-color);
	border: none;
}

.submitbutton {
	background-color:var(--booking-submit-color); 
	color:var(--booking-submit-textcolor); 
	padding-left: 20px; 
	padding-right: 20px;
}

.submitbutton.send {
	background-color: var(--menu-color);
}

.booking-h3 {
	font-family: "Licorice", sans-serif !important;
	font-weight: 600;
	font-size: 42px;
	line-height: 1.1em;
}

.box-left {
	padding-right: 8px;
}
.box-middle {
	padding-left: 8px;
	padding-right: 8px;
}
.box-right {
	padding-left: 8px;
}

.taken {
	width: 100%; 
	border-radius: 0; 
	bottom: 10px; 
	color:var(--booking-taken-textcolor);  
	background-color:var(--booking-taken-color); 
	padding: 10px; 
	position: absolute;  
	margin-bottom: 10px;
}

.take-me {
	width: 100%;
	border-radius: 0; 
	bottom: 10px; 
	color:var(--booking-take-me-textcolor);  
	background-color:var(--booking-take-me-color); 
	padding: 10px; 
	position: absolute;
	margin-bottom: 10px;
}

.selected {
  color: var(--booking-taken-textcolor) !important;
  background-color: var(--booking-taken-color) !important;
}


#idMenuExtras {
	font-family: "Licorice", sans-serif !important;
	font-weight: 800;
	font-size: 46px;
	background-color: transparent;
	border: none;
	outline: none;
	text-align: center;
	border: none;
	width: 100%;
}

.DatumUhrzeitPersonen {
  display: flex;
  justify-content: center;
  background-color: transparent;
}

#idDatumUhrzeitPersonen {
min-height: 50px;
}

#idDatumUhrzeitPersonen span{
display:inline-flex;
align-items: center;
white-space: nowrap;
}


.textblock {
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 8px;
  background-color: transparent;
  color: black;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
	pointer-events: none;
	user-select: none;
}

button {
  background-color: var(--booking-take-me-color);
  margin: 4px;
  color: var(--booking-take-me-textcolor);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  justify-content: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.btn-group span {
  background-color: var(--booking-take-me-color);
  color: var(--booking-take-me-textcolor);
  margin: 4px;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  cursor: default !important;
  user-select: none;
  justify-content: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

span.adults, span.kids, span.toddler{
  padding: 6px 16px;
}

#termine {
 scroll-margin-top: 95px;
}

.booking-h3.show-mobile {
	display: none;
}


#calendar-html-output1 {

padding-top:5px;
}


@media all and (max-width: 992px) {


  .textblock {
    font-size: clamp(0.8rem, 0.9rem, 1rem);
	padding: 0.5em 0em;
  }

  #idDatumUhrzeitPersonen {
    flex-direction: column;
    text-align: center;
    line-height: 1.4em;
}




#idMenuExtras {
  font-size: 40px;
  line-height: 1.2em;
  white-space: normal;
  display: block;
  text-align: center;
  width: 100%;
}

.booking-h3 {
  font-size: 40px;
}




.booking-h3.show-mobile {
	margin-top: 40px;
	display: block;
}



  .pagechoice-row {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    height: 50px;
	background-color: var(--booking-dialogheader-color); 
  }

  .pagechoice {
    width: auto !important;
    flex: 0 0 auto !important;
    text-align: center;
  }

  .pagechoice button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 35px;
    cursor: pointer;
    margin: 5px;
padding: 0;
  }

#calendar-html-output1 {

padding-top:20px;
}

#idName {

margin-top:18px;
}


.box-left {
	padding-left: 8px;
	padding-right: 8px;
}
.box-middle {
	padding-left: 8px;
	padding-right: 8px;
}
.box-right {
	padding-left: 8px;
	padding-right: 8px;
}


}