/*Code Simulator model page stylesheet. 11/14/23 sft *******************/
: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;
--hover-highlight-bgcolor: #e9d07a;
}

*{
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{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: snow;
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.*/
}

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

.gear-menu{
position: absolute;
right: 5px;
z-index: 5;
cursor: pointer;
}

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

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

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

.md-adj:hover{
background-color: var(--hover-highlight-bgcolor);
}

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

/*Background color selector buttons on 3D-Codes pages**************************************/
.btnbg{
width: clamp(30px, 2.5rem, 50px);
height: clamp(30px, 2.5rem, 50px);
margin-top: 5px;
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px;
border: 1px solid black;
}
.btnbg1{
background-image: url('../websitegreendarkgradient.png');
background-color: green;
}

.btnbg2{
background-image: url('../websitepurplegradient.png');
background-color: purple;
}

.btnbg3{
background-image: url('../websiteorangegradient.png');
background-color: yellow;
}

.btnbg4{
background-image: url('../websiteltbluegradient.png');
background-color: light blue;
}

.btnbg5{
background-image: url('../websiteredgradient.png');
background-color: pink;
}

.btnbg6{
background-image: url('../websitegraygradient.png');
background-color: gray;
}

.btnbg7{
color: black;
background-color: white;
font-size: 1rem;
}

.btnbg8{
color: white;
background-color: black;
border: 1px solid white;
font-size: 1rem;
}

.btnbg9{
color: black;
background-color: gainsboro;
font-size: 1rem;
}

.btnbg10{
color: black;
background-color: dodgerblue;
font-size: 1rem;
}

.btnbg11{
color: white;
background-color: darkblue;
border: 1px solid white;
font-size: 1rem;
}

.btnbg12{
color: black;
background-color: orange;
font-size: 1rem;
}

a{
margin: 2px;
padding: 0 2px;
font-size: clamp(16px, 1.25rem, 32px);
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px gray;
color: black;
}

a:hover, a:focus{
background-color: var(--hover-highlight-bgcolor);
}

hr{
margin: 7px 0;
}

/*user.php***********start*********************************/
co-user-container{
display: grid;
grid-template-areas:
"user done score";
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 40px;
gap: 2px;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
z-index: 6;
overflow: auto;
}

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

co-user>a{/*log out button*/
font-size: clamp(10px, .81rem, 32px);
padding: 0 7px;
}

co-complete{
display: flex;
grid-area: done;
background-color: rgba(255, 165, 0, 1);
font-size: clamp(12px, 2.5vw, 24px);
align-items: center;
justify-content: center;
padding: 0 2px;
}

co-complete>p{
text-align: center;
  }


co-credits{
display: flex;
grid-area: score;
background-color: rgba(0, 155, 0, 1);
align-items: center;
justify-content: center;
font-size: clamp(12px, 2.5vw, 24px);
padding: 0 2px;
}
/*user.php***********end***********************************/

/*logtraining.php*********start*****************************/

co-logt-container{
  display: grid;
  grid-area: lt-container;
  grid-template-areas:
  "... ....... ..."
  "... lt-info ..."
  ;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows: 50px 1fr;
  min-height: 100vh;
  gap: 2px;
}

co-logt-info{
display: block;
grid-area: lt-info;
font-size: clamp(18px, 2.5vw, 24px);
}
/*logtraining.php*******end*********************************/

co-container{
display: grid;
grid-area: container;
grid-template-areas:
"logo     dddlogo"
"util     util"
"dddmodel dddmodel"
"audio    audio"
"text     text"
;
grid-template-columns: 1fr 1fr;
grid-template-rows: max-content max-content 1fr max-content 150px;
min-height: 100vh;
gap: 2px;
}

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

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

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

co-dddcodes-logo{
display: flex;
grid-area: dddlogo;
margin-top: 20px;
}

/*Deprecated- save for ref
.trademark{
font-size: clamp(1.25rem, 6vw, 2rem);
padding-top: 1.75vw;
}*/

co-utility{
display: flex;
grid-area: util;
position: relative;
}

co-dddmodel{
grid-area: dddmodel;
border: 1px solid black;
background-color: gray;
background-image: url('../websitegraygradient.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

co-audio{
display: flex;
grid-area: audio;
font-size: clamp(13px, 1rem, 40px);
background-color: dodgerblue;
align-items: center;
justify-content: center;
vertical-align: center;
color: white;
}
/*See ~ line 386 for co-audio>div>a*/

.player{
display: inline;
background: none;
border: none;
padding: 3px 0px 0px; /*top right/left bottom*/
cursor: pointer;
outline: inherit;
}

.material-icons.md-adj{ /*Audio play and pause icons. Need addtl class in order for font-size to work. See Google info for details.*/
font-size: clamp(36px, 12vw, 48px);
color: white;
}

.material-symbols-outlined.md-adj{
font-size: clamp(24px, 12vw, 30px);
}

co-audiotext{
display: flex;
grid-area: text;
background-color: gainsboro;
color: black;
overflow-y: auto;
padding-left: 1rem;
padding-right: .25rem;
}

h2.commentary-title{
	/*font-size: 2vw;*/
	text-align: center;
	/*margin: 0 auto;*/
}

/*3D-Codes text lists*/
.text-list{
	padding-left: 0;
	margin-left: 1rem;
	line-height: 120%; /*<!--Adjusts space between list items-->*/
}

/*footer.php*************start**********************************/
co-footer-container{
display: grid;
grid-template-areas:
"footer footer"
;  
grid-template-columns: 1fr 1fr; 
}
/*footer.php*************end************************************/

footer{
grid-area: footer;
background-color: #ffffb3;
}

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

img.codesimulator-logo{
width: clamp(100px, 30vw, 250px);
height: auto;
object-fit: contain;
margin-top: -25px;
}

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

.no-display{
  display: none;
}

.yes-display{
  display: flex;  
}

#btn-log-training, co-audio>div>a {
font-size: clamp(12px, 5vw, 24px);
background-color: lime;
margin-left: 3px;
padding: 2px;
border-radius: 5px;
}


.fixedcenter{
  position: fixed;
  bottom: 50%;
  right: 50%;
}
/*dddcodes_access_control.php***************************************/

@keyframes noaccess{
  from {width: 20%; background-color: green;}
  to {width: 80%; background-color: red;}
}

.noaccess{
  top: 10%;
  left: 10%;
  position: fixed;
  background-color: red;
  font-size: clamp(24px, 30vw, 36px);
  text-align: center;
  padding-top: 30px;
  border: 5px solid black;
  width: 80%;
  Height: 80%;
  z-index: 100;
  animation-name: noaccess;
  animation-duration: 3s;
  
}

/*********************************************************************/
/*Media Queries******************************************************/
/*********************************************************************/

/*Don't display the logos for small screens.*/
@media screen and (max-width: 899px){
  img.logo, img.codesimulator-logo {
    display: none;
    }
  }

@media (orientation: landscape) and (max-width: 899px){
  
.overlaymenu{
width: clamp(180px, 45vw, 240px);
}  

.btnbg{
width: clamp(30px, 1.4rem, 50px);
height: clamp(30px, 1.4rem, 50px);
}

#btn-log-training, co-audio>div>a{
font-size: clamp(12px, 5vh, 24px);
}
}

@media (orientation: landscape) /*and (max-width: 899px)*/{

co-container{
grid-template-areas:
"logo  dddlogo dddmodel"
"util   util   dddmodel"
"audio  audio  dddmodel"
"text   text   dddmodel"
;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: max-content max-content max-content 1fr;
max-height: 100vh;
}

.trademark{
font-size: clamp(.75rem, 3vw, 1rem);
}

.material-icons.md-adj{ /*Audio play and pause icons*/
font-size: clamp(16px, 6vw, 32px);
}

.material-symbols-outlined.md-adj{
font-size: clamp(16px, 16vw, 24px);
}

.noaccess{
  font-size: clamp(24px, 30vw, 36px);
}
}

/*Changes for landscape tablet only vs. smaller device landscape from media query above*/
@media screen and (orientation: landscape) and (min-width: 900px) and (max-width: 1024px){
co-container{
grid-template-areas:
"logo    dddmodel"
"dddlogo dddmodel"
"util    dddmodel"
"audio   dddmodel"
"text    dddmodel"
;
grid-template-columns: 1fr 2fr;
grid-template-rows: max-content max-content max-content max-content 1fr;
}

co-dddcodes-logo{
margin-top: 5px;
justify-content: center;
}

.overlaymenu{
width: clamp(180px, 30vw, 255px);
}

.btnbg{
width: clamp(30px, 2rem, 50px);
height: clamp(30px, 2rem, 50px);
}

#btn-log-training, co-audio>div>a{
font-size: clamp(12px, 5vh, 20px);
}
}

@media screen and (min-width: 1025px){
co-container{
grid-template-areas:
"logo   dddmodel"
"dddlogo dddmodel"
"util   dddmodel"
"audio  dddmodel"
"text   dddmodel"
;
grid-template-columns: 1fr 3fr;
grid-template-rows: max-content max-content max-content max-content 1fr;
max-height: 100vh;
}

a{
font-size: clamp(16px, 1.1rem, 32px);
}

co-dddcodes-logo{
margin-top: 5px;
justify-content: center;
}

.overlaymenu{
width: clamp(180px, 30vw, 255px);
}

.btnbg{
width: clamp(30px, 2rem, 50px);
height: clamp(30px, 2rem, 50px);
}

#btn-log-training, co-audio>div>a{
font-size: clamp(12px, 5vh, 20px);
}
}