/*
	iim Systems
	CSS für das EAS-Bestellformular
*/

.input_label {
	font-size: 12px;
	font-family: Lato-Black;
	font-weight: normal;
	margin: 0;
	margin-bottom: 5px;
}

.eas-kacheln figure img:hover {
	cursor: pointer;
}

#eas-order-todolist {
	padding: 60px 0px 40px 0px;
	margin-top: 80px;
}

#eas-order-todolist-part1 {
	padding-top: 60px;
	padding-bottom: 30px;
}

#eas-order-todolist-part2 {
	margin-top: 30px;
}

#eas-order-todolist li {
	margin: 10px 0;
}

.eas-todo-contiue-headline {
	text-transform: uppercase;
}

.eas-todo-contiue-text {
	margin-bottom: 0;
	line-height: 18px;
}

.eas-todo-contiue-text span {
	font-weight: bold;
}

.eas-todo-contiue-text > span:nth-child(1) {
	margin-right: 10px;
}

#todo-bremsen #bremsen-optionen {
	margin-top: 10px;
}

#todo-bremsen #bremsen-optionen div {
	float: left;
	width: 50%;
}

#todo-bremsen #bremsen-optionen div.error p,
#todo-bremsen #bremsen-optionen div.error label {
	color: #FF6602;
}

#eas-order-form {
	margin-top: -25px;
}

.popup {
	display:none;
	position: fixed;
	background-color: white;
	border: 1px solid black;
	z-index: 100;
	padding: 5px
}

.popup img {
	width: 250px;
}

form div {
	position: relative;
}

#eas-order-form,
#eas-order-form #step1-2,
#eas-order-form #step1-3,
#step1-4,
#step1-4-placeholder,
#eas-order-form #step2,
#eas-order-form #step3,
#eas-order-form #step3 #step3-2 .content,
#eas-order-form #step3 #step3-2 .timeslot-error,
#eas-order-todolist,
#eas-order-todolist ul li{
	display: none;
}

#step1-4-placeholder {
	min-height: 250px;
}

#step1-4 {
	position: absolute;
	margin-top: 45px;
	z-index: 10;
	width: 100%;
}

form hr {
	border: 1px solid #93c21e;
	border-bottom: none;
	margin: 0;
	width: 1000%;
	margin-left: -250%;
}

form .form-row {
	margin: 20px 0;
}

#step1-4 .form-row {
	margin: 0 20px;
}

form .errormessage {
	color: #FF6602;
	float: right;
	display: none;
}

.eas-registerform .errormessage {
	display: block;
	margin: 10px 0;
	margin-right: 30px;
}

form .info-icon {
	height: 20px;
	width: 20px;
	color: white;
	background-color: #FF6602;
	display: block;
    text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

form span.required {
	color: #93c21e;
}

form .widget label,
form label {
	font-size: 12px;
	font-family: Lato-Black;
	font-weight: normal;
}

form input[readonly] {
	cursor: default;
	background: white;
}

form select,
form input,
form .widget select,
form .widget input,
form .form-row select,
form .form-row input {
	height: 35px;
}

form select, 
form textarea,
form input {
	border: 1px solid #ccc;
	color: #003c51;
	font-size: 16px;
	margin-top: 5px;
}

form select:focus.error,
form input:focus.error,
form select.error,
form input.error {
	border: 1px solid #ffb482;
}

form input[type="file"] {
	border: none;
}

.eas-kacheln div div#kachel-inspektion.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-inspektion.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_01_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-bremsen.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-bremsen.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_02_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-oelservice.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-oelservice.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_03_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-zahnriemen.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-zahnriemen.ce_image.attribute.image img:hover {
	background-image: url("/files/layout/images/buttons/EAS_Button_Home_04_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-abgasanlage.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-abgasanlage.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_05_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-sonstiges.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-sonstiges.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_06_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-huau.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-huau.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_07_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-klimaservice.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-klimaservice.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_08_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-radwechsel.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-radwechsel.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_09_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

.eas-kacheln div div#kachel-check.ce_image.attribute.image.active img,
.eas-kacheln div div#kachel-check.ce_image.attribute.image img:hover {
    background-image: url("/files/layout/images/buttons/EAS_Button_Home_10_180x180_on.jpg"); /* lets say 20x20 */
    width: 180px;
    display:inline-block;
    padding: 180px 0 0 0;
    height: 0px !important;
}

#eas-order-form form .form-header {
	margin-top: 30px;
}

#eas-order-form form #step1-header.form-header {
	margin-top: 0;
}

#eas-order-form form .form-header div {
	width: 240px;
	height: 25px;
	background-color: rgba(147,194,30,0.6);
	float: left;
	font-size: 16px;
	text-align: center;
	margin-right: 35px;
	cursor: pointer;
	text-transform: uppercase;
	display: flex;
    flex-direction: column-reverse;
}

#eas-order-form form .form-header div.active {
	background-color: rgba(147,194,30,0.6);
	color: white;
}

#eas-order-form form .form-header div.active.current-fokus {
	background-color: rgba(147,194,30,1);
	color: white;
}

#eas-order-form #eas-order-form-login {
	float: right;
    background-color: #003c51;
    color: white;
    width: 100px;
	margin-right: 0;
}

#step1-4 .form-two-input > div,
form .form-two-input div {
	width: 48%;
	float: left;
}

#step1-4 .form-two-input > div:last-child,
form .form-two-input div:last-child {
	float: right;
}

#step1-4 .form-two-input a {
	text-decoration: none;
}

#step1-4 .form-two-input a:visited {
	color: #003c51;
	text-decoration: none;
}

#step1-4 .form-two-input a:hover {
	color: #93c21e;
}

form .form-two-input.right-small div:last-child,
form .form-two-input.left-small div:first-child {
	width: 18%;
}

form .form-two-input.right-small div:first-child,
form .form-two-input.left-small div:last-child {
	width: 78%;
}

form .form-three-input div {
	width: 30%;
	float: left;
}

form .form-three-input.small-left div {
	width: 43%;
	float: left;
}

form .form-three-input.small-left div label select {
	width: auto;
}

form .form-three-input.small-left div:first-child {
	width: 10%;
}

form .form-three-input div:last-child {
	float: right;
}

form .form-three-input div div#timeslot_datepicker {
	width: 100%;
}

form .form-three-input div div#timeslot_datepicker * {
	float: none;
}

form .form-three-input div div#timeslot_datepicker div.ui-datepicker-inline.ui-datepicker,
form .form-three-input div div#timeslot_datepicker div.ui-datepicker-inline.ui-datepicker div.ui-datepicker-title {
	width: auto;
}

div.ui-datepicker div.ui-datepicker-header{
	width: 100%;
	background: #93c21e;
}

div.ui-datepicker .ui-state-active {
	border: 1px solid #93c21e;
	background: #93c21e;
}

div.ui-datepicker td a,
div.ui-datepicker td span {
	text-align: center;
	padding: .4em;
	margin: 0;
}

#eas-order-form form #step3 button {
	margin-top: 20px;
}

#eas-order-form form #step3 div.form-row.step3-special div:first-child {
	width: 40%;
	float: left;
}

#eas-order-form form #step3 div.form-row.step3-special div:last-child {
	width: 60%;
	float: right;
}

#eas-order-form form #step3 div ul {
	list-style: none;
	margin: 0;
    padding: 0;
    padding-left: 40px;
}

#eas-order-form form #step3 div ul li {
	margin: 0;
    padding: 0;
	position: relative;
}

.eas-green-checkbox label input,
#eas-order-form form #step3 div ul li label input {
	visibility: hidden;
	display:block;
	height:0;
	width:0;
	position:absolute;
	overflow:hidden;
}

.eas-green-checkbox label input + span,
#eas-order-form form #step3 div ul li label input + span {
	height: 15px;
	width: 15px;
	border: 1px solid grey;
	display: inline-block;
	margin-right: 5px;
}

.eas-green-checkbox label [type=checkbox]:checked + span,
#eas-order-form form #step3 div ul li label [type=checkbox]:checked + span {
	background: #93c21e;
}

.eas-green-checkbox label span.labeltext,
#eas-order-form form #step3 div ul li label span.labeltext {
	position: absolute;
    top: 0;
	width: 100%;
}

#step3-2 select {
	width: 90%;
}

form .form-button {
	float: right;
	background-color: rgba(0,60,81,0.5);
	color: white;
	font-size: 16px;
	padding: 5px 15px;
	text-transform: uppercase;
    border: none;
    background-image: none;
    line-height: 20px;
    cursor: pointer;
    border-radius: 0px;
    transition: unset;
}

form .form-button.clickable {
	background-color: rgba(0,60,81,1);
}

#eas-order-form form #step1-next.form-button {
	margin-top: 20px;
}

form .form-button i {
	margin-left: 5px;
	font-size: 12px;
}

#eas-order-form form .fahrzeug-data div {
	float: left;
	width: 25%;
}

#eas-order-form form .fahrzeug-data div select {
	width: 95%;
}

/* Form Fahrzeugdaten */ 
#form-fahrzeugdaten .form-button {
	margin-top: 25px;
}

.form-element.wp50 {
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.confirmation-hook {
	width: 25px;
	height: 25px;
	float: left;
	margin: 30px 0 0 20px;
	background: url('/files/layout/images/icons/accordion/EAS_Haken_gruen_25x25.jpg') no-repeat;
	display: none;
}

.confirmation-hook.file_choosen {
	display: block;
}

.clear-upload {
	width: 25px;
	height: 25px;
	float: left;
	margin: 30px 0 0 20px;
	background: url('/files/layout/images/icons/accordion/EAS_Button_Akkordeon_Close_25x25.png') no-repeat;
	display: none;
}

.clear-upload.file_choosen {
	display: block;
}