.gb-button {
  font-family: "Gilroy", sans-serif;
}

/* Correct alignment of buttons in header on mobile */
.gb-button-wrapper.mobile-align-right {
  align-items: flex-end;
}

@media (min-width: 769px) {
  .gb-button-wrapper.mobile-align-right {
    align-items: inherit;
  }
}

.gb-button.jojo,
.ff-btn-submit,
.button.jojo,
button.jojo {
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px #6464641a;
  background-color: var(--white);
  color: var(--darkblue);
  font-family: "Gilroy", sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 24px !important;
  text-align: center;
  transition: all var(--animation-duration-normal) var(--animation-timing-ease-out) !important;
  width: fit-content;
  text-decoration: unset !important;
  border: 1px solid #dce4f9;
}

.gb-button.jojo:hover,
.gb-button.jojo:active,
.gb-button.jojo:focus,
.ff-btn-submit:hover,
.ff-btn-submit:active,
.ff-btn-submit:focus,
.button.jojo:hover,
.button.jojo:active,
.button.jojo:focus,
button.jojo:hover,
button.jojo:active,
button.jojo:focus {
  box-shadow: 0 1px 3px #6464641a;
  color: var(--darkblue);
  cursor: pointer;
  text-decoration: none;
  background-color: #f6f8fd;
  ;
}

/* Small */
.gb-button.jojo.small,
.button.jojo.small,
button.jojo.small {
  padding: 5px 14px !important;
  min-height: 2.125rem !important;
}

/* Extra-small */
.gb-button.jojo.extrasmall,
.button.jojo.small,
button.jojo.extrasmall {
  padding: 1px 8px !important;
  min-height: 1.5rem !important;
}

.gb-button.jojo.extrasmall > span,
button.jojo.extrasmall > span {
  font-size: 0.875rem !important;
}

/* Full width */
.gb-button.jojo.full-width {
  width: 100% !important;
  display: inline-block;
}

.gb-button.jojo.red {
  background-color: var(--red) !important;
  color: var(--white) !important;
}

.gb-button.jojo.primary,
.ff-btn-submit,
.gb-button.jojo.blue,
.button.jojo.primary,
button.jojo.primary {
  background-color: var(--blue) !important;
  color: var(--white) !important;
  border: 1px solid var(--blue) !important;
}

.gb-button.jojo.primary:hover,
.ff-btn-submit:hover,
.gb-button.jojo.blue:hover,
.button.jojo.primary:hover,
button.jojo.primary:hover {
  background-color: #2049bf !important;
  color: var(--white) !important;
  border: 1px solid #2049bf !important;
}

.gb-button.jojo.lightblue {
  background-color: var(--lightblue) !important;
  color: var(--darkblue) !important;
}

.gb-button.jojo.green {
  background-color: var(--green) !important;
  color: var(--white) !important;
}

.gb-button.jojo.orange {
  background-color: var(--orange) !important;
  color: var(--white) !important;
}

.gb-button.jojo.purple {
  background-color: var(--purple) !important;
  color: var(--white) !important;
}

.gb-button.jojo.white {
  background-color: var(--white) !important;
  color: var(--darkblue) !important;
}

.gb-button.jojo.ainstein {
  background: rgb(117, 93, 221) !important;
  background: linear-gradient(65deg, rgba(117, 93, 221, 1) 0%, rgba(241, 160, 160, 1) 100%) !important;
  color: #ffffff !important;
  border: unset !important;
}