/* Layout shared by all components: scales from small laptops (1024 x 600) to large monitors. Author: Valerio Ghezzi. */
html, body { margin: 0; padding: 0; background: #ffffff; color: #111111; }
body { font-family: Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif; font-size: clamp(15px, 0.95vw + 0.55vh, 30px); line-height: 1.45; -webkit-text-size-adjust: 100%; }
.jspsych-display-element { font-family: inherit; font-size: inherit; line-height: inherit; }
.jspsych-content { max-width: min(92vw, 1600px); }
.pagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3.5em 4vw 2em; box-sizing: border-box; }
.instr { max-width: min(46em, 90vw); text-align: left; margin: 0 auto; }
.instr p { margin: 0 0 0.9em; }
.btnrow { text-align: center; margin-top: 1.2em; }
.btn, .jspsych-btn { font: inherit; font-size: 0.95em; padding: 0.45em 1.2em; margin: 0.3em; border: 1px solid #777777; border-radius: 4px; background: #f2f2f2; color: #111111; cursor: pointer; }
.btn:hover, .jspsych-btn:hover { background: #e3e3e3; }
.hint { text-align: center; color: #444444; }
.fix { font-size: 2.4em; }
.stmt { font-size: clamp(22px, 1.7vw + 0.9vh, 52px); font-weight: bold; margin: 1.2em 0; }
.keys { display: flex; justify-content: space-between; width: min(48vw, 80vh, 1000px); margin: 1em auto 0; color: #333333; }
.fb-ok { color: #1a7a1a; font-size: 2.1em; font-weight: bold; }
.fb-err { color: #c00000; font-size: 2.1em; font-weight: bold; }
.pts { color: #333333; margin-top: 0.6em; }
.hdr { position: fixed; top: 9vh; left: 0; right: 0; text-align: center; font-size: 1.15em; }
.ind { color: #d26a00; font-size: 1.5em; font-weight: bold; }
.tgt { color: #1f4fbf; font-size: 1.5em; font-weight: bold; }
.x { color: #d00000; font-size: 2.6em; font-weight: bold; margin-top: 0.4em; line-height: 1; }
.dots-canvas { width: min(760px, 86vw, 160vh); height: auto; display: block; margin: 0 auto; }
.stimolo-img { width: min(30vw, 48vh, 720px); height: auto; display: block; margin: 0 auto; }
/* abort button: always visible, never over the stimuli */
.abort { position: fixed; top: 8px; right: 10px; z-index: 50; font-family: inherit; font-size: clamp(12px, 0.7vw, 16px); color: #555555; border: 1px solid #aaaaaa; border-radius: 3px; padding: 3px 8px; background: #f7f7f7; cursor: pointer; }
.velo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.35); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #ffffff; border: 2px solid #444444; border-radius: 6px; padding: 1.2em 1.4em; max-width: min(40em, 92vw); text-align: left; }
.avviso-rete { position: fixed; bottom: 0; left: 0; right: 0; background: #fff3cd; border-top: 1px solid #c9a227; padding: 8px 16px; z-index: 60; font-size: 14px; }
/* forms and questionnaires */
.form { width: min(60em, 92vw); margin: 0 auto; text-align: left; font-size: 0.85em; }
.form h2 { font-size: 1.15em; margin: 0 0 0.5em; }
.form p { margin: 0 0 0.7em; }
.lik-wrap { width: 100%; overflow-x: auto; }
table.lik { border-collapse: collapse; width: 100%; }
table.lik th { font-weight: normal; font-size: 0.82em; padding: 4px; vertical-align: bottom; text-align: center; color: #333333; }
table.lik td { border-top: 1px solid #dddddd; padding: 0.4em 0.25em; text-align: center; }
table.lik td.it { text-align: left; width: 50%; }
table.lik label { display: block; cursor: pointer; padding: 0.3em 0; }
table.lik input { transform: scale(1.15); cursor: pointer; }
tr.chk td { background: #fafafa; }
.num { font-weight: bold; }
.small { font-size: 0.8em; color: #555555; }
.scala5 { display: flex; justify-content: center; margin: 0.6em 0 0.2em; }
.scala5 .cella { margin: 0 0.6em; }
.scala5 .cella { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.ancore { display: flex; justify-content: space-between; width: min(22em, 80vw); margin: 0 auto; font-size: 0.85em; color: #555555; }
.ck { display: block; margin: 0.25em 0; cursor: pointer; }
.field { font: inherit; padding: 0.25em 0.5em; border: 1px solid #888888; width: 7em; }
.codicefield { font-family: "Courier New", Courier, monospace; font-size: 1.4em; letter-spacing: 0.25em; text-transform: uppercase; width: 8em; padding: 0.2em 0.4em; }
.code { font-family: "Courier New", Courier, monospace; font-size: 1.9em; letter-spacing: 0.3em; border: 2px dashed #555555; padding: 0.25em 0.8em; display: inline-block; margin: 0.4em 0; }
.timer { font-size: 2.6em; font-weight: bold; margin: 0.5em 0; text-align: center; }
.doc { font-size: 0.78em; line-height: 1.45; }
.doc table { border-collapse: collapse; width: 100%; margin: 0.3em 0; }
.doc td { border: 1px solid #cccccc; padding: 0.35em 0.5em; vertical-align: top; white-space: pre-line; }
.doc td:first-child { width: 30%; font-weight: bold; }
.errore-form { color: #b00000; font-weight: bold; }
@media (max-height: 700px) { body { font-size: clamp(14px, 0.9vw + 0.5vh, 18px); } .pagina { padding-top: 2.8em; } }
#jspsych-canvas-stimulus { width: min(1200px, 80vw, 130vh); height: auto; display: block; margin: 0 auto; }
#jspsych-instructions-nav { margin-top: 1.2em; }
/* jsPsych needs a display element with an explicit height to centre the stimuli vertically */
html, body { height: 100%; }
#contenuto { min-height: 100%; }
#contenuto.jspsych-display-element { height: 100vh; height: 100dvh; min-height: 0; }