/* Edit Page */
.yt-thumbnail-sm {
  width: 12rem;
}

.yt-title-link {
  max-width: 60ch;
}


/*  View Page */
.main-container-1col {
  width: 100%;
}

.yt-playlist-wrapper {
  max-width: 62rem;
}

.yt-playlist-wrapper button {
  border-radius: 0;
  border: none !important;
}

.yt-playlist-wrapper button:not(:disabled):hover,
.yt-playlist-wrapper button:not(:disabled):focus-visible {
  outline: 4px solid #4079BA;
  outline-offset: -4px;
}

.yt-playlist-wrapper .yt-playlist-main {
  width: 100%;
  aspect-ratio: 16/9;
}


.yt-playlist-wrapper .yt-playlist-main button {
  position: relative;
}

.yt-playlist-wrapper .yt-playlist-main button span.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.yt-playlist-wrapper .yt-playlist-main button span.play-title {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: -4px;
  width: calc(100% - 8px);
  padding: 1rem;
  background-color: #000;
  color: #fff;
  text-align: left;
  font-size: 1.4rem;
}

.yt-playlist-wrapper .yt-playlist-others {
  display: flex;
}

.yt-playlist-wrapper .yt-playlist-others .ytvideolist {
  width: calc(100% - 6rem);
}

.yt-playlist-wrapper .yt-playlist-others button.prev {
  width: 3rem;
  border: 1px solid #333 !important;
}

.yt-playlist-wrapper .yt-playlist-others button.next {
  width: 3rem;
  border: 1px solid #333 !important;
}

.yt-playlist-wrapper .yt-playlist-others button.prev:disabled,
.yt-playlist-wrapper .yt-playlist-others button.next:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.yt-playlist-wrapper .yt-playlist-others ul {
  overflow: hidden;
  scroll-behavior: smooth;
  gap: 8px;
}

.yt-playlist-wrapper .yt-playlist-others ul li {
  min-width: 200px;
  max-width: 200px;
  list-style: none;
}

.yt-playlist-wrapper .yt-playlist-others ul li button {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.yt-playlist-wrapper .yt-playlist-others ul li button img {
  max-width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.yt-playlist-wrapper .yt-playlist-others ul li button span {
  display: block;
  height: 100%;
  background-color: #000;
  color: #fff;
}

.yt-playlist-wrapper .yt-playlist-others ul li button.playing span {
  border-bottom: 8px solid #4079BA;
}

.yt-playlist-wrapper .yt-playlist-others ul li button *,
.yt-playlist-wrapper .yt-playlist-main button * {
  pointer-events: none;
}

.yt-playlist-wrapper .yt-playlist-main button,
.yt-playlist-wrapper .yt-playlist-main iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.yt-playlist-wrapper .yt-playlist-main button img {
  max-width: 100%;
}