/********************/
/*	  INHALT		*/
/*********************
1.0 ALLGEMEIN
2.0 CONTAINER
3.0 TEXT
4.0 FORMULAR
5.0 TABELLEN
6.0 SONSTIGES
********************/

/* ============================================= 1.0 ALLGEMEIN ============================================= */

	/* ------ 1.1 MAIN ------ */
	* {
		font-family: 'klavika-web', sans-serif;
	}
	html, body {
		background-color: rgba(242,242,238,1);
		outline: none;
		color: rgba(81,87,96,1);
	}
		body { z-index: 100; }

	a, a:focus, a:hover {
		color: rgba(81,87,96,1);
		outline: none !important;
		text-decoration: none !important;
		-webkit-transition: color ease 0.3s, background-color ease 0.3s;
		-moz-transition: color ease 0.3s, background-color ease 0.3s;
		-o-transition: color ease 0.3s, background-color ease 0.3s;
		transition: color ease 0.3s, background-color ease 0.3s;
	}
	#developerModal .modal-body {
		flex-direction: column;
	}

/* ============================================= 2.0 CONTAINER ============================================= */

	main#content {
		padding-top: 50px;
		padding-bottom: 50px;
		position: relative;
	}
	.fullheight {
		height: 100%;
	}
	.t-container {
		display: table;
		width: 100%;
		height: 100%;
	}
		.t-cell {
			display: table-cell;
			vertical-align: middle;
			width: 100%;
			height: 100%;
		}

	#sys-msg {
		background-color: #575c67;
		color: rgba(255,255,255,1);
		text-align: center;
		font-size: 19px;
		line-height: 22px;
		border-radius: 3px;
		padding: 24px 19px 23px;
		margin-bottom: 25px;
	}
		#sys-msg a { color: rgba(184,240,0,1); }

	/* ------ 2.1 NAVIGATION ------ */
	nav {
		background-color: rgba(52,57,64,1);
		color: rgba(255,255,255,1);
		font-size: 14px;
		height: 73px;
	}
		nav a { color: rgba(255,255,255,1); }
		nav .logo {
			display: block;
			width: 100px;
			height: 49px;
			margin-right: 15px;
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url("../img/vector/logo-xglas.svg");
			color: rgba(255,255,255,1);
		}

		nav .nav-key {
			cursor: pointer;
			-webkit-transition: color ease 0.3s;
			-moz-transition: color ease 0.3s;
			-o-transition: color ease 0.3s;
			transition: color ease 0.3s;
		}
			nav .nav-key:hover { color: rgba(184,240,0,1); }

		nav .nav-separator {
			display: inline-block;
			padding: 0px 10px;
		}
		.text-faded { opacity: 0.4; }

	/* ------ 2.2 KARTE ------ */
	.clearer { clear: both; }

	.bg-color.bg-white { background: rgba(255, 255,255, 1); }

	/* ----- 2.3 KONFIGURATOR ----- */
		/* -- 2.3.1 MAIN -- */
		#screen-welcome .select-vector {
			display: inline-block;
			width: 218px;
			height: 120px;
			background-position: bottom;
			background-repeat: no-repeat;
		}

		.block-config {
			position: relative;
			width: 100%;
			background-color: rgba(255,255,255,0.7);
			margin: 15px 0px;
			padding: 40px 30px;

			-webkit-transition: background-color ease 0.3s, opacity ease 0.3s;
			-moz-transition: background-color ease 0.3s, opacity ease 0.3s;
			-o-transition: background-color ease 0.3s, opacity ease 0.3s;
			transition: background-color ease 0.3s, opacity ease 0.3s;
		}
			.block-config:hover {  background-color: rgba(255,255,255,1); }

			.block-config .col-display {
				position: relative;
			}
				.block-config .config-nr {
					position: absolute;
					top: 0px;
					left: 12px;
					display: inline-block;
					width: 11%;
					font-size: 35px;
					line-height: 35px;
					font-weight: 700;
					color: rgba(215,215,217,1);
				}
				.block-config .config-diagram {
					position: absolute;
					top: -18px;
					right: 0px;
					display: inline-block;
					width: 80%;
					height: 185px;
					background-repeat: no-repeat;
					background-position: center;
				}

			.block-config .col-config {
				position: relative;
			}

				.block-config .config-amount > div, .block-config .config-data .config-option-value {
					background-color: rgba(194,195,197,1);
					-webkit-transition: background-color ease 0.3s, opacity ease 0.3s;
					-moz-transition: background-color ease 0.3s, opacity ease 0.3s;
					-o-transition: background-color ease 0.3s, opacity ease 0.3s;
					transition: background-color ease 0.3s, opacity ease 0.3s;
				}
					.block-config .config-amount > div.config-amount-minus,.block-config .config-amount > div.config-amount-plus, .block-config .config-data .config-option-value {
						cursor: pointer;
					}
						.block-config .config-amount > div.config-amount-minus:hover,.block-config .config-amount > div.config-amount-plus:hover, .block-config .config-data .config-option-value:hover { background-color: rgba(190,189,191,1); }
						.block-config .config-amount > div.config-amount-minus:active,.block-config .config-amount > div.config-amount-plus:active, .block-config .config-data .config-option-value:active { background-color: rgba(184,185,187,1); }

				.block-config .config-amount {
					color: rgba(255,255,255,1);
					position: absolute;
					top: -2px;
					right: 12px;
				}
					.block-config .config-amount > div {
						position: absolute;
						top: 0px;
						height: 20px;
						padding: 4px 5px;
						font-size: 13px;
						line-height: 13px;

						background-repeat: no-repeat;
						background-position: center;
						background-size: 58%;
					}
						.block-config .config-amount > div.inactive { opacity: 0.5; }
						.block-config .config-amount > div.config-amount-minus,.block-config .config-amount > div.config-amount-plus {
							width: 20px;
							border-radius: 50%;
						}
							.block-config .config-amount > div.config-amount-plus {
								background-image: url('../img/vector/plus-weiss.svg');
								right: 0px;
							}
							.block-config .config-amount > div.config-amount-minus {
								background-image: url('../img/vector/minus-weiss.svg');
								right: 59px;
							}

						.block-config .config-amount > div.config-amount-counter {
							right: 25px;
							width: 30px;
							text-align: center;
						}
							.order-successful .block-config .config-amount > div.config-amount-counter {
								right: 0px;
								border-radius: 3px;
								background-color: #575c67;
								color: rgba(184,240,0,1);
							}

				.block-config .config-data {
					padding-right: 12px;
				}
					.block-config .config-data .config-option {
						margin-top: 10px;
						margin-bottom: 10px;
					}
						.block-config .config-data .config-data-title {
							font-size: 19px;
							line-height: 19px;
						}
						.block-config .config-data .config-option-label {
							padding-top: 5px;
							font-size: 16px;
							line-height: 16px;
						}
							.block-config .config-data .config-option-label span.text-green {
								color: rgba(147, 192, 0, 1);
							}
						.block-config .config-data .config-option-value {
							background-color: rgba(241,237,234,1);
							border-radius: 3px;
							padding-top: 6px;
							padding-bottom: 4px;
							padding-right: 20px;
							left: 10px;
							font-size: 15px;
							line-height: 17px;
							background-repeat: no-repeat;
							background-position: 98% center;
							background-size: 7px;
							-webkit-transition: background-color ease 0.3s, color ease 0.3s;
							-moz-transition: background-color ease 0.3s, color ease 0.3s;
							-o-transition: background-color ease 0.3s, color ease 0.3s;
							transition: background-color ease 0.3s, color ease 0.3s;
						}
						.block-config .config-data .config-option-value.mark-changed {
							border: 2px solid #FF0000FF;
						}
							.order-successful .block-config .config-data .config-option-value { padding-right: 15px; }
							.block-config .config-data .config-option-value.field-clickable { background-image: url('../img/vector/pfeil-rechts.svg'); }
							.block-config .config-data .config-option-value:hover { background-color: rgba(237,233,230,1); }
							.block-config .config-data .config-option-value:active { background-color: rgba(231,227,224,1); }
							.block-config .config-data .config-option-value.inactive {
								background-color: rgba(215,215,217,0.5);
								color: rgba(81,87,96,0.5);
							}

				.block-config .config-price {
					position: absolute;
					bottom: -32px;
					right: -4px;
					font-weight: 700;
					font-size: 19px;
					line-height: 19px;
					color: rgba(215,215,217,1);
				}
				.block-config .required-field {
					position: absolute;
					bottom: -32px;
				}
				.block-config .required-field span.text-green {
					color: rgba(147, 192, 0, 1);
				}

			.block-config#block-add {
				position: relative;
				min-height: 150px;
				cursor: pointer;
				width: 100%;
				background-image: url('../img/vector/plus-ohell.svg');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 10%;
				background-color: rgba(255,255,255,1);
				opacity: 0.7;
			}
				.block-config#block-add:hover {
					opacity: 1;
				}
			.block-config button.close {
				position: absolute;
				right: 27px;
				top: 13px;
			}

		/* -- 2.3.2 SIDEBAR -- */
		.sidebar-block {
			padding: 15px 10px;
			border-top: 1px rgba(255,255,255,1) solid;
			border-bottom: 1px rgba(213,213,208,1) solid;
		}
			.sidebar-block:first-child { border-top-width: 0px; }
			.sidebar-block:last-child { border-bottom-width: 0px; }

			.sidebar-block .sidebar-content {
				position: relative;
				min-height: 1.5rem;
			}

			.sidebar-block #sidebar-list-files {
				padding-bottom: 10px;
			}
				.sidebar-block #sidebar-list-files .list-file {
					position: relative;
					padding-right: 20px;
				}
					.sidebar-block #sidebar-list-files .list-file a, .sidebar-block #sidebar-list-files #sidebar-list-files-msg {
					font-size: 15px;
					line-height: 15px;
					}
					.sidebar-block #sidebar-list-files .list-file a {
						display: inline-block;
						padding: 2px 0px;
					}
						.sidebar-block #sidebar-list-files .list-file a:hover { color: rgba(184,240,0,1); }
					.sidebar-block #sidebar-list-files .list-file .file-delete {
						cursor: pointer;
						position: absolute;
						top: 0px; right: 0px;
						width: 10px; height: 100%;
						background-image: url('../img/vector/kreuz-dunkel.svg');
						background-position: right center;
						background-repeat: no-repeat;
						background-size: contain;
					}
				.sidebar-block #sidebar-list-files #sidebar-list-files-msg {
					color: rgba(81,87,96,0.5);
					margin-bottom: 0px;
				}

			#sidebar-content-pricing {
				padding-top: 8px;
			}
			.sidebar-block-pricing {
				margin: 8px 0px;
			}
				.sidebar-block-pricing:after {
					content: '';
					display: block;
					clear: both;
				}
				.sidebar-block-pricing:last-child {
					padding-top: 6px;
					font-weight: 700;
				}

				.sidebar-block-pricing > div {
					display: inline-block;
					font-size: 15px;
					line-height: 15px;
				}
				.sidebar-block-pricing .pricing-label {
					float: left;
					width: 63%;
				}
				.sidebar-block-pricing .pricing-value {
					float: right;
					width: 37%;
					text-align: right;
				}

	/* ----- 2.4 FUSSZEILE ----- */
	footer {
		padding: 50px 0px;
		background-color: rgba(242,242,238,1);
		border-top: 1px rgba(203,203,200,1) solid;
		box-shadow: 0px -2px 4px rgba(203,203,200,0.5);
	}
		footer p { font-size: 14px; margin-bottom: 0px; }
			footer p small { font-size: 12px; }
		footer a { font-weight: 600; }

/* ============================================= 3.0 TEXT ============================================= */

	/* ------ 3.1 TITEL ------ */
	h1, .h1, h2, .h2, h3, .h3 { font-weight: 600; }
		h1 span, .h1 span, h2 span, .h2 span, h3 span, .h3 span { color: rgba(215,215,217,1); }
	h1, .h1, h2, .h2 {
		font-size: 24px;
	}
	h3, .h3 {
		font-size: 19px;
		line-height: 19px;
	}

	/* ------ 3.2 ALLGEMEIN ------ */
	.text-green	{ color: rgba(184,240,0,1); }
	.text-red	{ color: rgba(211,45,39,1); }
	.text-gray	{ color: rgba(128,128,128,1); }

	/* ------ 3.3 BUTTONS ------ */
	.btn {
		color: rgba(81,87,96,1);
		font-size: 19px;
		font-weight: 400;
		letter-spacing: 0.02em;
		text-shadow: none;
		text-transform: uppercase;
		border-radius: 0px;
		padding: 0.2rem 1.2rem;
	    margin-bottom: 8px;
		border: 0px !important;
		box-shadow: none;
		outline: none !important;

		-webkit-transition: background-color ease 0.3s, opacity ease 0.3s;
		-moz-transition: background-color ease 0.3s, opacity ease 0.3s;
		-o-transition: background-color ease 0.3s, opacity ease 0.3s;
		transition: background-color ease 0.3s, opacity ease 0.3s;
	}
		.btn:hover { color: inherit; }
		.btn:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: none; }
		.btn.btn-default { background-color: #f1edea; }
			.btn.btn-default:hover		{ background-color: #EAE3DE; }
			.btn.btn-default:active, .btn.btn-default.active	{ background-color: #dfd8d3; }
		.btn.btn-primary {
			opacity: 0.5;
			font-weight: 700;
			background-color: rgba(184,240,0,1);
		}
			#sidebar-block-order .btn-primary { width: 100%; }
			.btn.btn-primary.btn-clickable { opacity: 1; }
			.btn.btn-primary:hover		{ background-color: rgba(184,240,0,0.8); }
			.btn.btn-primary:active, .btn.btn-primary.active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { background-color: rgba(184,240,0,0.6); }

			@media(min-width: 768px) and (max-width: 991px) {
				#sidebar-block-order .btn-primary {
					width: 186px;
				}
			}
		.col-md-8.config-option-value.field-clickable{
			max-width: 100%;
		}

		.btn.btn-secondary {
			color: rgba(255,255,255,1);
		}

		.btn.dropdown-toggle {
			position: relative;
			width: 100%;
			padding-top: 0px;
			padding-bottom: 0px;
			background-color: rgba(228,228,228,1);
			box-shadow: 0px 0px 1px rgba(0,0,0,0.3) !important;
			text-transform: none;
			font-size: 14px;
			font-weight: 100;
			margin-bottom: 0px;
		}
		.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100%; }
			.bootstrap-select .dropdown-toggle .filter-option {
				padding: 0rem 0.4rem;
			}
			.bootstrap-select .dropdown-toggle .filter-option-inner {
				padding-right: 0px;
				padding-left: 0px;
			}
				.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
					text-align: right;
				}
			.bootstrap-select .dropdown-toggle:focus { outline: 0px !important; }
			.btn.dropdown-toggle.dropdown-toggle::after {
				display: none;
				/*position: absolute;
				left: 6px;
				top: 9px;
				outline: 0px !important;*/
			}
			.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
				color: rgba(81,87,96,1);
			}

	button.close {
		opacity: 1;
		padding: 0rem !important;
		margin: -0.7rem -1rem -1rem auto !important;
		background-image: url('../img/vector/kreuz-dunkel.svg');
		background-position: right;
		background-repeat: no-repeat;
		background-size: contain;
	}
	button.close span { visibility: hidden; }

	/* ------ 3.4 ICONS ------ */

	/* ------ 3.5 LISTEN ------ */
	ul {
		padding: 0px 0px 0px 10px;
	}
		ul li {
			margin-bottom: 0px;
		}
		ul.list-fields {
			display: block;
			list-style: none;
			margin: 15px 0px;
			padding: 0px 0px 1px;
			padding-left: 0px !important;
		}
			ul.list-fields li {
				position: relative;
				display: block;
				list-style: none;
				font-weight: 400;
				background-color: rgba(251,251,249,1);
				border-top: 1px rgba(255,255,255,1) solid;
				border-bottom: 1px rgba(213,213,208,1) solid;
			}
				ul.list-fields li:first-child { border-top-width: 0px; }
				ul.list-fields li:last-child { border-bottom-width: 0px; }
				ul.list-fields li:after { display: block; content: ''; clear: both; }
				ul.list-fields li > div { float: left; }

				#mapModal .field-label, #mapModal .field-name, #mapModal .field-display, #mapModal .field-icon, #mapModal .field-input {
					display: block;
					box-sizing: border-box;
				}
				#mapModal .field-label, #mapModal .field-name, #mapModal .field-display {
					padding: 10px 15px 9px;
				}
				#mapModal .field-display {
					width: 135px;
					height: 42px;
					padding-left: 6px;
				}
				#mapModal .field-label { width: 70px; }
					#mapModal .field-label label {
						font-weight: 600;
						display: block;
						cursor: pointer;
						margin-bottom: 0px;
						width: 100%;
						height: 100%;
					}
				#mapModal .field-name { width: 275px; }
				#mapModal .field-input { padding: 7px 0px; }
					#mapModal .field-input input {
						width: 100px;
						height: 100%;
						display: block;
						font-size: 15px;
						padding: 5px 8px;
						border: none;
						border-radius: 3px;
						background: rgba(213,213,208,0.4);
						text-align: right;
					}
						#mapModal .field-input input:focus {
							border: none;
							box-shadow: none;
							outline: 0;
						}
				#mapModal .field-icon {
					position: relative;
					padding: 10px;
					margin: 4px 3px;
					width: 35px;
					height: 35px;
				}
					#mapModal .field-icon .icon-vector {
						position: relative;
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: contain;
					}
						#mapModal .field-icon#select-locale {
							cursor: pointer;
						}
						#mapModal .field-icon .icon-vector.icon-check	{ background-image: url("../img/vector/icon-check.svg"); }
						#mapModal .field-icon .icon-vector.icon-search{ background-image: url("../img/vector/lupe.svg"); }
						#mapModal .field-icon .icon-vector.icon-cross	{ background-image: url("../img/vector/icon-cross.svg"); }
						#mapModal .field-icon .icon-vector.icon-arrow	{ background-image: url("../img/vector/pfeil-rechts.svg"); }

/* ============================================= 4.0 FORMULAR ============================================= */

	/* ------ 4.1 ALLGEMEIN ------ */
	input.field-text, textarea.field-textarea {
		width: 100%;
		max-width: 100%;
		display: block;
	    border: 2px solid rgba(128,128,128,0.2);
		outline: none;
		padding: 5px 8px;
		margin-bottom: 20px;

		-webkit-transition: border-color ease 0.3s;
		-moz-transition: border-color ease 0.3s;
		-o-transition: border-color ease 0.3s;
		transition: border-color ease 0.3s;
	}
		input.field-text:focus, textarea.field-textarea:focus { border: 2px solid rgba(128,128,128,0.5); }
		input.field-text.error, textarea.field-textarea.error, #body-main .btn-group.error {
			border-color: #C70D0D;
		}
		#templates {
			border: 2px #FFF solid;
			overflow: auto;
		}
		#templates.error {
			border-color: #C70D0D;
		}

		label {
			display: block;
		}

		input.field-text {

		}
		textarea.field-textarea {
			min-height: 100px;
		}
		#body-main .toggle.btn, .modal .toggle.btn { margin-bottom: 0px; }
			.modal .toggle.btn {
				width: 160px !important;
				height: 40px !important;
			}
		#body-main .toggle-group .btn, .modal .toggle-group .btn {
			margin-bottom: 0px;
			padding: 11px 18px 9px;
		}
			.toggle-group i {
				margin-top: -2px;
				font-size: 22px;
			}
			#configModal .list-measurement {
				padding-left: 47%;
				background-size: 39%;
				min-height: 150px;
				background-repeat: no-repeat;
				background-position: 3% center;
			}
			#configModal .list-glasscolor {
			/*padding-left: 290px; 	ausgeblendet */
				background-size: 40%;
				background-repeat: no-repeat;
				background-position: 3% center;
			}
			/* glas_farbfächer img */

				.glasscolor-image img{
				width: 100%;

			}

			#configModal .custom-control-label::before, #configModal .custom-control-label::after {
				cursor: pointer;
			}
				#configModal .custom-radio .custom-control-input:checked~.custom-control-label::before {
					background-color: rgba(184,240,0,1);
				}
			#configModal .input-group-prepend {
				font-weight: 700;
			}
				#configModal .input-group-prepend .input-group-text {
					border-width: 0px;
					background-color: transparent;
					font-weight: 700;
				}
			#configModal .input-group-text {
				border-width: 0px;
				background-color: transparent;
			}
			#configModal .form-control {
				box-shadow: none !important;
				border: 1px rgba(255,255,255,1) solid;
				background-color: rgba(241,237,234,1);
				border-radius: 3px;
			}
				#configModal .form-control:disabled, #configModal .form-control[readonly] {
					box-shadow: none !important;
				}

	/* ------ 4.2 BESTELLFORMULAR ------ */
	#orderModal form#form-order {
		opacity: 1;
		-webkit-transition: opacity ease 0.3s;
		-moz-transition: opacity ease 0.3s;
		-o-transition: opacity ease 0.3s;
		transition: opacity ease 0.3s;
	}
		#orderModal form#form-order.form-inactive { opacity: 0.5; }
	#form-settings .input-group-text, #form-settings select.custom-select, #form-settings input.form-control, #form-settings textarea.form-control,
	#orderModal .input-group-text, #orderModal select.custom-select, #orderModal input.form-control, #orderModal textarea.form-control,
	#configModal .input-group-text, #configModal select.custom-select, #configModal input.form-control, #configModal textarea.form-control, #configModal .custom-checkbox .custom-control-label {
		color: rgba(81,87,96,1);
		font-size: 15px;
	}
		#form-settings .form-control:disabled, #form-settings .form-control[readonly], #form-settings .custom-select:disabled,
		#orderModal .form-control:disabled, #orderModal .form-control[readonly], #orderModal .custom-select:disabled { color: rgba(81,87,96,0.5); }
		#form-settings .order-successful .form-control:disabled, #form-settings .order-successful .form-control[readonly], #form-settings .order-successful .custom-select:disabled,
		#orderModal .order-successful .form-control:disabled, #orderModal .order-successful .form-control[readonly], #orderModal .order-successful .custom-select:disabled { background-color: #575c67; color: rgba(255,255,255,1); }
	#form-settings .input-group-text, #orderModal .input-group-text {
		background: transparent;
		border-color: transparent;
		width: 125px;
		align-items: baseline;
		font-weight: 700;
	}
		#form-settings .custom-control.custom-checkbox, #orderModal .custom-control.custom-checkbox { margin-top: 22px; margin-left: 14px; }

	#form-settings select.custom-select, #form-settings input.form-control, #form-settings textarea.form-control,
	#orderModal select.custom-select, #orderModal input.form-control, #orderModal textarea.form-control {
		border: 1px rgba(255,255,255,1) solid;
		background-color: rgba(241,237,234,1);
		border-radius: 3px;
		outline: none !important;
		box-shadow: none !important;
		text-align: left;
		padding: 5px 12px;
		min-height: 35px;
		-webkit-transition: border-color ease 0.3s;
		-moz-transition: border-color ease 0.3s;
		-o-transition: border-color ease 0.3s;
		transition: border-color ease 0.3s;
	}
		#form-settings select.custom-select, #form-settings input.form-control, #form-settings textarea.form-control { border-color: rgba(108,117,125,0.2); }
		#form-settings input.form-control.error,textarea.form-control.error,#form-settings select.custom-select.error,
		#orderModal input.form-control.error,textarea.form-control.error,#orderModal select.custom-select.error { border-color: #C70D0D; }
		#form-settings .custom-control-label.error, #orderModal .custom-control-label.error { color: #C70D0D; }
		#form-settings input.form-control.error, #orderModal input.form-control.error, #form-login input.form-control.error {
			border-color: #C70D0D;
		}
		#form-settings select.custom-select:focus, #form-settings input.form-control:focus, #form-settings textarea.form-control:focus,
		#orderModal select.custom-select:focus, #orderModal input.form-control:focus, #orderModal textarea.form-control:focus {
			border-color: rgba(184,240,0,1);
		}
		#form-settings #form-status, #orderModal #form-status {
			margin-top: 22px;
			margin-left: 14px;
		}
		.group-media .input-group-btn {
			margin: 0px;
		}
			.group-media .input-group-btn > .btn {
				width: 10px;
				margin-top: -20px;
				margin-bottom: 0px !important;
				padding: 7px 18px 7px 21px !important;
			}


	/* ------ 4.3 KARTE ------ */
	#mapModal .map-vector {
		width: 100%;
		height: 310px;
		margin: 30px 0px 10px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-image: url("../img/vector/karte-schweiz.svg");
	}

	/* ------ 4.4 CHECKBOX ------ */
	.custom-control.custom-checkbox {
		display: block;
		min-height: 1.5rem;
		padding-left: 1.8rem;
	}
		.sidebar-content.custom-control.custom-checkbox { padding-left: 0px; }

		.custom-checkbox .custom-control-input {
			position: absolute;
			z-index: -1;
			opacity: 0;
		}
		.custom-checkbox .custom-control-label {
		    margin-bottom: 0;
			padding: 4px 0px 6px;
			cursor: pointer;
			display: inline-block;
		}
			.custom-control-input:disabled~.custom-control-label { color: rgba(81,87,96,0.4); }
			.custom-checkbox .custom-control-label::before, .custom-checkbox .custom-control-label::after {
				position: absolute;
				display: block;
				top: 0.25rem;
				width: 20px;
				height: 20px;
				content: "";
			}
			.custom-checkbox #option-price-inquiry-label.custom-control-label::before,
			.custom-checkbox #option-price-inquiry-label.custom-control-label::after {
				position: absolute;
				display: block;
				top: 3.5rem;
				width: 20px;
				height: 20px;
				content: "";
			}
				.sidebar-content.custom-checkbox .custom-control-label::before, .sidebar-content.custom-checkbox .custom-control-label::after {
					top: 0.4rem;
					right: 0px;
					left: auto;
				}

			.custom-checkbox .custom-control-label::before {
				border-radius: 3px;
				pointer-events: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-color: rgba(215,215,217,1);
				-webkit-transition: background-color ease 0.3s;
				-moz-transition: background-color ease 0.3s;
				-o-transition: background-color ease 0.3s;
				transition: background-color ease 0.3s;
			}
				.custom-control-input:active~.custom-control-label::before {
					color: rgba(54,56,64,1);
					background-color: rgba(215,215,217,0.8);
				}
				.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
					color: rgba(54,56,64,1);
					background-color: rgba(184,240,0,1);
				}
				.custom-checkbox .custom-control-input:focus~.custom-control-label::before, #configModal .custom-control-input:focus~.custom-control-label::before { box-shadow: none; }
			.custom-checkbox .custom-control-label::after {
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 50% 50%;
			}
				.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
					background-image: url('../img/vector/haekchen-dunkel.svg');
					background-size: 71%;
				}

/* ============================================= 5.0 TABELLEN ============================================= */

	.table-striped>tbody>tr:nth-of-type(odd) {
		background-color: rgba(241,237,234,0.6);
	}


/* ============================================= 6.0 SONSTIGES ============================================= */

	/* ------ 6.1 BILDER ------ */


	/* ------ 6.2 ABSTÄNDE ------ */
	.nomargin {
		margin-bottom: 0px !important;
	}
	.nopad-h {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.hleft	{ margin-left: 15px }
	.hright	{ margin-right: 15px }
	hr {
		height: 1px;
		margin: 15px 0px 10px;
		border: 0px rgba(213,213,208,1) solid;
		border-top-width: 1px;
		background-color: rgba(255,255,255,1);
	    margin-top: 15px;
    	margin-bottom: 15px;
	}

	/* ------ 6.3 MELDUNGEN ------ */
	.sys-msg {
		box-sizing: border-box;
		position: absolute;
		width: 98%;
		top: 10px;
		left: 1%;
		padding: 5px 10px;
		text-align: center;
		z-index: 500;
	}

	/* -- 6.4 MODAL -- */
	#modal-option-glasstype {
		width: 100%;
	}
	.modal-backdrop {
		background-color: rgba(54,56,64,1);
	}
		.modal-backdrop.show { opacity: 0.2; }
	.modal-dialog {
		max-width: 600px;
	}
		.modal-dialog.modal-lg {
			max-width: 800px;
		}
	.modal-content {
		box-shadow: 1px 1px 40px rgba(0,0,0,0.15);
		border: none;
		border-radius: 0px;
	}
		.modal-header {
		    border-bottom: 0px solid rgba(128,128,128,0.2);
			padding: 1rem 1.6rem;
		}
			.close:not(:disabled):not(.disabled) { outline: none; }
			.modal-header .modal-title {

			}
				.modal-header .modal-title .fas {
					margin-right: 5px;
				}

		#modal-option-edits{
			width: 100%;
		}

		.modal-body {
			display: flex;
			align-items: center;
			padding: 0.1rem 1.6rem 1.1rem 1.6rem;
		}

			@media (min-width: 375px) {
				.modal-body .list-fields {
					padding-left: 10.4rem;
				}
			}

			@media (min-width:374px){
			.modal-body .list-fields{
				padding-left: 0rem;
			}
			}

			@media (max-width: 500px){
				.glasscolor-image img{
					visibility:hidden;
					opacity: 0;
					width: 0%;
					.glasscolor-image {
						width: 0%;
					}
				}
				#modal-option-glasscolor .list-glasscolor{
					width: 100%;
					display: inline;
				}
				.modal-body{
					display: inline;
					width: 100%;
				}
			}

				#modal-option-chamfering {
					width: 100%;
				}

.modal-body p { margin-bottom: 0px; }
		.modal-footer {
			padding: 1rem 1.6rem;
		    border-top: 0px solid rgba(128,128,128,0.2);
			/*vinith*/
			display: inline-block;
			text-align: center;
		}
			.modal-footer .btn {
				margin-bottom: 13px; /*vinith 0px to 13px*/
				padding-top: 5px;
				padding-bottom: 2px;
			}

			/* BLÖCKE */
			.modal-body .block-select {
				margin: 0.6rem 0rem;
				padding: 0.6rem 0rem;
				background-color: rgba(215,215,217,0.4);
				cursor: pointer;
				text-align: center;
			}
				.modal-body .block-select:hover { background-color: rgba(184,240,0,1); }
				.modal-body .block-select .select-vector {
					height: 150px;
					background-position: center;
					background-repeat: no-repeat;
				}
				.modal-body .block-select h3 {
					margin-top: 1.6rem;
					font-weight: 400;
					font-size: 20px;
					color: rgba(81,87,96,1);
				}

			/* LISTENFELDER */
			.list-fields .list-field {
				display: flex;
				position: relative;
				background-color: rgba(246,246,244,1);
				border-top: 1px rgba(255,255,255,1) solid;
				border-bottom: 1px rgba(213,213,209,1) solid;
				padding: 0.2rem 0.8rem;
				cursor: pointer;

				-webkit-transition: background-color ease 0.3s;
				-moz-transition: background-color ease 0.3s;
				-o-transition: background-color ease 0.3s;
				transition: background-color ease 0.3s;
			}
				.list-fields .list-field:hover { background-color: rgba(236,236,234,1); }
				.list-fields .list-field.field-active {
					background-color: rgba(184,240,0,1);
					border-top-color: rgba(229,247,171,1);
				}

				.list-fields .list-field:after { clear: both; }
				.list-fields .list-field:first-child { border-top-width: 0px; }
				.list-fields .list-field:last-child { border-bottom-width: 0px; }

				.list-fields .list-field .field-name {
					flex: 1;
					display: inline-block;
					font-size: 15px;
					font-weight: 400;
				}
				.list-fields .list-field .field-select {
					float: right;
					width: 95px;
				}
				 .list-fields .list-field .field-tooltip {
					z-index: 100;
					visibility: hidden;
					opacity: 1;
					cursor: default;
					position: absolute;
					padding: 15px 18px;
					margin-right: -10px;
					width: 365px;
					background-color: rgba(87,94,105,0.95);
					top: -75px;
					right: -370px;
						transition: visibility 0s, margin-right 0.2s linear, opacity 0.1s linear;
				}


					.list-fields .list-field .field-tooltip:after {
						right: 100%;
						top: 50%;
						/*border: solid transparent;*/
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						border-color: rgba(54, 56, 64, 0);
						border-right-color: rgba(87,94,105,0.95);
						border-width: 15px;
						margin-top: -15px;
					}
					/* vinith close tooltip */
					.close-tooltip{
						border: none;
						position: absolute;
						right: 18px;
						z-index: 10000;
					}

					/* vinith skalierbar vorschau */
					@media only screen and (min-width: 375px) and (max-width: 1300px) {
						.list-fields .list-field .field-tooltip {
							top: -218px;
							right: 3px;
							width: 285px;
						}

						#field-1 .list-field.field-tooltip {
							top: -50px;
						}

						.list-fields .list-field .field-tooltip:after{
							opacity: 0;
						}
					}
					@media(min-width: 768px) and (max-width: 1199px) {
						.row.config-option {
							display: block;
						}
					}


					.list-fields .list-field .field-tooltip h3, .list-fields .list-field .field-tooltip p { color: rgba(255,255,255,1); }
					/*.list-fields .list-field:hover .field-tooltip {
						visibility: visible;
						opacity: 1;
						margin-right: 0px;
					}*/

					.list-fields .list-field .field-tooltip img {
						width: -webkit-fill-available;
						margin: 0px 0px 10px 0px;
					}
					.list-fields .list-field .field-tooltip h3 {
						font-size: 19px;
						margin-bottom: 2px 0px 10px;
					}
					.list-fields .list-field .field-tooltip p {
						font-size: 13px;
					}
						.list-fields .list-field .field-tooltip p:last-child {
							font-size: 15px;
							margin: 8px 0px 0px;
						}
					.list-fields .list-field .field-tooltip img {
						width: 100%
					}

	/* ----- 6.7 SELECTOR ----- */
	.dropdown-menu {
	    min-width: 160px;
	    padding: 5px 0;
	    margin: 2px 0 0;
	    font-size: 14px;
	    background-color: rgba(87,94,105,0.9);
		box-shadow: 0px 0px 0px rgba(0,0,0,0.4);
	    border-radius: 0px;
		text-align: right;
	}
		.dropdown-item {
			padding: .1rem 0.4rem;
			color: rgba(255,255,255,1);
		}
		.dropdown-menu li:hover a {
			background-color: #EAE3DE;
		}
		.dropdown-menu li.selected a, .dropdown-menu li.active a {
			background-color: rgba(184,240,0,1);
			color: rgba(54,56,64,1);
		}

	.bootstrap-select .dropdown-toggle .filter-option {
		background-image: url('../img/vector/pfeil-unten.svg');
		background-size: 10%;
		background-position: 10%;
		background-repeat: no-repeat;
	}

/* ----- KONFIGURATOR ----- */
	#input-group-measurement-width{
		margin-top: 30px;
	}