/*
  New Video Player
 */

#stream-container #playercontainer {
  opacity: 0;
}

#stream-container:hover #playercontainer {
  opacity: 1;
}

#stream-container #playercontainer.pl-init,
#stream-container #playercontainer.pl-hold {
  opacity: 1;
}

#stream-container.limit-layover #playercontainer,
#stream-container.layover-enabled #playercontainer,
#stream-container.stream-status-away #playercontainer,
#stream-container.stream-status-offline #playercontainer,
.chatFullscreen #playercontainer {
  display: none;
}

#stream-container video {
  object-fit: cover;
}

/*
  Player Container
*/

.zmax #playercontainer {
  display: none;
}

#playercontainer {
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 25;
  transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1);
  user-select: none;
  pointer-events: none;
}

#controls {
  pointer-events: auto;
  user-select: none;

  position: absolute;
  bottom: 0;
  left: 8px;
  right: 7px;
  height: 50px;
}

/*
  Progress Holder
*/

#progressholder {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(61, 61, 61, 0.7);
  cursor: pointer;
  top: 2px;
}

#progressholder:hover {
  top: 0;
  height: 6px;
}

#buffered {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(160, 160, 160, 0.4);
  width: 0;
}

#progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(64, 214, 64, 1.0);
  width: 0;
}

#progressholder:hover #progress:before {
  content: " ";
  display: block;
  position: absolute;
  top: -3px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background: rgb(64, 214, 64);
}

/*
  Buttons
*/

.player-icon {
  position: relative;
  max-width: 22px;
  max-height: 16px;
  cursor: pointer;
  top: 1px;
}

.player-icon .state-default {
  opacity: 1;
}

.player-icon:hover .state-default {
  opacity: 0;
}

.player-icon:hover .state-hover {
  opacity: 1;
}

.player-icon .state-hover {
  opacity: 0;
}

.sound-volume {
  user-select: none;

  display: none;

  position: relative;
  top: 2px;
  cursor: pointer;
}

.button-settings.hidden {
  display: none;
}

.button-sound:hover .sound-tooltip,
.stream-cast:hover .cast-tooltip,
.button-settings:hover .settings-tooltip,
.button-fullscreen:hover .fullscreen-tooltip {
  opacity: 1;
}

.player-rightbar .stream-cast {
  display: none;
  margin: 0;
}

#cast-info {
  display: none;
  position: absolute;
  bottom: 40px;
  left: 20px;
  max-width: calc(100% - 40px);
  padding: 7px 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow: hidden;
  z-index: 5;
}

.logged_in .player-rightbar .stream-cast {
  display: inline;
}

.cast-button {
  width: 20px;
  height: 20px;
  padding: 0 6px 0 10px;
  vertical-align: bottom;
  border: none;
  outline: none;
  background: none;
  box-sizing: content-box;
  cursor: pointer;
}

#cast-button {
  --disconnected-color: #fff;
  --connected-color: #fff;
}
#cast-button:hover {
  --disconnected-color: #e1e1e1;
  --connected-color: #e1e1e1;
}

#cast-button-fs {
  --disconnected-color: #c5c5c5;
  --connected-color: #c5c5c5;
}
#cast-button-fs:hover {
  --disconnected-color: #e1e1e1;
  --connected-color: #e1e1e1;
}

.settings-tooltip {
  right: 163px;
}

.tooltip-gray {
  display: inline-block;
  background: #555;
  color: #fff;
  padding: 10px;
  position: absolute;
  text-align: center;
  pointer-events: none;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.tooltip-gray:before {
  content: "";
  border-color: #555 transparent transparent transparent;
  border-style: solid;
  border-width: 7px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: -14px;
  right: 13px;
}

.tooltip-gray:after {
  content: "";
  border-color: #555 transparent transparent transparent;
  border-style: solid;
  border-width: 7px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: -14px;
  right: 13px;
}

.settings-tooltip {
  opacity: 0;
  right: -2px;
  bottom: 28px;
  pointer-events: none;
}

.cast-tooltip {
  opacity: 0;
  right: 0;
  bottom: 28px;
  pointer-events: none;
}

.fullscreen-tooltip {
  opacity: 0;
  right: -6px;
  bottom: 36px;
  pointer-events: none;
  min-width: 300px;
  white-space: normal;
}

.sound-tooltip {
  opacity: 0;
  right: 62px;
  bottom: 28px;
  pointer-events: none;
}

.pl-hold-volume .sound-volume,
.button-sound .sound-volume { /* #button-sound:hover disabled @task #21628#c81451 >>5 */
  display: inline-block;
  width: 52px;
  height: 18px;
  margin-left: 6px;
  margin-right: 3px;
}

#sound-volume-holder {
  pointer-events: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  left: 0;
  top: 7px;
  right: 0;
  height: 3px;
}

#sound-volume-position {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  width: 0;
}

#sound-volume-position:before {
  content: " ";
  display: block;
  position: absolute;
  top: -3px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: #fff;
}

.sound-muted {
  display: none;
}

.muted .sound-normal {
  display: none;
}

.muted .sound-muted {
  display: inline-block;
}

#playpause {
  font-size: 14pt;
  color: #fff;
  margin-left: 10px;
  display: inline-block;
}

#playpause:hover {
  color: #d3d3d3;
}

#progresstime {
  font-size: 10pt;
  color: #fff;
  font-weight: bold;
}

.button-fullscreen {
  font-size: 14pt;
}

.size-normal {
  display: none;
}

.on .size-fullscreen {
  display: none;
}

.on .size-normal {
  display: inline-block;
}

.player-leftbar {
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 0;
  text-align: left;
  direction: ltr;
}

.player-rightbar {
  position: absolute;
  top: 21px;
  bottom: 0;
  right: 0;
  text-align: right;
  direction: ltr;
}

.player-leftbar > div,
.player-rightbar > div {
  display: inline;
  position: relative;
}

.player-leftbar > div {
  margin-right: 12px;
}

.player-rightbar > div {
  margin-left: 10px;
}

#player-livestatus {
  position: relative;
  font-size: 13px;
  color: #fff;
  display: inline-block;
  margin-left: 12px;
  top: 8px;
  text-transform: uppercase;
}

#player-livestatus:before {
  position: absolute;
  content: " ";
  background-color: rgb(0, 214, 0);
  display: block;
  left: -12px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

.player-background {
  width: 100%;
  position: absolute;
  background-repeat: repeat-x;
  background-position: bottom;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
  transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1);
  pointer-events: none;
  left: 0;
  right: 0;
  height: 49px;
  bottom: 0;
  padding-top: 49px;
}

/*
  Dialogs
*/

.player-dialogs {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  font-size: 14px;
}

.static-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 380px;
  min-height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  font-size: 13px;
}

.static-dialog > div {
  padding: 6px;
  margin: 4px;
}

.static-dialog .static-text {
  color: #3b3b3b;
}

.static-dialog .hr {
  border-top: 1px solid #eaeaea;
  margin: 8px 0;
  height: 3px;
}

.static-dialog-content {
  background-color: #f9f9f9;
  color: #5d5d5d;
}

.static-dialog-content h4 {
  font-weight: bold;
  font-size: 16px;
  margin: 6px 0;
  padding: 0;
  color: #232323;
}

.static-dialog svg.icon {
  max-width: 37px;
  max-height: 22px;
  position: relative;
  vertical-align: top;
  margin-right: 16px;
}

/*
  Flash Toggle
*/

.tgl {
  display: none;
}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
  direction: ltr;
}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}

.tgl + .tgl-btn {
  outline: 0;
  display: inline-block;
  width: 37px;
  height: 20px;
  position: relative;
  cursor: pointer;
  user-select: none;
  top: 6px;
  margin-top: -8px;
}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.tgl + .tgl-btn:after {
  left: 0;
}

.tgl + .tgl-btn:before {
  display: none;
}

.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-flat + .tgl-btn {
  padding: 1px;
  transition: all .2s ease;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.tgl-flat + .tgl-btn:after {
  transition: all .2s ease;
  background: #ddd;
  content: "";
  border-radius: 2px;
}

.tgl-flat:checked + .tgl-btn {
  border: 1px solid #009b26;
  background: #009b26;
}

.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #fcfcfc;
}

/*
  Ballon
*/

.ballon-dialog {
  display: inline-block;
  background: #fff;
  border: 1px solid #ccc;
  padding: 4px;
  position: absolute;
  text-align: center;
  min-width: 200px;
  right: 135px;
  bottom: 35px;
  pointer-events: auto;
}

.castAvailable .ballon-dialog {
  right: 174px;
}

.ballon-content {
  background-color: #f9f9f9;
  padding: 6px;
  color: #333;
}

.ballon-arrow {
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 8px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: -15px;
  right: 13px;
}

.ballon-arrow-border {
  border-color: #ccc transparent transparent transparent;
  border-style: solid;
  border-width: 8px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: -16px;
  right: 13px;
}

#flash-toggle-dialog-2 {
  min-width: 380px;
  box-sizing: border-box;
}

#flash-toggle-dialog-2 p {
  display: inline-block;
  width: 380px;
}

#flash-toggle-dialog-2 svg.icon {
  max-width: 42px;
  max-height: 42px;
  margin-bottom: 16px;
}

#flash-toggle-dialog-2 .ballon-content {
  font-size: 16px;
  color: #999;
  padding: 13px 0;
}

#flash-toggle-dialog {
  min-width: 332px;
  box-sizing: border-box;
}

#flash-toggle-dialog p {
  display: inline-block;
  width: 332px;
}

#flash-toggle-dialog svg.icon {
  max-width: 42px;
  max-height: 42px;
  margin-bottom: 16px;
}

#flash-toggle-dialog .ballon-content > div {
  display: inline-block;
  max-width: 322px;
}

#flash-toggle-dialog .ballon-content h4 {
  color: #333;
  margin: 2px 0 6px 0;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
}

#flash-toggle-dialog .ballon-content {
  text-align: left;
  font-size: 13px;
  color: #666;
  padding: 6px 6px;
}

#flash-toggle-dialog .ballon-text {
  padding: 13px 8px;
  font-size: 16px;
  color: #888;
}

#flash-toggle-dialog-2 .button-green,
#flash-toggle-dialog .button-green {
  position: relative;
  pointer-events: none;
}

#flash-toggle-dialog-2 .allow-button-holder,
#flash-toggle-dialog .allow-button-holder {
  position: relative;
  display: inline-block;
}

#flash-toggle-dialog-2 .allow-button-holder object,
#flash-toggle-dialog .allow-button-holder object {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

#flash-toggle-tooltip {
  font-size: 13px;
}

#flash-toggle-dialog p.download-flash,
#flash-toggle-dialog-2 p.download-flash {
  font-size: 12px;
  margin-top: 16px;
  color: #5d5d5d;
}

.buttons-row {
  white-space: nowrap;
  padding: 0 8px;
}

.button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
}

.button-green {
  color: #fff;
  background: #01b22e;
  text-shadow: 1px 1px 0 #666;
}

.button-gray {
  color: #474747;
  background: #d9d9d9;
  text-shadow: 1px 1px 0 #fafafa;
  margin-left: 4px;
}

strong.green {
  color: #01b230;
}

.info-icon {
  display: inline-block;
  margin-left: 20px;
  width: 19px;
  height: 19px;
  padding-top: 1px;
  line-height: 14px;
  font-weight: 700;
  font-size: 14px;
  color: #55afdc;
  border: 2px solid #55afdc;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
}

/*
  Close button
*/

.static-dialog .close {
  position: absolute;
  right: 3px;
  top: 7px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.static-dialog .close-button {
  height: 12px;
  width: 12px;
  position: relative;
  box-sizing: border-box;
  line-height: 12px;
  display: inline-block;
}

.static-dialog .close-button:before, .close-button:after {
  transform: rotate(-45deg);
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5px;
  margin-left: -5.5px;
  display: block;
  height: 2px;
  width: 11px;
  background-color: #e00;
  border-radius: 2px;
}

.static-dialog .close-button:after {
  transform: rotate(-135deg);
}