/* Add more vertical space between the phone number and email addresses - mobile target was overlaping. */
a+br+a {
    line-height: 2.5;
}

.alpha-menu {
	font-family: Rokkitt, Arial, Helvetica, sans-serif;
	font-weight: 400;
	color: var(--text-links);;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: .5em;
	margin-top: .5em;
}


.jumptolink {
	padding: .1em .3em 0 .3em;	
}

a.jumptolink {
	color: #0e5f7c;
	color: var(--text-links);
	text-decoration: none;
}
a.jumptolink.jumptolinkcurrent {
    background-color: #29465e;
    background-color: #45667e;
    color: #fff;	
}


a:hover, a.dept:hover {
	color: #fff;
	background-color: #375268;
}

a.dept {
    font-size: 1em;
    font-weight: bold;
    margin-left: 0em;
    /*padding: 0.2em 0em;*/
}

/* These styles are for the 'Add to Calender' feature. */
a.toggleCalendarLinks {
    background-image: url(/includes/MonkeyWrench/template/images/small_icons/calendar_add.png);
    background-repeat: no-repeat;
    margin-left: .3em;
    padding-left: 16px;
}

.calendarPopup {
    border-radius: 2px 2px 2px 2px;
    border-width: 1px 1px 1px 1px;
    background-color: #FFFFFF;
    box-shadow: 2px 2px 5px 1px #DCDCDC;
    border-color: #BEBEBE;
    border-style: solid;
    display: none;
    padding: 8px;
    padding-top: 5px;
    font-size: 93%;
    margin-top: -2em;
    margin-left: -4em;
}

.calendarPopup a {
    border-bottom: none;
    cursor: pointer;
    display: block;
    margin-left: 1em;
}


.day-time-classes {
	display: flex;
	flex-wrap: wrap;
}

.day-time-classes p {
	margin-right: 0.9em;
}

.other-classes-detail {
	padding-left: 3em;
}

.online {
	padding-left: 10%;
}

.scheduleTable{
	font-size: 90%
}

.templatePopUpBox {
    opacity: 100;
    position: absolute;
    z-index: 900;
}

.outlookLink {
    background-image: url('/includes/MonkeyWrench/template/images/small_icons/outlook_icon_16x16.png');
    background-repeat: no-repeat;
    padding-left: 22px;  /* width of the image plus a little extra padding */
    color: #777;
}

.googleCalenderLink {
    background-image: url('/includes/MonkeyWrench/template/images/small_icons/google_calendar_icon_16x16.png');
    background-repeat: no-repeat;
    padding-left: 22px;  /* width of the image plus a little extra padding */
    margin-top: 5px;
    color: #777;
}
.iCalenderLink {
    background-image: url('/includes/MonkeyWrench/template/images/small_icons/table_save.png');
    background-repeat: no-repeat;
    padding-left: 22px;  /* width of the image plus a little extra padding */
    margin-top: 5px;
    color: #777;
}

.calendarPopupHeading {
    color: #666;
    display: flex;
    font-weight: 600;
    margin-bottom: 1em;
}

hr.calenderDivider {
    background-color: #fefefe;
    color: #fefefe;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2px;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

a.close {
	background-image: url("/includes/monkeywrench/template/images/small_icons/cancel_grey_10x10.png");
	background-position: right center;
	background-repeat: no-repeat;
	margin-right: -2px;
	margin-top: 0;
	padding-right: 14px;
	padding-left: 24px;
	text-decoration: none;
	/*float: right;*/
	font-size: 90%;
	color: #B0B0B0;
}

a.close:hover {
  background-image: url("/includes/monkeywrench/template/images/small_icons/cancel_red_10x10.png");
  background-color: #fff;
  color: #C82727;
}
/* End of add to calendar styles. */


.deptInfoLabel strong, .detailLabel strong {
	margin-right: .5em;
}

.departmentColumn strong {
	color: inherit;
}

.detailsdiv {
	font-size: 110%;
	line-height: 155%;
	max-width: 65%;
}
.detailsdiv h1 {
	font-size: 200%;
}

.docs h3, .docs h4, .docs h5  {
    margin-left: 1em;
    margin-top: 1.5em;
}


.docs p {
    margin-left: 1em;
	margin-top: .5em;
	margin-bottom: 1.3em;
	max-width: 45em;
}

.docs p + ul {
	margin-top: -1em;
	margin-bottom: 2em;
}

.docs table {
	margin-bottom: 2em;
    margin-left: 1em;
}
.generalInfo {
	line-height: 1.5em;
	margin-bottom: 1em;
}
#bldreport, #namesearch {
	margin-top: .3em;
	margin-bottom: 1em;
	line-height: 1.8em;
}
#bldreport button, #namesearch button {
	line-height: 1.4em;
}
#bldreport label, #namesearch label {
	font-size: smaller;
	color: #333;
	color: var(--text);
	font-weight: bold;
}
.pictureColumn {
	width: 42px;
}
.portrait {
	border:1px solid #D4E2FD;
}

.portraitLarge {
	border: 6px solid #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.4);
	transition: all .3s ease .15s;
}
.portraitLarge:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  position: relative;
  z-index: 5;
  
}

.portraitdiv {
	margin-right: 1.5em;
}
.printtogether {
    page-break-inside: avoid !important;
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        transform: scaleX(1)
    }
}

.pulse {
    animation-name: pulse ;
}

.staffTitle {
    color: #667381;
    color: var(--text-sub) ;
    padding-bottom: 0;
    line-height: 1.5;
    font-size: 86%;
    margin-bottom: .7em;
}

.template-tab-widget .template-tab-content  {
	min-height: 30em;
	padding: 1em;
}


.template-tab-widgets {
    height: 32em;
}

textarea {
    padding: .7em 1em;	
}
textarea.bio {
	display: block;
    width: 90%;
}

/* Add offices hours form - office_form.php */
.formBlock {
	list-style-type: none;
	padding-left: 0;
}
.formBlock label, .formBlock span , .editOfficeHourFormInput, .dayCheckbox  {
	display: inline-block;
	vertical-align: middle;
}

.helpersSection {
    font-size: .7em;
    margin-bottom: 2em;
    display: block;
    text-align: center;
}

.formRows > :first-child {
	font-weight: bold;
	margin-right: 2em;
	min-width: 6em;
	text-align: right;
	vertical-align: top;
}
.formBlock li {
	min-height: 3em;
}

#editOfficeHourForm .submit {
	margin-right: 5em;
}
.dayCheckbox {
	min-width: 3em;
	text-align: center;
}

/* Styles for the photo upload messages.  Copied straight from old directory. Should be refactored....  */
.portraitdivLinks {
	text-align: center;
}
.portraitdivLinks a {
	border: none;
    padding-right: .5em;
    padding-left: .5em;
}

.profilelinks p {
	margin: 1em;
}
.profilelinks span {
	display: inline-block;
}
.profilelinks label {
	font-size: smaller;
}
.profilelinks textarea {
	width: 20em;
}





#imageUploadForm [type="file"] {
	position: absolute;
	left: -10000px;
    /*height: 0;
    overflow: hidden;
    width: 0;*/
}


#loadingMsg, #loadedMsg, #errorMsg {
	display: none;
}

button.profile, label.button.profile, input[type=submit].profile {
	display: inline-block;
	margin: .5em 1em 1.5em 1em;
}

p#uploadStatus {
	margin-bottom: 1em;
	margin-left: 2em;
	margin-top: -1em;
    max-width: 30em;
}

#f1_upload_result{
   visibility:hidden;
}

#f1_upload_form{
}

#f1_error{
   font-weight:bold;
   color:#FF0000;
}

#f1_ok{
   font-weight:bold;
   color:#00FF00;
}

#f1_upload_form {
}

#f1_upload_process_backup{
   z-index:100;
   visibility:hidden;
   position:absolute;
   text-align:center;
   width:400px;
}
#f1_upload_process{
   z-index:100;
   visibility:hidden;
   position:absolute;
}
/* End of photo upload styles. */

article.details {
	display: flex;
	/*flex-wrap: wrap;*/
	margin-bottom: 1em;
}
/*

article.details {
    display: block;
}
*/
.detailsdiv, .portraitdiv {
    /*max-width: unset;*/
    display: inline-block;
    vertical-align: top;
}
.portraitLarge {
	height: 16em;
	width: auto;
}
	
	.detailsdiv {
		max-width: 50%;
	}
	
@media print {

    a {
    	border-bottom: none;
    	font-weight: bold;
    }
    
    /* Hide unselected tabby tabs (youcanbookme, etc.) */
    a[aria-selected='false'] {
	    display: none;
	}

    .alpha-menu, #bldreport, #namesearch {
    	display: none;
    }
    
    /* Increase the chance that the print out will print on one page. */
    /* Trying to make the image smaller, and have the details take up the space provided, and remove the extra space below the image */
	body {
	    line-height: 1em;
	}
	
	
	/*
	article.details {
	    display: block;
	}
	.detailsdiv h1, h2, .staffTitle,  {
		color: var(--text);
	}
	.detailsdiv h1 {
	    font-size: 200%;
	}
    .detailsdiv, .portraitdiv {
	    display: inline-block;
	    vertical-align: top;
	}
    .portraitLarge {
    	height: 16em;
    	width: auto;
    }
	*/

    #label#searchlabel, .label-offscreen-font {
	    display: none;
	}
    td, th {
    	line-height: 1.2em;
	    padding: .2em .4em;
	}
	th {
		box-shadow: none;
	}
}  

@media (max-width: 95rem) {
	#namesearch span {
		display: table;
	}
}
@media (max-width: 80rem) {
	body {
	    font-size: larger;
	}
	.detailsdiv {
		max-width: 100%;
	}
	.jumptolink {
		font-size: larger;
		padding: .1em .5em 0 .5em;	
	}

	#namesearch label.searchLabel {
		font-size: unset;
	}
	#namesearch input {
		font-size: smaller;
	}
	table {
    	line-height: 1.7;
	}
	#namesearch span {
		display: table;
	}
}