/* CSbePRO ban list. Tokens come from players.css (.pp). */

/* you: banned or not */
.pp.bans .me{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:16px 0;padding:14px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--deep);font:13px var(--mono);color:var(--dim)}
.pp.bans .me .ip b{color:#fff;font-weight:700;margin-left:4px}
.pp.bans .me .st{flex:1 1 auto}
.pp.bans .me.is-ok{border-color:rgba(162,198,0,.45);background:linear-gradient(90deg,rgba(162,198,0,.08),transparent 50%),var(--deep)}
.pp.bans .me.is-ok .st{color:var(--g)}
.pp.bans .me.is-banned{border-color:rgba(255,92,92,.55);background:linear-gradient(90deg,rgba(255,92,92,.1),transparent 50%),var(--deep)}
.pp.bans .me.is-banned .st{color:#ff7b7b}
.pp.bans .me a.btn{padding:8px 16px;font-size:12px}

/* tabs */
.pp.bans .tabs{display:flex;gap:6px;margin:16px 0 0}
.pp.bans a.tab,.pp.bans a.tab:visited{display:inline-flex;align-items:baseline;gap:8px;padding:10px 18px;border:1px solid var(--line);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;
  font:600 14px var(--head);letter-spacing:1px;text-transform:uppercase;color:var(--dim);background:var(--bg);transition:color var(--fast),background var(--fast)}
.pp.bans a.tab small{font:11px var(--mono);letter-spacing:0;text-transform:none;color:var(--faint)}
.pp.bans a.tab:hover{color:#fff}
.pp.bans a.tab.is-on{color:var(--g);background:var(--deep);border-color:var(--g-line);box-shadow:inset 0 2px 0 var(--g)}
.pp.bans .tabs + .ltable{margin-top:0;border-top-left-radius:0}

/* table */
.pp.bans .bhd,.pp.bans .brow{display:grid;grid-template-columns:minmax(0,1.3fr) 150px minmax(0,1.4fr) 90px 110px 130px 110px;gap:12px;align-items:center}
.pp.bans .bhd{padding:4px 12px 8px 16px;font:10px var(--label);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.pp.bans .brow{position:relative;padding:10px 12px 10px 16px;border-radius:var(--r-sm);overflow:hidden;transition:background var(--fast),transform var(--fast)}
.pp.bans .brow + .brow{border-top:1px solid var(--line-soft)}
.pp.bans .brow::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:#ff5c5c;transform:scaleY(0);transition:transform var(--fast) var(--ease)}
.pp.bans .brow:hover{background:rgba(255,92,92,.045);transform:translateX(3px)}
.pp.bans .brow:hover::before{transform:scaleY(1)}
.pp.bans .brow.is-lifted::before{background:var(--g)}
.pp.bans .brow.is-lifted:hover{background:rgba(162,198,0,.05)}
.pp.bans .brow::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:1px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,#ff5c5c,transparent);animation:pp-rowsweep 32s linear infinite;animation-delay:var(--d,0s)}
.pp.bans .brow.is-lifted::after{background:linear-gradient(90deg,transparent,var(--g),transparent)}

.pp.bans .who{display:flex;align-items:center;gap:10px;min-width:0}
.pp.bans .who img{width:24px;height:17px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.pp.bans .who .noflag{width:24px;height:17px;flex:none;border:1px dashed var(--line);border-radius:2px}
.pp.bans .nm{font:500 16px var(--head);color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp.bans .nm.is-unknown{color:var(--faint);font-style:italic}
.pp.bans a.nm,.pp.bans a.nm:visited{color:#fff;border-bottom:1px dotted var(--faint)}
.pp.bans a.nm:hover{color:var(--g);border-bottom-color:var(--g)}
.pp.bans .again{flex:none;padding:2px 7px;border:1px solid rgba(255,92,92,.55);border-radius:3px;font:600 10px var(--mono);letter-spacing:1px;
  text-transform:uppercase;color:#ff7b7b;background:rgba(255,92,92,.08)}
.pp.bans .sid{font:12px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp.bans .sid i{color:var(--faint)}
.pp.bans .why{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp.bans .srv{font:12px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp.bans .when,.pp.bans .exp{display:flex;flex-direction:column;font:12px var(--mono);color:var(--dim);white-space:nowrap}
.pp.bans .when small,.pp.bans .exp small{font-size:10px;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.pp.bans .exp b{font:700 13px var(--mono);color:#fff}
.pp.bans .exp b.perm{color:#ff7b7b;letter-spacing:.5px;text-transform:uppercase;font:700 11px var(--mono)}
.pp.bans .exp b.over{color:var(--faint)}
.pp.bans .exp b.lift{color:var(--g)}
.pp.bans .by{font:12px var(--mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp.bans .by.is-sys{color:var(--g)}
.pp.bans .by.is-sys::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--g);vertical-align:middle;
  box-shadow:0 0 8px rgba(162,198,0,.7)}

@media (max-width:1100px){
  .pp.bans .bhd,.pp.bans .brow{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) 110px 130px 100px}
  .pp.bans .c-sid,.pp.bans .c-srv{display:none}
}
@media (max-width:720px){
  .pp.bans .bhd,.pp.bans .brow{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 110px}
  .pp.bans .c-when,.pp.bans .c-by{display:none}
  .pp.bans .me{padding:12px 14px}
  .pp.bans .me .st{flex-basis:100%}
}

/* the ban on top of a player profile: a stop sign and the reason */
.pp .pban{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin:0 0 16px;padding:18px 24px;
  border:1px solid rgba(215,38,46,.7);border-radius:var(--r);overflow:hidden;
  background:
    repeating-linear-gradient(-45deg,rgba(215,38,46,.07) 0 14px,transparent 14px 28px),
    linear-gradient(90deg,rgba(215,38,46,.16),transparent 55%),var(--deep)}
.pp .pban::before,.pp .pban::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none}
.pp .pban::before{left:-1px;bottom:-1px;border-left:2px solid #d7262e;border-bottom:2px solid #d7262e}
.pp .pban::after{right:-1px;top:-1px;border-right:2px solid #d7262e;border-top:2px solid #d7262e}
.pp .pban .sign{width:96px;height:96px;flex:none;filter:drop-shadow(0 6px 16px rgba(215,38,46,.45));animation:pp-sign 3s ease-in-out infinite}
@keyframes pp-sign{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.pp .pban .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.pp .pban .kicker{color:#ff5c5c}
.pp .pban .tx b{font:700 30px/1.1 var(--head);color:#fff;letter-spacing:.3px;text-shadow:0 2px 0 #000}
.pp .pban .when{font:13px var(--mono);color:var(--dim)}
.pp .pban .when i{font-style:normal;color:#ff7b7b;font-weight:700}
.pp .pban .note{font:11px var(--mono);color:var(--faint)}
.pp .pban .act{display:flex;flex-direction:column;gap:8px}
.pp .pban a.btn{justify-content:center;padding:10px 18px;font-size:13px}
.pp .pban a.btn.solid,.pp .pban a.btn.solid:visited{background:#d7262e;border-color:#d7262e;color:#fff}
.pp .pban a.btn.solid:hover{background:#ff3b44;color:#fff}
@media (max-width:720px){
  .pp .pban{grid-template-columns:auto 1fr;padding:16px}
  .pp .pban .act{grid-column:1/-1;flex-direction:row}
  .pp .pban .sign{width:72px;height:72px}
  .pp .pban .tx b{font-size:22px}
}