/* ==========================================================
   2StonedRO
   Classic Progression, Modern Endgame
   ========================================================== */

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: #303a33;
    background:
        radial-gradient(circle at top, #25382c 0%, #111a15 48%, #090e0b 100%);
}

body > table {
    max-width: 1280px;
    margin: 0 auto;
    background: rgba(255,255,255,0.025);
    box-shadow: 0 0 45px rgba(0,0,0,.40);
}

/* ---------- Main header ---------- */

td[bgcolor="#8ebceb"] {
    background: #17271d !important;
    border-bottom: 1px solid #405c48;
}

#logo {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px 0;
}

/* ---------- Main content ---------- */

#content {
    color: #364139;
    border-spacing: 0;
}

#content td[bgcolor="#f5f5f5"] {
    background: #f6f7f3 !important;
}

#content h1,
#content h2 {
    color: #243529;
}

h2 {
    color: #243529;
    letter-spacing: -.5px;
}

h3 {
    color: #354a3a;
    border-color: #cad3cc;
}

a {
    color: #447353;
}

a:hover {
    color: #755d24;
}

/* ---------- Sidebar ---------- */

#sidebar,
#admin_sidebar {
    border-radius: 8px;
    overflow: hidden;
}

#sidebar td.sidebar-left,
#sidebar td.sidebar-right {
    background: #263d2e;
}

#sidebar td.menuitem,
#sidebar th.menuitem {
    border-color: #36523e;
}

#sidebar th.menuitem {
    background: #192b20;
}

#sidebar th.menuitem strong {
    color: #e8d9a3;
    border-color: #405d47;
}

#sidebar td.menuitem a {
    background: #263d2e;
    color: #f0f3ef;
    text-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

#sidebar td.menuitem a:hover {
    background: #385942;
    color: #fff2bd;
    text-shadow: none;
}

/* Admin sidebar */

#admin_sidebar th.menuitem {
    background: #171b18;
}

#admin_sidebar td.menuitem a {
    background: #252b27;
}

#admin_sidebar td.menuitem a:hover {
    background: #3c4940;
}

/* ---------- Login/account bar ---------- */

#loginbox {
    padding: 11px 14px;
    margin-bottom: 12px;
    background: #edf1ec;
    border: 1px solid #d1d9d2;
    border-left: 4px solid #9c833e;
    border-radius: 7px;
    color: #465047;
}

/* ---------- Forms ---------- */

input[type=text],
input[type=password],
input[type=file],
textarea,
select {
    box-sizing: border-box;
    border: 1px solid #bcc9bf;
    border-radius: 5px;
    padding: 6px 8px;
    background: #fff;
    color: #29332c;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
    border-color: #557d60;
    box-shadow: 0 0 0 2px rgba(85,125,96,.12);
}

.submit_button {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    padding: 8px 15px;
    background: #355841;
    color: white;
    font-weight: 600;
}

.submit_button:hover {
    background: #263f30;
    border: 0;
}

/* ---------- Tables ---------- */

.horizontal-table,
.vertical-table,
#server_status {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d2d9d3;
    border-radius: 6px;
}

.horizontal-table th,
.vertical-table th,
#server_status th {
    background: #e6ebe6;
    color: #34443a;
}

.horizontal-table td,
.vertical-table td,
#server_status td {
    background: #fff;
}

/* ---------- News ---------- */

.newsDiv h4 {
    margin: 18px 0 0;
    padding: 10px 14px;
    background: #e8ede8;
    color: #304437;
    border-left: 4px solid #8b7535;
}

.newsCont {
    padding: 12px 15px 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #dce2dc;
    border-top: 0;
}

/* ==========================================================
   Homepage Hero
   ========================================================== */

.stoned-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 25px;
    padding: 34px 38px;
    border: 1px solid #506957;
    border-radius: 12px;

    background:
        radial-gradient(circle at 85% 20%, rgba(198,169,83,.18), transparent 34%),
        linear-gradient(135deg, #17261c 0%, #253c2d 58%, #1a2b20 100%);

    color: #eef3ef;
    box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.stoned-hero:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    bottom: -150px;
    border-radius: 50%;
    border: 35px solid rgba(217,192,112,.06);
}

.stoned-kicker {
    margin-bottom: 9px;
    color: #d5bc72;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.stoned-hero h1 {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -.7px;
}

.stoned-intro {
    max-width: 760px;
    margin: 0 0 21px;
    color: #d6dfd9;
    font-size: 15px;
    line-height: 1.6;
}

.stoned-actions {
    margin: 0 0 27px;
}

.stoned-btn {
    display: inline-block;
    margin: 0 8px 5px 0;
    padding: 10px 17px;
    border: 1px solid #718677;
    border-radius: 6px;
    color: #f1f5f2 !important;
    background: rgba(255,255,255,.06);
    font-weight: 600;
    text-decoration: none;
}

.stoned-btn:hover {
    background: rgba(255,255,255,.13);
}

.stoned-btn-primary {
    background: #a58a3f;
    border-color: #bba357;
    color: #fff !important;
}

.stoned-btn-primary:hover {
    background: #b89b49;
}

.stoned-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stoned-stat {
    min-width: 105px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 7px;
    background: rgba(0,0,0,.14);
}

.stoned-stat strong {
    display: block;
    color: #e3c66e;
    font-size: 18px;
}

.stoned-stat span {
    display: block;
    margin-top: 1px;
    color: #bfcac2;
    font-size: 11px;
}

/* ---------- Messages ---------- */

.message {
    border-radius: 6px;
    background: #304e3a;
}

.notice {
    border-radius: 6px;
}

/* ---------- Footer ---------- */

#copyright p,
#info p {
    color: #8f9a92;
}

#copyright a {
    color: #bca863;
}

/* ---------- Small screens ---------- */

@media screen and (max-width: 760px) {

    .stoned-hero {
        padding: 25px 22px;
    }

    .stoned-hero h1 {
        font-size: 28px;
    }

    .stoned-stat {
        min-width: 90px;
        flex: 1 1 90px;
    }
}


/* 2STONED-GLOBAL-SKIN-START */

/* ==========================================================
   2StonedRO - Global FluxCP Skin
   Dark forest / stone / gold
   ========================================================== */


/* ---------- Main FluxCP content shell ---------- */

#content {
    color: #d8e3db !important;
}

#content > tbody > tr > td[bgcolor="#f5f5f5"],
#content td[bgcolor="#f5f5f5"] {
    background: #111a15 !important;
}

#content img[src*="content_tl"],
#content img[src*="content_tr"],
#content img[src*="content_bl"],
#content img[src*="content_br"] {
    display: none !important;
}

#content > tbody > tr > td[width="18"] {
    width: 0 !important;
    padding: 0 !important;
}

#content h1,
#content h2 {
    color: #8cff39 !important;
}

#content h3 {
    color: #d9bf6b !important;
    border-bottom-color: #3b5844 !important;
}

#content h4 {
    color: #d8c273;
}

#content a {
    color: #86c96d;
}

#content a:hover {
    color: #e0c76e;
}


/* ---------- LEFT SIDEBAR ---------- */

#sidebar,
#admin_sidebar {
    width: 198px;
    margin-bottom: 14px !important;
    background: #121f17 !important;
    border: 1px solid #38523f !important;
    border-radius: 10px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

#sidebar tr:first-child,
#sidebar tr:last-child,
#admin_sidebar tr:first-child,
#admin_sidebar tr:last-child {
    display: none !important;
}

#sidebar td.menuitem,
#sidebar th.menuitem,
#admin_sidebar td.menuitem,
#admin_sidebar th.menuitem {
    border-width: 0 !important;
    border-style: none !important;
    background: #121f17 !important;
}

#sidebar th.menuitem,
#admin_sidebar th.menuitem {
    background: #17291e !important;
}

#sidebar th.menuitem strong,
#admin_sidebar th.menuitem strong {
    display: block !important;
    margin: 0 12px !important;
    padding: 10px 0 4px !important;

    color: #8cff39 !important;
    background: none !important;

    border-bottom: 1px solid #395644 !important;

    font-weight: 700 !important;
    text-shadow: none !important;
}

#sidebar td.menuitem a,
#admin_sidebar td.menuitem a {
    display: block !important;

    margin: 0 !important;
    padding: 6px 14px 6px 17px !important;

    color: #e2ebe5 !important;
    background: #121f17 !important;

    text-shadow: none !important;
    text-decoration: none !important;

    transition:
        background .15s ease,
        color .15s ease,
        padding-left .15s ease;
}

#sidebar td.menuitem a:hover,
#admin_sidebar td.menuitem a:hover {
    padding-left: 21px !important;

    color: #f0d77d !important;
    background: #274331 !important;

    text-shadow: none !important;
}

#sidebar td.menuitem a span,
#admin_sidebar td.menuitem a span {
    color: inherit !important;
}


/* ---------- LOGGED IN / ADMIN BAR ---------- */

#loginbox {
    margin-bottom: 14px !important;

    color: #d7e2da !important;
    background: #14231a !important;

    border: 1px solid #3c5845 !important;
    border-left: 4px solid #a88d43 !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

#loginbox td[bgcolor="#e1eaf3"] {
    background: #14231a !important;
    color: #d7e2da !important;
}

#loginbox img[src*="loginbox_"] {
    display: none !important;
}

#loginbox td[width="18"] {
    width: 6px !important;
}

#loginbox a {
    color: #9bd876 !important;
}

#loginbox a:hover {
    color: #efd477 !important;
}

.loginbox-admin-menu {
    padding: 8px 0 !important;

    color: #d9bd67 !important;
    border-top: 1px solid #304a39 !important;
}


/* ---------- SUB MENUS ---------- */

#submenu,
#pagemenu {
    margin: 8px 0 !important;
    padding: 8px 10px !important;

    color: #91a497 !important;
    background: #16231b !important;

    border: 1px solid #30483a !important;
    border-radius: 6px !important;
}

#submenu a,
#pagemenu a {
    color: #91cf72 !important;
    text-decoration: none !important;
}

#submenu a:hover,
#pagemenu a:hover,
.current-sub-menu {
    color: #e0c46d !important;
}


/* ---------- STANDARD TABLES ---------- */

.horizontal-table,
.vertical-table,
.generic-form-table,
#server_status,
.woe-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #142119 !important;

    border: 1px solid #35503e !important;
    border-radius: 7px !important;

    overflow: hidden !important;
}

.horizontal-table th,
.vertical-table th,
.generic-form-table th,
#server_status th,
.woe-table th {
    color: #dbc46f !important;
    background: #203729 !important;

    border-color: #395342 !important;
}

.horizontal-table td,
.vertical-table td,
.generic-form-table td,
#server_status td,
.woe-table td {
    color: #d8e3db !important;
    background: #142119 !important;

    border-color: #304839 !important;
}

.horizontal-table tr:hover td,
.vertical-table tr:hover td {
    background: #1d3024 !important;
}


/* ---------- SERVER STATUS ---------- */

#server_status {
    background: #142119 !important;
}

#server_status .server {
    color: #e5cf7d !important;
}

#server_status .status {
    font-weight: 700 !important;
}


/* ---------- FORMS ---------- */

.generic-form,
.generic-form-div {
    padding: 14px !important;

    color: #d8e3db !important;
    background: #142119 !important;

    border: 1px solid #35503e !important;
    border-radius: 8px !important;
}

.generic-form-table td p {
    color: #cbd7ce !important;
}

input[type=text],
input[type=password],
input[type=file],
input[type=email],
input[type=number],
textarea,
select {
    color: #eef5f0 !important;
    background: #0d1711 !important;

    border: 1px solid #3a5742 !important;
    border-radius: 5px !important;

    outline: none !important;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=file]:focus,
input[type=email]:focus,
input[type=number]:focus,
textarea:focus,
select:focus {
    color: #ffffff !important;
    background: #111f17 !important;

    border-color: #8aa35f !important;
    box-shadow: 0 0 0 2px rgba(140,180,100,.12) !important;
}

input[type=submit],
input[type=button],
input[type=reset],
button,
.submit_button {
    display: inline-block !important;

    padding: 8px 14px !important;

    color: #ffffff !important;
    background: #355a42 !important;

    border: 1px solid #53765e !important;
    border-radius: 5px !important;

    font-weight: 600 !important;
    cursor: pointer !important;
}

input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
button:hover,
.submit_button:hover {
    color: #fff5ca !important;
    background: #476f52 !important;

    border-color: #729077 !important;
}


/* ---------- SEARCH PANELS ---------- */

.search-form,
.search-form2 {
    padding: 8px !important;

    background: #111c15 !important;
    border-color: #324b3a !important;
}

.search-form p,
.search-form2 p {
    color: #a9b9ad !important;
    border-color: #324b3a !important;
}

.search-form label,
.search-form2 label {
    color: #c8d5cc !important;
}


/* ---------- INFORMATION / NOTES ---------- */

.info-text,
.note,
.raw-txn-log,
.credit-balance {
    color: #cbd8cf !important;
    background: #18271d !important;

    border-color: #3b5743 !important;
    border-radius: 6px !important;
}

.credit-balance .balance-text {
    color: #aabbaf !important;
}

.credit-balance .balance-amount {
    color: #e2c871 !important;
}


/* ---------- NOTICES ---------- */

.notice {
    color: #e5e1c9 !important;
    background: #283323 !important;

    border: 1px solid #6b7042 !important;
    border-left: 4px solid #c2a851 !important;
    border-radius: 6px !important;
}

.message {
    color: #edf5ef !important;
    background: #274833 !important;

    border-left: 4px solid #8ac96c !important;
    border-radius: 6px !important;
}


/* ---------- PAGINATION ---------- */

.pages {
    color: #718278 !important;
    border-top-color: #314a39 !important;
}

.pages .page-prev,
.pages .page-next,
.pages .page-num {
    color: #8ecf70 !important;
}

.pages .current-page {
    color: #e0c46d !important;
}


/* ---------- SHOP ---------- */

.shop-table {
    color: #d8e3db !important;
}

.shop-table td {
    color: #d8e3db !important;
    background: #142119 !important;

    border-color: #35503e !important;
}

.shop-item-name {
    color: #d9bf68 !important;
    border-bottom-color: #35503e !important;
}

.shop-server-name,
.cost,
.qty {
    color: #d8e3db !important;
}

.shop-item-action a,
.action a,
.action span.anchor,
.block-link {
    color: #86ca6c !important;
    border-color: #3d5844 !important;
}


/* ---------- CHARACTER / RANKING ---------- */

.character-stats {
    color: #b8c6bc !important;
}

.character-stats .stat-name {
    color: #93a79a !important;
}

.character-stats .stat-value {
    color: #e6cf79 !important;
}

.top-ranked td {
    color: #f3e3a6 !important;
    background: #304125 !important;
}

.top-ranked a {
    color: #f3e3a6 !important;
}


/* ---------- MVP / ITEM DATABASE ---------- */

.item-drop-mvp td {
    color: #e9d999 !important;
    background: #293620 !important;
}

.sortable {
    color: #9bd87a !important;
}

.sortable:hover {
    color: #e1c66d !important;
}


/* ---------- SCRIPT / ADMIN DATA ---------- */

.script-line-num {
    color: #d2bd6b !important;
    background: #1d3024 !important;

    border-right-color: #3d5745 !important;
}

.script-line-code {
    color: #dbe6de !important;
}

.request,
.fs-path {
    color: #d9e4dc !important;
    background: #0e1812 !important;

    border-color: #38523f !important;
}


/* ---------- NEWS ---------- */

.newsDiv h4 {
    color: #dbc46f !important;
    background: #1b3023 !important;

    border-left: 4px solid #a88d43 !important;
}

.newsCont {
    color: #d8e3db !important;
    background: #142119 !important;

    border-color: #35503e !important;
}


/* ---------- COMMON TEXT ---------- */

.not-applicable {
    color: #73867a !important;
}

.online,
.up {
    color: #8ee36b !important;
}

.offline {
    color: #7d8a82 !important;
}

.down,
.state-banned,
.state-permanently-banned {
    color: #ef7777 !important;
}

.state-pending {
    color: #e3c468 !important;
}


/* ---------- HEADER ---------- */

td[bgcolor="#8ebceb"] {
    background: #0f1b13 !important;
}


/* ---------- FOOTER ---------- */

#copyright p,
#info p {
    color: #708077 !important;
}

#copyright a,
#info a {
    color: #a9914d !important;
}


/* ---------- SCROLLBARS ---------- */

* {
    scrollbar-color: #3d6348 #101a14;
}


/* ---------- MOBILE ---------- */

@media screen and (max-width: 800px) {

    #sidebar,
    #admin_sidebar {
        width: 100% !important;
    }

    .horizontal-table {
        display: block;
        overflow-x: auto;
    }

    .stoned-stats {
        gap: 6px;
    }
}

/* 2STONED-GLOBAL-SKIN-END */


/* 2STONED-SERVERINFO-START */

/* ==========================================================
   2StonedRO Server Information
   ========================================================== */

.stoned-info-page {
    color: #d9e4dc;
}

.stoned-info-header {
    padding: 27px 30px;
    margin-bottom: 18px;

    background:
        radial-gradient(circle at 90% 0%, rgba(204,178,91,.13), transparent 34%),
        linear-gradient(135deg, #17291e, #213a2a);

    border: 1px solid #45604d;
    border-radius: 10px;
}

.stoned-info-header h2 {
    margin: 3px 0 9px !important;
    padding: 0 !important;

    color: #8cff39 !important;
    border: 0 !important;

    font-size: 26px;
}

.stoned-info-header p {
    max-width: 760px;

    margin: 0 0 18px;

    color: #cdd9d0;
    line-height: 1.6;
}


/* ---------- Information cards ---------- */

.stoned-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}

.stoned-info-card {
    padding: 18px;

    background:
        linear-gradient(145deg, #15251b, #101b14);

    border: 1px solid #385440;
    border-radius: 8px;

    box-shadow: 0 6px 18px rgba(0,0,0,.13);
}

.stoned-info-card h3 {
    margin: 0 0 12px !important;
    padding: 0 0 8px !important;

    color: #e0c66e !important;

    border-bottom:
        1px solid #36503e !important;

    font-size: 15px;
}

.stoned-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    padding: 7px 3px;

    border-bottom:
        1px solid rgba(105,137,115,.17);
}

.stoned-info-row:last-of-type {
    border-bottom: 0;
}

.stoned-info-row span {
    color: #aebdb3;
}

.stoned-info-row strong {
    color: #8cff39;

    text-align: right;
    white-space: nowrap;
}

.stoned-info-note {
    margin: 12px 0 0;

    color: #839589;
    font-size: 11px;
    line-height: 1.5;
}


/* ---------- Feature section ---------- */

.stoned-feature-section {
    padding: 23px;

    background: #101b14;

    border: 1px solid #334d3a;
    border-radius: 9px;
}

.stoned-section-title {
    margin-bottom: 17px;
}

.stoned-section-title span {
    color: #c7ab56;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.6px;
}

.stoned-section-title h3 {
    margin: 4px 0 0 !important;
    padding: 0 !important;

    color: #8cff39 !important;
    border: 0 !important;

    font-size: 21px;
}

.stoned-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;
}

.stoned-feature {
    min-height: 98px;
    padding: 14px;

    background: #17271d;

    border: 1px solid #314a38;
    border-radius: 7px;
}

.stoned-feature strong {
    display: block;

    margin-bottom: 7px;

    color: #dcc36d;
}

.stoned-feature p {
    margin: 0;

    color: #aebdb3;

    font-size: 12px;
    line-height: 1.5;
}


/* ---------- Bottom status link ---------- */

.stoned-info-footerbox {
    display: flex;

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

    gap: 20px;

    margin-top: 16px;
    padding: 15px 18px;

    background: #182a1f;

    border: 1px solid #405c47;
    border-left: 4px solid #a88d43;
    border-radius: 7px;
}

.stoned-info-footerbox strong {
    display: block;

    margin-bottom: 3px;

    color: #e1c76e;
}

.stoned-info-footerbox span {
    display: block;

    color: #aebcb2;

    font-size: 11px;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 850px) {

    .stoned-info-grid {
        grid-template-columns: 1fr;
    }

    .stoned-feature-grid {
        grid-template-columns: 1fr;
    }

    .stoned-info-footerbox {
        display: block;
    }

    .stoned-info-footerbox .stoned-btn {
        margin-top: 12px;
    }
}

/* 2STONED-SERVERINFO-END */


/* 2STONED-WHOSONLINE-START */

/* ==========================================================
   2StonedRO Who's Online
   ========================================================== */

.stoned-online-page {
    color: #d9e4dc;
}


/* ---------- Header ---------- */

.stoned-online-header {
    margin-bottom: 15px;
    padding: 24px 27px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(201, 174, 84, .12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #17291e,
            #213a2a
        );

    border: 1px solid #45604d;
    border-radius: 9px;
}

.stoned-online-header h2 {
    margin: 3px 0 8px !important;
    padding: 0 !important;

    color: #8cff39 !important;

    border: 0 !important;

    font-size: 25px;
}

.stoned-online-header p {
    margin: 0;

    color: #c7d3ca;

    line-height: 1.5;
}


/* ---------- Search ---------- */

.stoned-online-search {
    margin-bottom: 14px;
}

.stoned-online-search .toggler {
    margin: 0 0 6px;
}

.stoned-online-search .toggler a {
    display: inline-block;

    padding: 6px 11px;

    color: #dcc36d !important;
    background: #17271d;

    border: 1px solid #385440;
    border-radius: 5px;

    text-decoration: none;
}

.stoned-online-search .toggler a:hover {
    color: #ffffff !important;
    background: #284431;
}

.stoned-online-search .search-form {
    padding: 12px !important;

    background: #111d16 !important;

    border: 1px solid #344e3b !important;
    border-radius: 7px !important;
}


/* ---------- Result summary ---------- */

.stoned-online-summary {
    margin-bottom: 10px;
    padding: 8px 12px;

    color: #b9c7bd;

    background: #17271d;

    border: 1px solid #395340;
    border-radius: 6px;

    text-align: center;
}

.stoned-online-hidden {
    margin-bottom: 10px;
    padding: 9px 12px;

    color: #c4d0c7;

    background: #19281e;

    border: 1px solid #405746;
    border-left: 4px solid #a88d43;
    border-radius: 6px;
}


/* ---------- Table ---------- */

.stoned-online-table-wrap {
    overflow-x: auto;
}

.stoned-online-table {
    width: 100%;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    border: 1px solid #405c47 !important;
    border-radius: 8px !important;

    overflow: hidden;
}

.stoned-online-table thead th {
    padding: 10px 12px !important;

    color: #e0c66e !important;
    background: #20382a !important;

    border-bottom: 1px solid #4a6652 !important;

    font-weight: 700;
    text-align: left;
}

.stoned-online-table tbody td {
    padding: 10px 12px !important;

    color: #d6e1d9 !important;
    background: #142119 !important;

    border-bottom: 1px solid #2f4737 !important;
}

.stoned-online-table tbody tr:nth-child(even) td {
    background: #17271d !important;
}

.stoned-online-table tbody tr:hover td {
    background: #21382a !important;
}

.stoned-online-table tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* ---------- Character ---------- */

.stoned-character-name a {
    color: #9fe377 !important;
    font-weight: 700;
}

.stoned-character-name a:hover {
    color: #e0c66e !important;
}


/* ---------- Levels ---------- */

.stoned-level {
    color: #e0c66e !important;
    font-weight: 700;
}


/* ---------- Guild ---------- */

.stoned-guild-cell {
    white-space: nowrap;
}

.stoned-guild-emblem {
    width: 20px;
    height: 20px;

    margin-right: 7px;

    vertical-align: middle;
}

.stoned-guild-cell a {
    color: #a4d983 !important;
}


/* ---------- Empty state ---------- */

.stoned-online-empty {
    padding: 24px;

    background: #142119;

    border: 1px solid #395340;
    border-radius: 8px;

    text-align: center;
}

.stoned-online-empty strong {
    display: block;

    margin-bottom: 5px;

    color: #e0c66e;

    font-size: 16px;
}

.stoned-online-empty span {
    color: #98aa9e;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 750px) {

    .stoned-online-header {
        padding: 20px;
    }

    .stoned-online-table {
        min-width: 620px;
    }
}

/* 2STONED-WHOSONLINE-END */


/* 2STONED-HEADER-TITLE-FIX */

.stoned-online-header h2,
.stoned-info-header h2 {
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 3px 0 8px !important;

    color: #8cff39 !important;
}

/* END 2STONED-HEADER-TITLE-FIX */


/* 2STONED-STATUS-START */

/* ==========================================================
   2StonedRO Server Status
   ========================================================== */

.stoned-status-page {
    color: #d9e4dc;
}


/* ---------- Main header ---------- */

.stoned-status-header {
    margin-bottom: 16px;
    padding: 26px 29px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(204,178,91,.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #17291e,
            #213a2a
        );

    border: 1px solid #45604d;
    border-radius: 10px;
}

.stoned-status-header h2 {
    margin: 3px 0 8px !important;
    padding: 0 !important;

    color: #8cff39 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 27px;
}

.stoned-status-header p {
    margin: 0;

    color: #c8d4cb;

    line-height: 1.5;
}


/* ---------- Server group ---------- */

.stoned-status-group {
    margin-bottom: 18px;
}

.stoned-status-group-title {
    margin-bottom: 9px;
    padding: 0 3px;
}

.stoned-status-group-title span {
    color: #bda250;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.stoned-status-group-title h3 {
    margin: 3px 0 0 !important;
    padding: 0 !important;

    color: #e0c66e !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;

    font-size: 18px;
}


/* ---------- Grid ---------- */

.stoned-status-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* ---------- Main card ---------- */

.stoned-status-card {
    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #15251b,
            #101b14
        );

    border: 1px solid #3c5743;
    border-radius: 9px;

    box-shadow:
        0 7px 20px rgba(0,0,0,.15);
}


/* ---------- Card header ---------- */

.stoned-status-card-head {
    display: flex;

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

    gap: 15px;

    margin-bottom: 15px;
    padding-bottom: 11px;

    border-bottom:
        1px solid #35503e;
}

.stoned-status-card-head span {
    display: block;

    margin-bottom: 2px;

    color: #829589;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.stoned-status-card-head strong {
    display: block;

    color: #e1c76f;

    font-size: 18px;
}

.stoned-live-label {
    padding: 5px 9px;

    color: #8cff39;

    background: #17291e;

    border: 1px solid #3d5945;
    border-radius: 4px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ---------- Login / Char / Map ---------- */

.stoned-service-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}

.stoned-service-box {
    padding: 13px 10px;

    background: #182a1f;

    border: 1px solid #314a39;
    border-radius: 6px;

    text-align: center;
}

.stoned-service-box > span {
    display: block;

    margin-bottom: 6px;

    color: #9cad9f;

    font-size: 10px;
}

.stoned-service-state {
    display: block;

    color: #8cff39;

    font-size: 13px;
}


/* Existing FluxCP status output */

.stoned-service-state .up,
.stoned-service-state .online {
    color: #8cff39 !important;
    font-weight: 700;
}

.stoned-service-state .down,
.stoned-service-state .offline {
    color: #ef7777 !important;
    font-weight: 700;
}


/* ---------- Population ---------- */

.stoned-population-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.stoned-population-box {
    padding: 13px 14px;

    background:
        linear-gradient(
            135deg,
            #203729,
            #182a1f
        );

    border: 1px solid #405c47;
    border-radius: 6px;
}

.stoned-population-box span {
    display: block;

    color: #a7b7ac;

    font-size: 10px;
}

.stoned-population-box strong {
    display: block;

    margin-top: 3px;

    color: #e1c76e;

    font-size: 24px;
}


/* ---------- Actions ---------- */

.stoned-status-actions {
    margin-top: 14px;
    padding-top: 13px;

    border-top:
        1px solid #314a39;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 850px) {

    .stoned-status-grid {
        grid-template-columns: 1fr;
    }

}

@media screen and (max-width: 620px) {

    .stoned-service-grid {
        grid-template-columns: 1fr;
    }

    .stoned-population-grid {
        grid-template-columns: 1fr;
    }

}

/* 2STONED-STATUS-END */


/* 2STONED-HIDE-FLUXCP-CREDIT */
#copyright {
    display: none !important;
}
/* END 2STONED-HIDE-FLUXCP-CREDIT */


/* 2STONED-HOMEBOTTOM-START */

/* ==========================================================
   2StonedRO Homepage Bottom Section
   ========================================================== */

.stoned-home-bottom {
    margin-top: 20px;
}


/* ---------- Main bottom banner ---------- */

.stoned-bottom-banner {
    position: relative;
    overflow: hidden;

    margin-bottom: 16px;
    padding: 28px 30px;

    background:
        radial-gradient(circle at 15% 15%, rgba(139, 195, 74, .08), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(205, 174, 87, .10), transparent 34%),
        linear-gradient(135deg, #132219 0%, #1b3023 55%, #122019 100%);

    border: 1px solid #425d49;
    border-radius: 10px;

    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.stoned-bottom-banner:before {
    content: "";
    position: absolute;
    top: -55px;
    right: -55px;

    width: 200px;
    height: 200px;

    border-radius: 50%;
    border: 28px solid rgba(225, 199, 111, .05);
}

.stoned-bottom-banner h2 {
    margin: 4px 0 10px !important;
    padding: 0 !important;

    color: #8cff39 !important;
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 28px;
}

.stoned-bottom-banner p {
    max-width: 820px;

    margin: 0;

    color: #c8d4cb;
    line-height: 1.6;
}


/* ---------- Feature cards ---------- */

.stoned-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 16px;
}

.stoned-bottom-card {
    padding: 18px;

    background:
        linear-gradient(145deg, #14241a, #101b14);

    border: 1px solid #36503e;
    border-radius: 8px;

    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.stoned-bottom-card strong {
    display: block;
    margin-bottom: 8px;

    color: #e0c66e;
    font-size: 16px;
}

.stoned-bottom-card p {
    margin: 0;

    color: #b7c5bb;
    line-height: 1.6;
}


/* ---------- Bottom ribbon ---------- */

.stoned-bottom-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding: 14px 16px;

    background:
        linear-gradient(135deg, #18291e, #21372a);

    border: 1px solid #425e49;
    border-left: 4px solid #a98e43;
    border-radius: 8px;
}

.stoned-bottom-ribbon span {
    display: inline-block;

    padding: 6px 10px;

    color: #d8e3db;
    background: rgba(0,0,0,.16);

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 800px) {

    .stoned-bottom-grid {
        grid-template-columns: 1fr;
    }

    .stoned-bottom-banner {
        padding: 24px 20px;
    }

    .stoned-bottom-banner h2 {
        font-size: 24px;
    }
}

/* 2STONED-HOMEBOTTOM-END */


/* 2STONED-BLUE-PURGE-START */

/* ==========================================================
   2StonedRO
   Remove remaining stock FluxCP blue styling
   ========================================================== */


/* ---------- MAIN PAGE TITLES ---------- */

#content h2 {
    margin: 12px 0 12px !important;
    padding: 10px 14px !important;

    color: #8cff39 !important;

    background: #101a14 !important;
    background-image: none !important;

    border: 1px solid #324b39 !important;
    border-left: 4px solid #6fbe48 !important;
    border-radius: 5px !important;

    box-shadow: none !important;
    text-shadow: none !important;
}


/* ---------- SECTION HEADINGS ---------- */

#content h3 {
    margin-top: 16px !important;
    padding: 5px 0 !important;

    color: #d8bd62 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 1px solid #36503d !important;

    box-shadow: none !important;
    text-shadow: none !important;
}


/* ---------- SMALLER HEADINGS ---------- */

#content h4,
#content h5,
#content h6 {
    color: #d9c473 !important;

    background: transparent !important;
    background-image: none !important;

    border-color: #35503d !important;
}


/* ---------- REMOVE STOCK BLUE BACKGROUND IMAGES ---------- */

#content div,
#content table,
#content td,
#content th,
#content form,
#content p {
    background-image: none;
}


/* ---------- BREADCRUMB / PAGE MENU ---------- */

#submenu,
#pagemenu {
    color: #b7c5bb !important;

    background: #15241a !important;
    background-image: none !important;

    border: 1px solid #395440 !important;
    border-radius: 5px !important;
}

#submenu a,
#pagemenu a {
    color: #8fd26e !important;
}

#submenu a:hover,
#pagemenu a:hover {
    color: #e1c66d !important;
}


/* ---------- GENERIC TABLES ---------- */

#content table.horizontal-table,
#content table.vertical-table {
    background: #121f17 !important;
    background-image: none !important;

    border-color: #425d49 !important;
}

#content table.horizontal-table th,
#content table.vertical-table th {
    color: #e1c66d !important;

    background: #203729 !important;
    background-image: none !important;

    border-color: #496551 !important;

    text-shadow: none !important;
}

#content table.horizontal-table td,
#content table.vertical-table td {
    color: #d9e3dc !important;

    background: #142119 !important;
    background-image: none !important;

    border-color: #3a5542 !important;
}

#content table.horizontal-table tr:nth-child(even) td,
#content table.vertical-table tr:nth-child(even) td {
    background: #17271d !important;
}

#content table.horizontal-table tr:hover td,
#content table.vertical-table tr:hover td {
    background: #21382a !important;
}


/* ---------- TOP RANKED ROWS ---------- */

#content tr.top-ranked td,
#content .top-ranked td {
    color: #f2dda0 !important;

    background: #304125 !important;
    background-image: none !important;
}

#content tr.top-ranked a,
#content .top-ranked a {
    color: #b7ed87 !important;
}


/* ---------- FILTER / SEARCH AREAS ---------- */

#content .search-form,
#content .search-form2,
#content .generic-form,
#content .generic-form-div {
    color: #d7e2da !important;

    background: #142119 !important;
    background-image: none !important;

    border-color: #3a5542 !important;
}


/* ---------- INFO / NOTICE PANELS ---------- */

#content .notice,
#content .message,
#content .info-text,
#content .note {
    background-image: none !important;
}


/* ---------- PAGINATION ---------- */

#content .pages {
    color: #91a398 !important;

    background: transparent !important;
    background-image: none !important;

    border-color: #38513f !important;
}

#content .pages a {
    color: #92d472 !important;
}

#content .current-page {
    color: #e2c76d !important;
}


/* ---------- SORTABLE HEADERS ---------- */

#content .sortable {
    color: #d8c16a !important;
}

#content .sortable:hover {
    color: #8cff39 !important;
}


/* ---------- CHARACTER / RANKING LINKS ---------- */

#content .horizontal-table a {
    color: #9be177 !important;
}

#content .horizontal-table a:hover {
    color: #e2c76d !important;
}


/* ---------- REMOVE OLD BLUE BORDER ACCENTS ---------- */

#content * {
    border-image: none !important;
}


/* ---------- SPECIAL CUSTOM HEADERS KEEP THEIR OWN STYLE ---------- */

.stoned-hero h1,
.stoned-info-header h2,
.stoned-online-header h2,
.stoned-status-header h2,
.stoned-bottom-banner h2 {
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;

    padding-left: 0 !important;
}


/* 2STONED-BLUE-PURGE-END */


/* 2STONED-RANKING-START */

/* ==========================================================
   2StonedRO Character Rankings
   ========================================================== */

.stoned-ranking-page {
    color: #d9e4dc;
}


/* ---------- Header ---------- */

.stoned-ranking-header {
    margin-bottom: 15px;
    padding: 25px 28px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(210,180,88,.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #17291e,
            #213a2a
        );

    border: 1px solid #45604d;
    border-radius: 9px;
}

.stoned-ranking-header h2 {
    margin: 3px 0 8px !important;
    padding: 0 !important;

    color: #8cff39 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 26px;
}

.stoned-ranking-header p {
    margin: 0;

    color: #c7d3ca;
}


/* ---------- Filter ---------- */

.stoned-ranking-filter {
    margin-bottom: 13px;
}

.stoned-ranking-filter .search-form2 {
    padding: 11px 13px !important;

    background: #142119 !important;
    border: 1px solid #385440 !important;
    border-radius: 7px !important;
}


/* ---------- Table ---------- */

.stoned-ranking-table-wrap {
    overflow-x: auto;
}

.stoned-ranking-table {
    width: 100%;
    min-width: 850px;

    border-radius: 8px !important;
    overflow: hidden;
}

.stoned-ranking-table thead th {
    padding: 10px 11px !important;

    color: #e2c76d !important;
    background: #203729 !important;

    border-color: #48634f !important;

    text-align: left;
}

.stoned-ranking-table tbody td {
    padding: 8px 11px !important;

    color: #d8e3db !important;
    background: #142119 !important;

    border-color: #37513f !important;
}

.stoned-ranking-table tbody tr:nth-child(even) td {
    background: #17271d !important;
}

.stoned-ranking-table tbody tr:hover td {
    background: #21382a !important;
}


/* ---------- Rank ---------- */

.stoned-rank-number {
    width: 45px;

    color: #d9c16b !important;
    font-weight: 700;

    text-align: center;
}

.stoned-rank-character a {
    color: #9de377 !important;
    font-weight: 700;
}

.stoned-rank-character a:hover {
    color: #e2c76d !important;
}

.stoned-rank-level {
    color: #b7ee87 !important;
    font-weight: 700;
}


/* ---------- #1 ---------- */

.stoned-ranking-table tbody tr.stoned-rank-first td {
    background:
        linear-gradient(
            90deg,
            #334426,
            #26371f
        ) !important;

    color: #f2e2a4 !important;

    border-top-color: #8e7a3a !important;
    border-bottom-color: #8e7a3a !important;
}

.stoned-ranking-table tbody tr.stoned-rank-first
.stoned-rank-number {
    color: #ffd96b !important;

    font-size: 15px;
}


/* ---------- Guild ---------- */

.stoned-rank-guild {
    white-space: nowrap;
}

.stoned-rank-emblem {
    width: 20px;
    height: 20px;

    margin-right: 6px;

    vertical-align: middle;
}


/* ---------- Empty ---------- */

.stoned-ranking-empty {
    padding: 22px;

    background: #142119;

    border: 1px solid #395340;
    border-radius: 8px;

    text-align: center;
}

.stoned-ranking-empty strong {
    display: block;

    margin-bottom: 4px;

    color: #e0c66e;
}

.stoned-ranking-empty span {
    color: #9bada1;
}

/* 2STONED-RANKING-END */


/* 2STONED-RANKING-SUITE-START */

/* ==========================================================
   2StonedRO - Ranking Suite
   Death / Alchemist / Blacksmith / Guild / Homun / MVP / Zeny
   ========================================================== */


/* ---------- Page ---------- */

.stoned-ranking-generic {
    color: #d9e4dc;
}


/* ---------- Branded Header ---------- */

.stoned-ranking-generic-header {
    margin-bottom: 10px !important;
    padding: 24px 28px !important;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(210,180,88,.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #17291e,
            #213a2a
        ) !important;

    border: 1px solid #45604d !important;
    border-radius: 9px !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.12) !important;
}

.stoned-ranking-generic-header h2 {
    margin: 3px 0 0 !important;
    padding: 0 !important;

    color: #8cff39 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 26px !important;
}


/* ---------- Stock ranking subtitle ---------- */

.stoned-ranking-generic > h3 {
    margin: 0 0 13px !important;
    padding: 9px 12px !important;

    color: #d9bf68 !important;

    background: #15251b !important;
    background-image: none !important;

    border: 1px solid #36513e !important;
    border-left: 4px solid #a88d43 !important;
    border-radius: 5px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-transform: none !important;
}


/* ---------- Filters ---------- */

.stoned-ranking-generic .search-form2,
.stoned-ranking-generic .search-form {
    margin-bottom: 13px !important;
    padding: 11px 13px !important;

    color: #d8e3db !important;
    background: #142119 !important;

    border: 1px solid #395440 !important;
    border-radius: 7px !important;
}

.stoned-ranking-generic .search-form2 label,
.stoned-ranking-generic .search-form label {
    color: #c8d5cc !important;
}


/* ---------- Tables ---------- */

.stoned-ranking-generic .horizontal-table {
    width: 100% !important;

    background: #121f17 !important;
    background-image: none !important;

    border: 1px solid #405c47 !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

.stoned-ranking-generic .horizontal-table th {
    padding: 9px 10px !important;

    color: #e1c66d !important;
    background: #203729 !important;
    background-image: none !important;

    border-color: #496551 !important;

    font-weight: 700 !important;
    text-shadow: none !important;
}

.stoned-ranking-generic .horizontal-table td {
    padding: 8px 10px !important;

    color: #d8e3db !important;

    background: #142119 !important;
    background-image: none !important;

    border-color: #37513f !important;
}

.stoned-ranking-generic
.horizontal-table
tr:nth-child(even)
td {
    background: #17271d !important;
}

.stoned-ranking-generic
.horizontal-table
tr:hover
td {
    background: #21382a !important;
}


/* ---------- #1 ranked entry ---------- */

.stoned-ranking-generic
.horizontal-table
tr.top-ranked
td {
    color: #f1e1a0 !important;

    background:
        linear-gradient(
            90deg,
            #334426,
            #26371f
        ) !important;

    border-top-color: #88763b !important;
    border-bottom-color: #88763b !important;
}

.stoned-ranking-generic
.horizontal-table
tr.top-ranked
a {
    color: #b9ed87 !important;
    font-weight: 700 !important;
}


/* ---------- Player / Guild links ---------- */

.stoned-ranking-generic
.horizontal-table
a {
    color: #9de177 !important;
}

.stoned-ranking-generic
.horizontal-table
a:hover {
    color: #e1c66d !important;
}


/* ---------- Empty rows ---------- */

.stoned-ranking-generic
.horizontal-table
tr.empty-row
td {
    opacity: .35;
    background: #101a14 !important;
}


/* ---------- Emblems / images ---------- */

.stoned-ranking-generic
.horizontal-table
img {
    vertical-align: middle;
}


/* ---------- Numbers ---------- */

.stoned-ranking-generic
.horizontal-table
td:first-child {
    color: #d9c16b !important;
    font-weight: 700 !important;
}


/* ---------- No results ---------- */

.stoned-ranking-generic > p {
    color: #b7c5bb;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 850px) {

    .stoned-ranking-generic {
        overflow-x: auto;
    }

    .stoned-ranking-generic .horizontal-table {
        min-width: 720px;
    }

}

/* 2STONED-RANKING-SUITE-END */


/* 2STONED-PREFS-START */

.stoned-prefs-header {
    margin-bottom: 15px;
    padding: 25px 28px;

    background:
        radial-gradient(circle at 90% 10%,
            rgba(205,175,85,.12),
            transparent 35%),
        linear-gradient(135deg, #17291e, #213a2a);

    border: 1px solid #45604d;
    border-radius: 9px;
}

.stoned-prefs-header h2 {
    margin: 3px 0 8px !important;
    padding: 0 !important;

    color: #8cff39 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 26px;
}

.stoned-prefs-header p {
    margin: 0;
    color: #c8d4cb;
}

.stoned-prefs-header p strong {
    color: #e0c66e;
}

.stoned-prefs-form {
    padding: 0 !important;

    background: #111d16 !important;

    border: 1px solid #405b47 !important;
    border-radius: 8px !important;

    overflow: hidden;
}

.stoned-pref-option {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 17px 19px;

    background: #142119;

    border-bottom: 1px solid #35503e;
}

.stoned-pref-option:nth-child(even) {
    background: #17271d;
}

.stoned-pref-option strong {
    display: block;

    margin-bottom: 4px;

    color: #9be177;
    font-size: 14px;
}

.stoned-pref-option span {
    display: block;

    color: #aab9af;
    font-size: 11px;
}

.stoned-pref-option input[type=checkbox] {
    width: 18px;
    height: 18px;
}

.stoned-pref-actions {
    padding: 14px 19px;

    background: #101b14;
}

.stoned-prefs-empty {
    padding: 20px;

    color: #c8d4cb;
    background: #142119;

    border: 1px solid #395340;
    border-radius: 7px;
}

/* 2STONED-PREFS-END */


/* 2STONED-ACCOUNT-CENTER-START */

/* ==========================================================
   2StonedRO Account Center
   Login / Registration / My Account
   ========================================================== */

.stoned-account-page {
    color: #d9e4dc;
}


/* ---------- Main Header ---------- */

.stoned-account-hero {
    margin-bottom: 16px;
    padding: 26px 29px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(204,178,91,.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #17291e,
            #213a2a
        );

    border: 1px solid #45604d;
    border-radius: 10px;

    box-shadow:
        0 8px 22px rgba(0,0,0,.14);
}

.stoned-account-hero h2 {
    margin: 3px 0 8px !important;
    padding: 0 !important;

    color: #8cff39 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 27px !important;
}

.stoned-account-hero p {
    margin: 0;

    color: #c8d4cb;

    line-height: 1.55;
}


/* ==========================================================
   Login / Registration
   ========================================================== */

.stoned-account-form {
    padding: 0 !important;

    color: #d8e3db !important;
    background: #111d16 !important;

    border: 1px solid #405b47 !important;
    border-radius: 9px !important;

    overflow: hidden;

    box-shadow:
        0 7px 20px rgba(0,0,0,.12);
}

.stoned-login-form {
    max-width: 720px;
}

.stoned-create-form {
    max-width: 900px;
}


/* ---------- Form table ---------- */

.stoned-account-form .generic-form-table {
    width: 100% !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
}

.stoned-account-form .generic-form-table th {
    width: 32%;

    padding: 13px 16px !important;

    color: #d9c36e !important;
    background: #17271d !important;

    border: 0 !important;
    border-bottom: 1px solid #314a39 !important;

    text-align: right;
    vertical-align: middle;
}

.stoned-account-form .generic-form-table td {
    padding: 13px 16px !important;

    color: #d8e3db !important;
    background: #142119 !important;

    border: 0 !important;
    border-bottom: 1px solid #314a39 !important;

    vertical-align: middle;
}

.stoned-account-form
.generic-form-table
tr:nth-child(even)
th {
    background: #192b20 !important;
}

.stoned-account-form
.generic-form-table
tr:nth-child(even)
td {
    background: #17271d !important;
}


/* ---------- Inputs ---------- */

.stoned-account-form
input[type=text],

.stoned-account-form
input[type=password],

.stoned-account-form
input[type=email],

.stoned-account-form
select {
    width: 100%;
    max-width: 420px;

    box-sizing: border-box;

    padding: 9px 10px !important;

    color: #eef5f0 !important;
    background: #0c1710 !important;

    border: 1px solid #3e5a46 !important;
    border-radius: 5px !important;
}

.stoned-account-form
input[type=text]:focus,

.stoned-account-form
input[type=password]:focus,

.stoned-account-form
input[type=email]:focus,

.stoned-account-form
select:focus {
    background: #111e16 !important;

    border-color: #83a55f !important;

    box-shadow:
        0 0 0 2px rgba(140,204,75,.10) !important;
}


/* ---------- Radio / checkbox ---------- */

.stoned-account-form
input[type=radio],

.stoned-account-form
input[type=checkbox] {
    width: auto !important;

    margin-right: 4px;
}


/* ---------- Buttons ---------- */

.stoned-account-form
input[type=submit],

.stoned-account-form
input[type=button],

.stoned-account-form
button[type=submit] {
    padding: 9px 17px !important;

    color: #fff8db !important;
    background: #4a704f !important;

    border: 1px solid #69866c !important;
    border-radius: 5px !important;

    font-weight: 700 !important;

    cursor: pointer;
}

.stoned-account-form
input[type=submit]:hover,

.stoned-account-form
input[type=button]:hover,

.stoned-account-form
button[type=submit]:hover {
    color: #ffffff !important;
    background: #5d855f !important;
}


/* ---------- Security Code ---------- */

.stoned-account-form .security-code {
    display: inline-block;

    margin-bottom: 7px;
    padding: 5px;

    background: #0b150f;

    border: 1px solid #395440;
    border-radius: 5px;
}

.stoned-account-form .security-code img {
    display: block;
}


/* ---------- Registration notes ---------- */

.stoned-create-page > p {
    margin: 0 0 8px;
    padding: 9px 12px;

    color: #b9c7bd;

    background: #16251b;

    border: 1px solid #334e3b;
    border-left: 3px solid #9d8540;
    border-radius: 5px;
}

.stoned-create-page > p strong {
    color: #dfc66f;
}

.stoned-create-page > p a {
    color: #9ade75 !important;
}


/* ---------- Login helper text ---------- */

.stoned-login-page > p {
    padding: 10px 13px;

    color: #b9c7bd;

    background: #16251b;

    border: 1px solid #334e3b;
    border-radius: 5px;
}


/* ---------- Errors ---------- */

.stoned-account-page p.red {
    padding: 10px 13px !important;

    color: #ffaaaa !important;
    background: #331d1d !important;

    border: 1px solid #704040 !important;
    border-left: 4px solid #df6767 !important;
    border-radius: 6px !important;
}


/* ==========================================================
   My Account
   ========================================================== */

.stoned-account-view {
    overflow-x: auto;
}


/* ---------- Account information ---------- */

.stoned-account-view .vertical-table {
    width: 100% !important;

    margin-bottom: 17px !important;

    background: #121f17 !important;

    border: 1px solid #405b47 !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

.stoned-account-view .vertical-table th {
    padding: 9px 11px !important;

    color: #d9c36e !important;
    background: #203729 !important;

    border-color: #48634f !important;
}

.stoned-account-view .vertical-table td {
    padding: 9px 11px !important;

    color: #d8e3db !important;
    background: #142119 !important;

    border-color: #37513f !important;
}

.stoned-account-view
.vertical-table
tr:nth-child(even)
td {
    background: #17271d !important;
}

.stoned-account-view
.vertical-table
tr:hover
td {
    background: #203528 !important;
}


/* ---------- Section headings ---------- */

.stoned-account-view > h3 {
    margin: 20px 0 10px !important;
    padding: 10px 13px !important;

    color: #dfc66e !important;

    background: #17271d !important;
    background-image: none !important;

    border: 1px solid #395440 !important;
    border-left: 4px solid #a88d43 !important;
    border-radius: 5px !important;

    font-size: 15px !important;
}


/* ---------- Character status ---------- */

.stoned-account-view .online {
    color: #8cff39 !important;

    font-weight: 700;
}

.stoned-account-view .offline {
    color: #839389 !important;
}


/* ---------- Action links ---------- */

.stoned-account-view .block-link {
    display: inline-block;

    padding: 4px 7px;

    color: #9dde78 !important;
    background: #18291e;

    border: 1px solid #395440;
    border-radius: 4px;

    text-decoration: none;
}

.stoned-account-view .block-link:hover {
    color: #efd276 !important;
    background: #253f2e;
}


/* ---------- Storage item names ---------- */

.stoned-account-view .item_name {
    color: #d9e5dc;
}

.stoned-account-view .normalslotted {
    color: #d9e5dc;
}


/* ---------- Zeny ---------- */

.stoned-account-view > p strong {
    color: #e1c76e;
}


/* ---------- Ban / admin controls ---------- */

.stoned-account-view textarea.reason {
    width: 100%;
    max-width: 600px;

    box-sizing: border-box;

    color: #eef5f0 !important;
    background: #0c1710 !important;

    border: 1px solid #3e5a46 !important;
    border-radius: 5px !important;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 760px) {

    .stoned-account-hero {
        padding: 22px 20px;
    }

    .stoned-account-form
    .generic-form-table th,

    .stoned-account-form
    .generic-form-table td {
        padding: 10px !important;
    }

}

/* 2STONED-ACCOUNT-CENTER-END */


/* 2STONED-ACCOUNT-FORM-BLUE-FIX-START */

/* Kill remaining FluxCP navy registration/login table colors */

.stoned-account-form table,
.stoned-account-form .generic-form-table {
    background: #101b14 !important;
    background-image: none !important;

    border-color: #405b47 !important;
}

.stoned-account-form .generic-form-table tr,
.stoned-account-form .generic-form-table tbody,
.stoned-account-form .generic-form-table th,
.stoned-account-form .generic-form-table td {
    background-image: none !important;
}

.stoned-account-form .generic-form-table th {
    color: #9cff70 !important;
    background: #182a1f !important;

    border-color: #45604d !important;
}

.stoned-account-form .generic-form-table td {
    color: #d9e4dc !important;
    background: #121f17 !important;

    border-color: #405b47 !important;
}

.stoned-account-form .generic-form-table tr:nth-child(even) th {
    background: #1b3023 !important;
}

.stoned-account-form .generic-form-table tr:nth-child(even) td {
    background: #15251b !important;
}

/* Inputs */

.stoned-account-form input[type="text"],
.stoned-account-form input[type="password"],
.stoned-account-form input[type="email"],
.stoned-account-form select {
    color: #f0f5f1 !important;
    background: #0d1811 !important;

    border: 1px solid #4c674f !important;
}

.stoned-account-form input[type="text"]:focus,
.stoned-account-form input[type="password"]:focus,
.stoned-account-form input[type="email"]:focus,
.stoned-account-form select:focus {
    background: #122019 !important;

    border-color: #88b560 !important;

    box-shadow:
        0 0 0 2px rgba(140,255,57,.10) !important;
}

/* Registration submit row */

.stoned-account-form .generic-form-table tr:last-child td {
    background: #101b14 !important;
}

.stoned-account-form button[type="submit"],
.stoned-account-form input[type="submit"] {
    color: #fff8dd !important;

    background:
        linear-gradient(
            180deg,
            #5f855b,
            #46694b
        ) !important;

    border: 1px solid #79936c !important;
}

.stoned-account-form button[type="submit"]:hover,
.stoned-account-form input[type="submit"]:hover {
    background:
        linear-gradient(
            180deg,
            #72a066,
            #557b54
        ) !important;
}

/* 2STONED-ACCOUNT-FORM-BLUE-FIX-END */


/* 2STONED-ACCOUNT-FINAL-GREEN-FIX-START */

/* Stronger forest-green override for FluxCP account forms */

#content .stoned-account-form table.generic-form-table,
#content .stoned-account-form table.generic-form-table tbody,
#content .stoned-account-form table.generic-form-table tr {
    background: #102017 !important;
    background-color: #102017 !important;
    background-image: none !important;
}

#content .stoned-account-form table.generic-form-table th {
    color: #9cff70 !important;

    background: #1b3525 !important;
    background-color: #1b3525 !important;
    background-image: none !important;

    border-color: #4a684f !important;
}

#content .stoned-account-form table.generic-form-table td {
    color: #e0e9e2 !important;

    background: #13261b !important;
    background-color: #13261b !important;
    background-image: none !important;

    border-color: #405d48 !important;
}

#content .stoned-account-form table.generic-form-table tr:nth-child(even) th {
    background: #203c2a !important;
    background-color: #203c2a !important;
}

#content .stoned-account-form table.generic-form-table tr:nth-child(even) td {
    background: #172c20 !important;
    background-color: #172c20 !important;
}

/* Inputs */

#content .stoned-account-form input[type="text"],
#content .stoned-account-form input[type="password"],
#content .stoned-account-form input[type="email"],
#content .stoned-account-form select {
    color: #f3f7f4 !important;

    background: #0d1d13 !important;
    background-color: #0d1d13 !important;

    border: 1px solid #527058 !important;
}

/* Submit section */

#content .stoned-account-form table.generic-form-table tr:last-child td {
    background: #102017 !important;
    background-color: #102017 !important;
}

/* 2STONED-ACCOUNT-FINAL-GREEN-FIX-END */


/* 2STONED-INPUT-FINAL-FIX-START */

/* Dark forest inputs across account pages */

#content .stoned-account-page input[type="text"],
#content .stoned-account-page input[type="password"],
#content .stoned-account-page input[type="email"],
#content .stoned-account-page input[type="number"],
#content .stoned-account-page select,
#content .stoned-account-page textarea {
    color: #f2f6f3 !important;

    background: #0c1b12 !important;
    background-color: #0c1b12 !important;
    background-image: none !important;

    border: 1px solid #526f57 !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.25) !important;
}

#content .stoned-account-page input[type="text"]:focus,
#content .stoned-account-page input[type="password"]:focus,
#content .stoned-account-page input[type="email"]:focus,
#content .stoned-account-page input[type="number"]:focus,
#content .stoned-account-page select:focus,
#content .stoned-account-page textarea:focus {
    background: #11251a !important;
    background-color: #11251a !important;

    border-color: #8db86b !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.25),
        0 0 0 2px rgba(140,255,57,.10) !important;
}

/* 2STONED-INPUT-FINAL-FIX-END */


/* 2STONED-AUTOFILL-FIX-START */

/* Keep Chrome / Edge / Opera autofilled fields in the 2StonedRO theme */

#content .stoned-account-page input:-webkit-autofill,
#content .stoned-account-page input:-webkit-autofill:hover,
#content .stoned-account-page input:-webkit-autofill:focus,
#content .stoned-account-page input:-webkit-autofill:active {
    -webkit-text-fill-color: #f2f6f3 !important;

    -webkit-box-shadow:
        0 0 0 1000px #0c1b12 inset !important;

    box-shadow:
        0 0 0 1000px #0c1b12 inset !important;

    caret-color: #f2f6f3 !important;

    border: 1px solid #526f57 !important;

    transition:
        background-color 9999s ease-out 0s !important;
}

/* Focused autofill field */

#content .stoned-account-page input:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 1000px #11251a inset,
        0 0 0 2px rgba(140,255,57,.10) !important;

    box-shadow:
        0 0 0 1000px #11251a inset,
        0 0 0 2px rgba(140,255,57,.10) !important;

    border-color: #8db86b !important;
}

/* 2STONED-AUTOFILL-FIX-END */


/* 2STONED-SECURITY-PAGES-START */

/* ==========================================================
   2StonedRO Account Security / Contact Pages
   ========================================================== */

.stoned-security-page {
    color: #d9e4dc;
}


/* ---------- Informational text above form ---------- */

.stoned-security-page > p {
    margin: 0 0 9px;
    padding: 10px 13px;

    color: #b9c7bd;

    background: #16251b;

    border: 1px solid #344f3c;
    border-left: 3px solid #9f8742;
    border-radius: 5px;
}


/* ---------- Form ---------- */

.stoned-security-form {
    margin-top: 14px;

    max-width: 900px;
}


/* ---------- Notes column ---------- */

.stoned-security-form .stoned-security-note {
    width: 32%;

    padding: 16px !important;

    color: #b8c7bd !important;

    background:
        linear-gradient(
            135deg,
            #1a3022,
            #15261b
        ) !important;

    border-left:
        3px solid #a68c43 !important;

    vertical-align: top !important;
}

.stoned-security-form .stoned-security-note p {
    margin: 0 0 10px;

    color: #b8c7bd;

    line-height: 1.5;
}

.stoned-security-form .stoned-security-note p:last-child {
    margin-bottom: 0;
}

.stoned-security-form
.stoned-security-note
.important {
    color: #e2c86f !important;
}


/* ---------- Inputs ---------- */

.stoned-security-form input[type="text"],
.stoned-security-form input[type="password"],
.stoned-security-form input[type="email"] {
    width: 100%;
    max-width: 420px;

    box-sizing: border-box;

    color: #f2f6f3 !important;

    background: #0c1b12 !important;
    background-color: #0c1b12 !important;

    border: 1px solid #526f57 !important;
}


/* ---------- Buttons ---------- */

.stoned-security-form input[type="submit"] {
    min-width: 145px;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 760px) {

    .stoned-security-form
    .stoned-security-note {
        width: auto;
    }

}

/* 2STONED-SECURITY-PAGES-END */


/* 2STONED-RECOVERY-START */

/* ==========================================================
   2StonedRO Account Recovery
   ========================================================== */

.stoned-recovery-page {
    color: #d9e4dc;
}


/* ---------- Intro information ---------- */

.stoned-recovery-info {
    margin-bottom: 14px;
    padding: 13px 15px;

    color: #bccac0;

    background: #16271c;

    border: 1px solid #395440;
    border-left: 4px solid #a88d43;
    border-radius: 6px;
}

.stoned-recovery-info p {
    margin: 0 0 7px;

    line-height: 1.55;
}

.stoned-recovery-info p:last-child {
    margin-bottom: 0;
}


/* ---------- Form ---------- */

.stoned-recovery-form {
    max-width: 960px;
}


/* Strong table override */

#content
.stoned-recovery-form
.generic-form-table th {
    color: #9cff70 !important;

    background: #1b3525 !important;
    background-image: none !important;

    border-color: #496650 !important;
}

#content
.stoned-recovery-form
.generic-form-table td {
    color: #dce6df !important;

    background: #13261b !important;
    background-image: none !important;

    border-color: #405d48 !important;
}


/* ---------- Explanation column ---------- */

#content
.stoned-recovery-form
.stoned-recovery-note {
    width: 40%;

    color: #b6c5ba !important;

    background:
        linear-gradient(
            135deg,
            #172b1e,
            #122218
        ) !important;

    border-left:
        3px solid #806f38 !important;
}

.stoned-recovery-note p {
    margin: 0;

    color: #b6c5ba;

    line-height: 1.5;
}


/* ---------- Inputs ---------- */

#content
.stoned-recovery-form
input[type="text"],

#content
.stoned-recovery-form
input[type="password"],

#content
.stoned-recovery-form
select {
    width: 100%;
    max-width: 380px;

    box-sizing: border-box;

    color: #f2f6f3 !important;

    background: #0c1b12 !important;
    background-color: #0c1b12 !important;

    border: 1px solid #526f57 !important;
}


/* ---------- Autofill ---------- */

#content
.stoned-recovery-form
input:-webkit-autofill,

#content
.stoned-recovery-form
input:-webkit-autofill:hover,

#content
.stoned-recovery-form
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #f2f6f3 !important;

    -webkit-box-shadow:
        0 0 0 1000px #0c1b12 inset !important;

    box-shadow:
        0 0 0 1000px #0c1b12 inset !important;

    border:
        1px solid #526f57 !important;
}


/* ---------- Submit ---------- */

#content
.stoned-recovery-form
.stoned-recovery-submit td {
    background: #101d15 !important;
}

.stoned-recovery-submit
input[type="submit"] {
    min-width: 190px;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 760px) {

    #content
    .stoned-recovery-form
    .stoned-recovery-note {
        width: auto;
    }

}

/* 2STONED-RECOVERY-END */


/* 2STONED-DOWNLOADS-START */

.stoned-download-page {
    color: #d9e4dc;
}

/* HERO */

.stoned-download-hero {
    position: relative;
    overflow: hidden;
    padding: 32px 34px;
    margin-bottom: 15px;

    background:
        radial-gradient(circle at 86% 18%, rgba(207,181,91,.17), transparent 30%),
        radial-gradient(circle at 13% 85%, rgba(128,190,91,.07), transparent 28%),
        linear-gradient(135deg, #17291e 0%, #27412f 60%, #17271d 100%);

    border: 1px solid #4b6651;
    border-radius: 11px;
    box-shadow: 0 10px 27px rgba(0,0,0,.18);
}

.stoned-download-hero:after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -125px;
    width: 240px;
    height: 240px;
    border: 34px solid rgba(228,200,111,.05);
    border-radius: 50%;
}

.stoned-download-kicker {
    position: relative;
    z-index: 1;
    margin-bottom: 5px;
    color: #dfc36a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.stoned-download-hero h2 {
    position: relative;
    z-index: 1;
    margin: 2px 0 10px !important;
    padding: 0 !important;
    color: #8cff39 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 31px !important;
}

.stoned-download-hero p {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 0 20px;
    color: #cbd7cf;
    line-height: 1.6;
}

/* DOWNLOAD BUTTON */

.stoned-download-main-button {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 12px 21px;
    color: #fff9de !important;
    background: linear-gradient(180deg, #b29342, #8c7130);
    border: 1px solid #d0b05a;
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.stoned-download-main-button:hover {
    color: #fff !important;
    background: linear-gradient(180deg, #c4a44c, #9d8136);
}

.stoned-download-subtext {
    position: relative;
    z-index: 1;
    margin-top: 9px;
    color: #91a397;
    font-size: 10px;
}

/* SERVER STATS */

.stoned-download-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 15px;
}

.stoned-download-stat {
    padding: 13px 11px;
    background: linear-gradient(145deg, #17291e, #122018);
    border: 1px solid #395440;
    border-radius: 7px;
    text-align: center;
}

.stoned-download-stat strong {
    display: block;
    margin-bottom: 2px;
    color: #e0c66e;
    font-size: 18px;
}

.stoned-download-stat span {
    display: block;
    color: #aab9af;
    font-size: 10px;
}

/* INSTALL CARDS */

.stoned-download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.stoned-download-card {
    position: relative;
    min-height: 145px;
    padding: 18px 18px 18px 62px;
    background: linear-gradient(145deg, #14241a, #101b14);
    border: 1px solid #385440;
    border-radius: 8px;
    box-shadow: 0 6px 17px rgba(0,0,0,.12);
}

.stoned-download-card-number {
    position: absolute;
    top: 18px;
    left: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #e0c66e;
    background: #203729;
    border: 1px solid #536d58;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.stoned-download-card h3 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #9be177 !important;
    background: transparent !important;
    border: 0 !important;
}

.stoned-download-card p {
    margin: 0 0 8px;
    color: #afbeb4;
    line-height: 1.55;
}

.stoned-download-card p strong {
    color: #e1c76e;
}

.stoned-download-card-link {
    color: #dfc36d !important;
    font-weight: 700;
    text-decoration: none !important;
}

.stoned-download-card-link:hover {
    color: #8cff39 !important;
}

/* PATCHER */

.stoned-download-patcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 14px;
    padding: 20px 23px;
    background: #18291e;
    border: 1px solid #45604d;
    border-left: 4px solid #aa8f43;
    border-radius: 8px;
}

.stoned-download-small-title {
    margin-bottom: 3px;
    color: #c3a64e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.stoned-download-patcher h3 {
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #e0c66e !important;
    background: transparent !important;
    border: 0 !important;
}

.stoned-download-patcher p {
    margin: 0;
    color: #b4c3b9;
    line-height: 1.55;
}

.stoned-download-patcher-badge {
    min-width: 75px;
    padding: 10px;
    color: #8cff39;
    background: rgba(0,0,0,.18);
    border: 1px solid #46614c;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}

/* HELP */

.stoned-download-help {
    padding: 14px 17px;
    background: #121f17;
    border: 1px solid #354f3c;
    border-radius: 7px;
}

.stoned-download-help strong {
    display: block;
    margin-bottom: 3px;
    color: #9be177;
}

.stoned-download-help span {
    display: block;
    color: #9fafa4;
    line-height: 1.5;
}

@media screen and (max-width: 850px) {
    .stoned-download-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stoned-download-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .stoned-download-stats {
        grid-template-columns: 1fr;
    }

    .stoned-download-patcher {
        display: block;
    }

    .stoned-download-patcher-badge {
        margin-top: 13px;
    }
}

/* 2STONED-DOWNLOADS-END */


/* =========================================================
   2STONEDRO ARTWORK THEME
   Background + Header Banner
   ========================================================= */

/* -----------------------------------------
   FULL WEBSITE BACKGROUND
   ----------------------------------------- */

html {
    min-height: 100%;
    background: #050a07 !important;
}

body {
    min-height: 100%;
    background:
        linear-gradient(
            rgba(2, 8, 5, 0.20),
            rgba(2, 8, 5, 0.38)
        ),
        url("../img/2stoned-bg.png")
        center top / cover
        no-repeat fixed !important;
}

/*
   Keep FluxCP's outer shell transparent enough
   for the artwork to show around the website.
*/
#wrapper,
#container,
.container,
.wrapper {
    background-color: transparent !important;
}


/* -----------------------------------------
   MAIN CONTENT AREA
   ----------------------------------------- */

/*
   Slight transparency allows the forest artwork
   to show through without hurting readability.
*/
#content,
.content,
#main,
.main {
    background-color: rgba(8, 20, 13, 0.91) !important;
}


/* -----------------------------------------
   TOP 2STONEDRO BANNER
   ----------------------------------------- */

#header {
    position: relative;
    min-height: 300px !important;

    background:
        url("../img/2stoned-banner.png")
        center center / cover
        no-repeat !important;

    border: 1px solid #395440;
    border-bottom: 2px solid #9b8338;

    box-shadow:
        0 8px 24px rgba(0,0,0,.55),
        inset 0 -30px 50px rgba(0,0,0,.30);

    overflow: hidden;
}


/* Smooth dark transition from banner into the site */

#header:after {
    content: "";
    pointer-events: none;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 75px;

    background:
        linear-gradient(
            to bottom,
            rgba(5,12,8,0),
            rgba(5,12,8,.88)
        );
}


/* -----------------------------------------
   REMOVE OLD BLUE FLUXCP LOGO IMAGE
   ----------------------------------------- */

#logo img {
    display: none !important;
}

#logo {
    position: relative;
    z-index: 2;

    width: 100% !important;
    height: 300px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/*
   Hide old logo text too, if this FluxCP build
   outputs text instead of only an image.
*/

#logo h1,
#logo h2,
#logo a {
    color: transparent !important;
    text-shadow: none !important;
}


/* -----------------------------------------
   MAKE PAGE PANELS BLEND WITH ARTWORK
   ----------------------------------------- */

#content,
#sidebar,
.sidebar,
#main,
.main-content {
    border-color: rgba(77, 109, 84, .75) !important;
}


/* Sidebar stays readable */

#sidebar,
.sidebar {
    background:
        linear-gradient(
            rgba(13, 35, 22, .95),
            rgba(8, 24, 15, .95)
        ) !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.30);
}


/* -----------------------------------------
   MOBILE / SMALL WINDOWS
   ----------------------------------------- */

@media screen and (max-width: 1000px) {

    #header {
        min-height: 220px !important;
        background-size: cover !important;
    }

    #logo {
        height: 220px !important;
    }

}


@media screen and (max-width: 650px) {

    body {
        background-attachment: scroll !important;
    }

    #header {
        min-height: 165px !important;
        background-position: center center !important;
    }

    #logo {
        height: 165px !important;
    }

}

/* =========================================================
   END 2STONEDRO ARTWORK THEME
   ========================================================= */


/* =========================================================
   2STONEDRO FINAL HEADER BANNER
   ========================================================= */

#logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* Remove the old blue header-cell background */
body > table tr:first-child td,
body > table tr:first-child td[bgcolor="#101820"] {
    background-color: transparent !important;
}

/* Let banner sit cleanly against the forest artwork */
body > table {
    background: transparent !important;
}

@media screen and (max-width: 700px) {
    #logo {
        width: 100% !important;
        height: auto !important;
    }
}

/* =========================================================
   END FINAL HEADER BANNER
   ========================================================= */


/* 2StonedRO banner finishing touches */

#logo {
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(174, 144, 53, .22),
        0 10px 28px rgba(0, 0, 0, .55) !important;
}

/* Blend banner edge into forest background */
td:has(> a > #logo) {
    background: transparent !important;
}

/* =========================================================
   2STONED-STABLE-SHELL-START

   Locks FluxCP's legacy 5-column table so individual pages
   cannot resize / recenter the entire site.
   ========================================================= */

#site-layout {
    width: calc(100% - 24px) !important;
    max-width: 1280px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    table-layout: fixed !important;

    background: transparent !important;
}


/* Exact FluxCP column structure */

#site-layout col.layout-edge {
    width: 20px;
}

#site-layout col.layout-sidebar {
    width: 198px;
}

#site-layout col.layout-gap {
    width: 20px;
}

#site-layout col.layout-main {
    width: auto;
}


/*
   Main column may shrink, but it must never tell
   the outer table to become wider.
*/

#main-column-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    vertical-align: top;
}

#main-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}


/* Main FluxCP content always follows its assigned column */

#content {
    width: 100% !important;
    max-width: 100% !important;
}


/*
   Logged-in admin links were one of the things capable
   of changing the table's intrinsic width.
*/

#loginbox {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

#loginbox td {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* Images can never force the main column wider */

#main-column img:not(#logo) {
    max-width: 100%;
}


/*
   Wide data tables stay inside the content area.
   They can scroll rather than moving the whole website.
*/

#content .stoned-ranking-wrap,
#content .stoned-online-wrap,
#content .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}


/* Keep banner tied to the stable shell */

#logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}


/* Reasonable fallback on smaller screens */

@media screen and (max-width: 900px) {

    #site-layout {
        width: calc(100% - 10px) !important;
    }
}

/* =========================================================
   2STONED-STABLE-SHELL-END
   ========================================================= */


/* 2STONED-SCROLL-FIX-START */

/*
   Always reserve room for the browser scrollbar.

   Without this, short pages have no scrollbar while long pages do,
   causing a centered site to move a few pixels left/right.
*/
html {
    min-height: 100% !important;
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}


/*
   Never restrict the document vertically.
*/
body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
}


/*
   FluxCP shell must be allowed to grow with page content.
*/
#site-layout,
#main-column-cell,
#main-column,
#content {
    height: auto !important;
    max-height: none !important;
}


/*
   Do not vertically clip long pages.
*/
#main-column-cell,
#main-column {
    overflow-y: visible !important;
}


/*
   Give long pages/footer some room at the very bottom.
*/
#site-layout {
    margin-bottom: 30px !important;
}

/* 2STONED-SCROLL-FIX-END */


/* 2STONED-VIEWPORT-BG-START */

/*
   Put the artwork on the ROOT viewport instead of the body.

   Short FluxCP pages used to end before the bottom of the browser,
   which exposed the plain black HTML background.
*/
html {
    min-height: 100% !important;

    background:
        linear-gradient(
            rgba(2, 8, 5, 0.20),
            rgba(2, 8, 5, 0.38)
        ),
        url("../img/2stoned-bg.png")
        center top / cover
        no-repeat
        fixed !important;

    background-color: #050a07 !important;
}


/*
   Let the root artwork show through the entire page.
*/
body {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;

    background: transparent !important;
}


/*
   Preserve the scrollbar fix that keeps the site from shifting.
*/
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}

/* 2STONED-VIEWPORT-BG-END */