/* default class applied to all buttons */
.inail-button {
  padding: 12px 16px 12px 16px;
  border-radius: 4px !important;
  min-width: 128px !important;
  outline-color: transparent !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  border-width: 0;
  font-family: "Open Sans" !important;
}
.inail-button .fa.inail-left-icon {
  margin-left: 0 !important;
  margin-right: 8px !important;
}
.inail-button .fa.inail-right-icon {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* Prevent cursor pointer on icons inside buttons */
.inail-button:disabled .fa {
  cursor: not-allowed !important;
}

.inail-button:not(:disabled):active {
  outline: 3px solid #19191a !important; /* Outer dark outline */
  box-shadow: none !important;
  outline-offset: 2px !important;
}

.inail-button:not(:disabled):focus {
  outline: 3px solid #19191a !important; /* Outer dark outline */
  box-shadow: none !important;
  outline-offset: 2px !important;
}

.inail-button:disabled {
  background-color: #e4e5e9 !important;
  color: #54595d !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

/* primary button */
.inail-button-primary {
  background-color: #002e5f !important;
}

.inail-button-primary:not(:disabled):hover {
  background-color: #00458f !important;
}

.inail-button-primary:not(:disabled):active {
  background-color: #002e5f !important;
}

.inail-button-primary:not(:disabled):focus {
  background-color: #002e5f !important;
}

.inail-button-secondary-icon {
  display: flex !important;
}

.inail-button-secondary-icon span.fa::before {
  color: #002e5f !important;
}

.inail-button-secondary-icon:hover span.fa::before {
  color: #0059b8 !important;
}

/* secondary button */
.inail-button-secondary {
  background-color: transparent !important;
  color: #002e5f !important;
  border: 2px solid #002e5f !important;
  border-radius: 4px !important;
  padding: 10px 16px !important;
}

.inail-button-secondary:not(:disabled):hover {
  color: #0059b8 !important;
  border-color: #0059b8 !important;
}

.inail-button-secondary:not(:disabled):active {
  color: #002e5f !important;
  outline: 3px solid #19191a !important; /* Outer dark outline */
  box-shadow: none !important;
  outline-offset: 2px !important;
}

.inail-button-secondary:not(:disabled):focus {
  color: #002e5f !important;
  outline: 3px solid #19191a !important; /* Outer dark outline */
  box-shadow: none !important;
  outline-offset: 2px !important;
}

.inail-button-secondary:disabled {
  border-color: #e4e5e9 !important;
  background-color: transparent !important;
}

/* success/complete button */
.inail-button-complete {
  background-color: #0a5c12 !important;
}

.inail-button-complete:not(:disabled):hover {
  background-color: #0e821a !important;
}

.inail-button-complete:not(:disabled):active {
  background-color: #0a5c12 !important;
}

.inail-button-complete:not(:disabled):focus {
  background-color: #0a5c12 !important;
}

.inail-button-complete.inail-button-secondary-icon {
  display: flex !important;
}

/* links and link buttons */
.inail-tertiary-button {
  color: #0059b8 !important;
  font-weight: 700 !important;
  font-size: 16px;
  border: none !important;
  border-radius: 4px;
  padding: 6px 4px;
  margin: 6px 16px;
  /*margin: 12px 16px 12px 16px; margin replaces padding of inail-button to avoid distant borders on focus*/
  min-width: max-content !important;
  background: transparent !important;
  outline: none !important;
  font-family: "Open Sans semibold" !important;
}
button.inail-tertiary-button .fa.inail-left-icon,
/* button.inail-text-link-1 .fa.inail-left-icon,
button.inail-text-link-2 .fa.inail-left-icon, */
button.inail-tertiary-button-danger .fa.inail-left-icon {
  margin-left: 0 !important;
  margin-right: 8px !important;
}
button.inail-tertiary-button .fa.inail-right-icon,
/* button.inail-text-link-1 .fa.inail-right-icon,
button.inail-text-link-2 .fa.inail-right-icon, */
button.inail-tertiary-button-danger .fa.inail-right-icon {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

.inail-text-link-2 {
  font-family: "Open Sans" !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 16% !important;
  text-decoration-thickness: 8% !important;
  color: #0059b8 !important;
  padding: 6px 4px;
  margin: 6px 16px;
  outline: none !important;
  display: inline-block !important;
}

.inail-text-link-2-semibold {
  font-family: "Open Sans semibold" !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 16% !important;
  text-decoration-thickness: 8% !important;
  color: #0059b8 !important;
  padding: 6px 4px;
  margin: 6px 16px;
  outline: none !important;
  display: inline-block !important;
}

.inail-text-link-1 {
  font-family: "Open Sans" !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 16% !important;
  text-decoration-thickness: 8% !important;
  padding: 6px 4px;
  margin: 6px 16px;
  outline: none !important;
  display: inline-block !important;
  color: #0059b8 !important;
}

.inail-text-link-1-semibold {
  font-family: "Open Sans semibold" !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 16% !important;
  text-decoration-thickness: 8% !important;
  padding: 6px 4px;
  margin: 6px 16px;
  outline: none !important;
  display: inline-block !important;
  color: #0059b8 !important;
}

.inail-tertiary-button:disabled {
  color: #54595d !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
}

.inail-tertiary-button:disabled:hover {
  color: #54595d !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
}

.inail-tertiary-button:hover,
.inail-text-link-1:hover,
.inail-text-link-2:hover,
.inail-text-link-1-semibold:hover,
.inail-text-link-2-semibold:hover {
  color: #002e5f !important;
}

.inail-tertiary-button:hover span.fa::before {
  color: #002e5f !important;
}

.inail-tertiary-button:active {
  color: #0059b8 !important;
  outline: 3px solid #19191a !important;
}

a.inail-text-link-1:active,
a.inail-text-link-2:active,
a.inail-text-link-1-semibold:active,
a.inail-text-link-2-semibold:active {
  color: #0059b8 !important;
  outline: 3px solid #19191a !important;
  outline-offset: 2px;
}

.inail-tertiary-button:focus {
  color: #0059b8 !important;
  outline: 3px solid #19191a !important;
  outline-offset: 2px;
}

a:focus.inail-text-link-1,
a:focus.inail-text-link-2,
a:focus.inail-text-link-1-semibold,
a:focus.inail-text-link-2-semibold {
  color: #0059b8 !important;
  outline: 3px solid #19191a !important;
  border-radius: 4px !important;
  outline-offset: 2px !important;
}

.inail-button-icon {
  height: 48px !important;
  width: 48px !important;
  max-width: 48px !important;
  min-width: fit-content !important;
  padding: 12px !important;
}

.inail-tertiary-button-danger {
  color: #c9291b !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 6px 4px;
  margin: 6px 16px;
  min-width: max-content !important;
  background: transparent !important;
  border-radius: 4px;
  outline: none !important;
  font-family: "Open Sans semibold" !important;
  letter-spacing: 0 !important;
  line-height: 24px !important;
  font-size: 16px !important;
}

.inail-tertiary-button-danger span.fa::before {
  font-size: 18px !important;
}

.inail-tertiary-button-danger:hover {
  color: #a22216 !important;
}

.inail-tertiary-button-danger:active {
  color: #c9291b !important;
  outline: 3px solid #19191a !important;
}

.inail-tertiary-button-danger:focus {
  color: #c9291b !important;
  outline: 3px solid #19191a !important;
  outline-offset: 2px !important;
}

.inail-tertiary-button-danger:disabled {
  color: #54595d !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
}

.inail-color-danger {
  color: #c9291b !important;
}

.inail-icon-font-button {
  font-size: 18px !important;
}

.inail-ml-16 {
  margin-left: 16px !important;
}
.inail-mr-16 {
  margin-right: 16px !important;
}
.inail-button-feedback {
  color: #54595d;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
