.ContentBox #PriceCalc { display: none; text-align: center; }
.ContentBox #PriceCalc.active { display: block; padding: 1.2rem 0px 1.25rem 0px; margin: 0.75rem 0px 1.25rem 0px; border: solid #dddddd; border-width: 1px 0px; }
.ContentBox #PriceCalc.active p { display: block; font-size: 1.36rem; line-height: 1.7rem; color: #889933; padding: 0px 0px 0.5rem 0px; }
.ContentBox #PriceCalc div.notice { font-size: 0.9rem; color: #333333; padding: 0px 1rem; margin: 0px; }

/* form#ServiceConfigurator */

#ServiceConfigurator { padding: 0px; margin: 1.25rem 0px 2rem 0px; }
#ServiceConfigurator fieldset { display: block; /* display: inline-block; */ padding: 0.5rem 0rem 0.5rem 0rem; margin: 0px 0px 5px 0px; border: solid 0px #dddddd; }
#ServiceConfigurator fieldset > div.container { display: flex; flex-direction: column; width: 100%; padding: 0px; }
#ServiceConfigurator fieldset > div.container.infotext { flex-direction: row; color: #888888; font-size: 0.9rem; padding: 0.25rem 0px; }
#ServiceConfigurator fieldset > div.container > div { flex: 1 1 100%; display: flex; flex-direction: row; width: 100%; padding: 0rem 0rem 0.75rem 0rem; align-self: center; text-align: center;  }
#ServiceConfigurator fieldset > div.container > div > * { flex: 1 1 100%; }
#ServiceConfigurator fieldset > div.container > div:first-child { min-width: 300px; /* max-width: 45%; */ margin: 0px auto 0px 0px; padding-bottom: 0px; }
#ServiceConfigurator fieldset > div.container > div:first-child label { font-weight: bold; text-align: left; font-size: 1.07rem; max-width: 260px; }
#ServiceConfigurator fieldset > div.container > div:first-child label h2 { margin: auto; padding: 0px; }
/* Changed to .labelvalue -> #ServiceConfigurator fieldset > div.container > div:first-child span:last-child { color: #999999; max-width: 75px; font-size: 1.2rem; font-weight: bold; } */

#ServiceConfigurator fieldset > div.container > div:last-child span { max-width: 45px; padding: 0px 0rem; font-size: 0.9rem; color: #999999; }
#ServiceConfigurator fieldset > div.container > div:last-child span:first-child { max-width: 40px; text-align: center; }
#ServiceConfigurator fieldset > div.container > div:last-child span:last-child { text-align: center; }
#ServiceConfigurator fieldset > div.container > div input { width: 90%; margin: 0px; }

#ServiceConfigurator fieldset > div.container > div .labelbox { text-align: left; }
#ServiceConfigurator fieldset > div.container > div .labelbox .labelvalue { display: inline-block; text-align: center; vertical-align: middle; color: #999999; min-width: 75px; max-width: fit-content; /* 75px; */ font-size: 1.2rem; font-weight: bold; }
#ServiceConfigurator fieldset > div.container > div .labelbox .labelinfo { display: inline-block; text-align: left; vertical-align: middle; font-weight: normal; font-size: 0.86rem; text-align: left; color: #555555; /* margin-left: 1rem; color: #889933; line-height: initial; */ }

@media screen and (max-width: 640px) {
	
	#ServiceConfigurator fieldset > div.container > div.flexlabel { flex-wrap: wrap; }
	#ServiceConfigurator fieldset > div.container > div label { margin: auto; }
	#ServiceConfigurator fieldset > div.container > div:first-child label { text-align: center; }
	#ServiceConfigurator fieldset > div.container > div .labelbox { padding-top: 8px; text-align: center; }
	#ServiceConfigurator fieldset > div.container > div .labelbox .labelvalue { min-width: auto; color: #999999; max-width: 75px; }
	#ServiceConfigurator fieldset > div.container > div .labelbox .labelinfo { padding-left: 1rem; text-align: center; margin-left: 0px; /* padding-top: 5px; max-width: fit-content; display: contents; */ }
}

#ServiceConfigurator div textarea { width: 100%; margin: 0.5rem 0px; min-height: 15vh; resize: vertical; border: solid 1px #cccccc; padding: 5px 8px; box-sizing: border-box; font-size: 1rem; font-family: inherit; }

#ServiceConfigurator div .button { background-color: #eeeeee; color: #555555; font-size: 1.1rem; border: solid 1px #99aa44; width: 240px; margin: 0px auto; padding: 0.6rem 1.5rem 0.7rem 1.5rem; cursor: pointer; }
#ServiceConfigurator div .button:hover { background-color: #99aa44; color: white; border: solid 1px #dddddd; }

#ServiceConfigurator fieldset > div.container > .details { display: inline-block; padding: 0px; margin: auto 1rem auto auto; cursor: pointer; }
#ServiceConfigurator fieldset > div.container > .details:hover span { border-bottom: solid 1px; color: #086acd; }
#ServiceConfigurator fieldset > div.container > .details span { display: inline-block; border-bottom: dotted 1px #888888; color: #006FC0; }

#ServiceConfigurator fieldset > div.container.description {
	display: block; overflow: hidden;
	height: 0px; transform: scaleY(0); transform-origin: top;
	transition: transform 0.26s ease, opacity .25s ease, height .26s ease;
}
#ServiceConfigurator fieldset > div.container.description.active {
	height: auto; transform: scaleY(1); transform-origin: top;
	transition: transform 0.26s ease, opacity .26s ease, height .26s ease;
}
#ServiceConfigurator fieldset > div.container.description p { font-size: 0.94rem; padding: 0.5rem 0px 0.75rem 0px; }

@media screen and (max-width: 800px) {
	#ServiceConfigurator fieldset { padding: 0.75rem 0rem 0.75rem 0.25rem; }
	#ServiceConfigurator fieldset > div.container { flex-direction: column; }
	#ServiceConfigurator fieldset > div.container > div { padding: 0.5rem 0rem 0.5rem 0rem; }
	#ServiceConfigurator fieldset > div.container > div:first-child { min-width: 260px; max-width: 100%; }
	#ServiceConfigurator fieldset > div.container > .details { margin: 0px 0.75rem 0px auto; } /* 0.75rem auto 0.5rem auto; */
	#ServiceConfigurator div textarea { min-height: 180px; }
}

.ContentBox .legendbox { display: flex; flex-direction: row; box-sizing: border-box; margin-top: 0.8rem; /* 0.75rem */ padding: 0px; line-height: 1rem; }
.ContentBox .legendbox > * { flex: 1 1 100%; border-bottom: solid 2px; box-sizing: border-box; font-size: 0.75rem; color: #888888; padding: 0px 0px 3px 3px; margin: 0px; }
.ContentBox .legendbox div { border-color: #dddddd; }
.ContentBox .legendbox div:last-child { max-width: 3%; }

.ContentBox .legendbox div.fullwidth { min-width: 100%; max-width: 100%; line-height: 5px; }

.ContentBox .legendbox .gray { border-color: #dddddd; max-width: 3.5%; }
.ContentBox .legendbox .green { border-color: #006FFA; max-width: 5%; }	/* 28% */
.ContentBox .legendbox .orange { border-color: #99aa44; /* max-width: 40%; */ } /* 7.75% 36.5% */
.ContentBox .legendbox .red { border-color: #ffe300; max-width: 4.5%; } /* 10.25% */

.ContentBox .legendbox.size2 .gray { border-color: #dddddd; max-width: 50%; }
.ContentBox .legendbox.size2 .green { border-color: #006FFA; max-width: 24%; }
.ContentBox .legendbox.size2 .orange { border-color: #99aa44; max-width: 12.5%; }
.ContentBox .legendbox.size2 .red { border-color: #ffe300; max-width: 9.5%; }

@media screen and (max-width: 800px) {
	.ContentBox .legendbox .gray { max-width: 3%; }
	.ContentBox .legendbox .green { max-width: 8%; }
	.ContentBox .legendbox .orange { max-width: 78%; }
	.ContentBox .legendbox .red { max-width: 8%; }
	
	.ContentBox .legendbox.size2 .gray { max-width: 10%; overflow: hidden; }
	.ContentBox .legendbox.size2 .green { max-width: 43%; }
	.ContentBox .legendbox.size2 .orange { max-width: 25.5%; }
	.ContentBox .legendbox.size2 .red { max-width: 18.5%; }
}
@media screen and (max-width: 540px) {
	.ContentBox .legendbox div:last-child { display: none; }
	
	.ContentBox .legendbox .gray { display: none; } /* max-width: 7%; 22% */
	.ContentBox .legendbox .green { max-width: 15%; margin-left: 2%; } /* 24% */
	.ContentBox .legendbox .orange { max-width: 64%; } /* 24% */
	.ContentBox .legendbox .red { max-width: 15%; margin-right: 2%; } /* 30% */
	
	.ContentBox .legendbox.size2 .gray { max-width: 22%; }
	.ContentBox .legendbox.size2 .green { max-width: 24%; }
	.ContentBox .legendbox.size2 .orange { max-width: 24%; }
	.ContentBox .legendbox.size2 .red { max-width: 30%; }
}

.ContentBox div.implementator { margin-bottom: 1.25rem; }
.ContentBox div.implementator select { width: 98.5%; min-width: 180px; font-size: 1rem; border: solid 1px #cccccc; margin: 4px 0px 0px 0px; padding: 0.5rem 0.5rem; background-color: white; }

.ContentBox div.personal { display: flex; flex-direction: row; margin: 1rem 0px; text-align: left; }
.ContentBox div.personal > div { flex: 1 1 auto; padding: 0.5rem 0.25rem 0.5rem 0.25rem; }
.ContentBox div.personal > div span { display: inline-block; min-width: 70px; padding: 0px 0.5rem 0px 0px; }
.ContentBox div.personal > div input { width: 93%; min-width: 180px; border: solid 1px #cccccc; margin: 4px 0px 0px 0px; padding: 0.5rem 0.5rem; }
.ContentBox div.personal > div:last-child input { width: 93%; }

@media screen and (max-width: 640px) {
	.ContentBox div.personal { flex-direction: column; padding-top: 0rem; }
	.ContentBox div.personal > div input { width: 96%; margin: 0px; }
	.ContentBox div.personal > div:last-child input { width: 96%; }
}

.ContentBox .valid { border-color: #009900 !important; }
.ContentBox .invalid { border-color: red !important;  background-color: #FFD0C0 !important; }

.ContentBox #PriceCalc { display: none; text-align: center; }
.ContentBox #PriceCalc.active { display: block; padding: 1.2rem 0px 1.25rem 0px; margin: 0.75rem 0px 1.25rem 0px; border: solid #dddddd; border-width: 1px 0px; }
.ContentBox #PriceCalc.active p.finalprice { display: block; font-size: 1.43rem; line-height: 1.7rem; color: #889933; padding: 0px 0px 0.5rem 0px; margin-bottom: 0px; }
.ContentBox #PriceCalc.active p.pricenotice { margin: 0px auto 0.9rem auto; }
.ContentBox #PriceCalc.active > div > p small { font-size: 1rem; }
.ContentBox #PriceCalc div.notice { font-size: 0.9rem; color: #333333; padding: 0px 1rem; margin: 0px; }

.ContentBox #QueryFormBox .center { text-align: center; }
.ContentBox #QueryFormBox .center .button { margin: 2rem auto; }

.ContentBox #QueryFormBox .CalcPriceNow {
	display: flex; align-items: center; margin: 3px auto 17px auto; min-width: 80px; padding: 11px 22px;
	font-size: 1.07rem; font-weight: bold; font-family: inherit; text-align: center; text-decoration: none;
	background-color: #006FFA; color: #ffffff; border-radius: 4px; white-space: nowrap; transition: background-color 0.3s ease, 
	box-shadow 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); border: solid 0px; cursor: pointer; 
}
.ContentBox #QueryFormBox .CalcPriceNow:active { background-color: #eeeeee; }

.ContentBox #QueryFormBox form .center .button {
	display: flex; width: auto; min-width: 80px; align-items: center; margin: 2rem auto 17px auto; padding: 11px 22px;
	font-size: 1.1rem; font-weight: bold; font-family: inherit; text-align: center; text-decoration: none;
	background-color: #006FFA; color: #ffffff; border-radius: 4px; white-space: nowrap; transition: background-color 0.3s ease, 
	box-shadow 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); border: solid 0px; cursor: pointer;
}
.ContentBox #QueryFormBox form .center .button:active { background-color: #eeeeee; }