@import url(https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap);
@font-face {
  font-family: 'Sofia-Pro-Regular';
  src: url(/assets/fonts/Sofia-Pro-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia-Pro-Semi-Bold';
  src: url(/assets/fonts/Sofia-Pro-Semi-Bold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia-Pro-Bold';
  src: url(/assets/fonts/Sofia-Pro-Bold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Sofia-Pro-Regular', sans-serif;
}

p {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 20px;
}

nav ul a {
  font-size: 12px;
  font-family: 'Work Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Sofia-Pro-Bold', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-size: 42px;
  line-height: 50px;
}

h3 {
  font-size: 20px;
}

.ht-sub {
  font-size: 12px;
  padding: 3px 15px;
  color: #0276fd;
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  background-color: rgba(90, 73, 248, 0.1);
}

.ht-sub-two {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-left: 60px;
}

.ht-sub-two::before {
  background: linear-gradient(to right, #0276fd, #0276fd);
  width: 50px;
  height: 3px;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ht-icon {
  font-size: 60px;
  color: #0276fd;
}

.btn {
  border-radius: 0px;
}

.ht-map {
  background-image: url(/assets/images/HTMap.png);
  background-repeat: no-repeat;
  background-position: center;
}

.ht-step {
  display: block;
  font-size: 100px;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.1;
}

.ht-slide-1 {
  background-image: url(/assets/images/HTSlide1.jpg);
  background-size: cover;
}

.ht-slide-2 {
  background-image: url(/assets/images/HTSlide2.jpg);
  background-size: cover;
}

.ht-slide-3 {
  background-image: url(/assets/images/HTSlide3.jpg);
  background-size: cover;
}

.ht-innovative {
  background-image: url(/assets/images/HTInnovative.jpeg);
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ht-right {
  border-right: 1px solid #eeeeee;
}

.ht-overlay {
  background-color: rgba(5, 20, 65, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

@media (min-width: 319px) and (max-width: 490px) {
  h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

@font-face {
  font-family: 'business-icon';
  src: url(/assets/fonts/business-icon.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.dl {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'business-icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dl-alert:before {
  content: '\e900';
}
.dl-analysis:before {
  content: '\e901';
}
.dl-analysis-1:before {
  content: '\e902';
}
.dl-award:before {
  content: '\e903';
}
.dl-bank:before {
  content: '\e904';
}
.dl-briefcase:before {
  content: '\e905';
}
.dl-calculator:before {
  content: '\e906';
}
.dl-calendar:before {
  content: '\e907';
}
.dl-chess:before {
  content: '\e908';
}
.dl-clothes:before {
  content: '\e909';
}
.dl-cloud:before {
  content: '\e90a';
}
.dl-compass:before {
  content: '\e90b';
}
.dl-credit-card:before {
  content: '\e90c';
}
.dl-dollar:before {
  content: '\e90d';
}
.dl-exchange:before {
  content: '\e90e';
}
.dl-folder:before {
  content: '\e90f';
}
.dl-global:before {
  content: '\e910';
}
.dl-graph:before {
  content: '\e911';
}
.dl-growth:before {
  content: '\e912';
}
.dl-handshake:before {
  content: '\e913';
}
.dl-home:before {
  content: '\e914';
}
.dl-idea:before {
  content: '\e915';
}
.dl-idea-1:before {
  content: '\e916';
}
.dl-location:before {
  content: '\e917';
}
.dl-mobile:before {
  content: '\e918';
}
.dl-money:before {
  content: '\e919';
}
.dl-money-1:before {
  content: '\e91a';
}
.dl-money-2:before {
  content: '\e91b';
}
.dl-news:before {
  content: '\e91c';
}
.dl-notebook:before {
  content: '\e91d';
}
.dl-presentation:before {
  content: '\e91e';
}
.dl-profit:before {
  content: '\e91f';
}
.dl-puzzle:before {
  content: '\e920';
}
.dl-recruit:before {
  content: '\e921';
}
.dl-resume:before {
  content: '\e922';
}
.dl-savings:before {
  content: '\e923';
}
.dl-search:before {
  content: '\e924';
}
.dl-startup:before {
  content: '\e925';
}
.dl-startup-1:before {
  content: '\e926';
}
.dl-stats:before {
  content: '\e927';
}
.dl-strategy:before {
  content: '\e928';
}
.dl-success:before {
  content: '\e929';
}
.dl-target:before {
  content: '\e92a';
}
.dl-team:before {
  content: '\e92b';
}
.dl-think:before {
  content: '\e92c';
}
.dl-time:before {
  content: '\e92d';
}
.dl-timer:before {
  content: '\e92e';
}
.dl-trophy:before {
  content: '\e92f';
}
.dl-wallet:before {
  content: '\e930';
}
.dl-winner:before {
  content: '\e931';
}

/* ─── ht mobile menu (skin-local drawer — no M.Sidenav) ──────────────────
   Navy panel + blue rule + ghost numbers: echoes .ht-overlay / .ht-step /
   .ht-sub-two. Square corners throughout, per the skin's .btn reset. */

.ht-mmenu-trigger {
  cursor: pointer;
}

.ht-mmenu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1300;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.35s;
}

.ht-mmenu.ht-mmenu-open {
  visibility: visible;
  pointer-events: auto;
}

.ht-mmenu-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 20, 65, 0.7);
  opacity: 0;
  transition: opacity 0.35s;
}

.ht-mmenu-open .ht-mmenu-backdrop {
  opacity: 1;
}

.ht-mmenu-drawer {
  position: absolute;
  right: 0;
  top: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  overflow-y: auto;
  padding: 28px 30px 36px;
  background-color: #051441;
  border-left: 3px solid #0276fd;
  transform: translateX(105%);
  transition: transform 0.35s ease;
}

.ht-mmenu-open .ht-mmenu-drawer {
  transform: translateX(0);
}

.ht-mmenu-top {
  /* single-row: brand + close button (genuine flex case) */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ht-mmenu-brand {
  font-family: 'Sofia-Pro-Bold', sans-serif;
  font-size: 20px;
  color: #ffffff;
}

.ht-mmenu-close {
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
}

.ht-mmenu-close:hover {
  color: #0276fd;
}

.ht-mmenu-kicker {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #4ea3ff;
  position: relative;
  padding-left: 60px;
  margin: 34px 0 6px;
}

.ht-mmenu-kicker::before {
  background: linear-gradient(to right, #0276fd, #0276fd);
  width: 50px;
  height: 3px;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Top margin separates the list from the name/close row above it; the bottom
   one holds the list off the language picker below. Both drawers stack the
   same three blocks (top → links → translator), so this spacing is the one
   place that sets the rhythm for each. */
.ht-mmenu-links {
  margin: 24px 0 48px;
}

.ht-mmenu-links li {
  border-bottom: 1px solid rgba(165, 189, 217, 0.15);
}

/* Flex row so the material icon sits centred against the label rather than on
   its baseline, and one `gap` owns the icon-to-text spacing for every row —
   the user drawer's links and its theme toggle alike. Text-only rows (the
   guest drawer) are unaffected: no icon, nothing to gap. */
.ht-mmenu-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  color: #ffffff;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s, padding-left 0.2s;
}

.ht-mmenu-links a:hover {
  color: #4ea3ff;
  padding-left: 8px;
}

.ht-mmenu-num {
  font-family: 'Sofia-Pro-Bold', sans-serif;
  font-size: 13px;
  color: #ffffff;
  opacity: 0.25;
  margin-right: 14px;
}

/* ─── ht theme switch ────────────────────────────────────────────────────
   Navbar: square blue-ruled icon button (the skin resets .btn to 0 radius,
   so the switch is square too). Drawer: a links row whose icon takes the
   ghost-number slot, in the blue the kicker already uses. */

.ht-theme-toggle > a {
  display: block;
  cursor: pointer;
}

/* The box lives on the glyph, not the link: an inline-block inside the
   navbar's own line box centres itself at both nav heights (56/64px) with
   no height maths. */
.ht-theme-toggle .material-icons {
  display: inline-block;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  /* vertical-align: middle sits on the baseline + half x-height, which lands
     the box 2px high in this nav's line box — the margin takes that back. */
  vertical-align: middle;
  margin-top: 2px;
  border: 1px solid var(--primary-border-colour);
  transition: color 0.2s, border-color 0.2s;
}

.ht-theme-toggle > a:hover .material-icons {
  color: #0276fd;
  border-color: #0276fd;
}

.ht-mmenu-theme > a {
  cursor: pointer;
}

.ht-mmenu-icon {
  font-size: 16px;
  color: #4ea3ff;
  margin-right: 14px;
  vertical-align: -3px;
}

/* ─── ht dashboard ───────────────────────────────────────────────────────
   The open / closed positions tabs, carrying the skin's Work Sans caps and
   the blue rule that .ht-sub-two and .ht-mmenu-kicker use — under the
   current tab rather than beside it. */

.ht-trades-tab {
  display: block;
  padding: 12px 0;
  color: var(--primary-font-colour);
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 3px solid var(--border-colour);
  transition: color 0.2s, border-color 0.2s;
}

.ht-trades-tab:hover {
  color: #0276fd;
}

.ht-trades-tab-on {
  color: #0276fd;
  border-bottom-color: #0276fd;
}

.ht-trades-tab .material-icons {
  font-size: 18px;
  vertical-align: -4px;
  margin-right: 8px;
}

/* ─── ht language picker ─────────────────────────────────────────────────
   Closed: a row that matches an .ht-mmenu link. Open: the navy panel a shade
   lighter, capped and scrollable — 27 languages do not fit a drawer. */

.ht-lang {
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(165, 189, 217, 0.15);
}

.ht-lang-trigger {
  display: block;
  padding: 15px 0;
  color: #ffffff;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.2s;
}

.ht-lang-trigger:hover {
  color: #4ea3ff;
}

.ht-lang-current {
  padding-left: 12px;
}

.ht-lang-caret {
  float: right;
  font-size: 20px;
  transition: transform 0.25s;
}

.ht-lang-open .ht-lang-caret {
  transform: rotate(180deg);
}

.ht-lang-list {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ht-lang-open .ht-lang-list {
  max-height: 240px;
  overflow-y: auto;
}

.ht-lang-list li {
  border-top: 1px solid rgba(165, 189, 217, 0.12);
}

.ht-lang-list a {
  display: block;
  padding: 11px 0 11px 14px;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
}

.ht-lang-list a:hover {
  color: #ffffff;
  padding-left: 20px;
}

.ht-lang-list .flag-icon {
  margin-right: 10px;
}

/* Where the page already is — the blue rule the kicker uses, upright. */
.ht-lang-on a {
  color: #4ea3ff;
  border-left: 3px solid #0276fd;
  padding-left: 11px;
}

.ht-mmenu-cta {
  display: block;
  text-align: center;
  padding: 15px 20px;
  background-color: #0276fd;
  color: #ffffff;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 0px;
  transition: background-color 0.2s;
}

.ht-mmenu-cta:hover {
  background-color: #0261d1;
  color: #ffffff;
}

.ht-mmenu-note {
  color: rgba(165, 189, 217, 0.7);
  font-size: 13px;
  line-height: 22px;
  margin-top: 26px;
  margin-bottom: 0;
}

/* ─── ht page hero (contact + article) ───────────────────────────────────
   Navy strip carrying the .ht-map watermark, blue kicker chip on top. */

.ht-page-hero {
  background-color: #051441;
  padding: 90px 0 70px;
}

.ht-page-hero h1 {
  color: #ffffff;
  font-size: 42px;
  line-height: 52px;
  margin: 18px 0 10px;
}

.ht-page-hero p {
  color: #a5bdd9;
  max-width: 640px;
  margin-bottom: 0;
}

.ht-page-hero .ht-sub {
  color: #4ea3ff;
  background-color: rgba(2, 118, 253, 0.15);
}

/* ─── ht contact page ────────────────────────────────────────────────────── */

.ht-contact-side {
  position: relative;
  background-color: #051441;
  border-bottom: 3px solid #0276fd;
  padding: 45px 30px 35px;
  color: #a5bdd9;
}

.ht-contact-side .ht-step {
  color: #ffffff;
  left: 10px;
}

.ht-contact-side .ht-sub-two {
  color: #4ea3ff;
}

.ht-contact-side h3 {
  color: #ffffff;
  font-size: 24px;
}

.ht-contact-side a {
  color: #ffffff;
}

.ht-contact-side a:hover {
  color: #4ea3ff;
}

.ht-contact-line {
  /* single-row: icon next to text (genuine flex case) */
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.ht-contact-line .material-icons {
  color: #0276fd;
  font-size: 20px;
  margin-right: 10px;
}

.ht-contact-card {
  border-radius: 0px;
  border-top: 3px solid #0276fd;
  padding: 40px 45px;
  margin-top: 0;
}

.ht-contact-title {
  font-size: 32px;
  line-height: 40px;
  margin-top: 12px;
}

/* ─── ht article page ────────────────────────────────────────────────────── */

.ht-article-card {
  border-radius: 0px;
  border-top: 3px solid #0276fd;
  padding: 40px 45px;
}

.ht-article-body img,
.ht-article-body video {
  max-width: 100%;
}

/* ─── ht mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
  .ht-page-hero {
    padding: 60px 0 45px;
  }

  .ht-page-hero h1 {
    font-size: 30px;
    line-height: 38px;
  }

  .ht-page-hero p {
    max-width: none;
  }

  .ht-contact-side {
    margin-bottom: 30px;
  }

  .ht-contact-line {
    justify-content: center;
  }

  .ht-contact-card,
  .ht-article-card {
    padding: 30px 20px;
  }

  .ht-contact-title {
    font-size: 26px;
    line-height: 34px;
  }
}

/* dashboard nav burger — opens this skin's drawer (same one the guest
   chrome uses); it is an <a> with no href, so it needs the pointer */
.ht-menu-trigger {
  cursor: pointer;
}

/* The default app's face. Set on BODY, not on .ap — that class is only on the
   guest layout, so /user and /cp were falling back to Materialize's default
   and the three areas did not match. The app stylesheet is the last one the
   shells load, so this wins on order without needing !important. */
:root {
  --ap-font: 'Signika Negative', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--ap-font);
}

/* SCOPING (CRITICAL): this stylesheet used to be a skin's own _css/ap.css, so
   it could style bare `body`/`h1`/`.btn`. It now lives in the DEFAULT tree and
   is imported by app/(guest)/_layout.js, which means it bundles for EVERY skin
   — an unscoped rule here repaints every other skin's buttons and headings.
   So the design-wide rules below are scoped to `.ap`, the wrapper the default
   guest chrome renders. A skin that ships its own (guest)/_layout.js never
   renders that wrapper, so it keeps its own typography and buttons. Everything
   else in this file is already `.ap-*` prefixed — keep it that way. */
.ap {
  font-size: 16px;
  font-family: var(--ap-font);
}

/* Materialize pins .btn to `height: 36px; line-height: 36px`, so vertical
   padding alone cannot make the button taller — with box-sizing: border-box it
   only shrinks the content box while the 36px line box still starts BELOW the
   top padding, dropping the label ~7.5px under centre. That read as too much
   padding on top. Releasing the fixed height and the 36px line-height lets the
   padding do what it was written to do and re-centres the label. */
.ap .btn {
  height: auto;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 20px;
}

.ap .btn.btn-secondary {
  border-color: #334155;
}

/* ─── Language switcher ────────────────────────────────────────────────────
   Rendered from the footer but pinned to the viewport, matching the reference.
   Bottom-LEFT on purpose: bottom-right is where support/chat buttons live. */
.ap .ap-translator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}

.ap .ap-translator-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ap .ap-translator-trigger .material-icons {
  font-size: 18px;
}

/* Catches the click that closes the panel without dimming the page. */
.ap .ap-translator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ap .ap-translator-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 2;
  width: 220px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.ap .ap-translator-list li {
  margin: 0;
}

.ap .ap-translator-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.ap .ap-translator-list a:hover {
  background: var(--hover);
}

.ap .ap-translator-current {
  font-weight: 600;
  background: var(--hover);
}

/* ─── Nav brand ────────────────────────────────────────────────────────────
   An <img> in a Materialize nav sits on the text baseline of a 64px
   line-height, which parks a 36px logo well above centre — the markup used to
   correct that with an inline `top: -8px`, which still left it 21px high and
   clipping the top of the bar. Centring it properly needs no magic number. */
.ap nav .ap-nav-brand a {
  display: flex;
  align-items: center;
  height: 64px;
  margin-left: -10px; /* optical: pulls the mark back to the container edge */
}

.ap nav .ap-nav-brand img {
  display: block;
}

/* ─── Hero background video ────────────────────────────────────────────────
   The section keeps its own dark `bg bg-secondary` surface, so a failed or
   still-buffering video degrades to exactly what was there before rather than
   to a blank band. The video is painted over that, the overlay over the video,
   and the copy over the overlay. */
.ap .ap-hero {
  position: relative;
  overflow: hidden;
}

.ap .ap-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none; /* decoration — never eats a click or a scroll */
}

/* Without this the copy would have to survive whatever frame is behind it. */
.ap .ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 33, 0.55);
}

.ap .ap-hero-inner {
  position: relative; /* lifts the copy above the video + overlay */
}

/* ─── The nav sits ON the hero video ───────────────────────────────────────
   This nav is a normal in-flow element (no Materialize .navbar-fixed), so the
   hero begins BELOW it and .ap-hero's overflow:hidden clips the video short of
   the bar. Lifting the nav out of flow lets the hero start at y=0 and paint
   its video the full height, nav included.

   :has() keeps all of this to pages that actually have a hero — every other
   guest page keeps its normal in-flow, solid bar. */
.ap:has(.ap-hero) {
  position: relative; /* containing block for the nav below */
}

.ap:has(.ap-hero) nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* over the hero's video AND its overlay */
}

/* The nav no longer occupies flow, so the hero owes its content that height. */
.ap:has(.ap-hero) .ap-hero {
  padding-top: 64px;
}

/* No scroll-toggle back to a solid bar: this nav is not sticky, so it simply
   scrolls away with the hero and never ends up over other content. */
.ap:has(.ap-hero) nav {
  background: transparent;
  box-shadow: none;
}

.ap h1 {
  font-size: 72px;
  font-weight: 600;
}

.ap h2 {
  font-size: 40px;
  font-weight: 600;
}

/* ─── ap mobile drawer menu (skin-local, no M.Sidenav) ──────────────────── */

.ap-menu-trigger {
  cursor: pointer;
}

.ap-menu-trigger .material-icons {
  font-size: 28px;
  vertical-align: middle;
}

.ap-drawer-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
}

.ap-drawer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 6, 16, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ap-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: #10152a; /* solid fallback when backdrop-filter unsupported */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 70px rgba(4, 6, 16, 0.55);
  color: #e2e8f0;
  font-family: var(--ap-font);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ap-drawer {
    background: rgba(12, 15, 25, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* hairline indigo shine across the drawer top — same motif as the ap signin card */
.ap-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.75), rgba(129, 140, 248, 0));
}

.ap-drawer-root.ap-open {
  pointer-events: auto;
}

.ap-drawer-root.ap-open .ap-drawer-overlay {
  opacity: 1;
}

.ap-drawer-root.ap-open .ap-drawer {
  transform: translateX(0);
}

.ap-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ap-drawer-brand {
  display: flex;
  align-items: center;
}

.ap-drawer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.ap-drawer-brand span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.ap-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #a5b4fc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-drawer-close:hover {
  background: rgba(79, 70, 229, 0.32);
  color: #ffffff;
}

.ap-drawer-close .material-icons {
  font-size: 21px;
}

.ap-drawer-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.8);
}

.ap-drawer-links {
  margin: 0 0 24px;
}

.ap-drawer-links li {
  list-style: none;
}

.ap-drawer-links a {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-drawer-links a .material-icons {
  font-size: 20px;
  margin-right: 12px;
  color: #818cf8;
}

.ap-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
  color: #ffffff;
}

.ap-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.4);
}

.ap-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(226, 232, 240, 0.5);
}

/* ─── ap page hero strip (contact + article pages) ──────────────────────── */

.ap-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}

.ap-page-hero::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.42) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.6), rgba(129, 140, 248, 0));
}

.ap-hero-inner {
  position: relative;
}

.ap-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a5b4fc;
}

.ap-page-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: 46px;
  color: #ffffff;
}

.ap-hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.7);
}

/* ─── ap shared frosted card ────────────────────────────────────────────── */

.ap-card {
  position: relative;
  padding: 2.2rem 2.4rem;
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.1);
}

.ap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.65), rgba(129, 140, 248, 0));
}

/* ─── ap contact page ───────────────────────────────────────────────────── */

.ap-contact {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-contact-panel {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: #0c0f19;
  background-image: linear-gradient(180deg, #0f1428 0%, #0c0f19 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.25);
}

.ap-contact-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-contact-panel h5 {
  position: relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.ap-contact-panel-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(226, 232, 240, 0.65);
}

.ap-contact-list {
  position: relative;
  margin: 0;
}

.ap-contact-list li {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ap-contact-list li:last-child {
  border-bottom: 0;
}

.ap-contact-list .material-icons {
  font-size: 19px;
  margin-right: 12px;
  padding: 6px;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
}

.ap-contact-card h5 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ap-contact-card-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .input-field input[type='text'],
.ap-contact .ap-card .input-field input[type='email'],
.ap-contact .ap-card .input-field textarea {
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--primary-border-colour);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-contact .ap-card .input-field input[type='text']:focus,
.ap-contact .ap-card .input-field input[type='email']:focus,
.ap-contact .ap-card .input-field textarea:focus {
  outline: none;
  border: 1px solid #4f46e5;
  border-bottom: 1px solid #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.ap-contact .ap-card .input-field label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .btn-full {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.35);
}

/* ─── ap article page ───────────────────────────────────────────────────── */

.ap-article {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-article-card {
  padding: 2.6rem 2.8rem;
  font-size: 17px;
  line-height: 1.85;
  color: var(--background-font-colour);
}

.ap-article-card > div {
  margin-bottom: 0.35rem;
}

.ap-article-card b {
  color: var(--background-heading-colour);
}

.ap-article-card img.responsive-img,
.ap-article-card video {
  border-radius: 14px;
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .ap-drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  .ap-page-hero {
    padding: 3rem 0 3.4rem;
  }

  .ap-page-hero h1 {
    font-size: 30px;
  }

  .ap-card {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  .ap-contact {
    padding-top: 2rem;
  }

  .ap-contact-panel {
    padding: 1.8rem 1.4rem;
    border-radius: 18px;
  }

  .ap-article {
    padding-top: 2rem;
  }

  .ap-article-card {
    padding: 1.8rem 1.3rem;
    font-size: 16px;
  }
}

/* ─── Reviews wall ─────────────────────────────────────────────────────────
   DELIBERATELY NOT `.ap`-SCOPED, unlike everything above. APReviewsComponent is
   reached through TourContentComponent, which 24 skins render, and a skin with
   its own (guest)/_layout.js never emits the `.ap` wrapper — scoping these
   would blank the cards there and let the page colour show through (that was
   the blue tint in `ad`, whose --background-colour is #e6f3fd).

   Safe to leave unscoped because every selector is named `.ap-review*`, which
   only ever matches markup this one component renders. Colours come from the
   theme vars, so each skin's palette applies on its own. */

.ap-reviews {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  height: 49rem;
  max-height: 150vh;
  overflow: hidden;
  padding: 0 1rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 601px) {
  .ap-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 993px) {
  .ap-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Columns beyond the first only exist at the widths that can hold them. */
.ap-reviews-col:nth-child(2),
.ap-reviews-col:nth-child(3) {
  display: none;
}

@media (min-width: 601px) {
  .ap-reviews-col:nth-child(2) {
    display: block;
  }
}

@media (min-width: 993px) {
  .ap-reviews-col:nth-child(3) {
    display: block;
  }
}

.ap-reviews-col {
  animation-name: ap-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Different speeds keep the columns from marching in step. */
.ap-reviews-slow {
  animation-duration: 62s;
}
.ap-reviews-mid {
  animation-duration: 48s;
}
.ap-reviews-fast {
  animation-duration: 74s;
}

@keyframes ap-marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.ap-review {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ap-reviews-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.ap-reviews-stars .material-icons {
  font-size: 20px;
  color: #06b6d4;
}

.ap-review blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--background-font-colour);
}

.ap-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-colour);
}

.ap-review figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* The window's edges dissolve rather than being cut off. This is a MASK on the
   wall itself, not two gradient overlays painted in --background-colour, which
   is what it used to be: those assumed the wall always sat on the page colour,
   so anywhere it sat on a different surface — inside `.bg` (white), or in a
   skin whose page colour differs — the gradients showed as a tint over it.
   A mask fades the cards themselves and therefore needs no colour at all. */
.ap-reviews {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
}

/* Motion is decoration here — the cards are all still readable standing still. */
@media (prefers-reduced-motion: reduce) {
  .ap-reviews-col {
    animation: none;
  }
}

/* ============================================================
   (user) — dashboard area
   Moved here from (user)/user.css: the default skin has ONE
   stylesheet, same rule every skin follows (see ai-rules.md).
   ============================================================ */

/* Tab switches. The tab wrapper in a route file is keyed on the active tab
   (see wallets.js), so switching remounts that node and replays this
   animation — no transition library and no exit state to coordinate. Keep it
   short: this sits between the click and the content. */
.tab-fade {
  animation: tab-fade-in 220ms ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-fade {
    animation: none;
  }
}

/* ─── Asset chart (holding / mining asset tabs) ────────────────────────────
   BrokerChartsComponent fills its container, and this one had no height — so
   under two full-height buy/sell panels the chart collapsed to the widget's
   own minimum. Every wrapper down to the iframe has to be stretched, since
   the TradingView levels ask for height:100% and that resolves to nothing
   unless each ancestor has one. */

.app-asset-chart {
  height: 55vh;
  margin-top: 8px;
}

.app-asset-chart > *,
.app-asset-chart .tradingview-widget-container,
.app-asset-chart .tradingview-widget-container > div:first-child,
.app-asset-chart iframe {
  width: 100%;
  height: 100%;
}

.app-asset-chart .tradingview-widget-copyright {
  display: none;
}



/* LiveChartComponent stamps the symbol as an <h2> over the top-left of the
   plot. The page heading above already names the asset, so it is the same
   word twice — and at that size it covers the first candles. */
.app-asset-chart h2 {
  display: none;
}

/* app.css disables pointer events on every TradingView embed
   (`iframe[src*='embed-widget']`) so the DECORATIVE ones — the guest ticker
   tape, the mini sparklines — cannot swallow clicks or scroll.
   This chart is not decorative: its range switcher (1D · 1M · 3M · 1Y · 5Y ·
   All) is the whole point, and the blanket rule made those tabs dead. Give
   the interaction back here only, rather than lifting the rule globally. */
.app-asset-chart iframe[src*='embed-widget'] {
  pointer-events: auto;
}


/* ═══ /user — the dashboard ═══════════════════════════════════════════════
   Modelled on the lqo wallet layout: a glow hero carrying the headline figure
   and two pills, then two panels of rows beneath it.

   The classes are the DEFAULT skin's own (db-*), not lqo's — a skin never
   reaches into another skin's stylesheet (ai-rules #11), so the look is
   reproduced here rather than borrowed.

   Three answers and nothing else: what the account is worth, the two balances
   behind that figure, and how the closed trades have gone. */

.db-hero {
  margin: -18px -18px 20px -18px;
  padding: 30px 20px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(230, 255, 42, 0.3), transparent 62%),
    linear-gradient(180deg, #232b06 0%, #11150a 68%, #05060a 100%);
}

.db-hero small {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.db-hero h2 {
  margin: 4px 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  /* Tabular figures so the headline does not jitter as the live number ticks. */
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.db-hero-pnl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
}

.db-up {
  color: #0eba1f;
}

.db-down {
  color: #e5484d;
}

.db-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.db-pill:hover {
  transform: translateY(-1px);
}

.db-pill .material-icons {
  font-size: 17px;
}

.db-pill-volt {
  background: #e6ff2a;
  color: #030507;
}

.db-pill-white {
  background: #ffffff;
  color: #030507;
}

/* ─── Panels ────────────────────────────────────────────────────────────
   Side by side on a desktop, stacked on a phone. */

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.db-section {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  padding: 14px 16px;
}

/* Holds the panel's heading. Kept as a flex row so a control can sit beside
   the title later without the heading jumping. */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.db-section-head h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--background-heading-colour);
}

.db-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-row:hover {
  background: var(--hover);
}

.db-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--background-colour);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  flex: 0 0 auto;
}

.db-row-icon .material-icons {
  font-size: 19px;
}

.db-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.db-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-row-name small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.db-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.db-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

/* The live row gets a quiet pulse so a number that moves does not look like a
   stored one. */
.db-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eba1f;
  margin-right: 6px;
  vertical-align: middle;
  animation: db-pulse 2.4s ease-in-out infinite;
}

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .db-live-dot { animation: none; }
}

@media (max-width: 600px) {
  .db-hero h2 {
    font-size: 34px;
  }
}

/* ─── Shared lists inside a db-section ──────────────────────────────────
   The trade lists, watchlist and their kin are Materialize `collection`
   markup and stay that way: open positions carry live profit, a countdown, a
   close button and the trader-name rule, and re-drawing those rows to match
   these panels would mean re-implementing all of it.

   So the PANEL adapts instead — the collection loses its own card edge and
   sits on the panel's rhythm rather than looking like a second card dropped
   inside the first. */

.db-section .collection {
  border: 0;
  margin: 0;
  list-style: none;
  padding-left: 0;
  background: transparent;
}

.db-section .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-section .collection .collection-item:last-child {
  border-bottom: 0;
}

.db-section .collection .collection-item:hover {
  background: var(--hover);
}

/* The ticket's inputs are Materialize columns inside a panel that is already
   padded, so the row's negative gutters would push them past the edge. */
.db-section form .row {
  margin-left: 0;
  margin-right: 0;
}

/* A panel that stands on its own rather than sitting in the two-column grid —
   for rows too wide to survive half the content width. */
.db-section-stacked {
  margin-top: 18px;
}

body {
  font-size: 16px;
  font-family: 'Space Grotesk';
}

.cry-rain {
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #9454ff, #ad56c5 23%, #ff5d02);
}

.cry-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  background: #19172c;
  padding: 10px;
  border-radius: 15px;
  border: 1.5px solid #ffffff0d;
  font-family: IBM Plex Mono, sans-serif;
  background-image: linear-gradient(#dcd9e41a, #3f1ba726);
}

.cry-card {
  border-radius: 18px;
  padding: 30px 28px 28px 30px;
  border: 1.7px solid #ffffff0d;
  margin-bottom: 1rem;
  background-image: linear-gradient(#46468c26, #09091640);
}

h2 {
  font-size: 48px;
  font-weight: 800;
}

.review {
  line-height: 1.8em;
}

.bb-container {
  width: 60%;
  margin: auto;
}

.app-bg-numbers {
  background-image: url(/assets/images/BBBgNumbers.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.app-bg-numbers2 {
  background-image: url(/assets/images/BBBgNumbers2.png);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── bb mobile menu drawer (skin-local, no M.Sidenav) ───────────────────── */
.bb-menu-trigger {
  cursor: pointer;
}

.bb-drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1002;
  background: rgba(4, 16, 42, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bb-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.bb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1003;
  width: 330px;
  max-width: 88vw;
  padding: 26px 28px 30px;
  overflow-y: auto;
  border-left: 1.7px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 0 0 18px;
  background: linear-gradient(160deg, #1a73e8 0%, #1259c4 45%, #0b3d92 100%);
  color: #ffffff;
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  transform: translateX(105%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bb-drawer.is-open {
  transform: translateX(0);
}

.bb-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.bb-drawer-brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bb-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  transition: background 0.18s ease;
}

.bb-drawer-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.bb-drawer-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.06);
}

.bb-drawer-links {
  margin: 0 0 24px;
}

.bb-drawer-links li {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
}

.bb-drawer-links li a {
  display: block;
  padding: 15px 2px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: padding-left 0.18s ease, color 0.18s ease;
}

.bb-drawer-links li a:hover {
  padding-left: 10px;
  color: #cfe3ff;
}

.bb-drawer-index {
  margin-right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.bb-drawer-cta {
  display: block;
  margin-bottom: 18px;
  padding: 14px 22px;
  text-align: center;
  border-radius: 999px;
  background: #ffffff;
  color: #0b3d92;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bb-drawer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(3, 20, 51, 0.45);
  color: #0b3d92;
}

.bb-drawer-cta .material-icons {
  margin-left: 8px;
  font-size: 18px;
  vertical-align: middle;
}

.bb-drawer-utils {
  margin: 0;
  padding-top: 8px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12);
}

.bb-drawer-utils li a {
  display: flex;
  align-items: center;
  padding: 10px 2px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.bb-drawer-ghost {
  display: block;
  margin-top: 26px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  user-select: none;
  pointer-events: none;
}

/* ── bb shared page accents (contact + article) ─────────────────────────── */
.bb-pill-label {
  position: relative;
  display: inline-block;
  padding: 9px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
}

.bb-pill-label.bb-pill-blue {
  color: #1a73e8;
  border-color: rgba(26, 115, 232, 0.35);
  background: rgba(26, 115, 232, 0.08);
}

.bb-ghostword {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(80px, 14vw, 190px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  user-select: none;
  pointer-events: none;
}

.bb-card {
  padding: 30px 28px;
  margin-bottom: 1.4rem;
  border: 1.7px solid var(--border-colour);
  border-radius: 18px;
  background: var(--primary-background);
  color: var(--primary-font-colour);
}

.bb-card-accent {
  position: relative;
  overflow: hidden;
}

.bb-card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73e8, #0b3d92);
}

/* ── bb contact page ────────────────────────────────────────────────────── */
.bb-contact-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 16px 72px;
  text-align: center;
  background: linear-gradient(135deg, #1a73e8 0%, #1259c4 55%, #0b3d92 100%);
  color: #ffffff;
}

.bb-contact-hero h1 {
  position: relative;
  margin: 16px 0 10px;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bb-contact-hero p {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
}

.bb-contact-body {
  padding: 56px 0 40px;
}

.bb-contact-title {
  margin-top: 18px;
  font-size: 34px;
  color: var(--background-heading-colour);
}

.bb-contact-copy {
  margin: 0 0 22px;
  line-height: 1.8em;
}

.bb-contact-chip {
  display: inline-block;
  margin: 6px 8px 6px 0;
  padding: 12px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  border: 1.5px solid var(--border-colour);
  border-radius: 15px;
  background: var(--primary-background);
  color: var(--primary-font-colour);
}

.bb-contact-chip .material-icons {
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
  color: #1a73e8;
}

/* ── bb article page ────────────────────────────────────────────────────── */
.bb-article-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 0 84px;
  background: linear-gradient(135deg, #0b3d92 0%, #1259c4 60%, #1a73e8 100%);
  color: #ffffff;
}

.bb-article-hero .bb-ghostword {
  left: auto;
  right: -20px;
  transform: translateY(-50%);
}

.bb-article-hero h1 {
  position: relative;
  margin: 18px 0 0;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bb-article-body {
  padding: 0 0 56px;
}

.bb-article-card {
  position: relative;
  z-index: 2;
  margin-top: -34px;
  padding: 36px 34px;
  font-size: 1.02rem;
  line-height: 1.8em;
}

@media (min-width: 319px) and (max-width: 490px) {
  .bb-drawer {
    width: 86vw;
    padding: 22px 20px 26px;
  }

  .bb-contact-hero {
    padding: 48px 16px 56px;
  }

  .bb-contact-body {
    padding: 40px 0 28px;
  }

  .bb-contact-title {
    font-size: 26px;
  }

  .bb-article-hero {
    padding: 44px 0 66px;
  }

  .bb-article-card {
    margin-top: -24px;
    padding: 26px 20px;
  }

  .bb-ghostword {
    font-size: 64px;
  }

  .bb-container {
    width: 95%;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 20px;
  }
}

/* ============================================================
   bb user dashboard — paper & emerald (reference design system).
   Tokens: Urbanist (loaded in (user)/user.twig) · emerald
   #1BC199 · acid lime #ECFF8C · ink #05060F on the light
   accents. Surfaces ride the theme vars so LIGHT (the mock's
   paper-on-sage) and DARK both work. Signature: the floating
   white pill nav whose active tab is a filled emerald circle —
   top-center on PC, bottom-center on phones. Desktop first,
   ONE mobile block at the bottom.
   ============================================================ */

.bbf {
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Urbanist', 'Space Grotesk', sans-serif;
}

.bbf a:focus-visible {
  outline: 2px solid #1bc199;
  outline-offset: 2px;
  border-radius: 12px;
}

/* header: greeting · pill nav · utility circles */

.bbf .bbf-top {
  /* must track .bbf-main below — if the header stays narrower than the content
     the greeting and the pill nav stop lining up with the cards */
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 28px;
}

.bbf .bbf-hello {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bbf .bbf-hello img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}

.bbf .bbf-hello small {
  display: block;
  font-size: 12px;
  color: var(--primary-font-colour);
}

.bbf .bbf-hello b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.bbf .bbf-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 999px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  box-shadow: 0 10px 30px rgba(5, 6, 15, 0.08);
}

.bbf .bbf-nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  color: var(--primary-font-colour);
  transition: color 0.15s ease, background 0.15s ease;
}

.bbf .bbf-nav-tab:hover {
  color: var(--background-heading-colour);
}

.bbf .bbf-nav-tab .material-icons {
  font-size: 21px;
}

.bbf .bbf-nav-active {
  background: #1bc199;
  color: #ffffff;
}

.bbf .bbf-nav-active:hover {
  color: #ffffff;
}

.bbf .bbf-top-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bbf .bbf-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-circle:hover {
  color: #1bc199;
  border-color: #1bc199;
}

.bbf .bbf-circle .material-icons {
  font-size: 20px;
}

.bbf .bbf-main {
  /* 1120px left a desktop screen mostly gutter; bottom padding clears the
     bottom nav rather than letting content run under it */
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px 28px 110px 28px;
}

.bbf .bbf-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--background-heading-colour);
  margin: 8px 0 16px 0;
}

.bbf .bbf-bottom-nav {
  display: none;
}

/* home — PC spread */

.bbf .bbf-grid {
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 18px;
  align-items: start;
}

.bbf .bbf-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* balance card */

.bbf .bbf-balance {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 20px;
  padding: 18px 20px;
}

.bbf .bbf-balance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bbf .bbf-balance-head small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-font-colour);
}

.bbf .bbf-balance-head small .material-icons {
  font-size: 18px;
}

.bbf .bbf-lime-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #ecff8c;
  color: #05060f;
  transition: transform 0.15s ease;
}

.bbf .bbf-lime-bubble:hover {
  transform: translateY(-2px);
}

.bbf .bbf-lime-bubble .material-icons {
  font-size: 18px;
}

.bbf .bbf-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bbf .bbf-balance-row h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--background-heading-colour);
}

.bbf .bbf-balance-row h2 span {
  color: var(--primary-font-colour);
  font-size: 26px;
  font-weight: 700;
}

.bbf .bbf-chip-currency {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-font-colour);
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  padding: 5px 12px;
}

.bbf .bbf-balance-sub {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--primary-font-colour);
}

.bbf .bbf-balance-sub b {
  font-weight: 700;
}

.bbf .bbf-balance-ml {
  float: right;
}

.bbf .bbf-up {
  color: #1bc199;
}

.bbf .bbf-down {
  color: #e5484d;
}

/* action buttons */

.bbf .bbf-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bbf .bbf-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px;
  border-radius: 16px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.bbf .bbf-action:hover {
  border-color: #1bc199;
  transform: translateY(-1px);
}

.bbf .bbf-action .material-icons {
  font-size: 22px;
  color: #1bc199;
}

/* copy-trading banner (the mock's gradient strip, honest copy) */

.bbf .bbf-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(105deg, #1bc199 0%, #8fe0c3 55%, #ecff8c 100%);
  color: #05060f;
  transition: transform 0.15s ease;
}

.bbf .bbf-banner:hover {
  transform: translateY(-1px);
}

.bbf .bbf-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #05060f;
}

.bbf .bbf-banner > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.bbf .bbf-banner b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}

.bbf .bbf-banner small {
  font-size: 12px;
}

.bbf .bbf-banner-arrow {
  font-size: 20px;
}

/* gated product pills */

.bbf .bbf-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bbf .bbf-products:empty {
  display: none;
}

.bbf .bbf-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-product:hover {
  color: #1bc199;
  border-color: #1bc199;
}

.bbf .bbf-product .material-icons {
  font-size: 16px;
}

/* markets card */

.bbf .bbf-markets {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 20px;
  padding: 14px 16px;
}

.bbf .bbf-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.bbf .bbf-chips::-webkit-scrollbar {
  display: none;
}

.bbf .bbf-chip {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  font-size: 12.5px;
  font-weight: 700;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-chip:hover {
  color: var(--background-heading-colour);
}

.bbf .bbf-chip-active {
  background: #ecff8c;
  border-color: #ecff8c;
  color: #05060f;
}

.bbf .bbf-chip-active:hover {
  color: #05060f;
}

.bbf .bbf-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

.bbf .bbf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.bbf .bbf-row:hover {
  background: var(--hover);
}

.bbf .bbf-row img {
  height: 34px;
  width: 34px;
  border-radius: 50%;
}

.bbf .bbf-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.bbf .bbf-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bbf .bbf-row-tag {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--primary-font-colour);
}

.bbf .bbf-row-price {
  text-align: right;
  line-height: 1.35;
}

.bbf .bbf-row-price b {
  display: block;
  font-size: 13.5px;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
}

.bbf .bbf-row-price small {
  font-size: 11.5px;
  font-weight: 700;
}

.bbf .bbf-row-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.bbf .bbf-row-badge .material-icons {
  font-size: 16px;
}

.bbf .bbf-badge-up {
  background: rgba(27, 193, 153, 0.16);
  color: #1bc199;
}

.bbf .bbf-badge-down {
  background: rgba(229, 72, 77, 0.14);
  color: #e5484d;
}

@media (prefers-reduced-motion: reduce) {
  .bbf * {
    transition: none !important;
  }
}

/* ─── phone: the reference mock ─── */

@media only screen and (max-width: 992px) {
  /* the header tracks .bbf-main's phone padding — the 28px desktop gutter
     would waste half the width on a phone */
  .bbf .bbf-top {
    padding: 12px 14px;
  }

  .bbf .bbf-top-nav {
    display: none;
  }

  .bbf .bbf-bottom-nav {
    display: block;
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
  }

  .bbf .bbf-bottom-nav .bbf-nav {
    box-shadow: 0 14px 36px rgba(5, 6, 15, 0.22);
  }

  .bbf .bbf-main {
    padding: 4px 14px 104px 14px;
  }

  .bbf .bbf-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bbf .bbf-balance-row h2 {
    font-size: 34px;
  }
}

/* header avatar: forbid flex-squeeze (same fix as he) */
.bbf .bbf-hello img {
  flex: 0 0 42px;
  object-fit: cover;
}

body {
  font-family: 'Signika Negative', sans-serif;
}

.app-image-world {
  background: url(/assets/images/OLWorld.webp);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.app-image-gradient {
  background: url(/assets/images/OLGradient.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ex-card {
  padding: 2rem;
  border-radius: 5%;
  border: 1px solid rgb(196, 0, 0);
}

.ex-sub {
  display: block;
  font-size: 12px;
  color: #999999;
}

/* ══════════════════════════════════════════════════════════════
   ol — brand nav touches
   ══════════════════════════════════════════════════════════════ */

/* The brand is an <h6> inside the nav's <a>, so it arrives with heading
   margins and its own line-height while every sibling nav link inherits the
   bar's 64px one — that is what sat the wordmark higher than the links beside
   it. Neutralise both and let it ride the same baseline. */
.ol-brand {
  display: inline;
  margin: 0;
  font-family: 'Signika Negative', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: 0.5px;
}

/* nav language picker — TranslatorComponent renders a bare <li>, which gets
   none of the line-height Materialize gives `nav li a`. Match the bar's
   height so the flag sits on the same baseline as the links. */
.ol-nav-translator {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--nav-primary-font-colour);
  font-size: 13px;
  letter-spacing: 0.5px;
}

@media only screen and (max-width: 992px) {
  .ol-nav-translator {
    height: 56px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ol — mobile menu (skin-local drawer, no M.Sidenav)
   Contents-page motif: hairline dividers and a rule that
   sweeps in under the link on hover.
   ══════════════════════════════════════════════════════════════ */

.ol-mm-trigger {
  cursor: pointer;
}

.ol-mm-trigger .material-icons {
  vertical-align: middle;
}

.ol-mm-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1002;
  background: rgba(1, 1, 33, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ol-mm-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* single-column drawer shell — genuine flex case (head / links / foot) */
.ol-mm {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1003;
  width: 350px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border-left: 1px solid var(--border-colour);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35);
  transform: translateX(105%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ol-mm.is-open {
  transform: translateX(0);
}

.ol-mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-colour);
}

.ol-mm-brand {
  font-family: 'Signika Negative', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--background-heading-colour);
}

.ol-mm-tools {
  display: flex;
  align-items: center;
  margin: 0;
}

.ol-mm-tools li {
  padding-left: 16px;
  cursor: pointer;
  line-height: 0;
}

.ol-mm-tools .material-icons {
  color: var(--primary-font-colour);
}

.ol-mm-close {
  line-height: 0;
  cursor: pointer;
}

.ol-mm-eyebrow {
  display: block;
  padding: 20px 22px 4px;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgb(196, 0, 0);
}

.ol-mm-links {
  flex: 1;
  overflow-y: auto;
  padding: 0 22px;
}

.ol-mm-link {
  display: block;
  position: relative;
  padding: 15px 2px;
  font-family: 'Signika Negative', sans-serif;
  font-size: 18px;
  color: var(--background-heading-colour);
  border-bottom: 1px solid var(--border-colour);
  transition: padding-left 0.25s ease;
}

.ol-mm-link:last-child {
  border-bottom: none;
}

.ol-mm-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: rgb(196, 0, 0);
  transition: width 0.3s ease;
}

.ol-mm-link:hover {
  padding-left: 10px;
}

.ol-mm-link:hover::after {
  width: 100%;
}

.ol-mm-cta {
  padding: 18px 22px 24px;
  border-top: 1px solid var(--border-colour);
}

.ol-mm-note {
  margin: 0 0 12px;
  font-style: italic;
  font-size: 14px;
  color: var(--primary-font-colour);
}

.ol-mm-btn {
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
}

/* ══════════════════════════════════════════════════════════════
   ol — page masthead + panels (contact & article pages)
   ══════════════════════════════════════════════════════════════ */

.ol-page-hero {
  padding: 4.5rem 0 4rem;
}

.ol-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgb(196, 0, 0);
}

.ol-hero-title {
  margin: 0 0 12px;
  font-family: 'Signika Negative', sans-serif;
  font-weight: 700;
  font-size: 3rem;
}

.ol-hero-sub {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
}

.ol-rule {
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 18px;
  background: rgb(196, 0, 0);
}

.ol-section {
  padding: 3.5rem 0 4rem;
}

.ol-panel {
  position: relative;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
}

.ol-index {
  display: block;
  margin-bottom: 4px;
  font-family: 'Signika Negative', sans-serif;
  font-size: 15px;
  font-style: italic;
  color: rgb(196, 0, 0);
}

.ol-panel-title {
  margin: 0 0 10px;
  font-family: 'Signika Negative', sans-serif;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.ol-muted {
  color: var(--primary-font-colour);
}

.ol-channel {
  display: flex;
  align-items: center;
  margin: 14px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-colour);
}

.ol-channel .material-icons {
  margin-right: 12px;
  font-size: 20px;
  color: rgb(196, 0, 0);
}

.ol-channel a {
  color: var(--background-heading-colour);
}

.ol-panel-quote {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgb(196, 0, 0);
  font-family: 'Signika Negative', sans-serif;
  font-style: italic;
  font-size: 16px;
  color: var(--primary-font-colour);
}

.ol-form-card {
  border-top: 3px solid rgb(196, 0, 0);
}

/* ── article reading card — book-like measure ── */

.ol-article {
  padding: 2.75rem 3rem;
  font-size: 17px;
  line-height: 1.9;
  text-align: justify;
}

.ol-article img,
.ol-article video {
  max-width: 100%;
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════
   ol — mobile overrides
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 319px) and (max-width: 490px) {
  .app-image-world {
    background-position: -460px;
  }
}

@media (max-width: 992px) {
  .ol-page-hero {
    padding: 3rem 0 2.5rem;
  }

  .ol-hero-title {
    font-size: 2.1rem;
  }

  .ol-section {
    padding: 2rem 0 2.5rem;
  }

  .ol-panel {
    padding: 1.5rem 1.25rem;
  }

  .ol-article {
    padding: 1.75rem 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   ol (user) — THE TRADING TERMINAL
   ══════════════════════════════════════════════════════════════
   Everything below is scoped under .ol-tt, the shell root in
   (user)/_layout.js. Its colours come in as INLINE css vars from
   olTerminalVars() in skin.js, so LIGHT and DARK both work and
   the guest pages above keep their own palette.

   Shape (matching the reference terminal):

     desktop   [rail 64] [ topbar                        ]
                         [ trades | chart | order        ]
     phone     [ account strip                           ]
               [ chart / order                           ]
               [ dock                                    ]

   The shell frame is CSS grid/flex rather than the Materialize
   grid: a float grid cannot express "fixed rail, row exactly one
   viewport tall, one pane scrolling while its neighbours do not".
   Every PAGE inside the slot is ordinary Materialize markup and
   uses the Materialize grid (see the grid rule in
   ai-rules-summary.md).
   ══════════════════════════════════════════════════════════════ */

.ol-tt {
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Signika Negative', sans-serif;
  font-size: 14px;
}

.ol-tt b,
.ol-tt .notranslate {
  font-variant-numeric: tabular-nums;
}

.ol-tt-icon {
  flex: 0 0 auto;
}

/* The terminal route is the only one that never scrolls as a page.
   100dvh, not 100vh: on a phone 100vh is the LARGE viewport — it ignores the
   browser's own toolbars, so the bottom of the terminal (the trade buttons,
   on a short handset) sits underneath them. dvh tracks the visible box.
   The 100vh line stays first as the fallback for browsers without dvh. */
.ol-tt-terminal {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.ol-tt-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 100% of the shell's CONTENT box, not 100vh: box-sizing is border-box, so
   on a phone the shell's 62px dock padding has already been taken off and a
   100vh body would overflow behind the dock by exactly that much. */
.ol-tt-terminal .ol-tt-body {
  height: 100%;
  min-height: 0;
}

/* ── the menu drawer (one menu, two triggers) ────────────────── */

.ol-tt-menu-trigger {
  flex: 0 0 auto;
}

.ol-tt-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ol-tt-nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* Single-column drawer shell — a genuine flex case: a fixed head, a body
   that scrolls, and a foot pinned to the bottom. */
.ol-tt-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 210;
  width: 300px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  background: var(--primary-background);
  border-right: 1px solid var(--border-colour);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.4);
  transform: translateX(-102%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ol-tt-nav.is-open {
  transform: translateX(0);
}

.ol-tt-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: 58px;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid var(--border-colour);
}

.ol-tt-nav-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--background-heading-colour);
}

.ol-tt-nav-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
}

.ol-tt-nav-group {
  margin-bottom: 14px;
}

.ol-tt-nav-group h3 {
  margin: 0 0 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--background-font-colour);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ol-tt-nav-link:hover {
  background: var(--hover);
  color: var(--background-heading-colour);
}

.ol-tt-nav-link.is-active {
  background: var(--secondary-background);
  color: var(--primary-button);
}

.ol-tt-nav-foot {
  flex: 0 0 auto;
  padding: 8px 10px 12px;
  border-top: 1px solid var(--border-colour);
}

.ol-tt-nav-out {
  color: var(--ol-tt-down);
}

.ol-tt-nav-out:hover {
  background: rgba(242, 69, 42, 0.1);
  color: var(--ol-tt-down);
}

/* the dock's tabs share this shape; the rail that also used it is gone */
.ol-tt-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--primary-font-colour);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ol-tt-rail-item small {
  font-size: 9.5px;
  letter-spacing: 0.2px;
}

.ol-tt-rail-item:hover {
  color: var(--background-heading-colour);
}

.ol-tt-rail-item.is-active {
  color: var(--primary-button);
}

/* ── topbar / account ───────────────────────────────────────── */

.ol-tt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  height: 58px;
  padding: 0 16px;
  background: var(--primary-background);
  border-bottom: 1px solid var(--border-colour);
}

.ol-tt-topbar-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--background-heading-colour);
}

.ol-tt-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ol-tt-acct-figure {
  display: block;
  line-height: 1.2;
  text-align: right;
  color: inherit;
}

.ol-tt-acct-figure small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  color: var(--primary-font-colour);
}

.ol-tt-acct-balance {
  display: block;
  color: var(--background-heading-colour);
  font-size: 16px;
  font-weight: 700;
}

/* `background: transparent` is not decoration: these render as <button> as
   well as <a>, and a <button> with no background declared keeps the UA's
   light `buttonface` — which is what made Sign out white-on-white. */
.ol-tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ol-tt-btn-primary {
  background: var(--primary-button);
  color: #ffffff;
}

.ol-tt-btn-primary:hover {
  filter: brightness(1.1);
}

.ol-tt-btn-ghost {
  border-color: var(--border-colour);
  background: var(--secondary-background);
  color: var(--background-heading-colour);
}

.ol-tt-btn-ghost:hover {
  border-color: var(--primary-button);
  background: var(--hover);
}

.ol-tt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ol-tt-icon-btn:hover {
  background: var(--hover);
  color: var(--background-heading-colour);
}

.ol-tt-icon-btn.is-active {
  background: var(--secondary-background);
  color: var(--primary-button);
}

/* ── page slot ──────────────────────────────────────────────── */

.ol-tt-main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px 40px;
}

.ol-tt-terminal .ol-tt-main,
.ol-tt-main.ol-tt-flush {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.ol-tt-main.ol-tt-flush > .tab-fade {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.ol-tt-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

/* ── the three-column desk ──────────────────────────────────── */

.ol-tt-desk {
  display: grid;
  grid-template-columns: 1fr 264px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.ol-tt-desk-trades {
  grid-template-columns: 350px 1fr 264px;
}

/* Below ~1400px the chart is the pane that can least afford to be narrow,
   so the two rails give a little back rather than squeezing it. */
@media only screen and (min-width: 993px) and (max-width: 1400px) {
  .ol-tt-desk {
    grid-template-columns: 1fr 230px;
  }

  .ol-tt-desk-trades {
    grid-template-columns: 300px 1fr 230px;
  }
}

/* ── trades panel ───────────────────────────────────────────── */

.ol-tt-trades {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--primary-background);
  border-right: 1px solid var(--border-colour);
}

/* desktop: the panel is a column, so there is nothing to dismiss */
.ol-tt-trades-scrim {
  display: none;
}

.ol-tt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--border-colour);
  font-size: 15px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ol-tt-trades-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.ol-tt-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--primary-font-colour);
}

.ol-tt-trade {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  background: var(--secondary-background);
}

.ol-tt-trade-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ol-tt-trade-head img {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-trade-id {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.ol-tt-trade-id b {
  display: block;
  font-size: 13px;
  color: var(--background-heading-colour);
}

.ol-tt-trade-id small {
  font-size: 9.5px;
  letter-spacing: 0.4px;
  color: var(--primary-font-colour);
}

.ol-tt-trade-dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
}

.ol-tt-up-bg {
  background: var(--ol-tt-up);
}

.ol-tt-down-bg {
  background: var(--ol-tt-down);
}

.ol-tt-up {
  color: var(--ol-tt-up);
}

.ol-tt-down {
  color: var(--ol-tt-down);
}

.ol-tt-trade-pl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 9px 0 8px;
  font-size: 13px;
}

/* entry / now / size — a 2x2 on the narrow terminal column, one row wherever
   there is room for four */
.ol-tt-trade-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-colour);
}

.ol-tt-trade-meta > span {
  min-width: 0;
  line-height: 1.3;
}

/* a copied position trades Entry+Now for one trader name, which needs the
   room those two columns gave up */
.ol-tt-trade-meta-wide {
  grid-column: span 2;
}

.ol-tt-trade-meta small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-trade-meta b {
  display: block;
  font-size: 12.5px;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the home screen's positions grid has wider cards than the terminal column */
.ol-tt-positions-grid .ol-tt-trade-meta {
  grid-template-columns: repeat(4, 1fr);
}

/* ── live balance (terminal topbar) ─────────────────────────── */

.ol-tt-live {
  display: block;
  line-height: 1.2;
  text-align: right;
  color: inherit;
}

.ol-tt-live small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  color: var(--primary-font-colour);
}

.ol-tt-live b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.ol-tt-trade-timer {
  display: block;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  color: var(--primary-font-colour);
}

/* The close button is the shared components/TradesCloseButtonComponent —
   a Materialize .btn labelled CLOSE. It stays unforked, so the return
   figure the reference prints is an overlaid span from the trade card:
   the button's own text is blanked and the span is centred on top with
   pointer-events off, leaving the click on the real button. */
.ol-tt-trade-close {
  position: relative;
}

.ol-tt-trade-close .btn {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0;
  line-height: 34px;
  border-radius: 9px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 0;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.ol-tt-trade-close .btn:hover {
  background: var(--hover);
  box-shadow: none;
}

.ol-tt-trade-close-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

/* while the close request is in flight the shared button swaps itself for
   a progress bar — the overlaid label would then float over nothing */
.ol-tt-trade-close:has(.progress) .ol-tt-trade-close-label {
  display: none;
}

.ol-tt-trade-close .progress {
  margin: 8px 0;
  background: var(--border-colour);
}

/* ── chart pane ─────────────────────────────────────────────── */

.ol-tt-chart-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--background-colour);
}

.ol-tt-chart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-colour);
}

.ol-tt-picker {
  position: relative;
}

/* A capsule, not a card: at 9px radius over a filled panel this read as a
   box sitting on a box. Fully rounded, transparent until you reach for it,
   so the instrument reads as the label it is and only shows its affordance
   on hover. */
.ol-tt-instrument {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ol-tt-instrument:hover,
.ol-tt-instrument[aria-expanded='true'] {
  background: var(--secondary-background);
}

.ol-tt-instrument img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-instrument b {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the tag stays a hard-edged chip — it is the one thing on the pill that
   should read as a label rather than as text */
.ol-tt-instrument-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ol-tt-fx);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ol-tt-instrument-caret {
  color: var(--primary-font-colour);
}

/* ── instrument picker (the terminal's asset search) ─────────── */

.ol-tt-picker-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 140;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ol-tt-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 12px;
  height: 44px;
  border-bottom: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
}

.ol-tt-picker-search input {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13.5px;
}

.ol-tt-picker-search input:focus {
  border: none;
  box-shadow: none;
}

.ol-tt-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.ol-tt-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--background-font-colour);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ol-tt-picker-row:hover {
  background: var(--hover);
}

.ol-tt-picker-row.is-active {
  background: var(--secondary-background);
}

.ol-tt-picker-row img {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-picker-id {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.ol-tt-picker-id b {
  display: block;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-picker-id small {
  font-size: 11px;
  color: var(--primary-font-colour);
}

.ol-tt-chart-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.ol-tt-chart-holder {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.ol-tt-chart-holder > * {
  width: 100%;
  height: 100%;
}

/* The lightweight-charts pane prints the symbol as a huge <h2> over the
   top-left of the plot; the instrument pill above already names it. */
.ol-tt-chart-holder h2 {
  display: none;
}

/* The two TradingView levels (Simple, Technical) mount into a plain div and
   ask the widget for height:100% — which resolves to nothing unless every
   wrapper between here and the iframe is stretched too. */
.ol-tt-chart-holder .tradingview-widget-container,
.ol-tt-chart-holder .tradingview-widget-container > div:first-child,
.ol-tt-chart-holder iframe {
  width: 100%;
  height: 100%;
}

.ol-tt-chart-holder .tradingview-widget-copyright {
  display: none;
}

/* ── order panel ────────────────────────────────────────────── */

.ol-tt-order {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  background: var(--primary-background);
  border-left: 1px solid var(--border-colour);
}

.ol-tt-order-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ol-tt-stepper {
  padding: 9px 10px 10px;
  border-radius: 10px;
  background: var(--secondary-background);
}

.ol-tt-stepper-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-stepper-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ol-tt-stepper-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-colour);
  border-radius: 7px;
  background: var(--primary-background);
  color: var(--background-heading-colour);
  cursor: pointer;
}

.ol-tt-stepper-row button:hover {
  background: var(--hover);
}

/* The visible figure sits on top of a real number input: the span carries
   the $ / x the reference shows, the input keeps a numeric keypad on a
   phone. Focusing the field hides the span and reveals the input. */
.ol-tt-stepper-value {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  cursor: text;
}

.ol-tt-stepper-value span,
.ol-tt-stepper-value input {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.ol-tt-stepper-value input {
  opacity: 0;
}

.ol-tt-stepper-value input:focus {
  opacity: 1;
  border: none;
  box-shadow: none;
}

/* the span sits BEFORE the input in the DOM, so this is the focus-within
   form rather than a sibling selector */
.ol-tt-stepper-value:focus-within span {
  opacity: 0;
}

.ol-tt-order-extras {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ol-tt-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  background: var(--secondary-background);
}

.ol-tt-field > span {
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--primary-font-colour);
}

.ol-tt-field input,
.ol-tt-field select {
  width: 66px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.ol-tt-field input:focus,
.ol-tt-field select:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.ol-tt-levels-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 8px;
  border: 1px dashed var(--border-colour);
  border-radius: 9px;
  background: transparent;
  color: var(--primary-font-colour);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.ol-tt-levels-toggle.is-open {
  color: var(--background-heading-colour);
}

.ol-tt-levels-toggle.is-open svg {
  transform: rotate(180deg);
}

.ol-tt-order-note {
  margin: 0;
  font-size: 11px;
  text-align: center;
  color: var(--primary-font-colour);
}

.ol-tt-order-note b {
  color: var(--background-heading-colour);
}

.ol-tt-order-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.ol-tt-trade-btn {
  height: 46px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.ol-tt-trade-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ol-tt-trade-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ol-tt-buy {
  background: var(--ol-tt-buy);
}

.ol-tt-sell {
  background: var(--ol-tt-sell);
}

/* ── /user landing bar ──────────────────────────────────────── */

.ol-tt-home-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
}

.ol-tt-home-balance {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}

.ol-tt-home-balance small {
  display: block;
  font-size: 10px;
  letter-spacing: 1.1px;
  color: var(--primary-font-colour);
}

.ol-tt-home-balance b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--background-heading-colour);
}

.ol-tt-home-bar .ol-tt-btn {
  gap: 6px;
  height: 38px;
}

/* ── positions (home + ?tab=open / ?tab=closed) ──────────────── */

.ol-tt-positions {
  clear: both;
  margin-bottom: 26px;
}

.ol-tt-positions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* segmented Open / Closed switch */
.ol-tt-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
}

.ol-tt-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-font-colour);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ol-tt-seg button span {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--secondary-background);
  font-size: 11px;
}

.ol-tt-seg button.is-active {
  background: var(--secondary-background);
  color: var(--background-heading-colour);
}

.ol-tt-seg button.is-active span {
  background: var(--primary-button);
  color: #ffffff;
}

.ol-tt-positions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

/* The card is shared with the terminal's column, where it sits on a panel.
   On the home screen it sits on the page, so it carries the panel surface
   itself rather than the nested one. */
.ol-tt-positions-grid .ol-tt-trade {
  margin: 0;
  padding: 12px;
  background: var(--primary-background);
}

/* timed positions carry only percent, countdown and P/L */
.ol-tt-trade-clock {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--secondary-background);
  color: var(--background-heading-colour);
  font-size: 12px;
  font-weight: 600;
}

.ol-tt-trade-timed .ol-tt-trade-pl {
  margin-bottom: 0;
}

.ol-tt-closed-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  list-style: none;
}

.ol-tt-closed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-colour);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ol-tt-closed:last-child {
  border-bottom: none;
}

.ol-tt-closed:hover {
  background: var(--hover);
}

.ol-tt-closed img {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-closed-id {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.ol-tt-closed-id b {
  display: block;
  font-size: 13.5px;
  color: var(--background-heading-colour);
}

.ol-tt-closed-id small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

/* ── stat cards (holding, mining) ───────────────────────────── */

/* Materialize gives every .col a horizontal padding that .row is supposed to
   cancel with a matching negative margin — the bundled resets zero that
   margin, so the cards ended up inset from the list below them by the gutter
   width on both sides. Drop the padding and put the gutter BETWEEN the cards
   instead, so their outer edges line up with everything else on the page. */
.ol-tt-stats > .col {
  padding-left: 0;
  padding-right: 0;
}

/* Materialize .col floats, and the framework's clearfix leaves the row a
   FRACTIONAL pixel short of its floats — enough that the next block starts
   1px inside them and its flex header collapsed to 1px wide, throwing the
   Open/Closed switch off the right edge. flow-root makes the row a block
   formatting context, so it contains its floats exactly. */
.ol-tt-stats {
  display: flow-root;
}

@media only screen and (min-width: 601px) {
  .ol-tt-stats > .col:first-child .ol-tt-stat {
    margin-right: 6px;
  }

  .ol-tt-stats > .col:last-child .ol-tt-stat {
    margin-left: 6px;
  }
}

.ol-tt-stat {
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  line-height: 1.25;
}

.ol-tt-stat small {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 1.1px;
  color: var(--primary-font-colour);
}

.ol-tt-stat > b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--background-heading-colour);
}

.ol-tt-stat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--primary-link-colour);
  font-size: 12.5px;
  font-weight: 600;
}

/* ── holding + mining rows ──────────────────────────────────── */

/* A MINING row wraps its content in an <a>, so the <li> is zeroed and the
   link carries the padding. A HOLDING row has no inner link — the <li> IS the
   flex row — so it must keep its own padding. Zeroing both is what left the
   holding list cramped: this selector outranks `.ol-tt-hold` on specificity,
   so the 16px below was never applied. */
.ol-tt .collection .collection-item.ol-tt-mine {
  padding: 0;
}

.ol-tt .collection .collection-item.ol-tt-hold {
  padding: 16px 18px;
}

.ol-tt-hold,
.ol-tt-mine > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  color: var(--background-font-colour);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ol-tt-hold:hover,
.ol-tt-mine > a:hover {
  background: var(--hover);
}

.ol-tt-hold img,
.ol-tt-mine img {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-hold-id,
.ol-tt-mine-id {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.ol-tt-hold-id b,
.ol-tt-mine-id b {
  display: block;
  font-size: 14px;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-hold-id small,
.ol-tt-mine-id small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.ol-tt-hold-value,
.ol-tt-mine-value {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.3;
}

.ol-tt-hold-value b,
.ol-tt-mine-value b {
  display: block;
  font-size: 14px;
  color: var(--background-heading-colour);
}

.ol-tt-hold-value small,
.ol-tt-mine-value small {
  font-size: 11px;
  color: var(--primary-font-colour);
}

.ol-tt-hold-go {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: var(--primary-link-colour);
  font-size: 12.5px;
  font-weight: 600;
}

.ol-tt-mine-state {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--secondary-background);
  color: var(--primary-font-colour);
  font-size: 11px;
  font-weight: 600;
}

.ol-tt-mine-state.is-live {
  background: rgba(22, 192, 100, 0.14);
  color: var(--ol-tt-up);
}

@media only screen and (max-width: 600px) {
  .ol-tt-hold-go {
    display: none;
  }

  .ol-tt-stat > b {
    font-size: 22px;
  }
}

/* ── deposits list ──────────────────────────────────────────── */

.ol-tt .collection .collection-item.ol-tt-dep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.ol-tt-dep-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--background-font-colour);
}

.ol-tt-dep-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--secondary-background);
  color: var(--primary-link-colour);
}

.ol-tt-dep-id {
  min-width: 0;
  line-height: 1.35;
}

.ol-tt-dep-id b {
  display: block;
  font-size: 14px;
  color: var(--background-heading-colour);
}

.ol-tt-dep-id small {
  display: block;
  font-size: 11.5px;
  color: var(--primary-font-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-dep-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  text-align: right;
}

.ol-tt-dep-end small {
  font-size: 11px;
  color: var(--primary-font-colour);
}

.ol-tt-dep-status {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--secondary-background);
  color: var(--primary-font-colour);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ol-tt-dep-status.is-ok {
  background: rgba(22, 192, 100, 0.14);
  color: var(--ol-tt-up);
}

.ol-tt-dep-status.is-wait {
  background: rgba(47, 143, 239, 0.14);
  color: var(--primary-link-colour);
}

.ol-tt-dep-status.is-bad {
  background: rgba(242, 69, 42, 0.12);
  color: var(--ol-tt-down);
}

.ol-tt-dep-pay {
  color: var(--primary-link-colour);
  font-size: 12px;
  font-weight: 600;
}

/* ── history summary ────────────────────────────────────────── */

.ol-tt-stat-sm {
  padding: 12px 14px;
}

.ol-tt-stat-sm > b {
  font-size: 19px;
}

@media only screen and (max-width: 600px) {
  .ol-tt-stat-sm > b {
    font-size: 17px;
  }

  .ol-tt-stats > .col:nth-child(odd) .ol-tt-stat-sm {
    margin-right: 5px;
  }

  .ol-tt-stats > .col:nth-child(even) .ol-tt-stat-sm {
    margin-left: 5px;
  }
}

/* ── staking rows ───────────────────────────────────────────── */

.ol-tt .collection .collection-item.ol-tt-stake {
  padding: 0;
}

.ol-tt-stake > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  color: var(--background-font-colour);
  transition: background 0.15s ease;
}

.ol-tt-stake > a:hover {
  background: var(--hover);
}

.ol-tt-stake img {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-stake-id {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.ol-tt-stake-id b {
  display: block;
  font-size: 14px;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-stake-id small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.ol-tt-stake-fig {
  flex: 0 0 auto;
  min-width: 96px;
  text-align: right;
  line-height: 1.35;
}

.ol-tt-stake-fig small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-stake-fig b {
  display: block;
  font-size: 13.5px;
  color: var(--background-heading-colour);
}

@media only screen and (max-width: 600px) {
  .ol-tt-stake > a {
    gap: 10px;
    padding: 14px;
  }

  .ol-tt-stake-fig {
    min-width: 84px;
  }

  .ol-tt-stake-fig b {
    font-size: 13px;
  }

  .ol-tt-stake-fig small {
    font-size: 9.5px;
  }
}

/* ── referrals ──────────────────────────────────────────────── */

.ol-tt-ref-share {
  display: flex;
  flex-direction: column;
}

.ol-tt-ref-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.ol-tt-ref-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 9px;
  box-shadow: none;
  background: var(--secondary-background);
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13px;
}

.ol-tt-ref-row input:focus {
  border-color: var(--primary-button);
  box-shadow: none;
}

.ol-tt-ref-row .ol-tt-btn {
  flex: 0 0 auto;
  gap: 6px;
  height: 38px;
}

.ol-tt .collection .collection-item.ol-tt-ref {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.ol-tt-ref img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-ref-id {
  min-width: 0;
  line-height: 1.35;
}

.ol-tt-ref-id b {
  display: block;
  font-size: 14px;
  color: var(--background-heading-colour);
}

.ol-tt-ref-id small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

/* ── shared list rows inside the shell ──────────────────────────
   The "Add holding" tab, the stake/unstake screens and the wallet
   lists are the DEFAULT skin's Materialize collections, unforked.
   Their rows arrive at Materialize's own cramped padding while
   every list ol draws sits at 16px — give them the same room so a
   page does not change density when it crosses into shared markup. */

.ol-tt .collection .collection-item {
  padding: 14px 18px;
}

.ol-tt .collection .collection-item > .row {
  margin-bottom: 0;
}

.ol-tt .collection .collection-item img {
  border-radius: 50%;
  object-fit: cover;
}

/* ── watchlist ──────────────────────────────────────────────── */

.ol-tt-watchlist {
  margin-bottom: 26px;
}

.ol-tt-watchlist .ol-tt-screen-head {
  margin-bottom: 12px;
}

.ol-tt-watchlist .ol-tt-btn {
  gap: 6px;
  margin-left: auto;
}

/* ── assets screen ──────────────────────────────────────────── */

.ol-tt-screen {
  max-width: 1180px;
  margin: 0 auto;
}

.ol-tt-screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ol-tt-screen-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.ol-tt-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 12px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
}

.ol-tt-search input {
  width: 150px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13px;
}

.ol-tt-search input:focus {
  border: none;
  box-shadow: none;
}

.ol-tt-screen-sub {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-font-colour);
}

.ol-tt-trends {
  margin-bottom: 18px;
}

.ol-tt-trend {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ol-tt-trend:hover {
  border-color: var(--primary-button);
  transform: translateY(-1px);
}

.ol-tt-trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ol-tt-trend-head b {
  font-size: 13px;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-trend-head small {
  font-size: 10.5px;
  color: var(--primary-font-colour);
}

.ol-tt-trend .ol-tt-spark {
  display: block;
  width: 100%;
  margin-top: 6px;
}

/* nowrap is load-bearing: "+16.96%" is wide enough to break between the
   figure and the sign in a narrow column, which read as two lines of noise */
.ol-tt-asset-change {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

@media only screen and (max-width: 600px) {
  .ol-tt-asset-change {
    font-size: 11.5px;
  }
}

.ol-tt-asset-heads {
  margin-bottom: 0;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-asset-mult {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 11.5px;
  font-weight: 600;
}

.ol-tt-asset-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.ol-tt-asset-id img {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-asset-id b {
  display: block;
  font-size: 13.5px;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-asset-id small {
  font-size: 11px;
  color: var(--primary-font-colour);
}

.ol-tt-asset-star .material-icons {
  font-size: 20px;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.ol-tt-asset-star .material-icons:hover {
  color: var(--primary-button);
}

/* ── the phone dock ─────────────────────────────────────────── */

.ol-tt-dock {
  display: none;
}

/* Sits INSIDE the bar, level with the four tools beside it — no lifted FAB.
   A raised centre button costs vertical room the dock does not have on a
   short phone, and it made the row read as five things at two heights. */
.ol-tt-dock-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-button);
  color: #ffffff;
}

.ol-tt-dock-fab.is-active {
  box-shadow: 0 0 0 3px var(--secondary-background);
}

/* ── account page (/user/profile) ────────────────────────────── */

.ol-tt-account-page {
  max-width: 1180px;
  margin: 0 auto;
}

.ol-tt-identity {
  padding: 24px 20px 20px;
  text-align: center;
  border: 1px solid var(--border-colour);
  border-radius: 16px;
  background: var(--primary-background);
}

.ol-tt-identity-photo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-colour);
}

.ol-tt-identity-name {
  margin: 14px 0 2px;
  font-size: 19px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.ol-tt-identity-email {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--primary-font-colour);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ol-tt-identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--secondary-background);
  color: var(--primary-font-colour);
  font-size: 11.5px;
  font-weight: 600;
}

.ol-tt-identity-pill.is-verified {
  color: var(--ol-tt-up);
}

.ol-tt-identity-plan {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-identity-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-colour);
}

.ol-tt-identity-actions .ol-tt-btn {
  flex: 1 1 0;
  gap: 6px;
  cursor: pointer;
}

/* grouped settings rows */

.ol-tt-set-group {
  margin-bottom: 18px;
}

.ol-tt-set-title {
  margin: 0 0 8px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-set-rows {
  overflow: hidden;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
}

.ol-tt-set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-colour);
  color: var(--background-font-colour);
  transition: background 0.15s ease;
}

.ol-tt-set-row:last-child {
  border-bottom: none;
}

.ol-tt-set-row:hover {
  background: var(--hover);
}

/* One tint for every row, not a colour per item: the GROUP carries the
   meaning here, and a list where each row is a different colour reads as a
   list of priorities rather than a list of settings. */
.ol-tt-set-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--secondary-background);
  color: var(--primary-link-colour);
}

.ol-tt-set-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.ol-tt-set-text b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ol-tt-set-text small {
  display: block;
  font-size: 12px;
  color: var(--primary-font-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-tt-set-caret {
  flex: 0 0 auto;
  color: var(--primary-font-colour);
}

/* ── copy experts (/user/trading?tab=traders) ────────────────── */

.ol-tt-expert-search {
  max-width: 420px;
  margin-bottom: 14px;
}

.ol-tt-expert-search .input-field {
  margin: 0;
}

.ol-tt-expert-search input {
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  box-shadow: none;
  background: var(--primary-background);
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13.5px;
}

.ol-tt-expert-search input:focus {
  border-color: var(--primary-button);
  box-shadow: none;
}

/* ListComponent wraps the cards in `ul.collection.row` — the grid lives on
   that <ul>, so the cards lay out without an extra container.
   The `.ol-tt` prefix is load-bearing: the shared-Materialize block further
   down gives every .collection a panel background at the SAME specificity,
   and being later in the file it would otherwise win and draw a card behind
   the card grid. */
.ol-tt .ol-tt-expert-grid .collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.ol-tt .ol-tt-expert-grid .collection .collection-item.ol-tt-expert {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-colour);
  border-bottom: 1px solid var(--border-colour);
  border-radius: 16px;
  background: var(--primary-background);
}

.ol-tt-expert-hidden {
  display: none;
}

.ol-tt-expert-head {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
}

.ol-tt-expert-head img {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.ol-tt-expert-id {
  min-width: 0;
  line-height: 1.3;
}

.ol-tt-expert-id b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--background-heading-colour);
}

.ol-tt-expert-id small {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.ol-tt-expert-check {
  color: var(--primary-button);
}

.ol-tt-expert-bio {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--primary-font-colour);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ol-tt-expert-stats {
  display: flex;
  gap: 6px;
  margin: 14px 0;
  padding: 11px 0;
  border-top: 1px solid var(--border-colour);
  border-bottom: 1px solid var(--border-colour);
}

.ol-tt-expert-stat {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  line-height: 1.35;
}

.ol-tt-expert-stat b {
  display: block;
  font-size: 15px;
  color: var(--background-heading-colour);
}

.ol-tt-expert-stat small {
  font-size: 10.5px;
  color: var(--primary-font-colour);
}

.ol-tt-expert-action {
  width: 100%;
  height: 40px;
  margin-top: auto;
  cursor: pointer;
}

.ol-tt-expert-terms {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12.5px;
}

.ol-tt-expert-terms a {
  color: var(--primary-link-colour);
}

/* ══════════════════════════════════════════════════════════════
   ol (user) — the shared Materialize pages inside the shell
   Deposits, withdrawals, profile and the trading sub-tabs are the
   DEFAULT skin's Materialize markup. They are not forked (a
   copied-but-unchanged page is a second thing to keep in sync),
   so the terminal re-skins their primitives here instead.
   ══════════════════════════════════════════════════════════════ */

.ol-tt .card,
.ol-tt .card-panel,
.ol-tt .collection {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  box-shadow: none;
  color: var(--background-font-colour);
}

.ol-tt .collection {
  overflow: hidden;
}

.ol-tt .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  color: var(--background-font-colour);
}

.ol-tt .collection .collection-item:last-child {
  border-bottom: none;
}

.ol-tt h1,
.ol-tt h2,
.ol-tt h3,
.ol-tt h4,
.ol-tt h5,
.ol-tt h6 {
  color: var(--background-heading-colour);
}

.ol-tt table {
  color: var(--background-font-colour);
}

.ol-tt th {
  color: var(--background-heading-colour);
}

.ol-tt td,
.ol-tt th {
  border-bottom: 1px solid var(--border-colour);
}

.ol-tt input[type='text'],
.ol-tt input[type='email'],
.ol-tt input[type='password'],
.ol-tt input[type='number'],
.ol-tt input[type='date'],
.ol-tt input[type='search'],
.ol-tt textarea,
.ol-tt select.browser-default {
  color: var(--background-heading-colour);
  border-bottom: 1px solid var(--border-colour);
}

.ol-tt select.browser-default {
  padding: 8px 10px;
  border: 1px solid var(--border-colour);
  border-radius: 9px;
  background: var(--secondary-background);
}

.ol-tt .ol-tt-field select.browser-default {
  padding: 0;
  border: none;
  background: transparent;
}

.ol-tt label,
.ol-tt .grey-text {
  color: var(--primary-font-colour) !important;
}

.ol-tt .btn,
.ol-tt .btn-large {
  border-radius: 9px;
  background-color: var(--primary-button);
  box-shadow: none;
  font-family: inherit;
  letter-spacing: 0.3px;
}

.ol-tt .btn:hover,
.ol-tt .btn-large:hover {
  box-shadow: none;
  filter: brightness(1.1);
}

.ol-tt .btn.green {
  background-color: var(--ol-tt-buy) !important;
}

.ol-tt .btn.red {
  background-color: var(--ol-tt-sell) !important;
}

.ol-tt .tabs {
  background: transparent;
}

.ol-tt .tabs .tab a {
  color: var(--primary-font-colour);
}

.ol-tt .tabs .tab a.active,
.ol-tt .tabs .tab a:hover {
  color: var(--background-heading-colour);
}

.ol-tt .tabs .indicator {
  background-color: var(--primary-button);
}

.ol-tt .dropdown-content {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
}

.ol-tt .dropdown-content li > a,
.ol-tt .dropdown-content li > span {
  color: var(--background-heading-colour);
}

.ol-tt .progress {
  background-color: var(--secondary-background);
}

/* ══════════════════════════════════════════════════════════════
   ol (user) — phone
   The reference's phone screens: a top account strip, the chart
   over the order controls, and the dock along the bottom. The
   trades column becomes a slide-over behind the dock's first tab.
   ══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 992px) {
  .ol-tt {
    padding-bottom: 56px;
  }

  .ol-tt-desk-only {
    display: none !important;
  }

  .ol-tt-topbar {
    height: 54px;
    padding: 0 12px;
  }

  /* the wordmark stays on the phone now that the balance is not competing
     with it for the bar */
  .ol-tt-topbar-brand {
    font-size: 15px;
  }

  .ol-tt-main {
    padding: 14px 12px 30px;
  }

  /* chart on top, order controls underneath — the reference's phone
     terminal. The order panel is a fixed-height strip so the chart takes
     whatever is left rather than being squeezed by a growing form. */
  .ol-tt-desk,
  .ol-tt-desk-trades {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  /* The chart takes what is LEFT, and the order panel is sized by its
     content — so the trade buttons are never the thing that gets pushed off
     a short screen; the chart gives up the pixels instead. */
  .ol-tt-chart-pane {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ol-tt-chart-holder {
    min-height: 0;
  }

  .ol-tt-order {
    flex: 0 0 auto;
    gap: 7px;
    padding: 9px 12px 10px;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--border-colour);
  }

  .ol-tt-trade-meta {
    grid-template-columns: repeat(4, 1fr);
  }

  .ol-tt-live {
    margin-right: auto;
    text-align: left;
  }

  .ol-tt-order-fields {
    flex-direction: row;
  }

  .ol-tt-order-fields .ol-tt-stepper {
    flex: 1 1 0;
    min-width: 0;
  }

  .ol-tt-order-extras {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .ol-tt-order-extras > * {
    flex: 1 1 auto;
  }

  .ol-tt-order-note {
    text-align: right;
  }

  /* Sell on the left, Buy on the right — the markup is Buy-then-Sell for
     the desktop rail, so the phone reverses it rather than duplicating. */
  .ol-tt-order-actions {
    flex-direction: row-reverse;
    margin-top: 0;
    padding-top: 0;
  }

  .ol-tt-order-actions .ol-tt-trade-btn {
    flex: 1 1 0;
    height: 46px;
  }

  /* trades as a slide-over, with a way out that is not the ✕ */
  .ol-tt-trades-scrim {
    display: block;
    position: fixed;
    inset: 0 0 56px 0;
    z-index: 185;
    background: rgba(0, 0, 0, 0.5);
  }

  .ol-tt-trades {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 56px;
    z-index: 190;
    width: 320px;
    max-width: 86vw;
    border-right: 1px solid var(--border-colour);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  }

  .ol-tt-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 195;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 2px;
    background: var(--primary-background);
    border-top: 1px solid var(--border-colour);
  }

  /* Icons only, like the reference's phone dock — and it is the LABELS that
     would break the alignment: a labelled item is a two-row column, so its
     glyph rides high while the unlabelled centre button centres itself.
     Drop them and every icon in the row shares one centre line. */
  /* Seven slots share the bar, so they FLEX rather than take a fixed width —
     at 375px a fixed 52px each would overflow. */
  .ol-tt-dock .ol-tt-rail-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    height: 40px;
    padding: 0;
  }

  .ol-tt-dock .ol-tt-dock-fab {
    flex: 0 0 38px;
    margin: 0 2px;
  }

  .ol-tt-dock .ol-tt-rail-item small {
    display: none;
  }



  /* ── the menu, as a BOTTOM SHEET of tiles ──────────────────────
     Same markup and the same links as the desktop drawer; only the
     shape changes. A side drawer on a phone hides behind a thumb and
     wastes the width, so the phone gets the tile sheet — three up,
     rising from the dock that opened it. */
  .ol-tt-nav {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 84vh;
    border-right: none;
    border-top: 1px solid var(--border-colour);
    border-radius: 18px 18px 0 0;
    transform: translateY(102%);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45);
  }

  .ol-tt-nav.is-open {
    transform: translateY(0);
  }

  .ol-tt-nav-head {
    height: 52px;
  }

  .ol-tt-nav-body {
    padding: 10px 12px;
  }

  .ol-tt-nav-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .ol-tt-nav-group h3 {
    grid-column: 1 / -1;
    margin: 2px 0 0 2px;
  }

  .ol-tt-nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: 76px;
    padding: 10px 6px;
    border: 1px solid var(--border-colour);
    background: var(--secondary-background);
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  .ol-tt-nav-foot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 12px 22px;
  }

  .ol-tt-nav-foot .ol-tt-nav-link {
    flex-direction: row;
    min-height: 44px;
    font-size: 13px;
  }

  .ol-tt-screen-name {
    font-size: 20px;
  }

  /* the landing bar stacks: balance across the top, actions side by side */
  .ol-tt-home-bar {
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 14px;
  }

  .ol-tt-home-balance {
    flex: 1 0 100%;
    margin-bottom: 4px;
  }

  .ol-tt-home-balance b {
    font-size: 23px;
  }

  .ol-tt-home-bar .ol-tt-btn {
    flex: 1 1 0;
  }

  .ol-tt-search input {
    width: 100px;
  }

  .ol-tt-asset-heads {
    padding: 0 12px;
    font-size: 10px;
  }

  .ol-tt .collection .collection-item {
    padding: 10px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ol (user) — SHORT phones
   An iPhone SE is 375 x 667, and after the topbar and the dock a
   667pt screen has ~550pt of terminal to divide between chart and
   order panel. Everything below trims the fixed chrome so the
   chart keeps a readable share and the Buy/Sell pair still lands
   above the fold. Sizes only — nothing here changes layout, so
   the phone rules above keep every arrangement they own.
   ══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 992px) and (max-height: 720px) {
  .ol-tt-topbar {
    height: 48px;
  }

  .ol-tt-acct-balance {
    font-size: 15px;
  }

  .ol-tt-chart-head {
    height: 40px;
  }

  .ol-tt-order {
    gap: 6px;
    padding: 7px 10px 8px;
  }

  .ol-tt-stepper {
    padding: 4px 7px 5px;
  }

  .ol-tt-stepper-label {
    margin-bottom: 1px;
    font-size: 9px;
  }

  /* the position readout is a convenience, not a control — first to go */
  .ol-tt-order-note {
    display: none;
  }

  .ol-tt-order-actions .ol-tt-trade-btn {
    height: 42px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ol-tt *,
  .ol-si * {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ol — sign in
   The doorway to the terminal, so it wears the terminal palette:
   one navy card on a navy field. (The previous CRT-terminal
   treatment is parked in (user)/signinold.js.)
   ══════════════════════════════════════════════════════════════ */

.ol-si {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Signika Negative', sans-serif;
}

.ol-si-row {
  width: 100%;
  margin-bottom: 0;
  padding: 40px 0;
}

.ol-si-card {
  padding: 34px 32px 30px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ol-si-brand {
  display: block;
  margin-bottom: 22px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--background-heading-colour);
}

.ol-si-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.ol-si-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--primary-font-colour);
}

.ol-si-errors {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--ol-tt-down);
  border-radius: 10px;
  background: rgba(242, 69, 42, 0.08);
}

.ol-si-errors p {
  margin: 0;
  font-size: 13px;
  color: var(--ol-tt-down);
}

.ol-si-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--primary-font-colour);
}

.ol-si .ol-si-input {
  width: 100%;
  height: 46px;
  margin: 0 0 18px;
  padding: 0 14px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  box-shadow: none;
  background: var(--secondary-background);
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 14px;
}

.ol-si .ol-si-input:focus {
  border-color: var(--primary-button);
  box-shadow: none;
  outline: none;
}

.ol-si-password {
  position: relative;
}

.ol-si-reveal {
  position: absolute;
  right: 10px;
  top: 12px;
  padding: 4px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--primary-link-colour);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ol-si-submit {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  background: var(--primary-button);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.ol-si-submit:hover:not(:disabled) {
  filter: brightness(1.1);
}

.ol-si-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ol-si-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-colour);
  font-size: 13px;
}

.ol-si-links a {
  color: var(--primary-link-colour);
}

@media only screen and (max-width: 992px) {
  .ol-si {
    align-items: flex-start;
  }

  .ol-si-row {
    padding: 20px 8px;
  }

  .ol-si-card {
    padding: 26px 20px 24px;
  }
}



@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* Hide the Google Translate top banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}