/**
 * COLOR PALETTE AND THEME HANDLING
 */

:root {

    /**
     * Establish Color Properties
     */

    --color-primary: rgba(3,156,167,1.0);
    --sf-color-primary-dark: rgba(3,156,167,1.0);
    --sf-color-primary: var(--color-primary);

    --color-secondary: rgba(80,117,139,1.0);
    --sf-color-secondary-dark: rgba(80,117,139,1.0);
    --sf-color-secondary: var(--color-secondary);

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

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

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

    --color-primary-dark: rgba(4,139,148,1.0);
    --sf-color-primary-dark-dark: rgba(4,139,148,1.0);
    --sf-color-primary-dark: var(--color-primary-dark);

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

    --color-danger: rgba(237,71,107,1.0);
    --sf-color-danger-dark: rgba(237,71,107,1.0);
    --sf-color-danger: var(--color-danger);

    --color-secondary-light: rgba(96,133,155,1.0);
    --sf-color-secondary-light-dark: rgba(96,133,155,1.0);
    --sf-color-secondary-light: var(--color-secondary-light);

    --color-overlay-light: rgba(0, 0, 0, 0.25);
    --sf-color-overlay-light-dark: rgba(0, 0, 0, 0.25);
    --sf-color-overlay-light: var(--color-overlay-light);

    --color-overlay-video: rgba(0, 0, 0, 0.65);
    --sf-color-overlay-video-dark: rgba(0, 0, 0, 0.65);
    --sf-color-overlay-video: var(--color-overlay-video);

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

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

    --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-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-tertiary-contrast: rgba(255,244,230,1.0);
    --sf-color-tertiary-contrast-dark: rgba(255,244,230,1.0);
    --sf-color-tertiary-contrast: var(--color-tertiary-contrast);

    --color-tertiary-light: rgba(255,240,219,1.0);
    --sf-color-tertiary-light-dark: rgba(255,240,219,1.0);
    --sf-color-tertiary-light: var(--color-tertiary-light);

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

    --color-radio-checked: rgba(45,165,219,1.0);
    --sf-color-radio-checked-dark: rgba(45,165,219,1.0);
    --sf-color-radio-checked: var(--color-radio-checked);

    --color-radio-unchecked: rgba(239,239,239,1.0);
    --sf-color-radio-unchecked-dark: rgba(239,239,239,1.0);
    --sf-color-radio-unchecked: var(--color-radio-unchecked);

    --color-toggle-checked: rgba(45,165,219,1.0);
    --sf-color-toggle-checked-dark: rgba(45,165,219,1.0);
    --sf-color-toggle-checked: var(--color-toggle-checked);

    --color-toggle-unchecked: rgba(239,239,239,1.0);
    --sf-color-toggle-unchecked-dark: rgba(239,239,239,1.0);
    --sf-color-toggle-unchecked: var(--color-toggle-unchecked);

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

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

    --color-select-caret: rgba(0,0,0,1.0);
    --sf-color-select-caret-dark: rgba(0,0,0,1.0);
    --sf-color-select-caret: var(--color-select-caret);

    --color-required-field-marker: rgba(237,71,107,1.0);
    --sf-color-required-field-marker-dark: rgba(237,71,107,1.0);
    --sf-color-required-field-marker: var(--color-required-field-marker);

    --color-input-placeholder: rgba(0, 0, 0, 0.35);
    --sf-color-input-placeholder-dark: rgba(0, 0, 0, 0.35);
    --sf-color-input-placeholder: var(--color-input-placeholder);

    --color-navigation-bar-line: rgba(0,0,0,0.15);
    --sf-color-navigation-bar-line-dark: rgba(0,0,0,0.15);
    --sf-color-navigation-bar-line: var(--color-navigation-bar-line);

    --color-navigation-hover-menu: rgba(0,81,122, 0.9);
    --sf-color-navigation-hover-menu-dark: rgba(0,81,122, 0.9);
    --sf-color-navigation-hover-menu: var(--color-navigation-hover-menu);

    --color-nav-bar: rgba(3,156,167,1.0);
    --sf-color-nav-bar-dark: rgba(3,156,167,1.0);
    --sf-color-nav-bar: var(--color-nav-bar);

    --color-cookie-banner: rgba(80, 117, 139, 0.8);
    --sf-color-cookie-banner-dark: rgba(80, 117, 139, 0.8);
    --sf-color-cookie-banner: var(--color-cookie-banner);

    --color-form-field-line: rgba(223,223,223,1.0);
    --sf-color-form-field-line-dark: rgba(223,223,223,1.0);
    --sf-color-form-field-line: var(--color-form-field-line);

    --color-buttons: rgba(45,165,219,1.0);
    --sf-color-buttons-dark: rgba(45,165,219,1.0);
    --sf-color-buttons: var(--color-buttons);

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

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

    --color-primary-light: rgba(225,246,248,1.0);
    --sf-color-primary-light-dark: rgba(225,246,248,1.0);
    --sf-color-primary-light: var(--color-primary-light);

    --color-quaternary: rgba(141,115,166,1.0);
    --sf-color-quaternary-dark: rgba(141,115,166,1.0);
    --sf-color-quaternary: var(--color-quaternary);

    --color-quaternary-contrast: rgba(253,247,255,1.0);
    --sf-color-quaternary-contrast-dark: rgba(253,247,255,1.0);
    --sf-color-quaternary-contrast: var(--color-quaternary-contrast);

    --color-quinary: rgba(0,140,194,1.0);
    --sf-color-quinary-dark: rgba(0,140,194,1.0);
    --sf-color-quinary: var(--color-quinary);

    --color-quinary-contrast: rgba(232,249,255,1.0);
    --sf-color-quinary-contrast-dark: rgba(232,249,255,1.0);
    --sf-color-quinary-contrast: var(--color-quinary-contrast);

    --color-secondary-translucent: rgba(80, 117, 139, 0.97);
    --sf-color-secondary-translucent-dark: rgba(80, 117, 139, 0.97);
    --sf-color-secondary-translucent: var(--color-secondary-translucent);

    /**
     * Set Default Color Values
     */

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

    --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-secondary);
    --button-hover-text-color: var(--sf-color-secondary-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-primary: rgba(3,156,167,1.0);
        --sf-color-primary-dark: rgba(3,156,167,1.0);
        --sf-color-primary: var(--color-primary);

        --color-secondary: rgba(80,117,139,1.0);
        --sf-color-secondary-dark: rgba(80,117,139,1.0);
        --sf-color-secondary: var(--color-secondary);

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

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

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

        --color-primary-dark: rgba(4,139,148,1.0);
        --sf-color-primary-dark-dark: rgba(4,139,148,1.0);
        --sf-color-primary-dark: var(--color-primary-dark);

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

        --color-danger: rgba(237,71,107,1.0);
        --sf-color-danger-dark: rgba(237,71,107,1.0);
        --sf-color-danger: var(--color-danger);

        --color-secondary-light: rgba(96,133,155,1.0);
        --sf-color-secondary-light-dark: rgba(96,133,155,1.0);
        --sf-color-secondary-light: var(--color-secondary-light);

        --color-overlay-light: rgba(0, 0, 0, 0.25);
        --sf-color-overlay-light-dark: rgba(0, 0, 0, 0.25);
        --sf-color-overlay-light: var(--color-overlay-light);

        --color-overlay-video: rgba(0, 0, 0, 0.65);
        --sf-color-overlay-video-dark: rgba(0, 0, 0, 0.65);
        --sf-color-overlay-video: var(--color-overlay-video);

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

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

        --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-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-tertiary-contrast: rgba(255,244,230,1.0);
        --sf-color-tertiary-contrast-dark: rgba(255,244,230,1.0);
        --sf-color-tertiary-contrast: var(--color-tertiary-contrast);

        --color-tertiary-light: rgba(255,240,219,1.0);
        --sf-color-tertiary-light-dark: rgba(255,240,219,1.0);
        --sf-color-tertiary-light: var(--color-tertiary-light);

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

        --color-radio-checked: rgba(45,165,219,1.0);
        --sf-color-radio-checked-dark: rgba(45,165,219,1.0);
        --sf-color-radio-checked: var(--color-radio-checked);

        --color-radio-unchecked: rgba(239,239,239,1.0);
        --sf-color-radio-unchecked-dark: rgba(239,239,239,1.0);
        --sf-color-radio-unchecked: var(--color-radio-unchecked);

        --color-toggle-checked: rgba(45,165,219,1.0);
        --sf-color-toggle-checked-dark: rgba(45,165,219,1.0);
        --sf-color-toggle-checked: var(--color-toggle-checked);

        --color-toggle-unchecked: rgba(239,239,239,1.0);
        --sf-color-toggle-unchecked-dark: rgba(239,239,239,1.0);
        --sf-color-toggle-unchecked: var(--color-toggle-unchecked);

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

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

        --color-select-caret: rgba(0,0,0,1.0);
        --sf-color-select-caret-dark: rgba(0,0,0,1.0);
        --sf-color-select-caret: var(--color-select-caret);

        --color-required-field-marker: rgba(237,71,107,1.0);
        --sf-color-required-field-marker-dark: rgba(237,71,107,1.0);
        --sf-color-required-field-marker: var(--color-required-field-marker);

        --color-input-placeholder: rgba(0, 0, 0, 0.35);
        --sf-color-input-placeholder-dark: rgba(0, 0, 0, 0.35);
        --sf-color-input-placeholder: var(--color-input-placeholder);

        --color-navigation-bar-line: rgba(0,0,0,0.15);
        --sf-color-navigation-bar-line-dark: rgba(0,0,0,0.15);
        --sf-color-navigation-bar-line: var(--color-navigation-bar-line);

        --color-navigation-hover-menu: rgba(0,81,122, 0.9);
        --sf-color-navigation-hover-menu-dark: rgba(0,81,122, 0.9);
        --sf-color-navigation-hover-menu: var(--color-navigation-hover-menu);

        --color-nav-bar: rgba(3,156,167,1.0);
        --sf-color-nav-bar-dark: rgba(3,156,167,1.0);
        --sf-color-nav-bar: var(--color-nav-bar);

        --color-cookie-banner: rgba(80, 117, 139, 0.8);
        --sf-color-cookie-banner-dark: rgba(80, 117, 139, 0.8);
        --sf-color-cookie-banner: var(--color-cookie-banner);

        --color-form-field-line: rgba(223,223,223,1.0);
        --sf-color-form-field-line-dark: rgba(223,223,223,1.0);
        --sf-color-form-field-line: var(--color-form-field-line);

        --color-buttons: rgba(45,165,219,1.0);
        --sf-color-buttons-dark: rgba(45,165,219,1.0);
        --sf-color-buttons: var(--color-buttons);

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

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

        --color-primary-light: rgba(225,246,248,1.0);
        --sf-color-primary-light-dark: rgba(225,246,248,1.0);
        --sf-color-primary-light: var(--color-primary-light);

        --color-quaternary: rgba(141,115,166,1.0);
        --sf-color-quaternary-dark: rgba(141,115,166,1.0);
        --sf-color-quaternary: var(--color-quaternary);

        --color-quaternary-contrast: rgba(253,247,255,1.0);
        --sf-color-quaternary-contrast-dark: rgba(253,247,255,1.0);
        --sf-color-quaternary-contrast: var(--color-quaternary-contrast);

        --color-quinary: rgba(0,140,194,1.0);
        --sf-color-quinary-dark: rgba(0,140,194,1.0);
        --sf-color-quinary: var(--color-quinary);

        --color-quinary-contrast: rgba(232,249,255,1.0);
        --sf-color-quinary-contrast-dark: rgba(232,249,255,1.0);
        --sf-color-quinary-contrast: var(--color-quinary-contrast);

        --color-secondary-translucent: rgba(80, 117, 139, 0.97);
        --sf-color-secondary-translucent-dark: rgba(80, 117, 139, 0.97);
        --sf-color-secondary-translucent: var(--color-secondary-translucent);

        /**
         * Set Default Color Values
         */

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

        --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-secondary);
        --button-hover-text-color: var(--sf-color-secondary-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-primary: var(--sf-color-primary-dark);
    --sf-color-secondary: var(--sf-color-secondary-dark);
    --sf-color-tertiary: var(--sf-color-tertiary-dark);
    --sf-color-black: var(--sf-color-black-dark);
    --sf-color-white: var(--sf-color-white-dark);
    --sf-color-primary-dark: var(--sf-color-primary-dark-dark);
    --sf-color-light: var(--sf-color-light-dark);
    --sf-color-danger: var(--sf-color-danger-dark);
    --sf-color-secondary-light: var(--sf-color-secondary-light-dark);
    --sf-color-overlay-light: var(--sf-color-overlay-light-dark);
    --sf-color-overlay-video: var(--sf-color-overlay-video-dark);
    --sf-color-always-white: var(--sf-color-always-white-dark);
    --sf-color-dark: var(--sf-color-dark-dark);
    --sf-color-primary-contrast: var(--sf-color-primary-contrast-dark);
    --sf-color-secondary-contrast: var(--sf-color-secondary-contrast-dark);
    --sf-color-tertiary-contrast: var(--sf-color-tertiary-contrast-dark);
    --sf-color-tertiary-light: var(--sf-color-tertiary-light-dark);
    --sf-color-input: var(--sf-color-input-dark);
    --sf-color-radio-checked: var(--sf-color-radio-checked-dark);
    --sf-color-radio-unchecked: var(--sf-color-radio-unchecked-dark);
    --sf-color-toggle-checked: var(--sf-color-toggle-checked-dark);
    --sf-color-toggle-unchecked: var(--sf-color-toggle-unchecked-dark);
    --sf-color-toggle-checked-contrast: var(--sf-color-toggle-checked-contrast-dark);
    --sf-color-radio-checked-contrast: var(--sf-color-radio-checked-contrast-dark);
    --sf-color-select-caret: var(--sf-color-select-caret-dark);
    --sf-color-required-field-marker: var(--sf-color-required-field-marker-dark);
    --sf-color-input-placeholder: var(--sf-color-input-placeholder-dark);
    --sf-color-navigation-bar-line: var(--sf-color-navigation-bar-line-dark);
    --sf-color-navigation-hover-menu: var(--sf-color-navigation-hover-menu-dark);
    --sf-color-nav-bar: var(--sf-color-nav-bar-dark);
    --sf-color-cookie-banner: var(--sf-color-cookie-banner-dark);
    --sf-color-form-field-line: var(--sf-color-form-field-line-dark);
    --sf-color-buttons: var(--sf-color-buttons-dark);
    --sf-color-buttons-contrast: var(--sf-color-buttons-contrast-dark);
    --sf-color-tertiary-light-contrast: var(--sf-color-tertiary-light-contrast-dark);
    --sf-color-primary-light: var(--sf-color-primary-light-dark);
    --sf-color-quaternary: var(--sf-color-quaternary-dark);
    --sf-color-quaternary-contrast: var(--sf-color-quaternary-contrast-dark);
    --sf-color-quinary: var(--sf-color-quinary-dark);
    --sf-color-quinary-contrast: var(--sf-color-quinary-contrast-dark);
    --sf-color-secondary-translucent: var(--sf-color-secondary-translucent-dark);

}

[dark-theme] [light-theme] {

    --color-primary: rgba(3,156,167,1.0);
        --sf-color-primary-dark: rgba(3,156,167,1.0);
        --sf-color-primary: var(--color-primary);

        --color-secondary: rgba(80,117,139,1.0);
        --sf-color-secondary-dark: rgba(80,117,139,1.0);
        --sf-color-secondary: var(--color-secondary);

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

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

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

        --color-primary-dark: rgba(4,139,148,1.0);
        --sf-color-primary-dark-dark: rgba(4,139,148,1.0);
        --sf-color-primary-dark: var(--color-primary-dark);

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

        --color-danger: rgba(237,71,107,1.0);
        --sf-color-danger-dark: rgba(237,71,107,1.0);
        --sf-color-danger: var(--color-danger);

        --color-secondary-light: rgba(96,133,155,1.0);
        --sf-color-secondary-light-dark: rgba(96,133,155,1.0);
        --sf-color-secondary-light: var(--color-secondary-light);

        --color-overlay-light: rgba(0, 0, 0, 0.25);
        --sf-color-overlay-light-dark: rgba(0, 0, 0, 0.25);
        --sf-color-overlay-light: var(--color-overlay-light);

        --color-overlay-video: rgba(0, 0, 0, 0.65);
        --sf-color-overlay-video-dark: rgba(0, 0, 0, 0.65);
        --sf-color-overlay-video: var(--color-overlay-video);

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

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

        --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-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-tertiary-contrast: rgba(255,244,230,1.0);
        --sf-color-tertiary-contrast-dark: rgba(255,244,230,1.0);
        --sf-color-tertiary-contrast: var(--color-tertiary-contrast);

        --color-tertiary-light: rgba(255,240,219,1.0);
        --sf-color-tertiary-light-dark: rgba(255,240,219,1.0);
        --sf-color-tertiary-light: var(--color-tertiary-light);

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

        --color-radio-checked: rgba(45,165,219,1.0);
        --sf-color-radio-checked-dark: rgba(45,165,219,1.0);
        --sf-color-radio-checked: var(--color-radio-checked);

        --color-radio-unchecked: rgba(239,239,239,1.0);
        --sf-color-radio-unchecked-dark: rgba(239,239,239,1.0);
        --sf-color-radio-unchecked: var(--color-radio-unchecked);

        --color-toggle-checked: rgba(45,165,219,1.0);
        --sf-color-toggle-checked-dark: rgba(45,165,219,1.0);
        --sf-color-toggle-checked: var(--color-toggle-checked);

        --color-toggle-unchecked: rgba(239,239,239,1.0);
        --sf-color-toggle-unchecked-dark: rgba(239,239,239,1.0);
        --sf-color-toggle-unchecked: var(--color-toggle-unchecked);

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

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

        --color-select-caret: rgba(0,0,0,1.0);
        --sf-color-select-caret-dark: rgba(0,0,0,1.0);
        --sf-color-select-caret: var(--color-select-caret);

        --color-required-field-marker: rgba(237,71,107,1.0);
        --sf-color-required-field-marker-dark: rgba(237,71,107,1.0);
        --sf-color-required-field-marker: var(--color-required-field-marker);

        --color-input-placeholder: rgba(0, 0, 0, 0.35);
        --sf-color-input-placeholder-dark: rgba(0, 0, 0, 0.35);
        --sf-color-input-placeholder: var(--color-input-placeholder);

        --color-navigation-bar-line: rgba(0,0,0,0.15);
        --sf-color-navigation-bar-line-dark: rgba(0,0,0,0.15);
        --sf-color-navigation-bar-line: var(--color-navigation-bar-line);

        --color-navigation-hover-menu: rgba(0,81,122, 0.9);
        --sf-color-navigation-hover-menu-dark: rgba(0,81,122, 0.9);
        --sf-color-navigation-hover-menu: var(--color-navigation-hover-menu);

        --color-nav-bar: rgba(3,156,167,1.0);
        --sf-color-nav-bar-dark: rgba(3,156,167,1.0);
        --sf-color-nav-bar: var(--color-nav-bar);

        --color-cookie-banner: rgba(80, 117, 139, 0.8);
        --sf-color-cookie-banner-dark: rgba(80, 117, 139, 0.8);
        --sf-color-cookie-banner: var(--color-cookie-banner);

        --color-form-field-line: rgba(223,223,223,1.0);
        --sf-color-form-field-line-dark: rgba(223,223,223,1.0);
        --sf-color-form-field-line: var(--color-form-field-line);

        --color-buttons: rgba(45,165,219,1.0);
        --sf-color-buttons-dark: rgba(45,165,219,1.0);
        --sf-color-buttons: var(--color-buttons);

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

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

        --color-primary-light: rgba(225,246,248,1.0);
        --sf-color-primary-light-dark: rgba(225,246,248,1.0);
        --sf-color-primary-light: var(--color-primary-light);

        --color-quaternary: rgba(141,115,166,1.0);
        --sf-color-quaternary-dark: rgba(141,115,166,1.0);
        --sf-color-quaternary: var(--color-quaternary);

        --color-quaternary-contrast: rgba(253,247,255,1.0);
        --sf-color-quaternary-contrast-dark: rgba(253,247,255,1.0);
        --sf-color-quaternary-contrast: var(--color-quaternary-contrast);

        --color-quinary: rgba(0,140,194,1.0);
        --sf-color-quinary-dark: rgba(0,140,194,1.0);
        --sf-color-quinary: var(--color-quinary);

        --color-quinary-contrast: rgba(232,249,255,1.0);
        --sf-color-quinary-contrast-dark: rgba(232,249,255,1.0);
        --sf-color-quinary-contrast: var(--color-quinary-contrast);

        --color-secondary-translucent: rgba(80, 117, 139, 0.97);
        --sf-color-secondary-translucent-dark: rgba(80, 117, 139, 0.97);
        --sf-color-secondary-translucent: var(--color-secondary-translucent);

    /**
         * Set Default Color Values
         */

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

        --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-secondary);
        --button-hover-text-color: var(--sf-color-secondary-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);
}