html {
  box-sizing: border-box;
  cursor: auto;
  font-size: 62.5%;
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;

  color: #e1e4e6;
  font-size: 1.2em;
  height: 100%;
  line-height: 1;
  overflow: hidden;
}

body.is-mobile {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* reset css */
*,
*::before,
*::after {
  box-sizing: inherit;
}

button,
input,
select,
textarea,
form {
  border: none;
  font-weight: inherit;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  border: none;
  text-decoration: none;
}

dd {
  margin: 0;
}

/*
 * ==================================
 * 共通アニメーション
 * ==================================
 */

.common-hover {
  transition: all 200ms ease;
}

.common-hover:hover {
  opacity: 1;
}

.text-hover {
  transition: all 200ms ease;
}

.text-hover:hover {
  opacity: 0.8;
}

.common-transition,
.common-transition::before,
.common-transition::after {
  transition: all 200ms ease;
}

/*
 * ==================================
 * Common circle loader
 * ==================================
 */

/* 直径であるwidth, heightはソースコードで記述する */
.loader-circle {
  position: relative;
  display: inline-block;
  margin: 0 12.5% 100px;
  border: solid #fff;
  border-radius: 50%;

  animation: loader-circle-spin 0.75s infinite linear;
}

.loader-circle::before,
.loader-circle::after {
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

/* loader-circleとセットでクラス名に付与する */
.loader-circle-one-more,
.loader-circle-one-more::before {
  display: inline-block;
  border-color: transparent;
  border-top-color: #fff;
}

.loader-circle-one-more::before {
  animation: loader-circle-spin 1.5s infinite ease;
}

@keyframes loader-circle-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*
 * ==================================
 * Common visiblity
 * ==================================
 */
.is-hidden.is-hidden {
  visibility: hidden;
}

.is-visible.is-visible {
  visibility: visible;
}

.is-display-none.is-display-none {
  display: none;
}

/*
 * ==================================
 * Common size
 * ==================================
 */

.width100.width100 {
  width: 100%;
}

.height100.height100 {
  height: 100%;
}

/*
 * ==================================
 * Common opacity
 * ==================================
 */

.opacity0.opacity0 {
  opacity: 0;
}

.opacity20.opacity20 {
  opacity: 0.2;
}

.opacity40.opacity40 {
  opacity: 0.4;
}

.opacity60.opacity60 {
  opacity: 0.6;
}

.opacity100.opacity100 {
  opacity: 1;
}

/*
 * ==================================
 * Common cursor
 * ==================================
 */

.cursor-pointer.cursor-pointer {
  cursor: pointer;
}

.cursor-none.cursor-none {
  cursor: none;
}

.pointer-event-auto.pointer-event-auto {
  pointer-events: auto;
}

.pointer-event-none.pointer-event-none {
  pointer-events: none;
}

/*
 * ==================================
 * Common rotate
 * ==================================
 */

.rotate90.rotate90 {
  transform: rotate(90deg);
}

.rotate180.rotate180 {
  transform: rotate(180deg);
}

.rotate270.rotate270 {
  transform: rotate(270deg);
}

/*
 * ==================================
 * Common form
 * ==================================
 */

.form-error.form-error {
  border: solid 1px #ff4c11;
}

/*
 * ==================================
 * Common Background color
 * ==================================
 */

.bg-black.bg-black {
  background-color: #000;
}

/*
 * ==================================
 * Common Text
 * ==================================
 */

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 1px 0;
}

/*
 * ==================================
 * Common Button
 * ==================================
 */

.button-disabled {
  cursor: default;
  pointer-events: none;
}

/*
 * ==================================
 * Common Others
 * ==================================
 */

/**
 * will-changeプロパティを使用して、ハードウェアアクセラレーターを有効にする
 */
.will-change-transform.will-change-transform {
  will-change: transform;
}

.flex-justify-content-flex-end.flex-justify-content-flex-end {
  justify-content: flex-end;
}

.align-items-center.align-items-center {
  align-items: center;
}

.display-flex.display-flex {
  display: flex;
}

.overflow-hidden.overflow-hidden {
  overflow: hidden;
}

/*
 * ==================================
 * Skin color set
 * ==================================
 */

/* skin black */
.skin-black .skin10 {
  /* background-color: rgba(35, 35, 35, 0.95); */
  background-color: #232323;
}

.skin-black .skin20 {
  /* background-color: rgba(50, 50, 50, 0.95); */
  background-color: #323232;
}

/* skin blue */
.skin-blue .skin10 {
  /* background-color: rgba(8, 35, 55, 0.95); */
  background-color: #082337;
}

.skin-blue .skin20 {
  /* background-color: rgba(25, 50, 69, 0.95); */
  background-color: #193245;
}

/* skin purple */
.skin-purple .skin10 {
  /* background-color: rgba(28, 26, 46, 0.95); */
  background-color: #1c1a2e;
}

.skin-purple .skin20 {
  /* background-color: rgba(44, 42, 60, 0.95); */
  background-color: #2c2a3c;
}

.or-reactdatepicker-wrapper {
  display: inherit;
}

/*
 * ==================================
 * reCAPTCHA enterprise
 * ==================================
 */
.grecaptcha-badge {
  visibility: hidden;
}

/*
 * ==================================
 * Chrome
 * - Chromeブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/*
 * chrome ver 76.0
 * シアターモードから通常のプレイヤーに戻す際の表示崩れ対応。
 * https://github.com/openrec/openrec-tv/pull/1282
 */
.is-chrome .player-wrapper-resize {
  width: calc(100% - 1px);
}

/*
 * ==================================
 * Internet Explorer
 * - Internet Explorerブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/*
 * ==================================
 * Dialog
 * ==================================
 */

.is-ie .dialog-controller {
  height: 100%;
}

/*
 * ==================================
 * capture embed
 * ==================================
 */

.is-capture-embed .header.header {
  display: none;
}

.is-capture-embed .page-wrapper {
  padding-top: 0;
}

/*
 * ==================================
 * Mobile Device
 * - URLに/m/が付与されている、モバイル専用のCommon CSS
 * ==================================
 */

/*
 Mobileデバイスの際に、一律noneにするセレクタ
 各コンポーネントにて、Mobileでの挙動がnoneのみは場合はこちらを使用する
 */
.is-mobile .display-none-when-mobile {
  display: none;
}

/*
 * ==================================
 * Small display size
 * - ディスプレイサイズ小の対応
 * ==================================
 */

/*
 ディスプレイサイズ小の際に、一律非表示にするセレクタ
 ※ 各コンポーネントにて、小サイズでの挙動が非表示のみは場合はこちらを使用する
 */
.is-small-display .display-none-when-small-display {
  display: none;
}

/*
 ディスプレイサイズ小の際に、一律表示にするセレクタ
 */
.is-small-display .display-block-when-small-display {
  display: block;
}

/*
 ディスプレイサイズ小の際に、一律Flexにするセレクタ
 */
.is-small-display .display-flex-when-small-display {
  display: flex;
}

/*
 * ==================================
 * League rank page
 * - SSR時のガタツキを減らすためにcssでスタイルを調整する
 * ==================================
 */

/* チャットポップアウト時のheaderのスタイル */
.is-league-rank-page .header.header {
  display: none;
}

.is-league-rank-page .page-wrapper {
  padding-top: 0;
}

/*
 * ==================================
 * Movie page for mobile device
 * - URLに/m/が付与されている、モバイルかつ再生ページ専用のCSS
 * ==================================
 */

/* モバイルページでは、チャット欄を非表示にする */
.is-mobile .movie-page-article {
  margin-right: 0;
}

/* モバイルページでは、チャット欄を非表示にする */
.is-mobile .movie-page-chat-aside {
  display: none;
}

/*
 * ==================================
 * Movie page player rotation
 * - プレイヤーが回転した際のサイズを調整する
 * ==================================
 */
.video-rotate90 .openrec-video {
  transform: rotate(90deg);
}

.video-rotate180 .openrec-video {
  transform: rotate(180deg);
}

.video-rotate270 .openrec-video {
  transform: rotate(270deg);
}

/* video要素が90度または270度に回転した際のvideoのstyle */
.video-rotate90 .openrec-video,
.video-rotate270 .openrec-video {
  height: calc(100% * 16 / 9);
  width: calc(100% / 16 * 9);
  margin-left: calc(50% - (100% / 16 * 9) / 2);
}

/*
 * SSR時のガタツキを減らすためにcssでchat popoutのスタイルを調整する
 *
 *
 *
 * ==================================
 * movie page チャットpopout
 * ==================================
 */

/* チャットポップアウト時のheaderのスタイル */
.is-movie-page-chat-popout .header.header {
  display: none;
}

.is-movie-page-chat-popout .movie-page-chat-aside.movie-page-chat-aside {
  top: 0;
  left: 0;
  height: 100vh;
}

/*
 * ==================================
 * movie page エクステンションポップアウト
 * ==================================
 */
.is-movie-page-extension-popout .header.header {
  display: none;
}

.is-movie-page-extension-popout .movie-page-chat-aside.movie-page-chat-aside {
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/*
 * ==================================
 * Small display size for movie page
 * - 再生ページ専用のディスプレイサイズ小の対応
 * ==================================
 */

/* ディスプレイサイズ小では、チャット欄を非表示にする */
.is-small-display .movie-page-article {
  margin-right: 0;
}

/* ディスプレイサイズ小では、チャット欄を非表示にする */
.is-small-display .movie-page-chat-aside {
  display: none;
}

/* ディスプレイサイズ小では、各種CSSを調整する */
.is-small-display .movie-meta-content-description-wrapper {
  margin-top: 0;
}

/* ディスプレイサイズ小でも、シアターモードのときにはチャット欄を表示する */
.is-small-display.is-movie-page-theater-mode .movie-page-chat-aside {
  display: block;
}

/* チャットポップアウトでは、チャットを表示する */
.is-movie-page-chat-popout .movie-page-chat-aside.movie-page-chat-aside {
  display: block;
}

/* ディスプレイサイズ小では、配信者通知を非表示にする */
.is-small-display:not(.is-movie-page-chat-popout) .movie-page-split-view {
  display: none;
}

/* 配信者通知ポップアウトでは、通知を表示する */
.is-movie-page-split-view-popout .movie-page-split-view.movie-page-split-view {
  display: block;
}

/*
 * ==================================
 * Movie page theater mode
 * - SSRではnormal mode固定のため、ガタツキを減らすためにcssでtheater modeのスタイルを調整する
 * ==================================
 */

/* commons */
.movie-page-theater-mode-transition {
  transition: all 500ms ease;
}

/* シアターモード時のheaderのスタイル */
.is-movie-page-theater-mode .header {
  transition: all 500ms ease;
}

/*
 * シアターモード時のheaderのスタイル
 * - スクロールされていた場合は、非表示にしない
 */
.is-movie-page-theater-mode.movie-page-user-inactive.is-movie-page-top .header {
  opacity: 0;
  pointer-events: none;
}

.is-movie-page-theater-mode.movie-page-user-inactive.is-movie-page-top .header.is-search-input-focus {
  opacity: 1;
  pointer-events: auto;
}

/* page */
.is-movie-page-theater-mode .page-wrapper {
  padding-top: 0;
}

/* player */
.is-movie-page-theater-mode .video-player-wrapper {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
}

/* page article */
.is-movie-page-theater-mode .movie-page-article {
  position: relative;
  margin-right: 0;
  max-height: 100vh;
}

/* chat aside */
.is-movie-page-theater-mode .movie-page-chat-aside {
  background-image: none;
  position: absolute;
  top: 0;
  transition: 500ms ease;
  transition-property: top, height;
  height: 100vh;
}

/* chat aside */
.is-movie-page-theater-mode.movie-page-user-active .movie-page-chat-aside {
  position: absolute;
  top: 5.6rem;
  height: calc(100vh - 11rem);
}

/* chat aside */
.is-movie-page-theater-mode.is-movie-page-existed-chat-moderator .movie-page-chat-aside {
  top: 5.6rem;
  height: calc(100vh - 5.6rem);
}

/* chat aside */
.is-movie-page-theater-mode.is-movie-page-existed-chat-moderator.movie-page-user-active .movie-page-chat-aside {
  top: 11.2rem;
  height: calc(100vh - 16.6rem);
}

/* chat scrollbars none */
.is-movie-page-theater-mode .movie-page-chat-aside .infinity-scroll-list {
  -ms-overflow-style: none;
}

.is-movie-page-theater-mode .movie-page-chat-aside .infinity-scroll-list::-webkit-scrollbar {
  display: none;
}

/* input area */
.is-movie-page-theater-mode .chat-input-area {
  display: none;
}

/* chat rule */
.is-movie-page-theater-mode .chat-menu {
  display: none;
}

/* chat aside */
.is-movie-page-theater-mode .movie-page-chat-moderator {
  position: absolute;
  top: -5.6rem;
  width: 100%;
  transform: translateY(5.6rem);
  transition: 500ms ease;
  transition-property: top, height;
}

/* chat aside */
.is-movie-page-theater-mode.movie-page-user-active .movie-page-chat-moderator {
  position: absolute;
  top: 0;
  transform: translateY(5.6rem);
}

/* theater input area */
.theater-input-area.theater-input-area {
  display: none;
}

/* theater input area */
.is-movie-page-theater-mode .theater-input-area.theater-input-area {
  display: block;
}

.is-movie-page-theater-mode .theater-mode-enter-icon.theater-mode-enter-icon {
  display: none;
}

.is-movie-page-theater-mode .theater-mode-exit-icon.theater-mode-exit-icon {
  display: block;
}

.chat-icon-wrapper.chat-icon-wrapper {
  display: none;
}

.is-movie-page-theater-mode .chat-icon-wrapper.chat-icon-wrapper {
  display: block;
}

.is-movie-page-theater-mode .chat-icon {
  display: block;
}

.is-movie-page-theater-mode.movie-page-user-active .controlbar-wrapper {
  display: block;
  opacity: 1;
}

/* theater chat */
.is-movie-page-theater-mode .chat-cell-wrapper {
  color: #fff;
}

.is-movie-page-theater-mode .chat-cell {
  background: rgba(10, 4, 36, 0.5);
}

.is-movie-page-theater-mode .chat-content {
  color: #fff;
}

/* theater capture chat */
.is-movie-page-theater-mode .capture-chat {
  background: rgba(10, 4, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.is-movie-page-theater-mode .capture-chat .capture-chat-message {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

.is-movie-page-theater-mode .capture-chat .capture-chat-title {
  color: #fff;
}

/*
  theater system chat
  チャットを配信画面に表示するために、ユーザーがcssで調整できるようにsystem-chat-cell-wrapperのクラスは残す
*/
.is-movie-page-theater-mode .system-chat-cell-wrapper {
  color: #e4e3e8;
  background: rgba(10, 4, 36, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-base {
  color: #e4e3e8;
  background: rgba(10, 4, 36, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-blue {
  color: #fff;
  background-color: rgba(60, 37, 191, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-red {
  color: #fff;
  background-color: rgba(198, 8, 8, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-white-strong {
  color: #000;
  background-color: rgba(255, 255, 255, 0.61);
}

.is-movie-page-theater-mode .system-chat-cell-content {
  color: #e4e3e8;
}

/* theater yell chat */
.is-movie-page-theater-mode .yell-label-content {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/*
 * ==================================
 * Firefox
 * - Firefoxブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/* firefoxでは作られない擬似クラスを無効化しバグを回避
   PR: https://github.com/openrec/openrec-tv/pull/3735#issuecomment-883056785 */
.is-firefox input::before,
.is-firefox input::after,
.is-firefox select::before,
.is-firefox select::after {
  display: none !important;
}

/*
 * ==================================
 * Chat
 * ==================================
 */

.is-firefox .chat-content {
  display: inline-block;
}

.is-firefox.is-movie-page-theater-mode .infinity-scroll-list {
  width: calc(100% + 2rem);
}

.is-firefox.is-movie-page-theater-mode .chat-list-content {
  width: 36rem;
}

/*
 * ==================================
 * Internet Explorer
 * - Internet Explorerブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/*
 * ==================================
 * Chat
 * ==================================
 */

.is-ie .chat-content {
  display: inline-block;
}

.is-ie .chat-cell {
  width: 100%;
}

/*
 * ==================================
 * Windows
 * - Windowsでのみ適用するスタイルを定義
 * ==================================
 */

.is-windows * {
  font-weight: normal !important;
}

/*
 * ==================================
 * スクロールバー
 * ==================================
 */

.is-windows *::-webkit-scrollbar {
  width: 0.9rem;
  height: 0.9rem;
}

.is-windows *::-webkit-scrollbar-thumb {
  border: solid 1px rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.is-windows *::-webkit-scrollbar-corner {
  display: none;
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  /* FillButton */
  --or_theme_atoms-fillButton_default: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_primary: var(--or_color_bg-bottom_dark);
  --or_theme_atoms-fillButton_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_muted: var(--or_color_text-strong_dark);
  --or_theme_atoms-fillButton_disabled: var(--or_color_text-placeholder_dark);
  --or_theme_atoms-fillButton_deregister: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_facebook: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_twitter: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_google: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_yahoo: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_cancel: var(--or_color_alpha-white_60);
  --or_theme_atoms-fillButton_like: var(--or_color_yellow_80);
  --or_theme_atoms-fillButton_capture: var(--or_color_red_60);
  --or_theme_atoms-fillButton_app: var(--or_color_accent_light);
  --or_theme_atoms-fillButton_danger: var(--or_color_white);
  --or_theme_atoms-fillButton-background_default: var(--or_color_white);
  --or_theme_atoms-fillButton-background_primary: var(--or_color_accent_dark);
  --or_theme_atoms-fillButton-background_secondary: var(--or_color_live_dark);
  --or_theme_atoms-fillButton-background_tertiary: var(--or_color_premium_dark);
  --or_theme_atoms-fillButton-background_muted: var(--or_color_alpha-2_dark);
  --or_theme_atoms-fillButton-background_disabled: var(--or_color_alpha-2_dark);
  --or_theme_atoms-fillButton-background_deregister: var(--or_color_alpha-white_10);
  --or_theme_atoms-fillButton-background_facebook: var(--facebook-blue);
  --or_theme_atoms-fillButton-background_x: var(--x-black);
  --or_theme_atoms-fillButton-background_google: var(--google-white);
  --or_theme_atoms-fillButton-background_yahoo: var(--yahoo-red);
  --or_theme_atoms-fillButton-background_cancel: var(--or_color_alpha-yellow_80);
  --or_theme_atoms-fillButton-background_like: var(--or_color_alpha-white_10);
  --or_theme_atoms-fillButton-background_capture: var(--or_color_light_10);
  --or_theme_atoms-fillButton-background_app: var(--or_color_white);
  --or_theme_atoms-fillButton-background_danger: var(--or_color_danger);

  /* OutlineButton */
  --or_theme_atoms-outlineButton_default: var(--or_color_text-base_dark);
  --or_theme_atoms-outlineButton_primary: var(--or_color_accent_dark);
  --or_theme_atoms-outlineButton_secondary: var(--or_color_live_dark);
  --or_theme_atoms-outlineButton_tertiary: var(--or_color_text-premium_dark);
  --or_theme_atoms-outlineButton_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton_disabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-outlineButton_white: var(--or_color_white);
  --or_theme_atoms-outlineButton-border_default: var(--or_color_frame_dark);
  --or_theme_atoms-outlineButton-border_primary: var(--or_color_accent_dark);
  --or_theme_atoms-outlineButton-border_secondary: var(--or_color_live_dark);
  --or_theme_atoms-outlineButton-border_tertiary: var(--or_color_text-premium_dark);
  --or_theme_atoms-outlineButton-border_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton-border_disabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-outlineButton-border_white: var(--or_color_white);

  /* TextButton */
  --or_theme_atoms-textButton_default: var(--or_color_white-text_0);
  --or_theme_atoms-textButton_primary: var(---or_color_yellow_60);
  --or_theme_atoms-textButton_weakly: var(--or_color_white-text_20);

  /* TrimBar */
  --or_theme_atoms-trimBar: var(--or_color_yellow_60);

  /* FillLabel */
  --or_theme_atoms-label_default: '';
  --or_theme_atoms-label_primary: var(--or_color_black-text_20);
  --or_theme_atoms-label_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-label_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-label_tertiaryDisabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-label-background_default: var(--or_color_alpha-white_10);
  --or_theme_atoms-label-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-label-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-label-background_tertiary: var(--or_color_premium_dark);
  --or_theme_atoms-label-background_tertiaryDisabled: var(--or_color_blue_40);

  /* ReactionLabel */
  --or_theme_atoms-reactionLabel: var(--or_color_white-text_0);

  /* TextLabel */
  --or_theme_atoms-textLabel_default: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_primary: var(--or_color_black-text_20);
  --or_theme_atoms-textLabel_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_weakly: var(--or_color_black-text_20);
  --or_theme_atoms-textLabel-background_default: var(--or_color_alpha-black_40);
  --or_theme_atoms-textLabel-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-textLabel-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-textLabel-background_tertiary: var(--or_color_premium_dark);
  --or_theme_atoms-textLabel-background_weakly: var(--or_color_alpha-white_80);

  /* TextList */
  --or_theme_atoms-textList_default: var(--or_color_text-base_dark);
  --or_theme_atoms-textList_movie: var(--or_color_text-strong_dark);
  --or_theme_atoms-textList_primary: var(--or_color_text-strong_dark);
  --or_theme_atoms-textList-background_default: var(--or_color_bg-top_dark);
  --or_theme_atoms-textList-background_movie: var(--or_color_alpha-black_80);
  --or_theme_atoms-textList-background_primary: var(--or_color_dark_60);

  /* Balloontip */
  --or_theme_atoms-balloontip-background_default: var(--or_color_bg-top_dark);
  --or_theme_atoms-balloontip-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-balloontip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-balloontip-background_tertiary: var(--or_color_blue_40);

  /* SystemMessage */
  --or_theme_atoms-systemMessage_default: var(--or_color_black-text_20);
  --or_theme_atoms-systemMessage_primary: var(--or_color_text-strong_light);
  --or_theme_atoms-systemMessage_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage-background_default: var(--or_color_alpha-white_80);
  --or_theme_atoms-systemMessage-background_primary: var(--or_color_accent_dark);
  --or_theme_atoms-systemMessage-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-systemMessage-background_tertiary: var(--or_color_blue_40);
  --or_theme_atoms-systemMessage-background_blue_60: var(--or_color_blue_60);

  /* SystemChat */
  --or_theme_atoms-systemChat-color_base: var(--or_color_text-weak_dark);
  --or_theme_atoms-systemChat-background_base: var(--or_color_bg-base_dark);
  --or_theme_atoms-systemChat-color_red: #ffbebe;
  --or_theme_atoms-systemChat-background_red: rgba(240, 0, 0, 0.2);
  --or_theme_atoms-systemChat-color_blue: #bfb3ff;
  --or_theme_atoms-systemChat-background_blue: rgba(99, 79, 197, 0.2);
  --or_theme_atoms-systemChat-color_white-strong: #fff;
  --or_theme_atoms-systemChat-background_white-strong: #343145;

  /* Tooltip */
  --or_theme_atoms-tooltip_default: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_primary: var(--or_color_black-text_20);
  --or_theme_atoms-tooltip_secondary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_atoms-tooltip-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-tooltip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-tooltip-background_tertiary: var(--or_color_blue_40);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  /* FillButton */
  --or_theme_atoms-fillButton_default: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_primary: var(--or_color_text-strong_dark);
  --or_theme_atoms-fillButton_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_muted: var(--or_color_text-strong_light);
  --or_theme_atoms-fillButton_disabled: var(--or_color_text-placeholder_light);
  --or_theme_atoms-fillButton_deregister: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_facebook: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_twitter: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_google: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_yahoo: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_cancel: var(--or_color_alpha-white_60);
  --or_theme_atoms-fillButton_like: var(--or_color_yellow_80);
  --or_theme_atoms-fillButton_capture: var(--or_color_red_60);
  --or_theme_atoms-fillButton_app: var(--or_color_accent_light);
  --or_theme_atoms-fillButton_danger: var(--or_color_white);
  --or_theme_atoms-fillButton-background_default: var(--or_color_white);
  --or_theme_atoms-fillButton-background_primary: var(--or_color_accent_light);
  --or_theme_atoms-fillButton-background_secondary: var(--or_color_live_dark);
  --or_theme_atoms-fillButton-background_tertiary: var(--or_color_premium_light);
  --or_theme_atoms-fillButton-background_muted: var(--or_color_alpha-2_light);
  --or_theme_atoms-fillButton-background_disabled: var(--or_color_alpha-2_light);
  --or_theme_atoms-fillButton-background_deregister: var(--or_color_alpha-black_50);
  --or_theme_atoms-fillButton-background_facebook: var(--facebook-blue);
  --or_theme_atoms-fillButton-background_x: var(--x-black);
  --or_theme_atoms-fillButton-background_google: var(--google-white);
  --or_theme_atoms-fillButton-background_yahoo: var(--yahoo-red);
  --or_theme_atoms-fillButton-background_cancel: var(--or_color_alpha-yellow_80);
  --or_theme_atoms-fillButton-background_like: var(--or_color_alpha-white_10);
  --or_theme_atoms-fillButton-background_capture: var(--or_color_light_10);
  --or_theme_atoms-fillButton-background_app: var(--or_color_white);
  --or_theme_atoms-fillButton-background_danger: var(--or_color_danger);

  /* OutlineButton */
  --or_theme_atoms-outlineButton_default: var(--or_color_text-base_light);
  --or_theme_atoms-outlineButton_primary: var(--or_color_accent_light);
  --or_theme_atoms-outlineButton_secondary: var(--or_color_live_light);
  --or_theme_atoms-outlineButton_tertiary: var(--or_color_text-premium_light);
  --or_theme_atoms-outlineButton_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton_disabled: var(--or_color_alpha-black_10);
  --or_theme_atoms-outlineButton_white: var(--or_color_white);
  --or_theme_atoms-outlineButton-border_default: var(--or_color_frame_light);
  --or_theme_atoms-outlineButton-border_primary: var(--or_color_accent_light);
  --or_theme_atoms-outlineButton-border_secondary: var(--or_color_live_light);
  --or_theme_atoms-outlineButton-border_tertiary: var(--or_color_text-premium_light);
  --or_theme_atoms-outlineButton-border_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton-border_disabled: var(--or_color_alpha-black_10);
  --or_theme_atoms-outlineButton-border_white: var(--or_color_white);

  /* TextButton */
  --or_theme_atoms-textButton_default: var(--or_color_black-text_20);
  --or_theme_atoms-textButton_primary: var(---or_color_yellow_60);
  --or_theme_atoms-textButton_weakly: var(--or_color_black-text_20);

  /* TrimBar */
  --or_theme_atoms-trimBar: var(--or_color_yellow_80);

  /* FillLabel */
  --or_theme_atoms-label_default: '';
  --or_theme_atoms-label_primary: var(--or_color_black-text_20);
  --or_theme_atoms-label_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-label_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-label_tertiaryDisabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-label-background_default: var(--or_color_alpha-white_10);
  --or_theme_atoms-label-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-label-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-label-background_tertiary: var(--or_color_premium_light);
  --or_theme_atoms-label-background_tertiaryDisabled: var(--or_color_blue_60);

  /* ReactionLabel */
  --or_theme_atoms-reactionLabel: var(--or_color_black-text_40);

  /* TextLabel */
  --or_theme_atoms-textLabel_default: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_primary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_weakly: var(--or_color_black-text_20);
  --or_theme_atoms-textLabel-background_default: var(--or_color_alpha-black_40);
  --or_theme_atoms-textLabel-background_primary: var(--or_color_yellow_80);
  --or_theme_atoms-textLabel-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-textLabel-background_tertiary: var(--or_color_premium_light);
  --or_theme_atoms-textLabel-background_weakly: var(--or_color_alpha-white_80);

  /* TextList */
  --or_theme_atoms-textList_default: var(--or_color_text-base_light);
  --or_theme_atoms-textList_movie: var(--or_color_text-strong_dark);
  --or_theme_atoms-textList_primary: var(--or_color_text-strong_light);
  --or_theme_atoms-textList-background_default: var(--or_color_bg-top_light);
  --or_theme_atoms-textList-background_movie: var(--or_color_alpha-black_80);
  --or_theme_atoms-textList-background_primary: var(--or_color_light_30);

  /* Balloontip */
  --or_theme_atoms-balloontip-background_default: var(--or_color_bg-top_light);
  --or_theme_atoms-balloontip-background_primary: var(--or_color_yellow_80);
  --or_theme_atoms-balloontip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-balloontip-background_tertiary: var(--or_color_blue_60);

  /* SystemMessage */
  --or_theme_atoms-systemMessage_default: var(--or_color_black-text_20);
  --or_theme_atoms-systemMessage_primary: var(--or_color_text-strong_light);
  --or_theme_atoms-systemMessage_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage-background_default: var(--or_color_alpha-white_80);
  --or_theme_atoms-systemMessage-background_primary: var(--or_color_accent_light);
  --or_theme_atoms-systemMessage-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-systemMessage-background_tertiary: var(--or_color_blue_60);
  --or_theme_atoms-systemMessage-background_blue_60: var(--or_color_blue_60);

  /* SystemChat */
  --or_theme_atoms-systemChat-color_base: var(--or_color_text-weak_light);
  --or_theme_atoms-systemChat-background_base: var(--or_color_bg-base_light);
  --or_theme_atoms-systemChat-color_red: #ff3636;
  --or_theme_atoms-systemChat-background_red: rgba(240, 0, 0, 0.05);
  --or_theme_atoms-systemChat-color_blue: #5436ff;
  --or_theme_atoms-systemChat-background_blue: rgba(216, 208, 255, 0.3);
  --or_theme_atoms-systemChat-color_white-strong: #57517a;
  --or_theme_atoms-systemChat-background_white-strong: #fff;

  /* Tooltip */
  --or_theme_atoms-tooltip_default: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_primary: var(--or_color_black-text_20);
  --or_theme_atoms-tooltip_secondary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_atoms-tooltip-background_primary: var(--or_color_yellow_80);
  --or_theme_atoms-tooltip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-tooltip-background_tertiary: var(--or_color_blue_60);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  --or_theme_captureEdit-controller-background: var(--or_color_dark_50);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  --or_theme_captureEdit-controller-background: var(--or_color_light_20);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  --or_theme_capturePlay-chatCell-background: var(--or_color_alpha-white_10);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  --or_theme_capturePlay-chatCell-background: var(--or_color_white);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  /* BlacklistSetting */
  --or_theme_molecules-chatSetting-input-background: var(--or_color_alpha-white_10);
  --or_theme_molecules-chatSetting-section: var(--or_color_white-text_20);

  /* InputArea */
  --or_theme_molecules-inputArea-background_default: var(--or_color_bg-base_dark);
  --or_theme_molecules-inputArea-background_chatModerator: var(--or_color_bg-base_dark);
  --or_theme_molecules-inputArea-background_yell: var(--or_color_bg-base_dark);
  --or_theme_molecules-inputArea-input-background_default: var(--or_color_bg-upper-2_dark);
  --or_theme_molecules-inputArea-input-background_chatModerator: var(--or_color_bg-upper-2_dark);
  --or_theme_molecules-inputArea-input-background_yell: var(--or_color_bg-upper-2_dark);
  --or_theme_molecules-inputArea-input-placeholder_default: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-input-placeholder_chatModerator: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-input-placeholder_yell: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-input-hover-placeholder_default: var(--or_color_white-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_chatModerator: var(--or_color_white-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_yell: var(--or_color_white-text_20);
  --or_theme_molecules-inputArea-input-focus-placeholder_default: var(--or_color_white-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_chatModerator: var(--or_color_white-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_yell: var(--or_color_white-text_60);
  --or_theme_molecules-inputArea-textCounter_default: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-textCounter_chatModerator: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-textCounter_yell: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-telop-border_default: var(--or_color_yellow_60);
  --or_theme_molecules-inputArea-telop-border_chatModerator: '';
  --or_theme_molecules-inputArea-telop-border_yell: '';

  /* Setting */
  --or_theme_molecules-chatSetting-section-title: var(--or_color_white-text_20);

  /* Dialog */
  --or_theme_molecules-dialog-input-background: var(--or_color_dark_60);

  /* StampDialog */
  --or_theme_molecules-stampDialog-border: var(--or_color_alpha-white_20);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  /* BlacklistSetting */
  --or_theme_molecules-chatSetting-input-background: var(--or_color_alpha-white_60);
  --or_theme_molecules-chatSetting-section: var(--or_color_black-text_40);

  /* InputArea */
  --or_theme_molecules-inputArea-background_default: var(--or_color_bg-base_light);
  --or_theme_molecules-inputArea-background_chatModerator: var(--or_color_bg-base_light);
  --or_theme_molecules-inputArea-background_yell: var(--or_color_bg-base_light);
  --or_theme_molecules-inputArea-input-background_default: var(--or_color_bg-upper-2_light);
  --or_theme_molecules-inputArea-input-background_chatModerator: var(--or_color_bg-upper-2_light);
  --or_theme_molecules-inputArea-input-background_yell: var(--or_color_bg-upper-2_light);
  --or_theme_molecules-inputArea-input-placeholder_default: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-input-placeholder_chatModerator: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-input-placeholder_yell: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-input-hover-placeholder_default: var(--or_color_black-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_chatModerator: var(--or_color_black-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_yell: var(---or_color_black-text_20);
  --or_theme_molecules-inputArea-input-focus-placeholder_default: var(--or_color_black-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_chatModerator: var(--or_color_black-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_yell: var(--or_color_black-text_60);
  --or_theme_molecules-inputArea-textCounter_default: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-textCounter_chatModerator: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-textCounter_yell: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-telop-border_default: var(--or_color_yellow_80);
  --or_theme_molecules-inputArea-telop-border_chatModerator: '';
  --or_theme_molecules-inputArea-telop-border_yell: '';

  /* Setting */
  --or_theme_molecules-chatSetting-section-title: var(--or_color_black-text_40);

  /* Dialog */
  --or_theme_molecules-dialog-input-background: var(--or_color_light_50);

  /* StampDialog */
  --or_theme_molecules-stampDialog-border: var(--or_color_alpha-black_40);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  --or_theme_movie-movieToolbar-startDate: var(--or_color_yellow_60);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  --or_theme_movie-movieToolbar-startDate: var(--or_color_yellow_80);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  /* Tooltip */
  --or_theme_organisms-tooltip_default: var(--or_color_text-base_dark);
  --or_theme_organisms-tooltip_primary: var(--or_color_yellow_60);
  --or_theme_organisms-tooltip_secondary: var(--or_color_red_60);
  --or_theme_organisms-tooltip_tertiary: var(--or_color_blue_40);
  --or_theme_organisms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_organisms-tooltip-background_primary: var(--or_color_black-text_20);
  --or_theme_organisms-tooltip-background_secondary: var(--or_color_white-text_20);
  --or_theme_organisms-tooltip-background_tertiary: var(--or_color_white-text_20);

  /* ReactionBar */
  --or_theme_organisms-reactionBar-selfButton-hover-background: rgba(255, 162, 0, 0.3);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  /* Tooltip */
  --or_theme_organisms-tooltip_default: var(--or_color_text-base_dark);
  --or_theme_organisms-tooltip_primary: var(--or_color_yellow_80);
  --or_theme_organisms-tooltip_secondary: var(--or_color_red_60);
  --or_theme_organisms-tooltip_tertiary: var(--or_color_blue_60);
  --or_theme_organisms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_organisms-tooltip-background_primary: var(--or_color_black-text_20);
  --or_theme_organisms-tooltip-background_secondary: var(--or_color_white-text_20);
  --or_theme_organisms-tooltip-background_tertiary: var(--or_color_white-text_20);

  /* ReactionBar */
  --or_theme_organisms-reactionBar-selfButton-hover-background: rgba(255, 131, 0, 0.3);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark],
[data-scoped-mode='dark'] {
  /* background color */
  --or_theme_bg-bottom: var(--or_color_bg-bottom_dark);
  --or_theme_bg-base: var(--or_color_bg-base_dark);
  --or_theme_bg-upper-1: var(--or_color_bg-upper-1_dark);
  --or_theme_bg-upper-2: var(--or_color_bg-upper-2_dark);
  --or_theme_bg-top: var(--or_color_bg-top_dark);
  --or_theme_bg-disabled: var(--or_color_bg-disabled_dark);
  --or_theme_bg-success: var(--or_color_bg-success_dark);

  /* shadow color */
  --or_theme_bg-box-shadow: var(--or_color_alpha-black_30);

  /* text color */
  --or_theme_text-strong: var(--or_color_text-strong_dark);
  --or_theme_text-base: var(--or_color_text-base_dark);
  --or_theme_text-weak: var(--or_color_text-weak_dark);
  --or_theme_text-placeholder: var(--or_color_text-placeholder_dark);
  --or_theme_text-disabled: var(--or_color_text-disabled_dark);
  --or_theme_text-premium: var(--or_color_text-premium_dark);
  --or_theme_text-success: var(--or_color_text-success_dark);
  --or_theme_text-error: var(--or_color_text-error_dark);

  /* inverted text color */
  --or_theme_text-strong_invert: var(--or_color_text-strong_light);
  --or_theme_text-base_invert: var(--or_color_text-base_light);
  --or_theme_text-weak_invert: var(--or_color_text-weak_light);
  --or_theme_text-placeholder_invert: var(--or_color_text-placeholder_light);
  --or_theme_text-disabled_invert: var(--or_color_text-disabled_light);
  --or_theme_text-premium_invert: var(--or_color_text-premium_light);

  /* semantics color */
  --or_theme_accent: var(--or_color_accent_dark);
  --or_theme_premium: var(--or_color_premium_dark);
  --or_theme_live: var(--or_color_live_dark);
  --or_theme_continue: var(--or_color_continue_dark);
  --or_theme_danger: var(--or_color_live_dark);

  /* other color */
  --or_theme_line: var(--or_color_line_dark);
  --or_theme_frame: var(--or_color_frame_dark);
  --or_theme_alpha-1: var(--or_color_alpha-1_dark);
  --or_theme_alpha-2: var(--or_color_alpha-2_dark);
  --or_theme_highlight: var(--or_color_highlight_dark);
  --or_theme_frame-gold-weak: var(--or_color_frame-gold-weak_dark);
  --or_theme_frame-gold-middle: var(--or_color_frame-gold-middle_dark);
  --or_theme_frame-gold-strong: var(--or_color_frame-gold-strong_dark);
  --or_theme_cover: var(--or_color_cover_dark);
  --or_theme_fill-live-half: var(--or_color_fill-live-half_dark);

  /* old */

  /* base color */
  --or_theme_base_20: var(--or_color_dark_20);
  --or_theme_base_30: var(--or_color_dark_30);
  --or_theme_base_40: var(--or_color_dark_40);
  --or_theme_base_50: var(--or_color_dark_50);
  --or_theme_base_60: var(--or_color_dark_60);

  /* content color */
  --or_theme_content_20: var(--or_color_light_20);
  --or_theme_content_30: var(--or_color_light_30);
  --or_theme_content_40: var(--or_color_light_40);
  --or_theme_content_50: var(--or_color_light_50);
  --or_theme_content_60: var(--or_color_light_60);

  /* alpha base color */
  --or_theme_alpha-base_10: var(--or_color_alpha-black_10);
  --or_theme_alpha-base_20: var(--or_color_alpha-black_20);
  --or_theme_alpha-base_60: var(--or_color_alpha-black_60);
  --or_theme_alpha-base_80: var(--or_color_alpha-black_80);

  /* alpha content color */
  --or_theme_alpha-content-10: var(--or_color_alpha-white_10);
  --or_theme_alpha-content-20: var(--or_color_alpha-white_20);
  --or_theme_alpha-content-60: var(--or_color_alpha-white_60);

  /* text color */
  --or_theme_text_20: var(--or_color_white-text_20);
  --or_theme_text_40: var(--or_color_white-text_40);
  --or_theme_text_60: var(--or_color_white-text_60);

  /* other color */
  --or_theme_ruled-line: var(--or_color_dark_50);
  --or_theme_tag-badge-background: var(--or_color_dark_50);
  --or_theme_toast-background: var(--or_color_dark_50);
  --or_theme_cell-background: var(--or_color_dark_50);
  --or_theme_chat-cell-font: var(--or_color_white);
  --or_theme_chat-cell-background: var(--or_color_alpha-black_20);
  --or_theme_bordered-chat-cell-font-primary: var(--or_color_black-text_20);
  --or_theme_bordered-chat-cell-font-secondary: var(--or_color_black-text_40);
  --or_theme_bordered-chat-cell-border: var(--or_color_alpha-black_40);
  --or_theme_bordered-chat-cell-background: var(--or_color_alpha-white_80);
  --or_theme_setting-chat-cell-font: var(--or_color_black-text_20);
  --or_theme_setting-chat-cell-border: var(--or_color_alpha-black_20);
  --or_theme_setting-chat-cell-background: var(--or_color_alpha-yellow_80);
  --or_theme_dialog-background: var(--or_color_dark_50);
  --or_theme_dialog-scrim-background: var(--or_color_alpha-black_30);
  --or_theme_select-option-overlay-background: var(--or_color_alpha-white_10);
  --or_theme_switch-thumb-shadow: var(--or_color_black-text-shadow);
  --or_theme_switch-background: var(--or_color_dark_60);
  --or_theme_switch-background_checked: var(--or_color_yellow_60);
  --or_theme_text-field-background: var(--or_color_alpha-white_10);
  --or_theme_global-navigation-background: var(--or_color_dark_40);
  --or_theme_icon-fill: var(--or_color_dark_60);

  /* rank color */
  --or_theme_rank-first: var(--or_color_red_60);
  --or_theme_rank-second: var(--or_color_yellow_80);
  --or_theme_rank-third: var(--or_color_yellow_60);
  --or_theme_rank-other: var(--or_color_light_60);

  /* grandient color */
  --or_theme_gradient-rainbow: linear-gradient(100deg, var(--or_color_gradient-raindow_1), var(--or_color_gradient-raindow_2) 40%, var(--or_color_gradient-raindow_3) 79%, var(--or_color_gradient-raindow_4));
  --or_theme_gradient-black: linear-gradient(0deg, var(--or_color_gradient-black_60), var(--or_color_gradient-black_0));
}

/**
 * --or_color_[color-category](_[index])
 */
html {
  /* background color (dark mode) */
  --or_color_bg-bottom_dark: #161422;
  --or_color_bg-base_dark: #201e2f;
  --or_color_bg-upper-1_dark: #333045;
  --or_color_bg-upper-2_dark: #333045;
  --or_color_bg-top_dark: #3e3b54;
  --or_color_bg-disabled_dark: rgb(68, 63, 95, 0.8);
  --or_color_bg-success_dark: #007504;

  /* background color (light mode) */
  --or_color_bg-bottom_light: #e7e5f0;
  --or_color_bg-base_light: #f3f2f8;
  --or_color_bg-upper-1_light: #e7e5f1;
  --or_color_bg-upper-2_light: #fff;
  --or_color_bg-top_light: #fff;
  --or_color_bg-disabled_light: rgb(255, 255, 255, 0.85);
  --or_color_bg-success_light: #007504;

  /* text color (dark mode) */
  --or_color_text-strong_dark: #fff;
  --or_color_text-base_dark: #e4e3e8;
  --or_color_text-weak_dark: #adabba;
  --or_color_text-placeholder_dark: rgba(255, 255, 255, 0.4);
  --or_color_text-disabled_dark: rgba(255, 255, 255, 0.3);
  --or_color_text-premium_dark: #bfb3ff;
  --or_color_text-success_dark: #71d968;
  --or_color_text-error_dark: #ff8383;

  /* text color (light mode) */
  --or_color_text-strong_light: #161422;
  --or_color_text-base_light: #2b2745;
  --or_color_text-weak_light: #57517a;
  --or_color_text-placeholder_light: rgba(22, 20, 34, 0.4);
  --or_color_text-disabled_light: rgba(22, 20, 34, 0.4);
  --or_color_text-premium_light: #5436ff;
  --or_color_text-success_light: #007504;
  --or_color_text-error_light: #d10000;

  /* semantics color (dark mode) */
  --or_color_accent_dark: #ffa200;
  --or_color_premium_dark: #6e55ff;
  --or_color_live_dark: #ff2d55;
  --or_color_continue_dark: #39d1b1;

  /* semantics color (light mode) */
  --or_color_accent_light: #ff8300;
  --or_color_premium_light: #5436ff;
  --or_color_live_light: #ff2d55;
  --or_color_continue_light: #00b790;

  /* other color (dark mode) */
  --or_color_line_dark: rgba(255, 255, 255, 0.15);
  --or_color_frame_dark: rgba(255, 255, 255, 0.3);
  --or_color_alpha-1_dark: rgba(255, 255, 255, 0.1);
  --or_color_alpha-2_dark: rgba(255, 255, 255, 0.15);
  --or_color_highlight_dark: rgba(173, 144, 0, 0.2);
  --or_color_frame-gold-weak_dark: rgba(161, 136, 71, 0.25);
  --or_color_frame-gold-middle_dark: rgba(161, 136, 71, 0.5);
  --or_color_frame-gold-strong_dark: rgb(161, 136, 71);
  --or_color_cover_dark: rgba(68, 63, 95, 0.8);

  /* other color (light mode) */
  --or_color_line_light: rgba(68, 63, 95, 0.1);
  --or_color_frame_light: rgba(68, 63, 95, 0.2);
  --or_color_alpha-1_light: rgba(68, 63, 95, 0.04);
  --or_color_alpha-2_light: rgba(68, 63, 95, 0.1);
  --or_color_highlight_light: #fff9d3;
  --or_color_frame-gold-weak_light: rgba(219, 182, 83, 0.25);
  --or_color_frame-gold-middle_light: rgba(219, 182, 83, 0.5);
  --or_color_frame-gold-strong_light: rgb(219, 182, 83);
  --or_color_cover_light: rgba(255, 255, 255, 0.85);

  /* fixed color */
  --or_color_warning: #008afa;
  --or_color_danger: #f00000;

  /* special color */
  --or_color_fill-live-half_light: #ff96aa;
  --or_color_fill-live-half_dark: #ff96aa;

  /* old */

  /* fixed color */
  --or_color_black: #000;
  --or_color_white: #fff;

  /* black */
  --or_color_dark_20: var(--or_color_bg-bottom_dark);
  --or_color_dark_30: var(--or_color_bg-base_dark);
  --or_color_dark_40: var(--or_color_bg-upper-1_dark);
  --or_color_dark_50: var(--or_color_line_dark);
  --or_color_dark_60: var(--or_color_text-weak_dark);

  /* white */
  --or_color_light_10: var(--or_color_bg-upper-2_light);
  --or_color_light_20: var(--or_color_bg-bottom_light);
  --or_color_light_30: var(--or_color_bg-base_light);
  --or_color_light_40: var(--or_color_bg-upper-1_light);
  --or_color_light_50: var(--or_color_line_light);
  --or_color_light_60: var(--or_color_text-weak_light);

  /* yellow */
  --or_color_yellow_60: var(--or_color_accent_dark);
  --or_color_yellow_80: var(--or_color_accent_light);

  /* red */
  --or_color_red_60: var(--or_color_live_dark, --or_color_live_light);
  /* --or_color_red_80: #cb183a; */

  /* blue */
  --or_color_blue_40: var(--or_color_premium_dark);
  --or_color_blue_60: var(--or_color_premium_light);

  /* green */
  --or_color_green_60: var(--or_color_continue_dark);
  /* var(--or_color_continue_light); */

  /* white text */
  --or_color_white-text_0: var(--or_color_text-strong_dark);
  --or_color_white-text_20: var(--or_color_text-base_dark);
  --or_color_white-text_40: var(--or_color_text-weak_dark);
  --or_color_white-text_60: var(--or_color_text-placeholder_dark);

  /* black text */
  --or_color_black-text_20: var(--or_color_text-strong_light);
  --or_color_black-text_40: var(--or_color_text-base_light);
  --or_color_black-text_60: var(--or_color_text-weak_light);
  /* var(--or_color_text-placeholder_light); */

  /* gradient rainbow */
  --or_color_gradient-raindow_1: #05ffde;
  --or_color_gradient-raindow_2: #6d94ee;
  --or_color_gradient-raindow_3: #d14dfd;
  --or_color_gradient-raindow_4: #fd4db3;

  /* gradient black */
  --or_color_gradient-black_0: rgba(22, 20, 34, 0);
  --or_color_gradient-black_40: rgba(22, 20, 34, 0.4);
  --or_color_gradient-black_60: rgba(22, 20, 34, 0.6);

  /* alpha black */
  --or_color_alpha-black_10: rgba(22, 20, 34, 0.1);
  --or_color_alpha-black_20: rgba(22, 20, 34, 0.2);
  --or_color_alpha-black_30: rgba(22, 20, 34, 0.3);
  --or_color_alpha-black_40: rgba(142, 138, 170, 0.4);
  --or_color_alpha-black_50: rgba(10, 4, 36, 0.5);
  --or_color_alpha-black_60: rgba(10, 4, 36, 0.6);
  --or_color_alpha-black_80: rgba(22, 20, 34, 0.8);

  /* alpha white */
  --or_color_alpha-white_10: rgba(255, 255, 255, 0.07);
  --or_color_alpha-white_20: rgba(255, 255, 255, 0.2);
  --or_color_alpha-white_40: rgba(255, 255, 255, 0.4);
  --or_color_alpha-white_50: rgba(255, 255, 255, 0.5);
  --or_color_alpha-white_60: rgba(245, 244, 250, 0.6);
  --or_color_alpha-white_80: rgba(245, 244, 250, 0.8);

  /* alpha red */
  --or_color_alpha-red_40: rgba(255, 45, 85, 0.4);
  --or_color_alpha-red_80: rgba(255, 45, 85, 0.8);

  /* alpha yellow */
  --or_color_alpha-yellow_80: rgba(255, 254, 217, 0.8);

  /* shadow */
  --or_color_black-text-shadow: rgba(0, 0, 0, 0.5);

  /* social */
  --facebook-blue: #007af7;
  --facebook-white: #fff;
  --x-black: #0F1419;
  --x-white: #fff;
  --google-gray: rgba(68, 63, 95, 0.2);
  --google-black: #777;
  --yahoo-gray: rgba(68, 63, 95, 0.2);
  --yahoo-red: #f03;
}

/**
 * --or_theme_[theme-category](_[index])
 */
html,
[data-scoped-mode='light'] {
  /* background color */
  --or_theme_bg-bottom: var(--or_color_bg-bottom_light);
  --or_theme_bg-base: var(--or_color_bg-base_light);
  --or_theme_bg-upper-1: var(--or_color_bg-upper-1_light);
  --or_theme_bg-upper-2: var(--or_color_bg-upper-2_light);
  --or_theme_bg-top: var(--or_color_bg-top_light);
  --or_theme_bg-disabled: var(--or_color_bg-disabled_light);
  --or_theme_bg-success: var(--or_color_bg-success_light);

  /* shadow color */
  --or_theme_bg-box-shadow: var(--or_color_alpha-black_20);

  /* text color */
  --or_theme_text-strong: var(--or_color_text-strong_light);
  --or_theme_text-base: var(--or_color_text-base_light);
  --or_theme_text-weak: var(--or_color_text-weak_light);
  --or_theme_text-placeholder: var(--or_color_text-placeholder_light);
  --or_theme_text-disabled: var(--or_color_text-disabled_light);
  --or_theme_text-premium: var(--or_color_text-premium_light);
  --or_theme_text-success: var(--or_color_text-success_light);
  --or_theme_text-error: var(--or_color_text-error_light);

  /* inverted text color */
  --or_theme_text-strong_invert: var(--or_color_text-strong_dark);
  --or_theme_text-base_invert: var(--or_color_text-base_dark);
  --or_theme_text-weak_invert: var(--or_color_text-weak_dark);
  --or_theme_text-placeholder_invert: var(--or_color_text-placeholder_dark);
  --or_theme_text-disabled_invert: var(--or_color_text-disabled_dark);
  --or_theme_text-premium_invert: var(--or_color_text-premium_dark);

  /* semantics color */
  --or_theme_accent: var(--or_color_accent_light);
  --or_theme_premium: var(--or_color_premium_light);
  --or_theme_live: var(--or_color_live_light);
  --or_theme_continue: var(--or_color_continue_light);
  --or_theme_danger: var(--or_color_live_light);

  /* other color */
  --or_theme_line: var(--or_color_line_light);
  --or_theme_frame: var(--or_color_frame_light);
  --or_theme_alpha-1: var(--or_color_alpha-1_light);
  --or_theme_alpha-2: var(--or_color_alpha-2_light);
  --or_theme_highlight: var(--or_color_highlight_light);
  --or_theme_frame-gold-weak: var(--or_color_frame-gold-weak_light);
  --or_theme_frame-gold-middle: var(--or_color_frame-gold-middle_light);
  --or_theme_frame-gold-strong: var(--or_color_frame-gold-strong_light);
  --or_theme_cover: var(--or_color_cover_light);
  --or_theme_fill-live-half: var(--or_color_fill-live-half_light);

  /* old */

  /* base color */
  --or_theme_base_20: var(--or_color_light_20);
  --or_theme_base_30: var(--or_color_light_30);
  --or_theme_base_40: var(--or_color_light_40);
  --or_theme_base_50: var(--or_color_light_50);
  --or_theme_base_60: var(--or_color_light_60);

  /* content color */
  --or_theme_content_20: var(--or_color_dark_20);
  --or_theme_content_30: var(--or_color_dark_30);
  --or_theme_content_40: var(--or_color_dark_40);
  --or_theme_content_50: var(--or_color_dark_50);
  --or_theme_content_60: var(--or_color_dark_60);

  /* alpha base color */
  --or_theme_alpha-base_10: var(--or_color_alpha-white_10);
  --or_theme_alpha-base_20: var(--or_color_alpha-white_20);
  --or_theme_alpha-base_60: var(--or_color_alpha-white_60);
  --or_theme_alpha-base_80: var(--or_color_alpha-white_80);

  /* alpha content color */
  --or_theme_alpha-content-10: var(--or_color_alpha-black_10);
  --or_theme_alpha-content-20: var(--or_color_alpha-black_20);
  --or_theme_alpha-content-60: var(--or_color_alpha-black_60);

  /* text color */
  --or_theme_text_20: var(--or_color_black-text_20);
  --or_theme_text_40: var(--or_color_black-text_40);
  --or_theme_text_60: var(--or_color_black-text_60);

  /* other color */
  --or_theme_ruled-line: var(--or_color_light_50);
  --or_theme_tag-badge-background: var(--or_color_light_10);
  --or_theme_toast-background: var(--or_color_light_10);
  --or_theme_cell-background: var(--or_color_light_10);
  --or_theme_chat-cell-font: var(--or_color_white);
  --or_theme_chat-cell-background: var(--or_color_alpha-black_20);
  --or_theme_bordered-chat-cell-font-primary: var(--or_color_black-text_20);
  --or_theme_bordered-chat-cell-font-secondary: var(--or_color_black-text_40);
  --or_theme_bordered-chat-cell-border: var(--or_color_alpha-black_40);
  --or_theme_bordered-chat-cell-background: var(--or_color_alpha-white_80);
  --or_theme_setting-chat-cell-font: var(--or_color_black-text_20);
  --or_theme_setting-chat-cell-border: var(--or_color_alpha-black_20);
  --or_theme_setting-chat-cell-background: var(--or_color_alpha-yellow_80);
  --or_theme_dialog-background: var(--or_color_light_10);
  --or_theme_dialog-scrim-background: var(--or_color_alpha-black_30);
  --or_theme_select-option-overlay-background: var(--or_color_alpha-black_10);
  --or_theme_switch-thumb-shadow: var(--or_color_black-text-shadow);
  --or_theme_switch-background: var(--or_color_light_60);
  --or_theme_switch-background_checked: var(--or_color_yellow_60);
  --or_theme_text-field-background: var(--or_color_alpha-white_60);
  --or_theme_global-navigation-background: var(--or_color_light_40);
  --or_theme_icon-fill: var(--or_color_light_60);

  /* rank color */
  --or_theme_rank-first: var(--or_color_red_60);
  --or_theme_rank-second: var(--or_color_yellow_80);
  --or_theme_rank-third: var(--or_color_yellow_60);
  --or_theme_rank-other: var(--or_color_light_60);

  /* grandient color */
  --or_theme_gradient-rainbow: linear-gradient(100deg, var(--or_color_gradient-raindow_1), var(--or_color_gradient-raindow_2) 40%, var(--or_color_gradient-raindow_3) 79%, var(--or_color_gradient-raindow_4));
  --or_theme_gradient-black: linear-gradient(0deg, var(--or_color_gradient-black_60), var(--or_color_gradient-black_0));
}