/*
 * CSS for jsPsych experiments.
 *
 * This stylesheet provides minimal styling to make jsPsych
 * experiments look polished without any additional styles.
 */

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

/* Container holding jsPsych content */

 .jspsych-display-element {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
 }

 .jspsych-display-element:focus {
   outline: none;
 }

 .jspsych-content-wrapper {
   display: flex;
   margin: auto;
   flex: 1 1 100%;
   width: 100%;
 }

 .jspsych-content {
   max-width: 95%; /* this is mainly an IE 10-11 fix */
   text-align: center;
   margin: auto; /* this is for overflowing content */
 }

 .jspsych-top {
   align-items: flex-start;
 }

 .jspsych-middle {
   align-items: center;
 }

/* fonts and type */

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 160%;
  line-height: 200%;
  text-align: center;
}

/* Form elements like input fields and buttons */

/*.jspsych-display-element input[type="text"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 150%;
}

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
  display: inline-block;
  padding: 60%, 60%;
  margin:0%;
  font-size: 1.3vw;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 130%;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border:  solid transparent;
  color: #333;
  background-color: #fff;
  border-color: #aaa;
}

.jspsych-btn:hover {
  background-color: #ddd;
  border-color: #aaa;
}

.jspsych-btn:disabled {
  background-color: #eee;
  color: #aaa;
  border-color: #ccc;
  cursor: not-allowed;
}

/* jsPsych progress bar */

#jspsych-progressbar-container {
  color: #555;
  border-bottom:  solid #dedede;
  background-color: #f9f9f9;
  margin-bottom: 1em;
  text-align: center;
  padding: ;
  width: 100%;
  line-height: 1em;
}
#jspsych-progressbar-container span {
  font-size: 100%;
  padding-right: 100%;
}

/* Control appearance of jsPsych.data.displayData() */
#jspsych-data-display {
  text-align: center;
}

.Cntr0 {
  width: 22%;
  height: 32%;
  position: absolute;
  left: 38vw;
  top: 27vh
}
.Cntr1 {
  width: 70%;
  height: 88%;
  position: absolute;
  left: 15vw;
  top: 12vh
}
.Cntr2 {
  width: 35%;
  height: 46%;
  position: absolute;
  left: 27vw;
  top: 10vh
}

.left {
  width: 25%;
  height: 36%;
  position: absolute;
  left: 14vw;
  top: 30vh
}

.left:hover {
  transform: scale(1.08);
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.right {
  width: 25%;
  height: 36%;
  position: absolute;
  left: 57vw;
  top: 30vh
}

.right:hover {
  transform: scale(1.08);
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}


.Left {
  width: 20%;
  height: 31%;
  position: absolute;
  left: 7vw;
  top: 20vh
}

.Right {
  width: 20%;
  height: 31%;
  position: absolute;
  left: 49vw;
  top: 20vh
}






.tickcross_left {
  width: 5%;
  height: 7%;
  position: absolute;
  left: 42.5vw;
  top: 57vh
}

.tickcross_right {
  width: 5%;
  height: 7%;
  position: absolute;
  left: 84.5vw;
  top: 57vh
}

.TL {
  width: 34%;
  height: 40.5%;
  position: absolute;
  left: 12.5vw;
  top: 14.5vh
}

.TR {
  width: 34%;
  height: 40.5%;
  position: absolute;
  left: 52.5vw;
  top: 14.5vh
}

.BL {
  width: 34%;
  height: 40.5%;
  position: absolute;
  left: 12.5vw;
  top: 46vh
}

.BR {
  width: 34%;
  height: 40.5%;
  position: absolute;
  left: 52.5vw;
  top: 46vh
}

.Pos4Mic {
  width: 4%;
  height: 6%;
  position: absolute;
  left: 47vw;
  top: 70vh
}
.Pos4Mic2 {
  width: 4%;
  height: 6%;
  position: absolute;
  left: 47.5vw;
  top: 70vh
}
.Pos4Mic3 {
  width: 4%;
  height: 6%;
  position: absolute;
  left: 47vw;
  top: 71vh
}
.container {
  position: relative;
  text-align: center;
  color:white;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:max-content;
}

.top {
  font-size:1em;
  text-align: center;
  transform: translate(0,-38vh)
}

.top2 {
  font-size:1.2em;
  position: absolute;
  left: 45.5vw;
  top: 12vh
}

.top3 {
  font-size:1.2em;
  position: absolute;
  left: 42vw;
  top: 12vh
}

.top4 {
  font-size:1.2em;
  position: absolute;
  left: 48vw;
  top: 12vh
}



.top1 {
  font-size:1.5em;
  position: absolute;
  left: 12vw;
  top: 12vh
}

.bottom1 {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:max-content;
}

.bottom2 {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:max-content;
}
.bottom3 {
  position: absolute;
  top: 68%;
  left: 34%;
  transform: translate(-50%, -50%);
  width:max-content;
}
.bottom4 {
  position: absolute;
  top: 68%;
  left: 53%;
  transform: translate(-50%, -50%);
  width:max-content;
}
.bottom5 {
  font-size:1.2em;
  position: absolute;
  left:43vw;
  top: 60vh
}
.bottom6 {
  font-size:0.8em;
  position: absolute;
  left: 60vw;
  top: 60vh
}
.bottom7 {
  font-size:1.2em;
  position: absolute;
  left: 44vw;
  top: 60vh
}
.topright {
  position: absolute;
  top: 12vh;
  left: 82vw;
  transform: translate(-50%, -27%);
}

