﻿/* --------------------  Import */
@import url("../css/AssignClasses.css");

/* --------------------  Scheme Logo */
body .navbar-brand,
body .LoginLogo {
    background-image: url("Logo.png");
}

body.DarkMode .navbar-brand,
body.DarkMode .LoginLogo {
    background-image: url("Logo.png");
}

:root {
    /* -------------------- System Colours */
    --SystemRed: #ff3b2f;
    --SystemRedDarkMode: #f85b5b;
    --SystemGreen: #198754;
    --SystemGreenDarkMode: #43bd84;
    /* -------------------- Greys */
    --Grey5: #f8f8f8;
    --Grey10: #eeeeee;
    --Grey15: #e2e2e2;
    --Grey20: #dbdbdb;
    --Grey25: #d0d0d0;
    --Grey30: #c3c3c3;
    --Grey35: #b6b6b6;
    --Grey40: #a8a8a8;
    --Grey45: #9b9b9b;
    --Grey50: #8c8c8c;
    --Grey55: #7e7e7e;
    --Grey60: #707070;
    --Grey65: #636363;
    --Grey70: #555555;
    --Grey75: #444444;
    --Grey80: #3c3c3c;
    --Grey85: #303030;
    --Grey90: #272727;
    --Grey95: #1f1f1f;
    /* -------------------- ClientColours */
    --ClientPrimaryColor: #0062c2;
    --ClientButtonColor: #c0167b;
    --ClientButtonHoverColor: #b50d71;
    --ClientLightestColor: var(--Grey20);
    --ClientDarkestColor: #00254a;
    --ClientDarkColor: #003364;
    --ClientLinkColor: #c0167b;
    --ClientLinkDarkColor: #fdb1de;
    /* -------------------- Scheme Logo */
    /* Margins */
    --LogoTopBottomMargin: 20px;
    --LogoTopBottomMarginMobile: 10px;
    /* Desktop */
    --LogoWidthDesktop: 295px;
    --LogoHeightDesktop: 40px;
    /* Tablet */
    --LogoWidthTablet: 295px;
    --LogoHeightTablet: 40px;
    /* Mobile */
    --LogoWidthMobile: 295px;
    --LogoHeightMobile: 40px;
    /* -------------------- Fonts */
    /* Global */
    --FontFamily: BodyFont;
    --FontSize: 17px;
    --FontSizeMobile: 17px;
    --FontLineHeight: 1.4em;
    /* Menu */
    --MenuFontSize: 1.1rem;
    --MenuFontFamily: MenuFont;
    --MenuFontWeight: 400;
    --MenuFontCase: unset;
    /* Headers */
    --HeaderFontFamily: HeaderFont;
    --HeaderFontCase: unset;
    --HeaderFontWeight: 600;
    /* Button */
    --ButtonFontSize: 0.9rem;
    --ButtonFontSizeSmall: 0.8rem;
    --ButtonFontFamily: BodyFont;
    --ButtonFontWeight: 700;
    --ButtonFontCase: uppercase;
    --ButtonBorderWidth: 1px;
    --ButtonBorderRadius: 3px;
    --ButtonPadding: 14px 18px 14px 18px;
    --ButtonSmallPadding: 6px 6px 4px 6px;
    --ButtonMinimumWidth: 120px;
    --ButtonLetterSpacing: 1.4px;
    /* -------------------- Tiles */
    --DashboardTileBorderWidth: 0px;
    --DashboardTileBorderRadius: 12px;
    /* -------------------- Content Panel */
    --ContentPanelBorderWidth: 0px;
    --ContentPanelBorderRadius: 12px;
    /* -------------------- Form Elements */
    /* Form */
    --InputBorderRadius: 6px;
    /* Quick Links */
    --QuickLinkPadding: 11px 18px 11px 18px;
    /* Accessibility */
    --AccessibilityOutlineStyle: solid;
    /* -------------------------------------------------------- Default Mode */
    /* Page Background */
    --BodyBackgroundImage: linear-gradient(var(--ClientLightestColor),var(--ClientLightestColor));
    /* -------------------- Font */
    --HeadingFontColor: var(--Grey90);
    --BodyFontColor: var(--Grey90);
    /* -------------------- Links */
    --LinkColor: var(--ClientLinkColor);
    --LinkHoverColor: var(--ClientLinkColor);
    --LinkFocusColor: var(--ClientLinkColor);
    --LinkActiveColor: var(--ClientLinkColor);
    /* -------------------- Global Header */
    --HeaderIconColor: var(--Grey10);
    --HeaderBackgroundColor: var(--ClientPrimaryColor);
    /* -------------------- Global Footer */
    --FooterTextColor: var(--Grey10);
    --FooterBackgroundColor: var(--ClientPrimaryColor);
    /* -------------------- Carousel */
    --CarouselBackgroundColor: white;
    --CarouselButtonColor: var(--Grey90);
    --CarouselButtonBackgroundColor: white;
    /* -------------------- Global Message */
    --GlobalMessageBackgroundColor: var(--Grey10);
    /* Main */
    --MainMenuItemColor: var(--Grey90);
    --MainMenuItemHoverColor: var(--Grey90);
    --MainMenuBackgroundColor: white;
    /* Dropdown */
    --MainMenuDropdownBackgroundColor: var(--ClientPrimaryColor);
    --MainMenuDropdownItemColor: var(--Grey10);
    --MainMenuDropdownItemHoverColor: var(--Grey90);
    --MainMenuDropdownItemBackgroundHoverColor: var(--Grey10);
    /* Mobile Menu Toggle */
    --MainMenuToggle: var(--Grey90);
    /* -------------------- Content Panel */
    --ContentPanelBorderColor: var(--Grey90);
    --ContentPanelBackgroundColor: white;
    --ContentPanelBoxShadow: 0 0 0 0 transparent;
    /* -------------------- Dashboard Tile */
    /* Default */
    --DashboardTileBorderColor: transparent;
    --DashboardTileIconColor: var(--ClientButtonColor);
    --DashboardTileBoxShadow: 0 0 0 0 var(--Grey90);
    /* Hover, Active */
    --DashboardTileBorderHoverColor: transparent;
    --DashboardTileIconHoverColor: var(--ClientButtonHoverColor);
    /* -------------------- Primary Button */
    /* Default */
    --PrimaryButtonColor: var(--Grey10);
    --PrimaryButtonBackgroundColor: var(--ClientButtonColor);
    --PrimaryButtonBorderColor: var(--ClientButtonColor);
    /* Hover */
    --PrimaryButtonHoverColor: var(--Grey10);
    --PrimaryButtonBackgroundHoverColor: var(--ClientButtonHoverColor);
    --PrimaryButtonBorderHoverColor: var(--ClientButtonHoverColor);
    --PrimaryButtonHoverBoxShadow: 0 0 0 0px var(--Grey10);
    /* Focus */
    --PrimaryButtonFocusColor: var(--Grey10);
    --PrimaryButtonBackgroundFocusColor: var(--ClientButtonColor);
    --PrimaryButtonBorderFocusColor: var(--ClientButtonColor);
    --PrimaryButtonFocusBoxShadow: 0 0 0 0px var(--Grey15);
    /* -------------------- Secondary Button */
    /* Default */
    --SecondaryButtonColor: var(--ClientButtonColor);
    --SecondaryButtonBackgroundColor: white;
    --SecondaryButtonBorderColor: var(--ClientButtonColor);
    /* Hover */
    --SecondaryButtonHoverColor: var(--Grey10);
    --SecondaryButtonBackgroundHoverColor: var(--ClientButtonHoverColor);
    --SecondaryButtonBorderHoverColor: var(--ClientButtonHoverColor);
    --SecondaryButtonHoverBoxShadow: 0 0 0 0px var(--Grey10);
    /* Focus */
    --SecondaryButtonFocusColor: var(--Grey10);
    --SecondaryButtonBackgroundFocusColor: var(--ClientButtonColor);
    --SecondaryButtonBorderFocusColor: var(--ClientButtonColor);
    --SecondaryButtonFocusBoxShadow: 0 0 0 0px var(--Grey10);
    /* -------------------- Case Tracking */
    --CaseTrackerPendingColor: var(--Grey30);
    --CaseTrackerDoneColor: var(--ClientButtonColor);
    --CaseTrackerActiveColor: var(--ClientButtonColor);
    /* -------------------- Forms */
    /* Inputs */
    --FormInputBackgroundColor: white;
    --FormInputBorderColor: var(--ClientDarkColor);
    --FormInputFocusBackgroundColor: white;
    --FormInputFocusBorderColor: var(--ClientDarkColor);
    /* -------------------- Form Validation and Alerts */
    /* Validated */
    --ValidatedColor: var(--SystemGreen);
    /* Alert */
    --AlertColor: var(--SystemRed);
    /* Boxed Alert Background Color */
    --BoxedAlertColor: white;
    --BoxedAlertBackgroundColor: var(--SystemRed);
    /* -------------------- Data Tables */
    /* Navigation */
    --DataTableNavigationIconColor: var(--ClientButtonColor);
    --DataTableNavigationIconHoverColor: var(--ClientButtonHoverColor);
    --DataTableAltRowBackgroundColor: var(--Grey20);
    /* -------------------- Quick Links */
    /* Default */
    --QuickLinkColor: var(--Grey90);
    --QuickLinkBackgroundColor: white;
    --QuickLinkBorderColor: white;
    /* Hover */
    --QuickLinkHoverColor: var(--Grey90);
    --QuickLinkBackgroundHoverColor: white;
    --QuickLinkBorderHoverColor: white;
    /* -------------------- Accessibility Focus */
    --AccessibilityHeaderOutlineColor: white;
    --AccessibilityMenuOutlineColor: #000;
    --AccessibilityFooterOutlineColor: white;
    --AccessibilityOutlineColor: #000;
    /* -------------------------------------------------------- Dark Mode */
    /* Page Background */
    --BodyBackgroundImageDarkMode: linear-gradient(var(--ClientDarkestColor),var(--ClientDarkestColor));
    /* -------------------- Font */
    --HeadingFontColorDarkMode: var(--Grey20);
    --BodyFontColorDarkMode: var(--Grey20);
    /* Links */
    --LinkColorDarkMode: var(--ClientLinkDarkColor);
    --LinkHoverColorDarkMode: var(--ClientLinkDarkColor);
    --LinkFocusColorDarkMode: var(--ClientLinkDarkColor);
    --LinkActiveColorDarkMode: var(--ClientLinkDarkColor);
    /* -------------------- Global Header */
    --HeaderIconColorDarkMode: var(--Grey10);
    --HeaderBackgroundColorDarkMode: var(--ClientDarkColor);
    /* -------------------- Global Footer */
    --FooterTextColorDarkMode: var(--Grey20);
    --FooterBackgroundColorDarkMode: var(--ClientDarkColor);
    /* -------------------- Carousel */
    --CarouselBackgroundColorDarkMode: var(--ClientDarkColor);
    --CarouselButtonColorDarkMode: var(--Grey20);
    --CarouselButtonBackgroundColorDarkMode: var(--ClientDarkColor);
    /* -------------------- Global Message */
    --GlobalMessageBackgroundColorDarkMode: var(--ClientDarkColor);
    /* -------------------- Main Menu */
    /* Main */
    --MainMenuItemColorDarkMode: var(--Grey90);
    --MainMenuItemHoverColorDarkMode: var(--Grey90);
    --MainMenuBackgroundColorDarkMode: white;
    /* Dropdown */
    --MainMenuDropdownBackgroundColorDarkMode: var(--ClientPrimaryColor);
    --MainMenuDropdownItemColorDarkMode: var(--Grey20);
    --MainMenuDropdownItemBackgroundHoverColorDarkMode: var(--ClientDarkColor);
    --MainMenuDropdownItemHoverColorDarkMode: var(--Grey20);
    /* Mobile Menu Toggle */
    --MainMenuToggleDarkMode: var(--Grey90);
    /* -------------------- Content Panel */
    --ContentPanelBorderColorDarkMode: var(--ClientDarkColor);
    --ContentPanelBackgroundColorDarkMode: var(--ClientDarkColor);
    --ContentPanelBoxShadowDarkMode: 0 0 0 0 transparent;
    /* -------------------- Dashboard Tile */
    /* Default */
    --DashboardTileBorderColorDarkMode: transparent;
    --DashboardTileIconColorDarkMode: var(--Grey20);
    --DashboardTileBoxShadowDarkMode: 0 0 0 0 var(--Grey20);
    /* Hover, Active */
    --DashboardTileBorderHoverColorDarkMode: transparent;
    --DashboardTileIconHoverColorDarkMode: var(--Grey20);
    /* -------------------- Primary Button */
    /* Default */
    --PrimaryButtonColorDarkMode: var(--Grey20);
    --PrimaryButtonBackgroundColorDarkMode: var(--ClientButtonColor);
    --PrimaryButtonBorderColorDarkMode: var(--ClientButtonColor);
    /* Hover */
    --PrimaryButtonHoverColorDarkMode: var(--Grey20);
    --PrimaryButtonBackgroundHoverColorDarkMode: var(--ClientButtonHoverColor);
    --PrimaryButtonBorderHoverColorDarkMode: var(--ClientButtonHoverColor);
    --PrimaryButtonHoverBoxShadowDarkMode: 0 0 0 0px var(--Grey20);
    /* Focus */
    --PrimaryButtonFocusColorDarkMode: var(--Grey20);
    --PrimaryButtonBackgroundFocusColorDarkMode: var(--ClientButtonColor);
    --PrimaryButtonBorderFocusColorDarkMode: var(--ClientButtonColor);
    --PrimaryButtonFocusBoxShadowDarkMode: 0 0 0 0px var(--Grey20);
    /* -------------------- Secondary Button */
    /* Default */
    --SecondaryButtonColorDarkMode: var(--Grey20);
    --SecondaryButtonBackgroundColorDarkMode: var(--ClientDarkColor);
    --SecondaryButtonBorderColorDarkMode: var(--Grey20);
    /* Hover */
    --SecondaryButtonHoverColorDarkMode: var(--Grey20);
    --SecondaryButtonBackgroundHoverColorDarkMode: var(--ClientButtonHoverColor);
    --SecondaryButtonBorderHoverColorDarkMode: var(--ClientButtonHoverColor);
    --SecondaryButtonHoverBoxShadowDarkMode: 0 0 0 0px var(--Grey20);
    /* Focus */
    --SecondaryButtonFocusColorDarkMode: var(--Grey20);
    --SecondaryButtonBackgroundFocusColorDarkMode: var(--ClientButtonColor);
    --SecondaryButtonBorderFocusColorDarkMode: var(--ClientButtonColor);
    --SecondaryButtonFocusBoxShadowDarkMode: 0 0 0 0px var(--Grey20);
    /* -------------------- Case Tracking */
    --CaseTrackerPendingColorDarkMode: var(--Grey70);
    --CaseTrackerDoneColorDarkMode: var(--ClientButtonColor);
    --CaseTrackerActiveColorDarkMode: var(--ClientButtonColor);
    /* -------------------- Forms */
    /* Inputs */
    --FormInputBackgroundColorDarkMode: var(--ClientDarkestColor);
    --FormInputBorderColorDarkMode: var(--Grey20);
    --FormInputFocusBackgroundColorDarkMode: var(--ClientDarkestColor);
    --FormInputFocusBorderColorDarkMode: white;
    /* -------------------- Form Validation and Alerts */
    /* Validated */
    --ValidatedColorDarkMode: var(--SystemGreenDarkMode);
    /* Alert */
    --AlertColorDarkMode: var(--SystemRedDarkMode);
    /* Boxed Alert Background Color */
    --BoxedAlertColorDarkMode: white;
    --BoxedAlertBackgroundColorDarkMode: var(--SystemRed);
    /* -------------------- Data Tables */
    /* Navigation */
    --DataTableNavigationIconColorDarkMode: var(--Grey20);
    --DataTableNavigationIconHoverColorDarkMode: var(--ClientButtonColor);
    --DataTableAltRowBackgroundColorDarkMode: var(--ClientButtonHoverColor);
    /* -------------------- Quick Links */
    /* Default */
    --QuickLinkColorDarkMode: var(--Grey20);
    --QuickLinkBackgroundColorDarkMode: var(--ClientDarkColor);
    --QuickLinkBorderColorDarkMode: var(--ClientDarkColor);
    /* Hover */
    --QuickLinkHoverColorDarkMode: var(--Grey20);
    --QuickLinkBackgroundHoverColorDarkMode: var(--ClientDarkColor);
    --QuickLinkBorderHoverColorDarkMode: var(--ClientDarkColor);
    /* -------------------- Accessibility Focus */
    --AccessibilityHeaderOutlineColorDarkMode: white;
    --AccessibilityMenuOutlineColorDarkMode: white;
    --AccessibilityFooterOutlineColorDarkMode: white;
    --AccessibilityOutlineColorDarkMode: white;
}
