.faq-item {
  --summary-gap: 1rem;
  --summary-plus-color: rgb(17, 38, 69);
  --summary-plus-bar-size-narrow: 3px;
  --summary-plus-bar-size-wide: 20px;
  --summary-plus-transition-time: 0.65s;
  --summary-plus-transition-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --summary-plus-transition: var(--summary-plus-transition-time) var(--summary-plus-transition-function);
  --faq-answer-inner-width: 70%;
  --faq-item-border-color: #2d3e501f;
  --faq-button-background-color: #66cb61;
  --faq-button-background-color-hover: #223397;
  --faq-button-color: rgb(17, 38, 69);
  --faq-button-color-hover: #FFFFFF;

  border-bottom: 1px solid var(--faq-item-border-color);
  margin-block: 1rem;
  padding-right: 1.5rem;
}

.faq-item > summary {
  display: grid;
  grid-template-columns: 1fr var(--summary-plus-bar-size-wide);
  gap: var(--summary-gap);
  cursor: pointer;
  padding-bottom: 1.75rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.summary-plus-container {
  margin: auto;
  position: relative;
  width: var(--summary-plus-bar-size-wide);
  height: var(--summary-plus-bar-size-wide);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transform-style: preserve-3d;
  transition: all var(--summary-plus-transition)
}

.summary-plus-horizontal,
.summary-plus-vertical {
  position: absolute;
  background-color: var(--summary-plus-color);
  border-radius: var(--summary-plus-bar-size-narrow);
}

.summary-plus-horizontal {
  width: 100%;
  height: var(--summary-plus-bar-size-narrow);
  transform: translateY(calc((var(--summary-plus-bar-size-wide) / 2) - (var(--summary-plus-bar-size-narrow) / 2)));
}

.summary-plus-vertical {
  width: var(--summary-plus-bar-size-narrow);
  height: 100%;
  transform: scale3d(1, 1, 1) translateX(calc((var(--summary-plus-bar-size-wide) / 2) - (var(--summary-plus-bar-size-narrow) / 2)));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: all var(--summary-plus-transition)
}

.summary-plus-container.summary-plus-open {
  transform: rotateZ(180deg);
}

.summary-plus-container.summary-plus-open .summary-plus-vertical {
  transform: scale3d(1, 0, 0) translateX(calc((var(--summary-plus-bar-size-wide) / 2) - (var(--summary-plus-bar-size-narrow) / 2)));
  opacity: 0;
  }

.faq-answer-inner {
  padding-bottom: 1.25rem;
  max-width: var(--faq-answer-inner-width);
  line-height: 1.25;
}

.faq-button-wrapper {
  display: flex;
  justify-content: left;
  margin-top: 1.875rem;

}

.faq-button {
  display: inline-block;
  padding: 0.75rem 2.125rem;
  text-align: center;
  text-decoration: none;
  color: var(--faq-button-color);
  background-color: var(--faq-button-background-color);
  border-radius: 1.25rem;
  letter-spacing: 0.03125rem;
  text-transform: none;
  min-width: 10.625rem;
  transition: all .2s;

}

.faq-button:hover {
  color: var(--faq-button-color-hover);
  background-color: var(--faq-button-background-color-hover);
}
