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

  /* =============================================================================
  // Color Variables
  // ============================================================================= */
  --color-font: #63666a;
  --disabled-background: var(--client-color-300);
  --disabled-color: #e4e4e4;

  --secondary-color: #63666a;
  --black-color: #000000;
  --light-green-color: #c9fdc2;
  --green-color: #7aca15;
  --light-red-color: #f7d2d1;
  --red-color: #e03030;
  --light-yellow-color: #f8f2befb;
  --yellow-color: #ffcb5b;
  --white-color: #ffffff;

  /* client-color variables*/
  --client-color-50: #e8f6e5;
  --client-color-100: #c7e7bf;
  --client-color-200: #a1d895;
  --client-color-300: #72bf44;
  --client-color-400: #5ab226;
  --client-color-500: #43b02a;
  --client-color-600: #3da925;
  --client-color-700: #389b22;
  --client-color-800: #358b22;
  --client-color-900: #2b721b;
  --client-color-A100: #bfffb8;
  --client-color-A200: #91ff85;
  --client-color-A400: #63ff52;
  --client-color-A700: #4cff39;
  --client-color-contrast-50: var(--black-color);
  --client-color-contrast-100: var(--black-color);
  --client-color-contrast-200: var(--black-color);
  --client-color-contrast-300: var(--black-color);
  --client-color-contrast-400: var(--black-color);
  --client-color-contrast-500: var(--white-color);
  --client-color-contrast-600: var(--white-color);
  --client-color-contrast-700: var(--white-color);
  --client-color-contrast-800: var(--white-color);
  --client-color-contrast-900: var(--white-color);
  --client-color-contrast-A100: var(--black-color);
  --client-color-contrast-A200: var(--black-color);
  --client-color-contrast-A400: var(--black-color);
  --client-color-contrast-A700: var(--black-color);

  /* headings */
  --h1-color: var(--secondary-color);
  --h2-color: var(--h1-color);
  --h3-color: var(--h1-color);
  --h4-color: var(--h1-color);
  --h5-color: var(--h1-color);
  --h6-color: var(--h1-color);

  /* icons */
  --header-icon-color: var(--client-color-500);
  --header-icon-hover-background-color: var(--header-icon-color);
  --header-icon-hover-color: var(--white-color);
  --icon-color: var(--client-color-500);
  --icon-text-color: var(--color-font);
  --custom-illustration-background-color: var(--client-color-100);
  --custom-illustration-primary-color: var(--secondary-color);
  --custom-illustration-secondary-color: var(--client-color-200);

  /* links */
  --link-color: var(--client-color-500);
  --link-hover-color: var(--client-color-900);

  /* message errors */
  --error-messages-color: var(--red-color);

  /* =============================================================================
  // Buttons
  // ============================================================================= */
  /* raised buttons */
  --raised-button-background-color: var(--client-color-500);
  --raised-button-color-font: var(--white-color);
  --raised-button-hover-background-color: var(--white-color);
  --raised-button-hover-color-font: var(--client-color-500);

  /* stroked buttons */
  --stroked-button-border-color: var(--client-color-500);
  --stroked-button-color-font: var(--stroked-button-border-color);
  --stroked-button-hover-border-color: var(--client-color-700);
  --stroked-button-hover-color-font: var(--client-color-500);

  /* =============================================================================
  // Footer
  // ============================================================================= */
  --footer-background-color: var(--white-color);
  --footer-hover-link-color: var(--client-color-500);

  /* =============================================================================
  // Forms
  // ============================================================================= */
  --form-input-border-color: #b6b5b1;
  --form-input-focus-border-color: var(--secondary-color);
  --form-input-focus-label-color: var(--form-input-focus-border-color);
  --form-input-placeholder-color: #989b9d;

  /* =============================================================================
  // Menu and submenu
  // ============================================================================= */
  --submenu-background-color: var(--client-color-500);
  --submenu-hover-background-color: var(--white-color);
  --submenu-font-color: var(--white-color);
  --submenu-font-size: 12px;
  --submenu-hover-font-color: var(--client-color-500);

  /* =============================================================================
  // Paragraphs
  // ============================================================================= */
  --text-size: 14px;
  --text-color: var(--color-font);

  /* =============================================================================
  // Popups
  // ============================================================================= */
  --popup-h1-font-size: 36px;
  --popup-h2-font-size: 22px;
  --popup-h3-font-size: 18px;
  --popup-h4-font-size: 15px;
  --popup-h5-font-size: 14px;
  --popup-h6-font-size: 0.67em;
  --popup-color-font: var(--color-font);

  /* =============================================================================
  // Typography
  // ============================================================================= */
  --main-font: "Roboto", sans-serif;
}

/* ======================================
// Default styles
// =================================== */
HTML,
HTML BODY {
  font-family: var(--main-font);
}
HTML BODY .mat-h1,
HTML BODY .mat-typography h1 {
  font-weight: 500;
}
HTML BODY .mat-h2,
HTML BODY .mat-typography h2 {
  font-weight: 500;
}
HTML BODY .mat-h3,
HTML BODY .mat-typography h3 {
  font-weight: 500;
}
HTML BODY .mat-h4,
HTML BODY .mat-typography h4 {
  font-weight: 500;
}
HTML BODY .mat-h5,
HTML BODY .mat-typography h5 {
  font-weight: 500;
}
HTML BODY .mat-h6,
HTML BODY .mat-typography h6 {
  font-weight: 500;
}
.mat-body-1 {
  font-family: var(--main-font);
}
.mat-body-2 {
  font-family: var(--main-font);
}
.mat-body p,
.mat-body-1 p,
.mat-typography p {
  font-family: var(--main-font);
}
HTML BODY DL DT {
  font-family: var(--main-font);
  font-size: var(--text-size);
}
HTML BODY DL DD {
  font-family: var(--main-font);
  font-size: var(--text-size);
}
HTML BODY .mat-button-base {
  font-family: var(--main-font);
  text-transform: none;
}
HTML BODY .mat-raised-button,
HTML BODY .mat-raised-button:not([class*="mat-elevation-z"]),
HTML BODY .mat-raised-button[disabled],
HTML BODY .login-grid .mat-raised-button[disabled] {
  background-color: var(--raised-button-background-color);
  border: 1px solid var(--raised-button-background-color);
  color: var(--raised-button-color-font);
}
HTML BODY .mat-raised-button:hover,
HTML BODY .mat-raised-button:not([class*="mat-elevation-z"]):hover,
HTML BODY .mat-raised-button[disabled]:hover,
HTML BODY .login-grid .mat-raised-button[disabled]:hover {
  border: 1px solid var(--raised-button-background-color);
  color: var(--raised-button-hover-color-font);
}
HTML BODY .mat-stroked-button,
HTML BODY .mat-stroked-button:not([class*="mat-elevation-z"]),
HTML BODY .mat-stroked-button[disabled],
HTML BODY .login-grid .mat-stroked-button[disabled] {
  border-color: var(--stroked-button-border-color);
  color: var(--stroked-button-color-font);
}
HTML BODY .mat-stroked-button:hover,
HTML BODY .mat-stroked-button:not([class*="mat-elevation-z"]):hover,
HTML BODY .mat-stroked-button[disabled]:hover,
HTML BODY .login-grid .mat-stroked-button[disabled]:hover {
  border-color: var(--stroked-button-hover-border-color);
  color: var(--stroked-button-hover-color-font);
}
/* ======================================
// Header
// =================================== */
HTML BODY #navbar .mat-toolbar .mat-button-base SPAN.translate {
  font-family: var(--main-font);
}
/* ======================================
// Content
// =================================== */
HTML BODY #mp-mainContent .mat-icon SVG CIRCLE[id^="background"] {
  fill: var(--custom-illustration-background-color);
}
HTML BODY #mp-mainContent .mat-icon SVG G[id^="primary-group"] PATH {
  fill: var(--custom-illustration-primary-color);
}
HTML BODY #mp-mainContent .mat-icon SVG G[id^="secondary-group"] PATH,
HTML BODY #mp-mainContent .mat-icon SVG G[id^="secondary-group"] CIRCLE {
  fill: var(--custom-illustration-secondary-color);
}
HTML BODY #mp-mainContent .main-pane .title BUTTON.mat-icon-button {
  color: var(--icon-color);
}
HTML
  BODY
  #mp-mainContent
  FORM
  .mat-form-field
  .mat-form-field-wrapper
  .mat-form-field-flex
  .mat-form-field-infix
  .mat-input-element,
HTML
  BODY
  #ap-mainContent
  FORM
  .mat-form-field
  .mat-form-field-wrapper
  .mat-form-field-flex
  .mat-form-field-infix
  .mat-input-element {
  font-family: var(--main-font);
}
HTML
  BODY
  #mp-mainContent
  FORM
  .mat-form-field
  .mat-form-field-wrapper
  .mat-form-field-flex
  .mat-form-field-infix
  SPAN.mat-form-field-label-wrapper
  LABEL.mat-form-field-label,
HTML
  BODY
  #ap-mainContent
  FORM
  .mat-form-field
  .mat-form-field-wrapper
  .mat-form-field-flex
  .mat-form-field-infix
  SPAN.mat-form-field-label-wrapper
  LABEL.mat-form-field-label {
  color: var(--form-input-placeholder-color);
  font-family: var(--main-font);
}
HTML BODY #mp-mainContent .main-pane .firstRegistration H5 {
  color: var(--h5-color);
}
/* Images for Next Steps statutes */
.next-steps__step--next_profile .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-profile.jpg") !important;
}
.next-steps__step--next_profile_confirm .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-profile.jpg") !important;
}
.next-steps__step--next_saq .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-saq.jpg") !important;
}
.next-steps__step--next_scan .next-steps__picture,
.next-steps__step--next_scan_upload .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan.jpg") !important;
}
.next-steps__step--next_scan_aborted .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_aborted.jpg") !important;
}
.next-steps__step--next_scan_alert_passed .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_passed.jpg") !important;
}
.next-steps__step--next_scan_alert_failed .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_failed.jpg") !important;
}
.next-steps__step--next_scan_waiting_ready .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_attest.jpg") !important;
}
.next-steps__step--next_scan_waiting_incomplete .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_scheduled.jpg") !important;
}
.next-steps__step--next_scan_waiting_approval .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_approval.jpg") !important;
}
.next-steps__step--next_scan_compliant .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan_compliant.jpg") !important;
}
.next-steps__step--next_upload .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan.jpg") !important;
}
.next-steps__step--next_attest .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-scan.jpg") !important;
}
.next-steps__step--next_documentExchange .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-document_exchange.jpg") !important;
}
.next-steps__step--next_attest_expiry .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/step-attest_expiry.jpg") !important;
}
.next-steps__step--proactive_data_security .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/proactive-data-security.jpg") !important;
}
.next-steps__step--acs .next-steps__picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/acs.jpg") !important;
}
/* Image for Subscription */
.subscription-compliance-picture {
  background-image: url("/safemaker/legacy/images/__common/fdna_next_steps_images/proactive-data-security.jpg") !important;
}
/* ======================================
// Footer
// =================================== */
HTML BODY #footer A {
  text-decoration: none;
}
HTML BODY #footer A:hover {
  color: var(--footer-hover-link-color);
  text-decoration: underline;
}
/* ======================================
// Popups
// =================================== */
.cdk-overlay-container .mat-h1,
.cdk-overlay-container .mat-typography h1 {
  font-size: var(--popup-h1-font-size);
  line-height: 1.5;
  margin: 0;
}
.cdk-overlay-container .mat-h2,
.cdk-overlay-container .mat-typography h2 {
  font-size: var(--popup-h2-font-size);
  line-height: 1.5;
  margin: 0 0 40px 0;
}
.cdk-overlay-container .mat-h3,
.cdk-overlay-container .mat-typography h3 {
  font-size: var(--popup-h3-font-size);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 15px 0;
}
.cdk-overlay-container .mat-h4,
.cdk-overlay-container .mat-typography h4 {
  font-size: var(--popup-h4-font-size);
  line-height: 1.5;
  margin: 0 0 5px 0;
}
.cdk-overlay-container .mat-h5,
.cdk-overlay-container .mat-typography h5 {
  font-size: var(--popup-h5-font-size);
  line-height: 1.5;
  margin: 0 0 5px 0;
}
.cdk-overlay-container .mat-h6,
.cdk-overlay-container .mat-typography h6 {
  font-size: var(--popup-h6-font-size);
  line-height: 1.4286;
}
.cdk-overlay-container UL LI,
.cdk-overlay-container OL LI {
  font-family: var(--main-font);
  font-size: var(--text-size);
}
.cdk-overlay-container DL DT {
  font-family: var(--main-font);
}
.cdk-overlay-container DL DD {
  font-family: var(--main-font);
}
.cdk-overlay-container P {
  font-family: var(--main-font);
}
.cdk-overlay-container .mat-menu-panel .mat-menu-content {
  background-color: var(--submenu-background-color);
}
.cdk-overlay-container .mat-menu-panel .mat-menu-item {
  font-family: var(--main-font);
}