// .absolute {
//   position: absolute;
//   top: 0;
//   left: 0;
//   height: 100%;
//   width: 100%;
// }
.playerSkin {
  position: absolute;
  top: 0;
  left: 0;

  overflow: hidden;

  width: 100%;
  height: 100%;

  user-select: none;

  color: #eee;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

// .controls {
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   height: 96px;
//   padding: 0 16px;
//   background: transparent repeat-x left bottom;
//   transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
//   display: flex;
//   flex-direction: column;
//   justify-content: flex-end;
// }

// .hiddenControls {
//   .controls;
//   transform: translate(0, 52px);
// }

// .waiting,
// .ended,
// .blocked,
// .loading {
//   .absolute;
//   overflow: hidden;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 64px;
//   background: transparent;
//   border: 0;
//   margin: 0;
//   padding: 0;
//   color: #fff;
// }

// .kernelMsg {
//   .absolute;
//   padding: 2em;
//   background: rgba(0, 0, 0, 0.65);
//   overflow-y: auto;
// }

// button.ended {
//   border: 0;
//   padding: 0;
//   margin: 0;
//   cursor: pointer;
//   background-color: transparent;
//   outline: 0 none transparent;
// }

// .bar {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
//   padding: 0 8px 4px;
//   button {
//     border: 0;
//     padding: 0;
//     margin: 0;
//     cursor: pointer;
//     background-color: transparent;
//     width: 32px;
//     height: 32px;
//     line-height: 32px;
//     font-size: 20px;
//     outline: 0 none transparent;
//     display: inline-block;
//     vertical-align: bottom;
//   }
//   .textBtn {
//     width: auto;
//     padding: 0 8px;
//     font-size: 14px;
//   }
// }

// .flexItem {
//   flex: 1;
//   overflow: hidden;
//   white-space: nowrap;
// }

// .controlText {
//   height: 32px;
//   line-height: 32px;
//   font-size: 14px;
//   display: inline-block;
//   padding: 0 8px;
// }

// .volumeSlider {
//   .controlText;
//   width: 120px;
//   vertical-align: bottom;
//   padding-left: 4px;
//   padding-right: 12px;
//   :global(.ant-slider) {
//     margin-top: 10px;
//   }
//   :global(.ant-slider-rail) {
//     background: rgba(255, 255, 255, 0.2);
//   }
//   :global(.ant-slider-rail) {
//     background: rgba(255, 255, 255, 0.2);
//   }
//   :global(.ant-slider-track) {
//     background: rgba(255, 255, 255, 0.85);
//   }
//   :global(.ant-slider-handle) {
//     background: rgba(255, 255, 255, 0.85);
//     border: none 0 transparent;
//   }
//   :global(.ant-slider-handle):focus {
//     border: none 0 transparent;
//     box-shadow: none;
//   }
//   :global(.ant-slider):hover {
//     :global(.ant-slider-rail) {
//       background: rgba(255, 255, 255, 0.2);
//     }
//     :global(.ant-slider-track) {
//       background: rgba(255, 255, 255, 0.85);
//     }
//     :global(.ant-slider-handle) {
//       background: rgba(255, 255, 255, 0.85);
//       border: none 0 transparent;
//       box-shadow: none;
//     }
//     :global(.ant-slider-handle):not(:global(.ant-tooltip-open)) {
//       border: none 0 transparent;
//       box-shadow: none;
//     }
//     :global(.ant-slider-handle):focus {
//       border: none 0 transparent;
//       box-shadow: none;
//     }
//   }
// }

// .liveDot {
//   width: 6px;
//   height: 6px;
//   display: inline-block;
//   border-radius: 50%;
//   background: #ff0000;
//   margin-right: 8px;
//   vertical-align: middle;
//   position: relative;
//   top: -2px;
// }

// @media (max-width: 575px) {
//   .volume {
//     display: none;
//   }
// }