.appointment-content {
  width: 360px;
}

.dx-popup-content .appointment-content {
  height: 40px;
  line-height: 20px;
}

.appointment-badge {
  text-align: center;
  float: left;
  margin-right: 12px;
  color: white;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 28px;
  border-radius: 28px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 2px;
}

.appointment-dates {
  color: #959595;
  font-size: 12px;
  text-align: left;
  float: left;
}

.appointment-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 270px;
  font-size: 15px;
  text-align: left;
  float: left;
}

.delete-appointment {
  position: relative;
  border: none;
  box-shadow: none;
  height: 40px;
}

  .delete-appointment .dx-button-content {
    width: 40px;
    height: 40px;
  }

  .delete-appointment.dx-state-hover,
  .dx-list-item.dx-state-hover .dx-button {
    box-shadow: none;
    background-color: inherit;
  }

  .delete-appointment .dx-icon-trash {
    color: #337ab7 !important;
    font-size: 23px !important;
  }