/*
	___________________________________________________________________________

	pathfinder.css - styles for Pathfinder ('traditional' theme)

	Copyright (c) 2020-2025 Quodit Ltd.

	May not be reproduced without permission.
	___________________________________________________________________________
*/



/* Noto Sans - regular */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/NotoSans/NotoSans-Medium.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'),
       url('../../fonts/NotoSans/NotoSans-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/NotoSans/NotoSans-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/NotoSans/NotoSans-Medium.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/NotoSans/NotoSans-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/NotoSans/NotoSans-Medium.svg#NotoSans') format('svg'); /* Legacy iOS */
}

.logoutBtn {
	display: none;
}

html, body {
	height: 98%;
}

body {
	padding: 0px;
	margin: 0px;
	background: #222;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#task-container {
	position: relative;
	margin: 1%;
	width: 98%;
	height: 98%;
}

#svg-container {
	position: absolute;
}

#svg-content {
	font-family: 'Noto Sans', sans-serif;
	text-anchor: middle;
}

#loading-container, #test-container, #test-container image, #test-welcome, #feedback-inst,
  #feedback, #instructions, #example, #ending, #timer, .item, .timeout, .svg-background {
	display: none;
}

#progress-background {
	fill: #474747;
	stroke-width: 3;
	stroke: #0AA;
}

#progress-bar {
	fill: #0AA;
}

#feedback image {
	display: block;
}

#test-welcome > rect, #feedback-inst > rect, #feedback > rect, #instructions > rect, #example > rect, #ending rect, #submission-error rect {
	opacity: 0.8;
	fill: #EFE;
	stroke-width: 3;
	stroke: black;
}

#test-welcome tspan.title, #feedback tspan.title, #instructions tspan.title, #example tspan.title {
	fill: #0AA;
	font-size: 60px;
	stroke: black;
	stroke-width: 1;
}

#test-welcome tspan.text, #feedback text, #feedback tspan, #example text.text {
	fill: #000;
	font-size: 32px;
}

#instructions tspan.text {
	fill: #000;
	font-size: 28px;
}

#instructions tspan.text-strong {
	font-weight: bold;
}

#instructions tspan.text-em {
	font-style: italic;
}

#instructions tspan.text-left, #example text.text-left {
	text-anchor: start;
}

#instructions tspan.stimulus {
	font-family: sans-serif;
	font-style: italic;
	font-size: 28px;
	fill: #0AA;
	stroke: black;
	stroke-width: 1;
}

#instructions tspan.label {
	font-family: sans-serif;
	font-weight: bold;
	fill: #000;
	font-size: 15px;
}

#chart-labels tspan {
	font-size: 16px;
}

.msg {
	fill: #0AA;
	font-size: 68px;
	stroke: black;
	stroke-width: 1;
}

#fs-toggle {
	display: none;
}

#fs-toggle rect {
	fill: #89A;
	stroke-width: 1;
	stroke: #89A;
}

#fs-toggle:hover rect {
	fill: #678;
	cursor: pointer;
}

#timer-text {
	font-weight: bold;
	fill: #060;
	font-size: 55px;
}

.timeout rect {
	fill: #000;
	opacity: 0.85;
}

.timeout-msg2 {
	font-size: 48px;
}

.nextBtn-disabled {
	opacity: 0.7;
	fill: #000;
}

.nextBtn-enabled {
	opacity: 0;
}

.nextBtn-enabled:hover {
	opacity: 0.2;
	fill:#88F;
	cursor: pointer;
}

.nextBtn-enabled:active {
	opacity: 0.2;
	fill:#FFF;
}

.nextBtn-text {
	font-size: 40px;
	font-weight: bold;
	fill: #CBF;
	stroke: #000;
	stroke-width: 1;
}

.ok-btn:hover {
	cursor: pointer;
}

.ok-btn rect {
	stroke-width: 2;
	stroke: #222;
	fill: #0AA;
}

.ok-btn:hover rect {
	fill: #1BB;
}

.ok-btn:active rect {
	fill: #5FF;
}

.ok-btn text {
	font-size: 25px;
	font-weight: bold;
	fill: black;
}

@-webkit-keyframes glow {
	0%   {opacity:0;}
	50%  {opacity:0.25;}
	100% {opacity:0;}
}

@keyframes glow {
	0%   {opacity:0;}
	50%  {opacity:0.25;}
	100% {opacity:0;}
}

.dais-closed {
	opacity: 0;
}

.dais-open {
	opacity: 0;
	fill:#6DD;

	-webkit-transition: opacity .2s;
	transition: opacity .2s;
	pointer-events: all;

	-webkit-animation: glow 1.5s infinite;
	animation: glow 1.5s infinite;
}

.dais-open:hover {
	cursor: pointer;
}

.resp-btn {
	opacity: 0;
	fill: #000;
	stroke: black;
	stroke-width: 1;

	-webkit-transition: opacity .2s;
	transition: opacity .2s;
	pointer-events: all;
}

.resp-btn:hover {
	opacity: 0.3;
	cursor: pointer;
}

.resp-btn-selected {
	opacity: 0.4;
	fill: #04F;
	stroke: black;
	stroke-width: 1;
}

.resp-text {
	fill: #FFF;
	stroke: #000000;
	font-size: 42px;
}

.stimulus-text {
	font-weight: bold;
	fill: #060;
	font-size: 40px;
}

.stimulus-text-serif {
	font-family: sans-serif;
	font-size: 42px;
	fill: #060;
}

.isto-text {
	font-weight: bold;
	fill: #000;
	font-size: 40px;
}

#submit-btn-container use {
	opacity: 0;
}

#submit-btn-container use:hover {
	cursor: pointer;
}

#submit-btn-container use.active {
	-webkit-transition: opacity .2s;
	transition: opacity .2s;
	pointer-events: all;

	-webkit-animation: glow 1.5s infinite;
	animation: glow 1.5s infinite;
}

#submit-btn-container use.selected {
	fill: #CFF;
	opacity: 0.9;
	-webkit-transition: opacity 5s, fill 5s;
	transition: opacity 5s, fill 5s;
}

#submit-btn-container text {
	font-size: 70px;
	font-weight: bold;
	fill: #A9E;
	stroke: #000;
	stroke-width: 1;
}

#submission-error {
	display: none;
}