* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}

.ac { background: #8f751b; }

.bh { background: #1f8588; }  /* Original color for reference */

.ct { background: #2e8f1f; }

.gj { background: #4a2287; }

.jf { background: #7e0b16; }

.rg { background: #8f451a; }

.sk { background: #871f73; }

.ob { background: #333333; }

html {
	background-color: #030303;
	color: white;
	scroll-behavior: smooth;
}

.content, .info, .navbar, .admin-toolbar {
	width: 60vw;
	margin: auto;
}

.stats {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 2vh;
}

a {
	color: white;
}

.input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
	gap: 1vh;
}

h1 {
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	font-weight: 600;
	margin: 1vh;
	font-size: 2vw;
}

.mono {
	font-family: 'Roboto Mono', monospace;
}

.submission-card, .token-info {
    padding: 10px;
    border-radius: 0.5vh;
    position: relative;

    background-color: #212121;

    text-decoration: none;
    color: unset;
}

.token-info {
	margin-bottom: 20px;
	text-align: center;
}

.submission-id {
	font-weight: bold;
}

.model-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1vh;
}

.model-container label {
	padding: 1vh;
	border-radius: 1vh;
	cursor: pointer;
	transition-duration: 0.3s;
	font-size: 0.9vw;
}

.model-container input[type="checkbox"] {
	display: none;
}

.model-container input[type="checkbox"]:not(:checked) + label {
	background: #3c4043;
}

.memory {
	padding: 2vh;
	border-radius: 1vh;
	margin-bottom: 2vh;
}

.model-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 8vh;
	align-items: center;
}

.username {
    font-style: italic;
}

.submission-text {
    margin-top: 20px;
    margin-bottom: 20px;
}

.submission-rating {
    font-style: italic;
}

button, .button, .btn, .submit-button, .checked, .unchecked {
	font-size: 1vw;
	font-weight: bold;
	padding: 1vh;
	border-radius:0.25vw;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition-duration: 0.3s;
	font-family: 'Roboto Mono', monospace;
}

.choices {
    display: flex !important;
    position: absolute;
    top: 30vh;
    height: 40vh;
    left: 30vw;
    width: 40vw;
    align-items: center; /* Added to center items vertically */
    justify-content: center; /* Added to center items horizontally */
}

.choices .button {
    display: flex; /* Changed from block to flex */
    align-items: center; /* Added for vertical centering */
    justify-content: center; /* Added for horizontal centering */
    border: 0.5vh solid #ccc;
    width: 100%;
    height: 100%;
    margin-left: 2vw;
    margin-right: 2vw;
    font-size: 1.5vw;
}

.choices .button:hover {

}

.unchecked {
	background-color: white;
	color: black;
}

.unchecked:hover {
	background-color: #030303;
	color: white;
}

.checked, .checked:hover {
	background-color: #5469d4;
	color: white;
}

.checked, .unchecked {
	margin-bottom: 2vh;
	transition-duration: 0.25s;
}

#delete:hover, #reset:hover {
	background-color: #c00000;
	color: white;
}

.delete-form {
	float: right;
}

.delete-button {
    background-color: #f44336;
    color: #fff;
    border: none;
    border-radius: 0.25vw;
    padding: 0.5vw;
    cursor: pointer;
}

.delete-button:hover {
    background-color: #d32f2f;
}

.submission-form textarea {
    width: 100%;
    resize: vertical;
    margin-bottom: 1vh;
    box-sizing: border-box; /* Include padding in width calculation */
	background-color: #dddddd;
}

.submission-form input[type="text"],
.submission-form input[type="submit"], {
    width: 100%;
    padding: 6px 10px; /* Adjust the padding as needed */
    margin-bottom: 10px;
    box-sizing: border-box; /* Include padding in width calculation */
    border-radius: 4px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.submission-form input[type="submit"],
.card-body form input[type="submit"], {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.submission-form input[type="submit"]:hover, .card-body form input[type="submit"]:hover {
    background-color: #45a049;
}

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

.center-container div {
	width: 100%;
}

.note {
    font-style: italic;
    text-align: center;
	margin: 0px;
}

.unrated {
    background-color: lightgrey;
    border-color: red;
}

table {
	font-family: monospace;
	width: 100%;
	margin: auto;
	text-align: center;
}

footer {
	width: 100%;
	text-align: center;
	margin: auto;
	display: block;
	margin-top: 20vh;
	margin-bottom: 10vh;
}

footer img {
	height: 20vh;
}

.rating-container {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.rating-container label {
}

.submit-container input[type=submit] {
    color: #fff;
    border: none;
    border-radius: 4wpx;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #4CAF50;
}

.submit-container input[type=submit]:hover {
	background-color: #45a049;
}

input[type="file"] {
	display: none;
}

input[type="url"],
input[type="file"],
textarea {
	width: 100%;
	padding: 1vw;
	border: 0.25vw solid #ccc;
	border-radius: 0.25vw;
	font-size: 1vw;
	margin-bottom: 1vh;
	box-sizing: border-box;
	background-color: white;
}

input[type="url"]:focus,
input[type="file"]:focus,
textarea:focus {
    outline: none;
    border-color: grey;
}

/* style.css */

/* Other existing styles... */

.submission-card {
  /* Existing styles for the submission card */
}

.submission-card .card-body {
  /* Existing styles for the card body */
  position: relative;
}


.reply img, .reply audio, .reply video {
	max-width: 100%;
	max-height: 15vw;
}

.focus img, .focus audio, .focus video {
	max-width: 30vw;
}

.form-container {
    position: relative;
    width: 46% !important; 
    margin: 2%;
}

.buy-form-container {
  display: flex;
  justify-content: space-around;
}

.buy-form-item {
  flex: 1 0 auto;
  margin: 10px;
}

.alert {
	text-align: center;
	font-weight: bold;
}

.alert-success {
	color: green;
}

.alert-error {
	color: red;
}

.money-button {
	background-color: #45a049;
	color: white;
}

.money-button:hover {
	background-color: gold;
	color: black;
}

.hidden {
	display: none !important;
}

input:disabled, button:disabled, input:disabled::placeholder {
	color: black !important;
}

button, .button {
	cursor: pointer;
}

.btn-check {
    display: none;
}

.btn {
    padding: 10px 20px;
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    display: block;
    text-align: center;
}

.btn-check:checked + .btn {
    background-color: #5469d4;
    color: #fff;
}

.btn-group {
	display: flex;
    margin-bottom: 20px;
	gap: 20px;
}

.btn-group label {
	flex: 1;
}

td a {
	text-decoration: none;
}

.left {
	left: 20px;
}

.left {
	right: 20px;
}

.admin-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;  /* this will vertically align the items if needed */
	background: pink;
	padding: 1vh;
	border-radius: 0.5vh;
	margin-bottom: 2vh;
}

.navbar {
	display: flex;
	align-items: flex-end;
	position: fixed;
	top: 2vh;
	background-color: #030303;
	z-index: 9999;
	height: 8vh;
	right: 2vw;
	width: 16vw;
	flex-direction: column;
	align-content: center;
	gap: 1vh;
}

.navbar a {
	font-size: 1vw;
	padding-left: 0.25vw;
	padding-right: 0.25vw;
}

.navmenu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;  /* this will vertically align the items if needed */
	background-color: #030303;
}

.navmenu a {
	font-size: 4vw;
}

.titlebar {
	align-items: flex-end;
	position: inline;
}

.options {
	text-align: center;
}

.options * {
	margin-top: 1vh;
	cursor: pointer;
}

.navbar a, .navmenu a {
	text-decoration: none;
}

.admin-toolbar h2 {
	color: #030303;
}

.left-group, .right-group {
    display: flex;
	flex: 1;
    gap: 1vh; /* or your preferred space between the buttons */
}

.right-group {
	justify-content: flex-end;
}

.admin-button {
	font-size: 20px;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 5px;
	text-decoration: none;
	color: unset;
	background-color: #030303;
	cursor: pointer;
	text-align: center;
}

.summary, .state {
	padding: 1vh;
	border-bottom: 0.5vh solid #3c4043;
	background: #202124;
	line-height: 1.25;
}

.final-container {
	padding: 1vh;
	border-top: 0.5vh solid #3c4043;
	background: #202124;
	line-height: 1.25;
}

.final {
    padding: 1vh;
    border-top: 0.5vh solid #3c4043;
    position: sticky;
    bottom: 0;
    background: #202124;
	line-height: 1.25;
}

.twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.italic {
	font-style: italic;
}

.admin-button:hover {
	background-color: #333;
	color: white;
}

table, td, th {
	border: 2px solid #212121;
	border-collapse: collapse;
	font-family: 'Roboto Mono', monospace;
}

.false {
	background: pink;
	color: #030303;
}

.true {
	background: lightgreen;
	color: #030303;
}

.big-green-button {
	font-family: 'Roboto Mono', monospace;
	background-color: #45a049;
	cursor: pointer;
	color: white;
	font-size: 1vw;
	border-radius: 0.25vw;
	font-weight: bold;
	display: block;
	width: 100%;
	padding: 0.5vw;
	border: none;
}

.big-green-button:hover {
	background-color: #4CAF50;
}

.delete, .back, .tip {
	font-family: 'Roboto Mono', monospace;
	background-color: #990000;
	cursor: pointer;
	color: white;
	font-size: 1vw;
	border-radius: 0.25vw;
	font-weight: bold;
	display: block;
	width: 100%;
	padding: 0.5vw;
	border: none;
	margin-bottom: 1vh;
	text-align: center;
}

.back {
	background: grey;
}

.tip {
	background: orange;
}

.tip:hover {
	background: orange;
	filter: brightness(1.2);	
}

.delete:hover {
	background-color: #990000;
	filter: brightness(1.5);
}

.back:hover {
	background-color: grey;
	filter: brightness(1.2);
}

.submission-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.submission-card {
  width: 400px;
	cursor: unset !important;
}

.report-container {
	box-sizing: border-box;
	display: grid;
	gap: 0px; /* Adds space between the grid items, both horizontally and vertically */
	justify-content: center;
	align-items: center;
}

.report-card {
	box-sizing: border-box;
	height: 100%;
	padding: 10px;
	border-radius: 0vh;
	position: relative;
	background-color: #212121;
}

.report-img {
	width: 100%;
}

.sample-container {
	box-sizing: border-box;
	display: grid;
	gap: 20px; /* Adds space between the grid items, both horizontally and vertically */
	justify-content: center;
	align-items: center;
}

.sample-card {
	box-sizing: border-box;
	height: 100%;
	padding: 10px;
	border-radius: 0.5vh;
	position: relative;
	background-color: #212121;
	text-decoration: none;
	box-sizing: border-box;
	border: 0.25vh solid #212121;
	transition-duration: 0.5s;
	width: 100%;
	cursor: pointer;
}

.sample-img {
	width: 100%;
}

.sample-card:hover {
	border: 0.25vh solid white;
}

.card-body form {
  display: flex;
  flex-direction: column;
}

.card-body form input[type="submit"] {
	padding: 10px;
}

.card-body form input[type="text"],
.card-body form input[type="password"],
.card-body form input[type="email"] {
  padding: 10px;
}

.error {
    margin: auto;
    margin-bottom: 10px;
    color: red;
    margin-top: -24px;
}

.center {
	text-align: center !important;
	display: block;
	margin: auto;
}

.deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10vw, 1fr));
    gap: 1vw;
}

.reply {
	max-height: 20vw;
}

.guess-form {
	display: flex;
	margin-top: 2vh;
	margin-bottom: 2vh;
	justify-content: space-around;
}

.card {
	word-wrap: break-word;
	text-decoration: none;
	padding: 0.5vw;
	border-radius: 0.25vw;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.2);
	transition-duration: 0.25s;
}

.card:hover {
	background-color: rgba(255, 255, 255, 0.4);
}

.nodec {
	text-decoration: none;
}

.focus {
	display: grid;
	grid-template-columns: 0.5fr 1fr;
	gap: 2vw;
}

.border {
	border: 0.25vw solid grey;
	border-radius: 0.25vw;
}

.postcoin, .postcoin:hover {
	color: gold;
}

.token-info {
	padding: 5vw;
}

.token-info p {
	text-align: left;
	padding: 2vw;
	font-size: 1vw;
}

p, label, pre, select, option, button {
	font-size: 18px;	
}

select, option {
	cursor: pointer;
}

pre {
	text-wrap: wrap;
}

form h1 {
	padding: 1vh;
}

.token-info .button {
	margin-top: 2vw;
	margin-bottom: 2vw;
}

.post-form {
	margin: auto;
	margin-bottom: 1vh;
}

.nsfw {
	filter: blur(12px);
}

.blur-blocker {
	overflow: hidden;
}

/* Style for the dropzone and file input to cover entire area */
.dropzone {
	box-sizing: border-box;
	margin-bottom: 1vh;
	border: 0.25vw dashed #ccc;
	position: relative;
	display: flex;            /* Make this a flex container */
	flex-direction: column;   /* Stack items vertically */
	justify-content: center;  /* Center items vertically */
	align-items: center;      /* Center items horizontally */
	min-height: 16vh;            /* Or whatever height you desire for the dropzone */
	cursor: pointer;
}

.dropzone input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.dropzone p {
	margin: 0;
}

.dropzone * {
	padding: 1vh;
	cursor: pointer;
}

.dropzone label {
	pointer-events: none;
}

/* scrollbar customization */
/* For Webkit browsers like Chrome, Safari */
::-webkit-scrollbar {
    width: 0.5vw;  /* Adjust width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #3c4043;  /* Background color of the track */
}

::-webkit-scrollbar-thumb {
    background: grey;  /* Color of the moving scrollbar element */
}

.center-container {
	width: 100%;
}

/* Hide the checkboxes */
.options input[type="checkbox"] {
	display: none;
}

/* Default label styling - grey background */
div.options > label {
	background-color: grey;
	padding: 0.5vw;
	border-radius: 0.25vw;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.25s;
}

/* Styling for when the checkbox is checked - gold background */
div.options > input[type="checkbox"]:checked + label {
	background-color: gold;
	color: black;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 50%;
    height: 10px;
    border-radius: 5px;
    background: grey;
    outline: none;
	display: block;
	margin: auto;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: gold;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: gold;
    cursor: pointer;
}

.message-container {
    display: flex;
    flex-direction: column;
    height: 96vh;
	margin: 2vh;
	gap: 2vh;
}

.toolbox {
    height: 6vh;
    background: #3c4043;
    border-radius: 1vh;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.25vw;
	flex-shrink: 0;
}

.tool {
    flex-grow: 1;
    text-align: center;
    background: #202124;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	text-decoration: none;
}

#message-area {
    background: #202124;
    border-radius: 1vh;
    position: relative;
    overflow: auto;
    flex-grow: 1;
    /* height: 100%; */
    /* flex-shrink: 1; */
    display: flex;
    flex-direction: column;
}

#chat-state {
	flex: 1;
}

.messages {
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
}

.message-right {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	padding: 1vh;
}

.message-right p {
	width: fit-content;
	padding: 0.5vh;
	border-radius: 1vh;
	max-width: 80%;

	background: #7cacf8;
	color: white;

	overflow-wrap: break-word;
}

.message-left {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding: 1vh;
	line-height: 1.5;
}

.message {
	width: fit-content;
	padding: 1vh;
	border-radius: 1vh;
	color: white;
	overflow-wrap: break-word;
	margin: 1vh;
	line-height: 1.25;
}

form {
	width: 80%;
	margin: auto;
	display: flex;
	gap: 2vh;
	flex-direction: column;
}

.highlight {
	background: #666;
}

.clickable {
	transition-duration: 0.3s;
	cursor: pointer;
}

.clickable:hover, .button:hover, button:hover {
	background: #ba6ac8;
	cursor: pointer;
}

.message-bar input[type=text]::placeholder {
	color: white;
}

.message-bar input[type=text] {
	flex: 1;
	font-size: 1vw;
	background: #3c4043;
	border-radius: 1vh;
	color: white;
	padding: 0.5vh 1vh;
	border: none;
}

#send-button {
	font-size: 1vw;
	background: #3c4043;
	border-radius: 1vh;
	cursor: pointer;
	color: white;
	padding: 0.5vh 1vh;
	border: none;
}

.left-margin {
    position: fixed;
    left: 0;
    top: 0;
    width: 19vw;
    height: 100vh;
    text-align: center;
    font-size: 1vw;
    overflow-y: auto;
    background: #202124;
	display: flex;
	flex-direction: column;
}

.right-margin {
    position: fixed;
    right: 0;
    width: 20vw;
    height: 60vh;
    /* bottom: 0; */
    top: 20vh;
    /* padding: 0vh; */
    display: flex;
    flex-direction: column;
}

.footer-img {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 25vh;
    padding: 2vh;
}

.sign {
	text-align: center;
	border-radius: 1vh;
	background: #3c4043;
	padding: 4vh;
	width: fit-content;
	margin: auto;
}

.right-margin a {
	text-align: right;
}

.right-margin img {
    width: 60%;
    padding-bottom: 5%;
	aspect-ratio: 0.9;
}

.history-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.history-item {
    width: 100%;
    height: 4vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
}

.history-item p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1vw;
}

.spoiler {
	transition-delay: 0.5s;
	transition-duration: 0.3s;
	padding: 1vh;
	border-radius:0.25vw;
	text-decoration: none;
	cursor: pointer;
	background: white;
	color: white;
	font-size: 1vw;
	flex: 1;
	font-weight: bold;
}

.spoiler:hover {
	color: black;
}

.alfred {
	height: 16vh;
	width: auto;
	object-fit: contain;
}

.status-bar {
	display: flex;
	gap: 2vh;
}

.status-bar a {
	background: white;
	color: black;
}

.history-item img {
	aspect-ratio: 1;
	height: 3vh;
}

.mobile {
	display: none;
}

@media (orientation: portrait) {
	.desktop, .left-margin, .right-margin {
		display: none;
	}

	.navbar, .content, .admin-toolbar, .submission-card {
		width: 90vw;
	}

	.deck {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(40vw, 1fr));
	    gap: 1vw;
	}

	.reply {
		max-height: 80vw;
	}

	.reply img, .reply audio, .reply video {
		max-height: 60vw;
	}

	h1 {
		font-size: 6vw;
	}

	.token-info p {
		font-size: 4vw;
	}

	p, label, .button, textarea, pre, .message-bar input, #send-button {
		font-size: 3vw !important;
	}

	.button, .big-green-button {
		font-size: 5vw;
		padding: 1vh;
	}

	div.options > label {
		font-size: 5vw;
		border-radius: 1vw;
		padding: 1vh;
		margin: 1vh;
	}

	.focus {
		grid-template-columns: 1fr;
	}

	.focus img, .focus audio, .focus video {
		width: 100% !important;
		max-width: unset;
	}
}