.toggle {
  position: relative;
  transition: width 0.4s ease-in-out;
}

@media (min-width: 992px) {
  .toggle-close {
    align-items: center;
    background-color: var(--white);
    border-radius: 100%;
    box-shadow: 4px 4px 9px rgba(var(--black-rgb), 0.16);
    cursor: pointer;
    display: flex;
    height: 26px;
    justify-content: center;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 26px;
  }

  .toggle-close::before {
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5581 0.351847C10.7294 0.523076 10.8256 0.755311 10.8256 0.997466C10.8256 1.23962 10.7294 1.47186 10.5581 1.64309L6.89964 5.30159L10.5581 8.9601C10.7294 9.13133 10.8256 9.36357 10.8256 9.60572C10.8256 9.84788 10.7294 10.0801 10.5581 10.2513C10.3869 10.4226 10.1547 10.5188 9.91253 10.5188C9.67037 10.5188 9.43814 10.4226 9.26691 10.2513L5.6084 6.59283L1.94989 10.2513C1.77866 10.4226 1.54642 10.5188 1.30427 10.5188C1.06212 10.5188 0.82988 10.4226 0.658651 10.2513C0.487422 10.0801 0.391227 9.84788 0.391227 9.60572C0.391227 9.36357 0.487422 9.13133 0.658651 8.9601L4.31716 5.30159L0.658651 1.64309C0.487422 1.47186 0.391227 1.23962 0.391227 0.997466C0.391227 0.755311 0.487422 0.523076 0.658651 0.351847C0.82988 0.180618 1.06212 0.0844224 1.30427 0.0844224C1.54642 0.0844224 1.77866 0.180618 1.94989 0.351847L5.6084 4.01036L9.26691 0.351847C9.43814 0.180618 9.67037 0.0844224 9.91253 0.0844224C10.1547 0.0844224 10.3869 0.180618 10.5581 0.351847Z' fill='%23824199'/%3E%3C/svg%3E%0A");
    content: "";
    height: 11px;
    width: 11px;
  }
}

@media (min-width: 992px) {
  .toggle-collapsed {
    white-space: nowrap;
    width: 40px !important;
  }
}

.toggle-collapsed .toggle-click {
  display: flex;
}

.toggle-collapsed .content {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  position: relative;
}

@media (min-width: 992px) {
  .toggle-collapsed .content {
    overflow: hidden;
  }
}

.toggle-collapsed .content::before {
  background-color: var(--white);
  content: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

@media (min-width: 992px) {
  .toggle-collapsed .content::before {
    content: "";
  }
}

.toggle-expanded {
  width: 100% !important;
}

@media (min-width: 992px) {
  .toggle-expanded .toggle-width {
    transition: width 0.4s ease-in-out;
    width: 50%;
  }
}

.toggle-expanded .center {
  justify-content: flex-start;
}

.toggle-normal .toggle-spacing {
  padding-left: 1rem;
}

@media (min-width: 992px) {
  .toggle-button {
    align-items: center;
    background-color: var(--white);
    border-radius: 50%;
    box-shadow: 4px 4px 9px rgba(var(--black-rgb), 0.16);
    cursor: pointer;
    display: none;
    height: 25px;
    justify-content: center;
    left: -15px;
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    width: 25px;
    z-index: 12;
  }

  .toggle-button::before {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='17' viewBox='0 0 12 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3563 1.01951C11.9199 1.65929 11.8638 2.63991 11.2311 3.20979L5.35789 8.5L11.2311 13.7902C11.8638 14.3601 11.9199 15.3407 11.3563 15.9805C10.7927 16.6203 9.82299 16.6769 9.1903 16.1071L0.744873 8.5L9.1903 0.892938C9.82299 0.323059 10.7927 0.379726 11.3563 1.01951Z' fill='%23824199'/%3E%3C/svg%3E%0A");
    content: "";
    height: 16px;
    width: 11px;
  }

  .toggle.toggle-collapsed .toggle-button {
    display: flex;
  }
}