/*
*       DISPLAYS
*/

.page {
	align-items: flex-start;
	width: 100%;
	overflow: auto;
	flex: 1 0 auto;
	margin-top: var(--header-height);
	background: var(--white);
}

.page-content {
	flex: 1 0 0;
	padding: 40px;
	gap: 40px;
	overflow: auto;
}

.row {
	display: flex;
}

.col {
	display: flex;
	flex-direction: column;
}

.justify-start {
	justify-content: flex-start;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.align-start {
	align-items: flex-start;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

.align-stretch {
	align-items: stretch;
}

.grow {
	flex: 1 0 auto;
}

/*
*		FORMS
*/

form {
	width: 100%;
	max-width: 320px;
	align-self: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;

	.form-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 3px;

		label {
			margin-left: 5px;
			color: var(--primary-color);
		}

		.input-wrapper {
			width: 100%;

			input {
				width: 100%;
				padding: 10px 16px;
				border: 1px solid var(--black);
				border-radius: var(--round);
				outline: none;
			}

			input:focus,
			input:active,
			input:focus-visible {
				border: 2px solid var(--primary-color);
			}
		}
	}
}

/*
*		DASHBOARD
*/



/*
*       RESPONSIVE
*/

.desktop {
	display: flex;
}

.mobile {
	display: none;
}

@media (max-width: 1024px) {
	.hidden-md {
		display: none;
	}
}

@media (max-width: 768px) {
	.desktop {
		display: none;
	}

	.mobile {
		display: flex;
	}
}