@font-face {
  font-family: "Roboto1";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto1"), url("../font/acdc.ttf");
}

@font-face {
  font-family: "Roboto2";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto2"), url("../font/Hussar.otf");
}



body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #232424;
}

:root {
  --main-theme-color: #0b5394;
}


#header {
  font-size: 22px;
  height: 6%;
  width: 100%;
  background-color: #273138;
  color: #273138;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#logo_header {
    
    height: 6%;
    width: 100%;
    color: #ff0e39;
    text-align: center;
font-size: 0.9em;
    display: flex;
    align-items: center;
    font-family: 'Russo One';
    justify-content: center;
}

#btn-close-modal {
  left: 20px;
  float: right;
  display: block;
  height: 50px;
  width: 50px;
  background-image: url("../menu/close.png");
  cursor: pointer;
}
.modal-content {
  width: 100%;
  height: 0px;
  text-align: center;
  cursor: pointer;
  margin-top: 50px;
  background: #232424;
  display: block;
}
#footer {
  font-size: 18px;
  font-size: 1.5em;
  height: 6%;
  width: 100%;
  background-color: #191A1D;
  color: #FFFFFF;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-family: "Oswald";
}



.showmodal {
  position: relative !important;
  float: left !important;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #ff0e39;
  transition: background-color 0.2s;
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784l9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z"/></svg>');
  -webkit-mask: var(--svg);
  mask: var(--svg);
    margin-left: -10px;
}
.chbitrate {
  position: relative !important;
  float: right !important;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #ff0e39;
  transition: background-color 0.2s;
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"/></svg>');
  -webkit-mask: var(--svg);
  mask: var(--svg);
}
.showmodal:hover,
.chbitrate:hover {
  background-color: #ffffff;
}
div#lunaradio > div > div > div {
  border: 0px !important;
  border-radius: 20px !important;
}
.lunaradioliveicon,
.lunaradiovisualizericon {
  display: none;
}
.prev-tracks {
  width: 100%;
  font-family: "Bebas Neue";
  font-size: 1.2em;
  border-collapse: separate; 
  border-spacing: 0 1em;
}
.track-info {
  height: 10%;
}
.track-info td {
  border: 1px solid #ffffff;
  border-style: solid none;
  padding: 10px;
  color: #ffffff;
}
.track-info td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px;
}
.track-info td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px; 
  border-top-right-radius: 10px; 
}
.track-cover {
  padding: 5px;
  width: 100px;
}
.track-cover img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.track-meta {
  padding: 5px;
  text-align: left;
}
.track-time {
  width: 10%;
  padding: 5px;
  text-align: right;
}

.radioname {
font-size: 30px;
color: #ff0e39;
}

.is-init marquee {
font-size: 40px;
}