#var_instruction {font-size: 1.3em; line-height: 1.3em; 
    text-align: left; width: 500px; margin: 0 auto;}
.jspsych-btn {font-size: 1.1em; border: 1.5px solid #999;border-radius: 0.3em;
    -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select:none;}
p.hint_text {font-size: 16px; color: #aaa;}
p.report_header_text {text-align: left;}
font.hlight {color: #199ED8;}
span.hlight {color: #199ED8;}
a {text-decoration: underline; cursor: pointer;}
a#var_save_data:visited {color: black;}
a#var_save_data:active {color: #199ED8;}
a#var_save_data {text-decoration:underline }
#var_page_title, p.var_page_title {font-size: 1.2em; margin-bottom: 2em;}
#var_page_title a, p.var_page_title a {text-decoration: underline; color: black;}

@-webkit-keyframes fade-in-out { 0% {opacity: 0;} 20% {opacity: 1;} 80% {opacity: 1;} 100% {opacity: 0;} }
@keyframes fade-in-out { 0% {opacity: 0;} 20% {opacity: 1;} 80% {opacity: 1;} 100% {opacity: 0;} }  
#var_countdown {font-size: 4em; font-weight: bold; color: #199ED8;
    -webkit-animation: fade-in-out 1s; animation: fade-in-out;	
    animation-duration: 1s;	animation-timing-function: linear}
#var_expr_form {margin-bottom: 2em; font-size: 1.1em;}
.var_form_p {margin:0 auto 1.2em auto; width: 420px; text-align: left;}
.var_form_sec {margin:0 auto 1.2em auto; text-align: left;}
.var_form_label {display: inline-block; text-align: right; width: 4em; vertical-align: middle; margin-right: 0.5em; }
.var_form_div {display: inline-block; width: 11em; vertical-align: middle;}
.var_form_div input[type=text], .var_form_div input[type=number] {margin: 0; width:100%; height:2em;}
.var_form_div select {width: 100%; height: 2.5em; margin: 0;}
.var_form_hint {text-align: left; margin: 0;}
.var_completed_hint {font-size: 0.8em; color: #199ED8;}

#var_audio_icon_box_1, .var_audio_icon_box_1{display: inline-block; vertical-align: middle;
    border-radius: 10%; background-color: #aaa; cursor: pointer; color: white;
    padding: 5px 10px;}
#var_audio_icon_triangle_1, .var_audio_icon_triangle_1{
    display: inline-block; vertical-align:center;
    width: 0; height: 0;
}
#var_audio_icon_triangle_1.toplay, .var_audio_icon_triangle_1.toplay {
    border-left: 0.6em solid white;
    border-top: 0.4em solid transparent;
    border-right: 0;
    border-bottom: 0.4em solid transparent;
    margin: 0 0.4em;
}
#var_audio_icon_triangle_1.topause, .var_audio_icon_triangle_1.topause{
    border: 0.4em solid white;
    background-color: white;
    margin: 0 0.3em;

}
#var_audio_play_1, .var_audio_play_1{display: none;}
@media only screen and (max-width:600px) {
    #var_instruction {width: 90%;}
}
@media only screen and (max-width:450px) {
    .var_form_p{width: 90%;}
}