/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/component/modal/modal.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
.modal__title::before {
  content: "";
  width: var(--logo-triangle--width, 16px);
  aspect-ratio: 1/1;
  background: #ff2d0d;
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.modal__title {
  font-size: var(--heading--font-size);
  color: var(--heading--color, #1E1B1C);
  line-height: var(--heading--line-height, 1);
  font-family: var(--heading--font-family);
  font-weight: var(--heading--font-weight, 600);
  text-transform: var(--heading--text-transform);
  transition: var(--heading--transition, all 200ms ease-in-out);
  margin-top: var(--heading--margin-top);
  margin-bottom: var(--heading--margin-bottom);
}
.modal__title:first-child {
  --heading--margin-top: 0;
}

.modal__title {
  --heading--font-size: var(--h1--font-size, clamp(2.0736rem, 1.93536rem + 0.6912vw, 2.48832rem));
  --heading--font-weight: 800;
  display: flex;
}
.modal__title::before {
  margin-right: 0.25em;
}

@container (width > 500px) {}
.modal {
  box-shadow: 0 3px 6px rgba(30, 27, 28, 0.16), 0 3px 6px rgba(30, 27, 28, 0.23);
  background-color: #ffffff;
  padding-inline: var(--safe-area-inline);
  padding-top: 31.104px;
  container-type: inline-size;
  height: var(--modal--height, auto);
  left: var(--modal--left, 0);
  max-height: var(--modal--max-height, none);
  overflow-y: var(--modal--overflow, auto);
  position: var(--modal--position, fixed);
  top: var(--modal--top, var(--drupal-displace-offset-top, 0));
  transition: all 250ms ease-out allow-discrete;
  width: var(--modal--width, auto);
  container-type: inline-size;
}
.modal__titlebar {
  display: flex;
  padding-bottom: 18px;
}
.modal__close {
  --focus-visible--outline-color: #4678BA;
  aspect-ratio: 1/1;
  position: relative;
  margin-left: auto;
}
.modal__close::after, .modal__close::before {
  border-top: 2px var(--modal-close--border-color, #263b97) solid;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  rotate: var(--modal-close--rotation, 45deg);
  top: 50%;
  transition: all 200ms ease-in-out;
  translate: 0 -50%;
}
.modal__close::after {
  --modal-close--rotation: -45deg;
}
.modal__close:focus-visible::before, .modal__close:focus-visible::after, .modal__close:hover::before, .modal__close:hover::after {
  --modal-close--border-color: #4678BA;
}
.modal__close:focus-visible::before, .modal__close:hover::before {
  --modal-close--rotation: 40deg;
}
.modal__close:focus-visible::after, .modal__close:hover::after {
  --modal-close--rotation: -40deg;
}
.modal--ajax {
  --modal--border-width: 1px;
  --modal--left: 50%;
  --modal--max-height: calc(95dvh - var(--drupal-displace-offset-top, 0px));
  --modal--top: calc(50% + var(--drupal-displace-offset-top, 0px) * 0.5);
  --modal--width: 90%;
  translate: -50% -50%;
  z-index: 103;
}
@media (width > 56em) {
  .modal--ajax {
    --modal--width: 900px;
  }
}
.modal ~ .ui-widget-overlay {
  background: color-mix(in srgb, #1E1B1C, transparent 50%);
}