.web-page-posts {
	max-width : 100%;
	padding   : 0 1rem 1.5rem !important;
	position  : relative;
}

.web-page-no-description {
	align-items : center;
	color       : rgba(0,0,0,.7);
	display     : flex;
	font-style  : italic;
	height      : 4rem;
	width       : 100%;
	z-index     : 99;
}

.web-page-no-description-text {
	text-align  : center;
	width       : 100%;
}

.post-edit-button,
.comment-reply-button {
	background : none;
	border     : none;
	color      : #4183c4;
	font       : 1.1rem Lato,'Helvetica Neue',Arial,Helvetica,sans-serif !important;
	outline    : none;
	padding    : 0;
	transition : transform 0.2s;
}

.post-edit-button:hover {
	color : #0e336c;
}

.comment-reply-button:hover {
	color     : #0e336c;
	transform : translate(-2px, 0px);
}

.post-edit-button:active,
.comment-reply-button:active {
	opacity : 0.7;
}

.post-edit-button>.pencil,
.comment-reply-button>.reply {
	transform  : translate(0,-1px);
	transition : transform 0.2s;
}

.post-edit-button:hover>.pencil {
	transform : translate(0,-1px) rotate(-10deg);
}

.comment-reply-button:hover>.reply {
	transform : translate(1px,-1px) rotate(-7deg);
}

.add-new-post-section {
	align-items    : center;
	color          : #4183c4;
	cursor         : pointer;
	display        : flex;
	flex-direction : column;
	height         : 5.25rem;
	padding        : 1rem 0;
	width          : 100%;
}

.add-new-post-section:hover {
	color          : #0e336c;
	filter         : contrast(0.85) saturate(1.5);
	-o-filter      : contrast(0.85) saturate(1.5);
	-ms-filter     : contrast(0.85) saturate(1.5);
	-moz-filter    : contrast(0.85) saturate(1.5);
	-webkit-filter : contrast(0.85) saturate(1.5);
}

.add-new-post-body {
	align-items     : center;
	background      : linear-gradient(to right,#f0f0f0,#efefff);
	border-radius   : 4px;
	display         : flex;
	flex-grow       : 1;
	font            : 1rem Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
	height          : 100%;
	justify-content : center;
	text-align      : center;
	width           : 100%;
}

.add-new-post-label {
	padding : 0.5rem 0;
}

.add-new-post-body:hover .add-new-post-label>.plus {
	transform : translate(-3px, 0) rotate(-90deg);
}

.add-new-post-label>.plus,
.add-new-post-body:active .add-new-post-label>.plus {
	transform  : none;
	transition : transform 0.3s;
}

.web-page-post {
	border        : none !important;
	border-top    : 1px solid #f1f1f1 !important;
	border-radius : 0 !important;
	box-shadow    : none !important;
	display       : block;
	opacity       : 1;
	padding       : 5px 0;
	position      : relative;
	transform     : translateY(0);
}

.web-page-new-post {
	z-index : 9;
}

.web-page-post.adding {
	transition : height 0.3s, margin 0.3s, opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

.web-page-post.deleting {
	transition : height 0.3s 0.3s, margin 0.3s 0.3s, opacity 0.3s, transform 0.3s;
}

.web-page-post.hiding {
	height    : 0 !important;
	margin    : 0 !important;
	opacity   : 0 !important;
	transform : translateY(-10%) !important;
}

.view-post-border {
	background            : linear-gradient(to left, rgba(0, 100, 200, 0.35), #eee);
	background-position-x : left;
	background-size       : 400%;
	height                : 1px;
	margin-bottom         : 2rem;
	position              : relative;
	transition            : background-position-x 4s;
	width                 : 100%;
}

.web-page-post:hover .view-post-border {
	background-position-x : right;
}

.post-header {
	align-items : center;
	display     : flex;
	font        : 1.5rem Helvetica, sans-serif;
	font-weight : 700;
	padding     : 0.4rem 0;
}

.editing-post-header {
	border : none;
}

.post-header .post-header-filler {
	flex : 1 1 auto;
}

.post-header .post-title {
	color         : #222;
	flex-shrink   : 0;
	font          : 1rem Helvetica,sans-serif;
	font-weight   : 700;
	padding-right : 0.5rem;
}

.wide.post-title,
.post-title-input {
	padding : 0;
	width   : 100%;
}

.post-title-input {
	border        : 1px solid #e0e0e0;
	border-radius : 2px;
	padding       : 0.4rem 10px;
}

.post-title-input:focus {
	border-bottom  : 0.15rem solid #0e336c;
	box-shadow     : 0 0 7px #ccc;
	outline        : none;
	padding-bottom : calc(0.25rem + 1px);
}

.post-title-view {
	align-items : center;
	display     : flex;
}

.post-header .post-date {
	color       : #000;
	display     : inline-flex;
	flex-grow   : 1;
	flex-shrink : 0;
	font-size   : 0.9rem;
	font-style  : italic;
	font-weight : 300;
	padding     : 0 0.5rem;
}

.post-edit-container {
	align-items    : center;
	display        : flex;
	flex-direction : row-reverse;
	flex-grow      : 1;
}

.web-page-post .post-content {
	min-height : 4rem;
	word-break : break-word;
}

.web-page-post .post-content,
.page-description-content {
	font-size : 1.15rem;
}

.edit-post-input {
	border     : 1px solid rgba(0, 0, 0, 0.2);
	display    : block;
	min-height : 2.5rem;
	padding    : 0.5rem;
	transition : min-height 0.2s, height 0.2s;
	width      : 100% !important;
}

.edit-post-input:not(:focus) {
	height : 2.5rem !important;
	resize : none;
}

.edit-post-input:focus,
.edit-post-input.edited {
	height     : 5rem;
	min-height : 5rem;
}

.post-footer {
	display         : flex;
	justify-content : flex-end;
}

.edit-footer {
	align-items : center;
	padding     : 0.9rem 0;
}

.edit-footer-left {
	flex-grow  : 1;
	text-align : left;
}

.edit-footer-right {
	align-items     : center;
	display         : flex;
	justify-content : flex-end;
}

.view-footer {
	color          : #4183c4;
	flex-direction : column;
	font           : 1rem Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
}

.comments-row {
	display        : flex;
	flex-direction : row;
	font-size      : 1.05rem;
}

.add-comment-button {
	background : none;
	border     : none;
	color      : inherit;
}

.view-comments,
.add-comment-button {
	cursor  : pointer;
	outline : none;
	padding : 0.3rem 0;
}

.view-comments:hover,
.add-comment-button:hover {
	color : #0e336c;
}

.view-comments:active,
.add-comment-button:active {
	opacity : 0.7;
}

.add-comment-button>.talk,
.add-comment-button>.reply {
	transform  : none;
	transition : transform 0.3s;
}

.add-comment-button:hover>.talk {
	transform : translate(2px,-2px) rotate(-2deg);
}

.post-footer-label {
	align-items  : center;
	color        : #333;
	display      : flex;
	font-style   : italic;
	font-weight  : 900;
	margin-right : 1rem;
	padding      : 0.5rem;
	white-space  : nowrap;
}

.post-footer-label.notifications-label {
	margin-right : 0;
}

.edit-footer-left .post-footer-label {
	display      : inline-flex;
	padding-left : 0;
}

.post-footer-label.moderation-label {
	color         : #779;
	font-style    : normal;
	font-weight   : 300;
	margin        : 0;
	padding-right : 0;
}

.post-footer-label .left {
	align-items  : center;
	display      : flex;
	margin-right : 0.5rem;
}

.post-footer-label .post-profiles {
	font-style : normal;
}

.comments-container {
	border-left  : 1px solid #e7e7f0;
	color        : #222;
	margin       : 0.7rem 0 0.7rem 0;
	padding-left : 1rem;
}

.comments-container>.web-page-post {
	border-top    : none !important;
	margin-bottom : 0.7rem;
	padding-top   : 1rem;
}

.comments-container>.web-page-post:last-child {
	margin-bottom : 0;
}

.comments-container>.web-page-post .post-header {
	background    : linear-gradient(to left, #f7f7f0 25%, #ecefff);
	border-radius : 5px;
	margin-bottom : 10px;
	padding       : 0.5rem;
}

.comments-container>.web-page-post .post-content {
	min-height : unset;
	padding    : 0;
}

.comments-container>.web-page-post .no-comments-yet {
	display : none;
}

.comments-container>.web-page-post .edit-footer {
	padding : 0.9rem 0 0.9rem 1rem;
}

.no-comments-yet,
.no-comments-yet:hover {
	color  : #737373;
	cursor : default;
}

.post-footer-button {
	height : 2.2rem;
}

.post-attachments-container {
	margin-bottom : 1rem;
	margin-top    : 3rem;
	position      : relative;
	width         : 100%;
}

.web-page-post-resource-container,
.web-page-post-assignment-container {
	display      : inline-flex;
	margin-right : 1.5rem;
}

.post-resources-title,
.post-assignments-title {
	align-items   : center;
	background    : linear-gradient(to left, #f7f7f0 25%, #ecefff);
	border-radius : 4px;
	color         : #222;
	display       : inline-flex;
	margin        : 2px 4px 0 0;
	padding       : 0 1rem;
	width         : 9rem;
}

.web-page-post-resource,
.web-page-post-assignment {
	align-items   : center;
	border-bottom : 1px solid #eee;
	display       : inline-flex;
	padding       : 0.5rem 1rem;
	white-space   : nowrap;
}