/*******************************************************/
/* HELPFUL INFO                                        */
/*                                                     */
/* margin and padding items are: top right bottom left */
/* this can be remembered as trouble: TRBL             */
/*******************************************************/

/************************************************/
/* SPECIAL HTML TAG OVERRIDES SHARED BY WIDGETS */
/************************************************/

body {
	background: none;
	height: 100%;
}

h3 {
	margin-top: 5px;
	margin-bottom: 5px;
}


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

.hidden-heading-for-widget { /* 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;
}


/**************************************/
/* COMMON/SHARED WIDGET ITEMS         */
/**************************************/

.general-widget-embedwrapper {
/*overflow-X: auto;/**/
/*overflow-Y: visible;/* see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp */
	overflow: auto; /* this fixed a crazy overflow of divs inside this div */
	/*padding: 0px; /* added bottom padding so widget will not touch the bottom when made small */
	/*padding: 20px 20px 40px 20px;/**/
	/*padding: 0px 0px 40px 0px !important;/* IE & Firefox seem to ignore this when widget is shrunk way down*/
	/*margin: 0px 0px 20px 0px;/**/
	padding: 0px;/**/
	margin: 0px;/**/
	height: 100%;
	background-color: #f8f8f8; /* standard widget silver background color */
	/*background-color: pink; /* debug yellow pink red green */
	/*border: 1px solid yellow;/*debug*/
}

.general-widget-embedwrapper-white {
/*overflow-X: auto;/**/
/*overflow-Y: visible;/* see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp */
	overflow: auto; /* this fixed a crazy overflow of divs inside this div */
	/*padding: 0px; /* added bottom padding so widget will not touch the bottom when made small */
	/*padding: 20px 20px 40px 20px;/**/
	/*padding: 0px 0px 40px 0px !important;/* IE & Firefox seem to ignore this when widget is shrunk way down*/
	/*margin: 0px 0px 20px 0px;/**/
	padding: 0px;/**/
	margin: 0px;/**/
	height: 100%;
	background-color: #ffffff; /* standard widget silver background color */
	/*background-color: pink; /* debug yellow pink red green */
	/*border: 1px solid yellow;/*debug*/
}

.login-widget-va-banner-image-with-text {
	height: 74px;
	max-height: 74px;
    /*border: 2px solid red;/*debug*/
}

/* would be nice someday to give this a "widget kind of name" */
.backgroundclass {
	height: 74px;
	width: 100%;
}

.hidden-section {
	display: none;
}

/* would be nice someday to give this a "widget kind of name" */
#backgroundID {
	background-color: #05263f;
}

.widget-zero-padding-column {
	padding: 0px; /* we do not want padding here for the widget about pages */
	/*background-color:pink;/*debug*/
}

.login-widget-csplogo-tall {
	height: 48px;
	margin: 0;
}

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

.div-widget-auth-redirect {
	color: #000; 
	background-color: #fff; 
	padding: 15px;
}

/*  button too crowded when really narrow width, so try to save some space */
@media only screen and (max-width: 290px) {
	.login-widget-csplogo-wide {
		width: 75px;
	}
}


/**************************************/
/* E-SIG                              */
/**************************************/

.esig-embedwrapper {
	padding: 0px;
	height: 100%;
	/*border: 4px solid yellow;/*debug*/
	/*background-color: red;/*debug*/
}

/* bootstrap override: must be the same name, could add a custom class someday instead of override */
.panel-info {
	height: 100% !important;/**/
	padding: 0px;
	margin: 0px;
	box-shadow:none; /* this turns off the tiny faint gray border and the shadow at the bottom*/
	border-width: 0px !important; /* turns off the border around the panel */
	/*border:1px solid red;/*debug*/
}

/* bootstrap override: must be the same name, could add a custom class someday instead of override */
.esig-popup-panel-danger {
	height: 100% !important;/**/
	padding: 0px;
	margin: 0px;
	box-shadow:none; /* this turns off the tiny faint gray border and the shadow at the bottom*/
	border-width: 0px !important; /* turns off the border around the panel */
	/*border:1px solid red;/*debug*/
}

/* bootstrap override: must be the same name, could add a custom class someday instead of override */
.panel-body {
	height: calc(100% - 41px); /* take up the rest of the vertical space */
	/*border:1px solid cyan;/*debug*/
}

.esig-top-row {
	padding: 0px;
	height: calc(100% - 30px); 	/* take up the rest of the vertical space */
								/* this is what pushes the buttons to the bottom, why 30 and not 44 I do not know, but 44 leaves a gap under the buttons */
}

.esig-buttons-row {
	padding: 0px;
	height: 44px;/**/
	/*border:1px solid red;/*debug*/
}

@media only screen and (max-width : 500px) {
	.esig-popup-button-with-bottom-margin {
		/*border:1px solid red;/*debug*/
		margin-bottom: 10px;/**/
	}
}


/**************************************/
/* LOGIN WIDGET                       */
/**************************************/

.widget-error-heading-only-text {
	margin: 8px 0px 0px 5px;
}

.widget-login-intro-text {
	margin: 8px 0px 0px 5px;
}

.login_widget_csp_wrapper_div {
	/*overflow: hidden; /* this fixed a crazy overflow of divs inside this div */
	padding: 0px; /* added bottom padding so widget will not touch the bottom when made small */
	/*padding: 20px 20px 40px 20px;/**/
	/*margin: 0px 0px 20px 0px;/**/
	margin: 0px;
	height: 100%;
	/*background-color: pink; /* debug yellow pink red */
	/*border: 5px solid blue;/*debug*/
}

/* where the logo is */
.widget-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*/
}

/* important is being difficult in IE, so just defining our own class */
/* this holds the blue widget buttons and makes them resize properly */
.csp_widget_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 4px 4px 4px; /* 6px top for spacing between rows, 4px left, right is determined by width % next */
	width: 48.55%;          /* 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;
	/*overflow: hidden; /* removed for 508 5/26/2016 to match what was done on the main pages for cspselect-button-responsive-column */
	/* 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:2px solid red;/*debug*/
}

.widget-guestaccess-static-text-instead-of-logo {
	margin-top: 2px;
	font-weight: bold !important;
	color: #00467f !important;
}

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

@media only screen and (max-width : 290px) {
	.widget-guestaccess-static-text-instead-of-logo {
		font-size: 10px;
		/*color: red; /*debug*/
	}
}


/**************************************/
/* ABOUT WIDGETS                      */
/**************************************/

.login_widget_about_text {
	padding: 0 12px 0 12px;
	/*border: 2px solid red;/*debug*/
}

.login_widget_about_text a {
	target-new: tab; /* even when this is specified AND the Tools option says new tab not new window, IE 9 still opens a new window */
}

.login_widget_about_text ul {
	padding: 0;
	margin: 6px 0 0 24px;
	/*border: 2px solid blue;/*debug*/
}

.login_widget_about_text p {
	padding: 0;
	margin: 6px 0px 0px 0px;
	/*border: 2px solid blue;/*debug*/
}

/* would be nice someday to give this a "widget kind of name" */
.about-upper-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: calc(100% - 56px); /* take up the rest of vertical space (trial & error found 56/55 works, taking 1 extra here to avoid scrollbar in Firefox) */
	/*border:2px solid blue;/*debug*/
}

/* would be nice someday to give this a "widget kind of name" */
.about-footer-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: 55px;/**/
	/*border:2px solid red;/*debug*/
}


/**************************************/
/* LEARN MORE WIDGET                  */
/**************************************/

.learn-more-widget-intro-text {
	margin: 8px 0px 8px 5px !important;
}

.learn-more-widget-faq-text {
	margin: 0px 5px 0px 5px;
	/*border: 1px solid red;/*debug*/
}

/* where the learn more links are */
.widget-learn-more-links-div {
	float: right;
	text-align: left;
	margin: 0px;
	width: 100%; /* this width plus the one on widget-button-logo-div control where the dividing line is */
	height: 20px; /* column must have a fixed height or else the fully centering table divs trick will not work vertically */
	padding: 0px;
	/*border: 2px solid yellow;/*debug*/
}

/* where the learn more FAQ link is */
.widget-learn-more-faq-text-div {
	float:left;
	text-align: left;
	height: 42px; /* column must have a fixed height or else the fully centering table divs trick will not work vertically */
	padding: 0px; /* this controls how high or low the logo is */
	width:100%;
}

.widget-learn-more-faq-text-div a {
	target-new: tab; /* even when this is specified AND the Tools option says new tab not new window, IE 9 still opens a new window */
}

.widget-learn-more-back-button-one {
	margin-left: 4px;
	margin-right: 11px;
	margin-top: 11px;
	margin-bottom: 11px;
	padding: 7px 11px 7px 11px; /* this establishes how much space is INSIDE the button around the text of the button */
}

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

.widget-learn-more-upper-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: calc(100% - 98px); /* take up the rest of vertical space (trial & error found 97/98 works, taking 1 extra here to avoid scrollbar in Firefox) */
	/*border:2px solid blue;/*debug*/
}

.widget-learn-more-footer-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: 97px;
	/*border:2px solid red;/*debug*/
}

.widget-learn-more-inner-grid-div {
	overflow: auto; /* this fixed a crazy overflow of divs inside this div */
	/*background-color: lightblue;/*debug*/
	/*border:1px solid pink;/*debug*/
	padding: 0px 0px 0px 30px; /* left margin to indent about 5 characters worth */
}

.widget-learn-more-inner-grid-div-3column {
	overflow: auto; /* this fixed a crazy overflow of divs inside this div */
	/*background-color: lightblue;/*debug*/
	/*border:1px solid pink;/*debug*/
	padding: 0px 0px 0px 30px; /* left margin to indent nicely (may be the same, may be different) */
}

/* important is being difficult in IE, so just defining our own class */
/* this holds the learn more links and makes them resize properly (patterned after the blue buttons) */
.csp_widget_learn_more_links_responsive_column {
	display: block;
	float:left;
	margin: 4px 4px 4px 4px; /* 6px top for spacing between rows, 4px left, right is determined by width % next */
	width: 40%;          /* 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 */
	overflow: hidden; /* */
	padding: 0px; /* button fills this div */
	/*border: 1px solid red;/*debug*/
}

/* same thing but for three columns instead of two (still goes to one when squeezed down) */
.csp_widget_learn_more_links_responsive_column_3column {
	display: block;
	float:left;
	margin: 4px 4px 4px 4px; /* 6px top for spacing between rows, 4px left, right is determined by width % next */
	width: 30%;          /* 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 */
	overflow: hidden; /* */
	padding: 0px; /* button fills this div */
	/*border: 1px solid pink;/*debug*/
}

.no-border-top {
	border-top: none;
}

.iframe-csp-about {
	height:225px;
	width:596px;
	border:none;
	padding:0;
	margin:0;
}

/*  need our own width handler, 590px keeps wide logos from touching the buttons */
@media only screen and (max-width: 450px) {
	.learn-more-widget-intro-text {
		font-size: 14px;
		margin: 6px 0px 6px 5px !important;
	}
	.learn-more-widget-faq-text {
		font-size: 12px;
	}
}

@media only screen and (max-width: 590px) {
	.csp_widget_learn_more_links_responsive_column {
		margin: 2px 2px 2px 2px; /* leave a sliver of white on each side of the blue rows, why does zero work? padding in the container */
		width: 98.8%;            /* need a little spare space here too to make it work */
		/*background-color: pink;/*debug*/
		/*border:1px solid red;/*debug*/
	}
	.csp_widget_learn_more_links_responsive_column_3column {
		margin: 2px 2px 2px 2px; /* leave a sliver of white on each side of the blue rows, why does zero work? padding in the container */
		width: 98.8%;            /* need a little spare space here too to make it work */
		/*background-color: pink;/*debug*/
		/*border:1px solid red;/*debug*/
	}
	.widget-learn-more-inner-grid-div {
		padding: 0px 0px 7px 40px !important; /* left margin to indent nicely */
		/*background-color: pink;/*debug*/
	}
	.widget-learn-more-inner-grid-div-3column {
		padding: 0px 0px 7px 40px !important; /* left margin to indent nicely */
		/*background-color: pink;/*debug*/
	}
}

@media only screen and (max-width: 220px) {
	.learn-more-widget-faq-text {
		font-size: 10px; /* crazy small needs smaller FAQ message to not run into the Back button */
	}
}


/**************************************/
/* REGISTRATION WIZARD                */
/**************************************/

.widget-registration-wizard-intro-text {
	margin: 8px 8px 18px 13px !important;
}

.widget-registration-inner-grid-div {
	overflow: auto; /* this fixed a crazy overflow of divs inside this div */
	/*background-color: pink;/*debug*/
	/*border: 2px solid black;/*debug*/
	padding: 0px 0px 0px 0px;
}

.widget-registration-wizard-one-upper-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: calc(100% - 57px); /* take up the rest of vertical space (trial & error found 57/57 works, this time they need to be the same???) */
	/*background-color: lightblue;/*debug*/
	/*border:2px solid blue;/*debug*/
}

.widget-registration-wizard-footer-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: 57px;
	/*background-color: lightgreen;/*debug*/
	/*border:2px solid red;/*debug*/
}

.widget-registration-wizard-footer-row-padding {
	width: 100%; /* without this it goes outside the modal */
	padding-top: 24px;
	margin: 0px; /* default has negative right & left margins that cause a left shift here */
	height: 70px;
	/*background-color: lightgreen;/*debug*/
	/*border:2px solid red;/*debug*/
}

.widget-registration-wizard-next-button {
	margin: 11px;
	padding: 7px 11px 7px 11px; /* this establishes how much space is INSIDE the button around the text of the button */
}

.widget-registration-wizard-one-logo-text-rectangle {
	width: 75%; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
	display: table;
	margin: 0 0 0 16%;
	padding: 0;
	/*border: 1px solid red;/*debug*/
}

/* where the little graphic is */
.widget-registration-wizard-one-logo-div {
	float: left;
	text-align: center;
	height: 58px; /* must have a fixed height or else the fully centering table divs trick will not work vertically also this spreads them out a little vertically */
	padding: 0;
	width: auto;
	/*border: 1px solid blue;/*debug*/
}

/* where the CSP name is */
.widget-registration-wizard-one-info-text-div {
	float: left;
	height: 58px; /* see comment for height at widget-registration-wizard-one-logo-div above */
	padding: 0;
	width: 85%;
	/*border: 1px solid lightgreen;/*debug*/
}

.widget-registration-wizard-one-logo {
	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: 1px solid yellow;/*debug*/
}

.widget-registration-wizard-one-info-text {
	width: 100%;
	text-align: left;
	padding: 0 0 0 4px;
	margin: 0 0 0 0;
    /*border: 1px solid yellow;/*debug*/
}

.widget-registration-wizard-two-intro-text {
	margin: 8px 8px 6px 13px !important;
    /*border: 1px solid blue;/*debug*/
}

.widget-registration-wizard-two-lower-text {
	margin: 6px 8px 0px 13px !important;
}

.widget-registration-wizard-two-logo-rectangle {
	width: 68%; /* anything lager let's the image grow and a scrollbar appears */
	/*display: table;*/
	margin: 0 0 9px 15%;
	padding: 0;
}

/* reg_wiz_two_graphic.png
 * raw image is 662 x 209
 * 20% is 132 x 42
 * 24% is 159 x 50
 * 26% is 172 x 54
 * 30% is 199 x 63
 * 50% is 331 x 105
 */
.widget-registration-wizard-two-logo {
	overflow: hidden;
	margin: 0;
	padding: 0;
    display: block;
    max-width: 100%;/**/
    min-width: 159px !important; /* percent does not work but px does */
    min-height: 50px !important;
    max-width: 662px !important;
    max-height: 209px !important; 
    width: 100%; /* will no grow and shrink without this */
	/*background-color: red;/*debug*/
}

.widget-registration-wizard-three-intro-text {
	margin: 8px 0px 0px 5px;
}

@media only screen and (max-width: 590px) {
	.widget-registration-wizard-one-logo-text-rectangle {
		width: 89%; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
		margin: 0 0 0 9% !important;/*was 8%*/
	}
	.widget-registration-inner-grid-div {
		/*padding: 0px 0px 7px 40px !important; /* left margin to indent nicely */
	}
	.widget-registration-wizard-one-logo-div {
		width: 12%;
	}
	.widget-registration-wizard-one-info-text-div {
		width: 88%;
		/*border: 1px solid green;/*debug*/
	}
	.widget-registration-wizard-two-logo-rectangle {
		width: 60%; /* preventing too wide, too close to right edge, and a scrollbar and some sizes */
		margin: 10px 0 26px 18%; /* top and bottom to space things out a little */
	}
	/*.widget-registration-wizard-two-logo {background-color: green;}/*debug*/
}

@media only screen and (max-width: 530px) {
	.widget-registration-wizard-two-logo-rectangle {
		width: 56%; /* preventing too wide, too close to right edge, and a scrollbar and some sizes */
		margin: 14px 0 22px 16%; /* top and bottom to space things out a little */
	}
	/*.widget-registration-wizard-two-logo {background-color: gray;} /*debug*/
}

@media only screen and (max-width: 460px) {
	.widget-registration-wizard-one-logo-text-rectangle {
		width: 94%; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
		margin: 0 0 0 5% !important;
	}
	.widget-registration-wizard-intro-text {
		font-size: 14px;
		margin: 6px 8px 6px 10px !important;
		/*background-color: pink !important;/*debug*/
	}
	.widget-registration-wizard-two-intro-text {
		font-size: 14px;
		margin: 6px 8px 7px 10px !important;
		/*background-color: pink !important;/*debug*/
	}
	.widget-registration-wizard-one-logo-div {
		width: 13%;
		/*border: 1px solid white;/*debug*/
	}
	.widget-registration-wizard-one-info-text-div {
		width: 87%;
		/*border: 1px solid white;/*debug*/
	}
	.widget-registration-wizard-one-logo {
		height: 38px !important;
		max-height: 38px !important;
		/*border: 1px solid pink;/*debug*/
	}
	.widget-registration-wizard-one-info-text {
		font-size: 13px;
		/*color: white;/*debug*/
	}
/* was needed but now at style-guide-body-text-small which is 14px
	.widget-registration-wizard-two-lower-text {
		font-size: 14px;
	}
*/
	.widget-registration-wizard-two-logo-rectangle {
		width: 60%; /* preventing too wide, too close to right edge, and a scrollbar and some sizes */
		margin: 26px 0 30px 18%; /* top and bottom to space things out a little */
	}
	/*.widget-registration-wizard-two-logo {background-color: pink;} /*debug*/
}

@media only screen and (max-width: 370px) {
	.widget-registration-wizard-one-logo-text-rectangle {
		width: 95%; /* this width needs to be wide enough so that the widest image does not extend outside of this div */
		margin: 0 0 0 4% !important;
	}
	.widget-registration-wizard-intro-text {
		font-size: 12px;
		margin: 6px 8px 6px 8px !important;
		/*background-color: green !important;/*debug*/
	}
	.widget-registration-wizard-two-intro-text {
		font-size: 12px;
		margin: 6px 8px 6px 8px !important;
		/*background-color: green !important;/*debug*/
	}
	.widget-registration-wizard-one-logo-div {
		width: 20%;
		/*border: 1px solid green;/*debug*/
	}
	.widget-registration-wizard-one-info-text-div {
		width: 80%;
		/*border: 1px solid green;/*debug*/
	}
	.widget-registration-wizard-one-logo {
		height: 36px !important;
		max-height: 36px !important;
		/*border: 1px solid green;/*debug*/
	}
	.widget-registration-wizard-two-lower-text {
		font-size: 12px;
	}
	/*.widget-registration-wizard-two-logo {background-color: red;} /*debug*/
}

/* NOT NEEDED FOR REGISTRATION WIZARD: @media only screen and (max-width: 220px) { } */


/**************************************/
/* REDIRECT CONFIRMATION NOTICE       */
/**************************************/

.widget-confirm-redirect-notice-panel-heading {
	/* now seems to have NO effect... border-radius: 50 !important; /* was 4 but they want square corners everywhere in i6 right? */
	/* this radius is for INSIDE the heading item to the accordian */
	cursor: pointer !important;
}

.widget-confirm-redirect-text-div {
	padding: 0 12px 0 12px;
	margin: 0px;
	/*border:2px solid red;/*debug*/
}

.widget-confirm-redirect-text {
	margin: 0 0 4px 0;
	/*border:2px solid red;/*debug*/
}


.widget-confirm-redirect-top-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0 0 4px 0;
	/*border:2px solid blue;/*debug*/
}

.widget-confirm-redirect-middle-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0 0 40px 0;
	/*margin: 0 0 116px 0;*/
	/*border:2px solid blue;/*debug*/
}

.widget-confirm-redirect-button-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0 12px 0 12px;
	margin: 8px 0 8px 0;	
	/*border:2px solid green;/*debug*/
}

.widget-confirm-redirect-privacy-notice-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 6px 12px 0 12px;
	margin: 0px;
	/*border:2px solid red;/*debug*/
}

.widget-confirm-redirect-terms-of-use-row {
	width: 100%; /* without this it goes outside the modal */
	padding: 0px;
	margin: 0 0 4px 0;
	/*border:2px solid blue;/*debug*/
}

.widget-confirm-redirect-heading {
	margin: 4px 0 4px -1px; /* -1 on the left to counter the optical illusion that the heading is slightly indented */
}

.widget-confirm-redirect-next-button {
	width: 83px !important; /* taking no chances, they want the button this wide */
	max-width: 83px !important;
	min-width: 83px !important;

}

.widget-confirm-redirect-textarea{
	width: 100%; /* without this it goes outside the modal */
	padding: 6px 6px 0 6px;
	margin: 0px;
	text-align: left;
	font-size: 13px;
	border:1px solid black;	
}

.widget-confirm-redirect-cancel-button {
	width: 83px !important; /* taking no chances, they want the button this wide */
	max-width: 83px !important;
	min-width: 83px !important;
}

.widget-terms-of-use-header-text {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 15px !important;
	font-weight: bold !important;
	color: black !important;
	padding: 8px 0px 8px 0px;
	margin: 0;
}

.widget-confirm-redirect-back-button {
	width: 63px !important; /* taking no chances, they want the button this wide */
	max-width: 63px !important;
	min-width: 63px !important;
	margin: 0 10px 0 0;
}

.widget-confirm-redirect-notice-panel-heading a:link {
	text-decoration: none;
}

.widget-confirm-redirect-notice-panel-title:after { /* after affects the chevron */
    font-family:'Glyphicons Halflings';
	font-size: 16px;
    content:"\e114"; /* down pointing chevron */
    float: left;
    color: grey; /* this only affects the chevron color */
}

.widget-confirm-redirect-notice-panel-heading.collapsed .widget-confirm-redirect-notice-panel-title:after {
    content:"\e080"; /* right pointing chevron */
}

@media only screen and (max-width : 325px) {
	.widget-confirm-redirect-notice-panel-title:after { /* the chevron */
		font-size: 14px; /* normal is 16px */
	}
	.widget-confirm-redirect-notice-panel-title { /* the title text */
		font-size: 14px; /* normal is 16px */
	}
}

@media only screen and (max-width : 290px) {
	.widget-confirm-redirect-notice-panel-heading {
		padding: 10px 2px 10px 2px;
	}
	.widget-confirm-redirect-notice-panel-title:after { /* the chevron */
		font-size: 10px; /* normal is 16px */
	}
	.widget-confirm-redirect-notice-panel-title { /* the title text */
		font-size: 10px; /* normal is 16px */
	}
}


/************************************/
/* USER SELECTOR WIDGET             */
/************************************/

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

.user-selector-widget-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-widget-panel-title {
	font-size: 18px;
	color: black;
	/*font-weight: bold;/**/
	/*background-color: green !important;/*debug*/
}

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

.user-selector-widget-panel { /* this is the container for one accordion item */
	margin: 5px 0px 0px 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: lightblue;/*debug*/
}

.user-selector-widget-panel-heading { /* this is the per accordion item header that has the arrow and changes from gray to blue then back */
	background-color: #0a92da !important; /* #0a92da background from wireframe expanded version */
	border-radius: 4px;
    cursor: pointer;
}

.user-selector-widget-panel-title:after { /* this is the "h4" heading text with chevron arrow at the end */
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: #ccccbf; /* #ccccbf arrow color from wireframe */
}

.user-selector-widget-panel-heading.collapsed {
	background-color: #898989 !important; /* #898989 background from wireframe collapsed version */
}

.user-selector-widget-panel-heading.collapsed .user-selector-widget-panel-title:after {
    content:"\e080";
    color: #ccccbf; /* #ccccbf arrow color from wireframe */
	/*background-color: red !important;/*debug*/
}

.user-selector-widget-application-button-col { /* the columns for the grid of app buttons */
	margin: 14px 0 0 0;
	padding: 0 8px 0 0;       /* 8px right keeps them from ever touching */
	text-align: center;
    /*border: 1px solid red;/*debug*/
	/*background-color: red !important;/*debug*/
}

@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-widget-panel-title {
		font-size: 7px;
		color: black;
	}
}

@media only screen and (max-width : 325px) {
	.user-selector-widget-application-button-col { /* one column when small */
		width: 100%;
		/*border: 4px solid red;/*debug*/
	}
	.user-selector-widget-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-widget-application-button-col {
		width: 50%;
		/*border: 4px solid blue;/*debug*/
	}
	.user-selector-widget-panel-title {
		font-size: 14px;
	}
}


/*******************************************************/
/* 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 */
.widget_responsive_base {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  grid of two equal columns (not sure why 50% width will not work probably margin related)  */
.NO_LONGER_USED_widget_responsive_column {
	display: block;
	float:left;
	margin: 1px 1px 1px 1px;
	width: 49%;
	/*border:2px solid red;/*debug*/
}

/* simple responsive grid */
.widget_simple_responsive_grid:before, .widget_simple_responsive_grid:after {
	content:"";
	display:table;
}
.widget_simple_responsive_grid:after {
	clear:both;
}
.widget_simple_responsive_grid {
    zoom:1; /* For IE 6/7 */
	overflow: hidden; /* */
	/*border:1px solid #000000;/**/
}

/*  stacked at screen width under 600 pixels (was 480) */
@media only screen and (max-width: 600px) {
	.NO_LONGER_USED_widget_responsive_column {
		/* margin: 0px 0px 0px 0px;  */
		width: 100%; 
	}
}