:root {
	--primary: #830705;
	--primarytext: #FFF;
	--primary2: #b90c06;
	--bg: #F0F0F0;
	--bg2: #D0D0D0;
	--bg3: #C0C0C0;
	--bg4: #A0A0A0;
	--bgtransparent: rgba(240, 240, 240, 0.5);
	--bgtransparent2: rgba(240, 240, 240, 0.67);
	--bgyellow: #FFFF77;
	--texthl: #000;
	--text: #222;
	--text2: #444;
	--text3: #666;
	--text4: #888;
	--textdisable: #666;
	--textgreen: #272;
	--textred: #D44;
	--textyellow: #760;
	--border: #888;
	--error: #D00;
	--errortext: #FFF;
}

@font-face {
	font-family: "Kanit";
	src: url("font/Pridi-SemiBold.ttf");
	font-weight: bold;
	font-display: swap;
}
@font-face {
	font-family: "Kanit";
	src: url("font/Pridi-Light.ttf");
	font-display: swap;
}

body { margin:0; padding:86px 0 20px 0; background-color:var(--bg); font-family:Sans-Serif; font-size:12pt; color:var(--text); }
body.xnoscroll { overflow:hidden; }
h1 { margin:10px 0 0 0; padding:0; font-size:24pt; line-height:34px; }
h2 { margin:10px 0 0 0; padding:0; font-size:20pt; line-height:28px; }
h3 { margin:10px 0 0 0; padding:0; font-size:18pt; line-height:26px; }
a { color:var(--text); text-decoration:none; }
a:hover { color:var(--primary); text-decoration:none; }

.mainbox { box-sizing:border-box; width:96%; max-width:1400px; min-height:calc(100vh - 200px); margin:0 auto; padding:20px 0; }

.stclosebt { z-index:1; position:absolute; top:10px; right:10px; display:block; box-sizing:border-box; width:66px; height:66px; padding:4px; border-radius:50%; background-color:rgba(0,0,0,0.9); color:#d00; cursor:pointer; }
.stclosebt svg { width:100%; height:100%; }
.stclosebt:hover { background-color:#000; color:#f00; }

#topbar { z-index:1; position:fixed; top:0; left:0; box-sizing:border-box; width:100vw; padding:0 5px 0 7px; white-space:nowrap; font-family:Kanit,tahoma,Sans-Serif; color:#EDD; }
#topbar a { color:#FFF; }
#topbar h1,
#topbar .xhead { display:inline-block; box-sizing:border-box; width:calc(100% - 86px); max-width:400px; margin:0; padding:0 0 0 6px; vertical-align:middle; letter-spacing:4px; font-size:28pt; line-height:36px; font-weight:bold; color:#FFF; }
#topbar h1 .xdesc,
#topbar .xhead .xdesc { display:block; width:100%; margin:4px 0 0 0; font-size:13pt; line-height:17px; letter-spacing:0; font-weight:normal; }
#toplogo { display:inline-block; box-sizing:border-box; width:80px; height:80px; padding:4px; vertical-align:middle; }
#toplogo img { display:block; box-sizing:border-box; width:100%; height:100%; }

#topbarbg { z-index:0; position:fixed; top:0; left:0; box-sizing:border-box; width:100vw; height:64px; border-bottom:4px solid #FFFFAA; background-color:var(--primary2); }
#topbarbg2 { z-index:1; position:fixed; top:0; left:0; box-sizing:border-box;  }
#topbarbg2 svg { width:500px; height:86px; }

#topmshbt { float:right; box-sizing:border-box; width:72px; height:32px; margin:12px 2% 0 0; border-radius:16px; border:none; background-color:#fff; font-size:12pt; font-weight:bold; color:var(--primary2); opacity:0.8; }

#topshbar { float:right; box-sizing:border-box; height:36px; margin:12px 25px 0 0; font-size:12pt; color:#DCC; }
#topshbar .xbt { box-sizing:border-box; margin:0 0 0 10px; vertical-align:middle; opacity:0.8; transition:transform 0.3s; cursor:pointer; }
#topshbar img.xbt { width:36px; height:36px; }
#topshbar img.xbt:hover { opacity:1; transform:scale(1.25); }
#topshbar button.xbt { min-width:65px; height:36px; padding:5px 10px; border-radius:16px; border-width:3px 0 3px 0; border-style:solid; border-color:var(--primary2); background-color:#fff; font-size:11pt; font-weight:bold; color:var(--primary2); }
#topshbar button.xbt:hover { opacity:1; transform:scale(1.15); }

#btbar { padding:20px 0 0 0; text-align:center; color:var(--text3); font-size:11pt; }
#btbar .xbtlabel { padding:0 0 10px 0; }
#btbar .xbts a { display:inline-block; box-sizing:border-box; max-width:100%; padding:5px 2%; color:var(--text3); }
#btbar .xbts a:hover { color:var(--primary); }

.stpop { z-index:101; position:fixed; top:150px; left:50%; box-sizing:border-box; width:600px; min-height:100px; margin:0 0 0 -320px; padding:0; border-radius:10px;  border:1px solid var(--border); background-color:var(--bgtransparent2); backdrop-filter:blur(8px); text-align:left; font-size:14pt; color:var(--text); }
.stpop .xibox { padding:15px; overflow:auto; }
.stpop_bg { z-index:100; position:fixed; top:0; left:0; width:100%; height:100%; background-color:var(--bgtransparent); backdrop-filter:blur(8px); }
.stpop_msgbox { padding:0 5px; text-align:center; }
.stpop_msgdiv { padding:0 0 10px 0; text-align:center; }
.stpop .xtitlebar { width:100%; white-space:nowrap; }
.stpop .xtitletext { display:inline-block; box-sizing:border-box; width:calc(100% - 50px); height:44px; overflow:hidden; padding:7px 0 0 12px; vertical-align:top; font-size:16pt; text-overflow:ellipsis; line-height:34px; }
.stpop .xclosebt { display:inline-block; box-sizing:border-box; width:50px; height:44px; padding:6px 0 0 0; vertical-align:top; text-align:center; font-size:32px; line-height:32px; color:var(--text3); cursor:pointer; }
.stpop .xclosebt:hover { color:var(--primary); }
.stpop form { margin:0; padding:0; }
.stpop .xmidwidth { max-width:400px; margin:0 auto; }
.stpop .xbtbar { padding:10px 0; text-align:center; }
.stpop .xbtbar > * { margin:10px 0 0 10px; }
.stpop .xbtbar > *:first-child { margin-left:0; }
.stpop .xbt { display:inline-block; box-sizing:border-box; padding:7px 20px; border-radius:8px; border:1px solid var(--border); outline:none; background-color:var(--bgtransparent); backdrop-filter:blur(7px); font-size:14pt; color:var(--text); cursor:pointer; }
.stpop .xbt.xhl { min-width:120px; border:2px solid var(--primary); color:var(--primary); }
.stpop .xbt:hover { filter:brightness(1.2); color:var(--primary); }
.stpop .xbt:disabled ,
.stpop .xbt:disabled:hover { filter:grayscale(1) opacity(0.5); }
.stpop .xlinkbar a { display:inline-block; padding:5px; font-size:12pt; cursor:pointer; }

.bt { display:inline-block; box-sizing:border-box; padding:7px 20px; border-radius:10px; border:1px solid var(--border); outline:none; background-color:var(--bgtransparent); backdrop-filter:blur(7px); font-size:14pt; color:var(--text); cursor:pointer; }
.bt.small { padding:4px 15px; font-size:12pt; }
.bt.xhl { border:2px solid var(--primary); color:var(--primary); }
.bt.red { border-color:var(--textred); color:var(--textred); }
.bt.green { border-color:var(--textgreen); color:var(--textgreen); }
.bt:hover { filter:brightness(1.2); color:var(--primary); }
.bt.disabled ,
.bt.disabled:hover ,
.bt:disabled ,
.bt:disabled:hover { filter:grayscale(1) opacity(0.6); color:var(--text2); }
.bt.active { border-color:var(--primary); color:var(--primary); }

.stswitch .bt { border-radius:0; }
.stswitch .bt:first-child { border-radius:10px 0 0 10px; }
.stswitch .bt:last-child { border-radius:0 10px 10px 0; }

.bt2 { display:inline-block; box-sizing:border-box; padding:7px 20px; border-radius:10px; outline:none; background-color:var(--bg2); font-size:14pt; color:var(--text); cursor:pointer; }
.bt2.small { padding:4px 15px; font-size:12pt; }
.bt2 svg { display:inline-block; width:24px; height:24px; margin:0 7px 0 0; vertical-align:middle; }
.bt2:hover { filter:brightness(1.2); color:var(--primary); }

.stmenubox { position:absolute; display:block; box-sizing:border-box; width:200px; min-height:50px; border-radius:10px; background-color:var(--bgtransparent); backdrop-filter:blur(7px); font-size:14pt; }
.stmenubox .xbt { display:block; padding:10px 10px 10px 12px; border-top:1px solid var(--border); color:var(--texthl); cursor:pointer; }
.stmenubox .xbt:hover { background-color:var(--bgtransparent); }
.stmenubox .xbt:first-of-type { border-top:none; }
.stmenubox .xbt:first-child { border-radius:10px 10px 0 0; }
.stmenubox .xbt:last-child { border-radius:0 0 10px 10px; }
.stmenubox .xbt.xred { color:var(--textred); }
.stmenubox .xbt.xclosebt { padding:0 5px; text-align:center; cursor:pointer; }
.stmenubox .xbt.xclosebt svg { width:44px; height:44px; vertical-align:middle; }
.stmenubox .xfloatclosebt { float:right; width:48px; height:48px; color:var(--text); cursor:pointer; }
.stmenubox .xfloatclosebt:hover { color:var(--primary); }

select ,
textarea ,
input[type="text"] ,
input[type="number"] { box-sizing:border-box; outline:none; border:1px solid var(--borderinput); border-radius:10px; background-color:var(--bgtransparent); vertical-align:middle; font-size:12pt; font-family:Kanit,tahoma,Sans-Serif; color:var(--text); }
textarea { width:100%; height:100px; border-radius:10px; }
select { border-radius:10px; }
select:focus ,
textarea:focus ,
input[type="text"]:focus ,
input[type="number"]:focus { border-color:var(--primary); }

.stform { display:block; box-sizing:border-box; width:100%; margin:10px auto; padding:0; text-align:center; font-size:14pt; }
.stform .xtitle { padding:15px 0 5px 0; text-align:left; font-size:16pt; }
.stform .xtitle.xtop { padding-top:5px; }
.stform .xline { padding:5px 0; }
.stform .xlabel { display:inline-block; box-sizing:border-box; width:24%; padding:5px 2px 2px 2px; vertical-align:top; text-align:right; }
.stform .xvalue { display:inline-block; box-sizing:border-box; width:calc(75% - 20px); margin:0 0 0 10px; padding:5px 2px; vertical-align:top; text-align:left; }
.stform .xlabel i ,
.stform .xvalue i ,
.stform div.xnote ,
.stform span.xnote { font-style:normal; font-size:11pt; color:var(--text2); }
.stform select ,
.stform input[type="file"] ,
.stform input[type="number"] ,
.stform input[type="password"] ,
.stform input[type="email"] ,
.stform input[type="text"] { box-sizing:border-box; max-width:100%; height:40px; vertical-align:top; font-size:14pt; }
.stform input[type="submit"] ,
.stform input[type="button"] { box-sizing:border-box; height:40px; font-size:14pt; }
.stform input[type="button"] { min-width:80px; }
.stform input[type="submit"] { min-width:140px; }
.stform .xchoice { padding:5px 0; text-align:left; }
.stform .xchoice input[type="checkbox"] ,
.stform .xchoice input[type="radio"] { box-sizing:border-box; width:28px; height:28px; vertical-align:top; }
.stform .xchoice label { display:inline-block; box-sizing:border-box; max-width:calc(100% - 48px); margin:0 0 0 7px; padding:5px 0; vertical-align:top; }
.stform .xsubmitbar { padding:15px 0; text-align:center; }
.stform .xsubmitbar .bt { margin:5px 0 0 8px; }

.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-radius:7px; background-color:var(--bg2); text-align:center; white-space:nowrap; }
.pagebar a:first-child { margin-left:0; }
.pagebar a:hover { background-color:var(--bg3); }
.pagebar .xnav { min-width:10%; padding:7px 10px; }
.pagebar .xcur { padding:7px 10px; background-color:var(--primary); font-weight:bold; color:var(--primarytext); }
.pagebar span { display:inline-block; margin:5px 0 0 5px; padding:7px; color:var(--text3); }

.stmsgbox, .note , .complete , .none , .warn , .error { margin:20px 8px; padding:30px 10px; border-radius:20px; background-color:var(--bg2); text-align:center; font-size:16pt; }
.stmsgbox { color:var(--text); }
.note { color:var(--text2); }
.complete { font-size:18pt; color:var(--textgreen); }
.none { padding:70px 10px; color:var(--text3); font-style:italic; }
.warn { color:var(--textyellow); }
.error { color:var(--textred); }
.error a:not(.bt) { color:var(--textred); text-decoration:underline; }

.stbadge { display:inline-block; box-sizing:border-box; min-width:26px; height:26px; margin:0 0 0 5px; padding:4px 2px; border-radius:13px; background-color:#d00; vertical-align:middle; text-align:center; font-size:18px; line-height:18px; font-weight:bold; color:#fff; }

@media (max-width:700px) {
	body { padding-top:64px; }
	#topbar { height:60px; background:linear-gradient(to right,var(--primary),var(--primary2)); }
	#topbar h1,
	#topbar .xhead { padding-left:0; letter-spacing:1px; font-size:24pt; line-height:34px; }
	#topbar h1 .xdesc,
	#topbar .xhead .xdesc { font-size:11pt; line-height:14px; }
	#topbarbg { border:none; background:linear-gradient(to right, #FFFFAA 0%, #FFAA00 25%, #FFFFAA 100%); }
	#topbarbg2 { display:none; }
	#toplogo { width:60px; height:60px; padding:2px; vertical-align:middle; }
	.mainbox { min-height:calc(100vh - 134px); }
}
@media (max-width:600px) {
	.stpop { left:1%; width:98%; margin-left:0; }
	.stform .xlabel { display:block; width:100%; text-align:left; }
	.stform .xlabel:empty { display:none; }
	.stform .xvalue { display:block; width:100%; margin-left:2px; }
}
@media (max-width:500px) {
	.pagebar a  { min-width:12%; }
}
@media (max-width:450px) {
	#topmshbt { margin-top:4px; }
}

@keyframes ani_fadein {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes ani_fadeout {
	from { opacity:1; }
	to { opacity:0; }
}
@keyframes ani_fadein_fromcenter {
	from { opacity:0; transform:scale(1.6,0); }
	to { opacity:1; transform:scale(1,1); }
}
@keyframes ani_fadeout_tocenter {
	from { opacity:1; transform:scale(1,1); }
	to { opacity:0; transform:scale(1.6,0); }
}
@keyframes ani_fadein_fromtop {
	from { opacity:0; transform:scaleY(0); transform-origin:top center; }
	to { opacity:1; transform:scaleY(1); transform-origin:top center; }
}
@keyframes ani_fadeout_totop {
	from { opacity:1; transform:scaleY(1); transform-origin:top center; }
	to { opacity:0; transform:scaleY(0); transform-origin:top center; }
}


@media print { body { opacity:0; width:1px; height:1px; overflow:hidden; visibility:hidden; } }