@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"), local("MaterialIcons-Regular"),
    url("assets/fonts/MaterialIcons-Regular.woff2") format("woff2"),
    url("assets/fonts/MaterialIcons-Regular.ttf") format("truetype");
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
}

:root {
  --color-primary: #f7a397;
  --color-primary-light: #ffd7aa;

  --color-multiplayer1: #97F7C7;
  --color-multiplayer2: #B0AAFF;
  --color-multiplayer3: #AECBE3;

  --color-white: #fff;
  --color-white-soft: rgba(255, 255, 255, 0.8);
  --color-white-softer: rgba(255, 255, 255, 0.5);

  --color-gray-dark: #505050;
  --color-gray-mid: #858585;
  --color-gray-light: #AAAAAA;

  --color-black: #000;

  --color-red: #f56969;
  --color-orange: #CD7800;
  --color-green: #08bc08;

  --color-background: #1c1c1c;
  --color-background-fade: #1c1c1c80;
  --color-background-card: #2c2c2c;
  --color-background-panel: #383838;

  --gradient-primary: linear-gradient(
    var(--color-primary),
    var(--color-primary-light)
  );
  --gradient-multiplayer: linear-gradient(
    var(--color-multiplayer1),
    var(--color-multiplayer2)
  );

  --shadow-medium: 0 3px 6px rgba(0, 0, 0, 0.16);

  --font-title1: 700 22px "Lato";
  --font-title2: 700 20px "Lato";
  --font-subtitle: 700 18px "Lato";
  --font-body: 400 16px "Lato";
  --font-button: 400 16px "Lato";
  --font-subhead: 700 14px "Lato";
  --font-aux: 400 14px "Lato";
  --font-caption: 400 12px "Lato";

  --font-xs: 11px "Lato";
  --font-sm: 13px "Lato";
  --font-md: 15px "Lato";
  --font-lg: 17px "Lato";

  --z-index-iap-modal: 2000;
  --z-index-invite-modal: 2001;
  --z-index-iap-in-progress: 3000;
  --z-index-iap-complete: 3001;

  /* ----------------------- */
  /* ---- NEW VARIABLES ---- */
  /* ----------------------- */

  --background-color: #1E1C2C;

  --color-highlight: #6C74B4;
  --color-highlight-light: #99A4FF;
  --color-highlight-muted: #80829C;

  --color-bronze: #704A00;
  --color-feature: #FFD78A;
  --color-feature-dark: #FFD075;
  --color-pop: #F56969;
  --color-pop-2: #FF527B;
  --color-green: #6ECD5F;
  --color-green-light: #92E668;
  --color-green-dark: #279A3A;
  --color-blue: #190175;
  --color-mulberry: #C84C96;

  --color-white-dimmed: rgba(255, 255, 255, 0.7);

  --color-background-v2: #272441;
  --color-background-light-v2: #332E51;

  --color-dark: #0F111C;
  --color-desat-dark: #494B54;
  --color-desat-med: #80828E;
  --color-desat-light: #C9CDDD;
  --color-interim-dark: #1E1C2C;

  --color-input-search: #2E2A45;

  --gradient-value-prop: linear-gradient(#4F4A89, #272441);
  --gradient-daily-goals: linear-gradient(#FFFFFF, #FFB8C9);
  --tooltip-tutorial-background-color: linear-gradient(180deg, rgba(30, 28, 44, 0.9) 0%, rgba(100, 93, 146, 0.9) 100%);

  --font-header1: 600 7.467vw/9.707vw "Lato"; /* 28px/36.4px*/
  --font-header2: 600 6.4vw/7.68vw "Lato"; /* 24px/28.8 */
  --font-header3: 600 5.6vw/6.72vw "Lato"; /* 21px/25.2px */
  --font-header4: 700 4.533vw/5.6vw "Lato"; /* 17px/21px */
  --font-body1: 400 5.333vw/6.933vw "Lato"; /* 20px/26px */
  --font-body2: 500 4.267vw/5.8vw "Lato"; /* 16px/22px */
  --font-body3: 600 3.467vw/4.533vw "Lato"; /* 13px/17px */
  --font-body4: 600 2.933vw/4vw "Lato"; /* 11px/15px */
  --font-small-link: 700 4.267vw/5.12vw "Lato"; /* 16px/19.2px */

  /** font sizes by pixels in vw **/
  --font-size-10-px: 2.667vw;
  --font-size-11-px: 2.933vw;
  --font-size-12-px: 3.2vw;
  --font-size-13-px: 3.467vw;
  --font-size-15-px: 4vw;
  --font-size-16-px: 4.267vw;
  --font-size-17-px: 4.533vw;
  --font-size-18-px: 4.8vw;
  --font-size-20-px: 5.333vw;
  --font-size-25-px: 6.667vw;
  --font-size-30-px: 8vw;

  --app-header-height: 3rem;
  --app-footer-height: 3rem;
  --app-header-and-footer-height: calc(var(--app-footer-height) + var(--app-header-height));

  --svg-filter-white-to-blue: brightness(0) saturate(100%) invert(49%) sepia(26%) saturate(788%) hue-rotate(196deg) brightness(89%) contrast(86%);

}

[data-colors="pb"] {
  background-color: var(--color-primary);
  color: var(--color-black);
}
[data-colors="bp"] {
  background-color: var(--color-black);
  color: var(--color-primary);
}
[data-colors="tp"] {
  background-color: transparent;
  color: var(--color-primary);
}
[data-colors="gb"] {
  background-color: var(--color-gray-mid);
  color: var(--color-black);
}

.button-special,
.button-primary.uppercase,
.button-secondary.uppercase,
.button-borderless,
.button-gray,
.button-multiplayer {
  font: var(--font-button);
  text-transform: uppercase;
}
.button-special.small,
.button-primary.small,
.button-secondary.small,
.button-borderless.small,
.button-gray.small,
.button-multiplayer.small {
  font: var(--font-aux);
  text-transform: none;
}

.button-special {
  background: var(--gradient-primary);
  color: var(--color-black);
  padding: 12px 16px;
}

.button-primary {
  background: var(--color-highlight);
  color: var(--color-white);
  border-radius: 8px;
  padding: 12px 16px;
}
.button-primary:disabled {
  background-color: var(--color-highlight-muted);
  color: var(--color-white);
}
.button-secondary {
  background: transparent;
  color: var(--color-highlight-light);
  border: 2px solid;
  padding: 10px 14px; /* 2px subtracted from padding to account for border */
}
.button-secondary:disabled {
  color: var(--color-gray-mid);
}
.button-multiplayer {
  background: var(--gradient-multiplayer);
  color: var(--color-black);
  padding: 12px 16px;
}
.button-primary-peach {
  background: var(--color-primary);
  color: var(--color-black);
  font: var(--font-button);
  text-transform: uppercase;
}  
.button-secondary-peach {
  background: transparent;
  color: var(--color-primary);
  font: var(--font-button);
  border: 1px solid var(--color-primary);
  text-transform: uppercase;
}
.lobby-contacts-button {
  font-size: 4vw;
  line-height: 6vw;
  padding: 2vw;
}
.button-borderless {
  background: transparent;
  color: var(--color-primary);
  padding: 12px 16px;
  text-decoration: underline;
  margin: 0 -16px; /* horizontal padding is inverted so button's text appears to lie against parent padding-box as expected, but with the benefit of a larger hitbox */
}

.button-gray {
  background-color: var(--color-gray-dark);
  color: var(--color-gray-mid);
  padding: 12px 16px;
}

.button-left {
  border-radius: 8px 0 0 8px !important;
}
.button-center {
  border-radius: 0 !important;
}
.button-right {
  border-radius: 0 8px 8px 0 !important;
}

.button-tab,
.button-tab-share {
  display: block;
  background: transparent;
  color: var(--color-white);
  font: var(--font-caption);
  padding: 0;
  width: 80px;
  height: 60px;
}

.button-icon,
.button-back {
  display: block;
  background: transparent;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.button-icon:before,
.button-tab:before,
.button-tab-share:before,
.button-back:before {
  display: block;

  font-family: "Material Icons";
  font-weight: normal;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
}

.button-icon-lg:before {
  font-size: 32px;
}

.button-img {
  pointer-events: none;
}

.button-icon:before,
.button-tab:before {
  content: attr(data-icon);
}

.button-back:before {
  content: 'arrow_back_ios';
}

.button-tab-share:before {
  position: relative;
  content: "share";
  background: var(--gradient-primary);
  color: var(--color-black);
  box-shadow: var(--shadow-medium);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: -20px auto 0 auto;
  line-height: 44px;
}

.button-group-bottom {
  display: flex;
}
.button-group-bottom > button {
  border-radius: 0;
  flex: 1 0 0;
}
.button-group-bottom > button:first-of-type {
  border-bottom-left-radius: 8px;
}
.button-group-bottom > button:last-of-type {
  border-bottom-right-radius: 8px;
}

.button-compact {
  font: var(--font-aux);
  padding: 8px 12px;
  border-radius: 4px;
}

.page-tabs {
  --height: 7.5vh;
  --shadow-offset-y: -3px;
  display: flex;
  height: var(--height);
  font: var(--font-button);
}
.page-tabs[data-tabstyle~="bottom"] {
  --shadow-offset-y: 3px;
}
.page-tabs[data-tabstyle~="small"] {
  font: var(--font-aux);
}

.page-tab {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white-soft);
  height: var(--height);
  text-align: center;
  flex: 1;
}
.page-tab.active {
  color: var(--color-highlight-light);
  box-shadow: inset 0 var(--shadow-offset-y);
}
.page-tab.active.no-border {
  box-shadow: none;
}
.page-tab[data-icon]::before {
  display: block;
  content: attr(data-icon);

  font-family: "Material Icons";
  font-weight: normal;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
}
.page-tab[data-badge]::after {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: block;
  line-height: 1;
  content: attr(data-badge);
  font: var(--font-caption);
  font-weight: 700;
  background-color: var(--color-highlight);
  color: var(--color-white);
  padding: 0 0.5em;
  border-radius: 1em;
}
.row-tab{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hack-image {
  margin-right:2vw;
}

.tab-icon {
  height: 4.8vw;
  width: 4.8vw;
  margin-right: 2vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


.textfield {
  color: var(--color-white);
  font: var(--font-body);
  height: 2em;
  padding: 0 0.5em;
  background-color: var(--color-background-v2);
  border-radius: 9999px;
  border: 1px solid var(--color-white-softer);
}
.textfield::placeholder {
  color: var(--color-white-softer);
}

.textfield-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 4px;
  height: 4rem;
}
.textfield-container.error {
  color: var(--color-red);
}
.textfield-container.error .textfield {
  background-image: url("assets/img/ui/icon-textfield-error.svg");
  background-position: right 8px center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-red);
  padding-right: 48px;
}

.textfield-title {
  color: var(--color-white);
  font: var(--font-subhead);
}
.textfield-message {
  font: var(--font-subhead);
  margin-left: 0.5em;
}
.textfield-message:empty {
  display: none;
}

.first-name-container,
.last-name-container,
.email-container {
  grid-template-rows: 4vw 1fr 4vw;
  grid-gap: 2vw;
  height: 17vw;
  margin: 3vw 0;
  font: var(--font-body);
}

.input-type-first-name,
.input-type-last-name,
.input-type-email {
  border-radius: 10px;
}
.creator-agreement {
padding-top: var(--safe-area-top-custom, 0px);
}
.creator-agreement-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3rem;
  text-align: center;
  font-size: 5.5vw;
  font-weight: bold;
  background: #2c2c2c;
}
.creator-agreement-container {
  height: calc(100dvh - 3rem - 10vw);
  padding: 5vw;
  padding-bottom: calc(5vw + var(--safe-area-bottom-custom, 0px));
  color: black;
  background-color: white;
  border-radius: 10px;
  overflow-y: scroll;
}
.creator-agreement-link {
  margin: 3vw 5vw;
  color: rgba(255, 255, 255, 0.8);
  font-size: 3.5vw;
  font-weight: normal;
  text-align: center;
  text-decoration: underline;
}

.radialmeter {
  position: relative;
  border-radius: 50%;
}

.radialmeter svg {
  position: relative;
  width: 100%;
  display: block;
}

.radialmeter circle.track {
  fill: none;
}
.radialmeter circle.fill {
  fill: none;
  transition: stroke-dasharray 500ms cubic-bezier(0, 0.55, 0.45, 1);
}

.radialmeter-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #2c2c2c;
}

.move-back {
  z-index: 0 !important;
}
.move-front {
  z-index: 9999 !important;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background-color: var(--color-highlight);
  border-radius: 8px;
}
.btn-primary.disabled {
  color: var(--color-white-softer);
  background-color: var(--color-highlight-muted);
  pointer-events: none;
}

.text-header1 {
  font: var(--font-header1);
}
.text-header2 {
  font: var(--font-header2);
}
.text-body1 {
  font: var(--font-body1);
}
.text-body2-white {
  font: var(--font-body2);
  color: var(--color-white);
}
.text-body2-primary {
  font: var(--font-body2);
  color: var(--color-highlight-light)
}
.text-body3 {
  font: var(--font-body3);
}

.input-textfield {
  height: 12vw; /* 44px */
  width: 100%;
  margin: 3vw 0;
  padding: 0 3.8vw;
  font: var(--font-body2);
  color: var(--color-white);
  background-color: var(--color-background-light-v2);
  box-sizing: border-box;
  border-radius: 8px;
}
.input-textfield::placeholder {
  color: var(--color-desat-light);
}
.input-textfield:disabled {
  opacity: 1;
}
.input-textfield.error {
  border: solid 1px var(--color-pop);
  color: var(--color-pop)
}
.input-dropdown-container,
.input-dropdown {
  position: relative;
}
.input-dropdown-arrow {
  position: absolute;
  top: 2.5vw;
  right: 2.5vw;
  height: 7vw;
  width: 7vw;
  background: url("assets/img/buttons/dropdown-arrow.svg") no-repeat center/contain;
  pointer-events: none;
}
.input-dropdown-arrow.up {
  transform:rotate(180deg);
}

.back-btn-desat {
  position: absolute;
  top: 0;
  left: 0;
  height: 14vw;
  width: 14vw;
  background: url('assets/img/ui/icon-arrow-back-desat.svg') center/24px no-repeat;
}
.back-btn-desat-med {
  position: absolute;
  top: 0;
  left: 0;
  height: 14vw;
  width: 14vw;
  background: url('assets/img/ui/icon-arrow-back-desat-med.svg') center/24px no-repeat;
}
.close-btn-desat {
  position: absolute;
  top: 0;
  right: 0;
  height: 14vw;
  width: 14vw;
  background: url('assets/img/ui/close-24px-desat.svg') center/24px no-repeat;
}

.line-clamp-1 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bg-image-center-contain {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.bg-image-center-cover {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-transparent {
  background-color: transparent !important;
}

.opacity-7 {
  opacity: 0.7;
}
[hidden] {
  display: none !important;
}

.flex-spacer {
  flex: 1;
}
.flex-fill {
  flex: 1 0 0;
}
.flexbox-down {
  display: flex;
  flex-flow: column;
}

.block-100 {
  display: block;
  width: 100%;
}

.hide-empty:empty {
  display: none !important;
}

.grid-y8 {
  display: grid;
  grid-gap: 8px;
  grid-auto-flow: row;
}
.grid-y16 {
  display: grid;
  grid-gap: 16px;
  grid-auto-flow: row;
}

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

.mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.mx-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.mx-5vw {
  margin-left: 5vw !important;
  margin-right: 5vw !important;
}

.my-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.my-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.my-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.my-5vw {
  margin-top: 5vw !important;
  margin-bottom: 5vw !important;
}

.mt-8 {
  margin-top: 8px !important;
}
.mt-16 {
  margin-top: 16px !important;
}
.mt-32 {
  margin-top: 32px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}
.mb-16 {
  margin-bottom: 16px !important;
}
.mb-32 {
  margin-bottom: 32px !important;
}

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

.text-h3 {
  font: var(--font-subhead);
}

.br-32{
  border-radius: 32px !important;
}
@font-face {
  font-family: "Lato";
  src: url("assets/fonts/lato/Lato-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("assets/fonts/lato/Lato-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("assets/fonts/lato/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("assets/fonts/lato/Lato-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url("assets/fonts/lato/Lato-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url("assets/fonts/lato/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Eponymous";
  src: url("assets/fonts/eponymous/Eponymous-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Eponymous";
  src: url("assets/fonts/eponymous/Eponymous-Italic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

html {
  box-sizing: border-box;
  font-family: "Lato", "Arial", "SFUI", "Roboto", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  scrollbar-width: thin; /* Firefox */
  -ms-overflow-style: thin; /* IE and Edge */
}

body,
#app-view {
  display: flex;
  flex-flow: column nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
  height: 100dvh;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: var(--background-color);
  color: black;
  overflow: hidden;
  position: relative;
  /* Hide scrollbars */
  scrollbar-width: thin; /* Firefox */
  -ms-overflow-style: thin; /* IE and Edge */
  scrollbar-color: var(--background-color) var(--color-background-light-v2);
}

body {
  background: var(--background-color);

  --safe-area-top-custom: env(safe-area-inset-top, 0px);
  --safe-area-bottom-custom: env(safe-area-inset-bottom, 0px);
  --safe-area-top-bottom-custom: calc(var(--safe-area-top-custom, 0px) + var(--safe-area-bottom-custom, 0px));

  padding-top: var(--safe-area-top-custom, 0px);
}
body.android {
  --safe-area-top-custom: var(--safe-area-top, env(safe-area-inset-top, 0px));
  --safe-area-bottom-custom: env(safe-area-inset-bottom, 0px);
  --safe-area-top-bottom-custom: calc(var(--safe-area-top-custom, 0px) + var(--safe-area-bottom-custom, 0px));

  padding-top: var(--safe-area-top-custom, 0px);
}

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

/* Hide scrollbars for webkit browsers (Chrome, Safari, Edge) */
/* For now, just show thin scrollbars for scrolling */
/* ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
} */

* {
  scrollbar-width: thin; /* Firefox */
  -ms-overflow-style: thin; /* IE and Edge */
  scrollbar-color: var(--background-color) var(--color-background-light-v2);
}

/* 
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
} */

/* ERROR SCREEN MANAGER */
#error-manager__error-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10vw 9vw;
  background: #fff;
  color: #000;
  border-radius: 6vw;
  width: 75vw;
  text-align: center;
}
#error-manager__error-container > * {
  margin: 3vw 0 0 0;
}
#error-manager__error-container > *:first-child {
  margin: 0;
}
#error-manager__error-container #error-manager__error-title {
  font-size: 6vw;
  font-weight: 600;
}
#error-manager__error-container #error-manager__error-image {
  height: 24vw;
}
#error-manager__error-container #error-manager__error-message {
  font-size: 4vw;
  font-weight: normal;
}
#error-manager__error-container #error-manager__error-cta {
  color: #6c74b4;
  font-size: 4vw;
  font-weight: bold;
  padding: 4vw;
}
/* END OF ERROR SCREEN MANAGER */

/* LOADING SCREEN MANAGER */
#loading-manager__container {
  --show-animation-duration: 1s;
  --hide-animation-duration: 1s;
  --loading-bar-transition-duration: 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  opacity: 0;
  background-color: var(--color-background-light-v2);
}
#loading-manager__container.show {
  opacity: 1;
}
#loading-manager__container.show-animation {
  -webkit-animation: var(--show-animation-duration) loading-screen-fade-in forwards;
  animation: var(--show-animation-duration) loading-screen-fade-in forwards;
}
#loading-manager__container.hide {
  opacity: 0;
}
#loading-manager__container.hide-animation {
  -webkit-animation: var(--hide-animation-duration) loading-screen-fade-out forwards;
  animation: var(--hide-animation-duration) loading-screen-fade-out forwards;
}
#loading-manager__container .fadeBottom {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(85%, rgba(30, 28, 44, 0.7)));
  background-image: linear-gradient(180deg, transparent 70%, rgba(30, 28, 44, 0.7) 85%);
}
#loading-manager__container .loading-manager__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0;
}
#loading-manager__container .loading-manager__img.show {
  opacity: 1;
}
#loading-manager__container .loading-manager__img.show-animation {
  -webkit-animation: var(--show-animation-duration) loading-screen-fade-in forwards;
  animation: var(--show-animation-duration) loading-screen-fade-in forwards;
}
#loading-manager__container #loading-manager__loading-bar {
  position: absolute;
  bottom: calc(23vw + var(--safe-area-bottom-custom, 0px));
  width: 100%;
  display: flex;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1;
}
#loading-manager__container #loading-manager__loading-bar #loading-manager__loading-bar_title {
  position: absolute;
  bottom: 1vw;
  color: #99A4FF;
  text-align: center;
  font: var(--font-header3);
  width: 75vw;
  margin-bottom: 1vw;
  text-overflow: ellipsis;
  overflow: hidden;
  display: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0;
  -webkit-animation: 3s loading-screen-fade-in 0.5s forwards;
  animation: 3s loading-screen-fade-in 0.5s forwards;
}
#loading-manager__container #loading-manager__loading-bar #loading-manager__loading-bar_subtitle {
  position: absolute;
  top: 2vw;
  font: var(--font-body3);
  color: #99A4FF;
  width: 70vw;
  margin-top: 1vw;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0;
  -webkit-animation: 2s loading-screen-fade-in 1s forwards;
  animation: 2s loading-screen-fade-in 1s forwards;
}

#loading-manager__container #loading-manager__loading-bar #loading-manager__loading-bar_outline {
  position: absolute;
  top: 0;
  width: 75vw;
  height: 4px;
  background-color: #c1c1c1;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  -webkit-animation: 3s loading-screen-fade-in forwards;
  animation: 3s loading-screen-fade-in forwards;
}
#loading-manager__container #loading-manager__loading-bar #loading-manager__loading-bar_fill {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #9d45fc;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform var(--loading-bar-transition-duration) linear;
  transition: -webkit-transform var(--loading-bar-transition-duration) linear;
  transition: transform var(--loading-bar-transition-duration) linear;
  transition: transform var(--loading-bar-transition-duration) linear, -webkit-transform var(--loading-bar-transition-duration) linear;
}
#loading-manager__container #loading-manager__loading-bar #loading-manager__loading-bar_fill:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.5)), to(transparent));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  -webkit-animation: 1s loading_shimmer infinite;
  animation: 1.5s loading_shimmer infinite;
}
/*# sourceMappingURL=style.css.map */

/* END OF LOADING SCREEN MANAGER */

@keyframes loading_shimmer {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes loading-screen-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loading-screen-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#error-manager__container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  opacity: 0;
  animation: 1s loading-screen-fade-in forwards;

  #error-manager__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
  /* END OF LOADING SCREEN MANAGER */


section,
div,
table,
td,
th,
button,
select,
input {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: currentColor;
  margin: 0;
  outline: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

a,
a:visited,
a:active {
  color: var(--color-primary);
}

button {
  transition: opacity 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  background-color: transparent;
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: inherit;
  margin: 0;
}

h1 {
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}

h2 {
  font-size: 0.9375rem;
  font-weight: 800;
}

h4 {
  font-size: 0.875rem;
  font-weight: 600;
}

h6 {
  font-size: 0.6875rem;
  font-weight: 700;
}

img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
}

boldtext {
  text-shadow: 1px 1px 1px black;
}

.disabled {
  background: var(--color-highlight-muted);
  color: var(--color-white);
}

#system-status-bar {
  transition: background 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  background: #bbbbbb;
}

#top-safe-area {
  pointer-events: none;
  background-color: transparent;
  position: absolute;
  top:0;
  left: -1px;
  width: 0px;
  height: var(--safe-area-top-custom, 0px);
}
#bottom-safe-area {
  pointer-events: none;
  background-color: transparent;
  position: absolute;
  bottom:0;
  left: -1px;
  width: 0px;
  height: var(--safe-area-bottom-custom, 0px);
}


#screen-container {
  flex: 1;
  position: relative;
  -ms-grid-row-align: stretch;
  align-self: stretch;
  height: calc(100% - 6rem - var(--safe-area-top-bottom-custom, 0px));
}

#screen-container-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.screen {
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  top: 0;
  left: 0;
}
.screen.is-active {
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  overflow-y: scroll;
  pointer-events: all;
}
.screen.is-active-no-overflow {
  opacity: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  pointer-events: all;
}
.home-is-active {
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  overflow-y: scroll;
  pointer-events: all;
}

.page-container {
  padding: 2.25rem;
  background: linear-gradient(135deg, #efefef 0%, #afafaf 100%);
  line-height: 1.5rem;
}
.page-container__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.page-container__heading {
  font-size: 1.125rem;
  font-weight: 700;
}
.page-container__img {
  margin-top: 2rem;
  width: 4.5rem;
  height: 4.5rem;
}

.section {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  padding: 0.75rem;
  height: 100%;
  text-align: center;
}

.tutorial {
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: hidden;
}
/*
.personality_scroller {
  width: 100%;
  height: 100%;
  overflow-y:hidden;
  overflow-x:hidden;
}
*/
.disableOverflow {
  overflow-y: hidden;
  overflow-x: hidden;
}

.personality_container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#dot_container {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}
.answer_item {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 150px;
  font-size: 40px;
  text-align: center;
  display: block;
  top: 0;
  margin-left: -50%;
  left: 150%;
}
.active_answer {
  display: block;
}
#first_answer_item {
  background-color: green;
  left: 50%;
}
.answer_text_container {
  position: absolute;
  top: 0;
  left: 4rem;
  width: calc(100% - 8rem);
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.answer_text {
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
  text-shadow: 2px 2px 4px #000000;
  width: 100%;
  margin: 10px;
  line-height: 2rem;
}

.dotItem {
  color: #fff;
  font-size: 2rem;
  position: relative;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}
.dot_bg {
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
}
.dot_fg {
  color: #fff;
  position: absolute;
  transform: scale(0);
  -webkit-transition: 260ms ease-in-out;
  -moz-transition: 260ms ease-in-out;
  -o-transition: 260ms ease-in-out;
  transition: 260ms ease-in-out;
}
.dot_active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.btnSpecial {
  background-image: linear-gradient(to bottom, #f7a397, #ffd7aa);
  color: #000;
}
.btnSpecial:active {
  background-image: linear-gradient(to bottom, #f9c0b7, #ffe2c3);
}
.btnPri {
  background-color: #f7a397;
  color: #000;
}
.btnPri:active {
  background-color: #f9beb6;
}
.btnSec {
  background-color: #2c2c2c;
  border: 2px solid #f7a397;
  color: #f7a397;
}
.btnSec:active {
  background-color: #606060;
}

.btn {
  transition: 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition-property: background, -webkit-transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #f4f5f7;
  border: 1px solid #e6e7e8;
  height: 3rem;
  letter-spacing: 1pt;
  padding: 0 1.5rem;
}
.btn:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.btn:disabled {
  background: #343434;
}
.btn:disabled .btn__action {
  opacity: 0.5;
}

.btn-action {
  transition: 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition-property: background, -webkit-transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
}
.btn-action:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.btn-action:disabled .btn__action {
  opacity: 0.5;
}
.btn-action:disabled > img {
  opacity: 0.5;
}

.start-button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 3rem;
  padding-right: 1.5rem;
  padding-left: 0.75rem;
}

#header-container {
  height: 3rem;
  flex-basis: 3rem;
  width: 100%;
  z-index: 1;
  background-color: var(--background-color);
}

.header {
  display: flex;
  flex-flow: row nowrap;
  background: var(---background-color);
  flex-shrink: 0;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid var(--color-input-search);
}
.header__title {
  font-family: "Lato";
  color: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
  letter-spacing: 1pt;
}
.header__title-text {
  display: none;
  text-align: center;
}
.header__button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  margin: -0.5rem;
}
.header__button .header__info-button {
  display: block;
  margin: auto;
  height: 1.5rem;
}
.header .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.header .icon--large {
  width: 3rem;
  height: 3rem;
}
.header__transparent {
  background: #adadad00;
}
.header_profile_badge {
  position: absolute;
  top: 0;
  right: 0.5rem;
  height: 0.7rem;
  width: 0.7rem;
  background-color: var(--color-pop);
  border-radius: 50%;
  pointer-events: none;
}
.header_settings_badge {
  position: absolute;
  top: 0.6rem;
  right: -0.1rem;
  height: 0.7rem;
  width: 0.7rem;
  background-color: var(--color-pop);
  border-radius: 50%;
  pointer-events: none;
}
.header_support_badge {
  position: absolute;
  top: -3px;
  left: 17px;
  height: 0.7rem;
  width: 0.7rem;
  background-color: var(--color-pop);
  border-radius: 50%;
  pointer-events: none;
}

.hud-button {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  height: 28px;
}
.hud-icon-container {
  height: 100%;
  width: 8vw;
  padding-left: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hud-amount-text {
  color: white;
  font-size: 3vw;
}
.plus-icon {
  height: 4vw;
  padding-right: 2vw;
}
.plus-icon-hidden {
  visibility: hidden;
  padding-right: 0vw;
}

#footer-container {
  flex-basis: 3rem;
  height: calc(3rem + var(--safe-area-bottom-custom, 0px));
  width: 100%;
  padding-bottom: var(--safe-area-bottom-custom, 0px);
}

#footer-container.standalone {
  height: 3rem;
}

body.android.keyboard-visible #footer-container {
  display: none;
}

.footer {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  height: calc(3rem + var(--safe-area-bottom-custom, 0px));
  padding-bottom: var(--safe-area-bottom-custom, 0px);
  background: var(--background-color);
}

.footer.standalone {
  height: 3rem;
}

.footer-overlay {
  position: absolute;
  width: 100%;
  height: 3rem;
}
.footer__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  flex: 1;
  position: relative;
  padding-top: 1.2vw;
}
.footer__button::after {
  transition: -webkit-transform 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition: transform 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition: transform 260ms cubic-bezier(0.37, 0.2, 0.26, 1),
    -webkit-transform 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  border-radius: 2px;
  content: "";
  display: block;
  /* background: linear-gradient(135deg, #EDEDED 0%, #EDEDED 100%); */
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0.6rem;
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.footer__button.is-active {

}
.footer__button.is-active::after {
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.footer__button::after {
  border-radius: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.footer__icon {
  height: 4.5vw;
  width: 4.5vw;
  margin: 0 auto;
}
.footer__icon.footer-rewards-icon {
  height: 5.5vw;
  width: 5.5vw;
}
.footer__text {
  padding: 0.5vw 0;
  color: var(--color-white-dimmed);
  font-size: 3.2vw;
  font-weight: normal;
}
.footer__text.footer-rewards-text {
  margin-top: -1vw;
}
.footer__button.is-active > .footer__text{
  color: var(--color-pop);
}

.footer__active_indicator {
  height: 1.5vw;
  width: 1.5vw;
  margin: 0 auto;
  background: url("assets/img/nav/button-active-indicator.svg") center/contain no-repeat;
}

.footer__active_indicator.standalone {
  position: absolute;
  bottom: -4dvh;
}

.footer__label {
  font-size: 0.6875rem;
  font-weight: 700;
  pointer-events: none;
}
.footer__button[data-badge]::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  content: attr(data-badge);
  right: 3vw;
  top: 0;
  font-size: 3vw;
  min-width: 5.5vw;
  height: 5.5vw;
  border-radius: 100vw;
  background-color: var(--color-primary);
  color: var(--color-black);
}

.footer_profile_icon {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.profile-button > .footer_profile_icon {
  opacity: 0.5;
}
.footer-write-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.footer-write-button {
  position: absolute;
  height: 7vw;
  width: 11vw;
  padding: 0px 1vw;
  border: solid 1px rgba(255,255,255,0.6);
  background: #2c2c2c;
  border-radius: 10px;
}
.footer-write-button-left {
  position: absolute;
  right: 50%;
  height: calc(7vw - 1px);
  width: 6.7vw;
  background: var(--gradient-multiplayer);
  border-radius: 10px;
  pointer-events: none;
}
.footer-write-button-right {
  position: absolute;
  left: 50%;
  height: calc(7vw - 1px);
  width: 6.7vw;
  background: var(--gradient-primary);
  border-radius: 10px;
  pointer-events: none;
}

.footer .schedule-button .footer__icon_pulse {
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: footer_schedule_pulse 2s infinite;
}
@keyframes footer_schedule_pulse {
  0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(245, 105, 105, 0.7);
	}
	60% {
		transform: scale(1.2);
		box-shadow: 0 0 0 1.25vw rgba(245, 105, 105, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(245, 105, 105, 0);
	}
}

#sidemenu-container,
#stream-goals-popup-container,
#currency-info-popup-container,
#currency-daily-gift-modal-container {
  height: calc(100% - var(--safe-area-top-bottom-custom, 0px));
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: var(--background-color);
  overflow-x: hidden;
  transition: 0.5s;
  /*width: 100%;*/
  width: 0%;
}

#sidemenu-container {
  height: 100%;
}
#stream-goals-popup-container,
#currency-info-popup-container,
#currency-daily-gift-modal-container {
  left: auto;
  background-color: transparent;
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
  right: -100%;
}

#currency-daily-gift-modal-container {
  z-index: 2;
}
.radio_btn {
  height: 3vh;
  width: 3vh;
  background-color: #ccc;
  margin-left: 1vh;
  margin-top: 1vh;
  border-radius: 50%;
}
.radio_btn_active {
  background-color: #57a1bd;
}

.icon {
  display: block;
  fill: currentColor;
  pointer-events: none;
  margin: auto;
}

.removed {
  display: none !important;
}
.hidden {
  visibility: hidden;
}
.noTouch {
  pointer-events: none !important;
}

.transparent {
  opacity: 0;
}
.font-bold {
  font-weight: bold;
}
.text-shadow {
  text-shadow: 1px 1px #ababab;
}

.ellipsis-one-line {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.divButton {
  max-width: 80%;
  margin: auto;
  word-wrap: break-word;
  display: block;
  padding: 2px 10px;
  border: solid #707070 1px;
  font-family: caption;
  font-size: 14px;
  background: grey;
  border-radius: 2px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #f2f2f2),
    color-stop(1, #cfcfcf)
  );
  background-image: -o-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: -moz-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: -webkit-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: -ms-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: linear-gradient(to bottom, #f2f2f2 0%, #cfcfcf 100%);
  cursor: default;
  text-align: center;
}
.divButton:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #eaf6fd),
    color-stop(1, #a7d8f5)
  );
  background-image: -o-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: -moz-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: -webkit-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: -ms-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
  border: #3c7fb1 solid 1px;
}
.divButton:active {
  border: solid #2c628b 1px;
  padding: 2px 9px 2px 11px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #e5f4fc),
    color-stop(0.5, #c4e5f6),
    color-stop(0.51, #98d0ef),
    color-stop(1, #68b3db)
  );
  background-image: -o-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: -moz-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: -webkit-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: -ms-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: linear-gradient(
    to bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
}


.no-anim,
.no-anim > * {
  animation: none !important;
}

.choice_btn2 {
  background-color: #f7a397;
  max-width: 80%;
  margin: auto;
  word-wrap: break-word;
  display: block;
  padding: 2px 10px;
  border: solid #707070 1px;
  font-family: caption;
  font-size: 14px;
  background: grey;
  border-radius: 2px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #f2f2f2),
    color-stop(1, #cfcfcf)
  );
  background-image: -o-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: -moz-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: -webkit-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: -ms-linear-gradient(bottom, #f2f2f2 0%, #cfcfcf 100%);
  background-image: linear-gradient(to bottom, #f2f2f2 0%, #cfcfcf 100%);
  cursor: default;
  text-align: center;
}
.choice_btn2:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #eaf6fd),
    color-stop(1, #a7d8f5)
  );
  background-image: -o-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: -moz-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: -webkit-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: -ms-linear-gradient(bottom, #eaf6fd 0%, #a7d8f5 100%);
  background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
  border: #3c7fb1 solid 1px;
}
.choice_btn2:active {
  border: solid #2c628b 1px;
  padding: 2px 9px 2px 11px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #e5f4fc),
    color-stop(0.5, #c4e5f6),
    color-stop(0.51, #98d0ef),
    color-stop(1, #68b3db)
  );
  background-image: -o-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: -moz-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: -webkit-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: -ms-linear-gradient(
    bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
  background-image: linear-gradient(
    to bottom,
    #e5f4fc 0%,
    #c4e5f6 50%,
    #98d0ef 51%,
    #68b3db 100%
  );
}

.btn3 {
  transition: 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition-property: background, -webkit-transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #f7a397;
  height: 3rem;
  letter-spacing: 1pt;
  padding: 0 1.5rem;
}
.btn3:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.btn3:disabled {
  opacity: 0.5;
}
.btn3:disabled .btn__action {
  opacity: 0.5;
}

.btn4 {
  transition: 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition-property: background, -webkit-transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
}
.btn4:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.btn4:disabled {
  opacity: 0.5;
}
.btn4:disabled .btn__action {
  opacity: 0.5;
}
/*
.btn {
  transition: 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition-property: background, -webkit-transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #F4F5F7;
  border: 1px solid #E6E7E8;
  height: 3rem;
  letter-spacing: 1pt;
  padding: 0 1.5rem; }
  .btn:active:not(:disabled) {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  .btn:disabled {
    background: #343434; }
    .btn:disabled .btn__action {
      opacity: .5; }

*/


.ps-body-contents {
  background-color: #4d9cc3;
  height: 85%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  position: relative;
}

.ps-body-contents_locked {
  background-color: #ee8f60;
}

.trait_opacity_low {
  opacity: 0.35;
}

.hud-item-balances {
  position: absolute;
  top: 0.1vh;
  width: 100%;
  height: 7vh;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
}
.hud-items-hidden {
  transform: translate(0, -10vh);
  -webkit-transform: translate(0, -10vh);
  -o-transform: translate(0, -10vh);
  -moz-transform: translate(0, -10vh);
}

.hud_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}
.heart_container,
.sapphires_container {
  position: relative;
  opacity: 1;
  justify-content: flex-end;
}
.header-buttons-outside-wrapper {
  width: 100%;
  position: absolute;
  height: 0px;
  display: flex;
  justify-content: flex-end;
}
.header-buttons-wrapper {
  display: flex;
  width: calc(100vw - 3rem);
  position: relative;
  justify-content: flex-end;
  gap: 2vw;
  padding-right: 3vw;
}
.header-notification-button {
  position: relative;
  top: 0;
  right: 2vw;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.daily-goals-hud-badge {
  position: absolute;
  top: 0.5vw;
  right: 6vw;
  height: 1.5vw;
  width: 1.5vw;
  background-color: var(--color-pop);
  border-radius: 50%;
  pointer-events: none;
}

.header-search-button {
  right: 2vw;
  position: relative;
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-10deg);
  }
  10% {
    transform: rotate(10deg);
  }
  15% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(10deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(10deg);
  }
  35% {
    transform: rotate(0deg);
  }
}

.wiggle-animation {
  animation: wiggle 2s infinite;
}
.hud_button_text {
  padding-left: 1vw;
}

.social_button,
.discord_button,
.merch_button,
.create_button,
.sapphires_button,
.hearts_button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8rem;
  width: 90%;
  color: var(--color-white-dimmed);
  font-size: 3vw;
}
.discord_button img {
  height: 4.75vw;
}
.merch_button img {
  height: 5.2vw;
}
.create_button img {
  height: 4.75vw;
}

.hearts_button,
.sapphires_button {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 1.5vw 9vw 1.5vw 2vw;
  font: var(--font-body3);
  border-radius: 10vw;
  background: url('assets/design-library/ui/add-icon-highlight.svg') 90%/5.5vw no-repeat #2E2A45;
  /* margin-right: 9vw; */
}

.sapphires_button{
  background-image: none;
  padding-right: 2.5vw;
}
.hud-heart-icon {
  width: 5.5vw;
  margin-right: 5px;
}
.sapphires-expiration-icon {
  width: 4.5vw;
  transform: scale(1) rotate(0deg);
  animation: sapphirePulse 1.5s infinite;
}
@keyframes sapphirePulse {
  0% {
      transform: scale(0.92) rotate(0deg);
  }

  70% {
      transform: scale(1.05) rotate(10deg);
  }

  100% {
      transform: scale(0.92) rotate(0deg);
  }
}

.social_button img {
  height: 5.6vw;
}
.social_button[data-badge]::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  content: attr(data-badge);
  left: 0;
  top: -0.25rem;
  font-size: 3vw;
  min-width: 5.5vw;
  height: 5.5vw;
  border-radius: 100vw;
  background-color: var(--color-highlight);
  color: var(--color-white);
  padding: 0 2px;
}


.story-section {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color-dark);
  width: 100%;
  height: 100dvh;
}
.story-heart-container {
  width: calc((100vw - 3rem)/4);
  opacity: 1;
}
.story-section > canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.story-assets-loader {
  position: absolute;
  bottom: 1vw;
  right: 1vw;
  text-shadow: 0 1px #f7a397;
  color: white;
}

.choices {
  position: absolute;
  bottom: calc(10px + var(--safe-area-bottom-custom, 0px));
  left: 0px;
  height: 55vw;
  width: 100%;
  padding: 0 3vw;
}
.choices_result {
  -webkit-transform: scale(0.55) translateY(-135vh);
  transform: scale(0.55) translateY(-135vh);
}

.choice_btn {
  /* background-color:#F7A397;
    box-shadow: 1px 3px 1px #82749e;*/
  color: hsla(0, 0%, 0%, 0.75);
  text-align: center;
  width: 90%;
  word-wrap: break-word;
  display: block;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  margin: 0.75vh auto 1.75vh;
  height: 5.6vh;
  cursor: default;
  position: relative;
  border-image: url("assets/img/ui/textbox/choice@3x.png") 180 288 fill /
    64px 96px / 26px;
  background-color: rgb(216, 216, 216);
  /* border-image: url("assets/img/ui/textbox/speech@3x.png") 192 288 fill / 64px 96px / 32px;*/
}
.choice_btn_border {
  border: 5px solid transparent;
  border-image: none;
  margin: -1vw;
  border-radius: 15px;
}
.choice_btn_special {
  border-style: dashed;
  border-color: #ffabcc;
  border-width: 3px;
}
.choice_btn_special::before {
  content: "";
  border-style: solid;
  border-color: #00f;
  border-width: 5px;
}
.choice_btn_special::after {
  content: "";
  background-color: red;
}
.choice_btn_result {
  height: 7vw;
  width: 45%;
  margin: 2px auto 2px;
}
.choice_votes {
  width: 100%;
  display: flex;
  align-items: center;
}
.choice_votes_result {
  display: flex;
}
.choice_voter {
  margin: 3px;
}
.choice_voter_icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}
.choice_btn_text {
  font-size: 3.8vw;
  width: 100%;
  padding: 2vw;
  font-weight: bold;
  line-height: 5vw;
}
.choice_btn_text_result {
  font-size: 1.3vw;
}
.choice_btn_info {
  font-size: 2vw;
  color: #aaa;
}
.choice_btn_info_result {
  display: none;
}
.choice_btn_icon {
  height: 100%;
  overflow-x: hidden;
}
.choice_btn_icon_result {
  top: 0px;
}
.choice_btn_icon_stat_filter {
  height: 100%;
  display: flex;
  object-fit: cover;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.choice_btn_avatar {
  position: absolute;
  background-color: #cccccc;
  width: 8vw;
  top: 5px;
  left: 4vw;
  border-radius: 50%;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
}
.choice_btn_cost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 2vw 1vw;
  background: #383838;
  border-radius: 0 10px 10px 0;
}
.choice-info-container {
  position: absolute;
  bottom: calc(60vw + var(--safe-area-bottom-custom, 0px));
  width: 100%;
  padding: 0 3vw;
}
.choice-info-top {
  position: relative;
}
.choice-text-bubbles {
  position: absolute;
  bottom: -0.5vw;
  left: 69vw;
  width: 10vw;
}
.choice-text {
  position: relative;
  width: 100%;
  padding: 2vw 1.8vw;
  background: #FFF;
  font-size: 4.5vw;
  border: 0.5vw solid #F7A397;
  border-radius: 10px;
}

.choice_survey_btn {
  background-color: #f7a397;
  box-shadow: 1px 3px 1px #82749e;
  color: #fff;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  display: block;
  padding: 2px 10px;
  font-size: 14px;
  border-radius: 25px;
  margin: 5px auto 5px;
  height: 10vw;
  cursor: default;
  position: relative;
}
.choice_survey_btn_text {
  font-size: 3.8vw;
  margin-top: 1vw;
  letter-spacing: 0px;
  text-shadow: 1px 1px #4a425a;
}

.survey-scale-radio {
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  background-color: #bbb;
}
.survey-scale-radio-selected {
  background-color: #4d9dc3;
}

.btn5 {
  display: grid;
  grid-template-columns: 9.375vw 1fr 11vw;
  width: 100%;
  height: 16vw;
  margin: 0;
  padding: 0;
  background-color: #2C2C2C;
  color: #FFF;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0;
  border-image: none;
  border: 0.5vw solid transparent;
  transition: 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  transition-property: background, -webkit-transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
}
.btn5:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.btn5:disabled {
  opacity: 0.5;
}
.btn5:disabled .btn__action {
  opacity: 0.5;
}
.comments-button {
  position: absolute;
  bottom: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22vw;
  padding: 2vw;
  background-color: #F7A397;
  font-weight: normal;
  border-radius: 10px;
  pointer-events: all;
}
.comments-button > img {
  margin-right: 2vw;
}
#comments-counter {
  color: #fff;
  font-size: 4.25vw;
}

.character-info {
  position: absolute;
  left: 5vw;
  color: white;
  text-shadow: 1px 1px #000000;
  height: 0px;
  top: 65dvh;
  top: calc(65dvh - var(--safe-area-top-custom, 0px));
}

.comments {
  position: absolute;
  height: 0px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  margin: 0px;
  top: 65dvh;
  top: calc(65dvh - var(--safe-area-top-custom, 0px));
}

.comments_container {
  overflow-y: scroll;
  background-color: transparent;
  height: calc(65dvh - 3rem - 2.5vh);
  height: calc(65dvh - 3rem - 2.5vh - var(--safe-area-top-custom, 0px));
}

.comment_replies_container {
  position: absolute;
  top: 0;
  left: 100vw;
  width: 100%;
  overflow-y: scroll;
  background-color: #f5f5f5;
  height: calc(65dvh - 3rem - 2.5vh);
  height: calc(65dvh - 3rem - 2.5vh - var(--safe-area-top-custom, 0px));
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
}

.comment_replies_show {
  transform: translate(-100vw, 0);
  -webkit-transform: translate(-100vw, 0);
  -o-transform: translate(-100vw, 0);
  -moz-transform: translate(-100vw, 0);
}

.comment_replies_close_btn {
  width: 7.5vh;
  height: 5.5vh;
  right: 0vh;
  position: absolute;
  top: 0px;
  z-index: 100;
  pointer-events: all;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
}

.comment_replies_close_btn_show {
  transform: translate(-7.5vh, 0);
  -webkit-transform: translate(-7.5vh, 0);
  -o-transform: translate(-7.5vh, 0);
  -moz-transform: translate(-7.5vh, 0);
}
/*
.comment_replies_sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width:2.5rem;
  overflow-y: scroll;
  background-color: #f009;
  height:calc(65vh - 3rem - 5.5vh);
  height:calc(65vh - 3rem - 5.5vh - var(--safe-area-top-custom, 0px));
}
*/

.comment-button {
  /*
  animation: pulse 4s infinite cubic-bezier(.36,.07,.19,.97) both;*/
  animation-delay: 350ms;
}

.comment-button-pulse {
  animation: pulse 4s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.comment-button-shake {
  animation: shake 4s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.1);
  }
  10% {
    transform: scale(1);
  }
}

@keyframes shake {
  2%,
  18% {
    transform: translate3d(-1px, 0, 0);
  }
  4%,
  16% {
    transform: translate3d(2px, 0, 0);
  }
  6%,
  10%,
  14% {
    transform: translate3d(-4px, 0, 0);
  }
  8%,
  12% {
    transform: translate3d(4px, 0, 0);
  }
}
.comment_input_send {
  font-size: 1rem;
  font-weight: 700;
  transition: "opacity" 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  color: #616161;
  letter-spacing: 1pt;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3rem;
  width: 4rem;
  opacity: 1;
}

.comment_input_send:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  color: #7d7d7d;
}
.comment_input_send:disabled {
  color: #cccccc;
}

.teamchat_input_send {
  font-size: 1rem;
  font-weight: 700;
  transition: "opacity" 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  color: #616161;
  letter-spacing: 1pt;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3rem;
  width: 4rem;
  opacity: 1;
}
.teamchat_input_send:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  color: #7d7d7d;
}
.teamchat_input_send:disabled {
  color: #cccccc;
}
.teamchat_container {
  height: calc(100% - 6rem);
  height: calc(100% - 6rem - var(--safe-area-top-bottom-custom, 0px));
  overflow-y: scroll;
  pointer-events: all;
}

.teamchat_tab_item {
  border-bottom: 1px solid #4384b0;
  border-top: 1px solid #4384b0;
  box-shadow: 0px 4px 1px 1px #4384b0;
  height: 4rem;
  width: 8vw;
  background-color: #4d9dc3;
  position: absolute;
  top: 0;
  left: 12vw;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  animation-direction: alternate;
  animation-fill-mode: both;
}
.teamchat_tab_item_animate {
  animation-name: tab_flash;
}
.teamchat_item.deleted-by-owner .comment_body {
  font-style: italic;
  color: var(--color-gray-mid);
}
@keyframes tab_flash {
  0% {
    background-color: #4d9dc3;
  }
  5% {
    background-color: #8eb9cd;
  }
  10% {
    background-color: #4d9dc3;
  }
}

.tutorial-pointer-container {
  position: absolute;
  width: 25%;
  bottom: 46%;
  right: 0px;
  height: 6rem;
  display: flex;
  align-items: center;
}
.tutorial-pointer-unlocks-position {
  bottom: calc(30% - 10vw);
}
.tutorial-pointer-stats-position {
  bottom: calc(50% + 10px);
  right: calc(38% - 2rem + 20px);
}
.tutorial-pointer {
  margin-right: 20px;
  right: 0px;
  width: 4rem;
  position: absolute;
  bottom: 10px;
}
.pointer-anim {
  animation-duration: 0.75s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
@keyframes bounce {
  from {
    bottom: 10px;
  }

  to {
    bottom: -10px;
  }
}

@keyframes bounceTop {
  from {
    top: -9vh;
  }

  to {
    top: -11vh;
  }
}
.tutorial-pointer-side-container {
  position: absolute;
  width: 25%;
  top: 7vh;
  right: 10vw;
  height: 5rem;
  display: flex;
  align-items: center;
}
.tutorial-pointer-side {
  margin-right: 20px;
  right: 0px;
  width: 4rem;
  position: absolute;
  bottom: 10px;
}
.pointer-side-anim {
  animation-duration: 0.75s;
  animation-name: bounce-side;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
@keyframes bounce-side {
  from {
    right: 10px;
  }

  to {
    right: -10px;
  }
}

.tutorial-chat-pointer-container {
  position: absolute;
  width: 25vw;
  top: 48vh;
  top: calc(48vh - var(--safe-area-top-custom, 0px));
  height: 10vh;
  display: flex;
  justify-content: center;
}
.tutorial-chat-pointer {
  position: absolute;
  bottom: 10px;
}
.tutorial-chat-cover {
  height: 58.5dvh;
  height: calc(58.5dvh - var(--safe-area-top-custom, 0px));
}

@keyframes expand-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shrink {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.home-pointer-container {
  position: absolute;
  width: 20%;
  bottom: 0;
  right: 0px;
  height: 6rem;
  display: flex;
  align-items: center;
}
.home-pointer {
  right: 0px;
  width: 4rem;
  position: absolute;
  bottom: 10px;
}

.choice_tutorial_btn {
  background-color: #fff;
  box-shadow: 1px 3px 1px #82749e;
  color: #000;
  text-align: center;
  width: 90%;
  word-wrap: break-word;
  display: flex;
  padding: 2px 10px;
  font-size: 14px;
  border-radius: 25px;
  margin: 0.75vh auto 0.75vh;
  height: 5.6vh;
  cursor: default;
  position: relative;
  justify-content: center;
  align-items: center;
}
.choice_tutorial_btn_text {
  font-size: 4.6vw;
  letter-spacing: 0px;
}

.choices_tutorial {
  position: absolute;
  padding-right: 10px;
  padding-left: 10px;
  bottom: 10px;
  width: 100%;
  left: 0px;
  height: 30vh;
  transition: all 0.5s;
  transform-origin: left;
  transition-timing-function: ease-out;
}

.choice_tutorial_container {
  left: 100vw;
  transition: all 0.4s ease-out;
  -webkit-transition: all 0.4s ease-out; /** Chrome & Safari **/
  -moz-transition: all 0.4s ease-out; /** Firefox **/
  -o-transition: all 0.4s ease-out; /** Opera **/
}
.choice_shift_left {
  transform: translate(-100vw, 0);
  -webkit-transform: translate(-100vw, 0); /** Chrome & Safari **/
  -o-transform: translate(-100vw, 0); /** Opera **/
  -moz-transform: translate(-100vw, 0); /** Firefox **/
}

.personality_stat_content {
  animation: spin 25s linear infinite reverse;
}

.personality_stat_container {
  width: 13vh;
  height: 13vh;
  /*margin: 10px auto;*/
  /* border: 1px solid #000;
 position: relative;*/
  border-radius: 50%;
  animation: spin 25s linear infinite;
}
.personality_stat_item {
  width: 4vh;
  height: 4vh;
  line-height: 4vh;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  color: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  /* animation: spin 20s linear infinite reverse;*/
}
@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

.growStat {
  animation-name: growStat;
  -webkit-animation-name: growStat;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  visibility: visible !important;
}
@keyframes growStat {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(2.1);
  }
  80% {
    transform: scale(1.9);
  }
  100% {
    transform: scale(2);
  }
}
@-webkit-keyframes growStat {
  0% {
    -webkit-transform: scale(1);
  }
  60% {
    -webkit-transform: scale(2.1);
  }
  80% {
    -webkit-transform: scale(1.9);
  }
  100% {
    -webkit-transform: scale(2);
  }
}

.shrinkStat {
  animation-name: shrinkStat;
  -webkit-animation-name: shrinkStat;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  visibility: visible !important;
}
@keyframes shrinkStat {
  0% {
    transform: scale(2);
  }
  60% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes shrinkStat {
  0% {
    -webkit-transform: scale(2);
  }
  60% {
    -webkit-transform: scale(0.9);
  }
  80% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.greyscale {
  animation-name: greyscale;
  -webkit-animation-name: greyscale;
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  visibility: visible !important;
}
@keyframes greyscale {
  0% {
    background-color: inherit;
  }
  100% {
    background-color: #aeaeae;
  }
}
@-webkit-keyframes greyscale {
  0% {
    background-color: inherit;
  }
  100% {
    background-color: #aeaeae;
  }
}

.narrator_image {
  height: 15vh;
  background-color: #f7f7f7;
  border-radius: 50%;
  position: absolute;
}

.fadeOut {
  animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  visibility: visible !important;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ending_box {
  border: 10px solid #82749e;
}

.stat-changes {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.stat-change {
  background-color: #fff;
  border-radius: 25px;
  display: flex;
  flex-direction: row;
  margin: 5px;
}
.stat-change-text {
  color: #888;
  text-shadow: 1px 1px #444;
  font-weight: 300;
  margin-left: 10px;
  margin-right: 10px;
}
.stat-change-icon {
  height: 2.5rem;
  border-radius: 50%;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
}
.stat-change-big {
  background-color: #fff;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5px;
}
.stat-change-text-big {
  color: #888;
  text-shadow: 1px 1px #444;
  font-weight: 300;
  margin-left: 10px;
  margin-right: 10px;
}
.stat-change-icon-big {
  height: 4rem;
  border-radius: 50%;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 3px;
}

.avatar-container {
  height: auto;
  width: 90%;
  position: absolute;
  bottom: 0px;
  left: 5%;
  transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
}

.avatar-image {
  width: 100%;
  height: auto;
  bottom: 0px;
  position: absolute;
  left: 0px;
}

.section-edit-items,
.section-edit-item-type {
  width: 30vw;
  height: 100%;
  transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
}
.section-edit-item-type-out {
  transform: translate(30vw, 0);
  -webkit-transform: translate(30vw, 0);
  -o-transform: translate(30vw, 0);
  -moz-transform: translate(30vw, 0);
}

.avatar_edit_item {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 6vw;
}
.avatar_edit_item_btn,
.avatar_edit_item_back_btn {
  width: 26vw;
  height: 6vh;
  border-radius: 50px;
  background-color: #e9eaf0;
  box-shadow: 1px 3px 1px #455161;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar_edit_item_text {
  color: #000;
  font-family: "Arial";
  font-weight: 700;
  font-size: 3.5vw;
  pointer-events: none;
}
.avatar_buffer {
  height: 10vh;
  width: 100%;
}

/*
.edit_tab_fill {
  background-color: transparent;
  width: 100%;
  flex-grow: 1;}
.edit_tab_fill.edit_tab_active {
    background-color: #272A30;}
*/
.store_item {
  background-color: #e0e4eb;
  margin: 2vw 2vw 2vw;
  border-radius: 15px;
}
.store_tab {
  height: 100%;
  width: 100%;
  background-color: #c8c8c8;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.store_tab_active {
  background-color: #ffffff;
  color: #000;
}

.store_buffer {
  height: 10vh;
  width: 100%;
}

.green {
  color: green;
}

.result_choice_item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  height: 22%;
  position: relative;
  box-shadow: 0px 4px 1px 1px #d5d0e3;
  width: 96%;
  margin-left: 2%;
}
.result_choice_item_selected {
  background-color: #ee8f60;
}
.result_choice_voter {
  height: 100%;
  display: flex;
  justify-content: center;
  margin: 5px;
}
.result_choice_voter_icon {
  background-color: #e4e4ec;
  height: 90%;
  width: auto;
  object-fit: cover;
  border-radius: 50px;
}

.chat_input_send {
  font-size: 1rem;
  font-weight: 700;
  transition: "opacity" 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  color: #616161;
  letter-spacing: 1pt;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3rem;
  width: 4rem;
  opacity: 1;
}
.chat_input_send:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  color: #7d7d7d;
}
.chat_input_send:disabled {
  color: #cccccc;
}

.chat_item {
  padding: 0.4rem 0.75rem 0.4rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  border-bottom: 1px solid #eee;
}
.chat_inner {
  flex: 1;
  margin-left: 0.75rem;
}
.chat_meta {
  display: flex;
  flex-flow: row nowrap;
  font-size: 0.875rem;
  color: #000;
}
.chat_p {
  margin: 0;
}
.chat_name {
  font-family: "Lato";
  font-weight: bold;
}
.chat_body {
  font-family: "Lato";
  font-weight: normal;
}

.chat-tab {
  background-color: #ccc;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  font-size: 1rem;
}
.chat-tab-active {
  background-color: #fff;
}

/* .friends_tab {
  height: 100%;
  width: 100%;
  background-color: #C8C8C8;
  position: absolute;
  top: 0px;
  left: 0px;
  display:flex;
  justify-content: center;
  align-items: center;}
  .friends_tab_active {
    background-color: #FFFFFF;
    color:#000;} */

.mail_tab {
  height: 100%;
  width: 100%;
  background-color: #c8c8c8;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mail_tab_active {
  background-color: #ffffff;
  color: #000;
}

/*
.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 38px solid transparent;
  border-top-color: #00aabb;
  border-bottom: 0;
  border-left: 0;
  margin-left: -19px;
  margin-bottom: -38px;
}*/

/*
.profile-instructions {
  font-family:'Lato';
  position:absolute;
  color: #000;
  font-size: 1.2rem;
  line-height: 1.5em;
  background-color: #FFF;
  border-radius: 25px;
  margin-left: 5%;
  width: 90%;
  top: 64%;
  padding: 20px;}
*/
/*
.profile-instructions-text {
font-family:'Lato';
position:absolute;
color: #000;
font-size: 1.2rem;
line-height: 1.5em;
background-color: #FFF;
border-radius: 25px;
margin-left: 5%;
width: 90%;
box-shadow: 0px 4px 1px 1px #D5D0E3;
top: 64%;
padding: 20px;}

*/
#console-printout {
  background: transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  z-index: 9999;
}

.pullout {
  position: absolute;
  top: calc(-100dvh + 3rem);
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: transparent;
  transition: all 0.25s ease;
  pointer-events: none;
}

.pullout.active {
  top: 0;
}

.pullout-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100dvh - 3rem);
  background: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 5px;
  pointer-events: all;
}

.pullout-tab {
  position: absolute;
  bottom: 0;
  right: 35%;
  width: 30%;
  height: 3rem;
  background: #ccc;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  cursor: pointer;
}

.pullout-tab-button {
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  font-size: 1.4rem;
}

.debug-line {
  margin-bottom: 0;
  word-wrap: break-word;
}

.pullout-reset {
  position: absolute;
  bottom: 0;
  right: 1%;
  width: 30%;
  height: 3rem;
  background-color: #99f;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

.pullout-disable {
  position: absolute;
  bottom: 0;
  left: 1%;
  width: 30%;
  height: 3rem;
  background-color: #f99;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

.debug-button-hidden {
  position: absolute;
  top: 0;
  right: 35%;
  width: 30%;
  height: 3rem;
  background: transparent;
  z-index: 9998;
}

#font_width_test {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap; /* Thanks to Herb Caudill comment */
}

:root {
  --offset: 0px;
  --storyCommentTop: 70dvh;
  --storyCommentHeight: 60dvh;
}

@keyframes backAndForth {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(calc(-100% + var(--offset)));
  }
  60% {
    transform: translateX(calc(-100% + var(--offset)));
  }
  90% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  display: inline-block;
  width: 17vh;
  height: 19vh;
  margin-left: 30vw;
}

#chapter-end-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chapter-end-progress > .inner {
  position: absolute;
}
#chapter-end-progress > svg {
  height: 100%;
  display: block;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MAIL TODO: move to mail.css and use import (couldn't get it to work right away so coming back to it. */

.mail-view{
  background-color: #1C1C1C;
  color: white;
  height: 100%;
}

.mail-badge {
  position: absolute;
  top: -1vw;
  right: -2vw;
  height: 4vw;
  width: 4vw;
  color: var(--color-white);
  font-size: 2.8vw;
  text-align: center;
  background-color: var(--color-pop);
  border-radius: 50%;
  pointer-events: none;
}

.mail-container{
  position: relative;
  margin: 0;
  background-color: rgba(0,0,0,0.0);
  width: 100%;
  overflow-y: scroll;
  height: calc(100% - 3rem);
}

.mail-header{
  border-bottom: 1px solid #ccc;
}

.mail-header-label{
  margin: 0;
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0);
  font-size: 1.4rem;
}

.mail-column-item{
  margin: 4px;
  padding-top: 8px;
  background-color: rgba(0,0,0,0.0);
}
.mail-action-button{
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
}
.mail-timestamp{
  color:rgba(255,255,255,.8);
  font-size:14px;
  align-self: center;
}
.mail-title{
  word-break: break-word;
  font-size:18px;
  line-height: 28px;
  letter-spacing: 0;
}
.mail-body{
  word-break: break-word;
  font-size:16px;
  line-height: 20px;
  margin-top:8px;
  padding-bottom:8px;
}
.mail-bottom-row{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.mail-icon{
  height:32px;
  width:32px;
}
.mail-content{
  flex-grow:1
}
.mail-item{
  padding:16px;
  color:white;
  display: flex;
  flex-direction: row;
  position: relative;
  font-weight: normal;
}
.mail-item .icon-column {
  padding:8px;
}
.mail-item::after{
  content: "";
  position: absolute;
  height: 1px;
  background: #676767;
  top: 99%;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
}

.tkb-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5vw;
  row-gap: 2.5vh;
  pointer-events: none;
  padding-bottom: 3vh;
}
.tkb-request {
  border-radius: 10px;
  background-color: #f7a397;
  box-shadow: 1px 3px 1px#767676;
  color: #fff;
  text-shadow: none;
  padding: 0vw 0vw;
  height: calc(19vw + 7vh);
  width: 21vw;
  pointer-events: all;
}

.at-max-keys {
  background: green;
  margin: 0 2vw;
  color: white;
}

ol.request-help-popup-team-container {
  list-style: none;
  counter-reset: item;
}
li.request-help-popup-player {
  counter-increment: item;
  margin-bottom: 5px;
}
li.request-help-popup-player:before {
  content: counter(item);
  text-align: center;
  margin: auto 0;
}
.request-help-popup-team-container {
  height: 60%;
  width: 100%;
  padding: 0 3vw;
  margin: 0;
  font-size: 4vw;
  line-height: normal;
  overflow-y: scroll;
  overflow-x: hidden;
}
.request-help-popup-player {
  border-bottom: 1px solid #ccc;
  width: 100%;
  height: 10vh;
  display: flex;
  align-items: center;
}
.request-help-popup-player-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  margin-left: 3vw;
}
.request-help-popup-player-info {
  margin: auto 0;
  width: 60vw;
}
.request-help-popup-player-image {
  position: relative;
  left: -2vw;
}
.request-help-popup-player-name {
  width: 57%;
  font-size: 3.3vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.request-help-popup-player-btn-container {
  color: white;
  position: absolute;
  right: 0;
}
.request-help-popup-player-btn {
  background-color: #4d9dc3;
  border-radius: 15px;
  height: 7vw;
  font-size: 3vw;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0px 2px 1px #3d6f9f;
}

.story_comments {
  position: absolute;
  height: 0px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  margin: 0px;
  top: var(--storyCommentTop);
  top: calc(var(--storyCommentTop) - var(--safe-area-top-custom, 0px));
}

.story_comments_container {
  overflow-y: scroll;
  background-color: transparent;
  height: var(--storyCommentHeight);
  height: calc(var(--storyCommentHeight) - 3rem - 2.5vh);
  height: calc(var(--storyCommentHeight) - 3rem - 2.5vh - var(--safe-area-top-custom, 0px));
}

.story_comment_replies_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: scroll;
  background-color: #f5f5f5;
  height: calc(var(--storyCommentHeight) - 3rem - 2.5vh);
  height: calc(var(--storyCommentHeight) - 3rem - 2.5vh - var(--safe-area-top-custom, 0px));
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;

  transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
}

.story_comment_replies_show {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
}

.story_comment_replies_close_btn {
  width: 7.5vh;
  height: 5.5vh;
  right: 0vh;
  /* right: -7.5vh; */
  position: absolute;
  top: 0px;
  z-index: 100;
  pointer-events: all;
  /*  background-color: #f00; */
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
}

.story_comment_replies_close_btn_show {
  transform: translate(-7.5vh, 0);
  -webkit-transform: translate(-7.5vh, 0);
  -o-transform: translate(-7.5vh, 0);
  -moz-transform: translate(-7.5vh, 0);
}

.story_comment-button {
  /*
  animation: pulse 4s infinite cubic-bezier(.36,.07,.19,.97) both;*/
  animation-delay: 350ms;
}

.story_comment_input_send {
  font-size: 1rem;
  font-weight: 700;
  transition: "opacity" 260ms cubic-bezier(0.37, 0.2, 0.26, 1);
  color: #616161;
  letter-spacing: 1pt;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3rem;
  width: 4rem;
  opacity: 1;
}

.story_comment_input_send:active:not(:disabled) {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  color: #7d7d7d;
}

.story_comment_input_send:disabled {
  color: #cccccc;
}

.no-overflow {
  overflow-y: hidden;
  overflow-x: hidden;
}

@keyframes blingKeyframes {
  0% {
    box-shadow: 0px 0px 5px 5px rgba(253, 255, 142, 0);
  }
  80% {
    box-shadow: 0px 0px 5px 5px rgba(253, 255, 142, 1);
  }
  100% {
    box-shadow: 0px 0px 5px 5px rgba(253, 255, 142, 0);
  }
}

.bling {
  animation: blingKeyframes 1s linear infinite;
}

#rename-text-input {
  background-color: #383838;
  color: #FFF;
  font-size: 6vw;
  width: 90%;
  margin-left: 5%;
  margin-top: 5px;
  padding: 5px 10px 5px;
  border-radius: 15px;
  height: 12vw;
}
#rename-text-input.error {
  color: #bc0808;
}

.profile-name-status {
  text-align: center;
  color: var(--color-green);
  font-size: 4vw;
  margin-top: 2px;
}
.profile-name-status.error {
  color: #bc0808;
}

.profile-user-name {
  font-size: 3.9vw;
  position: relative;
  white-space: nowrap;
}

.profile-secondary-header {
  position: relative;
}

/* .profile-avatar-container {
  height: auto;
  width: 35vh;
  position: absolute;
  bottom: 0px;
  left: 0;
  transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
}

.profile-avatar {
  position: absolute;
  top: calc(7.5vh + 4% + 10vh);
  left: 0;
  height: calc(100% - 17.5vh - 4.0%);
}
.profile-avatar.profile-avatar-left {
  right: 30%;
}
.profile-avatar.profile-avatar-center {
  width: 100%;
}
#profile-top-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#profile-top-progress > .inner {
  position: absolute;
}
#profile-top-progress > svg {
  height: 100%;
  display: block;
}

*/



.tab {
  background-color: #2c2c2c;
}

.active-profile-tab {
  color: #f7a397;
  border-bottom: solid 3px #f7a397;
}

.profile-memories {
  position: absolute;
  top: 8vh;
  height: 100dvh;
  width: 100%;
  display: none;
}

/* .profile-memories{
  transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transform: 3rem;
} */

/* .no-transition{
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
} */

.profile-memories-open {
  display: block;
}

.photos_container {
  display: block;
  background-color: #1c1c1c;
  /* box-shadow: 1px 4px 2px 2px #DDDFE7; */
  /* border-radius: 15px; */
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-avatar-tall {
  position: absolute;
  right: 48.5vw;
  bottom: 0;
  height: 32vh;
}
.banner-avatar-bust {
  position: absolute;
  right: 48.5vw;
  bottom: -40vh;
  height: 80dvh;
}

.book-case {
  position: relative;
  display: flex;
  flex-direction: column;
}

.launch_character_right {
  height: 38vh;
  width: auto;
  position: absolute;
  bottom: 0px;
  right: 71vw;
}

.launch_character_right_image {
  height: 40vh;
  width: auto;
  position: absolute;
  bottom: 0px;
  left: 0vw;
}

.outer {
  margin: 1px;
}

.launchContent {
  background: none repeat scroll 0 0 #ffffff;
}

.slideLeft {
  -webkit-transform: translate(-100vw, 0);
  -moz-transform: translate(-100vw, 0);
  -o-transform: translate(-100vw, 0);
  -ms-transform: translate(-100vw, 0);
  transform: translate(-100vw, 0);
}

.slideRight {
  -webkit-transform: translate(calc(current_pos + 100vw), 0);
  -moz-transform: translate(100vw, 0);
  -o-transform: translate(100vw, 0);
  -ms-transform: translate(100vw, 0);
  transform: translate(100vw, 0);
}

.scroll-surface {
  position: absolute;
  height: 45vh;
  width: 90vw;
  top: 0px;
  left: 0px;
  border-radius: 12px 12px 0px 0px;
  overflow-x: scroll;
}

.multi {
  height: 50%;
  width: 100%;
  background-image: linear-gradient(#80f5bc, #9e96fc);
  font-weight: normal;
  font-size: 3.5vw;
}

.multi.disabled {
  background-image: linear-gradient(#353636, #606061);
}
.choice-timer-container {
  position: absolute;
  top: 21%;
  left: 12%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vw;
  width: 30vw;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 6vw;
  text-align: center;
  border: solid 1vw #F7A397;
  border-radius: 50%;
}



.grey-fill {
  fill: grey;
}

.white-fill {
  fill: white;
}
.desat-light-fill {
  fill: var(--color-desat-light);
}
.red-fill {
  fill: var(--color-red);
}
.scale-up {
  transform: scale(1.4);
}

.chapter-story-write-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 14vw;
  padding: 2.5vw 1.5vw;
  background-color:#F7A397;
  font-size: 3.7vw;
  font-weight: normal;
  border-radius: 10px;
  text-align: center;
}

.currently-worn-item {
  box-shadow: 0 0 20px rgba(81, 203, 238, 1);
}

.dev_button {
  width: 94%;
  height: 7vh;
  border-radius: 50px;
  font-size: 3.5vw;
  color: #fff;
  text-shadow: 1px 1px #4a425a;
  white-space: normal;
  margin: 1vh 0vw 1vh 2%;
}

.multi-modalcontent-purchase-container {
  height: 75dvh;
  background-color: #2c2c2c;
  color: white;
  border-radius: 7px;
}
.multi-modalcontent-purchase-title {
  text-align: center;
  font-size: 5vw;
  height: 10%;
  padding-top: 15px;
}
.multi-modalcontent-purchase-description {
  height: 33%;
  font-size: 3.75vw;
  line-height: 5.5vw;
  text-align: center;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multi-modalcontent-purchase-offer-container {
  position: relative;
  height: 62%;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.combo-modalcontent-purchase-offer {
  position: relative;
  /*  background-color: #1C1C1C;*/
  background-image: linear-gradient(to bottom, #f7a397, #ffd7aa);
  height: 15vh;
  width: 95%;
  padding: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 2px solid #f7a397;
}

.combo-modalcontent-purchase-offer-left {
  width: 20%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.combo-modalcontent-purchase-image-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.combo-modalcontent-purchase-hearts-image {
  height: 7vh;
}
.combo-modalcontent-purchase-amount-container {
  height: 100%;
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.combo-modalcontent-purchase-amount-text {
  font-size: 2.75vh;
  color: #000;
  /*text-shadow: 1px 1px #4a425a;*/
}
.combo-modalcontent-purchase-buy-button {
  width: 40%;
  bottom: 0px;
  border-radius: 8px;
  background-color: #1c1c1c;
  /*box-shadow: 1px 3px 1px #82749e;*/
  position: relative;
  border: 2px solid #f7a397;
  height: 3rem;
}
.combo-modalcontent-purchase-buy-button:active {
  background-color: #606060;
}

.combo-modalcontent-purchase-price-container {
  height: 100%;
  width: 75%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.combo-modalcontent-purchase-price-text {
  font-size: 5.5vw;
  color: white;
  /*text-shadow: 1px 1px #4a425a; */
  text-align: center;
  padding-left: 30px;
}

.purchase-discount-tag {
  position: absolute;
  background-color: #cea0fc;
  bottom: -4vw;
  color: black;
  padding: 1px 10px;
  border-radius: 5px;
  font-size: 5vw;
  pointer-events: none;
}

.modalcontent-purchase-container {
  height: 30vh;
}
.modalcontent-purchase-title {
  text-align: center;
  font-size: 5vw;
  height: 15%;
  padding-top: 15px;
}
.modalcontent-purchase-description {
  line-height: 1rem;
  text-align: center;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modalcontent-purchase-offer-container {
  height: 35%;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalcontent-purchase-offer {
  position: relative;
  background-color: #1c1c1c;
  width: 90%;
  padding: 2px 10px;
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 2px solid #f7a397;
}

.modalcontent-purchase-offer-left {
  width: 55%;
  height: 100%;
  position: relative;
}
.modalcontent-purchase-image-container {
  width: 60%;
}
.modalcontent-purchase-image {
  width: 75%;
}
.modalcontent-purchase-image-container2 {
  width: 25%;
}
.modalcontent-purchase-image2 {
  width: 100%;
}
.modalcontent-purchase-amount-container {
  height: 100%;
  width: 60%;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalcontent-purchase-amount-text {
  font-size: 7.5vw;
  color: #fff;
  text-shadow: 1px 1px #4a425a;
}
.modalcontent-purchase-buy-button {
  width: 40%;
  bottom: 0px;
  border-radius: 8px;
  background-color: #f7a397;
  /*box-shadow: 1px 3px 1px #82749e;*/
  position: relative;
  height: 2.5rem;
}
.modalcontent-purchase-buy-button:active {
  background-color: #f9beb6;
}
.modalcontent-purchase-price-container {
  height: 100%;
  width: 75%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalcontent-purchase-price-text {
  font-size: 5.5vw;
  color: #000;
  /*text-shadow: 1px 1px #4a425a; */
  text-align: center;
  padding-left: 30px;
}
.modal-buy-button > * {
  pointer-events: none;
}

.raise-up {
  z-index: 2;
}

.modal-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.comment-board-modal,
.comment-reply-panel {
  --comment-panel-input-height: 13vw;
  --in-modal-hot-new-container-height: 9vh;
  --comment-board-heading-height: 19vw;
  --tab-title-height: 11vw;
}

.comment-reply-panel{
  position:fixed;
  /* height:calc(100% - var(--safe-area-top-custom, 0px)); */
  height: 100%;
  left:0;
  right:0;
  background: rgb(28,28,28);
  z-index: 1001;
}

.comment-reply-panel.is-transitioning{
  transition: all .75s;
}
.comment-reply-panel-down{
  bottom:100dvh;
  opacity:0;
  visibility: hidden;
}

.comment-reply-panel.comment-reply-panel-up{
  bottom:0;
  opacity: 1;
  visibility:unset;
  z-index: 2;
}

.comment-reply-panel .comment-panel-textarea-container.textarea-keyboard-up {
  bottom: 0;
}
.comment-panel-dismiss.top-dismiss-button {
  top: var(--safe-area-top-custom, 0px);
}
.comment-panel-dismiss-img{
  width:2rem;
  height:2rem;
  transform:rotate(0deg);
  transition: all .3s
}
.modal-panel-dismiss-img{
  height: 3vh;
  width: 3vh;
}
.rotate-270{
  transform:rotate(90deg)
}
.feed-panel-top-button-container{
  width:100%;
  height:10vw;/*44px;*/
  display: flex;
  flex-direction:row;
  justify-content: center;
  background:#2C2C2C;
  /* font-size: 16px; */
}
.feed-panel-left-button{
  width:50vw;
  text-align:center;
  background: #2c2c2c;
  color: white;
}
.feed-panel-right-button{
  width:50vw;
  text-align:center;
  background: #2c2c2c;
  color: white;
}
.new-or-hot-active{
  border-bottom: 3px solid #F7A397;
  color: #F7A397;
}
.comment-panel-textarea-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  left: 0;
  right: 0;
  bottom: var(--safe-area-bottom-custom, 0px);
  height: var(--comment-panel-input-height);
  width: 100%;
  margin: 0;
  padding: 2vw;
  background: #383838;
}
.comment-panel-textarea-container#modal-textarea-container {
  bottom: 0;
}
.comment-panel-textarea-container.keyboard-up {
  /* padding-bottom: 30px; */
}
.textarea-container-full-screen {
  bottom:0;
  margin-bottom: var(--safe-area-bottom-custom, 0px);
}
.textarea-keyboard-up {
  bottom: 0;
  /* margin-bottom: 0; */
  /* height: auto; */
}

.comment-panel-textarea-submit-column {
    /* position: absolute;
    right: 1vw;
    top: 2vw; */
    margin-left: auto;
}
.comment-panel-textarea::placeholder {
  color: rgba(255,255,255,.5);
}
.textarea-wrapper {
  position: relative;
  height: calc(4vw + var(--lines) * 16px);
  width: 100%;
  overflow: hidden;
}
.comment-panel-textarea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  outline: none;
  border: none;
  border-radius: 8px;
  background: #676767;
  color: rgba(255, 255, 255, .5);
  resize: none;
  width: 100%;
  height: 100%;
}
.modal-textarea-shadow {
  background: transparent none;
  color: transparent;
}
.comment-panel-textarea,
.modal-textarea-shadow {
  font-size: 14px;
  font-family: monospace;
  padding: 2vw;
  margin: 0;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.comment-panel-textarea.reply-to-reply{
  height:calc(100% - 1.5em - 4vw)
}
.top-dismiss-button {
  color:white;
  position: absolute;
  top:0;
  left:0;
  margin:1rem .5rem;
}
.comment-container.deleted-by-owner .comment-text-content,
.activity-feed-notification.deleted-by-owner .user-replied-text-content,
.user-replied-container.deleted-by-owner .user-replied-text-content {
  font-style: italic;
  color: var(--color-gray-mid);
}
.comment-container, .user-replied-container {
  width:100%;
  display: flex;
  flex-direction: row;
  color: white;
  padding:16px;
}

.user-replied-container, .activity-feed-container {
  position:relative;
  overflow: hidden;
  width:100vw;
  min-width: 100vw;
  transition: all;
  transition-duration: 500ms;
}
.comment-body, .user-replied-body{
  flex-grow:1;
  display:flex;
  flex-direction:column;
}
.user-replied-container::after{
  content: "";
  position: absolute;
  height: 1px;
  background: #676767;
  top: 96%;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
}
.comment-container::after {
  content: "";
  position: absolute;
  height: 1px;
  top: 97%;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
}
.tombstone::after{
  content: "";
  position: absolute;
  height: 1px;
  top: 97%;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
}
.comment-top-row, .user-replied-top-row {
  display: flex;
  flex-direction: row;
}
.portrait-column{
  display: flex;
  align-items:center;
  flex-direction: column;
  flex-grow: 0;
  margin-right:16px;
}
.portrait-column .portrait{
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  object-fit: cover;
}
.user-replied-container .portrait {
  margin-top:8px;
}
.activity-feed-container .portrait {

}
.comment-header {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.user-replied-header, .comment-header{
  margin-bottom: 3vw;
}
.comment-username, .user-replied-username{
  font-size:18px;
  letter-spacing: .5px;
  word-break:break-all;
  word-wrap:break-word;
  line-height: 21px;
  margin-right:8px;
  font-weight:700;
}
.af-group-chat .user-replied-top-row {
  flex-direction: column;
}
.af-group-chat .user-message-text {
  font-style: italic;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
}
.af-group-chat .user-replied-header {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
}
.af-group-chat .user-replied-header .user-username,
.af-group-chat .user-replied-header .user-channel {
  font-weight: bold;
}
.comment-username-creator-label {
  color: #2CA5BB;
  font-size: 13px;
}
.comment-username-follower-label {
  color: #ffd7aa;
  font-size: 13px;
}
.user-replied-context-message{
  font-size:14px;
  font-weight:lighter;
  word-wrap:break-word;
  line-height: 20px;
  letter-spacing: .25px;
  color: #8E8E8E;
}
.comment-timestamp, .user-replied-timestamp{
  font-size: 14px;
  margin-right:16px;
  letter-spacing: .44px;
  line-height: 24px;
  color: rgba(255,255,255,.7);
}
.comment-three-dot, .user-replied-three-dot{
  margin-right:16px;
}
.comment-text-content, .user-replied-text-content{
  font-size:16px;
  font-weight:normal;
  line-height: 24px;
  word-break: break-word;
}
.comment-button-row, .user-replied-button-row{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  align-items:center;
}
.comment-button-row .favorite-button{
  display:flex;
  flex-direction:row;
  pointer-events: all;
  align-items: center;
}

.user-replied-button-row .favorite-button{
  display:flex;
  flex-direction:row;
  pointer-events: all;
  align-items: center;
}
.comment-button-row .favorite-icon{
  width: 24px;
  height: 24px;
}
.user-replied-button-row .favorite-icon{
  width: 24px;
  height: 24px;
}

.comment-button-row .favorite-count{
  margin-left:8px;
  font-size: 14px;
  line-height: 17px;
}

.user-replied-button-row .favorite-count, .user-replied-button-row .reply-count{
  margin-left:8px;
  font-size: 14px;
  line-height: 17px;
}
.comment-button-row .reply-button, .user-replied-button-row .reply-button{
  position: relative;
  display:flex;
  flex-direction:row;
  align-items: center;
  margin-right:16px;
}

.comment-button-row .reply-icon{
  height: 24px;
  width:24px;
}
.comment-button-row .reply-count{
  margin-left:8px;
  font-size: 14px;
  line-height: 17px;
}

.comment-reply-header{
  height: calc(15vw + var(--safe-area-top-custom, 0px));
  background:#2C2C2C;
  display:flex;
  align-items:flex-end;
  justify-content: flex-end;
}
.comment-reply-header-text{
  color: #F7A397;
  font-size:20px;
  width: calc(100vw - 2.5rem);
  font-weight: bold;
  text-align:center;
  margin-bottom:2vw;
}
.comment-prompt-container{
  height: 100%;
  background: #2c2c2c;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0px 3px 6px rgba(0,0,0,.2);
}
.comment-prompt-header{
  color: white;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.comment-prompt-header .comment-icon{
  margin-right:8px;
}
.prompt-background-container {
  height: 33vw;
  padding: 3vw;
  background: rgb(28,28,28)
}
.comment-prompt-text{
  color: black;
  background-color:#F7C3A7;
  font-size: 4.7vw;
  font-weight: bold;
}
.comment-reply-panel-messages{
  overflow: scroll;
  background:rgb(28,28,28);
  /* height: calc(100% - 25vw - 12vw - var(--safe-area-bottom-custom, 0px)); */
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  contain: layout;
  will-change: transform;
}
.comment-reply-panel-messages.panel-replies{
  height: calc(100% - var(--comment-panel-input-height) - 20vw - 18vw - var(--safe-area-bottom-custom, 0px)); /* (screen - textarea - chapter - header) */
  margin-bottom: 13vw;
  /* bottom: calc(0px + var(--safe-area-bottom-custom, 0px)); */
}
.comment-reply-panel-messages.panel-comments{
  height: calc(100%  - var(--comment-panel-input-height) - 15vw - 10vw - 33vw - var(--safe-area-bottom-custom, 0px)); /* (screen - textarea - header - tabs - prompt container) */
  margin-bottom: 13vw;
  bottom: calc(0px + var(--safe-area-bottom-custom, 0px));
}

.comment-reply-panel-messages.panel-replies.comment-reply-panel-messages-keyboard-up{
  height:calc(100% - 15vw - 50vw + 1px)
}
.comment-reply-panel-messages-chapter-comments{
  height: calc(100% - 25vw - 12vw - var(--safe-area-bottom-custom, 0px));
}
.comment-reply-panel-messages-chapter-comments.panel-replies{
  height: calc(100% - 15vw - 12vw - var(--safe-area-bottom-custom, 0px));
}

.comment-reply-panel-messages-chapter-comments.panel-replies.comment-reply-panel-messages-keyboard-up{
  height: calc(100% - 15vw - 50vw);
}
.comment-reply-panel-messages-keyboard-up{
  height: calc(100% - 25vw - 50vw);
}
.reply-to-reply-username{
  margin-bottom: 1vw;
  font-size: 4vw;
  color: white;
  font-weight: normal;
  line-height: 1.5em;
  letter-spacing: 1px;
}
.stand-in-input{
  width: 100%;
    border-radius: 14px;
    font-size: 1.1em;
    padding: 3vw;
    background: #676767;
    color: rgba(255,255,255,.5);
    align-items: center;
    height: 7vw;
    font-weight: normal;
    letter-spacing: 1pt;
    margin-right: 3vw;
}
.comment-text-input-start {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12vw;
}
.bottom-dismiss-button{
  width: 20%;
  background: #676767;
  text-align:center;
  color: rgba(255,255,255,.5);
  border-radius: 7px;
  height:7vw;
}

.load-more-button{
  text-align: center;
  padding: 3vw;
  font-size: 1.2em;
  font-weight: lighter;
}

.reply-margin{
  width: 100%;
}

.comment-panel-stand-in-submit,
.comment-panel-textarea-submit,
.message-center-stand-in-submit{
  height: 7vw;
  text-align: center;
  background: #F7A397;
  color: #2C2C2C;
  border-radius: 8px;
  letter-spacing: 1pt;
  font-size: 1rem;
  margin: auto 0;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
}
.message-center-stand-in-submit {
  margin: 0;
}

.comment-panel-stand-in-submit.disabled-button, .comment-panel-textarea-submit.disabled-button, .message-center-stand-in-submit.disabled-button{
background-color: rgba(76, 76, 76, 1);
color: rgba(255,255,255,.3)

}

.story-board-no-comments, .comment-panel-no-comments-intro, .comment-panel-no-comments-choice {
  width: 100%;
  height: calc(70dvh - 39vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size:16px;
  text-align: center;
}

.story-board-no-comments {
  /* height: calc(45vh - 12vw); */
  height: auto;
}

.story-board-no-comments > div {
  width: 90%;
}

.comment-panel-no-comments, .comment-panel-no-comments-choice {
  color: white
}
.pen{
  pointer-events: none;
}
/*
.vote-icons {
  position: absolute;
  height: 7.5vw;
  right: 8px;
  top: -10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 4.5vw;
}
.choice-vote-count{
  margin-left: 2px;
  color: #FFF;
  font-weight: bolder;
}
.vote-icons img {
  height: 100%;
  margin-right: 0.75vw;
  background: white;
  border-radius: 26px;
}
.player-choice {
  position: absolute;
  right: 3.5vw;
  top: 6vw;
  width: 5vw;
  height: 5vw;
}
.player-choice > img {
  width: 100%;
  height: 100%;
} */

.super-exciting-background{
  background-image: linear-gradient(#80f5bc, #9e96fc);
}

/* MULTIPLAYER CHOICES */
/* .vote-icons {
  position: absolute;
  height: 7.5vw;
  right: 8px;
  top: -10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 4.5vw;
}
.choice-vote-count {
  margin-left: 2px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 3vw;
  border-radius: 3.75vw;
  border: solid 1px var(--color-gray-dark);
  background-color: #2C2C2C;
  padding: 0 2vw;
  min-width: 5.5vw;
  text-align: center;
  height: 5.5vw;
  width: fit-content;
  line-height: 5vw;
  white-space: nowrap;
}
.choice-vote-count.one-digit {
  padding: 0;
  width: 5.5vw;
}
.vote-icons img {
  height: 100%;
  margin-right: 0.75vw;
  background: white;
  border-radius: 26px;
}
.majority-choice {
  position: absolute;
  right: -15px;
  top: 11px;
} */

/* MULTIPLAYER EMOJIS */
@keyframes open-emojis {
  from {
    top: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
    width: 100%;
  }
  to {
    top: 0;
    width: 100%;
  }
}
@keyframes close-emojis {
  from {
    top: 0;
    width: 100%;
  }
  to {
    top: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
    width: 100%;
  }
}
.open-emojis {
  animation: open-emojis;
  top: 0;
}
.close-emojis {
  animation: close-emojis;
  top: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
}
.emoji-section {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
  /* overflow-y: hidden; */
}
.emoji-button {
  display: flex;
  position: absolute;
  height: calc(4.2rem + 24px);
  margin-left: 3vw;
  animation-duration: 0.5s;
}

.emoji-container {
  position: absolute;
  bottom: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
  height: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
  width: 100%;
  background: rgba(0,0,0,0.8);
  border-radius: 15px 15px 0 0;
  animation-duration: 0.5s;
}
.emoji-container-close {
  height: 24px;
  width: 24px;
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: auto;
}
.emoji-container-close-button,
.settings-container-close-button {
  height: 24px;
  width: 40px;
}
.emojis {
  display: flex;
  flex-direction: row;
  height: 4.2rem;
  padding: 5px 0 0 6vw;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}
.emojis-item {
  margin: 0 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.emojis-item > img {
  width: 9.5vw;
}
.text-emoji {
  font-size: 10.5vw;
  color: #DDD
}
.emojis > :last-child {
  padding-right: 25vw;
}
.closed {
  max-height: 0;
}
.emoji-broadcast.emoji-story-broadcast {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20vw;
  height: 50dvh;
  pointer-events: none;
}
.emoji-broadcast.emoji-lobby-broadcast {
  position: absolute;
  right: 3vw;
  height: 100%;
  width: 20vw;
  pointer-events: none;
}

.emoji-broadcast.emoji-leaderboard-broadcast {
  position: absolute;
  right: 3vw;
  height: calc(100% - 30vh - 5rem + 24px - var(--safe-area-bottom-custom, 0px));
  width: 20vw;
  pointer-events: none;
  bottom: calc(5rem + 24px);
}
.emoji-broadcast > img {
  height: 14vw;
  width: 14vw;
  padding: 2.2vw;
  position: absolute;
}
.emoji-text-broadcast {
  position: absolute;
  font-size: 10.5vw;
  color: #DDD;
}
.emoji-img-left {
  left: 0px;
  animation: emojiFloatUp 3s linear 1, emojiLeft 2s ease-in-out 2 alternate, emojiScaleFade 3s linear 1;
  -webkit-animation: emojiFloatUp 3s linear 1, emojiLeft 2s ease-in-out 2 alternate, emojiScaleFade 3s linear 1;
}
.emoji-img-right {
  right: 0px;
  animation: emojiFloatUp 3s linear 1, emojiRight 2s ease-in-out 2 alternate, emojiScaleFade 3s linear 1;
  -webkit-animation: emojiFloatUp 3s linear 1, emojiRight 2s ease-in-out 2 alternate, emojiScaleFade 3s linear 1;
}

@keyframes emojiFloatUp {
  0% { bottom: 0%; }
  100% { bottom: 90%; }
}
@-webkit-keyframes emojiFloatUp {
  0% { bottom: 0%; }
  100% { bottom: 90%; }
}

@keyframes emojiRight {
  0% { margin-right: 0%; }
  100% { margin-right: 30%; }
}
@-webkit-keyframes emojiRight {
  0% { margin-right: 0%; }
  100% { margin-right: 30%; }
}

@keyframes emojiLeft {
  0% { margin-left: 0%; }
  100% { margin-left: 30%; }
}
@-webkit-keyframes emojiLeft {
  0% { margin-left: 0%; }
  100% { margin-left: 30%; }
}

@keyframes emojiScaleFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  15% {
    opacity: 1;
    transform: scale(1.0);
  }
  85% {
    opacity: 1;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@-webkit-keyframes emojiScaleFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  10% {
    opacity: 1;
    transform: scale(1.0);
  }
  90% {
    opacity: 1;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}


.settings-section {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(2rem + 24px + var(--safe-area-bottom-custom, 0px));
  background: var(--color-dark);
  z-index: 1;
  transition: all 0.25s ease-in-out;

  /* &.invisible {
    height: 0;
  } */
}
.settings-section.invisible {
  height: 0;
}

.live-chat-section {
  /* position: relative; */
  position: absolute;
  width: 100%;

  /* on top of settings-section. The same as height */
  bottom: calc(2rem + 24px);
  z-index: 0;

  /* &.bottom {
    bottom: 0;
  } */

}
.live-chat-section.bottom {
  bottom: 0;
}

.settings-container {
  position: absolute;
  bottom: calc(4.2rem + 24px);
  height: calc(4.2rem + 24px);
  width: 100%;
  background: rgba(0,0,0,0.8);
  border-radius: 15px 15px 0 0;
  animation-duration: 0.5s;
}
.lobby-screen .settings-section {
  height: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
}
.lobby-screen .settings-container {
  bottom: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
  height: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
}
.settings {
  display: flex;
  align-items: flex-start;
  height: 4.2rem;
  padding: 0px 3vw 0px 3vw;
  /* overflow-y: hidden; */
  overflow-x: scroll;
  white-space: nowrap;
  justify-content: space-around;
}

.story-settings-container {
  position: absolute;
  width: 100%;
  top: 0.5rem;
}
/* HOME SCREEN */
.book-label-container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 0;
  left: 0;
}
.book-label {
  border-radius: 8px;
  background-color: var(--color-primary);
  color: black;
  text-align: center;
  position: absolute;
  font-size: 3.5vw;
  font-weight: 700;
  top: -2vw;
  padding: 0px 8px 0px 8px;
}
.book-counts-container {
  color: #F7A397;
  font-size: 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.5vw;
}
.book-counts-container img {
  height: 4.5vw;
  margin-right: 1vw;
}
.book-count {
  display: flex;
  margin: 1vw 0;
  align-items: center;
  font-size: 3vw;
}
.timed-session-icon {
  margin-left: 1vw;
}

.start-timer-button, .dummy-advance-button, .finish-stream-button{
  position: absolute;
  top: 24%;
  left: 12%;
  height: 10vh;
  width: 30vw;
  color: #000;
  font-size: 4.5vw;
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #f7a397, #ffd7aa);
  font-weight: lighter;
  display: flex;
  justify-content: center;
  padding: 3vw;
  align-items: center;
  text-align: center;
}

.finish-stream-button {
  left: unset;
  right: 12%;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 16vw;
  height: calc(8vw + 4px);
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1c1c1c;
  border: 2px solid #6c6c6c;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 7vw;
  width: 7vw;
  left: 1vw;
  bottom: .5vw;
  background-color: #6c6c6c;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle-slider {
  border:2px solid #F7A397
}

/* input:focus + .toggle-slider {
  box-shadow: 0 0 1px #f7a397;
} */

input:checked + .toggle-slider:before {
  -webkit-transform: translateX(calc(7.5vw - 4px));
  -ms-transform: translateX(calc(7.5vw - 4px));
  transform: translateX(calc(7.5vw - 4px));
  background-color: #f7a397;
}

.toggle-slider.toggle-round {
  border-radius: 34px;
  pointer-events: none;
}

.toggle-slider.toggle-round:before {
  border-radius: 50%;
}

.episode-menu {
  position: absolute;
  bottom: 0;
  height: 36vw;
  width: 100%;
  padding-top: 1vw;
  padding-bottom: var(--safe-area-bottom-custom, 0px);
  color: #fff;
  background-color: #2C2C2C;
  border-radius: 5px 5px 0 0;
}
/* .episode-share-button,
.back-to-home-button {
  display: grid;
  grid-template-columns: 10vw 1fr 10vw;
  height: 11vw;
  margin: 5vw 4vw;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
} */
.episode-share-button,
.story-back-button {
  display: flex;
  width: 4vw;
  height: 6vw;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity .5s;
}
.story-back-button img {
  width: 100%;
  object-fit: contain;
}
.episode-share-button {
  margin-left: 2vw;
}
.episode-menu img {
  margin: auto;
}
.back-to-home-button > .button-text,
.episode-share-button > .button-text {
  margin: auto 0;
  font-size: 4.5vw;
  margin-left: 2vw;
}
.story-bg-for-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 1s ease-out;
}

.mp-controls-button.mp-controls-button-join{
  padding: 1.5vh;
  display: flex;
  align-items: center;
  background-size: unset;
  background-color: unset;
  font-size: 3.8vw;
  font-family: Lato, Arial, SFUI, Roboto, sans-serif;
  width: unset;
  background-image: linear-gradient(#80f5bc, #9e96fc);
  justify-content: center;
  border-radius: 8px;
}

.highlighted-text {
  font-weight:bold;
  color: #F7A397;
  /*
  background: -webkit-linear-gradient(#80f5bc, #9e96fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  */
}

/* CLIENT UPDATE MODAL */

.client-update-title {
  font-size: 6vw;
  text-align: center;
  height: 5vh;
}
.client-update-description {
  text-align: center;
  margin: 4vw 4vw 3vh 4vw;
  font-size: 4.5vw;
  font-weight: normal;
}
.client-update-image {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 100%;
}

.story-video-section {
  position: absolute;
  display: flex;
  width: 100vw;
  top: 10vh;
  justify-content: center;
  align-items: center;
}
.story-video-text {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 4vw;
  text-shadow: 1px 1px 1px black;
}

.network-offline {
  top: 3vh;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14vw;
}
.network-offline img {
  height: 8vw;
  width: 8vw;
}

.network-offline.run {
  animation: slow-blink 3s infinite ease-in-out both;
}

@keyframes slow-blink {
  from { opacity: 1.0; }
  40% { opacity: 1.0; }
  50% { opacity: 0.1; }
  60% { opacity: 1.0; }
  to { opacity: 1.0; }
}


div.modal-maintenance {
  width: 100%;
  height: 100%;
}

.maintenance-modal {
  margin-top: var(--safe-area-top-custom, 0px);
  margin-bottom: var(--safe-area-bottom-custom, 0px);
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
}

.margin-bottom-safe-area {
  margin-bottom: var(--safe-area-bottom-custom, 0px);
}

#dev-player-id {
  position: absolute;
  top: var(--safe-area-top-custom, 0px);
  left: 0;
  width: 100vw;
  background-color: #0006;
  z-index: 999999;
  text-align: center;
  font-size: 4vw;
  color: white;
  -webkit-user-select: text;
  user-select: text;
}


.cm-progress-timeline {
  background: var(--color-white);
  padding-top: 0;
}


#neon-checkout-container-wrapper {
  --close-button-size: 8vw;
  --close-button-margin: 2vw;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 999999;
  padding: 2vw;
  background-color: var(--background-color);
  overflow: scroll;
  padding-top: calc(var(--close-button-size) + 2 * var(--close-button-margin));
}
#neon-checkout-container {
  width: 100%;
  height: 100%;
}
#neon-checkout-container-close-button {
  position: absolute;
  top: var(--close-button-margin);
  right: var(--close-button-margin);
  width: var(--close-button-size);
  height: var(--close-button-size);
  background-color: var(--background-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: url('assets/design-library/ui/ic-close.svg') center/contain no-repeat;
}
.stream-goals-panel-section {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  --badge-size: 7.5vw;
}
.story-stream-goals-panel-wrapper {
  position: absolute;
  top: 12vw;
  left: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  /* max-width: 70%; */
}

.story-stream-goals-panel-counter {
  position: relative;
  width: 31vw;
  height: var(--badge-size);
  background-color: rgba(15, 17, 28, 0.6);
  border-radius: 1.6vw;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}
.story-stream-goals-panel-message {
  width: 28vw;
  color: white;
  font-size: var(--font-size-11-px);
  font-weight: 600;
}
.tournament-story.story-stream-goals-panel-message {
  background: rgba(15, 17, 28, 0.6);
  padding: 0.2vw 2vw;
  border-radius: 1.6vw;
}

.story-stream-goals-panel-progress,
.story-stream-goals-panel-progress-top,
.story-stream-goals-panel-progress-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.story-stream-goals-panel-progress {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: calc(100% - var(--badge-size));
  height: 100%;
  gap: 1px;
  padding: 0 0 0.75vw 1.2vw;
}
.story-stream-goals-panel-progress-top {
  gap: 1vw;
}
.story-stream-goals-panel-progress-bottom {
  width: 90%;
}

.story-stream-goals-panel-heart-icon {
  width: 4vw;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.story-stream-goals-panel-heart-icon img {
  width: 100%;
  object-fit: contain;
}
.story-stream-goals-panel-badge {
  position: relative;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--badge-size);
  display: flex;
  justify-content: center;
  align-items: center;
}
.story-stream-goals-panel-badge img {
  width: var(--badge-size);
  height: var(--badge-size);
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}

.story-stream-goals-panel-badge-animate {
  animation-name: pulse;
  animation-duration: 0.5s;
}
@keyframes pulse {
  0% { 
    transform: scale(1) translateY(-50%);
  }
  50% {
    transform: scale(1.25) translateY(-50%);
  }
  100% {
    transform: scale(1) translateY(-50%);
  }
}
.story-stream-goals-panel-badge-title {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-16-px);
  font-weight: 600;
  color: var(--color-black);
}

.story-stream-goals-panel-numbers {
  color: white;
  font-size: var(--font-size-11-px);
  font-weight: 600;
}

.story-stream-goals-panel-progress-bar {
  width: 100%;
  height: 2px;
  margin-left: 0.75vw;
  background-color: var(--color-desat-dark);
  display: flex;
  justify-content: flex-start;
}

.story-stream-goals-panel-progress-bar-inside {
  width: 50%;
  height: 100%;
  background-color: var(--color-pop);
}

.messageFadeOut {
  animation-name: messageFadeOut;
  -webkit-animation-name: messageFadeOut;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@keyframes messageFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes messageFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.story-top-panel-wrapper {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.story-top-panel-background {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #141319 0%, rgba(20, 19, 25, 0.546875) 55.73%, rgba(20, 19, 25, 0) 100%);
  width: 100%;
  height: 40vw;
}
.story-top-panel-background.single-player {
  height: calc(15vw + var(--safe-area-top-custom, 0px));
}
.leaderboard .story-top-panel-background {
  top: calc(-1 * var(--safe-area-top-custom, 0px));
}
.host-container {
  --top-bar-left-margin: 9vw;

  flex: 1;
  position: relative;
  top: 2vw;
  left: 0;
  margin-left: var(--top-bar-left-margin);
  margin-right: 1.333vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.867vw;
}

.host-container .host-description-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 45%;
  width: 100%;
}
.host-container .player-host-name {
  font-weight: 500;
  font-size: var(--font-size-16-px);
  color: white;
}
.host-container .player-role .role {
  font-size: 2.9vw;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.host-container .player-role {
  display: flex;
  align-items: center;
  /*margin-top: 3px;*/
  font-size: var(--font-size-13-px);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.host-container .cheering-hearts-collected {
  position: absolute;
  top: 10vw;
  left: 50%;
  transform: translateX(calc(-50% - var(--top-bar-left-margin)/2));
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat 0 50%;
  background-size: 6.5vw;
  color: white;
  height: 8vw;
  padding: 3vw 4vw 0 7vw;
  /* margin: 0 0 0 1vw; */
  margin: 0;
  font-size: 3.5vw;
  line-height: 2.5vw;
}
.host-container .story-max-players {
  display: none;
}

.host-container .host-picture-wrapper,
.stream-preview-header-streamer-avatar {
  width: 10vw;
  height: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4.5vw;
}
.host-container .host-picture-wrapper img,
.stream-preview-header-streamer-avatar img {
  width: 10vw;
  height: 10vw;
  object-fit: cover;
  border-radius: 50%;
}

.host-container .story-top-panel-buttons-wrapper,
.stream-preview-header-buttons {
  --progres-icon-width: 8.533vw;
  --progress-icon-right-position: 4vw;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.3vw;
  margin-left: auto;
  margin-right: calc(var(--progres-icon-width) + var(--progress-icon-right-position) + 2vw);
  flex-wrap: nowrap;
}
.host-container .story-player-count-container,
.stream-preview-header-buttons .story-player-count-container{
  background: rgba(128, 130, 156, 0.4);
  border-radius: 5.333vw;
  height: 5.333vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0 2vw;
}
.host-container .story-player-count-container.pulsing-animation,
.stream-preview-header-buttons .story-player-count-container.pulsing-animation {
  transform: scale(1);
  animation: pulseAudienceIcon 1s;
}
.host-container .story-player-count-container img,
.stream-preview-header-buttons .story-player-count-container img {
  width: 2.443vw;
}
.host-container .story-player-count-container .story-player-count,
.stream-preview-header-buttons .story-player-count-container .story-player-count {
  color: white;
  padding: 0 1vw 0 1vw;
  text-align: center;
  font-size: var(--font-size-13-px);
  font-weight: 600;
}

@keyframes pulseAudienceIcon {
  25% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.story-top-panel-back-button-container {
  position: absolute;
  top: 3vw;
  left: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-top-panel-hud-item-balances .heart_container {
  position: relative;
  opacity: 1;
  display: flex;
  background: rgba(15, 17, 28, 0.6);
  width: auto;
  height: auto;
  padding: 1.5vw 9vw 1.5vw 2vw;
  border-radius: 10vw;
  align-items: center;
  background: url('assets/design-library/ui/add-icon-highlight.svg') 90%/4.5vw no-repeat rgba(15, 17, 28, 0.6);
}
.story-top-panel-hud-item-balances .heart_container.currency-sapphires {
  background-image: none;
  padding-right: 5vw;
}

.story-top-panel-hud-item-balances .heart_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.5vw;
}

.story-top-panel-hud-item-balances .story-top-panel-user-heart-amount {
  color: white;
  white-space: nowrap;
  font-size: 4vw;
  /* text-shadow: 0 0 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; */
}

.user-heart-amount {
  white-space: nowrap;
}

.story-top-panel-hud-item-balances .user-heart-amount-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.story-top-panel-hud-item-balances .user-heart-amount-icon .stat-change-icon{
  width: 5vw;
  height: 100%;
  margin: 0;
}

.story-top-panel-hud-item-balances-single-player {
  position: absolute;
  top: 0vw;
  left: calc(50%);
  transform: translateX(calc(-50% - var(--top-bar-left-margin)/2));
  transition-property: all;
  transition-duration: .5s;
  opacity: 1;
}
.story-top-panel-buttons-edit {
  min-width: 5vw;
  opacity: 1;
  transition: opacity .5s;
}
.story-top-panel-buttons-edit .moderation-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
}

.story-top-panel-buttons-edit .moderation-button img{
  width: 5.5vw;
  height: auto;
}

.story-top-panel-watermark {
  width: 6vw;
  height: 6vw;
  position: absolute;
  right: 3.4vw;
  top: 12vw;
  display: flex;
  justify-content: right;
  align-items: center;
}
.story-top-panel-watermark img {
  object-fit: contain;
  width: 100%;
}

.story-top-panel-watermark-single-player {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  top: 2.5vw;
  left: 12vw;
  right: auto;
  width: 7vw;
  height: 7vw;
}

.story-top-panel-language-container {
  padding: 1vw;
  font: var(--font-body4);
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.story-top-panel-language {
    background: url('assets/design-library/ui/ic-international-white.svg') left / 38% no-repeat;
    padding-left: 4vw;
}
.story-top-panel-replay-button {
  height: 5.6vw;
  width: 5.6vw;
  background-image: url("https://d31micz62sw9di.cloudfront.net/prod/icons/ui/replay_white.svg");
  transition: opacity .5s;
}

.story-top-panel-buttons-share {
  min-width: 7vw;
  opacity: 1;
  transition: opacity .5s;
}
.story-top-panel-buttons-share .episode-share-button {
  margin: 0;
  width: auto;
}
.story-top-panel-buttons-share .episode-share-button img {
  width: 5.6vw;
}

.story-top-panel-buttons-share .stream-share-button {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
}

.story-top-panel-buttons-share .stream-share-button-icon {
  height: 8vw;
  width: 8vw;
  background: url('assets/design-library/icons/icon_story/ic-share-arrow.svg') no-repeat center;
  pointer-events: none;
}

.story-top-panel-wrapper .tooltip-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: auto;
  padding: 0;
  background-color: transparent;
}

/* Element moved to .mp-controls-buttons */
.story-info-tooltip-button {
  height: 7vw;
  width: 7vw;
  background-image: url("assets/img/ui/icon-info-white.svg");
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity .5s;
}
.story-info-tooltip-button.top {
  position: static;
  z-index: 1;
}

.show-single-player-hud-click-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 85%;
  background: transparent;
}


.story-top-panel-rewards-icon::before {
  content: "";
  background: url('assets/design-library/icons/daily_goals/hud_goals_frame.png') no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.story-top-panel-rewards-icon.reward-icon-claimable {
  animation: slideIn 2s forwards;
  opacity: 1;
  pointer-events: all;
}

.story-top-panel-rewards-icon.reward-icon-claimable .rewards-icon-image {
  animation: wiggle 2s infinite;
}

.story-top-panel-rewards-icon {
  position: absolute;
  right: -3vw;
  top: 14.778vh;
  width: 16vw;
  height: 16vw;
  opacity: .8;
}

.circle-background {
  width: 100%;
  height: 100%;
  position: absolute;
}

.rewards-icon-image {
  width: 11.2vw;
  height: 11.2vw;
  position: absolute;
  top: -7%;
  left: 2.3vw;
}

.rewards-icon-subtitle {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.40);
  font-family: Lato;
  font-size: 3.467vw;
  font-style: normal;
  font-weight: 700;
  line-height: 5.6vw;
}

.story-top-panel-my-progress-icon {
  position: absolute;
  top: 2vw;
  right: 4vw;
  height: 8.533vw;
  width: 8.533vw;
  opacity: 1;
  transition: opacity .5s;
}
.story-top-panel-my-progress-icon.multiplayer {
  top: 23vw;
}
.story-top-panel-my-progress-container.disabled-button {
  pointer-events: none;
}

@keyframes slideIn {
  0% {
    right: -3vw;
  }
  100% {
    right: 1vw;
  }
}

.story-top-panel-hud-item-balances-single-player-hidden {
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

.single-player-hud-hidden {
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

.sidemenu {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  color: #FFF;
  white-space: nowrap;
  padding-top: var(--safe-area-top-custom, 0px);
  padding-bottom: var(--safe-area-bottom-custom, 0px);
}

.sidemenu_header {
  display: flex;
  justify-content: center;
  height: 20vh;
}
.close_sidemenu_btn {
  position: absolute;
  right: 0px;
  height: 8vw;
  width: 8vw;
  margin: 3vw;
  background-image: url("assets/img/ui/close-24px.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.sidemenu_icon {
  height: 12vw;
  width: 12vw;
  margin: 7vh auto 1vw auto;
  background-image: url("assets/img/ui/D-logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sidemenu_title {
    text-align: center;
    font-size: 6vw;
    letter-spacing: 1px;
}

.sidemenu_register_container,
.sidemenu_account_container {
  display: flex;
  justify-content: center;
  min-height: 35vh;
  width: 100%;
}

.sidemenu_register {
  width: 75%;
  align-self: center;
  padding: 2.5vw;
  text-transform: none;
}
.sidemenu-username-container {
  margin-bottom: 3vw;
  color: rgba(255,255,255, 0.5);
  font-size: 5vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidemenu-account-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 90vw;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255, 0.5);
}
.sidemenu_account {
  margin-left: 4vw;
  color: rgba(255,255,255,0.5);
  font-size: 5vw;
}
.sidemenu_email,
.sidemenu_username {
  color: #FFF;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidemenu-public-container {
  margin-top: calc(2vh + 3vw);
  color: rgba(255,255,255, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidemenu_player_tag {
  font-size: 4vw;
}
.sidemenu_player_tag_row {
  display: flex;
  flex-direction: row;
}
.sidemenu_player_tag_value {
  color: #FFF;
  font-weight: normal;
  white-space: normal;
  font-size: 3.5vw;
  margin-top: 5px;
}
.player_tag_copy {
  margin-left: 15px;
  height: 5vw;
  width: 5vw;
  background-image: url("assets/img/buttons/icon-copy.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sidemenu-register-email-text {
  width: 100%;
  margin-bottom: 3.5vw;
  padding: 1vh 0;
  font-size: 4.5vw;
  font-weight: normal;
  line-height: 5.8vw;
  white-space: normal;
}
.sidemenu-register-email-text > ul {
  margin: 3vw 0 0 0;
  padding-left: 7vw;
  text-align: left;
}

.sidemenu_sign_in_text {
  font: var(--font-body2);
  text-align: center;
  padding: 5vw 0;
}
.sidemenu_sign_in_button {
  color: var(--color-highlight-light);
}

.sidemenu-social-links-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 4vw;
  height: 20vh;
  width: 90vw;
  border-bottom: 1px solid rgba(255,255,255, 0.5);
}
.sidemenu-social-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 55vw;
  margin: 0 auto;
}
.sidemenu-social-link-icon {
  height: 8vw;
  width: 8vw;
  background-size: contain;
  background-repeat: no-repeat;
}

.sidemenu-about-us-links {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 90vw;
  margin: 0 auto;
  color: var(--color-highlight-light);
  font-size: 4vw;
  font-weight: normal;
  text-decoration: underline;
  text-underline-position: under;
  border-bottom: 1px solid rgba(255,255,255, 0.5);
  padding-bottom: 1vh;
}
.sidemenu-about-us-links > div {
  margin: 1vh 0vw 1vh 4vw;
}

.sidemenu_app_info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 90vw;
  height: 8vh;
  margin: 0 auto;
  font-size: 4vw;
  font-weight: normal;
}
.sidemenu_app_info > div {
  margin: 2% 0 0 4vw;
}


.sidemenu_delete_account {
  width: 50%;
  align-self: center;
  padding: 2.5vw;
  font: var(--font-button);
  text-transform: uppercase;
  background-color: var(--color-pop);
  border-radius: 8px;
}

#gdpr-consent-popup {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}
#gdpr-consent-popup > .container {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 4vw;
    background: #fff;
    font-size: var(--font-size-10-px);
}

#gdpr-consent-popup > .container > .title {
    font-size: var(--font-size-16-px);
}
#gdpr-consent-popup > .container > .main-text {
    margin: 4vw 0;
    line-height: 1.5;
}
#gdpr-consent-popup > .container > .buttons {
    display: flex;
    justify-content: flex-end;
    gap: 2vw;
}
#gdpr-consent-popup > .container > .buttons > button {
    padding: 3vw;
    border: solid 1px var(--color-highlight);
    font-weight: 900;
}
#gdpr-consent-popup > .container > .buttons > .customize,
#gdpr-consent-popup > .container > .buttons > .reject-all {
    background-color: var(--color-white);
    color: var(--color-highlight);
}
#gdpr-consent-popup > .container > .buttons > .accept {
    background-color: var(--color-highlight);
    color: var(--color-white);
}

.comment-board-modal {
  display: grid;
  grid-template-rows: 10vh 6vh 1fr;
  background: #2c2c2c;
  color: #FFF;
  font-weight: normal;

  --default-height: 70dvh;
  /** TODO: add only if visible */
  height: calc(var(--default-height) - var(--in-modal-hot-new-container-height) - var(--comment-panel-input-height));
}

.pwa .android .comment-board-modal {
  height: calc(var(--default-height) - var(--in-modal-hot-new-container-height) - var(--comment-panel-input-height));
}
.comment-board-modal.short {
  /* --in-modal-hot-new-container-height: 0px; */
}
.comment-board-heading {
  height: var(--comment-board-heading-height);
  border-radius: 8px 8px 0 0;
  padding: 1vh;
  background: #383838;
}
.comment-board-title-container {
  display: grid;
  grid-template-columns: 8vw 1fr 23vw;
}
.comment-board-title {
  color: #F7A397;
  font-weight: bolder;
  font-size: 6vw;
}
.comment-board-story-title {
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.modal-back-button {
  display: flex;
  align-items: center;
}
.comment-board-info {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 1vh;
  height: 3vh;
  line-height: 3vh;
  padding-left: 8vw;
}
.comment-board-chapter {
  text-align: right;
}
.story-board-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tab-title {
  display: grid;
  grid-template-columns: 65% 35%;
  height: var(--tab-title-height);
  background: #383838;
  font-size: 4.5vw;
}
.active-tab {
  color: #F7A397;
  border-bottom: 2px solid #F7A397;
}
.story-board-tab-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vw;
  color: #FFF;
  font-size: 3.5vw;
}
.story-board-tab-count > img {
  height: 4.5vw;
  margin-right: 1vw;
}

.modal-input {
  width: 100%;
  margin: 0;
}
.text-area-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 76%;
  margin: 0 2vw;
}

.comments-container {
  position: absolute;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /*height: calc(100% - 15vh - 12vw);*/
  width: 100%;
  background:rgb(28,28,28);
  /* --textarea-offset: var(--comment-panel-input-height); */
}
.comments-container.story-comments-container {
  height: calc(100% - var(--in-modal-hot-new-container-height) - var(--comment-board-heading-height) - var(--tab-title-height) - var(--comment-panel-input-height));
}
.comments-container.story-replies-container {
  height: calc(100% - var(--comment-board-heading-height));
  /* height: calc(100% - var(--in-modal-hot-new-container-height) - var(--comment-board-heading-height) - var(--comment-panel-input-height)); */
}
.decision-board {
  position: relative;
  overflow-y: scroll;
  height: 54dvh;
  color: rgba(255, 255, 255, 0.5);
  background: #2C2C2C;
}
.choice-board {
  background: #383838;
  height: 12vw;
  margin: 1.5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3vw;
  font-size: 4vw;
  border-radius: 8px;
}
.choice-board-icon {
  padding: 2vw;
}
.branch-name {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

}
.branch-name-unlocked {
  color: #FFF;
}
.message-board-count {
  display: flex;
  align-items: center;
}
.board-container {
  max-width: calc(100vw - 32px);
}
.in-modal-hot-new-container{
  height: var(--in-modal-hot-new-container-height);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(28,28,28)
}
.in-modal-hot-new-button-container{
  font-size:16px;
  line-height:19px;
  background: rgb(28,28,28);
  border-radius:8px;
  color: #F7A397;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align:center;
  width:calc(100% - 48px);
  border: 1px solid #F7A397;
  overflow: hidden;
}

.in-modal-hot{
  flex-grow:1;
  padding: 8px;
  height: 100%;
}
.in-modal-new{
  flex-grow:1;
  padding: 8px;
  height: 100%;
}

.active-hot-new{
  background-color: #F7A397;
  color: black;
}

.comment-board-see-more {
  margin: auto 1vw 0 0;
  color: var(--color-gray-light);
  font-size: 4vw;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 4px;
}

#flyout-container {
  position: fixed;
  top: var(--safe-area-top-custom, 0px);
  left: auto;
  right: -100%;
  display: flex;
  align-items: flex-start;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  width: 90.4vw;
  padding-top: 24.8vw;
  color: var(--color-black);
  background-color: var(--color-white);
  overflow: hidden;
  transition: 0.5s;
  z-index: 1002;
}

.flyout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1001;
}

.flyout-close-button {
  position: absolute;
  background-image: url('assets/design-library/ui/ic-close.svg');
  background-size: cover;
  width: 4.533vw;
  height: 4.533vw;
  right: 3.733vw;
  top: 14.667vw;
}

/* ---- SHARED CSS ---- */
.event-title {
  font: var(--font-header3);
  margin-bottom: 2.933vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex-shrink: 0;
}

.rules-header {
  font: var(--font-header4);
  margin: 2.933vw 0;
}
.event-rules {
  font: var(--font-body3);
  min-height: 14vw;
  margin-bottom: 6vw;
  overflow-y: auto;
  /* 130.769% */
  word-break: break-word;
}
.event-rules img {
  max-width: 78.4vw;
}


/* ---- EVENT FLYOUT ---- */
.event-popup-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0vw 5vw 5vw 5vw;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.event-content-layout {
  display: flex;
  flex-direction: column;
  max-height: 78dvh;
  max-width: 78vw;
}

.event-popup-content .desciption-layout,
.event-popup-content .rules-layout {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: auto;
  min-height: 20vh;
}

.event-popup-content .event-description {
  min-height: 14vw;
  overflow-y: auto;
  color: #000;
  font-family: Lato;
  font-size: 3.467vw;
  font-style: normal;
  font-weight: 600;
  line-height: 4.533vw;
  /* 130.769% */
  word-break: break-word;
}

.accept-button {
  width: 100%;
  padding: 3.467vw;
  background-color: #6C74B4;
  color: white;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  margin: 2vw auto calc(7vw + var(--safe-area-bottom-custom, 0px)) auto;
  display: block;
  font-family: Lato;
  font-size: 5.6vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}


/* ---- COMPETITIVE MODE FLYOUT ---- */
.competitive-flyout-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(100dvh - 24.8vw - 24vw - var(--safe-area-top-bottom-custom, 0px));
  width: 100%;
  padding: 0vw 5vw;
}
.competitive-flyout-content.no-buttons {
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px) - 24.8vw);
}
.competitive-flyout-content .content-layout {
  display: flex;
  flex-direction: column;
  padding-bottom: 10vw;
}
.competitive-flyout-content .event-heading {
  display: flex;
  align-items: center;
  height: 6.0vw;
  margin-bottom: 3vw;
  padding-left: 8vw;
  color: var(--color-bronze);
  font: var(--font-header4);
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}

.competitive-flyout-content .scroll-container {
  overflow: scroll;
}
.competitive-flyout-content .scroll-container::-webkit-scrollbar {
  display: none;
}

.competitive-flyout-content .event-date {
  color: var(--color-desat-dark);
  font: var(--font-body2);
}

.competitive-flyout-content .competitive-event-host-container {
  display: flex;
  align-items: center;
  gap: 2vw;
  width: calc(90.4vw - 10vw);
  margin: 2.5vw 0;
}
.competitive-flyout-content .host-image {
  height: 10vw;
  width: 10vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50px;
}
.competitive-flyout-content .host-name {
  color: var(--color-desat-dark);
  font: var(--font-body3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitive-flyout-content .description {
  font: var(--font-body2);
}

.competitive-flyout-content .countdown-container {
  width: 100%;
  margin: 2vw 0;
  padding: 2vw 0;
  color: var(--color-dark);
  font-size: 4.704vw;
  font-weight: 600;
  line-height: 6.152vw;
  text-align: center;
  background: url('assets/design-library/icons/daily_goals/ic-clock.svg') 2%/9% no-repeat rgba(255, 215, 138, 0.5); /* var(--color-feature), opacity: 0.5; */
  border-radius: 50px;
}
.competitive-flyout-content .countdown-container.started {
  color: var(--color-desat-med);
}
.competitive-flyout-content .countdown-container.waiting {
  color: var(--color-desat-med);
  background: url('assets/design-library/icons/daily_goals/ic-clock.svg') 2%/9% no-repeat transparent;
  border: 1.5px solid var(--color-desat-med);
}

.competitive-flyout-content .reward-container {
  display: grid;
  grid-template-columns: 1fr 20vw;
  grid-template-rows: auto;
  column-gap: 3vw;
  padding: 2.5vw;
  border: 2px solid var(--color-feature);
  border-radius: 10px;
}
.competitive-flyout-content .reward-header {
  grid-column: 1/2;
  margin-bottom: 1vw;
  color: var(--color-bronze);
  font: var(--font-body3);
}
.competitive-flyout-content .reward-title {
  grid-column: 1/2;
  color: var(--color-dark);
  font: var(--font-header4);
  text-align: left;
}
.competitive-flyout-content .reward-description {
  grid-column: 1/2;
  color: var(--color-desat-dark);
  font: var(--font-body3);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}
.competitive-flyout-content .reward-image {
  grid-column: 2/3;
  grid-row: 1/4;
  height: 20vw;
  width: 20vw;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.competitive-flyout-content .button-container {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  gap: 2vw;
  width: 100%;
  padding: 5vw 6vw 8vw 6vw;
  color: var(--color-white);
  font: var(--font-body2);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-desat-light);
}
.competitive-flyout-content .button-container > div {
  width: 50%;
  padding: 2vw;
  text-align: center;
  border-radius: 50px;
  flex-shrink: 0;
}
.competitive-flyout-content .action-button.upcoming-event {
  background: var(--color-highlight);
}
.competitive-flyout-content .action-button.live-event,
.competitive-flyout-content .action-button.own-event {
  background: var(--color-pop);
}
.competitive-flyout-content .action-button.attending-event,
.competitive-flyout-content .action-button.own-event.disabled {
  color: var(--color-desat-med);
  background: transparent;
  border: 2px solid var(--color-desat-med);
}
.competitive-flyout-content .action-button.own-event.disabled {
  pointer-events: none;
}
.competitive-flyout-content .invite-button {
  color: var(--color-highlight);
  background: transparent;
  border: 2px solid var(--color-highlight);
}

.competitive-flyout-content .status-text,
.competitive-flyout-content .winners-empty {
  margin: 5vw 0;
  font: var(--font-body2);
  color: var(--color-highlight-muted);
}
.competitive-flyout-content .winners-heading {
  margin-bottom: 3vw;
  font: var(--font-header4);
}
.competitive-flyout-content .winners-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
}

/* GDPR FLYOUT */
.gdpr-consent-popup-content {
  display: flex;
  flex-direction: column;
  padding: 5vw;
  margin: -4vw 0 0 0;
  font-weight: normal;
  font-size: 3.75vw;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.gdpr-consent-popup-content > .title {
  font-size: 4vw;
  font-weight: 600;
  margin: 0 10vw 4vw 0;
}

.gdpr-consent-popup-content > .categories {
  display: flex;
  flex-direction: column;
  border-top: solid 1px var(--color-desat-light);
  border-bottom: solid 1px var(--color-desat-light);
  margin: 6vw 0;
}
.gdpr-consent-popup-content > .categories > .category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: solid 1px var(--color-desat-light);
  padding: 4vw 0;
}
.gdpr-consent-popup-content > .categories > .category:last-child {
  border-bottom: none;
}

.gdpr-consent-popup-content > .categories > .category > .title {
  flex: 1 1 auto;
}

.gdpr-consent-popup-content > .categories > .category > .controls {
  flex: 0 0 auto;
  font-size: 3vw;
  font-weight: 700;
}
.gdpr-consent-popup-content > .categories > .category > .controls.disabled {
  color: var(--color-highlight);
  background: inherit;
}

.gdpr-consent-popup-content > .categories > .category > .controls > .notification-toggle {
  box-shadow: 2px 6px 2px var(--color-highlight);
}

.gdpr-consent-popup-content > .categories > .category > .description {
  flex: 1 1 auto;
  font-size: 3vw;
  margin: 3vw 0 0 0;
}
.gdpr-consent-popup-content > .buttons {
  display: flex;
  flex-direction: row;
  gap: 2vw;
}

.gdpr-consent-popup-content > .buttons > button {
  padding: 3vw;
  border: solid 1px var(--color-highlight);
  font-weight: 900;
}
.gdpr-consent-popup-content > .buttons > .cancel {
  background-color: var(--color-white);
  color: var(--color-highlight);
}
.gdpr-consent-popup-content > .buttons > .accept {
  background-color: var(--color-highlight);
  color: var(--color-white);
}

.checkbox-toggle {
  display: flex;
  align-items: center;
}
.checkbox-toggle-switch {
  position: relative;
  display: inline-block;
  width: 10vw;
  height: 5vw;
  margin: 0 2vw;
}
.checkbox-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.checkbox-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-gray-mid);
  transition: background-color .2s linear 0s;
}
.checkbox-toggle-slider:before {
  position: absolute;
  content: "";
  height: 4vw;
  width: 4vw;
  background-color: #FFF;
  top: 0.5vw;
}
.checkbox-toggle.active > .checkbox-toggle-switch > .checkbox-toggle-slider {
  background-color: var(--color-highlight);
}
.checkbox-toggle-slider.checkbox-toggle-round {
  border-radius: 34px;
  pointer-events: none;
}
.checkbox-toggle-slider.checkbox-toggle-round:before {
  border-radius: 50%;
  transition: left .2s linear 0s;
  left: 0.5vw;
}
.checkbox-toggle.active .checkbox-toggle-slider.checkbox-toggle-round:before {
  left: 5.5vw;
}

div.modal-ftue-choice {
    width: 100%;
    height: 100%;
}
.ftue-choice-modal-container {
    height: 100%;
}
.ftue-choice-heading {
    padding-left: 4vw;
    padding-top: var(--safe-area-top-custom, 0px);
}
.ftue-choice-title{
    color: #F7A397;
    font-weight: bolder;
    font-size: 6vw;
}
.ftue-choice-modal{
    height: 100%;
    background: #2c2c2c;
    color: #FFF;
    font-weight: normal;
}
.ftue-choice-info{
    padding-top:8px;
}
.ftue-choice-subheading, .ftue-story-title{
    color: rgba(255,255,255,.8)
}
.ftue-choice-modal .story-cover-container img.ftue-story-cover {
    width: 100%;
}

.ftue-story-container {
    display: grid;
    grid-template-rows: 3rem 9vh 1fr 1fr 3rem;
    background: #383838;
    border-bottom: 1px solid gray;
    height: 100dvh;
    position: relative;
}
.ftue-story-play-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 17vw;
    pointer-events: none;
}
.ftue-board-container{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ftue-choice-story-container {
    overflow-y: scroll;
    flex-grow: 1;
}
.story-cover-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.romance-description{
    font-size: 4.5vw;
    color:rgba(255,255,255,.8);
    text-align: center;
}
.ftue-story-description-header{
    font-weight: bold;
    font-size: 6vw;
}
.ftue-story-top, .ftue-story-bottom {
    height: 3rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.ftue-story-more-text {
    margin-left: 5vw;
    font-size: 3.75vw;
}
.ftue-story-arrow-image {
    animation-duration: 0.5s;
    animation-name: ftue-arrow-bounce;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}
@keyframes ftue-arrow-bounce {
    from { margin-bottom: 10px; }
    to { margin-bottom: -10px; }
}

.ftue-story-title{
    justify-content: center;
    align-items: flex-start;
    display: flex;
    font-size: 4vh;
    color:rgba(255,255,255,.8);
    font-weight: bold;
    text-align: center;
    width: calc(100% - 20vw - 20px);
    margin-left: calc(10vw + 10px);
}
.ftue-story-description-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: calc(100% - 20vw - 20px);
    margin-left: calc(10vw + 10px);
    text-align: center;
}

.ftue-story-arrow {
    position: absolute;
    right: 10px;
    height: 13vw;
    width: 13vw;
    background-color: #1c1c1c;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #f7a397;
}
.ftue-arrow-top {
    top: 10px;
    margin-top: calc(var(--safe-area-top-custom, 0) / 2);
}
.ftue-arrow-bottom {
    bottom: 10px;
    margin-bottom: calc(var(--safe-area-bottom-custom, 0) / 2);
}

div.modal-mds {
    width: 100%;
    height: 100%;
}
.mds-choice-modal{
    height: 100%;
    background: #2c2c2c;
    color: #FFF;
    font-weight: normal;
}
.mds-choice-modal .story-cover-container img.ftue-story-cover {
    width: 100%;
}
.mds-choice-modal-container {
    height: 100%;
    padding-top: var(--safe-area-top-custom, 0px);
    padding-bottom: var(--safe-area-bottom-custom, 0px);
}
.mds-board-container{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mds-choice-container {
    overflow-y: scroll;
    flex-grow: 1;
    padding: 3vw;
    background-color: var(--background-color);
}



.mds-header {
    margin: 3vh 8vw 0vh 8vw;
    background-color: #2c2c2c;
    height: calc(8vh + 25vw);
}
.mds-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mds-header-title {
    font-size: 6vw;
    color: var(--color-primary);
}
.mds-header-text-top {
    font-size: 3.8vw;
    text-align: center;
    padding-top: 2vh;
}
.mds-header-text-email {
    font-size: 5vw;
    color: var(--color-primary);
}
.mds-header-text-bottom {
    padding-top: 2vh;
    font-size: 3.8vw;
    text-align: center;
    padding-bottom: 4vh;
}





.mds-player-container {
    border-bottom: solid grey 1px;
    margin-top: 10px;
}

.mds-player-li {
    display: grid;
    height: 15vw;
}

.mds-no-trait-layout {
    grid-template-columns: 15% 60% 25%;
}
.mds-player-li-pic {
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 13vw;
    height: 13vw;
}
.mds-info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 5px;
    font-size: 4vw;
    font-weight: normal;
}

.mds-player-li-name,
.mds-player-li-level,
.mds-info-container {
    pointer-events: none;
}
.mds-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    height: 80%;
    color: var(--color-black);
    font-weight: normal;
    background: var(--color-primary);
    border-radius: 5px;
}
.mds-button-disabled {
    color: var(--color-gray-mid);
    background: var(--color-gray-dark);
}

.mds-stats-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 3.5vw;
}
.mds-stats-item {
    font-size: 4vw;
    font-weight: bold;
}
.mds-time-container {
    font-size: 3.5vw;
    text-align: center;
    padding: 1vh 0 2vh 0;
}



.mds-sync-container {
    flex-grow: 1;
    padding: 3vw;
    background-color: var(--background-color);
}
.mds-sync-text { 
    font-size: 5vw;
    text-align: center;
    padding-top: 10vh;
}
.verification-modal-container {
  height: 100dvh;
  padding: var(--safe-area-top-custom, 0px) 0 var(--safe-area-bottom-custom, 0px) 0;
  background: var(--gradient-value-prop);
}
div.modal-verification {
  width: 100%;
  height: 100%;
  background-color: transparent;
  box-shadow: none;
}

.verification-modal{
  width: 100%;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
}
.verification-container {
  position: relative;
  height:100%;
  width:100%;
  padding-top: 10vh;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-bottom: 5vh;
}

.verification-heading {
  margin: 0 0 calc(2vh + 2vw) 12vw;
  color: var(--color-white);
  font-size: 12vw;
}
.verification-subheading {
  margin: 0 0 1vw 12vw;
  font-size: 7vw;
  color: var(--color-highlight-light);
}

.verification-pfp-image {
  height: 34vw;
  width: 100%;
  /* margin: calc(3vh + 2vw) 0 calc(7vh + 2vw) 0; */
  margin: auto;
  background-image: url("assets/img/ui/ftue/pfps.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.verification-btn {
  height: 14vw;
  width: 80%;
  margin: auto;
  font: var(--font-header3);
}

.verification-agreement {
  margin: auto 13vw 0 13vw;
  text-align: center;
  font-size: 4.3vw; /* 16px */
  font-weight: 500;
  line-height: 7vw;
}
.verification-agreement-text {
  color: var(--color-white);
}
span[data-id="terms"],
span[data-id="privacy"] {
  color: var(--color-highlight-light);
}

.verification-accept-terms-modal {
  margin: 8vw 5vw;
  font-size: 4.5vw;
  text-align: center;
  line-height: 7vw;
}

/* VERIFICATION B */
.verification-container-b {
  position: relative;
  height: 100%;
  width: 100%;
  padding-top: 2vh;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-bottom: 5vh;
}
.verification-heading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.verification-games-image {
  height: 60dvh;
  width: 100%;
  background-image: url("assets/design-library/value_prop/nuf_value_prop_games.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.verification-heading-top {
  color: var(--color-highlight-light);
  font-size: 6.4vw;
  font-weight: 700;
  line-height: 7.5vw;
}
.verification-heading-bottom {
  display: flex;
  align-items: baseline;
}
.verification-heading-bottom-image {
  width: 10vw;
  height: 10vw;
  margin-right: 3px;
}
.verification-heading-bottom-text {
  font-size: 13vw;
  font-weight: 700;
}

.new-feature-modal-container {
    background-color: #2C2C2C;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 8px;
}

.new-feature-image {
    height:100%;
    width:100%;
}

.new-feature-text-content {
    padding:16px;
}

.new-feature-heading {
    font-size: 5vw;
    font-weight: bold;
    color: #F7A397;
    margin:8px 0px;
    text-align: center;
}

.new-feature-description {
    font-size:4vw;
    color:white;
    line-height: 6vw;
    font-weight: normal;
}
.currency-error-modal-container {
    background-color: #2C2C2C;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 8px;
}


.currency-error-text-content {
    padding:16px;
}

.currency-error-description {
    font-size:4vw;
    color:white;
    line-height: 6vw;
    font-weight: normal;
}
.reward-box-cta-wrapper {
    border-radius: 3.2vw; 
    height: 42.667vw; 
    background: url("https://d31micz62sw9di.cloudfront.net/prod/modules/invite.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.reward-box-cta-layout {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100%;
}

.reward-box-cta-info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    align-items: center;
    padding-right: 6.171vw;
}

.reward-box-cta-info-title {
    margin-top: 5.467vw;
    color: #FFF;
    font-family: Lato;
    font-size: 5.6vw;
    font-style: normal;
    font-weight: lighter;
    line-height: normal;
}

.reward-box-cta-info-description {
    color: var(--White, #FFF);
    font-family: Lato;
    font-size: 2.933vw;
    font-style: normal;
    font-weight: lighter;
    line-height: 4vw;
}

.reward-box-cta-info-reward {
    color: #FFF;
    font-family: Lato;
    font-size: 2.933vw;
    font-style: normal;
    font-weight: lighter;
    line-height: 4vw;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    margin-bottom:1vw;
}
.reward-box-cta-info-reward-text,
.reward-box-cta-info-reward-amount {
    margin-right: 1vw;
}

.reward-box-cta-reward-icon {
    height: 4.533vw;
}

.reward-box-cta-info-button {
    border-radius: 3.733vw;
    color: var(--Interim-Dark, #1E1C2C);
    font-family: Lato;
    font-size: 3.467vw;
    font-style: normal;
    font-weight: 600;
    line-height: 4.533vw;
    background-color: white;
    width: 32vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.4vw;
    height: 7.467vw;
}

.reward-box-cta-info-button-yellow {
    background: linear-gradient(180deg, #FFE8BB 0%, #FCD188 100%);
    border: 2px solid #FFFFFFB2;
    color: var(--color-black);
}

.reward-box-cta-info-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reward-box-cta-info-button-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  margin-bottom: 1vw;
  color: var(--color-white);
  font-family: Lato;
  font-size: 2.933vw;
  font-style: normal;
  font-weight: lighter;
  line-height: 4vw;
}
.reward-box-cta-info-button-label > .label-image {
  width: 4.533vw;
  height: 4.533vw;
}

.social-media-cta .reward-box-cta-info-title,
.social-media-cta .reward-box-cta-info-description,
.social-media-cta .reward-box-cta-info-button-label {
  color: var(--color-interim-dark);
}
div.modal-leaderboard {
  width: 100%;
  height: 100%;
}

.leaderboard {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: column;
  top: var(--safe-area-top-custom, 0px);
  /* height: calc(100% - var(--safe-area-top-bottom-custom, 0px)); */
  height: calc(100% - var(--safe-area-top-custom, 0px));
  z-index: 999;
}

.lb-header {
  padding-bottom: 4vw;
  padding-left: 13vw;
  padding-right: 11vw;
  /* background-color: var(--color-background-panel); */
  height: 40vw;
}

.lb-chapter {
  font-size: 3.5vw;
}

.lb2-text-info-top-row.player-role {
  font-size: 3.25vw;
  color: var(--color-primary);
}
.lb2-text-info-top-row .player-role {
  color: var(--color-primary);
  font-size: 3.25vw;
  line-height: 4vw;
}
.lb2-text-info-top-row .cheering-hearts-collected {
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat 0 50%;
  background-size: 6.5vw;
  color: var(--color-white);
  height: 8vw;
  padding: 3vw 0vw 0 7vw;
  margin: 0 0 0 1vw;
  font-size: 3.5vw;
  line-height: 2.5vw;
}
.lb2-text-info-top-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.lb2-chapter {
  color: var(--color-highlight-light);
  font-size: var(--font-size-16-px);
  text-align: center;
  padding: 2vw 1vw;
}

.lb-story-select-button {
  height: 13vw;
  width: 13vw;
  background: var(--gradient-multiplayer);
  border-radius: 30px;
}

img.lb-cover {
  height: 100%;
  padding: 3vw;
  pointer-events: none;
}

/* .lb-cover-container {
  margin-left: 4vw;
}

.lb-cover {
  margin: 1vh;
  border-radius: 8px;
} */

.lb-video-section {
  position: relative;
  display: flex;
  justify-content: center;
  top: 10vh;
}


.lb-join-video-button {
  margin: 1.65vh 0vh;
  width: 100%;
  display: flex;
  align-items: center;
  background-image: linear-gradient(#80f5bc, #9e96fc);
  justify-content: center;
  border-radius: 8px;
  color: black;
}

.lb-host-has-left {
  margin: 1.65vh 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: white;
  font-size: 4vw;
}
#lb-large-video-section {
  height: 0;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  transition: 0.5s ease height;
}
.lb-body {
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}
.leaderboard.is-big-video .lb-body {
  background-color: var(--background-color);
}

.lb-body-inside {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lb-top-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
  height: 42vw;
  min-width: 90vw;
  margin: 2vw 5vw;
  padding: 3vw;
  background-color: var(--color-background-panel);
  border-radius: 10px;
}
.top-three-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}
.top-three-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22vw;
  width: 22vw;
}
.top-three-avatar > img {
  height: 80%;
  width: 80%;
  background: #FFF;
  border-radius: 50%;
  object-fit: cover;
}
.top-three-first,
.top-three-second,
.top-three-third {
  position: relative;
}
.top-three-first .top-three-avatar > img {
  height: 100%;
  width: 100%;
}
.top-three-username {
  margin: 1vw;
  width: 22vw;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.top-three-score {
  margin: 0;
}
.top-three-place {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 6vw;
  height: 6vw;
  text-align: center;
}
.top-three-place-first {
  top: 1vw;
  left: 3vw;
  background: linear-gradient(#F7A397, #FFD7AA);
}
.top-three-place-second {
  top: 3vw;
  left: 4vw;
  background: #86d6ae;;
}
.top-three-place-third {
  top: 3vw;
  left: 4vw;
  background: #B0AAFF
}
.top-three-arrow {
  position: absolute;
  right: 0;
  height: 100%;
  padding: 21% 4% 21% 0;
  transform: scaleX(-1);
}
.lb-user-score {
  text-align: center;
  margin: 2vw 0;
  font-size: 4.0vw;
  color: var(--color-white);
}
.lb-participants {
  font-size: var(--font-size-20-px);
  color: var(--color-white);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.lb-all-players {
  flex-grow: 1;
  padding: 0vh 4vw;
  max-height: 1px;
}
.lb-all-players > ol {
  padding: 0;
}
.lb-player {
  display: grid;
  grid-template-columns: 7vw 12vw 12vw 1fr 20vw;
  height: 15vw;
  padding: 2vw 2px 2vw 0;
  border: solid 1px transparent;
  border-bottom-color: rgba(255,255,255,0.3);
}
.lb-player.is-self {
  border-color: #97F7C7;
}
.lb-player img {
  height: 100%;
  display: flex;
  align-items: center;
}
li.lb-player {
  counter-increment: item;
}
li.lb-player:before {
  content: counter(item);
  text-align: center;
  margin: auto 0;
}
.lb-player-username {
  display: block;
  width: 41vw;
  margin: auto 0;
  font-size: 4vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.lb-player-label {
  color: #D5D5D5;
  font-size:3.5vw;
}

.lb-player-score,
.top-three-score {
  width: 19vw;
  margin: auto 0 auto auto;
  padding: 1vw 2vw;
  font-size: 1rem;
  text-align: center;
  background: rgba(255,255,255,0.3);
  border-radius: 25px;
}
.lb-next-button {
  width: 100%;
  color: #2C2C2C;
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
  background: #F7A397;
  height: 3rem;
  min-height: calc(2rem + var(--safe-area-bottom-custom, 0px));
  display: flex;
  justify-content: center;
  align-items: center;
}

.lb-next-button-text {
  padding-top: 1rem;
}

.lb-panels {
  display: flex;
  position: relative;
}
.lb-next-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 42vw;
  min-width: 90vw;
  margin: 2vw 5vw;
  padding: 2vw 4vw;
  background-color: var(--color-background-panel);
  border-radius: 10px;
}
.ns-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.ns-heading {
  color: var(--color-primary);
  text-align: center;
  font-size: 4.5vw;
}
.ns-rev-share-info {
  color: white;
  font-weight: lighter;
  margin: 0.5vh 0 0 3vw;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ns-rev-share-info .ns-rev-share {
  color: var(--color-primary);
  font-size: 3.5vw;
  line-height: 4vw;
}
.ns-rev-share-info .ns-rev-heart {
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat 0 50%;
  background-size: 6.5vw;
  color: var(--color-white);
  height: 8vw;
  padding: 3vw 0vw 0 7vw;
  margin: 0 0 0 1vw;
  font-size: 3.5vw;
  line-height: 2.5vw;
}
.ns-story {
  display: flex;
  align-items: center;
}
.ns-story-image {
  height: 21vw;
  width: 18vw;
  margin: 0 2vw 2vw 2vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.ns-story-info {
  font-size: 3.5vw;
  font-weight: normal;
}
.ns-story-info > div {
  width: 60vw;
  margin-bottom: 1vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-story-title {
  font-weight: bold;
  font-size: 4vw;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  white-space: normal !important;
}
.ns-button-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.ns-play-button {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 40%;
  margin: 0 auto;
  padding: 1vw;
  color: #000;
  font-size: 3.5vw;
  background: var(--gradient-multiplayer);
  border-radius: 8px;
}
.ns-play-button > img {
  margin-right: 0;
}
.ns-settings-button,
.ns-restart-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  margin: 0 auto;
  padding: 1vw;
  color: #000;
  font-size: 3.5vw;
  background-color: var(--color-primary);
  border-radius: 8px;
  text-align: center;
}
.ns-settings-button.next {
  background: var(--gradient-multiplayer);
  font-size: 4vw;
}
.ns-settings-button.next > img {
  display: none;
}
.ns-settings-button > img {
  margin-right: 0vw;
}
.ns-arrow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4vw;
}

.lb-players-header {
  display: none;
}

/* TOURNAMENT */
.tournament-leaderboard .leaderboard {
  /* background: linear-gradient(180deg, #FFEAB2 0%, #E8B637 100.09%); */
  background: url('assets/design-library/ui/background_competitive.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
}
.tournament-leaderboard .leaderboard.is-big-video {
  background: transparent;
}
.tournament-leaderboard .lb2-chapter {
  color: var(--color-black);
}

.tournament-leaderboard .lb-top-three-container,
.tournament-leaderboard .lb-all-players {
  /* display: none; */
}
.tournament-leaderboard .lb-body {
  --ns-margin-left: 1.5vw;
  background: transparent;
}
.tournament-leaderboard .leaderboard.is-big-video .lb-body {
  /* background: linear-gradient(180deg, #FFEAB2 0%, #E8B637 100.09%); */
  background: url('assets/design-library/ui/background_competitive.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
}

.tournament-leaderboard .ns-header {
  justify-content: start;
  margin-left: var(--ns-margin-left);
}

.tournament-leaderboard .lb-next-story {
  background: rgba(255, 255, 255, 0.50);
}

.tournament-leaderboard .ns-button-container {
  gap: 2vw;
}
.tournament-leaderboard .ns-settings-button,
.tournament-leaderboard .ns-play-button,
.tournament-leaderboard .ns-restart-button {
  background: var(--color-red);
  color: var(--color-white);
  justify-content: space-evenly;
  width: 28%;
  margin: 0;
  font-size: var(--font-size-13-px);
  justify-content: center;
  gap: 1.5vw;
}
.tournament-leaderboard .ns-play-button {
  order: 1;
}
.tournament-leaderboard .ns-settings-button {
  order: 2;
}
.tournament-leaderboard .ns-or {
  order: 3;
  color: var(--color-black);
  font-size: var(--font-size-13-px);
  text-transform: uppercase;
}
.tournament-leaderboard .ns-restart-button  {
  order: 4;
}
.tournament-leaderboard .ns-restart-button.ns-restart-button-blue {
  background: var(--color-highlight-muted);
}
.tournament-leaderboard .ns-settings-button-text,
.tournament-leaderboard .span {
  color: var(--color-white);
}
.tournament-leaderboard .ns-settings-button.next > img {
  display: block;
}


.tournament-leaderboard .ns-heading {
  color: var(--color-black);
  margin: 0 auto;
}
.tournament-leaderboard .lb-players-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 28vw;
  background: transparent url("assets/design-library/ui/tournament-ribbon.png") no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: 7vw;
  color: var(--color-black);
  font-size: var(--font-size-25-px);
  flex-shrink: 0;
}

.tournament-leaderboard .lb-all-players {
  width: 100%;
}
.tournament-leaderboard .lb-all-players > div {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  padding-bottom: 10vh;
}
.tournament-leaderboard .lb-player {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 100%;
  border-bottom: none;
}
.tournament-leaderboard .lb-player img {
  --avatar-size: 25vw;
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 500px;
}
.tournament-leaderboard .lb-player > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
  margin-top: 1.5vw;
}
.tournament-leaderboard .lb-player .lb-player-username,
.tournament-leaderboard .lb-player .lb-player-label {
  width: 100%;
  margin: unset;
  text-align: center;
  color: var(--color-black);

  text-overflow: ellipsis;
  display: block;
}
.tournament-leaderboard .lb-player.is-self {
  border: none;
}

.tournament-leaderboard .ns-story-info,
.tournament-leaderboard .ns-rev-share-info,
.tournament-leaderboard .ns-rev-share {
  color: var(--color-black);
}

.tournament-leaderboard .ns-story {
  justify-content: start;
}
.tournament-leaderboard .ns-story-image {
  background-position: left;
  margin-right: 2vw;
  margin-left: var(--ns-margin-left);
}


.modal-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #332e51e6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: modal-container-in 500ms forwards;
  transition: padding 250ms;
  padding-bottom: 0;
}
/* when chat keyboard open up we should not shift entire modal up as chat has it's own keyboard service */
body.android .modal-leaderboard-container {
  padding-bottom: 0;
}
/* body.android.keyboard-visible .modal-container.expects-text-input {
  align-items: normal;
} */
.modal-container.anim-out {
  animation: modal-container-out 500ms forwards;
  pointer-events: none;
}
@keyframes modal-container-in {
  from {
    opacity: 0;
  }
}
@keyframes modal-container-out {
  to {
    opacity: 0;
  }
}
div.modal-full-screen {
  width: 100%;
  height: 100%;
}
.modal-safe-top {
  width:100%;
  margin-top: var(--safe-area-top-custom, 0px);
}
.modal {
  position: relative;
  background-color: var(--background-color);
  color: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  animation: modal-in 500ms forwards;
  width: -webkit-calc(100vw - 32px);
  width: calc(100vw - 32px);
}
.modal.modal-full-screen.player-screen.user-profile{
  animation:modal-in 0ms forwards;
}
.modal.anim-out {
  animation: modal-out 500ms forwards;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(25vh);
  }
}
@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(-25vh);
  }
}

.modal img {
  display: block;
  /*max-width: 100%;*/
}

.modal-header {
  font-size: 24px;
  font-weight: 300;
  padding: 16px;
  padding-bottom: 0;
  text-align: center;
  letter-spacing: -0.05em;
}
.modal-header::first-letter {
  margin-left: -0.05em;
}

.modal-footer {
  display: flex;
  flex-flow: row wrap;
  margin: 1px;
}
.modal-footer-button {
  display: block;
  flex: 1 0 120px;
  padding: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13.5px;
  background-color: #808080;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.75);
  text-shadow: 0 2px rgba(255, 255, 255, 0.25);
  margin: inherit;
}
.modal-footer-button::first-letter {
  margin-left: 0.05em;
}

.bg-primary {
  background-color: #08f;
}

.modal-body {
  padding: 16px 32px;
}

.inactive-section {
  display: none;
}

.text-input-modal-position {
  position: absolute;
  top: calc(3rem + 7.5vh + var(--safe-area-top-custom, 0px));
  -webkit-transition: margin-top 250ms ease-in-out;
  transition: margin-top 250ms ease-in-out;
}
.shiftForFirstName {
  margin-top: -19vw;
}
.shiftForLastName {
  margin-top: -44vw;
}
.shiftForEmail {
  margin-top: -69vw;
}
.shiftUp {
  top: -7rem;
}

.reward-title {
  padding: 0px 0px 8px;
  font: var(--font-title2);
  text-align: center;
  font-size: 5.25vw;
}

.reward-instructions {
  padding: 2px;
  font: var(--font-body);
  text-align: center;
}

.reward-code {
  padding: 2vh;
  font: var(--font-title1);
  text-align: center;
  margin: 2vh 0;
  background: var(--color-black);
  border-radius: 8px;
  user-select: auto;
  -webkit-user-select: auto;
}

.reward-code::selection {
  background-color: var(--color-white);
  color: var(--color-black);
}

.reward-code::after {
  content: "Tap to copy";
  color: var(--color-white-softer);
  font: var(--font-subhead);
  display: block;
  margin-top: 4px;
}

.reward-code.copied::after {
  content: "Copied!";
  color: var(--color-primary);
}

.reward-item-container {
  position: relative;
  width: 83vw;
  height: 35vh;
  overflow-y: scroll;
}

.reward-descriptions {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 100%;
  opacity: 0;
}

.reward-desc-item {
  display: flex;
  justify-content: left;
  align-items: center;
}

.reward-desc-image {
  width: 10%;
  padding-right: 2vw;
}

.reward-desc-text {
  font-size: 4vw;
}

.reward-item-list {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


.notif-prompt-modal-container {
  background-color: #2C2C2C;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 8px;
}

.notif-prompt-image {
  height:100%;
  width:100%;
}

.notif-prompt-text-content {
  padding:16px;
}

.notif-prompt-heading {
  font-size: 5vw;
  font-weight: bold;
  color: #F7A397;
  margin:8px 0px;
  text-align: center;
}

.notif-prompt-description {
  font-size:4vw;
  color:white;
  line-height: 6vw;
  font-weight: normal;
}

.modalcontent-purchase-modal {
  z-index: var(--z-index-iap-modal);
}

.modalcontent-purchase-in-progress {
  z-index: var(--z-index-iap-in-progress);
}

.modalcontent-purchase-complete {
  z-index: var(--z-index-iap-complete);
}

.modalcontent-invite-multiplayer-modal {
  z-index: var(--z-index-invite-multiplayer-modal);
}

.player-screen .player-popup-container .multi-btn-top img {
  display: inline;
}

.modal.first-point-modal {
  width: 85%;
  background-color: transparent;
}

.modal.custom-notification-prompt {
  width: 80.8%;
  background-color: var(--color-white);
  border-radius: 30px;
}


div.modal-full-screen-overlay {
  width: 100%;
  height: 100%;
  position: relative;
  background-color:rgba(0,0,0,0.65);
  animation: none;
}
.loading-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  left:0;
  height:100dvh;
  width:100vw;
}
.loading-spinner,
.loading-spinner:after {
  border-radius: 50%;
  width: 20vw;
  height: 20vw;
}
.loading-spinner {
  display: inline-block;
  margin: 3vw;
  font-size: 2vw;
  position: relative;
  text-indent: -9999em;
  border-top: 2vw solid rgba(255, 255, 255, 0.2);
  border-right: 2vw solid rgba(255, 255, 255, 0.2);
  border-bottom: 2vw solid rgba(255, 255, 255, 0.2);
  border-left: 2vw solid #ffffff;
  transform: translateZ(0);
  animation: loading-spinner-anim 1.5s infinite linear;
}
@keyframes loading-spinner-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*** RewardAlertModal ***/
.reward-alert-wrapper {
  --text-color: #0D0D0D;
  position: relative;
  width: 80%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px solid #FFD584;
  border-radius: 6.5vw;
  padding: 17vw 2vw 5vw 2vw;

  background-image: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/star.png'), linear-gradient(180deg, #FFF9D6 0%, #FFFFFF 63%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;

}

.reward-alert-wrapper .message {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-alert-title {
  width: calc(100% + 2*5vw);
  height: 17vw;

  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/banner.png') no-repeat center bottom;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #750101;
  font-size: var(--font-size-25-px);
  font-weight: 600;
  position: absolute;
  top: 0;
}

.reward-alert-title-background,
.reward-alert-title-background::after {
  position: absolute;
  top: 3.5vw;
  left: 50%;
  transform: translateX(-50%);
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/banner-bottom.png') no-repeat center;
  background-size: contain;
  height: 14vw;
  width: 95%;
}

.reward-alert-title-background::after {
  content: '';
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/banner-bottom-v3.png') no-repeat center;
  background-size: contain;
  top: 0;
  height: 17.1vw;
}

.reward-alert-wrapper .button-reward {
  border-radius: 500px;
  min-width: 40vw;
  background-color: var(--color-feature);
  color: var(--color-black);
}

.reward-alert-inside-title,
.reward-alert-inside-message {
  color: var(--text-color);
  font-size: var(--font-size-25-px);
  font-weight: 600;
}
.reward-alert-inside-message {
  font-size: var(--font-size-16-px);
  font-weight: 500;
}
.reward-alert-inside-submessage {
  color: var(--color-desat-med);
  font: var(--font-body3);
  margin-top: 1.5vw;
}

.reward-alert-reward-box {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/rectangle-under-prize.png') no-repeat center;
  background-size: cover;
  height: 40vw;
  width: 40vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5vw;
}

.reward-alert-reward-icon {
  width: 60%;
}
.reward-alert-reward-name {
  color: var(--color-black);
  font-weight: 700;
  font-size: var(--font-size-16-px);
}

.modal-sliding-content-bg.alert-modal-sliding {
  font: var(--font-body2);
  text-align: center;
  min-height: 36vh !important;
}

.ams-wrapper {
  padding: 0 8vw;
}

.ams-title {
  font: var(--font-body1);
  margin-bottom: 8vw;
}

.ams-icon-container {
  position: relative;
  display: flex;
  justify-content: center;
  height: 10vw;
}
.ams-icon {
  position: absolute;
  bottom: 3vw;
  margin: auto;
  height: 15.467vw;
  width: 15.467vw;
}
.bonus-end-modal {
  --bonus-end-modal-height: calc(30vh + 20vw);
  min-height: var(--bonus-end-modal-height) !important;
}
.bonus-end-modal .modal-sliding-content {
  height: calc(var(--bonus-end-modal-height) - 26vw);
  width: 90%;
}

.bonus-scene-end-modal {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.bonus-scene-end-modal .title {
  color: var(--color-black);
  font: var(--font-header2);
}

.bonus-scene-end-modal .button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bonus-scene-end-modal .back-to-game-button {
  width: 100%;
  margin-bottom: 8vw;
  padding: 3vw;
  font: var(--font-header3);
  color: var(--color-white);
  background-color: var(--color-highlight);
  border-radius: 8px;
}

.bonus-scene-end-modal .replay-button {
  font: var(--font-header4);
  color: var(--color-highlight);
}

.bonus-scene-exit-modal .button-container {
  display: flex;
  gap: 1.333vw;
  margin-bottom: 8.8vw;
  padding: 0 4.533vw;
}

.bonus-scene-exit-modal .message {
  padding: 17vw 8vw 10vw 8vw;
  font: var(--font-body1);
  color: var(--color-interim-dark);
}

.bonus-scene-exit-modal .button-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2.5vw 0;
  font: var(--font-small-link);
  border-radius: 40px;
}

.bonus-scene-exit-modal .close-button {
  position: absolute;
  right: 0;
  height: 7vw;
  width: 7vw;
  margin: 3vw 3vw 0 auto;
  background: url('assets/img/ui/icon-close-light-gray.svg') center / contain no-repeat;
}
.modal-sliding {
  --bg-border-top-radius: 8vw;
  --transition-time: 0.5s;
  position: absolute;
  /* padding-top: 20vw; */
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-sizing: border-box;
  text-align: center;
  z-index: 1000;
}
.modal-sliding .modal-sliding-bg {
  position: absolute;
  background-color: rgba(15, 17, 28, 0);
  top: 0;
  left: 0;
  right: 0;
  transition: background-color var(--transition-time) ease-out;
  width: 100%;
  height: 100%;
}
.modal-sliding.show-popup {
  background-color: rgba(15, 17, 28, 0.7);
  pointer-events: all;
}
.modal-sliding .modal-sliding-content-bg {
  width: 100%;
  background-color: #FFFFFF;
  border-top-right-radius: var(--bg-border-top-radius);
  border-top-left-radius: var(--bg-border-top-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 13vw 0;
  bottom: -100%;
  position: relative;
  transition: bottom var(--transition-time) ease-out;
  min-height: 50dvh;
}

.modal-sliding.show-popup .modal-sliding-content-bg {
  bottom: 0%;
}

.modal-sliding-close-button {
  position: absolute;
  top: 5vw;
  left: 5vw;
  width: 6vw;
  height: 6vw;
}
.modal-sliding-close-button.right {
  left: auto;
  right: 5vw;
}

.modal-sliding .modal-sliding-title {
  font-weight: 600;
  font-size: var(--font-size-30-px);
}
.modal-sliding .modal-sliding-subtitle {
  font-weight: 400;
  font-size: var(--font-size-20-px);
}

.modal-sliding-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  width: 100%;
  padding: 8vw 6vw 0vw 6vw;
  color: var(--color-white);
  font: var(--font-small-link);
  background-color: var(--color-white);
}
.modal-sliding-button-container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 10.4vw;
  width: 50%;
  padding: 2vw;
  text-align: center;
  border-radius: 50px;
}
.modal-sliding .modal-sliding-cancel-button {
  color: var(--color-highlight);
  background: transparent;
  border: 2px solid var(--color-highlight);
}
.modal-sliding .modal-sliding-ok-button {
  background: var(--color-highlight);
}

.follow-creator-modal-container .modal-sliding-content-bg{
  padding: 13vw 13vw 20vw 13vw;
}

.follow-creators-modal-sliding { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10vw;
}

.follow-creators-follow-button {
  color: var(--color-white);
  border-radius: 1.75vw;
  padding: 1.5vw 6vw 1.5vw 4.5vw;
  pointer-events: all;
  background-color: var(--color-pop);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.follow-creators-follow-button div {
  color: var(--color-white);
}
.follow-creators-follow-button img {
  width: 6vw;
  height: 6vw;
  object-fit: contain;
}
.follow-creators-follow-button.followed {
  color: var(--color-gray-mid);
  background-color: var(--color-white);
  border: none;
  pointer-events: none;
}
.follow-creators-follow-button.followed div {
  color: var(--color-gray-mid);
}

.follow-creators-modal-sliding .creator-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}
.follow-creators-modal-sliding .creator-name {
  font-weight: 600;
  font-size: var(--font-size-20-px);
}
.follow-creators-modal-sliding .creator-followers-count {
  font-weight: 400;
  font-size: var(--font-size-16-px);
  color: var(--color-desat-med);
}
.follow-creators-modal-sliding .creator-pfp {
  width: 30vw;
  height: 30vw;
  object-fit: cover;
  border-radius: 50%;
}
.follow-lists-view {
  width: 100vw;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  background-color: #1e1c2c;
}

.follow-lists-header {
  padding-top: var(--safe-area-top-custom, 0px);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3rem;
  margin-bottom: 3vw;
  text-align: center;
  font-size: 5.5vw;
  font-weight: bold;
}
#follower-lists-back-button {
  width: 3rem;
  height: 3rem;
  background: url('assets/img/ui/icon-arrow-back.svg') center/24px no-repeat;
}
.follower-lists-user {
  width: calc(100% - 6rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#follower-item-header-src {
  width: 2.2rem;
  height: 2.2rem;;
  border-radius: 100%;
  object-fit: cover;
  display: none;
}
#follower-list-header-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 5vw;
}

.follow-lists-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 13vw;
  margin-bottom: 5vw;
  font-size: 4.3vw;
  width: 100%;
}

#followers-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}
#followers-tab.active {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #f56969;
}
#followers-count {
  padding-left: 5vw;
  text-decoration-thickness: 2px;
}

#following-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}
#following-tab.active {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #f56969;
}
#following-count {
  padding-right: 5vw;
  text-decoration-thickness: 2px;
}

.followers-list-container {
  height: calc(100dvh - 3rem - 37vw - var(--safe-area-top-bottom-custom, 0px));
  width: 100vw;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.followers-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
  background-color: #1e1c2c;
}


/* item */

.follower-item-container {
  width: 100%;
}
.follower-item {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 12px;
}
.follower-item-image {
  height: 3rem;
  padding: 0 10px;
}
.follower-item-image-src {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  object-fit: cover;
}
.follower-list-item-name {
  padding: 3px 3px 7px 3px;
  font-size: 3.75vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 45%;
}
.follower-list-item-spacer {
  flex-grow: 1;
}
.follower-list-item-button {
  margin-right: 15px;
  width: 23%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.7vw;
  border-radius: 1vw;
  white-space: nowrap;
}
.follower-list-item-button.not-followed {
  background-color: #6c74b4;
}
.follower-list-item-button.followed {
  color: #80829c;
  font-size: 3.1vw
}
.follower-item-btn-icon {
  width: 20px;
  height: 20px;
}
.follower-item-btn-text {
  padding: 5px 0;
}


.follow-search-bar-container {
  height: 13vw;
  display: flex;
  margin: 3vw;
}
.follow-search-bar-container > input {
  width: 100%;
  padding: 2vw 2vw 2vw 10vw;
  font: var(--font-body2);
}
.follow-textfield {
  color: white;
  font: var(--font-body);
  height: 2em;
  padding: 0 0.5em;
  background-color: #413c5c;
  border-radius: 9999px;
  border: 1px solid transparent;
}
.follow-textfield::placeholder {
  color: #c9cddd;;
}
.follow-textfield {
  background-image: url('assets/img/ui/search_white_24dp.svg');
  background-color: #413c5c;
  background-position: left;
  background-size: 40px 24px;
  background-repeat: no-repeat;
  text-indent: 30px;
}
#search-follow-cancel-button {
  margin-left: 10px;
  font-size: 3.8vw;
}
#search-follow-cancel-button.start {
  display: none;
}
#search-follow-cancel-button.hide {
  color: transparent;
  animation: no-button 0.15s linear forwards;
}
#search-follow-cancel-button.show {
  display: block;
  animation: big-button 0.15s linear forwards;
}

#follows-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5vh 10vw 0 10vw;
  text-align: center;
}

.follow-lists-view-wait {
  position: absolute;
  width: 100%;
  height: calc(100dvh - 15vw - 10vh - 3rem - var(--safe-area-top-bottom-custom, 0px));
  top: calc(15vw + 3rem + var(--safe-area-top-custom, 0px));
  background-color: rgba(0,0,0,0.5);
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* loading */
.follows-loading-view {
  width: 100%;
  height: 75%;
}
.follows-loading-anim {
  background-image: url('assets/img/animations/loading.gif');
  background-size: 36px;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 36px;
  margin-top: 10vh;
  position: absolute;
}

.msc-modal-sliding .modal-sliding-content-bg {
  padding: 13vw 0;
}
.msc-modal-sliding .modal-sliding-content {
  width: 100%;
}

.mcs-modal-title {
  margin-top: 7vw;
  font-weight: 600;
  font-size: var(--font-size-20-px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcs-modal-subtitle {
  padding: 10vw 0;
  font-weight: 600;
  font-size: var(--font-size-16-px);
}

.msc-modal-stories-list {
  display: flex;
  flex-direction: row;
  column-gap: 2vw;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.msc-modal-stories-list::-webkit-scrollbar {
  display: none;
}
.msc-modal-stories-list > div:first-child {
  margin-left: 3vw;
}
.msc-modal-stories-list > div:last-child {
  margin-right: 3vw;
}
.msc-modal-story-container {
  flex: 0 0 40vw;
  overflow: hidden;
}

.msc-modal-story-image {
  height: 55vw;
  margin-bottom: 1vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.msc-modal-story-info {
  text-align: left;
  font-size: var(--font-size-13-px);
}
.msc-modal-story-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.msc-modal-story-creator {
  color: var(--color-desat-med);
  margin: 1vw 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.msc-modal-story-favorites {
  padding-left: 5vw;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('assets/img/ui/icon-bookmark-outline-desat-med.svg');
  color: var(--color-desat-med);
}

.msc-modal-button-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 8vw;
  margin-top: 22vw;
  color: var(--color-highlight);
  font-size: 4.2vw;
}

.msc-modal-close-cross-button {
  position: absolute;
  right: 6vw;
  top: 6vw;
  width: 8vw;
  height: 8vw;
  background: transparent url('assets/img/ui/close-24px-black.svg') no-repeat center center;
  background-size: 6vw;
  opacity: 0.3;
}
.msc-modal-close-cross-button .cls-2 {
  fill: gray;
}

.add-to-home-screen-modal-sliding {
}

.a2hs-modal-sliding .modal-sliding-content-bg {
    padding: 13vw 0;
}
.a2hs-modal-sliding .modal-sliding-content {
    width: 100%;
}

.a2hs-modal-title {
    margin: 0 7vw 7vw 7vw;
    padding: 3vw;
    font-weight: 600;
    font-size: var(--font-size-20-px);
}
.a2hs-modal-subtitle {
    margin: 0 17vw;
    padding: 2vw;
    font-size: var(--font-size-16-px);
}

.a2hs-modal-icon-share {
    background: transparent url('assets/img/pwa/a2hs/ios-share-icon.svg') no-repeat center center;
    background-size: contain;
    height: 20vw;
    margin-top: 3vw;
}

.a2hs-modal-icon-a2hs {
    background: transparent url('assets/img/pwa/a2hs/ios-a2hs-button.png ') no-repeat center center;
    background-size: contain;
    height: 36vw;
    margin-top: 7vw;
}

.a2hs-modal-button-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 8vw;
    margin-top: 7vw;
    color: var(--color-highlight);
    font-size: 4.2vw;
}
.a2hs-modal-leave-button {
    font-size: var(--font-size-16-px);
    color: #6C74B4;
}

.a2hs-modal-close-cross-button {
    position: absolute;
    right: 6vw;
    top: 6vw;
    width: 8vw;
    height: 8vw;
    background: transparent url('assets/img/ui/close-24px-black.svg') no-repeat center center;
    background-size: 6vw;
    opacity: 0.3;
}
.a2hs-modal-close-cross-button .cls-2 {
    fill: #C9CDDD;
}

.add-to-bookmarks-modal-sliding .modal-sliding-content-bg {
    padding: 13vw 0;
}
.add-to-bookmarks-modal-sliding .modal-sliding-content {
    width: 100%;
}

.add-to-bookmarks-modal-title {
    margin: 0 7vw 7vw 7vw;
    padding: 3vw;
    font-weight: 600;
    font-size: var(--font-size-20-px);
}
.add-to-bookmarks-modal-subtitle {
    margin: 0 17vw;
    padding: 2vw;
    font-size: var(--font-size-16-px);
}

.add-to-bookmarks-modal-image-1 {
    background: transparent url('assets/img/pwa/a2hs/ios-share-icon.svg') no-repeat center center;
    background-size: contain;
    height: 20vw;
    margin-top: 3vw;
}

.add-to-bookmarks-modal-image-2 {
    background: transparent url('assets/img/pwa/a2hs/ios-add-to-home-screen-button.png ') no-repeat center center;
    background-size: contain;
    height: 36vw;
    margin-top: 7vw;
}

.add-to-bookmarks-modal-button-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 8vw;
    margin-top: 7vw;
    color: var(--color-highlight);
    font-size: 4.2vw;
}
.add-to-bookmarks-modal-leave-button {
    font-size: var(--font-size-16-px);
    color: #6C74B4;
}

.add-to-bookmarks-modal-close-cross-button {
    position: absolute;
    right: 6vw;
    top: 6vw;
    width: 8vw;
    height: 8vw;
    background: transparent url('assets/img/ui/close-24px-black.svg') no-repeat center center;
    background-size: 6vw;
    opacity: 0.3;
}
.add-to-bookmarks-modal-close-cross-button .cls-2 {
    fill: #C9CDDD;
}

.next-episode-modal {
  background-color: rgba(30, 28, 44, 0.9) !important;
  padding: 0 !important;
  min-height: auto !important;
}
.next-episode-modal > .modal-sliding-content {
  width: 100%;
  min-height: auto;
  padding-bottom: calc(5vh + var(--safe-area-bottom-custom, 0px));
}

.next-episode-modal-header {
  padding: 2.667vw 2.667vw 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.next-episode-modal .currency-sapphires {
  margin: 0 2vw;
}
.next-episode-modal .close-button {
  height: 7.467vw;
  width: 7.467vw;
  background: url('assets/design-library/ui/ic-close.svg') center/55% no-repeat var(--color-black);
  border-radius: 50%;
}

.next-episode-modal .episode-info {
  margin: 5.333vw 0;
  padding: 0 5.867vw;
  text-align: left;
}
.next-episode-modal .info-heading {
  color: var(--color-highlight-muted);
  font: var(--font-body2);
}
.next-episode-modal .info-title {
  margin: 2vw 0;
  color: var(--color-desat-light);
  font: var(--font-header4);
}
.next-episode-modal .info-description {
  color: var(--color-desat-light);
  font: var(--font-body3);
}

.next-episode-modal .button-container-wrapper {
 position: relative;
}
.next-episode-modal .button-container {
  padding: 0 5.867vw;
  color: var(--color-white);
  font: var(--font-header4);
  pointer-events: all;
}
.next-episode-modal .button-container > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2vw;
  padding: 3.733vw 4.267vw;
  border-radius: 8px;
}

.next-episode-modal .button-label {
  display: flex;
  align-items: center;
}

.next-episode-modal .play-button > div,
.next-episode-modal .hearts-unlock-button > div,
.next-episode-modal .sapphires-unlock-button > div {
  pointer-events: none;
}
.next-episode-modal .play-button {
  background: rgba(108, 116, 180, 0.2);
  border: 1px solid var(--color-highlight);
}
.next-episode-modal .hearts-unlock-button,
.next-episode-modal .sapphires-unlock-button {
  background: linear-gradient(90deg, #FC536F 0%, #6C74B4 100%);
}
.next-episode-modal .play-button-icon,
.next-episode-modal .hearts-unlock-icon,
.next-episode-modal .sapphires-unlock-icon {
  height: 5.333vw;
  width: 5.333vw;
  margin-right: 3vw;
}
.next-episode-modal .play-button-icon {
  background: url('assets/design-library/icons/ui/ic-clock-white.svg') center/contain no-repeat;
}
.next-episode-modal .hearts-unlock-icon,
.next-episode-modal .sapphires-unlock-icon {
  background: url('assets/design-library/icons/ui/ic-lock-white.svg') center/contain no-repeat;
}
.next-episode-modal .hearts-unlock-cost {
  padding-left: 6.4vw;
  background: url('assets/design-library/ui/icon_large_heart.png') left/contain no-repeat;
}
.next-episode-modal .sapphires-unlock-cost {
  padding-left: 6.4vw;
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/currency/sapphire.svg') left/contain no-repeat;
}

.spinner-overlay {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: rgba(30, 28, 44, 0.9);
  border-top-right-radius: var(--bg-border-top-radius);
  border-top-left-radius: var(--bg-border-top-radius);
}


/* GAME PREVIEW LOCKED */
.game-preview-locked-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.game-preview-locked-container .button-container-wrapper {
  top: 50%;
  transform: translateY(-50%);
}


.modal-sliding-content-bg.story-mode-choice-modal-sliding {
  font: var(--font-body2);
  text-align: center;
}

.smc-wrapper {
  padding: 0 7.067vw;
}

.smc-title {
  margin-bottom: 8.533vw;
  font: var(--font-header2);
  line-height: 8.32vw;
}

.smc-description {
  font: var(--font-body3);
  font-weight: 500;
}

.smc-mode-container {
  display: grid;
  grid-template-columns: 11.2vw 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 2.667vw;
  margin: 5vw 0;
  text-align: left;
}
.smc-mode-icon {
  grid-row: 1 / 3;
  height: 11.2vw;
  width: 11.2vw;
}
.smc-mode-title,
.smc-highlight-title {
  display: flex;
  align-items: center;
  font: var(--font-header4);
  margin-bottom: 0.5vw;
}
.smc-mode-label {
  margin-left: 2vw;
  padding: 1vw;
  color: var(--color-white);
  font: var(--font-body3);
  background-color: var(--color-green);
  border-radius: 5px;
}
.smc-mode-description {
  font: var(--font-body2);
  font-weight: 500;
}

.smc-highlight {
  display: grid;
  grid-template-columns: 8.533vw 1fr;
  grid-template-rows: auto;
  grid-column-gap: 3vw;
  padding: 3.467vw 1.867vw;
  font: var(--font-body3);
  font-weight: 500;
  text-align: left;
  background-color: rgba(153, 164, 255, 0.2);
  border-radius: 8px;
}
.smc-highlight-icon {
  grid-row: 1/3;
  height: 8.533vw;
  width: 8.533vw;
  margin: auto;
}

.custom-notification-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5.067vw;
  text-align: center;
}

.custom-notification-prompt .image {
  height: 40vw;
  width: 40vw;
}

.custom-notification-prompt .message-container {
  margin: 3vw 0;
}
.custom-notification-prompt .message-container > div {
  margin-bottom: 3vw;
  color: var(--color-black);
}
.custom-notification-prompt .message-heading {
  font: var(--font-header3);
}
.custom-notification-prompt .message-text {
  font: var(--font-body2);
}

.custom-notification-prompt .button {
  width: 100%;
  padding: 3vw;
  color: var(--color-white);
  font: var(--font-header3);
  background-color: var(--color-mulberry);
  border-radius: 8px;
}

.custom-notification-prompt .close-button {
  position: absolute;
  height: 6.4vw;
  width: 6.4vw;
  top: 5.067vw;
  right: 5.067vw;
  background: url('assets/design-library/ui/ic-close.svg') center/contain no-repeat;
}
.modal.modal-language {
  background: transparent;
  box-shadow: none;
}

.language-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  padding: 10.667vw 5.333vw;
  color: var(--color-black);
  text-align: center;
  background: #fff;
  border-radius: 30px;
}

.language-modal-title {
  font: var(--font-header3);
}

.language-modal-message {
  font: var(--font-body2);
  margin: 5.867vw 0;
}

.language-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 2.4vw;
  width: 100%;
}

.language-modal-switch-btn,
.language-modal-continue-btn {
  width: 100%;
  padding: 3vw 0;
  font: var(--font-header4);
  color: var(--color-highlight);
  border: 1px solid var(--color-highlight);
  border-radius: 8px;
}

.language-modal-text-btn {
  font: var(--font-body2);
  color: #2B3699;
}

.language-modal-close-btn {
  position: absolute;
  bottom: -13vw;
  font-size: 6vw;
  color: var(--color-white);
  border: 3px solid var(--color-highlight-muted);
  border-radius: 28px;
  height: 10vw;
  width: 10vw;
}
.patron-lists-view {
  width: 100vw;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  background-color: #1e1c2c;
}

.patron-lists-header {
  padding-top: var(--safe-area-top-custom, 0px);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3rem;
  text-align: center;
  font-size: 5.5vw;
  font-weight: bold;
}
#patron-lists-back-button {
  width: 3rem;
  height: 3rem;
  background: url('assets/img/ui/icon-arrow-back.svg') center/24px no-repeat;
}
.patron-lists-user {
  width: calc(100% - 6rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#patron-item-header-src {
  width: 2.2rem;
  height: 2.2rem;;
  border-radius: 100%;
  object-fit: cover;
  display: none;
}
#patron-list-header-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 5vw;
}

.patron-lists-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 13vw;
  margin-bottom: 5vw;
  font-size: 4.3vw;
  width: 100%;
}

#patrons-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}
#patrons-tab.active {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #f56969;
}
#patrons-count {
  text-decoration-thickness: 2px;
}

.patrons-list-container {
  height: calc(100dvh - 3rem - 37vw - var(--safe-area-top-bottom-custom, 0px));
  width: 100vw;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.patrons-list {
  display: flex;
  flex-direction: column;
  background-color: #1e1c2c;
}


/* item */

.patron-item-container {
  width: 100%;
}
.patron-item {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 12px;
}
.patron-item-rank {
  font-size: 1rem;
  padding-left: 10px;
}
.patron-item-image {
  height: 3rem;
  padding: 0 10px;
}
.patron-item-image-src {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  object-fit: cover;
}
.patron-list-item-name {
  padding: 3px 3px 7px 3px;
  font-size: 3.75vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 45%;
}
.patron-list-item-spacer {
  flex-grow: 1;
}
.patron-list-item-button {
  margin-right: 15px;
  width: 23%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.7vw;
  border-radius: 1vw;
  white-space: nowrap;
}
.patron-list-item-button.not-followed {
  background-color: #6c74b4;
}
.patron-list-item-button.followed {
  color: #80829c;
  font-size: 3.1vw
}
.patron-item-btn-icon {
  width: 20px;
  height: 20px;
}
.patron-item-btn-text {
  padding: 5px 0;
}



.patron-search-bar-container {
  height: 13vw;
  display: flex;
  margin: 3vw;
}
.patron-search-bar-container > input {
  width: 100%;
  padding: 2vw 2vw 2vw 10vw;
  font: var(--font-body2);
}
.patron-textfield {
  color: white;
  font: var(--font-body);
  height: 2em;
  padding: 0 0.5em;
  background-color: #413c5c;
  border-radius: 9999px;
  border: 1px solid transparent;
}
.patron-textfield::placeholder {
  color: #c9cddd;;
}
.patron-textfield {
  background-image: url('assets/img/ui/search_white_24dp.svg');
  background-color: #413c5c;
  background-position: left;
  background-size: 40px 24px;
  background-repeat: no-repeat;
  text-indent: 30px;
}
#search-patron-cancel-button {
  margin-left: 10px;
  font-size: 3.8vw;
}
#search-patron-cancel-button.start {
  display: none;
}
#search-patron-cancel-button.hide {
  color: transparent;
  animation: no-button 0.15s linear forwards;
}
#search-patron-cancel-button.show {
  display: block;
  animation: big-button 0.15s linear forwards;
}

#patrons-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5vh 10vw 0 10vw;
  text-align: center;
}

.patron-lists-view-wait {
  position: absolute;
  width: 100%;
  height: calc(100dvh - 15vw - 10vh - 3rem - var(--safe-area-top-bottom-custom, 0px));
  top: calc(15vw + 3rem + var(--safe-area-top-custom, 0px));
  background-color: rgba(0,0,0,0.5);
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* sort menu */

#patron-sort-button {
  width: 3rem;
  height: 3rem;
  background: url('assets/design-library/icons/ui/ic-clock-white.svg') center/24px no-repeat;
  position: absolute;
  right: 0;
}
#patron-sort-button.rank {
  background: url('assets/design-library/icons/ui/ic-heart-empty-white.svg') center/24px no-repeat;
}

#patron-sort-menu-container {
  position: absolute;
  background-color: rgba(40, 40, 40, 0.66);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.patron-sort-menu {
  position: absolute;
  background-color: #383838;
  width: 60vw;
  top: calc(3rem + 2em + 2px + 24vw);
  right: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  padding-top: 5px;
  padding-bottom: 10px;
  max-height: 80dvh;
  overflow-y: scroll;
}
.patron-sort-menu-close {
  width: 90%;
  display: flex;
  flex-direction: row;
}
.patron-sort-menu-close > img {
  margin-left: auto;
  height: 24px;
}
.patron-sort-menu-option {
  align-items: center;
  display: flex;
  width: 90%;
  border-bottom: 1px solid #676767;
  padding-bottom: 5px;
  margin-top: 1rem;
}
.patron-sort-menu-option > img {
  margin-right: 2vw;
  pointer-events: none;
}
.patron-sort-menu-option > div {
  pointer-events: none;
}
.patron-sort-menu-icon-resize {
  width: 22px;
  height: 22px;
}
.patron-sort-menu-option-checked {
  right: 0;
  position: absolute;
}

/* loading */
.patrons-loading-view {
  width: 100%;
  height: 75%;
}
.patrons-loading-anim {
  background-image: url('assets/img/animations/loading.gif');
  background-size: 36px;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 36px;
  margin-top: 10vh;
  position: absolute;
}

.modal-sliding-content-bg.reset-game-modal-sliding {
  font: var(--font-body2);
  text-align: center;
}

.rg-title {
  padding: 0 8vw;
  font: var(--font-header3);
}

.rg-description {
  margin: 5.333vw 0 2.4vw 0;
  padding: 0 8vw;
}

.rg-description-secondary {
  padding: 0 8vw;
  font: var(--font-body3);
  font-weight: 500;
}

.rg-reset-point-container {
  display: flex;
  margin: 2.4vw 4.267vw 0 4.267vw;
  padding: 1.867vw;
  text-align: left;
  border: 1.5px solid var(--color-desat-light);
  border-radius: 6px;
}
.rg-reset-point-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rg-reset-point-image {
  height: 29.867vw;
  min-width: 21.867vw;
  margin-right: 3.733vw;
  border-radius: 4px;
}
.rg-reset-point-title {
  color: var(--color-highlight-muted);
}
.rg-reset-point-text {
  margin: 1vw 0;
}
.rg-reset-point-progress-button {
  color: var(--color-highlight);
}
.modal.rgcm {
  width: 85%;
  background-color: transparent;
  box-shadow: none;
}
.restart-game-confirmation-modal {
  padding: 9.6vw 0 3.733vw 0;
  color: var(--color-black);
  background-color: var(--color-white);
  border-radius: 30px;
}

.rgcm-title {
  margin: 0 8.667vw;
  font: var(--font-header3);
  text-align: center;
  line-height: 7.28vw;
}

.rgcm-details {
  display: flex;
  flex-direction: column;
  gap: 7vw;
  margin: 7.733vw 11.733vw;
  font: var(--font-body3);
  font-weight: 500;
}
.rgcm-detail-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 3.733vw;
}
.rgcm-detail-item-icon {
  min-height: 8.533vw;
  min-width: 8.533vw;
}

.rgcm-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  margin: 0 3.733vw;
  font: var(--font-small-link);
  color: var(--color-white);
}
.rgcm-buttons > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 10.4vw;
  width: 50%;
  padding: 2vw;
  text-align: center;
  border-radius: 50px;
}
.rgcm-cancel-button {
  color: var(--color-highlight);
  background: transparent;
  border: 2px solid var(--color-highlight);
}
.rgcm-ok-button {
  background: var(--color-highlight);
}
.modal.modal-tutorial {
  background-color: transparent;
}

.tutorial-modal {
  position: relative;
  padding: 5.333vw;
  font: var(--font-body2);
  text-align: center;
  background: rgba(30, 28, 44, 0.9);
  border-radius: 12px;
}

.tutorial-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.25), rgba(190, 179, 254, 0.25));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.universal-reward-modal {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  top: 0;
  width: 100%;
  background-color: rgba(39, 36, 65, 0.92);
  z-index: 2;
}

.universal-reward-modal .title-container {
  position: relative;
  height: 24vw;
  width: 95%;
  margin-bottom: 4vw;
  visibility: hidden;
  z-index: 1;
}
.universal-reward-modal .title-container.double-streak-title {
  top: 7vw;
}
.universal-reward-modal .title-image {
  height: 100%;
  width: 100%;
}
.universal-reward-modal .title {
  position: absolute;
  top: 4vw;
  width: 100%;
  color: #750101;
  font: var(--font-header2);
  text-align: center;
}
.universal-reward-modal .title.highlight-light {
  color: var(--color-highlight-light);
}
.universal-reward-modal .title.blue {
  color: var(--color-blue);
}

.universal-reward-modal .wrapper {
  visibility: hidden;
}

.universal-reward-modal .subheading{
  color: var(--color-white);
  font: var(--font-body1);
  text-align: center;
}

.universal-reward-modal .bottomheading{
  position: absolute;
  bottom: 0;
  color: var(--color-desat-light);
  font: var(--font-body3);
  text-align: center;
  padding: 4vh 0;
}

.universal-reward-modal .reward-wrapper {
  position: relative;
  top: -10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vw;
  width: 100vw;
  margin-top: 4vw;

}
.universal-reward-modal .reward-image-burst {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url('assets/design-library/ui/radial_glow.png') center/contain no-repeat;
  opacity: 0.8;
  animation: spin 10s linear infinite;
  pointer-events: none;
}
.universal-reward-modal .reward-image-burst.large {
  height: 180%;
  width: 180%;
}
.universal-reward-modal .reward-container {
  position: absolute;
}
.universal-reward-modal .image-title {
  text-align: center;
  margin-bottom: 2vw;
  color: var(--color-feature);
  font: var(--font-header4);
}
.universal-reward-modal .reward-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40vw;
  width: 40vw;
  background-color: var(--color-white);
  border-radius: 14px;
  box-shadow: 0px 0px 20px 0px #272441;
}
.universal-reward-modal .image {
  height: 25vw;
  width: 25vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}
.universal-reward-modal .image-text {
  margin-top: 4vw;
  color: var(--color-background-light-v2);
  font: var(--font-body2);
}

.universal-reward-modal .alert-message {
  padding: 2vw 5vw;
  margin: 4vw 6vw;
  font: var(--font-body3);
  font-weight: 500;
  text-align: center;
  background-color: var(--color-white-soft);
  border-radius: 6px;
}

.universal-reward-modal .button {
  position: relative;
  width: 41%;
  margin: auto;
  padding: 3vw 0;
  color: var(--color-white);
  font: var(--font-header3);
  text-align: center;
  background-color: var(--color-pop);
  border-radius: 30px;
}
.universal-reward-modal .button.disabled {
  pointer-events: none;
}
.universal-reward-modal .button.text-button {
  top: -7vw;
  background-color: transparent;
  color: var(--color-white);
  font: var(--font-body2);
}


/* ------------------------- */
/* -- DOUBLE STREAK MODULE-- */
/* ------------------------- */
.universal-reward-modal .double-your-reward-container {
  position: relative;
  top: -17vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: 10vw 4vw;
  background: url('assets/design-library/icons/daily_goals/double-your-streak-frame.svg') center/contain no-repeat;
  /* background: linear-gradient(to bottom, #31397C, #2B275B); */
  /* border: 1.5px solid #3A7CDF; */
  border-radius: 10px;
}
.universal-reward-modal .dyr-title {
  font: var(--font-body2);
  color: var(--color-feature);
  letter-spacing: 0.7vw;
}
.universal-reward-modal .dyr-description,
.universal-reward-modal .dyr-reward-text {
  font: var(--font-body2);
  color: var(--color-white);
  text-align: center;
}
.universal-reward-modal .dyr-description {
  margin: 4vw 0;
  width: 75%;
}
.dyr-reward-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.universal-reward-modal .dyr-reward-icon {
  height: 8vw;
  width: 8vw;
}

.universal-reward-modal .dyr-button {
  margin-top: 2vw;
  padding: 2vw 8vw;
  font: var(--font-small-link);
  color: var(--color-white);
  background: linear-gradient(180deg, #FC536F 0%, #FF3456 100%);
  border-radius: 40px;
  border: 2px solid rgba(255, 255, 255, 0.4);
}


/* ------------------- */
/* -- DOUBLE STREAK -- */
/* ------------------- */
.universal-reward-modal .goal-description-container {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
  padding: 5vw 3vw;
  background-color: rgba(30, 28, 44, 0.82);
  border-radius: 6px;
}
.universal-reward-modal .goal-description-icon {
  position: absolute;
  top: -5vw;
  height: 9.067vw;
  width: 9.067vw;
}
.universal-reward-modal .goal-description-text {
  font: var(--font-body2);
  color: var(--color-white);
  text-align: center;
}


/* ----------------- */
/* -- ACHIEVEMENT -- */
/* ----------------- */
.achievement-wrapper {
  position: relative;
  top: -15vw;

}
.achievement-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vw;
  width: 100vw;
}
.achievement-image {
  position: absolute;
  height: 49.867vw;
  width: 49.867vw;
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 10px;
}
.achievement-text-wrapper {
  position: relative;
  top: -10vw;
  color: var(--color-white);
  text-align: center;
}
.achievement-title,
.achievement-description {
  width: 85vw;
  margin: 0 auto;
}
.achievement-title {
  font: var(--font-header1);
  margin-bottom: 5vw;
}
.achievement-description {
  font: var(--font-body1);
}

/* -------------------- */
/* -- OPEN ANIMATION -- */
/* -------------------- */
@keyframes urmFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.universal-reward-modal.urm-fade-in {
  animation: urmFadeIn 0.5s ease-in-out;
}
.universal-reward-modal .wrapper.urm-fade-in {
  animation: urmFadeIn 0.5s ease-in-out;
  visibility: visible;
}

@keyframes urmFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.universal-reward-modal.urm-fade-in.urm-fade-out {
  animation: urmFadeOut 0.5s ease-in-out;
}
.universal-reward-modal .wrapper.urm-fade-in.urm-fade-out {
  animation: urmFadeOut 0.75s ease-in-out;
}

/* -------------------- */
/* -- CLOSE ANIMATION -- */
/* -------------------- */
@keyframes urmZoomIn {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.universal-reward-modal .title-container.urm-zoom-in {
  animation: urmZoomIn 0.75s ease-in-out;
  visibility: visible;
}
.universal-reward-modal .reward-wrapper.urm-zoom-in {
  animation: urmZoomIn 0.75s ease-in-out;
  visibility: visible;
}

@keyframes urmZoomOut {
  0% {
    transform: scale(1);
  }
  75% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}
.universal-reward-modal .title-container.urm-zoom-in.urm-zoom-out {
  animation: urmZoomOut 1s ease-in-out;
}
.universal-reward-modal .reward-wrapper.urm-zoom-in.urm-zoom-out {
  animation: urmZoomOut 1s ease-in-out;
}



.ep-select-content {
  color: black;
  background-color: white;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: var(--safe-area-top-custom, 0px);
  margin-bottom: var(--safe-area-bottom-custom, 0px);
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  width: 100vw;
}

.ep-select-hud {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin-top: var(--safe-area-top-custom, 0px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%); */
}
.ep-select-img {
  width: 100%;
  height: 35vh;
  overflow: hidden;
}
.ep-select-img-src {
  width: 100%;
}
.ep-select-current-episode {
  position: relative;
  box-shadow: 0px -8px 9px -7px rgba(0,0,0,0.4);
  padding: 3.25vw 3.25vw 0 3.25vw;
}
.ep-select-actions {
  color: #6d74b4;
  font-size: var(--font-size-20-px);
  height: 5vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2vw;
}
.ep-select-actions-next {
  flex-grow: 1;
}
.ep-select-comments-btn {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.ep-select-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}
.ep-select-comments-btn > .ep-select-icon {
  height: 100%;
  align-self: center;
  pointer-events: none;
}
.ep-select-comments-btn > .ep-select-label {
  align-self: center;
  margin-left: 2vw;
  color: #494B54;
  font-size: var(--font-size-13-px);
  pointer-events: none;
}
.ep-select-gear-btn {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 3vw;
  padding: 0 2vw;
}
.ep-select-gear-btn > .ep-select-icon {
  height: 100%;
  align-self: center;
}
.ep-select-story-info {
  height: 5vw;
  font-weight: normal;
  color: #80828E;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1vw;
  font-size: var(--font-size-13-px);
  font-weight: normal;
}
.ep-select-story-title {
  margin-right: 2vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
.ep-select-ep-chapter {
  color: #272441;
  margin-left: 2vw;
}
.ep-select-ep-title {
  font-size: var(--font-size-20-px);
  margin-bottom: 2vw;
}
.ep-select-ep-description {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-size: var(--font-size-13-px);
  font-weight: normal;
  color: #272441;
  /*height: 17.3vw;*/
}
.ep-select-author {
  display: flex;
  align-items: center;
  font-size: var(--font-size-13-px);
  font-weight: normal;
  margin: 3vw 0 5vw 0;
}
.ep-select-author-btn {
  color: #6d74b4;
}
.ep-select-action-btn {
  background-color: #6d74b4;
  border-radius: 7px;
  height: 10vw;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1vw 0 3vw 0;
}
.ep-select-action-btn.timer {
  /* background-color: var(--color-mulberry) !important; */
  justify-content: left;
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
  padding: 1.25vw 4.267vw;
  border-radius: 8px;
}
.ep-select-action-btn.locked {
  display: none;
}
.ep-select-action-btn.disabled-button {
  background-color: #7d7d7d;
}
.ep-select-action-btn > .ep-select-icon {
  height: 5vw;
  width: 5vw;
  pointer-events: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.ep-select-action-btn.play > .ep-select-icon {
  background-image: url('assets/design-library/icons/ui/ic-play-white.svg');
}
.ep-select-action-btn.replay > .ep-select-icon {
  background-image: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/replay_white.svg');
}
.ep-select-action-btn.stream > .ep-select-icon {
  background-image: url('assets/design-library/icons/ui/ic-stream-white.svg');
}
.ep-select-action-btn.timer > .ep-select-icon {
  background-image: url('assets/design-library/icons/ui/ic-clock-white.svg');
}
.ep-select-action-btn > .ep-select-label {
  margin-left: 2vw;
  font-size: var(--font-size-17-px);
  pointer-events: none;
}
.ep-select-rev {
  font-size: var(--font-size-13-px);
  font-weight: normal;
  height: 5vw;
  margin: 4vw 0vw 2vw 0vw;
  color: #272441;
}


/* ep list header */

.ep-select-list-header {
  padding-left: 3.25vw;
  display: flex;
  align-items: center;
  background: linear-gradient(0deg, rgba(154, 167, 255, 0.2) 0%, rgba(154, 167, 255, 0) 100%);
  height: 9vw;
}
.ep-select-list-header > .ep-select-icon {
  height: 4vw;
  margin-top: 1vw;
}
.ep-select-list-header > .ep-select-label {
  margin-left: 1vw;
  font-size: var(--font-size-16-px);
  margin-top: 1vw;
}
.ep-select-list {
  color: black;
}


/* ep list item */


.ep-select-item {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e6e6e6;
}
.ep-select-item-info {
  width: 80%;
  padding-left: 3.25vw;
  padding-top: 2vw;
  height: 17vw;
}
.ep-select-item-header {
  display: flex;
  flex-direction: row;
  height: 5vw;
  margin-bottom: 1vw;
  color: #0F111C;
}
.ep-select-item-header.color-gray {
  color: var(--color-desat-med);
}
.ep-select-item-chapter {
  font-size: var(--font-size-16-px);
}
.ep-select-item-title {
  margin-left: 1vw;
  font-size: var(--font-size-16-px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-select-item-comment-btn {
  display: flex;
  flex-direction: row;
  margin-left: 3vw;
}
.ep-select-item-comment-btn > .ep-select-icon {
  height: 3vw;
  align-self: center;
  pointer-events: none;
}
.ep-select-item-comment-btn > .ep-select-label {
  align-self: center;
  margin-left: 1vw;
  color: #494B54;
  font-size: var(--font-size-11-px);
  pointer-events: none;
}
.ep-select-item-description {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--font-size-11-px);
  font-weight: normal;
  color: #494B54;
}
.ep-select-item-description.color-gray {
  color: #80828E;
}

.ep-select-item-action {
  position: relative;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ep-select-item-action-image {
  height: 4.5vw;
  width: 100%;
  margin-bottom: 0.5vw;
  background: url('assets/design-library/icons/ui/ic-lock.svg') no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}
.ep-select-item-action-image.play {
  background-image: url('assets/design-library/icons/ui/ic-play-highlight.svg');
}
.ep-select-item-action-image.replay {
  background-image: url("https://d31micz62sw9di.cloudfront.net/prod/icons/ui/replay_highlight.svg");
}
.ep-select-item-action-image.stream {
  background-image: url('assets/design-library/icons/ui/ic-stream-highlight.svg');
}
.ep-select-item-action-image.timer {
  background-image: url('assets/design-library/icons/ui/ic-clock-highlight-muted.svg');
}

.ep-select-item-action-label {
  color: #6d74b4;
  font-size: var(--font-size-11-px);
  pointer-events: none;
}
.ep-select-item-action-label.timer {
  color: var(--color-highlight-muted);
}

.ep-select-item-action-game-label {
  position: absolute;
  top: -1px;
  right: -1vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vw;
  height: 5.067vw;
  width: 100%;
  color: var(--color-white);
  font-size: var(--font-size-10-px);
  font-weight: 700;
  line-height: 3.2vw;
  background-image: url("https://d31micz62sw9di.cloudfront.net/prod/icons/ui/my-game-label_highlight-light_2.png");
  pointer-events: none;
}
.ep-select-item-action-game-label .game-label-icon {
  height: 2.667vw;
  width: 2.667vw;
  margin-left: 1vw;
  background-image: url("https://d31micz62sw9di.cloudfront.net/prod/icons/ui/save-point_white.svg");
}





/* hud */

.ep-select-back-btn > img {
  pointer-events: none;
}


.ep-select-locked {
  background-color: transparent !important;
}
.ep-select-locked .button-container {
  padding: 0;
}

.AvatarView {
  position: relative;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  transition: opacity 0.35s ease-in-out;
  -moz-transition: opacity 0.35s ease-in-out;
  -webkit-transition: opacity 0.35s ease-in-out;
  -o-transition: opacity 0.35s ease-out;
}

.AvatarView_comp {
  position: relative;
  height: 100%;
}

.AvatarView_img {
  display: block;
  height: 100%;
}
.AvatarView_img:not([src]) {
  visibility: hidden;
}

.AvatarView_canvas {
  display: block;
  position: absolute;
}

.redeem-button {
  letter-spacing: normal;
  width: 25vw;
  position: absolute;
  height: 3rem;
  border-radius: 6px;
  background-image: linear-gradient(to bottom, #F7A397, #FFD7AA);
  left: 5vw;display: flex;
  justify-content: center;
  align-items: center; 
}

.redeem-button:active {
  background-image: linear-gradient(to bottom, #F9C0B7, #FFE2C3);
}

.redeem-code-prompt {
  height: 15rem;
  color: #FFF;
}

.redeem-code-prompt-topbar {
  display: flex;
  align-items: center;
  height: 3rem;
  width: 100%;
  background: #2C2C2C;
  border-radius: 8px 8px 0 0;
}
.redeem-code-prompt-header {
  font-size: 1.3rem;
  color: #F7A397;
  padding: 0px 16px;
  font-weight: bold;
}

.redeem-code-prompt-body {
  position: relative;
  height: 12rem;
  background-color: #2C2C2C;
  border-radius: 0px 0px 8px 8px;
}

.redeem-code-prompt-input {
  border: 1px solid rgba(255,255,255,0.5);
  background-color: #7D7D7D;
  color: #fff;
  font-size: 1.2rem;
  font-weight: lighter;
  width: calc(100% - 32px);
  margin-left: 16px;
  padding: 5px 16px;
  border-radius: 1rem;
  height: 2rem;
}

.redeem-code-prompt-input::placeholder {
  color: #BEBEBE;
}

.redeem-code-prompt-input:focus {
  border: 1px solid rgba(247, 163, 151, 1);
  color: #fff;
}

.redeem-code-prompt-claim-btn {
  width: 100%; 
  height: 2.5rem;
  border-radius: 0px 0px 8px 8px;
  font-size: 1.2rem;
  background-color: #F7A397;
  color: #000;
  font-weight: lighter;
  letter-spacing: normal;
}

.redeem-code-prompt-claim-btn:active {
  background-color: #F9BEB6;
}

.redeem-code-prompt-claim-btn:disabled {
  background-color: #505050;
  color: #858585;
}
.reward-modal {
  color: #FFF;
}

.reward-modal-top {
  background-color: #2C2C2C;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh;
  width: 100%;
  border-radius: 6px 6px 0px 0px;
}
.reward-modal-header {
  font-size: 6vw;
  color: #F7A397;
}

.reward-modal-center {
  height: 36vh;
  background-color: #2C2C2C;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reward-modal-image-container {
  height: 33vh;
  background-color: #b5b5b5;
  border-radius: 6px;
}


.reward-modal-bottom {
  background-color: #2C2C2C;
  height: 15vh;
  border-radius: 0px 0px 6px 6px;
}

.reward-modal-item {
  font-size: 4.5vw;
  font-weight: lighter;
  color: #F7A397;
}

.reward-modal-message {
  font-size: 4vw;
  padding: 0px 20px;
  font-weight: lighter;
  line-height: 6vw;
}
.bottom-input-textarea-container {
  width: 100vw;
  display: flex;
  flex-direction: row;
  /* height: 12vw; */
  background: #383838;
  padding: 2vw;
  position: absolute;
  bottom: 0;
  align-items: flex-start;
}

.bottom-input-keyboard-up {
  /* height: auto; */
}

.message-center-stand-in-input {
  width: 80%;
  border-radius: 14px;
  font-size: 1.1em;
  padding: 3vw;
  background: #676767;
  color: rgba(255, 255, 255, .5);
  align-items: center;
  height: 7vw;
  font-weight: normal;
  letter-spacing: 1pt;
  margin-right: 3vw;
}

.bottom-input .bottom-dismiss-button {
  width: 20%;
  background: #676767;
  text-align: center;
  color: rgba(255, 255, 255, .5);
  border-radius: 7px;
  height: 7vw;
}

.bottom-input .reply-to-reply-username {
  font-size: 1.3em;
  line-height: 1.5em;
}

.bottom-text-area-open {
  position: relative;
  width: 71vw;
  height: calc(4vw + var(--lines) * 16px);
  margin: 0vw 2vw 0vw 1vw;
  overflow: hidden;
}

.bottom-input-textarea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  outline: none;
  border: none;
  border-radius: 8px;
  background: #676767;
  color: rgba(255, 255, 255, .5);
  resize: none;
  width: inherit;
  height: inherit;
}

.bottom-input-textarea-shadow {
  background: transparent none;
  color: transparent;
}

.bottom-input-textarea,
.bottom-input-textarea-shadow {
  font-size: 14px;
  font-family: monospace;
  padding: 2vw;
  margin: 0;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.bottom-input .bottom-input-textarea-submit-column {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  order: 1;
  background: #383838;
  /* margin-top: 1vw;
  margin-bottom: 2vw; */
}

.bottom-input-textarea-submit {
  text-align: center;
  width: 100%;
  background: #F7A397;
  color: #2C2C2C;
  border-radius: 8px;
  letter-spacing: 1pt;
  font-size: 16pt;
  padding: 2px;
}

.bottom-input-textarea-submit.disabled-button {
  background-color: rgba(76, 76, 76, 1);
  color: rgba(255, 255, 255, .3)
}

.message-center-stand-in-submit {
  padding: 2px;
}

.bottom-shelf-container{
    height: 100dvh;
    width: 100vw;
    display: flex;
    flex-direction:column;
    position: absolute;
    top:0;
    left:0;
    z-index: 2000;
}
.above-menu-cover{
    background-color:rgba(0,0,0,.3);
    flex-grow:1;
}
.bottom-shelf-menu{
    display: flex;
    flex-direction: column;
    width:100%;
    background-color:#2c2c2c;
    margin-bottom: 3rem;
    padding:24px;
}
.bottom-menu-row{
    width:100%;
    margin-bottom:24px;
    display:flex;
    flex-direction:row;
    align-items: center;
}
.bottom-menu-icon{
    margin-right:16px;
}
.bottom-menu-text{
    font-size:16px;
    color:white;
    line-height:20px;
}

.friends-screen {
  font: var(--font-body);
  height: 100%;
  color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-flow: column;
}

.friends-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10vh;
  font-size: 48px !important;
  animation: friends-loading 500ms infinite;
}
@keyframes friends-loading {
  0%, 100% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
}

.friends-body {
  padding: 2vw;
  transition: opacity 500ms;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: calc(100% - 7.5vh);
}

.friends-body.updating {
  opacity: 0.5;
  pointer-events: none;
}

.friends-list {
  display: grid;
  grid-gap: 8px;
}
.friend-li {
  display: grid;
  grid-template:
	  "pic trait name" auto
	  "pic trait status" min-content
	  "pic trait timestamp" auto / 13vw 11vw 1fr;
  grid-gap: 0 1.5vw;
  grid-auto-columns: min-content;
  grid-auto-flow: column;
  align-items: center;
  margin-bottom: 1vw;
}
.friend-li.no-traits {
  grid-template:
	  "pic name" auto
	  "pic status" min-content
	  "pic timestamp" auto / 13vw 1fr;
}
.friend-li-pic {
  grid-area: pic;
  padding-bottom: 100%;
  border-radius: 50%;
  background-color: var(--color-black);
  background-position: center;
  background-size: cover;
}
.friend-li-info {
  grid-area: name;
}
.friend-li-name {
  max-width: 59vw;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: end;
  font: var(--font-subtitle);
}
.friend-li-level {
  margin-top: 1vw;
  color: rgba(255,255,255, 0.5);
  font-size: 14px;
}
.friend-li-status {
  grid-area: status;
  font: var(--font-aux);
  color: var(--color-white-soft);
  font-size: 4vw;
}
.friend-li-timestamp {
  grid-area: timestamp;
  align-self: start;
  font: var(--font-caption);
  color: var(--color-white-softer);
}
.friend-li-button {
  padding: 1.5vw 2.5vw;
  font-size: 3.5vw;
  grid-row: 1 / -1;
  width: 21vw;
}

.suggested-friends-header {
  width: fit-content;
  margin: 3vw auto;
  color: var(--color-highlight-light);
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border-bottom: 1px solid var(--color-highlight-light);
}
.suggested-friends-list,
.pending-request-list {
  display: grid;
  grid-gap: 8px;
}
.refresh-suggested-button {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 16px;
}
.refresh-suggested-button-icon {
  height: 16px;
  width: 16px;
  margin-right:1vw;
  background: url("assets/design-library/ui/refresh.svg") center/contain no-repeat;
}
.friend-share-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 6vw;
  text-transform: none;
  width: fit-content;
  max-width: 80vw;
  align-items: center;
  margin: 6vw auto 6vw auto;
  overflow: hidden;
}
.friend-share-button-text {
  padding: 2vw;
  color: #FFF;
  font-size: 5vw;
  pointer-events: none;
}
.friend-search-button {
  max-width: 80vw;
  margin: 0 auto;
  padding: 12px 16px;
  font-size: 5vw;
}
.connect_button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--gradient-multiplayer);
  color: black;
  border-radius: 8px;
  font: var(--font-button);
  font-size: 5vw;
  padding: 6px 16px;
  height: auto;
  width: 60vw;
}

@keyframes open-panel {
    from {
      bottom: -100%;
    }
    to {
      bottom: 0;
    }
  }
  @keyframes close-panel {
    from {
      bottom: 0;
    }
    to {
      bottom: -100%;
    }
  }
  .open-panel {
    animation: open-panel;
    animation-duration: 0.75s;
    bottom: 0;
  }
  .close-panel {
    animation: close-panel;
    animation-duration: 0.75s;
    bottom: -100%;
  }

  .itg-friends-body {
    position: absolute;
    bottom: 0;
    height: 81%;
    width: 100%;
    color: #FFF;
    background: var(--color-background);
    border-radius: 10px 10px 0 0;
    animation-duration: 0.75s;
    display: grid;
    grid-template-rows: calc(9px + 25vw) 1fr calc(44vw + var(--safe-area-bottom-custom, 0px));
  }
  .itg-header {
    background-color: var(--color-background-card);
    color: var(--color-primary);
    text-align: center;
    font-size: 5vw;
    font-weight: bolder;
    padding: 5px 3vw 3vw 3vw;
    border-radius: 5px 5px 0 0;
  }
  .itg-close {
    height: 4px;
    width: 13vw;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
  }
  .itg-heading {
    margin: 2vw 0 4vw 0;
    height: 6vw;
  }
  .itg-search-container {
    display: grid;
    grid-template-columns: 1fr 20%;
    grid-gap: 5px;
    height: 10vw;
  }
  .itg-search-container > .textfield {
    background: transparent;
  }
  .search-friends {
    border-radius: 5px;
    font-size: 3.5vw;
    font-weight: normal;
  }
  .itg-friends-list {
    padding: 5vw;
    color: #FFF;
    overflow-y: scroll;
  }
  .itg-friend-li {
    display: grid;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: solid grey 1px;
    height: 17vw;
  }
  .itg-no-trait-layout {
    grid-template-columns: 15% 60% 25%;
  }
  .itg-friend-li-pic {
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
  }

  .itg-friend-li-trait-container,
  .itg-friend-li-name,
  .itg-info-container {
    pointer-events: none;
  }

  .itg-info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 5px;
    font-size: 4vw;
    font-weight: normal;
  }
  .itg-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    height: 80%;
    color: var(--color-black);
    font-weight: normal;
    background: var(--color-primary);
    border-radius: 5px;
  }

  .itg-button-disabled {
    color: var(--color-gray-mid);
    background: var(--color-gray-dark);
  }

  .itg-share-link-container {
    position: relative;
    height: calc(44vw + var(--safe-area-bottom-custom, 0px));
    width: 100%;
    padding: 3vw 7vw;
    font-size: 4.5vw;
    background-color: var(--color-background-card);
  }
  .spinner-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    display: none;
    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.5);
  }
  .itg-share-link-container.loading .spinner-container {
    display: flex;
  }
  .itg-share-link-header {
    text-align: center;
    margin-bottom: 3vw;
  }
  .lobby-invite-slot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 6vw;
    font-family: "Material Icons";
    font-weight: normal;
  }
  .lobby-invite-slot span:nth-child(1) {
    position: absolute;
  }
  .lobby-invite-slot span:nth-child(2) {
    display: none;
  }

  .lobby {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column
  }

  .lobby-text-info-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }


  .lobby-text-info {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .lobby-box {
    padding-top: 16px;
    height: calc(100% - 9.6rem);
    background: #2c2c2c;
    color: #FFF;
    font-weight: normal;
    border-radius: 8px;
    width: -webkit-calc(100vw - 32px);
    width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
  }

  .lobby-top-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .lobby-header {
    padding: 0 8vw;
    background: var(--background-color);
    height: 41vw;
    min-height: 41vw;
    display: flex;
    justify-content: center;
  }

  .lobby-story-info {
    color: rgba(255, 255, 255, .8);
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 12px;
  }

  .lobby-cover-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    min-height: 23vh;
    padding: 2vw 8vw;
    background-color: #292A31;
  }
  .lobby-cover-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 1.5vw;
  }

  .lobby-chapter {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    justify-content: center;
  }
  .lobby-chapter-header {
    color: var(--color-highlight-light);
    font-size: var(--font-size-16-px);
    font-weight: 700;
    margin-bottom: 1.5vw;
  }
  .lobby-chapter-title {
    color: var(--color-white);
    font-size: var(--font-size-16-px);
    font-weight: 500;
  }
  .lobby-chapter-subtitle {
    color: var(--color-white);
    font-size: var(--font-size-11-px);
    font-weight: 600;
  }


  .lobby-option-label {
    height: calc(8vw + 4px);
    margin-right: 4vw;
  }

  .lobby-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
  }

  .lobby-body-main {
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 2vw;
  }

  .lobby-cta {
    padding: 8px 16px;
  }

  .lobby-players-role-title {
    color: var(--color-gray-light);
    font-size: 4vw;
    border-bottom: solid 1px var(--color-gray-light);
    padding-bottom: 2vw;
    margin: 0 11vw 4vw;
  }

  .lobby-body-main .scroll-gesture {
    position: fixed;
    display: inline-block;
    right: 3vw;
    bottom: calc(40px + 6vw + var(--safe-area-bottom-custom, 0px));
    width: 6vw;
    height: 24vw;
    background-color: #50505080;
    transform: translate(0, -50%);
    box-shadow: inset 0 0 0 1px var(--color-gray-mid);
    border-radius: 4vw;
    pointer-events: none;
  }
  .lobby-join-video-text-msg {
    text-align: center;
  }

  .scroll-gesture:before {
    content: '';
    display: inline-block;
    bottom: 2vw;
    position: absolute;
    left: 50%;
    width: 3vw;
    height: 3vw;
    background: var(--color-gray-light);
    margin-left: -1.5vw;
    border-radius: 2vw;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-name: scroll-gesture-animation;
    animation-timing-function: cubic-bezier(0.4, 0.6, 0.75, 1);
  }

  @keyframes scroll-gesture-animation {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(-17vw);
    }
  }

  .lobby-players {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: min-content;
    grid-gap: 2vw 6vw;
    margin: 0 11vw 4vw;
  }

  .lobby-players .lobby-joined {
    margin-top: 1vw;
  }

  .waiting-room-player-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 4vw;
    padding: 3vw 0vw 3vw 0vw;
  }

  .waiting-room-player-portrait {
    margin-right: 3vw;
  }

  .waiting-room-player-text {
    display: flex;
    flex-direction: column;
    width: 43vw;
  }

  .waiting-room-player-username {
    font-size: 4vw;
    line-height: 28px;
    font-weight: 700;
    color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .lobby-new-players {
    margin: 3vw;
  }

  .lobby-new-players>.waiting-room-player-container {
    margin: 2vw 0;
    background: #2c2c2c;
    border-radius: 20px;
  }

  .lobby-joined {
    font-size: 3.5vw;
    color: #D5D5D5;
  }


  .lobby-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1vw var(--safe-area-bottom-custom, 0px) 1vw;
    width:100%;
    background-color: var(--color-dark);
  }

  .super-exciting-background {
    background-image: linear-gradient(#80f5bc, #9e96fc);
  }


  .lobby-footer-start-text {
    font-size: 5vw;
    color: black;
  }

  .lobby-footer-wait-text {
    font-size: 4vw;
    font-weight: lighter;
  }

  .lobby-start-button {
    flex-grow: 1;
    height: 9vw;
    min-width: 28vw;
    max-width: 50vw;
    display: flex;
    background-color: var(--color-highlight-muted);
    color: var(--color-white-dimmed);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    font-size: 3.8vw;
    line-height: 3.8vw;
    text-align: center;
    pointer-events: none;
  }
  .start-button-active {
    background: var(--color-pop) !important;
    color: var(--color-white) !important;
    pointer-events: all;
  }

  .lobby-starting-countdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .lobby-starting-countdown-label {
    font-size: 6vw;
    color: var(--color-primary);
    font-weight: bold;
  }

  .lobby-starting-countdown-time {
    font-size: 16vw;
    color: var(--color-primary);
    font-weight: lighter;
  }

  .lobby-info {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 10vh;
    justify-content: space-between;
    display: none;
  }

  .lobby-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;

    img {
      width: 100%;
      height: 100%;
    }

  }

  #lobby-video-section {
    position: relative;
    display: flex;
    justify-content: center;
    top: 20vw;
  }

  .lobby-join-video-button {
    margin: 1.65vh 0vh;
    width: 100%;
    display: flex;
    align-items: center;
    background-image: linear-gradient(#80f5bc, #9e96fc);
    justify-content: center;
    border-radius: 8px;
  }

  .lobby-join-video-text {
    color: white;
    font-size: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lobby-options-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 4vw;
    font-weight: lighter;
    color: white;
  }

  .lobby-footer-bottom-row {
    display: flex;
    flex-direction: row;
    column-gap: 3vw;
    padding: 1vw 3vw;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    max-height: 5rem;
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease-in-out;

    &.invisible {
      max-height: 0;
      opacity: 0;
    }

    .lobby-chat-button {
      display: flex;
      align-items: center;
      height: 9vw;
      filter: var(--svg-filter-white-to-blue);

      &.disabled {
        background: transparent;
        opacity: 0.5;
        color: var(--color-desat-med);
        pointer-events: none;
      }

    }

    .lobby-settings-button {
      height: 7vw;
      width: 7vw;
      filter: var(--svg-filter-white-to-blue);
    }

  }

  #lobby-status-row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4vw;

    .lobby-status-text {
      font: var(--font-body4);
      color: var(--color-desat-light);
    }

  }

  .lobby-options {
    background: #1c1c1c;
    padding: 3vw;
    flex-grow: 1;
  }

  .lobby-option {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .lobby-emoji-button {
    animation-duration: 0.5s;
    display: flex;
    align-items: center;
    height: 9vw;

    .open-emojis {
      height: 7vw;
      width: 7vw;
      filter: var(--svg-filter-white-to-blue);
      margin: auto;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .lobby-player-li {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
  }
  .lobby-player-li-pic {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-gray-dark);
  }
  .lobby-invite-slot, .lobby-player-li-pic {
    --invite-slot-size: 18vw;
    border-radius: 50%;
    height: var(--invite-slot-size);
    width: var(--invite-slot-size);
    margin: 0 auto;
    background-color: var(--color-highlight);
  }
  .lobby-broadcasters .lobby-invite-slot {
    color: transparent;
    pointer-events: none;
    background-color: var(--color-gray-dark);
  }
  .lobby-screen.is-host .lobby-broadcasters .lobby-invite-slot {
    color: var(--color-white);
    pointer-events: auto;
  }
  .lobby-players-container {
    background-color: var(--background-color);
    padding-top: 2vw;
    margin-top: -1px; /* fix ugly gap */
  }
  .lobby-player-li-name {
    font-size: 3vw;
    width: 22vw;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lobby-player-li-text {
    color: var(--color-white);
    overflow: hidden;
  }
  .lobby-player-li-desc {
    text-align: center;
    font-size: 3vw;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-white-soft);
  }

  .audience-list-modal {
    position: absolute;
    height: 50dvh;
    top: calc(var(--safe-area-top-custom, 0px) + 25vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

.lobby-chat-icon {
  height: 7vw;
  width: 7vw;
  background: url('assets/img/buttons/icon-live-chat-white.svg') no-repeat center;
  background-size: contain;
}

.lobby-network-offline {
  top: 6vh;
}
/** tournament **/

.lobby-tournament .lobby {
  /* background: linear-gradient(180deg, #FFEAB2 0%, #E8B637 100.09%); */
  background: url('assets/design-library/ui/background_competitive.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
}
.lobby-tournament .lobby-body,
.lobby-tournament .lobby-header {
  background: transparent;
}
.lobby-tournament .lobby-footer {
  padding-top: 4vw;
}

.lobby-tournament .lobby-join-video-text-msg {
  color: black;
}
.lobby-tournament .lobby-invite-slot {
  background: rgba(117, 62, 11, 0.25);
  position: relative;
}
.lobby-tournament .lobby-broadcasters {
  display: none;
}

.lobby-tournament .lobby-players-container {
  border-radius: 5vw;
  background: rgba(255, 215, 138, 0.80);
  margin: 4vw;
  padding: 4vw 0;
}
.lobby-tournament .lobby-players-role-title {
  border-bottom: none;
  font-size: var(--font-size-20-px);
  font-weight: 600;
  text-align: center;
  color: black;
}
.lobby-tournament .lobby-player-li-name,
.lobby-tournament .lobby-invite-slot span:nth-child(2) {
  color: var(--color-desat-dark, #494B54);
  font-size: 3vw;
}
.lobby-tournament .lobby-invite-slot span:nth-child(1) {
  font-size: 10vw;
}
.lobby-tournament .lobby-invite-slot span:nth-child(2) {
  display: block;
  position: absolute;
  top: var(--invite-slot-size);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Lato";
}

.tournament-lobby-banner {
  --banner-icon-top-margin: 2.75vw;
  border-radius: 4vw;
  margin: var(--banner-icon-top-margin) 4vw 0 4vw;
  background: linear-gradient(180deg, #FFF5D0 0%, #FFE49E 42.71%);
}
.tournament-lobby-header {
  display: flex;
}
.tournament-lobby-header-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5vw 0;
}
.tournament-lobby-header-above-title {
  color: #704A00;
  font-weight: 600;
  font-size: var(--font-size-13-px);
  display: flex;
}
.tournament-lobby-header-title {
  font-size: var(--font-size-17-px);
  font-weight: 700;
}
.tournament-lobby-header-icon {
  margin-top: calc(-1 * var(--banner-icon-top-margin));
  width: 20vw;
}
.tournament-lobby-header-icon img {
  width: 100%;
}

.tournament-lobby-buttons {
  display: flex;
  justify-content: center;
  gap: 2vw;
  padding: 0 2vw;
}
.tournament-lobby-invite,
.tournament-lobby-starts {
  border-radius: 200px;
  font-size: var(--font-size-13-px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5vw 0;
}
.tournament-lobby-starts {
  flex: 10;
  background: rgba(148, 108, 6, 0.26);
  color: var(--color-gray, #0F111C);
}
.tournament-lobby-invite {
  flex: 7;
  background: var(--color-white, #FFF);
  color: var(--color-black, #000);
}

.tournament-lobby-bottom {
  display: flex;
  flex-direction: column;
}
.tournament-lobby-bottom-title {
  color: var(--color-dark, #0F111C);
  text-align: center;
  font-size: var(--font-size-11-px);
  font-weight: 600;
  padding: 1.5vw 0;
}
.tournament-lobby-bottom-desc {
  position: relative;
  height: 50vw;
  padding: 1.5vw;
  display: flex;
  gap: 3vw;
}
.tournament-lobby-bottom-desc-reward {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 55%;
  height: 45vw;
  color: var(--color-white);
  gap: 0.5vw;
}
.tournament-lobby-bottom-desc-reward div:nth-child(1) {
  color: #704A00;
  text-align: center;
  font-size: var(--font-size-13-px);
  font-weight: 600;
}
.tournament-lobby-bottom-desc-reward div:nth-child(2) {
  color: var(--color-dark);
  text-align: left;
  font-size: var(--font-size-13-px);
  font-weight: 600;
  margin-bottom: 2vw;

  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tournament-lobby-bottom-overlay {
  position: absolute;
  top: 0;
  right: 0;
  object-fit: contain;
  pointer-events: none;
  height: 100%;
}
.tournament-lobby-bottom-overlay img {
  height: 100%;
}

.tournament-lobby-bottom-desc-reward-image {
  position: relative;
  height: 100%;
  width: 40%;
}
.tournament-lobby-bottom-prize {
  width: 94px;
  height: 94px;
  border-radius: 3vw;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tournament-lobby-bottom-prize img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.tournament-lobby-bottom-reward-bg {
  width: 100%;
  height: 100%;
  border-radius: 2vw;
}
.tournament-lobby-bottom-reward-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3vw;
}

.lobby-tournament .lobby.is-big-video .lobby-body-main {
  background: linear-gradient(180deg, #FFEAB2 0%, #E8B637 100.09%);
}

.lobby.is-big-video,
.lobby-tournament .lobby.is-big-video {
  background: transparent;
}

.lobby .lobby-large-video-divider,
.lobby-tournament .lobby .lobby-large-video-divider {
  transition: 0.5s ease height;
  height: 0;
  min-height: 0;
}

.lobby.is-big-video .lobby-large-video-divider,
.lobby-tournament .lobby.is-big-video .lobby-large-video-divider {
  height: 23vh;
  min-height: 23vh;
  background: transparent;
}


.lobby-tournament .lobby-player-li-desc {
  color: var(--color-dark);
}

.showcase-screen {
  font: var(--font-body);
  background: var(--background-color);
  color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.showcase-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.showcase-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.showcase-header {
  top: 0;
  display: flex;
  height: 48px;
  background: var(--color-background-card);
}

.showcase-header-back {
  width: 48px;
  background: url("assets/img/ui/icon-arrow-back.svg") center/24px no-repeat;
}

.showcase-header-title {
  font-size: 4.5vw;
  font-weight: 700;
  color: var(--color-primary);
  align-self: center;
  flex: 1 0 0;
  text-align: center;
  margin-right: 48px;
}

/* ------------------------- */
/* -- SHOWCASE STORY LIST -- */
/* ------------------------- */

.showcase-story-list,
.subscription-story-list {
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  align-content: start;
  /* top: var(--safe-area-top-custom, 0px); */
  top: 0;
}
body.ios .subscription-story-list {
  top: 0;
}
.story-list-game-preview {
  /* top: var(--safe-area-top-custom, 0px); */
  top: 0;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
}


.showcase-story {
  position: relative;
  height: calc(100dvh - var(--app-header-and-footer-height) - var(--safe-area-top-bottom-custom, 0px));
  width: 100%;
}

.story-list-game-preview .showcase-story {
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
}

.showcase-story-debug {
  position: absolute;
  left: 5vw;
  bottom: 82vw;
  color: white;
  font-size: 4vw;
  text-shadow: 0 0 4px black;
}

.showcase-story-tabs-container {
  position: absolute;
  top: calc(5.1vw + var(--app-header-height) + env(safe-area-inset-top, 0px));
  width: 100%;
  text-align: center;
  font-size: 5vw;
  pointer-events: none;
}
.showcase-story-tabs {
  /* padding: 5.1vw 0; */
  /* padding-top: calc(5.1vw + var(--app-header-height) + var(--safe-area-top-custom, 0px)); */

  /* background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent); */
  font-weight: bold;
  background: #00000066;
  padding: 1.3vw 4.5vw;
  width: fit-content;
  border-radius: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto;
}
/*
.showcase-story-tabs {
  padding: 5.1vw 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
  font-weight: bold;
  pointer-events: none;
}
*/
.hide-story-list {
  height: 100%;
  background: var(--background-color);
}

div.showcase-tab-following,
div.showcase-tab-for-you {
  margin: 0 2.5vw;
  min-height: 6vw;
  line-height: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

/*
.showcase-tab-following,
.showcase-tab-for-you {
  display: inline;
  margin: 0 1.5vw;
  padding: 2vw 0;
  pointer-events: auto;
}
*/
.inactive-feed-tab {
  font-size: 4.5vw;
  color: rgba(255,255,255,0.7);
}

.showcase-story-author-container {
  display: flex;
  margin-right: 3vw;
  align-items: center;
  line-height: 6vw;
  pointer-events: none;
}
.showcase-story-author-name {
  color: #FFF;
  text-align: left;
  font-size: 4vw;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  pointer-events: auto;
}
.showcase-story-author-verification {
  height: 4.5vw;
  margin-left: 2vw;
}

.showcase-story-episode {
  display: flex;
  align-items: center;
  margin-bottom: 4vw;
  font-size: 4.5vw;
  font-weight: normal;
}

.showcase-story-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 3vw;
}
.showcase-story-label-container {
  display: flex;
  align-items: center;
  margin-right: 3vw;
}
.showcase-story-label,
.showcase-story-release,
.showcase-story-episode-count {
  min-width: 12vw;
  margin-right: 1vw;
  padding: 1.5vw 3vw;
  color: #FFF;
  font-size: 3.5vw;
  text-align: center;
  background: var(--color-gray-dark);
  border: solid 1px transparent;
  border-radius: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.showcase-story-time-label-container {
  display: flex;
  align-items: center;
  margin-right: 3vw;
  margin-bottom: 3vw;
}
.showcase-story-time-label,
.showcase-story-time-label-challenge {
  margin-right: 1vw;
  padding: 1.5vw 2vw;
  color: #FFF;
  font-size: 4.5vw;
  text-align: center;
  background: var(--color-red);
  border-radius: 8px;
}
.showcase-story-time-label-challenge {
  --icon-size: 4vw;
  --icon-margin: 2vw;
  position: relative;
  background: var(--color-feature);
  color: var(--color-dark);
  padding-left: calc(2 * var(--icon-margin) + var(--icon-size));
  display: flex;
}
.showcase-story-time-label-challenge::before {
  content: '';
  position: absolute;
  left: var(--icon-margin);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size);
  height: var(--icon-size);
  background: url('assets/design-library/icons/icons_episode_cover/ic-trophy.svg') no-repeat;
  background-position: center;
  background-size: var(--icon-size);
}

.showcase-story-image-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.showcase-story-image-container.portrait {
  width: 100vw;
}
.showcase-story-image-container.square {
  background: linear-gradient(0deg, rgba(255,255,255,0.8), #383838 40%);
}

.showcase-story-image.square {
  width: 100%;
  box-shadow: 0px 16px 30px #AAA;
}
.showcase-story-image.portrait {
  position: absolute;
  height: 100%;
  left: 50vw;
  transform: translateX(-50%);
}

.showcase-story-description {
  position: absolute;
  bottom: 0;
  display: grid;
  grid-template-columns: 86% 14%;
  grid-template-rows: 1fr 20vw;
  width: 100vw;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 70%, transparent);
}
.showcase-story-title {
  width: 100%;
  margin: 3vw 0;
  font-size: 5vw;
  font-weight: bolder;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.showcase-story-info-description {
  margin-top: 5vw;
  font-size: 4vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.showcase-story-stats {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-right: 8vw;
  font-size: 3.6vw;
  text-align: center;
  font-weight: normal;
  pointer-events: all;
}
.showcase-story-comments,
.showcase-story-likes,
.showcase-story-favorites,
.showcase-story-favorites-icon,
.showcase-story-shares,
.showcase-story-flag {
  line-height: 0.6;
  padding-top: 8vw;
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 2vw;
}
.showcase-story-comments {
  background-image: url('assets/img/ui/icon-comment-24px-1.svg');
}
.showcase-story-likes {
  background-image: url('assets/img/ui/icon-favorite_border-24px-1.svg');
}

.showcase-story-shares {
  margin-bottom: 2vw;
  padding-top: 12vw;
  background-image: url('assets/img/ui/icon-share-episode.svg');
  background-position: center;
}
.story-list-game-preview .showcase-story-shares,
.showcase-story-item-cover .showcase-story-shares {
  background-image: url('assets/img/ui/ic-share.svg');
}
.showcase-story-shares.spotlight {
  position: relative;
  width: 7vw;
  background-color: transparent;
  background-image: url('assets/img/buttons/icon-share-spotlight.png');
  animation: shareSpotlight 1.3s ease-in-out 0.25s infinite;
}
@keyframes shareSpotlight {
  0% {
    background-size: 100%;
  }
  50% {
    background-size: 85%;
  }
  100% {
    background-size: 100%;
  }
}

.showcase-story-favorites,
.showcase-story-favorites-icon {
  background-image: url('assets/img/ui/icon-bookmark-outline-white.svg');
  margin-top: 0;
  margin-bottom: 2.5vw;
  padding-top: 12vw;
  background-size: 85%;
  background-position: center;
}
.showcase-story-favorites.added,
.showcase-story-favorites-icon.added {
  background-image: url('assets/img/ui/icon-bookmark-peach.svg');
}

.story-list-game-preview .showcase-story-favorites,
.showcase-story-item-cover .showcase-story-favorites-icon {
  background-image: url('assets/img/ui/ic-bookmark-empty.svg');
  background-size: 110%;
}
.story-list-game-preview .showcase-story-favorites.added,
.showcase-story-item-cover .showcase-story-favorites-icon.added {
  background-image: url('assets/img/ui/ic-bookmark-full.svg');
}

.showcase-story-flag {
  margin-top: 3vw;
  margin-bottom: 0;
  background-image: url('assets/img/ui/icon-more_horiz-24px.svg');
}
.showcase-story-item-cover .showcase-story-flag {
  background-image: url('assets/design-library/icons/icons_episode_cover/ic-more.svg');
}

.showcase-story-derivative-button {
  position: absolute;
  top: -12vw;
  right: 3vw;
  height: 15vw;
  width: 15vw;
  margin-top: 2vw;
}

.showcase-story-tag {
  display: inline-block;
  margin: 0 1vw;
}
.showcase-story-tag-container {
  margin: 5vw 0;
  font-size: 4vw;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: normal;
}

.showcase-hide-item {
  display: block;
  opacity: 1;
  animation: showcase-hide-item 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
.showcase-show-item {
  display: block;
  animation: showcase-show-item 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes showcase-hide-item {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}
@keyframes showcase-show-item {
  from {
    opacity: 0;
    display: block;
  }
  to {
    opacity: 1;
  }
}

.showcase-story-button-container {
  grid-column: 1 / 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 1vh;
  color: #000;
  font-size: 4vw;
  text-align: center;
  word-spacing: 5px;
}
.showcase-story-play-button, .showcase-story-mp-button,
.showcase-create-book-button, .showcase-edit-book-button,
.schedule-create-button
{
  --icon-size: 7vw;
  box-sizing: border-box;
  width: 45vw;
  padding: 2vw 0;
  border-radius: 100vw;
  position: relative;

  color: var(--color-dark);
  background-color: var(--color-white);
  font-size: calc(1.1 * var(--font-size-17-px));
  font-weight: 600;

  box-shadow: 0px 0px 10.39535px 0px rgba(30, 28, 44, 0.70);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1vw;
}
.showcase-create-book-button,
.showcase-edit-book-button {
  /* background: var(--color-primary); */
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.showcase-story-play-button-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-story-timer {
  position: absolute;
  top: -6vw;
  height: 12vw;
  width: 45.5vw;
  padding-top: 0.5vw;
  color: var(--color-white);
  font: var(--font-body3);
  background: var(--color-mulberry);
  border-radius: 20px 20px 0 0;
}

.showcase-icon-dark {
  display: block;
}
.showcase-icon-light {
  display: none;
}
.showcase-secondary-button {
  border: 2px solid var(--color-white);
  background: rgba(0, 0, 0, 0.30);
  color: var(--color-white);
}
.showcase-secondary-button .showcase-icon-light {
  display: block;
}
.showcase-secondary-button .showcase-icon-dark {
  display: none;
}
.showcase-story-play-button .showcase-icon,
.showcase-story-mp-button .showcase-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.showcase-story-info-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  width: 100vw;
  padding-bottom: 1.2vw;
}
.showcase-story-mp-rev,
.showcase-story-competitive-mode-info {
  width: 100%;
  font-weight: 600;
  font-size: var(--font-size-11-px);
  color: rgba(255, 255, 255, 0.7);
}

.showcase-story-author-avatar-container {
  position: relative;
}
.showcase-story-author-avatar {
  height: 13vw;
  width: 13vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  right: 4vw;
  margin-bottom: 4vw;
  border-radius: 50%;
}
.story-cover-footer {
  height: 3rem;
  width: 100%;
  background: var(--background-color);
}
.showcase-story-item.showcase-story-item-game-preview {
  pointer-events: none;
}
.showcase-story-item-game-preview-template {
  pointer-events: none;
}

.showcase-story-item-game-preview {
  height: 100dvh;
  width: 100%;
}
body.ios .showcase-story-item-game-preview {
  height: calc(100dvh - var(--safe-area-bottom-custom, 0px));
}
.showcase-story-item-game-preview-right {
  position: absolute;
  right: 0;
  bottom: var(--app-footer-height);
  grid-template-rows: 1fr 15vw;
}
.showcase-story-item-game-preview-bottom {
  position: absolute;
  bottom: var(--app-footer-height);
  left: 0;
  width: 100%;
  min-height: 12vw;
  background-color: #1E1C2C;
  display: flex;
  align-items: center;
}
.showcase-story-item-game-preview-bottom-spacer {
  height: var(--app-footer-height);
  background-color: #1E1C2C;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.showcase-story-item-game-preview-bottom-controls {
  width: 100%;
  height: 100%;
  display: flex;
}
.showcase-story-item-game-preview-bottom-controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw;
  width: 100%;
}
.showcase-story-item-game-preview-bottom-controls-bottom {
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.showcase-story-item-game-preview-bottom-controls-scrubber {
  width: 90%;
  height: 100%;
  background-color: #43455B;
  position: relative;
}
.showcase-story-item-game-preview-bottom-controls-scrubber-progress {
  width: 44%;
  background-color: var(--color-highlight-muted);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: width 0.1s ease-in-out;
}
.showcase-story-item-game-preview-bottom-controls-episode {
  font-weight: 700;
  font-size: var(--font-size-13-px);
  color: var(--color-desat-light);
}
.showcase-story-item-game-preview-bottom-controls-play {
  font-weight: 700;
  font-size: var(--font-size-13-px);
  color: var(--color-white);
  background-color: #FC536F;
  border-radius: 1.333vw;
  padding: 1.25vw 2.5vw;
  pointer-events: all;
}

.showcase-story-item-game-container {
  position: relative;
  top: calc(-1* var(--app-header-height) - 100dvh);
  height: 100%;
}
.showcase-story-item-cover .showcase-story-item-game-container {
  top: var(--app-header-height);
}
.showcase-story-item-game-container-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.showcase-story-item-game-container > canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}

.showcase-story-item-game-preview-bottom-info-title {
  font-weight: 600;
  font-size: var(--font-size-17-px);
  color: var(--color-white);
}

.showcase-story-item-game-preview-bottom-info-author {
  font-weight: 600;
  font-size: var(--font-size-16-px);
  color: #C9CDDD;
}

.showcase-story-item-game-preview-click-overlay {
  position: absolute;
  width: 100%;
  top: 10%;
  left: 0%;
  height: 90%;
  pointer-events: all;
}

/* ------------------------------------------ */
/* -- STORY COVER ADD BUTTON AND ANIMATION -- */
/* ------------------------------------------ */

.showcase-story-author-add { /* container of flip */
  position: absolute;
  bottom: 0.5vw;
  right: 0vw;
  height: 6vw;
  width: 6vw;

	perspective: 1000px;
}
.showcase-story-author-icon { /* inner container of flip */
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
	transition: 0.9s;
	transform-style: preserve-3d;
}
.showcase-story-author-add-icon, .showcase-story-author-check-icon { /* css for flip animation */
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.showcase-story-author-add-icon { /* front side of flip */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 4vw;
  font-family: "Material Icons";
  font-weight: bold;
  background: var(--color-red);
  border-radius: 50%;
}
.showcase-story-author-check-icon { /* back side of flip */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: var(--color-red);
  font-size: 4vw;
  font-family: "Material Icons";
  font-weight: bold;
  background: #FFF;
  border-radius: 50%;

  transform: rotateY(180deg);
}
.showcase-story-author-add.flip .showcase-story-author-icon { /* the flip */
  transform: rotateY(180deg);
}
.fadeOutAdd,
.fadeOutNoVisibility { /* fade out add button */
  animation-name: fadeOutAdd;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  visibility: hidden !important;
}
.fadeOutNoVisibility {
  visibility: unset !important;
}
@keyframes fadeOutAdd {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.showcase-popup-container {
  color: var(--color-black);
}

.showcase-loading {
  text-align: center;
  margin: 32px;
  font-weight: 700;
  font-size: 19px;
  margin-top: calc(32px + var(--app-header-height) + var(--safe-area-top-custom, 0px));
}

.showcase-item-full-row-1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.showcase-item-full-row-2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.showcase-item-full-row-4 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}
.showcase-item-full-row-5 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
}

.showcase-item-full-row-top {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}


.original-label-container {
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

.original-label {
  width: 74px;
  padding: 2px;
  color: #000;
  text-align: center;
  font-size: 10px;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #F7A397, #FFD7AA);
  transform: rotate(-45deg) translate(-28%, -35%);
}

.showcase-retry-button {
  text-align:center;
  height: 14vw;
  background-color:#F7A397;
  color:#000;
  font-size: 5vw;
  font-weight: normal;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3vh;
  padding-left: 25px;
  padding-right: 25px;
  min-width: 25%;
}

.empty-list-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

img.empty-list-icon {
  height: 14vw;
}



.lds-spinner-container {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  transform: scale(0.5);
}

.showcase-game-preview-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner-container.lds-spinner-desat-med .lds-spinner div:after {
  background: var(--color-desat-med);
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* -------------------------------- */
/* -- SHOWCASE HORIZONTAL SCROLL -- */
/* -------------------------------- */

.horizontal-scroll-list {
  display: flex;
  padding-left: 5vw;
  overflow-x: scroll;
}
.showcase-hs-story {
  position: relative;
  display: flex;
  flex-flow: column;
  text-align: left;
  height: 100%;
  width: 28vw;
  padding: 0;
}
.showcase-hs-story-image-container {
  position: relative;
}
.showcase-hs-story-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100%;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  margin-bottom: 8px;
}
.showcase-hs-story-resume-label {
  font-size: 3.3vw;
  color: #000;
  width: 100%;
  height: 6vw;
  position:absolute;
  bottom: 0;
  left:0;
  background:linear-gradient(180deg, #F7A397, #FFD7AA);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 8px;
}
.showcase-hs-story-title {
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 2px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 1 0 auto;
}
.showcase-hs-story-author-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-hs-story-author {
  font-size: 0.7rem;
  font-weight: 400;
  margin-bottom: 8px;
  margin-top: 6px;
  color: var(--color-white-soft);
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.showcase-hs-story-author-verification {
  height: 0.9rem;
  width: 0.9rem;
  margin-bottom: 2px;
  margin-left: 1vw;
}
.original-hs-label-container {
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}
.original-hs-label {
  width: 74px;
  padding: 2px;
  color: #000;
  text-align: center;
  font-size: 10px;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #F7A397, #FFD7AA);
  transform: rotate(-45deg) translate(-28%, -35%);
}

/* ------------------------ */
/* -- FYP SCROLL GESTURE -- */
/* ------------------------ */


/* ------------------------------------------------ */
/* ---- YELLOW HAND SCROLL INDICATOR CSS START ---- */
/*
.fyp-scroll-gesture {
  position: fixed;
  display: inline-block;
  width: 26vw;
  height: 26vw;
  pointer-events: none;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: IndicatorFadeOut 4s linear infinite;
}
.fyp-scroll-gesture-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  animation: IndicatorFadeOut 4s linear infinite;
}
@keyframes IndicatorFadeOut {
  0%, 75%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
*/
/* ---- YELLOW HAND SCROLL INDICATOR CSS END ---- */
/* ---------------------------------------------- */


/* ----------------------------------------------- */
/* ---- WHITE HAND SCROLL INDICATOR CSS START ---- */
/* .fyp-scroll-gesture {
  position: fixed;
  display: inline-block;
  width: 26vw;
  height: 26vw;
  pointer-events: none;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fyp-scroll-gesture-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  transform: rotate(325deg);
  animation: MoveUpDown 2s linear infinite;
}
@keyframes MoveUpDown {
  0%, 30%{
    bottom: 0;
    opacity: 1;
  }
  85%, 100% {
    bottom: 70px;
    opacity: 0;
  }
} */
/* ---- WHITE HAND SCROLL INDICATOR CSS END ---- */
/* --------------------------------------------- */


/* ------------------------------------------ */
/* ---- ARROW SCROLL INDICATOR CSS START ---- */
.fyp-scroll-gesture {
  position: fixed;
  display: inline-block;
  right: 3vw;
  bottom: calc(40px + 6vw + var(--safe-area-bottom-custom, 0px));
  width: 26vw;
  height: 26vw;
  pointer-events: none;
  z-index: 2;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  animation: IndicatorFadeOut 4.1s linear infinite;
}

.fyp-scroll-arrow-bg {
  height: 30vw;
  width: 41vw;
  position: absolute;
  top: -75%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent);
}
.fyp-scroll-arrow-container {
  transform: rotate(270deg);
  display: flex;
  position: relative;
  align-self: flex-end;
}

.fyp-scroll-arrow-one, .fyp-scroll-arrow-two {
  padding: 8vw;
  box-shadow: 5px -5px white inset;
  transform: rotate(225deg);
  opacity: 0;
  position: absolute;
}

.fyp-scroll-arrow-one {
  animation: arrowMovement 2s ease-in-out infinite;
}

.fyp-scroll-arrow-two {
  animation: arrowMovement 2s 1s ease-in-out infinite;
}

@keyframes arrowMovement {
  0% {
    left: 0;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    left: 40px;
    opacity: 0;
  }
}
@keyframes IndicatorFadeOut {
  0%,
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ---- ARROW SCROLL INDICATOR CSS END ---- */
/* ---------------------------------------- */


/* ---------------------------- */
/* -- SHOWCASE TOGGLE HEADER -- */
/* ---------------------------- */

.showcase-header-item {
  display: flex;
  align-items: center;
  font-size: 4.5vw;
  font-weight: bold;
}
.showcase-filter-header {
  position: absolute;
  top: 60vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  padding: 0 5vw;
}

.showcase-header-button-container {
  display: flex;
}
.showcase-header-button {
  display: flex;
  align-items: center;
}
.showcase-header-toggle-switch {
  position: relative;
  display: inline-block;
  width: 8vw;
  height: 1.5vw;
  margin: 0 2vw;
}
.showcase-header-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.showcase-header-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary);
  -webkit-transition: .4s;
  transition: .4s;
}
.showcase-header-toggle-slider:before {
  position: absolute;
  content: "";
  height: 3.5vw;
  width: 3.5vw;
  left: -1vw;
  bottom: -1vw;
  background-color: #FFF;
  -webkit-transition: .4s;
  transition: .4s;
}

.showcase-toggle-button.checked + .showcase-header-toggle-slider {
  background-color: rgba(255,255,255,0.5);
}
.showcase-header-button.checked > .showcase-header-toggle-switch > .showcase-header-toggle-slider {
  background-color: rgba(255,255,255,0.5);
}
.showcase-header-toggle-slider.showcase-header-toggle-round {
  border-radius: 34px;
  pointer-events: none;
}
.showcase-header-toggle-slider.showcase-header-toggle-round:before {
  border-radius: 50%;
}


/* ----------------------------- */
/* -- SHOWCASE FLIP ANIMATION -- */
/* ----------------------------- */

.filtercard-flip-container {
	perspective: 1000px;
}
.filtercard-flip-container, .filtercard-front, .filtercard-back {
	width: 100%;
	height: 100%;
}
.filtercard-flipper {
	position: relative;
  height: 100%;
  width: 100%;
	transition: 0.6s;
	transform-style: preserve-3d;
}

.filtercard-front, .filtercard-back {
	position: absolute;
	top: 0;
	left: 0;
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.filtercard-front {
  z-index: 1002;
}
.filtercard-back {
  z-index: 1002;
  transform: rotateY(180deg);
}
.filtercard-flip-container.flip .filtercard-flipper {
	transform: rotateY(180deg);
}

.filtercard-front-background,
.filtercard-back-background {
  width: 65vw;
  height: 65vw;
  background: #000;
  border: 4px solid var(--color-primary);
  transform: rotate(-45deg);
}
.filtercard-front-content-container,
.filtercard-back-content-container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 33%;
}
.filtercard-front-content,
.filtercard-back-content {
  position: absolute;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 20%;
}
.filtercard-front-content > img,
.filtercard-back-content > img {
  width: 20vw;
  height: 20vw;
}
.filtercard-front-content > div,
.filtercard-back-content > div {
  font-size: 8.0vw;
}
.blur-overlay {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 1;
}

.fadeInFlip {
  animation-name: fadeInFlip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  visibility: visible !important;
}
@keyframes fadeInFlip {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeOutFlip {
  animation-name: fadeOutFlip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  visibility: visible !important;
}
@keyframes fadeOutFlip {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* ------------------------------- */
/* -- SHOWCASE TOGGLE ANIMATION -- */
/* ------------------------------- */

@keyframes toggleRight {
  0% {
    left: -1vw;
  }
  100% {
    left: 6vw
  }
}
@keyframes toggleLeft {
  0% {
    left: 6vw;
  }
  100% {
    left: -1vw
  }
}

.showcase-header-toggle-slider.showcase-header-toggle-round.toggleRight::before {
  animation-name: toggleRight;
  animation-duration: 0.4s;
  left: 6vw;
}
.showcase-header-toggle-slider.showcase-header-toggle-round.toggleLeft::before {
  animation-name: toggleLeft;
  animation-duration: 0.4s;
  left: -1vw;
}

.showcase-story-prompt-label {
  display: flex;
  position: absolute;
  top: 17vw;
  background-color: rgba(0, 0, 0, 0.7);
  height: 9vw;
  font-size: 3.5vw;
  font-weight: 700;
  color: #fff;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* ------------------------------- */
/* --------- PROMPT TAGS  -------- */
/* ------------------------------- */
.showcase-story-prompt-bar {
  --prompt-tag-icon-width: 12vw;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 9vw;
  padding: 3vw;
  background-color: var(--color-background-card);
  color: #FFF;
  display: flex;
  gap: 3vw;
  box-sizing: border-box;
}
.showcase-story-prompt-tag {
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid #FFF;
  border-radius: 250px;
  height: 2vw;
  min-width: 12vw;
  font-size: 3.45vw;
  font-weight: 600;
  padding: 0 1.5vw;
  height: 8.75vw;
}
.showcase-story-prompt-tag-with-icon {
  position: relative;
}

.showcase-story-prompt-tag-icon-box {
  height: 100%;
  width: 12vw;
  min-width: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  position: absolute;
  top: 0;
  left: 0;
}
.showcase-story-prompt-tag-title {
  padding-left: calc(12vw + 1vw);
}
.showcase-story-prompt-tag-icon-img {
  width: 3.0vw;
  height: 3.0vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showcase-story-prompt-tag-icon {
  width: 100%;
  padding: 0;
  margin: 0;
  object-fit: contain;
}
.showcase-story-prompt-tag-icon-subtitle {
  font-size: 3vw;
  line-height: 0.95em;
  height: 3.5vw;
  width: 100%;
}

.showcase-story-prompt-tag-info {
  background-color: #F8A498;
  border-color: #F8A498;
}
.showcase-story-prompt-tag-royalty .showcase-story-prompt-tag {
  background: linear-gradient(98.35deg, #ACEDCD -64.36%, #AFAEF6 44.49%);
}
.showcase-story-prompt-tag-premium .showcase-story-prompt-tag {
  background: linear-gradient(99.57deg, #F6CFE1 7.44%, #FF6CA3 55.76%);
}
.showcase-story-prompt-tag-premium .showcase-story-prompt-tag-icon-box {
  background: linear-gradient(0deg, #F6CFE1, #F6CFE1);
  color: #F56969;
}
.showcase-story-prompt-tag-premium .showcase-story-prompt-tag-icon-subtitle {
  font-weight: 900;
  font-size: 3.7vw;
}

/* ------------------------------- */
/* ----- PROMPT TAGS POPUPS  ----- */
/* ------------------------------- */
.story-cover-prompt-info-modal {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}
.story-cover-prompt-info-modal-box {
  position: relative;
  background-color: #1D1C1C;
  border-radius: 20px;
  width: 90vw;
  max-width: 400px;
  padding: 6vw;
  text-align: center;
  color: #FFF;
}
.story-cover-prompt-info-modal-inside {
  padding: 6vw 4vw;
}
.story-cover-prompt-info-modal-button {
  width: 100%;/* 45vw; */
  padding: 3vw 0;
  border-radius: 200px;
  position: relative;

  background: var(--color-primary);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.story-cover-prompt-info-modal-box h1,
.story-cover-prompt-info-modal-box h2,
.story-cover-prompt-info-modal-box p {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 6.2vw;
  margin: 10px 0;
}
.story-cover-prompt-info-modal-box h2 {
  font-weight: 400;
  font-size: 4.65vw;
  color: #FFF;
}
.story-cover-prompt-info-modal-box p {
  font-weight: 400;
  color: #FFF;
}
.story-cover-prompt-info-modal-box p.small-text {
  font-size: 4.65vw;
}
.story-cover-prompt-info-modal-box img {
  width: 40%;
}
.story-cover-prompt-info-modal-close {
  position: absolute;
  right: 5vw;
  top: 5vw;
}
.story-cover-prompt-info-modal-close img {
  width: 7.5vw;
}


/* -------------------------------- */
/* -- SHOWCASE STORY ITEM COVER -- */
/* -------------------------------- */

.showcase-story-item-cover {
  --item-separator-width: 2vw;
  width: 100%;
}

.showcase-story-item-cover .showcase-story {
  height: calc(100dvh - var(--app-footer-height, 0px) - var(--safe-area-bottom-custom, 0px));
}

.showcase-story-item-cover.storycover-screen .showcase-story {
  height: calc(100dvh);
}
.showcase-story-item-cover .showcase-story-header {
  --header-padding: 3vw;
  --header-padding-top: 3vw;
  position: absolute;
  top: 0;
  left: 0;
  padding: calc(var(--safe-area-top-custom, 0px) + var(--header-padding-top)) var(--header-padding) 0 var(--header-padding);
  width: 100%;
  height: 12vh;
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.55) 65%, rgba(42, 40, 65, 0) 100%);
}
.pwa .showcase-story-item-cover .showcase-story-header {
  --header-padding-top: 6vw;
}
body.ios .showcase-story-item-cover .showcase-story-header {
  padding: calc(var(--safe-area-top-custom, 0px) + var(--header-padding-top)) var(--header-padding) 0 var(--header-padding);
}
.showcase-story-item-cover.storycover-screen .showcase-story-header {
  width: calc(100% - 2 * var(--header-padding));
}

.showcase-story-item-cover .showcase-story-header-back {
  width: 8vw;
  height: 8vw;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-story-item-cover .showcase-story-header-back.hidden {
  visibility: hidden;
  pointer-events: none;
}

.showcase-story-item-cover .showcase-story-header-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.showcase-story-item-cover .showcase-story-header-right {
  display: flex;
  align-items: center;
  gap: 3vw;
}
.showcase-story-item-cover .story-cover-footer {
  display: none;
}

.showcase-story-item-cover .showcase-story-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-story-item-cover .showcase-story-header-right > div {
  margin: unset;
  padding: unset;
  min-width: 7vw;
  height: 7vw;
  pointer-events: all;
}

.showcase-story-header-button-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  font-weight: 500;
  font-size: var(--font-size-15-px);
  width: unset;
  min-width: 7vw;
}
.showcase-story-item-cover .showcase-story-tag-container {
  display: flex;
  align-items: center;
  color: var(--color-desat-light);
  gap: var(--item-separator-width);
  font-size: var(--font-size-13-px);
}
.showcase-story-item-cover .showcase-story-tag {
  margin: 0;
}

.showcase-story-item-cover .showcase-story-footer-buttons-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin: 2vh 0;
}
.showcase-story-item-cover .showcase-story-footer-buttons-container > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.showcase-story-item-cover .showcase-story-footer-buttons-container span {
  font-size: var(--font-size-11-px);
  font-weight: 600;
}
.showcase-story-item-cover .showcase-story-footer-buttons-container img.showcase-icon {
  width: 6vw;
}

.showcase-story-item-cover .showcase-story-socials-indicator {
  position: absolute;
  top: -7px;
  right: -1px;
  width: 2.2vw;
  height: 2.2vw;
  background-color: var(--color-red);
  border-radius: 20px;
}

.showcase-story-item-cover .showcase-story-description {
  display: flex;
  flex-direction: column;
  gap: 2vw;
  /* padding-bottom: 4vh; */
  /* background: linear-gradient(180deg, rgba(15, 17, 28, 0) 0%, rgba(15, 17, 28, 0.60) 25%, rgba(15, 17, 28, 0.90) 90%) */
}
.showcase-story-item-cover .showcase-story-info-description {
  margin-top: 0;
  font-size: var(--font-size-13-px);
}
.showcase-story-item-cover .showcase-story-episode {
  display: flex;
  align-items: center;
  gap: var(--item-separator-width);
  font-size: var(--font-size-13-px);
}

.showcase-story-item-cover .showcase-story-label,
.showcase-story-item-cover .showcase-story-release,
.showcase-story-item-cover .showcase-story-time-label {
  min-width: unset;
  margin-right: 0;
  padding: 0;
  padding-right: var(--item-separator-width);
  color: #FFF;
  font-size: 3.5vw;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: unset;
  text-overflow: unset;
  overflow: visible;
  white-space: nowrap;
}
.showcase-story-item-cover .showcase-story-time-label {
  color: var(--color-feature);
}
.showcase-story-item-cover .showcase-story-author-list {
  --author-list-height: 7.5vw;
  --author-list-gap: 2vw;
  --author-border: 1.5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--author-list-gap);
  max-height: calc(2 * var(--author-list-height) + var(--author-list-gap) + var(--author-border));
  overflow: hidden;
  width: 100%;
}
.showcase-story-item-cover .showcase-story-author-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 200px;
  border: var(--author-border) solid #FFFFFF80;
  background: #00000033;
  padding: 0.5vw 3vw;
  margin: 0;
  height: var(--author-list-height);
  width: fit-content;
  flex-shrink: 0;
}
.showcase-story-item-cover .showcase-story-author-plus {
  width: 5vw;
  margin-left: -2vw;
  margin-right: 1vw;
  padding: 0.5vw;
  box-sizing: border-box;
  pointer-events: all;
  background: #FC536F;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-story-item-cover .showcase-story-author-plus img {
  width: 100%;
  height: 100%;
}
.showcase-story-item-cover .showcase-story-comments-count {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0.5vw 1.5vw;
  background-color: var(--color-black);
  border-radius: 100px;
  transform: translateY(-65%);
}

.showcase-story-item-cover .showcase-story-button-container {
  margin-top: 1vh;
  flex-direction: column;
}
.showcase-story-item-cover .showcase-story-play-button-container {
  width: 100%;
  padding: 0 3vw;
  box-sizing: border-box;
}
.showcase-story-item-cover .showcase-story-play-button {
  width: 100%;
  border-radius: 2vw;
  padding: 3vw 0;
  font-size: var(--font-size-17-px);
}
.showcase-story-item-cover .showcase-story-timer {
  width: calc(100% - 6vw);
}

.showcase-story-item-cover .showcase-story-header-right div.showcase-story-favorites
{
  background: unset;
  width: unset;
  height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  font-weight: 500;
  font-size: var(--font-size-15-px);
  padding-right: 1vw;
}
.showcase-story-item-cover .showcase-story-header-right div.showcase-story-favorites-icon,
.showcase-story-item-cover .showcase-story-header-right div.showcase-story-shares {
  width: 6vw;
  height: 6vw;
}
.showcase-story-item-cover .showcase-story-header-right div.showcase-story-favorites-icon {
  padding: 0;
  margin: 0;
}
.showcase-story-item-cover .showcase-story-title {
  font-size: var(--font-size-18-px);
  font-weight: 800;
}

.showcase-story-item-cover .showcase-story-competitive-mode-info {
  background: #2D3153B2;
  width: 100%;
  padding: 4vw;
  border-radius: 2vw;
  margin: 0 3vw;
  width: calc(100% - 6vw);
  box-sizing: border-box;
  font-size: var(--font-size-13-px);
  text-align: center;
}
.showcase-story-item-cover .showcase-story-item-separator,
.showcase-story-item-cover .showcase-story-tag-separator {
  padding-right: var(--item-separator-width);
  border-right: 1px solid var(--color-white);
}
.showcase-story-item-cover .showcase-story-tag-separator {
  border-right-color: var(--color-highlight-muted);
}

.discovery-screen,
.prompt-search-screen {
  font: var(--font-body);
  color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#search-cancel-button,
#search-confirm-button {
  color: var(--color-desat-light);
  margin-left: 10px;
  font-size: 3.8vw;
}

#search-cancel-button.start,
#search-confirm-button.start {
  display: none;
}
#search-cancel-button.hide,
#search-confirm-button.hide {
  color: transparent;
  animation: no-button 0.15s linear forwards;
}
#search-cancel-button.show,
#search-confirm-button.show {
  display: block;
  animation: big-button 0.15s linear forwards;
}

/* Discovery Showcase Merge */
.discovery-showcase-container {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
.discovery-showcase-story-list {
  height: calc(100% - 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px 3vw;
  padding: 26px 5vw 3rem 5vw;
  align-content: start;
}


.discovery-showcase-story {
  position: relative;
  display: flex;
  flex-flow: column;
  text-align: left;
  width: 28vw;
}

.discovery-showcase-story-image-container {
  position: relative;
}

.discovery-showcase-story-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100%;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  margin-bottom: 8px;
}

.discovery-showcase-story-resume-label {
  font-size: 3.3vw;
  color: #000;
  width: 100%;
  height: 6vw;
  position:absolute;
  bottom: 0;
  left:0;
  background:linear-gradient(180deg, #F7A397, #FFD7AA);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 8px;
}

.discovery-showcase-story-title {
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 2px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 1 0 auto;
}
.discovery-showcase-story-author-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.discovery-showcase-story-author {
  font-size: 0.7rem;
  font-weight: 400;
  margin-bottom: 8px;
  margin-top: 6px;
  color: var(--color-white-soft);
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.discovery-showcase-story-author-verification {
  height: 0.9rem;
  width: 0.9rem;
  margin-bottom: 2px;
  margin-left: 1vw;
}

.discovery-showcase-story-stats {
  display: flex;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
}

.discovery-showcase-story-comments,
.discovery-showcase-story-likes {
  line-height: 1.5;
  padding-left: 1.75em;
  padding-right: 0.25em;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}

.discovery-showcase-story-label-container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 0;
  left: 0;
}

.discovery-showcase-story-label {
  border-radius: 8px;
  background-color: var(--color-primary);
  color: black;
  text-align: center;
  position: absolute;
  font-size: 3.5vw;
  font-weight: 700;
  top: -2vw;
  padding: 0px 8px 0px 8px;
}

.discovery-showcase-story-comments {
  background-image: url('assets/img/ui/icon-comment-24px.svg');
  margin-right: 2.5vw;
}

.discovery-showcase-story-likes {
  background-image: url('assets/img/ui/icon-favorite_border-24px.svg');
}
.discovery-showcase-story-likes.hide {
  display: none;
}
@keyframes big-button {
  0% {
    width: 0vw;
  }
  100% {
    width: 23vw;
  }
}

@keyframes no-button {
  0% {
    width: 23vw;
    display: block;
  }
  100% {
    width: 0vw;
    display: none;
  }
}

.discovery-screen-content {
  height: calc(100dvh - 6rem - 2em - 6vw - var(--safe-area-top-bottom-custom, 0px));
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* Discovery view category shelves styles */
.discovery-shelves{
  display: flex;
  flex-direction: column;
}
.discovery-shelf-top{
  display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    margin-bottom: 10px;
}
.discovery-shelf-item{
  position: relative;
  padding: 4vw;
}
.discovery-shelf-title{
  margin-bottom: 5px;
}
.discovery-shelf-count{
  margin-left: auto;
}
.discovery-shelf-count-text {
  width: fit-content;
  text-align: right;
  background-color: rgb(44, 44, 44);
  font-weight: bold;
  font-size: 5vw;
  border-radius: 1px;
  border: solid 1px rgb(28, 28, 28);
  padding: 2px 8px;
  border-radius: 16px;
}
.discovery-shelf-icon {
  width: 8vw;
  height: 8vw;
  font-size: 1.4rem;
  border-radius: 50%;
  background: rgb(28, 28, 28);
  color: #fff;
  position: relative;
  line-height: 0;
  margin-right: 2vw;
  border: solid 1px white;
  margin-left: 1vw;
}

.discovery-shelf-icon::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.discovery-shelf-icon-text {
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;

}

.shelves-scroll-list {
  display: flex;
  padding-left: 1vw;
  padding-bottom: 3vw;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.results-back-button {
  position: absolute;
  left: 3vw;
  height: 5vw;
  width: 5vw;
  margin-top: 2vw;
  background-image: url('assets/img/ui/icon-arrow-back.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.border-bottom {
  position: absolute;
  bottom: 0;
  left: 5vw;
  width: calc(100vw - 10vw);
  border-bottom: 1px solid #505050;
}
.discover-search-tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 2rem;
  font-size: 4.5vw;
  color: #fff;
}
.discover-search-tab.active {
  color: #f7a397;
  font-weight: bold;
}

.discovery-results-container {
  position: relative;
}

/** Relationships */
.relationships-view {
  border-top: 1px solid var(--color-background-card);
}
.creation-tools-screen,
.creation-tools-screen-react-client {
  position: relative;
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
  color: #fff;
  background: var(--background-color);
}
.creation-tools-screen.fullscreen {
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
  padding-bottom: var(--safe-area-bottom-custom, 0px);
}
.creation-tools-screen-react-client {
  height: calc(100dvh - 6rem - var(--safe-area-top-bottom-custom, 0px));
}

.live-streams-wrapper {
  width: 100%;
  height: calc(100dvh - var(--app-footer-height) - var(--safe-area-top-bottom-custom, 0px));
  position: absolute;
  top: 0;
  /* overflow: hidden; */
  box-sizing: border-box;
  color: white;
}
.live-streams-preview-wrapper {
  color: white;
  box-sizing: border-box;
}
.stream-preview-item {
  cursor: pointer;
  width: 100%;
  height: calc(100dvh - var(--app-footer-height) - var(--safe-area-top-bottom-custom, 0px));
}
.streams-previews-stories-container {
  position: relative;
  height: calc(100dvh - var(--app-footer-height) - var(--safe-area-top-bottom-custom, 0px));
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  align-content: start;
  background-color: var(--color-interim-dark);
}

.streams-preview-story-container {
  width: 100%;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  position: absolute;
  top: -3rem;
  left: 0;
  /* overflow: hidden; */
}
.streams-preview-story-container > canvas {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.live-streams-preview-video-container {
  position: absolute;
  top: 30vw;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  pointer-events: none;
}

.streams-preview-story-extra-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: white;
}

.streams-preview-missing-items-container {
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
}
.streams-preview-missing-streams-wrapper {
  --top-header-size: 20vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5vw;
  justify-content: flex-start;
  height: calc(100% - var(--top-header-size));
  top: var(--top-header-size);
  position: relative;
  padding: 0 5vw;
}
.stream-preview-item-wrapper {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--app-footer-height) - var(--safe-area-top-bottom-custom, 0px));
  background: #0F111C;
}
.stream-preview-item-inner-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(39, 36, 65, 0.7);
}
.stream-preview-item-inner-wrapper-no-bg {
  background: none;
}

.streams-preview-story-background-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.streams-preview-story-background-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stream-preview-cover-image {
  width: 100vw;
  height: 100%;
  position: relative;
}
.stream-preview-cover-image img {
  position: absolute;
  height: 100%;
  object-fit: cover;
  left: 50%;
  transform: translateX(-50%);
}
.stream-preview-header,
.stream-preview-footer {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  width: 100%;
  padding: 2vw 5vw;
  box-sizing: border-box;
}
.stream-preview-header {
  height: 45vw;
  background: linear-gradient(0deg, rgba(15, 17, 28, 0.00) 0%, rgba(15, 17, 28, 0.44) 26.56%, #0F111C 100%);
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 1.867vw;
}
.stream-preview-footer {
  display: flex;

  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 45vw;
  background: linear-gradient(180deg, rgba(15, 17, 28, 0.00) 0%, rgba(15, 17, 28, 0.50) 52.08%, #0F111C 100%);
  color: var(--color-white-dimmed);

  font-family: Lato;
  font-size: var(--font-size-13-px);
  font-weight: 600;
}

.stream-preview-join-btn,
.stream-preview-loader {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.stream-preview-loader {
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.stream-preview-join-btn,
.streams-preview-missing-create-stream-btn,
.streams-preview-missing-story-stream-btn {
  filter: drop-shadow(0px 0px 10.39534854888916px rgba(30, 28, 44, 0.70));
  background: var(--color-white);
  width: 35vw;
  height: 10vw;
  font-size: var(--font-size-17-px);
  font-weight: 600;
  color: var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50vw;
}
.stream-preview-join-btn {
  bottom: 25vw;
  width: 42vw;
  animation-name: joinToStreamAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes joinToStreamAnimation {
  0% {
    transform: translateX(-50%) scale(1) ;
  }
  50% {
    transform: translateX(-50%) scale(1.1, 1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
.streams-preview-missing-create-stream-btn {
  width: 65vw;
  height: 14.4vw;
  font-size: var(--font-size-20-px);
  flex-shrink: 0;
}
.stream-preview-header-streamer-name {
  flex-grow: 1;
}

.stream-preview-header .stream-preview-header-streamer-avatar {
  margin-left: 0;
}

/* .stream-preview-header-title {
  font-size: var(--font-size-13-px);
  font-weight: 600;
  position: absolute;
  top: 30vw;
  left: 5vw;
  right: 5vw;
} */
.stream-preview-footer-event-title {
  font-weight: 600;
  font-size: var(--font-size-13-px);
  color: white;
}
.stream-preview-live-tag {
  color: var(--color-white);
  background-color: var(--color-pop);
  width: 12vw;
  height: 5.3vw;
  text-transform: uppercase;
  font-family: Lato;
  font-size: var(--font-size-13-px);
  font-weight: 600;
  text-align: center;
  opacity: 0.9;
  border-radius: 0.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.streams-preview-missing-or {
  display: flex;
  align-items: center;
  gap: 4vw;
  font-size: var(--font-size-16-px);
  font-weight: 500;
  font-family: Lato;
  text-transform: uppercase;
  width: 100%;
}
.streams-preview-missing-line {
  width: 100%;
  height: 1px;
  background: var(--color-background-light-v2);
}
.streams-preview-missing-title {
  font-size: var(--font-size-16-px);
  font-weight: 500;
}
.streams-preview-missing-subtitle {
  font-size: var(--font-size-13-px);
  font-weight: 600;
  color: var(--color-desat-light);
}
/****/
.streams-preview-missing-games ::-webkit-scrollbar {
  display: none;
}
.streams-preview-missing-games {
--game-image-height: 56vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  /* width: 100%; */
  height: 120vw;
  overflow-y:scroll;
  overflow-x: hidden;
  width: 110%;
  padding: 0 5%;
}
.streams-preview-missing-story-item {
  position: relative;
  height: 80vw;
}
.streams-preview-missing-story-cover {
  width: 42vw;
  height: var(--game-image-height);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 5.33vw;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.50);
  width: 100%;
}
.streams-preview-missing-story-cover img {
  width: 100%;
  object-fit: cover;
}
.streams-preview-missing-story-bottom {
  position: relative;
  top: calc(2vw + var(--game-image-height));
  text-align: left;
}
.streams-preview-missing-story-title {
  color: var(--color-white);
  font-size: var(--font-size-13-px);
  line-height: var(--font-size-17-px);
  font-weight: 600;
}
.streams-preview-missing-story-author {
  color: var(--color-white-dimmed);
  font-size: var(--font-size-11-px);
  line-height: var(--font-size-15-px);
  font-weight: 500;
}
.streams-preview-missing-story-stream-btn {
  position: absolute;
  top: calc(var(--game-image-height) - 11.5vw);
  left: 50%;
  transform: translateX(-50%);
}

.schedule-screen.item-no-background,
.item-no-background {
  background: transparent;
}

.live-streams-scroll-indicator {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* -------------- */
/* ---- TABS ---- */
/* -------------- */
.message-center-top-button-container {
    --height: 7.5vh;
    --shadow-offset-y: -3px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 12px 2vw 0 2vw;
    height: var(--height);
}
.message-center-top-button-container > button {
  color: var(--color-white);
  font-size: 4.267vw;
  line-height: 5.12vw;
  font-weight: 700;
}
.message-center-top-button-container > button > div {
  position: relative;
  margin: auto 0;
  padding-left: 7vw;
  padding-bottom: 2.5vw;
}
.message-center-top-button-container .active-feed > div {
  padding-bottom: calc(2.5vw - 2px);
  border-bottom: 2px solid var(--color-pop);
}

/* ---- ACTIVITY TAB ---- */
.message-center-left-button > div {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/bell-outline_white.svg') top left/25% no-repeat;
}
.message-center-left-button.active-feed > div {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/bell-outline_pop.svg') top left/25% no-repeat;
}
/* ---- INBOX TAB ---- */
.message-center-right-button > div {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/mail-outline_white.svg') top left/30% no-repeat
}
.message-center-right-button.active-feed > div {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/mail-outline_pop.svg') top left/30% no-repeat
}
/* ---- GAME COMMENTS TAB ---- */
.message-center-writers-button > div {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/comment-outline_white.svg') top left/13% no-repeat;
}
.message-center-writers-button.active-feed > div {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/comment-outline_pop.svg') top left/13% no-repeat;
}
.activity-tab-badge,
.inbox-mail-badge,
.writers-tab-badge {
  position: absolute;
  top: -3vw;
  right: -4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5.5vw;
  width: 5.5vw;
  color: var(--color-white);
  font-size: 3.5vw;
  background: var(--color-highlight);
  border-radius: 50%;
  pointer-events: none;
}


/* ---------------------------- */
/* ---- ACTIVITY FEED ITEM ---- */
/* ---------------------------- */
.comment-container.tombstone {
  min-height: 44vw;
}
.activity-feed-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  padding: 2vw 5vw;
  min-height: 35vw;
}
.activity-feed-container::after {
  content: "";
  position: absolute;
  height: 1px;
  top: 96%;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
}

.activity-feed-container .title-container,
.activity-feed-container .description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.activity-feed-container .afc-comments .title-container {
  -webkit-line-clamp: 3;
}

.activity-feed-container .title-name,
.activity-feed-container .description,
.activity-feed-container .title-story-info {
  font: var(--font-title);
}

.activity-feed-container .date {
  margin: 0.5vw 0;
  color: var(--color-white-dimmed);
}

.afc-stories,
.afc-comments {
  --font-title: 700 4vw/5vw "Lato"; /* 15px/18.75px */
  --font-text: 400 4vw/5vw "Lato";  /* 15px/18.75px */
  display: grid;
  grid-gap: 2vw;
  font: var(--font-text);
}

/* ---- STORY ITEM ---- */
.afc-stories {
  grid-template-columns: 18.667vw 1fr 23.733vw;
}

.afc-stories .image {
  height: 25.067vw;
  border-radius: 8px;
}

.image-label {
  font: var(--font-body4);
  background: var(--color-pop);
  width: fit-content;
  padding: 0.5vw 2vw;
  border-radius: 8px 0;
}

.afc-stories .highlight-label {
  margin: 0.5vw 0;
  color: var(--color-highlight-light);
}

.afc-stories .button,
.afc-comments .button {
  width: 100%;
  margin-top: 5vw;
  padding: 1vw;
  font: var(--font-body3);
  text-align: center;
  background: var(--color-highlight);
  border-radius: 4px;
}
.afc-comments .button.disabled {
  border: 2px solid var(--color-highlight-muted);
  color: var(--color-desat-light);
  background: transparent;
}

/* ---- COMMENTS ITEM ---- */
.afc-comments {
  grid-template-columns: 17vw 1fr 13.333vw;
}
.afc-comments.two-columns {
  grid-template-columns: 17vw 1fr;
}
.afc-comments.follow-type {
  grid-template-columns: 18.667vw 1fr 23.733vw;
}

.afc-comments .user-image,
.afc-comments .user-image-multi {
  position: relative;
}
.afc-comments .user-image-single {
  height: 16vw;
  width: 16vw;
  margin: auto;
  border-radius: 50%;
}
.afc-comments .user-image-multi > div {
  position: absolute;
  height: 12vw;
  width: 12vw;
  margin: auto;
  border-radius: 50%;
}
.afc-comments .user-image-multi-back {
  top: 0;
  left: 0;
}
.afc-comments .user-image-multi-front {
  top: 7vw;
  right: 0vw;
}
.afc-comments .like-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 4.267vw;
  width: 4.267vw;
  background: url('assets/design-library/icons/ui/ic-upvote-filled-white.svg') center/contain no-repeat;
}

.afc-comments .comment {
  --user-image-space: 17vw;
  --story-image-space: 13.333vw;
  --gap: 4vw;  /* 2 x 2vw */
  --item-padding: 10vw;  /* 2 x 5vw */
  width: calc(100vw - var(--user-image-space) - var(--story-image-space) - var(--gap) - var(--item-padding));
  margin: 2vw 0;
  font-style: italic;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afc-comments.follow-type .comment {
  --ft-user-image-space: 18.667vw;
  --ft-story-image-space: 23.733vw;
  width: calc(100vw - var(--ft-user-image-space) - var(--ft-story-image-space) - var(--gap) - var(--item-padding));
}
.afc-comments .comment.chat-message {
  -webkit-line-clamp: 3;
}
.afc-comments .mentioned-name {
  color: var(--color-highlight-light);
}

.afc-comments .stats-container {
  display: flex;
  gap: 2vw;
}
.afc-comments .comment-button,
.afc-comments .three-dots-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.267vw;
  min-width: 8vw;
  width: auto;
  padding-left: 5.267vw;
  margin-right: 3vw;
}
.afc-comments .comment-button {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/comment-outline_white.svg') left/contain no-repeat;
}
.afc-comments .three-dots-button {
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/ui/three-dots_white.svg') left/contain no-repeat;
}
.afc-comments .favorite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3vw;
}
.afc-comments .favorite-icon {
  height: 4.267vw;
  min-width: 4.267vw;
  margin-right: 1vw;
}
.afc-comments .comment_score {
  width: 2vw;
}

.afc-comments .story-image {
  width: 100%;
  border-radius: 6px;
}






.message-center-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.message-center-context-title {
    color: #F7A397;
    font-size: 20px;
    width: 100vw;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    letter-spacing: .25pt;
    margin-bottom: 16px;
}

.message-center-panel-messages {
    overflow-y: scroll;
    overflow-x: hidden;
    flex-grow: 1;
    font-weight: normal;
    position: relative;
}

.message-center-panel-messages.input-visible {
    margin-bottom: 12vw;
}

.messages-and-input-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.reply-chain-header-back-image, .liked-by-header-back-image {
    height: 24px;
    width: 24px;
}

.reply-chain-header-back-button, .liked-by-header-back-button {
    margin-left: 24px;
    margin-right: 24px;
}

.message-center-comment-link, .liked-by-comment-link {
    font-size: 16px;
    color: var(--color-primary);
    border-bottom: 1px solid #F7A397;
    padding-bottom: 2px;
    margin-right: 16px;
}

.reply-chain-header, .liked-by-header {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.reply-header-right-container, .liked-by-header-right-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: baseline;
    justify-content: space-between;
}

.reply-chain-context-title, .liked-by-header-context-title {
    color: #F7A397;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    letter-spacing: .25pt;
    margin-bottom: 16px;
    margin-top: 16px;
    word-break: break-word;
}

.first-message-stripe {
    width: 4px;
    border-radius: 8px;
    flex-grow: 1;
    background: #676767;
    margin-top: 8px;
}

.activity-feed-notification {
    width: 100vw;
    display: flex;
}

.reply-chain .user-replied-text-row {
    margin-bottom: 16px;
}

.comment-text-row {
    margin-bottom: 16px;
}

.user-replied-container.reply-chain {
    flex-direction: column;
}

.reply-target {
    background-color: #2c2c2c;
}

.notification-container {
    font-weight: normal;
    padding: 16px;
    border-radius: 32px;
}

.notification-container .body {
    font-size: 16px;
    text-align: center;
}

.delete-button-container {
    background-color: #F56969;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50vw;
}

.delete-button-icon {
    height: 24px;
    widows: 24px;
    margin: 8px;
}

.delete-button-text {
    font-size: 14pt;
    line-height: 17pt;
}

.activity-feed-container.delete-button-revealed {
    margin-left: -50vw;
}

.message-center-no-messages,
.message-center-no-mail,
.message-center-no-unreads {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.no-messages-cta,
.empty-list-text {
    font-size: 4.5vw;
    line-height: 6vw;
    font-family: 'Lato';
    text-align: center;
    color: white;
    width: 70vw;
}

.no-messages-explanation,
.empty-list-heading {
    text-align: center;
    width: 70vw;
    font-size: 3.5vw;
    font-family: 'Lato';
    color: rgba(255, 255, 255, .8);
    margin: 2vh;
}

.claim-all-button {
    position: absolute;
    top: 90%;
    width: 40%;
    left: 30%;
    text-align: center;
    padding: 12px;
    font-size: 16pt;
    border-radius: 8px;
    font-weight: normal;
}

.claim-all-container, .discard-reply-container {
    display: flex;
    flex-direction: column;
    background-color: #373737;
}

.claim-all-container {
    height: 50dvh;
    border-top-right-radius: 8px;
    justify-content: space-between;
    border-top-left-radius: 8px;
}

.discard-reply-container {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.claim-all-top-section {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.claim-all-header, .discard-reply-header {
    color: #F7A397;
    font-size: 18pt;
    font-weight: normal;
}

.claim-all-item-list {
    overflow: scroll;
}

.claim-all-button-container, .discard-reply-button-container {
    display: flex;
    flex-direction: row;
    border: 1px solid #F7A397;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-weight: normal;
}

.claim-all-cancel-button, .discard-reply-cancel-button {
    flex-grow: 1;
    font-size: 16px;
    padding: 12px;
    border-bottom-left-radius: 8px;
    width: 50%;
}

.claim-all-confirm-button, .discard-reply-confirm-button {
    flex-grow: 1;
    font-size: 16px;
    padding: 12px;
    border-bottom-right-radius: 8px;
    width: 50%;
}

.claim-all-ok-button {
    flex-grow: 1;
    font-size: 16px;
    padding: 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.discard-reply-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 16px;
}

.discard-reply-container {
    min-height: 20vh;
}

.discard-reply-text {
    color: white;
    font-size: 16px;
    line-height: 20px;
    padding: 0px 16px 0px 16px;
    font-weight: normal;
}

.mail-reward-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.reward-amount {
    display: flex;
    flex-direction: row;
    margin: 8px;
    align-items: center;
    margin-left: 24px;
}

.reward-count {
    font-size: 16px;
    color: white;
    margin: 8px
}
.reward-icon {
  width: 6vw;
}
.reply-chain-header-top-row, .liked-by-header-top-row {
    display: flex;
    align-items: center;
}

.user-replied-context-row {
    display: flex;
    flex-direction: row;
    margin: 8vw 0 2vw 0;
    color: #DADADA;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    word-break: break-word;
}

.user-replied-context-row .story-title {
    font-weight: normal;
    line-height: 24px;
    word-break: break-word;
    max-width: 34vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user-replied-context-row .chapter-number {
    font-weight: normal;
    line-height: 24px;
    word-break: break-word;
    margin-left: 3vw;
}

/* .reply-chain-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1vh;
    height: 3vh;
    padding-left: 8vw;
    padding-right: 8vw;
} */

.reply-chain-story-title, .liked-by-story-title {
    font-weight: bold;
}

.reply-chain-info, .liked-by-info{
    height: 20vw;
    padding: 4vw;
}

.reply-chain-chapter, .liked-by-chapter{
    text-align: right;
}

.mail-content a {
    color: var(--color-highlight-light) !important;
    font-size: 1rem;
}

.portrait-row img {
    margin-right: 8px;
    height: 24px;
}
.user-portrait {
    border-radius: 50%;
    width: 24px;
    object-fit: cover;
}
.notification-radius-override {
    border-radius: 32px;
}

.portrait-and-body-container {
    display: flex;
    flex-direction: row;
    color: white;
}

.liked-by-container {
    margin-left: 16px;
    margin-top:16px;
    display: flex;
}

.liked-by-portrait {
    margin-right: 3vw;
    border-radius: 50%;
}

.liked-by-username {
    font-size: 18px;
    letter-spacing: .5px;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 28px;
    margin-right: 8px;
    font-weight: 700;
    color: white;
}
.reply-chain-link-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    padding: 2vw 5vw;
    background-color: #2c2c2c;
    border-radius:8px;
    color: rgba(255,255,255,.8);
    font-size: 4.5vw;
}
.reply-chain-link-icon{
    margin-right:8px;
}
.reply-chain-story-title, .liked-by-story-title{
    margin-left:8px;
    color:#F7A397;
    font-size:16px;
    border-bottom:1px solid #F7A397;
    padding-bottom: 1px;
    font-weight: normal;
}

.comment-reply-panel .reply-chain-story-title{
    color: inherit;
    border-bottom: none;
}
.liked-sub-header {
    color: #DADADA;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    margin: 16px;
}
.writers-comment-badge {
    position: absolute;
    left: -3.5vw;
    top: -2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5.5vw;
    width: 5.5vw;
    color: black;
    font-size: 3.5vw;
    background-color: #F7A397;
    border-radius: 50%;
    pointer-events: none;
}

.writers-tab-heading-content {
    background: #2C2C2C;
    margin: 3vw 5vw;
    height: 17vw;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 11vw 1fr;
}
.writers-tab-heading-image {
    width: 95%;
    height: 95%;
    text-align: center;
    margin: auto;
    padding-left: 3vw;
}
.writers-tab-heading-text {
    color: rgba(255,255,255,0.8);
    padding: 3vw;
    font-size: 3.7vw;
    font-weight: normal;
    line-height: 5vw;
}
.writersmc-branch-name {
    max-width: 21vw;
    font-weight: normal;
    line-height: 24px;
    margin-left: 3vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.writers-tab-heading-notification {
    display: flex;
    align-items: center;
    margin: 0 5vw;
    padding: 2vw 3vw;
    color: #FFF;
    font-size: 3.5vw;
    font-weight: normal;
    background: #2C2C2C;
    border-radius: 10px;
}
.writers-tab-heading-notification-mark-all {
    padding: 0 2vw;
}

.character-picker {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 88px;
  grid-gap: 8px;
  justify-content: start;
}

.character-picker-character {
  display: grid;
  grid-template-columns: 64px;
  grid-template-rows: 64px 16px;
  grid-gap: 8px;
  font: var(--font-caption);
  text-align: center;
}

.character-picker-character * {
  pointer-events: none;
}

.character-picker-pic {
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}
.character-picker-name {
  align-self: center;
}


.friends-activity-modal-container {
    background-color: #2C2C2C;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    max-height:calc(100dvh - 12rem - var(--safe-area-top-bottom-custom, 0px));
    padding-top:16px;
}

.activity-list {
    overflow:scroll;
    background: #1c1c1c;
    padding:16px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.friends-activity-heading {
    font-size: 5vw;
    font-weight: bold;
    color: #F7A397;
    margin:8px 0px;
    text-align: center;
}

.ppmodal {
  border-radius: inherit;
  overflow: hidden;
  height: calc(100dvh - var(--safe-area-bottom-custom, 0px));
  top: var(--safe-area-top-custom, 0px);
  background: var(--background-color);
  /* padding-top: var(--safe-area-top-custom, 0px); */
}
.ppmodal * {
  box-sizing: border-box;
}
.ppmodal.user-profile{
  height: calc(100% + 3rem);
}
.ppmodal-header {
  margin-top: var(--safe-area-top-custom, 0px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--color-desat-dark);
}
.ppmodal-header-name-friend {
  color: var(--color-highlight-light);
  font-size: 4vw;
}

.ppmodal-header.user-profile{
  margin-top:0
}
/* .user-profile .share-profile-button {
  position: fixed !important;
  right: 15vw !important;
} */
/* .user-profile .crstory,
.user-profile .favstory,
.user-profile .ppactivity,
.user-profile .ppstory {
  margin-bottom: 3rem;
} */
.ppmodal-header-level {
  /* margin-right: 8px; */
  /* align-self: center; */
  position: absolute;
  top: 3vh;
  left: 8vw;
}

.user-profile .ppmodal-header-friend-name{
  padding-right: 0;
}
.ppmodal-header-friend-name {
  /* align-self: center;
  text-align: center;
  margin-right: 2vw; */
  padding-right: 48px;
}

.ppmodal-header-info {
  width: calc(100vw - 80px - 11vh);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.ppmodal-header-name {
  font: 700 3.9vw 'Lato';
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

.ppmodal-header-back, .ppmodal-profile-screen-back {
  width: 48px;
  height: 48px;
  background: url('assets/img/ui/icon-arrow-back.svg') center/24px no-repeat;
}

.ppmodal-header-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-right: 3vw; */
}

.ppmodal-header-friend {
  /* display: none;
  align-items: center;
  width: fit-content;
  padding: 0px 6px;
  background: var(--gradient-multiplayer);
  border-radius: 10px;
  border: 1px solid #f7a397; */
}

.ppmodal-header-friend-icon {
  /* color: #fff;
  font-size: 6vw;
  text-shadow: 1px 1px #4a425a; */
}
.ppmodal-header-friend-text {
  /* color: #fff;
  margin-left: 2vw;
  text-shadow: 1px 1px #4a425a; */
}

.ppmodal-header-button {
  /* display: flex;
  align-self: stretch;
  align-items: flex-end;
  font: var(--font-caption);
  font-weight: 700;
  margin: 0 3vw;
  border-radius: 4px;
  height: 4vh; */
  position: fixed !important;
  right: 5.6vw !important;
  height: 3rem;
}
.ppmodal-header-button-icon {
  font-size: 20px;
  margin-right: 4px;
}

.ppinfo,
.ppactivity,
.crstory, .favstory {
  min-width: 0;
  min-height: 0;
}
.crstory-story-stats, .favstory-story-stats {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 4px;
  justify-content: space-between;
}
.crstory-story-comments, .favstory-story-comments {
  display: flex;
  align-items: center;
}
.crstory-story-comments-image, .favstory-story-comments-image {
  width: 24px;
  height: 24px;
  background-image: url('assets/img/ui/icon-comment-24px-1.svg');
  margin-right: 4px;
}
.crstory-story-likes, .favstory-story-likes {
  display: flex;
  align-items: center;
}
.crstory-story-likes-image, .favstory-story-likes-image {
  width: 24px;
  height: 24px;
  background-image: url('assets/img/ui/icon-favorite_border-24px-1.svg');
  margin-right: 4px;
}
.favstory-story-likes.hide,
.crstory-story-likes.hide {
  display: none;
}
.ppinfo {
  overflow-x: hidden;
  background-color: rgb(28, 28, 28);
  height: 50%;
  display: flex;
  position: relative;
}
.ppinfo-creator-image-container {
  height: 80%;
  width: 40%;
  margin: 0 3vw 0 auto;
  position: relative;
  top: 3vw;
}
.ppinfo-creator-image-container.no-client {
  height: 45%;
  margin: 0 auto;
}
.ppinfo-creator-image {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: solid 1px #f7a397;
  border-radius: 10px;
}

.ppinfo-avatar {
  position: absolute;
  height: 100%;
  left: 20vw !important;
  transform: rotateY(180deg);
}
.ppinfo-avatar .AvatarView {
}
.ppinfo-tabs {
  position: sticky;
  top: 0;
  height: 8vh;
}
.ppinfo-tab {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6vh;
}
.ppinfo-tab.active {
  border-bottom: solid white 2px;
}
.ppinfo-tab img {
  height: 24px;
  width: 24px;
}
.ppinfo-main {
  position: relative;
}

.ppinfo-tab-container {
  height: calc(100dvh - 48px - 29vw - 13vw - 8vh - var(--safe-area-top-bottom-custom, 0px)); /*(100vh - header - profile_info - buttons - tabs)*/
  overflow: scroll;
}
.user-profile .ppinfo-tab-container {
  height: calc(100dvh - 48px - 29vw - 8vh - var(--safe-area-top-bottom-custom, 0px)); /*(100vh - header - profile_info - tabs)*/
}

.ppinfo-episodes,
.ppinfo-decisions,
.ppinfo-subscriptions,
.ppinfo-patrons {
  display: flex;
  flex-direction: column;
}

.ppinfo-text {
  margin-left: 1vw;
  min-width: 5vw;
}
.add-friend {
  background-image: url('assets/img/ui/person_add-24px-white.svg');
  width: 24px;
  height: 24px;
}
.bell-filled {
  background-image: url('assets/img/ui/bell_filled.svg');
  width: 24px;
  height: 24px;
}
.decisions {
  background-image: url('assets/img/ui/icon-profile-decisions.svg');
  width: 24px;
  height: 24px;
}
.patron{
  background-image: url('assets/img/ui/heart-gradient-24px.svg');
  width: 24px;
  height: 24px;
}
/* .ppinfo-subscription {
  display: flex;
} */
/* .ppinfo-button-subscribe{
  display: flex;
} */
.ppinfo-subscriptions-patrons,
.ppinfo-decisions-episodes {
  position: absolute;
  width: 55vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 2.5vh;
}
.ppinfo-subscriptions-patrons {
  /*bottom: 9vh;*/
  bottom: 19vh;
}
.ppinfo-decisions-episodes {
  bottom: 19vh;
  display: none;
}

.ppinfo-subscriptions-patrons.no-client {
  justify-content: center;
  padding-right: 5vw;
  bottom: 15vh;
  left: 25vw;
}
.ppinfo.no-client {
  height: 25%;
}
.ppinfo-invited-by {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 9vh;
  width: 50vw;
  margin-left: 2vw;
  margin-right: 3vw;
  line-height: 6vw;
  font-size: 3.0vw;
}
.ppinfo-invited-by-label {
  margin-bottom: -1vw;
}
.ppinfo-invited-by-name-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ppinfo-invited-by-name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 3.2vw;
}
.ppinfo-invited-by-badge {
  height: 4.0vw;
  margin-left: 2vw;
}
.ppinfo-invited-by-avatar {
  display: block;
  height: 8vw;
  border-radius: 50%;
  border: 1px solid var(--color-gray-dark);
  margin-left: 0;
  margin-right: 2vw;
}
.episodes {
  background-image: url('assets/img/ui/icon-profile-episodes.svg');
  width: 24px;
  height: 24px;
}
.bell-outlined {
  background-image: url('assets/img/ui/bell_outlined.svg');
  width: 24px;
  height: 24px;
}

.ppactivity {
  background: var(--color-background);
}
.ppactivity-item {
  display: grid;
  grid-template:
    'desc image' auto
    'time image' auto / 1fr 20vw;
  padding: 16px;
}
.ppactivity-item-description {
  font: var(--font-body);
  margin-bottom: 2px;
  grid-area: desc;
  align-self: end;
}
.ppactivity-item-timestamp {
  font: var(--font-aux);
  color: var(--color-white-softer);
  grid-area: time;
  align-self: start;
}
.ppactivity-item-image {
  grid-area: image;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 8px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.ppstory {
  background: var(--color-background);
  overflow-x: hidden;
}
.ppstory-story-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px 8px;
  padding: 16px 8px;
}
.ppstory-story {
  text-align: center;
}
.ppstory-story-image {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin: 0 auto;
  margin-bottom: 4px;
  width: 100%;
}
.ppstory-count-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ppinfo-count-icon {
  display: flex;
  margin: 0 auto
}
.ppinfo-stat-title {
  margin-top: 1vw;
  font-size: 3.4vw;
  text-align: center;
}
.ppinfo-count-text {
  margin: auto 0 auto 1vw;
  min-width: 5vw;
}
.ppstory-decisioncount,
.ppstory-episodecount {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  padding: 16px 0;
  font: var(--font-body);
  border-bottom: 1px solid var(--color-white-softer);
}
.ppstory-spinner-container{
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  transform: scale(0.5);
}
.ppstory-decisioncount-icon,
.ppstory-episodecount-icon {
  color: var(--color-primary);
  margin-left: -8px;
  margin-right: 8px;
}
.crstory, .favstory {
  overflow-x: hidden;
  overflow-y: hidden;
}
.crstory-story-list, .favstory-story-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-gap: 16px 8px;
  padding: 16px 8px; */
}
.crstory-story, .favstory-story {
  text-align: center;
  border: solid 1px rgb(28, 28, 28);
  position: relative;
}

.crstory-story-publish-status {
  display: none;
  justify-content: center;
  align-items: center;
  color: #7EFCB5;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: rgba(1, 1, 1, 0.7);
  font-size: 3vw;
  font-weight: 700;
  height: 4vw;
}
.crstory-story.is-editable .crstory-story-publish-status {
  display: flex;
}
.crstory-story.is-draft .crstory-story-publish-status {
  color: #FFC11E;
}
.crstory-story.is-draft .crstory-story-stats {
  display: none;
}
.crstory-story-image, .favstory-story-image {
  background-position: center 10px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: calc(100vw / 3 * 1.36);
}
.crstory-count-container, .favstory-count-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.crstory-decisioncount,
.crstory-episodecount,
.favstory-decisioncount,
.favstory-episodecount {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  padding: 16px 0;
  font: var(--font-body);
  border-bottom: 1px solid var(--color-white-softer);
}

.crstory-decisioncount-icon,
.crstory-episodecount-icon,
.favstory-decisioncount-icon,
.favstory-episodecount-icon {
  color: var(--color-primary);
  margin-left: -8px;
  margin-right: 8px;
}

.crstory-no-stories-text,
.favstory-no-stories-text {
  font-size: 4.5vw;
  font-weight: normal;
  text-align: center;
  padding: 4vw;
}

.crstory-no-stories,
.favstory-no-stories {
  display: flex;
  flex-direction: column;
  margin-top: 5vh;
  padding: 5vw;
}

.crstory-no-stories > img,
.favstory-no-stories > img {
  margin: 0 auto;
}

/*Classnames are in the database config_client_kv 'empty_state_text'*/
.crstory-no-stories-name,
.favstory-no-stories-name {
  margin-bottom: 4vw;
  font-size: 4vw;
}
.favstory-decisions-episodes {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 1vh;
  margin-bottom: 1vh;
  width: 100%;
  font-size: 2.5vh;
}

.crstory-i-created-no-stories-text {
  display: none;
  padding: 2vw;
  font-size: 4.5vw;
  font-weight: normal;
  line-height: 6vw;
}
.crstory-i-created-no-stories-text > a {
  color: var(--color-highlight-light);
}
.crstory-no-stories.is-me .crstory-i-created-no-stories-text {
  display: block;
}
.crstory-no-stories.is-me .crstory-no-stories-text {
  display: none;
}

.ppmodal-menu-container {
  position: absolute;
  background-color: rgba(40, 40, 40, 0.66);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ppmodal-menu {
  position: absolute;
  background-color: #383838;
  width: 60vw;
  top: calc(3.5vh + 8px);
  right: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  padding-top: 5px;
  padding-bottom: 10px;
  max-height: 80dvh;
  overflow-y: scroll;
}

.ppmodal-menu-option {
  align-items: center;
  display: flex;
  width: 90%;
  border-bottom: 1px solid #676767;
  padding-bottom: 5px;
  margin-top: 1rem;
}

.pwa .ppmodal-menu-option-notifications {
  display: none;
}

.ppmodal-menu-option-gdpr-consent {
  display: none;
}

.pwa .ppmodal-menu-option-gdpr-consent {
  display: flex;
}

.ppmodal-menu-option > img {
  margin-right: 1vw;
}

.ppmodal-menu-option-text {
  font-size: 3.7vw;
}
.ppmodal-menu-option-support {
  position: relative;
}

.ppmodal-menu-close {
  width: 90%;
  display: flex;
  flex-direction: row;
}

.ppmodal-menu-close > img {
  margin-left: auto;
  height: 24px;
}
.ppmodal-menu-id {
  position: absolute;
  left: 0;
  bottom: var(--safe-area-bottom-custom, 0px);
  width: 100vw;
  background-color: white;
  color: black;
  font-size: 1rem;
  text-align: center;
  padding: 10px;
  -webkit-user-select: text;
  user-select: text;
}

.admin-controls {
  width: 90%;
  color: #f7a397;
}
.stream-controls {
  width: 90%;
}
.admin-controls-header {
  text-align: center;
  padding-top: 10px;
  color: #383838;
  background-color: #f7a397;
  padding-bottom: 8px;
}
.admin-controls-item {
  border-bottom: 1px solid #676767;
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch {
  position: relative;
  display: inline-block;
  width: 12vw;
  height: 5vw;
  margin: 0 2vw;
  -webkit-tap-highlight-color: transparent;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #858585;
  -webkit-transition: .4s;
  transition: .4s;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 5vw;
  width: 5vw;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .switch-slider {
  background-color: #f7a397;
}
input:focus + .switch-slider {
  box-shadow: 0 0 1px #f7a397;
}
input:checked + .switch-slider:before {
  -webkit-transform: translateX(7vw);
  transform: translateX(7vw);
}
.switch-slider.round {
  border-radius: 2.5vw;
}
.switch-slider.round:before {
  border-radius: 50%;
}

.ppactivity-spinner-container,
.ppstory-spinner-container,
.crstory-spinner-container,
.favstory-spinner-container {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  transform: scale(0.5);
}

.crstory-story-title,
.favstory-story-title {
  display: none;
}

.subscribe-btn-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.gray {
  color: gray;
  border: solid 1px gray;
}
.message-center-button {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 18vw;
  height: 8vw;
  padding: 0 2vw;
  font-size: 3.5vw;
  background: var(--color-gray-mid);
  border-radius: 25px;
  opacity: 0.6;
}
.message-center-button.active {
  opacity: 1;
  background: var(--color-highlight);
}
.message-center-button-icon {
  width: 8vw;
  height: 8vw;
  background: transparent url('/assets/img/ui/bell_filled_white.svg') no-repeat center center;
}
.share-profile-button {
  position: fixed !important;
  right: calc(2.5vh + 5.6vw + 3.733vw) !important;

  width: 2.5vh;
  height: 2.5vh;
  background: transparent url('assets/img/ui/ic-share-profile.svg') no-repeat center center;
  background-size: cover;
}
.ppmodal-menu-icon-resize {
  width: 24px;
  height: 24px;
}

.profile-invite-contacts-button {
  position: fixed !important;
  right: 21vw !important;
  justify-content: center;
  align-items: center;
  width: calc((100vw - 3rem)/4);
}
.profile-invite-contacts-button > .social_button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8rem;
  width: 90%;
  color: #FFF;
  font-size: 3vw;
  font-weight: normal;
}
.profile-invite-contacts-button > .social_button img {
  height: 5.6vw;
}
.ppinfo-live {
  position: absolute;
  width: 34vw;
  right: 39vw;
}
/* .ppinfo-live-info {
  display: flex;
  align-items: center;
  justify-content: center;
} */
.ppinfo-live-text {
  width: 12vw;
  margin: 0 auto 4px;
  padding: 1px 0;
  color: rgb(255, 255, 255);
  font-size: 3.5vw;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(131.17deg, rgb(95, 191, 229) 30%, rgb(118, 107, 255) 94.15%);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
}
.ppinfo-live-role {
  font-size: 3.5vw;
  text-align: center;
  /* margin-right: 2vw; */
  color: rgba(255,255,255,0.8);
  font-weight: normal;
}
.ppinfo-live-player-count {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.ppinfo-live-player-count > img {
  height: 5vw;
  margin-right: 1vw;
}


.user-profile-top-tab-container {
  --height: 7.5vh;
  --shadow-offset-y: -3px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #2C2C2C;
  letter-spacing: .2pt;
  line-height: 19px;
  font-weight: lighter;
  padding-top: 12px;
  height: var(--height);
}
.user-profile-top-tab-container .active-feed {
  border-bottom: 3px solid #F7A397;
  color: #F7A397;
}
.user-profile-top-tab-container > button {
  width: 33%;
  font-size: 4.5vw;
}
.user-profile-top-tab-container.writers-tab > button {
  width: 25%;
  font-size: 3.9vw;
}
.user-profile-tab-activity {
  text-align: center;
  background: #2c2c2c;
  color: rgba(255, 255, 255, .8);
  padding-bottom: 8px;
}
.user-profile-tab-inbox {
  position: relative;
  text-align: center;
  background: #2c2c2c;
  color: rgba(255, 255, 255, .8);
  padding-bottom: 8px;
  display: flex;
  justify-content: center;
}
.user-profile-tab-profile,
.user-profile-tab-writers {
  text-align: center;
  background: #2c2c2c;
  color: rgba(255, 255, 255, .8);
  padding-bottom: 8px;
}

.avatars-tab,
.writer-stories-tab,
.favorites-tab {
  color: var(--color-gray-light);
  font-size: 5vw;
}
.page-tab.active .row-tab .avatars-tab,
.page-tab.active .row-tab .writer-stories-tab,
.page-tab.active .row-tab .favorites-tab {
  color: var(--color-highlight-light);
  font-size: 5vw;
}

.ppmodal.user-profile .ppinfo-subscriptions-patrons {
  bottom: 14vh;
}
.ppmodal.user-profile .ppinfo-invited-by {
  bottom: 3.5vh;
}


.user-profile-blocked-container {
  position: absolute;
  top: calc(var(--safe-area-top-custom, 0px) + 48px);
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: var(--background-color);
}
.ppinfo-button-view-blocked-profile {
  display: flex;
  max-width: 75vw;
  color: var(--color-highlight-light);
}


/* --------------------------- */
/* ---- PROFILE USER INFO ---- */
/* --------------------------- */
.profile-user-info-container {
  padding: 3vw 3vw 6vw 3vw;
  font-weight: normal;
  border-bottom: 1px solid var(--color-gray-mid);
}
.profile-user-info {
  display: grid;
  grid-template-columns: 20vw 1fr;
}

.profile-user-info-pic-container {
  position: relative;
  height: 20vw;
}
.profile-user-info-pic {
  height: 17vw;
  width: 17vw;
  margin-top: 2vw;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}
.user-profile .profile-user-info-pic {
  border: 1px solid var(--color-highlight-light);
}
.profile-user-info-pic.default {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7vw;
  font-weight: bold;
  background: var(--color-gray-light);
}
.profile-user-info-pic-edit {
  position: absolute;
  bottom: 0;
  height: 6vw;
  width: 6vw;
  background: url('assets/img/ui/profile/icon-edit-avatar-primary.svg') center / contain no-repeat;
}

.profile-user-info-data {
  display: grid;
  grid-template-rows: auto;
}
.profile-user-info-name-container {
  display: flex;
  align-items: center;
  font-size: 4vw;
}
.profile-user-info-name {
  font-weight: bold;
  max-width: 51vw;
  margin-right: 1vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.profile-user-info-pronouns {
  color: var(--color-gray-light);
}

.profile-user-info-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  font-size: 3.5vw;
}
.profile-user-info-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.profile-user-info-stat > .stat-count {
  padding-left: 5.5vw;
  margin-bottom: 1vw;
}
.profile-user-info-patrons {
  background: url('assets/img/ui/profile/icon-heart-primary-gradient.svg') left / contain no-repeat;
}
.profile-user-info-followers {
  background: url('assets/img/ui/profile/icon-followers-primary-gradient.svg') left / contain no-repeat;
}

.profile-user-info-buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 5vw;
}
.profile-user-info-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vw;
  min-width: 36vw;
  padding: 2vh;
  font-size: 3.7vw;
  border-radius: 8vw;
  white-space: nowrap;
}

.profile-user-info-friend-button {
  color: #FFF;
  background-color: var(--color-highlight);
}

/* ----------------------------- */
/* ---- PROFILE AVATAR VIEW ---- */
/* ----------------------------- */
.profile-avatar-list {
  display: flex;
  flex-direction: column-reverse;
}

.profile-avatar-item {
  height: 38vw;
  width: 94vw;
  margin: 5vw 3vw;
  position: relative;
  font-size: 4.5vw;
}

.profile-avatar-item-avatar {
  position: absolute;
  bottom: 0vw;
}

.profile-avatar-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 10px;
  height: 100%;
  padding: 0 5vw 0 30vw;
  background: #000;
}
.profile-avatar-name-container > div {
  margin: 1vw 0;
}
.profile-avatar-name {
  font-weight: normal;
}

.profile-avatar-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-avatar-buttons > div {
  width: 28vw;
  text-align: center;
  padding: 1vw;
  border-radius: 50px;
}
.profile-avatar-edit {
  border: solid 1px var(--color-primary);
}
.profile-avatar-active {
  background: var(--gradient-multiplayer);
}

/* ---- PROFILE AVATAR ITEM - AUTHOR STYLE ---- */
.profile-avatar-item.authors-choice .profile-avatar-item-avatar {
  height: 85%;
  width: 30%;
  background-size: 100%;
  background-image: url("assets/img/ui/profile/avatar-authors-choice.svg");
  background-repeat: no-repeat;
}

/* ---- PROFILE AVATAR ITEM - DORIAN STYLE ---- */
.profile-avatar-item.dorian-style {
  margin-top: 10vw;
}
.profile-avatar-item.dorian-style .profile-avatar-item-avatar {
  height: 48vw;
}

/* ---- PROFILE AVATAR ITEM - DORIAN STYLE ---- */
.profile-avatar-item.custom-style {
  margin-top: 10vw;
}
.profile-avatar-item.custom-style .profile-avatar-item-avatar {
  height: 38vw;
  padding: 2vw;
}

/* ---- PROFILE AVATAR ITEM - MESSAGE STYLE ---- */
.profile-avatar-item.message-type .profile-avatar-item-avatar {
  height: 100%;
  width: 100%;
  background-image: url("assets/img/ui/profile/avatar-placeholder.svg");
  background-repeat: no-repeat;
}
.profile-avatar-item.message-type .profile-avatar-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 34vw;
  text-align: center;
  font-weight: normal;
  background: var(--color-gray-dark);
}


/* ------------------------------------------------ */
/* ---- AVATAR TYPE MODAL / PROFILE EDIT MODAL ---- */
/* ------------------------------------------------ */
.avatar-type-modal,
.profile-edit-modal {
  position: relative;
  padding: 5vw;
  font-size: 4vw;
  font-weight: normal;
  color: var(--color-white-soft);
}
.profile-edit-modal {
  padding-top: 10vw;
}
.profile-edit-modal-heading {
  font-weight: bold;
  color: #fff;
}

.profile-edit-modal-name {
  position: relative;
}
.profile-edit-modal-name-status {
  position: absolute;
  top: 20vw;
  width: 100%;
  color: var(--color-green);
  text-align: center;
  line-height: 4.5vw;
}
.profile-edit-modal-name-status.error {
  color: var(--color-red);
}
.profile-edit-modal-name-status.checking {
  color: var(--color-white-soft);
}

.avatar-type-modal-name > input,
.avatar-type-modal-pronouns > input,
.profile-edit-modal-name > input {
  width: 100%;
  margin: 2vw 0 6vw 0;
  padding: 3vw;
  border: 1px solid var(--color-white-soft);
  border-radius: 10px;
  opacity: 1;
}
.profile-edit-modal-name > input {
  margin-bottom: 12vw;
}
.profile-edit-modal-pronouns-input-container > input {
  width: 100%;
  padding: 3vw;
  border: 1px solid var(--color-white-soft);
  border-radius: 10px;
  opacity: 1;
  pointer-events: none;
}
.profile-edit-modal-pronouns-input-container {
  width: 100%;
  margin: 2vw 0 6vw 0;
}

.avatar-type-modal-pronouns,
.profile-edit-modal-pronouns {
  position: relative;
  font-size: 4vw;
}
.profile-edit-modal-pronouns {
  color:var(--color-white-soft);
  font-weight: normal;
}

.avatar-type-modal-pronouns .dropdown-button,
.profile-edit-modal-pronouns .dropdown-button {
  position: absolute;
  top: 8vw;
  right: 1vw;
  height: 9vw;
  width: 9vw;
  background: url("assets/img/buttons/arrow-drop-down-white.svg") no-repeat center/contain;
  opacity: 0.6;
  pointer-events: none;
}

.avatar-type-modal-pronouns .dropdown-list,
.profile-edit-modal-pronouns .dropdown-list {
  position: absolute;
  background: var(--color-background);
  padding: 1vw 0 3vw 0;
  width: 100%;
  top: 7vw;
  border-radius: 10px;
  border: 1px solid var(--color-gray-mid);
  z-index: 1;
}

.avatar-type-modal-pronouns .dropdown-list-item,
.profile-edit-modal-pronouns .dropdown-list-item {
  padding: 2vw 5vw;
}
.avatar-type-modal-pronouns .dropdown-list-item[data-id="none"],
.profile-edit-modal-pronouns .dropdown-list-item[data-id="none"]{
  color: var(--color-gray-mid);
}

.avatar-type-modal-buttons-heading {
  text-align: center;
  font-weight: bold;
  margin: 4vw 0;
}

.avatar-type-modal-buttons {
  margin-bottom: 16vw;
}

.avatar-type-modal-buttons > div,
.avatar-type-modal-next-button,
.profile-edit-modal-confirm-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11vw;
  margin: 4vw 0;
  padding: 3vw 0;
  color: var(--color-white);
  border-radius: 50px;
}

.authorsChoice-avatar-type {
  background: #FF6CA3;
}

.custom-avatar-type {
  background: #F3BAE3;
}

.dorianStyle-avatar-type {
  background: #AFAEF6;
}

.transparent-avatar-type {
  background: #70A2F5;
}

.avatar-type-modal-buttons > div.selected {
  border: 4px solid var(--color-primary-light);
}

.avatar-type-modal-next-button,
.profile-edit-modal-confirm-button {
  margin-bottom: 5vw;
  background: var(--color-highlight)
}

.avatar-type-modal-next-button.disabled,
.profile-edit-modal-confirm-button.disabled {
  background: transparent;
  color: var(--color-gray-light);
  border: 1px solid var(--color-gray-light);
  pointer-events: none;
}

.profile-edit-modal-name.error > input,
.avatar-type-modal-name.error > input {
  border: 1px solid var(--color-red);
}

.profile-edit-modal-close-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 10vw;
  width: 10vw;
  background: url('assets/img/ui/close-24px.svg') no-repeat center / 60%;
}

.usercategories{
    /* height: calc(100vh - 6rem - 2em - var(--safe-area-top-bottom-custom, 0px)) */
    height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
    margin-top: var(--safe-area-top-custom, 0px);
    display: flex;
    flex-direction: column;
  }

  .usercategories-screen{
    background-color: rgb(28,28,28);
  }
  .usercategories-list {
    display: flex;
    flex-wrap: wrap;
    padding: 6vw;
    height:80%;
    overflow: auto;
  }
  .usercategories-item {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    height: 10vw;
    margin: 2vw;
    padding: 3vw;
    border: 1px solid rgb(112, 112, 112);
    border-radius: 8vw;
    background: rgb(28,28,28);
  }
  .usercategories-icon {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 6vw;
  }
  .usercategories-item.selected {
    border: solid 1px #f7a397;
    background-color:  #f7a397;
    color:black;
  }
  .usercategories-list-title {
    padding-left: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
  }

  .usercategories-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3vh;
    border-bottom: solid 1px rgb(112, 112, 112);
    padding-bottom: 3vh;
    height:10%

  }

  .usercategories-main-header{
    font-size: 6vw;
    margin-bottom: 1.5vw;
    text-align: center;
  }

  .usercategories-sub-header{
    color: rgb(180,180,180);
    font-style: italic;
    font-size: 4vw;
    font-weight: 300;
  }
  .usercategories-footer{
    border-top: solid 1px rgb(112, 112, 112);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:10%
  }


  .usercategories-submit{
    border-radius: 8px;
    font: var(--font-button);
    text-transform: uppercase;
    width: fit-content;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 6px 16px;

}
.usercategories-submit.disabled{
  background-color: #7d7d7d;
  background-image: none;
  color: #d2d2d2;
}


/* ********************** */

.userhashtags {
  display: flex;
  flex-direction: column;
  font-weight: normal;
}
.userhashtags-screen {
  background-color: #1D1C1C;
  border-radius: 20px;
}
.userhashtags-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 10px 20px 0px 20px;
  max-height: 40vh;
  overflow: auto;
}
.userhashtags-image-item {
  width: 24vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 15px;
}
.userhashtags-image-container {
  height:17vw;
  width: 17vw;
  position: relative;
}
.userhashtags-image {
  height:17vw;
  width: 17vw;
}
.userhashtags-image-check-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background-color: rgba(0,0,0,0.2);
  border-radius: 100px;
}
.userhashtags-image-check {
  height: 18px;
  width: 18px;
}
.userhashtags-image-title {
  font-size: 3.8vw;
  padding-top: 9px;
  white-space: nowrap;
  text-align: center;
}
.userhashtags-text-item {
  display: flex;
  justify-content: center;
  width: 30%;
  margin: 6px 0;
  padding: 7px 0;
  border-radius: 100px;
  background: #565656;
}
.userhashtags-text-item.selected {
  background-color:  #f7a397;
  color:black;
}
.userhashtags-text-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
  white-space: nowrap;
  text-align: center;
}
.userhashtags-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.userhashtags-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 25px 0px 25px;
}
.userhashtags-bar {
  width: 100%;
  background-color: #474747;
  border-radius: 100px;
  overflow: hidden;
}
.userhashtags-bar-fill {
  background-color: #F8A498;
  height: 13px;
  width: 0%;
}
.userhashtags-bar-labels {
  color: #747474;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding-top: 11px;
  font-size: 2.9vw;
}
.userhashtags-bar-labels > .active {
  color: #F8A498;
}
.userhashtags-main-header {
  font-weight: normal;
  padding-top: 17px;
  text-align: center;
}
.userhashtags-main-title {
  font-size: 5vw;
}
.userhashtags-main-subtitle {
  font-size: 3.35vw;
  padding-top: 5px;
}
.userhashtags-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #747474;
}
.userhashtags-footer-msg {
  font-size: 3.35vw;
  margin-top: 12px;
}
.userhashtags-submit {
  color: #F8A498;
  border: 1px solid #F8A498;
  background-color: #1D1C1C;
  border-radius: 100px;
  width: 86%;
  margin-bottom: 25px;
  margin-top: 15px;
  padding: 12px;
  text-align: center;
  font-size: 5vw;
}
.userhashtags-submit.disabled {
  color: #747474;
  border: 1px solid #747474;
}

.userhashtags-complete {
  padding: 5vw;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}
.userhashtags-complete-header {
  margin-bottom: 4vh;
  font-size: 5vw;
  background-color: var(--color-primary);
  background-image: linear-gradient(0deg, var(--color-primary), var(--color-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.userhashtags-complete-icon {
  height: 10vw;
  width: 10vw;
  margin: 5vw auto 0vw auto;
}
.userhashtags-complete-button {
  margin-top: 3vh;
  padding: 3vw;
  color: #000;
  font-size: 5vw;
  background: linear-gradient(0deg, var(--color-primary), var(--color-primary-light));
  border-radius: 25px;
}
.userhashtags-toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userhastags-toggle-header {
  margin: 5vw 0 3vw 0;
  font-size: 5vw;
}
.userhashtags-toggle-text {
  margin-top: 3vw;
  font-size: 3.5vw;
}
.userhashtags-warning-text {
  margin-top: 3vw;
  color: var(--color-red);
  font-size: 3.35vw;
  text-align: center;
}
.modal.modal-toggle {
  width: 60%;
  padding-bottom: 5vw;
}



#video-chat-container {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
/* Using z-index to pair div with the native view that overlays the webview*/
  z-index: 2147483646;
}
.android #video-chat-container {
  top: calc(-1 * var(--safe-area-top-custom, 0px)/2 + 2px);
}

.video-portrait {
  background-color:white;
  border-radius:100%;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: 2px;
  pointer-events: none;
  border: 2px solid black;
  object-fit: cover;
}

.android .video-portrait {
  transform: scale(0.95);
}

#host-video-toggle-container {
  position: absolute;
  left: 2vw;
  top: calc(7.5vw + var(--safe-area-top-custom, 0px));

  --toggle-bar-width: 10.5vw;
  --toggle-bar-height: 2.0vw;
  --toggle-dot-height: 3.5vw;
  --toggle-dot-right: calc(var(--toggle-bar-width) - var(--toggle-dot-height));
}
body.ios #host-video-toggle-container {
  top: 11vw;
}
.host-video-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  margin-top: 2.5vw;
}
.host-video-toggle-switch {
  position: relative;
  display: inline-block;
  width: var(--toggle-bar-width);
  height: 3.5vw;
  margin: 0 2vw;
}
.host-video-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.host-video-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #858585;
  -webkit-transition: .4s;
  transition: .4s;

  background: rgba(15, 17, 28, 0.6);
  border: 1px solid rgba(201, 205, 221, 0.15);
  height: var(--toggle-bar-height);
}
.host-video-toggle-slider:before {
  position: absolute;
  content: "";
  height: var(--toggle-dot-height);
  width: var(--toggle-dot-height);
  background-color: #FFF;
  -webkit-transition: .4s;
  transition: .4s;
  top: calc(-1 * (var(--toggle-dot-height)/2) + var(--toggle-bar-height)/2  - 2px);
}
.host-video-toggle.active > .host-video-toggle-switch > .host-video-toggle-slider {
  background-color: var(--color-highlight-light);
  border: 1px solid rgba(201, 205, 221, 0.15);
}
.host-video-toggle-slider.host-video-toggle-round {
  border-radius: 2vh;
  pointer-events: none;
}
.host-video-toggle-slider.host-video-toggle-round:before {
  border-radius: 50%;
}

@keyframes hvToggleRight {
  0% {
    left: 0;
  }
  100% {
    left: var(--toggle-dot-right);
  }
}
@keyframes hvToggleLeft {
  0% {
    left: var(--toggle-dot-right);
  }
  100% {
    left: 0
  }
}

.host-video-toggle-slider.host-video-toggle-round.toggleRight::before {
  animation-name: hvToggleRight;
  animation-duration: 0.4s;
  left: var(--toggle-dot-right);
}
.host-video-toggle-slider.host-video-toggle-round.toggleLeft::before {
  animation-name: hvToggleLeft;
  animation-duration: 0.4s;
  left: 0;
}

#host-video-label {
  color: white;
  font-size: var(--font-size-11-px);
  pointer-events: none;
  text-align: center;
  width: 18vw;
}


/* Browser Only */

.video-view {
  background-color: transparent;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.video-view-container {
  background-color: transparent;
  position: absolute;
  pointer-events: none;
}

.context-menu {
  position: fixed;
  display: grid;
  background-color: var(--color-background-panel);
  color: var(--color-white);
  font: var(--font-body);
  min-width: 50vw;
  padding: 16px 12px;
  grid-gap: 8px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 16px -8px black;
}
.context-menu-item {
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  height: 60px;
}
.context-menu-icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 4px;
}
.context-menu-root {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

.color-gray {
  color: gray
}
.hud-multiplayer {
  /* position: relative; */
  z-index: 1;
  position: absolute;
}
.mp-controls-buttons {
    display: grid;
    justify-content: center;
    width: 100%;
    grid-auto-flow: column;
    grid-gap: 16px;
    padding: 5px 16px 0px 16px;
  }

  .mp-controls-button {
    width: 38px;
    height: 38px;
    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
    border-radius: 50%;
    filter: var(--svg-filter-white-to-blue);
  }


  .mp-controls-button.inactive,
  .mp-controls-button[disabled] {
    box-shadow: inset 0 0 0 1px var(--color-white);
  }
  .mp-controls-button[disabled] {
    opacity: 0.5;
  }

  .mp-controls-button-host {
    background-image: url('assets/img/ui/icon-cam-on.svg');
    background-size: 70%;
  }
  .mp-controls-button-mic {
    background-image: url('assets/img/ui/mic-24px.svg');
  }
  .mp-controls-button-mic.inactive,
  .mp-controls-button-mic[disabled] {
    background-image: url('assets/img/ui/mic_off-24px.svg');
  }
  /* muted by user themselves */
  .mp-controls-button-mic.inactive {

  }
  /* forced to be muted */
  .mp-controls-button-mic[disabled] {
    background-color: transparent;
  }
  .mp-controls-button-mic-loading {
    background-image: url('assets/img/animations/Spinner-1.3s-256px-42r.gif');
    width: 38px;
    height: 38px;
    background-size: 38px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .mp-controls-button-cam {
    background-image: url('assets/img/ui/videocamf-24px.svg');
  }
  .mp-controls-button-cam.inactive,
  .mp-controls-button-cam[disabled] {
    background-image: url('assets/img/ui/videocam_off-24px.svg');
  }
  .mp-controls-button-cheer {
    background-image: url('assets/img/ui/icon-heart.svg');
    background-color: transparent;
    background-size: 30px;
    border-radius: 0;
    filter: unset;
    /*background-image: url('assets/img/ui/icon-cheer2.svg');*/
    /*background-size: contain;*/
  }
  .mp-controls-button-emoji {
    background-image: url('assets/img/ui/icon-emoji.svg');
  }
  .mp-controls-button-chat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mp-controls-button-chat > img {
    height: 24px;
    width: 24px;
    pointer-events: none;
  }
  .mp-controls-button-leave {
    background-image: url('assets/img/buttons/leave-24px.svg');
    filter: unset;
  }
  .mp-controls-heart-balance {
    margin-top: 42px;
    color: #FFF;
    text-align: center;
    text-shadow: 0px 0px 3px black;
  }

  .mp-controls-volume-container {
    position: absolute;
    bottom: calc(4.2rem + 24px + var(--safe-area-bottom-custom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 52vw;
    width: 12vw;
    background: var(--color-background);
    border: solid 1px var(--color-gray-light);
    border-radius: 5px;
  }
  .mp-controls-volume-value {
    height: 10vw;
    width: 75%;
    padding: 3vw 0 2vw 0;
    color: var(--color-primary);
    font-size: 3.5vw;
    text-align: center;
    border-bottom: solid 1px var(--color-white-softer);
  }
  .mp-controls-volume-slider-container {
    height: 42vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mp-controls-volume-slider {
    -webkit-transform: rotate(270deg);
  }


/* //////////////////////////////////// */
/* ////////// VOLUME SLIDER ////////// */
/* /////////////////////////////////// */

/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].mp-controls-volume-slider {
  position: relative;
  -webkit-appearance: none;
}

/*progress support*/
/* input[type=range].mp-controls-volume-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
} */

input[type=range].mp-controls-volume-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].mp-controls-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 2px black;
  margin-top: -1vw;
}
input[type=range].mp-controls-volume-slider::-webkit-slider-runnable-track {
  height: 3vw;
  border: none;
  border-radius: 25px;
  background: var(--color-gray-light)
}
input[type=range].mp-controls-volume-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(var(--color-primary),var(--color-primary)) 0/var(--sx) 100% no-repeat, #efefef;
}


/* input[type=range].mp-controls-volume-slider.slider-progress::-ms-fill-lower {
  height: 1em;
  border-radius: 0.5em 0 0 0.5em;
  margin: -undefined 0 -undefined -undefined;
  background: #f7a397;
  border: none;
  border-right-width: 0;
} */

.mp-controls-fade {
  opacity: 0.3;
}


  @media only screen and (min-width: 360px) {
    .mp-controls-button-leave {
      position: absolute;
      left: 16px;
    }
  }

  .mp-player-li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 8px;
  }

  /* BOTTOM BORDER */
  .mp-player-li::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 4vw;
    right: 4vw;
    height: 1px;
    background-color: var(--color-gray-dark);
  }

  .mp-player-li-pic {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 8px;
    border-radius: 9999px;
    box-shadow: 0 0 0 2px;
    color: transparent;
  }
  .mp-player-li-text {
    color: var(--color-white);
    flex: 1 0 0;
    overflow: hidden;
  }
  .mp-player-li-name {
    font: var(--font-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mp-player-li-desc {
    font: var(--font-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-white-soft);
  }

  .mp-player-li-role,
  .mp-player-li-mic,
  .mp-player-li-cam,
  .mp-player-li-more {
    width: 40px;
    height: 40px;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mp-player-li-role[data-role=broadcaster] {
    background-image: url('assets/img/ui/icon-cam-off.svg');
    background-size: 75%;
  }
  .mp-player-li-role[data-role=audience] {
    background-image: url('assets/img/ui/icon-cam-on.svg');
    background-size: 75%;
  }
  .mp-player-li-role[data-role=audience-only] {
    background-image: url('assets/img/ui/icon-cam-question.svg');
    background-size: 80%;
  }
  .mp-player-li-mic {
    background-image: url('assets/img/ui/mic-24px.svg');
  }
  .mp-player-li-mic[data-mode="inactive"] {
    background-image: url('assets/img/ui/mic_off-24px.svg');
  }
  .mp-player-li-mic[data-mode="disabled"] {
    background-image: url('assets/img/ui/mic_off-24px.svg');
    opacity: 0.5;
  }
  .mp-player-li-cam {
    background-image: url('assets/img/ui/videocamf-24px.svg');
  }
  .mp-player-li-cam[data-mode="inactive"] {
    background-image: url('assets/img/ui/videocam_off-24px.svg');
  }
  .mp-player-li-cam[data-mode="disabled"] {
    background-image: url('assets/img/ui/videocam_off-24px.svg');
    opacity: 0.5;
  }
  .mp-player-li-more {
    background-image: url('assets/img/ui/icon-more_horiz-24px.svg');
  }
  .mp-player-li-role[data-status="2"] {
    background-image: url('assets/img/animations/loading.gif');
  }

  .mp-host-controls-override {
    display: grid;
    grid-template-rows: 15vw 1fr 2.7rem;
    margin-top: 10px;
    background: var(--color-background-card);
  }


  .mp-host-controls-header-container {
    background-color: var(--color-gray-dark);
    height: 15vw;display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2vw;
  }
  .mp-host-controls-header-container.mp-broadcasters {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .mp-host-controls-header-title {
    font-size: 4.25vw;
    /* width: 80%; */
    text-align: center;
    margin: 1vw;
  }
  .mp-host-controls-audience-header-container {
    display: flex;
  }
  .mp-host-controls-audience-count-container>img {
    height: 5vw;
    width: 5vw;
    margin: auto 1vw;
    pointer-events: none;
  }
  .mp-host-controls-audience-count-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6vw;
    width: 20vw;
    margin: auto;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
  }

  .mp-host-controls-header-body {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 3.25vw;
  }

  .mp-broadcaster-instructions-role {
    background-image: url('assets/img/ui/icon-cam-off.svg');
    width: 24px;
    height: 24px;
    margin: 0 2px;
  }
  .mp-audience-instructions-role {
    background-image: url('assets/img/ui/icon-cam-on.svg');
    width: 24px;
    height: 24px;
    margin: 0 2px;
  }





/* STYLES FOR MP STORY INFO TOOLTIP */
.story-info-tooltip {
  position: absolute;
  right: 3vw;
  bottom: calc(4.2rem + 24px + 3vw);
  width: 70vw;
}
.story-info-tooltip.top {
  /* top: calc(6vh + 8vw); */
  top: 2vw;
  right: 10vw;
  bottom: auto;
}
.story-tooltip-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vw 2vw;
  background: rgba(0,0,0,0.7);
  border-radius: 10px;
}
.story-tooltip-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.story-tooltip-text {
  color: #FFF;
  font-size: 3vw;
  font-weight: normal;
  margin-left: 2vw;
  width: 45vw;
}
.story-tooltip-text > div {
  margin-bottom: 2vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-tooltip-title {
  font-weight: bold;
  font-size: 3.5vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.story-tooltip-episode {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.story-tooltip-authors,
.story-tooltip-revshare {
  padding-top: 2vw;
  border-top: solid 1px rgba(255,255,255,0.4);
}
.story-tooltip-authors > div {
  white-space: nowrap;
}

.moderation-button {
  position: absolute;
  right: 0;
  top: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14vw;
}
.moderation-button-icon {
  height: 8vw;
  width: 8vw;
  background: url('assets/img/ui/icon-more_horiz-24px.svg') no-repeat center var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
}

.stream-share-button {
  position: absolute;
  right: 0;
  top: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14vw;
}
.stream-share-button-icon {
  height: 8vw;
  width: 8vw;
  background: url('assets/img/ui/icon-share-episode.svg') no-repeat center;
  pointer-events: none;
}

.stream-share-button.loading {
  pointer-events: none;
}

.stream-share-button.loading .stream-share-button-icon {
  background-image: url('assets/img/animations/loading.gif');
  background-size: cover;
}

/* CHEER PANEL */
.mp-cheer-panel {
  /* position: absolute; */
  position: fixed;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;

  background: #000000;
  width: 100%;
  left: 0;
  bottom: 0;
  overflow: hidden;

  will-change: transform, opacity;
  transition:
      transform 200ms ease-in-out 0s,
      opacity 200ms ease-in-out 0s;

  opacity: 0;
  transform: translate(0, 100%);
}
.mp-cheer-panel.open {
  transform: translate(0, 0);
  opacity: 1;
  z-index: 1001; /* it was hidden on leaderboard */
}

.mp-cheer-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 3vw 2vw;
  pointer-events: none;
}

.mp-cheer-header .user-heart-amount-container {
  display: flex;
  align-items: center;
  height: 8vw;
  margin-bottom: 2vw;
  padding: 0 3vw;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  pointer-events: auto;
}
.mp-cheer-header .user-heart-amount {
  display: flex;
  align-items: center;
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat 0 50%;
  background-size: 6.5vw;
  background-position: left;
  color: var(--color-white);
  height: 100%;
  padding: 0vw 3vw 0 7vw;
  font-size: 3.5vw;
  line-height: 3.5vw;
  pointer-events: none;
}
.user-heart-amount-container > img {
  height: 4.5vw;
  pointer-events: none;
}

.mp-cheer-title {
  color: var(--color-white);
  font-style: italic;
  text-align: center;
  font-size: 4vw;
  margin: 0 8vw;
}
.mp-cheer-exit-title {
  margin-bottom: 7vw;
  color: var(--color-white);
  font-size: 5.5vw;
  text-align: center;
}
.mp-cheer-title .cheered-name {
  color: var(--color-primary);
}

.mp-cheer-close-button {
  width: 14vw;
  font-family: "Material Icons";
  font-size: 8vw;
  color: #ffffff99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-cheer-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6vw 0 3vw 0;
}
.mp-cheer-item {
  flex: 1 1 auto;
  margin: 2vw;
  background: transparent;
}
.mp-cheer-item.disabled {
  pointer-events: none;
}
.mp-cheer-item-value {
  background: transparent url("assets/img/ui/icon-heart-no-glow.svg") no-repeat 50% 50%;
  background-size: contain;
  font-size: 4.5vw;
  color: #ffffff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17vw;
  height: 17vw;
  margin: 0 auto;
}
.mp-cheer-item-value.disabled {
  background-image: url("assets/img/ui/icon-heart-no-glow-disabled.svg");
  color: #ffffff80;
}

.mp-cheer-panel-close-button {
  width: 14vw;
  font-family: "Material Icons";
  font-size: 8vw;
  color: #ffffff99;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
/* .mp-cheer-panel-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 3vw 3vw calc(3vw + var(--safe-area-bottom-custom, 0px)) 3vw;
} */
/* .mp-cheer-panel-footer .recharge-button {
  color: #ffffff80;
  font-size: 5vw;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 3vw 4vw;
}
.mp-cheer-panel-footer .recharge-button:after {
  content: "";
  display: inline-block;
  background: url("assets/img/ui/icon-arrow-forward.svg") center/6vw no-repeat;
  width: 6vw;
  height: 8vw;
  margin: 0 0 0 1vw;
} */

/* HEARTS RECHARGE PANEL */
.mp-hearts-recharge-panel {
  /* position: absolute; */
  position: fixed;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;

  background: #000000;
  width: 100%;
  left: 0;
  bottom: 0;
  overflow: hidden;

  will-change: transform, opacity;
  transition:
      transform 200ms ease-in-out 0s,
      opacity 200ms ease-in-out 0s;

  opacity: 0;
  transform: translate(0, 100%);
}
.mp-hearts-recharge-panel.open {
  transform: translate(0, 0);
  opacity: 1;
  z-index: 1001; /* it was hidden on leaderboard */
}

.mp-hearts-recharge-panel-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2vw;
}

.mp-hearts-recharge-panel .user-heart-amount {
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat 0 50%;
  background-size: 6.5vw;
  color: var(--color-white);
  height: 10vw;
  padding: 3vw 4vw 0 7vw;
  font-size: 3.5vw;
  line-height: 3.5vw;
}
.mp-hearts-recharge-panel .title {
  color: var(--color-white);
  font-style: italic;
  text-align: center;
  font-size: 5vw;
}
.mp-hearts-recharge-panel .cheered-name {
  color: var(--color-primary);
}

.mp-hearts-recharge-panel-close-button {
  width: 14vw;
  font-family: "Material Icons";
  font-size: 8vw;
  color: #ffffff99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-hearts-recharge-panel-item-list {
  display: grid;
  grid-template-columns: 30vw 30vw;
  grid-auto-rows: 18vw;
  justify-items: stretch;
  align-items: stretch;
  justify-content: center;
  margin: 6vw 0 calc(14vw + var(--safe-area-bottom-custom, 0px)) 0;
  grid-gap: 15vw 20vw;
}
.mp-hearts-recharge-panel-item {
  position: relative;
  background: var(--color-primary) none;
  border-radius: 2vw;
  font-size: 8vw;
  color: #ffffff;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 0 2.5vw 0;
}
.mp-hearts-recharge-panel-item > .discount {
  position: absolute;
  left: 50%;
  top: 0;
  background: #0DF8DD none;
  border-radius: 3vw;
  height: 6vw;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 3vw;
  font-weight: normal;
  white-space: nowrap;
  line-height: 6vw;
  padding: 0 3vw;
  border: solid 1px #707070;
}
.mp-hearts-recharge-panel-item > .price {
  position: absolute;
  left: 50%;
  bottom: 0;
  background: #1C1C1C none;
  border-radius: 6vw;
  height: 12vw;
  transform: translate(-50%, 50%);
  color: #fff;
  font-size: 5vw;
  font-weight: 700;
  white-space: nowrap;
  line-height: 12vw;
  padding: 0 4vw;
  border: solid 1px var(--color-primary);
}
.mp-hearts-recharge-panel-item > .hearts {
  color: #000;
  padding: 2vw 0 2vw 11vw;
  font-size: 6vw;
  font-weight: 700;
}
.mp-hearts-recharge-panel-item > .hearts {
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat 0 50% / 11vw;
}

.mp-hearts-recharge-panel-item.double > .hearts {
  font-size: 4vw;
  background-size: 5vw;
  padding: 0 2vw 0 5vw;
}

/* CHEER BROADCASTING */
.cheer-broadcast.cheer-lobby-broadcast {
  position: absolute;
  left: 6vw;
  height: 100%;
  width: 71vw;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.cheer-broadcast.cheer-story-broadcast {
  position: absolute;
  left: 6vw;
  height: 100%;
  width: 71vw;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  top: 44vw;
}

.cheer-broadcast.cheer-leaderboard-broadcast {
  position: absolute;
  left: 6vw;
  height: calc(100% - 30vh - 5rem + 24px - var(--safe-area-bottom-custom, 0px));
  width: 71vw;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  bottom: calc(5rem + 24px);
}

.cheer-broadcast > .cheer-item {
  position: relative;
  height: 12vw;
  margin: 2vw 0 2vw 13vw;
  animation-delay: 0s;
  animation-duration: 500ms;
  animation-timing-function: linear;
  will-change: opacity, transform;
  z-index: 1000;
}
.cheer-broadcast > .cheer-item > .bg {
  display: block;
  position: absolute;
  background: transparent linear-gradient(to right, #F7A397b2 0%, #FFD7AAb2 100%) no-repeat 0 0;
  left: -1vw;
  top: -1vw;
  right: -1vw;
  bottom: -1vw;
  border-radius: 7vw;
}
.cheer-broadcast > .cheer-item > .bg:before {
  content: "";
  display: block;
  position: absolute;
  background: #1c1c1cb2 none;
  left: 1vw;
  top: 1vw;
  right: 1vw;
  bottom: 1vw;
  border-radius: 6vw;
}
.cheer-broadcast > .cheer-item > .wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 0 0 8vw;
  border-radius: 5.5vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.cheer-broadcast > .cheer-item .cheer-item-avatar {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background: #00000080 none no-repeat 50% 50%;
  position: absolute;
  left: -15vw;
  background-size: cover;
}
.cheer-broadcast > .cheer-item .text-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  justify-content: center;
  font-size: 4vw;
}
.cheer-broadcast > .cheer-item .text-block > .cheer-item-name {
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cheer-broadcast > .cheer-item .text-block > .cheer-item-comment {
  color: #ffffff;
  font-weight: 400;
}
.cheer-broadcast > .cheer-item .cheer-item-hearts-amount {
  color: #ffffff;
  font-size: 5vw;
  font-style: italic;
  font-weight: 700;
  background: transparent url("assets/img/ui/icon-heart.svg") no-repeat -2vw -2vw;
  padding: 0 0 0 10vw;
  background-size: 16vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 26vw;
  justify-content: center;
}

@keyframes fade-in-move-up {
  from {
    opacity: 0;
    transform: translate(0, 100%);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fade-out-move-up {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, -100%);
  }
}

.mp-cheer-item.fade-in {
  animation: fade-in;
  animation-timing-function: ease-in;
  animation-duration: 1000ms;
}
@keyframes fade-in {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}


.cheer-broadcast > .cheer-item-stream-goal {
  --badge-size: 14vw;
  --border-radius: 6vw;
}
.cheer-broadcast > .cheer-item-stream-goal .text-block-inside {
  display: inline;
  color: var(--color-black);
}
.cheer-broadcast > .cheer-item-stream-goal .text-block-inside b {
  font-weight: 800;
}
.cheer-broadcast > .cheer-item-stream-goal .text-block {
  font-size: var(--font-size-13-px);
}
.cheer-broadcast > .cheer-item-stream-goal > .bg {
  background: rgba(255, 255, 255, 0.5);
}

.cheer-broadcast > .cheer-item-stream-goal > .bg:before {
  content: none;
}

.cheer-broadcast > .cheer-item-stream-goal > .bg .bg-border1,
.cheer-broadcast > .cheer-item-stream-goal > .bg .bg-border2,
.cheer-broadcast > .cheer-item-stream-goal > .bg .bg-shine {
  --border-width: 1vw;
  left: var(--border-width);
  top: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  border-radius: var(--border-radius);
  position: absolute;
}

.cheer-broadcast > .cheer-item-stream-goal > .bg .bg-border1 {
  --border-width: 1vw;
  background: linear-gradient(180deg, #FFFFFF 0%, #C66C01 26.91%, #B78423 66.49%, #FFE792 100%);
}
.cheer-broadcast > .cheer-item-stream-goal > .bg .bg-border2 {
  --border-width: 0.6vw;
  background: linear-gradient(180deg, #FFD78A 0%, #FDCB69 100%);
}
.cheer-broadcast > .cheer-item-stream-goal > .bg .bg-shine {
  --border-width: 1vw;
  background: rgba(255, 255, 255, 0.5);
  bottom: 50%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cheer-broadcast > .cheer-item-stream-goal > .wrapper {
  justify-content: center;
  padding-left: var(--badge-size);
}
.cheer-broadcast > .cheer-item-stream-goal .cheer-stream-goal-badge {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--badge-size);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}
.cheer-broadcast > .cheer-item-stream-goal .cheer-stream-goal-badge img {
  width: 100%;
  object-fit: contain;
}

.cheer-stream-goal-badge-title,
.cheer-broadcast > .cheer-item-stream-goal .cheer-stream-goal-badge-title {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-16-px);
  font-weight: 600;
  color: var(--color-black);
}

.showcase-derivative-btn {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.showcase-derivative-btn-animate {
  animation: spin 20s linear infinite;
}

div.derivativeTopLabel {
  display: inline-block;
  position: relative;
  height: 24vw;
  width: 20px;
  transform-origin: bottom center;
  font: 2vw Monaco, MonoSpace;
  color: #fff;
  opacity: 0;
}

div.derivativeBottomLabel {
  display: inline-block;
  position: absolute;
  bottom: 0;
  font: 3vw Monaco, MonoSpace;
  color: #fff;
  opacity: 0
}



.filtered-button{
  position: absolute;
  bottom: 4vw;
  right: 4vw;
  display: flex;
  align-items: center;
  padding: 2vw;
  height: 24vw;
  width: 24vw;
  text-align: center;
}
.filtered-button-trends {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 2vw;
  font-size: 3.25vw;
  background: var(--color-primary);
  border-radius: 50%; 
}
.filtered-button-image {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: spin 20s linear infinite;
}
.filtered-button-image.other-girl {
  background-image: url("assets/img/buttons/trends/button-other-girl.jpg");
}
.filtered-button-image.wrong-name {
  background-image: url("assets/img/buttons/trends/button-wrong-name.jpg");
}

.filtered-screen {
  font: var(--font-body);
  color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.filtered-container {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.filtered-header {
  top: 0;
  display: flex;
  height: 48px;
  padding: 1vw 0;
}

.filtered-header-back {
  width: 48px;
  background: url("assets/img/ui/icon-arrow-back.svg") center/24px no-repeat;
}

.filtered-header-story-title,
.filtered-header-title {
  font-size: 4.5vw;
  font-weight: 700;
  color: var(--color-highlight-light);
  align-self: center;
  flex: 1 0 0;
  text-align: center;
  margin-right: 48px;
  width: 74vw;
}

.filtered-header-story-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtered-story-list {
  height: calc(100% - 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px 3vw;
  padding: 16px 5vw 3rem 5vw;
  align-content: start;
}

.filtered-story {
  position: relative;
  display: flex;
  flex-flow: column;
  text-align: left;
  width: 28vw;
}

.filtered-story-image-container {
  position: relative;
}

.filtered-story-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100%;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  margin-bottom: 8px;
}

.filtered-story-resume-label {
  font-size: 3.3vw;
  color: #000;
  width: 100%;
  height: 6vw;
  position:absolute;
  bottom: 0;
  left:0;
  background:linear-gradient(180deg, #F7A397, #FFD7AA);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 5px; 
  border-bottom-right-radius: 5px;
  margin-bottom: 8px;
}

.filtered-story-title {
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 2px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 1 0 auto;
}

.filtered-story-author-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.filtered-story-author {
  font-size: 0.7rem;
  font-weight: 400;
  margin-bottom: 8px;
  margin-top: 6px;
  color: var(--color-white-soft);
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.filtered-story-author-verification {
  height: 0.9rem;
  width: 0.9rem;
  margin-bottom: 2px;
  margin-left: 1vw;
}

.filtered-story-stats {
  display: flex;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
}

.filtered-story-comments,
.filtered-story-likes,
.prompt-comments,
.prompt-likes {
  line-height: 1.5;
  padding-left: 1.75em;
  padding-right: 0.25em;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}

.filtered-story-label-container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 0;
  left: 0;
}

.filtered-story-label {
  border-radius: 8px;
  background-color: var(--color-primary);
  color: black;
  text-align: center;
  position: absolute;
  font-size: 3.5vw;
  font-weight: 700;
  top: -2vw;
  padding: 0px 8px 0px 8px;
}

.filtered-story-comments {
  background-image: url('assets/img/ui/icon-comment-24px.svg');
  margin-right: 2.5vw;
}

.filtered-story-likes {
  background-image: url('assets/img/ui/icon-favorite_border-24px.svg');
}
.filtered-story-likes.hide {
  display: none;
}
.filtered-popup-container {
  color: var(--color-black);
}

.filtered-loading {
  text-align: center;
  margin: 32px;
  font-weight: 700;
  font-size: 19px;
}

.filtered-item-full-row {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}

.filtered-create-button {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46vw;
  margin: 0 auto;
  padding: 4vw 2vw;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background: var(--color-primary);
  border-radius: 50px;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4)
}

.filtered-create-button-img {
  height: 18px;
  margin-right: 5px;
}


div.filteredTopLabel {
  display: inline-block;
  position: relative;
  height: 24vw;
  width: 20px;
  transform-origin: bottom center;
  font: 2vw Monaco, MonoSpace;
  color: #fff;
  opacity: 0;
}

div.filteredBottomLabel {
  display: inline-block;
  position: absolute;
  bottom: 0;
  font: 3vw Monaco, MonoSpace;
  color: #fff;
  opacity: 0
}



.filtered-use-this-prompt {
  position: absolute;
  height: 14vw;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin-bottom: 5vw;
  padding: 0px 4vw 0px 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14vw;
  font-size: 3.7vw;
  white-space: nowrap;
}

.filtered-use-this-prompt-icon {
  height: 5vw;
  width: 5vw;
  margin-right: 2vw;
}

.prompt-header {
  position: relative;
  padding: 5vw 5vw 3vw 5vw;
  border-bottom: solid 5px rgba(255,255,255,0.1);
}
.prompt-story {
  display: grid;
  grid-template-columns: 30vw 1fr;
  grid-gap: 3vw;
  pointer-events: none;
}
.prompt-story-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: rgba(255, 255, 255, 0.8);
  font-size: 3.5vw;
  padding: 3vw 0px;
  pointer-events: none;
}
.prompt-author,
.prompt-comments,
.prompt-likes {
  color: rgba(255, 255, 255, 0.8);
  font-size: 3.5vw;
}
.prompt-title {
  color: var(--color-highlight-light);
  font-size: 5vw;
  font-weight: bold;
}
.prompt-author-name {
  /*width: 55vw;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-title,
.prompt-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  pointer-events: auto;
}
.prompt-counts {
  display: flex;
  pointer-events: auto;
}
.prompt-comments{
  background-image: url("assets/img/ui/icon-comment-gray.svg")
}
.prompt-likes{
  background-image: url("assets/img/ui/icon-favorite-gray.svg")
}
.prompt-likes.hide{
  display: none;
}

.prompt-author-list {
  margin-top: 2vw;
}
.prompt-author-group{
  display: flex;
  flex-direction: column;
  padding: 2vw 0;
  border-bottom: solid 1px rgba(255,255,255,0.2);
}
.prompt-author-subscribe-button{
    height: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8vw;
  font-size: 3.7vw;
  white-space: nowrap;
  width: 33%;
  margin: auto 2vw auto 3vw;
}
.prompt-author-subscribe-text{
  margin-left: 1vw;
}

.prompt-author-item {
  display: grid;
  grid-template-columns: 1fr 8vw;
  /* grid-template-columns: 14vw 1fr 8vw; */
  height: 14vw;
  /* padding: 2vw 0;
  border-bottom: solid 1px rgba(255,255,255,0.2); */
}
.prompt-author-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.prompt-author-name {
  margin: auto 2vw auto 3vw;
  font-size: 4.5vw;
  font-weight: bold;
}
.prompt-author-arrow {
  margin: auto 0 auto auto;
}
.prompt-share-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 13vw;
  width: 13vw;
  background-image: url("assets/img/ui/icon-share-episode.svg");
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
}

.bell-filled{
  background-image: url('assets/img/ui/bell_filled.svg');
  width:24px;
  height:24px;
}
.bell-outlined{
  background-image: url('assets/img/ui/bell_outlined.svg');
  width:24px;
  height:24px;
}

.gray{
  color: gray;
  border: solid 1px gray;
}
.peach{
  color:  var(--color-primary);
  border: solid 1px var(--color-primary);
}

.subscribe-btn-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.search-screen {
  font: var(--font-body);
  height: 100%;
  background: var(--color-background);
  color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-flow: column;
}
.search-container {
  /* height: 100%; */
}
.search-header {
  top: 0;
  display: flex;
  height: 48px;
  background: var(--color-background-card);
}
.search-header-back {
  width: 48px;
  background: url("assets/img/ui/icon-arrow-back.svg") center/24px no-repeat;
}
.search-header-title {
  width: calc(100vw - 96px);
  margin: auto 0;
  color: var(--color-primary);
  font-size: 5vw;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-bar-container {
  display: flex;
  margin: 3vw;
}
.search-bar-container > input {
  width: 100%;
  padding: 2vw 2vw 2vw 10vw;
  font: var(--font-body2);
}
input[type="search"] {
  background: url("assets/design-library/ui/search.svg") 3vw/5vw no-repeat, var(--color-input-search);
  border-radius: 40px;
}
input[type="search"]::placeholder {
  color: var(--color-desat-light);
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 2em;
  width: 2em;
  background: url("assets/img/ui/close-24px.svg") no-repeat 50% 50%;
  background-size: 65%;
  opacity: 0;
  pointer-events: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
}

body.ios.keyboard-visible .tag-list-container {
  padding-bottom: var(--keyboard-height);
}
.tag-list-container {
  height: calc(100dvh - 6rem - 2em - 6vw - 7.5vh - var(--safe-area-top-bottom-custom, 0px));
}
.tag-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100%;
  margin: 0 5vw;
  padding-top: 5vw;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.tag-list-item {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  text-align: center;
  position: relative;
}
.tag-icon {
  height: calc(25vw * 1.36);
  width: 25vw;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 5px;
  background-position: center;
  margin: auto auto;
}
.tag-list-title {
  /* margin: 2vw 0 5vw 0; */
  margin: auto auto;
  color: var(--color-primary);
  max-width: 25vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.results-container {
  /* max-height: calc(100% - 2em - 6vw); */
  /* overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; */
}
.search-results-list {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
body.ios.keyboard-visible .search-results-list {
  margin: 3vw 0 0 0;
  padding-bottom: var(--keyboard-height);
}
.search-result-item {
  display: grid;
  grid-template-columns: 27vw 1fr;
  /* height: 25vw; */
  margin-bottom: 1px;
  border-top: 1px solid var(--color-gray-light);;
}
.search-result-item.empty {
  border-top: none;
  margin-bottom: 0;
}
.tag-result-item {
  display: grid;
  grid-template-columns: 27vw 1fr;
  height: 25vw;
  border-top: 1px solid var(--color-gray-light);;
  padding-bottom: 3vw;
  border-top: 1px solid var(--color-gray-light);
}
.tag-result-item.search-result-item-header {
  border-bottom: 1px solid var(--color-gray-light);
}
body.keyboard-visible .search-result-item.empty {
  display: none;
}
.search-result-story-image {
  /* height: 25vw; */
  height: calc(25vw * 1.36);
  width: 25vw;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto auto;
  background-position: center;
}
.search-result-story-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  line-height: 5vw;
}
.search-result-story-info > div {
  max-width: 71vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-story-title {
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}
.search-result-story-title-long {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
}
.search-result-story-author {
  color: var(--color-gray-light);
}

.search-result-story-data {
  display: flex;
}
.search-result-story-likes,
.search-result-story-comments,
.search-result-description,
.search-result-story-subscription {
  color: var(--color-primary);
  line-height: 1.5;
  padding-left: 1.75em;
  padding-right: 0.25em;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}
.search-result-story-likes {
  background-image: url('assets/img/ui/icon-favorite_border-24px.svg');
  margin-right: 2vw;
}
.search-result-story-likes.hide {
  display: none;
}
.search-result-story-comments {
  background-image: url('assets/img/ui/icon-comment-24px.svg');
  margin-right: 10px;
}
.search-result-story-subscription {
  background-image: url('assets/img/ui/bell_filled.svg');
  height: 24px;
  width: 24px;
}
.search-result-description {
  background-image: url('assets/img/ui/icon-book-active.svg');
  color: var(--color-gray-light);
  font-style: italic;
}
.search-result-item-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10vw;
  color: var(--color-gray-light);
}
.category-heading {
    display: flex;
}
.category-count {
  margin: 0 1vw 0 3vw;
  color: #FFF;
}
.tag-heading {
  margin: 2vw 1vw 0 3vw;
}
.no-search-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(90% - 3rem - 16vw - 48px);
  margin: 0 5vw;
  color: #FFF;
  font-size: 16px;
}
.search-spinner {
  position: absolute;
  top: 25%;
}

.search-button-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #000;
  font-size: 4vw;
  text-align: center;
  word-spacing: 5px;
}

.search-button-container [class$="-button"] {
  width: 45vw;
  padding: 3vw 0;
  margin: 8px 0;
  border-radius: 2.13vw;
  position: relative;
}
.search-advanced-creation-button {
  background: #F3BAE3;
  color: #1D1C1C;
}
.search-advanced-how-to-make-games-button {
  background: #FF6CA3;
  color: #FFFFFF;
}


/* Promotion */
.search-promotion-container {
  padding: 2.95vh 4.27vw;
  background-color: #1C1C1C;
  background-image:
    linear-gradient(0deg,
    rgba(28,28,28,1),
    transparent,
    transparent,
    transparent,
    rgba(28,28,28,1)),
    url("assets/img/backgrounds/promo-bg-asra.jpg");
  background-size: cover;
}

.search-promotion-header {
  text-align: center;
  font: 4.26vw Lato;
  line-height: 140%;
  font-weight: 700;
}

.search-promotion-subheader {
  font: 4.26vw Lato;
 }

.search-promotion-link {
  font: 5.33vw Lato;
  color: var(--color-primary);
}

.search-promotion-body {
  text-align: left;
  font: 3.2vw Lato;
  line-height: 180%;
  margin: 8px 48px;
}

.search-promotion-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-promotion-body ul li:before {
  content: "\2022";
  color: var(--color-primary);
  margin-right: 8px;
  padding-bottom: 10px;
  font: 4.5vw Lato;
}

/* ------------------------------ */
/* ---- PROPMT SEARCH SCREEN ---- */
/* ------------------------------ */

.prompt-result-item {
  display: grid;
  grid-template-columns: 30vw 1fr;
  grid-template-rows: 1fr 10vw;
  height: 43vw;
  margin-bottom: 1px;
  border-top: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
}
.prompt-result-image {
  grid-row: span 2;
  height: calc(30vw * 1.36);
  width: 30vw;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto auto;
  background-position: center;
}
.prompt-result-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 64vw;
  margin: 1vw 3vw 0 3vw;
  color: var(--color-gray-light);
  font-size: 3.2vw;
}
.prompt-result-title {
  color: #FFF;
  font-weight: bold;
  font-size: 3.75vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}
.prompt-result-author {
  margin: 1vw 0 1.5vw 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
  color: #CCC;
}
.prompt-result-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  font-size: 3.0vw;
  max-height: 15vw;
  line-height: 3.8vw;
}
.search-result-story-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1vw 2vw 3vw;
  padding-top: 2vw;
}
.prompt-result-comments {
  background-image: url('assets/img/ui/icon-comment-24px-peach.svg');
  padding-left: 8vw;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
}
.prompt-result-create-button {
  background-image: url('assets/img/buttons/icont-arrow-right-peach.svg');
  padding-right: 7vw;
  color: var(--color-primary);
  font-size: 4.5vw;
  font-weight: bold;
  background-position: right;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
}

.prompt-list,
.prompt-results {
  position: relative;
  height: calc(100dvh - 6rem - 6vw - 2em - 10vw - var(--safe-area-top-bottom-custom, 0px));
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  align-content: start;
}
.prompt-screen-message {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100dvh - 6rem - 6vw - 2em - 10vw - var(--safe-area-top-bottom-custom, 0px));
  width: 100%;
  margin-top: 15vw;
  padding: 0 10vw;
}
.prompt-screen-message > .heading {
  font-size: 4.5vw;
  text-align: center;
}

/* ///////////////////////// */
/* ---- SCHEDULE SCREEN ---- */
/* ///////////////////////// */
.schedule-screen {
  background: var(--color-interim-dark);
}
.schedule-container {
  position: relative;
  height: calc(100dvh - var(--app-footer-height) - var(--safe-area-top-bottom-custom, 0px));
  color: #FFF;
  background: var(--color-interim-dark);
  pointer-events: all;
}
.schedule-container-no-background {
  background: transparent;
  pointer-events: none;
}

.schedule-header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  background: var(--color-interim-dark);
  border-bottom: 1px solid var(--color-desat-dark);
  padding: 5vw 0;
  gap: 3vw;
  pointer-events: all;
}
.schedule-header-no-background {
  background: transparent;
  border-bottom: none;
}
.schedule-header-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2vw;
  font-size: 5vw;
  font-weight: normal;
}
.schedule-header-item-selected {
  font-weight: bold;
}
.schedule-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 100%; */
}
.schedule-header-title > img {
  height: 8vw;
}

.schedule-create-button {
  color: black;
  text-align: center;
  text-transform: uppercase;
}

.schedule-list {
  --live-sessions-strip-height: 30vw;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: calc(100dvh - 15vw - var(--live-sessions-strip-height) - var(--safe-area-top-bottom-custom, 0px));
}

.schedule-filter {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40vw;
  width: 100%;
  padding-top: 7vw;
  color: var(--color-white);
  background: var(--color-background-v2);
  border-radius: 25px 25px 0 0;
}
.schedule-filter > div {
  font-size: 5vw;
  font-weight: normal;
  margin-bottom: 4vw;
  margin-right: 8vw;
  padding-left: 8vw;
}
.schedule-filter-close-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 10vw;
  width: 10vw;
  padding: 2vw 3vw 2vw 0;
}
.schedule-invite-contacts-button {
  position: fixed !important;
  left: 2vw !important;
  justify-content: center;
  align-items: center;
  width: calc((100vw - 3rem)/4);
}
.schedule-invite-contacts-button > .social_button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8rem;
  width: 90%;
  color: #FFF;
  font-size: 3vw;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}
.schedule-invite-contacts-button > .social_button img {
  height: 5.6vw;
}
.active-filter {
  color: var(--color-highlight-light);
  font-weight: bold;
  background-image: url("assets/img/buttons/arrow-right-highlight.svg");
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
}

.schedule-overlay {
  position: absolute;
  top: 0;
  height: calc(100dvh + var(--safe-area-top-bottom-custom, 0px));
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
}

.schedule-no-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100dvh - 3rem - var(--safe-area-top-bottom-custom, 0px));
  font-size: 4vw;
  text-align: center;
}
.schedule-no-events > img {
  height: 10vw;
  width: 10vw;
  margin-bottom: 4vw;
}

.schedule-header-live-streams {
  display: flex;
  align-items: center;
  gap: 1.2vw;
}
.schedule-header-live-streams-count {
  background-color: var(--color-pop);
  width: 5vw;
  height: 5vw;
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-11-px);
}

/* //////////////////// */
/* ---- EVENT ITEM ---- */
/* //////////////////// */

.event-item {
  display: block;
  position: relative;
  padding: 0 3vw 4vw 3vw;
  font-size: 4vw;
  font-weight: normal;
  border-bottom: solid 1px #AAA;
}
.event-item-info {
  display: grid;
  grid-template-columns: 25vw 1fr;
  grid-template-rows: 1fr 10vw;
  grid-gap: 3vw;
  position: relative;
  font-size: 4vw;
  font-weight: normal;
}
.event-item-date-time {
  margin-bottom: 1vw;
  color: var(--color-gray-light);
  pointer-events: none;
}

.event-item-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.event-item-share-button {
  width: 6vw;
  height: 6vw;
  margin-left: 2vw;
  padding: 4vw 5vw 4vw 4vw;
  background-image: url("assets/img/ui/icon-share-episode.svg");
  background-position: right;
  background-repeat: no-repeat;
  opacity: 0.6;
}
.event-item-edit-button {
  color: var(--color-highlight-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.event-item-image,
.event-item-host-avatar {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.event-item-event-title,
.event-item-story-title,
.event-item-episode {
  width: 66vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.event-item-event-title {
  margin-bottom: 2vw;
  font-size: 4.5vw;
  font-weight: bold;
  width: 100%;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  width: 100%;
}

.event-item-host-container {
  display: grid;
  grid-template-columns: 1fr 22vw;
  grid-template-rows: 7vw 1fr;
  margin-bottom: 6vw;
}
.event-item-host-info {
  display: flex;
  align-items: center;
}
.event-item-host-avatar {
  height: 8vw;
  width: 8vw;
  margin-right: 2vw;
  border-radius: 50%;
  background-size: cover;
}
.event-item-host-name {
  width: 34vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.event-item-follow-button {
  width: 85%;
  margin: auto;
  padding: 2vw;
  font-size: 3vw;
  text-align: center;
  border-radius: 25px;
}
.event-item-follow-button.disabled,
.event-item-mp-button.disabled {
  color: var(--color-gray-mid);
  background: var(--color-background-card);
  border: solid 1px #858585;
}

.event-item-story-title {
  margin-bottom: 1vw;
  font-weight: bold;
}
.event-item-episode {
  margin-bottom: 3vw;
}

.event-item-attendees {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-highlight-light);
}
.event-item-attendees-count {
  margin-left: 2vw;
  font-size: 3.75vw;
}
.event-item-attendees-items {
  height: 8vw;
  padding: 0 2vw;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-item-attendees-icon {
  height: 6.0vw;
}
.event-item-live-animation {
  height: 8vw;
  padding: 0 2vw;
  border: 2px solid rgb(165,206,229);
  border-top: 0;
  border-bottom: 0;
  border-radius: 8vw;
}
.event-item-live-animation::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  border-radius: 8vw;
  border: 1px solid rgb(176,170,255);
  border-top: 0;
  border-bottom: 0;
}
.event-item-live-animation::after {
  content: '';
  position: absolute;
  width: calc(100% + 3px);
  height: calc(7vw + 3px);
  border-radius: 8vw;
  border: 2px solid rgba(151,247,199, 0.75);
  border-top: 0;
  border-bottom: 0;
  animation: 1.7s ease-out 0s infinite normal none running ls-circle-animate;
}

.event-item-notify-button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* grid-area: 2 / 1 / 3 / 3; */
  width: 34vw;
  margin: auto auto auto 2vw;
  padding: 2vw;
  color: var(--color-black);
  font-size: 3.75vw;
  border-radius: 25px;
  background: var(--color-white);
}
.event-item-notify-button.disabled {
  background: var(--color-highlight-muted);
  color: var(--color-white);
}

.event-item-mp-button {
  /* grid-area: 2 / 1 / 3 / 3; */
  width: 34vw;
  margin: auto auto auto 2vw;
  padding: 2vw;
  color: #000;
  font-size: 3.75vw;
  text-align: center;
  background: var(--gradient-multiplayer);
  border-radius: 25px;
}

.event-list-header {
  padding: 3vw;
  font-size: 4.5vw;
  border-bottom: solid 1px #AAA;
  /* border-top: solid 1px #AAA; */
  background: var(--color-background-v2);
}

.event-item-heading {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2vw 8vw 2vw 2vw;
  color: #000;
  font-size: 3.5vw;
  font-weight: bold;
  background: linear-gradient(90deg, #b0aaff, 80%, transparent);
}
.event-item.pinned-event {
  background: linear-gradient(135deg, #2C2C2C, 85%, #b0aaff);
}
.pinned-event .event-item-date-time {
  position: relative;
  top: -2vw;
  margin-bottom: 5vw;
  color: #FFF;
  font-size: 4.5vw;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.pinned-event .event-item-event-title {
  font-weight: normal;
}

/* /////////////////////////// */
/* ---- CREATE EVENT VIEW ---- */
/* /////////////////////////// */
.create-event {
  width: 100vw;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  box-sizing: border-box;
  padding: 0;
  margin-top: var(--safe-area-top-custom, 0px);
  margin-bottom: var(--safe-area-bottom-custom, 0px);
  font-size: 5vw;
  font-weight: normal;
}
.create-event .disabled,
.story-select .disabled {
  pointer-events: none;
}

.create-event-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3rem;
  margin-bottom: 4vh;
  text-align: center;
  font-size: 5.5vw;
  font-weight: bold;
}
.create-event-header-text {
  text-align: center;
  width: calc(100% - 6rem);
  font-size: 5.5vw;
}
.create-event-admin-header {
  color: var(--color-pop);
}
.create-event-back-button {
  width: 3rem;
  height: 3rem;
  background: url('assets/img/ui/icon-arrow-back.svg') center/24px no-repeat;
}
.create-event-admin-button {
  height: 3rem;
  width: 3rem;
  background: url('assets/img/buttons/icon-admin-gray.svg');
  background-size: 9vw;
  background-position: center;
  background-repeat: no-repeat;
}
.create-event-admin-button.active {
  background: url('assets/img/buttons/icon-admin-red.svg');
  background-size: 9vw;
  background-position: center;
  background-repeat: no-repeat;
}

.create-event-content {
  padding: 0 5vw;
}

input.create-event-title {
  width: 100%;
  margin-bottom: 7vh;
  padding-bottom: 3vw;
  border-bottom: solid 1px #858585;
}

.create-event-host {
  margin-bottom: 5vh;
}
.create-event-host-info {
  display: flex;
}
.create-event-host-avatar {
  height: 10vw;
  width: 10vw;
  margin-right: 3vw;
  border-radius: 50%;
  border: 1px solid #fff;
  background-repeat: no-repeat;
  background-size: contain;
}
.create-event-host-email {
  width: 77vw;
  padding-bottom: 2vw;
  border-bottom: solid 1px #fff;
}
.create-event-host-email.invalid {
  color: var(--color-red);
}
.create-event-host-invalid {
  margin-top: 2vw;
  color:var(--color-red);
  font-size: 4vw;
  text-align: center;
}

.create-event-date,
.create-event-time,
.create-event-story-search,
.story-select-story-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5vh;
  box-sizing: content-box;
}
.create-event-story-search
.story-select-story-search {
  margin-bottom: 4vh;
}
.date-input,
.time-input {
  text-align: right;
}
.date-input::placeholder,
.time-input::placeholder {
  color: var(--color-highlight-light);
  opacity: 1;
}

.create-event-story,
.story-select-story {
  background: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.create-event-story-search > img,
.story-select-story-search > img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.create-event-story-label,
.create-event-episode-label,
.story-select-story-label,
.story-select-episode-label {
  font-size: 4vw;
  color: #AAAAAA;
}
.create-event-episode-heading,
.story-select-episode-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3vw;
}
.create-event-episode-heading > img,
.story-select-episode-heading > img {
  height: 10vw;
}
.create-event-episode,
.story-select-episode {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  width: 100%;
}
.create-event-episode-dropdown,
.story-select-episode-dropdown {
  max-height: 18vh;
  padding: 0;
  overflow: scroll;
  border: solid 1px #2c2c2c;
  border-top: none;
}
.create-event-episode-heading.disabled {
  background: transparent;
}
.event-episode-item-container {
  display: flex;
}
.event-episode-index {
  text-align: center;
  align-self: center;
  font-size: 5vw;
  width: 8%;
}
.event-episode-item-container:nth-of-type(odd) {
  background: var(--color-background-v2);
}
.event-episode-item-container:nth-of-type(even) {
  background: var(--background-color);
}
.event-episode-item-container.disabled {
  color: #858585;
  pointer-events: none;
}
.create-event-pinned,
.create-event-hidden {
  display: flex;
  align-items: center;
}
.create-event-pinned-box,
.create-event-hidden-box {
  background-image: url("assets/img/ui/check_box_outline_blank-24px.svg");
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
}
.create-event-pinned-box.checked,
.create-event-hidden-box.checked {
  background-image: url("assets/img/ui/check_box_highlight.svg");
}

.event-episode-item {
  padding: 1.5vw 3vw;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  line-height: 6.5vw;
  width: 92%;
}
.create-event-buttons {
  position: absolute;
  bottom: calc(2vh + 3vw + var(--safe-area-bottom-custom, 0px));
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90vw;
  box-sizing: content-box;
}
.create-event-save-button,
.create-event-delete-button,
.story-select-save-button {
  width: 20vw;
  padding: 2vw;
  font: var(--font-button);
  text-align: center;
  border-radius: 8px;
}
.create-event-delete-button {
  color: var(--color-black);
  background: var(--color-pop);
}

/* /////////////////////////// */
/* ---- STORY SEARCH VIEW ---- */
/* /////////////////////////// */
.story-search-container {
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  margin-top: var(--safe-area-top-custom, 0px);
  margin-bottom: var(--safe-area-bottom-custom, 0px);
}
.story-search-header {
  height: 3rem;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.story-search-header-text {
  text-align: center;
  width: calc(100% - 6rem);
  font-size: 5.5vw;
}
.story-search-back-button {
  width: 3rem;
  height: 3rem;
  background: url('assets/img/ui/icon-arrow-back.svg') center/24px no-repeat;
}

.story-search-results-list {
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100dvh - 3rem - 6vw - 32px - var(--safe-area-top-bottom-custom, 0px));
}
.story-search-select-button {
  position: absolute;
  bottom: 3vw;
  right: 3vw;
  padding: 2vw;
  color: var(--color-white);
  font-weight: normal;
  background: var(--color-highlight);
  border-radius: 10px;
}
.results-container-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 6rem - 6vw - 32px);
  font-size: 4vw;
}
.results-container-placeholder > img {
  height: 8vw;
  width: 8vw;
  margin-bottom: 3vw;
}


@keyframes open-filter-panel {
  from {
    bottom: -40vw;
  }
  to {
    bottom: 0;
  }
}
@keyframes close-filter-panel {
  from {
    bottom: 0;
  }
  to {
    bottom: -40vw;
  }
}
.open-filter-panel {
  animation: open-filter-panel;
  animation-duration: 0.5s;
  bottom: 0;
}
.close-filter-panel {
  animation: close-filter-panel;
  animation-duration: 0.5s;
  bottom: -40vw;
}

@keyframes highlight-event {
  from {
    background-color: rgba(176, 170, 255, 0.4);
  }
  to {
    background-color: rgba(176, 170, 255, 0);
  }
}

.highlight-event {
  animation: highlight-event;
  animation-duration: 1.5s;
  background-color: rgba(176, 170, 255, 0);
}

/* /////////////////////////// */
/* ---- STORY SELECT VIEW ---- */
/* /////////////////////////// */
.story-select {
  width: 100vw;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  box-sizing: border-box;
  padding: 0 5vw;
  font-size: 5vw;
  font-weight: normal;
}

.story-select-heading {
  margin-bottom: 10vw;
  text-align: center;
  font-size: 6vw;
  font-weight: bold;
}
.story-select-save-button {
  position: absolute;
  left: 35vw;
  bottom: calc(8vh + var(--safe-area-bottom-custom, 0px));;
  width: 30vw;
}

.story-select-video-area {
  margin: calc(10vh - 48px) 8vw 5vw 8vw;
  border-top: solid 1px #858585;
  border-bottom: solid 1px #858585;
}
.story-search-video-area {
  margin: calc(10vh - 3rem) 13vw 5vw 13vw;
  border-top: solid 1px #858585;
  border-bottom: solid 1px #858585;
}



/*////////////////////////////////////////*/
/* ---- DEFAULT DATE AND TIME PICKER ---- */
/*////////////////////////////////////////*/

/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #000;
  position: absolute;
  z-index: 10000;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
}
/**
 * The picker input element.
 */
.picker__input {
  cursor: default;
}
/**
 * When the picker is opened, the input element is “activated”.
 */
.picker__input.picker__input--active {
  border-color: #0089ec;
}
/**
 * The holder is the only “scrollable” top-level container element.
 */
.picker__holder {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -ms-transform: translateY(100%);
      transform: translateY(100%);
}
/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
  position: fixed;
  transition: background 0.15s ease-out, transform 0s 0.15s;
  -webkit-backface-visibility: hidden;
}
/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
  position: absolute;
  margin: 0 auto;
  min-width: 256px;
  max-width: 666px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  transition: all 0.15s ease-out;
}
@media (min-height: 33.875em) {
  .picker__frame {
    overflow: visible;
    top: auto;
    bottom: -100%;
    max-height: 80%;
  }
}
@media (min-height: 40.125em) {
  .picker__frame {
    margin-bottom: 7.5%;
  }
}
/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
  display: table;
  width: 100%;
  height: 100%;
}
@media (min-height: 33.875em) {
  .picker__wrap {
    display: block;
  }
}
/**
 * The box contains all the picker contents.
 */
.picker__box {
  background: #fff;
  display: table-cell;
  vertical-align: middle;
}
@media (min-height: 26.5em) {
  .picker__box {
    font-size: 1.25em;
  }
}
@media (min-height: 33.875em) {
  .picker__box {
    display: block;
    font-size: 1.33em;
    border: 1px solid #777;
    border-top-color: #898989;
    border-bottom-width: 0;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
  }
}
@media (min-height: 40.125em) {
  .picker__box {
    font-size: 1.5em;
    border-bottom-width: 1px;
    border-radius: 5px;
  }
}
/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
  -ms-transform: translateY(0);
      transform: translateY(0);
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
  zoom: 1;
  background: rgba(0, 0, 0, 0.32);
  transition: background 0.15s ease-out;
}
.picker--opened .picker__frame {
  -ms-transform: translateY(0);
      transform: translateY(0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}
@media (min-height: 33.875em) {
  .picker--opened .picker__frame {
    top: auto;
    bottom: 0;
  }
}

/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
  padding: 0 1em;
}
/**
 * The header containing the month and year stuff.
 */
.picker__header {
  text-align: center;
  position: relative;
  margin-top: .75em;
}
/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
  font-weight: 500;
  display: inline-block;
  margin-left: .25em;
  margin-right: .25em;
}
.picker__year {
  color: #999;
  font-size: .8em;
  font-style: italic;
}
/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
  border: 1px solid #b7b7b7;
  height: 2em;
  padding: .5em;
  margin-left: .25em;
  margin-right: .25em;
}
@media (min-width: 24.5em) {
  .picker__select--month,
  .picker__select--year {
    margin-top: -0.5em;
  }
}
.picker__select--month {
  width: 35%;
}
.picker__select--year {
  width: 22.5%;
}
.picker__select--month:focus,
.picker__select--year:focus {
  border-color: #0089ec;
}
/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
  position: absolute;
  padding: .5em 1.25em;
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  top: -0.25em;
}
@media (min-width: 24.5em) {
  .picker__nav--prev,
  .picker__nav--next {
    top: -0.33em;
  }
}
.picker__nav--prev {
  left: -1em;
  padding-right: 1.25em;
}
@media (min-width: 24.5em) {
  .picker__nav--prev {
    padding-right: 1.5em;
  }
}
.picker__nav--next {
  right: -1em;
  padding-left: 1.25em;
}
@media (min-width: 24.5em) {
  .picker__nav--next {
    padding-left: 1.5em;
  }
}
.picker__nav--prev:before,
.picker__nav--next:before {
  content: " ";
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  border-right: 0.75em solid #000;
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
}
.picker__nav--next:before {
  border-right: 0;
  border-left: 0.75em solid #000;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
}
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
  cursor: default;
  background: none;
  border-right-color: #f5f5f5;
  border-left-color: #f5f5f5;
}
/**
 * The calendar table of dates
 */
.picker__table {
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: inherit;
  width: 100%;
  margin-top: .75em;
  margin-bottom: .5em;
}
@media (min-height: 33.875em) {
  .picker__table {
    margin-bottom: .75em;
  }
}
.picker__table td {
  margin: 0;
  padding: 0;
}
/**
 * The weekday labels
 */
.picker__weekday {
  width: 14.285714286%;
  font-size: .75em;
  padding-bottom: .25em;
  color: #999;
  font-weight: 500;
  /* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
  .picker__weekday {
    padding-bottom: .5em;
  }
}
/**
 * The days on the calendar
 */
.picker__day {
  padding: .3125em 0;
  font-weight: 200;
  border: 1px solid transparent;
}
.picker__day--today {
  position: relative;
}
.picker__day--today:before {
  content: " ";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 0.5em solid #0059bc;
  border-left: .5em solid transparent;
}
.picker__day--disabled:before {
  border-top-color: #aaa;
}
.picker__day--outfocus {
  color: #ddd;
}
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
}
.picker__day--highlighted {
  border-color: #0089ec;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: #0089ec;
  color: #fff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #ddd;
  cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
  background: #bbb;
}
/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
  text-align: center;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
  border: 1px solid #fff;
  background: #fff;
  font-size: .8em;
  padding: .66em 0;
  font-weight: bold;
  width: 33%;
  display: inline-block;
  vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
  border-bottom-color: #b1dcfb;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
  background: #b1dcfb;
  border-color: #0089ec;
  outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
  position: relative;
  display: inline-block;
  height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
  content: " ";
  margin-right: .45em;
}
.picker__button--today:before {
  top: -0.05em;
  width: 0;
  border-top: 0.66em solid #0059bc;
  border-left: .66em solid transparent;
}
.picker__button--clear:before {
  top: -0.25em;
  width: .66em;
  border-top: 3px solid #e20;
}
.picker__button--close:before {
  content: "\D7";
  top: -0.1em;
  vertical-align: top;
  font-size: 1.1em;
  margin-right: .35em;
  color: #777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #ddd;
  cursor: default;
}
.picker__button--today[disabled]:before {
  border-top-color: #aaa;
}

/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */
/**
 * The list of times.
 */
.picker__list {
  list-style: none;
  padding: 0.75em 0 4.2em;
  margin: 0;
}
/**
 * The times on the clock.
 */
.picker__list-item {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  margin-bottom: -1px;
  position: relative;
  background: #fff;
  padding: .75em 1.25em;
}
@media (min-height: 46.75em) {
  .picker__list-item {
    padding: .5em 1em;
  }
}
/* Hovered time */
.picker__list-item:hover {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
  border-color: #0089ec;
  z-index: 10;
}
/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
  border-color: #0089ec;
  z-index: 10;
}
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
}
/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
  background: #0089ec;
  color: #fff;
  z-index: 10;
}
/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #ddd;
  cursor: default;
  border-color: #ddd;
  z-index: auto;
}
/**
 * The clear button
 */
.picker--time .picker__button--clear {
  display: block;
  width: 80%;
  margin: 1em auto 0;
  padding: 1em 1.25em;
  background: none;
  border: 0;
  font-weight: 500;
  font-size: .67em;
  text-align: center;
  text-transform: uppercase;
  color: #666;
}
.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
  color: #000;
  background: #b1dcfb;
  background: #e20;
  border-color: #e20;
  cursor: pointer;
  color: #fff;
  outline: none;
}
.picker--time .picker__button--clear:before {
  top: -0.25em;
  color: #666;
  font-size: 1.25em;
  font-weight: bold;
}
.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
  color: #fff;
  border-color: #fff;
}

/* ==========================================================================
   $DEFAULT-TIME-PICKER
   ========================================================================== */
/**
 * The frame the bounds the time picker.
 */
.picker--time .picker__frame {
  min-width: 256px;
  max-width: 320px;
}
/**
 * The picker box.
 */
.picker--time .picker__box {
  font-size: 1em;
  background: #f2f2f2;
  padding: 0;
}
@media (min-height: 40.125em) {
  .picker--time .picker__box {
    margin-bottom: 5em;
  }
}

/* ==========================================================================
   Live Session Strip
   ========================================================================== */
.schedule-live-session-strip {
  position: relative;
}

.view-manager-popup-menu {
  width: 100vw;
  height: 50dvh;
  box-sizing: border-box;
  padding: 0;
  margin-top: var(--safe-area-top-custom, 0px);
  margin-bottom: var(--safe-area-bottom-custom, 0px);
  font-size: 5vw;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  position: fixed;
  top: calc(50dvh - var(--safe-area-top-custom, 0px));
  left: 0;
  padding-bottom: calc(2vh + var(--safe-area-bottom-custom, 0px));
}

.view-manager-popup-menu.fullscreen {
  top: 0;
  height: 100dvh;
  margin-top: 0;
  padding-top: var(--safe-area-top-custom, 0px);
  padding-bottom: calc(13px + var(--safe-area-bottom-custom, 0px));
}

.view-manager-popup-menu.video-area {
  top: 20dvh;
  height: calc(80dvh - var(--safe-area-bottom-custom, 0px));
}

.view-manager-popup-menu > .header {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3rem;
  margin-bottom: 8.5vw;
  text-align: center;
  font-size: 5.5vw;
  font-weight: bold;
  border-top: solid 1px var(--color-background);
}

.view-manager-popup-menu .header .back-button {
  width: 3rem;
  height: 3rem;
  font-family: "Material Icons";
  font-size: 6vw;
  line-height: 3rem;
}

.view-manager-popup-menu .header .label {
  text-align: center;
  width: calc(100% - 6rem);
  font-size: 5.5vw;
  padding: 0 1vmin 0 0;

  flex: 1 0 auto;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.view-manager-popup-menu .body {
  flex: 1 1 auto;
  padding: 0 5vw;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.view-manager-popup-menu .body ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.view-manager-popup-menu .body ul > li {
  display: flex;
  flex-direction: row;

  align-items: center;
  justify-content: flex-start;
  box-sizing: content-box;

  padding: 3vw 0;
  margin: 0;
  color: var(--color-white-soft);
}
.view-manager-popup-menu .body ul > li > .icon {
  pointer-events: inherit;
  font-family: "Material Icons";
  font-size: 6vw;
  width: 10vw;
  text-align: center;
}
.view-manager-popup-menu .body ul > li > .icon.emoji {
  font-family: inherit;
}
.view-manager-popup-menu .body ul > li > .icon.svg img{
  width: 6.5vw;
}
.view-manager-popup-menu .body ul > li > .icon.iconhidden {
  display: none;
}
.view-manager-popup-menu .body ul > li > .icon-dive {
  margin: 0 0 0 2vw;
  pointer-events: inherit;
  font-family: "Material Icons";
  font-size: 6vw;
}
.view-manager-popup-menu .body ul > li > .label {
  font-size: 5vw;
  flex: 1 1 auto;
}

.view-manager-popup-menu > button.cancel {
  background: var(--color-red) none;
  color: var(--color-black);
  font-size: 6vmin;
  height: 12vmin;
  width: min-content;
  border-radius: 6vmin;
  margin: 1vmin;
  padding: 2vmin 10vmin;
  align-self: center;
}

.view-manager-popup-menu-text-popup-top-header {
  font-size: 8vw;
  line-height: 9vw;
  font-weight: 700;
  margin: 0 0 8vw 0;
}
.view-manager-popup-menu-text-popup-header {
  font-size: 6vw;
  line-height: 8vw;
  font-weight: 700;
  margin: 6vw 0 4vw 0;
}
.view-manager-popup-menu-text-popup-content {
  font-size: 4vw;
  font-weight: normal;
  line-height: 5.5vw;
}
.view-manager-popup-menu-text-popup-content > p {
  padding: 0;
  margin: 0 0 2vw 0;
}
.view-manager-popup-menu-text-popup-content a {
  color: var(--color-primary);
}
.body .view-manager-popup-menu-text-popup-content ol {
  list-style-type: decimal;
  padding: 0 0 0 6vw;
  margin: 5vw 0 0 0;
}
.body .view-manager-popup-menu-text-popup-content ul {
  list-style-type: disc;
  padding: 0 0 0 6vw;
  margin: 5vw 0 0 0;
}
.body .view-manager-popup-menu-text-popup-content ol > li,
.body .view-manager-popup-menu-text-popup-content ul > li {
  display: list-item;
  padding: 0;
  margin: 0 0 4vw 0;
}
.body .view-manager-popup-menu-text-popup-content ol > li p,
.body .view-manager-popup-menu-text-popup-content ul > li p {
  padding: 0;
  margin: 0;
}

.view-manager-popup-menu-text-popup-button {
  height: 11vw;
  width: 80%;
  margin: 8vw auto;
  padding: 3vw;
  font-size: 3.5vw;
  text-align: center;
  background: var(--color-red);
  border-radius: 10px;
  pointer-events: all;
}

.chapter-results-popup {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.story-edit-button {
  background: var(--color-primary);
  color: white;
  border-radius: 6vw;
  width: 50vw;
  height: 11.5vw;
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: 600;
  font-size: 3.87vw;
  line-height: 3.87vw;

  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
}

.ending-button-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}

.ending-next-button,
.ending-chat-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14vw;
  width: 30vw;
  margin-top: 5vw;
  color: #000;
  font-size: 4vw;
  font-weight: normal;
  background-color: #F7A397;
  border-radius: 10px;
}

.ending-creator-image {
  height: 25vh;
  width: 25vh;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
}

.episode-end-creator-image {
  height: 26.133vw;
  width: 26.133vw;
  margin-right: 3vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

canvas.android-keyboard-open {
  bottom: unset;
  top: 0;
}

.episode-end-creator-image.default {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-light);
  font-size: 15vh;
  color: #fff;
}

.ending-creator-image.default {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-light);
  font-size: 15vh;
  color: #fff;
}

.ending-creator-name {
  width: 90vw;
  margin-top: 1vw;
  color: #fff;
  text-align: center;
  font-size: 5.5vw;
}

.ending-creator-profile-button,
.ending-follow-creator-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14vw;
  margin-top: 5vw;
  padding: 0 5vw;
  color: var(--color-black);
  font-size: 5vw;
  font-weight: normal;
  background: var(--gradient-primary);
  border-radius: 10px;
}

.ending-follow-creator-button {
  color: var(--color-primary);
  font-weight: bold;
  background: var(--color-black);
  border: 1px solid var(--color-primary);
}
.end-story-suggested-stories-list-container{
  margin-left: 2vw;
  margin-right: 2vw;
}

.end-story-suggested-stories-list::-webkit-scrollbar {
  display: none;
}

.end-story-suggested-stories-list {
  display: flex;
  flex-direction: row;
  column-gap: 2vw;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.single-player-end-flow {
  /* position: absolute; */
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  bottom: 0px;
}

.story-cover-background {
  position: absolute;
  height: 100%;
  left: 50vw;
  transform: translateX(-50%);
}

.story-cover-shim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #33375AB2;
  right: 0;
}


.absolute-share-button {
  position: absolute;
  top: 16vw;
  right: 4vw;
  z-index: 1;
}

.img-share-episode {
  height: 6.4vw;
  width: 6.4vw;
}

.absolute-comments-button {
  position: absolute;
  top: 26.4vw;
  right: 4vw;
  z-index: 1;
}

.comments-icon {
  width: 4.8vw;
  height: 4.8vw;
}

.absolute-comments-count {
  color: #FFF;
  text-align: center;
  font-family: Lato;
  font-size: 3.2vw;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.end-flow-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: var(--safe-area-top-custom, 0px);
  justify-content: flex-end;
  /* height: calc(100vh - var(--safe-area-top-bottom-custom, 0px)); */
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
  position: relative;
}

.over-cover-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-direction: column;
}

.episode-end-above-complete-text {
  color: #99A4FF;
  text-align: center;
  font-family: Lato;
  font-size: 4.533vw;
  font-style: normal;
  font-weight: 700;
  line-height: 5.6vw;
}

.tbc-text,
.season-complete-text {
  color: #FFF;
  font-family: Lato;
  font-size: 7.467vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

.story-end-main-section {
  background: white;
  display: flex;
  flex-direction: column;
}

.creator-follow-section {
  display: flex;
  flex-direction: row;
  padding: 4vw;
}

.author-right-side-info {
  display: flex;
  flex-direction: column;
  padding-right: 3.2vw;
  justify-content: space-around;
}

.episode-end-author-name, .story-end-followers, .follow-instructions-story-complete, .follow-instructions-story-ongoing, .more-games-text-prompt {
  font-family: Lato;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.episode-end-author-name {
  color: #0F111C;
  font-size: 5.6vw;
}

.story-end-followers {
  color: #80828E;
  font-size: 3.46vw;
  line-height: 4.5vw;
}

.lil-man, .check-mark {
  height: 3.2vw;
  width: 3.2vw;
}

.flex-shrink-container {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
}

.story-end-follow-button {
  width: 22vw;
  text-align: center;
  border-radius: .88vw;
  border: .21vw solid #6C74B4;
  align-items: flex-end;
  margin-bottom: 3vw;
  color: #6C74B4;
  font-family: Lato;
  font-size: 4.2vw;
  font-weight: 700;
  padding: .5vw;
}

.more-games-carousel-section {
  width: 100vw;
}

.more-games-text-prompt {
  color: #494B54;
  font-size: 4.533vw;
  font-weight: 700;
  line-height: 5.6vw;
  padding: 4vw;
}

.home-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-end-home-button {
  margin-bottom: calc(4.533vw + var(--safe-area-bottom-custom, 0px));
  margin-top: 7.2vw;
  line-height: 5.6vw;
  font-size: 4.533vw;
  font-weight: 700;
  color: #6C74B4;
  margin-left: 7.5vw;
  margin-right: 7.5vw;
  width: 85vw;
  border: none;
  text-align: center;
  font-family: Lato;
}
.msc-modal-story-page-override-creator-follower-text {
  color: #80828E;
  font-family: Lato;
  font-size: 4.267vw;
  font-style: normal;
  font-weight: 500;
  line-height: 5.867vw;
}

.msc-modal-story-page-override-title-text {
  color: #272441;
  font-family: Lato;
  font-size: 4.533vw;
  font-style: normal;
  font-weight: 700;
  line-height: 5.6vw;
}
.story-network-offline {
  left: calc(4vw - 12px);
}

.rewards-screen {
  background: #1E1C2C;
}

/* -------------- */
/* ---- TABS ---- */
/* -------------- */
.page-tabs[data-tabstyle="rewards-screen-tabs"] {
  padding: 0 16vw;
  color: var(--color-white) !important;
  font: var(--font-header4);
  background: var(--color-interim-dark);
  column-gap: 3vw;
}
.page-tabs[data-tabstyle="rewards-screen-tabs"] .page-tab.active {
  color: var(--color-white);
  box-shadow: none;
}

.page-tabs[data-tabstyle="rewards-screen-tabs"] .page-tab.active .row-tab:after {
  content: "";
  background: var(--color-pop);
  position: absolute;
  bottom: -6px;
  left: auto;
  height: 2px;
  width: 85%;
}
.page-tabs[data-tabstyle="rewards-screen-tabs"] .page-tab.active[data-id="giveaways"] .row-tab:after {
  width: 85%;
}

/* ------------------- */
/* ---- TASKS TAB ---- */
/* ------------------- */
.rewards-content {
    background: #1E1C2C;
    padding: 5.867vw;
}

/* ---- PROMOTION ---- */
.rewards-content .promotion {
  height: 53.33vw;
  width: 100%;
  margin: 0 auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 12px;
}

/* ---- TASKS: EVENTS SECTION ---- */
.event-section-header {
    color: #FFF;
    font-family: Lato;
    font-size: 4.533vw;
    font-style: normal;
    font-weight: 700;
    line-height: 5.6vw;
    height: 10.667vw;
    display: flex;
    align-items: center;
}
.event-list-item {
    border-radius: 3.2vw;
    margin-top: 2.133vw;
    margin-bottom: 2.133vw;
    background: #1E1C2C;
    height: 42.667vw;
    max-height: 42.667vw;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;

}

.event-list-item-reward {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5vw;
    width: 100%;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    margin-bottom:1vw;
}

.event-list-item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 51%;
    align-items: center;
    padding-right: 3.2vw;
}
.event-list-item-time-left {
    margin: 3.2vw 0 2vw 0;
    color: var(--Feature, #FFD78A);
    font-family: Lato;
    font-size: 4vw;
    font-style: normal;
    font-weight: 600;
    line-height: 4vw;
    text-align: center;
}
.event-list-item-tag {
    position: absolute;
    top:0;
    left: 0;
    border-radius: 3.2vw 0px;
    background: #F56969;
    color: #FFF;
    text-align: center;
    font-family: Lato;
    font-size: 3.467vw;
    font-style: normal;
    font-weight: 600;
    line-height: 4.533vw;
    padding: 1vw 2.133vw;
}
.event-list-item-title {
    color: #FFF;
    font-family: Lato;
    font-size: 4.533vw;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-list-item-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--White, #FFF);
    font-family: Lato;
    font-size: 2.933vw;
    font-style: normal;
    align-self: flex-start;
    line-height: 4vw;
    word-break: break-word;
    max-height: 12vw; /* line-height * line-clamp */
}
.event-list-item-reward-icon {
    height: 5.333vw;
}
.event-list-item-reward-text,
.event-list-item-reward-amount {
    color: var(--color-white);
    font: var(--font-body3);
}
.event-list-item-button-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.event-list-item-button {
    border-radius: 3.733vw;
    color: var(--Interim-Dark, #1E1C2C);
    text-align: center;
    font-family: Lato;
    font-size: 3.467vw;
    font-style: normal;
    font-weight: 600;
    line-height: 4.533vw;
    background-color: white;
    width: 32vw;
    max-width: 32vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.4vw;
    height: 7.467vw;
}


/* -------------------- */
/* ---- EVENTS TAB ---- */
/* -------------------- */

.events-content {
  padding-bottom: 5vw;
  color: var(--color-white);
}

/* ---- PROMOTION ---- */
.events-content .promotion {
  height: 53.33vw;
  width: 90%;
  margin: 0 auto 5vw auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 12px;
}

/* ---- LATEST WINNERS ---- */
.latest-winners-title {
  padding: 0 5vw;
  font: var(--font-header4);
}
.latest-winners-heading {
  margin: 1vw 0 3vw 0;
  padding: 0 5vw;
  color: var(--color-desat-light);
  font: var(--font-body3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-winners {
  display: flex;
  gap: 2vw;
  overflow-x: scroll;
  padding: 0 5vw;
}
.latest-winners::-webkit-scrollbar {
  display: none;
}
.latest-winners-empty {
  width: 100%;
  margin: 4vw 0;
  padding: 0 5vw;
  color: var(--color-desat-light);
  font: var(--font-body3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- EVENTS LIST ---- */
.events-list {
  padding: 0 5vw;
}
.events-list-empty {
  padding: 0 5vw;
}
.events-list-empty .empty-text {
  color: var(--color-desat-med);
  font: var(--font-body2);
  text-align: center;
}

/* ---- COMPETITIVE MODE ITEM ---- */
.competitive-event-item {
  position: relative;
  margin: 2vw 0;
  color: var(--color-black);
  background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 45%);
  border-radius: 10px;
}

.competitive-event-item.heading {
  display: flex;
  align-items: center;
  height: 15.5vw;
  padding: 0;
  color: var(--color-white);
  font: var(--font-header4);
  background: transparent;
}

.competitive-event-item .title,
.competitive-event-item .host-name,
.competitive-event-item .reward-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.competitive-event-item .image,
.competitive-event-item .host-image,
.competitive-event-item .share,
.competitive-event-item .banner,
.competitive-event-item .icon {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.competitive-event-item .content-container {
  display: grid;
  grid-template-columns: 35.2vw 1fr;
  grid-template-rows: 11.2vw 1fr;
  grid-row-gap: 2vw;
  grid-column-gap: 2.5vw;
  padding: 2vw 2.5vw;
}

.competitive-event-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.6vw;
  padding: 1vw 2.5vw 1vw calc(2.5vw + 12.5vw + 2.5vw); /* left space + icon width + right space */
  font: var(--font-body3);
  background-color: var(--color-feature-dark);
  border-radius: 10px 10px 0 0 ;
}
.competitive-event-item .type {
  color: var(--color-bronze);
  font: var(--font-body3);
}
.event-type-competitive .competitive-event-item-header .type {
  display: flex;
}

.competitive-event-item .date {
  font: var(--font-body3);
}

.competitive-event-item .title {
  grid-column: 1 / 3;
  margin: auto 0 auto calc(12.5vw + 2.5vw); /* icon width + right icon space */
  color: var(--color-background-v2);
  font: var(--font-header4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.competitive-event-item .image {
  height: 48.3vw;
  width: 35.2vw;
  border-radius: 10px;
}
.competitive-event-item-header-host-container {
  display: flex;
  align-items: center;
  margin-bottom: 1.5vw;
}
.competitive-event-item .host-name-heading {
  color: var(--color-bronze);
  font: var(--font-body4);
}
.competitive-event-item .host-name {
  color: var(--color-background-light-v2);
  font: var(--font-body4);
}
.competitive-event-item .host-image {
  height: 7.7vw;
  width: 7.7vw;
  margin-right: 2vw;
  border-radius: 50px;
}

.competitive-event-item .countdown-container {
  padding: 1vw;
  font: var(--font-body3);
  text-align: center;
  border: solid 1px var(--color-feature);
  border-radius: 25px;
}
.competitive-event-item .countdown-container.waiting {
  color: var(--color-desat-med);
  background: transparent;
  border: 1px solid var(--color-desat-light);
}

.competitive-event-item .reward-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  column-gap: 1.5vw;
  margin-top: 1.5vw;
}
.competitive-event-item .reward-title {
  padding: 0;
  color: var(--color-bronze);
  font: var(--font-body3);
  text-align: left;
}
.competitive-event-item .reward-description {
  font: var(--font-body4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.competitive-event-item .reward-image {
  height: 13vw;
  width: 13vw;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  border-radius: 8px;
}

.competitive-event-item .button {
  margin-top: 2vw;
  padding: 1.5vw;
  text-align: center;
  border-radius: 25px;
}
.competitive-event-item .button.upcoming-event {
  background: var(--color-feature);
}
.competitive-event-item .button.live-event,
.competitive-event-item .button.own-event {
  color: var(--color-white);
  background: var(--color-pop);
}
.competitive-event-item .button.past-event {
  background: var(--color-white);
}
.competitive-event-item .button.attending-event,
.competitive-event-item .button.own-event.disabled {
  color: var(--color-desat-med);
  background: transparent;
  border: 1px solid var(--color-desat-light);
}

.competitive-event-item-footer {
  position: absolute;
  bottom: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 45.33vw;
}
.competitive-event-item .attending {
  padding-left: 5vw;
  color: var(--color-highlight-muted);
  font: var(--font-body4);
  background: url('assets/design-library/icons/ui/friends-highlight-muted.svg') left/contain no-repeat;
}
.competitive-event-item .share {
  position: absolute;
  bottom: -2vw;
  right: -4.5vw;
  height: 8vw;
  width: 12vw;
  background-image: url('assets/design-library/icons/ui/share-highlight-muted.svg');
  background-size: 40%;
}

.competitive-event-item .icon-container {
  position: absolute;
  top: 0;
  left: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5vw;
  height: 18.9vw;
}
.competitive-event-item .banner {
  height: 100%;
  width: 100%;
  background-image: url('https://d31micz62sw9di.cloudfront.net/prod/icons/competitive-mode/banner.png');
  background-position: top;
}
.competitive-event-item .icon {
  position: absolute;
  top: 0;
  height: 80%;
  width: 85%;
}

.competitive-event-item.past-event {
  background: linear-gradient(180deg, #F2E5CD 0%, #C8C0B0 45%);
}
.competitive-event-item.past-event .competitive-event-item-header {
  background: #C6AA75;
}
.competitive-event-item.button.past-event .image {
  filter: grayscale(0.5);
}
.competitive-event-item.past-event .reward-image {
  opacity: 0.7;
}
.competitive-event-item.past-event .attending {
  padding-left: 5vw;
  color: var(--color-desat-dark);
  font: var(--font-body4);
  background: url('assets/design-library/icons/ui/friends-desat-dark.svg') left/contain no-repeat;
}

@keyframes highlight-competitive-event {
  0% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 145%);
  }
  10% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 135%);
  }
  20% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 125%);
  }
  30% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 115%);
  }
  40% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 105%);
  }
  50% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 95%);
  }
  60% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 85%);
  }
  70% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 75%);
  }
  80% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 65%);
  }
  90% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 55%);
  }
  100% {
    background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 45%);
  }
}

.highlight-competitive-event {
  animation: highlight-competitive-event ease 1.5s;
  background: linear-gradient(180deg, #FFD78A 0%, #FFFFFF 45%);
}

/* currency */
.currency-rewards-banner {
  width: 100%;
}
.currency-rewards-banner img {
  width: 100%;
  object-fit: contain;
}

.currency-section-title {
  display: flex;
  gap: 2vw;
  padding: 3vw 0;
}
.currency-rewards-title-wrapper {
  font-size: var(--font-size-17-px);
  color: var(--color-white);
}
.currency-rewards-title-icon {
  width: 6vw;
}

.currency-section-expiration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-white);
  margin: 2vw 0 6vw 0;
  background: #99A4FF36;
  border-radius: 2vw;
  gap: 2vw;
  padding: 1.5vw 2.5vw;
}
.currency-rewards-expiration-title,
.currency-rewards-expiration-top-value {
  font-size: var(--font-size-13-px);
}
.currency-rewards-expiration-icon {
  width: 10vw;
}
.currency-rewards-expiration-right {
  display: flex;
  flex-direction: column;
}
.currency-rewards-expiration-top {
  display: flex;
  gap: 1vw;
  align-items: center;
  justify-content: flex-end;
}
.currency-rewards-expiration-icon-img {
  box-shadow: 0px 2.22px 4.44px 0px #1E1C2C8F;
  width: 3vw;
}
.currency-rewards-expiration-bottom {
  color: var(--color-white);
  opacity: 0.7;
  font-size: var(--font-size-11-px);
  text-align: right;
}

.rewards-content-event-section {
    display: flex;
    flex-direction: column;
}

.cta-box-list-pre {
  display: flex;
  flex-direction: column;
  gap: 2.133vw;
}
.cta-box-list-pre > div:first-child {
    margin-top: 2.133vw;
}

.rewards-content-event-section {
  display: flex;
  flex-direction: column;
}

.cta-box-list-pre {
  display: flex;
  flex-direction: column;
  gap: 2.133vw;
}

.cta-box-list-pre>div:first-child {
  margin-top: 2.133vw;
}

.cta-box-list-after {
  display: flex;
  flex-direction: column;
  gap: 2.133vw;
}

div.modal-promo-multiplayer {
    width: 100%;
    height: 100%;
}
.promo-multiplayer-modal-container {
    height: 100%;
}
.promo-multiplayer-heading {
    padding-left: 4vw;
    padding-top: var(--safe-area-top-custom, 0px);
}
.promo-multiplayer-title{
    color: #F7A397;
    font-weight: bolder;
    font-size: 6vw;
}
.promo-multiplayer-modal{
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
  position: relative;
}
.promo-multiplayer-image-container {
    display: flex;
    justify-content: center;
    height: 100%;
}
.promo-multiplayer-info{
    padding-top:8px;
}
.promo-multiplayer-subheading, .ftue-story-title{
    color: rgba(255,255,255,.8)
}
.promo-multiplayer-modal .story-cover-container img.ftue-story-cover {
    width: 100%;
}

.ftue-story-container {
    display: grid;
    grid-template-rows: 3rem 9vh 1fr 1fr 3rem;
    background: #383838;
    border-bottom: 1px solid gray;
    height: 100dvh;
    position: relative;
}
.ftue-story-play-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 17vw;
    pointer-events: none;
}
.promo-multiplayer-container{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.promo-multiplayer-story-container {
    overflow-y: scroll;
    flex-grow: 1;
}


.promotional-events-modal-container {
    height: 100%;
}

.toast {
  position: fixed;
  top: var(--safe-area-top-custom, 0px);
  left: env(safe-area-inset-left, 0);
  right: env(safe-area-inset-right, 0);
  margin: 6px;
  padding: 6px;
  background: var(--color-background-panel);
  border-radius: 8px;
  box-shadow: 0 4px 32px -4px #000;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 250ms, transform 250ms, background-color 250ms;

  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 8px;

  /* display over sidemenu */
  z-index: 1001;
}

.toast.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast > img {
  align-self: center;
  display: block;
  grid-area: 1 / 1 / 3 / 2;
  width: 9.5vw;
  height: 9.5vw;
  border-radius: 50%;
  object-fit: cover;
}

.toast h1 {
  align-self: end;
  grid-area: 1 / 2;
  text-align: left;
  margin: 0;
  font: var(--font-body);
}

.toast p {
  align-self: start;
  grid-area: 2 / 2;
  text-align: left;
  margin: 0;
  font: var(--font-caption);
  opacity: 0.8;
}

.toast button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  grid-column: span 2;
}

.toast button img {
  margin-right: 8px;
}

.tooltip-main-wrapper {
  --tooltip-background-color: #FFFFFF;
  --tooltip-text-color: #000000;
  --tooltip-tick-size: 4vw;
  position: absolute;
  top: 0;
  left: 0;
}
.tooltip-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--font-size-12-px);
  font-weight: 600;
  line-height: var(--font-size-16-px);
  border-radius: 2vw;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
  transition: all 0.5s;
  opacity: 0;
  pointer-events: none;
  /* transition-delay: 1s; */
}
.tooltip-wrapper.left {
  margin-right: -20px;
}
.tooltip-wrapper.right {
  margin-left: -20px;
}
.tooltip-wrapper.display {
  opacity: 1;
  margin-left: 0px;
  margin-right: 0px;
  pointer-events: all;
}
.tooltip-background {
  max-width: 70vw;
  min-width: 40vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--tooltip-text-color);
  background-color: var(--tooltip-background-color);
  border-radius: 2vw;
  padding: 3vw;
}
.tooltip-background::after {
  content: '';
  background-color: var(--tooltip-background-color);
  position: absolute;
  width: var(--tooltip-tick-size);
  height: var(--tooltip-tick-size);
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
  left: calc(-1 * var(--tooltip-tick-size)/2);
  z-index: -1;
}

.tooltip-wrapper.right .tooltip-background::after{
  left: auto;
  right: calc(-1 * var(--tooltip-tick-size)/2);
}

.tooltip-wrapper.top .tooltip-background::after{
  top: calc(1.25vw + var(--tooltip-tick-size))
}
.tooltip-wrapper.bottom .tooltip-background::after{
  top: auto;
  bottom: 1.25vw;
}

/* RIGHT === BOTTOM in vertical mode */
.tooltip-wrapper.vertical.right .tooltip-background::after{
  top: 100%;
  bottom: auto;
  transform: translateY(-50%) rotate(calc(45deg - 90deg));
}
.tooltip-wrapper.vertical.top .tooltip-background::after{
  left: calc(1.5 * var(--tooltip-tick-size)/2);
  right: auto;
}
.tooltip-wrapper.vertical.bottom .tooltip-background::after{
  right: calc(1.5 * var(--tooltip-tick-size)/2);
  left: auto;
}
.tooltip-wrapper.vertical.middle .tooltip-background::after{
  right: auto;
  left: 50%;
  transform:translateY(-50%) translateX(-50%) rotate(calc(45deg - 90deg));
}

.tooltip-background.tutorial {
  color: var(--color-white);
  background: var(--tooltip-tutorial-background-color);
  border: solid 1.5px white;
  box-shadow: 0px 4.98px 4.98px 0px #00000040;
}
.tooltip-background.tutorial::after {
  border-top: 1.5px solid;
  border-right: 1.5px solid;
  background: linear-gradient(120deg, rgba(30, 28, 44) -20%, rgba(100, 93, 146) 205%);
  z-index: 0;
}

.tooltip-background.goal {
  color: var(--color-white);
  background: rgba(30, 28, 44, 0.9);
  border: 2px solid rgba(190, 179, 254, 0.3);
  box-shadow: 0px 4.98px 4.98px 0px #00000040;
}

.competitive-mode-rules-wrapper,
.competitive-mode-survival-wrapper,
.competitive-mode-eliminated-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
}
.competitive-mode-rules-close-button,
.competitive-mode-survival-close-button,
.competitive-mode-eliminated-close-button {
  position: absolute;
  top: 5vw;
  right: 5vw;
  cursor: pointer;
  text-align: center;
}

.competitive-mode-survival-header-image,
.competitive-mode-rules-header-image {
  background: url('assets/design-library/ui/star_1_small.svg') no-repeat;
  background-size: contain;
  background-position: center;
  width: 12vh;
  height: 12vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.competitive-mode-survival-header-image img,
.competitive-mode-rules-header-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/** rules modal **/
.competitive-mode-rules-wrapper {
  display: flex;
  align-items: flex-end;
}
.competitive-mode-rules-inside {
  position: relative;
  bottom: 0;
  height: 78%;
  width: 100%;
  border-radius: 3vw 3vw 0 0;
  background: linear-gradient(180deg, #FFEAB2 0%, #FFF 100.09%);
  padding: 4vh 3vw 3vw 3vw;
  margin: 0 4vw;
}

.competitive-mode-rules-content {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding: 2vh;
  gap: 1.2vh;
}
.competitive-mode-rules-title,
.competitive-mode-rules-description {
  color: var(--color-dark);
  text-align: center;

  font-size: var(--font-size-25-px);
  font-weight: 600;
}
.competitive-mode-rules-description {
  padding: 0 1vw;
  font-size: var(--font-size-16-px);
  font-weight: 500;
}
.competitive-mode-rules-reward {
  background: transparent url('assets/design-library/ui/star_1_big.svg') no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 18vh;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.competitive-mode-rules-reward-top-title {
  color: var(--color-dark);
  font-size: var(--font-size-17-px);
  font-weight: 700;
}
.competitive-mode-rules-reward-bottom-title {
  color: var(--color-black);
  font-size: var(--font-size-16-px);
  font-weight: 600;
}
.competitive-mode-rules-reward-image {
  width: 14vh;
  height: 14vh;
  border-radius: 4vw;
  background-color: var(--colo-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.competitive-mode-rules-reward-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/** survival modal **/
.competitive-mode-survival-wrapper {
  padding: 4vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.competitive-mode-survival-inside {
  --margin-top: 38vw;
  padding: 10vw 5vw 0 10vw;
  position: relative;
  border-radius: 5vw;
  border: 3px solid #FFFAE2;
  background: linear-gradient(0deg, #FFFAE2 0.19%, #FFF0C1 44.72%, #FFE193 99.6%);
  margin-top: var(--margin-top);
  width: 100%;
  height: calc(100dvh - var(--margin-top) - 4vh);
  overflow: hidden;
}
.competitive-mode-survival-inside::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 12vw;
  width: 100%;
  left: 0;
  border-radius: 0 0 5vw 5vw;
  background: linear-gradient(180deg, rgba(255, 249, 225, 0.00) 0%, #FFF9E1 81.77%);
}

.competitive-mode-survival-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5vw;
}
.competitive-mode-survival-title {
  color: var(--color-dark);
  text-align: center;
  font-size: var(--font-size-20-px);
  font-weight: 600;
}
.competitive-mode-survival-eliminated-title {
  color: var(--color-dark);
  text-align: center;
  font-size: var(--font-size-16-px);
  font-weight: 500;
}
.competitive-mode-survival-howtoplay {
  color: var(--color-red);
  text-align: center;
  font-size: var(--font-size-16-px);
  font-weight: 700;
}


.competitive-mode-survival-users {
  display: grid;
  gap: 3vw;
  grid-template-columns: 30% 30% 30%;
  align-items: center;
  justify-content: center;
  grid-auto-rows: max-content;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 43vh;
  padding-bottom: 20vw;
}

/** survival modal avatar **/
.competitive-mode-survival-user {
  --avatar-size: 100%;
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.competitive-mode-survival-user-img {
  position: relative;
  border: 3px solid rgba(0, 0, 0, 0.20);
  border-radius: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.competitive-mode-survival-user-img > img {
  border-radius: 100vw;
  width: 100%;
  /* height: 100%; */
  object-fit: contain;
  background: url('assets/design-library/ui/under-avatar-frame.svg') no-repeat;
  background-size: contain;
  background-position: center;
  padding: 0.5vw;
}
.competitive-mode-survival-user-img::before {
  --margin: 2px;
  content: '';
  position: absolute;
  top: calc(-1 * var(--margin));
  left: calc(-0 * var(--margin));
  right: calc(var(--margin) + var(--avatar-size));
  bottom: calc(var(--margin) + var(--avatar-size));
  width: calc(var(--avatar-size));
  height: calc(2 * var(--margin) + var(--avatar-size));

  object-fit: contain;
  background: url(../assets/design-library/ui/under-avatar-frame.svg) no-repeat;
  background-size: contain;
  background-position: center;
}
.competitive-mode-survival-user-name {
  color: var(--color-dark);
  text-align: center;
  font-size: var(--font-size-11-px);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
}

.competitive-mode-survival-user-badge {
  /** if --avatar-size not provided from the outside */
  --badge-avatar-size:var(--avatar-size, 100%);
  --badge-size: 7vw;
  width: var(--badge-size);
  height: var(--badge-size);
  position: absolute;
  top: calc(var(--badge-avatar-size) - var(--badge-size) * 0.9);
  left: calc(-0.1 * var(--badge-size));
}
.competitive-mode-survival-user-badge-ellipse,
.competitive-mode-survival-user-badge-ellipse-overlay,
.competitive-mode-survival-user-badge-checkmark {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.competitive-mode-survival-user-badge-ellipse-overlay {
  height: unset;
}
.competitive-mode-survival-user-badge-checkmark {
  --checkmark-size: 60%;
  width: var(--checkmark-size);
  height: var(--checkmark-size);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/** eliminated popup **/
.competitive-mode-eliminated-wrapper {
  --avatar-size: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.competitive-mode-eliminated-inside {
  position: relative;
  background: var(--color-white);
  margin: 0 10vw;
  border-radius: 7vw;
  text-align: center;
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.competitive-mode-eliminated-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  margin-bottom: 3vw;
  padding: calc(0.5 * var(--avatar-size) + 5vw) 5vw 15vw 5vw;
  flex: 1;
}
.competitive-mode-eliminated-top-bg {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(230, 141, 146, 0.00) 0%, rgba(197, 96, 108, 0.62) 100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15vw 7vw calc(0.5 * var(--avatar-size) + 5vw) 7vw;
}
.competitive-mode-eliminated-user {
  width: var(--avatar-size);
  height: var(--avatar-size);
  position: absolute;
  bottom: calc(-1 * var(--avatar-size)/2);
  left: 50%;
  transform: translateX(-50%);
}
.competitive-mode-eliminated-user > img {
  width: 100%;
  object-fit: contain;
  border-radius: 100vw;
}
.competitive-mode-eliminated-user-x {
  --dot-size: 10vw;
  border-radius: 100vw;
  background: var(--color-pop);
  width: var(--dot-size);
  height: var(--dot-size);
  position: absolute;
  top: 2vw;
  right: -2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.competitive-mode-eliminated-user-x > img {
  width: 60%;
}
.competitive-mode-eliminated-description {
  font-size: var(--font-size-16-px);
  line-height: calc(1.35 * var(--font-size-16-px));
  font-weight: 500;
}
.competitive-mode-eliminated-title {
  font-size: calc(1.1 * var(--font-size-20-px));
  font-weight: 600;
}
.competitive-mode-eliminated-subtitle {
  font-size: var(--font-size-16-px);
  line-height: calc(1.35 * var(--font-size-16-px));
  font-weight: 500;
}

/** top header badge **/
.competitive-mode-panel-section {
  --badge-width: 25vw;
  --badge-height: 7.5vw;
  --badge-left-margin: 1vw;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.competitive-mode-badge {
  --stream-goals-panel-left: 25vw;
  --stream-goals-panel-width: 31vw;
  position: absolute;
  width: var(--badge-width);
  height: var(--badge-height);
  top: 12vw;
  left: calc(var(--stream-goals-panel-left) + var(--stream-goals-panel-width) + var(--badge-left-margin));
  border-radius: 2vw;
  background: rgba(224, 188, 94, 0.70);
}
.competitive-mode-badge-inside {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
}
.competitive-mode-badge-left {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.75vw;
}
.competitive-mode-badge-left img {
  max-height: calc(0.8 * var(--badge-height));
  height: 100%;
  object-fit: contain;
}
.competitive-mode-badge-right {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  align-items: start;
}
.competitive-mode-badge-competitors-num,
.competitive-mode-badge-competitors-title {
  color: var(--color-white);
  font-size: var(--font-size-12-px);
  font-weight: 600;
  line-height: 80%;
}
.competitive-mode-badge-competitors-title {
  font-size: var(--font-size-11-px);
}

.starting-countdown {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1001; /* it is here because of leaderboard modal being z indexed */
}

.starting-countdown-label {
  font-size: 6vw;
  color: var(--color-white);
  font-weight: bold;
}

.starting-countdown-time {
  font-size: 16vw;
  color: var(--color-white);
  font-weight: lighter;
}
.reward-invite-modal {
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
  position: relative;
}
.reward-invite-close-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 14vw;
  width: 14vw;
  background: url("assets/img/ui/icon-close-white.svg") no-repeat 50% 50%;
  background-size: 57%;
}

.reward-invite-modal-image-container {
  display: flex;
  justify-content: center;
  height: 100%;
}
.reward-invite-button-invisible-container {
  position: absolute;
  top: 81%;
  height: 8%;
  width: 100%;
}
.reward-invite-button-invisible {
  height: 100%;
  width: 50%;
  margin: 0 auto;
}




/* -- INVITE MODAL WITH BANNER -- */
/* .reward-invite-banner {
  height: 50%;
  width: 100%;
  background-image: url("assets/img/ui/reward-invite-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.reward-invite-content-container {
  height: 50%;
  background-image: linear-gradient(180deg, #6D3581, #E60DAC);
}
.reward-invite-description {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5vw;
  margin: 0 8vw;
  margin-bottom: 8vh;
  padding-top: 2vh;
  font-size: 3.6vw;
  line-height: 5vw;
}
.reward-invite-description-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.reward-invite-description-item > img {
    width: 100%;
    padding: 7vw;
    padding-bottom: 5vw;
}
.reward-invite-button {
  width: 50vw;
  margin: 0 auto;
  padding: 4.5vw;
  color: #000;
  font-size: 4vw;
  text-align: center;
  background-image: linear-gradient(180deg, #02c9f8, #fde826);
  border-radius: 100px;
} */

.promo-modal {
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
  position: relative;
}
.promo-close-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 14vw;
  width: 14vw;
  background: url("assets/img/ui/icon-close-white.svg") no-repeat 50% 50%;
  background-size: 57%;
}

.promo-modal-image-container {
  display: flex;
  justify-content: center;
  height: 100%;
}
.promo-button-invisible-container {
  position: absolute;
  top: 81%;
  height: 10%;
  width: 100%;
}
.promo-button-invisible {
  height: 100%;
  width: 35vh;
  margin: 0 auto;
}

/**
 * Swiper 6.4.11
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 6, 2021
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;-webkit-filter:blur(50px);filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.swiper-container-adjustments {
  top: var(--safe-area-top-custom, 0px);
}

.swiper-wrapper-adjustments {
  height: calc(100dvh - var(--safe-area-top-custom, 0px));
}

.swiper-wrapper > .swiper-slide {
  -webkit-transform: translate3d(0, 0, 0);
}

.swiper-pagination > :not(span.swiper-pagination-bullet-active) {
  opacity: 0.5;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: calc(10px + var(--safe-area-bottom-custom, 0px));
}

.event-promo-no-btn {
}


.event-promo-yes-btn {

}

.swiper-button-container {
  position: absolute;
  top: 60%;
}

.event-promo-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 14vw;
  width: 14vw;
  background: url("assets/img/ui/icon-close-white.svg") no-repeat 50% 50%;
  background-size: 57%;
}

.section-multiplayer-lobbies {
  position: absolute;
  top: 0;
  width: 100%;
}
.section-multiplayer-lobbies.visible-permanently {
  position: relative;
}
.story-lobby-view {
  margin: 5vw;
}

.story-lobby-heading {
  display: grid;
  grid-template-columns:28vw 1fr;
  grid-column-gap: 5vw;
  grid-template-rows: 40vw 1fr;
}

.story-lobby-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}
.story-lobby-info {
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-lobby-title {
  width: calc(100vw - 28vw - 15vw);
  margin-bottom: 3vw;
  font-size: 4.5vw;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.story-lobby-episode {
  color: var(--color-gray-light);
  font-size: 4vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.story-lobby-message {
  grid-column: span 2;
  height: 20vw;
  margin: 3vw 0;
  text-align: center;
}
.story-lobby-message-top {
  font-size: 5vw;
  margin: 3vw 0;
}
.story-lobby-message-bottom {
  font-size: 4vw;
  font-weight: normal;
  font-style: italic;
}

.story-lobby-list {
  overflow: scroll;
  padding-bottom: 30vw;
  height: calc(100dvh - 3rem - 100vw);
}
.story-lobby-item {
  margin: 5vw 0;
  padding: 2vw 5vw 5vw 5vw;
  background: #505050;
  border-radius: 25px;
}
.lobby-item-time {
  font-weight: normal;
  font-style: italic;
  margin-bottom: 5vw;
  margin-left: 3vw;
  padding-left: 6vw;
  background-image: url("assets/img/ui/icon-timer-white.svg");
}
.lobby-item-host-avatar {
  height: 13vw;
  width: 13vw;
  border: solid 1px #FFF;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.lobby-item-users {
  display: grid;
  grid-template-columns: 13vw 1fr;
  grid-template-rows: 10vw 1fr;
  grid-column-gap: 3vw;
}
.lobby-item-host-name {
  font-size: 4vw;
  margin-top: 3vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobby-item-broadcasters-list {
  font-size: 3.5vw;
  font-weight: normal;
}
.lobby-item-broadcasters-list > div {
  width: 64vw;
  margin-bottom: 1vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-item-counts {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vw;
  font-size: 4vw;
  font-weight: normal;
  opacity: 0.5;
}
.lobby-item-broadcaster-count {
  background-image: url("assets/img/ui/videocamf-24px.svg");
  padding-left: 6vw;
}
.lobby-item-user-count {
  background-image: url("assets/img/buttons/icon-multiplayer-white.svg");
  padding-left: 7vw;
}
.lobby-item-broadcaster-count,
.lobby-item-user-count,
.lobby-item-time {
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}

.lobby-create-button {
  position: absolute;
  bottom: calc(15vw + var(--safe-area-top-custom, 0px));
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw;
  padding: 4vw 3vw;
  font-size: 4vw;
  background: var(--color-primary);
  border-radius: 25px;
  transform: translateX(-50%);
  color: #000;
}
.lobby-create-button > span {
  font-family: "Material Icons";
  font-size: 6vw;
}

.notification-settings {
  height: calc(100dvh - 3rem - var(--safe-area-top-bottom-custom, 0px));
}
.notification-settings-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15vw;
  margin-bottom: 5vw;
  font-size: 5vw;
}
.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 5vw 7vw 5vw;
  font-size: 4vw;
  font-weight: normal;
}
.notification-toggle {
  display: flex;
  align-items: center;
}
.notification-toggle-switch {
  position: relative;
  display: inline-block;
  width: 10vw;
  height: 5vw;
  margin: 0 2vw;
}
.notification-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.notification-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #858585;
  -webkit-transition: .4s;
  transition: .4s;
}
.notification-toggle-slider:before {
  position: absolute;
  content: "";
  height: 5vw;
  width: 5vw;
  background-color: #FFF;
  -webkit-transition: .4s;
  transition: .4s;
}
.notification-toggle.active > .notification-toggle-switch > .notification-toggle-slider {
  background-color: var(--color-highlight);
}
.notification-toggle-slider.notification-toggle-round {
  border-radius: 34px;
  pointer-events: none;
}
.notification-toggle-slider.notification-toggle-round:before {
  border-radius: 50%;
}

@keyframes toggleRight {
  0% {
    left: 0;
  }
  100% {
    left: 6vw
  }
}
@keyframes toggleLeft {
  0% {
    left: 6vw;
  }
  100% {
    left: 0
  }
}

.notification-toggle-slider.notification-toggle-round.toggleRight::before {
  animation-name: toggleRight;
  animation-duration: 0.4s;
  left: 6vw;
}
.notification-toggle-slider.notification-toggle-round.toggleLeft::before {
  animation-name: toggleLeft;
  animation-duration: 0.4s;
  left: 0;
}
.notification-settings-list {
  height: calc(100dvh - 20vw - 10vh - 3rem - var(--safe-area-top-bottom-custom, 0px));
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.notification-footer {
  border-top: solid 1px rgb(112, 112, 112);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:10vh;
}
.notification-submit {
  border-radius: 8px;
  font: var(--font-button);
  text-transform: uppercase;
  width: 20%;
  text-align: center;
  padding: 6px 16px;
}
.notification-settings-wait {
  position: absolute;
  width: 100%;
  height: calc(100dvh - 15vw - 10vh - 3rem - var(--safe-area-top-custom, 0px));
  top: calc(15vw + 3rem + var(--safe-area-top-custom, 0px));
  background-color: rgba(0,0,0,0.5);
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification-btn {
  display: flex;
  align-items: center;
}
.notification-btn-label {
  position: relative;
  display: inline-block;
  width: 10vw;
  height: 5vw;
  text-align: center;
}

.toggle-v2-toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.toggle-v2-toggle-header {
  margin: 5vw 0 3vw 0;
  font-size: 5vw;
}

.toggle-v2-toggle {
  display: flex;
  align-items: center;
}

.toggle-v2-toggle-text {
  margin-top: 3vw;
  font-size: 3.5vw;
}

.toggle-v2-switch {
  position: relative;
  display: inline-block;
  width: 11vw;
  height: 5vw;
}

.toggle-v2-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-v2-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #858585;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-v2-slider:before {
  position: absolute;
  content: "";
  height: 5vw;
  width: 5vw;
  left: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle-v2-slider {
  background-color: #6C74B4;
}

input:checked + .toggle-v2-slider:before {
  -webkit-transform: translateX(6vw);
  transform: translateX(6vw);
}

.toggle-v2-slider.round {
  border-radius: 5vw;
}

.toggle-v2-slider.round:before {
  border-radius: 50%;
}

.reward-modal-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-top: var(--safe-area-top-custom, 0px);
  background-color: #2C2C2C;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.reward-modal-container.anim-out {
  pointer-events: none;
}


div.reward-modal-full-screen {
  width: 100%;
  height: 100%;
}


.reward-modal {
  position: relative;
  background-color: var(--color-background-card);
  color: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  width: -webkit-calc(100vw - 32px);
  width: calc(100vw - 32px);
}

.reward-modal img {
  display: block;
  /*max-width: 100%;*/
}

.reward-promo-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 14vw;
  width: 14vw;
  background: url("assets/img/ui/icon-close-light-gray.svg") no-repeat 50% 50%;
  background-size: 57%;
}

.swiper-button-override {
  --swiper-navigation-color: #BBB;
}

/* screen layout */

.suggestedcontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #272441;
}
.suggestedcontent-header {
  display: flex;
  flex-direction: column;
  margin: 4vh 10vw 0 10vw;
}
.suggestedcontent-header-title {
  font: var(--font-header2);
  margin-bottom: 4vw;
}
.suggestedcontent-header-text {
  padding-bottom: 3vh;
  font: var(--font-header4);
}
.suggestedcontent-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70dvh;
  padding: 0 4vw;
}
.suggestedcontent-footer {
  height: 7.3vh;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1vh;
  margin-bottom: 3.4vh;
}
.suggestedcontent-footer-btn {
  display: flex;
  align-items: center;
  height: 6.8vh;
  color: var(--color-highlight-light);
  font-size: 4vw;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.suggested-content-agreement {
  margin: 5vw 13vw;
  text-align: center;
  font: var(--font-body2);
}
.suggested-content-agreement-text {
  color: var(--color-white);
}
span[data-id="terms"],
span[data-id="privacy"] {
  color: var(--color-highlight-light);
}


/* content item */

.sc-item-info {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 22vh;
  padding: 0 2vw;
  background: var(--color-background-light-v2);
  border: 1px solid var(--color-highlight);
  border-radius: 10px;
}
.sc-item-image-container {
  height: 20vh;
  width: calc(20vh / 1.36);
  border-radius: 8px;
  overflow: hidden;
}
.sc-item-image {
  height: 20vh;
  width: calc(20vh / 1.36);
}
.sc-item-data-container {
  width: calc(100vw - (20vh / 1.36) - 8vw - 4vw - 13px - 22px); /* (total - image - listPadding - itemPadding - leftMargin - rightMargin */
  margin: 0 22px 0 13px;
}
.sc-item-title {
  padding-top: 3px;
  white-space: normal;
  font-weight: bold;
  font-size: 17px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sc-item-host-container {
  padding: 5px 0;
}
.sc-item-host-info {
  display: flex;
  align-items: center;
}
.sc-item-host-avatar {
  background-position: center;
  background-repeat: no-repeat;
  height: 3.5vh;
  width: 3.5vh;
  border-radius: 100%;
  background-size: 3.5vh;
  background-color: transparent;
}
.sc-item-host-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  flex-shrink: 100;
  margin-left: 9px;
}
.sc-item-text {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  font-size: 17px;
  color: var(--color-feature);
}
.sc-item-stats {
  padding-top: 6px;
  color: white;
}
.sc-item-stats-count {
  margin-left: 6px;
  font-size: 13px;
}
.sc-item-stats-items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sc-item-stats-icon {
  height: 2vh;
}

.audience-panel {
  position: absolute;
  bottom: 0;
  height: 74dvh;
  width: 100vw;
  padding: 0 3vw var(--safe-area-bottom-custom, 0px) 3vw;
  color: #FFF;
  font-size: 3.5vw;
  background: #000;
  border-radius: 10px 10px 0 0;
  animation-duration: 0.75s;
}
.audience-panel-swipe {
  position: relative;
  height: 10vw;
}
.audience-panel-close-swipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  width: 13vw;
  margin: auto;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.audience-panel-header {
  margin-bottom: 3vw;
  font-size: 5vw;
  text-align: center;
}

.audience-panel-list-header {
  color: var(--color-gray-light);
  font-size: 4vw;
}
.audience-panel-lists>div>.list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 5vw;
  grid-gap: 2vw;
  row-gap: 2vw;
}

.audience-item {
  --avatar-size: 20vw;
  position: relative;
  overflow: hidden;
}
.audience-item .competitive-mode-survival-user-badge {
  top: calc(var(--badge-avatar-size) - var(--badge-size) * 0.6);
  left: calc(0.1 * var(--badge-size));
}
.audience-item-image {
  height: var(--avatar-size);
  width: var(--avatar-size);
  margin: 2vw auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50px;
}
.audience-item-image.broadcaster {
  border: 3px solid var(--color-primary);
}
.audience-item-image.competitor {
  border: 3px solid #FFE1A8;
}
.audience-item-image.spectator {
  border: none;
  opacity: 0.75;
}
.audience-item-name {
  text-align: center;
  font-size: 3vw;
}
.audience-item-badge {
  position: absolute;
  bottom: 6vw;
  right: 2vw;
  height: 6vw;
  width: 6vw;
  background: url('assets/img/ui/icon-host-star.svg') center / contain no-repeat;
}

.audience-panel-views-count {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3vw;
  padding-bottom: 3vw;
  font-size: 4vw;
  color: var(--color-multiplayer3);
  border-bottom: 1px solid var(--color-gray-mid);
}
.audience-panel-views-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-confirm-title {
  font: var(--font-title2);
}
.modal-confirm-message {
  font: var(--font-subtitle);
}
.modal-confirm-img {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------- */
/* ---- SECONDARY CONFIRM MODAL ---- */
/* --------------------------------- */
.confirm-secondary {
  width: calc(100vw - 16vw);
  text-align: center;
  background-color: var(--color-white);
  border-radius: 20px;
}
.confirm-secondary .modal-confirm-message {
  margin-top: 7vw;
  padding: 10vw 8vw;
  font: var(--font-body1);
  color: var(--color-interim-dark);
}

.modal-confirm-button-group {
  display: flex;
  gap: 1.333vw;
  margin-bottom: 8.8vw;
  padding: 0 4.533vw;
}
.modal-confirm-button-group > button {
  width: 100%;
  padding: 2.5vw 0;
  font: var(--font-small-link);
  border-radius: 40px;
}
.confirm-secondary .button-secondary {
  color: var(--color-highlight);
  border: 2px solid var(--color-highlight);
}

.modal-confirm-close {
  position: absolute;
  right: 0;
  height: 7vw;
  width: 7vw;
  margin: 3vw 3vw 0 auto;
  background: url('assets/img/ui/icon-close-light-gray.svg') center / contain no-repeat;
}
.basic-user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vw;
}
.basic-user-item-image {
  height: 18vw;
  width: 18vw;
  border-radius: 50px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.basic-user-item-username {
  max-width: 18vw;
  font: var(--font-body4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.daily-goals-modal {
  width: 84%;
  padding: 8vw 5vw 6vw 5vw;
  color: var(--color-black);
  background: var(--gradient-daily-goals);
  border-radius: 30px;
}
.daily-goals-modal.limited {
  padding: 17vw 5vw 6vw 5vw;
}

.daily-goals-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.daily-goals-modal .goal-title {
  font: var(--font-header2);
  color: var(--color-desat-dark);
}
.daily-goals-modal .goal-description {
  width: 87%;
  margin: 2vw 0 4vw 0;
  font: var(--font-body2);
  text-align: center;
}

.daily-goals-modal .goal-progress {
  display: flex;
  align-items: center;
  font: var(--font-body3);
  width: 80%;
}
.daily-goals-modal .goal-progress-bar {
  margin-left: 2vw;
  width: 100%;
  background-color: var(--color-desat-med);
  border-radius: 100px;
  overflow: hidden;
  opacity: 0.25;
}
.daily-goals-modal .goal-progress-bar-fill {
  background-color: var(--color-pop);
  height: 5px;
  width: 0%;
}

.daily-goals-modal .reward-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 7vw
}
.daily-goals-modal .reward-title {
  margin-bottom: 2vw;
  font: var(--font-body3);
  text-align: center;
  line-height: 0;
}
.daily-goals-modal .reward-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 36vw;
  width: 36vw;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0px 0px 8px 0px #00000040;
}
.daily-goals-modal .reward-image {
  height: 27vw;
  width: 27vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.daily-goals-modal .reward-name {
  font: var(--font-body2);
  margin: 2vw 0 1vw 0;
}

.daily-goals-modal .goal-message {
  margin: 4vw 0;
  font: var(--font-body3);
  text-align: center;
}

.daily-goals-modal .goal-button {
  width: 95%;
  padding: 3.5vw 0;
  color: var(--color-white);
  font: var(--font-body2);
  font-weight: 700;
  text-align: center;
  background-color: var(--color-pop);
  border-radius: 30px;
}

.daily-goals-modal .goal-expiration {
  position: absolute;
  top: -12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font: var(--font-body3);
}
.daily-goals-modal .goal-expiration-text {
  color: var(--color-pop);
}
.daily-goals-modal .goal-expiration-timer {
height: 6vw;
  margin-left: 2vw;
  width: 22vw;
  padding-left: 6.5vw;
  line-height: 6vw;
  background: #FFF url('assets/design-library/icons/daily_goals/ic-clock.svg') 7%/18% no-repeat;
  border-radius: 15px;
  box-shadow: 0px 0px 4px 0px #00000040;
}
/* ----------------------------- */
/* ---- FTUE ACCOUNT SET UP ---- */
/* ----------------------------- */
.ftue-account-setup-page {
  background-color: var(--color-white);
  color: var(--color-black);
  font: var(--font-body2);
  text-align: center;
}

.ftue-account-setup {
  position: relative;
  height: 100%;
  padding-top: var(--safe-area-top-custom, 0px);
  padding-bottom: var(--safe-area-bottom-custom, 0px);
  -webkit-transition: margin-top 250ms ease-in-out;
  transition: margin-top 250ms ease-in-out;
}

.ftue-account-setup-scroller {
  position: relative;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  overflow-y: scroll;
}
.pwa .ftue-account-setup-scroller {
  height: 100dvh;
}

.ftue-account-setup-form-container {
  display: flex;
  align-items: center;
  height: calc(100dvh - var(--safe-area-top-bottom-custom, 0px));
  padding: 0 5vw;
}
.ftue-account-setup .oauth-sign-in,
.ftue-account-setup .log-in-form,
.ftue-account-setup .reset-password-form,
.ftue-account-setup .create-password-form,
.ftue-account-setup .email-verification-success-form,
.ftue-account-setup .email-verification-form {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.ftue-account-setup input {
  width: 100%;
  height: 12.5vw;
  margin-bottom: 2.6vw;
  padding: 3vw;
  border: 1px solid #BFBED6;
  border-radius: 6px;
}
.ftue-account-setup .email-label,
.ftue-account-setup .password-label,
.ftue-account-setup .code-label {
  margin-bottom: 2.6vw;
  color: var(--color-pop);
  font: var(--font-body4)
}

.ftue-account-setup .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 7vh 0 6vw 0;
}
.ftue-account-setup .heading-title {
  font: var(--font-header1);
  margin-bottom: 6.7vw;
}

.ftue-account-setup .submit-button {
  height: 13vw;
  width: 100%;
  margin-bottom: 4vw;
  font: var(--font-header3);
}

.redirect-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  width: 100%;
  padding-bottom: 4vw;
  font: var(--font-body3);
}
.ftue-account-setup .redirect-button {
  margin-top: 3vw 0 0 3vw;
  color: var(--color-highlight);
}

.ftue-account-setup .code-sent-container>div {
  width: 100%;
  padding-bottom: 4vw;
  font: var(--font-body3);
}

.ftue-account-setup .code-sent-text,
.ftue-account-setup .code-sent-countdown-timer {
  color: var(--color-highlight);
}

.ftue-account-setup.shiftForRegistration {
  margin-top: -65vw;
}
.pwa .ftue-account-setup.shiftForRegistration {
  margin-top: 0;
}

/* ---------------------------------------- */
/* ---- OAUTH SIGN IN / CREATE ACCOUNT ---- */
/* ---------------------------------------- */
.oauth-sign-in .oauth-button-container {
  width: 100%;
  color: var(--color-white);
}
.oauth-sign-in .oauth-button-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15vw;
  width: 100%;
  border-radius: 30px;
}
.oauth-sign-in .apple-button {
  background: #0F111C url('assets/design-library/icons/external/apple-white.png') 6vw/10vw no-repeat;
}
.oauth-sign-in .google-button {
  margin: 2.7vw 0;
  color: var(--color-black);
  background: #FFFFFF url('assets/design-library/icons/external/google-color.png') 6vw/10vw no-repeat;
  border: 1px solid #C9CDDD
}
.oauth-sign-in .facebook-button {
  background: #1877F2 url('assets/design-library/icons/external/facebook-white.png') 6vw/10vw no-repeat;
}

.oauth-sign-in .break {
  width: 100%;
  margin: 8vw 0 9.4vw 0;
  text-align: center;
  line-height: 0.1rem;
  border-bottom: 1px solid #C9CDDD;
}
.oauth-sign-in .break>span {
  background-color: #FFFFFF;
  padding: 0 8vw;
}

.oauth-sign-in .create-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.oauth-sign-in .create-account > div {
  width: 100%;
}
.oauth-sign-in .create-account-title {
  margin-bottom: 4.3vw;
}


/* --------------------- */
/* ---- FTUE LOG IN ---- */
/* --------------------- */
.log-in-form .log-in-email {
  margin-top: 7.5vw;
}

.modal-textinput-title {
  font: var(--font-subtitle);
}
.modal-textinput-message {
  font: var(--font-body);
}
.modal-textinput-img {
  margin-left: auto;
  margin-right: auto;
}

/* Modal template style */
.advanced-creation-modal-close-button {
  display: block;
  width: 30px;
  height: 30px;
  margin: 10px 10px 0 auto;
}

.advanced-creation-modal-container {
  margin: 0 1vw;
  padding: 0 6vw;
}

.advanced-creation-modal-title {
  text-align: center;
  font: 6.4vw Lato;
}

.advanced-creation-modal-message {
  font: 5.33vw Lato;
}

.advanced-creation-modal-button {
  width: 100%;
  padding: 3vw 0;
  border-radius: 20px;
  color: #1D1C1C;
  background: var(--color-primary);
}

.advanced-creation-modal-button-subtitle {
  font: 3.73vw Lato;
  color: #FFFFFF;
  opacity: 50%;
  text-align: center;
  margin: 8px 0 10px 0;
}


/* Title style */
.advanced-creation-modal-signup-link {
  font: 5.33vw Lato;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 7.46vw;
}

.advanced-creation-modal-subtitle {
  font: 4.26vw Lato;
}

/* Message style */
.advanced-creation-modal-message ul {
  list-style: none;
  padding: 0 5.33vw;
  text-align: left;
}

.advanced-creation-modal-message li {
  margin-bottom: 16px;
}

.advanced-creation-modal-message ul li:before{
  content: "\2022";
  color: var(--color-primary);
  margin-right: 8px;
  margin-left: -5.33vw;
}





#stream-goals-popup-container {
  --heart-margin: 66px;
  --bg-border-top-radius: 8vw;
  --transition-time: 0.5s;
  background-color: rgba(15, 17, 28, 0);
  padding-top: 20vw;
  top: 0;
  left: 0;
  right: 0;
  transition: background-color var(--transition-time) ease-out;
  pointer-events: none;
}
#stream-goals-popup-container.show-popup {
  background-color: rgba(15, 17, 28, 0.7);
  pointer-events: all;
}
#stream-goals-popup-container h1 {
  font-weight: 600;
  font-size: var(--font-size-30-px);
  padding: 0 10vw;
}
#stream-goals-popup-container .stream-goals-popup-bg {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-top-right-radius: var(--bg-border-top-radius);
  border-top-left-radius: var(--bg-border-top-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 13vw;
  bottom: -100%;
  position: relative;
  transition: bottom var(--transition-time) ease-out;
}

#stream-goals-popup-container.show-popup .stream-goals-popup-bg {
  bottom: 0%;
}

#stream-goals-popup-container .stream-goals-popup-icons {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 20vw;
}
#stream-goals-popup-container .star-big {
  z-index: 1;
}
#stream-goals-popup-container .heart-big:nth-child(1) {
  margin-right: calc(-1 * var(--heart-margin));
}
#stream-goals-popup-container .heart-big:nth-child(3) {
  margin-left: calc(-1 * var(--heart-margin));
  transform: rotate(45deg);
}

#stream-goals-popup-container .stream-goals-popup-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-weight: 400;
  font-size: var(--font-size-20-px);
  gap: 5vw;
}

#stream-goals-popup-container .stream-goals-popup-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#stream-goals-popup-container .stream-goals-popup-bottom button {
  width: 100%;
  max-width: 70vw;
  height: 12vw;
  font-size: var(--font-size-20-px);
  font-weight: 600;
}
.in-story-rename-modal {
    padding: 0 4.533vw 4.533vw 4.533vw;
    border-radius: 3.733vw;
    background: #fff;
    width: 88.533vw;
}

.in-story-rename-modal .textfield {
    padding: 1.6vw 4vw;
    border-radius: 1.6vw;
    border: 1px solid #BFBED6;
    background: white;
    text-align: center;
    height: 11.733vw;
    color: #272441;
    font-family: Lato;
    font-size: 4.267vw;
    font-style: normal;
    font-weight: 500;
    line-height: 5.867vw;
}

.in-story-rename-modal .modal-textinput-message {
    color: var(--Dark, #0F111C);
    text-align: center;
    font-family: Lato;
    font-size: 4.8vw;
    font-style: normal;
    font-weight: 700;
    line-height: 6.933vw;
    /* 144.444% */
}

.in-story-rename-modal .confirm-name-change {
    border-radius: 10.667vw !important;
    background: #6C74B4;
    color: #FFF;
    text-align: center;
    max-width: 32vw;
    margin: auto;
    /* Small Link */
    font-family: Lato;
    font-size: 4.267vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.in-story-rename-modal .textfield-container {
    height: unset;
}
.save-points-replay-points-menu {
  --transition-time: 0.5s;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  font: var(--font-body3);
  z-index: 1000;
}
.save-points-replay-points-menu-wrapper {
  width: 100%;
  height: 100%;
  background-color: rgba(15, 17, 28, 0);
  transition: background-color var(--transition-time) ease-out;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.save-points-replay-points-menu.show-popup .save-points-replay-points-menu-wrapper {
  background-color: rgba(15, 17, 28, 0.7);
}

.save-points-replay-points-menu-bg {
  --modal-height: 90dvh;
  --modal-top-padding: 7vw;
  --modal-bottom-padding: calc(5vw + var(--safe-area-bottom-custom, 0px));
  --modal-header-height: 23.2vw;

  height: var(--modal-height);
  width: 100%;
  padding: var(--modal-top-padding) 3vw var(--modal-bottom-padding) 3vw;
  position: absolute;
  bottom: -100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  --bg-border-top-radius: 8vw;
  border-top-left-radius: var(--bg-border-top-radius);
  border-top-right-radius: var(--bg-border-top-radius);
  color: var(--color-black);
  background-color: var(--color-white);

  transition: bottom var(--transition-time) ease-out;
}

.save-points-replay-points-menu.show-popup .save-points-replay-points-menu-bg {
  bottom: 0%;
}
.save-points-replay-points-menu-close-button {
  background: url('assets/img/ui/icon-close-light-gray.svg') center/contain no-repeat;
}
.save-points-replay-points-menu-content {
  width: 100%;
}

.save-points-replay-points-menu-header {
  height: var(--modal-header-height);
  width: 80%;
  margin: 0 auto;
  font: var(--font-body2);
}
.save-points-replay-points-menu-header-episode {
  color: var(--color-highlight-muted);
}
.save-points-replay-points-menu-header-question {
  padding-top: 3vw;
  font: var(--font-header4);
}

.save-points-replay-points-menu-body {
  display: flex;
  flex-direction: column;
  gap: 1.333vw;
  overflow-x: hidden;
  overflow-y: scroll;

  --scroll-area-height: calc(var(--modal-height) - var(--modal-top-padding) - var(--modal-bottom-padding) - var(--modal-header-height));
  max-height: var(--scroll-area-height);

  --scroll-right-margin: 2vw;
  padding-right: var(--scroll-right-margin);
  margin-right: calc(-1 * var(--scroll-right-margin));
}

.save-points-replay-points-menu-message {
  padding: 6vw 0;
  color: var(--color-desat-med);
  font: var(--font-body3);
  text-align: center;
}

/** save points list items **/
.save-points-replay-points-menu-item {
  border: 1.5px solid var(--color-desat-light);
  padding: 1.5vw;
  border-radius: 1.5vw;
}
.save-points-replay-points-menu-item-wrapper {
  display: flex;
  align-items: center;
  gap: 2.4vw;
  width: 100%;
  font: var(--font-body3);
}
.save-points-replay-points-menu-item-image {
  width: 20%;
  min-height: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.save-points-replay-points-menu-item-image img {
  object-fit: cover;
  width: 100%;
  border-radius: 2vw;
}
.save-points-replay-points-menu-item-center {
  width: 55.2%;
  padding-right: 3.2vw;
  text-align: left;
}
.save-points-replay-points-menu-item-button {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 20%;
}
.save-points-replay-points-menu-item-button button {
  width: 100%;
  padding: 1.5vw 3vw;
  color: var(--color-white);
  font: var(--font-body3);
  background-color: var(--color-highlight);
  border-radius: 1.25vw;
}
.save-points-replay-points-menu-item-over-title {
  color: var(--color-desat-med);
}
.save-points-replay-points-menu-item-title {
  margin: 0.5vw 0;
  font-weight: 500;
}
.save-points-replay-points-menu-item-see-progress {
  color: var(--color-highlight);
  font-weight: 700;
}

.save-points-replay-points-menu-loading {
  margin: auto;
}

.sign-in-prompt-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3vw;
  padding: 7vw 4vw;
}

.sign-in-prompt-modal .title {
  font: var(--font-header3);
  color: var(--color-white);
  font-weight: 900;
}

.sign-in-prompt-modal .description {
  font: var(--font-body3);
  color: var(--color-desat-light);
}

.sign-in-prompt-modal .google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14vw;
  width: 100%;
  margin: 2.7vw 0;
  color: var(--color-black);
  font: var(--font-body2);
  font-weight: 700;
  background: #FFFFFF url('assets/design-library/icons/external/google-color.png') 12vw/7vw no-repeat;
  border-radius: 15px;
}

.sign-in-prompt-modal .skip-button {
  font: var(--font-body3);
  color: var(--color-desat-med);
  border-bottom: 1px solid var(--color-desat-light);
}

.sign-in-prompt-modal .skip-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  font: var(--font-body4);
  color: var(--color-pop);
}

.sign-in-prompt-modal .skip-warning-icon {
  width: 4vw;
  height: 4vw;
  background: url('assets/design-library/icons/ui/ic-warning.svg') center/contain no-repeat;
}
.cm-my-progress {
  background: var(--color-white);
  color: var(--color-black);
  font: var(--font-body3);
}

.cm-my-progress-header {
  display: flex;
  flex-direction: column;
  margin-top: calc(0vw + var(--safe-area-top-custom, 0));
  padding: 0 5vw 3vw 5vw;
  border-bottom: solid 1px var(--color-desat-light);
}
.cm-my-progress .title-container {
  display: flex;
  align-items: center;
  height: 14vw; /* back button height */
}
.cm-my-progress .back-button {
  position: relative;
  width: 5vw;
}
.cm-my-progress .header-icon {
  height: 8.675vw;
  width: 8.675vw;
}
.cm-my-progress .title {
  margin-left: 1vw;
  font: var(--font-header3);
}
.cm-my-progress .description {
  color: var(--color-desat-dark);
  font-weight: 500;
}

.cm-my-progress .video-area {
  border-bottom: solid 1px var(--color-desat-light);
  border-top: solid 1px var(--color-desat-light);
  margin-bottom: 3vw;
  padding-bottom: 1.5vw
}

.cm-my-progress .memory-list-container {
  --header-margin-top: calc(5vw + var(--safe-area-top-custom, 0px));
  --header-height: calc(var(--header-margin-top) + 3vw + 14vw + 9.05vw); /* (margin + padding + title + description) */
  overflow-y: scroll;
  height: calc(100dvh - var(--header-height));
}
.cm-my-progress .memory-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5vw 1vw;
  padding: 5vw;
  padding-bottom: calc(5vw + var(--safe-area-bottom-custom, 0px));
}

.cm-my-progress .alert-message {
  padding: 2vw 5vw;
  margin: 4vw 6vw;
  font: var(--font-body3);
  font-weight: 500;
  text-align: center;
  background-color: var(--color-feature);
  border-radius: 6px;
}

/* ---- CHOICE MEMORY MY PROGRESS ITEM ---- */
.cm-my-progress-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}

.cm-my-progress-item .cm-icon {
  height: 43.733vw;
  width: 43.733vw;
  border-radius: 12px;
}
.cm-my-progress-item .cm-icon.frame {
  box-sizing: border-box;
  border: 2px solid white;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);
}

.cm-my-progress-item .name {
  margin-top: 2vw;
}
.cm-my-progress-item .badge-count {
  position: absolute;
  top: -2vw;
  right: -2vw;
  padding: 1vw 1.5vw;
  min-width: 4vw;
  color: var(--color-white);
  font: var(--font-body2);
  text-align: center;
  background: var(--color-pop);
  border-radius: 20px;
  z-index: 1;
}

/* ---- CHOICE MEMORY MY PROGRESS HUD ITEM ---- */
.cm-hud-memories-list {
  --my-progress-icon-size: 8.533vw;
  --my-progress-icon-top: 2vw;
  --hud-memory-size: 12.533vw;

  position:absolute;
  top: calc(var(--my-progress-icon-size) + var(--my-progress-icon-top));
  right: 2vw;
  display: flex;
  flex-direction: column;
  width: calc(var(--hud-memory-size));
}
.cm-my-progress-hud-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}
.cm-my-progress-hud-item .line {
  height: 8px;
  width: 4px;
  margin: auto;
  border-left: 4px solid rgba(255, 255, 255, 0.4);
}
.cm-my-progress-hud-item .cm-icon {
  height: 11.733vw;
  width: 11.733vw;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0px 0px 4px 0px #00000040;
}
.cm-my-progress-hud-item .badge-count {
  position: absolute;
  top: 1vw;
  left: -2vw;
  padding: 0.5vw 0.5vw;
  min-width: 5vw;
  color: var(--color-white);
  font: var(--font-body4);
  text-align: center;
  background: var(--color-pop);
  border-radius: 20px;
}

.game-socials-view .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-socials-view .close-button {
  position: absolute;
  top: 7vw;
  right: 3vw;
  height: 7vw;
  width: 7vw;
  margin: 3vw;
  background-image: url("assets/img/ui/close-24px.svg");
  background-color: rgba(0, 0, 0, 0.8);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
}

.game-socials-view .content-wrapper {
  position: relative;
  bottom: 0;
  height: 100%;
  background: linear-gradient(to bottom, transparent 10%, var(--color-white) 40%);
}

.game-socials-view .content-container {
  position: absolute;
  bottom: 0;
  height: 50%;
  width: 100%;
}

.game-socials-view .heading {
  font: var(--font-header1);
  color: var(--color-black);
  text-align: center;
}

.game-socials-view .description {
  margin: 3vw 5vw 12vw 5vw;
  font: var(--font-body1);
  color: var(--color-black);
  text-align: center;
}

.game-socials-view .button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5vw;
}

.game-socials-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vw;
}

.game-socials-icon {
  width: 26.133vw;
  height: 26.133vw;
}

.game-socials-follow-button {
  width: 24.8vw;
  padding: 2vw 3vw;
  font: var(--font-body1);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-highlight-muted);
  border-radius: 6px;
}
.language-menu {
  box-sizing: border-box;
  color: var(--color-white);
}

.language-menu-header {
  padding: calc(2vw + env(safe-area-inset-top, 0px)) 3rem 2vw 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(128, 130, 156, 0.5)
}
.language-menu .back-button {
  height: 3rem;
  width: 3rem;
  background: url('assets/img/ui/icon-arrow-back.svg') center/50% no-repeat;
}
.language-menu .title {
  width: 100%;
  font: var(--font-header3);
  text-align: center;
}

.language-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100dvh - 3rem - 4vw - env(safe-area-inset-top, 0px));
  padding-bottom: calc(5vw + env(safe-area-inset-bottom, 0px));
  overflow: scroll;
}
.language-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  padding: 6.133vw 8vw;
}
.language-text {
  display: flex;
  align-items: flex-end;
  gap: 5vw;
}
.language-code {
  font: var(--font-body1);
}
.language-label {
  flex: 1;
  font: var(--font-body2);
  color: var(--color-desat-light);
}
.language-check {
  height: 5vw;
  width: 5vw;
}
.language-check.checked {
  background: url('assets/design-library/ui/ic-check-desat-light.svg') center/contain no-repeat;
}

.beta-badge,
.showcase-story-time-label-challenge::after,
.event-type-competitive .competitive-event-item-header .type::after,
.competitive-flyout-content .event-heading.event-type-competitive::after,
.tournament-lobby-header-above-title::after {
  content: 'beta';
  color: var(--color-white);
  background: #D99615;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-13-px);
  border-radius: 1.4vw;
  padding: 0.1vw 1vw;
  margin-left: 2vw;
  text-transform: uppercase;
}

.event-type-competitive .competitive-event-item-header .type::after {
  font-size: var(--font-size-12-px);
  margin-left: 1vw;
}

.story-currency-switch,
.currency-switch-tool-tip-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.currency-switch {
  --bg-not-selected: #80829C1A;
  --bg-selected: #525B7E80;

  background: #000000AD;
  width: 28vw;
  height: 10vw;
  border-radius: 3vw;
  padding: 1vw;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  pointer-events: all;
  --switch-height: 12vw;

  --max-buttons-num: 3;
  --button-height: 17vw;
  --button-bottom-margin-multiplier: 6vh;
  --button-bottom-margin: calc(var(--button-bottom-margin-multiplier) + var(--safe-area-bottom-custom, 0px) + 12vw);
  position: absolute;
  right: 5vw;
  bottom: calc((var(--max-buttons-num) * var(--button-height)) + var(--button-bottom-margin));
}

.currency-switch-arcana {
  --button-num: 0;
  top: calc(34vh + var(--safe-area-top-custom, 0px) + (var(--button-num) * 17vw) - 2vw - var(--switch-height, 0));
  bottom: unset;
  right: 5vw;
}
.currency-switch-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}
.currency-switch-left,
.currency-switch-right {
  border-radius: 2.5vw;
  background: var(--bg-not-selected);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.currency-switch-left img,
.currency-switch-right img,
.currency-switch-center img {
  object-fit: contain;
}
.currency-switch-left img {
  width: 6vw;
}
.currency-switch-right img {
  width: 5vw;
}

.currency-switch-selected {
  background: var(--bg-selected);
}

.currency-switch-center {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.currency-switch-center img {
  width: 3vw;
}

.currency-switch-tool-tip-container .currency-switch-tool-tip {
  pointer-events: all;
}

.currency-switch-right img.highlight-animation {
  animation: hightligh 1.25s;
  animation-iteration-count: infinite;
  transform: scale(1);
}

@keyframes hightligh {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/** currency info popup **/
#currency-info-popup-container,
#currency-daily-gift-modal-container {
  --heart-margin: 66px;
  --bg-border-radius: 8vw;
  --transition-time: 0.5s;

  background-color: rgba(51, 46, 81, 0);
  top: 0;
  left: 0;
  right: 0;
  transition: background-color var(--transition-time) ease-out;
  pointer-events: none;

  display: flex;
  justify-content: center;
  align-items: center;
}
#currency-info-popup-container {
  visibility: hidden;
}
#currency-info-popup-container.show-popup,
#currency-daily-gift-modal-container.show-popup {
  background-color: rgba(51, 46, 81, 0.90);
  pointer-events: all;
}
#currency-info-popup-container.show-popup {
  visibility: visible;
}
#currency-info-popup-container h1 {
  font-weight: 600;
  font-size: var(--font-size-30-px);
  padding: 0 10vw;
}
#currency-info-popup-container .currency-info-popup-bg {
  width: 90%;
  padding: 1vw;
  border-radius: var(--bg-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  bottom: -100%;
  position: relative;
  transition: bottom var(--transition-time) ease-out;
  background: linear-gradient(180deg, #B5D8FF 0%, #354D91 100%);
}
#currency-info-popup-container .currency-info-popup-inner-bg {
  --padding: 10vw;
  --head-top-displacement: 13vw;
  --head-top-height: 55vw;

  background-color: #FFFFFF;
  border-radius: var(--bg-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  position: relative;
  width: 100%;
  height: 100%;

  padding: var(--padding);
  padding-top: calc(var(--head-top-height) - var(--head-top-displacement) - var(--padding) + 2vw);
  gap: 7vw;
}

#currency-info-popup-container.show-popup .currency-info-popup-bg {
  bottom: 0%;
}

#currency-info-popup-container .currency-info-popup-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-weight: 400;
  font-size: var(--font-size-20-px);
  gap: 5vw;
}

#currency-info-popup-container .currency-info-popup-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#currency-info-popup-container .currency-info-popup-bottom button {
  width: 100%;
  max-width: 70vw;
  height: 12vw;
  font-size: var(--font-size-20-px);
  font-weight: 600;
  border-radius: 1000px;
}

#currency-info-popup-container .currency-info-popup-head {
  position: absolute;
  top: calc(var(--head-top-displacement) * -1);
}

/** Currency daily gift modal **/
#currency-daily-gift-modal-container .currency-daily-gift-wrapper {
  --bg-border-radius: 4.5vw;
  width: 100%;
  bottom: -100%;
  position: relative;
  transition: bottom var(--transition-time) ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: var(--font-size-16-px);
}
#currency-daily-gift-modal-container.show-popup .currency-daily-gift-wrapper {
  bottom: 0%;
}

#currency-daily-gift-modal-container .currency-daily-gift-bg {
  width: 82%;
  padding: .5vw;
  border-radius: var(--bg-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: #FFEFD0;
}
#currency-daily-gift-modal-container .currency-daily-gift-inner-bg {
  --padding: 3.5vw;
  --head-top-height: 17vw;

  background: linear-gradient(180deg, #3A7CDF 0%, #FFF6D6 100%);
  border-radius: calc(var(--bg-border-radius) * 0.9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  height: 100%;
  position: relative;
  padding: var(--padding);
  padding-top: calc(var(--head-top-height) + 2vw);
  gap: 7vw;
}

.currency-daily-gift-top {
  width: calc(100% + 2*5vw);
  height: var(--head-top-height);

  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/banner.png') no-repeat center bottom;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #750101;
  font-size: var(--font-size-25-px);
  font-weight: 600;
  position: absolute;
  top: 1vw;
}

.currency-daily-gift-alert-title-background,
.currency-daily-gift-alert-title-background::after {
  position: absolute;
  top: 5.0vw;
  left: 50%;
  transform: translateX(-50%);
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/banner-bottom.png') no-repeat center;
  background-size: contain;
  height: 14vw;
  width: 95%;
}

.currency-daily-gift-alert-title-background::after {
  content: '';
  background: url('https://d31micz62sw9di.cloudfront.net/prod/icons/contests/banner-bottom-v3.png') no-repeat center;
  background-size: contain;
  top: -1.5vw;
  height: 17.1vw;
}

.currency-daily-gift-close {
  position: absolute;
  right: 3vw;
  top: -4vw;
}
.currency-daily-gift-progress-container {
  width: 100%;
  padding: 0 3vw;
}
.currency-daily-gift-progress {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-13-px);
  gap: 2vw;
}
.currency-daily-gift-progress-text {
  flex-shrink: 0;
}
.currency-daily-gift-progress-bar {
  height: .75vw;
  width: 100%;
  background: #0F3B985C;
}
.currency-daily-gift-progress-bar-inside {
  width: 30%;
  height: 100%;
  background: var(--color-white);
}
.currency-daily-gift-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;

  max-height: calc(60dvh - var(--safe-area-top-bottom-custom, 0px));
  overflow-y: scroll;
}

/** Currency daily gift modal single day **/
.currency-daily-gift-day-container {
  --claimed-opacity: .4;
  --item-height: 14vw;

  background: #082D831C;
  width: 100%;
  height: var(--item-height);
  border-radius: 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw 5vw;
  color: var(--color-black);
  font-size: var(--font-size-16-px);
  font-weight: 500;
}
.currency-daily-gift-day-container-left,
.currency-daily-gift-day-container-right {
  display: flex;
  min-width: 15vw;
  justify-content: center;
  align-items: center;
}
.currency-daily-gift-day-container-left {
  flex-direction: column;
  align-items: flex-start;
}
.currency-daily-gift-day-container-right {
  gap: 1vw;
  justify-content: flex-start;
  position: relative;
}

.daily-gift-claimed .currency-daily-gift-day-container-left,
.daily-gift-claimed .currency-daily-gift-day-container-middle,
.daily-gift-claimed .currency-daily-gift-day-container-right .currency-daily-gift-day-container-sapphire-icon {
  opacity: var(--claimed-opacity);
}

.daily-gift-claimable {
  border: .5vw solid var(--color-white);
}
button.daily-gift-claim-button,
.daily-gift-claim-countdown {
  background: linear-gradient(180deg, #FFE8BB 0%, #FCD188 100%);
  border: 2px solid #FFFFFFB2;
  width: 21vw;
  height: 8vw;
  font-weight: 500;
  font-size: var(--font-size-16-px);
  border-radius: 1.25vw;
  pointer-events: all;
  color: var(--color-black);
}
button.daily-gift-claim-button.claim-loading {
  pointer-events: none;
  background: #00000059;
  color: var(--color-white);
}
.daily-gift-claim-countdown {
  background: #00000059;
  font-size: var(--font-size-13-px);
  color: var(--color-white);
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.currency-daily-gift-day-container-right button.daily-gift-claim-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.currency-daily-gift-day-container-title {
  color: #255797;
  font-size: var(--font-size-17-px);
}

.daily-gift-capstone {
  height: calc(1.5 * var(--item-height));
  background: linear-gradient(180deg, #FFFFFF 0%, #D8F9FF 100%);
  padding-right: 1vw;
}

.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-container-left,
.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-container-middle,
.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-container-right .currency-daily-gift-day-container-sapphire-icon {
  opacity: 1;
}

.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-capstone-image {
  opacity: var(--claimed-opacity);
}
.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-container-middle span {
  display: none;
}
.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-container-title {
  font-size: var(--font-size-13-px);
}

.daily-gift-claimed.daily-gift-capstone .currency-daily-gift-day-container-sapphire-confirmed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15vw;
}
.daily-gift-countdown {
  color: var(--color-white);
}

.daily-gift-capstone .daily-gift-countdown {
  color: var(--color-black);
}

.currency-daily-gift-complete {
  color: var(--color-white);
  font-size: var(--font-size-13-px);
  font-weight: 600;
}

/** reward daily gift box **/
.currency-section-daily-gift-box {
  background: linear-gradient(180deg, #89B8FF 0%, #5497FB 100%);
  width: 100%;
  height: 20vw;
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5vw;
  padding: 2vw 3.5vw;
  border-radius: 2vw;
  margin-top: 2.133vw;
}
.currency-section-daily-gift-box-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.currency-section-daily-gift-box-title {
  font-size: var(--font-size-16-px);
  font-weight: 700;
}
.currency-section-daily-gift-box-progress {
  width: 100%;
}

/* ---- HEARTS TRACKER ---- */
.daily-goals-tracker {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 21vw;
  height: 43vw;
  margin-top: 4vw;
  padding: 0 5.25vw;
  color: var(--color-black);
  background: var(--gradient-daily-goals);
  border-radius: 10px;
}

.daily-goals-tracker .goal-tag-container {
  position: absolute;
  top: 4.5vw;
  left: 5.25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1vw;
  font: var(--font-body3);
  color: var(--color-pop);
}

.daily-goals-tracker .goal-details {
  margin: 11vw 3vw 0 0;
}

.daily-goals-tracker .goal-title {
  font: var(--font-header3);
  color: var(--color-dark);
}

.daily-goals-tracker .goal-description {
  margin: 1vw 0;
  font: var(--font-body3);
  color: var(--color-background-light-v2);
}

.daily-goals-tracker .goal-progress {
  display: flex;
  align-items: center;
  font: var(--font-body4);
}

.daily-goals-tracker .goal-progress-bar {
  margin-left: 2vw;
  width: 100%;
  background-color: var(--color-desat-med);
  border-radius: 100px;
  overflow: hidden;
  opacity: 0.25;
}

.daily-goals-tracker .goal-progress-bar-fill {
  background-color: var(--color-pop);
  height: 5px;
  width: 0%;
}

.daily-goals-tracker .goal-timer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3vw;
  font: var(--font-body3);
  color: var(--color-background-light-v2);
}

.daily-goals-tracker .goal-timer {
  height: 6.5vw;
  width: 21.5vw;
  padding-left: 6.5vw;
  line-height: 7.5vw;
  background: #FFF url('assets/design-library/icons/daily_goals/ic-clock.svg') 10%/18% no-repeat;
  border-radius: 15px;
  box-shadow: 0px 0px 4px 0px #00000040;
}

.daily-goals-tracker .reward-container {
  margin-top: 4.3vw
}

.daily-goals-tracker .reward-title {
  margin-bottom: 1vw;
  color: var(--color-desat-med);
  font: var(--font-body4);
  text-align: center;
}

.daily-goals-tracker .reward-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0px 0px 8px 0px #00000040;
}

.daily-goals-tracker .reward-image {
  height: 14.7vw;
  width: 14.7vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.daily-goals-tracker .reward-name {
  font: var(--font-body4);
  margin: 2vw 0 1vw 0;
}

.daily-goals-tracker .reward-collect-button {
  margin-top: 2.5vw;
  padding: 0.5vw;
  color: var(--color-white);
  font: var(--font-body3);
  text-align: center;
  background: var(--color-pop);
  border-radius: 4px;
}

.daily-goals-tracker .reward-placeholder {
  height: 21vw;
  margin: auto 0;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0px 0px 8px 0px #00000040;
}

.daily-goals-tracker .reward-placeholder-image {
  display: flex;
  align-items: center;
  height: 12vw;
  width: 12vw;
  margin: 4.5vw auto;
  background: url('assets/design-library/ui/icon_large_heart.png') center/contain no-repeat;
  opacity: 0.2;
}

.daily-goals-tracker .task-timer-container {
  position: absolute;
  bottom: 3vw;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1vw;
  width: 100%;
  font: var(--font-body4);
}

/* ---- DOUBLE STREAK TRACKER ---- */
.double-streak-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4vw;
  height: 43vw;
  margin: 2.133vw 0;
  padding: 3.467vw 3.291vw 2.4vw 4.8vw;
  color: var(--color-white);
  border-radius: 12px;
}

.double-streak-tracker .goal-left-container {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 35vw;
}

.double-streak-tracker .goal-reset-timer {
  font: var(--font-body4);
  color: var(--background-color);
  text-align: center;
  width: 100%;
}

.double-streak-tracker .goal-right-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  width: 43.908vw;
}

.double-streak-tracker .goal-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4vw;
}

.double-streak-tracker .goal-tooltip-button {
  position: absolute;
  top: -2vw;
  right: -2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.6vw;
  width: 5.6vw;
  font-size: 15px;
  background: rgba(15, 17, 28, 0.35);
  border-radius: 100px;
}

.double-streak-tracker .goal-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  gap: 2vw;
}
.double-streak-tracker .goal-title {
  font: var(--font-body3);
  color: var(--color-feature);
}
.double-streak-tracker .goal-description {
  font: var(--font-header4);
  text-align: center;
}

.double-streak-tracker .goal-progress-container {
  display: flex;
  align-items: center;
  gap: 0vw;
  width: 100%;
} 
.double-streak-tracker .goal-progress-count {
  font: var(--font-body4);
  font-weight: 500;
  color: var(--color-black);
}
.double-streak-tracker .goal-progress-bar {
  margin-left: 2vw;
  height: 5px;
  width: 100%;
  background-color: rgba(30, 28, 44, 0.5);
  border-radius: 100px;
  overflow: hidden;
} 
.double-streak-tracker .goal-progress-bar-fill {
  height: 5px;
  width: 0%;
  background-color: var(--color-white);
  border-radius: 100px;
}

.double-streak-tracker .goal-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vw;
} 

.double-streak-tracker .goal-reward {
  width: fit-content;
  font: var(--font-body3);
  padding-right: 5.334vw;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

.double-streak-tracker .goal-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.467vw;
  width: 32vw;
  font: var(--font-body3);
  color: var(--background-color);
  text-align: center;
  background-color: var(--color-white);
  border-radius: 100px;
}

.double-streak-tracker .goal-action-button.disabled {
  background-color: rgba(255, 255, 255, 0.2);
  border: solid 1.5px var(--color-white);
  color: var(--color-white);
  pointer-events: none;
}



.progress-toast-popper-container {
  margin-top: 5vw;
}

.progress-toast {
  position: relative;
  display: flex;
  align-items: center;
  width: 75%;
  margin: 2vw auto 0 auto;
  padding: 1.6vw;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  animation: progressToastSlideIn 0.3s ease-out forwards;
}

@keyframes progressToastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progressToastSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.progress-toast.sliding-out {
  animation: progressToastSlideOut 0.3s ease-in forwards;
}

.progress-toast .memory-icon {
  width: 10.133vw;
  height: 10.133vw;
  border-radius: 4px;
}

.progress-toast .progress-container {
  flex: 1;
  padding-top: 3.2vw;
}

.progress-toast .progress-text {
  margin-top: 1vw;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 3.84vw;
  color: var(--color-highlight-muted);
}

.progress-toast .progress-text-value {
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 3.84vw;
  color: var(--color-white);
}

.progress-toast .progress-bar {
  height: 4px;
  background: rgba(128, 130, 156, 0.37);
  border-radius: 20px;
  overflow: hidden;
}

.progress-toast .progress-fill {
  height: 100%;
  background: var(--color-pop-2);
  border-radius: 20px;
  width: 0;
  transition: width 0.3s ease-out;
}

.progress-toast .gift-icon-container {
  min-width: 8vw;
  min-height: 8vw;
  display: flex;
  align-items: center;
  gap: 1.6vw;
  flex-direction: column;
}

.progress-toast .gift-icon {
  width: 8vw;
  height: 8vw;
  background-image: url('assets/design-library/icons/ui/ic-giveaways-pop.svg');
  border-radius: 4px;
}

.progress-toast .gift-icon-sapphires {
  width: 6vw;
  height: 6vw;
}

@keyframes giftBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.gift-icon.bounce,
.gift-icon-container.bounce {
  animation: giftBounce 1s ease-in-out infinite;
}

.vjs-svg-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  fill: currentColor;
  height: 1.8em;
  width: 1.8em;
}
.vjs-svg-icon:before {
  content: none !important;
}

.vjs-svg-icon:hover,
.vjs-control:focus .vjs-svg-icon {
  filter: drop-shadow(0 0 0.25em #fff);
}

.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  text-align: center;
}

@font-face {
  font-family: VideoJS;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABTsAAsAAAAAIpAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV32Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADtIAABckI4l972hlYWQAABFkAAAAKwAAADYsvIjpaGhlYQAAEZAAAAAdAAAAJA+RCL1obXR4AAARsAAAABcAAAC8Q2YAAGxvY2EAABHIAAAAYAAAAGB7CIGGbWF4cAAAEigAAAAfAAAAIAFAAI9uYW1lAAASSAAAASUAAAIK1cf1oHBvc3QAABNwAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7yDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADaGCyYAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1hU17U+a5/HMA4iA3NmVBDmoQwP5TFnHlFeA4gYiUFRQINoSCBAyK3G2yi+0aipYtFcHYo2xsb4NiY3+VrNxSaX5uvt495ozNdoYoxmem2/L8HGpLc+InB279pnhlGr5mvL4eyz99nrrL32eu1/DQcc/okdYgdHOA6MQKp4r9gx0EcMHMezOalVasW5BM7NcXoSb9fFgE6KtSSBxWz1FYDPG+vMBGcKb9cebu2VS5s2aaTkCvRSf6C7Y+Ppibm5E09v7IDs2/3uZQtbD0zIyppwoHXh/93ukmyYgdePNRp65p5v+3v/9otQl2O7wP34cT88p8Md2YxpYLQZoRcy6FlSBRnwnGAe6BPMSCZo+7NJVqS0cE4uHendzhSnbPH6TDqL1+Nme5LZXkCHnGyoH0kne30WH+gswhm3q+pt/mTas9NLS64GnjmSlTPw0wVQT/ewRaBgxtydy3cuUB9/6SW+vb5yRvr+t0eOfPKJZ/9t3+4tL7xj32Xd3thCxi+ge6ifdsAN+l5+wi5HQ/cCoeull1AszS7CUfEcJzK7sKWJAdJhCd0sPM4+EY7QDm5ov08hXRQXE5bf6PV5Q5+IjW7X7Nku92Ask4l2hCRRD6TPqISiCJeQna3SCFwrhrNzXHzo4yFevBwxpzxk8WCIIfkvVEKVy32SbT8n68gzgaslpaiO2zIGIyuSb7RNf9HSuN26y/7OC1tgEmpiyA6aD4qcgTOiLThwGG0eB694FI8NHLLN6OBlRVaMxNAFS4JdXUG6mW8PwpKuYLCLXKGbu8iwYNdgO06Sn3Th+/vyZAxs8Ro30DjHe9gy8Fywi24OMm7Qyzh3MTZVOMYhLBnoC+J79lpTUyQmorjhnMwlcQ5uPEYGpDjsOkkH49BjQLQBqs3jFtFdJNlksYmoQFDArLh8Xh+Qd6Ghcsb6FUuehDi+U/lqD71K/qiegeV1imcwjl7ExwiSrf4BZyCujV6cVcFo6VX+G9IcPyFjJnUufbU/jzrL1X99as36reXl8K32nFaOr+E8jWJEcJ55DpMVfSMe95/AJaOsGBH2GJCNpiRQbK4C8BjdmQA22QY2j03Em13i2YHqtNLU1NI04Yj2HJgA6fQc6VPNpA/D+Ryks554NnVy2mB72uRUfPLsqR4N0LOBQKArwJYO+5W2fgZX8oC1HR6HjNaQTVIG2FPwnTcXXGZZfNB7TE6pTKZUwaw91XWLAoFFGcnB5PHjsckgBjbWutrL+0h5Y1xw3DRGDumsnXb3MJwXrJIN5U7m0rgJ3yG5w4he5ckFG4pmNEkOm0/xOO4r4yL87wqtQM+hiJIVp+6iG2wPBKD35ElGkDx+UfC2v1mFG1o+M3AjNFty8biKMXwzyxnZLds8wYD2BxmCPHAldPOeLsy/0BugftYhVYFAhO8SqQ0j3oK7dHJZnI/jxmUS4onlxskSF8thmvNZjIrRZwEPxr0lBuLRuz3oy/FOHCsxwOPYh2M+e9u3J5pgPYz9gp6G7C9m0A11F9ddqKMfV+4sbq45/YspOysXvT+3pdFdYNg2fHbW8Dz301MqDVuGrz0Fuh0YMW8mddrpqzST7rV9BcvqPoNvadRndWp0p8HvbiqrFj5yFQ/vNFSXDpxpLEFWp+DcrF3FT1afWshFcmCfeAMjEvO65i0Y6XijQfSRPWx3TV/Df7Km3E1l+kLt56s/rwVzuRusNMhudznkwdLaS+QNdeal2jDPP4l9qHc98vTYZOSkxzD+njBWVWjFPKgipx6DkWvXQiW8OYcewVHE5yukinDMcfGgc0opDltYKDxIGBedkzc6jSfE7tlvESCDFUw0Hx0opS+U0lHCxNottbNWSxX9zZVvEhKWUSyBpaXwBc2a98M6UqPeXAs/GDon8Ax7hsthO8cM5HU7Ad0UvRR9lHmtyQKZ4MAe814X5h9MSUkQmhf96eVJ6p90OjIiqSIjvykvr2l5U55O/fPQKD+jIomYpNyGJQ25uQ2kIikRfAmuBHCPsWqkSDEqgZ5KDI2sifS/R43MbZg0idFHbCPNxXxZws1ACVE6hAhOdJwRkJLFBLPZpRGYJ50pko6XzMkgmSx40ljik6AQcKhFnLcQE6rF7PXFe1Ocoj0T3AXgSgJTDIhHRfHlYZKuSzc6uievOJGXY+i5GJkkTp7UM3y0LqATDbtFcbdBxO7o4T25JYlEjoH0uynUh8rapkxp62QN70svSF+hT4gGPlovlmcm/ComLi7mV4kTykV9NFWjE/QrwgQ4uIcAP0rQF4VZYRP2o3PhHHzfPMJj9Ir+uzKUlrH49ntT18AVvj1sc3YGjUT/Mt2Dxawa8ArcA7bCQIpvfwAYu22vEG/No/5RvPdA7g+AelLrPwzy+LtkLPhnpIxH14m4EYq8eeMHbPEPNm6G7Nv9B4jcFPZ8bJj0SEjP3MPgQdKTqqEoy2v6G32P/Y6dxOv04AxnoAeq+GILvUavtYCBXm+BaIhuodcfrN5B/V2EYMCPh+SxavjGyPwV0x4CJgUPGT0mQaODGBACIJZGsMXwAD0LGXx7l3CdAcKMIKI+f5CepWeD0BvyU/GcdBxPF8SwejC6LGZmAURFdsSWKR5HyHld2kbdIZO1Ixx+bnnzU7n5+blPNV9jnUDWhP2tC68tbN3PVIldsQPxSAcSpjOav7Q05uXn5zW2LLvDXn9B6syscPy9iDLEMmSrJz6nYuWMipukjM0AH8JkGS+XFyMRkzSCH7KD/hwm172SAyZYumHlefr5AddrtA0O0TnwaVZxcRY9Bfukn9Gf05N1r9DV9MoBsJ1f+ZrqUvtPHizJAntWybv7hmqLt6QLuK6ZS9Fqi1jO5rDoWPZXXII5Tgajg53cIXCjDCGIcYrRIY2n6+mXOa/W0bdhau3ryiEYe2FV/5oeaIYK/5w5frCyll6/cYO8DiNhw6t1MBWmznt91QX62UF1N7l0eHBZTRGpKaqpKVIPF9UcIzmReud9TSY75+K899GHbBu6wjoR7RKKZVYiYxSPf5/2wJT5e3NAhmUbVn5KLx1Ujg0+BGvpAIh0DezInTkzF37KVocxrKU3r1+XLtAe2lO3l66kfQfB/unKY+q8N375Ru8bc4pJXfEcESU95q+p8ZNZRTWH1d9FzvUdYXk5rLkcdkEisoKKVHQW/b3GEx6tPaYcoJfOr9wAbSBnv1IHpep0OExr4LPMkpJM+j7sly7UHkOzXjoAZljHCGiyegtNlwljM0v+c19ET9Pvst09a2Mtgcf5/ZSzYO5h1156+eyydfAsxGa9XAuF6vzjh6CssLq6ECysperXX0sX5h5ZdpZe3guxsGIPEtHk/aqXX1hVqP5HYVVVISkrrNqvXorIc+5Ou91Hnr/LcD2afi6eX7UBloOcs7cOpqgGaNfs1g7bNbs9z6wASaylN69d0/TFTIz6Ws8+oGV3mE2612wRTHKcVUbhjKadebloMc+dyXgMVtVK6BwMB/+mVW09igdRBWaRtNQX59d/VD//xdQ0TCiYNj1KT9sq6Wdu5WTbqk3qDXyDaLa1fv621LS01G3z61sD6lH8lAxDLicV921s6Bf92JOYvzNYCL1khbqBXEFUzC521N5NyzNaQIWhjyFyDoBIVrAjmv2UEaLlI+c6zw1jmVIPLLLZZUTj6GxGHW+mq1tgHXR2D85p4Q934+jLbtjVLcyCdS10NVzpHqxp4Q/hK7WopY/NRGx9HGsPGdFjOjcpjBnGYMVqY/4eqT5khWEHWUup2A/pTw7pdWgsWft7ETUERL96nRg0HNFPmCYba6pylECaExX89A9WLUOVB4oKLu/o1oqSYHCgLzBUlAz8hNFDRpeSU1XT+LRmDUgPaKbYdHDn9suF/tu13nHJij0N97LfS0QmqONuyONk7zvUI6Qa0pF9f2+oABL92AT6e0U//z9YqAiWtJLU1JK0gS+1aacwamiNqK067u9ZQ8f1d4qLodMzz3uL89Z68V/Hnr++hXWUuHgw8dfi972PeTyPefu3aNNucemQ74qFuIaJnVkOu4Q+yjuwmmC1FqZpl1i4uzoPxjkpPf3Xv545tl26Rr+dOvUd+omqJzch9dOeU7f10Y64nMcKK137DccIZq2WdXtdZjbEoLSzHwiMtrjYLDxpHQW8gjMX6XFYAE2zSWVD04EGYSs9MbO6sEo20BMEAB4mpvSypsKjZ4Stgzb+c3A9/MQT2+vrBy+qvyFxLUtLlSRF/Ri2wjfZ2dus2Q8lXx4608/jnqK5OOap6NY2PSjYYnECCjiEeLJll/pbmqfeIK+ps3+MxrlEhqmTPipVP7kqlF4VhpEb6r+Q7YOJg38kJ9SHBf3NBl6+9YchfbUjb5ahLSzUM3kPHmwFAsZ5rpai0S7E5xWzZ1j+fW7zsUWP2g5NXTw52ySCTrgG0+lbw60l2Y/CB185CoA8NK+tbRKxfjy6pm5hzQRRR+cMqv1Jbiw6STivtEvt3DRcy0QEh92JlUGo2PG4tSKHl00YD6xc8CK+YPYyy3io2lN8BcSjKRzrIV6ypOAobqxViJPaT9M9Hy5szY33mp7OX/Zu89L/7Ww5vqY2Y8b0pKgoiUhG5cPDPzq8qTV/WkzUOIvXVVA96kmjcBrr3HrYC/Wn+fYP6Z7T1rqy3zknbvqma/FvVk96fNXGkuaXrdHW5JGSxZT/2I/O73v+yNWafMdzc5NdxYurHs6h86e01sLKLz9EBrg+x36rxAaED7hRnAMx7Vzu+9wabh3zG8XLQjx0ablUJzmxdErxYT3kzQSd0SSafVqF5PXgpp0OyYJ1EyNHpGUZmvK575ySzd85JSqF7IBzSAbMM04+MbE58xF3/njXOGecSaermlw2y9PsSQdytLJVr8t+wg+rR8cZYoeNxVIzNdk3Bngi8U5LAlgTFoQnzJCa5EsCgYhCaGL+qPj7TdhG31p9tej3R04N//PXxNwJvyUqwaJqRPJY98TJ5TPndmflRAkAhBfe46sfKW5wizSge08Xb7Ca/GUVs55trngkKkrUS2WPzKttaaqq+idmahugkY+W6fN0I6i3gPt/x88U4wAAeJxjYGRgYADiGU9YXsXz23xl4GZnAIFH7fO+IdMc/WBxDgYmEAUASbMKwAB4nGNgZGBgZwABjj4Ghv//OfoZGBlQgT4ARicDZAAAAHicY2BgYGAfxJijD8Fmu4EqBwCSpgKpAAAAAAAADgBoAH4AzADgAQIBQgFsAZgB7gIuAooC0AL8A2IDjAOoA+AEMASwBNoFCAVaBcAGCAYuBnAGrAb2B04HigfSCCoIcAiGCJwIyAkkCVYJiAmsCfIKIApWCsQLknicY2BkYGDQZ2hmYGcAASYg5gJCBob/YD4DABqrAdAAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2ReVPbMBDF/ULi2EkDBFqO3gdHLxUzDB9IkdexBllydRD49ihO3Ckz7B/a31utZnafkkGyiXnyclxhgB0MMUKKMTLkmGCKV5hhF3vYxxwHOMRrvMERjnGCU7zFO7zHB3zEJ3zGF3zFN5zhHBe4xHf8wE/8wm8w/MEVimTYKv44XR9MSCsUjVoeHE3vjQoNsSZ4mmxZmVWPjSz7jlou6/0qKOWEJdKMtCe793/hQfqxa6XWZHMXFl56RS4TvPXSaDeoy0zUUZB109KstDK8lHo5q6Qi1hcOnqkImubPS6aqRq7mlnaEWabub4iYblba3SRmgldS0+FWdhNtt04F14JUaqkl7tcpOpJtErvNt3Bd9HRT5JWxK25Ldjvp6br4hzfFiIdSmlzTg2fSUzNrLd1LE1ynxq4OVaVoKLjzJ60UPtj1RKzHzsbjly6inVnFBS2MucviPncU7Rr7lfTxRepDs1A2j3ZHRc7PuzFYSfE3ZOd4kjwBy227hA==) format("woff");
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "\f101";
}

.vjs-icon-play-circle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play-circle:before {
  content: "\f102";
}

.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: "\f103";
}

.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
  content: "\f104";
}

.vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
  content: "\f105";
}

.vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
  content: "\f106";
}

.vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
  content: "\f107";
}

.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\f108";
}

.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\f109";
}

.vjs-icon-spinner {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-spinner:before {
  content: "\f10a";
}

.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
  content: "\f10b";
}

.vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before {
  content: "\f10c";
}

.vjs-icon-hd {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-hd:before {
  content: "\f10d";
}

.vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
  content: "\f10e";
}

.vjs-icon-downloading {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-downloading:before {
  content: "\f10f";
}

.vjs-icon-file-download {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-file-download:before {
  content: "\f110";
}

.vjs-icon-file-download-done {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-file-download-done:before {
  content: "\f111";
}

.vjs-icon-file-download-off {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-file-download-off:before {
  content: "\f112";
}

.vjs-icon-share {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-share:before {
  content: "\f113";
}

.vjs-icon-cog {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-cog:before {
  content: "\f114";
}

.vjs-icon-square {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-square:before {
  content: "\f115";
}

.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before {
  content: "\f116";
}

.vjs-icon-circle-outline {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-circle-outline:before {
  content: "\f117";
}

.vjs-icon-circle-inner-circle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-circle-inner-circle:before {
  content: "\f118";
}

.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
  content: "\f119";
}

.vjs-icon-repeat {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-repeat:before {
  content: "\f11a";
}

.vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
  content: "\f11b";
}

.vjs-icon-replay-5, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-replay-5:before, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before {
  content: "\f11c";
}

.vjs-icon-replay-10, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-replay-10:before, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
  content: "\f11d";
}

.vjs-icon-replay-30, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-replay-30:before, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before {
  content: "\f11e";
}

.vjs-icon-forward-5, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-forward-5:before, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before {
  content: "\f11f";
}

.vjs-icon-forward-10, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-forward-10:before, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
  content: "\f120";
}

.vjs-icon-forward-30, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-forward-30:before, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before {
  content: "\f121";
}

.vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
  content: "\f122";
}

.vjs-icon-next-item {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-next-item:before {
  content: "\f123";
}

.vjs-icon-previous-item {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-previous-item:before {
  content: "\f124";
}

.vjs-icon-shuffle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-shuffle:before {
  content: "\f125";
}

.vjs-icon-cast {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-cast:before {
  content: "\f126";
}

.vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: "\f127";
}

.vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: "\f128";
}

.vjs-icon-facebook {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-facebook:before {
  content: "\f129";
}

.vjs-icon-linkedin {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-linkedin:before {
  content: "\f12a";
}

.vjs-icon-twitter {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-twitter:before {
  content: "\f12b";
}

.vjs-icon-tumblr {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-tumblr:before {
  content: "\f12c";
}

.vjs-icon-pinterest {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-pinterest:before {
  content: "\f12d";
}

.vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
  content: "\f12e";
}

.video-js {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  word-break: initial;
}
.video-js:-moz-full-screen {
  position: absolute;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js[tabindex="-1"] {
  outline: none;
}

.video-js *,
.video-js *:before,
.video-js *:after {
  box-sizing: inherit;
}

.video-js ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
.video-js.vjs-9-16,
.video-js.vjs-1-1 {
  width: 100%;
  max-width: 100%;
}

.video-js.vjs-fluid:not(.vjs-audio-only-mode),
.video-js.vjs-16-9:not(.vjs-audio-only-mode),
.video-js.vjs-4-3:not(.vjs-audio-only-mode),
.video-js.vjs-9-16:not(.vjs-audio-only-mode),
.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  height: 0;
}

.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
  padding-top: 56.25%;
}

.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
  padding-top: 75%;
}

.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
  padding-top: 177.7777777778%;
}

.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  padding-top: 100%;
}

.video-js.vjs-fill:not(.vjs-audio-only-mode) {
  width: 100%;
  height: 100%;
}

.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-js.vjs-audio-only-mode .vjs-tech {
  display: none;
}

body.vjs-full-window,
body.vjs-pip-window {
  padding: 0;
  margin: 0;
  height: 100%;
}

.vjs-full-window .video-js.vjs-fullscreen,
body.vjs-pip-window .video-js {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
body.vjs-pip-window .video-js {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  display: block;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

.vjs-pip-container .vjs-pip-text {
  position: absolute;
  bottom: 10%;
  font-size: 2em;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.5em;
  text-align: center;
  width: 100%;
}

.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
.vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
.vjs-layout-small.vjs-pip-container .vjs-pip-text {
  bottom: 0;
  font-size: 1.4em;
}

.vjs-hidden {
  display: none !important;
}

.vjs-disabled {
  opacity: 0.5;
  cursor: default;
}

.video-js .vjs-offscreen {
  height: 1px;
  left: -9999px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vjs-no-js {
  padding: 20px;
  color: #fff;
  background-color: #000;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}

.vjs-no-js a,
.vjs-no-js a:visited {
  color: #66A8CC;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.63332em;
  width: 3em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  margin-top: -0.81666em;
  margin-left: -1.5em;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 0.3em;
  transition: all 0.4s;
}
.vjs-big-play-button .vjs-svg-icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  transition: all 0s;
}

.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
  display: none;
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
  display: block;
}

.video-js button {
  background: none;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.video-js.vjs-spatial-navigation-enabled .vjs-button:focus {
  outline: 0.0625em solid white;
  box-shadow: none;
}

.vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

.video-js .vjs-control.vjs-close-button {
  cursor: pointer;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0.5em;
  z-index: 2;
}
.video-js .vjs-modal-dialog {
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
  overflow: auto;
}

.video-js .vjs-modal-dialog > * {
  box-sizing: border-box;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px 24px;
  z-index: 1;
}

.vjs-menu-button {
  cursor: pointer;
}

.vjs-menu-button.vjs-disabled {
  cursor: default;
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
  display: none;
}

.vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: auto;
}

.vjs-menu .vjs-menu-content > * {
  box-sizing: border-box;
}

.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
  display: none;
}

.vjs-menu li {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.js-focus-visible .vjs-menu li.vjs-selected:hover {
  background-color: #fff;
  color: #2B333F;
}
.vjs-menu li.vjs-selected .vjs-svg-icon,
.vjs-menu li.vjs-selected:focus .vjs-svg-icon,
.vjs-menu li.vjs-selected:hover .vjs-svg-icon,
.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon {
  fill: #000000;
}

.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
  background: none;
}

.vjs-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0em;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
  left: unset;
  right: 1em;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 5em;
}

.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 10em;
}

.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 14em;
}

.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 25em;
}

.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
  display: block;
}

.video-js .vjs-menu-button-inline {
  transition: all 0.4s;
  overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
  width: 2.222222222em;
}

.video-js .vjs-menu-button-inline:hover,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline.vjs-slider-active {
  width: 12em;
}

.vjs-menu-button-inline .vjs-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  transition: all 0.4s;
}

.vjs-menu-button-inline:hover .vjs-menu,
.vjs-menu-button-inline:focus .vjs-menu,
.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  display: block;
  opacity: 1;
}

.vjs-menu-button-inline .vjs-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-js .vjs-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js.vjs-spatial-navigation-enabled .vjs-control-bar {
  gap: 1px;
}

.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
  display: flex !important;
}

.vjs-has-started .vjs-control-bar,
.vjs-audio-only-mode .vjs-control-bar {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: visibility 1s, opacity 1s;
}

.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
  display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-js .vjs-control {
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  flex: none;
}

.video-js .vjs-control.vjs-visible-text {
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-button > .vjs-icon-placeholder:before {
  font-size: 1.8em;
  line-height: 1.67;
}

.vjs-button > .vjs-icon-placeholder {
  display: block;
}

.vjs-button > .vjs-svg-icon {
  display: inline-block;
}

.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: 0em 0em 1em white;
}

.video-js *:not(.vjs-visible-text) > .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.video-js .vjs-custom-control-spacer {
  display: none;
}

.video-js .vjs-progress-control {
  cursor: pointer;
  flex: auto;
  display: flex;
  align-items: center;
  min-width: 4em;
  touch-action: none;
}

.video-js .vjs-progress-control.disabled {
  cursor: default;
}

.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-liveui .vjs-progress-control {
  display: flex;
  align-items: center;
}

.video-js .vjs-progress-holder {
  flex: auto;
  transition: all 0.2s;
  height: 0.3em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0 10px;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.6666666667em;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
  font-size: 1em;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 0;
}

.video-js .vjs-play-progress {
  background-color: #fff;
}
.video-js .vjs-play-progress:before {
  font-size: 0.9em;
  position: absolute;
  right: -0.5em;
  line-height: 0.35em;
  z-index: 1;
}

.vjs-svg-icons-enabled .vjs-play-progress:before {
  content: none !important;
}

.vjs-play-progress .vjs-svg-icon {
  position: absolute;
  top: -0.35em;
  right: -0.4em;
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  line-height: 0.15em;
  z-index: 1;
}

.video-js .vjs-load-progress {
  background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
  background: rgba(115, 133, 159, 0.75);
}

.video-js .vjs-time-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
  display: none;
}

.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
  display: block;
  font-size: 0.6em;
  visibility: visible;
}

.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
  font-size: 1em;
}

.video-js .vjs-progress-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-time-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-js .vjs-slider {
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.45em 0 0.45em;
  /* iOS Safari */
  -webkit-touch-callout: none;
  /* Safari, and Chrome 53 */
  -webkit-user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  -moz-user-select: none;
       user-select: none;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-slider.disabled {
  cursor: default;
}

.video-js .vjs-slider:focus {
  text-shadow: 0em 0em 1em white;
  box-shadow: 0 0 1em #fff;
}

.video-js.vjs-spatial-navigation-enabled .vjs-slider:focus {
  outline: 0.0625em solid white;
}

.video-js .vjs-mute-control {
  cursor: pointer;
  flex: none;
}
.video-js .vjs-volume-control {
  cursor: pointer;
  margin-right: 1em;
  display: flex;
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.video-js .vjs-volume-panel .vjs-volume-control {
  visibility: visible;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin-left: -1px;
}

.video-js .vjs-volume-panel {
  transition: width 1s;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  margin-right: 0;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
  left: -3.5em;
  transition: left 0s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
  width: 10em;
  transition: width 0.1s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
  width: 4em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  height: 8em;
  width: 3em;
  left: -3000em;
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel {
  display: flex;
}

.video-js .vjs-volume-bar {
  margin: 1.35em 0.45em;
}

.vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: 0.3em;
}

.vjs-volume-bar.vjs-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}

.video-js .vjs-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.video-js .vjs-volume-level:before {
  position: absolute;
  font-size: 0.9em;
  z-index: 1;
}

.vjs-slider-vertical .vjs-volume-level {
  width: 0.3em;
}
.vjs-slider-vertical .vjs-volume-level:before {
  top: -0.5em;
  left: -0.3em;
  z-index: 1;
}

.vjs-svg-icons-enabled .vjs-volume-level:before {
  content: none;
}

.vjs-volume-level .vjs-svg-icon {
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  z-index: 1;
}

.vjs-slider-horizontal .vjs-volume-level {
  height: 0.3em;
}
.vjs-slider-horizontal .vjs-volume-level:before {
  line-height: 0.35em;
  right: -0.5em;
}

.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
  right: -0.3em;
  transform: translateY(-50%);
}

.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
  top: -0.55em;
  transform: translateX(-50%);
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  width: 4em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
}

.video-js .vjs-volume-vertical {
  width: 3em;
  height: 8em;
  bottom: 8em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-volume-horizontal .vjs-menu {
  left: -2em;
}

.video-js .vjs-volume-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
  display: block;
  font-size: 1em;
  visibility: visible;
}

.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
  left: 1em;
  top: -12px;
}

.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
  font-size: 1em;
}

.video-js .vjs-volume-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-volume-horizontal .vjs-mouse-display {
  width: 1px;
  height: 100%;
}

.video-js .vjs-volume-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-volume-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.vjs-poster {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.vjs-has-started .vjs-poster,
.vjs-using-native-controls .vjs-poster {
  display: none;
}

.vjs-audio.vjs-has-started .vjs-poster,
.vjs-has-started.vjs-audio-poster-mode .vjs-poster,
.vjs-pip-container.vjs-has-started .vjs-poster {
  display: block;
}

.vjs-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-js .vjs-live-control {
  display: flex;
  align-items: flex-start;
  flex: auto;
  font-size: 1em;
  line-height: 3em;
}

.video-js:not(.vjs-live) .vjs-live-control,
.video-js.vjs-liveui .vjs-live-control {
  display: none;
}

.video-js .vjs-seek-to-live-control {
  align-items: center;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 1em;
  line-height: 3em;
  width: auto;
  min-width: 4em;
}

.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
.video-js:not(.vjs-live) .vjs-seek-to-live-control {
  display: none;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
  cursor: auto;
}

.vjs-seek-to-live-control .vjs-icon-placeholder {
  margin-right: 0.5em;
  color: #888;
}

.vjs-svg-icons-enabled .vjs-seek-to-live-control {
  line-height: 0;
}

.vjs-seek-to-live-control .vjs-svg-icon {
  width: 1em;
  height: 1em;
  pointer-events: none;
  fill: #888888;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
  color: red;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
  fill: red;
}

.video-js .vjs-time-control {
  flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider,
.video-js .vjs-current-time,
.video-js .vjs-duration {
  display: none;
}

.vjs-time-divider {
  display: none;
  line-height: 3em;
}

.video-js .vjs-play-control {
  cursor: pointer;
}

.video-js .vjs-play-control .vjs-icon-placeholder {
  flex: none;
}

.vjs-text-track-display {
  position: absolute;
  bottom: 3em;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

.vjs-error .vjs-text-track-display {
  display: none;
}

.video-js.vjs-controls-disabled .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

.video-js .vjs-text-track {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
}

.vjs-subtitles {
  color: #fff;
}

.vjs-captions {
  color: #fc6;
}

.vjs-tt-cue {
  display: block;
}

video::-webkit-media-text-track-display {
  transform: translateY(-3em);
}

.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
  transform: translateY(-1.5em);
}

.video-js.vjs-force-center-align-cues .vjs-text-track-cue {
  text-align: center !important;
  width: 80% !important;
}

.video-js .vjs-picture-in-picture-control {
  cursor: pointer;
  flex: none;
}
.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,
.vjs-pip-window .vjs-picture-in-picture-control {
  display: none;
}

.video-js .vjs-fullscreen-control {
  cursor: pointer;
  flex: none;
}
.video-js.vjs-audio-only-mode .vjs-fullscreen-control,
.vjs-pip-window .vjs-fullscreen-control {
  display: none;
}

.vjs-playback-rate > .vjs-menu-button,
.vjs-playback-rate .vjs-playback-rate-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
  pointer-events: none;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}

.vjs-playback-rate .vjs-menu {
  width: 4em;
  left: 0em;
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
  font-size: 1.4em;
  text-align: center;
}

.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  text-align: left;
  border: 0.6em solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: vjs-spinner-show 0s linear 0.3s forwards;
}

.vjs-error .vjs-loading-spinner {
  display: none;
}

.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
  content: "";
  position: absolute;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:after {
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:before {
  border-top-color: rgb(255, 255, 255);
}

.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:after {
  border-top-color: rgb(255, 255, 255);
  animation-delay: 0.44s;
}

@keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}
@keyframes vjs-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes vjs-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}
.video-js.vjs-audio-only-mode .vjs-captions-button {
  display: none;
}

.vjs-chapters-button .vjs-menu ul {
  width: 24em;
}

.video-js.vjs-audio-only-mode .vjs-descriptions-button {
  display: none;
}

.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
  width: 1.5em;
  height: 1.5em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: "\f10c";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
  display: none;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,
.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,
.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: " \f12e";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-layout-small .vjs-current-time,
.video-js.vjs-layout-small .vjs-time-divider,
.video-js.vjs-layout-small .vjs-duration,
.video-js.vjs-layout-small .vjs-remaining-time,
.video-js.vjs-layout-small .vjs-playback-rate,
.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
.video-js.vjs-layout-x-small .vjs-time-divider,
.video-js.vjs-layout-x-small .vjs-duration,
.video-js.vjs-layout-x-small .vjs-remaining-time,
.video-js.vjs-layout-x-small .vjs-playback-rate,
.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
.video-js.vjs-layout-tiny .vjs-time-divider,
.video-js.vjs-layout-tiny .vjs-duration,
.video-js.vjs-layout-tiny .vjs-remaining-time,
.video-js.vjs-layout-tiny .vjs-playback-rate,
.video-js.vjs-layout-tiny .vjs-volume-control {
  display: none;
}
.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
  width: auto;
  width: initial;
}
.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
  display: none;
}
.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
  flex: auto;
  display: block;
}

.vjs-modal-dialog.vjs-text-track-settings {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.75);
  color: #fff;
  height: 70%;
}
.vjs-spatial-navigation-enabled .vjs-modal-dialog.vjs-text-track-settings {
  height: 80%;
}

.vjs-error .vjs-text-track-settings {
  display: none;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
  display: table;
}

.vjs-text-track-settings .vjs-track-settings-colors,
.vjs-text-track-settings .vjs-track-settings-font,
.vjs-text-track-settings .vjs-track-settings-controls {
  display: table-cell;
}

.vjs-text-track-settings .vjs-track-settings-controls {
  text-align: right;
  vertical-align: bottom;
}

@supports (display: grid) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 20px 24px 0px 24px;
  }
  .vjs-track-settings-controls .vjs-default-button {
    margin-bottom: 20px;
  }
  .vjs-text-track-settings .vjs-track-settings-controls {
    grid-column: 1/-1;
  }
  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
  .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
  .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr;
  }
}
.vjs-text-track-settings select {
  font-size: inherit;
}

.vjs-track-setting > select {
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.vjs-text-track-settings fieldset {
  margin: 10px;
  border: none;
}

.vjs-text-track-settings fieldset span {
  display: inline-block;
  padding: 0 0.6em 0.8em;
}

.vjs-text-track-settings fieldset span > select {
  max-width: 7.3em;
}

.vjs-text-track-settings legend {
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
}

.vjs-text-track-settings .vjs-label {
  margin: 0 0.5em 0.5em 0;
}

.vjs-track-settings-controls button:focus,
.vjs-track-settings-controls button:active {
  outline-style: solid;
  outline-width: medium;
  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
}

.vjs-track-settings-controls button:hover {
  color: rgba(43, 51, 63, 0.75);
}

.vjs-track-settings-controls button {
  background-color: #fff;
  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
  color: #2B333F;
  cursor: pointer;
  border-radius: 2px;
}

.vjs-track-settings-controls .vjs-default-button {
  margin-right: 1em;
}

.vjs-title-bar {
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
  font-size: 1.2em;
  line-height: 1.5;
  transition: opacity 0.1s;
  padding: 0.666em 1.333em 4em;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.vjs-error .vjs-title-bar {
  display: none;
}

.vjs-title-bar-title,
.vjs-title-bar-description {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vjs-title-bar-title {
  font-weight: bold;
  margin-bottom: 0.333em;
}

.vjs-playing.vjs-user-inactive .vjs-title-bar {
  opacity: 0;
  transition: opacity 1s;
}

.video-js .vjs-skip-forward-5 {
  cursor: pointer;
}
.video-js .vjs-skip-forward-10 {
  cursor: pointer;
}
.video-js .vjs-skip-forward-30 {
  cursor: pointer;
}
.video-js .vjs-skip-backward-5 {
  cursor: pointer;
}
.video-js .vjs-skip-backward-10 {
  cursor: pointer;
}
.video-js .vjs-skip-backward-30 {
  cursor: pointer;
}
@media print {
  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
    visibility: hidden;
  }
}
.vjs-resize-manager {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1000;
}

.js-focus-visible .video-js *:focus:not(.focus-visible) {
  outline: none;
}

.video-js *:focus:not(:focus-visible) {
  outline: none;
}
.video-controls {
  position: relative;
  z-index: 1;
  height: 100%;
  pointer-events: none;
}
.vjs-video-container {
  position: absolute;
  background-color: transparent;
  left: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  display: block;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vjs-big-play-button {
  display: none;
}

.vjs-control-bar {
  width: 100vw !important;
  position: fixed !important;
  left: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
}
.vjs-control-bar.fade-in {
  opacity: 1 !important;
  visibility: visible !important;
}

#vjs-buttons-wrapper {
  position: absolute;
  top: 4rem;
  left: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
  align-items: flex-start;

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#vjs-buttons-wrapper.fade-in {
  pointer-events: all;
  opacity: 1;
}

#vjs-play-button-wrapper {
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-self: center;
  align-content: center;
}

.vjs-custom-button {
  height: 2.5rem;
  width: 2.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: none;
}
#vjs-custom-skip-button {
  background-image: url('assets/img/buttons/video-skip.svg');
}

#vjs-custom-play-button {
  background-image: url('assets/img/buttons/video-play.svg');
}

#vjs-custom-audio-button {
  background-image: url('assets/img/buttons/audio-on.svg');
}

#vjs-big-play-button {
  pointer-events: none;
  width: 4rem;
  height: 4rem;
  background-image: url('assets/img/buttons/video-play-big.svg');
}
#vjs-custom-loading-container {
  position: absolute;
  top: 4rem;
  left: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#vjs-custom-loading {
  border: 0.4rem solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top: 0.4rem solid #FFF;
  width: 3rem;
  height: 3rem;
  -webkit-animation: video-loading-spin 2s linear infinite;
  animation: video-loading-spin 2s linear infinite;
}
@-webkit-keyframes video-loading-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes video-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#vjs-custom-loading-text {
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  margin-left: 0.75rem;
}

#vjs-custom-scrubber {
  position: absolute;
  bottom: 20px;
  left: 50px;
  width: 80%;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  z-index: 10;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
}
#vjs-custom-scrubber.fade-in {
  opacity: 1 !important;
  visibility: visible !important;
}

#vjs-scrubber-handle {
  position: absolute;
  top: 0px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  cursor: pointer;
}

#vjs-custom-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 2vw;
  color: var(--color-white);
  width: 95%;

  background: #1E1C2CE5;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 2vw;

  font: var(--font-body2);
  text-align: center;
}

.video-fade-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 0;
  z-index: 1000;
  transition: opacity;
  transition-timing-function: ease;
  transition-duration: 350ms;
  pointer-events: none;
}

.video-fade-div.fade-in {
  opacity: 1;
}



#pwa-rotate-screen-prompt {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4vw;
    /** FIXME: need to be fixed to be above the shadow root elements - what below not working */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    background-color: var(--background-color);
}
#pwa-rotate-screen-prompt > * {
    color: #ffffff;
    font-size: var(--font-size-16-px);
}
#pwa-rotate-screen-prompt > .icon {
    margin: initial;
    width: 10vw;
    height: 10vw;
    background: url(../assets/img/pwa/rotate-to-portrait.svg) no-repeat center;
    background-size: contain;
}

/** removed as this is also getting triggered when the keyboard is visible */
/* @media (orientation: landscape) {
    #app-view > * {
        display: none;
    }

    #pwa-rotate-screen-prompt {
        display: flex;
    } 
}*/

/* Ren'Py Game Iframe Styles */
#renpy-game-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-width: 375px;
    height: 100dvh;
    background: #000;
    z-index: 9999;
}

#renpy-game-overlay .renpy-iframe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 375px;
    height: 100%;
    position: relative;
}

#renpy-game-overlay .renpy-iframe {
    width: 100%;
    max-width: 100%;
    min-width: 375px;
    max-height: 100dvh;
    border: none;
    background: #000;
    aspect-ratio: 375 / 812;
}