.complaints-product {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 5px;
	margin: 10px;
	align-items: center;
}

.complaints-product img {
	max-width: 100%;
	height: auto;
}

.complaint-header {
	display: grid;gap: 10px;align-items: center;grid-template-columns: auto 1fr;
}

.complaint-header .number {
	font-weight: bolder;font-size: 1.4rem
}


.complaints-list-item>.rog-number {
	grid-area: rog-number;
	font-weight: bolder;
}
.complaints-list-item>.order-number {
	grid-area: order-number;
	font-size: 0.8rem;
}
.complaints-list-item>.status {
	grid-area: status;
}
.complaints-list-item>.product {
	grid-area: product;
}
.complaints-list-item>.date {
	grid-area: date;
	font-size: 0.8rem;
	opacity: 0.8;
}


.complaints-list-item {
	border: 1px solid rgba(0, 0, 0, .125);
	padding: 10px;
	margin-bottom: 20px;
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template:
			"status rog-number product"
			"status date product"
			"status order-number product";
	grid-template-columns: 150px 0.25fr 1fr;
}


@media screen and (width<=1000px) {
	.complaints-list-item {
		margin-bottom: 20px;
		display: grid;
		gap: 10px;
		grid-template:
			"status rog-number"
			"status date"
			"status order-number"
			"product product";
		grid-template-columns: 150px 1fr;
	}
}

.complaints-description {
	padding: 10px;
}

.complaints-select-product-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.complaints-select-product-item>.buttons>.exists-request {
	padding: 20px;
	font-weight: bolder;
}

#complaint-images {
	margin-top: 20px;
}

.complaint-image>.image {
	grid-area: image;
}

.complaint-image>.image img {
	max-width: 100%;
	height: auto;
}


.complaint-image>.name {
	grid-area: name;
}
.complaint-image>.size {
	grid-area: size;
}
.complaint-image>.delete {
	grid-area: delete;
	text-align: right;
}

.complaint-image {
	display: grid;
	align-items: center;
	gap: 20px;
	margin: 20px;
	padding-bottom: 20px;
	grid-template:
			"image name delete"
			"image size delete"
		;
	grid-template-columns: 100px 1fr 200px;
	border-bottom: 1px dotted #c9c9c9;
}


@media screen and (width<=1000px) {
	.complaint-image {
		display: grid;
		align-items: center;
		gap: 20px;
		margin: 20px;
		grid-template:
			"image name"
			"image size"
			"image delete"
		;
		grid-template-columns: 60px 1fr;
	}
}