.web-page-post-assignment,
.web-page-post-resource {
	cursor : pointer;
}

.web-page-post-assignment:hover .assignment-preview,
.web-page-post-resource:hover .resource-preview {
	opacity   : 1;
	transform : translate(-3.5rem, -5.75rem);
}

.assignment-preview,
.resource-preview {
	background     : linear-gradient(to right, #f7f7f0, #ecefff);
	border         : 1px solid #ddd;
	border-radius  : 5px;
	box-shadow     : 1px 1px 13px 1px #ddd;
	color          : #222;
	display        : flex;
	height         : 10rem;
	opacity        : 0;
	overflow       : hidden;
	pointer-events : none;
	position       : absolute;
	transform      : translate(-3.5rem, 0);
	transition     : all 0.5s;
	width          : 13rem;
	z-index        : 99;
}

.web-page-post-assignment:hover .assignment-preview.no-show,
.web-page-post-resource:hover .resource-preview.no-show {
	opacity   : 0;
	transform : translate(-3.5rem, 0);
}

.assignment-preview {
	background     : #fff;
	flex-direction : column;
}

.assignment-preview-header {
	align-items     : center;
	background      : linear-gradient(to right, #f7f7f0, #ecefff);
	border-bottom   : 1px solid #ddd;
	color           : #0e336c;
	display         : flex;
	font-style      : 1.1rem;
	font-weight     : 900;
	justify-content : center;
	width           : 100%;
}

.assignment-preview-image-container {
	align-items     : center;
	display         : inline-flex;
	height          : 2.3rem;
	justify-content : center;
	width           : 2.3rem;
}

.assignment-preview-title {
	flex-grow : 1;
	padding   : 0.5rem;
}

.assignment-preview-description {
	display     : inline-block;
	flex-grow   : 1;
	padding     : 0.2rem 0.5rem;
	white-space : normal;
}

.assignment-preview-image {
	max-height : 2.1rem;
	max-width  : 2.1rem;
}

.resource-preview .web-page-resource-container {
	flex : unset;
}

.resource-preview .web-page-resource {
	margin : 0;
	width  : 100%;
}

.resource-preview .resource-title {
	color         : #0e336c;
	padding       : 0 1rem;
	overflow      : hidden;
	text-align    : center;
	text-overflow : ellipsis;
	width         : 13rem;
}