@font-face {
  font-family: "Quantify Bold";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/Quantify-Bold.ttf");
}

.nav-tabs .nav-link.active {
  border-bottom: 3px solid #009688 !important;
  background: #009688 !important;
  color: white !important;
  border-radius: 5px;
}

.nav-tabs .nav-link:hover {
  border-bottom: 3px solid #009688 !important;
}

#loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
#loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: purple;
}

/* :not(:required) hides these rules from IE9 and below */
#loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

#loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

body {
   /* background-color: #900020 !important;
   background-image: url('../../images/az.jpg');
   background-repeat: repeat;
    */
  background-color: #f3f3f3 !important;
  color: #FFB75E !important;
  /*
  background: -webkit-linear-gradient(to right, #48b1bf, #06beb6);
  background: linear-gradient(to right, #48b1bf, #06beb6);
  W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.modal {
  color: black !important;
}

hr {
  border: 0.05rem solid white !important;
}

.companyname {
  color: white;
  font-size: 22px;
  /*
    background: linear-gradient(to right, #48b1bf, #b92b27);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
*/
}

.form-group {
  background-color: white !important;
}

.nav-tabs .nav-link {
  color: white !important;
}

.companyname {
  color: white;
  font-size: 22px;
  /*
    background: linear-gradient(to right, #48b1bf, #b92b27);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
*/
}

.mainnavbar {
  z-index: 3;
  padding-right: 30px;
  padding-left: 30px;
  background: #FFB75E;
  background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);
  background: linear-gradient(to right, #ED8F03, #FFB75E);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer {
  z-index: 3;
  padding-right: 30px;
  padding-left: 30px;
  background: #FFB75E;
  background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);
  background: linear-gradient(to right, #ED8F03, #FFB75E);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: whitesmoke;
  padding: 20px;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: 0 -10px 10px -10px #333;
}

/* The sidebar menu */
.sidenav {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 75px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  top: 0px;
  z-index: 2;
  left: 0px;
  background-color: rgba(237, 143, 5, 3) !important;
  color: #f1f1f1;
  /* Black */
  text-align: center;

  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 100px;
}

/* The navigation menu links */
.sidenav i {
  padding: 5px;
  margin-top: 40px;
  text-decoration: none;
  font-size: 35px;
  color: white;
  text-shadow: 2px 2px 6px black;
}

.orderbyspan {
   color:  white;
}

/* When you mouse over the navigation links, change their color */
.sidenav i:hover {
  color: #009688 !important;
  cursor: pointer;
}

.mainslider {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.currentpage {
  color: #009688 !important;
}

.pagetitle {
  font-family: "Helvetica";
  color: white;
  font-weight: 600;
  font-size: 32px;
}

.searchpagetitle {
  color: white;
}

#refreshsearchpage {
  color: white;
}

.panel {
  margin-top: 35px;
  background-color: rgba(237, 143, 3, .8);
  border-radius: 15px;
}

.tooltip {
  left: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tooltip > .tooltip-inner {
  background-color: #009688;
  color: white;
  font-weight: bold;
  margin: 5px;
}

.arrow::before {
  display: none;
}

.carousel-item img {
  max-height: 550px !important;
}

.maincontent {
  padding-top: 10px;
  margin-left: 0px;
  margin-bottom: 60px;
}

.radiostation {
  position: relative;
  margin-right: 30px;
}

#imageoftheradio {
  border: 1px solid none;
  border-radius: 75px;
  width: 60px !important;
  height: 60px !important;
}

#nameoftheradio {
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
}

#genreoftheradio {
  font-size: 12px;
}

#nowplaying {
  font-size: 14px;
}

#controlbuttons {
  margin-right: 20px;
}

#soundRange {
  padding-top: 10px;
  width: 100px !important;
}

#radioimagesMain {
  border: 1px solid none;
  border-radius: 10px;
  width: 125px;
  height: 125px;
}

#radioimages {
  border: 1px solid none;
  margin-top: 20px;
  border-radius: 10px;
  width: 75px;
  height: 75px;
}

.radioinfoMain {
  color: black;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}


.radioinfo {
  color: black;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.radiosearch {
  color: black;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.radiosearchby {
  color: black;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.radioinfo2 {
  background: #c31432;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #240b36, #c31432);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #240b36, #c31432);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  border: none;
  border-radius: 15px;
  position: relative;
}

#playerpanel {
  bottom: 0px;
  padding: 0px;
  z-index: 3;
  background: #b92b27;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #1565c0, #b92b27);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #1565c0, #b92b27);
  box-shadow: 0 -10px 10px -10px #333;
}

#playerpanelmain {
  display: none;
}

.radioplay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115%;
  height: 122%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.5s ease;
}

.radioplay2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.5s ease;
}

.radioplay3 {
  background-color: #009688;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115%;
  height: 122%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.5s ease;
}

.radioplay4 {
  background-color: #009688;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.5s ease;
}

.radioinfoMain:hover .radioplay {
  opacity: 1;
}

.radioinfo:hover .radioplay2 {
  opacity: 1;
}

.radiosearch:hover .radioplay3 {
  opacity: 1;
}

.radiosearchby:hover .radioplay4 {
  opacity: 1;
}

.getsongname {
  margin-left: 85px;
  width: 525px;
  border: none;
  border-radius: 10px;
  display: block;
  background-color: #009688;
  cursor: pointer;
}

.getsongnameMain {
  margin-top: 18px;
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 10px;
  display: block;
  background-color: #009688;
  cursor: pointer;
}

#radioplayicon {
  color: white;
}

.radioname {
  font-size: 14px;
  font-weight: bolder;
}

.radiogenrecountry {
  font-size: 12px;
}

.radioplaytextMain {
  color: white;
  font-size: 194px;
}

.radioplaytext {
  color: white;
  font-size: 150px;
}

.radioplaytextSearch {
  margin-top: 10px;
  color: white;
  font-size: 35px;
}

.radioplaytextSearchBy {
  color: white;
  font-size: 175px;
}

#pauseButton {
  font-size: 32px;
  padding: 3px;
  display: none;
}

#playButton {
  font-size: 32px;
  padding: 3px;
  display: none;
}

#muteButton {
  font-size: 16px;
  margin-right: 5px;
  display: none;
}

#unmuteButton {
  font-size: 16px;
  margin-right: 5px;
  display: none;
}

#volumeupbutton {
  font-size: 12px;
  display: none;
}

#volumedownbutton {
  font-size: 12px;
  display: none;
}

#likeicon {
  font-size: 24px;
  display: none;
}

#unlikeicon {
  font-size: 24px;
  display: none;
}

#rateicon {
  font-size: 24px;
  display: none;
}

#alreadyRateIcon {
  font-size: 24px;
  display: none;
}

#reviewRadioIcon {
  font-size: 24px;
}

.staricon {
  font-size: 36px !important;
  cursor: pointer;
  color: purple;
}

#oneStarRateIcon {
  display: none;
}

#twoStarRateIcon {
  display: none;
}

#threeStarRateIcon {
  display: none;
}

#fourStarRateIcon {
  display: none;
}

#fiveStarRateIcon {
  display: none;
}

#brokenlink {
  font-size: 24px;
}

#nowplayingradioinfotrigger {
  font-size: 24px;
}

#userReviewDiv {
  width: 500px;
  overflow: hidden;
  word-wrap: break-word;
}

.commentbox {
  margin: 20px 10px;
  padding: 5px;
  background-color: #dadada;
  border-radius: 3px;
  border: 5px solid #ccc;
}

.commentmessage {
  min-height: 30px;
  border-radius: 3px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  color: #797979;
}

.searchtabs {
  background-color: yellow;
  color: darkblue;
}

.notificationdiv {
  background-color: rgba(243, 137, 5, 0.6) !important;
  color: black;
}

.pagination {
  list-style-type: none;
  padding: 15px 0;
  display: inline-flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.pagination li {
  cursor: pointer;
  box-sizing: border-box;
  padding-right: 10px;
}

.pagination li a {
  box-sizing: border-box;
  background-color: #e2e6e6;
  padding: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #009688 !important;
  border-radius: 4px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pagination li a:hover {
  background-color: #009688;
  color: #fff !important;
}

.pagination .next a,
.pagination .prev a {
  text-transform: uppercase;
  font-size: 12px;
}

.pagination .currentpage a {
  background-color: #009688;
  color: #fff !important;
}

#allradiosorderby {
  margin-left: 20px !important;
}

.paneltrigger {
  z-index: 1 !important;
  position: absolute;
  display: block;
  font-weight: bold;
  padding: 7px;
  border: 1px solid black;
  border-radius: 0 10px 10px 0;
  left: 0px;
  top: 300px;
  cursor: pointer;
  position: fixed;
}

#mainpanel {
  z-index: 1;
  display: none;
}

.icons {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.icons i {
  text-shadow: 1px 1px 1px black;
}

.footer hr {
  background-color: cyan;
}

.socialmediaicons {
  margin: 5px;
  padding: 0px;
  font-size: 32px;
}

.icons {
  background-color: white;
  border: 1px solid none;
  border-radius: 30px;
}

.radionamefigure {
  display: none;
  font-weight: bold;
  font-size: 12px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: word-break;
}

.radionamefigureMain {
  font-weight: bold;
  font-size: 12px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: word-break;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .carousel-item img {
    max-height: 150px !important;
  }

  .pagetitle {
    font-size: 22px;
  }

  #mainpanel {
    margin-bottom: 20px;
  }

  .sidenav {
    border: 1px solid none;
    border-radius: 0 25px 25px 0;
    height: 550px;
    overflow-x: hidden;
    overflow-y: hidden;

    /* Disable horizontal scroll */
    padding-top: 100px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-bottom: 35px;
  }

  .sidenav i {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 28px;
  }

  .paneltrigger {
    z-index: 5;
    position: absolute;
    display: block;
    color: white;
    font-weight: bold;
    padding: 7px;
    border: 1px solid black;
    left: 0px;
    top: 220px;
    cursor: pointer;
    position: fixed;
  }

  .radiocount {
    font-size: 24px;
  }

 
  #pauseButton {
    padding: 3px;
    font-size: 32px;
    display: none;
  }

  #playButton {
    padding: 3px;
    font-size: 32px;
    display: none;
  }

  #muteButton {
    padding: 3px;
    font-size: 24px;
    margin-right: 5px;
    display: none;
  }

  #unmuteButton {
    padding: 3px;
    font-size: 24px;
    margin-right: 5px;
    display: none;
  }

  #volumeupbutton {
    padding: 3px;
    font-size: 16px;
    display: none;
  }

  #volumedownbutton {
    padding: 3px;
    font-size: 16px;
    display: none;
  }

  #likeicon {
    padding: 3px;
    font-size: 32px;
    display: none;
  }

  #unlikeicon {
    padding: 3px;
    font-size: 32px;
    display: none;
  }

  #brokenlink {
    padding: 3px;
    font-size: 26px;
  }

  #nowplayingradioinfo {
    padding: 3px;
    font-size: 20px;
  }

  #imageoftheradio {
    border: 1px solid none;
    border-radius: 75px;
    width: 60px !important;
    height: 60px !important;
  }

  #nameoftheradio {
    font-weight: bold;
    font-style: italic;
    font-size: 16px;
  }

  #genreoftheradio {
    font-size: 12px;
  }

  #nowplaying {
    font-size: 14px;
  }


  .tooltip {
    display: none !important;
  }

  .pagination li a {
    padding: 8px;
    font-size: 12px;
  }

  .dots {
    display: none;
  }

  .page {
    display: none;
  }

  .end {
    display: none;
  }

  .start {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .sidenavright {
    display: none;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 840px) {
}

@media only screen and (max-width: 600px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

.modal-body .twitterIcon .btn-icon{
  position: relative;
  padding: 1px 10px 1px 10px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  background-color: #1b95e0;
  border-radius: 3px;
  box-sizing: border-box;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E");
}

.btn-text{
  display: inline-block;
  vertical-align: top;
  margin-left: 3px;
}
.modal-body .twitterIcon{
  position: relative;
  height: 20px;
  padding: 5px 14px 5px 6px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  background-color: #1b95e0;
  border-radius: 3px;
  box-sizing: border-box;
}
.modal-body .twitterIcon:hover{
  background-color:#0c7abf;
}

.modal-body .twitterIcon:hover .btn-icon{
  background-color:#0c7abf;
}

.modal-body .facebookIcon {
  background-color: #3B5998;
}

.modal-body .facebookIcon:hover {
  background-color: #24355c;
}