body {
	background-color: #f3f3f3;
}

.interact {
	padding: 0;
	margin-bottom: 80px;
}

	.interact .main {
		padding: 0;
	}

		.interact .main .interact-list .nav {
			padding: 0 0 5px;
			display: flex;
			/* justify-content: center; */
		}

			.interact .main .interact-list .nav .nav-item .nav-link{
				padding: 0.5rem;
			}

				.interact .main .interact-list .nav .nav-item .active {
					background: none;
					color: #f08619;
					border-bottom: #f08619 2px solid;
					border-radius: 0;
					font-size: 16px;
					font-weight: bold;
				}

		.interact .main .interact-list .tab-content .list-group .list-group-item {
			margin-bottom: 0;
			border-radius: 0;
			border: none;
			border-bottom: rgba(0, 0, 0, .125) 1px solid;
			padding: 10px 15px;
		}

			.interact .main .interact-list .tab-content .list-group .list-group-item:first-child {
				border-top: rgba(0, 0, 0, .125) 1px solid;
			}

			.interact .main .interact-list .tab-content .list-group .list-group-item .item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 5px;
			}

				.interact .main .interact-list .tab-content .list-group .list-group-item .item-header .avatar {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					overflow: hidden;
				}

					.interact .main .interact-list .tab-content .list-group .list-group-item .item-header .avatar img {
						width: 100%;
					}

				.interact .main .interact-list .tab-content .list-group .list-group-item .item-header .info {
					width: calc(100% - 60px);
					height: 50px;
				}

					.interact .main .interact-list .tab-content .list-group .list-group-item .item-header .info .name {
						height: 30px;
						line-height: 30px;
						font-size: 16px;
						white-space: nowrap;   
						overflow: hidden; 
						text-overflow: ellipsis;
					}

					.interact .main .interact-list .tab-content .list-group .list-group-item .item-header .info .datetime {
						height: 20px;
						line-height: 20px;
						font-size: 14px;
						color: #999;
					}


			.interact .main .interact-list .tab-content .list-group .list-group-item .item-body .title {
				color: #333;
				font-size: 15px;
				line-height: 20px;
				margin-bottom: 2px;
			}

			.interact .main .interact-list .tab-content .list-group .list-group-item .item-body .content {
				color: #999;
				font-size: 14px;
				line-height: 18px;
				text-indent: 2em;
			}
			.interact .main .interact-list .tab-content .list-group .list-group-item .item-body .p_del2 {
				display: block;
				width: 60px;
				text-align: center;
				margin-right: 0px;
				margin-left: auto;
				margin-bottom: 5px;
				padding: 5px 0;
				background-color: bisque;
				border-radius: 3px;
			}
			.interact .main .interact-list .tab-content .list-group .list-group-item .item-body .p_del2 a {
				color: #c30;
			}

			.interact .main .interact-list .tab-content .list-group .list-group-item .item-footer {
				margin: 5px auto 0;
				padding: 5px 0;
				border: #e0e0e0 1px solid;
				border-radius: 5px;
				text-align: center;
				font-size: 14px;
				color: #f08619;
			}

			.interact .main .interact-list .tab-content .list-group .list-group-item .item-reply {
				background-color: #f0f0f0;
				padding: 5px 10px;
				margin-top: 5px;
			}

				.interact .main .interact-list .tab-content .list-group .list-group-item .item-reply .reply-name span {
					font-weight: bold;
				}

				.interact .main .interact-list .tab-content .list-group .list-group-item .item-reply .reply-content p {
					margin-bottom: 5px;
				}

.sidebar {
	position: fixed; /* 鎮诞 */
	/* position: absolute; */ /* 鍥哄畾 */
	width: 100px;
	height: 30px;
	line-height: 30px;
	background-color: #f08619;
	color: #fff;
	text-align: center;
	z-index: 1030;
	border-radius: 5px;
	top: 65px;
	right: 10px;
	-webkit-transition: width 0.3s ease;
	-o-transition: width 0.3s ease;
	transition: width 0.3s ease;
}

	.sidebar a {
		display: block;
		width: 100px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #fff;
	}

/* 鐣欒█銆佸洖澶� */
.interact-add,
.add-reply {
	background-color: #fff;
	margin: 15px;
	padding: 15px;
	border-radius: 5px;
}

	.interact-add .form-group,
	.interact-reply .form-group {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: #eeeeee 1px solid;
		margin-bottom: 30px;
		width: 100%;
	}

		.interact-add .form-group .icon,
		.interact-reply .form-group .icon {
			width: 30px;
			height: 30px;
		}

			.interact-add .form-group .icon img,
			.interact-reply .form-group .icon img {
				margin: 5px 0;
				width: 20px;
				height: 20px;
			}

		.interact-add .form-group .input,
		.interact-reply .form-group .input {
			width: 100%;
			height: 35px;
			display: flex;
			align-items: center;
		}

			.interact-add .form-group .input input,
			.interact-reply .form-group .input input {
				width: 100%;
				height: 35px;
				font-size: 16px;
				border: 0;
			}

			.interact-add .form-group .input textarea,
			.interact-reply .form-group .input textarea {
				width: 100%;
				font-size: 16px;
				border: 0;
			}

	.interact-add .submit,
	.interact-reply .submit {
		background-color: #fea81d;
		border: 0;
		border-radius: 25px;
		width: 100%;
		height: 50px;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: -50px;
	}

/* 鍥炲 */
.interact-reply {
	margin-bottom: 120px;
}

	.interact-reply .detail {
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 5px;
	}

		.interact-reply .detail .title {
			background-color: #e3e3e3;
			padding: 5px 10px;
			font-size: 16px;
			font-weight: bold;
		}

		.interact-reply .detail .content {
			padding: 10px 0;
			font-size: 14px;
		}

		.interact-reply .detail .content img {
			width: 100%!important;
			height: auto;
		}

			.interact-reply .detail .content p {
				margin-bottom: 5px;
			}

	.interact-reply .reply {
		margin: 0 15px;
	}

		.interact-reply .reply .item {
			padding: 15px;
			margin-bottom: 5px;
			background-color: #fff;
			border-radius: 5px;
		}

			.interact-reply .reply .item .info {
				font-size: 14px;
				padding: 5px 0;
			}

			.interact-reply .reply .item .reply-content {
				background-color: #f0f0f0;
				padding: 10px;
				font-size: 14px;
			}
			
			.interact-reply .reply .item .reply-content .span_noaudit{
				display: block;
				background-color: bisque;
				text-align: center;
				color: #c30;
				padding: 5px 0;
				margin-bottom: 5px;
			}
			
			.interact-reply .reply .item .reply-content .p_del{
				display: block;
				width: 60px;
				text-align: center;
				margin-right: 0px;
				margin-left: auto;
				margin-bottom: 5px;
				padding: 5px 0;
				background-color: bisque;
				border-radius: 3px;
			}
			.interact-reply .reply .item .reply-content .p_del .span_noaudit{
				background: none;
				color: #c30;
				margin: 0;
				padding: 0;
			}