/* 諸行無常 是生滅法 生滅滅已 寂滅爲樂 */

/* ### global ### */

input[type="text"],input[type="password"],textarea {
border-radius:5px;
padding:4px;
}
textarea {
padding:8px;
resize:none;
}

#cont_doc {
padding:25px;
background-color:#F4F4F4;
}
#cont_doc_inner {
background-color:#FFF;
padding:25px;
border-radius:20px;
max-width:800px;
margin:0 auto;
}
@media screen and (max-width:800px) {
#cont_doc {
padding:20px;
}
#cont_doc_inner {
padding:20px;
border-radius:15px;
}
}
@media screen and (max-width:500px) {
#cont_doc {
padding:10px;
}
#cont_doc_inner {
padding:15px 10px;
border-radius:10px;
}
}
@media screen and (max-width:400px) {
#cont_doc {
padding:8px;
}
#cont_doc_inner {
padding:14px 8px;
}
}

#mobile_menu {
background-color:#000;
color:#FFF;
padding:20px;
width:100%;
max-width:320px;
position:absolute;
top:0;
right:0;
box-sizing:border-box;
z-index:100000;
}
#mobile_menu button.closebtn {
width:26px;
height:26px;
cursor:pointer;
position:absolute;
top:0;
right:0;
padding:10px;
z-index:10;
}
#mobile_menu button.closebtn:hover {
background-color:#D33;
}
#mobile_menu button.closebtn svg {
width:26px;
height:26px;
fill:#FFF;
}
#mobile_menu a {
display:block;
line-height:3;
font-size:15px;
color:#FFF;
padding:0 1em;
}
#mobile_menu a:hover {
background-color:rgba(255,255,255,0.1);
}
#mobile_menu span.closebtn {
display:block;
font-size:30px;
float:right;
cursor:pointer;
}
#mobile_menu hr {
border-style:none;
border-top:1px solid #888;
}
#mobile_menu input {
background-color:#000;
border:1px solid #555;
font-size:14px;
outline:none;
color:#CCC;
width:calc(100% - 20px);
box-sizing:border-box;
height:40px;
padding:6px 6px 6px 30px;
margin:3px 0;
}
#mobile_menu input:focus {
background-color:#111;
border-color:#888;
color:#FFF;
}
#mobile_menu form {
position:relative;
}
#mobile_menu i.searchicon {
width:14px;
height:14px;
position:absolute;
left:10px;
top:16px;
}
#mobile_menu i.searchicon svg {
width:14px;
height:14px;
fill:#999;
}






#HEADBAR {
background-color:#1D8AF1;
height:42px;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
wdith:100%;
}

#HEADBAR div.leftspace {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
flex:1;
}

#HEADBAR a.ic {
display:inline-block;
padding:0 8px;
height:42px;
line-height:42px;
color:rgba(255,255,255,0.8);
cursor:pointer;
}
#HEADBAR a.ic:hover {
background-color:rgba(255,255,255,0.15);
color:#FFF;
text-decoration:none;
}
#HEADBAR a.uname {
display:inline-flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
padding:0 6px;
height:42px;
color:rgba(255,255,255,0.95);
cursor:pointer;
}
#HEADBAR a.uname span.uname {
display:inline-block;
max-width:120px;
overflow:hidden;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
}
#HEADBAR a.uname:hover {
background-color:rgba(255,255,255,0.15);
color:#FFF;
text-decoration:none;
}
#HEADBAR a.uname img.up {
width:26px;
height:26px;
vertical-align:-9px;
border-radius:50%;
margin-right:4px;
object-fit:cover;
}
#HEADBAR a.uname i.private {
width:12px;
height:12px;
margin-left:3px;
}
#HEADBAR a.uname i.private svg {
width:12px;
height:12px;
fill:rgba(255,255,255,0.9);
}

#HEADBAR a.logo {
display:inline-flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
padding:2px 5px;
height:40px;
color:rgba(255,255,255,0.95);
cursor:pointer;
font-size:16px;
}
#HEADBAR a.logo:hover {
background-color:rgba(255,255,255,0.15);
color:#FFF;
text-decoration:none;
}
#HEADBAR a.logo img {
width:30px;
height:30px;
border:0;
margin-right:5px;
}
#mobile_menu_btn {
display:inline-block;
height:42px;
width:42px;
cursor:pointer;
}
#mobile_menu_btn:hover {
background-color:rgba(255,255,255,0.15);
}
#mobile_menu_btn i {
width:20px;
height:20px;
margin:11px;
}
#mobile_menu_btn i svg {
width:20px;
height:20px;
fill:#FFF;
}
#dm_open_btn {
display:inline-block;
height:42px;
width:42px;
position:relative;
}
#dm_open_btn:hover {
background-color:rgba(255,255,255,0.15);
}
#dm_open_btn i {
width:18px;
height:18px;
margin:12px;
}
#dm_open_btn i svg {
width:18px;
height:18px;
fill:#FFF;
}
#dm_open_btn a {
display:inline-block;
height:42px;
width:42px;
}
#dm_open_btn #newnum_unread_dm {
display:inline-block;
margin-left:3px;
padding:0 3px;
background-color:#C00;
border-radius:6px;
color:#FFF;
height:15px;
line-height:15px;
font-size:11px;
vertical-align:1px;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}

@media screen and (max-width:400px) {
#HEADBAR a.logo {
font-size:14px;
}
}
@media screen and (max-width:450px) {
#HEADBAR .sitename {
display:none;
}
#HEADBAR a.logo img {
margin-right:unset;
}
}





#FOOT {
background-color:#FFF;
border-top:1px solid #CCC;
padding:10px 0 30px 0;
text-align:center;
color:#999;
line-height:2;
}
#FOOT a {
margin:0 8px;
display:inline-block;
color:#666;
}
#FOOT em {
color:#333;
}
p.sitemenu {
padding:0 15px;
max-width:900px;
margin:0 auto;
}

#copyrights {
color:#888;
}
#copyrights a {
margin:0 3px;
color:#666;
}
#copyrights a:hover {
color:#333;
}
#copyrights a:visited {
color:#666;
}

div.snsselitems {
display:grid;
box-sizing:border-box;
grid-template-columns:1fr 1fr 1fr;
column-gap:5px;
row-gap:5px;
max-width:550px;
margin-top:5px;
container:snsselitems / inline-size;
}
div.snsselitems > a {
display:block;
background-color:#FFF;
border:1px solid #CCC;
border-radius:5px;
color:#444;
text-align:center;
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
}
div.snsselitems > a:hover {
background-color:#F8F8F8;
border-color:#AAA;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
color:#000;
}
div.snsselitems > a > span {
font-size:15px;
}
div.snsselitems > a > span img {
height:95px;
margin-bottom:8px;
opacity:0.8;
filter:grayscale(0.3);
}
div.snsselitems > a:hover > span img {
opacity:1;
filter:unset;
}
div.snsselitems > a.seled {
border-width:3px;
border-color:#61ADF5;
background-color:#F3F9FE;
font-weight:bold;
color:#000;
filter:unset;
}
div.snsselitems > a.seled:hover {
border-color:#61ADF5;
background-color:#F3F9FE;
box-shadow:none;
filter:unset;
}
div.snsselitems > a.seled > span img {
opacity:1;
filter:unset;
}
@container snsselitems (max-width:580px) {
div.snsselitems > a > span img {
height:90px;
}
}
@container snsselitems (max-width:540px) {
div.snsselitems > a > span img {
height:85px;
}
}
@container snsselitems (max-width:500px) {
div.snsselitems > a > span img {
height:80px;
}
div.snsselitems > a > span {
font-size:14px;
}
}
@container snsselitems (max-width:460px) {
div.snsselitems > a > span img {
height:75px;
}
}
@container snsselitems (max-width:440px) {
div.snsselitems > a > span img {
height:70px;
}
}
@container snsselitems (max-width:420px) {
div.snsselitems > a > span img {
height:65px;
}
}
@container snsselitems (max-width:400px) {
div.snsselitems > a > span img {
height:60px;
}
}
@container snsselitems (max-width:380px) {
div.snsselitems > a > span img {
height:55px;
}
}
@container snsselitems (max-width:360px) {
div.snsselitems > a > span img {
height:50px;
}
}
@media screen and (max-width:500px) {
div.snsselitems {
column-gap:3px;
row-gap:3px;
}
}






.lrgbtn {
background-color:#1D8AF1;
color:rgba(255,255,255,0.9);
height:38px;
border:2px solid #1A7CD8;
margin:0;
border-radius:4px;
padding-block:unset;
padding-inline:unset;
font-size:15px;
font-weight:bold;
}
a.lrgbtn {
display:inline-block;
padding:5px 10px;
height:auto;
color:rgba(255,255,255,0.9);
}
a.lrgbtn:visited {
color:rgba(255,255,255,0.9);
}
.lrgbtn:hover {background-color:#3496F2;color:rgba(255,255,255,1);border-color:#1D8AF1;}
.lrgbtn:active {background-color:#1A7CD8;color:rgba(255,255,255,0.8);border-color:#176EC1;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);}

.lrgbtn[disabled] {
background-color:#1D8AF1;
border-color:#1D8AF1;
color:rgba(255,255,255,0.6);
}
.lrgbtn[disabled]:hover {
background-color:#1D8AF1;
border-color:#1D8AF1;
color:rgba(255,255,255,0.6);
}
.lrgbtn[disabled]:active {
background-color:#1D8AF1;
border-color:#1D8AF1;
color:rgba(255,255,255,0.6);
box-shadow:none;
}


div.listtable_wrap {
overflow:hidden;
overflow-x:auto;
width:100%;
}
div.listtable_wrap > div {
width:100%;
}

table.linelist td {border-bottom:solid 1px #DDD;}
table.linelist th {
background-color:#EEE;
border-bottom:1px solid #CCC;
border-top:1px solid #CCC;
}
table.linelist tr:hover {
background-color:#F8F8F8;
}
table.linelist td.clickable {
cursor:pointer;
}
table.linelist td.clickable:hover {
background-color:#E3F0FD;
}
td.vartext {
word-break:break-all;
}

/* ### account list ### */

i.master_account_flag {
width:1em;
height:1em;
vertical-align:middle;
margin:0 2px 0 4px;
}
i.master_account_flag svg {
width:1em;
height:1em;
fill:#080;
}
img.snsicon {
height:1em;
vertical-align:middle;
margin-right:3px;
}
i.authstat {
width:15px;
height:15px;
vertical-align:middle;
margin-right:3px;
cursor:pointer;
}
i.authstat svg {
width:15px;
height:15px;
fill:#5ABE4D;
}
i.authstat_ng svg {
fill:#D33;
}
i.authstat_warn svg {
fill:#BB0;
}
td.auth {
white-space:nowrap;
text-align:center;
}
@media screen and (max-width:500px) {
td.auth {
font-size:12px;
}
}
th.auth_head {
white-space:nowrap;
text-align:center;
border-top:0 !important;
}
@media screen and (max-width:800px) {
th.auth_head {
font-size:12px;
}
}
@media screen and (max-width:500px) {
th.auth_head {
font-size:11px;
}
}
@media screen and (max-width:380px) {
th.auth_head {
font-size:10px;
}
}