:root {
  --primary: #181818;
  /* --primary: #1a2035; */
  --green: #69e2b0;
  --secondary: #fdf0d8;
  --success: #05803a;
  --danger: #d9534f;
  --sidebar: 250px;
  --navbar: 80px;
}
body {
  background-color: var(--darkTheme);
  color: var(--lightTheme);
  font-family: 'Archivo-Regular';
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'ClashDisplay-Semibold';
}
#tradingview_10633 {
    height: 600px;
}
.custom-text-area {
    white-space: pre-wrap !important; /* Preserve formatting */
}
.xui-bg-blue {
  background-color: var(--primary) !important;
}
.xui-text-blue {
  color: var(--primary) !important;
}
.xui-btn-blue {
  background-color: #0061D2 !important;/*var(--primary) !important*/;
}
.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-green {
  background-color: var(--green);
}

.bg-success {
  background-color: var(--success);
}

.bg-opacity {
  background-color: rgba(0, 0, 0, 0.1);
}

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

.text-secondary {
  color: var(--secondary);
}

.text-green {
  color: var(--green);
}
.coin-value {
  color: #C5C5C5;
}
.text-success {
  color: var(--success);
}
.text-danger {
  color: var(--danger);
}
body {
  transition: .4s;
}
.ctsh-live-account-badge {
  background-color: var(--success);
  color: var(--secondary);
  padding: 6.4px 8px;
  display: inline-block;
  /* position: fixed;
  top: calc(var(--navbar) + 10px);
  left: 50%;
  transform: translateX(-50%); */
}
.mx-form-icon {
  width: 50px;
}

.mx-form-input {
  width: calc(100% - 50px);
}

.mx-form-input input,
.mx-form-input select {
  /* background-color: #FFFFFF;
  color: #555;
  opacity: 1;
  border: none; */
}

.mx-navbar {
  position: relative;
}

.mx-navbar .brand {
  width: var(--sidebar);
}

.mx-navbar .links {
  width: -webkit-calc(100% - 250px);
  width: -moz-calc(100% - 250px);
  width: -o-calc(100% - 250px);
  width: calc(100% - 250px);
}

.mx-section {
  width: 100%;
  height: -webkit-calc(100vh - var(--navbar));
  height: -moz-calc(100vh - var(--navbar));
  height: -o-calc(100vh - var(--navbar));
  height: calc(100vh - var(--navbar));
  position: relative;
}

.mx-section .sidebar {
  width: var(--sidebar);
  height: inherit;
  position: absolute;
  overflow-y: auto;
  top: 0;
  left: 0;
}

.mx-section .sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.mx-section .sidebar ul li {
  display: block;
}

.mx-section .sidebar ul li.active a {
  color: #ffffff;
  background-color: var(--primary);
}

.xui-dark-mode  .mx-section .sidebar ul li.active a {
  background-color: #ffffff;
  color: var(--primary);
}

.mx-section .sidebar ul li a {
  color: var(--primary);
  padding: .9rem 1rem;
  text-decoration: none;
  font-size: 90%;
  margin: .9rem 0;
}

.xui-dark-mode .mx-section .sidebar ul li a {
  color: #FFFFFF;
}

.mx-section .content,
.mx-dashboard-loader {
  width: -webkit-calc(100% - var(--sidebar));
  width: -moz-calc(100% - var(--sidebar));
  width: -o-calc(100% - var(--sidebar));
  width: calc(100% - var(--sidebar));
  height: inherit;
  position: absolute;
  overflow-y: auto;
  top: 0;
  left: var(--sidebar);
}

.mx-more {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.mx-dashboard-loader {
  position: fixed;
  height: calc(100vh - var(--navbar));
  top: var(--navbar);
  right: 0;
}

.mx-dashboard-splitted {
  width: 100%;
  position: relative;
}

.mx-dashboard-splitted .mx-left {
  width: -webkit-calc(100% - 325px);
  width: -moz-calc(100% - 325px);
  width: -o-calc(100% - 325px);
  width: calc(100% - 325px);
}

.mx-dashboard-splitted .mx-right {
  width: 325px;position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.mx-sticky-right-bar {
  position: -webkit-sticky;
  position: sticky;
  z-index: 10;
  top: var(--navbar);
  align-self: flex-start;
}

.mx-tick-options .mx-tick-option {
  font-size: 90%;
  padding: 1rem 2rem;
  border: 1px solid #000000;
  display: inline-block;
  margin: .2rem;
  cursor: pointer;
}

.mx-tick-options .mx-tick-option:first-child {
  margin-left: 0;
}

.mx-tick-options .mx-tick-option:last-child {
  margin-right: 0;
}

.xui-dark-mode .mx-tick-options .mx-tick-option {
  border-color: #FFFFFF;
}

.mx-tick-options .mx-tick-option.active {
  background-color: #000000;
  color: #FFFFFF;
}

.xui-dark-mode .mx-tick-options .mx-tick-option.active {
  color: #000000;
  background-color: #FFFFFF;
}

.xui-dark-mode .mx-table tr:hover {
  background-color: #080808;
}

.mx-div-action {
  width: -webkit-calc(100% - 50px);
  width: -moz-calc(100% - 50px);
  width: -o-calc(100% - 50px);
  width: calc(100% - 50px);
}

.mx-invisible-input {
  background-color: transparent;
  color: inherit;
  border: none;
  outline: none;
}

.mx-invisible-input::selection {
  background-color: transparent;
  color: inherit;
  border: none;
}

.mx-table tr:hover {
  background-color: #F8F8F8;
}

@keyframes loadbar {
0%,to { left: 0; right: 80% }
25%,75% { left: 0; right: 0 }
50% { left: 80%; right: 0 }
}

.gg-loadbar,
.gg-loadbar::before {
display: block;
box-sizing: border-box;
height: 4px
}

.gg-loadbar {
position: relative;
transform: scale(var(--ggs,1));
width: 18px;
margin: 5px 0;
}

.gg-loadbar::before {
content: "";
position: absolute;
border-radius: 4px;
background: currentColor;
animation: loadbar 2s cubic-bezier(0,0,.58,1) infinite
}

.gg-spinner {
transform: scale(var(--ggs,1))
}

.gg-spinner,
.gg-spinner::after,
.gg-spinner::before {
box-sizing: border-box;
position: relative;
display: block;
width: 50px;
height: 50px
}

.gg-spinner::after,
.gg-spinner::before {
content: "";
position: absolute;
border-radius: 100px
}

.gg-spinner::before {
animation: spinner 1s
cubic-bezier(.6,0,.4,1) infinite;
border: 3px solid transparent;
border-top-color: currentColor
}

.gg-spinner::after {
border: 3px solid;
opacity: .2
}

@keyframes spinner {
0% { transform: rotate(0deg) }
to { transform: rotate(359deg) }
}

/* Phone Devices */
@media (max-width: 767px) {

  .mx-more {
    display: inline;
  }

  .mx-new-toggle .xui-toggle-switch {
    display: none;
  }

  .mx-nav-icons {
    display: none;
  }

  .mx-new-toggle .mx-nav-icons {
    display: inline-block;
  }

}

/* Tablet Devices */
@media (max-width: 820px) {

  .mx-section .sidebar {
    transition: .2s;
    left: -100%;
    background-color: var(--primary);
    z-index: 10;
  }

  .mx-section .sidebar.active {
    left: 0;
  }

  .mx-section .sidebar ul li a {
    color: #FFFFFF;
  }

  .mx-section .sidebar ul li.active a {
    background-color: #ffffff;
    color: var(--primary);
  }

  .mx-switch {
    transition: .2s;
  }

  .mx-section .content,
  .mx-dashboard-loader {
    width: 100%;
    left: 0;
  }

  .mx-dashboard-splitted .mx-left {
    width: 100%;
  }

  .mx-dashboard-splitted .mx-right {
    display: none;
  }

}