@borderColor: var(--border-color);
.offline {
	width: 100%;
	height: 100%;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
	.detailheader{
		display: inline-block;
		width:100%;
		padding: 1%;
		border:1px solid #ccc;
		border-radius: 10px;
		box-shadow: 3px 3px 5px #d9d9d9;
	}
	.img-box {
		display: inline-block;
		width: 40%;
		height: 300px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// box-shadow: 10px 10px 5px #888888;
		border-radius: 15px;
		float: left;
	}
	.activitytitle{
		display:inline-block;
		width:58%;
		float: left;
		// margin-left:2%;
		.site{
			margin-bottom:1%;
		}
	}
	.activitytitleinfo{
		font-size:16px;
	}
	.activitytitlenmame{
		color:#ba183e;
	}
	.participation{
		font-size:16px;
		color: #a5a5a5 !important;
		margin-top:2%;
	}
	.info-label {
		color: #a5a5a5 !important;
		display: inline-block;
		width: 80px;
		margin-left:2%;
	}
    .info-labels{
		width:66px;
		color: #a5a5a5 !important;
		display: inline-block;
	}
	.parname{
		color:#ba183e;
		margin-left:1%;
	}
	.basics{
		width: 100%;
		padding: 0% 1% 1% 0%;
		border:1px solid #ccc;
		margin-top:1%;
		border-radius: 10px;
		box-shadow: 3px 3px 5px #d9d9d9;
	}
	.headeicon{
		border-left:8px solid #2D8CF0;
		color:#fff;
		padding: 1%;
		font-size:24px;
		background: linear-gradient(to right, #5EA7F4, #fff);
		border-top-left-radius: 10px;
		margin-bottom: 20px;
	}
	.headeicontitle{
		padding-left: 1%;
	}
	.submitarea{
		border:1px solid #ccc;
		margin: 15px 0px 15px 0px;
		border-radius: 10px;
		box-shadow: 3px 3px 5px #d9d9d9;

		.hw-style{
			margin-left: 2%;
		}
	}
	.offline-content {
		height: 100%;
		display: flex;

		&-header {
			height: 40px;
			width: 100%;
			border-bottom: 1px solid @borderColor;
			display: flex;
			align-items: center;
			padding-left: 15px;
			color: #000000;
			font-weight: bold;
			position: relative;

			&::before {
				content: '';
				display: inline-block;
				border: 4px solid #2D8CF0;
				border-radius: 50%;
				margin-right: 10px;
				margin-bottom: 3px;
			}
		}

		.offline-left {
			height: 100%;
			width: 30%;
			border-right: 1px solid @borderColor;

			.volume-list {
				display: flex;
				flex-direction: column;
				margin-left: 10px;
				overflow: hidden;
				padding-bottom: 40px;

				.volume-item {
					padding: 10px 0 10px 20px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					// border-bottom: 1px solid @borderColor;
					cursor: pointer;

					&:hover{
						.volume-active;
					}

					&-name {
						font-size: 16px;
						font-weight: bold;
						margin: 10px 0 5px 0;
						padding-right: 10px;
						overflow: hidden;
						color: #383838;

						& > span {
							display: inline-block;
							width: 20px;
							height: 20px;
							line-height: 20px;
							border-radius: 10px;
							// background-color: #F97C57;
							font-size: 12px;
							text-align: center;
							color: #fff;
						}

						.status-time {
							display: inline-block;
							font-size: 12px;
							margin-right: 10px;
							margin-top: 3px;
							color: #7b7b7b;
							float: right;
						}
					}
				}
			}
		}

		.offline-right {
			height: 100%;
			width: 70%;
			border-right: 1px solid @borderColor;

			
			.ansShow{
				font-size: 14px;
				margin-left: 10px;
			}

			.node-resource-box {
				margin-top: 20px;
				margin-right: 20px;
			}
		}
	}

	.volume-active {
		/* background-image: -webkit-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
		background-image: -o-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
		background-image: -moz-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
		background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%); */
		background-color: var(--active-item-start);
	}
}
.detailbox {
	width: 100%;
	padding: 1%;
	/*margin: 2% 7%;*/
	// background-color: #759cc5;
	border-radius: 10px;
	// color: #fff;
	height: calc(100vh - 80px);
	overflow: auto;
	font-size: initial;
	font-weight: bold;

	.detailstitle {
		color: #2b85e4;
		font-size: 26px;
		margin-bottom: 5px;
		font-weight: bold;
		text-align:left;
		margin-left: 3%;
		position: relative;

		.school-gade{
			vertical-align: middle;
			font-size: 14px;
			color: #fff;
			// background-color: #F97C57;
			padding: 3px 5px;
			border-radius: 8px;
			margin-right: 10px;
			display: inline-block;
    		margin-bottom: 5px;
		}
	}

	.titlename, .target, .type, .object, .time, .keynote, .totalperiod, .score, .site, .content, .accessory, .successbtn {
		padding: 10px;
		// color: #000;
		& > span:first-child {
			color: #13457a;
		}
	}

	.accessory {
		display: flex;
	}

	.successbtn {
		text-align: right;
	}
}
.hw-area{
	border: 1px solid;
	border-radius: 5px;
	padding: 2px 5px;
	cursor: pointer;
	display: inline-block;
	color: #fff;
	margin-top:20px
}
.hour-tag{
    display: inline-block;
    font-size: 12px;
    color: #ff9900;
    border: 1px solid #ff9900;
    padding: 0px 5px;
    border-radius: 4px;
}