:root {
  /* Radius */
  --border-radius-sm: 0.5rem !important;
  --border-radius-md: 0.75rem !important;
  --border-radius-lg: 1rem !important;
  --border-radius-xl: 1.5rem !important;
  --border-radius-full: 100px !important;

  /* Colors */
  --color-primary: #ff5c00 !important;
  --light-color: #fafafa !important;
  --dark-color: #09090b !important;
}

[data-bs-theme="dark"] {
  /* Background */
  --background-color-primary: #18181b !important;
  --background-color-container: #09090b !important;
  --background-color-secondary: #27272a !important;

  /* Text */
  --text-color-primary: #fafafa !important;
  --text-color-secondary: #a1a1aa !important;

  /* Border */
  --theme-border-color: #3f3f46 !important;

  /* Classes */
  .sm-theme-button-alt a {
    height: 40px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    background: var(--light-color);
    color: var(--dark-color);
  }

  .sm-theme-button-alt a:hover, .sm-theme-button-alt a:focus, .sm-theme-button-alt a:visited{
    background: var(--light-color);
    color: var(--dark-color);
  }

  .md-theme-button-alt a {
    padding: 1rem 1.5rem !important;
    border-radius: 0.5rem !important;
    background: var(--light-color);
    color: var(--dark-color);
  }

  .md-theme-button-alt a:hover, .md-theme-button-alt a:focus, .md-theme-button-alt a:visited{
    background: var(--light-color);
    color: var(--dark-color);
  }
}

[data-bs-theme="dark"] #darkMode {
  display: none !important;
}

[data-bs-theme="light"] {
  /* Background */
  --background-color-primary: #fafafa !important;
  --background-color-container: #ffffff !important;
  --background-color-secondary: #f4f4f5 !important;

  /* Text */
  --text-color-primary: #09090b !important;
  --text-color-secondary: #71717a !important;

  /* Border */
  --theme-border-color: #e4e4e7 !important;

  /* Classes */
  .sm-theme-button-alt a {
    height: 40px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    background: var(--dark-color);
    color: var(--light-color);
  }

  .sm-theme-button-alt a:hover, .sm-theme-button-alt a:focus, .sm-theme-button-alt a:visited{
    background: var(--dark-color);
    color: var(--light-color);
  }

  .md-theme-button-alt a {
    padding: 1rem 1.5rem !important;
    border-radius: 0.5rem !important;
    background: var(--dark-color);
    color: var(--light-color);
  }

  .md-theme-button-alt a:hover, .md-theme-button-alt a:focus, .md-theme-button-alt a:visited{
    background: var(--dark-color);
    color: var(--light-color);
  }
}

[data-bs-theme="light"] #lightMode {
  display: none !important;
}

/* HTML */
*:not(.has-transition *) {
  transition: none !important;
}

body {
  background-color: var(--background-color-primary);
}

img {
  -webkit-user-drag: none !important;
}

/* Classes */
.sm-theme-button a {
  height: 40px !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  color: var(--text-color-primary);
  background: var(--background-color-secondary);
}

.sm-theme-button a:hover, .sm-theme-button a:focus, .sm-theme-button a:visited {
  color: var(--text-color-primary);
}

.md-theme-button a {
  padding: 1rem 1.5rem !important;
  border-radius: 0.5rem !important;
  color: var(--text-color-primary);
  background: var(--background-color-secondary);
}

.md-theme-button a:hover, .md-theme-button a:focus, .md-theme-button a:visited {
  color: var(--text-color-primary);
}

.crypto-navbar{
  font-size: 13px;
}

.crypto-navbar-name{
  color: var(--text-color-primary);
}

.crypto-navbar svg{
  top: -1px;
  width: 15px;
  position: relative;
}

.divider-navbar-crypto{
  top: -3px;
  position: relative;
}

.crypto-name{
  font-size: 12px;
  color: var(--text-color-primary);
}

.crypto-code{
  font-size: 12px;
  color: var(--text-color-secondary);
}

.crypto-divider{
  border-top-color: var(--theme-border-color);
}

.crypto-img{
  font-size: 12px;
  border-radius: 100%!important;
  border: 1px solid var(--theme-border-color)!important;
}

.crypto-price{
  font-size: 12px;
  color: var(--text-color-primary);
}

.crypto-changes{
  font-size: 12px;
  direction: ltr;
}

.navbar-crypto-group{
    will-change: transform;
    animation: scrolling 60s linear infinite;
}

@keyframes scrolling {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(100%);
	}
}

@media screen and (max-width: 767px){
  body {
    background-color: var(--background-color-container);
  }
}