/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-condensed-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/roboto-condensed-v27-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/roboto-condensed-v27-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/roboto-condensed-v27-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-condensed-v27-latin-500.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-condensed-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v27-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/roboto-condensed-v27-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/roboto-condensed-v27-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/roboto-condensed-v27-latin-500.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}




BODY {
	text-align: center;
	font-family: "Roboto", Sans-serif; 
	margin:0; padding:0;
	background:#F0F0F3
}

p {
    margin: 0 0 20px;
}

:: placeholder {font-family: "Roboto", Sans-serif; font-size:15px }

.absatz {
	border: 1px solid #eaeaea;
	padding: 15px;
	font-size: 15px;
	color: #111; 
	margin:0 auto 4em;
	border-radius:5px;
	transition: ease-out 0.4s;
}


.absatz:hover {background:#F0F0F3}

.darkmode .absatz {border:1px solid #444}

.webcontrol {
	position: fixed;
	top: 5px;
	right: 5px;
	font-size: 12px;
}

.darkmode { color: white!important; background: #222!important; }
.darkmode IMG {box-shadow: 3px 3px 6px #ffffff;  };
TABLE.darkmode tr:nth-child(1)    {background: #444444!important;}
TABLE.darkmode tr:nth-child(even) {background: #222222!important;}
TABLE.darkmode tr:nth-child(odd)  {background: #333333!important;}
[css=darkmode][mode=add]    { background: linear-gradient(to bottom right, #222222, #444444)!important; border: 1px solid black!important; }
[css=darkmode][mode=del]    { background: linear-gradient(to bottom right, #ffffff, #dddddd)!important; border: 1px solid white!important;color: black!important}
[css=darkmode][mode=toggle] { background: linear-gradient(to bottom right, #222222, #dddddd)!important; border: 1px solid black!important; }
[css=darkmode][mode=toggle][state=dark] { background: linear-gradient(to bottom right, #ffffff, #444444)!important; border: 1px solid white!important; color: black!important;}
	

.absatz img { width: 35%; height: 35%; }
.greentop, .darkmode .greentop {border-top: 3px solid #72a625; }


input {outline:none}
.absatz INPUT, .absatz SELECT { width: 100%; font-family: "Roboto", Sans-serif; font-size:15px }
.absatz INPUT[type=date] { width: calc(100% - 16px);  }

.absatz INPUT[type=checkbox] { width: auto!important;  }
.absatz INPUT[type=radio] { width: auto!important; accent-color: grey; }
.absatz INPUT[type=radio]:checked { background: #72a625;  }
.absatz INPUT[type=number] { border: 1px solid #eaeaea; background: #fff; padding:5px; width:auto }
.absatz INPUT[type=number]:focus { background: #bbbbbb;  }
.absatz INPUT[type=date] { border: 1px solid #eaeaea; padding:7px }
.absatz INPUT[type=range] {width: calc(100% - 6px);   -webkit-appearance: none; appearance: none;  background: transparent;  cursor: pointer;}

.darkmode .absatz INPUT[type="date"], .darkmode select, .darkmode .absatz INPUT[type=number],.darkmode .absatz INPUT[type=text]  {border: 1px solid #444}
.darkmode .absatz INPUT[type=radio]:checked { background: #72a625; accent-color: #72a625; }
.darkmode a { color: #80FF80; }

input[type="range"]::-moz-range-track {
  background: #fff;border:1px solid #eaeaea;  height: 20px}

.darkmode input[type="range"]::-moz-range-track{
  background: #222;border:1px solid #444;  height: 20px}

input[type="range"]::-moz-range-progress {
  background-color: #72a625; height: height: 20px;}


input[type=range]::-moz-range-thumb {
  height: 30px;
  width: 30px;
  border-radius: 18px;
  background: #72a625;
  cursor: pointer;
  border:1px solid #72a625
}



/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track { 
	height: 20px;
background: #fff;border:1px solid #eaeaea;
}
.darkmode input[type=range]::-webkit-slider-runnable-track { 
	height: 20px;
background: #222;border:1px solid #444;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 0px;
  background: #72a625;
  cursor: pointer;
  border:1px solid #72a625;
    margin-top: -5px;
}






.absatz INPUT[type=text] { border: 1px solid #eaeaea;}

.absatz INPUT.matchgreyborder { border: 1px solid #eaeaea;  }

#verleihmaterial_auswahl INPUT[type="number"] { border: 1px solid #eaeaea;  background: #fff;  padding: 5px;  width: auto;}

#verleihmaterial_auswahl  .calcbutton { 
	display: inline-block;
	background: #72a625;
	text-align: center;
	vertical-align: middle;
	margin-left: 3px;
	margin-right: 3px;
	user-select: none;
	color: white;
	line-height: 0;
  width: 30px;
  height: 14px;
  padding-top: 14px;
  margin-top: -2px;
  font-size:14px!important
}


SELECT {
	background: #ffffff;
	border-radius: 0px;
	border: 1px solid #eaeaea;
	padding:7px

}

.greenbox {
	background: #72a625;
	border-radius: 5px;
	padding: 0.5em;
	color: white;
	margin-right: 1em;
}
.header {
	color: #111;
	font-size: 20px;
	line-height: 1.1em;
	display: inline-flex;
	top: 3px;
	position: relative;
	font-family: "Roboto condensed", Sans-serif; 
}
.label {text-transform: uppercase;font-weight: normal!important; margin-bottom: 10px; font-size:13px; color:#333; margin-top: 30px;}
.darkmode .label {color:#fff}

.greyborder {
	border: 1px solid #eaeaea;
	padding-top: 7px; min-height:25px; background:#fff
}

.darkmode  .greyborder {background:transparent; border:1px solid #444}

.zähler {	padding: 0.5em;}

TABLE.matrix td {white-space: nowrap;}

TABLE.matrix tr:nth-child(1)  {	background: #dddddd;}
TABLE.matrix tr:nth-child(even) {background: #ffffff;}
TABLE.matrix tr:nth-child(odd) {background: #eeeeee;}

.button {
	display: inline-block;
	background: #72a625;
	padding: 10px;
	border: 1px solid #6Ca120;
	border-radius: 5px;	
	color: white;
	text-align: center;
	vertical-align: middle;
	user-select: none;
}

.button:hover { background: #94ce40 }
.button:active { background: #486a15; border: 1px solid #5C9110; }

.cover { padding: 0px; }

.calcbutton { 
	display: inline-block;
	background: #72a625;
	text-align: center;
	vertical-align: middle;
	margin-left: 3px;
	margin-right: 3px;
	user-select: none;
	color: white;
	line-height: 0;
  width: 30px;
  height: 14px;
  padding-top: 14px;
  margin-top: -2px;
  font-size:14px!important
}
}
.calcbutton:hover { background: #70a423; }
.calcbutton:active { background: #6ca120; }

.partner tr > td:nth-child(2) {
	vertical-align: middle;
}

.partner tr > td { padding-top: 5px;padding-bottom: 5px; }
.partner tr > td > img { width: 5em;height: 4em;}

.matrix td:nth-child(1) { text-align: left!important;}

@media (min-width:1200px) {
.matrix {table-layout: fixed; width:100%}
.matrix th:nth-child(1) { width:200px!important }
}


@media (min-width:1000px) and (max-width:1199px) {
.matrix {table-layout: fixed; width:100%}
.matrix th:nth-child(1) { width:150px!important }
}

.matrix td { text-align: center; }


.helpicon {
	position: relative;
	border: 1px solid #436413;
	background: #72a625;
	color: white;
	width: 12px;
	display: inline-block;
	text-align: center;
	height: 12px;
	user-select: none;
	font-size:10px
}
.helpicon:hover { background: #94ce40 }
.helpicon:active { background: #486a15; border: 1px solid #5C9110; }

.verleihnix tr > td > div:nth-child(2) { height: 1.45em; }

.gallery { display: inline-block; }
.gallery div { float: left; padding: 0.5em; }
.gallery img { width: 10em; height: 10em; border-radius: 15px;  box-shadow: 3px 3px 3px #909090;}
.gallery img:hover  { cursor: grab;transform: scale(1.05) translate(0%, 0%);transition: transform 0.25s;}

.galleryscale {
	transform: scale(3) translate(0%, -50%)!important;
	transition: transform 1s!important;
	transition-delay: 0ms!important;
}


/* MT allgemein */

.content {padding:50px; background:#fff; border:1px solid #fff}

@media (min-width:1900px) {
.wrapper {width:60%; margin:auto}
}

@media (min-width:1600px) and (max-width:1899px) {
.wrapper {width:80%; margin:auto}
}

@media (min-width:1400px) and (max-width:1599px) {
.wrapper {width:90%; margin:auto}
}

@media (max-width:1399px) {
.wrapper {width:calc (100% - 40px); margin:auto; padding:0 20px}
.content {padding:25px;}
}


.darkmode .content {border:1px solid #444; background:#222222}
.logo img {width:150px; height:auto; margin:25px auto}
.darkmode .logo img {box-shadow: none;}

.absatz table {width:100%}
.termin table td {width:25%}
.lieferung table td, .anlass table td, .rechnungsadresse table td, .verleihnix td {width:50%}

.textanlass {color:#222; font-size:12px}
.darkmode .textanlass {color:#999}

.rechnungsadresse input {padding:5px; width:calc(100% - 12px); border: 1px solid #eaeaea;}
.darkmode .rechnungsadresse input {border: 1px solid #444;}

.headline {font-size:14px; font-weight:bold; margin:15px 0-10px}

#zapfanlage_auswahl,
#tresen_auswahl,
#kühlschränke_auswahl,
#stehtische_auswahl,
#bierzeltgarnituren_auswahl,
#kühlanhänger_auswahl,
#verkaufswagen_auswahl,
#verkaufswagenmitzelle_auswahl,
#pmc_auswahl,
#teufel_rockster_auswahl {margin-top:10px}

#pmc_hilfe {margin-top:20px; background:#fff; padding:20px}

/* MT Modal Einleitung */
.btn-close {color: #72a625;font-size: 40px; text-decoration: none; position: absolute; right: 5px; top: 0;}
.btn-close:hover {color: #111;}
.modal:target:before {
    display: none;
}
.modal:before {
    content:"";
    display: block;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.modal .modal-dialog {
    background: #fff;
    border: #72a625 solid 1px;
    margin-left: -300px;
    position: fixed;
    left: 50%;
    z-index: 11;
    width: 600px;
	max-width:100%;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    top: 100px;
	border-radius:5px
}
.modal:target .modal-dialog {
    top: -100%;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
}
.modal-body {padding: 20px; text-align:left; font-size:14px}
.modal-header {padding: 10px;}


@media (max-width: 650px) {
.modal .modal-dialog {left: 0%; width: 90%; top: 75px; margin:0 5%}
}

/* MT Table Scollable */

@media (max-width: 999px) {

.matrix th:nth-child(1) { width:150px!important }
.matrix td,.matrix th {min-width:75px}
.scrollable { max-width: 90vw; overflow-x: auto;overflow-y: hidden;white-space: nowrap; padding-bottom: 15px;}

}


/* MT Responsive */
@media (max-width: 999px) {
.wrapper {width:100%; margin:auto; padding:0px}
.content {padding:20px;}
:: placeholder, .absatz, .absatz INPUT, .absatz SELECT {font-size:14px }
.matrix input {width:90%!important}
.logo {background:#fff}
.logo img { width: 100px; margin: 10px auto;}
}

@media (max-width:500px) {
.scrollable { max-width: 75vw;}
:: placeholder {font-size:13px!important}
.termin table td, .lieferung table td, .anlass table td, .rechnungsadresse table td, .verleihnix td {width: 100%; display:block}
.absatz, .absatz INPUT, .absatz SELECT {font-size:13px }
}

.gläser {}

.gläser td:nth-child(2n) {
	width: 30% !important;
}
.gläser td:nth-child(2n+1) {
	text-align: right;
	white-space: nowrap;
	width: 20% !important;
}

.getränkewunsch {
	width: 100%;
	height: 10em;
}