:root {
    --white: #fff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --black: #000;

    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #BD5D38;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;

    --myblue: #4285bf;

    --primary: var(--myblue);
    --secondary: var(--gray-600);
    --success: var(--green);
    --info: var(--cyan);
    --warning: var(--yellow);
    --danger: var(--red);
    --light: var(--gray-100);
    --dark: var(--gray-800);

    --sidebar-base-width: 300px;

    --itemsize: 500px;
    --timelinesize: calc(var(--itemsize) * 2 + 131px);

    --font-title: 'Vanilla';
    --background-filter: rgba(40, 20, 20, 0.2);

}