<div class="col-lg-4">
	<section class="widget">
		<header>
			<h4>
				<span
					class="font13"
					style="font-weight: bold">
					<i class="fa fa-sort-amount-asc"></i>
					요구사항 조회
				</span>
			</h4>
			<div class="actions">
				<button
					class="btn btn-transparent btn-xs"
					onclick="$('#demo').jstree('open_all');">
					Show All
					<i class="fa fa-arrow-down"></i>
				</button>
			</div>
		</header>
		<div class="body">
			<blockquote class="font13">1. 제품(서비스) : 버전 : 요구사항 선택</blockquote>
			<div class="wrapper">
				<div
					class="control-group"
					style="padding-bottom: 10px; border: 0">
					<div
						class="controls form-group darkBack"
						style="margin-bottom: 15px !important">
						<select
							id="country"
							required="required"
							data-placeholder="Select Product(Service)"
							class="select-block-level chzn-select darkBack"
							tabindex="-1"
							style="width: 100% !important"
							name="country">
							<option value=""></option>
						</select>
					</div>
					<div
						class="controls form-group darkBack"
						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
					class="gradient_bottom_border"
					style="width: 100%; height: 2px"></div>
				<div
					id="mmenu"
					style="padding-bottom: 5px; padding-top: 15px">
					<form
						class="form-search no-margin"
						role="form">
						<div class="input-group">
							<input
								type="search"
								id="text"
								class="form-control searchDarkBack"
								style="color: #f8f8f8"
								placeholder="찾을 노드 이름 입력"
								data-tooltip="Press Enter To Node To Search" />
							<span class="input-group-btn">
								<button
									type="button"
									id="search"
									title="Search"
									class="btn btn-default btn-sm">
									Search
								</button>
							</span>
						</div>
					</form>
				</div>
				<div
					id="product_tree"
					style="padding-top: 5px; overflow: hidden"
					class="darkBack"></div>
				<div
					style="margin-top: 10px"
					class="darkBack">
					설명
				</div>
			</div>
		</div>
	</section>
</div>

<div class="col-lg-8">
	<section class="widget">
		<header>
			<h4>
				<span
					class="font13"
					style="font-weight: bold">
					<i class="fa fa-edit"></i>
					요구사항 내용
				</span>
			</h4>
			<div class="widget-controls">
				<a
					title="Options"
					href="#">
					<i class="glyphicon glyphicon-cog"></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="close"
					title="Close"
					href="#">
					<i class="glyphicon glyphicon-remove"></i>
				</a>
			</div>
		</header>
		<div class="body">
			<blockquote class="font13">2. 요구사항 세부 내용 조회</blockquote>
			<div class="row">
				<div class="col-md-12">
					<section class="widget widget-tabs">
						<header>
							<ul class="nav nav-tabs">
								<li class="active">
									<a
										href="#stats"
										data-toggle="tab"
										id="default_tab">
										<strong>상세 보기</strong>
									</a>
								</li>
								<li>
									<a
										href="#edit"
										data-toggle="tab"
										id="edit_tab">
										<strong>편집 하기</strong>
									</a>
								</li>
								<li>
									<a
										href="#report"
										data-toggle="tab"
										id="folder_tab">
										<strong>리스트로 보기</strong>
									</a>
								</li>
								<li>
									<a
										href="#doc"
										data-toggle="tab"
										id="docu_tab">
										<strong>문서로 보기</strong>
									</a>
								</li>
								<li>
									<a
										href="#jira"
										data-toggle="tab"
										id="jira_tab">
										<strong>JIRA 연결 설정</strong>
									</a>
								</li>
								<li>
									<a
										href="#history"
										data-toggle="tab"
										id="history_tab">
										<strong>History(이력)</strong>
									</a>
								</li>
							</ul>
						</header>
						<div class="body tab-content">
							<div
								id="stats"
								class="tab-pane active clearfix"
								style="padding-top: 10px !important">
								<div
									style="margin-top: 10px; margin-bottom: 10px; border: 1px solid #0b67ff !important"
									class="newReqDiv darkBack">
									<label
										id="new_reqregist01"
										class="btn btn-primary btn-transparent btn-sm active"
										data-target="#my_modal1"
										data-toggle="modal"
										style="width: 100%; background-color: #2477ff !important">
										a-RMS의 신규 요구사항 등록하기
									</label>
								</div>
								<form
									class="form-horizontal"
									method="post">
									<fieldset>
										<div
											class="control-group"
											for="detailview_req_pdservice_name">
											<label class="control-label font13">
												요구사항 제품
												<sup>서비스</sup>
												:
											</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_pdservice_name"
													name="detailview_req_pdservice_name"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_pdservice_version">
											<label class="control-label font13">요구사항 연관 버전 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_pdservice_version"
													name="detailview_req_pdservice_version"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_id">
											<label class="control-label font13">요구사항 아이디 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_id"
													name="detailview_req_id"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_name">
											<label class="control-label font13">요구사항 제목 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_name"
													name="detailview_req_name"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_priority">
											<label class="control-label font13">요구사항 우선순위 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<div style="display: flex; align-items: center; gap: 10px; padding: 0">
													<div
														id="detailview_req_priority"
														class="btn-group"
														data-toggle="buttons">
														<label class="btn btn-warning">
															<input
																type="radio"
																name="options"
																id="detailview_req_priority_option1" />
															낮음
														</label>
														<label class="btn btn-warning">
															<input
																type="radio"
																name="options"
																id="detailview_req_priority_option2" />
															중간
														</label>
														<label class="btn btn-warning">
															<input
																type="radio"
																name="options"
																id="detailview_req_priority_option3" />
															높음
														</label>
													</div>
												</div>
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_status">
											<label class="control-label font13">요구사항 상태 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_status"
													name="detailview_req_status"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_writer">
											<label class="control-label font13">요구사항 작성자 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_writer"
													name="detailview_req_writer"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div
											class="control-group"
											for="detailview_req_write_date">
											<label class="control-label font13">요구사항 최근 작성일 :</label>
											<div
												class="controls form-group input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_write_date"
													name="detailview_req_write_date"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
													required="required"
													style="color: #a4c6ff"
													placeholder="service name" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label font13">제품(서비스) 리뷰어 :</label>
											<div
												class="controls input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_reviewer01"
													name="detailview_req_reviewer01"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="공동 책임자"
													required="required"
													placeholder="service name"
													disabled="disabled"
													style="border: 0px !important; color: #a4c6ff !important" />
												<span class="input-group-addon font11">INFO : 공동 책임자</span>
											</div>
											<div
												class="controls input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_reviewer02"
													name="detailview_req_reviewer02"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="공동 책임자"
													required="required"
													placeholder="service name"
													disabled="disabled"
													style="border: 0px !important; color: #a4c6ff !important" />
												<span class="input-group-addon font11">INFO : 공동 책임자</span>
											</div>
											<div
												class="controls input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_reviewer03"
													name="detailview_req_reviewer03"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="공동 책임자"
													required="required"
													placeholder="service name"
													disabled="disabled"
													style="border: 0px !important; color: #a4c6ff !important" />
												<span class="input-group-addon font11">INFO : 공동 책임자</span>
											</div>
											<div
												class="controls input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_reviewer04"
													name="detailview_req_reviewer04"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="공동 책임자"
													required="required"
													placeholder="service name"
													disabled="disabled"
													style="border: 0px !important; color: #a4c6ff !important" />
												<span class="input-group-addon font11">INFO : 공동 책임자</span>
											</div>
											<div
												class="controls input-group"
												style="margin-left: 180px">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													type="text"
													id="detailview_req_reviewer05"
													name="detailview_req_reviewer05"
													class="form-control parsley-validated font13 darkBack"
													data-placement="top"
													data-original-title="공동 책임자"
													required="required"
													placeholder="service name"
													disabled="disabled"
													style="border: 0px !important; color: #a4c6ff !important" />
												<span class="input-group-addon font11">INFO : 공동 책임자</span>
											</div>
										</div>
										<div class="control-group">
											<label
												class="control-label"
												style="margin-top: 10px">
												요구사항 내용 :
											</label>
											<div
												class="col-sm-8"
												style="margin-top: 10px; margin-bottom: 10px">
												문서로 보기 :
												<button
													type="button"
													class="btn btn-warning">
													새 창으로 제품(서비스) 내용 보기
												</button>
											</div>
											<br />
											<br />
											<br />
											<div
												class="col-sm-12 darkBack"
												id="detailview_req_contents"
												style="padding-top: 7px"></div>
										</div>
									</fieldset>
								</form>
							</div>

							<div
								id="edit"
								class="tab-pane"
								style="padding-top: 10px !important">
								<div
									class="form-group"
									style="padding-top: 10px">
									<div class="control-group">
										<label
											class="control-label"
											style="vertical-align: center">
											요구사항 등록 모드 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div
												class="input-group"
												style="text-align: left">
												<span class="input-group-addon">
													<i class="fa fa-sliders"></i>
												</span>
												<div
													class="btn-group"
													data-toggle="buttons">
													<label
														class="btn btn-transparent btn-sm active"
														style="color: #f8f8f8 !important">
														<input type="radio" />
														요구사항 변경 모드
													</label>
												</div>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_pdservice_name">
											요구사항 제품(서비스) :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													id="editview_req_pdservice_name"
													disabled="disabled"
													class="form-control font13 darkBack"
													style="color: #a4c6ff"
													size="16"
													type="text"
													placeholder="제품(서비스)명을 입력해 주세요" />
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="edit_multi_version">
											요구사항 연관 버전 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<select
													multiple="multiple"
													id="edit_multi_version"
													class="multiple-select btn-block darkBack"
													placeholder="Select Version"
													style="color: #a4c6ff"></select>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_id">
											요구사항 아이디 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													id="editview_req_id"
													disabled="disabled"
													class="form-control font13 darkBack"
													style="color: #a4c6ff"
													size="16"
													type="text"
													placeholder="제품(서비스)명을 입력해 주세요" />
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_name">
											요구사항 제목 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													id="editview_req_name"
													class="form-control font13 darkBack"
													style="color: #a4c6ff"
													size="16"
													type="text"
													placeholder="제품(서비스)명을 입력해 주세요" />
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_priority">
											요구사항 우선순위 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<div
													id="editview_req_priority"
													class="btn-group"
													data-toggle="buttons">
													<label class="btn btn-warning">
														<input
															type="radio"
															name="options"
															id="editview_req_priority_option1" />
														낮음
													</label>
													<label class="btn btn-warning">
														<input
															type="radio"
															name="options"
															id="editview_req_priority_option2" />
														중간
													</label>
													<label class="btn btn-warning">
														<input
															type="radio"
															name="options"
															id="editview_req_priority_option3" />
														높음
													</label>
												</div>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_status">
											요구사항 상태 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													id="editview_req_status"
													disabled="disabled"
													class="form-control font13 darkBack"
													style="color: #a4c6ff"
													size="16"
													type="text"
													placeholder="제품(서비스)명을 입력해 주세요" />
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_writer">
											요구사항 작성자 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													id="editview_req_writer"
													disabled="disabled"
													class="form-control font13 darkBack"
													style="color: #a4c6ff"
													size="16"
													type="text"
													placeholder="제품(서비스)명을 입력해 주세요" />
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_write_date">
											요구사항 최근 작성일 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<input
													id="editview_req_write_date"
													disabled="disabled"
													class="form-control font13 darkBack"
													style="color: #a4c6ff"
													size="16"
													type="text"
													placeholder="제품(서비스)명을 입력해 주세요" />
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="editview_req_reviewers">
											요구사항 리뷰어 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
												<select
													id="editview_req_reviewers"
													class="js-data-example-ajax form-control font13 darkBack"
													name="selectedReviewers[]"
													multiple="multiple"
													style="width: 100%; color: #a4c6ff"></select>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label
											class="control-label"
											for="edit_tabmodal_editor">
											요구사항 내용 :
										</label>
										<div
											class="controls form-group"
											style="margin-bottom: 10px">
											<div
												class="input-group"
												style="padding-top: 5px">
												<code>
													<i class="fa fa-long-arrow-right"></i>
													입력창이 좁다면 하단의 팝업으로 편집하기를 활용하세요
													<i class="fa fa-long-arrow-left"></i>
												</code>
											</div>
										</div>
										<div class="controls form-group">
											<div class="col-sm-12">
												<div
													id="edit_tabmodal_editor"
													class="darkBack">
													<p>요구사항 내용을 기록합니다.</p>
												</div>
											</div>
										</div>
									</div>
									<div
										class="form-actions"
										style="float: right; margin-top: 0px !important">
										<div>
											<button
												class="btn btn-warning"
												data-target="#editModal"
												data-toggle="modal"
												id="edit_modal_btn"
												type="button">
												팝업 창으로 편집 하기
											</button>
											<button
												type="button"
												id="edit_tab_req_update"
												class="btn btn-success">
												제품(서비스) 변경 사항 저장
											</button>
										</div>
									</div>
								</div>
							</div>
							<div
								id="report"
								class="tab-pane"
								style="padding-top: 10px !important">
								<div
									style="margin-top: 10px; margin-bottom: 10px; border: 1px solid #0b67ff !important"
									class="newReqDiv darkBack">
									<label
										id="new_req_regist02"
										class="btn btn-primary btn-transparent btn-sm active"
										data-target="#my_modal1"
										data-toggle="modal"
										style="width: 100%; background-color: #2477ff !important">
										a-RMS의 신규 요구사항 등록하기
									</label>
								</div>
								<table
									class="display"
									id="req_table"
									style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)">
									<thead>
										<tr>
											<th>c_id</th>
											<th>c_left</th>
											<th>c_title</th>
										</tr>
									</thead>
								</table>
							</div>
							<div
								id="doc"
								class="tab-pane"
								style="padding-top: 10px !important">
								<div
									style="margin-top: 10px; margin-bottom: 10px; border: 1px solid #0b67ff !important"
									class="newReqDiv darkBack">
									<label
										id="new_req_regist03"
										class="btn btn-primary btn-transparent btn-sm active"
										data-target="#my_modal1"
										data-toggle="modal"
										style="width: 100%; background-color: #2477ff !important">
										a-RMS의 신규 요구사항 등록하기
									</label>
								</div>
								<div class="col-md-12">
									<div
										class="dd"
										id="nestable1">
										<ol class="dd-list"></ol>
									</div>
								</div>
							</div>
							<div
								id="jira"
								class="tab-pane"
								style="padding-top: 10px !important">
								<div
									style="margin-top: 10px; margin-bottom: 10px"
									class="darkBack">
									<label
										id="req_jiraver_connect_change"
										class="btn btn-success btn-sm"
										style="width: 100%">
										요구사항 - JIRA 연결 정보 변경하기 ( 선택한 요구사항 한정 )
									</label>
								</div>
								<table
									class="display"
									id="jira_ver_table"
									style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)"></table>
							</div>

							<div
								id="history"
								class="tab-pane"
								style="padding-top: 10px !important">
								<!-- The timeline -->
								<ul class="timeline timeline-inverse">
									<!-- timeline time label -->
									<li class="time-label">
										<a class="btn btn-danger btn-sm">
											a-RMS 모든 이력을 시간순으로 표시 :
											<i class="fa fa-check"></i>
										</a>
									</li>
									<!-- /.timeline-label -->
									<!-- timeline item -->
									<li class="timeline-item-head">
										<i class="fa fa-search bg-maroon"></i>
										<div
											class="timeline-item"
											style="line-height: 2 !important">
											<span class="arrow"></span>
											<div
												class="col-sm-5"
												style="padding-top: 12px">
												<div class="input-group">
													<span class="input-group-btn">
														<a
															href="#"
															id="btn_start_calendar_popup"
															class="btn btn-warning"
															data-date-format="yyyy/mm/dd"
															data-date="2022/11/11">
															<i class="fa fa-calendar"></i>
														</a>
													</span>
													<input
														id="input_req_start_date"
														class="form-control"
														type="text"
														name="btn_enabled_date"
														value="검색 시작 날짜"
														pattern="/^\d{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/" />
												</div>
											</div>
											<div
												class="col-sm-5"
												style="padding-top: 12px">
												<div class="input-group">
													<span class="input-group-btn">
														<a
															href="#"
															id="btn_end_calendar_popup"
															class="btn btn-warning"
															data-date-format="yyyy/mm/dd"
															data-date="2022/11/11">
															<i class="fa fa-calendar"></i>
														</a>
													</span>
													<input
														id="input_req_end_date"
														class="form-control"
														type="text"
														name="btn_enabled_date"
														value="검색 종료 날짜"
														pattern="/^\d{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/" />
												</div>
											</div>
											<div
												class="col-sm-2"
												style="padding-top: 12px">
												<button
													type="button"
													class="btn btn-warning"
													id="logsearch">
													Search
												</button>
											</div>
											<h3
												class="timeline-header"
												style="padding: 0px !important; font-size: 11px">
												&nbsp;
											</h3>
										</div>
									</li>
									<!-- END timeline item -->
									<!-- timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-balance-scale bg-maroon"></i>
										<div class="timeline-item">
											<span class="arrow"></span>
											<span class="time">
												<i class="fa fa-clock-o"></i>
												09:00 (MON)
											</span>

											<h3 class="timeline-header">
												<a
													href="http://www.313.co.kr/confluence"
													target="_blank">
													착수
												</a>
												<small class="font11">제품(서비스) 등록, 버전 등록</small>
											</h3>

											<div class="timeline-body col-md-4 font11">
												<a
													href="http://www.313.co.kr/confluence"
													target="_blank"
													class="btn bg-maroon btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Confluence by 313 DEV GRP
												</a>
											</div>
											<div class="timeline-footer col-md-8 font12 fontw600">
												Input : Plan & Opinion & Idea
												<br />
												Skill : Negotiation
												<br />
												Output : Requirements
												<br />
												System : Atlassian Confluence ( Online Document System )
											</div>
										</div>
									</li>
									<!-- END timeline item -->
									<!-- timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-check-square-o bg-yellow"></i>

										<div class="timeline-item">
											<span class="time">
												<i class="fa fa-clock-o"></i>
												10:00 (TUE)
											</span>

											<h3 class="timeline-header">
												<a
													href="http://www.313.co.kr/confluence"
													target="_blank">
													기획
												</a>
												<small class="font11">요구사항 등록</small>
											</h3>

											<div class="timeline-body col-md-4 font11">
												<a
													href="http://www.313.co.kr/confluence"
													target="_blank"
													class="btn bg-yellow btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Confluence by 313 DEV GRP
												</a>
											</div>
											<div class="timeline-footer col-md-8 font12 fontw600">
												Input : Requirements
												<br />
												Skill : Requirements engineering
												<br />
												Output : SRS ( Software Requirements Specification )
												<br />
												System : Atlassian Confluence ( Online Document System )
											</div>
										</div>
									</li>
									<!-- END timeline item -->
									<!-- timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-cubes bg-teal"></i>

										<div class="timeline-item">
											<span class="time">
												<i class="fa fa-clock-o"></i>
												12:00 (WED)
											</span>

											<h3 class="timeline-header">
												<a
													href="http://www.313.co.kr/jira"
													target="_blank">
													실행 및 이행
												</a>
												<small class="font11">JIRA 전파</small>
											</h3>

											<div class="timeline-body col-md-4 font11">
												<a
													href="http://www.313.co.kr/jira"
													target="_blank"
													class="btn bg-teal btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Jira by 313 DEV GRP
												</a>
											</div>
											<div class="timeline-footer col-md-8 font12 fontw600">
												Input : SRS ( Software Requirements Specification )
												<br />
												Skill : Architecture design
												<br />
												Output : SDS ( Software Design Specification )
												<br />
												System : Atlassian Jira ( Issue Management System )
											</div>
										</div>
									</li>
									<!-- END timeline item -->
									<!-- timeline time label -->
									<!-- /.timeline-label -->
									<!-- timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-sitemap bg-light-blue"></i>

										<div class="timeline-item">
											<span class="time">
												<i class="fa fa-clock-o"></i>
												15:00 (THU)
											</span>

											<h3 class="timeline-header">
												<a
													href="https://github.com/jstree"
													target="_blank">
													실행 및 이행
												</a>
												<small class="font11">Developers 개발</small>
											</h3>

											<div class="timeline-body col-md-4 font11">
												<a
													href="https://github.com/jstree"
													target="_blank"
													class="btn bg-light-blue btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													GitHub by 313 DEV GRP
												</a>
												<a
													href="http://www.313.co.kr/fecru"
													target="_blank"
													class="btn bg-light-blue btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Fecru by 313 DEV GRP
												</a>
												<a
													href="http://www.313.co.kr/bamboo"
													target="_blank"
													class="btn bg-light-blue btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Bamboo by 313 DEV GRP
												</a>
											</div>
											<div class="timeline-footer col-md-8 font12 fon">
												Input : SDS ( Software Design Specification )
												<br />
												Skill : Coding
												<br />
												Output : Source Code & Artifacts
												<br />
												System : GitHub ( Software Version Management )
											</div>
										</div>
									</li>
									<!-- END timeline item -->
									<!-- timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-bug bg-purple"></i>

										<div class="timeline-item">
											<span class="time">
												<i class="fa fa-clock-o"></i>
												17:00 (FRI)
											</span>

											<h3 class="timeline-header">
												<a
													href="https://github.com/jstree"
													target="_blank">
													감시 및 통제
												</a>
												<small class="font11">QA 및 체크리스트</small>
											</h3>

											<div class="timeline-body col-md-4 font11">
												<a
													href="http://www.313.co.kr/analysis"
													target="_blank"
													class="btn bg-purple btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Project Analysis by 313 DEV GRP
												</a>
												<a
													href="http://www.313.co.kr/nexus"
													target="_blank"
													class="btn bg-purple btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Nexus by 313 DEV GRP
												</a>
												<a
													href="http://www.313.co.kr/sonar"
													target="_blank"
													class="btn bg-purple btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													Sonar by 313 DEV GRP
												</a>
											</div>
											<div class="timeline-footer col-md-8 font12 fontw600">
												Input : Source Code & Artifacts
												<br />
												Skill : Quality Assurance
												<br />
												Output : TCR ( Test Case Result )
												<br />
												System : SonarQube
											</div>
										</div>
									</li>
									<!-- END timeline item -->
									<!-- timeline time label -->
									<!-- /.timeline-label -->
									<!-- timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-train bg-black"></i>

										<div class="timeline-item">
											<span class="time">
												<i class="fa fa-clock-o"></i>
												18:00 (SAT)
											</span>

											<h3 class="timeline-header">
												<a
													href="https://github.com/jstree"
													target="_blank">
													종료
												</a>
												<small class="font11">보고</small>
											</h3>

											<div class="timeline-body col-md-4 font11">
												<a
													href="https://hub.docker.com/u/313devgrp/"
													target="_blank"
													class="btn bg-black btn-xs"
													style="font-size: 11px">
													<i class="fa fa-share"></i>
													DockerHub by 313 DEV GRP
												</a>
											</div>
											<div class="timeline-footer col-md-8 font12 fontw600">
												Input : TCR ( Test Case Result )
												<br />
												Skill : Lessons learned and retrospective
												<br />
												Output : Container
												<br />
												System : Docker ( Cloud Operating system )
											</div>
										</div>
									</li>
									<!-- END timeline item -->
									<li class="timeline-item-body">
										<i class="fa fa-clock-o bg-gray"></i>
									</li>
								</ul>
							</div>
							<div class="body-middle">
								<form
									id="fileupload"
									action="uploadFileToNode.do"
									method="POST"
									enctype="multipart/form-data">
									<input
										type="hidden"
										id="fileIdlink"
										value="" />
									<div class="row">
										<div class="col-md-12">
											<div
												id="dropzone"
												class="dropzone">
												<i class="fa fa-cloud-upload"></i>
												Drop files here
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-12 fileupload-progress fade font12">
											<!-- The global progress bar -->
											<div
												class="progress progress-success progress-striped active font12"
												role="progressbar"
												aria-valuemin="0"
												aria-valuemax="100">
												<div
													class="bar"
													style="width: 0%"></div>
											</div>
											<!-- The extended global progress information -->
											<div class="progress-extended font12">&nbsp;</div>
										</div>
									</div>
									<div class="form-actions fileupload-buttonbar no-margin">
										<span class="btn btn-sm btn-inverse fileinput-button">
											<i class="fa fa-plus"></i>
											<span>Add files...</span>
											<input
												type="file"
												name="files[]"
												multiple="" />
										</span>
										<button
											type="submit"
											class="btn btn-inverse btn-sm start">
											<i class="fa fa-upload"></i>
											<span>Start upload</span>
										</button>
										<button
											type="reset"
											class="btn btn-inverse btn-sm cancel">
											<i class="fa fa-ban"></i>
											<span>Cancel upload</span>
										</button>
									</div>
									<div class="fileupload-loading">
										<i class="fa fa-spin fa-spinner"></i>
									</div>
									<!-- The table listing the files available for upload/download -->
									<table
										role="presentation"
										class="table table-striped"
										style="margin-bottom: 5px">
										<tbody
											class="files"
											data-toggle="modal-gallery"
											data-target="#modal-gallery"></tbody>
									</table>
								</form>
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>
	</section>
</div>

<div
	id="my_modal1"
	class="modal fade"
	role="dialog"
	aria-labelledby="myModalLabel"
	aria-hidden="true"
	style="display: none">
	<div
		class="modal-dialog"
		style="width: 90%; height: 70%">
		<div class="modal-content modalDarkBack">
			<div
				class="modal-header"
				style="padding: 0px; border-bottom: 0px">
				<button
					type="button"
					class="close"
					data-dismiss="modal"
					aria-hidden="true"
					style="color: #ffffff; font-size: 20px; opacity: 0.8; padding: 5px">
					×
				</button>
				<h4
					class="modal-title font14"
					id="my_modal_label1"
					style="color: #f8f8f8; text-align: left; padding: 5px">
					<span
						class="font13"
						style="font-weight: bold">
						<i class="fa fa-edit"></i>
						신규 요구사항 등록 팝업
					</span>
					<section
						class="search-result"
						style="border-left: 5px solid #e5603b">
						<p style="font-size: 13px; margin: 5px 0px 0px 0px; padding-left: 5px">
							a-RMS에 신규 요구사항을 등록합니다.
						</p>
					</section>
				</h4>
			</div>
			<div
				class="modal-body"
				style="padding: 5px">
				<form
					class="form-horizontal"
					method="post">
					<fieldset>
						<br />
						<div class="control-group col-sm-12">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								for="title"
								class="control-label"
								style="color: #f8f8f8">
								요구사항 등록 모드
								<span class="required">*</span>
								<span
									class="input-group-addon"
									style="display: inline !important">
									<i class="glyphicon glyphicon-gift"></i>
								</span>
							</label>
							<div class="controls form-group col-sm-8">
								<div
									class="btn-group"
									data-toggle="buttons">
									<label
										class="btn btn-transparent btn-sm active"
										data-toggle-class="btn-primary"
										data-toggle-passive-class="btn-default">
										<input
											type="radio"
											name="reqType"
											value="default" />
										일반 요구사항 등록 모드
									</label>
									<label
										class="btn btn-transparent btn-sm"
										data-toggle-class="btn-primary"
										data-toggle-passive-class="btn-default">
										<input
											type="radio"
											name="reqType"
											value="folder" />
										폴더 형식으로 등록
									</label>
								</div>
							</div>
						</div>
						<br />
						<div class="control-group col-sm-12">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								for="title"
								class="control-label"
								style="color: #f8f8f8">
								반영 제품(서비스)
								<span class="required">*</span>
								<span
									class="input-group-addon"
									style="display: inline !important">
									<i class="glyphicon glyphicon-gift"></i>
								</span>
							</label>
							<div class="controls form-group col-sm-8">
								<input
									type="text"
									id="disabled_input_pdservice"
									class="form-control"
									disabled="disabled"
									value="" />
							</div>
						</div>
						<div
							class="control-group col-sm-12"
							id="popup_version_div">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								for="title"
								class="control-label"
								style="color: #f8f8f8">
								반영 버전
								<span class="required">*</span>
								<span
									class="input-group-addon"
									style="display: inline !important">
									<i class="glyphicon glyphicon-gift"></i>
								</span>
							</label>
							<div class="controls form-group col-sm-8">
								<select
									multiple="multiple"
									id="popup_version"
									class="multiple-select btn-block darkBack"
									placeholder="&nbsp;&nbsp;Select Version"></select>
							</div>
						</div>
						<div
							class="control-group col-sm-12"
							id="popup_reviewer_div">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								class="control-label"
								for="editview_req_reviewers"
								style="color: #f8f8f8">
								반영 리뷰어 &nbsp;
								<span class="required">*</span>
							</label>
							<div
								class="controls form-group"
								style="margin-bottom: 10px">
								<div class="input-group">
									<span class="input-group-addon"><i class="glyphicon glyphicon-gift"></i></span>
									<select
										id="popup_pdservice_reviewers"
										class="js-data-example-ajax form-control font13 darkBack"
										name="selectedReviewers[]"
										multiple="multiple"
										style="width: 100%"></select>
								</div>
							</div>
						</div>
						<div
							class="control-group col-sm-12"
							id="popup_priority_div">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								class="control-label"
								style="color: #f8f8f8">
								요구사항 우선순위
								<span class="required">*</span>
								<span
									class="input-group-addon"
									style="display: inline !important">
									<i class="glyphicon glyphicon-gift"></i>
								</span>
							</label>
							<div class="controls form-group col-sm-8">
								<div
									class="btn-group"
									data-toggle="buttons">
									<label class="btn btn-warning">
										<input
											type="radio"
											name="options"
											id="option1" />
										낮음
									</label>
									<label class="btn btn-warning">
										<input
											type="radio"
											name="options"
											id="option2" />
										중간
									</label>
									<label class="btn btn-warning">
										<input
											type="radio"
											name="options"
											id="option3" />
										높음
									</label>
								</div>
							</div>
						</div>
						<div class="control-group col-sm-12">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								for="req_title"
								class="control-label"
								style="color: #f8f8f8">
								요구사항 제목
								<span class="required">*</span>
								<span
									class="input-group-addon"
									style="display: inline !important">
									<i class="glyphicon glyphicon-gift"></i>
								</span>
							</label>
							<div class="controls form-group col-sm-8">
								<input
									type="text"
									id="req_title"
									name="title"
									class="form-control parsley-validated"
									required="required" />
							</div>
						</div>
						<div class="control-group col-sm-12">
							<div class="controls form-group col-sm-1">&nbsp;</div>
							<label
								for="modal_editor"
								class="control-label"
								style="color: #f8f8f8">
								요구사항 내용
								<span class="required">*</span>
								<span
									class="input-group-addon"
									style="display: inline !important">
									<i class="glyphicon glyphicon-gift"></i>
								</span>
							</label>
							<div class="controls form-group col-sm-12">
								<div
									id="modal_editor"
									class="darkBack">
									<p>요구사항 내용을 기록합니다.</p>
								</div>
							</div>
						</div>
					</fieldset>
				</form>
			</div>
			<div
				class="modal-footer"
				style="background-color: transparent; padding: 5px; text-align: right; border-top: 0px">
				<button
					type="button"
					id="close_req"
					class="btn btn-default"
					data-dismiss="modal">
					Close
				</button>
				<button
					type="button"
					id="save_req"
					class="btn btn-success">
					신규 요구사항 저장
				</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- page specific application css/js -->
<style type="text/css">
	.new-tab-open .product-handler,
	.new-tab-open .pull-right {
		display: none;
	}

	.product-handler {
		display: flex;
		justify-content: space-between;
	}
	.product-handler__group {
		display: flex;
		gap: 7px;
	}
	.product-handler .btn-block {
		margin: 0;
		max-width: 160px;
	}
	.btn:focus,
	.btn:active:focus {
		outline: 0px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}
	.input-wrap {
		display: flex;
		height: 30px;
		margin-bottom: 7px;
	}
	.input-wrap .input-group-addon {
		width: 40px;
		height: 30px;
	}
	.input-wrap .select2-selection--single,
	.input-wrap .select2-selection--multiple {
		height: 30px !important;
		min-height: 30px !important;
	}
	.input-wrap .select2-selection__placeholder {
		padding-left: 2px !important;
	}
	.input-wrap .select2-selection--multiple ul {
		padding-left: 10px !important;
	}
	.input-wrap .select2-search--inline,
	.input-wrap .select2-search--inline input {
		width: 100% !important;
	}
	.form-control:focus {
		box-shadow: none;
	}

	#service-reviewers,
	#service-reviewers a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0;
	}

	#service-reviewers a {
		gap: 5px;
	}

	.profile-image {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		overflow: hidden;
	}
	.profile-image img {
		width: 100%;
	}

	.btn-transparent.active {
		color: white;
		background: rgba(51, 51, 51, 0.55);
		color: #ffffff;
		background-color: #e5603b;
		border-color: rgba(0, 0, 0, 0.15);
	}
	.btn:focus,
	.btn.focus,
	.btn:active:focus,
	.btn:active.focus,
	.btn.active:focus,
	.btn.active.focus {
		outline: 0px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}
	.select2-search__field::-webkit-input-placeholder,
	.select2-search__field::placeholder {
		color: #999 !important;
		padding-left: 6px;
	}

	/**
     * Nestable
     */
	.dd {
		position: relative;
		display: block;
		margin: 0;
		padding: 0;
		max-width: 600px;
		list-style: none;
		font-size: 13px;
		line-height: 20px;
	}

	.dd-list {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dd-list .dd-list {
		padding-left: 30px;
	}

	.dd-collapsed .dd-list {
		display: none;
	}

	.dd-item,
	.dd-empty,
	.dd-placeholder {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		min-height: 20px;
		font-size: 13px;
		line-height: 20px;
	}

	.dd-handle {
		display: block;
		margin: 5px 0;
		padding: 5px 10px;
		color: #f8f8f8;
		text-decoration: none;
		background: rgba(51, 51, 51, 0.4);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.dd-item > button {
		display: block;
		position: relative;
		cursor: pointer;
		float: left;
		width: 25px;
		height: 20px;
		margin: 5px 0;
		padding: 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		border: 0;
		background: transparent;
		font-size: 12px;
		line-height: 1;
		text-align: center;
		font-weight: bold;
		color: #f8f8f8;
	}

	.dd-item > button:before {
		content: '+';
		display: block;
		position: absolute;
		width: 100%;
		text-align: center;
		text-indent: 0;
	}

	.dd-item > button[data-action='collapse']:before {
		content: '-';
	}

	.dd-placeholder,
	.dd-empty {
		margin: 5px 0;
		padding: 0;
		min-height: 30px;
		background: rgba(51, 51, 51, 0.2);
		border: 1px dashed rgba(255, 255, 255, 0.6);
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.dd-empty {
		border: 1px dashed rgba(255, 255, 255, 0.6);
		min-height: 100px;
		background-size: 60px 60px;
		background-position: 0 0, 30px 30px;
	}

	.dd-dragel {
		position: absolute;
		pointer-events: none;
		z-index: 9999;
	}

	.dd-dragel > .dd-item .dd-handle {
		margin-top: 0;
	}

	.dd-dragel .dd-handle {
		-webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
	}

	/**
     * Nestable Extras
     */
	.nestable-lists {
		display: block;
		clear: both;
		padding: 30px 0;
		width: 100%;
		border: 0;
		border-top: 2px solid #ddd;
		border-bottom: 2px solid #ddd;
	}

	@media only screen and (min-width: 700px) {
		.dd + .dd {
			margin-left: 2%;
		}
	}
	.dd-hover > .dd-handle {
		background: #2ea8e5 !important;
	}

	/**
     * Nestable Draggable Handles
     */
	.dd3-content {
		display: block;
		height: 30px;
		margin: 5px 0;
		padding: 5px 10px 5px 40px;
		color: #333;
		text-decoration: none;
		font-weight: bold;
		border: 1px solid #ccc;
		background: #fafafa;
		background: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
		background: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
		background: linear-gradient(top, #fafafa 0%, #eeeeee 100%);
		-webkit-border-radius: 3px;
		border-radius: 3px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.dd3-content:hover {
		color: #2ea8e5;
		background: #fff;
	}

	.dd-dragel > .dd3-item > .dd3-content {
		margin: 0;
	}

	.dd3-item > button {
		margin-left: 30px;
	}

	.dd3-handle {
		position: absolute;
		margin: 0;
		left: 0;
		top: 0;
		cursor: pointer;
		width: 30px;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		border: 1px solid #aaa;
		background: #ddd;
		background: -webkit-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
		background: linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.dd3-handle:before {
		content: 'тЙб';
		display: block;
		position: absolute;
		left: 0;
		top: 3px;
		width: 100%;
		text-align: center;
		text-indent: 0;
		color: #fff;
		font-size: 20px;
		font-weight: normal;
	}

	.dd3-handle:hover {
		background: #ddd;
	}

	/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
	.datepicker {
		top: 0;
		left: 0;
		padding: 4px;
		margin-top: 1px;
		color: #555555;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		-ms-border-radius: 1px;
		-o-border-radius: 1px;
		border-radius: 1px;
		/*.dow {
            border-top: 1px solid #ddd !important;
        }*/
	}

	.datepicker:before {
		content: '';
		display: inline-block;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #ccc;
		border-bottom-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: -7px;
		left: 6px;
	}

	.datepicker:after {
		content: '';
		display: inline-block;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid white;
		position: absolute;
		top: -6px;
		left: 7px;
	}

	.datepicker > div {
		display: none;
	}

	.datepicker table {
		width: 100%;
		margin: 0;
	}

	.datepicker td,
	.datepicker th {
		text-align: center;
		width: 20px;
		height: 20px;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		-ms-border-radius: 1px;
		-o-border-radius: 1px;
		border-radius: 1px;
	}

	.datepicker td.day:hover {
		background: #f8f8f8;
		cursor: pointer;
	}

	.datepicker td.day.disabled {
		color: #f8f8f8;
	}

	.datepicker td.old,
	.datepicker td.new {
		color: white;
	}

	.datepicker td.active,
	.datepicker td.active:hover {
		background: #618fb0;
		color: #fff;
	}

	.datepicker td span {
		display: block;
		width: 47px;
		height: 54px;
		line-height: 54px;
		float: left;
		margin: 2px;
		cursor: pointer;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		-ms-border-radius: 1px;
		-o-border-radius: 1px;
		border-radius: 1px;
	}

	.datepicker td span:hover {
		background: #eeeeee;
	}

	.datepicker td span.active {
		background: #618fb0;
		color: #fff;
	}

	.datepicker td span.old {
		color: #999999;
	}

	.datepicker th.switch {
		width: 145px;
	}

	.datepicker th.next,
	.datepicker th.prev {
		font-size: 19.5px;
	}

	.datepicker thead tr:first-child th {
		cursor: pointer;
	}

	.datepicker thead tr:first-child th:hover {
		background: #eeeeee;
	}
</style>
