body {
    /*Colors*/
    --PrimaryColor: #008094;
    --SecondaryColor: #004467;
    --TertiaryColor: #0095AD;
    /*Fonts*/
    --FontFamilyPrimary: "Montserrat", sans-serif;
    font-weight: 600;
    /*Header*/
    --HeaderLinkColour: #F2F2F2;
    --HeaderLinkBackground: var(--SecondaryColor);
    --HeaderLinkBorderRadius: 5px;
    --HeaderLinkHoverColour: white;
    --HeaderLinkTextDecoration: none;
    --HeaderBackground: var(--TertiaryColor);
    --HeaderLogoHeight: 50px;
    --HeaderURL: url(/site/SOLogo.png);
	--HeaderFontSize: 2.5rem;
    /*Footer*/
    --FooterUpperBackground: var(--SecondaryColor);
    --FooterLowerBackground: var(--PrimaryColor);
    --FooterLinkColour: white;
    --FooterBackground: var(--SecondaryColor);
    --FooterHeaderColour: white;
    --FooterCopyrightText: white;
    --FooterLogo: url(/site/SOLogo.png);
    --FooterLogoMaxHeight: 100px;
    --FooterLogoMaxWidth: 150px;
    /*Display Label*/
    --DisplayLabelColour: black;
    --DisplayLabelBackground: transparent;
    --DisplayLabelPadding: auto auto auto 5px;
    --DisplayLabelFontWeight: 600;
    /*Display Value*/
    --DisplayValueBackground: transparent;
    --DisplayValueColour: black;
    --DisplayValuePadding: auto;
    /*Display Grid Break*/
    --DisplayGridBreakHeight: 10px;
    --DisplayGridBreakMargin: 10px 0px;
    --DisplayGridBreakBackground: lightGray;
    /*Data Grid*/
    --DataGridDataRowBackgroundOdd: white;
    --DataGridDataRowBackground: color-mix(in srgb, var(--PrimaryColor) 10%, transparent);
	--DataGridTableHeaderBackground: white;
	--DataGridTableHeaderColour: black;
	--DataGridTableHeaderBorder: 0 solid black;
    --DataGridGroupHeaderBackground: var(--PrimaryColor);
    --DataGridGroupHeaderColour: white;
    /*TabPage Header*/
    --TabHeaderGap: 5px;
    --TabHeaderBackground: color-mix(in srgb, var(--SecondaryColor) 25%, transparent);
    --TabHeaderColour: var(--SecondaryColor);
    --TabHeaderPadding: 10px;
    --TabHeaderTextDecoration: none;
    --TabHeaderActiveBackground: #365c89;
    --TabHeaderActiveColour: white;
    --TabHeaderActiveTextDecoration: none;
    --TabHeaderHoverBackground: #365c89;
    --TabHeaderHoverColour: white;
    --TimelineColour: #365c89;
    --InputPrimaryBorder: 2px solid var(--SecondaryColor);
    --InputPrimaryColour: black;
    --InputPrimaryBackground: white;
    --InputCheckboxPrimaryBackgroundColour: var(--PrimaryColor);
    --InputCheckboxPrimaryBorder: 2px solid var(--PrimaryColor);
    --InputRadioPrimaryBackground: var(--PrimaryColor);
    --InputRadioPrimaryBorder: 2px solid var(--PrimaryColor);
    --InputFocusBackground: color-mix(in srgb, var(--PrimaryColor) 10%, white);
    /*Buttons*/
    --BtnPrimaryColour: white;
    --BtnPrimaryBackground: var(--PrimaryColor);
    --BtnPrimaryBorder: 1px solid var(--PrimaryColor);
    --BtnPrimaryHoverColour: white;
    --BtnPrimaryHoverBackground: var(--SecondaryColor);
    --BtnPrimaryHoverBorder: 1px solid var(--SecondaryColor);
    --BtnSecondaryColour: white;
    --BtnSecondaryBackground: var(--SecondaryColor);
    --BtnSecondaryBorder: 1px solid var(--PrimaryColor);
    --BtnSecondaryHoverColour: white;
    --BtnSecondaryHoverBackground: var(--PrimaryColor);
    --BtnSecondaryHoverBorder: 1px solid var(--PrimaryColor);
    --BtnBorderRadius: var(--BorderRadius);
    --BtnTransition: all 0.1s ease;
    --DetailsColour: white;
    --DetailsBackground: var(--PrimaryColor);
    --DetailsBorder: 1px solid var(--PrimaryColor);
    --LinkColour: var(--SecondaryColor);
    --LinkHoverColour: var(--PrimaryColor);
    --LinkTextDecoration: underline;
    --SearchPagerActiveBackground: var(--PrimaryColor);
    --SearchPagerActiveColour: white;
    --SearchPagerHoverBackground: var(--PrimaryColor);
    --SearchPagerHoverColour: white;
    /*Sectoion seperator*/
    --SectionSeparatorBackground: var(--PrimaryColor);
    --SectionSeparatorHeight: 3px;
    --SectionSeparatorBorder: 0px solid var(--PrimaryColor);
    --SectionSeparatorWidth: 100%;
    --SectionSeparatorMargin: 1.5rem auto 1rem auto;
    /*Documents*/
    --DropZoneBackground: #dff2f5;
    --DropZoneColour: black;
    --DropZoneBorder: 0;
    --DropZoneHoverBackground: #cbedf2;
    --DropZoneHoverColour: black;
    --DropZoneHoverBorder: 0;
    /*Other*/
    --BorderRadius: 3px;
    --SearchResultsSeparatorBorder: 1px solid var(--SecondaryColor);
    --ValidationTextColour: FireBrick;
    /*Cookie Banner*/
    --CookieBannerColour: white;
    --CookieBannerBackgroundColour: #222;
    --CookieBannerButtonColour: var(--BtnPrimaryColour);
    --CookieBannerButtonBackground: var(--BtnPrimaryBackground);
    --CookieBannerButtonBorder: var(--BtnPrimaryBorder);
    --CookieBannerButtonHoverColour: var(--BtnPrimaryHoverColour);
    --CookieBannerButtonHoverBackground: var(--BtnPrimaryHoverBackground);
    --CookieBannerButtonHoverBorder: var(--BtnPrimaryHoverBorder);
    --CookieBannerLinkHoverColour: var( --LinkHoverColour);
    --CookieBannerLinkColour: #89ccd6;
    /*card etc*/
    --CardTheme: var(--SecondaryColor);
    --CardTitleColour: var(--CardTheme);
    --CardSubtitleColour: color-mix(in srgb, var(--CardTextColour) 75%, var(--CardBackground));
    --CardHeadingColour: var(--CardTheme);
    --CardTextColour: #212529;
    --CardInputLabelTextColour: var(--CardTextColour);
    --CardMainIconColour: var(--CardTheme);
    --CardBackground: white;
    --CardBorder: 1px solid color-mix(in srgb, var(--CardTheme) 50%, var(--CardBackground));
    --CardLineColour: var(--CardTheme);
    --CardBoxShadow: 0 .125rem .25rem color-mix(in srgb, var(--CardTheme) 10%, rgba(0,0,0,0.075));
    /*Messages*/
    --MessageCurrentUserBackground: var(--SecondaryColor);
    --MessageCurrentUserColour: white;
    --MessageCurrentUserBorder: 1px solid var(--SecondaryColor);
    --MessageOtherUserBackground: white;
    --MessageOtherUserColour: var(--SecondaryColor);
    --MessageOtherUserBorder: 1px solid var(--SecondaryColor);
}