/* do not show breadcrumbs on this site ('you are here ..._) */
/* if it does not work after a joomla change look at the actual page with Ctrl+u */
.mod-breadcrumbs__wrapper,
.mod-breadcrumbs__wrapper * {display: none; visibility:hidden; }

#lectviewHeading {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;
}

#errMsg {	/* content set by lectviewEventListeners.js */
	text-align: right;
	color: red;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	padding-right: 20px;
}
#errMsg:empty { line-height: 0; }

.flexColumn {
	display: flex;
	flex-direction: column;
}
.flexRowLeft {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: left;
}

#selectionDiv, #themeAndLocationDiv {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: stretch;
	padding: 0;
	margin-bottom: 26px;
}
#selectionDiv fieldset {
	margin: 0 auto;
	margin-bottom: 5px;
}

.selectionSubDiv {
	width: fit-content;
	padding: 5px 10px;
	border-radius: 12px;
	border: 1px solid green;
}

#jform_orderBy *, #jform_orderDir * { width: 100%; margin: 0 auto; }

.selectionSubSubDiv {
	margin: 0 auto;
	padding: 5px 0 0 0;
}
.btn-group { margin-bottom: 0; }

#filterDiv, #categoriesDiv {
	width: 120px;
	[type="checkbox"] {
		display: none;
	}
}

#filterDiv label, #categoriesDiv label {
	width: 100%;
	position: relative;
	cursor: pointer;
	margin: 3px auto;
	padding: 0;
	font-size: 16px;
	background-color: white;
	color: black;
}

#filterDiv label:hover, #categoriesDiv label:hover {
	font-weight: 600;
	font-size: 18px;
	color: white;
	background-color: slategray;
}​

#orderWrapperDiv {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#orderWrapperDiv label {padding: 4px 8px; font-weight: 500; font-size: 15px;}

#orderDirDiv {
	margin: 7px auto 0 auto;
}

#resetButtonDiv { margin: 20px auto; }
#locationDiv { width: fit-content; padding-top: 6px; }

.button {
  background-color: #fff;
  border: 1px solid #cacaca;
  border-radius: 8px;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); */
  /* box-shadow: 5px 5px 5px gray; */
  color: green;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 12px;
  transition: all 0.1s ease-in;
}

.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.3;
}

.button:hover {
	background-color: slategray;
	color: white;
}

#themeSearchDiv, #locationSearchDiv {width: 45%; }
#jform_themeSearch, #jform_locationSearch {
	font-size: 18px;
	font-weight: 500;
	color: darkgreen;
	width:90%;
	float: left;
}

.searchLegendClass {
	background-color: white;
	width: fit-content;
	position: relative;
	right: -15px;
	top: 10px;
}
#helpButtonTS, #helpButtonLS {
	height: 30px;
	/* box-shadow: 2px 0 0 0;  */
	padding: 1px 7px 6px 7px;
	margin: auto;
	float: right;
}
#searchHelpDiv {
	width: 100%;
	border: 2px solid green;
	border-radius: 6px;
	padding: 5px;
}

#yearLegend {
	margin-bottom: 3px;
	width: 100%;
	text-align: center;
}

#themeAndLocationDiv .control-group, #locationDiv .control-group, .selectionSubDiv .control-group { margin: 0 auto 6px auto;}
/* we set the label in default.php as div with class="legendClass", so we need no reserved space for .control-label */
#themeAndLocationDiv .control-label, #locationDiv .control-label, .selectionSubDiv .control-label { height: 0;}

.centerDivGreen {
	width: 100%;
	text-align: center;
	font-weight: 600;
	color: green;
	font-size: 16px;
}

.up-down-button {
	margin: 2px 0 2px 0;
	padding: 0 0 5px 0;
	font-size: 22px;
	font-weight: 800;
	width: 30px;
	height: 30px;
	border: none;
	* {
		vertical-align: middle;
	}
}

.up-down-button:hover {
	color: white;
}

#yearDiv {
	width: fit-content;
	padding-left: 8px;
	padding-right: 8px;
}

#yearFromTo {
	width: fit-content;
	height: 90px;
	display: flex;
	margin: 2px auto 2px auto;
}

#jform_yearFrom, #jform_yearTo {
	width: 55px;
	height: 22px;
	margin: 10px auto 0 auto;
	padding: 0;
	font-size: 20px;
	text-align: center;
	border: none;
}

#yearFrom *, #yearTo * { text-align: center; }
#yearFrom .control-group * { padding-right: 2px; }

#viewResult { width: 100%; }
.resultTableHead { color:lightseagreen; }
#viewResult tbody tr:nth-child(odd) { background-color: ghostwhite; }

#viewResult tbody tr:nth-child(even) { background-color: gainsboro; }
#resultMsg {
	color:lightseagreen;
	font-weight: 700;
	font-size: 20px;
}
#newQueryDiv { margin: 25px 0 0 50px; }

@media
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px) {

	#themeAndLocationDiv {flex-direction: column;}
	#themeSearchDiv, #locationSearchDiv, #searchHelpDiv {width: 100%; }

	/* Force table to not be like tables anymore */
	#viewResult, thead, tbody, th, td, tr {
		display: block;
	}
	#viewResult {
		width: 100%;
		empty-cells: hide;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tbody tr { margin: 6px 2px; }

	/* behave  like a "row" */
	td { position: relative; }
}