/********************************************************************/
/* THIS CSS FILE DEFINES ITEMS USED THROUGHT THE ACCESSVA USER      */
/* INTERFACE (not just widgets or our light weight modal which have */
/* separate css files).                                             */
/*                                                                  */
/* THIS FILE NEEDS SOME CLEAN UP AND REORGANIZING.                  */
/* SOME STYLES COULD BE BETTER NAMED. DO THIS CAREFULLY AND OVER    */
/* A LONG TIME BECUASE IT EASY EASY TO BREAK A LOT OF BEHAVIOR      */
/* WITH A SMALL THING HERE.                                         */
/********************************************************************/


/*******************************************/
/* HIGH LEVEL, ALL-AFFECTING STYLES        */
/*******************************************/

:root {
	--bs-modal-padding: 1rem;
	--bs-modal-footer-gap: 0.5rem;
	--bs-modal-header-padding: 1rem 1rem;
	--bs-modal-header-padding-x: 2rem;
	--bs-modal-header-padding-y: 2rem;		
	--bs-modal-header-border-width: 1px;
	--bs-modal-header-border-color: #dee2e6;
	--bs-modal-inner-border-radius:	calc(0.3rem - 1px);
	--bs-modal-footer-border-width: 1px;
	--bs-modal-footer-border-color: #dee2e6;	
}

@
-moz-document url-prefix () {fieldset {
	display: table-cell;
}

}
html {
	height: 100%;
}

.table>tbody>tr>th,.table>tbody>tr>td {
	border-top: none;
}

/*******************************************/
/* END OF HIGH LEVEL, ALL-AFFECTING STYLES */
/*******************************************/


/************************************/
/* SPECIAL TEST PAGE ITEMS          */
/************************************/

.test-page-contentPagewell {
	color: #000;
	background-color: #fff;
	padding: 15px;
}

.test-page-major-heading {
	color: black;
	font: 20px Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.test-page-minor-heading-white {
	color: white;
	font: 14px Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.test-page-minor-heading-black {
	color: black;
	font: 14px Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/* for use anywhere position something ON TOP in the upper left */
.debug-top-left-on-top {
	z-index:999; 
	position: fixed;
	top: 0;
	left: 0;
}

/**************************************/
/* END OF SPECIAL TEST PAGE ITEMS     */
/**************************************/


/************************************/
/* SPECIAL 508 COMPLIANCE ITEMS     */
/************************************/

/*button:focus { border: 1px solid red !important; }/*debug*/

/*:focus { border: 1px solid red !important; }/*debug*/

#skiptocontent a {
	padding:6px;
	position: absolute;
	top:-40px;
	left:0px;
	color:black;
	border-right: 3px solid white;
	border-bottom: 3px solid white;
	border-bottom-right-radius:8px;
	background:transparent;
	-webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}

#skiptocontent a:focus {
	position:absolute;
	left:0px;
	top:0px;
	background:white;
	outline:0;	
	-webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}

#home-link{
	margin-left: 14px;	
}

a.visually-hidden:focus {
	position: relative;
	top: 5px;
	padding:4px;
	color: #4C91CD;
	box-shadow: 0 0 2px #4C91CD !important;
}

.simulate-table-striped-table-bordered-header {
	background-color: #006DCC !important;
	color: #ffffff !important;
}

.registration-panel-heading-508 {
	background-color: #00467f !important;
	color: #ffffff !important;
	font-weight: bold !important;
}

.generic-hidden-heading { /* from http://www.standards-schmandards.com/2004/the-aural-text-class/ */
	/*
		These do not work for screen readers according to http://webaim.org/techniques/css/invisiblecontent/
		visibility: hidden;
		display: none;
	*/
	position: absolute;
	font-size: 0;
	left: -1000px;
}

/**************************************/
/* END SPECIAL 508 COMPLIANCE ITEMS   */
/**************************************/


/************************************/
/* STYLE GUIDE GLOBAL STYLES        */
/* (important on everything to be   */
/* sure there are no unintentional  */
/* overrides)                       */
/************************************/

.style-guide-instruction-header-text {
	/* font: 16px Arial, Helvetica, sans-serif; this way has a different effect on line height...why??? */
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: black !important;
}

.style-guide-body-text-heading {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: black !important;
}

.style-guide-csp-update-text {
	/* font: 16px Arial, Helvetica, sans-serif; this way has a different effect on line height...why??? */
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-style: italic;
	color: black !important;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 7px;
}

.style-guide-body-text-heading-red {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: red !important;
}

.style-guide-instruction-text-alt-style {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: #4d4d4d !important;
}

.style-guide-instruction-text-alt-style-bottom-border-div {
	padding: 8px 0 0 0;
	border-bottom: 2px solid #4d4d4d;
}

.style-guide-instruction-text-alt-style-bottom-border-negative-bottom-margin {
	margin: 0 0 -2px 0;
}

.style-guide-additional-instruction-text {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: normal !important;
	color: black !important;
}

.style-guide-body-text {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: normal !important;
	color: black !important;
}

.style-guide-body-text-small {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: black !important;
}

.style-guide-body-text-small-red {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: red !important;
}

.style-guide-body-text-small-white { /* not in the style guide but will code it like it is to be analagous*/
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: white !important;
}

.style-guide-body-text-smaller-white { /* not in the style guide but will code it like it is to be analagous*/
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;
	color: white !important;
}

.style-guide-body-text-smallest-white { /* not in the style guide but will code it like it is to be analagous*/
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 10px !important;
	font-weight: normal !important;
	color: white !important;
}

.style-guide-information-page-header-font-large { /* for top level about page headings (H2 usually) */
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 30px !important;
	font-weight: bold !important;
	color: #00467f !important; /* IAM Blue */
}

.style-guide-information-page-header-font-small { /* for second level about page headings (H3 usually) */
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 24px !important;
	font-weight: bold !important;
	color: #00467f !important; /* IAM Blue */
}

.style-guide-hyperlink-color {
	color: #0000ee !important;
}

/*
 * This is the style for the sign-in partners square buttons.
 * 
 * The dashed outline Firefox puts on buttons once they are active
 * is horrible. But we will leave them for now in case it 
 * matters for accessibility. If they ever want it gone here is 
 * a good search: html button active outline
 * And here is a good thread discussing it: http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
 */
.style-guide-about-page-button {
	white-space: normal;
	background-color: #e9f0ff;
	border-radius: 0px !important;
	margin: 0;
	padding: 0;
	border: 1px solid #0a92da;
	width: 132px !important; /* taking no chances, we want the blue box this wide */
	max-width: 132px !important;
	min-width: 132px !important;
	height: 108px !important; /* taking no chances, we want the blue box this high */
	max-height: 108px !important;
	min-height: 108px !important;
}

.style-guide-about-page-button:hover { 
	background-color: #e1e8ff;
	border:1px solid rgb(10, 146, 218);
}

.style-guide-about-page-button:focus { 
	background-color: #e9f0ff;
	border:1px solid rgb(10, 146, 218);
	box-shadow: 0 0 0 3px rgba(191, 222, 255, 1);
	/*background-color: pink;/*debug*/
}

.style-guide-about-page-button-text {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: #00467f !important;
}

/*
 * This is the style for the CSP button on many widget variations.
 * 
 * The dashed outline Firefox puts on buttons once they are active
 * is horrible. But we will leave them for now in case it 
 * matters for accessibility. If they ever want it gone here is 
 * a good search: html button active outline
 * And here is a good thread discussing it: http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
 */
.style-guide-csp-button {
	font-family: Arial, Helvetica, sans-serif !important; /* defining font here too */
	font-size: 14px !important;
	font-weight: bold !important;
	color: black !important;
	background-color: #e9f0ff;
	border-radius: 0px !important;
	margin: 0;
	padding: 0;
	width: 100%;
	border: 1px solid #0a92da;
}

.style-guide-csp-button:hover { 
	background-color: #e1e8ff;
	border:1px solid rgb(10, 146, 218);
	/*background-color: pink;/*debug*/
}

.style-guide-csp-button:focus { 
	background-color: #e9f0ff;
	border:1px solid rgb(10, 146, 218);
	box-shadow: 0 0 0 3px rgba(191, 222, 255, 1);
	/*background-color: pink;/*debug*/
}

/* where the button text really is */
.style-guide-csp-button-text-and-divider {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: bold !important;
	color: black !important;
	float: right;
	text-align: center;
	margin: 5px 0 0 1px;
	width: 64%; /* this width plus the one on widget-button-logo-div control where the dividing line is */
	height: 55px; /* column must have a fixed height or else the fully centering table divs trick will not work vertically */
	padding: 0px;
	/*border: 1px solid red;/*debug*/
    border-left: 1px solid #a1a1a1 !important;
}

.style-guide-error-button {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 18px !important;
	font-weight: bold !important;
	color: white !important;
	background-color: #b84743 !important;
	/*background-color: blue !important;/*debug*/
	border: 1px solid #d43f3a !important;
	border-radius: 0px !important;
}

.style-guide-error-button:hover {
	background-color: #b03f3b !important;
	border: 1px solid #ac2925 !important;
}

.style-guide-action-button {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: white !important;
	background-color: #1677bd !important;
	border: 1px solid #1677bd !important;
	border-radius: 0px !important;
	line-height: normal !important; /* without this the button is taller than it needs to and used to be */
}

.style-guide-action-button:hover {
	background-color: #00467f !important;
	border: 1px solid #00467f !important;
}

.style-guide-action-button:active {
	background-color: #007bb6 !important;
	border: 1px solid #285e8e !important;
}

.style-guide-option-button {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: #333333 !important;
	background-color: #FFFFFF !important;
	border: 1px solid #7F7F7F !important;
	border-radius: 0px !important;
	line-height: normal !important; /* without this the button is taller than it needs to and used to be */
}

.style-guide-option-button:hover {
	background-color: #F8F8F8 !important;
	border: 1px solid #ADADAD !important;
}

.style-guide-option-button:active {
	background-color: #F8F8F8 !important;
	border: 1px solid #ADADAD !important;
}

.style-guide-logout-button {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: black !important;
	background-color: #FEFEFE !important;
	border: 1px solid #ADADAD !important;
	border-radius: 0px !important;
	line-height: normal !important; /* without this the button is taller than it needs to and used to be */
	margin: 2px 0 2px 0; /* spring 2016 Andrew Allen as part of the style guide changes said to add 2 px margin above and below this button */
	/* this had the side effect of putting the welcome banner height back at 34 px as it was before the button change */
}

.style-guide-logout-button:hover {
	background-color: #F8F8F8 !important;
	border: 1px solid #ADADAD !important;
}

.style-guide-logout-button:active {
	background-color: #FFFFFF !important;
	border: 1px solid #ADADAD !important;
}

.style-guide-collapsible-infoxbox-outline { /* border color used for outer line and line under header */
	border-color: black !important;
}

.style-guide-collapsible-infoxbox-outline-border-radius-only .panel {
	border-radius: 0 !important;
}

.style-guide-collapsible-infoxbox-header-font {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: normal !important;
	color: black !important;
}

.style-guide-collapsible-infoxbox-header-interior {
	background-color: #f5f5f5 !important;
}

.style-guide-collapsible-infoxbox-expansion-interior {
	background-color: white !important;
}

.style-guide-collapsible-infoxbox-expansion-font {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;
	color: black !important;
}

.style-guide-notification-success-panel {
	background-color: #dff0d8 !important;
	border-color: #d6e9c6 !important;
}

.style-guide-notification-success-font {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: #3c763d !important;
}

.style-guide-notification-error-panel {
	background-color: #f2dede !important;
	border-color: #ebccd1 !important;
}

.style-guide-notification-error-font {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: #a94442 !important;
}

.style-guide-list-navigation-side-panel-font ul li a {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal; /* cannot be important or else the active/text shadow item next will not work */
	color: white !important;
}

.style-guide-list-navigation-side-panel-font ul li a.active {
	font-weight: bold;
	text-shadow: 0 0 5px rgba(255, 255, 255, .5) !important;
}

.style-guide-list-navigation-side-panel-background {
	background-color: #05263f !important;
}

.style-guide-esig-pop-up-box-banner {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: white !important;
	background-color: #1677bd !important;
	height: 41px; /* fix size of heading so we can make panel body take up the rest of the vertical space */

}

.style-guide-esig-pop-up-box-banner-error { /* not in the style guide but will code it like it is to be analagous*/
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: #a94442 !important;
	background-color: #f2dede !important;
	height: 41px; /* fix size of heading so we can make panel body take up the rest of the vertical space */

}

.style-guide-esig-pop-up-box-body-interior-background {
	background-color: white !important;
}

.style-guide-footer-hyperlink { /* not in the style guide but will code it like it is to be analagous*/
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	color: #bdd5ec !important;
}

.style-guide-footer-hyperlink:hover {
	text-decoration: underline;
}

.font-12 {
	font-size: 12px;
}

.p-csp-enabled-websites {
	margin-left: 2px; 
	margin-bottom: 5px;	
}

@media only screen and (max-width: 300px) {
	.style-guide-csp-button {
		font-size: 10px !important;
		/*background-color: red;/*debug*/
	}
}

/************************************/
/* END OF STYLE GUIDE GLOBAL STYLES */
/************************************/


/* begin special styles for work item 322279 <--LEAVING THESE HERE COMMENTED OUT AS AN EXAMPLE FOR FUTURE "yellow" NOTIFICATION BOXES
.work-item-322279-box-style {
	margin: 0 6% 0 6% !important;
	padding: 10px 12px 10px 12px !important;
}
.work-item-322279-paragraph-style {
	margin: 0 !important;
}
.work-item-322279-box-like-sharepoint-yellow-banner {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: normal !important;
	color: black !important;
	background-color: #fff8b3 !important;
	border: 1px solid #caac09 !important;
}
/* end special styles for work item 322279 */

.tiny-timestamp-div {
	/* nothing so far */
}

.tiny-timestamp-paragraph {
	font: 9px Arial, Helvetica, sans-serif;
}

.cspselect-select-another-app-button {
	height: 46px; /* i5 measurements Button_OldAppId 153 x 52, Button_Wireframe 118 x 35, Button_NewPage 153 x 52, Button_RSD_Figure_2 138 x 41 */
	width: 148px; /* so in i5 they were squeezed a little as a compromise from 153 x 52 to 148 x 46 */
	padding: 0px !important; /* no padding needed because the text is centered which is thrown off by left padding only that it had */
}

/* bootstrap override */
.esig-panel-heading {
	border-radius:0px;
	border-width: 0px !important; /* turns off the border around the panel */
}

.modal-button-fixed-size {
	width: 83px !important; /* taking no chances, they want the button this wide */
	max-width: 83px !important;
	min-width: 83px !important;
	height: 34px !important; /* taking no chances, they want the button this tall */
	max-height: 34px !important;
	min-height: 34px !important;
	margin-right:10px !important; /* space between like widget modals */
}

h2 {
	color: #00467f;
	font-weight: bold;
}

h3 {
	color: #00467f;
	font-size: 14px;
	font-weight: bold;
}

.template-footer-align {
	text-align: center;
}

.template-footer-row2 {
	margin-top: 5px;
}

ul.template-link-list { /* template-link-list stuff based on vets.gov bottom links */
	text-align: center;
	padding: 0;
	width: 100%;
	border-bottom: none !important;
	display: block;
	margin: 5px 0 0 0;
	/*background-color: white !important;/*debug*/
	/*border: 1px solid pink !important;/*debug*/
}

.template-footer-row1 ul.template-link-list a {
	display: inline-block;
	padding: 0;
	/*background-color: blue !important;/*debug*/
}

.template-footer-row1 ul.template-link-list li {
	padding: 0;
	margin: 0;
	display: inline-block;
	text-align: center;
	/*background-color: white !important;/*debug*/
	/*border: 1px solid yellow !important;/*debug*/
}

.template-footer-row1 ul.template-link-list:after { /* content after the whole ul tag */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.template-footer-row1 ul.template-link-list li:after {
	margin: 0 20px 0 20px;
	content: "|";
	padding: 0 .15em;
	/*border: 1px solid red !important;/*debug*/
}

.template-footer-row1 ul.template-link-list li:last-of-type:after {
	margin: 0;
	padding: 0;
	content: "";
}

@media (max-width: 350px) {
	.template-footer-row1 ul.template-link-list li:after {
		margin: 0 8px 0 8px;
		/*border: 1px solid red !important;/*debug*/
	}
}

p.small-print {
	text-transform: uppercase;
}

body {
	background: #05263f;
	height: 100%;
	color: #010c29;
	margin: 0;
	padding: 0;
}

.container {
	padding: 0;
	overflow: hidden;
	/* this overflow setting really seems to "hide" the horizontal scroll bar when window is narrow, but should we use it now? it may break other things (it is used on every page) */
}

.m-15 {
	margin: 15px;
}

.m-2pct {
	margin: 2%;	
}

.breadcrumb {
	background-color: #00467f;
	margin-top: -20px;
	padding: 0.75rem 1rem;
	/*border: 2px solid green;/*debug*/
}

.breadcrumb li {
	font-size: 14px;
    /*border: 1px solid white;/*debug*/
	margin-right: 4px;
	color: white;
}

.breadcrumb a {
	color: white;
}

.breadcrumb a:hover {
	color: white;
    /*border: 1px solid blue;/*debug*/
}

.breadcrumb>.active {
	color: white;
}

.breadcrumb>li+li:before {
	color: rgba(204, 204, 204, 1);
	content: "|\00a0";
}

@media (max-width: 370px) {
	/* trying to never wrap the now small breadcrumb even at small sizes */
	.breadcrumb { 
		/*background-color: black !important; /*debug*/
		padding-left: 6px;
		padding-right: 6px;
	}
	.breadcrumb>li+li:before {
		color: rgba(204, 204, 204, 1);
		content: "|";
	}
	.breadcrumb li {
		font-size: 13px;
		margin-right: -2px;
	}
}

@media (max-width: 300px) {
	/* even crazy small */
	.breadcrumb { 
		padding-left: 1px;
		padding-right: 1px;
	}
	.breadcrumb li {
		font-size: 11px;
		margin-right: -5px;
	}
	.width_90_percent {
		width: 80%;
	}
}

thead th {
	background-color: #006DCC !important;
	color: white;
}


/************************************/
/* 3POB PAGES ITEMS                 */
/************************************/

.third-party-onboarding-extra-large-page-title {
	font-size: 36px !important; /* override style-guide-body-text-heading */
}

.third-party-onboarding-related-links { /* used to use bg-info from bootstrap now set this color ourselves */
	background-color: #d9edf7;
}

.third-party-onboarding-success-Pagewell {
	background-color: #f8f8f8 !important; /* standard widget silver background color */
	min-height: 0 !important; /* do not need a min-height */
}

.third-party-onboarding-failure-Pagewell {
	background-color: #f8f8f8 !important; /* standard widget silver background color */
	min-height: 0 !important; /* do not need a min-height */
}

.third-party-onboarding-registration-form-Pagewell {
	background-color: #f8f8f8 !important; /* standard widget silver background color */
	min-height: 0 !important; /* do not need a min-height */
}

.registration-being-processed-popup {
	text-align: center;
}

.third-party-onboarding-input-font {
	color: #a20000;
	position:absolute;
}

.ms-14 {
	margin-left: 14px;	
}

.me-1 {
	margin-right: 1px;
}

.me-10 {
	margin-right: 10px;	
}

.modal-header-accessva {
	align-items: flex-start;
}

.btn-close-x {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding-left: 15px;
	padding-right: 0px;
    color: #000;
    border: 0;
    border-radius: 0.375rem;
    opacity: .5;
}

.btn-close-accessva{
	background: transparent;
	align-items: flex-start;
    display: flex;
    flex-direction: row-reverse;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

/* remove after bootstrap 5.2.3 */

a.sr-only:focus {
	position: relative;
	top: 5px;
	padding:4px;
	color: #4C91CD;
	box-shadow: 0 0 2px #4C91CD !important;
}

.ml-14 {
	margin-left: 14px;	
}

.mr-1 {
	margin-right: 1px;
}

.mr-10 {
	margin-right: 10px;	
}

/* remove after bootstrap 5.2.3 */

@media (max-width: 450px) {
	.registration-failure-button {
		padding: 10px;
		font-size: 11px;
		/*background-color: blue !important;/*debug*/
	}
}

@media (max-width: 315px) {
	.registration-failure-button {
		margin-bottom: 5px;
		margin-right: 5px;
		padding: 8px;
        white-space: normal; /* wraps button text */
	}
	.registration-failure-button-force-pull-left {
		float: left !important;
	}
}


/************************************/
/* CSP SELECT ITEMS (move more here)*/
/************************************/

/* important is being difficult in IE, so just defining our own class */
/* this holds the blue widget buttons and makes them resize properly */
.cspselect-button-responsive-column {
	display: block;
	float:left;
/*	margin: 6px 0px 0px 4px; /* 6px top for spacing between rows, 4px left, right is determined by width % next */
	margin: 4px 8px 4px 0px; /* 6px top for spacing between rows, 4px left, right is determined by width % next */
	width: 32.45%;          /* right number to allow for the left and right margins IF THIS IS TOO LARGE THE MOBILE STACKED SCREEN BELOW WILL NOT WORK RIGHT */
		/* NOTE: if "Display intranet sites in Compatibility View" is checked in Internet Explorer then resizing will not work and many things will be messed up such as unrounded buttons */
		/*       to fix this the user needs to select "Compatibility View Settings" from the Tools menu and uncheck that item */
	/*background-color: #e9f0ff;/* this has no effect so commenting it out...delete later */
	/*overflow: hidden; /* removed for 508 1/30/2016 */
	/* min-height: 120px; */
	padding: 0px; /* button fills this div */
	/* height: 155px; /* height of a widget row */
	/*min-width: 160px;*/
	/* padding: 13px 0 3px 0; */
	/*border:3px solid black;/*debug*/
}

@media only screen and (max-width: 992px) {
	.cspselect-button-responsive-column {
		width: 48.55%;            /* need a little spare space here too to make it work */
		/*background-color: pink;/*debug*/
		/*border:3px solid green;/*debug*/
	}
}

/*  need our own width handler, 590px keeps wide logos from touching the buttons */
@media only screen and (max-width: 590px) {
	.cspselect-button-responsive-column {
		margin: 2px 0px 2px 0px; /* leave a sliver of white on each side of the blue rows, why does zero work? padding in the container */
		width: 100%;            /* need a little spare space here too to make it work */
		/*background-color: pink;/*debug*/
		/*border:3px solid red;/*debug*/
	}
}

/*  button too crowded when really narrow width, so try to save some space */
@media only screen and (max-width: 300px) {
	.cspselect-csp-logo-wide {
		width: 60px !important;
	}
	.cspselect-button-logo-div-text {
		font-size: 10px;
		/*border: 1px solid red;/*debug*/
	}
}

.cspselect-button-logo-div-text {
	margin-top: 10px;
	font-weight: bold !important;
	color: #00467f !important;
}

/* where the logo is */
.cspselect-button-logo-div {
	float:left;
	text-align: center;
	height: 66px; /* column must have a fixed height or else the fully centering table divs trick will not work vertically */
	padding: 7px 0 8px 0; /* this controls how high or low the logo is */
	width:35%; /* this width plus the one on style-guide-csp-button-text-and-divider control where the dividing line is */
	/*border: 1px solid red;/*debug*/
}

.cspselect-csp-logo-tall {
	height: 48px;
	margin: 0;
}

.cspselect-csp-logo-wide {
	width: 95px;
	margin: 2px 0 0 0; /* top here moves the wide ones down a bit to compensate for their lack of height */
}


/**************************************/
/* ABOUT PAGE ITEMS                   */
/**************************************/

.sidebarlogo {
	background-color: #fff;
	border-radius: 5px;
	display: block;
	margin: 30px auto;
	padding: 15px;
	width: 180px;
}

.sidebarMenu {
	padding-left: 24px; /* this is internal to its div, was 28px */
	padding-right: 4px; /* this is internal to its div, was 28px */
	/*border: 1px solid red;/*debug*/
	/*background-color: pink;/*debug*/
}

.sidebarMenu ul {
	display: block;
	list-style-image: url('../images/sidebarBulletArrow.png');
	padding: 0;
	margin: 8px 0px 8px 0px; /* top and bottom 8px to keep the list items from being too close to things above and below it */
    /*border: 1px solid red;/*debug*/
}

.sidebarMenu ul ul {
	margin-bottom: 0;
}

.sidebarMenu ul li {
	padding: 0 0 10px 0;/* this is space AROUND the actual text used to space list items relative to each other, was left=10px */
    /*border: 1px solid red;/*debug*/
}

.sidebarMenu ul li:last-child {
	padding-bottom: 0;
}

.sidebarMenu ul li a {
	text-decoration: none;
}

.sidebarMenu ul li a:hover {
	text-decoration: underline;
}

.about-container {
	/*overflow: hidden; /* tried this to make the horizontal scroll bar not happen as much but it did not help */
}

/* these next two columns are for finer control of the left nav width vs the right content area */
/* these settings kick in when the window is below the 992px width breakpoint */
.about-left-nav-col {
	/*background-color: black; /* debug pink red lightblue */
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

.about-right-content-col {
	/*background-color: red; /* debug pink red lightblue */
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

.about-right-content-col p, li {
	margin-right: 14px;
}

.application-about-back-button {
	margin: 0;
	padding: 7px 11px 7px 11px; /* this establishes how much space is INSIDE the button around the text of the button */
}

.faq-credentials-table-checkmark-cell {
	text-align: center;
}

.faq-credentials-table-verticalText {
	/*color: red;/*debug*/
	text-align: center;
}

.faq-credentials-table-heading-left-column {
	background-color: #006DCC;
}

@media (min-width: 1200px) {
	/* these apply only above all "break points" for a large window above 1200*/
	.about-left-nav-col {
		/*background-color: lightblue; /* debug pink red lightblue */
		float: left;
		width: 22%;
		padding-right: 0;
	}
	.about-right-content-col {
		float: left;
		width: 78%;
		padding-left: 0;
		padding-right: 0;
	}
	.faq-credentials-table {
		/* NO. IT MAKES HEADINGS GET CUT OFF like AHOBPR table-layout: fixed;*/
	}
	.faq-credentials-table-heading-left-column {
		width: 160px;
		min-width: 160px;
		/*background-color: lightblue; /* debug pink red lightblue */
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	/* these apply only between 992px but under 1200px (need a little more left nav width to avoid text wrapping) */
	.about-left-nav-col {
		/*background-color: blue; /* debug pink red lightblue */
		float: left;
		width: 26%;
		padding-right: 0;
	}
	.about-right-content-col {
		float: left;
		width: 74%;
		padding-left: 0;
		padding-right: 0;
	}
	.faq-credentials-table {
		/* NO. IT MAKES HEADINGS GET CUT OFF like AHOBPR table-layout: fixed;*/
		/*background-color: yellow; /* debug pink red lightblue */
	}
	.faq-credentials-table.table>thead>tr>th {
		padding-left: 4px;
	}
	.faq-credentials-table-heading-left-column {
		width: 148px;
		min-width: 148px;
		/*background-color: pink; /* debug pink red lightblue */
	}
	.faq-credentials-table-verticalText {
		/*color: red;/*debug*/
		font-size: 11px !important;
	}
}

@media (max-width: 680px) { /* go vertical well before the 480 breakpoint */
	.faq-credentials-table-heading-left-column {
		/*background-color: green; /* debug pink red lightblue */
	}
	.faq-credentials-table-verticalText {
		text-align:left;
		transform-origin: 10px 7px;
		transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg); /* webkit-transform is what does it for chrome */
		-webkit-transform-origin: 10px 7px;
		-ms-transform: rotate(-90deg); /* IE 9 */
		-ms-transform-origin: 10px 7px; /* IE 9 */
		margin: 0;
		padding: 0;
	}
	.faq-credentials-table.table>thead>tr {
		height: 70px;
	}
	.faq-credentials-table.table>thead>tr>th {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.faq-credentials-table img {
		width: 18px;
		height: 18px;
		/*border: 1px solid red;/*debug*/
	}
	.faq-credentials-table.table>tbody>tr>td {
		margin: 0;
		padding: 3px;
	}
	.faq-credentials-table {
		/*width: 260px;*/
		/*background-color: pink; /* debug pink red lightblue */
	}
	.faq-credentials-table-heading {
		/*margin: 0;/*???*/
		/*padding: 0;/*???*/
		width: 8px;
		min-width: 8px;
		max-width: 8px;
		text-align: center;
	}
}

@media (max-width: 400px) { /* go vertical well before the 480 breakpoint */
	.faq-credentials-table-left-label {
		font-size: 12px !important;
		font-weight: bold !important;
		width: 50px !important;
		max-width: 50px !important;
	}
	.faq-credentials-table-heading-left-column {
		/*background-color: red; /* debug pink red lightblue */
	}
	.faq-credentials-table-verticalText {
		font-size: 9px !important;
		text-align: center !important;
		transform-origin: 10px 7px;
		transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg); /* webkit-transform is what does it for chrome */
		-webkit-transform-origin: 10px 7px;
		-ms-transform: rotate(-90deg); /* IE 9 */
		-ms-transform-origin: 10px 7px; /* IE 9 */
		margin: 0 0 10px 10%;/* trick to make the heading label appear close to centered over the checkmark which is centered */
		padding: 0;
	}
	.faq-credentials-table.table>thead>tr {
		height: 70px;
	}
	.faq-credentials-table.table>thead>tr>th {
		margin: 0;
		padding: 0;
	}
	.faq-credentials-table img {
		width:12px;
		height: 12px;
		/*border: 1px solid red;/*debug*/
	}
	.faq-credentials-table.table>tbody>tr>td {
		margin: 0;
		padding: 0;
	}
	.faq-credentials-table {
		/* width: 100%;*/
		/*background-color: red; /* debug pink red lightblue */
	}
	.faq-credentials-table-heading {
		/*margin: 0;/*???*/
		/*padding: 0;/*???*/
		width: 8px;
		min-width: 8px;
		max-width: 8px;
		text-align: center;
		font-size:75%;
	}

	.faq-credentials-table-auto>thead>tr>th,
	.faq-credentials-table-auto>tbody>tr>th {
		padding-left: 1px;
		padding-right: 1px;
		padding-top: 4px;
		padding-bottom: 3px;
	}
	
}

@media (max-width: 340px) { /* go vertical well before the 480 breakpoint */
	.faq-credentials-table-verticalText {
		margin: 0 0 10px 5%;/* trick to make the heading label appear close to centered over the checkmark which is centered */
	}
}

@media (max-width: 310px) { /* go vertical well before the 480 breakpoint */
	.faq-credentials-table-verticalText {
		margin: 0 0 10px -1px;/* trick to make the heading label appear close to centered over the checkmark which is centered */
	}
}

.faq-credentials-table-auto {
	max-width: 680px !important;
}

.content {
	margin-top: -20px;
	background-color: #010c29;
	padding: 0;
}

.csp_info {
	font-size: .9em;
	margin: 0;
	text-align: left;
    /*border: 2px solid red;/*debug*/
}

.externalAlert {
	margin: 5px;
}

.contentPagewell {
	color: #000;
	background-color: #fff;
	padding: 15px;
	min-height: 650px;
}


/* below are styles added for i5 */

/* BEGIN DEBUG MEDIA STEPS (debug breakpoints) */
/* below are special debug media steps to use the breadcrumb to show the bootstrap break points at 1200 992 and 768 */
/*@media (max-width: 1200px) {
	.i5breadcrumb { background-color: #ffe0e0; }
}
@media (max-width: 992px) {
	.i5breadcrumb { background-color: pink; }
}
@media (max-width: 768px) {
	.i5breadcrumb { background-color: red; }
}
/* END DEBUG MEDIA STEPS */


.i5breadcrumb {
	margin-bottom: 0px !important;
	/*background-color: red;/*debug*/
	/*border: 1px solid white;/*debug*/
}

.i5navbar {
	margin-bottom: 0 !important;
}

.accessva-banner-container {
	margin-bottom: 20px !important;   /* this is a trick used in the old header to make things space right (there probably is a better way) */
    /*border: 1px solid red;/*debug*/
}

.accessva-banner-center-div {
	height: 74px;
	min-height: 74px;
	max-height: 74px;
	margin: 0;
	padding: 0;
    /*border: 1px solid blue;/*debug*/
}

.accessva-banner-image {
	height: 74px;
	max-height: 74px;
    /*border: 2px solid red;/*debug*/
}


/* shadow generator: http://css3gen.com/text-shadow                                                     */
/* used 50 degrees distance 8 blur 12 opacity 1                                                         */
/* about fonts http://stackoverflow.com/questions/13622391/ugly-font-rendering-in-internet-explorer     */
/*   On IE, some strokes look thicker than on Firefox, due to differences in font rendering algorithms, */
/*   and there is nothing you can do about it now or in the foreseeable future, except that this        */
/*   may lead you into reconsidering the font and style choices.                                        */
.accessva-banner-center-div-font-effects {
	font-size: 20px;
	font-family: Trebuchet MS, sans-serif; /* Trebuchet MS */
	/* replaced with em and strong tags to make 508 scans happy on so many pages, but not sure this text means this semantically
	font-style: italic;
	font-weight: bold;
	*/
	text-shadow: 5px 6px 12px rgba(100, 100, 100, 1);
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#848484,direction=140,strength=6); /* for IE9 and below see https://msdn.microsoft.com/en-us/library/ms532985(v=vs.85).aspx */
	color: black;
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 540px) {
	.accessva-banner-center-div-font-effects {
		display: none !important;
	}
}

.css-table-max-width-and-height {
	display:table; 
	height:100%;
	width:100%;
	/*border: 2px solid green;/*debug*/
}

.css-table-cell-fully-centered {
	display: table-cell;
	text-align: center;
    vertical-align:middle;
    float:none;
	/*border: 2px solid red;/*debug*/
}

#i5_header_gradient {
	/* fallback */
	background-color: #789bd1;
	background-image: url(../images/i5_header_gradient.png);
	background-repeat: repeat-y;
	background-size: 100%;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, left top, right top, from(#1677bd), to(#ffffff));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(left, #1677bd, #ffffff);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(left, #1677bd, #ffffff);

	/* IE 10 */
	background: -ms-linear-gradient(left, #1677bd, #ffffff);

	/* Opera 11.10+ */
	background: -o-linear-gradient(left, #1677bd, #ffffff);
}

.signinpartners-instruction-text {
	margin-bottom: 0;
}

.signinpartners-upper-label-div {
	margin: 20px 0 10px 0;
}

.signinpartners-upper-label-text {
	margin-top: 10px;
}

.signinpartners-lower-label-div {
	margin: 20px 0 0 0;
}

.signinpartners-lower-label-text {
	margin: 0 !important;
}

.signinpartners-csp-details-label-text {
	font-size: 16px;
	padding: 0;
	margin: 0;
	color: #006699;
    /*border: 1px solid red;/*debug*/
}

.application-select-Pagewell {
	min-height: 400px;
}

.application-button-row {
	margin: 0;
	padding: 0;
    /*border: 1px solid red;/*debug*/
}

.application-button-col {
	margin: 14px 0 0 0;
	padding: 0 8px 0 0;       /* 8px right keeps them from ever touching */
	text-align: center;
    /*border: 1px solid green;/*debug*/
}

.application-button-anchor:active {
	/* commented out so keyboard users can see focus change... outline: none; /* remove outline Firefox puts around the image after a click on it */
}

.application-button-image {
	display: inline;		/* restore default value which changed to block by img-responsive, responsiveness seems ok, when it is block the focus outline does not work for keyboard only users' needs */
	margin: 0 auto 0 auto;  /* center the image left/right in the column */
	padding: 0;       /* 8px right keeps them from ever touching */
    border-style: solid;
	border-color: transparent;
	border-radius: 10px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 2px; /* reserve bottom and right space to use top and left to button press shift the image */
	border-right-width: 2px;
}

.application-button-image:hover{
	background: #d0d0d0;
}

.signinpartners-csp-button-row {
	margin: 0;
	padding: 0;
    /*border: 1px solid blue;/*debug*/
}

.signinpartners-csp-button-col {
	margin: 8px 16px 8px 0px;
	padding: 0;
	text-align: center;
	width: 132px !important; /* taking no chances, we want the blue box this wide */
	max-width: 132px !important;
	min-width: 132px !important;
	height: 108px !important; /* taking no chances, we want the blue box this high */
	max-height: 108px !important;
	min-height: 108px !important;
    /*border: 1px solid red;/*debug*/
}

.signinpartners-csp-bullets-div {
	margin: 0;
	padding: 0;
	display:inline-block;
	width: 100%;
	/*border: 1px solid blue;/*debug*/
}

.signinpartners-csp-bullets-div ul {
	margin: 0 0 0 10px;
	padding: 10px 14px 10px 14px;
	/*border: 1px solid red;/*debug*/
}

.signinpartners-csp-button-image-wide {
	margin: 14px auto 9px auto;  /* center the image left/right in the column */
	padding: 0 2px 2px 0; /* reserve bottom and right space to use top and left to button press shift the image */
    border-style: solid;
	border-color: transparent;
	border-radius: 0px !important;
	border-top-width: 2px;
	border-left-width: 2px;
	border-bottom-width: 2px;
	border-right-width: 2px;
	height: 44px !important;
	max-height: 44px !important;
    /*border: 1px solid blue;/*debug*/
}

.signinpartners-csp-button-image-tall {
	margin: 6px auto 1px auto;  /* center the image left/right in the column */
	padding: 0 2px 2px 0; /* reserve bottom and right space to use top and left to button press shift the image */
    border-style: solid;
	border-color: transparent;
	border-radius: 0px !important;
	border-top-width: 2px;
	border-left-width: 2px;
	border-bottom-width: 2px; /* reserve bottom and right space to use top and left to button press shift the image */
	border-right-width: 2px;
	height: 60px !important;
	max-height: 60px !important;
    /*border: 1px solid red;/*debug*/
}

.signinpartners-logo-name-blue-rectangle {
	width:352px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	display: table;
	background-color: #e9f0ff;
	border: 1px solid #0a92da;
}

/* where the CSP logo is */
.signinpartners-blue-rectangle-logo-div {
	float: left;
	text-align: center;
	height: 70px; /* must have a fixed height or else the fully centering table divs trick will not work vertically */
	/*padding: 7px 0 8px 0; /* this controls how high or low the logo is */
	padding: 0;
	width:150px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	/*border: 2px solid blue;/*debug*/
}

/* where the CSP name is */
.signinpartners-blue-rectangle-name-div {
	float: left;
	text-align: center;
	height: 70px; /* must have a fixed height or else the fully centering table divs trick will not work vertically */
	/*padding: 7px 0 8px 0; /* this controls how high or low the logo is */
	padding: 0;
	width:200px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	/*border: 2px solid green;/*debug*/
}

.signinpartners-blue-rectangle-image-wide {
	margin: 0;
	/*margin: 14px auto 9px auto;  /* center the image left/right in the column */
	padding: 0;
	/*padding: 0 2px 2px 0; /* reserve bottom and right space to use top and left to button press shift the image */
	height: 44px !important;
	max-height: 44px !important;
    /*border: 2px solid red;/*debug*/
}

.signinpartners-blue-rectangle-image-tall {
	margin: 0;
	/*margin: 6px auto 1px auto;  /* center the image left/right in the column */
	padding: 0;
	/*padding: 0 2px 2px 0; /* reserve bottom and right space to use top and left to button press shift the image */
	height: 60px !important;
	max-height: 60px !important;
    /*border: 2px solid red;/*debug*/
}

.signinpartners-blue-rectangle-csp-label-text {
	font-size: 16px;
	padding: 0;
	margin: 0;
	color: #006699;
    /*border: 1px solid green;/*debug*/
}

.signinpartners-button-text {
	padding: 0;
	margin: 0;
	height: 41px !important;
	max-height: 41px !important; /* column height - total logo (which is 108 - 67 = 41) */
	min-height: 41px !important;
}

.esig_attestation-certify-checkbox {
	float: left; 
	margin-right: 8px;
}

.text-align-left {
	text-align: left;
}

@media (max-width: 385px) {
	/* trying to make blue rectangle smaller on very small screens */
	.signinpartners-logo-name-blue-rectangle {
		width:284px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	}
	.signinpartners-blue-rectangle-logo-div {
		width:112px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	}
	.signinpartners-blue-rectangle-name-div {
		width:170px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	}
	.signinpartners-blue-rectangle-image-wide {
		height: 38px !important;
		max-height: 38px !important;
	}
	.signinpartners-blue-rectangle-image-tall {
		height: 54px !important;
		max-height: 54px !important;
	}
	.signinpartners-csp-bullets-div ul {
		margin: 0 0 0 8px;
		padding: 8px 0px 8px 8px;
		/*border: 1px solid red;/*debug*/
	}
}

@media (max-width: 315px) {
	/* even crazy small */
	.signinpartners-logo-name-blue-rectangle {
		width:194px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
/*border: 1px solid red;/*debug*/
	}
	.signinpartners-blue-rectangle-logo-div {
		width:84px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
/*border: 1px solid blue;/*debug*/
	}
	.signinpartners-blue-rectangle-name-div {
		width:106px; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
/*border: 1px solid green;/*debug*/
	}
	.signinpartners-blue-rectangle-image-wide {
		height: 30px !important;
		max-height: 30px !important;
/*border: 1px solid red;/*debug*/
	}
	.signinpartners-blue-rectangle-image-tall {
		height: 48px !important;
		max-height: 48px !important;
/*border: 1px solid red;/*debug*/
	}
}

.cspselect-Pagewell {
	padding: 8px 15px 0px 15px;
	min-height: 0; /* do not need a min-height */
	/*border: 3px solid red;/*debug*/
}

.cspselect-app-logo-row {
	/*border: 1px solid red;/*debug*/
}

.cspselect-app-logo-col {
	/*border: 1px solid red;/*debug*/
}

.cspselect-app-info-row {
	/*border: 1px solid green;/*debug*/
}

.cspselect-app-info-row p {
	margin-top: 10px;
	margin-bottom: 0;
}

.cspselect-app-info-col {
	/*border: 1px solid green;/*debug*/
}

.cspselect-application-logo-image {
	margin: 0;
	padding: 0;
	/*border: 1px solid green;/*debug*/
}

.auth-welcome-message-text-div {
	padding-top: 7px;
}

.auth-welcome-message-banner {
	/* OLD BEFORE 508 CHANGES: background: #38C0E2 !important; */
	/* RECOMMENDED BY 508 SCAN: background: #247A91 !important; */
	background: #1677bd !important; /* from upcoming prio 2 changes (i6?) which we wanted to use anyway */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-khtml-border-radius: 4px;
	color: #FFFFFF;
	/*border: 2px solid red;/*debug*/
	padding-left: 15px;
	padding-right: 5px;
	text-shadow: 1px 1px rgba(6, 29, 78, 0.75);
}

@media (max-width: 370px) {
	.auth-welcome-message-text-div {
		font-size: 12px; /* 14px is too big */
	}
	.auth-welcome-message-banner {
		/*border: 2px solid pink;/*debug*/
	}
}

@media (max-width: 300px) {
	.auth-welcome-message-text-div {
		font-size: 10px;
	}
	.auth-welcome-message-banner {
		/*border: 2px solid red;/*debug*/
	}
}

/* the following are cspselect special changes to match the media sizes of bootstrap */

/* "xs" Extra Small Devices, Phones */
@media only screen and (max-width : 767px){

	.cspselect-select-another-app-col {
		margin: 14px 0 14px 0;
		/*border: 1px solid red;/*debug*/
	}

}
 
/* "sm" Small Devices, Tablets */
@media only screen and (min-width : 768px) {

	.cspselect-select-another-app-col {
		margin: 18px 0 18px 0;
		/*border: 1px solid pink;/*debug*/
	}

}
 
/* "md" Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

	.cspselect-select-another-app-col {
		margin: 22px 0 22px 0;
		/*border: 1px solid green;/*debug*/
	}
}


/*****************************/
/* USER SELECTOR PAGE STYLES */
/*****************************/

.user-selector-page-user-type-row { /* this is the container for the whole accordion object */
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px;
	/*border: 1px solid pink;/*debug*/
	/*background-color: yellow !important;/*debug*/
}

.user-selector-page-panel-group {
	margin-bottom: 0px;
	width: 100%;
}

.width-100 {
	width: 100%;
}

.user-selector-page-panel { /* this is the container for one accordion item */
	margin: 0px 0px 8px 0px !important; /* without this the lower according items appear in a different position from the first when they are expanded (causes a jump effect) */
	border: none; /* eliminates outer border */
	-webkit-box-shadow: none; /* more border elimination */
	box-shadow: none; /* more border elimination */
	background-color: #f8f8f8;
	/*background-color: red;/*debug*/
}

.user-selector-page-panel-title {
	font-size: 18px;
	margin-left: 10px;
	color: #FFFFFF; /* 9/13/2016 e-mail from Andrew Allen */
	font-weight: bold !important; /* 9/13/2016 e-mail from Andrew Allen */
	/*background-color: green !important;/*debug*/
}

.user-selector-page-panel-heading { /* this is the per accordion item header that has the arrow and changes from gray to blue then back */
	background-color: #1677BD !important; /* 9/13/2016 e-mail from Andrew Allen */
	border-radius: 4px;
    cursor: pointer;
}

.user-selector-page-panel-title:after { /* this is the "h4" heading text chevron arrow at the end WHEN EXPANDED */
    content:"";
    float: right;
    color: #1677BD; /* to match the new color of the text in user-selector-page-panel-title */	
}

.user-selector-page-drop-down-title {
	font-size: 12px;
	/*border-color: pink !important;/*debug*/
	border: none !important; /* eliminates in-between border */
	padding-top: 0px;
	padding-bottom: 5px;
	background-color: #f8f8f8;
	/*background-color: lightblue;/*debug*/
}

.user-selector-page-drop-down-title p {
	font-size: 12px;
	color: black;
}

.user-selector-page-panel-heading.collapsed {
	background-color: #00467F !important; /* 9/13/2016 e-mail from Andrew Allen */
}

.user-selector-page-panel-heading.collapsed .user-selector-page-panel-title:after { /* this is the "h4" heading text chevron arrow at the end WHEN COLLAPSED */
    content:"\e080";
    color: #FFFFFF; /* to match the new color of the text in user-selector-page-panel-title */
}

.user-selector-page-application-button-col { /* the columns for the grid of app buttons */
	margin: 0 0 0 0;
	padding: 8px 8px 0 0;       /* 8px right keeps them from ever touching */
	/*text-align: center; /* don't think we want this on the main page */
	/*border: 1px solid red;/*debug*/
	/*background-color: green !important;/*debug*/
}

.banner-area {
    font-family: 'Arial Regular', 'Arial';    
    padding-top: 10px;
    display: table;    
    margin: 0 auto;    
}

.banner-area-widget {
    font-family: 'Arial Regular', 'Arial';    
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    display: table;    
    margin: 0 auto;    
}

.banner-content {
	padding: 15px;
	font-size: 14px;
    display: table;
	margin: 0 auto;
	text-align: center;
	background-color: #FFF8B2;
}

.banner-non-prod {
	margin: 0px auto;
	padding-top: 15px;
	padding-bottom: 15px;
	width: 100%;
	height: 100%;
	border: 1px solid;
	box-shadow: 2px 2px;
	text-align: center;
	font-size: 16px; display: table;
	background-color: rgb(255, 255, 0);
}

.banner-non-prod h2{
	font-size: 25px;
	font-weight: bold !important;
}

.no-border {
	border:none;
}

@media only screen and (max-width : 200px) { /* make tiny text on super small screens to not jump out of the header or damage chevron arrow */
	.user-selector-page-panel-title {
		font-size: 7px;
	}
}

@media only screen and (max-width : 325px) {
	.user-selector-page-application-button-col { /* one column when small */
		width: 100%;
		/*border: 4px solid red;/*debug*/
	}
	.user-selector-page-panel-title {
		font-size: 14px;
	}
}

@media ( min-width : 325px) and (max-width: 580px) { /* two columns when medium (finer control than the bootstrap column numbers give us) */
	.user-selector-page-application-button-col {
		width: 50%;
		/*border: 4px solid blue;/*debug*/
	}
	.user-selector-page-panel-title {
		font-size: 14px;
	}
}

@media only screen and (max-width:480px){
    .banner-area {
       font-size: 11px !important;
	}
}



/*********************************/
/* GENERIC "SLAP ON" MINI STYLES */
/*********************************/

.hidden-div {
	visibility: hidden;
	display: none;
}

.width_90_percent {
	width: 90%;
}

.margin-top-zero {
	margin-top: 0px;
}

.margin-all-zero {
	margin: 0 !important;
}

.margin-0-0-10-0 {
	margin: 0 0 10px 0 !important;
}

.padding-15 {
	padding: 15px;
}

.panel-heading-padding {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
}

.line-height-reset {
	/* the default from bootstrap we need to force sometimes due to 508 forcing us to use h1-h6 tags */
	line-height: 1.42857143;
}

.padding-all-zero {
	padding: 0 !important;
}

.isam-info-federations {
	background-color: #999999;
	border-style: solid;
	border-width: 1px;
	border-color:#000000;
}

.color-000204 {
	color: #000204;
}

.div-white {
	background-color: white
}

.div-800px-m-0-mh-10 {
	width:800px; 
	margin:0 auto; 
	min-height: 10px;
}

.div-800px-m-0 {
	width:800px; 
	margin:0 auto;
}

.margin-0-auto {
	margin:0 auto;
}

.padding-left-bottom-10px {
	padding-left: 10px;
	padding-bottom: 10px;
}

.w3-card-2-center {
	margin: auto; 
	width: 50%; 
	text-align: center; 
	vertical-align: middle;
}

.background-f8f8f8 {
	background:#F8F8F8;
}

.width-80px {
	width: 80px;
}

/*******************************************************/
/* SPECIAL: OUR OWN MINIMALISTIC BEGIN RESPONSIVE GRID */
/*******************************************************/

/* responsive grid below is based on this example http://jsfiddle.net/kangrian/7ADx4/ http://blog.kangrian.com */

/* foundational settings (currently just used for cspselect...make a generic name of it if the exact same style can be used elsewhere) */
.cspselect-responsive-base {
	clear: both;
	padding: 0px;
	margin: 0px;
	/*border: 1px solid red;/*debug*/
}

/* simple responsive grid (currently just used for cspselect...make a generic name of it if the exact same style can be used elsewhere) */
.cspselect-simple-responsive-grid:before, .cspselect-simple-responsive-grid:after {
	content:"";
	display:table;
}
.cspselect-simple-responsive-grid:after {
	clear:both;
}
.cspselect-simple-responsive-grid {
    zoom:1; /* For IE 6/7 */
	overflow: hidden; /* */
}

.mstr-footer-div {
    margin-top: 10px;
    background: #05263f;
    height: 400px;
    color: #010c29;
}

.mstr-footer-row {
    background-color: #05263F;
    height: 400px;
}

.link-color-for-508 {
	color: #000000;
}
.link-color-for-508:hover {
	color: #020507;
}

.select-Pagewell-800px {
	width: 800px; 
	margin: 0 auto;
}

.font-weight-normal {
	font-weight: normal;
}

a:not([class*="btn"]) {
	text-decoration: none;
}
a:not([class*="btn"]):hover {
	text-decoration: underline;
}

@media (min-width:768px){.container{max-width:720px}}

@media (min-width:992px){.container{max-width:960px}}

@media (min-width:1200px){.container{max-width:1140px}}
		
/* miscellaneous useful things below: */
/*padding: 0 !important;/*debug-zap padding for sure*/
/*margin: 0 !important;/*debug-zap margins for sure*/