/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
/* Horizontal line */
.collapsible-link::before {
  content: "";
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: "";
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded="true"]::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded="true"]::before {
  transform: rotate(180deg);
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
  background: #fbfdff;
  background: -webkit-linear-gradient(to left, #fbfdff, #c3d2e3);
  background: linear-gradient(to left, #fbfdff, #c3d2e3);
  min-height: 100vh;
}