div.question {
  position: relative;
  background: rgba(238, 238, 238, 0.267);
  border: solid rgba(128, 128, 128, 0.267) 1px;
  width: 90%;
  max-width: 60em;
  min-width: 22em;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
  /*user-select: none;*/
}

div.toast {
  --boxshadow: red;
  --background: aliceblue;
  --delay: 2s;
  --width: 18rem;
  border: solid gray 1px;
  border-radius: 4px;
  position: absolute;
  top: 12rem;
  left: calc(50% - var(--width) / 2);
  background-color: var(--background);
  box-shadow: 2px 2px 2px var(--boxshadow);
  width: var(--width);
  min-height: 3rem;
  padding: 1rem;
  animation: goaway 0.5s forwards;
  animation-delay: var(--delay);
}

@keyframes goaway {
  85% {
    opacity: 1;
    box-shadow: 2px 2px 2px gray;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

div.question > div {
  padding: 2px;
}

.large input {
  width: 18em;
}

.medium input {
  width: 12em;
}

div.question.redraw {
  background: rgba(192, 143, 143, 0.116);
}

div.question.redraw:after {
  content: "";
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"><g><path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3 c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/><path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/><path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/><path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6   c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/><path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/><path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7   c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/><path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7   C20.6,84.2,23.2,86.3,26.2,88.2z"/><path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6   c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/></g></svg>');
  width: 100px;
  height: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  animation: spin 2s infinite linear;
  background-color: #bfb;
  border-radius: 50%;
}

@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

div.qhead {
  position: relative;
  height: 1em;
  background: rgba(130, 130, 90, 0.05);
}

div.question span.qscore {
  display: inline-block;
  position: absolute;
  right: 2px;
  top: 0;
  color: blue;
}

div.graf svg {
  background: #ffe;
  border: solid gray 1px;
  border-radius: 5px;
}

div.question span.attempts {
  display: inline-block;
  position: absolute;
  right: 9em;
  top: 0;
  color: blue;
}

div.question span.qnumber {
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  padding: 2px;
  left: -12px;
  top: -12px;
  width: 9em;
  background: #ddc;
  font-size: 0.8em;
  border-radius: 3px;
  border: 1px solid darkslategrey;
  box-shadow: 2px 2px rgba(48, 80, 80, 0.5);
}

div.question span.recycle {
  display: inline-block;
  position: absolute;
  right: 100px;
  top: 0;
  color: green;
  cursor: pointer;
}

div.qbody {
  position: relative;
  min-height: 5em;
  padding: 7px;
}

div.qbody.math h1,
div.qbody.math h2,
div.qbody.math h3,
div.qbody.math h4 {
  color: royalblue;
}

div.qbody.math strong em {
  color: red;
}

div.qbody.math strong {
  color: blue;
}

div.qbody.math em {
  color: forestgreen;
}

div.qbody.math .MathJax {
  color: darkblue;
}

div.qbody.math ol {
  counter-reset: li;
  margin-left: 2rem;
  padding-left: 1rem;
}

div.qbody.math ol > li {
  position: relative;
  list-style: none;
}

div.qbody.math ol > li:nth-child(n + 2) {
  border-top: solid 1px rgba(128, 128, 128, 0.274);
}

div.qbody.math ol > li:before {
  color: blue;
  font-weight: bold;
  content: counter(li, lower-latin) ")";
  counter-increment: li;
  position: absolute;
  top: 6px;
  left: -2em;
  width: 2em;
}

div.qtail {
  margin-top: 1rem;
  min-height: 0.3rem;
  position: relative;
  background-color: ghostwhite;
}

div.qbody:hover > div.grade {
  opacity: 1;
}

div.grade {
  position: absolute;
  width: 4em;
  height: 1.5em;
  right: 0.5em;
  bottom: -1.2rem;
  opacity: 0;
  z-index: 2;
}

.button {
  color: white;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  border-radius: 3px;
  border: 1px solid darkslategrey;
  box-shadow: 3px 3px rgba(48, 80, 80, 0.5);
  cursor: pointer;
}

.button:hover {
  background: darkcyan;
}

.button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

button.replot {
  margin-left: 1em;
}

span.qio {
  padding: 2px;
  padding-bottom: 3px;
  border: solid rgba(1, 1, 1, 0) 2px;
}

span.dragdrop-target.accepted,
span.qio.accepted > * {
  border: solid lime 1px;
}

span.dragdrop-target {
  padding: 0px;
  margin: -1px;
  color: blue;
  font-size: 0.9em;
  display: inline-block;
  box-sizing: border-box;
  border: solid rgba(191, 219, 188, 0.644) 1px;
  min-width: 3em;
  min-height: 1em;
  background-color: rgba(195, 222, 232, 0.644);
}

span.dragdrop-word {
  display: inline-block;
  border: solid gray 1px;
  padding: 2px;
  background-color: rgba(126, 185, 130, 0.74);
  transition: 200ms;
}

span.the-word {
  color: white;
}

span.dragdrop-word.used {
  background-color: rgba(154, 177, 211, 0.74);
  color: black;
}

span.numeric {
  position: relative;
}

label.truthy:before {
  display: inline-block;
  color: green;
  content: "✔";
  position: absolute;
  left: -10px;
}

span.numeric input {
  text-align: right;
  background: lightblue;
  margin: 2px;
}

span.numeric.num input {
  background: #bfb;
  width: 3em;
}

span.numeric.tol input {
  background: #eeb;
  width: 3em;
}

div.function {
  position: relative;
  margin: 2em;
}

div.function textarea {
  width: 26em;
  height: 12em;
}

div.function::before {
  color: blue;
  position: absolute;
  display: inline-block;
  content: attr(data-fu) " {";
  top: -1.3em;
  left: -1em;
}

div.python.function::before {
  color: blue;
  position: absolute;
  display: inline-block;
  content: attr(data-fu);
  top: -1.3em;
  left: -1em;
}
div.python.function::after {
  content: "";
}

div.function::after {
  color: blue;
  position: absolute;
  content: "}";
  bottom: -1.3em;
  left: -1em;
}

span.numeric.txt textarea {
  display: block;
  background: lightgoldenrodyellow;
  width: 80%;
  height: 4em;
}

span.numeric.reg input {
  background: paleturquoise;
  width: 3em;
}

span.numeric.eva input,
span.numeric.alg input {
  background: thistle;
  width: 13em;
}

/* show a tooltip for numeric inputs */
span.numeric:hover:after {
  z-index: 1000;
  padding: 4px;
  opacity: 0;
  text-align: center;
  position: absolute;
  display: inline-block;
  /*width: 3em;*/
  height: 1.2em;
  right: -3.5em;
  top: -0.2em;
  border: solid black 1px;
  background: lightslategray;
  border-radius: 3px;
  color: white;
  animation: fade 2s step-end;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

span.numeric.eva:hover:after,
span.numeric.alg:hover:after {
  content: "2x+3";
}

span.numeric.nmb:hover:after {
  content: "1.23";
}

span.numeric.reg:hover:after {
  content: "word";
}

.vertical .checkGroup,
.vertical .radioGroup {
  display: inline-flex;
  flex-direction: column;
}

div.grafbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div.guppy {
  display: flex;
  margin: 10px;
  padding: 20px;
  width: 30em;
  height: 5em;
  border: solid gray 1px;
  align-content: space-around;
}

span.green {
  color: green;
}

ol.matte {
  list-style-type: lower-latin;
}

div.abcde {
  counter-reset: abcde;
  margin-top: 1em;
  margin-bottom: 1em;
}

div.abc:before {
  position: absolute;
  counter-increment: abcde;
  content: counter(abcde, lower-latin) ")";
}

div.abc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 8px;
}

div.abc div:nth-child(1) {
  margin-left: 30px;
  background-color: rgba(153, 229, 153, 0.286);
  width: 50%;
}
/*
div.abc div:nth-child(2) {
  width: 20%;
}
*/

div.abc div:nth-child(3) {
  width: 10%;
}
div.abc div:nth-child(4) {
  margin-left: 30px;
  color: blue;
  font-style: italic;
  width: 90%;
}

div.qbody div.fasit {
  position: relative;
  background-color: rgba(0, 128, 0, 0.114);
  margin-top: 1em;
  border-radius: 5px;
  margin-top: 2.5em;
  padding: 5px;
  color: blue;
}
div.qbody div.fasit::after {
  position: absolute;
  content: "Fasit";

  top: -1.2em;
  right: 1em;
}

pre.prettyprint {
  background-color: rgba(21, 201, 201, 0.057);
  border-radius: 0.5em;
  padding: 1em !important;
}

.hidden {
  display: none;
}

div.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
div.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
div.grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

div.flatquiz {
  margin-bottom: 1rem;
  padding: 4px;
}

#box.flatquiz {
  background-color: #2d3a52;
}

div.flatquiz > div.question {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 3px 3px 0px #8dc5de;
}

div.qtail > span.comment {
  display: inline-block;
  border: solid gray 1px;
  box-shadow: 2px 2px 2px green;
  width: 85%;
  background-color: azure;
  color: blue;
  padding: 10px;
  padding-right: 20px;
  border-radius: 5px;
  margin: 5px;
  white-space: pre;
  position: relative;
}

div.qtail > span.comment.teach {
  color: red;
}

div.qtail > span.comment:after {
  content: "S";
  display: block;
  position: absolute;
  top: 0;
  right: -16px;
}
div.qtail > span.comment.teach:after {
  content: "T";
}

div.qtail > span.comment:empty {
  display: none;
}

div.qtail textarea {
  margin: 10px;
  width: 23rem;
  height: 6rem;
}
div.qtail button:after {
  position: absolute;
  top: -12px;
  left: 0;
  content: "Comment";
  color: blue;
}

@media print {
  div.qtext span.fillin input {
    min-width: 8em;
  }

  div.qtext .medium span.fillin input {
    min-width: 12em;
  }
  div.qtext .large span.fillin input {
    min-width: 20em;
  }
  span.drop:after {
    content: "_________";
  }
  div.question {
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: avoid;
    border: solid 1px black;
  }

  h4.pb {
    page-break-before: always;
  }

  span.qio.accepted {
    border: gray !important;
    color: black;
  }
  span.qio.accepted > * {
    border: none !important;
  }

  div.explain,
  .gui {
    display: none !important;
  }
}

div.mmath {
  display: grid;
  grid-template-columns: 1fr 6fr 3fr;
  padding-top: 2px;
}

div.mmath > span {
  display: inline-block;
  position: relative;
}

div.mmath > span:nth-of-type(2):before {
  position: absolute;
  left: -38px;
  top: 3px;
  text-align: right;
  counter-increment: mlines;
  content: counter(mlines);
  font-size: 0.8rem;
  color: lightblue;
  display: inline-block;
  width: 32px;
}

/*  comments for math */
div.mmath > span:nth-of-type(5),
div.mmath > span:nth-of-type(3) {
  color: green;
  font-size: 0.9em;
  white-space: nowrap;
}

/*  equation number */
div.mmath > span:nth-of-type(1) {
  color: blue;
  font-size: 0.9em;
}

div.mainmath {
  margin: 1rem;
  margin-left: 2rem;
  counter-reset: mlines;
}

div.mainmath.large {
  font-size: 1.2rem;
}

div.mainmath.huge {
  font-size: 1.5rem;
}
div.mainmath.plain div.mmath {
  grid-template-columns: 1fr;
}

div.mainmath.spaced div.mmath {
  padding-top: 5px;
}

div.mainmath.wide div.mmath {
  grid-template-columns: 1fr 10fr 1fr;
}

div.mainmath.center div.mmath > span {
  text-align: center;
}

div.mainmath.equation div.mmath {
  grid-template-columns: 2fr 10fr 1fr 10fr 7fr;
}

div.mainmath.equation div.mmath > span:nth-of-type(2) {
  text-align: right;
}
div.mainmath.equation div.mmath > span:nth-of-type(3) {
  text-align: center;
}
div.mainmath.equation div.mmath > span:nth-of-type(4) {
  text-align: left;
}

div.qbody dt {
  font-weight: bold;
  color: blue;
}

div.qbody dd {
  color: darkslategray;
}

code {
  display: inline-block;
  background-color: whitesmoke;
  color: blue;
  border-radius: 3px;
  padding: 1px;
}

pre code {
  display: block;
  background-color: rgb(41, 45, 62);
  border-radius: 5px;
  margin: 1rem;
  padding: 1rem;
  width: fit-content(10em);
  color: rgb(191, 199, 213);
}

code.language-js {
  background-color: rgb(12, 12, 62);
  color: rgb(211, 211, 243);
}

.coderapport > div {
  margin-bottom: 1rem;
}
.coderapport > div > div {
  display: grid;
  grid-template-columns: 1fr 5fr;
}
.coderapport > div > div > span:nth-of-type(1) {
  color: red;
  margin-left: 2rem;
}

div.css {
  min-height: 2rem;
  width: 80%;
 border:inset 1px green;
}