body:has(#account-container) .site-content {
	background: var(--site-background);	
	background: #FAFAFA;
	background: #e9e9e9;
}

#account-container {
	padding: 60px 0px;

	.order-id {
		font-weight: var(--site-weight-heading);
		color: var(--site-black);
	}

	h1, h2, h3, h4 {
	    background: none;
	    -webkit-background-clip: unset;
	    -webkit-text-fill-color: unset;
	}

	select {
		cursor: pointer;
		height: 26px !important;
		padding: 0px 6px !important;
		background: transparent !important;
		color: #000 !important;
		border-radius: 5px !important;

		appearance: none !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m14.24%205.289-5.96%205.709c-.199.168-.386.237-.545.237a.792.792%200%200%201-.517-.209L1.23%205.29c-.3-.284-.309-.786-.022-1.057.284-.3.76-.31%201.057-.023l5.469%205.242%205.469-5.238a.745.745%200%200%201%201.057.022c.287.268.277.77-.022%201.054Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") !important; /* Your SVG as data URI */
		background-repeat: no-repeat !important;
		background-position: right 6px center !important; /* Positions the arrow */
		background-size: 12px 12px !important; /* Controls the size of the arrow */		
	}

	.status {
		display: flex;
		align-items: center;
		gap: 5px;

		&:before {
			content: "";
			width: 10px;
			height: 10px;
			border-radius: 50%;
			display: block;
		}

		&.Completed:before,
		&.Suppressed:before {
			background: green;
		}

		&.processing:before {
			background: #00E5FC;
		}

		&.unpaid:before {
			background: red;
		}

		&.payment:before,
		&.invoiced:before {
			background: orange;
		}

	}

	.action {
		background-image: radial-gradient(at 36% 62%, hsla(50,94%,73%,1) 0px, transparent 50%),                
            radial-gradient(at 87% 45%, hsla(45,97%,65%,1) 0px, transparent 50%),                
            radial-gradient(at 11% 46%, hsla(43,94%,71%,1) 0px, transparent 50%),               
            radial-gradient(at 67% 34%, hsla(36,86%,77%,1) 0px, transparent 50%),                
            radial-gradient(at 93% 5%, hsla(40,90%,69%,1) 0px, transparent 50%),                
            radial-gradient(at 92% 44%, hsla(38,84%,64%,1) 0px, transparent 50%),               
            radial-gradient(at 58% 4%, hsla(47,90%,62%,1) 0px, transparent 50%);

        border: 1px solid var(--site-primary);
        color: #000;
		padding: 4px 8px;
		border-radius: 6px;
		width: fit-content;
	}

	.order-info {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 30px;

		.col {
			display: grid;
			gap: 15px;
		}

		.download {
			span {
				color: #ef2131;
				font-size: 30px;
				font-weight: normal;
			}

			color: #000;
			display: grid;
			align-items: center;
            border-radius: 8px;
            background: #fff;
            padding: 10px 22px;
            align-items: center;
            box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;
		}
	}

	#user {
	    background: #ffffff;
	    border-radius: 16px;
	    box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;
	    text-align: center;
	    overflow: hidden;

	    .context {
	    	padding-top: 100px;
	    	padding-bottom: 50px;	   
	    	background: linear-gradient(45deg, black, transparent); 	
	    	background: #dbdbdb;

			background-image:
                radial-gradient(at 36% 62%, hsla(50,94%,73%,1) 0px, transparent 50%),
                radial-gradient(at 87% 45%, hsla(45,97%,65%,1) 0px, transparent 50%),
                radial-gradient(at 11% 46%, hsla(43,94%,71%,1) 0px, transparent 50%),
                radial-gradient(at 67% 34%, hsla(36,86%,77%,1) 0px, transparent 50%),
                radial-gradient(at 93% 5%, hsla(40,90%,69%,1) 0px, transparent 50%),
                radial-gradient(at 92% 44%, hsla(38,84%,64%,1) 0px, transparent 50%),
                radial-gradient(at 58% 4%, hsla(47,90%,62%,1) 0px, transparent 50%);	 	

                background: linear-gradient(45deg, black, #505050, black);		 	
	    }

	    .info {
	    	display: grid;
	    	grid-template-columns: 1fr auto;
	    	align-items: center;
	    	padding: 20px;

	    	span {
	    		i {
	    			color: #000;
	    			font-style: normal;
	    		}
	    	}
	    }

		.avatar {
			width: 140px;
			height: 140px;
			border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin: auto;
			background-size: cover;
			background-position: center;
			background-color: #fff;
		}

		.referral {
			color: #fff;
			font-size: 24px;
			font-weight: var(--site-weight-heading);
			text-transform: uppercase;
		}

		.website {
		    width: fit-content;
		    color: #000;
		    display: block;
		    display: grid;
		    grid-template-columns: auto auto;
		    gap: 5px;
		    align-items: center;

		    span {
		    	color: var(--site-text);
		    }
		}
	}

	.header {
		display: flex;
		align-items: center;
		gap: 10px;

		a {
		    cursor: pointer;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    width: 32px;
		    height: 32px;
		    font-size: 13px;
		    border-radius: 8px;
		    color: #000;
		    background: rgba(0, 0, 0, 0.1);
		}
	}

	.wrap {
		display: grid;
		gap: 30px;			
	}

	#user-orders {
		display: grid;
		gap: 10px;

		.order {
			border-radius: 8px;
			background: #fff;
			padding: 10px 12px;
			display: grid;
			grid-template-columns: 5fr 1fr 1fr;
			align-items: center;
			gap: 10px;	
			box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;		
		}

		.head {
			background: transparent;
		    color: #000;
		    box-shadow: none;
		    border: none;
		    padding-block: 0px;
		}
	}

	#user-order-detail {
		display: grid;
		gap: 30px;	

		.performance {

			.list {
				display: grid;
				gap: 10px;		

				.item {
				    border-radius: 8px;
				    background: #fff;
				    padding: 10px 12px;
				    display: grid;
					grid-template-columns: 3fr 1fr 1fr 1fr 1fr;

				    gap: 10px;
				    box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;
				    
				    &.head {
				    	background: transparent;
				    	color: #000;
				    	box-shadow: none;
				    	border: none;
				    	padding-block: 0px;

				    	&>div {
				    		display: grid;
				    		gap: 5px;
				    	}
				    }	

				    .website {
				    	font-size: 18px;
				    	color: #000;
				    }
				}
			}
		}	

		.form {
			display: grid;	
			gap: 0px 15px;
		    border-radius: 8px;
		    background: #fff;
		    padding: 10px 12px;
		    display: grid;
		    grid-template-columns: repeat(4, 1fr);
		    align-items: center;
		    box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;


			.field {
			    background: #fff;
			    padding: 10px 12px;
			    display: grid;
			    gap: 3px;
			    align-items: center;
			    border-bottom: 1px dotted #b5b5b5;
			
				span:not(:empty) {
				    color: #000000;
				}

				span:empty:after {
					content: "Empty";
					color: #000;
					opacity: 0.15;
				} 

				&:hover {
					background: transparent;
				}
			}


			.field:nth-last-child(-n+3) {
				border-bottom: none;
			}

		}
	}
}