@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

$color-white: #fff;
$color-black: #fff;
$color-dark: #1B2A49;
$main: #677489;
$color-dark-light: #666;
$color-grey: #384150;
$color-alt: #eef7ff;
$color-blue: #003698;
$color-green: #2bc98e;
$color-red: #FD8D3B;
$color-yellow: #F0AF1B;

body {
  background-color: $color-black;
  color: rgba($color: $color-white, $alpha: 0.6);
  font-family: 'Roboto', sans-serif;
}
a {
  text-decoration: none;
}
h1, h2, h3 {
  font-family: 'Inter', sans-serif;
}
.navbar-brand {
  img {
    max-height: 24px;
  }
}
.download-header {

  line-height: 32px;  font-weight: 500;
  font-family: 'Inter', sans-serif; font-size: 14px;
  background-image: url(../../images/new-dark/download.svg);
  background-repeat: no-repeat;
  background-position: right center; padding-right: 20px;
  white-space: nowrap;
  color: $color-white; position: relative;
  &:hover {
    color: $color-yellow;
  }
}
.cursor-pointer {
  cursor: pointer !important;
}

.signup-header {
  background-color: $color-yellow;
  font-size: 14px;
  color: #000;
  display: inline-block;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  text-align: center;
  min-width: 85px; line-height: 32px;
  border-radius: 8px;
  &:hover {
    background-color: $color-white;
  }
}
.login-header {
  color: rgba($color: $color-white, $alpha: 0.6);
  line-height: 32px; font-size: 14px; padding-left: 24px; padding-right: 24px; font-weight: 500; white-space: nowrap;
  &:hover {
    color: rgba($color: $color-white, $alpha: 1);
  }
}
.nav-right {
  display: flex;
  white-space: nowrap;
  .form-select {
    background-color: $color-black;
    border-color: $color-black;
    color: rgba($color: $color-white, $alpha: 0.6);
    background-image: url(../../images/new-dark/dropdown.svg); background-size: 16px 16px;
    padding-top: 0;
    padding-bottom: 0; text-transform: uppercase; margin-left: 12px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  }
}
.navbar-expand-lg .navbar-nav .nav-link {
  font-size: 14px;  font-family: 'Inter', sans-serif; padding-left: 12px; padding-right: 12px; font-weight: 400;
}
header {
  padding-top: 12px; padding-bottom: 12px;
}
.navbar-nav {
  border-left: solid 1px rgba($color: $color-white, $alpha: 0.2);
  padding-left: 12px;
}
.footer-bottom {
  padding: 66px 0;
  font-size: 14px;
  border-top: solid 1px rgba($color: $color-white, $alpha: 0.1);
}
.footer-main {
  padding: 66px 0;
}
.footer-block {
  font-size: 14px; line-height: 24px;
  h6 {
    color: rgba($color: $color-white, $alpha: 1);
    font-size: 16px; font-weight: 400;
  }
  p { font-size: 16px; margin: 32px 0 16px 0;}
  ul {
    margin: 0; padding: 0;
    li {
      list-style: none; padding: 8px 0;
    }
  }
  a {
    color: rgba($color: $color-white, $alpha: 0.6);
    &:hover {
      color: rgba($color: $color-white, $alpha: 1);
    }
  }
}
.email-link {
  font-size: 16px; display: block; margin-bottom: 16px;
}
.social-link {
  display: flex;
  a {
    margin-right: 16px;
  }
}
.slider-text {
  padding: 43px 0 43px 80px;
  text-align: left;
  max-width: 507px;
  h1 {
    color: #fff;
    font-size: 48px; line-height: 64px; margin-bottom: 16px; font-weight: 300;
  }
  a {
    display: inline-block;
    background-color: $color-yellow;
    padding: 12px 40px; border-radius: 8px;
    color: $color-black;
    font-size: 14px; line-height: 24px; font-family: 'Inter', sans-serif; font-weight: 500;
    &:hover {
      background-color: $color-white;
    }
  }
  p {
    font-size: 14px; line-height: 24px;
    margin-bottom: 40px;

  }
}
.owl-carousel-main {
  border-radius: 16px; background-color: #0D0D0D;
  img {
    max-width: 100%;
  }
}
.announcement {
  padding: 24px 0;
}
.owl-carousel-announcement {
  background-image: url(../../images/new-dark/news.svg);
  background-repeat: no-repeat;
  background-position: left center; padding-left: 40px;
}
.announcement-text {
  font-size: 14px; line-height: 24px; font-family: 'Inter', sans-serif;  font-weight: 400;
  a {
    color: $color-white;
    text-decoration: none;
    &:hover {
      color: $color-yellow;
    }
  }
}
.owl-carousel-price  {
  background: linear-gradient(180deg, #1A1A1A 0%, rgba(26, 26, 26, 0) 100%);
  border: 1px solid rgba(247, 247, 247, 0.1); padding: 0;
}
.coin-price-slide {
  border-left: 1px solid rgba(247, 247, 247, 0.1); padding: 16px; font-family: 'Inter', sans-serif;
  span {
    font-size: 14px; line-height: 20px;
    color: #fff;
    .up {
      color: #0BF685; font-size: 12px;
    }
    .down {
      color: #FE4C4C; font-size: 12px;
    }
  }
  p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 0;
    a {
      color: #fff;
    }
    span {
      display: block;
      font-size: 12px; color: rgba($color: $color-white, $alpha: 0.6);
    }
  }
}
.chart-wrap {
  max-width: 48px;
  img {
    max-width: 100%;
    height: 60px;
  }
}
.main-content {
  padding: 160px 0;
}
.content-title {
  p {
    font-size: 16px; line-height: 28px;
    max-width: 510px;
  }
  h1 {
    font-weight: 300;
    color: #fff; font-size: 48px; margin-bottom: 100px; line-height: 72px;
    small {
      opacity: 0.6; font-size: 12px; display: block; text-transform: uppercase; letter-spacing: 3px;
    }
  }
}
.grid-block {
  padding: 32px 0 80px 0; border-top: solid 1px rgba($color: $color-white, $alpha: 0.2);
  max-width: 380px;
  h3 {
    font-size: 24px;
    margin: 0; padding: 32px 0; color: #fff; font-weight: 400;
  }
  p {
    font-size: 14px; line-height: 20px; margin-bottom: 0;
    a {
      color: $color-yellow;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.app-download {
  background-image: url(../../images/new-dark/triengle-bg.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  padding-bottom: 85px;
}
.screen-bg {
  background-image: url(../../images/new-dark/screenbg.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-color: #0D0D0d; border-radius: 24px;

}
.screen-img {
  max-width: 100%;
}
.app-download-text {
  padding: 32px 0;
  p {
    margin-bottom: 56px;
    font-size: 16px;
  }
  h2 {
    font-size: 48px;
    max-width: 399px;
    line-height: 72px;
    color: #fff; font-weight: 300;
    margin-bottom: 32px;
    small {
      opacity: 0.6; font-size: 12px; display: block; text-transform: uppercase; letter-spacing: 3px;
    }
  }
}
.downloadbutton {
  a {
    margin-right: 24px;

    img {
      max-height: 40px;
    }
  }
}

.token-page {
  padding: 30px;
  p, h2 {
    color: #fff;
  }
  h2 {
    font-weight: 300;
    font-size: 48px; line-height: 64px;
    margin-bottom: 16px;
  }
  small {
    font-size: 16px; line-height: 24px; display: block; margin-bottom: 40px;
  }
  p {
    padding-top: 24px; font-size: 20px; line-height: 48px;
  }
}
.twiiter-follow {
  display: inline-block;
  padding: 4px 16px 4px 42px;
  color: #fff;
  background-color: rgba($color: $color-white, $alpha: 0.2);
  border: solid 1px rgba($color: $color-white, $alpha: 0.1);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 24px;
  background-image: url(../../images/new-dark/akar-icons_twitter-fill.svg);
  background-repeat: no-repeat;
  background-position: 16px center ;
  background-size: 16px auto;
  &:hover {
    color: #fff;
    border: solid 1px #fff;
  }
}
.contact-page {
  border-top: solid 1px rgba($color: $color-white, $alpha: 0.2);
  padding-top: 66px; margin-top: 66px;
}
.contact-icons {
  margin-bottom: 56px;
  font-family: 'Inter', sans-serif;
  i {
    margin-right: 16px;
  }
  p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba($color: $color-white, $alpha: 1); line-height: 24px;

    a {
      font-weight: 400;
      display: block;
      color: rgba($color: $color-white, $alpha: 0.6);
    }
  }
}
.form-label {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;

}

a {
  &.form-label {
    padding-right: 24px; display: inline-block;
    background-image: url(../../images/new-dark/dropdown.svg);
    background-repeat: no-repeat;
    background-position: right center ;
    &:hover {
      color: $color-yellow;
    }

  }
}
.form-control {
  background-color: #000;
  border: solid 1px rgba($color: $color-white, $alpha: 0.2);
  color: rgba($color: $color-white, $alpha: 0.6); font-size: 14px; line-height: 26px;
  &:focus {
    background-color: #0d0d0d;
  }
}
.btn-secondary {
  display: block;
  text-align: center;
  width: 100%;
  border-radius: 8px; line-height: 26px;
  background-color: rgba($color: $color-white, $alpha: 0.0);
  border: solid 1px rgba($color: $color-white, $alpha: 0.2);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: rgba($color: $color-white, $alpha: 0.6);;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #282828;
  opacity: 1;
}
.btn.btn-sm.btn-outline {

  text-align: center;
  width: 100%;
  border-radius: 8px; line-height: 26px;
  background-color: rgba($color: $color-white, $alpha: 0.0);
  border: solid 1px rgba($color: $color-white, $alpha: 0.2);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: rgba($color: $color-white, $alpha: 0.6);;
}
.btn-main {
  display: block;
  text-align: center;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  background-color: $color-yellow;
  border-radius: 8px; line-height: 26px;
  color: rgba($color: $color-black, $alpha: 0.6);
  &.d-inline-block {
    width: auto; padding-left: 24px; padding-right: 24px;
  }
  &:hover {
    background-color: $color-red;
  }
}
.btn-main-green {
  display: block;
  text-align: center;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  background-color: #0BF685;
  border-radius: 8px; line-height: 26px;
  color: rgba($color: $color-black, $alpha: 0.6);
  &.d-inline-block {
    width: auto; padding-left: 24px; padding-right: 24px; margin-left: 10px;
  }
  &:hover {
    background-color: #01d36d;
  }
}
.btn-main-outline {
  display: block;
  text-align: center;
  border: solid 1px $color-yellow;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  background-color: $color-black;
  border-radius: 8px; line-height: 26px;
  color: $color-yellow;
  &:hover {
    background-color: $color-yellow;
    color: rgba($color: $color-black, $alpha: 0.6);
  }
}
.document-title {
  padding: 86px 0;
  text-align: center;
  position: relative;

  h1 {
    color: #fff;
    font-size: 48px; line-height: 64px; font-weight: 300; margin-bottom: 0;
  }
  &::before {
    content: '';
    background-image: url(../../images/new-dark/title-bg.svg);
    background-repeat: no-repeat;
    background-position: left center;
    width: 196px;
    height: 48px;
    position: absolute;
    left: 0; top: 50%;
    margin-top: -24px;
  }
  &::after {
    content: '';
    background-image: url(../../images/new-dark/title-bg.svg);
    background-repeat: no-repeat;
    background-position: left center;
    width: 196px;
    height: 48px;
    position: absolute;
    right: 0; top: 50%;
    margin-top: -24px;
  }
}
.tab-links {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  a {
    margin-right: 40px;
    font-size: 16px;
    color: rgba($color: $color-white, $alpha: 0.6);
    border-bottom: solid 1px rgba($color: $color-white, $alpha: 0);
    padding: 8px 0 8px 0;
    &:hover {
      color: #F7F7F7;
    }
    &.active {
      color: #F7F7F7;
      border-bottom: solid 1px rgba($color: $color-white, $alpha: 1);
    }
  }
}
.listing-block {
  padding-top: 24px;
  a {
    background-color: #1F1F1F;
    border-radius: 8px;
    border: solid 1px rgba($color: $color-white, $alpha: 0.1);
    display: block;
    padding: 32px;
    color: #F7F7F7;
    &:hover {
      border: solid 1px rgba($color: $color-white, $alpha: 0.3);
    }
    small {
      display: block;
      opacity: 0.6;
    }
    p {
      margin: 0;
      font-size: 20px;
      line-height: 32px;
      min-height: 146px;
    }

  }
}
.login-form {
  min-height: 100vh;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  h4 {
    font-size: 17px;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    line-height: 140%;
    color: #0BF685;
    display: flex;
    svg {
      margin-bottom: 10px; margin-right: 10px;

    }
  }
  h3 {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 32px;
    small {
      display: block;
      margin-top: 8px;
      font-size: 14px;
      line-height: 24px;
      opacity: 0.6;
    }
  }
}
.form-check-input {
  background-color: #000;
  border: solid 1px rgba($color: $color-white, $alpha: 0.2);
}
.form-check-label {
  font-size: 14px;
}
.form-check-input:checked {
  background-color: $color-yellow;
  border: solid 1px $color-yellow;
}
.form-check-label a {
  color: $color-yellow;
  &:hover {
    color: $color-white;
  }
}
.form-label a {
  color: rgba($color: $color-yellow, $alpha: 0.6) ;
  font-size: 12px;
  &:hover {
    text-decoration: underline;
    color: $color-yellow;
  }
}
.login-right {
  min-height: 100vh;
  height: 100%;
  background-image: url(../../images/new-dark/login-bg.png);
  background-size: cover;
  background-position: center center;
  text-align: center;

}
.k-lovin {
  display: block;
  padding-top: 40px;
  margin-bottom: 60px;
  width: 30px;
  img {
    max-height: 40px;
  }
}
.login-text {
  padding-top: 42px;
  p {
    font-family: 'Inter', sans-serif;
    color: #fff;
    font-size: 20px; line-height: 24px;
  }
  small {
    display: block;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
  }
  a {
    font-family: 'Inter', sans-serif;
    padding: 4px 16px;
    border-radius: 8px;
    font-weight: 500;
    background-color: rgba($color: $color-white, $alpha: 0.1);
    display: inline-block; font-size: 14px; line-height: 24px; color: rgba($color: $color-white, $alpha: 0.6);
    &:hover {
      color: rgba($color: $color-white, $alpha: 1.0);
      background-color: rgba($color: $color-white, $alpha: 0.2);
    }
  }
}
.login-link {
  text-align: center;
  padding: 30px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  a {
    color: rgba($color: $color-yellow, $alpha: 0.6) ;
    text-decoration: none;
    font-weight: 700;
    &:hover {
      color: $color-yellow;
      text-decoration: underline;
    }
  }
}
.modal-content {
  background-color: #262626!important;
}
.modal-footer {
  border-top: solid 1px rgba($color: $color-white, $alpha: 0.2);
}
.btn-close {
  background-image: url(../../images/new-dark/close.svg);
}
.modal-header {
  border-bottom: solid 1px rgba($color: $color-white, $alpha: 0.2);
  h5 {
    color: $color-white;
  }
}

.terms-text {
  font-size: 14px;
  line-height: 140%;
  hr {
    margin: 20px 0;
  }
  h4 {
    margin-bottom: 15px;
    font-size: 18px;
    color: rgba($color: $color-white, $alpha: 0.9);
  }
  h3 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #fff;
  }
}
.login-img {
  max-width: 480px; margin: auto;
  img {
    max-width: 100%;
  }
}
.form-center {
  min-height: calc(100vh - 270px);

}
.login-right-center {
  width: 100%;
  padding-top: 35px;
  padding-bottom: 35px;
}
#downloadapp {
  .modal-dialog {
    max-width: 380px;
  }
}
.downloadapp-text {
  text-align: center;
  h5 {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 400;
    color: $color-white;
  }
  h3 {
    font-size: 12px;
    color: #FDFDFD;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 32px;
    padding-top: 32px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 50%;
      margin-left: -60px;
      top: 0;
      width: 120px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    }
  }
  .social-link a {
    margin-left: 8px;
    margin-right: 8px;
  }
  p {
    margin-bottom: 32px;
    color: rgba($color: #FDFDFD, $alpha: 0.5); font-size: 14px;
  }
  i {
    display: block;
    margin-bottom: 32px;
    text-align: center;
    img {
      max-width: 56px;
    }
  }
}
.timmer {
  margin-bottom: 24px;
  small {
    font-size: 14px;
    color: $color-yellow;
    opacity: 0.8;
  }
  span {
    margin-right: 15px;
    font-size: 20px; line-height: 20px; font-weight: 600;
    padding: 12px 16px;
    border-radius: 8px;
    color: $color-yellow;
    background-color: rgba($color: $color-yellow, $alpha: 0.3);
  }
}
.maintext-block {
  background-color: #1F1F1F;
  border: solid 1px rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 32px;
  font-size: 14px;
  line-height: 150%;
  pre {
    white-space: pre-wrap;
    padding: 12px;
    background-color: #070707;
    border-radius: 8px;

  }
  h2 {
    font-size: 20px;
    color: rgba($color: $color-white, $alpha: 0.8); padding-top: 15px; margin-bottom: 10px;
  }
  h3 {
    font-size: 18px; color: rgba($color: $color-white, $alpha: 0.8);
    padding-top: 15px; margin-bottom: 10px;
  }
  h4 {
    font-size: 16px; padding-top: 10px;
  }
  h5 {
    font-size: 16px; padding-top: 10px;
    color: rgba($color: $color-white, $alpha: 0.8);
  }
  h1 {
    color: $color-white;
    font-size: 24px;
  }
}
.token-list-wrap {
  border-right: solid 1px rgba($color: $color-white, $alpha: 0.1);
}
.search-token {
  padding: 15px;
  position: relative;
  .btn-close {
    position: absolute;
    right: 23px;
    top: 50%;
    margin-top: -11px;
  }
}
.token-list-wrap .scrollbar-macosx {
  height: 587px;
}
.token-list-wrap ul {
  margin: 0;
  padding: 0;

}
.token-list-wrap ul li {
  border-top: solid 1px rgba($color: $color-white, $alpha: 0.1);
  font-size: 14px;
  list-style: none;
}
.token-list-wrap ul li a {
  padding: 10px 15px;
  color: rgba($color: $color-white, $alpha: 0.6);
  display: block;
  text-decoration: none;
}
.token-list-wrap ul li a:hover {
  color: #fff;
  background-color: #333;
}
.token-list-wrap ul li a.active {
  background-color: $color-yellow;
  color: #fff;
}
.form-control.search-input {
  color: #fff;
  background-image: url(../../images/new-dark/search-line.svg);
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 35px;
  background-size: 16px;
}
.token-info {
  padding: 40px 40px 40px 20px;
}
.token-info h3 {
  border-left: solid 3px $color-yellow;
  padding-left: 15px; padding-top: 0;
}
.token-info h4 {
  margin-bottom: 15px;
  border-bottom: solid 1px #333;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 15px;
  padding-top: 15px;
  color: #fff;
}
.token-info p {
  font-size: 14px;
}
.token-info code {
  font-size: 14px;
  color: rgba($color: $color-white, $alpha: 0.6);
  font-family: 'Roboto', sans-serif;
}
.b-info {
  display: flex;
  font-size: 14px;
  margin-bottom: 10px;
}
.b-info b {
  min-width: 150px;
}
.form-control:focus {

  box-shadow: 0 0 0 .25rem rgba($color: $color-yellow, $alpha: 0.2);
}
.navbar-dark .navbar-toggler {
  padding: 0;
  width: 24px; height: 24px;
}
.navbar-dark .navbar-toggler-icon {
  background-image: url(../../images/new-dark/menu.svg);
  width: 24px; height: 24px;
}
.navbar-dark .navbar-toggler:focus .navbar-toggler-icon {
  background-image: url(../../images/new-dark/menu-close.svg);
  width: 24px; height: 24px;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 .0rem;
}

$breakpoint-mac-large: 1440px;
@media (min-width: $breakpoint-mac-large) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1400px;
  }
}
$breakpoint-ipad-large: 1199px;
@media (max-width: $breakpoint-ipad-large) {
  .footer-main, .footer-bottom {
    padding: 30px 0;
  }
  .app-download-text p {
    margin-bottom: 30px;
  }
  .content-title h1 {
    margin-bottom: 60px;
  }
  .slider-text h1, .content-title h1, .app-download-text h2, .token-page h2 {
    font-size: 42px; line-height: 62px;
  }
  .main-content {
    padding: 80px 0;
  }
}
$breakpoint-ipad: 992px;
@media (max-width: $breakpoint-ipad) {
  .slider-text h1, .content-title h1, .app-download-text h2, .token-page h2 {
    font-size: 36px; line-height: 52px;
  }
  .document-title {
    padding-top: 0px;
    padding-bottom: 50px;
  }
  .navbar-nav {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: solid 1px rgba(255, 255, 255, 0.2);
  }
  .nav-right {
    flex-direction: column;
    max-width: 320px;
    a {
      margin-bottom: 10px;
    }
  }
  .download-header, .login-header {
    padding-left: 12px;
  }
}

$breakpoint-mobile: 767px;
@media (max-width: $breakpoint-mobile) {
  .token-info {
    padding: 30px 20px;
  }
  .document-title h1 {
    font-size: 36px;
  }
  .b-info {
    flex-direction: column;
  }
  .maintext-block {
    padding: 16px;
  }
  .contact-icons {
    margin-bottom: 0;
    margin-top: 40px;
  }
  .slider-text {
    padding-left: 30px;
    padding-right: 30px;
  }
  .slider-text h1, .content-title h1, .app-download-text h2, .token-page h2 {
    font-size: 32px; line-height: 46px;
  }

  .login-img img {
    max-width: 100%;
  }
  .login-right {
    padding-left: 30px;
    padding-right: 30px;
  }
  .login-form, .login-right {
    min-height: inherit;
    padding-bottom: 40px;
  }
  .grid-block {
    padding: 32px 0!important;
    max-width: 100%;
  }
  .footer-block {
    padding-bottom: 30px;
  }
  .app-download {
    padding-bottom: 0;
    background-size: 100% auto;
  }
  .footer-brand img {
    max-height: 30px;
  }
  .footer-block p {
    margin-top: 15px;
  }
}

/* ====================== market CSS ==================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
.market-header {
  .navbar-expand-xl .navbar-nav .nav-link
  {
    font-family: 'IBM Plex Sans', sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    padding-left: 16px; padding-right: 16px;
    i {
      margin-right: 8px;
    }
    &:hover {
      color: $color-yellow;
    }
  }
}
.nav-right-market {
  display: flex;
  .form-select {
    background-color: #000;
    border-color: #000;
    color: rgba(255, 255, 255, 0.6);
    background-image: url(../../images/new-dark/dropdown.svg);
    background-size: 16px 16px;
    padding-top: 0;
    padding-bottom: 0;
    text-transform: uppercase;
    margin-left: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
  }

}
.dropdown-menu {
  background-color: #1E1E1E;
  padding: 16px 0px; border-radius: 8px;
  .dropdown-item {
    padding: 16px 24px;
    font-size: 14px; font-weight: 400;
    font-family: 'IBM Plex Sans', sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    i {
      margin-right: 8px;
    }
    &:hover {
      background-color: #292929;
      color: $color-yellow;
    }
  }
}
.account-link {
  padding: 4px 0 4px 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  &.dropdown-toggle::after {
    background-image: url(../../images/new-dark/dropdown.svg);
    border: none;
    width: 16px; height: 16px;
  }
}
.btn-check:focus + .btn, .btn:focus, .form-select:focus {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.0);
}
.crypto-balance {
  max-height: 316px;
}
.btn-wallet {
  background-color: $color-yellow;
  padding: 4px  16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  &.dropdown-toggle::after {
    background-image: url(../../images/new-dark/down.svg);
    border: none;
    width: 12px; background-size: 12px 12px; height: 12px; margin-right: -6px;
  }
  i {
    margin-right: 10px;
  }

}
.footer-market {
  background-color: #141414;
  padding: 24px 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  line-height: 200%;
}
.footer-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  a {
    color: rgba($color: $color-white, $alpha: 0.5);
    text-decoration: none; margin-right: 32px;
    &:hover {
      color: rgba($color: $color-white, $alpha: 1);
    }
  }
}
.mobile-setting, .mobile-lang, .mobile-wallet {
  display: none;
}
.pannel-main {
  padding-top: 56px;
}
.btn-warning, .btn-warning:focus {
  background-color: $color-yellow;
  font-size: 14px; border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.apnnel-title {
  margin-bottom: 32px;
  flex-wrap: wrap;
  h3 {
    margin-bottom: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 24px;
    color: #fff; font-weight: 400;
    margin-right: auto;
  }
  span {
    opacity: 0.5; font-size: 14px; margin-right: 10px;
  }
}
.ibm-font {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #fff;
}
.logo-chart {
  min-width: 120px;
}
.t-slide {
  display: flex;
  padding: 16px;
  background-color: #1E1E1E; border-radius: 8px;
  min-width: 288px;
  color: #fff;
  a {
    color: #fff;
    &:hover {
      color: #fff;
    }
  }

  .text { width: 100%;
    h5 {
      font-size: 20px;
      margin-bottom: 16px; font-weight: 400;
      span {
        font-size: 14px;
        &.up {
          color: #0BF685;
        }
        &.down {
          color: #FE4C4C;
        }
      }
    }
    small {
      opacity: 0.5;
      font-size: 11px; line-height: 24px;
    }
    b {
      font-weight: 400; font-size: 12px; margin-bottom: 16px;
    }
    b, small {
      display: block;
    }
  }
}
.logo-chart {
  text-align: right;
}
.market-tab {
  ul {
    display: flex;
    padding: 0; margin-bottom: 8px;
    border-bottom: solid 1px #282828;
    li {
      padding: 0; list-style: none; margin-right: 16px;
      a {
        margin-bottom: -1px;
        font-size: 14px; line-height: 24px;
        display: block;
        padding-bottom: 8px;
        color: rgba($color: $color-white, $alpha: 0.5);
        border-bottom: solid 1px rgba($color: $color-white, $alpha: 0);
        display: flex;
        img {
          margin-right: 7px;
          max-width: 16px;
        }
        &.done {
          color: #0BF685;
        }
        &.active {
          color: rgba($color: $color-white, $alpha: 1);
          border-bottom: solid 1px rgba($color: $color-yellow, $alpha: 1);
        }
        &:hover {
          color: rgba($color: $color-white, $alpha: 1);
        }
      }
    }
  }
}
.market-filters {
  padding-top: 24px;
  ul {
    padding: 0; margin: 0;
    display: flex;
    li {
      margin: 0; padding: 0; margin-right: 16px; list-style: none;
      a {
        display: block;
        font-size: 14px;
        padding: 8px 16px;
        border-radius: 8px;
        background-color: #1E1E1E; line-height: 24px;
        color: #fff;
        &.active {
          background-color: $color-yellow; color: #000;
          &:hover {
            background-color: $color-yellow; color: #000;
          }
        }
        &:hover {
          background-color: #282828; color: #fff;
        }
      }
    }
  }
}
.market-table {
  font-size: 14px;
  .up {color: #0BF685!important;}
  .down { color: #FE4C4C!important;}
  .buy-sell {
    font-weight: 500;
    font-size: 12px;
    color: #fff; line-height: 22px;
    display: inline-block; border-radius: 8px; padding: 4px 16px;
    border: solid 1px rgba($color: $color-white, $alpha: 0.2);

  }
  tbody > tr:hover .add-to-fav { opacity: 1;}
  tbody > tr:hover .buy-sell  {
    background-color: #F0AF1B!important;
    color: #000000;
    &.red-btn {
      background-color: #FE4C4C!important;
      color: #000000;
    }
  }
  .link-text {
    color: #F0AF1B;
    text-decoration: none;
    &:hover {
      color: #fff;
    }
  }
  .text-left {
    text-align: left!important;
  }
  .table > thead {
    background-color: #1E1E1E;
    border-radius: 8px;
  }
  .add-to-fav {
    background-image: url(../../images/new-dark/star-1.svg);
    width: 16px;
    height: 16px;
    position: absolute;
    left: -24px;
    top: 50%;
    margin-top: -8px; opacity: 0;
    &.active {
      background-image: url(../../images/new-dark/star-2.svg);
      opacity: 1;
    }
  }
  th {
    color: rgba($color: $color-white, $alpha: 0.7);
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  td {
    font-size: 14px; line-height: 24px; vertical-align: middle;
    span {
      opacity: 0.5;
    }
  }
  td, th {
    text-align: right;
    &:first-child {
      padding-left: 24px!important;
      position: relative;
      &.pl-2 {
        padding-left: 0.5rem!important;
      }
    }
    &:last-child {
      padding-right: 24px!important;
    }
  }
  .table > :not(:first-child) {
    border-top: 0;
  }
  .table > :not(caption) > * > * {
    padding: 12px .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
  }
  .table-dark {
    --bs-table-bg: rgba($color: $color-black, $alpha: 0.0);;
  }

}
.tooltip-link {
  color: rgba($color: #FDFDFD, $alpha: 1);
  background-image: url(../../images/new-dark/close.svg);
  background-repeat: no-repeat;
  background-position: right center; padding-right: 16px; background-size: 10px auto;
  &:hover {
    color: $color-yellow;
  }
}
.market-search {
  margin-top: 24px;
  margin-bottom: 32px;
  position: relative;
  .btn-close {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -11px;
  }
}
.market-table-wrap {
  display: none;
}
.transaction-filter {
  display: inline-flex;
  flex-wrap: wrap;
  .dropdown {
    margin-bottom: 24px; margin-right: 24px;
    .btn-dark {
      font-size: 14px;
      border-radius: 8px;
      font-family: 'IBM Plex Sans', sans-serif;
    }
    span {
      margin-right: 10px;
      opacity: 0.5;
      font-size: 14px;

    }
  }
}
.border-right-1 {
  border-right: solid 1px rgba($color: $color-white, $alpha: 0.1);
}
.sidebar-link {
  ul {
    padding: 0;
    margin-right: -12px;
    li {
      list-style: none;
      padding: 0;

      a {
        display: flex;
        width: 100%;
        align-items: center;
        border-bottom: solid 1px rgba($color: $color-white, $alpha: 0.1);
        padding: 16px 16px;
        color: #fff;
        &:hover, &.active {
          background-color: rgba($color: $color-white, $alpha: 0.1);
        }
        i {
          margin-right: 10px;
        }
      }
    }
  }
}
.profile-setting {
  padding-top: 16px;
  min-height: calc(100vh - 350px );
  font-size: 16px;
  .up {color: #0BF685;}
  .down { color: #FE4C4C;}
  b {
    font-weight: 400;
  }
  small {
    display: block;
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .col-md-6 {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: solid 1px rgba($color: $color-white, $alpha: 0.1);
  }
}
.small-link {
  display: inline-block;
  padding: 4px 12px;
  background-color: $color-yellow;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  border-radius: 4px;
}
.setting-modal {
  h5 {
    margin-bottom: 16px;
    font-size: 16px;
  }
}
.f-12 {
  font-size: 12px!important;
}
.modal-header h5 {
  font-size: 24px;
  font-family: 'IBM Plex Sans', sans-serif; padding-left: 12px; margin: 0;
}
.form-check {
  margin-bottom: 12px;
}
.created-modal {
  h5 {
    font-weight: 400;
    font-size: 24px; line-height: 32px; font-family: 'IBM Plex Sans', sans-serif; margin-bottom: 32px;
  }
  p {
    opacity: 0.5;
  }
}
#create-token, #create-token1 {
  .modal-dialog {
    max-width: 368px;
  }
}
.form-label {
  span {
    background-color: rgba($color: $color-yellow, $alpha: 0.2);
    color: $color-yellow;  display: inline-block; padding: 4px 12px; border-radius: 4px;
  }
}
.min-height {
  min-height: calc(100vh - 250px);
}
.market-table-mobile .d-flex .btn-main
{
  width: 33%;
  margin-right: 15px;
  &.red-btn {
    background-color: #FE4C4C !important;
  }
}
.form-select {
  background-color: #000;
  border: solid 1px rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  background-image: url(../../images/new-dark/dropdown.svg);
  background-size: 16px 16px;

  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.qrcode {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px; display: inline-block;
}

/*market page dec 07 2021 */
.gry-bg {
  background-color:#1E1E1E;
}
.currency-header {
  padding: 8px;
  border-top: solid 1px #323232;
  border-bottom: solid 1px #323232;
}
.currency-flex {
  display: flex;
  flex-wrap: wrap;
}
.fav {
  padding: 12px;
  a {
    display: flex;
  }
}
.currencychange-menu {
  width: 320px;
  padding: 0; background-color: #282828;
  .nav-tabs {
    border-bottom: solid 1px #323232;

    .nav-item {
      padding-left: 16px;
      padding-right: 8px;
      &.show .nav-link {
        background-color: rgba($color: $color-white, $alpha: 0);
        border-bottom: solid 1px #F0AF1B;
        color: rgba($color: $color-white, $alpha: 1);
      }
    }
    .nav-link {
      border-radius: 0;
      padding: 14px 0px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 12px;
      font-weight: 600;
      border: none;
      border-bottom: solid 1px #323232;
      color: rgba($color: $color-white, $alpha: 0.5);
      margin-bottom: 1px;
      &.active {
        background-color: rgba($color: $color-white, $alpha: 0);
        border-bottom: solid 1px #F0AF1B;
        color: rgba($color: $color-white, $alpha: 1);
      }
      &:hover {
        color: rgba($color: $color-white, $alpha: 1);
      }
    }
  }
}
#currencyTabContent {
  color: #fff;
  font-size: 12px;
  .table {
    margin-bottom: 0;
    th {
      opacity: 0.5;
    }
    td {
      &.up {
        color: #75D77E;
      }
      &.down {
        color: #FF6868;
      }
      &:first-child {
        display: flex;
        align-items: center;
        span {
          margin-right: 8px;
        }
      }
    }
    td a {
      color: #FFFFFF; text-decoration: none;

      &:hover {
        color: #F0AF1B;
      }
    }
    td, th {
      text-align: right;
      &:first-child {
        text-align: left;
      }
    }
  }
  .table > :not(caption) > * > * {
    color: #fff;
    border-bottom: solid 1px #323232;
    padding: 0.8rem 1rem;

  }
  .table > :not(:first-child) {
    border-top: 0px solid currentColor;
  }
}
.currency-balance {
  font-size: 16px;
  font-weight: 600;
  padding: 0 32px;
}
.balance-text{
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 24px;
  &.down {
    color: #FF6868;
  }
  &.up {
    color: #75D77E;
  }
  span {
    display: block;
    font-weight: 400;
    opacity: 0.5;
    color: #fff!important;
  }
}
.btn-currency {
  color: #fff;
  padding: 8px 11px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 600; border-radius: 5px;
  display: flex; align-items: center;
  .cc {
    display: flex;
    width: 24px;
  }
  &.dropdown-toggle::after {
    background-image: url(../../images/new-dark/arrow-down-white.svg);
    width: 16px;
    height: 16px;
    border: none;
    margin-left: 8px;
  }
  &:hover {
    color: #fff;
    background-color: #323232;
  }
}
.market-table.d-block {
  .table-striped > tbody > tr:nth-of-type(2n+1) > * {

    --bs-table-accent-bg:#282828;
  }
  .table > :not(caption) > * > * {
    padding-top: 10px; padding-bottom: 10px;
    font-size: 12px;
    border: none; font-weight: 400; text-transform: none;
  }
}
#orderTab {
  border-bottom: solid 1px #303030; padding-left: 16px;
  .nav-item {
    margin-right: 32px;
    &:last-child {
      margin-right: 0;
    }
    .nav-link {
      border-radius: 0;
      font-weight: 600; font-size: 15px; color: rgba($color: $color-white, $alpha: 0.5);
      padding: 16px 0px; border: none; border-bottom: solid 1px rgba($color: $color-white, $alpha: 0);
      &:hover, &.active {
        border-bottom: solid 1px $color-yellow;
        background-color: rgba($color: $color-black, $alpha: 0);
        color: #fff;
      }
    }
  }
}
.orderpagination {
  .page-item.active .page-link {
    border-bottom: solid 1px rgba($color: $color-yellow, $alpha: 1);
  }
  .page-link {
    border: none;
    background-color: transparent!important;
    padding: 0; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 12px; font-weight: 600;
    color: rgba($color: $color-white, $alpha: 0.5);
    border-bottom: solid 1px rgba($color: $color-yellow, $alpha: 0);

  }
}
.chart-tab {
  display: flex;
  border-bottom: solid 1px #323232;
  a {
    margin: 0 8px 0 16px;
    font-weight: 600;
    font-size: 15px;
    color: rgba($color: $color-white, $alpha: 0.5);
    padding: 12px 0;
    border-bottom: solid 1px rgba($color: $color-white, $alpha: 0);
    &:hover {
      color: rgba($color: $color-white, $alpha: 1);
    }
    &.active {
      color: rgba($color: $color-white, $alpha: 1);
      border-bottom: solid 1px rgba($color: $color-yellow, $alpha: 1);
    }
  }
}

.buy-order, .sell-order {
  width: 320px;
  .indicator {
    position: absolute;
    width: 4px; height: 4px;
    left: 4px; top: 50%; margin-top: -2px; background-color: #ddd;

  }
  tr {
    position: relative; cursor: pointer;
    span {
      position: absolute;
      left: 0; top: 0; height: 100%;
      background-color: #75D77E; opacity: 0.2;
    }
  }

  .table > :not(caption) > * > * {
    border: none;
  }

  .table > :not(:first-child) {
    border-top: none;
  }
  .table {
    margin-bottom: 0;
    thead {
      background-color: #282828;
      th {
        opacity: 0.5;
      }
    }
  }
  .order-table .table {
    td {
      &:last-child {
        color: #75D77E;
      }
    }
    td, th {
      padding: 2px 16px 2px 16px;
      color: #fff; font-size: 12px; line-height: 20px;
      &:last-child {
        text-align: right;
      }
    }
  }
  .order-footer {
    padding: 2px;
    line-height: 20px;
    font-size: 12px; padding-left: 16px;
  }
  h4 {
    font-size: 15px; line-height: 15px;
    padding: 16px; margin-bottom: 0; position: relative;
    &::after {
      content: '';
      position: absolute;
      right: 16px;
      top: 50%;
      background-image: url(../../images/new-dark/buy.svg);
      background-repeat: no-repeat;
      background-position: center center; width: 16px; height: 16px; margin-top: -8px;

    }
  }
}
.border-lr {
  min-height: 100%;
  border-left: solid 1px #323232; border-right: solid 1px #323232;
}
.sell-order {
  border-top: solid 1px #323232;
  tr span {
    background-color: #FF6868;
  }
  .order-table .table {
    td {
      &:last-child {
        color: #FF6868;
      }
    }
  }
}
.sell-order h4::after {
  background-image: url(../../images/new-dark/sell.svg);
}
.buy-sell-card {
  width: 320px;
}
.buy-sell-card {
  h4 {
    margin: 0;
    padding: 16px; font-weight: 600; font-size: 15px; line-height: 16px;
    border-bottom: solid 1px #323232;
  }
}
.bc-form {
  padding: 16px;
}
#pills-tab {
  flex-wrap: nowrap;
  border-radius: 5px; overflow: hidden;
  .nav-item {
    width: 50%;
    .nav-link {
      width: 100%; border-radius: 0;
      background-color: #323232;
      padding: 8px 0; text-align: center; font-size: 14px; line-height: 24px; color: #fff;
      &.active {
        background-color: #42A14C;
        &.redbtn {
          background-color: #EB4D5C;
        }
      }
    }
  }
}
.border-bottom-1 {
  border-bottom: solid 1px #323232;
}
.buyinner {
  padding-top: 16px;
  margin-bottom: 16px;

  &.nav-tabs {
    border-bottom: solid 1px #393939;
  }
  .nav-link {
    padding: 16px 0; color: rgba($color: $color-white, $alpha: 0.5);
    font-size: 14px; line-height: 14px; border-radius: 0; border: none;
    border-bottom: solid 1px rgba($color: $color-yellow, $alpha: 0);
    &:hover {
      color: rgba($color: $color-white, $alpha: 1);
    }
    &.active {
      color: rgba($color: $color-white, $alpha: 1);
      border-bottom: solid 1px rgba($color: $color-yellow, $alpha: 1);
      background-color: transparent;
    }
  }
  .nav-item {
    margin-right: 24px;
    &:last-child {
      margin-right: 0;
    }
  }

}
.buyinner-content {
  .btn-main {
    font-size: 14px; color: black; font-weight: 400; border-radius: 5px; display: flex; align-items: center; justify-content: center;
    i {
      margin-left: 16px;
      display: flex;
    }
  }
  .orderamount {
    line-height: 24px; font-size: 12px; display: block;
    small {
      display: block; line-height: 12px;
      .dropdown-menu {
        font-size: 12px; padding: 10px;
        line-height: 120%; width: 250px;
        pp {
          margin-bottom: 10px;
        }
        ul {
          padding: 0; margin: 0;
          li { list-style: none; margin-bottom: 3px;
            b {
              display: inline-block;
              min-width: 90px;
            }
          }
        }
      }
      button {
        padding: 0; border: 0; background: none;
        svg {
          width: 10px;
        }
        &::after {
          display: none;
        }

      }
    }
    i, small {
      font-size: 12px; color: rgba($color: #fff, $alpha: 0.5);  font-style: normal;
    }
  }
  .form-label {
    font-size: 12px; line-height: 16px;
  }
  .btn-outline-secondary {
    font-size: 14px; background-color: #323232; border: none; color: rgba($color: $color-white, $alpha: 0.5);
    padding-left: 16px; padding-right: 16px; display: flex; align-items: center;
    &::after {
      border: none;
      background-image: url(../../images/new-dark/darrow1.svg); width: 16px; height: 16px;
    }
  }
  .dropdown-menu {
    padding: 0; background-color: #282828;
    .dropdown-item { padding: 8px 12px; }
  }
  .form-control {
    border: none; background-color: #141414;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; font-size: 16px; color: rgba($color: $color-white, $alpha: 0.6);
  }
  .input-group-text {
    border: none; background-color: #141414; font-size: 14px; color: #fff;
    padding: 0 16px;

  }
}
.btn-arrow {
  background-image: url(../../images/new-dark/darrow.svg);
  width: 40px; height: 40px; padding: 0;
  border-top-rightt-radius: 5px;
  border-bottom-right-radius: 5px;
  &::after {
    display: none!important;
  }
}
.badges {
  padding: 0; margin-left: -16px; margin-bottom: 0;
  li {
    list-style: none;
    margin: 0 0 0 16px; width: 25%; text-align: center;
    span {
      border-radius: 5px; display: block; font-size: 12px; line-height: 20px; padding: 4px 0;
      border: solid 1px #323232;
      cursor: pointer;
      &:hover, &.active {
        background-color: #323232;
      }
    }
  }
}
.mobile-tabs, .mobile-buysell {
  display: none;
}
.dropdown-item:focus, .dropdown-item:hover {
  background-color: #292929;
}
.second-lavel, .crypto-balance-list {
  display: flex;
  justify-content: space-between;
}
.fiat-balance {
  padding: 16px;
  border-bottom: solid 1px #323232;
  a {
    color: #fff; font-size: 32px; line-height: 32px;
    span {
      opacity: 0.5;
    }
    small {
      display: block;
      opacity: 0.5; font-size: 14px; line-height: 24px; margin-bottom: 8px;
    }
  }
}
.walletLink {
  width: 375px; padding: 0;
}
.crypto-balance-list {
  border-bottom: solid 1px #323232; padding: 16px;
  &:last-child {
    border-bottom: none;
  }
  a {
    margin-left: 16px;
    border-radius: 5px;
    background-color: #464646;
    padding: 5px 12px;
    font-size: 12px; line-height: 24px; display: inline-block; color: #fff;
    &:hover {
      background-color: $color-yellow; color: black;
    }
  }
  span {
    font-size: 16px; line-height: 16px; font-weight: 600; color: #fff;
    small {
      font-size: 12px; font-weight: 400; display: block; margin-bottom: 4px;
    }
  }
}
.crypto-balance {
  h5 {
    font-size: 14px; line-height: 24px; color: #fff; opacity: 0.5; padding: 8px 16px; margin-bottom: 0;
    border-bottom: solid 1px #323232;
  }
}

.stack-text {
  h3 {
    border-top: solid 1px rgba(255, 255, 255, 0.2);
    margin: 0; padding: 32px 0 16px 0;
    font-size: 24px; font-weight: 400;
  }
  p {
    font-size: 14px; line-height: 20px; margin-bottom: 32px;
  }
}
.grid-block i span {
  display: block;
  background: linear-gradient(180deg, #F0AF1B 0%, #000000 100%);
  border-radius: 50px; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px;
}
.order-table {
  overflow: auto;
  height: 250px;
}
#currencyTab {
  &.nav {
    flex-wrap: nowrap;
    max-width: 100%;
  }
}
.content-title p a {
  color: $color-yellow;
  &:hover {
    color: $color-white;
  }
}
.invalid-feedback {
  color: #FF6868;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
  border-color: #FF6868;
}
.alert-danger {
  color: #FF6868;
  border: none;
  background-color: rgba($color: #FF6868, $alpha: 0.3);
}
.form-control:focus {
  color: rgba(255, 255, 255, 0.4);
}
.form-success {
  h4 {
    display: flex;
    color: rgba(11, 246, 133, 1);
    font-size: 16px; align-items: center;
    svg {
      margin-right: 10px;
    }
  }
}
.alert {
  font-size: 14px; padding: 0.5rem 1rem; margin-bottom: 0;
}
.alert-success {
  color: #42A14C;
  background-color: rgba($color: #42A14C, $alpha: 0.3);
  border: none;
}
.fav-login-text {
  padding: 30px 0; min-height: 250px;
  font-size: 16px;
  a {
    color: rgba($color: $color-yellow, $alpha: 1); text-decoration: underline;
    &:hover {
      color: #fff; text-decoration: none;
    }
  }
}
.popover-btn {
  cursor: pointer;
}
.popover { font-size: 12px; line-height: 130%; border: none; background-color: #323232; color: #fff;
  p {
    margin-bottom: 10px;
  }
  ul {
    padding: 0; margin-bottom: 0;
    li { list-style: none; margin-bottom: 3px;
      b { display: inline-block; min-width: 100px;}
    }
  }
}
.popover-body { color: #fff;}
.logintext {
  border-radius: 5px;
  padding: 10px; text-align: center;
  font-size: 14px; background-color: #282828;
  a {
    color: $color-yellow; text-decoration: none;
    &:hover {
      color: #fff; text-decoration: underline;
    }
  }
}

.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after, .bs-popover-top > .popover-arrow::after {

  border-top-color: #323232;
}
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before, .bs-popover-top > .popover-arrow::before {

  border-top-color: #323232;
}
.payment-info {
  padding-top: 20px;
  font-size: 14px;
}
.wallet-link {
  display: flex; padding: 16px 8px; border-top: solid 1px #323232;
  a {
    font-size: 12px; line-height: 120%; margin: 0 4px; text-align: center;
    color: #fff; background-color: #464646; border-radius: 5px; padding: 5px 9px;
    &:hover {
      background-color: $color-yellow; color: #000;
    }
  }
}
.nav-item {
  .small-btn {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat; display: block;
    background-image: url(../../images/new-dark/arrow-left.svg);
    background-position: center center; background-size: 32px;

    &.arrow2 {
      transform: rotate(180deg);
    }
  }
}
#currencyTabContent {
  .scrollbar-macosx {
    max-height: 350px;
  }
  .market-search {
    margin: 0.8rem 0.8rem 0.2rem 1rem;
    .form-control {
      background-color: rgba($color: #000, $alpha: 0.3);
    }
  }
}
.market-list {
  font-size: 12px; color: #fff;
  border-bottom: solid 1px #323232; align-items: center;
  a {
    display: flex;
    padding: 0.8rem 0.8rem 0.8rem 0rem; width: 100%; color: #fff; align-items: center;
    &:hover {
      color: $color-yellow;
    }
    .up {
      color: #75D77E;
    }
    .down {
      color: #FF6868;
    }
  }
  span {
    padding: 8px; cursor: pointer;
  }
  .m3 {
    text-align: right;
  }
  &.market-list-head {
    padding: 0.8rem 0.8rem 0.8rem 2rem; opacity: 0.6;
  }
  .m1,  .m3 {
    width: 25%;
  }
  .m2 {
    width: 50%;
  }
}
$breakpoint-ipad-large: 1199px;
@media (max-width: $breakpoint-ipad-large) {
  .scroll-element {
    display: none!important;
  }
  .btn-wallet {
    max-width: 180px;
  }
  .mobile-lang {
    margin-top: 30px;
    .form-select {
      background-color: #000;
      border-color: #000;
      color: rgba(255, 255, 255, 0.6);
      background-image: url(../../images/new-dark/dropdown.svg);
      background-size: 16px 16px;
      padding-top: 0;
      padding-bottom: 0;
      text-transform: uppercase;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      max-width: 130px;
    }
  }
  .dropdown.mobile-wallet {
    border-top: solid 1px rgba($color: $color-white, $alpha: 0.1);
    padding-top: 30px;
  }
  .mobile-setting, .mobile-lang, .mobile-wallet {
    display: block;
  }
  .market-header .navbar-expand-xl .navbar-nav .nav-link {
    padding:16px 0;
  }
  .nav-right-market  {
    display: none;
  }
  .market-header {
    .navbar-nav {
      padding-left: 0;
      padding-top: 12px;
      border-left: 0;
      border-top: solid 0px rgba(255, 255, 255, 0.1);
      border-bottom: solid 1px rgba(255, 255, 255, 0.1); padding-bottom: 15px; padding-top: 15px;
    }
  }
  .buy-order, .sell-order, .buy-sell-card {
    width: 100%;
  }
  .chart-main {
    border-bottom: solid 1px #323232;
  }
}
$breakpoint-ipad: 992px;
@media (max-width: $breakpoint-ipad) {
  .market-table .table > :not(caption) > * > * {
    padding: 15px .2rem;

    border-bottom-width: 1px;
  }
  .market-table td { font-size: 12px;}
  .market-table td:first-child, .market-table th:first-child {
    padding-left: 16px!important;
  }
  .market-table td:last-child, .market-table th:last-child {
    padding-right: 16px!important;
  }
  .carousel-balance {
    margin-top: 8px;
    padding-top: 8px;
    border-top: solid 1px #323232;
    padding-left: 8px;
  }
}
$breakpoint-mobile: 767px;
@media (max-width: $breakpoint-mobile) {
  .walletLink {
    width: 330px;
  }
  .market-table td:first-child, .market-table th:first-child {
    padding-left: 6px!important;
  }
  .market-table td:last-child, .market-table th:last-child {
    padding-right: 6px!important;
  }
  .currency-balance {
    text-align: center;
    padding-top: 8px; padding-bottom: 8px;
  }
  .btn-currency {
    justify-content: center;
    width: 100%;
  }
  .btn-currency .cc {
    margin-left: -24px;
  }
  .currency-change {
    min-width: calc((100vw - 63px));
  }
  .sidebar-link ul {
    margin-right: 0;
  }
  .border-right-1 {
    border-right: 0;
  }
  .profile-setting {
    min-height: inherit;
  }
  .pannel-main {
    padding-top: 0;
    margin-bottom: 32px;
  }
  .market-table-wrap {
    display: block;
  }
  .market-table-mobile {
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
    padding: 24px;
    background-color: #141414;
    margin-right: -12px; margin-left: -12px;
    .col-6 {
      margin-bottom: 24px;
    }
    .text-link {
      font-size: 16px;
      color: #F0AF1B;
    }
    small {
      display: block;
      font-size: 10px; opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 8px;
    }
    b {
      font-weight: 400;

    }
    .up {color: #0BF685;}
    .down { color: #FE4C4C;}
    .btn-main {
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 12px; font-weight: 500; line-height: 18px; color: #000;
    }
    .btn-secondary {
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 12px; font-weight: 500; line-height: 18px;
    }
    span {
      opacity: 0.5;
    }
    .add-to-fav {
      background-image: url(../../images/new-dark/star-1.svg);
      width: 16px;
      height: 16px;
      display: inline-block;
      float: right;

      &.active {
        background-image: url(../../images/new-dark/star-2.svg);

      }
    }
  }
  .market-table {
    display: none;
  }
  .footer-menu {
    text-align: center;
    margin-bottom: 15px;
    a {
      margin-right: 15px;
    }
  }
  .mobile-tabs {
    display: flex;
    border-top: solid 1px #323232;
    a {
      margin: 0 8px 0 16px;
      font-weight: 600;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.5);
      padding: 12px 0;
      border-bottom: solid 1px rgba(255, 255, 255, 0);
      &.active, &:hover {
        color: white;
        border-bottom: solid 1px #f0af1b;
      }
    }

  }
  .mobile-buysell {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    display: flex; padding: 24px 8px;
    justify-content: center;
    position: fixed;
    width: 100%; bottom: 0; left: 0; z-index: 99;
    a {
      margin: 0 8px;
      font-size: 14px; text-align: center; display: block; line-height: 40px; color: #fff; width: 50%;
      background-color: #42A14C;
      border-radius: 5px;
      &:last-child {
        background-color: #EB4D5C;
      }
    }
  }
  #trade, #chartmain, #orders, .currency-header {
    display: none;
    &.active {
      display: block;
    }
  }
  .buy-sell-card {
    border-top: solid 1px #323232;
  }
  .border-lr {
    min-height: inherit;
    border-left: solid 0px #323232;
    border-right: solid 0px #323232;
    border-top: solid 1px #323232;

  }
}
.input-hidden {
  display: none !important;
}

.page-item.disabled .page-link {
  border: none;
}
@import '../../css/new-dark/owl.carousel.css';
.table>:not(:first-child) {
  border-top: 1px solid #282828;
}
.page-enter-active,
.page-leave-active {
  transition: opacity .2s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .15s
}
.fade-enter,
.fade-leave-to {
  opacity: 0
}

.float-right {
  float:right;
}

.swal2-popup.swal2-toast {
  box-sizing: border-box;
  grid-column: 1/4 !important;
  grid-row: 1/4 !important;
  grid-template-columns: 1fr 99fr 1fr;
  padding: 1em;
  overflow-y: hidden;
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, .075), 0 1px 2px rgba(0, 0, 0, .075), 1px 2px 4px rgba(0, 0, 0, .075), 1px 3px 8px rgba(0, 0, 0, .075), 2px 4px 16px rgba(0, 0, 0, .075);
  pointer-events: all
}

.swal2-popup.swal2-toast>* {
  grid-column: 2
}

.swal2-popup.swal2-toast .swal2-title {
  margin: .5em 1em;
  padding: 0;
  font-size: 1em;
  text-align: initial
}

.swal2-popup.swal2-toast .swal2-loading {
  justify-content: center
}

.swal2-popup.swal2-toast .swal2-input {
  height: 2em;
  margin: .5em;
  font-size: 1em
}

.swal2-popup.swal2-toast .swal2-validation-message {
  font-size: 1em
}

.swal2-popup.swal2-toast .swal2-footer {
  margin: .5em 0 0;
  padding: .5em 0 0;
  font-size: .8em
}

.swal2-popup.swal2-toast .swal2-close {
  grid-column: 3/3;
  grid-row: 1/99;
  align-self: center;
  width: .8em;
  height: .8em;
  margin: 0;
  font-size: 2em
}

.swal2-popup.swal2-toast .swal2-html-container {
  margin: .5em 1em;
  padding: 0;
  font-size: 1em;
  text-align: initial
}

.swal2-popup.swal2-toast .swal2-html-container:empty {
  padding: 0
}

.swal2-popup.swal2-toast .swal2-loader {
  grid-column: 1;
  grid-row: 1/99;
  align-self: center;
  width: 2em;
  height: 2em;
  margin: .25em
}

.swal2-popup.swal2-toast .swal2-icon {
  grid-column: 1;
  grid-row: 1/99;
  align-self: center;
  width: 2em;
  min-width: 2em;
  height: 2em;
  margin: 0 .5em 0 0
}

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 1.8em;
  font-weight: 700
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  top: .875em;
  width: 1.375em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: .3125em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: .3125em
}

.swal2-popup.swal2-toast .swal2-actions {
  justify-content: flex-start;
  height: auto;
  margin: 0;
  margin-top: .5em;
  padding: 0 .5em
}

.swal2-popup.swal2-toast .swal2-styled {
  margin: .25em .5em;
  padding: .4em .6em;
  font-size: 1em
}

.swal2-popup.swal2-toast .swal2-success {
  border-color: #a5dc86
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 1.6em;
  height: 3em;
  transform: rotate(45deg);
  border-radius: 50%
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -.8em;
  left: -.5em;
  transform: rotate(-45deg);
  transform-origin: 2em 2em;
  border-radius: 4em 0 0 4em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -.25em;
  left: .9375em;
  transform-origin: 0 1.5em;
  border-radius: 0 4em 4em 0
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
  top: 0;
  left: .4375em;
  width: .4375em;
  height: 2.6875em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
  height: .3125em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
  top: 1.125em;
  left: .1875em;
  width: .75em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
  top: .9375em;
  right: .1875em;
  width: 1.375em
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
  -webkit-animation: swal2-toast-animate-success-line-tip .75s;
  animation: swal2-toast-animate-success-line-tip .75s
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
  -webkit-animation: swal2-toast-animate-success-line-long .75s;
  animation: swal2-toast-animate-success-line-long .75s
}

.swal2-popup.swal2-toast.swal2-show {
  -webkit-animation: swal2-toast-show .5s;
  animation: swal2-toast-show .5s
}

.swal2-popup.swal2-toast.swal2-hide {
  -webkit-animation: swal2-toast-hide .1s forwards;
  animation: swal2-toast-hide .1s forwards
}

.swal2-container {
  display: grid;
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  grid-template-areas: "top-start     top            top-end""center-start  center         center-end""bottom-start  bottom-center  bottom-end";
  grid-template-rows: minmax(-webkit-min-content, auto) minmax(-webkit-min-content, auto) minmax(-webkit-min-content, auto);
  grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
  height: 100%;
  padding: .625em;
  overflow-x: hidden;
  transition: background-color .1s;
  -webkit-overflow-scrolling: touch
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(0, 0, 0, .4)
}

.swal2-container.swal2-backdrop-hide {
  background: 0 0 !important
}

.swal2-container.swal2-bottom-start,
.swal2-container.swal2-center-start,
.swal2-container.swal2-top-start {
  grid-template-columns: minmax(0, 1fr) auto auto
}

.swal2-container.swal2-bottom,
.swal2-container.swal2-center,
.swal2-container.swal2-top {
  grid-template-columns: auto minmax(0, 1fr) auto
}

.swal2-container.swal2-bottom-end,
.swal2-container.swal2-center-end,
.swal2-container.swal2-top-end {
  grid-template-columns: auto auto minmax(0, 1fr)
}

.swal2-container.swal2-top-start>.swal2-popup {
  align-self: start
}

.swal2-container.swal2-top>.swal2-popup {
  grid-column: 2;
  align-self: start;
  justify-self: center
}

.swal2-container.swal2-top-end>.swal2-popup,
.swal2-container.swal2-top-right>.swal2-popup {
  grid-column: 3;
  align-self: start;
  justify-self: end
}

.swal2-container.swal2-center-left>.swal2-popup,
.swal2-container.swal2-center-start>.swal2-popup {
  grid-row: 2;
  align-self: center
}

.swal2-container.swal2-center>.swal2-popup {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center
}

.swal2-container.swal2-center-end>.swal2-popup,
.swal2-container.swal2-center-right>.swal2-popup {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end
}

.swal2-container.swal2-bottom-left>.swal2-popup,
.swal2-container.swal2-bottom-start>.swal2-popup {
  grid-column: 1;
  grid-row: 3;
  align-self: end
}

.swal2-container.swal2-bottom>.swal2-popup {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: end
}

.swal2-container.swal2-bottom-end>.swal2-popup,
.swal2-container.swal2-bottom-right>.swal2-popup {
  grid-column: 3;
  grid-row: 3;
  align-self: end;
  justify-self: end
}

.swal2-container.swal2-grow-fullscreen>.swal2-popup,
.swal2-container.swal2-grow-row>.swal2-popup {
  grid-column: 1/4;
  width: 100%
}

.swal2-container.swal2-grow-column>.swal2-popup,
.swal2-container.swal2-grow-fullscreen>.swal2-popup {
  grid-row: 1/4;
  align-self: stretch
}

.swal2-container.swal2-no-transition {
  transition: none !important
}

.swal2-popup {
  display: none;
  position: relative;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 100%);
  width: 32em;
  max-width: 100%;
  padding: 0 0 1.25em;
  border: none;
  border-radius: 5px;
  background: #fff;
  color: #545454;
  font-family: inherit;
  font-size: 1rem
}

.swal2-popup:focus {
  outline: 0
}

.swal2-popup.swal2-loading {
  overflow-y: hidden
}

.swal2-title {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: .8em 1em 0;
  color: inherit;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word
}

.swal2-actions {
  display: flex;
  z-index: 1;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 1.25em auto 0;
  padding: 0
}

.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
  opacity: .4
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1))
}

.swal2-actions:not(.swal2-loading) .swal2-styled:active {
  background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2))
}

.swal2-loader {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin: 0 1.875em;
  -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border-width: .25em;
  border-style: solid;
  border-radius: 100%;
  border-color: #2778c4 transparent #2778c4 transparent
}

.swal2-styled {
  margin: .3125em;
  padding: .625em 1.1em;
  transition: box-shadow .1s;
  box-shadow: 0 0 0 3px transparent;
  font-weight: 500
}

.swal2-styled:not([disabled]) {
  cursor: pointer
}

.swal2-styled.swal2-confirm {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: #7066e0;
  color: #fff;
  font-size: 1em
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(112, 102, 224, .5)
}

.swal2-styled.swal2-deny {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: #dc3741;
  color: #fff;
  font-size: 1em
}

.swal2-styled.swal2-deny:focus {
  box-shadow: 0 0 0 3px rgba(220, 55, 65, .5)
}

.swal2-styled.swal2-cancel {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: #6e7881;
  color: #fff;
  font-size: 1em
}

.swal2-styled.swal2-cancel:focus {
  box-shadow: 0 0 0 3px rgba(110, 120, 129, .5)
}

.swal2-styled.swal2-default-outline:focus {
  box-shadow: 0 0 0 3px rgba(100, 150, 200, .5)
}

.swal2-styled:focus {
  outline: 0
}

.swal2-styled::-moz-focus-inner {
  border: 0
}

.swal2-footer {
  justify-content: center;
  margin: 1em 0 0;
  padding: 1em 1em 0;
  border-top: 1px solid #eee;
  color: inherit;
  font-size: 1em
}

.swal2-timer-progress-bar-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  grid-column: auto !important;
  height: .25em;
  overflow: hidden;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px
}

.swal2-timer-progress-bar {
  width: 100%;
  height: .25em;
  background: rgba(0, 0, 0, .2)
}

.swal2-image {
  max-width: 100%;
  margin: 2em auto 1em
}

.swal2-close {
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: -1.2em;
  padding: 0;
  overflow: hidden;
  transition: color .1s, box-shadow .1s;
  border: none;
  border-radius: 5px;
  background: 0 0;
  color: #ccc;
  font-family: serif;
  font-family: monospace;
  font-size: 2.5em;
  cursor: pointer;
  justify-self: end
}

.swal2-close:hover {
  transform: none;
  background: 0 0;
  color: #f27474
}

.swal2-close:focus {
  outline: 0;
  box-shadow: inset 0 0 0 3px rgba(100, 150, 200, .5)
}

.swal2-close::-moz-focus-inner {
  border: 0
}

.swal2-html-container {
  z-index: 1;
  justify-content: center;
  margin: 1em 1.6em .3em;
  padding: 0;
  overflow: auto;
  color: inherit;
  font-size: 1.125em;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word
}

.swal2-checkbox,
.swal2-file,
.swal2-input,
.swal2-radio,
.swal2-select,
.swal2-textarea {
  margin: 1em 2em 0
}

.swal2-file,
.swal2-input,
.swal2-textarea {
  box-sizing: border-box;
  width: auto;
  transition: border-color .1s, box-shadow .1s;
  border: 1px solid #d9d9d9;
  border-radius: .1875em;
  background: inherit;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px transparent;
  color: inherit;
  font-size: 1.125em
}

.swal2-file.swal2-inputerror,
.swal2-input.swal2-inputerror,
.swal2-textarea.swal2-inputerror {
  border-color: #f27474 !important;
  box-shadow: 0 0 2px #f27474 !important
}

.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
  border: 1px solid #b4dbed;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5)
}

.swal2-file::-moz-placeholder,
.swal2-input::-moz-placeholder,
.swal2-textarea::-moz-placeholder {
  color: #ccc
}

.swal2-file:-ms-input-placeholder,
.swal2-input:-ms-input-placeholder,
.swal2-textarea:-ms-input-placeholder {
  color: #ccc
}

.swal2-file::placeholder,
.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: #ccc
}

.swal2-range {
  margin: 1em 2em 0;
  background: #fff
}

.swal2-range input {
  width: 80%
}

.swal2-range output {
  width: 20%;
  color: inherit;
  font-weight: 600;
  text-align: center
}

.swal2-range input,
.swal2-range output {
  height: 2.625em;
  padding: 0;
  font-size: 1.125em;
  line-height: 2.625em
}

.swal2-input {
  height: 2.625em;
  padding: 0 .75em
}

.swal2-file {
  width: 75%;
  margin-right: auto;
  margin-left: auto;
  background: inherit;
  font-size: 1.125em
}

.swal2-textarea {
  height: 6.75em;
  padding: .75em
}

.swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: .375em .625em;
  background: inherit;
  color: inherit;
  font-size: 1.125em
}

.swal2-checkbox,
.swal2-radio {
  align-items: center;
  justify-content: center;
  background: #fff;
  color: inherit
}

.swal2-checkbox label,
.swal2-radio label {
  margin: 0 .6em;
  font-size: 1.125em
}

.swal2-checkbox input,
.swal2-radio input {
  flex-shrink: 0;
  margin: 0 .4em
}

.swal2-input-label {
  display: flex;
  justify-content: center;
  margin: 1em auto 0
}

.swal2-validation-message {
  align-items: center;
  justify-content: center;
  margin: 1em 0 0;
  padding: .625em;
  overflow: hidden;
  background: #f0f0f0;
  color: #666;
  font-size: 1em;
  font-weight: 300
}

.swal2-validation-message::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 .625em;
  border-radius: 50%;
  background-color: #f27474;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 2.5em auto .6em;
  border: .25em solid transparent;
  border-radius: 50%;
  border-color: #000;
  font-family: inherit;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.swal2-icon .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 3.75em
}

.swal2-icon.swal2-error {
  border-color: #f27474;
  color: #f27474
}

.swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  flex-grow: 1
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  display: block;
  position: absolute;
  top: 2.3125em;
  width: 2.9375em;
  height: .3125em;
  border-radius: .125em;
  background-color: #f27474
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 1.0625em;
  transform: rotate(45deg)
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 1em;
  transform: rotate(-45deg)
}

.swal2-icon.swal2-error.swal2-icon-show {
  -webkit-animation: swal2-animate-error-icon .5s;
  animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
  -webkit-animation: swal2-animate-error-x-mark .5s;
  animation: swal2-animate-error-x-mark .5s
}

.swal2-icon.swal2-warning {
  border-color: #facea8;
  color: #f8bb86
}

.swal2-icon.swal2-warning.swal2-icon-show {
  -webkit-animation: swal2-animate-error-icon .5s;
  animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-warning.swal2-icon-show .swal2-icon-content {
  -webkit-animation: swal2-animate-i-mark .5s;
  animation: swal2-animate-i-mark .5s
}

.swal2-icon.swal2-info {
  border-color: #9de0f6;
  color: #3fc3ee
}

.swal2-icon.swal2-info.swal2-icon-show {
  -webkit-animation: swal2-animate-error-icon .5s;
  animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-info.swal2-icon-show .swal2-icon-content {
  -webkit-animation: swal2-animate-i-mark .8s;
  animation: swal2-animate-i-mark .8s
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd
}

.swal2-icon.swal2-question.swal2-icon-show {
  -webkit-animation: swal2-animate-error-icon .5s;
  animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-question.swal2-icon-show .swal2-icon-content {
  -webkit-animation: swal2-animate-question-mark .8s;
  animation: swal2-animate-question-mark .8s
}

.swal2-icon.swal2-success {
  border-color: #a5dc86;
  color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  transform: rotate(45deg);
  border-radius: 50%
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -.4375em;
  left: -2.0635em;
  transform: rotate(-45deg);
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -.6875em;
  left: 1.875em;
  transform: rotate(-45deg);
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0
}

.swal2-icon.swal2-success .swal2-success-ring {
  position: absolute;
  z-index: 2;
  top: -.25em;
  left: -.25em;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: .25em solid rgba(165, 220, 134, .3);
  border-radius: 50%
}

.swal2-icon.swal2-success .swal2-success-fix {
  position: absolute;
  z-index: 1;
  top: .5em;
  left: 1.625em;
  width: .4375em;
  height: 5.625em;
  transform: rotate(-45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  z-index: 2;
  height: .3125em;
  border-radius: .125em;
  background-color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: .8125em;
  width: 1.5625em;
  transform: rotate(45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: .5em;
  width: 2.9375em;
  transform: rotate(-45deg)
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
  -webkit-animation: swal2-animate-success-line-tip .75s;
  animation: swal2-animate-success-line-tip .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
  -webkit-animation: swal2-animate-success-line-long .75s;
  animation: swal2-animate-success-line-long .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
  -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
  animation: swal2-rotate-success-circular-line 4.25s ease-in
}

.swal2-progress-steps {
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  margin: 1.25em auto;
  padding: 0;
  background: inherit;
  font-weight: 600
}

.swal2-progress-steps li {
  display: inline-block;
  position: relative
}

.swal2-progress-steps .swal2-progress-step {
  z-index: 20;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background: #2778c4;
  color: #fff;
  line-height: 2em;
  text-align: center
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: #2778c4
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step {
  background: #add8e6;
  color: #fff
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line {
  background: #add8e6
}

.swal2-progress-steps .swal2-progress-step-line {
  z-index: 10;
  flex-shrink: 0;
  width: 2.5em;
  height: .4em;
  margin: 0 -1px;
  background: #2778c4
}

[class^=swal2] {
  -webkit-tap-highlight-color: transparent
}

.swal2-show {
  -webkit-animation: swal2-show .3s;
  animation: swal2-show .3s
}

.swal2-hide {
  -webkit-animation: swal2-hide .15s forwards;
  animation: swal2-hide .15s forwards
}

.swal2-noanimation {
  transition: none
}

.swal2-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll
}

.swal2-rtl .swal2-close {
  margin-right: initial;
  margin-left: 0
}

.swal2-rtl .swal2-timer-progress-bar {
  right: 0;
  left: auto
}

@-webkit-keyframes swal2-toast-show {
  0% {
    transform: translateY(-.625em) rotateZ(2deg)
  }

  33% {
    transform: translateY(0) rotateZ(-2deg)
  }

  66% {
    transform: translateY(.3125em) rotateZ(2deg)
  }

  100% {
    transform: translateY(0) rotateZ(0)
  }
}

@keyframes swal2-toast-show {
  0% {
    transform: translateY(-.625em) rotateZ(2deg)
  }

  33% {
    transform: translateY(0) rotateZ(-2deg)
  }

  66% {
    transform: translateY(.3125em) rotateZ(2deg)
  }

  100% {
    transform: translateY(0) rotateZ(0)
  }
}

@-webkit-keyframes swal2-toast-hide {
  100% {
    transform: rotateZ(1deg);
    opacity: 0
  }
}

@keyframes swal2-toast-hide {
  100% {
    transform: rotateZ(1deg);
    opacity: 0
  }
}

@-webkit-keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0
  }

  54% {
    top: .125em;
    left: .125em;
    width: 0
  }

  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em
  }

  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em
  }

  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em
  }
}

@keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0
  }

  54% {
    top: .125em;
    left: .125em;
    width: 0
  }

  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em
  }

  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em
  }

  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em
  }
}

@-webkit-keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0
  }

  65% {
    top: 1.25em;
    right: .9375em;
    width: 0
  }

  84% {
    top: .9375em;
    right: 0;
    width: 1.125em
  }

  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em
  }
}

@keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0
  }

  65% {
    top: 1.25em;
    right: .9375em;
    width: 0
  }

  84% {
    top: .9375em;
    right: 0;
    width: 1.125em
  }

  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em
  }
}

@-webkit-keyframes swal2-show {
  0% {
    transform: scale(.7)
  }

  45% {
    transform: scale(1.05)
  }

  80% {
    transform: scale(.95)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes swal2-show {
  0% {
    transform: scale(.7)
  }

  45% {
    transform: scale(1.05)
  }

  80% {
    transform: scale(.95)
  }

  100% {
    transform: scale(1)
  }
}

@-webkit-keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1
  }

  100% {
    transform: scale(.5);
    opacity: 0
  }
}

@keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1
  }

  100% {
    transform: scale(.5);
    opacity: 0
  }
}

@-webkit-keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0
  }

  54% {
    top: 1.0625em;
    left: .125em;
    width: 0
  }

  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em
  }

  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em
  }

  100% {
    top: 2.8125em;
    left: .8125em;
    width: 1.5625em
  }
}

@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0
  }

  54% {
    top: 1.0625em;
    left: .125em;
    width: 0
  }

  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em
  }

  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em
  }

  100% {
    top: 2.8125em;
    left: .8125em;
    width: 1.5625em
  }
}

@-webkit-keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0
  }

  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0
  }

  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em
  }

  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em
  }
}

@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0
  }

  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0
  }

  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em
  }

  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em
  }
}

@-webkit-keyframes swal2-rotate-success-circular-line {
  0% {
    transform: rotate(-45deg)
  }

  5% {
    transform: rotate(-45deg)
  }

  12% {
    transform: rotate(-405deg)
  }

  100% {
    transform: rotate(-405deg)
  }
}

@keyframes swal2-rotate-success-circular-line {
  0% {
    transform: rotate(-45deg)
  }

  5% {
    transform: rotate(-45deg)
  }

  12% {
    transform: rotate(-405deg)
  }

  100% {
    transform: rotate(-405deg)
  }
}

@-webkit-keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    transform: scale(.4);
    opacity: 0
  }

  50% {
    margin-top: 1.625em;
    transform: scale(.4);
    opacity: 0
  }

  80% {
    margin-top: -.375em;
    transform: scale(1.15)
  }

  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1
  }
}

@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    transform: scale(.4);
    opacity: 0
  }

  50% {
    margin-top: 1.625em;
    transform: scale(.4);
    opacity: 0
  }

  80% {
    margin-top: -.375em;
    transform: scale(1.15)
  }

  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1
  }
}

@-webkit-keyframes swal2-animate-error-icon {
  0% {
    transform: rotateX(100deg);
    opacity: 0
  }

  100% {
    transform: rotateX(0);
    opacity: 1
  }
}

@keyframes swal2-animate-error-icon {
  0% {
    transform: rotateX(100deg);
    opacity: 0
  }

  100% {
    transform: rotateX(0);
    opacity: 1
  }
}

@-webkit-keyframes swal2-rotate-loading {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes swal2-rotate-loading {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes swal2-animate-question-mark {
  0% {
    transform: rotateY(-360deg)
  }

  100% {
    transform: rotateY(0)
  }
}

@keyframes swal2-animate-question-mark {
  0% {
    transform: rotateY(-360deg)
  }

  100% {
    transform: rotateY(0)
  }
}

@-webkit-keyframes swal2-animate-i-mark {
  0% {
    transform: rotateZ(45deg);
    opacity: 0
  }

  25% {
    transform: rotateZ(-25deg);
    opacity: .4
  }

  50% {
    transform: rotateZ(15deg);
    opacity: .8
  }

  75% {
    transform: rotateZ(-5deg);
    opacity: 1
  }

  100% {
    transform: rotateX(0);
    opacity: 1
  }
}

@keyframes swal2-animate-i-mark {
  0% {
    transform: rotateZ(45deg);
    opacity: 0
  }

  25% {
    transform: rotateZ(-25deg);
    opacity: .4
  }

  50% {
    transform: rotateZ(15deg);
    opacity: .8
  }

  75% {
    transform: rotateZ(-5deg);
    opacity: 1
  }

  100% {
    transform: rotateX(0);
    opacity: 1
  }
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden
}

body.swal2-height-auto {
  height: auto !important
}

body.swal2-no-backdrop .swal2-container {
  background-color: transparent !important;
  pointer-events: none
}

body.swal2-no-backdrop .swal2-container .swal2-popup {
  pointer-events: all
}

body.swal2-no-backdrop .swal2-container .swal2-modal {
  box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true] {
    display: none
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
    position: static !important
  }
}

body.swal2-toast-shown .swal2-container {
  box-sizing: border-box;
  width: 360px;
  max-width: 100%;
  background-color: transparent;
  pointer-events: none
}

body.swal2-toast-shown .swal2-container.swal2-top {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto
}

body.swal2-toast-shown .swal2-container.swal2-top-left,
body.swal2-toast-shown .swal2-container.swal2-top-start {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0
}

body.swal2-toast-shown .swal2-container.swal2-center-left,
body.swal2-toast-shown .swal2-container.swal2-center-start {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-center {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%)
}

body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-left,
body.swal2-toast-shown .swal2-container.swal2-bottom-start {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto
}

.toasted {
  padding: 0 20px
}

.toasted.rounded {
  border-radius: 24px
}

.toasted .primary,
.toasted.toasted-primary {
  border-radius: 2px;
  min-height: 38px;
  line-height: 1.1em;
  background-color: #353535;
  padding: 6px 20px;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
}

.toasted .primary.success,
.toasted.toasted-primary.success {
  background: #4caf50
}

.toasted .primary.error,
.toasted.toasted-primary.error {
  background: #f44336
}

.toasted .primary.info,
.toasted.toasted-primary.info {
  background: #3f51b5
}

.toasted .primary .action,
.toasted.toasted-primary .action {
  color: #a1c2fa
}

.toasted.bubble {
  border-radius: 30px;
  min-height: 38px;
  line-height: 1.1em;
  background-color: #ff7043;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
}

.toasted.bubble.success {
  background: #4caf50
}

.toasted.bubble.error {
  background: #f44336
}

.toasted.bubble.info {
  background: #3f51b5
}

.toasted.bubble .action {
  color: #8e2b0c
}

.toasted.outline {
  border-radius: 30px;
  min-height: 38px;
  line-height: 1.1em;
  background-color: #fff;
  border: 1px solid #676767;
  padding: 0 20px;
  font-size: 15px;
  color: #676767;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  font-weight: 700
}

.toasted.outline.success {
  color: #4caf50;
  border-color: #4caf50
}

.toasted.outline.error {
  color: #f44336;
  border-color: #f44336
}

.toasted.outline.info {
  color: #3f51b5;
  border-color: #3f51b5
}

.toasted.outline .action {
  color: #607d8b
}

.toasted-container {
  position: fixed;
  z-index: 10000
}

.toasted-container,
.toasted-container.full-width {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column
}

.toasted-container.full-width {
  max-width: 86%;
  width: 100%
}

.toasted-container.full-width.fit-to-screen {
  min-width: 100%
}

.toasted-container.full-width.fit-to-screen .toasted:first-child {
  margin-top: 0
}

.toasted-container.full-width.fit-to-screen.top-right {
  top: 0;
  right: 0
}

.toasted-container.full-width.fit-to-screen.top-left {
  top: 0;
  left: 0
}

.toasted-container.full-width.fit-to-screen.top-center {
  top: 0;
  left: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.toasted-container.full-width.fit-to-screen.bottom-right {
  right: 0;
  bottom: 0
}

.toasted-container.full-width.fit-to-screen.bottom-left {
  left: 0;
  bottom: 0
}

.toasted-container.full-width.fit-to-screen.bottom-center {
  left: 0;
  bottom: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.toasted-container.top-right {
  top: 10%;
  right: 7%
}

.toasted-container.top-left {
  top: 10%;
  left: 7%
}

.toasted-container.top-center {
  top: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.toasted-container.bottom-right {
  right: 5%;
  bottom: 7%
}

.toasted-container.bottom-left {
  left: 5%;
  bottom: 7%
}

.toasted-container.bottom-center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 7%
}

.toasted-container.bottom-left .toasted,
.toasted-container.top-left .toasted {
  float: left
}

.toasted-container.bottom-right .toasted,
.toasted-container.top-right .toasted {
  float: right
}

.toasted-container .toasted {
  top: 35px;
  width: auto;
  clear: both;
  margin-top: 10px;
  position: relative;
  max-width: 100%;
  height: auto;
  word-break: normal;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  box-sizing: inherit
}

.toasted-container .toasted .fa,
.toasted-container .toasted .fab,
.toasted-container .toasted .far,
.toasted-container .toasted .fas,
.toasted-container .toasted .material-icons,
.toasted-container .toasted .mdi {
  margin-right: .5rem;
  margin-left: -.4rem
}

.toasted-container .toasted .fa.after,
.toasted-container .toasted .fab.after,
.toasted-container .toasted .far.after,
.toasted-container .toasted .fas.after,
.toasted-container .toasted .material-icons.after,
.toasted-container .toasted .mdi.after {
  margin-left: .5rem;
  margin-right: -.4rem
}

.toasted-container .toasted .action {
  text-decoration: none;
  font-size: .8rem;
  padding: 8px;
  margin: 5px -7px 5px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  cursor: pointer
}

.toasted-container .toasted .action.icon {
  padding: 4px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center
}

.toasted-container .toasted .action.icon .fa,
.toasted-container .toasted .action.icon .material-icons,
.toasted-container .toasted .action.icon .mdi {
  margin-right: 0;
  margin-left: 4px
}

.toasted-container .toasted .action.icon:hover {
  text-decoration: none
}

.toasted-container .toasted .action:hover {
  text-decoration: underline
}

@media only screen and (max-width:600px) {
  .toasted-container {
    min-width: 100%
  }

  .toasted-container .toasted:first-child {
    margin-top: 0
  }

  .toasted-container.top-right {
    top: 0;
    right: 0
  }

  .toasted-container.top-left {
    top: 0;
    left: 0
  }

  .toasted-container.top-center {
    top: 0;
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  .toasted-container.bottom-right {
    right: 0;
    bottom: 0
  }

  .toasted-container.bottom-left {
    left: 0;
    bottom: 0
  }

  .toasted-container.bottom-center {
    left: 0;
    bottom: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  .toasted-container.bottom-center,
  .toasted-container.top-center {
    -ms-flex-align: stretch !important;
    align-items: stretch !important
  }

  .toasted-container.bottom-left .toasted,
  .toasted-container.bottom-right .toasted,
  .toasted-container.top-left .toasted,
  .toasted-container.top-right .toasted {
    float: none
  }

  .toasted-container .toasted {
    border-radius: 0
  }
}

.content-wrap[data-v-43368770] {
  position: relative
}

canvas[data-v-43368770] {
  position: absolute;
  left: 0;
  top: 0
}

.input-date[data-v-9ba80a20] {
  border: 1px solid #ccc;
  cursor: pointer;
  display: block;
  font-size: 14px;
  padding: 5px;
  width: 230px
}

.input-date[data-v-9ba80a20]:after {
  content: "▼";
  float: right;
  font-size: smaller
}

.active-preset[data-v-9ba80a20] {
  border: 1px solid #0096d9;
  border-radius: 3px;
  color: #0096d9
}

.months-text[data-v-9ba80a20] {
  font-weight: 700;
  text-align: center
}

.months-text .left[data-v-9ba80a20] {
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjQ5NCAzMS40OTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjQ5NCAzMS40OTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTEwLjI3Myw1LjAwOWMwLjQ0NC0wLjQ0NCwxLjE0My0wLjQ0NCwxLjU4NywwYzAuNDI5LDAuNDI5LDAuNDI5LDEuMTQzLDAsMS41NzFsLTguMDQ3LDguMDQ3aDI2LjU1NCAgYzAuNjE5LDAsMS4xMjcsMC40OTIsMS4xMjcsMS4xMTFjMCwwLjYxOS0wLjUwOCwxLjEyNy0xLjEyNywxLjEyN0gzLjgxM2w4LjA0Nyw4LjAzMmMwLjQyOSwwLjQ0NCwwLjQyOSwxLjE1OSwwLDEuNTg3ICBjLTAuNDQ0LDAuNDQ0LTEuMTQzLDAuNDQ0LTEuNTg3LDBsLTkuOTUyLTkuOTUyYy0wLjQyOS0wLjQyOS0wLjQyOS0xLjE0MywwLTEuNTcxTDEwLjI3Myw1LjAwOXoiIGZpbGw9IiMwMDZERjAiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==");
  cursor: pointer;
  float: left;
  height: 16px;
  width: 16px
}

.months-text .right[data-v-9ba80a20] {
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjQ5IDMxLjQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMS40OSAzMS40OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8cGF0aCBkPSJNMjEuMjA1LDUuMDA3Yy0wLjQyOS0wLjQ0NC0xLjE0My0wLjQ0NC0xLjU4NywwYy0wLjQyOSwwLjQyOS0wLjQyOSwxLjE0MywwLDEuNTcxbDguMDQ3LDguMDQ3SDEuMTExICBDMC40OTIsMTQuNjI2LDAsMTUuMTE4LDAsMTUuNzM3YzAsMC42MTksMC40OTIsMS4xMjcsMS4xMTEsMS4xMjdoMjYuNTU0bC04LjA0Nyw4LjAzMmMtMC40MjksMC40NDQtMC40MjksMS4xNTksMCwxLjU4NyAgYzAuNDQ0LDAuNDQ0LDEuMTU5LDAuNDQ0LDEuNTg3LDBsOS45NTItOS45NTJjMC40NDQtMC40MjksMC40NDQtMS4xNDMsMC0xLjU3MUwyMS4yMDUsNS4wMDd6IiBmaWxsPSIjMDA2REYwIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=");
  cursor: pointer;
  float: right;
  height: 16px;
  width: 16px
}

.calendar-root[data-v-9ba80a20],
.calendar-title[data-v-9ba80a20] {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

.calendar-right-to-left[data-v-9ba80a20] {
  margin-left: -460px
}

.calendar[data-v-9ba80a20] {
  background: #282828;
  box-shadow: -3px 4px 12px -1px #ccc;
  display: block;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
  height: 300px;
  position: absolute;
  width: 700px;
  z-index: 9
}

.calendar-head h2[data-v-9ba80a20] {
  font-size: 16px;
  margin: 0;
  padding: 20px 0 0 20px
}

.close[data-v-9ba80a20]:hover {
  cursor: pointer
}

.close[data-v-9ba80a20] {
  float: right;
  font-size: 32px;
  font-weight: 400;
  margin-top: -35px;
  padding: 0 10px
}

.calendar ul[data-v-9ba80a20] {
  list-style-type: none
}

.calendar-wrap[data-v-9ba80a20] {
  display: inline-block;
  float: left;
  padding: 10px;
  width: 75%
}

.calendar-range[data-v-9ba80a20] {
  border-left: 1px solid #ccc;
  float: left;
  margin: -2px;
  padding: 0 12px
}

.calendar-left-mobile[data-v-9ba80a20] {
  width: 100% !important
}

.calendar_month_left[data-v-9ba80a20],
.calendar_month_right[data-v-9ba80a20] {
  float: left;
  margin: 5px;
  padding: 10px;
  width: 43%
}

.calendar_weeks[data-v-9ba80a20] {
  margin: 0;
  padding: 10px 0;
  width: auto
}

.calendar_weeks li[data-v-9ba80a20] {
  color: #999;
  display: inline-block;
  text-align: center;
  width: 13.6%
}

.calendar_days[data-v-9ba80a20] {
  margin: 0;
  padding: 0
}

.calendar_days li[data-v-9ba80a20] {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  line-height: 2em;
  text-align: center;
  width: 13.6%
}

.calendar_preset li[data-v-9ba80a20] {
  display: block;
  line-height: 2.6em;
  width: auto
}

.calendar_days li[data-v-9ba80a20]:hover {
  background: #eee;
  color: #000
}

li.calendar_days--disabled[data-v-9ba80a20] {
  pointer-events: none
}

li.calendar_days_selected[data-v-9ba80a20] {
  background: #f0af1b;
  color: #fff
}

li.calendar_days_in-range[data-v-9ba80a20] {
  background: #0096d9;
  color: #fff
}

.calendar_preset[data-v-9ba80a20] {
  padding: 0
}

.calendar_preset li.calendar_preset-ranges[data-v-9ba80a20] {
  cursor: pointer;
  line-height: 180%;
  margin-bottom: 5px;
  margin-top: 1px;
  padding: 0 30px 0 10px
}

.calendar_preset li.calendar_preset-ranges[data-v-9ba80a20]:hover {
  background: #333
}

.calendar-mobile[data-v-9ba80a20] {
  box-shadow: none;
  width: 260px;
  z-index: 1
}

.calendar-range-mobile[data-v-9ba80a20] {
  border-left: none;
  margin: -20px 0;
  padding: 2px;
  width: 90%
}

.calendar-btn-apply[data-v-9ba80a20] {
  background: #f7931e;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 5px;
  width: 100%
}

.nav-link {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: IBM Plex Sans, sans-serif;
  padding-left: 16px;
  padding-right: 16px
}

.cm-s-base16-dark.CodeMirror {
  background: #151515;
  color: #e0e0e0
}

.cm-s-base16-dark div.CodeMirror-selected {
  background: #303030
}

.cm-s-base16-dark .CodeMirror-line::selection,
.cm-s-base16-dark .CodeMirror-line>span::selection,
.cm-s-base16-dark .CodeMirror-line>span>span::selection {
  background: rgba(48, 48, 48, .99)
}

.cm-s-base16-dark .CodeMirror-line::-moz-selection,
.cm-s-base16-dark .CodeMirror-line>span::-moz-selection,
.cm-s-base16-dark .CodeMirror-line>span>span::-moz-selection {
  background: rgba(48, 48, 48, .99)
}

.cm-s-base16-dark .CodeMirror-gutters {
  background: #151515;
  border-right: 0
}

.cm-s-base16-dark .CodeMirror-guttermarker {
  color: #ac4142
}

.cm-s-base16-dark .CodeMirror-guttermarker-subtle,
.cm-s-base16-dark .CodeMirror-linenumber {
  color: #505050
}

.cm-s-base16-dark .CodeMirror-cursor {
  border-left: 1px solid #b0b0b0
}

.cm-s-base16-dark span.cm-comment {
  color: #8f5536
}

.cm-s-base16-dark span.cm-atom,
.cm-s-base16-dark span.cm-number {
  color: #aa759f
}

.cm-s-base16-dark span.cm-attribute,
.cm-s-base16-dark span.cm-property {
  color: #90a959
}

.cm-s-base16-dark span.cm-keyword {
  color: #ac4142
}

.cm-s-base16-dark span.cm-string {
  color: #f4bf75
}

.cm-s-base16-dark span.cm-variable {
  color: #90a959
}

.cm-s-base16-dark span.cm-variable-2 {
  color: #6a9fb5
}

.cm-s-base16-dark span.cm-def {
  color: #d28445
}

.cm-s-base16-dark span.cm-bracket {
  color: #e0e0e0
}

.cm-s-base16-dark span.cm-tag {
  color: #ac4142
}

.cm-s-base16-dark span.cm-link {
  color: #aa759f
}

.cm-s-base16-dark span.cm-error {
  background: #ac4142;
  color: #b0b0b0
}

.cm-s-base16-dark .CodeMirror-activeline-background {
  background: #202020
}

.cm-s-base16-dark .CodeMirror-matchingbracket {
  color: #fff !important;
  text-decoration: underline
}

.admin-logo-top {
  display: flex;
  align-items: center;
  padding-left: 48px;
}

.admin-logo-top span {
  margin-left: 12px;
  line-height: 24px;
}
.versiontext {
  padding-right: 24px;
}
.sidebar-admin {
  min-height: calc(100vh - 74px);
  position: sticky;
  top: 74px;
  background-color: rgba(0, 0, 0, 0.2);
  padding-top: 15px; padding-bottom: 15px;
  border-right: solid 1px rgba(255, 255, 255, 0.1);

  .f-link {
    padding: 16px 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    color: $color-white;

    i {
      font-size: 16px;
      text-align: center;
      width: 30px;
      margin-right: 8px;
    }
    &:hover {
      background-color: #1E1726;
      color: $color-white;
    }
  }
  .slavel {
    background-color: #1E1726;
    border-radius: 8px;
    .dropdown-item {
      padding: 16px 24px;
      line-height: 24px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      border-radius: 8px;
      color: $color-white;
      &.active {
        background-color: #688FF4;
      }
      i {
        font-size: 16px;
        text-align: center;
        width: 30px;
        margin-right: 8px;
      }
    }
  }
}
.admin-logo-top img {
  max-height: 24px;
}
.secure-main-container h3 {
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
}
.dropdown,
.dropend,
.dropstart,
.dropup {
  list-style: none !important;
}

.admin-nav .navbar-brand {
  font-size: 16px;
}

.admin-nav ul {
  margin-bottom: 0;
}
.admin-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}
.admin-nav .nav-link {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 14px;
}
.secure-main-container {
  td, th {
    padding: .5rem 1rem;
  }
}
.list-horizontal-flow {
  max-width: 320px !important;
  overflow: auto;
  overflow-y: hidden;
}
#settings-page {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  .form-group {
    margin-top: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: solid 1px #333;
    label {
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
}
.no-background {
  background: transparent;
}

.bottom-border-yellow {
  border-bottom: 1px solid #F0AF1B;
}

.bottom-border-grey {
  border-bottom: 1px solid #282828;
}

.CodeMirror.cm-s-base16-dark{
  min-height: 750px;
}

.input-date[data-v-9ba80a20] {
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 8px;
}
.mobile-spacer {
  display: none;
}
@media (max-width: 767px) {
  .mobile-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: solid 1px #323232;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1E1E1E;
    z-index:9;
  }
  #chartmain {
    max-height: calc(100vh - 282px);
    overflow: hidden;
  }
  .hide-mobile {
    display: none;
  }
  .mobile-spacer {
    display: block;
    height: 49px;
  }
}
.vdp-datepicker__calendar {
  background: black!important;
}
.vdp-datepicker__calendar header .next:not(.disabled):hover, .vdp-datepicker__calendar header .prev:not(.disabled):hover, .vdp-datepicker__calendar header .up:not(.disabled):hover {
  background: steelblue!important;
}
.admin-nav .nav-item i {
  margin-right: 8px;
}
.card-colorless {
  background-color: transparent !important;
  border-width: 0px !important;
}
.card-colorless .nav-tabs .nav-link.active {
  color: #fff !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom: solid 1px #f0af1b !important;
  padding-right: 0px !important;
  margin-right: 16px;
}

.card-colorless .nav-tabs .nav-link {
  padding-left: 0px !important;
}

.card-colorless .nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.card-colorless .nav-tabs {
  border-bottom: 1px solid #282828 !important;
}

.card-colorless .nav {
  margin-bottom: 1rem !important;
}

.card-colorless .card-completed-sec {
  color: #0BF685;
}

.form-select:disabled {
  background-color: #191f24!important;
}
.buy-order .order-table .table td, .buy-order .order-table .table th, .sell-order .order-table .table td, .sell-order .order-table .table th {
  position: relative;
}
.stripe-receipt {
  width: 100%; overflow: auto; overflow-x: hidden
}

@media (max-width: 1199px) {
  .secure-main-container td, .secure-main-container th {
    padding: .3rem 0.5rem;
    font-size: 10px;
  }
  .secure-main-container .card-header {
    padding: .5rem 0rem;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .secure-main-container .table-filter {
    width: 100%;
    margin-top: 10px;
  }
  .transaction-filter-item {
    margin-bottom:10px;
  }
  .sidebar-admin .slavel .dropdown-item, .sidebar-admin .f-link {
    padding: 8px 4px;
  }
  .sidebar-admin .slavel .dropdown-item {
    white-space: normal;
  }
}
@media (max-width: 767px) {
  .sidebar-admin {
    height: auto;
    min-height: inherit;
    position: static;
  }
  #sidebarMenu   .dropdown-menu{
    transform: translate(0) !important;
    position: static !important;
  }
  .market-filters {
    overflow-x: auto;
  }
}