canvas { display:block; }

.hint{
    position: fixed;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: #111;
    backdrop-filter: blur(6px);
    max-width: min(520px, calc(100vw - 24px));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    font-size:14px;
    line-height:150%;
    transition: opacity .35s ease, transform .35s ease;
    z-index: 5;
}
.hint.show{ opacity: 1; transform: translateY(0); }
.hint b{ font-weight: 700; }
.hint .muted{ opacity: .75; }
.hint label{
  background: rgba(17,17,17,0.08);
  padding: 0px 5px;
  border-radius: 6px;
  margin: 0 2px;
}
.hint .row{ margin-top: 6px; }
.navi_steps{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 0 96px 0 96px;
}
.navi_steps_header{
	display:none;
}
.navi_steps_holder{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	justify-content: space-evenly;
	align-items: center;
}
.navi_steps{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 92px 6px 12px 6px;
	width: 100px;
	position: fixed;
	top: 0px;
	z-index: 2;
	height: 100vh;
    box-shadow: 0 16px 24px #6c717a33, 0 4px 8px #6c717a33;
}
.navi_steps_bot,
.navi_steps_top{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.navi_steps_bot a,
.navi_steps_top a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #9C9FA4;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    gap: 5px;
}
.recommended_diametr{
    display:flex;
    flex-direction:column;
    gap:10px;
    background: #fff;
    padding: 20px 20px;
}
.btn_reco{
    display:none!important;
}
.btn_reco{
    background-color: #e64815;
    color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    width: max-content;
    font-size: 14px;
} 
.btn_reco:hover{
    opacity:0.7;
}
#conf .main_form_item textarea, 
#conf .main_form_item input{
    border-bottom: none!important;
}
.recommended_diametr_text{
    font-size:16px;
    flex-direction:row;
    align-items:center;
    gap:8px;
    display: flex;
}
.recommended_diametr_text span{
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0px;
    background: #181b21;
    color: #fff;
    width: max-content;
    padding: 7px 10px;
}

.navi_menu_steps{
	display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.navi_menu_steps li{
    width:100%;
}
.navi_menu_step_title{
    color: #9C9FA4;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.navi_menu_steps a{
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
    justify-content: center;
    position:relative;
	color: #9C9FA4;
	font-weight: 600;
	font-size: 14px;
	line-height: 150%;
	gap: 5px;
}
.navi_menu_steps a.active,
.navi_steps_bot a.active,
.navi_steps_top a.active{
	color:#181B21;
}

.navi_menu_steps a.active:after{
    content: "";
    display: none;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: -7px;
    background: #000;
}
.navi_menu_steps a.active:after{
    display:block;
}
.navi_menu_steps a.active svg rect,
.navi_menu_steps a.active svg path,
.navi_steps_bot a.active svg rect,
.navi_steps_bot a.active svg path,
.navi_steps_top a.active svg path{
	stroke:#181B21;
}
.navi_menu_steps a:hover,
.navi_steps_bot a:hover,
.navi_steps_top a:hover{
	color:#e64815;
}
.navi_menu_steps a:hover svg rect,
.navi_menu_steps a:hover svg path,
.navi_steps_bot a:hover svg rect,
.navi_steps_bot a:hover svg path,
.navi_steps_top a:hover svg path{
	stroke:#e64815;
}
#c_visual { width: 100vw; height: 100vh; overflow: hidden; }
.c_wrapper main{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
#c_visual canvas { display: block; width: 100%; height: 100%; }
a .c_tooltip{
  display:none;
  background-color: #181b21;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  left: 200%;
  line-height: 22px;
  padding: 8px 16px;
  position: absolute;
  top: 0%;
  transform: translate(-50%);
  width: 154px;
  z-index: 1;
  text-align:center;
}
a:hover .c_tooltip{
  display:block;
}
.c_holder{
    display: flex;
    flex-direction: column;
    width:100%;
    padding-left: 100px;
}
.c_step_holder{
	display:flex;
	flex-direction:column;
	width:100%;
}
.c_step{
	display:none;
}
.c_step.active{
	display:flex;
	flex-direction:column;
	width:100%;
}
.w_type img,
.p_type img{
	width: 96px;
	height: 96px;
}
.c_form{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 100%;
	margin: 0px auto;
	gap: 20px;
	width: 100%;
	padding: 12px 12px;
}
#c_order{
    max-width:800px;
}
.c_form_left{
	display: flex;
	flex-direction:column;
	width:calc(40% - 10px);
	gap: 20px;
    max-width: 800px;
}
.c_form_right{
	display: flex;
	flex-direction:column;
	width:calc(60% - 10px);
	gap: 20px;
    max-width: 800px;
    margin: 0px auto;
}
.c_wrapper .step_btns{
    margin: 16px auto;
    max-width: 250px;
}
.c_wrapper .step_btns.prelast_step{
	position: fixed;
	bottom: 16px;
	left: 0px;
	max-width: 100%;
	align-items: center;
	justify-content: center;
}
.c_wrapper .step_btns.prelast_step .btn{
	max-width:250px;
}
.c_form_title{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px 12px;
}
.object_list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: 20px;
}
.object_list li{
    width: calc(100% / 4 - 10px);
}
.object_list li a{
    background: #FFFFFF;
    width: 100%;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap:20px;
}
.create_object svg{
	transform:rotate(45deg);
}
.object_list li a:hover{
	background:#181b21;
	color:#fff;
}
.object_list li a:hover svg path{
	stroke: #fff;
}
.c_wrapper .main_form_item textarea, 
.c_wrapper .main_form_item input{
    background: #ffffff;
    padding: 24px 10px 14px 10px;
}
.c_wrapper .main_form_item label{
    padding-left: 10px;
    pointer-events: none;
}
.w_type_selector,
.m_type_selector,
.e_type_selector,
.n_type_selector,
.q_type_selector,
.h_type_selector,
.f_type_selector,
.d_type_selector,
.t_type_selector,
.c_type_selector,
.p_type_selector,
.pp_type_selector{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap:12px;
    position:relative;
}
.w_type_active img,
.m_type_active img,
.e_type_active img,
.n_type_active img,
.q_type_active img,
.h_type_active img,
.f_type_active img,
.d_type_active img,
.t_type_active img,
.c_type_active img,
.p_type_active img,
.pp_type_active img{
	width:96px;
}
.d_type_picker{	
	display:none;
    position: absolute;
    background: #fff;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: #ffffff80;
    top: 0px;
    overflow-y: hidden;
    left: 100%;
    z-index: 2;
    width: 200%;
    flex-wrap: wrap;
}
.w_type_picker,
.m_type_picker,
.e_type_picker,
.n_type_picker,
.f_type_picker,
.q_type_picker,
.h_type_picker,
.t_type_picker,
.c_type_picker,
.p_type_picker,
.pp_type_picker{
	display:none;
    position: absolute;
    background: #fff;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: #ffffff80;
    top: 0px;
    overflow-y: hidden;
    left: 100%;
    width: 100%;
    z-index: 2;
}
.t_type_picker,
.f_type_picker,
.q_type_picker,
.h_type_picker{
    min-width:200px;
}
.w_type_name,
.m_type_name,
.e_type_name,
.n_type_name,
.f_type_name,
.h_type_name,
.q_type_name,
.d_type_name,
.t_type_name,
.c_type_name,
.p_type_name,
.pp_type_name{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	color: #9C9FA4;
	font-weight: 600;
	font-size: 14px;
	line-height: 150%;
	gap: 5px;
	min-width: 130px;
    max-width: 130px;
}
.w_type_block,
.m_type_block,
.e_type_block,
.n_type_block,
.f_type_block,
.q_type_block,
.h_type_block,
.d_type_block,
.t_type_block,
.c_type_block,
.p_type_block,
.pp_type_block{
	position:relative;
}
.w_type_block > a,
.m_type_block > a,
.e_type_block > a,
.n_type_block > a,
.q_type_block > a,
.h_type_block > a,
.f_type_block > a,
.d_type_block > a,
.t_type_block > a,
.c_type_block > a,
.p_type_block > a,
.pp_type_block > a{
    background: #fff;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.w_type_block > a:hover,
.m_type_block > a:hover,
.e_type_block > a:hover,
.n_type_block > a:hover,
.f_type_block > a:hover,
.q_type_block > a:hover,
.h_type_block > a:hover,
.d_type_block > a:hover,
.t_type_block > a:hover,
.c_type_block > a:hover,
.p_type_block > a:hover,
.pp_type_block > a:hover{
	opacity:0.7;
}
.w_type_block.active .w_type_picker,
.m_type_block.active .m_type_picker,
.e_type_block.active .e_type_picker,
.n_type_block.active .n_type_picker,
.q_type_block.active .q_type_picker,
.h_type_block.active .h_type_picker,
.f_type_block.active .f_type_picker,
.t_type_block.active .t_type_picker,
.c_type_block.active .c_type_picker,
.p_type_block.active .p_type_picker,
.pp_type_block.active .pp_type_picker{
	display:flex;
	flex-direction:column;
}
.d_type_block.active .d_type_picker{
	display:flex;
    flex-direction: row;
}
.d_type_picker li{
	width:calc(100% / 2);
}
.w_type_picker li,
.m_type_picker li,
.e_type_picker li,
.n_type_picker li,
.f_type_picker li,
.q_type_picker li,
.h_type_picker li,
.t_type_picker li,
.p_type_picker li,
.pp_type_picker li,
.c_type_picker li{
	width:100%;
}
.w_type_picker li a,
.m_type_picker li a,
.e_type_picker li a,
.n_type_picker li a,
.d_type_picker li a,
.c_type_picker li a,
.p_type_picker li a,
.pp_type_picker li a{
	font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    width:100%;
    display:flex;
    flex-direction:column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.t_type_picker li a,
.f_type_picker li a,
.q_type_picker li a,
.h_type_picker li a{
	font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    width:100%;
    display:flex;
    flex-direction:row;
    gap:6px;
    text-align: left;
    align-items: center;
    justify-content: flex-start;
}
.w_type_picker li a:hover,
.m_type_picker li a:hover,
.e_type_picker li a:hover,
.n_type_picker li a:hover,
.f_type_picker li a:hover,
.q_type_picker li a:hover,
.h_type_picker li a:hover,
.d_type_picker li a:hover,
.t_type_picker li a:hover,
.c_type_picker li a:hover,
.p_type_picker li a:hover,
.pp_type_picker li a:hover{
	background:#fff;
}
.w_type_active_name,
.m_type_active_name,
.e_type_active_name,
.n_type_active_name,
.f_type_active_name,
.q_type_active_name,
.h_type_active_name,
.d_type_active_name,
.t_type_active_name,
.c_type_active_name,
.p_type_active_name,
.pp_type_active_name{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #181b21;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    gap: 5px;
}
.main_form_item label.param_i{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:6px;
}
.main_form_item label.param_i span{
    position: relative;
    background: #181b21;
    color: #fff;
    padding: 2px 10px;
}
#c_order{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.configurations_scheme{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}
.configurations_scheme .tpl_configurations_c{
    display: flex;
    flex-direction: row;
    width: calc(100% / 4);
    border: 1px solid #ddd;
    margin: 0px;
}
.hidden_data{
    display:none;
}
.f_type_p{
    display:none;
}
.f_type_p.active{
    display:flex;
    flex-direction:column;
    width:100%;
}
.step_i_nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0px;
    background: #fff;
    width: max-content;
    padding: 5px 5px;
    height: 50px;
    margin:5px auto;
}
.step_i_nav a{
    display:flex;
    flex-direction:column;
    padding:10px 15px;
}
.step_i_nav a.active{
    background-color: #e64815;
    color: #fff;
}
.vl_switch_h{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.vl_switch{
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 44px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #D9DADC;
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 #fff;
    cursor: pointer;
}
.vl_switch_h label {
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
    color: #9C9FA4;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    min-width: 130px;
    max-width: 130px;
}
input.vl_switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    background: transparent;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}
input.vl_switch:checked:after {
    left: 20px;
    box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
}
input.vl_switch:checked {
    box-shadow: inset 20px 0 0 0 #e64815;
    border-color: #e64815;
}
.order_step_title_conf{
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    color: #181b21;
    padding: 20px 20px;
    background: #fff;
    width: max-content;
}
.order_step_title_conf span{
    align-items: center;
    background: #e64815;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    height: 24px;
    justify-content: center;
    line-height: 20px;
    min-width: 22px;
    text-align: center;
}
@media (max-width: 1920px) {

}
@media (max-width: 1600px) {

}
@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 575px) {

}
@media (max-width: 420px) {

}
@media (max-width: 340px) {

}