* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #151514;
    color: #d4d4d3;
    font: 11px Verdana, Arial, sans-serif;
}

a {
    color: rgb(118,118,255);
    text-decoration: none;
}

a:hover {
    color: rgb(150,150,255);
}

.Page {
    width: 1070px;
    margin: 20px auto;
}

.HeaderBox,
.Panel,
.FooterBox {
    background: #272726;
    border: 1px solid #353534;
    margin-bottom: 12px;
}

.HeaderBox {
    border-radius: 4px;
    overflow: hidden;
}

.Brand {
    padding: 14px;
    background: linear-gradient(to bottom, #303030 0%, #1a1a1a 100%);
    border-bottom: 1px solid #111;
    font-size: 16px;
}

.Brand a {
    color: #eaeaea;
}

.Brand span {
    color: rgb(118,118,255);
}

.NavBar {
    background: #353534;
    padding: 8px 14px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
}

.NavBar a,
.Bell {
    color: #fff;
    margin-right: 16px;
    font-weight: bold;
    font-size: 11px;
}

.LoginNotice {
    padding: 10px 14px;
    background: #272726;
    color: #d4d4d3;
}

.Content {
    width: 100%;
}

.PanelTitle {
    background: #353534;
    color: #bbb;
    padding: 8px 10px;
    font-weight: bold;
    border-bottom: 1px solid #222;
}

.Row {
    padding: 12px;
    border-top: 1px solid #333;
    background: #252524;
}

.ForumRow:hover {
    background: #20201f;
}

.Row strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

.Muted {
    color: #888;
    font-size: 11px;
}

.FooterBox {
    padding: 12px;
    color: #aaa;
}

.ForumTable {
    width: 100%;
    border-collapse: collapse;
}

.ForumTable td {
    padding: 10px;
    border-top: 1px solid #333;
    vertical-align: top;
}

.ForumMain {
    width: 70%;
}

.ForumStats {
    width: 10%;
    text-align: center;
    color: #aaa;
}

.ForumLastPost {
    width: 20%;
    color: #aaa;
    font-size: 11px;
}

.CategoryStrip {
    height: 2px;
    background: rgb(118,118,255);
}

.Alert {
    padding: 8px;
    margin: 0 0 10px;
    border: 1px solid #444;
}

.Alert.Error {
    color: #ff7777;
}

.Alert.Success {
    color: rgb(118,118,255);
}

.Fieldset {
    border: 1px solid #4a4a49;
    padding: 12px;
    margin-bottom: 12px;
}

.Fieldset legend {
    color: rgb(118,118,255);
    padding: 0 6px;
    font-size: 11px;
}

.Fieldset label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: #fff;
}

.Fieldset input {
    background: #1e1e1d;
    border: 1px solid #444;
    color: #ddd;
    padding: 4px 6px;
    width: 320px;
    margin-bottom: 10px;
}

.SplitFields {
    display: flex;
    gap: 20px;
}

.SplitFields input {
    width: 180px;
}

button {
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 5px 12px;
    cursor: pointer;
}

button:hover {
    background: #2b2b2a;
}

.TwoColumn {
    display: flex;
    gap: 12px;
}

.SideMenu {
    width: 145px;
    background: #272726;
    border: 1px solid #353534;
    height: fit-content;
}

.SideTitle {
    background: #353534;
    padding: 9px;
    font-weight: bold;
    color: #bbb;
}

.SideMenu a {
    display: block;
    padding: 6px 10px;
    font-weight: bold;
}

.SideMenu a.Active {
    color: #fff;
}

.SideMenu a.AdminLink {
    color: rgb(118,118,255);
}

.MainPanel {
    flex: 1;
}

.Fieldset textarea {
    width: 320px;
    height: 70px;
    background: #1e1e1d;
    border: 1px solid #444;
    color: #ddd;
    padding: 4px 6px;
}

.Fieldset select {
    background: #1e1e1d;
    border: 1px solid #444;
    color: #ddd;
    padding: 4px 6px;
    width: 340px;
}

.AvatarPreview {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid #444;
    margin-bottom: 10px;
    background: #111;
}

.ProfileAvatar {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border: 1px solid #444;
    background: #111;
}

.NoAvatar {
    width: 128px;
    height: 128px;
    border: 1px solid #444;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 11px;
}

.MemberTable {
    width: 100%;
    border-collapse: collapse;
}

.MemberTable th {
    background: #353534;
    color: #bbb;
    padding: 8px;
    text-align: left;
    border-bottom: 2px solid rgb(118,118,255);
}

.MemberTable td {
    background: #252524;
    padding: 8px;
    border-top: 1px solid #333;
}

.MemberTable tr:hover td {
    background: #20201f;
}

.MemberName {
    width: 45%;
}

.MemberAvatar {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border: 1px solid #444;
    vertical-align: middle;
    margin-right: 8px;
    background: #111;
}

.EmptyAvatar {
    display: inline-block;
}

.UserRoleAdmin {
    color: rgb(118,118,255) !important;
    font-weight: bold;
}

.UserRoleModerator {
    color: #ffcc00 !important;
    font-weight: bold;
}

.UserRoleUser {
    color: #d4d4d3 !important;
}

.ItemGroups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.ItemGroup {
    margin-bottom: 0;
}

.ItemCount {
    float: right;
    background: #1e1e1d;
    border: 1px solid #444;
    color: rgb(118,118,255);
    padding: 1px 7px;
    font-size: 10px;
}

.ItemTable {
    width: 100%;
    border-collapse: collapse;
}

.ItemTable th {
    background: #353534;
    color: #bbb;
    padding: 8px;
    text-align: left;
    border-bottom: 2px solid rgb(118,118,255);
}

.ItemTable td {
    background: #252524;
    padding: 8px;
    border-top: 1px solid #333;
    vertical-align: middle;
}

.ItemTable tr:hover td {
    background: #20201f;
}

.SmallButton {
    display: inline-block;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 4px 9px;
    font-weight: bold;
}

.SmallButton:hover {
    background: #2b2b2a;
    color: #fff;
}

.CodeWrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.CodeBox {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 450px;
    box-sizing: border-box;

    background: #111 !important;
    color: #ddd !important;
    border: 1px solid #444;
    padding: 12px;

    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.45;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
    overflow-y: auto;
}

.CodeEditor {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-height: 500px;
    box-sizing: border-box;

    background: #111 !important;
    color: #ddd !important;
    border: 1px solid #444 !important;
    padding: 12px;

    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.45;

    resize: vertical;
    outline: none;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
}

.SuccessMessage {
    background: #182818;
    border: 1px solid #2f7d32;
    color: #8aff8a;
    padding: 8px;
    margin-bottom: 10px;
}

.ErrorMessage {
    background: #2a1515;
    border: 1px solid #7d2f2f;
    color: #ff8a8a;
    padding: 8px;
    margin-bottom: 10px;
}

#InviteCodeBox {
    width: 260px;
    font-family: Consolas, Monaco, monospace;
}

.InviteUnused {
    color: #8aff8a;
    font-weight: bold;
}

.InviteUsed {
    color: #ff8a8a;
    font-weight: bold;
}

#NormalAmount,
#WaveAmount {
    background: #111;
    color: #ddd;
    border: 1px solid #444;
    padding: 6px;
    width: 90px;
    box-sizing: border-box;
}

code {
    background: #111;
    border: 1px solid #333;
    padding: 2px 5px;
    color: #ddd;
}

#InviteCodeBox,
#AssignedToUserID {
    background: #111;
    color: #ddd;
    border: 1px solid #444;
    padding: 6px;
    box-sizing: border-box;
}

.ButtonLike {
    display: inline-block;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 6px 12px;
    font-weight: bold;
    text-decoration: none;
}

.ButtonLike:hover {
    background: #2b2b2a;
    color: #fff;
}

.InviteUnused {
    color: #8aff8a;
    font-weight: bold;
}

.InviteUsed {
    color: #ff8a8a;
    font-weight: bold;
}

.ItemTable code {
    background: #111;
    border: 1px solid #333;
    padding: 2px 5px;
    color: #ddd;
}

.BanStatusBanned {
    color: #ff8a8a;
    font-weight: bold;
}

.BanStatusClear {
    color: #8aff8a;
    font-weight: bold;
}

#NormalAmount,
#WaveAmount,
#UserID,
#BanReason {
    background: #111;
    color: #ddd;
    border: 1px solid #444;
    padding: 6px;
    box-sizing: border-box;
}

#UserID {
    min-width: 240px;
}

#BanReason {
    width: 320px;
}
/* Market / My Items additions */
.NavCount {
    float: right;
    color: #999;
    font-size: 10px;
}

.MyItemsTable td {
    vertical-align: top;
}

.MarketPending {
    color: #ff8a8a;
    font-weight: bold;
}

.MarketApproved {
    color: #8aff8a;
    font-weight: bold;
}

.MarketDenied {
    color: #ffb86b;
    font-weight: bold;
}