/*
* Конструктор апаратів
*/
html.over, 
body.over {
    overflow: hidden;
}
.top_title {
	position: relative;
}
.button_open_konstruktor {
    position: absolute;
    top: 0;
    right: 0;
    border: 2px solid var(--theme-red);
    padding: 7px 20px 7px 20px;
    border-radius: 5px;
    font-size: 16px;
    color: var(--theme-red);
    transition: .3s;
	cursor: pointer;
}
.button_open_konstruktor:hover {
	background: var(--theme-red);
	color: #fff;
}
.overlay_konstruktor {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ccc;
	opacity: 0;
	z-index: -1;
	/* transition: .3s; */
}
.overlay_konstruktor.show {
	opacity: 1;
	z-index: 100;
}
.konstruktor_wrap_modal {
	position: fixed;
	top: 30px;
	left: 50%;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	background: #1D1D1B;
	width: 90%;
	height: calc(100% - 60px);
	opacity: 0;
	z-index: -1;
	/* transition: .3s; */
	border: 4px solid #fff;
	border-radius: 30px;
	overflow: hidden;
}
.konstruktor_wrap_modal.open {
	opacity: 1;
	z-index: 110;
}
.konstruktor_page {
    background: #333;
}
.wrap_konstruktor {
    height: 100%;
    font-family: 'Circe';
    font-optical-sizing: auto;
    overflow: hidden;
}
.wrap_konstruktor .start_screen {
    width: 100%;
    height: 100%;
    background: url(https://paton2.redsky.agency/image/konstruktor/bg_screen_1.jpg);
    display: flex;
    align-items: center;
    padding-left: 50px;
    display: none;
    background-position: bottom right;
    background-size: cover;
}
.wrap_konstruktor .start_screen .text_block {
    
}
.wrap_konstruktor .start_screen .text_block .text1 {
    font-size: 22px;
    color: #fff;
}
.wrap_konstruktor .start_screen .text_block .text2 {
    font-size: 41px;
    color: #fff;
    line-height: 1.3;
    text-transform: uppercase;
}
.wrap_konstruktor .start_screen .text_block .text2 span {
    color: var(--theme-red);
    font-weight: 900;
}
.wrap_konstruktor .start_screen .text_block .button_wrap {
    display: flex;
    margin-top: 15px;
}
.wrap_konstruktor .start_screen .text_block .button_wrap .button_start {
    width: 160px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 30px;
    background: var(--theme-red);
    border-radius: 5px;
    cursor: pointer;
}
.wrap_konstruktor .start_screen .text_block .button_wrap img {
    width: 41px;
    height: 37px;
}
.wrap_konstruktor .start_screen .text_block .text3 {
    position: relative;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
    color: #fff;
    text-transform: none;
    width: 426px;
    margin-top: 30px;
}
.wrap_konstruktor .start_screen .text_block .text3 ul {
    margin-top: 10px;
}
.wrap_konstruktor .start_screen .text_block .text3 ul li {
    text-transform: none;
    margin-bottom: 10px;
}
.wrap_konstruktor .start_screen .text_block .text3 ul li:last-child {
    margin-bottom: 0;
}
.wrap_konstruktor .start_screen .text_block .text3 .bottom_text {
    font-weight: 600;
    text-transform: none;
    margin-top: 20px;
}
.wrap_konstruktor .start_screen .text_block .text3:before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 157px;
    height: 1px;
    background: #fff;
}

.wrap_konstruktor .working_zone {
    display: none;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    /* padding-left: 50px; */
}
.wrap_konstruktor .active_screen {
    display: flex;
}
/* Radio style */
#konstruktor .radio {
	margin-bottom: 10px;
}

#konstruktor .radio input[type=radio] {
	display: none;
}

#konstruktor .radio label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 0;
	line-height: 1;
	user-select: none;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

#konstruktor .radio .for_nice_look:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	/* bottom: 4px; */
	background: transparent;
	border-radius: 50%;
	border: 1px solid #ffffff;
	top: 1px;
}

#konstruktor .radio input[type=radio]:checked ~ .for_nice_look:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: var(--theme-red);
    border-radius: 50%;
    top: 4px;
    left: 3px;
    z-index: 1;
}

#konstruktor .radio .for_nice_look:after {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	position: absolute;
	left: 0;
	top: 1px;
}

/* Checked */
#konstruktor .radio input[type=radio]:checked ~ .for_nice_look:before {
	background: transparent;
	border-radius: 50%;
	border: 1px solid #ffffff;
	z-index: 1;
}

/* Hover */
#konstruktor .radio .for_nice_look:hover:before {
	filter: brightness(120%);
}

/* Disabled */
#konstruktor .radio input[type=radio]:disabled ~ .for_nice_look:before {
	filter: grayscale(100%);
}

.wrap_konstruktor .left_part {
    width: 50%;
    height: 100%;
    background: #333;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1;
    position: relative;
    padding: 50px 50px 50px 40px;
}
.wrap_konstruktor .left_part .form {
    width: 445px;
    padding-left: 50px;
}
.wrap_konstruktor .left_part .title_svarochnik {
    font-size: 28px;
    color: #fff;
    font-weight: 900;
    position: relative;
	line-height: 1;
	margin-bottom: 40px;
}
.wrap_konstruktor .left_part .title_svarochnik:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2.2px;
	background: #fff;
	left: 0;
	bottom: -20px;
}
.wrap_konstruktor .left_part .input_range {
    margin-bottom: 30px;
    border-bottom: 2.2px solid #fff;
    padding-bottom: 30px;
}
.wrap_konstruktor .left_part .title_block {
    display: flex;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
}
.wrap_konstruktor #tok_slider {
	margin-top: 50px;
}
.wrap_konstruktor .right_part {
    width: 50%;
    padding-left: 0;
    height: 100%;
    position: relative;
}
.wrap_konstruktor .right_part img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    transition: .3s;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    draggable: false;
}
.wrap_konstruktor .right_part .wrap_prod_images {
    position: absolute;
    bottom: 20px;
    width: 100%;
    max-width: 1430px;
}
.wrap_konstruktor .right_part .wrap_prod_images .images {
    gap: 10px;
    list-style: none;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    flex-wrap: nowrap;
    overflow-x: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 20px 0 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.wrap_konstruktor .right_part .wrap_prod_images .images::-webkit-scrollbar {
    display: none;
}
.wrap_konstruktor .right_part .wrap_prod_images .left_arrow {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(https://paton.ua/catalog/view/javascript/jquery/swiper/css/left-arrow.svg);
    border-radius: 50%;
    background-color: var(--theme-red);
    background-size: 50%;
    background-position: 45% 50%;
    background-repeat: no-repeat;
    top: 50%;
    left: 5%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.wrap_konstruktor .right_part .wrap_prod_images .right_arrow {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(https://paton.ua/catalog/view/javascript/jquery/swiper/css/right-arrow.svg);
    border-radius: 50%;
    background-color: var(--theme-red);
    background-size: 50%;
    background-position: 60% 50%;
    background-repeat: no-repeat;
    top: 50%;
    right: 2%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    cursor: pointer;
}
.wrap_konstruktor .right_part .wrap_prod_images .item {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    white-space: nowrap;
    min-width: 100px;
    min-height: 100px;
}
.wrap_konstruktor .right_part .wrap_prod_images .item img {
    width: 100%;
    height: auto;
}

.wrap_konstruktor #tok {
	width: 44px;
	height: 24px;
	top: 50%;
	margin-top: -46px;
	text-align: center;
	line-height: 24px;
	outline: none;
	position: relative;
	font-size: 22px;
	font-weight: 900;
	font-family: 'Circe';
	border: none;
	color: #fff;
	background: transparent;
}
.wrap_konstruktor #tok:after {
	content: '';
	position: absolute;
	width: 37px;
	height: 37px;
	background: url(https://paton2.redsky.agency/image/konstruktor/input_slider_range.svg);
	background-size: cover;
	background-position: center;
	left: 0;
	bottom: -40px;
}

.wrap_konstruktor .left_part .selected_values {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    opacity: .5;
    margin-top: 50px;
    display: flex;
    position: absolute;
    bottom: 50px;
}
.wrap_konstruktor .left_part .steps {
	display: flex;
	width: 70px;
	justify-content: space-between;
	margin: 0 auto 15px auto;
}
.wrap_konstruktor .left_part .steps .step {
	width: 14px;
	height: 14px;
	display: flex;
	background: rgb(255 255 255 / 38%);
	border-radius: 50%;
	position: relative;
	transition: .3s;
}
.wrap_konstruktor .left_part .steps .step.active,
.wrap_konstruktor .left_part .steps .step.used {
	background: var(--theme-red);
}
.wrap_konstruktor .left_part .steps .step.active:after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #fff;
	background: transparent;
	top: -3px;
	left: -3px;
	transition: .3s;
}
.wrap_konstruktor .wrap_nav_konst {
    position: absolute;
    bottom: 40px;
    width: calc(100% - 100px);
}
.wrap_konstruktor .next_button {
    width: 95px;
    height: 41px;
    display: flex;
    background: var(--theme-red);
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.wrap_konstruktor .next_button.to_order {
    font-size: 14px;
}
/* .wrap_konstruktor .working_zone .wrap_nav_konst .next_button {
    top: 0;
} */
.wrap_konstruktor .under_step1 {
    
}
.wrap_konstruktor .under_step2 {
    display: none;
}
.wrap_konstruktor .step_wrap {
    transition: .3s;
    transform: translateX(10px);
}
.wrap_konstruktor .base_stage {
    transition: .3s;
    transform: translateX(10px);
}
.wrap_konstruktor .step_wrap.active_step {
    display: flex;
    transform: translateX(0);
    flex-direction: column;
}
.wrap_konstruktor .base_stage.active_step {
    display: flex;
    transform: translateX(0);
    flex-direction: column;
}
.wrap_konstruktor .dis {
    pointer-events: none;
    touch-action: none;
    opacity: .3;
}
.wrap_konstruktor .dis .radio {
    opacity: .3;
}
.wrap_palnuk label.dis {
    display: none!important;
}
.wrap_konstruktor .radio_wrap {
    margin-bottom: 30px;
}

[data-step="2"],
[data-step="3"],
[data-step="4"] {
    display: none;
}

.wrap_konstruktor .summary_block {
    display: none;
    color: #fff;
}
.wrap_konstruktor .summary_block.show_summary {
    display: flex;
    flex-direction: column;
}
.error_valid {
    color: var(--theme-red);
}

.wrap_scenario_1,
.wrap_scenario_2,
.wrap_scenario_3,
.wrap_scenario_4,
.wrap_scenario_5 {
    display: none;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
}
.wrap_scenario_1.working,
.wrap_scenario_2.working,
.wrap_scenario_3.working,
.wrap_scenario_4.working,
.wrap_scenario_5.working {
    display: flex;
}
.wrap_konstruktor .wrap_nav_konst .next_button.to_order {
    width: 170px;
    /* position: relative; */
    /* top: unset; */
    /* right: unset; */
    /* margin: 30px auto 0 auto; */
}
.wrap_konstruktor .back_button {
    width: 95px;
    height: 41px;
    display: flex;
    background: rgb(255 255 255 / 75%);
    color: var(--theme-dark);
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    left: 0;
    bottom: 0;
}
.wrap_konstruktor .left_part .button_group {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.wrap_konstruktor .finish_screen .wrap_nav_konst {

}
.wrap_konstruktor .finish_screen .wrap_nav_konst .back_button {
    /* width: 250px; */
    /* position: relative; */
    /* top: unset; */
    /* left: unset; */
    /* margin: 30px auto 0 auto; */
    background: rgb(255 255 255 / 70%);
    /* color: #fff; */
    /* border: 1px solid #fff; */
    font-weight: 500;
    text-transform: unset;
    /* text-decoration: underline; */
    top: 0;
}
.wrap_konstruktor .summary_block span {
    /* display: block; */
    font-weight: 700;
    font-size: 16px;
    color: var(--theme-red);
    /* margin-left: 10px; */
}
.wrap_konstruktor .summary_block span.price {
	color: #ccc;
	font-size: 13px;
	font-weight: 300;
}
.wrap_konstruktor .wrap_scenario_2 .back_button {
    left: 50px;
}
.wrap_konstruktor .wrap_scenario_2 .next_button {
    right: 40px;
}
#konstruktor .wrap_palnuk .radio label {
    line-height: 1.2;
}


.wrap_konstruktor .wrap_scenario_2 .steps,
.wrap_konstruktor .wrap_scenario_3 .steps,
.wrap_konstruktor .wrap_scenario_4 .steps,
.wrap_konstruktor .wrap_scenario_5 .steps {
    width: 100px;
}
.wrap_konstruktor .radio_wrap.has_error .title_block {
    color: var(--theme-red);
    position: relative;
}
.wrap_konstruktor .radio_wrap.has_error .error_valid {
    font-size: 10px;
    text-transform: none;
    margin-left: 20px;
}
.wrap_konstruktor .left_part .category-products__card {
    height: auto;
    border: none;
}
.wrap_konstruktor .wrap_scenario_5.working.finish_screen .back_button {
    top: 0;
    width: 155px;
    padding-left: 10px;
}
.wrap_konstruktor .wrap_scenario_5.working.finish_screen .next_button {
    width: 155px;
    line-height: 1;
    padding-left: 10px;
    font-size: 14px;
    top: 0;
}
.wrap_konstruktor .wrap_scenario_2.working .next_button,
.wrap_konstruktor .wrap_scenario_3.working .next_button,
.wrap_konstruktor .wrap_scenario_4.working .next_button,
.wrap_konstruktor .wrap_scenario_5.working .next_button {
    top: 40px;
}
.field_for_next_steps {
    max-height: 490px;
    height: 100%;
    overflow-y: auto;
    margin-bottom: 100px;
}

.field_for_next_steps::-webkit-scrollbar {
    width: 6px; /* Ширина скролбара */
}

.field_for_next_steps::-webkit-scrollbar-track {
    background: #f1f1f1; /* Колір фону */
    border-radius: 10px; /* Закруглення */
}

.field_for_next_steps::-webkit-scrollbar-thumb {
    background: var(--theme-red);
    border-radius: 10px;
}

.wrap_prod_images {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.item {
    flex: 0 0 auto;
}

.item img {
    display: block;
}
.text_description_euro,
.text_description_standart,
.text_description_pro,
.text_description_power {
    display: none;
    color: #fff;
    font-size: 14px;
}
.text_description_euro strong,
.text_description_standart strong,
.text_description_pro strong,
.text_description_power strong {
    /* color: var(--theme-red); */
}
@media (max-width: 1024px) {
    .wrap_konstruktor .left_part .form {
        width: calc(100% - 30px);
    }
}