/*
 2026-01-20T01:41:28+02:00
 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
 /var/www/html/mesta24.net
 'Segoe UI','Trebuchet MS',Verdana,Tahoma,sans-serif
 Constantia,Georgia,'Palatino Linotype',serif
*/


/* file: /css-main.css */

html {font-size:16px;height:100%;}

@font-face {
	font-family:"icomoon";
	font-style: normal;
	font-weight: normal;
	src:url(/ico/icomoon/fonts/icomoon.ttf);
}

body {position:static;margin:0;padding:0;width:100%;height:100%;color:#000;background:#b2e0ff url(/img/bg-vinoristikko.png);font:400 1em/1.5 'Segoe UI','Noto Sans','system-ui',sans-serif;text-rendering:auto;overflow-y:scroll;user-select:none;counter-reset:num;text-size-adjust:none;}

@keyframes waitspin {0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#wait {position:fixed;width:96px;height:96px;top:50%;left:50%;transition:opacity 300ms;transform:translate(-50%,-50%);margin:-64px 0 0 -64px;border-radius:50%;border:16px solid;border-color:#407EF2 #E73E32 #FEB201 rgba(0,62,180,0.2);z-index:9;animation:waitspin 2s linear infinite;}
.wait_bgnd {position:fixed;top:0;left:0;width:100%;height:100%;background:url(/img/empty64.gif);display:none;}

img {border:none;vertical-align:middle;height:auto;max-width:100%;}
a {cursor:pointer;text-decoration:none;color:inherit;}

p {max-height:99999px;} /* poista joskus kun kaikki selaimet osaavat: Kts. yllä body {text-size-adjust:none;} */
/* this prevents chrome's stupid font-size encreasing. älä poista, google ei koskaan korjaa asiaa! */

h1,h2,h3 {font-family:inherit;x:serif;}
h1,h2 {line-height:normal;font-weight:400;}
h1 {text-shadow:1px 1px 4px rgba(45,61,77,0.5);margin-top:0.25em;}
hr {border:none;border-top:2px solid rgba(0,0,0,0.15);}

.div-logo {position:absolute;left:0;top:0;width:100%;height:50px;z-index:4;background:#002050;padding:8px 0;transition:transform ease-out 0.35s;border-bottom:2px solid #000;}
.top-logo {margin-top:2px;display:inline-block;line-height:48px;}
.top-logo img {max-width: calc(100vw - 50px);}
.div-body {margin:0 auto;}
.div-both {position:relative;margin-top:1em;}
.div-outer {}

#mainos-sky {box-sizing:border-box;transition:height 0.7s;overflow-x:auto;}
#mainos-oikea {background:#fff;}

.top-margin {margin-top:78px;}
.top-menu a {display:inline-block;line-height:28px;margin:0 0.5em;padding:0 4px 0 0;border-bottom:2px solid transparent;}
.top-menu a:hover {border-color:#E73E32;}
.top-menu a::before {content:"\f078";font-family:icomoon;color:#fff;margin:0 0.5em 0 0;}
.top-menu .act {border-color:#407EF2;pointer-events:none;}

.cell-main {}
.cell-right {text-align:center;}

.cell-head {letter-spacing:1px;color:#fff;line-height:1.75;text-shadow:1px 1px 1px rgba(0,0,0,0.5);border:0.25em solid #fff;}
.head-main {background:#407ef2;padding:0 0 0 1em;position:relative;}
.head-right {background:#E73E32;padding:0;text-align:center;}

.div-inner {word-wrap:break-word;color:#2d3d4d;background:#fff;user-select:text;-moz-user-select:text;overflow-x:auto;}
.div-inner a {color:#0084b4;}
.div-inner a:hover {text-decoration:underline;}
.div-inner img {max-width:100%;}

.footer {background-image:linear-gradient(0deg,#4466af,#002050 30%);border-top:0.5em solid #000;}
.tbl_footer {}
.tbl_footer nav {display:inline-block;margin:0 0.5em 0 0;padding:0.5em;vertical-align:top;}
.tbl_footer a {display:block;line-height:1em;color:#407EF2;padding:0.5em 0 0.5em 0.5em;}
.tbl_footer a::before {content:"\f078";font-family:icomoon;color:#FEB201;margin:0 0.5em 0 0;display:inline-block;}
.tbl_footer a:hover {text-decoration:underline;color:#FEB201;}
.div_footer {height:120px;background:url(/img/tow-profile-1.webp) 0 0 repeat-x;}

.help-box {position:relative;font-size:0.875em;background:#D7E1EE;color:#000;border:1px solid #B7B7F1;padding:0 0.5em 0.5em 0.5em;border-radius:2px;text-align:left;}
.help-box p {margin:0.5em 0 1em 0;}

/* instead of table */
.grid {box-sizing:border-box;max-width:100%;line-height:1.25;} /* not needed: display:table ??? */
.grid dl {margin:0.25em 0 0 0;}
.grid dt {font-size:0.875em;font-weight:bold;margin:0;}
.grid dd {margin:0;padding:0.25em 0;max-width:100%;}
.grid .celli {margin:0;padding:0 0 1em 0;color:#A04088;font-size:0.875em;line-height:normal;}
.grid .inp {max-width:100%;}


/* LOAD FILE: /testing-only.txt Not Found 404! */

.kill-bgnd {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,90,0.3) url(/img/bg-vinoristikko.png);opacity:0;transition:0.35s;}
.dialog {background:#F0F4F9;box-shadow:0 0 2em rgba(0,0,0,0.5);overflow:hidden;cursor:default;transition:0.35s ease-out;opacity:0;max-width:96%;}
.dialog.trans {transform:scale(0.9) translate(-55%,-55%);}
.dialog.show {opacity:1;}
.dialog.trans.show {transform:scale(1) translate(-50%,-50%);}
.dialog .head {position:relative;font-size:1.125em;padding:0.25em 8px 0.2em 40px;background:url(/img/mesta24-icon-32x32.png) 8px center no-repeat, linear-gradient(#004DB3,#112055);background-size: 24px 24px,auto;color:#fff;letter-spacing:1px;}
.dialog .outer {position:absolute;left:0;top:0;right:0;bottom:0;color:#2d3d4d;visibility:hidden;opacity:0;}
.dialog .outer.show {visibility:visible;transition:opacity 0.35s;opacity:1;}
.dialog .inner {position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto;scrollbar-color:#a6c1cE #F0F4F9;scrollbar-width:thin;user-select:text;}
.dialog .inner a {color:#0033CC;}
.dialog .inner hr {margin:0 0 2px 0;}
.dialog .inner iframe {border:none;background:transparent;width:100%;height:100%;}
.close {float:right;margin:-0.25em 0 0 0.5em;width:42px;height:16px;background:url(/img/close_nad.png);cursor:pointer;}
.close:hover {background-position: -42px 0;box-shadow:0 0 16px #fff;}
.close:active {background-position: -84px 0;}
.dialog .statusbar {position:absolute;left:0;right:0;background:#6699ff;color:#fff;text-align:center;border-top:1px solid #3377ff;}
.dialog .btn-con {position:absolute;left:0;right:0;background:rgba(0,0,100,0.1);text-align:center;border-top:1px solid rgba(0,0,100,0.2);}
.dialog .btn-con button {margin:0.5em;width:7em;background:rgba(255,255,255,0.35);border:0.125em solid rgba(0,0,100,0.3);border-radius:0.25em;transition:0.25s;}
.dialog .btn-con button:hover {background:rgba(255,255,255,0.55);border-color:rgba(0,0,0,0.55);}
/* dialogs title */
.titlecut {display:block;white-space:nowrap;max-width:calc(100% - 50px);overflow-x:hidden;text-overflow:ellipsis;}

/* dialog / viewer: */
.view-btn {display:inline-block;height:28px;width:28px;margin:0 0.5em;background:url(/img/viewer-ctrls.png) 0 0 no-repeat;}
.view-btn.back {background-position:-4px 0px;}
.view-btn.play {background-position:-34px 0px;}
.view-btn.pause {background-position:-34px -31px;}
.view-btn.fwrd {background-position:-65px 0px;}

.bgnd {background:url(img/bg-raster.png) #EEEEFC;}
.dialog-top {background:#fff;border-bottom:1px solid #BFC8CE;padding:8px;margin:0 0 0.5em 0;}
.dialog-top h2 {line-height:50px;margin:0 50px 0 0;text-align:center;font-weight:400;color:#FEB201!important;white-space:nowrap;}
.dlg-h2 {text-align:center;padding-right:52px;}

.dlg-toast {position:fixed;left:50%;bottom:20%;max-width:50%;text-align:center;transform:translateX(-50%);padding:0.25em 1em 0.25em 1em;background:#000;color:#fff;box-shadow:0 0 1em #000;transition:opacity 0.5s;overflow:hidden;}

.maxw50 {max-width:50%!important;}

@media (min-width:1240px) {
	/* DESKTOP = 0 */

	/* keskittää waitin ja dialogin cell-mainiin nähden
	 * waitin -96 ja -160 (0.5 * right.cell.width + gap 20 )

	#wait {margin-left:-224px;}
	.dlg-toast {margin-left:-160px;}*/

	.div-body {max-width:1240px;}
	.top-menu {}
	.div-outer {width:80%;max-width:920px;}
	.cell-right {position:absolute;top:0;right:0;width:300px;overflow:hidden;}
	.div-inner {padding:1em 1em 0.25em 2.5em;min-height:400px;}
}

@media (min-width:800px) {
	.help-box {float:right;width:12em;margin:0 0 1em 1em;}
	/* instead of table */
	.grid {display:table;}
	.grid dl {display:table-row;}
	.grid dt {display:table-cell;padding:0 1em 0 0.5em;vertical-align:middle;}
	.grid dd {display:table-cell;vertical-align:middle;}
}
@media (min-width:1025px) {
	.top-menu {}
	.footer {margin-top:2em;}
}
@media (max-width:1024px) {
	.top-menu {display:none;}
	.footer {margin-top:2em;}
}

@media (max-width:1239px) {
	/* MOBILE = 2 */
	.div-body {max-width:980px;}
	.div-user-top {padding-right:0.5em;}
	.top-menu {padding-left:0.5em;}
	.top-menu a {min-width:8.75em;}
	.div-both {}
	.div-inner {padding:1em 2.5% 0.25em 2.5%;margin-bottom:1em;}
	.mobi25 {max-width:35%!important;}
	.mobi35 {max-width:35%!important;}
	.mobi20 {max-width:25%!important;}
	.mobi50 {max-width:50%!important;}
}

@media (max-width:440px) {
	/* kapea Mobile */
	.mobiclear {clear:both;}
	.grid {line-height:1;}
	.top-margin {margin-top:68px;}
	.cell-head {border-width:0.25em 0;}
}
/* 	smartphones, touchscreens: coarse (karkea) pointing device
 *https://css-tricks.com/touch-devices-not-judged-size */
@media (pointer:coarse) {
	.loose {padding:0.5em 0;}
	.loose-mobi li {padding:0.5em 0;}
	.loose-mobi > div {margin:0.5em 0;}
	.loose-mobi > span {margin-bottom:0.5em;display:inline-block;}
}

.sidemenu-btn {position:fixed;top:18px;right:14px;color:#fff;font:32px/34px icomoon;z-index:6;width:34px;text-align:center;background:rgba(0,19,80,0.5);cursor:pointer;transition:color 0.5s;}
.sidemenu-reload {position:absolute;bottom:8px;right:10px;color:rgba(255,255,255,0.2);cursor:pointer;}
#sidemenu {position:fixed;top:0;width:20em;max-width:100%;height:100dvh;border-left:2px solid #000;opacity:0;background:#002050;z-index:5;overflow-y:hidden;transition:0.35s;right:0;transform:translateX(100%);}
.sidemenu-main {display:flex;flex-direction:column;box-sizing:border-box;padding:1em 0.5em 0 1em;height:100%;text-align:left;}
.sidemenu-main hr {border-color:rgba(255,255,255,0.2);margin:2px 0;}
.sidemenu-main a {text-decoration:none;color:#b0e0e6;}
.sidemenu-scroll {flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent;scrollbar-gutter:stable;}
.mitem {display:block;line-height:1em;padding:0.55em 1em 0.55em 0.5em;cursor:pointer;}
.mitem::before {content:"\f078";font-family:icomoon;margin:0 0.5em 1em 0;color:#FFD700;}
.mitem.disabled {color:rgba(255,255,255,0.5);pointer-events:none;}
.mitem.act {color:#FFD700;background:rgba(0,0,0,0.3);}
.mitem.arrow::after {content:attr(data-arrow);font-family:icomoon;float:right;color:red;}
.mitem:hover {background:rgba(0,0,0,0.2);}


.mitex {display:block;line-height:1em;padding:0.5em 1em 0.5em 0.5em;cursor:pointer;color:#407EF2;}
.mitex:hover {background:#B2E0FF;}

/*
.yhteisomenu {margin:0;padding:0.35em 0 0.35em 0;border:0.25em solid #f8f8ff;border-top:none;background:#D8BFD8;}
.yhteisomenu .mitem {float:left;padding-right:1.5em;margin:0 0 0 0.5em;}
.yhteisomenu .mitem.act {color:#843670;background:#EFE5EF;}
*/

.hand {cursor:pointer;}
.icomoon {font-family:icomoon!important;}
.icomoon.ok::before {content:"\ea10";color:#009900;}
.icomoon.not::before {content:"\e901";color:#FF3300;}

.icon::before {font-family:icomoon;vertical-align:bottom;margin:0 0.5em 0 0;}
.icon.home::before {content:"\e903";}
.icon.search::before {content:"\f02e";}
.icon.pics::before {content:"\e90e";}
.icon.notify::before {content:"\e951";}
.icon.settings::before {content:"\f02f";}
.icon.memo::before {content:"\e907";}
.icon.info::before {content:"\ea0c";}
.icon.help::before {content:"\ea09";}
.icon.ok::before {content:"\ea10";color:#009900;}
.icon.not::before {content:"\e901";color:#FF3300;}
.icon.list::before {content:"\e9bb";}


.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.red {color:red;}
.clear {clear:both;}
.pre-wrap {white-space:pre-wrap;} /* */
.coverup {margin:0;height:0;overflow:hidden;transition:height 0.5s;}

.hidden {visibility:hidden;position:absolute;top:-99999px;left:-9999px;}
.capper {clear:both;margin-top:3em;}

.subhead {color:#AC3636;}
.resepti {color:#006400;min-height:102px;padding:0.5em 0 0.5em 0;background:#EEE8AA;}
.resepti img {float:right;margin:0.5em;}
.resepti ul {padding:0 0 0 2em;margin:0;}

#path,#path2 {font-size:0.9125em;color:#777;white-space:normal;}
.date {font-size:0.875em;color:#555;margin:3em 0 3em 0;}
.date::before {content:"\e94e";font-family:icomoon;margin-right:0.5em;}

#alert {float:left;width:14rem;padding:0 19px 0 8px;}
#message {background:rgba(255,255,0,0.6);border:1px solid #FFD700;margin-top:8px;padding:8px;border-radius:8px;}

.listing {}
.listing li {margin:0.4em 0 0.4em 0;}
.tool_bar {padding:3px 8px 3px 8px;background:#E6E6FA;color:#8080C0;}

.index {counter-reset:index;}
.index.intrex h2 {font-size:1.125em;display:inline-block;font-weight:bold;width:1.7em;text-align:center;padding:0.25em 0 0.25em 0;background:#F3E113;color:#7d551c;text-shadow:none;border:1px solid #DAA559;}
.index.intrex h3 {margin:0;}
.index.intrex p span {color:#DAA520;}
.index.intrex p {margin:0 0 1em 0px;font-size:0.875em;}
.index dd {margin:0 0 0 50px;}
.index dd:before {color:#CC3333;width:40px;float:left;padding:0;margin:0 0 0 -44px;text-align:center;
	counter-increment:index;     /* Increment the index counter */
	content:counter(index) ".";  /* Display the counter (index) */
}

.icon_usr {display:inline-block;width:50px;height:50px;background:url(img/user-icons.png) 0 6px no-repeat;}
.icon_usr.login {background-position: -56px 0;}
.icon_usr.signup {background-position: -110px 0;}
.icon_usr.edit {background-position: -160px 0;}
.icon_usr.del {background-position: -210px 0;}
.icon_usr.key {background-position: -270px 0;}
.icon_usr.member {background-position: -384px 0;width:80px;}

button {font:inherit;cursor:pointer;outline:none;user-select:none;}
button *, .valign {vertical-align:text-bottom;}
.boton {font:inherit;line-height:1.25;padding:0.25em 1em;color:#fff;margin:0 0.5em 0 0;border-radius:0.25em;border:2px solid #fff;background:none;}
.boton.w100 {display:block;}
.boton img {float:right;margin:0 -11px 4px 20px;}
.boton:hover {text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.boton a {color:inherit;cursor:pointer;}
.boton a:hover {color:inherit;}
.boton em {color:#000;font:italic 0.875em/140% sans-serif;display:block;margin:0.25em 55px 0 0;}
.boton.right {margin:0 0 0.5em 1em;}
.boton.setti {margin:0.25em 0.5em 0.25em 0;width:12em;max-width:47%;font-size:0.8125em;}
.boton.default {background-color:#7D81B7;}
.boton.orange {background-color:#FF9900;}
.boton.yellow {background-color:#F5DB00;color:#990000;}
.boton.yellow a {color:#FF4500;}
.boton.yellow:hover {text-shadow:1px 1px 1px #FFFF66;}
.boton.violet {background-color:#993366;}
.boton.violet em {color:#FFCC33;}
.boton.green {background-color:#36B056;}
.boton.black {background-color:#222;}
.boton.black {color:#0066FF;}
.boton.blue {background-color:#407EF2;}
.boton.blue em {color:#66FFFF;}
.boton.pink{background-color:#FF00CC;}
.boton.red {background-color:#E31C19;}
.boton.dusky {background-color:rgba(0,0,0,0.2);}
.boton.dusky em {color:#000;}
.boton.clear {border:none;background:transparent;color:#407ef2;}
.boton.shade {box-shadow:2px 2px 6px rgba(255,255,255,0.2) inset, 2px 2px 8px rgba(0,0,0,0.2);}

.boton:disabled {color:#999;background-color:#D1D1D5;text-shadow:1px 1px 1px #fff;pointer-events:none;}
.boton:disabled a {cursor:default;color:inherit;}
.boton:disabled em {color:inherit;}
.boton:disabled img {filter:grayscale(100%);opacity:0.4;}
.boton:active {border-color:rgba(0,0,0,0.25)}
.boton:focus {border-color:yellow;}


.upper {text-transform:uppercase;}
.nowrap {white-space:nowrap;}
.w100 {width:100%;box-sizing:border-box !important;}

pre,code {tab-size:4;}
form,video,iframe {padding:0;margin:0;display:block;max-width:100%;}
iframe {border:none;}
.form {font-size:1rem;box-sizing:border-box;position:relative;}
.form h5 {font-size:0.875em;margin:0.5em 0 0.25em 0;}
.form .h5 {font-size:0.875em;}
.form a {color:#0084b4;}
.form a:hover {text-decoration:underline;}
.form .tbl {border-spacing:0;}
.form .inp {font:1.0em/140% monospace;padding:0.25em 0.5em 0.2em 0.5em;border:1px solid #BFC8CE;border-radius:2px;color:#002287;background-color:#fff;outline:none;box-sizing:border-box;scrollbar-width:thin;}
.form .inp.txt {border:none!important;background-color:rgba(255,255,255,0.5)!important;}
.form .inp.sans {font:inherit;}
.form .inp:disabled {color:#777;border:1px solid #aaa;background-color:#f0f0f0;}
.form input:read-only {color:#777;}
.form textarea {resize:none;margin:0;outline:none;display:block;}
.form .item:hover {background-color:#cce6ff;cursor:pointer;}
.form .item.act {background:lightblue;}

.font13 {font-size:0.8125em!important;}
.font14 {font-size:0.875rem!important;}
.font16 {font-size:1rem!important;}
.font18 {font-size:1.125rem!important;}

/* yhteisö, jäsen yms. luettelot */
.tabla {border-spacing:0;background:#E6E6FA;border:1px solid #778899;border-collapse:collapse;}
.tabla td {padding:0.5em;}
.tabla .th {font-weight:bold;background:#778899;color:#fff;}
.tabla .th .sbox.checked::before {color:inherit;}
.tabla .bgnd {background:#D3D3F7;}
.tabla .tdc {text-align:center;}
.tabla .smaller {font-size:0.875em;line-height:1.4em;}




/* for custom checkbox & radio
	<label><input type="checkbox" name="cbox1"><b></b>Text here</label>
*/
label {margin-right:1em;line-height:1.25;cursor:pointer;display:inline-block;}
label.nowrap {white-space:nowrap;}
label input {display:none;}
label b {position:relative;display:inline-block;top:0.125em;width:1em;height:1em;background:rgba(0,0,0,0.25);margin:0 0.5em 0 0;}
label b.lite {background:rgba(255,255,255,0.25);}
label input:checked+b {background:#0033ff;color:#fff;}
label input[type="checkbox"]+b {border-radius:0.125em;}
label input[type="checkbox"]:checked+b::after {content:" ";position:absolute;width:0.25em;height:0.5em;left:0;bottom:0.1875em;border-bottom:0.1875em solid #fff;border-right:0.1875em solid #fff;transform-origin:bottom right;transform:rotate(45deg);border-radius:0.125em;}
label input[type="radio"]+b {border-radius:50%;box-sizing:border-box;}
label input[type="radio"]:checked+b {background:#fff;border:0.25em solid #0033ff;}
label.disabled {opacity:0.75;pointer-events:none;filter:blur(0.5px) sepia(75%);}
fieldset:disabled > * {opacity:0.75;pointer-events:none;filter:blur(0.5px) sepia(75%);}


.radioblock {position:relative;cursor:pointer;}
.radioblock::after {content:"";font-weight:400;position:absolute;right:0.15em;top:0em;}
.radio:checked + .radioblock {outline:0.25em dotted rgba(255,100,0,0.85);outline-offset:0.25em;}
.radio:checked + .radioblock::after {content:"\2605";color:#000;}


.sbox {font-weight:400;cursor:pointer;display:table;border-spacing:0;padding:0 2px 0 2px;}
.sbox:hover {text-decoration:underline;}
.sbox::before {font-family:icomoon;content:"\ea53";margin-right:0.75em;opacity:0.55;display:inline-block;}
.sbox.checked::before {content:"\ea52";opacity:1;color:#0066CC;}
.sbox.disable {pointer-events:none;}

.lnk {padding-left:24px;background:url(img/i_link.png) 2px center no-repeat;}
.google {padding-left:24px;background:url(img/i-google.png) 2px center no-repeat;}
.linko {padding-left:1.5em;background:url(img/linko.png) 2px center no-repeat;background-size:1em 1em;}
.wiki::before {content:"W";font:0.8125em/1 serif;box-sizing:border-box;padding:1px 2px 0 2px;background:#555;color:#fff;margin:-0.2em 0.4em 0 2px;border-radius:0.2em;}
.youtube {padding:0 0 0 28px;background:url(img/youtube-icon.png) 2px center no-repeat;}
.youtube-thumb {padding:0 0 40px 0;border:4px solid #E22A26;background:#E22A26 url(img/youtube.png) center bottom no-repeat;cursor:pointer;}
.youtube-thumb .txt {box-sizing:border-box;position:absolute;width:100%;bottom:40px;color:#fff!important;background:rgba(0,0,0,0.4)!important;}

.map {padding-left:30px;background:url(img/i-map.png) 2px center no-repeat;}

.hide {display:none;}
a.disabled {color:rgba(0,0,0,0.35);text-shadow:1px 1px 2px #fff;pointer-events:none;}

.email {background:url(img/i-email-s.png) 0 center no-repeat;padding:0.25em 0 0.25em 24px;}
.lnk-hihitys {background:url(img/i-hihitys.gif) 0 center no-repeat; padding:0 0 0 26px;line-height:26px;}

.person {display:inline-block;margin:0 16px 16px 0;background:#E6E6FA;font-size:13px;color:#444;font-family:sans-serif;}
.person img {background:#f0f0f0;border-radius:4px;}
.person .data {display:inline-block;vertical-align:top;padding:4px 16px 0 16px;width:200px;height:148px;overflow:auto;}
.person .title {letter-spacing:1px;color:#000;}
.person .name {margin:2px 0 14px 0;font-weight:bold;}
.person a {color:#0033FF;}
.person-select {text-align:center;margin:0.5em;float:left;}
.person-select img {padding:2px;cursor:pointer;width:6rem;height:6rem;border-radius:4px;}
.person-select img:hover {background:rgba(255,165,0,0.5);}
.person-select p {margin:0;font:0.8125em/100% sans-serif;color:#808080;}

.pic {position:relative;}
.pic.left {margin:0 1em 0.5em 0;float:left;}
.pic.right {margin:0 0 0.5em 1em;float:right;}
.pic.center {display:table;text-align:center;margin:2em auto;clear:both;}
.pic.frame {padding:0.375em;background:#fff;box-shadow:0 0 0.35em rgba(0,0,0,0.2);}
.pic .txt {display:flex;color:#586878;font-size:13px;line-height:125%;margin:0;padding:0.25em;text-align:center;}
.pic .txt i {width:0;flex-grow:1;}
.thumbnails img,.thumb {margin:0 8px 8px 0;width:80px;height:80px;border:4px solid #fff;box-shadow:0 0 6px #A9A9A9;}
.thumbnails img:hover {cursor:pointer;box-shadow:0 0 12px #9394BF;}

/*div.center {display:table;margin:2em auto;clear:both;}*/

.video-con {position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.video-con::after {content:"";color:#fff;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:url(img/video-64.png) center center no-repeat;opacity:0.75;}
.video-con:hover::after {opacity:1;}
.video-con .obj {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
.cue-yellow::cue {background:rgba(0,0,0,0.5);color:#FFFF00;}
.watermark {position:absolute;top:4px;right:4px;opacity:0.5;z-index:3;pointer-events:none;}


/*.happen {margin:2em 0 1em;padding:1em 8px 1em 2px;border-radius:9px;width:100%;}
.happen.pad {padding:1em;box-shadow:0 0 64px #E6E6FA inset;border:1px solid #D7D7F7;}
.happen h2 {margin:0 0 1em 0;color:#4169E1;}
.happen img {}
.happen .rside {font-size:1.15em;color:#4682B4;padding-left:2em;}
*/


/* EDITING PAGE */
.page-tbl {}
.page-tbl .th {text-align:center;font-weight:bold;}
.page-tbl.fixed {table-layout:fixed;}
.page-tbl.border {border-spacing:0;border:2px solid;border-color:transparent;border-collapse:collapse;}
.page-tbl.border.sys {background-color:#F0F0F8;border-color:#b0b0b8;color:#303038;}
.page-tbl.border tbody {border-color:inherit;} /* firefox needs this */
.page-tbl.border tr {border-color:inherit;}
.page-tbl.border td {border:1px solid;border-color:inherit;}
.page-tbl.border.sys .th {background-color:#c0c0c8;}
.page-tbl td {padding:0.25em 0.5em;}

.quoter {padding:0 0 0 4em;position:relative;}
.quoter::before {font:bold 4em serif;position:absolute;top:0;left:0;bottom:0;width:1em;color:#fff;text-align:center;}
.quoter.norma {background:#bbb;}
.quoter.norma::before {content:"\201D";background:#333;}
.quoter.infoa {background:#D3E3F7;}
.quoter.infoa::before {content:"i";background:#0033FF;}
.quoter.warna {background:#FFAC97;color:#000;}
.quoter.warna::before {content:"!";background:#FF3300;}
.quoter p {margin:0;padding:0.5em 1em;}

.sanottu {padding:8px;background:#E6E6FA;color:#003366;border-radius:6px;}
.sanottu p {margin:1em 0 0 0;font-size:0.75em;text-align:right;}


/* e-books */



/* in body num counter & set to zero */
.num {border-top:2px solid #CECEF5;padding:1.5em 0 2em 0;margin:0;}
.num.img50 img {max-width:50%;}
.num::before {border-radius:0.25em;background:#CECEF5;color:#333;float:left;padding:0.1em 0.5em 0.1em 0.5em;margin:-2.5em 1em 0.0em 0;
	counter-increment:num;     /* Increment the num counter */
	content:counter(num) ".";  /* Display the counter (num) */
	cursor:pointer;
}


/* MOBILE:


  .view-dlg {position:fixed;top:0;left:0;overflow:auto;box-sizing:border-box;width:100%;height:100%;background:#fff;color:#333;}
  .view-dlg .title {position:relative;overflow:hidden;line-height:24px;padding:0.25em 2em 0.25em 0.5em;background:#0033CC;color:#fff;font-weight:bold;}
  .view-dlg .inner {position:relative;}
  .view-dlg .inner > * {display:block;margin:0;xwidth:100%;}
  .view-dlg .html {box-sizing:border-box;overflow:auto;}
  .view-dlg .side {font-size:0.875em;padding:1em;box-sizing:border-box;}
  .view-dlg .side.black {background:#000;color:#ddd;}
  .view-dlg .side a {color:#4169E1;}
  .view-dlg .active {color:#999!important;pointer-events:none;}
  .view-dlg .caption {font-size:0.875em;line-height:normal;padding:0.25rem 0 0.25em 0;text-align:center;}
*/


.dlgs {padding:1.5em 70px 2em 70px;box-sizing:border-box;min-height:4em;}
.dlgs a {color:#0000ff;}
.dlgi {position:absolute;top:8px;left:8px;width:60px;height:64px;background:url(/img/dlg-icons.png) no-repeat;}
.dlgi.err {background-position: 0 0;}
.dlgi.info {background-position: -60px 0;}
.dlgi.ok {background-position: -120px 0;}
.dlgi.yesno {background-position: -180px 0;}
.dlgi.alert {background-position: -240px 0;}
.dlgi.not {background-position: -310px 0;}
.dlgi.stop {background-position: -370px 0;}
.dlgi.remark {background-position: -430px 0;}
.dlgi.add {background-position: -495px 0;}
.dlgi.edit {background-position: -556px 0;}
.dlgi.swap {background-position: -684px 0;}
.dlgi.new {background-position: -747px 0;}
.dlgi.prompt {background-position: -808px 0;}
.dlgi.mar {margin:0 -24px 0 0;}


.popup {border-radius:0.35em;position:absolute;z-index:9;box-shadow:0.2em 0.2em 0.75em rgba(0,0,0,0.5);margin:0.25em 1em 0 0;letter-spacing:0.4px;}
.popin {padding:0.5em 1em;}
.poper {background-color:#FF6347;color:#fff;}
.popup.ptr::before {content:"";position:absolute;width:1em;height:1em;left:1em;top:-0.5em;background:inherit;transform:rotate(45deg);}

.surf {position:fixed;right:1rem;bottom:1rem;padding:0.5rem 1rem 0.5rem 1rem;border-radius:0.5rem;color:#fff;background:rgba(64,126,242,0.5);border:2px solid #fff;transition:opacity 0.5s;}
.surf b {cursor:pointer;}
.surf b:hover {color:#FFFF00;}
.up-down {position:absolute;right:1em;bottom:1em;color:#B0E0E6;}
.up-down b {cursor:pointer;}
.up-down b:hover {color:#ffff00;}


/* file: /chat/chat.css */

.chat-main-con {
	--bgnd-chat:rgba(255,255,255,0.5); /* #E4F1F7 */
	--brd-color:#81c1c1; /* #A0CAE1;*/
}

.chat-standby {background:url(/chat/img/speech-rite.webp) 8px 0px no-repeat;text-align:center;}

/* ATTENTION: all sizes in pixels, not em! */
.chat-main-con {position:relative;background:var(--bgnd-chat);border-radius:4px;border:2px solid var(--brd-color);overflow:hidden;}
.chat-container {border-radius:4px;font:16px/1.25 'Noto Sans',sans-serif;transition:0.5s opacity;user-select:text;}
.chat-container.disabled {opacity:0.5;pointer-events:none;}
.chat-top {background:#C6E1EE;display:flex;align-items:center;padding:4px 0 4px 8px;border-bottom:2px solid var(--brd-color);color:#000;}
.chat-top-ico {}
.chat-con-con {position:relative;font-size:15px;color:#333;background:#E4F1F7 url(/img/bg-abs.png);}
.chat-all-con {padding:8px;overflow:hidden scroll;scrollbar-color:#C6E1EE #E4F1F7;scrollbar-width:thin;}
.chat-his-con {transition:opacity 500ms;opacity:0;}
.chat-pad-expand {padding-bottom:64px;}
.chat-typing-con {position:absolute;left:8px;bottom:8px;right:16px;font-size:14px;line-height:20px;color:green;}
.chat-ico {font-family:icomoon;font-size:18px;cursor:pointer;flex:0;padding:0 8px;}
.chat-ico:hover {color:#0000ff;}
.chat-row {margin:8px 0;}
.chat-row.chat-left {text-align:left;}
.chat-row.chat-right {text-align:right;}
.chat-row.chat-center {text-align:center;}
.chat-row .avatar {width:32px;height:auto;float:left;border-radius:50%;margin:4px 8px 8px 0;}
.chat-row .name-time {font-size:0.8125em;margin:0;}
.chat-row .chat-cell {display:inline-block;margin:0;padding:0.05em 0.5em 0.15em 0.5em;min-width:25%;max-width:80%;word-wrap:break-word;}
.chat-row .chat-cell .img-thumb {cursor:pointer;}
.chat-row .chat-cell.chat-she {color:#000;background:rgba(255,255,255,0.9);border-radius:0.25em;white-space:pre-line;}
.chat-row .chat-cell.chat-she .name-time {color:#4682B4;}
.chat-row .chat-cell.chat-ran {color:#000;}
.chat-row .chat-cell.chat-me {color:#124B6F;background:rgba(111,176,212,0.5);border-radius:0.25em;}
.chat-row .chat-cell.chat-me .name-time {color:#fff;}
.chat-row .chat-cell.chat-stat {color:#555;background:rgba(0,90,0,0.05);}
.chat-row .chat-cell.chat-info {color:#ffffff;background:rgba(85,170,127,0.95);border-radius:0 16px 16px 16px;}
.chat-row .chat-cell.chat-info::before {content:"\ea0c";font:1.5em/1 icomoon;color:#ffffff;float:left;margin:4px 4px 2px 0;}
.chat-row .chat-cell.chat-attn {color:#000;background:#ffaaff;border-radius:0 16px 16px 16px;padding-right:1.5em!important;}
.chat-row .chat-cell.chat-attn::before {content:"\e91a";font:1.5em/1 icomoon;color:#ffffff;float:left;margin:4px 4px 2px 0;}
.chat-row .chat-cell.chat-alarm {color:red!important;}
.chat-row .chat-cell.chat-hr {display:block!important;max-width:100%;margin-top:1em;color:#000;border-bottom:1px solid #c5dfed;}

.chat-row .reaction {clear:both;margin-top:0.25em;color:#333;border-top:1px solid #c5dfed;}
.chat-row .reaction span {margin:0 0.5em;cursor:pointer;color:#0084b4;}
.chat-row .reaction span:hover {color:#0000ff!important;}
.chat-row .reaction .like::before {content:"👍";margin-right:0.25em;}
.chat-row .reaction .likenot {color:red;}
.chat-row .reaction .likenot::before {content:"👎";margin-right:0.25em;}
.chat-row .msg-less {padding:4px 0;text-align:left;min-height:1.5em;max-height:9.5em;overflow:hidden;}
.chat-row .msg-more {padding:4px 0;text-align:left;}
.chat-quote {color:#990099;font-size:0.9125em;display:block;background:rgba(0,0,0,0.05);text-align:left;padding:4px;margin:2px 0;border:1px solid rgba(90,0,90,0.1);}

.chat-form {background:#E4F1F7 url(/img/bg-lines.png);overflow:hidden;border-top:2px solid var(--brd-color);}
.chat-form.disabled {opacity:0.5;pointer-events:none;filter:brightness(70%);}
.chat-edit {padding:0.25em 0.5em;border-radius:2px;border:2px solid var(--brd-color);min-height:100px;max-height:200px;box-sizing:border-box;word-wrap:anywhere;overflow-wrap:anywhere;white-space:break-spaces;max-width:100%;background:#fff;color:#333;overflow-y:scroll;overflow-x:hidden;outline:none;scrollbar-color:#C6E1EE #fff;scrollbar-width:thin;}
.chat-edit:empty:before{content:attr(placeholder);color:#bbb;pointer-events:none;display:block;/* For Firefox */}
.chat-btn-con {display:flex;align-items:center;font:20px/1.25 monospace;margin:0.0em 0;white-space:nowrap;overflow:hidden;}
.chat-btn-con button {border:1px solid #A0CAE1;background:#fff;width:32px;padding:2px 0;margin:0 8px 0 0;cursor:pointer;}
.chat-red {color:red!important;}
.chat-look {color:#00aa00;cursor:pointer;}
.chat-look::before {content:"\e9ce\A0";font-family:icomoon;}
.chat-look:hover {color:#0000ff;}
.chat-look-show {background:#ffff00!important;color:#000!important;}
.chat-read-more {display:inline-block;margin:8px!important;padding:2px 8px;border-radius:12px;background:#fff;border:1px solid #000;}
.chat-read-more::after {content:"\f078";font-family:icomoon;margin-left:12px;}

.chat-set-con {position:absolute;}
.chat-set-item {margin:0;padding:0.25em 0.5em;cursor:pointer;}
.chat-set-item:hover {background:#3399ff;color:#fff;}

.chat-btn-con .active {background:#A0CAE1;}
.chat-img-btn {width:32px;height:32px;cursor:pointer;}
.chat-emoji-con {font:1em sans-serif;padding:1em;}
.chat-emoji-con p {font-size:0.875em;margin:0;clear:both;}
.chat-emoji-con span {font-size:28px;display:block;width:40px;height:40px;padding-top:6px;text-align:center;float:left;cursor:pointer;}

.chat-link {cursor:pointer;color:#0084b4;position:relative;display:inline-block;padding:4px 0;}
.chat-link.ikon::before {font-family:icomoon!important;margin-right:0.5em;color:#000;}
.chat-link.link::before {content:"\e9cb";}
.chat-link.imge::before {content:"\e927";}
.chat-link.file::before {content:"\e922";}
.chat-link.video::after {content:url(/img/video-50.webp);position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:1;}
.chat-link-title {display:block;font-size:0.875em;color:#555;width:180px;}

/* editor */
.chat-editor {position:relative;border-top:2px solid var(--brd-color);border-radius:0 0 4px 4px;padding:8px;background:#E4F1F7 url(/img/bg-lines.png);}
.chat-editor .btns {margin:0;padding:0;border:none;width:calc(100% - 48px);}
.chat-editor .btns .cbutton {border:1px solid #A0CAE1;background:#fff;font:16px/1 icomoon;width:32px;height:32px;margin:0 8px 8px 0;cursor:pointer;overflow:hidden;}
.chat-editor .btns .emoji {}
.chat-editor .btns .active {background:#A0CAE1;}
.chat-editor .gap {transition:300ms;height:0;}

/* celem = content editable element, usually p. here we use border:4px instead of padding:4px! */
.chat-editor .celem {border:4px solid transparent;min-height:100px;max-height:300px;outline:none;caret-color:red;white-space:pre-wrap;}
.chat-editor .celem .img-thumb {}
.chat-editor .celem:empty:before{content:attr(data-placeholder);color:#bbb;pointer-events:none;display:block;/* For Firefox */}
.chat-editor .celem.active {}
.chat-editor .celem code {color:#ff5500;}
.chat-editor .celemcon {width:calc(100% - 48px);background:#fff;margin:0;overflow:hidden scroll;border:2px solid var(--brd-color);border-radius:4px;scrollbar-color:#A0CAE1 #fff;scrollbar-width:thin;}
.chat-editor .ritebox {position:absolute;width:48px;right:2px;bottom:10px;text-align:center;overflow:hidden;}
.chat-editor .ritebox .avatar {padding-bottom:8px;}
.chat-editor .updown {position:absolute;width:48px;right:2px;top:8px;color:#0084b4;font:22px/32px icomoon;text-align:center;}
.chat-editor .updown span {margin:0 4px;cursor:pointer;}
.chat-editor .updown span:hover {color:#0000ff;}
/* chat ping */
@keyframes ping {0%{opacity:1}100%{transform:scale(3)}}
.ping {font:8px/1 sanserif;width:8px;height:8px;border-radius:50%;}
.ping-outer {margin:0 6px;background-color:#00ff00;transition:0.5s;}
.ping-inner {opacity:0;background-color:#ffaa00;}
.ping-start {animation:ping 1s cubic-bezier(0.2,0.6,0.35,0.8) 1;}
.ping-yellow {background-color:#ffff00!important;}
.ping-red {background-color:red!important;}
/* pulsar shows someone is typing */
.pulsar-bubble {margin:0;padding:12px 32px;display:inline-block;white-space:nowrap;background:#fff;border:2px solid #A0CAE1;border-radius:0 32px 32px 32px;}
@keyframes pulsar {0%{opacity:1}100%{transform:scale(3) translateX(50%)}}
.pulsar {display:inline-block;font:8px/1 sanserif;width:8px;height:8px;box-sizing:border-box;border-radius:50%;}
.pulsar-outer {margin:0 6px;}
.pulsar-inner {opacity:0;animation:pulsar 1.25s cubic-bezier(0.215,0.61,0.355,1) infinite;}