/* -------------------------------------------
Style Sheet for Check.It worksheets

author: Anthony Beckwith

version: 10.27.19
since: split into 3 files
------------------------------------------- */

body {
   font-family: 'Montserrat';
   font-size: 18px;
   background-color: lightblue;
   color: black;
   tab-size: 4;
}

/* hints should be pushed to the right */
.hints {
   margin-left: 30px;
}

/* animation for emojis when get right answer */
.slide {
   position: absolute;
   left: -100px;
   -webkit-animation: slide 1.8s forwards;
   -webkit-animation-delay: 0s;
   animation: slide 1.8s forwards;
   animation-delay: 0s;
}

@-webkit-keyframes slide {
   100% {
      left: 0;
   }
}

@keyframes slide {
   0% {
      left: 0px;
      font-size: 1px;

   }

   50% {
      font-size: 35px;
      left: 270px;
   }

   100% {
      left: 0px;
      font-size: 1px;
   }
}

/* ALL google sign in stuff */
#icon {
   border-radius: 50%;
   width: 40px;
}

#guest-button {
   border: 3px;
   margin-top: 12px;
   border-color: black;
   background-color: white;
   padding: 5px;
   border-radius: 5px;
   width: fit-content;
   font-family: 'Titillium Web';
}

#google-sign-in {
   border-bottom: 5px;
   font-family: 'Titillium Web';
}
.g_id_signin{
    width: 200px;
    display:inline;
}

#google-sign-out {
   border: 3px;
   margin-top: 12px;
   border-color: black;
   background-color: white;
   padding: 5px;
   border-radius: 5px;
   width: fit-content;
   font-family: 'Titillium Web';
}

/* end ALL google sign in stuff */


/* SWAL alert TYPES:  icon: "success","warning","error","success","info"*/

/* allows to overlay over the rest of the page */
.swal-overlay {
   background-color: rgba(28, 146, 235, 0.45);
}

/* title on top */
.swal-title {
   font-size: 26px;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
   margin-bottom: 28px;
   color: white;
}

/* text in the main box */
.swal-text {
   color: "#92bFd3";
   font-weight: bold;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* styling the main box */
.swal-modal {

   background-color: rgba(28, 146, 235, 0.95);
   border: 5px solid "yellow";
   color: white;
}

/* the OK button section */
.swal-footer {
   background-color: rgb(245, 248, 250);
   margin-top: 32px;
   border-top: 1px solid #E9EEF1;
   overflow: hidden;
}

/* the button itself */
.swal-button {
   padding: 7px 19px;
   border-radius: 2px;
   background-color: rgba(28, 146, 235);
   font-size: 12px;
   border: 1px solid #3e549a;
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}


/* comments box for each problem */
#comments {
   font-family: 'Titillium Web';
}

/* text with button when teacher signs in as student */
#email-temp {
   font-family: 'Titillium Web';
}

/* code or math sayings appear at near top of page */
#sayings {
   font-size: 16px;
   width: 55vw;
}

/* button to link to cheat sheets */
#cheat-sheet {
   background-color: aliceblue;
   font-size: 12px;
   font-family: 'Titillium Web';
   width: fit-content;
   padding: 5px;
   border-radius: 3px;
   text-decoration: none;
}

#cheat-sheet a:link {
   color: #000000;
   text-decoration: none
}

#cheat-sheet a:visited {
   color: #000000;
   text-decoration: none
}

/* code { */
/*
    -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
  -ms-user-select: none;
   user-select: none;
*/
/*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
/* } */

select {
   margin: 10px;
   width: 200px;
   padding: 3px 30px 3px 3px;
   font-size: 13px;
   font-family: 'Titillium Web';
   /*Verdana;*/
   border: 2px solid green;
   height: 30px;

}

#instrucutions {
   font-family: 'Verdana';
}

#student {
   font-family: 'Titillium Web';
}

.inputs {
   /* text inputs for student answers */
   border-radius: 12px;
   font-size: 19px;
   height: 36px;
   width: 500px;
   font-family: Monaco;
   padding-left: 15px;
   color: "#0f9";
   margin-left: 30px;
}

.ID-input {
   /* text input for student ID */
   border-radius: 7px;
   font-size: 15px;
   height: 30px;
   width: 240px;
   margin-left: 15px;
   font-family: Monaco;
   padding-left: 10px;
   color: black;
}

/* COLORS - INPUT TEXT COLOR - SO BEFORE ENTER TEXT IT'S LIGHTER */
input.LemonLime::placeholder {
   color: yellow;
   opacity: 0.6;
}

input.LimeLemon::placeholder {
   color: green;
   opacity: 0.6;
}

input.Bluesy::placeholder {
   color: #1cf;
   opacity: 0.6;
}

input.Dark::placeholder {
   color: rgb(210, 210, 210);
   opacity: 0.6;
}

input.Earthy::placeholder {
   color: #684;
   opacity: 0.6;
}
input.JiangTheme::placeholder {
    color: #684;
    opacity: 0.6;
 }
 

input.Vibrant::placeholder {
   color: white;
   opacity: 0.6;
}

input.CCSpririt::placeholder {
   color: #984;
   opacity: 0.6;
}

input.Pastel::placeholder {
   color: white;
   opacity: 0.6;
}

input.Autumnal::placeholder {
   color: #db9;
   opacity: 0.6;
}

input.Original::placeholder {
   color: black;
   opacity: 0.6;
}

input.Lively::placeholder {
   color: black;
   opacity: 0.6;
}

input.Sunset::placeholder {
   color: "#ffc550";
   opacity: 0.6;
}

.math-inputs {
   margin-left: 10px;
   margin-top: 10px;
   width: 400px;
   background-color: lightgrey;
   height: 80px;
}

.math-inputs.LemonLime::placeholder {
   color: yellow;
   opacity: 0.6;
}

.math-inputs.LimeLemon::placeholder {
   color: green;
   opacity: 0.6;
}

.math-inputs.Bluesy::placeholder {
   color: #1cf;
   opacity: 0.6;
}

.math-inputs.Dark::placeholder {
   color: rgb(210, 210, 210);
   opacity: 0.6;
}

.math-inputs.Earthy::placeholder {
   color: #684;
   opacity: 0.6;
}
.math-inputs.JiangTheme::placeholder {
    color: #684;
    opacity: 0.6;
 }

.math-inputs.Vibrant::placeholder {
   color: white;
   opacity: 0.6;
}

.math-inputs.CCSpririt::placeholder {
   color: #984;
   opacity: 0.6;
}

.math-inputs.Pastel::placeholder {
   color: white;
   opacity: 0.6;
}

.math-inputs.Autumnal::placeholder {
   color: #db9;
   opacity: 0.6;
}

.math-inputs.Original::placeholder {
   color: black;
   opacity: 0.6;
}

.math-inputs.Lively::placeholder {
   color: black;
   opacity: 0.6;
}

.math-inputs.Sunset::placeholder {
   color: "#ffc550";
   opacity: 0.6;
}

.fdbk {
   width: fit-content;
   padding: 3px;
   border-radius: 3px;
   border: solid black 6px;
   background-color: white;
   color: black;
   margin: 15px;
}

#final_score {

   font-weight: bold;
}

#final-feedback {
   border: solid white 6px;
   background-color: black;
   color: white;
}

/* OPEN RESPONSE - work area */
.open-response-inputs {
   border-radius: 3px;
   font-size: 15px;
   font-family: Monaco;
   /* white-space: pre-wrap; */
}

textarea.LemonLime::placeholder {
   color: yellow;
   opacity: 0.6;
}

textarea.LimeLemon::placeholder {
   color: green;
   opacity: 0.6;
}

textarea.Bluesy::placeholder {
   color: #1cf;
   opacity: 0.6;
}

textarea.Dark::placeholder {
   color: rgb(210, 210, 210);
   opacity: 0.6;
}

textarea.Earthy::placeholder {
   color: #684;
   opacity: 0.6;
}
textarea.JiangTheme::placeholder {
    color: #684;
    opacity: 0.6;
 }

textarea.Vibrant::placeholder {
   color: white;
   opacity: 0.6;
}

textarea.CCSpririt::placeholder {
   color: #984;
   opacity: 0.6;
}

textarea.Pastel::placeholder {
   color: white;
   opacity: 0.6;
}

textarea.Autumnal::placeholder {
   color: #db9;
   opacity: 0.6;
}

textarea.Original::placeholder {
   color: black;
   opacity: 0.6;
}

textarea.Lively::placeholder {
   color: black;
   opacity: 0.6;
}

textarea.Sunset::placeholder {
   color: "#ffc550";
   opacity: 0.6;
}

/* used for floating box at bottom with score */
#sidenav {
   font-size: 25px;
   /*    height: 5%;*/
   width: 300px;
   position: fixed;
   z-index: 1;
   bottom: 0;
   right: 0;
   background-color: #444;
   overflow-x: hidden;
   padding-top: 10px;
   color: #810081;
   border-radius: 15px;
}

.sidenav2 {
   font-size: 14px;
   height: 25px;
   width: 50px;
   position: fixed;
   z-index: 1;
   top: 0;
   right: 0;
   background-color: #111;
   overflow-x: hidden;
   padding-top: 5px;
   color: orange;
   border-radius: 5px;
}

#finalSummary {
   /* Summary of attempts at bottom */
   border-radius: 22px;
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

/* NOTATION IMAGE */
#notation-box {
   box-sizing: content-box;
   color: red;
   /*    width: 50vw;*/
   max-width: 50vw;
   /*    height:auto;*/
   /* to get it to stay to the right when scrolling: */
   float: right top;
   display: flex;
   z-index: 10;
   right: 0;
   top: 0;
   margin-top: 29px;
}

/* Page content */
.content {
   padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
   position: fixed;
   top: 0;
   width: 100%;
   float: right;
   display: flex;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky+.content {
   padding-top: 102px;
   float: right;
   display: flex;
}

.yellow-boxes {
   /* yellow boxes with info */
   border-radius: 15px;
   /*    box-sizing: content-box;*/
   /* margin-left: 30vw;
   margin-right: 30vw; */
   /* keeps size to how much text */
   /*    width: 100%;*/
   width: fit-content;
   margin-top: 4px;
   text-align: center;
   padding-bottom: 1px;
   padding-top: 1px;
   padding-left: 15px;
   padding-right: 15px;
   background-color: yellow;
   border-color: black;
   border-width: 5px;
   box-shadow: 4px 4px 3px grey;
}

.end.yellow-boxes {
   /* yellow boxes with info */
   border-radius: 2px;
   /*    box-sizing: content-box;*/
   margin-left: 2vw;
   margin-right: 2vw;
   /* keeps size to how much text */
   /*    width: 100%;*/
   width: 90%;
   margin-top: 4px;
   text-align: center;
   padding-bottom: 1px;
   padding-top: 1px;
   padding-left: 50px;
   padding-right: 50px;
   background-color: yellow;
   border-color: black;
   border-width: 5px;
   box-shadow: 4px 4px 3px grey;
}

/* SUBMIT BUTTONS FOR PROBLEMS */
.button {
   background-color: #4CAF50;
   /* Green */
   border: none;
   color: white;
   border-radius: 7px;
   padding: 5px 15px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin-left: 6px;
   margin-right: 3px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.button:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}



/*
 * PULSING BUTTON
 * NEXT FEW SECTIONS
 */
.nameButton {
   background-color: #4CAF50;
   /* Green */
   border: none;
   color: white;
   padding: 5px 5px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 12px;
   margin: 2px 1px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

#pdf {
   background-color: red;
}

.wrapper {
   padding: 10px;
}

#namesbutton {
   font-family: 'Titillium Web';
}

.button {
   font-family: 'Titillium Web';
}

.pulse {
   -webkit-animation: pulsate 2s ease-out;
   -webkit-animation-iteration-count: infinite;
   opacity: 0.5;
}


@-webkit-keyframes pulsate {
    0%{
    /* transform: scale(.5); */
    background-color: white;
    /* border-radius: 100%; */
}

50% {
    background-color: orange;
}

100% {
    /* transform: scale(2.0); */
    background-color: white;
}
    /* 0%   { box-shadow: 0 0 0 white; }
    50%  { box-shadow: 0 0 17px white; }
    100% { box-shadow: 0 0 0 white; } */
   /* 0% {
      opacity: 0.1;
   }

   50% {
      opacity: 1.0;
   }

   100% {
      opacity: 0.1;
   } */
}

@keyframes shadow-pulse {
   0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
   }

   100% {
      box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.0);
   }
}

@keyframes shadow-pulse-big {
   0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
   }

   100% {
      box-shadow: 0 0 0 70px rgba(0, 0, 0, 0.0);
   }
}

.work {
   font-size: 12px;
}

#names2 {
   /* names pull-down menu */
   float: left;
   margin: 0;
   position: relative;
   top: 80%;
   -ms-transform: translateY(50%);
   transform: translateY(50%);
}

.pulsing-button {
   /* for pulsing names button */
   float: left;
   margin-left: 30px;
   width: 320px;
   vertical-align: "center";
   font-size: 16px;
   /*    text-transform: uppercase;*/
   color: #fff;
   background: rgba(30, 144, 255, 0.6);
   border-radius: 5%;
   animation: shadow-pulse 2s infinite;
}

/* COLOR THEMES BAR STYLING */
nav {
   /*    font-family: Verdana;*/
   font-family: 'Titillium Web';

   margin: 0px 0;
   background-color: #666;
}

nav ul {

   padding: 0;
   margin: 0;
   list-style: none;
   position: relative;

}

nav ul li {

   display: inline-block;
   background-color: #666;
   text-align: left;
}

nav a {
   display: block;
   padding: 0 10px;
   color: #FFF;
   font-size: 12px;
   line-height: 20px;
   text-decoration: none;
}

nav a:hover {
   background-color: #666;
}

nav ul ul {
   display: none;
   position: absolute;
   top: 20px;
}

nav ul li:hover>ul {
   display: inherit;
}

nav ul ul li {
   width: 135px;
   float: none;
   display: list-item;
   position: relative;
}

nav ul ul ul li {
   position: relative;
   top: -50px;
   left: 250px;
}

nav ul ul li {
   border: 1px solid white;
}

li>a:after {
   content: ' ▼';
}

li>a:only-child:after {
   content: '';
}

li a:hover {

   border-radius: 3px;
   /*    border: 1px solid #3f82a3;*/
   padding-left: 28px;
   /*    text-decoration: none;*/
   background-color: black;
}

/*["white",   "#7a314d", "#d3c8b0", "#d3c8b0", "#9d824c", "#6a212d", "#9d824c", "#4a011d"] */
body.CCSpirit::-webkit-scrollbar {
   width: 15px;
}

body.CCSpirit::-webkit-scrollbar-track {
   /* the shadow - change RGB for color or 16px for thickness of entire bar */
   -webkit-box-shadow: inset 0 0 4px rgba(0, 255, 0, 0.8);
   background-color: #7a314d;
}

body.CCSpirit::-webkit-scrollbar-thumb {
   /* moving part of scrollbar */
   background-color: #6a212d;
   outline: 3px solid "#4a011d";
   /*outline color */
   border-radius: 9px;
   /* amount of curve  */
   border: 2px solid #d3c8b0;
   /* outline thickness and color */
}

body.CCSpirit::-webkit-scrollbar-thumb:hover {
   background-color: #9d824c;
}

body.Bluesy::-webkit-scrollbar {
   width: 15px;
}

body.Bluesy::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px #05e9ff;
   /* 0 */
   background-color: #2233ee;
   /* 2 */
}

body.Bluesy::-webkit-scrollbar-thumb {
   background-color: #1bc5ff;
   /* 4*/
   outline: 3px solid #3838ff;
   /* 5 */
   border-radius: 9px;
   border: 2px solid #8fc1e3;
   /* 6 */
}

body.Bluesy::-webkit-scrollbar-thumb:hover {
   background-color: #5858dd;
   /* 7*/
}

body.Lively::-webkit-scrollbar {
   width: 15px;
}

body.Lively::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px #026670;
   /* 0 */
   background-color: #fef9c7;
   /* 2 */
}

body.Lively::-webkit-scrollbar-thumb {
   background-color: #026670;
   /* 7*/
   outline: 3px solid #cdcac5;
   /* 5 */
   border-radius: 9px;
   border: 2px solid white;
   /* 6 */
}

body.Lively::-webkit-scrollbar-thumb:hover {
   background-color: #026670;
   /* 7*/
}
body.Earthy::-webkit-scrollbar {
   width: 15px;
}

body.Earthy::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px #fbeec1;
   /* 0 */
   background-color: #5d5711;
   /* 7 */
}

body.Earthy::-webkit-scrollbar-thumb {
   background-color: #6d8741;
   /* 4*/
   outline: 3px solid #daad86;
   /* 5 */
   border-radius: 9px;
   border: 2px solid #658dbd;
   /* 6 */
}

body.Earthy::-webkit-scrollbar-thumb:hover {
   background-color: #5d5711;
   /* 7*/
}
body.JiangTheme::-webkit-scrollbar {
    width: 15px;
 }
body.JiangTheme::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px #CF991D;
    /* 0 */
    background-color: #323C59;
    /* 7 */
 }
 
 body.JiangTheme::-webkit-scrollbar-thumb {
    background-color: #1D2054;
    /* 4*/
    outline: 3px solid #C9C9C9;
    /* 5 */
    border-radius: 9px;
    border: 2px solid #658dbd;
    /* 6 */
 }
 
 body.JiangTheme::-webkit-scrollbar-thumb:hover {
    background-color: #5d5711;
    /* 7*/
 }

body.Dark::-webkit-scrollbar {
   width: 15px;
}

body.Dark::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px white;
   /* 0 */
   background-color: #333333;
   /* 7 */
}

body.Dark::-webkit-scrollbar-thumb {
   background-color: yellow;
   /* 4*/
   outline: 3px solid #99ee99;
   /* 5 */
   border-radius: 9px;
   border: 2px solid #112255
      /* 6 */
}

body.Dark::-webkit-scrollbar-thumb:hover {
   background-color: #333333;
   /* 7*/
}

body.Pastel::-webkit-scrollbar {
   width: 15px;
}

body.Pastel::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px #8f6c84;
   /* 0 */
   background-color: #dddddd;
   /* 7 */
}

body.Pastel::-webkit-scrollbar-thumb {
   background-color: white;
   /* 4*/
   outline: 3px solid #c1bbdd;
   /* 5 */
   border-radius: 9px;
   border: 2px solid #dcfffb
      /* 6 */
}

body.Pastel::-webkit-scrollbar-thumb:hover {
   background-color: #dddddd;
   /* 7*/
}

body.Vibrant::-webkit-scrollbar {
   width: 15px;
}

body.Vibrant::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px yellow;
   /* 0 */
   background-color: #cc1416;
   /* 7 */
}

body.Vibrant::-webkit-scrollbar-thumb {
   background-color: white;
   /* 4*/
   outline: 3px solid yellow;
   /* 5 */
   border-radius: 9px;
   border: 2px solid black
      /* 6 */
}

body.Vibrant::-webkit-scrollbar-thumb:hover {
   background-color: #cc1416;
   /* 7*/
}


body.Autumnal::-webkit-scrollbar {
   width: 15px;
}

body.Autumnal::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px #ac5e00;
   /* 0 */
   background-color: #bd3b1f;
   /* 7 */
}

body.Autumnal::-webkit-scrollbar-thumb {
   background-color: #d2bf94;
   /* 4*/
   outline: 3px solid #cc7e00;
   /* 5 */
   border-radius: 9px;
   border: 2px solid #f5e9cd
      /* 6 */
}

body.Autumnal::-webkit-scrollbar-thumb:hover {
   background-color: #bd3b1f;
   /* 7*/
}

body.Original::-webkit-scrollbar {
   width: 15px;
}

body.Original::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px black;
   /* 0 */
   background-color: #42a7f9;
   /* 7 */
}

body.Original::-webkit-scrollbar-thumb {
   background-color: black;
   /* 4*/
   outline: 3px solid green;
   /* 5 */
   border-radius: 9px;
   border: 2px solid white
      /* 6 */
}

body.Original::-webkit-scrollbar-thumb:hover {
   background-color: #42a7f9;
   /* 7*/
}

body.Random::-webkit-scrollbar {
   width: 15px;
}

body.Random::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 4px #05e9ff;
   /* 0 */
   background-color: #2233ee;
   /* 7 */
}

body.Random::-webkit-scrollbar-thumb {
   background-color: #1bc5ff;
   /* 4*/
   outline: 3px solid #3838ff;
   /* 5 */
   border-radius: 9px;
   border: 2px solid #8fc1e3;
   /* 6 */
}

body.Random::-webkit-scrollbar-thumb:hover {
   background-color: #5858dd;
   /* 7*/
}



/*  UNUSED?
.main {
    margin-left: 160px;
     Same as the width of the sidenav 
    padding: 0px 10px;
}
*/
/*
#score2 {
    box-sizing: content-box;
    // keeps size to how much text 
    color: red;
    width: 30%;
    font-family: consolas;
    font-size: 22px;
    background-color: black;
    text-align: right;
    align-content: left;
    padding-right: 20px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    margin-right: 30px;
    border-radius: 25px;

    // to get it to stay to the left when scrolling: 
    float: left;
    display: flex;
    z-index: 10;
    right: 0;
    top: 0;
}
*/
/*
.fillBlank {  //not used???
    width: 100px;
    border-radius: 5;
    border: none;
    background-color: #eff9f7;
    padding: 3px;
    text-align: center;
}
*/

/*
.summary {  //not used???
    color: "green";
    position: -webkit-sticky;
    position: fixed;
    top: 0;
}
*/

/*
.eqn {  //not used???
    font-size: 20px;
    position: fixed;
}
*/
/*
.sticky2 + .content {
    padding-top: 102px;
    float: left;
    display: flex;
}
*/
/*
.sticky2 {
    position: fixed;
    top: 0;
    width: 100%;
    float: left;
    display: flex;
}.sticky2 {
    position: fixed;
    top: 0;
    width: 100%;
    float: left;
    display: flex;
}
*/