/*** Allianz One Breakpoints and Mixins ***/
/*** NDBX One Breakpoints and Mixins ***/
.tippy-box[data-placement^=top] > .tippy-svg-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-svg-arrow:after, .tippy-box[data-placement^=top] > .tippy-svg-arrow > svg {
  top: 16px;
  transform: rotate(180deg);
}

.tippy-box[data-placement^=bottom] > .tippy-svg-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-svg-arrow > svg {
  bottom: 16px;
}

.tippy-box[data-placement^=left] > .tippy-svg-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-svg-arrow:after, .tippy-box[data-placement^=left] > .tippy-svg-arrow > svg {
  transform: rotate(90deg);
  top: calc(50% - 3px);
  left: 11px;
}

.tippy-box[data-placement^=right] > .tippy-svg-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-svg-arrow:after, .tippy-box[data-placement^=right] > .tippy-svg-arrow > svg {
  transform: rotate(-90deg);
  top: calc(50% - 3px);
  right: 11px;
}

.tippy-svg-arrow {
  width: 16px;
  height: 16px;
  fill: #333;
  text-align: initial;
}

.tippy-svg-arrow, .tippy-svg-arrow > svg {
  position: absolute;
}

.infopoint {
  display: inline-block;
  vertical-align: middle;
}

.infopoint__button {
  display: block;
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--link-secondary-color-resting);
  anchor-name: var(--infopoint-anchor-name);
  cursor: pointer;
}

.infopoint__button::before {
  content: "\e921";
  font-family: "Allianz Icons";
  font-size: var(--semantic-text-body-l-font-size);
}

.infopoint__button.infopoint__button--medium::before {
  font-size: var(--semantic-text-body-m-font-size);
}

.infopoint__button.infopoint__button--small::before {
  font-size: var(--semantic-text-body-s-font-size);
}

.infopoint__button:hover {
  color: var(--link-secondary-color-hover);
}

.infopoint__button:disabled {
  color: var(--link-secondary-color-disabled);
}

.infopoint__button:active {
  color: var(--link-secondary-color-active);
}

.infopoint__button:active::before {
  content: "\e920";
}

.infopoint__button:focus {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .infopoint__button:focus {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.theme--inverted .infopoint__button, .theme--genz .infopoint__button, .theme--teal-700 .infopoint__button {
  color: var(--link-secondary-inverse-color-resting);
}

.theme--inverted .infopoint__button:hover, .theme--genz .infopoint__button:hover, .theme--teal-700 .infopoint__button:hover {
  color: var(--link-secondary-inverse-color-hover);
}

.theme--inverted .infopoint__button:active, .theme--genz .infopoint__button:active, .theme--teal-700 .infopoint__button:active {
  color: var(--link-secondary-inverse-color-active);
}

.theme--inverted .infopoint__button:disabled, .theme--genz .infopoint__button:disabled, .theme--teal-700 .infopoint__button:disabled {
  color: var(--link-secondary-inverse-color-active);
}

.infopoint__button.icon::before {
  display: block;
}

.infopoint__popover {
  max-width: 560px;
  padding: var(--size-m);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--semantic-border-radius-surface-m);
  background-color: var(--semantic-color-surface-default-resting, #fff);
  z-index: var(--z-index-popup);
  border: 0;
  overflow: visible;
}

.infopoint__wrapper {
  display: inline-block;
}

.infopoint__close {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.infopoint__close-icon {
  font-size: var(--icon-functional-m-size);
  width: fit-content;
  cursor: pointer;
}

.infopoint__close-icon::before {
  display: block;
}

.tippy-box {
  box-shadow: var(--semantic-elevation-500-1-x) var(--semantic-elevation-500-1-y) var(--semantic-elevation-500-1-blur) var(--semantic-elevation-500-1-spread) var(--semantic-elevation-500-1-color);
  box-shadow: var(--semantic-elevation-500-2-x) var(--semantic-elevation-500-2-y) var(--semantic-elevation-500-2-blur) var(--semantic-elevation-500-2-spread) var(--semantic-elevation-500-2-color);
}

.tippy-box > .tippy-svg-arrow svg path {
  fill: var(--semantic-color-surface-default-resting);
}

.tippy-box[data-placement^=top] > .tippy-svg-arrow {
  left: -5px !important;
  bottom: 2px !important;
}

.tippy-box[data-placement^=bottom] > .tippy-svg-arrow {
  left: -5px !important;
  top: 2px !important;
}

.tippy-box[data-placement^=left] > .tippy-svg-arrow {
  top: -4px !important;
  right: 4px !important;
}

.tippy-box[data-placement^=right] > .tippy-svg-arrow {
  top: -4px !important;
  left: 4px !important;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: var(--core-motion-curve-ease-in-out-1);
}

@media (max-width: 703px) {
  .tippy-svg-arrow {
    display: none;
  }
  [data-tippy-root] {
    transform: translateX(0px) !important;
    max-width: unset;
    width: 100%;
  }
  [data-tippy-root] .tippy-box {
    max-width: unset !important;
    width: 100%;
  }
  [data-tippy-root] .tippy-box .infopoint__popover {
    max-width: unset;
    width: calc(100% - var(--size-4m));
    margin: 0 auto;
  }
}
.tippy-box {
  border-radius: var(--semantic-border-radius-surface-m);
}