:root *,
:root::after,
:root::before {
    --primary: #3B71CA;
    --secondary: #9FA6B2;
    --success: #14A44D;
    --danger: #DC4C64;
    --warning: #E4A11B;
    --info: #54B4D3;
    --light: #FBFBFB;
    --dark: #332D2D;

    --violet: #6f42c1;
    --indigo: #3f51b5;
    --blue: #2196f3;
    --green: #4caf50;
    --yellow: #ffeb3b;
    --orange: #ff9800;
    --red: #f44336;
    --black: #000;

    --main-color: #00ADDD;
    --link-color: #3b71ca;
    --link-hover: #386bc0;
    --gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0));

    --white: #fff;
    --grey: #757575;
    --body-color: #354050;
    --bg-body: rgb(0 0 0 / 8%);
    --border: #d7dae3;
    --bg-header: #E6E9F4;
    --bg-menu: #F5F6FA;
    --placeholder: var(--grey);
    --thover: rgb(55 73 72 / 2%);
    --tooltip: var(--white);
    --border-left: #9086b5;
    --bg-grey: #f9f9f9;
    --heading: #f1f0fa;
    --textbox: #bdbdbd;

    --bg-primary: #dfe7f6;
    --bg-secondary: #ebedef;
    --bg-success: #d6f0e0;
    --bg-danger: #f9e1e5;
    --bg-warning: #fbf0da;
    --bg-info: #f1faff;
}

/* ------------------------- Background Colors -------------------------- */
.bg-white {
    background-color: var(--white);
    background: var(--white);
}

.bg-grey {
    background: var(--gre);
}

.bg-light,
.bg-default {
    background: var(--thover);
}

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

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

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

.bg-danger {
    background-color: var(--bg-danger) !important;
}

.bg-warning {
    background-color: var(--bg-warning) !important;
}

.bg-info {
    background-color: var(--bg-info) !important;
}

/* ------------------------- Opacity -------------------------- */
.opacity-1 {
    opacity: 10%;
}

.opacity-2 {
    opacity: 20%;
}

.opacity-3 {
    opacity: 30%;
}

.opacity-4 {
    opacity: 40%;
}

.opacity-5 {
    opacity: 50%;
}

.opacity-6 {
    opacity: 60%;
}

.opacity-7 {
    opacity: 70%;
}

.opacity-8 {
    opacity: 80%;
}

.opacity-9 {
    opacity: 90%;
}

.opacity-100 {
    opacity: 100%;
}