.track.square[data-v-c8d431fc] .track-main-block .play-and-pause-block {
        width: 60px;
      }

@media (max-width: 767px) {
        .track.square[data-v-c8d431fc] .track-main-block .play-and-pause-block {
          width: 40px;
        }
      }

@media (hover: hover) {
        .image-wrapper:hover .play-and-pause-block[data-v-d0720144] {
          opacity: 1;
        }
      }

.play-and-pause-block[data-v-d0720144] {
        opacity: 0;
        position: absolute;
        transition: 0.2s;
        width: 40px;
      }

.play-and-pause-block.show[data-v-d0720144] {
        opacity: 1;
      }

.play-and-pause-block[data-v-9ce4bdf5] {
        align-items: center;
        aspect-ratio: 1/1;
        background-color: hsla(0, 0%, 100%, 0.8);
        border-radius: 50%;
        display: flex;
        justify-content: center;
      }

.play-and-pause-block svg[data-v-9ce4bdf5] {
        height: 40%;
        width: 40%;
      }

.play-and-pause-block svg.play[data-v-9ce4bdf5] {
        margin-left: 10%;
      }

@media (hover: hover) {
        .top40-for-main-page[data-v-bb26b7ba]
          .track:hover
          .track-main-block
          .image-wrapper
          .play-and-pause-block {
          opacity: 1;
        }
      }

@media (hover: hover) {
        .story-card:hover .info[data-v-eaa66fd5],
        .story-card:hover .play-and-pause-button[data-v-eaa66fd5] {
          opacity: 1;
        }
      }

.play-and-pause-button[data-v-eaa66fd5] {
        height: 60px;
        left: 50%;
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: 0.2s;
        width: 60px;
        z-index: 2;
      }

@media (max-width: 1279px) {
        .play-and-pause-button[data-v-eaa66fd5] {
          height: 100%;
          width: 100%;
          z-index: 1;
        }
      }

.horoscope-4-aside-bar[data-v-c3bfc6bb],
      .player-4-aside-bar[data-v-c3bfc6bb],
      .theme-of-day[data-v-c3bfc6bb] {
        margin-top: -18px;
      }

@media (max-width: 1279px) {
        .horoscope-4-aside-bar[data-v-c3bfc6bb],
        .player-4-aside-bar[data-v-c3bfc6bb],
        .theme-of-day[data-v-c3bfc6bb] {
          flex-grow: 1;
          margin-top: 0;
        }
      }

.player-4-aside-bar[data-v-ac294910] {
        background-position: 50%;
        background-size: cover;
        border-radius: 18px 18px 0 0;
        color: #fff;
        display: none;
        overflow: hidden;
        padding: 16px 16px 46px;
        position: relative;
        transition: 0.2s;
      }

@media (max-width: 1279px) {
        .player-4-aside-bar[data-v-ac294910] {
          align-items: center;
          background: none !important;
          color: #000;
          display: block;
          display: flex;
          gap: 10px;
          overflow: visible;
          padding: 0 0 0 14px;
          position: static;
        }
        .player-4-aside-bar.play .artist span[data-v-ac294910],
        .player-4-aside-bar.play .song-name span[data-v-ac294910] {
          animation: scroll-ac294910 5s linear infinite;
          display: inline-block;
          padding-left: var(--bd63a936);
        }
      }

.volume-bar[data-v-ac294910] {
        position: relative;
        z-index: 2;
      }

@media (max-width: 1279px) {
        .volume-bar[data-v-ac294910] {
          display: none;
        }
      }

@media (max-width: 1279px) {
        [data-v-ac294910] .channel-track-image .play-and-pause-block {
          background-color: #000;
          color: #fff;
          display: flex;
          grid-column-start: 1;
          grid-row-start: 1;
          position: static;
          width: 100%;
        }
      }

.volume-bar[data-v-b8b58757] {
        display: grid;
        grid-template-columns: 24px 100px;
      }

.volume-bar:hover .volume-input[data-v-b8b58757] {
        display: block;
      }

.volume-input[data-v-b8b58757] {
        display: none;
      }

.volume-input[data-v-2aa9f5e3] {
        align-items: center;
        display: flex;
        height: 24px;
        justify-content: center;
        position: relative;
      }

.volume-input[data-v-2aa9f5e3]:after {
        background-color: #fff;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

.channel-track-image .play-and-pause-block[data-v-dd9314b4],
      .channel-track-image.play .play-and-pause-block[data-v-dd9314b4] {
        display: flex;
      }

.play-and-pause-block[data-v-dd9314b4] {
        background-color: hsla(0, 0%, 100%, 0.8);
        color: #000;
        cursor: pointer;
        display: none;
        position: absolute;
        width: 60px;
      }

.player-4-desktop[data-v-f4336642] {
        align-items: center;
        background-color: #fff;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        left: 0;
        padding: 9px 28px 10px 20px;
        position: fixed;
        width: 100%;
        z-index: 11;
      }

@media (max-width: 1279px) {
        .player-4-desktop[data-v-f4336642] {
          display: none;
        }
      }

.play-and-pause-block[data-v-f4336642] {
        align-items: center;
        aspect-ratio: 1/1;
        background-color: #000;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        width: 71px;
      }

.play-and-pause-block[data-v-f4336642] svg {
        height: 32%;
        width: 32%;
      }

.play-and-pause-block[data-v-f4336642] svg path,
      .play-and-pause-block[data-v-f4336642] svg rect {
        fill: #fff;
      }

.play-and-pause-block[data-v-f4336642] svg.play {
        margin-left: 4px;
      }

.chanel-list .channels-container[data-v-f4336642] {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 30px 0 40px;
        scroll-behavior: smooth;
        width: calc(100% - 70px);
        -ms-overflow-style: none;
        scroll-behavior: auto;
        scrollbar-width: none;
      }

.chanel-list .channels-container[data-v-f4336642]::-webkit-scrollbar {
        display: none;
      }

.chanel-list .channels-container .channels-track[data-v-f4336642] {
        display: flex;
        gap: 15px;
        transition: transform 0.3s ease;
        width: -moz-max-content;
        width: max-content;
      }

.chanel-list .channels-container .channels-track .channel-item[data-v-f4336642] {
        border-radius: 12px;
        cursor: pointer;
        height: 71px;
        min-width: 71px;
        width: 71px;
      }

.chanel-list .channels-container .channels-track .channel-item[data-v-f4336642] .image-block {
        border-radius: 12px;
        height: 100%;
        width: 100%;
      }

.chanel-list[data-v-f4336642] {
        align-items: center;
        display: flex;
        overflow: hidden;
        position: relative;
      }

.chanel-list .next[data-v-f4336642],
      .chanel-list .prev[data-v-f4336642] {
        cursor: pointer;
        display: none;
      }

.chanel-list .prev[data-v-f4336642] {
        left: 0;
        transform: translateX(-50%);
        transform: rotate(180deg);
      }

.chanel-list .next[data-v-f4336642],
      .chanel-list .prev[data-v-f4336642] {
        align-items: center;
        display: flex;
        position: absolute;
        top: 0;
        z-index: 30;
      }

.chanel-list .next[data-v-f4336642] {
        right: 30px;
        transform: translateX(-50%);
      }

.chanel-list .opacity[data-v-f4336642] {
        background: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0));
        height: 72px;
        width: 52px;
      }

.chanel-list[data-v-f4336642] svg {
        height: 26px;
        width: 14px;
      }

.chanel-list .icon[data-v-f4336642] {
        align-items: center;
        background-color: #fff;
        display: flex;
        height: 72px;
      }

.volume-wrapper[data-v-f4336642] {
        position: relative;
      }

.volume-wrapper .abs[data-v-f4336642] {
        position: absolute;
        right: -12px;
        top: -1px;
      }

.volume-bar[data-v-f4336642] {
        gap: 20px;
        min-width: 154px;
        padding-left: 20px;
      }

.volume-bar[data-v-f4336642] .volume-input {
        display: flex;
      }

.volume-bar[data-v-f4336642] .volume-input:after {
        background-color: #dbdde4;
        height: 2px;
      }

.volume-bar[data-v-f4336642] .volume-input .bg {
        background-color: #1957ea;
        height: 2px;
      }

.volume-bar[data-v-f4336642] .volume-input .control {
        background-color: #1957ea;
        border: none;
        border-radius: 50%;
        height: 8px;
        width: 8px;
      }