: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: 0px;
	
	
	/*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: #dcdcdc;
	margin: 0px 2px;
	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;*/
}

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%;
}

.return{
	font-size: 1.25rem;
	text-decoration: none;
	padding: 0 10px;
}

.return:hover{
background-color: #e9d07a;
}

.toc-title{
font-size: 1.5rem;
border-bottom: 5px double black;
border-top: 5px double black;
text-align: center;
}

.ibc{
	background-color: #221eff;
	color: #fff;
}

.irc{
	background-color: #1e90ff;
	color: #fff;
}

.imc{
	background-color: #5c0a75;
	color: #fff;
}

.ifgc{
	background-color: #cab53d;
	color: #fff;
}

.ipc{
	background-color: #487070;
	color: #fff;
}

.nec{
	background-color: #c70000;
	color: #fff;
}

.nfpa72{
	background-color: #c70000;
	color: #fff;
}


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

.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*/  
}

[class*="level"]{
	display: block;
	text-decoration: none;
	border-bottom: 1px solid black;
}

[class*="level"]:hover{
color: white;
}

.level0{
	background-color: rgb(201, 198, 41);
	padding-left: .5rem;
	border-top: 1px solid black;
	}
	
	.level0:hover{
	background-color: rgba(201, 198, 41, 0.8);
	}

.level0p5{
	background-color: rgba(255, 0, 0, 0.7);
	padding-left: .75rem;
	border-top: 1px solid black;
	}
	
	.level0p5:hover{
	background-color: rgba(255, 0, 0, 0.8);
	}

.level1{
background-color: rgba(106, 0, 193, 0.5);
padding-left: 1.25rem;
border-top: 1px solid black;
}

.level1:hover{
background-color: rgba(106, 0, 193, 0.7);
}

.level2{
padding-left: 1.5rem;
background-color: rgba(255, 140, 0, 0.5);  /*orange*/
}

.level2:hover{
background-color: rgba(255, 140, 0, 0.8);
}


.level3{
padding-left: 2.5rem;
background-color: rgba(0, 255, 0, 0.4); /*green*/
}

.level3:hover{
background-color: rgba(0, 255, 0, 0.9);
}

.level4{
padding-left: 3.5rem;
background-color: rgba(0, 90, 255, 0.5); /*blue*/
}

.level4:hover{
background-color: rgba(0, 90, 255, 0.8);
}

.level5{
padding-left: 4.5rem;
background-color: rgba(234, 238, 22, 0.5); /*bright yellow*/
}
	
.level5:hover{
background-color: rgba(234, 238, 22, 0.8);
}

.level6{
	padding-left: 5.5rem;
	background-color: rgba(241, 113, 209, 0.5); /*pink*/
	}
		
	.level6:hover{
	background-color: rgba(241, 113, 209, 0.8);
	}

.dashed{ /*Separator line between non-contiguous code section and subsection*/
color: black;
border-top: dashed 2px;
background-color: transparent;
}

/*Google symbols*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/*Used to denote guest accessible models*/
.star-symbol{
	font-size: 1.25rem;
}



co-container{
display: grid;
grid-area: container;
grid-template-areas:
"user      user      user      user      user"
"logo      logo      logo      logo      logo"
"main      main      main      main      main"
"footer    footer    footer    footer    footer"
;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: max-content max-content 1fr max-content;
min-height: 100vh;
}

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

}

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

div.codeoperative-logo{
align-self: start;
margin-left: 5px; 
}

div.codesimulator-logo{
align-self: center;
margin-left: auto; 
margin-right: .75rem;
margin-top: 1.5rem;
}

co-logo{
display: flex;
grid-area: logo;
/*border-bottom: 3px solid black;*/
/*background-color: yellow;*/
}

a{
	display: inline-block;
	margin: 2px;
	text-decoration: none;
	}

co-user{
grid-area: user;
display: flex;
font-size: clamp(12px, 2.5vw, 24px);
background-color: rgba(255, 255, 0, 0.5);
justify-content: space-between;
align-items: center;
padding: 0 10px;
}

co-user>div{
margin: 5px;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px gray;
color: black;
}

co-user>div>a{
	padding: 0 .5rem;
	font-size: clamp(12px, 2.5vw, 24px);
	}

.trademark{
  font-size: clamp(1.25rem, 6vw, 2rem);
}

main{
grid-area: main;
font-size: .75rem;
/*background-color: gray;*/
}

footer{
grid-area: footer;
}

/*CodeOperative main logo***********************************/
img.logo{
	width: clamp(125px, 25vw, 250px);
	height: auto;
	z-index: 2;
}

img.codesimulator-logo{
	width: clamp(125px, 40vw, 450px);
	height: auto;
}

/*Media Queries**************************************************/
@media screen  and (min-width: 767px){
	
.return{
font-size: 1.5rem;
}

.toc-title{
font-size: 2rem;
}

.collapsible {
font-size: 1.5rem;
}

.collapsible::before {
  font-size: 3rem;
  margin-left: 6px;
}

main{
font-size: 1.25rem;
}

}