:root{
  font-size:16px;
  font-family: Calibri, Adagio Sans, Arial, Helvetica, sans-serif;
  
}

body
{ 
  margin: 0 !important;
  padding: 0 !important;
  background: #010A41;
  -webkit-user-select: none; /* prevents copy to hold on mobile */
}

/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));   */

/**********************************************************
                       Header 
***********************************************************/

#header{
  background-color: #010A41;
  display:flex;
  align-items: center;
  padding-top:5px;
  padding-bottom:5px;
  margin-bottom:5px;
  top: 0; /* keeps div on top of page while scrolling */
  position: fixed;  /* keeps div on top of page while scrolling */
  width:100%;
}
#logo{
  width: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));  
  margin-left:10px;
}
#registrationtitle{
  flex:1;
  color:#eeeeee;
  text-align:center;
  font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
  letter-spacing:0.05em;
  font-weight:bold;
}
#title{ 
  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300))); 
  font-weight:bold;
  color:rgb(228, 222, 214);
  padding-left:8px;
  white-space: nowrap;
}
#loginlink{
  padding-right:20px;
  font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300))); 
  cursor:pointer;
  color:rgb(228, 222, 214);
}
#loginlink:hover{
  text-decoration:underline;
}

/******************************************************
                    Button AREA
*******************************************************/
.formcontainer {
  display: flex; /* init none, will become flex */
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  background-image: url('../images/coverNewWide.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height:150px;
}


/***********************
Registration  Buttons
***********************/
.regbutton{
	background: linear-gradient(180deg, rgba(27,124,255,1) 0%, rgba(0,73,139,1) 100%);
	padding:7px 7px 7px 7px;
	font-weight:bold;
	font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300))); 
	letter-spacing:0.1rem;
	color:white;
	margin-top:40px;
	cursor:pointer;
	width: calc(260px + (300 - 260) * ((100vw - 300px) / (1600 - 300))); 
	text-align:center;
}
.regbutton:hover{
	background: linear-gradient(180deg, rgba(71, 150, 255,1) 0%, rgba(0,73,139,1) 100%);
}
#newstudentreg {
	margin-top:80px;
}
#returningstudentreg {
	margin-top:40px;
	margin-bottom:20px;
}
.regbuttondiv{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}
.copyright
{
	color:#aaaaaa;
	text-align:center;
	font-size:0.90em; 
	padding-top:5px;
	margin-bottom:20px;
}


/**************************
New Student Registration
***************************/

#newstudentRegForm{
  margin-bottom:20px;
  margin-top:60px; /* needed to cover the height of the header that always stays on top */
}
.formdiv{
  background: #022b78;
  padding:10px 0px 4px 8px;
  width:220px;
  display:flex; 
  flex-direction:column;
}
.shadow1side {
  -webkit-box-shadow: 0 8px 6px -6px rgb(17, 17, 17);
	   -moz-box-shadow: 0 8px 6px -6px rgb(17, 17, 17);
	        box-shadow: 0 8px 6px -6px rgb(17, 17, 17);
}
.formtitle{
  font-weight: bold;
  font-size: calc(16px + (19 - 16) * ((100vw - 300px) / (1600 - 300))); 
  padding-left:7px;
  padding-right:7px;
  margin-bottom:7px;
  text-align:center;
  letter-spacing:0.05em;
  color:#eeeeee;
}
.instructions{
  font-size:0.85em;
  text-align: center;
  background-colorwas:pink;
  margin-bottom: 4px;
  color:#dddddd;
}
.formrowdiv{
  display:flex;
  margin-bottom:8px;
  align-items: center;
}
.inputfield{
	width:210px;
}
.inputfield:focus {
  background-color: #d4f584;
}
#enrollmentkeylink{
	cursor:pointer;
	color:#8ca8ff;
	font-size: calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));
	margin-top:-5px;
}
#enrollmentkeylink:hover{
	text-decoration:underline;
}

#detailsenrollmentkey{
	display:none;
	font-size:calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));
	color:#dddddd;
	margin-top:-2px;
	background-color:#001640;
	padding: 5 5 5 5;
	margin-right:10px;
}

/*******************************
Login Button
*****************************/
#submitnewstudentregbutton {
	background: linear-gradient(180deg, rgba(27,124,255,1) 0%, rgba(0,73,139,1) 100%);
	padding:3px 8px 3px 8px;
	font-weight:bold;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300))); 
	letter-spacing:0.1rem;
	color:white;
	margin-left:10px;
	cursor:pointer;
	border: 0;
    border-radius: 0px;
}
#cancelnewstudentregbutton{
  font-size:0.9em;
  color:#bbbbbb;
  text-decoration: underline;
  margin-left:70px;
  cursor: pointer;
}
#regmessage{
	font-size:0.9em;
	color:#b35252;
	width:200px;
	margin-bottom:10px;
}
.reginstructions{
  font-size:0.8em;
  text-align: center;
  margin-bottom: 12px;
  margin-top:10px;
  color:#dddddd;
}
.bluelink{
	color:#8ca8ff;
}