/* Start:/bitrix/templates/bs_beauty_s9/components/bitrix/main.include/kviz/style.css?177494577817804*/
.kviz_wrapper {min-height: 200px;}
.kviz_container {border: 1px solid #DCDCDC;  border-radius: 12px; overflow: hidden;}
.kviz_container h2 {margin-top: 0;}

.kviz_container .item_shadow {position: absolute; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.5)}
.kviz_container .item_shadow.shadow_light {background-color: rgba(255,255,255,0.7)}

.kviz_container .step .question {font-weight: 600; margin-bottom: 10px; font-size: 20px;}
.kviz_container .step .question_header {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #DCDCDC;}

.kviz_container .controls_panel {background-color: #F4F7FB; padding: 30px 40px 50px 40px;}

.kviz_container .choice_comment {margin-bottom: 10px; display: inline-block; font-size: 14px;}
.kviz_container .answer_anons {line-height: 1.1; font-size: 15px; opacity: 0.8;}
.kviz_container input[type="text"]{border: 1px solid #DCDCDC!important;}
.kviz_container input[type="text"]:focus {border: 1px solid #C6C6C6!important;}

.kviz_wrapper .disklamer {margin-top: 5px; font-size: 13px; text-align: center;}
.kviz_wrapper .kviz_informer {text-align: center; color: #FFF; 
background-color: var(--OPTION_BASE_COLOR); 
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 10px 20px 30px 10px;
margin-bottom: -20px;
}

/*Старт*/
.kviz_container .step_start {background-color: #FFF}
.kviz_container .step_start .info_container {height: 100%;}
.kviz_container .step_start .info_container .content {padding: 40px; z-index: 2; position: relative;}
.kviz_container .step_start .img_container {flex: 0 0 30%; max-width: 30%;}
.kviz_container .step_start .img_container .img {width: 100%; height: 100%;}
.kviz_container .step_start .img_container .img img {width: 100%; height: 100%; object-fit: cover;}
.kviz_container .step_start .info_container {background-repeat: no-repeat; background-size: cover; background-position: center;}

/*Шаги*/
.kviz_container .step {padding: 40px; background-color: #FFF;}

/*Комментарий блок справа*/
.kviz_container .step .col_right {flex: 0 0 30%; padding: 30px; background-color: #F4F7FB; border-radius: 12px; margin-left: 20px; min-width: 300px;}
.kviz_container .step .col_right h2, .kviz_container .step .col_right h3 {margin: 0; font-size: 18px;}
.kviz_container .step .col_right .img {width:100%; margin-bottom: 10px;}
.kviz_container .step .col_right .img img {max-width: 100%; width: 175px;}
.kviz_container .step .col_right .text {
    background-color: #FFF;
    padding: 15px; border-radius: 6px;
}
.kviz_container .step .col_right .text.has_sign {margin-top: 10px; position: relative;}
.kviz_container .step .col_right .text.has_sign:before {
    content: "";
    display: inline-block;
    border: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    position: absolute;
    top: -14px;
    left: 20px;
}

/*Прогресс*/
.kviz_container .progress_container {margin-top: 15px;}
.kviz_container .progress_container .step_info {font-size:15px; color: #999999}
.kviz_container .progress {position: relative;}
.kviz_container .progress .value {position: absolute; font-weight: 600;  top: 0; margin-top: 22px;  width: 30px; text-align: center; margin-left: -15px; left: 0;}
.kviz_container .progress.first_step .value {margin-left: 0;}
.kviz_container .progress.last_step .value {margin-left: -30px;}
.kviz_container .progress .value:before {content: ""; display: inline-block; position: absolute; border: none; background: var(--OPTION_BASE_COLOR); border-radius: 10px; left: 0; top: -21px; width: 30px; height: 16px;}
.kviz_container .progress .procent {font-size: 0.8rem; font-weight: 400; margin-top: 4px;}
.kviz_container .progress .procent .indicator {background-color: #e7e7e7; padding: 1px; height: 8px; position: relative; margin-top: 5px; border-radius: 4px;}
.kviz_container .progress .procent .indicator .val {
    background-image: repeating-linear-gradient(-45deg, var(--OPTION_BASE_COLOR_L), var(--OPTION_BASE_COLOR_L) 0.5rem, var(--OPTION_BASE_COLOR_D) 0.5rem, var(--OPTION_BASE_COLOR_D) 1rem);
    background-size: 200% 200%;
    animation: gradient_lines 15s linear infinite; 
    border-radius: 5px; overflow: hidden; width: 0; height: 6px;
}
.kviz_container .progress.final .indicator .val {background-image: none; background-color: #00cc66;}
.kviz_container .progress.final .value::before {background: #00a43e;}

@keyframes gradient_lines {100% {background-position: 100% 100%;}}
 
 
.kviz_container .start_button {animation: glowing 1300ms infinite;}
@keyframes glowing {
    0% { background-color: var(--OPTION_BASE_COLOR); box-shadow: 0 0 5px var(--OPTION_BASE_COLOR_L4); }
    50% {background-color: var(--OPTION_BASE_COLOR_L2); box-shadow: 0 0 20px var(--OPTION_BASE_COLOR); }
    100% {color: #FFF; background-color: var(--OPTION_BASE_COLOR_D); box-shadow: 0 0 5px #var(--OPTION_BASE_COLOR_D); }
}

/*Навигация*/
.kviz_container .navigation .btn {padding: 10px 15px 9px; margin-left: 10px;}
.kviz_container .navigation .btn svg {vertical-align: middle; margin-top: -2px;}


/*Радио-кнопка*/
.input_radio input[type=radio] {display: none;}
.input_radio label {position: relative; padding-left: 40px; font-size: 20px; line-height: 30px; margin-bottom: 10px; display: inline-block; cursor: pointer; caret-color: transparent;}
.input_radio label:before {content: ""; display: inline-block; left: 0; top: 2px; position: absolute; width: 30px; height: 30px; border-radius: 15px; border: 2px solid #DCDCDC;}
.input_radio label:hover:before {border: 2px solid #C6C6C6;}

.input_radio input[type=radio]:checked + label:before {border: 2px solid var(--OPTION_BASE_COLOR);}
.input_radio input[type=radio]:checked + label:after {content: ""; display: inline-block; position: absolute; border: none; background: var(--OPTION_BASE_COLOR); border-radius: 10px; left: 7px; top: 9px; width: 16px; height: 16px;}

/*Чекбокс*/
.input_checkbox input[type=checkbox] {display: none;}
.input_checkbox label {position: relative; padding-left: 40px; font-size: 20px; line-height: 30px; margin-bottom: 10px; display: inline-block; cursor: pointer; caret-color: transparent;}
.input_checkbox label:before {content: ""; display: inline-block; left: 0; top: 2px; position: absolute; width: 30px; height: 30px; border-radius: 6px; border: 2px solid #DCDCDC;}
.input_checkbox label:hover:before {border: 2px solid #C6C6C6;}

.input_checkbox input[type=checkbox]:checked + label:before {border: 2px solid var(--OPTION_BASE_COLOR); background-color: var(--OPTION_BASE_COLOR);}
.input_checkbox input[type=checkbox]:checked + label:after {font-family: "FontAwesome"; content: "\f00c"; font-size: 14px; color: #FFFFFF; text-align: center; line-height: 15px; position: absolute; left: 8px; top: 9px;}


/*Радио-кнопка, чекбокс [с картинкой]*/
.input_choice_image .item {border: 1px solid #DCDCDC; padding: 20px; margin-bottom: 10px; border-radius: 6px; font-size: 20px; cursor: pointer; caret-color: transparent; position: relative;}
.input_choice_image .item .img {margin-right: 20px; width: 150px; flex: 0 0 150px;}
.input_choice_image .item .img img {max-width: 100%;}
.input_choice_image input {display: none;}
.input_choice_image .item:hover {border: 1px solid #C6C6C6;}
.input_choice_image .item.active {border: 1px solid var(--OPTION_BASE_COLOR);}
.input_choice_image .item.active:after {font-family: "FontAwesome"; content: "\f00c"; font-size: 30px; color: var(--OPTION_BASE_COLOR); text-align: center; line-height: 15px; position: absolute; right: 10px; top: 10px;}

.input_choice_image {display: flex; flex-wrap: wrap; margin-right: -10px;}
.input_choice_image .item_container {flex: 0 0 50%; padding: 0 10px 10px 0; min-width: 400px;}

/*Дата*/
.kviz_container .ui-datepicker {margin: 0!important; font-size: 1.2em;}

/*Информационный блок*/
.custom_inform .img {margin-bottom: 10px;}
.custom_inform .img img {max-width: 100%;}


/*Оформление ответов css классы*/
.kviz_container .step.css_w100 .item_container {flex: 0 0 100%;}

.kviz_container .step.css_w50 .custom_input {display: flex; flex-wrap: wrap;}
.kviz_container .step.css_w50 .item  {flex: 0 0 50%;}

.kviz_container .step.tile_with_bg .item_container {height: 200px; overflow: hidden; flex: 0 0 425px; border-radius: 6px; margin-bottom: 10px;}
.kviz_container .step.tile_with_bg .item_container .item {padding: 0;}
.kviz_container .step.tile_with_bg .item_container .item .img {width: 100%; flex: 0 0 100%; height: 200px;}
.kviz_container .step.tile_with_bg .item_container .item .img img {width: 100%; height: 100%; object-fit: cover;}
.kviz_container .step.tile_with_bg .item_container .item .option_descr {position: absolute; left: 0; bottom: 0; background-color: var(--OPTION_BASE_COLOR); width: 100%; padding: 10px; color: #FFF;}



/*Летающая кнопка*/
.kviz_fly_button {
    width: 350px; height: 200px; position: fixed; bottom: 10px; left: 10px; z-index: 100; overflow: hidden; border-radius: 10px;
    box-shadow: 0 15px 10px -15px rgba(0, 0, 0, 0.3), 1px 2px 20px rgba(0, 0, 0, 0.3);
}
.kviz_fly_button .info_container {border-radius: 10px;}
.kviz_fly_button .info_container .content {padding: 15px; z-index: 2; position: relative;}
.kviz_fly_button .img_container {flex: 0 0 100%; width: 100%;}
.kviz_fly_button .img_container .img {width: 100%;}
.kviz_fly_button .img_container .img img {max-height: 170px; width: 100%; height: 100%; object-fit: cover; display: block;}
.kviz_fly_button .info_container {background-repeat: no-repeat; background-size: cover; background-position: center; height: 100%;}
.kviz_fly_button .item_shadow {position: absolute; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.5)}
.kviz_fly_button .item_shadow.shadow_light {background-color: rgba(255,255,255,0.7)}

.kviz_fly_button.css_text_light_mobile {color: #FFF;}
.kviz_fly_button h2 {font-size: 1.4rem;}

.kviz_fly_button .close {position: absolute; right: 10px; top: 10px;}
.kviz_fly_button .close svg {opacity: 0.8;}
.kviz_fly_button .close:hover svg {opacity: 1}
.kviz_fly_button .close:hover svg path {fill: #FFF}
.kviz_fly_button .close:hover svg path:first-child {fill: var(--OPTION_BASE_COLOR)}

@media screen and (min-width: 767px)
{
    .kviz_fly_button.hover {height: auto;}
    .kviz_fly_button.hover .img_container {display: block!important;}
    .kviz_fly_button.hover .info_container {background-color: #FFF; background-image: none!important; border-top-right-radius: 0; border-top-left-radius: 0;}
    .kviz_fly_button.hover .info_container .kviz_anons {display: block!important;}
    .kviz_fly_button.css_text_light_mobile.hover .info_container {background-color: #2b2b2b}
}


/*--------------------------popup режим--------------------------*/
.kviz_popup_wrapper {
    padding: 10px 30px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: transparent;
    overflow: auto;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}
.kviz_popup_wrapper .main_content {margin-bottom: 30px;}
.kviz_popup_wrapper .main_content .col1 {padding-right: 50px;}
.kviz_popup_wrapper .main_content .col2 {flex: 0 0 250px;}

.kviz_popup_wrapper .logo {margin-bottom: 20px;}
.kviz_popup_wrapper .logo img {max-width: 80%; display: block; padding: 10px 0; max-height: 100px;}

.kviz_popup_wrapper .contacts > div {margin-bottom: 20px;}
.kviz_popup_wrapper .contacts a {text-decoration: none;}
.kviz_popup_wrapper .contacts .address {font-weight: 600;}
.kviz_popup_wrapper .contacts .callback a {width: 100%;}
.kviz_popup_wrapper .contacts .social {margin-left: -11px;}
.kviz_popup_wrapper .contacts .social a {color: var(--OPTION_BASE_COLOR)!important;}
.kviz_popup_wrapper .contacts .social a:hover {color: var(--TEXT_COLOR)!important;}
.kviz_popup_wrapper .contacts .buttons > div {margin: 15px 0;}
.kviz_popup_wrapper .contacts .buttons a.active {text-decoration: underline;}
.kviz_popup_wrapper .hr {border-top: 1px solid rgba(255,255,255,0.25);}

.kviz_popup_wrapper > .d-flex {max-height: 100vh}
.kviz_popup_wrapper > div > div > .content_container {
    background-color: transparent; padding: 10px 30px;
}
.kviz_popup_wrapper > div > div > .content_container::after {
    background-color: rgba(232, 232, 232, 0.65);
    position: absolute;
    content: "";
    inset: 0px;
    border-radius: 8px;
    backdrop-filter: blur(32px);
    pointer-events: none;
    z-index: -1;
    transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-property: background-color;
}


.kviz_popup_wrapper.popup_page .close-x {display: block!important;}
.kviz_popup_wrapper .close-x {
    width: 30px; height: 30px; 
    display: inline-block; 
    cursor: pointer;
    text-decoration: none;
    color: var(--TEXT_COLOR);
    position: absolute;
    right: 20px;
    top: 20px;
}
.kviz_popup_wrapper .close-x svg path {stroke: var(--OPTION_BASE_COLOR);}
.kviz_popup_wrapper .close-x svg path:first-child {stroke: var(--OPTION_BASE_COLOR);}
.kviz_popup_wrapper .close-x:hover svg path {stroke: #FFF;}
.kviz_popup_wrapper .close-x:hover svg path:first-child {stroke: var(--OPTION_BASE_COLOR); fill: var(--OPTION_BASE_COLOR);}


.kviz_popup_wrapper .kviz_container {border: 1px solid rgba(255,255,255,0.25);}
.kviz_popup_wrapper .kviz_wrapper {min-height: 350px; border-radius: 12px;}
.kviz_popup_wrapper .kviz_container {height: 100%;}
.kviz_popup_wrapper .step_start {height: 350px;}  
.kviz_popup_wrapper .step_start > div {height: 100%;}  
.kviz_popup_wrapper .step_start .img_container {flex: 0 0 40%; max-width: 40%;}
/*--------------------------popup режим--------------------------*/


/*Темная тема*/
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .kviz_container {border: 1px solid var(--THEME_DARK_LINE_COLOR);}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .step_start {background-color: var(--THEME_DARK_BG_COLOR);}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .step {background-color: var(--THEME_DARK_BG_COLOR);}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .controls_panel {background-color: var(--THEME_DARK_BG_ITEM_COLOR);}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .step .col_right {background-color: var(--THEME_DARK_BG_ITEM_COLOR);}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .step .col_right .text {color: var(--TEXT_COLOR)}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .step .question_header {border-bottom: 1px solid var(--THEME_DARK_LINE_COLOR);}
body.SITE_THEME_DARK .kviz_wrapper.view_page_block .progress .procent .indicator {background-color: var(--THEME_DARK_LINE_COLOR)}


body.SITE_THEME_DARK .kviz_wrapper.view_popup {color: var(--TEXT_COLOR)}
body.SITE_THEME_DARK .kviz_popup_wrapper .main_content, body.SITE_THEME_DARK .kviz_popup_wrapper .main_content a {color: var(--TEXT_COLOR)}

@media screen and (min-width: 767px)
{
    .step_start .info_container {background-image: none!important;}
}


@media screen and (max-width: 1348px)
{

}


/*.col-xl-  (>= 1200px)*/
@media screen and (min-width: 1200px)
{
       
}
/*.col-lg-  (>= 992px)*/
@media screen and (max-width: 1200px)
{
    .kviz_popup_wrapper {height: auto;}
    .kviz_popup_wrapper > .d-flex {max-height: none;}
    
     
}
/*.col-md-  (>= 768px)*/
@media screen and (max-width: 991px)
{
    .kviz_popup_wrapper .kviz_container {padding: 0!important;}
    .kviz_popup_wrapper .kviz_wrapper {min-height: 200px;}
    .kviz_popup_wrapper div > div > .content_container {padding: 10px;}
    .kviz_popup_wrapper .main_content {flex-wrap: wrap;}     
    .kviz_popup_wrapper .main_content .col1 {flex: 0 0 100%; padding: 20px;}
    .kviz_popup_wrapper .main_content .col2 {flex: 0 0 100%; padding: 20px;}
    
    .kviz_popup_wrapper .step_start {height: 250px;}
    .kviz_popup_wrapper .step_start .info_container .content {padding: 20px;}
    
    
    .kviz_container .step.css_w50 .custom_input {display: flex; flex-wrap: wrap;}
    .kviz_container .step.css_w50 .item  {flex: 0 0 100%;}
    
    
}
/*.col-sm-  (>= 576px)*/
@media screen and (max-width: 767px)
{
    .step_start .img_container {display: none;}
    .kviz_container .controls_panel {padding: 20px 20px 40px 20px;}
    .kviz_container .progress_container {margin-top: 0px;}
    
    
    .kviz_container .step_start .item_shadow {display: block !important;}
    .kviz_wrapper.css_text_light_mobile .step_start {color: #FFF;}
    
    .kviz_container .step {padding: 25px;}
    .kviz_container .step .col_container {-ms-flex-wrap: wrap !important; flex-wrap: wrap !important;}
    .kviz_container .step .col_left {flex: 0 0 100%;}
    .kviz_container .step .col_right {flex: 0 0 100%; margin: 20px 0 0 0;}
    
    .kviz_container .step .col_right.question_descr_block .content {display: flex;}
    .kviz_container .step .col_right {padding: 20px;}
    .kviz_container .step .col_right .img {width: 30%; flex: 0 0 30%; margin: 0 15px 0 0 }
    

    .kviz_fly_button {left: 50%; margin-left: -125px; width: 250px; height: 130px; cursor: pointer;}
    .kviz_fly_button .btn {padding: 8px 20px 10px; font-size: 0.85rem;}
    .kviz_fly_button h2 {font-size: 1rem;}
    .kviz_fly_button .air.p30 {display: none;}
}
/*.col-*/
@media screen and (max-width: 575px)
{
    .kviz_container .step .col_right.question_descr_block {font-size: 14px;}   
    
}

/* End */


/* Start:/bitrix/templates/bs_beauty_s9/components/brainsite/iblock.element.add.form/kviz_form/style.css?1774945778102*/
.ajax_form .btn_container {text-align: center;}
.ajax_form .form_result {color: #cc0000 !important}

/* End */
/* /bitrix/templates/bs_beauty_s9/components/bitrix/main.include/kviz/style.css?177494577817804 */
/* /bitrix/templates/bs_beauty_s9/components/brainsite/iblock.element.add.form/kviz_form/style.css?1774945778102 */