.userOrders {
	position: relative;
	width: 100%;
	background: var(--window-bg-color);
	border: 1px solid var(--delimiter-color);
	border-radius: 10px;
	padding: 1px;
	min-height: 310px;

	&__body {
		position: relative;
		padding-top: 5px;
		height: 260px;
		overflow: auto;
	}

	&__header {
		position: relative;
		padding-top: 14px;
		margin-inline: 14px;
		padding-bottom: 0;

		&_btn {
			position: absolute;
			right: 0px;
			top: 7px;
			z-index: 2;
		}
	}

	table {
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;
		table-layout: fixed;

		thead {
			th {
				min-width: 100px;
				font-size: 11px;
				font-weight: 700;
				text-align: left;
				color: var(--table-th-color);
				padding: 6px 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&:last-child {
					text-align: right;
					min-width: 50px;
				}
			}
		}

		tbody {
			td {
				position: relative;

				> p {
					width: 100%;
					font-size: 12px;
					font-weight: 400;

					&:first-child {
						&::before {
							content: '';
							pointer-events: none;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							height: 50%;
							width: 2px;
							background-color: var(--direction-color);
						}
					}

					> span {
						line-height: 1;
						color: var(--font-dimmed-color);
						font-size: 11px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 720px) {
	.userOrders {
		&__header {
			&_btn {
				display: none;
			}
		}
	}
}

@media screen and (max-width: 580px) {
	.userOrders {
		margin-top: 20px;
		background: transparent;
		border: none;
		padding: 0;
		min-height: auto;

		&__header,
		&__body {
			padding: 0;
			margin-inline: 0;
		}

		&__header {
			margin-bottom: 10px;
		}
	}
}
