index.css

:root {
  --primary: #334e68;
  --secondary: #f0f4f8;

  --white2: #fafbfc;
  --white1: #ffffff;

  --gray10: #102a43;
  --gray9: #243b53;
  --gray8: #334e68;
  --gray7: #486581;
  --gray6: #627d98;
  --gray5: #829ab1;
  --gray4: #9fb3c8;
  --gray3: #bcccdc;
  --gray2: #d9e2ec;
  --gray1: #f0f4f8;

  --blue10: #035388;
  --blue9: #0b69a3;
  --blue8: #127fbf;
  --blue7: #1992d4;
  --blue6: #2bb0ed;
  --blue5: #40c3f7;
  --blue4: #5ed0fa;
  --blue3: #81defd;
  --blue2: #b3ecff;
  --blue1: #e3f8ff;

  --cyan10: #044e54;
  --cyan9: #0a6c74;
  --cyan8: #0e7c86;
  --cyan7: #14919b;
  --cyan6: #2cb1bc;
  --cyan5: #38bec9;
  --cyan4: #54d1db;
  --cyan3: #87eaf2;
  --cyan2: #bef8fd;
  --cyan1: #e0fcff;

  --green10: #014d40;
  --green9: #0c6b58;
  --green8: #147d64;
  --green7: #199473;
  --green6: #27ab83;
  --green5: #3ebd93;
  --green4: #65d6ad;
  --green3: #8eedc7;
  --green2: #c6f7e2;
  --green1: #effcf6;

  --yellow10: #8d2b0b;
  --yellow9: #b44d12;
  --yellow8: #cb6e17;
  --yellow7: #de911d;
  --yellow6: #f0b429;
  --yellow5: #f7c948;
  --yellow4: #fadb5f;
  --yellow3: #fce588;
  --yellow2: #fff3c4;
  --yellow1: #fffbea;

  --red10: #8a041a;
  --red9: #8a041a;
  --red8: #ab091e;
  --red7: #cf1124;
  --red6: #e12d39;
  --red5: #ef4e4e;
  --red4: #f86a6a;
  --red3: #ff9b9b;
  --red2: #ffbdbd;
  --red1: #ffe3e3;

  --pink10: #620042;
  --pink9: #870557;
  --pink8: #a30664;
  --pink7: #bc0a6f;
  --pink6: #da127d;
  --pink5: #e8368f;
  --pink4: #f364a2;
  --pink3: #ff8cba;
  --pink2: #ffb8d2;
  --pink1: #ffe3ec;

  --p768: 48rem;
  --p640: 40rem;
  --p512: 32rem;
  --p384: 24rem;
  --p300: 18.75rem;
  --p288: 18rem;
  --p256: 16rem;
  --p192: 12rem;
  --p128: 8rem;
  --p96: 6rem;
  --p64: 4rem;
  --p48: 3rem;
  --p32: 2rem;
  --p24: 1.5rem;
  --p20: 1.25rem;
  --p18: 1.125rem;
  --p16: 1rem;
  --p14: 0.875rem;
  --p12: 0.75rem;
  --p8: 0.5rem;
  --p4: 0.25rem;
  --p2: 0.125;
}

.badge10 {
  background: var(--green4);
}
.badge9 {
  background: var(--yellow4);
}
.badge8 {
  background: var(--red4);
}
.badge7 {
  background: var(--pink4);
}
.badge6 {
  background: var(--blue3);
}
.badge5 {
  background: var(--pink3);
}
.badge4 {
  background: var(--green3);
}
.badge3 {
  background: var(--red3);
}
.badge2 {
  background: var(--cyan2);
}
.badge1 {
  background: var(--yellow3);
}

.shade5 {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.shade4 {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05), 0 15px 25px rgba(0, 0, 0, 0.15);
}
.shade3 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.15);
}
.shade2 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.15);
}
.shade1 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.scrolled {
  display: none !important;
}

/* hide scrollbar for chrome */
html {
  overflow: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}

.hide-scrollbar {
  overflow: auto;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
}

/* no select */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

body {
  margin: 0;
  padding: 0;
  font-family: ProximaNova-Regular, Arial, Helvetica, sans-serif;
  font-size: var(--p16);
  color: var(--gray10);
}

h1 {
  font-size: var(--p24);
  font-family: ProximaNova-Bold;
  color: var(--gray7);
}

h2 {
  font-size: var(--p20);
  color: var(--gray7);
  font-family: ProximaNova-Bold;
}

h3 {
  font-size: var(--p16);
  color: var(--gray7);
  font-family: ProximaNova-Bold;
}
header h1,
header h2,
header h3 {
  margin: 0;
}

table {
  border-spacing: 0;
}


/*================*/

.AppWrapper {
  width: 500px;
  height: 400px;
  position: relative;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: scale3D(0.95, 0.95, 0.95);
  }
  to {
    opacity: 1;
    transform: scale3D(1, 1, 1);
  }
}

.Form {
  animation: fade 200ms ease-out;
}

.FormGroup {
  margin: 0 15px 20px;
  padding: 0;
  border-style: none;
  background-color: #7795f8;
  will-change: opacity, transform;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
  inset 0 1px 0 #829fff;
  border-radius: 4px;
}

.FormRow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 15px;
  border-top: 1px solid #819efc;
}

.FormRow:first-child {
  border-top: none;
}

.FormRowLabel {
  width: 15%;
  min-width: 70px;
  padding: 11px 0;
  color: #c4f0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes void-animation-out {
  0%,
  to {
    opacity: 1;
  }
}
.FormRowInput:-webkit-autofill {
  -webkit-text-fill-color: #fce883;
  /* Hack to hide the default webkit autofill */
  transition: background-color 100000000s;
  animation: 1ms void-animation-out;
}

.FormRowInput {
  font-size: 16px;
  width: 100%;
  padding: 11px 15px 11px 0;
  color: #fff;
  background-color: transparent;
  animation: 1ms void-animation-out;
}

.FormRowInput::placeholder {
  color: #87bbfd;
}

.StripeElement--webkit-autofill {
  background: transparent !important;
}

.StripeElement {
  width: 100%;
  padding: 11px 15px 11px 0;
}

.SubmitButton {
  display: block;
  font-size: 16px;
  width: calc(100% - 30px);
  height: 40px;
  margin: 40px 15px 0;
  background-color: #f6a4eb;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
  inset 0 1px 0 #ffb9f6;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 100ms ease-in-out;
  will-change: transform, background-color, box-shadow;
}

.SubmitButton:active {
  background-color: #d782d9;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
  inset 0 1px 0 #e298d8;
  transform: scale(0.99);
}

.SubmitButton.SubmitButton--error {
  transform: translateY(15px);
}
.SubmitButton.SubmitButton--error:active {
  transform: scale(0.99) translateY(15px);
}

.SubmitButton:disabled {
  opacity: 0.5;
  cursor: default;
  background-color: #7795f8;
  box-shadow: none;
}

.ErrorMessage {
  color: #fff;
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 0 15px;
  font-size: 13px;
  margin-top: 0px;
  width: 100%;
  transform: translateY(-15px);
  opacity: 0;
  animation: fade 150ms ease-out;
  animation-delay: 50ms;
  animation-fill-mode: forwards;
  will-change: opacity, transform;
}

.ErrorMessage svg {
  margin-right: 10px;
}

.Result {
  margin-top: 50px;
  text-align: center;
  animation: fade 200ms ease-out;
}

.ResultTitle {
  color: #fff;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 17px;
  text-align: center;
}

.ResultMessage {
  color: #9cdbff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.6em;
  text-align: center;
}

.ResetButton {
  border: 0;
  cursor: pointer;
  background: transparent;
}

[data-amplify-authenticator][data-variation=modal] {
  background-image: url("/public/landing-page.png");
  background-position: center;
}