.list-view-header {
	.alignment-box {
		align-items: center;
		display: flex;

		h1 {
			margin: 0;
		}

		.image {
			img {
				border-radius: $border-radius;
				box-shadow: $box-shadow;
				height: 50px;
				width: 50px;
			}
		}

		> * {
			margin-right: 1em;

			&.menu {
				cursor: pointer;
				margin-left: auto;
				margin-right: 0;
			}
		}
	}
}

.list {
	padding-left: 4px;
	padding-top: 4px;

	.end-loader,
	.end {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 30em;
		text-align: center;

		p {
			max-width: 30em;
		}

		> * {
			margin: 2em;
		}
	}

	.list-item {
		border-bottom: 1px solid $foreground-lightgray;
		color: inherit;
		cursor: pointer;
		display: flex;
		padding: 2em 0;
		text-decoration: inherit;


		&:first-child {
			padding-top: 0;
		}

		.recent-indicator {
			background-color: $foreground-green;
			border-radius: 10000px;
			height: 8px;
			left: 83px;
			position: absolute;
			top: 6px;
			width: 8px;
		}

		.left {
			margin-right: 2em;
			position: relative;

			> img,
			> .background-image {
				background-position: center;
				background-size: cover;
				border-radius: $border-radius;
				box-shadow: $box-shadow;
				height: 75px;
				width: 75px;
			}
		}

		.right {
			max-width: 90%;
			@media only screen and (max-width: 1400px) { width: 80%;}
			@media only screen and (max-width: 970px) { width: 70%;}


			h2 {
				font-weight: 600; // TODO: asdfasdfasdf @kenhoff
				margin-bottom: 0;
				margin-top: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
				
			}

			.info {
				align-items: center;
				color: $foreground-darkgray;
				display: flex;
				font-family: $primary;
				font-size: 11px;
				font-weight: bold;
				letter-spacing: 0.1em;
				margin-bottom: 0.5em;
				text-transform: uppercase;

				.date {
					font-size: 11px;
				}

				> * {
					margin-right: 1em;
				}
			}
		}
	}
}
