/* PRICE BLOCK - START */

.view-blockpricing ul,
.view-blockpricing li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	background: none;
	clear: right;
}

.view-blockpricing .question-item {
	clear: right;
	margin: 2px 0;
}

.view-blockpricing ul {
	margin-left: 0px !important;
}

.view-blockpricing .item-price {
	float: right;
}

.view-blockpricing h4,
.view-blockpricing h5,
.view-blockpricing h6 {
	font-size: 100%;
	margin-top: .5em;
	margin-bottom: .5em;
	font-weight: bold;
}

.view-blockpricing .pricing-title {
	font-size: 16px;
	font-weight: bold;
}

.view-blockpricing .buttons {
	margin-top: 10px;
}

.view-blockpricing .buttons .button-frontend-small {
	margin-bottom: 5px;
}

.view-blockpricing .total-per-item {
	margin-top: .5em;
	margin-bottom: .5em;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	padding-bottom: 6px;
}

.view-blockpricing .totals-b2b .total-gross {
	font-weight: bold;
	margin-top: .5em;
	margin-bottom: .5em;
	border-top: 1px solid #ccc;
	padding-top: 6px;
}

.view-blockpricing .totals-b2c .total-gross {
	font-weight: bold;
}

.view-blockpricing .total-plus-extras {
	border-top: 1px solid #ccc;
	padding-top: 7px;
}

.view-blockpricing .configurator-page-title {
	cursor: pointer;
}

.view-blockpricing .configurator-page.no-questions .configurator-page-title {
	cursor: default;
	background: none;
}

.view-blockpricing .configurator-page-expanded .pricing-configurator-page {
	display: none;
}

.view-blockpricing .pricing .question-list {
	display: none;
	padding-left: 15px;
}

.view-blockpricing .configurator-page-expanded .question-list {
	display: block;
	margin-bottom: .5em;
}

.view-blockpricing .configurator-page-expanded .configurator-page-title:before {
	content: "\f0d7";
}

.view-blockpricing .configurator-page-title:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	width: 10px;
	margin-right: 5px;
	display: block;
	float: left;
	text-align: center;
}

.view-blockpricing .question-item-outputvalue {
	font-weight: bold;
}

.view-blockpricing .configurator-page.no-questions .pricing-configurator-page {
	display: inline;
}

.view-blockpricing .hidden-item {
	display: none;
}

/* PRICE BLOCK - END */

/* TAB NAVIGATION - START */

.view-configuratorpage .block-navigation {
	margin: 20px 0;
}

.view-configuratorpage .block-navigation .nav-link {
	text-decoration: none!important;
	text-align: center;
}

/* TAB NAVIGATION - END */

.popover-content p:last-child {
	margin-bottom: 0;
}

#ui-datepicker-div {
	z-index: 30000 !important;
}

.view-configuratorpage .overviews .wrapper-visualization,
.view-configuratorpage .overviews .wrapper-selections {
	display: none;
}

.view-configuratorpage .overviews.show-visualization .wrapper-visualization {
	display: block;
	padding-top: 69px;

}

@media (min-width: 992px) {
	.view-configuratorpage .overviews.show-visualization .wrapper-visualization {
		margin-left: 50px;
		margin-right: 50px;
	}
}

.view-configuratorpage .overviews.show-visualization .trigger-show-visualization {
	display: none;
}

.view-configuratorpage .overviews.show-selections .trigger-show-selections {
	display: none;
}

.view-configuratorpage .overviews.show-selections .wrapper-selections {
	display: block;
	padding-top: 79px;
}

.view-configuratorpage .overviews .view-picker {
	margin: 20px auto;
	text-align: center;
}

.view-configuratorpage .overviews .view-picker a {
	cursor:pointer;
}

.view-configuratorpage .overviews .selections-title {
	font-size: 1.2em;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	margin-top: 0;
}

@media (min-width: 768px) {
	.view-configuratorpage .col-md-6.top-part {
		order:2;
	}

	.view-configuratorpage .col-md-6.bottom-part {
		order:1;
	}
}

.view-configuratorpage .page-navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

/* Add-to-cart (when shown on non-last pages) sits on the left; prev/next group on
   the right. margin-left:auto keeps the pages group hard right even when the cart
   slot is empty (last page, or add-to-cart configured for the last page only). */
.view-configuratorpage .page-navigation-cart,
.view-configuratorpage .page-navigation-pages {
	display: flex;
	gap: 10px;
}

.view-configuratorpage .page-navigation-pages {
	margin-left: auto;
}

.view-configuratorpage .configurator-page-questions {
	display: flex;
	flex-wrap: wrap;
	margin-left:-15px;
	margin-right:-15px;
	margin-bottom:20px;
	gap:20px;
}

.view-configuratorpage .question {
	padding-left:15px;
	padding-right:15px;
}

.view-configuratorpage .configurator-page-questions .question:not([class*='col-']) {
	flex: 0 0 100%;
	clear: both;
}

.cb-content .question,
.cb-content .answer {
	position: relative;
}

.cb-content .question.non-applying-question.hide-non-applying {
	display: none;
}

.cb-content .question .answer.non-applying-answer.hide-non-applying {
	display: none;
}

.cb-content .question.non-applying-question.grey-out-non-applying .answer,
.cb-content .answer.non-applying-answer.grey-out-non-applying {
	color: #ccc;
}

.cb-content .question .radio,
.cb-content .question .checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	margin: 5px 0;
}

.cb-content .question .radio + .radio,
.cb-content .question .checkbox + .checkbox {
	margin: 5px 0;
}

.cb-content .question .radio input[type=radio] {
	margin-right:3px;
}

.cb-content .question .answer label {
	margin-bottom:0;
}

.cb-content .question .validation-message-target {
	display: none;
	color: var(--bs-form-invalid-color);
}

.cb-content .question .answer.radio,
.cb-content .question .answer.checkbox {
	padding-left: 1px;
}

.cb-content .question .question-heading {
	display: flex;
	align-items: baseline;
	column-gap: 10px;
	border-bottom: 1px solid #ccc;
	margin: 0 0 10px;
}

.cb-content .question .question-title {
	font-size: 1.2em;
	padding-bottom: 5px;
	margin: 0;
	flex: 1;
}

.cb-content .question .question-heading .cb-popover {
	font-size: 17px;
	margin-top: 2px;
}

.cb-content .question button.question-modal-icon,
.cb-content .question button.cb-popover {
	appearance: none;
	border:none;
	background:none;
}

.cb-content .question button.question-modal-icon:focus,
.cb-content .question button.cb-popover:focus {
	outline:none;

}

.cb-content .question .question-heading .pull-right {
	order: 1;
}

.cb-content .question .question-modal-icon {
	font-size: 17px;
	margin-top: 2px;
}

.cb-content .question label .question-modal-icon {
	font-size:inherit;
	margin:0;
	padding:0;
	position:relative;
	top:-1px;
}

.cb-content .question .question-description-tooltip {
	position: absolute;
	top: 0;
	right: 0;
}

.cb-content .question .question-description-tooltip .fa {
	text-decoration: none;
	color: inherit;
}

.cb-content .question .question-description-tooltip .fa:before {
	font-size: 18px;
}

/* Answer price sits hard-right of the answer row (order:1 keeps it after the
   answer label/description in the flex flow; margin-left:auto pushes it right). */
.cb-content .question .answer-price-display {
	order: 1;
	margin-left: auto;
}

.cb-content .question .question-was-price,
.cb-content .question .question-was-price-recurring,
.cb-content .question .answer-was-price,
.cb-content .question .answer-was-price-recurring {
	text-decoration: line-through;
}

.cb-content .question.type-calendar .ui-datepicker-trigger {
	display: none;
}

.cb-content .question.type-calendar.non-applying-question.grey-out-non-applying .trigger-show-calendar {
	color: #ccc;
}

.cb-content .question.type-calendar .ui-datepicker-inline {
	box-shadow: none;
	margin:5px 0;
	max-width:100%;
}
/*
.cb-content .question.type-colorpicker .pseudo-text-field {
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background: #fff none;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
}

.cb-content .question.type-colorpicker .trigger-show-colorpicker {
	height: 34px;
}
*/

.cb-content .question.type-colorpicker .input-group .btn {
	border-color:var(--bs-border-color);
}

.cb-content .question.type-colorpicker .sp-container {
	display:flex;
}

.cb-content .question.type-colorpicker .sp-picker-container {
	width:100%;
	max-width:500px;
}

.cb-content .question.type-ralcolorpicker .pseudo-text-field {
	color: #000000;
	background: #fff none;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
	cursor: pointer;
	margin-bottom:0;
}

.cb-content .question.type-ralcolorpicker .pseudo-text-field.is-dark {
	color: #ffffff;
}

.cb-content .question.type-ralcolorpicker .modal-content a.close-modal {
	font-size: 11px;
	color: #666;
	font-weight: 300;
	position: absolute;
	top: 3px;
	right: 12px;
	text-decoration: none;
}

.cb-content .question.type-ralcolorpicker.non-applying-question .trigger-show-ralcolorpicker .fa {
	color: #ccc;
}

.cb-content .question.type-ralcolorpicker .modal-content {
	padding: 10px;
}

.cb-content .question.type-ralcolorpicker .modal-content .ral-color-group {
	margin-top: 5px;
	margin-bottom: 5px;
}

.cb-content .question.type-ralcolorpicker .modal-content .ral-color {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 15px;
	border-radius: 15px;
	font-size: 14px;
	color: #000;
	text-decoration: none;
	display: block;
	cursor: pointer;
}

.cb-content .question.type-ralcolorpicker .modal-content .ral-color.is-dark {
	color: #ffffff;
}

.cb-content .question.type-ralcolorpicker .ral-color-input {
	display: none;
}

.cb-content .question.type-colorpicker .wrapper-flat-spectrum {
	margin: 10px 0;
	display: none;
}
/*
.cb-content .question.type-colorpicker .sp-container {
	border: 1px solid #ccc;
	display: block;
}

.cb-content .question.type-colorpicker .sp-container.sp-flat {
	z-index:0;
}

.cb-content .question.type-colorpicker .sp-palette-container,
.cb-content .question.type-colorpicker .sp-picker-container {
	width: 50%;
	box-sizing: border-box;
}

.cb-content .question.type-colorpicker .sp-palette .sp-thumb-el {
	width: 20px;
	height: 20px;
}

.cb-content .question.type-colorpicker .sp-input {
	margin-bottom: 0;
	border: none;
}

.cb-content .question.type-colorpicker .sp-input:focus {
	border: none;
}

.cb-content .question.type-colorpicker .sp-button-container {
	display: none;
}

.cb-content .question.type-colorpicker .cb-replacer .sp-dd {
	display: none;
}
*/
.cb-content .question.type-colorpicker.non-applying-question.grey-out-non-applying .trigger-show-colorpicker {
	color: #ccc;
}

.cb-content .question.type-dropdown .configbox-dropdown-trigger {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
}

.cb-content .question.type-dropdown .configbox-dropdown-trigger:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0d7";
	order: 2;
	line-height: inherit;
	color: #333;
	padding-left: 10px;
	margin-right: 2px;
}

/* Exactly ONE auto margin in the trigger, and it belongs to the TITLE.

   The free space has to be claimed by something, and whichever element claims it
   ends up deciding the layout. Giving it to the caret (its old margin-left:auto)
   forced the price to margin-left:0, which butted the price straight against the
   title - measured at a 0px gap, reading "1,800 mm€ 190.00", while 496px sat
   empty to its right. Giving it to the PRICE instead is no better on its own:
   two auto margins split the free space between them and strand the caret in
   the middle.

   So the title absorbs it, and everything after the title is pushed to the right
   edge in source order: price, then caret. That also makes the closed state
   agree with the open list, where .answer-price-display right-aligns via the
   shared rule's own margin-left:auto.

   Holds for all three states, each checked: a priced selection (price right-
   aligned, caret outside it), a zero-price selection (the price element is still
   there but empty, so the caret keeps the edge), and the untouched "Please
   choose" default, which has no price element at all. */
.cb-content .question.type-dropdown .configbox-dropdown-trigger label,
.cb-content .question.type-dropdown .configbox-dropdown-trigger .configbox-dropdown-trigger-default {
	margin-right: auto;
}

.cb-content .question.type-dropdown .configbox-dropdown-trigger .answer-price-display {
	order: 1;
	margin-left: 0;
}

.cb-content .question.type-dropdown .configbox-dropdown-trigger label {
	margin-bottom: 0;
	font-weight: normal;
}

.cb-content .question.type-dropdown .configbox-dropdown {
	display: none;
	margin-left: -10px;
	margin-right: -10px;
	padding: 0px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.cb-content .question.type-dropdown.non-applying-question.grey-out-non-applying .configbox-dropdown-trigger {
	color: #ccc;
	border-color: #ccc;
}

.cb-content .question.type-dropdown.non-applying-question.grey-out-non-applying .configbox-dropdown-trigger-default {
	visibility: hidden;
}

.cb-content .question.type-dropdown.non-applying-question.grey-out-non-applying .configbox-dropdown-trigger:before {
	color: #ccc;
}

.cb-content .question.type-slider label {
	display: block;
}

.cb-content .question.type-slider .form-group {
	display: flex;
	align-items: center;
	gap:10px;
}

.cb-content .question.type-slider .form-group .wrapper-slider {
	flex:1
}

.cb-content .question.type-slider .form-group .wrapper-input {
	width:150px;
	flex-shrink: 0;
}

.cb-content .question.type-slider .slider {
	width:100%;
}

.cb-content .question.type-upload.grey-out-non-applying.non-applying-question .answers {
	color: #ccc;
}

.cb-content .question.type-upload .upload-drop-zone {
	text-align: center;
	border: 3px dashed #ccc;
	position: relative;
	border-radius: 2px;
	padding: 20px;
}

.cb-content .question.type-upload.applying-question .upload-drop-zone.is-dragover {
	border-color: #70bc52;
}

.cb-content .question.type-upload .upload-drop-zone .drop-zone-note-pre {
	text-transform: uppercase;
	text-shadow: 1px 1px #fff;
	font-weight: bold;
	margin-bottom: 10px;
}

.cb-content .question.type-upload .upload-drop-zone .drop-zone-note-post {
	display: none;
}

.cb-content .question.type-upload .upload-current-file {
	margin: 10px 10px 0;
}

.cb-content .question.type-upload .upload-current-file .file-list {
	display: none;
}

.cb-content .question.type-upload .upload-current-file.has-file .file-list {
	display: block;
}

.cb-content .question.type-upload .upload-current-file.has-file .no-file-text {
	display: none;
}

.cb-content .question.type-upload .trigger-show-file-browser {
	text-transform: uppercase;
}

.cb-content .question.type-upload .trigger-remove-file {
	text-decoration: none;
	font-size: 120%;
	margin-right: 5px;
}

.cb-content .question.type-upload .validation-message-target:not(:empty) {
	margin:10px 0;
}

.cb-content .question.type-images label {
	display: block;
}

/* Image answers stack inside a block label (not a flex row), so the shared
   answer-price rule's margin-left:auto is inert here — right-align the price
   on its own line under the tile instead. */
.cb-content .question.type-images .answer-price-display {
	display: block;
	text-align: right;
}

.cb-content .question.type-images .configbox-image-button-image {
	width: 100%;
}

.cb-content .question.type-images .answer-popover {
	position: absolute;
	top: 10px;
	right: 20px;
}

.cb-content .question.type-images .configbox-image-button-wrapper {
	margin-bottom: 5px;
	display:block;
}

.cb-content .question.type-images input[type=radio] {
	position: relative;
	top: -2px;
	margin-top: 0;
	margin-right: 2px;
}

.cb-content .question.type-images input[type=checkbox] {
	position: relative;
	top: -2px;
	margin-top: 0;
	margin-right: 2px;
}

.cb-content .question.type-checkbox .form-group {
	margin-bottom: 0;
}

.cb-content .question.type-checkbox .checkbox {
	margin: 5px 0;
}

.cb-content .question.type-checkbox.title-display-heading + .question.type-checkbox.title-display-none {
	margin-top: -15px;
}

.cb-content .question.type-checkbox.title-display-none {
	margin-top: 0;
	margin-bottom: 0;
}

.cb-content .question.type-choices .radio,
.cb-content .question.type-choices .radio label {
	margin-bottom:0;
}

.view-blockvisualization .visualization-frame:before {
	content: " ";
	display: table;
}

.view-blockvisualization .visualization-frame:after {
	display: table;
	content: "";
	clear: both;
}

.view-blockvisualization .visualization-frame .base-image,
.view-blockvisualization .visualization-frame .visualization-image {
	float: left;
	margin-right: -100%;
	width: 100%;
}

.view-blockvisualization .visualization-frame .base-image img,
.view-blockvisualization .visualization-frame .visualization-image img {
	width:100%;
	max-width:none;
}

.cb-content .view-sdvisualization #shapediver-vis {
	width: 100%;
	border:none;
	background-color: transparent;
}

.cb-content .view-sdvisualization .current-images {
	display:none;
}

/* Quick-Edit on configurator pages */
.view-configuratorpage {
	position: relative;
}

.view-configuratorpage .quick-edit-buttons-page {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.view-configuratorpage .page-edit-buttons {
	display: none;
	background: #fff;
	padding: 10px;
	box-shadow: 3px 5px 20px 0px rgba(0, 0, 0, 0.2);
}

.view-configuratorpage .trigger-show-page-edit-buttons {
	align-self: flex-end;
}

.view-configuratorpage .quick-edit-buttons .fa-pencil-square-o:before {
	position: relative;
	top: 1px;
}

.view-configuratorpage .page-edit-buttons .fa {
	margin-right: 5px;
	width: 15px;
}

/* Answer row is a flex container, so float is inert; order:2 trails the price
   (order:1) at the right edge. The type-images rule below re-positions these
   absolutely and is unaffected by order. */
.view-configuratorpage .quick-edit-buttons-answer {
	order: 2;
	margin-left: 5px;
}

/* Corner-pinned per-question edit badge, rendered before the heading. Kept as
   float:right on purpose: absolute-positioning it to the question's top-right
   collides with the page-level edit badge (same corner) on the first question,
   and the parent .question is a plain block so the float is well-behaved. */
.view-configuratorpage .quick-edit-buttons-question {
	float: right;
	margin-left: 5px;
}

.view-configuratorpage .question.type-images .quick-edit-buttons-answer {
	position: absolute;
	top: 5px;
	left: 20px;
}

.view-configuratorpage .question-description-modal .modal-content,
.view-configuratorpage .answer-description-modal .modal-content {
	padding:20px;
}

.view-configuratorpage .configbox-disabled,
.view-configuratorpage .configbox-disabled:hover {
	background:#ccc;
	border-color:#bbb;
	cursor:default;
}

#sdv-container-canvas {
	height:400px!important;
}

.woocommerce-product-gallery__wrapper .view-blockvisualization,
.woocommerce-product-gallery__wrapper .view-blockpricing {
	margin-top:10px;
}

.cb-popover-actual {
	visibility: hidden;
}