* {
  margin: 0;
}

:root {
  --shadow-color: 0deg 0% 63%;
  --shadow-elevation-low:
    0px 0.3px 0.3px hsl(var(--shadow-color) / 0.34),
    0px 0.5px 0.6px -1.2px hsl(var(--shadow-color) / 0.34),
    0px 1.3px 1.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0px 0.3px 0.3px hsl(var(--shadow-color) / 0.36),
    0px 1.1px 1.2px -0.8px hsl(var(--shadow-color) / 0.36),
    0px 2.7px 3px -1.7px hsl(var(--shadow-color) / 0.36),
    0px 6.5px 7.3px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0px 0.3px 0.3px hsl(var(--shadow-color) / 0.34),
    0px 1.9px 2.1px -0.4px hsl(var(--shadow-color) / 0.34),
    0px 3.5px 3.9px -0.7px hsl(var(--shadow-color) / 0.34),
    0px 5.8px 6.5px -1.1px hsl(var(--shadow-color) / 0.34),
    0px 9.3px 10.5px -1.4px hsl(var(--shadow-color) / 0.34),
    0px 14.5px 16.3px -1.8px hsl(var(--shadow-color) / 0.34),
    -0.1px 22px 24.8px -2.1px hsl(var(--shadow-color) / 0.34),
    -0.1px 32.5px 36.6px -2.5px hsl(var(--shadow-color) / 0.34);
}

.Header {
  margin: 1em;
}

.container {
  max-height: 80vh;
  width: 60% !important;
  background-color: rgb(250, 250, 250);
  border: 1px solid rgb(224, 224, 224);
  border-radius: 8px;
  overflow-y: scroll;
  margin: .5em 0;
  padding: 1em 0;
}
.container text {
  display: flex;
}
.scoreContainer text{
  margin-bottom: 1rem;
  margin-right: 0.2rem;
}

.intro{
  font-size: .8em;
  line-height: 1.3em;
  text-align: left;
}
.Home h4{
  font-weight: 600;
}
.subtopic{
  font-size: medium;
  text-align: left !important;
  padding: .5em .5em 0;
  border-top: 1px solid rgb(234, 234, 234);
}

.question-container{
  background: white;
  box-shadow: var(--shadow-elevation-medium);
  border-bottom: 1px solid rgb(218, 218, 218) !important;
  margin: .2em 0 1.5em 0;
  border-radius: 0 0 6px 6px;
}


.start-btn{
  width: 100%;
  border-top: 1px solid rgb(236, 236, 236) !important;
  border-radius: 0 !important;
  padding: .5em!important;
  font-size: .85em!important;
  text-align: left !important;
}

.start-btn:hover{
  background-color: rgb(243, 243, 243);
}

.start-btn span{
  font-size: .8em;
  color: rgb(98, 136, 136);
}

.question {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}



.text-input-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
#time {
  font-size: 20px;
  background-color: lightgrey;
  position: relative;
  bottom: .2em;
}
.text-input {
  max-width: 100%;
  min-height: 16em!important;
  max-height: 60%;
}
.cyan-btn {
  color: white!important;
  background-color: darkcyan !important;
}

.submit-btn {
  float: right;
  margin: 1em 0;
}

textarea {
  width: 61em;
}


.infoDataHover {
  position: relative;
  
  font-size: 14px;
  font-weight: 200;
  background-color: white;
  align-content: flex;
  box-sizing: border-box;
  overflow-y:scroll;
  z-index:999;
  padding:5px;
  border:1px solid;
  border-color: rgb(150, 150, 150);
  border-radius: 6px;
} 


#timer {
  -moz-animation: move-timer linear infinite 1200s;
  -webkit-animation: move-timer linear infinite 1200s;
  animation: move-timer linear infinite 1200s;
}

.timer-container {
  height: 25px;
  padding: 5px;
  margin: .5em 0;
  border-radius: 5px;
  display: inline;
}
.timer-container span {
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.01) inset;
  border-radius: 4px;
  display: inline-block;
  height: 10px;
  background-color: #81dbcf;
}

#timer {
  -moz-animation: move-timer linear infinite 1200s;
  -webkit-animation: move-timer linear infinite 1200s;
  animation: move-timer linear infinite 1200s;
}

@-moz-keyframes move-timer {
  0% {
    width: 0;
  }
  100% {
    width: 28em;
  }
}
@-webkit-keyframes move-timer {
  0% {
    width: 0;
  }
  100% {
    width: 28em;
  }
}
@keyframes move-timer {
  0% {
    width: 0;
  }
  100% {
    width: 28em;
  }
}

#countdown{
  color: white;
    /* margin: 1em; */
  position: relative;
  top: 1.3em;
  left: 1em;
  background: #d4d2d2;
  padding: 0.3em 0.5em;
  border-radius: 5px;
}

#std_answer,#prof_answer{
  background-color: white;
  box-shadow: var(--shadow-elevation-medium);
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1em;
}

.issue{
  background-color: #fafdc7;
}

.rule{
  background-color: #caf9c5;
}

.policy{
  background-color: #ffd1d1;
}

.inference{
  background-color: #cffffe;
}

.conclusion{
  background-color: #efdaf3;
}

.score{
  margin: .5em;
  border-radius: 8px !important;
  border: none!important;
  box-shadow: var(--shadow-elevation-medium);
}

.half-black {
  background: rgba(black, 0.3);
}

/* Pie Charts */

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  margin: 1em 0 1.5em;
}

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 4.2;
}

.circle {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}


.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}



.key{
  padding: .5em;
  box-shadow: var(--shadow-elevation-medium);
  border-radius: 6px;
}

.key svg{
  border: 1px solid rgb(194, 194, 194);
  border-radius: 3px;
  margin-bottom: 4px;
}

.error{
  text-decoration: dashed underline rgb(255, 0, 0) 2.5px;
}