@charset "UTF-8";
* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
.flex {
  display: flex;
}

.flex-center {
  justify-content: center;
}

.flex-left {
  justify-content: flex-start;
}

.flex-right {
  justify-content: flex-end;
}

.flex-v-center {
  align-items: center;
}

.no-margin {
  margin: 0;
}

/**
 * @prop --tct-loading-primary-color: (<color>) Controls the stroke color of the loading spinner.
 * @prop --tct-loading-spinner-size: (<length>) Controls the size of the loading spinner.
 * @prop --tct-loading-skeleton-element-background: (<color>) Controls the background color of skeleton loading shapes (rectangles and circles).
 * @prop --tct-loading-skeleton-shimmer-color: (<color>) Controls the color of the shimmer animation overlay on skeleton loading shapes.
 * @prop --tct-loading-skeleton-rectangle-min-height: (<length>) Controls the minimum height of skeleton loading rectangles.
 * @prop --tct-loading-skeleton-horizontal-gap: (<length-percentage>) Controls the horizontal gap between skeleton loading elements.
 * @prop --tct-loading-skeleton-vertical-gap: (<length-percentage>) Controls the vertical gap between skeleton loading elements.
 */
:host {
  display: block;
}

:host([inline]),
:host([modifiers*=inline]) {
  display: inline-block;
}

:host([hidden]) {
  display: none;
}

:host(:not([inline]):not([modifiers*=inline])) {
  /* stylelint-disable-next-line tecton/require-t-px-fallback */
  font-size: var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)));
}

.q2-loading-animation {
  height: 1em;
  width: 1em;
}

#custom-loader-container {
  min-height: 1em;
  min-width: 1em;
}
#custom-loader-container svg {
  display: block;
}

.half-circle-spinner,
.half-circle-spinner * {
  box-sizing: border-box;
}

.half-circle-spinner {
  border-radius: 100%;
  position: relative;
}
.half-circle-spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}

.half-circle-spinner .head {
  fill: none;
  stroke: var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));
  stroke-width: 6;
  stroke-linecap: round;
  /* For r=20, circumference = 2πr ≈ 125.6637 */
  /* Dot length ≈ 1 */
  /* 270deg arc length = 0.75 * circumference ≈ 94.2478 */
  stroke-dasharray: 1 124.6637;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: spin 2.5s linear infinite, grow 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 2 complete revolutions per cycle */
@keyframes spin {
  to {
    transform: rotate(720deg);
  }
}
/* Dot -> 270deg arc -> Dot */
@keyframes grow {
  0% {
    stroke-dasharray: 1 124.6637; /* dot */
    stroke-dashoffset: 0;
  }
  /* grow into a 270° arc */
  50% {
    stroke-dasharray: 94.2478 31.4159; /* 270deg arc + remaining gap */
    stroke-dashoffset: -31.4159; /* shifts so the arc "travels" */
  }
  /* collapse back into a dot */
  100% {
    stroke-dasharray: 1 124.6637;
    stroke-dashoffset: -125.6637; /* wraps around cleanly */
  }
}
:host {
  --comp-loading-skeleton-opacity: var(--var-loading-skeleton-opacity, 0.25);
}
@media (prefers-contrast: more) {
  :host {
    --comp-loading-skeleton-opacity: var(--var-loading-skeleton-opacity, 1);
  }
}

.q2-loading-skeleton {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --comp-loading-skeleton-shimmer-color: var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));
  --comp-loading-skeleton-vertical-gap: var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));
  --comp-loading-skeleton-horizontal-gap: var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px));
}

.q2-loading-skeleton-shimmer {
  position: absolute;
  width: 1rem;
  height: 100%;
  top: 0;
  left: -100px;
  animation: skeletonShimmer 3s ease-in-out infinite;
  background-color: var(--comp-loading-skeleton-shimmer-color);
  box-shadow: 0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);
  transform: rotate(10deg);
}

/* Atoms */
.skeleton-shape.rectangle:not(.no-margin) {
  margin: var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px));
}

.skeleton-shape.circle,
.skeleton-shape.rectangle {
  background: var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)));
  opacity: var(--comp-loading-skeleton-opacity);
}

.skeleton-shape.rectangle {
  min-height: var(--tct-loading-skeleton-rectangle-min-height, 20px);
}

.skeleton-shape.circle {
  border-radius: 50%;
  padding-top: 100%;
}

/* Uitils */
.flex .rectangle {
  flex-grow: 1;
}

/* Table */
.skeleton-table-row .rectangle {
  margin: var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap);
}

.skeleton-table-row .rectangle:not(:first-child):not(:last-child) {
  flex-grow: 2;
}

.skeleton-table-row-border .skeleton-shape {
  margin: 0 var(--comp-loading-skeleton-horizontal-gap);
}

/* form */
.form {
  flex-wrap: wrap;
}

.form .field {
  margin: var(--comp-loading-skeleton-vertical-gap) 0;
}

.form.columns-1 .field {
  flex-basis: 100%;
}

.form.columns-2 .field {
  flex-basis: 50%;
}

.form.columns-3 .field {
  flex-basis: 33.3333%;
}

.form.columns-4 .field {
  flex-basis: 25%;
}

.form.columns-5 .field {
  flex-basis: 20%;
}

/* text */
.text .rectangle {
  margin-bottom: 0;
}

.text .header.center {
  margin: 0 auto;
}

.text .header.right {
  margin-left: auto;
}

.text .header {
  height: 1.5rem;
}

.text .header.smaller {
  height: 1rem;
}

/* Detailed Item */
.detailed-item {
  flex-wrap: wrap;
}

.detailed-item.right {
  flex-flow: row-reverse;
}

.detailed-item-image {
  flex: 0 0 auto;
  display: inline-flex;
}

.center .detailed-item-image {
  flex-basis: 100%;
  display: flex;
}

.detailed-item-image .rectangle {
  flex-grow: 0;
}

.detailed-item-text > div {
  width: 100%;
}

.detailed-item-text {
  flex: 1 1 auto;
}

.detailed-item-text .text {
  margin-top: 0;
  margin-bottom: 0;
}

/* Label-value */
.label-value {
  flex-wrap: wrap;
}

.label-value .rectangle {
  flex-basis: calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap));
}

@keyframes skeletonShimmer {
  0% {
    left: -100px;
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    left: 800px;
    opacity: 0;
  }
}