.profilepic {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  margin-right: .25rem;
  position: relative;
  top: -2px;
}

/* for statuses */
.badgeinfo{
  background: none !important;
  border: 2px solid #17a2b8;
  color: #17a2b8 !important;
}

.badgelightblue{
  background: none !important;
  border: 2px solid #3c8dbc;
  color: #3c8dbc !important;
}

.badgeprimary{
  background: none !important;
  border: 2px solid #007bff;
  color: #007bff !important;
}

.badgewarning{
  background: none !important;
  border: 2px solid #ffc107;
  color: #ffc107 !important;
}

.badgeorange{
  background: none !important;
  border: 2px solid #fd7e14;
  color: #fd7e14 !important;
}

.badgepurple{
  background: none !important;
  border: 2px solid #6f42c1;
  color: #6f42c1 !important;
}

.badgesuccess{
  background: none !important;
  border: 2px solid #28a745;
  color: #28a745 !important;
}

.badgesuccess{
  background: none !important;
  border: 2px solid #28a745;
  color: #28a745 !important;
}

.badgemaroon{
  background: none !important;
  border: 2px solid #d81b60;
  color: #d81b60 !important;
}

.badgenavy{
  background: none !important;
  border: 2px solid #001f3f;
  color: #001f3f !important;
}

.badgegray{
  background: none !important;
  border: 2px solid #adb5bd;
  color: #adb5bd !important;
}


.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.custom-control .custom-switch {
  height: 2.5rem !important;
  width: calc(4rem + 0.75rem) !important;
  border-radius: 5rem !important;
}

/* timeline */
.scroll {
  max-height: 650px;
  overflow-y: auto;
}

/* hide separator for mobile view */
@media only screen and (max-width: 768px) {
   #separator{display: none}
}