.blazor-theme {
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --color-empty: #32333d;
    --color-empty-contrast: rgb(191, 208, 216);
    --color-empty-hover: color-mix(in srgb, var(--color-empty) 30%, black);

    /* Primary */
    --color-primary: #594ae2;
    --color-primary-contrast: #fff;
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 30%, black);

    /* Secondary */
    --color-secondary: #ff4081;
    --color-secondary-contrast: #fff;
    --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 30%, black);

    /* Tertiary */
    --color-tertiary: #ffc107;
    --color-tertiary-contrast: #fff;
    --color-tertiary-hover: color-mix(in srgb, var(--color-tertiary) 30%, black);

    /* Additional Colors */
    --color-additional: #00bcd4;
    --color-additional-contrast: #fff;
    --color-additional-hover: color-mix(in srgb, var(--color-additional) 30%, black);

    /* Utility Colors */
    --color-info: #2196f3;
    --color-info-contrast: #fff;
    --color-info-hover: color-mix(in srgb, var(--color-info) 30%, black);

    --color-success: #4caf50;
    --color-success-contrast: #fff;
    --color-success-hover: color-mix(in srgb, var(--color-success) 30%, black);
    --color-warning: #ff9800;
    --color-warning-contrast: #fff;
    --color-warning-hover: color-mix(in srgb, var(--color-warning) 30%, black);

    --color-error: #f44336;
    --color-error-contrast: #fff;
    --color-error-hover: color-mix(in srgb, var(--color-error) 30%, black);
    /*Surface color*/
    --surface: #32333d;
    --surface-light: #fff;
    --surface-dark: #27272f;

    /*background-color: #e5e5f7;
    background-color: #e5e5f7;
opacity: 0.8;
background-image:  linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), 
linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), 
linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), 
linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), 
linear-gradient(60deg, var(--color-primary) 25%, transparent 25.5%, transparent 75%, var(--color-primary) 75%, var(--color-primary)), 
linear-gradient(60deg, var(--color-primary) 25%, transparent 25.5%, transparent 75%, var(--color-primary) 75%, var(--color-primary));
background-size: 20px 35px;
background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
opacity: 0.8;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #e5e5f7 10px ), repeating-linear-gradient( #444cf755, #444cf7 );*/

    /*Wrapped*/
    --app-background-size: none;
    --app-background-position: none;
    --app-background-image: none
        /*repeating-radial-gradient(circle at 0 0, transparent 0, var(--surface) 35px),
        repeating-linear-gradient(var(--color-primary), var(--surface))*/
    ;
    --app-background-color: #3e3878;
    /*color-mix(in srgb, var(--color-primary) 10%, black)*/
    ;

    --app-bars-background-size: none;
    --app-bars-background-position: none;
    --app-bars-background-image: none;
    --app-bars-background-color: var(--surface-dark);

    --paper-background-size: auto;
    --paper-background-position: auto;
    --paper-background-image: none
        /*repeating-radial-gradient(circle at 0 0, transparent 0, var(--surface) 35px),
        repeating-linear-gradient(var(--surface-dark), var(--surface))*/
    ;
    --paper-background-color: var(--surface);

    --paper-border-top-left-radius: 15px;
    --paper-border-top-right-radius: 15px;
    --paper-border-bottom-left-radius: 15px;
    --paper-border-bottom-right-radius: 15px;

    --paper-border-style: none;
    --paper-border-color: none;
}