@keyframes loader {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes opacity-animation {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

[hidden],
[v-cloak],
template {
    display: none !important
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%)
}

.stock-data {
    color: var(--color-text)
}

@media (min-width:768px) and (max-width:1279px) {
    .stock-data {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-column-gap: 137px
    }
}

@media only screen and (min-width:1280px) {
    .stocks_desktop-row-view .stock-data {
        display: grid;
        grid-template-columns: 1fr 280px 384px;
        grid-column-gap: 32px
    }
    .stocks_desktop-row-view .stock-data>:not(:last-child) {
        margin-bottom: 0
    }
}

.stock-data__name-and-address:not(:last-child) {
    margin-bottom: 4px
}

@media (min-width:768px) and (max-width:1279px) {
    .stock-data__name-and-address:not(:last-child) {
        grid-column: 1/3;
        margin-bottom: 16px
    }
}

.stock-data__contacts:not(:last-child),
.stock-data__name:not(:last-child) {
    margin-bottom: 16px
}

@media (min-width:768px) and (max-width:1279px) {
    .stock-data__name:not(:last-child) {
        margin-bottom: 8px
    }
}

@media only screen and (min-width:1280px) {
    .stocks_desktop-row-view .stock-data__name:not(:last-child) {
        margin-bottom: 8px
    }
    .stocks_desktop-row-view .stock-data__address {
        font-size: 16px;
        line-height: 24px
    }
}

.stock-data__phone:not(:last-child) {
    margin-bottom: 4px
}

.stock-data__email:not(:last-child) {
    margin-bottom: 16px
}

.stocks__header:not(:last-child) {
    margin-bottom: 32px
}

@media only screen and (max-width:767px) {
    .stocks__header:not(:last-child) {
        margin-bottom: 8px
    }
}

.stocks__container {
    position: relative;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius)
}

@media only screen and (min-width:1280px) {
    .stocks__container {
        height: 640px
    }
}

@media only screen and (max-width:1279px) {
    .stocks__container {
        border: 0;
        border-radius: 0
    }
}

@media only screen and (min-width:1280px) {
    .stocks_desktop-row-view .stocks__container {
        height: initial;
        border: 0;
        border-top: 1px solid var(--color-line);
        border-radius: 0
    }
}

.stocks__list {
    flex-grow: 1;
    list-style: none
}

@media only screen and (min-width:1280px) {
    .stocks__list {
        overflow-y: auto;
        scrollbar-color: rgba(0, 0, 0, .16) rgba(0, 0, 0, .04);
        scrollbar-width: thin
    }
    .stocks__list::-webkit-scrollbar {
        width: 4px;
        height: 4px
    }
    .stocks__list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, .04)
    }
    .stocks__list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .16);
        border-radius: 2px
    }
    .stocks_desktop-row-view .stocks__list {
        overflow-y: initial
    }
}

.stocks__item {
    padding: 24px;
    border-bottom: 1px solid var(--color-line)
}

@media only screen and (min-width:1280px) {
    .stocks__item:not(.stocks__item_without-coords) {
        cursor: pointer
    }
    .stocks__item:hover,
    .stocks__item:not(.stocks__item_without-coords).stocks__item_active {
        background-color: var(--color-bg-secondary)
    }
}

@media only screen and (max-width:1279px) {
    .stocks__item {
        padding: 24px 0
    }
    .stocks__item:first-child {
        padding-top: 0
    }
}

@media only screen and (max-width:767px) {
    .stocks__item {
        padding: 20px 0
    }
}

@media only screen and (min-width:1280px) {
    .stocks_desktop-row-view .stocks__item {
        display: block;
        margin-inline: -32px;
        border-bottom: none;
        padding: 32px 32px 0
    }
    .stocks_desktop-row-view .stocks__item:hover {
        border-radius: var(--border-radius)
    }
    .stocks_desktop-row-view .stocks__stock-data-wrapper {
        padding-bottom: 32px;
        border-bottom: 1px solid var(--color-line)
    }
}

.stocks__map {
    width: 800px
}

@media only screen and (max-width:1279px) {
    .stocks__map {
        display: none;
        width: 100%
    }
}

@media only screen and (max-width:767px) {
    .stocks__map {
        width: 100vw;
        margin: 0-16px
    }
}