/* ========================================================================== */
/* ========  COMMON  ======================================================== */
/* ========================================================================== */

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	margin:			0;
	padding:		0;
	background-color:	#999999;
}

table	{ height:1px;	}
tr	{ height:100%;	}
td	{ height:100%;	}
form	{ margin:0;	}

.opsPageOutline {
	font:			0px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
	font-size:		0px;
	width:			100%;
}

.opsPageText {
	font-size:		12px;
}

/* ======================================================================================================================================== */
/* ========  NEW OPS DESIGN  ============================================================================================================== */
/* ======================================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --  APPLICATION LEVEL  ----------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

:root {
	--frameBannerHeight:	67px;		/* The width of the navigation collapse/expand button */
	--frameBannerBgColor:	#E1E8D1;	/* The background color of the top header/banner - per Eugene's design */
	--sliderPanelBgColor:	#062311;	/* The background color of the navigation panel */
	--sliderButtonBgColor:	#999999;	/* The background color of the navigation button */
	--sliderPanelWidth:	180px;		/* The width of the navigation slider panel. */
	--sliderButtonWidth:	10px;		/* The width of the navigation collapse/expand button */
	--sliderButtonHeight:	10px;		/* The width of the navigation collapse/expand button */
	--sliderButtonPos:	-1px;		/* The width of the navigation collapse/expand button */
	--sliderHoverColor:     #8CC641;
	--sliderSelectColor:    #FFCC35;
	/* --contentBgColor:	#B4B4B4; */	/* The background color of the payload/content area - per Eugene's design */
	--contentBgColor:	#999999;
	--systemFontList:	13px "Circular Std", "Arial", "Helvetica", "Times New Roman", "Courier New", "sans-serif";
	--systemFontColor:	#424242;
}

html,body {
	height:			100%;
	font-family:		"Circular Std", "Arial", "Helvetica", "Times New Roman", "Courier New", "sans-serif";
	margin:			0;
	padding:		0;
}

.opsFrameAppEnvelope {
	height:			100%;
	display:		flex;
	flex-direction:		column;
	font-size:		14px;
	overflow:		hidden;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --  FRAME TOP LINE  -------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

.opsFrameAppBanner {
	min-height:		var(--frameBannerHeight);
	display:		flex;
	flex-direction:		row;
	position:		sticky;
	top:			0;
	background-color:	var(--frameBannerBgColor);
	color:			white;
	z-index:		10;
}

.opsFrameAppLogo {
	min-width:		var(--sliderPanelWidth);
	width:			var(--sliderPanelWidth);
	min-height:		var(--frameBannerHeight);
	background-color:	var(--sliderPanelBgColor);
	display:		flex;
	align-items:		center;
}

.opsFrameAppImage {
	margin-left:		30px;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --  FRAME CONTENT  --------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

.opsFrameAppContent {
	flex:			1;		/* takes remaining height */
	display:		flex;
	min-height:		0;		/* prevents tables from overflowing their boundaries */
	overflow:		hidden;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --  FRAME BANNER  ---------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

.opsFrameBannerFiller {
	flex:			1 0;
	min-width:		0;
	min-height:		var(--frameBannerHeight);
	background-color:	var(--frameBannerBgColor);
}

.opsFrameBannerContainer {
	display:		flex;
	flex-direction:         row;
	flex:			0 1118px;
	min-width:		0;
	align-content:		center;
}

.opsFrameBannerPageIcon {
	height:			calc(var(--frameBannerHeight) - 10px);
	margin:			5px 0 5px 0;
}
	
.opsFrameBannerPageTitle {
	
	flex:			1;
	padding-left:		20px;
	font-size:		25px;
	color:			var(--systemFontColor);
	line-height:		var(--frameBannerHeight);
}

.opsFrameBannerSchoolContainer {
	display:		flex;
	flex-direction:         column;
	justify-content:	center;
	align-items:		flex-end;
	padding:		0 20px 0 20px;
}

.opsFrameBannerSchoolName {
	font-size:		15px;
	color:			#757575;
	font-weight:		bold;
}

.opsFrameBannerSchoolYear {
	font-size:		12px;
	color:			#757575;
	font-weight:		bold;
}

.opsFrameBannerInitialsCircle {
	margin:			auto 50px auto 0;
	width:			37px;
	height:			37px;
	font-size:		17px;
	border-radius:		50%;
	display:		flex;
	flex-shrink:		0;
	align-items:		center;
	justify-content:	center;
	font-weight:		bold;
}

.opsFrameBannerCircleText {
	background:		#616161;
	color:			#E0E0E0;
	padding-top:		1px;
}

.opsFrameBannerCircleLeaf {
	background:		#062311;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --  NAVIGATION BAR  -------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

.opsFrameNavEnvelope {
	display:		flex;
	flex-direction:		row;
}

.opsFrameNavContainer {
	display:		flex;
	flex-direction:		column;
	justify-content:	space-between;
	width:			var(--sliderPanelWidth);
	height:			(100vh - var(--frameBannerHeight));
	flex-shrink:		0;
	position:		sticky;
	top:			var(--frameBannerHeight);
	background-color:	var(--sliderPanelBgColor);
	color:			white;
	transition:		width 0.25s ease;
}

.opsFrameNavMenu {
}

.opsFrameNavSection {
}


.opsFrameNavSection:hover .opsFrameNavSubItems {
	display:		block;
}

.opsFrameNavSection.active .opsFrameNavSubItems {
	display:		block;
}

.opsFrameNavLeader {
	margin-top:		15px;
	margin-bottom:		15px;
	margin-left:		30px;
	font-weight:		bold;
}

.opsFrameNavHeader {
	margin-top:		15px;
	margin-bottom:		15px;
	margin-left:		20px;
	font-weight:		bold;
	display:		flex;
	flex-direction:		row;
}

.opsFrameNavSubItems {
	list-style:		none;
	margin:			0;
	padding:		0;
	display:		none;
}

.opsFrameNavLink {
	font:			var(--systemFontList);
	text-decoration:	none;
	color:			white;
	font-weight:		bold;
}

.opsFrameNavLink:link {
	text-decoration:	none;
	color:			white;
	font-weight:		bold;
}

.opsFrameNavLink:visited {
	text-decoration:	none;
	color:			white;
	font-weight:		bold;
}

.opsFrameNavLink:active {
	text-decoration:	none;
	color:			white;
	font-weight:		bold;
}

.opsFrameNavLink:hover {
	text-decoration:	none;
	color:			var(--sliderHoverColor);
	font-weight:		bold;
}

.opsFrameSelNavLink {
	font:			var(--systemFontList);
	color:			var(--sliderSelectColor);
	font-weight:		bold;
}

.opsFrameSelNavLink:visited {
	color:			var(--sliderSelectColor);
	font-weight:		bold;
}

.opsFrameNavSubItem {
	margin-top:		15px;
	margin-bottom:		15px;
	margin-left:		40px;
	display:		flex;
	flex-direction:		row;
}

.opsFrameNavCurrentItem {
	color:			var(--sliderSelectColor);
	font-weight:		bold;
}

.opsFrameNavBullet {
	width:			10px;
	color:			var(--sliderSelectColor);
	font:			var(--systemFontList);
	font-weight:		bold;
}

.opsFrameNavContainer.collapsed {
	width:			0;
}

.opsFrameNavContainer.collapsed .opsFrameNavLeader {
	display:		none;
}

.opsFrameNavContainer.collapsed .opsFrameNavHeader {
	display:		none;
}

.opsFrameNavContainer.collapsed .opsFrameNavSubItem {
	display:		none;
}

.opsFrameNavContainer.collapsed .opsFrameNavCopyright {
	display:		none;
}

.opsFrameNavContainer.collapsed .opsFrameNavHrLine {
	display:		none;
}

.opsFrameNavHrContainer {
	width:			100px;
	margin:			0px 0px 0px 30px;
}

.opsFrameNavHrLine {
	height:			1;
	border-bottom:		1px solid var(--sliderSelectColor);
}

.opsFrameNavToggle {
	position:		absolute;
	top:			50%;
	right:			var(--sliderButtonPos);
	background:		none;
	border:			none;
	padding:		0;
	cursor:			pointer;
	transform:		translateY(-50%);
	width:			var(--sliderButtonWidth);
	height:			var(--sliderButtonHeight);
}

.opsFrameNavContainer.collapsed .opsFrameNavToggle {
	right:			calc(-1 * var(--sliderButtonWidth));
}

.opsFrameNavCopyright {
	font-size:		10px;
	color:			#777777;
	margin:			0 12px 12px 12px;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --  APPLICATION CONTENT (PAYLOAD)  ----------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

.opsFrameContentEnvelope {
	flex:			1;
	display:		flex;
	flex-direction:		column;
	background-color:	var(--contentBgColor);
	overflow-x:		auto;
	overflow-y:		auto;
	min-width:		0;
	min-height:		0;
}

.opsFrameContentContainer {
	flex:			0 0 auto;	/* participates normally in column flow */
	overflow-x:		hidden;
	overflow-y:		hidden;		/* prevent nested vertical scroll */
	box-sizing:		border-box;
	min-width:		0;
	background-color:	var(--contentBgColor);
}

.opsFrameContent {
	width:			max-content;
	max-width:		100%;
	margin-left:		auto;
	margin-right:		auto;
	font:			13px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
}

/* ======================================================================================================================================== */
/* ========  END NEW OPS DESIGN  ========================================================================================================== */
/* ======================================================================================================================================== */

/* ========================================================================== */
/* ========  HEADER  ======================================================== */
/* ========================================================================== */

.opsMainHeader {
	display:		flex;
	flex-direction:         row;
}

.opsHdrOuterBlock {
	width:			auto;
	flex:			1 0 auto;
}

.opsHdrSchoolImg {
	width:			230px;
	flex:			0 0 auto;
}

.opsHdrCenterBlock {
	width:			650px;
	vertical-align:		top;
	flex:			0 0 auto;
}

.opsHdrOpsYearImg {
	width:			107px;
	flex:			0 0 auto;
}

.opsHdrMenuBlock {
	display:		flex;
	flex-direction:         row;
	justify-content:	space-between;
	align-items:		center;
	white-space:		nowrap;
	width:			100%;
	height:			30px;
	background-color:	#212631;
	
}

.opsHdrMenuText {
	font-size:		12px;
	font-weight:		bold;
	padding-top:		0.3em;
	padding-bottom:		0.3em;
	text-decoration:	none;
}

.opsHdrMenuTextOff {
	color:			#FFCC00;
}

.opsHdrMenuTextSel {
	color:			#7CC11A;
}

.opsHdrMenuText:hover {
	color:			#7CC11A;
}

.opsHdrMenuExpand {
	width:			100%;
}

.opsHdrMenuGap    {
	width:			25px;
}

.opsHdrTitleBlock {
	display:		flex;
	flex-direction:         row;
	justify-content:	space-between;
	align-items:		center;
	width:			100%;
	height:			37px;
	background-color:	#676767;
}

.opsHdrTitleText {
	font-size:		18px;
	font-weight:		bold;
	color:			#CDCDCD;
}

.opsHdrHelpText {
	font-size:		18px;
	font-weight:		bold;
	text-decoration:	none;
	color:			#CDCDCD;
}

.opsHdrHelpText:hover {
	color:			#7CC11A;
}

.opsHdrTitleSmall {
	font-size:		66%;
}

.opsHdrLeftUpper {
	height:			30px;
	background-color:	#212631;
}

.opsHdrLeftLower {
	height:			37px;
	background-color:	#676767;
}

.opsHdrRightUpper {
	height:			30px;
	background-color:	#212631;
}

.opsHdrRightLower {
	height:			37px;
	background-color:	#676767;
}

.opsHdrMenuYearGapWrapper {
	width:			75px;
	flex:			0 0 auto;
}

.opsHdrMenuYearGapUpper {
	height:			30px;
	background-color:	#212631;
}

.opsHdrMenuYearGapLower {
	height:			37px;
	background-color:	#676767;
}

.opsHdrGearWheel {
	width:22px;
}

/* ========================================================================== */
/* ========  POPUPS  ======================================================== */
/* ========================================================================== */

.opsPopupBody { 
	background-color:	#C7CFD1;
	font-size:		13px;
	padding:		6px 6px 6px 6px;
}

.opsPopupAlignCellL { 
	text-align:		left;
	font-size:		13px;
	padding:		6px 6px 6px 6px;
}

.opsPopupAlignCellR { 
	text-align:		right;
	font-size:		13px;
	padding:		6px 6px 6px 6px;
}

.opsPopupAlignCellC { 
	text-align:		center;
	font-size:		13px;
	padding:		6px 6px 6px 6px;
}

.opsPopupButton {
	margin-left:		0px;
	margin-right:		10px;
}

/* ========================================================================== */
/* ========  MAGICS  ======================================================== */
/* ========================================================================== */

.opsMagicButtonWrapper {
	display:		inline-block;
	text-align:		right;
}

.opsMagicButtonBlock {
	display:		flex;
	flex-direction:         row;
	justify-content:	flex-end;
	padding-top:		5px;
}

.opsMagicButton {
	font-size:		12px;
	font-weight:		bold;
	color:			black;
	text-decoration:	none;
	margin-left:		20px;
	cursor:			pointer;
}

.opsMagicButtonCurr {
	color:			#5C59A7;
}

/* ========================================================================== */
/* ========  CANVAS  ======================================================== */
/* ========================================================================== */

.opsCanvasOutline {
	overflow-x:		hidden;
}

.opsCanvasWrapper {
	font-size:		15px;
	color:			black;
	background-color:	#999999;
	text-align:		center;
	overflow-x:		auto;
}

.opsCanvasContent {
	display:		inline-block;
	min-height:		calc(100vh - 67px - 62px - 35px);
	min-width:		1035px;
	background-color:	#C7CFD1;
	text-align:		left;
	padding:		8px 8px 8px 8px;
	margin-bottom:		8px;
	/* border:			10px #404040 solid; --- ONLY FOR PAST YEARS, NOT THE CURRENT YEAR */
}
.opsCanvasTitleWrapper {
	display:		flex;
	flex-direction:         row;
	justify-content:	space-between;
	width:			1014px;
	margin:			0 auto 0 auto;
}

.opsCanvasTitleWrapperLP {
	display:		flex;
	flex-direction:         row;
	justify-content:	space-between;
	width:			1066px;
}

.opsCanvasTitle {
	display:		inline-block;
	text-align:		left;
	font-size:		18px;
	font-weight:		bold;
	color:			#333333;
	padding-top:		3px;
	padding-bottom:		3px;
	padding-left:		207px;
}

.opsContentPageTitle {
	font-size:		15px;
	font-weight:		bold;
	color:			#333333;
}

.opsContentTableTitleTdCell {
	padding:		0;
	background-color:	#C7CFD1;
}

.opsContentTableTitleWrapper {
	display:		flex;
	flex-direction:		column;
	height:			100%;
}

.opsContentTableTitleGap {
	flex:			1 0 auto;
}

.opsContentTableTitleText {
	font:			15px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
	font-weight:		bold;
	vertical-align:		middle;
	padding:		4px 2px 4px 2px;
	flex:			0 0 auto;
}

.opsContentTableTitleLink {
	font-size:		15px;
	font-weight:		bold;
	vertical-align:		middle;
	padding:		4px 2px 4px 2px;
	flex:			0 0 auto;
}

.opsContentTableTitleUline {
	border-bottom-width:	7px;
	border-bottom-style:	solid;
	flex:			0 0 auto;
}

.opsContentLargeText {
	font:			15px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
	color:			#333333;
}

.opsContentNormalText {
	font:			13px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
	color:			#333333;
}

.opsContentSmallText {
	font:			12px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
	color:			#333333;
}

.opsContentTinyText {
	font:			10px Arial, Helvetica, "Times New Roman", "Courier New", sans-serif;
	color:			#333333;
}

.opsDisapprovedTableCell {
	background-color:	#88B0C4;
}

.opsActionButtonButton {
	padding:		2px;
	margin:			0;
	width:			28px;
	height:			25px;
}

.opsActionButtonIcon {
	width:			16px;
	height:			16px;
}

/* ========================================================================== */
/* ========  FOOTER  ======================================================== */
/* ========================================================================== */

.opsFrameFooterEnvelope {
	display:		flex;
	flex-direction:         row;
	align-items:		center;
}

.opsFrameFooterImage {
	width:			100px;
	flex-shrink:		0;
}

.opsFrameFooterText {
	background:		#ffb3b3;
	padding:		10px;
	white-space:		nowrap;
	flex-shrink:		0;
}

.opsFooter {
	display:		flex;
	flex-direction:         row;
}

.opsFooterExtension {
	flex:			1 0 auto;
}

.opsFooterBlock {
	width:			832px;
	flex:			0 0 auto;
}

.opsFooterBand {
	height:			11px;
	background-color:	#333333;
}

.opsFooterImage {
	font-size:		0;
	flex-shrink:		0;
}

.opsFooterCopy {
	display:		flex;
	flex-direction:         row;
	align-items:		center;
	height:			51px;
	background-color:	#000000;
}

.opsFooterText {
	font-size:		10px;
	color:			#999999;
}

.opsFooterTrailer {
	flex:			1;
	background-color:	#000000;
}

.opsReportButton {
	font-size:		13px;
	color:			#202020;
	background-color:	#F0F0F0;
	text-decoration:	none;
	border:			1px solid #606060;
	border-radius:		3px;
	padding:		0px 5px 2px 5px;
	margin:			1px;
}

.opsReportButton:hover {
	background-color:	#D3D3D3;
}

.opsPreEnrolledStudent
{
	color:			#CC7722;
	font-weight:		bold;
}

.opsInactiveStudent
{
	color:			red;
	font-weight:		bold;
}

.opsExpiredInsuranceVendor
{
	color:			#CC7722;
	font-weight:		bold;
}

.opsInactiveVendor
{
	color:			red;
	font-weight:		bold;
}

.opsFirebrickText {
	color:			firebrick;
}

.opsRequiredFieldStar {
	color:			firebrick;
	font-weight:		bold;
}

.opsRequiredFieldText {
	color:			black;
	font-weight:		normal;
}

.opsSuccessMessage
{
	color:			#008800;
	font-weight:		bold;
}

.opsWarningMessage
{
	color:			#D06C2C;
	font-weight:		bold;
}

.opsErrorMessage
{
	color:			firebrick;
	font-weight:		bold;
}