#bestell_formular {
display:block;
}
#resultat_formular {
display:none;
background-color: oldlace;
border:2px solid steelblue;
border-radius: 10px;
margin: 100px auto;
font-family: arial;
padding: 40px;
width: 500px;
min-width: 300px;
}
#speicher_formular {
display:none;
}

#form_kunden_bestellung {
background-color: oldlace;
border:2px solid steelblue;
border-radius: 10px;
//margin: 0px auto;
margin:0px;
font-family: arial;
padding: 40px;
width: 500px;
min-width: 300px;
}

#form_kunden_bestellung  input {
padding: 5px 10px;
width: 220px;
font-size: 12pt;
font-family: Arial;
border: 1px solid #aaaaaa;
}


#form_kunden_bestellung  select {
padding: 5px 10px;
width: 220px;
font-size: 12pt;
font-family: Arial;
border: 1px solid #aaaaaa;
}

input.invalid {
background-color: #ffdddd;
}
select.invalid {
background-color: #ffdddd;
}

select.pflicht {
color: #bb7799;
}
select.gesetzt {
color: #000;
}

input.show {
background-color: transparent;
color: #000;
border: none !IMPORTANT;
padding:0px !IMPORTANT;
padding-top: 6px !IMPORTANT;
}

.half {
width: 220px;
padding: 0px;
margin-top: 30px;
}

p.feld_titel {
font-size:12pt; 
margin-bottom:0px; 
margin-top:30px;
}

div.half > p:first-child {
margin-top:0px;
}

.tab {
  display: none;
}

button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Arial;
cursor: pointer;
width:120px;
}

button:hover {
	opacity: 0.8;
}

#bestellen_produkt_auswahl {
background-color: linen; 
border: 1px solid midnightblue; 
border-radius:5px; 
padding:10px; 
width: 400px;
}

.schalter {
background-color: green;
color: #ffffff;
border: none;
padding: 5px 10px;
font-size: 17px;
font-family: Arial;
cursor: pointer;
border-radius:3px;
border: 1px solid darkgreen
}

.schalter:hover {
background-color: lightseagreen;
}
#eg_buch_auswahl {
padding: 5px 10px;
width: 300px;
font-size: 12pt;
font-family: Arial;
border: 1px solid #peachpuff;
background-color: bisque;
}

#data_show {
padding:15px;
margin-top:20px;
background-color: wheat;
}

#prevBtn {
background-color: #bbbbbb;
}

.form_zurueck {
background-color: #bbbbbb;
}

.form_weiter {
background-color: green;
}

/* Generiert Kreise für den Fortschritt im Formular: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;  
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Markierung der bereits erledigten Schritte: */
.step.finish {
background-color: #4CAF50;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #bb7799;
opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #bb7799;
}

::-ms-input-placeholder { /* Microsoft Edge */
color: #bb7799;
}

.optional::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #88ccaa;
opacity: 1; /* Firefox */
}

.optional:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #88ccaa;
}

.optional::-ms-input-placeholder { /* Microsoft Edge */
color: #88ccaa;
}

.sel_box_200 {
position: relative;
width:200px;
/*top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
}

.sel_box_200 select {
background-color: green;
color: white;
padding: 5px;
width: 100%;
border: none;
font-size: 17px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
}

.sel_box_200::before {
content: "\f13a";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
text-align: center;
font-size: 25px;
line-height: 33px;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.15);

pointer-events: none;
}

.sel_box_200:hover::before {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.25);
}
.sel_box_200 select:hover {
color: blanchedalmond;

}

.sel_box_200 select option {
padding: 30px;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input { 
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffdddd;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: green;
}

input:focus + .slider {
box-shadow: 0 0 1px green;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

span.optional {
background-color: #cccccc;
}

#agb_meldung {
display: none;
padding: 6px 10px;
width: 250px;
font-size: 12pt;
font-family: Arial;
border: 1px solid #aaaaaa;
background-color: #ffdddd;
color: darkred;
float:right;  
margin-right:150px;
}

.td_kost_aufst {
padding-bottom: 5px;
}
.td prod_aufst {
padding-bottom: 1px;
}

.data_show_r1 {
width: 290px;
line-height: 1.4;
}
.data_show_r2 {
width: 190px;
line-height: 1.4;
float:right;
}
#prod_text {
font-size:9pt;
margin:0px;
padding: 0px;
}

.achtung {
font-size:14pt;
font-weight:600;
}