/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

/* CONTENT OF ORIGINAL BELLOWS.CSS FILE */
.accordion {
	margin-bottom: 1.5em;
	margin-top: -2em;
}

.accordion + .accordion {
	margin-top: -2em;
}

.accordion > p,
.accordion > ul,
.accordion > ol,
.accordion > dl {
	margin-left: 28px;
}

.accordion > p:first-of-type {
	margin-top: 10px;
}

.accordion h2[role="button"],
.accordion h3[role="button"] {
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 10px 10px 10px 15px;
	padding-left: 28px;
	text-indent: -28px;
	line-height: 1.3;
	margin-top: 28px;
	font-size: 22px;
}

div#filtered-events .accordion h2[role="button"],
div#filtered-events .accordion h3[role="button"] {
	cursor: pointer;
	display: block;
	margin: 0;
	margin-left: 6px;
	padding: 10px 10px 10px 15px;
	padding-left: 28px;
	text-indent: -32px;
	line-height: 1.3;
	margin-top: 28px;
	font-size: 22px;
}

.accordion h2[role="button"] svg,
.accordion h3[role="button"] svg {
	display: inline-block;
	vertical-align: middle;
	height: 17px;
	width: 17px;
	margin-top: -2px;
	margin-right: 10px;
	fill: #333;
}

.accordion h2[role="button"] + .bellows,
.accordion h3[role="button"] + .bellows {
	display: none;
	padding-left: 10px; /* align with the h3 text */
	padding-bottom: 10px; 
	margin-top: -20px;
}

/* Styles for the training events filter */

.filter-ui-wrapper {
	border-radius: 15px;
	border: 7px solid #dcded6;
	padding: 20px 20px 20px 30px;
	background-color: #f2f3ec;
	margin: 27px 0px;
}

.filter-ui {
	/* border-radius: 15px;
	border: 7px solid #dcded6;
	padding: 20px 20px 20px 30px;
	background-color: #f2f3ec;
	margin: 27px 0px; */
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
		grid-template-areas: 
		"head"
		"one"
		"two"
		"three";
}

.filter-ui fieldset {

	display: block; 
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-block-start: 0px;
	padding-inline-start: 0px;
	padding-inline-end: 0px;
	padding-block-end: 0px;
	min-inline-size: min-content;
	border-width: 0px;
	border-style: none;
	border-color: threedface;
	border-image: initial;
	margin-top: -16px;
}

#filtered-events {
	margin-top: 32px;
}

#filtered-events h2 {
	margin-top: 25px;
	font-size: 1.4em;
}

.user-type { 
	-ms-grid-row: 3; 
	-ms-grid-column: 1; 
	grid-area: two; 
}

.assessment-and-training { 
	-ms-grid-row: 2; 
	-ms-grid-column: 1; 
	grid-area: one; 
}

.filter-headline { 
	-ms-grid-row: 1; 
	-ms-grid-column: 1; 
	grid-area: head; 
}

div.filter-ui > h2.filter-headline { 
	margin-top: 0px;
	margin-bottom: 20px; 
}

.filter-headline.filter-reset-all-box {
	display: block;
	z-index: 1;
}

div.filter-ui > h2.filter-headline.filter-reset-all-box {
	margin-top: -2px;
}

.radio-filter-events { 
	-ms-grid-row: 4; 
	-ms-grid-column: 1; 
	grid-area: three; 
}

.radio-filter-events h3 {
	margin-bottom: 15px;
}

.radio-filter-events hr {
	display: block; 
	height: 3px; 
	border: 0px; 
	color: #dcded6; 
	background-color: #dcded6;
}

.radio-filter-button {
	display: block;
}

#main > main > div.cc > section > div > div.filter-ui > div > label {
	color: #206051;
	font-size: 20px;
	font-weight: bold;
	float: right;
	display: block;
}

h2.filter-reset-all-box {
	text-align: left;
	margin-top: 40px;
}

@media (min-width: 360px) {
	/* Shift Reset-All to top-right corner */
	h2.filter-reset-all-box {
		text-align: right;
		margin-top: -4px;
	}
}

@media (min-width: 700px) {
	.filter-ui {
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
			grid-template-areas: 
		"head head"
		"one two"
		"three three";
	}

	.radio-filter-button {
		display: inline;
	}
	.user-type {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
	}
	.assessment-and-training {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}
	.filter-headline {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
	.radio-filter-events {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
}

@media (min-width: 1000px) {
	.filter-ui {
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
			grid-template-areas: 
		"head head"
		"one two"
		"three three";
	}
	.user-type {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
	}
	.assessment-and-training {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}
	.filter-headline {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
	.radio-filter-events {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
}

legend span.accessibility {
	position:absolute;
	left:-9999px;
	width:100px;
	height:auto;
	overflow:hidden;
}

/* Format the training events Reset-All button */
input[type="checkbox"]#filter-reset-all {
	-webkit-appearance: initial;
	-moz-appearance: initial;
		appearance: initial;
	background: gray;
	width: 22px;
	height: 22px;
	/* border: none; */
	position: relative;
	/* content: "X";
	color: #fff; */
	margin-bottom: -4px;
	outline: auto;
}

input[type="checkbox"]#filter-reset-all {
	background:white;
}

input[type="checkbox"]#filter-reset-all:after {
	content: "X";
	color: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

/* Disable higlighting of Select-All box */
input {
	outline-offset: 4px;
}

input#filter-reset-all:hover {
	background: #408440;
}

input#close-all:hover {
	background: #408440;
}

input#expand-all:hover {
	background: #408440;
}

/* Button styles */
input[type="button"], input[type="submit"], input[type="reset"], button, a.btn {
	display: inline-block;
	padding: 0.325em 0.625em;
	color: #fff;
	background-color: #206051;
	border-color: #206051;
	text-decoration: none;
	text-align: left;
	text-decoration: none !important;
	vertical-align: middle;
}

input, button, select, textarea, a.btn {
	border-width: 1px;
	border-radius: 4px;
	border-style: solid;
	border-color: #999;
}

/* Training Opportunities content styling */
div.content.hidden {
	margin-left: 29px;
	margin-bottom: 27px;
	margin-top: 20px;
}

.cm-indent {
	margin-left: 25px;
}

/* From display.v5.cs */
.accordion h2[role="button"] svg,
.accordion h3[role="button"] svg,
.accordion p[role="button"] svg {
	display: inline-block;
	vertical-align: middle;
	height: 17px;
	width: 17px;
	margin-top: -2px;
	margin-right: 10px;
	fill: #333;
}

svg { pointer-events: none; }

.accordion h3 {

	font-size: 18px; 
	color: #003082;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.filter-ui {
		margin-top: 30px;
	}

	.filter-headline.filter-reset-all-box {
		margin-top: -35px;
	}

	div.filter-ui > h2.filter-headline { 
		margin-top: -30px;
		margin-bottom: 20px; 
	}
}

/* Temporary fixes for pre-existing pages with bad heading structure, etc */
.accordion h4.fauxh3 {

	font-size: 17px; 
	color: #003082 !important;
}

.accordion h3.fauxh2 {

	font-size: 20px; 
	color: #206051 !important;
}



#filtered-events h2 {
	margin-top: 30px;
	font-size: 1.8em;
	color: #003082 !important;
}


#filtered-events h3 {
	margin-top: 25px;
	font-size: 1.4em;
	color: #206051 !important;
}

#filtered-events > .filter-item h4 {
	font-size: 18px;
	color: #003082 !important;
	margin-top: 28px;
}

#filtered-events > .filter-month > .filter-item h4 {
	font-size: 18px;
	color: #003082 !important;
	margin-top: 28px;
}

#filtered-events > .filter-item h5 {
	font-size: 16px;
	font-style: italic;
	color: #003082 !important;
	margin-top: 28px;
}

	#filtered-events > .filter-month > .filter-item h5 {
	font-size: 16px;
	font-style: italic;
	color: #003082 !important;
	margin-top: 28px;
}