.drawer {
  background-color: #E5E5E5;
  box-shadow: -5px 0px 30px 0px #cccccc;
  height: calc(100% - 37px);
  position: absolute;
  right: 0;
  top: 37px;
  width: 340px;
  z-index: 1100;
}
.drawer .border-bottom-dark {
  border-bottom: 1px solid #d1d1d1;
}
.drawer h4 {
  color: #767777;
  font-size: 20px;
}
.drawer .text-red {
  color: #EB5757;
  font-size: 16px;
}
.drawer .badge-red {
  background-color: #EB5757;
  color: white;
  font-size: 14px;
  vertical-align: text-top;
  width: 40px;
}
.drawer .badge-red.bagde-red-light {
  background-color: rgba(235, 87, 87, 0.1);
  color: #EB5757;
}
.drawer .badge-gray {
  background-color: #989898;
  color: white;
  font-size: 14px;
  vertical-align: text-top;
  width: 40px;
}
.drawer .btn-category {
  background-color: white;
  border-radius: 10px;
  color: #767777;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
}
.drawer .btn-category .fa-angle-right {
  padding-top: 3px;
}
.drawer .btn-category:not(.collapsed) .fa-angle-right {
  transform: rotate(90deg);
}
.drawer .card-order {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  color: #767777;
}
.drawer .card-order .event-action .event-clear:focus {
  outline: none;
}
.drawer p .view-all {
  display: none;
}
.drawer p .view-less {
  display: block;
}
.drawer p.collapsed .view-all {
  display: block !important;
}
.drawer p.collapsed .view-less {
  display: none !important;
}
.drawer .badge {
  margin-top: 3px;
  vertical-align: top;
}
.drawer .sp-event-name {
  width: calc(100% - 10px);
  max-width: calc(100% - 60px);
  display: inline-block;
}