/*
CSS for door selection
*/


/*
#door-select-form {
  /background-color: #ffffff;
  padding: 40px;
  margin-left: auto;
  margin-right: auto;
}
*/

h1 {
  text-align: center;
}

h4 {text-transform: uppercase; border-bottom: 1px solid #565656; padding-bottom: 5px;}


/* Mark input boxes that gets an error on validation: */
input.invalid,
select.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

/*
button {
  background-color: #007ea5;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}
*/

.tab label span{
  color: red;
}

.select-form-img{
  max-width: 250px;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */

.steps {}

/*@media(max-width:767px) {*/
	.steps {display: none !important;}
/*}*/

.step {
	background: #ddd;
	opacity: 0.5;
	padding: 15px;
	margin: 0 5px 10px 5px;
	text-align: center;
	min-width: 180px;
  /*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;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
	color: black;
}

/*
.door-blank-container{
  display: flex;
  flex-wrap: wrap;
}
*/
.door-blank{
  /*max-width: 200px;
  padding: 1em;
  box-shadow: 1px 1px 1px 1px grey;
  margin:0.5em;*/
	height: 574px;
	position: relative;
	background: #fff;
	padding: 1rem;
	text-align: center;
}

.door-blank:hover{
  cursor: pointer;
	background: lightgrey;
}

.door-blank img {max-height: 300px; width: auto; margin-bottom: 15px;}

.form-img-item{
	position: relative;
	background: #fff;
	padding: 1rem;
	text-align: center;
	border: 3px solid #fff;
}
.form-img-item:hover{
  cursor: pointer;
	background: lightgrey;
}
 .form-img-item img {/*max-height: 100px; width: auto; */ margin-bottom: 15px;}

.selected{
	background-color: lightgrey;
	border: 3px solid green;
}

.validation-error-msg,
.validation-check-error-msg{
	font-weight: bold;
	color: red;
	display: none;
}

.control-container{
	display: flex;
	width: 100%;
	flex-direction: column;
	/* justify-items: end; */
	align-items: end;
	padding-bottom: 1rem;
}
.control-msg{

}
.control-child{

}
.control-btn{

}

.show-info-modal, .beschichtung-single-info, .beschichtung-info, .show-color-modal { font-size: 1.5rem; color: #749582;}
.show-info-modal:hover, .beschichtung-single-info:hover, .beschichtung-info:hover, .show-color-modal:hover {color: #003921;}

.door-blank .show-info-modal, .form-img-item .show-info-modal, .form-img-item .beschichtung-single-info, .form-img-item .beschichtung-info {position: absolute; top: 8px; right: 8px; background: #fff; border-radius: 50%; }

.form-img-item .plattenbild-img{
	display: none;
}
#door-select-form .form-group label {font-weight: bold; display: block; font-size: 1.5rem;}

.validation-message {color: #999; font-style: italic; font-size: .8rem; }

.select-form-img {display: block; margin-right: 0; margin-left: auto; width: 150px; height: 150px; max-width: 100%; object-fit: cover; border: 3px solid #fff;}
.bild {width: 80px; height: 80px;object-fit: cover; border: 3px solid #fff;}

#price-info-container {text-align: right; border-bottom: 1px solid #ccc; padding-bottom: 0.5rem; margin-bottom: 0.5rem;}

#sum-price {font-size: 2.0rem; line-height: 2.5rem;}

#sum-additional-info {display: inline-block;}

.beschichtung-title {
	color: #003921;
    /*text-transform: uppercase;*/
		font-size: 1.5rem;
    font-weight: 600;
}

.beschichtung-title:after {
    content: "-";
    height: 0px;
    padding-top: 15px;
    overflow: hidden;
    display: block;
    width: 70px;
    border-bottom: 7px solid #003921;
    margin-bottom: 15px;
}

.beschichtung-modal-content p {padding-bottom: 10px;}


@media (min-width: 576px) {
.modal-dialog {
    max-width: 800px;
    margin: 1.75rem auto;
}
}

span.tax, span.aufpreis {font-size: 0.8rem; color: #777;}

span.aufpreis i.hidden {display:none;}