/* screen styles */
.noprint {
	/* display:block; */
}
.flyer {
	border: 3px dashed silver;  /* changed from 1px to 3px */
	background-color: white;
}

.screenwidth {
	width: 98%; 
	margin-left: auto; margin-right: auto;  /* needed by ns to center the page content */
}

/* TH 2024-08-02 (b452, issue 930): Only set the width to 100% if there is a main menu
 shown on the page */
/* TH 2024-11-06 (trunk, UI): Change from using :has pseudo class due to an indiana user
 might have had the option layout.css.has-selector.enabled to false on her browsers. 
 https://stackoverflow.com/questions/54224791/why-has-not-working-in-css-select-parent
*/
.screenwidth.has-topMenuContainer {
	width: 100% !important;
}

/* MM 2016-07-18 (issue 462, b221): changed min width from 800 to 400px */
.pagewidth {
	width: 100%;

	/* TH 2020-04-21 (b334, UI): Changed to 300px because some phone model width is less than 400px */
	min-width: 300px;
	margin-left: auto; margin-right: auto;  /* needed by ns to center the page content */
}

.pagwidthwithrigthbar {
	width: 100%;
}


/* Accessibility */
/* RS 2016-04-27 (b213, #446): Skip to main content */
a.skipmain {
	left:-999px;
	position:absolute;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
	z-index:-999;
	color: #fff;
	background-color:#4682b4;
	margin: 0px 35%;
	padding:5px;
	/*border-radius: 0 0 15px 15px;
	border:2px solid yellow;*/
	text-align:center;
	font-size:1.2em;
}
a.skipmain:focus, a.skipmain:active {
	left: auto;
	top: auto;
	width: 20em;
	height: auto;
	overflow:auto;
	z-index:999;
}
/* End Accessibility */

div.scrollable-container,

/* TH 2024-07-11 (b399, issue 929): add class to the iframe as well */
iframe.scrollable-container {
	max-width: 88vw;
	max-height: 80vh;
	overflow: auto;
	position: relative;

	/*
		Use z-index and background position this OVER the ride sidebar currently because of the 96vw, it streches the table and right sidebar overlays it
	*/
	/* TH 2024-08-02 (b452, issue 930): Reduce the zindex */
	z-index: 50;
	background: white;
}

/*  TH 2024-07-11 (b399, issue 929): Added new class resizable container */
div.resizable-container {
	max-width: 88vw;
	height: calc(100vh - 60px);
	overflow: auto;
	position: relative;
	resize: both;
	
	/* TH 2024-08-02 (b452, issue 930): Reduce the zindex */
	z-index: 50;
	background: white;
}

.scrollable-container table {
	position: relative;
	border-collapse: separate;
}

.scrollable-container td,
.scrollable-container th {
	padding: 0.25em;
}

/* consolidate row and column th */
.scrollable-container thead th,
.scrollable-container tbody th {

	position: -webkit-sticky; /* for Safari */
	position: sticky;

	/* Background is needed during scroll, or the text in the header and cell overlay each other.  
		Backgroun-color doesn't work because border-collapse makes the borders disappear when background color is used.
		Use a background image */
	background: url(/images/pixels/pixelsmoke.gif);

}

.scrollable-container tbody th.listitemdark {
	background: none;
	background-color: #f0f5fa;   /* #eeeedd; dark mustard */
}

.scrollable-container tbody th.listitemlight {
	background: none;
	background-color: white;   /* #eeeedd; dark mustard */
}

/* top header cells */
.scrollable-container thead th {
	top:0;  /* column headers need to stay on top */

	/* set vertical align to top (needed for curriculum map), and use important to prevent BS from overriding it */
	vertical-align: top !important;  
	
	/*TH 2021-02-26 (b361, issue 779-3): Added. Z-index so that the column sticky is higher than the horizontal sticky */
	z-index: 2;
}

/* first header cell (top-left cell) */
.scrollable-container thead th:first-child,

/*TH 2021-02-26 (b361, issue 779-3): Added. The first child isnt always the column that we want to be sticky, 
 add a class so that we can assign any column */
.scrollable-container thead th.headercol
 {
	left: 0;
	z-index: 100;
}

/* left cell of each row in body */
.scrollable-container tbody th {
	left: 0;  /* row headers need to stay on top */
}

.scrollable-container tbody tr.listitemrow:nth-child(even) .headercol {
	background-color: whitesmoke;
}

.scrollable-container tbody tr.listitemrow:nth-child(odd) .headercol{
	background-color: white;
}