.spadsensemobile { width:300px; height:250px; }
@media (min-width:346px) { .spadsensemobile { width:336px; height:280px; } }

h1 { margin:0; padding:5px 0; }

.sppostbox { margin:10px 0; padding:30px 10px; border-radius:20px; background-color:var(--bg2); text-align:center; font-size:14pt; }

#postform { margin:10px 0; padding:10px 10px 20px 10px; border-radius:10px; border:2px solid var(--bg4); font-size:14pt; }
#postform h3 { margin:0; padding:0 0 5px 0; font-size:16pt; font-weight:normal; }
#postform .xline { padding:10px 0; text-align:center; }
#postform .xlabel { display:inline-block; box-sizing:border-box; width:30%; max-width:160px; padding:0 5px 0 0; vertical-align:top; text-align:right; }
#postform .xvalue { display:inline-block; box-sizing:border-box; width:68%; max-width:500px; padding:0 0 0 5px; vertical-align:top; text-align:left; }
#postform input[type=text] ,
#postform input[type=email] ,
#postform input[type=number] ,
#postform input[type=submit] ,
#postform select { box-sizing:border-box; height:40px; font-size:14pt; }
#postform input[type=checkbox] ,
#postform input[type=radio] { width:24px; height:24px; vertical-align:middle; }
#postform label { display:inline-block; box-sizing:border-box; max-width:calc(100% - 32px); padding:3px 3px 3px 6px; vertical-align:middle; }
#postform label.active { color:var(--primary); }
#postform input[name=msg] { width:100%; font-size:16pt; }
#postform input[name=email] { width:250px; max-width:calc(100% - 100px); }
#postform input[name=age] { width:100px; }
#postform select[name=ctr] { width:120px; }
#postform select[name=prv] { width:140px; }
#postform input[type=submit] { width:100%; max-width:400px; border-radius:5px; border:none; background-color:var(--primary); font-size:16pt; color:var(--primarytext); }
#postform input[type=submit]:hover { filter:contrast(1.25); }
#postform .xboard { display:inline-block; }
#postform .xboard label { display:inline-block; padding:3px 15px 3px 0; }
#postform .xch { display:inline-block; white-space:nowrap; }
#postform .xnote { padding:10px 0 0 0; text-align:center; font-size:11pt; color:var(--text3); }
#postform .xnote u { color:var(--textred); text-decoration:none; }

.spwarn { padding:15px 0 0 0; text-align:center; font-size:12pt; color:var(--textred); }
.spwarn .xbt { display:inline-block; padding:5px; font-size:11pt; color:var(--textred); }
.spwarn .xbt:hover { text-decoration:underline; }

#prvdiv { display:inline-block; vertical-align:middle; white-space:nowrap; }

#sform { margin:15px 0 0 0; padding:0; text-align:center; font-size:14pt; }
#sform select ,
#sform input[type=submit] { box-sizing:border-box; height:40px; vertical-align:middle; font-size:14pt; }

.spdl { width:100%; margin:10px 0 0 0; text-align:center; font-size:14pt; }
.spdl a { display:block; min-height:40px; color:#5a62ce; }
.spdl a:hover { color:#737bde; }
.spdl a img { width:48px; height:48px; margin:0 5px 0 0; vertical-align:middle; }

.spmenu { width:100%; overflow-x:auto; padding:20px 0 0 0; white-space: nowrap; font-size:14pt; }
.spmenu .xbt { display:inline-block; box-sizing:border-box; min-width:20%; margin:0 3px 0 0; padding:10px 15px 8px 15px; background-color:var(--bg3); border-radius:4px 4px 0 0; border-bottom:2px solid var(--bg); text-decoration:none; vertical-align:bottom; text-align:center; color:var(--text); }
.spmenu .xbt:hover { color:var(--texthl); }
.spmenu .xbt.active { border:none; padding-bottom:10px; background-color:var(--primary); font-weight:bold; color:var(--primarytext); }
.spmenu .refreshbt { float:right; padding:2px 5px; color:var(--text3); }
.spmenu .refreshbt b { display:inline-block; vertical-align:middle; font-size:20pt; font-weight:normal; }
.spmenu .refreshbt:hover { color:var(--text); }

.splist { width:100%; max-width:910px; margin:0 auto; padding:0; }
.splist a { color:#000; }

#titlebox { padding:10px 5px; background-color:var(--primary); font-size:12pt; color:var(--primarytext); }

#listbox { font-size:12pt; }
#listbox .xline { margin:1px 0 0 0; }
#listbox .xdelbt { display:inline-block; box-sizing:border-box; width:40px; height:34px; padding:5px 2px; vertical-align:top; text-align:center; font-size:12pt; font-weight:bold; color:#888; }
#listbox .xdelbt:hover { color:#d00; }
#listbox .xlink { display:inline-block; box-sizing:border-box; width:calc(100% - 40px); min-height:32px; padding:5px 0 5px 27px; background-image:url("image/team20.png"); background-repeat:no-repeat; background-position:7px center; vertical-align:top; color:#000; }
#listbox .xlink:hover { color:#000; }
#listbox .xadf { display:inline-block; width:100%; padding:10px 0; font-size:16pt; }
#listbox .xadf .ximg { width:100%; }
#listbox .xm { background-color:#bbdbf2; }
#listbox .xm:hover { background-color:#c7e4f8; }
#listbox .xw { background-color:#f1d0ed; }
#listbox .xw:hover { background-color:#f9d9f5; }
#listbox .xt { background-color:#f1d0ed; }
#listbox .xt:hover { background-color:#f9d9f5; }
#listbox .xemail ,
#listbox .xmsg ,
#listbox .xinfo { display:inline-block; box-sizing:border-box; padding:5px 0 0 5px; overflow:hidden; vertical-align:middle; }
#listbox .xemail { width:25%; padding-top:12px; padding-bottom:12px; white-space:nowrap; text-overflow: ellipsis; color:#666; }
#listbox .xmsg { width:55%; font-size:14pt; min-height:24px; }
#listbox .xmsg .xicon { width:24px; height:24px; margin:0 4px 0 0; vertical-align:middle; }
#listbox .xinfo { width:20%; }
#listbox .xad { width:100%; }
#listbox .xad .xlink { width:100%; box-sizing:border-box; padding:15px 0 10px 0; font-size:16pt; }
#listbox .xad .ximg { width:100%; box-sizing:border-box; }

#copybox { z-index:1; position:fixed; left:calc(50vw - 240px); box-sizing:border-box; width:480px; border-radius:20px; border:3px solid var(--primary); background-color:var(--bg); text-align:center; font-size:13pt; color:var(--text); }
#copybox .xbody { padding:15px 10px; }
#copybox .xclosebt { position:absolute; top:3px; right:3px; display:block; padding:2px 8px; font-size:22px; color:var(--text4); cursor:pointer; }
#copybox .xclosebt:hover { color:var(--text); }
#copybox .xbig { padding:0 0 10px 0; font-size:16pt; }
@keyframes copyboxani {
	from { opacity:0; transform:scale(2, 0); }
	to { opacity:1; transform:scale(1, 1); }
}

@media (max-width:800px) {
	#listbox .xemail { display:block; width:100%; padding-top:0; padding-bottom:0; color:rgba(0,0,0,0.4); font-size:11pt; }
	#listbox .xmsg { width:75%; padding-top:0; }
	#listbox .xinfo { width:25%; text-overflow:clip; }
}
@media (max-width:700px) {
	.spmenu { padding:10px 0 0 0; }
	.spmenu .refreshbt { float:none; display:block; margin:0 0 10px 0; text-align:center; }
}
@media (max-width:600px) {
	#postform .xlabel { display:block; width:100%; max-width:none; padding:5px 0; text-align:left; }
	#postform .xlabel:empty { display:none; }
	#postform .xvalue { display:block; width:100%; max-width:none; }
	#listbox .xmsg { width:70%; }
	#listbox .xinfo { width:30%; }
}
@media (max-width:400px) {
	#listbox .xinfo { white-space:normal; }
}
@media (max-width:350px) {
	#listbox .xinfo { font-size:10pt; }
}

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