:root{
	
	/*Change --warning-visible: to 'visible' for testing/staging sites, change to 'hidden' for live site*************/
	/*Change --warning-height: to 'max-content' for testing/staging sites, change to '0px' for live site.************/
	/***************To do the above 2 steps, swap the commenting of the groups below.***********************************************/
	
	/*--warning-visible: visible;  
	--warning-height: max-content;*/
	
	--warning-visible: hidden;  
	--warning-height: 0;
	
	/*Hamburger menu variables*/
	
	--bar-width: clamp(25px, 6vw, 40px);
	--bar-height: calc(var(--bar-width)/8.333);
	--hamburger-gap: calc(var(--bar-width)/8.333);
	--foreground: black;
	--background: white;
	--hamburger-margin: 18px;
	--animation-timing: 100ms ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

*{
	box-sizing: border-box;
	margin: 0; /* One number = all four sides, two numbers = top/bottom | left/right, three numbers = top | left/right | bottom, four numbers = top | right | bottom | left */
	padding: 0; /* One number = all four sides, two numbers = top/bottom | left/right, three numbers = top | left/right | bottom, four numbers = top | right | bottom | left */
	/*outline: 2px solid #f00 !important;*/ /*For testing, this puts an outline around every element- really neat!*/
}

/*Used to take precedence over injected stylesheets (which can come from user/browser extensions).  Classes left out are Google symbols, otherwise they don't work as intended.*/
*:not(:is(.player, .gear-menu, .material-symbols-outlined, .md-adj, .material-icons)){
	font-family: "Roboto Flex", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
	/*For below to work, the variation name (slnt, wdth, GRAD, etc.) and matching value has to be included in the list of attributes of the font file <link> in the HTML page. */
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

html{
	/*height: 100vh;*/
	background-image: url('../RoughScreenShot_Lightened15.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: whitesmoke;
	margin: 0 15px;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /*IOS notch adjustment*/
	/*outline: 20px solid #f00;*/
	outline-offset: -2px; /*Used to display html outline on screen- otherwise it is outside the viewer.  See * above.*/
	/*border: 10px dashed hotpink;*/ /*for testing*/
	/*border: 20px solid transparent;*/
}

/*Set on LoginPDO.php*/
.html-override1{
background-image: none;
}

body{
	/*background: none;*/
	 min-height: 100vh;
	-webkit-text-size-adjust: 100%; /*Prevents funky text resizing, landscape to portrait, in IOS.*/
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
}

.hamburger-menu {
	--x-width: calc(var(--hamburger-height) * 1.41421356237); /* square root of 2 */
	
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	/*background: red;*/
	width: max-content;
	position: absolute;
	top: var(--hamburger-margin);
	right: var(--hamburger-margin);
	z-index: 5;
	cursor: pointer;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--foreground);
	border-radius: 5px;
	transform-origin: left center;
	transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing);
}

.hamburger-menu input{
	appearance: none;
	pointer-events: none;
}

.hamburger-menu input:checked{
	opacity: 0;
	width: 0;
}

.hamburger-menu:has(input:checked)::before{
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after{
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu:has(input:checked) + .overlaymenu{
	opacity: 100%;
	pointer-events: auto;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu:has(input:focus-visible)
{
	border: 1px solid var(--background);
	box-shadow: 0 0 0 1px var(--foreground);
}

/*Menu that displays when Hamburger menu is selected*********************/
.overlaymenu{
	padding: 0.5rem 1rem;
	padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
	min-height: 100vh;
	width: clamp(180px, 30vw, 320px);
	position: absolute;
	right: 0;
	background-color: dodgerblue;
	z-index: 4;
	opacity: 0%;
	pointer-events: none;
	border: 1px solid black;
  box-shadow: -8px 8px 15px;
}

a{
	display: inline-block;
	margin: 2px;
	padding-left: 10px;
	padding-right: 10px;
	white-space: nowrap; /*Prevents menu items from wrapping*/
	font-size: clamp(16pt, 3vw, 24pt);
	justify-self: center;
	text-decoration: none;
	color: black;
}

a:hover, a:focus{
	background-color: #e9d07a;
}

a.onpage{
	display: inline-block;
	font-size: clamp(16pt, 3vw, 24pt);
  white-space: normal;
	text-decoration: none;
	color: black;
}

hr{
	margin: 7px 0;
}

/*GRID*********************************************************/
co-container{
	display: grid;
	min-height: 100vh;
	grid-template-areas:
	"logo"

	"cslogo"
	
	"main"
	
  "links"

  "notice"

	"footer";
	
	grid-template-columns: 1fr;
	gap: 10px;
  grid-template-rows: auto auto auto auto 1fr auto;
}

co-warning{
	display: block;
	visibility: var(--warning-visible);
	height: var(--warning-height);

}

a.warning, hr.warning{
		visibility: var(--warning-visible);
}

co-logo{
	grid-area: logo;
	display: flex;
}

cs-logo{
	grid-area: cslogo;
  justify-self: center;
}

main{
	grid-area: main;
}

.messagecredits{
font-size: clamp(12px, 5vw, 24px);
font-weight: bold;
}

/*session/index.php start*****************************/
co-links{
grid-area: links;
display: flex;
/*flex-wrap: wrap;*/
justify-content: center;
/*align-content: flex-start;*/
padding: 0 10px;
}

co-links>div{
margin: 10px 3px;
background-color: white;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px gray;
color: black;
width: fit-content;
height: fit-content;
}

co-links>div>a{
font-size: clamp(12px, 2.5vw, 24px);
}

co-limitations{
grid-area: notice;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}



/*session/index.php end****************************/

.justify{
	text-align: justify;
	text-justify: inter-word;
}

.center{
	text-align: center;
}

.ul{
	text-decoration: underline;
}

.inputgroup{
		margin: 15px 0;
}

input.a{
	width: 100%;
	font-size: 1rem;
	line-height: 1.5rem;
	padding-left: 5px;
}

.co-submit{
	background-color: dodgerblue; /*#e9d07a*/
	color: white;
	border-radius: 7px;
	border-color: black;
	font-size: clamp(14pt, 5vw, 20pt);
	width: fit-content;
	margin-left: 5px;
	padding-left: 5px;
	padding-right: 5px;
	height: max-content;
	
	cursor: pointer;
	text-shadow: 2px 2px #166483;
	transition: all .3s;
}

.co-submit:hover{
	box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
	transform: scale(1.06);
	color: #e6e600;
}

/*Tables on History page (opens after entering credentials into Training Log page).**********************/	
table.a{/*User Data*/
	table-layout: auto;
	text-align: center;
	font-size: clamp(13px, .81rem, 26px);
	color: white;
	background-color: #229ac8;
	border: 3px solid black;
	border-spacing: 0;
	border-collapse: collapse;
}
	
table.b{/*User Name*/
	text-align: center;
	font-size: clamp(13px, 1rem, 26px);
    padding: 0 2px;
	width: fit-content;
	color: white;
	border: 3px solid black;
	background-color: #229ac8;
}

table.total{/*3D-Codes Total Available (of #)*/
	table-layout: auto;
	font-size: clamp(13px, .81rem, 26px);
	color: white;
	background-color: #229ac8;
	border: 3px solid black;
	border-spacing: 0;
  border-left-style: none;
	border-collapse: collapse;
	padding: 0 2px;
  
}

table.ddda{/*3D-Codes User Data*/
	table-layout: auto;
	text-align: center;
	font-size: clamp(13px, .81rem, 26px);
	color: white;
	background-color: #229ac8;
	border: 3px solid black;
	border-spacing: 0;
	border-collapse: collapse;
	float: left;
}
	
th.a{/*All headers except Module*/
	border: 1px solid rgb(0, 0, 0);
	padding: 0 5px;

}

	
th.b{/*Module header only*/
	width: 150px; /* Original- 450px: */
	border: 1px solid black;

}

td{
	border: 1px solid black;
	padding: 0 5px;
}


td.earned{
  text-align: right;
	padding-right: 2px;
}

td.total{
  text-align: left;
	padding-left: 2px;
}

#fullname{
	border: none;
	padding: 0 2px;
}


/*Non-critical data not displayed on small devices*/
.noncritical{
	display: none;
}


footer{
	grid-area: footer;
	display: flex;
	font-size: clamp(12pt, 3vw, 16pt);
	margin-bottom: 5px;
	margin-left: 10px;
}

/*Collapsible Sections************************************************************************************/
.collapsible {
  background-color: #dcdcdc;  /*#eee*/
  color: #000 !important;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
}

.chapter{
	border-bottom: 1px solid black;
}

.section{
	padding-left: 1rem;
	/*text-decoration: underline;*/
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover)
.active, .collapsible:hover {
  /*background-color: #ccc;
}*/

/* Style the collapsible content. Note: hidden by default */
.content {
  /*padding: 5px 10px;*/
  display: none;
  overflow: hidden;
  /*background-color: #f1f1f1;*/
}

.collapsible::before {
  content: '\002B'; /* Unicode character for "plus" sign (+)  \002B  \2795*/
  color: black;
  font-size: 1.5rem;
  margin-left: 3px;
}

.active::before {
  content: "\002D"; /* Unicode character for "minus" sign (-)  \002D \2212  \2796*/  
}

/*End of Collapsible section**************************************************************************
******************************************************************************************************
******************************************************************************************************/


/*CodeOperative main logo***********************************/
img.logo{
	width: clamp(150px, 40vw, 150px);
	height: auto;
	z-index: 2;
	margin-left: 10px;
}

/*ICC Preferred Education Provider logo********************/
img.icc{
    width: clamp(75px, 30vw, 150px);
	height: auto;
}

img.codesimulator-logo{
width: clamp(100px, 80vw, 500px);
}

/*********************************************************/
/*Media queries*******************************************/
/*********************************************************/
@media screen  and (min-width: 567px){
	/*Should we hide columns here, or hide them by default and display only in larger screens below???*/
	
	th.b{/*Module header only*/
	width: 350px; /* Original- 450px: */
}

    th.a{/*All headers except Module*/
	padding: 0 7px;
}

/*Non-critical data not displayed on small devices*/
.noncritical{
	display: table-cell;
}
}

@media screen and (orientation: landscape){
.messagecredits{
font-size: clamp(12px, 5vh, 24px);
}
img.codesimulator-logo{
width: clamp(100px, 70vh, 700px);
}
}

@media screen  and (min-width: 768px){
	
  co-container{
	grid-template-areas:
	"logo   logo  logo"

	"cslogo cslogo cslogo"
	
	"....   main  ....."

  "links  links  links"

  "....  notice  ...."
	
	"footer footer footer";
	
	grid-template-columns: 1fr 10fr 1fr;
	gap: 3px;
    grid-template-rows: auto auto auto auto 1fr auto;
  }	
  
  img.logo{
	width: clamp(150px, 40vw, 300px);
  }
  
  .inputgroup{
		margin: 30px 0;
}
	
}

@media screen  and (min-width: 1200px){
	
input.a{
	width: 50%;
}

.leadingspace{
	padding-left: 28px;
}
	
}