/* START: style biases test starting page where email to enter */

.biases-test-start-container {
    border:var(--border-type);
    text-align: center;
    display: flex;
    justify-content: center;
}

/* END: style biases test starting page where email to enter */





/* Text headline */
.biases-test-start-h1 {
  margin-top:0.5em;
  margin-bottom: 0.5em;
  font-size: 2em;
  text-align: center;
}

.biases-test-start-hr1 {
  width:30%;
  margin:auto;
  margin-bottom: 2em;
}

@media (min-width: 768px) {

  .biases-test-start-hr1  {
      width:200px;
  }

  .biases-test-start-h1 {
    margin-top:1em;
  }
}


/* style center text start input page */
.biases-test-start-container-text1 {
  text-align:center;
  margin-top:2em;
  padding-left: 10%;
  padding-right: 10%;
  line-height: 2em;
  border:var(--border-type);
}

@media (min-width: 768px) {

  .biases-test-start-container-text1 {
      padding-left: 30%;
      padding-right: 30%;
  }
}


/* START: Input Field Text 1 */
/* used for: email address field on start page */

/* form starting stylings */
.input_text1_group 			  { 
    position:relative; 
    margin-bottom:0px; 
  }
  .input_text1_input 				{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid #757575;
  }
  .input_text1_input:focus 		{ outline:none; }
  
  /* LABEL */
  .input_text1_label 				 {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  
  /* active state */
  .input_text1_input:focus ~ label, .input_text1_input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }
  
  /* BOTTOM BARS */
  .input_text1_bar 	{ position:relative; display:block; width:300px; }
  .input_text1_bar:before, .input_text1_bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#5264AE; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .input_text1_bar:before {
    left:50%;
  }
  .input_text1_bar:after {
    right:50%; 
  }
  
  /* active state */
  .input_text1_input:focus ~ .input_text1_bar:before, .input_text1_input:focus ~ .input_text1_bar:after {
    width:50%;
  }
  
  /* HIGHLIGHTER */
  .input_text1_highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  /* active state */
  .input_text1_input:focus ~ .input_text1_highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }



/* END: Input Field Text 1 */






/* START: style of questions + answer option pages*/

.biases-test-questions-container {
    border:var(--border-type);
    text-align: center;
    padding-left: 10%;
    padding-right: 10%; 
}

.biases-test-questions-text-testid {
    margin-top:1em;
}

.biases-test-questions-text-h1 {
    color: var(--blue);
}

.biases-test-questions-hr1 {
    width:50%;
    margin:auto;
    margin-top: 1em;
    margin-bottom: 2em;
}

.biases-test-questions-image-quer{
    width:80%;
    max-width:400px;
}

.biases-test-questions-image-hoch{
    width:60%;
    max-width:300px;
}

@media (min-width: 768px) {

    .biases-test-questions-text-testid {
      margin-top:1em;
    }

    .biases-test-questions-hr1 {
        width:30%;
    }

    .biases-test-questions-image-quer{
      width:30%;
      max-width:400px;
  }
  
  .biases-test-questions-image-hoch{
      width:25%;
      max-width:300px;
  }

}

/* END; style of questions + answer option pages*/



/* START style of radio buttons in test */

.test-radio-button {
    margin-top: 2em;
    margin-bottom: 1em;
}

.test-radio-button input[type="radio"] {
    display: none;
    }

.test-radio-button label {
    display: inline-block;
    width: 80%;
    max-width: 40em;
    border-radius: 10px;
    background-color: #d1d1d1;
    padding: 1em 1em 1em 1em;
    font-size: 0.9em;
    cursor: pointer;
    text-align: left;
    }
   
.test-radio-button input[type="radio"]:checked+label {
    background-color: #76cf9f;
    }

/* END style of radio buttons in test */



/*  syle error if no answer ticked */
.text-no-answer-ticked {
  color:red;
  /* visibility: hidden; */
  display:none;
  border: 1px solid red;
  padding:0.5em;
  margin-bottom:2em;
  text-align: center;
  width: 80%;
  max-width: 40em;
}

.span-centered-nonselectq {
  display: flex;
  justify-content: center;
}




/* style test completed page */

.biases-test-completed-container {
  border:var(--border-type);
  text-align: center;
  padding-left: 10%;
  padding-right: 10%; 
}

.biases-test-completed-container h1 {
  margin-top:0.5em;
  margin-bottom: 0em;
  font-size: 2em;
  text-align: center;
}

.button1.buttontestcompleted {
  margin: 0.5em 0em 1em 0em; 
}


@media (min-width: 768px) {

  .biases-test-completed-container h1 {
    margin-top:1em;
  }
}



/* START COPYRIGHT SECTION */

   /* wrapper copyright */
   .copyright-section-test {
    position: relative;
    border:var(--border-type);
    padding:2% 0% 2% 0%;
    text-align: center;
    font-size:1em;
    margin-top:0em;
    margin-bottom:1em;
  }

  @media (min-width: 768px) {

    .copyright-section-test {
      /* margin-top: 0em; */
    }
  }
/* END COPYRIGHT SECTION */