/* BEGIN AREA-LISTING CSS ---------------------------------------> */
#content::before 
{
	display: none;
}

#mainContent
{
	float: none;
	width: 100%;
}


#areaLinkNav button 
{
	padding: 0;
	border: none;
	background: none;
	text-transform: uppercase;
	font: inherit;
	cursor: pointer;
}

#areaLinkNav * 
{

	text-transform: uppercase;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--cyan-blue);
}

#areaLinkNav > * + *::before 
{
	content: '|';
	margin: 0 10px;
}

#areaLinkNav *:is(:hover,:focus)
{
	color: inherit;
	text-decoration: none;
}

div#listColumnWrapper
{
	position: relative;
}

div.listColumn
{
	position: relative;
	width: 100%;
}

div.listColumn ul,
div.listColumn ul li
{
	position: relative;
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	line-height: normal;
}

div.listColumn ul li
{
	padding-bottom: 15px;
	margin-bottom: 33px;
	--min-font-size: 22;
	--max-font-size: 26;
	color: var(--dark-cyan);
	font-weight: 400;
	border-bottom: 1px solid var(--rules);
}

div.listColumn ul li a 
{
	display: block;
}

div.listColumn ul li a
{
	color: inherit;
}

div.listColumn ul li a:is(:hover, :focus)
{
	color: var(--blue-green);
}

div.listColumn ul.hierList li
{
	margin: 0.25em 0 0 0;
	font-weight: normal;
	border: none;
	--min-font-size: 18;
	--max-font-size: 22;
}

div.listColumn li li
{
	padding-left: 1em;
}

div.listColumn.areaToggle > ul > li > ul.hierList
{
	display: none;
}

div.listColumn.areaToggle  ul.hierList
{
	margin-top: 20px;
}

div.listColumn.areaToggle .areaExpand
{

	position: absolute;
	right: 0;
	top: -15px;
	display: inline-block;
	/*width: 18px;
	height: 18px;*/
	margin: 2px 0 0 5px;
	padding: 25px;
	border: 0px;
	background: #f1f1f1;
	cursor: pointer;
	text-align: center;
	vertical-align: top;
	background: url('../i/icon-chevron.svgz') center no-repeat; /* data-uri */
	background-size: 18px;
	filter: contrast(0%);
	opacity: .35;
}


div.listColumn.areaToggle .areaExpand.expanded
{
	transform: rotate(180deg);
}

#practiceSearch button 
{
	position: absolute;
	height: 68px;
	width: 68px;
	top: 0px;
	right: 0;
	/*transform: rotate(90deg);*/
	background: none;
	border: none;
	cursor: pointer;
	text-indent: -9999em;
	padding: 0;
	font-size: 0px;
}

#practiceSearch button svg 
{
	position: relative;
	left: 17px;
	top: 0;
	display: block;
	width: 18px;
	height: auto;

	fill: var(--orange-yellow);
}

@media (min-width: 768px)
{
	#listColumnWrapper
	{
		display: flex;
		gap: 82px;
	}

	#listColumnWrapper > div 
	{
		flex: 1 6 66%;
	}

	#listColumnWrapper > div + div 
	{
		flex: 1 1 33%;
	}

	
}

#practiceSearch
{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	position: relative;
}

#practiceSearch form
{
	position: relative;
	flex: 1 1 800px;
}

#practiceSearch form  > div
{
	display: block;
}

#practiceSearch form > div > div
{
	width: 100%;
	position: static;
}
	
/*#practiceSearch form [type=submit]
{
	float: right;
	position: absolute;
	top: 0px;
	right: 0px;
	max-height: 33px;
}

#practiceSearch form [type=submit]:hover,
#practiceSearch form [type=submit]:focus
{
	cursor: pointer
}
*/
#practiceSearch form input[type=text]
{
	padding-right: 80px;
}

@media (min-width: 920px)
{

	#practiceSearchWrapper
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 40px;
	}

	#practiceSearch,
	#practiceLandingContent
	{
		width: calc(100% - 28% - 121px);
		margin: 0;
	}
}

/* END AREA-LISTING CSS -----------------------------------------> */