/* Event syles in modals from the calendar */
/* Overriding some styles in jquery.ui.css for the Modals */

.ui-widget.ui-widget-content {
  font-family: inherit;
  border-color: #999 !important;
}


.ui-dialog .ui-dialog-titlebar {
  background-color: #ccc;
}

.ui-dialog .ui-dialog-titlebar-close span {
  margin: -8px; /* Don't ask me why the close 'x' is wrongly positioned by default */
}
.ui-dialog .ui-dialog-title {
  font-size:0.9em;
}

.ui-dialog .ui-dialog-content {
  color: #222;
  font-weight: 300;
}

div.event-modal-description div.date {color: #888;}
div.event-modal-description div.date::before { 
  font-family: "Font Awesome\ 5 Free";
  content: "\f073"; /* calendar icon */
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;;
}

div.event-modal-description div.time {color: #888;}
div.event-modal-description div.time::before { 
  font-family: "Font Awesome\ 5 Free";
  content: "\f017"; /* clock icon */
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;;
}

div.event-modal-description div.location {color: #888;}
div.event-modal-description div.location::before { 
  font-family: "Font Awesome\ 5 Free";
  content: "\f21d"; /* Street view icon */
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;;
}

div.event-modal-description a.btn {font-size:0.8em; background-color: #222; color:#fff; border-radius:4px; float:right; padding:4px;}
div.event-modal-description a.btn:hover { background-color: #444;}

.bootbox.modal {
    z-index: 99000 !important;
		border:2px solid red;
}