body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  background-color: #111111;
  color: #ffffff;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #141414;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2d2d2d;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #353535;
}
button {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
button img {
  height: 40px
}
@media screen and (max-width: 575px) {
  button img {
    height: 35px
  }
}
p {
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  margin: 0;
}

/* APP PRELOADER */

.App-Preloader {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  z-index: 999999;
  text-align: center;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.App-Preloader--Show {
  visibility: visible;
  opacity: 1;
}
@keyframes preloader {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.App-Preloader--Hidden {
  -webkit-animation: preloader-reverse 0.5s ease;
  animation: preloader-reverse 0.5s ease;
  visibility: hidden;
  opacity: 0;
  display: none;
}
@keyframes preloader-reverse {
  0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
.App-Loading {
  border-top: 3px solid rgba(255, 255, 255, 0.2);
  border-right: 3px solid rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid #ffffff;
  -webkit-animation: apploading 1.1s infinite linear;
  animation: apploading 1.1s infinite linear;
  transition-delay: 0.3s;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-top: 5%;
}
@-webkit-keyframes apploading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes apploading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.App-Logo-Pulse {
  animation: pulse 2s ease-out infinite;
  -webkit-animation: pulse 2s ease-out infinite;
  -moz-animation: pulse 2s ease-out infinite;
  -o-animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* APP HEADER */

.App-Header {
  position: relative;
  z-index: 5;
  padding: 10px;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 575px) {
  .App-Header {
    padding: 10px 5px;
  }
}
.App-Sidebar-Toggler {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Sidebar-Toggler:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.App-Section-Login {
  display: flex;
  align-items: center;
}
.App-Button-Sesion-Btn {
  font-family: 'Poppins', sans-serif;
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 5px 15px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Button-Sesion-Btn:hover {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  color: #000000;
}
@media screen and (max-width: 575px) {
  .App-Button-Sesion-Btn {
    font-size: 0.5rem;
  }
}
.App-Notification {
  height: 24px;
  position: relative;
  margin-right: 20px;
  cursor: pointer;
}
.App-Notification-Icon {
  width: 20px;
  fill: #ffffff;
}
.App-Notification-Counter {
  visibility: hidden;
  opacity: 0;
  background-color: #F5454A;
  padding: 5px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  font-size: 0.65rem;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -8px;
}
.App-Notification-Counter--Show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: Animate-Counter .5s ease;
  -moz-animation: Animate-Counter .5s ease;
  -o-animation: Animate-Counter .5s ease;
  animation: Animate-Counter .5s ease;
}
@keyframes Animate-Counter {
  0% {
    visibility: hidden;
    opacity: 0;
    top: 2px;
  }
  100% {
    visibility: visible;
    opacity: 1;
    top: -6px;
  }
}
.App-Notification-Counter--Hidden {
  visibility: hidden;
  opacity: 0;
  -webkit-animation: Animate-Counter-Inverse .5s ease;
  -moz-animation: Animate-Counter-Inverse .5s ease;
  -o-animation: Animate-Counter-Inverse .5s ease;
  animation: Animate-Counter-Inverse .5s ease;
}
@keyframes Animate-Counter-Inverse {
  0% {
    visibility: visible;
    opacity: 1;
    top: -6px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    top: 2px;
  }
}
.App-Notification-Dropdown {
  visibility: hidden;
  opacity: 0;
  top: 35px;
  right: -13px;
  width: 250px;
}
.App-Notification-Dropdown--Show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: Animate-Drop .5s ease;
  -moz-animation: Animate-Drop .5s ease;
  -o-animation: Animate-Drop .5s ease;
  animation: Animate-Drop .5s ease;
}
@keyframes Animate-Drop {
  0% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.App-Notification-Dropdown--Hidden {
  visibility: hidden;
  opacity: 0;
  -webkit-animation: Animate-Drop-Inverse .5s ease;
  -moz-animation: Animate-Drop-Inverse .5s ease;
  -o-animation: Animate-Drop-Inverse .5s ease;
  animation: Animate-Drop-Inverse .5s ease;
}
@keyframes Animate-Drop-Inverse {
  0% {
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
.App-Notification-Header {
  color: #000000;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  padding: 10px;
  font-size: 0.7rem;
  margin-bottom: 10px;
  justify-content: space-between;
}
.Notification-Header-Title {
  font-weight: 600;
}
.Notification-Header-Conf {
  color: #969696;
  font-weight: 300;
}
.App-Item {
  margin-bottom: 0;
}
.App-Item-Link {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  text-decoration: none;
  color: #000000;
  padding: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Item-Link:hover {
  background-color: #F8F8F8;
}
.App-Item-Link--Avatar {
  align-items: center;
  padding: 5px 10px;
}
.Item-Artist-Img {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  object-fit: cover;
  margin-right: 10px;
}
.Info-Text {
  font-size: 0.7rem;
}
.Artist-Info-Time {
  font-size: 0.55rem;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}
.App-Avatar {
  width: 35px;
  height: 35px;
  overflow: hidden;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  cursor: pointer;
}
.App-Avatar-Img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}
.Item-Icon {
  width: 20px;
  margin-right: 10px;
}
.Item-Icon-Path {
  fill: #7E7E7E;
}
.App-Avatar-Dropdown {
  visibility: hidden;
  opacity: 0;
  top: 56px;
  right: 8px;
  width: 130px;
}
.App-Avatar-Dropdown--Show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: Animate-Drop .5s ease;
  -moz-animation: Animate-Drop .5s ease;
  -o-animation: Animate-Drop .5s ease;
  animation: Animate-Drop .5s ease;
}
.App-Avatar-Dropdown--Hidden {
  visibility: hidden;
  opacity: 0;
  -webkit-animation: Animate-Drop-Inverse .5s ease;
  -moz-animation: Animate-Drop-Inverse .5s ease;
  -o-animation: Animate-Drop-Inverse .5s ease;
  animation: Animate-Drop-Inverse .5s ease;
}
.App-Avatar-Dropdown,
.App-Notification-Dropdown {
  position: absolute;
  z-index: 1000;
  display: block;
  float: left;
  padding: 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
.App-Avatar-Dropdown:before,
.App-Notification-Dropdown:before {
  content: "";
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #ffffff transparent;
  position: absolute;
  right: 7px;
  top: -6px;
}

/* APP PLAYER BG */

.App-Player-Bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  background-size: cover;
  background-position: center top;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.App-Player-Bg:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0,0,0,0.8);
  background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.8)), color-stop(30%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}

/* APP PLAYER-PANEL */

.App-Player-Panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 575px) {
  .App-Player-Panel {
    padding: 0;
  }
}
.App-Logo {
  margin-top: 20px;
  max-width: 230px;
  max-height: 100px;
}
@media screen and (min-width: 1117px) {
  .App-Logo {
  }
}
.App-Player-Card-Info {
  margin: 15px 0 5px 0;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  height: 18px;
}
.App-Center-Player {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.App-Player-Card {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  flex-direction: column;
}
.App-Card-Content {
  background-color: #000000;
  position: relative;
  overflow: hidden;
  width: 280px;
  height: 280px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-animation: App-Img .5s ease;
  -moz-animation: App-Img .5s ease;
  -o-animation: App-Img .5s ease;
  animation: App-Img .5s ease;
}
.App-Card-Img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
@media screen and (max-width: 575px) {
  .App-Player-Card {
    margin-top: 3%;
  }
  .App-Card-Content {
    width: 200px;
    height:auto !important;
  }
}
.App-Player-Time {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  justify-content: space-between;
}
.App-Player-Time {
  font-size: 0.7rem;
}
.App-Player-Time-Current-Time {
  width: 45px;
}
.App-Progress-Content {
  width: 100%;
  background-color: #212121;
  height: 3px;
  overflow: hidden;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  margin-top: 7px;
  margin-left: 5px;
  margin-right: 10px;
}
.App-Progress-Bar {
  width: 50%;
  height: 100%;
  background-color: #06afe4;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@-webkit-keyframes App-Img {
  0%   {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes App-Img {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes App-Img {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes App-Img {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.App-Player-Status-panel {
  margin-top: 10px;
}
.App-Equalizer {
  width: 10px;
  height: auto;
  margin-right: 5px;
}
.App-Player-Status-Onair-Btn,
.App-Player-Status-Backtolive {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 5px 20px;
  background-color: #06afe4;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  margin-bottom: 10px;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.App-Song-Name {
  font-weight: 400;
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 5px 0;
  text-shadow: 0 1px 3px #000;
}
.App-Artist-Name {
  color: #fff;
  font-weight: 300;
  font-size: .8rem;
  margin: 0px;
  text-shadow: 0 1px 3px #000;
  text-transform: uppercase;
}
.App-Player-Actions-Section {
  margin-top: 5%;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
}

/* List Program Song */

.App-List-Program-Song {
  background-color: #f5454a;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  color: #ffffff;
  padding: 3px 8px;
  font-size: .7rem;
  margin-right: 10px;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
}
.Icon-List-Program-Song,
.Icon-List-Program-Song--Off {
  width: 10px;
  margin-right: 5px;
}
.Icon-List-Program-Song-Path {
  fill: #ffffff;
}
.App-Date-Program {
  color: #ffffff;
}
.App-List-Program-Song--Off {
  background-color: #353535;
  color: #ffffff;
}
.Icon-List-Program-Song--Off {
  fill: none;
  stroke: #ffffff;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-linecap: round;
}
.Icon-List-Program-Song-Path--Off {
  stroke: #ffffff;
}
.App-Name-Program--Off {
  color: #ffffff;
}
.App-List-Program {
  background-color: rgba(0,0,0,1);
  list-style: none;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  padding: 10px 15px;
  z-index: 5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.App-List-Program-Sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
@media (max-width: 992px) {
  .App-List-Program {
    flex-direction: column;
    align-items: flex-start;
  }
  .App-List-Program-Song {
    margin-bottom: 8px;
  }
  .Icon-List-Program-Song {
    width: 10px;
    margin-right: 5px;
  }
  .App-Name-Program {
    width: 100% !important;
  }
}
.App-List-Program-Divider {
  border-bottom: 2px solid #333;
  height: 2px;
}
@media (min-width: 993px) and (max-width: 1169px) {
  .App-List-Program-Song {
    width: 150px;
  }
}


@media screen and (max-width: 575px) {
  .App-Player-Actions-Section {
    margin-top: 10%;
    height: 80px;
  }
  .App-Song-Name {
    font-size: 0.9rem;
    margin: 5px 0;
  }
  .App-Player-Status-Onair-Btn,
  .App-Player-Status-Backtolive {
    padding: 2px 15px 1px;
    margin-bottom: 0;
  }
}
.App-Player-Btn-Share {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
}
.App-Player-Btn {
  margin: 15px;
  cursor: pointer;
  opacity: 1;
  filter: alpha(opacity=100);
  margin: 0 10px;
  outline: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Player-Btn:hover {
}
@media screen and (max-width: 575px) {
  .App-Player-Btn {
    margin: 0 10px;
  }
}
.App-Player-Toggle-Volume-Icon,
.App-Player-Prev-Song-Icon,
.App-Player-Next-Song-Icon {
  height: 50px;
}
.App-Player-Toggle-Play-Icon {
  border: 2px solid #ffffff;
  background-color: #ffffff;
  border-radius: 50px;
  width: 80px;
  height: 80px;
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 575px) {
  .App-Player-Toggle-Play-Icon {
    width: 50px;
    height: 50px;
  }
  .App-Player-Toggle-Play-Icon img {
    width: 25px;
  }
}
.App-Player-Toggle-Play-Icon:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.App-Player-Share-Song-Icon {
  position: relative;
  padding-right: 10px;
}
.App-Share-Img {
  /* width: 30px; */
}
.App-Action-Icon {
  display: block;
}
@media screen and (max-width: 575px) {
  .App-Share-Img {
    /* width: 27px; */
  }
}

/* APP BANNER BOTTOM */

.App-Banner-Bottom {
  z-index: 100;
}
.App-Banner-Bottom img {
  width: 970px;
  height: 90px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* APP SHARE BUTTONS */

.App-Player-Share-Buttons-Modal {
}
.App-Player-Share-Buttons-Modal-Body {
  z-index: 100;
  position: absolute;
  top: -140px;
  right: -80px;
  opacity: 0;
  visibility: hidden;
  background-color: #ffffff;
  color: #000000;
  width: 200px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.App-Player-Share-Buttons-Modal-Body::before {
  content: "";
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  right: 84px;
  bottom: -6px;
  z-index: -1;
}
.App-Player-Share-Buttons-Modal-Body button:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.App-Player-Share-Buttons-Modal-Body button:last-child {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.App-Player-Share-Buttons-Modal-Body--Show {
  opacity: 1;
  visibility: visible;
  -webkit-animation: modal-body-animation .3s ease-in-out;
  -moz-animation: modal-body-animation .3s ease-in-out;
  -o-animation: modal-body-animation .3s ease-in-out;
  animation: modal-body-animation .3s ease-in-out;
}
.App-Player-Share-Buttons-Modal-Body--Hidden {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: modal-body-animation-inverse .3s ease-in-out;
  -moz-animation: modal-body-animation-inverse .3s ease-in-out;
  -o-animation: modal-body-animation-inverse .3s ease-in-out;
  animation: modal-body-animation-inverse .3s ease-in-out;
}
@keyframes modal-body-animation {
  0% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
  100% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
}
@-moz-keyframes modal-body-animation {
  0% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
  100% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
}
@-webkit-keyframes modal-body-animation {
  0% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
  100% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
}
@-o-keyframes modal-body-animation {
  0% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
  100% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
}
@keyframes modal-body-animation-inverse {
  0% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
}
@-moz-keyframes modal-body-animation-inverse {
  0% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
}
@-webkit-keyframes modal-body-animation-inverse {
  0% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
}
@-o-keyframes modal-body-animation-inverse {
  0% {
    visibility: visible;
    opacity: 1;
    top: -140px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    top: -120px;
  }
}
@media screen and (max-width: 575px) {
  .App-Player-Share-Buttons-Icon {
  }
  .App-Player-Share-Buttons-Icon:before {
    border-style: none;
  }
}
.App-Player-Share-Buttons-Icon button {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  font-family: 'Poppins', sans-serif;
  line-height: 40px;
  height: 40px;
  font-size: .7em;
  width: 100%;
  margin: 2px 0;
  font-weight: 300;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Player-Share-Buttons-Icon button:hover{
  background-color: #F8F8F8;
}
.App-Player-Share-Buttons-Icon button span {
}
.App-Player-Share-Buttons-Icon button img {
  width: 15px;
  height: 15px;
  padding: 12px;
}
@media screen and (max-width: 575px) {
  .App-Player-Share-Buttons-Modal-Body {
    right: -15px;
    width: 125px;
  }
  .App-Player-Share-Buttons-Modal-Body::before {
    left: 78px;
  }
}
.Player-Container {
  height: 1px;
  background: #000;
}

/* APP PLAYER SIDEBAR */

.App-Player-Sidebar-Nowplaying-Info{
	background: #333;
	display: block;
}
.ipl-progress-indicator-head {
  background: #444;
}
.ipl-progress-indicator .first-indicator,
.ipl-progress-indicator .second-indicator {
  background: red;
}
.player-area{
  height: 1px;
  width: 1px;
}
@media screen and (max-width: 999px) {
  .App-Logo {
    margin-top: 10px;
    max-width: 180px;
  }
}

/* SIDEBAR LEFT AND RIGHT */

.App-Player-Sidebar-Left {
  left: -100%;
}
.App-Player-Sidebar-Right {
  Right: -100%;
}
.App-Player-Sidebar-Left--Show {
  left: 0;
  overflow: hidden;
}
.App-Player-Sidebar-Right--Show {
  right: 0;
  overflow: hidden;
}
.App-Player-Sidebar-Left,
.App-Player-Sidebar-Left--Show,
.App-Player-Sidebar-Right,
.App-Player-Sidebar-Right--Show {
  background-color: rgba(23, 23, 23, 0.95);
  height: 100vh;
  color: #fff;
  width: 40%;
  position: fixed;
  top: 0;
  z-index: 7;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  flex-direction: column;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
@media screen and (max-width: 575px) {
  .App-Player-Sidebar-Left--Show,
  .App-Player-Sidebar-Right--Show {
    width: 85%;
    background-color: rgb(23, 23, 23, 1);
  }
  .App-Nav-Tabs {
    /* overflow-x: scroll;
    overflow-y: hidden; */
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .App-Player-Sidebar-Left--Show,
  .App-Player-Sidebar-Right--Show {
    width: 70%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .App-Player-Sidebar-Left--Show,
  .App-Player-Sidebar-Right--Show {
    width: 60%;
  }
}
@media screen and (min-width: 1281px) {
  .App-Player-Sidebar-Left--Show,
  .App-Player-Sidebar-Right--Show {
    width: 30%;
  }
}
.App-Content-Account {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
}
@media screen and (max-width: 575px) {
  .App-Content-Account {
    flex-direction: column;
  }
}
.App-Content-User {
  width: 40%;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 575px) {
  .App-Content-User {
    width: 100%;
  }
}
.App-User-Image {
  width: 80px;
  height: 80px;
  overflow: hidden;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  cursor: pointer;
}
.User-Image-Img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.User-Btn {
  background: transparent;
  border: 1px solid #292929;
  color: #fff;
  border-radius: 50px;
  padding: 5px 20px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.User-Btn:hover {
  background-color: #f5454a;
  border: 1px solid #f5454a;
}
.App-Content-Form {
  margin-left: 20px;
  width: 100%;
}
@media screen and (max-width: 575px) {
  .App-Content-Form {
    margin-left: 0;
  }
}
.App-Content-Form-Title {
  font-size: 1rem;
  font-weight: 300;
}
.App-Form {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.App-Form-Group {
  margin-bottom: 15px;
}
.App-Form-Group--Inline {
  width: 30%;
}
.App-Form-Group label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 300;
  font-size: 0.75rem;
}
.App-Form-Control {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #fff;
  background-color: transparent;
  background-image: none;
  border: 1px solid #292929;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.App-Form-Control:focus {
  border-color: rgb(245, 69, 71);
  box-shadow: 0 1px 1px rgba(219, 39, 44, 0.075)inset, 0 0 8px rgba(148, 13, 17, 0.6);
  outline: 0 none;
}
.Form-Btn {
  background-color: #f5454a;
  padding: 15px 30px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  width: 100%;
  color: #fff;
  font-size: 0.85rem;
  border: none;
  outline: none;
  margin-top: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.Form-Btn:hover {
  background-color: #c12024;
}
.App-Inline {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  justify-content: space-between;
  width: 100%;
}
select {
  height: 34px;
}
.App-Content-Notification {}
.App-Content-Form-Header {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  justify-content: space-between;
}
.App-Content-Switch {}
.App-Switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.App-Switch input {
  display:none;
}
.App-Slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #383838;
  -webkit-transition: .4s;
  transition: .4s;
}
.App-Slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .App-Slider {
  background-color: #f5454a;
}
input:focus + .App-Slider {
  box-shadow: 0 0 1px #f5454a;
}
input:checked + .App-Slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.App-Slider.App-Round {
  border-radius: 34px;
}

.App-Slider.App-Round:before {
  border-radius: 50%;
}
.App-Description {
  color: #757575;
  font-weight: 300;
  font-size: 0.85rem;
  margin-top: 20px;
}
.App-Wrapper-Checkbox {
  margin-top: 30px;
}
.App-Checkbox {
  margin-bottom: 20px;
}
.App-Checkbox label {
  font-size: 0.8rem;
  font-weight: 300;
  color: #757575;
}
.App-Checkbox label input {
  margin-right: 15px;
}
.App-Check-Inp {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 9.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 20px;
  transition: all 0.15s ease-out 0s;
  background: #808080;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
  border-radius: 5px;
}
.App-Check-Inp:hover {
  background: #707070;
}
.App-Check-Inp:checked {
  background: #f5454a;
}
.App-Check-Inp:checked::before {
  height: 20px;
  width: 20px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 16px;
  text-align: center;
  line-height: 22px;
}
.App-Check-Inp:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #808080;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.App-Check-Inp.radio {
  border-radius: 50%;
}
.App-Check-Inp.radio::after {
  border-radius: 50%;
}

/* SIDEBAR ICONS */

.App-Icon-Sidebar {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
  margin-bottom: 6px;
}
.App-Icon-Sidebar .cls-1 {
  fill: none;
}
.App-Icon-Sidebar .cls-2 {
  clip-path: url(#clip-path);
}
.App-Icon-Sidebar .cls-3 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Player-List-Item-Link:hover .App-Icon-Sidebar .cls-3 {
  fill: #ffffff;
}

/* EQUALIZER */

.equalizer {
  align-items: center;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  height: 10px;
  justify-content: space-between;
  overflow: hidden;
  width: 8px;
  margin-right: 10px;
  margin-bottom: 2px;
}
.equalizer div {
  background: #ffffff;
  height: 100%;
  width: 2px;
  -webkit-animation: equalize 2s infinite;
  animation: equalize 2s infinite;
}
.equalizer div:nth-child(1) {
  -webkit-animation-delay: -3.5s;
  animation-delay: -3.5s;
}
.equalizer div:nth-child(2) {
  -webkit-animation-delay: -5.8s;
  animation-delay: -5.8s;
}
.equalizer div:nth-child(3) {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}
.equalizer--pause div {
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes equalize {
  0%, 100% {
    -webkit-clip-path: inset(79% 0 0 0);
    clip-path: inset(79% 0 0 0);
  }
  10% {
    -webkit-clip-path: inset(62% 0 0 0);
    clip-path: inset(62% 0 0 0);
  }
  20% {
    -webkit-clip-path: inset(17% 0 0 0);
    clip-path: inset(17% 0 0 0);
  }
  30% {
    -webkit-clip-path: inset(76% 0 0 0);
    clip-path: inset(76% 0 0 0);
  }
  40% {
    -webkit-clip-path: inset(61% 0 0 0);
    clip-path: inset(61% 0 0 0);
  }
  50% {
    -webkit-clip-path: inset(49% 0 0 0);
    clip-path: inset(49% 0 0 0);
  }
  60% {
    -webkit-clip-path: inset(21% 0 0 0);
    clip-path: inset(21% 0 0 0);
  }
  70% {
    -webkit-clip-path: inset(62% 0 0 0);
    clip-path: inset(62% 0 0 0);
  }
  80% {
    -webkit-clip-path: inset(33% 0 0 0);
    clip-path: inset(33% 0 0 0);
  }
  90% {
    -webkit-clip-path: inset(44% 0 0 0);
    clip-path: inset(44% 0 0 0);
  }
}
@keyframes equalize {
  0%, 100% {
    -webkit-clip-path: inset(79% 0 0 0);
    clip-path: inset(79% 0 0 0);
  }
  10% {
    -webkit-clip-path: inset(62% 0 0 0);
    clip-path: inset(62% 0 0 0);
  }
  20% {
    -webkit-clip-path: inset(17% 0 0 0);
    clip-path: inset(17% 0 0 0);
  }
  30% {
    -webkit-clip-path: inset(76% 0 0 0);
    clip-path: inset(76% 0 0 0);
  }
  40% {
    -webkit-clip-path: inset(61% 0 0 0);
    clip-path: inset(61% 0 0 0);
  }
  50% {
    -webkit-clip-path: inset(49% 0 0 0);
    clip-path: inset(49% 0 0 0);
  }
  60% {
    -webkit-clip-path: inset(21% 0 0 0);
    clip-path: inset(21% 0 0 0);
  }
  70% {
    -webkit-clip-path: inset(62% 0 0 0);
    clip-path: inset(62% 0 0 0);
  }
  80% {
    -webkit-clip-path: inset(33% 0 0 0);
    clip-path: inset(33% 0 0 0);
  }
  90% {
    -webkit-clip-path: inset(44% 0 0 0);
    clip-path: inset(44% 0 0 0);
  }
}
.hidden {
  display: none;
  opacity: 0;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.App-Container {
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.App-Icon {
  width: 30px;
  height: 30px;
}
.App-Icon .App-Icon-Right,
.App-Icon .App-Icon-Left {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Icon:hover .App-Icon-Right,
.App-Icon:hover .App-Icon-Left {
  fill: #f1f1f1;
}

/* APP MENU */

.App-Menu {}
/* #programas,
#radios {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
} */
.App-Nav {
  background-color: #000000;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  justify-content: space-between;
}
.App-Nav-Tabs {
}
.App-Tab-Content--Right {
  padding: 20px;
}
.Tabs-Item {
  flex: 1;
  text-align: center;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.Tabs-Item:hover {
  border-bottom: 2px solid #F5454A;
}
.Tabs-Item-Link {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #929291;
  text-decoration: none;
  display: block;
  padding: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.Tabs-Item--Chevron-Left {
  flex: inherit;
  padding: 0;
}
.Tabs-Item--Chevron-Left:hover {
  border-bottom: 2px solid #000000;
}
.Icon-Back {
  width: 10px;
}
.Icon-Back-Path {
  fill: #929291;
}
.Icon-Top {
  width: 20px;
  height: 20px;
}
.Icon-Top-Path {
  fill: #929291;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 575px) {
  .Tabs-Item-Link {
    font-size: 0.65rem;
    padding: 20px;
  }
  .App-Item-Text {
    display: none;
  }
  .Icon-Back {
    width: 7px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px){
  .Tabs-Item-Link {
    font-size: 0.7rem;
  }
}
.Tabs-Item:hover .Tabs-Item-Link {
  color: #ffffff;
}
.Tabs-Item:hover .Icon-Back-Path,
.Tabs-Item:hover .Icon-Top-Path {
  fill: #ffffff;
}
.Tabs-Active {
  border-bottom: 2px solid #F5454A;
}
.Tabs-Active>.Tabs-Item-Link {
  color: #ffffff;
}
.App-Tab-Pane {
  margin-top: 1px;
}
.App-Tab-Content>.App-Tab-Pane {
  display: none;
}
.App-Tab-Content>.App-Tab-Pane-Active {
  display: block;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}
.App-Message {
  font-size: 1.4rem;
  font-weight: 100;
  padding: 50px 20px;
}
.App-Message-Hidden {
  display: none;
}
@media screen and (max-width: 575px) {
  .App-Message {
    font-size: 1rem;
  }
}
.App-Ul,
.App-Ul-Radios {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 93vh; /*93vh*/
}

.App-Ul-Radios{
  display: flex;
  flex-direction: column;
}

.App-Li {
  list-style: none;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.App-Li:hover {
  background-color: #F5454A;
}

.App-Li-Order-First{
  order: 1;
}

.App-Li-Order-Last{
  order: 2;
}

@media screen and (max-width: 575px) {
  .App-Li {
    padding: 15px;
  }
}
.App-Li--Inverse:hover,
.App-Li-Listening {
  background-color: rgba(0,0,0,0.5);
}
.App-Li-Listening:hover {
  background-color: rgba(0,0,0,1);
}
.App-Box-Img {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
  background-color: #000000;
}
.App-Img {
  display: block;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 575px) {
  .App-Box-Img {
    width: 45px;
    height: 45px;
  }
}
.App-Overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Overlay--Listening {
  opacity: 0.7;
}
.App-Overlay-Play {
  width: 20px;
}
.App-Overlay-Pause {
  width: 30px;
}
.App-Overlay-Play-Path,
.App-Overlay-Pause-Path {
  fill: #fff;
}
.App-Text {
  flex: 1;
}
.App-Artist {
  font-size: .85rem;
  font-weight: 400;
  color: #90908F;
}
.App-Song {
  font-size: 1rem;
  font-weight: 300;
}
.App-Time,
.App-Listening {
  text-transform: uppercase;
  font-size: .6rem;
  font-weight: 400;
  margin-top: 5px;
}
.App-Time {
  color: #90908F;
}
.App-Listening {
  color: #F5454A;
}
.App-Li:hover:hover .App-Listening {
  color: #ffffff;
}
@media screen and (max-width: 575px) {
  .App-Artist {
    font-size: .7rem;
  }
}
@media screen and (max-width: 575px), screen and (min-width: 576px) and (max-width: 767px), screen and (min-width: 768px) and (max-width: 992px), screen and (min-width: 993px) and (max-width: 1170px) {
  .App-Song {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
@media screen and (max-width: 575px) {
  .App-Song {
    font-size: 0.8rem;
    width: 48vw;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .App-Song {
    width: 47vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .App-Song {
    width: 42vw;
  }
}
@media screen and (min-width: 993px) and (max-width: 1170px) {
  .App-Song {
    width: 26vw;
  }
}
.App-Like-Icon {
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Like-Path {
  fill: #ffffff;
}

.App-Like-Icon:hover .App-Like-Path{
  fill: #f5454a;
}

.App-Li:hover .App-Artist,
.App-Li:hover .App-Time {
  color: #ffffff;
}
.App-Li:hover .App-Overlay,
.App-Li:hover .App-Like-Icon {
  opacity: 0.7;
}
.App-Like-Icon,
.App-Like-Icon-Ok {
  width: 25px;
  cursor: pointer;
}
.App-Arrow-Left,
.App-Arrow-Right {
  width: 10px;
}
.App-Like-Icon-Ok-Path {
  fill: #F5454A;
}

.App-Like-Icon-Ok:hover .App-Like-Icon-Ok-Path{
  fill: #ffffff;
}

.App-Arrow-Right-Path,
.App-Arrow-Left-Path {
  fill: #ffffff;
}
.App-Like-Icon-Stroke {
  opacity: 0.7;
}
.App-Like-Icon-Fill,
.App-Like-Icon-Fill-Active {
  cursor: pointer;
  width: 25px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.App-Like-Icon-Fill-Active-Setted{
  visibility: visible;
  opacity: 1;
}

.App-Li:hover .App-Like-Icon-Fill {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Li:hover .App-Like-Icon-Fill .App-Like-Icon-Fill-Path {
  fill: rgba(0,0,0,0.2);
}
.App-Li:hover .App-Like-Icon-Fill-Active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Like-Icon-Fill-Active .App-Like-Icon-Fill-Path {
  fill: #f5454a;
}
/* .App-Like-Icon-Fill-Path {
  fill: #ffffff;
} */
.App-Box-Img--Radios {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
.App--Name-Radio {
  font-size: 1rem;
}
@media screen and (max-width: 575px) {
  .App-Box-Img--Radios {
    width: 45px;
    height: 45px;
  }
  .App--Name-Radio {
    font-size: .8rem;
  }
  .App-Arrow-Left,
  .App-Arrow-Right {
    width: 6px;
  }
}
.App-Equalizer-Listening {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
}
.equalizer--Listening {
  margin-bottom: 0;
}

/* APP RADIOS */

.App-Radios {
  padding: 5px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  flex-wrap: wrap;
}
.App-Radio-Station {
  cursor: pointer;
  position: relative;
  background-color: #000;
  border: 1px solid #000;
  color: #ffffff;
  width: 48%;
  margin: 1%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);
  box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
.App-Radio-Image {
  width: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  -webkit-transition: all 10s ease-in;
  -moz-transition: all 10s ease-in;
  -ms-transition: all 10s ease-in;
  -o-transition: all 10s ease-in;
  transition: all 10s ease-in;
}
.App-Radio-Overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.08) 24%, rgba(0,0,0,1) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.08) 24%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.08) 24%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#000000',GradientType=0 );
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.App-Radio-Info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
}
.App-Radio-Icon {
  /* background-color: #ffffff; */
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  justify-content: center;
}
.App-Radio-Icon-Play {
  width: 30px;
  margin-left: 5px;
}
.App-Radio-Icon-Play-Path {
  fill: #ffffff;
}
.App-Radio-Body {
  margin: 0 0 0 10px;
  padding: 0;
}
.App-Radio-Title {
  margin: 0 0 5px 0;
  font-size: 0.8rem;
  color: #F5454A;
  font-weight: 700;
}
.App-Radio-Description {
  font-size: 1rem;
  font-weight: 300;
}
.App-Radio-Station:hover {
  border: 1px solid #F5454A;
  -webkit-box-shadow: 0 0 10px 1px rgba(245, 69, 74,0.1);
  box-shadow: 0 0 10px 1px rgba(245, 69, 74,0.1);
  -moz-transform: translateX(0px) translateY(-5px);
  -webkit-transform: translateX(0px) translateY(-5px);
  -o-transform: translateX(0px) translateY(-5px);
  -ms-transform: translateX(0px) translateY(-5px);
  transform: translateX(0px) translateY(-5px);
}
.App-Radio-Station:hover .App-Radio-Image {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
@media screen and (max-width: 1169px) {
  .App-Radios {
    flex-direction: column;
  }
  .App-Radio-Station {
    width: 98%;
  }
}
@media screen and (min-width: 1170px) {
  .App-Player-Sidebar-Left--Show {
    width: 50%;
  }
}

/* APP ALERTS */

.App-Alert,
.App-Alert--Error {
  visibility: hidden;
  opacity: 0;
  width: 280px;
  padding: 25px 15px 15px 15px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 100;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.App-Alert--Show {
  visibility: visible;
  opacity: 1;
  background-color: #ffffff;
  color: #000000;
  -webkit-animation: App-Alert 1s ease;
  -moz-animation: App-Alert 1s ease;
  -o-animation: App-Alert 1s ease;
  animation: App-Alert 1s ease;
}
.App-Alert--Error-Show {
  visibility: visible;
  opacity: 1;
  background-color: #F5454A;
  color: #ffffff;
  -webkit-animation: App-Alert 1s ease;
  -moz-animation: App-Alert 1s ease;
  -o-animation: App-Alert 1s ease;
  animation: App-Alert 1s ease;
}
.App-Alert--Hidden,
.App-Alert--Error-Hidden {
  visibility: hidden;
  opacity: 0;
  top: -100%;
  -webkit-animation: App-Alert-Inverse 1s ease;
  -moz-animation: App-Alert-Inverse  1s ease;
  -o-animation: App-Alert-Inverse  1s ease;
  animation: App-Alert-Inverse  1s ease;
}
@keyframes App-Alert {
 0% {
  opacity: 0;
  top: -100%;
 }
 100% {
  opacity: 1;
  top: 10px;
 }
}
@-moz-keyframes App-Alert {
  0% {
   opacity: 0;
   top: -100%;
  }
  100% {
   opacity: 1;
   top: 10px;
  }
 }
 @-webkit-keyframes App-Alert {
  0% {
   opacity: 0;
   top: -100%;
  }
  100% {
   opacity: 1;
   top: 10px;
  }
 }
@keyframes App-Alert-Inverse {
  0% {
   opacity: 1;
   top: 10px;
  }
  100% {
   opacity: 0;
   top: -100%;
  }
 }
 @-moz-keyframes App-Alert-Inverse {
  0% {
   opacity: 1;
   top: 10px;
  }
  100% {
   opacity: 0;
   top: -100%;
  }
 }
 @-webkit-keyframes App-Alert-Inverse {
  0% {
   opacity: 1;
   top: 10px;
  }
  100% {
   opacity: 0;
   top: -100%;
  }
 }
.App-Alert-Img {
  width: 70px;
  overflow: hidden;
  margin-right: 10px;
}
.App-Alert-Img-Item {
  width: 100%;
}
.App-Alert-Info {

}
.App-Alert-Info-Description {
  font-size: 0.75rem;
  line-height: 1.5;
}
.App-Alert-Close {
  position: absolute;
  top: 5px;
  right: 10px;
}
.App-Alert-Close-Icon {
  width: 20px;
  cursor: pointer;
}
.App-Alert-Close-Path {
  fill: #000000;
}
.App-Alert--Error .App-Alert-Img {
  display: none;
}
.App-Alert-Close-Icon-Path--Error {
  fill: #ffffff;
}

/* APP PROGRAMAS */

.App-Info-Program {
  padding: 10px 15px 50px 15px;
  position: absolute;
  top: 75px;
  right: 0;
  width: 100%;
  background-color: #000000;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.App-Info-Program--hidden {
  right: -100%;
  visibility: hidden;
}
.App-Box-Arrow {
  cursor: pointer;
  text-align: right;
}
.App-Close-Icon {
  width: 30px;
  height: 30px;
}
.App-Close-Icon-Path {
  fill: #ffffff;
}
.App-Picture-Program {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  margin-top: 30px;
}
.App-Description-Program {
  margin-top: 20px;
  text-align: center;
  padding: 10px 10px 50px 10px;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .App-Picture-Program {
    width: 100px;
    height: 100px;
  }
}
@media screen and (min-width: 1300px) {
  .App-Picture-Program {
    width: 180px;
    height: 180px;
  }
}
.App-Time-Program {
  color: #90908F;
  font-weight: 500;
  font-size: 0.85rem;
}
.App-Title-Program {
  font-size: 1.3rem;
  font-weight: 300;
  margin: 0;
}
.App-SubTilte-Program {
  font-size: 0.85rem;
  font-weight: 100;
  margin: 10px 0 0 0;
}
.App-Text-Program {
  font-size: 0.95rem;
  font-weight: 100;
  margin-top: 30px;
}

/* APP LOGIN */

.App-Login {
  visibility: visible;
  background-color: rgba(0, 0, 0, 1);
  padding: 20px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.App-Login--Hidden {
  display: none;
  right: -100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.App-Login-Logo {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
}
.App-Login-Body {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  flex-direction: column;
}
.App-Login-Title-H1 {
  font-size: 1.3rem;
  font-weight: 400;
}
.App-Login-Description {
  font-size: 1rem;
  font-weight: 100;
  margin-bottom: 30px;
}
.App-Login-Btn {
  display: block;
  background-color: #ffffff;
  padding: 7px 30px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  width: 275px;
  margin-bottom: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 575px) {
  .App-Login-Btn {
    padding: 5px 20px;
    width: 250px;
    font-size: 0.7rem;
  }
}
.App-Login-Btn--Facebook {
  background-color: #3B65C4;
  color: #ffffff;
}
.App-Login-Btn--Facebook:hover {
  background-color: #3358ad;
}
.App-Login-Btn--Google {
  background-color: #FFFFFF;
  color: #333333;
}
.App-Login-Btn--Google:hover {
  background-color: #e4e4e4;
}
.App-Login-Icon-Facebook {
  width: 10px;
}
.App-Login-Icon-Google {
  width: 20px;
}
.App-Login-Icon-Facebook,
.App-Login-Icon-Google {
  margin-right: 10px;
}
.App-Login-Skip {
  text-decoration: none;
  color: #ffffff;
  font-size: 0.9rem;
  margin-top: 20px;
}
.App-Login-Skip:hover {
  color: #F5454A;
  text-decoration: underline;
}
.App-Login-Skip,
.App-Login-Btn--Facebook,
.App-Login-Btn--Google {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.App-Disabled-DVR{
  cursor: initial;
}

/* APP PRE ROLL MODAL */

.App-Pre-Roll-Modal {
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: App-Pre-Roll 1s ease-in-out;
  -moz-animation: App-Pre-Roll 1s ease-in-out;
  -o-animation: App-Pre-Roll 1s ease-in-out;
  animation: App-Pre-Roll 1s ease-in-out;
}
@keyframes App-Pre-Roll {
  0% {
   opacity: 0;
  }
  100% {
   opacity: 1;
  }
 }
.App-Pre-Roll-Modal-Close {
  position: absolute;
  top: 25px;
  right: 10px;
  cursor: pointer;
}
.App-Pre-Roll-Modal-Close-Icon {
  width: 40px;
  height: 40px;
}
.App-Pre-Roll-Modal-Close-Icon-Path {
  fill: #ffffff;
}
.pr-player{
  z-index: 12 !important;
  -webkit-animation: App-Pre-Roll-Video 1s ease-in;
  -moz-animation: App-Pre-Roll-Video  1s ease-in;
  -o-animation: App-Pre-Roll-Video  1s ease-in;
  animation: App-Pre-Roll-Video  1s ease-in;
  animation-delay: .5s;
}
@keyframes App-Pre-Roll-Video {
  0% {
    visibility: hidden;
    opacity: 0;
}
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.App-Pre-Roll-Modal-Hidden {
  display: none;
}
.App-Wrapper-Preroll {
  display: inherit;
}
@media screen and (max-width: 575px) {
  .App-Wrapper-Preroll {
    width: 90%;
  }
}
.embed-responsive {
  position: relative !important;
  display: block !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25% !important;
}
/* VERSION NOWPLAYING */

.App-Version {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  right: 10px;
}
.App-Version-Info {
  font-size: 0.7rem;
  font-weight: 300;
  color: #808080;
}

/* APP FAV LIKE */

.App-Fav-like {
  background: -moz-linear-gradient(top, rgba(17,17,17,0) 69%, rgba(17,17,17,0.26) 90%, rgba(0,0,0,0.37) 99%, rgba(0,0,0,0.38) 100%);
  background: -webkit-linear-gradient(top, rgba(17,17,17,0) 69%,rgba(17,17,17,0.26) 90%,rgba(0,0,0,0.37) 99%,rgba(0,0,0,0.38) 100%);
  background: linear-gradient(to bottom, rgba(17,17,17,0) 69%,rgba(17,17,17,0.26) 90%,rgba(0,0,0,0.37) 99%,rgba(0,0,0,0.38) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00111111', endColorstr='#61000000',GradientType=0 );
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.App-Like-Heart {
  width: 30px;
  margin: 0 15px 10px 0;
  cursor: pointer;
}
.App-Like-Heart-Red {
  -webkit-animation: Like-Animation 0.3s ease-in;
  -moz-animation: Like-Animation  0.3s ease-in;
  -o-animation: Like-Animation  0.3s ease-in;
  animation: Like-Animation  0.3s ease-in;
}
@keyframes Like-Animation {
  0% {
    opacity: 0;
    visibility: hidden;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes Like-Animation {
  0% {
    opacity: 0;
    visibility: hidden;
    -moz-transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -o-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes Like-Animation {
  0% {
    opacity: 0;
    visibility: hidden;
    -moz-transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -o-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes Like-Animation {
  0% {
    opacity: 0;
    visibility: hidden;
    -moz-transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -o-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.App-Like-Heart-Red .App-Like-Heart-Path {
  fill: #f5454a;
}
.App-Like-Heart-White .App-Like-Heart-Path {
  fill: #ffffff;
}

/* ERROR PAGE 404 - 500 */

.App-wrapper-404 {
  position: relative;
  background-color: #141414;
  padding: 40px 30px;
  color: #ffffff;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  background: linear-gradient(-45deg, #42001d, #000000, #42001d, #000000);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  overflow: hidden;
}
@media only screen and (max-width: 575px) {
  .App-wrapper-404 {
    padding: 20px;
  }
}
.App-wrapper-404:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/static/img/bg-not-found.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 1;
  display: block;
}
@media only screen and (max-width: 767px) {
  .App-wrapper-404:before {
    background-image: url("/static/img/bg-not-found-mobile.png");
  }
}
.App-logoNp {
  width: 250px;
  z-index: 5;
}
.App-wrapper-404-center {
  z-index: 5;
}
.App-iconMic {
  width: 75px;
}
.App-title404 {
  font-size: 7.375rem;
  font-weight: 900;
}
.App-text-notFound {
  font-size: 1.375rem;
  font-weight: 500;
}
.App-text-small {
      font-size: 0.875rem;
    }
.App-title404,
.App-text-notFound,
.App-text-small {
  margin: 0;
}
.App-gotoNp {
  cursor: pointer;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: #ffffff;
  width: 300px;
  height: 60px;
  border: 2px solid #fc4595;
  background-color: transparent;
  -webkit-border-radius: 75px;
  border-radius: 75px;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  z-index: 5;
}
.App-gotoNp:hover {
  background-color: #fc4595;
  border: 2px solid #fc4595;
}
.App-gotoNp a {
  color: white;
  text-decoration: none;
}

@media only screen and (max-width: 575px) {
  .App-logoNp {
    width: 150px;
  }
  .App-iconMic {
    width: 50px;
  }
  .App-title404 {
    font-size: 6.375rem;
  }
  .App-gotoNp {
    width: 200px;
    height: 50px;
    font-size: 0.775rem;
  }
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
.App-iconMic {
  fill: none;
  stroke: #515151;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-linecap: round;
}
.svg-stroke {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash .5s cubic-bezier(0.4, 0, 1, 1) .5s forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 500;
    stroke: #fc4595;
  }
}
@-moz-keyframes dash {
  to {
    stroke-dashoffset: 500;
    stroke: #fc4595;
  }
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 500;
    stroke: #fc4595;
  }
}
@keyframes bg {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@-moz-keyframes bg {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@-webkit-keyframes bg {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}