.drawer {
  border-bottom: 3px solid #70c2f2;
  margin-bottom: 15px;
}

.drawer > div {
  display: none;
  margin: 0 0 15px;
  padding: 0 10px 0 20px;
  border-left: 10px solid rgba(128, 128, 128, 0.2);
}

.drawer > div > :first-child {
  margin-top: 0 !important;
}

.drawer > div > :last-child {
  margin-bottom: 0 !important;
}

.drawer > h1,
.drawer > h2,
.drawer > h3,
.drawer > h4,
.drawer > h5,
.drawer > h6 {
  padding: 15px 36px 15px 0 !important;
  margin: 0 !important;
  position: relative;
  cursor: pointer;
  display: block;
}

.drawer > h1:before,
.drawer > h2:before,
.drawer > h3:before, 
.drawer > h4:before,
.drawer > h5:before,
.drawer > h6:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 12px;
  width: 21px;
  height: 3px;
  background-color: #70c2f2;
  transform: translate(9px, -50%);
}

.drawer > h1:after,
.drawer > h2:after,
.drawer > h3:after,
.drawer > h4:after,
.drawer > h5:after,
.drawer > h6:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 12px;
  width: 3px;
  height: 21px;
  background-color: #70c2f2;
  transform: translate(0, -50%);
  transition: all ease 0.2s;
}

.drawer.active > h1:after,
.drawer.active > h2:after,
.drawer.active > h3:after,
.drawer.active > h4:after,
.drawer.active > h5:after,
.drawer.active > h6:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 12px;
  width: 3px;
  height: 1px;
  transform: translate(0, -50%);
}

.drawer.drawer-dark > h1:before,
.drawer.drawer-dark > h2:before,
.drawer.drawer-dark > h3:before,
.drawer.drawer-dark > h4:before,
.drawer.drawer-dark > h5:before,
.drawer.drawer-dark > h6:before {
  background-color: #ffffff;
}

.drawer.drawer-dark > h1:after,
.drawer.drawer-dark > h2:after,
.drawer.drawer-dark > h3:after,
.drawer.drawer-dark > h4:after,
.drawer.drawer-dark > h5:after,
.drawer.drawer-dark > h6:after {
  background-color: #ffffff;
}

.drawer.drawer-light > h1:before,
.drawer.drawer-light > h2:before,
.drawer.drawer-light > h3:before,
.drawer.drawer-light > h4:before,
.drawer.drawer-light > h5:before,
.drawer.drawer-light > h6:before {
  background-color: #000000;
}

.drawer.drawer-light > h1:after,
.drawer.drawer-light > h2:after,
.drawer.drawer-light > h3:after,
.drawer.drawer-light > h4:after,
.drawer.drawer-light > h5:after,
.drawer.drawer-light > h6:after {
  background-color: #000000;
}

@media (max-width: 540px) {
  .drawer {
    
  }
}