* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

@font-face{
	font-family: os;
	src: url(../fonts/ops.ttf);
}

@font-face{
	font-family: osl;
	src: url(../fonts/opsl.ttf);
}

@font-face{
	font-family: nunito;
	src: url(../fonts/Nunito-Bold.ttf);
}


:root {
	--white: #FFFFFF;
	--light-gray: #F0F0F0;
	--whitesmoke: whitesmoke;
	--gray: gray;
	--black: black;
	--violet: violet;
	--green: green;
	--footer-background: #D8D8D8;
	--footer-shadow-background: #8A8A8A;
	--footer-a: #737373;
	--placeholder: #aaaaaa;
	--input-border: #979797;
	--input-shadow: #A5A5A5;
	--input-shadow-alt: #E5E5E5;
	--uname: #898989;
	--red: red;
	--login-btn: #3D10FF;
	--login-hover: whitesmoke;
	--login-active: #00df90;
	--google-login-btn: #cacaca;
	--google-login-btn-hover: #A5A5A5;
	--add-item-btn: #ff6619;
	--add-item-btn-hover: #c41000;
	--add-item-btn-active: #BBBBBB;
	--notifications: #898989;
	--notifications-hover: tomato;
	--notifications-active: cyan;
	--search-btn-background: #5359FF;
	--search-btn: #C4C4C4;
	--search-extra: #7F7F7F;
	--product-container-p: #CA5555;
	--user-logout: #393939;
	--new-product-field-p: #898989;
	--new-product-field-btn: #30a8ff;
	--new-product-field-btn-hover: #ff7700;
	--new-product-field-btn-active: #ffaf69;
	--new-product-field-btn-disabled: #b9b9b9;
	--product-page-info-container: #5E5E5E;
	--product-page-info-btn: #30a8ff;
	--product-page-info-hover: #ffc04b;
	--product-page-info-active: #ffaf69;
	--product-page-info-disabled: #b9b9b9;
	--my-product-details-container: #CA5555;
	--purchase-msg: #00df90;
	--error-msg: #df0000;
	--edit-btn: #A562FF;
	--edit-btn-hover: #ea62ff;
	--edit-btn-active: pink;
	--sell-btn: #0FDD00;
	--sell-btn-hover: #AAFF00;
	--sell-btn-active: #00FF00;
	--ship-btn: #CB0070;
	--ship-btn-hover: cyan;
	--ship-btn-active: #00CCEE;
	--change-address-btn: salmon;
	--change-address-btn-hover: pink;
	--change-address-btn-active: white;
	--shipping-address-input: #EEEEEE;
	--user-registration-box: #d8d8d8;
	--user-registration-btn: #A2FF9B;
	--user-registration-btn-hover: #rgb(0, 255, 221);
	--user-registration-btn-active: #11FF00;
	--dropzone-border: #CCCCCC;
	--dropzone-background: #F5F5F5;
	--dropzone-svg: #AAAAAA;
	--dropzone-dragover-border: #737373;
	--admin-approve-btn: #52FF5B;
	--admin-approve-btn-hover: aqua;
	--admin-approve-btn-active: whitesmoke;
	--admin-reject-btn: #F43030;
	--admin-reject-btn-hover: violet;
	--admin-reject-btn-active: black;
	--heading: #7C7C7C;
}

body {
	background: var(--white);
	margin-left: auto;
	margin-right: auto;
	font-family: os;
	max-width: 900px;
}



main {
	min-height: calc(100vh - 200px);
	/*padding-bottom: 200px;*/
}

footer {
	position: absolute;
	left: 0;
	right: 0;
	background-color: var(--footer-background);
	text-align: center;
	height: 200px;
	font-family: osl;
	font-size: 25px;
	box-shadow: inset 0px 3px 10px var(--footer-shadow-background);
}

footer a {
	color: var(--footer-a);
}

::placeholder {
	color: var(--placeholder);
	font-family: osl;
}

input:focus, textarea:focus, select:focus{
	outline: none;
}

.page {
	background-color: var(--white);
}

.navbar {
	background-color: var(--white);
	height: 60px;
}

.login-prompt a{
	float: left;
	position: relative;
	font-family: osl;
	font-size: 23px;
	color: var(--uname);
	cursor: pointer;
	transition: 0.3s;
}
.login-prompt a:hover{
	color: var(--red);
}
.login-prompt a:active{
	color: var(--violet);
	transition: 0.1s;
}

.login-form {
	position: absolute;
	height: 230px;
	width: 230px;
	z-index: 3;
	top: 45px;
	margin-left: 2%;
	padding: 10px;
	display: block;
	border: 0.5px solid var(--input-border);
	background-color: var(--white);
	box-shadow: 0px 1px 2px var(--input-shadow);
}
.login-form p {
	color: var(--search-extra);
	font-family: osl;
}
.login-form .login-row {
	position: relative;
	width: 100%;
	display: inline-flex;
	height: 30px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.login-row input {
	position: relative;
	width: 100%;
	padding-left: 5px;
	font-family: osl;
	font-size: 15px;
	border: 0.5px solid var(--input-border);
	box-shadow: 0px 2px 3px var(--input-shadow-alt);

}
.login-row button {
	margin-left: 7px;
	width: 40px;
	background-color: var(--login-btn);
	border: none;
	font-size: 22px;
	color: var(--white);
	box-shadow: 0px 2px 3px var(--input-shadow);
}
.a-login-btn {
	background-image: url("/media/a_big_logon.png") !important;
	background-repeat: no-repeat;
	background-size: cover;
	border: none;
	background-position: 50% 50%;
	border-radius: 0;
	box-shadow: 0px 2px 3px var(--input-shadow);
	cursor: pointer;
	transition: 0.3s;
}
.a-login-btn:hover {
	box-shadow: 0px 2px 3px var(--login-hover);
}
.a-login-btn:active {
	box-shadow: 0px 2px 3px var(--red);
	transition: 0.1s;
}
.g-login-btn {
	background-image: url("/media/g_big_logon.png") !important;
	background-repeat: no-repeat;
	background-size: cover;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 2px 3px var(--input-shadow);
	cursor: pointer;
	transition: 0.3s;
}
.g-login-btn:hover {
	box-shadow: 0px 2px 3px var(--login-hover);
}
.g-login-btn:active {
	box-shadow: 0px 2px 3px var(--login-active);
	transition: 0.1s;
}
.fb-login-btn {
	background-image: url("/media/fb_big_logon.png") !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	border: none;
	box-shadow: 0px 2px 3px var(--input-shadow);
	cursor: pointer;
	transition: 0.3s;
}
.fb-login-btn:hover {
	box-shadow: 0px 2px 3px var(--login-hover);
}
.fb-login-btn:active {
	box-shadow: 0px 2px 3px var(--login-active);
	transition: 0.1s;
}

.logon-crumbs {
	padding-top: 17px;
	padding-bottom: 10px;
	display: inline-flex;
}

.logon-crumbs input {
	/*display: inline-flex;*/
	border: 0.5px solid var(--input-border);
	float: left;
	position: relative;
	height: 34px;
	width: 160px;
	padding-left: 10px;
	margin-right: 20px;
	/*border: none;*/
	font-family: osl;
	font-size: 17px;
	box-shadow: 0px 2px 3px var(--input-shadow);
}

.user-name {
	float: left;
	position: relative;
	font-family: osl;
	font-size: 23px;
	color: var(--uname);
	cursor: pointer;
	transition: 0.3s;
}

.user-name:hover {
	color: var(--red);
}
.user-name:active {
	transition: 0.1s;
	color: var(--light-gray);
}


.logon-crumbs button {
	float: left;
	position: relative;
	border: none;
	height: 35px;
	width: 35px;
	margin-right: 20px;
}

.btn-login {
	background-color: var(--login-btn);
	font-size: 30px;
	color: var(--white);
	box-shadow: 0px 2px 3px var(--input-shadow);
}

.btn-g-login {
	background-color: var(--google-login-btn);
	border-radius: 5px;
}

.img-g-login {
	height: 35px;
	width: 35px;
}

.btn-login:hover {
	color: var(--red);
	transition: 0.3s;
	cursor: pointer;
}

.btn-g-login:hover {
	box-shadow: 0px 2px 3px var(--google-login-btn-hover);
	transition: 0.3s;
	cursor: pointer;
}

.btn-fb-login {
	transition: 0.3s;
	cursor: pointer;
	background-color: var(--white);
	border-radius: 20px;
}

.btn-fb-login:hover {
	box-shadow: 0px 2px 3px var(--google-login-btn-hover);
	transition: 0.3s;
	cursor: pointer;
}

.btn-fb-login:active {
	box-shadow: 0px 2px 3px var(--red);
	transition: 0.1s;
}

.btn-login:active {
	color: var(--white);
	transition: 0.1s;
}

.btn-g-login:active {
	box-shadow: 0px 2px 3px var(--red);
	transition: 0.1s;
}

.user-info {
	float: right;
	position: relative;
	display: inline-flex;
	padding-top: 20px;
	padding-bottom: 10px;
	/* bottom: 10%; */
	font-family: osl
}

.add-item a {
	color: var(--add-item-btn);
	font-family: osl;
	font-size: 30px;
	padding-left: 10px;
	position: relative;
	bottom: 23%;
}

.add-item a:hover {
	color: var(--add-item-btn-hover);
	transition: 0.3s;
}

.add-item a:active {
	color: var(--add-item-btn-active);
	transition: 0.1s;
}

.notifications {
	padding-right: 15px;
	color: var(--notifications);
	transition: 0.3s;
}
.notifications:hover {
	color: var(--notifications-hover);
}
.notifications:active {
	transition: 0.1s;
	color: var(--notifications-active);
}

.cart {
	color: var(--notifications);
	transition: 0.3s;
}
.cart:hover {
	color: var(--notifications-hover);
}
.cart:active {
	transition: 0.1s;
	color: var(--notifications-active);
}

.sbar {
	height: 55px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sbar img {
	position: relative;
	height: 35px;
	float: left;
	padding-left: 7%;
	margin-right: 20px;
	cursor: pointer;
	/*left: 5%;*/
}

.sbar input {
	border: 0.5px solid var(--input-border);
	position: relative;
	float: left;
	height: 34px;
	width: 400px;
	padding-left: 10px;
	font-family: osl;
	font-size: 17px;
	box-shadow: 0px 3px 4px var(--input-shadow);
}

.sbar button {
	position: relative;
	float: left;
	background-color: var(--search-btn-background);
	border: none;
	box-shadow: 0px 2px 3px var(--input-shadow);
	color: var(--search-btn);
	height: 35px;
	width: 100px;
	margin-left: 20px;
	font-size: 20px;
	font-family: osl;
	transition: 0.4s;
}

.sbar button:hover {
	background-color: var(--violet);
	transition: 0.2s;
}

.sbar button:active {
	background-color: var(--whitesmoke);
	transition: 0.2s;
}

.sbar a {
	position: relative;
	float: left;
	color: var(--search-extra);
	font-family: osl;
	font-size: 14px;
	margin-left: 15px;
	top: 15%;
}

.space {
	height: 25px;
}

.welcome img {
	width: 100%;
}

.products p {
	font-family: osl;
	font-size: 25px;
	color: var(--heading);
	margin-bottom: 10px;
	margin-top: 10px;
}

.profile a {
	font-family: osl;
	font-size: 25px;
	color: var(--product-page-info-btn);
	margin-bottom: 20px;
	margin-top: 20px;
	cursor: pointer;
	transition: 0.3s;
}

.profile a:hover {
	color: var(--violet);
}

.profile a:active {
	color: var(--white);
	transition: 0.1s;
}

.product-list-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 40px;
}

.product-container {
	width: 160px;
	height: 160px;
}

.product-container img {
	width: 100%;
	height: 100%;
}

.product-container p {
	font-family: nunito;
	color: var(--product-container-p);
	font-size: 17px;
}

.r {float: right;}
.l {float: left;}

.links {
	padding-top: 40px;
}

.links a {
	margin: 20px;
}

.legal {
	padding: 10px;
}

.legal a{
	font-size: 19px;
}

.link {
	text-decoration: underline;
}

.location {
	float: right;
	margin-right: 10%;
	margin-top: 5px;
	font-size: 19px;
	color: var(--footer-a);
}

.user-logout {
	float: left;
	padding-left: 10px;
	padding-top: 11px;
	position: relative;
	font-family: osl;
	font-size: 13px;
	color: var(--user-logout);
	cursor: pointer;
}

.user-logout:hover {
	color: var(--red);
	transition: 0.3s;
}

.user-auth-message {
	position: relative;
	width: 100%;
	text-align: center;
}

.user-auth-message p {
	color: var(--red);
	font-size: 30px;

}

.new-product-field {
	position: relative;
	width: 100%;
	display: inline-flex;
	margin-left: 5%;
}

.new-product-field p {
	font-size: 25px;
	color: var(--new-product-field-p);
	padding-bottom: 20px;
}

.new-product-field label {
	font-size: 20px;
	color: var(--new-product-field-p);
	display: inline-block;
}

.new-product-field input {
	height: 40px;
	width: 300px;
	display: block;
	font-size: 15px;
	padding-left: 10px;
	margin-bottom: 15px;
	border-radius: 0;
	border: 0.5px solid var(--gray);
	cursor: text;
}

.new-product-field textarea {
	height: 100px;
	width: 300px;
	display: block;
	font-size: 15px;
	padding-left: 10px;
	padding-top: 10px;
	margin-bottom: 15px;
	border-radius: 0;
	border: 0.5px solid var(--gray);
	cursor: text;
}

.new-product-field button {
	height: 40px;
	width: 120px;
	display: block;
	font-size: 19px;
	font-family: osl;
	box-shadow: 0px 2px 3px var(--input-shadow);
	margin-bottom: 15px;
	border-radius: 0;
	border: none;
	background-color: var(--new-product-field-btn);
	transition: 0.3s;
}

.new-product-field button:hover {
	transition: 0.3s;
	background-color: var(--new-product-field-btn-hover);
}

.new-product-field button:active {
	transition: 0.1s;
	background-color: var(--new-product-field-btn-active);
}

.new-product-field button:disabled {
	background-color: var(--new-product-field-btn-disabled);
}

.n-p-left {
	position: relative;
	width: 40%;
	z-index: 2;
}
.n-p-right {
	position: absolute;
	width: 70%;
	height: 470px;
	margin-left: 100px;
	margin-top: -400px;
	z-index: 0;
}

.user-message {
	width: 100%;
}

.user-message p {
	position: relative;
	font-family: osl;
	font-size: 20px;
	color: var(--green);
	left: 50%;
	transform: translate(-10%, 0);
}

.product-page-container {
	width: 100%;
	display: block;
}
.product-page-info-container {
	position: relative;
	width: 100%;
	font-family: osl;
	color: var(--product-page-info-container);
	display: inline-flex;
}
.product-page-img {
	position: relative;
	width: 42%;
	padding-top: 5px;
}
.product-page-img img {
	width: 100%;
}
.product-page-info {
	position: relative;
	padding-left: 20px;
	display: block;
}

.product-page-info button {
	margin-top: 38px;
	height: 40px;
	width: 100px;
	display: block;
	font-size: 19px;
	font-family: osl;
	box-shadow: 0px 2px 3px var(--input-shadow);
	border-radius: 0;
	border: none;
	background-color: var(--product-page-info-btn);
	transition: 0.3s;
}
.product-page-info button:hover {
	transition: 0.3s;
	background-color: var(--product-page-info-hover);
}
.product-page-info button:active {
	transition: 0.1s;
	background-color: var(--product-page-info-active);
}
.product-page-info button:disabled {
	background-color: var(--product-page-info-disabled);
}
.product-page-info h2 {
	font-size: 30px;
}
.product-page-info p {
	font-size: 20px;
	padding-top: 38px;
}

.product-page-info input {
	margin-top: 20px;
	height: 40px;
	width: 400px;
	font-size: 15px;
	padding-left: 10px;
	margin-bottom: -10px;
	font-family: osl;
	border-radius: 0;
	border: 0.5px solid var(--gray);
}

.product-page-description {
	margin-top: 10px;
}
.product-page-description p {
	font-family: osl;
	font-size: 20px;
	color: var(--product-page-info-container);
}

.my-products-container {
	color: transparent;
}

.my-product-container {
	padding-top: 15px;
	width: 100%;
	height: 160px;
	display: inline-flex;
}


.my-product-container img {
	width: 20%;
	max-height: 90%;
	cursor: pointer;
}
.my-product-details-container {
	display: block;
	line-height: 0;
	padding-left: 10px;
	width: 100%;
}
.my-product-details-container p {
	font-family: nunito;
	color: var(--my-product-details-container);
	font-size: 25px;
	width: 100%;
}
.top {
	padding-top: 5px;
}
.middle-top {
	padding-top: 30px;
}
.middle-bottom {
	padding-top: 30px;
}
.bottom {
	padding-top: 30px;
}

.purchase-message {
	color: var(--purchase-msg);
	text-align: center;
	font-size: 25px;
	font-family: osl;
	padding-bottom: 10px;
}

.error-message {
	color: var(--error-msg);
	text-align: center;
	font-size: 25px;
	font-family: osl;
	padding-bottom: 10px;
}

.product-mgmt-buttons {
	display: inline-flex;
}
.product-mgmt-buttons button {
	margin-top: 38px;
	height: 40px;
	width: 150px;
	display: block;
	font-size: 19px;
	font-family: osl;
	box-shadow: 0px 2px 3px var(--input-shadow);
	border-radius: 0;
	border: none;
	transition: 0.3s;
	margin-right: 15px;
}
.product-mgmt-buttons button:hover {
	transition: 0.3s;
}
.product-mgmt-buttons button:active {
	transition: 0.1s;
}
.edit-btn button {
	background-color: #A562FF;
}
.sell-btn button {
	background-color: #0FDD00;
}
.ship-btn button {
	background-color: #CB0070;
}
.edit-btn button:hover {
	background-color: #ea62ff;
}
.sell-btn button:hover {
	background-color: #AAFF00;
}
.ship-btn button:hover {
	background-color: cyan;
}
.edit-btn button:active {
	background-color: pink;
}
.sell-btn button:active {
	background-color: #00FF00;
}
.ship-btn button:active {
	background-color: #00CCEE;
}

.e404 {
	width: 100%;
}

.e404 svg {
	width: 100%;
}

.ship-adress {
	height: 50px;
	width: 100%;
}

.ship-adress button {
	position: relative;
	border: 0;
	height: 40px;
	width: 350px;
	background-color: var(--change-address-btn);
	font-family: osl;
	font-size: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	transition: 0.3s;
	color: white;
	box-shadow: 0px 2px 3px var(--input-shadow);
}
.ship-adress button:hover {
	background-color: var(--change-address-btn-hover);
	color: black;
}
.ship-adress button:active {
	transition: 0.1s;
	background-color: var(--change-address-btn-active);
}
.ship-adress input {
	position: relative;
	border: 0;
	height: 40px;
	width: 600px;
	background-color: var(--shipping-address-input);
	font-family: osl;
	font-size: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	color: var(--black);
	box-shadow: 0px 2px 3px var(--input-border);
	padding-left: 10px;
}

.big-box {
	height: 35px;
	background-color: var(--user-registration-box);
	margin-top: 10px;
	width: 100%;
}

.sub-page {
	width: 85%;
	margin: 10px auto;
}

.small-box {
	height: 35px;
	background-color: var(--user-registration-box);
}

.u-r-title {
	font-family: osl;
	font-size: 32px;
	text-align: center;
	margin-top: 20px;
}

.u-r-cols {
	display: inline-flex;
	width: 100%;
}

.u-r-left {
	width: 50%;
}
.u-r-subtitle{
	font-family: osl;
	font-size: 25px;
	margin-top: 10px;
	margin-bottom: 20px;
}
.u-r-left input{
	height: 40px;
	display: block;
	font-size: 15px;
	width: 250px;
	padding-left: 10px;
	margin: 15px 0;
	border-radius: 0;
	border: 0.5px solid var(--input-border);
}
.u-r-i-location input {
	width: 90%;
}

.u-r-right {
	float: right;
	width: 50%;
}
.u-r-right img{
	width: 57%;
}
.u-r-right .u-r-subtitle{
	font-family: osl;
	font-size: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: end;
}

.u-r-btn button {
	width: 120px;
	height: 40px;
	border: 0;
	display: block;
	font-size: 19px;
	font-family: osl;
	box-shadow: 0px 2px 3px var(--input-shadow);
	border-radius: 0;
	transition: 0.3s;
	margin: 10px auto;
	background-color: var(--user-registration-btn-background);
	color: var(--input);
}

.u-r-btn button:hover {
	background-color: var(--user-registration-btn-hover);
}

.u-r-btn button:active {
	background-color: var(--user-registration-btn-active);
	color: var(--input);
	transition: 0.1s;
}

.dropzone {
	width: 55%;
	height: 70%;
	margin-left: auto;
	margin-right: 0;
	border: 2px dashed var(--dropzone-border);
	background: var(--dropzone-background);
	transition: 0.2s;
}
.dropzone svg{
	position: relative;
	left: 50%;
	top: 40%;
	transform: translate(-50%);
	fill: var(--dropzone-svg);
}
.dropzone.dragover {
	border: 2px dashed var(--dropzone-dragover-border);
	background-color: var(--dropzone-svg);
}
.dropzone.dragover svg{
	fill: var(--whitesmoke);
}
.dropzone img {
	position: relative;
	width: 100%;
	height: 100%;
}

.admin-approve {
	height: 33px;
	width: 120px;
	display: block;
	font-size: 19px;
	font-family: osl;
	box-shadow: 0px 2px 3px var(--input-shadow);
	margin-bottom: 0;
	margin-top: -13px;
	border-radius: 0;
	border: none;
	background-color: var(--admin-approve-btn);
	transition: 0.3s;
}
.admin-approve:hover {
	background-color: var(--admin-approve-btn-hover);
}
.admin-approve:active {
	background-color: var(--admin-approve-btn-active);
	transition: 0.1s;
}

.admin-reject {
	height: 33px;
	width: 120px;
	display: block;
	font-size: 19px;
	font-family: osl;
	box-shadow: 0px 2px 3px var(--input-shadow);
	margin-bottom: 0;
	margin-top: -13px;
	border-radius: 0;
	border: none;
	background-color: var(--admin-reject-btn);
	transition: 0.3s;
}
.admin-reject:hover {
	background-color: var(--admin-reject-btn-hover);
}
.admin-reject:active {
	background-color: var(--admin-reject-btn-active);
	color: var(--white);
	transition: 0.1s;
}

.top-a {
	padding-top: 5px;
}
.middle-top-a {
	padding-top: 20px;
}
.middle-bottom-a {
	padding-top: 20px;
}
.bottom-a {
	padding-top: 20px;
}

/* DARK MODE SUPPORT: */
/* @media (prefers-color-scheme: dark) {
	body, .page, main, .navbar {
		background: #222222;
	}
	footer {
		background: rgb(20, 20, 20);
		box-shadow: none;
	}
} */