:root {
  --pmg-standard-text-color: #666;
  --pmg-standard-dark-text-color: #000;
  --pmg-color1: #702082;
  --pmg-purple: #702082;
  --pmg-pink: #d9017a;
  --pmg-color3: #d9017a;
  --pmg-slate: #4f758b;
  --pmg-disabled-color: #e9e9e9;
  --pmg-failure-red: #c91102;
  --pmg-success-green: #10a504;
  --pmg-light-text-color: #fff;
  --pmg-disabled-background-color: #fff;
  --pmg-message-header-background-color: #eedc00;
  --pmg-message-background-color: rgb(238 220 0 / 27%);
  --pmg-message-color: #323232;
  --standard-text-color: var(--pmg-standard-text-color);
  --standard-dark-text-color: var(--pmg-standard-dark-text-color);
  --standard-light-text-color: var(--pmg-light-text-color);
  --disabled-color: var(--pmg-disabled-color);
  --disabled-background-color: var(--pmg-disabled-background-color);
  --navigation-color: var(--pmg-purple);
  --login-color: var(--pmg-color1);
  --page-header-gradient-color1: var(--pmg-color3);
  --page-header-gradient-color2: var(--pmg-color1);
  --message-header-background-color: var(--pmg-message-header-background-color);
  --message-background-color: var(--pmg-message-background-color);
  --message-color: var(--pmg-message-color);
  --gray-d: #d8d8d8;
  --gray-f: #f2f2f2;
  font-weight: 400;
  font-size: 18px;
  color: var(--standard-text-color);
}

:host {
  --pmg-standard-text-color: #666;
  --pmg-standard-dark-text-color: #000;
  --pmg-color1: #702082;
  --pmg-purple: #702082;
  --pmg-pink: #d9017a;
  --pmg-color3: #d9017a;
  --pmg-slate: #4f758b;
  --pmg-disabled-color: #e9e9e9;
  --pmg-failure-red: #c91102;
  --pmg-success-green: #10a504;
  --pmg-light-text-color: #fff;
  --pmg-disabled-background-color: #fff;
  --pmg-message-header-background-color: #eedc00;
  --pmg-message-background-color: rgb(238 220 0 / 27%);
  --pmg-message-color: #323232;
  --standard-text-color: var(--pmg-standard-text-color);
  --standard-dark-text-color: var(--pmg-standard-dark-text-color);
  --standard-light-text-color: var(--pmg-light-text-color);
  --disabled-color: var(--pmg-disabled-color);
  --disabled-background-color: var(--pmg-disabled-background-color);
  --navigation-color: var(--pmg-color2);
  --login-color: var(--pmg-color1);
  --page-header-gradient-color1: var(--pmg-color3);
  --page-header-gradient-color2: var(--pmg-color1);
  --message-header-background-color: var(--pmg-message-header-background-color);
  --message-background-color: var(--pmg-message-background-color);
  --message-color: var(--pmg-message-color);

  font-weight: 400;
  font-size: 18px;
  color: var(--standard-text-color);
}

.PMG {
  --standard-light-text-color: #fff;
  --disabled-color: #e9e9e9;
  --disabled-background-color: #fff;
  --message-header-background-color: #eedc00;
  --message-background-color: rgb(238 220 0 / 27%);
  --message-color: #323232;

  /* White label variables */
  --login-color: var(--pmg-purple);
  --login-hover: rgb(112 32 130 / 10%);
  --password-logout-hover: var(--pmg-purple);
  --nav-logo-background: url('https://assets.paymerang.com/v1/whitelabel-pmg-logo.svg');
  --accent-color: var(--pmg-pink);
  --standard-text-color: #666;
  --standard-dark-text-color: #000;
  --navigation-color: var(--pmg-purple);
  --button-light-border-color: #00c1d57a;
  --text-button-hover-color: var(--pmg-slate);
  --page-header-gradient-color1: var(--pmg-purple);
  --page-header-gradient-color2: var(--pmg-pink);
  --primary-nav-link-color: var(--pmg-purple);
  --primary-nav-link-selected-color: #818181;
  --nav-icon-color: var(--pmg-purple);
  --login-component-border-color: var(--pmg-pink);
  --login-link-color: var(--pmg-purple);
  --login-dropdown-text-color: var(--pmg-purple);
  --login-dropdown-icon-color: var(--pmg-purple);
  --login-dropdown-link-color: var(--pmg-purple);
  --login-dropdown-background-color: #f1f1f1;
  --login-dropdown-background-hover-color: #7020821a;
  --secondary-nav-background-color: #edf1f3;
  --secondary-nav-link-color: var(--pmg-purple);
  --secondary-nav-link-selected-color: var(--standard-text-color);
  --secondary-tabs-background: #edf1f3;
  --secondary-header-color: var(--pmg-purple);
  --password-background-color: var(--pmg-purple);
  --password-background-hover-color: #591968;
  --password-link-color: var(--pmg-light-text-color);
  --left-nav-status-header: var(--pmg-purple);
  --footer-top-border-color: #464646;
  --footer-background-color: #313131;
  --footer-left-logo: url('https://assets.paymerang.com/v1/whitelabel-footer-pmg-logo-tagline.svg');
  --footer-text-color: var(--pmg-light-text-color);
  --footer-email-color: var(--pmg-purple);
  --footer-middle-border-color: var(--pmg-light-text-color);
  --footer-copyright-info: '7401 Beaufont Springs Drive Suite 300 Richmond, VA 23225';
  --login-logo-background: url('https://assets.paymerang.com/v1/icons/login-logo.png');
}

.AUB {
  /* blue: #004B87
     green: #00A754
     gray: #363737
   */
  --standard-light-text-color: #fff;
  --disabled-color: #e9e9e9;
  --disabled-background-color: #fff;
  --message-header-background-color: #eedc00;
  --message-background-color: rgb(238 220 0 / 27%);
  --message-color: #323232;

  /* White label variables */
  --login-color: #004b87;
  --login-hover: rgb(24 82 146 / 10%);
  --password-logout-hover: #004b87;
  --secondary-nav-background: #00a754;
  --nav-logo-background: url('https://assets.paymerang.com/v1/whitelabel-union-bank-logo.svg');
  --accent-color: #004b87;
  --standard-text-color: #363737;
  --standard-dark-text-color: #000;
  --navigation-color: #00a754;
  --button-light-border-color: #00a7547a;
  --text-button-hover-color: #363737;
  --page-header-gradient-color1: #004b87;
  --page-header-gradient-color2: #004b87;
  --primary-nav-link-color: #004b87;
  --primary-nav-link-selected-color: #818181;
  --nav-icon-color: #00a754;
  --login-component-border-color: #00a754;
  --login-link-color: #363737;
  --login-dropdown-text-color: #363737;
  --login-dropdown-icon-color: #004b87;
  --login-dropdown-link-color: #363737;
  --login-dropdown-background-color: #f1f1f1;
  --login-dropdown-background-hover-color: #004b871a;
  --secondary-nav-background-color: #00a754;
  --secondary-nav-link-color: #fff;
  --secondary-nav-link-selected-color: #fff;
  --secondary-tabs-background: rgb(55 174 81 / 20%);
  --secondary-header-color: #363737;
  --password-background-color: #00a754;
  --password-background-hover-color: #00a754;
  --password-link-color: #fff;
  --left-nav-status-header: #004b87;
  --footer-top-border-color: #004b87;
  --footer-background-color: #eee;
  --footer-left-logo: url('https://assets.paymerang.com/v1/client/aub/fdic.svg');
  --footer-text-color: #363737;
  --footer-email-color: #004b87;
  --footer-middle-border-color: #d3d3d3;
  --footer-copyright-info: 'Atlantic Union Bank | 1051 East Cary Street, Suite 1200, Richmond, VA 23219';
  --login-logo-background: url('https://assets.paymerang.com/v1/client/aub/login-logo-poweredByPMG.svg');
}

.Future {
  --standard-light-text-color: #fff;
  --disabled-color: #e9e9e9;
  --disabled-background-color: #fff;
  --login-color: red;
  --message-header-background-color: #eedc00;
  --message-background-color: rgb(238 220 0 / 27%);
  --message-color: #323232;
  --login-hover: rgb(24 82 146 / 10%);
  --password-logout-hover: #004b87;
  --secondary-nav-background: #444;

  /* White label variables */
  --nav-logo-background: url('https://assets.paymerang.com/v1/whitelabel-future-logo.svg');
  --accent-color: red;
  --standard-text-color: #666;
  --standard-dark-text-color: #000;
  --navigation-color: #ffa500;
  --button-light-border-color: #ffa5007a;
  --text-button-hover-color: maroon;
  --page-header-gradient-color1: red;
  --page-header-gradient-color2: #ffa500;
  --primary-nav-link-color: red;
  --primary-nav-link-selected-color: #818181;
  --nav-icon-color: red;
  --login-component-border-color: #ffa500;
  --login-link-color: #666;
  --login-dropdown-text-color: #666;
  --login-dropdown-icon-color: red;
  --login-dropdown-link-color: #666;
  --login-dropdown-background-color: #f1f1f1;
  --login-dropdown-background-hover-color: #ff00001a;
  --secondary-nav-background-color: #ffa500;
  --secondary-nav-link-color: #fff;
  --secondary-nav-link-selected-color: #fff;
  --secondary-tabs-background: rgb(255 165 0 / 20%);
  --secondary-header-color: red;
  --password-background-color: red;
  --password-background-hover-color: #c00;
  --password-link-color: #fff;
  --left-nav-status-header: red;
  --footer-top-border-color: #ffa500;
  --footer-background-color: #fff;
  --footer-left-logo: var(--nav-logo-background);
  --footer-text-color: #000;
  --footer-email-color: red;
  --footer-middle-border-color: #000;
  --footer-copyright-info: 'Future Customer | 456 Someday St. Ste 100 Opportunity, VA 23225';
  --login-logo-background: url('https://assets.paymerang.com/v1/whitelabel-future-logo.svg');
}

/* pmg style guide standards */

@font-face {
  font-family: Mont, sans-serif;
  src: url('../../public/fonts/Mont.woff2');
}

html {
  background: #fafafa;
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  height: 100%;
}

body {
  font-size: 18px;
  max-width: 2500px;
  background-color: #fff;
  margin: 0 auto;
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

i {
  color: var(--navigation-color);
  cursor: pointer;
}

h1 {
  font-weight: 200; /* Extra Light */
  font-size: 80px;
  color: var(--navigation-color);
}

h3 {
  font-weight: 200; /* Extra Light */
  font-size: 32px;
  color: var(--standard-text-color);
}

h4 {
  font-weight: 200; /* Extra Light */
  font-size: 36px;
  color: var(--standard-dark-text-color);
}

h5 {
  font-weight: 400; /* Regular */
  font-size: 26px;
  color: var(--standard-dark-text-color);
}

h6 {
  font-weight: 300; /* Light */
  font-size: 32px;
  color: var(--standard-text-color);
}

.navigation {
  font-weight: 600; /* semi-bold */
  font-size: 14px;
  line-height: 15px;
  color: var(--navigation-color);
  text-transform: uppercase;
}

.navigation.login,
.navigation.avatar,
.navigation.message-icon {
  color: var(--login-color);
}

.navigation.off {
  color: var(--standard-text-color);
  cursor: default;
}

.prev-page {
  font-weight: 600; /* semi-bold */
  font-size: 18px;
  color: var(--navigation-color);
}

.navigation.secondary {
  font-size: 12px;
}

.prev-page:hover {
  text-decoration: underline;
}

.pmg-button {
  display: inline-block;
  height: 45px;
  border-radius: 60px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--pmg-purple);
  font-size: 16px;
  font-weight: 600;
  /* semi-bold */
  padding-left: 1em;
  padding-right: 1em;
  color: var(--pmg-purple);
  text-transform: uppercase;
}

.pmg-button:hover {
  background-color: var(--pmg-purple);
  color: var(--pmg-light-text-color);
  cursor: pointer;
}

.pmg-button[disabled],
.pmg-button:hover[disabled] {
  border-color: var(--pmg-disabled-color);
  background-color: var(--disabled-background-color);
  color: var(--pmg-disabled-color);
  cursor: default;
}

.pmg-button label {
  font-size: 18px;
  text-transform: uppercase;
}

.pmg-button label:hover {
  cursor: pointer;
}

.pmg-title-box {
  background: linear-gradient(0deg, var(--page-header-gradient-color1) 0%, var(--page-header-gradient-color2) 100%);
  color: var(--pmg-light-text-color);
  height: 115px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 61px;
  font-weight: 200;
}

paper-button.pmg-button {
  line-height: 20px;
}

.subHeader {
  font-size: 44px;
  text-align: center;
  color: var(--pmg-purple);
  margin: 0 0 1em;
  font-weight: 200;
}

.welcome {
  color: #333;
  font-size: 14px;
  margin-right: 10px;
}

a {
  color: var(--navigation-color);
  text-decoration: none;
}

.actionButton.noPulse:focus-visible,
a:focus-visible {
  color: var(--text-button-hover-color);
  outline: var(--navigation-color) auto 1px;
}

a:hover {
  color: var(--text-button-hover-color);
}

/* Inputs */
.pmgInput {
  width: 100%;
}

.pmgInput label {
  color: var(--navigation-color);
  font-family: Nunito, sans-serif;
  font-size: 0.9rem;
  margin-left: -12px;
  margin-top: -4px;
}

.MuiInputAdornment-root button .MuiTouchRipple-child.MuiTouchRipple-childPulsate {
  color: var(--navigation-color);
}

.MuiFormLabel-asterisk {
  color: var(--pmg-failure-red);
}

.MuiInputBase-input.MuiOutlinedInput-input {
  font-family: Nunito, sans-serif;
}

.MuiFormHelperText-root {
  margin-left: 2px;
  font-family: Nunito, sans-serif;
}

.MuiOutlinedInput-root.Mui-error .MuiInputAdornment-root button .MuiTouchRipple-child.MuiTouchRipple-childPulsate,
.MuiFormHelperText-root.Mui-error {
  color: var(--pmg-failure-red);
}

.pmgInput label.Mui-focused {
  color: var(--navigation-color);
}

.pmgInput .MuiInputBase-input.MuiOutlinedInput-input {
  padding: 0.5rem 0 0.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pmgInput .MuiOutlinedInput-root {
  color: var(--standard-login-color);
  font-family: Nunito, sans-serif;
}

.pmgInput .MuiOutlinedInput-root fieldset {
  border-top: none;
  border-left: none;
  border-right: none;
  border-color: var(--navigation-color);
  border-radius: 0;
  padding-left: 0;
}

.pmgInput .MuiOutlinedInput-root:hover fieldset {
  border-color: var(--navigation-color);
}

.pmgInput .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--navigation-color);
}

.pmgInput > div[data-title]:hover::after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

.pmgInput > div[data-title]::after {
  content: attr(data-title);
  background-color: var(--standard-text-color);
  color: #fff;
  font-size: 0.8em;
  position: absolute;
  padding: 1px 5px 2px;
  top: 3em;
  box-shadow: 1px 1px 3px #b3b2b2;
  border-radius: 4px;
  opacity: 0;
  z-index: 99999;
  visibility: hidden;
}

.pmgInput > div[data-title] {
  position: relative;
}

.MuiTooltip-tooltip {
  font-family: Nunito, sans-serif;
  background-color: var(--standard-text-color);
  color: #fff;
  font-size: 0.8em;
  padding: 5px;
  box-shadow: 1px 1px 3px #b3b2b2;
  border-radius: 4px;
}

/* MultiLine */
.MuiInputBase-root.MuiOutlinedInput-root {
  color: var(--standard-text-color);
  font-family: Nunito, sans-serif;
}

.multiLineInput label {
  color: var(--navigation-color);
  font-family: Nunito, sans-serif;
  font-size: 1.2em;
  margin-left: -12px;
  margin-top: -20px;
}

.multiLineInput label.MuiFormLabel-filled,
.multiLineInput label.Mui-focused {
  margin-top: -20px;
}

.multiLineInput label.Mui-focused {
  color: var(--navigation-color);
}

.multiLineInput .MuiOutlinedInput-notchedOutline {
  border: none;
}

.multiLineInput {
  width: 100%;
  color: var(--standard-text-color);
  background: var(--gray-f);
}

/* Input disabled styles */
.pmgInput .MuiOutlinedInput-root.Mui-disabled fieldset,
.pmgInput .MuiOutlinedInput-root.Mui-disabled .MuiSvgIcon-root,
.pmgInputDisabled label.Mui-disabled {
  color: var(--gray-c);
  border-bottom-color: var(--gray-c);
}

/* Input error styles */
.pmgInput .Mui-error.MuiOutlinedInput-root fieldset,
.pmgInput label.Mui-error,
.multiLineInput label.Mui-error,
.pmgInput .MuiOutlinedInput-root.Mui-error .MuiSvgIcon-root {
  color: var(--pmg-failure-red);
  border-bottom-color: var(--pmg-failure-red);
}

.inputIcon {
  color: var(--navigation-color);
}

/* read only styles */
.pmgInput.readOnly .MuiOutlinedInput-root.Mui-disabled fieldset,
.pmgInput.readOnly .MuiOutlinedInput-root.Mui-disabled .MuiSvgIcon-root,
.pmgInputDisabled.readOnly label.Mui-disabled {
  color: var(--standard-text-color);
  border-bottom-color: var(--standard-text-color);
}

.pmgInput.readOnly .MuiFormHelperText-root {
  color: var(--standard-text-color);
}

.pmgInput.readOnly .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled {
  -webkit-text-fill-color: unset;
}

.divider {
  height: 1px;
  background-color: var(--gray-b);
  margin: 1em 0;
}

.pmgModal:focus-visible {
  outline: none;
}

.formModal,
.gridModal {
  padding: 48px;
  width: unset;
}

.modalTitle {
  margin-top: 0;
  font-size: 44px;
  font-weight: 200;
  line-height: 50px;
  color: var(--login-color);
}

.modalSubtitle {
  font-size: 2rem;
  color: var(--secondary-header-color);
  font-weight: 200;
}

.modalSuccessCheckImage {
  margin-top: 1em;
}

.modalText {
  color: var(--standard-text-color);
  font-size: 16px;
  padding: 30px 0;
}

.modalBodyList {
  display: inline-block;
  text-align: left;
  list-style: none;
  line-height: 1.5em;
  margin-bottom: 0;
  padding-inline-start: 0;
}

.modalBodyList li::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-light);
  content: '\f56f';
  margin-right: 8px;
  color: var(--login-color);
}

.oopsModal {
  border: 1px solid var(--pmg-failure-red);
}

.oopsModal .popupCloseX,
.oopsModal .pmg-button,
.oopsModal .modalTitle {
  color: var(--pmg-failure-red);
  border-color: var(--pmg-failure-red);
}

.oopsModal .pmg-button:focus-visible,
.oopsModal .pmg-button:hover {
  color: var(--pmg-light-text-color);
  background-color: var(--pmg-failure-red);
}

/* Form Modal */
.formModal .actionButton {
  margin-bottom: 1em;
}

.modalFormWrapper {
  display: flex;
  flex-flow: row wrap;
  width: 70vw;
  margin-top: 1em;
  justify-content: center;
}

.formModalField {
  width: 30%;
}

.modalFlex70 {
  width: 70%;
}

.modalFlex28 {
  width: 28%;
}

.modalFlex48 {
  width: 48%;
}

.modalFlex70:nth-of-type(1),
.modalFlex48:nth-of-type(1) {
  margin-right: 1em;
}

.formModalHr {
  width: 95.4%;
  margin: 2em auto 1.5em;
}

.formModal .pmg-button {
  margin: 1em 0 0 1em;
}

/* Page specific styling */
.buttonRow {
  margin-top: 3em;
}

.gridModalHeaderDetails {
  font-size: 1.3rem;
  font-weight: 300;
  font-family: Nunito, sans-serif;
  color: var(--standard-text-color);
  margin: 1rem 0 1.5rem;
}

.gridModalHeaderDetails > span {
  padding: 0 1rem;
}

.borderRight {
  border-right: 2px solid var(--standard-text-color);
}

.pmgModal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
  font-family: 'Nunito Sans';
  padding: 50px;
  text-align: center;
  width: 890px;
  max-width: 85%;
  max-height: 75%;
  overflow-y: auto;
  box-shadow: rgb(0 0 0 / 14%) 0 16px 24px 2px, rgb(0 0 0 / 12%) 0 6px 30px 5px, rgb(0 0 0 / 40%) 0 8px 10px -5px;
}

.pmgModal:focus-visible {
  outline: none;
}

.formModal,
.gridModal {
  padding: 48px;
  width: unset;
}

.modalTitle {
  margin-top: 0;
  font-size: 44px;
  font-weight: 200;
  line-height: 50px;
  color: var(--login-color);
}

.modalSubtitle {
  font-size: 2rem;
  color: var(--secondary-header-color);
  font-weight: 200;
}

.modalSuccessCheckImage {
  margin-top: 1em;
}

.modalText {
  color: var(--standard-text-color);
  font-size: 18px;
  padding-bottom: 2em;
  padding-top: 1em;
}

.modalBodyList {
  display: inline-block;
  text-align: left;
  list-style: none;
  line-height: 1.5em;
  margin-bottom: 0;
  padding-inline-start: 0;
}

.modalBodyList li::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-light);
  content: '\f56f';
  margin-right: 8px;
  color: var(--login-color);
}

.oopsModal {
  border: 1px solid var(--pmg-failure-red);
}

.oopsModal .popupCloseX,
.oopsModal .pmg-button,
.oopsModal .modalTitle {
  color: var(--pmg-failure-red);
  border-color: var(--pmg-failure-red);
}

.oopsModal .pmg-button:focus-visible,
.oopsModal .pmg-button:hover {
  color: var(--pmg-light-text-color);
  background-color: var(--pmg-failure-red);
}

/* Form Modal */
.formModal .actionButton {
  margin-bottom: 1em;
}

.modalFormWrapper {
  display: flex;
  flex-flow: row wrap;
  width: 70vw;
  margin-top: 1em;
  justify-content: center;
}

.formModalField {
  width: 30%;
}

.modalFlex70 {
  width: 70%;
}

.modalFlex28 {
  width: 28%;
}

.modalFlex48 {
  width: 48%;
}

.modalFlex70:nth-of-type(1),
.modalFlex48:nth-of-type(1) {
  margin-right: 1em;
}

.formModalHr {
  width: 95.4%;
  margin: 2em auto 1.5em;
}

.formModal .pmg-button {
  margin: 1em 0 0 1em;
}

/* Page specific styling */
.buttonRow {
  margin-top: 3em;
}

.gridModalHeaderDetails {
  font-size: 1.3rem;
  font-weight: 300;
  font-family: 'Nunito Sans';
  color: var(--standard-text-color);
  margin: 1rem 0 1.5rem;
}

.gridModalHeaderDetails > span {
  padding: 0 1rem;
}

.borderRight {
  border-right: 2px solid var(--standard-text-color);
}