video {
  width: 120px;
}

.parent-div {
  position: relative;
  height: 90px;
}

.top-div {
  position: absolute;
  top: 0;
}

.bottom-div {
  position: absolute;
  bottom: 0;
}

.top-right-div {
  position: absolute;
  top: 0;
  right: 0;
}

.video-btn {
  border: none;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 0;
  height: 16px;
  float: left;
}

.quality-option {
  float: right;
}

.video-btn:hover {
  color: #4d4d4d;
}

.video-btn.top-row {
  margin-top: 0;
  display: inline-flex;
  float: right;
}

.video-btn mat-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 16px;
}

/* Keep the form-field visually compact (16×16 clipped box).
   The CDK overlay uses the Popover API (top layer) so it is
   immune to overflow:hidden and renders at its natural size. */
#max-video-quality {
  width: 16px;
  height: 16px;
  overflow: hidden;
  font-size: 10px;
  font-weight: bold;
}

::ng-deep #max-video-quality .mdc-notched-outline * {
  border-color: transparent !important;
}

::ng-deep #max-video-quality .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}
