/*
 * CSS for Left Nav Expand Collapse
 */
/* highcharts default width */
.hc--maxwidth, .hc--minwidth {
	height:600px !important;
    width:400px !important;
}
@media (min-width:768px) {
	.hc--minwidth{
		width:478px !important;
	}
	.hc--maxwidth{
		width:664px !important;
	}
}
@media (min-width:992px) { 
	.hc--minwidth{
		width:643px !important;
	}
	.hc--maxwidth{
		width:884px !important;
	}
}
@media (min-width:1200px) { 
	.hc--minwidth{
		width:808px !important;
	}
	.hc--maxwidth{
		width:1104px !important;
	}
}
/* high charts*/

    .article--collapse {
	    display:flex;
	    flex-direction:row;
	    justify-content:flex-start;
    }
    .section--collapse {
	    flex: 1;
	    transition:flex 0.1s ease;
    }
    .nav-trigger {
		max-width: 30px;
		border-right: 1px solid #ddd;
	    margin-right: 2em;
	}
		.nav-trigger__link {
			/* fixed with JS for global nav movement */
			/*commenting out the following line when the requested the arrow not move as the page is scrolled JXL 06-28-2019*/
            /*position: fixed;*/
		}
    .nav-drawer {
	    float: left;
	    margin-right: 2em;
    }

	/* for landing page */
    .toggle__icon.collapsed .fa-caret-up:before {
         content: "\f0d7";
    }
    .toggle__desc.collapse.in {
         display: inline;
    }

    .aside__card {
	    border-bottom: 1px solid #eee;
	    border-right: none;
	    margin: 0 0 1em 0;
	    padding: 0 0 1em 0;
		transition: flex 0.1s ease;
    }
		.aside__card:last-of-type {
			border: none;
			margin: 0;
			padding: 0;
		}
		.aside__card p {
			margin-bottom: 15px;
		}
		
    @media screen and (min-width: 768px) {
        .nav-trigger {	
	        padding-right: 2em;
        }
        .section--collapse.collapse {
            flex: 0;
        }
        .section--collapse.collapse.in, .section--collapse.collapsing {
            flex: 1;
        }
    }
    .nav-drawer.collapsed ~ .nav-trigger .fa-angle-double-right::before {
        content: "\f101";
    }
    .nav-drawer.collapse.in ~ .nav-trigger .fa-angle-double-right::before,
	.nav-drawer.collapsing ~ .nav-trigger .fa-angle-double-right::before {
        content: "\f100";
    }

	@media screen and (min-width: 768px) {
		.content--collapse {
			flex: 3 1 0%;
			/* for children */
			display: flex;
			justify-content: flex-start;
		}
	}

    .body--collapse {
        height: auto;
        flex: 3;
    }
		/* body styling for content, tabs, and bullets
		.nav-drawer.collapse.in ~ .content--collapse .body--collapse:before, 
		.nav-drawer.collapse.in ~ .content--collapse .body--collapse:after {
			clear: both;
			content: "";
			display:table;
		} */
		.body--collapse:before, 
		.body--collapse:after {
			clear: both;
			content: "";
			display:table;
		}
		.body--collapse .nav.nav-pills {
			margin: 2em 0 1em;
		}
		.body--collapse .body__highlights {
			margin-bottom: 2em;
		}
	.aside--collapse {
		flex: 1;
		margin-top: 2em;
		padding-left: 0;
		padding-top: 1em;
		border-top: 1px solid #eee;
	}

    /* to move aside when nav collapsed */
	@media screen and (min-width: 768px) {
		.nav-drawer.collapse ~ .content--collapse {
			flex-direction: row;
		} 
		.nav-drawer.collapsing ~ .content--collapse .aside--collapse,
		.nav-drawer.collapse.in ~ .content--collapse .aside--collapse {
			margin-top: 2em;
			padding-left: 0;
			padding-top: 1em;
			border-top: 1px solid #eee;
		}
		.aside--collapse {
			margin-top: 0;
			border-top: 0;
			padding-left: 2em;
		}
	}
    .nav-drawer.collapse.in ~ .content--collapse, .nav-drawer.collapsing ~ .content--collapse {
		display: block;
    }

    .nav-drawer.collapse.in ~ .content--collapse .aside--collapse.aside--collapse-hidden, 
	.aside--collapse.aside--collapse-hidden {
        display: none;
    }

	@media screen and (max-width: 768px) {
		.nav-drawer,
		.nav-trigger{
			flex: 1 0 88%;
		}
		.nav-trigger {
			margin-left: 0em;
		}
		.nav-drawer.collapse.in ~ .nav-trigger {
			border-left: 1px solid #ddd;
			border-right: 0;
			margin-right: 0;
			padding-left: 1em;
		}
        .nav-drawer.collapse.in ~ .content--collapse  {
            display: none;
        }
    }
	
    @media screen and (min-width: 992px) {
		/* to move aside when nav collapsed */
	/*	.nav-drawer.collapse ~ .content--collapse {
			flex-direction: row;
		} 
		.nav-drawer.collapse.in ~ .content--collapse, .nav-drawer.collapsing ~ .content--collapse {
            display: block;
		}*/
		
		/* when nav collapsed, move aside cards */
		.nav-drawer.collapse.in ~ .content--collapse .aside--collapse,
		.nav-drawer.collapsing ~ .content--collapse .aside--collapse {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		/* when expanded on large, move to 4byX */
		.nav-drawer.collapse.in ~ .content--collapse .aside__card,
		.nav-drawer.collapsing ~ .content--collapse .aside__card {
			flex: 1 0 21.5%;
		}	
		.nav-drawer.collapse.in ~ .content--collapse .aside__card,
		.nav-drawer.collapsing ~ .content--collapse .aside__card {
			border-bottom: none;
			border-right: 1px solid #eee;
			margin: 0 1em 2em 0;
			padding: 0 1em 0 0;
		}	
			.nav-drawer.collapse.in ~ .content--collapse .aside__card a {
				white-space: normal;
			}
			.nav-drawer.collapse ~ .content--collapse .aside__card:last-of-type, 
			.nav-drawer.collapse.in ~ .content--collapse .aside__card:last-of-type,
			.nav-drawer.collapse.in ~ .content--collapse .aside__card:nth-of-type(4n) {
				border: none;
				margin: 0;
				padding: 0;
			}
	}
/*
 * CSS for Nav Components
 */
	/* nav image if placed */
	.nav__logo {
		margin-bottom: 1em;
	}
	@media screen and (min-width: 768px) {
		.nav__logo {
			width: 85%;
		}
	}
	/* NAV CARD */
	.nav__card {
		margin-top: 2em;
	}
		.nav__card p { 
			margin-bottom: 15px 
		}
		.nav__section-cta {
			color: #e67a17;
			font-size: 18px;
			font-weight: bold;
		}
			.nav__section-cta:hover, .nav__section-cta:active, .nav__section-cta:focus {
				color: #e67a17;
				text-decoration: underline;
			}
			.nav__section-cta .fa {
				margin-left: 5px;
			}
			.nav__section-cta img {
				width: 65%;
			}
	/* local nav override */
	.local-nav .nav__card a {
		padding-right: inherit;
	}
		.local-nav .nav__card a.btn {
			padding-right: 12px;
		}

/* for Primary Topic List and Primary Bucket List */
.btn--wrapper .btn-primary {
    margin-top: 1em;
}
.card__img {
    margin-bottom: 1.75em;
}

/*
 * CSS to reset spacing around ul/ol to 13px
 */
.body--collapse p + ul, .body--collapse p + ol { 
	margin-top: -17px; 
}
.body--collapse h2 + ul, .body--collapse h2 + ol { 
	margin-top: 6px;
}
.body--collapse h3 + ul, .body--collapse h3 + ol { 
	/* nothing needed */
}
.body--collapse ul ul, .body--collapse ul ol, .body--collapse ol ul, .body--collapse ol ol { 
	margin-top: 0; 
	margin-bottom: 0; 
}