/**
 * All of the CSS for your frontend-facing functionality should be
 * included in this file.
 */

.rhwp-player {
  max-width: unset;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Arial";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.rhwp-player .rhwp-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 600px;
  height: 250px;
}

.rhwp-player .rhwp-wrapper h1,
.rhwp-player .rhwp-wrapper h2,
.rhwp-player .rhwp-wrapper h3,
.rhwp-player .rhwp-wrapper h4,
.rhwp-player .rhwp-wrapper h5,
.rhwp-player .rhwp-wrapper h6,
.rhwp-player .rhwp-wrapper p,
.rhwp-player .rhwp-wrapper span,
.rhwp-player .rhwp-wrapper i {
  line-height: 1.2;
}

.rhwp-player .rhwp-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  background-color: rgba(0, 0, 0, 0.97);
  color: #fff;
  z-index: 999;
}

.rhwp-player .rhwp-loading i, .rhwp-spinner {
  font-size: 3em;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.rhwp-player .rhwp-loading .rhwp-notice span {
  font-size: 16px;
}

.rhwp-player .rhwp-header,
.rhwp-player .rhwp-footer {
  height: 125px;
  min-height: 125px;
  width: 100%;
}

.rhwp-player .rhwp-header {
  display: flex;
  background-color: rgb(11, 30, 43);
  color: #fff;
}

.rhwp-player .rhwp-header .rhwp-cover,
.rhwp-player .rhwp-footer > div .rhwp-dj-avatar {
  background-color: lightgray;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.rhwp-player .rhwp-header .rhwp-cover .rhwp-controls .rhwp-buttons-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rhwp-player .rhwp-header .rhwp-cover .rhwp-controls .rhwp-buttons-wrapper .rhwp-playstop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65%;
  height: 65%;
  font-size: 3rem;
  background-color: rgba(255,255,255,.5);
  border-radius: 100%;
  opacity: .8;
  transition: all .25s linear;
  cursor: pointer;
}

.rhwp-player .rhwp-header .rhwp-cover .rhwp-controls .rhwp-buttons-wrapper .rhwp-playstop.fa-stop {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  height: 45%;
  font-size: 2rem;
}

.rhwp-player .rhwp-header .rhwp-main {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-info {
  width: 100%;
  height: 50%;
  padding: 0.25em 0 0 0.5em;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-info h3,
.rhwp-player .rhwp-header .rhwp-main .rhwp-info h4 {
  margin: 0;
  position: relative;
  color: inherit;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-info h3 {
  font-size: 24px;
  font-weight: bold;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-info h4 {
  font-size: 20px;
  font-weight: normal;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-info h3:after,
.rhwp-player .rhwp-header .rhwp-main .rhwp-info h4:after {
  content: attr(data-content);
  position: absolute;
  top: -25px;
  left: 0;
  background: #000;
  padding: 0.25em 0.5em;
  border-radius: 5px;
  visibility: hidden;
  font-weight: normal;
  font-size: 16px;
  color: #fff;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-info h3:hover:after,
.rhwp-player .rhwp-header .rhwp-main .rhwp-info h4:hover:after {
  visibility: visible;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-buttons-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 30%;
  height: 100%;
  color: rgba(52, 152, 219, 1);
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-buttons-wrapper i {
  margin-left: 0.5em;
  cursor: pointer;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-buttons-wrapper a.a-tunein {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-left: .25em;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-buttons-wrapper a.a-tunein.winamp {
  background-image: url("/wp-content/plugins/radiohost-aio/assets/images/frontend/tunein-pls_64x64.png");
}
.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-buttons-wrapper a.a-tunein.mediaplayer {
  background-image: url("/wp-content/plugins/radiohost-aio/assets/images/frontend/tunein-asx_64x64.png");
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-volume-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
  width: 70%;
  padding: 0 0.5em;
}

.rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-volume-wrapper > i {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: .8em;
}

.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider {
  height: 10px;
  width: 80%;
  background-color: rgb(11, 30, 43);
  border-color: rgba(52, 152, 219, 1);
}

.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider
.ui-slider-range {
  background-color: rgba(52, 152, 219, 1);
  border-color: rgb(11, 30, 43);
}

.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-black {
  height: 10px;
  background-color: #000;
  border-color: #000;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-black
.ui-slider-range {
  background-color: #000;
  border-color: #000;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-dark {
  height: 10px;
  background-color: #343a40;
  border-color: #343a40;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-dark
.ui-slider-range {
  background-color: #343a40;
  border-color: #343a40;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-gray {
  height: 10px;
  background-color: #6c757d;
  border-color: #6c757d;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-gray
.ui-slider-range {
  background-color: #6c757d;
  border-color: #6c757d;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-white {
  height: 10px;
  background-color: #fff;
  border-color: #fff;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-white
.ui-slider-range {
  background-color: #fff;
  border-color: #fff;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-blue {
  height: 10px;
  background-color: #007bff;
  border-color: #007bff;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-blue
.ui-slider-range {
  background-color: #007bff;
  border-color: #007bff;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-green {
  height: 10px;
  background-color: #28a745;
  border-color: #28a745;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-green
.ui-slider-range {
  background-color: #28a745;
  border-color: #28a745;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-red {
  height: 10px;
  background-color: #dc3545;
  border-color: #dc3545;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-red
.ui-slider-range {
  background-color: #dc3545;
  border-color: #dc3545;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-yellow {
  height: 10px;
  background-color: #ffc107;
  border-color: #ffc107;
}
.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider.rhwp-s-yellow
.ui-slider-range {
  background-color: #ffc107;
  border-color: #ffc107;
}

.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider
.ui-slider-handle {
  width: 20px;
  height: 20px;
  background-color: rgb(167, 220, 255);
  box-shadow: rgb(11, 30, 43) 0px 0px 7px 0px;
  border-radius: 100%;
  border: none;
  cursor: pointer;
  outline: none;
}

.rhwp-player
.rhwp-header
.rhwp-main
.rhwp-controls
.rhwp-volume-wrapper
.rhwp-volume-slider
.ui-slider-handle.ui-state-active {
  border: none;
}

.rhwp-player .rhwp-footer {
  display: flex;
  background-color: rgb(14, 39, 56);
  color: #fff;
}

.rhwp-player .rhwp-footer > div {
  display: flex;
  width: 50%;
}

.rhwp-player .rhwp-footer > div h5,
.rhwp-player .rhwp-footer > div h6 {
  margin: 0;
  font-size: 16px;
}

.rhwp-player .rhwp-footer > div h6 {
  font-size: 12px;
}

.rhwp-player .rhwp-footer > div .rhwp-dj-avatar {
  height: 100%;
}

.rhwp-player .rhwp-footer > div .rhwp-dj-info {
  padding-left: 0.25em;
  width: 100%;
}

.rhwp-player .rhwp-body {
  height: 0;
  min-height: 0;
  width: 100%;
  background-color: rgb(14, 39, 56);
  color: #fff;
  overflow: auto;
}

.rhwp-player .rhwp-body.active {
  height: 150px;
  min-height: 150px;
}

.rhwp-player .rhwp-body,
.rhwp-player .rhwp-history {
  transition: 0.5s all;
}

.rhwp-player .rhwp-history.active {
  transform: rotateZ(-180deg);
}

.rhwp-player .rhwp-body ul {
  list-style: none;
  margin: 0;
}

.rhwp-player .rhwp-body ul li {
  display: flex;
  margin: 0;
  margin: 0;
  padding: 0.25em 0 0 0.25em;
}

.rhwp-player .rhwp-body ul li:last-child {
  padding-bottom: 0.25em;
}

.rhwp-player .rhwp-body ul li .rhwp-song-cover:before {
  content: " ";
  position: absolute;
  height: 100%;
  width: 100%;
}

.rhwp-player .rhwp-body ul li .rhwp-song-cover {
  position: relative;
  min-width: 75px;
  height: 75px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rhwp-player .rhwp-body ul li .rhwp-song-cover-placeholder {
  min-width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
  font-size: 3.5rem;
}

.rhwp-player .rhwp-body ul li .rhwp-song-title {
  font-size: 18px;
}

.rhwp-player .rhwp-body.recordings ul li .rhwp-tags-label {
  font-size: 14px;
}

.rhwp-player .rhwp-body.recordings ul li .rhwp-tag {
  display: inline-block;
  font-size: 14px;
  margin-left: .5em;
  cursor: pointer;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta {
  width: 100%;
  margin-left: 0.5em;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-meta-header .rhwp-recording-title {
  display: inline-block;
  font-size: 20px;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-meta-header .rhwp-recording-tags {
  display: inline-block;
  font-size: 12px;
  vertical-align: top;
  float: right;
  margin-right: .5em;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-description {
  font-size: 18px;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-duration {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-duration .fa-spinner:before {
  display: inline-block;
  width: auto;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-duration .fa {
  cursor: pointer;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-duration >*:nth-child(n+2) {
  margin-left: .5em;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-duration .recording-progress-wrapper {
  position: relative;
  width: 50%;
  height: 10px;
  display: inline-block;
  background-color: rgb(11, 30, 43);
  border: 1px solid rgba(52, 152, 219, 1);
  border-radius: 5px;
  cursor: pointer;
}

.rhwp-player .rhwp-body ul li .rhwp-recording-meta .rhwp-recording-duration .recording-progress-wrapper .recording-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(52, 152, 219, 1);
  border-radius: 5px;
  pointer-events: none;
}

.rhwp-player .rhwp-body ul li .recording-load-more {
  display: block;
  width: 99%;
  background-color: rgba(52, 152, 219, 1);
  color: #fff;
  transition: all .25s linear;
}

.rhwp-player .rhwp-body ul li .recording-load-more:hover {
  text-decoration: none;
  filter: brightness(0.9);
}

.rhwp-player .rhwp-body ul li .recording-load-more:focus {
  text-decoration: none;
  outline: none;
}

.rhwp-player .rhwp-body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(11, 30, 43);
  background-color: rgba(52, 152, 219, 1);
}

.rhwp-player .rhwp-body::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(52, 152, 219, 1);
}

.rhwp-player .rhwp-body::-webkit-scrollbar-thumb {
  background-color: rgb(11, 30, 43);
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 767px) {
  .rhwp-player.rhwp-mobile {
    width: auto;
    height: auto;
    margin: 0 0.5em;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper {
    height: auto !important;
    min-height: auto !important;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-header {
    flex-flow: column;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 1em;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-header .rhwp-cover {
    height: 125px;
    margin: 0.5em auto 0 auto;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-header .rhwp-main .rhwp-info {
    text-align: center;
  }
  .rhwp-player.rhwp-mobile
  .rhwp-wrapper
  .rhwp-header
  .rhwp-main
  .rhwp-controls {
    flex-flow: column;
  }
  .rhwp-player.rhwp-mobile
  .rhwp-wrapper
  .rhwp-header
  .rhwp-main
  .rhwp-controls
  .rhwp-buttons-wrapper {
    justify-content: center;
    margin-bottom: 0.5em;
    font-size: 3em;
    width: auto;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-footer {
    flex-flow: column;
    height: auto !important;
    min-height: auto !important;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-footer .rhwp-dj-now,
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-footer .rhwp-dj-next {
    width: 100%;
  }
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-footer > div .rhwp-dj-avatar {
    height: 125px;
  }

  .rhwp-player .rhwp-header .rhwp-main .rhwp-controls .rhwp-buttons-wrapper a.a-tunein {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
}

@media screen and (max-width: 350px) {
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-footer .rhwp-dj-now,
  .rhwp-player.rhwp-mobile .rhwp-wrapper .rhwp-footer .rhwp-dj-next {
    flex-flow: column;
    align-items: center;
    text-align: center;
  }
  .rhwp-player .rhwp-footer > div .rhwp-dj-info {
    padding: 0;
  }
}