/*
Standard Formular CSS

@site       	wien-ticket.at
@author     	Georg Seidl // seidl@echonet.at
@copyright  	echonet communication gmbh
@date       	22.03.2021

@section =formulare
-------------------------------------------------------------------*/
/* ----- +layout ----- */
form { clear: both;margin: 20px 0;padding:0;width:100%;font-family:'Chivo',arial,helvetica,clean,sans-serif; }
fieldset {border:0 none;margin:0;padding:0 0 30px 0;position:relative;text-align: left;}
fieldset.p0 {padding:0;}
legend {font-weight:bold;font-size:1.1em;padding:0;}
form ol, form ul {list-style-type:none;margin:0;padding:0;}
form ol li, form ul li {background-image:none;/*float:left;*/list-style-image:none;padding:10px  0 0 0;width:100%;}
#sapshop form ol li, #sapshop form ul li { float:left; }
form li ol, form li ul {padding:0;}
form ol li li, form ul li li {list-style-image:none;padding:0 0 8px 0;}
form ol div label, form ul div label {display:block;float:none;margin:0;width:auto;}
form .optgroup, form .optgroup li {width:auto;}
form .optgroup {float:none;}
form .optgroup li {margin-right:10px;}
form li.req {}

/* ----- +error ----- */
.error-msg { border:1px solid;clear:both;margin:0 0 20px 0;padding:10px;}
.error-msg legend {border:1px solid;padding:.2em .5em;}
.error-msg ul { list-style-type:square;margin-left:20px;overflow:visible;}
.error-msg ul li {clear:both;float: none;list-style-image:none;padding:2px 0;width:auto;}
.error-msg label {float:none;display:inline;margin:0;padding:0;width:auto;}
form li.error input, form li.error select, form li.error textarea { font-weight:400; }

/* ----- +label ----- */
form small { display:block;font-size:0.85em; }
label, form ol div, form ul div { display:block;line-height:1.3;margin:0 0 5px 0;vertical-align:top; }
label { font-weight:700; }
form .checktxt, form .radiotxt { font-weight:400; }
form .checktxt, form .radiotxt, form .widetxt { float:left;margin-right:0; }
form fieldset .autotxt { width:auto; }
form label.req { display:block;float:none;font-weight:bold;margin:0 0 .69em;width:100%; }

/* ----- +elements ----- */
input, select, textarea {border: none;font-size:1em;padding:12px 10px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
font-family:'Chivo',arial,helvetica,clean,sans-serif;
}
select { padding:12px 10px; }

.ios input[type=text], .ios select, .ios textarea { font-size:16px !important; }
.ios select { line-height:28px; }

select {width:auto;}
option {padding-left: 0.4em;} /* resets rendering error */
textarea {vertical-align:top;resize:none;}
input.button {text-align:center;}
input.button:focus {text-decoration:underline;}
input.img {border:0 none;padding:0;width: auto;}
input.noborder {background-color: transparent;border: 0 none;margin-bottom:.7em;margin-right:5px;padding:0;width:auto;}
input.checkbox, input.radio { float:left;margin:5px 8px 0 0;padding:0;width:auto;}
form .checktxt, form .radiotxt { margin:0 !important; }
label, input[type=checkbox], input[type=radio], input[type='submit'], input[type='button'], button {cursor:pointer;}
label.disabled { cursor:not-allowed; }
input[type='text'],input[type='password']{cursor:text;}
input[type='hidden']{display:none;}
input[disabled='disabled'] {background-color:#DADADD; cursor:not-allowed;}
input[type="submit"]::-moz-focus-inner {border:0;} /* http://christophzillgens.com/de/articles/input-und-button-gleich-hoch */

/* ----- +standard ----- */
form .wauto { width:auto !important; }
form .full { width:100% !important; }
form img.captcha {float:left;margin-left:.5em;}
input.captcha { float:left; }

/* @section =buttons mit Hintergrundbild
-------------------------------------------------------------------*/
a.button:link, a.button:visited, a.button:focus, a.button:hover, a.button:active, a.buttonwauto:link, a.buttonwauto:visited, a.buttonwauto:focus, a.buttonwauto:hover, a.buttonwauto:active, button, input[type='submit'], input[type='button'], .fakebutton { border:0 none;cursor:pointer;display:inline-block;font-size:1.125em;font-weight:700;font-family:'Chivo',arial,helvetica,clean,sans-serif;line-height:20px;margin:0;padding:18px 10px;text-align:center;text-decoration:none; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;
	-moz-transition: background-color 0.4s ease-in-out;  
       -o-transition: background-color 0.4s ease-in-out;  
  -webkit-transition: background-color 0.4s ease-in-out;  
      -ms-transition: background-color 0.4s ease-in-out;  
          transition: background-color 0.4s ease-in-out;
}
a.button.small:link, a.button.small:visited, a.button.small:focus, a.button.small:hover, a.button.small:active, a.buttonwauto.small:link, a.buttonwauto.small:visited, a.buttonwauto.small:focus, a.buttonwauto.small:hover, a.buttonwauto.small:active, button.small, input[type='submit'].small, input[type='button'].small, .fakebutton.small { line-height: normal; padding: 3px 5px; }
button, input[type='submit'], input[type='button'] { width: 100%; overflow: visible; } /* http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button::-moz-focus-inner {border: none;}
button.auto, a.auto:link, a.auto:visited, a.auto:focus, a.auto:hover, a.auto:active, input[type='submit'].auto, input[type='button'].auto { width:auto; }
button.fright, a.fright:link, a.fright:visited, a.fright:focus, a.fright:hover, a.fright:active { float:right; }

a.buttonwauto { width:auto !important;line-height:30px !important;padding:0 10px !important;margin:0 0 10px 0 !important; }

.ios button, .ios input[type='submit'], .ios input[type='button'] { -webkit-appearance: none;-webkit-border-radius:0;border-radius:0; }

.smallbutton { font-size:1em !important;text-align:left; }

/* ----- +size ----- */
label, form ol div, form ul div { width:100%; }
input, select, textarea { width:100%; }
form .checktxt, form .radiotxt { width:85%; } 
form .widetxt { width:100%; }
form li ol, form li ul, input.button { width:100%; }
input.captcha { margin-top:6px;width:150px; }
form .short { width:150px; }

/* ----- +color ----- */
form .req li label { background-color:transparent; }
label.disabled { color:#999; }
input, select, textarea { background-color: #E2E1E1;color:#666; }
/*input, textarea { -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset; }*/
input:focus, select:focus, textarea:focus {
background-color:#D9D9D9;
outline:none;
}
input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px !important; height: 20px !important; border: 1px solid #727272; background-color: transparent; }
input[type=radio] { border-radius:50%; }
input[type=checkbox]:hover, input[type=checkbox]:focus, input[type=checkbox]:active, input[type=checkbox]:checked, input[type=radio]:hover, input[type=radio]:focus, input[type=radio]:active, input[type=radio]:checked { border-color: #009FE3; }
input[type=checkbox]:checked, input[type=radio]:checked { background-color: #009FE3; }

a.button:link, a.button:visited, a.button:focus, a.button:hover, a.button:active, a.buttonwauto:link, a.buttonwauto:visited, a.buttonwauto:focus, a.buttonwauto:hover, a.buttonwauto:active, button, input[type='submit'], input[type='button'], .fakebutton { background:#009FE3;color:#fff !important; }
a.button:focus, a.button:hover, a.buttonwauto:focus, a.buttonwauto:hover, button:focus, button:hover, input[type='submit']:focus, input[type='submit']:hover, input[type='button']:focus, input[type='button']:hover, .fakebutton:hover { background-color:#0BB6FF; }
a.button:active, a.buttonwauto:active, button:active, input[type='submit']:active { background-color:#0BB6FF; }

a.buttondark:link, a.buttondark:visited, a.buttondark:focus, a.buttondark:hover, a.buttondark:active, button.buttondark, input[type='submit'].buttondark, input[type='button'].buttondark, .fakebutton.buttondark { background:#333;color:#fff !important; }
a.buttondark:focus, a.buttondark:hover, button.buttondark:focus, button.buttondark:hover, input[type='submit'].buttondark:focus, input[type='submit'].buttondark:hover, input[type='button'].buttondark:focus, input[type='button'].buttondark:hover, .fakebutton.buttondark:hover { background:#555; }
a.buttondark:active, button.buttondark:active, input[type='submit'].buttondark:active, input[type='button'].buttondark:active { background:#111; }

a.buttonbright:link, a.buttonbright:visited, a.buttonbright:focus, a.buttonbright:hover, a.buttonbright:active, button.buttonbright, input[type='submit'].buttonbright, input[type='button'].buttonbright, .fakebutton.buttonbright { background-color:#797979;color:#fff !important; }
a.buttonbright:focus, a.buttonbright:hover, button.buttonbright:focus, button.buttonbright:hover, input[type='submit'].buttonbright:focus, input[type='submit'].buttonbright:hover, input[type='button'].buttonbright:focus, input[type='button'].buttonbright:hover, .fakebutton.buttonbright:hover { background-color:#999; }
a.buttonbright:active, button.buttonbright:active, input[type='submit'].buttonbright:active, input[type='button'].buttonbright:active { background-color:#555; }

a.button.disabled:link, a.button.disabled:visited, a.button.disabled:focus, a.button.disabled:hover, a.button.disabled:active, button.disabled, input[type='submit'].disabled, input[type='button'].disabled, .disabled { background:#777;color:#fff !important; }


input.placeholder { color:#999; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#999; }
input:-moz-placeholder, textarea:-moz-placeholder  { color:#999;opacity:1; }
input::-moz-placeholder, textarea::-moz-placeholder { color:#999;opacity:1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#999; }

input.placeholder.mainsearch-input { color:#ccc; }
input.mainsearch-input::-webkit-input-placeholder { color:#ccc; }
input.mainsearch-input:-moz-placeholder { color:#ccc; }
input.mainsearch-input::-moz-placeholder { color:#ccc; }
input.mainsearch-input:-ms-input-placeholder { color:#ccc; }

.error-msg legend { background-color:#d90000;border-color:#d90000;color:#fff; }
.error-msg { background-color: #FFCECF;border-color:#d90000;border-left:3px solid #d90000; }
.error-msg label { font-weight:400; }
.colorederror-msg { background-color: #FFFFFF; border-color:#009FE3; }
form li.error label {color:#d90000;}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=url]:focus:invalid,
input[type=date]:focus:invalid,
input[type=tel]:focus:invalid,
input[type=number]:focus:out-of-range,
form li.error input, form li.error select, form li.error textarea {border-color:#d90000;}

.servicerequestform .checktxt, .async-servicerequestform .checktxt { display:inline-block;float:none;vertical-align:middle;width:calc( 100% - 25px ); }
.servicerequestform .checkbox, .async-servicerequestform .checkbox { display:inline-block;float:none;margin:0 5px 0 0;vertical-align:middle;width:20px; }

@media screen and (max-width: 719px) {
	form button.wauto, form input[type='submit'].wauto, form input[type='button'].wauto { width:100% !important; }	
}
@media screen and (min-width: 720px) {
	
	label, form ol div, form ul div { width:100%;line-height:1.3;margin:5px 10px 0 0;vertical-align:top; }
	input, select, textarea, form li ol, form li ul { max-width:400px; }
	a.button:link, a.button:visited, a.button:focus, a.button:hover, a.button:active, button, input[type='submit'], input[type='button'], .fakebutton { max-width:400px; }
	form fieldset .right { margin-left:210px; }
	
}
@media screen and (max-width: 979px) {

}
@media screen and (min-width: 980px) {
	form fieldset .right { margin-left:210px; }

}