.ql-editor{
  min-height:300px;
}

#order-listing_wrapper #order-listing_filter{
  float:right !important;
}
#order-listing_wrapper button.btn-secondary{
  background: #7978E9;
  color: white;
}


.form-check-label{
  margin-left:0 !important;
}

.stretch-card.min-height-522{
  min-height: 522px;
}

.modal-backdrop{
  background: rgba(0,0,0,.5) !important;
}

.slick-arrow:before{
  color: #7978E9;
}
.ui-datepicker {
  width: 37em !important; /*what ever width you want*/
}


try this DEMO

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
  border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  border: 1px solid #003eff !important;
  background: #007fff !important;
  font-weight: normal;
  color: #fff !important;
}


.slick-next, .slick-prev {
  display: block;
  width: 35px !important;
  height: 35px !important;
}
.slick-prev{
  left: -35px !important;
}

.slick-next {
  right: -35px !important;
}
.slick-arrow:before{
  font-size: 35px !important;
}

#imageModal .modal-dialog .modal-content .modal-body {
  padding: 35px 36px !important;
}

div.dataTables_wrapper {
  position: static;
}

.card-header{
  color: #fff;
  background-color: #FF4747 !important;
  /* border-color: #FF4747; */
}

.card-header a{
  color: #fff;
}


#accordion2 .card-header, #accordion3 .card-header{
  color: #fff;
  background-color: rgba(0,0,0,.5) !important;
  padding: 10 15px;
  margin-bottom: 4px; 
}

/* .panel-title{
  margin: 0;
}

.panel-heading a{
  color: #fff;
} */