:root {
    --font-base-size: 14px;
    --font-size-base: 1em;
    --font-size-h5: 1.25em;
    --font-size-h4: 1.56em;
    --font-size-h3: 1.95em;
    --font-size-h2: 2.44em;
    --font-size-h1: 3.05em;
    --font-size-caption: 0.8em;
    --font-size-small: 0.64em;
    --font-line-height-base: 1.65;
    --font-line-height-heading: 1.15;
    --main-font-family: 'Inter', sans-serif;
    --main-color: #7f56d9;
    --main-hover: #6941c6;
    --warning-color: #facc15;
    --error-color: #ef4444;
    --error-bg: #fee2e2;
    --success-color: #10b981;
    --info-color: #38bdf8;
    --text-color: #1e1e1e;
    --background-color: #f9fafb;
    --secondary-accent: #e9d7fe;
    --border-color: #e5e7eb;
    --dark-bg: #2d2a55;
    --btn-primary-bg: #7f56d9;
    --btn-primary-hover: #6941c6;
    --btn-primary-active: #005ac1;
    --btn-primary-text: #ffffff;
    --btn-primary-border: transparent;
    --btn-secondary-bg: #f3f4f6;
    --btn-secondary-text: #1e1e1e;
    --btn-secondary-hover: #e5e7eb;
    --btn-outline-border: #7f56d9;
    --btn-outline-text: #7f56d9;
    --btn-outline-hover-bg: #f4ebff;
    --bg-default: #ffffff;
    --text-default: #1e1e1e;

    /*    radzen veriable changes*/

    --rz-panel-menu-item-border-radius: 8px !important;
    --rz-on-primary-lighter: #7F56D9 !important;
}

body {
    font-family: var(--main-font-family) !important;
    font-size: var(--font-size-base) !important;
    /*    background-color: var(--rz-base) !important; 
    color: var(--rz-on-base) !important;*/
}

.form-control {
    font-size: var(--font-size-base) !important;
}

.btn-primary {
    background: var(--btn-primary-bg) !important;
    font-size: var(--font-size-base) !important;
}

    .btn-primary:hover {
        background: var(--btn-primary-hover) !important;
    }

.error-message {
    color: red;
}

h1 {
    font-size: var(--font-size-h1) !important;
}

h2 {
    font-size: var(--font-size-h2) !important;
}

h3 {
    font-size: var(--font-size-h3) !important;
}

h4 {
    font-size: var(--font-size-h4) !important;
}

h5 {
    font-size: var(--font-size-h5) !important;
}

h6 {
    font-size: var(--font-size-base) !important;
}

p {
    font-size: var(--font-size-base) !important;
}

.linear-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: #e0e0e0;
    z-index: 9999;
    overflow: hidden;
}

    .linear-progress-bar .indeterminate {
        height: 100%;
        width: 100%;
        background: linear-gradient(to right, #007bff 30%, transparent 0%);
        background-size: 200% 100%;
        animation: loading-bar 1.5s linear infinite;
    }

@keyframes loading-bar {
    from {
        background-position: -200% 0;
    }

    to {
        background-position: 200% 0;
    }
}

.e-sidebar {
    background-color: var(--rz-base) !important;
}

.e-text {
    color: var(--rz-on-base) !important;
}