/***** Updated CSS *****/
/***** Organized by content *****/

/* UI Components */
input[type="text"] {
	height: auto;
	margin: 0;
	padding: 3px 4px;
}

/* This CSS is for the picture background to fill and also be responsive */
.body_background {
	background-image: url("../images/mitchell.jpg");
	height: 350px;
	width: 100%;
	margin-bottom: -158px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
	.body_background {
		margin-bottom: -215px;
	}
}

@media screen and (max-width: 768px) {
	.body_background {
		margin-bottom: -300px;
	}
}

/* Wrappers and Containers
   These are the divs that are used in templates to position content. 
*/
div#page_container {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	overflow-x: hidden;
}

div#body_container {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

div#body_content {
	display: flex;
	justify-content: center;
	padding: 0 1rem 1rem 1rem;
	width: 100%;
}

footer#body_footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem 0;
	background: #f1f1f1;
}

main#main_container {
	display: flex;
	flex-direction: row;
	flex: 1 80%;
	padding: 1rem;
	height: fit-content;
	min-height: 310px;
	/* This is to avoid the footer appearing over the background image */
	max-width: 100%;
	/* This is to make sure container doesn't go off screen; allows for overflow values */
	background: #fefefe;
	box-shadow: 0 0 3px 0 #0000002e;
	border-radius: 2px;
}

.body_content {
	padding: 1.5rem 0;
}

div#main_content {
	flex: 1;
	width: 100%;
}

/* Navigation 
   These styles are used for the navbar
*/
nav.navbar_nav {
	position: relative;
	z-index: 99;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	padding: .25rem 1.25rem;
	font-size: 16px;
	background: #fff;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
}

/** Text **/
.navbar_nav .navbar_brand {
	font-size: 1.5em;
}

@media screen and (max-width: 500px) {
	nav.navbar_nav {
		font-size: 12px;
	}
}

/** Nav items **/
nav.navbar_nav>ul {
	display: flex;
	order: 2;
	padding: .5rem 0;
	margin: 0;
	gap: 1rem;
}

nav.navbar_nav>ul>li {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #9a9a9a;
}

nav.navbar_nav>ul>li:hover {
	background: #ffefef;
	border-color: #da6969;
}

nav.navbar_nav>ul>li>a {
	padding: .35rem .75rem;
	color: #424b4c;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
}

/** Nav toggles and collapse **/
div.toggles {
	display: flex;
	margin-left: auto;
}

button.nav_toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 5px;
	padding: .35em .6em;
	font-size: 1em;
	background: transparent;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #9a9a9a;
	outline: none;
}

button.nav_toggle:hover {
	background: #ffefef;
	border-color: #da6969;
}

@media screen and (max-width: 412px) {
	div.toggles {
		flex-direction: column-reverse;
		align-self: center;
	}
}

/** Collapse Dropdown **/
button.dropdown_toggle {
	display: none;
}

.dropdown_triangle {
	width: 0;
	height: 0;
	margin-left: .5rem;
	border-style: solid;
	border-width: 7px 7px 0 7px;
	border-color: #a9a9a9 transparent transparent transparent;
	transition: .35s;
}

.dropdown_triangle.open {
	transform: rotate(-180deg);
}

div.dropdown_content {
	position: absolute;
	display: none;
	flex-flow: column;
	background: #fefefe;
	border: 1px solid #8a8a8a;
	border-radius: 3px;
}

@media screen and (max-width: 1196px) {
	nav.navbar_nav>ul.nav_collapse {
		display: none;
		flex-flow: row wrap;
		justify-content: space-around;
		padding: 1.25rem 0;
		width: 100%;
	}
	nav.navbar_nav>ul.nav_collapse.open {
		display: flex;
	}
	button.dropdown_toggle {
		display: flex;
	}
}

/** Link drop-downs **/
.navbar_nav .menuitems {
	position: absolute;
	top: 0;
	z-index: 99;
	display: flex;
	display: none;
	flex-direction: column;
	min-width: 100%;
	padding: 5px 10px;
	margin: 0;
	margin-top: 33px;
	white-space: nowrap;
	list-style: none;
	font-size: .8em;
	background: #fafafa;
	border-radius: 2px;
	box-shadow: 0 2px 3px 0 #00000029;

	/* background: #D47E02;
	background: rgba(212,126,2,1);
	
    position: absolute;
    left:-9999px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 12px;
    padding-top: 5px;
    
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    
    transform: skew(15deg);
     -o-transform: skew(15deg);
     -moz-transform: skew(15deg);
     -webkit-transform: skew(15deg);
     min-width: 200px;
     
     display: block;
     
     
     left:-9999px;
     
     margin-left: -3px; */
}

.menuitems li+li {
	margin-top: 5px;
}

.menuitems li a {
	color: #3c3333;
	padding: 3px 5px;
	transition: .15s;
}

.menuitems li a:hover {
	border-radius: 5px;
	background: #ffd4d4;
	text-decoration: none;
}

.navbar_nav li:hover .menuitems {
	display: flex;
}

.navbar_nav .meunitems:hover {
	display: flex;
}

/* Sidebar */
aside#side_container {
	display: flex;
	padding: 0 1rem 1rem 1rem;
	height: fit-content;
	transition: 1s ease;
}

aside#side_container.open {
	transform: none;
}

#sidebar_container {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fefefe;
	box-shadow: 0 0 3px 0 #0000002e;
	border-radius: 2px;
	overflow-y: hidden;
}

header.sidebar_header {
	display: flex;
	justify-content: center;
}

header.sidebar_header>h3 {
	margin: 0 auto;
}

section.sidebar_section {
	overflow-y: auto;
	flex: 1;
}

ul.sidebar_links_list {
	list-style: none;
	margin: 0;
}

ul.sidebar_links_list>li {
	display: flex;
	justify-content: center;
}

ul.sidebar_links_list>li>a {
	padding: .25rem;
	border-bottom: 1px solid #999;
	width: 100%;
	text-align: center;
	color: #242424;
}

ul.sidebar_links_list>li>a:hover {
	color: #da2a22;
	text-decoration: underline;
}

/* Sidebar toggle */
button.sidebar_toggle {
	display: none;
}

.toggle_sidebar_triangle {
	width: 0;
	height: 0;
	margin-left: 10px;
	border-style: solid;
	border-width: 7px 7px 7px 0;
	border-color: transparent #a9a9a9 transparent transparent;
	transition: .35s;
}

.toggle_sidebar_triangle.open {
	transform: rotate(180deg);
}

/* Sidebar responsiveness */
@media only screen and (max-width: 1196px) {
	button.sidebar_toggle {
		display: flex;
	}
	aside#side_container {
		position: absolute;
		right: 8px;
		top: 75px;
		bottom: 5px;
		height: auto;
		z-index: 200;
		width: 260px;
		max-width: 70%;
		transform: translateX(400px);
	}
	#sidebar_container>hr.sidebar_separator {
		margin-top: 0;
	}
}

/* Body content */
section.section_block {
	display: flex;
	flex-flow: column nowrap;
	padding: .5rem 1rem;
	background: transparent;
}

section>.section_header {
	display: flex;
	padding: .5rem 1rem;
}

section>.section_header>h2 {
	font-size: 1.5rem;
	margin-bottom: 0;
}

section>.section_content {
	display: flex;
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
}

section>article.section_content>div {
	margin: .75rem;
}

section>.section_content_row {
	flex-flow: row wrap;
	justify-content: space-around;
}

section>.section_content_col {
	flex-direction: column;
}

section>.section_footer {
	
}

hr.section_separator {
	margin: 20px auto;
	border: 3px solid #f1f1f1;
	width: 90%;
}

/* Student */
header.student_content_header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

header.student_content_header>h2.student_title {
	text-align: center;
}

@media screen and (max-width: 768px) {
	header.student_content_header>h2.student_title {
		font-size: 1.5rem;
	}
}

table.student_table {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 1024px) {
	table.student_table {
		width: 100%;
	}
}

/** Status Page **/

/** Documents Page **/
table.documents_table td.data-td {
	min-width: 40px;
}

/** Upload button back **/
@media screen and (max-width: 600px) {
	table th, .table td {
		padding: 0;
		font-size: x-small;
	}
}

p.table_note {
	text-align: center;
}

/** UMHOUS - BK FORM **/
.block-labels label {
	/* display: block; */
	padding-left: 8px;
}

.block-labels br.radioBreak {
	display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: 10px; /* change this to whatever height you want it */
}

.block-labels input[type="radio"]{
	margin: 0;
}

#addressForm {
	display: none;
	padding-top: 15px;
	padding-left: 15px; 
}

input#map\'living\'3:checked + label + br + #addressForm {
	display: block;
}

/** Budget Page **/

/** Awards Page **/
input.money_input {
	width: 100px;
}

.money_input_group {
	display: flex;
	justify-content: center;
	align-items: center;
}

.dollar_prepend {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #efefef;
	border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	height: 25px;
	padding: 0 5px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.money_accepted {
	flex: 1;
	width: 45px;
	height: 25px !important;
	margin-bottom: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}

tr.responsive_row_small {
	display: none;
}

tr.responsive_row_normal {
	display: table-row;
}

.input_cell {
	/*display: flex; */
	align-items: baseline;
	text-align: center;
}

#midSectionTable {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	align-items: center;
	padding-top: 5px;
}

.fall_cell, .spring_cell {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 0 5px;
}

.select_finAssisType {
	margin: 5px 0;
	width: 100%;
}

.label_smallScreen {
	display: none;
}

.maryland-red {
	background-color: #990000;
	color: white;
}

@media screen and (max-width: 600px) {
	table.small {
		font-size: .6rem;
	}
	tr.responsive_row_small {
		/* display: table-row; */
		
	}
	tr.responsive_row_normal {
		/* display: none; */
		
	}
	tr.responsive_row_small.input_row>td:first-child {
		border-top: none;
	}
	tr.responsive_row_small.input_row>td:nth-child(2) {
		border-top: none;
		border-left: none;
	}
	#midSectionTable {
		grid-template-columns: 1fr 1fr;
	}
	#typeCol {
		grid-column: 1/-1;
		margin-bottom: 5px;
	}
	.select_cell {
		grid-column: 1/-1;
	}
	#fallCol, #springCol {
		display: none;
	}
	.label_smallScreen {
		display: block;
	}
	.money_accepted {
		font-size: inherit !important;
	}
	td.currency {
		padding: 2px !important;
	}
}

/*** Federal Loans Page ***/
@media screen and (max-width: 700px) {
	table.loan-table {
		font-size: .75rem;
	}
}

/***** End student *****/

/***** Staff *****/
form.lookup_form_wrapper {
	width: 100%;
}

div.lookup_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

div.lookup_container>header {
	text-align: center;
}

div.lookup_container>section.input_section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-center;
	gap: 2rem;
}

div.input_label {
	display: flex;
	flex-direction: column;
}

button[type='submit'].testudo-button {
	
}

section.input_section button {
    align-self: flex-start;
    margin-top: 1.2rem;
    margin-left: 2rem;
}

.input_section label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.8rem;
}

.input_section input[type="radio"] {
    position: relative;
    top: -0.15rem;   /* try -1px or -2px depending on font */
}

.input_section > div:first-child {
    margin-right: 1rem;
}

.input_section > div:first-child > div:last-child {
    margin-top: 0.50rem;
}


/***** End staff *****/

/***** Portal *****/
.notes {
	max-width: 50%;
}

/* MOTD Block */
h3.motd_header {
	font-size: 1.25rem;
	font-weight: bold;
}

p.motd_text {
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
	background: #ffd281;
	padding: .25rem;
}

/* Portal Entrance */
.portal_entrance {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

select#aidYear {
	width: fit-content;
}

input#btnSubmit {
	white-space: normal;
}

/* Links */
.links_list_wrapper {
	width: 100%;
}

.links_list {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	/* display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: .5rem; */
	list-style: none;
}

@media only screen and (max-width: 600px) {
	/* Allow for smaller links when using smaller screens */
	.links_list {
		/* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); */
		
	}
}

.links_list>li {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	border: 1px solid #aaa;
}

.links_list>li>a {
	width: 100%;
	padding: .35rem .75rem;
	color: #cc0000;
}

/* Navbar */
.main-navbar {
	position: relative;
	display: flex;
	align-items: baseline;
	padding: 2rem .5rem .5rem 1rem;
	width: 100%;
	z-index: 99;
	color: #313131;
	background: #fff;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
	/* background: url("../images/menu-bg.png") scroll 0 0 transparent; */
	/* background: url("../images/menu-bg.png") scroll 0 transparent;
	background-size: 200%;
	left: 0;
	right: 0;
	padding: 0;
	position: absolute;
	margin-left: 200px;
	margin-right: auto;
	margin-top: -40px;
	height: 69px;
	width: 860px;
	text-align:center;
	z-index:1; 
	#b93e3e
	*/
}

.main-navbar .navbar_text {
	font-family: Serif72, Times, serif;
	font-size: 2.25rem;
	color: inherit;
}
/** Upload Table **/
@media screen and (max-width: 600px) {
	#uploadForm .controls {
		margin-left: 0;
	}
	.upload-input label {
		display: none;
	}
}

/** Global Styles **/
* {
	box-sizing: border-box;
}

body {
	background-color: #f1f1f1 !important;
}

ul {
	list-style: none;
}

@media only screen and (max-width: 600px) {
	html {
		font-size: 14px;
	}
}
