/* CACHED GENERATED CSS */

/**
 * COLOR PALETTE AND THEME HANDLING
 */

:root {

    /**
     * Establish Color Properties
     */

    --color-white: rgba(255,255,255,1.0);
    --sf-color-white-dark: rgba(0,0,0,1.0);
    --sf-color-white: var(--color-white);

    --color-black: rgba(0,0,0,1.0);
    --sf-color-black-dark: rgba(255,255,255,1.0);
    --sf-color-black: var(--color-black);

    --color-primary: rgba(0,168,235,1.0);
    --sf-color-primary-dark: rgba(26,142,189,1.0);
    --sf-color-primary: var(--color-primary);

    --color-secondary: rgba(0,153,204,1.0);
    --sf-color-secondary-dark: rgba(0,153,204,1.0);
    --sf-color-secondary: var(--color-secondary);

    --color-tertiary: rgba(204,204,204,1.0);
    --sf-color-tertiary-dark: rgba(115,68,135,1.0);
    --sf-color-tertiary: var(--color-tertiary);

    --color-text: rgba(0, 0, 0, 0.85);
    --sf-color-text-dark: rgba(255, 255, 255, 0.8);
    --sf-color-text: var(--color-text);

    --color-light: rgba(245,245,245,1.0);
    --sf-color-light-dark: rgba(21,21,21,1.0);
    --sf-color-light: var(--color-light);

    --color-secondary-contrast: rgba(255,255,255,1.0);
    --sf-color-secondary-contrast-dark: rgba(255,255,255,1.0);
    --sf-color-secondary-contrast: var(--color-secondary-contrast);

    --color-primary-contrast: rgba(255,255,255,1.0);
    --sf-color-primary-contrast-dark: rgba(255,255,255,1.0);
    --sf-color-primary-contrast: var(--color-primary-contrast);

    --color-tertiary-contrast: rgba(255,255,255,1.0);
    --sf-color-tertiary-contrast-dark: rgba(255,255,255,1.0);
    --sf-color-tertiary-contrast: var(--color-tertiary-contrast);

    --color-transparent: rgba(0,0,0,0);
    --sf-color-transparent-dark: rgba(0,0,0,0);
    --sf-color-transparent: var(--color-transparent);

    --color-button-hover-colour: rgba(0, 144, 210, 1);
    --sf-color-button-hover-colour-dark: rgba(115,68,135,1.0);
    --sf-color-button-hover-colour: var(--color-button-hover-colour);

    --color-quaternary: rgba(0,72,105,1.0);
    --sf-color-quaternary-dark: rgba(0,72,105,1.0);
    --sf-color-quaternary: var(--color-quaternary);

    --color-darken: rgba(0, 0, 0, 0.6);
    --sf-color-darken-dark: rgba(0, 0, 0, 0.5);
    --sf-color-darken: var(--color-darken);

    /**
     * Set Default Color Values
     */

    --background-color: var(--sf-color-light);
    --color: var(--sf-color-text);
    --bold-color: var(--sf-color-text);
    --anchor-color: var(--sf-color-primary);
    --anchor-hover-color: var(--sf-color-secondary);
    --heading-color: var(--sf-color-black);
    --accent-color: var(--sf-color-primary);

    --button-color: var(--sf-color-primary);
    --button-text-color: var(--sf-color-primary-contrast);
    --button-outline-color: var(--button-color);
    --button-hover-color: var(--sf-color-button-hover-colour);
    --button-hover-text-color: var(--sf-color-tertiary-contrast);
    --button-hover-outline-color: var(--button-outline-color);
}

/**
 * Establish Default Colors
 */

body {
    background-color: var(--background-color);
    color: var(--color);
}

strong, b {
    color: var(--bold-color);
}

h1, h2, h3, h4, h5, h6 {
    --anchor-color: var(--heading-color);
    color: var(--heading-color);
}

a:not([role="button"]) {
    color: var(--anchor-color);
}

a:not([role="button"]):hover {
    color: var(--anchor-hover-color);
}

button, a[role="button"], [sf-button], input[type="button"], input[type="submit"], input[type="cancel"] {
    background-color: var(--button-color);
    border-color: var(--button-outline-color);
    color: var(--button-text-color);
}

button:hover, a[role="button"]:hover, [sf-button]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="cancel"]:hover {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-outline-color);
    color: var(--button-hover-text-color);
}

/**
 * Detect dark mode change event and switch color palette
 */

@media (prefers-color-scheme: dark) {

    [auto-theme] {

        

    }

    [auto-theme] [light-theme] {

        --color-white: rgba(255,255,255,1.0);
        --sf-color-white-dark: rgba(0,0,0,1.0);
        --sf-color-white: var(--color-white);

        --color-black: rgba(0,0,0,1.0);
        --sf-color-black-dark: rgba(255,255,255,1.0);
        --sf-color-black: var(--color-black);

        --color-primary: rgba(0,168,235,1.0);
        --sf-color-primary-dark: rgba(26,142,189,1.0);
        --sf-color-primary: var(--color-primary);

        --color-secondary: rgba(0,153,204,1.0);
        --sf-color-secondary-dark: rgba(0,153,204,1.0);
        --sf-color-secondary: var(--color-secondary);

        --color-tertiary: rgba(204,204,204,1.0);
        --sf-color-tertiary-dark: rgba(115,68,135,1.0);
        --sf-color-tertiary: var(--color-tertiary);

        --color-text: rgba(0, 0, 0, 0.85);
        --sf-color-text-dark: rgba(255, 255, 255, 0.8);
        --sf-color-text: var(--color-text);

        --color-light: rgba(245,245,245,1.0);
        --sf-color-light-dark: rgba(21,21,21,1.0);
        --sf-color-light: var(--color-light);

        --color-secondary-contrast: rgba(255,255,255,1.0);
        --sf-color-secondary-contrast-dark: rgba(255,255,255,1.0);
        --sf-color-secondary-contrast: var(--color-secondary-contrast);

        --color-primary-contrast: rgba(255,255,255,1.0);
        --sf-color-primary-contrast-dark: rgba(255,255,255,1.0);
        --sf-color-primary-contrast: var(--color-primary-contrast);

        --color-tertiary-contrast: rgba(255,255,255,1.0);
        --sf-color-tertiary-contrast-dark: rgba(255,255,255,1.0);
        --sf-color-tertiary-contrast: var(--color-tertiary-contrast);

        --color-transparent: rgba(0,0,0,0);
        --sf-color-transparent-dark: rgba(0,0,0,0);
        --sf-color-transparent: var(--color-transparent);

        --color-button-hover-colour: rgba(0, 144, 210, 1);
        --sf-color-button-hover-colour-dark: rgba(115,68,135,1.0);
        --sf-color-button-hover-colour: var(--color-button-hover-colour);

        --color-quaternary: rgba(0,72,105,1.0);
        --sf-color-quaternary-dark: rgba(0,72,105,1.0);
        --sf-color-quaternary: var(--color-quaternary);

        --color-darken: rgba(0, 0, 0, 0.6);
        --sf-color-darken-dark: rgba(0, 0, 0, 0.5);
        --sf-color-darken: var(--color-darken);

        /**
         * Set Default Color Values
         */

        --background-color: var(--sf-color-light);
        --color: var(--sf-color-text);
        --bold-color: var(--sf-color-text);
        --anchor-color: var(--sf-color-primary);
        --anchor-hover-color: var(--sf-color-secondary);
        --heading-color: var(--sf-color-black);
        --accent-color: var(--sf-color-primary);

        --button-color: var(--sf-color-primary);
        --button-text-color: var(--sf-color-primary-contrast);
        --button-outline-color: var(--button-color);
        --button-hover-color: var(--sf-color-button-hover-colour);
        --button-hover-text-color: var(--sf-color-tertiary-contrast);
        --button-hover-outline-color: var(--button-outline-color);

        color: var(--color);

    }

    /**
     * Establish Default Colors
     */

    [auto-theme] [light-theme] strong,
    [auto-theme] [light-theme] b {
        color: var(--bold-color);
    }

    [auto-theme] [light-theme] h1, 
    [auto-theme] [light-theme] h2, 
    [auto-theme] [light-theme] h3, 
    [auto-theme] [light-theme] h4, 
    [auto-theme] [light-theme] h5, 
    [auto-theme] [light-theme] h6 {
        color: var(--heading-color);
    }

    [auto-theme] [light-theme] a:not([role="button"]) {
        color: var(--anchor-color);
    }

    [auto-theme] [light-theme] a:not([role="button"]):hover {
        color: var(--anchor-hover-color);
    }

    [auto-theme] [light-theme] button, 
    [auto-theme] [light-theme] a[role="button"], 
    [auto-theme] [light-theme] [sf-button], 
    [auto-theme] [light-theme] input[type="button"], 
    [auto-theme] [light-theme] input[type="submit"], 
    [auto-theme] [light-theme] input[type="cancel"] {
        background-color: var(--button-color);
        border-color: var(--button-outline-color);
        color: var(--button-text-color);
    }

    [auto-theme] [light-theme] button:hover, 
    [auto-theme] [light-theme] a[role="button"]:hover, 
    [auto-theme] [light-theme] [sf-button]:hover, 
    [auto-theme] [light-theme] input[type="button"]:hover, 
    [auto-theme] [light-theme] input[type="submit"]:hover, 
    [auto-theme] [light-theme] input[type="cancel"]:hover {
        background-color: var(--button-hover-color);
        border-color: var(--button-hover-outline-color);
        color: var(--button-hover-text-color);
    }

}

[dark-theme] {

    --sf-color-white: var(--sf-color-white-dark);
    --sf-color-black: var(--sf-color-black-dark);
    --sf-color-primary: var(--sf-color-primary-dark);
    --sf-color-secondary: var(--sf-color-secondary-dark);
    --sf-color-tertiary: var(--sf-color-tertiary-dark);
    --sf-color-text: var(--sf-color-text-dark);
    --sf-color-light: var(--sf-color-light-dark);
    --sf-color-secondary-contrast: var(--sf-color-secondary-contrast-dark);
    --sf-color-primary-contrast: var(--sf-color-primary-contrast-dark);
    --sf-color-tertiary-contrast: var(--sf-color-tertiary-contrast-dark);
    --sf-color-transparent: var(--sf-color-transparent-dark);
    --sf-color-button-hover-colour: var(--sf-color-button-hover-colour-dark);
    --sf-color-quaternary: var(--sf-color-quaternary-dark);
    --sf-color-darken: var(--sf-color-darken-dark);

}

[dark-theme] [light-theme] {

    --color-white: rgba(255,255,255,1.0);
        --sf-color-white-dark: rgba(0,0,0,1.0);
        --sf-color-white: var(--color-white);

        --color-black: rgba(0,0,0,1.0);
        --sf-color-black-dark: rgba(255,255,255,1.0);
        --sf-color-black: var(--color-black);

        --color-primary: rgba(0,168,235,1.0);
        --sf-color-primary-dark: rgba(26,142,189,1.0);
        --sf-color-primary: var(--color-primary);

        --color-secondary: rgba(0,153,204,1.0);
        --sf-color-secondary-dark: rgba(0,153,204,1.0);
        --sf-color-secondary: var(--color-secondary);

        --color-tertiary: rgba(204,204,204,1.0);
        --sf-color-tertiary-dark: rgba(115,68,135,1.0);
        --sf-color-tertiary: var(--color-tertiary);

        --color-text: rgba(0, 0, 0, 0.85);
        --sf-color-text-dark: rgba(255, 255, 255, 0.8);
        --sf-color-text: var(--color-text);

        --color-light: rgba(245,245,245,1.0);
        --sf-color-light-dark: rgba(21,21,21,1.0);
        --sf-color-light: var(--color-light);

        --color-secondary-contrast: rgba(255,255,255,1.0);
        --sf-color-secondary-contrast-dark: rgba(255,255,255,1.0);
        --sf-color-secondary-contrast: var(--color-secondary-contrast);

        --color-primary-contrast: rgba(255,255,255,1.0);
        --sf-color-primary-contrast-dark: rgba(255,255,255,1.0);
        --sf-color-primary-contrast: var(--color-primary-contrast);

        --color-tertiary-contrast: rgba(255,255,255,1.0);
        --sf-color-tertiary-contrast-dark: rgba(255,255,255,1.0);
        --sf-color-tertiary-contrast: var(--color-tertiary-contrast);

        --color-transparent: rgba(0,0,0,0);
        --sf-color-transparent-dark: rgba(0,0,0,0);
        --sf-color-transparent: var(--color-transparent);

        --color-button-hover-colour: rgba(0, 144, 210, 1);
        --sf-color-button-hover-colour-dark: rgba(115,68,135,1.0);
        --sf-color-button-hover-colour: var(--color-button-hover-colour);

        --color-quaternary: rgba(0,72,105,1.0);
        --sf-color-quaternary-dark: rgba(0,72,105,1.0);
        --sf-color-quaternary: var(--color-quaternary);

        --color-darken: rgba(0, 0, 0, 0.6);
        --sf-color-darken-dark: rgba(0, 0, 0, 0.5);
        --sf-color-darken: var(--color-darken);

    /**
         * Set Default Color Values
         */

        --background-color: var(--sf-color-light);
        --color: var(--sf-color-text);
        --bold-color: var(--sf-color-text);
        --anchor-color: var(--sf-color-primary);
        --anchor-hover-color: var(--sf-color-secondary);
        --heading-color: var(--sf-color-black);
        --accent-color: var(--sf-color-primary);

        --button-color: var(--sf-color-primary);
        --button-text-color: var(--sf-color-primary-contrast);
        --button-outline-color: var(--button-color);
        --button-hover-color: var(--sf-color-button-hover-colour);
        --button-hover-text-color: var(--sf-color-tertiary-contrast);
        --button-hover-outline-color: var(--button-outline-color);

    color: var(--color);

}

/**
 * Establish Default Colors
 */

[dark-theme] [light-theme] strong,
[dark-theme] [light-theme] b {
    color: var(--bold-color);
}

[dark-theme] [light-theme] h1, 
[dark-theme] [light-theme] h2, 
[dark-theme] [light-theme] h3, 
[dark-theme] [light-theme] h4, 
[dark-theme] [light-theme] h5, 
[dark-theme] [light-theme] h6 {
    color: var(--heading-color);
}

[dark-theme] [light-theme] a:not([role="button"]) {
    color: var(--anchor-color);
}

[dark-theme] [light-theme] a:not([role="button"]):hover {
    color: var(--anchor-hover-color);
}

[dark-theme] [light-theme] button, 
[dark-theme] [light-theme] a[role="button"], 
[dark-theme] [light-theme] [sf-button], 
[dark-theme] [light-theme] input[type="button"], 
[dark-theme] [light-theme] input[type="submit"], 
[dark-theme] [light-theme] input[type="cancel"] {
    background-color: var(--button-color);
    border-color: var(--button-outline-color);
    color: var(--button-text-color);
}

[dark-theme] [light-theme] button:hover, 
[dark-theme] [light-theme] a[role="button"]:hover, 
[dark-theme] [light-theme] [sf-button]:hover, 
[dark-theme] [light-theme] input[type="button"]:hover, 
[dark-theme] [light-theme] input[type="submit"]:hover, 
[dark-theme] [light-theme] input[type="cancel"]:hover {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-outline-color);
    color: var(--button-hover-text-color);
}