:root {
    /* base */
    --bg-primary: #000;
    --bg-card: #16181c;
    --border-color: #2f3336;
    --text-primary: #e7e9ea;
    --text-secondary: #adb4b8;
    --bg-input: #202327;
    /* trading */
    --color-profit: #099981;
    --color-loss: #f23645;
    --color-purple: #a78bda;
    --color-pink: #ff5c8a;
    --color-cyan: #2db6ea;
    --color-gold: #f3bc09;
    --color-gold-hover: #ffd54f;
    --color-gold-invest: #d6a609;
    --color-highlight: #0c6dfd;
    /* ema */
    --color-ema-9: #ec407a;
    --color-ema-21: #2402e8;
    --color-ema-55: #e88c0b;
    --color-ema-200: #e0e040;
    /* notification candles */
    --bg-candle-0: #2a2510;
    --border-candle-0: #e7b101;
    --bg-candle-odd: #23252a;
    --border-candle-odd: #44474e;
    /* trade */
    --bg-trade-live: #1e1535;
    --border-trade-live: #3a2a60;
    --bg-order-filled: #1a2a2a;
    --border-order-filled: #286f4b;
    --bg-order-pending: #2a1a1a;
    --border-order-pending: #763232;
    --bg-place-order: #2a2510;
    --border-place-order: #e7b101;
    /* misc */
    --bg-placeholder: #555;
    --color-white: #fff;
    --color-black: #000;
}

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

.profit {
    color: var(--color-profit) !important;
}

.loss {
    color: var(--color-loss) !important;
}

a {
    text-decoration: none;
}

.f-w-b {
    font-weight: bold;
}

.hide {
    display: none !important;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.link {
    text-decoration: none;
    font-weight: bold;
    color: var(--text-primary);
    margin-top: 5px;
}

.c-p {
    color: var(--color-purple) !important;
}

.c-l {
    color: var(--color-pink) !important;
}

.c-1 {
    color: var(--color-pink) !important;
}

.c-2 {
    color: var(--color-cyan) !important;
}

.c-f {
    color: var(--text-primary) !important;
    font-weight: bold;
}

.ema_9 {
    color: var(--color-ema-9) !important;
}

.ema_21 {
    color: var(--color-ema-21) !important;
}

.ema_55 {
    color: var(--color-ema-55) !important;
}

.ema_200 {
    color: var(--color-ema-200) !important;
}

.disable-selection {
    user-select: none;
}

.small-text-box span {
    background: var(--bg-card);
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--color-loss);
    font-size: 12px;
    display: flex;
    text-transform: uppercase;
}

.loading {
    animation: rotation 1s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/****************************************************************************
  Margin & Padding
*****************************************************************************/

.m-t-1 {
    margin-top: 1rem;
}

.m-b-1 {
    margin-bottom: 1rem;
}

.m-r-1 {
    margin-right: 1rem;
}

.m-l-1 {
    margin-left: 1rem;
}

/****************************************************************************
  Navigation
*****************************************************************************/
.side-navigation {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.side-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    margin-bottom: 0;
}

.side-navigation li {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: var(--color-purple);
    border: 1px solid var(--color-purple);
    margin: 0 2px;
}

.side-navigation a {
    display: block;
    padding: 8px 8px 6px;
    color: var(--color-white);
    transition: .1s ease-out padding;
}

.side-navigation li.active a {
    color: var(--color-black);
}