img {
    height: 30px !important;
    width: 100px !important;
}

:root {
    --font-ui: Open Sans,sans-serif !important;
    --color-canvas-100: #f3f5f7 !important;

    /* Humanforce brand colours */
    --hf-base: #3c479d;
    --hf-base-very-dark: #2a3270;
    --hf-base-dark: #323c85;
    --hf-base-light: #8b92c3;
    --hf-base-lighter: #c5c9e0;
    --hf-base-very-light: #e8e9f3;
    --hf-white: #ffffff;

    /* Override Stoplight colours */
    --color-primary: var(--hf-base) !important;
    --color-primary-darker: var(--hf-base-very-dark) !important;
    --color-primary-dark: var(--hf-base-dark) !important;
    --color-primary-light: var(--hf-base-light) !important;
    --color-primary-lighter: var(--hf-base-lighter) !important;
    --color-primary-lightest: var(--hf-base-very-light) !important;
    --color-primary-tint: var(--hf-base) !important;
    --color-on-primary: var(--hf-white) !important;
}

:root .sl-inverted,
[data-theme=light] .sl-inverted,
[data-theme=light] .sl-inverted .sl-inverted .sl-inverted {
    --color-canvas-300: var(--hf-base-light) !important;
    --color-primary: var(--hf-base) !important;
    --color-primary-darker: var(--hf-base-very-dark) !important;
    --color-primary-dark: var(--hf-base-dark) !important;
    --color-primary-light: var(--hf-base-light) !important;
    --color-primary-lighter: var(--hf-base-lighter) !important;
    --color-primary-lightest: var(--hf-base-very-light) !important;
    --color-primary-tint: var(--hf-base) !important;
    --color-on-primary: var(--hf-white) !important;
}

:root,
[data-theme=light],
[data-theme=light] .sl-inverted .sl-inverted,
[data-theme=light] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
    --color-primary: var(--hf-base) !important;
    --color-primary-darker: var(--hf-base-very-dark) !important;
    --color-primary-dark: var(--hf-base-dark) !important;
    --color-primary-light: var(--hf-base-light) !important;
    --color-primary-lighter: var(--hf-base-lighter) !important;
    --color-primary-lightest: var(--hf-base-very-light) !important;
    --color-primary-tint: var(--hf-base) !important;
    --color-canvas-200: var(--hf-base-very-light) !important;
    --color-canvas-300: var(--hf-base) !important;
    --color-on-primary: var(--hf-white) !important;
}

/* Improve sidebar text contrast */
.ElementsTableOfContentsItem .sl-bg-primary-tint,
.ElementsTableOfContentsItem .sl-bg-primary-tint .sl-text-base,
.ElementsTableOfContentsItem .sl-bg-primary-tint div,
.sl-bg-primary-tint,
.sl-bg-primary-tint div {
    color: var(--hf-white) !important;
}

.ElementsTableOfContentsItem:hover .sl-bg-primary-tint,
.ElementsTableOfContentsItem:hover .sl-bg-primary-tint div {
    color: var(--hf-base-very-light) !important;
}