@charset "utf-8";
/* CSS Document */
html {
	font-size: 100%;
	margin:0;
	padding:0;	
	width: 100vw;
	height: 100vh;
	font-family:"Helvetica Neue", Helvetica, Arial, "sans-serif";
	color:#353b47;
}	

body {
    margin: 0;	
	padding:0;		
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
h1{
	font-weight:bold;
	font-size:1.4rem;
	color: #353b47;
	line-height:1.7rem;
	text-align:center;
	padding:0px 30px;	
}
h2{
	font-weight:bold;
	font-size:1.8rem;
	color: #f9d300;
	line-height:1.7rem;
	text-align:center;
	padding:0px 30px;	
}
a {
	text-decoration: none;
	color: #1551d3;
	display: inline-block;
	transition: all .3s;
	font-weight:bold;
	font-size:inherit;
}
a:hover {
	opacity: .6;
}
img{
	vertical-align:middle;
}
ul,ol,dl,p, label {
	font-size: 0.95rem;
	color:#353b47;
	font-weight:normal;
}
ul{
	list-style-type:disc;
}
ol{
	padding:0px 60px;
}
li {
	line-height: 1.4rem;
	margin: 2px 0;
}
.logo-container{
	width:100%;
	background-color:#0644d7;
	background-size: cover;
	/* grid styles */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: center;
}	
.logo-img{
	padding: 0.8rem 0.8rem 0.5rem;
}
.container {
	display: grid;
	/*align-items: center;*/
	/*grid-template-columns: auto;*/ /*1 column*/
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: dense;
	box-sizing: border-box;
}

.login-container {
	grid-template-columns: auto; /*1 column*/
}

.policy-section{
	background-color:#f3f7ff;
}
.icons{
	display:grid;
	grid-template-columns: 1fr 1fr ;	
	grid-template-rows: repeat(3, auto);
	grid-gap: 0.5rem 1.5rem;	
	align-items:center;
	margin:10px auto;
}
.icon-text{
	font-size:0.9rem;
	line-height:1.1rem;
}
.login-section{
	text-align:center;
	padding-bottom:50px;
}
/* checkbox style */
.checkbox-bg{
	background-color:#d2e1ff;
	padding:1.2rem 2.5rem;
}
.checkbox-container {
	display: block;
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #fff;
}
/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
	background-color: #f2f5fc;
	transition: all .3s;	
}
/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
	background-color: #1551d3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}
/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.button {
	background-color: #1551d3; 
	border: none;
	color: white;
	/*padding: 10px 30px;*/
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-weight:bold;
	letter-spacing:0.02rem;
	margin: 0 auto;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius:50px;
	width: 170px;
	height: 60px;
}
.campus-login {
	background-color: #1551d3; 
	color: white; 
}
.campus-login:hover {
	background-color: white; 
	color: #353b47; 
	border: 2px solid #1551d3;
}
hr.solid {
	border-top: 2px dotted #e0e0e0;
	margin: 20px 0px;
}
.login-form-container{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 3fr 1fr;
}
.login-form{
	grid-column-start: 2;
	grid-row-start: row1-start;
}
.input-label{
	font-weight:bold;
	color: #353b47;
	text-align:left;
	margin-bottom:5px;
}
.guide-text{
	color:#b5c0d3;
	font-weight:bold;
}
/*the container must be positioned relative:*/
.custom-select {
	position: relative;
	border:1px solid #d4d8e0;
	text-align:left;
	border-radius:4px;
	opacity:0.85;
}
.custom-select:hover {
	opacity:1;
}
.custom-select select {
	display: none; /*hide original SELECT element:*/
}
.select-selected {
	background-color: white;
	border-radius:4px;
}

/*style the arrow inside the select element:*/
.select-selected:after {
	position: absolute;
	content: "";
	color:#d4d8e0;
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #353b47 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #353b47 transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #353b47;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent #d2e1ff transparent;
  cursor: pointer;
  user-select: none;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #f3f7ff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: #d2e1ff;
}
.custom-select > option[value="0"]{
     color: #b5c0d3;
}	
input,
.btn {
	padding: 12px 16px;
	box-sizing: border-box;
	border: 1px solid #d4d8e0;
	border-radius: 4px;
	opacity: 0.85;
	display: inline-block;
	font-size: 1rem;
	line-height: 1.2rem;
	text-decoration: none; /* remove underline from anchors */
}
input:hover,.btn:hover {
	opacity: 1;
}
::placeholder {
	color: #353b47;
	opacity:1;
}

input[type="text"], input[type="password"], select {
	box-shadow: inset 1px 1px 3px #d4d8e0;
}
/* style the submit button */
input[type=submit] {
	background-color: #1551d3; 
	border: none;
	color: white;
	padding: 16px 80px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-weight:bold;
	letter-spacing:0.02rem;
	margin: 20px auto;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius:50px;
	opacity: 1;
}

input[type=submit]:hover {
	background-color: white; 
	color: #353b47; 
	border: 2px solid #1551d3;
}
.special-msg-container{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 3fr 1fr;
	padding:2rem 1.5rem;
	margin: auto;
}
.special-msg{
	grid-column-start: 2;
	grid-row-start: row1-start;
	margin: auto 20px;
}
.special-msg-text{
	line-height:1.4rem;
	text-align:center;
}
.personal-info-box{
	background-color:#f3f7ff;
	margin-top:40px;
	line-height:1.4rem;
	box-sizing: border-box;
	padding:1rem;
	font-weight:bold;
}
.footer{
	margin-top: auto;
}
.help-footer{
	width:100%;
	margin-top: auto;
	background-color:#e8edf6;
	text-align:center;
	background-size: cover;
	/* grid styles */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
}
.rights-footer{
	width:100%;
	background-color:#023062;
	/* grid styles */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
}	
.footer-text{
	text-align:center;
	font-size:0.7rem;
	color:#d6dfea;
}
.login-user-profile {
	display:grid;
	/*grid-template-columns: repeat(auto-fit, minmax(15px, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.center {
  margin: auto;
  width: 80%;
  padding: 10px;
}

.btn-primary {			 
      font-size: 1rem;
      color: #fff!important;
      letter-spacing: 1px;
      line-height: 15px;
      border: 2px solid rgba(58, 133, 191, 0.75);
      border-radius: 40px;
      background: transparent;
      background-color:#003399;
      border-color:#003399;
      transition: all 0.3s ease 0s;      
}
.btn-primary:hover {
      color: #FFF;
      background: rgba(58, 133, 191, 0.75);
      border: 2px solid rgba(58, 133, 191, 0.75);
}

.btn-outline-primary {			  
      font-size: 0.8rem;
      font-weight: 700;
      color: #003399 !important;
      letter-spacing: 1px;
      line-height: 15px;
      border: 2px solid rgba(58, 133, 191, 0.75);
      border-radius: 40px;
      background: transparent;	  
      border-color:#003399;
      transition: all 0.3s ease 0s;
}
.btn-outline-primary:hover {
      color:#003399;
      background: rgba(58, 133, 191, 0.75);
      border: 2px solid rgba(58, 133, 191, 0.75);
      color:#003399;
}