body{ padding: 0px; margin: 0px; font-family: 'Ubuntu', sans-serif; }

div.main{ width: 100%; }
@media only screen and (min-width: 1180px) {

}
@media only screen and (min-width: 320px) and (max-width: 1179px) {

}
/*OVER CAP*/
/*1180*/
@media only screen and (min-width: 1180px) {
    div.over-cap-line{ width: 100%; height: 34px; background: #5690f5; }
    div.over-cap{ margin: 0 auto; width: 1180px; height: 34px; display: flex; }

    /*div.over-cap-left{ width: 365px; }*/
    div.over-cap-left{width: 475px;}

    div.over-cap-center{ width: 450px; }
    
    div.block-bg-red-diagnostics{ display: flex; justify-content: center; align-items: center; width: 442px; height: 30px; background: #ff0101; border-radius: 0px 0px 12px 12px; }
    /*div.block-bg-red-diagnostics{ display: flex; justify-content: center; align-items: center; width: 395px; height: 30px; background: #ff0101; border-radius: 0px 0px 12px 12px; }*/
    div.icon-eye{ padding: 0 5px 0 0; }
    div.top-link-diagnostics{ padding: 0 0 0 5px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
    div.top-link-diagnostics a{ color: #fff; text-decoration: none; }
    div.top-link-diagnostics span.ot320{ display: none; }

    div.over-cap-right{ width: 365px; display: flex; justify-content: flex-end; align-items: center; height: 34px; }
    div.top-auth{ font-size: 15px; font-weight: 300; color: #fff; }
    div.top-auth a{ color: #fff; text-decoration: none; }
    div.top-location{ color: #fff; font-size: 15px; font-weight: 300; padding: 0 0 0 17px; }
}
/*768 - 1179*/
@media only screen and (min-width: 768px) and (max-width: 1179px) {
    div.over-cap-line{ width: 100%; height: 34px; background: #5690f5; }
    div.over-cap{ width: 100%; height: 34px; display: flex; }

    div.over-cap-left{ width: 50%; }


    div.over-cap-center{ width: 450px; }
    div.block-bg-red-diagnostics{ display: flex; justify-content: center; align-items: center; width: 442px; height: 30px; background: #ff0101; border-radius: 0px 0px 12px 12px; }
    div.icon-eye{ padding: 0 5px 0 0; }
    div.top-link-diagnostics{ padding: 0 0 0 5px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
    div.top-link-diagnostics a{ color: #fff; text-decoration: none; }
    div.top-link-diagnostics span.ot320{ display: none; }

    div.over-cap-right{ width: 50%; display: flex; justify-content: flex-end; align-items: center; height: 34px; }
    div.top-auth{ font-size: 15px; font-weight: 300; color: #fff; padding: 0 20px 0 0; }
    div.top-auth a{ color: #fff; text-decoration: none; }
    div.top-auth span{ display: none; }
    div.top-location{ display: none; }
}
/*320 - 767*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    div.over-cap-line{ width: 100%; height: 51px; background: #5690f5; }
    div.over-cap{ width: 100%; height: 51px; display: flex; }

    div.over-cap-left{ width: 50%; }

    div.over-cap-center{ width: 180px; }
    div.block-bg-red-diagnostics{ display: flex; justify-content: center; align-items: center; width: 180px; height: 47px; background: #ff0101; border-radius: 0px 0px 20px 20px; }
    div.icon-eye{ display: none; }
    div.top-link-diagnostics{ font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1; text-align: center; }
    div.top-link-diagnostics a{ color: #fff; text-decoration: none; }
    div.top-link-diagnostics span.ot768{ display: none; }

    div.over-cap-right{ width: 50%; display: flex; justify-content: flex-end; align-items: center; height: 51px; }
    div.top-auth{ font-size: 15px; font-weight: 300; color: #fff; padding: 0 15px 0 0; }
    div.top-auth a{ color: #fff; text-decoration: none; }
    div.top-auth span{ display: none; }
    div.top-location{ display: none; }
}

/*CAP*/
@media only screen and (min-width: 921px) {
    div.cap-line{ width: 100%; height: 110px; background: #5690f5; }

    div.cap{ margin: 0 auto; height: 110px; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width:1180px;  }
    div.logo{ width: 290px; height: 110px; padding: 30px 0 0 0; }
    div.logo img{ width: 265px; }

    div.work-time{ width:220px;   height: 110px; display: flex; justify-content: center; align-items: center; }
    div.icon-work-time{ padding: 0 5px 0 0; }
    div.work-time-info{ font-size: 16px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }

    div.icon-phone{ padding: 0 5px 0 0; }
    div.phone-info{ font-size: 16px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }

    div.top-phone{ width: 230px; height: 110px; display: flex; justify-content: center; align-items: center; }
    div.top-phone a{ color: #fff; }

    div.top-feedback{width: 250px; display: flex; justify-content: center; align-items: center }
    div.icon-feedback{  padding: 0 5px 0 0; }
    div.feedback-info{ color: #fff; font-size: 16px;/*padding: 0 0 0 5px;*/ }
    div.feedback-info .text{}


    div.top-basket{width: 10%; display: flex; justify-content: center;}
    div.top-basket a{ color: #fff; }
    div.top-basket-mobile {
        display: none;
    }

    .show-mobile-only {
        display: none;
    }

    div.top-order-status{ width:180px;   height: 110px; display: flex; justify-content: center; align-items: center; }
    div.top-order-status .order-status-info{ font-size: 16px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }
}

@media only screen and (min-width:668px) and (max-width: 920px) {
    div.cap-line{ width: 100%; height: 110px; background: #5690f5; }

    div.cap{ margin: 0 auto; height: 110px; display: flex; align-items: center; justify-content: space-evenly; width: 100%; max-width:1180px; }
    div.logo{ width: 40%; height: 110px; padding: 30px 0 0 0; }
    div.logo img{ width: 265px; }

    div.work-time{ width: 40%; height: 110px; display: flex; justify-content: center; align-items: center; }
    div.icon-work-time{ padding: 0 5px 0 0; }
    div.work-time-info{ font-size: 14px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }

    div.icon-phone{ padding: 0 5px 0 0; }
    div.phone-info{ font-size: 14px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }

    div.top-phone{ width: 40%; height: 110px; display: flex; justify-content: center; align-items: center; }
    div.top-phone a{ color: #fff; }

    div.top-feedback{width: 10%; display: flex; justify-content: center; }
    div.icon-feedback{ /*display: none;*/ padding: 0 5px; }
    div.feedback-info{ color: #fff; /*padding: 0 0 0 5px;*/ }
    div.feedback-info .text{
        display: none;
    }

    div.top-basket{width: 10%; display: flex; justify-content: center;}
    div.top-basket a{ color: #fff; }
    div.top-basket-mobile {
        display: none;
    }

    div.top-order-status{ width:34%;   height: 110px; display: flex; justify-content: center; align-items: center; }
    div.top-order-status .order-status-info{ font-size: 14px;  font-weight: 300; color: #fff; padding: 0; }

    .show-mobile-only {
        display: none;
    }
}

@media only screen and (min-width: 400px) and (max-width: 667px) {
    div.cap-line{ width: 100%; height: 110px; background: #5690f5; }

    div.cap{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; position: relative; }
    div.logo{ width: 100%; text-align: center; padding: 7px 0; }
    div.logo img{ width: 180px; }

    div.work-time{width: 50%;  padding: 0 0 0 10px; font-size: 14px; font-weight: 500; color: #fff; display: flex; justify-content: center; align-items: center; }

    div.top-phone{width: 50%; padding: 0; font-size: 14px; font-weight: 500; color: #fff; display: flex; justify-content: center; align-items: center; }
    div.top-phone a{ color: #fff; }
    div.icon-phone{ padding: 0 5px 0 0; }


    div.top-feedback{ display: flex; justify-content: center;}
    div.icon-feedback{ display: none;  padding: 0 4px 0 0; }
    div.icon-feedback img {
        width: 23px;
    }
    div.feedback-info{ color: #fff; /*padding: 0 0 0 5px;*/ }

    div.top-basket{ padding: 0; display: none}
    div.top-basket a{ color: #fff; }
    div.top-order-status {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 399px) {
    div.cap-line{ width: 100%; background: #5690f5; padding-bottom: 20px}

    div.cap{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
    div.logo{ width: 100%; text-align: center; padding: 7px 0; }
    div.logo img{ width: 180px; }

    div.work-time{  padding: 0 0 0 10px; font-size: 14px; font-weight: 500; color: #fff; display: flex; justify-content: center; align-items: center; width: 50% }

    div.top-phone{ padding: 0; font-size: 14px; font-weight: 500; color: #fff; display: flex; justify-content: center; align-items: center; width: 50% }
    div.top-phone a{ color: #fff; }
    div.icon-phone{ padding: 0 5px 0 0; }


    div.top-feedback{ display: flex; justify-content: center;}
    div.icon-feedback{ display: none;  padding: 0 4px 0 0; }
    div.icon-feedback img {
        width: 23px;
    }
    div.feedback-info{ color: #fff; /*padding: 0 0 0 5px;*/ }

    div.top-basket{ padding: 0; display: none}
    div.top-basket a{ color: #fff; }
    div.top-order-status {
        display: none;
    }
}


/*CATALOG MENU*/

@media only screen and (min-width: 1180px) {
    div.catalog-menu-block-line{ width: 100%; height: 40px; background: #5690f5; }
    div.catalog-menu-block{ margin: 0 auto; width: 1180px; height: 40px; }
}
@media only screen and (min-width: 320px) and (max-width: 1179px) {
    div.catalog-menu-block-line{ width: 100%; height: 40px; background: #5690f5; }
    div.catalog-menu-block{ width: 100%; height: 40px; }
}

/*SEARCH*/
@media only screen and (min-width: 1180px) {
    div.search-block-line{ width: 100%; height: 50px; background: #f0f4f8; }
    div.search-block{ width: 1180px; margin: 0 auto; padding: 10px 0 0 0; }
}
@media only screen and (min-width: 320px) and (max-width: 1179px) {
    div.search-block-line{ width: 100%; height: 50px; background: #f0f4f8; }
    div.search-block{ width: 100%; padding: 10px 10px 0 10px; }
}


/*MAIN BANNER*/
@media only screen and (min-width: 1180px) {
    div.main-banner{ margin: 0 auto; width: 1180px; }
}
@media only screen and (min-width: 320px) and (max-width: 1179px) {
    div.main-banner{ width: 100%; }
}

/*CENTER PATH*/
@media only screen and (min-width: 1180px) {
    div.center-path{ width: 1180px; margin: 0 auto; padding: 0 0 30px 0; }
}
@media only screen and (min-width: 320px) and (max-width: 1179px) {
    div.center-path{ width: 100%; padding: 0 10px 30px 10px; }
}


/*BOTTOM*/
@media only screen and (min-width: 1180px) {
    div.bottom-line{ width: 100%; background: #5690f5; padding: 50px 0; }
    div.bottom{ width: 1180px; margin: 0 auto; display: flex; }

    div.left-bottom{ width: 260px; display: flex; flex-direction: column; }
    div.logo-bottom{ display: flex; justify-content: center; }
    div.phone-bottom{ font-size: 16px; font-weight: 500; color: #fff; text-align: center; padding: 20px 0 0 0; }
    div.phone-bottom a{ color: #fff; }
    div.time-work-bottom{ display: flex; justify-content: center; padding: 20px 0 0 0; }

    div.center-bottom{ width: 660px; display: flex; }
    div.menu-bottom-1{ width: 40%; }
    div.menu-bottom-2{ width: 30%;}
    div.menu-bottom-3{ width: 30%;}

    div.right-bottom{ width: 260px; display: flex; flex-direction: column; padding: 0 0 0 35px; }
    div.payment-icons{}
    div.payment-icons img{ width: 50px; padding: 0 10px 0 0; }
    div.soc-seti{ padding: 20px 0 0 0; color: #fff; font-size: 14px; font-weight: 300; }
    div.soc-seti-icons{padding: 10px 0 0 0; }
    div.soc-seti-icons img{padding: 0 10px 0 0; max-height: 30px}
    div.copyright{ font-size: 12px; color: #fff; padding: 20px 0 0 0; }
}
@media only screen and (min-width: 768px) and (max-width: 1179px) {
    div.bottom-line{ width: 100%; background: #5690f5; padding: 50px 0; }
    div.bottom{ width: 100%; display: flex; flex-wrap: wrap; }

    div.left-bottom{ width: 100%; display: flex; padding: 0 45px; }
    div.logo-bottom{ width: 40%; }
    div.phone-bottom{ font-size: 16px; font-weight: 500; color: #fff; width: 30%; }
    div.phone-bottom a{ color: #fff; }
    div.time-work-bottom{ display: flex; width: 30%; }
    div.icon-work-time{ padding: 0 5px 0 0; }
    div.work-time-info{ font-size: 14px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }

    div.center-bottom{ width: 100%; display: flex; padding: 20px 45px; }
    div.menu-bottom-1{ width: 40%; }
    div.menu-bottom-2{ width: 30%; }
    div.menu-bottom-3{ width: 30%; }

    div.right-bottom{ width: 100%; display: flex; padding: 0 45px; }
    div.payment-icons{ width: 40%; }
    div.payment-icons img{ width: 50px; padding: 0 10px 0 0; }
    div.soc-seti{ color: #fff; font-size: 14px; font-weight: 300; width: 33%; }
    div.soc-seti-icons{padding: 10px 0 0 0; }
    div.soc-seti-icons img{padding: 0 10px 0 0; max-height: 30px }
    div.copyright{ font-size: 12px; color: #fff; width: 30%; }
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    div.bottom-line{ width: 100%; background: #5690f5; padding: 50px 0; }
    div.bottom{ width: 100%; display: flex; flex-direction: column; }

    div.left-bottom{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; }
    div.logo-bottom{ display: flex; justify-content: center; }
    div.phone-bottom{ font-size: 16px; font-weight: 500; color: #fff; text-align: center; padding: 20px 0 0 0; }
    div.phone-bottom a{ color: #fff; }
    div.time-work-bottom{ display: flex; justify-content: center; padding: 20px 0 0 0; }
    div.icon-work-time{ padding: 0 5px 0 0; }
    div.work-time-info{ font-size: 14px;  font-weight: 300; color: #fff; padding: 0 0 0 5px; }

    div.center-bottom{ width: 100%; display: flex; flex-direction: column; padding: 20px 20px; justify-content: center;  }
    div.menu-bottom-1{ display: flex; justify-content: center; }
    div.menu-bottom-2{ display: flex; justify-content: center; }
    div.menu-bottom-3{ display: flex; justify-content: center; }

    div.right-bottom{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; }
    div.payment-icons{ text-align: center; }
    div.payment-icons img{ width: 50px; padding: 0 10px 0 0; }
    div.soc-seti{ padding: 20px 0 0 0; color: #fff; font-size: 14px; font-weight: 300; text-align: center; }
    div.soc-seti-icons{padding: 10px 0 0 0; }
    div.soc-seti-icons img{ padding: 0 10px 0 0; max-height: 30px}
    div.copyright{ font-size: 12px; color: #fff; padding: 20px 0 0 0; display: flex; justify-content: center; }
}

/*CONTACTS STR*/
@media only screen and (min-width: 1180px) {
    div.contacts-str{ width: 100%; display: flex; flex-wrap: wrap; }

    div.contacts-str div.info{ width: 100%; border: 1px solid #e6e6e6; height: 75px; display: flex; align-items: center; }
    div.contacts-str div.info div.phone8812{ width: 300px; border-right: 1px solid #e3e3e3; padding: 8px 0; display: flex; justify-content: center; }
    div.contacts-str div.info div.phone8812 div.phone-name{ font-size: 16px; color: #202e56; font-weight: 300; }
    div.contacts-str div.info div.phone8812 div.phone-number{ font-size: 18px; color: #202e56; font-weight: 500; padding: 0 0 0 5px; }

    div.contacts-str div.info div.phone8800{ width: 420px; border-right: 1px solid #e3e3e3; display: flex; justify-content: center; padding: 8px 0; }
    div.contacts-str div.info div.phone8800 div.phone-name{ font-size: 16px; color: #202e56; font-weight: 300; }
    div.contacts-str div.info div.phone8800 div.phone-number{ font-size: 18px; color: #202e56; font-weight: 500; padding: 0 0 0 5px; }

    div.contacts-time-work{ font-size: 14px; color: #202e56; font-weight: 300; text-align: center; width: 460px; }

    div.contacts-str div.forma{ width: 423px; padding: 20px 45px 0 0; }

    div.contacts-str div.maps-site{ width: 757px; display: flex; flex-direction: column; padding: 20px 0 0 0; }
    div.contacts-str div.maps-site div.adress{ font-size: 16px; color: #202e56; font-weight: 300; padding: 5px 0 10px 0; }
    div.contacts-str div.maps-site div.optics{ padding: 10px 0; background: #00aef0; font-size: 18px; font-weight: 500; text-align: center; }
    div.contacts-str div.maps-site div.optics a{ text-decoration: none; color: #fff; }

    div.details{ width: 100%; display: flex; flex-direction: column; padding: 15px 0 0 0; }
    div.details div.zagolovok-details{ text-align: center; font-size: 18px; font-weight: 500; color: #202e56; }
    div.details div.text-details{ padding: 10px 0 0 0; display: flex; justify-content: center; }
    div.details div.text-details div{ font-size: 16px; font-weight: 400; color: #202e56; padding: 0 15px; }
}

@media only screen and (min-width: 768px) and (max-width: 1179px) {
    div.contacts-str{ width: 100%; display: flex; flex-wrap: wrap; }

    div.contacts-str div.info{ width: 100%; border: 1px solid #e6e6e6; height: 75px; display: flex; align-items: center; }
    div.contacts-str div.info div.phone8812{ width: 30%; border-right: 1px solid #e3e3e3; padding: 8px 0; display: flex; flex-direction: column; }
    div.contacts-str div.info div.phone8812 div.phone-name{ font-size: 16px; color: #202e56; font-weight: 300; padding: 0 0 0 15px; }
    div.contacts-str div.info div.phone8812 div.phone-number{ font-size: 18px; color: #202e56; font-weight: 500; padding: 0 0 0 15px; }

    div.contacts-str div.info div.phone8800{ width: 35%; border-right: 1px solid #e3e3e3; display: flex; flex-direction: column; padding: 8px 0; }
    div.contacts-str div.info div.phone8800 div.phone-name{ font-size: 16px; color: #202e56; font-weight: 300; padding: 0 0 0 15px; }
    div.contacts-str div.info div.phone8800 div.phone-number{ font-size: 18px; color: #202e56; font-weight: 500; padding: 0 0 0 15px; }

    div.contacts-time-work{ font-size: 14px; color: #202e56; font-weight: 300; width: 35%; padding: 0 0 0 15px; }

    div.contacts-str div.forma{ width: 100%; padding: 20px 0 0 0; }

    div.contacts-str div.maps-site{ width: 100%; display: flex; flex-direction: column; padding: 20px 0 0 0; }
    div.contacts-str div.maps-site div.adress{ font-size: 14px; color: #202e56; font-weight: 300; padding: 5px 0 10px 0; width: 100%; text-align: center; }
    div.contacts-str div.maps-site div.optics{ padding: 10px 0; background: #00aef0; font-size: 18px; font-weight: 500; text-align: center; }
    div.contacts-str div.maps-site div.optics a{ text-decoration: none; color: #fff; }

    div.details{ width: 100%; display: flex; flex-direction: column; padding: 15px 0 0 0; }
    div.details div.zagolovok-details{ text-align: center; font-size: 18px; font-weight: 500; color: #202e56; }
    div.details div.text-details{ padding: 10px 0 0 0; display: flex; justify-content: center; }
    div.details div.text-details div{ font-size: 16px; font-weight: 400; color: #202e56; padding: 0 15px; }
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    div.contacts-str{ width: 100%; display: flex; flex-wrap: wrap; }

    div.contacts-str div.info{ width: 100%; border: 1px solid #e6e6e6; display: flex; flex-direction: column; padding: 15px 0; }
    div.contacts-str div.info div.phone8812{ width: 100%; padding: 0 0 15px 0; display: flex; flex-direction: column; }
    div.contacts-str div.info div.phone8812 div.phone-name{ font-size: 16px; color: #202e56; font-weight: 300; padding: 0 0 0 15px; }
    div.contacts-str div.info div.phone8812 div.phone-number{ font-size: 18px; color: #202e56; font-weight: 500; padding: 0 0 0 15px; }

    div.contacts-str div.info div.phone8800{ width: 100%; display: flex; flex-direction: column; padding: 0 0 15px 0; }
    div.contacts-str div.info div.phone8800 div.phone-name{ font-size: 16px; color: #202e56; font-weight: 300; padding: 0 0 0 15px; }
    div.contacts-str div.info div.phone8800 div.phone-number{ font-size: 18px; color: #202e56; font-weight: 500; padding: 0 0 0 15px; }

    div.contacts-time-work{ font-size: 14px; color: #202e56; font-weight: 300; width: 100%; padding: 0 0 0 15px; }

    div.contacts-str div.forma{ width: 100%; padding: 20px 0 0 0; }

    div.contacts-str div.maps-site{ width: 100%; display: flex; flex-direction: column; padding: 20px 0 0 0; }
    div.contacts-str div.maps-site div.adress{ font-size: 14px; color: #202e56; font-weight: 300; padding: 5px 0 10px 0; width: 100%; text-align: center; }
    div.contacts-str div.maps-site div.optics{ padding: 10px 0; background: #00aef0; font-size: 18px; font-weight: 500; text-align: center; }
    div.contacts-str div.maps-site div.optics a{ text-decoration: none; color: #fff; }

    div.details{ width: 100%; display: flex; flex-direction: column; padding: 15px 0 0 0; }
    div.details div.zagolovok-details{ text-align: center; font-size: 18px; font-weight: 500; color: #202e56; }
    div.details div.text-details{ padding: 10px 0 0 0; display: flex; flex-direction: column; }
    div.details div.text-details div{ font-size: 16px; font-weight: 400; color: #202e56; padding: 0 0 10px 0; width: 100%; text-align: center; }
}

.best-price-label {
    width: 100%;
    padding: 5px 10px !important;
}
.product-item-label-ring.product-item-label-small,
.product-item-label-ring.product-item-label-big {
    width: 0 !important;
    height: 0 !important;
    line-height: 1 !important;
    font-size: 13px !important;
    font-weight: normal;
    top: unset;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    border: 50px solid transparent;
    border-right: 50px solid #f42c2c;
    border-bottom: 50px solid #f42c2c;
    border-radius: 5px;
}
.product-item-label-ring.product-item-label-big {
    font-size: 20px !important;
    border: 75px solid transparent;
    border-right: 75px solid #f42c2c;
    border-bottom: 75px solid #f42c2c;
}
.profit-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
}
.product-item-label-ring.product-item-label-big .profit-wrapper {
    width: 75px;
    height: 75px;
}
.profit-wrapper span {
    display: block;
    position: absolute;
}
.profit-wrapper span:first-child {
    top: 17px;
    left: -6px;
}
.product-item-label-ring.product-item-label-big .profit-wrapper span:first-child {
    top: 17px;
    left: -6px;
}
.profit-wrapper span:last-child {
    bottom: 13px;
    left: 0;
    width: 100px;
    margin-left: -40px;
    text-align: center !important;
}
.product-item-label-ring.product-item-label-big .profit-wrapper span:last-child {
    bottom: 20px;
    width: 150px;
    margin-left: -65px;
}

.item .voting {
    display: flex;
    justify-content: center;
}



.select-service {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 1em;
}
.select-service-btn {
    min-height: 30px;
    padding: 30px;
    border-radius: 5px;
    flex: 0 1 30%;
    background: #B1D4E3;
    color: #000;
    font-size: 1.25em;
}
.select-service-btn:hover {
    background: #8EAAB6;    
}
.select-service-btn.active {
    background: #5690f5;
    color: #fff;
}

#list-salons {
    display: flex;
    flex-flow: column;
    max-height: 183px;
    overflow: auto;
    margin-bottom: 1em;
}
.salon-item {
    display: block;
    padding: 1em 2em;
    padding-left: 40px;
    flex: 1 1 100%;
    border-radius: 5px;
    align-self: stretch;
    position: relative;
    text-align: left;
    margin-bottom: 5px;
    background: #B1D4E3;
    color: #000;
}
.salon-item:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border: 1px solid green;
    background: white;
    border-radius: 20px;
}
/*
.salon-item:hover:before {
    background: green;
}
*/

.salon-item:after {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid green;
    background: green;
    border-radius: 20px;
    opacity: 0;
    transition: 0.3s;
}
.salon-item:hover:after {
    opacity: 1;
}
.salon-item.active {
    background: #5690f5;
    color: #fff;
}
.salon-item.active:after {
    opacity: 1;
}




.free-hours-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: stretch;
    margin-right: -0.5em;
    overflow: hidden;
    margin-bottom: 1em;
}
.free-time {
    padding: 0.75em 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    color: #000;
    background: #B1D4E3;
    cursor: pointer;
    border-radius: 5px;
    flex: 1 1 calc(100% / 12);
}
.free-time:hover {
    background: green;
    color: #fff;
}
.free-time.booked {
    background: #c0c0c0;
    color: #000;
    cursor: not-allowed;
    text-decoration: line-through;
}
.free-time.active {
    background: #5690f5;
    color: #fff;
}


.select-date {
    margin-bottom: 1em;
    display: flex;
}
#bookDate {
    display: block;
    padding: 1em 2em;
    padding-left: 40px;
    flex: 1 1 100%;
    border-radius: 5px;
    align-self: stretch;
    position: relative;
    text-align: left;
    background: #fff;
    border: 1px solid #B1D4E3;
    color: #000;
}
#wrapper-book-diagnostic .form-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: wrap;
}
#wrapper-book-diagnostic .form-wrapper > * {
    flex: 0 1 30%;
    margin-bottom: 1em;
    min-height: 50px;
}
#wrapper-book-diagnostic .form-wrapper > input {
    background: #fff;
    border: 1px solid #B1D4E3;
    color: #000;
    padding: 1em 2em;
}
.btn-book-submit {
    background: #5690f5;
    color: #fff;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    padding: 6px 12px;
    line-height: 1.42857143;
    flex: 1 1 100% !important;
}
.btn-book-submit:hover {
    background: #0076AD;
    color: #fff;
}
.btn-book-submit:active {
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
}

@media only screen and (max-width: 767.98px) {
    #wrapper-book-diagnostic .form-wrapper,
    .select-service {
        flex-flow: column;
    }
    .select-service-btn {
        padding: 20px;
        font-size: 1.5em;
        margin-bottom: 0.5em;
    }
    #wrapper-book-diagnostic .form-wrapper > * {
        flex: 1 1 100%;
        width: 100%;
    }
}

.flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.warning-buy{
    padding-bottom:5px;
}


/*Статьи*/
._article-title{
    font-size: 22px;
    margin-bottom: 10px;
}

.mb-30{
    margin-bottom: 30px;
}

.d-b{
    display: block;
}