/* Audio: Remove big play button (leave only the button in controls). */
.video-js .vjs-big-play-button {
  display: none !important;
}
/* Audio: Make the controlbar visible by default */
.video-js .vjs-control-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 4.8em;
}
/* Make player height minimum to the controls height so when we hide video/poster area the controls are displayed correctly. */
.video-js {
  min-height: 4.8em;
  color: #cacaca;
}

.video-js .vjs-control {
  height: 100%;
  width: 6.0em;
  position: relative;
  text-align: center;
  justify-content: space-between;
}

.video-js .vjs-play-control, .video-js .vjs-volume-menu-button {
  border-right: 1px solid #323232;
}

.vjs-progress-control, .vjs-remaining-time, .vjs-time-control {
  display: none !important;
}

.vjs-ad-loading .vjs-loading-spinner {
  display: none;
}

.vjs-loading-spinner {
  left: 9%;
  top: 54%;
  width: 45px;
  height: 45px;
}

.vjs-button>.vjs-icon-placeholder:before {
  font-size: 4.0em;
  line-height: 1.2;
}

.video-js .vjs-volume-bar {
  margin: 2.2em .45em;
}

.video-js .vjs-volume-level {
  background-color: #cacaca;
}

.video-js .vjs-volume-horizontal {
  height: 4.8em !important;
}

.video-js .vjs-play-control {
  order: 0;
}

.video-js .vjs-live-control {
  order: 2;
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
}

.vjs-live-display {
  font-size: 18px;
  min-width: 45%;
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  order: 1;
  width: 6em;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
  order: 1;
  width: 6em;
}

.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical {
  display: flex;
  justify-content: center;
  left: -4.5em;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
    width: 12em;
}

#audio-sample-container {
  display: none;
}

#player-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.player-item {
  background-color: #fff;
  max-width: 350px;
  width: 100%;
}

.top-ad {
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-player {
  background-color: #2d91ee;
  height: 54px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  z-index: 1;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.navbar-item {
  padding: 0px 10px 0px 10px;
  margin: 10px 0px 10px 0px;
}

.brand img {
  width: 121px;
  height: 25px;
}

.radio-name h3 {
  padding: 0px 10px 0px 10px;
  margin: 10px 0px 10px 0px;
}

.radio-name a {
  text-decoration: none;
  color: inherit;
}

.song-info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.song-image {
  padding: 0px 10px 0px 10px;
  margin: 10px 0px 10px 0px;
}

.song-data {
  width: 100%;
  align-self: stretch;
  padding: 0px 10px 0px 10px;
  margin: 10px 0px 10px 0px;
}

.song-data h4 {
  margin: 0px 0px 10px 0px;
}

.song-data p {
  font-size: 14px;
  margin: 0px 0px 5px 0px;
}

.progress-bar {

}

.player {

}

.bottom-ad {
  min-height: 300px;

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

.modal-body {
  text-align: center;
}

.tooltip-inner {
  font-size: 13px;
  background-color: #2d91ee;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .vjs-icon-placeholder {
    font-size: 6px;
  }

  .vjs-icon-placeholder {
    font-size: 6px;
  }
}