* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    position: relative;
    height: auto;
    -webkit-font-smoothing: antialiased
}

:root {
    --main-background: #fff;
    --alt-background: #80848f;
    --test-background: #f3f1ea;
    --header-icon-fill: #fff;
    --main-padding: 15px;
    --main-font-size: 15px;
    --main-line-head: 17px;
    --main-font-color: #4e5263;
    --font-color: #1f1e24;
    --control-color: #4e5263
}

input, button, textarea {
    font-family: inherit
}

input, textarea {
    color: #26333c
}

ol, ul {
    list-style: none
}

.scroll::-webkit-scrollbar {
    display: none
}

.scroll {
    overflow-y: hidden
}

body {
    margin: 0 auto;
    max-width: 1200px;
    background: #f7f7f7;
    color: #4e5263;
    display: flex;
    flex-direction: column;
    font-size: var(--main-font-size);
    line-height: var(--main-line-head);
    font-family: system, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe WP', Ubuntu, Roboto, Oxygen, Cantarell, 'Fira Sans', 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Droid Sans', Tahoma, 'Microsoft Sans Serif', sans-serif
}

#cnt {
    width: 1px;
    height: 1px;
    visibility: hidden;
}
.related-cnt {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 16px;
    position: relative;
}

.related-item {
    border: solid 1px #e8e7e7;
    border-radius: 6px;
    padding: 10px;
    display: grid;
    grid-template-columns: 80% 20%;
    grid-gap: 10px;
}

.related-item > a {
    color: #469b32;
    font-size: 18px;
    line-height: 22px;
}

.related-item > a:hover {
    color: #4a7c1c;
}

.related-item > span {
    justify-self: end;
    padding-right: 8px;
}

.related-item > p {
    grid-column-start: 1;
    grid-column-end: 3;
}

.related-cnt.columns {
    display: grid;
    grid-gap: 15px;
}

.related-cnt.columns  > .related-item {
    grid-template-columns: 1fr 70px;
    background-color: #fff;
}

.related-cnt.columns  > .related-item > span {
    padding: 0;
}

@media (min-width: 600px) {
    .related-cnt.columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .related-cnt.columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .related-cnt.columns {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
.items-num-prev > .items {
    border-top: solid 1px #dbdada;
    padding: 20px 0 13px;
    display: grid;
    grid-gap: 20px;
}

.items-num-prev > .header {
    padding: 7px 0 17px;
}

.items-num-prev > .header > h3 {
    font-size: 18px;
    font-weight: 400;
}

.items-num-prev .item > a {
    text-decoration: none;
    font-size: 17px;
    color: #469b32;
}

.items-num-prev .item > span {
    font-size: 11px;
    margin-left: 3px;
    display: inline-block;
    vertical-align: top;
}

.category-cnt > span {
    background: #eaeaef;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 10px;
    color: var(--control-color);
}

@media (min-width: 430px) {
    .items-num-prev > .items {
        grid-template-columns: 1fr 1fr;
    }

    .items-num-prev .item > a {
        font-size: 16px;
    }
}

@media (min-width: 500px) {
    .items-num-prev .item > a {
        font-size: 17px;
    }
}

@media (min-width: 768px) {
    .items-num-prev > .items {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
ol.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

ol.breadcrumbs > li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

ol.breadcrumbs > li > a {
    color: var(--main-font-color);
    text-decoration: none;
    font-weight: 500;
}

ol.breadcrumbs > li > a:hover {
    color: #24262c;
}

ol.breadcrumbs > li > span {
    color: #807f7f;
}

.breadcrumbs .arrow-right {
    transform: rotate(-90deg);
    padding: 0 1px;
}

.breadcrumbs .arrow-right > svg {
    fill: currentColor;
    width: 10px;
    height: 7px;
}
.cont-v3 > .places-cnt {
    margin-top: 20px;
}

.places-cnt {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.place-cnt {
    border: solid 1px #e8e7e7;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.place-map {
    width: 100%;
    max-width: 100%;
}

.place-map > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    background-color: #fff;
    padding: 4px;
    border: solid 1px #ededed;
    border-radius: 5px;
}

.place-items {
    margin: 0 2px;
}

.group-2 {
    display: inline;
    margin-top: 12px;
}

.place-name {
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    color: #469b32;
    line-height: 22px;
    margin-right: 7px;
}

.place-rating-cnt {
    font-size: 17px;
    display: inline;
    white-space: nowrap;
}

.place-rating-cnt > .icon{
    color: #f93;
}

.place-phones {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.place-phones > a {
    color: #4e5263;
    margin-right: 2px;
    text-decoration: none;
}

.place-address {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.place-items > .pins {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    margin-top: 14px;
}

.place-items > .pins > span {
    background: #eaeaef;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px;
    color: var(--control-color);
}

.geo-ico {
    fill: #4e5263;
    height: 16px;
    width: 16px;
}

.phone-ico {
    fill: #4e5263;
    height: 16px;
    width: 16px;
}

@media (min-width: 768px) {
    .place-cnt {
        flex-direction: row;
        gap: 18px;
        justify-content: space-between;
    }

    .place-map {
        order: 2;
        max-width: 310px;
    }

    .place-items {
        display: flex;
        flex-direction: column;
        gap: 7px;
        font-size: 1.1em;
        order: 1;
        margin: 0;
    }
}
.places-pagination-wrap {
    margin-top: 20px;
}

.places-pagination-cnt {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.places-pagination-additional {
    display: none;
}

.places-pagination-additional > a {
    color: #434343;
    background: #fdfdfd;
    border-radius: 3px;
    border: solid 1px #e5e4e4;
    padding: 9px;
    font-size: 13px;
}

.places-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.places-pagination-cnt a , .p-curr {
    display: flex;
    background: #fdfdfd;
    fill: #7e7e7e;
    border-radius: 6px;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    border: solid 1px #e5e4e4;
    cursor: pointer;
    color: #434343;
    font-weight: 500;
    flex-shrink: 0;
}

.places-pagination-cnt a, .places-pagination-additional > a {
    text-decoration: none;
}

.p-prev > svg, .p-next > svg {
    fill: currentColor;
    width: 13px;
    height: 9px;
}

.p-curr {
    background: #efefef !important;
    color: #bfbfbf;
    cursor: auto;
}

.p-prev, .p-next {
    background: #f9f9f9 !important;
}

.p-prev {
    transform: rotate(90deg);
}

.p-next {
    transform: rotate(-90deg);
}

.p-sep {
    width: 14px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-sep:after {
    color: #434343;
    content: "...";
    height: 20px;
}

@media (max-width: 479px) {
    .places-pagination-additional {
        display: flex;
        justify-content: center;
        margin-top: 18px;
    }

    .__out {
        display: none !important;
    }
}
.contacts-cnt {
    border-top: solid 1px #dbdada;
    margin-top: 16px;
    position: relative;
}

.contact-cnt {
    font-size: 16px;
    margin: 16px 0 10px;
}

.contact-cnt > a, .contact-cnt > span {
    color: #469b32;
    text-decoration: underline;
    padding-right: 9px;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
}

.contact-cnt > a.phone {
    text-decoration: none;
}

.contact-cnt > a:hover, .contact-cnt > span:hover {
    color: #4a7c1c;
}

.contact-cnt > a.__single {
    padding-right: initial;
}

.contact-name {
    font-weight: 600;
    margin-bottom: 7px;
}
.map-cnt {
    border-top: solid 1px #dbdada;
    margin-top: 16px;
    padding-top: 10px;
}

.map-wrap {
    position: relative;
    background: url(/map.png) #d0cfcf no-repeat;
    background-position: center center;
    overflow: hidden;
    cursor: pointer;
}

.map-interactive {
    cursor: pointer;
    height: 20em;
    width: 100%;
    background-color: transparent;
    position: relative;
}

.loader {
    color: #1f1e24;
    position: absolute;
    box-sizing: border-box;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 15;
    transition: opacity .7s ease;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
}

.loader.is-active {
    top: 0;
    opacity: 1;
}

.loader::after, .loader::before {
    box-sizing: border-box;
}

.loader-default::after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: solid 8px #fff;
    border-left-color: transparent;
    border-radius: 50%;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    to {
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg);
    }
}

@keyframes rotation {
    from {
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    to {
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg);
    }
}
.summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summary-rating-cnt {
    display: flex;
    margin-top: -9px;
    justify-content: flex-start;
    align-items: flex-end;
    background: var(--main-background);
}
.summary-score {
    font-weight: 500;
    margin-left: 6px;
}
.summary-votes {
    margin-left: 14px;
}
.stars-rating {
    display: inline-flex;
    justify-content: space-between;
    background: #c9c9c9;
    position: relative;
    align-items: center;
}
.mask {
    background: #f93;
    position: absolute;
    left: 0;
    right: 1px;
    top: 0;
    bottom: 0;
    right: var(--mask-padding)
}
.stars {
    position: relative;
    line-height: 0;
    display: inline-flex;
    flex-shrink: 0;
}
.rating-ico {
    fill: #ffffff;
    width: 16px;
    height: 16px;
    display: inline-flex;
    line-height: 0;
}

.summ-img {
    grid-area: image;
}

.summ-img > img {
    max-width: 100%;
    height: auto;
    background-color: #fff;
    padding: 4px;
    border: solid 1px #ededed;
    border-radius: 5px;
    width: -webkit-fill-available;
}

.summ-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 10px;
}

.summ-body > h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 25px;
}

.summ-body > p {
    font-size: 16px;
    line-height: 21px;
}

.summ-body > .pins {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.summ-body > .pins > span {
    background: #eaeaef;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px;
    color: var(--control-color);
}

.summ-actions {
    grid-area: buttons;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.summ-actions > a, .summ-actions > span {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: solid 1px;
    border-radius: 5px;
    padding: 5px 7px;
    font-weight: 400;
}

.summ-actions > a, .summ-actions > span.call {
    background-color: #d1ebb7;
    border-color: #cbe3b4;
    font-weight: 400;
    color: #4e5263;
}

.summ-actions > span {
    cursor: pointer;
}

@media (min-width: 430px) {
    .summary {
        display: grid;
        grid-template-areas:
            'body body'
            'buttons image';
        grid-gap: 14px;
        grid-template-columns: 1fr 200px;
    }
}

@media (min-width: 768px) {
    .summary {
        grid-template-areas:
            'image body buttons';
        grid-template-columns: 17.66667% 58.3333333% 24%;
        grid-gap: 0;
    }

    .summ-body {
        padding: 7px 14px 14px;
    }

    .summ-actions {
        padding: 10px 10px 0 0;
        justify-content: flex-start;
    }
}
.reviews-cnt {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.review {
    border: solid 1px #ededed;
    border-radius: 8px;
    background: #fdfdfd;
    padding: 16px 12px;
    font-size: 16px;
    position: relative;
}

.review > p {
    line-height: 21px;
    margin-bottom: 10px;
}

.review-rating {
    margin: 7px 0 8px 48px;
}

.review-rating > .icon {
        font-size: 20px;
        color: #c3c0c0;
}

.review-rating > .icon.__active {
    color: #f93;
}

.author-name {
    font-size: 18px;
    font-weight: 500;
    margin-left: 50px;
}

.review-date {
    color: #72778b;
}

@media (min-width: 900px) {
    .reviews-cnt {
        margin-top: 20px;
    }
}
.review-form-cnt {
    padding-top: 14px;
    border-top: solid 1px #dbdada;
    margin-top: 16px;
    position: relative;
}

.review-form-cnt > form {
    position: relative;
}

.review-form-cnt .form-fields {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.review-form-cnt .form-field-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-form-cnt .ff-label {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

.review-form-cnt .ff-label-req {
    color: #f93;
}

.review-form-cnt .form-rating {
    display: inline-block;
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
    width: fit-content;
}

.review-form-cnt .form-rating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    cursor: pointer;
}

.review-form-cnt .form-rating > label:last-child {
    position: static;
}

.review-form-cnt .form-rating > label:nth-child(1) {
    z-index: 5;
}

.review-form-cnt .form-rating > label:nth-child(2) {
    z-index: 4;
}

.review-form-cnt .form-rating > label:nth-child(3) {
    z-index: 3;
}

.review-form-cnt .form-rating > label:nth-child(4) {
    z-index: 2;
}

.review-form-cnt .form-rating > label:nth-child(5) {
    z-index: 1;
}

.review-form-cnt .form-rating > label input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.review-form-cnt .form-rating > label .icon {
    float: left;
    color: transparent;
    cursor: pointer;
}

.review-form-cnt .form-rating > label:last-child .icon {
    color: #d9d9db;
}

.form-rating:not(:hover) label input:checked ~ .icon, .form-rating:hover label:hover input ~ .icon {
    color: #f93;
}

.icon:active {
    color: #fd665d !important;
}

.form-rating label input:focus:not(:checked) ~ .icon:last-child {
    color: #d9d9db;
    text-shadow: 0 0 5px #f93;
}

.review-form-cnt .fr-desc {
    color: #a3a9b8;
    font-size: 13px;
}

.review-form-cnt .ff-wrapper {
    position: relative;
}

.review-form-cnt .ff-inner > textarea {
    border: 0;
    background-color: #f9f9fa;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    caret-color: #f93;
    overflow: visible;
    padding: 11px 14px 12px;
    display: block;
    min-height: 170px;
    resize: none;
    line-height: 20px;
    color: #454545;
}

.review-form-cnt .ff-inner:after {
    border: solid 1px #e5e7ec;
    border-radius: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: '';
    pointer-events: none;
    box-sizing: border-box;
}

.review-form-cnt .form-submit {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}

.review-form-cnt .fs-desc {
    color: #4e5263;
    font-size: 13px;
    line-height: 18px;
}

.review-form-cnt .fs-button {
    flex: auto;
    width: auto;
}

.review-form-cnt .fs-button > button {
    width: 100%;
    height: 38px;
    border-color: #606473;
    background-color: #606473;
    color: #fff;
    font-weight: 400;
    -webkit-transition: border-color .2s ease, background-color .2s ease;
    -o-transition: border-color .2s ease,background-color .2s ease;
    transition: border-color .2s ease, background-color .2s ease;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.review-form-cnt .fs-button > button:disabled {
    cursor: not-allowed;
    opacity: .5;
}
.schedule {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
}

.day-cnt {
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
}

.day-cnt.__active {
    background-color: #d4f0b9;
}

.day-cnt.__active > p {
    background-color: initial;
}

.day-cnt > p {
    padding: 10px 5px;
    background-color: #f0f0f0;
    border: solid #dbdada;
    border-width: 1px 0;
}

.day-cnt > span {
    padding: 10px 5px;
}

.break-hours {
    font-size: 13px;
    padding-top: 5px !important;
}

.break-hours::before {
    content: "перерыв";
    margin-right: 3px;
}

.work-state {
    padding: 12px 5px;
    background-color: #d1e7dd;
}

.work-state.__close {
    background-color: #ffc6c6;
}

@media (min-width: 768px) {
    .schedule {
        flex-direction: row;
    }
    
    .break-hours::before {
        display: block;
        margin-bottom: 4px;
    }
}
.cont-v3.related-cat {
    border-top: solid 1px #e8e7e7;
    padding-top: 14px;
}

.related-cat ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
}

.related-cat li {
    padding: 10px 10px 0 2px;
    width: 50%;
}

.related-cat a {
    color: #469b32;
    font-size: 16px;
    text-decoration: none;
}

.related-cat a:hover {
    color: #4a7c1c;
}

@media (min-width: 768px) {
    .related-cat li {
        width: 33.3%;
    }
}
header {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--main-font-color);
    box-shadow: 0 0 5px 1px #4e526380
}

.header--cont {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns:50px 1fr 50px 50px;
    grid-template-rows:50px;
    align-items: center
}

.location-btn {
    position: fixed;
    left: -10000px;
    visibility: hidden;
}

.logo-city {
    color: #80c242;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px dashed;
    cursor: pointer;
}
.logo-city:hover {
    color: #91d155;
}

.search--btn .search-ico {
    fill: var(--header-icon-fill)
}

.ref--btn {
    justify-self: end;
    padding-right: 1px
}

.ref--btn .ref-ico {
    color: #fff;
    width: 22px;
    height: 22px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: #4e526380;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    position: absolute;
    top: 19px;
}

.ctl-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.logo-btn {
    height: 50px;
    display: flex;
    align-items: center;
}

.logo-btn > a {
    text-decoration: none;
}

.logo > span {
    font-size: 24px;
    font-weight: 550;
    font-variant-caps: all-petite-caps;
}
.logo :nth-child(1) {
    color: #ffffff;
}
.logo :nth-child(2) {
    color: #80c242; 
}

.clear-btn {
    display: flex;
    border: solid 1px #ededed;
    padding: 4px 6px;
    border-radius: 50%;
    background: #fdfdfd;
    cursor: pointer;
    align-items: center
}

.close-ico, .search-ico, .ref-ico, .arrow-long-left-ico, .menu-ico {
    width: 24px;
    height: 24px
}

.menu-open-btn .menu-ico, .menu-close-btn .close-ico {
    fill: var(--header-icon-fill)
}

body.mode--show-search {
    overflow: hidden
}

body.mode--show-menu {
    overflow: hidden
}

body:not(.mode--show-menu) .menu-close-btn, .mode--show-menu .menu-open-btn {
    position: fixed;
    left: -10000px;
    visibility: hidden
}

.window--search-header .inner-search-btn, body:not(.mode--show-search) [data-control="popup-window--search"] {
    display: none
}

[data-control="popup-window--search"] {
    background: var(--main-background);
    position: fixed;
    display: flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 150;
    padding-top: 50px;
    justify-content: center
}

[data-control="popup-window--search"]:not(.mode--search-active) .clear-search-btn, [data-control="popup-window--search"].mode--search-active .inner-search-btn {
    position: fixed;
    left: -10000px;
    visibility: hidden
}

.window--search-header {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    background: var(--main-background);
    display: grid;
    grid-template-columns:50px 1fr 50px;
    grid-template-rows:50px;
    justify-content: center;
    align-items: center;
    z-index: 200;
    justify-items: center
}

.window-search--content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 15px 0;
    margin: 0 10px;
    max-width: 748px;
    border-top: solid 1px #d9d9d9
}

.main-search-form {
    width: 100%
}

.search-auth-field-text--label {
    height: 46px;
    position: relative;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin: 0;
    font-size: 16px
}

.search-auth-field-text--input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
    background-color: transparent;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

input.search-auth-field-text--input::-webkit-input-placeholder {
    color: transparent
}

input.search-auth-field-text--input:-moz-placeholder {
    color: transparent
}

input.search-auth-field-text--input::-moz-placeholder {
    color: transparent
}

input.search-auth-field-text--input:-ms-input-placeholder {
    color: transparent
}

.window-search--content div {
    color: #5a5c61;
    font-size: 16px;
    padding: 9px 7px;
    cursor: pointer
}

.window-search--content div.__active, .window-search--content div:hover {
    background: #fbf8f0;
    border-radius: 1px
}

body:not(.mode--show-recipe) [data-control="popup-window--recipe"] {
    display: none
}

.mode--show-search [data-control="popup-window--recipe"] {
    z-index: 9
}

@media (min-width: 768px) {
    .mode--show-edit-user-id .window--settings-content .user-profile--avatar, .mode--show-edit-user-password .window--settings-content .user-profile--avatar {
        width: 90px;
        height: 90px;
        font-size: 35px
    }

    body.mode--show-search {
        overflow: overlay
    }

    body:not(.mode--show-search) [data-control="popup-window--search"] {
        display: block
    }

    [data-control="popup-window--search"] {
        position: relative;
        height: 35px;
        padding: 0;
        overflow: unset;
        background: initial;
        max-width: 600px;
        width: 100%;
        justify-self: right;
    }

    .window--search-header {
        position: initial;
        display: flex;
        height: 35px;
        padding: 0 9px 0 14px;
        border-radius: 50px;
        align-items: center
    }

    .search-auth-field-text--label {
        height: 35px;
        font-size: 15px;
        margin: 0
    }

    .window-search--content {
        display: none
    }

    .mode--show-search .window-search--content {
        position: absolute;
        display: block;
        top: 57px;
        left: 0;
        right: 0;
        padding: 9px 7px;
        margin: 0;
        background: #fff;
        border-radius: 12px;
        z-index: 160;
        box-shadow: 4px 4px 10px -8px #c7c7c7;
        border: solid 1px #e7e6e6
    }

    .search--btn {
        display: none
    }

    body:not(.mode--show-search) .inner-search-btn {
        display: flex
    }

    .close-search-btn {
        display: none
    }

    .clear-search-btn, .inner-search-btn {
        width: initial;
        height: initial
    }

    .clear-search-btn svg, .inner-search-btn svg {
        width: 23px;
        height: 23px;
        margin-top: 2px
    }

    .inner-search-btn .search-ico {
        fill: #6c7078
    }

    .ref--btn .ref-ico {
        width: 26px;
        height: 26px;
    }

    header {
        height: 60px
    }

    body:not(.mode--show-search) input::-webkit-input-placeholder {
        color: var(--main-font-color)
    }

    body:not(.mode--show-search) input:-moz-placeholder {
        color: var(--main-font-color)
    }

    body:not(.mode--show-search) input::-moz-placeholder {
        color: var(--main-font-color)
    }

    body:not(.mode--show-search) input:-ms-input-placeholder {
        color: var(--main-font-color)
    }

    body:not(.mode--show-settings) input:-ms-input-placeholder {
        color: var(--main-font-color)
    }

    .header--cont {
        grid-template-columns:50px 195px 1fr 60px;
        grid-template-rows:60px;
        justify-content: center
    }
}

@media (min-width: 1200px) {
    .header--cont {
        grid-template-columns: 50px 195px 1fr 260px 60px;
        grid-template-rows:60px;
        justify-content: center
    }

    .location-btn {
        position: initial;
        visibility: visible;
        margin-left: 34px;
    }

    .ref--btn .ref-ico {
        width: 22px;
        height: 22px;
    }
}
main {
    margin: 50px 0 25px;
    padding: 20px 0 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 150px;
}

.cont-v1 {
    border: solid 1px #ededed;
    border-radius: 8px;
    background: #fdfdfd;
    padding: 12px;
    margin: 0 4px;
}

.cont-v2 {
    margin: 16px 4px 0;
}

.cont-v3 {
    margin: 12px 4px 0;
}

.cont-v1 > h2, .cont-v2 > h2 {
    color: var(--main-font-color);
    font-size: 22px;
    font-weight: 500;
}

.cont-v2 > h2 {
    margin-left: 2px;
}

.cont-v3 > h2, .cont-v3 > h1 {
    margin-left: 10px;
    color: var(--main-font-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 25px;
}

.cont-v3 > .header-desc {
    margin-top: 12px;
    margin-left: 10px;
    color: #797c89;
}

.header-desc > li {
    list-style: inside;
    margin: 4px 7px;
}

.wrap-cont-2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 430px) {
    main {
        gap: 14px;
    }

    .cont-v1 {
        margin: 0 14px;
    }
    
    .cont-v3 {
        margin-top: 10px;
    }

    .cont-v2, .cont-v3 {
        margin-left: 14px;
        margin-right: 14px;
    }

    .cont-v3 > h2, .cont-v3 > h1, .cont-v3 > .header-desc {
        margin-left: 1px;
    }

    .cont-v3 > h2 {
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    main {
        margin-top: 60px
    }
}

@media (min-width: 900px) {
    main {
        gap: 20px;
    }

    .cont-v2 {
        margin-top: 20px;
    }

    .wrap-cont-2 {
        flex-direction: row;
        gap: 0;
    }

    .wrap-cont-2 > .cont-v1 {
        width: -webkit-fill-available;
    }
}
footer {
    padding: 15px 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #7b7e8d;
}

.footer-wrap {
    display: flex;
    gap: 3px;
    color: #ddd;
    align-items: flex-start;
    flex-direction: column;
    max-width: 1172px;
    margin: 0 auto;
}

.footer-wrap > div {
    line-height: 1.4
}

.footer-advanced {
    font-size: 15px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    width: 100%
}

.footer-content > span {
    white-space: nowrap
}

.footer-items {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.footer-items > a, .footer-items > span {
    text-decoration: none;
    cursor: pointer;
    color: #ddd;
}

@media (min-width: 430px) {
    footer {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        gap: 0;
        align-items: baseline;
        justify-content: space-between;
    }

    .footer-items {
        flex-wrap: wrap;
        gap: 0;
        flex-direction: row;
        align-items: center
    }

    .footer-items > a, .footer-items > span {
        padding: 5px 0 5px 12px
    }
}