body {
    /*Colours from Light to Dark 1 to n */
    /*Sizes from Small to Large 1 to n */
    /*Shades of grey*/
    --color-grey-1: #FFF;
    --color-grey-2: #F9F9F9;
    --color-grey-3: #F3F3F3;
    --color-grey-4: #ECECED;
    --color-grey-5: #CFCFD1;
    --color-grey-5-rgb: 207,207,209;
    --color-grey-6: #616268;
    --color-grey-7: #3C4652;
    --color-grey-8: #05060F;
    /*Text*/
    --text-color-grey-1: var(--color-grey-1);
    --text-color-grey-2: var(--color-grey-6);
    --text-color-grey-3: var(--color-grey-7);
    --text-color-grey-4: var(--color-grey-8);
    /*Background*/
    --background-color-1: var(--color-grey-1);
    --background-color-2: var(--color-grey-2);
    --background-color-3: var(--color-grey-3);
    --background-color-4: var(--color-grey-4);
    --background-color-5-rgb: var(--color-grey-5-rgb);
    /*Brand*/
    --primary-color: #B100FF;
    --primary-color-rgb: 177,0,255;
    --primary-color-dark: #5627FF;
    --primary-color-dark-rgb: 86,39,255;
    --primary-color-light: #DC8CFF;
    --primary-color-shadow: 0 0 0 0.25rem rgba(177, 0, 255,.25);
    --secondary-color: orange;
    --secondary-color-dark: dark-orange;
    /*Red*/
    --color-red: #dc3545;
    /*Dark theme colours*/
    --color-blue-dark: #090029;
    /*Lines*/
    --line-color: var(--color-grey-4);
    /*Border Radius*/
    --border-radius-1: 6px;
    --border-radius-2: 18px;
    /*-------------------------------------------*/
    /*Bootstrap Overrides*/
    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-color-dark);
    --bs-border-color: var(--line-color);
    --bs-secondary-rgb: var(--background-color-5-rgb);
    --bs-link-color-rgb: var(--primary-color-rgb);
    --bs-link-hover-color-rgb: var(--primary-color-dark-rgb);
    /*-------------------------------------------*/
    /*Radzen Overrides*/
    --rz-primary: var(--primary-color);
    --rz-primary-light: var(--primary-color-light);
    --rz-primary-dark: var(--primary-color-dark);
    --rz-button-hover-shadow: none;
    --rz-button-hover-gradient: none;
    --rz-on-primary: var(--text-color-grey-1);
    /*Radzen DataGrid*/
    --rz-dropdown-item-selected-background-color: var(--primary-color);
    --rz-dropdown-item-selected-hover-background-color: var(--primary-color-light);
    --rz-datepicker-calendar-hover-background-color: var(--primary-color-light);
    --rz-datepicker-calendar-selected-background-color: var(--primary-color);
    --rz-datepicker-calendar-selected-hover-background-color: var(--primary-color-light);
    --rz-grid-apply-filter-button-background-color: var(--primary-color);
    --rz-dropdown-item-hover-background-color: var(--primary-color-light);
    --rz-numeric-button-background-color: var(--background-color-4);
    --rz-grid-clear-filter-button-background-color: var(--background-color-4);
    --rz-grid-clear-filter-button-color: var(--text-color-grey-4);
}

body.dark {
    --color-grey-1: #05060F;
    --color-grey-2: #3C4652;
    --color-grey-3: #616268;
    --color-grey-4: #CFCFD1;
    --color-grey-5: #ECECED;
    --color-grey-6: #F3F3F3;
    --color-grey-7: #F9F9F9;
    --color-grey-8: #FFF;
    /*Text*/
    --text-color-grey-1: var(--color-grey-1);
    --text-color-grey-2: var(--color-grey-6);
    --text-color-grey-3: var(--color-grey-7);
    --text-color-grey-4: var(--color-grey-8);
    /*Background*/
    --background-color-1: var(--color-grey-1);
    --background-color-2: var(--color-grey-2);
    --background-color-3: var(--color-grey-3);
    --background-color-4: var(--color-grey-4);
    /*Lines*/
    --line-color: var(--color-grey-4);
    /*Modal*/
    --bs-modal-bg: var(--background-color-2);
}

/*Autocomplete*/
    body.dark .dropdown-menu {
        --bs-dropdown-bg: var(--background-color-2);
        --bs-dropdown-color: var(--text-color-grey-4);
        --bs-dropdown-link-color: var(--text-color-grey-4);
    }