.sininen_tausta {
	background-color: #e2f1fb;
}
/* ======== T�SS� ON TIETOA SIVUN RUNGOSTA ======= */
body{
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	/* color: black; */
	top: 0px;
	margin: 0px;
}

/* ========== PALSTATEKSTI� ============== */
p { font-family: verdana, arial, helvetica, geneva, sans-serif; font-size: 12px; }

/* =========== SISENNYKSET ============== */

.punainen_teksti {
	color: #C6282D;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-right: 10px;
}

.harmaa_teksti {
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-right: 10px;
}

.sis {
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	margin-left: 20px;
	font-size: 14px;
	font-weight: bold;
}

.sissuuri { font-family: verdana, arial, helvetica, geneva, sans-serif;	font-size: 14px; margin-left: 20px;}

.sispieni { font-family: verdana, arial, helvetica, geneva, sans-serif;	font-size: 10px; margin-left: 20px;}

/*============== PIKKUPR�NTTI ===============*/

.pieni{
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

/* =============== LINKIT ================ */
A:link { font-family: verdana, arial, helvetica, geneva, sans-serif;	color: #000000;}

A:hover { font-family: verdana, arial, helvetica, geneva, sans-serif;	color: #FF0000;}

A:active { font-family: verdana, arial, helvetica, geneva, sans-serif;	color: #C6282D;}

A:visited { font-family: verdana, arial, helvetica, geneva, sans-serif;	color: #666666;}

/*YLANAVIGOINNIN LINKIT---------------------------------------------------*/
.punainen_teksti a:link {
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	color: #C6282D;
	text-decoration: none;
}
.punainen_teksti a:hover { 
	font-family: verdana, arial, helvetica, geneva, sans-serif;	
	color: #FF0000;
}
.punainen_teksti a:active {
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	color: #C6282D;
	text-decoration: none;
}
.punainen_teksti a:visited {
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	color: #666666;
	text-decoration: none;
}

/* ================ OTSIKOT ================ */
H1{ 	font-family: verdana, arial, helvetica, geneva, sans-serif;	font-size: 14px;	color:#000000;}

H2{		font-family: verdana, arial, helvetica, geneva, sans-serif;	font-size: 12px;	color:#000000;}

H3{ 	font-family: verdana, arial, helvetica, geneva, sans-serif;	font-size: 11px;	color:#000000;}

H4{
	font-family: verdana, arial, helvetica, geneva, sans-serif;
	font-size: 11px;
	color:#000000;
	font-style: normal;
	font-weight: bold;
}

.palkkitausta {
	background-image: url(kuvat/ylapalkki_03.gif);
}

.reunus {
	border: thin solid #E5F1F9;
}

.navigointi_musta {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.otsikko {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
.palstateksti {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 20px;
	margin-right: 20px;
}
.teksti_pun_palkkiin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	margin-left: 40px;
	color: #FFFFFF;
}
.ylapalkki {
	background-image: url(Kuvat/ylapalkki_02.gif);
}
.yla_yla_navi {
	margin-right: 10px;
}
.valiotsikko {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

/* Taulukon taustat */
.tummempi {
	background: #333333; color: #ffffff;
}
.vaaleampi {
	background: #ffffff; color: #000000;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	margin-bottom: 20px;
}

/* Varauslomake --------------------------------------------------------- */
.reservation-page { max-width: 760px; margin: 28px auto 42px; color: #33443a; }
.reservation-page__header { padding: 0 0 18px; border-bottom: 1px solid #d9e5db; }
.reservation-page__eyebrow { margin: 0 0 5px; color: #607967; font-size: 10px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.reservation-page h1 { margin: 0; color: #284835; font-size: 25px; letter-spacing: -.02em; }
.reservation-page__header > p:last-child { margin: 8px 0 0; color: #637169; font-size: 13px; line-height: 1.55; }
.reservation-picker { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 20px 0; padding: 15px; border: 1px solid #d7e5da; border-radius: 10px; background: #f8fbf8; }
.reservation-picker label, .reservation-form label { display: flex; flex-direction: column; gap: 5px; color: #526559; font-size: 11px; font-weight: bold; }
.reservation-picker__action {
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #526559;
	font-size: 11px;
	font-weight: bold;
}
.reservation-picker select, .reservation-form input, .reservation-form select { min-height: 38px; padding: 7px 9px; border: 1px solid #b9cbbd; border-radius: 6px; color: #26372d; font: inherit; background: #fff; }
.reservation-picker button, .reservation-form__submit { min-height: 38px; padding: 8px 13px; border: 1px solid #356243; border-radius: 6px; color: #fff; font-weight: bold; background: #356243; cursor: pointer; }
.reservation-picker button:hover, .reservation-form__submit:hover { background: #284d35; }
.reservation-picker button {
	min-height: 38px;
	padding: 8px 13px;
	font-size: 12px;
}
.reservation-picker__terms { margin-left: auto; color: #315b40 !important; font-size: 11px; font-weight: bold; text-decoration: none; }
.reservation-picker__terms:hover, .reservation-picker__terms:focus { color: #284d35 !important; text-decoration: underline; }
.reservation-week-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 18px; padding: 12px 14px; border-left: 4px solid #5b8968; border-radius: 0 8px 8px 0; background: #edf5ef; font-size: 12px; }
.reservation-week-summary strong { color: #284835; }
.reservation-week-summary__status { margin-left: auto; font-weight: bold; }
.reservation-week-summary--free { border-left-color: #4e8e5b; background: #edf7ef; }
.reservation-week-summary--reserved { border-left-color: #c77575; background: #fff0f0; }
.reservation-week-summary--reserved strong { color: #8a3131; }
.reservation-week-summary--pending { border-left-color: #b8962e; background: #fff9df; }
.reservation-week-summary--pending strong { color: #6e5714; }
.reservation-form { display: grid; gap: 16px; }
.reservation-form fieldset { margin: 0; padding: 16px; border: 1px solid #d7e5da; border-radius: 10px; }
.reservation-form legend { padding: 0 6px; color: #284835; font-size: 14px; font-weight: bold; }
.reservation-form__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.reservation-form__choices label { min-height: 86px; padding: 11px; border: 1px solid #c9dacd; border-radius: 8px; background: #fafdfb; cursor: pointer; }
.reservation-form__choices label:has(input:checked) { border-color: #356243; box-shadow: 0 0 0 2px #dcecdf; background: #f1f8f2; }
.reservation-form__choices input { min-height: auto; margin: 0 0 2px; accent-color: #356243; }
.reservation-form__choices small { color: #637169; font-size: 10px; font-weight: normal; line-height: 1.35; }
.reservation-form__choice--release { border-color: #e2b8b8 !important; }
.reservation-form__hint { margin: 0 0 12px; color: #637169; font-size: 11px; line-height: 1.5; }
.reservation-form__guest, .reservation-form__owner { display: inline-flex; flex-direction: column; gap: 5px; width: min(100%, 300px); margin: 0 12px 8px 0; }
.reservation-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.reservation-day { padding: 0; }
.reservation-days input { width: 100%; box-sizing: border-box; text-align: center; }
.reservation-day small { font-size: 10px; font-weight: normal; }
.reservation-day--free small { color: #356243; }
.reservation-day--reserved small { color: #526559; }
.reservation-day--pending small { color: #6e5714; }
.reservation-day--free input { border-color: #78b783; background: #edf7ef; }
.reservation-day--reserved input { border-color: #adb5bd; background: #fff; }
.reservation-day--pending input { border-color: #d5b94d; background: #fff9df; }
.reservation-form__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.reservation-form__actions a { color: #315b40 !important; font-size: 12px; font-weight: bold; }
.reservation-page__empty { margin: 20px 0; padding: 16px; border-radius: 8px; color: #637169; background: #f4f8f4; }

/* Osakasryhmien majoitusvuorokausikaavio -------------------------------- */
.stats-chart {
	margin: 24px 0;
	padding: 18px;
	border: 1px solid #d7e5da;
	border-radius: 10px;
	background: #f8fbf8;
}
.stats-chart h2 {
	margin: 0 0 12px;
	color: #284835;
	font-size: 16px;
}
.stats-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-bottom: 16px;
}
.stats-chart__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #526559;
	font-size: 11px;
}
.stats-chart__swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
}
.stats-chart__rows {
	display: grid;
	gap: 9px;
}
.stats-chart__row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 40px;
	gap: 8px;
	align-items: center;
}
.stats-chart__year,
.stats-chart__total {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.stats-chart__total {
	text-align: right;
}
.stats-chart__track {
	height: 20px;
	overflow: hidden;
	border-radius: 3px;
	background: #e4ebe6;
}
.stats-chart__bar {
	display: flex;
	height: 100%;
	min-width: 1px;
	overflow: hidden;
	border-radius: inherit;
}
.stats-chart__segment {
	display: block;
	height: 100%;
}
.stats-chart__series--0 { background: #356243; }
.stats-chart__series--1 { background: #5b8968; }
.stats-chart__series--2 { background: #798b50; }
.stats-chart__series--3 { background: #5a7e91; }
.stats-chart__series--4 { background: #8b704e; }
.stats-chart__series--5 { background: #776a95; }
.stats-chart__series--6 { background: #a07054; }
.stats-chart__series--7 { background: #647d74; }
@media (max-width: 600px) {
	.reservation-page { margin: 20px 0 32px; }
	.reservation-page h1 { font-size: 21px; }
	.reservation-picker { display: grid; grid-template-columns: 1fr; }
	.reservation-picker button { width: 100%; }
	.reservation-picker__terms { margin-left: 0; }
	.reservation-week-summary__status { width: 100%; margin-left: 0; }
	.reservation-form__choices { grid-template-columns: 1fr; }
	.reservation-form__choices label { min-height: auto; }
	.reservation-days { grid-template-columns: repeat(2, 1fr); }
	.stats-chart { padding: 14px; }
	.stats-chart__row { grid-template-columns: 38px minmax(0, 1fr) 36px; gap: 6px; }
}

/* Mökki: tapahtumakauden linkit ---------------------------------------- */
.mokki-sivu__otsikko {
	margin: 25px 0 0;
	color: #284835;
	font-size: 22px;
	letter-spacing: -.02em;
}
.kausilinkit {
	margin: 28px 0 22px;
	padding: 17px;
	border: 1px solid #d7e5da;
	border-radius: 10px;
	background: linear-gradient(135deg, #f8fbf8 0%, #edf5ef 100%);
	box-shadow: 0 2px 8px rgba(36, 52, 45, .06);
	color: #304238;
}
.kausilinkit__otsake { display: flex; align-items: center; gap: 10px; }
.kausilinkit__ikoni {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #dcecdf;
	color: #356243;
	font-size: 17px;
}
.kausilinkit__kulmakarva {
	margin: 0 0 2px;
	color: #617a6a;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.kausilinkit h2 { margin: 0; color: #284835; font-size: 16px; }
.kausilinkit__teksti { margin: 10px 0 13px; color: #5d6f63; font-size: 12px; line-height: 1.5; }
.kausilinkit__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.kausilinkit__linkki {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 7px 9px;
	border: 1px solid #bcd1c1;
	border-radius: 7px;
	background: #fff;
	color: #315b40 !important;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.25;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.kausilinkit__linkki:hover, .kausilinkit__linkki:focus {
	border-color: #7ba387;
	background: #f2f8f3;
	color: #284d35 !important;
	text-decoration: none;
	transform: translateY(-1px);
}
.kausilinkit__linkki > i:first-child { color: #5b8968; font-size: 13px; }
.kausilinkit__nuoli { margin-left: 2px; font-size: 11px; }
@media (max-width: 500px) {
	.mokki-sivu__otsikko { margin-top: 20px; }
	.kausilinkit { margin-top: 20px; }
	.kausilinkit__lista { display: grid; grid-template-columns: 1fr; }
	.kausilinkit__linkki { justify-content: space-between; }
	.kausilinkit__linkki span { margin-right: auto; }
}

/* Mökki: sää-, reitti- ja matkalinkit ---------------------------------- */
.hyodylliset-linkit {
	margin: 0 0 25px;
	border: 1px solid #d7e5da;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(36, 52, 45, .06);
	overflow: hidden;
}
.hyodylliset-linkit__otsake {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #e2ece4;
	background: #f4f8f4;
	list-style: none;
}
.hyodylliset-linkit__otsake::-webkit-details-marker { display: none; }
.hyodylliset-linkit__kulmakarva {
	display: block;
	margin: 0 0 3px;
	color: #617a6a;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.hyodylliset-linkit__otsake strong { display: block; color: #284835; font-size: 17px; }
.hyodylliset-linkit__otsake > i { display: none; color: #5b8968; }
.hyodylliset-linkit:not([open]) .hyodylliset-linkit__sisalto { display: block; }
.hyodylliset-linkit__osio { padding: 13px 16px; border-bottom: 1px solid #edf2ee; }
.hyodylliset-linkit__osio--viimeinen { border-bottom: 0; }
.hyodylliset-linkit h3 {
	margin: 0 0 9px;
	color: #526559;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.hyodylliset-linkit h3 i { margin-right: 4px; color: #5b8968; font-size: 13px; }
.hyodylliset-linkit__painikkeet { display: flex; flex-wrap: wrap; gap: 7px; }
.hyodylliset-linkit__painikkeet a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 8px;
	border-radius: 6px;
	background: #f6faf6;
	color: #315b40 !important;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.3;
	text-decoration: none;
}
.hyodylliset-linkit__painikkeet a:hover, .hyodylliset-linkit__painikkeet a:focus {
	background: #e6f0e8;
	color: #284d35 !important;
	text-decoration: none;
}
.hyodylliset-linkit__painikkeet a i { font-size: 10px; }
@media (max-width: 500px) {
	.hyodylliset-linkit__painikkeet { display: grid; grid-template-columns: 1fr; }
	.hyodylliset-linkit__painikkeet a { justify-content: space-between; }
}

@media (max-width: 650px) and (orientation: portrait) {
	.hyodylliset-linkit__otsake { cursor: pointer; }
	.hyodylliset-linkit__otsake > i { display: block; }
	.hyodylliset-linkit[open] .hyodylliset-linkit__otsake > i { transform: rotate(180deg); }
	.hyodylliset-linkit:not([open]) .hyodylliset-linkit__sisalto { display: none; }
}

/* Mökki ja säännöt: pitkät ohjetekstit --------------------------------- */
.ohjesivu { max-width: 860px; margin: 28px auto 42px; color: #33443a; }
.ohjesivu__otsake { margin: 0 3px; padding: 0 0 17px; border-bottom: 1px solid #d9e5db; }
.ohjesivu__kulmakarva { margin: 0 0 5px; color: #607967; font-size: 10px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.ohjesivu__otsake h1 { margin: 0; color: #284835; font-size: 25px; letter-spacing: -.02em; }
.ohjesivu__otsake > p:last-child { margin: 7px 0 0; color: #637169; font-size: 13px; }
.ohjesivu__paivitys { display: inline-block; margin-left: 6px; color: #718078; font-size: 10px; }
.ohjesivu__pikavalikko { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.ohjesivu__pikavalikko a, .ohjesivu__pikavalikko button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #c7d9cb; border-radius: 7px; background: #f5faf6; color: #315b40 !important; font-family: inherit; font-size: 11px; font-weight: bold; line-height: 1.2; text-decoration: none; }
.ohjesivu__pikavalikko button { cursor: pointer; }
.ohjesivu__pikavalikko a:hover, .ohjesivu__pikavalikko button:hover { background: #e5f0e7; color: #284d35 !important; text-decoration: none; }
.ohjesivu__pikavalikko .ohjesivu__toissijainen-linkki { border-color: #d4c7ad; background: #fdfaf3; color: #725d34 !important; }
.ohjesivu__pikavalikko .ohjesivu__painike--varoitus { border-color: #e4c58e; background: #fff7e8; color: #8a5b17 !important; }
.ohjesivu__sisalto { padding: 2px 16px 18px; border: 1px solid #dce8de; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(36, 52, 45, .05); font-size: 13px; line-height: 1.65; }
.ohjesivu__sisalto > p { margin: 0 0 15px; }
.ohjesivu__sisalto > b { display: flex; align-items: center; min-height: 38px; margin: 25px -16px 9px; padding: 8px 13px; border-top: 1px solid #e1ebe3; border-bottom: 1px solid #e7efe8; background: #f4f8f4; color: #31513b; font-size: 14px; }
.ohjesivu__sisalto > b:first-child { margin-top: 0; }
.ohjesivu__sisalto > span[id] + b { scroll-margin-top: 15px; }
.mokki-ohjeet .ohjesivu__sisalto > b { border-left: 3px solid #78a184; }
.saannot-ohjeet .ohjesivu__sisalto > b { border-left: 3px solid #78a184; }
.saannot-ohjeet .ohjesivu__sisalto > span#saannot-turvallisuus + b { border-left-color: #c9842d; background: #fff6e4; color: #694b1d; }
.mokki-ohjeet .ohjesivu__sisalto > span#mokki-saapuminen + b { border-left-color: #5f9a6a; background: #eff8f0; }
.mokki-ohjeet .ohjesivu__sisalto > span#mokki-lahto + b { border-left-color: #637b69; background: #f1f5f1; }
.ehdot-ohjeet .ohjesivu__sisalto > b { border-left: 3px solid #8b8066; }
.ehdot-ohjeet .ohjesivu__sisalto > span#ehdot-maksu + b { border-left-color: #a67428; background: #fff8e9; color: #704f1e; }
.ehdot-ohjeet .ohjesivu__sisalto > span#ehdot-vastuut + b { border-left-color: #617e68; background: #f2f8f3; }
.mokki-ohjeet .ohjesivu__sisalto table { margin: 3px 0 16px; }
.mokki-ohjeet .ohjesivu__sisalto td { vertical-align: top; }
.mokki-ohjeet .ohjesivu__sisalto img[align='right'] { max-width: 42%; height: auto; margin: 0 0 12px 18px; border: 1px solid #dce8de; border-radius: 8px; }
.ohjeavaus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.ohjeavaus__painike { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #c7dccb; border-radius: 9px; background: #f5faf6; color: #315b40; text-align: left; cursor: pointer; }
.ohjeavaus__painike:hover { border-color: #83a88b; background: #eaf4ec; }
.ohjeavaus__painike > i:first-child { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #dcecdf; color: #4c7a58; font-size: 15px; }
.ohjeavaus__painike span { flex: 1; font-size: 11px; line-height: 1.45; }
.ohjeavaus__painike strong { display: block; color: #284835; font-size: 13px; }
.ohjeavaus__painike > i:last-child { color: #5c8968; }
.ohjeavaus--yksi { grid-template-columns: minmax(0, 1fr); }
.ohjeavaus__painike--varoitus { border-color: #e4c58e; background: #fff8eb; color: #744e1c; }
.ohjeavaus__painike--varoitus:hover { border-color: #cf9b45; background: #fff1d8; }
.ohjeavaus__painike--varoitus > i:first-child { background: #fae6bb; color: #a56e1d; }
.ohjeavaus__painike--varoitus strong, .ohjeavaus__painike--varoitus > i:last-child { color: #754d19; }
.ohjemodaali .modal-content { overflow: hidden; border: 1px solid #d6e4d9; border-radius: 11px; }
.ohjemodaali .modal-header { align-items: flex-start; border-bottom-color: #dfeae1; background: #f4f8f4; }
.ohjemodaali__kulmakarva { margin: 0 0 3px; color: #617a6a; font-size: 9px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.ohjemodaali .modal-title { color: #284835; font-size: 19px; }
.ohjemodaali .modal-title i { margin-right: 5px; color: #5b8968; }
.ohjemodaali .modal-body { padding: 18px 20px; color: #405248; font-size: 13px; line-height: 1.55; }
.ohjemodaali__lista { margin: 0; padding-left: 20px; }
.ohjemodaali__lista li { margin-bottom: 9px; }
.ohjemodaali__huomio { display: flex; gap: 8px; margin: 14px 0 0; padding: 10px; border-left: 3px solid #79a384; border-radius: 4px; background: #f1f7f2; color: #496153; font-size: 12px; }
.ohjemodaali__huomio i { color: #5b8968; }
.ohjemodaali--varoitus .modal-header { background: #fff5e2; border-bottom-color: #f0d9b3; }
.ohjemodaali--varoitus .modal-title, .ohjemodaali--varoitus .modal-title i { color: #7b511a; }
.lemmikit-kielletty { display: flex; align-items: center; gap: 13px; margin: 24px -16px 15px; padding: 12px 14px; border: 1px solid #ecc8c8; border-radius: 8px; background: #fff8f8; color: #663838; }
.lemmikit-kielletty__merkki { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 4px solid #bc3838; border-radius: 50%; color: #9f3030; font-family: sans-serif; font-size: 21px; }
.lemmikit-kielletty__merkki::after { position: absolute; width: 52px; height: 4px; border-radius: 3px; background: #bc3838; content: ''; transform: rotate(-45deg); }
.lemmikit-kielletty b { color: #743333; font-size: 14px; }
.lemmikit-kielletty p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }
@media (max-width: 560px) {
	.ohjesivu { margin: 20px auto 30px; }
	.ohjesivu__otsake h1 { font-size: 22px; }
	.ohjesivu__pikavalikko { display: grid; grid-template-columns: 1fr 1fr; }
	.ohjesivu__pikavalikko a, .ohjesivu__pikavalikko button { justify-content: center; }
	.ohjeavaus { grid-template-columns: 1fr; }
	.lemmikit-kielletty { margin-left: -13px; margin-right: -13px; }
	.ohjesivu__sisalto { padding-left: 13px; padding-right: 13px; }
	.ohjesivu__sisalto > b { margin-left: -13px; margin-right: -13px; }
	.mokki-ohjeet .ohjesivu__sisalto img[align='right'] { float: none; max-width: 100%; margin: 0 0 12px; }
	.mokki-ohjeet .ohjesivu__sisalto td { display: block; width: 100% !important; }
}

/* INFO ------------------------------------------------------------------ */
.info-sivu {
	max-width: 860px;
	margin: 30px auto 42px;
	color: #24342d;
}
.info-sivu__otsake {
	margin: 0 3px;
	padding: 0 0 17px;
	border-bottom: 1px solid #d9e5db;
}
.info-sivu__kulmakarva, .info-osio__kulmakarva {
	margin: 0 0 5px;
	color: #607967;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.info-sivu h1 { margin: 0; color: #284835; font-size: 25px; letter-spacing: -.02em; }
.info-sivu__otsake > p:last-child { margin: 7px 0 0; color: #637169; font-size: 13px; }
.info-sivu__ruudukko { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .85fr); gap: 18px; margin-top: 19px; }
.info-tiedotteet, .info-tapahtumat { border: 1px solid #d9e5db; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(36, 52, 45, .05); }
.info-tiedotteet { overflow: hidden; }
.info-tapahtumat { align-self: start; padding: 15px; }
.info-osio__otsake { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-tiedotteet > .info-osio__otsake { padding: 13px 15px; border-bottom: 1px solid #e7eee8; background: #f6faf6; }
.info-osio__otsake h2 { margin: 0; color: #284835; font-size: 16px; }
.info-osio__kulmakarva { margin-bottom: 3px; font-size: 9px; }
.info-osio__lisays, .info-tiedote__muokkaa { display: inline-flex; align-items: center; gap: 5px; color: #315b40; font-size: 11px; font-weight: bold; text-decoration: none; white-space: nowrap; }
.info-osio__lisays { padding: 7px 9px; border: 1px solid #bdd2c2; border-radius: 7px; }
.info-osio__lisays:hover { background: #edf5ef; color: #285338; }
.info-tiedotteet__lista { padding: 0 15px; }
.info-tiedote { padding: 14px 0; border-bottom: 1px solid #edf1ee; }
.info-tiedote__otsake { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.info-tiedote h3 { margin: 0; color: #283d30; font-size: 14px; }
.info-tiedote__otsake p, .info-tiedote__alatieto { margin: 5px 0 0; color: #718078; font-size: 10px; }
.info-tiedote__otsake p i, .info-tiedote__alatieto i { margin-right: 4px; color: #6b9475; }
.info-tiedote__muokkaa { color: #8a5a19; }
.info-tiedote__muokkaa:hover { color: #9f272b; text-decoration: underline; }
.info-tiedote__sisalto { margin-top: 10px; color: #4d5e53; font-size: 12px; line-height: 1.6; }
.info-tiedote__alatieto { font-style: italic; }
.info-paivakirja { display: flex; gap: 9px; margin: 14px 15px 15px; padding: 10px 11px; border-left: 3px solid #79a384; border-radius: 4px; background: #f3f8f4; color: #53685a; }
.info-paivakirja > i { margin-top: 1px; color: #4b7d58; }
.info-paivakirja p { margin: 0; font-size: 11px; line-height: 1.5; }
.info-paivakirja a, .info-tapahtuma a, .info-tapahtumat__kaikki { color: #315b40; font-weight: bold; text-decoration: none; }
.info-paivakirja a:hover, .info-tapahtuma a:hover, .info-tapahtumat__kaikki:hover { color: #9f272b; text-decoration: underline; }
.info-tapahtumat__johdanto { margin: 10px 0 0; color: #637169; font-size: 11px; line-height: 1.45; }
.info-tapahtumat__lista { margin-top: 12px; }
.info-tapahtuma { padding: 11px 0; border-top: 1px solid #edf1ee; }
.info-tapahtuma__aika { margin: 0; color: #607967; font-size: 10px; font-weight: bold; }
.info-tapahtuma__aika i { margin-right: 4px; }
.info-tapahtuma h3 { margin: 4px 0 7px; color: #34453b; font-size: 12px; line-height: 1.4; }
.info-tapahtuma a { font-size: 11px; }
.info-tapahtumat__kaikki { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 11px; }
.info-tyhja { padding: 22px 10px; color: #718078; text-align: center; }
.info-tyhja i { color: #7ba387; font-size: 22px; }
.info-tyhja p { margin: 7px 0 0; font-size: 11px; }
@media (max-width: 650px) {
	.info-sivu { margin: 22px auto; }
	.info-sivu__ruudukko { grid-template-columns: 1fr; }
}

/* Päiväkirja ------------------------------------------------------------- */
.diary-page {
	max-width: 760px;
	margin: 28px auto 40px;
	color: #24342d;
}
.diary-page__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 0 4px 18px;
	border-bottom: 1px solid #dce7df;
}
.diary-page__eyebrow { margin: 0 0 5px; color: #617a6a; font-size: 11px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.diary-page h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.diary-page__intro { margin: 6px 0 0; color: #637169; font-size: 13px; }
.diary-page__count { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #edf5ef; color: #42604c; font-size: 11px; font-weight: bold; }
.diary-timeline { position: relative; margin: 24px 0 0 18px; padding-left: 25px; border-left: 2px solid #dce7df; }
.diary-entry { position: relative; margin-bottom: 18px; overflow: visible; border: 1px solid #dce7df; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(36, 52, 45, .06); }
.diary-entry::before { position: absolute; top: 20px; left: -34px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #5c896a; box-shadow: 0 0 0 2px #a9c6b0; content: ''; }
.diary-entry__header { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid #edf1ee; border-radius: 10px 10px 0 0; background: #f7faf7; }
.diary-entry__week { display: flex; align-items: baseline; gap: 3px; min-width: 82px; color: #5f7165; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.diary-entry__week strong { color: #285338; font-size: 21px; line-height: 1; }
.diary-entry__visit { display: flex; flex: 1; flex-wrap: wrap; gap: 3px 14px; color: #68756d; font-size: 11px; }
.diary-entry__person { color: #34453b; font-weight: bold; }
.diary-entry__visit i { color: #6a9476; }
.diary-entry__receipt { width: 31px; height: 31px; border: 0; border-radius: 50%; background: #e8f2ea; color: #416d4d; cursor: help; }
.diary-entry__text { padding: 16px 17px 17px; font-size: 13px; line-height: 1.65; }
.diary-entry__maintenance { display: flex; gap: 10px; margin: 0 14px 14px; padding: 11px 12px; border-left: 3px solid #d49a3a; border-radius: 4px; background: #fff8e9; color: #694e20; font-size: 12px; }
.diary-entry__maintenance > i { margin-top: 1px; color: #b47a1b; font-size: 16px; }
.diary-entry__maintenance p { margin: 3px 0 0; line-height: 1.5; }
.diary-empty { margin-top: 24px; padding: 34px 20px; border: 1px dashed #b8cabd; border-radius: 10px; background: #f8fbf8; color: #637169; text-align: center; }
.diary-empty i { color: #77a283; font-size: 28px; }
.diary-empty p { margin: 9px 0 0; font-size: 12px; }
@media (max-width: 560px) {
	.diary-page { margin-top: 20px; }
	.diary-page__header { align-items: flex-start; flex-direction: column; gap: 10px; }
	.diary-timeline { margin-left: 12px; padding-left: 20px; }
	.diary-entry::before { left: -29px; }
	.diary-entry__header { align-items: flex-start; flex-wrap: wrap; gap: 7px 12px; }
	.diary-entry__receipt { margin-left: auto; }
}

/* Yhteystiedot ---------------------------------------------------------- */
.osakasluettelo, .yhteystiedot {
	max-width: 860px;
	margin: 30px auto;
	color: #24342d;
}
.osakasluettelo__otsake, .yhteystiedot__otsake {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	padding: 0 3px 15px;
	border-bottom: 1px solid #d9e5db;
}
.yhteystiedot__otsake { display: block; }
.yhteystiedot__kulmakarva {
	margin: 0 0 5px;
	color: #607967;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.osakasluettelo h1, .yhteystiedot h1 {
	margin: 0;
	color: #284835;
	font-size: 23px;
	letter-spacing: -.02em;
}
.yhteystiedot__otsake > p:last-child {
	margin: 7px 0 0;
	color: #637169;
	font-size: 13px;
}
.osakasluettelo__paivita {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid #bdd2c2;
	border-radius: 7px;
	color: #315b40;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
.osakasluettelo__paivita:hover { background: #edf5ef; color: #285338; }
.osakasluettelo__ryhmat, .yhteystiedot__ruudukko {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}
.osakasryhma, .yhteystieto-kortti {
	border: 1px solid #d9e5db;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(36, 52, 45, .05);
}
.osakasryhma { overflow: hidden; }
.osakasryhma > h2 {
	margin: 0;
	padding: 10px 13px;
	border-bottom: 1px solid #e7eee8;
	background: #f6faf6;
	color: #385741;
	font-size: 13px;
}
.osakastiedot { padding: 3px 13px; }
.osakastieto { padding: 11px 0; border-bottom: 1px solid #edf1ee; }
.osakastieto:last-child { border-bottom: 0; }
.osakastieto h3 { margin: 0 0 6px; color: #283d30; font-size: 13px; }
.osakastieto__yhteys { display: grid; gap: 4px; }
.osakastieto a, .osakastieto p { color: #53685a; font-size: 11px; line-height: 1.45; }
.osakastieto a { text-decoration: none; overflow-wrap: anywhere; }
.osakastieto a:hover { color: #9f272b; text-decoration: underline; }
.osakastieto i { margin-right: 5px; color: #6b9475; }
.osakastieto p { margin: 5px 0 0; }
.osakastieto__hallinta { display: flex; gap: 10px; }
.osakastieto__hallinta a { color: #8a5a19; }
.yhteystieto-kortti { padding: 15px; }
.yhteystieto-kortti__asia {
	margin: 0 0 5px;
	color: #6b826f;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.yhteystieto-kortti h2 { margin: 0; color: #284835; font-size: 16px; }
.yhteystieto-kortti__henkilo, .yhteystieto-kortti__osoite, .yhteystieto-kortti__lisatieto {
	margin: 7px 0 0;
	color: #66736b;
	font-size: 11px;
	line-height: 1.45;
}
.yhteystieto-kortti__henkilo i, .yhteystieto-kortti__osoite i { margin-right: 5px; color: #6b9475; }
.yhteystieto-kortti__toiminnot { display: grid; gap: 5px; margin-top: 12px; }
.yhteystieto-kortti__toiminnot a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #315b40;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.yhteystieto-kortti__toiminnot a:hover { color: #9f272b; text-decoration: underline; }
.yhteystieto-kortti__toiminnot i { color: #6b9475; font-size: 13px; }
.yhteystieto-kortti__lisatieto {
	margin-top: 11px;
	padding-top: 10px;
	border-top: 1px solid #edf1ee;
	color: #53685a;
}
.yhteystiedot__tyhja { margin: 18px 0 0; color: #637169; font-size: 12px; }

/* Kirjautuminen ---------------------------------------------------------- */
.login-page { width: min(100%, 1280px); margin: 0 auto; overflow: hidden; background: #fff; }
.login-page__hero { position: relative; isolation: isolate; height: 230px; overflow: hidden; background: #385046; }
.login-page__hero::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(15, 37, 27, .38), rgba(15, 37, 27, .08) 62%, rgba(15, 37, 27, .02)); content: ''; pointer-events: none; }
.login-page__hero-image { position: absolute; z-index: 0; inset: 0; background-position: center; background-size: cover; opacity: 0; transition: opacity 2.2s ease-in-out; }
.login-page__hero-image.is-active { opacity: 1; }
/* Kohdistus alareunasta vastaa kirjautuneen portaalin otsaketta. */
.login-page__logo { position: absolute; z-index: 2; right: auto; bottom: 10px; left: 24px; width: min(258px, 52vw); height: auto; }
.login-page__content { padding: 34px 18px 24px; }
.login-page__form { min-width: 0; }
.login-page__footer { padding: 10px 16px; background: #fcf2cf; color: #37424a; font-size: 12px; text-align: center; }
.login-page__footer a { color: #37424a; }
.auth-page { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; align-items: center; gap: 56px; min-height: 430px; padding: 34px 18px; }
.auth-page .auth-card { width: 100%; box-sizing: border-box; padding: 28px; border: 1px solid #d7e5da; border-radius: 14px; background: linear-gradient(135deg, #ffffff, #f4f9f4); box-shadow: 0 10px 24px rgba(36, 72, 53, .10); color: #304238; }
.auth-page .auth-card__eyebrow { margin: 0 0 6px; color: #6b826f; font-size: 10px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.auth-page .auth-card h1 { margin: 0; color: #284835; font-size: 24px; }
.auth-page .auth-card__intro { margin: 10px 0 20px; color: #5e7063; font-size: 13px; line-height: 1.55; }
.auth-page .auth-card__error { margin: 0 0 16px; padding: 10px 12px; border-left: 4px solid #ad3434; border-radius: 5px; background: #fff0f0; color: #842c2c; font-size: 12px; line-height: 1.45; }
.auth-page .auth-card__success { margin: 0 0 16px; padding: 10px 12px; border-left: 4px solid #3d7a4b; border-radius: 5px; background: #edf8ef; color: #285338; font-size: 12px; line-height: 1.45; }
.auth-page .auth-form { display: grid; gap: 14px; }
.auth-page .auth-form label { display: grid; gap: 5px; color: #405747; font-size: 12px; font-weight: bold; }
.auth-page .auth-form input { display: block; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #b9cbbd; border-radius: 6px; background: #fff; color: #26372d; font: inherit; }
.auth-page .auth-form input:focus { border-color: #557d5e; outline: 3px solid rgba(85, 125, 94, .17); }
.auth-page .auth-form button { min-height: 42px; margin-top: 4px; border: 1px solid #315b40; border-radius: 6px; background: #356243; color: #fff; font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; }
.auth-page .auth-form button:hover { background: #284d35; }
.auth-page .auth-card__help { margin: 18px 0 0; color: #6a796e; font-size: 11px; text-align: center; }
.auth-page .auth-intro { max-width: 430px; color: #405747; }
.auth-page .auth-intro__eyebrow { margin: 0 0 6px; color: #6b826f; font-size: 10px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.auth-page .auth-intro h2 { margin: 0 0 16px; color: #284835; font-size: 26px; line-height: 1.2; }
.auth-page .auth-intro p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }

@media (max-width: 1050px) {
	.auth-page { grid-template-columns: minmax(0, 460px); gap: 30px; }
	.auth-page .auth-intro { width: 100%; max-width: 460px; }
}

@media (max-width: 1024px) and (orientation: portrait) {
	.login-shell { width: 100% !important; max-width: none !important; }
	.login-shell .sivun-sisalto__sivupalkki { display: none; }
	.login-shell .sivun-sisalto__keskusta { width: 100% !important; }
	.login-shell .sivun-sisalto__keskusta > table > tbody > tr:first-child,
	.login-shell .sivun-sisalto__keskusta > table > tbody > tr > td[width='26'] { display: none; }
}
@media (max-width: 650px) {
	.osakasluettelo, .yhteystiedot { margin: 22px auto; }
	.osakasluettelo__otsake { align-items: flex-start; flex-direction: column; }
	.osakasluettelo__ryhmat, .yhteystiedot__ruudukko { grid-template-columns: 1fr; }
	/* Kirjautumiskortti mitoitetaan suoraan puhelimen näkymäleveyteen. */
	.login-page { width: 100vw; max-width: 100vw; }
	.login-page__form { width: 100%; }
	.auth-page { grid-template-columns: minmax(0, 460px); width: 100%; min-height: 0; gap: 30px; padding: 22px 16px; box-sizing: border-box; }
	.auth-page .auth-card { width: calc(100vw - 32px); max-width: 460px; padding: 22px 18px; box-sizing: border-box; }
	.auth-page .auth-intro { width: calc(100vw - 32px); max-width: 460px; }
	.auth-page .auth-form input,
	.auth-page .auth-form button { width: 100%; max-width: 100%; box-sizing: border-box; }
	.login-page__footer { overflow-wrap: anywhere; }
	.login-page__hero { height: 170px; background-position: center; }
	.login-page__hero-image { background-position: center; }
	/* Mobiilissa sama 16 px alareunamarginaali kuin portaalin otsakkeessa. */
	.login-page__logo { top: auto; bottom: 16px; left: 16px; }
	.login-page__content { display: block; padding: 20px 16px 12px; }
}

/* Portaalin kuvasarake ei vie tilaa puhelimen pystynäkymässä. */
@media (max-width: 650px) and (orientation: portrait) {
	body:not(.login-body) .sivun-sisalto__sivupalkki { display: none; }
}

/* Kirjautuneen portaalin yhteinen, taulukoton runko. */
.portal-body { margin: 0; background: #fff; }
.portal-shell { width: min(900px, 100%); margin: 0 auto; background: #fff; }
.portal-header { position: relative; height: 150px; background-position: center; background-size: cover; }
.portal-header .sivuston-otsake { height: 100%; }
.portal-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; min-height: 600px; }
.portal-layout .sivun-sisalto__sivupalkki { display: grid; gap: 16px; align-content: start; padding: 16px 10px; }
.portal-layout .sivun-sisalto__sivupalkki img { display: block; width: 160px; max-width: 100%; height: auto; }
.portal-layout .sivun-sisalto__sisalto { min-width: 0; padding: 18px 16px 24px; }
.portal-footer { padding: 10px 16px; color: #37424a; text-align: center; }
.portal-footer .pieni { margin: 0; }

@media (max-width: 650px) and (orientation: portrait) {
	.portal-shell { width: 100%; }
	.portal-layout { display: block; min-height: 0; }
	.portal-layout .sivun-sisalto__sivupalkki { display: none; }
	.portal-layout .sivun-sisalto__sisalto { padding: 18px 16px 24px; }
	.portal-footer { overflow-wrap: anywhere; }
}

/* Omien tietojen ylläpito */
.osakastiedot--hallinta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18px;
}
.omat-tiedot__otsake {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 15px;
	margin: 25px 0 15px;
	padding-bottom: 13px;
	border-bottom: 1px solid #d9e5db;
}
.omat-tiedot__otsake h1 { margin: 0; color: #284835; font-size: 22px; }
.omat-tiedot__uusi {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 11px;
	border-radius: 7px;
	background: #315b40;
	color: #fff !important;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
.omat-tiedot__uusi:hover { background: #9f272b; color: #fff !important; }
@media (max-width: 650px) {
	.osakastiedot--hallinta { grid-template-columns: 1fr; }
	.omat-tiedot__otsake { align-items: flex-start; flex-direction: column; }
}