/* LOG IN */

.user-form-container {
	max-width: 500px;
}

.userForm {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-info {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

@media only screen and (max-width: 600px) {
	.userForm {
		flex-direction: column;
	}

	.inner-button-group {
		width: 100%;
	}

}

.back-next-button-group {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.inner-button-group {
	width: 380px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.user-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-page-icon {
	width: 5rem;
}

.user-page-icon svg {
	width: 100%;
	fill: none;
	stroke: black;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.login-buttons {
	display: flex;
	flex-direction: column;
	margin-top: .5rem;
	gap: .5rem;
}

.login-buttons a, .user-orders-row a {
	color: #636161;
}

.login-buttons a:hover, .user-orders-row a:hover {
	color: black;
}

.user-menu {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.user-orders-head {
	font-weight: 600;
	border-bottom: 1px solid #ccc;
}

.user-orders-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: .5rem 0;
}

.active {
	font-weight: bold;
}

.successfulCreation {
	padding: 1rem;
	width: 100%;
	background-color: rgb(210, 254, 210);
	color: rgb(0, 109, 0);
}

.errorCreation {
	padding: 1rem;
	width: 100%;
	background-color: #ffd3d3;
	color: rgb(99, 0, 0);
}