/* configurator */
.config-image-group {display: flex;}
/* .config-image-wrap {flex: 1;} */
.config-image-wrap {padding-bottom: 219%; position: relative;  transform-origin: top; transform: scale(.75);}
.config-image-group [data-mockup-group] {width: 50%; margin: 0 2%;}
[data-mockup-group] {position: relative;}
.sideframe [data-mockup-group] {margin-top:-32%;}
[data-sidetype="both"] [data-mockup-group] {margin-top: -26%;}
.config-image-group .config-image-wrap {
	/* width: 50%; */
	/* padding-bottom: 102%; */
	transform: none; /* temp */
}

.reflected .config-image-wrap {
    transform: scale(-0.75, 0.75);
}
.reflected .config-image-group .config-image-wrap {transform: scaleX(-1);}
.sideframe.reflected, .topframe.reflected {transform: scaleX(-1);}

[data-mockup="inside"]::after {content: ''; border: 29px solid #fff; position: absolute; left: -1px; top: -1px; bottom: -1px; right: -1px;}
[data-mockup="inside"].nocrop::after {display: none;}

[data-mockup-layout] {position:absolute; z-index:1;}
[data-mockup] {position:relative}
[data-frezerovka], [data-skin], [data-skin-out] {width: 81.76%; top: 4.03%;z-index:1;left: 9.71%;height: 91.95%;opacity: 0.35;position: absolute; overflow: hidden;}
[data-default] {width: 100%; /* height: 100%; */ position: absolute; left: 0; top: 0;}

[data-skin], [data-skin-out] {background-size: contain; opacity:1 !important}
[data-frezerovka-cloned] {width: 100%; background-color:#fff;position:absolute; z-index:2; top:0.27%; left: .59%; height: 100%; opacity: 0.3;overflow: hidden;}
[data-frezerovka] img {filter: blur(0.7px); position:relative; z-index:3;}
[data-klyuchevina] {top:56.5%; right:13.5%; max-width:6%; z-index: 2;}
[data-klyuchevina][data-flash-lock] {top:40%}
[data-ruchki], [data-parametry] {top:51.5%; right:14%; max-width:18.82%; z-index: 2;}
[data-glazok] {top:26%; left:51%; transform: translateX(-50%); max-width:4.71%;}
[data-dovodchik] {top: 4%; width: 27%; right: 16%;}
[data-mockup="outside"] [data-dovodchik] {display:none}
/* [data-framuga] {width:100%;top:0;} */
[data-framuga] img {width:100%;}
[data-mockup="inside"] [data-framuga] {overflow:hidden; z-index:2; width:87%; margin-left: 6.5%;height: 15%;}
[data-mockup="inside"] [data-framuga] img {width: 116%;max-width: none; margin-left: -8%; margin-top: -7%;}
[data-mockup="inside"].nocrop  [data-framuga] img {width:100%; margin-left:0; margin-top:0;}
[data-mockup="inside"].nocrop  [data-framuga] {overflow:visible; width:100%;margin-left:0; margin-top:0; height:auto;}
[data-steklo] {width: 29%;left: 36%; top: 14%;}
[data-steklo] img {width:100%}
[data-mockup="outside"] [data-ruchki], [data-mockup="outside"] [data-parametry]  {
	transform: scale(-1, 1);
}
[data-mockup="inside"] [data-ruchki], [data-mockup="inside"] [data-parametry] {
	right: auto;
	left: 14%;
}

[data-mockup="inside"] [data-klyuchevina] {
	right: auto;
	left: 13.5%;
}
[data-skin-out] {left: 0; z-index: -2;  width: 100%;   top: 0;   height: 100%;clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 4%, 91% 4%, 91% 96%, 10% 96%, 10% 100%, 100% 100%, 100% 0%);}
.config-image-group [data-mockup="inside"]::after {border: 13px solid #fff; }
.config-image-group [data-default] {z-index:1}
.config-image-group [data-skin-out] {z-index:0}
[data-skin-p1],[data-skin-p2],[data-skin-p3]{width: 2%;    height: 6.5%;    top: 3.5%;    left: 7%;    border-radius: 25%;    z-index: -1;}
.config-image-group [data-skin-p1],.config-image-group [data-skin-p2],.config-image-group [data-skin-p3] {z-index:0; left:7.2%}
.config-image-group [data-skin-p3] {top:89%}
[data-skin-p2] {top: 15.5%;}
[data-skin-p3] {top: 90%;}
.topframe [data-mockup] {margin-top:30%}
.topframe [data-mockup][data-mockup="inside"] {margin-top:20%}
/*.topframe [data-mockup][data-mockup="inside"].nocrop {margin-top:30%}*/
.topframe .config-image-group [data-mockup] {margin-top: 45%;}
/*.topframe .config-image-group [data-mockup][data-mockup="inside"].nocrop {margin-top:18%}*/
.topframe [data-framuga] {
    top: 0;
    width: 74.8%;
    left: 12.6%;
    margin-top: -35%;
}
.topframe.sideframe [data-framuga], .topframe .config-image-group [data-framuga] {
    top: -3px; width: 100%;  right: 0; margin-top:0; left:auto;
}
.topframe [data-mockup-group="inside"].nocrop [data-framuga] {top:-21%}
.sideframe .config-image-wrap {transform: scale(0.66) translateY(-32%);transform-origin: right bottom;}
/*
.sideframe [data-mockup-group] + [data-mockup-group] {margin-top:-60%}
.sideframe[data-sidesize="3"] [data-mockup-group] + [data-mockup-group] {margin-top:-100%}
*/
[data-side-framuga] {
    position: absolute;
    top: 13.5%;
    transform: scale(.812);
    transform-origin: left top;
    /*     height: 65%;
    width: 36%; */
    left: 0;
}

[data-side-framuga] img {
    max-height: 100%;
}

[data-mockup-frame] {
    position: absolute;
    width: 100%;
    height: 100%;
}
[data-side-framuga="both"] {
    transform: scale(.59);
	top: 10.5%;
}

[data-sidetype="both"] .config-image-wrap {
	transform: scale(0.475) translateY(22%);
    transform-origin: top center;
}
[data-side-framuga="both"] + [data-side-framuga="both"] {left: auto; right: 0; transform-origin: right top;}
[data-sidesize="1"] [data-side-framuga], [data-sidesize="2"] [data-side-framuga] {
	top: 13%;
    transform: scale(.8);
}
[data-sidesize="1"] .config-image-wrap, [data-sidesize="2"] .config-image-wrap {
	transform: scale(0.645) translateY(-35%);
}

[data-sidesize="2"][data-sidetype="right"] .config-image-wrap, [data-sidesize="1"][data-sidetype="right"]  .config-image-wrap {transform-origin: left bottom;}
[data-sidesize="2"][data-sidetype="right"] [data-side-framuga], [data-sidesize="1"][data-sidetype="right"] [data-side-framuga] {left: auto; right: 0; transform-origin: right top;}


.config-layout {min-height: calc(100vh - 92px);	/* display: flex; */margin-bottom: 0 !important;/* align-items: flex-start; */padding-right: 350px;position: relative;padding-top: 50px;}
.config-layout main {flex-grow: 1;display: flex;flex-wrap: wrap; align-items: flex-start;}

.config-layout .breadcrumbs {position: absolute;top: 0;width: 100%;}
.config-layout .breadcrumbs .wrap {padding-right: 300px;}
.config-image {
	width: 460px;
	flex-shrink: 0;
	padding: 30px 0 30px 30px;
	position: sticky;
	top: 20px;
}

.config-content {
	flex: 1;
	padding-left: 40px;
	padding-right: 40px;
	overflow-y: auto;
	max-height: 100%;
}
.config-layout aside {width: 350px;flex-shrink: 0;background-color: #EAEEED;position: absolute;right: 0;top: 0; min-height: 100vh;}
.config-layout aside.fixed {
	position: fixed;
	top: 0;
}

.config-layout aside.fixed.bottom {
	bottom: 0;
	top: auto;
	position: absolute;
}


aside .btn-primary {width: 100%; padding: 20px;}
.sidebar-inner {padding: 25px;}
.sidebar-total-price {font-size: 29px; font-weight: 600;}
.step-item {user-select: none;}

.step-title {
	padding: 13px 25px;
	border-top: 1px solid #D3D5D8;
	font-weight: 500;
	cursor: pointer;
}
.step-item.active .step-title {background-color: #3F555B; color: #fff; position: relative;}
.step-item:not(.active):hover .step-title {background-color: #d5dfdd;}
.step-item.active .step-title::before {
	content: "";
	right: 100%;
	top: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #3f555b;
	border-width: 24px;
	margin-top: -24px;
}

.substep-item {
	padding: 6px 6px 6px 24px;
}

.substeps-list {
	margin: 10px 0;
}

.substep-item.active .substep-inner {
	background-color: #3f555b;
	color: #fff;
}

.substep-inner {
	display: inline-block;
	padding: 5px 15px;
	border-radius: 50px;
	color: #3f555b;
	cursor: pointer;
}
.substep-item:not(.active) .substep-inner:hover {background-color: #d5dfdd;}

.options-list {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: 25px;
}

.color-item {text-align: center;}

.color-box {
	position: relative;
	padding-bottom: 100%;
	margin-bottom: 8px;
}

.option-item {font-size: 15px;padding: 10px;cursor: pointer;width: 100%; max-width: 33.33%; text-align: center;}
.option-item-vertical {max-width: 160px;}
.panel-options .option-item-vertical {max-width: 25%;}
.panel-options .option-item-vertical .option-item-image {min-height: 200px; max-height: 200px;}

.color-list .option-item {
	max-width: 125px;
}
.option-item-inner {
	padding: 15px;
	border: 1px solid #EAEEED;
	position: relative;
	height: 100%;
}
.option-item-vertical > * + * {margin-top: 10px;}
.option-item.active .option-item-inner, .option-item:hover .option-item-inner  {border-color: #5C9938; box-shadow: inset 0 0 0px 1px rgb(92 153 56)}
.option-item.active .option-item-inner::before {
	content: '';
	width: 22px;
	height: 22px;
	background-color: #5C9938;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 78.369 78.369'%3E%3Cpath d='M78.049 19.015L29.458 67.606a1.094 1.094 0 01-1.548 0L.32 40.015a1.094 1.094 0 010-1.547l6.704-6.704a1.095 1.095 0 011.548 0l20.113 20.112 41.113-41.113a1.095 1.095 0 011.548 0l6.703 6.704a1.094 1.094 0 010 1.548z' fill='%23fff'/%3E%3C/svg%3E");
	background-size: 60% auto;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 50%;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10;
}

.frez-list {margin-left: -5px; margin-right: -5px;}
.frez-item {padding-left: 5px; padding-right: 5px; text-align: center;     max-width: none;    width: auto; /* flex: 1; */ flex-basis: 100px;}
.frez-item .option-item-inner {border: 0 !important;box-shadow: none !important;}
.frez-item.active .option-item-inner, .frez-item:hover .option-item-inner{ background-color: #EAEEED;}
.option-item img {max-width: 100% !important;}
.option-item-default .option-item-inner {display: flex; padding-right: 30px;}
.option-item-default .option-item-image {width: 55px; flex-shrink: 0;margin-right: 10px;}
.option-item-default {width: 33.33%;}
.option-item-vertical {text-align: center;}
.option-item-vertical .option-item-image {
	min-height: 125px;
	max-height: 125px;
	display: flex;
}
.option-item-vertical img {margin: auto; max-height: 100%;}
.option-item-vertical .option-item-image {margin-bottom: 8px;}

.option-item-vertical .option-item-inner {display: flex; flex-direction: column;}


.lock-item {width: 100%; max-width: 550px;}
.lock-item .option-item-image {width: 90px; margin-right: 20px;}
.lock-item .option-item-inner {
	display: flex;
}

.lock-item .option-item-title {
	font-weight: 600;
	font-size: 18px;
	padding-right: 30px;
}
.lock-prop-number {
	font-size: 32px;
	font-weight: 700;
	color: #3F555B;
	margin-right: 3px;
}

.lock-prop-item {
	display: inline-flex;
	align-items: center;
	margin-right: 15px;
}

.lock-prop-text {
	font-size: 14px;
	line-height: 1;
	color: #3F555B;
}
.option-bottom-row {
	display: flex;
	justify-content: space-between;
}

.option-item-desc {
	flex-grow: 1;
}
.option-item-default .option-item-desc {
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.option-item-title {
	word-break: break-word;
	width: 100%;
}

.option-item-desc > * + * {margin-top: 6px;}

.option-item .textbox {flex: 1; margin-top: 10px; margin-bottom: 0;}
.option-item .textbox label {font-size: 14px; color: #666;}


.config-tabs {position: relative;display: inline-flex;background-color: #EAEEED;border-radius: 30px;margin-bottom: 25px;}
.config-tab-item {cursor: pointer;vertical-align: top;padding: 8px 20px; position: relative;z-index: 10; font-size: 17px; border-radius: 50px; margin: 4px 5px; user-select: none;}
.config-tab-item:not(.active):hover {background-color: #d5dfdd;}
.config-tab-item.active {color: #fff; background-color:#3F555B;}

.config-content-block {display: none; }
.config-content-block.active { display: block; }

.search-input {border: 1px solid #B2B2B2; padding: 6px 10px 6px 36px; background: url('images/search.svg') no-repeat left 10px center / 18px auto; max-width: 250px; font-size: 16px; border-radius: 3px;}

.price-table td {
	padding: 10px 0;
	border-top: 1px solid #E2E2E2;
}
.price-table .td-price {text-align: right;}
.price-table-title {color: #5C9938; font-weight: 600; font-size: 20px;}
.price-table-title td {border-top: 0; padding-top: 15px;}
.price-table .td-prop-name {color: #555;}

.price-table-total {display: flex; align-items: center;}
.dotted-key::after {content: '';border-bottom: 1px dotted #999;display: block;margin-top: -5px;}

.dotted-key-inner {
	background-color: #fff;
	position: relative;
	/* top: 2px; */
	display: inline;
	padding-right: 10px;
}

.table-key {
	flex-grow: 1;
}
.dotted-key {
	padding-right: 10px;
	flex-grow: 1;
}

.dotted-table td {
	vertical-align: bottom;
	padding: 7px 0;
}
.dotted-value {display: inline-block; position: relative; top: 4px;}
.price-table-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	font-size: 22px;
	font-weight: 500;
}


.divided-title::after {content: '';width: 60px;height: 3px;display: block;background-color: #5C9938;margin: 25px auto 20px;}

.divided-title-group {
	text-align: center;
}

.divided-caption {
	font-weight: 400;
}

.divided-title {
	margin-bottom: 0;
}

.door-type-item {
	display: block;
	padding: 15px;
	border: 1px solid #EAEEED;
	height: 100%;
	text-align: center;
	cursor: pointer;
}

.door-type-item:hover {border-color: #5C9938;}
.door-type-item:hover .title {color: #5C9938;}

.door-type-title {
	font-size: 25px;
	margin-bottom: .3em;
}

.door-result-image {position: absolute; width: 800px; height: 800px; background-color: #fff; border: 1px solid #000; z-index: 100;}
.clone-button {position: fixed; right: 20px; top: 20px; z-index: 101; box-shadow: 0 15px 40px 2px rgba(0,0,0,0.15);}

.door-result-image .config-image-group {transform: translateX(30px);}

.door-result-image .config-image {
	margin: auto;
	position: static;
	width: 700px;
}


.door-result-image .config-image-group [data-mockup="inside"] {
	transform: translate(-90px, 50px);
	position: relative;
	z-index: -1;
}


#capture svg {max-width: 100%; max-height: 100%;}

.checkout-form {background-color: #f2f2f2; padding: 30px; max-width: 500px;}

@media screen and (max-width: 1600px) {
	[data-sidesize="1"] [data-side-framuga], [data-sidesize="2"] [data-side-framuga] {transform: scale(0.615);}
}

@media screen and (min-width: 1440px) {
	aside .btn-primary {font-size: 18px;}
}
@media screen and (max-width: 1280px) {
	[data-side-framuga="both"] {transform: scale(.452);}
}

@media screen and (max-width: 1599px) {
	.config-layout aside {width: 300px;}
	.config-layout {padding-right: 300px;}
	.config-image {width: 360px;}
	.config-tab-item {font-size: 15px; padding: 8px 12px;}
}

@media screen and (max-width: 1279px) {
	.config-image {width: 270px;}
	.config-content {padding-left: 20px; padding-right: 20px;}
	.config-layout aside {width: 260px;}
	.config-layout {
		padding-right: 260px;
	}
	.option-item-default {width: 50%; max-width: 50%;}
	.sidebar-inner {padding: 15px;}
	.step-title {padding-left: 15px; padding-right: 15px;}
	aside .btn-primary {padding-left: 10px; padding-right: 10px;}

	[data-sidesize="1"] [data-side-framuga], [data-sidesize="2"] [data-side-framuga] {transform: scale(0.446);}
	[data-side-framuga="both"] {transform: scale(.329);}
}

@media screen and (max-width: 1023px) {
	.config-layout aside {
		width: 190px;
	}
	.config-layout {
		padding-right: 190px;
	}
	.config-tabs {
		border-radius: 0;
		flex-wrap: wrap;
		background-color: transparent;
		border-bottom: 1px solid #eaeeed;
		padding-bottom: 20px;
	}

	.config-tab-item {
		background-color: #eaeeed;
	}
}

@media screen and (max-width: 767px) {
	.config-layout aside {display: none;}
	.config-layout .breadcrumbs .wrap {padding-right: 0;}
	.config-layout main {flex-direction: column;}

	.config-image {position: static; padding-left: 0; margin: auto; max-height: 100vh;}
	.config-layout {padding-right: 0;}
	.config-content {width: 100%;}

	.config-nav {
		display: flex;
		align-items: center;
		padding: 10px;
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 11;
	}

	.config-nav .title {
		flex-grow: 1;
		text-align: center;
		font-size: 22px;
		margin: 0;
	}

	.btn-step-arrow {
		width: 50px;
		height: 50px;
		color: #5C9938;
		background-color: #eaeeed;
		font-size: 36px;
		border-radius: 50%;
	}
	.config-tab-item {font-size: 13px;}
	footer {padding-bottom: 60px;}
	.bottom-nav {position: fixed;box-shadow: 0 3px 40px 2px rgba(0,0,0,0.15);bottom: 0;left: 0;right: 0;z-index: 11;display: flex;padding: 5px;background-color: #fff;}
	.bottom-nav .btn {margin: 0 5px;flex: 1; padding-top: 8px; padding-bottom: 8px;}
	.bottom-nav .step-caption {
		font-size: 10px;
		color: #5C9938;
		display: block;
		margin-top: 4px;
		opacity: .7;
	}
	.bottom-nav .btn-primary .step-caption {
		color: #fff;
	}
	[data-sidesize="1"] [data-side-framuga], [data-sidesize="2"] [data-side-framuga] {transform: scale(0.503);}
	[data-side-framuga="both"] {transform: scale(.37);}
}
@media screen and (max-width: 340px) {
	.config-nav .title  {font-size: 18px;}
	.btn-step-arrow {width: 40px; height: 40px; font-size: 30px;}
}