.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-width: 0;
  padding: 0.375rem 0.9375rem;
  border-radius: 0.1875rem;
  --tw-bg-opacity: 1;
  background-color: rgba(29,115,213,var(--tw-bg-opacity));
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(255,255,255,var(--tw-text-opacity));
  text-decoration: none;
}

.btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(25, 98, 181, var(--tw-bg-opacity));
}

.btn:focus {
  outline: none!important;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--flat:focus.text-white:before {
 border-radius: calc(0.1875rem + 4px);
 content: "";
 position: absolute;
 inset: -4px;
 border: 2px solid white;
}
.btn--flat:focus.btn--flat:before {
 border-radius: calc(0.1875rem + 4px);
 content: "";
 position: absolute;
 inset: -4px;
 border: 2px solid #00385C;
}
.btn--flat:focus.btn:before {
 border-radius: calc(0.1875rem + 4px);
 content: "";
 position: absolute;
 inset: -4px;
 border: 2px solid white;
}
.btn:focus:before {
 border-radius: calc(0.1875rem + 4px);
 content: "";
 position: absolute;
 inset: -4px;
 border: 2px solid #1D73D5;
}

/* prevent outline when clicking on button */
btn:focus:not(:focus-visible) {
  border: none;
  outline: none;
}

.btn:focus:not(:focus-visible)::before {
  border-color: transparent;
}

.btn.icon-only {
  padding: 0.3125rem;
  justify-content: center;
}

/* RED */
.btn--red {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 0, 50, var(--tw-bg-opacity));
}

.btn--red:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(203, 41, 44, var(--tw-bg-opacity));
}

.btn--red:focus:before {
  --tw-bg-opacity: 1;
  border: 2px solid rgba(255, 0, 50, var(--tw-bg-opacity));
}
/* END RED */

.btn--white {
  background-color: white;
  color: #00385C;
}

.btn--white:hover {
  background-color: #e1e8eb;
}

.btn--white:focus:before {
  border: 2px solid white;
}

.btn--md {
   padding: 0.375rem 0.9375rem;
   font-size: 1rem;
   line-height: 1.375rem;
}

.btn--lg {
  height: 3.25rem;
  padding: 0 1.4375rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.btn--flat {
   padding: 0.5rem;
}

.btn--flat {
   background-color: transparent;
   --tw-text-opacity: 1;
   color: rgba(0,56,92,var(--tw-text-opacity));
}

.btn--flat:active.btn--flat, 
.btn--flat:hover.btn--flat,
.btn--flat:active.text-brand,
.btn--flat:hover.text-brand {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(222,233,250,var(--tw-bg-opacity))!important;
}

.btn--flat:active.text-white,
.btn--flat:hover.text-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(25, 98, 181, var(--tw-bg-opacity)) !important;
}

.btn .icon-suffix {
  margin-left: 0.375rem;
}