@import url('common.css.jsp');
@import url('sidebars.css.jsp');

/*title*/
.title{width:40%}
.title_bar{content:""; height: 2px; width: 84px; background-color: #fff; }

/*login_form*/
.whitebox{background-color: #fff; width:500px !important; height:455px !important}
.form-control{line-height: 3.0!important; border-radius: 0.7rem!important;height:62px}
.input_box{position: relative;}
.icon{position: absolute;top: 50%;transform: translateY(-50%);right: 20px;}
.login-form .input_box:nth-of-type(2) > .icon{right:3%}
.abox > a{color: #f78f35 !important; font-weight: 600;line-height: 2.7em!important}
.btn-primary{background-color: #f78f35 !important; border-color: #f78f35 !important; white-space: nowrap;}
.btn_shadow {box-shadow: 0 0.3rem 0.4rem rgba(-1,-1,-1,0.4);}
.btn-group-lg>.btn, .btn-lg{padding: .1rem 2.9rem !important}

/*mypage*/
.countbox{display: flex; justify-content: space-between;align-items: center;background-color: #f3f3f3;width: 48%;height:50px}
.countbox img{margin-right: 10px;}
.countbox > p{font-weight: 300;font-size: 14px}
.countbox > span{color:#000;font-size: 16px;font-weight: 500;}
.button-wrap{align-self: center;}
.button-wrap>.btn{font-size:0.9em}
.s_table>.table-responsive{height: 156px;overflow-y: scroll;text-align: center}
.s_table tbody tr{position:relative}
.s_table tbody tr:first-child{background-color:transparent!important;border-top: 1px solid #f0f0f0 !important;border-bottom: 1px solid #f0f0f0 !important}
.s_table .table-sm>:not(caption)>*>*{padding: 0rem 0.6rem !important}
.today .table-responsive tr>td:last-child,.notice .table tr>td:last-child{text-align: right;padding-right: 20px !important}
.today .table-responsive tr>th,.notice .table tr>th{width:10%; text-align: center;}
.today .table-responsive tr>th{padding-left: 8px !important;}
.work thead>tr{text-align: center}
.mypage .tab-pane .table>tbody>tr>th,.mypage .tab-pane .table>tbody>tr>td:nth-of-type(1){padding-left:20px!important}
.mypage .tab-pane .table>tbody>tr>td:nth-of-type(2){text-align: center}
/*dashboard*/
.dashboard table tr>td:last-child {text-align: left;}
.dashboard .chart_table>:not(caption)>*>* {padding: .02rem .2rem !important;}
.dashboard table tr{height: auto;}
.dashboard .card-body{display: flex;}
.dashboard .card{display: block !important;justify-content: space-between;}
#controlTab>li>.nav-link{padding: .7rem 1rem!important}
.tab-pane p{font-weight: 500;color: #666;}
.table_scroll1{height: 135px; overflow-y:scroll}

/*progress_bar*/
.progress {height: 2em !important; border-radius: 1em !important;}
.progress-bar{background-color: #94d0ff; border-radius: 1em}
.progress_table2>:not(caption)>*>* {padding:0 0.4em  !important}
.dashboard .progress_table tr{display: flex !important;justify-content: space-between;margin-bottom: 15px;}
.dashboard .progress_table>thead tr {margin-bottom: 0;}
.progress_table2 .progress-bar{background-color: #ffc750 !important; border-radius: 0 !important}
.progress_table2 .progress {height: 0.8em !important; border-radius: 0 !important;}
.progress_table2 th{text-overflow: ellipsis;overflow: hidden; max-width:80px;white-space: nowrap;}
.tab-pane .progress_table2 tr>th,  .s_table .progress_table2 tr>td {border-right: none!important;}
/*tr ellipsis*/
.chart_table th{text-overflow: ellipsis;overflow: hidden; max-width:44px;white-space: nowrap;}
/*************/
.bar_table tr{height:34px}
.progress_table > thead tr, .progress_table2 > tbody tr{height:22px !important}
.fill_chart {text-align: center;}
.fill_chart>div{position:relative;overflow:hidden;width:90px;height:90px; background:#e4e4e4; border-radius:50%;margin: 0 auto}
.fill_chart .progress-bar{position: absolute;bottom: 0;left: 0;width: 100%;border-radius: 0 !important;background-color: #ffc750 !important}
.fill_chart .progress-bg{position: absolute;bottom: 0;left: 0;width:100%;height:100%;background: url(/img/fill_chart_bg.png)no-repeat center}

/*sitemap*/
.sitemap .row>*{padding-right:0 !important;padding-left:0 !important}
.map1{background: url(/img/sitemap_orange_4.png)no-repeat center;}
.map2{background: url(/img/sitemap_orange_2.png)no-repeat center;}
.map2-1{background: url(/img/sitemap_orange_3.png)no-repeat center;background-size: cover}
.map3{background: url(/img/sitemap_orange_1.png)no-repeat center;}
.map4{background: url(/img/sitemap_gray1.png)no-repeat center;}
.map5{background: url(/img/sitemap_blue_1.png)no-repeat center;}
.map6{background: url(/img/sitemap_blue_3.png)no-repeat center;}
.map6-1{background: url(/img/sitemap_blue_2.png)no-repeat center; background-size: cover}
.map7{background: url(/img/sitemap_blue_4.png)no-repeat center;}
.map1,.map2,.map3,.map4,.map5,.map6,.map7{background-size: cover;}
.accordion-button{width:100%;display:inline-flex;justify-content: space-between;align-items: center;font-size: 14px!important;padding: 0.4rem 1.2rem !important;font-weight: 400;color: #3c3c3c!important;position:relative}
.accordion-collapse{background-color: #f7f7f7;}
.accordion-body {padding: 0.6rem 1.0rem !important;padding-right: 0.7em!important}
.accordion-body a{color:#666; font-size: 13px;line-height: 26px}
.seven-cols{justify-content: space-between;display: flex;}
.colums-7{width: 14.2857%;}
.map1>p,.map2>p,.map2-1>p,.map3>p,.map4>p,.map5>p,.map6>p,.map6-1>p,.map7>p{line-height: 36px;color: #fff;font-size: 16px;font-weight: 400;}
.seven-cols>div:nth-of-type(5)>div.accordion>div:nth-of-type(9) div::after,
.seven-cols>div:nth-of-type(5)>div.accordion>div:nth-of-type(10) div::after,
.seven-cols>div:nth-of-type(7)>div.accordion>div:nth-of-type(4) div::after,
.seven-cols>div:nth-of-type(7)>div.accordion>div:nth-of-type(5) div::after{display: none;}

    /*hover,active*/
    .accordion-button[aria-expanded="true"]{color:#f78f35!important; font-weight: 500;}
    .accordion-button[aria-expanded="true"]:not(.collapsed)::after,
    .seven-cols>div:nth-of-type(2) .accordion .accordion-button[aria-expanded="true"]:not(.collapsed)::after
    {background: url(/img/sk_arrow_sitemap.png)no-repeat !important;margin-top:7px}
    .accordion-body a:hover,.accordion-button:hover{color: #f78f35 !important}
    .accordion-button:hover::after{background: url(/img/arrow_sitemap_hover.png)no-repeat left;background-size: 0.8rem;}
    /*accordion after*/
    .accordion-button::after{width: 0.8rem;height: 0.8rem;margin-left:10px;content: "";background: url(/img/arrow_sitemap.png)no-repeat left;background-size: 0.8rem;transition: transform .2s ease-in-out;}
    .seven-cols>div:nth-of-type(2) .accordion .accordion-button:not(.collapsed)::after,
    .seven-cols>div:nth-of-type(6)>.accordion>div.mt-5>.accordion .accordion-button::after{background: none !important}

/*dashboard2(별도)*/
.step_wrap{height: 60px;width: 100%;position: relative}
.step{display: flex; text-align: center;height: 100%;width: 26%;position: absolute;top: 0;}
.step1{left:0}.step2{left:25%}.step3{left:50%;width:25%}.step-center4{right:0}
.step .incomplete,.step .complete{display: block;border-radius: 11px;width:70px;height: 22px;font-size: 12px;margin: 0 auto;margin-top: 4px}
.step .incomplete{border: 1px solid #666;}
.step .complete{border: 1px solid #fff;}
.step>div{height:100%;padding-top: 0.3em}
.step1>div:first-child{border-bottom: 1px solid #dbdbdb;border-top: 1px solid #dbdbdb;border-left: 1px solid #dbdbdb;}
.step-center4>div:nth-of-type(2),.step-center>div:nth-of-type(2){border-bottom: 1px solid #dbdbdb;border-top: 1px solid #dbdbdb;}
.step4>div:last-child,.step1>div:last-child{background: url(/img/step_gray_right.png)no-repeat right;}
.step4>div:first-child{background: url(/img/step_gray_left.png)no-repeat left;}
.step-center>div:first-child{background: url(/img/step_orange_left.png)no-repeat left;}
.step-center>div:last-child{background: url(/img/step_orange_right.png)no-repeat right;}
.dashboard2 .normal_table thead th,.dashboard2 .normal_table td{text-align: center;align-items: center;}
.dashboard2 .normal_table td>span{text-align: right;font-size: 13px}
.dashboard2 .progress{height: 1.3em !important;}
.progress-1{height: 0.8em;display: flex;overflow: hidden;font-size: .75rem;background-color: #e9ecef;border-radius: .25rem;}
.dashboard2 .progress_table th,.dashboard2 .progress_table td {padding: 0.35em 0em !important;}
.dashboard2 .progress_table th:first-child{padding-right: 14px !important;}
.dashboard2 .progress_table tr td:last-child{padding-left: 12px !important;}
.container-1-3>div>div>div:last-child>p{text-align: right;}
.dashboard2 .normal_table thead th{vertical-align:middle}

/**dropdown**/
.dropdown>.btn{font-size: 14px !important}
.dropdown{align-self: center}
.dropdown-toggle{padding:.45rem .75rem!important;width:216px}
.dropdown-toggle:hover,.dropdown-item:hover{background-color: #fffaf7!important}
.dropdown-menu{width:100%;}
.dropdown-item.active, .dropdown-item:active {color:#000 !important}
.dropdown-item{color:#737373 !important;font-size: 14px;padding: .25rem 1.0rem!important}
.dropdown-toggle::after{position: absolute;top: 50%;right:5%}



/*workflow*/
.flowbox_wrap{padding:12px;border:thick dotted #ff4e31}
.flowbox_w,.flowbox_y,.flowbox_o,.flowbox_c,.flowbox_b{height:60px;border-radius: 30px;}
.flowbox_w{}
.flowbox_y{}
.flowbox_o{}
.flowbox_c{}
.flowbox_b{}

/*권한별사용화면관리 contents2*/
.border-table{border-top: 1px solid #dee2e6;border-bottom: 1px solid #dee2e6}
.border-table>tbody>tr{border-bottom: 1px solid #dee2e6!important}
.border-table>tbody>tr>td{border-right: 1px solid #dee2e6!important}
.border-table>tbody>tr>td:last-child{border-right: none!important}
.contents2 .normal_table>thead>tr>th{font-weight: 400;text-align: center}
.contents2 .normal_table>tbody>tr>td{text-align: center}
.pgm-id,.program-name{text-align: left!important}
/*****************************************/
@media (min-width:1940px){
.step{width: 25.7%}.step3{width:25%}
}
@media (max-width:1600px){
    /*dashboard*/
    #controlTab>li>.nav-link {padding: .7rem 0.4rem!important;}
    .tab-content>.active {display: flex !important;width:100%}
    .tab-pane>div{width:33%; padding: 0 10px;}
    .tab-pane>div>div{justify-content: space-between;}
    .w-70 {width:65%;}
}
@media (max-width:1685px){
/*sitemap*/
.colums-7{width: 25%;}
.seven-cols{justify-content:start;flex-wrap: wrap;}
/*dashboard1*/
.container-fluid>.w-30{width:50%;border-bottom: 1px solid #dee2e6;}
.container-1-3{width:100%}
/*.step1{width: 26.2%}.step2{width: 26.0%}.step3{width: 25.2%}.step-center4{right:0}*/
}