@import url('https://fonts.googleapis.com/css?family=Inter:wght@100;200;300;400;500;600;700;800');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

:root,
:root[mode="md"],
:root[mode="ios"] {
    --zu-font-family: 'Inter';
    --zu-default-font: 'Inter';
    font-family: 'Inter';
    font-weight: 500;
}

/** Ionic CSS Variables **/
:root {
    /**
     * zupah colors
     */
    --zu-color-black: #000;
    --zu-color-black-reverse: #fff;

    --zu-color-dark: #222;
    --zu-color-dark-reverse: #fff;

    --zu-color-primary: #000000;
    --zu-color-primary-reverse: #fff;

    --zu-color-background: #fff;

    --zu-color-success-500: #22C55E;

    --zu-color-gray: #78829D;
    --zu-color-gray-light: #F1F1F4;

    --zu-color-gray-100: #F9F9F9;
    --zu-color-gray-200: #f9f9f9;
    --zu-color-gray-300: #e0e0e0;
    --zu-color-gray-400: #c7c7c7;
    --zu-color-gray-500: #aeaeae;
    --zu-color-gray-600: #959595;
    --zu-color-gray-700: #7c7c7c;
    --zu-color-gray-800: #636363;
    --zu-color-gray-900: #4a4a4a;
    --zu-color-gray-dark: #181818;


    --zu-color-neutral-50: #F9FAFB;
    --zu-color-neutral-100: #F3F4F6;
    --zu-color-neutral-200: #E5E7EB;
    --zu-color-neutral-300: #D1D5DB;
    --zu-color-neutral-400: #9CA3AF;
    --zu-color-neutral-500: #6B7280;
    --zu-color-neutral-600: #4B5563;
    --zu-color-neutral-700: #374151;
    --zu-color-neutral-800: #1F2937;
    --zu-color-neutral-900: #111827;


    --zu-color-success: #22c55e;
    --zu-color-success-light: #dcfce7;

    --zu-color-warning: #ff6600;
    --zu-color-warning-light: #ffcccc;

    --zu-color-info: #e2d7fa;
    --zu-color-info-light: #7239EA;

    --zu-color-alert: #cc9f00;
    --zu-color-alert-light: #fff3cc;

    --zu-color-danger: #ff0000;
    --zu-color-danger-light: #ffcccc;

    --zu-color-select: #0d6efd;
    --zu-color-border: #5D5C5C;
    --zu-color-border-primary: #0d6efd;
    /**
     * zupah shadow
     */
    --zu-shadow-primary: 0 0 0 .25rem rgba(13, 110, 253, .5);

    --zu-shadow-success: 0 0 0 4px rgba(34, 197, 94, 0.5);
    --zu-shadow-neutral-900: 0 0 0 4px rgba(6, 24, 40, 0.48);

    --zu-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --zu-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    --zu-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    --zu-text-shadow: 1px 1px #444;

    /**
     * zupah height
     */
    --zu-height-header: 65px;
    --zu-height-footer: 65px;
    --zu-height-footer-lg: 95px;
    --zu-height-body: calc(100% - 130px);
    --zu-height-body-lg: calc(100% - 155px);
    --zu-height-chat: calc(100% - 70px);
    --keyboard-height: calc(100% - 53px);
    --zu-height-atrib: 100%;


    /**
     * zupah top
     */
    --zu-top-footer: calc(100% - 60px);

    /** primary **/
    --zu-color-primary: #000000;
    --zu-color-primary-rgb: 0, 0, 255;
    --zu-color-primary-contrast: #ffffff;
    --zu-color-primary-contrast-rgb: 255, 255, 255;
    --zu-color-primary-shade: #0000e0;
    --zu-color-primary-tint: #1a1aff;

    /** secondary **/
    --zu-color-secondary: #3dc2ff;
    --zu-color-secondary-rgb: 61, 194, 255;
    --zu-color-secondary-contrast: #ffffff;
    --zu-color-secondary-contrast-rgb: 255, 255, 255;
    --zu-color-secondary-shade: #36abe0;
    --zu-color-secondary-tint: #50c8ff;

    /** tertiary **/
    --zu-color-tertiary: #5260ff;
    --zu-color-tertiary-rgb: 82, 96, 255;
    --zu-color-tertiary-contrast: #ffffff;
    --zu-color-tertiary-contrast-rgb: 255, 255, 255;
    --zu-color-tertiary-shade: #4854e0;
    --zu-color-tertiary-tint: #6370ff;

    /** success **/
    --zu-color-success: #2dd36f;
    --zu-color-success-rgb: 45, 211, 111;
    --zu-color-success-contrast: #ffffff;
    --zu-color-success-contrast-rgb: 255, 255, 255;
    --zu-color-success-shade: #28ba62;
    --zu-color-success-tint: #42d77d;

    /** warning **/
    --zu-color-warning: #ffc409;
    --zu-color-warning-rgb: 255, 196, 9;
    --zu-color-warning-contrast: #000000;
    --zu-color-warning-contrast-rgb: 0, 0, 0;
    --zu-color-warning-shade: #e0ac08;
    --zu-color-warning-tint: #ffca22;

    /** danger **/
    --zu-color-danger: #ff002e;
    --zu-color-danger-rgb: 235, 68, 90;
    --zu-color-danger-contrast: #ffffff;
    --zu-color-danger-contrast-rgb: 255, 255, 255;
    --zu-color-danger-shade: #cf3c4f;
    --zu-color-danger-tint: #ed576b;

    /** dark **/
    --zu-color-dark: #222428;
    --zu-color-dark-rgb: 34, 36, 40;
    --zu-color-dark-contrast: #ffffff;
    --zu-color-dark-contrast-rgb: 255, 255, 255;
    --zu-color-dark-shade: #1e2023;
    --zu-color-dark-tint: #383a3e;

    /** medium **/
    --zu-color-medium: #92949c;
    --zu-color-medium-rgb: 146, 148, 156;
    --zu-color-medium-contrast: #ffffff;
    --zu-color-medium-contrast-rgb: 255, 255, 255;
    --zu-color-medium-shade: #808289;
    --zu-color-medium-tint: #9d9fa6;
    --zu-color-medium-background: #D9D9D9;

    /** light **/
    --zu-color-light: #f4f5f8;
    --zu-color-light-rgb: 244, 245, 248;
    --zu-color-light-contrast: #000000;
    --zu-color-light-contrast-rgb: 0, 0, 0;
    --zu-color-light-shade: #d7d8da;
    --zu-color-light-tint: #f5f6f9;
}



:root {
    --bs-primary: var(--zu-color-primary);
    --bs-font-sans-serif: var(--zu-font-family);
    --bs-font-monospace: var(--zu-font-family);
}

body {
    background-color: #f9f9f9;
    font-family: var(--zu-font-family);
    font-weight: 500;
    font-style: normal;
    color: #888;
    overflow-x: hidden;
    font-size: 14px;
}