/* @import url("https://use.typekit.net/jig1pns.css"); */
@import url("https://use.typekit.net/sbn2yup.css");

/*******************************************************************************************************************************/

:root {
	/*** YLEISET ***/
	--neutral-000: #ffffff; /* puhdas valkoinen */
	--neutral-050: #f7f7f8; /* lähes valkoinen tausta */
	--neutral-100: #ededf0; /* vaalea korttitausta */
	--neutral-200: #d8d8dd; /* rajat, dividerit */
	--neutral-400: #a6a6ad; /* placeholder, secondary text */
	--neutral-500: #7a7a82; /* normaali teksti vaalealla */
	--neutral-600: #5f5f66; /* painotettu teksti */
	--neutral-700: #44444a; /* otsikot, ikonit */
	--neutral-800: #2b2b30; /* tumma tausta */
	--neutral-900: #151518; /* lähes musta */

	/*** TUOTE ***/
	--primary-000: #fff7ed; /* lähes valkoinen tausta */
	--primary-050: #ffedd5; /* erittäin vaalea highlight */
	--primary-100: #fed7aa; /* vaalea pinta */
	--primary-200: #fdba74; /* light accent */
	--primary-300: #fb9a3c; /* BRAND / default light */
	--primary-400: #f68b1f; /* BRAND / default */
	--primary-500: #f08300; /* HOVER / emphasized (sinun antama) */
	--primary-600: #d96f00; /* ACTIVE */
	--primary-700: #b85a00; /* tumma accent */
	--primary-800: #8f4600; /* dark UI accent */
	--primary-900: #5c2c00; /* erittäin tumma */

	--secondary-000: #f3fbf6; /* lähes valkoinen tausta */
	--secondary-050: #e6f7ec; /* erittäin vaalea highlight */
	--secondary-100: #ccefd8; /* vaalea pinta */
	--secondary-200: #a3e0bb; /* light accent */
	--secondary-300: #6cbd7b; /* BRAND / default (sinun antama) */
	--secondary-400: #5fb26e; /* normaali accent */
	--secondary-500: #4fa25f; /* hover */
	--secondary-600: #3f8f52; /* active */
	--secondary-700: #327443; /* tumma accent */
	--secondary-800: #245834; /* dark UI accent */
	--secondary-900: #173821; /* erittäin tumma */

	--method-000: var(--primary-000);
	--method-050: var(--primary-050);
	--method-100: var(--primary-100);
	--method-200: var(--primary-200);
	--method-300: var(--primary-300);
	--method-400: var(--primary-400);
	--method-500: var(--primary-500);
	--method-600: var(--primary-600);
	--method-700: var(--primary-700);
	--method-800: var(--primary-800);
	--method-900: var(--primary-900);
	--method-padding: .5em .75em;
	--method-border-radius: .5em;

	--orange-800: #AA2000;
	--orange-600: #D24500;
	--orange-500: #EC5C14;
	--orange-100: #FEBE9F;

	--text-black: var(--neutral-900);
	
	--disabled-background: var(--neutral-100);
	--disabled-text: var(--neutral-500); 
	--disabled-other: var(--neutral-200);

	--stroke-neutral-lighter: var(--neutral-000);
	--stroke-neutral-light: var(--neutral-100);
	--stroke-neutral: var(--neutral-200);
	--stroke-neutral-dark: var(--neutral-600);
	--stroke-neutral-darkest: var(--neutral-900);

	--background-neutral-lighter: var(--neutral-000);
	--background-neutral-light: var(--neutral-100);
	--background-neutral: var(--neutral-200);
	--background-neutral-dark: var(--neutral-600);
	--background-neutral-darker: var(--neutral-900);

	--background-primary-lighter: var(--neutral-050);
	--background-primary-light: var(--neutral-100);
	--background-primary: var(--neutral-500);
	--background-primary-dark: var(--neutral-600);
	--background-primary-darker: var(--neutral-900);

	--success-text: #3CA13D; /*EDU*/
	--success-border: #3CA13D; /*EDU*/
	--success-bg: #cee7ce; /*EDU*/
	--success-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23FFFFFF' stroke='%233CA13D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-up-icon lucide-thumbs-up'%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3Cpath d='M7 10v12'/%3E%3C/svg%3E");
	
	--error-text: #DB001C; /*EDU*/
	--error-border: #DB001C; /*EDU*/
	--error-bg: #f6bfc6; /*EDU*/
	--error-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23FFFFFF' stroke='%23DB001C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-down-icon lucide-thumbs-down'%3E%3Cpath d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z'/%3E%3Cpath d='M17 14V2'/%3E%3C/svg%3E");

	/*** IIOPPI ***/
	--oikein-vari: var(--success-text);
	--oikein-kehysvari: var(--success-border);
	--oikein-taustavari: var(--success-bg);
	--vaarin-vari: var(--error-text);
	--vaarin-kehysvari: var(--error-border);
	--vaarin-taustavari: var(--error-bg);

	--painike-vari: var(--primary-000);
	--painike-vari-hover: var(--primary-000);
	--painike-vari-selected: var(--primary-000);
	--painike-vari-disabled: var(--disabled-text);
	--painike-taustavari: var(--primary-400);
	--painike-taustavari-hover: var(--primary-500);
	--painike-taustavari-selected: var(--primary-600);
	--painike-taustavari-disabled: var(--disabled-background);
	--painike-kehys: .05em solid var(--primary-400);
	--painike-kehys-hover: .05em solid var(--primary-500);
	--painike-kehys-selected: .05em solid var(--primary-600);
	--painike-kehys-disabled: .05em solid var(--disabled-background);
	--painike-mitat: 1.5em;
	--painike-padding-width: .5em;
	--painike-pyoristys: .25rem;

	--painike2-vari: var(--secondary-800);
	--painike2-vari-hover: var(--secondary-800);
	--painike2-vari-selected: var(--secondary-800);
	--painike2-vari-disabled: var(--disabled-text);
	--painike2-taustavari: var(--secondary-000);
	--painike2-taustavari-hover: var(--secondary-050);
	--painike2-taustavari-selected: var(--secondary-200);
	--painike2-taustavari-disabled: var(--disabled-background);
	--painike2-kehys: .05em solid var(--secondary-200);
	--painike2-kehys-hover: .05em solid var(--secondary-400);
	--painike2-kehys-selected: .05em solid var(--secondary-500);
	--painike2-kehys-disabled: .05em solid var(--disabled-other);

	--painike3-vari: var(--secondary-000);
	--painike3-vari-hover: var(--secondary-000);
	--painike3-vari-selected: var(--secondary-000);
	--painike3-vari-disabled: var(--disabled-text);
	--painike3-taustavari: var(--secondary-400);
	--painike3-taustavari-hover: var(--secondary-500);
	--painike3-taustavari-selected: var(--secondary-600);
	--painike3-taustavari-disabled: var(--disabled-background);
	--painike3-kehys: .05em solid var(--secondary-400);
	--painike3-kehys-hover: .05em solid var(--secondary-500);
	--painike3-kehys-selected: .05em solid var(--secondary-600);
	--painike3-kehys-disabled: .05em solid var(--disabled-other);

	--painike-ok-vari: #FFFFFF;
	--painike-ok-vari-hover: #FFFFFF;
	--painike-ok-taustavari: #2DAC44;
	--painike-ok-taustavari-hover: forestgreen;
	--painike-ok-kehysvari: #2DAC44;
	--painike-ok-kehysvari-hover: forestgreen;

	--painike-sulje-vari: #FFFFFF;
	--painike-sulje-vari-hover: #FFFFFF;
	--painike-sulje-taustavari: #A01C32;
	--painike-sulje-taustavari-hover: #781525;
	--painike-sulje-kehysvari: #A01C32;
	--painike-sulje-kehysvari-hover: #781525;

	--painike-true-vari: #FFFFFF;
	--painike-true-vari-hover: #FFFFFF;
	--painike-true-taustavari: #2DAC44;
	--painike-true-taustavari-hover: forestgreen;
	--painike-true-kehysvari: #2DAC44;
	--painike-true-kehysvari-hover: forestgreen;

	--painike-false-vari: #FFFFFF;
	--painike-false-vari-hover: #FFFFFF;
	--painike-false-taustavari: #A01C32;
	--painike-false-taustavari-hover: #781525;
	--painike-false-kehysvari: #A01C32;
	--painike-false-kehysvari-hover: #781525;

	--range-mitat: 1em;
	--range-border-radius: .5em;

	--gap-XS: .25em;
	--gap-S: .5em;
	--gap: 1em;
	--gap-L: 1.5em;
	--gap-XL: 3em;

	--varjo: 0 0 .3rem .3rem rgba(0, 0, 0, .1);
	--varjo-siirrossa: 0 0 .3rem .3rem rgba(0, 0, 0, .1);

	/*** ELEMENTTI ***/
	--elementti-mitat: 1.8em;
	--elementti-mitat-aukkoruutu: 1.4em;
	--elementti-padding: var(--method-padding);
	--elementti-pyoristys: var(--method-border-radius);

	--elementti-vari: var(--text-black);
	--elementti-vari-hover: var(--text-black);
	--elementti-vari-selected: var(--text-black);
	--elementti-vari-selected-hover: var(--text-black);
	--elementti-vari-disabled: var(--disabled-text);
	--elementti-taustavari: var(--method-100);
	--elementti-taustavari-hover: var(--method-050);
	--elementti-taustavari-selected: var(--method-050);
	--elementti-taustavari-selected-hover: var(--method-050);
	--elementti-taustavari-disabled: var(--disabled-background);
	--elementti-kehys: .15em solid transparent;
	--elementti-kehys-hover-style: solid;
	--elementti-kehys-hover-color: transparent;
	--elementti-kehys-selected-style: solid;
	--elementti-kehys-selected-color: var(--method-600);
	--elementti-kehys-selected-hover-style: solid;
	--elementti-kehys-selected-hover-color: var(--method-500);
	--elementti-kehys-disabled: .05em solid var(--disabled-other);
	--elementti-kehys-palaute: .15em solid transparent;

	--elementti-vaalea-vari: var(--text-black);
	--elementti-vaalea-vari-hover: var(--text-black);
	--elementti-vaalea-vari-selected: var(--text-black);
	--elementti-vaalea-vari-selected-hover: var(--text-black);
	--elementti-vaalea-vari-disabled: var(--disabled-text);
	--elementti-vaalea-taustavari: var(--neutral-000);
	--elementti-vaalea-taustavari-hover: var(--neutral-000);
	--elementti-vaalea-taustavari-selected: var(--neutral-000);
	--elementti-vaalea-taustavari-selected-hover: var(--neutral-000);
	--elementti-vaalea-taustavari-disabled: var(--disabled-background);
	--elementti-vaalea-kehys: .15em solid transparent;
	--elementti-vaalea-kehys-hover-style: solid;
	--elementti-vaalea-kehys-hover-color: var(--method-100);
	--elementti-vaalea-kehys-selected-style: solid;
	--elementti-vaalea-kehys-selected-color: var(--method-600);
	--elementti-vaalea-kehys-selected-hover-style: solid;
	--elementti-vaalea-kehys-selected-hover-color: var(--method-500);
	--elementti-vaalea-kehys-disabled: .05em solid var(--disabled-other);
	--elementti-vaalea-kehys-palaute: .15em solid transparent;

	--elementti-input-vari: var(--text-black);
	--elementti-input-vari-hover: var(--text-black);
	--elementti-input-vari-focus: var(--text-black);
	--elementti-input-vari-focus-hover: var(--text-black);
	--elementti-input-vari-disabled: var(--disabled-text);
	--elementti-input-taustavari: var(--neutral-000);
	--elementti-input-taustavari-hover: var(--neutral-050);
	--elementti-input-taustavari-focus: var(--neutral-000);
	--elementti-input-taustavari-focus-hover: var(--neutral-050);
	--elementti-input-taustavari-disabled: var(--disabled-background);
	--elementti-input-kehys: .075em solid var(--stroke-neutral);
	--elementti-input-kehys-hover-style: solid;
	--elementti-input-kehys-hover-color: var(--stroke-neutral-dark);
	--elementti-input-kehys-focus-style: solid;
	--elementti-input-kehys-focus-color: var(--stroke-neutral-darkest);
	--elementti-input-kehys-focus-hover-style: solid;
	--elementti-input-kehys-focus-hover-color: var(--stroke-neutral-darkest);
	--elementti-input-kehys-disabled: .05em solid var(--disabled-other);
	--elementti-input-kehys-palaute: .15em solid transparent;

	--elementti-siirrettava-varjo: 0px 1px 3px 1px #0000001A, 0px 1px 2px 0px #00000033;
	--elementti-siirrettava-varjo-hover: 0px 2px 5px 2px #0000001A, 0px 1px 2px 0px #00000033;
	--elementti-siirrettava-varjo-siirrossa: 0px 4px 8px 3px #0000001A, 0px 1px 3px 0px #00000033;
}

/*******************************************************************************************************************************/

svg [font-family^="Open_Sans_Regular"] {
	font-family: "open-sans", serif;
	font-weight: 400;
	font-style: normal;
}
svg [font-family^="Open_Sans_Italic"] {
	font-family: "open-sans", serif;
	font-weight: 400;
	font-style: italic;
}
svg [font-family^="Open_Sans_Bold"] {
	font-family: "open-sans", serif;
	font-weight: 700;
	font-style: normal;
}

/*******************************************************************************************************************************/



* {
	position: relative;
	box-sizing: border-box;
}
foreignObject > * {
	/* ios bugi */
	position: unset;
}

html {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow: hidden;
	touch-action: manipulation;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-width: 100%;
	min-height: 100%;
	font-size: 20px;
	line-height: 1.2;
}
html.preloader::after,
html *.preloader::after {
	content: '';
	position: absolute;
	left: calc(50% - 18px);
	top: calc(50% - 18px);
	width: 36px;
	height: 36px;
	background-image: url(images/preloader.gif);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
html.grabbing #container * {
	pointer-events: none;
}
html.grabbing #container {
	cursor: grabbing;
}
html.no-parent.fixed.mobile {
	overflow: auto;
}
body {
	font-family: myriad-pro, 'Myriad Pro', serif;
	color: var(--text-black);
	margin: 0;
	padding: 0;
}
html, body {
	-webkit-text-size-adjust: none;
}
.lukittu,
.lukittu,
.lukittu *,
html.disabled,
html.disabled * {
	pointer-events: none !important;
	cursor: default !important;
}


/*** h1, h2, h3 ***/
h1, h2, h3, h4, h5, h6 {
	display: block;
	font-size: inherit;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: .75em;
}
h2 {
	font-size: 1.25em;
	margin-bottom: .75em;
}
h3 {
	font-size: 1em;
	margin-bottom: .75em;
}
h4 {
	font-size: .85em;
	margin-bottom: .75em;
}
h5 {
	font-size: .75em;
	margin-bottom: .75em;
}
h6 {
	font-size: .6em;
	margin-bottom: .75em;
}
h1:not(:first-child) {
	margin-top: 1.5em;
}
h2:not(:first-child) {
	margin-top: 1.5em;
}
h3:not(:first-child) {
	margin-top: 1.5em;
}
h4:not(:first-child) {
	margin-top: 1.5em;
}
h5:not(:first-child) {
	margin-top: 1.5em;
}
h6:not(:first-child) {
	margin-top: 1.5em;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
	margin-bottom: 0;
}


/*** ol ***/
ol {
	line-height: 1.5;
}
ol.pallo, ol.viiva, ol.abc, ol.nro, ol.tyhja, ol.merkki, ol.ympyra {
	margin: .5em 0;
	padding: 0 0 0 1.25em;
	counter-reset: item;
	list-style: none;
}
ol.tyhja {
	padding-left: 0;
}
ol.pallo:first-child, ol.viiva:first-child, ol.abc:first-child, ol.nro:first-child, ol.tyhja:first-child, ol.merkki:first-child, ol.ympyra:first-child {
	margin-top: 0;
}
ol.pallo:last-child, ol.viiva:last-child, ol.abc:last-child, ol.nro:last-child, ol.tyhja:last-child, ol.merkki:last-child, ol.ympyra:last-child {
	margin-bottom: 0;
}

ol:not(.tyhja) > *:not(li){
	margin-left: -1.25em !important;
}
ol > * {
	margin: 0 0 .5em !important;
}
ol > *:last-child {
	margin-bottom: 0 !important;
}

ol.pallo > li::marker {
	content: '• ';
	font-weight: bold;
} 
ol.viiva > li::marker {
	content:'– ';
}
ol.ympyra > li::marker {
	content:'⚬ ';
}
ol.merkki > li::marker {
	content: attr(data-merkki) ' ';
}

ol.abc {
	counter-reset: ol-abc-counter;
}
ol.abc > li {
	counter-increment: ol-abc-counter;
}
ol.abc > li::marker {
	content: counter(ol-abc-counter, lower-latin) ') ';
	counter-increment: ol-abc-counter;
}

ol.nro {
	counter-reset: ol-nro-counter;
}
ol.nro > li {
	counter-increment: ol-nro-counter;
}
ol.nro > li::marker {
	content: counter(ol-nro-counter, decimal) '. ';
	counter-increment: ol-nro-counter;
}

ol > li[data-merkki]::marker {
	content: attr(data-merkki) !important;
}

/* ol {
	line-height: 1.5;
}
ol.pallo, ol.viiva, ol.abc, ol.nro, ol.tyhja, ol.merkki {
	position: relative;
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
}
ol > li {
	margin: 0 0 .5em;
	padding: 0 0 0 1em;
}
ol > p {
	margin: 0 0 .5em;
}
ol.tyhja > li {
	padding: 0;
}
ol.pallo > li::before {
	content: '•';
	font-weight: bold;
	position: absolute;
	left: .25em;
} 
ol.viiva > li::before {
	content:'–';
	position: absolute;
	left: .15em;
}
ol.merkki > li::before {
	content: attr(data-merkki);
	position: absolute;
	left: .25em;
}
ol.pallo:first-child, ol.viiva:first-child, ol.abc:first-child, ol.nro:first-child, ol.tyhja:first-child, ol.merkki:first-child {
	margin-top: 0;
}
ol.pallo:last-child, ol.viiva:last-child, ol.abc:last-child, ol.nro:last-child, ol.tyhja:last-child, ol.merkki:last-child {
	margin-bottom: 0;
}
ol > li:last-child {
	margin-bottom: 0;
}
ol.abc {
	counter-reset: ol-abc-counter;
}
ol.abc ol.abc {
	counter-reset: ol-abc2-counter;
}
ol.abc ol.abc ol.abc {
	counter-reset: ol-abc3-counter;
}
ol.nro {
	counter-reset: ol-nro-counter;
}
ol.nro ol.nro {
	counter-reset: ol-nro2-counter;
}
ol.nro ol.nro ol.nro {
	counter-reset: ol-nro3-counter;
}
ol.abc > li::before,
ol.nro > li::before {
	position: absolute;
	left: .75em;
	transform: translateX(-100%);
}
ol.abc > li::before {
	content: counter(ol-abc-counter, lower-latin) ')';
	counter-increment: ol-abc-counter;
}
ol.abc ol.abc > li::before {
	content: counter(ol-abc2-counter, lower-latin) ')';
	counter-increment: ol-abc2-counter;
}
ol.abc ol.abc ol.abc > li::before {
	content: counter(ol-abc3-counter, lower-latin) ')';
	counter-increment: ol-abc3-counter;
}
ol.nro > li::before {
	content: counter(ol-nro-counter, decimal) '.';
	counter-increment: ol-nro-counter;
}
ol.nro ol.nro > li::before {
	content: counter(ol-nro2-counter, decimal) '.';
	counter-increment: ol-nro2-counter;
}
ol.nro ol.nro ol.nro > li::before {
	content: counter(ol-nro3-counter, decimal) '.';
	counter-increment: ol-nro3-counter;
} */


/*** p ***/
p {
	margin: .5em 0;
	padding: 0;
	line-height: 1.5;
}
p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}


/* sup / sub */
sup,
sub {
	line-height: 1;
}


/*** a ***/
a[href],
a[data-tiedosto]{
	color: inherit;
	white-space: normal;
	text-decoration: underline;
	cursor: pointer;
}
a.disabled {
	pointer-events: none;
}
a[href].disabled,
a[data-tiedosto].disabled{
	opacity: .6;
}
html.no-touch a[href]:hover,
html.no-touch a[data-tiedosto]:hover{
	text-decoration: none;
}


/*** nw ***/
nw {
	white-space: nowrap;
}


/*** font-size ***/
.fs75 {
	font-size: .75em;
}


/*** FLEX ***/
.flex-r {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flex-wrap {
	flex-wrap: wrap;
}
.gap-xs {
	gap: var(--gap-XS);
}
.gap-s {
	gap: var(--gap-S);
}
.gap {
	gap: var(--gap);
}
.gap-l {
	gap: var(--gap-L);
}
.gap-xl {
	gap: var(--gap-XL);
}

.justify-center{
	justify-content: center;
}
.justify-start{
	justify-content: flex-start;
}
.justify-end{
	justify-content: flex-end;
}
.justify-stretch{
	justify-content: stretch;
}
.align-center{
	align-items: center;
}
.align-start{
	align-items: flex-start;
}
.align-end{
	align-items: flex-end;
}
.align-stretch{
	align-items: stretch;
}


/*** * ***/
*[contenteditable="true"] {
	cursor: text;
	-webkit-user-select: text;
	user-select: text;
}
*[data-aani],
*[data-kaiutin],
*[data-aikakohta] {
	cursor: pointer !important;
}
*[data-aikakohta]:not(.nappi).kaiutin::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1.5em;
	height: 1.5em;
	background-image: url(images/nappi/kuuntele.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}


/*** HS/YLE-linkki ****************************************************************/
.yle,
.hs,
.hstv {
	color: var(--text-black);
	padding-left: 2em;
	padding-top: .05em;
}
.yle::before,
.hs::before,
.hstv::before {
	content:'';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.5em;
	height: 1.5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.yle::before {
	background-image: url(images/yle-logo.png);
}
.hs::before {
	background-image: url(images/hs-logo.png);
}
.hstv::before {
	width: 3em;
	background-image: url(images/hstv-logo.png);
}
.hstv {
	padding-left: 3.5em;
}


/*** CONTAINER ***/
#container {
	position: relative;
	margin: 0 auto;
	width: 100vw;
	min-height: 100vh;
	overflow: hidden;
	font-size: 20px;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}
html.fixed #container {
	width: 100vw;
	height: 100vh;
}
html.preloader #container {
	visibility: hidden;
}


/*** PAINIKKEET ***/
.painikkeet,
#painikkeet {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	gap: .25em;
}
.painikkeet > *:not(.disabled),
#painikkeet > *:not(.disabled) {
	pointer-events: all;
}


/*** YLEISET ERIKOISNAPIT ***/
.nuoliB.nappi {
	position: fixed;
	top: calc(50% - var(--painike-mitat) / 2);
	z-index: 1;
	border-radius: 50% !important;
	outline: .1em solid #FFF;
}
.nuoliB.nappi > svg {
	width: 80%;
	height: 80%;
	stroke-width: 1.5px;
}
.nuoliB.disabled {
	display: none;
}
.nuoliB.edellinen {
	left: .5em;
}
.nuoliB.seuraava {
	right: .5em;
}
html.scrollY #container > .nuoliB.seuraava {
	margin-right: 18px;
}

.okB {
	position: absolute;
	right: .5em;
	top: .5em;
	color: var(--painike-ok-vari) !important;
	border-color: var(--painike-ok-kehysvari) !important;
	background-color: var(--painike-ok-taustavari) !important;
}
html.no-touch .okB:not(.disabled):not(.selected):hover {
	color: var(--painike-ok-vari-hover) !important;
	border-color: var(--painike-ok-kehysvari-hover) !important;
	background-color: var(--painike-ok-taustavari-hover) !important;
}

.suljeB.nappi {
	position: absolute;
	right: .5em;
	top: .5em;
	z-index: 1;
	border-radius: 50% !important;
	outline: .1em solid #FFF;
}
.suljeB.nappi > svg {
	width: 70%;
	height: 70%;
	stroke-width: 1.75px;
}
html.scrollY #container > .suljeB {
	margin-right: 18px;
}
#suljeIkkunaB {
	z-index: 10001;
}
html.mobile.sulje-ikkunaB-parent #suljeIkkunaB,
html.sulje-ikkunaB-children:not(.mobile) #suljeIkkunaB {
	display: none !important;
}

/* .zoomB {
	
} */
.zoomB.plus {
	border-top-left-radius: .2em !important;
	border-top-right-radius: .2em !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.zoomB.plus.selected,
.zoomB.plus.disabled {
	z-index: 1 !important;
}
.zoomB.minus {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: .2em !important;
	border-bottom-right-radius: .2em !important;
	margin-top: -.05em !important;
}


/*** COPY ***/
*[data-copy]:not([data-copy=""])::after {
	content: attr(data-copy);
	position: absolute;
	bottom: .5em;
	left: .5em;
	font-size: .5em;
	color: #000;
	text-align: left;
	font-family: sans-serif;
	pointer-events: none;
}


/*** TEHTÄVÄNANTO ***/
.tehtavananto {
	font-weight: 600;
	line-height: 1.5;
}


/*** HARJOITUSPOHJA ***/
#harjoituspohja {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}
html.fixed #harjoituspohja {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: unset;
}
html.harjoituspohja-no-scroll #harjoituspohja-sisalto {
	overflow: hidden;
}

#harjoituspohja-ohje {
	position: absolute;
	left: .5em;
	bottom: 2.5em;
	max-width: calc(100% - 1em);
	z-index: 10002;
}
html:not(.harjoituspohja-ohje-esilla) #harjoituspohja-ohje {
	display: none;
}
#harjoituspohja-ohje .modaali-wrapper {
	max-height: calc(100vh - 3em);
}
html.mobile.portrait #harjoituspohja-ohje {
	width: 100%;
}

#harjoituspohja-ylapalkki,
#harjoituspohja-alapalkki {
	flex: 0 0 auto;
	pointer-events: none;
}
#harjoituspohja-ylapalkki {
	min-height: calc(var(--painike-mitat) + 1em);
}
#harjoituspohja-alapalkki {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-height: calc(var(--painike-mitat) + 1em);
	padding: .5em;
	gap: .5em;
	z-index: 1;
}
#harjoituspohja-alapalkki #painikkeet #uudestaanB {
	order: -100;
}
#harjoituspohja-alapalkki #lisapainikkeet #uudestaanB {
	order: 100;
}

html[data-tasaus="keskelle"]:not(.mobile):not(.scrollY):not(.harjoituspohja-paivitetaan) #harjoituspohja-ylapalkki {
	height: calc(var(--painike-mitat) + 1em);
}
html:not(.mobile).harjoituspohja-ylapalkki-fixed #harjoituspohja-ylapalkki {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
html:not(.mobile).harjoituspohja-alapalkki-fixed #harjoituspohja-alapalkki {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

html.harjoituspohja-reunat-fixed #diat::before,
html.harjoituspohja-reunat-fixed #diat::after {
	display: none;
}


html.mobile #harjoituspohja-ylapalkki #eteneminen {
	position: fixed;
	z-index: 1;
}
#harjoituspohja-otsikko {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
#harjoituspohja-tehtavananto {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.25em  4.5em 1.75em;
	min-height: 5.25em;
}
#harjoituspohja-tehtavananto:empty{
	display: none;
}

#harjoituspohja-sisaltoalue {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	z-index: 0;
}
#harjoituspohja-sisalto {
	flex: 1 1 0;
}
html.siirtely-siirretaan:not(.scrollX):not(.scrollY) #harjoituspohja-sisalto,
html.siirtely-palautetaan:not(.scrollX):not(.scrollY) #harjoituspohja-sisalto {
	overflow: unset !important;
}

html[data-tasaus="keskelle"]:not(.scrollY):not(.harjoituspohja-paivitetaan) #harjoituspohja-sisaltoalue {
	justify-content: center;
}
html[data-tasaus="keskelle"]:not(.scrollY):not(.harjoituspohja-paivitetaan) #harjoituspohja-sisalto {
	flex: unset;
}

#eteneminen {
	position: absolute;
	top: .5em;
	left: 0;
	right: 0;
	z-index: 1;
}

#harjoituspohja-selaus {
	position: sticky;
	top: 50%;
	width: 100%;
	height: 0;
	pointer-events: none;
	z-index: 1;
}
#harjoituspohja-selaus > #edellinenB.nuoliB,
#harjoituspohja-selaus > #seuraavaB.nuoliB {
	position: absolute;
	pointer-events: all;
}

html.mobile #harjoituspohja-sisaltoalue,
html.mobile #harjoituspohja-tehtavananto {
	font-size: 15px;
}
html.mobile #harjoituspohja-sisaltoalue .soitin,
html.mobile #harjoituspohja-sisaltoalue .painike,
html.mobile #harjoituspohja-sisaltoalue .nappi {
	font-size: 20px;
}

html.mobile #harjoituspohja-ylapalkki {
	min-height: 20px;
}

html.mobile #harjoituspohja-alapalkki {
	font-size: 20px;
	padding: .75em;
    min-height: calc(var(--painike-mitat) + 1.5em);
}
html.mobile.portrait #harjoituspohja-alapalkki {
	flex-direction: column;
	align-items: center;
}
html.mobile.portrait #harjoituspohja-alapalkki > *.tyhja {
	display: none;
}

html.mobile #harjoituspohja-tehtavananto {
	align-items: flex-start;
	padding: 1em 1em 2.5em;
	min-height: 70px;
}
html.mobile.portrait #harjoituspohja-tehtavananto {
	justify-content: flex-start;
}
html.mobile.portrait #harjoituspohja-alapalkki #lisapainikkeet {
	order: 1;
}


/*** DIAT ***/
#diat {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
}
#diat::before {
	content: '';
	flex: 0 0 4.5em;
	height: 100%;
}
#diat::after {
	content: '';
	flex: 0 0 4.5em;
	height: 100%;
}
html.harjoituspohja-paivitetaan #diat,
html.scrollX #diat {
	justify-content: flex-start;
}
html.harjoituspohja-paivitetaan #diat,
html.scrollY #diat {
	align-items: flex-start;
}
html.mobile #diat::before,
html.mobile #diat::after {
	flex: 0 0 50px;
}
.dia {
	font-size: 1.25em;
	gap: var(--gap-L);
}
html.mobile .dia {
	font-size: 1em;
}
.dia-piilossa {
	display: none !important;
}
html.alustetaan-diat .dia,
.dia.disabled,
.dia.disabled * {
	pointer-events: none !important;
}
html.alustetaan-diat .dia {
	position: absolute;
	top: 0;
	left: 0;
}


/***/
html.aloitus-esilla #eteneminen,
html.aloitus-esilla #edellinenB,
html.aloitus-esilla #seuraavaB,
html.aloitus-esilla #nappaimistoB,
html.aloitus-esilla #painikkeet > *:not(#aloitaB):not(.esilla-aloitus),
html.aloitus-esilla #lisapainikkeet > *:not(#aloitaB):not(.esilla-aloitus),
html:not(.aloitus-esilla) #aloitaB.esilla-aloitus {
	display: none;
}
html.aloitus-esilla #harjoituspohja-sisalto > *:not(.esilla-aloitus) {
	visibility: hidden;
}


/*** MODAALI ***/
html.modaali-siirretaan #container {
	cursor: grabbing;
}
html.modaali-siirretaan #container * {
	pointer-events: none;
}
.modaali{
	position: absolute;
	pointer-events: all;
	color: var(--text-black);
}
.modaali.modaali-siirrettava {
	z-index: 100;
}
.modaali-wrapper{
	align-items: stretch;
	border-radius: .5em;
	color: var(--primary-900);
	background-color: var(--primary-200);
	box-shadow: var(--varjo);
	overflow: hidden;
}
.modaali.modaali-siirretaan .modaali-wrapper {
	box-shadow: var(--varjo-siirrossa);
}
.modaali-sisalto-wrapper {
	order: 2;
	color: var(--text-black);
	background-color: var(--neutral-000);
}
.modaali[data-scroll="true"] .modaali-wrapper{
	height: 100%;
}
.modaali[data-scroll="true"] .modaali-sisalto-wrapper{
	overflow-y: auto;
	overflow-x: hidden;
}

.modaali-header,
.modaali-footer{
	flex: 0 0 auto;
	height: 2.25em;
	gap: .2em;
}
.modaali-header:empty,
.modaali-footer:empty{
	height: .4em;
}
.modaali-header {
	order: 1;
	justify-content: flex-end;
}
.modaali-header .modaali-otsikko {
	flex: 1 1 100%;
	padding-left: .6em;
	font-size: .9em;
}
.modaali-footer {
	order: 3;
}
/* .modaali-footer .siirto {
	pointer-events: none;
} */

/* .modaali-siirto {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: grab;
} */

.modaali-skaalaa {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: grab;
}

.modaali-nappi {
	flex: 0 0 auto;
	width: 2.25em !important;
	height: 2.25em !important;
	border-radius: 0 !important;
	border: none !important;
	cursor: pointer;
}
.modaali-nappi > svg {
	width: 66% !important;
	height: 66% !important;
	stroke-width: 1.75px !important;
}

.modaali-nappi.siirto {
	cursor: grab;
}
.modaali-nappi.siirto > svg {
	width: 50% !important;
	height: 50% !important;
	stroke-width: 2px !important;
}

.modaali-nappi.skaalaus {
	position: absolute;
	bottom: 0;
	cursor: grab;
}
.modaali-nappi.skaalaus-vasen {
	left: 0;
}
.modaali-nappi.skaalaus-oikea {
	right: 0;
}
.modaali-nappi.skaalaus > svg {
	width: 35% !important;
	height: 35% !important;
	stroke-width: 2px !important;
}

.modaali-nappi:not(.sulje) {
	color: inherit !important;
	background: var(--primary-200) !important;
}
html.no-touch .modaali-nappi:not(.sulje):not(.selected):hover {
	color: inherit !important;
	background: var(--primary-300) !important;
}
.modaali-nappi:not(.sulje).selected {
	color: inherit !important;
	background: var(--primary-400) !important;
}


/*** AJASTIN/AJANOTTO ***/
.ajanotto {
	display: flex;
	align-items: center;
	gap: .4em;
	min-height: var(--painike-mitat);
}
.ajanotto-ikoni {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: -.2em;
}
.ajanotto-ikoni > svg {
	width: 1.2em;
	height: 1.2em;
	transform: translateY(-.05em);
}


/*** MURTOLUKU ***/
ml {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
ml:has(mll),
ml.laventaja {
	margin-left: .5em;
}
ml:has(mls),
ml.supistaja {
	margin-right: .5em;
}
ml > *:first-child:after {
	content: '';
	display: block;
	width: 100%;
	border-bottom: 2px solid;
	margin: 4px 0;
}
ml > * {
	display: block;
	line-height: 1;
}
mll {
	position: absolute;
	top: 0;
	right: 100%;
	/* transform: translateY(-50%); */
	transform: translateY(-15%);
}
mls {
	position: absolute;
	top: 0;
	left: 100%;
	/* transform: translateY(-50%); */
	transform: translateY(-15%);
}
mll > *,
mls > *,
.mll-wrapper,
.mls-wrapper {
	display: flex;
	align-items: center;
	font-size: smaller;
}
mll > *::after,
.mll-wrapper::after {
	content: ')';
}
mls > *::before,
.mls-wrapper::before {
	content: '(';
}

/* sulkeet */
mlsul {
	display: inline-block;
	transform: scaleY(2.25);
}
/* mlsulpot, sup */
mlsulpot,
mlsup {
	display: inline-block;
	transform: translateY(-.64em);
	vertical-align: super;
	font-size: smaller;
}
@media print {
	ml > *:first-child:after {
		border-bottom: 1px solid;
		margin: 2px 0;
	}
}


/*** neliöjuuri ***/
nj {
	display: inline-block;
	vertical-align: bottom;
	white-space: pre;
	padding-left: .9em;
}
nj:has(ml) {
	vertical-align: middle;
}
nj::before {
	content: '';
	position: absolute;
	left: 0;
	width: .95em;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none' x='0px' y='0px' width='85px' height='100px' viewBox='0 0 85 100'%3E%3Cdefs%3E%3Cg id='Layer0_0_FILL'%3E%3Cpath fill='%23000000' stroke='none' d='%0AM 17.45 42.9%0AL 15.25 42.9 0 53.25 1.1 54.85%0AQ 4.9 52.15 7.6 52.15 11.45 52.15 13.65 57.05%0AL 33.8 100 37.05 100 85 0 79.55 0 38.15 86.4 37.6 86.4 17.45 42.9 Z'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='matrix( 1, 0, 0, 1, 0,0) '%3E%3Cuse xlink:href='%23Layer0_0_FILL'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 95%;
}
nj::after {
	content: '';
	position: absolute;
	left: .9em;
	right: 0;
	top: 0;
	border-top: .075em solid;
}
@media print {
	nj {
		display: inline;
		padding-left: 0;
		vertical-align: inherit;
	}
	nj::before {
		content: '√';
		position: relative;
		left: unset;
		width: unset;
		height: unset;
		background: none;
	}
	nj::after {
		display: none;
	}
}


/*** puhekupla ***/
.puhekupla {
	position: relative;
	display: inline-block;
	padding: 1em;
	border-radius: .5em;
	background-color: #E2E2E2;
	text-align: center;
}
.puhekupla.valkoinen {
	background-color: #fff;
}
.puhekupla::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.5em .5em 0 .5em;
	border-color: #E2E2E2 transparent transparent;
	left: 2em;
	bottom: -1.25em;
	transform: rotate(10deg);
}
.puhekupla.valkoinen::after {
	border-color: #fff transparent transparent;
}
.puhekupla.oikea::after {
	left: auto;
	right: 2em;
	transform: rotate(-10deg);
}
.puhekupla.keskella::after {
	left: calc(50% - .5em);
}
.puhekupla.sivu::after {
	left: -1em;
	bottom: .1em;
	transform: rotate(72deg);
}
.puhekupla.sivu.oikea::after {
	left: auto;
	right: -1em;
	bottom: .1em;
	transform: rotate(-72deg);
}
.puhekupla.sivu.keskella::after {
	bottom: calc(50% - 1em);
}
.puhekupla[data-aani],
.puhekupla[data-kaiutin],
.puhekupla[data-aikakohta] {
	background-image: url(images/nappi/kuuntele_musta.png);
	background-size: 1em;
	background-position: left .1em top .1em;
	background-repeat: no-repeat;
}


/*** div-zoom ***/
/* .div-zoom {
	
} */
.div-zoom-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.div-zoom-content {
	position: absolute;
	width: 100%;
	height: 100%;
}
.div-zoom:not([data-zoom="1"]):not(.dragging) .div-zoom-content {
	cursor: move;
	cursor: grab;
}
.div-zoom:not([data-zoom="1"]).dragging .div-zoom-content::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
}
.div-zoom.dragging .div-zoom-content {
	cursor: move;
	cursor: grabbing;
}
.div-zoom-buttons {
	position: absolute;
	left: .5em;
	bottom: .5em;
	display: flex;
	flex-direction: column;
}
/***/
/* .div-zoom ::-webkit-scrollbar {
	width: 2px;
	height: 2px;
	border-radius: 1px;
}
.div-zoom ::-webkit-scrollbar-track {
	background: #FFF
}
.div-zoom ::-webkit-scrollbar-thumb {
	background: #9b9b9b;
}
.div-zoom ::-webkit-scrollbar-thumb:hover {
	background: #9b9b9b;
} */



/*** NÄPPÄIMISTÖ ***/
#nappaimistoB {
	bottom: 3.25em;
}
html.nappaimisto-esilla #nappaimistoB {
	display: none;
}

#nappaimisto.modaali {
	position: absolute;
	bottom: 1em;
	left: 1em;
	font-size: 20px;
	max-width: calc(100% - 2em);
}
html.mobile #nappaimisto.modaali {
	font-size: 15px;
}
#nappaimisto-wrapper {
	gap: .2em;
	align-items: stretch;
}
.nappaimisto-rivi {
	flex: 0 0 auto;
	justify-content: flex-start;
	gap: .2em;
}
.nappaimisto-nappi {
	flex: 0 1 auto;
	width: 2.4em;
	height: 2.4em;
	line-height: 125%;
	border-radius: .2em;
	border: 1px solid var(--stroke-neutral-light);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	cursor: pointer;
}
.nappaimisto-nappi svg.lucide {
	width: 50%;
	height: 50%;
	stroke-width: 1.5px;
}

.nappaimisto-nappi[data-vari="valkoinen"] {
	background-color: #FFF;
}
html.no-touch .nappaimisto-nappi[data-vari="valkoinen"]:hover {
	background-color: var(--background-neutral-lighter);
}
.nappaimisto-nappi[data-vari="valkoinen"].selected,
.nappaimisto-nappi[data-vari="valkoinen"].valittu,
#nappaimisto.nappaimisto-isot .nappaimisto-nappi[data-key="SHIFT"] {
	border-color: var(--stroke-neutral-darkest);
	background-color: var(--background-neutral-light);
}

.nappaimisto-nappi[data-key="SHIFT"] svg.lucide {
	width: 1.5em;
	height: 1.5em;
	stroke-width: 1px;
}
.nappaimisto-nappi[data-key="␣"] > div {
	margin-top: -.4em;
	font-size: 1.8em;
	font-weight: light;
}

#nappaimisto.nappaimisto-isot {
	text-transform: uppercase;
}


/***/
.container-toimintonappi-oikea {
	position: absolute;
	bottom: 5.25em;
	right: .5em;
	z-index: 99;
}
.container-toimintonappi-vasen {
	position: absolute;
	bottom: 5em;
	left: .5em;
	z-index: 99;
}
html.scrollY .container-toimintonappi-oikea {
	margin-right: 18px;
}
html.mobile .container-toimintonappi-oikea {
	right: .75em;
}
html.mobile .container-toimintonappi-vasen {
	left: .75em;
}


/*** virhe ***/
virhe {
	display: block;
	color: red;
	font-weight: bold;
	border: 2px solid;
	padding: .25em;
	margin: .5em auto;
}


/*** palaute ***/
html.no-mobile.palaute_oikein #palaute,
html.no-mobile.palaute_vaarin #palaute {
	position: absolute;
	top: 0;
	right: 2em;
	width: 4em;
	height: 6.25em;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transform: translateY(-100%);
	animation: palauteLiike 3s ease-in-out;
}
html.no-mobile.palaute_oikein #palaute {
	background-image: url(../src/kuvat/palaute/palaute_oikein.png);
}
html.no-mobile.palaute_vaarin #palaute {
	background-image: url(../src/kuvat/palaute/palaute_vaarin.png);
}
html.mobile.palaute_oikein #palaute,
html.mobile.palaute_vaarin #palaute {
	position: relative;
	top: unset;
	right: unset;
	width: 8em;
	height: 8em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
	animation: palauteFade 3s;
}
html.mobile.palaute_oikein #palaute {
	background-image: url(../src/kuvat/palaute/symboli_oikein.png);
}
html.mobile.palaute_vaarin #palaute {
	background-image: url(../src/kuvat/palaute/symboli_vaarin.png);
}
@keyframes palauteLiike {
	0% {transform: translateY(-100%);}
	20% {transform: translateY(0%);}
	80% {transform: translateY(0%);}
	100% {transform: translateY(-100%);}
}
@keyframes palauteFade {
	0% {opacity: 0;}
	10% {opacity: 1;}
	80% {opacity: 1;}
	100% {opacity: 0;}
}


/*** ELEMENTIT ****************************************************************/

/*** RANGE ***/
input[type="range"].range {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
}
input[type="range"].range.range-y {
	width: auto;
	height: 100%;
	writing-mode: vertical-rl;
}
input[type="range"]:disabled,
input[type="range"].disabled {
	pointer-events: none;
}
input[type="range"].range:focus {
	outline: none;
}
input[type="range"].range::-webkit-slider-runnable-track {
	width: 100%;
	height: var(--range-mitat);
	outline: 1px solid var(--text-black);
	border-radius: var(--range-border-radius);
	background: var(--neutral-000);
	cursor: pointer;
}
input[type="range"].range:hover::-webkit-slider-runnable-track,
input[type="range"].range:focus::-webkit-slider-runnable-track,
input[type="range"].range:active::-webkit-slider-runnable-track {
	outline-color: var(--background-primary-dark);
	background: var(--background-primary-light);
}
input[type="range"].range.disabled::-webkit-slider-runnable-track,
input[type="range"][disabled].range::-webkit-slider-runnable-track {
	outline-color: var(--disabled-other);
	background: var(--background-neutral-light);
}
input[type="range"].range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--range-mitat);
	height: var(--range-mitat);
	transform: scale(1.3);
	border: none;
	border-radius: var(--range-border-radius);
	background:  var(--background-primary-dark);
	cursor: pointer;
}
input[type="range"].range.disabled::-webkit-slider-thumb,
input[type="range"][disabled].range::-webkit-slider-thumb {
	outline: 1px solid var(--disabled-other);
	background: var(--disabled-background);
}
input[type="range"].range-y::-webkit-slider-runnable-track {
	width: var(--range-mitat);
	height: 100%;
}

input[type="range"].range::-moz-range-track {
	width: 100%;
	height: var(--range-mitat);
	outline: 1px solid var(--text-black);
	border-radius: var(--range-border-radius);
	background: var(--neutral-000);
	cursor: pointer;
}
input[type="range"].range:hover::-moz-range-track,
input[type="range"].range:focus::-moz-range-track,
input[type="range"].range:active::-moz-range-track {
	outline-color: var(--background-primary-dark);
	background: var(--background-primary-light);
}
input[type="range"].range.disabled::-moz-range-track,
input[type="range"][disabled].range::-moz-range-track {
	outline-color: var(--disabled-other);
	background: var(--background-neutral-light);
}
input[type="range"].range::-moz-range-thumb {
	width: var(--range-mitat);
	height: var(--range-mitat);
	transform: scale(1.3);
	border: none;
	border-radius: var(--range-border-radius);
	background:  var(--background-primary-dark);
	cursor: pointer;
}
input[type="range"].range.disabled::-moz-range-thumb,
input[type="range"][disabled].range::-moz-range-thumb {
	outline: 1px solid var(--disabled-other);
	background: var(--disabled-background);
}
input[type="range"].range::-moz-focus-inner,
input[type="range"].range::-moz-focus-outer {
	border: none;
}
input[type="range"].range-y::-moz-range-track {
	width: var(--range-mitat);
	height: 100%;
}


/*** DATA-ELEMENTTI ********************************************************************************************************/
.aukko-parent,
[data-elementti] {
	padding: var(--elementti-padding);
	min-width: var(--elementti-mitat);
	min-height: var(--elementti-mitat);
	border-radius: var(--elementti-pyoristys);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	/***/
	color: var(--elementti-vari);
	outline: var(--elementti-kehys);
	background-color: var(--elementti-taustavari);
}
[data-elementti].ruutu {
	border-radius: 0;
}
[data-elementti].no-hover {
	cursor: default;
}
.aukko-parent.transparent,
[data-elementti].transparent {
	outline: none !important;
	background-color: transparent !important;
}
.aukko-parent.disabled,
[data-elementti].disabled,
[data-elementti][disabled] {
	pointer-events: none;
}
.aukko-parent.valittu,
.aukko-parent.selected,
[data-elementti].valittu,
[data-elementti].selected {
	color: var(--elementti-vari-selected);
	outline-style: var(--elementti-kehys-selected-style);
	outline-color: var(--elementti-kehys-selected-color);
	background-color: var(--elementti-taustavari-selected);
}
.aukko-parent.disabled:not(.oikein):not(.vaarin),
[data-elementti].disabled:not(.oikein):not(.vaarin),
[data-elementti][disabled]:not(.oikein):not(.vaarin) {
	color: var(--elementti-vari-disabled);
	outline: var(--elementti-kehys-disabled);
	background-color: var(--elementti-taustavari-disabled);
}
.aukko-parent.korostettu:not(.oikein):not(.vaarin),
html.no-touch .aukko-parent:not(.no-hover):not(.oikein):not(.vaarin):hover,
[data-elementti].korostettu:not(.oikein):not(.vaarin),
html.no-touch [data-elementti]:not(.no-hover):not(.oikein):not(.vaarin):hover {
	color: var(--elementti-vari-hover);
	outline-style: var(--elementti-kehys-hover-style);
	outline-color: var(--elementti-kehys-hover-color);
	background-color: var(--elementti-taustavari-hover);
}
html.no-touch .aukko-parent.valittu:not(.no-hover):not(.oikein):not(.vaarin):hover,
html.no-touch .aukko-parent.selected:not(.no-hover):not(.oikein):not(.vaarin):hover,
html.no-touch [data-elementti].valittu:not(.no-hover):not(.oikein):not(.vaarin):hover,
html.no-touch [data-elementti].selected:not(.no-hover):not(.oikein):not(.vaarin):hover {
	color: var(--elementti-vari-selected-hover);
	outline-style: var(--elementti-kehys-selected-hover-style);
	outline-color: var(--elementti-kehys-selected-hover-color);
	background-color: var(--elementti-taustavari-selected-hover);
}

[data-elementti="vaalea"] {
	color: var(--elementti-vaalea-vari);
	outline: var(--elementti-vaalea-kehys);
	background-color: var(--elementti-vaalea-taustavari);
}
[data-elementti="vaalea"].valittu,
[data-elementti="vaalea"].selected {
	color: var(--elementti-vaalea-vari-selected);
	outline-style: var(--elementti-vaalea-kehys-selected-style);
	outline-color: var(--elementti-vaalea-kehys-selected-color);
	background-color: var(--elementti-vaalea-taustavari-selected);
}
[data-elementti="vaalea"].disabled:not(.oikein):not(.vaarin) {
	color: var(--elementti-vaalea-vari-disabled);
	outline: var(--elementti-vaalea-kehys-disabled);
	background-color: var(--elementti-vaalea-taustavari-disabled);
}
[data-elementti="vaalea"].korostettu:not(.oikein):not(.vaarin),
html.no-touch [data-elementti="vaalea"]:not(.no-hover):not(.oikein):not(.vaarin):hover {
	color: var(--elementti-vaalea-vari-hover);
	outline-style: var(--elementti-vaalea-kehys-hover-style);
	outline-color: var(--elementti-vaalea-kehys-hover-color);
	background-color: var(--elementti-vaalea-taustavari-hover);
}
html.no-touch [data-elementti="vaalea"].valittu:not(.no-hover):not(.oikein):not(.vaarin):hover,
html.no-touch [data-elementti="vaalea"].selected:not(.no-hover):not(.oikein):not(.vaarin):hover {
	color: var(--elementti-vaalea-vari-selected-hover);
	outline-style: var(--elementti-vaalea-kehys-selected-hover-style);
	outline-color: var(--elementti-vaalea-kehys-selected-hover-color);
	background-color: var(--elementti-vaalea-taustavari-selected-hover);
}

.aukko-parent,
[data-elementti="input"] {
	color: var(--elementti-input-vari);
	outline: var(--elementti-input-kehys);
	background-color: var(--elementti-input-taustavari);
}
[data-elementti="input"][contenteditable="true"],
input[type="text"][data-elementti="input"],
input[type="number"][data-elementti="input"] {
	cursor: text;
}
[data-elementti="input"].aukkoruutu,
[data-elementti="input"].aukkoviiva {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: .2em;
	padding-right: .2em;
	min-height: var(--elementti-mitat-aukkoruutu);
	line-height: var(--elementti-mitat-aukkoruutu);
	border-radius: 0;
}
[data-elementti="input"].aukkoruutu {
	text-align: center;
}
[data-elementti="input"].aukkoruutu,
[data-elementti="input"].aukkoviiva[data-pituus="1"] {
	min-width: var(--elementti-mitat-aukkoruutu);
}
[data-elementti="input"].aukkoruutu[data-pituus="2"],
[data-elementti="input"].aukkoviiva[data-pituus="2"] {
	min-width: 1.8em;
}
[data-elementti="input"].aukkoruutu[data-pituus="3"],
[data-elementti="input"].aukkoviiva[data-pituus="3"] {
	min-width: 2.4em;
}
[data-elementti="input"].aukkoruutu[data-pituus="4"],
[data-elementti="input"].aukkoviiva[data-pituus="4"] {
	min-width: 3em;
}
[data-elementti="input"].aukkoruutu[data-pituus="5"],
[data-elementti="input"].aukkoviiva[data-pituus="5"] {
	min-width: 3.6em;
}
[data-elementti="input"].aukkoruutu[data-pituus="6"],
[data-elementti="input"].aukkoviiva[data-pituus="6"] {
	min-width: 4.2em;
}
.aukko-parent.valittu,
.aukko-parent.selected,
[data-elementti="input"]:focus,
[data-elementti="input"].valittu,
[data-elementti="input"].selected {
	color: var(--elementti-input-vari-focus);
	outline-style: var(--elementti-input-kehys-focus-style);
	outline-color: var(--elementti-input-kehys-focus-color);
	background-color: var(--elementti-input-taustavari-focus);
}
[data-elementti="vaalea"].disabled:not(.oikein):not(.vaarin) {
	color: var(--elementti-input-vari-disabled);
	outline: var(--elementti-input-kehys-disabled);
	background-color: var(--elementti-input-taustavari-disabled);
}
html.no-touch .aukko-parent:not(.no-hover):not(.oikein):not(.vaarin):hover,
[data-elementti="input"].korostettu:not(.oikein):not(.vaarin),
html.no-touch [data-elementti="input"]:not(.no-hover):not(.oikein):not(.vaarin):hover {
	color: var(--elementti-input-vari-hover);
	outline-style: var(--elementti-input-kehys-hover-style);
	outline-color: var(--elementti-input-kehys-hover-color);
	background-color: var(--elementti-input-taustavari-hover);
}
html.no-touch [data-elementti="input"]:focus:not(.no-hover):not(.oikein):not(.vaarin):hover,
html.no-touch [data-elementti="input"].valittu:not(.no-hover):not(.oikein):not(.vaarin):hover,
html.no-touch [data-elementti="input"].selected:not(.no-hover):not(.oikein):not(.vaarin):hover {
	color: var(--elementti-input-vari-focus-hover);
	outline-style: var(--elementti-input-kehys-focus-hover-style);
	outline-color: var(--elementti-input-kehys-focus-hover-color);
	background-color: var(--elementti-input-taustavari-focus-hover);
}


[data-elementti="input"].aukkoviiva {
	outline: unset !important;
}
[data-elementti="input"].aukkoviiva::after {
	content: '';
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 100% !important;
	width: unset !important;
	height: unset !important;
	transform: none !important;
	background-image: unset !important;
	border-bottom: var(--elementti-input-kehys);
}
[data-elementti="input"].aukkoviiva:focus::after,
[data-elementti="input"].aukkoviiva.valittu::after,
[data-elementti="input"].aukkoviiva.selected::after {
	border-bottom-style: var(--elementti-input-kehys-focus-style);
	border-bottom-color: var(--elementti-input-kehys-focus-color);
}
[data-elementti="input"].aukkoviiva.oikein::after {
	border-bottom: var(--elementti-kehys-palaute);
	border-bottom-color: var(--oikein-kehys);
}
[data-elementti="input"].aukkoviiva.vaarin::after {
	border-bottom: var(--elementti-kehys-palaute);
	border-bottom-color: var(--vaarin-kehys);
}
html:not(.firefox) [data-elementti="input"].aukkoviiva[contenteditable="true"] > br {
	display: none;
}


/* SIIRRETTÄVÄT + OSUMAT */
[data-elementti].siirrettava {
	box-shadow: var(--elementti-siirrettava-varjo);
}
html.no-touch [data-elementti].siirrettava:not(.no-hover):hover {
	box-shadow: var(--elementti-siirrettava-varjo-hover);
}
html.no-touch [data-elementti].siirrettava:not(.no-hover):not(.oikein):not(.vaarin):hover {
	outline: var(--elementti-kehys);
	background-color: var(--elementti-taustavari);
}
[data-elementti].siirrettava.siirrossa {
	box-shadow: var(--elementti-siirrettava-varjo-siirrossa);
	background-color: var(--elementti-taustavari);
}
html.no-touch [data-elementti="vaalea"].siirrettava:not(.no-hover):not(.oikein):not(.vaarin):hover {
	outline: var(--elementti-kehys-vaalea);
	background-color: var(--elementti-vaalea-taustavari);
}
[data-elementti="vaalea"].siirrettava.siirrossa {
	background-color: var(--elementti-vaalea-taustavari);
}

[data-elementti].osuma:not(.osuma-valinta):not(.aukko) {
	pointer-events: none;
}
html.siirtely-siirretaan [data-elementti="input"].osuma:not(.disabled):not(.oikein):not(.vaarin) {
	outline-style: dashed;
}
html.siirtely-siirretaan [data-elementti].osuma:not(.disabled):not(.oikein):not(.vaarin):not(.aukko)::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1em;
	height: 1em;
	color: var(--stroke-neutral-darkest);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236D6D6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-plus'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}


.aukko-parent.oikein,
[data-elementti].oikein {
	color: var(--oikein-vari);
	outline: var(--elementti-kehys-palaute);
	outline-color: var(--oikein-kehys);
	background-color: var(--oikein-taustavari);
}
.aukko-parent.vaarin,
[data-elementti].vaarin {
	color: var(--vaarin-vari);
	outline: var(--elementti-kehys-palaute);
	outline-color: var(--vaarin-kehys);
	background-color: var(--vaarin-taustavari);
}
/* .aukko-parent.oikein::before,
.aukko-parent.vaarin::before,
[data-elementti].oikein::before,
[data-elementti].vaarin::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: .25em;
	top: .25em;
	width: .75em;
	height: .75em;
	background-image: var(--success-img);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}
.aukko-parent.vaarin::before,
[data-elementti].vaarin::before {
	background-image: var(--error-img);
}

.aukko-parent.oikein::before,
.aukko-parent.vaarin::before {
	top: calc(100% - .25em);
} */


/* AUKOT */
.aukko-parent {
	padding: 0;
	cursor: default;
	min-width: unset !important;
	min-height: unset !important;
}
.aukko-parent .aukko {
	outline: none !important;
	background-color: transparent !important;
}
.aukko-parent .aukko.oikein::before,
.aukko-parent .aukko.vaarin::before {
	display: none !important;
}
.aukko-parent:has(.ruutu) {
	border-radius: 0;
}
.aukko-parent:has(.aukkoruutu) {
	border-radius: 0;
}
.aukko-parent:has(.aukkoviiva) {
	border-radius: 0;
	outline: none !important;
}




/*** FONTIT ***************************************************/
/*
* This CSS file includes copyrighted font software data (fonts) which is authorized
* for the following URLs only:
*
* https://www.edukustannus.fi/
*
* These fonts are protected by copyright and licensing terms, and may not be
* used without permission on other web sites, servers or computers. For full
* terms, please see http://www.typolar.com/licenses
*
* (c) 2023 Typolar Ltd
*/
@font-face {
	font-family: 'Alku';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku-laiha_v68-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku-laiha_v68-webfont.woff') format('woff');
	font-weight: 300;
	ascent-override: 100%;
}
@font-face {
	font-family: 'Alku';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku-normaali_v07-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku-normaali_v07-webfont.woff') format('woff');
	font-weight: normal;
	ascent-override: 100%;
}
@font-face {
	font-family: 'Alku';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku-bold_v60-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku-bold_v60-webfont.woff') format('woff');
	font-weight: bold;
	ascent-override: 100%;
}
@font-face {
	font-family: 'AlkuApulinjat';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku_apulinjat-laiha_v60-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku_apulinjat-laiha_v60-webfont.woff') format('woff');
	font-weight: 300;
	ascent-override: 100%;
}
@font-face {
	font-family: 'AlkuApulinjat';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku_apulinjat-normaali_v07-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku_apulinjat-normaali_v07-webfont.woff') format('woff');
	font-weight: normal;
	ascent-override: 100%;
}
@font-face {
	font-family: 'AlkuApulinjat';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku_apulinjat-bold_v60-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku_apulinjat-bold_v60-webfont.woff') format('woff');
	font-weight: bold;
	ascent-override: 100%;
}
@font-face {
	font-family: 'AlkuPiirtosuunnat';
	src: url('https://digikirjat.edukustannus.fi/fonts/alku_piirtosuunnat-laiha_v60-webfont.woff2') format('woff2'),
		 url('https://digikirjat.edukustannus.fi/fonts/alku_piirtosuunnat-laiha_v60-webfont.woff') format('woff');
	font-weight: 300;
	ascent-override: 100%;
}

svg [font-family^="Alku_Laiha"] {
	font-family: 'Alku';
	font-weight: 300 !important;
}
svg [font-family^="Alku_Normaali"] {
	font-family: 'Alku';
}
svg [font-family^="Alku_Lihava"] {
	font-family: 'Alku';
	font-weight: bold !important;
}
svg [name="Alku_Lihava"] tspan {
	font-weight: bold !important;
}