/*
AUTHOR:				Steve Seaquist, Trusted Mission Solutions, Inc., for the US Small Business Administration.
DATE:				08/09/2011
DESCRIPTION:		Shared CSS classes for SBA Look-and-Feel *** USING STRICT MODE ***.
NOTES:

	This file contains all styles used by the cf_sbalookandfeel custom tag. Even classes that are used solely by
	cf_mainnav don't belong here. Restricting usage to the custom tag will make this file largely static in the future.

INPUT:				None.
OUTPUT:				Shared CSS classes for SBA Look-and-Feel.
REVISION HISTORY:	05/28/2021, SMJ:	OPSMDEV-2586:	Modified logo to use new environment aware SVG logos.
					11/07/2016, SRS:	Bug fix: .allowScrollingOnMobileSafari for 4 divs that might contain iFrames. 
					12/01/2015, SRS:	Added th1 as an override of default, now called Home Page Theme. 
					11/09/2015, SRS:	Reworked lots of stuff to be "themeable" and simpler because we no longer have 
										to support MSIE 8: Got rid of files for quirks mode, which we haven't generated 
										in over 4 years, to relieve that maintenance burden. 
					03/04/2015, SRS:	Made the color scheme considerably lighter, colors chosen by team consensus. 
					04/25/2013, SRS:	Added #DivSliderControl (for user complaints that not all of AppNav was visible).
					01/12/2012, SRS:	Fixed ugly font-size:7pt in BotMost. (Set both font-size and line-height to 8pt.)
					08/09/2011, SRS:	Original implementation. Cannibalized existing sba.css.
*/

/* ************************************************************************************************** */

:root {
	/* The offical SBA colors according to branding guidelines */
	--sba-red: hsl(0, 100%, 40%);
	--sba-white: hsl(0, 0%, 100%);
	--sba-blue: hsl(215, 100%, 21%);
	--sba-gray: hsl(0, 0%, 59%);

	/* Secondary SBA colors according to branding guidelines */
	--sba-light-blue: hsl(200, 100%, 37%);
	--sba-black: hsl(227, 21%, 13%);
	--sba-yellow: hsl(49, 100%, 47%);
	--sba-green:hsl(151, 67%, 30%);

	/* 
		use semantic variables as much as possible instead of directly
		referring to color variables. Makes it easier to hotswap colors
	*/
	--clr-err:var(--sba-red);
	--clr-warn:var(--sba-yellow);
	--clr-comm:var(--sba-green);
	--clr-dis: var(--sba-gray);

	--clr-bg: var(--sba-white);
	--clr-card-bg: var(--sba-white);

	--clr-text: var(--sba-black);
	--clr-link: var(--sba-blue);
	--clr-heading: var(--sba-blue);

	--clr-accent:var(--sba-red);
	--clr-card-accent:var(--sba-blue);

	--padding: 1rem;
	--margin: 2rem;

	--col-width: 250px;
	--card-width: 200px;
	--middle-col-width: 556px;
	/* Combined with middle-col-width above makes gallery ~16/9 ratio */
	--gallery-height: 313px;

	/* At some point maybe create different shadows to indicate hierarchy */
	--sba-shadow: 0 7px 15px 0 var(--clr-shadow);

	--clr-shadow: hsla(0, 0%, 0%, 0.1);
}

#DivWindow
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	}
/*
The DivMargin classes are defined in top, right, bottom, left (clockwize from top, like a clock) order to conform to CSS
conventions. Also, within each class, if the top, right, bottom or left properties are given, they're in that order.
*/
#DivMarginT
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	height:								10px;	/* Determines bottom. */
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					var(--sba-white);	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginR
	{
	position:							absolute;
	top:								10px;
	right:								0px;
	bottom:								10px;
	width:								10px;	/* Determines left. */
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					var(--sba-white);	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginB
	{
	position:							absolute;
	height:								10px;	/* Determines top. */
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					var(--sba-white);	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginL
	{
	position:							absolute;
	top:								10px;
	width:								10px;	/* Determines right. */
	bottom:								10px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					var(--sba-white);	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginT:hover,
#DivMarginR:hover,
#DivMarginB:hover,
#DivMarginL:hover
	{
	cursor:								pointer; /* Visual cue that the margin is a control. */
	/* background-color is calculated in sbalookandfeel.strict.js, so that it'll affect all 4 margins at the same time. */
	}

#DivEnvelope
	{
	position:							absolute;
	top:								10px;
	right:								10px;
	bottom:								10px;
	left:								10px;
	border:								1px solid var(--sba-black);
	/* margin:								0px;
	padding:							0px; */
	}

/* The following are the visible "regions" in top-down order, then left-right order: */

#DivEnvelopeTop	/* Special container for DivSkipLinks, DivSBALogo, DivAppName and DivMainNav. Allows smoother background. */
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	height:								77px;	/* Determines bottom. */
	left:								0px;
	/* background-image:					url(/library/images/sbalookandfeel/envelopetop/gradient.blue.png); */
	/* background-repeat:					repeat-x; */
	}
body.th1 #DivEnvelopeTop
	{/* th1 is Gray Theme */
	background-color:					var(--clr-bg);
	background-image:					none;
	color: var(--clr-text);
	}
body.th2 #DivEnvelopeTop
	{/* th2 is Gray Theme */
	background-image:					url(/library/images/sbalookandfeel/envelopetop/gradient.gray.png);
	}
body.th3 #DivEnvelopeTop
	{/* th3 is Breast Cancer Awareness Month Pink */
	background-image:					url(/library/images/sbalookandfeel/envelopetop/gradient.pink.png);
	}
body.th4 #DivEnvelopeTop
	{/* th4 is Financial Green */
	background-image:					url(/library/images/sbalookandfeel/envelopetop/gradient.green.png);
	}
body.th5 #DivEnvelopeTop
	{/* th5 is Sheri's Pale Blue */
	background-image:					url(/library/images/sbalookandfeel/envelopetop/gradient.blue.png);
	}
body.th6 #DivEnvelopeTop
	{/* th6 is Text-Only Black and White */
	background-color:					var(--sba-white);
	background-image:					none;
	}
#DivSkipLinks
	{/* Entire DivSkipLinks has to be smaller font, not just links, otherwise space between links will offset it down. */
	position:							absolute;
	top:								-1;		/* Make room for font-size:9px (was 8px when top was 0). */
	left:								-9999px;/* For on-screen, use 248px = 0 + 196 + 2 + 50 fudge factor */
	z-index:							1;		/* Defined before SBALogo, so this puts it on top of SBALogo. */
	font-size:							9px;
	font-weight:						bold;
	letter-spacing:						0.25em;
	white-space:						nowrap;
	}
#DivSkipLinks a,#DivSkipLinks a:link,#DivSkipLinks a:visited
	{
	color:								var(--sba-white);
	text-decoration:					none;	/* To override the default behavior of "a" tag. */
	}
#DivSkipLinks a:focus,#DivSkipLinks a:hover,#DivSkipLinks a:active
	{
	color:								var(--sba-yellow);
	text-decoration:					none;	/* To override the default behavior of "a" tag. */
	}
#DivSBALogo
	{
	position:							absolute;
		top:							0px;
		width:							138px;	/* Determines right, so defined where right would be in canonical order. */
		bottom:							0px;
		left:							0px;
	background-image:					url(/cls/cafs/images/slaf_logo.cfm);
	background-position:				50% 50%;
	background-size: 50%;
	background-repeat:					no-repeat;
	border:								0px;
	cursor:								pointer;
	margin:								0px;
	padding:							0px;
	}
body.dev		#DivSBALogo
	{
		/* Leave here in case we need to target styles for dev again later */
	}
body.test		#DivSBALogo
	{
	background-position:				50% 10%; /* Make room for div.server. */
	}
body.test		#DivSBALogo				div.server
	{
	position:							absolute;
		bottom:							5px;
	display:							block;
	font-size:							smaller;
	font-weight:						bold;
	text-align:							center;
	width:								138px;
	}
body:not(.test)	#DivSBALogo				div.server
	{
	display:							none; /* ... but still visible in View Source. */
	}
body.th6		#DivSBALogo
	{
	background-image:					none;
	font-size:							55px;
	text-align:							center;
	vertical-align:						middle;
	}
body.th6		#DivSBALogo:hover
	{
	color:								var(--clr-card-accent);
	}
body.th6		#DivSBALogo				span:before	/* Chrome 46 doesn't support more proper "::before". */
	{
	content:							"SBA";
	}
body.th6.dev	#DivSBALogo				span:before
	{
	content:							"Dev";
	}
body.th6.test	#DivSBALogo				span:before
	{
	content:							"Test";
	}
#DivAppName
	{/* Positions 2 faint vertical lines to the left and right of DivAppNameText: */
	position:							absolute;
	top:								24px;
	width:								108px;	/* Determines right. */
	height:								40px;	/* Determines bottom. */
	left:								135px;
	border-top:							0px;
	border-right:						2px solid var(--sba-light-blue);
	border-bottom:						0px;
	border-left:						2px solid var(--sba-light-blue);
	margin:								0px;
	padding:							0px;
	color:								var(--clr-card-accent);/* Matches darkest top bar of background.bluesteel.png. */
	/* Was 16px. 11pt is the smallest point size that puts "Electronic Lending" on 2 lines: */
	font-size:							11pt	!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	text-align:							center;
	}
#DivAppNameText
	{
	position:							absolute;
	top:								24px;
	width:								108px;	/* Determines right. */
	height:								auto;	/* Determines bottom. */
	left:								135px;
	margin:								0px;
	border:								0px;
	color:								var(--clr-card-accent);/* Matches darkest top bar of background.bluesteel.png. */
	font-size:							11pt	!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	text-align:							center;
	}
body.th1		#DivAppNameText
	{
	/* color:								var(--sba-white); */
	}
#DivMainNav
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								198px;	/*  0 + 196 + 2 */
	/* margin:								0px; */
	/* border:								0px;
	padding:							0px; */
	overflow:							hidden;
	}
#FrmMainNav
	{/* If MainNav is a frame, DivMainNav contains FrmMainNav. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	/* border:								0px;
	margin:								0px; */
	/* padding:							0px; */
	}
#DivAppInfo
	{
	position:							absolute;
	top:								79px;	/*  0 +  77 + 2 */
	right:								0px;
	height:								24px;	/* Determines bottom. */
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	color:								var(--sba-black);
	line-height:						24px;	/* Middle-aligns text (but only text), because same as AppInfo height. */
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	font-weight:						normal;
	}
#FrmAppInfo
	{/* If AppInfo is a frame, DivAppInfo contains FrmAppInfo. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	}
#DivAppNav
	{
	position:							absolute;
	top:								105px;	/* 79 +  24 + 2 */
	width:								196px;	/* Determines right. */
	bottom:								25px;
	left:								0px;
	overflow:							auto;
	border:								0px;
	margin:								0px;
	padding:							0px;
	/* background-color:					#acf; */
	/* color:								#000; */
	font-size:							9pt		!important;/* Important to override html, body, td, above. */
	}
body.th1 #DivAppNav
	{/* th1 is Home Page Theme */
	/* color:								var(--clr-card-bg);
	background-color:					var(--clr-card-accent); */
	}
body.th2 #DivAppNav
	{/* th2 is OCIO Classic Theme */
	color:								var(--sba-white);
	background-color:					#7086a9;/* Was #059. Is now rgb(112,134,169) = bottommost, darkest pixel of gradient.gray.png. */
	}
body.th3 #DivAppNav
	{/* th3 is Breast Cancer Awareness Month Pink */
	background-color:					#fac;
	}
body.th4 #DivAppNav
	{/* th4 is Financial Green */
	background-color:					#afc;
	}
body.th5 #DivAppNav
	{/* th5 is Sheri's Pale Blue */
	background-color:					#F0F7FF;
	}
body.th6 #DivAppNav
	{/* th5 is Sheri's Pale Blue */
	background-color:					#fff;
	}
#DivAppNav.NoAppNavContents
	{
	display:							none;
	top:								0px;
	width:								0px;	/* Determines right. */
	bottom:								0px;
	left:								0px;
	overflow:							hidden;
	}
#DivSliderControl
	{/* Strict-Mode-Only feature. Doesn't exist in sbalookandfeel.quirks.css. */
	position:							absolute;
	top:								105px;	/* 79 +  24 + 2 */
	width:								5px;
	bottom:								25px;
	left:								195px; /* Centered at 197 (between AppNav and AppData), and width is 5, so 197 - 2 */
	border:								0px;
	margin:								0px;
	padding:							0px;
	cursor:								e-resize;
	z-index:							3;
	}
#FrmAppNav
	{/* If AppInfo is a frame, DivAppInfo contains FrmAppInfo. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							auto;
	}
#DivAppData
	{
	position:							absolute;
	top:								105px;	/* 79 +  24 + 2 */
	right:								0px;
	bottom:								25px;
	left:								198px;	/*  0 + 196 + 2 */
	border-top:							1px solid black;
	border-bottom:						1px dashed gray;
	border-left:						1px solid black;
	margin:								0px;
	padding:							0px;
	background-color:					var(--sba-white);	/* Normally not needed, but AppData has maximize/minimize. */
	z-index:							9;		/* Same reason. AppData would otherwise not maximize over BotMost. */
	overflow:							auto;
	}
#DivAppData.NoAppNavContents
	{
	right:								0px;
	left:								0px;
	border-left:						0px;
	}
#FrmAppData
	{/* If AppData is a frame, DivAppData contains FrmAppData. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							auto;
	}
#DivBotMost
	{
	position:							absolute;
	height:								24px;	/* Determines top. */
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	font-size:							8pt;
	line-height:						8pt;
	}

/*
Try to fix 2-finger scrolling on Mobile Safari by adding to DivMainNav, DivAppInfo, DivAppNav, DivAppData classes. 
Because of overflow:auto, we want to do that **ONLY** for Mobile Safari. There isn't any CSS query for userAgent, 
so we use JavaScript in SLAF's $(document).ready() routine, top.SlafDoThisOnLoad(). 
*/

.allowScrollingOnMobileSafari
	{
	-webkit-overflow-scrolling:			touch	!important;
	overflow:							auto	!important;
	}

/* BotMost contents, begins. */

#botmostgovlinks
	{
	list-style-type:					none;
	margin:								0px;
	text-align:							center;
	}
#botmostgovlinks li
	{
	display:							inline;
	}
#botmostgovlinks li a
	{
	text-decoration:					none;
	}
#botmostgovlinks li
	{
	margin:								5px;
	}
#botmostgovlinks a:link, #botmostgovlinks a:visited, #botmostgovlinks a:active
	{
	color:								var(--clr-link);
	}
#botmostsitelinks
	{
	list-style-type:					square;
	margin:								0px;
	text-align:							center;
	}
#botmostsitelinks li
	{
	display:							inline;
	}
#botmostsitelinks li a
	{
	text-decoration:					none;
	}
#botmostsitelinks li
	{
	margin:								2px;
	}
#botmostsitelinks a:link, #botmostsitelinks a:visited, #botmostsitelinks a:active
	{
	color:								var(--sba-black);
	}
#DivLastModified
	{
	position:							absolute;
	top:								0px;
	left:								0px;
	width:								100%;
	text-align:							right;
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	line-height:						8pt;
	}
#SpanLastModifiedL
	{
	position:							absolute;
	top:								0px;
	left:								0px;
	text-align:							left;
	}
#SpanLastModifiedR
	{
	text-align:							right;
	}
#AppTimeout
	{
	color:								#000;
	font-weight:						normal;
	}
#AppTimeout.AppTimeoutDangerZone		/* In Strict Mode, #id.class doesn't necessarily override #id, so use important. */
	{
	color:								var(--sba-red)	!important;	/* #900 is brick red. */
	font-weight:						500		!important;	/* 700 (= "bold") is too heavy for a serif font. */
	}

/* BotMost contents, ends. */

#DivAppHidden
	{/* Only invisible region. Define for displayability, so that we can see it by overriding display property with JS: */
	display:							none;	/* Most important aspect of THIS class, so put it first! */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	overflow:							auto;
	}

/* ************************************************************************************************** */

/*
Define print styles in case the user doesn't use our (better) Print function (MainNav button or SBA Look-and-Feel Menu
item). The Print function is better because it prints embedded URLs, which make for easier debugging when there's a problem.
But more importantly, if AppData is a frame, the Print function doesn't truncate its contents.

Since they have the same specificity as the styles above, we have to mark everything "!important" or else the override
might not happen in some browsers.
*/

@media print
	{
	#DivWindow,#DivEnvelope
		{
		height:							auto	!important;
		width:							100%	!important;
		border:							0px		!important;
		position:						static	!important;
		overflow:						visible	!important;
		}
	#DivMarginT,#DivMarginR,#DivMarginB,#DivMarginL,#DivSBALogo,#DivMainNav,#DivAppName,#DivAppNav,#DivBotMost
		{display:						none	!important;}
	#DivAppInfo
		{
		top:							0px		!important;
		left:							0px		!important;
		width:							100%	!important;
		overflow:						visible	!important;
		}
	#FrmAppInfo
		{
		top:							0px		!important;
		left:							0px		!important;
		width:							100%	!important;
		}
	#DivAppData
		{
		top:							24px	!important;
		left:							0px		!important;
		height:							auto	!important;
		width:							100%	!important;
		position:						static	!important;
		overflow:						visible	!important;
		}
	#FrmAppData
		{
		top:							24px	!important;
		left:							0px		!important;
		height:							auto	!important;
		width:							100%	!important;
		position:						static	!important;
		overflow:						visible	!important;
		}
	}

	#DivEnvelopeTop .buttonbar .icon
	,#FrmEnvelopeTop .buttonbar .icon {
		color: var(--clr-card-accent);
	}

	#DivAppInfo, #FrmAppInfo {
		/* box-shadow: var(--sba-shadow); */
	}

	button,
	.button,
	.close-modal,
	.mainnavsubmit,
	[type="button"],
	[type="reset"],
	[type="submit"]{
	  text-decoration: none;
	  cursor: pointer;
	  --clr-text: var(--sba-white);
	  border: 0 none;
	  color: var(--clr-text);
	
	  background-color: var(--clr-link);
	
	  font-size: 1rem;
	  font-weight: 700;
	  padding: .9rem 4rem;
	  --clr-shadow: var(--clr-link);
	  box-shadow: var(--sba-shadow);
	}
	
	button:hover,
	.button:hover,
	.close-modal:hover,
	.mainnavsubmit:hover,
	[type="reset"]:hover,
	[type="button"]:hover,
	[type="submit"]:hover,
	button:focus,
	.button:focus,
	.close-modal:focus,
	.mainnavsubmit:focus,
	[type="reset"]:focus,
	[type="button"]:focus,
	[type="submit"]:focus{
		filter: brightness(130%);
		/* border: 1px solid var(--clr-accent); */
	}
	
	button:active,
	.button:active,
	.close-modal:active,
	.mainnavsubmit:active,
	[type="button"]:active,
	[type="reset"]:active,
	[type="submit"]:active {
		filter: brightness(60%);
	}

	button:disabled,
	.button:disabled,
	.close-modal:disabled,
	.mainnavsubmit:disabled,
	input:disabled,
	input:disabled:hover,
	form:invalid [type=submit] {
	  cursor: default;
	
	  --clr-text: var(--sba-black);
	  background-color: var(--clr-dis);
	  filter: brightness(100%);
	}
	

.cta,
.close-modal,
#LogOutBtn,
[type="submit"],
[title=submit] {
	--clr-link: var(--clr-accent) !important;
}

.manddata input
	{
		border: 2px solid var(--clr-card-accent);
	}