html {
  font: size 16px;;
}
a {
  text-decoration:none;
  outline:none;
}
body {
  font-family: sans-serif;
  background-color:whitesmoke; 
  margin: 0;
  line-height: inherit
}

.menu-container {
  margin-top:5px;
  margin-left:0vw !important;
  z-index:-1;
}

.display-none {
  display:none;
}

.divBody {
  align-items: center;
  /* display: flex;
  flex-direction: column; 
  opacity:1;

  margin-top:0vh;
  background-color:none; */
  /* margin-right:15%;
  margin-left:15%; */

}

.buttons {
  display:flex;
}

.divBodyAuthenticated {
  display:none;
  align-items: center;
  /* display: flex;
  flex-direction: column; */
}

.flashCardDisplay {
  font-size:11pt !important;
  font-weight:bold;
  /* margin-top:3vh;
  margin-left:-3vw; */
}

#divAnswerLbl {
  width:60vw;
  border:1px solid gray;
  margin-bottom:5vh;
  background-color:white;
}

#divQuestionLbl {
  width:60vw;
  border:1px solid gray;
  background-color:white;
}

a {
 
  display:inline-block;
}


.centeredContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.centeredContent {
  width: 70%;
  height: 190px;
  margin: 10px;
  padding: 5px;
}

.hidden {
  visibility:hidden;
}

.nodisplay {
  display:none;
}

.textShadow {
  text-shadow:1px -4px 10px rgba(255,255,255,0.6),
  -1px 4px 10px rgba(0,0,0,0.3);
}

.text-shadow {
  text-shadow:1px -4px 10px rgba(255,255,255,0.6),
  -1px 4px 10px rgba(0,0,0,0.3);
}

.img {
  filter: drop-shadow(0px 3px 7px #3c3c42);
}
@media(max-width:1520px) {
  .left-svg {
      display: none;
  }
}
.tableQuiz {
  width:100%;
  background-color:transparent; 
  opacity:1;  
}

#nav-mobile-btn.close span:first-child {
  transform: rotate(45deg);
  top: 4px;
  position: relative;
  background: #a0aec0;
}
#nav-mobile-btn.close span:nth-child(2) {
  transform: rotate(-45deg);
  margin-top: 0px;
  background: #a0aec0;
}
.title {
  font-family: sans-serif;
  font-size: 20pt !important;
}
.logoText {
  display:inline-block;
  margin-left: .75rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-family: sans-serif;
  text-indent: 0;
  border-collapse: collapse;
  font-weight: 900;
  border: 0 solid #e5e7eb;
}

.title-text {
  color:#28282B;
  display:inline-block;
  margin-left: .5rem;
  font-size: 1.5rem;
  line-height: 1.5em;
  text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-family: sans-serif;
  text-indent: 0;
  border-collapse: collapse;
  font-weight: 700;
  /* box-sizing: border-box; */
  border: 0 solid #e5e7eb;
  /* color: rgb(31 41 55/var(--tw-text-opacity)); */
  margin-top:2px;
  /* font-size:18pt !important;  */
  text-shadow: 1px 1px 1px gray;
}


.container1 {
  margin-top:1vh;
  margin-left:0;
  margin-right:0;
  width:80%;
  height:90vh;
  /* border:solid 0.1vw #808080; */
  overflow:hidden;
}

hr {
  padding:0;
  margin:0;
}
input {
  border:solid 1px #808080;
}

.tableAnswer td {
  border:none !important;
}

/* #btnStart {
  background-color:whitesmoke;
} */
.divQuestion {
  width:98.5%;
  /* min-height:5%; */
  border:1px solid black;
  visibility:hidden;
  font-size:10pt;
  background-color:white;
  padding:5px;
}

.divAnswer {
  width:98.5%;
  /* min-height:5%; */
  border:1px solid rgb(3, 106, 124);
  visibility:hidden;
  font-size:10pt;
  background-color:white;
  padding:5px;
}

.header {
  margin-left:0; 
  margin-right:0; 
  width:80%;
}

.header2 {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:left;
  background-color:rgb(245, 245, 245, 0.8); 
  margin-top:1vh;
  /* margin-left:2%; 
  margin-right:5%;  */
  width:80%;
  box-shadow: rgb(34, 34, 34) 2px 2px 5px 2px;
  background-image: linear-gradient(180deg, #F5F5F5 40%, silver); 
  /* margin-left:10%; */
  /* height:3vh; */
  height:6vh;
}

.linkHome {
  margin-top:-3px;
  display:inline-block;
  margin-left:0.5%;
}

.img-logo {
  display:inline-block;
  width:30px;
  margin-top:15%;
}

/* .pageTitle{
  width:400px !important;
} */

.content {
  background-color:rgb(245, 245, 245, 0.8);
  margin-left:10%; 
  margin-right:0; 
  width:80%;

}
.container1 {
  margin-top:2vh;
  margin-left:5%;
  margin-right:5%;
  width:80%;
  height:100%;
  border:solid 0.1vw #808080;
  overflow:hidden;
}


.content2 {
  margin-left:0; 
  margin-right:0; 
  margin-top:0; 
  width:80%;
}

.txtScore {
  padding: 3px;
  max-width: 100%;
  line-height: 1;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-left: 0vw;
  width: 92%;
  outline: none;
  margin-top:3px;
  height:42px;
  width:15vw;
}

#selectScore {
  font-size:1.2rem;
}

/* .formLabel {
  font-weight:bold;
} */

.styled {
border: 0;
line-height: 2.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
);

box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);

transition: all ease-in-out 0.5s;
}

.styled:hover {
  background-color: rgba(255, 0, 0, 1);
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled2 {
  border: 0;
  margin-top:0.3vh;
  line-height: 2.2;
  padding: 0 10px;
  font-size: 0.8rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  transition: all ease-in-out 0.3s;
  border-radius: 10px;
  background-color: rgb(143, 140, 140);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled2:before {
  transition: all ease-in-out 0.2s;
  transform: scale(0.9);
}
.styled2:hover {
  background-color: rgb(175, 174, 174);
}
.styled2:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled3 {
  border: 0;
  margin-top:0vh;
  line-height: 2;
  padding: 0 15px;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgb(10, 12, 156);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(1, 10, 94, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled3:hover {
  background-color: rgba(1, 10, 94, 0.6);
}

.styled3:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled4 {
  border: 0;
  margin-top:0vh;
  line-height: 2.2;
  padding: 0 10px;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  transition: all ease-in-out 0.3s;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled4:before {
  transition: all ease-in-out 0.2s;
  transform: scale(0.9);
}
.styled4:hover {
  background-color: rgba(220, 66, 66, 1);
}
.styled4:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}


.styled5 {
  border: 0;
  margin-top:0vh;
  line-height: 1.9;
  padding: 0 8px;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 6px;
  background-color: rgb(10, 12, 156);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(1, 10, 94, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled5:hover {
  background-color: rgba(1, 10, 94, 0.6);
}

.styled5:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.message {
  color:#191970;
}

.sectionTitle {
  color:#191970;
  font-size:1.5rem;
  font-weight:bold;
  margin-top:5px;
  z-index:25;
  line-height:1.1;
}
.sectionTitle2 {
  color:#191970;
  font-size:1.3rem;
  font-weight:bold;
  margin-top:5px;
  z-index:25;
  line-height:1.1;
  background-color:#F5F5F5;
}


.textarea0 {
  padding: 4px;
  max-width: 100%;
  line-height: 1.1;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-left:0vw;
  width:20vw;
  height:20vh;
  outline:none;
}

.short-row {
  font-size:4px;
}

.bigtextarea {
  padding: 4px;
  max-width: 100%;
  line-height: 1.1;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-left:0vw;
  width:35vw;
  height:20vh;
  outline:none;
}

.textarea1 {
  padding: 5px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-left:0vw;
  height:25vh;
  width:25vw;
}

#divQuiz {
  height:80vh;
  /* visibility:hidden; */
}

table td {
 border: 0px solid black;
}


body {
  color:black;
}

#divScore {
  visibility:hidden;
}

#divStart {
  position:absolute; 
  top: 200px; 
  left: 25vw;;
}

#lblFlashCardId {
  color:black;
}

.sectionIdNormal {
  font-size:12pt;
  color:#000000;
}

.sectionIdOnly {
  font-size:12pt;
  color:#0a8bac;
}

.sectionIdHidden{
  opacity:0;
}


.tableClass {
  width:75%;
  margin-top:3vh;
  border:solid 1px black;
  margin-left:0;
  background-color: white;
}

img {border:none;
  outline: none;}



.btn-no-style {
  border: none;
  padding: 0;
  background: none;
}

.input {
  font-size: 60px;
  padding: 10px;
  margin: 5px;
  width: 20px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 20px;
  letter-spacing: -4px;
  font-family: 'Azeret Mono', monospace;
  color: var(--main-color);
}

.link1 {
  position: relative;
  /* color: #082347; */
  text-decoration: none;
  transition: all ease-in-out 0.5s;
  font-family: sans-serif;
  color:#16148B; 
  font-size:10pt; 
  font-weight:bold;
  border:solid 1px #16148B;
  padding:4px;
  opacity:1.0;
  background-color:white; 
  margin-top:4px;
}
.link1:before {
  content: "";
  background: #5154E2;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 0px;
  z-index: -1;
  transform: scale(0.9);
  opacity: 0;
  transition: all ease-in-out 0.2s;
}
.link1:hover {
  color: #e9ebee;
  background: #5154E2;
}
.link1:hover:before {
  transform: scale(1);
  opacity: 1;
  transition: all ease-in-out 0.2s;
}


.label1 {
  position: relative;
  /* color: #082347; */
  text-decoration: none;
  transition: all ease-in-out 0.5s;
  font-family: sans-serif;
  color:#000000; 
  font-size:9.25pt; 
  font-weight:600;
  border:solid 0px #1a072c;
  padding:2px;
  opacity:1.0;
  text-align:center;
  /* background-color:white; */
}
.label1:before {
  content: "";
  /* background: #1a072c; */
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 0px;
  z-index: -1;
  transform: scale(0.9);
  opacity: 0;
  transition: all ease-in-out 0.2s;
}
.label1:hover {
  /* color: #e9ebee;
  background: #1a072c; */
  color: #52148b;
}
.label1:hover:before {
  transform: scale(1);
  opacity: 1;
  transition: all ease-in-out 0.2s;
}





.link2 {
  position: relative;
  /* color: #082347; */
  text-decoration: none;
  transition: all ease-in-out 0.5s;
  font-family: sans-serif;
  /* color:#16148B;  */
  color:navy;
  font-size:10pt; 
  font-weight:bold;
  border:solid 1px #16148B;
  padding:4px;
  opacity:1.0;
  /* background-color:white; */
}
.link2:before {
  content: "";
  background: #5154E2;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 0px;
  z-index: -1;
  transform: scale(0.9);
  opacity: 0;
  transition: all ease-in-out 0.2s;
}
.link2:hover {
  color: #e9ebee;
  background: #5154E2;
}
.link2:hover:before {
  transform: scale(1);
  opacity: 1;
  transition: all ease-in-out 0.2s;
}

.quizList {
  height: 520px;
  width: 500px;
  background-color: rgba(255, 255, 255, 0.13);
  /* position: absolute;
  top: 0%;
  left: 30%;
  transform: translate(-50%, -50%); */

  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(8,7,16,0.6);
  padding: 50px 35px;
  font-size:1.5rem;
  /* margin-top:40vh !important; */
  color:#191970;
}
.glass {
  height: 520px;
  width: 400px;
  background-color: rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(8,7,16,0.6);
  padding: 50px 35px;
}
.add {
  text-decoration:underline;
  color:#16148B; 
  font-size:10pt; 
  font-weight:bold;
}
.formLabel {
  color:#16148B; 
  font-size:10pt; 
}
.btn2 {
  border:1px solid gray;
  padding:1px;
  font-size:9pt;
}
.btn2:hover{
  border:1px solid black;
}


.formatTable {
  background-color:white;
  border:1px solid gray;
  margin-left:-1vw;
}

.quizList a {
  font-size:1.2rem;
  color:#191970;
}
.quizListTable {
  margin-top:40vh !important;
}
.newquizbutton {
  margin-top:10% !important;
  margin-left:10vh !important;
}

.toolbarContainer {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  width: auto;
  background-color:#52148b;;
  color:white;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size:10pt;
  padding:2px;
  border:1px solid #1a072c;
  margin-left:2vw;
}

.toolbar {
  width: 100%;
  height: 30vh;
  border:gray solid 1px;
  background-color:white;
  opacity:1.0 !important;
}

.toolbar label {
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size:14pt;
}

.toolbarButton {
  position: relative;
  /* color: #082347; */
  text-decoration: none;
  transition: all ease-in-out 0.5s;
  font-family: monospace;
  /* color:#16148B;  */
  color:#1a072c;
  font-size:9pt; 
  font-weight:normal;
  border:solid 1px #52148b;
  padding:4px;
  opacity:1.0;
  margin:2px;
  background-color:white; 
}
.toolbarButton:before {
  content: "";
  background: #52148b;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 0px;
  z-index: -1;
  transform: scale(0.9);
  opacity: 0;
  transition: all ease-in-out 0.2s;
}
.toolbarButton:hover {
  color: #ffffff;
  background: #8a49c7;
}
.toolbarButton:hover:before {
  transform: scale(1);
  opacity: 1;
  transition: all ease-in-out 0.2s;
}

.glassmorphic {
  max-width: 60vw;
  min-height: 80vh;
  margin-top: 1vh;
  margin-left: 0vw;
  margin-right: 0vw;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2vw);
  z-index: 1;
  width:450px;
}

.glassmorphic2 {
  min-height: 80vh;
  margin-top: 2vh;
  margin-left: 0vw;
  margin-right: 0vw;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2vw);
  z-index: 1;
}

.glassmorphic3 {
  min-height: 1vh;
  min-width: 1vw;
  margin-top: 0.4vh;
  margin-left: 0vw;
  margin-right: 0.1vw;
  margin-bottom: 0.4vh;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2vw);
  z-index: 1;
  width:250px;
}

.glassmorphic4 {
  min-height: 1vh;
  min-width: 1vw;
  margin-top: 0vh;
  margin-left: 0vw;
  margin-right: 0vw;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2vw);
  z-index: 1;
  width:150px;
}

.glassmorphic6 {
  max-width: 76vw;
  min-height: 80vh;
  margin-top: 1vh;
  margin-left: 0vw;
  margin-right: 0vw;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2vw);
  z-index: 1;
  width:80vw;
}


.quickQuestion {
  border:1px gainsboro solid;
  transition: 0.3s;
}
.quickQuestion:hover {
  box-shadow:
  inset 1px 1px 2px rgba(255, 255, 255, 0.6),
  inset -1px -1px 2px rgba(0, 0, 0, 0.6);
  background-color:white;
  height:1.2rem;
}


.quickAnswer {
  background-color:navy;
  color:navy;
  transition: 0.3s;
}
.quickAnswer:hover {
  background-color:white;
  color:navy;
  border:1px gainsboro solid;
}


.imgUpload p {
  font-size: 1rem;
  font-weight: 600;
}
.imgUpload label {
  cursor: pointer;
}
.imgUpload label input {
  display: none;
}
.imgUpload label span {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px dashed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s;
}
.imgUpload label span i {
  position: absolute;
  font-size: 25px;
}
.imgUpload label span:hover {
  transform: scale(0.8);
  background:navy;
  color:white;
}

.formTable {
  line-height:1.2;
  width:70%;
}

/* span {
  font-size: 0.8rem !important;
} */

.glasscontent2 {
  margin-top: 5vw;;
}

.big {
  font-size:64px;
  text-shadow:rgb(128, 128, 128) 1px 1px 1px;
  font-family:sans-serif;
  margin:15px;
  margin-top:7vh;
}

.bigParagraph {
  font-size:28px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  margin:10px;
}

.btn-back-forward {
  border: 0;
  margin-top:0vh;
  line-height: 2.2;
  padding: 0 10px;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  transition: all ease-in-out 0.3s;
  border-radius: 10px;
  background-color: rgb(143, 140, 140);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  opacity:0.5;
}

.btn-back-forward:before {
  transition: all ease-in-out 0.2s;
  transform: scale(0.9);
}

.btn-back-forward:hover {
  background-color: rgb(175, 174, 174);
  opacity:1; 
  /* animation: up-down 0.5s infinite alternate; */
}

.btn-back-forward:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

@keyframes up-down {
  from {
    transform: translateY(-2px);
  }
  to {
    transform: translateY(2px);
  }
}


    input {
      border:solid 1px #808080;
    }
    .table1 {
      border-spacing:0; 
      border-collapse: collapse;
      line-height:14px;
    }

 .divBody1 {
  align-items: center;
  display: flex;
  flex-direction: column; 
}

/* start index.html */
.textarea3 {
  padding: 3px;
  max-width: 100%;
  line-height: 1.2 !important;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  font-size: 0.8rem !important;
  letter-spacing: 1px;
  margin-left:-2vw !important;
  height:22vh;
  width:60vw;
  outline:none;
}

.divBody {
  align-items: center;
  /* display: flex;
  flex-direction: column; */
}


#lblAnswer {
  height:22vh;
  width:60vw;
  
}

#divAnswerLbl {
  width:60vw;
  border:1px solid gray;
  margin-bottom:5vh;
  background-color:white;
}

#divQuestionLbl {
  width:60vw;
  border:1px solid gray;
  background-color:white;
}

pre {
 font-size:8pt;
 background-color:#ccc;
}

code {
  background-color:#ccc;
  padding:4px;
  font-family:monospace;
}

label {
  font-size: 0.8rem;
}


select {
  font-size: 0.8rem !important;
}

.description {
  font-size:11pt !important;
}

.flashCardDisplay {
  font-size:11pt !important;
  font-weight:bold;
  margin-top:3vh;
  margin-left:-3vw;
}
  
/* end index.html */

.error-free {
  position:absolute;
  right:1vw;
  bottom:1vh;
}

.display-none {
  display:none;
}

.right {
  text-align: right;
}

.top {
  vertical-align: top;
}

.debug {
  border:solid black 1px;
}

.debug1 {
  border:dotted black 1px;
}


.debug2 {
  border:dotted cyan 2px !important; 
}

.debug3 {
  border:dotted yellow 2px !important; 
}

.debug4b {
  border:dotted red 2px !important; 
}

.debug4 {
  border:solid red 2px !important; 
}

.debug5 {
  border:solid rgb(10, 233, 10) 3px !important; 
  border-right:solid rgb(10, 233, 10) 3px !important;
}

.settings1 {
  width: 32px;
  display: flex;
  height: 32px;
  font-size:25px;
  border: 1px dashed;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s;
}



.settings-icon-container2 {
  display:flex;
  width:20px;
  height:20px;
  justify-content:center;
  align-items:center;
  border:0px solid black;
  padding:0px;
  margin-left: 10px;
}

.span-icon i {
  width:30px;
  height:30px;
}

.icon {
  font-size:24px;
}



.settings-span2 {
  position: relative;
  border: 1px dashed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s;
  padding:0px;
  margin-left:4px;
  color:#52148B;
  width: 18px;
  height: 18px;
  font-size:28pt;
  font-weight: bold;
}
.settings-span2:hover {
  transform: scale(0.8);
  background:#52148B;
  color:white;
  cursor:pointer;
} 

.settings-span3 {
  position: relative;
  border: 1px dashed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s;
  padding:3px;
  margin-left:8px;
  color:#52148B;
  width: 26px;
  height: 26px;
  font-size:18pt;
}
.settings-span3:hover {
  transform: scale(0.8);
  background:navy;
  color:white;
  cursor:pointer;
} 



.hint-container {
  display:flex;
  justify-content: right;
}

.hint-text {
  display: inline-block;
  margin-top:7px;
}


/* .settings p {
  font-size: 1rem;
  font-weight: 600;
}
.settings label {
  cursor: pointer;
}
.settings label input {
  display: none;
}
.settings label span {
  width: 32px;
  height: 32px;
  border: 1px dashed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s;
}
.settings label span i {
  position: absolute;
  font-size: 25px;
}
.settings label span:hover {
  transform: scale(0.8);
  background:navy;
  color:white;
} */


.footer {
  font-size:8pt;
}