<div class="row">
	<!-- 첫번째 박스   -->
	<div class="col-lg-12 col-layer">
		<section class="widget">
			<header>
				<h4>
					<span
						class="font13"
						style="font-weight: bold">
						<i class="fa fa-home"></i>
						Time 분석
					</span>
				</h4>
				<div class="widget-controls">
					<a
						data-widgster="toleft"
						title="change width to left"
						href="#">
						<i class="glyphicon glyphicon-chevron-left"></i>
					</a>
					<a
						data-widgster="expand"
						title="Expand"
						href="#">
						<i class="glyphicon glyphicon-chevron-up"></i>
					</a>
					<a
						data-widgster="collapse"
						title="Collapse"
						href="#">
						<i class="glyphicon glyphicon-chevron-down"></i>
					</a>
					<a
						data-widgster="toright"
						title="change width to right"
						href="#">
						<i class="glyphicon glyphicon-chevron-right"></i>
					</a>
					<a
						data-widgster="restore"
						title="Restore"
						href="#">
						<span class="glyphicon glyphicon-repeat"></span>
					</a>
					<a
						data-widgster="fullscreen"
						title="Fullscreen"
						href="#">
						<i
							class="glyphicon glyphicon-fullscreen"
							style="font-size: 11px"></i>
					</a>
				</div>
			</header>
			<div class="body">
				<div
					class="gradient_middle_border"
					style="width: 100%; height: 2px"></div>
				<blockquote
					class="font13"
					style="margin-top: 5px">
					선택한 제품(서비스)와 버전의 Time 관점 요구사항 현황
					<div style="float: right">
						<button
							class="btn btn-transparent btn-xs"
							style="margin-top: -3px; color: #acacac; background: rgba(51, 51, 51, 0.2); padding: 1px 9px"
							onclick="window.open('docs/guide.html#requirement_regist_inquiry')">
							Help
							<i
								class="fa fa-question"
								style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
						</button>
					</div>
				</blockquote>
				<div class="row">
					<div class="col-md-3">
						<section
							class="widget dashboard-top-section top-menu-div"
							style="border: dashed; border-width: thin; border-color: lightsteelblue">
							<header style="margin-bottom: 20px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										제품(서비스) - 버전 선택
									</span>
								</h4>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
							</header>
							<div class="body">
								<div class="column">
                                    <blockquote class="font13">
										1. Product
										<sup>service</sup>
										를 선택해 주세요
									</blockquote>
									<div
										class="control-group"
										style="padding-top: 10px; padding-bottom: 10px; border: 0">
										<div
											class="controls form-group select-box"
											style="margin-bottom: 5px !important">
											<select
												id="selected_pdService"
												required="required"
												data-placeholder="Select Product(Service)"
												class="select-block-level chzn-select darkBack"
												tabindex="-1"
												name="selected_pdService"
												style="width: 100% !important">
												<option value=""></option>
											</select>
										</div>
									</div>
									<blockquote class="font13">
										2. Product
										<sup>service</sup>
										의 버전을 선택해 주세요
									</blockquote>
									<div
										class="control-group"
										style="padding-bottom: 10px; border: 0">
										<div
											class="controls form-group select-box"
											style="margin-bottom: 5px !important">
											<select
												multiple="multiple"
												id="multiversion"
												class="multiple-select btn-block darkBack"
												placeholder="&nbsp;&nbsp;Select Version"></select>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
					<div class="col-md-3">
						<section
							class="widget large top-menu-div"
							style="margin-bottom: 15px; height: 290px">
							<header>
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-pencil-square-o"></i>
										종합 진행 현황
									</span>
								</h4>
							</header>
							<div class="body">
								<div
									class="gradient_middle_border"
									style="width: 100%; height: 2px; margin-top: 5px"></div>
								<div
									class="body"
									id="radarPart"></div>
							</div>
						</section>
					</div>
					<div class="col-md-2">
						<section
							class="widget dashboard-top-section top-menu-div"
							style="overflow: auto; margin-bottom: 15px">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-pencil-square"></i>
										범위(Scope) 현황
									</span>
								</h4>
							</header>
							<div class="body">
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
								<div
									class="box"
									style="display: flex; justify-content: space-evenly; margin: 10px 0">
									<div>
										<div
											id="req_in_action_count"
											style="
												color: #a4c6ff;
												margin-top: 5px;
												font-size: 20px;
												line-height: 20px;
												height: 20px;
												font-weight: 700;
											">
											-
										</div>
										<div class="description">
											<i class="fa fa-wrench"></i>
											진행 중
										</div>
									</div>
									<div style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px">|</div>
									<div>
										<div
											id="req_count"
											style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700">
											-
										</div>
										<div class="description">【총 요구사항】</div>
									</div>
								</div>
								<div class="column">
									<div
										class="control-group"
										style="padding-bottom: 10px; border: 0">
										<div
											class="controls form-group darkBack col-md-12"
											style="margin-bottom: 10px !important; padding: 10px 0 !important; text-align: center">
											<span>
												요구사항 진척도 :
												<!--													id="linkedIssue_subtask_count_per_req_in_action"-->
												<a
													id="req_progress"
													style="font-weight: bold">
													-
												</a>
												%
											</span>
											<br />
											<span>(완료된 요구사항 : <a id="req_completed" style="font-weight: bold">-</a>)</span>
										</div>
									</div>
									<div
										class="control-group"
										style="padding-bottom: 10px; border: 0;">

									</div>
								</div>
								<div
									class="box"
									style="display: flex; justify-content: space-evenly; margin: 10px 0">
									<div
										class="controls form-group col-md-6"
										style="margin-bottom: 5px !important; padding: 10px 0 !important; text-align: center">
											<span>
												생성된 요구사항 이슈
												<br />
												<small>(미할당)</small>
												<br />
												<a
													id="total_req_issue_count"
													style="font-weight: bold">
													-
												</a>
												개 (
												<span id="no_assigned_req_issue_count">-</span>
												)
											</span>
										<br />
									</div>
									<div
										class="controls form-group col-md-6"
										style="margin-bottom: 5px !important; padding: 10px 0 !important; text-align: center">
											<span>
												생성한 연결이슈
												<br />
												<small>(미할당)</small>
												<br />
												<a
													id="total_linkedIssue_subtask_count"
													style="font-weight: bold">
													-
												</a>
												개 (
												<span id="no_assigned_linkedIssue_subtask_count">-</span>
												)
											</span>
										<br />
									</div>
								</div>
							</div>
						</section>
					</div>
					<div class="col-md-2">
						<section class="widget dashboard-top-section top-menu-div">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-clock-o"></i>
										일정(Time) 현황
									</span>
								</h4>
							</header>
							<div class="body">
								<div
									class="gradient_middle_border"
									style="width: 100%; height: 2px; margin-top: 5px"></div>
								<div
									class="box"
									style="display: flex; justify-content: space-evenly; margin: 10px 0">
									<div>
										<span>
											전체 일정
											<br />
											<a
												id="start_date_summary"
												style="font-weight: bold">
												-
											</a>
											~
											<a
												id="end_date_summary"
												style="font-weight: bold">
												-
											</a>
										</span>
										<br />
									</div>
								</div>
								<div
									class="box"
									style="display: flex; justify-content: space-evenly; margin: 10px 0">
									<div>
										<div
											id="remaining_days"
											style="
												color: #a4c6ff;
												margin-top: 5px;
												font-size: 20px;
												line-height: 20px;
												height: 20px;
												font-weight: 700;
											">
											-
										</div>
										<div class="description">【 일정 】</div>
									</div>
									<div style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px">|</div>
									<div>
										<div
											id="progressDateRate"
											style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700">
											-
										</div>
										<div class="description">【 경과 】</div>
									</div>
								</div>
								<div
									class="box"
									style="display: flex; justify-content: space-evenly; margin: 10px 0">
									<div>
										<span>
											작업 종료 예상일
											<br />
											<a
												id="expected_end_date"
												style="font-weight: bold">
												-
											</a>
										</span>
										<br />
									</div>
								</div>
							</div>
						</section>
					</div>
					<div class="col-md-2">
						<section
							class="widget dashboard-top-section top-menu-div"
							style="overflow: auto">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-briefcase"></i>
										자원(Resource) 현황
									</span>
								</h4>
							</header>
							<div class="body">
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
								<div
									class="box"
									style="margin: 10px 0">
									<div
										id="resource"
										style="
											color: #a4c6ff;
											margin-top: 5px;
											font-size: 20px;
											line-height: 20px;
											height: 20px;
											font-weight: 700;
										">
										-
									</div>
									<div class="description">
										<i class="fa fa-users"></i>
										투입 작업자 수
									</div>
								</div>
								<div class="column">
									<div
										class="control-group"
										style="padding-bottom: 10px; border: 0">
										<div
											class="controls form-group darkBack col-md-12"
											style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center">
											<span> 1인당 요구사항 이슈 수 <br/>(최대 / 평균 / 최소) </span>
											<br />
											<span>
												<a id="req_max" style="font-weight: bold"> - </a>
											</span>
											/
											<span>
												<a id="req_avg" style="font-weight: bold"> - </a>
											</span>
											/
											<span>
												<a id="req_min" style="font-weight: bold"> - </a>
											</span>
										</div>
										<div
											class="controls form-group darkBack col-md-12"
											style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center">
											<span> 1인당 생성한 연결이슈 수 <br/>(최대 / 평균 / 최소)</span>
											<br />
											<span>
												<a id="sub_max" style="font-weight: bold"> - </a>
											</span>
											/
											<span>
												<a id="sub_avg" style="font-weight: bold"> - </a>
											</span>
											/
											<span>
												<a id="sub_min" style="font-weight: bold"> - </a>
											</span>
										</div>
<!--										<div
											class="controls form-group darkBack col-md-12"
											style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center">
											<span>
												생성한 연결이슈 평균 :
												<a
													id="avg_linkedIssue_count"
													style="font-weight: bold">
													-
												</a>
												개
											</span>
											<br />
										</div>-->
									</div>
								</div>
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>

	<!-- 두번째 박스   -->
	<div class="col-lg-12 col-layer">
		<section class="widget">
			<header>
				<h4>
					<span
						class="font13"
						style="font-weight: bold">
						<i class="fa fa-sort-amount-asc"></i>
						진행 현황
					</span>
				</h4>
				<div class="widget-controls">
					<a
						data-widgster="toleft"
						title="change width to left"
						href="#">
						<i class="glyphicon glyphicon-chevron-left"></i>
					</a>
					<a
						data-widgster="expand"
						title="Expand"
						href="#">
						<i class="glyphicon glyphicon-chevron-up"></i>
					</a>
					<a
						data-widgster="collapse"
						title="Collapse"
						href="#">
						<i class="glyphicon glyphicon-chevron-down"></i>
					</a>
					<a
						data-widgster="toright"
						title="change width to right"
						href="#">
						<i class="glyphicon glyphicon-chevron-right"></i>
					</a>
					<a
						data-widgster="restore"
						title="Restore"
						href="#">
						<span class="glyphicon glyphicon-repeat"></span>
					</a>
					<a
						data-widgster="fullscreen"
						title="Fullscreen"
						href="#">
						<i
							class="glyphicon glyphicon-fullscreen"
							style="font-size: 11px"></i>
					</a>
				</div>
			</header>
			<div class="body">
				<div
					class="gradient_middle_border"
					style="width: 100%; margin-top: 10px; margin-bottom: 15px"></div>
				<blockquote
					class="font13"
					style="margin-top: 5px">
					선택한 버전의 가장 빠른 시작일과 가장 늦은 종료일 확인 및 경과 시간, 전체 버전의 타임라인을 확인할 수
					있습니다.
				</blockquote>
				<div
					class="row"
					style="min-height: 280px">
					<div class="col-lg-4 color-legend-widget">
						<section
							class="widget"
							style="/*margin-bottom: 2px; */ min-height: 317.5px">
							<header>
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-clock-o"></i>
										진행 기한
									</span>
								</h4>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px; margin-bottom: 10px"></div>
							</header>
							<div
								class="body"
								id="project-progress-wrapper">
								<div style="display: flex; flex-direction: row; height: 42%; justify-content: space-between">
									<div
										id="project-start"
										class="box col-sm-6 fade-in-box"
										style="display: none; margin-bottom: 0px; margin-right: 10px">
										<span>시작일로부터</span>
										<br />
										<span
											class="project-date"
											id="fastestStartDate"></span>
										<div
											class="day-progress"
											id="startDDay"></div>
									</div>
									<div
										id="project-end"
										class="box col-sm-6 fade-in-box"
										style="display: none; margin-bottom: 0px; padding-bottom: 30px">
										<span>종료일까지</span>
										<br />
										<span
											class="project-date"
											id="latestEndDate"></span>
										<div
											class="day-progress"
											id="endDDay"></div>
									</div>
								</div>
								<div style="display: flex; flex-direction: row; height: 42%; justify-content: space-between">
									<div
										class="col-sm-12 fade-in-box"
										id="versionGaugeChart"
										style="height: 185px"></div>
								</div>
							</div>
						</section>
					</div>
					<div class="col-lg-8 color-legend-widget">
						<section
							class="widget"
							style="min-height: 317.5px">
							<header>
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-tasks"></i>
										버전 타임라인
									</span>
								</h4>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
							</header>
							<div
								class="body"
								id="version-timeline-wrapper">
								<div
									id="version-timeline-bar"
									style="display: none"></div>
							</div>
							<!--                            <div class="body" id="version-timeline-chart-container" style="min-height: 280px;"></div>-->
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>

	<!-- 네번째 박스   -->
	<div class="col-lg-12 col-layer">
		<section class="widget">
			<header>
				<h4>
					<span
						class="font13"
						style="font-weight: bold">
						<i class="fa fa-calendar-o"></i>
						업데이트 현황
					</span>
				</h4>
				<div class="widget-controls">
					<a
						data-widgster="toleft"
						title="change width to left"
						href="#">
						<i class="glyphicon glyphicon-chevron-left"></i>
					</a>
					<a
						data-widgster="expand"
						title="Expand"
						href="#">
						<i class="glyphicon glyphicon-chevron-up"></i>
					</a>
					<a
						data-widgster="collapse"
						title="Collapse"
						href="#">
						<i class="glyphicon glyphicon-chevron-down"></i>
					</a>
					<a
						data-widgster="toright"
						title="change width to right"
						href="#">
						<i class="glyphicon glyphicon-chevron-right"></i>
					</a>
					<a
						data-widgster="restore"
						title="Restore"
						href="#">
						<span class="glyphicon glyphicon-repeat"></span>
					</a>
					<a
						data-widgster="fullscreen"
						title="Fullscreen"
						href="#">
						<i
							class="glyphicon glyphicon-fullscreen"
							style="font-size: 11px"></i>
					</a>
				</div>
			</header>
			<div class="body">
				<div
					class="gradient_middle_border"
					style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div>
				<blockquote
					class="font13"
					style="margin-top: 5px">
					선택한 제품(서비스)와 버전에 일자별 업데이트된 요구사항과 연결된 이슈 분포 및 업데이트 누적 현황을 확인할 수
					있습니다.
				</blockquote>
				<div class="row">
					<div
						class="col-lg-6"
						style="/*padding-right: 4px !important;*/">
						<section
							class="widget large"
							style="min-height: 460px">
							<header>
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-pie-chart"></i>
										일자별 업데이트 분포
									</span>
								</h4>
								<div class="widget-controls"></div>
							</header>
							<div
								class="gradient_middle_border"
								style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div>
							<div
								class="body"
								style="height: 100%">
								<div class="row">
									<!--                                    <div class="col-md-6"></div>-->
									<div class="col-md-12">
										<label
											for="scatter_start_date"
											class="control-label"
											style="text-align: left; width: 40px !important">
											기간 :
										</label>
										<div
											class="controls form-group input-group"
											style="">
											<span class="input-group-addon">
												<i class="glyphicon glyphicon-calendar"></i>
											</span>
											<input
												type="text"
												id="scatter_start_date"
												name="scatter_start_date"
												class="form-control parsley-validated font13 darkBack"
												style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
												placeholder="yyyy-mm-dd"
												required="required"
												readonly />
											<span
												class="input-group-addon"
												style="padding: 0px; background-color: rgba(255, 255, 255, 0)">
												&nbsp;~&nbsp;
											</span>
											<input
												type="text"
												id="scatter_end_date"
												name="scatter_end_date"
												class="form-control parsley-validated font13 darkBack"
												style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
												placeholder="yyyy-mm-dd"
												required="required"
												readonly />
											<span
												id="scatter-search"
												class="input-group-addon"
												style="cursor: pointer; background-color: white; color: black">
												<i class="fa fa-search"></i>
											</span>
										</div>
									</div>
								</div>
								<div id="scatter-chart-container"></div>
							</div>
						</section>
					</div>
					<div class="col-lg-6">
						<section class="widget">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										일자별 누적 업데이트 현황
									</span>
								</h4>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
							</header>
							<div
								class="body"
								id="heatmap-body"
								style="height: 415px">
								<div style="width: 100%">
									<blockquote
										class="font12 update-title"
										style="display: none">
										요구사항 누적 업데이트 현황
									</blockquote>
									<div>
										<div id="calendar_yearview_blocks_chart_1"></div>
									</div>
									<blockquote
										class="font12 update-title"
										style="display: none">
										연결된 이슈 누적 업데이트 현황
									</blockquote>
									<div>
										<div id="calendar_yearview_blocks_chart_2"></div>
									</div>
								</div>
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>

	<div class="col-lg-12 col-layer">
		<section class="widget">
			<header>
				<h4>
					<span
						class="font13"
						style="font-weight: bold">
						<i class="fa fa-calendar-o"></i>
						요구사항 및 연결된 이슈 현황
					</span>
				</h4>
				<div class="widget-controls">
					<a
						data-widgster="toleft"
						title="change width to left"
						href="#">
						<i class="glyphicon glyphicon-chevron-left"></i>
					</a>
					<a
						data-widgster="expand"
						title="Expand"
						href="#">
						<i class="glyphicon glyphicon-chevron-up"></i>
					</a>
					<a
						data-widgster="collapse"
						title="Collapse"
						href="#">
						<i class="glyphicon glyphicon-chevron-down"></i>
					</a>
					<a
						data-widgster="toright"
						title="change width to right"
						href="#">
						<i class="glyphicon glyphicon-chevron-right"></i>
					</a>
					<a
						data-widgster="restore"
						title="Restore"
						href="#">
						<span class="glyphicon glyphicon-repeat"></span>
					</a>
					<a
						data-widgster="fullscreen"
						title="Fullscreen"
						href="#">
						<i
							class="glyphicon glyphicon-fullscreen"
							style="font-size: 11px"></i>
					</a>
				</div>
			</header>
			<div class="body">
				<div
					class="gradient_middle_border"
					style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div>
				<blockquote
					class="font13"
					style="margin-top: 5px">
					선택한 제품(서비스), 버전, 기간(최대 30일)의 요구사항 및 연결된 이슈의 일자별 생성 개수 및 업데이트 현황을 확인할 수 있습니다.
				</blockquote>
				<div class="row">
					<div class="col-lg-12 color-legend-widget">
						<section
							class="widget large"
							style="min-height: 540px">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										생성 개수 및 업데이트 상태 현황
									</span>
								</h4>
								<div class="widget-controls"></div>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
							</header>
							<div
								class="body"
								style="height: 100%">
								<div class="row">
									<div class="col-md-6"></div>
									<div class="col-md-6">
										<label
											for="multi_stack_start_date"
											class="control-label"
											style="text-align: left; width: 40px !important">
											기간 :
										</label>
										<div
											class="controls form-group input-group"
											style="">
											<span class="input-group-addon">
												<i class="glyphicon glyphicon-calendar"></i>
											</span>
											<input
												type="text"
												id="multi_stack_start_date"
												name="multi_stack_start_date"
												class="form-control parsley-validated font13 darkBack"
												style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
												placeholder="yyyy-mm-dd"
												required="required"
												readonly />
											<span
												class="input-group-addon"
												style="padding: 0px; background-color: rgba(255, 255, 255, 0)">
												&nbsp;~&nbsp;
											</span>
											<input
												type="text"
												id="multi_stack_end_date"
												name="multi_stack_end_date"
												class="form-control parsley-validated font13 darkBack"
												style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
												placeholder="yyyy-mm-dd"
												required="required"
												readonly />
											<span
												id="multi-stack-search"
												class="input-group-addon"
												style="cursor: pointer; background-color: white; color: black">
												<i class="fa fa-search"></i>
											</span>
										</div>
									</div>
								</div>
								<div id="multi-chart-container"></div>
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>

	<!-- 주식 차트 부분 주석
    <div class="col-lg-12 col-layer">
        <section class="widget">
            <header>
                <h4>
                    <span class="font13"
                            style="font-weight: bold">
                        <i class="fa fa-calendar-o"></i>
                        요구사항 및 연결된 이슈
                    </span>
                </h4>
                <div class="widget-controls">
                    <a  data-widgster="toleft"
                        title="change width to left"
                        href="#">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </a>
                    <a  data-widgster="expand"
                        title="Expand"
                        href="#">
                        <i class="glyphicon glyphicon-chevron-up"></i>
                    </a>
                    <a  data-widgster="collapse"
                        title="Collapse"
                        href="#">
                        <i class="glyphicon glyphicon-chevron-down"></i>
                    </a>
                    <a  data-widgster="toright"
                        title="change width to right"
                        href="#">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </a>
                    <a  data-widgster="restore"
                        title="Restore"
                        href="#">
                        <span class="glyphicon glyphicon-repeat"></span>
                    </a>
                    <a  data-widgster="fullscreen"
                        title="Fullscreen"
                        href="#">
                        <i class="glyphicon glyphicon-fullscreen"
                           style="font-size: 11px">
                        </i>
                    </a>
                </div>
            </header>
            <div class="body">
                <div class="gradient_middle_border" style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div>
                <div class="row">
                    <div class="col-lg-6 color-legend-widget">
                        <section class="widget large">
                            <header style="margin-bottom: 15px">
                                <h4>
									<span class="font13" style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										요구사항 현황 차트
									</span>
                                </h4>
                                <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div>
                            </header>
                            <div class="body" id="candlestick-chart-container" > </div>
                        </section>
                    </div>
                    <div class="col-lg-6 color-legend-widget">
&lt;!&ndash;                        <section class="widget large">
                            <header>
                                <h4 style="
                                        display: flex;
                                        justify-content: space-between;
                                    ">
                                    <div>
                                        <i class="fa fa-bar-chart"></i> 일자별 이슈 상태
                                    </div>
                                    <button id="status-chart-button" type="button" class="btn btn-default btn-sm ml-1">그룹화 적용</button>
                                </h4>
                            </header>
                            <div id="status-chart-container">
                                <div class="body" id="status-chart"></div>
                            </div>
                        </section>&ndash;&gt;
                    </div>
                </div>
            </div>
        </section>
    </div>
-->

	<!-- Vertical 타임라인 박스 -->
	<div class="col-lg-12 col-layer">
		<section class="widget">
			<header>
				<h4>
					<span
						class="font13"
						style="font-weight: bold">
						<i class="fa fa-calendar-o"></i>
						요구사항 및 연결된 이슈 타임라인
					</span>
				</h4>
				<div class="widget-controls">
					<a
						data-widgster="toleft"
						title="change width to left"
						href="#">
						<i class="glyphicon glyphicon-chevron-left"></i>
					</a>
					<a
						data-widgster="expand"
						title="Expand"
						href="#">
						<i class="glyphicon glyphicon-chevron-up"></i>
					</a>
					<a
						data-widgster="collapse"
						title="Collapse"
						href="#">
						<i class="glyphicon glyphicon-chevron-down"></i>
					</a>
					<a
						data-widgster="toright"
						title="change width to right"
						href="#">
						<i class="glyphicon glyphicon-chevron-right"></i>
					</a>
					<a
						data-widgster="restore"
						title="Restore"
						href="#">
						<span class="glyphicon glyphicon-repeat"></span>
					</a>
					<a
						data-widgster="fullscreen"
						title="Fullscreen"
						href="#">
						<i
							class="glyphicon glyphicon-fullscreen"
							style="font-size: 11px"></i>
					</a>
				</div>
			</header>
			<div class="body">
				<div
					class="gradient_middle_border"
					style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div>
				<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap">
					<blockquote
						class="font13"
						style="margin-top: 5px">
						선택한 제품(서비스), 버전, 기간(최대 30일)의 업데이트된 요구사항과 그에 연결된 이슈의 업데이트 현황을 확인할 수 있습니다.
					</blockquote>
					<div class="timeline-period col-md-4">
						<label
							for="multi_stack_start_date"
							class="control-label"
							style="text-align: left; width: 40px !important">
							기간 :
						</label>
						<div
							class="controls input-group"
							style="">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-calendar"></i>
							</span>
							<input
								type="text"
								id="timeline_start_date"
								name="timeline_start_date"
								class="form-control parsley-validated font13 darkBack"
								style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
								placeholder="yyyy-mm-dd"
								required="required"
								readonly />
							<span
								class="input-group-addon"
								style="padding: 0px; background-color: rgba(255, 255, 255, 0)">
								&nbsp;~&nbsp;
							</span>
							<input
								type="text"
								id="timeline_end_date"
								name="timeline_end_date"
								class="form-control parsley-validated font13 darkBack"
								style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
								placeholder="yyyy-mm-dd"
								required="required"
								readonly />
							<span
								id="timeline-search"
								class="input-group-addon"
								style="cursor: pointer; background-color: white; color: black">
								<i class="fa fa-search"></i>
							</span>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-4 color-legend-widget">
						<section
							class="widget"
							style="/*margin-bottom: 0px!important;*/">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										Vertical Timeline Chart
									</span>
								</h4>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px"></div>
							</header>
							<div class="body" id="vertical-timeline"
                                 style="min-height:732px;">
								<div class="timeline-container"></div>
							</div>
						</section>
					</div>
					<div class="col-lg-8 color-legend-widget">
						<section
							class="widget"
							style="/*margin-bottom: 0px!important;*/">
							<header style="margin-bottom: 15px">
								<h4>
									<span
										class="font13"
										style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										요구사항 업데이트 현황
									</span>
								</h4>
								<div
									class="gradient_middle_border"
									style="width: 100%; margin-top: 8px;"></div>
							</header>
							<div
								class="body"
								id="sevenTimeLineBody"
								style="overflow: hidden; min-height:732px;">

								<div id="overlapInputDiv" style="display: none; align-items: center; justify-content: space-between;">
									<!--<form style="margin-right: 10px;">
										<input type="radio" id="reqRadio" name="option" value="reqRadio">
										<label for="reqRadio"><span>요구사항 업데이트 현황</span></label><br>
										<input type="radio" id="issueRadio" name="option" value="issueRadio" checked>
										<label for="issueRadio"><span>요구사항 기준 연결된 이슈 업데이트 현황</span></label>
									</form>-->

									<div style="display: flex; align-items: center;">
										<span style="margin-right: 10px;">높이 조절</span>
										<input type="number" id="overlapNumberInput" name="overlapNumberInput" min="1" max="10" step="0.1" style="height: 20px; background: #323232; margin-right: 10px;">
										<input type="range" min="0" max="9" step="0.1" id="overlapInput" value="2" style="width: 150px; background: #323232;">
									</div>
								</div>
								<div id="updateRidgeLine" class="col-lg-12" style="text-align:center; overflow-x: auto;  min-height:700px;">
								</div>
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>

<style>
	#today_flag {
		position: relative;
	}

	#today_flag::before {
		content: "";
		position: absolute;
		left: 0;
		border-left: 3px dashed #db2a34;
		height: 100%;
	}

	.today_flag_text {
		position: absolute;
		top: -25px;
		left: -11px;
		font-size: 11.5px;
		font-weight: 600;
	}

	.graph {
		height: 202.5px !important;
	}

	.timelines-chart .reset-zoom-btn {
		fill: white;
	}

	.timelines-chart .axises .y-axis text,
	.timelines-chart .axises .grp-axis text {
		fill: white;
	}

	.timelines-chart .axises .y-axis text,
	.timelines-chart .axises .grp-axis text {
		fill: white;
	}

	.timeline:before {
		left: 0px !important;
		background: none;
	}
	.time_element {
		overflow-x: scroll;
		white-space: nowrap;
	}

	@media (min-width: 0px) {
		.col-sm-6 {
			width: 50% !important;
		}

		.col-sm-12 {
			width: 100%;
		}
	}

	.infographic.basic .timeline .month {
		color: white;
	}

	#versionGaugeChart svg {
		height: 185px;
	}

	#scatter-chart-container {
		position: relative;
		width: 100%;
		height: 90%;
		overflow: visible;
	}

	#multi-chart-container {
		position: relative;
		width: 100%;
		height: 90%;
		overflow: visible;
	}

	#version-timeline-chart-container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	#candlestick-chart-container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: visible;
	}
</style>