/* General styles and bootstrap smallest screens stylesheet */

/* --------------------
     APP.CSS CONTENT:
     1.  General Styles
     2.  Header/navigation
     3.  Main content
     4.  Form controls & inputs
     5.  Info message box
     6.  Buttons
     7.  Modal popups
     8.  Help & hints
     9.  Footer
     10.  Page-specific styles & overrides
     11. TEST CODE *** Development area: anything here should be cleaned up and moved upon completion ***
     
   -------------------- */

/* -------------------------------------------

     >>>>>  REMEMBER: MOBILE FIRST!!!  <<<<<
     
   ------------------------------------------- */
   
/* 	Any styles that need to override anything in this file 
	or that should ONLY apply to screens larger than phone, use -> devices.css */

/* ------------------
     General styles
   --\/-------------- */

* {
	-webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
	-webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
}

html {
	background-color:#fdfdfd !important;
	background-image: url(../images/stripes.svg) !important;
	background-repeat:repeat !important;
	background-size:15px 15px !important;
	height:100%;
}

body {
	background-color:transparent !important;
	height:100%;
	overflow:hidden;
}

html my-app form {
	height:100%;
	margin:0;
	overflow:auto;
	/* iOS has a weird bug: sporadically, after content is rendered inside an element, iOS will cut off the scrollable area of the screen
	where the old height was, and you won't be able to scroll all the way up/down right away. -webkit-overflow-scrolling: touch; seems
	to correct this issue. This doesn't seem to have any adverse effects elsewhere on any other OS/browser/device combinations I've tried. -JM */
	-webkit-overflow-scrolling: touch;
}

html .block { display:block; }
html .inline { display:inline; }
html .inlineBlock { display:inline-block; }
html .left { float:left; }
html .right { float:right; }
html .noFloat { float:none; }
html .textLeft { text-align:left; }
html .textCenter { text-align:center; }
html .textRight { text-align:right; }
html .bold { font-weight:bold; }
html .noBreak { white-space:nowrap; }

h1, h2, h3, h4, h5, h6 {
	line-height:1.4em;
	margin:0;
}

a {
	text-decoration:underline;
	transition-duration:.15s;
	transition-property:border-bottom, color;
	transition-timing-function:ease;
}

a:hover,
a:focus {
	cursor:pointer;
	text-decoration:none;
}

html .margin0 {
	margin:0 !important;
}

html .margin1 {
	margin:1em 0;
}

html .margin2 {
	margin:0 0 1em 0;
}

html .margin3 {
	margin:1em 0 0 0;
}

html .margin4 {
	margin:0 1em 0 0;
}

html .margin5 {
	margin:0 1em 1em 1em;
}

html .margin6 {
    margin:2em 0;
}

html .padding0 {
	padding:0 !important;
}

html .padding1 {
	padding:.5em 0 0 0;
}

html .padding2 {
	padding:0 1em 1em 1em;
}

html .padding3 {
	padding:0 0 .25em 0;
}

table {
	border-top: 1px solid;
	background-color: #ffffff;
    margin: 1em 0 1em 0;
    width:100%;
}

table tr {
	border-right: 1px solid;
	border-bottom: 1px solid;
}

table tr th,
table tr td {
	border-left: 1px solid;
	padding: 1em;
}

[tabIndex] {
	transition-duration:.25s;
	transition-property:border, box-shadow, text-shadow;
	transition-timing-function:ease;
}

.sizingContainer {
	background-color:#ffffff;
	border:1px solid #bbbbbb;
	margin:0 auto;
	padding:0;
}

.content {
	padding:1em 1em 2em 1em;
}

.content .febiPage {
	background-color:transparent;
	border:1px solid #999999;
	box-shadow:0 .1em .1em rgba(0, 0, 0, .15);
	margin:0;
	padding:2em 1em 1em 1em;
	position:relative;
}

/*
.content .febiPage .febiPageInner {
	border:1px solid #cccccc;
	border-bottom:none;
	padding:1em 1em 0 1em;
}
*/

.content .febiPage.active {
	background-color:#ffcc66;
}

.sizingContainer .container-fluid {
	padding:0;
}

.school-selection-1 ul.btnBlock li.search.noSchoolSelected {
	order:4;
}

.school-selection-1 ul.btnBlock li.search.schoolSelected {
	order:1;
	margin-right: .5em;
}

.school-selection-1 ul.btnBlock li.next {
	order:3;
}

.school-selection-1 ul.btnBlock li.previous {
	order:2;
}

.gdFlex {
	display:flex;
}

.gdFlexCenter {
	display:flex;
	justify-content:center;
}

.gdFlexCenter > .gdFlexItem {
	display:flex;
	flex:2 1 auto;
	justify-content:center;
}

.mobileFlexWrap {
	flex-wrap:wrap;
}

	/* Background color with white/highlight color text, and thicker border around content */

.emphasizeBlock {
	background-color:#000000;
	color:#ffffff;
	font-weight:normal;
	padding:1em 1.25em;
}

.emphasizeBlock .heading {
	font-size:1.5em;
	margin:0;
	padding:0 0 .25em 0;
}

.emphasizeBlock span,
.emphasizeBlock .heading,
.emphasizeBlock .highlight {
	font-weight:bold;
}

.emphasizeBlockContent {
	background-color:#ffffff;
	border:5px solid #000000;
	border-top:none;
	overflow:hidden;
	padding:1.5em 1em 1em 1em;
}

.standAloneSignature .emphasizeBlockContent.signButtonOnly {
	border-top:5px solid #000000;
}

.emphasizeBlock .emphasiszeBlockContent {
	border:none;
	padding:.5em 0;
}

.mystudentaid-download-top,
.correction-history-top {
	margin:0 0 1em 0;
}

.mystudentaid-download-top .blueBtnContainer {
	display:inline-block;
	width:2em;
	margin:0 1em 0 0;
}

.mystudentaid-download-top .blueBtnContainer img {
	width:100%;
	height:auto;
}

.mystudentaid-download-top .emphasizeBlock {
	display:flex;
	align-items:center;
}

.mystudentaid-download-top .emphasizeBlock span.heading {
	padding:0;
	margin:0;
}

correction-history .card-body td button,
correction-history .card-body td button:active,
correction-history .card-body td button:focus,
correction-history .card-body td button:visited,
correction-history .card-body td button:hover {
	display:block;
	margin:1em auto;
	width: 100%!important;
}

	/* End background color with white/highlight color text, and thicker border around content */
	
	/* GD custom card.
		Angular2 Material's <mat-card> is just requiring too many overrides. Bootstrap's grid paradigm 
		(the .col-md-6 type classes) is using floats (the 3.3.7 version we're using, anyways), 
		so heights might not be kept the same. Our card case is pretty simple, let's just build our own. JM */

.gdCardRow {
	display:flex;
	margin:0 0 1em 0;
	
	flex-direction:column;
}

.gdCardRow .gdCard {
	background-color:#ffffff;
	border:1px solid #aaaaaa;
	box-shadow:0 .1em .1em rgba(0, 0, 0, .15);
	display:inline-flex;
	margin:0 0 1.5em 0;
	padding:0;

	flex:1 1 auto;
	flex-direction:column;
}

.gdCardRow .gdCard:last-of-type {
	margin:0;
}

.gdCard svg path {
	fill:#ffffff;
}

.gdCardRow .gdCard .gdCardHeader {
	color:#ffffff;
	font-size:1em;
	margin:0;
	padding:.75em 1em .75em 1em;
	
	display:flex;
	align-items:center;
}

.gdCardRow .gdCard .gdCardHeader .heading, 
.gdCardRow .gdCard .gdCardHeader h2 { 
	font-size:1.25em;
	margin:0;
	padding:0 .5em 0 0;
	vertical-align:middle;
}

.gdCardRow .gdCard .gdCardHeader img,
.gdCardRow .gdCard .gdCardHeader svg {
	display:inline-block;
	margin:0 0 0 auto;
	vertical-align:middle;
	
	height:2.5em;
	width:2.5em;
}

.gdCardRow .gdCard .gdCardHeader .glyphicon {
	padding-right:1em;
}

.gdCardRow .gdCard .gdCardContent {
	padding:1em;
}

.gdCardRow .gdCard .gdCardFooter .btn {
	margin:0;
	width:100%;
}

.gdCardRow .gdCard .gdCardFooter {
	margin:auto 0 0 0;
	padding:1em 1em 1em 1em !important;
}

.gdCardRow .mat-card > .mat-card-actions:last-child {
	margin:0;
}

	/* End gd custom card */
	
.titleType1 {
	background-color:#dddddd;
	border:1px solid #999999;
	font-size:1.25em;
	padding:.5em;
}

.titleType1 h3,
.titleType1 h4 {
	font-size:1em;
}

.gdColumnLayout {
	display:table;
}

.gdColumnLayout .section1,
.gdColumnLayout .section2 {
	display:table-cell;
}

.underlineTxt {
	text-decoration:underline;
}

hr {
	border-color:#bbbbbb;
}

.controlBreakpoints1 { 
	white-space:pre-wrap; 
	width:min-content;
}

/* --/\------------------
     End general styles
   ---------------------- */


/* ----------------
     Main content
   --\/------------ */

h1.pageTitle {
	border:2px solid transparent;
	box-shadow:0 .2em .2em -.1em rgba(0, 0, 0, .1);
	display:block;
	font-size:1.75em;
	margin:0 0 0 0;
	overflow:hidden;
	padding:.3em 1.25em;
	position:relative;
	text-align:center;
	text-shadow:0 1px #000000;
}

h1.pageTitle span:first-of-type {
	display:inline-block;
}

h1.pageTitle span {
	float:none;
}

h1.pageTitle span:nth-of-type(2) {
	padding:0 0 0 .25em;
}

/* Heading focus from #skipLink */
h1.pageTitle:focus {
	border:2px solid #0000ff;
	text-shadow:0 2px #000000;
}

.content h1, 
.content h2 {
	display:inline-block;
	font-size:1.5em;
	font-weight:normal;
	margin:0 1em 0 0;
	padding:.25em 0 .5em 0;
}

.content h1:after,
.content h2:after {
	display:block;
}

.pageMessage, 
.specialPageMessage {
	font-size:1.1em;
	margin:0 0 1.5em 0;
	padding:1em;
	width:100%;
	overflow: hidden;
}

.pageMessage p,
.pageMessage h2,
.pageMessage h3 {
	font-size:1em;
	padding:0 0 0 .5em;
	vertical-align:middle;
}

.pageMessage .glyphicon-info-sign {
	width:1em;
}

.specialPageMessage .glyphicon {
	font-size:1.5em;
}

.specialPageMessage .glyphicon-info-sign:before {
	width:1.5em;
	height:1.5em;
}

.pageMessage > span,
.pageMessage .messageText {
	display: block;
	padding: 0 2.5em 0 2.5em;
}

.pageMessage .glyphicon {
	vertical-align:top;
	width:auto;
	font-size: 1.5em;
	padding: 0;
	display: inline-block;
	float: left;
}

.pageMessage .glyphicon img,
.pageMessage .glyphicon svg {
	height:1.5em;
	width:1.5em;
}

.pageMessage .glyphicon img,
.pageMessage .glyphicon svg {
	height:1em;
	width:1em;
}

.pageMessage,
.pageMessage.info, 
.specialPageMessage.info {
	position: relative;
	background-color:#ffffff;
	border:3px solid #000000;
	border-radius:1px;
}

.pageMessage > .btnHelp {
	position: absolute;
	top: .8em;
	right: 1em;
}

.attention {
	background-color:#feefd9;
	display:table;
	margin:1.5em 0;
	width:100%;
}

.attention > div {
	display:table-cell;
	padding:1em;
	vertical-align:middle;
}

.attention > div.icon {
	background-color:#edae3a;
	width:2em;
}

.attention > div.icon span {
	background-color:#1b79a9;
	border:3px solid #ffffff;
	border-radius:50%;
	color:#ffffff;
	display:block;
	font-size:1.25em;
	font-weight:bold;
	line-height:1.25em;
	text-align:center;
	vertical-align:middle;
	
	height:1.75em;
	width:1.75em;
}

.scrollBox {
	background-color:#ffffff;
	border:1px solid #999999;
	height:15em;
	overflow:auto;
	padding:.5em 1em;
}

.omb {
	background-color:#ffffff;
	box-shadow:0 .1em .1em rgba(0, 0, 0, .15);
	border:1px solid #000000;
	color:#000000;
	float:right;
	font-size:.75em;
	font-stretch:semi-condensed;
	font-weight:bold;
	line-height:1em;
	margin:0 0 2em 2em;
	padding:.5em .5em 0 .5em;
}

.omb span {
	display:block;
	padding:0 0 .5em;
}

.or-separator {
	display:inline-block;
	width:2.4em;
	height:2.4em;
	border-radius:50%;
	-webkit-border-radius:50%;
	color:#ffffff;
	padding:.5em;
	margin-top:.2em;
	text-align:center;
}

/* --/\----------------
     End main content
   -------------------- */
   
/* --------------------------
     Form controls & inputs 
   --\/---------------------- */

	/* FAFSA tag layout display */

.febi-tag {
	clear:both;
	line-height: 1.5em;
	height:auto;
	opacity: 1;
	padding:0 0 1em 0;
}

gd-field-checkbox, 
gd-field-input-currency, 
gd-field-dropdown, 
gd-field-inputsecret, 
gd-field-inputtext-mask, 
gd-field-inputtext, 
gd-field-radio-group {
	border-width:0 !important;
	height:auto;
	position:relative;
	width:100%;
}
/*
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
*/
.febi-tag label,
.febi-tag .febi-label {
	display:table-cell;
	color:#444444;
	font-size:1em;
	font-weight:normal;
	padding:0 0 .3em 0;
	vertical-align:bottom;
	white-space:normal;
	width:100%;
}

.febi-tag .btnEditLink {
	display:table-cell;
	vertical-align:bottom;
	white-space:nowrap;
}

.febi-tag .btnEditLink a {
	padding:0 0 .3em 1em;
	vertical-align:text-bottom;
}

.febi-tag .btnHelp {
	display:table-cell;
	vertical-align:top;
}

.febi-tag label, 
.febi-tag .febi-label {
	color:#000000;
}

.febi-tag .labelText {
	margin:0 1em 0 0;
}

.febi-tag .labelMessage {
	font-weight:bold;
	white-space:nowrap;
}

.febi-tag input[type="text"],
.febi-tag input[type="password"],
.febi-tag input[type="textarea"],
.febi-tag input[type="tel"],
.febi-tag select,
select.form-control,
mat-autocomplete input[type="search"] {
	background:#ffffff;
	border-radius:2px;
	font-size:110%;
	height:2.5em; /* Define a height instead of padding inputs for IE dropdown arrows. Thanks again, MS... */
	line-height:1.5em;
	padding-left:.5em;
	transition-property:box-shadow, border;
	transition-timing-function:ease;
	transition-duration:1s;
	width:100%;
}

.febi-tag input[type="text"],
.febi-tag input[type="password"],
.febi-tag input[type="textarea"],
.febi-tag input[type="tel"],
mat-autocomplete input[type="search"] {
	padding:.5em; /* Really only need left/right padding due to height defined above, but all 4 just in case. */
}

.febi-tag input[type="text"]:focus,
.febi-tag input[type="password"]:focus,
.febi-tag input[type="textarea"]:focus,
.febi-tag input[type="tel"]:focus,
.febi-tag select:focus {
	transition-property:box-shadow, border;
	transition-timing-function:ease;
	transition-duration:.4s;
}

.list > .item select {
	direction:ltr;
	display:block;
	position:relative;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:100%;
	width:100%;
}

.febi-tag .input-group-addon {
	font-size:110%;
	height:2.5em;
	line-height:1.5em;
	padding:.5em 1em;
	width:auto;
}

		/* Input/button combination block (.inputBlock) */
		
		/* 	TODO: If we're NOT going to use <button> for the confirmWeb or virtual keyboard icons
			next to the various input fields, we can use display:table and table-cell instead
			of flexbox. Or we can use flexbox for the label/help layout; this is probably preferred, but
			bootstrap is using display:table with their input/input-addon combinations.
			Unsure if we'll be able to stick with <a> or not (as of 4/14/17), so using flexbox here to 
			accommodate the possibility of replacing those with <button>. */
		.febi-tag .inputBlock {
			display:inline-flex;
			width:100%;
		}
		
		.febi-tag .inputBlock > .input-group input {
			display:table-cell;
		}
		
		.febi-tag .inputBlock > .select,
		.febi-tag .inputBlock > .input-group {
			display:inline-flex;
			
			align-self: center;
			flex:2 1 100%;  /* This (or width) seems to be necessary for our dropdowns */
		}
		
		.febi-tag .inputBlock .assumed {
			font-size:1.5em;
			font-weight:bold;
			line-height:1em;
			padding:.25em .75em 0 0;
			
			align-self:center;
		}
		
		.febi-tag .inputBlock a.virtualKeyboard {
			align-self: center;
			text-align:center;
		
			height:2.75em;
			width:5.5em;
		}
		
		.febi-tag .inputBlock a.virtualKeyboard img,
		.febi-tag .inputBlock a.virtualKeyboard svg {
			align-self:center;
			margin:0 0 0 .25em;
			transition-property:width;
			transition-timing-function:ease;
			transition-duration:.25s;
			
			width:3.75em;
		}
		
		.febi-tag .inputBlock a.virtualKeyboard svg,
		.febi-tag .inputBlock a.virtualKeyboard rect {
			fill:transparent;
		}
		
		.febi-tag .inputBlock a.virtualKeyboard svg path {
			transition-property:fill;
			transition-timing-function:ease;
			transition-duration:.25s;
		}
		
		.febi-tag .inputBlock .gd-custom-input-addon {
			align-self: center;
			border-radius:0 2px 2px 0;
			border-width:1px;
			box-shadow:none;
			margin:0 0 0 -2px; /* Offset the global input border radius */
			padding:.1em 1em;
			
			height:2.5em;
			flex:1 1;
		}
		
		.febi-tag .inputBlock a.gd-custom-input-addon.hover:before,
		.febi-tag .inputBlock a.gd-custom-input-addon:focus:before {
			border-color:transparent;
			
			top:0;
			right:0;
			bottom:0;
			left:0;
		}
		
		/* End input/button combination block (.inputBlock) */

	/* End FAFSA tag layout display */

	/* FAFSA tag hide/show animations */

.febi-tag,
.febi-tag.ng-hide,
.febi-tag.ng-animate,
.febi-tag.animate-show {
	-webkit-transition: all linear .4s;
	transition-duration:.4s;
	transition-property:line-height, height, opacity, padding;
	transition-timing-function:linear;
}

.febi-tag.ng-hide {
	height:0;
	opacity: 0;
	padding:0;
}

	/* End FAFSA tag hide/show animations */

	/* Tag error display */

.febi-tag.error input[type="radio"],
.febi-tag.error input[type="checkbox"] {
	box-shadow:none;
}

.febi-tag.error input:focus,
.febi-tag.error select:focus,
.item.error input:focus,
.item.error select:focus {
	background-color:#ffffff;
}

	/* End tag error display */
	
	/* Tag disabled state */
	
.disabled {
  cursor: not-allowed;
}

.disabled:hover {
	text-decoration:none;
}

.febi .febi-tag.disabled .btnHelp a {
	opacity:.4;
}

.febi .febi-tag.disabled .btnHelp a:hover,
.febi .febi-tag.disabled .btnHelp a:focus {
	box-shadow:none;
	cursor:not-allowed;
}

.febi .febi-tag.disabled .form-control,
.febi .febi-tag.disabled select,
.febi .febi-tag.disabled-remove .form-control,
.febi .febi-tag.disabled-remove select {
	border-color:#bbbbbb;
	box-shadow:none;
	cursor:not-allowed;
}

.febi .febi-tag .btnHelp a,
.febi .febi-tag .form-control,
.febi .febi-tag select,
.febi .febi-tag label,
.febi .febi-tag > p,
.febi .febi-tag.disabled label,
.febi .febi-tag.disabled > p,
.febi .febi-tag.disabled-remove .form-control,
.febi .febi-tag.disabled-remove select,
.febi .febi-tag.disabled-remove.ng-animate {
	transition-duration:.25s !important;
	transition-property:background-color, color, opacity;
	transition-timing-function:ease;
}
	
	/* End tag disabled state */
	
	/* Angular Material - auto complete */
	
.febi .febi-tag mat-autocomplete,
.febi .febi-tag mat-autocomplete mat-autocomplete-wrap {
	background-color:transparent;
	box-shadow:none;
	height:auto;
}

.febi mat-autocomplete input[type="search"] {
	line-height:inherit;
	padding-right:35px;
}

.febi mat-autocomplete button {
	position: absolute;
	right: 0;
	top: 50%;
	margin: -15px 0 0 0;
}

.febi mat-virtual-repeat-container {
	background-color:#ffffff;
	border:1px solid #999999;
	border-top:none;
}

.febi ul.mat-autocomplete-suggestions li {
	border-bottom:1px solid #cccccc;
	height:auto;
	padding:.5em .75em;
}

.febi ul.mat-autocomplete-suggestions li:last-of-type {
	border:none;
}

.febi ul.mat-autocomplete-suggestions li span,
.febi ul.mat-autocomplete-suggestions li div {
	line-height:1.2em;
}

.febi ul.mat-autocomplete-suggestions li .item-title,
.febi ul.mat-autocomplete-suggestions li .item-metadata {
	padding-left:1.5em;
}

.febi ul.mat-autocomplete-suggestions li .material-icons {
	font-size:1.25em;
	margin:0 .25em 0 -1.5em;
	vertical-align:middle;
	height:1em;
	width:1em;
}

.febi fieldset, .febi .faux-fieldset {
	margin:1em 0 1em 0;	
}

.febi fieldset .fieldset-legend, 
.febi .faux-fieldset .fieldset-legend {
	color:#ffffff;
    font-size:1.4em;
    margin-bottom:0;
    padding:.4em 1em .5em 1em;
    font-family:'News Cycle', arial, tahoma, myriad, verdana, sans-serif;
    font-weight:bold;
}

.febi fieldset .fieldset-legend .glyphicon, 
.febi .faux-fieldset .fieldset-legend .glyphicon {
	padding-right: .5em;
}

.febi fieldset .fieldset-fields, 
.febi .faux-fieldset .fieldset-fields,
.febi .faux-fieldset .fieldset-info {
	background-color:#ffffff;
    border:1px solid #cccccc;
    border-top:none;
    padding:1em;
}

.febi .faux-fieldset .fieldset-info {
	border-bottom:none;
	padding-bottom:0;
}

.febi .faux-fieldset .fieldset-info p {
	margin:0;
	padding:0 0 .5em 0;
}

	
	/* End Angular Material - auto complete */
	
.inputLink {
	display:inline-block;
	margin:.25em 0 1em 0;
}

/* --/\--------------------------
     End form controls & inputs 
   ------------------------------*/


/* --------------------
     Info message box
   --\/---------------- */

gd-info-box {
	display:block;
	width:100%; /* For FF */
}

.infoMessage {
	background:#ffffff;
	border:2px solid #bc0000;
	border-radius:.2em;
	box-shadow:0 .1em .1em rgba(0, 0, 0, .1);
	color:#bc0000;
	display:block;
	margin:0 0 .75em 0;
	padding:1em 1.5em 1em 1.2em;
	position:relative;
}

/* Info message text box pointer */
	
	.infoMessage:after {
		background:#ffffff;
		background: linear-gradient(135deg, transparent 45%, #ffffff 45%);
		border:2px solid #bc0000;
		border-top:1px solid transparent;
		border-left:1px solid transparent;
		box-shadow:.1em .1em .1em rgba(0, 0, 0, .1);
		content:"";
		bottom:-.55em;
		left:1.5em;
		position:absolute;
		-moz-transform:rotate(50.5deg) skew(10deg);
		-webkit-transform:rotate(50.5deg) skew(10deg);
		transform:rotate(50.5deg) skew(10deg);
		height:1em;
		width:1em;
	}

/* End info message text box pointer */

.infoMessage [id$="InfoGraphic"] {
	display:inline-block;
	float:left;
	margin:0 0 0 0;
	position:absolute;
	z-index:10; 
	height:1.5em;
	width:1.5em;
}

.infoMessage [id$="InfoText"] {
	padding:0 0 0 2.5em;
}

.infoMessage .btn,
.infoMessage .btn:focus,
.infoMessage .btn:hover,
.infoMessage .btn:active,
.infoMessage .btn:active:focus,
.infoMessage .btn:visited {
	border:1px solid #bc0000;
	background-color:#ffffff;
	color:#bc0000;
	display:table;
	margin:0 auto;
	position:relative;
	text-shadow:none;
}

.infoMessage .btn.ui-focus,
.infoMessage .btn.hover {
	border:1px solid #820000;
	box-shadow:0 0 .5em rgba(130, 0, 0, .5);
	background-color:rgba(255, 204, 204, .25);
	color:#820000;
	text-shadow:none;
}

/* --/\--------------------
     End info message box
   ------------------------ */

/* -----------
     Buttons 
   --\/------- */
   
.btn,
.btnHelp > a,
a.btnHelp {
	border:2px solid transparent;
	border-radius:1px;
	box-shadow:0 .1em .1em rgba(0, 0, 0, .15);
	font-size:1.1em;
	font-weight:normal;
	line-height:2em;
	margin:0 0 .75em 0;
	outline:none;
	overflow:visible;
	padding:.6em .75em .6em .75em;
	position:relative;
	text-align:center;
	text-decoration:none;
	text-shadow:none;
	text-transform:uppercase;
	transition:all .25s ease-in-out;
	transition-property:background-color, border, box-shadow, color;
	vertical-align:bottom;
	white-space:normal;
	width:100%;
	
	justify-content:center;
}

.btn > div {
	/* 	Flexbox will not work directly on the <button> element in mobile Firefox, so we have to add an emtpy <div> 
		to wrap all content containing any glyph icon inside of the <button> tag. */
	display:flex;
    flex-direction:row;
    justify-content:center;
}

.btnHelp {
	display:inline-block;
	padding:0 0 .3em 0;
	vertical-align:top;
	width:auto;
}

a.btnHelp,
.btnHelp > a {
	border-radius:50%;
	display:inline-block;
	font-size:1.2em;
	line-height:1.2em;
	margin:0 0 0 1em;
	outline:none;
	padding:0;
	height:1.5em;
	width:1.5em;
}

.btn:before,
a.btnHelp:before,
.btnHelp > a:before {
	border: 3px solid transparent;
    border-radius: 1px;
    content: "";
    position: absolute;
    transition: all .25s ease-in-out;
    transition-property: border, top, right, bottom, left;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.btn.hover:before,
.btn.ui-focus:before,
.btnHelp.hover:before,
.btnHelp.ui-focus:before,
.btnHelp > a.hover:before,
.btnHelp > a.ui-focus:before {
	top:-4px;
	right:-4px;
	bottom:-4px;
	left:-4px;
}

header #titleSearch.form-group .btn.hover:before,
header #titleSearch.form-group .btn.ui-focus:before {
	border-top-right-radius:2px;
	border-bottom-right-radius:2px;
	border:2px solid transparent;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

.btnHelp:before,
.btnHelp > a:before,
.btnHelp.hover:before,
.btnHelp.ui-focus:before,
.btnHelp > a.hover:before,
.btnHelp > a.ui-focus:before {
	border-radius:50%;
}

.btn.hover, 
.btn.off.hover,
.btn.ui-focus,
.btn.off.ui-focus,
.btnHelp.hover,
.btnHelp.ui-focus,
.btnHelp > a.hover,
.btnHelp > a.ui-focus {
	color:#ffffff;
	cursor:pointer;
}

.btn span {
	width:auto;
	
	flex:0 1 auto;
}

.btn.iconRight .glyphicon {
	display:inline-block;
	font-size:1em;
	height:1em;
	margin:0 0 0 .5em;
	
	order:2;
}

/* Removing browser focus glow on febi styled buttons */
.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus,
.btnHelp:hover,
.btnHelp:focus,
.btnHelp:active,
.btnHelp:active:focus,
.btnHelp > a:hover,
.btnHelp > a:focus,
.btnHelp > a:active,
.btnHelp > a:active:focus {
	box-shadow:none;
	outline:none;
}

/* Icon-only buttons */

.btn.icon,
.btn.icon:hover,
.btn.icon:focus,
.btn.icon:active {
	border:2px solid #ffffff;
	border-radius:50%;
	box-shadow:0 .1em .1em rgba(0, 0, 0, .05), inset 0 1px 0 rgba(0, 0, 0, .75);
	font-size:1.2em;
	opacity:1;
	outline:none;
	padding:0;
	position:relative;
	height:1.25em;
	width:1.25em;
}

.febi .btn.closeIconBtn,
.febi .btn.closeIconBtn:active {
	background-color:#ffffff;
	border:2px solid #000000;
	border-radius:.6em;
	color:#000000;
	cursor:pointer;
	font-size:1.5em;
	font-weight:bold;
	line-height:.9em;
	padding:0 !important;
	position:absolute;
	text-align:center;
	transition-duration:.3s;
	transition-property:border, background-color, color;
	transition-timing-function:ease;
	vertical-align:middle;
	z-index:100;
	
	display:flex;
	align-items:center;
	top:.25em;
	left:-.66em;
	height:1.2em !important;
	width:1.2em !important;
}

.febi .btn.closeIconBtn:before {
	border-radius:50%;
}

.febi .btn.closeIconBtn svg {
	height:.6em;
	width:.6em;
	display:inline-block;
}

.febi .btn.closeIconBtn svg path,
.febi .btn.closeIconBtn:hover svg path,
.febi .btn.closeIconBtn:focus svg path {
	fill:#000000;
	transition:fill .3s ease;
}

.febi .btn.closeIconBtn.hover:hover svg path,
.febi .btn.closeIconBtn.ui-focus:focus svg path,
.febi .btn.closeIconBtn:active svg path {
	fill: #ffffff;
}

/* End icon-only buttons */

/* Button group */

.btnBlock {
	clear:both;
	display:block;
	padding:.75em 0 0 0;
	text-align:right;
	overflow:hidden;
}

.btnBlock.textCenter {
	text-align:center;
}

ul.btnBlock {
	display:flex;
	flex-direction:row;
 	justify-content:space-between;
 	flex-wrap:wrap-reverse;
}

ul.btnBlock li {
	display:inline-flex;
	width:100%;
}

ul.btnBlock li.previous,
ul.btnBlock li.next {
	width:auto;
	flex:1 1 auto;
}

ul.btnBlock li.previous {
	order:1;
	margin-right:1em;
}

ul.btnBlock li.next {
	order:2;
}

ul.btnBlock li.search {
	order:3;
}

ul.btnBlock.alignment1 {
	flex-wrap: wrap;
}

ul.btnBlock.alignment1 li {
	width: auto;
}

ul.btnBlock li.search {
	margin: 0 0 1em 0;
	width: 100%;
	
	display: flex;
	justify-content: center;
	order: 1;
}

/* End button group */

/* Button group as single entity */
.btn-group .btn,
.btn-group .btn.hover,
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active {
	margin-right:0;
}

.btn.floating-btn, 
.btn.floating-btn:active,
.btn.floating-btn:hover,
.btn.floating-btn:focus,
.btn.floating-btn:active:focus {
	margin:1.75em 0 0 0;
}

/* End button group as single entity */

.btnHelpDisplayRight {
	display: block;
	text-align: right;
}
/* --/\-----------
     End buttons 
   --------------- */
   
/* -------------------
     Modal popup box
   --\/--------------- */
   
ngb-modal-window {
	display:table !important;
	height:100%;
	width:100%;
}

ngb-modal-window .modal-dialog {
	display:table-cell;
	vertical-align:middle;
}

ngb-modal-window .modal-body {
	text-align:center;
}

ngb-modal-window .modal-content {
	max-width:30em;
	width:50%;
}

.modal-header .close,
.modal-header .close.ui-focus,
.modal-header .close.hover {
	margin:-.75em -1.25em 0 0;
}

.modal-title img,
.modal-title svg {
	border-radius:50%;
	box-shadow:0 .2em .25em rgba(0, 0, 0, .05);
	margin:0 .5em 0 0;
	vertical-align:top;
	height:1.25em;
	width:1.25em;
}

.popup-processing .modal-body img,
.popup-processing .modal-body svg {
	margin:.5em 0 0 0;
	height:1.25em;
	width:1.25em;
}

.modal .modal-body .btn,
.modal .modal-body .btn:hover,
.modal .modal-body .btn:focus,
.modal .modal-body .btn:active {
	margin: 1em .5em 1em .5em;
}
     
/* --/\-------------------
     End modal popup box
   ----------------------- */


/* ----------------
     Help & hints  
   --\/------------ */
   
form.helpHintOpen {
	height:100%;
	overflow:hidden;
}

mat-sidenav-container .mat-sidenav-backdrop {
	display:none;
}
mat-sidenav-container .helpHintClosedClass {
	display:none;
}

mat-sidenav-container .helpHintOpenedClass {
	display:block;
	background-color:rgba(0, 0, 0, .4);
	z-index:90;
}

mat-sidenav-container .helpHintClosingClass {
	display:block;
	background-color:rgba(0, 0, 0, .4);
}

#helpContentContainer .helpMain {
	background-color:#ffffff;
	padding: 1em 2em;
}

mat-sidenav-container mat-sidenav {
	width:80%;
	z-index:100;
}

cmn-help-and-hint mat-sidenav {
	padding:0 !important;
	text-align:center;
}

cmn-help-and-hint mat-sidenav .mat-sidenav-focus-trap > .cdk-focus-trap-content {
	overflow:visible !important;
}

cmn-help-and-hint mat-sidenav mat-toolbar {
	min-height:auto !important;
}

cmn-help-and-hint mat-sidenav mat-toolbar mat-toolbar-row {
	height:auto !important;
}

cmn-help-and-hint mat-sidenav mat-toolbar h1 {
	display:block;
	font-size:2em;
	padding:.5em;
	text-align:center;
	width:100%;
}

cmn-help-and-hint mat-sidenav .helpMain {
	overflow-x:visible;
	overflow-y:auto;
	padding:1em 1.5em !important;
}

cmn-help-and-hint mat-sidenav > div {
	padding:0 !important;
}

cmn-help-and-hint table {
	margin: 0 0 1em 0;
	text-align:left;
}

cmn-help-and-hint td, 
cmn-help-and-hint th {
	padding: .25em;
}

cmn-help-and-hint h2 {
	font-size:1.5em;
	line-height:1.5em;
	margin:0 0 .75em 0;
}

cmn-help-and-hint p {
	margin:0 0 1em 0;
	text-align:left;
}

cmn-help-and-hint .preList {
	margin:0 0 .5em 0;
}

cmn-help-and-hint ul {
	margin:0;
	padding:0 0 .5em 1.5em;
}

cmn-help-and-hint ul li {
	list-style-type:disc;
	margin:0 0 .5em .25em;
	text-align:left;
}

cmn-help-and-hint ol {
	margin:0;
	padding:0 0 .5em 1.5em;
}

cmn-help-and-hint ol li {
	padding:0 0 .5em .25em;
	text-align:left;
}

cmn-help-and-hint .btnBlock,
cmn-help-and-hint .btnBlock > div:last-of-type {
	text-align:center;
}

cmn-help-and-hint .btn,
cmn-help-and-hint .btn:hover,
cmn-help-and-hint .btn:focus {
	margin-bottom:.5em;
}

cmn-help-and-hint .noBr {
	white-space: nowrap;
}

cmn-help-and-hint table.helpTableTypeB th,
cmn-help-and-hint table.helpTableTypeB td {
	padding:.25em;
}

/* --/\----------------
     End help & hints  
   -------------------- */
   
   
/* ---------------------
     Angular Overrides
   --\/----------------- */
   
.mat-tab-body-wrapper,
.mat-tab-body {
	overflow:visible !important;
}
   
/* --/\---------------------
     End angular Overrides
   ------------------------- */
   
   
/* ------------------------------------
     Page-specific styles & overrides
   --\/-------------------------------- */

/* Landing page */

.landing .sizingContainer,
.student-landing .sizingContainer {
	background-color:transparent;
	border:none;
	box-shadow:none;
}

.landing .febiPage,
.student-landing .febiPage {
	background-color:transparent;
	border:none;
	margin:0;
	padding:0;
}

.landing .content,
.student-landing .content {
	background-color:#ffffff;
	border:1px solid #bbbbbb;
	box-shadow:0 .1em .2em rgba(0, 0, 0, .1);
	padding:0;
}

.landing .row,
.student-landing .landing .row {
	margin:0;
}

.landing .btnBlock,
.sessiontimeout .btnBlock,
.student-landing .btnBlock {
	text-align:center;
}

.landing #footer,
.student-landing #footer {
	background-color:#ffffff;
	margin:0 7px 1em 7px;
	padding:1em;
}
gd-field-concealed-ssn .showSsnCheckboxContainer {
	display:flex;
	align-items:center;
	margin:.5em 0 .5em 0;
}

gd-field-concealed-ssn .showSsnCheckboxContainer input[type='checkbox'],
gd-field-concealed-ssn .showSsnCheckboxContainer label {
	display:inline;
	margin:0 .5em 0 0;
	padding:0;
}

	/* Landing page applies different styles to page container elements; this section
		corrects some layout bugs that occur when animating the transition to/from landing page */
	
	.login-remove.ng-animate,
	.landing-remove.ng-animate {
		transition-property:background-color, border, padding;
		transition-duration:.4s;
		transition-timing-function:ease;
	}
	
	.landing-add .febiPage,
	.landing-add .febiPage.ng-leave,
	.student-landing-add .febiPage,
	.student-landing-add .febiPage.ng-leave,
	.login-remove .febiPage.ng-leave {
		background-color:#f5f9f9;
		border:1px solid #cccccc;
		padding:2em 2.5em;
	}
	
	.landing-remove .febiPage.ng-leave {
		background-color:transparent;
	}
	
	.landing-remove .febiPage.hide-remove {
		background-color:#f5f9f9;
	}

	/* End landing page transition fixes */
	
	/* Student Landing */
	
	.student-landing h2 {
		font-size:1.75em;
		padding:1em 1em .5em 23px; /* 23px is total default content left-indent via angular */
	}
	
	#transaction-history-container {
		margin-top: 2em;
	}
	
	.secondary-cta-container {
		border:1px solid #cccccc;
		background-color:#ffffff;
	}
	
	.secondary-cta-header {
		background-color:#E8E8E8;
		border-bottom:1px solid #cccccc;
		display:flex;
		flex-direction:column;
		padding:.75em 1em .2em 1em;
		font-size: 1.2em;
	}
	
	.secondary-cta-content.row {
		padding:1em 1em 0 1em;
	}
	
	.secondary-cta-col.col-sm-6 {
		padding-left: 0;
	}
	
	.secondary-cta-content-inner {
		padding: 1em;
	}
	
	/* End student landing */
	
	/* Data transfer */
	
	.data-transfer-main-container .gdCardRow .gdCard {
		padding:0 !important;
	}

/* End landing page */

/* HTML SAR page */
#htmlSarView .sarHeadingContainer {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	height:100%;
}
#htmlSarView .sarHeadingContainer .sarColOne {
	width:40%;
	min-width:200px;
	align-items:center;
	margin:2em 0 2em 0;
}

#htmlSarView .sarHeadingContainer .sarColOne svg {
	width:100%;
	height:auto;
	max-height:50px;
}

#htmlSarView .sarHeadingContainer .sarColTwo {
	display:flex;
	flex-grow:1;
	align-items:center;
	margin:2em 0 2em 0;
	padding:0 0 0 1em;
}

#htmlSarView table#sarAppInfoTable {
	border:1px solid;
}

#htmlSarView table#sarAppInfoTable tr,
#htmlSarView table#sarAppInfoTable tr td {
	border:none;
}

#htmlSarView table#sarAppInfoTable tr td {
	padding:.2em 1em .2em 1em;
}

#htmlSarView highlight {
	line-height:0;
}

#htmlSarView highlight span.highlightH {
	height:1.2em;
    width:1.2em;
    color:#ffffff;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
}

#htmlSarView highlight span.highlightH em {
	margin:0 auto 0 auto;
	font-size:.8em;
	display:inline-block;
}

#htmlSarView table caption {
	color: #ffffff;
	border: 1px solid rgba(0,0,0,0.8);
	border-bottom: 1px solid #ffffff;
	padding: .5em;
}

#htmlSarView table th,
#htmlSarView table td {
	word-break:break-word;
	width: 20%;
}

#htmlSarView table thead th,
#htmlSarView table tbody th {
	color:#ffffff;
	padding: .5em;
}

#htmlSarView table tbody th.rowHeader {
	background-color:#ffffff !important;
	color:#333333;
}

#htmlSarView table thead th:first-child,
#htmlSarView table tbody th {
	border-left:1px solid rgba(0,0,0,0.8);
}

#htmlSarView table thead tr {
	border-bottom:1px solid #ffffff;
}

/* End HTML SAR page */

/* Selected schools */
	
#noCollegesArea {
	display:flex;
	flex-direction:column;
	padding:1em .5em 2em .5em;
}

#noCollegesArea img {
	align-self: center;
	margin:0 0 2em 0;
	opacity:.5;
	height:8.5em;
	width:8.5em;
}

#noCollegesArea > svg {
	align-self:center;
	flex:2 1 auto;
	
	-webkit-filter: drop-shadow(1px, 1px, 1px #666666);
	filter: drop-shadow(1px, 1px, 1px #666666);
	margin:0 0 2em 0;
	opacity:.5;
	max-width:50%;
}

#noCollegesArea p {
	flex:0 1 auto;
}

.schoolsinfo .febiPage {
	background-color:transparent;
	backface-visibility:hidden;
	border:none;
	padding:0;
}

/* End selected schools */

/* Student dependency */

.studentDependencyHeader {
	display:inline-block;
	width:100%;
}

.studentDependencyHeader > span {
	color:#ffffff;
	padding:1%; 
	width:20%;
}


.studentDependencyHeader > div {
	padding:2px;
}

/* End student dependency */

/* Parent Demographics */

#parents_numOfChildrenContainer label{
	font-weight: normal;
}

/* End Parent Demographics */

/* Contacting IRS */

.contactingIRS {
	padding:1em .5em 2em .5em;
	text-align:center;
}

.irsMdProgressWrapper {
	display:inline-block;
	margin:0 auto 2em auto;
	position:relative;
	width:auto;
	zoom:1;
}

/*
.irsMdProgress:before,
.irsMdProgress:after {
	border:5px solid #07a791;
	border-radius:50%;
	content:"";
	opacity:.3;
	position:absolute;
	
	top:5px;
	left:5px;
	height:calc(10em - 10px);
	width:calc(10em - 10px);
}

.irsMdProgress:after {
	background-color:#ffffff;
	border:none;
	opacity:1;
	z-index:1;
}
*/

.irsMdProgress:before {
	border:5px solid #07a791;
	border-radius:50%;
	content:"";
	opacity:.25;
	position:absolute;
	
	top:5px;
	left:5px;
	height:calc(10em - 10px);
	width:calc(10em - 10px);
}

.irsMdProgressWrapper > mat-progress-circular {
	position:absolute;
	top:0;
	left:0;
}

.irsMdProgressWrapper > svg {
	opacity:.75;
	padding:5px; 
	
	height:10em !important;
	width:10em !important;
}

.irsMdProgress,
.irsMdProgress svg {
	height:10em !important;
	width:10em !important;
}

.irsMdProgress svg path {
	opacity:1;
	stroke:#07a791;
	stroke-width:2px !important;
}

/* End contacting IRS */

/* Finance Pages */
#irsDrtCtaContainer .btnBlock,
#irsEligibleContainer .btnBlock {
	text-align:center;
}

.irsDrtIcon {
	display:inline-block;
	line-height:1.4em;
	margin: 0 .2em 0 0;
	vertical-align:text-top;
	width:1.4em;
}

.irsDrtIcon img,
.irsDrtIcon svg {
	width:1.4em;
	height:1.4em;
}

.irs-logo-graphic-container {
	text-align:center;
}

.irs-logo-graphic-container img,
.irs-logo-graphic-container svg,
.scorecard-logo-graphic-container img,
.scorecard-logo-graphic-container svg,
.school-info-header-college-icon img,
.school-info-header-college-icon svg {
	width:100%;
	min-width:3em;
	height:auto;
}

/* End Finance Pages */

/* --/\------------------------------------
     End page-specific styles & overrides
   ---------------------------------------- */

/* -------------
     TEST CODE
   --\/--------- */
   
.testMe {
	background-color:#cc99ff !important;
	border:5px solid #00cc00 !important;
	color:#0000cc !important;
	font-weight:bold;
}

/* --/\-------------
     END TEST CODE
   ----------------- */
.schoolCompare1 .schoolCompareRow {
	display: inline-flex;
	width: 100%;
}
   
.schoolCompare1 .schoolCompareHeader {
	font-size: 10px;
	font-weight: bold;
	width: 50%;
}

.schoolCompare1 .schoolCompareData {
	font-size: 10px;
	width: 50%;
}

.schoolCompare2 .schoolCompareRow {
	display: inline-flex;
	width: 100%;
}
   
.schoolCompare2 .schoolCompareHeader {
	font-size: 10px;
	font-weight: bold;
	width: 33%;
}

.schoolCompare2 .schoolCompareData {
	font-size: 10px;
	width: 33%;
}

.schoolCompare3 .schoolCompareRow {
	display: inline-flex;
	width: 100%;
}
   
.schoolCompare3 .schoolCompareHeader {
	font-size: 10px;
	font-weight: bold;
	width: 25%;
}

.schoolCompare3 .schoolCompareData {
	font-size: 10px;
	width: 25%;
}

.schoolCompare4 .schoolCompareRow {
	display: inline-flex;
	width: 100%;
}
   
.schoolCompare4 .schoolCompareHeader {
	font-size: 10px;
	font-weight: bold;
	width: 20%;
}

.schoolCompare4 .schoolCompareData {
	font-size: 10px;
	width: 20%;
}

.schoolCompare5 .schoolCompareRow {
	display: inline-flex;
	width: 100%;
}
   
.schoolCompare5 .schoolCompareHeader {
	font-size: 10px;
	font-weight: bold;
	width: 16%;
}

.schoolCompare5 .schoolCompareData {
	font-size: 10px;
	width: 16%;
}

[hidden] {
  display: none !important;
}

a.disabled {
    color: gray;
    cursor: not-allowed;
    text-decoration: underline;
}