.able-wrapper {
  margin: 0;
  background: transparent;
  .able {
    background: transparent;
    box-shadow: none;
  }
}
div.able-player {
  position: absolute;
  bottom: 0;
  background: transparent;
  .able-controller {
    background: transparent;
    border: none;
    .able-tooltip,
    .able-clipped {
      display: none !important;
    }
  }
  .able-control-row {
    padding-left: 4px;
  }
  .able-left-controls {
    background: #000000e6;
    border-radius: 4px;
    margin-right: 5px;
  }
  .able-right-controls {
    background: #000000e6;
    border-radius: 4px;
    padding-left: 10px;
  }
  .able-button-handler-play {
    padding: 0 8px;
  }
  .able-status-bar,
  .able-button-handler-preferences,
  .able-button-handler-restart,
  .able-button-handler-rewind,
  .able-button-handler-forward,
  .able-button-handler-slower,
  .able-button-handler-transcript,
  .able-button-handler-faster {
    display: none !important;
  }
  .able-white-controls .able-seekbar {
    border: none;
    background: #ffffff33;
  }
}
.able-wrapper {
  div.able-player {
    .able-controller {
      opacity: 0;
      transition: opacity .35s ease;
    }
  }
  &:hover {
    div.able-player {
      .able-controller {
        opacity: 1;
      }
    }
  }
}

.able-big-play-button {
  svg {
    opacity: 0;
    width: 100% !important;
  }
}

div.able-vidcap-container {
  div.able-captions-wrapper.able-captions-below {
    background: transparent !important;
    position: absolute;
    bottom: 0;
    height: 100%;
    .able-captions {
      background: #000000e6;
      color: #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }
  }
}