/* Root variables */
 :root {
	 --dark-blue: #001749;
	 --nsu-blue: #003893;
	 --mid-blue: #0070cd;
	 --light-blue: #E5F1FA;
	 --text-gray: #202121;
	 --main-gray: #7c858c;
	 --light-gray: #ebebeb;
	 --secondary-gray: #828080;
	 --white: #FFF;
	 --alert: #990000;
	 --body-font-family: 'Montserrat', sans-serif;
	 --body-font-size: 16px;
	 --body-font-color: var(--text-gray);
	 --body-headers-font-color: var(--nsu-blue);
	 --body-alternative-headers-font-color: var(--secondary-gray);
	 --body-bg-color: #F2F5F9;
	 --body-line-height: 1.2;
	 --body-font-weight: 400;
	 --header-height: 80px;
	 --footer-height: 61px;
	 --application-height: calc( 100vh - ( var(--header-height) + var(--footer-height) ) );
	 --main-padding: 20px;
	 --main-container-height: calc( var(--application-height) - ( var(--main-padding) * 2 ) );
	 --input-bg-error: #FF9F9F;
	 --input-alert-bg-error: #CC3333;
}
/* Page styles */
 html {
	 height: 100%;
	 width: 100%;
	/* Prevent font scaling in landscape while allowing user zoom */
	 -webkit-text-size-adjust: 100%;
}
/* Header styles */
 body.applicationwrapper #header {
	 display: block;
	 height: var(--header-height);
	 border-bottom: 1px solid #ccc;
	 box-shadow: 0px 0px 6px 0px #ccc;
}
/* Body content styles */
 body.applicationwrapper {
	 min-height: 100%;
	 overflow-x: hidden;
	 font-family: var(--body-font-family);
	 font-size: var(--body-font-size);
	 font-weight: var(--body-font-weight);
	 line-height: var(--body-line-height);
	 color: var(--body-font-color);
	 background-image: none;
	 background-color: var(--body-bg-color);
}
 body.applicationwrapper #maincontent {
	 margin: 0px auto;
}
 body.applicationwrapper #application-body {
	 min-height: var(--application-height);
	 background-color: var(--body-bg-color);
	 padding: 20px 0;
	 padding-top: var(--main-padding);
	 padding-bottom: var(--main-padding);
	/*background: url(https://www.nova.edu/brand/_images/nsu-digital-background-guy-harvey.jpg) no-repeat;
	*/
	/*background-size: cover;
	*/
	/*background-attachment: fixed;
	*/
	/*object-fit: cover;
	*/
}
 body.applicationwrapper #application-body #application-container {
	 position: relative;
	 background-color: var(--white);
	/*padding: 0;
	*/
	 min-height: var(--main-container-height);
	 border-radius: 3px;
	/*box-shadow: 0px -1px 7px -3px #6E6F82, -2px 3px 5px -4px #6E6F82, 3px 2px 5px -4px #6E6F82, 0px 0px 5px -1px #6E6F82;
	*/
}
 body.applicationwrapper #application-body #application-container #app-header {
	 min-height: 10%;
}
 body.applicationwrapper #application-body #application-container #app-body {
	 display: grid;
	 grid-template-columns: 20% 70% 10%;
	 height: 90%;
}
 body.applicationwrapper #application-body #application-container #sidebar {
	 grid-column: 1;
}
 body.applicationwrapper #application-body #application-container #main-content {
	 grid-column: 2;
	 border-top: 1px solid var(--light-gray);
}
 body.applicationwrapper #application-body aside#sidebar {
	 background-color: var(--nsu-blue);
}
 body.applicationwrapper #application-body aside#sidebar a {
	 text-decoration: none;
	 color: #FFF;
}
 body.applicationwrapper #application-body aside#sidebar a.nav-link.active {
	 background-color: var(--mid-blue);
}
/* Form section */
 body.applicationwrapper #application-body #form_section {
	 display: grid;
	 grid-template-columns: 10% 80% 10%;
}
 body.applicationwrapper #application-body #form_section #form_container {
	 grid-column: 2;
}
/* Table Styles */
 body.applicationwraper table a:hover {
	 color: #004083;
	 text-decoration: none 
}
 body.applicationwrapper table tr:hover {
	 background: none 
}
/* Footer styles */
 body.applicationwrapper #Footer {
	 display: block;
	 position: relative;
	 height: var(--footer-height);
	 overflow: visible;
	 z-index: unset !important;
	 margin-top: 0 !important;
}
 body.applicationwrapper #Footer #FooterTop {
	 -moz-box-shadow: unset !important;
	 box-shadow: unset !important;
	 -webkit-box-shadow: unset !important;
}
 body.applicationwrapper .footsep {
	 float: none;
	 margin: 0;
	 padding: 0;
}
/* Common styles */
 .skiplink {
	 position: absolute;
	 top: -999999em;
	 left: auto;
	 width: 1px;
	 height: 1px;
	 overflow:hidden;
}
 h1, h2{
	 font-size: 2em;
}
 h3{
	 font-size: 1.6em;
}
 h4{
	 font-size: 1.4em;
}
 h5{
	 font-size: 1.2em;
}
 h1, h2, h3, h4, h5 {
	 color: var(--body-headers-font-color);
}
 h1, h2, h3 h4, h5, h6 {
	 margin: 0px;
	 margin-bottom: 15px;
}
 h1 {
	 font-weight: bold;
	 text-transform: uppercase;
}
 h2, h3 h4, h5, h6 {
	 text-transform: none;
}
 p {
	 margin: 0px;
	 margin-bottom: 15px;
}
 .alert {
	 padding: 7px;
}
/* Input styles */
 input[type="checkbox"], input[type="radio"] {
	 margin-right: 7px;
}
.form-check.form-switch .form-check-input {
    border-radius: 8px !important;
}
 input.form-control, select.form-select, textarea.form-control, input.form-check-input {
	/*border: 1px solid var(--main-gray);
	*/
	 float: unset !important;
}
input[name*="Date"], input[name*="date"], input[type='date'], input.date {
    width: 100% !important;
}
input:not(input[type='checkbox'], input[type='radio']), select, textarea {
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}
 input.error, select.error, .val-error {
	 background-color: var(--input-bg-error);
}
 span.error {
    display: block;
    color: var(--white);
    margin-top: 10px;
    padding: 5px;
    background-color: var(--input-alert-bg-error);
    font-weight: 500;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
 .btn {
	 text-transform: unset;
	 text-shadow: unset;
	 box-shadow: unset;
	 border: auto;
	 filter: none;
	 background-image: none;
}
 .g-recaptcha {
	 margin: 0 !important;
}
 .rc-anchor-normal {
	 width: auto !important;
}
 form p {
	 margin: 0px;
}
 .form-group {
	 margin-bottom: 1.5rem;
}
 .form-title {
	 color: var(--body-alternative-headers-font-color);
}
 .alert {
	 margin: 0;
	 padding: 0;
	 color: var(--alert);
	 font-weight: bold;
}
/*button styles*/
 .btn-primary {
	 background-color: var(--nsu-blue);
	 border: 2px solid var(--nsu-blue);
	 -moz-border-radius: 3px;
	 border-radius: 3px;
	 -webkit-border-radius: 3px;
	 font-weight: 500;
}
 .btn-primary:hover,.btn-primary:focus {
	 background-color: var(--mid-blue) !important;
	 border: 2px solid var(--mid-blue) !important;
}
 .btn-secondary {
	 background-color: transparent;
	 border: 2px solid var(--nsu-blue);
	 -moz-border-radius: 3px;
	 border-radius: 3px;
	 -webkit-border-radius: 3px;
	 color: var(--nsu-blue);
	 font-weight: 500;
}
 .btn-secondary:hover, .btn-secondary:focus {
	 background-color: var(--nsu-blue) !important;
	 border: 2px solid var(--nsu-blue) !important;
	 color: var(--white) !important;
}
 @media screen and (max-width: 768px) {
	 #Footer {
		 margin-top: 0px !important;
	}
	 #FooterTop {
		 margin-top: 0px;
	}
}
 @media only screen and (min-width: 768px) and (max-width: 992px) {
	 p.wrapper {
		 width: auto;
	}
	 div#FooterTop, div#Footer {
		 height: auto !important;
	}
}
 @media screen and (max-width: 468px) {
	 body.applicationwrapper #application-body .container #app-body, body.applicationwrapper #application-body .container-sm #app-body, body.applicationwrapper #application-body .container-md #app-body {
		 grid-template-columns: unset;
		 display: flex;
	}
	 body.applicationwrapper #application-body .container #main-content, body.applicationwrapper #application-body .container-sm #main-content, body.applicationwrapper #application-body .container-md #main-content {
		 grid-column: unset;
	}
	 #maincontent {
		 padding: 15px;
	}
}
 @media only screen and (max-width: 768px) {
	 body.applicationwrapper #application-body {
		 --application-height: calc( 100% - ( var(--header-height) + var(--footer-height) ) );
	}
	 div#application-container {
		 --main-container-height: calc( var(--application-height) - ( var(--main-padding) * 2 ) );
	}
}
