/* Roblox 2020-style Groups. */
.g20{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start;max-width:1100px}
.g20-side h1{margin:0 0 12px;font-size:32px;font-weight:bold}
.g20-button{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;font-size:15px;font-weight:bold;color:inherit;background:var(--surface);border:1px solid #b8babe;border-radius:3px;cursor:pointer;text-decoration:none}
.g20-button:hover{background:rgba(0,0,0,.06);text-decoration:none}
.g20-button.primary{background:#00a2ff;border-color:#00a2ff;color:#fff}
.g20-button.primary:hover{background:#32b5ff}
.g20-button.big{width:100%;height:46px;font-size:18px}
.g20-button.small{height:30px;padding:0 10px;font-size:13px}
.g20-button:disabled{opacity:.5;cursor:not-allowed}
body.dark .g20-button:not(.primary){border-color:#656668}
.g20-side .g20-button{width:100%;margin-bottom:12px}
.g20-mine{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.g20-mine-row{display:flex;align-items:center;gap:10px;padding:10px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.g20-mine-row:hover{background:rgba(0,0,0,.04);text-decoration:none}
.g20-mine-row.selected{box-shadow:inset 4px 0 #00a2ff;font-weight:bold}
.g20-mine-row span{display:flex;flex-direction:column;min-width:0;font-size:14px}
.g20-mine-row small{font-size:12px;color:var(--muted);font-weight:normal}
.g20-browse{display:block;margin-top:10px;font-size:14px}
.g20-muted{color:var(--muted);font-size:14px;padding:10px;margin:0}
.g20-emblem{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:64px;height:64px;border-radius:6px;color:#fff;font-weight:bold;font-size:24px;letter-spacing:1px}
.g20-emblem.small{width:40px;height:40px;font-size:15px}
.g20-emblem.large{width:150px;height:150px;font-size:52px}
.g20-panel{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12);padding:18px 20px;margin-bottom:16px}
body.dark .g20-panel,body.dark .g20-mine{box-shadow:none}
.g20-panel h2{margin:0 0 12px;font-size:24px;font-weight:bold}
.g20-panel h3{margin:0 0 10px;font-size:20px;font-weight:bold}
.g20-panel h3 small{font-size:14px;color:var(--muted);font-weight:normal}
.g20-panel h4{margin:16px 0 8px;font-size:16px}
.g20-header{display:flex;align-items:center;gap:22px}
.g20-title{flex:1;min-width:0}
.g20-title h2{margin:0 0 4px;font-size:30px;overflow-wrap:anywhere}
.g20-title p{margin:0 0 6px;font-size:15px;color:var(--muted)}
.g20-title a{color:#0074bd;font-weight:500}
body.dark .g20-title a{color:#4ebeff}
.g20-stat strong{color:var(--text,inherit)}
.g20-tabs{display:flex;margin-bottom:16px;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
body.dark .g20-tabs{box-shadow:none}
.g20-tabs a{flex:1;text-align:center;padding:12px 8px 10px;font-size:17px;font-weight:500;color:inherit;text-decoration:none;border-bottom:4px solid transparent}
.g20-tabs a:hover{border-bottom-color:#b8e3ff}
.g20-tabs a.selected{border-bottom-color:#00a2ff}
.g20-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:15px}
.g20-shout{padding:10px 14px;border-left:4px solid #00a2ff;background:rgba(0,162,255,.06)}
.g20-shout small{display:block;margin-top:6px;color:var(--muted)}
.g20-shout-form,.g20-find{display:flex;gap:8px;margin-top:12px}
.g20-shout-form input,.g20-find input,.g20-payout input,.g20-payout select,.g20-create input,.g20-create textarea,#g20-settings textarea{flex:1;min-width:0;box-sizing:border-box;height:38px;padding:0 10px;font:inherit;font-size:15px;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:3px}
.g20-create textarea,#g20-settings textarea{height:auto;padding:8px 10px;width:100%;margin-bottom:10px}
.g20-create input{width:100%}
.g20-create label,#g20-settings label{display:block;margin:12px 0 6px;font-weight:bold;font-size:14px}
.g20-cost{display:flex;align-items:center;gap:4px;font-weight:bold}
.g20-cost .as20-robux,.g20-funds .as20-robux{color:#02b757}
.g20-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px}
.g20-member{display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;text-decoration:none;text-align:center;min-width:0}
.g20-member-avatar{width:84px;height:84px;border-radius:50%;background:#d4d6d8;overflow:hidden}
body.dark .g20-member-avatar{background:#393b3d}
.g20-member-avatar>span{display:block;width:100%;height:100%}
.g20-member-name{font-size:14px;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g20-member small{font-size:12px;color:var(--muted)}
.g20-member:hover .g20-member-name{text-decoration:underline}
.g20-results{margin-top:14px}
.g20-result{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.g20-result:hover strong{text-decoration:underline}
.g20-result>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.g20-result small{color:var(--muted)}
.g20-desc{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g20-store-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.g20-store-head h3{margin:0}
.g20-funds{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:30px;font-weight:bold;color:#02b757}
.g20-funds .as20-robux{width:26px;height:26px}
.g20-payout{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;margin-top:10px;background:rgba(0,0,0,.03);border-radius:4px}
body.dark .g20-payout{background:rgba(255,255,255,.04)}
.g20-payout h4{width:100%;margin:0}
.g20-payout input{max-width:140px}
.g20-ledger{width:100%;border-collapse:collapse;font-size:14px}
.g20-ledger td{padding:8px 6px;border-bottom:1px solid var(--line)}
.g20-ledger .pos{color:#02b757;font-weight:bold;text-align:right}
.g20-ledger .neg{color:#d43131;font-weight:bold;text-align:right}
.g20-roles select{height:32px;padding:0 6px;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:3px}
@media(max-width:800px){.g20{grid-template-columns:1fr}.g20-header{flex-wrap:wrap}.g20-emblem.large{width:96px;height:96px;font-size:34px}}
/* Group icon, header menu, members pager, wall, store management, Configure Group. */
.g20-icon{object-fit:cover;background:#d4d6d8}
body.dark .g20-icon{background:#393b3d}
.g20-header{position:relative}
.g20-stat{display:flex;gap:18px}
.g20-menu-wrap{position:absolute;top:10px;right:12px}
.g20-dots{width:36px;height:30px;font-size:22px;line-height:1;color:inherit;background:none;border:0;border-radius:3px;cursor:pointer}
.g20-dots:hover{background:rgba(0,0,0,.06)}
body.dark .g20-dots:hover{background:rgba(255,255,255,.08)}
.g20-menu{position:absolute;right:0;top:34px;z-index:20;min-width:180px;padding:6px 0;background:var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.25);border-radius:3px}
.g20-menu[hidden]{display:none}
.g20-menu a,.g20-menu button{display:block;width:100%;padding:9px 16px;font-size:15px;text-align:left;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
.g20-menu a:hover,.g20-menu button:hover{background:rgba(0,0,0,.06);text-decoration:none}
body.dark .g20-menu a:hover,body.dark .g20-menu button:hover{background:rgba(255,255,255,.08)}
.g20-join{margin-right:40px}
.g20-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.g20-panel-head h3{margin:0}
.g20-panel-head select,.g20-search,.g20-member-row select,.g20-inline-form input,.g20-inline-form select,.g20-post-form textarea,#g20-info textarea{height:34px;padding:0 8px;font:inherit;font-size:14px;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:3px;box-sizing:border-box}
.g20-inline-form{display:flex;gap:8px;margin-top:12px}
.g20-inline-form input,.g20-inline-form select{flex:1;min-width:0;height:38px}
.hs-img{display:block;width:100%;height:100%;object-fit:cover;background:#d4d6d8;border-radius:50%}
body.dark .hs-img{background:#4a4d50}
.g20-member-avatar .hs-img{border-radius:0}
.g20-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-size:14px}
.g20-pager:empty{display:none}
.g20-shout{display:flex;gap:12px;align-items:flex-start}
.g20-shout-avatar,.g20-wall-avatar{width:48px;height:48px;flex-shrink:0}
.g20-shout-name,.g20-wall-name{font-weight:bold;font-size:15px}
.g20-post-form{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px}
.g20-post-form textarea{flex:1;min-width:0;height:60px;padding:8px 10px;resize:vertical}
.g20-wall{display:flex;flex-direction:column}
.g20-wall-post{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.g20-wall-body{flex:1;min-width:0}
.g20-wall-body small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.g20-wall-delete{align-self:flex-start;width:28px;height:28px;font-size:20px;line-height:1;color:var(--muted);background:none;border:0;border-radius:3px;cursor:pointer}
.g20-wall-delete:hover{color:#d43131;background:rgba(0,0,0,.05)}
.g20-store-item{display:flex;flex-direction:column;min-width:0}
.g20-item-manage{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;font-size:13px;color:var(--muted)}
.g20-offsale{color:#d43131;font-weight:bold}
.g20-config{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start}
.g20-config-nav{display:flex;flex-direction:column;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
body.dark .g20-config-nav{box-shadow:none}
.g20-config-nav a{display:flex;align-items:center;padding:11px 14px;font-size:15px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.g20-config-nav a:hover{background:rgba(0,0,0,.04);text-decoration:none}
.g20-config-nav a.selected{box-shadow:inset 4px 0 #00a2ff;font-weight:bold}
.g20-config-nav .g20-back{font-size:14px;color:#0074bd}
body.dark .g20-config-nav .g20-back{color:#4ebeff}
.g20-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:#e2231a;color:#fff;font-size:12px;font-weight:bold;line-height:20px;text-align:center}
.g20-icon-edit{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.g20-icon-edit .g20-muted{padding:0 0 10px}
#g20-info label{display:block;margin:12px 0 6px;font-weight:bold;font-size:14px}
#g20-info textarea{width:100%;height:auto;padding:8px 10px;margin-bottom:10px;font-size:15px}
.g20-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.g20-toggle-row span{display:flex;flex-direction:column;gap:3px}
.g20-toggle-row small{color:var(--muted);font-size:13px}
.g20-toggle-row input{width:20px;height:20px}
.g20-member-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.g20-row-avatar{width:40px;height:40px;flex-shrink:0}
.g20-row-name{flex:1;min-width:0;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g20-row-name small{display:block;font-weight:normal;font-size:12px;color:var(--muted)}
.g20-row-role{font-size:14px;color:var(--muted)}
.g20-member-row select{height:30px;max-width:160px}
.g20-search{width:220px;max-width:50%}
.g20-role-table th{padding:8px 6px;text-align:left;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
.g20-role-table td{vertical-align:top}
.g20-role-perms{margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4}
.g20-form label{display:block;margin:10px 0 5px;font-weight:bold;font-size:14px}
.g20-form input[type=text],.g20-form input:not([type]),.g20-form input[type=number],.g20-form textarea{width:100%;box-sizing:border-box;padding:8px 10px;font:inherit;font-size:15px;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:3px}
.g20-form .g20-check{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:normal}
.g20-form .g20-muted{padding:4px 0}
.g20-perms{margin:12px 0 0;padding:8px 12px;border:1px solid var(--line);border-radius:4px}
.g20-perms legend{padding:0 6px;font-weight:bold;font-size:14px}
.g20-form-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.g20-form-actions .play{flex:1}
.g20-danger{color:#d43131!important;border-color:#d43131!important}
.play.g20-danger{background:#d43131!important;color:#fff!important}
@media(max-width:800px){.g20-config{grid-template-columns:1fr}.g20-join{margin-right:0}.g20-search{width:140px}}
.g20-form{text-align:left}
.g20-form .g20-check{justify-content:flex-start;text-align:left;cursor:pointer}
.g20-form input[type=checkbox]{width:18px!important;height:18px;flex:none;margin:0;padding:0}
.g20-item-manage>span{white-space:nowrap}

/* 2020 group page (.g19): sidebar search, header card with stats and shout, headings above panels. */
.g19 .g20-side h1{font-size:28px}
.g19-search{display:flex;height:30px;margin-bottom:12px}
.g19-search input{flex:1;min-width:0;padding:0 8px;font:inherit;font-size:13px;color:inherit;background:var(--surface);border:1px solid #b8bcbf;border-right:0;border-radius:3px 0 0 3px}
.g19-search button{width:30px;display:flex;align-items:center;justify-content:center;color:inherit;background:var(--surface);border:1px solid #b8bcbf;border-radius:0 3px 3px 0;cursor:pointer}
.g19-search button:hover{background:#e9ecee}
.g19-search svg{width:15px;height:15px}
.g19-search input:focus{outline:0;border-color:#00a2ff}
body.dark .g19-search input,body.dark .g19-search button{border-color:#606467}
body.dark .g19-search button:hover{background:#4a4d50}
.g19 .g20-mine{box-shadow:none;background:transparent}
.g19 .g20-mine-row{padding:6px 8px;border-bottom:0;border-radius:3px;font-size:14px}
.g19 .g20-mine-row.selected{background:var(--surface);box-shadow:inset 4px 0 #00a2ff;font-weight:600}
.g19 .g20-mine-row .g20-emblem.small{width:42px;height:42px;border-radius:3px}
.g19 .g19-create{width:100%;margin-top:12px;height:32px;font-size:14px;font-weight:500}
.g19 .g20-panel{box-shadow:0 1px 4px rgba(0,0,0,.18);padding:14px 16px;margin-bottom:12px}
body.dark .g19 .g20-panel{box-shadow:none}
.g19-header{flex-wrap:wrap;align-items:flex-start;gap:18px;padding:14px 16px}
.g19-header .g20-emblem.large{border-radius:3px}
.g19-header .g20-title h2{font-size:26px;margin:4px 0 2px}
.g19-by{font-size:14px}
.g19-stats{display:flex;gap:24px;list-style:none;margin:14px 0 0;padding:0}
.g19-stats li{display:flex;flex-direction:column;gap:2px}
.g19-stats span{font-size:13px;color:var(--muted)}
.g19-stats strong{font-size:16px;font-weight:500}
.g19-header .g20-join{align-self:flex-end;margin-right:0}
.g19-header .g20-join .g20-button{height:34px;padding:0 22px}
.g19-shout{flex-basis:100%;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.g19-shout .g20-shout{background:transparent;border-left:0;padding:0}
.g19-shout .g20-inline-form{margin-top:10px}
.g19-tabs{box-shadow:0 1px 4px rgba(0,0,0,.18);margin-bottom:12px}
.g19-tabs a{font-size:15px;font-weight:400;padding:9px 8px 7px;border-bottom-width:3px}
.g19-sec-head{margin:6px 0 6px;font-size:20px;font-weight:400}
.g19-sec-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.g19-sec-row select{height:30px;padding:0 8px;font:inherit;font-size:13px;color:inherit;background:var(--surface);border:1px solid #b8bcbf;border-radius:3px}
body.dark .g19-sec-row select{border-color:#606467}
.g19 .g20-member-avatar{width:72px;height:72px}.g20-members>.g20-muted{grid-column:1/-1}