/* Default colors */
:root {
    --color-theme-1: 27 27 27;
    --color-theme-2: 13 13 13;
    /* --color-primary: 54 84 141; */
    --color-primary: 63 99 166;
    --color-secondary: 226 232 240;
    --color-success: 13 148 136;
    --color-info: 8 145 178;
    --color-warning: 202 138 4;
    --color-pending: 194 65 12;
    --color-danger: 185 28 28;
    --color-light: 241 245 249;
    --color-dark: 30 41 59;
    --color-darkmode-50: 87 103 132;
    --color-darkmode-100: 74 90 121;
    --color-darkmode-200: 65 81 114;
    --color-darkmode-300: 53 69 103;
    --color-darkmode-400: 48 61 93;
    --color-darkmode-500: 41 53 82;
    --color-darkmode-600: 40 51 78;
    --color-darkmode-700: 35 45 69;
    --color-darkmode-800: 27 37 59;
    --color-darkmode-900: 15 23 42;

    --color-bg: 241 245 249;
    --body-bg: rgb(var(--color-bg));

    /* z-indexes */
    --z-index-loader: 2;
    --z-index-header: 3;
    --z-index-backdrop: 4;
    --z-index-menu: 5;

    /* header */
    --header-h: 62px;
    --header-bg: rgb(255 255 255 / 1.0);
    --header-brand-color: rgb(71 85 105 / 1.0);
    --header-menu-toggler-color: rgb(71 85 105 / 0.75);
    --header-menu-toggler-hover: rgb(71 85 105 / 0.1);
    --header-breadcrumbs-color: rgb(71 85 105 / 0.85);
    --header-greetings-color: rgb(71 85 105 / 1.0);
    --header-dropdown-item-hover-color: rgb(var(--color-primary));
    
    /* menu */
    --menu-w: 280px;
    --menu-collapsed-w: 90px;
    --menu-bg: linear-gradient(to bottom, rgb(var(--color-theme-1) / 1.0),rgb(var(--color-theme-2) / 1.0));
    --menu-hover-bg: var(--menu-bg);
    --menu-brand-color: rgba(255, 255, 255, 0.9);
    --menu-bg-image-opacity: 0.15;

    --menu-header-color: rgb(255 255 255 / .5);
    --menu-divider-color: rgb(255 255 255 / 0.15);
    --menu-rightline-color: rgb(255 255 255 / 0.15);

    --menu-entry-color: rgb(255 255 255 / .7);
    --menu-entry-bg: transparent;
    --menu-entry-active-color: rgb(255 255 255 / 1.0);
    --menu-entry-active-bg: rgb(255 255 255 / .1);
    --menu-entry-hover-color: rgb(255 255 255 / .85);
    --menu-entry-hover-bg: rgb(255 255 255 / .1);

    --menu-items-bg: rgb(255 255 255 / .05);
    --menu-collapsed-items-border: 1px dotted var(--menu-divider-color);
    --menu-collapsed-items-bg: transparent;
    --menu-collapsed-pulse-color: #e4e6ef;

    --menu-item-color: var(--menu-entry-color);
    --menu-item-active: var(--menu-entry-active-color);
    --menu-item-hover: var(--menu-entry-hover-color);
    
    --menu-transition: .3s cubic-bezier(.4,0,.2,1);
    /* --menu-dismiss-backdrop-bg: rgb(32 37 42 / .5); */
    --menu-dismiss-backdrop-bg: rgb(0 0 0 / .65);

    --menu-mobile-w: 260px;
    --menu-mobile-close-btn-filter: invert(1);
    --menu-mobile-bg: var(--menu-hover-bg);

    /* footer */
    --footer-bg: transparent;
    --footer-color: rgb(71 85 105 / .85);

    /* content */
    --filter-icon-color: rgba(0, 0, 0, 0.5);
    --table-header-color: rgb(var(--color-primary));
    --table-header-divider: rgb(var(--color-primary) / 0.65);
    --table-cell-color: var(--bs-body-color);
    --table-link-color: var(--table-cell-color);
    --table-link-hover-color: rgb(var(--color-primary));
    --table-action-color: rgb(var(--color-primary));
    --table-paginator-color: rgb(var(--color-primary));
    --table-details-row: rgba(var(--bs-primary-rgb), .1);
    --table-sortable-highlight: rgba(var(--bs-primary-rgb), .075);

    /* loader */
    --loader-bg: var(--body-bg);
    --spinner-color: rgb(var(--color-primary));
    --spinner-color2: rgb(var(--color-primary) / 0.2);

    /* scroll top */
    --scroll-top-color: rgb( 255 255 255 / .9);
    --scroll-top-bg: rgb(var(--color-primary) / .9);

    /* login */
    --login-footer-bg: transparent;
    --login-footer-color: rgba(255, 255, 255, .8);
}
.theme-1 {
    --color-theme-1: 54 84 141;
    --color-theme-2: 54 84 141;
    --menu-bg-image-opacity: 0.055;
}
.theme-2 {
    --color-theme-1: 0 102 102;
    --color-theme-2: 0 102 102;
    --menu-bg-image-opacity: 0.055;
}
.theme-3 {
    --color-theme-1: 77 89 102;
    --color-theme-2: 77 89 102;
    --menu-bg-image-opacity: 0.055;
}
@media screen and (min-width:1500px) {
    :root {
        --menu-w: 300px;
    }
}