.control-container,
.control-container-no-background {
  display: none;
  flex-direction: column;
  position: fixed;
}

.control-container {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.controls-top {
  margin-left: 14px;
  margin-right: 14px;
  margin-top: 10px;
}

.controls-bottom {
  display: flex;
  margin-bottom: 4px;
  justify-content: space-between;
  margin-left: 8px;
  margin-right: 8px;
}

.no-outline :focus {
  outline: none;
}

.controls-left {
  display: flex;
}

.controls-right {
  color: #ffffff;
  place-self: center;
  text-align: right;
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
    sans-serif;
  font-size: 14px;
  display: flex;
}

.control-container button {
  border: none;
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  padding: 0px;
}

.control-container-no-background button {
  background-color: rgba(41, 40, 39, 0.6); /* #292827, opacity 60% */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
  margin-left: 17px;
  padding-bottom: 2px;
  padding-left: 0px;
  padding-right: 1px;
  padding-top: 1px;
  scale: 1.2;
}

input[type="range"] {
  height: 4px;
  width: 100%;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  background: #ffffff;
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type="range"]::-moz-range-thumb {
  background: #ffffff;
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  cursor: pointer;
}

input[type="range"]::-ms-thumb {
  background: #ffffff;
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}

.text-formatting {
  color: #ffffff;
  text-align: right;
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
    sans-serif;
  font-size: 14px;
}

.progress-slider {
  background: linear-gradient(to right, #ffffff 0%, #ffffff 1%, #9b9796 1%, #9b9796 100%);
  pointer-events: auto;
  margin: 0px;
  display: block;
  forced-color-adjust: none;
}

.progress-slider:hover {
  cursor: pointer;
}

.volume-container {
  display: flex;
}

.volume-slider-container {
  display: none;
  transform: rotate(-90deg);
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: -75px;
  left: -48px;
  width: 128px;
  height: 32px;
  border-radius: 4px;
}

.volume-slider-container.visible {
  display: flex;
}

.volume-slider {
  place-self: center;
  display: none;
  forced-color-adjust: none;
}

.volume-slider.visible {
  cursor: pointer;
}

.volume-slider:focus-visible {
  display: block;
}

.volume:hover + .volume-slider {
  display: block;
}

.volume:focus-visible + .volume-slider {
  display: block;
}

.current-time-container {
  display: flex;
  margin-left: 8px;
  margin-right: 6px;
}

.speed {
  width: 32px;
  text-align: center;
}

.progress-slider:focus,
.playpause:focus,
.volume:focus,
.volume-slider:focus,
.speed:focus,
.closed-captions-button:focus,
.fullscreen:focus {
  forced-color-adjust: none;

  /* Disable the browser default styling for focus */
  outline: none;
  -webkit-appearance: none;

  /* Use box-shadow to specify 2 outlines for focus.
     One black and one white
     This will contrast well with any color background.
     The inner outline is 2px to ensure compliance with WCAG 2.4.11. */
  box-shadow: 0 0 0 2px black, 0 0 0 3px white;
  -moz-box-shadow: 0 0 0 2px black, 0 0 0 3px white;
  -webkit-box-shadow: 0 0 0 2px black, 0 0 0 3px white;
}

.speed-menu-div,
.closed-captions-menu {
  overflow-y: auto;
  position: absolute;
  right: 8px;
  background-color: rgba(41, 40, 39, 0.8); /* #292827, opacity 80% */
  border-radius: 2px;
}

.speed-menu-div::-webkit-scrollbar,
.closed-captions-menu::-webkit-scrollbar {
  width: 4px;
  border-radius: 10px;
}

.speed-menu-div::-webkit-scrollbar-thumb,
.closed-captions-menu::-webkit-scrollbar-thumb {
  background-color: #8a8886;
  border-radius: 10px;
}

.speed-menu {
  position: absolute;
  right: 0px;
  opacity: 0.8;
  border-radius: 2px;
}

.speed-menu-option {
  text-align: left;
  color: "#F3F2F1"; /*Font color*/
  padding-top: 9px; /*Equivalent to 36px total height*/
  padding-bottom: 9px;
  padding-left: 32px;
  padding-right: 20px;
  fill-opacity: 0.8;
  background: "none";
}

.captions-render-container {
  -webkit-text-size-adjust: 100%; /*Prevent iOS Safari from automatically resizing font*/
}

.invisible {
  visibility: hidden;
}

.captions-gfxicon.invisible,
.captions-active-gfxicon.invisible {
  display: none !important;
}

.visible {
  display: block;
}

svg[class*="-gfxicon"] {
  display: inline-block;
  vertical-align: middle;
}

@media (forced-colors: active) {
  .play-pause-gfxicon path,
  .volume-gfxicon path,
  .captions-gfxicon path,
  .captions-active-gfxicon path,
  .captions-active-gfxicon rect,
  .fullscreen path,
  .checkmark-gfxicon path {
    fill: ButtonText;
  }

  .controls-right {
    forced-color-adjust: none;
  }

  .control-container,
  .speed-menu-div,
  .closed-captions-menu {
    background-color: ButtonFace;
  }

  .text-formatting {
    color: ButtonText;
  }
}