/* =========================
   Base
========================= */

body{
    margin:0;
    padding:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:0.9em;
    background:#333333;
    color:#fff;
}

table{
    border-collapse:separate;
    border-spacing:1px;
}

a{
    color:#fff;
    text-decoration:none;
}

a:hover{
    color:yellow;
    text-decoration:none;
}


/* =========================
   Userbar
========================= */

.playerBar{
    height:28px;
    background:#808080;
    color:#fff;
    font-size:8.5pt;
    font-weight:normal;

    display:flex;
    align-items:center;
    gap:6px;

    padding:0 5px;
    box-sizing:border-box;

    overflow:hidden;
}

.statsBar strong{
    color:#fff;
    font-weight:bold;
}

.messageStatus{
    width:75px;
    height:20px;
    line-height:20px;

    display:inline-block;

    color:#fff;
    font-size:8pt;
    font-weight:bold;
    text-align:center;

    background:#777;
    border:1px solid #ccc;
    border-radius:3px;

    box-sizing:border-box;
}

.messageStatus.hasMessages{
    color:#ffff00;
    animation:messageBlink .7s infinite alternate;
}

@keyframes messageBlink{
    from{
        filter:brightness(1);
    }

    to{
        filter:brightness(1.6);
    }
}

.refreshButton{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#777;
    border:1px solid #ccc;
    border-radius:3px;

    box-sizing:border-box;
}

.refreshIcon{
    width:14px;
    height:14px;
    fill:#fff;
}

.statsBar{
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;

    white-space:nowrap;
    overflow:hidden;
}

.statsBar strong{
    color:#fff;
}

.divider{
    display:none;
}

.clockInline{
    margin-left:auto;
    color:#ffff00;
}

/* =========================
   Header
========================= */

.mainShell{
    min-height:100vh;
    background:#333333;
}

.gameHeader{
    height:65px;
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 18px;
    box-sizing:border-box;

    background:
        linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.45)),
        radial-gradient(circle at center top, rgba(110,18,18,.25), transparent 420px),
        #090909;

    border-bottom:1px solid #682116;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 0 #000;
}

.gameLogo{
    position:relative;
    line-height:1;
    text-shadow:2px 2px 3px #000;
}

.logoSmall{
    display:block;
    color:#fff;
    font-size:11px;
    font-family:Georgia, serif;
    font-weight:bold;
    letter-spacing:3px;
    margin-left:3px;
}

.logoWhite{
    color:#f2f2f2;
    font-family:Georgia, serif;
    font-size:31px;
    font-weight:bold;
    letter-spacing:-1px;
}

.logoRed{
    color:#b82020;
    font-family:Georgia, serif;
    font-size:31px;
    font-weight:bold;
    letter-spacing:-1px;
    text-shadow:
        1px 1px 0 #000,
        0 0 6px rgba(190,20,20,.55);
}

.headerActions{
    height:100%;
    display:flex;
    align-items:stretch;
}

.headerAction{
    width:92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    position:relative;

    color:#e8e8e8;
    text-decoration:none;

    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;

    border-left:1px solid rgba(255,255,255,.06);
    border-right:1px solid rgba(0,0,0,.65);

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.04),
        rgba(0,0,0,.18)
    );
}

.headerAction:hover{
    color:#fff;
    background:linear-gradient(
        to bottom,
        rgba(110,28,20,.4),
        rgba(0,0,0,.25)
    );
    text-decoration:none;
}

.headerActionIcon{
    display:block;
    margin-bottom:4px;

    color:#fff;
    font-size:21px;
    line-height:20px;

    text-shadow:1px 1px 2px #000;
}

.headerActionCount{
    position:absolute;
    top:8px;
    left:20px;

    color:#c78955;
    font-size:10px;
    font-weight:bold;
}
/* =========================
   Layout
========================= */

.gameLayout{
    display:flex;
    min-height:calc(100vh - 90px);
    background:#333333;
}

.contentArea{
    flex:1;
    padding:30px 20px 20px 115px;
    box-sizing:border-box;
}


/* =========================
   Sidebar / Menu
========================= */

.newSidebar{
    width:189px;
    flex:0 0 189px;

    background:#333333;
    border-right:1px solid #888;

    font-size:8.5pt;

    overflow-x:hidden;
}

.newMenuBlock{
    margin:0;
    padding:0;
    border:0;
}

.newMenuBlock:after{
    display:none;
    content:none;
}

.newMenuTitle{
    width:100%;
    min-height:15px;
    line-height:15px;

    display:flex;
    align-items:center;

    padding:1px 0;
    margin:0;

    background:url("../images/cell_bg.jpg") repeat-x;

    color:#fff;

    font-family:Verdana, Arial, sans-serif;
    font-size:8.5pt;
    font-weight:bold;
    text-transform:uppercase;

    border:0;
    cursor:pointer;
}

.menuTitleIcon{
    margin:0 4px 0 0;
    font-size:8px;
}

.menuCollapseArrow{
    margin-left:auto;
    padding-right:4px;
    font-size:9px;
}

.newMenuItems{
    margin:0;
    padding:0;
}

.newMenuBlock a{
    display:block;

    min-height:15px;
    line-height:15px;

    padding:0 0 0 2px;
    margin:0;

    color:#fff;

    font-family:Verdana, Arial, sans-serif;
    font-size:8.5pt;
    font-weight:normal;

    text-decoration:none;
}

.newMenuBlock a::before{
    content:"- ";
}

.newMenuBlock a span{
    display:none;
}

.newMenuBlock a:hover{
    color:yellow;
}

.activeMenuItem{
    color:yellow !important;
}

.newMenuBlock.isCollapsed .newMenuItems,
.newMenuBlock.isCollapsed a{
    display:none;
}


/* =========================
   Panels / Tables
========================= */

.panel,
.homeBox,
.ownerPanel{
    background:#737373;
    color:#000;
    border:1px solid #888;
    box-sizing:border-box;
    overflow:hidden;
}

.panelTitle,
.homeTitle,
.gamePanelTitle,
.newPanelTitle{
    height:21px;
    line-height:21px;

    padding:0 0 0 5px;

    background:url("../images/cell_bg.jpg") repeat-x;

    color:#fff;
    font-weight:bold;
    text-align:center;
}

.panelInner,
.homeInner{
    padding:4px;
    background:#737373;
    color:#000;
    box-sizing:border-box;
}

.gameTable,
.newGameTable,
.NewGridCenter{
    background:#737373;
    color:#000;

    border-collapse:separate;
    border-spacing:1px;
    border:1px outset #ccc;
}

.gameTable th,
.newGameTable th,
.NewGridTitle td,
.NewGridTitle th{
    height:19px;
    padding:0 0 0 5px;

    background:url("../images/cell_bg.jpg") repeat-x;

    color:#fff;
    font-weight:bold;
    text-align:left;
}

.gameTable td,
.newGameTable td,
.NewGridCenter td{
    background:#737373;
    border:1px solid #ccc;

    padding:1px;

    color:#000;
}


/* =========================
   Buttons / Forms
========================= */

button,
input[type="submit"],
.mailButton,
.but{
    min-height:22px;

    padding:2px 10px;

    background:#e8e8e8;
    border:1px solid #999;
    border-radius:3px;

    color:#000;

    font-family:Verdana, Arial, sans-serif;
    font-size:8.5pt;

    cursor:pointer;
}

button:hover,
input[type="submit"]:hover,
.mailButton:hover,
.but:hover{
    background:#fff;
    color:#000;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select{
    background:silver;
    border:1px solid #000;
    color:#000;

    font-family:Verdana, Arial, sans-serif;
    font-size:8.5pt;

    box-sizing:border-box;
}


/* =========================
   Notices
========================= */

.pageNotice{
    width:420px;
    max-width:100%;

    margin:0 auto 10px auto;
    padding:6px 10px;
    box-sizing:border-box;

    background:linear-gradient(to bottom, #e9dfba, #cfc082);
    border:1px solid #8d7a36;

    color:#111;
    font-size:8.5pt;
    font-weight:bold;
    text-align:center;
}

.pageNoticeError{
    background:linear-gradient(to bottom, #f0c6c6, #d89191);
    border-color:#8d3333;
    color:#4a0000;
}

.pageNoticeSuccess{
    background:linear-gradient(to bottom, #d8edc0, #9fc878);
    border-color:#557d33;
    color:#163000;
}

.newMenuTitle:hover{
    background:url("../images/cell_bg.jpg") repeat-x;
    color:#fff;
}

/* =========================
   General Page Blocks
========================= */

.pageBox{
    width:850px;
    max-width:100%;
    margin:0 auto;
}

.pageBoxSmall{
    width:520px;
    max-width:100%;
    margin:0 auto;
}

.pageBoxWide{
    width:1100px;
    max-width:100%;
    margin:0 auto;
}

.infoBar{
    height: 26px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    background:#888;
    border-bottom:1px solid #555;
    color:#000;
    font-size:11px;
}

.formActions{
    margin:8px 0;
    text-align:center;
}

.ownerText{
    width:850px;
    max-width:100%;
    margin:14px auto 0 auto;

    color:#fff;
    font-size:8.5pt;
    line-height:18px;
    text-align:center;
}

.ownerText span,
.ownerText strong{
    font-weight:bold;
    color:#fff;
}

.ownerTextLine + .ownerTextLine{
    margin-top:5px;
}

.ownerPanel{
    width:420px;
    margin:16px auto 0 auto;
}

.ownerPanelBody{
    padding:8px;
    text-align:center;
    color:#000;
}

.ownerPanelLine{
    margin-bottom:8px;
    color:#000;
}

.purchaseOnly{
    width:850px;
    max-width:100%;
    margin:30px auto 0 auto;
    text-align:center;
}

.purchaseLink{
    background:none !important;
    border:0 !important;
    color:#fff !important;

    font-family:Verdana, Arial, sans-serif;
    font-size:9pt;
    font-weight:bold;

    cursor:pointer;
}

.purchaseLink:hover{
    color:yellow !important;
}

/* =========================
   Airport
========================= */

.airportRadio{
    width:28px;
    text-align:center;
}

.airportCooldown{
    float:right;
    color:#ffff00;
    font-weight:bold;
}

.coolCity{
    color:#4db4ff !important;
    font-weight:bold;
}

.hotCity{
    color:#ff4545 !important;
    font-weight:bold;
}

.airportTitle{
    text-align:center;
    padding:0;
}

.airportRouteList{
    width:370px;
    margin:0;
    color:#000;
    font-size:10pt;
}

.airportRoute{
    display:block;
    min-height:24px;
    line-height:24px;
    color:#000;
    white-space:nowrap;
    font-size:14px;
}

.airportRoute input{
    margin-right:6px;
    vertical-align:middle;
}

.airportRoute.coolCity{
    color:#4db4ff !important;
    font-weight:bold;
}

.airportRoute.hotCity{
    color:#ff4545 !important;
    font-weight:bold;
}

.airportTravelNote{
    margin-top:8px;
    color:#000;
    text-align:center;
font-size:14px;
}

.ownerText{
    width:100%;
    margin:14px auto 0 auto;
    color:#fff;
    font-size:10pt;
    text-align:center;
}

.ownerText span{
    font-weight:bold;
}

.airportTravelLayout{
    width:560px;
    max-width:100%;
    margin:18px auto 10px auto;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.airportImageBox{
    width:190px;
    height:115px;
    border:1px solid #888;
    background:#333;
    overflow:hidden;
    flex:0 0 190px;
}

.airportImageBox img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.pageBoxAirport{
    width:650px;
    max-width:100%;
    margin:0 auto;
}

.slotContent{
    padding-top:30px;
}

.slotSpinMessage{
    width:620px;
    margin:0 auto 10px auto;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-align:center;
}

.slotPageGrid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:18px;
}

.slotMainColumn{
    width:620px;
}

.slotJackpot{
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    background:#888;
    border-bottom:1px solid #555;
    color:#d6a23c;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:11px;
}

.slotJackpot strong{
    color:#ffd46a;
    font-size:20px;
    text-shadow:1px 1px #000;
}

.slotReelsThreeRows{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:18px 0 14px 0;
}

.slotReelColumn{
    width:104px;
    height:318px;
    overflow:hidden;
    background:$888;
    border:2px solid #555;
    border-radius:4px;
    box-shadow:inset 0 0 18px rgba(0,0,0,.75);
}

.slotSymbolCell{
    height:106px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slotSymbolCell img{
    width:82px;
    height:82px;
    object-fit:contain;
    display:block;
}

.slotPayline{
    background:#888;
    border-top:1px solid #fc0026;
    border-bottom:1px solid #fc0026;
    box-shadow:inset 0 0 18px rgba(0,0,0,.75);
}

.slotBetForm{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    color:#fff;
    font-weight:bold;
}

.slotBetForm input{
    width:110px;
}

.slotSidePanel{
    width:300px;
}

.slotSideBox{
    margin-bottom:12px;
}

.slotPayoutTable,
.slotWinnerTable{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.slotPayoutTable td,
.slotWinnerTable td{
    border:1px solid #999;
    padding:4px;
    background:#808080;
    color:#000;
}

.slotPayoutTable img{
    width:28px;
    height:28px;
    object-fit:contain;
    vertical-align:middle;
    margin-right:3px;
}

.slotSpinMessage{
    width:620px;
    margin:0 auto 10px auto;
    padding:7px 10px;
    box-sizing:border-box;

    border:1px solid #333;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    text-shadow:1px 1px #000;
}

.slotSpinMessageLose{
    background:linear-gradient(to bottom, #3b1515, #1c0909);
    border-color:#7b2525;
    color:#ff9b9b;
}

.slotSpinMessageWin{
    background:linear-gradient(to bottom, #293b16, #121c09);
    border-color:#789239;
    color:#ffe08a;
}

.slotSpinMessageJackpot{
    padding:8px;
    background:linear-gradient(to bottom, #f3c555, #8a520d);
    border:1px solid #ffdf78;
    color:#fff3b0;
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
    box-shadow:
        0 0 10px rgba(255, 196, 62, .65),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.slotOwnerLogTable{
    width:100%;
    margin-top:10px;
    border-collapse:collapse;
    border-spacing:0;
    border:1px solid #ccc;
}

.slotOwnerLogTable th,
.slotOwnerLogTable td{
    border:1px solid #ccc;
    padding:2px 6px;
}

.slotOwnerLogTable th{
    text-align:left;
}

.slotOwnerLogTable td:first-child{
    text-align:left;
}

.slotOwnerLogTable td:last-child{
    text-align:left;
    font-weight:bold;
}

.slotOwnerLogTable tr.slotLogProfit td,
.slotOwnerLogTable tr.slotLogLoss td{
    background:#777 !important;
    color:#000;
}

.slotOwnerLogTable tr.slotLogProfit:nth-child(even) td,
.slotOwnerLogTable tr.slotLogLoss:nth-child(even) td{
    background:#6f6f6f !important;
}

.slotOwnerLogTable tr.slotLogProfit td:last-child{
    color:#d8ffd0;
}

.slotOwnerLogTable tr.slotLogLoss td:last-child{
    color:#ffd0d0;
}

.slotOwnerLogTable .positiveAmount,
.slotOwnerLogTable .negativeAmount{
    color:inherit;
    font-weight:bold;
}

.slotOwnerLogTable tr.slotLogProfit td:first-child{
    border-left:3px solid #5da45d;
}

.slotOwnerLogTable tr.slotLogLoss td:first-child{
    border-left:3px solid #9d4a4a;
}

/* =========================
   Roulette
========================= */

.rouletteContent{
    padding-top:30px;
}

.roulettePageGrid{
    display:flex;
    justify-content:center;
}

.roulettePanel{
    width:1500px;
}

.roulettePlayArea{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:18px;
    padding:14px 10px;
}

.rouletteWheelBox{
    width:220px;
    text-align:center;
    position:relative;
}

.roulettePointer{
    width:0;
    height:0;
    margin:0 auto -4px auto;

    border-left:9px solid transparent;
    border-right:9px solid transparent;
    border-top:0;
    border-bottom:16px solid #ffd46a;

    position:relative;
    z-index:2;
}

.rouletteWheel{
    width:190px;
    height:190px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    border:8px solid #3a1b13;

    background:
        repeating-conic-gradient(
            from 0deg,
            #8b1111 0deg 10deg,
            #111 10deg 20deg,
            #1f6b29 20deg 22deg,
            #111 22deg 30deg
        );

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.85),
        0 2px 5px rgba(0,0,0,.8);

    transition:transform 3.2s cubic-bezier(.12,.78,.18,1);
}

.rouletteWheelInner{
    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:#737373;
    border:3px solid #c9a044;

    color:#fff;
    font-size:28px;
    font-weight:bold;
    text-shadow:1px 1px #000;

    box-shadow:inset 0 0 12px rgba(0,0,0,.65);
}

.rouletteBetForm{
    width:1220px;
}

.rouletteBoard{
    display:grid;
    grid-template-columns:96px repeat(12, 96px);
    grid-template-rows:repeat(3, 68px);
    gap:2px;
    justify-content:center;
    margin:0 auto 8px auto;
}

.rouletteNumber{
    width:86px;
    height:58px;
    padding:0;

    color:#fff;
    font-weight:bold;
    text-align:center;

    border:1px solid #111;
    border-radius:0;

    cursor:pointer;
    box-sizing:border-box;
}


.rouletteRed{
    background:#8b1111;
}

.rouletteBlack{
    background:#111;
}

.rouletteOutsideBets{
    width:1222px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:4px;
    margin:0 auto 8px auto;
}

.rouletteOutsideBets button{
    height:25px;
    font-weight:bold;
}

.rouletteRedBet{
    background:#8b1111 !important;
    color:#fff !important;
}

.rouletteBlackBet{
    background:#111 !important;
    color:#fff !important;
}

.selectedBet{
    outline:2px solid #ffd46a;
    box-shadow:0 0 8px rgba(255,212,106,.7);
}

.rouletteSelected{
    margin:6px 0;
    color:#000;
    font-weight:bold;
    text-align:center;
}

.rouletteBetControls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    color:#000;
    font-weight:bold;
}

.rouletteBetControls input{
    width:110px;
}

.rouletteOwnerPanel{
    width:620px;
}
.rouletteZeroStack{
    grid-row:1 / 4;
    grid-column:1;

    display:grid;
    grid-template-rows:1fr 1fr;
    gap:2px;
}

.rouletteZeroStack .rouletteZero{
    width:100%;
    height:100%;
}

.roulettePanel{
    width:1120px;
}

.roulettePlayArea{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:22px;
    padding:14px 10px;
}

.rouletteBetForm{
    width:820px;
}

.rouletteBoardClassic{
    display:grid;
    grid-template-columns:62px 1fr 74px;
    grid-template-rows:auto auto auto;
    gap:4px;

    width:820px;
    padding:8px;

    background:#202020;
    border:1px solid #111;
    box-shadow:inset 0 0 18px rgba(0,0,0,.55);
    box-sizing:border-box;
}

.rouletteZeroColumn{
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:4px;
}

.rouletteNumbersGrid{
    grid-column:2;
    grid-row:1;

    display:grid;
    grid-template-columns:repeat(12, 52px);
    grid-template-rows:repeat(3, 44px);
    gap:4px;
}

.rouletteColumnBets{
    grid-column:3;
    grid-row:1;

    display:grid;
    grid-template-rows:repeat(3, 44px);
    gap:4px;
}

.rouletteDozens{
    grid-column:2;
    grid-row:2;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:4px;
}

.rouletteBottomBets{
    grid-column:1 / 4;
    grid-row:3;

    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:4px;
}

.rouletteBetBox{
    min-height:44px;
    padding:2px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    background:#191919;
    border:1px solid #555;
    border-radius:4px;

    color:#fff;
    font-size:11px;
    font-weight:bold;
    text-align:center;

    cursor:pointer;
    box-sizing:border-box;
}

.rouletteBetBox span{
    line-height:12px;
}

.rouletteBetBox em{
    width:34px;
    height:18px;
    line-height:18px;

    display:block;

    background:#101010;
    border:1px solid #777;
    border-radius:3px;

    color:#fff;
    font-style:normal;
    font-size:11px;
}

.rouletteBetRed{
    background:#981625;
    border-color:#c94757;
}

.rouletteBetBlack{
    background:#111;
    border-color:#666;
}

.rouletteZeroBox{
    background:#145c37;
    border-color:#39a96a;
    min-height:92px;
    color:#61ff9a;
    font-size:18px;
}

.rouletteSideBet,
.rouletteWideBet,
.rouletteBottomBet{
    background:#1b1515;
    border-color:#5c2c1c;
}

.selectedBet{
    outline:2px solid #ffd46a;
    box-shadow:
        0 0 8px rgba(255,212,106,.8),
        inset 0 0 10px rgba(255,212,106,.25);
}

.crimesGrid{
    display:grid;
    grid-template-columns:repeat(3, 200px);
    gap:22px 34px;
    justify-content:center;
}

.crimeCard{
    width:200px;
    margin:0;
    text-align:center;
}

.crimeImageButton{
    width:200px;
    height:120px;
    padding:0;
    border:1px solid #222;
    background:#111;
    cursor:pointer;
    display:block;
}

.crimeImageButton img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.crimeImageButton:hover{
    filter:brightness(1.12);
}

.crimeExpBar{
    width:150px;
    height:8px;
    margin:7px auto 3px auto;
    background:#2b2b2b;
    border:1px solid #aaa;
    box-sizing:border-box;
}

.crimeExpBar div{
    height:100%;
    background:linear-gradient(to right, #8d3617, #e0a820);
}

.crimeExpText{
    color:#fff;
    font-size:10pt;
    font-weight:bold;
    text-shadow:0 1px 1px #000;
}

.resultImageBox{
    width:420px;
    max-width:100%;
    margin:12px auto 0 auto;
    text-align:center;
}

.resultImageBox img{
    width:280px;
    max-width:100%;
    max-height:230px;
    object-fit:cover;

    border:1px solid #000;
    box-shadow:
        0 0 0 1px #777,
        0 8px 18px rgba(0,0,0,.45);
}

.statsTabs{
    text-align:center;
    margin:22px 0 12px 0;
}

.personalSnapshot{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    margin-bottom:14px;
}

.snapshotCard{
    background:#777;
    border:1px solid #bcbcbc;
    padding:8px 10px;
    box-sizing:border-box;
    color:#000;
    font-size:8.5pt;
}

.snapshotCard span{
    display:block;
    color:#111;
}

.snapshotCard strong{
    display:block;
    margin-top:3px;
    color:#fff;
    text-shadow:0 1px 1px #000;
}

.personalStatsGrid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:18px;
    margin-top:18px;
}

.missionProgressBar,
.achievementProgressBar{
    height:8px;
    background:#222;
    border:1px solid #aaa;
    box-sizing:border-box;
}

.missionProgressBar div,
.achievementProgressBar div{
    height:100%;
    background:linear-gradient(to right, #8d3617, #d9a323);
}

.missionProgressText{
    margin-bottom:3px;
}

.missionClaimedText,
.groupClaimedText{
    color:#d8d8d8;
    font-weight:bold;
}

.statsTabs{
    text-align:center;
    margin:22px 0 12px 0;
}

.personalWideTable{
    min-width:560px;
   margin:0 auto 0 auto;
}

.personalStatsGrid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:18px;
    margin-top:14px;
}

.personalStatsSmallTable{
    width:auto;
}

.rankupSmallTable{
    width:auto;
}

.personalStatsSmallTable td,
.rankupSmallTable td{
    white-space:nowrap;
}

.missionInlineClaim{
    display:inline-block;
    margin-left:8px;
}

.missionClaimedText{
    margin-left:8px;
    color:#ddd;
    font-weight:bold;
}

.groupClaimBox,
.groupClaimedText{
    width:560px;
    max-width:100%;
    margin:8px auto 0 auto;
    text-align:center;
}

.cleanGameTable{
    border-collapse:collapse;
    border-spacing:0;
}

.cleanGameTable th,
.cleanGameTable td{
    border:1px solid #bcbcbc;
}

.sectionTextTitle{
    width:560px;
    max-width:100%;
    margin:0 auto 4px auto;

    color:#fff;
    font-size:10pt;
    font-weight:bold;
    text-align:left;
    text-shadow:0 1px 1px #000;
}

.sectionTitleSplit{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sectionTitleSplit span:last-child{
    color:#cfcfcf;
    font-size:8pt;
    font-weight:normal;
}

.missionClaimedRow td{
    background:#696969  !important;
    color:#b9b9b9;
    opacity:.78;
}

.missionClaimedRow td:first-child{
    text-decoration:none;
    color:#cfcfcf;
}
.missionClaimedRow td:first-child:before{
    content:"✓ ";
    color:#9fd28b;
    font-weight:bold;
}

.missionReadyRow td{
    background:#777 !important;
}

.missionReadyRow td:first-child{
    color:#d8ffd0;
    font-weight:bold;
}

.personalIntro{
    width:560px;
    max-width:100%;
    margin:0 auto 10px auto;
    color:#d8d8d8;
    font-size:8.5pt;
    text-align:center;
}

.personalIntro span{
    color:#fff;
    font-weight:bold;
}
.personalWideTable th:nth-child(2),
.personalWideTable td:nth-child(2){
    width:75px;
    text-align:center;
}

.personalWideTable th:nth-child(3),
.personalWideTable td:nth-child(3){
    white-space:nowrap;
}