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

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

:root {
	/*** SANOMA ***/

	--neutral-000: #FFFFFF;
	--neutral-050: #F2F2F2;
	--neutral-100: #E5E5E5;
	--neutral-200: #C8C8C8;
	--neutral-400: #B3B3B3;
	--neutral-500: #949494;
	--neutral-600: #6D6D6D;
	--neutral-700: #6D6D6D;
	--neutral-900: #333333;

	--green-800: #006000;
	--green-600: #008A24;
	--green-500: #1DA23B;
	--green-100: #B4DFBC;
	--green-050: #EBF5EC;

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

	--blue-800: #006074;
	--blue-600: #008197;
	--blue-500: #2499AF;
	--blue-100: #B1E5F0;
	--blue-050: #EBF3F5;

	--purple-900: #40235F;
	--purple-700: #643695;
	--purple-500: #8E6CB1;
	--purple-100: #D8C8EA;
	--purple-050: #F0ECF5;

	--yellow-100: #FFE186;
	--pink-100: #FFBFC2;
	--mint-100: #C0E3D3;
	--pink-700: #E00083;

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

	--strokes-neutral-light: var(--neutral-100);
	--strokes-neutral-dark: var(--neutral-400);
	--strokes-neutral-darkest: var(--neutral-600);

	--backgrounds-light-bg-neutral: var(--neutral-050);
	--backgrounds-light-bg-neutral-dark: var(--neutral-100);
	--backgrounds-dark-bg-neutral: var(--neutral-700);
	--backgrounds-dark-bg-neutral-darker: var(--neutral-900);

	--primary-bg-lighter: var(--green-050);
	--primary-bg-light: var(--green-100);
	--primary-bg: var(--green-500);
	--primary-bg-dark: var(--green-600);
	--primary-bg-darker: var(--green-800);

	--light-bg-neutral: var(--neutral-050);
	--light-bg-neutral-dark: var(--neutral-050);

	--light-text-success: #006000;
	--light-border-success: #006000;
	--light-bg-success: #EBF5EC;
	--light-img-success: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23006000'/%3E%3Cpath d='M21.3334 12L14.0001 19.3333L10.6667 16' stroke='%23EBF5EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	--light-img-success: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath style='fill: %23006000; stroke-width: 0px;' d='m11,0h0c6.08,0,11,4.92,11,11h0c0,6.08-4.92,11-11,11h0C4.92,22,0,17.08,0,11h0C0,4.92,4.92,0,11,0Z'/%3E%3Cpath style='fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5px;' d='m15.95,7.49l-7.33,7.33-3.33-3.33'/%3E%3C/svg%3E");
	
	--light-text-error: #B20000;
	--light-border-error: #B20000;
	--light-bg-error: #FFF0F0;
	--light-img-error: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23B20000'/%3E%3Cpath d='M20 12L12 20M12 12L20 20' stroke='%23FFF0F0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	--light-img-error: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath style='fill: %23b20000; stroke-width: 0px;' d='m11,0h0c6.08,0,11,4.92,11,11h0c0,6.08-4.92,11-11,11h0C4.92,22,0,17.08,0,11h0C0,4.92,4.92,0,11,0Z'/%3E%3Cpath style='fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5px;' d='m15,7L7,15m0-8l8,8'/%3E%3C/svg%3E");
	

	/*** TUOTE ***/

	--method-000: #FFFFFF;
	--method-050: #F2F2F2;
	--method-100: #E5E5E5;
	--method-500: #949494;
	--method-600: #6D6D6D;
	--method-800: #333333;
	--method-padding: .4em .8em;
	--method-border-radius: .3em;

	/*** IIOPPI ***/

	--musta: #000000;
	--harmaa: #999999;
	--harmaa-vaalea: #CCCCCC;
	--harmaa-tausta: #E2E2E4;
	--harmaa-tausta-vaalea: #F5F5F5;
	--harmaa-reuna: var(--strokes-neutral-light);

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

	--vari1: var(--green-600);
	--vari1-tumma: var(--green-800);
	--vari2: var(--orange-600);
	--vari2-tumma: var(--orange-800);

	--painike-vari: var(--neutral-000);
	--painike-vari-hover: var(--neutral-000);
	--painike-vari-selected: var(--neutral-000);
	--painike-vari-disabled: var(--disabled-text);
	--painike-taustavari: var(--primary-bg-dark);
	--painike-taustavari-hover: var(--primary-bg-darker);
	--painike-taustavari-selected: var(--primary-bg-darker);
	--painike-taustavari-disabled: var(--disabled-background);
	--painike-kehys: .05em solid var(--neutral-000);
	--painike-kehys-hover: .05em solid var(--neutral-000);
	--painike-kehys-selected: .05em solid var(--neutral-000);
	--painike-kehys-disabled: .05em solid var(--disabled-other);
	--painike-mitat: 1.5em;
	--painike-pyoristys: .75em;

	--painike2-vari: var(--neutral-900);
	--painike2-vari-hover: var(--neutral-900);
	--painike2-vari-selected: var(--neutral-900);
	--painike2-vari-disabled: var(--disabled-text);
	--painike2-taustavari: var(--neutral-000);
	--painike2-taustavari-hover: var(--neutral-050);
	--painike2-taustavari-selected: var(--neutral-100);
	--painike2-taustavari-disabled: var(--disabled-background);
	--painike2-kehys: .05em solid var(--strokes-neutral-light);
	--painike2-kehys-hover: .05em solid var(--strokes-neutral-light);
	--painike2-kehys-selected: .05em solid var(--strokes-neutral-dark);
	--painike2-kehys-disabled: .05em solid var(--disabled-other);

	--painike3-vari: var(--neutral-000);
	--painike3-vari-hover: var(--neutral-000);
	--painike3-vari-selected: var(--orange-100);
	--painike3-vari-disabled: var(--disabled-text);
	--painike3-taustavari: var(--orange-600);
	--painike3-taustavari-hover: var(--orange-800);
	--painike3-taustavari-selected: var(--orange-800);
	--painike3-taustavari-disabled: var(--disabled-background);
	--painike3-kehys: .05em solid var(--strokes-neutral-light);
	--painike3-kehys-hover: .05em solid var(--strokes-neutral-light);
	--painike3-kehys-selected: .05em solid var(--strokes-neutral-light);
	--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;

	--valilehdet-vari-selected: #2DAC44;
	--valilehdet-palkki-tausta-mobile: linear-gradient(0deg, rgba(235,235,235,1) 0%, rgba(245,245,245,1) 50%);

	--eteneminen-taustavari: var(--painike-taustavari);

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

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

	/*** 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: .15em solid transparent;
	--elementti-kehys-selected: .15em solid var(--method-600);
	--elementti-kehys-selected-hover: .15em solid var(--method-500); */
	--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: .15em solid var(--method-100);
	--elementti-vaalea-kehys-selected: .15em solid var(--method-600);
	--elementti-vaalea-kehys-selected-hover: .15em solid var(--method-500); */
	--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: .05em solid var(--strokes-neutral-darkest);
	/* --elementti-input-kehys-hover: .05em solid var(--strokes-neutral-darkest);
	--elementti-input-kehys-focus: .05em solid var(--strokes-neutral-darkest);
	--elementti-input-kehys-focus-hover: .05em solid var(--strokes-neutral-darkest); */
	--elementti-input-kehys-hover-style: solid;
	--elementti-input-kehys-hover-color: var(--strokes-neutral-darkest);
	--elementti-input-kehys-focus-style: solid;
	--elementti-input-kehys-focus-color: var(--strokes-neutral-darkest);
	--elementti-input-kehys-focus-hover-style: solid;
	--elementti-input-kehys-focus-hover-color: var(--strokes-neutral-darkest);
	--elementti-input-kehys-disabled: .05em solid var(--disabled-other);
	--elementti-input-kehys-palaute: .15em solid transparent;

	/* --elementti-siirrettava-varjo: 0 1px 4px 0 #0000001A;
	--elementti-siirrettava-varjo-hover: 0 2px 6px 2px #0000001A;
	--elementti-siirrettava-varjo-siirrossa: 0 3px 8px 3px #0000001A; */
	--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;
}

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



* {
	position: relative;
	box-sizing: border-box;
}

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;
}
body {
	font-family: open-sans, serif;
	color: var(--text-black);
	margin: 0;
	padding: 0;
}
html, body {
	-webkit-text-size-adjust: none;
}
html.lukittu,
html.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 {
	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: 1em 0;
	padding: 0;
	line-height: 1.5;
}
p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}


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


/*** 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-start{
	justify-content: flex-start;
}
.justify-end{
	justify-content: flex-end;
}
.align-start{
	align-items: flex-start;
}
.align-end{
	align-items: flex-end;
}


/*** * ***/
*[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;
}
/* html.no-touch .yle:hover span,
html.no-touch .hs:hover span,
html.no-touch .hstv:hover span {
	
}
html.no-touch .yle:hover,
html.no-touch .hs:hover,
html.no-touch .hstv:hover {
	
} */
.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;
	/* max-width: 100vw; */
	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% - 2em);
	width: 2.5em;
	height: 4em;
	z-index: 1;
	border-radius: 0 !important;
	border: none !important;
	background: none !important;
	color: #00000033 !important;
	overflow: hidden !important;
}
html.no-touch .nuoliB.nappi:hover {
	color: #00000099 !important;
}
.nuoliB.nappi > svg {
	position: absolute;
	width: 4em;
	height: 4em;
	pointer-events: none;
}
.nuoliB.disabled {
	display: none;
}
.nuoliB.edellinen {
	left: 0;
}
.nuoliB.edellinen > svg {
	transform: translateX(-.1em);
}
.nuoliB.seuraava {
	right: 0;
}
html.scrollY #container > .nuoliB.seuraava {
	margin-right: 18px;
}
html.mobile .nuoliB.nappi > svg {
	font-size: .5em;
}

.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 {
	position: absolute;
	right: .5em;
	top: .5em;
	color: var(--painike-sulje-vari) !important;
	border-color: var(--painike-sulje-kehysvari) !important;
	background-color: var(--painike-sulje-taustavari) !important;
}
html.no-touch .suljeB:not(.disabled):not(.selected):hover {
	color: var(--painike-sulje-vari-hover) !important;
	border-color: var(--painike-sulje-kehysvari-hover) !important;
	background-color: var(--painike-sulje-taustavari-hover) !important;
}
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 {
	/* width: 1.25em !important;
	height: 1.25em !important; */
}
.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.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;
}
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);
	padding: .25em;
}
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-tehtavananto {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.75em  4.5em 1.75em;
	min-height: 4.75em;
}
#harjoituspohja-tehtavananto:empty{
	display: none;
}

#harjoituspohja-sisaltoalue {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
}
#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: 0;
	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-alapalkki {
	font-size: 20px;
}
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 {
	padding: 20px;
	min-height: calc(var(--painike-mitat) + 40px);
}
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;
}
.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;
}
.modaali.modaali-siirrettava {
	z-index: 98;
}
.modaali-wrapper{
	align-items: stretch;
	border-radius: .4em;
	background-color: #fff;
	box-shadow: var(--elementti-siirrettava-varjo);
}
.modaali.modaali-siirretaan .modaali-wrapper {
	box-shadow: var(--elementti-siirrettava-varjo-siirrossa);
}
.modaali-sisalto-wrapper {
	order: 2;
	padding: 0 .4em;
}
.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;
	gap: .2em;
}
.modaali-header:empty{
	display: none;
}
.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-weight: bold;
}
.modaali-header .modaali-otsikko > div {
	font-size: .8em;
}
.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-nappi {
	flex: 0 0 auto;
	width: 2.4em;
	height: 2.4em;
	color: var(--text-black);
	cursor: pointer;
}
html.no-touch .modaali-nappi:hover {
	background-color: var(--light-bg-neutral);
}
.modaali-nappi > svg {
	width: 50%;
	height: 50%;
	stroke-width: 1.5px;
}


/*** 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%);
}
mll > *,
.mll-wrapper {
	display: flex;
	align-items: center;
	font-size: .75em;
}
mll > *::after,
.mll-wrapper::after {
	content: ')';
}
mls {
	position: absolute;
	top: 0;
	left: 100%;
	transform: translateY(-50%);
}
mls > *,
.mls-wrapper {
	display: flex;
	align-items: center;
	font-size: .75em;
}
mls > *::before,
.mls-wrapper::before {
	content: '(';
}


/*** 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 {
	position: absolute;
	left: .5em;
	bottom: 3.25em;
	border-radius: .2em !important;
}
html.nappaimisto-esilla #nappaimistoB {
	display: none;
}

#nappaimisto.modaali {
	position: absolute;
	bottom: 1em;
	left: 1em;
	font-size: 20px;
}
#nappaimisto-wrapper {
	gap: .2em;
	align-items: stretch;
}
.nappaimisto-rivi {
	flex: 0 0 auto;
	justify-content: flex-start;
	gap: .2em;
}
.nappaimisto-nappi {
	flex: 0 0 auto;
	width: 2.4em;
	height: 2.4em;
	line-height: 125%;
	border-radius: .2em;
	border: 1px solid var(--strokes-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(--backgrounds-light-bg-neutral);
}
.nappaimisto-nappi[data-vari="valkoinen"].selected,
.nappaimisto-nappi[data-vari="valkoinen"].valittu,
#nappaimisto.nappaimisto-isot .nappaimisto-nappi[data-key="SHIFT"] {
	border-color: var(--strokes-neutral-darkest);
	background-color: var(--backgrounds-light-bg-neutral-dark);
}

.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: 101;
}
.container-toimintonappi-vasen {
	position: absolute;
	bottom: 5em;
	left: .5em;
	z-index: 101;
}
html.scrollY .container-toimintonappi-oikea {
	margin-right: 18px;
}


/*** 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"]: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(--primary-bg-dark);
	background: var(--primary-bg-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(--light-bg-neutral);
}
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(--primary-bg-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::-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(--primary-bg-dark);
	background: var(--primary-bg-light);
}
input[type="range"].range.disabled::-moz-range-track,
input[type="range"][disabled].range::-moz-range-track {
	outline-color: var(--disabled-other);
	background: var(--light-bg-neutral);
}
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(--primary-bg-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;
}


/*** 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: var(--elementti-kehys-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: var(--elementti-kehys-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: var(--elementti-kehys-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: var(--elementti-vaalea-kehys-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: var(--elementti-vaalea-kehys-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: var(--elementti-vaalea-kehys-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: var(--elementti-input-kehys-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: var(--elementti-input-kehys-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: var(--elementti-input-kehys-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: var(--elementti-input-kehys-focus); */
	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 > br { */
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(--strokes-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: calc(100% - .3em);
	top: calc(100% - .3em);
	width: .7em;
	height: .7em;
	background-image: var(--light-img-success);
	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(--light-img-error);
}

.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.sanomapro.fi/
*
* The copyrighted fonts are:
*
* Alku-Laiha
* Alku-Normaali
* Alku-Lihava
* AlkuApulinjat-Laiha
* AlkuApulinjat-Normaali
* AlkuApulinjat-Lihava
* AlkuPiirtosuunnat-Laiha
*
* 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) 2016 Typolar Ltd
*/

/*Alku*/
@font-face {
	font-family: 'Alku';
	src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.eot');
	src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.eot?#iefix') format('embedded-opentype'),
		url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.woff2') format('woff2'),
		url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-laiha-webfont.woff') format('woff');
	font-weight: 300;
	ascent-override: 100%;
}
@font-face {
	font-family: 'Alku';
	src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.eot');
	src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.eot?#iefix') format('embedded-opentype'),
		url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.woff2') format('woff2'),
		url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-normaali-webfont.woff') format('woff');
	font-weight: normal;
	ascent-override: 100%;
}
@font-face {
	font-family: 'Alku';
	src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.eot');
	src: url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.eot?#iefix') format('embedded-opentype'),
		url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.woff2') format('woff2'),
		url('https://sisalto.sanomapro.fi/tiedostot/fontit/alku-lihava-webfont.woff') format('woff');
	font-weight: bold;
	ascent-override: 100%;
}

svg [name="Alku_Lihava"] tspan {
	font-weight: bold !important;
}