@charset "utf-8";
/* CSS Document */

	
html {
    scroll-behavior: smooth;
}

content {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    padding: 20px;
    margin: 0;
}

.pagesection {
	/* This class is used to locate sections within the page
		for automatic highlighting on scroll when used with the
		sidebar-breadcrumb-nav.js file.
		
		Assign it to any element in the page, and associate the same
		element with an id value that is linked in the sidebar nav to highlight
		the menu item automatically when scrolling.
	*/
}

/* Breadcrumb container that holds the breadcrumb bar */
.breadcrumb-container {
	align-content: center;
	text-align: center;
    width: 100%;
    /*max-width: 1400px; /* Prevents stretching on larger screens */
	margin: 0;
	padding: 0;
	min-height: 44px;
}

.breadcrumb-container * {
	background-color: #f7f7f7;
}

.breadcrumb-container ol,
.breadcrumb-container ul {
	justify-content: center;
	min-height: 44px;

}

.breadcrumb-container li,
.breadcrumb-container li * {
	color: #e21833;
	display: none; /* Hide items by default */
	/*min-height: 44px;*/
}


.breadcrumb-container li:first-child,
.breadcrumb-container li:first-child *{
	display: inline-block;
}

.breadcrumb-item.active,
.breadcrumb-item.active * {
	display: inline-block;
	pointer-events: none;
	cursor: default;
	text-decoration: none;
	color: #000000;
}


/* Page container that holds the sidebar and content */
.page-container {
    display: flex;
	position: relative;
    width: 100%;
    max-width: 1400px; /* Prevents stretching on larger screens */
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
	margin-top: 2rem;
	padding-top:2rem;
}

pageSection {
	/*height: 100vh;*/
}

/* Sidebar styling */
.nav-sidebar {
    width: 350px;
	min-height: 600px;
    color: #000000;
	margin-right: 20px;
    position: sticky; /* Makes the sidebar sticky */
    top: 10px;
}

.nav-sidebar ul {
    list-style-type: none;
	padding: 0;
}
.nav-sidebar ol  {
    list-style-type: decimal;
	padding: 0;
}

.nav-sidebar ul li,
.nav-sidebar ol li {
	padding: 0;
	margin: 0;
}

.nav-sidebar li {
	font-size: 1.0rem;	
}

.nav-sidebar li ul li a,
.nav-sidebar li ol li a
{
    padding-left: 3.5rem;
	display: none;
}

.nav-sidebar li a {
	color: #000000;
    text-decoration: none;
 	display: block;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 2rem;
	padding-right: 0.2rem;
	border-bottom: 1px solid #d8d8d8;
	transition: all 300ms;
	word-wrap: break-word;
	min-height: 44px;
}

.nav-sidebar li.currentpage a,
.nav-sidebar li.currentpage ul li a,
.nav-sidebar li.currentpage ol li a {
    display: block;
	background-color: #f7f7f7;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.nav-sidebar li.currentpage>a {
	font-size: 1.15rem;
}


.nav-sidebar *.alwaysShow {
	display: block;
}



.nav-sidebar *.active,
.nav-sidebar li a.active {
	background-color: #f7f7f7;
    box-shadow: -0.35rem 0px 0px 0px #e21833;
    font-weight: bold;
	color: #000000;
	font-size: 1rem;
}


@media (pointer: fine) {
	.nav-sidebar li a:hover {
		background-color: #f7f7f7;
		box-shadow: -0.35rem 0px 0px 0px #e21833;
		font-weight: bold;
		color: #000000;
	}
}

.nav-sidebar>ul:first-of-type>li:first-child>a,
.nav-sidebar>ol:first-of-type>li:first-child>a,
.nav-sidebar>ul:first-of-type>li.currentpage.active:first-child>a.active,
.nav-sidebar>ol:first-of-type>li.currentpage.active:first-child>a.active {
	color: #e21833;
	font-weight: bold;
	font-size: 1.15rem;
}


/* Wrapper for centering content */
.content-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

/* Main content container */
.content-container {
    width: 100%;
    max-width: 1200px; /* Ensure content does not exceed 1200px */
	padding: 0 1rem;
}



/* Media Queries for Smaller Screens (Mobile Devices) */
@media (max-width: 800px) {
    /* Change layout to column for smaller screens */
    .page-container {
        flex-direction: column; /* Stack sidebar and content vertically */
        align-items: center; /* Center items horizontally */
		width: 100%;
		justify-items: center;
		position: inherit;
    }

	.page-container > * {
		padding: 0 0 0 0;
		margin: 0 0 0 0;
	}

    /* Hide sidebar and level 2 items */
  .nav-sidebar,
	.nav-sidebar * {
	display: none;
  }
	
  .breadcrumb-container,
	.breadcrumb-container *,
	.breadcrumb-container nav ul {
	position: sticky;
	top: 0;
	height: 2rem;
	background-color: #e6e6e6;
	opacity: 1;
	z-index: 100;
	margin-bottom: 1rem;
}
	
	.breadcrumb-container,
	.breadcrumb-container * {
		padding: 0 0 0 0;
		margin: 0 0 0.5rem 0;
	}


}

.video .container {
    display: flex;
    justify-content: center;
}
    
.video iframe {
	align-self: center;
    aspect-ratio: 16 / 9;
    width: 100% !important;
}