html{
  height: 100%;
}

.evalFlex {
  display: flex;
  flex-direction: column;
}

.evalFlexItem {
  min-width: 45%;
  display: flex;
}

.xpText {
  font-size: 200%;
  text-align: center;
  margin: 1em;
}

.xpBar {
  text-align: center;
  margin: 1em;
  flex-grow: 1;
}

body {
  background-color: black;
  color: hsl(120,100%,80%);
  height: 100%;
  font-family: sans;
  margin: 2%;
}

body.innerEar {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flbuw: row wrap;
  flex-flow: column;
}

div.innerEar{
  height: 100%;
  min-width: 300px;
  max-width: 1500px;
}

.header {
  display: inline-block;
  width: 100%;
}



.title {
  color:hsl(120,100%,80%);
  font-size: 40px;
  text-align: left;
  display: inline-block;
}

.login {
  color:  hsl(120,100%,80%);
  text-align: left;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.loginBypass {
  display: inline-block;
}

.wsStatus {
  color:white;
  text-align: center;
  font-size: 10px;
  width: 25%;
}

.createUserWidget {
  color: white;
  text-align: center;
  margin: 40px;
}

.createUserHandle {
  color: hsl(120,100%,80%);
  text-align: center;
  padding: 20px;

  }

.createUserPassword {
  color: hsl(120,100%,80%);
  text-align: center;
  padding: 20px;
  }


text {
  color: hsl(120,100%,80%);
}


.mainBody {
  height: 90%
}
.nav {
  background: black;
  color:  hsl(120,100%,80%);
  text-align: left;
  margin: 40px;
}

.navButton {
  background-color: black;
  border: none;
  border-radius: 4px;
  padding: 2px;
}

.exerciseConfig {
  background-color: black;
   color: hsl(120,100%,80%);
}

.exerciseQuestion {
  height: 90%;
  background-color: black;
  color: hsl(120,100%,80%);
}

.exerciseReflection {
  background-color: black;
  color: hsl(120,100%,80%);
}

.createUserFeedBack {
  background-color: black;
  color: hsl(120,100%,80%);
}

button {
  margin-top: 0%;
  margin-bottom: 0%;
  margin-right: 0%;
  font-size: 100%;
}

.clickableDivWrapper {
  display: inline-block;
  text-align: center;
}

.notPossibleButtonClickableDiv {
  cursor:not-allowed;
  width:60%;
  background-color: transparent;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 4px;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);

}

.possibleButtonClickableDiv {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 8px;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);

}

.possibleButtonClickableDiv:active {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 4px;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
  transform: translateY(10px);
}


.correctButtonClickableDiv {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 8px;
  border: 4px solid green;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
     height: 131px;
}

.correctButtonClickableDiv:active {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 4px;
  border: 4px solid green;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
  transform: translateY(10px);
     height: 131px;
}


.correctMissedButtonClickableDiv {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 8px;
  border: 4px solid green;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
     height: 131px;
}

.correctMissedButtonClickableDiv:active {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 4px;
  border: 4px solid green;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
  transform: translateY(10px);
     height: 131px;
}
.incorrectDisButtonClickableDiv{
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: not-allowed;
  border-radius: 8px;
  border: 4px solid red;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
     height: 130px;
}


.incorrectActivatedButtonClickableDiv {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 8px;
  border: 4px solid red;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
  height: 131px;
}

.incorrectActivatedButtonClickableDiv:active {
  background-color: #e7e7e7;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: black;
  margin: 4px 2px;
  cursor: context-menu;
  border-radius: 4px;
  border: 4px solid red;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
  transform: translateY(10px);
     height: 130px;
}


.buttonWrapper {
  display: inline-block;
  text-align: center;
}
button.notPossibleButton{

  border: none;
  background-color: black;
  color: darkgray;
  height: 100%;
  width: 100%;
  margin:  1%;
  font-size: 100%;
}

button.possibleButton {
  height: 100%;
  width: 100%;
  margin:  1%;
  font-size: 100%;
}

button.incorrectDisactivatedButton {
  cursor:not-allowed;
  color: red;
  border-radius: 5px;
  border: 2px solid red;
  height: 100%;
  width: 100%;
  margin: 1%;
  font-size: 100%;
}

button.incorrectActivatedButton {
  color: red;
  border-radius: 5px;
  border: 2px solid red;
  height: 100%;
  width: 100%;
  margin:  1%;
  font-size: 100%;
}

button.correctButton{
  color: green;
  border-radius: 5px;
  border: 4px solid green;
  height: 100%;
  width: 100%;
  margin:  1%;
  font-size: 100%;
}

.svgBarContainer {
  width: 50%;
  background :linear-gradient(to top, hsl(120,100%,90%), hsl(120,100%,70%));
}


.svgBarContainerCurrent{
  width: 30%;
  background-color: hsl(120,100%,80%);
}

.svgBarContainerHist{
  width: 30%;
  background-color: orange;
}

.svgBarContainerThreeBars{
  width: 80%;
  background :linear-gradient(to top, hsl(120,100%,90%), hsl(120,100%,70%));
}

.svgBarContainerFiveBars {
  width: 90%;
  background :linear-gradient(to top, hsl(120,100%,90%), hsl(120,100%,70%));
}

.svgBarContainerTenBars {
  width: 90%;
  background :linear-gradient(to top, hsl(120,100%,90%), hsl(120,100%,70%));
}

.svgBarContainerSevenBars{
  width: 80%;
  background :linear-gradient(to top, hsl(120,100%,90%), hsl(120,100%,70%));
}

.pathContainer {
  viewBox: 0 0 360 360;
  margin-top: 20px;
  margin-left: 60px;
  max-width: 80%;
  height: 300px;
  background: transparent;
}

.percentageCircle {
  fill:none;
  stroke-width:15;
  stroke-linecap: round;

}

.ovalScoreBar{
  border-radius: 15px;
  stroke-linecap: round;

/*  background: linear-gradient(to top right, orange,yellow);*/
}

.makeButtonContainer{
  display: flex;
  background:transparent;
}

.shapeContainer {
  display: flex;
  width: 100%;
  height: 120px;
  transform: rotate(270deg);
  background-color: transparent;
  position: relative;
  right: 2px;
  top: 10px;
  border-top: 2px solid #2F4F4F;
  border-left: 2px solid #2F4F4F;
  padding-bottom: 0%;
}

.bars {
  fill: hsl(120,100%,80%);
  stroke: black;
  stroke-width: 0.5px;
  position: relative;
  right:100%;
 }

.polyline {
  fill: none;
  stroke:black;
  stroke-width:3;
  position: relative;
}

.faintedLineToAdjustGraph {
  width: 1px;
  height: 150px;
  position: relative;
  right: 24%;
  top: 9%;
}

.svgFaintedLine {
   width: 1px;
   height: 5px;
  background-color: #2F4F4F;
  position: relative;
  left: 24%;
  top: 9%;
}


.svgFaintedLineHist{
  width: 1px;
  height: 5px;
 background-color: #2F4F4F;
 position: relative;
 left: 40%;
 top: 9%;
}


.svgFaintedLineCurrent {
  width: 1px;
  height: 5px;
 background-color: #2F4F4F;
 position: relative;
 left: 23%;
 top: 9%;
}

.svgFaintedLineThreeBars {
   width: 1px;
   height: 5px;
  background-color: #2F4F4F;
  position: relative;
  left: 40%;
  top: 9%;
}
.svgFaintedLineFiveBars {
   width: 1px;
   height: 5px;
  background-color: #2F4F4F;
  position: relative;
  left: 50%;
  top: 9%;
}

.svgFaintedLineTenBars {
   width: 1px;
   height: 5px;
  background-color: #2F4F4F;
  position: relative;
  left: 24%;
  top: 9%;
}

.svgFaintedLineSevenBars{
   width: 1px;
   height: 5px;
  background-color: #2F4F4F;
  position: relative;
  left: 40%;
  top: 9%;
}


 .faintedXaxis {
   /*width : 5%;*/
  width : 100%;
  height: 1px;
  background-color: #2F4F4F;
  position: relative;
  bottom: 19px;
}




.faintedXaxisMirror {
  /*width : 5%;*/
 width : 100%;
 height: 1px;
 background-color: #2F4F4F;
 position: relative;
 bottom: 100px;
}


.faintedYaxis {
    width : 10;
    height:50%;
    position: relative;
right:80%;
  top:  15%;
}

.faintedYaxisV {
  background-color: #2F4F4F;
    width : 1px;
    height:100%;
  position: relative;
  bottom: 60%;

}
.scoreLabel
{
   color: hsl(120,100%,80%);
   text-align: center;
   font-size: 70%;
}

.scoreLabelV
{
   color: white;
   text-align: center;
   font-size: 70%;
  transform: rotate(-90deg);
  position: relative;
  bottom: 10px;
}

.scoreLabelCurrent
{
   color: hsl(120,100%,80%);
   position: relative;
   right: 15%;
  top: 12px;
   text-align: center;
   font-size: 70%;
}

.scoreLabelHist {
   color: hsl(120,100%,80%);
   text-align: center;
   font-size: 70%;
  position: relative;
  left: 15%;
}

.emptyScoreLabel{
  color:transparent;
     font-size: 70%;
}

.ovalGraphLabel{
   color: hsl(120,100%,80%);
   text-align: center;
   font-size: 100%;
  position: relative;
  width: 5%;
  left: 33%;
  top: 10%;
}

.circularGrapLabel{
   color: hsl(120,100%,80%);
   text-align: center;
   font-size: 120%;
  position: relative;
  width: 5%;
  left: 8%;
  top: 20%;
}

.xLabel {
   color: hsl(120,100%,80%);
   font-size:70%;
   text-align: center;
   position: relative;
   bottom: 8px;
}

.xLabelThreeBars  {
   color: hsl(120,100%,80%);
   font-size:70%;
   text-align: center;
    position: relative;
   bottom: 8px;
}


.xLabelFiveBars {
   color: hsl(120,100%,80%);
   font-size:50%;
   text-align: center;
    position: relative;
   bottom: 8px;
}


.xLabelTenBars {
   color: hsl(120,100%,80%);
   font-size:65%;
   text-align: center;
   position: relative;
   bottom: 8px;
}

.xLabelSevenBars{
   color: hsl(120,100%,80%);
   font-size:70%;
   text-align: center;
   position: relative;
   bottom: 8px;
}


.countLabel {
  color: hsl(120,100%,80%);
  font-size: 70%;
  text-align: center;
  position: relative;
  bottom:1px;
}

.countLabelV {
  color: whitesmoke;
  font-size: 75%;
  text-align: center;
  position: relative;
  bottom:35px;
  transform: rotate(-90deg);
}


.graphLabel {
   color: hsl(120,100%,80%);
   font-size: 100%;
   height: 10%;
   width: 100%;
    text-align: center;
  position: relative;
  bottom: 67%;

}



.countMainLabel {
  font-size: 60%;
  width: 15px;
  height: 10%;
  position: relative;
  top: 15%;
  left: 4%;
}
.countMainLabelV {
  color: white;
   font-size: 80%;
   width: 15px;
   height: 10%;
   position: relative;
   top: 42%;
  left: 20%;
  transform: rotate(-90deg);
}

.percentageMainLabel {
   height: 1%;
   width: 1%;
   font-size: 70%;
   position: relative;
   bottom:26%;
   left: 5%;
}

.percentageMainLabelV {
  color:
  height: 1%;
   width: 1%;
   font-size: 70%;
   position: relative;
   bottom:50%;
   left: 85%;
transform: rotate(-90deg);
}


.hzMainLabel {
  width: 15px;
  height: 10%;
  font-size:  60%;
  position: relative;
  left: 4%;
  top: 19%;

}


.exerciseWrapper {
  display: inline-block;
  text-align: center;
  width: 100%;
  height: 100%;
}

.bottomRow{
  display: flex;
      text-align: center;
  margin-left:auto;
    margin-right:auto;

}


.userMediaWidgetInQuestion {
    display: inline-flex;
    width: 50%;
}


.nextQuestion{
  height: 10%;
}
.nextQuestion button{
  height: 100%;
}


.playReferenceOrQuestion{
  height: 33%;
  width:100%;
}

.soundWidget{
  height:100%;
  width:100%;
}

.playReference {
/*   width:33%; */
/*   height: 100%; */
/*   float: left; */
  /*position: relative;*/
  /*bottom:30%*/
}


.playQuestion {
  width:33%;
  height: 100%;
/*   display: inline-block; */
  float:left;
  text-align: center;
  /*position:relative;*/
  /*bottom:30%;*/
}
.playQuestion button {
  width: 90%;
  height: 40%;
  position: relative;
  bottom:-38%
}



.numberInput{
  width:50px;
  background-color:rgb(200,200,200)
}


.userMediaWidget{
  display: auto
}
.userMediaWidgetDisabled{
  display: auto;
  opacity: 0.15;
  border-top: 1pt solid black;
}
.browseButton{
  height:20%;
}
.waveformWrapper{
  width:100%;
  height: 50%
}

.sourceCanvasWrapper {
  width: 100%;
  height:150px;
  position:relative;
}

.waveformCanvas{
  width:100%;
  height: 100%;
  background-color:rgb(50,50,50);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.startEndCanvas{
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.bufferControls{
  display:inline-block;
  height:20%;
}

.specGraphWrapper {
  display:inline-block;
  width:100%;
  height:100%;
}

.specEvalWrapper {
  display:flex;
  margin-bottom: 2em;
  margin-left: 1em;
  margin-right: 1em;
}

.specEvalWrapperV {
  display:inline-block;
  ;
  width:50%;
  height:100%;
    transform: rotate(90deg);
  position: relative;
  left: 10%;
  top: 10%;

}

.flexExperiment{
  display:inline-flex;
  width:100%;
  height:100%;
}

.evalGraphFrameRow {
  display: inline-flex;
  height: 100%;
  width:50%;
  align-items:flex-end;
}

.scoreBarWrapper {
  display: inline-block;
  position: relative;
  bottom:55%;
  width: 50%;
  margin-left: -10%;
  margin-right: -10%;
}



.scoreBarWrapperHist {
    display: inline-block;
  position: relative;
  bottom:50%;
  width: 50%;
  margin-left: -10%;
  margin-right: -10%;
}

.scoreBarWrapperThreeBars{
  display: inline-block;
  position: relative;
  bottom:55%;
  width: 32%;
  margin-left: -2.5%;
  margin-right: -2.5%;
}

.scoreBarWrapperFiveBars {
  display: inline-block;
  position: relative;
  bottom:55%;
  width: 17%;
   margin-left: -0.5%;
  margin-right: -0.5%;
}

.scoreBarWrapperSevenBars{
  display: inline-block;
  flex-grow: 1;
  position: relative;
  bottom:55%;
  width:13%;
     margin-left: -1%;
  margin-right: -1%;
}

.scoreBarWrapperTenBars {
  display: inline-block;
  flex-grow: 1;
}

.ovalScoreWrapper {
  display: flex;
  height: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 15px;
  width: 100%;
  background-color: lightgray;
}

.explanation{
  text-align: justify;
  margin:2%;
}

.topRow {
  width: 100%;
  border-radius: 10px;
  background-color: grey;
  margin-top: 5px;
  margin-bottom: 5px;
}

.middleRow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.bottomRow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.topRowHeader {
  padding: 10px;
  text-align: left;
}

.questionTitle {
  display: inline;
  width: auto;
}

div.closeExerciseButton {
  margin-left: 20px;
  display: inline;
  width: auto;
}

button.closeExerciseButton {
}

.buttonInterface {
  padding: 10px 0 10px 0;
  display: flex;
  justify-content: space-between;
}

.listenButton {
  flex-grow: 0;
  margin: 0 10px 0 10px;
}

.nextButton {
  flex-grow: 0;
  display: inline-block;
  margin: 0 10px 0 10px;
}

.makeButtonInvisible {
  visibility: hidden;
}

.answerButtonWrapper {
/*   margin-top: 5%; */
/*   margin-bottom: 5%; */
  display: flex;
  text-align: center;
  align-items: center;
  background-color: black;
  width: 100%;
  height: 20%;
  flex-grow: 1;
}




.leftBox {
  margin-right: 2px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  background-color: grey;
  width: 50%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-wrap: wrap;
}

.rightBox {
  margin-left: 2px;
  padding: 10px;
  border-radius: 10px;
  background-color: grey;
  width: 50%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

div.journalItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

textarea.journalItem {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: black;
  color: white;
  font-size: 150%;
  width: 100%;
  height: 100%;
  resize: none;
}

.configWidgetWrapper{
  width:100%
}

.configWidget {
  text-align: left;
/*   justify-content: space-between; */
}

.radioConfigWidget {
  width: 45%;
}

.sourceWidget{
  width: 90%;
  padding:5%;
  background-color: rgb(30,30,30);
  text-align: left;
}

.instructionsText {
  text-align: left;
}

.simpleTabBar {
  margin: 0px;
  padding: 0px;
}

.inactiveTab {
  display: inline;
  margin-right: 1px;
  padding: 1em;
  background-color: black;
  border-radius: 4px;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  border-top: 1px solid grey;
}

.activeTab {
  display: inline;
  margin-right: 1px;
  padding: 1em;
  background-color: grey;
  border-radius: 4px;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  border-top: 1px solid grey;
}