/* Move some of these styles to the template or update existing template styles - whatever is best. */

a {
	color: var(--color-links);
	font-weight: 500;
}


button, .button, footer .button, input[type=submit]{
	border-radius: 0;
}

footer {
	
	background: none repeat scroll 0 0 var(--color-footer-background);

	.button {
		border: 1px solid transparent;
		font-weight: 600;
		transition: background-color 0.3s ease; /* Apply transition to background-color */

	}

	.button:hover {
		text-decoration: underline;
	}

	.button.apply-link, .button.contact-link {
		color: white;
		font-weight: 600;
	}

	.button.apply-link, .button.contact-link:hover, .button.request-link:hover {
		color: white;
		background-color: var(--color-primary);
	}

	.button.contact-link, .button.apply-link:hover {
		background-color: var(--color-highlight);
	}


	.button.request-link {
		background-color: white;
		color: var(--color-primary);
	}

}


/* Office hours tabs overwriting \includes\monkeywrench\template_22\javascript\tabby\dist\css\tabby-ui.css */
[role=tablist] [aria-selected] {
	border-radius: 0;
}

.generalInfo {
	margin: 0.5em 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-header) ;
	margin-bottom: .5em;

}

.detailsdiv h1 {
	margin-bottom: 0;
}

.header-app {
	background-color: var(--color-brand);
}

.header-app li a, .header-app li button {
	font-family: var(--font-header) ;
}

nav.nav-app {
	background: var(--color-brand) url(/includes/monkeywrench/template_2018/images/header-bg-z-compressed.png) no-repeat scroll left top;
}

.portrait {
	float: right;
}

td:has(img) {
	max-width: 3em;
}

th {
	background-color: var(--color-primary);
	font-family: unset;
	font-weight: bold;
	letter-spacing: unset;
	padding: 0.2em;
}









/* Add in page navigation transitions - supported in Chrome & Edge 20241203 */
@view-transition {
	navigation: auto;
}


/* 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: var(--font-body);
	/*font-family: Rokkitt, Arial, Helvetica, sans-serif;*/
	font-weight: 500;
	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(--color-primary);
	text-decoration: none;
}
a.jumptolink.jumptolinkcurrent {
	background-color: #29465e;
	background-color: var(--color-primary);
	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: 3em;
}

.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 {
	min-width: 20em;
	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 {
	display: inline-block;
	margin-right: .5em;
	min-width: 8ch;
}

.deptInfoLabel strong {
	min-width: 10ch;
}

.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 {
	margin-top: .3em;
	margin-bottom: 1em;
	line-height: 1.8em;
}
#bldreport button {
	line-height: 1.4em;
}
#bldreport label, .people 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 {
  transform: scale(1.1);
  position: relative;
  z-index: 5;
  
}

/* Styles for the people search form */
.people form {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	line-height: 1.3rem;
	margin-bottom: 1.5em;
}

.people form input[type=search], .people form input[type=text] {
	display: block;
	font-weight: bold;
	padding-bottom: 0;
	padding-top: 0;
}

.people form input[type=radio] {
	vertical-align: text-bottom;
}

.people form label:nth-child(n+2) {
	font-size: .8em;
	font-weight: normal;
	padding-right: .5em;
}

.people form button {
	align-self: center;
	line-height: 1.6;
	margin-bottom: 0.2em;
}

.people form fieldset {
	border: none;
	letter-spacing: 1.3;
	padding: 0;
}


.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%;
}

#suggestionsGroup  a.button {
	letter-spacing: unset ;
		
}

#titleWrapper a {
	display: none;
}

#titleWrapper #title {
	width: 50em;
}

#titleWrapper:focus-within a {
	display: inline-block;
}




/* 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_error{
	font-weight:bold;
	color:#FF0000;
}

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


#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;
}

.detailsdiv + p {
	margin-bottom: 0.5em;
	margin-top: 1em;
}

.detailsdiv, .portraitdiv {
	/*max-width: unset;*/
	display: inline-block;
	vertical-align: top;
}
.portraitLarge {
	height: 16em;
	width: auto;
}
	
.detailsdiv {
	max-width: 50ch;
}


td {
	padding-bottom: .5em;
	padding-top: .5em;
}

.deptList td:nth-child(n+2) {
	white-space: nowrap;
}






/**
 * GRID SCHEDULE LAYOUT
 */
/* Hide day headings on mobile 
 * On small devices don't show the duplicate articles that at scheduled for different days.
 * Consolodate the articles to show just one per class, or office hour.
 */

 .scheduleGrid {
	display: grid;
	font-size: 90%;

	--align-headings: 0.5em;

	/* Set up some pastel variables for the classes / office hours. */
	--color0: rgb(90% 95% 100% / 60%); /* #e7f5ff*/
	--color1: rgb(90% 100% 90% / 60%); /* #f1fdef*/
	--color2: rgb(100% 100% 90% / 60%); 

	--color3: #f1fdef;
	--color4: #f9effd;
	--color5: #f4effd;
	--color5: rgb(100% 86% 100% / 60%); 
	--color6: #eef1f3;
	--color7: #f7ebeb;
	--color8: #e7f5ff;
	--color9: #f1fdef;
	--color10: #effdf4;

}

/* Set up some dark theme variables. */
@media (prefers-color-scheme: dark) {
	.scheduleGrid {
		--color0: var(--background-row);
		--color1: var(--background-highlight);
		--color2: var(--border);
		--color3: var(--background-row);
		--color4: var(--background-highlight);
		--color5: var(--border);
		--color6: var(--background-row);
		--color7: var(--background-highlight);
		--color8: var(--border);
		--color9: var(--background-row);
		--color10: var(--background-highlight);
	}
}


/* Default style for each entry in the schedule */
.scheduleGrid article {
	border: var(--border) 0.1em solid;
	box-shadow: rgba(99, 99, 99, 0.2) 0 .2em .6em 0;
	margin-bottom: 0.5em;
	margin: 0.4em;
	padding: var(--align-headings);
}

.scheduleGrid h2, .scheduleGrid h3 {
	font-weight: normal;
	line-height: 1.2;
}

.day, .time {
	font-size: 1.2em;
}

.day {
	background-color: var(--background);
	display: block;
	padding: .5em .2em .2em;
	position: sticky;
	top: 0;
	z-index: 1000;
}

.time {
	grid-column: times;
	margin-top: var(--align-headings);
	max-width: 7em;
	padding: 0.4em;
	text-align: right;
	text-wrap: balance;
}


/**
 * Don't like meaningless class names, but these are assigned dynamically on the office hours grid so meaningful names are hard.
 * Sam A has > 60 classes...  So may need lots of these?
 * But changed to using mod of index number so should only use 7 or 8 of these now... 
 */
.class0, .class8, .class16 {
	background-color: var(--color0);
}

.class1, .class9, .class17 {
	background-color: var(--color1);
}

.class2, .class10, .class18 {
	background-color: var(--color2);
}

.class3, .class11, .class19 {
	background-color: var(--color3);
}

.class4, .class12, .class20 {
	background-color: var(--color4);
}

.class5, .class13, .class21 {
	background-color: var(--color5);
}

.class6, .class14, .class22 {
	background-color: var(--color6);
}

.class7, .class15, .class23 {
	background-color: var(--color7);
}




@media print {

	.noprint {
		display: none;
	}
	.scheduleGrid {
		font-size: 80%;

	}
	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;
	}
	
	#label#searchlabel, .label-offscreen-font {
		display: none;
	}

	td, th {
		line-height: 1.2em;
		padding: .2em .4em;
	}
	th {
		box-shadow: none;
	}

	#translate {
		display: none;
	}
}  

@media (max-width: 95rem) {
	#namesearch span {
		display: table;
	}

}

@media (max-width: 80rem) {
	
	.jumptolink {
		font-size: larger;
		padding: .1em .5em 0 .5em;	
	}

	#namesearch label.searchLabel {
		font-size: unset;
	}
	#namesearch input {
		font-size: smaller;
	}

	#namesearch span {
		display: table;
	}
	#titleWrapper #title {
		width: 28em;
	}

}


@media (max-width: 68rem) {
	
	article.details {
		padding: .5em;
	}
	.portraitdiv {
		margin-bottom: .5em;
	}
	
	#titleWrapper #title {
		width: 70%;
	}
}



/* Change schedule to block layout for small devices, and hide the duplicated class / office hours entries. */
@media screen AND (max-width: 40em)  {
	.scheduleGrid {
		display: block;
		font-size: 80%;

	}

	.day, .noPrint { 
		display: none; 
	}

	.time {
		text-align: left;
	}
}