@font-face {
    font-family: 'gg sans';
    src: url('/static/fonts/gg-sans-2/gg-sans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Inter', 'gg sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

/* Mobile-first responsive design */
@media screen and (max-width: 768px) {
    /* Navigation adjustments */
    #navbar {
        font-size: 12px;
        padding: 5px;
    }

    /* Content adjustments */
    .catalog-item {
        width: 100%;
    }
    
    .popular_board-item {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.2s ease;
    }
    
    /* Form adjustments */
    .form-row {
        flex-direction: column;
    }
    
    .board-select {
        width: 100%;
    }
    
    /* Image sizing */
    .catalog-image img {
        max-width: 100%;
        height: auto;
    }
    
    /* Stats section */
    .stats-container {
        flex-direction: column;
    }
    
    .stat-item {
        width: 100%;
        margin: 5px 0;
    }
}

/* Additional breakpoint for very small screens */
@media screen and (max-width: 480px) {
    .board-directory .categories {
        grid-template-columns: 1fr;
    }
    
    .search-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .controls-right {
        width: 100%;
    }


    /* Mobile: make selects match dark theme (avoid white dropdowns) */
    .search-box.settings select,
    .search-box.settings .form-select,
    .search-box.settings select#order-ctrl,
    .search-box.settings select#size-ctrl,
    .search-box.settings select#teaser-ctrl,
    .search-box.settings select#file-info-ctrl {
        background-color: #111 !important;
        color: #e6e6e6 !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 10px;
        padding: 6px 10px;
        min-height: 36px;
        box-shadow: none;

        /* helps reduce iOS default styling (not perfect but improves) */
        -webkit-appearance: none;
        appearance: none;
        background-image: none;
    }

    .search-box.settings select:focus {
        outline: none;
        border-color: #5EC10A !important;
        box-shadow: 0 0 0 3px rgba(94, 193, 10, 0.18);
    }

    /* Option menu styling (best-effort; iOS/Safari may limit this) */
    .search-box.settings select option {
        background: #111;
        color: #e6e6e6;
    }

    /* Make the “Threaded” button feel consistent */
    .search-box.settings .view-option {
        padding: 6px 12px;
        border-radius: 10px;
        border-color: #2a2a2a;
        background-color: #121212;
        color: #e6e6e6;
    }

    .search-box.settings .view-option.active {
        background-color: #5EC10A;
        border-color: #5EC10A;
        color: #0b0b0b;
    }


}
:root {
    --background-color: ##10151A;
    --text-color: #e0e0e0;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}
/* Light Mode */
body.light-mode {
    background-color: #EDEDED;
    color: #333;
}

body.light-mode .board-title {
    color: #666;
}

body.light-mode header,
body.light-mode footer,
body.light-mode .base_board-item,
body.light-mode .profile-item,
body.light-mode .reply-box,
body.light-mode .catalog-list,
body.light-mode .group-item,
body.light-mode .floating-reply-box,
body.light-mode .floating-reply-box textarea,
body.light-mode .reply-form-buttons,
body.light-mode .user-item,
body.light-mode .form-row,
body.light-mode .reply-box-1lvl,
body.light-mode .container-login,
body.light-mode .post-box-login, 
body.light-mode .categories-container,
body.light-mode .profile-main,
body.light-mode .group-card {
    background-color: #ffffff;
    background: #ffffff;
    color: #333333;
}
body.light-mode .post-box,
body.light-mode .post-preview-manager,
body.light-mode .post-content-wrapper {
    color: #333333;
    background-color: #ffffff;
    background: #ffffff;
}

body.light-mode .post-metadata,
body.light-mode .post-content {
    color: #555555;
}

body.light-mode .reply,
body.light-mode .board-directory,
body.light-mode .board-directory h4,
body.light-mode .popular_boards-table h4,
html.light-mode .popular_boards-table h4,
body.light-mode .stats-section h4,
body.light-mode .thread,
body.light-mode .catalog-list h4 {
    background-color: var(--uploaded-theme-panel, #DCDCDC);
    color: var(--uploaded-theme-text, inherit);
    border: 1px solid var(--uploaded-theme-line, #DCDCDC);
}
body.light-mode .popular_boards-table,
body.light-mode .stats-section,
body.light-mode .catalog-list,
body.light-mode .post-box,
body.light-mode .post-data-id {
    background-color: var(--uploaded-theme-panel-soft, #fff);
    border: 1px solid var(--uploaded-theme-line, #DCDCDC);
}
body.light-mode .stat-item {
    background-color: #fff;
}

body.light-mode .reply-box.highlight {
    background-color: #f6f9d1;
}

body.dark-mode .reply-box.highlight {
    border: solid 1px #e0e0e0;
}

/* Dark mode toggle background (your existing style) */

/* Dark Mode */
body.dark-mode {
    background-color: #10151A;
    /* background-color: #232426; */
    color: #C4C7C5;
}
body.dark-mode .default-wallet-card {
    background-color: #10151A;
    /* background-color: #232426; */
    color: #e0e0e0 !important;
}
body.dark-mode .card-header {
    background-color: #10151A;
    /* background-color: #232426; */
    color: #e0e0e0 !important;
}
body.dark-mode .all-groups-section {
    background-color: #10151A;
}
body.dark-mode .thread {
    background-color: #10151A;
}
body.dark-mode .categories {
    background-color: #10151A;
}
body.dark-mode .category {
    background-color: #10151A;
}
body.dark-mode .popular_boards-table {
    background-color: #10151A;
}
body.dark-mode .popular_board-item,
body.dark-mode .popular_board-image {
    background-color: #10151A;
}
body.dark-mode .board-title,
body.dark-mode .profile-action,
body.dark-mode .profile-quick-actions {
    color: #C4C7C5 !important;
}
body.dark-mode header,
body.dark-mode footer,
body.dark-mode .profile-item,
body.dark-mode .banner-item,
body.dark-mode .janny-reports,
body.dark-mode .groups-list,
body.dark-mode .banner-info,
body.dark-mode .banner-approval-item,
body.dark-mode .pending-banners,
body.dark-mode .approval-info,
body.dark-mode .transaction-section,
body.dark-mode .transaction-log,
body.dark-mode .wallet-section,
body.dark-mode .modal-content,
body.dark-mode .card,
body.dark-mode .post-preview,
body.dark-mode .post-preview-content,
body.dark-mode .post-preview-header,
body.dark-mode .data-post-id,
body.dark-mode .profile-list,
body.dark-mode .groups-list,
body.dark-mode .adBannerFormContainer {
    background-color: #10151A;
    background: #10151A;
    color: #ffffff;
}

body.dark-mode .user-profile {
    color: #ffffff;
}

body.dark-mode .board-directory h4 {
    background-color: #10151A;
    background: #10151A;
    color: #ffffff;
}
body.dark-mode .post-metadata {
    color: #ffffff;
}

body.dark-mode .newsUpdate,
body.dark-mode .reply-preview-container,
body.dark-mode .preview-container,
body.dark-mode .floating-reply-box,
body.dark-mode .dropdown-menu,
body.dark-mode .reply-box,
body.dark-mode .search-controls {
    background-color: var(--uploaded-theme-panel-soft, #10151A);
    color: var(--uploaded-theme-text, #C4C7C5);
    border-color: var(--uploaded-theme-line, transparent);
}
body.dark-mode .post-content-wrapper {
    color: #C4C7C5;
}

body.dark-mode .post-box {
    color: #C4C7C5;
}

body.dark-mode .report-item {
    background-color: #10151A;
    color: #ffffff;
}

body.dark-mode h4 {
    color: #ffffff;
    background-color: rgb(30, 31, 31);
}

body.dark-mode .popular_boards-table h4,
body.dark-mode .stats-section h4,
body.dark-mode .catalog-list h4 {
    background-color: var(--uploaded-theme-panel, rgb(30, 31, 31));
    color: var(--uploaded-theme-text, #ffffff);
    border-color: var(--uploaded-theme-line, transparent);
}

body.dark-mod .newsUpdateContainer,
body.dark-mod .newsUpdates {
    color: #C4C7C5;
}

body.dark-mod .post-header,
body.dark-mod .post-date {
    background-color: #C4C7C5;
    font-weight: bold;
}

body.dark-mode .reply-box-1lvl,
body.dark-mode .reply,
body.dark-mode .base_board-item,
body.dark-mode .profile-item,
body.dark-mode .reply-form,
body.dark-mode .banner-approval-item,
body.dark-mode .reply-content {
    background-color: var(--uploaded-theme-panel-soft, #10151A);
    color: var(--uploaded-theme-text, inherit);
    border-color: var(--uploaded-theme-line, transparent);
}
body.dark-mode .nested-replies {
    background-color: var(--uploaded-theme-bg, #10151A);
}
body.dark-mode .reply {
    border: 1px solid var(--uploaded-theme-line, #10151A);
    background-color: var(--uploaded-theme-panel-soft, #10151A);
}

body.dark-mode .no-image {
    background-color: #10151A;
    background: #10151A;
}

body.dark-mode .base_board-item:hover,
body.dark-mode .catalog-item:hover,
body.dark-mode .profile-item:hover {
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

/* Mode-Specific Toggle Switch */

/* Position sun icon to start on the left */


/* Light mode: show the sun, slide the moon out */
body.light-mode .sun-icon {
    transform: translateX(0);
}
body.light-mode .moon-icon {
    transform: translateX(100%);
}

/* Dark mode: show the moon, slide the sun out */
body.dark-mode .sun-icon {
    transform: translateX(-100%);
}
body.dark-mode .moon-icon {
    transform: translateX(0);
}

body {
/* 3. Add accessible line-height */
    line-height: 1.5;
/* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}
p {
    margin-bottom: 0px;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}
/* END USER AGENT CUSTOM CSS RESET */
/* start of Base bards */
.base_boards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.base_board-item {
    background-color: #10151A;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}
.base_board-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.base_board-link {
    text-decoration: none;
    color: #f5f5f5;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.base_board-slug {
    font-size: 1.2em;
    color: #ffc107; /* Example color, can be adjusted */
}
.base_board-title {
    font-size: 1em;
    color: #d4d4d4;
}
.base_board-description {
    font-size: 0.9em;
    color: #000000;
}

/* Profile page wallets */
.toggleboard {
    color: #ffffff
}
.toggle-form {
    cursor: pointer;
}
.toggle-form:hover {
    color: #007bff;
}

.profile-list {
    display: flex;
    flex-direction: column;
}

.profile_base_boards-list {
    flex-direction: row;
    margin: 20px auto;
}
.profile-item, .base_board-item {
    background-color: #10151A;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* max-width: 100%; /* Ensures items adapt within the grid */
    margin: 0 auto;
    width: min-content;
}
.profile-item:hover, .base_board-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.board-link {
    text-decoration: none;
    color: #f5f5f5;
    font-weight: bold;
    text-align: center;
}
/* Profile page wallets */

.wallets-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.profile-item {
    background-color: #10151A;
    border-radius: 8px;
    padding: 10px;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wallet-item {
    background-color: #10151A;
    border-radius: 8px;
    line-height: 1em;
    padding: 10px;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.dialog-header {
    color: #5EC10A !important;}



.board-navigation {
    padding-bottom: 10px;
    color: #ffffff;
    text-align: left;
    padding-left: 10px;
}
#settings {
    flex: 0 1 auto;
    text-align: right;
}

.search-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.controls-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.ctrl-wrap {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    white-space: nowrap;
}
.ctrl-wrap select {
    margin-left: 5px;
}
/** start of catalog styles */
.catalog {
    margin: 40px 0;
}


.catalog-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	max-width: 980px;
	border: #232426 solid;
	margin: 0 auto;
}

.catalog-list h4 {
    background-color: #232426;
    grid-column: 1 / -1;
    color: #ffffff;
    font-weight: bold;
    padding: 5px;
    margin: 0;
    text-align: left;
}

.catalog-list.large-images .catalog-image img {
    max-width: 100%;
    max-height: 250px;
    transition: all 0.3s ease;
}
.catalog-list .catalog-image img {
    max-width: 150px;
    max-height: 150px;
    transition: all 0.3s ease;
}

.catalog-item {
	display: block;
	border-radius: 5px;
	overflow: hidden;
}

.catalog-item a {
    display: block;
    text-decoration: none;
}

.catalog-item:hover {
    transform: translateY(-2px);
    
}
.catalog-link {
    text-decoration: none;
    color: #f5f5f5;
    display: block;
}
.catalog-meta {
    font-size: 0.8em;
    color: #666;
    margin: 4px 0;
    text-align: center;
}

.reply-thumbnail {
    display: block;
    float: left;
    margin: 10px; /* Adjust as needed */
    max-width: 150px; 
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}
.wallet-title {
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wallet-board {
    font-size: 0.8em;
    color: #ffffff;
    font-weight: bold;
}

.catalog-image {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.no-image {
    color: #aaaaaa;
    font-size: 0.9em;
    text-align: center;
}
.catalog-info {
    padding: 10px;
}

.catalog-title {
    font-weight: bold;
    margin: 5px 0;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-title { grid-column: 1 / -1; }

.catalog-snippet {
    font-size: 0.8em;
    text-align: center;
    color: #b8b8b8;
    margin-top: 5px;
    word-wrap: break-word;
    width: 100%;
    display: block;
    padding: 0 10px;
}
.catalog-snippet a { color: inherit; }
.view-options-container, .view-toggle {
    position: relative;
    z-index: 20; /* Higher than the badge's z-index */
}
.catalog-board {
    text-align: center;
    margin-bottom: 5px;
    /* font-size: 0.8em; */
    color: #5EC10A;
    font-weight: bold;
}
#catalog-board a { color: #5EC10A !important; }
.no-image {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .catalog-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .catalog-item {
        width: 100%;
        margin: 5px 0;
    }
}

/** End of catalog styles */
/* Below are all of 4chain styles */
/* PAGE BACKGROUND AND GENERAL COLORS */
body {
    margin: 1rem;
    padding: 0;
}
.greentext {
    color: #789922;
}
/* HEADER STYLES */
header {
    /* background-color: #1a1a1a; */
    color: #949191;
    padding: 10px 0;
    text-align: center;
    font-size: 24px;
}
/* NAVIGATION BAR STYLES */

#navbar {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: transparent;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-family: 'gg sans';
}
#navbar a {
    color: #5EC10A; 
    text-decoration: none;
    margin: 0 2px; 
}
#navbar .dropdown-menu {
    min-width: auto;
    padding: 5px;
    margin-top: 5px;
    border-radius: 0;
}

#navbar .dropdown-item {
    padding: 3px 10px;
}

.navbar-profile-pic-dropdown {
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Adjust size as needed */
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
/* Ensure dropdown toggle doesn't have default link styling if it's an image */
#navbar .dropdown-toggle::after {
    display: none; /* Hide default Bootstrap dropdown arrow if image is the toggle */
}


.posteruid {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.85em;
    color: #C4C7C5;
}

/* Individual post styling */
.post {
    display: flex;
    gap: 10px;
    width: 90%; /* or fixed width, adjust as needed */
    margin-bottom: 10px; /* Spacing between posts */
    border: 1px solid #d9bfb7;
    background-color: #f0e0d6; /* Optional: background color */
    border: 1px solid #ccc; /* Optional: border */
    padding: 10px;
    align-self: flex-start; /* Ensures the post aligns to the left */
}

/* POST AND THREAD STYLES */
.post-file {
    float: left;
    margin-right: 15px;
    padding-left: 10px;
}
.post-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.post-file.post-image {
    flex: 0 0 auto;
}
.post-metadata.post-references {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 0.9em;
}
.post-no {
    font-size: clamp(1.05rem, 2.2vw, 1.1rem) !important;
    font-weight: 600 !important;
}
.post-number {
    color: #ffffff;
    text-decoration: none;
}
.post-number:hover {
    color: #d00;
}
.post-title {
    color: #cc1105;
    margin-bottom: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-left: inherit;
}

/* Individual reply box */
.reply {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px;
    word-wrap: break-word; /* Wrap long words or URLs */
    box-sizing: border-box;
}
.reply-content {
    gap: 15px;
    display: flex;
    margin-top: 5px;
    word-wrap: break-word;
    word-break: break-word;
    text-align: left;
}

.reply-file {
    flex: 0 0 auto;
}

.reply-text-content {
    flex: 1;
}
.reply-content span {
    display: inline;
    white-space: normal;
}
.reply-content br {
    display: none;
}
.reply .post-image-container {
    float: none; /* Ensure it doesn't interfere with text */
    margin: 5px 0;
}

.thread {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
    border-bottom: 1px solid #ddd;
}
.thread:target {
    background-color: #f0f0f0;  /* Light grey background to highlight the post */
    border: 1px solid #ccc;     /* Optional border for visibility */
}
/* Ensure the thread container is set to display flex to align children vertically */

.thread-starter {
    padding: 10px;
}

/* LINK STYLES */
a {
    color: #000; 
    text-decoration: none;
}
a {
    margin: 0 2px;
    text-decoration: none;
}

a {
    color: #5EC10A;
}
a:hover {
    text-decoration: underline;
}
a:hover {
    text-decoration: underline;
}
a:hover {
    text-decoration: underline;
}
/* SPECIAL TEXT STYLES */
/* FOOTER STYLES */
footer {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
}
/* MISC STYLES */
.board-title {
    text-align: center;
    font-size: xx-large; /* Adjust as per your preference */
    font-weight: bolder;
}
.box-form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.op-content {
    padding: 10px;
    margin-bottom: 10px;
}
.thread-starter .op-content {
    /* display: inline; */
    overflow: auto;
}


/* Highlight effects for both hover and click */
body .reply-box:target,
body [href^="#reply-"]:hover ~ [id^="reply-"] {
    background-color: #10151A;
    transition: background-color 0.2s ease;
}

/* Keep the link color change on hover */
[href^="#reply-"]:hover {
    color: #a6d119;
}

.reply-header {
    font-weight: bold;
}
.quote {
    color: #789922;
}
.quote-link {
    color: #d00;
    text-decoration: none;
}

.thread-container {  
    margin-left: 10px;
    display: flex;
    border: 0px;
    flex-direction: column;
}

.replies {
    padding-left: 10px;
    margin-top: -20px;
}
.thread-container .post-and-replies .replies {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align replies to the start of the container */
    width: fit-content;
    margin-top: 20px;
}

.replies, .nested-replies {
    display: flex;
    flex-direction: column; /* This will stack the child elements (replies) vertically */
}
/* Ensure replies are wrapped under the post image */


/* Specific adjustments for the first two replies to be next to each other under the post image */
.replies > .reply-box:nth-child(1),
.replies > .reply-box:nth-child(2) {
    flex-basis: 50%; /* This makes the first two replies take half the container width */
}

/* Style for nesting replies within other replies for hierarchical view */
.nested-replies {
    border-left: 2px solid #ddd; /* Visual separator for nested replies */
    padding-left: 20px; /* Indent nested replies */
    background: transparent !important;
}
.nested-replies .reply-box {
    background-color: var(--uploaded-theme-panel-soft, transparent);
  /* Slightly lighter than parent for visual hierarchy */
    border-left: 2px solid var(--uploaded-theme-accent, #789922);
}

.reply-box.reply-box-1lvl {
    background-color: var(--uploaded-theme-panel-soft, #2C2E32);
    color: var(--uploaded-theme-text, inherit);
    border-color: var(--uploaded-theme-line, transparent);
}

/* Specific styling for smaller reply boxes */
.reply-box {
    width: fit-content; /* Full width for replies to ensure they stack vertically */
    padding: 10px;
    margin-top: 10px; /* Space between replies */
    background-color: var(--uploaded-theme-panel-soft, #f9f9f9); /* Light background for replies */
    color: var(--uploaded-theme-text, inherit);
    border-color: var(--uploaded-theme-line, transparent);
}
.reply-metadata, 
.reply-content {
    background: inherit;
}
.reply-metadata {
    display: flex;
    gap: 8px;
    white-space: nowrap;
    font-size: small;
    justify-content: flex-start;
    width: fit-content;
    margin-bottom: 10px;
}

.reply-metadata > * {
    /* display: inline-flex; */
    align-items: left;
}

.reply-text {
    display: flex;
    flex-direction: column;
}

.nav-bar {
        margin: 0 auto;
}
.nav-bar a {
    text-decoration: none;
    color: #0d6efd;
    font-weight: bold;
}
.nav-link, .search-button {
    text-decoration: none;
    color: #5EC10A;
    font-weight: bold;
    margin: 0 auto;
}

.btn-danger {
    background: linear-gradient(to right, #dc3545, #dc3545);
    border: none;
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
    color: #fff;

    border-color: #dc3545;
}

.btn-danger:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}


.search-box {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}
.search-box form {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 5px;
    max-width: 400px;
}

.search-input {
    padding: 10px 15px;
    border-radius: 8px;
    border: 2px solid #228b22;
    background-color: #E8F2D0;
    margin-right: 5px;
}
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.glow-outline-button {
    padding: 12px 28px;
    font-weight: bold;
    color: #00ff88;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.glow-outline-button::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(135deg, #00ff88, #00d4ff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    filter: blur(4px);
}

/* .glow-outline-button:hover {
    transform: scale(1.05);
    color: #00f7ff;
} */


/* .glow-outline-button {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    background: linear-gradient(135deg, #00ff88, #00d4ff);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), 0 0 30px rgba(0, 212, 255, 0.5);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
} */

.glow-outline-button:hover {
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.8), 0 0 50px rgba(0, 212, 255, 0.7);
    transform: scale(1.05);
}


.btn-search-gradient {
    border-radius: 20px;
    padding: 8px 16px;
    margin-left: 5px;
}


.btn-search-gradient {
    background: linear-gradient(to right, #5EC10A, #F5E64D);
    border: none;
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
    margin-right: 3px;
}

.btn-search-gradient:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

    /* for profile buttons */
.btn-gradient {
    background: linear-gradient(to right, #5EC10A, #F5E64D);
    border: none;
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.btn-gradient:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
/* Post Image expand */

.post-text {
    flex: 1; /* Take up remaining space */
    padding-left: 10px;
}

.post-number, .reply-link, .report-link {
    display: inline-flex;
}
.post-and-replies {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.post-thumbnail {
    max-width: 250px;
    height: fit-content;
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-thumbnail.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1000;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.post-text-replies-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.expanded {
    z-index: 1000; 
    max-width: 100vw !important; 
    width: auto !important; 
    height: auto;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    margin: 0;
    padding: 0;
    float: none;
    transition: all 0.3s ease;
}
.expanded::before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

.post-image.thumbnail {
    width: 15vw; 
    height: auto;
    transition: all 0.3s ease; 
}
.post-image.expanded {
    width: 100%;  
    height: auto;
    transition: all 0.3s ease; 
}

#createThreadForm {
    display: none;
}
#createThreadForm.visible {
    display: block !important;
    max-width: 60%;
}


.thumbnail-reply {
    height: 150px; /* Height for initial thumbnail view */
    max-width: 100%; /* Ensure the image scales properly within its container */
    object-fit: contain; /* Maintain aspect ratio */
    transition: all 0.3s ease; /* Smooth transition for resizing */
    cursor: pointer; /* Show that the image is clickable */
}
.image-expanded {
    max-width: 100%; /* Ensure expanded images take up the full width */
    max-height: 100%; /* Ensure expanded images take up the full height */
    display: block;
    width: 100%; /* Full width when expanded */
}
.post-image-container {
    position: relative;
}

.post-image-popup {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* display: none; */
    z-index: 999;
}
.post-image-popup:target {
    display: block;
}
.post-image-popup-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    z-index: 1000;
}
.close-image {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    z-index: 1001;
}

/* Compact form styling */
/* Compact Modal Styling */
.compact-modal {
    max-width: 350px;
    margin: 0;
    position: fixed;
    top: 50px;
    right: 50px;
}

.compact-header {
    padding: 5px 10px;
    background-color: #333;
    border-bottom: 1px solid #444;
}

.compact-header h5 {
    font-size: 14px;
    margin: 0;
}

.compact-body {
    padding: 8px;
}

.compact-form {
    font-size: 13px;
}

.compact-form-row {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.compact-switch {
    margin: 0;
}

.small-text {
    font-size: 12px;
    margin: 0;
}

.compact-input, .compact-select {
    height: 24px;
    padding: 2px 5px;
    font-size: 12px;
}

.compact-textarea {
    font-size: 13px;
    padding: 4px;
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
}

.compact-textarea-container {
    margin-bottom: 5px;
}

.compact-file-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.compact-file {
    font-size: 12px;
    height: auto;
    padding: 2px;
    width: auto;
    flex-grow: 1;
}

.compact-wallet-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
}

.compact-wallet-section {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Restore Bootstrap close icon (Firefox-safe) */


/* Alert close button - cross-browser safe */
.alert .btn-close {
    background: transparent !important;
    border: none;
    width: auto;
    height: auto;
}

/* Optional: If you want a green "X" */
.alert .btn-close::before {
    content: '\00d7'; /* multiplication sign × */
    display: inline-block;
    font-size: 1.1rem;
    color: #155724; /* same green as alert text */
}

.btn-close-sm {
    font-size: 0.8rem;
    padding: 0.25rem;
}

.compact-button-row {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 5px;
}

/* Make sure the modal stays on top and is draggable because im dumb */
#replyModal {
    z-index: 1050;
}
.modal {
    z-index: 9999;
}

.modal.non-blocking {
    pointer-events: none;
}

.modal.non-blocking .modal-dialog {
    pointer-events: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Override Bootstrap's body styles when modal is open */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}


/* end of replyModal */



.contestSection {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}
.center_banner {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* end Post Image expand */
.center_4chain {
    text-align: center;
    margin: 20px auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.protected-image {
    justify-content: center;
    align-items: center;
    text-align: center
}
.adSection {
    text-align: center;  /* This will center the content of the ad section */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    width: 100%;
    margin-bottom: 5px;
}

#adSection {
    text-align: center;  /* This will center the content of the ad section */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-bottom: 0px;
    width: 100%;
}
.center_ad {
    display: flex;
    justify-content: center;
    width: 100%;
}
#newsUpdates {
    max-width: 300px;  /* Adjust based on your design preference */
    margin: 0 auto;    /* This will center the container if it's less than the width of its parent container */
    background-color: transparent; 
    border: none; 
    text-align: left; /* Center align the content */
    font-size: 10px;
}
#newsUpdates ul {
    list-style-type: none;
    padding-left: 0;
}

#startthread_home a { color: #5EC10A !important; }
#startthread_home {
    max-width: 300px;  /* Adjust based on your design preference */
    margin: 0 auto;    /* This will center the container if it's less than the width of its parent container */
    background-color: transparent;
    border: none;
    font-weight: bold;
    font-size: 20px;
    text-align: center; /* Center align the content */
    color: #5EC10A
}
#startthread_home ul {
    list-style-type: none;
    padding-left: 0;
}


.thread-starter img.thumbnail {
    float: left;
    object-fit: contain;
    max-width: 100%;
}
.thumbnail {
    margin-right: 10px;
    float: left;
    object-fit: contain;
}
.thumbnail-reply {
    margin-right: 10px;
    float: left;
    object-fit: contain;
    height:fit-content;
}

.nav-link {
    display: inline;
}
.modal-backdrop.show {
    opacity: 0;
}
.form-row {
    color: #5EC10A;
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}


#replyThreadForm {
    width: 100%;
    padding: 15px;
    margin: 0 auto;
    border-radius: 4px;
    max-width: 60%;
}

#createThreadForm {
    max-width: 60%;
    margin: auto;
    margin-bottom: 5px;
    /* background-color: #4C4C4D; */
}
.header 
.form-group input, .form-group .textarea
.greentext {
    color: green;
}
.reply-reference {
    color: #5EC10A;
    margin-bottom: 5px;
}
.reply-box::after {
    content: "";
    display: table;
    clear: both;
}
.replies > .reply-box:first-child .reply-metadata::before {
    content: "";
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trophy' viewBox='0 0 16 16'><path d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935z'/></svg>");
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    margin-top: 5px;
}


/* Reply toggle */
.reply-form {
    margin-top: 10px;
    padding: 10px;
    background-color: #dddddd;
    border-radius: 5px;
}
.reply-form form {
    display: inline-block;
    flex-direction: column;
}
.reply-form textarea {
    margin-bottom: 10px;
}


/* Reply toggle */
.post-title {
    color: white; /* Replace 'white' with your desired color */
}
.board-image {
    max-width: 20%;  /* Ensures the image doesn't exceed the container width */
    height: auto;     /* Maintains the aspect ratio of the image */
    display: block;   /* Displays the image as a block-level element */
    margin: 20px auto; /* Adds margin and centers the image */
}

.ad-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#adSection .ad-gif {
    max-width: 100%;  /* Ensures the image doesn't exceed the container width */
    height: auto;     /* Maintains the aspect ratio of the image */
}
.container {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 15px;
}
.board-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    width: 100%;
    overflow-x: hidden;
    padding: 0 15px;
}
/* Container for the main post */
.post-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.image-and-content {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping */
    align-items: flex-start;
    gap: 10px;
}


.form-actions {
    display: flex;
    justify-content: space-between;
}
#createThreadLink {
    display: block;
    text-align: center;
    margin: 20px 0;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}

.form-group label {
    flex: 1;
    margin-right: 10px;
}
.create-thread-section {
    background-color: #eef2ff;  /* Same as the page background */
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #ccd0d4;  /* Add a subtle border */
    margin-bottom: 20px;  /* Separate it from the threads below */
    position: sticky;
    top: 0;
    z-index: 100;  /* Ensure it's above other content */
}

.tripcode {
    color: #228854;
    font-weight: bold;
}

.tripcode-blue {
    color: #0000FF;
}
.tripcode-green {
    color: #008000;
}
.tripcode-red {
    color: #FF0000;
}

/* For pinned threads */
.pinned-post {
    border-left: 3px solid #4CAF50 !important;
}

.pin-indicator {
    display: flex;
    align-items: center;
    color: #4CAF50;
    font-weight: bold;
    margin-bottom: 5px;
}

.pin-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.pin-thread-btn {
    background: none;
    border: none;
    color: #4CAF50;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
}

.pin-thread-btn:hover {
    background-color: rgba(76, 175, 80, 0.1);
    border-radius: 3px;
}


/* end for pinned threads */

.header a:hover {
    text-decoration: underline;
}
#navbar a:hover {
    text-decoration: underline;
}

.header {
    background-color: #1a1a1a;
    color: #949191;
    padding: 10px 0;
    text-align: center;
    font-size: 24px;
}
.header a {
    margin: 0 15px;
    text-decoration: none;
}
.form-group input, .form-group textarea {
    flex: 2;
}
.footer {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
}


/* Yours Wallet styling */
container-button-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f8f9fa;
}
.container-button {
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-left: 5px;
}
.container-button h1 {
    margin-bottom: 1rem;
    color: #333;
}
.container-button input, .container-button button {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.container-button button {
    color: white;
    border: none;
    cursor: pointer;
    background-image: linear-gradient(45deg,#a1ff8b,#34d399);
}
.container-button button:hover {
    background-color: #0056b3;
}
/* End Yours Wallet styling */
/* Form Post styling */
.content {
    height: 100%;
    width: 100%;
}
.form-container {
    max-width: fit-content;
    margin: auto;
    background-color: #4C4C4D;
    display: inline-block
}
.flexbox-form {
    margin: auto;
    border: 1px solid #ccd0d4;
    vertical-align: middle;
    background-color:  #dddddd;
}
.flexbox-form-createthread {
    margin: auto;
    vertical-align: middle;
}
label {
    font-weight: bold;
    padding: 10px 10px 10px 10px;
    color: #5EC10A;
    text-align: center;
    margin: auto;
}
/* End Form Post styling */
.parent {
    border: 1px solid #ccd0d4;
    margin: 0 auto;
    text-align: center;
}
.child {
    display: inline-block;
    padding: 1rem 1rem;
    vertical-align: middle;
}

.custom-form {
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #E6E6FA; 
    padding: 10px;
}

.board-select {
    min-width: 200px;
    margin-left: 10px;
}

.form-row {
    display: flex;
    align-items: stretch; 
    margin-bottom: 1px;
    background-color: #4C4C4D;
}

.form-label-profile-picture {
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    display: flex;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.form-label {
    background-color: rgb(30, 31, 31);
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    display: flex;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.content-label {
    background-color: #ccd0d4; 
    height: auto;
}
.form-input {
    flex: 1;
    padding: 8px;
    margin-left: 5px;
    box-sizing: border-box;
}
.form-textarea-container {
    display: flex;
    align-items: stretch; 
}
.form-textarea {
    flex: 1;
    padding: 8px;
    margin-left: 5px;
    height: 150px; /* Matches the height of the textarea */
    resize: none; /* Prevents resizing for consistency */
    border: 1px solid #ccc;
}
.captcha-box {
    display: flex;
    align-items: center;
}
.captcha-btn, .captcha-help {
    padding: 8px 10px;
    margin-left: 5px;
    background-color: #D3D3D3;
    border: 1px solid #ccc;
    cursor: pointer;
}
.captcha-input {
    margin-left: 5px;
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
}

/* Log In Page /accounts/login/ */
.container-login {
    width: auto;
    align-content: center;
    margin: auto auto auto auto;
    padding: 1rem 1rem 1rem 1rem;
}
.post-box-login {
    overflow: auto;
    border: 1px solid #ccd0d4;
    padding: 10px;
    margin-top: 10px;
    align-content: center;
}
.thread-starter-login {
    overflow: auto;  
    padding: 10px;
    align-content: center;
}
/* End Log In Page /accounts/login/ */

/* preview */
/* Post Preview Styles */

    /* Report link styling for threaded_post.html (similar to nested_view) */
    .post-box { /* Ensure post-box is a positioning context */
        position: relative;
        padding-bottom: 30px; /* Space for the report icon */
    }
    .post-box .report-link {
        position: absolute;
        bottom: 8px;
        right: 8px;
        margin-left: 0;
        z-index: 2;
        padding: 5px;
        border-radius: 50%;
        transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        background: none; 
        -webkit-text-fill-color: currentColor;
    }
    .post-box .report-link i {
        transition: color 0.2s ease-in-out;
    }
    .post-box .report-link:hover {
        background-color: rgba(76, 175, 80, 0.1); /* Light green background tint */
        box-shadow: 0 0 8px 2px rgba(76, 175, 80, 0.5); /* Green glow */
        text-decoration: none;
    }
    .post-box .report-link:hover i {
        color: #4CAF50 !important; /* Green icon color on hover */
    }
.post-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-bottom: none;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: small;
    color: #C4C7C5;
}

.post-box {
    flex-direction: row;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    position: relative;
}
.post-box, .reply-box {
    position: relative;
    color: var(--uploaded-theme-text, #e4e6eb);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 1;
}
.post p.green-text {
    color: #789922;
}

.green-text {
    color: #789922;
}
/* Green text */


/* User profile */

.profile-container {
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
}

.profile-container h2 {
    margin-top: 0;
    
}


.profile-container p,
.profile-container li {
    font-size: 1em;
    line-height: 1.5;
}

/* End User profile */


/* Transation styling */
.transaction-list {
    max-width: 800px;
    margin: 20px auto;
}

.transaction-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tx-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tx-date {
    color: #666;
    font-size: 0.9em;
}

.tx-id a {
    color: #007bff;
    text-decoration: none;
}

.tx-details {
    display: flex;
    justify-content: space-between;
}

.transaction-detail {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.inputs-outputs {
    margin-top: 20px;
}

.tx-input, .tx-output {
    background: #f8f9fa;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

/* Transaction animations */
.transaction-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.transaction-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

.tx-id a {
    position: relative;
}

.tx-id a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--link-color);
    transition: width 0.3s ease;
}

.tx-id a:hover::after {
    width: 100%;
}

/* Loading animation for transaction updates */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.transaction-loading {
    animation: pulse 1.5s infinite;
}

/* End Transation styling */


/* Boards table styling */
.board-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.board-table th, .board-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.board-table th {
    background-color: #333;
    color: #fff;
    font-weight: bold;
}

.board-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.board-table tr:hover {
    background-color: #ddd;
}

/* End Boards table styling */

/* Board Directory */
.board-directory {
    border: #232426 solid;
    width: 980px;
    margin: 0 auto;
}
.board-directory h4 {
    color: #ffffff;
    font-weight: bold;
    padding: 5px;
    margin: 0;
    background: #232426
}

.categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    background-color: #fff;
    font-size: small;
}

.category {
    border-radius: 4px;
    text-align: center;
}
.catalog-list-main {
    max-width: 100%;
    margin: 30px auto;
    padding: 20px;
    display: contents;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    justify-content: center;
}
.catalog-item-main {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.category a {
    color: #5EC10A;
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.category a:hover {
    text-decoration: underline;
    transition: background 0.2s ease;
}

@media (max-width: 480px) {
    .category {
        flex: 100%;
    }
}

/* End Board Directory */

/* Popular Boards */

.popular_boards-table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 980px;
    margin: 10px auto;
    border: 1px solid var(--uploaded-theme-line, #232426);
    background: var(--uploaded-theme-panel-soft, transparent);
    width: 100%;
}


.popular_boards-table h4 {
    background-color: var(--uploaded-theme-panel, #232426);
    grid-column: 1 / -1;
    color: var(--uploaded-theme-text, #ffffff);
    font-weight: bold;
    padding: 5px;
    margin: 0;
    text-align: left;
    border-color: var(--uploaded-theme-line, transparent);
}
.popular_board-item {
    display: block;
}

.popular_board-item:hover {
    transform: translateY(-2px);
}

.popular_board-link {
    text-decoration: none;
    display: block;
    padding: 15px;
    display: block;
    text-decoration: none;
    color: var(--uploaded-theme-text, #ffffff);
}
.createThreadLink {
    color: #5EC10A;
}
.board-header a { color: #5EC10A !important; }


#createThreadLink a { color: #5EC10A !important; }
#board_header a { color: #5EC10A !important; }
.popular_board-header {
    font-weight: bold;
    padding: 5px 0;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popular_board-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.popular_board-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.popular_board-description {
    font-size: 0.8em;
    color: #5EC10A;
    text-align: center;
}

.post-file-name {
    font-size: 0.5rem;
    color: #555;
    margin-bottom: 5px;
    word-wrap: break-word;
    overflow: hidden;
    width: 150px;
    max-width: 150px;
}
/* End Popular Boards */


.post-image {
    max-width: 300px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 4px;
    float: left;
    margin-right: 15px;
}



.category a {
    text-decoration: none;
}

.category a:hover {
    text-decoration: underline;
}

/* End For board table */ 

/* Stats for home.html */

.stats-section {
    max-width: 980px;
    margin: 10px auto;
    border: 1px solid var(--uploaded-theme-line, #232426);
    background: var(--uploaded-theme-panel-soft, transparent);
    width: 100%;
}
.stats-section h4 {
    background-color: var(--uploaded-theme-panel, #232426);
    grid-column: 1 / -1;
    color: var(--uploaded-theme-text, #ffffff);
    font-weight: bold;
    padding: 5px;
    margin: 0;
    text-align: left;
    border-color: var(--uploaded-theme-line, transparent);
}
.stats-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 15px;
}

.stat-item {
    flex: 1;
    min-width: 150px;
    padding: 5px 10px;
    color: var(--uploaded-theme-text, #ffffff);
    font-size: 0.9em;
    text-align: center;
}
@media (max-width: 480px) {
    .stat-item {
        flex: 100%;
    }
}
/* Optional: Responsive adjustments */
@media (max-width: 768px) {
    .popular_board-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .popular_board-item {
        width: 100%;
        margin: 5px 0;
    }
}@media (max-width: 768px) {
    .popular_board-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .popular_board-item {
        width: 100%;
        margin: 5px 0;
    }
}

/* End Stats for home.html */


/* Button for board delete on profile.html */

.delete-button {
    background-color: red;
    color: white; /* Ensures the text is white for better readability */
    padding: 8px 16px; /* Adds some padding for better aesthetics */
    border: none; /* Removes any default border */
    border-radius: 4px; /* Optional: Rounds the corners of the button */
    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
}

.delete-button:hover {
    background-color: darkred; /* Darker red on hover for better user experience */
}
/* End Button for board delete on profile.html */



/* create new thread on home.html */
#createThreadModal {
    display: none; /* Start hidden */
    position: fixed;
    z-index: 1050;
    /* Other styling here */
}

#newThreadForm {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#newThreadForm form {
    display: flex;
    flex-direction: column;
}

#newThreadForm label {
    margin-top: 10px;
}

#newThreadForm input, #newThreadForm select, #newThreadForm textarea {
    padding: 8px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
}


/* end create new thread on home.html */



/* Image expand */
img.expanded {  
    width: 100%;
    height: auto;
}
/* end Image expand */


/* Event messaging */
.messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

.messages li {
    background: #C4C7C5;
    border: 1px solid #2C2E32;
    color: #000;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    opacity: 1;
}
/* End event messsaging */


/* Floating reply box */
.floating-reply-box {
    position: fixed;
    cursor: move;
    background: #2C2E32;
    border: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    color: #fff;
    /* Initial centered position */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.floating-reply-box.visible {
    display: block;
}

.floating-reply-box textarea {
    width: 100%;
    margin-bottom: 10px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
    cursor: text; /* Reset cursor for textarea */
}

.floating-reply-box input[type="file"] {
    margin-bottom: 10px;
    cursor: pointer; /* Add pointer cursor for file input */
}

.floating-reply-box button {
    margin-right: 10px;
    cursor: pointer; /* Add pointer cursor for buttons */
}

/* Add styles for the draggable header area */
.reply-form-label {
    cursor: move;
    user-select: none;
}


.reply-form-buttons {
    position: sticky;
    bottom: 0;
    background: #2C2E32;
    padding: 10px 0;
    margin-top: 10px;
}
.post-number {
    cursor: pointer;
}

.post-number:hover {
    text-decoration: underline;
}
/* End floating reply box */

/* image name for index.html */
/* .file-info {
    color: #666;
    font-size: 0.9em;
    margin: 2px 0;
} */
/* End image name for index.html */




/* Reply numbers beside post */
.post-references {
    margin-top: 5px;
    font-size: 0.9em;
}

.post-references a {
    text-decoration: none;
    margin-right: 5px;
}

.post-references a:hover {
    text-decoration: underline;
}
/* End Reply numbers beside post */

/* htmx hover pop up */
.reply-preview-container {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    max-width: 300px;
    word-wrap: break-word;
}

.reply-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.reply-id {
    color: #999;
}

.reply-author {
    color: #007BFF;
}

.reply-date {
    color: #999;
    font-size: 12px;
}

.reply-body {
    margin-top: 5px;
    white-space: pre-wrap;
}

.reply-photo img {
    max-width: 100%;
    border-radius: 5px;
    margin-top: 10px;
}

.reply-preview {
    background: transparent;
    padding: 10px;
    max-width: 300px;
}


/* end htmx hover pop up */

/* file name */
.file-name {
    font-size: 8px;
    color: #666;
    margin-bottom: 5px;
}
/* end file name */


.reply-box.nested {
    margin-top: 10px;
    background-color: #2a2a2a;
}
/* end nested replies */

/* index.html insert reply numbers */
.referenced-post {
    border-left: 2px solid #789922;
    padding-left: 8px;
    background: rgba(120, 153, 34, 0.05);
}



.post-reference:hover {
    text-decoration: underline;
}
/* end index.html insert reply numbers */

/* index.html hover for reply numbers in posts */
.reply-preview {
    position: absolute;
    z-index: 1000;
    max-width: 500px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark mode support for preview */
.dark-mode .reply-preview {
    background: #2c2c2c;
    border-color: #444;
}
.preview-container {
    position: fixed;
    display: none;
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 400px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}
.post-reference {
    color: #5EC10A;
    margin-right: 8px;
    text-decoration: underline;
    display: inline-block;
    font-size:x-small;
    cursor: pointer;
    margin: 0;
}

.preview-container.visible {
    display: block;
}
/* Preview Content Layout */
.preview-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.preview-image {
    max-width: 150px;
    max-height: 150px;
    float: left;
    margin: 0 10px 5px 0;
}

.preview-text {
    word-wrap: break-word;
    overflow: hidden;
    color: #C4C7C5;
}

/* Light Mode Styles */
body.light-mode .preview-container {
    background-color: #fff;
    border-color: #ddd;
    color: #333;
}

body.light-mode .preview-text {
    color: #333;
}


/* For image expand on Mobile */
/* Base: make sure images can scale */
.post-file img {
    max-width: 100% !important;
    height: auto !important;
}
.post-file img,
.post-file img.expanded {
    box-sizing: border-box;
}
/* When an image is expanded, stack content on mobile */
/* Base: when an image is expanded, stack the columns */
.post-content-wrapper.expanded-image-layout {
  flex-direction: column !important;
}

/* Mobile fixes */
@media (max-width: 768px) {
  .post-content-wrapper.expanded-image-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .post-content-wrapper.expanded-image-layout .post-file,
  .post-content-wrapper.expanded-image-layout .right-column {
    flex: 1 1 auto !important;
    min-width: 0 !important;     /* allow shrinking instead of overflowing */
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Keep the expanded image fully on screen */
  .post-content-wrapper.expanded-image-layout .post-file img.is-expanded {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    box-sizing: border-box !important; /* border won’t cause overflow */
  }

  /* Belt-and-suspenders: prevent horizontal scroll just in case */
  body,
  .thread-container {
    overflow-x: hidden !important;
  }
}

/* Desktop: let expanded images grow while keeping right column usable */
@media (min-width: 769px) {
  .post-content-wrapper.expanded-image-layout .post-file {
    max-width: none !important;
    width: auto !important;
    float: none !important;
  }

  .post-content-wrapper.expanded-image-layout .post-file img.is-expanded {
    width: auto !important;
    max-width: min(85vw, 1200px) !important; /* big but bounded */
    height: auto !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
  }

  .post-content-wrapper.expanded-image-layout .right-column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* end of image expand on Mobile */

/* Animation for smooth appearance */
.reply-preview {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    max-width: 500px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
}

.reply-preview.visible {
    opacity: 1;
    transform: translateY(0);
}
.reply-preview-content {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 8px;
    max-width: 500px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.reply-preview-header {
    font-size: 0.9em;
    margin-bottom: 8px;
}

.reply-preview-name {
    font-weight: bold;
    color: var(--name-color);
}

.reply-preview-date {
    color: var(--date-color);
    margin-left: 8px;
}

.reply-preview-no {
    color: var(--link-color);
    margin-left: 8px;
}

.reply-preview-file {
    float: left;
    margin: 0 10px 5px 0;
}

.reply-preview-thumbnail {
    max-width: 150px;
    max-height: 150px;
}

.reply-preview-text {
    word-wrap: break-word;
    overflow: hidden;
}
.preview-container:not(:has(a.hover *)) {
    display: none;
}

.preview-container:has(a.hover *) {
    display: block;
}



.reply-box.highlight {
    background-color: #f6f9d1; /* Light gray background */
    border: 1px solid #ccc;
    transition: background-color 0.2s ease;
}
/* end index.html hover for reply numbers in posts */



/* Replies to replies */
.reply-references {
    margin-top: 8px;
    font-size: 0.9em;
    color: #666;
}

.reply-references .post-reference {
    margin-left: 4px;
}
/** End Replies to replies */

/* Toggle for reply display thread or nested */
.view-toggle {
    text-align: left !important;
}

.view-option {
    text-decoration: none;
    padding: 2px 5px;
}

.view-option.active {
    font-weight: bold;
    color: #789922;
}

.replies-threaded {
    margin-left: 20px;
    display: block;
    flex-wrap: wrap;
}

.reply-indent {
    margin-left: 20px;
    border-left: 2px solid #ddd;
    padding-left: 10px;
}

.reply-depth {
    color: #888;
    margin-right: 5px;
}

.post-main-content {
    flex-shrink: 0;
    display: inline-flex;
}


/* End Thread replies */


.users-list {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 4px;
    display:flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.user-item {
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 4px;
    background: white;
    background-color: #232426;
    width: min-content;
    display: inline-block
}

/* group badges */
.group-badge {
    vertical-align: middle;
    margin-left: 4px;
    border-radius: 2px;
    width: 25px;
    height: auto;
    display: inline;
}
/* end group badges */
.all-groups-section {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 4px;
    display:flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.group-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
    background: white;
}

.current-badge {
    margin: 1rem 0;
}

.group-item form {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* hightlight reply */
.highlight-flash {
    animation: flash 1s;
}

@keyframes flash {
    0% { background-color: #ffd700; }
    100% { background-color: transparent; }
}
/* end hightlight reply */

/* User country flag */
.flag-badge {
    display: inline-block;
    width: 25px;
    height: auto;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.fi {
    width: 1.5em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.country-flag {
    width: 1.5em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
}
.fi {
    width: 1.5em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}

select#id_country {
    padding: 8px;
    border-radius: 4px;
    min-width: 200px;
}

.country-select-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-flag {
    display: inline-flex;
    align-items: center;
}
.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary.disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-primary:not(.disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-primary.loading {
    position: relative;
    padding-left: 35px;
}

.btn-primary.loading:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-loading 0.8s linear infinite;
}

@keyframes button-loading {
    to {
        transform: rotate(360deg);
    }
}
.btn-primary.success {
    background-color: #28a745;
    position: relative;
}

.btn-primary.success:after {
    content: '✓';
    position: absolute;
    right: 10px;
    animation: checkmark 0.5s ease-in-out;
}

/* Error State */
.btn-primary.error {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-primary.error:after {
    content: '✕';
    margin-left: 8px;
    animation: checkmark 0.5s ease-in-out;
}

/* Animations */
@keyframes checkmark {
    0% { transform: scale(0); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* used https://flagicons.lipis.dev/ */

/* user country flag */


/* drop down flags for profile.html */
.select2-container--default .select2-results__option {
    padding: 6px;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-results__option i {
    margin-right: 8px;
}

.select2-selection__rendered i {
    margin-right: 8px;
}
/* end drop down flags for profile.html */

/* banned users for profile.html */
.user-management-section {
    margin: 20px 0;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.user-table th,
.user-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.user-table th {
    background: #f8f9fa;
    font-weight: 600;
}

.user-table tr:hover {
    background: #f5f5f5;
}

/* end banned users for profile.html */


/* flags for CreatePost */
.flag-selection {
    margin: 15px 0;
}

.flag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.flag-option {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.flag-option label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* end flags for CreatePost */

/* janny flag group report */

.report-link {
    background: linear-gradient(to right, #ff4d4d, #ff9999); /* red gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* fallback for some browsers */
    font-weight: bold;
    margin-left: 5px;
    text-decoration: none;
}

.report-link:hover {
    box-shadow: 0 0 4px #5EC10A;
}
    
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}
    
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
}
.modal textarea {
    width: 100%;
    min-height: 100px;
    margin: 10px 0;
    padding: 5px;
}

.close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #666;
}

#reportForm button {
    padding: 5px 15px;
    color: white;
    border: none;
    cursor: pointer;
}

#reportForm button:hover {
    background: #556b18;
}


.janny-reports {
    margin: 20px 0;
}

.report-item {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    display: inline-block;
    border-radius: 5px;
}


.status-form select {
    padding: 5px;
    margin-top: 10px;
}

.status {
    font-weight: bold;
    text-transform: capitalize;
}

/* Status colors */
.status-pending { color: #f0ad4e; }
.status-resolved { color: #5cb85c; }
.status-dismissed { color: #d9534f; }

/* end janny flag group report */


/* profile.html Profile and Email div boxes */
.profile-users-list {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 4px;
    display:flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.profile-user-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
    /* background: white; */
    /* background-color: #232426; */
    width: min-content;
}
/* end profile.html Profile and Email div boxes */


/* profile.html transaction status */
#transaction-log {
    padding: 15px;
    border-radius: 4px;
}


.alert {
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
/* end profile.html transaction status */
.messages-container {
    margin: 20px 0;
}



.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* profile.html wallet rename update */
.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    transition: all 0.3s ease;
}
/* partials for wallets */
.wallet-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.account-wallet {
    border-left: 4px solid #4CAF50;
}

.board-wallet {
    border-left: 4px solid #2196F3;
}

.update-balance-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.update-balance-btn:hover {
    background-color: #0056b3;
}

/* profile.html drop down for wallets */
select[name="sender_wallet"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
}

optgroup {
    font-weight: bold;
    color: #333;
}

optgroup option {
    padding-left: 15px;
    font-weight: normal;
    color: #666;
}

select[name="sender_wallet"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
/* end drop down for wallets */


/* send_transaction.html image preview */
.image-preview-container details {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}

.image-preview-container summary {
    cursor: pointer;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.image-preview-container img {
    max-width: 200px;
    border-radius: 4px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* end send_transaction.html image preview */


/* bootstrap reply modal */
.modal {
    z-index: 1050;
}

.modal-backdrop {
    z-index: 1040;
}
.modal-dialog:focus {
    outline: none;
}

.modal.fade {
    background: rgba(0, 0, 0, 0.5);
}

.modal-dialog[aria-modal="true"] {
    position: relative;
    z-index: 1050;
}

.modal-content {
    position: relative;
    z-index: 1051;
}
/* end bootstrap reply modal */



/* home.html */
.homeCreateThreadForm {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.board-banner {
    display: grid;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}



/* profile.html banner approval */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.status-badge.pending {
    background-color: #ffd700;
    color: #000;
}

.status-badge.approved {
    background-color: #4CAF50;
    color: white;
}

.status-badge.rejected {
    background-color: #f44336;
    color: white;
}


.groups-list {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
}
.groups-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.groups-header {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}
.group-item {
    display: flex;
    align-items: center;
    background-color: #565656;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 12px;
    min-width: 150px;
}
.group-name {
    margin-right: 10px;
    font-weight: 500;
}
.group-badge {
    margin-left: auto;
}
/* Banner List Styling */
.banner-list {
    gap: 20px;
    margin: 20px 0;
}

.banner-item {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: inline-block;
}

.banner-info {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.banner-info p {
    margin: 5px 0;
    font-size: 14px;
}
/* Pending Banner Approvals Styling */
.pending-banners {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.banner-approval-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: inline-block
}

.banner-approval-item img {
    margin-bottom: 10px;
    height: auto;
}

.banner-approval-item select {
    margin-right: 10px;
    padding: 5px;
    border-radius: 4px;
}

.banner-approval-item button {
    background: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.banner-approval-item button:hover {
    background: #0056b3;
}
/* Banner Approval Form Elements */
.approval-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-top: 10px;
}

.status-select {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px;
    width: 120px;
    margin-right: 10px;
}

.update-status-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.update-status-btn:hover {
    background: #218838;
}

.no-pending {
    color: #6c757d;
    font-style: italic;
    text-align: center;
    padding: 20px;
}
/* Status State Styling */
.approval-info .status-state {
    display: inline-block;
    padding: 4px 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-weight: 500;
}

.status-state.pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.status-state.approved {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-state.rejected {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* end profile.html banner approval */

/* profile.html board banner upload drop down menu */
select#id_board {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

select#id_board option {
    padding: 8px;
    font-family: monospace;
}
/* end profile.html board banner upload drop down menu */



/* janny reports in profile.html */
.janny-reports {
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
}

.report-item {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: bold;
}

.status.pending {
    background: #fff3cd;
    color: #856404;
}

.status.resolved {
    background: #d4edda;
    color: #155724;
}

.status.dismissed {
    background: #f8d7da;
    color: #721c24;
}

.status-form select {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 10px 0;
}

.view-post-link {
    display: inline-block;
    margin-top: 10px;
    color: #007bff;
    text-decoration: none;
}

.report-item {
    transition: all 0.3s ease;
}

.status {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Status change animations */
@keyframes statusUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.status-updated {
    animation: statusUpdate 0.5s ease;
}
.janny-response {
    margin-top: 10px;
    padding: 10px;
    background: #f0f8ff;
    border-left: 4px solid #007bff;
    border-radius: 4px;
}

.janny-response p {
    margin: 0;
    color: #2c3e50;
    font-size: 0.95em;
}

.janny-response small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-style: italic;
}

/* end janny reports in profile.html */


/* sign up */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.submit-button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.loading-indicator {
    text-align: center;
    padding: 20px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.progress-steps {
    margin-top: 15px;
    text-align: left;
}

.step {
    padding: 5px;
    margin: 5px 0;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.step.active {
    opacity: 1;
    color: #3498db;
}


/* Your Wallets New User sign up */
.wallet-section {
    background: #fff;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wallet-item {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-top: 5px;
    border-top: #5EC10A;
}

.wallet-details {
    padding: 10px;
    border-radius: 4px;
}

.monospace {
    font-family: monospace;
    padding: 2px 4px;
    border-radius: 3px;
}

.wallet-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.wallet-actions button {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.send-bsv {
    background: #007bff;
    color: white;
}

.view-transactions {
    background: #6c757d;
    color: white;
}

.view-transactions-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.view-transactions-btn:hover {
    background: #5a6268;
    color: white;
    text-decoration: none;
}
.key-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-key {
    padding: 4px 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* for anon op highlight */
.hand {
    cursor: pointer;
}
/* .highlighted-posts {
    border-left: 3px solid #f00;
    background-color: rgba(255, 220, 220, 0.2);
} */
.highlighted-post {
    border-left: 6px solid #ff9500 !important;
    background-color: rgba(255, 149, 0, 0.2) !important;
    box-shadow: 0 0 8px rgba(255, 149, 0, 0.5) !important;
    position: relative;
}

.highlighted-post::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #ff9500;
    pointer-events: none;
    border-radius: 6px;
}


.hidden-key {
    font-family: monospace;
    letter-spacing: 2px;
}

.actual-key {
    font-family: monospace;
    word-break: break-all;
}
.send-bsv-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.send-bsv-btn:hover {
    background: #0056b3;
    color: white;
    text-decoration: none;
}

/* end Your Wallets New User sign up */



.modal {
    z-index: 1050;
}


.modal-dialog {
    z-index: 1060;
}
/* form reply anon toggle */
.form-check-input {
    margin-right: 8px;
}

.post-form-row {
    margin-bottom: 15px;
}

.post-form-label {
    font-weight: 500;
    margin-bottom: 5px;
}

.form-check-label {
    display: inline-flex;
    align-items: center;
}


/* Utility class for mobile-only line breaks */
@media (min-width: 769px) {
    .d-md-none {
        display: none;
    }
}


/* nested_view.html */
    /* Animation keyframes */
    @keyframes sparkle {
        0% { opacity: 0.5; transform: scale(1) rotate(0deg); }
        50% { opacity: 0.8; transform: scale(1.2) rotate(180deg); }
        100% { opacity: 0.5; transform: scale(1) rotate(360deg); }
    }
    
    @keyframes sparkle-comet {
        0% { transform: scaleY(1) rotate(0deg); opacity: 0.3; }
        50% { transform: scaleY(1.5) rotate(180deg); opacity: 0.9; }
        100% { transform: scaleY(1) rotate(360deg); opacity: 0.3; }
    }
    
    @keyframes flashy-border {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    @keyframes animate-border {
        0% { border-image-source: linear-gradient(0deg, #ff4500, #ffb700, #ff4500); }
        50% { border-image-source: linear-gradient(180deg, #ff4500, #ffb700, #ff4500); }
        100% { border-image-source: linear-gradient(360deg, #ff4500, #ffb700, #ff4500); }
    }
    
    @keyframes reeeeee-pulse {
        0% { box-shadow: 0 0 15px rgba(255, 69, 0, 0.4); }
        50% { box-shadow: 0 0 25px rgba(255, 69, 0, 0.6); }
        100% { box-shadow: 0 0 15px rgba(255, 69, 0, 0.4); }
    }
    
    @keyframes reeeeee-rainbow {
        0% { background-position: 0% 50%; }
        100% { background-position: 100% 50%; }
    }
    
    @keyframes reeeeee-gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    @keyframes reeeeee-glow {
        from { box-shadow: 0 0 5px #ff4500, 0 0 10px #ff4500; }
        to { box-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00; }
    }
    
    @keyframes reeeeee-corner-flash {
        0% { opacity: 0; transform: scale(1); }
        5% { opacity: 1; transform: scale(1.5); }
        10% { opacity: 0; transform: scale(1); }
        100% { opacity: 0; transform: scale(1); }
    }
    
    @keyframes reeeeee-shine {
        0% { left: -100%; }
        20% { left: 100%; }
        100% { left: 100%; }
    }
    
    /* Basic REEEEEE elements */
    .reeeeee-sparkle {
        position: absolute;
        width: 4px;
        height: 30px;
        background: linear-gradient(180deg, rgba(255, 244, 122, 1), rgba(255, 244, 122, 0));
        animation: sparkle-comet 3s infinite ease-in-out;
        opacity: 0.8;
        filter: blur(1.5px);
        z-index: 10;
        pointer-events: none;
        transform-origin: center top;
    }
    
    .reeeeee-icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
        vertical-align: middle;
    }
    
    .reeeeee-pin-btn {
        display: inline-flex;
        align-items: center;
        background-color: #ff4500;
        color: white;
        border: none;
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 0.8rem;
        cursor: pointer;
        margin-left: 5px;
        transition: background-color 0.2s;
    }
    
    .reeeeee-pin-btn:hover {
        background-color: #cc3700;
    }
    
    .reeeeee-indicator {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(to right, #ff4500, #ff8c00);
        color: white;
        border-radius: 3px;
        padding: 4px 8px;
        font-size: 0.8rem;
        margin-left: 5px;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        animation: reeeeee-glow 1.5s ease-in-out infinite alternate;
    }
    
.reeeeee-badge {
    position: relative; /* Changed from absolute to relative */
    background: linear-gradient(to right, #ff7f50, #ff4500);
    border-radius: 20px;
    padding: 3px 10px;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    max-width: max-content;
    gap: 5px;
}
    
    .reeeeee-badge .expiry {
        margin-left: 6px;
        font-size: 0.7rem;
        opacity: 0.85;
    }
    
    .reeeeee-badge img.reeeeee-icon {
        width: 18px;
        height: 18px;
    }
    
    /* Thread container - position relative for absolute positioning */
    .thread-container {
        width: 100%;
        display: block;
        position: relative;
        overflow: visible;
    }
    
    /* OP post takes its normal space */
    .thread-container .post-box.op-post {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        margin-bottom: 10px;
        position: relative;
    }
    
    /* Replies positioned relative to flow naturally after OP */
    .thread-container .replies-column {
        margin-left: 0; /* No margin on container - let individual replies control their positioning */
        width: 100%;
        margin-top: 0; /* Start naturally after OP - JavaScript will adjust */
        position: relative;
        z-index: 1;
    }
    
    /* Individual reply styling - default next to OP content */
    .thread-container .replies-column .post-box {
        margin: 0 0 8px 270px; /* Default: align with OP text content area */
        width: calc(100% - 270px);
        clear: both;
    }
    
    /* Replies that extend past the image height use full width */
    .thread-container .replies-column .post-box.full-width {
        margin-left: 20px !important; /* Start from left edge with standard indent */
        width: calc(100% - 40px) !important; /* Full width minus padding */
        max-width: none;
        position: relative;
        left: 0;
        padding-left: 0; /* No extra padding needed */
    }
    
    /* Ensure thread container has enough space for absolute positioned replies */
    .thread-container {
        min-height: 20px; /* Minimum height to accommodate replies */
        padding-bottom: 20px; /* Space for replies to extend below */
    }
    
    /* Mobile responsive - stack replies below OP */
    @media (max-width: 768px) {
        .thread-container {
            display: flex;
            flex-direction: column;
        }
        
        .thread-container .replies-column {
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            padding-top: 0;
            margin-left: 20px;
            margin-top: 10px;
        }
    }
    
    /* Post content structure */
    
    .thread-container .post-box {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        border-radius: inherit !important;
        padding-left: inherit !important;
        align-items: flex-start !important;
    }
    
    .right-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-width: 0;
        word-break: break-word;
        align-items: flex-start;
    }
    
    .thread-container .post-box .right-column {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
        word-break: break-word !important;
        align-items: flex-start !important;
    }
    
    /* Post metadata */
    .post-metadata {
        margin-bottom: 10px;
        line-height: 1.4;
    }
    
    .post-title {
        font-weight: bold;
        font-size: 1rem;
        margin-right: 5px;
    }
    

    
    /* Post content */
    .post-content {
        font-size: 1rem;
        line-height: 1.6;
        color: #333;
        padding-top: 0;
        margin-top: 0;
        align-self: flex-start;
        width: 100%;
        display: block !important;
    }
    
    .thread-container .post-box .post-content {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: #C4C7C5 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        align-self: flex-start !important;
        width: 100% !important;
        overflow: visible !important;
        max-height: none !important;
        position: relative !important;
        padding-left: 10px;
    }
        /* Make in-body >>post references sit on their own line above the text */
    .thread-container .post-box .post-content span.post-reference {
        display: inline-block !important;
        margin-right: 5px !important;
    }

    /* After the last reference, insert a line break so the text starts below */
    .thread-container .post-box .post-content span.post-reference:last-of-type::after {
        content: "\A";
        white-space: pre;
    }
    /* Fix for blockchain text and line breaks */
    .blockchain-text {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        line-height: 1.4 !important;
    }
    .post-content > .blockchain-text {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .blockchain-text > span {
        margin: 0 !important;
        padding: 0 !important;
        line-height: inherit !important;
    }
    .post-content > br,
    .post-content > span > br,
    .blockchain-text + br,
    .blockchain-text ~ br:nth-child(-n+2) {
        display: none !important;
    }
    
    .thread-container .post-box .post-content .blockchain-text {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
    }
    
    .post-content > span {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .thread-container .post-box .post-content span {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .thread-container .post-box .post-content > span:first-child,
    .thread-container .post-box .post-content > span:nth-child(3) {
        display: inline !important;
        white-space: normal !important;
    }
    
    /* Hide extra line breaks */
    .post-content > span > br:first-child,
    .post-content > span > br:nth-child(2) {
        display: none !important;
    }
    
    /* Post file and image */
    .post-file {
        flex-shrink: 0;
        max-width: 250px;
        margin-bottom: 1rem;
        align-self: flex-start;
    }
    
    .thread-container .post-box .post-file {
        flex-shrink: 0 !important;
        max-width: 250px !important;
        margin-bottom: 1rem !important;
        align-self: flex-start !important;
    }
    
    .post-image {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: contain;
        border-radius: 4px;
        cursor: pointer;
    }
    
    /* Replies section */

    /* Highlighted post */

    
    /* Post preview */
    .post-preview {
        position: absolute;
        border: 2px solid #333;
        border-radius: 5px;
        width: 400px;
        max-width: 450px;
        z-index: 9999;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        display: block;
        visibility: visible;
        opacity: 1;
    }
    
    .post-preview-header {
        background-color: #ddd;
        padding: 8px 12px;
        border-radius: 3px 3px 0 0;
        color: #333;
        font-weight: bold;
        border-bottom: 1px solid #999;
    }
    
    .post-preview-content {
        padding: 12px;
        color: #333;
        font-size: 0.9em;
        max-height: 300px;
        overflow-y: auto;
    }
    
    body.dark-mode .profile-action {
        background-color: #10151A;
        color: #e0e0e0;
    }
    body.dark-mode .container {
        color: #e0e0e0;
    }    

    /* Dark mode post preview styles */
    body.dark-mode .post-preview {
        background-color: #2c2e32;
        border-color: #555;
        color: #e4e6eb;
    }
    
    body.dark-mode .post-preview-header {
        background-color: #1a1a1a;
        color: #e4e6eb;
        border-bottom-color: #555;
    }
    
    body.dark-mode .post-preview-content {
        color: #e4e6eb;
        background-color: #2c2e32;
    }
    
    /* Dark mode styling for React post preview component */
    body.dark-mode #post-preview-manager {
        background-color: #2c2e32 !important;
        color: #e4e6eb !important;
    }
    
    body.dark-mode #post-preview-manager > div {
        background-color: #2c2e32 !important;
        border-color: #555 !important;
    }

    body.dark-mode .public-profile-message {
        color: #e4e6eb !important;
    }
        body.dark-mode .group-card {
        background-color: #2c2e32; 
        color: #e4e6eb;
    }
    body.dark-mode #post-preview-manager * {
        background-color: #2c2e32 !important;
        color: #e4e6eb !important;
        border-color: #555 !important;
    }
    
    body.dark-mode #post-preview-manager .chakra-box {
        background-color: #2c2e32 !important;
        border-color: #555 !important;
    }
    
    /* Post hiding accordion styles - 4chan.org style */
    .thread-container.post-hidden {
        height: 30px !important;
        max-height: 30px !important;
        overflow: visible !important; /* Allow button and metadata to be visible */
        transition: height 0.3s ease-in-out, max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0.7 !important;
        position: relative;
        background-color: #333 !important;
        border-radius: 4px !important;
        margin-bottom: 10px !important;
    }
    
    /* Hide all content when collapsed */
    .thread-container.post-hidden .post-box,
    .thread-container.post-hidden .replies-column {
        display: none !important;
    }
    
    .thread-container.post-expanding {
        transition: height 0.3s ease-in-out, max-height 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Thread separator */
    .thread-separator {
        display: block !important;
        height: 3px;
        background: linear-gradient(
            to right,
            transparent 0%,
            #00ff88 40%,
            #00ff88 60%,
            transparent 100%
        );
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    }
    

    /* REEEEEE pinned styling */
    .reeeeee-pinned {
        position: relative;
        border-left: 4px solid #ff4500 !important;
        background: linear-gradient(135deg, #ff4d00, #ffd500, #ff4d00);
        animation: flashy-border 2s linear infinite;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 0 30px rgba(255, 69, 0, 0.7);
    }
    
    .reeeeee-pinned::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background: linear-gradient(#ff4500, #ffb700, #ff4500);
        background-size: 300% 300%;
        animation: flashy-border 3s linear infinite;
        z-index: 5;
        border-radius: 4px 0 0 4px;
    }
    
    .pinned-post.reeeeee-pinned {
        position: relative;
        background-color: rgba(255, 69, 0, 0.1);
        border-left: 6px solid transparent;
        border-image: linear-gradient(180deg, #ff4500 0%, #ffb700 50%, #ff4500 100%);
        border-image-slice: 1;
        border-image-repeat: round;
        animation: animate-border 3s linear infinite;
    }
    
    .post-box.reeeeee-pinned {
        position: relative;
        background: linear-gradient(135deg, rgba(255, 80, 0, 0.2), rgba(255, 150, 50, 0.1));
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 12px 20px rgba(255, 115, 0, 0.3);
        animation: reeeeee-glow 1.5s ease-in-out infinite alternate;
    }
    
    .post-box.reeeeee-pinned::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background: linear-gradient(180deg, #ff4500, #ffd500, #ff4500);
        animation: flashy-border 3s linear infinite;
        border-radius: 4px 0 0 4px;
        z-index: 1;
    }
    
    .post-box.reeeeee-pinned::after {
        background: transparent;
        border-radius: 0;
    }
    
    .post-box.reeeeee-pinned .corner-flash {
        position: absolute;
        width: 10px;
        height: 10px;
        background: #ff4500;
        border-radius: 50%;
        filter: blur(3px);
        opacity: 0;
        z-index: 10;
    }
    
    .post-box.reeeeee-pinned .corner-flash:nth-child(1) {
        top: -3px;
        left: -3px;
        animation: reeeeee-corner-flash 4s infinite 0s;
    }
    
    .post-box.reeeeee-pinned .corner-flash:nth-child(2) {
        top: -3px;
        right: -3px;
        animation: reeeeee-corner-flash 4s infinite 1s;
    }
    
    .post-box.reeeeee-pinned .corner-flash:nth-child(3) {
        bottom: -3px;
        right: -3px;
        animation: reeeeee-corner-flash 4s infinite 2s;
    }
    
    .post-box.reeeeee-pinned .corner-flash:nth-child(4) {
        bottom: -3px;
        left: -3px;
        animation: reeeeee-corner-flash 4s infinite 3s;
    }
    
    .post-box.reeeeee-pinned .reeeeee-badge {
        position: absolute;
        top: -30px;
        right: 6px;
        background: linear-gradient(to right, #ff4500, #ff8c00);
        color: white;
        border-radius: 12px;
        padding: 6px 10px;
        font-size: 0.75rem;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
        animation: reeeeee-glow 1.5s ease-in-out infinite alternate;
        z-index: 11;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    
    .post-box.reeeeee-pinned .reeeeee-transaction {
        position: absolute;
        bottom: -8px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 3px;
        z-index: 10;
    }
    
    .post-box.reeeeee-pinned .reeeeee-transaction a {
        color: #ff8c00;
        text-decoration: none;
    }
    
    .post-box.reeeeee-pinned .reeeeee-transaction a:hover {
        text-decoration: underline;
    }
    
    .post-box.reeeeee-pinned .reeeeee-indicator {
        display: none;
    }
    
    /* Misc styles */
    .hand:hover {
        opacity: 0.8;
    }
    
    /* Modal styles */
    /* .modal {
        display: block !important;
        opacity: 1 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
    } */
    
    .modal-dialog {
        margin-top: 100px !important;
        z-index: 10000 !important;
    }
    
    .modal-backdrop {
        z-index: 9998 !important;
    }
    
    #reportModal {
        z-index: 9999 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    #reportModal .modal-dialog {
        transform: translate(0, 0) !important;
        margin-top: 100px !important;
    }


    /* For profile.html */
.public-key-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.public-key-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 100%;
    overflow: hidden;
}

.public-key-text {
    font-family: monospace;
    background-color: #f8f9fa;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 70px);
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .public-key-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .public-key-wrapper {
        width: 100%;
    }
}

    .board-info-readonly {
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 15px;
        margin: 10px 0;
        opacity: 0.85;
    }
    
    .board-info-section, .board-category-section {
        margin-bottom: 15px;
    }
    
    .board-info-section h4, .board-category-section h4 {
        margin-top: 0;
        margin-bottom: 8px;
        color: #495057;
        font-size: 1rem;
    }
    
    .permission-notice {
        font-size: 0.85rem;
        color: #6c757d;
        font-style: italic;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #dee2e6;
    }
    
    .permission-notice i {
        margin-right: 5px;
    }
    .profile-list {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        overflow: hidden;
    }
    
    .wallet-details {
        padding: 15px;
        background-color: rgba(255, 255, 255, 0.03);
    }
    
    .wallet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    
    .wallet-name {
        margin: 0;
        font-size: 1.5rem;
        color: #333;
    }
    
    .wallet-badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
    }
    
    @media (max-width: 768px) {
        .wallet-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .wallet-badges {
            margin-top: 10px;
            width: 100%;
        }
    }
    
    .wallet-divider {
        margin: 10px 0 20px;
        border-top: 1px solid #eee;
    }
    
    .wallet-info {
        margin-bottom: 20px;
    }
    
    .wallet-board {
        margin-bottom: 10px;
        word-break: break-all;
    }
    
    .private-key-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .private-key-input {
        font-family: monospace;
        background-color: #f8f9fa;
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 60%;
    }
    
    .copy-key-btn {
        padding: 4px 8px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .wallet-rename {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }
    .default-wallet-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 20px 0;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        width: fit-content;
    }
    
    .default-wallet-card .card-header {
        background-color: #f8f9fa;
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .default-wallet-card .card-header h3 {
        margin: 0;
        color: #333;
        font-size: 1.2rem;
    }
    
    .default-wallet-card .card-body {
        padding: 15px;
    }
    
    .default-wallet-display {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .wallet-info p {
        margin-bottom: 8px;
        font-size: 0.95rem;
    }
    
    .wallet-name {
        font-weight: 500;
        color: #333;
    }
    
    .wallet-address {
        font-family: monospace;
        background-color: #f8f9fa;
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
    }
    
    .wallet-balance {
        font-weight: 600;
        color: #28a745;
    }
    
    .wallet-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .no-wallet-message {
        color: #6c757d;
        font-style: italic;
    }
    
    @media (min-width: 768px) {
        .default-wallet-display {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        
        .wallet-info {
            flex: 1;
        }
        
        .wallet-actions {
            flex-shrink: 0;
        }
    }
    .flag-selection-container {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .flag-type-selector {
        margin-bottom: 20px;
    }
    
    .flag-options {
        padding: 15px;
        background-color: #fff;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        margin-bottom: 20px;
    }
    
    .selected-flag-preview, .current-flag-preview {
        display: flex;
        align-items: center;
        margin-top: 15px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 4px;
    }
    
    .flag-badge-large {
        font-size: 2rem;
        margin-right: 10px;
    }
    .flag-badge {
        margin-right: 0.5em;
        margin-left: 0.5em;
    }
    
    .custom-flags-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .custom-flag-item {
        text-align: center;
    }
    
    .custom-flag-item input[type="radio"] {
        display: none;
    }
    
    .custom-flag-label {
        display: block;
        padding: 8px 5px;
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .custom-flag-item input[type="radio"]:checked + .custom-flag-label {
        border-color: #007bff;
        background-color: rgba(0, 123, 255, 0.1);
    }
    
    .custom-flag-image {
        width: 40px;
        height: 30px;
        object-fit: contain;
        margin-bottom: 3px;
    }
    
    .custom-flag-name {
        display: block;
        font-size: 0.7rem;
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .flag-name {
        font-weight: bold;
        color: #495057;
    }
    
    .no-flag-selected, .flag-disabled {
        color: #6c757d;
        font-style: italic;
    }
    .group-badge {
        width: 30px !important;
        height: auto !important;
    }
    .group-badges-list {
        list-style: none;
        padding: 0;
    }
    
    .group-badges-list li {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .group-badges-list li:last-child {
        border-bottom: none;
    }



        /* Janny Dashboard Styles */
    .janny-dashboard-link {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .super-mod-dashboard-link {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .banner-manager-dashboard-link {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .news-dashboard-link {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .manage-boards-link {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .board-purchases-link {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .report-item {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .report-header {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .reporter-info {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .status {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: bold;
    }

    .status.pending {
        background-color: #fff3cd;
        color: #856404;
    }

    .status.resolved {
        background-color: #d4edda;
        color: #155724;
    }

    .status.dismissed {
        background-color: #f8d7da;
        color: #721c24;
    }

    .message-history {
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }

    .history-entry {
        border-bottom: 1px dashed #ced4da;
        padding: 8px 0;
    }

    .history-entry:last-child {
        border-bottom: none;
    }

    .status-form {
        margin: 15px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .status-form select, 
    .status-form textarea {
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }

    .status-form textarea {
        min-height: 100px;
    }

    .view-post-link {
        display: inline-block;
        margin-top: 10px;
        color: #007bff;
        text-decoration: none;
    }

    .view-post-link:hover {
        text-decoration: underline;
    }

    .banned-user-item, 
    .user-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #dee2e6;
    }

    .banned-username {
        font-weight: bold;
        margin-right: 15px;
    }

    .banned-date, 
    .ban-reason {
        margin-right: 15px;
        color: #6c757d;
    }

    .unban-button, 
    .ban-form button {
        padding: 5px 10px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
    }

    .unban-button {
        background-color: #28a745;
        color: white;
    }

    .ban-form button {
        background-color: #dc3545;
        color: white;
    }

    .ban-form input {
        padding: 5px;
        margin-right: 5px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }

    .group-item {
        background-color: #565656;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }

    .current-badge {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .group-badge {
        margin-left: 10px;
    }

    .group-users {
        margin: 15px 0;
    }

    .user-access-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px dashed #dee2e6;
    }

    .remove-access-btn {
        padding: 2px 5px;
        font-size: 0.8rem;
    }
    
    /* New styles for post and board management */
    .management-section {
        margin-bottom: 30px;
    }
    
    .management-form {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .management-form h4 {
        margin-bottom: 15px;
        color: #343a40;
    }
    
    .management-form .form-group {
        margin-bottom: 15px;
    }
    
    .management-form label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    .management-form input,
    .management-form select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }
    
    .management-form button {
        padding: 8px 15px;
        background-color: #dc3545;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .management-form button:hover {
        background-color: #c82333;
    }
    
    .management-form .btn-warning {
        background-color: #ffc107;
        color: #212529;
    }
    
    .management-form .btn-warning:hover {
        background-color: #e0a800;
    }
    
    .management-tabs {
        display: flex;
        margin-bottom: 15px;
    }
    
    .management-tab {
        padding: 8px 15px;
        background-color: #e9ecef;
        border: 1px solid #dee2e6;
        cursor: pointer;
    }
    
    .management-tab.active {
        background-color: #fff;
        border-bottom-color: #fff;
    }
    
    .management-content {
        border: 1px solid #dee2e6;
        border-top: none;
        padding: 15px;
        background-color: #fff;
    }
    
    .compact-form {
        display: flex;
        gap: 10px;
        align-items: flex-end;
    }
    
    .compact-form .form-group {
        flex: 1;
        margin-bottom: 0;
    }
    
    .compact-form button {
        height: 38px;
    }

/* handcash button login page */
.handcash-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: #008037; /* A shade of green, similar to the HandCash branding */
    color: #fff;
    border: none;
    border-radius: 50px; /* Highly rounded corners */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.handcash-button:hover {
    background-color: #00662d; /* Slightly darker green on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.handcash-button:active {
    background-color: #004d23; /* Even darker on active state */
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}