[data-bs-theme="dark"] .navbar {
  background: var(--bs-black);
}

[data-bs-theme="light"] .navbar {
  background: var(--bs-black);
}

html[data-bs-theme="dark"] {
  scrollbar-color: var(--bs-purple) #fff;
}

html {
  scrollbar-color: #000 #fff;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background: #0f0f0f;
  border: 6px solid rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bs-purple);
}

::selection {
  background: var(--bs-purple);
}

.brand-logo {
  animation: glow 4s infinite;
}

@keyframes glow {
  0% {
    -webkit-filter: drop-shadow(0px 2px 5px rgba(255,255,255,0.0));
    
  }
  50% {
    -webkit-filter: drop-shadow(0px 2px 10px rgba(255,255,255,1));
    
  }
  100% {
    -webkit-filter: drop-shadow(0px 2px 5px rgba(255,255,255,0.0));
    
  }
}

/* Bot Toggler - START */
.toggle {
	position: relative;
	width: 60px;
	height: 34px;
}

.toggle input[type="checkbox"] {
	display: none;
}

.toggle label {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 34px;
	background-color: #ccc;
	border-radius: 17px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.toggle label::before {
	content: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_110_353)'%3E%3Cpath d='M26.5933 16.7655C24.7902 23.9977 17.4648 28.3987 10.2317 26.5956C3.00203 24.7925 -1.39939 17.4671 0.404127 10.2353C2.20638 3.00225 9.53139 -1.3996 16.7623 0.403497C23.995 2.20659 28.3964 9.53287 26.5933 16.7655Z' fill='%23F7931A'/%3E%3Cpath d='M19.451 11.5766C19.7193 9.78028 18.3516 8.81461 16.4814 8.1704L17.0881 5.73703L15.6064 5.36789L15.0158 7.73714C14.6268 7.64011 14.2269 7.54856 13.8295 7.45786L14.4243 5.073L12.944 4.70386L12.3369 7.13639C12.0146 7.06298 11.6982 6.99042 11.3911 6.91406L11.3927 6.90647L9.35003 6.39642L8.956 7.97845C8.956 7.97845 10.055 8.23031 10.0318 8.24592C10.6317 8.39569 10.7405 8.79267 10.722 9.10739L10.0309 11.8795C10.0723 11.8901 10.1259 11.9053 10.1849 11.9289L10.0288 11.8901L9.05978 15.7734C8.98637 15.9557 8.80033 16.2291 8.38098 16.1253C8.39575 16.1468 7.30436 15.8565 7.30436 15.8565L6.56903 17.5525L8.497 18.033C8.85559 18.1229 9.20701 18.2169 9.55253 18.3055L8.93955 20.7672L10.4191 21.1363L11.0266 18.7012C11.4303 18.8109 11.8226 18.9122 12.2065 19.0075L11.6016 21.4312L13.0828 21.8003L13.6958 19.3438C16.2215 19.8217 18.1212 19.629 18.9198 17.3449C19.564 15.5055 18.8882 14.4445 17.5593 13.7522C18.5271 13.5282 19.2565 12.8916 19.451 11.5766ZM16.0663 16.3223C15.6081 18.1617 12.5116 17.1677 11.5071 16.918L12.3205 13.6573C13.3245 13.9079 16.5434 14.404 16.0663 16.3223ZM16.524 11.55C16.1064 13.2232 13.5287 12.3731 12.6921 12.1647L13.4296 9.20737C14.2661 9.41578 16.9594 9.80475 16.524 11.55Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_110_353'%3E%3Crect width='27' height='27' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
	position: absolute;
	top: 3px;
	left: 3px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
	transition: transform 0.3s ease;
	filter: grayscale(0.4);
}

.toggle input:checked + label {
	background-color: #9B4CE3;
}

.toggle input:checked + label::before {
	filter: unset;
  transform: translateX(26px);
}

.toggle label:hover {
	background-color: #999;
}

.toggle input:checked + label:hover {
	background-color: rgb(99, 33, 138);
}

.toggle input:active + label {
	background-color: #6f4ea3;
}

.toggle input:checked:active + label {
	background-color: #009b93;
}

.toggle input:focus + label {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

.toggle-status {
  background: #27D374;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  position: fixed;
  top: 2rem;
  right: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
}
  
.toggle-status {
  opacity: 0;
  visibility: hidden;
}
  
.toggle-status .red-message {
  background: #A93D4D;
  opacity: 1;
  visibility: visible;
}
/* Bot Toggler - END */

.bell-svg {
  overflow: visible;
}

/* Theme switcher - START */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
}

@media (width <= 1024px) {
  .navbar .switch {
    position: fixed;
    bottom: 2rem;
  }

  .mobile-menu-wrapper {
    width: 100%;
  }
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sun svg {
  position: absolute;
  top: 6px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* .switch:hover */.sun svg {
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
 
  0% {
    transform: rotate(0);
  }

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

/* .switch:hover */.moon svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {
 
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.input:checked + .slider {
  background-color: #183153;
}

.input:focus + .slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked + .slider:before {
  transform: translateX(30px);
}
/* Theme switcher - END */

/* BALANCE CARD - START */
.profit-percentage.up {
  color: var(--bs-blue);
}

.profit-percentage.down {
  color: var(--bs-pink);
}

.profit-percentage.down .percentage-arrow {
  fill: var(--bs-pink);
}

.profit-percentage svg {
  transition: 0.3s ease-in-out;
}

.profit-percentage.down svg {
  rotate: 180deg;
  transition: 0.3s ease-in-out;
}
/* BALANCE CARD - END */

.raining-bitcoin {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: 0.3s ease-in-out
}

.toast.bg-success.show .raining-bitcoin {
  opacity: 1;
  visibility: visible;
  transition: 0.3s ease-in-out
}

.toast.hide .raining-bitcoin {
  opacity: 0;
  visibility: hidden;
}

.raining-bitcoin video,
.raining-bitcoin img {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Burger Menu - START */
.hamburger {
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 3em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
/* Burger Menu - END */

@media (width <= 1024px) {
  header .offcanvas .navbar-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  header .offcanvas .navbar-nav .nav-link {
    font-weight: 600;
    color: var(--bs-white);
  }

}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: var(--bs-white);
}

.open-orders-wrapper {
  max-height: 35vh;
  overflow: auto;
}

.open-orders-wrapper.scrollbar {
  mask-image: linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  padding-bottom: 5rem;
  transition: 0.3s ease-in-out;
}

.form-control:focus {
  border-color: unset;
  box-shadow: none;
  border: none;
}

.login-page {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top;
  background-image:url('/images/login-wallpaper.jpg');
  width: 100%;
  height: 100%;
}

.login-page .card {
  background: rgb(0 0 0 / 20%);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 3px rgb(0 0 0 / 5%);
  border: none;
}

.checkbox-wrapper-12 {
  position: relative;
  display: flex;
  gap: 0.5rem;
}

.checkbox-wrapper-12 > svg {
  position: absolute;
  top: -130%;
  left: -170%;
  width: 110px;
  pointer-events: none;
}

.checkbox-wrapper-12 * {
  box-sizing: border-box;
}

.checkbox-wrapper-12 input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0;
}

.checkbox-wrapper-12 input[type="checkbox"]:focus {
  outline: 0;
}

.checkbox-wrapper-12 .cbx {
  width: 24px;
  height: 24px;
  top: calc(100px - 12px);
  left: calc(100px - 12px);
}

.checkbox-wrapper-12 .cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #bfbfc0;
  border-radius: 50%;
}

.checkbox-wrapper-12 .cbx label {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: trasnlate3d(0, 0, 0);
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg path {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s ease;
  transition-delay: 0.2s;
}

.checkbox-wrapper-12 .cbx input:checked + label {
  animation: splash-12 0.6s ease forwards;
}

.checkbox-wrapper-12 .cbx input:checked + label + svg path {
  stroke-dashoffset: 0;
}

@-moz-keyframes splash-12 {
  40% {
    background: var(--bs-purple);
    box-shadow: 0 -18px 0 -8px var(--bs-purple), 16px -8px 0 -8px var(--bs-purple), 16px 8px 0 -8px var(--bs-purple), 0 18px 0 -8px var(--bs-purple), -16px 8px 0 -8px var(--bs-purple), -16px -8px 0 -8px var(--bs-purple);
  }

  100% {
    background: var(--bs-purple);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-webkit-keyframes splash-12 {
  40% {
    background: var(--bs-purple);
    box-shadow: 0 -18px 0 -8px var(--bs-purple), 16px -8px 0 -8px var(--bs-purple), 16px 8px 0 -8px var(--bs-purple), 0 18px 0 -8px var(--bs-purple), -16px 8px 0 -8px var(--bs-purple), -16px -8px 0 -8px var(--bs-purple);
  }

  100% {
    background: var(--bs-purple);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-o-keyframes splash-12 {
  40% {
    background: var(--bs-purple);
    box-shadow: 0 -18px 0 -8px var(--bs-purple), 16px -8px 0 -8px var(--bs-purple), 16px 8px 0 -8px var(--bs-purple), 0 18px 0 -8px var(--bs-purple), -16px 8px 0 -8px var(--bs-purple), -16px -8px 0 -8px var(--bs-purple);
  }

  100% {
    background: var(--bs-purple);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@keyframes splash-12 {
  40% {
    background: var(--bs-purple);
    box-shadow: 0 -18px 0 -8px var(--bs-purple), 16px -8px 0 -8px var(--bs-purple), 16px 8px 0 -8px var(--bs-purple), 0 18px 0 -8px var(--bs-purple), -16px 8px 0 -8px var(--bs-purple), -16px -8px 0 -8px var(--bs-purple);
  }

  100% {
    background: var(--bs-purple);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

.login-page .form-control {
  line-height: 2;
}

.login-page input::placeholder {
  color: var(--bs-white);
}

.login-page .glow-btn {
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-white);
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid var(--bs-white);
  transition: 0.5s ease;
  user-select: none;
}

.glow-btn:hover {
  color: #ffffff;
  background: var(--bs-purple);
  border: 1px solid var(--bs-purple);
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px var(--bs-purple),
              0 0 20px var(--bs-purple),
              0 0 50px var(--bs-purple),
              0 0 100px var(--bs-purple);
}

.dropdown-item {
  cursor: pointer;
}

#currency-selector {
  border: none;
  background: transparent;
}

#currency-selector option {
  background: var(--bs-black);
}

.manual-order,.manual-order::after {
  padding: 10px 50px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: transparent;
  position: relative;
}

.manual-order::after {
  --move1: inset(50% 50% 50% 50%);
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  clip-path: var(--move1);
  content: 'MANUAL';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.manual-order:hover::after {
  animation: glitch_4011 1s;
  text-shadow: 10 10px 10px black;
  animation-timing-function: steps(2, end);
  text-shadow: -3px -3px 0px #6f4ea3, 3px 3px 0px #6f4ea3;
  background-color: transparent;
  border: 3px solid rgb(0, 255, 213);
}

.manual-order:hover {
  text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
}

.manual-order {
    border: 1px solid var(--bs-border-color);;
}

.manual-order:hover {
  background-color: transparent;
  border: 1px solid #6f4ea3;
  box-shadow: 0px 10px 10px -10px #6f4ea3;
}

@keyframes glitch_4011 {
  0% {
    clip-path: var(--move1);
    transform: translate(0px,-10px);
  }

  10% {
    clip-path: var(--move2);
    transform: translate(-10px,10px);
  }

  20% {
    clip-path: var(--move3);
    transform: translate(10px,0px);
  }

  30% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  40% {
    clip-path: var(--move5);
    transform: translate(10px,-10px);
  }

  50% {
    clip-path: var(--move6);
    transform: translate(-10px,10px);
  }

  60% {
    clip-path: var(--move1);
    transform: translate(10px,-10px);
  }

  70% {
    clip-path: var(--move3);
    transform: translate(-10px,10px);
  }

  80% {
    clip-path: var(--move2);
    transform: translate(10px,-10px);
  }

  90% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  100% {
    clip-path: var(--move1);
    transform: translate(0);
  }
}

.table-responsive {
    max-height: 500px;
}

.the-balance-eye {
    width: 16px;
    color: #848E9C;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.the-balance-eye:hover {
    color: #fff;
}

.cursor-pointer {
    cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li,
.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--bs-black);
}

.select2-results__option {
    color: var(--bs-black);
}

.select2-container {
    max-width: 100%;
}


/* Vue Section */
#dashboard-orders .nav-pills .nav-link.active,
#dashboard-orders .nav-pills .show > .nav-link {
  --bs-nav-pills-link-active-color: #282828;
}

#dashboard-orders .card-order-items.items {
  max-height: 475px;
  overflow-y: auto;
  overflow-x: hidden;
}

@media( min-width: 1024px ) {
  
  #dashboard-orders .card-order-items.items {
    max-height: 335px;
  }
}

.badge.badge-warning {
    position: absolute;
    background: red;
    border-radius: 50%;
    font-size: 7px;
    width: 17px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -5px;
    right: -10px;
}