/* material-resets-public.css — the non-image half of the Materialize reset layer.
 *
 * Split from client/src/styles/material-resets.css: the rules carrying
 * url('../images/..') and the :root theme vars stay BUNDLED (webpack resolves the
 * image paths, theme.js rewrites the vars per site); everything else lives here as
 * a plain static file loaded after materialize.min.css so the resets win.
 *
 * Kept under static/ ON PURPOSE: zstep1.sh deletes every top-level *.css in
 * public_html/ during a build, and that loop does not recurse into subfolders.
 * Do not move this back up to public_html/ or the next build will delete it.
 */

body {
  top: 0 !important;
  position: static !important;
}

/* The page scroller is the ROOT element, never <body>. Giving body any
   non-visible overflow makes it a second, nested scroll container: the
   Google-Translate widget sets height:100% inline on <html> at runtime, so
   <html> becomes the viewport scroller and body sits inside it. Body then
   only needs a sub-pixel of content overflow (a fractional content height,
   which any footer/section can produce) to gain ~1px of real scroll range —
   and every wheel/touch gesture scrolls body first, exhausts it instantly,
   then chains to <html>. That hand-off is felt as the scroll "catching" at
   the top and bottom. Keep overflow on html only. */
html {
  overflow-x: hidden;
  overflow-y: scroll; /* always-on gutter — no layout shift when content grows */
}

html,
body {
  max-width: 100vw;
}

/* ─── Footer sits at the BOTTOM OF THE PAGE, never fixed to the viewport ───
   A footer is part of the document: it follows the content, and on a page too
   short to fill the screen it is pushed down to the bottom rather than left
   floating in the middle. It must NEVER be position:fixed — that pins it over
   the content and steals screen from every page that is long enough already.

   NO FLEX. This used to make #root a flex column and hand <main> the slack
   (`flex: 1 0 auto`), which worked but imposed a flex context on EVERY page in
   the app whether it wanted one or not. That broke any page whose top-level
   child sizes itself from its content: /cp/signup renders a bare
   `<section class="row center">` with no <main> and no <footer>, and as a flex
   item it collapsed to 281px of a 1280px viewport — the form was one character
   per line.

   `position: sticky; top: 100vh` does the same job with no layout context at
   all. The footer is pinned to the bottom of the viewport while the page is
   shorter than the screen, and flows normally as soon as the content is taller.
   Everything else on the page keeps ordinary block layout, so a top-level
   element is full width again by default.

   Requires: #root at least 100vh (below), the footer last in its container, and
   no `overflow: hidden/auto/scroll` on an ancestor — sticky does not work
   inside a clipped or scrolling box. A skin shell that needs to clip should
   clip an inner element, not the one wrapping the footer. */
#root {
  min-height: 100vh;
}

#root footer {
  position: sticky;
  top: 100vh;
}

body {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.container {
  width: 90%;
}

.border {
  padding: 1rem;
  border-radius: 7px;
  border: 1px solid var(--border-colour);
}

.border-top {
  padding: 1rem;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border: 1px solid var(--border-colour);
}

.border-mid {
  padding: 1rem;
  border: 1px solid var(--border-colour);
}

.bg.bg-secondary a {
  color: var(--secondary-link-colour);
}

.bg.bg-secondary a.btn {
  color: white;
}

.collapsible-header,
.sidenav .collapsible-header {
  border-radius: 0;
  background: var(--primary-background);
}

a {
  color: var(--primary-button);
}

.sidenav .collapsible-body,
.sidenav.fixed .collapsible-body {
  background: var(--background-colour);
}

.btn.btn-secondary {
  color: var(--primary-button);
  background: transparent;
  border: 1px solid var(--primary-button);
}

.bg.bg-secondary a.btn.btn-secondary {
  color: white;
  background: transparent;
  border: 1px solid white;
}

nav a,
nav .brand-logo {
  color: var(--primary-font-colour);
}

nav {
  background: var(--primary-background);
}

.sidenav li > a.active {
  color: white;
  background: var(--primary-button);
}

.collapsible-header {
  margin-bottom: 1rem;
  border-radius: 15px;
}

.bg.bg-secondary .collapsible-header {
  color: var(--secondary-font-colour);
  background-color: var(--secondary-background);
  border: 1.5px solid rgba(255, 255, 255, 0.0509803922);
}

.bg.bg-secondary .card {
  color: var(--secondary-font-colour);
  background-color: var(--secondary-background);
  border: 1.5px solid rgba(255, 255, 255, 0.0509803922);
}

.border-background {
  background: var(--border-colour);
}

.tabs .indicator {
  background-color: var(--primary-button);
}

.blurred-background {
  background-color: rgba(var(--background-colour), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  color: #fff;
}

.box {
  width: 98%;
  padding: 1rem;
  display: block;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--primary-button);
}

.btn {
  background: var(--primary-button);
}

.btn:hover {
  background: var(--primary-button);
}

.btn.btn-secondary:hover {
  background: transparent;
}

nav ul a {
  color: var(--nav-primary-font-colour);
}

.bg.bg-secondary {
  color: var(--secondary-font-colour);
  background-color: var(--secondary-background);
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--background-colour);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-button);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-background);
}

textarea,
textarea:focus {
  border-color: var(--border-colour);
  color: var(--background-font-colour);
}

/* .collection-item {
  box-shadow: 0 0 20px 0 rgb(20 24 57 / 8%);
} */

.collection .collection-item .app-trader-border {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(20, 24, 57, 0.08);
  border-left: 1px solid rgba(20, 24, 57, 0.08);
  border-right: 1px solid rgba(20, 24, 57, 0.08);
}

.collection .collection-item .app-trader-border-name {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(20, 24, 57, 0.08);
  border-right: 1px solid rgba(20, 24, 57, 0.08);
}

.collection .collection-item .app-trader-border-image {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(20, 24, 57, 0.08);
  border-left: 1px solid rgba(20, 24, 57, 0.08);
}

/* .collection a {
  color: var(--primary-link-colour);
} */

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

a.inactive {
  color: var(--primary-font-colour);
}

/* .collection a.collection-item {
  color: var(--);
} */

.card-pane input[type='text']:not(.browser-default),
.card-pane input[type='email']:not(.browser-default),
.card-pane input[type='password']:not(.browser-default) {
  color: #dbdcdf;
  border: 1px solid #dbdcdf;
}

.btn.btn-white-trans {
  color: white;
  background: transparent;
  border: 1px solid white;
}

ul.tabs .material-icons {
  font-size: 30px;
}

.bgc,
.card.bgc {
  background-color: var(--background-colour);
}

.app-recharts {
  border: 3px solid var(--border-colour);
}

.btn-trans {
  background: transparent !important;
}

.btn-trans-primary {
  color: var(--primary-button);
  background: transparent !important;
  border: 1px solid var(--primary-button);
}

input::placeholder {
  color: grey;
  font-weight: 100;
}

a.btn {
  margin-bottom: 10px;
}

.btn-floating,
.btn-no-hover {
  padding: 10px;
  background: var(--primary-button);
}

.btn-floating:hover {
  background: var(--primary-button);
}

.alt-bg {
  background-color: var(--alt-background);
}

.dropdown-content li > a {
  color: black !important;
}

.collapsible-header {
  border-bottom: 0;
  /* color: var(--primary-font-colour);
  background: var(--primary-background); */
}

.card,
.card-panel {
  color: var(--primary-font-colour);
  background: var(--primary-background);
}

.bg .card-panel {
  color: var(--background-font-colour);
  /* background: var(--background-colour); */
}

.bg.bg-secondary h5 {
  color: white;
}

.train {
  width: 290px;
  height: 160px;
  border-radius: 10px;
  background: red;
}

.background {
  background: var(--background-colour);
}

.btn,
.btn-no-hover {
  box-shadow: none;
  text-transform: none;
}

.btn.btn-large {
  font-weight: 500;
  margin-bottom: 2px;
  padding: 12.5px 40px;
}

/* .btn-large:hover,
.btn-small:hover {
  background-color: var(--primary-button);
} */

.btn-large:hover,
.btn-small:hover {
  background: var(--primary-button);
}

.btn.btn-alt:hover {
  color: var(--button-font-colour) !important;
}

.btn.btn-alt-secondary:hover {
  background-color: var(--secondary-button);
  color: var(--button-font-colour) !important;
}

.trans-card {
  padding: 2rem;
  padding-top: 2.8rem;
  border-radius: 25px;
  background-color: #2e8cec;
}

.alt-color {
  color: var(--alt-colour);
}

.btn-bg {
  color: white;
  background-color: #00aeef;
}

.btn-bg.card {
  color: #a5bdd9;
  background-color: #1b396a;
}

.btn-bg.card h3 {
  color: #fff;
}

.light-text {
  color: #a5bdd9;
}

/* .collection a.collection-item {
  color: var(--primary-button);
} */

.collection {
  /* border: 1px solid var(--primary-border-colour); */
  border: 0;
  background: transparent;
}

.collection .collection-item {
  border-bottom: 1px solid var(--background-colour);
}

.collection .collection-item:last-child {
  border-bottom: 1px solid var(--background-colour);
}

.collection .collection-item {
  padding: 13px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: var(--primary-background);
}

.btn.btn-wide {
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn.btn-alt {
  background: var(--primary-background);
  /* border: 1px solid var(--primary-button); */
  color: var(--secondary-background) !important;
}

.bg.bg-secondary h1,
.bg.bg-secondary h2,
.bg.bg-secondary h3,
.bg.bg-secondary h4,
.bg.bg-secondary h5,
.bg.bg-secondary h6 {
  color: var(--secondary-heading-colour);
}

.f-24 {
  font-size: 24px;
  /* color: #a5bdd9; */
}

.input-field > label {
  color: #5b728c;
  font-size: 0.75rem;
}

.collection a.collection-item span {
  color: var(--primary-font-colour);
}

ol li {
  padding-left: 2rem;
  padding-bottom: 1rem;
}

.collection a.collection-item:not(.active):hover {
  background-color: var(--hover);
}

/* .carousel .indicators .indicator-item {
  background-color: var(--background-colour);
} */

.sec-btn-color {
  color: var(--secondary-button);
}

.page-text {
  color: var(--primary-font-colour);
}

.btn-color {
  color: var(--primary-button) !important;
}

.app-blue {
  background-color: #060642;
}

.tabs {
  color: white;
  overflow: hidden;
  background: transparent;
}

select:focus {
  outline: none;
}

.app-trade-menu {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-font-colour);
  background: var(--primary-background);
}

.app-trade-menu:hover,
.app-trade-menu.active {
  color: var(--primary-font-colour);
  background: var(--hover);
}

.btn.btn-alt-secondary {
  background: transparent;
  border: 1px solid var(--secondary-button);
  color: #ffffff !important;
}

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

.background-text {
  color: var(--background-font-colour);
}

body {
  background: var(--background-colour);
  color: var(--background-font-colour);
}

.bg {
  color: var(--primary-font-colour);
  background-color: var(--primary-background);
}

.app-list-link {
  color: var(--background-font-colour);
}

.bg.bg-back {
  background-color: var(--background-colour);
}

.btn.btn-trans-primary {
  background: transparent;
  color: var(--primary-button) !important;
  border: 1px solid var(--primary-button);
}

.btn.btn-trans-secondary {
  background: transparent;
  color: var(--secondary-button) !important;
  border: 1px solid var(--secondary-button);
}

.btn.bordered {
  background: transparent;
  color: var(--primary-button) !important;
}

select {
  /* height: 3rem; */
  color: var(--background-font-colour);
  border-color: var(--primary-border-colour);
  background-color: transparent;
}

input[type='number']:not(.browser-default),
input[type='number']:not(.browser-default):focus:not([readonly]) {
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--background-font-colour);
  border: 1px solid var(--primary-border-colour);
}

textarea.materialize-textarea {
  color: var(--background-font-colour);
}

.input-field .prefix.active {
  color: var(--background-font-colour);
}

input[type='tel']:not(.browser-default),
input[type='date']:not(.browser-default),
input[type='text']:not(.browser-default),
input[type='email']:not(.browser-default),
input[type='password']:not(.browser-default),
input[type='number']:not(.browser-default),
input[type='number']:not(.browser-default):focus:not([readonly]) {
  border-radius: 7px;
  box-sizing: border-box;
  color: var(--background-font-colour);
  background-color: transparent;
  border: 1px solid var(--primary-border-colour);
}

input:not([type]):focus:not([readonly]),
input[type='text']:not(.browser-default):focus:not([readonly]),
input[type='password']:not(.browser-default):focus:not([readonly]),
input[type='email']:not(.browser-default):focus:not([readonly]),
input[type='url']:not(.browser-default):focus:not([readonly]),
input[type='time']:not(.browser-default):focus:not([readonly]),
input[type='date']:not(.browser-default):focus:not([readonly]),
input[type='datetime']:not(.browser-default):focus:not([readonly]),
input[type='datetime-local']:not(.browser-default):focus:not([readonly]),
input[type='tel']:not(.browser-default):focus:not([readonly]),
input[type='number']:not(.browser-default):focus:not([readonly]),
input[type='search']:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border: 1px solid var(--primary-border-colour);
}

textarea.materialize-textarea {
  min-height: 100px;
  padding: 1rem;
  font-size: 16px;
  background: transparent;
  border-radius: 7px;
  border: 1px solid var(--primary-border-colour);
}

.input-field label {
  padding-left: 1rem;
}

.tabs .tab a,
.tabs .tab a:hover {
  color: #898181;
}

.tabs .tab a.active {
  font-weight: bold;
  color: var(--primary-link-colour);
}

.tab a {
  color: var(--background-font-colour);
}

.tab a.active {
  font-weight: bold;
  color: var(--primary-button);
}

input {
  color: var(--primary-font-colour);
}

.collapsible {
  border: 0;
}

.pagination-button,
.pagination-text {
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 5px;
  padding: 1rem;
  margin: 2px;
  display: inline-block;
}

.app-orange {
  color: #fab915;
}

.card-content p {
  color: var(--primary-font-colour);
}

.btn-background {
  background: var(--primary-button);
  color: black;
  padding: 1rem;
  margin-top: 0;
}

table.striped > tbody > tr:nth-child(odd) {
  background-color: var(--background-colour);
}

.carousel .indicators .indicator-item.active {
  border: 1px solid grey;
  background-color: #fff;
}

.carousel .indicators .indicator-item {
  background-color: grey;
}

.app-trading-month {
  margin: 0;
  padding: 0 0.2rem;
  font-weight: 500;
}

.app-trading-day {
  font-size: 2.1rem;
}

.tap-target {
  background: var(--primary-button);
  color: var(--button-font-colour);
}

a.hover:hover {
  color: var(--primary-button);
}

body {
  /* no overflow here on purpose — see the html rule at the top of this file */
  word-break: break-word;
  top: 0px !important;
  margin: 0 auto;
}

nav .brand-logo {
  font-size: 1.7rem;
}

nav ul li {
  margin-left: 10px;
}

.row .col {
  padding: 0 0.75rem;
}

nav .sidenav-trigger {
  margin: 0;
}

.card .card-image img {
  height: 250px;
  object-fit: cover;
}

.tr-video-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: rgba(1, 1, 33, 0.5);
}

nav ul a {
  padding-left: 0px;
  padding-right: 0px;

  margin-left: 10px;
  margin-right: 10px;
}

p {
  margin-top: 7px;
}

.capitalize::first-letter {
  text-transform: capitalize;
}

select.translator {
  width: 145px;
  font-size: 12px;
  margin-top: 15px;
  margin-right: 5px;
  padding-bottom: 0;
  height: 2rem;
}

select {
  height: 3rem;
  padding-top: 0;
  padding-bottom: 0;
}

nav ul a.btn,
nav ul a.btn-large,
nav ul a.btn-small,
nav ul a.btn-large,
nav ul a.btn-flat,
nav ul a.btn-floating {
  margin: 0;
  margin-top: -5px;
}

li {
  list-style: none;
}

.input-field > label:not(.label-icon).active {
  transform: translateY(-22px) scale(1);
}

select.trading {
  max-width: 33vw;
}

.card {
  cursor: pointer;
}

input[type='text']:not(.browser-default),
input[type='email']:not(.browser-default),
input[type='number']:not(.browser-default),
input[type='password']:not(.browser-default) {
  padding-left: 10px;
}

.input-field {
  margin-bottom: 2rem;
}

.input-field > label {
  transform: translateY(7px);
}

.input-field .prefix {
  width: 4rem;
  padding-left: 7px;
}

.input-field .prefix.material-icons {
  top: 14px;
  padding-left: 2px;
}

.input-field .prefix ~ label {
  margin-left: 3rem;
}

.input-field .prefix ~ input {
  width: 100%;
  margin-left: 0;
  padding-left: 3.5rem;
}

.input-field .prefix {
  top: 0.82rem;
}

.wrap_ebd0 {
  bottom: 30px !important;
}

label {
  text-transform: capitalize;
}

.carousel .indicators .indicator-item {
  border-radius: 5px;
}

.padded-select {
  height: 2.9rem;
  padding-top: 10px;
  padding-bottom: 10px;
}

.pagination-button,
.pagination-text {
  margin-bottom: -3px !important;
}

.collection {
  margin-bottom: 0;
}

input:not([type]):focus:not([readonly]),
input[type='text']:not(.browser-default):focus:not([readonly]),
input[type='password']:not(.browser-default):focus:not([readonly]),
input[type='email']:not(.browser-default):focus:not([readonly]),
input[type='url']:not(.browser-default):focus:not([readonly]),
input[type='time']:not(.browser-default):focus:not([readonly]),
input[type='date']:not(.browser-default):focus:not([readonly]),
input[type='datetime']:not(.browser-default):focus:not([readonly]),
input[type='datetime-local']:not(.browser-default):focus:not([readonly]),
input[type='tel']:not(.browser-default):focus:not([readonly]),
input[type='number']:not(.browser-default):focus:not([readonly]),
input[type='search']:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border: 1px solid rgb(225, 225, 225);
  box-shadow: none;
  box-sizing: border-box;
}

input:not([type]),
input[type='text']:not(.browser-default),
input[type='password']:not(.browser-default),
input[type='email']:not(.browser-default),
input[type='url']:not(.browser-default),
input[type='time']:not(.browser-default),
input[type='date']:not(.browser-default),
input[type='datetime']:not(.browser-default),
input[type='datetime-local']:not(.browser-default),
input[type='tel']:not(.browser-default),
input[type='number']:not(.browser-default),
input[type='search']:not(.browser-default),
textarea.materialize-textarea {
  margin: 0;
}

[type='checkbox'] + span:not(.lever) {
  font-size: 13px;
  line-height: 1.45;
}

::placeholder {
  color: #4a4a4a;
  text-transform: capitalize;
}

section {
  margin: -1px;
}

.tabs .tab {
  text-transform: none;
}

.material-icons {
  position: relative;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  top: -2px;
  font-size: 28px;
}

.icon-share-01 {
  font-size: 2rem;
}

.card.medium {
  height: 350px;
}

.card.medium .card-image {
  max-height: 80%;
  overflow: hidden;
}

h2 {
  margin-top: 0;
}

img {
  margin: 0;
}

h1 {
  margin: 0;
}

.card-panel {
  margin: 0;
}

.collapsible-header {
  font-size: 1.2rem;
}

.collection {
  border: none;
  margin-top: 0;
}

.row {
  margin-bottom: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* -webkit-appearance: none; */
  margin: 0;
}

/* Firefox
input[type="number"] {
  -moz-appearance: textfield;
} */

.input-field .prefix {
  font-size: 14px;
}

.file-field .btn {
  line-height: 1.5rem;
}

.fixed-action-btn {
  right: 10px;
  bottom: 110px;
}

.btn-floating.btn-large i {
  line-height: 64px;
}

.card-content {
  font-weight: bold;
}

.app-py-1-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.app-vh {
  min-height: 680px;
  position: relative;
}

.app-pb-3 {
  padding-bottom: 3rem;
}

.app-relative {
  position: relative;
}

.app-bold {
  font-weight: bold;
}

.app-mb-0 {
  margin-bottom: 0;
}

.app-mb-1 {
  margin-bottom: 1rem;
}

.app-mb-2 {
  margin-bottom: 2rem !important;
}

.app-mb-3 {
  margin-bottom: 3rem !important;
}

.app-mb-5 {
  margin-bottom: 5rem;
}

.app-mt-0 {
  margin: 0;
}

.app-mt-1 {
  margin-top: 1rem;
}

.app-mt-2 {
  margin-top: 2rem;
}

.app-mt-4 {
  margin-top: 4rem;
}

.app-mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.app-mx-1 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.app-mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.app-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.app-my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.app-my-2 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.app-my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.app-p-0 {
  padding: 0;
}

.app-p-3 {
  padding: 3rem;
}

.app-pb-0 {
  margin-bottom: 0;
}

.app-pb-1 {
  padding-bottom: 1rem;
}

.app-pt-3 {
  padding-top: 3rem;
}

.app-px-0 {
  padding-left: 0;
  padding-right: 0;
}

.app-px-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.app-px-2 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.app-px-3 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.app-px-3-5 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.app-px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.app-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.app-py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.app-py-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.app-py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.app-py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.app-pt-2 {
  padding-top: 2rem !important;
}

.app-text-bold {
  font-weight: bold;
}

.app-text-capitalize {
  text-transform: capitalize;
}

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

.app-text-justify {
  text-align: justify;
}

.app-px {
  padding-left: 1rem;
  padding-right: 1rem;
}

.app-fade {
  animation: AppFadeIn 5s;
}

@keyframes AppFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fsm.open {
  /* transform: scale(1); */
  clip-path: circle(75%);
}

.btn-full {
  width: 99%;
}

h1 {
  margin-top: 6px;
}

.app-inline {
  display: inline;
}

.bread {
  padding: 1rem;
  border-top: 1px solid #e1e1e1;
}

.fade-appear {
  opacity: 0;
}

.fade-appear-active {
  opacity: 1;
  transition: opacity 1000ms linear;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.animate-up {
  animation-name: animate-up;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes animate-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1100px);
  }
}

.app-trading-month {
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.app-trading-day {
  font-size: 2.1rem;
}

.app-slider-title {
  font-size: 25px;
  font-weight: 900;
}

.app-slider-caption {
  font-size: 18px !important;
  line-height: 27px;
}

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 500ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}

.test-enter {
  opacity: 0;
  font-size: 10px;
}

.test-enter.test-timeout {
  opacity: 1;
  transition: 500ms;
}

.test-enter.test-timeout.test-leaves {
  color: red;
}

h1 {
  font-size: 44px;
  margin-bottom: 10px;
}

h2 {
  font-size: 34px;
}

h3 {
  margin: 0;
  padding: 0;
  font-size: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}

h4 {
  font-size: 17px;
  margin-bottom: 1rem;
}

h5 {
  font-size: 20px;
  margin-bottom: 7px;
}

h6 {
  font-size: 16px;
  font-weight: bold;
  line-height: 150%;
}

.sidenav {
  overflow-y: scroll;
  background: var(--background-colour);
}

.sidenav .collapsible-body,
.sidenav.fixed .collapsible-body,
.sidenav li > a {
  color: var(--primary-font-colour);
}

.sidenav2-box {
  margin: 1rem;
  padding: 1rem;
  padding-left: 1px;
  padding-right: 1px;
  border-radius: 10px;
  background: var(--primary-background);
}

.sidenav .collapsible-body a {
  color: var(--primary-font-colour);
}

nav {
  box-shadow: none;
}

/* nav.bg ul li,
nav.bg ul li a {
  color: var(--nav-primary-font-colour);
}

nav.bg.bg-secondary ul li,
nav.bg.bg-secondary ul li a {
  color: var(--nav-secondary-font-colour);
} */

nav .input-field input:focus,
nav .input-field input[type='text']:valid,
nav .input-field input[type='password']:valid,
nav .input-field input[type='email']:valid,
nav .input-field input[type='url']:valid,
nav .input-field input[type='date']:valid {
  border: 2px solid var(--border-colour);
}

/* Tablets and PCs */
@media (min-width: 571px) {
  /* nav ul li {
    padding-left: 20px;
  } */
}

.sidenav .user-view {
  height: 170px;
  margin-bottom: 0;
}

.sidenav li > a > i.material-icons {
  color: var(--secondary-font-colour);
}

/* .sidenav .collapsible-header {
  color: var(--secondary-font-colour);
  background: var(--secondary-background);
} */

.sidenav li > a > i,
.sidenav li > a > [class^='mdi-'],
.sidenav li > a li > a > [class*='mdi-'] {
  color: var(--secondary-font-colour);
}

/* .sidenav .collapsible-header:hover,
.sidenav.fixed .collapsible-header:hover,
.sidenav.fixed .collapsible-header {
  color: var(--secondary-font-colour);
  background: var(--secondary-background);
} */

@media (min-width: 319px) and (max-width: 490px) {
  .container {
    width: 99%;
  }

  h1 {
    font-size: 25px;
  }

  /* h2 {
    font-size: 18px;
    font-weight: bold;
  } */

  h3 {
    font-size: 20px;
  }
}

.w-700 {
  font-weight: 700;
}

input {
  font-size: 14px;
}

p {
  padding-left: 0;
}

.btn.btn-large {
  height: auto;
  line-height: 25px;
}

.app-f2 {
  font-size: 14px;
}

.app-font-big {
  font-size: 16px;
}

.carousel.carousel-slider .carousel-item p {
  font-size: 18px;
}

.carousel.carousel-slider .carousel-item h2 {
  font-size: 32px;
  font-weight: bold;
}

.table-title {
  font-size: 10px;
}

.app-title {
  font-size: 1.1rem;
}

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

.ticon {
  border-radius: 5px;
}

.table-title {
  text-transform: uppercase;
}

.app-trade-icon {
  width: 45px;
  border-radius: 10px;
}

.app-trade-icon-container {
  position: relative;
  left: -20px;
}

.ld-text {
  min-width: 100%;
}

.pc-container-left {
  width: 95%;
}

.app-line {
  line-height: 3.5rem;
}

.chart-height {
  height: 45vh;
}

.list-height {
  height: 92vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.app-trade-vh {
  height: 90vh;
}

.app-trade-menu {
  font-size: 11px;
  font-weight: bold;
}

.app-font-small {
  font-size: 12px;
  line-height: 10px;
}

.app-font-normal {
  font-size: 12px;
  line-height: 10px;
}

.container-50 {
  max-width: 50%;
}

.container-80 {
  margin: auto;
  max-width: 80%;
}

.container-40 {
  width: 45%;
  margin: auto;
}

.container-35 {
  width: 35%;
  margin: auto;
}

.container-95 {
  width: 96%;
  margin: auto;
}

/* Mobile Sure */
@media (min-width: 319px) and (max-width: 490px) {
  .container {
    width: 95%;
  }

  .pc-container {
    width: 98%;
  }

  .container-35 {
    width: 90%;
  }

  .container-40 {
    width: 80%;
  }

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

  .container-60 {
    max-width: 90%;
  }

  .f-42 {
    font-size: 30px;
  }

  .f-22 {
    font-size: 18px;
  }

  .app-vh {
    height: 100vh;
  }

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

  .btn.btn-large {
    margin-bottom: 10px;
  }

  .ticon {
    max-width: 37.41px;
  }

  .f-26 {
    font-size: 20px;
  }

  .prime-video {
    width: 100%;
    height: 100%;
  }

  .train {
    width: 160px;
  }

  .btn.btn-large {
    padding-left: 25px;
    padding-right: 25px;
  }

  .trans-card {
    margin: auto;
    max-width: 90%;
  }

  .menu a {
    display: block;
    text-align: center;
  }

  .container-50 {
    max-width: 90%;
  }

  .cryptoicons {
    width: 32px;
  }

  .app-mobile-justify {
    text-align: justify;
  }

  .container-90 {
    margin: auto;
    max-width: 93%;
  }

  .pc-container-left {
    width: 80%;
    margin: auto;
  }

  .f-24 {
    font-size: 20px;
  }

  .mobile-start {
    align-self: flex-start;
  }

  .app-image-back-1 {
    background-position: center;
  }

  .app-image-back-2 {
    background-position: left;
  }

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

  .chip .close {
    top: -9px;
    line-height: 20px;
  }

  .app-px-3-5 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  ul.stepper .step .step-content {
    margin-left: 1.5rem;
    margin-right: 0;
  }

  .app-f-3-6 {
    font-size: 2.5rem;
  }

  .mobile-table {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
  }

  .mobile-bg {
    background-color: var(--primary-background);
  }
}

/* Tablets and PCs */
@media (min-width: 571px) {
  .pl-2 {
    padding-left: 2rem !important;
  }

  .pc-right {
    text-align: right;
  }

  .pc-pl-1 {
    padding-left: 1.5rem;
  }

  .pc-pr-1 {
    padding-right: 1.5rem;
  }

  .ticon {
    width: 56px;
    height: 56px;
  }

  .mobile-bg {
    background-color: var(--background-colour);
  }

  .container {
    width: 90%;
  }

  /* .container-50 {
    max-width: 90%;
  } */

  .app-big-right {
    text-align: right;
  }

  .app-slider-title {
    font-size: 40px;
    padding: 0;
  }

  .app-flex-vh {
    min-height: 602px;
  }

  .app-px {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #particles-js canvas {
    max-height: 664px;
  }

  .icon {
    padding-right: 1rem;
  }
}

/*  PC Sure */
@media (min-width: 826px) {
  .container-60 {
    max-width: 60%;
    margin: auto;
  }

  .container-65 {
    max-width: 65%;
    margin: auto;
  }

  .container-75 {
    max-width: 75%;
    margin: auto;
  }

  #myVideo {
    width: 100%;
  }

  .pc-right {
    text-align: right;
  }

  .app-line {
    line-height: 3.5rem;
  }

  .chart-height {
    height: 85vh;
  }

  .btn.btn-large {
    margin-bottom: 15px;
  }

  .container-right {
    margin-left: auto;
    margin-right: 10%;
  }
}

/*  Large PC Sure */
@media (min-width: 850px) {
  .pc-container {
    width: 90%;
    margin-right: auto;
  }

  .pc-container-left {
    margin-left: auto;
  }

  .app-form-padding {
    padding: 0px;
  }
}

@media (max-width: 825px) {
  .app-trade-vh {
    height: 85vh;
  }

  .app-font-normal {
    font-size: 11px;
  }

  .app-trade-menu {
    font-size: 9px;
  }

  .app-font-small {
    font-size: 10px;
  }
}

@media (max-width: 740px) {
  .app-tr-hidden {
    display: none;
  }
}
