/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/Layout/PageTitle/styles.scss ***!
  \*********************************************************************************************************************************************************************/
.pageTitle {
  margin: 0 0 30rem;
  width: 100%;
}
.pageTitle h1 {
  font-size: 26rem;
}
.pageTitle p {
  margin: 5rem 0 0;
}
/*!*******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/Layout/PlayBtn/styles.scss ***!
  \*******************************************************************************************************************************************************************/
.play-btn .circular-loader {
  width: 100%;
  height: 100%;
  fill: #fff;
  stroke: #fff;
}
.play-btn .circular-loader:hover {
  fill: #bbb;
  stroke: #bbb;
}
.play-btn .loader-path {
  opacity: 0;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 150, 200;
  stroke-dashoffset: -10;
  animation: loader-path-dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  transform-origin: 50%;
  transition: opacity 0.3s;
  pointer-events: none;
}
.loading.play-btn .loader-path {
  opacity: 1;
}

.play-btn .loader-bg-wrap {
  animation-duration: 12s;
  transform-origin: 50%;
}
.playing:not(.loading).play-btn .loader-bg-wrap {
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.play-btn .loader-bg {
  fill: none;
  stroke: #bbb4;
  stroke-width: 1;
  pointer-events: none;
  animation-duration: 16s;
  transform-origin: 50%;
}
.playing:not(.loading).play-btn .loader-bg {
  animation-name: spinScale;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.loading.play-btn .loader-bg {
  opacity: 1;
}

.play-btn .animation-delay1 {
  animation-duration: 14s;
  opacity: 0.65;
  animation-direction: reverse;
}
.play-btn .animation-delay1 .loader-bg {
  animation-delay: 3s;
  animation-duration: 14s;
  animation-direction: reverse;
}
.play-btn .animation-delay2 {
  animation-duration: 16s;
  opacity: 0.45;
}
.play-btn .animation-delay2 .loader-bg3 {
  animation-delay: 5s;
  animation-duration: 12s;
}
.play-btn .loader-pause {
  opacity: 0;
  stroke-width: 6;
  stroke-linecap: round;
  transition: opacity 0.3s;
  pointer-events: none;
  transform: scale(0.8);
  transform-origin: 50%;
}
.playing.play-btn .loader-pause {
  opacity: 1;
}

.play-btn .loader-play {
  stroke-width: 4;
  stroke-linejoin: round;
  transition: opacity 0.3s;
  pointer-events: none;
  transform: translate(1.8rem, 0) scale(0.8);
  transform-origin: 50%;
}
.playing.play-btn .loader-play {
  opacity: 0;
}

@keyframes loader-path-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinScale {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1.12, 0.92);
  }
  50% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(0.92, 1.12);
  }
  100% {
    transform: scale(1, 1);
  }
}
/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/Layout/RadioImage/styles.scss ***!
  \**********************************************************************************************************************************************************************/
.radioImage {
  position: relative;
  display: flex;
  font-size: 8.3rem;
  line-height: 0;
  overflow: hidden;
  border-radius: 10%;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.radioImage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.radioImage.largeImage {
  font-size: 41.6rem;
}
.radioImage.withEqualizer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.radioImage .placeholder {
  position: relative;
  display: block;
  max-width: 100%;
  width: 6em;
  line-height: 1.05;
  text-align: center;
  color: #000;
  text-shadow: 0.05em 0.05em 0.05em #0006;
  color: #fff;
}
.radioImage .placeholder::before {
  content: "";
  display: block;
  height: 0;
  padding: 0 0 100%;
  background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ1OC43IiBoZWlnaHQ9IjQ1OC43IiB2aWV3Qm94PSIwIDAgMzQ0IDM0NCI+PHBhdGggZD0iTTAgMTcydjE3MmgzNDRWMEgwdjE3MnptMjAyIDB2MTQ0aC02MFYyOGg2MHYxNDR6bTExNCA0OHY5NmgtNjBWMTI0aDYwdjk2ek04OCAyNTZ2NjBIMjhWMTk2aDYwdjYweiIvPjwvc3ZnPg==) 0 0 no-repeat;
  background-size: 100%;
  opacity: 0.04;
}
.radioImage .placeholder span {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  pointer-events: none;
  word-wrap: break-word;
  max-width: 90%;
  max-height: 90%;
  transform: translate(-50%, -50%);
}
.radioImage .placeholderDark {
  color: #000;
}
.radioImage .equalizer {
  width: 20%;
  height: 20%;
  min-width: 25rem;
  min-height: 25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/Layout/RadioList/styles.scss ***!
  \*********************************************************************************************************************************************************************/
.radioList {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330rem, 1fr));
  grid-gap: 22rem 10rem;
}
.radioList li {
  font-size: 18rem;
  min-height: 60rem;
  padding: 3rem 0 0 72rem;
  position: relative;
}
.radioList .image {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0;
  width: 60rem;
  height: 60rem;
}
.radioList .genres {
  font-size: 15rem;
  margin: 10rem 0 0;
}
.radioList .genres a {
  color: #bbb;
}
.radioList .genres a + a {
  margin-left: 10rem;
}
.radioList .genres a:hover {
  color: #fff;
}
/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/Layout/BlockTitle/styles.scss ***!
  \**********************************************************************************************************************************************************************/
.blockTitle {
  display: flex;
  margin: 0 0 20rem;
}
.blockTitle h2 {
  font-size: 24rem;
  font-weight: 400;
}
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/RadioPage/MyFavoritesLink/styles.scss ***!
  \******************************************************************************************************************************************************************************/
.my-favorites-link {
  margin-top: 10rem;
  font-size: 14rem;
  cursor: pointer;
  color: #bbb;
  -webkit-user-select: none;
  user-select: none;
}
.my-favorites-link:hover {
  color: #fff;
}
.my-favorites-link.hidden {
  visibility: hidden;
}
/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/RadioPage/SelectStream/styles.scss ***!
  \***************************************************************************************************************************************************************************/
@charset "UTF-8";
.select-stream-wrap {
  position: relative;
  width: 150rem;
  margin-top: 15rem;
}
.select-stream-wrap::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 15rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: #888;
}

.select-stream {
  background-color: #2c2c2c;
  color: #bbb;
  border: 1px solid #444;
  padding: 6rem 10rem;
  font: 14rem/1.3 -apple-system, "Segoe UI", Ubuntu, sans-serif;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  width: 100%;
}
.select-stream:hover {
  border-color: #666;
}
.select-stream:focus {
  outline: none;
  border-color: #888;
}
/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/RadioPage/Heart/styles.scss ***!
  \********************************************************************************************************************************************************************/
.heart-wrap {
  fill: #181818;
  stroke: #fff;
  width: 40rem;
  height: 40rem;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  user-select: none; /* Standard syntax */
}
.heart-wrap:hover .heart {
  stroke: #69e9f5;
}
.heart-wrap.added {
  fill: #69e9f5;
  stroke: #69e9f5;
}
.heart-wrap .heart {
  width: 100%;
  height: 100%;
  stroke-width: 1.3rem;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/RadioPage/styles.scss ***!
  \**************************************************************************************************************************************************************/
@media screen and (max-width: 487px) {
  .radio-page .radio-page-ins {
    min-height: 83.2vw;
    width: 100vw;
    margin-left: -16rem;
    margin-right: -16rem;
  }
}
@media screen and (min-width: 488px) {
  .radio-page .radio-page-ins {
    min-height: 280rem;
  }
}

.radio-page {
  display: flex;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .radio-page {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .radio-page {
    flex-direction: column;
  }
}
@media screen and (min-width: 1280px) {
  .radio-page {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1280px) {
  .radio-page .column-left,
  .radio-page .column-right {
    width: calc(50% - 20rem);
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .radio-page .column-left {
    width: 718rem;
    margin: 0 auto 50rem;
  }
}
@media screen and (max-width: 767px) {
  .radio-page .column-left {
    width: 100%;
    margin: 0 auto 50rem;
  }
}
.radio-page .radio-top {
  display: flex;
}
@media screen and (min-width: 768px) {
  .radio-page .radio-top {
    justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  .radio-page .radio-top {
    flex-direction: column;
    align-items: center;
  }
}
.radio-page .radio-top-image {
  width: 250rem;
  height: 250rem;
  position: relative;
  border-radius: 10%;
  overflow: hidden;
}
.radio-page .artist-title-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 12rem 7rem;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 7rem 7rem rgba(0, 0, 0, 0.6);
  font-size: 14rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}
.radio-page .artist-title-bar span {
  display: inline-block;
  animation: move 10s linear infinite;
  min-width: 226rem;
}
@keyframes move {
  10%, 100% {
    transform: translateX(0);
  }
  50%, 60% {
    transform: translateX(calc(-100% + 226rem));
  }
}
.radio-page .radio-top-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .radio-page .radio-top-right {
    width: calc(100% - 270rem);
    min-width: 50%;
  }
}
.radio-page .btn-toolbar {
  position: relative;
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  .radio-page .btn-toolbar {
    order: 1;
    margin: 20rem 0 0;
  }
}
.radio-page .share {
  width: 40rem;
  height: 40rem;
  cursor: pointer;
  padding: 6rem;
  -webkit-user-select: none; /* Safari */
  user-select: none; /* Standard syntax */
}
.radio-page .share:hover {
  color: #69e9f5;
}
.radio-page .play-btn {
  width: 140rem;
  height: 140rem;
  cursor: pointer;
  overflow: hidden;
  border-radius: 50%;
}
.radio-page .radio-top-title {
  margin-top: 15rem;
  font-size: 20rem;
  font-weight: 400;
  color: #bbb;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .radio-page .radio-top-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.radio-page .radio-info {
  margin-top: 25rem;
  word-wrap: break-word;
}
.radio-page .radio-info-item {
  margin: 0 0 3rem;
  color: #bbb;
  font-size: 15rem;
}
.radio-page .radio-info-item a {
  color: #bbb;
}
.radio-page .radio-info-item a:hover {
  color: #fff;
}
.radio-page .radio-info-item .website-link {
  cursor: pointer;
}
.radio-page .radio-info-item .website-link:hover {
  color: #fff;
}
/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./client/components/RadioPage/Coffee/styles.scss ***!
  \*********************************************************************************************************************************************************************/
.coffee-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  cursor: pointer;
  transition: 0.25s;
}
.coffee-btn:hover {
  color: #bbb;
}
.coffee-btn svg {
  height: 30px;
  width: 30px;
}

/*# sourceMappingURL=client_components_RadioPage_RadioPage_tsx-client_components_Layout_BlockTitle_styles_scss-cli-772017.981eb1e6273315c3b40a.css.map*/