html[data-skin="flat"] {
    --font-body: "Nunito", sans-serif;
    --font-secondary: "Nunito", sans-serif;

    --text-body: 0.875rem;
    --color-body-bg: #ffffff;

    --color-card: #fbfbfd;

    --color-primary: #1ab394;
    --color-secondary: #1c84c6;
    --color-success: #0acf97;
    --color-info: #23c6c8;
    --color-warning: #f8ac59;
    --color-danger: #ed5565;
    --color-purple: #7b70ef;
    --color-light: #eef2f7;
    --color-dark: #313a46;

    --color-primary-hover: #179f84;
    --color-secondary-hover: #1977b2;
    --color-success-hover: #09ba88;
    --color-info-hover: #20b2b4;
    --color-warning-hover: #e19950;
    --color-danger-hover: #d54d5b;
    --color-purple-hover: #6f65d7;
    --color-light-hover: #d6dbe0;
    --color-dark-hover: #2c3440;

    --shadow: 0px 1px 3px 0px rgba(130, 143, 163, 0.09);

    --color-default-300: #eef1f5;

    --font-weight-medium: 500;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;

    /* Menu items */
    --sidenav-item-icon-size:                  1.125rem;
    --sidenav-item-gap:                        12px;
    --sidenav-item-padding-x:                  10px;
    --sidenav-item-padding-y:                  10px;
    --sidenav-item-font-size:                  0.875rem;
    --sidenav-item-font-weight:                500;

    /* Sub Menu Items */
    --sidenav-sub-item-font-size:              0.875rem;
    --sidenav-sub-item-font-weight:            500;
    --sidenav-sub-item-gap:                    4px;
    --sidenav-sub-item-padding-x:              10px;
    --sidenav-sub-item-padding-y:              7px;

    /* Light left-sidebar */
    &[data-menu-color="light"] {
        --sidenav-bg: white;
        --sidenav-border-color: #edf2f9;
        --sidenav-item-color: #3c4241;
        --sidenav-item-hover-color:         #1ab394;
        --sidenav-item-hover-bg:          #f7f7fb;
        --sidenav-item-active-color:        #1ab394;
        --sidenav-item-active-bg:         #f7f7fb;
    }

    /* Gray left-sidebar */
    &[data-menu-color="gray"] {
        --sidenav-bg: #f1f2f7;
        --sidenav-border-color: #e7e9eb;
        --sidenav-item-color: var(--color-default-700);
        --sidenav-item-hover-color:         #1ab394;
        --sidenav-item-hover-bg:          #f4f0ff;
        --sidenav-item-active-color:        #212b29;
        --sidenav-item-active-bg:         #e8e8ed;
    }

    /* Dark Left Sidebar */
    &[data-menu-color="dark"] {
        --sidenav-bg:                     #1b2e4a;
        --sidenav-border-color:           #1b2e4a;
        --sidenav-item-color:             #8495ab;
        --sidenav-item-hover-color:       #bccee4;
        --sidenav-item-hover-bg:          #2f3742;
        --sidenav-item-active-color:      #ced6df;
        --sidenav-item-active-bg:         #243754;
    }

    /* Gradient Menu */
    &[data-menu-color="gradient"] {
        --sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
        --sidenav-border-color: null;
        --sidenav-item-color: #799cb7;
        --sidenav-item-hover-color: #bccee4;
        --sidenav-item-hover-bg: #2f3742;
        --sidenav-item-active-color: #cfdff1;
        --sidenav-item-active-bg: #294461;
    }

    /* Image Menu */
    &[data-menu-color="image"] {
        --sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("/images/sidenav-bg.jpg") center/cover no-repeat;
        --sidenav-border-color: null;
        --sidenav-item-color: #799cb7;
        --sidenav-item-hover-color: #bccee4;
        --sidenav-item-hover-bg: #2f3742;
        --sidenav-item-active-color: #cfdff1;
        --sidenav-item-active-bg: #1e3447;
    }

    /* Dark Mode */
    &[data-theme="dark"][data-menu-color="dark"],
    &[data-theme="dark"][data-menu-color="light"],
    &[data-theme="dark"][data-menu-color="light"] {
        --sidenav-bg: #1e1f27;
        --sidenav-border-color: #2c2d38;
        --sidenav-item-color: #8495ab;
        --sidenav-item-hover-color: #bccee4;
        --sidenav-item-hover-bg: #2f3742;
        --sidenav-item-active-color: #ced6df;
        --sidenav-item-active-bg: #22232c;
    }

    /* Light Topbar */
    &[data-topbar-color="light"] {
        --topbar-bg: #ffffff;
        --topbar-item-color: var(--color-default-700);
        --topbar-item-hover-color:          #1ab394;
        --topbar-search-bg:                 transparent;
        --topbar-search-border:           #e7e9eb;
    }

    /* Gray Topbar */
    &[data-topbar-color="gray"] {
        --topbar-bg: #f1f2f7;
        --topbar-item-color: var(--color-default-700);
        --topbar-item-hover-color:          #1ab394;
        --topbar-search-bg:               #e8e9ef;
        --topbar-search-border:           #e8e9ef;
    }

    /* Dark Topbar */
    &[data-topbar-color="dark"] {
        --topbar-bg:                      #1b2e4a;
        --topbar-item-color:              #adb5bf;
        --topbar-item-hover-color:        #e0eeff;
        --topbar-search-bg:               #32435c;
        --topbar-search-border:           #32435c;
    }

    /* Gradient Topbar */
    &[data-topbar-color="gradient"] {
        --topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
        --topbar-item-color: rgba(255, 255, 255, 0.7);
        --topbar-item-hover-color: #ffffff;
        --topbar-search-bg: rgba(255, 255, 255, 0.1);
        --topbar-search-border: rgba(255, 255, 255, 0.1);
    }

    /* Topbar (Dark Mode) */
    &[data-theme="dark"][data-topbar-color="dark"],
    &[data-theme="dark"][data-topbar-color="light"],
    &[data-theme="dark"][data-topbar-color="gray"] {
        --topbar-bg: #252630;
        --topbar-item-color: #adb5bf;
        --topbar-item-hover-color: #e0eeff;
        --topbar-search-bg: #2d2e3c;
        --topbar-search-border: #2d2e3c;
    }

    /* Chart Colors */
    --color-chart-primary: #1ab394;
    --color-chart-secondary: #1c84c6;
    --color-chart-alpha: #23c6c8;
    --color-chart-beta: #ed5565;
    --color-chart-gamma: #7b70ef;
    --color-chart-delta: #f8ac59;
    --color-chart-zeta: #ff679b;
    --color-chart-gray: #edeff3;
    --color-chart-dark: #1A57A1;
    --color-chart-border-color: #ecf4fc;
    --color-chart-title-color: #bbcae1;

    .card,
    .hs-dropdown-menu {
        border: 1px solid var(--color-default-300);
    }
}

html[data-theme="dark"][data-skin="flat"] {
    --color-body-bg: #17181e;
    --color-card: #1b1c22;

    --color-light: #17171b;
    
    --shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --color-default-300: #293036;

    --color-chart-gray: #40424f;
    --color-chart-border-color: #242c31;
}
