:root {
  --irs-gray-2: #d6d7d9;
  --irs-gray-3: #f3f3f3;
  --irs-grey-darkest: #1b1b1b;
  --irs-blue-4: #00599c;
}

.accordion {
  margin-bottom: 20px;
  border: 1px solid var(--irs-gray-2);
}

.accordion .accordion-heading {
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  margin-block: 0px;
}

.accordion .accordion-trigger {
  padding: 16px;
  margin: 0px;
  border: none;
  background-color: transparent;
  color: var(--irs-grey-darkest);
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: inherit;
  transition: none;
  /* 
  'hanging' achieves the desired effect without positioning and magic numbers,
  but it's only supported in FireFox. If this ever makes it into Chromium, uncomment
  and remove the positioning code in the 'accordion-trigger::before' rule
  */
  /* text-indent: 2rem hanging; */
  padding-left: 48px;
  position: relative;
}
.accordion .accordion-trigger:hover {
  background-color: var(--irs-gray-3);
}
.accordion .accordion-trigger:focus {
  outline: 3px solid highlight;
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}
.accordion .accordion-trigger::before {
  position: absolute;
  top: 25px;
  left: 20px;
  content: '';
  background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%2300599c'/%3e%3c/svg%3e");
  background-position: center left;
  background-repeat: no-repeat;
  width: 18px;
  height: 11px;
  display: inline-block;
}

.accordion .accordion-heading:not(:last-of-type) .accordion-trigger[aria-expanded="false"] {
  border-bottom: 1px solid var(--irs-gray-2);
}
.accordion .accordion-trigger[aria-expanded="true"]::before {
  transform: rotateX(180deg);
}

.accordion .accordion-panel {
  color: var(--irs-grey-darkest);
  padding: 0px 16px 16px 48px;
  margin: 0;
  overflow: hidden;
}
.accordion .accordion-panel:not(:last-of-type) {
  border-bottom: 1px solid var(--irs-gray-2);
}
.accordion .accordion-panel[hidden] {
  display: unset !important;
}

.accordionBtnWrapper {
  text-align: right;
}
.accordionBtnWrapper > .expandBtn, .accordionBtnWrapper > .collapseBtn {
  background-color: transparent;
  border: none;
  text-decoration: underline;
  color: var(--irs-blue-4);
}
.accordionBtnWrapper > button:focus {
  outline: 3px solid highlight;
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}