/* fonts */
/* NOTE : Convert to otf and ttf for iOS compatability;
@font-face{
  font-family: Opensans;
  src: url(../fonts/openSans.ttf), 
       url(../fonts/openSans.otf);
}
*/
html,
body {
  -webkit-font-smoothing: antialiased;
}

.body {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* html {
  background-image: url('./../../../../../src/assets/images/login-backdrop.png');
  background-size: 0;
} */

:root {
  --body-background: #2a2a2a;

  --body-color: #ebc76e;
  --green: #29c94d;
  --red: #f23d3d;
  --white: #ffffff;
  --micro: 0.25rem;
  --smallest: 0.5rem;
  --smaller-2: 0.65rem;
  --smaller: 0.75rem;
  --small: 0.85rem;
  --normal: 1rem;
  --medium: 1.15rem;
  --large: 1.25rem;
  --larger: 1.5rem;
  --largest: 2rem;

  --systemfont: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Arial", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --gold: #ebc76e;
  --theme: light;
}

[data-theme="dark"] {
  --theme: dark;
}

body {
  font-family: "Nunito";
  font-size: 16px;
  /* color: var(--body-color); */
  color: var(--white);
  background: var(--body-background);
  /* background: #000000; */
}
html {
  color-scheme: var(--theme);
}

.transfer-input {
  color-scheme: light;
}

.input {
  color-scheme: light;
}
/* .mobile {
  background-color: #2a2a2a;
} */

.mobile-body-font {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Arial", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

[v-cloak] {
  display: none;
}

.color-gold {
  color: var(--body-color);
}

.white {
  color: white !important;
}
.red {
  color: #fc5151;
}
.black {
  color: black;
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
  text-decoration: none;
}

.micro {
  font-size: var(--micro);
}
.smallest {
  font-size: var(--smallest);
}
.small {
  font-size: var(--small);
}
.smaller-2 {
  font-size: var(--smaller-2);
}
.smaller {
  font-size: var(--smaller);
}
.normal {
  font-size: var(--normal);
}
.medium {
  font-size: var(--medium);
}
.large {
  font-size: var(--large);
}
.larger {
  font-size: var(--larger);
}
.largest {
  font-size: var(--largest);
}

.pointer {
  cursor: pointer;
}

.ghost {
  pointer-events: none;
}
.cloak {
  opacity: 0;
}

.error-text {
  color: red;
}
.col-center {
  display: flex;
  align-items: center;
}
.spaced {
  justify-content: space-between;
}
.nowrap {
  white-space: nowrap;
}
.full-center {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.dropdown-menu-center {
  right: auto !important;
  left: 50% !important;
  top: 100% !important;
  -webkit-transform: translate(-50%, 0) !important;
  -o-transform: translate(-50%, 0) !important;
  transform: translate(-50%, 0) !important;
}
.lh-auto {
  line-height: auto;
}
.lh-lg {
  line-height: 1.5em;
}
.lh-md {
  line-height: 1.25em;
}
.lh-sm {
  line-height: 1em;
}

.text-reset {
  text-transform: none;
}
.b {
  font-weight: bold;
}
/* Page wrapper */

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.ufbtn {
  padding: 10px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  cursor: pointer;
  min-width: 100px;
  text-align: center;
  color: #b19560;
}

.btn-gold-hollow {
  background: none;
  border: 1px solid #b19560;
  padding: 5px;
  border-radius: 5px;
  font-size: 15px;
}
.btn-gold {
  background: linear-gradient(to bottom, #e7d39d, #b19560);
  color: black;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 15px;
}
.btn-gray {
  background: #707070;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
}
.auto-width {
  width: auto;
  flex: 1;
}
.uf-dropdown {
  border: 2px solid #b19560;
  background: none;
  border-radius: 10px;
}

.uf-dropdown .dropdown-toggle {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.uf-dropdown .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.6em solid;
  border-right: 0.4em solid transparent;
  border-bottom: 0;
  border-left: 0.4em solid transparent;
  color: var(--gold);
}
.uf-dropdown .dropdown-menu {
  width: 100%;
}

.preload-img-span {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  width: 50px;
  height: 50px;
  display: inline-block;
  overflow: show;
  margin: auto;
  top: 28rem;
  left: 0;
  bottom: 0;
  right: 0;
  /* z-index: 1; */
}

div.loading div {
  width: 6%;
  height: 16%;
  background: #fff;
  position: absolute;
  left: 49%;
  top: 43%;
  opacity: 0;
  -webkit-border-radius: 50px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-animation: fade 1s linear infinite;
}

.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8));
  background: -webkit-radial-gradient(
    rgba(20, 20, 20, 0.8),
    rgba(0, 0, 0, 0.8)
  );
}

.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.loading div.bar1 {
  -webkit-transform: rotate(0deg) translate(0, -130%);
  -webkit-animation-delay: 0s;
}

.loading div.bar2 {
  -webkit-transform: rotate(30deg) translate(0, -130%);
  -webkit-animation-delay: -0.9167s;
}

.loading div.bar3 {
  -webkit-transform: rotate(60deg) translate(0, -130%);
  -webkit-animation-delay: -0.833s;
}

.loading div.bar4 {
  -webkit-transform: rotate(90deg) translate(0, -130%);
  -webkit-animation-delay: -0.7497s;
}

.loading div.bar5 {
  -webkit-transform: rotate(120deg) translate(0, -130%);
  -webkit-animation-delay: -0.667s;
}

.loading div.bar6 {
  -webkit-transform: rotate(150deg) translate(0, -130%);
  -webkit-animation-delay: -0.5837s;
}

.loading div.bar7 {
  -webkit-transform: rotate(180deg) translate(0, -130%);
  -webkit-animation-delay: -0.5s;
}

.loading div.bar8 {
  -webkit-transform: rotate(210deg) translate(0, -130%);
  -webkit-animation-delay: -0.4167s;
}

.loading div.bar9 {
  -webkit-transform: rotate(240deg) translate(0, -130%);
  -webkit-animation-delay: -0.333s;
}

.loading div.bar10 {
  -webkit-transform: rotate(270deg) translate(0, -130%);
  -webkit-animation-delay: -0.2497s;
}

.loading div.bar11 {
  -webkit-transform: rotate(300deg) translate(0, -130%);
  -webkit-animation-delay: -0.167s;
}

.loading div.bar12 {
  -webkit-transform: rotate(330deg) translate(0, -130%);
  -webkit-animation-delay: -0.0833s;
}