@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap";
html {
  box-sizing: border-box;
  font-size: 100%;
}

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

*, :before, :after {
  box-sizing: inherit;
}

:focus {
  outline: none;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul {
  margin: 20px 0;
  padding-left: 20px;
  padding-right: 50px;
  list-style-type: disc;
  list-style-position: outside;
}

ul li {
  margin-bottom: 10px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

object {
  pointer-events: none;
}

figure {
  margin: 0;
}

::-webkit-media-controls-panel {
  -webkit-appearance: none;
  display: none !important;
}

::-webkit-media-controls-play-button {
  -webkit-appearance: none;
  display: none !important;
}

::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

html {
  font-size: 16px;
}

body {
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 0 1px #00000003;
  color: #2b3335;
  font-family: Inter, sans-serfif;
  font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02rem;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.2em;
}

h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.875rem;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.375rem;
}

h4 {
  font-size: .875rem;
}

p {
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.5rem;
}

small {
  font-size: .625rem;
}

a {
  color: #037940;
  text-decoration: none;
}

.layout {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.layout__header {
  padding: 20px;
}

.layout__main {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.layout__content {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px;
}

@media screen and (width >= 480px) {
  .layout__content {
    padding: 0;
  }
}

.layout__footer {
  flex-direction: column-reverse;
  padding: 40px 20px;
  display: flex;
}

@media screen and (width >= 480px) {
  .layout__footer {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    display: grid;
  }
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

button, input[type="button"], input[type="submit"], .btn {
  appearance: none;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  background-color: #0000;
  border: 0;
  border-radius: 6px;
  outline: none;
  height: 3rem;
  padding: 0 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 3rem;
  text-decoration: none;
  transition: background-color .35s;
  display: inline-block;
}

button.btn--primary, input[type="button"].btn--primary, input[type="submit"].btn--primary, .btn.btn--primary {
  color: #fff;
  background-color: #037940;
}

button.btn--primary.btn--loading, input[type="button"].btn--primary.btn--loading, input[type="submit"].btn--primary.btn--loading, .btn.btn--primary.btn--loading {
  background-color: #03794080;
}

button.btn--primary:hover, input[type="button"].btn--primary:hover, input[type="submit"].btn--primary:hover, .btn.btn--primary:hover {
  background-color: #026836;
}

button.btn--primary:active, input[type="button"].btn--primary:active, input[type="submit"].btn--primary:active, .btn.btn--primary:active {
  background-color: #025b2f;
}

button.btn--secondary, input[type="button"].btn--secondary, input[type="submit"].btn--secondary, .btn.btn--secondary {
  color: #037940;
  background-color: #e6f2ec;
}

button.btn--secondary.btn--loading, input[type="button"].btn--secondary.btn--loading, input[type="submit"].btn--secondary.btn--loading, .btn.btn--secondary.btn--loading {
  background-color: #d9e6e0;
}

button.btn--secondary:hover, input[type="button"].btn--secondary:hover, input[type="submit"].btn--secondary:hover, .btn.btn--secondary:hover {
  background-color: #d9e8e1;
}

button.btn--secondary:active, input[type="button"].btn--secondary:active, input[type="submit"].btn--secondary:active, .btn.btn--secondary:active {
  background-color: #d9e6e0;
}

button.btn--white, input[type="button"].btn--white, input[type="submit"].btn--white, .btn.btn--white {
  color: #037940;
  background-color: #fff;
}

button.btn--white:hover, button.btn--white:active, input[type="button"].btn--white:hover, input[type="button"].btn--white:active, input[type="submit"].btn--white:hover, input[type="submit"].btn--white:active, .btn.btn--white:hover, .btn.btn--white:active {
  color: #006136;
}

button.btn--warn, input[type="button"].btn--warn, input[type="submit"].btn--warn, .btn.btn--warn {
  color: #fff;
  background-color: #e4625a;
}

button.btn--warn:hover, button.btn--warn:active, input[type="button"].btn--warn:hover, input[type="button"].btn--warn:active, input[type="submit"].btn--warn:hover, input[type="submit"].btn--warn:active, .btn.btn--warn:hover, .btn.btn--warn:active {
  background-color: #de4137;
}

button.btn--small, input[type="button"].btn--small, input[type="submit"].btn--small, .btn.btn--small {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  min-width: 80px;
  height: 40px;
  padding: .4rem .5rem;
  font-size: .75em;
  line-height: 40px;
  display: flex;
}

button.btn--small.btn--icon, input[type="button"].btn--small.btn--icon, input[type="submit"].btn--small.btn--icon, .btn.btn--small.btn--icon {
  padding-left: 48px;
}

button.btn--icon, input[type="button"].btn--icon, input[type="submit"].btn--icon, .btn.btn--icon {
  padding-left: 52px;
  position: relative;
  overflow: hidden;
}

button.btn--icon:before, input[type="button"].btn--icon:before, input[type="submit"].btn--icon:before, .btn.btn--icon:before {
  content: "";
  background-color: #00000005;
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

button.btn--icon svg, input[type="button"].btn--icon svg, input[type="submit"].btn--icon svg, .btn.btn--icon svg {
  max-width: 18px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
}

button.btn--hidden, input[type="button"].btn--hidden, input[type="submit"].btn--hidden, .btn.btn--hidden {
  display: none;
}

button.btn--wide, input[type="button"].btn--wide, input[type="submit"].btn--wide, .btn.btn--wide {
  width: 100%;
}

button.btn--loading, input[type="button"].btn--loading, input[type="submit"].btn--loading, .btn.btn--loading {
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

button.btn--loading:before, input[type="button"].btn--loading:before, input[type="submit"].btn--loading:before, .btn.btn--loading:before {
  content: "";
  z-index: 0;
  background-color: #03794012;
  width: 100%;
  height: 100%;
  animation: 2s ease-in-out infinite loading;
  position: absolute;
  top: 0;
  left: 0;
}

button.btn--completed, input[type="button"].btn--completed, input[type="submit"].btn--completed, .btn.btn--completed {
  color: #037940;
  pointer-events: none;
  cursor: default;
  background-color: #2b33350f;
}

button.btn--completed span, input[type="button"].btn--completed span, input[type="submit"].btn--completed span, .btn.btn--completed span {
  transform: translateY(-48px);
}

button.btn--completed:after, input[type="button"].btn--completed:after, input[type="submit"].btn--completed:after, .btn.btn--completed:after {
  transform: translate(-50%, -50%);
}

button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, .btn:disabled {
  color: #a1a4a5;
  cursor: default;
  background-color: #f1f1f2;
}

button:disabled:hover, button:disabled:active, input[type="button"]:disabled:hover, input[type="button"]:disabled:active, input[type="submit"]:disabled:hover, input[type="submit"]:disabled:active, .btn:disabled:hover, .btn:disabled:active {
  color: #a1a4a5;
  background-color: #f1f1f2;
}

button svg, button span, input[type="button"] svg, input[type="button"] span, input[type="submit"] svg, input[type="submit"] span, .btn svg, .btn span {
  pointer-events: none;
}

button.btn--read-more, input[type="button"].btn--read-more, input[type="submit"].btn--read-more, .btn.btn--read-more {
  color: #037940;
  padding: 0;
}

button.btn--read-more span, input[type="button"].btn--read-more span, input[type="submit"].btn--read-more span, .btn.btn--read-more span {
  vertical-align: middle;
}

button.btn--read-more span + span, input[type="button"].btn--read-more span + span, input[type="submit"].btn--read-more span + span, .btn.btn--read-more span + span {
  background-color: #03794026;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-left: .75rem;
  display: inline-flex;
}

.input-error-message {
  color: red;
  margin-top: 5px;
  font-size: .75rem;
}

.input {
  appearance: none;
  font-family: Inter, sans-serfif;
  font-size: 1rem;
}

:is(.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

.input[type="number"] {
  -moz-appearance: textfield;
}

.input--text, .input--textarea {
  border: 0;
  border-radius: 6px;
  width: 100%;
  transition: border-color .1s;
}

.input--text:hover, .input--textarea:hover {
  border-color: #b8bbbc;
}

.input--text:focus, .input--textarea:focus {
  border-color: #037940;
  outline: none;
}

.input--text {
  height: 3rem;
  padding: 0 1rem;
  line-height: 3rem;
}

.input--textarea {
  resize: vertical;
  height: auto;
  min-height: 200px;
  padding: 1rem;
  line-height: 1.4;
}

.input--border {
  border: 1px solid #e3e6e6;
}

.input--error, .input--error:hover, .input--error:focus {
  border-color: red;
}

.input--checkbox, .input--radio {
  accent-color: #037940;
  appearance: auto;
  opacity: .35;
  width: 20px;
  height: 20px;
  margin: 0;
}

.input--checkbox:hover, .input--radio:hover {
  opacity: .65;
}

.input--checkbox:disabled, .input--checkbox:checked, .input--radio:disabled, .input--radio:checked {
  opacity: 1;
}

.label {
  color: #2b3335;
  font-size: .875rem;
  font-weight: 500;
}

.label--inline {
  display: inline-block;
}

.label--block {
  margin-bottom: 8px;
  display: block;
}

.label--checkbox {
  justify-content: space-between;
  width: 100%;
  font-weight: 400;
  display: inline-flex;
}

.label--checkbox input[type="checkbox"] {
  flex-basis: 20px;
}

.label--checkbox span {
  flex-basis: calc(100% - 20px);
  padding-left: 6px;
}

.form-field {
  margin-bottom: 1rem;
}

.form-field__password {
  position: relative;
}

.form-field__password button {
  position: absolute;
  right: 0;
}

.form-field__password button img {
  display: block;
}

.form-field__info {
  background-color: #f8f8f8;
  border-radius: .5rem;
  margin-bottom: 0;
  padding: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

.message-container {
  border-radius: 6px;
  max-width: 580px;
  margin-bottom: 1rem;
  padding: .75rem 1.25rem;
  display: none;
}

.message-container--account {
  max-width: 480px;
}

.message-container--form {
  margin-top: 1rem;
  display: block;
}

.message-container.error {
  background-color: #ff00000d;
  border: 1px solid #ff000026;
}

.message-container.success {
  background-color: #e6f2ec;
  border: 1px solid #d9e6e0;
}

.message-container p {
  margin-top: 0;
  margin-bottom: 0;
}

.message-container p:only-child {
  margin-bottom: 0;
}

.message-container p + p {
  margin-top: .625rem;
}

.message-container a {
  text-decoration: underline;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

[hidden] {
  display: none;
}

.iframe-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.change-password__header {
  text-align: center;
  margin-bottom: 2rem;
}

.change-password__header img {
  margin-bottom: 2rem;
}

.password-reset__header {
  text-align: center;
  margin-bottom: 2rem;
}

.password-reset__header img {
  margin-bottom: 2rem;
}

.message-container {
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  width: 100%;
}

.message-container.error {
  border: 1px solid #ffcccc;
  background-color: #ffe7e7;
}

.message-container.success {
  border: 1px solid #9ae891;
  background-color: #f0ffe9;
}
