/*
 * 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: 19px;
  line-height: 3em;
}

/* Form elements like input fields and buttons */

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

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 10px;
  color: black;
  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;
}

/* DTT button properties */ 
.jspsych-btn-DTT {
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  box-shadow: 0 2px #666;
  font-size: 35px;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 3px solid transparent;
  border-radius: 10px;
  color: #333;
  background-color: #9ef2a9;
  border-color: gray;
}

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

.jspsych-btn-DTT:active {
  background-color: yellow;
  box-shadow: 0 5px #666;
  transform: translateY(3px);
}

.jspsych-btn-DTT:disabled {
  background-color: #eee;
  transform: translateY(3px);
  color: #aaa;
  border-color: gray;
  cursor: not-allowed;
}

.jspsych-btn-next-trial {
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  box-shadow: 0 3px #666;
  font-size: 32px;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 3px solid transparent;
  border-radius: 10px;
  color: white;
  background-color: #0a6e19;
  border-color: black;
  width: 39%
}

.jspsych-btn-next-trial:hover {
  background-color: yellow;
  color: black;
  border-color: gray;
}

.jspsych-btn-next-trial:active {
  background-color: yellow;
  box-shadow: 0 5px #666;
  transform: translateY(3px);
}

.jspsych-btn-next-trial:disabled {
  background-color: #eee;
  transform: translateY(3px);
  color: #aaa;
  border-color: gray;
  cursor: not-allowed;
}

.jspsych-btn-word-choice {
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  box-shadow: 0 3px #666;
  font-size: 35px;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 3px solid transparent;
  border-radius: 10px;
  color: black;
  background-color: #9ef2a9;
  border-color: gray;
  width: 11%
}

.jspsych-btn-word-choice:hover {
  background-color: yellow;
  color: black;
  border-color: gray;
}

.jspsych-btn-word-choice:active {
  background-color: yellow;
  box-shadow: 0 5px #666;
  transform: translateY(3px);
}

.jspsych-btn-word-choice:disabled {
  background-color: #eee;
  transform: translateY(3px);
  color: #aaa;
  border-color: gray;
  cursor: not-allowed;
}

.jspsych-btn-word-choice-after-chosen {
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  box-shadow: 0 3px #666;
  font-size: 35px;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 3px solid transparent;
  border-radius: 10px;
  color: black;
  background-color: yellow;
  border-color: gray;
  width: 11%
}

.jspsych-btn-survey-next-trial {
  position: absolute;
  left: 31%;
  top: 62%;
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  box-shadow: 0 3px #666;
  font-size: 32px;
  font-weight: 600;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 3px solid transparent;
  border-radius: 10px;
  color: white;
  background-color: #0a6e19;
  border-color: black;
  width: 38%
}

.jspsych-btn-survey-next-trial:hover {
  background-color: yellow;
  color: black;
  border-color: gray;
}

.jspsych-btn-survey-next-trial:active {
  background-color: yellow;
  box-shadow: 0 5px #666;
  transform: translateY(3px);
}

.jspsych-btn-survey-next-trial:disabled {
  background-color: #eee;
  transform: translateY(3px);
  color: #aaa;
  border-color: gray;
  cursor: not-allowed;
}

/* jsPsych progress bar */

#jspsych-progressbar-container {
  color: #555;
  border-bottom: 1px solid #dedede;
  background-color: #f9f9f9;
  margin-bottom: 1em;
  text-align: center;
  padding: 8px 0px;
  width: 100%;
  line-height: 1em;
}
#jspsych-progressbar-container span {
  font-size: 14px;
  padding-right: 14px;
}
#jspsych-progressbar-outer {
  background-color: #eee;
  width: 50%;
  margin: auto;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#jspsych-progressbar-inner {
  background-color: #aaa;
  width: 0%;
  height: 100%;
}

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

.jspsych-survey-text-question textarea {
  font-size: 32px;
  position: absolute;
  left: 30%;
  top: 40%
}

::placeholder {
  color: #BFC4B6;
}

.Cntr0 {
  width: 52%;
  height: 60%;
  position: absolute;
  left: 24%;
  top: 20%
}

.Cntr {
  width: 52%;
  height: 60%;
  position: absolute;
  left: 25%;
  top: 13%
}

.TL {
  width: 31%;
  height: 36%;
  position: absolute;
  left: 20%;
  top: 17%
}

.TR {
  width: 30%;
  height: 35%;
  position: absolute;
  left: 51%;
  top: 17%
}

/* .BL {
  width: 410px;
  height: 330px;
  position: absolute;
  left: 290px;
  top: 455px
} */

.BL {
  width: 31%;
  height: 36%;
  position: absolute;
  left: 20%;
  top: 52%
}

.BR {
  width: 31%;
  height: 36%;
  position: absolute;
  left: 51%;
  top: 52%
}

/* .BR {
  width: 410px;
  height: 330px;
  position: absolute;
  left: 735px;
  top: 455px
} */

.TL2 {
  width: 5.5%;
  height: 6.5%;
  position: absolute;
  left: 40.5%;
  top: 42.5%
}

.TR2 {
  width: 5.5%;
  height: 6.5%;
  position: absolute;
  left: 71.5%;
  top: 42.5%
}

.BL2 {
  width: 5.5%;
  height: 6.5%;
  position: absolute;
  left: 40.5%;
  top: 77.5%
}

.BR2 {
  width: 5.5%;
  height: 6.5%;
  position: absolute;
  left: 71.5%;
  top: 77.5%
}

.TM1 {
  width: 44%;
  height: 47%;
  position: absolute;
  left: 12%;
  top: 13%
}

.TM2 {
  width: 44%;
  height: 47%;
  position: absolute;
  left: 44%;
  top: 13%
}

.BL3 {
  width: 44%;
  height: 47%;
  position: absolute;
  left: 12%;
  top: 46%
}

.BR3 {
  width: 44%;
  height: 47%;
  position: absolute;
  left: 44%;
  top: 46%
}
.Pos4Mic {
  width: 4%;
  height: 6%;
  position: absolute;
  left: 48%;
  top: 79%
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  transform: translate(-50%, -27%);
}

.centered2 {
  position: absolute;
  top: 25%;
  left: 50%;
  font-size: 28px;
  line-height: 1.55;
  transform: translate(-50%, -27%);
}

.top {
  position: absolute;
  top: 12%;
  left: 47%;
}

.top2 {
  position: absolute;
  top: 15%;
  left: 44%;
  font-size: 50px;
  font-family: 'Open Sans', 'Arial', sans-serif;
}
.bottom {
  position: absolute;
  top: 86%;
  left: 30%;
}
.bottom2 {
  position: absolute;
  top: 84%;
  left: 27%;
  font-size: 35px;
}
.bottom3 {
  position: absolute;
  top: 80%;
  left: 37%;
}
.bottom4 {
  position: absolute;
  top: 86%;
  left: 26%;
}
.bottom5 {
  position: absolute;
  top: 81%;
  left: 17%;
}
.bottom6 {
  position: absolute;
  top: 81%;
  left: 37%;
}

.topright {
  position: absolute;
  top: 17%;
  left: 75%;
  transform: translate(-50%, -27%);
}

/* for ClassifierHarmony */
/* two choices */
.tickcrossPos_if2choices_1{
  width: 2%;
  height: 4%;
  position: absolute;
  left: 53.2%;
  top: 60.2%
}

.tickcrossPos_if2choices_2{
  width: 2%;
  height: 4%;
  position: absolute;
  left: 53.2%;
  top: 70.2%
}

/* three choices */
.tickcrossPos_if3choices_1{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 39%;
  top: 65%
}

.tickcrossPos_if3choices_2{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 53%;
  top: 65%
}

.tickcrossPos_if3choices_3{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 67%;
  top: 65%
}

/* four choices */
.tickcrossPos_if4choices_1{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 43%;
  top: 63%
}

.tickcrossPos_if4choices_2{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 60%;
  top: 63%
}

.tickcrossPos_if4choices_3{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 43%;
  top: 72%
}

.tickcrossPos_if4choices_4{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 60%;
  top: 72%
}

/* six choices */
.tickcrossPos_if6choices_1{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 39%;
  top: 63%
}

.tickcrossPos_if6choices_2{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 53%;
  top: 63%
}

.tickcrossPos_if6choices_3{
  width: 2%;
  height:3.5%;
  position: absolute;
  left: 67%;
  top: 63%
}

.tickcrossPos_if6choices_4{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 39%;
  top: 73%
}

.tickcrossPos_if6choices_5{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 53%;
  top: 73%
}

.tickcrossPos_if6choices_6{
  width: 2%;
  height: 3.5%;
  position: absolute;
  left: 67%;
  top: 73%
}

}
