.tr-button-wrap {
  display: flex;
  width: 100%;
  margin-block: 0 2.5rem;
  font-family: var(--tr-font-family-base, "Noto Sans", Arial, sans-serif);
}

.tr-button-wrap,
.tr-button-wrap * {
  font-style: normal !important;
}

.tr-button-wrap--align-left {
  justify-content: flex-start;
}

.tr-button-wrap--align-center {
  justify-content: center;
}

.tr-button-wrap--align-right {
  justify-content: flex-end;
}

:where(.is-layout-flex, .wp-block-group.is-layout-flex) > .tr-button-wrap,
:where(.is-layout-flex, .wp-block-group.is-layout-flex) > .wp-block-trurnit-button {
  flex: 0 0 auto;
  width: auto;
}

.tr-button {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-border: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  gap: var(--tr-space-xs, 0.5rem);
  padding: 0.75rem 1rem;
  border: 0.125rem solid var(--tr-button-border);
  border-radius: 0;
  background: var(--tr-button-bg);
  color: var(--tr-button-color);
  font-family: var(--tr-font-family-base, "Noto Sans", Arial, sans-serif);
  font-size: var(--tr-font-button-md-size, 1.125rem);
  font-weight: 600;
  line-height: var(--tr-font-button-md-line-height, 1.53225rem);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.tr-button:hover,
.tr-button:focus-visible,
.tr-button:active {
  border-color: var(--tr-button-hover-border);
  background-color: var(--tr-button-hover-bg);
  color: var(--tr-button-hover-color);
  text-decoration: none;
}

.tr-button:focus-visible {
  outline: 0.1875rem solid var(--tr-color-brand-kwmk-green, #84bd00);
  outline-offset: 0.1875rem;
}

.tr-button__label {
  display: inline-block;
}

.tr-button__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.tr-button__icon-svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.tr-button--size-xsmall {
  font-size: var(--Typescale-Bodytext-SM, 0.875rem);
  font-weight: 400;
  line-height: 1.45;
}

.tr-button--size-xsmall .tr-button__icon,
.tr-button--size-xsmall .tr-button__icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tr-button--size-small {
  font-size: var(--tr-font-button-md-size, 1.125rem);
  line-height: var(--tr-font-button-sm-line-height, 1.5rem);
}

.tr-button--size-large {
  font-size: var(--tr-font-button-lg-size, 1.125rem);
  line-height: var(--tr-font-button-lg-line-height, 1.53225rem);
}

.tr-button--style-filled.tr-button--color-dark {
  --tr-button-bg: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-color: #fff;
  --tr-button-border: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--appearance-filled-blue {
  --tr-button-bg: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-color: #fff;
  --tr-button-border: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--appearance-filled-black {
  --tr-button-bg: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-color: #fff;
  --tr-button-border: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--appearance-filled-green {
  --tr-button-bg: var(--tr-color-brand-kwmk-green, #84bd00);
  --tr-button-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-border: var(--tr-color-brand-kwmk-green, #84bd00);
  --tr-button-hover-bg: var(--tr-color-brand-kwmk-green-hover, #94cc16);
  --tr-button-hover-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-border: var(--tr-color-brand-kwmk-green-hover, #94cc16);
}

.tr-button--appearance-filled-orange {
  --tr-button-bg: var(--tr-color-brand-kwmk-orange, #f49e00);
  --tr-button-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-border: var(--tr-color-brand-kwmk-orange, #f49e00);
  --tr-button-hover-bg: var(--tr-color-brand-kwmk-orange, #f49e00);
  --tr-button-hover-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-border: var(--tr-color-brand-kwmk-orange, #f49e00);
}

.tr-button--appearance-outlined-blue {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-border: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--appearance-outlined-black {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-border: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--appearance-filled-white {
  --tr-button-bg: #fff;
  --tr-button-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-border: #fff;
  --tr-button-hover-bg: #fff;
  --tr-button-hover-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-border: #fff;
}

.tr-button--appearance-text-link {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-border: transparent;
  --tr-button-hover-bg: transparent;
  --tr-button-hover-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-border: transparent;
  padding-left: 0;
}

.tr-button--appearance-text-link .tr-button__label {
  position: relative;
}

.tr-button--appearance-text-link .tr-button__label::after {
  position: absolute;
  right: 0;
  bottom: -0.125rem;
  left: 0;
  height: 0.0625rem;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease-in-out;
}

.tr-button--appearance-text-link:hover .tr-button__label::after,
.tr-button--appearance-text-link:focus-visible .tr-button__label::after,
.tr-button--appearance-text-link:active .tr-button__label::after {
  transform: scaleX(1);
}

.tr-button--appearance-filled-white-icon-circle {
  --tr-button-bg: #fff;
  --tr-button-color: var(--tr-color-text-headline-positive, #000);
  --tr-button-border: transparent;
  --tr-button-hover-bg: #d8d8d8;
  --tr-button-hover-color: var(--tr-color-text-headline-positive, #000);
  --tr-button-hover-border: #d8d8d8;
  border-width: 0.125rem;
  justify-content: space-between;
  width: 100%;
  min-height: 3.375rem;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  gap: var(--tr-space-m, 1.5rem);
  text-align: left;
  transition: all 0.3s ease-in-out;
}

.tr-button--appearance-filled-white-icon-circle .tr-button__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tr-button--appearance-filled-white-icon-circle .tr-button__icon {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.0625rem solid #d8d8d8;
  border-radius: 999rem;
  background: #fff;
  color: var(--tr-color-text-headline-positive, #000);
  transition: all 0.3s ease-in-out;
}

.tr-button--appearance-filled-white-icon-circle .tr-button__icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tr-button--appearance-filled-white-icon-circle:hover .tr-button__icon,
.tr-button--appearance-filled-white-icon-circle:focus-visible .tr-button__icon,
.tr-button--appearance-filled-white-icon-circle:active .tr-button__icon {
  border-color: #00315f;
  background: #00315f;
  color: #fff;
}

.tr-button-wrap:has(.tr-button--appearance-filled-white-icon-circle),
.wp-block-trurnit-button:has(.tr-button--appearance-filled-white-icon-circle) {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
}

@media (max-width: 47.9375rem) {
  .tr-button-wrap,
  .wp-block-trurnit-button {
    width: 100%;
  }

  .tr-button-wrap--align-left {
    justify-content: center;
  }

  .tr-button-wrap .tr-button:not(.tr-button--appearance-outlined-blue),
  .wp-block-trurnit-button .tr-button:not(.tr-button--appearance-outlined-blue) {
    width: 100%;
  }

  .tr-button--size-xsmall {
    font-size: var(--Typescale-Bodytext-SM, 0.875rem);
    font-weight: 400;
    line-height: 1.45;
  }

  .tr-button--size-small {
    font-size: 1.125rem;
  }

  .tr-button-wrap:has(.tr-button--appearance-outlined-blue),
  .wp-block-trurnit-button:has(.tr-button--appearance-outlined-blue) {
    width: auto;
  }
}

.tr-button--appearance-outlined-white {
  --tr-button-bg: transparent;
  --tr-button-color: #fff;
  --tr-button-border: #fff;
  --tr-button-hover-bg: #fff;
  --tr-button-hover-color: var(--tr-color-text-headline-positive, #000);
  --tr-button-hover-border: #fff;
}

.tr-button--appearance-text-white {
  --tr-button-bg: transparent;
  --tr-button-color: #fff;
  --tr-button-border: transparent;
  --tr-button-hover-bg: transparent;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: transparent;
  min-height: 0;
  padding: 0;
}

.tr-button--style-filled.tr-button--color-white {
  --tr-button-bg: #fff;
  --tr-button-color: var(--tr-color-text-headline-positive, #000);
  --tr-button-border: #fff;
  --tr-button-hover-bg: transparent;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #fff;
}

.tr-button--style-outlined.tr-button--color-dark {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-border: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--style-outlined.tr-button--color-white {
  --tr-button-bg: transparent;
  --tr-button-color: #fff;
  --tr-button-border: #fff;
  --tr-button-hover-bg: #fff;
  --tr-button-hover-color: var(--tr-color-text-headline-positive, #000);
  --tr-button-hover-border: #fff;
}

.tr-button--style-text-only {
  min-height: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.tr-button--style-text-only.tr-button--color-dark {
  --tr-button-color: var(--tr-color-brand-kwmk-blue, #00519e);
  --tr-button-hover-color: #00315f;
  --tr-button-hover-bg: transparent;
  --tr-button-hover-border: transparent;
}

.tr-button--icon-size-large .tr-button__icon,
.tr-button--icon-size-large .tr-button__icon-svg {
  width: 1.5rem;
  height: 1.5rem;
}

.tr-button--appearance-filled-white-icon-circle.tr-button--icon-size-large .tr-button__icon {
  width: 2.25rem;
  height: 2.25rem;
}

.tr-button--style-text-only.tr-button--color-white {
  --tr-button-color: #fff;
  --tr-button-hover-color: #fff;
  --tr-button-hover-bg: transparent;
  --tr-button-hover-border: transparent;
}

.tr-button--color-dark.tr-button--type-secondary {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-border: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-bg: #00315f;
  --tr-button-hover-color: #fff;
  --tr-button-hover-border: #00315f;
}

.tr-button--style-filled.tr-button--color-dark.tr-button--type-secondary {
  --tr-button-bg: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-color: #fff;
  --tr-button-border: var(--tr-color-brand-kwmk-black, #000);
}

.tr-button--color-dark.tr-button--type-tertiary {
  --tr-button-bg: var(--tr-color-brand-kwmk-green, #84bd00);
  --tr-button-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-border: var(--tr-color-brand-kwmk-green, #84bd00);
  --tr-button-hover-bg: var(--tr-color-brand-kwmk-green-hover, #94cc16);
  --tr-button-hover-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-border: var(--tr-color-brand-kwmk-green-hover, #94cc16);
}

.tr-button--style-outlined.tr-button--color-dark.tr-button--type-tertiary {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-green, #84bd00);
  --tr-button-border: var(--tr-color-brand-kwmk-green, #84bd00);
}

.tr-button--type-tertiary {
  font-weight: 600;
}

.tr-button--style-text-only.tr-button--color-dark.tr-button--type-secondary {
  --tr-button-border: transparent;
  --tr-button-hover-border: transparent;
}

.tr-button--style-text-only.tr-button--color-dark.tr-button--type-tertiary {
  --tr-button-bg: transparent;
  --tr-button-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-border: transparent;
  --tr-button-hover-bg: transparent;
  --tr-button-hover-color: var(--tr-color-brand-kwmk-black, #000);
  --tr-button-hover-border: transparent;
}