@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Outlined");

:root {
  /* =============================================================================
  // Background image theme
  // ============================================================================= */
  --client-background: transparent
    url("/safemaker/images/vikingcloud/sgs__login-bg.jpg") no-repeat center
    center;
  --client-background-size: cover;

  /* =============================================================================
  // VC Variables
  // ============================================================================= */
  --primary-font: "Poppins", sans-serif;
  --secondary-font: "Barlow", sans-serif;

  --primary-50: #e9f3fe;
  --primary-100: #e2f5ff;
  --primary-200: #86afe4;
  --primary-300: #7ff5fd;
  --primary-400: #037db8;
  --primary-500: #0c72b0;
  --primary-600: #23569a;
  --primary-700: #003099;
  --primary-800: #001e60;
  --primary-900: #0a1a2e;

  --secondary-50: #f7f8fc;
  --secondary-100: #f2f3f7;
  --secondary-200: #e4e6f0;
  --secondary-300: #dadce6;
  --secondary-400: #d0d2dc;
  --secondary-500: #9092ad;
  --secondary-600: #4f525f;
  --secondary-700: #454855;
  --secondary-800: #313440;
  --secondary-900: #272a36;

  --error-50: #ffebed;
  --error-100: #ffdee1;
  --error-200: #ffc4ca;
  --error-300: #f2918c;
  --error-400: #ff4754;
  --error-500: #d92c26;
  --error-600: #b52117;
  --error-700: #821811;
  --error-800: #400001;
  --error-900: #24100f;

  --button-border-width: 2px;
  --field-border-radius: 3px;
  --button-border-radius: 200px;

  --warning-color: #f8cf33;
  --warning-background: #fef8e0;
  --warning-text-color: #8d6a09;

  --error-color: #d92c26;
  --error-background: #ffece6;
  --error-text-color: #c20a00;

  --success-color: #1c8270;
  --success-background: #f4fbf9;
  --success-text-color: #176b5c;

  --info-color: #3f51b5;
  --info-background: #e9ebf7;
  --info-text-color: #3f51b5;

  --text-primary: #171b2b;
  --text-secondary: #657079;
  --text-success: #01692c;
  --text-error: #b52117;

  --border-low-contrast: #e4e6f0;
  --border-soft-contrast: #d0d2dc;
  --border-mid-contrast: #657079;
  --border-high-contrast: #171b2b;
  --border-primary: #000000;

  --surface-0: #f2f3f7;
  --surface-1: #ffffff;
  --surface-2: #f2f3f4;
  --surface-info: #e2f5ff;
  --surface-warning: #fefacb;
  --surface-error: #ffebed;
  --surface-success: #e6fef4;

  --info: #23569a;
  --warning: #b77f10;
  --success: #01692c;
  --error: #b52117;

  --icon-neutral: var(--primary-500);
  --icon-primary: #0c72b0;
  --icon-neutral-reverse: #ffffff;

  --button-primary-bg-1: var(--primary-500);
  --button-primary-bg-2: var(--primary-500);
  --button-primary-label: var(--snow-white);
  --button-primary-border-color: transparent;
  --button-primary-bg-hover: var(--primary-700);

  --button-secondary-label: var(--button-primary-bg-1);
  --button-secondary-border-color: var(--button-secondary-label);
  --button-secondary-bg-hover: #f2f3f4;

  --button-secondary-label: var(--primary-500);
  --button-secondary-label-hover: var(--primary-700);
  --button-secondary-border-color: var(--button-secondary-label);
  --button-secondary-bg-hover: transparent;

  --button-caution-label: #ffffff;
  --button-caution-bg: #b52117;
  --button-caution-bg-hover: #821811;

  --button-disabled-label: #4f525f;
  --button-disabled-bg: #e4e6f0;

  --button-icon-primary-bg-1: var(--primary-600);
  --button-icon-primary-bg-2: var(--primary-400);
  --button-icon-primary-bg-hover: var(--button-primary-bg-hover);
  --button-icon-primary-color: var(--button-primary-label);

  --button-icon-secondary-color: var(--primary-500);
  --button-icon-secondary-bg-hover: none;

  --link-text-color: var(--primary-500);
  --link-text-color-hover: var(--primary-700);
  --link-text-bg-hover: transparent;

  --link-text-color: var(--primary-500);
  --link-text-color-hover: var(--primary-700);
  --link-text-bg-hover: transparent;

  --action-menu-background: var(--surface-1);
  --action-menu-color: var(--text-primary);
  --action-menu-bg-hover: var(--surface-0);

  --calendar-selected-bg-color: var(--primary-500);
  --calendar-selected-color: var(--snow-white);
  --calendar-hover-bg-color: var(--primary-100);
  --calendar-hover-color: var(--text-primary);

  --transparent-1: rgba(255, 255, 255, 0.8);
  --snow-white: #ffffff;
  --warning-100: #fefacb;
  --waning-700: #b77f10;
  --warning-800: #efb643;
  --success-100: #e6fef4;
  --success-300: #a4fec1;
  --success-600: #01692c;
  --success-800: #091c11;

  --neutral-800: #171b2b;
  --neutral-200: #b7bbcc;
  --neutral-300: #2e4052;
  --neutral-400: #363e5c;
  --neutral-500: #272d42;
  --neutral-600: #212638;

  /*CLIENT COMPONENT OVERRIDES*/
  --black: #000000;
  --header-logo-size: 30px;
  --header-background-color: var(--surface-1);
  --header-border-colour: var(--surface-1);
  --navbar-icon-colour: var(--icon-neutral);
  --navbar-icon-hover-colour: var(--surface-0);
  --dashboard-background-color: #f2f3f7;
  --footer-top-border: none;
  --footer-top-border: 1px solid #e4e6f0;
  --footer-text-colour: var(--text-primary);
  --footer-bg-colour: var(--surface-1);

  --login-button-primary-bg1: var(--button-primary-bg-1);
  --login-button-primary-bg2: var(--button-primary-bg-1);
  --login-button-primary-border-color: var(--button-primary-border-color);
  --login-button-primary-label: var(--button-primary-label);
  --login-button-primary-hover: var(--button-primary-bg-hover);

  --admin-navbar-icon-colour: var(--icon-neutral);
  --admin-navbar-icon-hover-colour: var(--surface-0);
  --admin-background-menu-color: #ffffff;
  --admin-expansion-background-color: #ffffff;
  --admin-expansion-hover-background-color: var(--surface-0);
  --admin-expansion-text-color: var(--link-text-color);
  --admin-expansion-text-hover-color: var(--link-text-color);

  --dashboard-nextSteps-button-bg1: var(--button-primary-bg-1);
  --dashboard-nextSteps-button-bg2: var(--button-primary-bg-1);
  --dashboard-nextSteps-button-border-color: var(--button-primary-border-color);
  --dashboard-nextSteps-button-label: var(--button-primary-label);
  --dashboard-nextSteps-button-hover: var(--button-primary-bg-hover);

  --dashboard-widget-button-bg1: transparent;
  --dashboard-widget-button-bg2: transparent;
  --dashboard-widget-button-border-color: var(--button-secondary-border-color);
  --dashboard-widget-button-label: var(--button-secondary-label);
  --dashboard-widget-button-hover: var(--button-secondary-bg-hover);

  --saq-no-button-bg1: var(--error-600);
  --saq-no-button-bg2: var(--error-600);
  --saq-no-button-border-color: var(--button-primary-border-color);
  --saq-no-button-label: var(--button-primary-label);
  --saq-no-button-hover: var(--saq-no-button-bg1);

  --saq-sidebar-title-completed-text-colour: var(--text-primary);
  --saq-sidebar-title-not-completed-text-colour: var(--error-text-color);
  --saq-sidebar-title-bg-hover: var(--surface-0);

  --custom-illustration-background-color: var(--primary-100);
  --custom-illustration-primary-color: var(--primary-500);
  --custom-illustration-secondary-color: var(--primary-200);
  --custom-illustration-disabled-background-color: var(
    --custom-illustration-background-color
  );
  --custom-illustration-disabled-secondary-background-color: var(
    --custom-illustration-secondary-color
  );
  --custom-illustration-disabled-color: var(
    --custom-illustration-primary-color
  );
  --custom-illustration-green-color: #7aca14;
  --custom-illustration-red-color: #dd443e;
  --custom-illustration-yellow-color: #ffac0c;
  --cmp-custom-illustration-border-color: var(
    --custom-illustration-secondary-color
  );
  --cmp-custom-illustration-background-color: #badbfe;
  --cmp-custom-illustration-disabled-background-color: #d5d5d5;
}