@charset "utf-8";

@font-face {
    font-family: 'Rubik-Regular';
    src: local('Rubik-Regular'), url('/local/fonts/rubik/new-regular.woff2') format('woff2'), url('/local/fonts/rubik/new-regular.woff') format('woff'), url('/local/fonts/rubik/new-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --os: 'desktop';

    --main-width: 900px;

    --green-color: #0daca5;
    --orange-color: #f18656;
    --yellow-color: #ffee9b;
    --background-color: #eff5f6;
    --footer-color: #d5e8eb;

    --dark-gray-color: #455a64;
    --light-gray-color: #acc5c9;
}

html {
    height: 100%;
    display: flex;
    justify-content: center;
    background: var(--background-color);
}

body {
    font: 14px/16px Rubik-Regular, monospace;
    margin: 124px 0 0 0;
    height: calc(100% - 124px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--dark-gray-color);
    position: relative;
}

body[not-scroll] {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: inherit;
}

input {
    width: inherit;
    height: inherit;
    padding: 0;
    margin: 0;
    font: inherit;
    background: inherit;
    border: none;
    border-radius: inherit;
    outline: none;
    color: inherit;
}

input::placeholder {
    color: var(--light-gray-color);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    box-shadow: 0 0 10px -6px black;
    z-index: 100;
}

[but] {
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

[mobile],
[none],
.order-head-sber-pay[none] {
    display: none;
}

[price="rub"] {}

[price="cop"] {
    font-size: 50%;
}

[price="cop"]:after,
.offer-package-window .cop:after {
    content: "";
    background: url(/local/img/rub.svg) center no-repeat;
    width: 10px;
    height: 12px;
    display: inline-block;
    margin-left: 3px;
}

.offer-package-window .cop:after {
    margin-bottom: 3px;
}

.basket-form-title [price="cop"]:after,
.basket-pharmacy-elements-pharmacy-sber-pay-sum [price="cop"]:after,
.basket-pharmacy-elements-provider-sber-pay-sum [price="cop"]:after {
    background: url(/local/img/rub-w.svg) center no-repeat;
}

#echo-pre {
    white-space: pre-wrap;
    width: var(--main-width);
}

#sber-frame {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #00000094;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sber-frame iframe {
    width: 500px;
    height: 700px;
    border: 0;
    border-radius: 4px;
}

.header-first,
.header-second {
    display: flex;
    justify-content: center;
}

.header-first-container,
.header-second-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--main-width);
}

.header-first {
    background: var(--green-color);
    color: white;
    line-height: 40px;
}

.header-first-container {}

.first-logo {
    background: url(/local/img/logo.svg) center no-repeat;
    background-size: contain;
    font-size: 0px;
    width: 170px;
}

.first-city:before,
.first-city-pharmacy:before {
    content: attr(value);
    padding-left: 20px;
}

.first-city-pharmacy:before {
    background: url(/local/img/choose-pharmacy.svg) left no-repeat;
}

.first-city:before {
    background: url(/local/img/geolocation.svg) left no-repeat;
}

.first-city,
.first-city-pharmacy {
    cursor: pointer;
}

.first-city[open] .pharmacy-popup,
.first-city-pharmacy[open] .pharmacy-popup {
    display: flex;
}

.pharmacy-popup:before {
    content: "";
    background: var(--dark-gray-color);
    opacity: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.pharmacy-popup {
    display: none;
    position: fixed;
    color: var(--dark-gray-color);
    z-index: 2;
    cursor: default;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
}

.pharmacy-popup-container,
.city-popup-container {
    background: white;
    display: flex;
    border-radius: 4px;
    z-index: 1;
    overflow: hidden;
    height: 90vh;
    flex-direction: column;
}

.pharmacy-popup-container[show="map"] {
    width: 1042px;
    display: flex;
    flex-direction: column;
}

.pharmacy-popup-container-close:before {
    content: '';
    background: url("/local/img/close-btn.svg") no-repeat center;
    display: block;
    width: 20px;
    height: 20px;
}

.pharmacy-popup-container-close {
    cursor: pointer;
    margin-right: 14px;
}

.pharmacy-popup-container-title {
    margin-left: 14px;
}

.pharmacy-popup-container-header {
    display: flex;
    background-color: var(--green-color);
    color: white;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.pharmacy-popup-city-toggle-view,
.basket-map-toggle-view {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: sticky;
    bottom: 0;
    background-color: #EFF5F6;
    font-size: 16px;
    font-weight: 600;
    padding: 5px 0;
}

.pharmacy-popup-city-toggle-view [toggle] {
    width: 40px;
    height: 20px;
    background: var(--light-gray-color);
    display: inline-flex;
    margin-left: 10px;
    border-radius: 10px;
    position: relative;
    transition: background .5s;
}

.pharmacy-popup-city-toggle-view[select] [toggle] {
    background: var(--green-color);
}

.pharmacy-popup-city-toggle-view[select] [toggle]:before {
    left: 24px;
}

.first-city-choose-city-container {
    position: fixed;
    color: var(--dark-gray-color);
    z-index: 2;
    cursor: default;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
}

.first-city-choose-city-container:before {
    content: "";
    background: linear-gradient(180deg, #455A64 0%, rgba(0, 0, 0, 0.24) 22.01%, rgba(69, 90, 100, 0.00) 100%);
    opacity: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.first-city-choose-city {
    z-index: 3;
    background: white;
    color: black;
    position: absolute;
    left: calc(50% - 137px);
    top: 54px;
    width: 274px;
    border-radius: 4px;
    line-height: 1;
}

.first-city-choose-city-title {
    text-align: center;
    padding: 20px;
}

.first-city-choose-city-btns {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px 20px 20px;
}

.first-city-choose-city-all-right {
    padding: 8px 12px;
    background: var(--green-color);
    color: white;
    border-radius: 2px;
    cursor: pointer;
}

.first-city-choose-city-change {
    padding: 8px 12px;
    background: var(--background-color);
    border-radius: 2px;
    cursor: pointer;
}
/*.pharmacy-popup-city-toggle-view [toggle]:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 4px;*/
/*    left: 4px;*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    border-radius: 10px;*/
/*    background: white;*/
/*    transition: left .5s;*/
/*}*/

.pharmacy-popup-city {
    cursor: pointer;
    line-height: 1.5;
    padding: 10px 10px 10px 20px;
    font-weight: 600;
}

.pharmacy-popup-city[select] {
    background: #eff5f6;
    display: flex;
    align-items: center;
}

.pharmacy-popup-pharmacy[select="pharmacy"] {
    background-color: #EFF5F6;
    border-radius: 4px 4px 0px 0px;
    padding-bottom: 10px;
}

.pharmacy-popup-pharmacy-detail {
    font-size: 12px;
    padding: 6px 0px;
    line-height: 1;
    width: 100%;
    color: #455a64;
    border-radius: 2px;
    box-sizing: border-box;
}

.pharmacy-popup-pharmacy-title {
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}

.pharmacy-popup-city-list {
    position: relative;
    overflow: auto;
    background: #FFFFFF;
    width: 100%;
    flex: none;
}

.pharmacy-popup-container[show="map"] .pharmacy-popup-city-block {
    width: 304px;
}

.pharmacy-popup-city-block {
    width: 314px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pharmacy-popup-city-block[map] .pharmacy-popup-pharmacy-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pharmacy-popup-city-block[map] .pharmacy-popup-pharmacy-selected-pharmacy {
    width: 264px;
}

.pharmacy-popup-city-block[list] .pharmacy-popup-pharmacy-selected-pharmacy {
    display: none;
}

.pharmacy-popup-pharmacy-list {
    overflow: auto;
    height: 100%;
}

.pharmacy-popup-city-container {
    position: relative;
    overflow: auto;
    display: flex;
    /*width: 100%;*/
    justify-content: right;
    height: 100%;
    /*padding-right: 8px;*/
}

.pharmacy-popup-city-container[show] {
    display: flex;
}

.pharmacy-popup-city-block[map] .pharmacy-popup-pharmacy {
    padding: 16px 14px 16px 14px;
}

.pharmacy-popup-pharmacy {
    cursor: pointer;
    display: none;
    padding: 10px 14px 16px 20px;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #EFEFEF;
}

.pharmacy-popup-pharmacy-list::-webkit-scrollbar,
.pharmacy-popup-city-list::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

.pharmacy-popup-pharmacy-list::-webkit-scrollbar-thumb,
.pharmacy-popup-city-list::-webkit-scrollbar-thumb {
    background-color: var(--green-color);
    border-radius: 2px;
}

.pharmacy-popup-pharmacy-list::-webkit-scrollbar-track,
.pharmacy-popup-city-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    border-radius: 4px;
}

/*.pharmacy-popup-pharmacy-list .pharmacy-popup-pharmacy:not(:first-child) {*/
/*    margin-top: 8px;*/
/*}*/

.pharmacy-popup-city-block[map] .pharmacy-popup-pharmacy {
    border-bottom: 1px solid #E2E6E7;
    width: 264px;
}

.pharmacy-popup-city-block[map] .pharmacy-popup-pharmacy[select="pharmacy"] {
    border-bottom: unset;
}

.pharmacy-popup-pharmacy[with-details] {
    line-height: 1;
}

.pharmacy-popup-pharmacy[select] {
    display: flex;
    /*align-items: center;*/
    flex-direction: column;
}

.pharmacy-popup-city-block[map] .main-choose-map-pharmacy-timing {
    display: flex;
    justify-content: flex-start;
}

.main-choose-map-pharmacy-timing {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    font-size: 12px;
}

.pharmacy-popup-pharmacy-selected-pharmacy {
    background: #E8EFF0;
    border-radius: 0px 0px 4px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.main-choose-map-pharmacy-timing[open] {
    color: var(--green-color);
}

.main-choose-map-pharmacy-timing[close] {
    color: var(--orange-color);
}

.choose-map-pharmacy-break-time {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    font-size: 12px;
}

.choose-map-pharmacy-timing-left-column {
    width: 23%;
    text-align: left;
    box-sizing: border-box;
}

.choose-map-pharmacy-timing-right-column {
    width: 60%;
    text-align: left;
    box-sizing: border-box;
}

.pharmacy-popup-container[show="map"] #pharmacy-popup-pharmacy-map {
    display: block;
}

.pharmacy-map-select-title-detail {
    font-weight: 400;
}

#pharmacy-popup-pharmacy-map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 304px;
    display: none;
}

.pharmacy-popup-pharmacy-map-select {
    position: absolute;
    right: 3px;
    bottom: 3px;
    background: white;
    padding: 10px;
    width: 250px;
    border-radius: 2px;
    box-shadow: 0 0 4px -2px black;
    line-height: 2;
}

.pharmacy-map-select-title {
    text-align: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--light-gray-color);
    padding-bottom: 10px;
    font-weight: 900;
}

.pharmacy-map-select-schedule {
    text-align: center;
    font-size: 12px;
}

.pharmacy-map-select-schedule div[select] {
    font-weight: 900;
    font-size: 14px;
}

.pharmacy-map-select-schedule div[select]:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange-color);
    margin: 0 10px 0 -20px;
}

.pharmacy-map-select-schedule div[select="open"]:before {
    background: var(--green-color);
}

.pharmacy-map-select-but {
    text-align: center;
    background: var(--green-color);
    color: white;
    cursor: pointer;
    border-radius: 2px;
}

.pharmacy-map-select-but:before {
    content: "Выбрать аптеку";
}

.pharmacy-map-select-but[selected="true"] {
    background: var(--light-gray-color);
    cursor: default;
}

.pharmacy-map-select-but[selected="true"]:before {
    content: "Выбрана";
}

.pharmacy-popup-pharmasy-search {
    display: flex;
    justify-content: center;
    padding: 20px 20px 0 20px;
    border-radius: 4px;
}

.reset-pharmacys-but {
    display: flex;
    font-weight: 600;
    cursor: pointer;
    /*background-color: #EFF5F6;*/
    padding-left: 30px;
    border-radius: 4px;
    color: var(--green-color);
    margin-top: 10px;
}

.pharmacy-popup-city-block[list] .reset-pharmacys-but {
    padding-left: 20px;
}

.pharmacy-search-input {
    background-color: #EFF5F6;
    color: black;
    width: 100%;
    padding-left: 15px;
}

.pharmacy-search-input::placeholder {
    color: #A8C5C9;
}

.first-phone {}

.header-second {
    background: white;
    padding: 20px 0;
}

.header-second-container {
    position: relative;
}

.second-catalog-button:before {
    content: "";
    background: url(/local/img/catalog-button.svg) left no-repeat;
    width: 24px;
    height: 14px;
}

.second-catalog-button {
    background: var(--green-color);
    color: white;
    padding: 8px 16px;
    height: 42px;
    padding: 0 16px;
}

.mobile-second-search,
.second-search {
    width: 100%;
    background: var(--background-color);
    border-radius: 2px 0px 0px 2px;
    height: 44px;
    position: relative;
    margin: 0 0 0 20px;
}

.mobile-second-search input,
.second-search input {
    z-index: 1;
    position: relative;
    padding-left: 20px;
    width: calc(100% - 50px);
}

.mobile-second-search[active] .second-search-list,
.second-search[active] .second-search-list {
    display: block;
}

.second-search-list {
    position: absolute;
    background: var(--background-color);
    padding: 43px 20px 10px 20px;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    box-shadow: 0 0 4px -2px black;
    z-index: 0;
    border-radius: 2px;
}

.second-search-list-el {
    margin-bottom: 10px;
    display: block;
}

.second-search-list-el[select]:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green-color);
    display: inline-block;
    margin-right: 10px;
    margin-bottom: -1px;
}

.second-search-list-el:first-child {
    border-top: 1px solid var(--light-gray-color);
    margin-top: 1px;
    padding-top: 10px;
}

.second-search-list-el:last-child {
    margin-bottom: 0px;
}

.second-favorite,
.second-order,
.second-basket {
    padding-top: 28px;
}

.second-favorite {
    background: url(/local/img/favorite.svg) center top no-repeat;
    margin-right: 20px;
}

.second-order {
    background: url(/local/img/order.svg) center top no-repeat;
    margin-right: 20px;
}

.second-basket {
    background: url(/local/img/basket.svg) center top no-repeat;
    position: relative;
}

/*.second-basket:after { content: "Корзина"; }*/

.mobile-navigation [nav="basket"][count]:after,
.mobile-navigation [nav="order"][count]:after,
.mobile-navigation [nav="favorite"][count]:after,
.second-order[count]::before,
.second-basket[count]:before,
.second-favorite[count]:before {
    content: attr(count);
    position: absolute;
    top: -8px;
    right: 0;
    width: 28px;
    background: var(--green-color);
    color: white;
    font-size: 14px;
    text-align: center;
    border-radius: 2px;
    padding-top: 2px;
}

.second-order[count]::before {
    right: 78px;
}

.second-favorite[count]::before {
    right: 156px;
}

main {
    padding-top: 32px;
    width: var(--main-width);
    flex: 1 0 auto;
    margin-bottom: 20px;
}

.main-container {}

.main-banner {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.main-banner-list {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.banner-img-picture {
    display: block;
}

.banner-list-el {
    position: absolute;
    top: -110%;
    line-height: 0;
    transition: right .5s, left .5s;
    cursor: pointer;
}

.banner-list-el[select] {
    top: 0;
}

.banner-list-el[left] {
    top: 0;
    z-index: 1;
    animation: banner-list-el-left .5s ease-in-out;
}

.banner-list-el[right] {
    top: 0;
    z-index: 1;
    animation: banner-list-el-right .5s ease-in-out;
}

@keyframes banner-list-el-left {
    from {
        left: -100%;
    }

    to {
        left: 0;
    }
}

@keyframes banner-list-el-right {
    from {
        right: -100%;
    }

    to {
        right: 0;
    }
}

.main-banner:hover .banner-controll-el {
    opacity: 1;
}

.banner-controll-el {
    position: absolute;
    bottom: calc(25px + 30px);
    background: var(--footer-color);
    width: 50px;
    height: 30px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    opacity: 0.1;
    transition: opacity .5s;
}

.banner-controll-el[com="left"] {
    left: 10px;
}

.banner-controll-el[com="left"]:before {
    content: "";
    background: url(/local/img/main-banner-arrow.svg) center no-repeat;
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}

.banner-controll-el[com="right"] {
    right: 10px;
}

.banner-controll-el[com="right"]:before {
    content: "";
    background: url(/local/img/main-banner-arrow.svg) center no-repeat;
    width: 100%;
    height: 100%;
}

.main-order {
    margin-top: 20px;
}

.main-order-list {
    display: flex;
    overflow: hidden;
    position: relative;
    margin-bottom: 34px;
}

.order-list-el {
    width: 408px;
    flex: none;
    margin-right: 20px;
    background: white;
    padding: 16px 16px 32px 16px;
    border-radius: 4px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    row-gap: 10px;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.order-list-el:last-child {
    margin-right: 0px;
}

.order-list-el:after {
    content: "Будет готов " attr(order-date);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 22px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--light-gray-color);
}

.order-list-el[order-status="D"]:after {
    content: "Хранится до " attr(order-date);
}

.order-list-el-oid {}

.order-list-el-status:before {
    color: white;
    width: 80px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
}

.order-list-el[order-status="D"]:after {
    background: var(--green-color);
}

.order-list-el[order-status="D"] .order-list-el-status:before {
    content: "Готов";
    background: var(--green-color);
}

.order-list-el[order-status="N"]:after {
    background: var(--orange-color);
}

.order-list-el[order-status="N"] .order-list-el-status:before {
    content: "Принят";
    background: var(--orange-color);
}

.order-list-el-blank {
    width: 441px;
    background: white;
    padding: 16px;
    border-radius: 4px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    row-gap: 10px;
    position: relative;
    overflow: hidden;
    cursor: default;
    justify-content: center;
    color: #8D9BA1;
}

.order-list-el-blank-block {
    display: flex;
}

.order-list-el-blank-block-text {
    width: 140px;
    margin-left: 10px;
    line-height: 1.7;
}

.order-list-el-status {}

.order-list-el-pharmacy {}

.order-list-el-sum {
    text-align: center;
}

.main-order-list-but {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.main-order-list-but>div {
    background: url(/local/img/main-banner-arrow.svg) center no-repeat;
    width: 50px;
    height: 20px;
    background-color: var(--light-gray-color);
}

.main-order-list-but [but="main-order-list-left"] {
    transform: rotate(180deg);
}

.main-order-list-but [but="main-order-list-right"] {}

.main-catalog {
    display: flex;
    margin-top: 24px;
    justify-content: space-between;
}

.main-catalog div {
    background-color: white;
    width: 130px;
    height: 110px;
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.main-catalog img {
    width: 50px;
}

.main-catalog span {
    position: absolute;
    opacity: 0;
    width: calc(100% - 20px);
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-gray-color);
    color: white;
    padding: 0 10px;
    text-align: center;
    transition: opacity .5s;
}

.main-catalog div:hover span {
    opacity: .95;
}

.el {
    background: white;
    border-radius: 4px;
    /*overflow: hidden;*/
    position: relative;
}

.el-head {
    position: absolute;
    left: 10px;
    top: 0;
    display: flex;
}

.el-head>div {
    width: 20px;
    height: 20px;
    border-radius: 0;
    margin-right: 10px;
    white-space: nowrap;
    background-position: left;
    background-repeat: no-repeat;
    z-index: 1;
}

.el-head>div>div {
    margin-left: 20px;
    line-height: 20px;
    width: fit-content;
    padding: 0 4px 0 0;
    color: white;
    /*display: none;*/
}

.el-head>div:hover {
    z-index: 1;
}

.el-head>div:hover>div {
    display: block;
}



.el-fav-block {
    position: absolute;
    left: 10px;
    top: 0;
    display: flex;
}

.el-fav-block>div {
    width: 20px;
    height: 20px;
    border-radius: 0;
    margin-right: 10px;
    white-space: nowrap;
    background-position: left;
    background-repeat: no-repeat;
}

.el-fav-block>div>div {
    margin-left: 20px;
    line-height: 20px;
    width: fit-content;
    padding: 0 4px;
    color: white;
    display: none;
}

.el-fav-block>div:hover {
    z-index: 1;
}

.el-fav-block>div:hover>div {
    display: block;
}

.el[favorite] .el-favorite {
    background: url(/local/img/favorite-on.svg);
}

.el-favorite {
    right: 150px;
    bottom: 20px;
    position: absolute;
    display: flex;
    width: 24px;
    height: 21px;
    background: url(/local/img/favorite-off.svg);
}

.el-recept {
    background: url(/local/img/el-head-recept.svg);
    font-size: 12px;
}

.el-best {
    background: url(/local/img/el-head-best.svg);
}

.el-new {
    background: url(/local/img/el-head-new.svg);
}

.el-excl {
    background: url(/local/img/el-head-excl.svg);
}

.el-orig {
    background: url(/local/img/el-head-orig.svg);
}

.el-recept>div {
    background: #19aea8;
}

.el-best>div {
    background: #2a74c8;
}

.el-new>div {
    background: #857fb2;
}

.el-excl>div {
    background: #f18656;
}

.el-orig>div {
    background: #61c3d4;
}

.el-body {
    display: grid;
    grid-template-areas: "img name price"
                        "img ava basket";
    grid-template-columns: 130px 1fr 120px;
    grid-template-rows: 1fr 30px;
    column-gap: 16px;
    position: relative;
}

.el-body[employee] {
    grid-template-rows: 50px 85px 30px;
    grid-template-areas: "img name price"
                        "img . employee"
                        "img ava basket";
}

.el-img {
    grid-area: img;
}

.el-name {
    grid-area: name;
}

.el-price {
    grid-area: price;
}

.el-availability {
    grid-area: ava;
}

.el-basket,
.subscribe {
    grid-area: basket;
}

.el-body {
    padding: 16px 21px 16px 16px;
}

.el-img {
    width: 130px;
    height: 130px;
    line-height: 0;
    flex: none;
}

.el[last-seen] .el-img-picture {
    filter: grayscale(100%);
}

.el-img-picture {
    display: block;
}

.el-img img {
    width: 100%;
    height: 100%;
}

.el-name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 900;
}

.el-recept-info {
    color: #f18656;
    background: #f186563b;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 2px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 100;
}

.el-manufacturer {
    color: var(--light-gray-color);
    font-size: 14px;
    line-height: 1;
    margin: 10px 0;
    font-weight: 100;
    position: relative;
}

.el-availability {
    align-self: center;
    justify-self: baseline;
    background: var(--dark-gray-color);
    color: white;
    padding: 0 10px;
    line-height: 30px;
}

.el[not-for-sale] .el-price:before {
    content: "Нет в наличии";
    font-size: 16px;
    font-weight: 100;
}

.el[not-for-sale] .el-price {
    margin: 30px 0px 0px 0px;
}

.el-price {
    align-self: center;
    justify-self: center;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 30px;
    white-space: nowrap;
    position: relative;
    cursor: default;
    display: flex;
    align-items: baseline;
}

.el-body[employee] .el-price {
    margin-bottom: unset;
}

.el-availability-pharmacy-price:hover .el-availability-pharmacy-price-new,
.el-price:hover .el-price-new {
    opacity: 0;
}

.el-availability-pharmacy-price:hover .el-availability-pharmacy-price-old,
.el-price:hover .el-price-old {
    opacity: 1;
}

.el-availability-pharmacy-price-new,
.el-price-new {
    transition: opacity .5s;
    display: flex;
    align-items: baseline;
}

.el-price-new[rub]:before,
.el-price-new[per]:before {
    position: absolute;
    top: -26px;
    right: -20px;
    z-index: 1;
    background-color: var(--green-color);
    color: white;
    padding: 2px 6px 2px 6px;
    font-size: 12px;
    border-radius: 2px;
    font-weight: 100;
}

.el-price-new[rub]:before {
    content: "- " attr(rub)"р";
}

.el-price-new[per]:before {
    content: "- " attr(per);
}

.el-availability-pharmacy-price-new [price="rub"],
.el-availability-pharmacy-price-new [price="cop"],
.el-price-new [price="rub"],
.el-price-new [price="cop"],
.availability-employee-price [price="rub"],
.availability-employee-price [price="cop"],
.employee-price [price="rub"],
.employee-price [price="cop"] {
    position: relative;
    z-index: 1;
}

.el-availability-pharmacy-price-new:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 10px;
    top: -8px;
    bottom: -6px;
    background: var(--yellow-color);
    border-radius: 2px;
    transform: rotate(-2deg);
}

.el-price-new:after {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: -14px;
    bottom: -10px;
    background: var(--yellow-color);
    border-radius: 2px;
    transform: rotate(-2deg);
}

.el-availability-pharmacy-price-old,
.el-price-old {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity .5s;
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

/*
.el-availability-pharmacy-price-new {}
.el-availability-pharmacy-price-old {}
*/

.el-availability-list[open] {
    display: block;
}

.el-availability-list {
    padding: 0px 10px;
    display: none;
}

.el-availability-pharmacy {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--background-color);
    padding: 10px 6px 10px 10px;
}

.el-availability-pharmacy-name {
    width: 100%;
}

.el-availability-pharmacy-name:after {
    content: "В аптеке " attr(count)" шт.";
    display: block;
    font-size: 12px;
    margin-top: 10px;
    color: var(--green-color);
}

.el-availability-pharmacy-price {
    flex: none;
    font-size: 20px;
    width: 110px;
    text-align: center;
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.el-availability-pharmacy-price [price="cop"]:after {
    filter: brightness(0.4);
}

.el-availability-pharmacy-basket {
    flex: none;
    background: var(--green-color);
    color: white;
    height: 30px;
    width: 120px;
    position: relative;
}

.el-availability-pharmacy-basket[status="pharmacy"],
.el-basket[status="pharmacy"] {
    background: var(--green-color);
}

.el-availability-pharmacy-basket[status="provider"],
.el-basket[status="provider"] {
    background: var(--orange-color);
}

.el-body .el-basket[status="pharmacy"]:before {
    content: "В аптеке " attr(ph)" шт.";
    background: url(/local/img/el-in-pharmacy.svg) left no-repeat;
}

.el-basket[status="provider"]:before {
    content: attr(provider-date);
    background: url(/local/img/el-provider-clock.svg) left no-repeat;
}

.el-availability-list .el-basket {
    height: 30px;
    width: 120px;
    flex: none;
}

.el-basket[status="other"]:before {
    content: "Нет в аптеке";
    background: url(/local/img/el-empty.svg) left no-repeat;
}

.el-basket[status="other"]:before,
.el-basket[status="pharmacy"]:before,
.el-basket[status="provider"]:before {
    position: absolute;
    bottom: calc(100% + 10px);
    color: var(--dark-gray-color);
    cursor: default;
    padding-left: 20px;
}

.el-basket[status="other"][count_pharmacies]:before,
.el-basket[status="pharmacy"][count_pharmacies]:before,
.el-basket[status="provider"][count_pharmacies]:before {
    content: attr(count_pharmacies);
}

.el-availability-pharmacy-basket:after,
.el-basket[status="pharmacy"]:after {
    content: "В корзину";
}

.el-basket[status="provider"]:after {
    content: "Под заказ";
}

.el-basket[status="other"]:after {
    content: "Другие аптеки";
}

.el-basket[status="none"]:after {
    content: "Нет в наличии";
}

.el-basket[status="subscribe"] {
    display: none;
}

.el[not-for-sale] .el-basket {
    display: none;
}

.el-basket {
    width: 125px;
    background: var(--dark-gray-color);
    color: white;
    height: 30px;
    position: relative;
    user-select: none;
    transition: background .5s;
}

.el-availability-pharmacy-basket[ba]>div,
.el-basket[ba]>div {
    display: flex;
}

.el-availability-pharmacy-basket[status="provider"][ba]:after,
.el-availability-pharmacy-basket[status="pharmacy"][ba]:after,
.el-availability-pharmacy-basket[status="other"][ba]:after,
.el-basket[status="provider"][ba]:after,
.el-basket[status="pharmacy"][ba]:after {
    content: '';
    position: absolute;
    font-size: 18px;
}

.el-availability-pharmacy-basket>div,
.el-basket>div {
    display: none;
    width: 50%;
    justify-content: center;
    align-items: center;
}

.el-availability-pharmacy-basket>div[but="el-in-basket-minus"],
.el-availability-pharmacy-basket>div[but="el-in-basket-plus"],
.el-basket>div[but="el-in-basket-minus"],
.el-basket>div[but="el-in-basket-plus"] {
    height: 100%;
}

.el-footer:before {
    content: "";
    display: inline-block;
    background: url(/local/img/el-info.svg) center no-repeat;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-top: -2px;
    padding: 1px;
}

.el-footer {
    background: var(--footer-color);
    padding: 7px 4px 5px 8px;
    display: flex;
    align-items: center;
}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--footer-color);
}

.footer-container {
    width: var(--main-width);
    margin: 20px 0;
}

.footer-first {
    display: flex;
    justify-content: space-between;
}

.footer-first-legal-address {
    line-height: 22px;
}

.footer-first-links {
    width: 167px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    grid-template-columns: 50% 50%;
}

.connection-phone {
    display: block;
    text-align: center;
    font-size: 22px;
    line-height: 22px;
    background: url(/local/img/phone-footer.svg) left no-repeat;
    padding-left: 26px;
}

.connection-message,
.connection-call {
    background: var(--green-color);
    color: white;
    line-height: 30px;
}

.connection-call {
    margin: 20px 0;
}

.modal-user-auth .user-auth-container-input {
    padding: 0 10px;
}

.modal-user-auth .user-auth-container-input input {
    width: 100%;
}

.modal-user-auth {
    top: -150px;
}

.connection-form {
    top: 0;
}

.connection-form,
.modal-user-auth {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.connection-form:before,
.modal-user-auth:before {
    content: "";
    background: var(--dark-gray-color);
    opacity: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
}

.connection-form[show] {
    display: flex;
}

.connection-form[done] .connection-form-container:before {
    content: "Ваша заявка принята";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--green-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    border-radius: 4px;
}

.connection-form-container,
.user-auth-container {
    background: white;
    padding: 20px;
    border-radius: 4px;
    width: 300px;
    text-align: center;
    position: relative;
}

.connection-form-header {
    margin-bottom: 20px;
}

.connection-form-header-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.connection-form-body {
    display: flex;
    flex-direction: column;
}

.connection-form-body textarea,
.connection-form-body input {
    margin-bottom: 20px;
    background: var(--background-color);
    border-radius: 2px;
    padding: 10px;
    border: none;
    font: inherit;
    resize: vertical;
    outline: none;
    color: inherit;
}

.connection-form-body textarea {
    height: 80px;
}

.connection-form-body textarea::placeholder,
.connection-form-body input::placeholder {
    color: var(--light-gray-color);
}

.connection-form[direction="call"] .connection-form-header-title:before {
    content: "Введите ваши имя и телефон";
}

.connection-form[direction="call"] .connection-form-header-info:before {
    content: "чтобы заказать обратный звонок";
}

.connection-form[direction="call"] .connection-form-body-send:before {
    content: "Заказать обратный звонок";
}

.connection-form[direction="call"] [name="email"],
.connection-form[direction="call"] [name="text"] {
    display: none;
}

.connection-form[direction="message"] .connection-form-header-title:before {
    content: "Служба поддержки клиентов";
}

.connection-form[direction="message"] .connection-form-header-info:before {
    content: "В случае если Вы столкнулись с проблемой, просим Вас максимально подробно ее описать, чтобы мы смогли оперативно принять все меры для ее устранения.";
}

.connection-form[direction="message"] .connection-form-body-send:before {
    content: "Отправить";
}

.connection-form[direction="message"] {}

.connection-form[direction="message"] {}

.connection-form-body-info {
    margin-bottom: 20px;
    font-size: 12px;
}

.connection-form-body-send {
    background: var(--green-color);
    color: white;
    font-size: 16px;
    padding: 10px 0;
}

iframe[title="reCAPTCHA"].err {
    border: 1px solid red;
    width: 99%;
    height: 75px;
    border-radius: 5px;
}

.connection-form-body-send.wait {
    cursor: wait;
}

.connection-form-body-send.err {
    background: red;
    cursor: default;
}

.connection-form-body input.err {
    background: var(--background-color);
    border: 1px solid var(--background-color);
    border-radius: 4px;
    border-color: red;
}

.footer-second {
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
}

.footer-second>a {
    background: var(--light-gray-color);
    line-height: 26px;
    padding: 0px 4px;
    border-radius: 2px;
}

.footer-third {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--light-gray-color);
    font-size: 12px;
    text-align: center;
}

div[today] {
    background-color: #e0f0f3;
    color: #087f7a;
    margin: 10px 60px;
    padding: 8px 0 6px 0;
}

.clear-input-btn {
    position: absolute;
    top: 15px;
    right: 10px;
    z-index: 1;
    display: none;
}

.clear-input-btn::before {
    content: '';
    background: url(/local/img/clear-input.svg) center no-repeat;
    width: 18px;
    height: 14px;
    display: block;
    cursor: pointer;
}

div[show],
.el-basket-product-amount[show],
.modal-remove-item[show],
.modal-remove-user {
    display: block;
}

.modal-remove-user .modal-buttons {
    min-width: 90px;
}

.main-search-btn {
    background-color: #0DACA5;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    width: 16%;
    border-radius: 0px 2px 2px 0px;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

.banner-description {
    font-size: 18px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--footer-color);
    padding: 3px 0;
    text-align: center;
    text-transform: uppercase;
}

.banner-line {
    border-bottom: 1px solid darkgray;
    width: 30%;
    position: absolute;
    right: 35%;
}

.chat-block {
    position: fixed;
    right: 165px;
    bottom: 120px;
    /* box-shadow: 0px 2px 5px 0 #064c49; */
    border-radius: 50px;
    cursor: pointer;
    z-index: 2;
}

.chat-block::before {
    content: '';
    background: url(/local/img/chat-block.svg) no-repeat center;
    width: 50px;
    height: 50px;
    display: block;
}

.chat-block[open]::before {
    background: url(/local/img/close-block-chat.svg) no-repeat center;
}

.chat-block-hidden {
    position: fixed;
    right: 165px;
    bottom: 120px;
    height: 60px;
    width: 50px;
    /* background: #88cbc8; */
    background: white;
    color: #fff;
    padding: 12px;
    margin: auto;
    text-align: center;
    opacity: 0;
    transition: height 1s, opacity 0.9s;
    box-sizing: border-box;
    border-radius: 50px 50px 50px 50px;
    display: flex;
    align-items: center;
    flex-direction: column;

}

[height-view] {
    height: 140px;
    opacity: 1;
    z-index: 1;
}

.tg-chat::before {
    content: '';
    background: url(/local/img/tm.svg) no-repeat center;
    width: 32px;
    height: 32px;
    display: block;
}

.wa-chat {
    margin-top: 12px;
    opacity: 0;
    transition: 0.3s;
    /* width: 0px; */
    height: 0px;
}

.tg-chat {
    opacity: 0;
    transition: 1s;
}

[height-view] .wa-chat,
[height-view] .tg-chat {
    opacity: 1;
    transition: 2.5s;
    width: 32px;
    height: 32px;
}

[height-view] .wa-chat::before {
    width: 32px;
    height: 32px;
}

.wa-chat::before {
    content: '';
    background: url(/local/img/wapp.svg) no-repeat center;
    width: 0px;
    height: 0px;
    display: block;
}

.anchor {
    position: fixed;
    bottom: -75px;
    transition: .5s;
    cursor: pointer;
    right: 170px;
    z-index: 2;
    content: '';
    background: url(/local/img/anchor.svg) no-repeat center;
    display: block;
    width: 40px;
    height: 40px;
}

.main-title-h1 {
    text-align: center;
    font-size: 1px;
    margin: 0px 0px;
    color: #eff5f6;
}

.catalog-elements .main-title-h1 {
    margin: -13px 0px;
}

.seo-text {
    margin-top: 24px;
    background: white;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

[opacity] {
    opacity: 0.5;
}

.open-seo-text {
    align-self: center;
    text-align: center;
    padding: 5px;
    background: var(--background-color);
    cursor: pointer;
}

.open-seo-text[open]::before {
    content: 'Развернуть';
}

.open-seo-text::before {
    content: 'Свернуть';
}

.seo-text p:first-child {
    margin-bottom: 0;
}

.el-basket-product-amount {
    width: 100%;
    text-align: center;
    -moz-appearance: textfield;
    display: none;
}

.el-basket-product-amount::-webkit-outer-spin-button,
.el-basket-product-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal-remove-user {
    width: 300px;
}

.modal-remove-item {
    width: 350px;
}

.modal-remove-user .modal-title {
    line-height: 20px;
}

.modal-remove-item,
.modal-remove-user {
    position: fixed;
    background-color: white;
    z-index: 1;
    display: none;
    top: 25%;
}

.modal-remove-item:before,
.modal-remove-user:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #7C7B7E8A;
    opacity: 50%;
    z-index: -1;
}

.modal-title {
    background-color: #D5E8EB;
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
}

.modal-label-title {
    text-align: center;
    padding: 20px;
    border: 1px solid lightgray;
    margin: 20px;
}

.modal-group {
    background-color: white;
    padding: 20px;
}

.modal-group-buttons {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

.modal-buttons {
    padding: 10px 14px;
    border-radius: 2px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

.modal-button-second {
    background-color: #ACC5C9;
}

.modal-button-main {
    background-color: #0DACA5;
    min-width: 120px;
}

.info-privacy {
    font-size: 9px;
    margin-top: 16px;
    text-align: center;
    line-height: 14px;
}

.info-privacy-basket {
    margin: -3px 0 16px 0;
}

.info-privacy a {
    color: var(--green-color);
}

.g-recaptcha {
    margin-bottom: 20px;
}

.el-favorite-bubble {
    position: absolute;
    background-color: var(--dark-gray-color);
    color: white;
    border-radius: 5px;
    padding: 4px 10px;
    bottom: 30px;
    right: -5px;
    font-size: 11px;
    visibility: hidden;
}

.el-favorite-bubble>.arrow-down {
    top: 20px;
    right: 10px;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--dark-gray-color);
}

.el .el-favorite .el-favorite-bubble {
    visibility: hidden;
}

.el .el-favorite:hover .el-favorite-bubble {
    visibility: visible;
}

.price-from-prifix {
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.el-price[price-from-prefix] span[itemprop="price"]:before,
.el-price[price-from-span] span[itemprop="price"]:before {
    content: 'от ';
    font-size: 14px;
}

.employee-price-price {
    font-weight: 900;
    font-size: 18px;
}

.employee-price-price[price-from-span] [price="rub"]:before {
    content: 'от ';
    font-size: 14px;
}

.choose-map-pharmacy-detail-block {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.basket-choose-map-pharmacy-favorite {
    position: absolute;
    top: 13px;
    right: 15px;
    cursor: pointer;
}

.pharmacy-popup-city-block[list] .choose-map-pharmacy-favorite {
    display: none;
}

.pharmacy-popup-city-block[map] .choose-map-pharmacy-favorite {
    position: absolute;
    right: 10px;
    cursor: pointer;
    bottom: 15px;
}

.basket-choose-map-pharmacy-favorite:before,
.choose-map-pharmacy-favorite:before {
    content: '';
    background: url(/local/img/favorite-off.svg) no-repeat center;
    width: 24px;
    height: 24px;
    display: block;
}

.basket-choose-map-pharmacy-favorite[selected]:before,
.choose-map-pharmacy-favorite[selected]:before {
    background: url(/local/img/favorite-on.svg) no-repeat center;
}

.basket-choose-map-pharmacy-favorite::after,
.choose-map-pharmacy-favorite:after {
    content: 'Сделать любимой';
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -32px;
    left: -100px;
    font-size: 12px;
    background: #455A64;
    color: white;
    width: 124px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 2px;
    text-align: center;
}

.basket-choose-map-pharmacy-favorite[selected]::after,
.choose-map-pharmacy-favorite[selected]:after {
    content: 'Убрать из любимых';
}

.basket-choose-map-pharmacy-favorite:hover::after,
.choose-map-pharmacy-favorite:hover::after {
    opacity: 1;
}

.triangle {
    top: -6px;
    right: 7px;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--dark-gray-color);
    opacity: 0;
}

.basket-choose-map-pharmacy-favorite:hover .triangle,
.choose-map-pharmacy-favorite:hover .triangle {
    opacity: 1;
}

.el-img-picture {
    position: relative;
}

.question {
    border-radius: 50%;
    background: var(--dark-gray-color) url(/local/img/question.svg) no-repeat center;
    bottom: 0;
    position: absolute;
    width: 8px;
    height: 8px;
    padding: 2px;
}

.question:hover::after,
.el-manufacturer text:hover::after {
    opacity: 1;
}

.click-btn-animation {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

.el-manufacturer text::after,
.question::after {
    transition: 0.5s;
    opacity: 0;
    position: absolute;
    font-size: 10px;
    background: var(--background-color);;
    color: #95aaaf;
    line-height: 1;
    padding: 5px;
    border-radius: 2px;
}

.el-manufacturer text::after {
    content: 'Производитель';
    top: 15px;
    left: 0;
}

.question::after {
    content: 'Внешний вид товара может отличаться от изображённого на фотографии';
    width: 105px;
    left: 14px;
    bottom: 0;
}

div[err] {
    border: 1px solid red;
}

@keyframes a1{
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes a2{
    from {color: var(--green-color);}
    to {color: var(--dark-gray-color);}
}

.brand-banner-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 24px auto 24px;
    overflow: hidden;
}

.brand-banner-wrapper {
    overflow: hidden;
    width: 100%;
}

.brand-banner-items {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    will-change: transform;
    user-select: none;
}

:root {
    --items-per-page: 7;
}

.brand-banner-item {
    flex: 0 0 calc((100% / var(--items-per-page)) - 1px);
    max-width: calc((100% / var(--items-per-page)) - 1px);
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    width: 127px;
    height: 68px;
    position: relative;
}

.brand-banner-item picture {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    display: block;
}

.brand-banner-item picture:hover {
    transform: scale(1.2);
}

.brand-banner-item img {
    width: 100%;
    height: auto;
}

.brand-banner-navi-left,
.brand-banner-navi-right {
    color: white;
    background: var(--footer-color);
    width: 50px;
    height: 30px;
    border-radius: 2px;
    flex: none;
    cursor: pointer;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.brand-banner-navi-left {
    left: 10px;
    padding-right: 2px;
}

.brand-banner-navi-right {
    right: 10px;
    padding-left: 2px;
}

.brand-banner-navi-left,
.brand-banner-navi-right {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.brand-banner-container:hover .brand-banner-navi-left,
.brand-banner-container:hover .brand-banner-navi-right {
    opacity: 0.7;
    pointer-events: auto;
}

.brand-banner-navi-left:before,
.brand-banner-navi-right:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 22px;
}

.brand-banner-navi-left:before {
    content: "";
    background: url("/local/img/main-banner-arrow.svg") no-repeat center center;
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}

.brand-banner-navi-right:before {
    content: "";
    background: url("/local/img/main-banner-arrow.svg") no-repeat center center;
    width: 100%;
    height: 100%;
}

.pay-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(69, 90, 100, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.pay-modal {
    width: 360px;
    background-color: white;
    padding: 20px 30px 20px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.pay-modal[one-provider] {
    min-height: 146px;
}

.pay-modal[two-provider] {
    min-height: 216px;
}

.pay-modal[three-provider] {
    min-height: 288px;
}

.pay-modal-text {
    font-size: 18px;
    margin: 10px;
    color: #455A64;
    font-weight: bold;
    user-select: none;
}

.payment-option {
    background-color: #eff5f6;
    color: #323232;
    border-radius: 3px;
    padding: 8px 15px;
    margin: 10px 0;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.payment-option[provider="alfa"]:hover {
    background-color: #e2978f;
}

.payment-option[provider="sber"]:hover {
    background-color: #58d97b;
}

.payment-icons {
    display: flex;
    gap: 15px;
    user-select: none;
    align-items: center;
}

.payment-icons img {
    margin: 0 5px;
    align-self: center;
    pointer-events: none;
    background-color: white;
    padding: 2px;
    border-radius: 4px;
}

.payment-icons .visa,
.payment-icons .mir {
    height: 7px;
}

.payment-icons .mir {

}

.payment-icons .mastercard,
.payment-icons .unionpay {
    height: 10px;
}

.payment-label {
    font-size: 16px;
    margin: 8px 0 0;
    color: #455A64;
    user-select: none;
}

.card-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-option[provider="sber"] {
    order: 1;
    margin-top: 0px;
}

.payment-option[provider="sber-pay"] {
    order: 2;
    margin-top: 0;
}

.payment-option .payment-label{
    color: white;
}

.payment-option[provider="alfa"] {
    order: 3;
    margin-top: 0;
    z-index: 2;
    background-color: #e32a16;
}

.sber-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    padding: 9px;
    background: linear-gradient(45deg, #87EF3D, #00AFED);
    border-radius: 3px;
    z-index: 2;
}

.sber-card {
    cursor: pointer;
    background-color: #23b13e;
    color: white;
    padding: 8px;
    font-size: 16px;
}

.pay-modal-error-text {
    order: 4;
    z-index: 1;
    margin-top: -40px;
    transition: margin-top 0.5s ease-in-out;
    color: var(--orange-color);
    font-size: 16px;
}

.pay-modal-error-text[down] {
    margin-top: 0px;
}

.sber-pay img {
    height: 32px;
    pointer-events: none;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.sber-pay:hover img {
    transform: scale(1.1);
}

.second-catalog-body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0e0e0ec4;
    opacity: 50%;
    z-index: -1;
    cursor: default;
}

.second-catalog-body {
    display: none;
    position: absolute;
    top: calc(100% + 50px);
    left: 0;
}

.second-catalog-body[show] {
    display: flex;
    justify-content: start;
}

.breadcrumb {
    list-style-type: none;
    white-space: nowrap;
    padding-bottom: 25px;
}

.breadcrumb ol {
    display: flex;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    list-style-type: none;
    white-space: nowrap;
}

.breadcrumb li:after {
    content: "->";
    padding: 0 10px;
    color: var(--green-color);
    cursor: default;
}

.breadcrumb li:last-child:after {
    display: none;
}

.breadcrumb ol li:last-child {
    color: var(--green-color);
}

.product-lastseen,
.subscribe {
    width: 121px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 2px;
}

.product-lastseen {
    font-weight: normal;
    font-size: 13px;
    flex-direction: column;
    height: 80px;
}

.product-lastseen:before {
    content: 'Был в продаже';
    display: inline-flex;
    line-height: 2;
}

.subscribe {
    height: 30px;
    font-size: 14px;
    cursor: pointer;
}

.subscribe[sub='false'] {
    color: white;
    background: var(--dark-gray-color);
}

.product-lastseen,
.subscribe[sub='true'] {
    color: #455A64;
    background: #EFF5F6;
}

.email-subscription {
    position: fixed;
    z-index: 2;
    top: 25%;
    display: none;
}

.email-subscription[show] {
    display: block;
}

.email-subscription-container {
    background: white;
    width: 350px;
    padding: 25px;
}

.email-subscription-header {
    text-align: center;
}

.email-subscription-input {
    height: 100%;
    width: 100%;
    font-size: 20px;
    background-color: #EFF5F6;;
    padding: 12px 10px;
}

.email-subscription-img-label-group {
    margin: 20px 0;
    display: flex;
}

.email-subscription .email-subscription-img-label-group label {
    display: flex;
    align-items: center;
    padding: 5px;
}

.email-subscription-img {
    padding: 0 10px;
    width: 50px;
    height: 50px;
}

.email-subscription-label-text {
    display: block;
    text-align: center;
}

.email-subscription-label-text a {
    color: var(--green-color);;
}

.email-subscription-button-submit {
    background: var(--green-color);;
    color: white;
    border-radius: 1px;
    cursor: pointer;
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    margin: 20px 0;
    font-size: 16px;
}

.email-subscription:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0e0e0ec4;
    opacity: 50%;
    z-index: -2;
    cursor: default;
}

.popup-store-data-schedule {
    border: 1px solid #EFEFEF;
    border-radius: 2px;
    overflow: hidden;
}

.popup-schedule-today {
    position: relative;
    background: #DDF0F3;
    color: var(--green-color);
    padding: 0 8px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

.popup-schedule-today-columns,
.popup-schedule-today-columns-header {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.popup-schedule-full {
    overflow: hidden;
    background: #FFFFFF;
}

.popup-schedule-full-columns {
    width: 100%;
}

.popup-schedule-row {
    display: flex;
    align-items: center;
    padding: 2px 8px 2px 8px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #EFEFEF;
}

.popup-schedule-row:last-child {
    border-bottom: none;
}

.popup-schedule-today-work-header{
    width: 62%;
    text-align: left;
    box-sizing: border-box;
    font-size: 10px;
    color: #415B63;
}

.popup-schedule-today-break-header{
    width: 38%;
    text-align: left;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 10px;
    color: #415B63;
}

.popup-schedule-date {
    width: 25%;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 900;
}

.popup-schedule-today-work,
.popup-schedule-full-time {
    width: 40%;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
}

.popup-schedule-today-break,
.popup-schedule-full-break {
    width: 40%;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
}

.popup-schedule-dayoff {
    color: var(--orange-color);
}

.el-availability-pharmacy-price[employee] {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
}

.availability-employee-price {
    position: relative;
    margin-top: 10px;
    width: 100%;
}

.availability-employee-title,
.employee-price-title {
    position: relative;
    right: 5px;
    font-size: 9px;
    z-index: 1;
}

.employee-price-title {
    position: unset;
}

.availability-employee-price:after,
.employee-price:after {
    content: "";
    position: absolute;
    left: -5px;
    right: 5px;
    top: -4px;
    bottom: -4px;
    background: #DAF2F2;
    border-radius: 2px;
    transform: rotate(-2deg);
}

.employee-price:after {
    left: -11px;
    right: -12px;
    top: -5px;
    bottom: 42px;
}

.availability-default-price {
    position: relative;
    margin-bottom: 10px;
}

.el-availability-pharmacy-price[employee] .availability-default-price {
    width: 100%;
    display: flex;
    justify-content: center;
}

.el-availability-pharmacy-price[employee] .availability-employee-price:after {
    left: 0px;
    right: 10px;
}

.employee-price {
    grid-area: employee;
    position: relative;
    justify-self: center;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.availability-employee-price [price="rub"] {
    font-size: 16px;
}

.erid-action-nav {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: white;
}

.erid-label {
    padding: 8px;
    background-color: rgba(172,197,201,0.4);
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #95aaaf;
}

.erid-action-nav img {
    height: 13px;
}

.erid-info {
    border-radius: 2px;
    background-color: #455a64;
    right: 0;
    width: max-content;
    position: absolute;
    padding: 5px 20px;
    color: white;
    margin-top: 10px;
    display: none;
}

.erid-info .erid-title {
    font-weight: 600;
}

.erid-info div {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.8px;
}

.erid-action-nav:hover .erid-info {
    display: block;
}

.brand-banner-item .erid-action-nav {
    top: 0;
    right: 0;
}

.brand-banner-item .erid-label {
    background-color: unset;
}

.brand-banner-item .erid-label img {
    height: 12px;
}

.pay-modal-close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.pay-modal-close:before {
    content: '';
    background: url(/local/img/close-btn-black.svg) center no-repeat;
    display: block;
    width: 15px;
    height: 15px;
}

.seo-text {
    display: none;
}

.user-auth-container-input {
    background: var(--background-color);
    border-radius: 4px;
    position: relative;
    line-height: 3;
    overflow: hidden;
    margin: 20px 0;
}

.user-check-code-but {
    display: none;
}

.user-auth-container-but,
.user-check-code-but {
    background: var(--green-color);
    color: white;
    line-height: 3;
}

.modal-user-auth[wait] .user-auth-container-but {
    background: var(--light-gray-color);
    cursor: wait;
    color: var(--dark-gray-color);
}

.bad-server-response {
    position:absolute;
    bottom: 150px;
    display:none;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:100;
}

.modal-window {
    width: 344px;
    background-color: white;
    padding: 15px;
    box-sizing: border-box;
    font-size: 16px;
    border-radius: 2px;
    z-index: 2;
}

.text-bad-response {
    width: 100%;
    color: #8D9BA1;
    line-height: 1.7;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}

.close-bad-response {
    cursor: pointer;
    width: 15px;
    height: 15px;
    color: #8D9BA1;
    background: url(/local/img/close-block-chat.svg) no-repeat center;
    position: absolute;
    right: 0;
    top: 0;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,.7);
    opacity: 50%;
    z-index: -1;
}

.user-auth-container-input.err,
.user-code-container-input.err {
    border: 1px solid red;
}

.user-auth-container-title {
    font-size: 20px;
    text-align: center;
    line-height: 1.1;
}

.user-link {
    position: relative;
}

.user-auth-container-input .phone-input {
    padding-left: 10px;
    width: 100%;
}

.user-code-container-input {
    display: none;
    background-color: white;
    justify-content: space-evenly;
    line-height: 3.3;
}

.code-input {
    text-align: center;
    width: 12%;
    background: var(--background-color);
}

.code-input::-webkit-outer-spin-button,
.code-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.code-input {
    -moz-appearance: textfield;
}

.user-auth-container .user-code-container-input {
    margin: 20px 0;
}

.user-auth .user-auth-container .user-code-container-input {
    margin: unset;
}

.mobile-sidebar-menu {
    display: none;
}

.mobile-sidebar-background {
    display: none;
}

.form-employee-limits {
    display: flex;
    margin-bottom: 16px;
    justify-content: space-between;
}

.app-banner {
    display: none;
}


.loading-body {
    content: "";
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eff5f6;
    z-index: 2;
    cursor: default;
    align-items: center;
    justify-content: center;
}

.loading-cover {
    content: "";
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(69, 90, 100, 0.7);
    z-index: 500;
    cursor: default;
    align-items: center;
    justify-content: center;
}

.loading {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 0, 0, 0);
    border-top: 4px solid var(--green-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    pointer-events: none;
    cursor: none;
}

.pay-modal .loading {
    /* margin-top: 20px; */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.pop-up-img[show] {
    display: flex;
}

.pop-up-img {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    line-height: 0;
    background: #0000007d;
    display: none;
    justify-content: center;
    align-items: center;
}