:root {
  --adaptive-padding: 40px;
}

@media screen and (max-width: 1440px) {
  :root {
    --adaptive-padding: 24px;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --adaptive-padding: 24px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --adaptive-padding: 16px;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --adaptive-padding: 16px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.hidden {
  display: none !important;
}

body.noscroll {
  position: fixed;
  overflow-y: scroll;
}

body {
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
  width: 100%;
}

textarea {
  border: none;
  resize: none;
}

a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

a:visited {
  color: inherit;
}

a:hover {
  text-decoration: underline;
}

.h1,
h1 {
  font-size: 40px;
}

@media screen and (max-width: 576px) {
  .h1,
  h1 {
    font-size: 32px;
  }
}

.h2,
h2 {
  font-size: 32px;
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .h2,
  h2 {
    font-size: 28px;
  }
}

@media screen and (max-width: 768px) {
  .h2,
  h2 {
    font-size: 24px;
  }
}

.dim {
  display: none;
  position: absolute;
  z-index: 8;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
}

.dim.active {
  display: block;
}

.overflow-wrapper {
  overflow-x: hidden;
}

.container {
  margin-bottom: 40px;
}

.header {
  position: relative;
  z-index: 10;
  height: 100px;
  padding: 0px var(--adaptive-padding);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: white;
}

.header .wrapper {
  max-width: 1440px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header .logo {
  height: 64px;
}

.search-block-mobile {
  display: none;
}

@media screen and (max-width: 500px) {
  .search-block-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
    margin-left: 20px;
  }

  .search-block-mobile .search-input {
    display: none;
  }

  .search-block-mobile__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #cacaca;
    font-weight: bold;
    cursor: pointer;
  }

  .header_search-mode .search-block-mobile__text {
    display: none;
  }

  .search-block-mobile .magnifier {
    cursor: pointer;
  }

  .search-block-mobile__close-wrapper {
    -ms-grid-column-align: end;
    justify-self: end;
    position: absolute;
    right: 16px;
    display: none !important;
    cursor: pointer;
  }

  .header_search-mode .search-block-mobile__close-wrapper {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .search-block-mobile__input {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 80%;
    height: 20px;
    overflow: hidden;
    font-size: 20px;
  }

  .search-block-mobile__input::-webkit-input-placeholder {
    font-size: 20px;
  }

  .search-block-mobile__input::-moz-placeholder {
    font-size: 20px;
  }

  .search-block-mobile__input:-ms-input-placeholder {
    font-size: 20px;
  }

  .search-block-mobile__input::-ms-input-placeholder {
    font-size: 20px;
  }

  .search-block-mobile__input::placeholder {
    font-size: 20px;
  }

  .search-block-mobile__input:focus {
    outline: none;
  }

  .header_search-mode .search-block-mobile__input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.search-block {
  padding: 0 18px;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-right: 24px;
  margin-left: 60px;
}

@media screen and (max-width: 500px) {
  .search-block {
    display: none;
  }
}

.search-block_city-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  width: auto;
  height: 40px;
  margin-bottom: 20px;
}

.search-block .search-input {
  height: 16px;
  overflow: hidden;
  margin-left: 25px;
  width: 100%;
}

.search-block .search-input::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  top: -2px;
}

.search-block .search-input::-moz-placeholder {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  top: -2px;
}

.search-block .search-input:-ms-input-placeholder {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  top: -2px;
}

.search-block .search-input::-ms-input-placeholder {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  top: -2px;
}

.search-block .search-input::placeholder {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  top: -2px;
}

.search-block_city-search .search-input::-webkit-input-placeholder {
  font-size: 12px;
  top: -0px;
}

.search-block_city-search .search-input::-moz-placeholder {
  font-size: 12px;
  top: -0px;
}

.search-block_city-search .search-input:-ms-input-placeholder {
  font-size: 12px;
  top: -0px;
}

.search-block_city-search .search-input::-ms-input-placeholder {
  font-size: 12px;
  top: -0px;
}

.search-block_city-search .search-input::placeholder {
  font-size: 12px;
  top: -0px;
}

.search-block .search-input:focus {
  outline: none;
}

.search-block .search-input:focus::-webkit-input-placeholder {
  color: transparent;
}

.search-block .search-input:focus::-moz-placeholder {
  color: transparent;
}

.search-block .search-input:focus:-ms-input-placeholder {
  color: transparent;
}

.search-block .search-input:focus::-ms-input-placeholder {
  color: transparent;
}

.search-block .search-input:focus::placeholder {
  color: transparent;
}

.header .header-menu nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}

@media screen and (max-width: 1440px) {
  .search-block {
    margin-right: 24px;
  }
}

.header-menu .burger {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 30px;
  width: 40px;
}

.header-menu .burger span {
  height: 4px;
  width: 100%;
  background-color: black;
}

.header-menu .burger.active span:nth-child(2) {
  opacity: 0;
  width: 1px;
}

.header-menu .burger.active span:nth-child(1) {
  -webkit-transform: translateY(14.5px) rotate(45deg);
  -ms-transform: translateY(14.5px) rotate(45deg);
  transform: translateY(14.5px) rotate(45deg);
}

.header-menu .burger.active span:nth-child(3) {
  -webkit-transform: translateY(-11px) rotate(-45deg);
  -ms-transform: translateY(-11px) rotate(-45deg);
  transform: translateY(-11px) rotate(-45deg);
}

.header-menu .burger span {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

@media screen and (min-width: 1440px) {
  .header-menu .burger {
    display: none;
  }
}

@media screen and (max-width: 1440px) {
  .header-menu .burger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .header .header-menu nav {
    position: absolute;
    top: 100px;
    right: -274px;
    background-color: white;
    height: 300px;
    width: 250px;
    padding-top: 30px;
    padding-right: var(--adaptive-padding);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: right 0.5s;
    -o-transition: right 0.5s;
    transition: right 0.5s;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
  }

  .header .header-menu nav.swoosh {
    right: 0px;
    -webkit-box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, 0.25),
      -10px 10px 10px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, 0.25),
      -10px 10px 10px rgba(0, 0, 0, 0.25);
  }
}

.footer {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "img menu genres"
    "img copyright genres";
  -ms-grid-rows: 58% var(--adaptive-padding) auto;
  grid-template-rows: 58% auto;
  height: 300px;
  -webkit-box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.25);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0px var(--adaptive-padding);
  gap: var(--adaptive-padding);
}

.footer .logo {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: img;
}

.footer .nav-main {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: menu;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  align-self: flex-end;
}

.footer .copyright {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: copyright;
  -ms-grid-row-align: center;
  align-self: center;
}

.footer .genres-wrapper {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 5;
  grid-area: genres;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer .genres-wrapper nav {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  row-gap: 16px;
  margin-bottom: 24px;
}

.footer .nav-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-flow: wrap column;
  flex-flow: wrap column;
  gap: 16px;
  max-height: 130px;
}

@media screen and (max-width: 992px) {
  .footer {
    grid-template-areas:
      "img menu genres"
      "copyright copyright genres";
    -ms-grid-columns: -webkit-min-content auto auto;
    -ms-grid-columns: min-content auto auto;
    grid-template-columns: -webkit-min-content auto auto;
    grid-template-columns: min-content auto auto;
  }

  .footer .logo {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .footer .logo {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .footer .nav-main {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .footer .copyright {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .footer .genres-wrapper {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
  }
}

@media screen and (max-width: 768px) {
  .footer {
    height: auto;
    padding: 40px var(--adaptive-padding);
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
  }

  .footer .logo {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .footer {
    grid-template-areas:
      "menu genres"
      "copyright copyright";
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }

  .footer .nav-main {
    -ms-flex-item-align: start;
    align-self: flex-start;
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .footer .genres-wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }

  .footer .genres-wrapper nav {
    align-self: flex-start;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .footer .nav-main {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .footer .copyright {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .footer .genres-wrapper {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
}

.main {
  min-height: 100vh;
  margin-bottom: 80px;
}

.stream-block__rating-common-info-wrapper {
  margin-bottom: 30px;
  margin-top: 20px;
  display: -ms-grid;
  display: grid;
  gap: 30px;
}

@media screen and (max-width: 1000px) {
  .stream-block__rating-common-info-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 100px;
  }
}

@media screen and (max-width: 576px) {
  .stream-block__rating-common-info-wrapper {
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.rating {
  font-size: 14px;
  display: -ms-grid;
  display: grid;
  gap: 5px;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  background-color: white;
}

.rating-star {
  display: inline-block;
  width: 31px;
  height: 28.75px;
  background-image: url(/static/main/img/star.svg);
}

.rating__stars {
  cursor: pointer;
}

.preloader {
  position: fixed;
  z-index: 99;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: white;
  width: 100vw;
  height: 100vh;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 1;
}

.stream-control__button {
  display: block;
  width: 60px;
  height: 60px;
  background-color: black;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

.toggle_pause {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='30' viewBox='0 0 24 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='18' width='6' height='30' fill='white'/%3E%3Crect width='6' height='30' fill='white'/%3E%3C/svg%3E%0A");
}

.toggle_play {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='27' viewBox='0 0 24 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.990381 0.5L23.4904 13.4904L0.990381 26.4808L0.990381 0.5Z' fill='white'/%3E%3C/svg%3E%0A");
  background-position: 20px center;
}

.toggle_add-to-favorite {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 16.5V30H17.5V16.5H30V12.5H17.5V0H13.5V12.5H0V16.5H13.5Z' fill='white'/%3E%3C/svg%3E%0A");
}

.toggle_error {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 16.5V30H17.5V16.5H30V12.5H17.5V0H13.5V12.5H0V16.5H13.5Z' fill='red'/%3E%3C/svg%3E%0A");
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-size: 39px;
}

.toggle_remove-from-favorite {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='18' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.60847 1.60847C-0.536155 3.75309 -0.536157 7.23021 1.60847 9.37483L9.99978 17.7661L10.0002 17.7657L10.0008 17.7663L18.3915 9.37557C20.5361 7.23095 20.5361 3.75383 18.3915 1.60921C16.2469 -0.535416 12.7698 -0.535416 10.6251 1.60921L10.0004 2.23399L9.37484 1.60847C7.23021 -0.536155 3.75309 -0.536157 1.60847 1.60847Z' fill='%23FF0000'/%3E%3C/svg%3E%0A");
  background-size: 28px;
}

.toggle_loading {
  background-image: url(/static/main/img/loading.gif);
  background-size: 50px;
  background-position: center;
}

.volume-control {
  width: 160px;
  height: 50px;
  cursor: pointer;
}

.volume-control,
.volume-control::-webkit-slider-runnable-track,
.volume-control::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.volume-control::-webkit-slider-runnable-track {
  width: 200px;
  height: 11px;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(black),
      to(black)
    ),
    white;
  background: linear-gradient(to right, black, black), white;
  background-size: var(--volume) 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 1px solid black;
}

.volume-control::-webkit-slider-thumb {
  height: 0px;
  width: 0px;
}

.speaker {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1021 0.0979729C19.7714 0.191849 19.4653 0.318382 19.1755 0.481647C18.9837 0.583687 16.7959 2.43267 12.0531 6.48981L5.20409 12.347L3.61225 12.3674L2.02042 12.3878L1.67348 12.5143C1.03266 12.7429 0.55103 13.1592 0.265316 13.7347C-0.016317 14.3021 -0.00407211 14.0204 0.00817279 20.0327L0.0204177 25.449L0.12654 25.7225C0.281642 26.1225 0.477561 26.4245 0.759193 26.7102C1.05715 27.0041 1.35103 27.1919 1.76327 27.3388C2.05715 27.449 2.0694 27.449 3.37144 27.4612L4.68164 27.4735L11.7592 33.4368C15.6531 36.7143 18.9306 39.4572 19.0408 39.5306C19.5143 39.8368 20.1469 40.0408 20.6408 40.0408C21.4 40.0408 21.8816 39.5919 22.1347 38.6408L22.2245 38.3061V20.0408V1.77552L22.1347 1.44083C21.9592 0.775524 21.6857 0.379604 21.2776 0.175522C21.0857 0.081646 20.9837 0.0612373 20.6776 0.0530739C20.449 0.0449104 20.2286 0.0653191 20.1021 0.0979729Z' fill='black'/%3E%3Cpath d='M30.551 6.83268C30.2204 6.91432 29.947 7.07758 29.7061 7.34289C29.3837 7.68983 29.2898 7.94289 29.2857 8.4735C29.2857 8.86534 29.2939 8.89391 29.4408 9.19595C29.5592 9.43268 29.6572 9.55921 29.849 9.73064C29.9878 9.85309 30.3306 10.1511 30.6123 10.3959C30.8939 10.6368 31.4449 11.1592 31.8367 11.5511C34.0776 13.7919 35.4041 15.9021 35.9551 18.1021C36.4898 20.2408 36.1347 22.5388 34.9306 24.7143C33.8735 26.6286 32.3674 28.347 29.8449 30.5225C28.7755 31.4449 29.2694 33.2 30.6694 33.4408C31.098 33.5143 31.3837 33.4449 32.0816 33.1021C33.6082 32.347 34.7959 31.4939 35.9592 30.298C36.6735 29.5674 37.0694 29.0817 37.6163 28.2613C39.0816 26.0531 39.898 23.4204 39.9878 20.6123C40.1265 16.1102 38.2327 11.7429 34.9551 9.00411C34.0408 8.24085 33.3306 7.77554 32.2449 7.23268C31.347 6.77962 31.049 6.71023 30.551 6.83268Z' fill='black'/%3E%3Cpath d='M27.9714 13.6122C27.3347 13.8082 26.898 14.3714 26.8653 15.0408C26.8449 15.5143 26.9306 15.7388 27.3918 16.4286C28.4612 18.0163 29.0082 19.8041 28.8612 21.2367C28.7959 21.8816 28.6531 22.3878 28.3674 22.9592C28.098 23.502 27.8735 23.8163 27.4 24.3306C26.9633 24.8 26.8776 24.9959 26.8776 25.5306C26.8776 25.902 26.8898 25.9633 27.0041 26.2041C27.3959 27.0163 28.3429 27.3469 29.1714 26.951C29.6286 26.7388 30.5184 25.9061 31.0163 25.2245C32.5918 23.0939 33.0327 20.2367 32.1837 17.6531C32 17.0939 31.551 16.1714 31.2408 15.7143C30.5755 14.7265 29.6612 13.8735 29.0286 13.649C28.7143 13.5388 28.2531 13.5224 27.9714 13.6122Z' fill='black'/%3E%3C/svg%3E%0A");
}

.speaker_muted {
  background-image: url("data:image/svg+xml,%3Csvg width='41' height='40' viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.0989 0.05714C19.7683 0.151018 19.4622 0.277548 19.1724 0.440814C18.9806 0.542854 16.7928 2.39183 12.05 6.44898L5.20098 12.3061L3.60914 12.3265L2.0173 12.3469L1.67037 12.4735C1.02955 12.702 0.547917 13.1184 0.262203 13.6939C-0.0194298 14.2612 -0.0071849 13.9796 0.00505999 19.9918L0.0173049 25.4082L0.123427 25.6816C0.278529 26.0816 0.474448 26.3837 0.75608 26.6694C1.05404 26.9633 1.34792 27.151 1.76016 27.298C2.05404 27.4082 2.06628 27.4082 3.36833 27.4204L4.67853 27.4327L11.7561 33.3959C15.65 36.6735 18.9275 39.4163 19.0377 39.4898C19.5112 39.7959 20.1438 40 20.6377 40C21.3969 40 21.8785 39.551 22.1316 38.6L22.2214 38.2653V20V1.73469L22.1316 1.4C21.9561 0.734691 21.6826 0.338773 21.2744 0.134691C21.0826 0.0408135 20.9806 0.0204053 20.6744 0.0122421C20.4459 0.0040788 20.2255 0.024487 20.0989 0.05714Z' fill='black'/%3E%3Cpath d='M30.5479 6.79183C30.2173 6.87347 29.9438 7.03673 29.703 7.30204C29.3805 7.64898 29.2867 7.90204 29.2826 8.43265C29.2826 8.82449 29.2907 8.85306 29.4377 9.1551C29.5561 9.39183 29.654 9.51836 29.8458 9.68979C29.9846 9.81224 30.3275 10.1102 30.6091 10.3551C30.8907 10.5959 31.4418 11.1184 31.8336 11.5102C34.0744 13.751 35.401 15.8612 35.952 18.0612C36.4867 20.2 36.1316 22.498 34.9275 24.6735C33.8703 26.5878 32.3642 28.3061 29.8418 30.4816C28.7724 31.4041 29.2663 33.1592 30.6663 33.4C31.0948 33.4735 31.3805 33.4041 32.0785 33.0612C33.605 32.3061 34.7928 31.4531 35.9561 30.2571C36.6703 29.5265 37.0663 29.0408 37.6132 28.2204C39.0785 26.0122 39.8948 23.3796 39.9846 20.5714C40.1234 16.0694 38.2295 11.702 34.952 8.96326C34.0377 8.2 33.3275 7.73469 32.2418 7.19183C31.3438 6.73877 31.0458 6.66938 30.5479 6.79183Z' fill='black'/%3E%3Cpath d='M27.9683 13.5714C27.3316 13.7673 26.8948 14.3306 26.8622 15C26.8418 15.4735 26.9275 15.698 27.3887 16.3878C28.4581 17.9755 29.005 19.7633 28.8581 21.1959C28.7928 21.8408 28.6499 22.3469 28.3642 22.9184C28.0948 23.4612 27.8703 23.7755 27.3969 24.2898C26.9601 24.7592 26.8744 24.9551 26.8744 25.4898C26.8744 25.8612 26.8867 25.9224 27.001 26.1633C27.3928 26.9755 28.3397 27.3061 29.1683 26.9102C29.6254 26.698 30.5152 25.8653 31.0132 25.1837C32.5887 23.0531 33.0295 20.1959 32.1805 17.6122C31.9969 17.0531 31.5479 16.1306 31.2377 15.6735C30.5724 14.6857 29.6581 13.8327 29.0254 13.6082C28.7112 13.498 28.2499 13.4816 27.9683 13.5714Z' fill='black'/%3E%3Crect x='1.63226' y='8' width='42.1919' height='4' rx='2' transform='rotate(24.0836 1.63226 8)' fill='%23EB1D1D'/%3E%3C/svg%3E%0A");
}

.content-wrapper {
  max-width: 1000px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (max-width: 1100px) {
  .content-wrapper {
    padding: 0px 30px;
  }
}

@media screen and (max-width: 576px) {
  .content-wrapper {
    padding: 0px 16px;
  }
}

.search-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 20px;
  gap: 10px;
  width: 100%;
  background-color: white;
  padding: 16px;
  position: absolute;
  height: 380px;
  top: -500px;
  z-index: 9;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
  -webkit-transition: top 1s;
  -o-transition: top 1s;
  transition: top 1s;
}

.search-results_active {
  top: 100px;
}

.search-results__item {
  margin-left: 16px;
  text-decoration: none;
  font-weight: normal;
}

.search-results__item:hover {
  text-decoration: underline;
}

.search-results__item:last-child {
  font-weight: bold;
}

.stream-control__social-playlist-wrapper {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "stream-block share-widget"
    "stream-block playlist-widget";
  position: relative;
}

@media screen and (max-width: 1000px) {
  .stream-control__social-playlist-wrapper {
    grid-template-areas:
      "stream-block stream-block"
      "playlist-widget share-widget";
  }
}

@media screen and (max-width: 768px) {
  .stream-control__social-playlist-wrapper {
    grid-template-areas:
      "stream-block"
      "share-widget"
      "playlist-widget";
  }
}

.stream-block {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: stream-block;
}

@media screen and (max-width: 768px) {
  .stream-block {
    margin-bottom: 20px;
  }
}

.stream-control {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "radio-logo on-air"
    "radio-logo control-buttons";
  -ms-grid-columns: fit-content(100%) 40px auto;
  grid-template-columns: fit-content(100%) auto;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

@media screen and (max-width: 1000px) {
  .stream-control {
    -webkit-column-gap: 90px;
    -moz-column-gap: 90px;
    column-gap: 90px;
  }
}

@media screen and (max-width: 576px) {
  .stream-control {
    grid-template-areas:
      "radio-logo"
      "on-air"
      "control-buttons";
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    justify-items: center;
    margin-bottom: 35px;
  }
}

.stream-control__radio-logo {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: radio-logo;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 20px;
  width: 180px;
  height: 180px;
}

@media screen and (max-width: 768px) {
  .stream-control__radio-logo {
    margin-bottom: 10px;
  }
}

.stream-control__on-air {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: on-air;
}

@media screen and (max-width: 576px) {
  .stream-control__on-air {
    margin-bottom: 20px;
    font-size: 14px;
  }
}

.stream-control__buttons {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: control-buttons;
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "play like"
    "volume volume";
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

@media screen and (max-width: 576px) {
  .stream-control__radio-logo {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .stream-control__on-air {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .stream-control__buttons {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

@media screen and (max-width: 576px) {
  .stream-control__buttons {
    justify-items: center;
    row-gap: 15px;
  }
}

.stream-control__toggle {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: play;
}

.random-station__controls > .stream-control__toggle {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.stream-control__like {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: like;
}

.random-station__controls > .stream-control__like {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

.volume {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: volume;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.random-station__controls > .volume {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

.share {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: share-widget;
  padding: 16px;
  display: -ms-grid;
  display: grid;
  row-gap: 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: white;
  -ms-grid-column-align: end;
  justify-self: end;
}

@media screen and (max-width: 768px) {
  .share {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-grid-column-align: center;
    justify-self: center;
    margin-bottom: 20px;
  }
}

.shadow {
  -webkit-box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.25);
}

.share__cta {
  font-weight: 600;
  font-size: 14px;
}

.share__socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.share__social {
  height: 30px;
  width: 30px;
  border-radius: 20%;
}

.playlist-widget {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: playlist-widget;
  width: 100%;
  margin-top: 40px;
}

@media screen and (max-width: 1000px) {
  .stream-block {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .share {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .playlist-widget {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
}

@media screen and (max-width: 768px) {
  .stream-block {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .share {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .playlist-widget {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

@media screen and (max-width: 1000px) {
  .playlist-widget {
    margin-top: 0;
  }
}

.playlist-widget__title {
  font-weight: bold;
  margin-bottom: 10px;
}

.playlist-widget__item {
  width: 100%;
  border-bottom: 1px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 17px;
  padding: 10px 0px;
}

@media screen and (max-width: 576px) {
  .playlist-widget__item {
    font-size: 14px;
  }
}

.playlist-widget__item:last-child {
  border-bottom: none;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  margin-top: 5px;
  font-size: 16px;
}

.playlist-widget__timestamp {
  margin-left: 13px;
}

.playlist-widget__full {
  text-decoration: underline;
}

.rating-average {
  display: block;
}

.reviews-count {
  display: block;
}

.reviews-count a {
  font-weight: bold;
  text-decoration: underline;
}

.common-info {
  display: -ms-grid;
  display: grid;
  row-gap: 10px;
}

.stations-set__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 35px;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.set-item {
  display: -ms-grid;
  display: grid;
  gap: 5px;
  width: 160px;
}

@media screen and (max-width: 400px) {
  .set-item {
    width: 120px;
  }
}

.set-item__logo {
  width: 160px;
  height: 160px;
  border-radius: 10%;
  -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 400px) {
  .set-item__logo {
    width: 120px;
    height: 120px;
  }
}

.set-item__name {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  display: block;
  text-wrap: pretty;
}

.station-info {
  padding: 24px;
  max-width: 850px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.station-info__title {
  margin: 0;
  margin-bottom: 24px;
  text-align: center;
}

.station-info__items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto) [2];
  grid-template-columns: repeat(2, auto);
  row-gap: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .station-info__items {
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }
}

.social__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

.social__logo {
  width: 50px;
  height: 50px;
}

.social__title {
  text-align: center;
}

.h3 {
  font-weight: bold;
  font-size: 1.5em;
}

.button,
a.button {
  color: white;
  font-weight: bold;
  font-size: 1em;
  background-color: #fc9d17;
  padding: 16px 32px;
  border: 0;
  border-radius: 5px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  -webkit-transition: -webkit-box-shadow 0.1s;
  transition: -webkit-box-shadow 0.1s;
  -o-transition: box-shadow 0.1s;
  transition: box-shadow 0.1s;
  transition: box-shadow 0.1s, -webkit-box-shadow 0.1s;
}

.button:active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.reviews__title {
  margin-bottom: 30px;
}

.reviews__show-form {
  margin-bottom: 30px;
}

.reviews__form {
  margin-bottom: 30px;
  width: 375px;
}

@media screen and (max-width: 576px) {
  .reviews__form {
    width: calc(100% - 32px);
  }
}

.form__title {
  margin-bottom: 20px;
}

.form__field-block {
  margin-bottom: 20px;
}

.form__label {
  display: block;
}

.form__input {
  border: solid 2px #c7c7c7;
  border-radius: 5px;
  height: 40px;
  padding: 0px 16px;
  width: 100%;
}

.form__input::-webkit-input-placeholder {
  font-size: 1em;
}

.form__input::-moz-placeholder {
  font-size: 1em;
}

.form__input:-ms-input-placeholder {
  font-size: 1em;
}

.form__input::-ms-input-placeholder {
  font-size: 1em;
}

.form__input::placeholder {
  font-size: 1em;
}

.form__input_textarea {
  padding: 10px 16px;
  height: 150px;
}

.textarea-block {
  position: relative;
}

.textarea__counter-wrapper {
  position: absolute;
  right: -32px;
  top: 0;
  color: #656565;
}

.reviews__items {
  margin-bottom: 40px;
}

.reviews__item {
  padding: 16px;
  border-bottom: 1px solid #d1d1d1;
}

.reviews__head {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
}

.reviews__name {
  font-weight: bold;
}

.reviews__timestamp {
  font-size: 12px;
}

.reviews__rate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  gap: 6px;
}

.filled-star-img {
  width: 20px;
}

.reviews__more {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.header_search-mode .logo,
.header_search-mode .header-menu {
  display: none;
}

.search-block-mobile__close-wrapper {
  width: 24px;
  height: 24px;
}

.cross,
.cross::after {
  content: "";
  display: block;
  background-color: #656565;
  width: 30px;
  height: 4px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 2px;
}

.cross::after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.search-result-count {
  margin-bottom: 40px;
}

.left-center {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.set-item__href {
  text-decoration: none;
}

.rate-label {
  display: block;
  margin-bottom: 5px;
}

.favorite {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  /* align-items: center; */
  width: 100%;
}

.favorite__item {
  padding: 16px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}

@media screen and (max-width: 360px) {
  .favorite__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0px;
    position: relative;
  }
}

.favorite__logo {
  width: 100px;
  height: 100px;
  border-radius: 10%;
}

.favorite__name-controls-delete-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.favorite__name-control-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: center;
  align-content: center;
  gap: 20px;
}

@media screen and (max-width: 360px) {
  .favorite__name-control-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
  }
}

.favorite__controls-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

@media screen and (max-width: 360px) {
  .favorite__controls-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 40px;
  }
}

.move-up {
  content: url('data:image/svg+xml,<svg width="42" height="16" viewBox="0 0 42 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 13L21 3L39 13" stroke="black" stroke-width="5" stroke-linecap="round"/></svg>');
  cursor: pointer;
}

.move-up_disabled {
  content: url('data:image/svg+xml,<svg width="42" height="16" viewBox="0 0 42 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 13L21 3L39 13" stroke="black" stroke-width="5" stroke-linecap="round"/></svg>');
  pointer-events: none;
  opacity: 0.1;
}

.move-down {
  content: url('data:image/svg+xml,<svg width="42" height="16" viewBox="0 0 42 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3L21 13L39 3" stroke="black" stroke-width="5" stroke-linecap="round"/></svg>');
  cursor: pointer;
}

.move-down_disabled {
  content: url('data:image/svg+xml,<svg width="42" height="16" viewBox="0 0 42 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3L21 13L39 3" stroke="black" stroke-width="5" stroke-linecap="round"/></svg>');
  pointer-events: none;
  opacity: 0.1;
}

.delete {
  cursor: pointer;
  content: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.34689 28.2753C-0.11563 28.7378 -0.11563 29.4877 0.346891 29.9502L1.63229 31.2356C2.09481 31.6981 2.8447 31.6981 3.30722 31.2356L15.7912 18.7516L28.2753 31.2356C28.7378 31.6981 29.4877 31.6981 29.9502 31.2356L31.2356 29.9502C31.6981 29.4877 31.6981 28.7378 31.2356 28.2753L18.7516 15.7912L31.2356 3.30722C31.6981 2.8447 31.6981 2.09481 31.2356 1.63229L29.9502 0.34689C29.4877 -0.11563 28.7378 -0.11563 28.2753 0.346891L15.7912 12.8309L3.30722 0.346891C2.8447 -0.115629 2.09481 -0.115628 1.63229 0.346892L0.34689 1.63229C-0.11563 2.09481 -0.115629 2.8447 0.346891 3.30722L12.8309 15.7912L0.34689 28.2753Z" fill="%23FF7A7A"/></svg>');
}

.favorite__delete {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 360px) {
  .favorite__delete {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

.random-station {
  padding: 24px;
  width: 245px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

@media screen and (max-width: 1050px) {
  .random-station {
    display: -ms-grid;
    display: grid;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    grid-template-areas:
      "random-station-title random-station-title"
      "random-station-logo random-station-on-air"
      "random-station-logo random-station-controls";
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    row-gap: 10px;
    padding: 20px;
  }
}

@media screen and (max-width: 500px) {
  .random-station {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.random-station__title {
  font-size: 1.5em;
  font-weight: bold;
  grid-area: random-station-title;
}

@media screen and (max-width: 1050px) {
  .random-station__title {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 860px) {
  .random-station__title {
    text-align: center;
  }
}

.random-station__station {
  -ms-grid-column-align: center;
  justify-self: center;
  grid-area: random-station-logo;
}

.random-station__on-air {
  font-size: 0.8em;
  grid-area: random-station-on-air;
}

.random-station__controls {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "volume volume volume"
    "play reroll like";
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-area: random-station-controls;
}

@media screen and (max-width: 1050px) {
  .random-station__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .random-station__station {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
  }
  .random-station__on-air {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .random-station__controls {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
}

@media screen and (max-width: 1050px) {
  .random-station__mute,
  .random-station__toggle,
  .random-station__like,
  .random-station__reroll {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  .random-station .toggle_error {
    -webkit-transform: rotate(45deg) scale(0.7);
    -ms-transform: rotate(45deg) scale(0.7);
    transform: rotate(45deg) scale(0.7);
  }
}

.random-station__volume {
  margin-bottom: 10px;
}

@media screen and (max-width: 1050px) {
  .random-station__volume {
    margin-bottom: 5px;
  }

  .random-station__volume-control {
    width: 120px;
    height: auto;
  }
}

.random-station__toggle {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: play;
  -ms-grid-column-align: start;
  justify-self: start;
}

.random-station__controls > .random-station__toggle {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.random-station__like {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: like;
  -ms-grid-column-align: end;
  justify-self: end;
}

.random-station__controls > .random-station__like {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

.station-reroll {
  background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 768c-47.392 0-91.664-13.184-129.776-35.712l-46.608 46.608A318.448 318.448 0 0 0 512 832c176.736 0 320-143.264 320-320h-64c0 141.152-114.848 256-256 256zM512 192c-176.736 0-320 143.264-320 320h64c0-141.152 114.848-256 256-256 47.392 0 91.664 13.184 129.776 35.712l46.608-46.608A318.448 318.448 0 0 0 512 192zM704 512h192l-96-128zM320 512H128l96 128z' /%3E%3C/svg%3E");
}

.random-station__reroll {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-align: center;
  justify-self: center;
  grid-area: reroll;
}

.popular-genres {
  width: 245px;
  padding: 24px;
}

@media screen and (max-width: 1050px) {
  .popular-genres {
    width: 350px;
    padding: 20px;
  }
}

@media screen and (max-width: 500px) {
  .popular-genres {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 250px;
    padding: 20px;
  }
}

.popular-genres__title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 24px;
}

@media screen and (max-width: 1050px) {
  .popular-genres__title {
    font-size: 1.2em;
    text-align: end;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 860px) {
  .popular-genres__title {
    text-align: center;
  }
}

.popular-genres__genres {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  font-weight: 300;
}

@media screen and (max-width: 1050px) {
  .popular-genres__genres {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    height: 160px;
    text-align: start;
  }
}

@media screen and (max-width: 500px) {
  .popular-genres__genres {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    text-align: center;
  }
}

.popular-genres__all-genres {
  text-align: center;
  display: block;
  margin-top: 20px;
}

.popular-genres__genre {
  font-weight: normal;
}

.main-page {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "favorite random-station"
    "popular-stations popular-genres";
  gap: 50px;
  margin-top: 40px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.main-page_without-favorites {
  grid-template-areas:
    "popular-stations random-station"
    "popular-stations popular-genres";
}

.main-page #yandex_rtb_R-A-16020031-1 {
  grid-area: rtb;
}

.main-page:has(#yandex_rtb_R-A-16020031-1) {
  grid-template-areas:
    "favorite random-station"
    "rtb rtb"
    "popular-stations popular-genres";
}

.main-page_without-favorites:has(#yandex_rtb_R-A-16020031-1) {
  grid-template-areas:
    "popular-stations random-station"
    "rtb rtb"
    "popular-stations popular-genres";
}

@media screen and (max-width: 1050px) {
  .main-page {
    grid-template-areas:
      "favorite favorite"
      "random-station popular-genres"
      "popular-stations popular-stations";
  }

  .main-page_without-favorites {
    grid-template-areas:
      "random-station popular-genres"
      "popular-stations popular-stations";
  }

  .main-page:has(#yandex_rtb_R-A-16020031-1) {
    grid-template-areas:
      "favorite favorite"
      "random-station popular-genres"
      "rtb rtb"
      "popular-stations popular-stations";
  }

  .main-page_without-favorites:has(#yandex_rtb_R-A-16020031-1) {
    grid-template-areas:
      "random-station popular-genres"
      "rtb rtb"
      "popular-stations popular-stations";
  }
}

@media screen and (max-width: 860px) {
  .main-page {
    grid-template-areas:
      "favorite"
      "random-station"
      "popular-genres"
      "popular-stations";
  }

  .main-page_without-favorites {
    grid-template-areas:
      "random-station"
      "popular-genres"
      "popular-stations";
  }

  .main-page:has(#yandex_rtb_R-A-16020031-1) {
    grid-template-areas:
      "favorite"
      "rtb"
      "random-station"
      "popular-genres"
      "popular-stations";
  }

  .main-page_without-favorites:has(#yandex_rtb_R-A-16020031-1) {
    grid-template-areas:
      "random-station"
      "rtb"
      "popular-genres"
      "popular-stations";
  }
}

.main-page__favorite {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: favorite;
}

.main-page__random-station {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: random-station;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.main-page_without-favorites > .main-page__random-station {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

@media screen and (max-width: 860px) {
  .main-page__random-station {
    -ms-grid-column-align: center;
    justify-self: center;
  }
}

.main-page__popular-genres {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: popular-genres;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -ms-grid-column-align: end;
  justify-self: end;
}

.main-page_without-favorites > .main-page__popular-genres {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

@media screen and (max-width: 860px) {
  .main-page__popular-genres {
    -ms-grid-column-align: center;
    justify-self: center;
  }
}

.main-page__popular-stations {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: popular-stations;
}

.main-page_without-favorites > .main-page__popular-stations {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
}

@media screen and (max-width: 1050px) {
  .main-page__favorite {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .main-page__random-station {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .main-page_without-favorites > .main-page__random-station {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .main-page__popular-genres {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .main-page_without-favorites > .main-page__popular-genres {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .main-page__popular-stations {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }

  .main-page_without-favorites > .main-page__popular-stations {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
}

@media screen and (max-width: 860px) {
  .main-page__favorite {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .main-page__random-station {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .main-page_without-favorites > .main-page__random-station {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .main-page__popular-genres {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }

  .main-page_without-favorites > .main-page__popular-genres {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .main-page__popular-stations {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .main-page_without-favorites > .main-page__popular-stations {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
}

.main-page .stations-set__items {
  -webkit-column-gap: 50px;
  -moz-column-gap: 50px;
  column-gap: 50px;
}

.main-page .set-item {
  width: 120px;
}

.main-page .set-item__logo {
  width: 120px;
  height: 120px;
}

.category-list {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

@media screen and (max-width: 1000px) {
  .category-list {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

@media screen and (max-width: 1000px) {
  .category-list {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

@media screen and (max-width: 768px) {
  .category-list {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

.category-list__item {
  display: block;
  margin-bottom: 20px;
}

.category-list_single-column {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.message {
  padding: 16px;
  background: #f7c47c;
  width: 100%;
  top: 0;
  position: relative;
  -webkit-transition: top 1s;
  -o-transition: top 1s;
  transition: top 1s;
}

.form {
  position: relative;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 50%;
}

.center-form {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.form ul {
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  list-style-type: none;
}

.form label {
  display: block;
  font-size: 14px;
}

.form input[type="text"],
.form input[type="password"],
form input[type="email"] {
  height: 20px;
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
}

.form input[type="submit"] {
  width: 100%;
  height: 40px;
  padding: 0;
}

.form .helptext {
  display: block;
  font-size: 12px;
}

.form .errorlist {
  font-size: 14px;
}

.form .errorlist li {
  margin-bottom: 10px;
  padding: 5px;
  background-color: #ffcdd2;
}

.change-password {
  margin-top: 40px;
  position: static;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 300px;
}

.text-align_center {
  text-align: center;
}

.social-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.social-login__img {
  width: 35px;
  height: 35px;
}

.random-station-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 40px;
}

.font-12px {
  font-size: 12px;
}

.margin-top_20px {
  margin-top: 20px;
}

.vjs-v7 {
  display: none !important;
}

#vmusic {
  display: none !important;
}

.mini-player__name {
  margin-left: 20px;
}

.notifications {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.notifications__elem {
  background-color: #f7c47c;
  padding: 10px;
  display: inline-block;
  width: 280px;
}

.datepicker__input {
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid #c7c7c7;
}

.playlist {
  display: grid;
  gap: 20px;
}

.playlist-item {
  background-color: #F9F9F9;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.25);
  padding: 20px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.margin-bottom_20px {
  margin-bottom: 20px;
}

.to-station {
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 10px;
}

.to-station::before {
  content: url('data:image/svg+xml,<svg width="41" height="16" viewBox="0 0 41 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.292893 7.29289C-0.0976295 7.68341 -0.0976296 8.31658 0.292892 8.7071L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41422 8L8.07107 2.34314C8.46159 1.95262 8.46159 1.31945 8.07107 0.928929C7.68054 0.538405 7.04738 0.538405 6.65685 0.928929L0.292893 7.29289ZM41 7L1 7L1 9L41 9L41 7Z" fill="black"/></svg>');
  position: relative;
  top: 2px;
}

.banner {
    width: 80%;
    padding: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

.text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.line {
    width: 100%;
    position: relative;
    top: 3px;
    height: 2px;
    background-color: rgba(252, 157, 23, 0.2);
}

@media screen and (max-width: 1200px) {
  .banner .text-wrapper {
    font-size: 16px;
  }

  .banner {
    flex-direction: column;
    width: fit-content;
  }

  .banner .button {
    font-size: 14px;
    padding: 10px 30px;
  }
}

.loading {
  filter: blur(6px);
  pointer-events: none;
}

.pari-b {
  display: flex;
  justify-content: center;
}