MaterialSellerUI
{
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-family: 'Baloo 2';
	
	.frame {
		align-items: center;
		justify-content: center;
		border-radius: 0 25px 0 25px;
		font-weight: bold;
		flex-direction: column;
		font-size: 25px;
		backdrop-filter-blur: 18px;
		cursor: default;
	}

	.header {
		border-radius: 0 25px 0 0;
		display: flex;
		width: 100%;
		padding: 1.5rem 2.5rem;
		background-color: rgba(32, 34, 39, 0.99);
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 36px;
		gap: 1rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		
		.header-child {
			align-items: center;
			gap: 1rem;
		}
		
		.close-btn {
			pointer-events: all;
			cursor: pointer;
			
			&:hover {
				color: red;
			}
		}
		
		.title {
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 0.25rem;
		}
	}
	
	.container {
		background-color: rgba(32, 34, 39, 0.95);
		border-radius: 0 0 0 25px;
		flex-direction: column;
		padding: 2rem 3rem;
		gap: 2px;
	}
	
	.item {
		width: 100%;
		justify-content: space-between;
		font-weight: 500;
		padding: 5px 5px 5px 12px;
		border-radius: 0 20px 0 20px;
		font-size: 25px;
		align-items: center;
		min-width: 650px;

		&:nth-child(odd) {
			background-color: rgba(220, 220, 220, 0.01);
		}
		
		.col {
			flex: 0 0 100px;
			display: flex;
			min-width: 0;
		}

		.prefix {
			flex: 0 0 150px;
			align-items: center;
			justify-content: flex-start;
			gap: 12px;

			.name {
				color: white;
				gap: 8px;
			}
		}

		.amount {
			flex: 0 0 100px;
			margin-right: 1rem;
			color: gray;
			justify-content: flex-end;
			font-weight: 400;
		}
		
		.per-piece {
			flex: 0 0 65px;
			color: white;
			font-weight: 400;
		}
		
		.price {
			flex: 0 0 120px;
			font-weight: 800;
			color: white;
			margin-right: 2rem;
			justify-content: flex-end;
		}
	}
	
	.small {
		font-size: 20px;
	}
	
	.super-small {
		font-size: 18px;
	}
	
	.sell-btn {
		border-radius: 0 15px 0 ;
		
		color: #dfa935;
		background-color: #1b1d22;

		justify-content: center;
		text-transform: uppercase;
		flex: 0.5;
		cursor: pointer;
		pointer-events: all;
		
		&:hover {
			color: #1b202c;
			background-color: #dfa935;
		}
	}
	
	.sell-all {
		font-weight: 500;
		border-radius: 0 25px 0 25px;
		margin-top: 2rem;
	}
}