/**
 * The challenge here to support "playable queries" and "direction" at the same time and allow mixins like:
 *   @include query(max-width-550())
 *   @include query(max-width-550(), ltr())
 *   @include query(max-width-550(), rtl())
 */
.controlButton {
  display: flex;
  padding: 0;
  cursor: pointer;
  transition-duration: .2s;
  transition-property: opacity;
  opacity: 1;
  border: 0;
  border-radius: 0;
  outline: none;
  background-color: transparent;
  justify-content: center;
  align-items: center; }
  .controlButton:hover {
    opacity: .7; }

.hidden {
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important; }

.container {
  font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, \\30e1\30a4\30ea\30aa, meiryo, \\30d2\30e9\30ae\30ce\89d2\30b4 pro w3, hiragino kaku gothic pro;
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  height: inherit;
  outline: none;
  /**
 * 1. Change the font styles in all browsers.
 * 2. Show the overflow in IE.
 * 3. Remove the margin in Firefox and Safari.
 * 4. Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 5. Correct the inability to style clickable types in iOS and Safari.
 */
  /**
 * Remove the inner border and padding in Firefox.
 */
  /**
 * Restore the focus styles unset by the previous rule.
 */ }
  .container button {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    overflow: visible;
    /* 2 */
    margin: 0;
    /* 3 */
    text-transform: none;
    /* 4 */
    -webkit-appearance: button;
    /* 5 */ }
  .container button::-moz-focus-inner {
    padding: 0;
    border-style: none; }
  .container button:-moz-focusring {
    outline: 1px dotted ButtonText; }

[data-playable-hook='player-container'].container [data-playable-component],
[data-playable-hook='player-container'].container [data-playable-component] *,
[data-playable-hook='player-container'].container [data-playable-component] *:before,
[data-playable-hook='player-container'].container [data-playable-component] *:after {
  box-sizing: content-box !important;
  outline: none !important; }

.fillAllSpace,
.fullScreen {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important; }

:global [data-playable-focus-source='key'] [data-playable-hook='player-container'] button.focus-within,
:global [data-playable-focus-source='key'] [data-playable-hook='player-container'] input.focus-within,
:global [data-playable-focus-source='key'] [data-playable-hook='player-container'] img.focus-within,
:global [data-playable-focus-source='script']
[data-playable-hook='player-container'] button.focus-within,
:global [data-playable-focus-source='script']
[data-playable-hook='player-container'] input.focus-within,
:global [data-playable-focus-source='script']
[data-playable-hook='player-container'] img.focus-within {
  box-shadow: 0 0 0 2px rgba(56, 153, 236, 0.8); }