.overlay {
   
   /* Скрываем подложку  */
   opacity: 0;
   visibility: hidden;
   
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .5);
   z-index: 20;
   transition: .3s all;
}


/* Стили для модальных окон */

.modal {
   
   /* Скрываем окна  */
   opacity: 0;
   visibility: hidden;
   
   
   /*  Установаем ширину окна  */
   width: 100%;
   max-width: 500px;
   
   /*  Центрируем и задаем z-index */
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 30; /* Должен быть выше чем у подложки*/
   
   /*  Побочные стили   */
   box-shadow: 0 3px 10px -.5px rgba(0, 0, 0, .2); 
   text-align: center;
   padding: 30px;
   border-radius: 3px;
   background-color: #fff;
   transition: 0.3s all;
}


/* Стили для активных классов подложки и окна */


.overlay.active{
   opacity: 1;
   visibility: visible;
    z-index: 999;
}
.modal.active{
   opacity: 1;
   visibility: visible;
    z-index: 9999;
}

/* Стили для кнопки закрытия */

.modal__cross {
   width: 15px;
   height: 15px;
   position: absolute;
   top: 20px;
   right: 20px;
   fill: #444;
   cursor: pointer;
}


/* Стили для кнопок. Мы ведь порядочные разработчики, негоже простые ссылки оставлять */


.ui-widget div {display: inline-block;}
.ui-widget {display: inline-block; font-size: 12px!important; color: #fff; margin-right: 10px;}
.ui-widget a {color:#009ca0;}
.header__top-menu > ul > li {margin: 0 20px 0 0!important;}
.header__top-links ul li.header__top-favorites a {margin: 0 0 0 25px!important;}
.header__top-links ul li.header__top-compare a {margin: 0 0 0 25px!important;}
.header__top-links ul li.header__top-order a {margin: 0 0 0 25px!important;}
.header__top-links ul li.header__top-account a {margin: 0 0 0 25px!important;}

.ui-widget .js-modal-close {
    width: 160px;
    background-color: #009ca0 !important;
    height: 36px;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    vertical-align: middle;
    transition-duration: 0.2s;
    border: none!important;
}
.ui-widget .ui-autocomplete-input {
        width: 200px;
    border: solid 2px #009ca0;
    padding: 6px;
    font-size: 16px;
    
}

.modal__title {
    font-size: 18px;
    padding-bottom: 20px;
    font-weight: bold;
    color: #009ca0;
}