MAGE do stuff mockup.css

MAGE do stuff mockup.css

.main-section {
	display: flex;
	flex-direction: column;
	width: 1050px;
}

.main-section-header {
	background-color: #B1A9A9;
}

.main-section-footer {
	background-color: #C4C4C4;
}

.pages-and-tasks {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 680px;
	gap: 30px;
}

.pages {
	width: 276px;
	height: 100%;
	background-color: #E1E1E1;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.pages-list {
	text-align: left;
	height: 150px;
}

.tasks {
	background-color: #E1E1E1;
	width: 670px;
	display: flex;
	flex-direction: column;
}

.header {
	text-align: center;
}

.tasks-buttons {
	display: flex;
	flex-direction: row;
}

.tasks-list {
	display: flex;
	flex-direction: column;
	gap: 40px; /* in reality this will be dynamic */
	height: 100%;
	align-items: center;
}

.task {
	background-color: #C4C4C4;
	width: 580px;
}

.active-task {
	height: 260px; /* in reality this will be dynamic */
}

.inactive-task {
	height: 40px; /* in reality this will be dynamic */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.active-task {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

.tasks-section-buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
}

.active-task-user-description {
	text-align: center;
}

.active-task-buttons {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}