@charset "UTF-8";
.uliza-subtitle-list {
  --icon-search: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.138 25.175l-5.929-5.936c1.364-1.858 1.975-4.163 1.713-6.453s-1.381-4.396-3.13-5.898c-1.749-1.501-4.001-2.287-6.304-2.199s-4.489 1.042-6.119 2.672-2.584 3.815-2.672 6.119c-0.088 2.303 0.698 4.555 2.199 6.304s3.608 2.867 5.898 3.13c2.29 0.263 4.595-0.349 6.453-1.713l5.929 5.929 1.962-1.955zM6.542 13.836c0-1.442 0.428-2.852 1.229-4.051s1.94-2.134 3.273-2.686c1.333-0.552 2.799-0.696 4.213-0.415s2.714 0.976 3.733 1.996 1.714 2.32 1.995 3.734c0.281 1.415 0.136 2.881-0.416 4.213s-1.487 2.471-2.687 3.272c-1.199 0.801-2.609 1.228-4.052 1.228-1.931-0.004-3.783-0.773-5.148-2.14s-2.133-3.218-2.135-5.15l-0.007-0.002z"></path></svg>');
  --icon-subtitles: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M4.686 8v16h22.628v-16h-22.628zM6.685 16h5.323v1.999h-5.323v-1.999zM17.999 22.001h-11.314v-2.002h11.314v2.002zM25.314 22.001h-5.323v-2.002h5.323v2.002zM25.314 17.999h-11.314v-1.999h11.314v1.999z"></path></svg>');
}

/* 字幕リストの基底要素の設定 */
.uliza-subtitle-list {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  color: rgb(255, 255, 255);
  background-color: #12131a;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

/* 字幕リストのサイズ計算の設定 */
.uliza-subtitle-list * {
  box-sizing: border-box;
}

.uliza-subtitle-list .search-area::before,
.uliza-subtitle-list .track-area::before,
.uliza-subtitle-list .track-area::after {
  width: 1em;
  height: 100%;
  background-color: #efefef;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* スクロールバー色の設定（Webkit系）*/
.uliza-subtitle-list .cue-list-area::-webkit-scrollbar {
  width: 12px;
  background-color: #12131a;
}

.uliza-subtitle-list .cue-list-area::-webkit-scrollbar-thumb {
  background-color: #444860;
  border-radius: 10px;
  border: 2px #12131a solid;
}

/* ヘッダーの設定 */
.uliza-subtitle-list .header {
  display: flex;
  height: 3.2em;
  padding: 7px 10px;
  flex-shrink: 0;
  align-items: stretch;
  background-color: #1e2032;
}

/* ヘッダー操作を無効にする。 */
.uliza-subtitle-list.linearad-has-started .header,
.uliza-subtitle-list.lock .header,
.uliza-subtitle-list.showing-cta .header {
  pointer-events: none;
}

/* ジャンプ操作を無効にする。 */
.uliza-subtitle-list:not(.has-started) .cue,
.uliza-subtitle-list.linearad-has-started .cue,
.uliza-subtitle-list.lock .cue,
.uliza-subtitle-list.showing-cta .cue {
  pointer-events: none;
}

/* 検索領域の設定 */
.uliza-subtitle-list .search-area {
  display: flex;
  height: 100%;
  padding-left: 10px;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 10;
  align-items: center;
  background: #424459;
}

/* 検索領域のアイコンの設定 */
.uliza-subtitle-list .search-area::before {
  content: "";
  mask-image: var(--icon-search);
  -webkit-mask-image: var(--icon-search);
  background-color: #878aa3;
  width: 18px;
  height: 18px;
}

/* 検索窓の設定 */
.uliza-subtitle-list .search-input {
  width: 100%;
  padding: 8px 10px 8px 6px;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0);
  border: 0px;
  border-radius: 0px;
  outline: none;
  resize: none;
}

/* プレースホルダーの文字色 */
.uliza-subtitle-list .search-input::placeholder {
  color: #868aa3;
}

/* 字幕トラックの選択領域の設定 */
.uliza-subtitle-list .track-area {
  display: flex;
  opacity: 1;
  position: relative;
  min-width: 5em;
  height: 100%;
  margin-left: 8px;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  cursor: pointer;
}

/* 字幕トラックのアイコンの設定 */
.uliza-subtitle-list .track-area::before {
  content: "";
  mask-image: var(--icon-subtitles);
  -webkit-mask-image: var(--icon-subtitles);
  margin: 0px 2px;
  background-color: #878aa3;
  width: 18px;
  height: 18px;
}

/* マウスカーソルホバー時に背景色を変える。*/
.uliza-subtitle-list .track-area.hover {
  background-color: #373950;
}

/* 字幕トラックの選択中トラックの設定 */
.uliza-subtitle-list .select-track {
  margin: 0px 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 字幕トラックのリスト表示領域の設定 */
.uliza-subtitle-list .track-list {
  position: absolute;
  visibility: hidden;
  width: auto;
  min-width: 100%;
  height: 0px;
  top: 100%;
  right: 0px;
  background-color: #12131a;
  border: 1px solid #2c2f46;
  border-top: 0px;
  overflow: hidden;
  transition: height 0.3s ease, visibility 0.3s ease;
  /* スクロールバー色の設定（Firefox）*/
  scrollbar-color: #444960 #12131a;
  scrollbar-width: thin;
}

.uliza-subtitle-list .header.open .track-list {
  visibility: visible;
}

/* 字幕トラックのリスト項目の設定 */
.uliza-subtitle-list .track-item {
  padding: 5px 10px;
  white-space: nowrap;
  cursor: pointer;
}

/* マウスカーソルホバー時に背景色を変える。*/
.uliza-subtitle-list .track-item.hover {
  background-color: #1e2032;
}

/* 字幕のリスト表示領域の設定 */
.uliza-subtitle-list .cue-list-area {
  height: 100%;
  flex-shrink: 1;
  overflow-y: scroll;
  /* スクロールバー色の設定（Firefox）*/
  scrollbar-color: #444960 #12131a;
  scrollbar-width: thin;
}

/* 字幕のリスト項目の設定 */
.uliza-subtitle-list .cue {
  display: flex;
  padding: 8px 14px;
  align-items: baseline;
  color: rgb(255, 255, 255);
  word-break: break-word;
  cursor: pointer;
}

/* 字幕のリスト項目の時間の設定 */
.uliza-subtitle-list .cue::before {
  content: attr(data-start-time);
  margin-right: 16px;
  flex-shrink: 0;
  font-size: 12px;
}

/* マウスカーソルホバー時に背景色を変える。*/
.uliza-subtitle-list .cue.hover {
  background: #1e2032;
}

/* リスト項目の境界に仕切りを表示する。*/
.uliza-subtitle-list .cue + .cue {
  box-sizing: content-box;
  border-top: 1px solid #1e2032;
}

/* active状態の項目の背景色を変える。*/
.uliza-subtitle-list .cue.active {
  background: #373950;
}

/* マウスカーソルホバー時に背景色を変える。*/
.uliza-subtitle-list .cue.active.hover {
  background: #454760;
}

/* 検索にヒットしなかった項目の設定 */
.uliza-subtitle-list .cue.non-hit {
  display: none;
}

/* 字幕のリストがない場合のメッセージの設定 */
.uliza-subtitle-list .no-list-message {
  display: flex;
  padding-top: 30px;
  padding-bottom: 0;
  justify-content: center;
  color: #868aa3;
  cursor: auto;
}

/* 字幕リストの自動スクロールボタン */
.uliza-subtitle-list .auto-scroll-button {
  display: block;
  text-align: center;
  background-color: #373950;
  cursor: pointer;
}

/* 字幕リストの自動スクロールボタンアイコンの設定 */
.uliza-subtitle-list .auto-scroll-button .uliza-icon {
  width: 1em;
  height: 1em;
  font-size: var(--icon-font-size);
  fill: #efefef;
  transform: rotate(90deg);
}

/* マウスカーソルホバー時に背景色を変える */
.uliza-subtitle-list .auto-scroll-button.hover {
  background-color: #454760;
}

/* 自動スクロールが有効な場合の設定 */
.uliza-subtitle-list.auto-scroll .auto-scroll-button {
  display: none;
}

/* 字幕オフな場合の設定 */
.uliza-subtitle-list.selected-off .auto-scroll-button {
  display: none;
}