a {
  cursor:pointer
}

#msgDropdown{
  max-height: 90vh;
  overflow:auto;
}

@media (min-width: 768px) {
  #msgDropdown {
    width: 400px !important;  /* change the number to whatever that you need */
  }
}

.msg-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 6.5rem;
  bottom: 0;
  overflow-y: auto;
  font-size: 0.85rem;
}

.msg-list .msg-content:hover {
    background-color: #f7f7f7;
    cursor: pointer
}

.msg-list .btn-danger {
    float: left;
    margin-right: 10px;
}

.msg-list span {
	white-space: normal;
}

.text-muted {
	color: #73818f !important;
}

.msg-list .card {
	background: transparent;
	border: none
}

#msgIcon{
  position: relative;
}

.badge {
  font-size:0.6rem;
  font-weight: 400;
  position: absolute;
  right: -6px;
  top: -6px;
  background-color: #ee266b;
  border-color: #ff0057;
  color: #fff;
  border-radius: 50%;
}