/* Lab Resource Filters Aside */

.lab-filters{
	display:flex;
	flex-flow: row nowrap;
}

.lab-filters #resource-filters{
	flex: 0 0 66%;
}

.lab-filters #labSearchBox{
		flex: 0 0 33%;
}


.lab-filters details summary::-webkit-details-marker{
	display:none;
}

.lab-filters details summary:hover{
	cursor: pointer;
}

.lab-filters details summary::after{
	content:'\e5cf';
	font-family: Material Icons;
	display:inline-block;
}
.lab-filters details[open] summary::after{
	content : '\e5ce';

}

#labSearchForm .search-submit{
	background:#fff;
	color:#000;
	width:2em;
	height:2em;
	padding:0;
	text-indent:-20em;
	overflow:hidden;
}
#labSearchForm .search-submit:before{
	content : '\e8b6';
	font-family: Material Icons;
	display:block;
	text-indent:0;
	position:relative;
	left:0;
}

#resource-filters{
	display:grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
}

#resource-filters >.display-group{
display:none;visibility:hidden;
}

#resource-filters .filter-group{
	grid-row:1;
	grid-column:1;
}
#resource-filters .filter-group:last-of-type{
	grid-column:2;
	}


#resource-filters .display-group ul,
#resource-filters .display-group ul li {
	list-style: none;
	padding-left: 0;
}

#resource-filters .display-group ul li:before{ /* override the site-content li before style*/
	content:none;
}

#resource-filters button {
	width: auto;
	max-width: max-content;
}

#resource-filters .display-group #gridView button::before{
	font-family: 'Font Awesome\ 5 Free';
	content: "\f009";
	font-size:1em;
	font-weight:700;
	display: inline-block;
	margin-right:1em;
}

#resource-filters .display-group #listView button::before{
	font-family: 'Font Awesome\ 5 Free';
	content:"\f03a";
	font-size:1em;
	font-weight:700;
	display: inline-block;
	margin-right:1em;
}

#resource-filters {
	padding-right: 2em;
	padding-bottom: 2em;
}

#resource-filters label {
	width: 100%;
	display: inline-block;
}

html.no-details #resource-filters label {
	width: 100%;
	display: none;
}

html.no-details #resource-filters details[open] label{
	display:inline-block;
}

#resource-filters h4 {
	padding-bottom: .5em;
}

h4.filter-group-title {
	display: inline-block;
	margin: 1em 0 .5em;
}

button#clearFilters,
button#clearFilters2 {
	/* margin: 2em 0; */
}


/* Custom Checkbox for LAB
	 ===========================================================*/

label.checkbox-container {
	font-size: .95em;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
	margin-right: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
label.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid #181612;
}

/* On mouse-over, make border red */
label.checkbox-container:hover input ~ .checkmark {
  border: 1px solid var(--accent);
}

/* When the checkbox is checked, add a red background */
label.checkbox-container input:checked ~ .checkmark {
  background-color: var(--accent);
	border: 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
label.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
label.checkbox-container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Autocomplete Styles */

ul.ui-widget {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 1em;
}

.ui-menu li.ui-menu-item {
	color: #181612;
	padding: .5em;
}

ul.ui-widget > li > p,
ul.ui-menu li.ui-state-focus,
ul.ui-menu li.ui-state-active {
	margin: 0;
}

ul.ui-widget > li > p > img {
	display: none;
}

ul.ui-widget > li.ui-state-focus {
	border: none;
	background: #DFDFDD;
	font-size: 1em;
}