//引入全局配置
@import 'c/conf';
@import 'c/mx';
@import 'c/f';
@import 'a/c';

page {
	background-color: $bgc1;
}

.g-bd{
	height:100%
}

.m-fm {
	background: #F7F7F7;

	.row_myreport{
		margin:30rpx 20rpx 0 20rpx;
		padding:30rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 29rpx 0rpx rgba(63, 63, 63, 0.1);
		border-radius: 10rpx;

		.title_myreport{
			font-size: 30rpx;
			font-family: Source Han Serif SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}

		>image{
			margin-top:10rpx;
			float: right;
			width: 18rpx;
			height: 25rpx;
			line-height: 40rpx;
		}
	}


	.row_content {
		margin:30rpx 20rpx 0 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 17rpx 0rpx rgba(63, 63, 63, 0.1);
		border-radius: 10rpx;
		padding:36rpx 20rpx 26rpx 20rpx;

		.view_org{

			.org_title{
				font-size: 26rpx;
				font-family: Source Han Serif SC;
				font-weight: 500;
				color: #999999;
				line-height: 52rpx;
			}

			.org_list{
				margin-top:39rpx;
				display: flex;
				justify-content: start;

				.item{
					width: 110rpx;
					height: 48rpx;
					background: #E3271C;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Serif SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
				}
				.item_left{
					margin-left:40rpx;
				}

				.item_focus{
					background: #F7F7F7;
					color: #999999;
				}
			}
		}
	}
	.fm-flex {
		display: flex;
		flex-direction: column;
		transition: height 0.2s;
		-webkit-transition: height 0.2s;
		-moz-transition: height 0.2s;
		-ms-transition: height 0.2s;
		-o-transition: height 0.2s;
		.topic_text {
			// min-height: 320rpx;
			margin-top:39rpx
		}
	}

	.view_npc{
		font-size: 26rpx;
		font-family: Source Han Serif SC;
		font-weight: 500;
		color: #666666;
		line-height: 40rpx;

		>image{
			margin-left:20rpx;
			height:20rpx;
			width:20rpx;
		}
	}

	.position-hints {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 48rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		padding-top: 24rpx;
		font-size: 26rpx;
		font-family: Source Han Serif SC;
		font-weight: 500;
		color: #999999;
		// border-top: 1rpx solid #e7eeee;
		// border-radius: 24rpx;
		// -webkit-border-radius: 24rpx;
		// -moz-border-radius: 24rpx;
		// -ms-border-radius: 24rpx;
		// -o-border-radius: 24rpx;
		.position-hints-left {
			image {
			position: relative;
			top: -3rpx;
			width: 21rpx;
			height: 26rpx;
			margin-right: 8rpx;
			vertical-align: middle;
			}
			text {
			// line-height: 48rpx;
			}
		}
		.position-hints-arrow {
			width: 20rpx;
			height: 20rpx;
		}
			
	}

	.view_attach_btn {
		margin-top: 20rpx;
		padding: 26rpx 22rpx 0 22rpx;
		border-top: 1rpx solid #e7eeee;

		image {
			width: 46rpx;
			height: 46rpx;
			margin-right: 40rpx;
			vertical-align: middle;
		}
	}

	textarea {
		box-sizing: border-box;
		display: block;
		margin: 0 auto auto;
		padding: 5rpx 0;
		width: 100%;
		height: 320rpx;
		line-height: 45rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 14px;
		font-family: Source Han Serif SC;
		color: $fc1;
		
	}
	.input-hint {
		box-sizing: border-box;
		line-height: 80rpx;
		text-align: right;
		font-family: Source Han Serif SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		font-size: 13px;
	}
	.input-hints {
		line-height: 40rpx;
	}

	.img-list {
		@include cs;
		position: relative;
		box-sizing: border-box;
		display: block;
		// margin: 25rpx auto auto;
		width: 660rpx;

		.img-item {
			position: relative;
			box-sizing: border-box;
			float: left;
			margin-right: 40rpx;
			margin-bottom: 5rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			background-color: #f3f4f5;

			&.z-unvalid {
				.img-primary {
					border: 3px solid #f44;
				}
			}

			&:nth-child(3n) {
				margin-right: 0;
			}

			.i-del {
				position: absolute;
				display: block;
				width: 40rpx;
				height: 40rpx;
				top: -15rpx;
				right: -15rpx;
			}

			.img-primary {
				box-sizing: border-box;
				display: block;
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}

			&.img-item-add {
				// border: 2px dashed rgba(#000, 0.04);
				.i-add {
					position: absolute;
					display: block;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					width: 55rpx;
					height: 55rpx;
					margin: auto;

					&:after,
					&:before {
						content: '';
						position: absolute;
						display: block;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						background-color: #ccc;
					}

					&:before {
						width: 55rpx;
						height: 5rpx;
					}

					&:after {
						width: 5rpx;
						height: 55rpx;
					}
				}
			}
		}
	}
	
	.btn {
		width: 350rpx;
		height: 70rpx;
		margin-top:58rpx;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		background: #E3271C;
		border-radius: 40rpx;
		border-color: #E3271C;
		font-size: 25rpx;
		font-family: Source Han Serif SC;
		font-weight: bold;
		line-height: 68rpx;
		color: #FFFFFF;
		text-align: center;

		&.z-disabled {
			background-color: lighten($c1, 20);
			border-color: lighten($c1, 20);

			&:active {
				background-color: lighten($c1, 15);
				border-color: lighten($c1, 15);
			}
		}

		&:active {
			background-color: darken($c1, 10);
			border-color: darken($c1, 10)
		}
	}

	.topic-record {
		position: absolute;
		bottom: -580rpx;
		width: 100%;
		transition: bottom 0.2s;
		-webkit-transition: bottom 0.2s;
		-moz-transition: bottom 0.2s;
		-ms-transition: bottom 0.2s;
		-o-transition: bottom 0.2s;
	}
	.topic-record-on {
		bottom: 0;
	}

}

.z-placeholder {
			
	@include wwb;
	line-height: 100rpx;
}