:root {
  --web-login-background-image: none;

  --background: #191f2c;
  --background-heavier: #191f2c;
  --background-variant: #191f2c;
  --on-background: #ffffff;
  --on-background-variant: #717d96;
  --on-background-variant-transparent: rgba(113, 125, 150, 0.5);

  --surface-lighter: #4a5367;
  --surface: #323948;
  --surface-heavier: #272d3a;
  --surface-variant: #323948;
  --on-surface: #ffffff;
  --on-surface-variant: #979fb5;

  --outline: #3e4556;
  --outline-transparent: rgba(62, 69, 86, 0.29);

  --primary-lighter: #7ad6ef;
  --primary: #3fc5ea;
  --primary-heavier: #00ace8;
  --on-primary: #ffffff;

  --secondary-lighter: #56b78632;
  --secondary: #56b786;
  --secondary-heavier: #2f9c67;
  --on-secondary: #ffffff;

  --accent-lighter: #f3aa56;
  --accent: #eb9346;
  --accent-heavier: #db783e;
  --on-accent: #272d3a;

  --warn-lighter: #eb4e5c32;
  --warn: #eb4e5c;
  --warn-heavier: #e23142;
  --on-warn: #ffffff;
}

.engine-hover--strong:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.engine-hover--normal:hover {
  background-color: rgba(255, 255, 255, 0.125);
}


.engine-hover--weak:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.pt-payment-tile {
  background-color: rgba(255, 255, 255, 0.1);
}

#icon-contactUrl {
  filter: invert(0);
}

#icon-contactUrl {
  filter: invert(1);
}