@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

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

  /* =============================================================================
  // Color Variables
  // ============================================================================= */
  --error-color: yellow;
  --color-font: #6f7376;

  --secondary-color: #00e2bb;
  --high-emphasis: #052133;
  --med-emphasis: #37454f;
  --low-emphasis: #657079;
  --error-color: #d92d26;
  --on-surface-red-color: #c20a00;
  --black-color: #000000;
  --white-color: #ffffff;

  /* client-color variables*/
  --client-color-50: #e1eefc;
  --client-color-100: #b4d5f7;
  --client-color-200: #83b9f2;
  --client-color-300: #519ced;
  --client-color-400: #2b87e9;
  --client-color-500: #0672e5;
  --client-color-600: #056ae2;
  --client-color-700: #045fde;
  --client-color-800: #0355da;
  --client-color-900: #0242d3;
  --client-color-A100: #fbfcff;
  --client-color-A200: #c8d5ff;
  --client-color-A400: #95afff;
  --client-color-A700: #7b9bff;
  --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(--high-emphasis);
  --h3-color: var(--h2-color);
  --h4-color: var(--h2-color);
  --h5-color: var(--h2-color);

  /* icons */
  --header-icon-color: var(--client-color-500);
  --header-icon-hover-background-color: none;
  --header-icon-hover-color: var(--client-color-500);
  --icon-text-color: var(--secondary-color);

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

  /* message errors */
  --error-messages-color: var(--error-color);
  --form-fields-error-messages-color: var(--on-surface-red-color);

  /* =============================================================================
  // Buttons
  // ============================================================================= */
  /* raised buttons */
  --raised-button-background-color: var(--client-color-500);
  --raised-button-hover-background-color: var(--secondary-color);
  --raised-button-border-radius: 200px;

  /* stroked buttons */
  --stroked-button-border-radius: var(--raised-button-border-radius);
  --stroked-button-hover-background-color: none;
  --stroked-button-hover-border-color: var(--secondary-color);
  --stroked-button-hover-color-font: var(--secondary-color);

  /* =============================================================================
  // Footer
  // ============================================================================= */
  --footer-background-color: rgba(255, 255, 255, 0.8);
  --footer-background-image: url("/safemaker/legacy/images/yourbank/logo.png")
    no-repeat right bottom;
  --footer-background-image-size: 114px;

  /* =============================================================================
  // Forms
  // ============================================================================= */
  --form-input-border-color: var(--low-emphasis);
  --form-input-color-font: var(--color-font);
  --form-input-disabled-font-color: #a7a7a7;
  --form-input-focus-border-color: var(--secondary-color);
  --form-input-focus-label-color: var(--color-font);
  --form-input-focus-label-color: var(--secondary-color);
  --form-input-label-color: var(--color-font);

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

  /* =============================================================================
  // Paragraphs
  // ============================================================================= */
  --second-description-widget-color: var(--low-emphasis);
  --text-size: 14px;
  --text-color: var(--color-font);

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

/* ======================================
// Default styles
// =================================== */
HTML,
HTML BODY {
  font: 1em/1.4em var(--secondary-font);
}
HTML BODY .mat-mdc-button-base:not(:disabled),
HTML BODY .mat-mdc-button-base:disabled,
HTML BODY .mat-button-base:not(:disabled),
HTML BODY .mat-button-base:disabled {
  border-radius: var(--raised-button-border-radius);
}
HTML
  BODY
  .mat-mdc-button-base.mdc-button.mat-mdc-outlined-button:not(:disabled),
HTML BODY .mat-mdc-button-base.mdc-button.mat-stroked-button:not(:disabled),
HTML BODY .mat-mdc-button-base.mdc-button.mat-stroked-button[disabled],
HTML BODY .mat-mdc-button-base.mat-mdc-outlined-button:not(:disabled),
HTML
  BODY
  .login-grid
  .mat-mdc-button-base.mdc-button.mat-stroked-button[disabled] {
  border-radius: var(--stroked-button-border-radius);
}
HTML
  BODY
  .mat-mdc-button-base.mdc-button.mat-mdc-outlined-button:not(:disabled):hover,
HTML
  BODY
  .mat-mdc-button-base.mdc-button.mat-stroked-button:not(:disabled):hover,
HTML BODY .mat-mdc-button-base.mdc-button.mat-stroked-button[disabled]:hover,
HTML BODY .mat-mdc-button-base.mat-mdc-outlined-button:not(:disabled):hover,
HTML
  BODY
  .login-grid
  .mat-mdc-button-base.mdc-button.mat-stroked-button[disabled]:hover {
  background: var(--stroked-button-hover-background-color);
  border-color: var(--stroked-button-hover-border-color);
  color: var(--stroked-button-hover-color-font);
}
HTML BODY .mat-mdc-input-element::placeholder {
  color: var(--color-font);
}