/* -----------------------------------------------------------------------------
  KPI
----------------------------------------------------------------------------- */
/* #region */
.kpi {
  position: relative;
}

.kpi__value {
  color: var(--color-ink-base, rgba(0, 0, 0, 0.87));
  display: block;
  font-size: var(--font-size-title, 28px);
  font-weight: 500;
  line-height: var(--font-line-height-title, 1.143);
  padding-bottom: var(--size-padding-bottom-title, 18px);
  padding-top: var(--size-padding-top-title, 22px);
  text-align: left;
}

@media only screen and (min-width: 1024px) {
  .kpi__value {
    font-size: var(--font-size-title, 38px);
    font-weight: 400;
    line-height: var(--font-line-height-title, 1.053);
    padding-bottom: var(--size-padding-bottom-title, 18px);
    padding-top: var(--size-padding-top-title, 14px);
  }
}

.kpi__caption {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--color-ink-2ry, rgba(0, 0, 0, 0.54));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: var(--size-padding-bottom-base, 18px);
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--size-padding-top-base, 6px);
  text-align: left;
}

.kpi__caption.is-bottom {
  margin-top: -24px;
}

.kpi__caption.is-top {
  margin-bottom: -32px;
}

.kpi__caption .tag {
  margin-bottom: 0;
  margin-left: 8px;
}

.kpi__decimals {
  color: var(--color-ink-2ry, rgba(0, 0, 0, 0.54));
  font-size: var(--font-size-big, 16px);
}

.kpi__sign.is-positive {
  color: var(--color-ink-success-fill, #29a347);
}

.kpi__sign.is-negative {
  color: var(--color-ink-error-fill, #ff3d33);
}

.kpi__value.is-md {
  font-weight: 400;
}

@media only screen and (min-width: 1024px) {
  .kpi__value.is-md {
    font-size: var(--font-size-subhead-h2, 28px);
    line-height: var(--font-line-height-subhead-h2, 1.143);
    padding-bottom: 0;
    padding-top: 28px;
    padding-top: 26px;
  }
}

@media only screen and (min-width: 768px) {
  .kpi__value.is-md .kpi__sign {
    margin-left: -14px;
  }
}
/* #endregion */

/* -----------------------------------------------------------------------------
  DROPDOWN
----------------------------------------------------------------------------- */
/* #region */
.dropdown.is-right .dropdown__menu {
  left: auto;
  right: 0;
}

.dropdown__menu {
  background-color: var(--color-background-base, #fff);
  border: 0;
  -webkit-box-shadow:
    var(--layer-box-shadow-contour, 0 0 0 1px rgba(0, 0, 0, 0.04)),
    var(
      --layer-box-shadow-z3,
      0 6px 6px -3px rgba(0, 0, 0, 0.06),
      0 10px 20px -3px rgba(0, 0, 0, 0.12)
    );
  box-shadow:
    var(--layer-box-shadow-contour, 0 0 0 1px rgba(0, 0, 0, 0.04)),
    var(
      --layer-box-shadow-z3,
      0 6px 6px -3px rgba(0, 0, 0, 0.06),
      0 10px 20px -3px rgba(0, 0, 0, 0.12)
    );
  border-radius: var(--shape-border-radius-base, 8px);
  color: var(--color-ink-2ry, rgba(0, 0, 0, 0.54));
  float: none;
  text-align: left;
  list-style: none;
  margin: 0;
  padding: var(--size-padding-popover, 22px 16px 26px);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--motion-duration-sm, 0.195s);
  width: var(--size-width-sm, 264px);
  z-index: var(--layer-zindex-dropdown, 1010);
}

@media only screen and (min-width: 568px) {
  .dropdown__menu {
    width: var(--size-width-base, 320px);
  }
}

.wallet-menu {
	margin-top: -5px;
	width: fit-content;
}

@media (max-width: 568px) {
	.wallet-menu {
		width: calc(100vw - 40px);
		left:-10px;
		padding:10px;
	}
}

.dropdown__menu.is-open,
.dropup.open .dropdown__menu,
.dropdown.open .dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.dropdown__menu li {
  padding-bottom: 0;
  padding-top: 0;
}

.dropdown__menu > li > a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: var(--shape-border-radius-sm, 4px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--color-ink-2ry, rgba(0, 0, 0, 0.54));
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: -apple-system, Helvetica Neue, Roboto, Helvetica, Arial, Noto Sans, sans-serif;
  font-size: var(--font-size-small, 12px);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: var(--font-line-height-small, 16px);
  min-height: 40px;
  padding: 2px 16px;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: background var(--motion-duration-sm, 0.195s);
  transition: background var(--motion-duration-sm, 0.195s);
  width: 100%;
}

.dropdown__menu > li > a:focus,
.dropdown__menu > li > a:hover {
  background-color: var(--color-ink-accent, rgba(0, 0, 0, 0.04));
  text-decoration: none;
}

.dropdown__menu > li > a .icon {
  margin-right: 16px;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.dropdown__menu > li .label {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  white-space: nowrap;
}

/* #endregion */

/* -----------------------------------------------------------------------------
  BUTTON ICON
----------------------------------------------------------------------------- */
/* #region */
.btn.is-icon {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: var(--shape-border-radius-base, 8px);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: 400;
  height: 48px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  width: 48px;
}

.btn.is-icon,
.btn.is-icon:hover {
  text-decoration: none;
}

.btn.is-icon:active {
  -webkit-box-shadow:
    inset 0 0 0 1px var(--color-ink-border, rgba(0, 0, 0, 0.12)),
    inset 0 3px 5px var(--color-ink-border, rgba(0, 0, 0, 0.12)),
    inset 0 0 0 100px var(--color-ink-accent, rgba(0, 0, 0, 0.04));
  box-shadow:
    inset 0 0 0 1px var(--color-ink-border, rgba(0, 0, 0, 0.12)),
    inset 0 3px 5px var(--color-ink-border, rgba(0, 0, 0, 0.12)),
    inset 0 0 0 100px var(--color-ink-accent, rgba(0, 0, 0, 0.04));
}

.btn.is-icon:active:focus,
.btn.is-icon:focus {
  -webkit-box-shadow: var(--layer-box-shadow-focus-outline, 0 0 0 4px rgba(0, 128, 255, 0.5));
  box-shadow: var(--layer-box-shadow-focus-outline, 0 0 0 4px rgba(0, 128, 255, 0.5));
  outline: 0;
}

.btn.is-icon.is-ghost {
  background-color: rgba(0, 0, 0, 0.04);
}

.btn.is-icon.is-ghost:hover {
  background-color: var(--color-background-alt, rgba(0, 0, 0, 0.04));
}
/* #endregion */

/* -----------------------------------------------------------------------------
  ICON
----------------------------------------------------------------------------- */
/* #region */
.icon {
  --icon-fill: var(--color-ink-3ry, rgba(0, 0, 0, 0.38));
  --icon-stroke: var(--color-ink-3ry, rgba(0, 0, 0, 0.38));
  --icon-stroke-width: 2;
  -ms-flex-negative: 0;
  display: inline-block;
  flex-shrink: 0;
  height: var(--size-height-icon, 24px);
  opacity: 1;
  overflow: hidden;
  -webkit-transition: all var(--motion-duration-sm, 0.195s);
  transition: all var(--motion-duration-sm, 0.195s);
  vertical-align: -4px;
  width: var(--size-height-icon, 24px);
}
/* #endregion */
.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 100%;
}
.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  font-weight:700;    
  color: #000;
  padding: 9px 60px;
  background: transparent;
  transition: border-color 0.2s;

  &::placeholder {
    color: transparent;
  }

  &:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
  }
}

.form__curr {
  position: absolute;
  display: block;
  transition: 0.2s;
  font-size: 1.3rem;
  font-weight:700;    
  margin-top: 10px;
  margin-left: 6px;
  color: #000;
}

.form__field:focus {
  ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1.3rem;
    color: #9b9b9b;
    font-weight:700;    
  }
  padding: 6px;  
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #9b9b9b, #000);
  border-image-slice: 1;
}
/* reset input */
.form__field{
  &:required,&:invalid { box-shadow:none; }
}
.form__btn {
	display: block;
	border: 0;
	outline: 0;
	transition: all 200ms ease-in;
	cursor: pointer;
	background: #9b9b9b;
	color: #fff;
    font-weight:700;    
	padding: 9px 20px 10px;
	position:absolute;
	right:0;
	margin-top:-46px;
	margin-right:3px;
}