/* style.v01.css — CSS ของหน้าเว็บ pjline (ไม่ใช้กับหลังบ้าน — adminsys/style.v01.css) ตัวแปรสี/ปุ่ม/pagebar มาจาก style.v95.css ของ pjchat; แก้แล้วเปลี่ยนเลขเวอร์ชันในชื่อไฟล์ */
:root {
	--dark-bg:#161618;
	--dark-bg2:#212124;
	--dark-bgtransparent: rgba(22,22,24,0.6);
	--dark-text:#d0d0d3;
	--dark-text2:#b0b0b3;
	--dark-text3:#909093;
	--dark-textred:#e22;
	--dark-texthl:#fff;
	--dark-textactive:#fff;
	--dark-link:#fff;
	--dark-linkactive:#06c755;
	--dark-linkpj:#06c755;
	--dark-linkpjactive:#3ddc84;
	--dark-border:#545457;
	--dark-bt:#313134;
	--dark-bttext:#b1b1b4;
	--dark-primary:#06c755;
	--dark-primarytext:#fff;
	--dark-error:#e22;
	--dark-errortext:#fff;
	--bg0:#fff;
	--bg:#eee;
	--bg2:#dadada;
	--bg3:#c8c8c8;
	--bg4:#bbb;
	--bgred:#faa;
	--bggreen:#9c9;
	--bgyellow:#ee6;
	--bgorange:#f96;
	--bgbrown:#966;
	--bgpink:#e8d;
	--bgblue:#79e;
	--bgtransparent: rgba(240,240,240,0.6);
	--text:#222;
	--text2:#444;
	--text3:#666;
	--text4:#888;
	--textred:#d00;
	--textgreen:#070;
	--textorange:#d60;
	--textyellow:#870;
	--textbrown:#933;
	--textblue:#04d;
	--textpink:#d119a6;
	--texthl:#000;
	--textactive:#000;
	--link:#000;
	--linkactive:#06a347;
	--linkpj:#06a347;
	--linkpjactive:#058a3c;
	--border:#a2a2a2;
	--bt:#c0c0c0;
	--bttext:#333;
	--btborder:#b0b0b0;
	--btactive:#b0b0b0;
	--btactivetext:#000;
	--btactiveborder:#a0a0a0;
	--primary:#06c755;
	--primarylite:#3ddc84;
	--primarytext:#fff;
	--error:#d00;
	--errortext:#fff;
	color-scheme:light;
}
:root.dark {
	--bg0:#000;
	--bg:#181819;
	--bg2:#28282a;
	--bg3:#38383a;
	--bg4:#48484a;
	--bgred:#811;
	--bggreen:#151;
	--bgyellow:#554700;
	--bgorange:#920;
	--bgbrown:#462222;
	--bgpink:#7c0462;
	--bgblue:#04d;
	--bgtransparent: rgba(22,22,24,0.6);
	--text:#c0c0c0;
	--text2:#a8a8a8;
	--text3:#909090;
	--text4:#787878;
	--textred:#e22;
	--textgreen:#292;
	--textyellow:#dd0;
	--textbrown:#b55;
	--textblue:#69f;
	--textpink:#d119a6;
	--texthl:#eee;
	--textactive:#eee;
	--link:#eee;
	--linkactive:#3ddc84;
	--linkpj:#3ddc84;
	--linkpjactive:#7ff0b0;
	--border:#545456;
	--bt:#313133;
	--bttext:#b1b1b4;
	--btborder:#444;
	--btactive:#414143;
	--btactivetext:#e1e1e4;
	--btactiveborder:#555;
	--primary:#06c755;
	--primarylite:#3ddc84;
	--primarytext:#fff;
	--error:#d22;
	--errortext:#d8d8d8;
	color-scheme:dark;
}
body { margin:0; background-color:var(--bg); font-family:tahoma,Sans-Serif; font-size:11pt; color:var(--text); }
h1 { margin:0; padding:2px 1px; font-size:20pt; }
h2 { margin:0; padding:2px 1px; font-size:16pt; }
h3 { margin:0; padding:2px 1px; font-size:13pt; }
a { text-decoration:none; color:var(--link); }
a:hover { color:var(--linkactive); }
form { margin:0; }
::selection { background-color: var(--primary); color: var(--primarytext); }
#topbar { z-index:1; position:fixed; left:0; top:0; display:flex; align-items:center; box-sizing:border-box; width:100%; max-width:100vw; min-height:44px; padding:0 6px; background-color:#06c755; }
#toplogo { display:inline-block; padding:0 6px; font-size:20pt; font-weight:normal; color:#e6ffef; }
#toplogo b { color:#fff; }
#toplogo:hover { color:#fff; }
#topbarback { max-width:100%; height:56px; }
#topbar .xuser { display:flex; align-items:center; margin-left:auto; font-size:11pt; color:#e6ffef; }
#topbar .xname { display:inline-flex; align-items:center; max-width:40vw; overflow:hidden; margin:0 6px; white-space:nowrap; text-overflow:ellipsis; }
#topbar .xname img { width:30px; height:30px; margin-right:6px; border-radius:50%; background-color:rgba(255,255,255,.25); }
#topbar .xlink, #topbar .xlogin { display:inline-block; padding:12px 8px; color:#e6ffef; }
#topbar .xlogin { margin:0 2px; padding:6px 12px; border-radius:6px; background-color:rgba(0,0,0,.12); color:#fff; }
#topbar .xlink:hover, #topbar .xlogin:hover { color:#fff; text-decoration:underline; }
#topbar .xtheme { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:none; color:#e6ffef; cursor:pointer; }
#topbar .xtheme:hover { color:#fff; }
#topbar .xtheme svg { width:26px; height:26px; }
#topbar .xtheme .xsun, :root.dark #topbar .xtheme .xmoon { display:none; }
:root.dark #topbar .xtheme .xsun { display:block; }
:root.dark #topbar { background-color:#05833a; }
.bt { display:inline-block; box-sizing:border-box; max-width:100%; padding:8px 14px; border-radius:5px; border:1px solid var(--btborder); background-color:var(--bt); vertical-align:top; text-align:center; font-size:14pt; text-decoration:none; color:var(--bttext); cursor:pointer; }
.bt:hover { background-color:var(--btactive); color:var(--btactivetext); }
.bt img { vertical-align:middle; }
.bt.pj { border-color:#06a347; background-color:#06c755; color:#fff; }
.bt.pj:hover { border-color:#058a3c; background-color:#05b34c; color:#fff; }
.bt.red { background-color:var(--bgred); color:var(--text); }
.bt.red:hover { border-color:var(--textred); color:var(--text); }
.bt.green { background-color:var(--bggreen); color:var(--text); }
.bt.green:hover { border-color:var(--textgreen); color:var(--text); }
.bt.yellow { background-color:var(--bgyellow); color:var(--text); }
.bt.yellow:hover { border-color:var(--textyellow); color:var(--text); }
.bt.small { padding:6px 8px; font-size:12pt; }
.pagebar { padding:5px 0 10px 0; text-align:center; font-size:14pt; font-weight:normal; }
.pagebar a { display:inline-block; box-sizing:border-box; min-width:5%; margin:5px 0 0 5px; padding:7px 5px; border:1px solid var(--bg2); background-color:var(--bg2); text-align:center; white-space:nowrap; color:var(--text3); }
.pagebar a:first-child { margin-left:0; }
.pagebar a:hover { border-color:var(--bg3); background-color:var(--bg3); color:var(--text); }
.pagebar .xnav { min-width:10%; padding:7px 10px; }
.pagebar .xcur { padding:7px 10px; border-color:var(--text4); background-color:var(--bg2); font-weight:bold; color:var(--text); }
.pagebar span { display:inline-block; margin:5px 0 0 5px; padding:7px; color:var(--text4); }
.note { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--bg3); background-color:var(--bg2); text-align:center; font-size:18pt; color:var(--text); }
.complete { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--textgreen); background-color:var(--bggreen); text-align:center; font-size:20pt; color:var(--text); }
.none { margin:20px 0; padding:70px 5px; border-radius:15px; border:2px solid var(--bg3); background-color:var(--bg2); text-align:center; font-size:18pt; color:var(--text3); font-style:italic; }
.warn { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--textyellow); background-color:var(--bgyellow); text-align:center; font-size:18pt; color:var(--text); }
.error { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--textred); background-color:var(--bgred); text-align:center; font-size:18pt; color:var(--text); }
.table1 { border-collapse:collapse; border:1px solid var(--bg3); background-color:var(--bg); }
.table1 th { padding:2px; border-width:0 0 1px 0; border-style:solid; border-color:var(--bg3); vertical-align:middle; text-align:center; background-color:var(--bg2); }
.table1 td { padding:3px 2px 2px 2px; border-width:0 0 1px 0; border-style:solid; border-color:var(--bg3); vertical-align:top; text-align:left; }
.mainbox { max-width:990px; margin:0 auto; padding:5px; }
.line_loginbt { display:inline-block; box-sizing:border-box; min-width:150px; height:48px; padding:8px 5px 3px 48px; border-radius:6px; background-color:#06c755; background-image:url('/image/loginbt.png'); background-size:contain; background-repeat:no-repeat; text-align:center; white-space:nowrap; font-size:24px; color:#fff; text-shadow:1px 1px 0px #888; }
.line_loginbt:hover { background-color:#05b34c; color:#fff; text-decoration:none; }
#btbar { margin:30px 0 0 0; padding:20px 5px; border-top:1px solid var(--bg2); text-align:center; font-size:10pt; color:var(--text4); }
#btbar a { display:inline-block; padding:6px 8px; color:var(--text3); }
#btbar a:hover { color:var(--linkactive); }
@media (max-width:500px) {
	#topbar .xname { max-width:28vw; }
	#topbar .xname img { display:none; }
	.note, .complete, .none, .warn, .error { font-size:14pt; }
}