.page.work-mgt-report{
    padding-top:0px;
    padding-right:0px;
}

.page.work-mgt-report .devide-box {
    height:100%;
    margin-top:0px;
    padding-right:0px;
}

.page.work-mgt-report .devide-box .left-box{
    padding-top:30px;
    padding-right: 20px;
    position: relative;
}

.page.work-mgt-report .devide-box .right-box{
    background-color:#F4F6F9;
    height:calc(100vh - 60px);
    padding:40px;
    position: relative;
}

.page.work-mgt-report .devide-box .btm-box{
    padding:20px;
    position: absolute;
    right: 20px;
    bottom: 0px;
}
            
.page.work-mgt-report .devide-box .btn-box{
    text-align: end;
}


.page.work-mgt-report .devide-box .btn-box button{
    background: #fff;
    color: #001E5E;
    border-color: #001E5E;
    /* font-weight: 500; */
    width: 120px;
    padding: 7px;
    padding-top: 10px;
}

.page.work-mgt-report .devide-box .btn-box button.save{
    background: #001E5E;
    color: #fff;
    border-color: #001E5E;
}


.page.work-mgt-report .devide-box .btn-box button:active{
    background: #001E5E;
    color:#fff;
}

.page.work-mgt-report .devide-box .btn-box button.save:active{
    background: #fff;
    color: #001E5E;
}


.page.work-mgt-report .devide-box .btn-box button.cancel{
    color: red;/*FBE3D6*/
    border-color: red;
    background: #fff;
}

.page.work-mgt-report .devide-box .btn-box button.cancel:active{
    background: red;/*EDA900*/
    color:#fff;
}

.page.work-mgt-report .devide-box .btn-box a.btn{
    width: 80px;
    border: 1px solid #001E5E;
    padding: 5px 5px;
    font-size: 13px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.page.work-mgt-report .devide-box .btn-box a.btn:active{
    background: #001E5E;
    color:#fff;
}

.page.work-mgt-report .top-box{
    display: flex;
    justify-content: space-between;
    height:30px;
    margin-bottom: 20px;
}

.page.work-mgt-report .top-box .tit{
    font-size:20px;
    
}

.page.work-mgt-report .top-box div.cal-btn{
    width: 120px;
    border: 1px solid #001E5E;
    padding: 5px 5px;
    font-size: 14px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.page.work-mgt-report .top-box div.cal-btn span{
    color:#001E5E;
    font-weight: bold;
} 

.page.work-mgt-report .top-box div.cal-btn .cal-txt{
    font-size:20px;
    margin-top: -4px;
}

.page.work-mgt-report .top-box div.cal-btn span + span{
    margin-left:10px;
}

.page.work-mgt-report .top-box div.cal-btn:active{
    background-color: #001E5E;
}

.page.work-mgt-report .top-box div.cal-btn:active span{
    color:#fff;
}



.work-mgt-report  .info-box + .info-box{
    margin-top:5px;
}

.work-mgt-report  .tit-box span{
    font-size:13px;
    font-weight: bold;
}

.work-mgt-report  .info-box .row{
    width:100%;
    display:flex;
    height:34px;
    border-right: 1px solid #DCEAF7;
}

.work-mgt-report  .info-box .row:last-child:not(.sub-txt){
    border-bottom: 1px solid #DCEAF7;
}

.work-mgt-report  .info-box .row.borbtm{
    border-bottom: 1px solid #DCEAF7;
}

.work-mgt-report  .info-box .row.n-bor{
    border:0px;
} 

.work-mgt-report  .info-box .row .item{
    flex: 1;
    /*border-bottom: 1px solid #DCEAF7;*/
    display: flex;
}

        
.work-mgt-report  .info-box .row .item .tit{
    width: 110px;
    font-size: 13px;
    /*padding: 9px 7px 5px 5px;*/
    padding: 5px 7px 0px 5px;
    background-color: #001E5E;
    text-align: center;
    height: 33px;

}

.work-mgt-report  .info-box .row .item .tit.full{
    flex:1;
}

.work-mgt-report  .info-box .row .item .tit.top-bor-rond{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size:14px;
}

.work-mgt-report  .info-box .row .item .tit.full + .tit.full{
    margin-left:10px;
}

.work-mgt-report  .info-box .row .item .tit.flex{
    display: flex;
    justify-content: space-around;
}

.work-mgt-report  .info-box .row .item .tit.full{
    width:100%;
}

.work-mgt-report  .info-box .row .item .tit.bgnon{
    background-color: transparent;   
}


.work-mgt-report  .info-box .row .item .tit.bgsky{
    background-color: #DCEAF7;
}

.work-mgt-report  .info-box .row .item .tit.gray{
    background-color: #EAEAEA;
}


.work-mgt-report  .info-box .row .item .tit span{
    color:#fff;
    /*font-weight: bold;*/
    display: block;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.work-mgt-report  .info-box .row .item .tit.bgsky span,
.work-mgt-report  .info-box .row .item .tit.gray span{
    color:#000;
}

.work-mgt-report  .info-box .row .item .tit.bgnon span{
    color:#000;
}

.work-mgt-report  .info-box .row .item .tit .bor-line{
    width:2px;
    height:60%;
    padding-top:20%;
    background-color: #000;
} 

.work-mgt-report  .info-box .row .item .input-box{
    /*width: 78%;*/
    flex:1;
    height: 100%;
    display: flex;
    padding: 2px 5px;
    border-top:1px solid #DCEAF7;
}

.work-mgt-report  .info-box .row .item .input-box.row{
    flex-direction: column;
}


.work-mgt-report  .info-box .row .item .input-box select{
    background-color: #fff;
    font-size:14px;
}

.work-mgt-report  .info-box .row .item .input-box.checkbox{
    flex: 0;
    justify-content: center;
    align-items: center;
}

.work-mgt-report  .info-box .row .item .input-box input:not(input[type='checkbox'],input[type='radio'],input[type="date"]){
    height: 100%;
    border:none;
    background-color: #fff;
    font-size:14px;
    margin-bottom: 2px;
    margin-left: 1px;
    width: 99%;
    padding-top: 10px;
}

.work-mgt-report  .info-box .row .item .input-box input[type="date"]{
    height: 100%;
    border:none;
    background-color: #fff;
    font-size:14px;
    margin-bottom: 2px;
    margin-left: 1px;
    width: 99%;
    padding: 5px 30px 2px 5px;
}

.work-mgt-report  .info-box .row .item .input-box.checkbox input[type="checkbox"]{
    width:25px;
    height:25px;
    margin-right: 0px;
}

.work-mgt-report  .info-box .row .item .input-box label{
    padding: 5px;
    font-size:15px;
}

.work-mgt-report  .info-box .row .item .input-box input[type="radio"]{
    width:20px;
    height:20px;
    border: 1px solid #001E5E;
}

.work-mgt-report  .info-box .row .item .input-box input[type="radio"]:checked{
    border: 5px solid #001E5E;
}

.work-mgt-report  .info-box .row .item .input-box input::placeholder{
    color:#BDBDBD;
}

.work-mgt-report  .info-box .row .item .input-box i.icon-file{
    width:30px;
    height:30px;
    background: url(/images/icon_add_image.png) no-repeat center;
    background-size: 30px 30px;
}

.work-mgt-report  .info-box .row .item .input-box i.icon-file.on{
    background: url(/images/icon_file.png) no-repeat center;
    background-size: 20px 20px;
}

.work-mgt-report .info-box .row .item .input-box .file-txt{
    margin-bottom:0px;
}

.work-mgt-report .info-box .row .item .input-box .file-txt.on{
    background: rgba(189,189,189,0.2);
}

.work-mgt-report  .info-box .row .item .input-box a{
    width: 80px;
    border: 1px solid #001E5E;
    padding: 5px 5px;
    font-size: 13px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.work-mgt-report  .info-box .row .item .input-box a:active{
    background-color: #001E5E;
    color:#fff;
}

.work-mgt-report  .info-box .row .item .input-box textarea{
    width:100%;
    resize:none;
    height:100%;
    background-color:#fff;
    padding:15px;
}

.work-mgt-report  .info-box .row .item .input-box textarea::placeholder{
    color:#B5B5B5;
}

.work-mgt-report  .info-box .row .item .input-box.center{
    justify-content: center;
}

.work-mgt-report  .info-box .row .item .input-box.center input{
    text-align: center;
}

.work-mgt-report  .info-box .row .item .input-box span{
    padding:5px;
    font-weight: bold;
}

.work-mgt-report  .info-box .row .item .input-box span.green{
    margin-top:2px;
    width: 40px;
    height:30px;
    text-align: center;
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
}

.work-mgt-report  .info-box .row .item .input-box span.red{
    margin-top:2px;
    width: 60px;
    height:30px;
    text-align: center;
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
}




/*
    결재 승인뷰 css 시작

*/


.report-view{
    width:100%;
    height:100%;
    background-color:#fff;
    border:2px solid #EAEAEA;
    padding:25px;
    position: relative;
}

.report-view .top-box{
    display:flex;
    justify-content: space-between;
    height:60px;
}

.report-view .top-box .tit-box span{
    padding-left : 0px;
    font-size:22px;
    font-weight:bold;
    border-left:0px;
    
}

.page.work-mgt-report .sign-box,
.report-view .top-box .sign-box{
    display:flex;
}


.page.work-mgt-report .sign-box .item .tit,
.report-view .top-box .sign-box .item .tit{
    width:80px;
    background-color:#001E5E;
    color:#fff;
    text-align:center;
    padding:3px 5px;
    height:25px;
    border-start-start-radius: 5px;
    border-start-end-radius: 5px;
    font-size:14px;
}


.page.work-mgt-report .sign-box .item .tit span,
.report-view .top-box .sign-box .item .tit span{
    color:#fff;
    font-size:14px;
}

.page.work-mgt-report .sign-box .item .sign,
.report-view .top-box .sign-box .item .sign{
    width:80px;
    height:50px;
    border:1px solid #DCEAF7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page.work-mgt-report .sign-box .item .sign .sign-on,
.report-view .top-box .sign-box .item .sign .sign-on{
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
    border:0px;
    padding:8px;
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page.work-mgt-report .sign-box .item .sign .sign-on i.icon-check,
.report-view .top-box .sign-box .item .sign .sign-on i.icon-check{
    width:25px;
    height:25px;
    background: url(/images/icon_check_mark.png) no-repeat center;
    background-size: 22px 22px;
    margin-right:2px;
}

.page.work-mgt-report .sign-box .item .sign .sign-on span,
.report-view .top-box .sign-box .item .sign .sign-on span{
    color: #35CEA0;
    padding-top:2px;
}


.page.work-mgt-report .sign-box .item .sign .sign-off,
.report-view .top-box .sign-box .item .sign .sign-off{
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
    border:0px;
    padding:8px;
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page.work-mgt-report .sign-box .item .sign .sign-off i.icon-check,
.report-view .top-box .sign-box .item .sign .sign-off i.icon-check{
    width:25px;
    height:25px;
    background: url(/images/icon_x_mark.png) no-repeat center;
    background-size: 22px 22px;
    margin-right:2px;
}

.page.work-mgt-report .sign-box .item .sign .sign-off span,
.report-view .top-box .sign-box .item .sign .sign-off span{
    color: #FF4141;
    padding-top:2px;
}

.page.work-mgt-report .sign-box .item + .item,
.report-view .top-box .sign-box .item + .item{
    margin-left:5px;
}

.page.work-mgt-report .sign-box.big{
    margin-bottom: 30px;
}

.page.work-mgt-report .sign-box.big .item .tit{
    width:100px;
    height: 30px;
    font-size:15px;
    padding: 5px 5px;
}

.page.work-mgt-report .sign-box.big .item .sign{
    width:100px;
    height:70px;
}


.report-view .info-view{
    margin-top:80px;
}


.report-view .info-view .info-box + .info-box{
    margin-top:30px;
}

.report-view .info-view .info-box .row{
    width:100%;
    display:flex;
    height:35px;
    border-right: 1px solid #DCEAF7;
}

.report-view .info-view .info-box .row.h40{
    height:40px;
}

.work-mgt-report  .info-box .row.hauto{
    height:auto;
}


.work-mgt-report  .info-box .row.hauto .item .tit{
    height:100%;
}

.report-view .info-view .info-box .row .item{
    flex: 1;
    /*border-bottom: 1px solid #DCEAF7;*/
    display: flex;
}

.report-view .info-view .info-box .row .item .tit{
    background-color: #DCEAF7;
    width:90px;
    border-bottom:1px solid #fff;
}


.report-view .info-view .info-box .row .item .tit span{
    color:#000;
    /*font-weight: bold;*/
    display: block;
    height: 100%;
    font-size:13px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding-top:2px;
}

.report-view .info-view .info-box .row.h40 .tit{
    height:40px;
}

.report-view .info-view .info-box .row.h40 .tit span{
    padding-top:2px;
}

.report-view .info-view .info-box .row .item .input-box{
    flex:1;
    height: 100%;
    display: flex;
    padding: 2px 5px;
    border-top:1px solid #DCEAF7;
}

.report-view .info-view .info-box .row .item .input-box.gray{
    background-color:#F4F6F9;
}

.report-view .info-view .info-box .row .item .input-box.full{
    height: 460px;
    border: 1px solid #EAEAEA;
    border-end-start-radius: 5px; 
    border-end-end-radius: 5px;
}


.report-view .info-view .info-box .row .item .input-box span{
    width:70px;
    font-size:15px;
    height:30px;
}

.report-view .info-view .info-box .row .item .input-box span.bdrig{
   width:10px;
}

.report-view .info-view .info-box .row .item .input-box input:not(input[type='checkbox'],input[type='radio']){
    height: 100%;
    border:none;
    background-color: transparent;
    font-size:15px;
    margin-bottom: 2px;
    margin-left: 1px;
    width: 99%;
}

.report-view .info-view .info-box .row:last-child:not(.sub-txt){
    border-bottom: 1px solid #DCEAF7;
}

.report-view .info-view .info-box .row.n-bor{
    border:none;
}

.report-view .info-view .info-box .row .item .input-box textarea{
    resize:none;
    background-color:#fff;
    padding:15px;
}


.report-view .info-view .info-box .row .item .input-box .opt-list{
    display: flex;
    flex-wrap: wrap;
}

.report-view .info-view .info-box .row .item .input-box .opt-list .item{
    flex:none;
    align-items: center;
    margin-left:5px;
}

.report-view .info-view .info-box .row .item .input-box .opt-list .item input{
    margin-right:2px;
    margin-left:2px;
}


.report-view .info-view .info-box .row .item .input-box .opt-list .item label{
    padding-top:5px;
}


.report-view .table-container table thead tr th{
    height:34px;
    background-color: #F4F6F9;
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
}

.report-view .table-container table tbody tr td{
    padding:2px 2px;
    height:34px;
}





/*
    결재 승인뷰 css 끝
*/



/*
    결재현황 css 시작
*/

        
.approval_status .tit-box{
    margin-bottom:15px;
    margin-top:15px;
    height:28px;
    display:flex;
    align-items: center;
}

.approval_status .tit-box i.line{
    display:block;
    width:5px;
    height:100%;
    background-color:#DCEAF7;
}

.approval_status .tit-box span{
    border-left: 10px solid #001E5E;
    padding-left:10px;
    font-size: 22px;
    font-weight: bold;
    height:28px;
    line-height: 28px;
}

.approval_status .devide-box{
    padding-right:20px;
    display:flex;
}
.approval_status .devide-box .left-box{
    flex:0.7;
    height:100%;
}
.approval_status .devide-box .right-box{
    flex:0.3;
    height:auto;
    
}

.approval_status .devide-box .left-box{
    position: relative;
}

.approval_status .devide-box .left-box ul.cnt-list{
    display:flex;
    border-bottom:1px solid #000;
    /*width: 900px;*/
    width:100%;
    padding-left:20px;
}

.approval_status .devide-box .left-box ul:last-child{
    border-bottom: 0px;
}

.approval_status .devide-box .left-box ul.cnt-list li{
    width:300px;
    height:165px;
    padding-left:20px;
    padding-top:25px;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit{
    display:flex;
    align-items: center;
    justify-content: start;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit span{
    font-weight:bold;
    height:22px;
    font-size:19px;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon{
    width:30px;
    height:30px;
    margin-left:10px;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.file-n-approval{
    background: url(/images/icon_file_n_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.file-c-approval{
    width:35px;
    height:35px;
    background: url(/images/icon_file_c_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.file-r-approval{
    width:32px;
    height:34px;
    background: url(/images/icon_file_r_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.file-u-approval{
    width:30px;
    height:30px;
    background: url(/images/icon_file_u_approval.png) no-repeat center;
    background-size: 100% 100%;
}


.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.folder-n-approval{
    background: url(/images/icon_folder_n_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.folder-r-approval{
    background: url(/images/icon_folder_r_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.folder-c-approval{
    
    background: url(/images/icon_folder_c_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .tit i.icon.folder-u-approval{
    width:35px;
    height:35px;
    margin-bottom: -5px;
    background: url(/images/icon_folder_u_approval.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .left-box ul.cnt-list li .contents{
    display:flex;
    align-items: end;
    justify-content: start;
    margin-top:5px;
}

.approval_status .devide-box .left-box ul.cnt-list li .contents span.big{
    font-size:50px;
    height:59px;
}

.approval_status .devide-box .left-box ul.cnt-list li .contents span{
    font-size:20px;
}

.approval_status .devide-box .left-box ul.cnt-list li .contents span + span{
    margin-left:10px;
}

.approval_status .devide-box .left-box ul.cnt-list li:last-child{
    width:250px;
    padding-right:30px;
    border-left:1px solid #000;
}

.approval_status .devide-box .left-box ul.cnt-list li:last-child .tit{
    justify-content: end;
}

.approval_status .devide-box .left-box ul.cnt-list li:last-child .contents{
    justify-content: end;
}

.approval_status .devide-box .left-box ul.cnt-list + ul.cnt-list li{
    padding-top:45px;
    height:170px;
}

.approval_status .devide-box .right-box .contents-list{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: end;
    margin-bottom:20px;
}

.approval_status .devide-box .right-box .contents-list .tit{
    font-weight:bold;
    padding-left:20px;
    margin-top:10px;
    display: block;
    width: 100%;
    text-align: center;
    padding-left: 70px;
    font-size:17px;
}

.approval_status .devide-box .right-box .contents-list .contents-box{
    height:150px;
    display:flex;
}

.approval_status .devide-box .right-box .contents-list .contents-box.control{
    height:160px;
}

.approval_status .devide-box .right-box .contents-list .contents-box + .contents-box{
    margin-top:10px;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box{
    width:150px;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding-right:10px;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box .view-box{
    width:200px;
    height:125px;
    border: 2px solid #001E5E;
    display:flex;
    justify-content: center;
    align-items: center;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box .view-box.orange{
    border-color:#FFBB00;
}

.approval_status .devide-box .right-box .contents-list .contents-box .side-box{
    flex:0.2;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.approval_status .devide-box .right-box .contents-list .contents-box .side-box .txt-box{
    display:flex;
    justify-content: center;
    align-items: center;
    width:40px;
    height:80px;
    background-color:#DCEAF7;
    border-radius:5px;
}

.approval_status .devide-box .right-box .contents-list .contents-box .side-box .txt-box span{
    display:block;
    height:100%;
    width:20px;
    font-size:15px;
    padding:10px 0 10px 4px;
    color:#fff;
}

.approval_status .devide-box .right-box .contents-list .contents-box .side-box button.opt{
    width:40px;
    height:40px;
    margin-top:5px;
    background: url(/images/icon_opt_black.png) no-repeat center;
    background-size: 100% 100%;
    border:2px solid #000;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box button{
    width:200px;
    height:15px;
    font-size:11px;
    padding:0px;
    border-radius:0px;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box button.up{
    margin-bottom:2px;
    border-start-start-radius:20px;
    border-start-end-radius:20px;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box button.down{
    margin-top:2px;
    border-end-start-radius:20px;
    border-end-end-radius:20px;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box button.orange{
    background-color:#FBE5D6;
    border-color:#FBE5D6;
}

.approval_status .devide-box .right-box .contents-list .contents-box .side-box .txt-box button{
    width:100%;
    height:100%;
    padding:21px 0;
    font-size:28px;
    background-color:#FBE5D6;
    border-color:#FBE5D6;
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box button.orange:hover,
.approval_status .devide-box .right-box .contents-list .contents-box .side-box .txt-box button:hover{
    background-color:rgba(255,187,0,0.5);
}

.approval_status .devide-box .right-box .contents-list .contents-box .main-box button.orange:active,
.approval_status .devide-box .right-box .contents-list .contents-box .side-box .txt-box button:active{
    background-color:#FFBB00;
}

.approval_status .devide-box .table-container{
    z-index: 1;
    position: relative;
}

.approval_status .devide-box .table-container span.tit{
    font-size:22px;
    font-weight:bold;
}

.approval_status .devide-box .table-container .table-box{
    margin-top:10px;
}

.approval_status .devide-box .table-container .table-box tbody td{
    cursor:pointer;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list{
    width:100%;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul{
    display:flex;
    width: 100%;
    padding:0 10px;
    justify-content: center;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li{
    display:flex;
    width: auto;
    height: 33px;
    justify-content: end;
    padding: 0;
    align-items: center;
    border:0px;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li:nth-child(n+2){
    flex:1;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li:first-child{
    justify-content: start;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li .circle{
    width:25px;
    height:25px;
    padding:0;
    background-color:rgba(146,208,80,0.5);
    border-radius:20px;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li.on .circle{
    background: url(/images/icon_mark_w.png) no-repeat center;
    background-size: 80% 80%;
    background-color:#92D050;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li.off .circle{
    background: url(/images/icon_close_w.png) no-repeat center;
    background-size: 60% 60%;
    background-color:#FF4141;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li .line{
    width:calc(100% - 25px);
    height:4px;
    background-color:rgba(146,208,80,0.3);
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li:last-child .circle{
    background-color:#DCEAF7;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li.on:last-child .circle{
    width:30px;
    height:30px;
    background: url(/images/icon_mark_w.png) no-repeat center;
    background-size: 80% 80%;
    background-color:#001E5E;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li.off:last-child .circle{
    width:30px;
    height:30px;
    background: url(/images/icon_close_w.png) no-repeat center;
    background-size: 60% 60%;
    background-color:#FF4141;
}

.approval_status .devide-box .table-container .table-box tbody td .process-list ul li.on:last-child .line{
    width:calc(100% - 30px);
}

.approval_status .devide-box .table-container .table-box tbody td .icon-box{
    width:100%;
    display: flex;
    justify-content: center;
}

.approval_status .devide-box .table-container .table-box tbody td i.icon-attached-file{
    display:block;
    width:30px;
    height:30px;
    background: url(/images/icon_attached_file.png) no-repeat center;
    background-size: 100% 100%;
}

.approval_status .devide-box .right-box.pd{
    padding-left:20px;
}

.approval_status .devide-box .right-box .tit{
    font-size: 22px;
    font-weight: 500;
}

.approval_status .devide-box .right-box .comment-list{
    height:calc(100% - 95px);
    /*background-color:#FAFAFA;*/
    /*border-radius:10px;*/
    overflow-y: auto;
    /*background-color: #fff;*/
    /*border: 1px solid #D5D5D5;*/
    z-index: 1;
    /*position: relative;*/
    position: absolute;
    width: calc(100% - 80px);
    left: 40px;
    padding: 2px 10px
}

.approval_status .devide-box .right-box .comment-list::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
    height: 8px;
}

.approval_status .devide-box .right-box .comment-list::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #6D87B9; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.approval_status .devide-box .right-box .comment-list::-webkit-scrollbar-track {
    background: rgba(109, 135, 185, .1);  /*스크롤바 뒷 배경 색상*/
}


.approval_status .devide-box .right-box .comment-list ul li{
    height:170px;
    padding:10px;
    /*border-bottom:1px solid #BDBDBD;*/
    cursor:pointer;
    background-color: #fff;
    box-shadow: 0 0 5px 2px #BDBDBD;
    border-radius: 5px;
}

.approval_status .devide-box .right-box .comment-list ul li + li{
    margin-top:10px;
}

.approval_status .devide-box .right-box .comment-list ul li:hover{
    background:#FAFAFA;
}

.approval_status .devide-box .right-box .comment-list ul li:active{
    background:#EAEAEA;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box{
    display:flex;
    width:100%;
    height:120px;  
    justify-content: center;
    align-items: center;
    border-bottom: 1px dotted #BDBDBD;
    position: relative;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .img-box{
    /*width:80px;
    height:80px;*/
    width:90px;
    height:90px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50px;
    margin-left:20px;
    margin-right:20px;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .img-box img{
    width:auto;
    height:90px;
    border-radius:50px;
    object-fit: cover; /* 크기 비율 유지, 넘치는 부분 잘림 */
    overflow: hidden; /* 넘치는 부분 숨김 */
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .contents-box{
    flex:1;
    height:100%;
    padding: 10px 0;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .contents-box .name-box span{
    font-size: 16px;
    font-weight:bold;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .contents-box .name-box.on span{
    color:#92D050;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .contents-box .name-box.off span{
    color:#FF4141;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .contents-box .comment{
    max-width:280px;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .contents-box .comment span{
    font-size: 14px;
    line-height: 1.5; /* 줄 간격 */
    display: -webkit-box; /* Flexbox 컨테이너 */
    -webkit-line-clamp: 3; /* 최대 2줄까지 표시 */
    -webkit-box-orient: vertical; /* 수직 방향 설정 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 말줄임표 추가 */
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .time-box{
    width: 100px;
    height: 100%;
    padding-top: 10px;
    padding-right: 10px;
    display: flex;
    align-items: start;
    justify-content: end;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .time-box i.icon-time{
    display:block;
    width:20px;
    height:20px;
    background: url(/images/icon_time.png) no-repeat center;
    background-size: 100% 100%;
    margin-right:5px;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .time-box span{
    font-size:14px;
    font-weight:bold;
}

.approval_status .devide-box .right-box .comment-list ul li .sub-box{
    padding:0 0px;
    display:flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
    margin-top:10px;
}

.approval_status .devide-box .right-box .comment-list ul li .sub-box .writer{
    display:flex;
    max-width:35%;
    border-right:1px solid #8C8C8C;
    height: 22px;
    padding-right: 5px;
}

.approval_status .devide-box .right-box .comment-list ul li .sub-box .writer i.icon{
    display:block;
    width:25px;
    height:20px;
    background: url(/images/icon_doc_write.png) no-repeat center;
    background-size: 100% 100%;
    margin-right:5px;
}

.approval_status .devide-box .right-box .comment-list ul li .sub-box .doc-tit{
    max-width:65%;
}

.approval_status .devide-box .right-box .comment-list ul li .sub-box span{
    display:block;
    width:100%;
    font-size:15px;
    color:#8C8C8C;
    /*color:#001E5E;*/
    text-align:end;
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    width:100%;
}

.approval_status .devide-box .right-box .comment-list ul li .sub-box .writer span{
    text-align:start;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .tag-box{
    position: absolute;
    top: -10px;
    left: -5px;
    width: 50px;
    height: 30px;
    border-end-start-radius: 10px;
    border-end-end-radius: 10px;
    text-align: center;
    padding-top:5px;   
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .tag-box.on{
    background-color: rgba(53, 206, 160, 0.2);
}
.approval_status .devide-box .right-box .comment-list ul li .comment-box .tag-box.on span{
    color: #35CEA0;
}

.approval_status .devide-box .right-box .comment-list ul li .comment-box .tag-box.off{
    background-color: rgba(255, 65, 65, 0.2);
}
.approval_status .devide-box .right-box .comment-list ul li .comment-box .tag-box.off span{
    color: #FF4141;
}

/*
결재현황 css 끝
*/