:root {
    /* ===== Colors ===== */

    --main-body-color: #18191a;
    --card-color: #242526;
    --card-color2: #242526;
    --title-color: #16AAB2;
    --active-color: #383964;
    --link-active-color: #3471F3;
    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
    --body-color: #F0F1F4;
    --sidebar-color: rgba(29, 40, 53, 0.9);
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #000000;
    /* Table Color */

    --th-color: #383964;
    --th-text: var(--text-color);
    --table-main-row-color: #2a3a4c;
    --table-main-row-text-color: var(--text-color);
    --table-alt-row-color: #1d2835;
    --table-alt-row-text-color: var(--text-color);
    --auxiliary1-color: #3dd961;
    --auxiliary2-color: rgba(247, 178, 30, 1);
    --auxiliary3-color: rgba(48, 197, 255, 1);
    --sidebar-color: #383964;
    --sidebar-icon-color: #FDFDFF;
    --sidebar-icon-hover-color: #3471F3;
    --card-bg-transparent-color: #ffffff;
    --text-chart-color: #000000;
    --card-header-color: #000000;
    --modal-custom-bg-color: var(--sidebar-icon-color);
    --selection-link-color: #000000;
    --selection-link-hover-color: #FFFFFF;
    --text-white: #ffffff;
}


body.dark {
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
    /* Table Color */

    --th-color: #3a3a3a;
    --th-text: var(--text-color);
    --table-main-row-color: #333333;
    --table-main-row-text-color: var(--text-color);
    --table-alt-row-color: #393939;
    --table-alt-row-text-color: var(--text-color);
}