@charset "UTF-8";

/*CSS 변수 선언*/
:root {
	--mainLeftMenuWidth : 230px;
	--topAreaHeight : 56px;
	--footerHeight : 50px;
	--resizeBarWidth : 3px;
	--tabMenuHeight : 38px;
	--areabarHeight : 8px;
	--vAreabarWidth : 8px;
	--workTitleHeight : 29px;
	--workTitleCalcHeight : calc( var(--workTitleHeight) + 1px);
	--buttonAreaHeight : 30px;
	--reportNameAreaHeight : 30px;
	--pivotExpendTrHeight : 35px;
}

:root {
	--schollGridMargin : 0px;
	--chkAllAreaWidth : 30px;	
	--numberAreaWidth : 39px;
	--pageAreaHeight : 45px;
	--tableTrHeight : 30px;
	--rowBoxAreaHeight : 30px;
}

/*jquery ui 옵션 수정*/
.ui-widget { font-family: 'Malgun Gothic'; font-size: 12px;}
.jnkTable .ui-button {padding: .1em 1em;}

.ui-dialog .ui-dialog-titlebar-close {display: none;}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child a { color:#f00; }
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a { color:#00f; }
.ui-datepicker.ui-widget.ui-widget-content {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.ui-datepicker select.ui-datepicker-year {
    width: 55%;
    height : 24px;
}
.ui-datepicker select.ui-datepicker-month {
    width: 45%;
    height : 24px;
}

.ui-datepicker .ui-datepicker-title select {
    padding-top: 0px;
    padding-bottom: 0px;
}
 

body { font-family:'Malgun Gothic'; font-size:12px;color: #222;}

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*input style*/
input[type=text], input[type=password], select, textarea { 
  font-family:'Malgun Gothic'; 
  font-size:12px;
  color: #222;
  border-radius: 5px;
  border: solid 1px #d0d5df;
  background-color: #fff;
  padding-left: 13px;
  padding-right: 13px;
  width: calc(100% - 36px);
}
/*
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {outline: 1px solid #cd4d4e;}
*/

input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {outline: none;}

input[type=text], input[type=password], select { 
  height : 24px;
}
select { width: calc(100% - 10px); height : 28px;}
input[type=text], input[type=password] {vertical-align: middle;}
select {vertical-align: middle; }
/*체크박스 라디오버튼 라벨*/
.input_check_box {display:inline-block; vertical-align:middle;margin: 3px 3px 3px 4px;}
.chkLabel {text-overflow: ellipsis; display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: middle;line-height: normal;}
.input_radio {
  /* width:20px; 
  height:20px; 
  vertical-align:text-top;
  border: 0px;
  background : #e6e6e6; */
  display:inline-block; vertical-align:middle;
  margin: 3px 3px 0px 5px;
}
/*
.input_radio:before {
  width: 50%;
  height: 50%;
}
.input_radio:checked:before {
  background: #cd4d4e;
}
*/

.radioLabel { text-overflow: ellipsis; display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: middle; line-height: normal;}

input[type=text]:read-only, textarea:read-only, select:disabled {color:#222; background-color: #eaecf0;}
input[type=text]::placeholder, textarea::placeholder, select::placeholder {color:#aaa;}

input.center {text-align: center;} 
input.left {text-align: left;}
input.right {text-align: right;}

/*폼 입력 스타일*/
input[type=text].input-set-yy {width : 28px}
input[type=text].input-set-yymm {width : 44px}
input[type=text].input-set-date {width : 62px}
input[type=text].input-set-time {width : 30px}
.calender-icon {
  width : 16px; 
  height : 16px; 
  margin-left:2px; 
  vertical-align:middle;
  cursor:pointer;
  margin-top: -1px;
  object-fit: contain;
  border-radius: 4px;
  border: solid 1px #acb3c0;
  /*background-color: #fff;*/
  padding:5px;
  
  background-image : url('../../images/common/icon/calendar.png');
  background-repeat : no-repeat; 
  background-position-x: center;
  background-position-y: center;
  background-size: 16px;
  display: inline-block;  
}
.calender-icon:hover { border: solid 1px #353942; }

.separator_icon {
  width : 16px; 
  height : 16px; 
  vertical-align:middle;
  cursor:pointer;
  margin-top: -1px;
  object-fit: contain;
  /*background-color: #fff;*/
  padding:5px;
  
  background-image : url('../../images/common/icon/tilde.png');
  background-repeat : no-repeat; 
  background-position-x: center;
  background-position-y: center;
  background-size: 16px;
  display: inline-block;
}

.borderBox {box-sizing : border-box;}

.select_box_style {
	background-image : url(../../images/common/icon/triangle-16_down.png);
	box-sizing : border-box;
	background-repeat : no-repeat;
	background-position : right center;
	display : flex;
	align-items : center;
	background-size : 11px 11px;
	cursor:pointer;
}

._selectP {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:calc( 100% - 16px );}

.InputSearchBoxArea .inputBox {float: left;}

.search-icon {
  width : 16px; 
  height : 16px; 
  margin-left:2px; 
  margin-right:2px;
  vertical-align:middle;
  cursor:pointer;
  margin-top: -1px;
  object-fit: contain;
  border-radius: 4px;
  border: solid 1px #acb3c0;
  /*background-color: #fff;*/
  padding:5px;
  
  background-image : url('../../images/common/icon/search.png');
  background-repeat : no-repeat; 
  background-position-x: center;
  background-position-y: center;
  background-size: 16px;
  
  float : left;
}
.search-icon:hover { border: solid 1px #353942; }

.text_box_style {
	float: left;
	align-items: center;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    
    border-width: 1px;
    border-color: #acb3c0;
    border-style: solid;
    border-radius: 5px;
}

.text_box_style > div {
	width : 100%;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.InputMultiSearchBoxArea .text_box_style {cursor: pointer; padding-left: 13px;}

.DATE_SELECT, .YYMM_SELECT {position: fixed;}
.DATE_SELECT_DOUBLE, .YYMM_SELECT_DOUBLE {position: fixed; background-color: #fff;}
.DATE_SELECT_DOUBLE .dateArea, .YYMM_SELECT_DOUBLE .dateArea { display: table; }
.DATE_SELECT_DOUBLE .dateArea .dateFrom, .YYMM_SELECT_DOUBLE .dateArea .dateFrom { float: left; display: table-row;}
.DATE_SELECT_DOUBLE .dateArea .dateTo, .YYMM_SELECT_DOUBLE .dateArea .dateTo { float: left; margin-left: 5px; display: table-row;}

.DATE_SELECT_DOUBLE .dateButton, .YYMM_SELECT_DOUBLE .dateButton {width:100%; height:26px; text-align: right; background-color: #dfe1e5; border-left: 1px solid #f3f3f3;border-right: 1px solid #f3f3f3;border-bottom: 1px solid #f3f3f3;padding-top: 2px;}
.DATE_SELECT_DOUBLE .dateButton a, .YYMM_SELECT_DOUBLE .dateButton a {margin-right: 5px;}

.DATE_SELECT_DOUBLE .dateButton a.dateOk, .YYMM_SELECT_DOUBLE .dateButton a.dateOk {color: #fff;background-color: #cd4d4e;}
.DATE_SELECT_DOUBLE .dateButton a.dateOk:hover, .DATE_SELECT_DOUBLE .dateButton a.dateOk:focus, .YYMM_SELECT_DOUBLE .dateButton a.dateOk:hover, .YYMM_SELECT_DOUBLE .dateButton a.dateOk:focus {color: #fff;background-color: #efa900;}

#loginImage {width: 100vw; height: 100vh; position: fixed;top:0px; left:0px; display: none;}

#loginImage .DataLake_01login {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
}

#loginImage img.Layer-2 {
  width: 100%;
  height: 100%;
  /*object-fit: contain;*/
  object-fit: cover;
  mix-blend-mode: multiply;
  position: absolute;
}

#loginImage img.Rectangle-1 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #2f3442;
  position: absolute;
}

#loginMain {width: 1246px; height: 700px; position: relative; margin: auto; display: none;margin-top: calc( 50vh - 350px);}

#loginMain img.datalake_logo {
  width: 125px;
  height: 97px;
  margin: 110px 561px;
  object-fit: contain;
  /*background-color: #fff;*/
  position: absolute;
}

#loginMain .loginForm {
  width: 320px;
  height: 50px;
  padding: 0px 160px 0px 16x;
  border-radius: 10px;
  box-shadow: 2px 3.5px 8px 0 rgba(0, 0, 0, 0.3);
  background-color: #fff;
  position: absolute;
  border: 0px;
  font-size: 16px;
}

#loginMain input[type=text].loginInput, #loginMain input[type=password].loginInput{
  width: 250px;
  height: 40px;
  margin: 4px 0px 4px 32px;
  background-color: #fff;
  border: 0px;
  font-size: 16px;
}

#loginMain .loginInput:focus { outline: none; }

#loginMain .loginId {
  margin: 281px 463px;
  background-image : url('../../images/dashboard/login/user.png');
  background-repeat : no-repeat; 
  background-position-x: 12px;
  background-position-y: center;
}

#loginMain .loginPassword {
  margin: 343px 463px;
  background-image : url('../../images/dashboard/login/lock.png');
  background-repeat : no-repeat; 
  background-position-x: 12px;
  background-position-y: center;  
}

#loginMain div.saveId {
  height: 24px;
  margin: 410px 469px;
  font-size: 12px;
  position: absolute;
  color:#fff;
  padding-top: 5px;
  cursor: pointer;
}

#loginMain div.saveIdChk {
  width: 24px;
  height: 24px;
  margin: -5px 5px 0px 0px;
  object-fit: contain;
  border-radius: 4px;
  background-color: #fff;
  float:left;
}

#loginMain div.saveIdChk > img {
  width: 14px;
  height: 11px;
  margin : 7px 5px 6px 5px; 
  object-fit: contain;
  display : none;
}


#loginMain div.saveId > span {
  font-size: 13px;
  color : #fff;
}


#loginMain div#goLoginChk {
  width: 320px;
  height: 56px;
  margin: 470px 463px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 2px 3.5px 8px 0 rgba(0, 0, 0, 0.3);
  background-color: #cd4d4e;
  position: absolute;  
  text-align: center;
  cursor: pointer;
}

#loginMain div#goLoginChk:hover {
	background-color: #efa900;
}

#loginMain div#goLoginChk > span {
  margin : auto;
  object-fit: contain;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 56px;
  letter-spacing: -0.28px;
  text-align: center;
  color: #fff;
}

#loginMain img.logo {
  width: 99px;
  height: 17px;
  margin: 608px 574px;
  object-fit: contain;
  position: absolute;
}

#loginMain div.allRightsReserved {
  width: 201px;
  height: 11px;
  margin: 630px 523px;
  object-fit: contain;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  position: absolute;
  color: #6c7383;
}


/*메인윈도우*/
#main {margin: 0; height: 100vh; overflow: hidden; font-family: 'Malgun Gothic';font-size: 12px;}

#mainBox {width : 100%; height : 100%;}

/*제일상단 타이틀*/
#topArea {display:block; background-color: #353942; width:100%; height:var(--topAreaHeight);}
#topLogo {
  display:block; 
  float:left; 
  width: calc(var(--mainLeftMenuWidth));
  height: var(--topAreaHeight);
  background-color: #cd4d4e;
  text-align: center;
}

#topLogo img {
  width: 130px;
  height: 36px;
  margin-top: calc( ( var(--topAreaHeight) - 36px ) / 2);
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  
}

#topAlam {
  display:block; 
  float:left; 
  width: auto;
  height : 28px;
  margin-left: 20px;
  margin-top: calc( ( var(--topAreaHeight) - 28px ) / 2);
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: -0.26px;
  text-align: left;
  color: #fff;  
}
#topAlam img{
  width: 17px;
  height: 17px;
  vertical-align: middle;
}

#topAlam span{
  margin-left: 4px;
  line-height: 26px;
}

#topArea #logoutBox {
  display:block; 
  float:right; 
  height: 28px;
  margin-right : 17px;
  margin-top: calc( ( var(--topAreaHeight) - 28px ) / 2);
  border-radius: 14px;
  border: solid 1px #5a606d;
  background-color: #353942;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.24px;
  color: #79808e;
  text-align: center;
  cursor: pointer;
}
#topArea #logoutBox span {
  margin-left: 11px;
  margin-right: 11px;  
  line-height: 26px;
  vertical-align: middle;
}

#topArea #logoutBox:hover {
  border: solid 1px #fff;
  background-color: #353942;
  color: #fff;
}

#topArea #userBox {
  display:block; 
  float:right; 
  height: 28px;
  margin-right: 12px;
  margin-top: calc( ( var(--topAreaHeight) - 28px ) / 2);
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: -0.26px;
  color: #fff;
}

#topArea #userBox span {
  color: #fff;
  line-height: 13px;
  vertical-align: middle;
}

#topArea #userBox span.text1 {
  color: #efb400;
}

#topArea #userIcon {
  display:block; 
  float:right; 
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-top: calc( ( var(--topAreaHeight) - 30px ) / 2);
  border-radius: 15px;
  border: solid 0px #fff;
  background-color: #fff;
  cursor: pointer;
}

#topArea #userIcon img {
  width: 15px;
  height: 15px;
  margin-left: 7px;
  margin-top: 7px;
  line-height: 30px;
  vertical-align: middle;
  
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;  
}

#topArea #helpIcon {
  display:block; 
  float:right; 
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-top: calc( ( var(--topAreaHeight) - 30px ) / 2);
  border-radius: 15px;
  border: solid 0px #fff;
  background-color: #fff;
  cursor: pointer;
}

#topArea #helpIcon img {
  width: 30px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;  
}

/*왼쪽메뉴*/
#leftMenu {display:block; width:var(--mainLeftMenuWidth); height:calc(100% - var(--topAreaHeight)); float:left; background-color: #393f4f;}
#leftMenu #menuBar{width:100%; height: 100%; overflow: auto;}
#leftMenu #newReport{display:none;}

#leftMenu.bNewReport #menuBar, #leftMenu.bNewMeta #menuBar{height: calc(100% - 50px);}
#leftMenu.bNewReport #newReport, #leftMenu.bNewMeta #newMeta{
	display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	font-weight: bold;
	font-size: 14px;
}

#leftMenu.bNewReport #newReport{
    background-color: #cd4d4e;
}
#leftMenu.bNewReport #newReport:hover{background-color: #b94546;}

#leftMenu.bNewMeta #newMeta{
    background-color: #4e4dcd;
}
#leftMenu.bNewMeta #newMeta:hover{background-color: #4645b9;}

#leftMenu.bNewReport.bNewMeta #newReport{
    width: 50%;
    float: left;
}

#leftMenu.bNewReport.bNewMeta #newMeta{
    width: 50%;
    float: left;
}

.cd-accordion-menu {
  font-size: 12px;
  color: #fff;
  width: 100%;
  background-color: #393f4f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cd-accordion-menu a {
  color: #2a303e;
  text-decoration: none;
}

.cd-accordion-menu a, .cd-accordion-menu label {
  font-weight: bold;
}

.cd-accordion-menu, .cd-accordion-menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;	
	list-style: none;
}

.cd-accordion-menu li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;	
}

.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
  width:0px;
  height:0px;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 10px 10px 10px 24px;
  background: #393f4f;
  color: #ffffff;
  
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  
}

.cd-accordion-menu a {
  background: #2a303e;
}

.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::before {
  /* icons */
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
  padding-left:44px;
  border-bottom: 1px solid #4c5364;
}
.cd-accordion-menu label::after {
  /*Arraw Icon*/
  width: 10px;
  height: 7px;
  background-image: url(../../images/common/icon/broken_off.png);
  background-repeat: no-repeat;
  right: 16px;
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  background-image: url(../../images/common/icon/broken.png);	
}

.cd-accordion-menu label::before {
  /*Arraw Icon*/
  width: 16px;
  height: 15px;  
  background-image: url(../../images/common/icon/folder.png);
  background-repeat: no-repeat;
  left: 20px;
}

.cd-accordion-menu li.favorites > label::before {
  width: 16px;
  height: 16px;
  background-image: url(../../images/common/icon/folder_star.png);
  background-repeat: no-repeat;
  left: 20px;
}

.cd-accordion-menu li.myfolder > label::before {
  width: 16px;
  height: 16px;
  background-image: url(../../images/common/icon/folder_my.png);
  background-repeat: no-repeat;
  left: 20px;
}

.cd-accordion-menu a::before {
  /*Arraw Icon*/
  width: 16px;
  height: 16px;  
  background-image: url(../../images/common/icon/file.png);
  background-repeat: no-repeat;
  left: 20px;
}

.cd-accordion-menu a.META::before {
  background-image: url(../../images/common/icon/meta.png);
}

.cd-accordion-menu a.METAVIEW::before {
  background-image: url(../../images/common/icon/metaview.png);
} 
 

.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  padding-left: 60px; 
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #30373d;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu ul label::before,
.cd-accordion-menu ul a::before {
  left: 36px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 76px;
}
.cd-accordion-menu ul ul label::before,
.cd-accordion-menu ul ul a::before {
  left: 52px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 92px;
}
.cd-accordion-menu ul ul ul label::before,
.cd-accordion-menu ul ul ul a::before {
  left: 68px;
}
.cd-accordion-menu ul ul ul ul a {
  padding-left: 108px;
}
.cd-accordion-menu ul ul ul ul a::before {
  left: 84px;
}

.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

/*리사이즈 선택 영역*/
#resizeBar {width:var(--resizeBarWidth); height:calc(100% - var(--topAreaHeight)); cursor: w-resize; position: absolute; top: var(--topAreaHeight); left: calc(var(--mainLeftMenuWidth) - (var(--resizeBarWidth) / 2));}

/*탭메뉴영역*/
#tabMenu {
	display: block;
	width: calc(100% - var(--mainLeftMenuWidth) - 282px);
	height: var(--tabMenuHeight);
	float: left;
	background-color: #afb5ba;
	padding-right: 282px;
}

#tabMenuScroll {
	width: calc( 100% - 5px );
	padding-left: 5px;
	overflow-y: hidden;
	overflow-x: hidden;
	height: 100%;
}
#tabMenuContents {width: max-content; }
#tabMenu .topMenuButton {
  width: 160px; 
  height: calc( var(--tabMenuHeight) - 6px); 
  background-color: #dee2e7; 
  border-top-left-radius: 6px;  
  border-top-right-radius: 6px; 
  margin-top: 6px; 
  margin-right: 6px; 
  float: left; 
  display: flex; 
  align-items: center; 
  cursor :pointer;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.52px;
  color: #888; 
  font-weight: normal;
}

#tabMenu .topMenuButton.current {background-color: #fff; color : #222; cursor : default; }

#tabMenu .topMenuButton>span {
	width: 110px; 
	text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 2px; padding-right: 5px;
}

#tabMenu .topMenuButton.design>span {
	width: 121px;
	text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 14px; padding-right: 5px;
}
#tabMenu .topMenuButton div.closeArea {
	background-image: url(../../images/common/icon/close_gray.png);
	background-repeat: no-repeat; 
	background-position:center; 
	width: 16px; 
	height: 30px;
	cursor :pointer;
	background-size: 10px;
	padding-right: 7px;
}

#tabMenu .topMenuButton.current div.closeArea {
	background-image: url(../../images/common/icon/close.png);
}

#tabMenu .topMenuButton.noFav div.favArea {
	display:none
}

#tabMenu .topMenuButton.noFav div.favArea {
	display:none
}

#tabMenu .topMenuButton.noFav>span {
	margin-left: 20px;
}

#tabMenu .topMenuButton div.favArea {
	width: 16px;
    height: 30px;
    padding-left: 7px;
    
	background-image: url(../../images/common/icon/star_gray.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

#tabMenu .topMenuButton div.favArea.onFav {
	background-image: url(../../images/common/icon/star_yellow.png);
}

#tabMenuLeft, #tabMenuRight {
	background-repeat: no-repeat;
	background-position:center;
	background-size: contain;
	width: 15px;
	height: 32px;
	cursor :pointer;
	top: calc((var(--tabMenuHeight) / 2) - 13px);
	position: absolute;
	color: #888;
	background-color: #dee2e7;

	display:none;
}
#tabMenuLeft {
	background-image: url(../../images/common/icon/tabMenuLeft.png);
	left: 5px;
	border-top-left-radius: 6px;
}
#tabMenuLeft:hover {
	background-image: url(../../images/common/icon/tabMenuLeft_on.png);
	background-color: #fff;
}
#tabMenuRight {
	background-image: url(../../images/common/icon/tabMenuRight.png);
	right: 282px;
	border-top-right-radius: 6px;
}
#tabMenuRight:hover {
	background-image: url(../../images/common/icon/tabMenuRight_on.png);
	background-color: #fff;
}

#tabMenu.overflowMenu #tabMenuScroll {
	width: calc( 100% - 45px );
	padding-left: 25px;
}
#tabMenu.overflowMenu #tabMenuLeft, #tabMenu.overflowMenu #tabMenuRight {
	display : block;
}

/*컨텐츠영역*/
#content {display:block; width:calc(100% - var(--mainLeftMenuWidth)); height:calc(100% - var(--topAreaHeight) - var(--footerHeight) - var(--tabMenuHeight)); float:left;background-color: #fff;}

#content.bgImage {
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    background-size: contain;
}

#content > div {position:fixed; top:-10000px; left:-10000px; width:500px; height:500px; overflow: auto}
#content > div:has(> div.current) {position:static; top:unset; left:unset; width:100%; height:100%; }

/*화면 Footer*/
#footer {display:block; background-color: #eaecf0; width:calc(100% - var(--mainLeftMenuWidth)); height:var(--footerHeight); ; overflow: hidden;}
#allRight {
  display:block;
  float : left;
  height: 11px;
  margin-top : calc( (var(--footerHeight) - 12px ) / 2 );
  margin-left : 20px;
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #6c7383;
}

#footer img#jnklogo {
  display:block;
  width: 84px;
  height: 15px;
  float : right;
  margin-right : 19px;
  margin-top : calc( (var(--footerHeight) - 15px ) / 2 );
  object-fit: contain;
}


/*컨텐츠영역 박스*/
.jnkReport {width:100%; height:100%; min-width:1000px; min-height : 500px; background-color: #bbc6cf;}

/*보고서 기본영역정의*/
.jnkReport .workbook {width:100%; height:100%;}
.jnkReport .workbook .sheet {background-color: #ffffff; position: relative; overflow: auto;}

/*보고서 디자인영역*/
.jnkReport .subContent.designer { position: relative; overflow: hidden;}
    
.jnkReport .subContent.designer .workbookArea { width: calc(100% - 400px); height:100%; float: left; padding-top: 0px; margin: 0px 0px 0px 0px; }

.jnkReport .subContent.designer .workbookArea .workBookDesign { width: 100%; height : calc(100% - var(--workTitleCalcHeight)); float: left; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox { position: absolute; }
.jnkReport .subContent.designer .workbookArea .workBookDesign.runMode .workbook .designBox { display : none }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.bgBox { position: absolute; top: 0px; left: 0px; width: calc( 100% - 2px ); height: calc( 100% - 2px ); border: 1px solid rgba(221, 221, 221, 1);  background-color: rgba(255, 255, 255, 0); }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox.beSelect>.bgBox { width: calc( 100% - 4px ); height: calc( 100% - 4px ); border: 2px solid #aaaaff; background-color: rgba(255, 255, 255, 0.1); }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox.select>.bgBox { width: calc( 100% - 4px ); height: calc( 100% - 4px ); border: 2px solid #aaaaff; background-color: rgba(255, 255, 255, 0.1); cursor: all-scroll; }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.toollBox { position: absolute; width: 6px; height: 6px; background-color: #999999; display:none}
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox.beSelect>.toollBox { background-color: #6E6E6E; display:block; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox.select>.toollBox { background-color: #000000; display:block; }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.tlBox { top: 0px; left: 0px; cursor: nw-resize; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.tmBox { top: 0px; left: calc( 50% - 3px); cursor: n-resize; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.trBox { top: 0px; right: 0px; cursor: ne-resize; }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.mlBox { top: calc( 50% - 3px);; left: 0px; cursor: w-resize; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.mrBox { top: calc( 50% - 3px);; right: 0px; cursor: e-resize; }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.blBox { bottom: 0px; left: 0px; cursor: sw-resize; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.bmBox { bottom: 0px; left: calc( 50% - 3px); cursor: s-resize; }
.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designBox>.brBox { bottom: 0px; right: 0px; cursor: se-resize; }

.jnkReport .subContent.designer .workbookArea .workBookDesign .workbook .designSelectBox { position: absolute; border: 1px dotted #aaaaff; background-color: rgba(255, 255, 255, 0.1); }

.jnkReport .subContent.designer .workbookArea .workBookDesign.dotBox.designMode .workbook .sheet.activeSheet {
	background-image: url('../../images/dashboard/main/designer_background.png');
	background-size: 20px 20px;
	background-position-x: left;
	background-position-y: top;
	background-repeat: repeat;	
}

.jnkReport .subContent .ObjectArea {
    box-sizing: border-box;
    background-color: rgba(255,255,255,0);
}

.jnkReport .subContent .ObjectArea.gridArea, .jnkReport .subContent .ObjectArea.pivotArea {
    background-color: rgba(255,255,255,1);
    border-width: 1px;
    border-color: #dadee5;
    border-style: solid;
}

.jnkReport .subContent .ObjectArea.inputSelectArea, .jnkReport .subContent .ObjectArea.inputMultiSelectArea, .jnkReport .subContent .ObjectArea.inputPickListArea {
	border-width: 1px;
	border-color: rgb(208, 213, 223);
	border-style: solid;
	border-radius: 5px;
	padding-left: 13px;
	padding-right: 13px;
}


/*실행모드 디자인모드에 따른 상태변경*/
.jnkReport .subContent.designer.designMode .buttonBoxRun {
	display:none
}



.jnkReport .subContent.designer.runMode .designWorkbook .bRunHidden
, .jnkReport .subContent.designer.runMode .optionArea.dataSetEdit
, .jnkReport .subContent.designer.runMode .optionArea.optionEdit
, .jnkReport .subContent.designer.runMode .optionArea.areabar {
	display:none
}

.jnkReport .subContent.designer.runMode .buttonBoxDesign {
	display:none
}

.jnkReport .subContent.designer.runMode .workbookArea, .jnkReport .subContent.designer.runMode .workbookArea .workBookDesign {
	width : 100%;
	height : 100%
}


.jnkReport .subContent.designer.fullScreen {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #bbc6cf;
}

.jnkReport .subContent.designer.fullScreen > .buttonArea {
    background-color: #bbc6cf;
    right: unset;
    left: 250px;
    top: 0px;
    z-index: 90;
}

.jnkReport .subContent.designer > .buttonArea > .buttonBoxDesign > .buttonAreaResize {
    width: 8px;
    height: 28px;
    background-image: url(../../images/dashboard/design/moveLeft.png);
    display: none;
    cursor: ew-resize;
    opacity: 0.6;
    float: left;
    margin-right: 5px;
    margin-left: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.jnkReport .subContent.designer > .buttonArea > .buttonBoxDesign > .buttonAreaResize:hover {
	background-image: url(../../images/dashboard/design/moveLeft_hover.png);
}

.jnkReport .subContent.designer.fullScreen > .buttonArea > .buttonBoxDesign > .buttonAreaResize {
	display:block;
}

/* 워크북 디자이너의 옵션영역 */
.jnkReport .subContent.designer .optionArea {
	width: 384px;
    float: left;
    background-color: #cdcdcd;
    padding-top: 0px;
    margin: 0px 8px 0px 8px;
}

.jnkReport .subContent.designer .optionArea .optionWorkButton {
    width: 100%;
    height: var(--workTitleHeight);
    background-color: #fff;
    padding: 2px 0px;
}

.jnkReport .subContent.designer .optionArea .optionWork {
    width: 100%; 
    height : calc(100% - var(--workTitleCalcHeight) - var(--workTitleCalcHeight) - 4px);
}

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton {width: 20px; height: 20px; margin-top: 6px; margin-right: 1px; opacity: 0.7;}

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.minimize {background-image: url(../../images/dashboard/design/minimize.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.minimize:hover{background-image: url(../../images/dashboard/design/minimize_hover.png); opacity: 1;}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.normalize {background-image: url(../../images/dashboard/design/normalize.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.normalize:hover{background-image: url(../../images/dashboard/design/normalize_hover.png); opacity: 1;}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.maximize {background-image: url(../../images/dashboard/design/maximize.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.maximize:hover{background-image: url(../../images/dashboard/design/maximize_hover.png); opacity: 1; }

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.minimize2 {background-image: url(../../images/dashboard/design/minimize2.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.minimize2:hover{background-image: url(../../images/dashboard/design/minimize2_hover.png); opacity: 1; }
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.normalize2 {background-image: url(../../images/dashboard/design/normalize2.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.normalize2:hover{background-image: url(../../images/dashboard/design/normalize2_hover.png); opacity: 1; }
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.maximize2 {background-image: url(../../images/dashboard/design/maximize2.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.maximize2:hover{background-image: url(../../images/dashboard/design/maximize2_hover.png); opacity: 1; }

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.pin {background-image: url(../../images/dashboard/design/pin.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.pin:hover{background-image: url(../../images/dashboard/design/pin_hover.png); opacity: 1; }
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.unpin {background-image: url(../../images/dashboard/design/unpin.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.unpin:hover{background-image: url(../../images/dashboard/design/unpin_hover.png); opacity: 1; }

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.close {background-image: url(../../images/dashboard/design/close.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.close:hover{background-image: url(../../images/dashboard/design/close_hover.png); opacity: 1; }

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.delete {background-image: url(../../images/dashboard/design/delete.png);}
.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.delete:hover{background-image: url(../../images/dashboard/design/delete_hover.png); opacity: 1; }

.jnkReport .subContent.designer .optionArea .buttonBox div.iconButton.pin { display:none; }

.jnkReport .subContent.designer:not(.optionWindow) .optionArea.optionEdit {
    height:calc(70% - var(--areabarHeight))!important ;
}

.jnkReport .subContent.designer .optionArea.areabar {
    height:var(--areabarHeight);
}

.jnkReport .subContent.designer:not(.dataSetWindow) .optionArea.dataSetEdit {
    height:calc(30%)!important;
}

.jnkReport .subContent.designer .optionArea .optionAreaResize {
    width: 112px;
    height: 8px;
    background-image: url(../../images/dashboard/design/resizeHeight.png);
    display: none;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 56px);
    cursor: ns-resize;
    opacity: 0.4;
}

.jnkReport .subContent.designer .optionArea .optionAreaResize:hover {
	background-image: url(../../images/dashboard/design/resizeHeight_hover.png);
	opacity: 1;
}

/*옵션영역 최대화*/
.jnkReport .subContent.designer.maxOption:not(.optionWindow):not(.dataSetWindow) .optionArea.optionEdit {
    height:calc(100% - var(--areabarHeight) - var(--workTitleHeight) - 1px)!important;
}
.jnkReport .subContent.designer.maxOption:not(.optionWindow):not(.dataSetWindow) .optionArea.dataSetEdit {
    height:var(--workTitleHeight)!important;
}
.jnkReport .subContent.designer.maxOption:not(.optionWindow):not(.dataSetWindow) .optionArea.dataSetEdit .optionWorkButton { display:none; }
.jnkReport .subContent.designer.maxOption:not(.optionWindow):not(.dataSetWindow) .optionArea.dataSetEdit .optionWork { display:none; }

/*데이터셋영역 최대화*/
.jnkReport .subContent.designer.maxDataSet:not(.optionWindow):not(.dataSetWindow) .optionArea.optionEdit {
    height:var(--workTitleHeight)!important;
}
.jnkReport .subContent.designer.maxDataSet:not(.optionWindow):not(.dataSetWindow) .optionArea.optionEdit .optionWorkButton { display:none; }
.jnkReport .subContent.designer.maxDataSet:not(.optionWindow):not(.dataSetWindow) .optionArea.optionEdit .optionWork { display:none; }
.jnkReport .subContent.designer.maxDataSet:not(.optionWindow):not(.dataSetWindow) .optionArea.dataSetEdit {
    height:calc(100% - var(--areabarHeight) - var(--workTitleHeight))!important;
}

/*옵션영역 떼어내기*/
.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit {
    position: fixed;
    left: calc( 100vw - 415px);
    top: 125px;
    height:calc( max( var(--workTitleHeight) + var(--workTitleHeight) + 100px, 70vh - 55px - 85px ));
    border: 1px solid #aaaaff;
    z-index: 90;
    margin: 0px 0px 0px 0px;
}

.jnkReport:not(.current) .subContent.designer.optionWindow .optionArea.optionEdit {
    position: static;
}

.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit.curr { z-index: 91; }

.jnkReport .subContent.designer.optionWindow:not(.dataSetWindow) .optionArea.optionEdit {
	left: calc( max(0px, 100vw - 384px - 415px));
}

.jnkReport .subContent.designer.optionWindow .optionArea.areabar {
	display : none;
}

.jnkReport .subContent.designer.optionWindow:not(.dataSetWindow) .optionArea.dataSetEdit {
    height:100%!important;
}

.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.pin { display:block; }
.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.unpin { display:none; }
.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.minimize { display:block; }
.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.normalize { display:none; }
.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.maximize { display:none; }

.jnkReport .subContent.designer.optionWindow:not(.dataSetWindow) .optionArea.dataSetEdit .buttonBox div.iconButton.minimize2 { display:none; }
.jnkReport .subContent.designer.optionWindow:not(.dataSetWindow) .optionArea.dataSetEdit .buttonBox div.iconButton.normalize2 { display:none; }
.jnkReport .subContent.designer.optionWindow:not(.dataSetWindow) .optionArea.dataSetEdit .buttonBox div.iconButton.maximize2 { display:none; }

.jnkReport .subContent.designer.optionWindow .optionArea.optionEdit .optionAreaResize { display:block; }

.jnkReport .subContent.designer.minOption.optionWindow .optionArea.optionEdit {
    height:var(--workTitleHeight)!important;
    width : 160px;
}
.jnkReport .subContent.designer.minOption.optionWindow .optionArea.optionEdit .optionWorkButton { display:none; }
.jnkReport .subContent.designer.minOption.optionWindow .optionArea.optionEdit .optionWork { display:none; }
.jnkReport .subContent.designer.minOption.optionWindow .optionArea.optionEdit .optionAreaResize { display:none; }

.jnkReport .subContent.designer.minOption.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.minimize { display:none; }
.jnkReport .subContent.designer.minOption.optionWindow .optionArea.optionEdit .buttonBox div.iconButton.normalize { display:block; }


/*데이터셋영역 떼어내기*/
.jnkReport .subContent.designer.dataSetWindow:not(.optionWindow) .optionArea.optionEdit {
	height:100%!important;
}

.jnkReport .subContent.designer.dataSetWindow .optionArea.areabar {
	display : none;
}

.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit {
    position: fixed;
    left: calc( 100vw - 415px);
    top: calc( 70vh - 10px);
    height:calc( max( var(--workTitleHeight) + var(--workTitleHeight) + 100px, 30vh));
    border: 1px solid #aaaaff;
    z-index: 90;
    margin: 0px 0px 0px 0px;
}
.jnkReport:not(.current) .subContent.designer.dataSetWindow .optionArea.dataSetEdit {
    position: static;
}

.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit.curr { z-index: 91; }

.jnkReport .subContent.designer.dataSetWindow:not(.optionWindow) .optionArea.dataSetEdit {
	left: calc( max(0px, 100vw - 384px - 415px));
}

.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.pin { display:block; }
.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.unpin { display:none; }
.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.minimize2 { display:block; }
.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.normalize2 { display:none; }
.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.maximize2 { display:none; }

.jnkReport .subContent.designer.dataSetWindow:not(.optionWindow) .optionArea.optionEdit .buttonBox div.iconButton.minimize { display:none; }
.jnkReport .subContent.designer.dataSetWindow:not(.optionWindow) .optionArea.optionEdit .buttonBox div.iconButton.normalize { display:none; }
.jnkReport .subContent.designer.dataSetWindow:not(.optionWindow) .optionArea.optionEdit .buttonBox div.iconButton.maximize { display:none; }

.jnkReport .subContent.designer.dataSetWindow .optionArea.dataSetEdit .optionAreaResize { display:block; }

.jnkReport .subContent.designer.minDataSet.dataSetWindow .optionArea.dataSetEdit {
    height:var(--workTitleHeight)!important;
    width : 160px;
}
.jnkReport .subContent.designer.minDataSet.dataSetWindow .optionArea.dataSetEdit .optionWorkButton { display:none; }
.jnkReport .subContent.designer.minDataSet.dataSetWindow .optionArea.dataSetEdit .optionWork { display:none; }
.jnkReport .subContent.designer.minDataSet.dataSetWindow .optionArea.dataSetEdit .optionAreaResize { display:none; }

.jnkReport .subContent.designer.minDataSet.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.minimize2 { display:none; }
.jnkReport .subContent.designer.minDataSet.dataSetWindow .optionArea.dataSetEdit .buttonBox div.iconButton.normalize2 { display:block; }


.jnkReport .subContent.designer.dataSetWindow .optionArea .buttonBox div.iconButton.minimize2 {background-image: url(../../images/dashboard/design/minimize.png);}
.jnkReport .subContent.designer.dataSetWindow .optionArea .buttonBox div.iconButton.minimize2:hover{background-image: url(../../images/dashboard/design/minimize_hover.png);}
.jnkReport .subContent.designer.dataSetWindow .optionArea .buttonBox div.iconButton.normalize2 {background-image: url(../../images/dashboard/design/normalize.png);}
.jnkReport .subContent.designer.dataSetWindow .optionArea .buttonBox div.iconButton.normalize2:hover{background-image: url(../../images/dashboard/design/normalize_hover.png);}

/*옵션영역과 데이터셋영역 동시 떼어내기*/
.jnkReport .subContent.designer.optionWindow.dataSetWindow .workbookArea {
    width: calc(100%);
}

/*
.jnkReport .subContent.designer > div.buttonArea {width: 575px;}
*/

/*메타 디자이너*/
.jnkReport .subContent.designer .workbookArea.designMeta { width: calc(100% - 792px); }

.jnkReport .subContent.designer .workbookArea .metaDesign { width: 100%; height : calc(100% - var(--workTitleCalcHeight)); float: left; overflow: auto;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvasCover {width:inherit; height:inherit;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas {width:100%; height:calc(100% - 2px);background-color: #fff;position: relative; transform-origin: 0 0;}
/*.
jnkReport .subContent.designer .workbookArea .metaDesign .metaRelationCanvas {width:100%; height:calc(100% - 2px);background-color: #fff;opacity: 0;}
*/

.jnkReport .subContent.designer.metaDesigner.fullScreen > .buttonArea {
    left: 600px;
}

.jnkReport .subContent.designer.metaDesigner .optionArea .buttonBox div.iconButton.reload {background-image: url(../../images/dashboard/design/reload.png); margin-right: 5px;}
.jnkReport .subContent.designer.metaDesigner .optionArea .buttonBox div.iconButton.reload:hover{background-image: url(../../images/dashboard/design/reload_hover.png); opacity: 1; }
.jnkReport .subContent.designer.metaDesigner .optionArea .buttonBox div.iconButton.addCondition {background-image: url(../../images/dashboard/design/add.png); margin-right: 5px;}
.jnkReport .subContent.designer.metaDesigner .optionArea .buttonBox div.iconButton.addCondition:hover{background-image: url(../../images/dashboard/design/add_hover.png); opacity: 1; }
.jnkReport .subContent.designer.metaDesigner .optionArea .buttonBox div.iconButton.addConditionBlock {background-image: url(../../images/dashboard/design/addBlock.png); margin-right: 5px;}
.jnkReport .subContent.designer.metaDesigner .optionArea .buttonBox div.iconButton.addConditionBlock:hover{background-image: url(../../images/dashboard/design/addBlock_hover.png); opacity: 1; }


/*각 개별 테이블 영역*/
/*테이블 명칭*/
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable{background-color:#fff; width:250px; height: max-content; position: absolute; border:1px solid #dadee5; }
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable.curr{z-index: 1; border: 1px solid #7373E6;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable.mOver{z-index: 2;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable.relStart{z-index: 3; border: 1px solid #6464FF;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable.relAdd{z-index: 3; border: 1px solid #6464FF;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea{background-color: #eeeeee; width: 100%; height: 30px;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul{width:100%; list-style-type: none; margin: 0; padding: 0 0 0 0; height: fit-content; display: inline-table;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul > li{float:left; text-align: center; padding-top : 0px; padding-bottom : 0px; height:30px;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul > li.dragdrop{
	width:21px; 
	background-image: url(../../images/dashboard/design/drag_indicator.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	opacity: 0.7;
}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul > li.dragdrop:hover{background-image: url(../../images/dashboard/design/drag_indicator_hover.png); background-color: #cccccc; opacity: 1;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul > li.tableNm{width: calc( 100% - 21px - 25px) ; text-align: left; padding-top: 2px;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea input{padding: 0px; width: calc(100% - 2px); border-width: 0; border-radius: 0;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea input:focus {outline: none;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul > li.btnDelTable{
	width:25px; 
	background-image: url(../../images/dashboard/design/delete.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	opacity: 0.7;
}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .tableNameArea ul > li.btnDelTable:hover{background-image: url(../../images/dashboard/design/delete_hover.png); background-color: #cccccc; opacity: 1;}

/*테이블 컬럼*/
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea{width:100%; height: max-content; max-height: 397px ; overflow-y: auto;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul{width:100%; list-style-type: none; margin: 0; padding: 0 0 0 0; height: fit-content; display: table;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul.setRel {background-color : #eeeeee}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li{float:left; text-align: center; border-bottom: 1px solid #dadee5; padding-top : 0px; padding-bottom : 0px;height:23px; padding-top: 7px;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul:last-child > li{border-bottom: 0px solid #dadee5;}

.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li.columnCheck{width: 25px ; padding-top: 6px; padding-bottom: 1px;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li.columnCheck input[type="checkbox"]{display: none;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li.columnCheck input[type="checkbox"] + label{
	display: inline-block;
	width: 16px;
	height: 16px;
	border:1px solid #707070;
	position: relative;
	cursor : pointer;
}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li.columnCheck input[type="checkbox"]:checked + label::after{
	content:'✔';
	font-size: 14px;
	width: 16px;
	height: 16px;
	text-align: center;
	position: absolute;
	left: 0;
	top:0;
}



.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li.columnNm{width: calc( 100% - 25px - 5px - 60px) ; text-align: left; padding-left: 5px;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.jnkReport .subContent.designer .workbookArea .metaDesign .metaTableCanvas .metaTable .columnArea ul > li.dataType{width:60px;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

/*테이블 트리영역*/
.jnkReport .subContent.designer .optionArea.optionTable { margin: 0px 8px 0px 0px; }
.jnkReport .subContent.designer:not(.tableWindow) .optionArea.optionTable {
    height:calc( 100% )!important ;
}

.jnkReport .subContent.designer .optionArea.optionTable .optionTableTree { height: calc(100% - var(--workTitleCalcHeight) - 4px); }

.jnkReport .subContent.designer .optionArea.optionTable .optionTableTree .formArea {width: 100%; height : 26px; float: left;}
.jnkReport .subContent.designer .optionArea.optionTable .optionTableTree .formArea input.filter{height: 15px;
    width: calc(100% - 32px);
    margin-left: 2px;
    border: 1px solid rgb(211, 211, 211);
}
.jnkReport .subContent.designer .optionArea.optionTable .optionTableTree .treeArea {width: 100%; height: calc(100% - 22px); float: left;}

.jnkReport .subContent.designer .optionArea.optionTable .buttonBox div.iconButton.minimize { display:none; }
.jnkReport .subContent.designer .optionArea.optionTable .buttonBox div.iconButton.normalize { display:none; }


/*컬럼 및 컬럼 옵션영역*/
.jnkReport .subContent.designer:not(.columnWindow) .optionArea.optionColumn {
    height:calc( 100% )!important ;
}

.jnkReport .subContent.designer .optionArea.optionColumn .optionWork.optionColumnList {
    width: 100%;
    height: calc(100% - var(--workTitleCalcHeight) - var(--areabarHeight) - var(--workTitleCalcHeight) - 412px);
}

.jnkReport .subContent.designer .optionArea.optionColumn .optionWork.optionColumnOption {
    width: 100%;
    height: 412px;
}

.jnkReport .subContent.designer .optionArea.optionColumn .buttonBox div.iconButton.minimize { display:none; }
.jnkReport .subContent.designer .optionArea.optionColumn .buttonBox div.iconButton.normalize { display:none; }


.jnkReport .subContent.designer .optionArea.optionColumn .columnTable{background-color:#fff; width:100%; height: calc( 100% ); overflow-y: auto;}

.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul{width:100%; list-style-type: none; margin: 0; padding: 0 0 0 0; height: fit-content; display: table; cursor: pointer;}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul:hover li{background-color: #eeeeee;;}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul.select li{background-color: #dddddd;;}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li{float:left; text-align: center; border-bottom: 1px solid #dadee5; padding-top : 0px; padding-bottom : 0px;height:30px;}

.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li.dragdrop{
	width:21px; 
	background-image: url(../../images/dashboard/design/drag_indicator.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	opacity: 0.7;
}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li.dragdrop:hover{background-image: url(../../images/dashboard/design/drag_indicator_hover.png); background-color: #cccccc; opacity: 1;}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li.columnNm{width: calc( 100% - 21px - 1px - 5px - 60px - 25px - 1px ) ; text-align: left; padding-left: 5px; padding-top: 7px; height: 23px;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li.dataType{width:60px; padding-top: 7px; height: 23px;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li.btnDelColumn{
		width:25px; 
		background-image: url(../../images/dashboard/design/delete.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
		cursor:pointer; 
		border-left: 1px solid #dadee5;
		opacity: 0.7;
}
.jnkReport .subContent.designer .optionArea.optionColumn .columnTable ul > li.btnDelColumn:hover{background-image: url(../../images/dashboard/design/delete_hover.png); background-color: #cccccc; opacity: 1;}


/*테이블영역 떼어내기*/
.jnkReport .subContent.designer.tableWindow .workbookArea.designMeta { width: calc(100% - 400px); }

.jnkReport .subContent.designer.tableWindow .optionArea.optionTable {
    position: fixed;
    left: 240px;
    top: 125px;
    height:calc( max( var(--workTitleHeight) + var(--workTitleHeight) + 100px, 70vh - 55px - 85px ));
    border: 1px solid #aaaaff;
    z-index: 90;
    margin: 0px 0px 0px 0px;
}

.jnkReport:not(.current) .subContent.designer.tableWindow .optionArea.optionTable {
    position: static;
}

.jnkReport .subContent.designer.tableWindow .optionArea.optionTable.curr { z-index: 91; }

.jnkReport .subContent.designer.tableWindow .optionArea.optionTable .buttonBox div.iconButton.pin { display:block; }
.jnkReport .subContent.designer.tableWindow .optionArea.optionTable .buttonBox div.iconButton.unpin { display:none; }
.jnkReport .subContent.designer.tableWindow .optionArea.optionTable .buttonBox div.iconButton.minimize { display:block; }
.jnkReport .subContent.designer.tableWindow .optionArea.optionTable .buttonBox div.iconButton.normalize { display:none; }

.jnkReport .subContent.designer.tableWindow .optionArea.optionTable .optionAreaResize { display:block; }

.jnkReport .subContent.designer.minTable.tableWindow .optionArea.optionTable {
    height:var(--workTitleHeight)!important;
    width : 160px;
}

.jnkReport .subContent.designer.minTable.tableWindow .optionArea.optionTable .optionWorkButton { display:none; }
.jnkReport .subContent.designer.minTable.tableWindow .optionArea.optionTable .optionWork { display:none; }
.jnkReport .subContent.designer.minTable.tableWindow .optionArea.optionTable .optionAreaResize { display:none; }

.jnkReport .subContent.designer.minTable.tableWindow .optionArea.optionTable .buttonBox div.iconButton.minimize { display:none; }
.jnkReport .subContent.designer.minTable.tableWindow .optionArea.optionTable .buttonBox div.iconButton.normalize { display:block; }

/*컬럼영역 떼어내기*/
.jnkReport .subContent.designer.columnWindow .workbookArea.designMeta { width: calc(100% - 392px); }

.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn {
    position: fixed;
    left: calc( 100vw - 415px);
    top: 125px;
    height:calc( max( var(--workTitleHeight) + var(--workTitleHeight) + 400px, 70vh - 55px - 85px ));
    min-height:calc( var(--workTitleHeight) + var(--workTitleHeight) + 400px );
    border: 1px solid #aaaaff;
    z-index: 90;
    margin: 0px 0px 0px 0px;
}

.jnkReport:not(.current) .subContent.designer.columnWindow .optionArea.optionColumn {
    position: static;
}

.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn.curr { z-index: 91; }

.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn .buttonBox div.iconButton.pin { display:block; }
.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn .buttonBox div.iconButton.unpin { display:none; }
.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn .buttonBox div.iconButton.minimize { display:block; }
.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn .buttonBox div.iconButton.normalize { display:none; }

.jnkReport .subContent.designer.columnWindow .optionArea.optionColumn .optionAreaResize { display:block; }

.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn {
    height:var(--workTitleHeight)!important;
    min-height:var(--workTitleHeight)!important;
    width : 160px;
}
.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .optionArea.areabar {
	display:none;
}

.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .optionColumnOptionTitle {
	display:none;
}

.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .optionWorkButton { display:none; }
.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .optionWork { display:none; }
.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .optionAreaResize { display:none; }

.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .buttonBox div.iconButton.minimize { display:none; }
.jnkReport .subContent.designer.minColumn.columnWindow .optionArea.optionColumn .buttonBox div.iconButton.normalize { display:block; }

/*조인영역 팝업*/
.jnkReport .subContent.designer .optionArea.optionRelation {
    position: fixed;
    left: 800px;
    top: 225px;
    width : 900px;
    height:calc( max( var(--workTitleHeight) + 300px, 400px ));
    min-height:calc( var(--workTitleHeight) + 300px);
    border: 1px solid #aaaaff;
    z-index: 90;
    margin: 0px 0px 0px 0px;
}

.jnkReport:not(.current) .subContent.designer .optionArea.optionRelation {
    position: static;
}

.jnkReport .subContent.designer .optionArea.optionRelation.curr { z-index: 91; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionAreaResize { display:block; }

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable {float: left}
/*
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable select {width : calc(100% - 10px);} 
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable select > option { padding: 10px;}
*/
/*
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable select {width: 100%; border: none; }
*/
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTableOption {background-color:#fff; width:100%; height:28px; padding-top:3px; padding-bottom:3px;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTableOption > div{float: left;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTableOption > div.leftTableAlias{width: 35%; height: 21px; padding-top: 7px; padding-left: 5px; padding-right: 5px; border-top: 1px solid #dadee5; border-bottom: 1px solid #dadee5; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTableOption > div.tableRelationMode{width: calc( 100% - 35% - 35% - 10px - 10px - 2px ); border: 1px solid #dadee5;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTableOption > div.rightTableAlias{width: 35%; height: 21px; padding-top: 7px; padding-left: 5px; padding-right: 5px; border-top: 1px solid #dadee5; border-bottom: 1px solid #dadee5; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable{background-color:#fff; width:100%; height: calc( 100% - 24px); overflow-y: auto;}

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul{width:100%; list-style-type: none; margin: 0; padding: 0 0 0 0; height: fit-content; display: table;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li{float:left; text-align: center; border-bottom: 1px solid #dadee5; padding-top : 0px; padding-bottom : 0px;height:30px;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li.dragdrop{
	width:21px; 
	background-image: url(../../images/dashboard/design/drag_indicator.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	opacity: 0.7;
}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li.dragdrop:hover{background-image: url(../../images/dashboard/design/drag_indicator_hover.png); background-color: #cccccc; opacity: 1;}

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li.btnAddRelation{
	width:25px; 
	background-image: url(../../images/dashboard/design/add.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	border-left: 1px solid #dadee5;
	opacity: 0.7;
}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li.btnAddRelation:hover{background-image: url(../../images/dashboard/design/add_hover.png); background-color: #cccccc; opacity: 1;}

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li.btnDelRelation{
	width:25px; 
	background-image: url(../../images/dashboard/design/delete.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	border-left: 1px solid #dadee5;
	opacity: 0.7;
}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul > li.btnDelRelation:hover{background-image: url(../../images/dashboard/design/delete_hover.png); background-color: #cccccc; opacity: 1;}


.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul:not(.spanRow) > li.whereRelationType{width:85px; border-right: 1px solid #dadee5; /*border-left: 1px solid #dadee5;*/}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul:not(.spanRow) > li.leftColumnType{width:90px; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul:not(.spanRow) > li.leftColumnAlias{width:255px; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul:not(.spanRow) > li.columnRelationMode{width:calc( 100% - 21px - 1px - 85px - 90px - 255px - 90px - 255px - 1px - 25px - 2px ); border-left: 1px solid #dadee5; border-right: 1px solid #dadee5;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul:not(.spanRow) > li.rightColumnType{width:90px; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul:not(.spanRow) > li.rightColumnAlias{width:255px; }

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul:last-child > li{border-bottom: 0px solid #dadee5; }

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.whereRelationType{width:85px; border-right: 1px solid #dadee5;/* border-left: 1px solid #dadee5;*/}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.openParenthesis{width: calc( 100% - 21px - 1px - 85px - 10px - 1px - 25px - 1px - 25px - 1px ); padding-left: 10px; padding-top: 5px; height: 25px; text-align: left;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation{width:calc( 100% - 20px - 2px ); text-align: left; border-bottom: 0px solid #dadee5; padding-top : 0px; padding-bottom : 0px; margin-left: 20px; border-left: 1px solid #dadee5; height:unset}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.closeParenthesis{width: calc(100% - 10px - 2px ); padding-left: 10px; padding-top: 5px; height: 25px; text-align: left;border-top: 1px solid #dadee5;border-right: 0px solid #dadee5;border-left: 0px solid #dadee5;}

.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul > li.whereRelationType{border-left: 0px solid #dadee5; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul > li.leftColumnAlias{width:244px; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul > li.columnRelationMode{width:calc( 100% - 21px - 1px - 85px - 90px - 244px - 90px - 244px - 1px - 25px - 2px );}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul > li.rightColumnAlias{width:244px; }
/*
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul:first-child > li.leftColumnAlias{width:287px; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul:first-child > li.columnRelationMode{width:calc( 100% - 21px - 1px - 90px - 287px - 90px - 287px - 1px - 25px - 2px );}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul:first-child > li.rightColumnAlias{width:287px; }
*/
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child{padding: 5px 0 0 0;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child > li{float:left; text-align: center; border-top: 1px solid #dadee5; border-bottom: 1px solid #dadee5; padding-top : 3px; padding-bottom : 3px;}

/*
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child  > li.whereRelationType {display:none;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul:first-child  > li.whereRelationType {display:none;}
*/
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:not(:first-child)  > li.whereRelationType > select {display:none;}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable ul.spanRow > li.childRelation > ul:not(:first-child)  > li.whereRelationType > select {display:none;}

/*
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child:not(.spanRow) > li.leftColumnAlias{width:295px; }
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child:not(.spanRow) > li.columnRelationMode{width:calc( 100% - 21px - 1px - 90px - 295px - 90px - 295px - 1px - 25px - 2px );}
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child:not(.spanRow) > li.rightColumnAlias{width:295px; }
*/
/*
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child.spanRow > li.openParenthesis{width: calc( 100% - 21px - 1px - 10px - 1px - 25px - 1px - 25px - 1px );}
*/
.jnkReport .subContent.designer .optionArea.optionRelation .optionRelationTable .relationTable > ul:first-child.spanRow > li.childRelation{border-top: 0px solid #dadee5;}



/*모든 옵션영역 창모드*/
.jnkReport .subContent.designer.tableWindow.columnWindow .workbookArea.designMeta { width: 100%; }

/*컨텐츠영역 영역나눔바*/
.jnkReport .areabar {width:100%; height:var(--areabarHeight); display: flex; background-color: #bbc6cf;}
.jnkReport .vAreabar {width:var(--vAreabarWidth); height:100%; float: left; background-color: #bbc6cf;}
.jnkReport .workTitleVAreabar {width:var(--vAreabarWidth); height:var(--workTitleHeight); background-color: #bbc6cf; float: left;}


/*컨텐츠영역 소메뉴*/
.jnkReport .workTitle {
  width: 100%; 
  height : var(--workTitleHeight);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: 1px 1.7px 10px 0 rgba(0, 0, 0, 0.07);
  background-color: #fff;
  background-image: url(../../images/common/icon/rectangle_red.png);
  background-repeat: no-repeat;
  background-position-x: 11px;
  background-position-y: 10px;  
  border-bottom: 1px solid #b5b8c4;
}
/*red*/
.jnkReport .workTitle.red { background-image: url(../../images/common/icon/rectangle_red.png); }
/*blue*/
.jnkReport .workTitle.blue { background-image: url(../../images/common/icon/rectangle_blue.png); }
/*green*/
.jnkReport .workTitle.green { background-image: url(../../images/common/icon/rectangle_green.png); }
/*Orange */
.jnkReport .workTitle.orange { background-image: url(../../images/common/icon/rectangle_orange.png); }
/*purple */
.jnkReport .workTitle.purple { background-image: url(../../images/common/icon/rectangle_purple.png); }
/*yellow */
.jnkReport .workTitle.yellow { background-image: url(../../images/common/icon/rectangle_yellow.png); }
/*sodomy */
.jnkReport .workTitle.sodomy { background-image: url(../../images/common/icon/rectangle_sodomy.png); }
/*Gray */
.jnkReport .workTitle.gray { background-image: url(../../images/common/icon/rectangle_gray.png); }

.jnkReport .workTitle > span { float : left; margin-top: 6px; margin-left:24px; }

/*컨텐츠영역 작업영역*/
.jnkReport .subContent {width:100%; height:100%;}

/*버튼영역 커스텀*/
.jnkReport .buttonBox .ui-state-default a, .jnkReport .buttonBox .ui-state-default a:link, .jnkReport .buttonBox .ui-state-default a:visited
, .jnkReport .buttonBox a.ui-button, .jnkReport .buttonBox a:link.ui-button, .jnkReport .buttonBox a:visited.ui-button
, .jnkReport .buttonBox .ui-button {
  height: 28px;
  padding: 0px 9px 0px 9px;
  border-radius: 4px;
  border: solid 1px #aaa;
  background-color: #fff;
  vertical-align: middle;
  text-align: center;  
  line-height: 28px;
  letter-spacing: -0.24px;
  color: #222;
}

.jnkReport .buttonBox .ui-state-hover a, .jnkReport .buttonBox .jnkReport .ui-state-hover a:hover, .jnkReport .buttonBox .ui-state-hover a:link
, .jnkReport .buttonBox .ui-state-hover a:visited, .jnkReport .buttonBox .ui-state-focus a, .jnkReport .buttonBox .ui-state-focus a:hover
, .jnkReport .buttonBox .ui-state-focus a:link, .jnkReport .buttonBox .ui-state-focus a:visited, .jnkReport .buttonBox a.ui-button:hover
, .jnkReport .buttonBox a.ui-button:focus {
  border: solid 1px #353942;
  background-color: #353942;
  color: #fff;
}

/*소제목영역 버튼*/
.jnkReport .workTitle .buttonBox .ui-state-default a, .jnkReport .workTitle .buttonBox .ui-state-default a:link
, .jnkReport .workTitle .buttonBox .ui-state-default a:visited, .jnkReport .workTitle .buttonBox a.ui-button
, .jnkReport .workTitle .buttonBox a:link.ui-button, .jnkReport .workTitle .buttonBox a:visited.ui-button
, .jnkReport .workTitle .buttonBox .ui-button {
  height: 22px;
  line-height: 22px;
}


/*컨텐츠영역 버튼영역*/
.jnkReport .buttonArea {width: 100%; height : var(--buttonAreaHeight);}
.jnkReport .reportNameArea {width: 100%; height : var(--reportNameAreaHeight);}

.workTitle .buttonArea {
  width:auto;
  float:right;
  height: calc( var(--buttonAreaHeight) - 3px );
  margin-top: 3px;
  margin-right: 6px;
}

.jnkReport .buttonBox {float: right;}
.jnkReport .buttonBox.center {text-align: center; float: none;}
.jnkReport .buttonBox .ui-button.pullDown {background-image: url(../../images/common/icon/slide_down.png); background-repeat: no-repeat; background-position : right 5px center; background-size: 10px; padding-right: 19px; }
.jnkReport .buttonBox .ui-button.pullDown:hover {background-image: url(../../images/common/icon/slide_down_hover.png);}
.jnkReport .buttonBox .pullDownArea {position: fixed; list-style: none; padding: 0px; margin: 0px; width:66px; z-index : 10001}
.jnkReport .buttonBox .pullDownArea li {
  width:40px;
  height: 28px;
  padding: 0px 9px 0px 9px;
  border: solid 1px #aaa;
  background-color: #fff;
  vertical-align: middle;
  text-align: center;  
  line-height: 28px;
  letter-spacing: -0.24px;
  color: #222;  
}
.jnkReport .buttonBox .pullDownArea li:hover {
  border: solid 1px #353942;
  background-color: #353942;
  color: #fff;  
}

.jnkReport div.subContent > div.buttonArea {
	position: fixed;
	right : 7px;
	top : calc( var(--topAreaHeight) + (( var(--tabMenuHeight) - var(--buttonAreaHeight) ) / 2 ) + 2px);
	width: max-content;
	display:none;
}

.jnkReport.current div.subContent > div.buttonArea {
	display:unset;
}

/*컨텐츠영역 버튼영역 아이콘 적용*/
.jnkReport .buttonBox div.iconButton {background-repeat: no-repeat; background-size: cover; width: 28px; height: 28px; float: left; cursor: pointer; margin-right: 3px;}
.jnkReport .buttonBox div.iconButton.newIcon {background-image: url(../../images/common/icon/new.png);}
.jnkReport .buttonBox div.iconButton.newIcon:hover{background-image: url(../../images/common/icon/new_hover.png); opacity: 0.70;}
.jnkReport .buttonBox div.iconButton.openIcon {background-image: url(../../images/common/icon/open.png);}
.jnkReport .buttonBox div.iconButton.openIcon:hover{background-image: url(../../images/common/icon/open_hover.png); opacity: 0.70;}
.jnkReport .buttonBox div.iconButton.saveIcon {background-image: url(../../images/common/icon/save.png);}
.jnkReport .buttonBox div.iconButton.saveIcon:hover{background-image: url(../../images/common/icon/save_hover.png); opacity: 0.70;}
.jnkReport .buttonBox div.iconButton.saveAsIcon {background-image: url(../../images/common/icon/saveas.png);}
.jnkReport .buttonBox div.iconButton.saveAsIcon:hover{background-image: url(../../images/common/icon/saveas_hover.png); opacity: 0.70;}
.jnkReport .buttonBox div.iconButton.exportIcon {background-image: url(../../images/common/icon/export.png);}
.jnkReport .buttonBox div.iconButton.exportIcon:hover{background-image: url(../../images/common/icon/export_hover.png); opacity: 0.70;}
.jnkReport .buttonBox div.iconButton.importIcon {background-image: url(../../images/common/icon/import.png);}
.jnkReport .buttonBox div.iconButton.importIcon:hover{background-image: url(../../images/common/icon/import_hover.png); opacity: 0.70;}

.jnkReport .buttonBox div.iconButton.playIcon {background-image: url(../../images/common/icon/play.png);}
.jnkReport .buttonBox div.iconButton.playIcon:hover{background-image: url(../../images/common/icon/play_hover.png); opacity: 0.70;}
.jnkReport .buttonBox div.iconButton.stopIcon {background-image: url(../../images/common/icon/stop.png);}
.jnkReport .buttonBox div.iconButton.stopIcon:hover{background-image: url(../../images/common/icon/stop_hover.png); opacity: 0.70;}

.jnkReport .buttonBox div.iconButton.editIcon {background-image: url(../../images/common/icon/edit.png);}
.jnkReport .buttonBox div.iconButton.editIcon:hover{background-image: url(../../images/common/icon/edit_hover.png); opacity: 0.70;}

.jnkReport .buttonBox div.iconButton.replayIcon {background-image: url(../../images/common/icon/replay.png);}
.jnkReport .buttonBox div.iconButton.replayIcon:hover{background-image: url(../../images/common/icon/replay_hover.png); opacity: 0.70;}

.jnkReport .buttonBox div.iconButton.playArrawIcon {background-image: url(../../images/common/icon/play_arrow.png);}
.jnkReport .buttonBox div.iconButton.playArrawIcon:hover{background-image: url(../../images/common/icon/play_arrow_hover.png); opacity: 0.70;}

.jnkReport .buttonBox div.iconButton.settingsIcon {background-image: url(../../images/common/icon/settings.png);}
.jnkReport .buttonBox div.iconButton.settingsIcon:hover{background-image: url(../../images/common/icon/settings_hover.png); opacity: 0.70;}

.jnkReport .buttonBox div.iconButton.fullScreenIcon {background-image: url(../../images/common/icon/fullscreen.png);}
.jnkReport .buttonBox div.iconButton.fullScreenIcon:hover{background-image: url(../../images/common/icon/fullscreen_hover.png); opacity: 0.70;}

/* .jnkReport div.subContent > div.buttonArea > .buttonBox {width: max-content;} */

/*컨텐츠영역 작업영역 (css 적용순서때문에 설정이 검색영역 앞에 위치)*/
.jnkReport .workArea {width: calc(100% - 16px); height : calc(100% - 16px); margin:8px;}

/*컨텐츠영역 검색영역*/
.jnkReport .searchArea {width: calc(100% - 17px ); height : 32px; background-color: #fff; padding : 6px 10px 6px 7px;}
.jnkReport .searchArea.line0 {height: 0px; padding: 1px 0px 0px 0px;width:100%;}
.jnkReport .searchArea.line1 {height : 32px;}
.jnkReport .searchArea.line2 {height : 64px;}
.jnkReport .searchArea.line3 {height : 96px;}
.jnkReport .searchArea.line4 {height : 128px;}

.jnkReport .searchArea.line1 + div + div {height : calc(100% - 32px - 6px);}
.jnkReport .searchArea.line2 + div + div {height : calc(100% - 64px - 6px);}
.jnkReport .searchArea.line3 + div + div {height : calc(100% - 96px - 6px);}
.jnkReport .searchArea.line4 + div + div {height : calc(100% - 128px - 6px);}

.jnkReport .workArea.line0 {height : calc(100% - 6px - 16px); padding-top: 2px;}
.jnkReport .workArea.line1 {height : calc(100% - 32px - 12px - 16px);}
.jnkReport .workArea.line2 {height : calc(100% - 64px - 12px - 16px);}
.jnkReport .workArea.line3 {height : calc(100% - 96px - 12px - 16px);}
.jnkReport .workArea.line4 {height : calc(100% - 128px - 12px - 16px);}

.jnkReport .searchArea.subArea.line1 + div + div {height : calc(100% - var(--areabarHeight) - 32px - 12px);}
.jnkReport .searchArea.subArea.line2 + div + div {height : calc(100% - var(--areabarHeight) - 64px - 12px);}
.jnkReport .searchArea.subArea.line3 + div + div {height : calc(100% - var(--areabarHeight) - 96px - 12px);}
.jnkReport .searchArea.subArea.line4 + div + div {height : calc(100% - var(--areabarHeight) - 128px - 12px);}

.jnkReport .searchFormTable {border: 1px solid #dadee5;border-collapse: collapse; float:left;}
.jnkReport .searchFormTable > tbody > tr {height : 32px;border: 1px solid #dadee5;} 
.jnkReport .searchFormTable > tbody >  tr > th {background-color:#f8f8fb; text-align: right; padding-right: 12px;position: relative;border: 1px solid #dadee5; font-weight: normal;}
.jnkReport .searchFormTable > tbody >  tr > th.empty {background-color:#fff; border-right: 1px solid #fff; border-left: 1px solid #fff;}
.jnkReport .searchFormTable > tbody >  tr > td {padding-left: 5px;padding-right: 5px;text-align: left;border: 1px solid #dadee5; font-weight: normal;}
.jnkReport .searchFormTable > tbody >  tr > td.empty {border-right: 1px solid #fff; border-left: 1px solid #fff;}
.jnkReport .searchFormTable > tbody >  tr > td.empty:nth-last-child(1) {border-right: 1px solid #dadee5;}

.jnkReport .searchFormTable > tbody >  tr > td.left {text-align: left;}
.jnkReport .searchFormTable > tbody >  tr > td.right {text-align: right;}
.jnkReport .searchFormTable > tbody >  tr > td.center {text-align: center;}

/*input style*/
.jnkReport .searchArea input { 
  height : 22px;
}
.jnkReport .searchArea select { height : 26px;}

/*컨텐츠영역 작업영역 form*/
.jnkReport .formArea {width: 100%; height : 100px; overflow:auto; background-color: white;}

.jnkReport .formTable {border: 1px solid #dadee5;border-collapse: collapse; float:left;}
.jnkReport .formTable > tbody > tr {height: 34px;border: 1px solid #dadee5;}
.jnkReport .formTable > tbody > tr > th {background-color:#f8f8fb; text-align: right; padding-right: 12px;border: 1px solid #dadee5; position: relative;font-weight: normal;}
.jnkReport .formTable > tbody > tr > td {padding-left: 5px;padding-right: 5px;text-align: left;border: 1px solid #dadee5;}
.jnkReport .formTable > tbody > tr > td.left {text-align: left;}
.jnkReport .formTable > tbody > tr > td.right {text-align: right;}
.jnkReport .formTable > tbody > tr > td.center {text-align: center;}

/*컨텐츠영역 작업영역 그리드*/

.jnkReport .gridArea, .jnkReport .chartArea, .jnkReport .pivotArea, .jnkReport .treeArea {background-color:white;}
.jnkReport .gridArea, .jnkReport .treeArea {overflow:auto;}

.jnkReport .scrollGridDiv.chkAllArea.fix { width : var(--numberAreaWidth); overflow:hidden; float: left; box-sizing: border-box;}
.jnkReport .scrollGridDiv.chkAllArea.nonFix { width : var(--numberAreaWidth); overflow:hidden; float: left; box-sizing: border-box;}

.jnkReport .scrollGridDiv.chkAllArea.hasCheckAll { width : var(--chkAllAreaWidth) ;}
.jnkReport .scrollGridDiv.chkAllArea.hasNo { width : var(--numberAreaWidth) ;}
.jnkReport .scrollGridDiv.chkAllArea.hasNo.hasCheckAll { width : calc( var(--chkAllAreaWidth) + var(--numberAreaWidth) ) ;}

.jnkReport .scrollGridDiv.gridAreaLeft.fix { margin-right:var(--schollGridMargin); overflow:hidden; float: left; box-sizing: border-box;}
.jnkReport .scrollGridDiv.gridAreaLeft.nonFix { margin-right:var(--schollGridMargin); overflow-x:auto; overflow-y:hidden; float: left; box-sizing: border-box;}
.jnkReport .gridArea.hasRownumArea .scrollGridDiv.gridAreaLeft.fix { }
.jnkReport .gridArea.hasRownumArea .scrollGridDiv.gridAreaLeft.nonFix { }
 
.jnkReport .scrollGridDiv.gridAreaRight.fix { overflow:hidden; box-sizing: border-box;}
.jnkReport .scrollGridDiv.gridAreaRight.nonFix {overflow-x:auto; overflow-y:auto; box-sizing: border-box;}


.jnkReport .scrollGridDiv.chkAllArea.hasCheckAll { width : var(--chkAllAreaWidth) ; box-sizing: border-box;}
.jnkReport .scrollGridDiv.chkAllArea.hasNo { width : var(--numberAreaWidth) ; box-sizing: border-box;}
.jnkReport .scrollGridDiv.chkAllArea.hasNo.hasCheckAll { width : calc( var(--chkAllAreaWidth) + var(--numberAreaWidth) ) ; box-sizing: border-box;}

.jnkReport .scrollGridDiv.gridAreaLeft.fix { /* margin-right:var(--schollGridMargin); */ overflow:hidden; float: left; box-sizing: border-box;}
.jnkReport .scrollGridDiv.gridAreaLeft.nonFix { /* margin-right:var(--schollGridMargin); */ overflow-x:auto; overflow-y:hidden; float: left; box-sizing: border-box;}

.jnkReport .scrollGridDiv.gridAreaRight.fix { overflow:hidden; box-sizing: border-box;}
.jnkReport .scrollGridDiv.gridAreaRight.nonFix {overflow-x:auto; overflow-y:auto; box-sizing: border-box;}

.jnkReport .scrollGridDiv.chkAllArea.nonFix {border-bottom: 1px solid #dadee5;}
.jnkReport .scrollGridDiv.gridAreaLeft.nonFix {border-bottom: 1px solid #dadee5;}
.jnkReport .scrollGridDiv.gridAreaRight.nonFix {border-bottom: 1px solid #dadee5;}

/*컨텐츠영역 작업영역 그리드 테이블 정의*/
.jnkReport .jnkTable {padding: 0px;border-spacing: 0px; width:100%; }
.jnkReport .jnkTable.scrollGrid {table-layout:fixed;word-break:break-all }
.jnkReport .jnkTable > thead > tr {height:var(--tableTrHeight);}
.jnkReport .jnkTable > tbody > tr {height:var(--tableTrHeight);}

.jnkReport .jnkTable > thead > tr > th {
	background-color: #9fa4b3; 
	text-overflow: inherit; 
	text-align: center; 
	overflow: hidden; 
	white-space: nowrap; 
	padding: 0px 5px 0px 5px; 
	border-right: 1px solid #dadee5; 
	border-left: 0px solid #9fa4b3; 
	border-top: 0px solid #dadee5;
	border-bottom: 1px solid #dadee5; 
	position: relative;
	font-weight: normal;
	color: #fff;
  }
  
 .jnkReport .jnkTable > thead > tr > th:first-child {
 	/*border-left-width: 1px;*/
 }
 
 .jnkReport .jnkTable > thead > tr:first-child > th {
 	/*border-top-width: 1px;*/
 }
  
.jnkReport .jnkTable > thead > tr > th div.dataDiv{
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;
  height: inherit;
  padding: 5px 0px 5px 0px;
  }
  
.jnkReport .jnkTable > thead > tr > th.mline div.dataDiv{
    text-overflow: unset;
    white-space: normal;
    /*height: var(--tableTrHeight);*/
  }  

.jnkReport .gridAreaExpend .jnkTable > thead > tr > th div.dataDiv{
  padding: 0px 0px 0px 0px;
  }

.jnkReport .jnkTable.scrollGrid > thead > tr > th {table-layout:fixed;word-break:break-all;}

.jnkReport .jnkTable > thead > tr > th.scrollBarCol.hasNotScroll {
	background-color: rgba( 255, 255, 255, 1.0 );
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
/*
.jnkReport .jnkTable > thead > tr.hasBlankAreaHead > th.scrollBarCol {opacity: 0.7;}
.jnkReport .jnkTable > thead > tr > th.blankAreaHead {opacity: 0.7;}
.jnkReport .jnkTable > tbody > tr > td.blankAreaBody {opacity: 0.7;}
*/
.jnkReport .jnkTable > tbody > tr > td {
  background-color: #fff; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap; 
  padding: 0px 5px 0px 5px; 
  border-right: 1px solid #dadee5; 
  border-left: 0px solid #dadee5; 
  border-top: 0px solid #dadee5;
  border-bottom: 1px solid #dadee5;
 }
 
 .jnkReport .jnkTable > tbody > tr > td:first-child {
 	/*border-left-width: 1px;*/
 }

 .jnkReport .jnkTable > tbody > tr:first-child > td {
 	/*border-top-width: 1px;*/
 }
 
.jnkReport .jnkTable > tbody > tr > td div.dataDiv {
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;
  height: inherit; 
  padding: 5px 0px 5px 0px;
 }
 
.jnkReport .jnkTable > tbody > tr > td img.imageColumn {
  object-fit: contain;
 }

.jnkReport .jnkTable > tbody > tr > td div.ValueBackground {
  position: absolute;left: 0px;top: 0px;width: 100%;
 }

.jnkReport .jnkTable > tbody > tr > td div.ValueBackground div.main {
	background-color: #0000ffA0; position: absolute;
 }

.jnkReport .jnkTable > tbody > tr > td div.ValueBackground div.sub {
	background-color: #ff0000A0; position: absolute;
 }

.jnkReport .gridAreaExpend {
  /*height: calc ( var(--pivotExpendTrHeight) + var(--pivotExpendTrHeight) );*/
  height: unset; 
 }
 
.jnkReport .gridAreaExpend > .jnkTable > thead > tr {
  /*height: var(--pivotExpendTrHeight);*/ 
  height: unset;
 }

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th {
  background-color: #B6BBCC; 
  text-align: left;
 }

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul {
  margin: 0px;
  padding : 0px;
  display: inline-flex;
  min-width: 50px;
  min-height: 10px;  
 }
 
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li {
	/*height: calc ( var(--pivotExpendTrHeight) - 4px );*/
	position: relative;
	background-color: #9FA4B3;
	float: left;
	list-style: none;
	
	table-layout:fixed;
	word-break:break-all;
	
    text-overflow: inherit;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 5px 5px 5px;
    border-right: 1px solid #dadee5;
    border-left: 1px solid #dadee5;
    border-top: 1px solid #dadee5;
    border-bottom: 1px solid #dadee5;
    font-weight: normal;
    color: #fff;	
    margin-right:3px;
    
    border-radius: 5px 5px 5px 5px;
	
	padding-top: 5px;
    padding-bottom: 5px;
    
	margin-top: 3px;
	margin-bottom: 3px;
 } 
 
 .jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li > div.expendTitleDiv {
	 width:99px;
	 text-align: left;
	 text-overflow: ellipsis; 
	 overflow: hidden; 
	 white-space: nowrap;
	 height: inherit;	 
 }
 

/*그리드정렬*/
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble div.sortAble {background-image: url(../../images/common/icon/sort.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 9.4px; height: 15px; position: absolute; top: 5px; right: 1px; cursor: pointer;opacity: 0.3;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble div.sortAble:hover {opacity: 1;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble.filterAble div.sortAble {right: 15px;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble.asc div.sortAble {background-image: url(../../images/common/icon/sort_asc.png);}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble.desc div.sortAble {background-image: url(../../images/common/icon/sort_desc.png);}

/*그리드 필터*/
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.filterAble div.filterAble {background-image: url(../../images/common/icon/filter.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 15px; height: 15px; position: absolute; top: 5px; right: 1px; cursor: pointer;opacity: 0.3;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.filterAble div.filterAble:hover {opacity: 1;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.filterAble.filterActive div.filterAble {background-image: url(../../images/common/icon/filter_on.png);}

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.filterAble {padding-right: 15px;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.filterAble > div.expendTitleDiv {width:89px} 
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble {padding-right: 15px;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble > div.expendTitleDiv {width:89px} 

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble.filterAble {padding-right: 30px;}

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th ul > li.sortAble.filterAble > div.expendTitleDiv {width:74px}

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th.expendFilter {border-left-width: 0px; border-right-width: 0px;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th.expendIcon {border-left-width: 0px; border-right-width: 0px;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th.expendIcon > div {background-image: url(../../images/common/icon/pivot_table.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 24px; height: 24px; cursor: pointer;opacity: 0.3;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th.expendIcon > div:hover {opacity: 1;}

.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th.expendRight {border-left-width: 1px; border-right-width: 0px;}
.jnkReport .gridAreaExpend > .jnkTable > thead > tr > th.expendData {border-left-width: 0px;} 

/*피봇테이블 정렬변경*/
.pivot-grid-placeholder {
	width:15px;
	height:100%;
	background-color: #B6BBCC;
	list-style: none;
	padding: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px;
}

.pivot-grid-move {
	background-color: #9FA4B3;
    text-overflow: inherit;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 5px 5px 5px;
    border-right: 1px solid #dadee5;
    border-left: 1px solid #dadee5;
    border-top: 1px solid #dadee5;
    border-bottom: 1px solid #dadee5;
    font-weight: normal;
    color: #fff;	
    border-radius: 5px 5px 5px 5px;
    opacity:.7;
}

.jnkReport .jnkTable > thead > tr > th > div.sortAble.pivotTdElement {position: relative;}
.jnkReport .jnkTable > thead > tr > th > div.filterAble.pivotTdElement {position: relative;}

.jnkReport .jnkTable > thead > tr > th > div.sortAble.pivotTdElement div.sortAble {background-image: url(../../images/common/icon/sort.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 9.4px; height: 15px; position: absolute; top: 6px; right: 1px; cursor: pointer;opacity: 0.3;}
.jnkReport .jnkTable > thead > tr > th > div.sortAble.pivotTdElement div.sortAble:hover {opacity: 1;}
.jnkReport .jnkTable > thead > tr > th > div.sortAble.filterAble.pivotTdElement div.sortAble {right: 15px;}
.jnkReport .jnkTable > thead > tr > th > div.sortAble.asc.pivotTdElement div.sortAble {background-image: url(../../images/common/icon/sort_asc.png);}
.jnkReport .jnkTable > thead > tr > th > div.sortAble.desc.pivotTdElement div.sortAble {background-image: url(../../images/common/icon/sort_desc.png);}

.jnkReport .jnkTable > thead > tr > th > div.sortAble.pivotTdElement {padding-right: 15px;}
.jnkReport .jnkTable > thead > tr > th > div.sortAble.filterAble.pivotTdElement {padding-right: 30px;}


/*그리드 필터*/
.jnkReport .jnkTable > thead > tr > th > div.filterAble.pivotTdElement div.filterAble {background-image: url(../../images/common/icon/filter.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 15px; height: 15px; position: absolute; top: 6px; right: 1px; cursor: pointer;opacity: 0.3;}
.jnkReport .jnkTable > thead > tr > th > div.filterAble.pivotTdElement div.filterAble:hover {opacity: 1;}
.jnkReport .jnkTable > thead > tr > th > div.filterAble.filterActive.pivotTdElement div.filterAble {background-image: url(../../images/common/icon/filter_on.png);}
.jnkReport .jnkTable > thead > tr > th > div.filterAble.pivotTdElement {padding-right: 15px;}

/*
.jnkReport .jnkTable > thead > tr > th > .pivot-grid-placeholder ~ .pivotTdElement {width : calc( 100% - 10px );}
.jnkReport .jnkTable > thead > tr > th > .pivot-grid-placeholder ~ .pivotTdElement.sortAble {width : calc( 100% - 25px );}
.jnkReport .jnkTable > thead > tr > th > .pivot-grid-placeholder ~ .pivotTdElement.filterAble {width : calc( 100% - 25px );}
.jnkReport .jnkTable > thead > tr > th > .pivot-grid-placeholder ~ .pivotTdElement.sortAble.filterAble {width : calc( 100% - 50px );}
*/
.jnkReport .jnkTable > thead > tr > th > .pivot-grid-placeholder {	
	position: absolute;
    top: 0px;
    left: 5px;
    right:unset;
}
.jnkReport .jnkTable > thead > tr > th > .pivotTdElement + .pivot-grid-placeholder {
	position: absolute;
    top: 0px;
    left:unset;
    right: 5px;
}



/*
.jnkReport .jnkTable > thead > tr > th.sortAble.filterAble div.sortAble {right: 15px;}
.jnkReport .jnkTable > thead > tr > th.sortAble {padding-right: 15px;}
.jnkReport .jnkTable > thead > tr > th.sortAble.filterAble {padding-right: 30px;}

pivot-grid-placeholder
*/

/*
 .jnkReport .jnkTable.rowSpanAble tbody tr td {
    padding-top: 7px;
    vertical-align: top;
 }
*/


/*그리드 그룹영역*/
/*
.jnkReport .jnkTable > thead > tr > th {
	background-color: #93A4C5; 
	color: #fff;
  }
  
.jnkReport .jnkTable > thead > tr > th div.dataDiv{

  }  
*/

/*Row SubTotal 영역*/
.jnkReport .pivotTable > tbody > tr > td.itemCell.rowSubTotalTd {
	background-color: #EDEDED;
}
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowSubTotalTd div.dataDiv {
	font-weight: bold;
 }
.jnkReport .jnkTable > tbody > tr > td.rowSubTotalDataTd {
	background-color: #FAFAFA; 
 }
.jnkReport .jnkTable > tbody > tr > td.rowSubTotalDataTd div.dataDiv {
	font-weight: bold;
 }

/*col SubTotal 영역*/
.jnkReport .pivotTable > thead > tr > th.colSubTotalTh {
	background-color: #9A9FAD;
}
.jnkReport .jnkTable > thead > tr > th.colSubTotalTh div.dataDiv {
	/*font-weight: bold;*/
 }
.jnkReport .jnkTable > tbody > tr > td.colSubTotalDataTd {
	background-color: #FAFAFA; 
 }
.jnkReport .jnkTable > tbody > tr > td.colSubTotalDataTd div.dataDiv {
	/*font-weight: bold;*/
 }

/*Row Total 영역*/
.jnkReport .pivotTable > tbody > tr > td.itemCell.rowTotalTd {
	background-color: #EDEDED;
}
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowTotalTd div.dataDiv {
	font-weight: bolder;
 }
.jnkReport .jnkTable > tbody > tr > td.rowTotalDataTd {
	background-color: #FAFAFA;
 }
.jnkReport .jnkTable > tbody > tr > td.rowTotalDataTd div.dataDiv {
	font-weight: bolder;
 }
 
/*col Total 영역*/
.jnkReport .pivotTable > thead > tr > th.colTotalTh {
	background-color: #9A9FAD;
}
.jnkReport .jnkTable > thead > tr > th.colTotalTh div.dataDiv {
	/*font-weight: bolder;*/
 }
.jnkReport .jnkTable > tbody > tr > td.colTotalDataTd {
	background-color: #FAFAFA;
 }
.jnkReport .jnkTable > tbody > tr > td.colTotalDataTd div.dataDiv {
	/*font-weight: bolder;*/
 }
 
 
/*그리드 Col 펼침 접힘*/
.jnkReport .jnkTable > thead > tr > th.colExpandPlus > div.colExpandDataDiv {
	position: relative
}
.jnkReport .jnkTable > thead > tr > th.colExpandPlus > div.colExpandDataDiv > div.dataDiv {
	margin-left: 16px;
}
.jnkReport .jnkTable > thead > tr > th > div.colExpandDataDiv > div.colGridPlusIcon{
	display : none
}
.jnkReport .jnkTable > thead > tr > th.colExpandPlus > div.colExpandDataDiv > div.colGridPlusIcon{
	background-image: url(../../images/common/icon/plusW.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    width: 12px;
    height: 12px;
    position: absolute;
    top: calc((100% - 12px) / 2);
    left: 2px;
    cursor: pointer;
    display : block;
    opacity: 0.6;
    /*
    background-color: #fff;
    border-radius: 7px;
    border-color: #3f3f3f;
    border : 1px solid;
    */	
}

.jnkReport .jnkTable > thead > tr > th.colExpandPlus > div.colExpandDataDiv > div.colGridPlusIcon:hover{
	opacity: 1;
}

.jnkReport .jnkTable > thead > tr > th.colExpandMinus > div.colExpandDataDiv {
	position: relative
}
.jnkReport .jnkTable > thead > tr > th.colExpandMinus > div.colExpandDataDiv > div.dataDiv {
	margin-left: 16px;
}
.jnkReport .jnkTable > thead > tr > th.colExpandMinus > div.colExpandDataDiv > div.colGridMinusIcon{
	background-image: url(../../images/common/icon/minusW.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    width: 12px;
    height: 12px;
    position: absolute;
    top: calc((100% - 12px) / 2);
    left: 2px;
    cursor: pointer;
    opacity: 0.6;
    /*
    background-color: #fff;
    border-radius: 7px;
    border-color: #3f3f3f;
    border : 1px solid;
    */	
} 

.jnkReport .jnkTable > thead > tr > th.colExpandMinus > div.colExpandDataDiv > div.colGridMinusIcon:hover{
	opacity: 1;
}

/*그리드 Row 펼침 접힘*/
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandPlus > div.rowExpandDataDiv {
	position: relative
}
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandPlus > div.rowExpandDataDiv > div.dataDiv {
	margin-left: 16px;
}
.jnkReport .jnkTable > tbody > tr > td.itemCell > div.rowExpandDataDiv > div.rowGridPlusIcon{
	display : none
}
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandPlus > div.rowExpandDataDiv > div.rowGridPlusIcon{
	background-image: url(../../images/common/icon/plus.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    width: 12px;
    height: 12px;
    position: absolute;
    top: calc((100% - 12px) / 2);
    left: 2px;
    cursor: pointer;
    display : block;
    opacity: 0.6;
    /*
    background-color: #fff;
    border-radius: 7px;
    border-color: #3f3f3f;
    border : 1px solid;
    */	
}

.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandPlus > div.rowExpandDataDiv > div.rowGridPlusIcon:hover{
	opacity: 1;
}

.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandMinus > div.rowExpandDataDiv {
	position: relative
}
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandMinus > div.rowExpandDataDiv > div.dataDiv {
	margin-left: 16px;
}
.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandMinus > div.rowExpandDataDiv > div.rowGridMinusIcon{
	background-image: url(../../images/common/icon/minus.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    width: 12px;
    height: 12px;
    position: absolute;
    top: calc((100% - 12px) / 2);
    left: 2px;
    cursor: pointer;
    opacity: 0.6;
    /*
    background-color: #fff;
    border-radius: 7px;
    border-color: #3f3f3f;
    border : 1px solid;
    */	
}

.jnkReport .jnkTable > tbody > tr > td.itemCell.rowExpandMinus > div.rowExpandDataDiv > div.rowGridMinusIcon:hover{
	opacity: 1;
}

/*그리드 스타일 및 마우스 이동*/ 
.jnkReport .jnkTable.scrollGrid > tbody > tr > td {table-layout:fixed;word-break:break-all;}
.jnkReport .jnkTable > tbody > tr > td.left {text-align:left;}
.jnkReport .jnkTable > tbody > tr > td.right {text-align:right;}
.jnkReport .jnkTable > tbody > tr > td.center {text-align:center;}

.jnkReport .jnkTable.mouseRow > tbody > tr.hover > td {background-color: #e3e3e3;} 
.jnkReport .jnkTable.selectRow > tbody > tr.select > td {background-color: #d3d3d3;}

.jnkReport .jnkTable.mouseCol > tbody > tr > td.hover {background-color: #e3e3e3;} 
.jnkReport .jnkTable.selectCol > tbody > tr > td.select {background-color: #d3d3d3;}

.jnkReport .listTable > tbody > tr:nth-child(even) > td {background-color: #f3f3f3;}
.jnkReport .pivotTable > tbody > tr > td.itemCell {background-color: #f3f3f3;}
.jnkReport .pivotTable > tbody > tr > td.checkAllCell {background-color: #f3f3f3;}
.jnkReport .pivotTable > tbody > tr > td.rowNumCell {background-color: #f3f3f3; /*padding: 6px 5px 6px 5px;*/}

/*그리드 리사이저*/
.jnkReport .gridArea .ColResizeGrips { height: 0px; position: relative; }
.jnkReport .gridArea .ColResizeGrip { margin-left: -5px; position: absolute; z-index: 5; height: var(--tableTrHeight);}
.jnkReport .gridArea .ColResizeGrip .ColResizer { position: absolute; background-color: #dadee5; filter: alpha(opacity=1); opacity: 0; width: 2px; height: 100%; cursor: e-resize; top: 0px; }
.jnkReport .gridArea .ColResizeGrip .ColResizer.resizeDrag { background-color: #6a6e75; filter: alpha(opacity=70); opacity: 0.7; }

.jnkReport .gridArea .LColResizeGrips { height: 0px; position: relative; }
.jnkReport .gridArea .LColResizeGrip { margin-left: -5px; position: absolute; z-index: 5; height: var(--tableTrHeight);}
.jnkReport .gridArea .LColResizeGrip .LColResizer { position: absolute; background-color: #dadee5; filter: alpha(opacity=1); opacity: 0; width: 3px; height: 100%; cursor: e-resize; top: 0px; }
.jnkReport .gridArea .LColResizeGrip .LColResizer.resizeDrag { background-color: #6a6e75; filter: alpha(opacity=70); opacity: 0.7; }

/*일반 그리드와 다른 피봇그리드 스타일*/
.jnkReport .pivotTable.scrollGrid > tbody > tr > td {vertical-align:top;}

/*그리드영억 입력 스타일*/
.jnkReport .jnkTable input[type=text], .jnkReport .jnkTable input[type=password] { 
  height : 20px;
  margin-top: 3px;
}
.jnkReport .jnkTable select { height : 24px;}


/*컨텐츠영역 작업영역 그리드 전체선택관련정의*/
.jnkReport .jnkTable ._CHECK_ALL {margin: 0px 0px 0px 0px; padding : 2px 2px 2px 2px; cursor: pointer; width: 18px; height: 18px;}
.jnkReport .jnkTable ._CHECK {margin: 0px 0px 0px 0px; padding : 2px 2px 2px 2px; cursor: pointer; width: 18px; height: 18px;}

/*그리드영역 버튼*/
.jnkReport .jnkTable .ui-state-default a, .jnkReport .jnkTable .ui-state-default a:link, .jnkReport .jnkTable .ui-state-default a:visited
, .jnkReport .jnkTable a.ui-button, .jnkReport .jnkTable a:link.ui-button, .jnkReport .jnkTable a:visited.ui-button
, .jnkReport .jnkTable .ui-button {
  height: 22px;
  padding: 0px 9px 0px 9px;
  border-radius: 4px;
  vertical-align: middle;
  text-align: center;  
  line-height: 22px;
  letter-spacing: -0.24px;
  color: #222;
  border: solid 1px #acb3c0;
  background-color: #fff;
}

.jnkReport .jnkTable .ui-state-hover a, .jnkReport .jnkTable .ui-state-hover a:hover, .jnkReport .jnkTable .ui-state-hover a:link
, .jnkReport .jnkTable .ui-state-hover a:visited, .jnkReport .jnkTable .ui-state-focus a, .jnkReport .jnkTable .ui-state-focus a:hover
, .jnkReport .jnkTable .ui-state-focus a:link, .jnkReport .jnkTable .ui-state-focus a:visited, .jnkReport .jnkTable a.ui-button:hover
, .jnkReport .jnkTable a.ui-button:focus {
  border: solid 1px #353942;
  background-color: #fff;
}

/*그리드영역 페이징*/
.jnkReport .gridArea .rowBox {margin-top: 10px; height:20px;}
.jnkReport .gridArea .rowBox .totRowBox {float: left; margin-left:10px}
.jnkReport .gridArea .rowBox .perPageBox {float: right; margin-right:10px}
.jnkReport .gridArea .rowBox .perPageBox .perPage {width: 30px;height: 16px;text-align: right;padding-left: 10px;padding-right: 10px;padding-top: 0px;padding-bottom: 0px;}

.jnkReport .gridArea .pageBox {
	width: 100%;
	height: 30px;
	margin: 10px 0px 0px 0px;
	object-fit: contain;
	text-align: center;
	cursor:pointer;
}

.jnkReport .gridArea .rowBox + .pageBox {
	margin: -15px 0px 0px 0px;
}

.jnkReport .gridArea .pageBox>div {
	display:inline-block;
}

.jnkReport .gridArea .pageBox .pageNoBox {
	width: 30px;
	height: 30px;
	margin: 0 2px;
	line-height: 30px;
	object-fit: contain;
	border: solid 1px #dadee5;
	background-color: #fff;
	float:left;
	text-align: center;
}

.jnkReport .gridArea .pageBox .pageEmptyBox {
	width: 30px;
	height: 30px;
	margin: 0 2px;
	line-height: 30px;
	object-fit: contain;
	/*
	border: solid 1px #fff;
	background-color: #fff;
	*/
	float:left;
	text-align: center;
}

.jnkReport .gridArea .pageBox .pageNoBox.currPage {
	background-color: #d3d3d3;
}

.jnkReport .gridArea .pageBox .pageNoBox:hover {
	background-color: #e3e3e3;
}

.jnkReport .gridArea .pageBox .pageNoBox.ppageLeft {
    background-image: url(../../images/common/icon/ppageLeft.png);
    background-repeat: no-repeat;
    background-position: center;
	background-size: 9px;	
}
.jnkReport .gridArea .pageBox .pageNoBox.pageLeft {
    background-image: url(../../images/common/icon/pageLeft.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;	
}
.jnkReport .gridArea .pageBox .pageNoBox.ppageRight {
    background-image: url(../../images/common/icon/ppageRight.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;	
}
.jnkReport .gridArea .pageBox .pageNoBox.pageRight {
    background-image: url(../../images/common/icon/pageRight.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;	
}

.jnkReport .gridArea .pageBox input.goPageInput {
	width: 30px;float: left;margin-left: 5px;line-height: 30px;height: 25px; font-size: 12px;
}

.jnkReport .gridArea .pageBox .goPageDiv {
	height: 30px; margin: 0 2px; line-height: 30px; object-fit: contain; float: left;
}

.jnkReport .gridArea .pageBox .pageNoBox.goPageBtn {
	width: 50px;
}


/*팝업영역 jQuery IU 보정*/
.ui-dialog.ui-widget.ui-widget-content {
  border-radius: 20px;
  background-color: #fff;
}

.ui-dialog .ui-dialog-titlebar {
  height: 48px;
  background-color: #fff;	
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px solid #353942;
  border-radius: 0px;	
  margin-left: 20px;
  margin-right: 20px;
  padding: 0px 0px;
}

.ui-dialog .ui-dialog-title {
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 46px;
  letter-spacing: -1.28px;
  text-align: left;
  color: #222;
}

.ui-dialog .ui-dialog-content {
  padding: 0px;
  margin: 10px 20px 0px 20px;
}


.ui-dialog .ui-dialog-buttonpane {
  margin: 10px 20px 23px 20px;
  padding: 0px;
  border-top: 0px;
  height: 36px;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0px 4px 0px 0px;
    height: 36px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: -0.28px;
    text-align: center;
    color: #222;
    border-radius: 6px;
    background-color: #dfe1e6;
    padding: 0px 17px;
}

.ui-dialog .ui-dialog-buttonpane button:hover, .ui-dialog .ui-dialog-buttonpane button:active {
    color: #222;
    background-color: #b7c0c7;
}

.ui-dialog .ui-dialog-buttonpane button:nth-child(1) {
    color: #fff;
    background-color: #cd4d4e;
}

.ui-dialog .ui-dialog-buttonpane button:nth-child(1):hover, .ui-dialog .ui-dialog-buttonpane button:nth-child(1):active {
    color: #fff;
    background-color: #efa900;
}


.ui-widget-overlay {
  opacity: 0.4;
  background-color: #000;
}


/*메시지박스영역*/
.messageCover {
  --w : 100;
  --h : 100;
  position: absolute;
  top: calc( 50% - ( ( var( --h ) * 1px + 88px ) / 2 ) );
  left: calc( 50% - ( ( var( --w ) * 1px  + 150px ) / 2 ) );
  width: calc(  var( --w ) * 1px );
  height: calc(  var( --h ) * 1px );
  padding: 47px 75px 41px 75px;
  border-radius: 20px;
  background-color: #fff;
  border-color: #222;
  border: 1px solid;
  z-index: 1000;
}

.messageCover .iconBox {
    width: 60px;
    height: 60px;
    background-color: #eee;
    background-image: url(../../images/common/icon/pop_bell.png);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: calc( 50% - 30px );
}

.messageCover .messageBox {
  width:100%;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.79;
  letter-spacing: -1.12px;
  text-align: center;
  color: #222;
  margin-top: 17px;
  margin-bottom : 26px;
}

.messageCover .cancelBox {
    width: fit-content;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: -1.12px;
    text-align: center;
    color: #500000;
    cursor: pointer;
    margin-top: 15px;
    position: absolute;
    right: 25px;
    bottom: 15px;
    display:none;
}

.messageCover.cancel .cancelBox {
    display:block;
}

.messageCover .cancelBox:hover {
	color: #800000;
}
  
.messageCover .messageArea {width:100%;}
.messageCover.hasButton .messageArea { width: 100%; height: calc((var(--h)* 1px) - 100px); overflow: auto; }
.messageCover .messageArea p {vertical-align: middle;}
.messageCover .messageButtonArea {width:100%;height:36px;display:table;margin-top: 10px;}
.messageCover .messageButtonArea div {display:table-cell; text-align: center; vertical-align: middle;}

.messageCover.wait .iconBox{ background-image: url(../../images/common/icon/pop_wait.png); }
.messageCover.info .iconBox{ background-image: url(../../images/common/icon/pop_info.png); }
.messageCover.warn .iconBox{ background-image: url(../../images/common/icon/pop_warn.png); }
.messageCover.error .iconBox{ background-image: url(../../images/common/icon/pop_error.png); }
.messageCover.confirm .iconBox{ background-image: url(../../images/common/icon/pop_confirm.png); }

/*
.messageCover .messageBox.wait {background-color:silver; color: black; }
.messageCover .messageBox.info {background-color: gray; color: white; }
.messageCover .messageBox.warn {background-color: orange; color: white; }
.messageCover .messageBox.error {background-color: red; color: white; }
*/

.messageCover .messageButtonArea .ui-button {
    margin: 0px 2px 0px 2px;
    height: 36px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 36px;
    letter-spacing: -0.28px;
    text-align: center;
    color: #222;
    border-radius: 6px;
    background-color: #dfe1e6;
    padding: 0px 17px;
}

.messageCover .messageButtonArea .ui-button:hover, .messageCover .messageButtonArea .ui-button:active {
    color: #222;
    background-color: #b7c0c7;
}

.messageCover .messageButtonArea .ui-button:nth-child(1) {
    color: #fff;
    background-color: #cd4d4e;
}

.messageCover .messageButtonArea .ui-button:nth-child(1):hover, .messageCover .messageButtonArea .ui-button:nth-child(1):active {
    color: #fff;
    background-color: #efa900;
}


/*알림영역*/
.alamCover {position: fixed; left:calc(100% - 500px); top:calc( var(--topAreaHeight)  ); z-index: 1000;}
.alamCover>.alam {
  width:600px; 
  height:60px; 
  position: absolute; 
  left:0px; 
  top:0px; 
  background-color:#555; 
  /*display:table;*/
  border-radius: 6px;
  box-shadow: 2px 3.5px 10px 0 rgba(0, 0, 0, 0.3);
  background-color: #555;  
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.26px;
  text-align: left;
  color: #fff;
  overflow-y: hidden;
  overflow-x: hidden;
}

.alamCover>.alam:nth-last-child(2) {top:60px;}
.alamCover>.alam:nth-last-child(3) {top:120px;}
.alamCover>.alam:nth-last-child(4) {top:180px;}
.alamCover>.alam:nth-last-child(5) {top:240px;}
.alamCover>.alam:nth-last-child(6) {top:300px;}
.alamCover>.alam:nth-last-child(7) {top:360px;}
.alamCover>.alam:nth-last-child(8) {top:420px;}
.alamCover>.alam:nth-last-child(9) {top:480px;}
.alamCover>.alam:nth-last-child(10) {top:540px;}

.alamCover>.alam>div {
  width:100%; 
  height : 60px;
  vertical-align: middle;
  display:table-cell;
  padding-left: 41px;
  background-image: url(../../images/common/icon/alam_normal.png);
  background-position-x: 16px;
  background-position-y: center;
  background-repeat: no-repeat;
}

.alamCover>.alam.normal {
  background-color: #555; 
  color: #fff;
  opacity: 0.5;
 }
.alamCover>.alam.normal>div {
  background-image: url(../../images/common/icon/alam_normal.png);
 }

.alamCover>.alam.info {
  background-color: #555; 
  color: #fff;
  opacity: 1;
 }
.alamCover>.alam.info>div {
  background-image: url(../../images/common/icon/alam_info.png);
 }

.alamCover>.alam.warn {
  background-color: #efb400; 
  color: #fff;
  opacity: 1;
}
.alamCover>.alam.warn>div {
  background-image: url(../../images/common/icon/alam_warn.png);
}

.alamCover>.alam.success {
  background-color: #fff; 
  color: #222;
  opacity: 1;
}
.alamCover>.alam.success>div {
  background-image: url(../../images/common/icon/alam_success.png);
}

.alamCover>.alam.error {
  background-color: #cd4d4e; 
  color: #fff;
  opacity: 1;
}
.alamCover>.alam.error>div {
  background-image: url(../../images/common/icon/alam_error.png);
}

/*에러스타일*/
input[type=text].validation-fail, input[type=password].validation-fail, select.validation-fail, textarea.validation-fail, .validation-fail {background-color : #FFE8E8}

/*필수입력 스타일*/
.jnkReport .formTable > thead > tr > th.requerd-asterisk {background-image: url(../../images/common/icon/required.gif); background-repeat: no-repeat; background-position-x: right; background-position-y: center;}
.jnkReport .searchFormTable > thead > tr > th.requerd-asterisk {background-image: url(../../images/common/icon/required.gif); background-repeat: no-repeat; background-position-x: right; background-position-y: center;}

.jnkReport .jnkTable > thead > tr > th.requerd-asterisk img.requerd-asterisk {width: 15px; height: 15px; vertical-align: middle;}

/*그리드정렬*/
.jnkReport .jnkTable > thead > tr > th.sortAble div.sortAble {background-image: url(../../images/common/icon/sort.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 9.4px; height: 15px; position: absolute; top: 5px; right: 1px; cursor: pointer;opacity: 0.3;}
.jnkReport .jnkTable > thead > tr > th.sortAble div.sortAble:hover {opacity: 1;}
.jnkReport .jnkTable > thead > tr > th.sortAble.filterAble div.sortAble {right: 15px;}
.jnkReport .jnkTable > thead > tr > th.sortAble.asc div.sortAble {background-image: url(../../images/common/icon/sort_asc.png);}
.jnkReport .jnkTable > thead > tr > th.sortAble.desc div.sortAble {background-image: url(../../images/common/icon/sort_desc.png);}

.jnkReport .jnkTable > thead > tr > th.sortAble {padding-right: 15px;}
.jnkReport .jnkTable > thead > tr > th.sortAble.filterAble {padding-right: 30px;}


/*그리드 필터*/
.jnkReport .jnkTable > thead > tr > th.filterAble div.filterAble {background-image: url(../../images/common/icon/filter.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 15px; height: 15px; position: absolute; top: 5px; right: 1px; cursor: pointer;opacity: 0.3;}
.jnkReport .jnkTable > thead > tr > th.filterAble div.filterAble:hover {opacity: 1;}
.jnkReport .jnkTable > thead > tr > th.filterAble.filterActive div.filterAble {background-image: url(../../images/common/icon/filter_on.png);}
._filterCheckAll, ._filterCheck {
    width: 18px;
    height: 18px;
    vertical-align: text-top;
}

.jnkReport .jnkTable > thead > tr > th.filterAble {padding-right: 15px;}


/*팝업, +, - 버튼*/
.jnkReport .imgButton.ui-state-default a, .jnkReport .imgButton.ui-state-default a:link, .jnkReport .imgButton.ui-state-default a:visited
, .jnkReport a.imgButton.ui-button, .jnkReport a.imgButton:link.ui-button, .jnkReport a.imgButton:visited.ui-button
, .jnkReport .imgButton.ui-button
, .jnkReport .jnkTable .imgButton.ui-state-default a, .jnkReport .jnkTable .imgButton.ui-state-default a:link, .jnkReport .jnkTable .imgButton.ui-state-default a:visited
, .jnkReport .jnkTable a.imgButton.ui-button, .jnkReport .jnkTable a.imgButton:link.ui-button, .jnkReport .jnkTable a.imgButton:visited.ui-button
, .jnkReport .jnkTable .imgButton.ui-button 
{
  width:22px;
  height: 22px;
  padding: 0px 0px 0px 0px;
  border-radius: 4px;
  vertical-align: middle;
  text-align: center;  
  line-height: 22px;
  letter-spacing: -0.24px;
  color: #222;
  border: solid 1px #acb3c0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;  
}

.jnkReport .imgButton.ui-state-hover a, .jnkReport .imgButton.ui-state-hover a:hover, .jnkReport .imgButton.ui-state-hover a:link
, .jnkReport .imgButton.ui-state-hover a:visited, .jnkReport .imgButton.ui-state-focus a, .jnkReport .imgButton.ui-state-focus a:hover
, .jnkReport .imgButton.ui-state-focus a:link, .jnkReport .imgButton.ui-state-focus a:visited, .jnkReport a.imgButton.ui-button:hover
, .jnkReport a.imgButton.ui-button:focus
, .jnkReport .imgButton.ui-state-hover a:active, .jnkReport .imgButton.ui-state-focus a:active, .jnkReport a.imgButton.ui-button:active
, .jnkReport a.imgButton.ui-button:focus
, .jnkReport .jnkTable .imgButton.ui-state-hover a, .jnkReport .jnkTable .imgButton.ui-state-hover a:hover, .jnkReport .jnkTable .imgButton.ui-state-hover a:link
, .jnkReport .jnkTable .imgButton.ui-state-hover a:visited, .jnkReport .jnkTable .imgButton.ui-state-focus a, .jnkTable .jnkReport .imgButton.ui-state-focus a:hover
, .jnkReport .jnkTable .imgButton.ui-state-focus a:link, .jnkReport .jnkTable .imgButton.ui-state-focus a:visited, .jnkReport .jnkTable a.imgButton.ui-button:hover
, .jnkReport .jnkTable a.imgButton.ui-button:focus
, .jnkReport .jnkTable .imgButton.ui-state-hover a:active, .jnkReport .jnkTable .imgButton.ui-state-focus a:active, .jnkReport .jnkTable a.imgButton.ui-button:active
, .jnkReport .jnkTable a.imgButton.ui-button:focus
 {
  border: solid 1px #353942;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;  
}

.jnkReport .imgButton.btnPopup, .jnkReport .imgButton.btnPopup:active { background-image: url(../../images/common/icon/popup.png); }
.jnkReport .imgButton.btnPlus, .jnkReport .imgButton.btnPlus:active { background-image: url(../../images/common/icon/plus.png); }
.jnkReport .imgButton.btnMinus, .jnkReport .imgButton.btnMinus:active { background-image: url(../../images/common/icon/minus.png); }

.jnkReport .imgRoundButton { border-radius: 8px !important; width: 17px !important; height: 17px !important;}


/*그리드 필터영역*/
.FILTER_AREA {width:200px; height:300px; position: fixed; background-color: white;z-index: 1000; box-shadow: 2px 2px 2px 2px #9c9c9c;}
.FILTER_AREA.SELECT_BOX {min-width:100px; height:250px;}
.FILTER_AREA.DOUBLE_FILTER {width: 400px;}
.FILTER_AREA.DOUBLE_FILTER.MULTI_SELECT_BOX_FILTER {width: 400px; height:350px;}
.FILTER_AREA.NUMBER_FILTER, .FILTER_AREA.DATE_FILTER {width:210px; height:129px;}
.FILTER_AREA.PICLIST_FILTER {min-width:200px; height:350px;}

.FILTER_AREA div._filter_group { width: calc( 100% - 8px);height: calc( 100% - 8px );margin-top: 3px;margin-bottom: 3px;margin-left: 3px;margin-right: 3px; }
.FILTER_AREA.DOUBLE_FILTER div._filter_group { width: calc( 100% - 6px);height: calc( 100% - 8px ); }

.FILTER_AREA .allGrid {width:100%; height:60px ; overflow:hidden; border: 1px solid #f3f3f3;}
.FILTER_AREA.SELECT_BOX .allGrid {height:30px ;}
.FILTER_AREA.DOUBLE_FILTER .allGrid {width: calc( 50% - 3px);float: left;height:60px;}
.FILTER_AREA.DOUBLE_FILTER .allGrid:eq(0) {margin-right: 4px}

.FILTER_AREA .allGrid table {border-collapse: collapse; width:100%;}
.FILTER_AREA .allGrid table tr {height:30px; border-bottom: 1px solid #f3f3f3; background-color: #f3f3f3; }
.FILTER_AREA .allGrid table tr.trCnt {background-color: #FAFAFA}
/*.FILTER_AREA .allGrid table tr:hover { background-color: #e3e3e3 }*/

.FILTER_AREA .allGrid table tr.trCnt > td.tdCnt {text-align: left;padding-left: 5px;}

.FILTER_AREA .allGrid table tr > td.checkAll {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0px 5px 0px 0px; width:20px; cursor: pointer;}
.FILTER_AREA .allGrid table tr > td.checkAll ._filterDeleteAll {background-image: url(../../images/common/icon/cancelDR.png);background-repeat: no-repeat;background-position-x: center;background-position-y: center;background-size: contain;width: 20px;height: 20px;cursor: pointer;opacity: 0.6;margin-left: 3px;}
.FILTER_AREA .allGrid table tr > td.checkAll:hover ._filterDeleteAll {opacity: 1;}
.FILTER_AREA .allGrid table tr > td.textAll {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0px 5px 0px 0px;}
.FILTER_AREA .allGrid table tr > td.textAll.checkTd {cursor: pointer;}
.FILTER_AREA .allGrid table tr > td.textAll ._filterAlg{background-color: #f3f3f3; outline: none;}

.FILTER_AREA .filterGrid {width:100%; height:calc(100% - 90px)  ; overflow-x: hidden; overflow-y: auto; border: 1px solid #f3f3f3;}
.FILTER_AREA.PICLIST_FILTER .filterGrid {height:calc(100% - 140px);}

.FILTER_AREA.SELECT_BOX .filterGrid {height:calc(100% - 30px);}
.FILTER_AREA.DOUBLE_FILTER .filterGrid {width: calc( 50% - 3px);float: left;height: calc( 100% - 90px ) ;}
.FILTER_AREA.DOUBLE_FILTER.MULTI_SELECT_BOX_FILTER .filterGrid {height: calc( 100% - 120px ) ;}
.FILTER_AREA.DOUBLE_FILTER .filterGrid:eq(0) {margin-right: 4px}
.FILTER_AREA.NUMBER_FILTER .filterGrid, .FILTER_AREA.DATE_FILTER .filterGrid {height: calc( 100% - 30px ) ; overflow: hidden;}

.FILTER_AREA .filterGrid table {border-collapse: collapse; width:100%;}
.FILTER_AREA .filterGrid table tr {height:30px; border-bottom: 1px solid #f3f3f3; cursor: pointer;background-color: #fff; }
.FILTER_AREA .filterGrid table tr:nth-child(even) {background-color: #f3f3f3;}
.FILTER_AREA .filterGrid table tr:hover { background-color: #e3e3e3 }
.FILTER_AREA .filterGrid table tr > td.checkTd {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0px 5px 0px 0px; width:20px;}
.FILTER_AREA .filterGrid table tr > td.checkTd ._filterDelete {background-image: url(../../images/common/icon/cancelDR.png);background-repeat: no-repeat;background-position-x: center;background-position-y: center;background-size: contain;width: 20px;height: 20px;cursor: pointer;opacity: 0.6;margin-left: 3px;}

.FILTER_AREA .filterGrid table tr > td.selectAlg {width:75px;}
.FILTER_AREA .filterGrid table tr:hover > td.checkTd ._filterDelete {opacity: 1;}
.FILTER_AREA .filterGrid table tr > td.textTd {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0px 5px 0px 0px;}

.FILTER_AREA.SELECT_BOX .filterGrid table tr.select { background-color: #262696; color:#fff }

.FILTER_AREA input:focus, .FILTER_AREA select:focus {outline: none;}

.FILTER_AREA .input-date {width:62px;}

.FILTER_AREA .filterButton {width:100%; height:26px; text-align: right; background-color: #dfe1e5; border-left: 1px solid #f3f3f3;border-right: 1px solid #f3f3f3;border-bottom: 1px solid #f3f3f3;padding-top: 2px;}
.FILTER_AREA .filterButton a {margin-right: 5px;}

.FILTER_AREA.DOUBLE_FILTER .filterButton {float: left;width: calc( 100% - 2px );}
.FILTER_AREA .filterButton .pasteClipboard {
    margin-left: 5px;
    float: left;
    width: 5px;
    height: 20px;
    background-color: #800000;
    color: #800000;
    caret-color: #fff;
}
.FILTER_AREA .filterButton .addPicList {
    margin-left: 2px;
    float: left;
    width: 70px;
    height: 20px;
}

.FILTER_AREA div._searchBox {width: calc(100% - 6px); float: left; margin-top: 2px;}
.FILTER_AREA div._searchBox table { width: 100%; border-collapse: collapse; height: 30px; }
.FILTER_AREA div._searchBox table tr { border-bottom: 1px solid #f3f3f3; background-color: #f3f3f3; }
.FILTER_AREA div._searchBox table tr th { width: 90px; }

.FILTER_AREA.PICLIST_FILTER .noticeArea {width:100%; height:48px; border-left: 1px solid #f3f3f3;border-right: 1px solid #f3f3f3;border-bottom: 1px solid #f3f3f3;}
.FILTER_AREA.PICLIST_FILTER .noticeArea font {color:#800000; font-weight: bold;}

/*그리드필터영역 버튼*/
.FILTER_AREA .ui-state-default a, .FILTER_AREA .ui-state-default a:link, .FILTER_AREA .ui-state-default a:visited
, .FILTER_AREA a.ui-button, .FILTER_AREA a:link.ui-button, .FILTER_AREA a:visited.ui-button
, .FILTER_AREA .ui-button {
  height: 22px;
  padding: 0px 9px 0px 9px;
  border-radius: 4px;
  vertical-align: middle;
  text-align: center;  
  line-height: 22px;
  letter-spacing: -0.24px;
  color: #222;
  border: solid 1px #acb3c0;
  background-color: #fff;
}

.FILTER_AREA .ui-state-hover a, .FILTER_AREA .ui-state-hover a:hover, .FILTER_AREA .ui-state-hover a:link
, .FILTER_AREA .ui-state-hover a:visited, .FILTER_AREA .ui-state-focus a, .FILTER_AREA .ui-state-focus a:hover
, .FILTER_AREA .ui-state-focus a:link, .FILTER_AREA .ui-state-focus a:visited, .FILTER_AREA a.ui-button:hover
, .FILTER_AREA a.ui-button:focus {
  border: solid 1px #353942;
  background-color: #fff;
}

.FILTER_AREA .filterButton a.filterOk {color: #fff;background-color: #cd4d4e;}
.FILTER_AREA .filterButton a.filterOk:hover, .FILTER_AREA .filterButton a.filterOk:focus {color: #fff;background-color: #efa900;}

.FILTER_AREA td.sortAble {position : relative}
.FILTER_AREA td.sortAble div.sortAble {background-image: url(../../images/common/icon/sortB.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 9.4px; height: 15px; position: absolute; top: 7px; right: 2px; cursor: pointer;opacity: 0.3;}
.FILTER_AREA td.sortAble div.sortAble:hover {opacity: 1;}
.FILTER_AREA td.sortAble.asc div.sortAble {background-image: url(../../images/common/icon/sortB_asc.png);}
.FILTER_AREA td.sortAble.desc div.sortAble {background-image: url(../../images/common/icon/sortB_desc.png);}

.FILTER_AREA input._inputFilter, .FILTER_AREA select._filterAlg {width: calc(100% - 40px);}
 
.FILTER_AREA.SELECT_BOX input._inputFilter {width: calc(100% - 45px);margin-left : 2px;}

.FILTER_AREA > .seResize {
	position: absolute;
    right: 0px;
    bottom: 0px;
    width: 10px;
    height: 10px;
    background-image: url(../../images/common/icon/resizeSEBox_a1.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: se-resize;
}

.FILTER_AREA.INPUT_FILENAME_SMALL {width:300px; height: 40px; overflow: hidden;}
.FILTER_AREA.INPUT_FILENAME_SMALL .filterGrid {height: 100%;}
.FILTER_AREA.INPUT_FILENAME_SMALL .filterGrid table tr:hover {background-color: #fff;}
.FILTER_AREA.INPUT_FILENAME_SMALL .filterGrid .fileNameTitle {width: 60px; text-align: right; padding-right: 5px;}
.FILTER_AREA.INPUT_FILENAME_SMALL .filterGrid .fileNameButton {width: 60px; text-align: center; margin-right: 0px; background-color: #fff;}
 

/*컨텐츠영역 작업영역 popup*/
.popupArea {width: 100%; height : 100px; overflow:auto; background-color: white;}

.popupArea .areabar {background-color: #fff;}
.popupArea .vAreabar {background-color: #fff;}
.popupArea .workTitleVAreabar {background-color: #fff; }

.popupArea .tabArea {width: 100%; height: calc(var(--tabMenuHeight) - 8px);}
.popupArea .tabArea .tab {float: left; text-align: center; width: 100px; height: 100%; display: flex; align-items: center; justify-content: center; border-top-left-radius: 6px; border-top-right-radius: 6px; cursor: pointer; border: 1px solid #dee2e7; background-color: #dee2e7;}
.popupArea .tabArea .current{border: 1px solid #dee2e7; background-color: #fff; }

/*그리드 컬럼 설정*/
  .columnConfig .columnArea {
      background-color: #f8f8fb;
      width: 100%;
      height : 100%;
      float: left;
      overflow-y: auto;
	}
	
	.columnConfig ul.itemArea {
		list-style-type: none;
		margin: 0;
		padding: 5px 0 0 0;
		float: left;
		width: 100%;
		min-height: calc(100% - 5px);
	}
	
	.columnConfig ul.itemArea li {
		margin: 0 5px 5px 5px;
		padding: 5px;
		background-color: #fff;
		height:18px;
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;		
	}
	
	.columnConfig .itemArea label {
		vertical-align : 2px;
	}
	
	.columnConfig input, ._configBase input {
		padding-left: 5px;
		padding-right: 5px;
	}

	.columnConfig select, ._configBase select {
		padding-left: 5px;
		padding-right: 5px;
		width : calc(100% - 25px);
	}
	
	.columnConfig .chkLabel, ._configBase .chkLabel {
		vertical-align: middle;
	}
  
  .columnConfig .columnArea li.hover {background-color: #e3e3e3;}
  .columnConfig .columnArea li.select {background-color: #d3d3d3;}
  /*
  ._popPivotColumnConfig.configHarf {min-width: 600px;}
  ._popPivotColumnConfig.configFull {min-width: 800px;}
  */
  .columnConfig.configHarf .harfDisplay {display : none;}
  
  .columnConfig.configHarf .harfWidth {width: calc( (100% - var(--vAreabarWidth) - var(--vAreabarWidth) - var(--vAreabarWidth) - 220px) / 3 );}
  .columnConfig.configFull .harfWidth {width: 200px;}
  
  .columnConfig .formTable, ._configBase .formTable {
	    float: unset;
		width: 100%;
  }
  
  .columnConfig ._dataStyleNavBar, ._configBase ._dataStyleNavBar {
  		background-color: #f8f8fb;
  		border: 1px solid #dadee5;
  		line-height: 25px;
  		padding-left:10px;
	    background-image: url(../../images/common/icon/hide.png);
	    background-repeat: no-repeat;
	    background-position: right 10px center;
	    background-size: 10px;
  }
  
  .columnConfig ._dataStyleNavBar._NavBarHide, ._configBase ._dataStyleNavBar._NavBarHide {
	    background-image: url(../../images/common/icon/show.png);
  }
  
  .columnConfig ._colunmOption, ._configBase {
  		width:100%
  }
  
  
/*그리드정렬*/
.columnConfig ul.itemArea li {position: relative;}
.columnConfig ul.itemArea li.sortAble div.sortAble {background-image: url(../../images/common/icon/sortB.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 9.4px; height: 15px; position: absolute; top: 5px; right: 1px; cursor: pointer;opacity: 0.3;}
.columnConfig ul.itemArea li.sortAble div.sortAble:hover {opacity: 1;}
.columnConfig ul.itemArea li.sortAble.filterAble div.sortAble {right: 15px;}
.columnConfig ul.itemArea li.sortAble.asc div.sortAble {background-image: url(../../images/common/icon/sortB_asc.png);}
.columnConfig ul.itemArea li.sortAble.desc div.sortAble {background-image: url(../../images/common/icon/sortB_desc.png);}

/*그리드 필터*/
.columnConfig ul.itemArea li.filterAble div.filterAble {background-image: url(../../images/common/icon/filterB.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: contain; width: 15px; height: 15px; position: absolute; top: 5px; right: 1px; cursor: pointer;opacity: 0.3;}
.columnConfig ul.itemArea li.filterAble.filterActive div.filterAble {opacity: 0.5;}
.columnConfig ul.itemArea li.filterAble div.filterAble:hover {opacity: 1;}

.columnConfig ul.itemArea li.filterAble {padding-right: 15px;}
.columnConfig ul.itemArea li.filterAble > div.dataDiv {width:89px} 
.columnConfig ul.itemArea li.sortAble {padding-right: 15px;}
.columnConfig ul.itemArea li.sortAble > div.dataDiv {width:89px} 

.columnConfig ul.itemArea li.sortAble.filterAble {padding-right: 30px;}

.columnConfig ul.itemArea li.sortAble.filterAble > div.dataDiv {width:74px}  


/*메타뷰 Edit 작업영역*/
.metaViewEdit {width: 100%; height : 100px; overflow:auto; background-color: white;}

.metaViewEdit .areabar {background-color: #fff;}
.metaViewEdit .vAreabar {background-color: #fff;}
.metaViewEdit .workTitleVAreabar {background-color: #fff; }

.metaViewEdit .tabArea {width: 100%; height: calc(var(--tabMenuHeight) - 8px);}
.metaViewEdit .tabArea .tab {float: left; text-align: center; width: 100px; height: 100%; display: flex; align-items: center; justify-content: center; border-top-left-radius: 6px; border-top-right-radius: 6px; cursor: pointer; border: 1px solid #dee2e7; background-color: #dee2e7;}
.metaViewEdit .tabArea .current{border: 1px solid #dee2e7; background-color: #fff; }

/*메타뷰 Edit 컬럼 설정*/
  .metaViewEdit .columnArea {
      background-color: #f8f8fb;
      width: 100%;
      height : 100%;
      float: left;
      overflow-y: auto;
	}
	
	.metaViewEdit ul.itemArea {
		list-style-type: none;
		margin: 0;
		padding: 5px 0 0 0;
		float: left;
		width: 100%;
		min-height: calc(100% - 5px);
	}
	
	.metaViewEdit ul.itemArea li {
		margin: 0 2px 2px 2px;
		padding: 5px 10px 5px 10px;
		background-color: #fff;
		height:18px;
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;
		
	    float: left;
	    width: unset;
	    max-width: 170px;
	    min-width: 40px;
		border: 1px solid #b5b8c4;
		
		cursor : pointer;
	}
	
	.metaViewEdit ul.itemArea._columnArea li, .metaViewEdit ul.itemArea._parametaList li {
		margin: 0 5px 5px 5px;
		padding: 5px;

	    float: unset;
	    width: unset;
	    max-width: unset;
	    min-width: unset;
		border: unset;
	}
	
	.metaViewEdit ul.itemArea li.measureColumn { background-color: #EBF6DF; }
		
	
	.metaViewEdit .itemArea label {
		vertical-align : 2px;
	}
	
	/*
	.metaViewEdit input, ._configBase input {
		padding-left: 5px;
		padding-right: 5px;
	}

	.metaViewEdit select, ._configBase select {
		padding-left: 5px;
		padding-right: 5px;
		width : calc(100% - 25px);
	}
	
	.metaViewEdit .chkLabel, ._configBase .chkLabel {
		vertical-align: middle;
	}
	*/
  
  .metaViewEdit ul.itemArea li:hover {background-color: #e3e3e3;}
  .metaViewEdit ul.itemArea li.select {background-color: #d3d3d3;}

  .metaViewEdit .harfWidth {width: 347px;}
  .metaViewEdit .optionWidth {width : calc( 100% - 230px - var(--vAreabarWidth) - 230px - var(--vAreabarWidth) - 230px - var(--vAreabarWidth) - 230px - var(--vAreabarWidth) );}
  .metaViewEdit .whereBlockWidth {width : calc( 230px + var(--vAreabarWidth) + 230px + var(--vAreabarWidth) + 230px );}
  
  .metaViewEdit .formTable {
	    float: unset;
		width: 100%;
  }
  
  .metaViewEdit ._dataStyleNavBar {
  		background-color: #f8f8fb;
  		border: 1px solid #dadee5;
  		line-height: 25px;
  		padding-left:10px;
	    background-image: url(../../images/common/icon/hide.png);
	    background-repeat: no-repeat;
	    background-position: right 10px center;
	    background-size: 10px;
  }
  
  .metaViewEdit ._dataStyleNavBar._NavBarHide {
	    background-image: url(../../images/common/icon/show.png);
  }
  
  .metaViewEdit ._colunmOption, ._configBase {
  		width:100%
  }

/*메타뷰 Where 조회조건*/
.jnkReport .subContent .metaViewEdit .whereTable input[type=text], select {width: calc(100% - 10px); padding-left: 5px; padding-right: 5px;}
.jnkReport .subContent .metaViewEdit .whereTable{background-color:#f8f8fb; width:100%; height: calc(100% - var(--workTitleHeight) - var(--areabarHeight) - 1px); overflow-y: auto;}

.jnkReport .subContent .metaViewEdit .whereTable ul{background-color:#fff; width:100%; list-style-type: none; margin: 0; padding: 0 0 0 0; height: fit-content; display: table;}
.jnkReport .subContent .metaViewEdit .whereTable ul > li{float:left; text-align: center; border-bottom: 1px solid #dadee5; padding-top : 0px; padding-bottom : 0px;height:30px;}
.jnkReport .subContent .metaViewEdit .whereTable ul > li.dragdrop{
	width:21px; 
	background-image: url(../../images/dashboard/design/drag_indicator.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	opacity: 0.7;
}
.jnkReport .subContent .metaViewEdit .whereTable ul > li.dragdrop:hover{background-image: url(../../images/dashboard/design/drag_indicator_hover.png); background-color: #cccccc; opacity: 1;}

.jnkReport .subContent .metaViewEdit .whereTable ul > li.btnDelWhere{
	width:25px; 
	background-image: url(../../images/dashboard/design/delete.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	border-left: 1px solid #dadee5;
	opacity: 0.7;
}
.jnkReport .subContent .metaViewEdit .whereTable ul > li.btnDelWhere:hover{background-image: url(../../images/dashboard/design/delete_hover.png); background-color: #cccccc; opacity: 1;}


.jnkReport .subContent .metaViewEdit .whereTable ul:not(.spanRow) > li.whereRelationType{width:70px; border-right: 1px solid #dadee5; /*border-left: 1px solid #dadee5;*/}
.jnkReport .subContent .metaViewEdit .whereTable ul:not(.spanRow) > li.metaColumnAlias{width: 182px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left; padding-left: 2px; line-height: 30px;}
.jnkReport .subContent .metaViewEdit .whereTable ul:not(.spanRow) > li.operatorType{width:calc( 100% - 21px - 1px - 70px - 184px - 90px - 184px - 1px - 25px - 2px ); border-left: 1px solid #dadee5; border-right: 1px solid #dadee5;}
.jnkReport .subContent .metaViewEdit .whereTable ul:not(.spanRow) > li.parametaRelationType{width:90px; }
.jnkReport .subContent .metaViewEdit .whereTable ul:not(.spanRow) > li.parameta{width:184px; }

.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere > ul:last-child > li{border-bottom: 0px solid #dadee5; }

.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.whereRelationType{width:70px; border-right: 1px solid #dadee5;/* border-left: 1px solid #dadee5;*/}
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.openParenthesis{width: calc( 100% - 21px - 1px - 70px - 10px - 1px - 25px - 1px ); padding-left: 10px; padding-top: 5px; height: 25px; text-align: left;}
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere{width:calc( 100% - 20px - 2px ); text-align: left; border-bottom: 0px solid #dadee5; padding-top : 0px; padding-bottom : 0px; margin-left: 20px; border-left: 1px solid #dadee5; height:unset}
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.closeParenthesis{width: calc(100% - 10px - 2px ); padding-left: 10px; padding-top: 5px; height: 25px; text-align: left;border-top: 1px solid #dadee5;border-right: 0px solid #dadee5;border-left: 0px solid #dadee5;}

.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere > ul > li.whereRelationType{border-left: 0px solid #dadee5; }
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere > ul > li.metaColumnAlias{width: 171px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left; padding-left: 2px; line-height: 30px;}
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere > ul > li.operatorType{width:calc( 100% - 21px - 1px - 70px - 173px - 90px - 173px - 1px - 25px - 2px );}
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere > ul > li.parameta{width:173px; }

.jnkReport .subContent .metaViewEdit .whereTable > ul:first-child{padding: 5px 0 0 0;}
.jnkReport .subContent .metaViewEdit .whereTable > ul:first-child > li{float:left; text-align: center; border-top: 1px solid #dadee5; border-bottom: 1px solid #dadee5; padding-top : 3px; padding-bottom : 3px;}

.jnkReport .subContent .metaViewEdit .whereTable > ul:not(:first-child)  > li.whereRelationType > select {display:none;}
.jnkReport .subContent .metaViewEdit .whereTable ul.spanRow > li.childWhere > ul:not(:first-child)  > li.whereRelationType > select {display:none;}

.jnkReport .subContent .metaViewEdit .whereTable > ul:first-child.spanRow > li.childWhere{border-top: 0px solid #dadee5;}


/*메타뷰 Having 조회조건*/
.jnkReport .subContent .metaViewEdit .havingTable input[type=text], select {width: calc(100% - 10px); padding-left: 5px; padding-right: 5px;}
.jnkReport .subContent .metaViewEdit .havingTable{background-color:#f8f8fb; width:100%; height: calc(100% - var(--workTitleHeight) - var(--areabarHeight) - 1px); overflow-y: auto;}

.jnkReport .subContent .metaViewEdit .havingTable ul{background-color:#fff; width:100%; list-style-type: none; margin: 0; padding: 0 0 0 0; height: fit-content; display: table;}
.jnkReport .subContent .metaViewEdit .havingTable ul > li{float:left; text-align: center; border-bottom: 1px solid #dadee5; padding-top : 0px; padding-bottom : 0px;height:30px;}
.jnkReport .subContent .metaViewEdit .havingTable ul > li.dragdrop{
	width:21px; 
	background-image: url(../../images/dashboard/design/drag_indicator.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	opacity: 0.7;
}
.jnkReport .subContent .metaViewEdit .havingTable ul > li.dragdrop:hover{background-image: url(../../images/dashboard/design/drag_indicator_hover.png); background-color: #cccccc; opacity: 1;}

.jnkReport .subContent .metaViewEdit .havingTable ul > li.btnDelWhere{
	width:25px; 
	background-image: url(../../images/dashboard/design/delete.png); background-repeat: no-repeat; background-size: 18px; background-position: center center; 
	cursor:pointer; 
	border-left: 1px solid #dadee5;
	opacity: 0.7;
}
.jnkReport .subContent .metaViewEdit .havingTable ul > li.btnDelWhere:hover{background-image: url(../../images/dashboard/design/delete_hover.png); background-color: #cccccc; opacity: 1;}


.jnkReport .subContent .metaViewEdit .havingTable ul:not(.spanRow) > li.whereRelationType{width:70px; border-right: 1px solid #dadee5; /*border-left: 1px solid #dadee5;*/}
.jnkReport .subContent .metaViewEdit .havingTable ul:not(.spanRow) > li.calcMode{width:115px;} 
.jnkReport .subContent .metaViewEdit .havingTable ul:not(.spanRow) > li.metaColumnAlias{width: 124px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left; padding-left: 2px; line-height: 30px;}
.jnkReport .subContent .metaViewEdit .havingTable ul:not(.spanRow) > li.operatorType{width:calc( 100% - 21px - 1px - 70px - 115px - 126px - 90px - 126px - 1px - 25px - 2px ); border-left: 1px solid #dadee5; border-right: 1px solid #dadee5;}
.jnkReport .subContent .metaViewEdit .havingTable ul:not(.spanRow) > li.parametaRelationType{width:90px; }
.jnkReport .subContent .metaViewEdit .havingTable ul:not(.spanRow) > li.parameta{width:126px; }

.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul:last-child > li{border-bottom: 0px solid #dadee5; }

.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.whereRelationType{width:70px; border-right: 1px solid #dadee5;/* border-left: 1px solid #dadee5;*/}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.openParenthesis{width: calc( 100% - 21px - 1px - 70px - 10px - 1px - 25px - 1px ); padding-left: 10px; padding-top: 5px; height: 25px; text-align: left;}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere{width:calc( 100% - 20px - 2px ); text-align: left; border-bottom: 0px solid #dadee5; padding-top : 0px; padding-bottom : 0px; margin-left: 20px; border-left: 1px solid #dadee5; height:unset}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.closeParenthesis{width: calc(100% - 10px - 2px ); padding-left: 10px; padding-top: 5px; height: 25px; text-align: left;border-top: 1px solid #dadee5;border-right: 0px solid #dadee5;border-left: 0px solid #dadee5;}

.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul > li.whereRelationType{border-left: 0px solid #dadee5; }
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul > li.calcMode{width:115x;}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul > li.metaColumnAlias{width: 114px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left; padding-left: 2px; line-height: 30px;}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul > li.operatorType{width:calc( 100% - 21px - 1px - 70px - 115px - 116px - 90px - 116px - 1px - 25px - 2px );}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul > li.parameta{width:116px; }

.jnkReport .subContent .metaViewEdit .havingTable > ul:first-child{padding: 5px 0 0 0;}
.jnkReport .subContent .metaViewEdit .havingTable > ul:first-child > li{float:left; text-align: center; border-top: 1px solid #dadee5; border-bottom: 1px solid #dadee5; padding-top : 3px; padding-bottom : 3px;}

.jnkReport .subContent .metaViewEdit .havingTable > ul:not(:first-child)  > li.whereRelationType > select {display:none;}
.jnkReport .subContent .metaViewEdit .havingTable ul.spanRow > li.childWhere > ul:not(:first-child)  > li.whereRelationType > select {display:none;}

.jnkReport .subContent .metaViewEdit .havingTable > ul:first-child.spanRow > li.childWhere{border-top: 0px solid #dadee5;}


/*정렬순서*/
.jnkReport .subContent .metaViewEdit .orderbyTable{ background-color: #f8f8fb; width:100%; height: calc(100% - var(--workTitleHeight) - var(--areabarHeight) - 1px); overflow-y: auto;}

.jnkReport .subContent .metaViewEdit .orderbyTable ul {
	list-style-type: none;
	margin: 0;
	padding: 5px 0 0 0;
	float: left;
	width: 100%;
	min-height: calc(100% - 5px);
}

.jnkReport .subContent .metaViewEdit .orderbyTable ul > li {
	margin: 0 2px 2px 2px;
	padding: 5px 10px 5px 10px;
	background-color: #fff;
	height:18px;
	text-overflow: ellipsis; 
	overflow: hidden; 
	white-space: nowrap;
	
    float: left;
    width: unset;
    max-width: 170px;
    min-width: 40px;
	border: 1px solid #b5b8c4;
	position: relative;
	
	cursor : pointer;
}

.jnkReport .subContent .metaViewEdit .orderbyTable ul > li:hover {background-color: #e3e3e3;}
.jnkReport .subContent .metaViewEdit .orderbyTable ul > li.select {background-color: #d3d3d3;}


.jnkReport .subContent .metaViewEdit .orderbyTable ul > li.asc div.sortAble { background-image: url(../../images/common/icon/sortB_asc.png); }
.jnkReport .subContent .metaViewEdit .orderbyTable ul > li.desc div.sortAble { background-image: url(../../images/common/icon/sortB_desc.png); }

.jnkReport .subContent .metaViewEdit .orderbyTable ul > li div.sortAble {
    background-image: url(../../images/common/icon/sortB.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    width: 9.4px;
    height: 15px;
    position: absolute;
    top: 5px;
    right: 1px;
    cursor: pointer;
    opacity: 0.3;
}

.jnkReport .subContent .metaViewEdit .orderbyTable ul > li > div.orderbyTitle {
	text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left;
    height: 15px;
    vertical-align : 2px;
    max-width : 240px;
    min-width : 40px;
    padding-right: 4px;
}

/*메타뷰에디트 정렬변경*/
.metaview-design-placeholder {
	width:15px;
	height:100%;
	background-color: #B6BBCC;
	list-style: none;
	padding: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px;
}

.whereTable .metaview-design-placeholder {
	width:unset;
	height: 30px;
	background-color: #fff;
	border: 1px solid #B6BBCC;
}

.havingTable .metaview-design-placeholder {
	width:unset;
	height: 30px;
	background-color: #fff;
	border: 1px solid #B6BBCC;
}

._columnArea .metaview-design-placeholder { display : none; }


.metaview-design-helper {
	background-color: #9FA4B3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 5px 5px 5px;
    border-right: 1px solid #dadee5;
    border-left: 1px solid #dadee5;
    border-top: 1px solid #dadee5;
    border-bottom: 1px solid #dadee5;
    font-weight: normal;
    color: #fff;	
    border-radius: 5px 5px 5px 5px;
    opacity:.7;
    
    height: 18px !important;
    width: unset !important;
    max-width: 170px !important;
    min-width: 40px !important;
    
    cursor : pointer;
}


  	.SparkChartColumn .sparkColumns {
      background-color: #f8f8fb;
      width: 100%;
      height : 100%;
      overflow-y: auto;
	}
	
	.SparkChartColumn .sparkColumns ul {
		list-style-type: none;
		margin: 0;
		padding: 5px 0 0 0;
		width: 100%;
		min-height: calc(100% - 5px);
	}
	
	.SparkChartColumn .sparkColumns ul li {
		margin: 0 5px 5px 5px;
		padding: 5px;
		background-color: #fff;
		height:18px;
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;		
	}
	
	.SparkChartColumn .sparkColumns label {
		vertical-align : 2px;
	}

  
	.SparkChartColumn .sparkColumns li.hover {background-color: #e3e3e3;}
	.SparkChartColumn .sparkColumns li.select {background-color: #d3d3d3;}


  	.dragDropChkList  {
      background-color: #f8f8fb;
      width: 100%;
      height : 100%;
      overflow-y: auto;
	}
	
	.dragDropChkList ul {
		list-style-type: none;
		margin: 0;
		padding: 5px 0 0 0;
		width: 100%;
		min-height: calc(100% - 5px);
	}
	
	.dragDropChkList ul li {
		margin: 0 5px 5px 5px;
		padding: 5px;
		background-color: #fff;
		height:18px;
		text-overflow: ellipsis; 
		overflow: hidden; 
		white-space: nowrap;		
	}
	
	.dragDropChkList label {
		vertical-align : 2px;
	}

  
	.dragDropChkList li.hover {background-color: #e3e3e3;}
	.dragDropChkList li.select {background-color: #d3d3d3;}


  
	.cd-accordion-tree {
	  font-size: 12px;
	  color: #222;
	  width: 100%;
	  background-color: #fff;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.cd-accordion-tree a {
	  color: #2a303e;
	  text-decoration: none;
	}
	
	.cd-accordion-tree a, .cd-accordion-tree label {
	  font-weight: bold;
	}
	
	.cd-accordion-tree, .cd-accordion-tree ul {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;	
		list-style: none;
	}
	
	.cd-accordion-tree li {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;	
	}
	
	.cd-accordion-tree ul {
	  /* by default hide all sub menus */
	  display: none;
	}
	.cd-accordion-tree li {
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	.cd-accordion-tree input[type=checkbox] {
	  /* hide native checkbox */
	  position: absolute;
	  opacity: 0;
	  width:0px;
	  height:0px;
	}
	.cd-accordion-tree label, .cd-accordion-tree a {
	  position: relative;
	  display: block;
	  padding: 10px 10px 10px 24px;
	  background: #fff;
	  color: #8c8c8c;
	}
	
	.cd-accordion-tree a {
	  background: #2a303e;
	}
	
	.cd-accordion-tree label::before, .cd-accordion-tree label::after, .cd-accordion-tree a::before {
	  /* icons */
	  content: '';
	  display: inline-block;
	  position: absolute;
	  top: 50%;
	  -webkit-transform: translateY(-50%);
	  -moz-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
	  -o-transform: translateY(-50%);
	  transform: translateY(-50%);
	}
	.cd-accordion-tree label {
	  cursor: pointer;
	  padding-left:44px;
	  /* border-bottom: 1px solid #acb3c0; */
	}
	.cd-accordion-tree label::after {
	  /*Arraw Icon*/
	  width: 10px;
	  height: 7px;
	  background-image: url(../../images/common/icon/broken_off.png);
	  background-repeat: no-repeat;
	  right: 16px;
	}
	.cd-accordion-tree input[type=checkbox]:checked + label::after {
	  background-image: url(../../images/common/icon/broken_gray.png);
	}
	.cd-accordion-tree input[type=checkbox]:checked + label {
	  background-color : #f3f3f3;
	  color: #222;
	}
	
	.cd-accordion-tree label::before {
	  /*Arraw Icon*/
	  width: 16px;
	  height: 15px;  
	  background-image: url(../../images/common/icon/folder_gray.png);
	  background-repeat: no-repeat;
	  left: 20px;
	}
	
	.cd-accordion-tree a::before {
	  /*Arraw Icon*/
	  width: 16px;
	  height: 15px;  
	  background-image: url(../../images/common/icon/file.png);
	  background-repeat: no-repeat;
	  left: 20px;
	}
	
	.cd-accordion-tree input[type=checkbox]:checked + label + ul,
	.cd-accordion-tree input[type=checkbox]:checked + label:nth-of-type(n) + ul {
	  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
	  /* show children when item is checked */
	  display: block;
	}
	.cd-accordion-tree ul label,
	.cd-accordion-tree ul a {
	  padding-left: 60px; 
	}
	.no-touch .cd-accordion-tree ul label:hover, .no-touch
	.cd-accordion-tree ul a:hover {
	  background: #30373d;
	}
	.cd-accordion-tree > li:last-of-type > label,
	.cd-accordion-tree > li:last-of-type > a,
	.cd-accordion-tree > li > ul > li:last-of-type label,
	.cd-accordion-tree > li > ul > li:last-of-type a {
	  box-shadow: none;
	}
	.cd-accordion-tree ul label::before,
	.cd-accordion-tree ul a::before {
	  left: 36px;
	}
	.cd-accordion-tree ul ul label,
	.cd-accordion-tree ul ul a {
	  padding-left: 76px;
	}
	.cd-accordion-tree ul ul label::before,
	.cd-accordion-tree ul ul a::before {
	  left: 52px;
	}
	.cd-accordion-tree ul ul ul label,
	.cd-accordion-tree ul ul ul a {
	  padding-left: 92px;
	}
	.cd-accordion-tree ul ul ul label::before,
	.cd-accordion-tree ul ul ul a::before {
	  left: 68px;
	}
	.cd-accordion-tree ul ul ul ul a {
	  padding-left: 108px;
	}
	.cd-accordion-tree ul ul ul ul a::before {
	  left: 84px;
	}
	
	.cd-accordion-tree.animated label::before {
	  /* this class is used if you're using jquery to animate the accordion */
	  -webkit-transition: -webkit-transform 0.3s;
	  -moz-transition: -moz-transform 0.3s;
	  transition: transform 0.3s;
	}
	

	.tree_content .cd-accordion-tree input[type=checkbox]:checked + label {
		background: #fff;
		color: #8c8c8c;
	}

	.tree_content .cd-accordion-tree .clickFolder.selected {
	  background-color : #e2e2ff !important;
	}
	
	
/*component 스타일*/
.compBox {
	width : 100%;
	height: 100%;
	box-sizing: border-box;
}
.compImg {
	width : 100%;
	height: 100%;
}


/*팝업윈도우*/
#mainBox.popView #tabMenu { width: calc(100% - 282px); }
#mainBox.popView #content {width: calc(100%); height: calc(100% - var(--tabMenuHeight)); }
#mainBox.popView .jnkReport div.subContent > div.buttonArea { top: calc(((var(--tabMenuHeight) - var(--buttonAreaHeight)) / 2) + 2px); }

#mainBox.popView.noButton #tabMenu { display : none }
#mainBox.popView.noButton #content {width: calc(100%); height: calc(100%); }
#mainBox.popView.noButton .jnkReport div.subContent > div.buttonArea { display:none; }


/*스크롤바*/
.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {height: 14px;min-height: 7px;}
.scrollbar-dynamic > .scroll-element .scroll-element_size {background-color: #B3B3B3;}
.scrollbar-dynamic > .scroll-element .scroll-bar {background-color: #3A3C3D;}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {opacity: 0.8;}
.scrollbar-dynamic > .scroll-element .scroll-element_outer {opacity: 0.4;}

.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
    min-width: 7px;
    width: 14px;
}

/*메시지박스타 팝업이 열렸을때 z-index 조정*/
.unsetZIndex .buttonArea
, .unsetZIndex .optionEdit
, .unsetZIndex .dataSetEdit
, .unsetZIndex .pullDownArea
, .unsetZIndex .ColResizeGrip
, .unsetZIndex .LColResizeGrip
, .unsetZIndex .layerButtonBox
, .unsetZIndex .mainDashboardArea
, .unsetZIndex .layerSelectArea

, .unsetZIndex .optionTable
, .unsetZIndex .optionColumn
, .unsetZIndex .optionRelation

, .unsetZIndex .setZIndex {
	z-index: unset!important;
}

.unsetPopupZIndex .buttonArea
, .unsetPopupZIndex .optionEdit
, .unsetPopupZIndex .dataSetEdit
, .unsetPopupZIndex .pullDownArea
, .unsetPopupZIndex .ColResizeGrip
, .unsetPopupZIndex .LColResizeGrip
, .unsetPopupZIndex .layerButtonBox
, .unsetPopupZIndex .mainDashboardArea
, .unsetPopupZIndex .layerSelectArea

, .unsetPopupZIndex .optionTable
, .unsetPopupZIndex .optionColumn
, .unsetPopupZIndex .optionRelation

, .unsetPopupZIndex .setZIndex {
	z-index: unset!important;
}