:root {
    --color-accent: #0d8ee5;
    --color-secondary: #097bc7;
    --color-dark: #38A5EF;

    --color-black: #000000;

    --color-dashboard-body: #f6f9fc;
    --color-menu-item-hover: #ddedf8b8;
    --color-menu-item-red-hover: #f7e8e6;
    --color-menu-item-selected: #cceaff8f;
    --color-text-clickable: #4c5f7f;
    --color-toolbar: transparent;
    --color-nav-bar: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-highlight: #000000;
    --color-status-bar: #FFFFFF;
    --color-button-text: #FFFFFF;
    --color-border: #d2d2d2;
    --color-line: #EFEFEF;
    --color-message-input: #FFFFFF;
    --color-select-slide-background: #CCC;
    --color-select-slide-item: #FFFFFF;
    --color-round-button: var(--color-accent);
    --color-round-button-hover: var(--color-dark);
    --color-border-2: #d0d1d2;
    --color-border-3: #c7c7c7;
    --color-border-4: #d0d1d2;
    --color-border-5: #e2e2e2;
    --color-round-button-text: #FFFFFF;
    --color-nav-bar-text: #9c9c9c;
    --color-index-second-surface: #f5f5f5;
    --color-gray-button: #444444;
    --color-surface-2: #FFFFFF;
    --color-side-bar: rgb(210, 210, 210);
    --color-red: #c02a25;
}