/* Extra small devices (phones, less than 400px) */
@media screen and (max-width: 400px) {
	body {
		font-size:1em;
	}
	
	h1.pageTitle {
		text-align:center;
		font-size:1.4em;
	}
	
	.febiPageInner {
		padding:1em 1.5em;
	}
	
	.progList li.inProgress a {
		padding:.2em;
	}
	
	header .col-sm-6.search-container {
		width:60%;
		float:left;
		padding: 0 0 0 2em;
	}
	
	header .navbar-header {
		width:40%;
		float:left;
		padding:0 1em 0 0!important;
	}
	
	header cmn-search .form-group {
		padding: 0 0 .5em 0!important;
	}
	
	ngb-modal-window .modal-content {
		max-width:60em;
		width:80%;
	}
	
	ngb-modal-window .modal-title img,
	ngb-modal-window .modal-title svg {
		height:.8em;
		width:.8em;
		margin:.3em .5em 0 0; 
	}
	
	ngb-modal-window h1.modal-title {
		font-size:.8em;
	}
	
	.school-selection-1 ul.btnBlock li.search.schoolSelected {
		margin-right: 0;
	}
	
	.scorecard-logo-graphic-container {
		width: 50%;
    	margin: 0 auto 1em auto;
	}
	
	.febi-tag .btnHelp {
		vertical-align:top;
	}
	
	cmn-dynamic-hyperlink .dynamic-hyperlink-field-label,
	cmn-dynamic-hyperlink .dynamic-hyperlink-field-value {
		padding:.5em;
		text-align:left;
	}
}

/* Mid-size mobile devices (tablets, large phones) */

@media screen and (min-width: 401px) and (max-width: 767px) {
	body {
		font-size:1.2em;
	}
	
	h1.pageTitle {
		text-align:center;
		font-size:1.4em;
	}
	
	.content {
		padding:1em 1.5em 2em 1.5em;
	}
	
	.febiPageInner {
		padding:1em 1.5em;
	}
	
	.progList li.inProgress a {
		padding:.2em;
	}

	header .col-sm-6.search-container {
		width:60%;
		float:left;
		padding: 0 0 0 2em;
	}
	
	header .navbar-header {
		width:40%;
		float:left;
		padding:0 2em 0 0!important;
	}
	
	header cmn-search .form-group {
		padding: 0 0 .5em 0!important;
	}
	
	ngb-modal-window .modal-content {
		max-width:60em;
		width:80%;
	}
	
	ngb-modal-window .modal-title img,
	ngb-modal-window .modal-title svg {
		height:.8em;
		width:.8em;
		margin:.3em .5em 0 0;
	}
	
	ngb-modal-window h1.modal-title {
		font-size:.8em;
	}
	
	ul.schoolList {
		font-size:.9em;
	}
	
	.school-selection-1 ul.btnBlock li.search.schoolSelected {
		margin-right: 0;
	}
	
	.scorecard-logo-graphic-container {
		width: 50%;
    	margin: 0 auto 1em auto;
	}
	
	.febi-tag .btnHelp {
		vertical-align:top;
	}
}

/* End mid-size mobile devices (tablets, large phones) */

/* Mid-large size mobile devices and up (tablets, large phones) */

@media screen and (min-width: 550px) {
	
	.mobileFlexWrap {
		flex-wrap:nowrap;
	}
	
	.mobileFlexWrap .btn.floating-btn, 
	.mobileFlexWrap .btn.floating-btn:active,
	.mobileFlexWrap .btn.floating-btn:hover,
	.mobileFlexWrap .btn.floating-btn:focus,
	.mobileFlexWrap .btn.floating-btn:active:focus {
		margin:0 0 0 1em;
	}
	
	/* -----------------------------
	     Section: School Selection
	   --\/------------------------- */
	
	div.schoolSummaryContentInfo .schoolInfo {
		display:table;
	}
	
	div.schoolSummaryContentInfo .schoolInfo > span {
		display:table-cell;
	}
	
	div.schoolSummaryContentInfo .schoolInfo > span:first-of-type {
		min-width:12em;
		padding:0 .5em .25em 0;	
	}
	
	/* --/\-----------------------------
	     End section: School Selection
	   --------------------------------- */
	
	/* -------------------------
	     Sign & Submit section
	   --\/--------------------- */
	
	div .sigInfo {
		flex-direction:row;
	}
	
	div .sigInfo > p {
		padding:.5em 1em .5em 0;
		
		flex:2 1 50%;
	}
	
	/* --/\-------------------------
	     End sign & Submit section
	   ----------------------------- */
	
}

/* End mid-large size mobile devices and up (tablets, large phones) */

/* Larger mobile tablets, 768px and up */
@media screen and (min-width: 768px) {
	
	body {
		font-size:1.1em; /* Default global font size to 12px */
	}
	
	/* -------------------
	     Section: Header 
	   --\/--------------- */
	
	header gd-locale-select > div {
		padding:.5em 1em .2em 1em;
	}
	
	header cmn-search {
		display:block;
		margin-top:.4em;
	}
	
	header .navbar-collapse #titleSearch {
		box-sizing:border-box;
		padding:1.25em .5em .5em .5em;
		vertical-align:middle;
	}
	
	header #logo {
		border:none;
		box-sizing:border-box;
		display:inline-block;
		max-width:30em;
		padding:1em;
		width:55%;
	}
	
	header #logo .fsaLogo {
		padding:0;
	}
	
	header .fafsaTitle {
		border:none;
		float:right;
		font-size:2em;
		padding-left:0;
		padding-right:.75em;
		text-align:right;
		width:45%;
		max-width:20em;
	}
	
	header cmn-search .form-group {
		padding:.5em 1em .5em 1em;
		text-align:right;
	}
	
	header #titleSearch.form-group.has-feedback-left .glyphicon {
		top:0;
	}
	
	header #titleSearch.form-group .btn {
		width:auto;
	}
	
	header #skipLink:focus {
		font-size:1em;
		right:-7em;
	}
	
	.navbar {
		border-radius:0;
	}
	
	.navbar .navMenu {
		width:85%;
    	max-width:65em;
    	margin:0 auto 0 auto;
	}
	
	.navbar .navbar-nav {
		display:table;
		text-align:center;
	}
	
	.navbar ul.navbar-nav.gdNav > li {
		border-bottom:none;
		display:table-cell;
		vertical-align:top;
		height:100%;
		width:19%;
	}
	
	.navbar ul.navbar-nav.gdNav > li.appSummary {
		width:24%;
	}
	
	.navbar ul.navbar-nav.gdNav > li:first-child a {
		border-left:1px solid #999999;
	}
	
	.navbar ul.navbar-nav > li.progMenuBtn {
		display:none;
	}
	
	.navbar ul.navbar-nav.gdNav > li > a {
		border-right:1px solid #999999;
		display:table;
		height:100%;
		padding:.5em .5em;
		text-align:center;
	}
	
	/* --/\-------------------
	     End section: Header 
	   ----------------------- */
	   
	h1.pageTitle span.left {
		float:left;
	}
	
	h1.pageTitle span.right {
		float:right;
	}
	   
	cmn-help-and-hint mat-sidenav {
		width:25em;
	}
	   
	.sizingContainer {
		box-shadow:0 .1em .2em rgba(0, 0, 0, .1);
		margin:0 auto 5em auto;
		padding:0;
		width:85%;
		max-width:65em;
	}
	
	.landing-add .content,
	.student-landing-add .content,
	.content {
		padding:2em 2.5em;
	}
	
	.febiPageInner {
		padding:1.5em 2.5em;
	}
	
	.landing .userSection,
	.student-landing .userSection {
		margin:0 0 1em 0;
	}
	
	.schoolListComponent .schoolListHeader {
		border-bottom-color:inherit;
	}
	
	.gdCardRow {
		margin:0;
		
		flex-direction:row;
	}
	
	.gdCardRow .gdCard,
	.gdCardRow .gdCard:last-of-type,
	.gdCardRow .or-separator {
		margin:0 1em 1.5em 0;
		padding:1em 1.5em;
	}
	
	.gdCardRow .gdCard:last-of-type {
		margin-right:0;
	}
	
	.gdCardRow .or-separator {
		display:flex;
		padding:1em;
		
		align-self:center;
		align-items:center;
		justify-content:center;
	}
	
	.gdCardRow .gdCard .btn,
	.gdCardRow .gdCard .btnWrapper {
		margin:auto 0 0 0;
		width:100%;
	}
	
	ul.schoolList {
		font-size:1em;
		max-height:24em;
		overflow:auto;
	}
	
	.school-selection-2-school-list .schoolList .school .section2 {
		padding:1em 1.5em;
	}
	
	ngb-pagination {
		font-size:1.2em;
	}
	
	ngb-accordion .card-header a {
		font-size:1.5em;
	}
	
	.febi ul.pagination li {
		border-top:none;
		
		flex-grow:0;
	}
	
	.febi ul.pagination li a { 
		padding:.5em 1em;
	}
	
	h1.pageTitle {
		font-size:1.75em;
	}
	
	.userTaskList {
		width:66%;
	}
	
	.userTasks,
	.blockType1 {
		padding:1.5em;
	}
	
	.btn,
	.ui-link,
	.btn:focus,
	.btn:hover,
	.btn:active,
	.btn:active:focus,
	.btn:visited,
	.link:focus,
	.link:hover,
	.link:active,
	.link:visited {
		display:inline-flex;
		margin-right:.5em;
		padding:.4em 1em .3em 1em;
		width:auto;
	}
	
	.btnBlock.alignCenter {
		display:flex;
		justify-content:center;
	}
	
	.btnBlock.textCenter {
		display:block;
	}
	
	ul.btnBlock {
		display:flex;
		flex-direction:row;
		justify-content:flex-end;
		flex-wrap:nowrap;
	}
	
	ul.btnBlock.center {
		justify-content:center;
	}
	
	ul.btnBlock li,
	ul.btnBlock li.previous,
	ul.btnBlock li.next {
		display:inline-flex;
		width:auto;
		
		flex:0 1 auto;
	}
	
	ul.btnBlock li.alignL {
		flex:1 1 auto;
		order:-1;
	}
	
	ul.btnBlock li.previous {
		margin:0;
		
		order:4;
	}
	
	ul.btnBlock li.next,
	ul.btnBlock li.primary {
		margin-right:0;
		
		order:5;
	}
	
	ul.btnBlock li.next:last-of-type .btn,
	ul.btnBlock li.primary:last-of-type .btn,
	div.btnBlock .btn:last-of-type,
	div.btnBlock .btn.next {
		margin-right:0;
	}
	
	.btn.floating-btn, 
	.btn.floating-btn:active,
	.btn.floating-btn:hover,
	.btn.floating-btn:focus,
	.btn.floating-btn:active:focus {
		flex:1 1 50%;
	}
	 
	.infoMessage .close {
		color:#000000;
		font-size:1.5em;
		margin:-.4em -.5em 0 0;
		opacity:.3;
	}
	
	.infoMessage [id$="InfoText"] {
		padding:0 0 0 2em;
	}
	
	.febi .info-banner-text {
		font-size:1.1em;
		padding-top:.35em;
	}
	
	.attention {
		font-size:1.2em;
	}
	   
	.vCenterPopup.modal .modal-dialog > .modal-content {
		margin:0 auto;
		width:600px;
	}
	
	.vCenterPopup.modal .modal-dialog.modal-sm > .modal-content {
		width:300px;
	}
	
	.schoolSummaryComponent {
		margin-bottom:1.25em;
	}
	
	form[class*="application-summary"] ngb-accordion .card .card-header {
		font-size:1em;
	}
	
	.dynamic-hyperlink-row > span {
		padding:.5em 1em;
	}
	
	/* -----------------------------
	     Section: School Selection
	   --\/------------------------- */
	   
	div.schoolListComponent .schoolListHeader {
		border-bottom:none;
		text-align:left;
	}
	
	div.schoolSummaryContentMenuIcon {
		width:10%;
	}
	
	div.schoolSummaryContentInfo {
		width:90%;
	}
	
	/* --/\-----------------------------
	     End section: School Selection
	   --------------------------------- */
	
	/* -------------------
	     Section: Footer 
	   --\/--------------- */
	
	#footer {
		font-size:.9em;
		padding:2em 0 0 0;
	}
	
	/* --/\-------------------
	     End section: footer
	   ----------------------- */
	   
	/* -------------------------
	     Sign & Submit section
	   --\/--------------------- */
	
	div .sigInfo > p {
		display:flex;
	}
	
	div .sigInfo > p > span {
		display:inline-block;
		padding:0 0 0 .5em;
	}
	
	/* --/\-------------------------
	     End sign & Submit section
	   ----------------------------- */
	   
}

/* End larger mobile tablets, 768px and up */

/* Medium devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
	
	/* -----------
	     General
	   --\/------- */
	   
	body {
		
	}
	
	.vCenterPopup.modal .modal-dialog > .modal-content {
		margin:0 auto;
		width:900px;
	}
	
	.vCenterPopup.modal .modal-dialog.modal-sm > .modal-content {
		width:300px;
	}
	
	/* --/\-----------
	     End general
	   --------------- */
	   
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
	.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
	.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
	.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
	.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
	.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
	.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
	.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
	.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
	.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
	.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
	.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		/*display:table-cell;
		float:none;*/
		padding:0 .5em;
		vertical-align:top;
	}
	
	/* Landing page */
	
	.landing .sizingContainer .container-fluid,
	.student-landing .sizingContainer .container-fluid {
		padding:0 1.5em; /* Adding 1.5em to match bootstrap col padding overridden on landing page  */
	}
	
	.landing .userSection.user,
	.student-landing .userSection.user {
		/* Pulling main user header another 1.5em to accommodate padding added to .container-fluid above */
		margin:initial -1.5em;
	}
	
	.user .sectionContent {
		margin:0 auto;
		min-width:25em;
	}
	
	.userTaskList {
		margin:0 auto;
		width:50%;
	}
	
	/* End landing page */
	
	.progressMenu.horizontal ul li a > span:last-of-type span {
		font-size:1em;
	}
	
}

@media screen and (min-width: 1080px) {
	
	
	
}

/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
	
	
	
}

/* Safari iOS only */

@supports (-webkit-overflow-scrolling: touch) {
	
	.controlBreakpoints1 {
		word-break:break-all;
	}
	
}

/* End Safari iOS only */

/* Internet Explorer-only junk. */

	/* IE-only mobile */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	
	header .fsaLogo {
		max-height:3.5em;
	}
	
	.btn.floating-btn, 
	.btn.floating-btn:active,
	.btn.floating-btn:hover,
	.btn.floating-btn:focus,
	.btn.floating-btn:focus:active {
		flex:0 1 auto;
	}
	
	.febi-tag .inputBlock .gd-custom-input-addon {
		flex:1 1 5em;
	}
	
}

@media screen and (min-width: 550px) and (-ms-high-contrast:active),
		(min-width: 550px) and (-ms-high-contrast: none) {
	
	.btn.floating-btn, 
	.btn.floating-btn:active,
	.btn.floating-btn:hover,
	.btn.floating-btn:focus,
	.btn.floating-btn:focus:active {
		flex:0 1 50%;
	}
	
	div .sigInfo > p {
		flex:2 1 48%;
	}
		
}

	/* IE-only larger tablets, 768 and up */
	
@media screen and (min-width: 768px) and (-ms-high-contrast: active), 
		(min-width: 768px) and (-ms-high-contrast: none) {
	
	.btn.floating-btn, 
	.btn.floating-btn:active,
	.btn.floating-btn:hover,
	.btn.floating-btn:focus,
	.btn.floating-btn:focus:active {
		flex:0 0 auto;
	}
	
}