body.frontend { 
	font-size:1em;
	font-family: Arial, Helvetica, sans-serif;
	-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; 
	-webkit-touch-callout: none; -webkit-text-size-adjust: none;
}
body.frontend div#breadcrumb, body.frontend div.th, body.frontend div#legals, body.frontend div#poweredby, body.frontend div.price { 
	-webkit-hyphens: none; -ms-hyphens: none; hyphens: none;
}
body.frontend #main { max-width:700px; margin-left:auto; margin-right:auto; background-color:white; margin-bottom:50px }
body.frontend div#logo, body.frontend div#seating { width:100%; margin-left:auto; margin-right:auto; max-width:900px; margin-bottom:20px; }
body.frontend div#logo img, body.frontend div#seating img { width:100% }

p.error {
	background: #f44336;
	color:#fff!important;
	font-size:1em;
	padding:10px;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}

#footer { font-size:0.9em }
#footer a { text-decoration:none }
#footer a:hover { text-decoration:underline } 
#footer #poweredby { opacity: 0.6; white-space: nowrap;} 



.Frontend.events #main { padding-top:12px }
.Frontend.events .th { padding: 8px 2px}
.Frontend.events .day{ width:50px }
.Frontend.events .thumbnail{width:25vw; max-width:150px;}
.Frontend.events .date { width:110px }
.Frontend.events .datethumb { width:14vw; max-width:110px }
.Frontend.events .time { width:70px }
.Frontend.events .buy { width:90px }
.Frontend.events .event.nothumb { border-top: 1px solid silver }


body.Frontend.events div.w3-row.event div.w3-col.thumb,
body.Frontend.events div.w3-row.event div.w3-rest.thumb,
body.Frontend.events div.w3-row.event div.w3-cell.thumb { height:150px; vertical-align:middle  } 
body.Frontend.events .thumbnail img {max-width:110px}
body.Frontend.events .eventTitle thumb {padding-right: 15px;}

body.Frontend.events div.w3-row.event.thumb:not(.first) {border-top:solid 1px silver}
body.Frontend.events .w3-row.thumb {margin-bottom: 10px}



.Frontend.events .w3-col, 
.Frontend.events .w3-rest { padding:4px; }
.Frontend.events .mobile { display:none }
.Frontend.events .buy button { cursor:pointer; /*font-size:0.9em;*/ }
.Frontend.events i.cart-icon { cursor:pointer; font-size:1.5em; }
.Frontend.events i.cart-icon.buy { color:green }
.Frontend.events i.cart-icon.sold { color:red }
.Frontend.events a { text-decoration:none; }
.Frontend.events #pagination { margin-top:26px; }
.Frontend.events #pagination a { display:block; padding:10px 16px; margin:10px; border:1px solid silver}
.Frontend.events #pagination a:hover { font-weight:bold; }
.Frontend.events #pagination a.active { background-color: silver }
.Frontend.events .event .subtitle {font-style: italic}

.event table#seating-mobile img {margin-bottom:0!important;}

.Frontend.workshops .date { width:110px }
.Frontend.workshops .dates { width:80px }
.workshops button {hyphens: none!important;}

/*
select {-webkit-appearance: none;}
select {    margin: 2px 0;
    box-sizing: border-box;
    border: 1px solid #aaa;
    padding: 0px 10px 0px 3px;
    border-radius: 2px;
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDUwMCA1MDAiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzEuNTIzIiB5MT0iNDIuNjMiIHgyPSIzNjguNDc4IiB5Mj0iMjc5LjU4NCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYjNiM2IzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOTk5Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNMjUwIDM5Ni42NjZjLTEuMTU1IDAtNC4xMS0xLjgzMi03LjExMy02Ljc1bC0xNjkuNi0yNzcuNDU1Yy0yLjUxNy00LjExNC0zLjE5LTYuOTgtMy4yOC04LjMxNC44MjctLjMzIDIuNTY1LS44MTIgNS42MjctLjgxMmgzNDguNzMzYzMuMDYzIDAgNC43OTguNDgyIDUuNjI3LjgxMi0uMDkgMS4zMzQtLjc2NiA0LjItMy4yOCA4LjMxNWwtMTY5LjYgMjc3LjQ1N2MtMy4wMDUgNC45MTctNS45NiA2Ljc1LTcuMTE0IDYuNzV6Ii8+PC9zdmc+) right -10px center no-repeat;
        background-origin: padding-box;
    background-origin: content-box;
    cursor: pointer;
     -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


w3-select {
	 background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDUwMCA1MDAiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzEuNTIzIiB5MT0iNDIuNjMiIHgyPSIzNjguNDc4IiB5Mj0iMjc5LjU4NCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYjNiM2IzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOTk5Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNMjUwIDM5Ni42NjZjLTEuMTU1IDAtNC4xMS0xLjgzMi03LjExMy02Ljc1bC0xNjkuNi0yNzcuNDU1Yy0yLjUxNy00LjExNC0zLjE5LTYuOTgtMy4yOC04LjMxNC44MjctLjMzIDIuNTY1LS44MTIgNS42MjctLjgxMmgzNDguNzMzYzMuMDYzIDAgNC43OTguNDgyIDUuNjI3LjgxMi0uMDkgMS4zMzQtLjc2NiA0LjItMy4yOCA4LjMxNWwtMTY5LjYgMjc3LjQ1N2MtMy4wMDUgNC45MTctNS45NiA2Ljc1LTcuMTE0IDYuNzV6Ii8+PC9zdmc+) right -16px center no-repeat!important;
        background-origin: padding-box;
    background-origin: content-box;
	
}
*/

button.tktbtn { padding:4px!important; min-width:60px }
#calendar div.event-info { }

div.w3-modal-content header { background-color: #dedddd }
div.category div.items:last-child, 
div.event-addons div.items div.w3-row:last-child ,
div.category div.l10px:last-child
{margin-bottom:6px}
body.Basket.payment div.ticket:first-child, body.Basket.customer div.ticket:first-child  {margin-top:0px;}

.StripeElement, div.stripe { background-color:white }

/*SVG-Saalplan*/
.remote{
	display:flex;
	flex-direction:column;
	width:40px;
	position:absolute;
	z-index:1;
	}
.remote img {box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 1px;
	cursor:pointer;
	}
.remote img:first-child{margin:5px 0}
	

.Frontend.events span.eventTitle {font-size:1.7em;/*font-weight: bold;*/}

/*tabelariascher Saalplan*/
 body.event table#seating-mobile tbody td  {
			text-align: center!important;
			vertical-align: middle!important	
		}
		
/*tabelarischer Saalplan bei großen Displays*/
@media screen and (min-width: 431px) {	
table#seating-mobile tbody td {width:30px!important;height:30px!important;min-width:18px; min-height:18px}
table#seating-mobile tbody td img {width:70%!important;;max-width:24px}
}
			
/*tabelarischer Saalplan bei kleinen Displays*/
@media screen and (max-width: 430px) {
	table#seating-mobile tbody td {width:20px!important;height:20px!important; min-width:18px; min-height:18px}
	}
	
@media screen and (max-width: 600px) {
	
	/*#breadcrumb div:not(.active){display:none}*/
	.Frontend.events .day { display:none }
	.Frontend.events .thumbnail{width:21vw; max-width:130px;}
	.Frontend.events .date.thumb {width: 12vw; min-width:55px}
	.Frontend.events .date {width:110px}
	.Frontend.events .time { display:none }
	.Frontend.events .desktop { display:none }
	.Frontend.events .mobile { display:block }	
	.Frontend.events .dd { display:block; font-size: 2.4em; margin-top:-8px; margin-right:-6px }
	.Frontend.events .dd.thumb {font-size: 2.0em;}
	
	.Frontend.events .mY div:nth-child(1) { font-size: 1.0em }
	.Frontend.events .mY div:nth-child(2) { font-size: 0.8em; margin-top:-2px }
	.Frontend.events i.cart-icon { font-size:2.4em; }
	
	.frontend.payment div.shipment { margin-bottom: 18px}
	
	#breadcrumb div { text-align:left }
	
	button.tktbtn{padding:8px!important}
	div.formbuttons input[type=button]:not(:first-child){margin-top:5px}
	div.shipment:not(:first-child){margin-top:12px}

	div.category div.w3-half:nth-child(2) div.th {background-color:transparent!important;border-top:1px solid silver;color:black }
	div.voucherprice {position: relative;top:-25px;}
	
	.sidebar {max-width:100%!important}

	.thumbnail img {width:19vw}

.Frontend.events span.eventTitle {font-size:1.1em;font-weight:bold}		
}

@media screen and (max-width: 430px) {
	.Frontend.events span.eventTitle {font-weight:bold}	
	/*body.Frontend.events div.w3-row.event div.w3-rest {font-size:80%}}*/
}

/*
@media screen and (max-width: 350px)
#seatin-img img {
width: 8vw;
}
*/

@media screen and (max-width: 350px) {
	* {font-size: 4.2vw;}
	.Frontend.events .date.thumb {width: 14vw; min-width:15px}
	.Frontend.events .date {width: 21vw;}
	.Frontend.events .dd {font-size: 5.4vw;margin-top: 0px;margin-right:6px}
	.Frontend.events .buy {width: 22vw;text-align: right;}
	h3 {font-size: 18px;}
	h2 {font-size: 25px;}
	body.frontend.events h2 {font-size: 20px;}
	.Frontend.events #pagination a {padding: 5px 9px;}
	button.tktbtn {padding: 1vw !important;}
	.hide-smaller{display:none}
	body.Shop.payment .input, body.Shop.customer .input, body.Shop.order .input   { width: 20px;}
	/*img {width:8vw}*/
}

td:hover div.infobox{ display:block; }
div.infobox{
	display:none;
	position:absolute;
	background-color:white;
	border:solid 2px grey;
	padding:5px;
	margin-top:-55px;
	margin-left:45px;
	font-size:8pt;
	text-align:left;
	z-index:199;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

body.frontend i.green { color:green; border:0px }
body.frontend i.red { color:red; border:0px }

/*Checkbox + Radiobox Stylen*/

/* Customize the label (the container) */
.container, .blockcontainer {
  position: relative;
  padding:0 15px 0 20px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.blockcontainer {
	display: block;
}

/* Hide the browser's default checkbox */
.container input:not(.visible), .blockcontainer input:not(.visible) {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #fff;
  border:solid 1px silver;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark, .blockcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark, .blockcontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after, .blockcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after, .blockcontainer .checkmark:after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Create a custom radio button */
.radiocheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .radiocheckmark, .blockcontainer:hover input ~ .radiocheckmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .radiocheckmark, .blockcontainer input:checked ~ .radiocheckmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiocheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .radiocheckmark:after, .blockcontainer input:checked ~ .radiocheckmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .radiocheckmark:after, .blockcontainer .radiocheckmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}