@charset "UTF-8";
.comment-item {
	padding: 10px 0;
	border-top: 1px solid #ccc;
}

.comment-unread {
	background: rgb(255,255,204);
}

.comment-item:first-child {
	border: none;
}

.comment-item:after {
	content: "��"; 
	display: block; 
	height: 0; 
	visibility: hidden; 
	clear: both;
}

.comment-item > div {
	float: left;
}

.comment-avatar {
	width: 80px;
	text-align: center;
}

.comment-avatar > img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.comment-time {
	color: #999;
}

.comment-body {
	width: calc(100% - 80px);
	word-wrap: break-word;
}

.comment-body.comment-no-avatar {
	width: 100%;
}

.comment-link {
	float: right;
}

.comment-text-vertical {
	margin: 15px 0;
}

.comment-link-vertical {
	margin: 8px 0;
}

.comment-content {
	font-size:16px;	
}

.comment-title {
	font-weight: bold;
	font-size: 1.5em;
}

.comment-loadmore {
	margin: 10px 0;
}

.comment-loadmore > button {
	height: 40px;
}

.comment-button {
	float: right;
}

.comment-thumb {
    width: 18%;
    margin-right: 10px;
}

.comment-child {
    background: rgb(242,242,242);
    padding-bottom: 5px;
    overflow: hidden;
}

.comment-input {
    padding: 10px 0;
}

.comment-input .input-group {
    margin: 0 10px 0 60px;
}

.comment-input .comment-avatar {
    float: left;
    width: 60px;
}

.comment-input .comment-avatar img {
    width: 34px;
    height: 34px;
}


/* Insert Homework */
input.insert-homework {
    display: none;
}
.fillwidth {
    width: 100% !important;
    height: auto !important;
}
.fillheight {
    height: 100% !important;
    width: auto !important;
}
.homework-container {
    list-style: none;
    padding: 0;
    margin: 0;
    /* float: left; */
    overflow: auto;
    font-size: 0; /* remove white space between images */
    vertical-align: top;
}
.homework-container > li {
    display: inline-block;
    margin: 8px 3px 4px;
    max-width: 100px;
    max-height: 100px;
}
.homework-container > li > a {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: block;
}
.homework-container > li > a:after {
    content: "\f00d";
    color: #fff;
    font: normal normal normal 32px/1 FontAwesome;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    opacity: 0;
    position: absolute;
    left: 0;
    background-color: #000;
}
.homework-container > li:hover > a:after {
    opacity: .6;
}
.homework-container > li > a > img {
    height: 100px;
    width: auto;
    max-width: 100px;
}
/* magnific popup */
.img-cover {
    display: inline-block;
    overflow: hidden;
}
.comment-body .img-cover {
    width: 70px;
    height: 70px;
}
.image-source-link {
    color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}