.wrapper {
    width: 90%;
    margin: auto;
    margin-top: 30px;
}

.fa-solid {
    transition: 0.3s;
    transform: rotate(0deg);
}

.forum-container {
    width: 100%;
    margin-top: 5px;
}

.forum-content {
    width: 50%;
}


.forum-content {
    background: white;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.03;
    );
    max-height: 400px;
    overflow: auto;
    border-radius: 10px;
}

    .forum-content > .forum-header {
        font-size: 20px;
        font-family: "Roboto";
        font-weight: 400;
        color: black;
        display: block;
        padding: 10px;
    }

        .forum-content > .forum-header:hover {
            cursor: hand;
        }

        .forum-content > .forum-header > .icon > i {
            float: right;
            display: inline-block;
            margin-top: -24px;
            margin-right: 5px;
        }

        .forum-content > .forum-header > .icon > a {
            float: right;
            margin-right: 50px;
            margin-top: -28px;
        }

        .forum-content > .forum-header > i {
            padding-right: 5px;
            margin-right: 5px;
        }

    .forum-content > ul {
        list-style: none;
    }

        .forum-content > ul > li {
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            height: 60px;
        }

            .forum-content > ul > li > a {
                display: block;
                margin-top: -49px;
                margin-left: 55px;
                text-decoration: none;
                font-family: "Roboto";
                font-size: 15px;
            }

            .forum-content > ul > li > i {
                padding-top: 22px;
                padding-left: 20px;
                border-right: 1px solid #eee;
                padding-bottom: 21px;
                margin-right: 20px;
                padding-right: 22px;
                background: #f9f9f9;
            }

            .forum-content > ul > li > .description {
                margin-left: 56px;
                font-size: 12px;
                font-family: "Open Sans";
                margin-top: -20px;
                color: gray;
            }

            .forum-content > ul > li > .badge, .forum-content > ul > li > .rounded-pill,
            .forum-content > ul > li > .text-bg-primary {
                float: right;
                margin-right: 0px;
                background: #f9f9f9 !important;
                color: gray !important;
                border-radius: 0px !important;
                margin-top: -33px;
                padding-top: 26px;
                padding-bottom: 21px;
                border: 0px;
                border-left: 1px solid #eee;
            }


span.error {
    font-family: "Open Sans";
    margin-left: 10px;
    font-size: 12px;
}

.form {
    background: white;
    width: 100%;
    margin: auto;
    box-shadow: 1px 3px 15px -6px rgba(0,0,0,0.13);
    border-radius: 10px;
}

    .form > .form-header > * {
        display: block;
        padding: 0px;
        margin: 0px;
    }

    .form > .form-header {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

        .form > .form-header > #title {
            font-family: "Roboto";
            font-size: 30px;
        }

    .form > form {
        padding: 10px;
    }

        .form > form > * {
            display: block;
        }

        .form > form > input[type="text"],
        .form > form > input[type="email"],
        .form > form > input[type="password"],
        .form > form > textarea,
        .form > form > .tag-container > input[type="text"],
        .form > form > input[type="file"] {
            @extend .form-control; /* Bootstrap's class for inputs */
            margin-bottom: 0.5rem;
            font-family: "Roboto", sans-serif;
            border-radius: 0.375rem; /* Bootstrap default border-radius */
            background-color: #fff;
            padding: 0.625rem 0.75rem; /* roughly 10px */
            border: 1px solid #dee2e6;
            width: 100%;
        }

            /* Focus state matches Bootstrap style with slight highlight */
            .form > form > input[type="text"]:focus,
            .form > form > input[type="email"]:focus,
            .form > form > input[type="password"]:focus,
            .form > form > textarea:focus,
            .form > form > input[type="file"]:focus {
                border-color: #86b7fe; /* bootstrap focus border */
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); /* bootstrap focus shadow */
            }

            /* Optional highlight override */
            .form > form > input[type="text"]:highlight,
            .form > form > input[type="email"]:highlight,
            .form > form > input[type="password"]:highlight {
                background-color: #fff;
            }

.form-footer {
    padding: 10px;
    font-family: "Roboto";
    color: gray;
    border-top: 1px solid #eee;
}

.jumbo-item {
    width: 53%;
    margin: auto;
    margin-top: 33px;
    font-size: 50px;
    font-family: "Roboto";
    font-weight: 500;
}

.breadcrum {
    padding: 5px;
}

    .breadcrum > * {
        display: inline-block;
        text-decoration: none;
        color: gray;
    }

    .breadcrum > .active {
        font-weight: 500;
        font-family: "Roboto";
        color: #0ba5ff;
    }

.fa-chevron-right {
    font-size: 15px;
}


.tag-container {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 300px;
    min-height: 40px;
    cursor: text;
}

    .tag-container .tag {
        background-color: #007bff;
        color: white;
        padding: 5px 10px;
        border-radius: 3px;
        margin: 2px;
        display: flex;
        align-items: center;
    }

        .tag-container .tag span {
            margin-left: 5px;
            cursor: pointer;
            font-weight: bold;
        }

    .tag-container input {
        border: none;
        flex: 1;
        min-width: 100px;
        padding: 5px;
        outline: none;
    }

.forum-post-content {
    padding: 10px;
    font-family: "Open Sans";
    font-size: 14px;
}

    .forum-post-content > * {
        display: block;
    }

.forum-post-content-footer {
    border-top: 1px solid #eee;
    padding: 10px;
}

    .forum-post-content-footer > img {
        width: 30px;
        border-radius: 100%;
        margin-right: 5px;
        margin-top: 1px;
    }

    .forum-post-content-footer > a {
        text-decoration: none;
        display: inline-block;
    }


.code-wrapper {
    display: flex;
    background: #f5f5f5;
    border: 1px solid #ccc;
    font-family: monospace;
    padding: 10px;
    margin: 0px;
    margin-top: -30px;
    border-radius: 10px;
}

.line-numbers {
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid #ddd;
    margin-right: 10px;
    color: #525252;
    user-select: none;
}

.code-content {
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
}

.code {
    width: 50%;
}

.inputBox {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 0px;
}

    .inputbox > form > input[type="text"] {
        width: 100%;
        border: 0px;
        outline: 0;
        font-size: 13px;
        font-family: "Segoe UI";
        margin-top: 5px;
    }

.forum-content > ul > li > .user-image > img {
    width: 30px;
}

.forum-content > ul > li > .commentuser {
    margin-left: 61px;
    display: block;
    margin-top: -76px;
    padding-top: 27px;
}

.forum-content > ul > li > .commentContent {
    display: inline-block;
    padding-top: 10px;
    font-size: 14px;
    margin-left: 61px;
    margin-top: -11px;
}

.edit-form > textarea {
    width: 100%;
    height: 500px;
    max-height: 700px;
    outline: 0px;
    border: 0px;
}

ul.bbcode-toolbar {
    list-style: none;
    padding: 0px;
    margin-top: -10px;
    margin-bottom: -10px;
    margin-right: -10px;
    margin-left: -10px;
    display: block;
    height: 40px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    margin-bottom: 1px;
}

    ul.bbcode-toolbar > li {
        float: left;
        padding: 11px;
        margin-right: 5px;
        font-size: 12px;
        padding-bottom: 9px;
        margin-top: -1px;
        padding-top: 13px;
    }

        ul.bbcode-toolbar > li:hover {
            cursor: hand;
            background: #e6e6e6;
        }

.badge {
    font-family: "Roboto";
}


pre {
    margin: 0px;
}

.forum-header > img {
    width: 25px;
    border-radius: 100%;
}

.forum-post-content-status {
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    border-top: 1px solid #eee;
    box-shadow: 10px 10px 71px -67px rgba(0,0,0,0.53) inset;
    padding-top: 10px;
}


.errorPanel {
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #ff00000a;
    font-family: "roboto";
    font-size: 12px;
}



.successPanel {
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #00ff450a;
    font-family: "roboto";
    font-size: 12px;
}


/* Responsive adjustments for screens <= 800px */
@media screen and (max-width: 1000px) {
    .wrapper,
    .jumbo-item {
        width: 90%;
    }

    .forum-content {
        width: 100%;
        max-height: none;
    }

    .jumbo-item {
        font-size: 35px;
    }

    .form > form,
    .form > .form-header {
        padding: 5px;
    }

        .form > form > input[type="text"],
        .form > form > input[type="email"],
        .form > form > input[type="password"],
        .form > form > textarea,
        .form > form > input[type="file"] {
            padding: 0.5rem;
            font-size: 14px;
        }

    .bbcode-toolbar > li {
        padding: 8px;
        font-size: 10px;
    }

    .badge {
        display: block;
        float: left;
    }
}

/* =========================
BASE TEXT STYLES
========================= */
.forum-post-content {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

    .forum-post-content b,
    .forum-post-content strong {
        font-weight: 700;
        display: inline;
    }

    .forum-post-content i,
    .forum-post-content em {
        font-style: italic;
    }

    .forum-post-content u {
        text-decoration: underline;
    }

    .forum-post-content s {
        text-decoration: line-through;
    }

    .forum-post-content mark {
        background-color: #fff176;
        padding: 0 4px;
        border-radius: 2px;
        margin: 0 2px;
        display: inline-block;
    }

    /* =========================
FONTS & SIZES
========================= */
    .forum-post-content small {
        font-size: 0.85em;
        margin: 0.1em 0;
    }

    .forum-post-content big {
        font-size: 1.2em;
        margin: 0.1em 0;
    }

    /* =========================
ALIGNMENT
========================= */
    .forum-post-content div[style*="text-align:"] {
        margin: 10px 0;
    }

    /* =========================
LISTS
========================= */
    .forum-post-content ul,
    .forum-post-content ol {
        padding-left: 25px;
        margin: 10px 0;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
    }

    .forum-post-content li {
        margin: 5px 0;
    }

    /* =========================
TABLES
========================= */
    .forum-post-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }

    .forum-post-content th,
    .forum-post-content td {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
    }

    .forum-post-content th {
        background-color: #f2f2f2;
    }

    /* =========================
BOXES & PANELS
========================= */
    .forum-post-content div.note,
    .forum-post-content div.warning,
    .forum-post-content div.error,
    .forum-post-content div.success,
    .forum-post-content div.info {
        padding: 10px 15px;
        border-left: 4px solid;
        border-radius: 4px;
        margin: 15px 0;
    }

    .forum-post-content div.note {
        background: #e3f2fd;
        color: #0d47a1;
        border-color: #1976d2;
    }

    .forum-post-content div.warning {
        background: #fff3e0;
        color: #e65100;
        border-color: #ff9800;
    }

    .forum-post-content div.error {
        background: #ffebee;
        color: #b71c1c;
        border-color: #f44336;
    }

    .forum-post-content div.success {
        background: #e8f5e9;
        color: #1b5e20;
        border-color: #4caf50;
    }

    .forum-post-content div.info {
        background: #e1f5fe;
        color: #01579b;
        border-color: #03a9f4;
    }

    /* =========================
CODE BLOCKS
========================= */
    .forum-post-content pre.code,
    .forum-post-content pre.cs-code,
    .forum-post-content pre.lua-code,
    .forum-post-content pre.json-code,
    .forum-post-content pre.xml-code,
    .forum-post-content pre.php-code,
    .forum-post-content pre.js-code,
    .forum-post-content pre.sql-code {
        color: black;
        border-radius: 5px;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
    }

    .forum-post-content code {
        background: #eee;
        padding: 3px 5px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        margin: 0 2px;
    }

    /* =========================
BUTTONS & BADGES
========================= */
    .forum-post-content button {
        background: #1a73e8;
        color: #fff;
        border: none;
        padding: 8px 14px;
        border-radius: 4px;
        cursor: pointer;
        margin: 8px 0;
    }

        .forum-post-content button:hover {
            background: #0c5dc0;
        }

    .forum-post-content .badge,
    .forum-post-content .tag,
    .forum-post-content .pill {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.85em;
        margin: 3px 3px 6px 0;
    }

    .forum-post-content .badge {
        background: #2196f3;
        color: #fff;
    }

    .forum-post-content .tag {
        background: #9c27b0;
        color: #fff;
    }

    .forum-post-content .pill {
        background: #ff5722;
        color: #fff;
    }

    /* =========================
INTERACTIVE
========================= */
    .forum-post-content details {
        margin: 10px 0;
    }

        .forum-post-content details summary {
            cursor: pointer;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .forum-post-content details[open] summary {
            margin-bottom: 10px;
        }

    /* =========================
LAYOUT
========================= */
    .forum-post-content .row {
        display: flex;
        flex-wrap: wrap;
        margin: 10px -5px;
    }

    .forum-post-content .col {
        flex: 1;
        padding: 5px;
        min-width: 100px;
    }

    .forum-post-content .flex {
        display: flex;
        margin: 10px 0;
    }

    .forum-post-content .box {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 0;
    }

    .forum-post-content .container {
        padding: 15px;
        margin: 10px 0;
    }

    /* =========================
IMAGES & MEDIA
========================= */
    .forum-post-content img,
    .forum-post-content audio,
    .forum-post-content video,
    .forum-post-content iframe {
        max-width: 100%;
        margin: 10px 0;
        border-radius: 5px;
        margin-right: 11px;
    }

    /* =========================
TABLE OF CONTENTS / ICONS / EMOJIS
========================= */
    .forum-post-content i {
        font-style: normal;
    }

    .forum-post-content .emoji {
        font-size: 1.2em;
        margin: 0 2px;
    }

    .forum-post-content a {
        display: inline;
    }

.icon {
    display: block;
    margin-top: -2px;
}

.github-repo {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    max-width: 450px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin: 12px 0;
    transition: box-shadow 0.2s ease-in-out;
}

    .github-repo:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.repo-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.repo-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    border: 1px solid #ccc;
}

.repo-title {
    display: flex;
    flex-direction: column;
    margin-top: -5px;
}

    .repo-title a {
        font-size: 18px;
        font-weight: bold;
        color: #0366d6;
        text-decoration: none;
    }

        .repo-title a:hover {
            text-decoration: underline;
        }

.repo-owner {
    font-size: 12px;
    color: #555;
}

.repo-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
}

.repo-stats {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

    .repo-stats span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.repo-updated {
    font-size: 12px;
    color: #888;
}

.steam-card {
    display: flex;
    align-items: center;
    background: #1b2838;
    border: 1px solid #171a21;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    color: #c7d5e0;
    font-family: Arial, sans-serif;
    transition: background 0.2s;
}

    .steam-card:hover {
        background: #2a475e;
    }

.steam-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid #66c0f4;
}

.steam-info b {
    font-size: 1.1em;
    display: block;
    margin-bottom: 4px;
}

.steam-info a {
    color: #66c0f4;
    text-decoration: none;
}

    .steam-info a:hover {
        text-decoration: underline;
    }

.steam-info {
    line-height: 1.4em;
}

.github-card {
    display: flex;
    gap: 12px;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    max-width: 400px;
    background: #f9f9f9;
}

.github-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.github-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .github-info a {
        text-decoration: none;
        color: #0366d6;
    }

ul.member-list > li {
    margin-left: -30px;
}

    ul.member-list > li > a {
        display: block;
        margin-left: 10px;
    }

    ul.member-list > li > span#created_at {
        display: block;
        margin-left: 47px;
        margin-top: -10px;
    }

ul.member-list {
    margin: 0px;
}

a.badge {
    font-size: 12px !important;
}

.user-image {
    padding-left: 10px;
    padding-bottom: 20px;
    display: block;
    border-right: 1px solid #eee;
    width: 51px;
    padding-top: 20px;
    padding-right: 10px;
    background: #f9f9f9;
}

a.buttonC {
    margin-top: -31px !important;
}

.wrapper {
    width: 90%;
    margin: auto;
    margin-top: 30px;
}

.fa-solid {
    transition: 0.3s;
    transform: rotate(0deg);
}

.forum-container {
    width: 100%;
    margin-top: 5px;
}

.forum-content {
    width: 50%;
}


.forum-content {
    background: white;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.03;
    );
    max-height: 400px;
    overflow: auto;
    border-radius: 0px;
}

    .forum-content > .forum-header {
        font-size: 20px;
        font-family: "Roboto";
        font-weight: 400;
        color: black;
        display: block;
        padding: 10px;
    }

        .forum-content > .forum-header:hover {
            cursor: hand;
        }

        .forum-content > .forum-header > .icon > i {
            float: right;
            display: inline-block;
            margin-top: -24px;
            margin-right: 5px;
        }

        .forum-content > .forum-header > .icon > a {
            float: right;
            margin-right: 50px;
            margin-top: -28px;
        }

        .forum-content > .forum-header > i {
            padding-right: 5px;
            margin-right: 5px;
        }

    .forum-content > ul {
        list-style: none;
    }

        .forum-content > ul > li {
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            height: 60px;
        }

            .forum-content > ul > li > a {
                display: block;
                margin-top: -49px;
                margin-left: 55px;
                text-decoration: none;
                font-family: "Roboto";
                font-size: 15px;
            }

            .forum-content > ul > li > i {
                padding-top: 22px;
                padding-left: 20px;
                border-right: 1px solid #eee;
                padding-bottom: 21px;
                margin-right: 20px;
                padding-right: 22px;
                background: #f9f9f9;
            }

            .forum-content > ul > li > .description {
                margin-left: 56px;
                font-size: 12px;
                font-family: "Open Sans";
                margin-top: -20px;
                color: gray;
            }

            .forum-content > ul > li > .badge, .forum-content > ul > li > .rounded-pill,
            .forum-content > ul > li > .text-bg-primary {
                float: right;
                margin-right: 0px;
                background: #f9f9f9 !important;
                color: gray !important;
                border-radius: 0px !important;
                margin-top: -33px;
                padding-top: 26px;
                padding-bottom: 21px;
                border: 0px;
                border-left: 1px solid #eee;
            }


span.error {
    font-family: "Open Sans";
    margin-left: 10px;
    font-size: 12px;
    display: block;
    padding-top: 20px;
    padding-left: 10px;
}

.form {
    background: white;
    width: 100%;
    margin: auto;
    box-shadow: 1px 3px 15px -6px rgba(0,0,0,0.13);
    border-radius: 10px;
}

    .form > .form-header > * {
        display: block;
        padding: 0px;
        margin: 0px;
    }

    .form > .form-header {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

        .form > .form-header > #title {
            font-family: "Roboto";
            font-size: 30px;
        }

    .form > form {
        padding: 10px;
    }

        .form > form > * {
            display: block;
        }

        .form > form > input[type="text"],
        .form > form > input[type="email"],
        .form > form > input[type="password"],
        .form > form > textarea,
        .form > form > .tag-container > input[type="text"],
        .form > form > input[type="file"] {
            @extend .form-control; /* Bootstrap's class for inputs */
            margin-bottom: 0.5rem;
            font-family: "Roboto", sans-serif;
            border-radius: 0.375rem; /* Bootstrap default border-radius */
            background-color: #fff;
            padding: 0.625rem 0.75rem; /* roughly 10px */
            border: 1px solid #dee2e6;
            width: 100%;
        }

            /* Focus state matches Bootstrap style with slight highlight */
            .form > form > input[type="text"]:focus,
            .form > form > input[type="email"]:focus,
            .form > form > input[type="password"]:focus,
            .form > form > textarea:focus,
            .form > form > input[type="file"]:focus {
                border-color: #86b7fe; /* bootstrap focus border */
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); /* bootstrap focus shadow */
            }

            /* Optional highlight override */
            .form > form > input[type="text"]:highlight,
            .form > form > input[type="email"]:highlight,
            .form > form > input[type="password"]:highlight {
                background-color: #fff;
            }

.form-footer {
    padding: 10px;
    font-family: "Roboto";
    color: gray;
    border-top: 1px solid #eee;
}

.jumbo-item {
    width: 53%;
    margin: auto;
    margin-top: 33px;
    font-size: 50px;
    font-family: "Roboto";
    font-weight: 500;
}

.breadcrum {
    padding: 5px;
}

    .breadcrum > * {
        display: inline-block;
        text-decoration: none;
        color: gray;
    }

    .breadcrum > .active {
        font-weight: 500;
        font-family: "Roboto";
        color: #0ba5ff;
    }

.fa-chevron-right {
    font-size: 15px;
}


.tag-container {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 300px;
    min-height: 40px;
    cursor: text;
}

    .tag-container .tag {
        background-color: #007bff;
        color: white;
        padding: 5px 10px;
        border-radius: 3px;
        margin: 2px;
        display: flex;
        align-items: center;
    }

        .tag-container .tag span {
            margin-left: 5px;
            cursor: pointer;
            font-weight: bold;
        }

    .tag-container input {
        border: none;
        flex: 1;
        min-width: 100px;
        padding: 5px;
        outline: none;
    }

.forum-post-content {
    padding: 10px;
    font-family: "Open Sans";
    font-size: 14px;
}

    .forum-post-content > * {
        display: block;
    }

.forum-post-content-footer {
    border-top: 1px solid #eee;
    padding: 10px;
}

    .forum-post-content-footer > img {
        width: 30px;
        border-radius: 100%;
        margin-right: 5px;
        margin-top: 1px;
    }

    .forum-post-content-footer > a {
        text-decoration: none;
        display: inline-block;
    }


.code-wrapper {
    display: flex;
    background: #f5f5f5;
    border: 1px solid #ccc;
    font-family: monospace;
    padding: 10px;
    margin: 0px;
    margin-top: -30px;
    border-radius: 10px;
}

.line-numbers {
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid #ddd;
    margin-right: 10px;
    color: #525252;
    user-select: none;
}

.code-content {
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
}

.code {
    width: 50%;
}

.inputBox {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 0px;
}

    .inputbox > form > input[type="text"] {
        width: 100%;
        border: 0px;
        outline: 0;
        font-size: 13px;
        font-family: "Segoe UI";
        margin-top: 5px;
    }

.forum-content > ul > li > .user-image > img {
    width: 30px;
}

.forum-content > ul > li > .commentuser {
    margin-left: 61px;
    display: block;
    margin-top: -76px;
    padding-top: 27px;
    font-family: "Roboto";
    font-weight: 500;
    width: 200px;
}

.forum-content > ul > li > .commentContent {
    display: inline-block;
    padding-top: 10px;
    font-size: 14px;
    margin-left: 61px;
    margin-top: -11px;
}

.edit-form > textarea {
    width: 100%;
    height: 500px;
    max-height: 700px;
    outline: 0px;
    border: 0px;
}

ul.bbcode-toolbar {
    list-style: none;
    padding: 0px;
    margin-top: -10px;
    margin-bottom: -10px;
    margin-right: -10px;
    margin-left: -10px;
    display: block;
    height: 40px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    margin-bottom: 1px;
}

    ul.bbcode-toolbar > li {
        float: left;
        padding: 11px;
        margin-right: 5px;
        font-size: 12px;
        padding-bottom: 9px;
        margin-top: -1px;
        padding-top: 13px;
    }

        ul.bbcode-toolbar > li:hover {
            cursor: hand;
            background: #e6e6e6;
        }

.badge {
    font-family: "Roboto";
}


pre {
    margin: 0px;
}

.forum-header > img {
    width: 25px;
    border-radius: 100%;
}

.forum-post-content-status {
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    border-top: 1px solid #eee;
    box-shadow: 10px 10px 71px -67px rgba(0,0,0,0.53) inset;
    padding-top: 10px;
}


.errorPanel {
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #ff00000a;
    font-family: "roboto";
    font-size: 12px;
}



.successPanel {
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #00ff450a;
    font-family: "roboto";
    font-size: 12px;
}


/* Responsive adjustments for screens <= 800px */
@media screen and (max-width: 1000px) {
    .wrapper,
    .jumbo-item {
        width: 90%;
    }

    .forum-content {
        width: 100%;
        max-height: none;
    }

    .jumbo-item {
        font-size: 35px;
    }

    .form > form,
    .form > .form-header {
        padding: 5px;
    }

        .form > form > input[type="text"],
        .form > form > input[type="email"],
        .form > form > input[type="password"],
        .form > form > textarea,
        .form > form > input[type="file"] {
            padding: 0.5rem;
            font-size: 14px;
        }

    .bbcode-toolbar > li {
        padding: 8px;
        font-size: 10px;
    }

    .badge {
        display: block;
        float: left;
    }
}

/* =========================
BASE TEXT STYLES
========================= */
.forum-post-content {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

    .forum-post-content b,
    .forum-post-content strong {
        font-weight: 700;
        display: inline;
    }

    .forum-post-content i,
    .forum-post-content em {
        font-style: italic;
    }

    .forum-post-content u {
        text-decoration: underline;
    }

    .forum-post-content s {
        text-decoration: line-through;
    }

    .forum-post-content mark {
        background-color: #fff176;
        padding: 0 4px;
        border-radius: 2px;
        margin: 0 2px;
        display: inline-block;
    }

    /* =========================
FONTS & SIZES
========================= */
    .forum-post-content small {
        font-size: 0.85em;
        margin: 0.1em 0;
    }

    .forum-post-content big {
        font-size: 1.2em;
        margin: 0.1em 0;
    }

    /* =========================
ALIGNMENT
========================= */
    .forum-post-content div[style*="text-align:"] {
        margin: 10px 0;
    }

    /* =========================
LISTS
========================= */
    .forum-post-content ul,
    .forum-post-content ol {
        padding-left: 25px;
        margin: 10px 0;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
    }

    .forum-post-content li {
        margin: 5px 0;
    }

    /* =========================
TABLES
========================= */
    .forum-post-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }

    .forum-post-content th,
    .forum-post-content td {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
    }

    .forum-post-content th {
        background-color: #f2f2f2;
    }

    /* =========================
BOXES & PANELS
========================= */
    .forum-post-content div.note,
    .forum-post-content div.warning,
    .forum-post-content div.error,
    .forum-post-content div.success,
    .forum-post-content div.info {
        padding: 10px 15px;
        border-left: 4px solid;
        border-radius: 4px;
        margin: 15px 0;
    }

    .forum-post-content div.note {
        background: #e3f2fd;
        color: #0d47a1;
        border-color: #1976d2;
    }

    .forum-post-content div.warning {
        background: #fff3e0;
        color: #e65100;
        border-color: #ff9800;
    }

    .forum-post-content div.error {
        background: #ffebee;
        color: #b71c1c;
        border-color: #f44336;
    }

    .forum-post-content div.success {
        background: #e8f5e9;
        color: #1b5e20;
        border-color: #4caf50;
    }

    .forum-post-content div.info {
        background: #e1f5fe;
        color: #01579b;
        border-color: #03a9f4;
    }

    /* =========================
CODE BLOCKS
========================= */
    .forum-post-content pre.code,
    .forum-post-content pre.cs-code,
    .forum-post-content pre.lua-code,
    .forum-post-content pre.json-code,
    .forum-post-content pre.xml-code,
    .forum-post-content pre.php-code,
    .forum-post-content pre.js-code,
    .forum-post-content pre.sql-code {
        color: black;
        border-radius: 5px;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
    }

    .forum-post-content code {
        background: #eee;
        padding: 3px 5px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        margin: 0 2px;
    }

    /* =========================
BUTTONS & BADGES
========================= */
    .forum-post-content button {
        background: #1a73e8;
        color: #fff;
        border: none;
        padding: 8px 14px;
        border-radius: 4px;
        cursor: pointer;
        margin: 8px 0;
    }

        .forum-post-content button:hover {
            background: #0c5dc0;
        }

    .forum-post-content .badge,
    .forum-post-content .tag,
    .forum-post-content .pill {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.85em;
        margin: 3px 3px 6px 0;
    }

    .forum-post-content .badge {
        background: #2196f3;
        color: #fff;
    }

    .forum-post-content .tag {
        background: #9c27b0;
        color: #fff;
    }

    .forum-post-content .pill {
        background: #ff5722;
        color: #fff;
    }

    /* =========================
INTERACTIVE
========================= */
    .forum-post-content details {
        margin: 10px 0;
    }

        .forum-post-content details summary {
            cursor: pointer;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .forum-post-content details[open] summary {
            margin-bottom: 10px;
        }

    /* =========================
LAYOUT
========================= */
    .forum-post-content .row {
        display: flex;
        flex-wrap: wrap;
        margin: 10px -5px;
    }

    .forum-post-content .col {
        flex: 1;
        padding: 5px;
        min-width: 100px;
    }

    .forum-post-content .flex {
        display: flex;
        margin: 10px 0;
    }

    .forum-post-content .box {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 0;
    }

    .forum-post-content .container {
        padding: 15px;
        margin: 10px 0;
    }

    /* =========================
IMAGES & MEDIA
========================= */
    .forum-post-content img,
    .forum-post-content audio,
    .forum-post-content video,
    .forum-post-content iframe {
        max-width: 100%;
        margin: 10px 0;
        border-radius: 5px;
        margin-right: 11px;
    }

    /* =========================
TABLE OF CONTENTS / ICONS / EMOJIS
========================= */
    .forum-post-content i {
        font-style: normal;
    }

    .forum-post-content .emoji {
        font-size: 1.2em;
        margin: 0 2px;
    }

    .forum-post-content a {
        display: inline;
    }

.icon {
    display: block;
    margin-top: -2px;
}

.github-repo {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    max-width: 450px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin: 12px 0;
    transition: box-shadow 0.2s ease-in-out;
}

    .github-repo:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.repo-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.repo-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    border: 1px solid #ccc;
}

.repo-title {
    display: flex;
    flex-direction: column;
    margin-top: -5px;
}

    .repo-title a {
        font-size: 18px;
        font-weight: bold;
        color: #0366d6;
        text-decoration: none;
    }

        .repo-title a:hover {
            text-decoration: underline;
        }

.repo-owner {
    font-size: 12px;
    color: #555;
}

.repo-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
}

.repo-stats {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

    .repo-stats span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.repo-updated {
    font-size: 12px;
    color: #888;
}

.steam-card {
    display: flex;
    align-items: center;
    background: #1b2838;
    border: 1px solid #171a21;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    color: #c7d5e0;
    font-family: Arial, sans-serif;
    transition: background 0.2s;
}

    .steam-card:hover {
        background: #2a475e;
    }

.steam-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid #66c0f4;
}

.steam-info b {
    font-size: 1.1em;
    display: block;
    margin-bottom: 4px;
}

.steam-info a {
    color: #66c0f4;
    text-decoration: none;
}

    .steam-info a:hover {
        text-decoration: underline;
    }

.steam-info {
    line-height: 1.4em;
}

.github-card {
    display: flex;
    gap: 12px;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    max-width: 400px;
    background: #f9f9f9;
}

.github-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.github-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .github-info a {
        text-decoration: none;
        color: #0366d6;
    }

ul.member-list > li {
    margin-left: -30px;
}

    ul.member-list > li > img {
        width: 25px;
        height: 25px;
        border-radius: 0px;
        margin-left: 10px;
        margin-top: 20px;
    }

    ul.member-list > li > a {
        display: block;
        margin-left: 47px;
        margin-top: -49px;
    }

    ul.member-list > li > span#created_at {
        display: block;
        margin-left: 47px;
        margin-top: -29px;
    }

ul.member-list {
    margin: 0px;
}

a.badge {
    font-size: 12px !important;
}

.user-image {
    padding-left: 10px;
    padding-bottom: 20px;
    display: block;
    border-right: 1px solid #eee;
    width: 51px;
    padding-top: 20px;
    padding-right: 10px;
    background: #f9f9f9;
}

a.buttonC {
    margin-top: -31px !important;
}


span#none {
    padding-top: 20px;
    display: block;
    padding-left: 10px;
    font-family: "Roboto";
    color: gray;
    font-size: 13px;
}

.user_profile_pic {
    padding: 0px;
    margin: 0px;
    padding-left: 5px;
    border-right: 1px solid #eee;
    width: 36px;
    display: block;
    background: #f9f9f9;
    padding-top: 20px;
    padding-bottom: 23px;
    margin-left: -2px;
}

    .user_profile_pic > img {
        width: 25px;
    }