:root {
    /*
     * Define colour names here
     */
    --WHITE: white;

    --BLACK-h: 0;
    --BLACK-s: 0%;
    --BLACK-l: 17%;

    --BLACK-HEAVY: hsl(var(--BLACK-h),
            var(--BLACK-s),
            var(--BLACK-l));

    --BLACK-MID: hsl(var(--BLACK-h),
            var(--BLACK-s),
            calc(var(--BLACK-l) + 5%));

    --GRAY-h: 220;
    --GRAY-s: 16%;
    --GRAY-l: 71%;

    --GRAY-HEAVY: hsl(var(--GRAY-h),
            var(--GRAY-s),
            var(--GRAY-l));

    --GRAY-MID: hsl(var(--GRAY-h),
            var(--GRAY-s),
            calc(var(--GRAY-l) + 15%));

    --GRAY-LIGHT: hsl(var(--GRAY-h),
            var(--GRAY-s),
            calc(var(--GRAY-l) + 25%));

    --DARK-BLUE: rgb(27, 97, 143);


    --BACKGROUND: white;

    --SHADOW-ON-WHITE-h: 0;
    --SHADOW-ON-WHITE-s: 0%;
    --SHADOW-ON-WHITE-l: 45%;

    --SHADOW-ON-WHITE: hsl(var(--SHADOW-ON-WHITE-h),
            var(--SHADOW-ON-WHITE-s),
            var(--SHADOW-ON-WHITE-l));
    /* shadow colour when on the background property  */
    --SHADOW-ON-BACKGROUND: var(--SHADOW-ON-WHITE);

    --BUTTON-BORDER-COLOR: rgb(118, 118, 118);




    /**
     * Define all custom colours here. Use the above colours where required
     */
    /* tooltip.css */
    --tt-background-color: var(--GRAY-LIGHT);
    --tt-border-color: hsl(0, 0%, 90%);
    --tt-arrow-color: var(--GRAY-LIGHT);
    /* dropdown.css */
    --dd-selected-background-color: var(--GRAY-HEAVY);
    --dd-selected-color: black;
    --dd-hover-background-color: var(--GRAY-MID);
    --dd-hover-color: black;


    /* panel.css */
    --panel-header-background-color: var(--BLACK-HEAVY);
    --panel-header-text-color: var(--WHITE);
    --panel-header-border-color: #343a40;

    --panel-body-background-color: var(--WHITE);
    --panel-body-text-color: var(--BLACK-HEAVY);
    --panel-body-border-color: #d8d8d8;

    /* actionBar.css */
    --actionbar-main-background-color: var(--DARK-BLUE);
    --actionbar-main-text-color: white;
    --actionbar-main-border-color: #343a40;

    --actionbar-item-background-color-hover: rgb(31, 84, 127);
    --actionbar-item-text-color-disabled: rgb(193, 193, 193);

    /* crudHeader.css */
    --crudheader-main-background-color: var(--BLACK-HEAVY);
    --crudheader-main-text-color: var(--WHITE);
    --crudheader-main-border-color: #343a40;

    /* basicSearchModel.css */
    --basic-search-model-background-color: var(--GRAY-LIGHT);
    --basic-search-model-border-color: var(--GRAY-HEAVY);
    --basic-search-model-criteria-color: #636363;

    /* modelList.css */
    --model-list-background-color: var(--GRAY-MID);
    --model-list-border-color: var(--GRAY-HEAVY);
    --model-list-background-color-selected: #e6e2e2;

    --model-list-skeleton-item-color: #e6e2e2;

    /* documentSelectorLits.css */
    --document-selector-list-header-background-color: var(--BLACK-HEAVY);
    --document-selector-list-header-text-color: var(--WHITE);
    --document-selector-list-header-border-color: #343a40;

    /* LockIndicator.tsx */
    --lock-other-user: black;
    --lock-current-user: rgb(35, 160, 15);

}

/* Dark mode styles here please */
:root {}