/* Groups, laid out like 2016: your groups down the left, the group in the middle, Controls on the right.
   Flat white boxes, thin grey borders, small grey tabs, plain rectangular buttons and a yellow shout box. */
.grp-page{max-width:1010px;font:12px/1.4 Arial,Helvetica,sans-serif;color:#191919}
.grp-shell{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:8px;align-items:start}
.grp-main{min-width:0}
.grp-page h1,.grp-page h2,.grp-page h3{font-family:Arial,Helvetica,sans-serif;color:#191919}
.grp-page a{color:#00a2ff;text-decoration:none}.grp-page a:hover{text-decoration:underline}
.grp-muted{color:#757575;font-size:12px}
.grp-link{border:0;background:none;padding:0;color:#00a2ff;cursor:pointer;font:12px Arial,sans-serif}.grp-link:hover{text-decoration:underline}
.grp-btn,.grp-search button{display:inline-block;padding:3px 10px;border:1px solid #777;border-radius:0;background:#f5f5f5;color:#191919!important;font:12px Arial,sans-serif;cursor:pointer;text-align:center;text-decoration:none!important}
.grp-btn:hover,.grp-search button:hover{background:#e6e6e6}
.grp-green,.grp-blue{display:inline-block;padding:6px 16px;border:1px solid #007001;border-radius:3px;background:#02b757;color:#fff!important;font:700 14px Arial,sans-serif;cursor:pointer;text-align:center;text-decoration:none!important}
.grp-green:hover,.grp-blue:hover{background:#3fc679}
.grp-gray{display:inline-block;padding:3px 10px;border:1px solid #777;background:#f5f5f5;color:#191919!important;font:12px Arial,sans-serif;cursor:pointer;text-decoration:none!important}
.grp-btn:disabled,.grp-green:disabled,.grp-blue:disabled,.grp-gray:disabled{opacity:.55;cursor:default}
/* Left: Create and the group selector */
.grp-side{background:#fff;border:1px solid #ccc;padding:0 0 6px}
.grp-create{display:block;margin:0 0 6px;padding:8px 4px;border:1px solid #007001;background:#02b757;color:#fff!important;font:700 16px Arial,sans-serif;text-align:center;text-decoration:none!important}
.grp-create:hover{background:#3fc679}
.grp-side-list{display:grid;gap:2px;max-height:520px;overflow-y:auto}
.grp-side-item{display:grid;grid-template-columns:8px 34px minmax(0,1fr);gap:4px;align-items:center;padding:4px 4px 4px 2px;color:#191919!important;font-size:10px;line-height:1.15;text-decoration:none!important}
.grp-side-item img{width:34px;height:34px;object-fit:cover;background:#e3e3e3}
.grp-side-item span{overflow:hidden;overflow-wrap:anywhere;max-height:34px}
.grp-side-item:hover{background:#f2f2f2}
.grp-side-item.is-current::before{content:"";grid-column:1;width:0;height:0;border:4px solid transparent;border-left-color:#d00}
.grp-side-item:not(.is-current)::before{content:"";grid-column:1}
.grp-side-item.is-primary span{font-weight:700}
.grp-side-empty{padding:6px;font-size:11px;color:#757575}
/* Search */
.grp-search{display:flex;gap:6px;justify-content:center;padding:6px;margin-bottom:8px;background:#f2f2f2;border:1px solid #ccc}
.grp-search input{flex:0 1 250px;min-width:0;padding:2px 4px;border:1px solid #a7a7a7;font:italic 12px Arial,sans-serif}
/* Header */
.grp-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;background:#fff;padding:6px 0 10px}
.grp-emblem{grid-row:1;width:150px;height:150px;object-fit:cover;background:#e3e3e3}
.grp-header-text{min-width:0}
.grp-header-text h1{margin:0 0 6px;font-size:24px;font-weight:400;overflow-wrap:anywhere}
.grp-description{margin:0;white-space:pre-line;overflow-wrap:anywhere;max-height:84px;overflow:hidden}
.grp-description.is-open{max-height:none}
.grp-meta{grid-column:1;font-size:12px}.grp-meta p{margin:0 0 4px}
.grp-meta a{font-style:italic}
.grp-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.grp-report a,.grp-report button,.grp-post .report-link{color:#f57979!important;font-size:10px}
.grp-shout-area{grid-column:2;align-self:start}
.grp-shout{max-width:330px;padding:6px 8px;margin:0 0 6px;background:#fff7a8;border:1px solid #e3c955}
.grp-shout p{margin:0;overflow-wrap:anywhere}
.grp-shout-by{margin-top:6px!important;font-size:10px;color:#757575;text-align:center}.grp-shout-by a{font-style:italic}
.grp-shout[hidden],.grp-shout-form[hidden],.grp-wall-form[hidden]{display:none}
.grp-shout-form{display:flex;gap:4px;max-width:330px}
.grp-shout-form input{flex:1;min-width:0;padding:2px 4px;border:1px solid #a7a7a7;font:italic 12px Arial,sans-serif}
.grp-notice{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 8px;margin:0 0 8px;background:#eef7ff;border:1px solid #9cc9ee}
/* Tabs */
.grp-tabs{display:flex;flex-wrap:wrap;gap:2px;margin:6px 0 0;border-bottom:1px solid #ccc;padding-left:2px}
.grp-tabs button{position:relative;top:1px;padding:6px 11px;border:1px solid #bbb;border-radius:0;background:#dcdcdc;color:#191919;font:700 13px Arial,sans-serif;cursor:pointer}
.grp-tabs button:hover{background:#ececec}
.grp-tabs button[aria-pressed=true]{background:#fff;border-bottom-color:#fff}
.grp-tabs button[hidden]{display:none}
.grp-panels{background:#fff;padding:12px 8px;min-height:120px;margin-bottom:10px}
.grp-filters{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:8px}
.grp-filters select,.grp-filters input{padding:1px 3px;border:1px solid #a7a7a7;font:12px Arial,sans-serif}
.grp-member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px 6px}
.grp-member{display:grid;justify-items:center;gap:3px;text-align:center;min-width:0}
.grp-member-link{position:relative;display:grid;justify-items:center;gap:3px;min-width:0;max-width:100%}
.grp-face{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;background:#e3e3e3}
.grp-face canvas,.grp-face img{width:100%;height:100%;object-fit:cover}
.grp-member .grp-face{width:70px;height:70px;background:#fff}
.grp-dot{position:absolute;left:2px;top:2px;width:9px;height:9px;border:1px solid #fff;border-radius:50%;background:#d22}
.grp-dot.is-online{background:#02b757}
.grp-member-name{max-width:100%;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-rank-select{max-width:100%;font-size:10px}.grp-role{font-size:10px}
.grp-pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px}
.grp-relations,.grp-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.grp-item{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid #e3e3e3;color:#191919!important;min-width:0;text-decoration:none!important}
.grp-item:hover{background:#f2f2f2}
.grp-item-text{display:grid;min-width:0}.grp-item-text strong{color:#00a2ff;font-weight:400;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-emblem-small{flex:none;width:48px;height:48px;object-fit:cover;background:#e3e3e3}
.grp-store{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px 10px}
.grp-store-item{display:grid;gap:2px;font-size:12px}
.grp-store-item img{width:110px;max-width:100%;aspect-ratio:1/1;object-fit:contain;border:1px solid #e3e3e3;background:#fff}
.grp-store-item strong{font-weight:400}
.grp-price{color:#02b757;font-weight:700;font-size:11px}
.grp-store-links{margin:14px 0 0;text-align:center}
.grp-payouts{display:grid;gap:8px}
.grp-payout{display:grid;grid-template-columns:52px 120px auto;gap:10px;align-items:center;justify-content:start}
/* Wall */
.grp-wall{background:#fff;border:1px solid #ccc}
.grp-wall h2{margin:0;padding:6px 14px;font-size:14px;font-weight:700;background:#f2f2f2;border-bottom:1px solid #ccc}
.grp-wall-form{display:flex;gap:6px;align-items:flex-end;padding:8px 14px}
.grp-wall-form textarea{flex:1;min-width:0;max-width:360px;padding:3px;border:1px solid #a7a7a7;font:12px Arial,sans-serif;resize:vertical}
.grp-wall-note,.grp-wall>.grp-muted{padding:0 14px}
.grp-post{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;padding:8px 14px;border-top:1px solid #e9e9e9}
.grp-post:nth-child(even){background:#f7f7f7}
.grp-post .grp-face{width:70px;height:70px;background:transparent}
.grp-post-body{min-width:0}.grp-post-body p{margin:0 0 10px;overflow-wrap:anywhere}
.grp-post-foot{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:10px;color:#757575}
.grp-pages{display:flex;flex-wrap:wrap;gap:3px;padding:8px 14px}
.grp-pages button{min-width:22px;padding:1px 5px;border:1px solid #bbb;background:#fff;font:11px Arial,sans-serif;cursor:pointer}
.grp-pages button.is-current{background:#dcdcdc;font-weight:700}
/* Right: Controls */
.grp-controls{width:112px;background:#fff;border:1px solid #ccc;padding:6px 8px 10px}
.grp-controls[hidden]{display:none}
.grp-controls h2{margin:0 0 8px;font-size:14px;font-weight:700}
#grp-control-list{display:grid;gap:4px}
#grp-control-list .grp-btn{padding:2px 4px;font-size:11px}
/* Browse page */
.grp-box{background:#fff;border:1px solid #ccc;padding:8px 12px 12px;margin-bottom:10px}
.grp-box h2{margin:0 0 8px;font-size:16px;font-weight:700}.grp-box h3{margin:0 0 6px;font-size:16px;font-weight:400}
.grp-board-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.grp-boards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grp-board{margin:0;padding:0;list-style:none;max-height:430px;overflow-y:auto;border:1px solid #e3e3e3}
.grp-board li{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 8px}
.grp-board li.is-empty{display:block;color:#757575}
.grp-board img,.grp-board .grp-face{width:44px;height:44px;border-radius:50%;object-fit:cover}
.grp-board .grp-board-clan img{border-radius:0}
.grp-board-name{display:grid;min-width:0}.grp-board-name a{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Dialog and Group Admin */
.grp-dialog{width:min(480px,calc(100vw - 32px));border:1px solid #777;border-radius:0;padding:16px;font:12px Arial,sans-serif}
.grp-dialog::backdrop{background:#0006}
.grp-dialog h2{margin:0 0 8px;font-size:18px}
.grp-dialog form,.ga-form{display:grid;gap:10px}
.grp-dialog label,.ga-form label{display:grid;gap:3px;font-weight:700}
.grp-dialog input:not([type=radio]):not([type=file]),.grp-dialog textarea,.ga-form input:not([type=radio]):not([type=checkbox]):not([type=file]),.ga-form textarea,.ga-form select,.ga-row select,.ga-row input,.ga-panels input[type=search]{padding:3px 5px;border:1px solid #a7a7a7;border-radius:0;font:12px Arial,sans-serif}
.grp-dialog fieldset,.ga-form fieldset{border:1px solid #ccc;padding:6px 10px;display:grid;gap:3px}
.grp-inline{display:flex!important;align-items:center;gap:6px;font-weight:400!important}
.grp-dialog .grp-actions{justify-content:flex-end}
.grp-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:2px 0 10px}
.grp-top h1{margin:0;font-size:22px;font-weight:400}
.grp-card{background:#fff;border:1px solid #ccc;padding:10px 14px;margin:0 0 10px}
.grp-card h2{margin:0 0 8px;font-size:18px;font-weight:400;border-bottom:1px solid #e3e3e3;padding-bottom:4px}
.grp-card h3{margin:14px 0 6px;font-size:13px;font-weight:700}
.ga-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:start}
.ga-layout[hidden]{display:none}
.ga-menu{display:grid;background:#fff;border:1px solid #ccc}
.ga-menu button{padding:7px 10px;border:0;border-bottom:1px solid #e9e9e9;background:none;text-align:left;font:13px Arial,sans-serif;cursor:pointer;color:#00a2ff}
.ga-menu button:hover{background:#f2f2f2}
.ga-menu button[aria-pressed=true]{background:#dcdcdc;color:#191919;font-weight:700}
.ga-rows{display:grid;gap:0}
.ga-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:5px 6px;border-bottom:1px solid #e9e9e9}
.ga-row:nth-child(even){background:#f7f7f7}
.ga-row input{width:110px}
.ga-inline-form{grid-template-columns:repeat(auto-fit,minmax(150px,max-content));align-items:end}
.ga-role{border:1px solid #ccc;padding:5px 10px;margin-bottom:4px}
.ga-role summary{cursor:pointer;font-weight:700}
.ga-role form{margin-top:8px}
.ga-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px}
.ga-perms legend{font-weight:700}
.ga-funds{font-size:16px}.ga-plus{color:#02b757}.ga-minus{color:#d22}
.ga-emblem-row{display:flex;align-items:center;gap:12px}
/* Dark theme */
html[data-theme=dark] .grp-page,html[data-theme=dark] .grp-page h1,html[data-theme=dark] .grp-page h2,html[data-theme=dark] .grp-page h3{color:#e7edf5}
html[data-theme=dark] .grp-side,html[data-theme=dark] .grp-header,html[data-theme=dark] .grp-panels,html[data-theme=dark] .grp-wall,html[data-theme=dark] .grp-controls,html[data-theme=dark] .grp-box,html[data-theme=dark] .grp-card,html[data-theme=dark] .ga-menu,html[data-theme=dark] .grp-dialog{background:#1d2733;border-color:#3a4656;color:#e7edf5}
html[data-theme=dark] .grp-search,html[data-theme=dark] .grp-wall h2{background:#27313d;border-color:#3a4656}
html[data-theme=dark] .grp-tabs{border-color:#3a4656}
html[data-theme=dark] .grp-tabs button,html[data-theme=dark] .grp-btn,html[data-theme=dark] .grp-gray,html[data-theme=dark] .grp-search button,html[data-theme=dark] .grp-pages button{background:#27313d;border-color:#46536a;color:#e7edf5!important}
html[data-theme=dark] .grp-tabs button[aria-pressed=true]{background:#1d2733;border-bottom-color:#1d2733}
html[data-theme=dark] .grp-shout{background:#4a4420;border-color:#7a6c2a}
html[data-theme=dark] .grp-post,html[data-theme=dark] .grp-item,html[data-theme=dark] .ga-row,html[data-theme=dark] .ga-role,html[data-theme=dark] .grp-board{border-color:#3a4656}
html[data-theme=dark] .grp-post:nth-child(even),html[data-theme=dark] .ga-row:nth-child(even),html[data-theme=dark] .grp-item:hover,html[data-theme=dark] .grp-side-item:hover{background:#23303d}
html[data-theme=dark] .grp-side-item,html[data-theme=dark] .grp-item{color:#e7edf5!important}
html[data-theme=dark] .grp-muted,html[data-theme=dark] .grp-post-foot{color:#b0bccb}
html[data-theme=dark] .grp-page input,html[data-theme=dark] .grp-page textarea,html[data-theme=dark] .grp-page select{background:#27313d;color:#e7edf5;border-color:#46536a}
html[data-theme=dark] .ga-menu button[aria-pressed=true]{background:#27313d;color:#fff}
@media(max-width:820px){
 .grp-shell{grid-template-columns:1fr}
 .grp-side{order:0}.grp-side-list{grid-auto-flow:column;grid-auto-columns:120px;max-height:none;overflow-x:auto}
 .grp-controls{width:auto}#grp-control-list{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
 .grp-header{grid-template-columns:1fr}.grp-shout-area,.grp-meta{grid-column:1}.grp-emblem{width:120px;height:120px}
 .grp-boards{grid-template-columns:1fr}.ga-layout{grid-template-columns:1fr}.ga-menu{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
 .grp-post{grid-template-columns:56px minmax(0,1fr)}.grp-post .grp-face{width:52px;height:52px}
}