@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

:root {
	
	--tumma: #0A0A0A;
	--tumma2: #3B3B3B;
	
	--oranssi: #F37121;
	--tummaoranssi: #E0681E;
	--vaaleaoranssi: #FDE3D3;
	
	--vaalea: #FAFAFA;
	
	--vaaleinharmaa: #E0E0E0;
	--vaaleanharmaa: #E7E7E7;
	--harmaa: #858585;
	--tummanharmaa: #6C6C6C;
	
	--omavastuu: #0061DF;
	--omavastuutumma: #0051B8;
	--omavastuuvaalea: #B7CFE5;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	text-decoration: none !important;
}

/* RAKENNE */

html, body, input, select, textarea, button {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
}
html, body {
	min-height: 100%;
	margin: 0px;
}
body {
	background-image: url(../kuvat/sivustotausta.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
	min-height: 100%;
	background: radial-gradient(206.96% 195.74% at 252.95% 113.51%, var(--Colors-Brand-500, #F37121) 0%, rgba(243, 113, 33, 0.00) 100%), radial-gradient(60.47% 383.53% at -325.56% 45.68%, var(--Colors-Brand-500, #F37121) 0%, rgba(243, 113, 33, 0.00) 100%), radial-gradient(72.83% 309.97% at 331.22% -1.56%, var(--Colors-Brand-500, #F37121) 0%, rgba(243, 113, 33, 0.00) 100%), var(--Colors-Grey-1000, #0A0A0A);
}
header {
	top: 0;
	z-index: 2;
}
header, #ylavalikkoalue, main, footer {
	max-width: 1600px;
	margin: auto;
}
header #ylatunniste {
	height: 80px;
	display: grid;
	grid-template-columns: 250px auto 125px 25px 25px 75px;
	margin: 16px auto;
	border-radius: 10px;
	background-color: #000;
	background-image: url(../kuvat/header_tausta.jpg);
	background-position: center center;
	background-repeat: no-repeat;
}
header #logo, header #paavalikkoalue {
	height: 80px;
	display: flex;
	align-items: center;
}
header #logo img {
	max-height: 30px;
	max-width: 222px;
	margin-left: 25px;
}
header #kayttajavalikkoalue {
	color: #fff;
	justify-content: center;
	height: 62px;
	margin-top: 9px;
	text-align: center;
	z-index: 30;
	position: relative;
}
header #kayttajanimi {
	display: inline-flex;
	line-height: 62px;
	align-items: center;
	font-weight: 700;
	cursor: pointer;
}

header #kayttajatiedot>div:nth-of-type(n+2){
	padding: 10px 15px 20px 15px;
	position: relative;
	margin: 0 15px;
}
header #kayttajatiedot>div:nth-of-type(n+2) a {
	text-decoration: none !important;
	color: #fff;
}

header #kayttajavalikko {
	position: absolute;
	z-index: 2;
	overflow: hidden;
	background: #000;
	width: 200px;
	top: 60px;
	padding: 0;
	height: auto;
	right: 0;
	z-index: 100;
	background: #000;
	transition: ease 0.3s;
	text-align: right;
	border-radius: 0 0 0 8px;
	max-height: 0;
	overflow: hidden;
	transition: all 0.3 ease-in;
}
.kayttajavalikkoAuki header #kayttajavalikko {
	max-height: 500px;
	padding: 15px 0;
}
header #kayttajavalikko a {
	display: inline-block;
	padding: 15px 0px 11px 0px;
	margin-right: 15px;
	color: #fff;
	text-decoration: none;
	border-bottom: #000 4px solid;
	transition: all 0.2s ease;
}
header #kayttajavalikko a:hover {
	color: var(--oranssi);
	border-color: var(--oranssi);
}


header #kayttajatiedotMobiili {
	display: none;
}
header #paavalikkoalue {
	justify-content: center;
}
header nav#paavalikko {
	background: #000;
	border-radius: 6px;
	padding: 0 25px;
	display: flex;
	gap: 32px;
}
header nav#paavalikko>span {
	border-left: 1px solid var(--tummanharmaa);
	display: inline-block;
	margin-top: 15px;
	width: 1px;
	height: 30px;
}

header nav#paavalikko a {
	margin: 0 !important;
}
header nav#paavalikko a {
	text-decoration: none;
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	padding: 0px 10px;
	line-height: 62px;
	text-align: center;
	font-weight: 600;
}

header a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	height: 0;
	background-color: var(--oranssi);
	transition: height 0.2s ease;
	transform-origin: bottom;
	border-radius: 2px;
}
header #tuotekori a::after {
	bottom: 15px;
}
header nav#paavalikko a:hover,
header #tuotekori a:hover span,
header nav#paavalikko a.valittu {
	color: var(--oranssi);
}
 
header nav#paavalikko a:hover::after,
header nav#paavalikko a.valittu::after,
header #tuotekori a:hover::after,
header #tuotekori a.valittu::after {
	height: 4px; 
}
header #tuotekori {
	display: flex;
	justify-content: center;
	position: relative;
	padding: 0 18px;
	
}
header #tuotekori .tuotteita::before {
	height: 10px;
	width: 10px;
	background: var(--oranssi);
	content: "";
	border-radius: 50%;
	top: 25px;
	left: 28px;
	position: absolute;
}
header #tuotekori span {
	color: #fff;
}
header #tuotekori a>span {
	font-size: 24px;
}
header #tuotekori a:hover {
	text-decoration: underline;
}
header nav#paavalikko>span.fi {
	width: 24px;
}

main {
	min-height: calc(100vh - 198px);
	position: relative;
	border-radius: 10px;
	margin-bottom: 16px;
	background: #fff;
	transition: all 0.5s;
}
section {
	background: #fff;
	min-height: 100%;
}
footer {
	background: #000;
	color: #fff;
	padding: 16px;
	text-align: center;
	border-radius: 10px;
	margin-bottom: 16px;
}
footer a {
	font-weight: 400;
}
hr {
	margin: 32px 0;
	border: none;
	border-top: 1px solid var(--vaaleanharmaa);
}
select {
	background-repeat: no-repeat;
	background-position: left 5px center;
	background-size: 18px;
}
select.kuvallinen {
	padding-left: 25px;
}

/* YLEISET ELEMENTIT */
a {
	color: var(--oranssi);
}
a:has(.material-symbols-outlined) {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	text-decoration: none !important;
}
a:has(.material-symbols-outlined)>span:not(.material-symbols-outlined) {
	text-decoration: underline;
}
a.painike:has(.material-symbols-outlined)>span:not(.material-symbols-outlined) {
	text-decoration: none;
}
a .material-symbols-outlined {
	font-size: 16px;
	font-weight: 400 !important;
}
a.toissijainen {
	color: var(--tummanharmaa);
	font-weight: 400;
}
a.vaalea {
	color: #fff;
}
a  + a {
	margin-left: 16px;
}
a.isoKuvake .material-symbols-outlined {
	font-size: 1.6em !important;
}

.painike {
	padding: 0 12px;
	height: 48px;
	line-height: 48px;
	font-weight: 500;
	border: 0;
	border-radius: 8px;
	color: #fff;
	background: var(--oranssi);
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-block;
	text-align: center;
}
.painike:has(.material-symbols-outlined) {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
}
.painike .material-symbols-outlined {
	font-size: 16px;
	font-weight: 400 !important;
}

.painike:hover {
	background: var(--tummaoranssi);
}
.painike:focus-visible {
	outline: 5px solid var(--vaaleaoranssi);
}
.painike:active {
	outline: none;
}
.painike:disabled {
	background: var(--vaaleaoranssi);
	pointer-events: none;
	cursor: pointer;
}

.painike.toissijainen {
	background: var(--harmaa);
}
.painike.toissijainen:hover {
	background: var(--tummanharmaa);
}
.painike.toissijainen:disabled {
	background: var(--vaaleinharmaa);	
}

.painike.vaalea {
	background: #fff;
	color: var(--tummanharmaa);
	border: 1px solid var(--vaaleanharmaa);
}
.painike.vaalea:hover {
	background: #FAFAFA;
}
.painike.vaalea:disabled {
	color: var(--vaaleinharmaa);	
}

.painike.omavastuu {
	background: var(--omavastuu);
}
.painike.omavastuu:hover {
	background: var(--omavastuutumma);
}
.painike.omavastuu:disabled {
	background: var(--omavastuuvaalea);
}

.painike.punainen {
	background: #FEECEE;
	border: 1px solid #D11214;
	color: #D11214;
}
.painike.punainen:hover {
	background: #FED2D6;
}
.painike.punainen:disabled {
	opacity: 0.25;
}

.painike.isoKuvake .material-symbols-outlined {
	font-size: 24px;
}

a.painike:not(.kuinButton) {
	padding: 0;
	color: var(--oranssi);
	font-weight: 400;
	background: transparent;
	text-decoration: underline !important;
}
a.painike:not(.kuinButton):has(.material-symbols-outlined) {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	text-decoration: none !important;
}
a.painike:not(.kuinButton):hover {
	background: transparent !important;
}
a.painike:not(.kuinButton):hover>span:not(.material-symbols-outlined) {
	text-decoration: none !important;
}
a.painike:not(.kuinButton):has(.material-symbols-outlined)>span:not(.material-symbols-outlined) {
	text-decoration: underline;
}
a.painike:not(.kuinButton) .material-symbols-outlined {
	font-size: 16px;
	font-weight: 400 !important;
}
a.painike:not(.kuinButton).disabled {
	color: var(--vaaleaoranssi);
	pointer-events: none;
}


a.painike:not(.kuinButton).toissijainen {
	color: var(--tummanharmaa);
	background: transparent;
	font-weight: 400;
}
a.painike:not(.kuinButton).toissijainen:hover {
	background: transparent;
}
a.painike:not(.kuinButton).toissijainen.disabled {
	color: var(--vaaleanharmaa);
}

a.painike:not(.kuinButton).vaalea {
	color: #fff;
	background: transparent;
	font-weight: 400;
	border: 0;
}
a.painike:not(.kuinButton).vaalea:hover {
	background: transparent;
}

.radioValinnat {
	display: grid;
	grid-template-columns: 30px auto;
	column-gap: 10px;
}
.radioValinnat>div:nth-of-type(odd) {
	display: flex;
	
	justify-content: center;
}
.radioValinnat>div:nth-of-type(even) {
	padding-top: 11px;
}

.painike.matala {
	height: 40px;
	line-height: 40px;
}
.painike.levea {
	min-width: 250px;
}
.painike  + .painike {
	margin-left: 16px;
}

.omaTuoteTag {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--oranssi);
	color: #fff;
	z-index: 10;
	padding: 10px 25px;
	border-radius: 0 12px 0 12px;
	font-weight: 500;
}

.haitari {
	max-height: 35px;
	overflow: hidden;
	transition: all 0.8s;
}
.haitari .otsikko {
	white-space: nowrap;
	height: 35px;
	line-height: 35px;
	display: grid;
	grid-template-columns: auto 30px;
	cursor: pointer;
}
.haitari .otsikko .material-symbols-outlined {
	line-height: 35px;
	transition: all 0.5s;
	text-align: center;
}
.haitari .sisalto {
	max-height: 265px;
	overflow-y: auto;
}
.haitari.avattu { 
	max-height: 300px;
}
.haitari.avattu .otsikko .material-symbols-outlined {
	transform: rotate(180deg);
}

.hakuinputalue {
	display: grid; 
	grid-template-columns: auto 45px;
	border: 1px solid var(--vaaleanharmaa);
	border-radius: 6px;
}
.hakuinputalue>input {
	border: 0 !important;
	border-radius: 6px;
	background: transparent !important;
	padding: 0 10px !important;
}
.hakuinputalue>button {
	background: #FAFAFA !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-left: 1px solid var(--vaaleanharmaa) !important;
	border-radius: 0 6px 6px 0 !important;
}
.hakuinputalue>button>span {
	font-size: 22px !important;	
}

button {
	cursor: pointer;
}

input, select, textarea {
	font-family: Nunito, sans-serif;
	padding: 5px;
	width: 100%;
	font-size: 12pt;
	border-radius: 6px;
	border: 1px solid var(--harmaa);
	background-color: #fff;
}
label {
	font-size: 0.9em;
}
input::placeholder {
	color: var(--harmaa);
	font-style: italic;
}
input[type="checkbox"], input[type="radio"] {
	box-shadow: none;
	min-height: 20px;
	height: 20px;
	width: 20px;
}
label:has(input) {
	display: flex;
	align-items: center;
	gap: 5px;
}

h1, h2, h3, label, .painike {
	font-family: "Rubik", sans-serif;
}
h1 {
	font-size: 1.5em;
	font-weight: 500;
	padding-left: 10px;
	border-left: 8px solid #F37121;
}
h2 {
	font-size: 1.3em;
	font-weight: 500;
	border-left: 8px solid #F37121;
	padding-left: 10px;
}
h3 {
	font-size: 1.1em;
	font-weight: 500;
}
h4 {
	font-size: 1em;
	font-weight: 700;
}
h1 .tuotemerkki {
	color: #f35e19;
	font-weight: 600;
	font-size: 0.8em;
	
}
h1 .koodi {
	color: #444;
	margin-top: 5px;
	font-size: 0.8em;
}
.varianttituote {
	padding: 2px 8px;
	font-size: 0.7em;
	background: var(--vaaleaoranssi);
	border-radius: 50px;
	display: inline-block;
	color: var(--oranssi);
	text-align: center;
	margin-left: 10px;
}
.ohjeteksti p {
	margin: 10px 0;
}


::-webkit-scrollbar {
  width: 5px;       /* pystyvieritys */
  height: 5px;      /* vaakavieritys */
}
::-webkit-scrollbar-track {
  background: #fff;
}
::-webkit-scrollbar-thumb {
  background: var(--oranssi);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}


/* YLEISET LUOKAT */

.harmaaTeksti {
	color: var(--tummanharmaa);
}
.listalinkki {
	display: inline-flex  !important;
	border: 0 !important;
	align-items: center !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	background-color: #fff !important;
	/* background-image: url(../kuvat/ikonit/kulmanuoliOikea.svg) !important; */
	background-position: right 5px center !important;
	background-repeat: no-repeat !important;
	gap: 10px !important;
	width: 100% !important;
	color: var(--tummanharmaa) !important;
	font-size: 16px !important;
	margin: 0 !important;
	transition: all 0.2s;
}
.listalinkki:hover {
	background-color: var(--vaaleinharmaa) !important;
	color: #000 !important;
}
.listalinkki img {
	margin: 0;
}
.listalinkki:hover {
	background-color: var(--vaaleanharmaa);
}
a.listalinkki:has(.material-symbols-outlined)>span:not(.material-symbols-outlined) {
	text-decoration: none;
}
.otsake {
	/* border-bottom: 1px solid var(--vaaleanharmaa); */
	/* padding-bottom: 16px; */
	margin-bottom: 16px;
}
.sisennys {
	margin-left: 15px;
}
.kopioitavaTeksti {
	border-radius: 4px;
	border: 1px solid var(--harmaa);
	color: var(--tummanharmaa);
	padding: 4px 8px;
	font-weight: 400 !important;
	cursor: copy;
	display: inline-flex;
}
.kopioitavaTeksti.pieni {
	padding: 2px 4px;
	font-size: 0.8em;
	margin: 1px;
	line-height: 1;
}
.tayskorkea {
	height: 100%;
}
.kulmat {
	border-radius: 10px;
}
.vasenYlakulma {
	border-top-left-radius: 10px;
}
.oikeaYlakulma {
	border-top-right-radius: 10px;
}
.vasenAlakulma {
	border-bottom-left-radius: 10px;
}
.oikeaAlakulma {
	border-bottom-right-radius: 10px;
}
.o {
	text-align: right !important;
	justify-content: right !important;
}
.k {
	text-align: center !important;
	justify-content: center !important;
}
.v {
	text-align: left !important;
	justify-content: left !important;
}
.vk {
	display: flex !important;
	align-items: center !important;
}
.va {
	display: flex;
	align-items: end;
}
.paddingS {
	padding: 8px !important;
}
.paddingSov {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
.paddingM {
	padding: 16px !important;
}
.paddingMov {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.paddingMya {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}
.paddingL {
	padding: 24px !important;
}
.paddingLov {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
.paddingLya {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}
.paddingXL {
	padding: 32px !important;
}
.paddingXLov {
	padding-left: 32px !important;
	padding-right: 32px !important;
}
.sisaltoOikealle {
	display: flex;
	justify-content: right;
}
.kavennettu {
	width: 70%;
	margin: auto;
}

.napillinenHaku {
	display: grid;
	grid-template-columns: 300px 45px;
}
.napillinenHaku input {
	font-size: 0.9em;
	border-radius: 6px 0 0 6px !important;
}
.napillinenHaku button {
	background: var(--vaalea) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--harmaa);
	border-radius: 0 6px 6px 0 !important;
	border-left: 0 !important;
}
.napillinenHaku button>span {
	font-size: 20px;
	color: var(--tumma);
}

.hakukentta {
	padding-left: 30px;
	background-image: url(../kuvat/ikonit/suurennuslasi.svg);
	background-repeat: no-repeat;
	background-position: left 5px center;
	background-size: auto 20px;
	width: 250px;
}
.rivituotekuva {
	max-height: 80px;
	max-width: 80px;
}

.avaaja {
	cursor: pointer;
}
.avausnuoli {
	transition: all 0.2s;
	cursor: pointer;
}
.avausnuoli.avattu {

}
.avattava:not(.avattu) {
	display: none !important;
}
.avattuAlue {
  position: relative; /* tarvitaan, että pseudo-elementti asemoituu tähän suhteessa */
}
.avattuAlue::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;              /* sijoitetaan keskelle */
  width: 2px;            
  background-color: var(--oranssi);
  transform: translateX(-50%); /* siirretään tarkalleen keskelle */
}
.rivikorkeusS {
	height: 20px;
	line-height: 20px;
}
.rivikorkeusM {
	height: 26px;
	line-height: 26px;
}
.rivikorkeusL {
	height: 32px;
	line-height: 32px;
}
.rivikorkeusXL {
	height: 38px;
	line-height: 38px;
}
.reunat {
	border: 1px solid var(--vaaleanharmaa);
}
.reunaYlos {
	border-top: 1px solid var(--vaaleanharmaa);
}
.reunaAlas {
	border-bottom: 1px solid var(--vaaleanharmaa);
}
.reunaVasen {
	border-left: 1px solid var(--vaaleanharmaa);
}
.reunaOikea {
	border-right: 1px solid var(--vaaleanharmaa);
}
.valiAlas {
	margin-bottom: 16px;
}
.valiYlos {
	margin-top: 16px;
}
.varjo {
	box-shadow: 0 10px 20px -10px var(--Effects-drop-shadow-light, #EAEAEA);	
}
.varjoYlos {
	box-shadow: 0 -4px 6px rgba(0,0,0,0.1);
}
.varjoAlas {
	box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.15);
}
.varjoInsetYlos {
	box-shadow: 0 10px 10px -10px var(--vaaleanharmaa) inset;
}
.varjoInsetAlas {
	box-shadow: 0 -10px 10px -10px var(--vaaleanharmaa) inset;
}
.ikoniteksti {
	display: flex;
	align-items: center;
	gap: 5px;
}
.ikoniteksti img {
	max-height: 20px;
	max-width: 20px;
}
.ikoniteksti span.material-symbols-outlined {
	font-size: 20px;
}
.naytaValintapaneeli {
	cursor: pointer;
}

.prosessinapit {
	display: flex;
	flex-wrap: nowrap; 
	gap: 10px;          
	align-items: center;
	overflow: hidden;  
}
.prosessinapit button, .prosessinapit a, .prosessinapit select {
	flex: 1 1 0;          /* kasvavat suhteessa, mutta myös kutistuvat */
	min-width: 0;         /* Erittäin tärkeä: ilman tätä elem. ei aina kutistu sisällön alle */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;  /* lyhentää tekstiä ellipsiksiksi, ei rivitä */	
}

.otsikkopalkki {
	grid-column: 1 / 3;
	padding: 25px;
	border-bottom: 1px solid var(--vaaleanharmaa);
	box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.15);
	margin-bottom: 5px;
	height: 100px;
	line-height: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.otsikkopalkki .otsikkoteksti {
	display: flex;
	align-items: center;
}
.otsikkopalkki h1 {
	line-height: 30px;
	height: 30px;
}
.otsikkopalkki .valinnat {
	display: flex;
	align-items: center;
	text-align: right !important;
	justify-content: right !important;
}

/* KORTTILISTAT */

.korttilista .rivitoiminto a {
	color: #000 !important;
}
.korttilista .rivitoiminto .material-symbols-outlined{
	font-size: 24px;
	color: #000;
}
.korttilista .kortti {
	border: 1px solid var(--vaaleanharmaa);
	border-radius: 6px;
	box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.05);
	background: #fff;
	width: 100%;
}
.korttilista .kortti .harmaaTausta {
	background: var(--vaalea);
}
.korttilista .kortti .yhteenvetorivi {
	border-top: 1px solid var(--vaaleanharmaa);
}
.korttilista .korttiasettelu {
	display: grid;
}
.korttilista#etusivunTilauslista .korttiasettelu-1 {
	grid-template-columns: auto 50px;	
}
.korttilista#etusivunTilauslista .korttiasettelu-2 {
	grid-template-columns: 1fr 1fr 2fr 1fr;	
}
.korttilista#etusivunTilauslista .korttiasettelu-3 {
	grid-template-columns: 4fr 1fr;
}
.korttilista#etusivunTilauslista .korttiasettelu-4 {
	grid-template-columns: 4fr 1fr 2fr;
}

.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu-1 {
	grid-template-columns: auto 200px 100px 150px 100px 100px 100px 140px;	
}
.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu-2 {
	grid-template-columns: 116px auto 200px 100px 150px 100px 100px 100px 140px;	
}

.korttilista#hallintavalikko .korttiasettelu-1 {
	grid-template-columns: 420px auto;	
}
.korttilista#kayttajalista .korttiasettelu-1 {
	grid-template-columns: 1fr 1fr 1fr 1fr 35px 35px;	
}
.korttilista#kayttajalista .korttiasettelu-2 {
	grid-template-columns: 150px auto auto;
}
.korttilista#kustannuspaikkalista .korttiasettelu-1,
.korttilista#laskutusosoitelista .korttiasettelu-1,
.korttilista#toimitusosoitelista .korttiasettelu-1,
.korttilista#omaryhmalista .korttiasettelu-1,
.korttilista#hallinnan_tuotepakettilista .korttiasettelu-1 {
	grid-template-columns: 1fr 35px;	
}
.korttilista#omavastuulista .korttiasettelu-1 {
	grid-template-columns: 1fr 180px 35px;	
}
.korttilista#hankintakausilista .korttiasettelu-1 {
	grid-template-columns: 200px auto 35px;	
}
.korttilista#painatuslista .korttiasettelu-1 {
	grid-template-columns: 100px auto 300px 300px;	
	grid-gap: 10px;
}
.korttilista#painatuslista img {
	max-width: 100px;
	max-height: 100px;
}
.korttilista#omatVarusteetLista .korttiasettelu-1 {
	grid-template-columns: 116px auto 300px 330px;
}
.korttilista#omatVarusteetLista .korttiasettelu-2 {
	grid-template-columns: 116px auto 300px 300px;
}
.korttilista#omatVarusteetHankintakausiLista .korttiasettelu-1 {
	grid-template-columns: auto 250px 400px;
}
.korttilista#vaihtopalautuslista .korttiasettelu-1 {
	grid-template-columns: 116px 480px auto;
}
.korttilista#vaihtopalautuslista .korttiasettelu-2 {
	grid-template-columns: 220px 130px 220px auto 40px;
	gap: 15px;
}
.korttilista#vaihtopalautuslisayslista .korttiasettelu-1 {
	grid-template-columns: 116px 350px 380px auto;
}
.korttilista#vaihtopalautusohjeet .korttiasettelu-1 {
	grid-template-columns: 50px auto;
}
.korttilista#vaihtopalautusohjeet .korttiasettelu-1>div {
	position: relative;
}
.korttilista#vaihtopalautusohjeet .korttiasettelu-1:not(:last-of-type)>div:first-of-type::after {
	background: var(--vaaleinharmaa);
	width: 2px;
	position: absolute;
	top: calc(50% + 20px);
	height: calc(50% - 20px + 25px);
	left: 15px;  
	content: "";
}
.korttilista#vaihtopalautusohjeet .korttiasettelu-1:not(:first-of-type)>div:first-of-type::after {
	background: var(--vaaleinharmaa);
	width: 2px;
	position: absolute;
	top: 0;
	height: calc(50% - 20px);
	left: 15px;  
	content: "";
}
.korttilista#vaihtopalautusohjeet .kortti {
	display: grid;
	grid-gap: 25px;
}
.korttilista#vaihtopalautusohjeet .rivi>div:first-of-type>span {
	display: block;
	background: var(--vaaleanharmaa);
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-weight: 700;
	color: #000;
	border-radius: 50%;
}
.korttilista#vaihtopalautusohjeet .rivi>div:last-of-type {
	font-weight: 700;
}

.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-1 {
	grid-template-columns: 400px 120px 240px 1fr 1fr 180px 150px;
}
.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-2 {
	grid-template-columns: 116px 284px 120px 240px 1fr 1fr 180px 150px;
}


.korttilista#muokkaaMerkkauksiaLista .korttiasettelu-1 {
	grid-template-columns: auto 60px;
}
.korttilista#tuotepakettilista .korttiasettelu-1 {
	grid-template-columns: auto 200px;
}
.korttilista#tuotepakettilista .korttiasettelu-2 {
	grid-template-columns: 116px 480px auto;
}
.korttilista#tuotepaketinTuotteet .korttiasettelu-1 {
	grid-template-columns: 116px auto 240px 120px 80px 25px;
	grid-gap: 15px;
}
.korttilista#tuotekorilista .korttiasettelu-1 {
	grid-template-columns: 160px auto 555px;
}
.korttilista#tuotekorilista .korttiasettelu-2 {
	grid-template-columns: auto 120px 220px 80px;
}
.korttilista#tuotekorilista .korttiasettelu-3 {
	grid-template-columns: repeat(5, 1fr);
}
.korttilista#tuotekorilista .rivituotekuva, .korttilista#tuotekorilistayhteenveto .rivituotekuva {
	max-height: 124px;
	max-width: 124px;
}
.korttilista#tuotekorilista .sovitustieto, .korttilista#tuotekorilistayhteenveto .sovitustieto {
	background: #FFFFA4;
	color: #8C7B04;
	font-weight: 700;
	text-align: center;
	padding: 10px;
}
.korttilista#tuotekorilistayhteenveto .korttiasettelu-1 {
	grid-template-columns: 160px auto;
}
.korttilista#tuotekorilistayhteenveto .korttiasettelu-2 {
	grid-template-columns: 3fr 1fr 1fr 1fr;
}

.korttilista#tuotteetJoukkovalinnat .korttiasettelu-1 {
	grid-template-columns: 94px auto;
}

.korttilista#merkkaukset .korttiasettelu-1 {
	grid-template-columns: 1fr;
}
.korttilista#merkkaukset .korttiasettelu-2 {
	grid-template-columns: 80px auto;
}
.korttilista#merkkaukset .korttiasettelu-2>div:first-of-type {
	display: flex;
	justify-content: center;
	align-items: center;
}
.korttilista#merkkaukset .korttiasettelu-2 img {
	max-width: 60px;
	max-height: 60px;
}
.korttilista .valittava:hover {
	background-color: var(--vaaleanharmaa);
}
.korttilista .avausasettelu {
	display: grid;
	grid-template-columns: 50px auto;
}

.korttilista .tekstiPieni {
	font-size: 0.8em;
}
.korttilista .tekstiKeskikoko {
	font-size: 0.9em;
}
.korttilista .tekstiIso {
	font-size: 1.2em;
}
.korttilista .tekstiHarmaa {
	color: var(--tummanharmaa);
}
.korttilista .tekstiLihavoitu {
	font-weight: 700;
}
.korttilista .sovitustieto {
	background: #FFFFA4; 
	color: #B29C0A; 
	padding: 10px; 
	display: flex; 
	justify-content: center; 
	gap: 0;
}

.korttilista .kelluva {
	position: sticky;
	z-index: 2;
	transition: all 1s;
	height: 80px;
	bottom: 0px;
	width: 1232px;
	background: #fff;
}
main.valintapaneeli:not(.valintapaneeliAuki) .korttilista .kelluva {
	width: 1506px;
}
.korttilista .kelluva button { 
	margin: 0 5px 5px 0;
}
.harmaaTausta {
	background: var(--vaaleinharmaa);
}
.valkoinenTausta {
	background: #fff;
}
.kelluvaValikkoAlas {
	padding-bottom: 0;
}
.pinotutTuotetiedot {
	border-left: 6px solid var(--oranssi);
	padding: 5px 5px 5px 16px ;
}
h2.pinotutTuotetiedot {
	font-size: 1.2em;
}
.pinotutTuotetiedot .tuotemerkki {
	color: var(--oranssi);
	font-weight: 700;
	font-size: 16px;
}
.pinotutTuotetiedot .tuotenimi {
	color: #000;
	font-weight: 700;
	font-size: 20px;
}
.pinotutTuotetiedot .koodi {
	color: var(--tummanharmaa);
	font-weight: 400;
	font-size: 16px;
}
.tagi {
	padding: 2px 8px;
	font-size: 0.9em;
	margin: 0 5px 5px 0;
	background: var(--vaaleanharmaa);
	color: var(--tummanharmaa);
	border-radius: 25px;
	display: inline-block;
}
.riviominaisuus {
	border: 1px solid gray;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid var(--vaaleanharmaa);
	color: var(--tummanharmaa);
	background: #fff;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	margin: 0 5px 5px 0;
	display: inline-block;
}
.riviominaisuus.pieni {
	font-size: 0.9em;
}
.riviominaisuus:empty {
	display: none;
}
.riviominaisuus:has(.material-symbols-outlined) {
	display: inline-flex;
	gap: 5px;
	align-items: center;
}
.riviominaisuus .material-symbols-outlined {
	font-size: 16px;
}


/* HENKILÖKORTTI */

#henkilokuvan_saatonapit .painike {
	justify-content: left;
}

/* TOIMITUS */

#toimitustapanaytto {
	margin-top: 16px;
	border: 1px solid var(--vaaleanharmaa);
	box-shadow: 0 10px 20px -10px var(--Effects-drop-shadow-light, #EAEAEA);
	min-height: 150px;
	display: grid;
	grid-template-columns: 150px auto;
	border-radius: 6px;
}
#toimitustapanayttoKartta {
	border-right: 1px solid var(--vaaleanharmaa);
}
#toimitustapanayttoKartta:empty {
	background: var(--vaaleinharmaa);
}
#toimitustapanayttoKartta #miniMap {
	z-index: 1;
}
#toimitustapanayttoTeksti {
	padding: 16px;
	display: flex;
	align-items: center;
}
#toimitustapanayttoTeksti .toimitustapanimi {
	color: var(--oranssi);
}
#toimitustapanayttoTeksti .toimitustoimipiste {
	font-weight: 700;
}

/* NAUHAVALINTA */
.nauhavalinta {
	width: 100%;
	border: 1px solid var(--vaaleanharmaa);
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 10px 20px -10px var(--Effects-drop-shadow-light, #EAEAEA);
}
.nauhavalinta.valintoja-3 {
	grid-template-columns: 1fr 1fr 1fr;
}
.nauhavalinta>a {
	display: flex;
	justify-content: center;
	text-decoration: none;
	padding: 10px 0 !important;
	margin: 0 !important;
	color: #000;
	font-weight: 700;
	border-right: 1px solid var(--vaaleanharmaa);
	transition: all 0.2s;
}
.nauhavalinta>a:first-of-type {
	border-radius: 8px 0 0 8px;
}
.nauhavalinta>a:last-of-type {
	border-radius: 0 8px 8px 0 ;
	border-right: 0;
}
.nauhavalinta>a:hover {
	background: var(--vaaleanharmaa);
}
.nauhavalinta>a.valittu {
	background: var(--oranssi);
	color: #fff;
}
.nauhavalinta>a>img {
	vertical-align: middle;
	margin-right: 5px;
	height: 20px;
}
.nauhavalinta>a.valittu>img {
	filter: invert(1);
}

/* SAATAVUUS */
.saatavuustieto {
	font-size: 0.8em;
	text-align: center;
	border-radius: 15px;
	background: #FFFFA4;
	color: #B29C0A;
	padding: 2px 6px;
	min-width: 40px;
	display: inline-block;
}
.saatavuustieto.vapaana {
	background: #D8EED8;
	color: #567956;	
}



/* ILMOITUKSET */

.ilmoitus {
	display: block;
	margin: 15px 0px;
	background-color: #E7E7E7;
	color: #858585;
	font-size: 0.9em;
	padding: 16px;
	text-align: left;
	border-radius: 4px;
	border: 1px solid #858585;
	background-repeat: no-repeat;
	background-position: left 16px top 17px;
	background-size: 18px;
	background-image: url(../kuvat/ikonit/ilmoitus.svg);
}
.ilmoitus.korostettu {
	background-color: #FFFFA4;
	color: #B29C0A;
	border-color: #B29C0A;
	background-image: url(../kuvat/ikonit/ilmoitusKorostettu.svg);
}
.ilmoitus.virhe {
	background-color: #FDB8BF;
	color: #AC0B0C;
	border-color: #AC0B0C;
	background-image: url(../kuvat/ikonit/ilmoitusVirhe.svg);
}
.ilmoitus.omavastuu {
	color: var(--omavastuu);
	border-color: #005eb8;
	background-color: var(--omavastuuvaalea);
	background-image: url(../kuvat/ikonit/ilmoitusOmavastuu.svg);
}
.ilmoitus.ok, .jarjestelmaviesti.ok {
	background-color: #D8EED8;
	color: #5CB85C;
	border-color: #5CB85C;
	background-image: url(../kuvat/ikonit/ilmoitusOk.svg);
}
.ilmoitus p:first-of-type, .ilmoitus:not(:has(p)) {
	padding-left: 25px;
	font-weight: 700;
}
.ilmoitus:not(:has(p)) {	
	padding: 16px 16px 16px 42px;
}
.ilmoitus p:nth-of-type(n+2) {
	margin-top: 10px;
}
.ilmoitus>div {
	margin-top: 10px;
}
.ilmoitus:not(:has(p))>div {
	margin-left: -20px;
}
.ilmoitus a {
	font-weight: 700;
	color: #858585;
}
.ilmoitus a:hover {
	text-decoration: none;
}
.ilmoitus.korostettu a {
	color: #B29C0A;
}
.ilmoitus.virhe a {
	color: #AC0B0C;
}
.ilmoitus.omavastuu a {
	color: var(--omavastuu);
}
.ilmoitus.ok a {
	color: #5CB85C;
}
.ilmoitus:empty {
	display: none !important;
}



/* PIENI LIUKUKYTKIN */
.liukukytkin {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  user-select: none;
}

/* Label toimii kytkimenä */
.liukukytkin label {
  position: relative;
  display: inline-block;
  width: 46px;
  min-width: 46px;
  height: 26px;
  min-height: 26px;
  cursor: pointer;
}

/* Piilotetaan varsinainen checkbox */
.liukukytkin label > input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Taustapalkki */
.liukukytkin label > span {
  position: absolute;
  inset: 0;
  background: #ddd;
  border-radius: 26px;
  transition: background-color 0.3s;
}

/* Nuppi */
.liukukytkin label > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #bbb;
  border-radius: 50%;
  transition: transform 0.3s, background-color 0.3s;
}

/* Aktiivinen (checked) tila */
.liukukytkin label > input:checked + span {
  background: #2196f3;
  background: var(--oranssi);
}

.liukukytkin label > input:checked + span::after {
  transform: translateX(20px);
  background: white;
}

/* Fokusoitu tila */
.liukukytkin label > input:focus + span {
  box-shadow: 0 0 2px #2196f3;
}

/* Tekstiselite */
.liukukytkin > span {
  font-size: 0.95em;
  color: #333;
}


#mobiilivalikkoToggle,
#kayttajatiedotToggle {
	display: none;
}

.vainMobiili {
	display: none !important;
}






header #asiakas {
	color: #fff;
	font-weight: 700;
}




.taulukkoskrollaus {
	overflow-x:auto;
	width: 100%;
}
.kuvatausta {
	background-color: #ececec;
	background-image: url(../kuvat/kuvataustaruudukko.png?v=2);
	text-align: center;
	display: block;
	width: 100%;
	padding: 5px;
}

.juoksevatSarakkeet {
	columns: 2;
}
.sarakejako {
	display: grid;
	grid-gap: 16px;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}
.sarakkeet-1 {
	grid-template-columns: 1fr;
}
.sarakkeet-1-1-1 {
	grid-template-columns: 1fr 1fr 1fr;
}
.sarakkeet-2-1-1 {
	grid-template-columns: 2fr 1fr 1fr;
}
.sarakkeet-1-2-1 {
	grid-template-columns: 1fr 2fr 1fr;
}
.sarakkeet-1-3-1 {
	grid-template-columns: 1fr 3fr 1fr;
}
.sarakkeet-1-2 {
	grid-template-columns: 1fr 2fr;
}
.sarakkeet-2-1 {
	grid-template-columns: 2fr 1fr;
}
.sarakkeet-1-3 {
	grid-template-columns: 1fr 3fr;
}
.sarakkeet-3-1 {
	grid-template-columns: 3fr 1fr;
}
.sarakkeet-4-1 {
	grid-template-columns: 4fr 1fr;
}
.sarakejako.leveaVali {
	column-gap: 50px;
}
.sarakejako.valiviiva>div:first-of-type {
	border-right: 1px solid var(--vaaleanharmaa);
}
.sarakejako.aluejako {
	grid-gap: 4px;
}

ul, ol {
	margin-left: 20px;
}

.pikahakuehdotukset {
	border: 1px solid #ccc;
	width: 100%;
	max-width: 250px; 
	margin: -15px 0px 0px 0px; 
	padding: 0; 
	list-style: none;
	position: absolute;
	background: #fff;
}
.pikahakuehdotukset:empty {
	border: 0;
}

ul.murupolku {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.murupolku li {
	display: flex;
	align-items: center;
}

/* Erotin kaikille paitsi ensimmäiselle */
.murupolku li + li::before {
	content: "\276F";
	margin: 0 0.6em;
	color: #999;
	font-size: 0.9em;
	line-height: 1;
}
.murupolku a {
	color: #444;
	text-decoration: none;
}
.murupolku a:hover {
	text-decoration: underline;
}


.latausanimaatio {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	
}
.status, .tila {
	font-size: 0.9em;
	line-height: 1;
	border-radius: 10px;
	background-color: #ececec;
	color: #444;
	padding: 3px 9px;
	display: inline-block;
}
.status.vihrea, .tila.vihrea {
	background-color: lightgreen;
	color: darkgreen;	
}
.status.keltainen, .tila.keltainen {
	background-color: yellow;
	color: #000;	
}
.status.punainen, .tila.punainen {
	background-color: red;
	color: #fff;	
}

.pieniKytkinAlue {
	display: inline-flex;
	justify-content: center;
}
.pieniKytkin {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	height: 25px;
	padding: 4px !important;
	border-radius: 20px;
	background: #222 !important;
	user-select: none;
	width: 40px;
}

/* Valintojen perusulkoasu */
.pieniKytkin>label {
	position: relative;
	z-index: 1;
	text-align: center;
	cursor: pointer;
	border-radius: 20px;
	padding: 5px 7px;
	color: #fff;
}

/* Piilotettu mutta fokusoitava radio */
.pieniKytkin>label > input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Liukuva taustaelementti */
.pieniKytkinSlider {
	position: absolute;
	inset: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	border-radius: 20px;
	transform: translateX(0%);
	transition: transform 160ms ease, background-color 160ms ease;
	box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
	background: blue;
}

.pieniKytkinSelite {
	height: 25px;
	line-height: 25px;
	margin-left: 10px;
	display: inline-block;
	
}

/* Kuukausigridi asiakastuotepiilotuksen ajastukseen */

.kkgrid{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	background: var(--vaaleinharmaa);
	grid-gap: 1px;
	border: 1px solid var(--vaaleinharmaa);
	padding:0;
	margin:0;
	border-radius: 8px;
}

.kkgrid input{
	position:absolute;
	opacity:0;
	left: -1000px;
	width: 10px;
}
.kkgrid label{
	display: block;
	padding: 15px 10px;
	background: var(--vaalea);
	text-align: center;
	cursor: pointer;
	font-size: 0.8em !important;
	user-select: none;
	margin: 0 !important;
	color: gray;
}
.kkgrid label:first-of-type {
	border-radius: 8px 0 0 0;
}
.kkgrid label:nth-of-type(6) {
	border-radius: 0 8px 0 0;
}
.kkgrid label:nth-of-type(7) {
	border-radius: 0 0 0 8px;
}
.kkgrid label:last-of-type {
	border-radius: 0 0 8px 0;
	
}
.kkgrid input:checked+label{
	background: #f35e19;
	color: #fff;	
}

.kkgrid.joukkotoiminto {
	grid-template-columns:repeat(4,1fr);
	border-radius: 0 !important;
}
.kkgrid.joukkotoiminto label {
	border-radius: 0 !important;
	padding: 5px 2px !important;
}



/* Tekstivärit valinnan mukaan */
.pieniKytkin:has(label:nth-child(1) input:checked) label:nth-child(1) { color: #fff; }
.pieniKytkin:has(label:nth-child(1) input:checked) label:nth-child(2) { color: #ececec; }


.pieniKytkin:has(label:nth-child(2) input:checked) label:nth-child(2) { color: #fff; }
.pieniKytkin:has(label:nth-child(2) input:checked) label:nth-child(1) { color: #ececec; }

/* Sliderin sijainti ja väri valinnan mukaan */
.pieniKytkin:has(label:nth-child(1) input:checked) .pieniKytkinSlider {
	transform: translateX(0%);
	background: #ececec;
}
.pieniKytkin:has(label:nth-child(2) input:checked) {
	background: var(--oranssi) !important;
}
.pieniKytkin:has(label:nth-child(2) input:checked) .pieniKytkinSlider {
	transform: translateX(100%);
	background: #B35115;
}

/* Näppäimistökäyttö: näkyvä fokus */
.pieniKytkin>label > input[type="radio"]:focus-visible + .liukukytkin__teksti,
.pieniKytkin>label > input[type="radio"]:focus-visible {
	outline: none;
}
.pieniKytkin:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}


.pikahakulomake>input {
	margin: 0px !important;
}
.pikahaunEhdotukset>button:nth-child(n+6) {
	display: none;
}
.pikahaunEhdotukset {
	background: #444;
	position: absolute;
	padding: 5px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	display: none;
	position: absolute;
	width: 500px;
	background: white;
}
.pikahaunEhdotus {
	padding: 5px;
	cursor: pointer;
	font-size: 0.9em;
	max-height: 35px;
	overflow: hidden;
	box-sizing: border-box;
}
.pikahaunEhdotus>span {
	display: block;
	font-size: 0.8em;
	color: darkgray;
}
.pikahaunEhdotus:hover, .selected {
	background: lightgray;
}


/* ETUSIVU */

.uusinTiedote {
	margin-right: 15px;
}
iframe {
	min-height: 562px;

}
.se-component>figure {
	padding: 0 !important;
}
#tiedotelista .aika {
	color: var(--harmaa);
	font-size: 0.9em;
}


/* INFORUUTU */

#inforuutu #inforuudunSulkemispainike {
	border: 0 !important;
}
#inforuutu #inforuudunSulkemispainike>span {
	font-size: 26px;
	
}
.tiedotteet>div {
	border-radius: 8px;
	border: 1px solid var(--vaaleanharmaa);
	background: #FFF;
	margin-bottom: 24px;
	border: 1px solid #EAEAEA;
	padding-top: 16px;
}
.tiedotteet>div h2 {
	font-size: 1.2em;
	font-weight: 500;
	margin: 0 16px;
	border-left: 8px solid #F37121;
	margin-bottom: 8px;
	padding-left: 8px;
}
.tiedotteet>div .aika {
	padding: 0 16px;
	font-size: 0.8em;
	color: var(--tummanharmaa);
	margin-bottom: 16px;
}
.tiedotteet>div hr {
	margin-bottom: 8px;
}
.tiedotteet>div .teksti {
	padding: 0 16px;
}
.tiedotteet>div a {
	color: blue;
}
.tiedotteet>div a.merkitseLuetuksi, .tiedotteet>div .luettu {
	margin-top: 16px;
	background: var(--oranssi);
	color: #fff;
	width: 100%;
	display: block;
	text-align: center;
	text-decoration: none;
	border-radius: 0 0 8px 8px;
	padding: 5px;
	font-size: 0.8em;
}
.tiedotteet .tarkea {
	border-color: var(--oranssi);
}
.tiedotteet>div .luettu {
	background: var(--vaaleanharmaa);
	color: var(--tummanharmaa);
}





#etusivunIsoAlue .otsakerivi>div:nth-of-type(3),
#etusivunIsoAlue .otsakerivi>div:nth-of-type(4),
#etusivunIsoAlue .lisatietorivi>div:nth-of-type(1),
#etusivunIsoAlue .lisatietorivi>div:nth-of-type(2) {
	display: flex;
	align-items: center;
	gap: 5px;
}


#etusivunIsoAlue .tilaus {
	padding: 16px;
	border-top: 1px solid var(--vaaleanharmaa);
}
#etusivunIsoAlue .tilaus .otsakerivi {
	display: grid;
	grid-template-columns: 2fr 2fr 3fr 4fr 1fr;
	font-weight: 700;
	padding: 8px 0;
}
#etusivunIsoAlue .tilaus .lisatietorivi {
	display: grid;
	grid-template-columns: 4fr 8fr;
	font-weight: 700;
	padding: 0 0 8px 0;
	font-size: 0.9em;
}
#etusivunIsoAlue .tilaus .otsakerivi img,
#etusivunIsoAlue .tilaus .lisatietorivi img {
	width: 20px;
}
#etusivunIsoAlue .tilaus .henkilorivi {
	display: grid;
	grid-template-columns: 10fr 2fr;
	font-weight: 700;
	padding: 4px 0;
	color: var(--tummanharmaa);
	font-size: 0.9em;
}
#etusivunIsoAlue .tilaus .tuoterivi {
	display: grid;
	grid-template-columns: 6fr 3fr 1fr 2fr;
	font-weight: 400;
	padding: 4px 0;
	color: var(--tummanharmaa);
	font-size: 0.9em;
}
#etusivunIsoAlue .tilaus .toiminnot {
	padding: 10px 0;
	display: flex;
	gap: 10px;
	align-items: stretch;
	box-sizing: border-box;
}
#etusivunIsoAlue .tilaus .toiminnot > button {
	flex: 1 1 0;
	min-width: 0;         /* estää flex-lapsen sisällön aiheuttaman overflowin */
	padding: 5px;
	box-sizing: border-box;
	border: 0;
	background: var(--vaaleanharmaa);
	color: var(--tummanharmaa);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
}
#etusivunIsoAlue .tilaus .toiminnot > button:hover {
	background: var(--oranssi);
	color: #fff;	
}



/* JÄRJESTELMÄVIESTIT */

.jarjestelmaviesti {
	text-align: center;
    background: #f56600;
    position: fixed;
    width: 100vw;
	height: 50px;
	line-height: 50px;
    box-sizing: border-box;
	font-size: 1.1em;
	transition: all 0.5s;
	z-index: 500;
	left: 0px;
	bottom: -50px;
	color: #fff;	
}
.jarjestelmaviesti.naytolla {
	bottom: 0px;
}
.jarjestelmaviesti.korostettu, .jarjestelmaviesti.virhe {
	background-repeat: no-repeat;
	background-position: left 10px center;
	padding-left: 40px;
}



/* TILAUKSEN HYVÄKSYNTÄ / HYLKÄYS */

#hyvaksyntaHylkaystoiminnot input#toimintoTallennaMuutokset {
	background-image: url(../kuvat/ikonit/tallenna.svg);
}
#hyvaksyntaHylkaystoiminnot input, #hyvaksyntaHylkaystoiminnot select {
	background-image: url(../kuvat/ikonit/peukaloYlos.svg);
	background-repeat: no-repeat;
	background-position: left 10px center;
	padding-left: 40px;
	background-size: 20px;
	text-align: left;
	font-size: 1.2em;
	cursor: pointer;
	transition: all 0.5s;
}
#hyvaksyntaHylkaystoiminnot input:hover {
	background-color: lightgray;
}
#hyvaksyntaHylkaystoiminnot input#toimintoHylkaa {
	background-image: url(../kuvat/ikonit/peukaloAlas.svg);
}
#hyvaksyntaHylkaystoiminnot input#toimintoHyvaksy:hover {
	background-color: lightgreen;
}
#hyvaksyntaHylkaystoiminnot input#toimintoHylkaa:hover {
	background-color: pink;
}
#hyvaksyntaHylkaystoiminnot input#toimintoPeruuta {
	background-image: url(../kuvat/ikonit/nuoliVasemmalle.svg);
}


/* JOUKKOTOIMINNOT */
.joukkovalintapoisto:hover {
	border-color: red;
	background-image: url(../kuvat/ikonit/roskakori.svg);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
#kelluvaValikko {
	position: fixed;
	z-index: 2;
	transition: all 1s;
	height: 80px;
	bottom: -250px;
	margin-right: calc((100% - 1600px) / 2 + 10px);
	right: 0;
}
#kelluvaValikko.avattu {
	bottom: 25px;
}
#kelluvaValikko>div {
	background: #ececec;
	border: 1px solid #444;
	border-radius: 4px;
	color: #444;
	padding: 10px;
	max-width: 1000px;
	margin: auto;
	text-align: center;
	box-shadow: 1px 0px 20px -2px gray;
}
#kelluvaValikko>div>p {
	padding: 10px 0;
}
#kelluvaValikko a {
	display: inline-block;
	width: auto;
	text-decoration: none;
	padding: 5px 10px 5px 30px;
	background-image: url(../kuvat/ikonit/ratas.svg);
	background-position: left 10px center;
	background-repeat: no-repeat;
	background-size: 18px;
	border: 1px solid #444;
	border-radius: 4px;
	margin: 5px 5px;
	background-color: #ececec;
	color: #444;
	text-align: center;
	transition: all 0.3s;
}
#kelluvaValikko a#naytaJoukkovalinnat {
	background-image: url(../kuvat/ikonit/suurennuslasi.svg);
}
#kelluvaValikko a#luoPdf {
	background-image: url(../kuvat/ikonit/paperi.svg);
}
#kelluvaValikko a#tyhjennaValinnat {
	background-image: url(../kuvat/ikonit/roskakori.svg);
}
#kelluvaValikko a:hover {
	border-color: #000;
	color: #000;
	background-color: #fff;
}

#kelluvaListavalikko {
	position: sticky;
	bottom: 0;
	margin-top: 25px;
	padding: 10px;
	background: #fff;
	border-top: 1px solid #000;
}
#kelluvaListavalikko a {
	display: inline-block;
}
#kelluvaListavalikko select {
	height: 36px;
	font-size: 0.9em;
}

/* SIVUVALIKKO */

.sivuvalikollinen {
	display: grid;
	grid-template-columns: 250px auto;
	grid-gap: 25px;
	margin-top: 25px;
}
.sivuvalikollinen>div:first-of-type a {
	display: grid;
	padding: 10px;
	margin: 10px 0px;
	background: #ececec;
}
.sivuvalikollinen>div:first-of-type input, .sivuvalikollinen>div:first-of-type select, .sivuvalikollinen>div:first-of-type button {
	width: 100%;
}


/* KIRJAUTUMISLOMAKE */

#kirjautumislomake {
	background: #fff;
	margin: 10% auto;
	width: 500px;
	box-shadow: 0px 0px 10px 0px #444;
}
#kirjautumislomake label input {
	width: auto;
}
#kirjautumislomake #logoalue {
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px;
}
#kirjautumislomake #logoalue img {
	max-height: 50px;
}
#kirjautumislomake #sisaltoalue {
	padding: 50px;
}
#kirjautumislomake h1 {
	margin-bottom: 15px;
}
#kirjautumislomake label {
	display: block;
}
#kirjautumislomake label:has(input) {
	display: flex;
}
#kirjautumislomake label:has(input) input {
	width: 20px;
}
#kirjautumislomake #ktAlue button {
	display: none;
}

#kirjautumislomake .kirjautumistapa {
	
}
#kirjautumislomake main {
	min-height: 100px;
}
#kirjautumislomake #sisaltoalue {
	margin-bottom: 0;
}
#kirjautumislomake .kirjautumistapa label {
	margin-bottom: 15px;
}
#kirjautumislomake .kirjautumistapavalinta {
	box-shadow: none;
}
#kirjautumislomake footer {
	background: var(--tummanharmaa);
	border-radius: 0;
}
#kirjautumislomake #kertakirjautuminenSisalto p {
	padding: 10px 0;
	font-style: italic;
	color: #444;
	text-align: center;
}
#kirjautumislomake input {
	width: 100%;
	margin-bottom: 0px;
	padding: 10px;
	font-size: 1.2em;	
}
#kirjautumispainike {
	margin-top: 25px;
}
#kirjautumislomake a {
	color: #444;
	text-decoration: none;
}
#kirjautumislomake .ilmoitus {
	margin-top: 0;
}
#kirjautumislomake a:hover {
	text-decoration: underline;
}
#kirjautumislomake #kielivalinta {
	margin-top: 40px;
	border-radius: 6px;
	text-align: center;
}
#kirjautumislomake #kielivalinta>span {
	font-size: 20px;
	margin: 10px;
}
#kirjautumislomake .kielet {
	display: none;
	padding: 10px;
	align-items: center;
}
#kirjautumislomake a {
	display: inline-block;
}
#kirjautumislomake #kielivalinta a {
	margin: 5px 10px !important;
}
#kirjautumislomake #kielivalinta:hover {
	background: var(--vaaleanharmaa);
}
#kirjautumislomake #kielivalinta:hover .kielet {
	display: block;
}
#kirjautumislomake #kielivalinta span {
	font-size: 20px;
	box-shadow: 0 0 4px 0 var(--harmaa);
	transition: all 0.2s;
}
#kirjautumislomake a.kielivalinta {
	text-align: center;
}
a.kielivalinta:hover span {
	box-shadow: 0 0 6px 0 var(--tummanharmaa) !important;
}


/* LISTAT */

table.lista {
	width: 100%;
	margin-top: 15px;
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;   
}
table.lista.valinnat {
	cursor: pointer;
}
table.lista thead tr:last-of-type {
	box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.15);
}
table.lista thead th {
	top: 0;
	padding: 10px;
	font-family: Rubik, sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	text-align: left;
}
table.lista thead th img.info {
	height: 20px;
	margin-left: 6px;
}

table.lista td {
	padding: 10px;
}
table.lista tbody td, table.lista tfoot td {
	border-top: 1px solid lightgray;
	white-space: nowrap;
}
table.lista tr.alarivi td {
	border: 0;
	padding: 5px;
}
table.lista.valinnat tbody tr:hover {
	background: var(--oranssi);
	color: #fff;
}
table.lista tbody tr:nth-child(even) {
	_background: #f7f7f7;
}
table.lista td.kuva {
	font-size: 0px;
}
table.lista td.kuva img {
	max-width: 100%;
	max-height: 60px;
}
table.tasausYlos td {
	vertical-align: top !important;
}
table.lista tfoot tr:first-of-type td, table.lista tfoot tr:first-of-type th {
	border-top: 1px solid #000;
}
table.lista tfoot th {
	font-weight: 400;
}
table.lista thead th.listajarjestys {
	cursor: pointer;
}
table.lista thead th.listajarjestys img {
	display: none;
	height: 14px;
	vertical-align: middle;
	margin-left: 5px;
}
table.lista thead th.listajarjestys.valittu img, table.lista thead th.listajarjestys:hover img {
	display: inline-block;
}
table.lista tr.suodatinrivi input, table.lista tr.suodatinrivi select {
	padding: 5px;
	color: #000;
	background: #ececec;
	border: 0;
	font-style: normal;
	font-weight: 700;
	cursor: pointer;
	font-style: italic;
	font-weight: 400;
}
table.lista tr.suodatinrivi input::placeholder {
	color: gray;
	font-style: italic;
	font-weight: 400;
}
table.lista input[type=checkbox], table.lista input[type=radio] {
	height: 20px;
	width: 20px;
	cursor: pointer;
	transform: scale(1);
}
table.lista a {
	color: #000;
	text-decoration: underline;
}
table.lista a:hover {
	text-decoration: none;
}
.pieniListakuva {
	max-width: 60px; 
	max-height: 60px;
}

/* HALLINTAVALIKKO */

nav#hallintavalikko {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 25px;
	margin-top: 25px;
}
nav#hallintavalikko a {
	background-color: #ececec;
	background-image: url(../kuvat/ikonit/ratas.svg);
	background-repeat: no-repeat;
	background-position: left 25px center;
	background-size: 25px auto;
	padding: 25px 25px 25px 65px;
	border-radius: 4px;
	text-decoration: none;
	color: #444;
	font-weight: 700;
}
nav#hallintavalikko a:hover {
	background-color: #f1f1f1;
	color: #000;
}
a.paluu {
	text-decoration: none;
	color: #000;
	background-image: url(../kuvat/ikonit/paluu.svg);
	background-repeat: no-repeat;
	background-size: 25px auto;
	display: block;
	padding-left: 30px;
	height: 25px;
	line-height: 25px;
}
a.paluu:hover {
	text-decoration: underline;
}


/* LOMAKKEET */

.lomake label {
	display: block;
	margin-bottom: 5px;
	color: var(--tumma2);
	font-size: 0.9em;
}
.lomake label:has(input) {
	display: flex;
}
.lomake label.disabled:has(input) {
	opacity: 0.4;
	pointer-events: none;
}
.lomake label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
}
.lomake input, .lomake select, .lomake button:not(.painike), .lomake textarea {
	display: inline-block;
    vertical-align: top;
    background-color: #fff;
    padding: 5px;
	color: var(--tumma);
    border: 1px solid var(--vaaleanharmaa);
    border-radius: 4px;
    min-height: 45px;
    overflow: hidden;
	
	font-size: 1em;
}

.lomake input:disabled, .lomake select:disabled, .lomake button:not(.painike):disabled, .lomake textarea:disabled,
 .lomake input.kuinDisabled, .lomake select.kuinDisabled, .lomake button:not(.painike).kuinDisabled, .lomake textarea.kuinDisabled {
	background: var(--vaalea);
	color: var(--harmaa);
	pointer-events: none;
}


input.eiMuokattavissa {
	border: 0;
	background: transparent;
	box-shadow: none;
	padding-left: 0;
}
.lomake textarea {
	height: 120px;
}
.lomake table input, .lomake table select, .lomake table button {
	margin-bottom: 0px;
}

.lomake input.lukittu, .lomake select.lukittu {
	background-color: #fff;
	padding-left: 0px;
	border: 0;
	box-shadow: none;
}
.lomakenappi, .lomake .lomakenappi {
	width: auto;
	font-size: 1.0em;
	font-weight: 500;
	padding: 8px 23px;
	background: #000;
	border: 2px solid #000;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s;
	text-decoration: none;
	box-shadow: none;
	background-position: left 15px center;
	background-repeat: no-repeat;
}
.lomakenappi.toissijainen, .lomake .lomakenappi.toissijainen {
	border-color: gray;
	background-color: transparent;
	color: gray;
}
.lomakenappi:hover, .lomake .lomakenappi:hover {
	border-color: #f35e19;
	background-color: #f35e19;
	color: #fff;
}
.lomakenappi:nth-of-type(n+2), .lomake .lomakenappi:nth-of-type(n+2) {
	margin-left: 15px;
}
.lomakenappi.poisto, .lomake .lomakenappi.poisto {
	background-color: darkred;
	border-color: darkred;
	background-image: url(../kuvat/ikonit/roskakori_valkoinen.svg);
	padding-left: 45px;
}
.lomakenappi.poisto:hover, .lomake .lomakenappi.poisto:hover {
	background-color: red;
	border-color: red;
}


/* TUOTTEET-SIVU */

.tuotehakuvalinta {
	max-height: 0;
	overflow: hidden;
}
.tuotehakuvalinta.valittu {
	max-height: 80px;
}

#tuotehakualue_tuoteryhmat {
	margin-top: 25px;
}
#tuotehakualue_tuoteryhmat h4 {
	color: var(--tumma);
	margin: 25px 0 10px 0;
}
#tuotehakualue_tuoteryhmat button.paaryhma {
	color: #000;
	height: 37px !important;
	min-height: 37px !important;
	line-height: 27px !important;
	padding: 5px 0 5px 10px !important;
	width: 100%;
	display: grid;
	grid-template-columns: auto 25px;
	text-align: left;
	transition: all 0.5s;
	border: 0 !important;
}
#tuotehakualue_tuoteryhmat button.paaryhma:hover {
	background: var(--vaalea) !important;
}
#tuotehakualue_tuoteryhmat .tuoteryhmat {
	margin-left: 10px;
	border-left: 2px solid var(--oranssi);
	padding-left: 10px;
	max-height: 0;
	overflow: hidden;
}
#tuotehakualue_tuoteryhmat .paaryhmaalue.valittu .tuoteryhmat {
	max-height: 1000px;
}
#tuotehakualue_tuoteryhmat .paaryhmaalue.valittu .paaryhma>span,
#tuotehakualue_tuoteryhmat .tuoteryhmat label:has(input:checked) {
	color: var(--oranssi);
	font-weight: 700;
}
#tuotehakualue_tuoteryhmat .paaryhmaalue.tuoteryhmia_valittu .paaryhma>span {
	color: #000;
	font-weight: 700;
}
#tuotehakualue_tuoteryhmat .paaryhmaalue.valittu .paaryhma>span::after,
#tuotehakualue_tuoteryhmat .tuoteryhmat label:has(input:checked)::after {
	content: "\2713"; /* ✓ */
	margin-left: 10px;
}
#tuotehakualue_tuoteryhmat .paaryhmaalue.tuoteryhmia_valittu .paaryhma>span::after {
content: "";
}
#tuotehakualue_tuoteryhmat .tuoteryhmat label {
	height: 37px !important;
	min-height: 37px !important;
	line-height: 27px !important;
	padding: 5px 0 5px 10px !important;	
	font-size: 1em !important;
	font-family: Nunito, sans-serif;
}
#tuotehakualue_tuoteryhmat .tuoteryhmat label:hover {
	background: var(--vaalea) !important;
	cursor: pointer;
}
#tuotehakualue_tuoteryhmat .tuoteryhmat input {
	position: absolute;
	left: -1000px;
}

.suodatinpaneeli {
	width: 400px;
	position: fixed;
	z-index: 60;
	background: #fff;
	padding: 24px;
	min-height: calc(100dvh);
	border-left: 5px solid var(--oranssi);
	right: -400px;
	top: 0;
	box-sizing: border-box;
}
#sivustobody.suodattimet .suodatinpaneeli {
	right: calc(50vw - 804px);
}
.suodatinpaneeli .otsake {
	margin-bottom: 16px; 
	display: grid; 
	grid-template-columns: auto 25px;
}
.suodatinpaneeli .painikkeet {
	position: absolute;
	bottom: 25px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
	width: 347px;
}
.suodatinpaneeli .painikkeet button {
	width: 100%;
	margin: 0 !important;
}
.suodatinpaneeli label {
	font-size: 0.9em;
}
.suodatinpaneeli input {
	margin-bottom: 15px;
}
.suodatinpaneeli>div>div {
	margin-bottom: 15px;
}


/* OHJEPANEELI */

#ohjepaneeli {
	width: 400px;
	position: fixed;
	z-index: 60;
	background: #fff;
	padding: 24px;
	min-height: calc(100vh);
	border-left: 5px solid var(--oranssi);
	right: -400px;
	top: 0;
	transition: all 0.5s;
}
#ohjepaneeli .otsake {
	margin-bottom: 16px; 
	display: grid; 
	grid-template-columns: auto 25px;
}
#sivustobody.ohjepaneeli #ohjepaneeli {
	right: calc(50vw - 804px);
}
#ohjepaneeli .painikkeet {
	position: absolute;
	bottom: 25px;
	display: block;
	width: 347px;
}
#ohjepaneeli .painikkeet button {
	width: 100%;
	margin: 0 !important;
}


#tuotelistanValinnat, #kayttajalistanValinnat {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-bottom: 25px;
}
#tuotelistanValinnat>div:last-of-type, #kayttajalistanValinnat>div:last-of-type {
	text-align: right;
	justify-content: right;
}
#tuotelistanValinnat .sisaltotapla, #kayttajalistanValinnat .sisaltotapla {
	display: none;
}


.tuotealuevalintaKytkin {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 0 !important;
	border-radius: 20px;
	background: #fff !important;
	user-select: none;
	margin: 0;
	width: 100%;
	height: 48px;
}

/* Valintojen perusulkoasu */
.tuotealuevalintaKytkin>label {
	display: block !important;
	position: relative;
	z-index: 1;
	text-align: center;
	cursor: pointer;
	border-radius: 8px;
	padding: 0;
	color: #000;
	margin-bottom: 0 !important;
	line-height: 48px;
}

/* Piilotettu mutta fokusoitava radio */
.tuotealuevalintaKytkin>label > input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Liukuva taustaelementti */
.liukukytkin__slider {
	position: absolute;
	width: 50%;
	height: 48px;
	border-radius: 8px;
	transform: translateX(0%);
	transition: transform 160ms ease, background-color 160ms ease;
	box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
}
.liukukytkin__teksti {
	line-height: 25px;
	display: inline-block;
	padding: 5px 0;
	border: 1px solid var(--vaaleinharmaa);
	width: 100%;
	box-shadow: 0 0 10px 0 var(--Effects-inner-glow-light, #EAEAEA) inset;
	border-radius: 6px;
}

/* Tekstivärit valinnan mukaan */
.tuotealuevalintaKytkin:has(label:nth-child(1) input:checked) label:nth-child(1) { 
	color: #fff; 
}
.tuotealuevalintaKytkin:has(label:nth-child(1) input:checked) label:nth-child(1) .liukukytkin__teksti {
	border: 0;
	width: 90%;
	box-shadow: none;
	border-radius: 0;
	border-right: 2px solid #fff;
	padding: 0;
	line-height: 15px;
	font-weight: 500;
}
.tuotealuevalintaKytkin:has(label:nth-child(1) input:checked) label:nth-child(2) { color: #707070; }
.tuotealuevalintaKytkin:has(label:nth-child(1) input:checked) label:nth-child(2) .liukukytkin__teksti {
	border-radius: 0 6px 6px 0;
}

.tuotealuevalintaKytkin:has(label:nth-child(2) input:checked) label:nth-child(2) { color: #fff; }
.tuotealuevalintaKytkin:has(label:nth-child(2) input:checked) label:nth-child(2) .liukukytkin__teksti {
	border: 0;
	width: 90%;
	box-shadow: none;
	border-radius: 0;
	border-left: 2px solid #fff;
	padding: 0;
	line-height: 15px;
	font-weight: 500;
}
.tuotealuevalintaKytkin:has(label:nth-child(2) input:checked) label:nth-child(1) { color: #707070; }
.tuotealuevalintaKytkin:has(label:nth-child(2) input:checked) label:nth-child(1) .liukukytkin__teksti {
	border-radius: 6px 0 0 6px;
}

/* Sliderin sijainti ja väri valinnan mukaan */
.tuotealuevalintaKytkin:has(label:nth-child(1) input:checked) .liukukytkin__slider {
  transform: translateX(0%);
  background: #f35e19;
}
.tuotealuevalintaKytkin:has(label:nth-child(2) input:checked) .liukukytkin__slider {
  transform: translateX(100%);
  background: #f35e19;
}

/* Näppäimistökäyttö: näkyvä fokus */
.tuotealuevalintaKytkin>label > input[type="radio"]:focus-visible + .liukukytkin__teksti,
.tuotealuevalintaKytkin>label > input[type="radio"]:focus-visible {
	outline: none;
}
.tuotealuevalintaKytkin:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}


#tuotehakulinkki, #tuotehakuperuutuslinkki {
	margin-left: 90px;
	padding: 10px;
}

#hakusana {
	background-image: url(../kuvat/ikonit/suurennuslasi.svg);
	background-repeat: no-repeat;
	background-position: left 5px center;
	background-size: 20px;
	padding-left: 30px;
	
}
.lomake button.paaryhmavalinta {
	transition: all 0.3s;
	width: 100%;
	margin-bottom: 2px;
}
.lomake button.paaryhmavalinta:hover {
	background: #ececec;
}
#joukkovalintapalkki {
	display: flex;
	align-items: center;
}
#joukkovalintateksti {
	margin-left: 15px;
}
#joukkovalintalkm {
	font-weight: 700;
}
button.suodatinotsikko {
	text-align: left;
	width: 100%;
	font-weight: 700;
	background: #fff;
	border: 0;
	padding-left: 15px;
}
button.suodatinotsikko.avattu {
	border-radius: var(--Container-corners, 8px);
	background: var(--Container-Fill-100, #FFF);
	box-shadow: 0 2.5px 5px 0 var(--Container-Fill-200, #EAEAEA), 0 0 10px 0 var(--Container-Fill-200, #EAEAEA) inset;
}
button.avaaSuodatin {
	position: relative;
}
button.avaaSuodatin::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 24px;
  height: 24px;
  background: url('../kuvat/ikonit/plus.svg') no-repeat center/contain;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}
button.avaaSuodatin.avattu::after {
  transform: translateY(-50%) rotate(45deg);
  
}

.suodatinvalinnat {
	width: 100%;
	padding: 0px 10px;
	margin-top: -15px;
	z-index: 1;
	max-height: 0px;
	overflow-y: hidden;
	transition: max-height 0.5s;
}
.suodatinvalinnat.avattu {
	padding: 10px;
	max-height: 250px;
	overflow-y: auto;
}
.suodatinvalinnat label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 5px 5px 5px; /* varataan tila ikonille */
    position: relative;
    font-weight: normal;
	transition: all 0.4s;
}
.suodatinvalinnat label::before {
    content: "";
    position: absolute;
    left: 5px;
    width: 16px;
    height: 16px;
    background: url(../kuvat/ikonit/valittu_oranssi.svg?v=2025091101) no-repeat center center;
    background-size: contain;
    
    opacity: 0;
    transform: translateX(-10px); /* lähtee vasemmalta */
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.suodatinvalinnat label:has(input[type="checkbox"]:checked)::before {
    opacity: 1;
    transform: translateX(0); /* liukuu paikalleen */
}

.suodatinvalinnat label:has(input[type="checkbox"]:checked) {
    font-weight: bold;
	padding: 5px 5px 5px 25px; /* varataan tila ikonille */
}
.suodatinvalinnat input {
	position: absolute;
	left: -10000px;
	top: -10000px;
}



#tuotelistaotsikko {
	display: block;
}
#tuotelistaotsikko h2 {
	border: 0;
	padding: 0;
}

#pienetTuotekortit {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 25px;
	margin-top: 25px;
}
#pienetTuotekortit>a {
	display: grid;
	grid-template-rows: 315px auto;
	align-items: start;
	background: #fff;
	border: 1px solid var(--vaaleanharmaa);
	border-radius: 10px;
	text-decoration: none;
	color: #444;
	transition: all 0.2s;
	overflow: hidden;
	margin: 0 !important;
}
#pienetTuotekortit>a.omatuote {
	box-shadow: 0 2.5px 5px 0 var(--Container-Fill-200, #EAEAEA), 0 0 2.5px 2.5px var(--Common-Brand, #F37121) inset;
}

#pienetTuotekortit>a:hover {
	border-color: #F37121;
}
#pienetTuotekortit>a figure {
	width: 100%;
	height: 315px;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#pienetTuotekortit .omavastuumerkki {
	background: #005eb8; 
	border-radius: 50%; 
	display: inline-block; 
	width: 12px; 
	height: 12px;
	vertical-align: middle;
	float: left;
	margin-top: 4px;
	margin-right: 5px;
}
#pienetTuotekortit>a img {
	max-width: 100%;
	max-height: 100%;
}
#pienetTuotekortit>a>div:first-of-type {
	padding: 20px 25px 0px 25px;
	border-top: 1px solid var(--vaaleanharmaa);
}
#pienetTuotekortit>a>div:last-of-type {
	padding: 5px 25px 55px 25px;
	
}
#pienetTuotekortit>a input.joukkovalinta {
	width: 25px;
	height: 25px;
	position: absolute;
	top: 10px;
	left: 10px;
	cursor: pointer;
	accent-color: var(--oranssi);
	border: 1px solid lightgray;
}
input[type="checkbox"]:checked {
	background-color: #F37121;
}
.pieniTuotekortti {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.pieniTuotekortti.nayta {
	opacity: 1;
	transform: translateY(0);
}
#pienetTuotekortit>a div.suodatinosumat {
	padding: 0;
	margin: 5px 0;
}
#pienetTuotekortit>a div.suodatinosumat span {
	font-size: 0.8em;
	display: inline-block;
	background: #ececec;
	padding: 2px 7px;
	border-radius: 10px;
	color: gray;
	margin: 0px 5px 5px 0px;
}
#pienetTuotekortit .ot {
	background: var(--oranssi);
	position: absolute;
	right: 0;
	top: 0;
	padding: 8px 10px;
	color: #fff;
	border-radius: 0 6px 0 6px;
	font-weight: 500;
}
#pienetTuotekortit .tm {
	font-weight: 500;
	color: var(--oranssi);
	font-size: 0.9em;
	margin-bottom: 2px;
	font-family: Rubik, sans-serif;
}
#pienetTuotekortit .tn {
	font-weight: 500;
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: break-word;
	margin-bottom: 2px;
	line-height: 1.2;
	font-family: Rubik, sans-serif;
}
#pienetTuotekortit .omv_hi_alv {
	position: absolute;
	bottom: 20px;
	right: 25px;
	display: flex;
	align-items: center;

}
#pienetTuotekortit .omv {
	margin-right: 5px;
	color: var(--omavastuu);
}
#pienetTuotekortit .hi {
	font-size: 0.9em;
	color: #000;
	

	
	font-weight: 700;
}
#pienetTuotekortit .alv {
	margin-left: 5px;
	font-size: 0.8em;
}
#pienetTuotekortit .ko_va {
	display: grid;
	grid-template-columns: 2fr 1fr;
}
#pienetTuotekortit .ko {
	font-size: 0.9em;
	color: var(--tummanharmaa);
}
#pienetTuotekortit .va {
	font-size: 0.9em;
	background: var(--vaaleaoranssi);
	border-radius: 50px;
	display: inline-block;
	color: var(--oranssi);
	text-align: center;
}
#pienetTuotekortit .or {
	list-style-type: none;
	margin: 10px 0;
}
#pienetTuotekortit .or li {
	list-style-type: none;
	color: var(--tummanharmaa);
	display: inline-grid;
	grid-template-columns: 25px auto;
	grid-gap: 3px;
	margin-right: 15px;
	font-size: 0.9em;
	line-height: 24px;
}
#pienetTuotekortit .or li>span:first-of-type {
	font-size: 24px;
}


/* PROSESSIT */

.prosessinVaiheet {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;

}

.prosessinVaiheet li {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 30px;
    font-size: 14px;
	height: 90px;
}

.prosessinVaiheet li:not(:first-of-type)::before {
	background: var(--vaaleinharmaa);
	display: block;
	height: 2px;
	width: 50%;
	content: "";
	position: absolute;
	bottom: 8px;
}
.prosessinVaiheet li:not(:last-of-type)::after {
	background: var(--vaaleinharmaa);
	display: block;
	height: 2px;
	width: 50%;
	content: "";
	position: absolute;
	bottom: 8px;
	right: 0;
}

/* numeroympyrä */
.prosessinVaiheet .numero {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    background: #fff;
    position: relative;
    z-index: 1;
    color: #000;
	font-weight: 700;
	font-size: 1.2em;
}
/* teksti */
.prosessinVaiheet .teksti {
	font-weight: 700;
	background: #fff;
	position: absolute;
	z-index: 1;
	padding: 0 15px;
	left: 50%;
	bottom: 0;
transform: translateX(-50%);
white-space: nowrap;
}
/* aktiivinen */
.prosessinVaiheet li.nykyinen .numero {
    border-color: var(--oranssi);
    box-shadow: 0 0 0 5px #fde3d3;
}

/* mennyt */
.prosessinVaiheet li.mennyt .numero {
    background: var(--oranssi);
	border-color: var(--oranssi);
	color: #fff;
}



/* INFORUUTU */
#sivuharso {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 50;
	transition: 0.2s;
	opacity: 0;
    pointer-events: none;
}
#sivustobody.inforuutu #sivuharso,
#sivustobody.suodattimet #sivuharso {
	opacity: 1;
	pointer-events: auto;
}
#inforuutukehys {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.5s;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 100;
}
#sivustobody.inforuutu #inforuutukehys {
  opacity: 1;
  pointer-events: auto;
}
#inforuutu {
	width: 1000px;
	max-height: 100vh;
	background: #fff;
	border-radius: 12px;
	transform: scale(0.9);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;	
	overflow-y: auto;
}
#inforuutu.pieni {
	width: 600px;
}
#sivustobody.inforuutu #inforuutu {
  transform: scale(1);
  opacity: 1;
}
#inforuutu h1 {
	font-size: 1.4em;
}
#inforuutu h2 {
	font-size: 1.2em;
	padding-left: 0;
	border: 0;
}
#inforuudunOtsake {
	display: grid;
	grid-template-columns: auto 150px;
}
#inforuutu #kaaviokehys {
	width: 100%;
    height: 500px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#inforuutu #kaavio {
	width: 100% !important;
	height: 500px !important;
}
#inforuutu #kaavio.tyyppi-2 {
	width: 500px !important;
	height: 500px !important;
}

#inforuutu header {
	display: block;
	box-sizing: border-box;
	
	padding: 0;
	margin: 0 0 15px 0;
	
	background: #fff;
	
	height: 60px;
	
}
#inforuutu header h1 {
	font-size: 16pt;
}
#inforuutu header h2 {
	font-size: 12pt;
}
#inforuutu header button {
	margin-top: 5px;
	float: right;
	height: 40px;
	width: 40px;
	cursor: pointer;
	background-color: #fff;
	background-image: url(../kuvat/ikonit/ruksi.svg);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center center;
	border: 0px;
}



/* KOLMIVAIHEKYTKIN */

/* Perustyylit */
.kolmi-kytkin {
  --tausta: #0f172a;
  --reuna: #1f2937;
  --korostus: #7c3aed;
  --korostus-2: #22d3ee;
  --kortti: #111827;
  --kulma: 16px;
  --nopeus: .28s;
  display: grid;
  gap: 1rem;
  color: var(--teksti);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Raidat (itse kytkin) */
.kytkin-raidat {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #fff;
	border: 1px solid #000;
	border-radius: var(--kulma);
	overflow: hidden;
	isolation: isolate;
	width: 70px;
	height: 25px;
}

/* “Pilleri”, joka liukuu valitun kohdalle */
.korostus {
  position: absolute;
  inset: 3px;
  width: calc(33.333% - 2px);
  border-radius: calc(var(--kulma) - 6px);
  background: #444;
  backdrop-filter: blur(2px);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--nopeus) ease;
  pointer-events: none;
}

/* Yksittäinen vaihtoehto */
.vaihtoehto {
  position: relative;
  display: grid;
  place-items: center;
  padding: .9rem .5rem;
  padding: 0;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 !important;
}

/* Piilotetaan natiivi radio, pidetään silti saavutettavana */
.vaihtoehto-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Teksti */
.vaihtoehto-teksti {
  position: relative;
  z-index: 1;
  transition: transform var(--nopeus) ease, opacity var(--nopeus) ease;
  opacity: .85;
}

/* Hover & focus -fiilis */
.vaihtoehto:hover .vaihtoehto-teksti { opacity: 1 }
.vaihtoehto-input:focus-visible + .vaihtoehto-teksti {
  outline: 2px solid var(--korostus-2);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Valitun tilan värisävy tekstiin (pillerin päällä kontrastia) */
.kolmi-kytkin:has(.vaihtoehto:nth-child(1) .vaihtoehto-input:checked) .vaihtoehto:nth-child(1) .vaihtoehto-teksti,
.kolmi-kytkin:has(.vaihtoehto:nth-child(2) .vaihtoehto-input:checked) .vaihtoehto:nth-child(2) .vaihtoehto-teksti,
.kolmi-kytkin:has(.vaihtoehto:nth-child(3) .vaihtoehto-input:checked) .vaihtoehto:nth-child(3) .vaihtoehto-teksti {
  color: white;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Korostuspillerin sijainti radiovalinnan mukaan */
.kolmi-kytkin:has(.vaihtoehto:nth-child(1) .vaihtoehto-input:checked) .korostus { --i: 0 }
.kolmi-kytkin:has(.vaihtoehto:nth-child(2) .vaihtoehto-input:checked) .korostus { --i: 1 }
.kolmi-kytkin:has(.vaihtoehto:nth-child(3) .vaihtoehto-input:checked) .korostus { --i: 2 }

/* Sisältöalue valitulle */
.kytkinsisalto { display: none; }
.kytkinsisalto .otsikko {
	margin: 0 0 .25rem 0;
	font-size: 1.05rem;
}
.kytkinsisalto .selite {
	margin: 0;
	line-height: 1.5;
}

/* Näytä vain valitun vaihtoehdon sisältö */
.kolmi-kytkin:has(.vaihtoehto:nth-child(1) .vaihtoehto-input:checked) .kytkinsisalto--0 { display: block; }
.kolmi-kytkin:has(.vaihtoehto:nth-child(2) .vaihtoehto-input:checked) .kytkinsisalto--1  { display: block; }
.kolmi-kytkin:has(.vaihtoehto:nth-child(3) .vaihtoehto-input:checked) .kytkinsisalto--2   { display: block; }


/* TOOLTIP */

.tooltip-box {
	position: absolute;
	width: 250px;
	padding: .8rem;
	background: #111827;
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0,0,0,.35);
	font-size: .9rem;
	line-height: 1.4;
	z-index: 9999;
	display: none;
}
.tooltip-trigger {
	cursor: pointer;
}
.tooltip-trigger.material-symbols-outlined {
	font-size: 20px !important;
}


/* CHOICES.JS */
.choices {
	margin: 0;
}
.choices__inner {
	font-size: 1em;
	padding: 5px 5px 0 5px;
	min-height: 36px;
	background: #fff;
	border-radius: 6px;
}
.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
	background-image: url(../kuvat/ikonit/choices_ruksi.svg) !important;
	background-repeat: no-repeat;
	background-color: transparent;
	padding: 0 !important;
	background-size: 16px !important;
	border: 0 !important;
	width: 22px !important;
	min-height: 5px !important;
	box-shadow: none;
	margin-left: 5px;
}
.choices__input {
	margin-bottom: 5px !important;
	min-height: 15px !important;
	height: 25px !important;
	line-height: 15px !important;
	padding: 0px 5px !important;
	border: 0 !important;
}
.choices__list--multiple .choices__item {
	background-color: var(--vaaleanharmaa);
	border-color: var(--vaaleanharmaa);
	color: var(--tummanharmaa);
	font-size: 0.9em;
	padding-top: 2px;
	padding-bottom: 2px;
}

.choices .painatusSelectValinta, .choices .painatusSelectValittu {
	display: grid;
	grid-template-columns: 60px auto;
	grid-gap: 5px;
}
.choices .painatusSelectValittu {
	padding: 0;
}
.choices .painatusSelectValinta>div:first-of-type{
	width: 50px;
	height: 50px;
	margin: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.choices .painatusSelectValittu>div:first-of-type {
	width: 50px;
	height: 50px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;	
}
.choices .painatusSelectValinta img, .choices .painatusSelectValittu img {
	max-width: 50px; 
	max-height: 50px; 
}
.choices .painatusSelectValittu {
	font-size: 1.1em;
}
.choices .painatusSelectValittu .nimi {
	display: inline-block;
	margin-top: 5px;
}
.choices .painatusSelectValinta>div:last-of-type {
	margin-top: 5px;
}



/* HIERARKKISET TAULUKOT */

.hierarkiaTaso2, .hierarkiaTaso3 {
	display: none;
}
.hierarkia .nakyva {
	display: table-row;
}
.hierarkia a {
	color: #000;
	text-decoration: none;
}
.hierarkia a:hover {
	text-decoration: underline;
}

.hierarkia .hierarkiaAvaus {
	cursor: pointer;
}
.hierarkia tbody tr:hover {
	background-color: var(--vaalea);
}
.hierarkia .hierarkiaTaso1 td {
	font-weight: 700;
}
.hierarkia .hierarkiaTaso2 td:first-of-type,
.hierarkia .hierarkiaTaso3 td:first-of-type {
	border: 0;
}
.hierarkia .hierarkiaTaso3 td:nth-child(2) {
	border: 0;
}
.hierarkia .hierarkiaTaso3 td {
	font-style: italic;
	font-size: 0.9em;
}
.avausnuoli {
    display: flex;
	height: 50px;
	align-items: center;
	justify-content: center;
}

.avausnuoli span {
    margin: auto 0;			/* pystysuuntainen keskitys */
	transition: all 0.3s;
}

.avattu .avausnuoli span, .avattu.avausnuoli span {
	transform: rotate(90deg);
    transform-origin: center;
}
.hierarkia .hierarkiaTaso2 td:first-of-type,
.hierarkia .hierarkiaTaso3 td:first-of-type,
 {
	border-right: orange 1px solid;
	background: orange;
}
.hierarkia .alakohdeYhteensa {
	font-style: italic;
	font-weight: 600;
	color: var(--tumma);
}
.hierarkia .alakohdeYhteensa td:nth-of-type(2) {
	text-align: right;
	padding: 0;
}
.hierarkia img {
	cursor: pointer;
}
.hierarkia tfoot td {
	font-weight: 700;
}
.hierarkia .ryhmittely {
    background:
        linear-gradient(
            to right,
            transparent calc(50% - 2px),
            var(--oranssi) calc(50% - 2px),
            var(--oranssi) calc(50% + 2px),
            transparent calc(50% + 2px)
        );
}

}

/* PIKA-AIKAVÄLIT */
#pikaAikavalit a {
	font-size: 0.8em;
	background: #ececec;
	padding: 2px 5px;
	border-radius: 5px;
	text-decoration: none;
	color: #444;
	margin-right: 5px;
}


/* VALINTAPANEELI */

.listatoiminnot a, #avaaValintapaneeli {
	display: inline-block;
	border: 1px solid gray;
	background-color: #ececec;
	border-radius: 10px;
	height: 40px;
	padding: 0px 25px 0px 40px;
	line-height: 40px;
	background-image: url(../kuvat/ikonit/suodatin.svg);
	background-repeat: no-repeat;
	background-position: left 10px center;
	color: #000;
	text-decoration: none;
	float: right;
}

#avaaValintapaneeli.pieniNappi {
	border-radius: 0;
	padding: 0;
	width: 40px;
	background-position: center center;
}
#avaaValintapaneeli.haku {
	background-image: url(../kuvat/ikonit/suurennuslasi.svg);
}
#valintapaneeli {
	position: sticky;
	top: 0px;
	height: 300px;
	width: 100%;
	min-height: 100px;
	margin: 0px;
	border-radius: 10px 0 0 10px;
	transition: all 0.5s;
}
#valintapaneeli>section:first-of-type {
	border-radius: 10px 0 0 0;
}
#valintapaneeli>div {
	padding: 16px;	
	border-radius: 10px;
	top: 0;
	background: #fff;
	z-index: 10;
}
.valintapaneeli main {
	display: grid;
	grid-template-columns: 360px auto;
	grid-template-rows: 105px auto;
	grid-gap: 0px;
}
main.valintapaneeli:not(.valintapaneeliAuki) #valintapaneeli .listalinkki {
	background-position: right -1000px;
}
main.valintapaneeli:not(.valintapaneeliAuki) .naytaKunValintapaneeliAuki {
	display: none;
}
main.valintapaneeli.valintapaneeliAuki .piilotaKunValintapaneeliAuki {
	display: none;
}
#valintapaneeli .listalinkki span {
	display: none;
}
main.valintapaneeli.valintapaneeliAuki #valintapaneeli .listalinkki span {
	display: block;
}



/* ISO TUOTEKORTTI JA TUOTEASETUKSET */

/* Tuotekortin ja tuoteasetusten yleiset swiper-asetukset */

#isoTuotekortti .swiper-thumbs .swiper-wrapper {
	justify-content: center;
}
#isoTuotekortti .swiper-slide, #tuoteasetukset .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}
#isoTuotekortti .swiper-thumbs .swiper-slide {
	cursor: pointer;
}
#isoTuotekortti .swiper-pagination-bullet-active, #tuoteasetukset .swiper-pagination-bullet-active {
	background: var(--oranssi);
}
#isoTuotekortti .swiper-slide img, #tuoteasetukset .swiper-slide img {
	max-width: 100%;
	max-height: 100%;
}
#isoTuotekortti .thumb-slider .swiper-slide {
	text-align: center;
}
#isoTuotekortti .thumb-slider .swiper-slide img {
	max-height: 80px;
	max-width: 80px;
	height: auto;
	width: auto;
	object-fit: initial;
}
#isoTuotekortti .thumb-slider .swiper-wrapper, #tuoteasetukset .thumb-slider .swiper-wrapper {
	justify-content: center;
}
#isoTuotekortti .thumb-slider .swiper-slide, #tuoteasetukset .thumb-slider .swiper-slide {
	width: auto;
	flex-shrink: 0;
}
#isoTuotekortti .swiper-button-next:after, #isoTuotekortti .swiper-button-prev:after,
#tuoteasetukset .swiper-button-next:after, #tuotteenAsetukset .swiper-button-prev:after {
	color: var(--oranssi);
	font-size: 30px;
}

#isoTuotekortti #kuvienVarinimiAlue {
	position: absolute;
	top: 455px;
	left: 00px;
	z-index: 10;
	width: 100%;
	text-align: center;
}
#isoTuotekortti #kuvienVarinimi {
	border: 1px solid var(--vaaleanharmaa);
	background: var(--vaalea);
	border-radius: 5px;
	padding: 2px 5px;
	font-size: 0.9em;
}
/* Tuotekuvien swiperin asetukset */

#isoTuotekortti #tuotekuvat {
	background: #FFF;
	position: relative;
	border-radius: 12px;
}
#isoTuotekortti #tuotekuvat .swiper {
	width: 495px;
	height: 495px;
}
#isoTuotekortti #tuotekuvat .tuotekuvat-main-slider .swiper-slide img {
	padding: 16px;
}
#isoTuotekortti #tuotekuvat .tuotekuvat-main-slider {
	margin: 15px 0;
}
#isoTuotekortti #tuotekuvat .tuotekuvat-thumb-slider {
	border-top: 1px solid var(--vaaleanharmaa);
	height: 80px;
}
#isoTuotekortti #tuotekuvat .tuotekuvat-thumb-slider .swiper-slide img {
	padding: 8px;
}
#isoTuotekortti #tuotekuvat .tuotekuvat-thumb-slider {
	height: 80px;
}

/* Merkkauskuvien swiperin asetukset */

#isoTuotekortti #merkkauskuvat, #tuoteasetukset #merkkauskuvat {
	background: #FFF;
	border-radius: 12px;
}
#isoTuotekortti #merkkauskuvat .merkkauskuvat-main-slider, #tuoteasetukset #merkkauskuvat .merkkauskuvat-main-slider {
	width: 350px;
	height: 350px;
	margin-bottom: 15px;
}
#isoTuotekortti #merkkauskuvat .thumb-slider, #tuoteasetukset #merkkauskuvat .thumb-slider {
	height: 80px;
}
#isoTuotekortti .merkkauskuvat-thumb-slider, #tuoteasetukset .merkkauskuvat-thumb-slider {
	border-top: 1px solid var(--vaaleanharmaa);
	height: 80px;
}
#isoTuotekortti .merkkauskuvat-main-slider .swiper-slide img, #tuoteasetukset .merkkauskuvat-main-slider .swiper-slide img {
	padding: 16px;
}
#isoTuotekortti .merkkauskuvat-thumb-slider .swiper-slide img, #tuoteasetukset .merkkauskuvat-thumb-slider .swiper-slide img {
	padding: 8px;
}

/* Tuotteen hintataulukko */
#isoTuotekortti #hintataulukko>div:nth-of-type(even) {
	white-space: nowrap;
}

/* Tuotekuvauksen "Lue lisää" */

#isoTuotekortti .tuotekuvaus {
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease;
	padding-right: 25px;
}
#isoTuotekortti .tuotekuvaus.auki {
    max-height: 1500px;
}
#isoTuotekortti #tuotekuvausLueLisaa {
	display: none !important;
}

.sertifikaatit {
	display: grid;
	grid-template-columns: 80px auto;
	font-weight: 700;
	grid-gap: 10px;
}
.sertifikaatit img {
	max-width: 60px;
	max-height: 60px;
}
.sertifikaatit .kuvaus {
	font-weight: 400;
	color: var(--tumma);
}
	

#tuotekorttiosaTuotetiedot .raatalointi {
	display: grid;
	grid-template-columns: 30px auto;
}
#tuotekorttiosaTuotetiedot .raatalointi input {
	padding: 0;
	margin: 0;
	width: 25px;
}
	

#isoTuotekortti .hintatiedot {
	margin: 15px 0px;
}
#isoTuotekortti .hintatiedot span {
	font-size: 1.2em;	
}

.lisaaTuotekoriinInfo {
	margin-bottom: 10px;
}
.lisaaTuotekoriinInfo>div {
	margin-bottom: 5px;
}
.lisaaTuotekoriinInfo span {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	background-color: #e8f5e9;
	color: #2e7d32;
}
.lisaaTuotekoriinInfo span.keltainen {
	background-color: #f6f697;
	color: #444;
}
.lisaaTuotekoriinInfo span.punainen {
	background-color: pink;
	color: darkred;
}
.lisaaTuotekoriinInfo span.harmaa {
	background-color: #ececec;
	color: #444;
}
#isoTuotekortti .tuoterivi, #isoTuotekortti .tuoterivilabelit {
	display: grid;
	grid-template-columns: auto 100px 80px 200px 40px;
	grid-gap: 5px;
	margin-bottom: 5px;
}
#isoTuotekortti .tuoterivi.eiTIM {
	grid-template-columns: auto 120px 80px 240px;
}

.yhteenvetotaulukko {
	display: grid;
	grid-template-columns: 2fr 1fr; 
	grid-gap: 5px;	
}

.painatusalueet>div {
	background: white;
	border: 1px solid var(--vaaleanharmaa);
	border-radius: 10px;
	padding: 15px;
	transition: transform 0.2s ease;
	margin-bottom: 10px;
}
.painatusalueet>div:last-of-type {
	margin-bottom: 0;
}
.painatusalueet .painatusalue {
	color: #000;
	font-weight: 700;
	margin-bottom: 0.5rem;
}
.painatusalueet .painatus {
	display: grid;
	grid-template-columns: 55px auto;
	gap: 10px;
	border-radius: 8px;
	margin-top: 0.5rem;
}

.painatusalueet .painatus .kuvaAlue {
	width: 50px;
	min-height: 22px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
}
.painatusalueet .painatus img {
	max-width: 50px;
	max-height: 50px;
}
.painatusalueet .painatus p {    
	margin: 0;
}
.painatusalueet .painatusnimi {    
	font-size: 1em;
}
.painatusalueet .painatuslisatieto {
	font-size: 0.9em;
}


/* TUOTEPAKETIT */
#tuotepaketit .tuotekuvat {
	display: grid;
	grid-template-columns: 60px 60px 60px;
	grid-template-rows: 60px 60px 60px;
}
#tuotepaketit .tuotekuvat img {
	max-width: 100%;
	max-height: 100%;
}
#tuotepaketti img {
	max-width: 150px;
	max-height: 150px;
}


/* TOIMITTAJAKUVASTOT */
#toimittajakuvastolista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
	margin: 25px 0px;
}
#toimittajakuvastolista>div {
	display: grid;
	column-gap: 25px;
	grid-template-columns: 180px auto;
	background: #fff;
	grid-template-rows: auto 45px;
	color: #000;
}
#toimittajakuvastolista img {
	max-width: 180px;
}
#toimittajakuvastolista .kuvastokuvaus {
	margin: 15px 0px;
}
#toimittajakuvastolista>div:not(:last-of-type) {
	padding-bottom: 25px;
	margin-bottom: 25px;
	border-bottom: 1px solid #ececec;
}
#toimittajakuvastolista>div>span:nth-of-type(1) {
	display: block;
	grid-row: 1 / 3;
	overflow-y: auto;
}
#toimittajakuvastolista>div>span:nth-of-type(2) {
	overflow-y: auto;
}
#toimittajakuvastolista>div>span:nth-of-type(3) {
	grid-row: 2 / 2;
}
#toimittajakuvastolista .tuotemerkki {
	color: #f56600;
	margin: 0px;
	font-size: 14pt;
}
#toimittajakuvastolista h2 {
	margin-top: 0px;
}
#toimittajakuvastolista a {
	margin-right: 15px;
	background: #444;
	color: #fff;
	padding: 10px 25px;
	font-weight: 400;
	width: auto;
	display: inline-block;
	text-decoration: none;
}
#toimittajakuvastolista>div a:last-of-type {
	background: #f35e19;
}
#toimittajakuvastolista a .selaa:hover {
	background: darkgray;
}


/* OTA YHTEYTTÄ */

#otaYhteytta #yhteydenotto {
	margin-top: 25px;
}
#otaYhteytta #yhteydenotto>div {
	line-height: 1.5;
	height: 100%;
}
#otaYhteytta #yhteydenotto>div a {
	text-decoration: none;
	color: #000;
}
#otaYhteytta #yhteydenotto>div a:hover {
	text-decoration: underline;
}
#otaYhteytta #yhteydenotto>div #puhelinlinkki {
	font-size: 1.8em;

}
#otaYhteytta #yhteydenotto>div #puhelinlinkki img {
	margin-right: 10px;
	height: 50px;
	vertical-align: middle;
}
#otaYhteytta #yhteydenotto textarea {
	height: 100px;
}
#otaYhteytta #yhteydenotto>div {
	padding: 50px;
}
#otaYhteytta #yhteydenotto #yhteystiedot p {
	margin: 15px 0px;
}
#otaYhteytta #yhteydenotto #yhteystiedot img {
	vertical-align: middle;
	height: 24px;
}	
#otaYhteytta #yhteydenotto iframe {
	width: 100%;
	height: 100%;
	min-height: 250px;
	border: 0;
}
#otaYhteytta #omaMyyja img {
	max-height: 200px;
	max-width: 150px;
}

/* OHJEET */
#ohjeet .ohjeSwiper {
	width: 800px;
}
.ohjeLueLisaa {
	color: var(--oranssi);
	text-decoration: underline;
	cursor: pointer;
}

/* TILAUSLOMAKE */
#noutopistehaunKentat {
	grid-template-columns: auto auto 85px;
}
#noutopistehaunKentat #haeNoutopisteet {
	height: 45px; 
	line-height: 45px;
	margin-top: 22px;
	width: 100%;
}
#noutopistevalintastatus {
	text-align: center;
}
#noutopistelista {
	display: grid;
}
#noutopistekartta {
	height: 400px;
}
#noutopistekartta:empty {
	display: none;
}
#noutopistelista>h3 {
	margin-bottom: 15px;
}
#noutopistelista>div {
	padding-bottom: 6px !important;
}
#noutopistelista>div:not(:last-of-type) {
	border-bottom: 0 !important;  
}
#noutopistelista>div:hover {
	background: var(--vaalea);
}
#noutopistelista>div input {
	min-height: 15px;
	margin-bottom: 0;
	cursor: pointer;
	position: absolute;
	left: -1000px;
}
#noutopistelista>div label {
	cursor: pointer;
}
#noutopistelista .noutopistenimi {
	font-weight: 600;
	margin-bottom: 5px;
}
#noutopistelista .noutopisteosoite {
	font-weight: 400;
	margin-bottom: 5px;
}
.tilauksenKoontitiedot h2 {
	margin-bottom: 10px;
}
.tilauksenKoontitiedot div {
	margin-bottom: 25px;
}
.paytrail_maksutavat {
	margin-top: 25px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 25px;
}
.paytrail_maksutavat>form>button {
	padding: 15px;
	border: 2px solid #ececec;
	border-radius: 6px;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: all 0.5s;
}
.paytrail_maksutavat>form>button:hover {
	border-color: #f37121;
}
.paytrail_maksutavat img {
	max-width: 160px;
	max-height: 100px;
}
.paytrail_alatunniste {
	border-top: 1px solid gray;
	margin-top: 25px;
	padding-top: 15px;
	font-size: 10pt;
}
.paytrail_alatunniste a {
	color: blue;
}

/* Etenemispalkki */

.etenemispalkki {
  --p: 0;                 /* prosentti 0–100 */
  --bg: #eef2f7;          /* tausta */
  --fg: #10b981;          
  position: relative;
  display: inline-block;
  width: 180px;           /* voit muuttaa tai käyttää 100% */
  height: 0.9rem;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
  padding: 10px 0;
}
.etenemispalkki>i {
  position: absolute; inset: 0;
  width: calc(var(--p) * 1%);
  background: linear-gradient(90deg, var(--fg), var(--fg));
}
.etenemispalkki b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 600;
  color: #111827;               /* teksti näkyy myös tyhjällä palkilla */
  mix-blend-mode: multiply;     /* teksti erottuu täytön päällä */
}

.etenemispalkki.keltainen { --fg: yellow; }
.etenemispalkki.punainen { --fg: red; }

table#tuoteasetustenMuutos .tm {
	font-size: 0.9em;
	font-weight: 700;
	color: #f35e19;
}
table#tuoteasetustenMuutos .tn {
	padding: 5px 0;
}
table#tuoteasetustenMuutos .ko {
	font-size: 0.9em;
	color: #444;
}
table#tuoteasetustenMuutos td {
	vertical-align: top;
}
table#tuoteasetustenMuutos label, .tuotteenTuoteasetukset label {
	display: block; 
	margin-bottom: 5px;
	cursor: pointer;
}
table#tuoteasetustenMuutos label input, .tuotteenTuoteasetukset label input {
	vertical-align: text-bottom; 
	margin-right: 5px;
}

/* Käyttäjätietojen lataaminen tiedostosta, esimerkin taulukko */
.esimerkkitaulukko {
	border-collapse: collapse;
	margin: 10px 0px;
}
.esimerkkitaulukko td {
	border: 1px solid gray;
	padding: 2px;
	font-size: 0.9em;
}

#faq>div {
	padding: 25px;
	border: 1px solid var(--vaaleanharmaa);
	border-radius: 8px;
	margin-top: 15px;
}
#faq>div>h3 {
	padding: 0px;
	display: grid;
	grid-template-columns: 20px auto;
	grid-gap: 10px;
}
#faq>div>h3>span {
	vertical-align: middle;
	margin-right: 10px;
	transition: all 0.3s ease-in;
	display: inline-block;
	transform-origin: 11px 11px;
}
#faq>div>div {
	max-height: 0;
	overflow: hidden;
	transition: all 0.3s ease-in;
}
#faq>div.auki>h3>span {
	transform: rotate(180deg);
}
#faq>div.auki>div {
	padding-top: 25px;
	max-height: 1000px;
}

@media (prefers-reduced-motion: no-preference) {
  .etenemispalkki>i { transform-origin: left; animation: fill 600ms ease-out both; }
  @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}