/*
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
**/

/* NOTE: this must be first statement in file to work on device */
@import url(https://fonts.googleapis.com/css?family=Open + Sans:300, 400);

/* ------------------------------------------------- */
/* Animations                                        */
/* ------------------------------------------------- */

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

@-webkit-keyframes loading {
  0% {
    margin-left: -100%;
  }
  100% {
    margin-left: 100%;
  }
}

/* ------------------------------------------------- */
/* Player                                            */
/* ------------------------------------------------- */

body {
  background-color: #000;
}

.player {
  /* background-image: url("assets/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
  background: #333;
  color: #f1f1f1;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.player .logo {
  display: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  bottom: 50%;
  left: 50%;
  background-image: url("assets/logo.png");
  margin-bottom: -24px;
  margin-left: -136px;
  width: 272px;
  height: 48px;
}

.player .placeholder-image {
  background-image: url("assets/placeholder-audio.jpg");
}

.player .gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.player img,
.player video {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: fill;
}

.player .media-info {
  padding-bottom: 0;
  display: flex;
  overflow: hidden;
  margin-top: 24px;
}
.live-radio .player .media-info {
  margin-top: 0;
}

.player .media-artwork {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  align-self: flex-end;
  /* height: 143px;
  margin-right: 32px;
  min-width: 96px;
  max-width: 266px;
  width: 100%; */
  width: 192px;
  height: 108px;
}
.floating-logo {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  align-self: flex-end;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  opacity: 0;
  display: block;
}
.floating-logo.faded {
  opacity: 1;
  transition: opacity 500ms ease;
}
.floating-logo.pos-0 {
  top: 50%;
  left: 50%;
  margin-left: -72px;
  margin-top: -40px;
}
.floating-logo.pos-1 {
  top: 160px;
  left: 160px;
  margin-left: 0;
  margin-top: 0;
}
.floating-logo.pos-2 {
  top: 160px;
  left: 50%;
  margin-left: -72px;
  margin-top: 0;
}
.floating-logo.pos-3 {
  top: 160px;
  left: auto;
  right: 160px;
  margin-left: 0;
  margin-top: 0;
}
.floating-logo.pos-4 {
  bottom: 190px;
  top: auto;
  left: 160px;
  margin-left: 0;
  margin-top: 0;
}
.floating-logo.pos-5 {
  bottom: 190px;
  top: auto;
  left: 50%;
  margin-left: -72px;
  margin-top: 0;
}
.floating-logo.pos-6 {
  bottom: 190px;
  top: auto;
  left: auto;
  right: 160px;
  margin-left: 0;
  margin-top: 0;
}
.floating-logo.pos-7 {
  top: 50%;
  left: 160px;
  margin-left: 0;
  margin-top: -40px;
}
.floating-logo.pos-8 {
  top: 50%;
  left: auto;
  right: 160px;
  margin-left: 0;
  margin-top: -40px;
}

.player .media-text {
  width: 100%;
  align-self: flex-end;
  padding-left: 224px;
  padding-right: 148px;
}

.player .media-info .media-title-container {
  color: rgba(255, 255, 255, 0.8);
  font-size: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;

  font-size: 22px;
  font-weight: 400;

  /* text-align: left;
  color: #fff;
  font-size: 44px;
  margin-bottom: 0;
  margin-top: 37px;
  position: relative;
  display: block;
  margin-left: 30px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1em; */
}

.player .media-info .media-subtitle {
  color: rgba(203, 203, 203, 0.8);
  font-size: 22px;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
}

.player .media-info .media-subtitle span:not(:first-child):before {
  content: "\00B7";
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
}

.player .controls {
  display: none;
  bottom: 0;
  height: 30px;
  left: 0;
  position: absolute;
  right: 0;

  height: 30px;
  position: absolute;
  bottom: auto;
  left: 272px;
  right: 196px;
  top: 13px;
}
.live-radio .player .controls {
  display: none !important;
  /* border: 2px solid limegreen; */
}

.player .controls-play-pause {
  background-size: cover;
  border: 0;
  float: left;
  height: 36px;
  margin-left: -4px;
  margin-top: -3px;
  width: 32px;

  height: 15px;
  margin-left: 0;
  margin-top: 7px;
  width: 22px;
  margin-right: 8px;
}

.player .bg-softener {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51);
  z-index: 4;
  opacity: 0.6;
}

.player .overlay {
  position: absolute;
  /* left: 64px;
  bottom: 64px;
  right: 64px; */
  display: none;
  top: auto;

  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 48px;
  background-color: rgba(41, 56, 68, 0.6);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 5;
  box-sizing: border-box;
  min-height: 156px;
}
.player .overlay.faded {
  opacity: 0.1;
  transform: translateY(100%);
  transition: all 500ms ease;
}
.player[state="paused"] .overlay.faded {
  opacity: 1;
  transform: none;
  transition: all 1ms ease;
}
.player.seeking .overlay.faded {
  opacity: 1;
  transform: none;
  transition: all 1ms ease;
}

.player .overlay * {
  box-sizing: border-box;
}

.logo-main {
  width: 100px;
  position: absolute;
  right: 50px;
  top: 23px;
  min-height: 42px;
}
.logo-main img {
  width: 100%;
  display: block;
}

.player .watermark {
  position: absolute;
  top: 64px;
  left: 64px;
  bottom: 64px;
  right: 64px;
  display: none !important; /** jjo edit **/
  background-position: bottom right;
  background-repeat: no-repeat;
  margin-bottom: 54px;
  background-image: url("assets/watermark.png");
}

.player .gradient {
  display: none !important; /** jjo edit **/
  opacity: 0.9;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

.player .progressBar {
  background-color: rgb(250, 178, 49);
  background-color: #3b99fc;
}

.player .controls-progress {
  background-color: rgba(255, 255, 255, 0.2);
  height: 8px;
  margin-top: 11px;
  margin-bottom: 11px;
  overflow: hidden;
  position: relative;
}

.player .controls-progress-inner {
  height: 100%;
  opacity: 0.8;
}

.player .controls-progress-thumb {
  height: 100%;
  width: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  margin-left: -3px;
}

.player .controls-cur-time,
.player .controls-total-time {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 400;
}

.player .controls-cur-time {
  float: left;
  line-height: 30px;
  margin-left: 0;
  margin-right: 15px;
}

.player .controls-total-time {
  float: right;
  line-height: 30px;
  margin-left: 15px;
}

.player .preview-mode-info {
  padding-bottom: 54px;
  display: none !important;
  margin: -143px 0 0 0;
  overflow: hidden;
}

.player .preview-mode-artwork {
  background-image: url("assets/logo.png");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  align-self: flex-end;
  height: 143px;
  margin-right: 32px;
  min-width: 96px;
  max-width: 266px;
  width: 100%;
  border: 3px solid orangered;
}

.player .preview-mode-info .preview-mode-text {
  width: 100%;
  align-self: flex-end;
}

.player .preview-mode-info .preview-mode-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
}

.player .preview-mode-info .preview-mode-subtitle {
  color: rgba(203, 203, 203, 0.8);
  font-size: 22px;
  overflow: hidden;
  width: 80%;
}

.player
  .preview-mode-info
  .preview-mode-subtitle
  span:not(:first-child):before {
  content: "\00B7";
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
}

.player .preview-mode-info .preview-mode-timer {
  display: flex;
  color: rgb(250, 178, 49);
  font-size: 22px;
  overflow: hidden;
  width: 80%;
}

.player .preview-mode-info .preview-mode-timer-starts {
  font-weight: bold;
}

/* ------------------------------------------------- */
/* Player - Video                                    */
/* ------------------------------------------------- */

/* ------------------------------------------------- */
/* Player - Video - Launching                        */
/* ------------------------------------------------- */
/* 
.player[type="video"][state="launching"] .overlay {
  display: block;
}

.player[type="video"][state="launching"] .logo {
  display: block;
}

.player[type="video"][state="launching"] .controls,
.player[type="video"][state="launching"] .media-info,
.player[type="video"][state="launching"] .media-artwork {
  display: none;
}

.player[type="video"][state="launching"] .spinner {
  -webkit-animation: spin 1s infinite linear;
  height: 36px;
  width: 32px;
  display: block;
  position: absolute;
  background-image: url("assets/buffering.png");
  bottom: 64px;
  left: 50%;
  margin-left: 32px / -2;
} */

.player .loading-splash,
.player .loading-title {
  -webkit-animation: spin 1s infinite linear;
  height: 36px;
  width: 32px;
  display: block;
  position: absolute;
  background-image: url("assets/buffering.png");
  bottom: 64px;
  left: 50%;
  margin-left: -16px;
}

.player .loading-title {
  position: static;
  background-size: cover;
  float: left;
  margin-right: 8px;
  width: 22px;
  height: 24px;
  margin-top: 4px;
  margin-left: 0;
  background-size: cover;
}

.player .loading-splash,
.player .spinner,
.player .loading-title {
  display: none;
}

.player[state="launching"] .loading-splash {
  display: block;
}

.player[state="loading"] .loading-title {
  display: block;
}

/* ------------------------------------------------- */
/* Player - Audio                                    */
/* ------------------------------------------------- */

.player .media-title-container {
  font-size: 22px;
  font-weight: 400;
}

.player .media-artwork {
  /* height: 384px;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  width: 384px;
  max-width: 384px;
  background-image: url("assets/placeholder-audio.jpg");
   */
  width: 192px;
  height: 108px;
  background-color: #fff;
  position: absolute;
  top: 24px;
  left: 48px;
}

.player .media-text {
  margin-top: 15px;
  margin-top: 0;
}

.player[live="true"] .media-text {
  margin-top: 19px !important;

  margin-top: 0 !important;
}

.player .placeholder-image {
  display: block;
}

/* ------------------------------------------------- */
/* Player - Audio - Launching                        */
/* ------------------------------------------------- */

.player[state="launching"] .logo {
  display: block;
}

.player[state="launching"] .floating-logo {
  display: none;
}

/* .player[state="loading"] .logo {
  display: block;
} */

/* ------------------------------------------------- */
/* Player - Audio - Loading/Paused                   */
/* ------------------------------------------------- */

.player[state="paused"] .overlay,
.player[state="loading"] .overlay {
  display: block;
  margin: 0 !important;
}

.player[state="loading"] .watermark,
.player[state="paused"] .watermark {
  /* display: block;
  margin: 0 !important;
  margin-bottom: 54px !important; */
}

.player[state="loading"] .gradient,
.player[state="paused"] .gradient {
  /* display: block;
  visibility: visible; */
}

.player[state="paused"] .controls-play-pause {
  display: block;
  background-image: url("assets/paused.png");
}

.player[state="loading"] .controls-play-pause {
  display: none;
}

.player[state="loading"] .controls-cur-time,
.player[state="loading"] .controls-total-time {
  display: none !important;
}

.player[state="paused"]:not(.seeking) .controls-cur-time,
.player[state="paused"]:not(.seeking) .controls-total-time {
  display: block;
}

.player[state="loading"] .controls,
.player[state="paused"] .controls,
.player[state="loading"]:not(.seeking) .controls-progress,
.player[state="paused"]:not(.seeking) .controls-progress {
  display: block;
}

.player[state="loading"][live="true"] .controls-cur-time,
.player[state="paused"][live="true"] .controls-cur-time,
.player[state="loading"][live="true"] .controls-total-time,
.player[state="paused"][live="true"] .controls-total-time,
.player[state="loading"][live="true"] .controls-progress,
.player[state="paused"][live="true"] .controls-progress {
  display: none !important;
}

.player[state="loading"] .controls-progress-inner {
  width: 90% !important;
  -webkit-animation: loading 2s infinite linear;
}

.player[state="loading"] .media-artwork,
.player[state="paused"] .media-artwork {
  /* position: absolute;
  left: 384px;
  top: -450px; */
}

/* ------------------------------------------------- */
/* Player - Audio - Buffering/Playing                */
/* ------------------------------------------------- */

.player[state="buffering"] .overlay,
.player[state="playing"] .overlay {
  display: block;
}

.player[state="buffering"] .media-info,
.player[state="playing"] .media-info {
  display: block;
  padding-bottom: 0;
}

.player[state="buffering"] .media-text,
.player[state="playing"] .media-text {
  float: left;
  margin-top: 19px;
  margin-top: 0;
}

.player[state="buffering"] .controls,
.player[state="playing"] .controls {
  height: 4px;
  position: absolute;
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
  display: block;

  height: 30px;
  position: absolute;
  bottom: auto;
  left: 272px;
  right: 196px;
  top: 13px;
  display: block;
}

.player[state="buffering"] .controls-progress,
.player[state="playing"] .controls-progress {
  height: 4px;
  margin-top: 0;
  margin-bottom: 0;

  height: 8px;
  margin-top: 11px;
  margin-bottom: 0;
}

.player[state="buffering"] .controls-cur-time,
.player[state="buffering"] .controls-total-time,
.player[state="buffering"] .controls-play-pause,
.player[state="playing"] .controls-cur-time,
.player[state="playing"] .controls-total-time,
.player[state="playing"] .controls-play-pause {
  display: none;
}
.player[state="buffering"] .controls-cur-time,
.player[state="buffering"] .controls-total-time,
.player[state="playing"] .controls-cur-time,
.player[state="playing"] .controls-total-time {
  display: block;
}

.player[state="buffering"] .watermark,
.player[state="playing"] .watermark {
  display: none;
  margin-bottom: 0;
}

.player[state="buffering"] .overlay,
.player[state="playing"] .overlay {
  /* margin-left: 384px;
  margin-bottom: 116px; */
}

/* ------------------------------------------------- */
/* Player - Idle                                     */
/* ------------------------------------------------- */

.player[state="idle"] .overlay {
  display: none;
}

.player[state="idle"] .logo {
  display: block;
}
.player[state="idle"] .floating-logo {
  display: none;
}

.player[state="idle"] .loading-splash,
.player[state="idle"] .spinner {
  display: none;
}

.player[state="idle"] iframe {
  display: none;
}

.player[state="idle"] .bg-softener {
  display: none;
}

/* ------------------------------------------------- */
/* Player - Done                                     */
/* ------------------------------------------------- */

.player[state="done"] .overlay {
  display: none;
}

.player[state="done"] {
  background-image: url("assets/done.png");
}

iframe {
  border: 0;
  height: 100%;
  margin-top: 0;
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: 0;
  opacity: 1;
  z-index: 3;
}

iframe.faded {
  opacity: 0.1;
  transition: opacity 10000ms ease;
}
.player .bg-softener.faded {
  opacity: 1;
  background-color: rgba(51, 51, 51);
  transition: opacity 5000ms ease;
}

.player .update-message {
  width: 58%;
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  display: none;
  position: absolute;
  top: 100px;
  left: 21%;
  text-align: center;
}
.player[state="idle"] .update-message.active {
  display: block;
}

.version {
  position: fixed;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 12px;
}