body,
html {
  background-image: url(data:image/jpeg;base64,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);
  position: fixed;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: initial;
  letter-spacing: initial;
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
    Roboto, Helvetica Neue, sans-serif;
}

.card {
  position: relative;
  width: 528px;
  min-height: 600px;
  background-color: white;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 40px;
}

.inputLabeled {
  display: flex;
  flex-direction: column;
}

.inputLabeled label {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-bottom: 0.25rem;
}

.inputLabeled input {
  min-width: 75px;
  appearance: none;
  border-radius: 0.25rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-transform: initial;
  letter-spacing: initial;
  box-sizing: border-box;
  display: block;
  width: 100%;
  background: transparent;
  outline: none;
  border: 0.0625rem solid #8c9196;
  color: #454f5b;
  max-height: 2.25rem;
  padding: 0.5rem 0.75rem;
}

.inputLabeled input:focus {
  box-shadow: 0 0 0 0.0625rem #008060;
  border-color: #008060;
}

.invalidInput {
  background-color: #fff4f4 !important;
  box-shadow: 0 0 0 0.0625rem #d82c0d!important;
  border-color: #d82c0d!important;
}

.invalidInput:focus {
  background-color: #fff4f4 !important;
  box-shadow: 0 0 0 0.0625rem #d82c0d!important;
  border-color: #d82c0d!important;
}

.button {
  font: 1rem "ShopifySans", -apple-system, BlinkMacSystemFont, San Francisco,
    Segoe UI, Roboto, Helvetica Neue, sans-serif;
  font-weight: 700;
  transition-duration: 0s;
  width: 100%;
  text-align: center;
  text-overflow: ellipsis;
  margin: 0.9375rem 0;
  padding: 0.6875rem 1.5rem;
  min-height: 2.75rem;
  border-color: #3f4eae;
  color: rgb(255, 255, 255);
  position: relative;
  background: rgb(0, 128, 96);
  border-width: 0;
  box-shadow: 0 1px 0 rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 20%);
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  cursor: pointer;
  text-transform: none;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  border-radius: 0.25rem;
  border: 1px solid rgb(186, 191, 195);
}

.button:active {
  background: rgb(0, 94, 70);
  box-shadow: 0 1px 0 rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 20%);
}

.button:hover {
  background: rgb(0, 110, 82);
}

.secondary-button {
  background: white;
  color: #454f5b;
}

.secondary-button:active {
  background: rgb(238, 238, 238);
  box-shadow: 0 1px 0 rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 20%);
}

.secondary-button:hover {
  background: rgb(243, 242, 242);
  box-shadow: 0 1px 0 rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 20%);
}

.divider {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) calc(50% - 1px),
    #8c9196 calc(50%),
    rgba(0, 0, 0, 0) calc(50% + 1px)
  );
  -webkit-box-direction: normal;
}

.divider .divider-content {
  background: #fff;
  color: #8c9196;
  padding: 0 1.5rem;
  -webkit-box-direction: normal;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1rem;
}

.button-group button {
  margin: 0.25rem 0;
}

.modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.664);
}

.cardBody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 568px) {
  .card {
    width: 100%;
    border-radius: 0px;
  }
}

@media only screen and (max-height: 650px) {
  .card {
    height: 100vh;
    border-radius: 0px;
  }
}