@import url("https://fonts.upset.dev/css2?family=DM+Serif+Display:ital@0;1&family=Jost:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Handjet:wght@100..900&display=swap");

*,
*:before,
*:after {
	box-sizing: border-box;
	font-smooth: never;
}

br {
	display: block;
}

body {
	background-color: #754e1a;
	background-image: url("https://visitriverton.com/templates/green/dark-wood.png");
}

article > p {
	margin-top: 20px;
	margin-bottom: 20px;
	font-family: "Jost", serif;
	font-optical-sizing: auto;
	font-weight: 400;
}

#container {
	background-color: #c0c78c;
	border-top: 0;
	border-right: 5px solid #a6b37d;
	border-left: 5px solid #a6b37d;
	border-bottom: 5px solid #a6b37d;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	padding: 5px;
}

#content {
	width: 75%;
	margin: auto;
	margin-top: 30px;
	min-height: 200px;
	font-family: "Jost", serif;
	font-optical-sizing: auto;
}

@media screen and (max-width: 460px) {
	#content {
		width: 100%;
	}
}

#content::after {
	content: "";
	clear: both;
}

.clearfix::after {
	content: " ";
	clear: both;
	display: table;
}

#content table,
div {
	font-optical-sizing: auto;
	font-weight: 400;
	margin: 0;
}
table {
	margin-top: 10px;
}

#content b {
	font-weight: 600;
}

#content h1 {
	background-color: #c0c78c;
	border-left: 5px solid #a6b37d;
	border-top: 5px solid #a6b37d;
	border-right: 5px solid #a6b37d;
	border-bottom: 0;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	width: 100%;
	margin: 0;
	text-indent: 10px;
}
#content h1 a:link,
#content h1 a:visited {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-style: italic;
	text-align: left;
	font-size: 40px;
	text-transform: capitalize;
	letter-spacing: -2px;
	margin-bottom: 0;
	color: #626f47;
}

#content h1 a:hover {
	color: #754e1a;
	text-shadow: 2px 2px 5px white;
}
h2 {
	margin: 0;
	padding-left: 0;
	color: #674636;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 250%;
}

h3 {
	font-size: 160%;
	color: #674636;
	font-weight: 700;
	margin: 0;
}

h4 {
	font-size: 120%;
	font-weight: 600;
	color: #fff;
	background-color: #674636;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 8px;
	border-left: 5px solid #d6debe;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#login {
	background-color: #fff8e8;
	display: block;
	margin: 0;
	width: 200px;
	max-width: 100%;
	padding: 13px;
	border: 2px solid #674636;
	font-size: 0.85rem;
	font-weight: 650;
	padding-bottom: 20px;
	line-height: 130%;
}

#login a,
#login a:visited {
	text-decoration: underline;
	font-weight: 400;
}

#login h5 {
	font-weight: 600;
}

#login a:hover {
	text-decoration: none;
	font-weight: 400;
}

#login input,
#login button {
	width: 90%;
	display: block;
}

h5 {
	color: #674636;
	font-size: 110%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: 500;
}

#headerimg {
	border-top: 2px solid #674636;
	/* height: 100px; */
	width: 100%;
	background: url("/templates/green/images/header.png");
	background-repeat: repeat-x;
}

#toplist {
	list-style-type: none;
	padding: 5px 10px;
	margin: auto 0;
	font-size: 18px;
	text-align: center;
}
#toplist li {
	line-height: 35px;
	display: inline-block;
}
#container {
	padding-top: 10px;
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
	padding-bottom: 20px;
}
#right {
	width: 82%;
	padding: 5px;
	flex: auto;
	padding-left: 20px;
	padding-right: 5px;
	padding-top: 0;
	padding-bottom: 0;
}

#left {
	width: 18%;
	min-width: 150px;
	flex: auto;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 5px;
	color: #000;
	position: relative;
	left: 0;
	font-family: "Outfit", serif;
}

#left ul {
	list-style-type: none;
	padding: 5px 10px;
	margin-left: -10px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
	font-family: "Outfit", serif;
}
#left ul li {
	position: relative;
	line-height: 20px;
	left: 0;
	width: 100%;
}
#left ul li a,
#left a:visited {
	background-color: #fefae0;
	display: inline-block;
	margin: 2px;
	padding: 5px;
	font-weight: 600;
	width: 100%;
}
#left ul li a:hover {
	background-color: #fff8e8;
	color: #9a7e6f;
}

#container::after {
	clear: both;
}

#left a,
h1 a,
h2 a,
h3 a,
.accountcenter a {
	text-decoration: none;
}

.inline-button {
	text-decoration: none;
}

#right a:hover,
#announcement a:hover {
	text-decoration: none;
}

b {
	font-weight: 600;
}

#text {
	font-family: "Jost", serif;
}

.topbar {
	display: flex;
	flex-direction: row;
	flex-flow: row;
	align-content: space-between;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	background-color: #e7d4b5;
	border-bottom: 2px solid #674636;
	width: 100%;
}

#announcement {
	position: relative;
	display: inline-block;
	text-align: left;
	width: 45%;
	flex: auto;
	margin-left: 5px;
}
#announcement b {
	background-color: #fff;
	padding: 2px 5px 2px 5px;
}
@media screen and (orientation: portrait) {
	#announcement {
		width: 100%;
	}
}

#uibuttons {
	position: relative;
	display: inline-block;
	text-align: right;
	flex: auto;
	width: 300px;
	padding: 10px;
}

.ui {
	vertical-align: middle;
	margin-right: 10px;
}

/* status bar */

#season-wrapper {
	display: block;
	border: 2px solid #754e1a;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	width: 100%;
	background-color: #e7d4b5;
	color: #000;
	line-height: 130%;
}

#season-wrapper:before {
	content: " Today ";
	font-weight: 600;
	text-align: left;
	color: #fff8e8;
	font-family:
		"Outfit",
		sans serif;
	line-height: 200%;
	text-transform: uppercase;
	background-color: #674636;
	width: 100%;
	padding: 2px 5px;
	margin: 0;
}

#season img {
	margin-right: 5px;
}

#seasonimg {
	border: 2px solid #754e1a;
}

#date {
	text-align: right;
}

.step input[type="radio"] {
	margin-top: -1px;
	vertical-align: middle;
}
#user-wrapper {
	display: block;
	margin: 2px;
	border: 2px solid #754e1a;
	padding-top: 0;
	padding-right: 0;
	padding-left: 10px;
	padding-bottom: 10px;
	width: 95%;
	background-color: #e7d4b5;
	color: #000;
	line-height: 12px;
	border-radius: 1px;
}

.adopt-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-content: space-between;
	justify-content: space-between;
	align-items: flex-start;
}

.profilebox {
	display: inline-block;
	width: 44%;
	max-width: 100%;
	padding: 2px;
	background-color: #e7d4b5;
	border: 2px solid #754e1a;
	margin: 0;
	vertical-align: top;
	height: 100px;
}

#online {
	text-align: center;
}

.profilebox::after {
	clear: both;
}

#cash {
	line-height: 50%;
	font-size: smaller;
}

#cash a:link,
#cash a:visited,
#cash a:hover {
	font-weight: 700;
}

#career,
#dailies {
	font-size: smaller;
	line-height: 100%;
}

#career {
	margin-top: 10px;
}
#sidebaravatar {
	width: 50%;
	max-width: 100px;
}

hr {
	border: 1px solid #754e1a;
}

#left a:link,
#left a:visited,
#left a:hover {
	font-weight: 400;
}

.edit-actions {
	display: flex;
}

.gui.dash {
	/* float: right; */
	width: 40%;
	background-color: #fff;
	border-radius: 20px;
	padding: 10px;
}

@media (max-width: 800px) {
	.gui.dash {
		float: none;
		width: 100%;
		display: block;
	}
}

.gui.dash b {
	font-size: 120%;
	color: #626f47;
}

progress {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	border: 2px solid black;
	background-color: white;
}

progress::-moz-progress-bar {
	background: #914f1e;
}

progress::-webkit-progress-value {
	background: #914f1e;
}

progress::-webkit-progress-bar {
	background: white;
}

#shop table,
#pmtable table {
	background: none !important;
	border: none !important;
}

#shop tr {
	vertical-align: top;
	display: inline-block;
	padding: 1rem 0.5rem 1rem 0.5rem;
	margin: 1rem;
	border: 0;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.5);
	background-color: #fff;
	width: 25%;
	line-height: 14px;
}

#pmtable tr {
	vertical-align: top;
	display: inline-block;
	padding: 1rem 0.5rem 1rem 0.5rem;
	margin: 1rem;
	border: 0;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.5);
	background-color: #fff;
	width: 44%;
}

#shop td {
	display: block;
	background-color: #fff !important;
}

@media screen and (max-width: 460px) {
	#shop tr {
		display: block;
		width: 100%;
		overflow: auto;
		margin: 0;
		margin-bottom: 50px;
	}
}

#shop img {
	max-width: 100%;
}

#pmtable td:nth-child(2) {
	background-color: darkolivegreen;
	color: antiquewhite;
	font-weight: 500;
	border-radius: 20px;
}

#pmtable td:nth-child(1)::before {
	content: "From: ";
}
#pmtable td:nth-child(1) {
	font-style: italic;
}

#pmtable td:nth-child(3) {
	color: darkolivegreen;
	font-weight: 500;
	font-size: smaller;
	line-height: 40%;
}

#pmtable td:nth-child(4) {
	display: none;
}

#pmtable td {
	display: block;
	max-width: 100%;
}

.inlinetable {
	text-align: left;
	width: 100%;
	margin: 0;
}

.inlinetable th {
	padding-left: 10px;
	font-weight: 600;
	color: #626f47;
}

.inlinetable td {
	text-align: center;
}

.inlinetable tr:nth-child(odd) {
	background-color: #f7eed3;
}

/* news mod */

#news.news {
	border: 0;
}

.news .content {
	padding: 2px;
	margin-right: 10px;
	margin-bottom: 4px;
	border: 0;
}

.authorimg {
	display: none;
}

fieldset {
	border: 0;
	background-color: #cbd2a4;
	margin-bottom: 10px;
}

.news {
	color: #000;
	border: 0;
}

a,
a:active,
a:visited {
	color: #626f47;
}
a:hover {
	color: #000;
}

.news fieldset .content {
	text-align: justify;
	color: #000;
	border: 0;
	font-size: 100%;
	line-height: 150%;
}

.news .date {
	font-size: 100%;
	font-weight: 600;
	color: #674636;
}

.news .title {
	font-size: 130%;
	font-weight: 600;
	color: #3c552d;
	text-align: left;
}
.news {
	color: #674636;
}
.author {
	display: none;
}

.comments a {
	font-size: 110%;
	background-color: #fff;
	margin: 0;
	padding: 7px;
	border: 0;
	border-radius: 20px;
	font-weight: 600;
	float: right;
	text-align: right;
}
.comments a:hover {
	color: #000;
}

.news-banner {
	background-color: white;
	opacity: 0.7;
	border: 2px solid #eee;
	padding: 2px;
	font-weight: 500;
}

.livestock-grid {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.livestock-image:after {
	content: " ";
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	background: url("https://visitriverton.com/images/backgrounds/animalbg-front.png");
	z-index: 999;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
}

.livestock-card {
	flex: 1 0 33.33%;
	border: 0;
	padding: 15px;
	text-align: center;
}
.livestock-image {
	min-width: 50%;
	margin: 0 auto 10px;
	background: url("https://visitriverton.com/images/backgrounds/animalbg.png");
	background-position: center;
	background-size: cover;
	position: relative;
	border-radius: 20px;
}

.pages {
	color: brown;
}
.page {
	color: white;
	background-color: brown;
	border-radius: 5px;
	border: 0 solid brown;
}
.page:hover {
	color: orange;
	background-color: white;
	border: 0;
}

.cdate {
	font-size: 14px;
	font-weight: 600;
	color: #674636;
}

.cauthor {
	color: #674636;
	font-size: 14px;
}
.ccontent {
	font-size: 14px;
	text-align: justify;
	color: black;
}

.ccontent img {
	float: left;
	border: 0;
	padding: 2px;
	margin-right: 10px;
	margin-bottom: 4px;
}

#careform,
#treatform,
#stimform {
	display: flex;
	gap: 10px; /* Adjust the gap between buttons as needed */
}

a.inline-button,
a:visited.inline-button {
	width: 100%;
	padding: 10px;
	background-color: #e7d4b5;
	float: left;
	margin: 2px;
	border-radius: 10px;
	font-family: "Outfit", serif;
	font-weight: 500;
	border-top: 1px solid #754e1a;
	border-bottom: 3px solid #754e1a;
	border-right: 2px solid #754e1a;
}

a.inline-button:hover {
	background-color: #fff8e8;
}

a.inline-button:active {
	position: relative;
	top: 2px;
	border: 0;
}

#form #text {
	font-size: 40px !important;
}
select,
textarea {
	width: 100%;
	margin: 10px 5px 10px 5px;
	padding: 10px;
	background-color: #f5eddf;
	border-radius: 10px;
	font-family: "Outfit", serif;
	font-weight: 400;
	font-size: 16px;
	border-top: 2px solid #754e1a;
	border-left: 2px solid #754e1a;
	border-bottom: 2px solid #754e1a;
	border-right: 2px solid #754e1a;
}

input[type="radio"],
input[type="checkbox"] {
	width: inherit;
	text-align: left;
	background-color: #e7d4b5;
	vertical-align: top;
	float: none !important;
	cursor: pointer;
}

input[type="text"] {
	cursor: text !important;
}

input {
	width: 100%;
	padding: 10px;
	background-color: #f5eddf;
	float: left;
	margin: 5px;
	border-radius: 10px;
	font-family: "Outfit", serif;
	font-weight: 500;
	font-size: 16px;
	border-top: 1px solid #754e1a;
	border-left: 0;
	border-bottom: 3px solid #754e1a;
	border-right: 2px solid #754e1a;
}

button,
input[type="submit"] {
	width: 100%;
	padding: 10px;
	background-color: #e7d4b5;
	float: left;
	margin: 5px;
	border-radius: 10px;
	font-family: "Outfit", serif;
	font-weight: 500;
	font-size: 16px;
	border-top: 1px solid #754e1a;
	border-left: 0;
	border-bottom: 3px solid #754e1a;
	border-right: 2px solid #754e1a;
	cursor: pointer;
}
input:hover {
	background-color: #fff8e8;
}

button:hover,
input[type="submit"]:hover {
	cursor: pointer;
	background-color: #fff8e8;
}
button:active {
	position: relative;
	top: 2px;
	border: 0;
}

button:after {
	content: " ";
	clear: both;
}

select {
	border: 0;
	font-family:
		"Jost",
		Arial,
		sans serif;
}

.propertytable {
	width: 100%;
}

.propertytable th {
	margin: 0 auto;
	background-color: #674636;
	border-radius: 20px;
	color: #fff;
}

.propertytable td img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-width: 150px;
	max-width: 200px;
}

.propertytable td {
	text-align: center;
}
.propertytable strong {
	color: #754e1a;
}

.shopkeep {
	background-color: #fff;
	padding: 10px;
	border-radius: 20px;
	border: 2px solid #754e1a;
	font-weight: normal;
	min-height: 150px;
	margin-top: 20px;
	margin-bottom: 30px;
}

.shopkeep b {
	font-weight: normal;
	font-style: normal;
}

.bankbalance {
	text-align: center;
	font-family:
		Courier New,
		monospace;
	color: #32cd32;
	font-weight: 600;
	background-color: #2c2a2c;
	padding: 20px;
	width: 60%;
	margin: auto;
	line-height: 200%;
	border-radius: 20px;
	letter-spacing: 1px;
	text-shadow: lime 3px 3px 30px;
}

.bankbalance h3 {
	font-family:
		Courier New,
		monospace;
	color: #32cd32;
	font-weight: 800;
	text-transform: uppercase;
}

#bankForm {
	width: 61%;
	margin: 0 auto;
	background-color: #eaeadd;
	padding: 20px 30px;
	border-radius: 20px;
}

.bank-info {
	width: 60%;
	margin: 0 auto;
	padding: 20px 30px;
	border-radius: 20px;
	background-color: #fff8e8;
}

#sell {
	flex: 1;
	width: 95%;
	margin: 0;
	float: none;
}

#toss {
	width: 95%;
	margin: 0;
	float: none;
}

#tradetable,
#searchresult {
	border: 0;
	background-color: #fff;
	width: 100%;
}

.tab-content table {
	border: 0;
	background-color: #fff;
	width: 100%;
}

.tab-content table th,
#tradetable th,
#searchresult th {
	border: 0;
	font-size: 110%;
	font-weight: 600;
	color: #754e1a;
	background-color: #fff;
}
#tradetable th {
	background-color: #e7d4b5;
}

.tab-content table td,
#tradetable td,
#searchresult td {
	border: 0;
}
#tradetable td {
	padding: 2px;
}

.tab-content table tr:nth-child(even) {
	background-color: #f7eed3;
}
.tab-content input {
	width: 50px;
}

.houseupgrade:before {
	content: " Current Homestead ";
	font-style: normal;
	font-size: 120%;
	font-weight: 600;
	color: #8da26c;
	display: block;
	text-align: center;
}

.houseupgrade {
	background-color: white;
	width: 40%;
	float: right;
	padding: 5px;
	border: 2px solid #754e1a;
	border-radius: 20px;
	display: table;
}

@media screen and (max-width: 480px) {
	.houseupgrade {
		display: block;
		width: 100%;
	}
	.houseicon {
		width: 100%;
		margin-right: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.account-house {
		display: block;
		width: 100%;
	}

	.profilebox {
		display: inline-block;
		width: 50%;
		max-width: 100%;
		padding: 2px;
		margin: 0;
		vertical-align: top;
		height: 100%;
	}

	.profilebox::after {
		clear: both;
	}
}

.houseupgrade b {
	font-style: normal;
	font-size: 110%;
	font-weight: 300;
	color: #754e1a;
	display: block;
	text-align: center;
}

.houseupgrade img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-width: 150px;
	max-width: 200px;
}

.accountcenter img {
	vertical-align: middle;
}

.accountcenter a:link,
.accountcenter a:visited {
	background-color: #fefae0;
	padding: 3px 5px 3px 5px;
	margin: 0;
	font-size: 120%;
	font-weight: 500;
	color: #754e1a;
	border: 2px solid #754e1a;
	line-height: 200%;
}
.accountcenter a:hover {
	background-color: #fff8e8;
	color: #9a7e6f;
}

.errormessage {
	position: relative;
	top: 0;
	padding: 15px;
	margin-bottom: 20px;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	border-radius: 4px;
	margin: 0 auto;
	height: 10%;
	width: 50%;
	text-align: center;
	z-index: 12;
}

.successmessage {
	position: relative;
	top: 0;
	padding: 15px;
	margin-bottom: 20px;
	color: #3c763d;
	border-color: #d6e9c6;
	border-radius: 4px;
	margin: 0 auto;
	width: 50%;
	height: 10%;
	text-align: center;
	z-index: 12;
}

legend {
	font-size: 120%;
	font-weight: 600;
}

.riverton-index {
	width: inherit;
	display: inline-block;
	clear: both;
}

.riverton-index p img {
	max-width: 100%;
}
.riveron-index .left {
	float: left;
}

.riverton-index .right {
	float: right;
}

#prefish {
	position: relative;
}

#prefish article img {
	max-width: 60vw;
}

#fishing {
	position: absolute;
	top: 10px;
	left: 20px;
	width: 25rem;
	height: 10rem;
	max-width: 100vw;
	max-height: 100dvh;
	margin: 0 auto;
	padding: 10px;
	padding-bottom: 20px;
	background-color: #fff8e8;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
	/* border: 2px solid #754e1a; */
	z-index: 900;
}

#gathering {
	position: absolute;
	bottom: 60px;
	left: 20px;
	width: 50%;
	height: auto;
	max-width: 100%;
	max-height: 100dvh;
	margin: 0 auto;
	padding: 10px;
	padding-bottom: 20px;
	background-color: #fff8e8;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
	/* border: 2px solid #754e1a; */
	z-index: 900;
}

#table b {
	display: block;
	color: #fff;
	background-color: #674636;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 8px;
	border-left: 5px solid #d6debe;
	width: 100%;
}
#table td {
	padding: 5px;
	text-align: justify;
}

#adopttable,
#readopttable {
	width: 100%;
	border: 0;
}
#adopttable th,
#readopttable th {
	background-color: #f7eed3;
	border: 0;
	color: #754e1a;
}
#adopttable td,
#readopttable td {
	border: 0;
	background-color: #fff8e8;
}
#readopttable td {
	line-height: 100%;
}
#readopttable img {
	vertical-align: middle;
}

#adopttable td:nth-child(3),
#readopttable td:nth-child(2) {
	background: url("https://visitriverton.com/images/backgrounds/animalbg.png");
	background-position: center;
	background-size: cover;
	position: relative;
}

#adopttable td:nth-child(3):after,
#readopttable td:nth-child(2):after {
	content: " ";
	width: 100%;
	height: 260px;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	background: url("https://visitriverton.com/images/backgrounds/animalbg-front.png");
	z-index: 999;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
}

#adopttable tr,
#readopttable tr {
	background-color: #fff8e8;
}

#adopttable input {
	width: 50%;
}

#shoplist,
#pmtable {
	width: 100%;
}

#shoplist,
#shoplist th,
#pmtable,
#pmtable th {
	border: 0;
	th {
		background-color: #fefae0;
		color: #9a7e6f;
	}
	td {
		border: 0;
		background-color: white;
	}
	td:nth-child(2) {
		padding: 5px;
	}
	td:nth-child(3),
	th:nth-child(3) {
		padding: 10px;
	}
}

#shop {
	border: 0;
	width: 100%;
}

#shop th {
	font-weight: 500;
	color: #9a7e6f;
}

#shop td,
#shop th {
	background-color: #f7eed3;
	border: 0;
	padding: 5px 10px;
}
#shop td:nth-child(3) {
	font-size: 100%;
	color: #754e1a;
	font-weight: 500;
}
#shop td:nth-child(6) {
	background-color: #fff;
}
#shop td:nth-child(7) {
	background-color: #fff;
}

.directory {
	background-color: white;
}

.mailbox {
	display: flex;
	gap: 10px;
}

.mailbox .inline-button {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 54%;
}

#daycare-wrapper img {
	width: 70%;
}

.notif {
	margin-left: 3px;
	padding: 1px 5px;
	background-color: #e50000;
	color: #fff;
}

label strong {
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: 500;
}

#postbar {
	background-color: #fff;
	width: 100%;
}

#privatemessage {
	background-color: #fff;
	border: 2px solid #653700;
}

#pmsubject {
	display: block;
	background-color: #f7eed3;
	width: 100%;
	padding: 2px;
}

#pmsentdate {
	background-color: #f7eed3;
	margin: 0;
	width: 100%;
	padding: 2px;
	display: block;
}
/* Forum */
.forum-category {
	margin: 10px 0;
	padding: 15px;
	background: #f9f9f9;
}
.forum-category h4 {
	margin: 0 0 10px 0;
}
.forum-category a {
	text-decoration: none;
	color: #000;
}
.forum-category a:hover {
	color: #674636;
	text-decoration: underline !important;
}
.thread-count {
	color: #666;
	font-size: 0.9em;
}
.forum-post {
	margin: 10px 0;
	background: #fff;
	border-radius: 10px;
}
.forum-post h3 {
	margin: 10px;
}
.post-header {
	border-bottom: 2px solid #b6daa1;
	padding: 15px;
	margin-bottom: 10px;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: #fff8e8;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.post-header strong {
	flex: 1;
	padding: 0 10px;
}
.post-header span {
	flex: 0;
	text-align: left;
	background-color: #dfdfdf;
	padding: 2px 5px;
	color: #666;
	white-space: nowrap;
}
.post-meta {
	flex: 7;
	color: rgba(89, 74, 67, 0.71);
	font-size: 0.8em;
	text-align: right;
	margin: 5px;
}
.signature {
	border-top: 1px solid #674636;
	margin-top: 10px;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
}
.forum-form {
	margin: 20px 0;
}
.forum-form button {
	background: #674636;
	color: white;
	cursor: pointer;
}
.forum-post-content {
	padding-left: 15px;
	padding-right: 15px;
}
.forum-edit {
	padding: 2px 5px;
	margin: 15px 0 0 15px;
	background-color: #fdfdaa !important;
	color: saddlebrown;
	text-decoration: none;
	font-weight: 600;
}
.forum-delete {
	background-color: #d9d9d9;
	margin: 15px;
	padding: 2px 5px;
	color: #000;
	text-decoration: none;
	font-weight: 600;
}
.forum-delete:hover {
	color: brown;
	background-color: #ca8f8f;
}
.markdownguide {
	width: 70%;
	background-color: antiquewhite;
	padding: 10px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-size: 0.8em;
}
.markdownguide summary {
	text-decoration: underline;
}
.markdownguide details[open] summary {
	text-decoration: none;
}
.markdownguide details:nth-child(2) {
	text-align: right;
}

@media (max-width: 500px) {
	.post-header {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
	}

	.post-header img {
		margin-bottom: 10px;
		align-self: center;
	}

	.post-header strong {
		flex: none;
		width: 100%;
		text-align: center;
		padding: 5px 0;
		order: 1;
	}

	.post-header span {
		flex: none;
		align-self: center;
		order: 2;
		margin: 5px 0;
	}

	.post-meta {
		flex: none;
		width: 100%;
		text-align: center;
		margin: 5px 0;
		order: 3;
	}
}

.account-house {
	display: flex;
	flex-flow: row wrap;
	max-width: 100%;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin: 20px;
}

.houseicon {
	width: 150px;
	background-color: white;
	border-radius: 20px;
	text-align: center;
	padding: 10px;
	border: 0 solid #754e1a;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.houseicon img {
	width: 125px;
}

.farmplots {
	display: flex;
	flex-flow: wrap;
	width: 100%;
	max-width: inherit;
	justify-content: center;
}

.singleplot {
	flex: 1 0 20%;
	/* width: 20%; */
	max-width: 150px;
	background-image: url("https://visitriverton.com/images/farms/cropbackground.png");
	background-repeat: repeat;
	background-size: 170px;
	background-position: top left;
}

.singleplot button {
	width: 95%;
	display: block;
	margin: 0 auto;
}

.singleplot img {
	width: 150px;
}

.tabs {
	display: flex;
	flex-direction: column;
}

.tab-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
}

.tab-links li {
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	padding: 0;
	font-size: 90%;
	white-space: normal;
}

.tab-links a {
	display: block;
	padding: 10px;
	cursor: pointer;
	text-decoration: none;
	color: #754e1a;
	border: none;
	font-weight: 600;
	background-color: #e7d4b5;
	white-space: nowrap;
}

.tab-links a:hover {
	color: #754e1a;
	background-color: #fff;
}

.tab-links a:active {
	background-color: #fff;
}

.tab-content {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

.tab-content td img {
	width: 100px;
}

.tab-content #sell img {
	width: 30px;
}

.tab-content #tossform img {
	width: 30px;
}
.tab-content table {
	width: 100%;
}

.tab-content > .tab {
	display: none;
	margin: 0;
	padding: 0;
	height: auto; /* Adjust this as needed to set a consistent height */
}

.tab-content > .tab.active {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto; /* Adjust this as needed to set a consistent height */
}

.win-container {
	text-align: center;
	padding: 20px;
	max-width: 600px;
	margin: 0 auto;
}

.lose-container {
	text-align: center;
	padding: 20px;
	max-width: 600px;
	margin: 0 auto;
}
.explore-table {
	border-spacing: 0;
	border-collapse: collapse;
	background-image: url("https://visitriverton.com/images/shops/grass-bg.png");
	background-repeat: repeat;
	background-size: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
.explore-table col {
	border: 0;
	margin: 0;
}
.explore-table tr {
	border: 0;
}

.profileinfo #money {
	width: 12px;
	height: 12px;
}
.profileinfo {
	height: 100%;
	width: 100%;
}

.game-rules {
	padding-bottom: 20px;
}
details > summary {
	list-style: none;
	cursor: pointer;
}
details > summary::-webkit-details-marker {
	display: none;
}

/* Competition styles */
.active-competition,
.admin-section {
	background-color: #d9e7c1;
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 5px;
}

.admin-section {
	margin-top: 30px;
}

.active-competition {
	text-align: left;
	width: 100%;
	margin: auto;
	padding: 5px 10px;
	font-family: "Handjet", monospace;
	font-size: 20px;
	color: #fff;
	font-weight: 400;
	background-color: #29222e;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.active-competition p {
	color: #fff;
	margin: 0;
	font-family: "Handjet", monospace !important;
	font-weight: 400;
	padding: 0;
	font-size: 20pt;
	border-bottom: 1px solid #000;
}
.active-competition h3 {
	color: #fff;
	text-shadow: #fff 1px 0 3px;
	margin: 0;
	text-align: center;
	font-family:
		"Jost",
		san serif;
	text-transform: none;
}

/* Competition results section */
.competition-results {
	margin-bottom: 20px;
	background-color: #29222e;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.competition-cards-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	margin-bottom: 30px;
	min-width: 0;
	align-content: stretch;
	align-items: stretch;
}

.competition-card {
	background-color: #29222e;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	min-width: 45%;
	max-width: 100%;
	border: 5px solid black;
	flex-basis: 0;
	width: inherit;
}

.competition-card h5 {
	text-align: center;
	color: #fff;
	text-shadow: #fff 1px 0 3px;
}

.competition-card br {
	display: none !important;
}

.competition-results-table,
.competition-entries-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
	font-size: 1em;
}

.competition-results-table th,
.competition-results-table td {
	padding: 4px;
	text-align: left;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #000;
	font-family: "Handjet", monospace;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 1px;
}

.competition-entries-table th,
.competition-entries-table td {
	letter-spacing: 1px;
}

.competition-entries-table {
	padding: 4px;
	text-align: left;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #000;
	font-family: "Handjet", monospace;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 20pt;
}

.competition-results-table {
	color: #ffdf22;
	font-size: 16pt;
	text-shadow: #ffdf22 1px 0 5px;
}

.competition-results-table th {
	color: #fff;
	text-shadow: #fff 1px 0 5px;
}

.competition-results-table td {
	color: #ffdf22;
	text-shadow: #ffdf22 1px 0 5px;
	overflow-wrap: break-word;
}

.competition-entries-table td {
	color: #ffdf22;
	text-shadow: #ffdf22 1px 0 5px;
}

.competition-entries-table th {
	color: #fff;
	text-shadow: #fff 1px 0 5px;
}

.status-injured {
	color: #e50000 !important;
	text-shadow: #e50000 1px 0 5px;
}

.status-finished {
	color: #5cb85c;
	text-shadow: #5cb85c 1px 0 5px;
}

.claim-prize-container {
	margin-top: 15px;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
}

.congratulations-text {
	margin-bottom: 10px;
	font-weight: bold;
	color: #5cb85c;
	border-radius: 50px;
}

.claim-prize-container button {
	background-color: #5cb85c;
	color: white;
	padding: 8px 20px;
	font-weight: bold;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
}

.claim-prize-container button:hover {
	background-color: #4cae4c;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.competition-card label {
	display: block;
	margin: 10px 0 5px;
	font-weight: normal;
}

.competition-card input[type="text"],
.competition-card select {
	width: 100%;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.competition-card button {
	padding: 8px 15px;
	background-color: #5cb85c;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 10px;
}

.competition-card button:hover {
	background-color: #4cae4c;
}

.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	text-transform: none;
}

.alert-success,
.success-message {
	font-family: "Jost", serif;
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
.alert-status,
.status-message {
	font-family: "Jost", serif;
	color: #8f5602;
	background-color: #fff0b3;
	border-color: #e6d594;
}

.alert-error,
.error-message {
	font-family: "Jost", serif;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.competition-card {
		max-width: 100%;
	}
}

.sign {
	display: block;
	margin: 0 auto;
	text-align: center;
	background-color: #876e4b;
	width: 500px;
	color: #f1f1f1;
	padding: 10px 5px;
}

.signtext {
	display: block;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
	text-align: center;
	background-color: #fff8e8;
	color: #411900;
	padding: 10px 5px;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.training-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin: 20px 0;
}

.training-table th {
	padding: 12px 15px;
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: #876e4b;
	color: #fefefe;
}

.training-table td {
	padding: 12px 15px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
	background-color: #fff;
}

.training p {
	line-height: 20px;
	background-color: #fff;
	border-radius: 20px;
}

/* Cheat */
#game-container {
	margin: 0 auto;
	padding: 20px;
}

.player-hand .cards {
	display: flex;
	flex-wrap: wrap;
}

.card {
	display: inline-block;
	width: 50px;
	height: 70px;
	margin: 5px;
	padding: 10px;
	border: 1px solid #000;
	border-radius: 5px;
	text-align: center;
	font-size: 16px;
	line-height: 75px;
	background-color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card:nth-child(odd) {
	color: #8c000f;
}

.card.selected {
	background-color: #ffdddd;
}

button {
	padding: 10px 20px;
	margin-right: 5px;
	cursor: pointer;
}
#betspan {
	background-color: #f9f9f9;
	text-align: center;
	padding: 5px;
	color: #3f9b0b;
	border-radius: 20px;
	border: 1px solid #ccc;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#opponents {
	float: left;
	width: 45%;
	height: 150px;
	margin-top: 10px;
	background-color: #f9f9f9;
	text-align: center;
	padding: 5px;
	border-radius: 15px;
	border: 1px solid #ccc;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#opponents p {
	margin-top: 10px;
	line-height: 14px;
}
#pile-info {
	float: right;
	width: 45%;
	height: 150px;
	margin-top: 10px;
	background-color: #f9f9f9;
	padding: 5px;
	border-radius: 15px;
	border: 1px solid #ccc;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#pile-info h3 {
	text-align: center;
	margin: 0;
}
#pile-info p {
	text-align: center;
	line-height: 14px;
}
#game-status {
	padding: 10px;
	text-align: center;
	border-radius: 15px;
	min-height: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#win-screen,
#lose-screen {
	padding: 20px;
	border: 2px solid gold;
	background-color: #fffaf0;
	border-radius: 10px;
	margin-top: 20px;
}

#lose-screen {
	border-color: #ff6b6b;
	background-color: #fff0f0;
}

.opponent {
	margin-bottom: 5px;
}

.current-player {
	font-weight: bold;
	color: #7f2b0a;
}

#sellform {
	width: inherit;
}
#sellform input {
	float: none !important;
}
#friends {
	width: 100%;
}

.horse-info {
	width: 270px;
	float: left;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	margin: 10px;
	padding: 10px;
}
.horse-info::after {
	clear: both;
}

.kitchen-prep {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.knife {
	width: 100%;
}

.mortar {
	width: 100%;
}

.mobile-only {
	display: none;
}

.item-details {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	width: 140px;
	border-radius: 20px;
	margin: 0 auto;
	padding: 10px 15px;
	margin-bottom: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.item-details img {
	text-align: center;
	margin: 0 auto;
	width: 100px;
}
.item-details.item-rarity {
	margin-bottom: 5px !important;
}
.found-item-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	padding: 10px;
}

#sidebaravatar,
#avatar {
	border-radius: 20px;
	border: 2px solid #754e1a;
}

#left ul li a:link,
#left ul li a:visited {
	font-weight: 500;
}

#avatar {
	margin: 5px;
}

/* Player shop items */
.shop-header {
	margin-bottom: 30px;
	padding-bottom: 20px;
}

.shop-owner {
	font-weight: 500;
	margin: 10px 0 10px 0;
}

.shop-description {
	line-height: 1.5;
	margin-bottom: 20px;
}

.shop-actions {
	margin-top: 20px;
}

.action-button,
.visit-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #4caf50;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	margin-right: 10px;
	transition: background-color 0.2s;
}

.back-link {
	display: inline-block;
	margin-top: 20px;
	color: #4caf50;
	text-decoration: none;
	font-weight: bold;
}

/* Shop List Styles */
.shop-list {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(33%, 1fr);
	gap: 10px;
	margin-top: 30px;
	justify-content: space-evenly;
}

.shop-card {
	border-radius: 8px;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition:
		transform 0.2s,
		box-shadow 0.2s;
	height: 100%;
	line-height: 30px;
}

.shop-card .shop-description {
	flex-grow: 1;
	margin-bottom: 15px;
	font-size: 0.95em;
}

.shop-card .item-count {
	font-weight: bold;
	color: #4caf50;
	margin-bottom: 15px;
}

.shop-card .visit-button {
	align-self: flex-start;
	margin-top: auto;
}

/* Shop Item Styles */
.inventory-section {
	margin-bottom: 40px;
}

.inventory-section h2 {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	color: #2e7d32;
}

.item-grid {
	display: flex;
	flex-flow: row wrap;
	flex-direction: row;
	align-content: space-between;
	align-items: center;
	justify-content: center;
	width: 100%; /* Ensure full width */
}

.danger {
	background-color: #f44336;
}
.danger:hover {
	background-color: #d32f2f;
}

.shop-item {
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	transition: transform 0.2s;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	min-width: 150px;
	margin: 10px;
}
.item-image {
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f9f9f9;
	padding: 10px;
}

.item-image img {
	max-width: 100%;
	max-height: 130px;
	object-fit: contain;
}

.shop-item-details {
	padding: 15px;
}

.shop-item-details h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.1em !important;
	color: #333 !important;
	white-space: wrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.item-price {
	font-weight: bold;
	color: #4caf50;
	margin-bottom: 15px;
	font-size: 1.1em;
}

.buy-button {
	width: 100%;
	padding: 8px 0;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s;
}

.buy-button:hover {
	background-color: #45a049;
}

.empty-shop {
	padding: 30px;
	text-align: center;
	background-color: #f9f9f9;
	border-radius: 8px;
	margin-top: 20px;
}

/* Preview box styles */
.preview-box {
	margin-top: 10px;
	text-align: center;
	min-height: 100px;
	border: 0;
	padding: 10px;
	border-radius: 3px;
}
.preview-box img {
	max-width: 100px;
	max-height: 100px;
}

/* Help Center */
#helptable {
	width: 100%;
}

#helptable th {
	background-color: #e7d4b5;
	color: #754e1a;
	border-radius: 10px;
	padding: 10px;
}

/* Cafe */

.step {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.shop-list {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}

	.item-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 15px;
	}

	.item-image {
		height: 120px;
	}

	.item-image img {
		max-height: 100px;
	}
	.mobile-only {
		display: block;
	}
}

@media (max-width: 480px) {
	.shop-list {
		grid-template-columns: 1fr;
	}

	.item-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 10px;
	}

	.action-button,
	.visit-button {
		display: block;
		margin-bottom: 10px;
		text-align: center;
	}

	.adopt-container {
		flex-direction: column;
	}

	#careform,
	#treatform,
	#stimform {
		display: block;
	}
}

.footer {
	font-family:
		"Jost",
		Arial,
		sans serif;
	opacity: 1;
	color: #a78a7b;
	text-align: center;
	width: 100%;
}

.footer a,
.footer a:visited {
	color: peachpuff;
	font-weight: 500;
}

.footer a:hover {
	color: #c0c78c;
	font-weight: 500;
}

@media screen and (-ms-high-contrast: none) {
	.footer a,
	.footer a:visited {
		color: #5c320c;
		font-weight: 500;
	}

	.footer a:hover {
		color: #6c7525;
		font-weight: 500;
	}
}

@media only screen and (max-width: 1000px), (min-device-width: 768px) and (max-device-width: 1024px) {
	.adopt-container {
		flex-direction: row;
	}
	.tab-links {
		display: block;
		justify-content: flex-start;
	}

	/* Force table to not be like tables anymore */
	table,
	tbody,
	th,
	td,
	tr {
		display: block;
		border: 0;
	}
	tr th {
		display: none;
		border: 0;
	}

	.skilltable tr th {
		display: block;
		padding: 0;
		border: 0;
		text-align: center;
	}

	.skilltable th {
		background-color: #fff !important;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
		border: 0;
	}

	tr {
		border: 0p;
	}

	td {
		/* Behave  like a "row" */
		border: 0;
		border-bottom: 0;
		position: relative;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	Label the data
	*/
	#inventory_$category td:nth-of-type(1):before {
		content: "Image";
	}
	#inventory_$category td:nth-of-type(2):before {
		content: "Name";
	}
	#inventory_$category td:nth-of-type(3):before {
		content: "Rarity";
	}
	#inventory_$category td:nth-of-type(4):before {
		content: "Description";
	}
	#inventory_$category td:nth-of-type(5):before {
		content: "Quantity";
	}
	#inventory_$category td:nth-of-type(6):before {
		content: "Use";
	}
	#inventory_$category td:nth-of-type(7):before {
		content: "Sell";
	}
	#inventory_$category td:nth-of-type(8):before {
		content: "Toss";
	}

	.competition-card {
		flex-direction: column !important;
		width: 100% !important;
	}
}

.item-drop-container {
	margin: 10px 0;
	padding: 15px;
	background-color: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.item-drop-notification {
	display: flex;
	align-items: center;
}
.item-drop-image {
	flex: 0 0 100px;
	text-align: center;
}
.item-drop-image img {
	max-width: 80px;
	max-height: 80px;
}
.item-drop-message {
	flex: 1;
	padding-left: 15px;
}
.item-rarity {
	font-weight: bold;
	margin-top: 5px;
}
.Common {
	color: #2c3e50;
}
.Uncommon {
	color: #27ae60;
}
.Rare {
	color: #8e44ad;
}

.very-rare { color: #650d65; }

.ultra-rare { color: #b79a00; }

.clear {
	clear: both;
}

.onlinelistt {
	background-color: white;
	padding: 5px 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	line-height: 50px;
}

.resident-directory {
	display: flex;
	flex-flow: row wrap;
	margin: 10px;
	width: inherit;
}

.resident-card {
	flex: 1 30%;
	background-color: #e7d4b5;
	border: 2px solid #947953;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	transition: transform 0.2s;
	margin: 5px;
}

.resident-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.resident-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0 auto 10px;
	display: block;
}

.resident-name {
	font-weight: bold;
	color: #754e1a;
	text-decoration: none;
}

#new-entry {
	background-color: #e7d4b5;
	width: 70%;
}
.diary-entry h5 {
	cursor: default;
}
.diary-entry h5 span {
	background-color: white !important;
	border-radius: 25px;
	padding: 5px;
}

.diary-entry h1 {
	background-color: transparent !important;
	border-left: 0 !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	margin: 0;
	text-indent: 0 !important;
}

.diary-entry h2 {
	font-size: 160% !important;
}

.diary-entry {
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 10px;
	background-color: #fff8e8;
}

.diary-link {
	text-decoration: underline;
	font-size: 12px;
	padding: 5px;
	color: #754e1a !important;
	position: relative;
	bottom: 2px;
	margin: 2px auto;
	text-align: right;
}
.diary-link:hover {
	color: #000 !important;
	text-decoration: none;
}

.pagination {
	text-align: center;
	margin: 30px 0;
	display: flex;
	width: 90%;
}

.pagination a,
.pagination span {
	display: inline-block;
	padding: 0;
	margin: 0 2px;
	border: 1px solid #947953;
	text-decoration: none;
	color: #754e1a;
}
.pagination .current {
	margin: 5px;
}

.collections-container {
	margin: 20px 0;
}

.collections-section {
	margin-top: 20px;
	padding-top: 15px;
}
.collections-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 10px;
	justify-content: center;
}
.collection-badge {
	width: 120px;
	text-align: center;
	margin-bottom: 15px;
}
.collection-badge img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ddd;
	transition: all 0.3s ease;
	background-color: white;
}
.collection-badge.incomplete img {
	opacity: 0.4;
	filter: grayscale(100%);
}
.collection-badge.complete img {
	border-color: gold;
	box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
.collection-badge h5 {
	margin: 5px 0 2px;
	font-size: 15px;
}
.collection-badge .status {
	font-size: 15px;
	margin: 0;
}
.collection-badge .status.complete {
	font-weight: 500;
	color: green;
}
.collection-badge .status.incomplete {
	color: #888;
}
.completion-date {
	font-size: 14px;
	font-style: italic;
	display: block;
	margin-top: 2px;
}
.collection-section {
	margin-bottom: 30px;
	background-color: white;
	padding: 5px;
	border: 2px solid #754e1a;
	border-radius: 20px;
}
.collection-title {
	font-size: 18px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.collection-complete {
	color: green;
	font-weight: 600;
	text-transform: uppercase;
}
.collection-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.collection-item {
	width: 100px;
	height: 150px;
	background-color: white;
	border-radius: 5px;
	overflow: hidden;
	text-align: center;
	border: 1px solid #ddd;
}
.collection-item img {
	width: 100%;
	height: 80px;
	object-fit: contain;
	opacity: 0.3;
}
.collection-item.found img {
	opacity: 1;
}
.collection-item .name {
	font-size: 12px;
	overflow: hidden;
	font-weight: 600;
	color: #674636;
}

.collection-item .desc {
	font-size: 10px;
	border-radius: 2px;
	margin-left: 2px;
	margin-right: 2px;
	z-index: 100;
}

.friends-directory {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	margin-top: 20px;
}
.friend-card {
	background: white;
	border-radius: 10px;
	padding: 15px;
	width: 200px;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.friend-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 10px;
}
.friend-name {
	font-weight: bold;
	margin-bottom: 5px;
}
.friend-status {
	font-size: 12px;
	margin-bottom: 10px;
}
.friend-status.online {
	color: green;
}
.friend-status.offline {
	color: #888;
}
.friend-actions {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.friend-actions a {
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 5px;
	font-size: 12px;
	display: block;
}

@media (max-width: 800px) {
	.farmplots {
		flex-direction: column;
	}
	.houseicon {
		flex-direction: column;
	}
	#opponents,
	#pile-info {
		width: 100%;
	}
}

/* leaderboard */
.unclaimed-prize {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
	padding: 15px;
	height: 100%;
}

.leaderboard-table {
	overflow: hidden;
	margin: auto !important;
	width: 500px;
}

.leaderboard-header {
	height: 50px;
	padding: 12px !important;
	font-size: 120%;
}

/* Column Styling */
.rank-col {
	flex: 0 0 80px;
	text-align: center;
}

.name-col {
	flex: 1;
	font-weight: 500;
	text-align: center;
}

.wins-col {
	flex: 0 0 100px;
	text-align: center;
}

/* No Data Message */
.no-data {
	text-align: center;
	padding: 40px 20px;
	color: #666;
}

/* User Rank Section */
.user-rank {
	margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 600px) {
	.leaderboard-table {
		width: 100%;
	}
	.leaderboard-header,
	.leaderboard-row {
		font-size: 14px;
		padding: 8px 0;
		display: flex;
	}

	.rank-col {
		flex: 0 0 60px;
	}

	.wins-col {
		flex: 0 0 80px;
	}

	.money-col {
		flex: 0 0 100px;
		font-size: 12px;
	}

	.name-col {
		padding: 0 8px;
	}
}

/* Medal Colors for Top 3 */
.leaderboard-row:nth-child(1) .rank-col {
	color: #ac9100; /* Gold */
	font-weight: 800;
}

.leaderboard-row:nth-child(2) .rank-col {
	color: #4c4c4c; /* Silver */
	font-weight: 800;
}

.leaderboard-row:nth-child(3) .rank-col {
	color: #cd7f32; /* Bronze */
	font-weight: 800;
}

/* Badges */

.badges-section {
	margin-top: 30px;
}

.badges-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 10px;
	justify-content: center;
}

.badge-item {
	padding: 15px;
	text-align: center;
	height: 150px;
}

.badge-item.earned img {
	border: 2px solid #28a745;
}

.badge-item.not-earned {
	border-color: #ddd;
	opacity: 0.6;
}

.badge-item img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	transition: all 0.3s ease;
	background-color: white;
	border-radius: 100%;
	padding: 10px;
}

.badge-item.not-earned img {
	filter: grayscale(100%);
}

.badge-item h5 {
	font-size: 15px;
	margin: 0;
}

.custom-text {
	color: forestgreen;
	font-weight: 600;
}

/* Trading */
.response-card,
.trade-card {
	background-color: #f9f9f9;
	width: 50%;
	margin: 10px auto;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
@media (max-width: 580px) {
	.trade-card,
	.response-card {
		width: 100%;
	}
}
.trade-card {
}
.trading-header h4 a,
.trading-header h4 a:visited {
	color: #fff8e8;
	font-weight: 600;
}
.trade-type {
	text-align: center;
	color: #bba68a;
	font-style: italic;
}
.trading-content {
}
.trade-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
}
.trade-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	transition: background-color 0.2s;
}
.trade-item:hover {
	background-color: #f5f5f5;
}
.trade-item input[type="checkbox"] {
	margin-bottom: 5px;
}
.trade-item img {
	margin-bottom: 5px;
}
.trade-item span {
	font-size: 12px;
	text-align: center;
}
.trade-items-display {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
}
.trade-item-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
	border-radius: 5px;
	background-color: #f9f9f9;
}
.trade-item-display img {
	margin-bottom: 5px;
}
.trade-item-display span {
	font-size: 12px;
	text-align: center;
}

.bar-header {
	text-align: center;
	margin-bottom: 30px;
	padding: 20px;
	background: linear-gradient(135deg, #8b4513, #d2691e);
	color: white;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.npc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}
.npc-card {
	background: #f9f9f9;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease;
}
.npc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.npc-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
.npc-image {
	width: 100px;
	height: 100px;
	margin-right: 15px;
}
.npc-info h3 {
	margin: 0 0 5px 0;
}
.relationship-status {
	font-size: 14px;
	font-weight: 400;
	padding: 4px 8px;
	display: inline-block;
}
.tier-stranger {
	background: #dfdfdf;
	color: #666;
}
.tier-acquaintance {
	background: #e3f2fd;
	color: #1976d2;
}
.tier-friend {
	background: #e8f5e8;
	color: #388e3c;
}
.tier-close-friend {
	background: #fff3e0;
	color: #f57c00;
}
.relationship-bar {
	width: 100%;
	height: 20px;
	background: #eee;
	margin: 10px 0;
	overflow: hidden;
	border: 2px solid black;
}
.relationship-progress {
	height: 100%;
	background: #914f1e;
}
.interaction-buttons {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	flex-flow: wrap;
}
.btn-disabled {
	background: #ccc !important;
	color: #666 !important;
	cursor: not-allowed !important;
}
.interaction-status {
	font-size: 12px;
	color: #666;
	margin-top: 8px;
}

.availablequest form {
	display: block;
	margin-bottom: 20px;
}

.availablequest button {
	float: none;
}

.activequest form {
	display: block;
	margin-bottom: 20px;
}

.round-info {
	text-align: center;
	background: white;
	padding: 15px;
	border-radius: 10px;
	margin: 20px 0;
}

.dice-container {
	text-align: center;
	margin: 20px 0;
}

.dice-row {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.die {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.die.held {
	background: #90ee90;
	border-color: #228b22;
}

.die img {
	max-width: 100%;
	max-height: 100%;
}

div#hand-result::before {
	content: " ";
	clear: both;
}
div#hand-result {
	margin: 20px 0;
	font-weight: bold;
	text-shadow: 0 0 7px white;
}

.game-actions {
	text-align: center;
}

#hand-result {
	text-align: center;
	padding: 15px;
	border-radius: 10px;
}

#ai-section {
	padding: 20px;
	border-radius: 10px;
	margin: 20px 0;
	text-align: center;
}

#ai-dice .die {
	cursor: default;
}

.item-option input[type="radio"] {
	position: fixed;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.item-option {
	vertical-align: middle;
	font-weight: 600;
	background-color: rgb(255, 255, 255, 0.5);
	border-radius: 20px;
	padding: 20px;
	border: 2px solid #674636;
}

.homepage-hero {
	background: #fff;
	padding: 60px 20px;
	text-align: center;
	border-top: 4px solid #674636;
	border-bottom: 4px solid #674636;
}

.homepage-hero h2 {
	font-size: 36px;
	color: #674636;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
}

.homepage-hero p {
	font-size: 20px;
	max-width: 800px;
	margin: 0 auto 30px;
	line-height: 1.6;
}

.homepage-cta-buttons {
	display: block;
	text-align: center;
}

.homepage-btn {
	padding: 15px 40px;
	font-size: 20px;
	font-weight: bold;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	margin: 10px;
	transition:
		transform 0.2s,
		box-shadow 0.2s;
	background-color: darkolivegreen;
	color: #fff !important;
}

.homepage-btn:hover {
	transform: translate(-2px, -2px);
	background-color: #674636;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

.homepage-features {
	max-width: 1200px;
	margin: 40px auto;
	padding: 20px;
}

.homepage-features h2 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 40px;
	color: #674636;
}

.homepage-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -10px;
}

.homepage-card {
	background: white;
	border-radius: 20px;
	padding: 25px;
	text-align: center;
	transition: transform 0.2s;
	width: 280px;
	margin: 10px;
	box-sizing: border-box;
}

.homepage-card:hover {
	transform: translateY(-5px);
	cursor: default;
}

.homepage-card-icon {
	font-size: 48px;
	margin-bottom: 15px;
	display: block;
}

.homepage-card-icon img {
	display: block;
	margin: 0 auto;
	max-width: 200px;
	height: auto;
}

.homepage-card h3 {
	font-size: 24px;
	margin-bottom: 10px;
	color: #6b4423;
	display: block;
}

.homepage-card p {
	font-size: 16px;
	line-height: 1.5;
	display: block;
}

@media (max-width: 768px) {
	.homepage-card {
		width: 100%;
		max-width: 400px;
	}

	.homepage-btn {
		padding: 12px 30px;
		font-size: 18px;
	}
}

.spacer {
	height: 50px;
}

#walkman-player {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	font-family: "Arial", sans-serif;
}

.walkman-toggle {
	width: 70px;
	height: 70px;
	background: linear-gradient(145deg, #b8b8b8, #8a8a8a);
	border: 3px solid #5a5a5a;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	cursor: pointer;
	box-shadow:
		inset -2px -2px 5px rgba(0, 0, 0, 0.3),
		inset 2px 2px 5px rgba(255, 255, 255, 0.3),
		3px 3px 8px rgba(0, 0, 0, 0.4);
	transition: transform 0.1s;
	color: #2a2a2a;
}

.walkman-toggle:hover {
	transform: translateY(-2px);
	box-shadow:
		inset -2px -2px 5px rgba(0, 0, 0, 0.3),
		inset 2px 2px 5px rgba(255, 255, 255, 0.3),
		4px 4px 10px rgba(0, 0, 0, 0.5);
}

.walkman-toggle:active {
	transform: translateY(1px);
	box-shadow:
		inset 2px 2px 5px rgba(0, 0, 0, 0.4),
		inset -1px -1px 3px rgba(255, 255, 255, 0.2);
}

.walkman-content {
	display: block;
	position: absolute;
	bottom: 80px;
	right: 0;
	width: 340px;
	background: linear-gradient(145deg, #c0c0c0, #a0a0a0);
	border: 4px solid #707070;
	border-radius: 12px;
	box-shadow:
		inset -3px -3px 8px rgba(0, 0, 0, 0.2),
		inset 3px 3px 8px rgba(255, 255, 255, 0.4),
		5px 5px 15px rgba(0, 0, 0, 0.5);
	padding: 18px;
}

#walkman-player.walkman-collapsed .walkman-content {
	display: none;
}

.walkman-display {
	background: linear-gradient(180deg, #1a3a1a, #0d1f0d);
	border: 3px solid #4a4a4a;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 15px;
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, 0.6),
		inset -1px -1px 2px rgba(255, 255, 255, 0.1);
}

.walkman-track {
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 8px;
	color: #00ff41;
	text-shadow: 0 0 8px #00ff41;
	font-family: "Courier New", monospace;
	letter-spacing: 1px;
}

.walkman-time {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #00ff41;
	font-family: "Courier New", monospace;
	text-shadow: 0 0 5px #00ff41;
}

.walkman-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 15px;
}

.walkman-controls button {
	width: 55px;
	height: 55px;
	background: linear-gradient(145deg, #d0d0d0, #a8a8a8);
	border: 2px solid #606060;
	border-radius: 50%;
	color: #2a2a2a;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.1s;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.2),
		inset 2px 2px 4px rgba(255, 255, 255, 0.4),
		2px 2px 6px rgba(0, 0, 0, 0.3);
}

.walkman-controls button:hover {
	background: linear-gradient(145deg, #e0e0e0, #b8b8b8);
}

.walkman-controls button:active {
	transform: translateY(1px);
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, 0.3),
		inset -1px -1px 2px rgba(255, 255, 255, 0.2);
}

.walkman-playlist {
	width: 100%;
	background: linear-gradient(180deg, #e8e8e8, #d0d0d0);
	border: 2px solid #808080;
	border-radius: 4px;
	color: #2a2a2a;
	padding: 8px;
	font-family: "Arial", sans-serif;
	font-size: 13px;
	box-shadow:
		inset 1px 1px 3px rgba(0, 0, 0, 0.2),
		inset -1px -1px 2px rgba(255, 255, 255, 0.3);
}

.walkman-playlist option {
	padding: 4px;
}

.walkman-playlist option:hover {
	color: #000 !important;
}

@media (max-width: 480px) {
	.walkman-content {
		width: 300px;
		right: -10px;
	}
}