:root {
    --color-primary: #3761E9;
    --color-primary--opacity-35: #3761E959;
    --color-primary--opacity-10: #3761E91a;

    --color-text: #55555A;
    --color-heading: #333338;
    --color-secondary: #919BB6;

    --color-border: #E6E9F2;
    --color-background: #FFFFFF;
    --color-background--hover: #F3F4F9;
    --color-input-background: #F3F4F9;

    /** deprecated */

    --color-primary--hover: #1C4ADE;
    --color-primary--contrast: rgb(43 54 67 / 61%);

    --color-accent: #36c6d3;
    --color-blue--light: #768fff;
    --color-blue: #0052cc;
    --color-blue--dark: #0039cb;
    --color-purple--light: #9d46ff;
    --color-purple: #6200ea;
    --color-purple--dark: #0a00b6;
    --color-red--light: #ff6f60;
    --color-red: #FF7188;
    --color-red--dark: #ab000d;
    --color-grey--light: #F8F9FD;
    --color-grey: #b0bec5;
    --color-grey--dark: #808e95;
    --color-green--light: #bef67a;
    --color-green: #16CFAE;
    --color-green--dark: #5a9216;
    --color-yellow--light: #ffff6b;
    --color-yellow: #fdd835;
    --color-yellow--dark: #c6a700;

    --color-top-panel--dark:  #26263E;
    --color-sidebar--dark:  #373752;
    --color-header--dark:  #565676;
    --color-page-content--dark:  #757b90;

    --color-icons-grey: #97A3B0;

    --color-text-light: #55555A;
    --color-text-light-1: #97A3B0;

    --color-bg-gray: #F3F4F9;

    --color-mobile-input-border: #97A3B059;
    --color-stroke-dark: #D6DBE5;
}

:root[data-theme="dark"] {
    --color-primary: #4E70F2;
    --color-primary--opacity-35: #4E70F259;

    --color-text: #FFFFFFA3;
    --color-heading: #FFFFFF;

    --color-border: #E6E9F226;
    --color-background: #1E2029;
    --color-background--hover: #E6E9F226;
    --color-input-background: #919BB626;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}
.text-secondary {
    color: var(--color-secondary) !important;
}
.bg-white {
    background-color: var(--color-bg) !important;
}


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

.flw-color--primary {
    background-color: var(--color-primary) !important;
}

.flw-color-text--accent {
    color: var(--color-accent) !important;
}

.flw-color--accent {
    background-color: var(--color-accent) !important;
}

.flw-color-text--blue {
    color: var(--color-blue) !important;
}

.flw-color--blue {
    background-color: var(--color-blue) !important;
}

.flw-color-text--blue-light {
    color: var(--color-blue--light) !important;
}

.flw-color--blue-light {
    background-color: var(--color-blue--light) !important;
}

.flw-color-text--blue-dark {
    color: var(--color-blue--dark) !important;
}

.flw-color--blue-dark {
    background-color: var(--color-blue--dark) !important;
}

.flw-color-text--purple {
    color: var(--color-purple) !important;
}

.flw-color--purple {
    background-color: var(--color-purple) !important;
}

    .flw-color-text--purple-light {
    color: var(--color-purple--light) !important;
}

.flw-color--purple-light {
    background-color: var(--color-purple--light) !important;
}

.flw-color-text--purple-dark {
    color: var(--color-purple--dark) !important;
}

.flw-color--purple-dark {
    background-color: var(--color-purple--dark) !important;
}

.flw-color-text--red {
    color: var(--color-red) !important;
}

.flw-color--red {
    background-color: var(--color-red) !important;
}

.flw-color-text--red-light {
    color: var(--color-red--light) !important;
}

.flw-color--red-light {
    background-color: var(--color-red--light) !important;
}

.flw-color-text--red-dark {
    color: var(--color-red--dark) !important;
}

.flw-color--red-dark {
    background-color: var(--color-red--dark) !important;
}

.flw-color-text--grey {
    color: var(--color-grey) !important;
}

.flw-color--grey {
    background-color: var(--color-grey) !important;
}

.flw-color-text--grey-light {
    color: var(--color-grey--light) !important;
}

.flw-color--grey-light {
    background-color: var(--color-grey--light) !important;
}

.flw-color-text--grey-dark {
    color: var(--color-grey--dark) !important;
}

.flw-color--grey-dark {
    background-color: var(--color-grey--dark) !important;
}

.flw-color-text--green {
    color: var(--color-green) !important;
}

.flw-color--green {
    background-color: var(--color-green) !important;
}

.flw-color-text--green-light {
    color: var(--color-green--light) !important;
}

.flw-color--green-light {
    background-color: var(--color-green--light) !important;
}

.flw-color-text--green-dark {
    color: var(--color-green--dark) !important;
}

.flw-color--green-dark {
    background-color: var(--color-green--dark) !important;
}

.flw-color-text--yellow {
    color: var(--color-yellow) !important;
}

.flw-color--yellow {
    background-color: var(--color-yellow) !important;
}

.flw-color-text--yellow-light {
    color: var(--color-yellow--light) !important;
}

.flw-color--yellow-light {
    background-color: var(--color-yellow--light) !important;
}

.flw-color-text--yellow-dark {
    color: var(--color-yellow--dark) !important;
}

.flw-color--yellow-dark {
    background-color: var(--color-yellow--dark) !important;
}