:root {
	--secondary-000: #f4fcfe;
	--secondary-050: #e6f7fb;
	--secondary-100: #cdeef6;
	--secondary-200: #a6e1ef;
	--secondary-300: #7fd4e8;
	--secondary-400: #4ec4de;
	--secondary-500: #2bb6d4;
	--secondary-600: #23afd0;
	--secondary-700: #1c8ca7;
	--secondary-800: #166a7f;
	--secondary-900: #0f4654;

	--yleinen-padding: 1rem;
	--yleinen-padding-xs: calc(var(--yleinen-padding) * .25);
	--yleinen-padding-s: calc(var(--yleinen-padding) * .5);
	--yleinen-padding-l: calc(var(--yleinen-padding) * 1.5);
	--yleinen-padding-xl: calc(var(--yleinen-padding) * 2);
	--yleinen-border-radius: 0;

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

	--painike-pyoristys: var(--yleinen-border-radius);
	--header-height: 5rem;

	--gap-xxs: 1px;
	--gap-xs: var(--yleinen-padding-xs);
	--gap-s: var(--yleinen-padding-s);
	--gap: var(--yleinen-padding);
	--gap-l: var(--yleinen-padding-l);
	--gap-xl: var(--yleinen-padding-xl);
}


/* h2:not(:last-child) {
	margin-bottom: var(--yleinen-padding);
} */
img {
	display: block;
	width: auto;
	height: auto;
}


.lucide {
	width: 1em;
	height: 1em;
}


.gap-xxs {
	gap: 1px;
}

.painike,
.nappi {
	font-weight: normal;
}
/* .painike:focus,
.nappi:focus {
	outline: none;
	border-color: var(--text-black) !important;
} */
html.mobile .nappi > div,
html.mobile .painike > div {
	font-size: 1em;
}
html.mobile .painike:not(.painike2):not(.painike3):not(.painikeW) {
	min-height: calc(var(--painike-mitat) * 1.5);
}

.nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-XS);
	padding: var(--yleinen-padding-s);
	cursor: pointer;
}
html.no-touch .nav-btn:hover {
	text-decoration: underline;
}
.nav-btn.selected {
	color: var(--neutral-000);
	background-color: var(--secondary-500);
	pointer-events: none;
}

/* INPUT + SELECT */
select.select,
input[type="text"],
input[type="password"],
input[type="number"] {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: unset !important;
	background-color: inherit !important;
	border: none;
	outline: none;
}
.box > select.select,
.box > input[type="text"],
.box > input[type="password"],
.box > input[type="number"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: inherit;
	border-radius: inherit;
	background-color: unset !important;
}

/* select.select:focus {
	background-color: inherit !important;
} */
select.select:active,
select.select:focus,
input:focus,
input:active,
.box:has( > textarea:active),
.box:has( > textarea:focus) {
	outline: 1px solid var(--secondary-600) !important;
}

select.select option {
	font-size: 1rem;
	background-color: var(--neutral-000);
}

input::placeholder {
	color: var(--neutral-200);
}
input:focus::placeholder {
	color: transparent;
}


select.select {
	cursor: pointer;
}
select.select100 {
	width: 100%;
}
/* .box select.select:not(:focus) {
	outline-color: transparent !important;
} */


textarea {
	font-family: interface, sans-serif;
    font-weight: 300;
	font-size: 1em;
	padding: 0;
	border: none;
	resize: none;
	overflow-y: auto;
	background-color: inherit;
}
textarea:focus {
	outline: none;
	/* border: var(--painike2-kehys-hover); */
}
	/* --painike2-vari: var(--neutral-800);
	--painike2-vari-hover: var(--neutral-800);
	--painike2-vari-selected: var(--neutral-800);
	--painike2-vari-disabled: var(--disabled-text);
	--painike2-taustavari: var(--neutral-000);
	--painike2-taustavari-hover: var(--neutral-050);
	--painike2-taustavari-selected: var(--secondary-050);
	--painike2-taustavari-disabled: var(--disabled-background);
	--painike2-kehys: .05em solid var(--neutral-200);
	--painike2-kehys-hover: .05em solid var(--neutral-400);
	--painike2-kehys-selected: .05em solid var(--secondary-300);
	--painike2-kehys-disabled: .05em solid var(--disabled-other); */


.box {
	padding: var(--yleinen-padding-s);
	border-radius: var(--yleinen-border-radius);
}
/* .box, */
.box-varjo {
	box-shadow: .15rem .15rem 0 var(--primary-200);
}
.box .box:not(.box-varjo) {
	box-shadow: unset;
}
.box-000 {
	background-color: var(--neutral-000);
}
.box-050 {
	background-color: var(--secondary-050);
}
.box-700 {
	background-color: var(--secondary-200);
}
.box-700-primary {
	background-color: var(--primary-100);
}

.box-placeholder {
	visibility: hidden;
}
.box:has(> select.select)::after,
.box:has(> input[type="text"])::after,
.box:has(> input[type="password"])::after,
.box:has(> input[type="number"])::after {
	content: '-';
	visibility: hidden;
}

*:has(> .box-header) {
	padding-top: var(--yleinen-padding-l);
	padding-bottom: var(--yleinen-padding-s);
}
.box-header {
	position: absolute;
	left: 0;
	top: 0;
	font-size: .5em;
	padding: 1em;
	letter-spacing: 1px;
	font-weight: bolder;
	text-transform: uppercase;
	pointer-events: none;
}

.box-kopioi {
	text-align: center;
	cursor: pointer;
}
html.no-touch .box-kopioi:not(.kopioitu):hover::after,
.box-kopioi.kopioitu::after {
	content: 'Copy';
	position: absolute;
	right: 2em;
	top: 0;
	font-size: .5em;
	padding: 1em;
	letter-spacing: 1px;
}
.box-kopioi.kopioitu::after {
	content: 'Copied';
}
.box-kopioi .lucide-copy {
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(-50%,50%);
	width: .8em;
	height: .8em;
	color: var(--primary-300);
}
html.no-touch .box-kopioi:not(.kopioitu):hover .lucide-copy,
.box-kopioi.kopioitu .lucide-copy {
	color: var(--text-black);
}

/*  */
.yleinen-wrapper {
	max-width: calc(80rem + var(--yleinen-padding-xl) * 2);
	width: 100%;
	padding: var(--yleinen-padding) var(--yleinen-padding-xl);
}
html.mobile .yleinen-wrapper {
	padding: var(--yleinen-padding);
}


/*  */
html {
	overflow: unset !important;
	background-color: var(--primary-050);
}
html, body {
	font-family: interface;
	color: var(--text-black);
}
html.mobile,
html.mobile body {
	font-size: 16px;
}
body {
	margin: 0;
}

/*  */
#container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	font-size: 1em !important;
	overflow: unset !important;
}

/*  */
header {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--neutral-000);
	/* padding: 0 var(--yleinen-padding-xl); */
	/* color: var(--neutral-000); */
	/* background-color: var(--neutral-000); */
	/* border-bottom: 1px solid var(--neutral-200); */
}
.header-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yleinen-padding-l) 5rem;
	min-height: var(--header-height);
}
html.no-mobile header {
	position: sticky;
	top: 0;
	z-index: 2;
}

.header-logo {
	height: calc(var(--header-height) * .5);
	z-index: 1;
}
.header-tiedot {
	
}
.header-kayttaja {
	
}
.header-toiminnot {
	position: absolute;
	top: calc(100% + var(--yleinen-padding-s));
	right: calc(var(--yleinen-padding-s) * -1);
	z-index: 100;
}
html:not(.header-toiminnot-aktiivinen) .header-toiminnot {
	display: none;
}
.header-toiminnot > * {
	min-width: 12rem;
}
#form-login {
	width: 100%;
}

html.mobile.portrait header {
	
}
html.mobile.portrait .header-tiedot {
	padding: var(--yleinen-padding);
}
html.mobile.portrait.header-toiminnot-aktiivinen .header-tiedot {
	padding-bottom: 0;
}
html.mobile.portrait .header-toiminnot {
	position: relative;
	top: unset;
	right: unset;
	width: 100%;
	padding-left: 0;
    padding-right: 0;
}
html.mobile.portrait .header-toiminnot > * {
	width: 100%;
}

html.mobile.portrait .header-wrapper {
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	gap: 0;
}
html.mobile.portrait .header-logo {
	position: absolute;
	top: var(--yleinen-padding);
	left: var(--yleinen-padding);
	order: 1;
	height: 1.8rem;
}
html.mobile.portrait .header-tiedot {
	order: 2;
}


nav.mainnav {
	flex: 1 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
}
nav.mainnav .nav-btn.selected {
	color: inherit;
	background: linear-gradient(180deg, transparent 0%, transparent 91%, var(--secondary-500) 90%, var(--secondary-500) 100%);
}

html.mobile.portrait nav.mainnav {
	height: 3rem;
	order: 3;
	justify-content: stretch;
	/* background-color: var(--primary-000); */
}
html.mobile.portrait nav.mainnav .nav-btn {
	flex: 1;
}
/* html.mobile.portrait nav.mainnav .nav-btn.selected {
	background: var(--primary-050);
} */

nav.subnav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: var(--yleinen-padding);
	gap: var(--yleinen-padding-s);
}
html.mobile.portrait nav.subnav {
	justify-content: center;
}
/* html.mobile.portrait nav.subnav .nav-btn {
	flex: 1 1 auto;
} */
/* nav.subnav .nav-btn:not(.selected) {
	background-color: var(--neutral-000);
} */

/*  */
main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
html.no-mobile main:not(:has(nav.subnav)) .main-wrapper {
	padding-top: var(--yleinen-padding-xl);
}

html.no-mobile main:not(:has(section[data-id="projektit"])) {
	background-image: url(https://iioppi.fi/assets/images/tausta3.png);
	background-position: left 50vw center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
@media screen and (max-width: 90rem) {
	html.no-mobile main:not(:has(section[data-id="projektit"])) {
		background-position: left 55vw center;
	}
}
@media screen and (max-width: 60rem) {
	html.no-mobile main {
		background-image: unset !important;
	}
}


.info {
	font-size: .8em;
}


section {
	width: 100%;
}
html.mobile section {
	max-width: unset;
}
section[data-id]:not(.selected) {
	display: none !important;
}

.tuotteet-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--yleinen-padding-s);
}

.tuote {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--yleinen-padding-xs);
	padding-top: var(--yleinen-padding-xs);
	padding-bottom: var(--yleinen-padding-xs);
	/* max-width: 35rem; */
}
.tuote-linkki {
	flex: 1 1 auto;
}
.tuote-linkki:not(a)/*  .lucide-triangle-alert */ {
	color: var(--vaarin-vari);
}
a.tuote-linkki {
	color: var(--secondary-700);
}
html.no-touch a.tuote-linkki:hover {
	text-decoration: underline;
}
.tuote-toiminnot {
	width: 100%;
	align-items: stretch;
	padding-bottom: var(--yleinen-padding-xs);
}
.tuote:has(.painike.toggle):not(.toiminnot-aktiiviset) .tuote-toiminnot {
	display: none;
}
.tuote-avaimet {
	justify-content: stretch;
}
.tuote-avaimet > * {
	flex: 1 0 auto;
}
@media screen and (max-width: 800px) {
	.tuote-avaimet {
		flex-direction: column;
		align-items: stretch;
	}
}


.avain-koodi {
	letter-spacing: .2em;
}
.url-koodi {
	word-break: break-all;
}


/*  */
footer {
	flex: 0 0 auto;
	justify-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--secondary-050);
	background-color: var(--secondary-900);
	text-align: center;
	font-size: .8rem;
}