@charset "UTF-8";

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-Black.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-Black.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-ExtraBold.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-ExtraBold.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-Bold.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-Bold.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-SemiBold.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-SemiBold.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-Medium.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-Medium.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-Regular.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-Regular.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-Light.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-Light.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-ExtraLight.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-ExtraLight.subset.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../font/Pretendard-1.3.9/web/static/woff2-subset/Pretendard-Thin.subset.woff2) format('woff2'), url(../font/Pretendard-1.3.9/web/static/woff-subset/Pretendard-Thin.subset.woff) format('woff');
}



@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Thin.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.ttf') format('truetype');
}



html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
textarea,
input[type="text"],
select {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: "Pretendard","AppleSDGothicNeo";
  color: #495057;
  vertical-align: baseline;
  /* a안 img가 들어갈 때 a를 위로 정렬시켜 여백을 없앨 때 사용 */
}




html .page,
body .page,
div.page,
.page span,
.page applet,
.page object,
.page iframe,
/*.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6,*/
.page p,
.page blockquote,
.page pre,
.page a,
.page abbr,
.page acronym,
.page address,
.page big,
.page cite,
.page code,
.page del,
.page dfn,
.page em,
.page img,
.page ins,
.page kbd,
.page q,
.page s,
.page samp,
.page strike,
.page strong,
.page sub,
.page sup,
.page tt,
.page var,
.page b,
.page u,
.page i,
.page center,
.page dl,
.page dt,
.page dd,
.page ol,
.page ul,
.page li,
.page fieldset,
.page form,
.page label,
.page legend,
.page table,
.page caption,
.page tbody,
.page tfoot,
.page thead,
.page tr,
/*.page th,*/
.page td,
.page article,
.page aside,
.page canvas,
.page details,
.page embed,
.page figure,
.page figcaption,
.page footer,
.page header,
.page hgroup,
.page menu,
.page nav,
.page output,
.page ruby,
.page section,
.page summary,
.page time,
.page mark,
.page audio,
.page video,
.page textarea,
.page input[type="text"],
.page select, 

.popup span,
.popup applet,
.popup object,
.popup iframe,
/*.popup h1,
.popup h2,
.popup h3,
.popup h4,
.popup h5,
.popup h6,*/
.popup p,
.popup blockquote,
.popup pre,
.popup a,
.popup abbr,
.popup acronym,
.popup address,
.popup big,
.popup cite,
.popup code,
.popup del,
.popup dfn,
.popup em,
.popup img,
.popup ins,
.popup kbd,
.popup q,
.popup s,
.popup samp,
.popup strike,
.popup strong,
.popup sub,
.popup sup,
.popup tt,
.popup var,
.popup b,
.popup u,
.popup i,
.popup center,
.popup dl,
.popup dt,
.popup dd,
.popup ol,
.popup ul,
.popup li,
.popup fieldset,
.popup form,
.popup label,
.popup legend,
.popup table,
.popup caption,
.popup tbody,
.popup tfoot,
.popup thead,
.popup tr,
/*.popup th,*/
.popup td,
.popup article,
.popup aside,
.popup canvas,
.popup details,
.popup embed,
.popup figure,
.popup figcaption,
.popup footer,
.popup header,
.popup hgroup,
.popup menu,
.popup nav,
.popup output,
.popup ruby,
.popup section,
.popup summary,
.popup time,
.popup mark,
.popup audio,
.popup video,
.popup textarea,
.popup input[type="text"],
.popup select{
    font-family: "Pretendard","AppleSDGothicNeo";
    /*font-weight: bold;*/
  /* a안 img가 들어갈 때 a를 위로 정렬시켜 여백을 없앨 때 사용 */
}


/*
    공통 css 시작
*/

.page{
    width: 100%;
    /*padding: 10px 20px 0px 85px;*/
}

input[type='checkbox'], input[type='radio']{
    width:18px;
    height:18px;
}

input[type='checkbox']:checked{
    background-color: #001E5E;
    border-color : #001E5E;
}

input[type='radio']:checked{
    background-color: #fff;
    border-color : #001E5E;
}

input[type='text']{
    border:1px solid #cfd5e2;
    padding:8px;
}

ul li{
    list-style: none;
}



a,span{
    text-decoration:none;
}

table{
    table-layout: fixed;
    width: 100%;
}

.page.work-mgt{
    width:100%;
    /*height: 100%;*/
    position: relative;
    overflow-x: hidden;
}

.page.work-mgt .devide-box{
    display: flex;
    margin-top:5px;
    height: calc(100vh - 280px);
    max-width: 100%;
    overflow-x: hidden;
}

.page.work-mgt .devide-box .left-box{
    flex:1;
    max-width: 100%;
    overflow-x: auto;
}

.page.work-mgt .devide-box .right-box{
    flex:0.6;
    margin-left: 10px;
    border-left: 1px solid #B5B5B5;
    max-width: 40%;
    overflow-x: auto;
}

.table-container table{
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    max-width: 100%;
}

.table-container .table-box{
    height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}
/*
.table-container .table-box{
    height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
}
*/


.table-container .table-box::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
    height: 16px;
}

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

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

.table-container table thead tr th{
    /*background-color:#DCEAF7;*/
    background-color:#0A1456;
    border-width:1px;
    border-top:1px solid #6D87B9;
    border-bottom:1px solid #6D87B9;
    height: 35px;
    padding: 2px;
    font-size : 13px;
    font-weight:500;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 3;
    /*padding-top: 10px;*/
    cursor: pointer;
    vertical-align : middle;
    /*font-weight: bold;*/
    color:#fff;
    
}

.table-container table thead tr th.hide,
.table-container table tbody tr td.hide{
    /*visibility: hidden; 자리는 잡아주면서 없어지는 것*/ 
    display: none;
}

.table-container table thead tr th.over{
    font-size:10px;padding-top:0px;padding-top: 0px;position: relative;
}

.table-container table thead tr th.over span{
    position: absolute; margin-left: -19px;margin-top: 6px;
}

.table-container table tbody tr td{
    font-size : 13px;
    padding: 1px 2px 1px 2px;
    /*padding: 5px 2px;*/
    height: 40px;
    width: 80px;
    text-align: center;
    /*border-bottom: 1px solid #EAEAEA;*/
    border-bottom: 1px solid #d1cece;
    vertical-align: middle;
    /*position: relative;*/
}

/* work_list 테이블 행 호버 애니메이션 */
/*
.table-container table tbody tr {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    border-top: 1px solid transparent;
}

.table-container table tbody tr:hover {
    background-color: rgba(187, 219, 249, 0.1);
    border-top: 1px solid #35CEA0;
}

 선택된 행에만 위로 올라오는 효과 
.table-container table tbody tr.on {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #35CEA0;
}
*/


.table-container table tbody tr td.td-hidden{
    display:none;
}

.table-container table tbody tr td.link{
    background-color:#002060
    /*
    background-color:#e97132
    background-color: rgba(55, 82, 134, 0.2);*/
}

.table-container table tbody tr td input.cs{
    
    font-size: 13px;
    font-weight: bold;
    padding:4px
}

.table-container table tbody tr td.outsource_on{
    background-color:#e97132
}

.table-container table tbody tr td.outsource_importer_on{
    background-color:#009fe961
}
.table-container table tbody tr td.outsource_importer_on .cs{
    font-size: 13px;
    font-weight: bold;
    padding:4px;
    /*color:#eff6ff;*/
    color:#064eac;
}



.table-container table tbody tr td.link{
    background-color:#002060
}

.table-container table tbody tr.on td.on{
    background-color: rgba(55, 82, 134, 0.2);    
}

.table-container table tbody tr td .devide{
    display: flex;
    align-items: center;
}

.table-container table tbody tr td .devide.left .left{
    flex:0.3;
}

.table-container table tbody tr td .devide.left .right{
    flex:0.7;
}


.table-container table tbody tr td.w30{
    width:30px;
}


.table-container table tbody tr td.rowspan{
    padding-top:10px;
}

/*.table-container table tbody tr.n-bor td:nth-child(n+3){
    border-bottom:0px;
}*/

.table-container table tbody tr.n-bor td{
    border-bottom:0px;
}

.table-container table tbody tr td span.box{
    padding: 10px;
    border: 0px;
    border-radius: 5px;
    font-weight: bold;
    font-size:13px;
}

.table-container table tbody tr td span.box.green{
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
}

.table-container table tbody tr td span.box.blue{
    background-color: rgba(202, 238, 251, 0.5);
    color: #375286;
}

.table-container table tbody tr td .sub-info-box{
    height:20px;
}


.table-container table tbody tr td input:not([type="radio"],[type="checkbox"]){
    margin-bottom: 0px;
    font-size: 13px;
    height:35px;
    text-align: center;
    border: none;
    background-color: transparent;
    /*padding: 5px;*/
}

.table-container table tbody tr td select{
    height:35px;
    margin-bottom:0px;
    display: flex;
    width:100%;
    padding: 5px 0px 5px 10px;
    font-size: 13px;
    background-position: center right .2rem;
    background-size: 12px;
}

.table-container table tbody tr td select.green{
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
    border:0px;
}

.table-container table tbody tr td select.blue{
    background-color: rgba(202, 238, 251, 0.5);
    color: #375286;
    border:0px;
}

.table-container table tbody tr td select.red{
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
    border:0px;
}

.table-container table tbody tr td select option{
    font-size:13px;
}

.table-container table tbody tr td select option.red{
    color:red;
}

.table-container table tbody tr td select option.black{
    color:black;
}

.table-container table tbody tr td.sel-input:has(.sub-info-box){
     vertical-align: middle;
}

.table-container table tbody tr td.sel-input:has(.sub-info-box) select{
    height:25px;
}

.table-container table tbody tr td .sub-info-box{
    margin-top:2px;
}

.table-container table tbody tr td .sub-info-box input{
    height:25px;
    font-size : 12px;
    background-color: #fff;
}


.table-container table tbody tr td span{
    display: block;
    font-size:13px;
}

.table-container table tbody tr td span.blue{
    background-color: rgba(202, 238, 251, 0.5);
    color: #375286;
    border:0px;
    padding:8px 11px 5px 11px;
    border-radius:5px;
    font-weight: bold;
}

.table-container table tbody tr td span.green{
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
    border:0px;
    padding:8px 11px 5px 11px;
    border-radius:5px;
    font-weight: bold;
}

.table-container table tbody tr td span.red{
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
    border:0px;
    padding:8px 11px 5px 11px;
    border-radius:5px;
    font-weight: bold;
}

.table-container table tbody tr td span.gray{
    background-color: rgba(234, 234, 234, 0.2);
    color: #8C8C8C;
    border:0px;
    padding:8px 11px 5px 11px;
    border-radius:5px;
}

.table-container table tbody tr td span.dark_gray{
    background-color: rgba(109, 107, 107, 0.2);
    color: #000000;
    border:0px;
    padding:8px 11px 5px 11px;
    border-radius:5px;
}


.table-container table tbody tr td .opt-box{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    width: 100%;
}

.table-container table tbody tr td .opt-box.w-wide{
    width: 190px;
}


.table-container table tbody tr td .opt-box input.w70per{
    width: 70%;
}

.table-container table tbody tr td .opt-box input{
    flex:0.8;
}

.table-container table tbody tr td .opt-box a.add{
    width:30px;
    height:30px;
    background: url(/images/icon_add.png) no-repeat center;
    background-size: 25px 25px;
    cursor:pointer;
}

.table-container table tbody tr td .opt-box a.pen{
    width:20px;
    height:20px;
    background: url(/images/icon_edit_balck.png) no-repeat center;
    background-size: 10px 10px;
    background-color : #BBDBF9;
    cursor:pointer;
    border-radius: 20px;
}

.table-container table tbody tr td .opt-box a.dispatch-btn{
    width:20px;
    height:20px;
    background: url(/images/icon_delivery.png) no-repeat center;
    background-color : #BBDBF9;
    background-size: 15px 15px;
    cursor:pointer;
    border-radius: 20px;
}
.table-container table tbody tr td .opt-box a.dispatch-btn_on{
    width:20px;
    height:20px;
    background: url(/images/icon_delivery.png) no-repeat center;
    background-color : rgb(146, 208, 80);
    background-size: 15px 15px;
    cursor:pointer;
    border-radius: 20px;
}


.table-container table tbody tr td .opt-box a.add span{
    margin-bottom: 3px;
    font-size:18px;
}

.table-container table tbody tr td .opt-box .unipass_flow_btn{
    background: #1847ac;
    color: #fff;
    border-color: #001E5E;
    border-radius: 5px;
    /* font-weight: 500; */
    font-size:12px;
    width: 35px;
    height:24px;
    padding: 0px;
    background: url('/images/work_list_unipass_flow_state_btn.png') no-repeat center;  background-size: 45px 35px;
    
    
}
.table-container table tbody tr td .opt-box .unipass_flow_btn:hover{
    border-color: #efefef;
    color: #001E5E;

}

.table-container table tbody tr td .opt-box .unipass_flow_btn:active{
    background:#001E5E;
    color:  #fff;
    background: url('/images/work_list_unipass_flow_state_btn_click.png') no-repeat center;  background-size: 45px 35px;

}




.table-container table tbody tr td .opt-box a.w70per{
    width: 70%;
}


.table-container table tbody tr td .opt-box a.vd_comment{
    width:20px;
    height:20px;
    background: url(/images/icon_vd_comment.png) no-repeat center;
    /*background-color : #BBDBF9;*/
    background-size: 20px 20px;
    cursor:pointer;
    /*border-radius: 20px;*/
}

.table-container table tbody tr td .opt-box a.vd_comment.green{

    background: url(/images/icon_vd_comment_green.png) no-repeat center;
    background-size: 20px 20px;
}
.table-container table tbody tr td .opt-box a.vd_comment.orange{

    background: url(/images/icon_vd_comment_orange.png) no-repeat center;
    background-size: 20px 20px;
}


.table-container table tbody tr td a.btn{
    width: auto;
    border: 1px solid #001E5E;
    padding: 4px 10px 1px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #001E5E;
}


.table-container table tbody tr td a.btn:active{
    background-color: #001E5E;
    color: #fff;
}

.table-container table tbody tr.on{
    background-color:rgba(187, 219, 249, 0.5);
}

.table-container table tbody tr.sec_on{
    background-color:rgba(187, 219, 249, 0.5);
}
.table-container table tbody tr.sec_on td:not(:first-child):not(:nth-child(2)){
    background-color:rgba(187, 219, 249, 0.5);
}

.table-container table tbody tr.all_on td{
    background-color:rgba(187, 219, 249, 0.5);
}

/*
.table-container table tbody tr.on td{
    background-color:rgba(187, 219, 249, 0.5);
}*/
.table-container table tbody tr.on td:not(:first-child){
    background-color:rgba(187, 219, 249, 0.5);
}

/* 2024-06-07 추가*/
.table-container table tbody tr.parent_on td{
    background-color:rgba(56, 95, 132, 0.5);
}

.table-container table tbody tr td .opt-box details{
    margin-bottom:0px;
    padding-bottom: 0px;
    border-bottom: 0px;
    border: none;
    width: 100%;
}


.table-container table tbody tr td .opt-box.w-wide details{
    margin-left: 10px;
}

.table-container table tbody tr td .opt-box details summary{
    margin-bottom:0px;
    height:35px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    /*width: 70px;*/
    width: 100%;
}

.table-container table tbody tr td .opt-box details summary span{
    width: 80%;
}

.table-container table tbody tr td .opt-box details summary::after{
    background-size:12px;
    background-position: center right .2rem;
}

.table-container table tbody tr td .opt-box details[open] summary{
    margin-bottom:0px;
}

.table-container table tbody tr td .opt-box details summary.green{
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
}

.table-container table tbody tr td .opt-box details summary.green span{
    color: #35CEA0;
}


.table-container table tbody tr td .opt-box details summary.blue{
    background-color: rgba(202, 238, 251, 0.5);
    color: #375286;
}

.table-container table tbody tr td .opt-box details summary.blue span{
    color: #375286;
}

.table-container table tbody tr td .opt-box details summary.red{
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
}

.table-container table tbody tr td .opt-box details summary.red span{
    color: #FF4141;
}


.table-container table tbody tr td .opt-box details ul{
    /*position: absolute;*/
    padding-left: 0px;
    margin-top: 0px;
    box-shadow: 0px 2px 10px 2px gray;
    background-color: #fff;
    z-index: 2;
    padding-bottom : 15px;
}

.table-container table tbody tr td .opt-box details ul li{
    height : 20px;
    padding:5px;
    margin-bottom: 5px;
    margin-top:0px;
}


.table-container table tbody tr td .opt-box details ul li + li{
    margin-top: 10px;
}

.table-container table tbody tr td .opt-box details ul li:hover{
    cursor:pointer;
}

.table-container table tbody tr td .opt-box details ul li a{
    
    margin: 0;
}


.table-container table tbody tr td .opt-box details ul li.green a{
    background-color: rgba(53, 206, 160, 0.2);
    color: #35CEA0;
    border:0px;
    border-radius: 5px;
}

.table-container table tbody tr td .opt-box details ul li.blue a{
    background-color: rgba(202, 238, 251, 0.5);
    color: #375286;
    border:0px;
    border-radius: 5px;
}

.table-container table tbody tr td .opt-box details ul li.red a{
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
    border:0px;
    border-radius: 5px;
}

.table-container table tbody tr td .opt-box details ul li a img{
    width:20px;
}



.table-container .bord-bottom-box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.table-container .bord-bottom-box button{
    background: #001E5E;
    color: #fff;
    border-color: #001E5E;
    /* font-weight: 500; */
    font-size:14px;
    width: 100px;
    height:38px;
    padding: 10px;
    margin-top:18px;
}

.table-container .bord-bottom-box button:active{
    background: #fff;
    color: #001E5E;
}

.table-container .bord-bottom-box .sub-list{
    display:flex;
}

.table-container .bord-bottom-box .sum-box{
    flex:0.5;
    margin-top:15px;
}

.table-container .bord-bottom-box .sum-box + .sum-box{
    margin-right: 10px;
    margin-left: 10px;
}

.table-container .bord-bottom-box .sum-box .table-box{
    height: auto;
}

.table-container .bord-bottom-box .sum-box .table-box table{
    border: 1px solid #B5B5B5;
}

.table-container .bord-bottom-box .sum-box .table-box table th,
.table-container .bord-bottom-box .sum-box .table-box table td{
    height:30px;
    font-size:13px;
}

.table-container .bord-bottom-box .sum-box .table-box table td{
    border-right: 1px solid #B5B5B5;
    border-bottom: 1px solid #B5B5B5;
}

.table-container .bord-bottom-box .sum-box .table-box table td:last-child{
    border-right: none;
}


.table-container .bord-btn-list{
    display: flex;
    justify-content: end;
    padding : 20px 10px;
    align-items: self-start;
}

.table-container .bord-btn-list ul li{
    padding: 2px;
    font-size: 14px;
    font-weight:bold;
    height:30px;
    width:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #BBDBF9;
    color: #001E5E;
    border-radius: 10px;
}


.table-container .bord-btn-list ul li:hover{
    cursor: pointer;
    background-color: rgba(187, 219, 249, 0.8); 
}

.table-container .bord-btn-list ul li.on{
    background-color: rgba(187, 219, 249, 0.8); 
}

.table-container .bord-btn-list ul li.prev{
    border-color: #EFEFEF;
    background: url(/images/left-arrow-b.png) no-repeat center;
    background-color: #EFEFEF;
    background-size: 15px 15px;
}

.table-container .bord-btn-list ul li.prev:hover{
    background-color: rgba(187, 219, 249, 1); 
}

.table-container .bord-btn-list ul li.next{
    
    border-color: #EFEFEF;
    background: url(/images/right-arrow-b.png) no-repeat center;
    background-color: #EFEFEF;
    background-size: 15px 15px;
}



.table-container .bord-btn-list ul li.next:hover{
    background-color: rgba(187, 219, 249, 1); 
    border-color: rgba(187, 219, 249, 1); 
}




.table-container .bord-btn-list ul li + li{
    margin-left: 10px;
}

.table-container .bord-btn-list ul li span{
    font-size:15px;
    margin-top: 4px;
}

.table-container .bord-btn-list ul li.prev_double{
    border-color: #EFEFEF;
    background: url(/images/left-arrow-b-double.png) no-repeat center;
    background-color: #EFEFEF;
    background-size: 15px 15px;
}

.table-container .bord-btn-list ul li.prev_double:hover{
    background-color: rgba(187, 219, 249, 1); 
}


.table-container .bord-btn-list ul li.next_double{
    
    border-color: #EFEFEF;
    background: url(/images/right-arrow-b-double.png) no-repeat center;
    background-color: #EFEFEF;
    background-size: 15px 15px;
}

.table-container .bord-btn-list ul li.next_double:hover{
    background-color: rgba(187, 219, 249, 1); 
    border-color: rgba(187, 219, 249, 1); 
}


.table-container .bord-btn-list ul li:active{
    background-color: #001E5E;
}

.table-container .bord-btn-list ul li:active span{
    color:#fff;
}

.table-container .bord-btn-list ul li.prev:active{
    background: url(/images/right-arrow-w.png) no-repeat center;
    transform: rotate(180deg);
    background-size: 15px 15px;
    background-color: #001E5E;
}

.table-container .bord-btn-list ul li.next:active{
    background: url(/images/right-arrow-w.png) no-repeat center;
    background-size: 15px 15px;
    background-color: #001E5E;
}

.table-container .bord-btn-list ul li.next_double:active{
    background: url(/images/right-arrow-w-double.png) no-repeat center;
    background-size: 15px 15px;
    background-color: #001E5E;
}

.table-container .bord-btn-list ul li.prev_double:active{
    background: url(/images/left-arrow-w-double.png) no-repeat center;
    background-size: 15px 15px;
    background-color: #001E5E;
}

/*.table-container .bord-btn-list ul li span{
    padding-top: 5px;
}*/

/* classe das cores utilizadas na movimentação */
.table-container table td.hover {background:rgba(53, 206, 160, 0.2)}
.table-container table th.hover {background:#35CEA0}
.table-container table td.selecionado {background:rgba(187, 219, 249, 0.5)}

.table-container table th.selecionado {background:rgba(187, 219, 249)}


/*
    work_list 페이지 css 끝
*/


/*
    페이지 나누기 (체크시트에서 사용) 시작
*/


.page .devide-box{

    width:100%;
    display:flex;
    background-color: #fff;
}

.page .devide-box .cs-box{
    /*width:75%;*/
    padding-right: 10px;
    border-right: 1px solid;
}

.page .devide-box .etc-box{
    width:25%;
    padding-left: 15px;
}

.page .pageHeader_box{
    display:flex;
    align-items: center;
    position:absolute;
    overflow: hidden;
    width:90%;
}

.page .pageHeader_box.right{
    right: 0;
    margin-top: 5px;
    justify-content: end;
}

.page .pageHeader_box .btn-box{
    width: 30px;
    height: 30px;
}

.page .pageHeader_box .btn-box a.close-btn{
    display: block;
    width:30px;
    height:30px;
    background: url(/images/icon_cal_arrow_left.png) no-repeat center;
    background-size: 100% 100%;
    cursor:pointer;
}   

.page .pageHeader_box .btn-box a.close-btn.rev{
    transform:rotate(180deg);
}

/*
    페이지 나누기 (체크시트에서 사용) 끝
*/


/*
    피코 css 수정 시작
*/
:root{
    --pico-transition:none;
}

/*
    피코 css 수정 끝
*/

/*
    StateSelectBox css시작
*/

.component.select_box{
    position: relative;
    width:100%;
    height:35px;
    border-radius: 5px;
    cursor: pointer;
    background: url(/images/down-arrow.png) no-repeat center;
    background-color: #FBFCFC;
    background-size: 6px 6px;
    background-position : right 10px top 15px;;
}


.component.select_box .area-custom-select{
    width: 100%;
    height: 100%;
}

.component.select_box .area-custom-select .custom-select.selected{
    width: 100%;
    height: 100%;
    padding: 10px 20px 10px 10px;
}

.component.select_box .custom-select .custom-select-text{
    display: inline-flex;
}

.component.select_box.green{
    background-color: rgba(53, 206, 160, 0.2);
    /*background-color: #e2f0d9*/
    
}
.component.select_box.green .custom-select .custom-select-text{
    /*color:#79b251;*/
    color:#35CEA0; 
    font-weight: bold;
}

.component.select_box.blue{
    /*background-color: #bdd7ee;*/
    background-color:rgba(202, 238, 251, 0.5);
    
}
.component.select_box.blue .custom-select .custom-select-text{
    color: #23427b;
    font-weight: bold;
}

.component.select_box.red{
    background-color: rgba(255, 65, 65, 0.2);
}
.component.select_box.red .custom-select .custom-select-text{
    color: #FF4141;
    font-weight: bold;
}


.component.select_box.orange{
    background-color: #fbe5d6;
    
}
.component.select_box.orange .custom-select .custom-select-text{
    color: #e9660d;
    font-weight: bold;
}


.component.select_box.darkgray{
    background-color: #d9dadc
    
}
.component.select_box.darkgray .custom-select .custom-select-text{
    color: #000000;
    font-weight: bold;
}

.component.select_box .custom-select-list{
    position: absolute;
    width: 100%;
    margin-top: 5px;
    box-shadow: 0px 2px 10px 2px gray;
    background-color: #fff;
    z-index: 2;
    padding-bottom: 5px;
    
}

.component.select_box .custom-select-list li + li{
    margin-top:5px;
}

.component.select_box .custom-select-list li:first-child{
    margin-top:7px;
}



.component.select_box .custom-select-option{
    padding:0px 5px 0px 5px;
    height:28px;
    border: 0px;
   
}


.component.select_box .custom-select-option .text-box{
    width: 100%;
    height:100%;
    padding: 7px;
    border-radius: 5px;
}

.component.select_box .custom-select-option.gray .text-box{
    background-color: rgba(246, 246, 246, 1);
    color: #FBFCFC;
}

.component.select_box .custom-select-option.gray:hover,
.component.select_box .custom-select-option.gray.on{
    background-color: rgba(246, 246, 246, 1);
}

.component.select_box .custom-select-option.blue .text-box{
    /*
    background-color: #bdd7ee;
    color: #23427b;
    */
    background-color:rgba(202, 238, 251, 0.5);
    color: #23427b;
}

.component.select_box .custom-select-option.blue:hover,
.component.select_box .custom-select-option.blue.on{
    background-color:rgba(202, 238, 251, 0.5);
    
}

.component.select_box .custom-select-option.green .text-box{
    /*background-color: #e2f0d9;*/
    background-color: rgba(53, 206, 160, 0.2);
    /*color:#79b251;*/
    color:#35CEA0;
}

.component.select_box .custom-select-option.green:hover,
.component.select_box .custom-select-option.green.on{
    /*background-color: #e2f0d9*/
    background-color: rgba(53, 206, 160, 0.2);
}

.component.select_box .custom-select-option.red .text-box{
    background-color: rgba(255, 65, 65, 0.2);
    color: #FF4141;
}

.component.select_box .custom-select-option.red:hover,
.component.select_box .custom-select-option.red.on{
    background-color: rgba(255, 65, 65, 0.2);
}


.component.select_box .custom-select-option.orange .text-box{
    background-color: #fbe5d6;
    color: #e9660d
}

.component.select_box .custom-select-option.orange:hover,
.component.select_box .custom-select-option.orange.on{
    background-color: #fbe5d6;
}

.component.select_box .custom-select-option.darkgray .text-box{
    background-color: #d9dadc;
    color: #000000;
}
.component.select_box .custom-select-option.darkgray:hover,
.component.select_box .custom-select-option.darkgray.on{
    background-color: #d9dadc
}






/*
    StateSelectBox css 끝
*/


/* 공통 CSS 는 테이블과 테이블에 포함되는 셀렉트 박스 INPUT 등의 모든 틀을 뜻함. 
*/

/* 2024-07-03 테이블 헤더의 정렬 화살표 css*/
.table-container table thead tr th i{
    display:inline-block;
    width:10px;
    height:10px;
    margin-left:3px;
    position: absolute;
    margin-top:5px;
    /*background: url(/images/free-icon-base_sort.png) no-repeat center;*/
    background: url(/images/table_header/sort_up_down_arrow_w.png) no-repeat center;
    background-size: 16px 16px;

}

.table-container table thead tr th i.up{

    background: url(/images/table_header/sort_up_arrow_w.png) no-repeat center;
    background-size: 8px 8px;
    
}

.table-container table thead tr th i.down{
    background: url(/images/table_header/sort_down_arrow_w.png) no-repeat center;
    background-size: 8px 8px;
    /*transform: rotate(180deg);*/
}
/*
각페이지 하단 합계 관련 CSS
*/

.table-container .bord-bottom-box .sub-list .sum-box{
    width: 150px;
    flex: none;
}

.table-container .bord-bottom-box .sub-list .sum-box:first-child{
    margin-right:10px;
}

.table-container .bord-bottom-box .sub-list .sum-box + .sum-box{
    margin-left:5px;
}

.table-container .bord-bottom-box .sub-list .sum-box .table-box table th{
    background-color:#001E5E;
    color:#fff;
    font-weight:500;
    /*padding-top: 5px;*/
    border-color:#001E5E;
    border-start-start-radius: 5px;
    border-start-end-radius: 5px;
}

.table-container .bord-bottom-box .sub-list .sum-box .table-box table td:last-child{
    border-right:1px solid #DCEAF7;
}

.table-container .bord-bottom-box  .sub-list .sum-box .table-box table{
    border:none;
}
.table-container .bord-bottom-box .sub-list .sum-box .table-box table td{
    border:1px solid #DCEAF7;
}


/*테이블 세로 라인 테이블 헤더만*/
.table-container table thead tr th
{
    /*border-right:1px solid #c6c0c0;*/
    border-right:1px solid #c1cdcb;
}

/*테이블 세로 라인 테이블 전체
.table-container table thead tr th,
.table-container table tbody tr td{
    border-right:1px solid #f0eaea;
}
    */



        /* DO INV 등  상태 표시 스타일 */
        .state-display {
            position: relative;
            width: 100%;
            height: 35px;
            border-radius: 5px;
            cursor: default;
            background-color: #FBFCFC;
        }
    
        .state-display .area-custom-select {
            width: 100%;
            height: 100%;
        }
    
        .state-display .area-custom-select .custom-select.selected {
            width: 100%;
            height: 100%;
            padding-top: 7px;
            padding-right: 4px;
            
        }
    
        .state-display .custom-select .custom-select-text {
            display: inline-flex;
        }
    
        /* 상태별 색상 */
        .state-display.green {
            background-color: rgba(53, 206, 160, 0.2);
        }
    
        .state-display.green .custom-select .custom-select-text {
            color: #35CEA0;
            font-weight: bold;
        }
    
        .state-display.blue {
            background-color: rgba(202, 238, 251, 0.5);
        }
    
        .state-display.blue .custom-select .custom-select-text {
            color: #23427b;
            font-weight: bold;
        }
    
        .state-display.red {
            background-color: rgba(255, 65, 65, 0.2);
        }
    
        .state-display.red .custom-select .custom-select-text {
            color: #FF4141;
            font-weight: bold;
        }
    
        .state-display.orange {
            background-color: #fbe5d6;
        }
    
        .state-display.orange .custom-select .custom-select-text {
            color: #e9660d;
            font-weight: bold;
        }
    
        .state-display.darkgray {
            background-color: #d9dadc;
        }
    
        .state-display.darkgray .custom-select .custom-select-text {
            color: #000000;
            font-weight: bold;
        }
    
        .state-display.gray {
            background-color: #f5f5f5;
        }
    
        .state-display.gray .custom-select .custom-select-text {
            color: #666666;
            font-weight: bold;
        }