/*
@jahoobas
Copyright 2025.
*/

/* Generic style definitions */
body {
	/*background: #A3586D;*/
	/*background: linear-gradient(137deg, rgba(163, 88, 109, 1) 0%, rgba(115, 52, 70, 1) 100%);*/
	
	background-image: url("/web_assets/img/bggrad.png");
	background-repeat: no-repeat;
	background-color: rgba(115, 52, 70, 1);
	
	background-size: 100vw 300px;
	color: white;
	font-family: Verdana;
	font-size: 14px;
}

hr {
	border-style: solid;
    border-color: white;
	border-width: 0.5rem;
}

a {
	color: cornflowerblue;
	text-decoration: none;
}

a:hover {
	color: cornflowerblue;
	text-decoration: underline;
}

.link {
	color: cornflowerblue;
	text-decoration: none;
}

.link:hover {
	color: cornflowerblue;
	text-decoration: underline;
}

.master_container {
	width: 900px;
	margin: 5px auto;
	padding: 5px;
	
	background-color: rgba(31,31,31,0.2);
	border: rgba(31,31,31, 0.4) solid 3px;
	border-radius: 10px;
}

.master_container_message {
	width: 900px;
	margin: 5px auto;
	padding: 5px;
	
	background-color: rgba(31,31,131,0.2);
	border: rgba(31,31,131, 0.4) solid 3px;
	border-radius: 10px;
	
	font-weight: bold;
	text-align: center;
}

.master_container_warning {
	width: 900px;
	margin: 5px auto;
	padding: 5px;
	
	background-color: rgba(161,101,31,0.2);
	border: rgba(161,101,31, 0.4) solid 3px;
	border-radius: 10px;
	
	font-weight: bold;
	text-align: center;
}

.master_container_alert {
	width: 900px;
	margin: 5px auto;
	padding: 5px;
	
	background-color: rgba(131,31,31,0.2);
	border: rgba(131,31,31, 0.4) solid 3px;
	border-radius: 10px;
	
	font-weight: bold;
	text-align: center;
}

.container {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.2);
	border: rgba(62,62,62, 0.4) solid 3px;
	border-radius: 10px;
}

.error {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(162,62,62,0.7);
	border: rgba(162,62,62, 0.9) solid 3px;
	border-radius: 10px;
}

input[type="text"] {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.2);
	border: rgba(62,62,62, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

input[type="password"] {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.2);
	border: rgba(62,62,62, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

input[type="text"]::placeholder {
	color: lightgrey;
	text-align: center;
	font-style: italic;
}

input[type="password"]::placeholder {
	color: lightgrey;
	text-align: center;
	font-style: italic;
}

input[type="submit"] {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.2);
	border: rgba(62,62,62, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

input[type="submit"]:hover {
	margin: 3px;
	padding: 7px;
	
	background-color: rgba(93,93,93,0.2);
	border: rgba(93,93,93, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

button {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.2);
	border: rgba(62,62,62, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

button:hover {
	margin: 3px;
	padding: 7px;
	
	background-color: rgba(93,93,93,0.2);
	border: rgba(93,93,93, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

.disabled {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.1);
	border: rgba(62,62,62, 0.3) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

.disabled:hover {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.1);
	border: rgba(62,62,62, 0.3) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

.button {
	margin: 5px;
	padding: 5px;
	
	background-color: rgba(62,62,62,0.2);
	border: rgba(62,62,62, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

.button:hover {
	margin: 3px;
	padding: 7px;
	
	background-color: rgba(93,93,93,0.2);
	border: rgba(93,93,93, 0.4) solid 3px;
	border-radius: 10px;
	
	color: white;
	text-align: center;
	font-family: Verdana;
}

.page_title {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.page_subtitle {
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}

.no_results {
	margin: 5px;
	font-size: 11px;
	text-align: center;
}

.small {
	margin: 5px;
	font-size: 11px;
	text-align: center;
}

form { 
	text-align: center;
}

.column-left {
	float: left;
	width: 49%;
}

.column-right {
	float: right;
	width: 49%;
}

.columns {
	width: 100%;
	height: fit-content;
	overflow: hidden;
}

.filters {
	margin-left: 10px;
}

.filters a {
	color: white;
	display: flex;
	margin: 8px 0;
}

.filters a img {
	margin-right: 5px;
	
	width: 16px;
	height: 16px;
}

/* PAGE HEADER */
.header a {
	color: white;
}

.header .logo {
    display: flex;
    align-items: center;
}

.header .logo a {
	margin-left: 33%;
	float: left;
	width: 66%;
}

.header img {
	height: 125px;
}

.currencydisplay {
	margin: 5px;
    padding: 5px;
    background-color: rgba(62, 62, 62, 0.2);
    border: rgba(62, 62, 62, 0.4) solid 3px;
    border-radius: 10px;
    width: calc(33% - 25px);
    height: 60px;
    margin-top: -10px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
	color: lightgreen;
}

.currencydisplay img {
	height: 32px;
}

.header .nav {
	display: flex;
	justify-content: center;
	
	padding-top: 3px;
	
	border-top: rgba(31,31,31, 0.4) solid 3px;
}

.header .nav a {
	font-size: 22px;
	margin: 0 35px;
}

/* PAGE FOOTER */
.footer {
	font-size: 10px;
	text-align: center;
}

/* DEFAULT.php */
.signupbutton {
	width: fit-content;
	margin: 0 auto;
}

.signupbutton img {
	border-radius: 5px;
	height: 150px;
}

.aboutus {
	width: 750px;
	margin: 10px auto;
	overflow: hidden;
}

/* ASSET PAGE */
.asset_desc {
	margin: 10px;
}

/* DEVELOP PAGE */
.kind {
	font-size: 10px;
}

/* AVATAR */
.colorselectbutton {
	border: 1px solid black;
	background-color: white;
}

.colorclicker {
	width: 100%;
	height: 100%;
	
	background-color: rgba(0,0,0,0);
}

.colorclicker:hover {
	background-color: rgba(0,0,0,0.2);
}

/* CATALOG ITEM */
.price {
	display: flex;
    justify-content: center;
    align-items: center;
	color: lightgreen;
	font-size: 16px;
	font-weight: bold;
}

.price img {
	height: 32px;
}