.website_publish_step_1, .website_publish_step_2,
    .website_publish_step_rules, .progress_gen_variations_preview,
        .website_publish_variation_rule {
    position: absolute;
    background-color: #f9f9fc;
    left: 0;
    top: -2000vh;
    opacity: 0;
    z-index: 99;
    width: 100%;
    transition: top .3s,opacity .3s;
}

.website_publish_step_1.open, .website_publish_step_2.open,
    .website_publish_step_rules.open, .progress_gen_variations_preview.open,
        .website_publish_variation_rule.open{
     top: 0;
     opacity: 1;
}

.website_publish__close {
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 30px;
}

.website_publish__close > svg, path{
    transition: all .3s;
}

.website_publish__close > svg:hover {
    transform: rotate(90deg);
}

.website_publish__close > svg:hover > path {
    fill: #0d1722;
}

.website_publish_step_1_content .progres_bar, .website_publish_step_2_content .progres_bar,
    .website_publish_step_rules_content .progres_bar, .website_publish_variation_rule .progres_bar{
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
}

.website_publish_step_2_content .progress{
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
}

.progres_bar div.square{
    width: 17px;
    height: 17px;
    border: solid 1px #bcccd8;
}

.progres_bar .line{
    border-top: solid 1px #bcccd8;
    flex: 1;
    margin: 37px -16px 0;
}

.progres_bar div.square .core{
    width: 7px;
    height: 7px;
}

.progres_bar div.square.compete {
    width: 17px;
    height: 17px;
    border: solid 1px #bcccd8;
    background-color: #00dd9a;
    padding: 4px;
}

.progres_bar div.square.compete .core{
    width: 7px;
    height: 7px;
    background-color: black;

}

.progres_bar #left_span, .progres_bar #right_span, .progres_bar #middle_span{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.progres_bar span.title{
    padding-bottom: 29px;
    width: 47px;
    height: 22px;
    font-family: NunitoSans, serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #0d1722;
}

.website_publish_step_1_image, .website_publish_step_2_image,
    .website_publish_step_rules_image, .progress_gen_variations_preview_image, .website_publish_variation_rule_image {
     text-align: center;
     padding: 85px 0 40px;
     background-color: #f9f9fc;
}

.website_publish_step_1_content{
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    background-color: #f9f9fc;
}

.website_publish_step_2_content{
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #f9f9fc;
    position: relative;
}

.website_publish_step_rules_content, .website_publish_variation_rule_content{
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
    background-color: #f9f9fc;
}

.progress_gen_variations_preview_content{
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #f9f9fc;
}

#variation_preview{
    box-shadow: hsl(0, 0%, 80%) 0 0 6px;
}

.website_publish_step_1_content p.title, .website_publish_step_rules_content p.title,
    .website_publish_variation_rule_content p.title {
    margin-bottom: 10px;
}

.website_publish_step_1_content .title label, .website_publish_step_rules_content .title label,
    .website_publish_variation_rule_content .title label {
    font-family: Lato, serif;
    font-size: 10px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 1px;
    color: #62798a;
}

.website_publish_step_1_content .input_wrap, .website_publish_step_rules_content .input_wrap,
    .website_publish_variation_rule_content .input_wrap{
    text-align: left;
    margin-top: 20px;
}

.website_publish_step_1_content .input_wrap input, .alias input,
    .website_publish_step_1_content  .input_wrap textarea, .website_publish_step_rules_content  .input_wrap textarea,
        .website_publish_variation_rule_content  .input_wrap textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e2e2eb;
    border-radius: 4px;
    background-color: #fff;
    font-family: Nunito Sans,sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #0d1722;
    transition: all .3s;
}

.website_publish_step_1_content .input_wrap input::placeholder,
    .alias input::placeholder, .website_publish_step_1_content .input_wrap textarea::placeholder,
        .website_publish_variation_rule_content .input_wrap textarea::placeholder, .website_publish_step_rules_content .input_wrap textarea::placeholder{
     font-family: Nunito Sans,sans-serif;
     font-size: 1em;
     font-weight: normal;
     font-style: normal;
     font-stretch: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #9aafbe;
}

.website_publish_step_1_content .input_wrap input:focus,
    .alias input:focus, .website_publish_step_1_content .input_wrap textarea:focus,
        .website_publish_variation_rule_content .input_wrap textarea:focus, .website_publish_step_rules_content .input_wrap textarea:focus {
     border: 1px solid #00c06e;
     outline: none;
}

.website_publish_step_1_content .input_wrap textarea, .website_publish_step_rules_content .input_wrap textarea,
    .website_publish_variation_rule_content .input_wrap textarea{
    height: 125px;
    resize: none;
}

.website_publish_step_1_content .add_script_div, .website_publish_step_rules_content .add_rule_div,
    .website_publish_variation_rule_content .add_variation_rule_div{
    /*box-shadow: 0 6px 14px 0 rgba(0,153,107,.29);*/
    display: flex;
    text-align: center;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00dd9a;
    background-size: auto;
    transition: all .3s;
}

.add_script_div img, .add_rule_div img, .add_variation_rule_div img{
    height: 14px;
    width: 14px;
}

.btn_group{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 77px;
}

.website_publish_step_2_content .btn_group, .website_publish_step_rules_content .btn_group,
    .website_publish_variation_rule_content .btn_group {
    padding-top: 115px;
    justify-content: center;
}

.website_publish_step_2_content .website_publish_step_2_close, .website_publish_step_rules_content .website_publish_step_rules_close,
    .website_publish_variation_rule_content .website_publish_variation_rule_close{
    margin-right: 15px;
}

.website_publish_step_2_content .button_publish {
    margin-left: 15px;
}

.btn_group .website_publish_step_1_close, .btn_group .website_publish_step_2_close,
.btn_group .button_next_step_2, .btn_group .button_publish, .btn_group .button_next_step_rules,
    .btn_group .button_save_variation_rule, .btn_group .website_publish_step_rules_close, .btn_group .website_publish_variation_rule_close {
    display: inline-block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 155px;
    height: 37px;
    border-radius: 4px;
}

.website_publish_step_1_close, .website_publish_step_2_close, .website_publish_step_rules_close,
    .website_publish_variation_rule_close {
    float: left;
    background-color: #e2e2eb;
    font-family: Lato, serif;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    color: #284355;

}

.button_next_step_2, .button_publish, .button_next_step_rules, .button_save_variation_rule {
    float: right;
    background-color: #556c7c;
    font-family: Lato, serif;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.website_publish_step_1_content form, .website_publish_step_2_content form,
    .website_publish_step_rules_content form, .website_publish_variation_rule_content form {
    margin-bottom: 80px;
}



/*step 3 modal*/

.row .div_article{
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    font-size: 12px;
    color: hsl(0, 0%, 60%);
    border-radius: 4px;
    box-shadow: hsl(0, 0%, 80%) 0 0 6px;
    overflow: hidden;
    background-color: hsl(0, 0%, 100%);
    /*display: -ms-flexbox;*/
}

.section_left{
    padding: 16px 0 16px 16px ;
    /*border: 1px solid #C0C0C0;*/
}

.section_right{
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section_right_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-between;
}

.section_right_bottom{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.section_right_top_info{
    display: flex;
    flex-direction: column;
}

.section_right_top_form{
    display: flex;
}
.row{
    display: flex;
    align-items: center;
    padding-bottom: 16px;
}
li .row:before, li .row:after{
    box-sizing: inherit;
}
.alias_link, .date_created, .variation_name, .alias{
    text-align: left;
}
.date_created{
    padding-bottom: 11px;
    font-family: Lato-SemiBold, serif;
    font-size: 12px;
    color: #6a6d86;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
}
.variation_name{
    font-family: NunitoSans-Light, serif;
    font-size: 18px;
    color: #0d1722;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
}
.alias_link{
    font-family: NunitoSans-Light, serif;
    font-size: 16px;
    color: #9aafbe;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    padding-right: 12px;
}
.alias{
    font-family: NunitoSans-Regular, serif;
    font-size: 16px;
    color: #0d1722;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    flex: 1 0 auto;
    margin-right: 10px;
}
.alias input{
    max-height: 28px;
}
.run_ab{
    font-family: NunitoSans, serif;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #62798a;
    padding-right: 16px;
}
/*checkbox*/
.variation_active_checkbox{
    padding-right: 16px;
}
/* Customize the label (the container) */
.variation_active_checkbox .box_label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default checkbox */
.variation_active_checkbox .box_label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.box{
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #C0C0C0;
}

/*!* On mouse-over, add a grey background color *!*/
/*.variation_active_checkbox .box_label:hover input ~ .box {*/
    /*background-color: #ccc;*/
/*}*/

/* When the checkbox is checked, add a blue background */
.variation_active_checkbox .box_label input:checked ~ .box {
    background-color: #00dd9a;
    border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.box:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.variation_active_checkbox .box_label input:checked ~ .box:after {
    display: block;
}

/* Style the checkmark/indicator */
.variation_active_checkbox .box_label .box:after {
    left: 7px;
    top: 2px;
    width: 7px;
    height: 11px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*checkbox*/

/*generating preview progress bar*/
.gen_preview_status_bar{
    width: 100%;
    background-color: white;
    margin: 0 auto 75px;
    max-width: 60%;
    box-shadow: hsl(0, 0%, 80%) 0 0 6px;
}

.gen_preview_progress{
    width: 0;
    height: 30px;
    background-color: #00dd9a;
}
/*generating preview progress bar*/

/*switcher for run A/B test*/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 0;
    bottom: 0;
    background-color: white;
    box-shadow: 0 3px 8px 0 rgba(18, 35, 47, 0.35);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider:before{
    background-color: #284355;
}

input:checked + .slider {
    background-color: #00dd9a;
}

input:focus + .slider {
    box-shadow: 0 0 1px #00dd9a;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 16px;
}

.slider.round:before {
    border-radius: 50%;
}

/*switcher for run A/B test*/

/*switcher dynamic/normal*/
.website_publish_step_2_content .right_switcher {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -44px;
}

.right_switcher .dynamic{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-right: -1px;
}

.right_switcher .static{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left: -1px;
}

.right_switcher .dynamic, .right_switcher .static{
    width: 46px;
    height: 28px;
    box-shadow: 1px 0 0 0 #e2e2eb;
    /*background-color: rgba(164, 164, 164, 0);*/
    background-color: rgb(255, 255, 255);
    border: solid 1px #bcccd8;
    padding: 1px 11px;
}

.right_switcher .dynamic.selected, .right_switcher .static.selected{
    background-color: #284355;
}

.right_switcher .dynamic.unselected img.dynamic-selected, .right_switcher .dynamic.selected img.dynamic-normal,
.right_switcher .static.unselected img.static-selected, .right_switcher .static.selected img.static-normal{
    display: none;
}

input[readonly], input[readonly]:hover{
    background-color:#f7f4f4;
}

.variation_active_checkbox .box_label.readonly input:checked ~ .box{
    background-color:#c5c6c6;
}

.variation_active_checkbox .box_label.readonly{
    pointer-events: none;
}

label.switch.readonly input:checked + .slider{
    background-color:#cccccc;
}

label.switch.readonly{
    pointer-events: none
}
/*.right_switcher*/

/*variation-rule-btn*/
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(66, 184, 221); /* this is a light blue */
    font-size: 15px;

}
.variation-rule-btn .variation-rule:hover {background-color: #e7e7e7;}
/*variation-rule-btn*/

/*cabinet page*/
.view-style.list .row, .view-style.list .item {
    display: block;
    font-size: 14px;
}
.view-style.list .item {
    max-width: 100%;
}
.view-style.list .campaings_item__preview {
    float: left;
    width: 20%;
    height: 116px !important;
}
.view-style.list .campaings_item__description {
    float: right;
    width: 80%;
    height: 116px;
}
.view-style.list  .campaings_item__preview .menu,
.view-style .campaings_item__description .menu__list_description {
    display: none;
}
.view-style.list .campaings_item__description .menu__list_description {
    display: inline-table;
    position: absolute;
    right: 11px;
    top: 9px;
    z-index: 3;
}
.menu__list_description {
    text-align: right;
}
.menu__list_description a{
    color: #8e97a0;
    font-size: small;
}
.view-style.list .campaings_item {
    height: 116px;
}
.view-style.list .item {
    margin: -2px;
}
.search input {
    pointer-events: none;
    opacity:0;
    padding-left: 34px;
    padding-right: 38%;
    position: relative;
    border: 0;
    font-size: 21px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #808080;
    bottom: -1px;
    width: 45px;
    height: 35px;
    transition-property: width;
    transition-duration: .6s
}
.search .select_client {
    visibility:hidden;
    opacity:0;
    transition: visibility 0s linear 0s, opacity 1s;
    pointer-events: none;
    cursor: default;
}
.search.focusin .select_client {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    position: absolute;
    right: 32px;
    bottom: 3px;
    min-width: 30%;
    pointer-events: auto;
    cursor: auto;
}
.focusin .select_client span.select2{
    width: 100% !important;
}
.search.focusin input {
    pointer-events: auto;
    opacity:1;
    width: 450px;
    outline: solid rgba(0, 0, 0, .45) 10000px;
}
.search a.link {
    position: absolute;
    left: 5px;
    bottom: 5px;
}
.search-result-title {
    margin-top: -14px;
    margin-bottom: 14px;
    margin-left: 28px;
    font-family: Nunito Sans,sans-serif;
    font-size: 1.125em;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #6c7b8c;
}
.search-result-title.all {
    margin: 34px 67px;
    line-height: 24px;
    font-weight: 600;
    font-style: oblique;
}