.demo-data-source-actions {
	margin: 56px 0;
}

.demo-row-highlight-first {
	background: #f3f315;
}
.demo-row-highlight-last {
	background: #0dd5fc;
}
.demo-row-highlight-even {
	background: #ff0099;
}
.demo-row-highlight-odd {
	background: #83f52c;
}

.demo-table-card {
	margin: 24px 0;
	max-height: 450px;
	overflow: auto;

	h3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.user-row {
	cursor: pointer;
	position: relative; // For mdRipple

	&:hover {
		background: #55f;
	}
	&:active {
		background: #eaeaea;
	}
}

/** Styles so that the CDK Table columns have width and font size. */
.cdk-table {
	font-size: 12px;

	.cdk-row,
	.cdk-header-row {
		display: flex;
	}

	.cdk-cell,
	.cdk-header-cell {
		flex: 1;
	}

	.cdk-header-cell {
		font-weight: bold;

		&.mat-sort-header-sorted {
			color: black;
		}
	}
}

.demo-mat-table-example {
	table-header-demo {
		background: white;
	}
}

/* Structure so that the table is contained on a card */
.demo-table-container {
	max-height: 800px;
	display: flex;
	flex-direction: column;

	mat-table {
		overflow: auto;
	}
}

/* Column max widths */
.cdk-column-userId {
	max-width: 32px;
	justify-content: flex-end;
}

.cdk-column-userName {
	max-width: 120px;
}

.cdk-column-color {
	max-width: 160px;
}

/* Progress bar styling */
.cdk-column-progress {
	&.cdk-cell,
	&.mat-cell {
		display: flex;

		.demo-progress-stat {
			width: 32px;
			padding-right: 8px;
		}

		.demo-progress-indicator-container {
			flex-grow: 1;
			display: flex;
			align-items: center;
		}
		.demo-progress-indicator {
			border-radius: 8px;
			height: 8px;
		}
	}
}