@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('app.css');

/* =========================
   Global Variables
   ========================= */

:root {
    /*General*/
    --color-primary: #175191;
    --color-primary-dark: #144c8a;
    --color-primary-tint: #17519116;
    --color-secondary: #0ea2d8;
    --color-secondary-dark: #0e99cb;
    --color-secondary-tint: #0ea2d811;
    --logo-height: 4rem;
    --logo-bottom-space: 0rem;
    /*Navigation*/
    --color-nav-link-icon: var(--color-secondary);
    --color-nav-link: var(--color-primary);
    --color-bg-nav-link: transparent;
    --color-nav-link-icon-active: var(--color-secondary);
    --color-nav-link-active: var(--color-secondary);
    --color-bg-nav-link-active: var(--color-secondary-tint);
    --color-bg-nav-module: var(--color-surface);
    --logo-height: 3.5rem;
    --logo-bottom-space: 1rem;
    /*alerts*/
    --color-danger: #dc3545;
    --color-danger-tint: #fff7f8;
    --color-danger-border: #f1a5ad;
    --color-info: #146BE5;
    --color-info-tint: #146be515;
    --color-info-border: #146be550;
    --color-warning: #b67204;
    --color-warning-tint: #f8a52115;
    --color-warning-border: #f8a5214b;
    --color-success: #25BD66;
    --color-success-tint: #f2fff8;
    --color-success-border: #94dcb3;
    --color-link: var(--color-secondary);
    --color-link-hover: var(--color-secondary-dark);
    --color-spinner: #E31019;
    --color-switch-checked: var(--color-success);
    --color-bg-profile: #FBC900;
    --color-surface: #F9FBFF;
    /*Gray*/
    --color-gray-400: #111827;
    --color-gray-300: #495565;
    --color-gray-200: #8A929F;
    --color-gray-100: #AAB0BC;
    /*Table*/
    --color-header-table: var(--color-gray-200);
    --color-bg-header-table: var(--color-surface);
    --color-border-table: #EBF0F6;
    --color-bg-table-stripped: #FCFDFF;
    --color-bg-tr-selected: #fffbec;
    --color-bg-tr-hover: #f1feff;
    --color-table-td-icon: var(--color-gray-200);
    --color-table-td-icon-hover: var(--color-primary);
    --color-table-records-info: var(--color-gray-200);
    --color-bg-node-setting: var(--color-surface);
    /*Forms*/
    --color-border-input: #DDE1EA;
    --color-border-input-focus: #146be597;
    --color-bg-input-disabled: #f2f4f8;
    /* Typography */
    --font-family-base: "Poppins", sans-serif;
}

.badge-developer {
    background: var(--bs-red);
}

.badge-manager {
    background: var(--bs-indigo);
}

.badge-admin, .badge-administrator {
    background: var(--bs-teal);
}