<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-sort-amount-asc"></i>
					Active Requirement
				</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 / Scope / Resource)별 요구사항 현황
                    <div style="float: right;">
                        <button class="btn btn-transparent btn-xs"
                                style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.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 color-legend-widget">
                        <section class="widget">
                            <header style="margin-bottom: 15px">
                                <h4>
									<span class="font13" style="font-weight: bold">
										<i class="fa fa-asterisk"></i>
										제품(서비스) - 버전 선택
									</span>
                                </h4>
                            </header>
                            <div class="body">
                                <div class="column">
                                    <span>1. Product<sup>service</sup> 를 선택해 주세요</span>
                                    <div    class="control-group"
                                            class="darkBack"
                                            style="padding-top: 10px; padding-bottom: 10px; border: 0">
                                        <div    class="controls form-group"
                                                class="darkBack"
                                                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>
                                    <span>2. Product<sup>service</sup>의 버전을 선택해 주세요</span>
                                    <div    class="control-group"
                                            style="padding-top: 10px; padding-bottom: 10px; border: 0">
                                        <div    class="controls form-group"
                                                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 color-legend-widget">
                        <section class="widget">
                            <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="control-group"
                                        class="darkBack"
                                        style="padding-bottom: 10px; border: 0">
                                    <div    class="controls form-group"
                                            class="darkBack"
                                            style="margin-bottom: 5px !important; padding-top: 5px !important;">
                                        <span>✔ 총 제품(서비스) 버전 개수 : <a id="version_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 요구사항이 있는 제품(서비스) 버전 개수 : <a id="active_version_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                    </div>
                                    <div    class="control-group"
                                            class="darkBack"
                                            style="padding-bottom: 10px; border: 0">
                                        <div    class="controls form-group darkBack"
                                                id="version_progress_status"
                                                style="margin-bottom: 5px !important;">
                                        </div>
                                    </div>
                                </div>
                                <ul class="color-labels">
                                    <div id="light">
                                        <span class="active" id="red"></span>
                                        <span id="orange"></span>
                                        <span id="green"></span>
                                    </div>

                                    <button class="btn btn-primary btn-block btn-sm hidden">Switch Light</button>
                                </ul>
                            </div>
                        </section>
                    </div>

                    <div class="col-md-3 color-legend-widget">
                        <section class="widget">
                            <header style="margin-bottom: 15px">
                                <h4>
									<span class="font13" style="font-weight: bold">
										<i class="fa fa-calendar-o"></i>
										Scope ( 요구사항 및 연결이슈 수 )
									</span>
                                </h4>
                            </header>
                            <div class="body">
                                <div    class="control-group"
                                        class="darkBack"
                                        style="padding-bottom: 10px; border: 0">
                                    <div    class="controls form-group"
                                            class="darkBack"
                                            style="margin-bottom: 5px !important; padding-top: 5px !important;">
                                        <span>✔ 총 제품(서비스) 요구사항 개수 : <a id="req_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 요구사항 연결이슈 및 하위이슈 개수: <a id="linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 요구사항 별 연결된 평균 이슈 개수: <a id="linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 요구사항 별 연결된 평균 처리일: <a id="linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                    </div>
                                    <div    class="control-group"
                                            class="darkBack"
                                            style="padding-bottom: 10px; border: 0">
                                        <div    class="controls form-group darkBack"
                                                id="scope_progress_status"
                                                style="margin-bottom: 5px !important;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>

                    <div class="col-md-3 color-legend-widget">
                        <section class="widget">
                            <header style="margin-bottom: 15px">
                                <h4>
									<span class="font13" style="font-weight: bold">
										<i class="fa fa-dollar"></i>
										Resource ( 자원분배 )
									</span>
                                </h4>
                            </header>
                            <div class="body">
                                <div    class="control-group"
                                        class="darkBack"
                                        style="padding-bottom: 10px; border: 0">
                                    <div    class="controls form-group"
                                            class="darkBack"
                                            style="margin-bottom: 5px !important; padding-top: 5px !important;">
                                        <span>✔ 제품(서비스)에 투입된 총 인원 : <a id="resource_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 버전별 인원 평균: <a id="resource_per_version" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 투입 인원 월평균 요구사항 수: <a id="avg_req_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 투입 인원 월평균 요구사항 처리 수: <a id="avg_req_resolve_or_close_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 투입 인원 월평균 요구사항 연결 이슈 수: <a id="avg_req_linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                        <span>✔ 투입 인원 월평균 요구사항 연결 이슈 처리 수: <a id="avg_req_linkedIssue_resolve_or_close_count" style="font-weight: bold;">n/a</a> 개</span><br>
                                    </div>
                                    <div    class="control-group"
                                            class="darkBack"
                                            style="padding-bottom: 10px; border: 0">
                                        <div    class="controls form-group darkBack"
                                                id="scope_progress_status"
                                                style="margin-bottom: 5px !important;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>

                </div>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="card card-widget widget-user">

        <div class="row">
            <div class="widget-user-header text-white">
                <div class="col-lg-6 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%; height: 2px"></div>
<!--                            <blockquote class="font13"
                                        style="margin-top: 5px;">
                                프로덕트의 요구사항 해결 추이
                                <div style="float: right;">
                                    <button class="btn btn-transparent btn-xs"
                                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.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-lg-4 col-layer" style="padding-right: 4px !important;">
                                    <section class="widget large">
                                        <header>
                                            <h4>
                                                <span
                                                        class="font13"
                                                        style="font-weight: bold">
                                                    <i class="fa fa-tasks"></i>
                                                    버전별 기한 중 현 시점
                                                </span>
                                            </h4>
                                        </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-md-6 fade-in-box"
                                                        style="width: 47%; position: relative; display: none">
                                                    <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="width: 47%; position: relative; display: none">
                                                    <span>종료일까지</span>
                                                    <br />
                                                    <span
                                                            class="project-date"
                                                            id="latestEndDate"></span>
                                                    <div
                                                            class="day-progress"
                                                            id="endDDay"></div>
                                                </div>
                                                <div
                                                        class="box"
                                                        id="notifyNoVersion"
                                                        style="width: 100%; text-align: center; color: #e49400">
                                                    현재 선택된 제품이 없습니다.
                                                </div>
                                            </div>
                                            <div id="versionGaugeChart"></div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-lg-8" style="padding-left: 0px !important;">
                                    <section class="widget large">
                                        <header>
                                            <h4>
                                                <span
                                                        class="font13"
                                                        style="font-weight: bold">
                                                    <i class="fa fa-tasks"></i>
                                                    제품(서비스) 버전별 타임라인
                                                </span>
                                            </h4>
                                        </header>
                                        <div
                                                class="body"
                                                id="version-timeline-wrapper">
                                            <div
                                                        class="box"
                                                        id="notifyNoVersion2"
                                                        style="width: 100%; text-align: center; color: #e49400">
                                                    현재 선택된 제품이 없습니다.
                                            </div>
                                            <div id="version-timeline-bar" class="time_element"></div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-lg-6 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%; height: 2px"></div>-->
<!--                            <blockquote class="font13"-->
<!--                                        style="margin-top: 5px;">-->
<!--                                프로덕트의 요구사항 해결 추이-->
<!--                                <div style="float: right;">-->
<!--                                    <button class="btn btn-transparent btn-xs"-->
<!--                                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.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-6 col-layer">
                                    <section class="widget">
                                        <header>
                                            <h4>
                                                <span
                                                        class="font13"
                                                        style="font-weight: bold">
                                                    <i class="fa fa-tasks"></i>
                                                    제품별 버전 및 작업자
                                                </span>
                                            </h4>
                                        </header>
                                    <div class="body" id="chart-product-manpower" style="height: 288px">
                                    </div>
                                    </section>
                                </div>
                                <div class="col-md-6 col-layer">
                                    <section class="widget">
                                        <header>
                                            <h4>
                                                <span
                                                        class="font13"
                                                        style="font-weight: bold">
                                                    <i class="fa fa-tasks"></i>
                                                    작업자별 요구사항 관여
                                                </span>
                                            </h4>
                                        </header>
                                    <div class="body" id="chart-manpower-requirement" style="height: 288px">
                                    </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="widget-user-header text-white">
                <div class="col-lg-6 col-layer">
                    <section class="widget">
                        <header>
                            <h4>
                    <span   class="font13"
                            style="font-weight: bold">
                        <i class="fa fa-sort-amount-asc"></i>
                        Product Overview
                    </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="row">
                                <div class="col-lg-4">
                                    <section class="widget large">
                                        <header>
                                            <h4><i class="fa fa-pie-chart"></i> 제품의 이슈 상태 현황 </h4>
                                        </header>
                                        <div class="body" id="donut-chart"></div>
                                    </section>
                                </div>
                                <div class="col-lg-8">
                                    <section class="widget large">
                                        <header>
                                            <h4><i class="fa fa-bar-chart"></i> 월 별 제품의 요구사항 및 이슈 상태 누적 현황 </h4>
                                        </header>
                                        <div class="body" id="combination-chart"></div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-lg-6 col-layer">
                    <section class="widget">
                        <header>
                            <h4>
                    <span   class="font13"
                            style="font-weight: bold">
                        <i class="fa fa-sort-amount-asc"></i>
                        Product Overview
                    </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="row">
                                <div class="col-lg-4">
                                    <section class="widget large">
                                        <header>
                                            <h4><i class="fa fa-pie-chart"></i> 투입 인력별 퍼포먼스 </h4>
                                        </header>
                                        <div class="body" id="polar_bar"></div>
                                    </section>
                                </div>
                                <div class="col-lg-8">
                                    <section class="widget large">
                                        <header>
                                            <h4><i class="fa fa-bar-chart"></i> 월 별 제품의 요구사항 및 이슈 상태 누적 현황 </h4>
                                        </header>
                                        <div class="body" id="combination-chart2"></div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="widget-user-image">
            <img src="./img/index/str.png" alt="User Avatar">
        </div>
    </div>
</div>


<style>
    .card-widget {
        border: 0;
        position: relative;
    }

    .card {
        margin-bottom: 1rem;
    }

    .card {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-clip: border-box;
        border: 0 solid rgba(0,0,0,.125);
        border-radius: 0.25rem;
    }

    .widget-user .widget-user-image>img {
        height: auto;
        width: 200px;
    }

    .widget-user .widget-user-image {
        left: 50%;
        margin-left: -100px;
        position: absolute;
        top: 150px;
    }

    .widget-user .widget-user-header {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        height: 135px;
        padding: 1rem;
        text-align: center;
    }

    .img-circle {
        border-radius: 50%;
    }
    img {
        vertical-align: middle;
        border-style: none;
    }

    /*! Light */
    #light {
        background-color: #000;
        box-shadow: 0 0 5px rgba(0,0,0, .8);
        overflow: hidden;
        padding: 0 0 4px;
        width: 40px;
        margin-left: 30px;
        transform:rotate(270deg);
    }

    #light span {
        border-radius: 50px;
        display: block;
        height: 30px;
        margin: 4px auto 0;
        opacity: .5;
        width: 30px;
    }

    /*! Light colours */
    #red    { background-color: red; }
    #orange { background-color: orange; }
    #green  { background-color: green; }

    /*! Active states */
    #light span.active    { opacity: 1; }
    #light #red.active    { box-shadow: 0 0 10px red; }
    #light #orange.active { box-shadow: 0 0 10px orange; }
    #light #green.active  { box-shadow: 0 0 10px green; }

    /*! Toggle button */
    button {
        margin-top: 10px;
    }

    .project-date {
        font-size: 10px;
        color: #a4c6ff;
    }

    .day-progress {
        position: absolute;
        top: 85%;
        left: 50%;
        translate: -50% -50%;
        font-size: 12px;
        font-weight: bold;
    }
    .timeline:before {
     left: 0px !important;
    }
    .time_element {
        overflow-x: scroll;
        white-space:nowrap;
    }

    .node rect {
        fill-opacity: 0.9;
        shape-rendering: crispEdges;
    }

    .node text {
        pointer-events: none;
        text-shadow: 0 1px 0 #fff;
    }

    .link {
        fill: none;
        stroke: #000;
        stroke-opacity: 0.2;
    }

    .link:hover {
        stroke-opacity: 0.5;
    }
</style>