/*****************************************************
*                                                    *
*        EXAM APP COMMON CSS RULES                   *
*                                                    *
******************************************************/

/*Set size of page*/

html  {height:100%;width:100%;}
body  {height:98%;width:100%;}
#teachermain  {overflow:hidden}
body  {position:relative;}
body  {background-color:#fff;font-family:  arial, sans-serif;}
body p {font-size:1em;}


button {width:auto;background-color:#d55;font-size:1.0em;}
button {font-weight:bold;}
button {color:white;border-width:1px;border-color:#eee;border-radius:3px;}
button {margin-right:5px;visibility:visible;}


/*****************************************************
*                                                    *
*        EXAM APP LOGIN DIALOG BOX CSS RULES         *
*                                                    *
******************************************************/

.closebox {position:absolute}
.closebox {top:0px;right:1px;}
.closebox {background:#eee;color:rgb(80% 40% 40%);font-weight:bold;}
.closebox {font-size:0.9em;}


#authenticate {position:absolute;top:15%;left:25%;;width:30%;height:55%;z-index:100;}
#authenticate {border-style:solid;border-width:5px;border-color:#d11} /*border-color:#5a1 */
#authenticate {display:block;transition:opacity 1.2s;}
#authenticate {background-color:#eee;opacity:1;}
#authenticate .usercreds {position:static;margin:25px;}
#authenticate span{display:inline-block;font-size:1.5em;}
#authenticate input{display:inline-block;line-height:1.6em;vertical-align:3px;width:55%;}
#authenticate #signon {position:absolute;top:35%;left:35%}
#authenticate #signon {margin-top:20px;margin-right:25px;}
#authenticate #signon :hover{cursor:pointer;}
#authenticate #signon button {display:inline-block;font-size:1.2em;}

#logonnewuser {position:absolute;}
#logonnewuser {top:60%;left:20%;}
#logonnewuser {border:inset 5px #d55;border-radius:5px}
#logonnewuser  {background-color:#eee;opacity:1;}

#chgpswd {position:absolute;}
#chgpswd {top:80%;left:22%;}
#chgpswd {border:inset 5px #d55;border-radius:5px}
#chgpswd  {background-color:#eee;opacity:1;}



#logonnewuser button {cursor:pointer;color:rgba(85%,10%,30%,0.7);}
/*#logonnewuser button {border:black 3px solid;border-radius:8px;}*/
#logonnewuser button {margin-left:auto;margin-right:auto;}
#logonnewuser button {font:small-caps bold 1.5em sans-serif;text-align:center;}
#logonnewuser button {background-color:#eee;opacity:1;}

#chgpswd button {cursor:pointer;color:rgba(85%,10%,30%,0.7);}
/*#chgpswd button {border:black 3px solid;border-radius:8px;}*/
#chgpswd button {margin-left:auto;margin-right:auto;}
#chgpswd button {font:small-caps bold 1.5em sans-serif;text-align:center;}
#chgpswd button {background-color:#eee;opacity:1;}




/* ----  APP LOGON/USER REGISTRATION CSS RULES ---- */


#logonnewuserdiv {position:absolute; width:25%;top:10%;right:9%;}
#chgpswdpanel {position:absolute; width:25%;top:15%;right:9%;}
#logonnewuserdiv, #chgpswdpanel {padding:8px;border-radius:5px;}
#logonnewuserdiv, #chgpswdpanel {background-color:rgba(80% 40% 40% 0.5);}
#logonnewuserdiv, #chgpswdpanel {border:4px outset rgb(80% 25% 20%);}

#logonnewuserdiv, #chgpswdpanel {display:none;
grid-template-columns:1fr;
grid-template-rows:auto;
grid-auto-rows:auto;
grid-auto-flow:dense;
grid-gap:10px;
}



/*****************************************************
*                                                    *
*        EXAM APP MAIN PAGE CSS RULES                *
*                                                    *
******************************************************/

/*#banner {position:relative;height:25%;}*/
#banner {position:relative;height:22%;}
#banner {border-top: solid 20px #d11;}
#banner {background-color:#e8dada;}
/*#banner {border-bottom: solid 1px #d11;}*/


#mathLogo {position:absolute;}
#mathLogo {top:3%;left:2%;}
#mathLogo {font-size:1.4em;font-variant:small-caps;}
#mathLogo:hover {cursor:pointer;}
#mathLogo span{color:black;}
#mathLogo a:link, a:visited {text-decoration:none;}

#bannerTitle  {position:absolute;}
#bannerTitle {top:3%; left:20%;text-align:center;width:55%;}
#bannerTitle  {font-size:1.8em;}
#subTitle {font-size:80%;}

#menubar {position:absolute;top:75%;}
#menubar {padding:4px;}
#menubar {width:100%;margin-right:0;margin-left:0;text-align:left;}
#menubar {background-color:#d11;color:white;}


#logoff {position:absolute;}
#logoff {top:20%; right:2%;text-align:center;width:10%;padding:4px;}
#logoff {font-size:1.8em;font-variant:small-caps;border-radius:4px;} /*border-color:#5a1*/
#logoff:hover {cursor:pointer;}

#examappfrm {position:absolute;top:27%;bottom:2%;left:0;right:2%;}
#examappfrm {overflow-x:hidden; overflow-y: hidden;}
#examappfrm {border:3px black solid;}

#examappfrm iframe {width:100%;height:100%;}


/*****************************************************
*                                                    *
*             EXAM APP STUDENT MAIN PAGE             *
*                                                    *
******************************************************/

#stdntexamsgrid {display:grid;
grid-template-columns:3fr 2fr 12fr 3fr 2fr 2fr;
grid-template-areas:"hdr hdr hdr hdr hdr hdr";
grid-template-rows:minmax(1em,3em);
grid-auto-row:minmax(auto,3em);
grid-column-gap:5px;
grid-row-gap:3px;
}
.scrollcontainer {overflow:hidden scroll;height:72%;}
#stdntexamsgrid .stdnthdr {grid-area:hdr;}
#stdntexamsgrid .examstatus {text-decoration:underline;color:purple;cursor:pointer;}
#mynotes:hover {cursor:pointer;}


/*****************************************************
*                                                    *
*              STUDENT NOTES PAGE CSS RULES          *
*  Rules for page that shows student notes.          *
*                                                    *
******************************************************/
#close01 {position:absolute;}
#close01 {top:20%; right:2%;text-align:center;width:10%;padding:4px;}
#close01 {font-size:1.8em;font-variant:small-caps;border-radius:4px;} /*border-color:#5a1*/
#close01:hover {cursor:pointer;}

#notesdiv {position:absolute;}
#notesdiv {padding:0;}
#notesdiv {top:27%; bottom:1%;right:1%;left:2%;text-align:center;width:95%;}

#notesdiv {border:solid 4px #f8dada;border-radius:5px;}

#notescontent {position:absolute;}
#notescontent {left:1%;right:1%;width:98%;top:1%;bottom:1%;}
#notescontent {margin:0;resize:none;}
#notescontent {border:solid 1px #e8bada;border-radius:5px;}

#closenotes {position:absolute;}
#closenotes {top:20%; right:2%;text-align:center;width:10%;padding:4px;}
#closenotes {font-size:1.8em;font-variant:small-caps;border-radius:4px;} /*border-color:#5a1*/
#closenotes:hover {cursor:pointer;}



#savenotes:hover {cursor:pointer;}
#savenotes {position:absolute;}
#savenotes {left:45%;right:45%;;top:1%;bottom:1%;}

/*****************************************************
*                                                    *
*       SHOW, GRADE, & REVIEW TEST EXAM CSS RULES    *
*  Rules for page that allows students to take and   *
*  reveiw an exam and for teacher to grade exam      *
*                                                    *
******************************************************/
#questptval {font-weight:600;margin-right:1em;font-size:0.8em;}

#examshowbanner {position:relative;height:12%;}
#examshowbanner {border-top: solid 1.0em #d11;}
#examshowbanner {background-color:#e8dada;}

#examuser {position:absolute;top:5%;left:2%;}
#examdate {position:absolute;top:5%;left:21%;}
#examviewclose, #examviewcancel {position:absolute;top:5%;right:5%;}

#examviewclose:hover {cursor:pointer;}
#examviewcancel:hover {cursor:pointer;}

#examuser,#examdate,#examviewclose {font-size:1.2em;}
#examviewcancel {font-size:1.3em;}

#examshowtitle  {position:absolute;}
#examshowtitle {top:5%; left:20%;text-align:center;width:65%;}
#examshowtitle  {font-size:1.7em;}
#examshowsubTitle {font-size:90%;}

#exammenubar {position:absolute;bottom:5%;}
#exammenubar {padding:2px;}
#exammenubar {width:100%;margin-right:0;margin-left:0;text-align:left;}
#exammenubar {background-color:#d11;color:white;}


#expandquest {position:absolute; top:17%;bottom:4%;left:1%;right:1%;}
#expandquest {overflow:auto;background-color:rgba(100%,70%,70%,0.95);}
#expandquest {z-index:1000;border:7px rgb(90%,70%,70%) outset;}
#expandquest {font-size:1.2em;padding-left:5px;padding-right:5px}
#expandquest:hover {cursor:pointer;}
#examquestion:hover {cursor:pointer;}


/*#examdisplay {border:5px black dashed;}*/
#examquestion, #examchoices {position:absolute; top:17%;overflow:auto;}
#examquestion, #examchoices {height:50%;background-color:rgb(95%,75%,75%);}
#examopenresponse {position:absolute; top:17%;overflow:auto;}
#examopenresponse {height:50%;background-color:rgb(95%,75%,75%);}
#examopenresponse #openendedtext {position:absolute;margin: 0 auto;}
#examopenresponse #openendedtext {top:1%;left:1%;right:1%}
#examopenresponse #openendedtext {font-size:1.3em;width:95%;height:85%;}
#examopenresponse #openendedtext {background-color:rgba(70%,70%,70%,0);resize:none}
#examopenresponse button {position:absolute;margin: 0 auto;}
#examopenresponse button {bottom:0;width:25%;left:1%;right:1%}


#examopenresponse #textresponse {position:absolute;margin: 0 auto;}
#examopenresponse #textresponse {top:1%;left:1%;right:1%;overflow:auto;}
#examopenresponse #textresponse {font-size:0.9em;width:95%;height:65%;}
#examopenresponse #textresponse {background-color:rgba(70%,70%,70%,0);resize:none}
#examopenresponse #maxpoints {position:absolute;margin: 0 auto;}
#examopenresponse #maxpoints {bottom:0;width:45%;left:1%;font-size:0.8em;}
#examopenresponse #earnedpoints {position:absolute;margin: 0 auto;}
#examopenresponse #earnedpoints {bottom:0;width:45%;right:1%;font-size:0.8em;}


#examopenresponse #earnedpointsdiv {position:absolute;margin: 0 auto;}
#examopenresponse #earnedpointsdiv {bottom:0;width:26%;left:35%;font-size:0.8em;}
#examopenresponse #earnedpointsdiv label {margin:0;margin-right:2px;font-size:1.2em;}
#examopenresponse #earnedpointsdiv input {width:22%;}
#examopenresponse #examscore {position:absolute;margin: 0 auto;}
#examopenresponse #examscore {bottom:0;width:20%;left:65%;font-size:0.8em;}


#examopenresponse #comments {position:absolute;margin: 0 auto;}
#examopenresponse #comments {bottom:10%;width:95%;height:15%;right:1%;left:1%;overflow:auto;}
#examopenresponse #comments {background-color:rgba(80%,80%,80%,.70);}
#examopenresponse #comments {border:2px rgb(30%,30%,30%) solid;border-radius:4px;}
#examopenresponse #comments:hover {cursor:pointer;}

#bigcomments {position:absolute;}
#bigcomments {padding:15px;}
/*#bigcomments {top:14%;left:0;width:45%;height:55%;}*/
/*#bigcomments {border:5px inset #e8dada;}*/
/*#bigcomments {background-color:rgba(80%,60%,60%,.95);}*/
/*#bigcomments {line-height:1.3em;font-family:author, cursive, sans-serif;}*/
/*#bigcomments {font-size: 1.2em; text-align:justify;}*/


#bigcomments {top:0;left:1%;width:93%;bottom:5%;}
#bigcomments {border:10px rgba(90%,3%,46%,0.95) inset ;z-index:100;}
#bigcomments {margin-top:2%;overflow:auto;}
#bigcomments {background-color:rgba(89%,89%,98%,0.95);}
#bigcomments {line-height:1.1em;font-family:courier, sans-serif;}
#bigcomments {white-space:pre-wrap;}
#bigcomments {font-size: 1.0em; text-align:left;font-weight:bold;}





#examquestion {left:1%;width:50%;}
#examchoices {right:2%;width:40%;}
#examopenresponse {right:2%;width:50%;}

#examchoices input {background-color:red;height:1.1em;width:1.1em;}
#examchoices p {font-size:1.1em;}
#examchoices p {font-family:courier;font-weight:bold;}
#examquestion p {font-size:1.1em;}

.correctchoice {border:5px green solid;border-radius:7px;}
.incorrectchoice {border:5px red solid;border-radius:7px;}

.codefrag {white-space:pre-wrap;font-family:monospace;font-weight:normal;font-size:1.2em;}
.codefrag {user-select:none;}

.codefrag01 {white-space:pre-wrap;font-family:monospace, sans-serif;font-weight:normal;font-size:0.95em;}
.codefrag01 {user-select:none;}

.codefrag02 {white-space:pre-wrap;font-family:monospace, sans-serif;font-weight:normal;font-size:0.85em;}
.codefrag02 {user-select:none;}

.backgnd01 {background-color:#ccc;}

.freeresponse {white-space:pre-wrap;font-family:courier;font-weight:bold;font-size:0.95em;}


#tbldiv01 {position:relative;width:50%;height:20%;}
/*#tbldiv01 {border:black 2px solid;}*/
#tbldiv01 table:nth-child(1) {top:0;left:0;}
#tbldiv01 table:nth-child(2) {top:0;right:0;}
.table01 {position:absolute;}
.table01 {border-collapse:collapse;}
.table01 {width:15%;}
.table01 td{border:black 1px solid;}
.table01 td{text-align:center;}
.table01 td{padding:0.5em;}
.table01 {margin-bottom:2%;}


#tbldiv02 {position:relative;width:60%;height:20%;}
#tbldiv02 .table01 {position:static;}
#tbldiv02 {display:grid;
grid-template-columns: 25% 50%;
grid-template-rows:auto auto;
grid-column-gap:2em;
grid-row-gap:3em;}
/*#tbldiv02 p {text-align:justify;width:7em;}*/
#tbldiv02 p {margin:0;}
#tbldiv02 p:nth-child(1n+1) {white-space:normal;}


#tbl2017A , #tbl2017B {position:absolute;}
#tbl2017A {top:0;left:0;}

#tbl2017B {top:0;left:40%;}


#tbl2017div {position:relative;width:100% height:40%;margin-bottom:25%}
#tbl2017A {width:10%;border-collapse:collapse;}
#tbl2017A caption {margin-bottom:1em;}
#tbl2017A td {border:black 1px solid;}
#tbl2017A td {padding:1em;text-align:center;}
#tbl2017A tr td:first-child {border-style:none;}
#tbl2017A .idx td {border-style:none;padding-top:0;padding-bottom:1em;}
#tbl2017A .bkgnd {background-color:#ddd;}
/*colgroup #colidx{border:3px solid black;}*/
/*colgroup td{background-color:yellow;}*/


#tbl2017B {width:50%;border-collapse:collapse;}
#tbl2017B caption {margin-bottom:1em;}
#tbl2017B td {border:black 1px solid;}
#tbl2017B td {padding:1em;text-align:center;}
#tbl2017B tr td:first-child {border-style:none;}
#tbl2017B .idx td {border-style:none;padding-top:0;padding-bottom:1em;}
#tbl2017B .bkgnd {background-color:#ddd;}
/*colgroup #colidx{border:3px solid black;}*/
/*colgroup td{background-color:yellow;}*/

#puzzle {height:100%;width:100%;}
#puzzle img{width:70%;}




#examchoices {display:grid;
  grid-template-columns:5% 95%;
  grid-gap:10px;
  align-items:center;
  }


#postgrade {position:absolute;bottom:5%;left:30%;}
#postgrade {font-size:1.2em;}

.questionchoice {transition: background-color 1.0s;}

.questionchoice:hover {cursor:pointer;background-color:rgb(70% 70% 70%);}
#examnavigate,#examdone, #examsaveans {position:absolute;bottom:5%;}

#examdone button {background-color:#d55;font-size:1.8em;font-weight:bold;
color:white;border-width:1px;border-color:#eee;border-style:outset;border-radius:5px;}

#examnavigate button {background-color:#d55;font-size:1.1em;font-weight:bold;
color:white;border-width:1px;border-color:#eee;border-radius:5px;}

#examsaveans button {background-color:#d55;font-size:1.1em;font-weight:bold;
color:white;border-width:1px;border-color:#eee;border-radius:5;}



#questnavigator {position:absolute;top:73%;left:39%;width:30%}
#questnavigator {display:grid;
grid-template-columns:repeat(10,1fr);
grid-column-gap:1px;
grid-row-gap:1px;
}
#questnavigator p {border:2px rgb(95%,40%,40%) solid;border-radiius:8px}
#questnavigator p {margin-top:2px;margin-bottom:2px}
#questnavigator p {background-color:rgb(90%,80%,80%);}
#questnavigator p {text-align:center;}
#questnavigator p:hover {cursor:pointer;}
#questnavigator p:nth-child(1){border:4px rgb(100%,05%,05%) solid;border-radiius:8px}

/*#questnavigator p:nth-child(1) {background-color:green;color:white;}*/


#examnavigate,#examdone, #examsaveans {font-size:1.0em;}
#examdone {left:3%;}
#examnavigate {left:45%;}
#examsaveans {display:none;right:5%;}

#examnavigate button:hover {cursor:pointer;}

.asciigrid {
    white-space:pre;
    font-family:monospace;
}


/*****************************************************
*                                                    *
*    EXAM APP MANAGE QUESTIONS EXAM CSS RULES        *
*                                                    *
******************************************************/
/*MANAGE QUESTIONS QUESTION CHARACTERISTIC CHOICES*/

#langdiv {position:absolute;left:3%;}
#langdiv {display:grid;}
#langdiv {grid-template-columns:auto auto;
grid-template-rows:auto auto; grid-gap:4px}
.questiondetails {border:3px solid rgb(80% 20% 40%);}
.questiondetails {border-radius:5px;}
.questiondetails {font-size:1.1em;}

#questtext {position:absolute;display:grid;}
#questtext {grid-template-columns:1fr;grid-template-rows:auto 1fr;
  grid-gap:1px;
}
#questtext {top:25%;left:2%;}
#questtext p {font-size:1.5em;font-weight:bold;color:rgb(90% 10% 40%);margin:0;}
#questtext p {justify-self:center;}
#questtext textarea{resize:none;}
#questtext textarea {border:2px solid black;border-radius:4px;}


/*MANAGE QUESTIONS CONTROL BUTTONS*/

#controlbuttondiv {position:absolute;display:grid;}
#controlbuttondiv {grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr;
  grid-gap:3px;
}
#controlbuttondiv {top:35%;left:38%;height:40%;}
/*#controlbuttondiv {border:1px black solid;border-radius:4px;}*/
/*#questadd,#questfind, #questupdate {position:absolute;}*/
/*#questadd {top:0;}*/
/*#questfind {top:7%}*/
/*#questupdate {top:14%;}*/


.exambutton  button {width:auto;background-color:#d55;font-size:0.9em;}
.exambutton  button {font-weight:bold;}
.exambutton  button {color:white;border-width:1px;border-color:#eee;border-radius:3px;}
.exambutton  button {margin-right:5px;visibility:visible;}

/*MANAGE QUESTIONS ANSWER CHOICES BOX*/

#answerchoicesbox {position:absolute;padding:3px;}
#answerchoicesbox {top:5%;right:2%;height:90%;overflow:scroll;}
#answerchoicesbox {border:2px black solid;}
#answerchoicesbox {border-radius:10px;padding:3px;}

#answerchoices {display:grid;}
#answerchoices {border:1px white solid;border-radius:10px;}
#answerchoices
{grid-template-columns:5vw 1fr 5vw 5vw;
grid-template-rows:auto auto auto auto;
grid-gap:5px;
}

#answerchoices {background-color:pink;}

.answer {align-self:center;justify-self:center;}

/*******************************************************************/
/*using percentages on radio does not work when the radio button is
  the only item in the row, investigate why */
/*.answer {height:200%;width:200%;}*/
/*******************************************************************/

/* but em on radio does work!. investigate why!!*/
.answer {height:1.2em;width:1.2em;}
.answer {background-color:rgb(80%,80%,80%);}

.choicetext {resize:none;}

.colhdr ,.colhdrmain {border:magenta solid 3px;border-radius:8px;}
.colhdrmain {text-align:center;}
.colhdr  {font-size:0.7em;text-align:center;}
.choicetext {border:lightgreen solid 1px;border-radius:8px;}
.choicetext {align-self:center;}

.blankchoice, .deletechoice{font-size:.6em;align-self:center;}
.blankchoice, .deletechoice {border:blue solid 1px;border-radius:14px;}
.blankchoice:hover, .deletechoice {cursor:pointer;}
.blankchoice {background-color:rgb(80%,80%,80%);color:black;}

.deletechoice {background-color:rgb(95%,3%,10%);color:white;}



/*****************************************************
*                                                    *
*                EXAM APP MANAGE TABLES              *
*                                                    *
******************************************************/

#tablechoicediv {position:absolute;top:20%;left:15%;width:40%;}
#tablechoicediv {display:grid;}
#tablechoicediv {grid-template-columns:auto auto;
grid-template-rows:auto auto; grid-gap:4px}

#updttbls:hover {cursor:pointer;}

#updttbls {width:auto;background-color:#d55;font-size:0.9em;}
#updttbls  {font-weight:bold;}
#updttbls  {color:white;border-width:1px;border-color:#eee;border-radius:20px;}



/*****************************************************
*                                                    *
*        EXAM APP USER REGISTRATION CSS RULES        *
*                                                    *
******************************************************/

#newuserdiv {position:absolute; width:50%;}

#newuserdiv {display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto;
grid-auto-rows:auto;
grid-auto-flow:dense;
grid-gap:10px;
/*grid-template-areas:*/
/*"hdr hdr"*/
/*"c1 c2"*/
/*"ftr ftr";*/
}

/*#buttondiv {grid-area:ftr}*/
/*#buttondiv {grid-area:ftr;justify-self:center;}*/
/*#newuserdiv .header {grid-area:hdr; justify-self:center;}*/

#buttondiv {grid-column:1 / span 2 ;justify-self:center;}
#newuserdiv .header {grid-column:1 / span 2;justify-self:center;}
#newuserdiv .set01 {grid-column:1;}
#newuserdiv .set02 {grid-column:2;}



#regiskeydiv {position:absolute;right:15%;width:25%;height:40%}
#regiskeydiv {display:grid;
grid-template-columns:1fr 1fr;
/*grid-template-rows:auto;*/
/*grid-auto-rows:auto;*/
grid-template-rows:minmax(2em,2em);
grid-auto-rows:minmax(2em,2em);
grid-auto-flow:dense;
grid-column-gap:1px;
grid-row-gap:11px
}

#regiskeydiv button {border:2px black solid;border-radius:8px}
#regiskeydiv button  {cursor:pointer;font-size:.9em;}
#regiskeydiv button  {grid-column:1 / span 2 ;grid-row:span 2;justify-self:center;}
#regiskeydiv #regishdr  {grid-column:1 / span 2 ;justify-self:center;}



/*****************************************************
*                                                    *
*           EXAM APP MAKE EXAM CSS RULES             *
*                                                    *
******************************************************/

/*#makeexamcriteria, #makeexamquestlist {position:absolute;}*/
#makeexamcriteria {position:absolute;}
#makeexamaddedquests, #makeexamcntlbuttons {position:absolute;}
#makeexamrandstructlist {position:absolute;}
#questlistdiv, #randlistdiv, #addedquestsdiv{position:absolute;overflow:scroll;}
#questlistdiv, #randlistdiv {top:37%;left:1%;width:45%;height:45%;margin-bottom:0;}
#questlistdiv, #randlistdiv {border:2px black solid;}
#questlistdiv, #randlistdiv {border-radius:10px;padding:3px;}

#makeexamcriteria {left:1%;width:45%;margin-bottom:0;}
#makeexamcriteria {display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-row-gap:5px;
grid-column-gap:5px;
grid-template-areas:
"hdr hdr hdr"
"sel sel sel"
}
#makeexamcriteria p {grid-area:hdr;margin:2px;}
#makeexamcriteria button {border:black 2px solid;border-radius:6px;}
#makeexamcriteria button {font-size:0.9em;cursor:pointer;}

/*#makeexamquestlist {left:1%;top:35%;width:45%;height:40%;}*/
#makeexamquestlist {display:grid;
grid-template-columns:1fr 16fr 2fr;
grid-row-gap:5px;
grid-column-gap:5px;
grid-template-areas:
"hdr hdr hdr"
}
#makeexamquestlist .header {grid-area:hdr;margin:1px 0 2px 0;}
#makeexamquestlist input {justify-self:center;height:1.5em;width:1.5em;}
#makeexamquestlist button  {border:2px black solid;border-radius:8px}
#makeexamquestlist button  {cursor:pointer;font-size:.9em;}

#custranddiv {display:none;}
#makeexamrandstruct {display:none;}
#randlistdiv {display:none;}
/*#makeexamrandstructlist {left:1%;top:35%;width:45%;}*/
#makeexamrandstructlist {display:grid;
grid-template-columns:5fr 30fr 3fr;
grid-row-gap:5px;
grid-column-gap:5px;
grid-template-areas:
"hdr hdr hdr"
}
#makeexamrandstructlist .header {grid-area:hdr;margin:1px 0 2px 0;}
#makeexamrandstructlist button {border:2px black solid;border-radius:8px}
#makeexamrandstructlist button {cursor:pointer;font-size:.9em;}
#makeexamrandstructlist input[type="number"] {background-color:lightblue;}
#makeexamrandstructlist input[type="number"] {text-align:center;}
#makeexamrandstructlist textarea{resize:none;}


#addedquestsdiv {right:2%;width:45%;height:100%;}
#addedquestsdiv  {border:2px black solid;}
#addedquestsdiv  {border-radius:10px;padding:3px;}
/*#makeexamaddedquests {}*/
#makeexamaddedquests {display:grid;
grid-template-columns:1fr 6fr 1fr;
grid-row-gap:5px;
grid-column-gap:5px;
grid-template-areas:
"hdr hdr hdr";
}
#makeexamaddedquests .header {grid-area:hdr;margin:2px;}

#makeexamaddedquests button {border:2px black solid;border-radius:8px}
#makeexamaddedquests button {cursor:pointer;font-size:.8em;}


#makeexamcntlbuttons {left:1%;bottom:0;width:45%;}
#makeexamcntlbuttons {display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:5em;
grid-template-areas:
"hdr hdr";
}
#makeexamcntlbuttons .header {grid-area:hdr;margin:0;}
#makeexamcntlbuttons button  {border:2px black solid;border-radius:8px;}
#makeexamcntlbuttons button  {cursor:pointer;font-size:.9em;}


/*****************************************************
*                                                    *
*                    EXAM MANAGEMENT                 *
*                                                    *
******************************************************/
#examgtcriteria {position:absolute;top:2%;width:55%;height:90%;}
#examgtcourse {position:absolute;top:1%;}



#examgtcontrols {position:absolute;bottom:2%;width:25%;}
#examgtstudentlist {position:absolute;top:2%;right:1%;width:40%;height:90%;}

#examgtstudencriteria {position:absolute;top:1%;height:5%;}
#examgtrostercontainer {position:absolute;top:10%;height:90%;}
#examgtrostercontainer {overflow:auto;}
#examgtstudents  input {height:1.1em;width:1.1em;}
#examgtstudents {display:grid;
grid-template-columns:4fr 15fr 15fr 6fr 6fr;
grid-template-areas:"box chkall clrall clrall clrall"
                    "... ... ... ... ...";
grid-column-gap:2px;
grid-template-rows:minmax(1em,2em);
grid-auto-rows:minmax(1em,2em);
align-items:center;
}
#checkallbox {grid-area:box;}
#checkalltxt {grid-area:chkall;}
#clearall{grid-area:clrall;justify-self:center;}
#clearall:hover {cursor:pointer;}


/*#examgtexams {position:absolute;top:8%;height:10%;}*/

#examlistcontainer {position:absolute;top:8%;height:40%;}
#examlistcontainer {overflow:auto;}
#examgtexams {display:block;
grid-template-columns:2fr 5fr 3fr 3fr 12fr 21fr;
grid-column-gap:2px;
grid-template-rows:minmax(1em,2em);
grid-auto-rows:minmax(1em,2em);
align-items:center;
}


/*#examgtquestions {position:absolute;top:50%;height:40%;}*/
#examquestscontainer {position:absolute;top:50%;height:40%;}
#examquestscontainer {border:rgb(40% 40% 40%) 2px solid;}
#examquestscontainer  {overflow:auto;}
#examgtquestions {display:block;
grid-template-columns:1fr;
grid-row-gap:2px;
grid-template-rows:minmax(1em,auto);
grid-auto-rows:minmax(1em,auto);
align-items:center;
}



/*****************************************************
*                                                    *
*    EXAM APP PERFORMANCE MANAGEMENT CSS RULES       *
*     For page that shows summary of given exams     *
*                                                    *
******************************************************/
#perfmgt {overflow-x:hidden; overflow-y: auto;}

#performexamcriteria {position:absolute;top:0;height:30%;width:20%;}
#performexamcriteria {display:grid;
grid-template-columns:1fr;
grid-row-gap:5px;
}


#performexamfilter {position:absolute;top:30%;height:25%;width:20%;}
#performexamfilter {display:grid;
grid-template-columns:1fr 1fr;
grid-row-gap:5px;
grid-column-gap:10px;
grid-auto-flow:dense;
}

#performexamfilter .col01 {grid-column: 1;}
/*#performexamfilter .col02 {grid-column: 2;grid-row:span 2;}*/
#performexamfilter .col02 {grid-column: 2;}

#performexamfilter p{grid-column: 1 / span 2;   margin-top:2em;}
#performexamfilter button  {border:2px black solid;border-radius:8px;}
#performexamfilter button  {cursor:pointer;font-size:1.1em;}


#performexamgrid {position:absolute;top:0;right:3%;height:100%;width:70%;}
#performexamgrid {overflow:auto;}
#performexamgrid {display:grid;
grid-template-columns:1fr 6fr 3fr 9fr 3fr 4fr;
grid-template-areas:"hdr hdr hdr hdr hdr hdr";
grid-template-rows:minmax(1em,auto);
grid-auto-rows:minmax(1em,auto);
grid-column-gap:10px;
grid-row-gap:1.5em;
align-items:start;
}

#performexamgrid .performhdr {grid-area:hdr;}
#performexamgrid  p {margin:0;}
/*#performexamgrid .chkbx {align-self:end;margin:0;height:1.2em;width:1.2em;}*/
/*#performexamgrid .examscore {justify-self:center}*/


#displaytakeexamgrid {position:absolute;top:0;right:3%;height:100%;width:70%;}
#displaytakeexamgrid {overflow:auto;}
#displaytakeexamgrid {display:none;
grid-template-columns:1fr 16fr 7fr 3fr 4fr;
grid-template-areas:"hdr hdr hdr hdr hdr";
grid-template-rows:minmax(1em,auto);
grid-auto-rows:minmax(1em,auto);
grid-column-gap:10px;
grid-row-gap:1.5em;
align-items:start;
}

#displaytakeexamgrid .performhdr {grid-area:hdr;}
#displaytakeexamgrid  p {margin:0;}
/*#displaytakeexamgrid .chkbx {align-self:end;margin:0;height:1.2em;width:1.2em;}*/
/*#displaytakeexamgrid .examscore {justify-self:center}*/





#examsonlydspy {position:absolute;top:0;right:3%;height:100%;width:70%;}
#examsonlydspy {overflow:auto;}

#examsonlydspy  {display:none;
grid-template-columns:1fr 5fr 3fr 8fr 3fr 3fr 12fr 3fr 2fr;
grid-template-areas:"hdr hdr hdr hdr hdr hdr hdr hdr hdr";
grid-template-rows:minmax(1em,auto);
grid-auto-rows:minmax(1em,auto);
grid-column-gap:2px;
grid-row-gap:1.5em;
align-items:start;
}

#examsonlydspy .examonlyhdr {grid-area:hdr;}
#examsonlydspy p {margin:0;}
/*#examsonlydspy  .examonlychkbx {align-self:baseline;margin:0;height:1.2em;width:1.2em;}*/
/*#examsonlydspy  .examsonlycnt  {justify-self:center}*/

#performexamscurrent, #performexamsmissing {position:absolute;}

#performexamscurrent {top:0;left:25%;width:35%;}
#performexamsmissing {top:0;left:60%;width:40%;}
#performexamsmissing {overflow:auto;height:100%}

#performexamscurrent {display:none;
grid-template-columns:7fr 2fr 12fr;
grid-template-areas:"hdr hdr hdr";
grid-template-rows:minmax(1em,auto);
grid-auto-rows:minmax(1em,auto);
grid-column-gap:2px;
grid-row-gap:1em;
align-items:start;
}


#performexamscurrent .currenthdr {grid-area:hdr;}
#performexamscurrent  p {margin:0;}

#performexamsmissing {display:none;
grid-template-columns:25px 7fr 2fr 12fr;
grid-template-areas:"hdr hdr hdr hdr";
grid-template-rows:minmax(1em,auto);
grid-auto-rows:minmax(1em,auto);
grid-column-gap:2px;
grid-row-gap:1.5em;
align-items:start;
}

#performexamsmissing .missinghdr {grid-area:hdr;}
#performexamsmissing  p {margin:0;}
/*#performexamsmissing .missingchkbx {align-self:end;margin:0;height:1.2em;width:1.2em;}*/
#performexamsmissing #addnewexam {grid-column: 3 / span 2;}
#performexamsmissing #exitaddexam {grid-column: 2 / span 1;}
#performexamsmissing .addexamsbutton  {border:2px black solid;border-radius:8px;}
#performexamsmissing .addexamsbutton {cursor:pointer;font-size:1.1em;}