.hello-person-modal-opener {cursor: pointer;}
.hello-person-modal-opener:hover {background-color: #f0f0f0;}
div.hello-personthumb {text-align:center;}
div.hello-personthumb img {border-radius: 50%; border: 1px solid #888; max-width:120px;}
div.hello-personthumb div.name {margin-top:0.4em; font-size:1em; font-weight:500;}
div.hello-personthumb div.jobtitle {margin-top:0.2em; font-size:0.9em; font-weight:300; font-style:italic;}
div.hello-personthumb div.excerpt {margin-top:0.2em; margin-bottom:2em; font-size:0.9em; line-height:1.3em;}

div.modal-hello-person {background-color: #555; color: white;}
/* div.modal-hello-person div.img-wrapper {width: 150px; float:left; } */
/* div.modal-hello-person div.img-wrapper img {width:150px; display:inline; padding-right: 1em; padding-botton: 1em; border: 0px;} */
div.modal-hello-person div.img-wrapper {width: 150px; float:left; padding-right:8px;}
div.modal-hello-person div.img-wrapper img {width:150px; display:inline; border: 1px solid black;}
div.modal-hello-person div.description { display:inline;; font-size:0.9em; line-height: 1.3em;}
button.ui-dialog-titlebar-close {}
.ui-dialog .ui-dialog-titlebar-close span {margin:0px !important;}

/* Handle the presentation when using the hello-people-thumbs shortcode */
div.hello-people-thumbs {width:100%; display:flex; flex-wrap: wrap;}
/* Mobile */
div.hello-people-thumbs div.hello-person-thumb-wrapper {width:90%; padding-left:2%; padding-right: 2%;}
/* Tablet */
@media only screen and (min-width: 600px) {
div.hello-people-thumbs div.hello-person-thumb-wrapper {width:45%; padding-left:2%; padding-right: 2%;}
}
/* Computer */
@media only screen and (min-width: 1024px) {
div.hello-people-thumbs div.hello-person-thumb-wrapper {width:29%; padding-left:2%; padding-right: 2%;}
}


.ui-dialog .ui-dialog-titlebar-close span {
  margin: -8px !important; /* Don't ask me why the close 'x' is wrongly positioned by default */
}
.ui-widget-content { background: #eee !important;}