body {
	/*font-family: Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif;*/
}

:root {
	--4cyte_red: #c32034;
}

mark {
	background-color: #ffffbb;
}



/****** main layout ****/

#xbodyDiv {
	display: grid;
	grid-template-areas:
		'titlebar'
		'welcometext'
		'searchbox'
		'results';
	grid-template-rows: min-content min-content min-content 1fr;
}

#xwelcomeTextDiv {
	grid-area: welcometext;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 20px;
}

.hruleDiv {
	width: 80%;
}

hr {
	border-top: 3px solid var(--4cyte_red);
}

.alignBottom {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

.smallerFont {
	font-size: smaller;
}

.spaceBefore {
	margin-top: 30px;
}

/**** image zoom **********/
#imageZoomDiv {
	display: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #333333bb;
	color: white;
	font-weight: bold;
	font-size: larger;
	position: fixed;
    top: 0;
    left: 0;
	z-index: 100;
}

/**** Title Bar *********/
#titleBar {
	grid-area: titlebar;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}

#titleBar > div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#titleBarLeft {
	order: 1;
}

#titleBarLeft > img {
	justify-content: flex-start;
	height: 57px;
}

#titleBarCenter {
	justify-content: center;
	text-align: center;
	font-size: 26px;
	order: 2;
}

#titleBarRight {
	justify-content: flex-end;
	color: var(--4cyte_red);
	font-size: 22px;
	order: 3;
}

#titleBarRight > img {
	height: 15px;
	padding-right: 5px;
}

/******* Search Box **********/
#searchDiv {
	grid-area: searchbox;
}

#searchBoxDiv {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#oldsearchTextBox {
	width: 50%;
}

/******* Search Results **********/
#searchResultDiv {
	grid-area: results;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.filteredPanel {
	border: #eeeeee 2px solid;
	width:100%;
	margin: 5px;
}
.no_matches {
	align-self: start;
	margin-top: 20px;
}

.panelHeading {
	display: flex;
	flex-direction: row;
	background-color: #eeeeee;
	flex-wrap: wrap;
	align-items: baseline;
}

.panelHeading > div {
	margin-right: 10px;
}

.panel_name {
	xfont-weight: bold;
	xfont-size: larger;
	font-size: 1.2em;
	font-weight: bold;
}

.panel_pseudonyms {
	width: 100%;
	margin: 10px 0 10px 10px;
	line-height: 1.75;
	font-size: 0.9em;
}

.pseudo_label {
	font-size: smaller;
}

.panelDetails {
	display: grid;
	grid-template-columns: auto 1fr;
	margin-top: 15px;
}

.panelDetails > div {
	padding: 6px;
}

.label {
	font-style: italic;
	color: var(--4cyte_red);
}

.instructionsDiv > *{
	margin-block-start: 0px;
}

@media (max-aspect-ratio: 1/1) {
	.panelDetails {
		display: flex;
		flex-direction: column;
	}
	
	.filteredPanel {
		width: 97%;
	}
}


.mbsLink {
	margin-right: 5px;
}
/****** Containers ***********/
.containerGroupsDiv {
	display: grid;
	grid-template-columns: max-content max-content max-content;
}

.containerGroupsDiv > * {
	margin: 5px;
}

.italic {
	font-style: italic;
}

.orRow {
	grid-column-start: span 3;
	text-align: center;
	background-color: #eeeeee;
}

.containerText {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.containerImage {
	height: 30px;
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

.genDate {
	font-size: x-small;
	color: #666666;
}

/**** update ************/
.genDate {
	text-align: right;
	margin: 1rem 0;
}

.widget-search {
	max-width: 70rem;
	padding: 1rem;
	margin: 0 auto;
}
.widget__form-search {
	position: relative;
}
.widget__form-search input {
	display: block;
	width: 100%;
	padding: 1rem 3rem 1rem 1rem;
	border: 1px solid #ccc;
	font-size: 1rem;
	border-radius: 1rem;
}
.widget__form-search button {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	border: none;
	color: var(--4cyte_red);
	background-color: transparent;
	transform: translateY(-50%);
}