:root {
  --icon-collapse-arrow: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.19999 0.62748C1.24814 0.625675 1.29605 0.635472 1.34001 0.656148C1.38398 0.676823 1.42282 0.70783 1.45357 0.746741L7.80234 8.08554L14.5271 0.74674C14.5582 0.712603 14.5955 0.685464 14.6368 0.666897C14.6781 0.64833 14.7227 0.63879 14.7676 0.63879C14.8126 0.63879 14.8571 0.64833 14.8984 0.666897C14.9397 0.685464 14.9771 0.712603 15.0081 0.74674C15.0722 0.815331 15.1081 0.907577 15.1081 1.00362C15.1081 1.09967 15.0722 1.19192 15.0081 1.26051L8.01222 8.82865C7.9792 8.86399 7.93972 8.89193 7.89614 8.91085C7.85256 8.92976 7.80579 8.93926 7.75862 8.93873C7.71146 8.93926 7.66467 8.92976 7.62109 8.91085C7.57751 8.89193 7.53803 8.86399 7.50501 8.82865L0.911392 1.25133C0.849302 1.18166 0.814758 1.08982 0.814758 0.994444C0.814758 0.899069 0.849302 0.807228 0.911392 0.737558C0.947039 0.695572 0.992082 0.663604 1.04245 0.64439C1.09282 0.625176 1.14696 0.619321 1.19999 0.62748Z' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.50501 8.82865L0.911392 1.25133C0.849302 1.18166 0.814758 1.08982 0.814758 0.994444C0.814758 0.899069 0.849302 0.807228 0.911392 0.737558C0.947039 0.695572 0.992082 0.663604 1.04245 0.64439C1.09282 0.625176 1.14696 0.619321 1.19999 0.62748C1.24814 0.625675 1.29605 0.635472 1.34001 0.656148C1.38398 0.676823 1.42282 0.70783 1.45357 0.746741L7.80234 8.08554L14.5271 0.74674C14.5582 0.712603 14.5955 0.685464 14.6368 0.666897C14.6781 0.64833 14.7227 0.63879 14.7676 0.63879C14.8126 0.63879 14.8571 0.64833 14.8984 0.666897C14.9397 0.685464 14.9771 0.712603 15.0081 0.74674C15.0722 0.815331 15.1081 0.907577 15.1081 1.00362C15.1081 1.09967 15.0722 1.19192 15.0081 1.26051L8.01222 8.82865C7.9792 8.86399 7.93972 8.89193 7.89614 8.91085C7.85256 8.92976 7.80579 8.93926 7.75862 8.93873C7.71146 8.93926 7.66467 8.92976 7.62109 8.91085C7.57751 8.89193 7.53803 8.86399 7.50501 8.82865ZM7.75863 9.2813C7.66098 9.28183 7.56504 9.26184 7.47671 9.2235C7.38723 9.18466 7.30806 9.12811 7.24314 9.05862L7.23479 9.04968L0.642474 1.47353C0.523795 1.33948 0.461426 1.16805 0.461426 0.99443C0.461426 0.821376 0.523388 0.650502 0.64131 0.516648C0.713504 0.432672 0.806372 0.366297 0.91309 0.325588C1.01072 0.288347 1.11617 0.274087 1.22112 0.284753C1.31604 0.286161 1.4091 0.307876 1.49421 0.347901C1.58677 0.391429 1.66625 0.45483 1.7284 0.531331L7.81003 7.56134L14.2621 0.520209C14.2622 0.520025 14.2619 0.520394 14.2621 0.520209C14.3245 0.451673 14.4015 0.395022 14.4883 0.356045C14.5757 0.316778 14.6708 0.296201 14.7676 0.296201C14.8644 0.296201 14.9595 0.316786 15.0469 0.356045C15.1332 0.394792 15.2093 0.45046 15.2716 0.518446C15.3959 0.652396 15.4614 0.826847 15.4614 1.00361C15.4614 1.18079 15.3956 1.35564 15.2707 1.48972C15.2704 1.48998 15.2702 1.49024 15.27 1.4905L8.27534 9.05728L8.27409 9.05862C8.20917 9.12811 8.13 9.18466 8.04052 9.2235C7.95221 9.26183 7.85629 9.28183 7.75863 9.2813Z' /%3E%3C/svg%3E");
}

.collapse-title {
  background-color: var(--white);
  border-radius: 20px;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  display: flex;
  height: 54px;
  interpolate-size: allow-keywords;
  margin-bottom: 1rem;
  overflow: hidden;
  padding: 15px 15px 15px 20px;
  position: relative;
  line-height: 1.1;
  transition: height 0.5s ease;
}

.collapse-title.normal .collapse-heading,
.collapse-title.normal .collapse-information {
  display: block;
}

.collapse-title.none {
  background-color: transparent;
  border-radius: 0;
  border: none;
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
}

.collapse-title.none.active .collapse-plus,
.collapse-title.none .collapse-plus {
  top: auto;
}

.collapse-title.active {
  height: auto;
}

.collapse-heading {
  align-items: center;
  display: flex;
}

.collapse-title.none .collapse-plus,
.collapse-title.none.active .collapse-plus {
  filter: invert(30%) sepia(10%) saturate(4947%) hue-rotate(246deg)
    brightness(97%) contrast(87%);
  opacity: 1;
}

.collapse-title.none.active .collapse-heading {
  margin-bottom: 1.25rem;
}

.collapse-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease-out, opacity 0.5s ease-out;
  visibility: hidden;
}

.collapse-content > * {
  min-height: 0;
}

.collapse-title.active .collapse-content {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.collapse-name {
  overflow: hidden;
  padding-left: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .collapse-name {
    display: none;
  }

  .collapse-name.active {
    display: block;
  }
}

.collapse-title.active .collapse-name {
  display: none;
}

.collapse-check {
  position: relative;
  top: 2px;
}

.collapse-delete {
  left: 47px;
  position: absolute;
  top: 16px;
}

.collapse-primary {
  margin-left: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.collapse-title.active .collapse-primary {
  overflow: visible;
  text-overflow: inherit;
  white-space: inherit;
}

.collapse-information {
  display: flex;
  overflow: hidden;
  padding-top: 1px;
  width: 100%;
}

.collapse-title.active .collapse-information {
  display: block;
}

.collapse-secondary {
  align-items: center;
  color: var(--light-blue);
  font-size: 14px;
  margin-left: 1rem;
  white-space: nowrap;
}

.collapse-title.active .collapse-secondary {
  display: flex;
  padding-top: 1.5rem;
}

.collapse-icons {
  display: none;
  gap: 10px;
}

.collapse-title.active .collapse-icons {
  display: flex;
}

.collapse-plus {
  background: var(--icon-collapse-arrow);
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  height: 10px;
  position: relative;
  top: 6px;
  transition: transform 0.3s ease-in-out;
  width: 16px;
  filter: opacity(0.5);
}

.collapse-title.active .collapse-plus {
  top: 6px;
  transform: rotate(180deg);
  filter: opacity(1);
}

@media (min-width: 992px) {
  .collapse-plus:hover {
    filter: opacity(1);
  }
}

.collapse-date {
  margin-right: auto;
  position: relative;
  top: 1px;
}