@import url('https://fonts.cdnfonts.com/css/futura-std-4');
@import url('https://fonts.cdnfonts.com/css/futura-book');
@import url('https://fonts.cdnfonts.com/css/open-sans');

/* -------------------- defaults ---------------------------------*/

:root {

	/* -----colours-----*/
	--orange: #ff5800;
	--navy: #031E2F;
	--white:#ffffff;
	--red:#F14646;
	--green:#39A642;
	--grey:#D3D3D3;

	/* -----height-----*/
	--footerheight:8rem;
	--headerheight:7rem;
	--margin-left:11.4rem;
  }

html {
	font-size: 10px;
}
body {
	height : 100%;
	margin: 0;
	font-family: "Futura", Trebuchet MS, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:var(--white);
	background-color: var(--orange);
}

h1 { font-family: "Futura", "Trebuchet MS", Arial, sans-serif; font-size: 1.5rem; font-style: normal; font-variant: normal; font-weight: 700; line-height: 24px; }
h2 { font-family: "Futura", "Trebuchet MS", Arial, sans-serif; font-size: 1.2rem; font-style: normal; font-variant: normal; font-weight: 700; line-height: 16px; }
h3 { font-family: "Futura", "Trebuchet MS", Arial, sans-serif; font-size: 0.9rem; font-style: normal; font-variant: normal; font-weight: 700; line-height: 16px; }
p {font-family: "Open Sans", "Trebuchet MS", Arial, sans-serif;font-size: 1.2rem;font-style: normal;font-variant: normal;line-height: 24px;}

p.footer {font-size: 1.2rem;margin-left: var(--margin-left);}

p.small {font-family: "Open Sans", "Trebuchet MS", Arial, sans-serif;font-size: 1rem;font-style: normal;font-variant: normal;line-height: 16px;}

h1 {
	text-align:center;
}
h2 {
	text-align:center;
}

#canvas {
    display: flex;
    justify-content: center;
    z-index: 1;
}

.App {
	display: flex;
	flex-direction: column;
	gap: 1cm;
}  


/*-------------header---------------*/

header {
    height: var(--headerheight);
    z-index: 2;
    justify-content: space-between;
}
.logo_tag {
	position: absolute;
	align-self: flex-start;
	width: 5rem;
	margin-left: 11.4rem;
}

title {
      display: flex;
      height: 9rem;
      background-color:var(--navy);
	}

      .img {
        height: 4.5rem;
        margin: auto;
      }

/*--------------------- footer --------------------------------------*/
.footer {
	height: var(--footerheight);
	position: absolute;
	width: 100%;
	margin-top: auto;
	display: flex;
	z-index: 1;
	background-color: var(--navy);
	flex-direction: column;
	justify-content: space-around;
	bottom: 0;
}
div.footer_columns {
	margin: 0;
	padding: 0;
	padding-left: 2rem;
	padding-right: 2rem;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	gap: 0rem;
}
div.footer_inner {
	font-family: 'Open Sans';
/*	padding: 1.2rem 0px;
*/	font-size: 1rem;
}
a.footer_inner {
	color: #FCFCFC;
	text-decoration: none;
}
div.footer_sponsor {
	height: var(--footerheight);
}
div.footer_sponsor_corner {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: start;
	justify-content: end;
	margin: 0px;
	padding: 0px;
}
p.footer_sponsor {
	font-family: 'Open Sans';
	padding-top: 0.5rem;
	margin: 0px;
	font-size: 1rem;
	line-height: 1rem;	
	color: var(--white);
}
img.footer_sponsor {
	height: calc(var(--footerheight) * 0.55);
}

/* -------------------- public home ---------------------------------*/

.student_landing {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background-color: var(--orange);
	background-image: url('/img/background_home.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.center {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 0.5rem;
	  max-width: 80%;
	  text-align: center;
	  position: absolute;
	  margin: 0;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	}

	img.title {
	  width: 37rem;
	  margin-bottom: 2rem;
	  max-width: 80%;
	}
	
a.home_link {
	text-decoration: underline;
	color: var(--white);
}
a.signin_link {
	text-decoration: underline;
	color: var(--navy);
}


/* -------------------- sign in ---------------------------------*/

.teacher_landing {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background-color: var(--white);
	background-image: url('img/background_home.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

fieldset {
	border: none;
}
fieldset:disabled * {
  opacity: 0.5;
}
.login_input {
	height: 5rem;
	width: 28rem;
	margin: 10px;
	text-align: center;
	border: 3px solid #DDDDDD;
	border-radius: 10px;
	font: 18px "Open Sans", Arial, sans-serif;
}
.public_home {
	color: var(--white);
}
div.public_home {
    position: relative;
    min-height: 100vh;
}
div.sign_in {
	color: var(--navy);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	text-align: center;
	background-color: var(--white);
}
a.signin_link {
	text-decoration: none;
	color: var(--navy);
}
.blue_button {
	font-size: 1.4rem;
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-weight: 700;
	padding: 10px 55px;
	gap: 10px;
	height: 72px;
	width: 24.5rem;
	background: var(--navy);
	color: #F2F2F2;
	border-radius: 10px;
	border: 1px solid transparent;
}
.blue_button:enabled:active {
	background: #010e17;	
}
.blue_button_small {
	font-size: 1.4rem;
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-weight: 700;
	padding: 10px 10px;
	gap: 10px;
	width: 20rem;
	height: 72px;
	background: var(--navy);
	color: #F2F2F2;
	border-radius: 10px;
	border: 1px solid transparent;
}
.blue_button_small:disabled,
.blue_button_small[disabled] {
	background: #999999;
}
.blue_button_small:enabled:active {
	background: #010e17;	
}
.white_button {
	font-size: 1.4rem;
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-weight: 700;
	padding: 10px 55px;
	gap: 10px;
	height: 72px;
	width: 24.5rem;
	background: #F2F2F2;
	color: var(--navy);
	border-radius: 10px;
	border: 1px solid transparent;
	align: center;
}
.white_button:enabled:active {
	background: #797979;
}
.tiny_link_button {
	border: 0px solid transparent;
	background: #fff;
	color: var(--navy);
	text-decoration: underline;
	font-size: 1rem;
}
.blue_button_medium {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-weight: 700;
	font-size: 18px;
	padding: 24px;
	gap: 10px;
	width: 296px;
	height: 72px;
	background: var(--navy);
	color: #F2F2F2;
	border-radius: 10px;
	border: 1px solid transparent;
}
.blue_button_medium:enabled:active {
	background: #010e17;	
}
.red_button_medium {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	padding: 24px;
	gap: 10px;
	width: 277px;
	height: 72px;
	background: var(--red);
	color: #F2F2F2;
	border-radius: 10px;
	border: 1px solid transparent;
}
.red_button_medium:enabled:active {
	background: #900a0a;	
}

/* -------------------- educator home ---------------------------------*/
div.educator_page {
    position: relative;
    min-height: 100vh;
}

div.educator_page p {
	color: var(--navy);
}

h2.educator_subhead { 
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: 600;
	line-height: 33px;
	text-align:left;	
	color: var(--navy);
}
div.educator_home_header {
	height: 474px;
    width: auto;
	background: var(--navy);
	color: var(--white);
	background-image: url('/img/header_block_blue.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;   
}
img.educator_signout {
	position: absolute;
	top: 0px;
	left: min(calc(100vw - 208px), 1124px); 
}
img.educator_resources {
	position: absolute;
	top: 0px;
	left: min(calc(100vw - 392px), 940px); 
}
p.educator_byline {
	font-family: "Open Sans", Arial, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 600;
	font-size: 21px;
	text-align:left;	
	color: #F2F2F2;
}

table.student_table {
	font-family: 'Open Sans';
	font-style: normal;
	table-layout: auto;
	width: 100%;
	font-weight: 600;
	font-size: 18px;
	color: var(--navy);
	border-spacing: 16px 16px;
	margin-left: -24px;
}

th {
	font-family: 'Open Sans';
    font-style: normal;
    width: 152px;
    font-weight: 600;
}
td.student_name {
	width: 96px;
	margin: 10px;
}
td.student_code {
	min-width: 120px;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	color: var(--navy);	
	margin: 10px;
}
td.student_not_started {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 21px;
	line-height: 28px;
	text-align: center;
	text-transform: capitalize;
	color: var(--navy);
	
	width: 133px;
	height: 72px;
	background: #D3D3D3;
	border-radius: 14px;
	margin: 10px;
}
td.student_progress {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 21px;
	line-height: 28px;
	text-align: center;
	text-transform: capitalize;
	color: var(--white);
	
	width: 133px;
	height: 68px;
	background: var(--orange);
	border-radius: 14px;
	margin: 10px;
}
td.student_complete {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 21px;
	line-height: 28px;
	text-align: center;
	text-transform: capitalize;
	color: var(--white);

	width: 133px;
	height: 72px;
	background: var(--green);
	border-radius: 14px;
	margin: 10px;
}
.remove_student {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	color: var(--white);

	width: 138px;
	height: 72px;
	background: var(--red);
	border-radius: 14px;
	border: 1px solid transparent;
	align: center;
	
	margin-left: 20px;
}
.remove_student:enabled:active {
	background: #900a0a;
}
.reveal_code {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	text-align: center;

	width: 162px;
	height: 72px;
	background: #D3D3D3;
	border-radius: 14px;
	border: 1px solid transparent;
	align: center;
	
	margin-left: 20px;
	margin-right: 20px;
}
.reveal_code:enabled:active {
	background: #696969;
}
.txt_student_names {
	border: 3px solid #DDDDDD;
	border-radius: 10px;
	margin-bottom: 16px;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	padding: 16px;
	box-sizing: border-box;
}
p.student_name_validation {
	background: #ff6969;
	display: inline-block;
}
.add_student {
	font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	color: var(--white);

	width: 172px;
	height: 72px;
	background: var(--navy);
	border-radius: 14px;
	border: 1px solid transparent;
	align: center;
}
.add_student:enabled:active {
	background: #010e17;
}
p.student_names_instruction {
	color: grey;
	font-style: italic;
	margin: 16px 0px;
}

/*---------update v1-----------*/

/*
.educator_edit_details {
    display: flex;
    margin-bottom: 24px;
	height: 48px;
    gap: 12px;
    flex-direction: row;
    align-items: flex-end;
}
*/
#educator_edit_details {
	height: 48px;
	padding: 0px;
	margin: 0px;
}
.educator_edit_form {	
    display: flex;
    gap: 12px;
    flex-direction: row;
    align-items: center;
}
.submit_educator_details {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--navy);
    width: 120px;
    height: 48px;
    background: var(--white);
    border-radius: 6px;
	
	box-sizing: border-box;
    border: 1px solid transparent;
	margin: 0px;
}
.educator_type_select {
    font-size: 1.2rem;
    border-radius: 6px;
    height: 48px;
    width: 264px;

	box-sizing: border-box;
    border: 1px solid transparent;
	margin: 0px;
}
.input_school_name {
	font-size: 1.2rem;
	
	padding: 8px;
	border-radius: 6px;
    height: 48px;
    width: 232px;

	box-sizing: border-box;
    border: 1px solid transparent;
	margin: 0px;
}
label {
    font-size: 1.4rem;
    font-family: "open sans";
    font-weight: 600;
    padding: 0px;
}


/*----------media tags------------*/

@media only screen and (min-height: 768px) {

	p.footer{
		/* height: 6rem; */
		flex-wrap: nowrap;
		font-size: 1rem;
	}
	html {
	  font-size: 12px;
	}
  }
  
  @media only screen and (min-height: 800px) {
  
	html {
	  font-size: 14px;
	}
  }
  
  @media only screen and (min-height: 944px) {
  
	html {
	  font-size: 16px;
	}
  }
  
  @media only screen and (min-height: 1200px) {
  
	html {
	  font-size: 20px;
	}
  }
  
  
  @media only screen and (min-height: 1600px) {
  
	html {
	  font-size: 24px;
	}
  }
  
  
  @media only screen and (max-height: 540px) {
  
	header{
		margin-left: 5rem;
	}
	p.footer{
		font-size: 1rem;
	}
  
	html {
	  font-size: 8px;
	}
	.center{
		  margin:180px auto;
	  }
  }