@charset "UTF-8";
:root {
  --default-font: 12px NanumGothic;
  --default-text-color: #222222;
  /* 기본 폰트 색상 */
  --default-border-color: #e6e9f1;
  /* 기본 보더 색상 */
  --default-input-border-color: #cacaca;
  /* 기본 input Box 보더 색상 */
  --focus-border-color: #3b9cff;
  /* 포커스 보더 색상 */
  --focus-text-color: #222222;
  /* 포커스 텍스트 색상 */
  /* mdi Top 영역 */
  --mdi-top-color: #e6eff6;
  --mdi-top-btn-font-color: #0064b1;
  /* 그룹 배경 색상 정의 S*/
  --grp-border: 1px solid #e2e2e2;
  /* 그룹 백그라운드 색상 */
  --grp-background-color: #f5f5f5;
  /* 그룹 백그라운드 색상 */
  --grpingrp-border: 1px solid #c0c0c0;
  /* 그룹 안 그룹 백그라운드 색상 */
  --grpingrp-background-color: #e8e8e8;
  /* 그룹 안 그룹 백그라운드 색상 */
  --grp-search-background-color: #f3f6ef;
  /* 검색그룹 배경색상 */
  --grp-search-border: 1px solid #e9e9e9;
  /* 검색그룹 테두리 */
  /* 그룹 배경 색상 정의 E*/
  /* 그리드 색상 정의  S */
  --grid-border: 1px solid #c0c0c0;
  --grid-border-top: 2px solid #c0c0c0;
  --grid-border-bottom: 1px solid #c0c0c0;
  --grid-border-right: 1px solid #c0c0c0;
  --grid-border-left: 1px solid #c0c0c0;
  --grid-background-color: #ffffff;
  --grid-header-color: #222222;
  /* 그리드 헤더 폰트 색상 */
  --grid-header-linear-gradient-start: #dddddd;
  --grid-header-linear-gradient-end: #dddddd;
  --grid-header-border-right: #c5c5c5;
  --grid-header-border-bottom: #c5c5c5;
  --grid-headers-color: #ffff00;
  --grid-headers-linear-gradient-start: #dddddd;
  --grid-headers-linear-gradient-end: #dddddd;
  --grid-headers-border: 1px solid #c5c5c5;
  --grid-cellborder-right-color: 1px solid #d6d5d7;
  --grid-cellborder-bottom-color: 1px solid #dddddd;
  --grid-row-color: inherit;
  --grid-row-odd-background-color: #ffffff;
  --grid-row-even-background-color: #ffffff;
  --grid-row-selected-color: #333333;
  --grid-row-selected-background-color: #ddecc1;
  --grid-row-hover-color: inherit;
  --grid-row-hover-background-color: #fbfff3;
  /* 그리드 색상 정의  E */
  /* 팝업 색상 정의 S */
  --dialog-background-color: #f5f5f5;
  /* 팝업 백그라운드 색상 */
  --dialog-header-background-color: #0064b1;
  /* 팝업 해드 백그라운드 색상 */
  --dialog-overlay-color: #000000;
  /* 팝업 뒷배경 색상 */
  /* 팝업 색상 정의 E */
  /*  main_mdi pageTitle 버튼 */
  --default-button-bgcolor: #0064b1;
  --hover-button-bgcolor: #478cc2;
  --btn-area-height: 24px;
  --warning-button-bgcolor: #cb2b11;
  --warning-hover-button-bgcolor: #e25841;
  /* tabfolder 색상 정의 S*/
  /* 1. section-tabfolder 색상 정의 S*/
  --section-tabfolder-header-background: #0064b1;
  /* tabfolder 색상 정의 E */
  /* 스크롤 색상 */
  --scrollbar-background-color: #abcd69;
  /* disable 상태  설정 색상 */
  --disabled-text-color: #222222;
  /* Disabled된 기본 텍스트 색상 */
  --disabled-border-color: #c5c5c5;
  /* Disabled된 기본 보더 색상. */
  --disabled-input-border-color: #cacaca;
  /* Disabled된 기본 input Box 보더 색상 */
  --disabled-input-background-color: #e0e1e2;
  /* Disabled된 기본 input Box 보더 색상 */
  --disabled-selection-foreground: #cccccc;
  /* Disabled된 내부에 아이템을 갖는 컨트롤, 각 아이템에 선택된 경우 텍스트 색상 */
  --disabled-selection-background: #e0e1e2;
  /* Disabled된 내부에 아이템을 갖는 컨트롤, 각 아이템이 선택된 경우 배경 색상 */
  --disabled-grid-border-color: #c5c5c5;
  /* Disabled된 그리드 바탕 보더 색상 */
  --disabled-grid-background-color: #e0e1e2;
  --disabled-grid-border-top-color: #c5c5c5;
  --disabled-grid-border-bottom-color: #c5c5c5;
  --disabled-grid-border-right-color: #c5c5c5;
  --disabled-grid-border-left-color: #c5c5c5;
  --disabled-buttontext-color: #999999;
  /* Disabled된 버튼 텍스트 색상 */
  --disabled-button-bgcolor: #cccccc;
  /* Disabled된  main_mdi pageTitle 버튼   */
  --disabled-button-bgcolor2: #e0e1e2;
  /* Disabled된  grpBtn 영역 버튼   */
  /* Top메뉴, Left메뉴(아코디언 메뉴 선택 시)에서 선택된 메뉴 배경색 선언  S */
  --background-color: #ffffff;
  --selection-background: #0064b1;
  --selection-highlight: #58b6ff;
  /* 내부에 아이템을 갖는 컨트롤의 경우, 각 아이템에 마우스 호버시의 텍스트 색상 */
  --hover-foreground: #6bb0f8;
  /* 내부에 아이템을 갖는 컨트롤의 경우, 각 아이템에 마우스 호버시의 배경 색상 */
  --hover-background: #0064b1;
  /* 네비게이션 메뉴 hover 선언 _ whlee */
  /* 내부에 아이템을 갖는 컨트롤의 경우, 각 아이템에 선택된 경우 텍스트 색상 */
  --selection-foreground: #ffffff;
  /* Top메뉴, Left메뉴(아코디언 메뉴 선택 시)에서 선택된 메뉴 배경색 선언   E*/
  /* 푸른 계열의 포인트 컬러 */
  --point-text-color: #334f75;
  --point-text-color-light: #7a8da7;
  --point-background: #0064b1;
  --point-active: #0080ff;
  /* 다양한 컬러 계열의 포인트 컬러 */
  --orange-background: #fff4e6;
  --orange-text-color: #ff9a58;
  --green-background: #e7f8f5;
  --green-text-color: #2bcaa7;
  --gray-background: #ecf0f1;
  --gray-text-color: #a5b4bd;
  --lightnavy-background: #Ffffff;
  /* 그리드 행 배경색상 Type */
  --grid-row-background-color01: #d3e1ff;
  --grid-row-background-color02: #e2e2e2;
  --grid-row-background-color03: #ffe1e1;
  --grid-row-background-color04: #b1e2b1;
  --grid-row-background-color05: #f8f6a0;
  /* 그리드 행 배경색상 병합 Type */
  /* color1 #a8c5ff */
  --grid-row-background-merged-color01-rgb: 168, 197, 255;
  /* color2 #c7c7c7 */
  --grid-row-background-merged-color02-rgb: 199, 199, 199;
  /* color3 #ffc5c5 */
  --grid-row-background-merged-color03-rgb: 255, 197, 197;
  /* color4 #64c764 */
  --grid-row-background-merged-color04-rgb: 100, 199, 100;
  /* color5 #f3ef43 */
  --grid-row-background-merged-color05-rgb: 243, 239, 67;
  /* selected color #bdda84 */
  --grid-row-selected-background-merged-color-rgb: 189, 218, 132;
  /* hover color #f8ffe9 */
  --grid-row-hover-background-merged-color-rgb: 248, 255, 233;
  /* 그리드 행 텍스트 색상 type */
  --grid-row-color01: #ff0000;
  --grid-row-color02: #095fff;
  --grid-row-color03: #e2e2e2;
  --grid-row-color04: #009e25;
  --grid-row-color05: #f5f26b;
}
/* 모든 UIControl 공통 스타일 */
.cl-control {
  font: var(--default-font);
  color: var(--default-text-color);
}
/* 넘버 에디터  */
.cl-numbereditor {
  font: var(--default-font);
  background-image: none;
  border: 1px solid var(--default-input-border-color);
  color: var(--default-text-color);
  /* 넘버 에디터 disabled, readonly 상태  */
}
.cl-numbereditor .cl-numbereditor-buttons {
  border-left-color: var(--default-input-border-color);
  /* 넘버 에디터 스핀 업 버튼 */
  /* 넘버 에디터 스핀 다운 버튼 */
}
.cl-numbereditor:not(.cl-disabled),
.cl-numbereditor:not(.cl-readonly) {
  /* 넘버 에디터 스핀 업 버튼 호버 */
  /* 넘버 에디터 스핀 업 버튼 액티브  */
  /* 넘버 에디터 스핀 다운 버튼 호버 */
  /* 넘버 에디터 스핀 다운 버튼 액티브 */
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:hover,
.cl-numbereditor:not(.cl-readonly) .cl-numbereditor-increase:hover {
  background-color: var(--focus-border-color);
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:active,
.cl-numbereditor:not(.cl-readonly) .cl-numbereditor-increase:active {
  background-color: var(--point-active);
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:hover,
.cl-numbereditor:not(.cl-readonly) .cl-numbereditor-decrease:hover {
  background-color: var(--focus-border-color);
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:active,
.cl-numbereditor:not(.cl-readonly) .cl-numbereditor-decrease:active {
  background-color: var(--point-active);
}
.cl-numbereditor.cl-disabled,
.cl-numbereditor.cl-readonly {
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
}
/* 넘버 에디터 focus 상태 */
.cl-numbereditor.cl-focus {
  border-color: var(--focus-border-color);
  /* 넘버 에디터 focus 상태 스핀 버튼 영역*/
}
.cl-numbereditor.cl-focus .cl-numbereditor-buttons {
  border-left-color: var(--focus-border-color);
}
/* 데이트 인풋 */
.cl-dateinput {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  text-align: left;
  /* 데이트 인풋 텍스트 */
  /* 데이트 인풋 버튼 */
}
.cl-dateinput .cl-dateinput-button {
  background-image: url("images/icon_calendar.png");
  width: 20px;
}
.cl-dateinput.cl-disabled,
.cl-dateinput.cl-readonly {
  color: var(--disabled-text-color);
  background-color: var(--disabled-selection-background);
  border-color: var(--disabled-input-border-color);
  /* 데이트 인풋 disabled, readonly 상태 버튼 */
}
.cl-dateinput.cl-disabled .cl-dateinput-button,
.cl-dateinput.cl-readonly .cl-dateinput-button {
  background-image: url("images/icon_calendar_w.png");
}
/* 데이트 인풋 포커스 상태 */
.cl-dateinput.cl-focus {
  border: var(--focus-border-color) solid 1px;
}
/* 캘린더 */
.cl-calendar {
  border: 1px solid var(--default-border-color);
  background-color: #fff;
  /* 데이트인풋 등에 팝업으로 나타날때 스타일 */
  /* 현재날짜 box-shadow none 처리 */
  /* 캘린더 컨텐츠의 일, 월, 년 스타일*/
  /* 캘린더 컨텐츠 스타일*/
  /* 캘린더 푸터 */
  /* 캘린더 포커스 상태 */
}
.cl-calendar.cl-popup {
  box-shadow: none;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-before:hover {
  /* 캘린더 이전 년도 버튼 호버 상태 */
  background-image: url("images/nav-before.png");
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-after:hover {
  /* 캘린더 이후 년도 버튼 호버 상태 */
  background-image: url("images/nav-after.png");
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev:hover {
  /* 캘린더 이전 달 버튼 호버 상태 */
  background-image: url("images/nav-prev.png");
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next:hover {
  /* 캘린더 다음 달 버튼 호버 상태 */
  background-image: url("images/nav-next.png");
}
.cl-calendar .cl-calendar-header {
  /* 캘린더 헤더 */
  background-color: #FFF;
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text {
  font-weight: bold;
  color: var(--point-text-color);
}
.cl-calendar .cl-calendar-header .cl-calendar-header-before {
  /* 캘린더 이전 년도 버튼 */
  background-image: url("images/btnA_ico_arr05_g.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-after {
  /* 캘린더 이후 년도 버튼 */
  background-image: url("images/btnA_ico_arr06_g.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-prev {
  /* 캘린더 이전 달 버튼 */
  background-image: url("images/btnA_ico_arr01_g.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-next {
  /* 캘린더 다음 달 버튼 */
  background-image: url("images/btnA_ico_arr02_g.png");
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day.cl-calendar-defaultdate,
.cl-calendar .cl-calendar-content .cl-calendar-content-month.cl-calendar-defaultdate,
.cl-calendar .cl-calendar-content .cl-calendar-content-year.cl-calendar-defaultdate {
  color: var(--point-active);
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day.cl-calendar-current,
.cl-calendar .cl-calendar-content .cl-calendar-content-month.cl-calendar-current,
.cl-calendar .cl-calendar-content .cl-calendar-content-year.cl-calendar-current {
  box-shadow: none;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-other-month:not(.cl-disabled):hover {
  /* 셀 호버 스타일 */
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day:not(.cl-disabled).cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month:not(.cl-disabled).cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year:not(.cl-disabled).cl-selected,
.cl-calendar:not(.cl-disabled) .cl-other-month:not(.cl-disabled).cl-selected {
  /* 선택된 날짜 셀 */
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
.cl-calendar .cl-calendar-content {
  /* 날짜 선택 모드시 날짜 스타일 */
  /* 일요일 셀 */
}
.cl-calendar .cl-calendar-content .cl-calendar-content-week {
  /* week of year의 스타일 */
  background-color: var(--green-background);
  color: var(--green-text-color);
}
.cl-calendar .cl-calendar-content th {
  background-color: #FFF;
}
.cl-calendar .cl-calendar-content td.cl-calendar-content-day.cl-calendar-defaultdate {
  /* 현재 날짜 */
  background-color: var(--hover-background);
  color: var(--focus-text-color);
  font-weight: bold;
}
.cl-calendar .cl-calendar-content td.cl-calendar-content-day.cl-calendar-content-sun {
  /* 일요일 셀 */
  color: #F32260;
}
.cl-calendar .cl-calendar-content td.cl-calendar-content-day.cl-calendar-content-sat {
  /* 토요일 셀 */
  color: #5BB1FF;
}
.cl-calendar .cl-other-month {
  /* 이전 달 또는 다음 달의 날짜 */
}
.cl-calendar .cl-other-month:not(.cl-disabled):hover,
.cl-calendar .cl-other-month:not(.cl-disabled).cl-hover {
  background-color: var(--gray-background);
  color: var(--gray-text-color);
}
.cl-calendar .cl-other-month.cl-disabled {
  /* 토요일 셀 */
}
.cl-calendar .cl-other-month.cl-calendar-anniversary {
  background-color: var(--orange-background);
  box-shadow: inset 0 -0.25rem 0 var(--orange-text-color);
  color: var(--orange-text-color);
  /* 셀 호버 스타일 */
}
.cl-calendar .cl-calendar-footer .cl-calendar-footer-text {
  font-size: 8pt;
}
.cl-calendar .cl-calendar-footer .cl-calendar-footer-text:hover {
  /* 캘린더 푸터 날짜 호버 스타일 */
  text-decoration: none;
  background-color: var(--green-background);
  color: var(--green-text-color);
}
.cl-calendar.cl-focus {
  border-color: var(--focus-border-color);
}
/* 캘린더 disabled 상태 */
.cl-calendar.cl-disabled {
  opacity: 0.5;
}
/* 리스트 박스 */
.cl-listbox {
  font: var(--default-font);
  background-color: #fff;
  border: 1px solid var(--default-border-color);
  color: var(--default-text-color);
  /* 리스트 박스 내 아이템 목록 박스 */
}
.cl-listbox .cl-listbox-list {
  /* 아이템 목록 박스 내 각 아이템 */
}
.cl-listbox .cl-listbox-list .cl-listbox-item {
  /* 아이템 드래그시 아이템의 마우스가 아래에 위치할때 표시 */
  /* 아이템 드래그시 아이템의 마우스가 위에 위치할때 표시 */
  /* 선탹된 아이템 */
  /* 아이템 텍스트 */
}
.cl-listbox .cl-listbox-list .cl-listbox-item.cl-selected {
  color: var(--selection-foreground);
  background-color: var(--selection-background);
}
.cl-listbox:not(.cl-disabled) .cl-listbox-item:not(.cl-disabled):not(.cl-selected) {
  /* 포커스된 아이템 */
  /* 호버된 아이템 */
}
.cl-listbox:not(.cl-disabled) .cl-listbox-item:not(.cl-disabled):not(.cl-selected):hover {
  color: var(--hover-foreground);
  background-color: var(--hover-background);
}
/* disabled 상태 */
.cl-listbox.cl-disabled {
  color: var(--disabled-text-color);
  /* disabled 상태에서 선택된 아이템들 */
}
.cl-listbox.cl-disabled .cl-listbox-item.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
/* 포커스 상태 */
.cl-listbox.cl-focus {
  border: 1px solid var(--focus-border-color);
}
/* 링크드 리스트 박스 루트 */
.cl-linkedlistbox {
  font: var(--default-font);
  color: var(--default-text-color);
  /* 리스트 박스 */
  /* 링크드리스트박스 disabled 상태*/
}
.cl-linkedlistbox .cl-linkedlistbox-listbox {
  width: 120px;
  /* 리스트 박스 헤더 */
  /* 리스트 박스 리스트 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-header {
  border: 1px solid var(--default-border-color);
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list {
  border: 1px solid var(--default-border-color);
  background-color: white;
  /* 리스트 박스 리스트 아이템 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item {
  /* 아이템 드래그시 아이템의 마우스가 아래에 위치할때 표시 */
  /* 아이템 드래그시 아이템의 마우스가 위에 위치할때 표시 */
  /* 리스트 박스 리스트 아이템 텍스트 */
  /* 리스트 박스 리스트 아이템 리프 아이콘 */
  /* 리스트 박스 리스트 아이템 드릴다운 아이콘 */
  /* 리스트 박스 리스트 아이템 - disabled 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 리스트 박스 리스트 아이템 - 선택됨, disabled 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-disabled.cl-selected {
  background-color: var(--disabled-selection-background);
}
.cl-linkedlistbox.cl-focus {
  /* 리스트 박스 헤더 - 포커스 상태 */
  /* 리스트 박스 리스트 - 포커스 상태 */
}
.cl-linkedlistbox.cl-focus .cl-linkedlistbox-header {
  border-color: var(--focus-border-color);
}
.cl-linkedlistbox.cl-focus .cl-linkedlistbox-list {
  border-color: var(--focus-border-color);
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled) {
  cursor: pointer;
  /* 아이템 호버 스타일 */
  /* 선택된 아이템 스타일 */
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled):hover,
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled):focus {
  color: var(--hover-foreground);
  background-color: var(--hover-background);
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled).cl-selected {
  color: var(--selection-foreground);
  background-color: var(--selection-background);
  /* 선택된 아이템 드릴 다운 아이콘 */
}
.cl-menu {
  font: var(--default-font);
  /* 메뉴 리스트 */
}
.cl-menu .cl-menu-list {
  border: 1px solid var(--default-border-color);
  /* 메뉴 아이템 */
}
.cl-menu .cl-menu-list .cl-menu-item {
  color: var(--default-text-color);
  /* 메뉴 아이템 아이콘 */
  /* 메뉴 아이템 텍스트 */
  /* 메뉴 아이템 단축키 */
  /* 서브 메뉴 */
  /* 메뉴 아이템 - disabled */
  /* 메뉴 아이템 - 선택됨 */
  /* 메뉴 아이템 - 호버 */
}
.cl-menu .cl-menu-list .cl-menu-item .cl-menu-arrow {
  /* 메뉴 아이템 드릴다운 아이콘 */
}
.cl-menu .cl-menu-list .cl-menu-item .cl-sub {
  border: 1px solid var(--default-border-color);
}
.cl-menu .cl-menu-list .cl-menu-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 메뉴 아이템 - 선택됨, disabled */
}
.cl-menu .cl-menu-list .cl-menu-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.cl-menu .cl-menu-list .cl-menu-item.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
  /* 메뉴 아이템 드릴다운 아이콘 - 선택됨 */
}
.cl-menu .cl-menu-list .cl-menu-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-menu .cl-menu-list .cl-menu-item:not(.cl-disabled):not(.cl-selected).cl-hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-menu.cl-focus {
  /* 메뉴 리스트 - 포커스 */
}
.cl-menu.cl-focus .cl-menu-list {
  border-color: var(--focus-border-color);
}
.cl-menu.cl-disabled {
  /* 메뉴 아이템 - disabled */
}
.cl-menu.cl-disabled .cl-menu-item {
  color: var(--disabled-text-color);
  /* 메뉴 아이템 - disabled, 선택됨 */
}
.cl-menu.cl-disabled .cl-menu-item.cl-selected {
  background-color: var(--disabled-selection-background);
  color: var(--disabled-selection-foreground);
  /* 메뉴 아이템 드릴다운 아이콘 - disabled */
}
/* 파일 업로드 루트 */
.cl-fileupload {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  /* 파일 업로드 내 텍스트 */
  /* 헤더 */
  /* 파일 업로드 디테일 영역 */
  /* 푸터 */
  /* 파일 업로드 체크 박스 */
}
.cl-fileupload .cl-text {
  color: var(--point-text-color-light);
}
.cl-fileupload .cl-fileupload-header {
  background-image: linear-gradient(to bottom, #3B9CFF, #3B9CFF);
  border-color: var(--default-border-color);
  font-weight: bold;
  /* 헤더내 체크 박스 */
  /* 파일명 헤더 컬럼 */
  /* 파일 크기 헤더 컬럼 */
}
.cl-fileupload .cl-fileupload-header .cl-fileupload-checkheader {
  border: none;
}
.cl-fileupload .cl-fileupload-header .cl-fileupload-nameheader {
  color: #FFF;
}
.cl-fileupload .cl-fileupload-header .cl-fileupload-sizeheader {
  border: none;
  color: #FFF;
}
.cl-fileupload .cl-fileupload-detail {
  /* 각 파일 행 */
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file {
  /* 체크 박스 컬럼 */
  /* 파일 아이콘 */
  /* 피일 이름 */
  /* 파일 크기 */
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file:hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon {
  background-image: url("images/icon_file.png");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-docx {
  background-image: url("images/icon_file.png");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-xlsx {
  background-image: url("images/icon_file.png");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-pdf {
  background-image: url("images/icon_file.png");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-png {
  background-image: url("images/icon_file.png");
}
.cl-fileupload .cl-fileupload-footer {
  border-color: var(--default-border-color);
  /* 푸터 텍스트 */
  /* 푸터 내 버튼 영역 */
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons {
  /* 푸터 내 버튼 */
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button {
  background-image: none;
  border-color: var(--default-border-color);
  color: var(--point-text-color-light);
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button:hover {
  background-color: var(--focus-border-color);
  color: #FFF;
}
.cl-fileupload .cl-fileupload-checkbox {
  background-image: url("images/checkbox_disabled.png");
  /* 선택된 파일 업로드 체크 박스 */
}
.cl-fileupload .cl-fileupload-checkbox.cl-checked {
  background-image: url("images/checkbox_checked.png");
}
.cl-fileupload:not(.cl-disabled) {
  /* 파일 - 호버 상태 */
  /* 파일 업로드 버튼 - 호버 상태 */
}
/* 버튼 */
.cl-button {
  font: var(--default-font);
  color: var(--point-text-color-light);
  background-image: linear-gradient(#FFF, #FFF);
  border-radius: 4px;
  border: solid 1px var(--default-border-color);
  text-shadow: 0px 1px 0px white;
  /* 텍스트 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.cl-button:not(.cl-disabled):hover {
  color: var(--focus-border-color);
}
.cl-button:focus,
.cl-button.cl-focus {
  border: solid 1px var(--focus-border-color);
}
.cl-button:not(.cl-disabled).cl-activated,
.cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(#FFF, #FFF 5px, #FFF);
}
.cl-button.max {
  background-image: url("images/btn_max.png");
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center center;
}
.cl-button.restore {
  background-image: url("images/btn_restore.png");
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center center;
}
/* Disable 상태의 버튼 */
.cl-button.cl-disabled {
  color: var(--disabled-text-color);
  border-color: #ff0000;
  opacity: 0.5;
}
/* 아코디언 */
.cl-accordion {
  border: 1px solid var(--default-border-color);
  background-color: #fff;
  color: var(--default-text-color);
  font: var(--default-font);
  /** 아코디언의 각 헤더 */
}
.cl-accordion .cl-accordion-header {
  background-color: var(--lightnavy-background);
  color: var(--point-text-color-light);
  border: solid 1px var(--default-border-color);
  height: 30px;
  /** 아코디언 펼침 버튼 */
  /* 아코디언 헤더에 마우스가 호버되었을 떄의 스타일 */
  /* 아코디언 헤더를 클릭했을 때의 스타일 */
  /* 아코디언 헤더에 포커스되었을 떄의 스타일 */
}
.cl-accordion .cl-accordion-header:hover {
  background-color: var(--hover-background);
  border-color: var(--focus-border-color);
  color: var(--hover-foreground);
}
.cl-accordion .cl-accordion-header.cl-activated {
  background-color: var(--selection-background);
  border-color: var(--selection-background);
  color: var(--selection-foreground);
  /* 클릭된 헤더의 펼침 버튼 아이콘 */
}
.cl-accordion .cl-accordion-header:focus {
  text-decoration: none;
}
.cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) {
  /* 아코디언 컨텐츠 */
}
.cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) .cl-accordion-content {
  border: solid 1px var(--selection-background);
}
.cl-accordion .cl-accordion-section+.cl-accordion-header {
  /* 아코디언 섹션간의 간격 */
  margin-top: 4px;
}
/* Disabled 상태의 아코디언 */
.cl-accordion.cl-disabled .cl-accordion-header {
  background-color: var(--disabled-selection-background);
  border-color: var(--disabled-border-color);
  color: var(--disabled-text-color);
  /* 선택된 헤더 */
}
.cl-accordion.cl-disabled .cl-accordion-header:hover {
  background-color: var(--disabled-selection-background);
  border-color: var(--green-background);
  color: var(--disabled-text-color);
}
.cl-accordion.cl-disabled .cl-accordion-header.cl-activated {
  background-color: var(--disabled-selection-background);
  border-color: var(--gray-background);
  color: var(--disabled-selection-foreground);
}
.cl-accordion.cl-disabled .cl-accordion-section:not(.cl-accordion-placeholder) {
  /* 선택된 바디 */
}
.cl-accordion.cl-disabled .cl-accordion-section:not(.cl-accordion-placeholder) .cl-accordion-content {
  border-color: var(--disabled-selection-background);
}
/* 인풋 박스 루트 */
.cl-inputbox {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  background-image: none;
  /* 인풋 박스 - 포커스 상태 */
  /* 인풋 박스 - disabled, readonly 상태 */
}
.cl-inputbox.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-inputbox.cl-disabled,
.cl-inputbox.cl-readonly {
  border-color: var(--disabled-input-border-color);
  background-image: none;
  background-color: var(--disabled-input-background-color);
  color: var(--disabled-text-color);
}
/* 그리드 필터 클릭 시 팝업 내 인풋 박스 */
.cl-search-input {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  background-image: none;
  /* 인풋 박스 - 포커스 상태 */
}
.cl-search-input:focus {
  outline: none;
  border-color: var(--focus-border-color);
}
/* 슬라이더 */
.cl-slider {
  font: var(--default-font);
  /* 슬라이더 바 */
}
.cl-slider .cl-slider-bar {
  background-color: #fff;
  border: 1px solid var(--default-border-color);
  /* 슬라이더 가로 바 */
  /* 슬라이더 세로 바*/
  /* 슬라이더 핸들 */
  /* 슬라이더 선택 영역 표시 바 */
}
.cl-slider .cl-slider-bar.cl-horizontal {
  background-image: linear-gradient(#FFF, #FFF);
}
.cl-slider .cl-slider-bar.cl-vertical {
  background-image: linear-gradient(to right, #FFF, #FFF);
}
.cl-slider .cl-slider-bar .cl-slider-handle {
  background-color: #FFF;
  background-image: url("images/slider-handle.png");
  border: 1px solid var(--default-border-color);
  /* 슬라이더 가로바 핸들 */
  /* 슬라이더 세로바 핸들 */
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical {
  background-image: url("images/slider-handle-verti.png");
}
.cl-slider .cl-slider-bar .cl-slider-range {
  background-color: lighten(var(--selection-background), 20%);
}
.cl-slider.cl-focus {
  /* 슬라이더 바 - focus */
}
.cl-slider.cl-focus .cl-slider-bar {
  border-color: var(--focus-border-color);
}
.cl-slider.cl-focus .cl-slider-handle {
  border-color: var(--focus-border-color);
}
.cl-slider.cl-disabled {
  /* 슬라이더 바 핸들 - disabled */
  /* 슬라이더 바 선택 영역 - disabled */
}
.cl-slider.cl-disabled .cl-slider-range {
  background-color: var(--disabled-selection-background);
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle {
  /* 슬라이더 바 핸들 - hover */
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle:hover,
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle.cl-hover {
  /* 슬라이더 가로 바 */
  /* 슬라이더 세로 바*/
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle:hover.cl-horizontal,
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle.cl-hover.cl-horizontal {
  background-image: url("images/slider-handle.png");
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle:hover.cl-vertical,
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle.cl-hover.cl-vertical {
  background-image: url("images/slider-handle-verti.png");
}
/* 아웃풋 */
.cl-output {
  font: var(--default-font);
  color: var(--default-text-color);
}
.cl-output.cl-disabled {
  color: var(--disabled-text-color);
}
/* 텍스트 에리어 */
.cl-textarea {
  font: var(--default-font);
  background-image: none;
  border: 1px solid var(--default-input-border-color);
  color: var(--default-text-color);
  /* 텍스트 에리어 텍스트 */
  /* 텍스트 에리어 - disabled, readonly */
  /* 텍스트 에리어 - focus*/
}
.cl-textarea.cl-disabled,
.cl-textarea.cl-readonly {
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
}
.cl-textarea.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-textarea.overflow-x-auto .cl-text {
  overflow-x: auto;
  white-space: pre;
}
/* 라디오 버튼 */
.cl-radiobutton {
  font: var(--default-font);
  color: var(--default-text-color);
  /* 라디오 버튼 아이템 */
  /* 라디오 버튼 - disabled */
}
.cl-radiobutton .cl-radiobutton-item {
  /* 라디오 버튼 아이템 텍스트 */
}
.cl-radiobutton .cl-radiobutton-item .cl-radiobutton-icon {
  background-image: url("images/radiobutton.png");
  background-size: 15px;
}
.cl-radiobutton .cl-radiobutton-item.cl-selected {
  /* 라디오 버튼 아이템 아이콘 - 선택됨 */
}
.cl-radiobutton .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("images/radiobutton_filled.png");
}
.cl-radiobutton.cl-focus .cl-radiobutton-item.cl-selected {
  /* 라디오 버튼 아이템 아이콘 - focus */
}
.cl-radiobutton.cl-focus .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("images/radiobutton_filled.png");
}
.cl-radiobutton.cl-disabled .cl-text {
  color: var(--disabled-text-color);
}
.cl-radiobutton.cl-disabled .cl-radiobutton-icon {
  background-image: url("images/radiobutton_disabled.png");
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected {
  /* 라디오 버튼 아이템 아이콘 - disabled, selected */
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("images/radiobutton_disabled_filled.png");
}
.cl-radiobutton:not(.cl-disabled) .cl-radiobutton-item:not(.cl-selected):not(.cl-disabled) {
  /* 라디오 버튼 아이템 아이콘 - hover */
}
.cl-radiobutton:not(.cl-disabled) .cl-radiobutton-item:not(.cl-selected):not(.cl-disabled):hover .cl-radiobutton-icon {
  background-image: url("images/radiobutton.png");
}
/* 체크 박스 스타일 */
.cl-checkbox {
  /* 체크 박스 아이콘 - 기본 상태 */
  /* 체크 박스 텍스트 */
  /* 체크 박스 disabled 상태 */
}
.cl-checkbox .cl-checkbox-icon {
  background-image: url("images/checkbox.png");
  background-size: 15px;
}
.cl-checkbox.cl-checked {
  /* 체크 박스 아이콘 - 선택된 상태 */
}
.cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("images/checkbox_checked.png");
}
.cl-checkbox.cl-checked:hover .cl-checkbox-icon {
  background-image: url("images/checkbox_checked.png");
}
.cl-checkbox.cl-partialchecked {
  /* 체크 박스 아이콘 - 일부 선택 상태 (grid header에서 사용) */
}
.cl-checkbox.cl-partialchecked .cl-checkbox-icon {
  background-image: url("images/checkbox_partial.png");
}
.cl-checkbox.cl-partialchecked:hover .cl-checkbox-icon {
  background-image: url("images/checkbox_partial.png");
}
.cl-checkbox.cl-disabled .cl-checkbox-icon {
  background-image: url("images/checkbox_disabled.png");
}
.cl-checkbox.cl-disabled.cl-checked {
  /* 체크 박스 disabled 상태에서 선택된 체크박스 아이콘 */
}
.cl-checkbox.cl-disabled.cl-checked .cl-checkbox-icon {
  background-image: url("images/checkbox_disabled_checked.png");
}
.cl-checkbox.cl-disabled.cl-checked:hover .cl-checkbox-icon {
  background-image: url("images/checkbox_disabled_checked.png");
}
.cl-checkbox:not(.cl-disabled):not(.cl-checked):not(.cl-partialchecked):hover,
.cl-checkbox:not(.cl-disabled):not(.cl-checked):not(.cl-partialchecked).cl-hover {
  /* 체크 박스 아이콘 호버 상태 */
}
.cl-checkbox:not(.cl-disabled):not(.cl-checked):not(.cl-partialchecked):hover .cl-checkbox-icon,
.cl-checkbox:not(.cl-disabled):not(.cl-checked):not(.cl-partialchecked).cl-hover .cl-checkbox-icon {
  background-image: url("images/checkbox.png");
}
/* 체크박스 그룹 */
.cl-checkboxgroup {
  font: var(--default-font);
  color: var(--default-text-color);
  /* 그룹 내 체크 박스 */
  /* disabled 상태 */
}
.cl-checkboxgroup.cl-disabled {
  color: var(--disabled-text-color);
}
.cl-checkboxgroup.cl-disabled .cl-checkbox {
  /* disabled 상태에서 선택된 체크 박스 아이템 텍스트 */
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-text {
  color: var(--disabled-text-color);
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-checked {
  /* disabled 상태에서 선택된 체크 박스 아이콘 */
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-checked .cl-checkbox-icon {
  background-image: url("images/checkbox_disabled_checked.png");
}
.cl-checkboxgroup.cl-focus .cl-checkbox .cl-checkbox-icon {
  /* 포커스를 가진 체크박스 아이템의 아이콘 */
}
.cl-checkboxgroup.cl-focus .cl-checkbox .cl-checkbox-icon:focus {
  outline: 1px dotted black;
}
.cl-checkboxgroup:not(.cl-disabled) .cl-checkbox:not(.cl-checked):hover,
.cl-checkboxgroup:not(.cl-disabled) .cl-checkbox:not(.cl-checked).cl-hover {
  /* 체크 박스 아이콘 - 호버 */
}
/* 마스크 에디터 루트 */
.cl-maskeditor {
  font: var(--default-font);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  background-image: none;
  color: var(--default-text-color);
  /* 마스크 에디터 텍스트 */
  /* 마스크 에디터 - 포커스 */
  /* 마스크 에디터 - disabled, readonly */
}
.cl-maskeditor.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-maskeditor.cl-disabled,
.cl-maskeditor.cl-readonly {
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  color: var(--default-text-color);
}
/* 콤보 박스 루트 */
.cl-combobox {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  /* 콤보 박스 펼침 버튼 */
  /* 포커스 상태 */
  /* 콤보 박스 disabled 상태 */
}
.cl-combobox .cl-combobox-button {
  background-image: url("images/arrow_down.png");
  background-size: 7px 5px;
}
.cl-combobox.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-combobox.cl-disabled {
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
  /* 콤보 박스 펼침 버튼 */
}
.cl-combobox.cl-disabled .cl-combobox-button {
  background-image: url("images/arrow_down_w.png");
}
/* 콤보 박스 리스트 박스 */
.cl-combobox-list {
  font: var(--default-font);
  border: 1px solid var(--focus-border-color);
  color: var(--default-text-color);
  /*리스트박스의 쉐도우*/
  /* 리스박스의 최대 높이*/
  /* 콤보 박스 리스트 아이템 */
  /* 멀티 콤보 박스 리스트 아이템 */
}
.cl-combobox-list .cl-combobox-item {
  min-height: 16px;
  height: 18px;
  padding: 0px 0px 0px 10px;
  /* 콤보 박스 리스트 아이템 체크박스 */
  /* 콤보 박스 리스트 아이템 텍스트 */
  /* 콤보 박스 리스트 아이템 - 선택 됨 */
  /* disabled 상태 콤보 박스 리스트 아이템 */
}
.cl-combobox-list .cl-combobox-item .cl-checkbox {
  background-image: url("images/checkbox.png");
}
.cl-combobox-list .cl-combobox-item.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
.cl-combobox-list .cl-combobox-item.cl-disabled {
  color: var(--disabled-text-color);
  /* disabled 상태에서 선택된 콤보 박스 리스트 아이템 */
}
.cl-combobox-list .cl-combobox-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.cl-combobox-list .cl-combobox-item:not(.cl-disabled) {
  /* 콤보 박스 리스트 아이템 - 호버 */
}
.cl-combobox-list .cl-combobox-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-combobox-list .cl-combobox-item:not(.cl-disabled):not(.cl-selected).cl-hover {
  color: var(--hover-foreground);
  background-color: var(--hover-background);
}
.cl-combobox-list.cl-multi-select .cl-combobox-item:not(.cl-disabled).cl-selected:hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-combobox-list.cl-multi-select .cl-combobox-item:not(.cl-disabled).cl-hover.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
/* 링크드 콤보 박스 루트 */
.cl-linkedcombobox {
  font: var(--default-font);
  color: var(--default-text-color);
  /* 콤보 박스 */
  /* 콤보 박스 - 포커스 상태 */
  /* 콤보 박스 - disabled 상태 */
}
.cl-linkedcombobox .cl-linkedcombobox-combo {
  border: 1px solid var(--default-border-color);
  background-color: #fff;
  width: 120px;
  /* 콤보 박스 인풋 텍스트 */
  /* 콤보 박스 펼침 버튼 */
}
.cl-linkedcombobox .cl-linkedcombobox-combo .cl-linkedcombobox-button {
  background-image: url("images/arrow_down.png");
  background-size: 7px 5px;
}
.cl-linkedcombobox .cl-linkedcombobox-combo.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-linkedcombobox.cl-disabled {
  /* 콤보 박스 펼침 버튼 - disabled 상태 */
}
.cl-linkedcombobox.cl-disabled .cl-linkedcombobox-combo {
  background-color: var(--disabled-selection-background);
}
.cl-linkedcombobox.cl-disabled .cl-linkedcombobox-button {
  background-image: url("images/arrow_down_w.png");
  background-size: 7px 5px;
}
/* 콤보 박스 리스트 박스 */
.cl-linkedcombobox-list {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--focus-border-color);
  background-color: white;
  /*리스트박스의 쉐도우*/
  /* 콤보 박스 아이템 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item {
  /* 콤보 박스 아이템 텍스트 */
  /* 콤보 박스 아이템 드릴다운 아이콘 */
  /* 콤보 박스 아이템 리프 아이콘 */
  /* 콤보 박스 아이템 - 선택됨 */
  /* 콤보 박스 아이템 - disabled 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
  /* 콤보 박스 아이템 드릴 다운 아이콘 - 선택됨 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 콤보 박스 아이템 - 선택됨, disabled 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.cl-linkedcombobox-list .cl-linkedcombobox-item:not(.cl-disabled) {
  /* 콤보 박스 아이템 - 호버 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-linkedcombobox-list .cl-linkedcombobox-item:not(.cl-disabled):not(.cl-selected).cl-hover {
  color: var(--hover-foreground);
  background-color: var(--hover-background);
}
/* 다이얼로그 루트 */
.cl-dialog {
  z-index: 1000;
  border: none;
  box-shadow: 1px 1px 7px 1px rgba(50, 50, 50, 0.2);
  /* 다이얼로그 헤더 */
}
.cl-dialog .cl-dialog-header {
  background-color: var(--dialog-header-background-color);
  border-bottom: 1px solid var(--default-border-color);
  /* 다이얼로그 헤더 텍스트 */
  /* 다이얼로그 닫기 버튼 
		.cl-dialog-close {
			background-image: url(../images/btn_close.png);
		}

		다이얼로그 닫기 버튼 - 호버
		.cl-dialog-close:hover{
			background-color : @selection-background;
		}

		/ * 다이얼로그 닫기 버튼 - 액티브 * /
		.cl-dialog-close:active {
			background-image: url(../images/btn_close.png);
		}

		*/
  /* 다이얼로그 닫기 버튼 */
  /* 다이얼로그 닫기 버튼 - 액티브 */
  /* 다이얼로그 최소화 버튼 */
  /* 다이얼로그 최소화 버튼 - 액티브 */
  /* 다이얼로그 최대화 버튼 */
  /* 다이얼로그 최대화 버튼 - 액티브 */
  /* 다이얼로그 본화면 버튼 */
  /* 다이얼로그본화면버튼 - 액티브 */
}
.cl-dialog .cl-dialog-header .cl-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}
.cl-dialog .cl-dialog-header .cl-text:focus,
.cl-dialog .cl-dialog-header .cl-dialog-close:focus,
.cl-dialog .cl-dialog-header .cl-dialog-min:focus,
.cl-dialog .cl-dialog-header .cl-dialog-max:focus,
.cl-dialog .cl-dialog-header .cl-dialog-restore:focus {
  outline: none;
}
.cl-dialog .cl-dialog-header .cl-dialog-close,
.cl-dialog .cl-dialog-header .cl-dialog-min,
.cl-dialog .cl-dialog-header .cl-dialog-max,
.cl-dialog .cl-dialog-header .cl-dialog-restore {
  width: 22px;
  height: 22px;
  margin-left: 5px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
}
.cl-dialog .cl-dialog-header .cl-dialog-close:not(.cl-disabled):hover,
.cl-dialog .cl-dialog-header .cl-dialog-min:not(.cl-disabled):hover,
.cl-dialog .cl-dialog-header .cl-dialog-max:not(.cl-disabled):hover,
.cl-dialog .cl-dialog-header .cl-dialog-restore:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  border-radius: 3px;
}
.cl-dialog .cl-dialog-header .cl-dialog-close {
  background: url("images/btn_close.png") center center no-repeat;
  opacity: 1;
}
.cl-dialog .cl-dialog-header .cl-dialog-close:active {
  background-image: url("images/btn_close.png");
}
.cl-dialog .cl-dialog-header .cl-dialog-min {
  background: url("images/btn_min.png") center center no-repeat;
}
.cl-dialog .cl-dialog-header .cl-dialog-min:active {
  background-image: url("images/btn_min.png");
}
.cl-dialog .cl-dialog-header .cl-dialog-max {
  background: url("images/btn_max.png") center center no-repeat;
}
.cl-dialog .cl-dialog-header .cl-dialog-max:active {
  background-image: url("images/btn_max.png");
}
.cl-dialog .cl-dialog-header .cl-dialog-restore {
  background: url("images/btn_restore.png") center center no-repeat;
}
.cl-dialog .cl-dialog-header .cl-dialog-restore:active {
  background-image: url("images/btn_restore.png");
}
.cl-overlay {
  background-color: var(--dialog-overlay-color);
  opacity: 0.5;
}
/* 트리 */
.cl-tree {
  border: 0px solid var(--default-border-color);
  font: var(--default-font);
  color: var(--default-text-color);
  background-color: transparent;
  /* 트리 아이템 */
  /* 트리 - focus */
}
.cl-tree .cl-tree-item {
  /* 트리 아이템 체크박스 아이콘 */
  /* 트리 아이템 아이콘 영역 */
  /* 트리 아이템의 펼치고 접혀지는 아이콘 영역*/
  /* 트리 아이템 텍스트 */
  /* 트리 아이템 - disabled */
  /* 트리 아이템 - selected */
}
.cl-tree .cl-tree-item .cl-tree-checkbox {
  background-image: url("images/checkbox.png");
  background-size: 15px;
}
.cl-tree .cl-tree-item .cl-tree-itemicon {
  background-image: url("images/icon_file.png");
}
.cl-tree .cl-tree-item.cl-checked {
  /* 트리 아이템 체크박스 아이콘 - 선택됨*/
}
.cl-tree .cl-tree-item.cl-checked > .cl-tree-checkbox {
  background-image: url("images/checkbox_checked.png");
}
.cl-tree .cl-tree-item.cl-partialchecked {
  /* 트리 아이템 체크박스 아이콘 - 부분 선택됨 */
}
.cl-tree .cl-tree-item.cl-partialchecked > .cl-tree-checkbox {
  background-image: url("images/checkbox_partial.png");
}
.cl-tree .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.cl-tree .cl-tree-item.cl-folder .cl-tree-itemicon {
  background-image: url("images/icon_folder.png");
}
.cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("images/icon_minus.png");
}
.cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("images/icon_plus.png");
}
.cl-tree .cl-tree-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 트리 아이템 - disabled, selected */
}
.cl-tree .cl-tree-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.cl-tree .cl-tree-item.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
.cl-tree .cl-tree-item.cl-selected.cl-folder {
  /* 트리 아이템 폴더 펼쳐짐 아이콘 - selected */
  /* 트리 아이템 폴더 점힘 아이콘 - selected */
}
.cl-tree .cl-tree-item.cl-selected.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("images/icon_minus.png");
}
.cl-tree .cl-tree-item.cl-selected.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("images/icon_plus.png");
}
.cl-tree.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled) {
  /* 트리 아이템 - hover */
  /* 드래그 아이템 위치에 따른 표시 */
  /* 드래그 아이템 위치에 따른 표시 */
  /* 드래그 아이템 위치에 따른 표시 */
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
/* 트리 - disabled */
.cl-tree.cl-disabled {
  color: var(--disabled-text-color);
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  /* 트리 아이템 - disabled, selected */
}
.cl-tree.cl-disabled .cl-tree-item {
  color: var(--disabled-text-color);
}
.cl-tree.cl-disabled .cl-tree-item.cl-selected {
  background-color: var(--disabled-selection-background);
  color: var(--disabled-selection-foreground);
}
/* 트리셀 */
.cl-treecell {
  /* 트리셀 안에 트리 아이템 (트리셀에서 트리구조가 시작되는 영역) */
  /* 트리셀 - focus */
}
.cl-treecell .cl-treecell-item {
  /* 트리 아이템이 펼치고 접혀지는 아이콘 영역 */
  /* 트리 아이템의 아이콘 영역 */
  /* 트리 아이템의 텍스트 */
  /* 폴더형 트리 아이템 */
  /* 트리 아이템 - disabled */
}
.cl-treecell .cl-treecell-item .cl-treecell-itemicon {
  background-image: url("images/icon_file.png");
}
.cl-treecell .cl-treecell-item .cl-text {
  /* 트리 아이템의 인풋 영역 */
}
.cl-treecell .cl-treecell-item.cl-folder {
  /* 폴더형 트리 아이템의 아이콘 영역 */
  /* 폴더형 트리 아이템이 펼쳐졌을 때 펼치고 접혀지는 아이콘 영역 */
  /* 폴더형 트리 아이템이 접혀졌을 때 펼치고 접혀지는 아이콘 영역 */
}
.cl-treecell .cl-treecell-item.cl-folder .cl-treecell-itemicon {
  background-image: url("images/icon_folder.png");
}
.cl-treecell .cl-treecell-item.cl-folder.cl-expanded > .cl-treecell-treeicon {
  background-image: url("images/icon_minus.png");
}
.cl-treecell .cl-treecell-item.cl-folder.cl-collapsed > .cl-treecell-treeicon {
  background-image: url("images/icon_plus.png");
}
/* 트리셀이 enabled이고, 트리 아이템이 enabled일때 스타일 */
/* 트리셀 - disabled */
.cl-treecell.cl-disabled {
  /* 트리셀 - disabled 의 트리 아이템 - selected */
}
/* 그리드 */
.cl-grid {
  font: var(--default-font);
  color: var(--default-text-color);
  border-top: var(--grid-border-top);
  border-right: var(--grid-border-right);
  border-bottom: var(--grid-border-bottom);
  border-left: var(--grid-border-left);
  /* Grid 기본 셀 스타일 */
  /* 셀 */
  /* 수정된 로우_선택된 특별한 항목 */
  /* 그리드 헤더 */
  /* 그리드 푸터 */
  /* 그리드 헤더 외곽 영역 */
  /* 그리드 헤더 외곽 영역 */
  /* 그리드 헤더 외곽 영역 */
  /* 스플릿 시 좌측 그리드 래퍼 */
  /* 스플릿 시 우측 그리드 래퍼 */
  /* 스플릿 상단 그리드 래퍼 */
  /* 스플릿 하단 그리드 래퍼 */
  /* noDataMessage 보여질 때 해당 텍스트영역 스타일 */
  /*  grid 내 버튼 스타일   */
}
.cl-grid.cl-disabled {
  border-top-color: var(--disabled-grid-border-top-color);
  border-right-color: var(--disabled-grid-border-right-color);
  border-bottom-color: var(--disabled-grid-border-bottom-color);
  border-left-color: var(--disabled-grid-border-left-color);
  background-color: var(--disabled-grid-background-color);
}
.cl-grid .grid-no {
  background-color: var(--grid-header-linear-gradient-start);
}
.cl-grid .underline .cl-default-cell .cl-text {
  text-decoration: underline;
  color: var(--focus-text-color);
  font-weight: bold;
  cursor: pointer;
}
.cl-grid .cl-grid-cell {
  border-right: var(--grid-cellborder-right-color);
  border-bottom: var(--grid-cellborder-bottom-color);
  padding: 0px 5px;
  /* 셀에 포함된 컨트롤 */
  /* 그룹 펼침/접힘 버튼 */
}
.cl-grid .cl-grid-cell .cl-expander {
  /* 그룹 접혀짐 버튼 */
  /* 그룹 펼쳐짐 버튼 */
}
.cl-grid .cl-grid-row {
  /* 보기 모드의 로우 */
  /* 홀수 로우 */
  /* 짝수 로우 */
  /* 로우 font weight */
  /* 로우 사용자 배경색 */
  /* 추가된 로우 */
  /* 수정된 로우 */
  /* 삭제된 로우 */
  /* 선택된 로우 - 보기 모드 */
  /* 편집중인 로우 */
  /* 행 그룹시 그룹의 헤더 */
  /* 행 그룹시 그룹의 푸터 */
}
.cl-grid .cl-grid-row.cl-odd-row {
  background-color: var(--grid-row-odd-background-color);
}
.cl-grid .cl-grid-row.cl-even-row {
  background-color: var(--grid-row-even-background-color);
}
.cl-grid .cl-grid-row.row-font-weight-bold {
  font-weight: bold;
}
.cl-grid .cl-grid-row.row-bg-color00 {
  background-color: transparent;
}
.cl-grid .cl-grid-row.row-bg-color01 {
  background-color: var(--grid-row-background-color01);
}
.cl-grid .cl-grid-row.row-bg-color02 {
  background-color: var(--grid-row-background-color02);
}
.cl-grid .cl-grid-row.row-bg-color03 {
  background-color: var(--grid-row-background-color03);
}
.cl-grid .cl-grid-row.row-bg-color04 {
  background-color: var(--grid-row-background-color04);
}
.cl-grid .cl-grid-row.row-bg-color05 {
  background-color: var(--grid-row-background-color05);
}
.cl-grid .cl-grid-row.cl-inserted {
  background-color: #d6edff;
}
.cl-grid .cl-grid-row.cl-inserted .cl-treecell,
.cl-grid .cl-grid-row.cl-inserted .cl-default-cell {
  font-weight: normal !important;
}
.cl-grid .cl-grid-row.cl-modified {
  background-color: #FFF4E6;
}
.cl-grid .cl-grid-row.cl-modified .cl-treecell,
.cl-grid .cl-grid-row.cl-modified .cl-default-cell {
  font-weight: normal !important;
}
.cl-grid .cl-grid-row.cl-selected {
  background-color: var(--grid-row-selected-background-color);
  color: var(--grid-row-selected-color);
  /* 포커스 셀 */
}
.cl-grid .cl-grid-row.cl-selected :focus,
.cl-grid .cl-grid-row.cl-selected .cl-focus {
  background-color: var(--grid-row-hover-background-color);
  color: var(--grid-row-hover-color);
}
.cl-grid .cl-grid-row:not(.cl-selected):hover {
  background-color: var(--grid-row-hover-background-color);
  color: var(--grid-row-hover-color);
}
.cl-grid .cl-grid-row:not(.cl-selected) {
  /* 로우 color */
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color01);
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color02);
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color03);
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color04);
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color05);
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid .cl-grid-row:not(.cl-selected) .cl-grid-cell {
  /* 셀 font weight */
  /* 셀 배경색 */
  /* 셀 cursor */
}
.cl-grid .cl-grid-row:not(.cl-selected) .cl-grid-cell.cell-font-weight-bold {
  font-weight: bold;
}
.cl-grid .cl-grid-row:not(.cl-selected) .cl-grid-cell.cell-bg-color01 {
  background-color: #ff9900;
  color: white;
}
.cl-grid .cl-grid-row:not(.cl-selected) .cl-grid-cell.cell-cusor-pointer {
  cursor: porinter;
}
.cl-grid.pickline .cl-grid-row.cl-modified {
  background-color: transparent;
}
.cl-grid.pickline .cl-grid-row.cl-odd-row {
  background-color: var(--grid-row-odd-background-color);
}
.cl-grid.pickline .cl-grid-row.cl-even-row {
  background-color: var(--grid-row-even-background-color);
}
.cl-grid .cl-grid-header {
  background-image: none;
  background-color: var(--grid-header-linear-gradient-start);
  border-bottom: 1px solid var(--grid-header-border-bottom);
  /* 그리드 헤더 셀 */
  /* 
		@deprecated (header의 sortColumnName속성)
		그리드 헤더 셀 소트 인디케이터 
		*/
  /* 그리드 헤더 셀 필터 인디케이터 */
  /* 그리드 헤더 셀이 소트가능 한 셀일 때 스타일 */
}
.cl-grid .cl-grid-header .cl-grid-cell {
  border-right: 1px solid var(--grid-header-border-right);
  border-bottom: 1px solid var(--grid-header-border-right);
  /* 그리드 헤더 셀에 임베딩 된 컨트롤 */
}
.cl-grid .cl-grid-header .cl-grid-cell .cl-control {
  color: var(--grid-header-color);
  font-weight: 700;
}
.cl-grid .cl-grid-header .cl-sort {
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 가능 */
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 정렬됨 */
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 정렬됨 */
}
.cl-grid .cl-grid-header .cl-sort.cl-sortable {
  background-image: url("images/icon_sort.png");
  background-size: 11px 11px;
}
.cl-grid .cl-grid-header .cl-sort.cl-sort-asc {
  background-image: url("images/icon_sort_asc.png");
  background-size: 11px 11px;
}
.cl-grid .cl-grid-header .cl-sort.cl-sort-desc {
  background-image: url("images/icon_sort_desc.png");
  background-size: 11px 11px;
}
.cl-grid .cl-grid-header .cl-filter {
  background-image: url("images/icon_filter.png");
  background-size: 14px;
  /* 그리드 헤더 셀 필터 인디케이터에 마우스가 호버되었을 때 스타일 */
  /* 그리드 헤더 셀 필터 인디케이터 - 필터되었을 때 스타일 */
}
.cl-grid .cl-grid-header .cl-filter:hover {
  background-image: url("images/icon_filter_apply.png");
}
.cl-grid .cl-grid-header .cl-filter.cl-filtered {
  background-image: url("images/icon_filter_apply.png");
  background-size: 14px;
}
.cl-grid .cl-grid-header .cl-sortable-cell {
  /* 그리드 헤더 셀 소트 인디케이터 */
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 정렬됨  */
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 정렬됨  */
}
.cl-grid .cl-grid-header .cl-sortable-cell .cl-sort {
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 가능한 아이콘 */
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 우선 순위 영역*/
}
.cl-grid .cl-grid-header .cl-sortable-cell .cl-sort .cl-sort-icon:before {
  color: var(--point-text-color-light);
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc {
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 아이콘 */
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc .cl-sort-icon:before {
  color: var(--point-text-color-light);
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-desc {
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 아이콘 */
}
.cl-grid .cl-grid-header :not(.cl-grid-header):hover {
  background-color: var(--grid-header-linear-gradient-start);
}
.cl-grid .cl-grid-footer {
  border-top: solid 1px var(--default-border-color);
}
.cl-grid .cl-grid-header-band {
  /* 디테일에 스크롤이 생길시 우측에 생기는 빈 영역 */
}
.cl-grid .cl-grid-header-band .cl-blank {
  background-color: #f1f1f1;
}
.cl-grid .cl-grid-detail-band {
  /* 디테일에 스크롤이 생길시 우측하단에 생기는 빈 영역 */
}
.cl-grid .cl-grid-detail-band .cl-blank {
  background-color: #f1f1f1;
}
.cl-grid .cl-grid-footer-band {
  /* 디테일에 스크롤이 생길시 우측에 생기는 빈 영역 */
}
.cl-grid .cl-grid-footer-band .cl-blank {
  background-color: #f1f1f1;
}
.cl-grid .cl-grid-topsplit {
  border-bottom: 1px solid #bbb;
}
.cl-grid .cl-grid-bottomsplit {
  border-top: 1px solid #bbb;
}
.cl-grid .cl-button {
  font-size: 11px;
  min-width: 40px;
  /*height: 20px;*/
  background-image: none;
  background-color: var(--default-button-bgcolor);
  border: none;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: none;
  padding: 0 10px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.cl-grid .cl-button.cl-disabled {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  color: #ffffff;
}
.cl-grid .cl-button.highlight {
  background-color: #ff0000;
  border: 1px solid var(--focus-border-color);
  color: #FFF;
  text-shadow: none;
}
.cl-grid .cl-button.highlight.cl-disabled {
  opacity: 0.5;
}
.cl-grid .cl-button:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
.cl-grid .cl-button:focus,
.cl-grid .cl-button.cl-focus {
  border: 0px;
}
.cl-grid .cl-button:not(.cl-disabled).cl-activated,
.cl-grid .cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
/* 그리드 필터 사용시 필터 다이얼로그가 펼쳐지는 영역 스타일*/
.cl-gridfilter {
  opacity: 1;
  /* 필터 다이얼로그 뒤에 비활성화 영역을 표현하기 위해 덮히는 막 */
  /* 필터 다이얼로그 */
}
.cl-gridfilter .cl-filterdlg {
  border: 1px solid var(--default-border-color);
  /* 필터 다이얼로그 - 타이틀 영역 */
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역 */
  /* 필터 다이얼로그 - 하단에 버튼 영역 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header {
  background-image: linear-gradient(var(--gray-background), var(--gray-background));
  /* 필터 다이얼로그 - 타이틀 영역의 글자 스타일 */
  /* 필터 다이얼로그 - 타이틀 영역의 닫기 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist {
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역의 아이템 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item {
  /* 필터 다이얼로그 - 아이템 체크박스 스타일 */
  /* 필터 다이얼로그 - 아이템 체크박스가 체크되었을 때의 스타일 */
  /* 필터 다이얼로그 - 아이템 글자 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item .cl-checkbox-icon {
  background-image: url("images/checkbox.png");
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item.cl-checked .cl-checkbox-icon {
  background-image: url("images/checkbox_checked.png");
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons {
  /* 필터 다이얼로그 - 하단에 버튼 영역의 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button {
  /* 필터 다이얼로그 - 버튼 영역의 확인 버튼 스타일 */
  /* 필터 다이얼로그 - 버튼 영역의 취소 버튼 스타일 */
}
/* 그리드 컨트롤버튼 영역  */
.grid-controlbtn-area {
  height: 25px !important;
  min-height: 25px !important;
}
.grid-controlbtn-area .cl-button.flat {
  background-color: var(--default-button-bgcolor);
  border: 0px;
  width: 21px !important;
  height: 21px !important;
  margin-left: 5px;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center center;
}
.grid-controlbtn-area .cl-button.flat.add {
  background-image: url("../../images/icon_add2.png");
}
.grid-controlbtn-area .cl-button.flat.delete {
  background-image: url("../../images/icon_del2.png");
}
.grid-controlbtn-area .cl-button.flat.edit {
  background-image: url("../../images/icon_edit2.png");
}
.grid-controlbtn-area .cl-button.flat.reset {
  background-image: url("../../images/icon_reset2.png");
}
.grid-controlbtn-area .cl-button.flat.up {
  background-image: url("../../images/icon_up2.png");
}
.grid-controlbtn-area .cl-button.flat.down {
  background-image: url("../../images/icon_down2.png");
}
.grid-controlbtn-area .cl-button.flat.copy {
  background-image: url("../../images/icon_copy2.png");
}
.grid-controlbtn-area .cl-button.flat.paste {
  background-image: url("../../images/icon_paste2.png");
}
.grid-controlbtn-area .cl-button.flat.xlsExport {
  background-image: url("../../images/icon_xlsexport2.png");
}
.grid-controlbtn-area .cl-button.flat.xlsImport {
  background-image: url("../../images/icon_xlsimport2.png");
}
.grid-controlbtn-area .cl-button.flat.cl-disabled {
  background-color: var(--disabled-button-bgcolor2);
}
.grid-controlbtn-area .cl-button.flat.cl-disabled.copy {
  background-image: url("../../images/icon_copy2_disable.png");
}
.grid-controlbtn-area .cl-button.flat.cl-disabled.paste {
  background-image: url("../../images/icon_paste2_disable.png");
}
.grid-controlbtn-area .cl-button.flat:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
}
/* 전표 인쇄용 투명 그리드  E */
.style-none-grid.cl-grid {
  font: var(--default-font);
  color: var(--default-text-color);
  border: none;
  /* 셀 */
  /* 그리드 헤더 */
}
.style-none-grid.cl-grid.cl-disabled {
  border: none;
}
.style-none-grid.cl-grid .cl-grid-cell {
  border: none;
  padding: 0px 5px;
  background-color: none;
}
.style-none-grid.cl-grid .cl-grid-row {
  /* 로우 */
  /* 선택된 로우 - 보기 모드 */
}
.style-none-grid.cl-grid .cl-grid-row.cl-odd-row {
  background-color: transparent;
}
.style-none-grid.cl-grid .cl-grid-row.cl-even-row {
  background-color: transparent;
}
.style-none-grid.cl-grid .cl-grid-row.cl-selected {
  background-color: none;
  /* 포커스 셀 */
}
.style-none-grid.cl-grid .cl-grid-row.cl-selected :focus,
.style-none-grid.cl-grid .cl-grid-row.cl-selected .cl-focus {
  background-color: none;
}
.style-none-grid.cl-grid .cl-grid-row:not(.cl-selected):hover {
  background-color: none;
}
.style-none-grid.cl-grid .cl-grid-header {
  background-image: none;
  background-color: none;
  border-bottom: none;
  /* 그리드 헤더 셀 */
}
.style-none-grid.cl-grid .cl-grid-header .cl-grid-cell {
  border: none;
  /* 그리드 헤더 셀에 임베딩 된 컨트롤 */
}
/* 전표 인쇄용 투명 그리드  E */
/* 타입별 그리드 */
.cl-grid {
  /* Merge 용 */
  /* Merge 용(병합된 컬럼은 배경색 transparent 처리하기 위해 row 단위로 css처리하는 방법에서 cell 단위로 css처리하도록 css 추가) */
  /* BOTH LINE HIDE FIRST */
  /* BOTH LINE HIDE LAST */
}
.cl-grid.grid-type-merged .cl-grid-detail {
  /* 로우 */
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row {
  background-color: transparent;
  /* 로우 font weight */
  /* 로우 사용자 배경색 */
  /* 선택된 로우 - 보기 모드 */
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-font-weight-bold {
  font-weight: bold;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-bg-color00 {
  background-color: transparent;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-bg-color01 {
  background-color: rgba(var(--grid-row-background-merged-color01-rgb), 0.5);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-bg-color02 {
  background-color: rgba(var(--grid-row-background-merged-color02-rgb), 0.5);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-bg-color03 {
  background-color: rgba(var(--grid-row-background-merged-color03-rgb), 0.5);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-bg-color04 {
  background-color: rgba(var(--grid-row-background-merged-color04-rgb), 0.5);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.row-bg-color05 {
  background-color: rgba(var(--grid-row-background-merged-color05-rgb), 0.5);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.cl-selected {
  background-color: rgba(var(--grid-row-selected-background-merged-color-rgb), 0.5);
  color: var(--grid-row-selected-color);
  /* 포커스 셀 */
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.cl-selected :focus,
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row.cl-selected .cl-focus {
  background-color: rgba(var(--grid-row-hover-background-merged-color-rgb), 0.5);
  color: var(--grid-row-hover-color);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected):hover {
  background-color: rgba(var(--grid-row-hover-background-merged-color-rgb), 0.5);
  color: var(--grid-row-hover-color);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected) {
  /* 로우 color */
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color01);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color02);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color03);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color04);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color05);
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail {
  /* 로우 */
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row {
  background-color: transparent;
  /* 로우 font weight */
  /* 선택된 로우 - 보기 모드 */
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row.row-font-weight-bold {
  font-weight: bold;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row.cl-selected {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row.cl-selected .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-selected-background-merged-color-rgb), 0.5);
  color: var(--grid-row-selected-color);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row.cl-selected .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected):hover {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected):hover .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-hover-background-merged-color-rgb), 0.5);
  color: var(--grid-row-hover-color);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected):hover .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected) {
  /* 로우 사용자 배경색 */
  /* 로우 color */
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color00 .cl-grid-cell:not(.grid-no) {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color01 .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-background-merged-color01-rgb), 0.5);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color01 .cl-grid-cell:not(.grid-no).cl-merged {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color01 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color01 .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color02 .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-background-merged-color02-rgb), 0.5);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color02 .cl-grid-cell:not(.grid-no).cl-merged {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color02 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color02 .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color03 .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-background-merged-color03-rgb), 0.5);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color03 .cl-grid-cell:not(.grid-no).cl-merged {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color03 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color03 .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color04 .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-background-merged-color04-rgb), 0.5);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color04 .cl-grid-cell:not(.grid-no).cl-merged {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color04 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color04 .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color05 .cl-grid-cell:not(.grid-no) {
  background-color: rgba(var(--grid-row-background-merged-color05-rgb), 0.5);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color05 .cl-grid-cell:not(.grid-no).cl-merged {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color05 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-bg-color05 .cl-grid-cell:not(.grid-no) .cl-grid-ctrl-inherit {
  background-color: transparent;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color01);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color02);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color03);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color04);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color05);
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged01 .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no):not(.not-merged-column) {
  color: inherit;
}
.cl-grid.grid-type-both-line-hide-first {
  border-right: none;
  border-left: none;
}
.cl-grid.grid-type-both-line-hide-first .cl-grid-cell:first-child {
  border-left: none;
}
.cl-grid.grid-type-both-line-hide-last {
  border-right: none;
  border-left: none;
}
.cl-grid.grid-type-both-line-hide-last .cl-grid-cell:last-child {
  border-right: none;
}
/* 네비게이션 바 */
.cl-navigationbar {
  font: var(--default-font);
  background-color: white;
  border: solid 1px var(--default-border-color);
  color: var(--default-text-color);
  /* 상단 바 */
  /* 네비게이션 바 - 포커스 */
}
.cl-navigationbar .cl-navigationbar-bar {
  /* 네비게이션 바 아이템 */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
  /* 네비게이션 바 아이템 아이콘 */
  /* 네비게이션 바 아이템 텍스트 */
  /* 네비게이션 바 아이템 단축키*/
  /* 네비게이션 바 아이템 드랍다운 아이콘 */
  /* 네비게이션 바 아이템 - 호버 */
  /* 네비게이션 바 아이템 - disabled */
  /* 네비게이션 바 아이템 - 선택됨 */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled).cl-hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 네비게이션 바 아이템 - 선택됨, disabled */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
  background-color: var(--selection-background);
  background-image: linear-gradient(var(--selection-background), var(--selection-background));
  color: var(--selection-foreground);
}
.cl-navigationbar.cl-focus {
  border-color: var(--focus-border-color);
}
/* 네비게이션 바 드랍다운 메뉴 */
.cl-navigationbar-list {
  border: solid 1px var(--default-border-color);
  font: var(--default-font);
  /* megamenu 타입의 카테고리 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 */
}
.cl-navigationbar-list .cl-navigationbar-category {
  /* 카테고리의 아이템 영역 */
}
.cl-navigationbar-list .cl-navigationbar-category .sub-items {
  /* 카테고리의 목록 아이템*/
}
.cl-navigationbar-list .cl-navigationbar-listitem {
  color: var(--default-text-color);
  /* 네비게이션 바 드랍다운 메뉴 아이템 텍스트 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - 호버 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - disabled */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - 선택됨 */
}
.cl-navigationbar-list .cl-navigationbar-listitem[data-itemlevel='0'] {
  background-color: var(--gray-background);
  color: var(--gray-text-color);
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-icon-wrapper {
  /* 네비게이션 바 드랍다운 메뉴 아이템 아이콘 */
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-arrow-wrapper .cl-navigationbar-arrow {
  /* 네비게이션 바 드랍다운 메뉴 아이템 아이콘 */
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-accesskey-wrapper {
  /* 네비게이션 바 드랍다운 메뉴 아이템 단축키 */
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled):not(.cl-selected):hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled).cl-hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-disabled {
  color: var(--disabled-text-color);
  /* 네비게이션 바 드랍다운 메뉴 아이템 - disabled, 선택됨 */
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
/* 탭 폴더 - disabled */
.cl-tabfolder.cl-disabled {
  opacity: 0.5;
}
/* 탭 폴더 */
.cl-tabfolder {
  color: var(--default-text-color);
  font: var(--default-font);
  /* 이전으로 스크롤 버튼 */
  /* 다음으로 스크롤 버튼 */
  /* 헤더 */
  /* 탭폴더 바디 */
}
.cl-tabfolder .cl-tabfolder-prev {
  border: solid 1px var(--default-border-color);
  background-image: url("images/nav-prev.png");
  /* 이전으로 스크롤 버튼 - disabled */
}
.cl-tabfolder .cl-tabfolder-prev.cl-disabled {
  background-image: url("images/btnA_ico_arr01_g.png");
}
.cl-tabfolder .cl-tabfolder-next {
  border: solid 1px var(--default-border-color);
  background-image: url("images/nav-next.png");
  /* 다음으로 스크롤 버튼 - disabled */
}
.cl-tabfolder .cl-tabfolder-next.cl-disabled {
  background-image: url("images/btnA_ico_arr02_g.png");
}
.cl-tabfolder .cl-tabfolder-header {
  /* 탭 헤더 아이템 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item {
  background-color: #FFFFFF;
  /* background-color: #F4F8F9; */
  border: solid 0px var(--default-border-color);
  padding: 6px 10px;
  /* 탭 헤더 아이템 닫기 버튼 */
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템 - 호버 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-tabfolder-button {
  background-image: url("images/icon_close.png");
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  background-color: #FFFFFF;
  color: var(--focus-text-color);
  border-color: var(--default-border-color);
  /* 탭 헤더 아이템 닫기 버튼 - 선택 됨 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected .cl-tabfolder-button {
  background-image: url("images/icon_close_on.png");
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: var(--hover-background);
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-checkbox {
  padding: 0;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-text:focus {
  text-decoration: none;
}
.cl-tabfolder .cl-tabfolder-body {
  color: var(--default-text-color);
  border: solid 0px var(--default-border-color);
}
/* 페이지 인덱서 */
.cl-pageindexer {
  font: var(--default-font);
  color: var(--default-text-color);
  /* 페이지 인덱서 버튼 공통 */
  /* 페이지 인덱서 처음으로 버튼 */
  /* 페이지 인덱서 이전 버튼 */
  /* 페이지 인덱서 다음 버튼 */
  /* 페이지 인덱서 마지막으로 버튼 */
  /* 페이지 인덱서 버튼 outline */
  /* 페이지 인덱서 - disabled */
}
.cl-pageindexer .cl-pageindexer-first,
.cl-pageindexer .cl-pageindexer-last,
.cl-pageindexer .cl-pageindexer-prev,
.cl-pageindexer .cl-pageindexer-next,
.cl-pageindexer .cl-pageindexer-index {
  border: 1px solid var(--default-border-color);
}
.cl-pageindexer .cl-pageindexer-index {
  /* 페이지 인덱서 선택된 페이지 */
}
.cl-pageindexer .cl-pageindexer-index.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
  border-color: var(--focus-border-color);
}
.cl-pageindexer .cl-pageindexer-first:focus,
.cl-pageindexer .cl-pageindexer-last:focus,
.cl-pageindexer .cl-pageindexer-prev:focus,
.cl-pageindexer .cl-pageindexer-next:focus,
.cl-pageindexer .cl-pageindexer-index:focus {
  outline: 1px solid var(--focus-border-color);
}
.cl-pageindexer.cl-disabled {
  color: var(--disabled-text-color);
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):active {
  background-color: var(--hover-background);
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):active {
  background-color: var(--hover-background);
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):active {
  background-color: var(--hover-background);
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):active {
  background-color: var(--hover-background);
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected) {
  /* 페이지 인덱서 버튼 - 호버 */
  /* 페이지 인덱서 버튼 - 액티브 */
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):active {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
.cl-pageindexer.cl-disabled {
  /* 페이지 인덱서 버튼 공통 - disabled */
  /* 페이지 인덱서 버튼 공통 - disabled, selected */
}
.cl-pageindexer.cl-disabled .cl-pageindexer-first,
.cl-pageindexer.cl-disabled .cl-pageindexer-last,
.cl-pageindexer.cl-disabled .cl-pageindexer-prev,
.cl-pageindexer.cl-disabled .cl-pageindexer-next,
.cl-pageindexer.cl-disabled .cl-pageindexer-index {
  background-color: var(--disabled-selection-background);
  border-color: var(--disabled-border-color);
  color: var(--disabled-selection-foreground);
}
.cl-pageindexer.cl-disabled .cl-pageindexer-index.cl-selected {
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
  border-color: #ff0000;
}
/* 노티파이어 아이템 */
.cl-notifier-item {
  font: var(--default-font);
  /* 노티파이어 아이템 텍스트 */
  /* 노티파이어 아이템 아이콘 */
  /* 노티파이어 아이템 닫기 버튼 */
  /* 노티파이어 아이템 기본 스타일 */
  /* 노티파이어 아이템 success 스타일 */
  /* 노티파이어 아이템 info 스타일 */
  /* 노티파이어 아이템 warning 스타일 */
  /* 노티파이어 아이템 danger 스타일 */
}
.cl-notifier-item .cl-text {
  padding: 0px 5px;
}
.cl-notifier-item.cl-notifier-default {
  /* 노티파이어 아이템 기본 아이콘 */
}
.cl-notifier-item.cl-notifier-success {
  /* 노티파이어 아이템 success 아이콘 */
}
.cl-notifier-item.cl-notifier-info {
  /* 노티파이어 아이템 info 아이콘 */
}
.cl-notifier-item.cl-notifier-warning {
  /* 노티파이어 아이템 warning 아이콘 */
}
.cl-notifier-item.cl-notifier-danger {
  /* 노티파이어 아이템 danger 아이콘 */
}
.cl-progress {
  /* 프로그레스 바 루트 */
  background-image: linear-gradient(#FFF, #FFF);
  border: 1px solid var(--default-border-color);
  /* 진행 바 */
}
.cl-progress .cl-progress-bar {
  background-image: linear-gradient(#3B9CFF, #3B9CFF);
}
.cl-progress.cl-disabled {
  /* 프로그레스 바 - disabled */
  border-color: var(--disabled-border-color);
  background-image: linear-gradient(#FFF, #FFF);
}
.cl-progress.cl-disabled .cl-progress-bar {
  /* 진행 바 - disabled */
  background-image: linear-gradient(#F5F5F5, #F5F5F5);
}
/* 파일 인풋 루트 */
.cl-fileinput {
  font: var(--default-font);
  color: var(--default-text-color);
  border: solid 1px var(--default-input-border-color);
  background-color: #fff;
  /* 파일 인풋 내 텍스트 */
  /* 포커스 상태 */
}
.cl-fileinput:focus {
  border: solid 1px var(--focus-border-color);
}
.cl-fileinput.cl-disabled {
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
}
/* 드래그 호버 상태 */
.cl-fileinput-draghover {
  border-color: red;
}
/**********************************
 폼 레이아웃
 **********************************/
.cl-formlayout-column-shade {
  /* 컬럼 음영 스타일 */
}
.cl-formlayout-row-shade {
  /* 행 음영 스타일 */
}
.cl-formlayout-vertical-separator,
.cl-formlayout-horizontal-separator {
  /* 구분 선 스타일 */
}
.cl-form-group {
  border: solid 1px #cccccc;
}
/* 피벗 도우미 패널 루트 */
.cl-container.pivot-panel {
  border: 1px solid var(--focus-border-color);
  /* 피벗 도우미 헤더 스타일 */
  /* 피벗 도우미 바디 스타일 */
  /* 피벗 도우미 폼 레이아웃 구분선 스타일 */
  /* 피벗 도우미(세로) 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-header {
  background-color: #217346;
  /* 피벗 도우미 헤더 내 버튼 스타일 (공통) */
  /* 자동 실행 체크박스 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-button {
  background-image: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  text-shadow: none;
  /* 피벗 도우미 헤더 내 버튼 호버 스타일 (공통) */
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-button .cl-icon {
  width: 20px;
  height: 20px;
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-checkbox.auto-update {
  padding: 0;
  border: 1px solid transparent;
  vertical-align: top;
  /* 자동 실행 체크박스 아이콘 스타일 */
  /* 자동 실행 체크박스 텍스트 스타일 */
  /* 자동 실행 체크박스 호버 상태 스타일 */
  /* 자동 실행 체크박스 포커스 상태 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-checkbox.auto-update .cl-checkbox-icon {
  background-image: url("../../images/pivot/icon-progress-close.svg");
  background-size: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-checkbox.auto-update.cl-checked {
  /* 자동 실행 체크박스 체크 상태 아이콘 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-checkbox.auto-update.cl-checked .cl-checkbox-icon {
  background-image: url("../../images/pivot/icon-progress-check.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-checkbox.auto-update .cl-text {
  padding: 0;
}
.cl-container.pivot-panel .cl-container.pivot-helper-header .cl-checkbox.auto-update.cl-focus .cl-checkbox-icon {
  outline: none;
}
.cl-container.pivot-panel .cl-container.pivot-helper-body {
  /* 피벗 필드 타이틀 스타일 (공통) */
  /* 전체 필드 타이틀 스타일 */
  /* 컬럼 필드 타이틀 스타일 */
  /* 로우 필드 타이틀 스타일 */
  /* 값 필드 타이틀 스타일 */
  /* 필드 컨텐츠 영역 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-output {
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 3px center;
  padding-left: 21px;
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-output.list-field {
  background-image: url("../../images/pivot/icon-grid.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-output.column-field {
  background-image: url("../../images/pivot/icon-view-column.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-output.row-field {
  background-image: url("../../images/pivot/icon-view-sequential.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-output.value-field {
  background-image: url("../../images/pivot/icon-sigma.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content {
  /* 각 필드 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field {
  background-image: none;
  background-repeat: no-repeat;
  background-position: 5px center;
  background-color: #ffffff;
  border: 1px solid var(--default-border-color);
  border-radius: 0;
  padding: 0px 5px;
  text-align: left;
  /* 전체 필드 스타일 */
  /* 컬럼과 로우 필드 스타일 */
  /* 값 필드 스타일 */
  /* 각 필드 호버 상태 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field .cl-text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.column,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.row,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.filter {
  padding-left: 25px;
  /* 필드 오름차순 스타일 */
  /* 필드 내림차순 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.column.asc,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.row.asc,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.filter.asc {
  background-image: url("../../images/pivot/field/arrow-down-circle.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.column.desc,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.row.desc,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.filter.desc {
  background-image: url("../../images/pivot/field/arrow-up-circle.svg");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.value {
  padding-left: 30px;
  /* 값 필드 합계 상태 스타일 */
  /* 값 필드 평균 상태 스타일 */
  /* 값 필드 개수 상태 스타일 */
  /* 값 필드 최솟값 상태 스타일 */
  /* 값 필드 최댓값 상태 스타일 */
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.value.sum {
  background-image: url("../../images/pivot/field/pv_sum.png");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.value.avg {
  background-image: url("../../images/pivot/field/pv_avg.png");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.value.count {
  background-image: url("../../images/pivot/field/pv_cnt.png");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.value.min {
  background-image: url("../../images/pivot/field/pv_min.png");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field.value.max {
  background-image: url("../../images/pivot/field/pv_max.png");
}
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field:not(.cl-disabled).cl-hover,
.cl-container.pivot-panel .cl-container.pivot-helper-body .cl-container.field-content .cl-button.field:not(.cl-disabled):hover {
  color: #217346;
}
.cl-container.pivot-panel .cl-formlayout-vertical-separator,
.cl-container.pivot-panel .cl-formlayout-horizontal-separator {
  background-color: var(--focus-border-color);
}
.cl-container.pivot-panel.vertical {
  /* 피벗 도우미(세로) 구분선 스타일 */
}
.cl-container.pivot-panel.vertical .cl-formlayout-horizontal-separator.cl-nth-of-row-1,
.cl-container.pivot-panel.vertical .cl-formlayout-horizontal-separator.cl-nth-of-row-3,
.cl-container.pivot-panel.vertical .cl-formlayout-horizontal-separator.cl-nth-of-row-5,
.cl-container.pivot-panel.vertical .cl-formlayout-horizontal-separator.cl-nth-of-row-7 {
  background-color: transparent;
}
/* 피벗 그리드 스타일 */
.cl-grid.pivot {
  /* 피벗 그리드 헤더 스타일 */
  /* 피벗 그리드 디테일 스타일 */
  /* 피벗 그리드 셀 공통 스타일 */
}
.cl-grid.pivot .cl-grid-header {
  background-image: none;
  background-color: #217346;
  /* 피벗 그리드 헤더 셀 스타일 */
  /* 피벗 그리드 멀티소트 스타일 */
}
.cl-grid.pivot .cl-grid-header .cl-grid-cell {
  color: #ffffff;
  /* 피벗 그리드 헤더 컨트롤 스타일 */
}
.cl-grid.pivot .cl-grid-header .cl-grid-cell .cl-control {
  color: #ffffff;
}
.cl-grid.pivot .cl-grid-header .cl-sortable-cell {
  /* 멀티소트 오름차순 스타일 */
  /* 멀티소트 내림차순 스타일 */
}
.cl-grid.pivot .cl-grid-header .cl-sortable-cell .cl-sort {
  /* 멀티소트 아이콘 스타일 */
  /* 멀티소트 순번 스타일 */
}
.cl-grid.pivot .cl-grid-detail {
  /* 피벗 그리드 디테일 로우 스타일 */
}
.cl-grid.pivot .cl-grid-detail .cl-grid-row {
  /* 피벗 그리드 보기 모드 로우 스타일 */
  /* 피벗 그리드 홀수 행 스타일 */
  /* 피벗 그리드 짝수 행 스타일 */
  /* 피벗 그리드 선택 행 스타일 */
}
.cl-grid.pivot .cl-grid-detail .cl-grid-row.cl-selected,
.cl-grid.pivot .cl-grid-detail .cl-grid-row.cl-editing {
  background-color: rgba(116, 179, 77, 0.3);
  color: var(--default-text-color);
  /* 피벗 그리드 포커스 셀 스타일 */
}
.cl-grid.pivot .cl-grid-detail .cl-grid-row.cl-selected :focus,
.cl-grid.pivot .cl-grid-detail .cl-grid-row.cl-editing :focus,
.cl-grid.pivot .cl-grid-detail .cl-grid-row.cl-selected .cl-focus,
.cl-grid.pivot .cl-grid-detail .cl-grid-row.cl-editing .cl-focus {
  background-color: #ffd966;
}
/* 서치 인풋 */
.cl-searchinput {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  background-image: none;
  /* 서치 인풋 텍스트 */
  /* 서치 인풋 - 포커스 상태 */
  /* 서치 인풋 - disabled 상태 */
}
.cl-searchinput.cl-focus {
  border-color: var(--focus-border-color);
}
.cl-searchinput.cl-disabled {
  border-color: var(--disabled-input-border-color);
  background-image: none;
  background-color: var(--disabled-input-background-color);
  color: var(--disabled-text-color);
}
.deactive-calendar .cl-calendar-content td.cl-calendar-content-day.cl-calendar-current,
.deactive-calendar .cl-calendar-content td.cl-calendar-content-month.cl-calendar-current,
.deactive-calendar .cl-calendar-content td.cl-calendar-content-year.cl-calendar-current {
  box-shadow: none;
}
.deactive-calendar .cl-calendar-content .cl-other-month {
  visibility: hidden;
}
/* 스크롤 디자인  S */
body {
  /* 익스플로러 : 크기이미지 수정 못함 */
  scrollbar-face-color: none;
  scrollbar-track-color: #f0f0f0;
  scrollbar-arrow-color: var(--scrollbar-background-color);
  scrollbar-highlight-color: var(--scrollbar-background-color);
  scrollbar-3dlight-color: var(--scrollbar-background-color);
  scrollbar-shadow-color: var(--scrollbar-background-color);
  scrollbar-darkshadow-color: var(--scrollbar-background-color);
  /* 크롬 사파리 SCROLL */
  /* 파이어폭스 SCROLL */
  scrollbar-width: 10px;
  scrollbar-color: var(--scrollbar-background-color);
}
body ::-webkit-scrollbar {
  /* 스크롤바의 width */
  width: 7px;
  height: 7px;
}
body ::-webkit-scrollbar-track {
  /* 스크롤바의 전체 배경색 */
  width: 20px !important;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  background-color: #cccccc;
  background-clip: content-box;
}
body ::-webkit-scrollbar-thumb {
  /* 스크롤바 핸들러 색 */
  background: linear-gradient(to bottom, var(--scrollbar-background-color), var(--scrollbar-background-color));
  border-radius: 5px 5px;
}
body ::-webkit-scrollbar-button {
  /* 위 아래 버튼 (버튼 없애기를 함) */
  display: none;
}
body ::-webkit-scrollbar-button:start {
  background-color: red;
  /* Top, Left 방향의 이동버튼 */
}
body ::-webkit-scrollbar-button:end {
  background-color: orange;
  /* Bottom, Right 방향의 이동버튼 */
}
/* 스크롤 디자인  S */
/* 팝업창 컨텐츠  S */
.grp-main-popup {
  padding: 10px;
}
/* 팝업창 컨텐츠  E */
.cl-grid .cl-nodatamsg {
  font-size: 14px;
  font-weight: bold;
  padding: 10px 10px;
}
/* 그리드 버튼 */
.cl-grid .cl-button.search-button {
  padding: 0px;
  min-width: 0px;
  border: none;
  background-color: transparent;
  background-image: url("images/btnA_ico_search.png");
  background-repeat: no-repeat;
  background-position: center;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.cl-grid .cl-button.search-button:not(.cl-disabled):hover {
  background-color: transparent;
}
.cl-grid .cl-button.search-button:not(.cl-disabled).cl-activated,
.cl-grid .cl-button.search-button:not(.cl-disabled):active {
  background-image: url("images/btnA_ico_search.png");
}
/** CUSTOM CLASS **/
.cl-main {
  min-width: 1024px;
}
.required {
  /* Grid 내부에서 컨트롤의 background 를 cell에서 상속 받도록 하는 문제가 있음 */
  background-image: url("../../images/required.png");
  background-position-x: left;
  background-position-y: top;
  background-repeat: no-repeat;
}
.cl-viewing .required {
  background: transparent;
}
.cl-editing .required {
  background-image: url("../../images/required.png");
  background-position-x: left;
  background-position-y: top;
  background-repeat: no-repeat;
}
.cl-menu-item .cl-text,
.cl-navigationbar-listitem .cl-text {
  vertical-align: middle;
}
/**********************************
 폼 레이아웃
 **********************************/
.cl-formlayout-column-shade {
  background-color: transparent;
  /* 컬럼 음역 스타일 */
}
.cl-output .cl-text {
  line-height: 1.1em;
  word-break: break-word;
}
.cl-output.step-box {
  color: white;
  text-align: center;
  background-color: #aaaaaa;
}
.cl-output.step-arrow-right {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 12px solid #aaaaaa;
}
.cl-output.step-white-arrow-right {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 12px solid white;
}
.cl-output.select-step-box {
  color: white;
  text-align: center;
  background-color: var(--default-button-bgcolor);
}
.cl-output.select-step-arrow-right {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 12px solid var(default-button-bgcolor);
}
.cl-output.select-step-white-arrow-right {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 12px solid white;
}
.cl-grid-header {
  text-align: center;
}
.cl-loadmask.cl-overlay {
  opacity: 1;
  background-color: rgba(86, 88, 92, 0.4);
}
.cl-loadmask.cl-overlay .cl-dialog {
  border-radius: 12px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
}
.cl-loadmask.cl-overlay .cl-dialog .cl-image {
  user-select: none;
}
.cl-loadmask.cl-overlay .cl-dialog .cl-text {
  color: #222222;
  font-size: 13px;
  font-weight: bold;
}
.cl-control.component-css {
  background-color: #FFFFFF;
}
/**********************************************************************************************************************************************/
.button-close-icon {
  background-image: url("images/close.png"), linear-gradient(#FCFEFF, #E0E1E2);
  background-position: 8px center, left top;
  background-repeat: no-repeat;
  text-align: left;
  padding-left: 25px;
}
.cl-control.cl-disabled {
  background-image: none;
  background-color: none;
}
.cl-searchinput.cl-disabled {
  color: var(--disabled-text-color);
  background-color: var(--disabled-selection-background);
  border-color: var(--disabled-border-color);
}
/**********************************
  전역 설정 
 **********************************/
.border1px {
  border: 1px solid #ff0000 !important;
}
.box_border {
  border: 1px solid #cacaca;
}
.pd0 {
  padding: 0px !important;
}
.mgT5 {
  margin-top: 5px !important;
}
.mgT10 {
  margin-top: 10px !important;
}
.mgT15 {
  margin-top: 15px !important;
}
.mgT20 {
  margin-top: 20px !important;
}
.mgT25 {
  margin-top: 25px !important;
}
.mgT30 {
  margin-top: 30px !important;
}
.mgB10 {
  margin-bottom: 10px !important;
}
.mgB15 {
  margin-bottom: 15px !important;
}
.mgB20 {
  margin-bottom: 20px !important;
}
.mgB25 {
  margin-bottom: 25px !important;
}
.mgB30 {
  margin-bottom: 30px !important;
}
.mgL10 {
  margin-left: 10px !important;
}
.mgL15 {
  margin-left: 15px !important;
}
.mgL20 {
  margin-left: 20px !important;
}
.mgL25 {
  margin-left: 25px !important;
}
.mgL30 {
  margin-left: 30px !important;
}
.font-red {
  color: #ff0000;
}
ol,
ul,
li {
  list-style: none;
}
.ul-blue-type01 li {
  background: url("../../images/bullet_spot_blue.png") left 5px no-repeat;
  padding-left: 8px;
  margin-bottom: 3px;
}
.ul-red-type01 li {
  background-image: url("../../images/required.png");
}
/* 배경 투명 인풋박스 S */
.nobg-input.cl-inputbox {
  background-color: transparent;
  background-image: none;
}
/* 배경 투명 인풋박스 S */
/******************************************************************* 
 * header-area  S
 *******************************************************************/
/******************************************************************* 
 * header-area  E
 *******************************************************************/
/******************************************************************* 
 * left-area  S
 *******************************************************************/
/******************************************************************* 
 * left-area  E
 *******************************************************************/
/******************************************************************* 
 * main-contents  S
 *******************************************************************/
/******************************************************************* 
 * main-contents  E
 *******************************************************************/
/******************************************************************* 
 * footer-area  S
 *******************************************************************/
/******************************************************************* 
 * footer-area  E
 *******************************************************************/
/******************************************************************* 
 * slide style S
 *******************************************************************/
/*  spin, 버튼   */
.slide-left-btn.cl-button,
.slide-left-btn2.cl-button {
  background: url("../../images/icon_left2.png") no-repeat center center;
  background-color: #cccccc;
  border: 0px;
  border-radius: 0 5px 5px 0;
  text-shadow: none;
}
.slide-left-btn.cl-button:hover,
.slide-left-btn2.cl-button:hover {
  background: url("../../images/icon_left2_ov.png") no-repeat center center;
  background-color: #aaaaaa;
  width: 10px !important;
}
.slide-left-btn2.cl-button {
  background: url("../../images/icon_right2.png") no-repeat center center;
  background-color: #cccccc;
}
.slide-left-btn2.cl-button:hover {
  background: url("../../images/icon_right2_ov.png") no-repeat center center;
  background-color: #aaaaaa;
}
/*  right-spin 버튼   */
.right-spin-btn.cl-button,
.right-spin-btn2.cl-button {
  background: url("../../images/icon_right2.png") no-repeat center center;
  background-color: #cccccc;
  border: 0px;
  border-radius: 5px 0 0 5px;
  text-shadow: none;
}
.right-spin-btn.cl-button:hover,
.right-spin-btn2.cl-button:hover {
  background: url("../../images/icon_right2_ov.png") no-repeat center center;
  background-color: #aaaaaa;
  width: 8px !important;
}
.right-spin-btn2.cl-button {
  background: url("../../images/icon_left2.png") no-repeat center center;
  background-color: #cccccc;
}
.right-spin-btn2.cl-button:hover {
  background: url("../../images/icon_left2_ov.png") no-repeat center center;
  background-color: #aaaaaa;
}
/*  rightslide 영역 */
.rightslide-area {
  border: 0px;
  background-color: #f2f2f2;
  padding-bottom: 10px;
}
.rightslide-area.bgcontol {
  background-color: transparent;
}
.rightslide-area .cl-control {
  background-color: transparent;
}
/* // rightslide 영역 */
/******************************************************************* 
 * slide style E
 *******************************************************************/
.sch-box {
  border: 1px solid #e6e9f1;
  background-color: #FFF;
}
.sch-box .cl-inputbox {
  border: none;
}
.sch-box .cl-button {
  border: none;
  background-color: #FFF;
  background-image: url("images/btnA_ico_search.png");
  background-repeat: no-repeat;
  background-position: center;
}
.sch-box .cl-button:not(.cl-disabled).cl-active,
.sch-box .cl-button:not(.cl-disabled):active {
  background-image: url("images/btnA_ico_search.png");
  background-color: #FFF;
}
/* aside 다이얼로그 */
body > div.cl-container > div.cl-aside .cl-dialog input.cl-text,
body > div.cl-container > div.cl-aside .cl-dialog .cl-preventinput.cl-text {
  padding: 0 5px;
}
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close) {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  background-position: 5px center, left top;
  background-repeat: no-repeat;
  border: 0px solid var(--default-border-color);
  color: #ffffff;
  border-radius: 3px;
  text-shadow: 0px 0px 0px white;
  padding: 5px 10px;
  min-width: 55px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close).cl-disabled {
  background-image: none;
  background-color: var(--disabled-button-bgcolor);
  color: #ffffff;
  opacity: 1;
}
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close):not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close):focus,
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close).cl-focus {
  border: 0px;
}
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close):not(.cl-disabled).cl-activated,
body > div.cl-container > div.cl-aside .cl-dialog .cl-button:not(.chat-item-close):not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
body > div.cl-container > div.cl-aside .cl-dialog .grp-freeform {
  background-color: var(--grp-background-color);
  border: var(--grp-border);
  padding: 10px;
}
body > div.cl-container > div.cl-aside .cl-dialog .grp-freeform.cl-control.cl-disabled {
  background-color: none;
  border: 1px solid var(--disabled-border-color);
}
.cl-notifier-item.cl-notifier-default {
  border: 1px solid #8b8b8b;
  padding: 5px;
  background-color: #fbf7c5;
}
.cl-notifier-item.cl-notifier-default .cl-notifier-icon {
  background-image: url("../../images/icon_notibox.png");
  padding: 10px;
}
.cl-notifier-item.cl-notifier-default .cl-text {
  line-height: 150%;
  white-space: pre-wrap;
}
.cl-notifier-item.cl-notifier-default .cl-notifier-closebutton {
  background-position: center top;
}
.cl-image.object-fit-contain img {
  object-fit: contain;
}
.cl-image.object-fit-cover img {
  object-fit: cover;
}
.chat-item {
  padding: 5px;
  border: solid 1px #8b8b8b;
  border-radius: 5px;
  background-color: #fbf7c5;
}
.chat-item .chat-item-title {
  font-size: 11px;
  font-weight: bold;
}
.chat-item .chat-item-sender {
  font-size: 11px;
}
.chat-item .chat-item-message {
  min-height: 30px;
}
.chat-item .chat-item-message .cl-text {
  line-height: 150%;
  white-space: pre-wrap;
}
.chat-item .chat-item-datetime {
  font-size: 11px;
}
.chat-item .chat-item-close.cl-button {
  background: url("../../images/btn_close2.png") no-repeat center center;
  background-color: transparent;
  border: none;
  min-width: 20px;
}
.login-box {
  box-shadow: 0 8px 10px 1px rgba(100, 100, 100, 0.14), 0 3px 14px 2px rgba(100, 100, 100, 0.12), 0 5px 5px -3px rgba(100, 100, 100, 0.3);
  background: #f6f6f6;
  border: solid 1px #cccccc;
}
.login-input {
  font-size: 16px;
  font-weight: 700;
  background-color: #FFF;
  border: 1px solid #bcbcc4;
  padding-left: 15px;
}
.login-input .cl-inputbox {
  border: none;
  color: #72869F;
}
.login-title {
  color: var(--point-text-color);
  font-size: 2em;
  vertical-align: top;
}
.forgot-pw {
  color: var(--point-text-color-light);
  text-align: center;
  text-decoration: underline;
}
.login-btn.cl-button {
  background: #175566 url("../../images/icon_login.png") no-repeat 37% center;
  border: 0px solid #175566;
  font-size: 1.2em;
  font-weight: 700;
  color: #ffffff;
  text-shadow: none;
}
.login-btn.cl-button:hover {
  background: #175566 url("../../images/icon_login_ov.png") no-repeat 37% center;
  color: #86f3fa;
}
.form {
  border: 1px solid var(--default-border-color);
  border-top: 2px solid var(--point-text-color-light);
}
.form .label {
  background-color: var(--lightnavy-background);
  font-weight: bold;
  padding-right: 10px;
  text-align: right;
}
.form .label.required {
  background-image: url("images/required.png");
  background-repeat: no-repeat;
  background-position: 98% center;
}
.form-box {
  border-bottom: 1px solid var(--default-border-color);
}
.formlayout-grid {
  border-top: var(--grid-border-top);
  border-right: var(--grid-border-right);
  border-bottom: var(--grid-border-bottom);
  border-left: var(--grid-border-left);
}
.formlayout-grid .cl-formlayout-column-shade {
  background-color: var(--grid-header-linear-gradient-start);
}
.formlayout-grid .cl-formlayout-row-shade {
  background-color: var(--grid-header-linear-gradient-start);
}
.formlayout-grid .cl-formlayout-vertical-separator,
.formlayout-grid .cl-formlayout-horizontal-separator {
  background-color: #c0c0c0;
}
.search-box {
  background-color: var(--lightnavy-background);
  border: 1px solid var(--default-border-color);
}
.search-box .label {
  font-weight: bold;
  text-align: right;
}
.search-box .label.required {
  background-image: url("images/required.png");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 10px;
}
.search-box .search.cl-button {
  background-image: url("images/btnA_ico_search_w.png"), linear-gradient(var(--focus-border-color), var(--focus-border-color));
  background-repeat: no-repeat;
  background-position: 10% center;
  border: none;
  color: #FFF;
  padding-left: 25px;
  text-align: left;
  text-shadow: none;
}
.search-box .search.cl-button:not(.cl-disabled):hover {
  color: #FFF;
}
/***********************************************
 * 검색 UDC ( searchbutton )
 ***********************************************/
.udc-search {
  background: #fff;
  border: 1px solid #c3c6c9;
  border-radius: 3px;
  color: var(--default-text-color);
  overflow: hidden;
}
.udc-search.cl-disabled {
  background-image: none;
  background: var(--disabled-selection-background);
  border: 1px solid var(--disabled-border-color);
  color: var(--disabled-selection-foreground);
}
.udc-search .udc-search-input {
  background-image: none;
  border: none;
}
.udc-search .cl-button {
  border: none;
  background-image: url("images/btnA_ico_search.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}
.udc-search .cl-button.cl-disabled {
  background-image: url("images/btnA_ico_search.png");
}
.udc-search .cl-button:not(.cl-disabled):hover {
  background-color: #fff;
}
.udc-search .cl-button:not(.cl-disabled).cl-activated,
.udc-search .cl-button:not(.cl-disabled):active {
  background-color: #fff;
  background-image: url("images/btnA_ico_search.png");
  opacity: 1;
}
.header-area {
  background-color: var(--background-color);
  background-image: linear-gradient(var(--selection-background), var(--selection-background));
  background-position: 0px 100%;
  background-repeat: no-repeat;
  background-size: 100% 3px;
}
.header-area .lblBizNm-style {
  color: var(--background-color);
  font-weight: 700;
  text-align: right;
  color: #000000;
}
.header-area .cl-navigationbar {
  /* 네비게이션 바 border 기본값은 1px로 사용안함으로 변경  */
  border: none;
  /* 네비게이션 바 하단 선 나오도록 배경색 적용 */
  background-color: transparent;
  /* 네비게이션 바 아이템 */
}
.header-area .cl-navigationbar .cl-navigationbar-item {
  padding: 5px 15px;
  min-width: 80px;
  /* 호버 */
  /* 선택 */
}
.header-area .cl-navigationbar .cl-navigationbar-item .cl-text {
  font-size: 13px;
  font-weight: 700;
}
.header-area .cl-navigationbar .cl-navigationbar-item .cl-navigationbar-content {
  margin: 0 auto;
}
.header-area .cl-navigationbar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover {
  background-image: linear-gradient(var(--selection-background) 35px, var(--selection-highlight) 3px);
  color: #ffffff;
}
.header-area .cl-navigationbar .cl-navigationbar-item:not(.cl-disabled).cl-hover {
  background-color: var(--selection-background);
  color: #ffffff;
}
.header-area .cl-navigationbar .cl-navigationbar-item.cl-selected {
  background-image: linear-gradient(var(--selection-background) 35px, var(-selection-highlight) 3px);
}
.header-area .cl-navigationbar.navigationbar-type01 {
  /* 네비게이션바 아이템 */
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item {
  padding: 0px;
  vertical-align: top !important;
  min-width: 60px;
  /* 호버 */
  /* 선택 */
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(:last-child) {
  background: url("../../images/top_menu_bar.png") no-repeat right 7px;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item .cl-navigationbar-content {
  min-width: 60px;
  margin: 0px 7px 0px 6px;
  padding: 7px 10px 6px 10px;
  text-align: center;
  border-radius: 15px;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item .cl-navigationbar-text {
  font-size: 13px;
  font-weight: 700;
  padding: 0px;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item .cl-navigationbar-arrow {
  display: none;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: transparent;
  background-image: none;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover:not(:last-child) {
  background: url("../../images/top_menu_bar.png") no-repeat right 7px;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover .cl-navigationbar-content {
  background-color: var(--hover-background);
  color: var(--selection-foreground);
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(.cl-disabled).cl-hover {
  background-color: transparent;
  background-image: none;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(.cl-disabled).cl-hover:not(:last-child) {
  background: url("../../images/top_menu_bar.png") no-repeat right 7px;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item:not(.cl-disabled).cl-hover .cl-navigationbar-content {
  background-color: var(--hover-background);
  color: var(--selection-foreground);
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item.cl-selected {
  background-color: transparent;
  background-image: none;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item.cl-selected:not(:last-child) {
  background: url("../../images/top_menu_bar.png") no-repeat right 7px;
}
.header-area .cl-navigationbar.navigationbar-type01 .cl-navigationbar-item.cl-selected .cl-navigationbar-content {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
.header-area .pwch-btn.cl-button {
  background: url("../../images/icon_pwch.png") no-repeat center center;
  background-size: cover;
  border: 0px;
  border-radius: 0px;
}
.header-area .pwch-btn.cl-button:hover {
  background: url("../../images/icon_pwch_ov.png") no-repeat center center;
}
.header-area .logout-btn.cl-button {
  background: url("../../images/icon_logout.png") no-repeat center center;
  background-size: cover;
  border: 0px;
  border-radius: 0px;
}
.header-area .logout-btn.cl-button:hover {
  background: url("../../images/icon_logout_ov.png") no-repeat center center;
}
.header-area .time-extend-btn.cl-button {
  background: url("../../images/ic_btn_extend.svg") no-repeat center center;
  background-size: cover;
  border: 0px;
  border-radius: 0px;
}
.header-area .time-extend-btn.cl-button:hover {
  background: url("../../images/ic_btn_extend.svg") no-repeat center center;
}
.header-area .access-time {
  background-color: var(--default-button-bgcolor);
  border-radius: 12px;
  color: #ffffff;
  padding: 0px 8px 0px 8px;
  text-align: center;
}
.header-area .access-time.expire-warning {
  background-color: var(--warning-button-bgcolor);
}
/* 네비게이션 바 드랍다운 메뉴 */
.cl-navigationbar-list {
  border: solid 1px var(--default-border-color);
  padding: 10px 0px;
  border-radius: 10px;
  /* 네비게이션 바 드랍다운 메뉴 아이템 */
}
.cl-navigationbar-list .cl-navigationbar-listitem {
  padding: 5px 20px;
  font-size: 13px;
  /* listitem 아이콘 안보이도록 */
  /* 호버 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - 선택됨 */
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-icon-wrapper {
  display: none !important;
}
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled):not(.cl-selected):hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled).cl-hover {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-selected {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
.left-area {
  background-color: #ffffff;
  /* LeftMenu 영역  */
  /*  // LeftMenu 영역 */
  /*  LeftNotice 영역 */
  /*  // LeftNotice 영역 */
}
.left-area .cl-tabfolder {
  background-color: #eeeeee;
}
.left-area .left-menu {
  /* 메뉴 검색 */
  /* // 메뉴 검색 */
  /* LeftMenu 영역 탭폴더 헤더 */
  /* 탭폴더 바디 */
  /* 트리메뉴  S */
  /* 트리메뉴  E */
  /*  아코디언 메뉴  S */
  /*  아코디언 메뉴  E */
  /* LeftMenu 영역 탭폴더 이전으로 스크롤 버튼 */
  /* LeftMenu 영역 탭폴더 다음으로 스크롤 버튼 */
}
.left-area .left-menu .menu-search {
  margin: 5px 5px 0 5px;
  padding-left: 5px;
}
.left-area .left-menu .cl-tabfolder-header {
  background-color: #ffffff;
  height: 33px;
  /* .탭폴더 첫번째 아이템*/
  /* .탭폴더 두번째 아이템*/
  /* .탭폴더 세번째 아이템*/
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템  */
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(1) {
  background: url("../../images/icon_commenu.png") no-repeat center center;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(2) {
  background: url("../../images/icon_persmenu.png") no-repeat center center;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(3) {
  background: url("../../images/icon_rectmenu.png") no-repeat center center;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(1).cl-selected {
  background: #eeeeee url("../../images/icon_commenu_ov.png") no-repeat center center;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(2).cl-selected {
  background: #eeeeee url("../../images/icon_persmenu_ov.png") no-repeat center center;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(3).cl-selected {
  background: #eeeeee url("../../images/icon_rectmenu_ov.png") no-repeat center center;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item {
  background-color: #ffffff;
  border: 0px;
  height: 33px;
  /* 탭 헤더 아이템 - 호버 */
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #eeeeee;
}
.left-area .left-menu .cl-tabfolder-header .cl-tabfolder-item .cl-checkbox {
  padding: 0;
}
.left-area .left-menu .cl-tabfolder-body {
  background-color: transparent;
  color: var(--default-text-color);
}
.left-area .left-menu .cl-tree {
  padding: 5px;
  /* 트리 아이템 */
}
.left-area .left-menu .cl-tree .cl-tree-item {
  border: none;
  height: 26px;
  /* 트리 아이템 체크박스 아이콘 */
  /* 트리 아이템 아이콘 영역 */
  /* 트리 아이템 텍스트 */
  /* 트리 아이템 - disabled */
  /* 트리 아이템 - selected */
}
.left-area .left-menu .cl-tree .cl-tree-item .cl-tree-checkbox {
  width: 0px;
}
.left-area .left-menu .cl-tree .cl-tree-item .cl-tree-treeicon {
  width: 0px;
}
.left-area .left-menu .cl-tree .cl-tree-item .cl-text {
  float: left;
  font-size: 13px;
  font-weight: 700;
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-folder .cl-tree-itemicon {
  background-image: none;
  width: 0px;
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("../../images/icon_tree_expended.png");
  padding-right: 20px;
  width: 10px;
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../../images/icon_tree_collapse.png");
  padding-right: 20px;
  width: 10px;
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 트리 아이템 - disabled, selected */
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
}
.left-area .left-menu .cl-tree .cl-tree-item.cl-selected {
  color: #ffffff;
  background-color: #636363;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item {
  /* 최하위*/
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf {
  height: 22px;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf .cl-text {
  float: left;
  font-weight: normal;
  font-size: 12px;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf .cl-tree-itemicon {
  background-image: url("../../images/icon_treeitem.png");
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf.cl-folder .cl-tree-itemicon {
  padding-right: 10px;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: none;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-leaf.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: none;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-folder .cl-tree-itemicon {
  width: 0px;
  background-image: none;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("../../images/icon_treefolder_open_blu01.png");
  width: 20px;
}
.left-area .left-menu .cl-tree .sub-items .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../../images/icon_treefolder_close_blu01.png");
  width: 20px;
}
.left-area .left-menu .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled) {
  /* 트리 아이템 - hover */
}
.left-area .left-menu .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.left-area .left-menu .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover {
  color: var(--default-text-color);
  background-color: #d9d9d9;
}
.left-area .left-menu .cl-accordion {
  border: 0px solid var(--default-border-color);
  background-color: transparent;
  font: var(--default-font);
  /** 아코디언의 각 헤더 */
  /*  아코디언 내부 menu.part.less  S */
  /*  아코디언 내부 menu.part.less  E */
}
.left-area .left-menu .cl-accordion .cl-accordion-header {
  padding: 10px 0 10px 10px;
  font-size: 13px;
  font-weight: 500;
  background-color: transparent;
  color: var(--default-text-color);
  border: 0px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-radius: 0px;
  text-decoration: none;
  /** 아코디언 펼침 버튼 */
  /* 아코디언 헤더에 마우스가 호버되었을 떄의 스타일 */
  /* 아코디언 헤더를 클릭했을 때의 스타일 */
}
.left-area .left-menu .cl-accordion .cl-accordion-header .cl-accordion-expander {
  background-image: url("../../images/icon_add.png");
}
.left-area .left-menu .cl-accordion .cl-accordion-header:hover {
  background-color: #d9d9d9;
}
.left-area .left-menu .cl-accordion .cl-accordion-header.cl-activated {
  background-color: #e0e1e2;
  border-color: var(--selection-background);
  color: #333;
  border-bottom: 0px solid #cccccc;
  /* 클릭된 헤더의 펼침 버튼 아이콘 */
}
.left-area .left-menu .cl-accordion .cl-accordion-header.cl-activated .cl-accordion-expander {
  background-image: url("../../images/icon_del.png");
}
.left-area .left-menu .cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) {
  /* 아코디언 컨텐츠 */
}
.left-area .left-menu .cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) .cl-accordion-content {
  border-width: 0px;
  border-color: #cccccc;
  background-color: #ffffff;
}
.left-area .left-menu .cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder).cl-last {
  border-bottom: 0px solid #cccccc;
}
.left-area .left-menu .cl-accordion .cl-accordion-section+.cl-accordion-header {
  /* 아코디언 섹션간의 간격 */
  margin-top: 0px;
}
.left-area .left-menu .cl-accordion .cl-menu {
  font: var(--default-font);
  padding: 5px;
  border: 1px solid #e0e1e2;
  /* 메뉴 리스트 */
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list {
  border: 0px solid var(--default-border-color);
  /* 메뉴 아이템 */
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item {
  color: var(--default-text-color);
  /* 서브 메뉴 */
  /* 메뉴 아이템 - 호버 */
  /* 메뉴 아이템 - disabled */
  /* 메뉴 아이템 - 선택됨 */
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item .cl-sub {
  border: 1px solid var(--default-border-color);
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item.cl-hover {
  background-color: #d9d9d9;
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item.cl-disabled {
  color: var(--disabled-text-color);
  /* 메뉴 아이템 - 선택됨, disabled */
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item.cl-disabled.cl-selected {
  color: var(--disabled-selection-foreground);
  background-color: var(--disabled-selection-background);
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item.cl-selected {
  background-color: #636363;
  color: var(--selection-foreground);
}
.left-area .left-menu .cl-accordion .cl-menu .cl-menu-list .cl-menu-item.cl-selected .cl-menu-icon {
  background: url("../../images/icon_accoitem.png") center center no-repeat;
}
.left-area .left-menu .cl-accordion .cl-menu.cl-focus {
  /* 메뉴 리스트 - 포커스 */
}
.left-area .left-menu .cl-accordion .cl-menu.cl-focus .cl-menu-list {
  border-color: var(--focus-border-color);
}
.left-area .left-menu .cl-accordion .cl-menu.cl-disabled {
  /* 메뉴 아이템 - disabled */
}
.left-area .left-menu .cl-accordion .cl-menu.cl-disabled .cl-menu-item {
  color: var(--disabled-text-color);
  /* 메뉴 아이템 - disabled, 선택됨 */
}
.left-area .left-menu .cl-accordion .cl-menu.cl-disabled .cl-menu-item.cl-selected {
  background-color: var(--disabled-selection-background);
  color: var(--disabled-selection-foreground);
  /* 메뉴 아이템 드릴다운 아이콘 - disabled */
}
.left-area .left-menu .cl-tabfolder-prev {
  border: 0px;
}
.left-area .left-menu .cl-tabfolder-next {
  border: 0px;
}
.left-area .left-notice {
  /* LeftNotice 영역 탭폴더 이전으로 스크롤 버튼 */
  /* LeftNotice 영역 탭폴더 다음으로 스크롤 버튼 */
  /* LeftNotice 영역 탭폴더 헤더 */
  /* 탭폴더 바디 */
}
.left-area .left-notice .cl-tree {
  border: 0px;
  font: var(--default-font);
  color: var(--default-text-color);
}
.left-area .left-notice .cl-tabfolder-prev {
  border: 0px;
}
.left-area .left-notice .cl-tabfolder-next {
  border: 0px;
}
.left-area .left-notice .cl-tabfolder-header {
  background-color: #eeeeee;
  height: 33px;
  /* .탭폴더 첫번째 아이템*/
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템  */
}
.left-area .left-notice .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(1) {
  background: url("../../images/icon_notibox") no-repeat 10px center;
}
.left-area .left-notice .cl-tabfolder-header .cl-tabfolder-item:nth-of-type(1).cl-selected {
  background: #eeeeee url("../../images/icon_notibox_ov.png") no-repeat 10px center;
}
.left-area .left-notice .cl-tabfolder-header .cl-tabfolder-item {
  background-color: #ffffff;
  border: solid 0px var(--default-border-color);
  min-width: 70px;
  height: 33px;
  padding: 6px 10px 6px 35px;
  font-size: 14px;
  font-weight: 700;
  color: var(--default-text-color);
  /* 탭 헤더 아이템 - 호버 */
}
.left-area .left-notice .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #eeeeee;
}
.left-area .left-notice .cl-tabfolder-header .cl-tabfolder-item .cl-checkbox {
  padding: 0;
}
.left-area .left-notice .cl-tabfolder-body {
  background-color: transparent;
  color: var(--default-text-color);
}
.main-contents,
.popup-style {
  /*  main-contents > page-title 영역 */
  /* // main-contents > page-title 영역 */
  /*  main_mdi pageTitle 버튼   */
  /* 버튼 영역 */
  /*  section 버튼 스타일   */
  /*  field 버튼 스타일   */
  /* page-middle-area 영역 */
  /* // page-middle-area 영역 */
  /* main 영역의 타이틀 정의 */
  /* // main 영역의 타이틀 정의 * */
  /* 메인 mdi 영역 정의  ----------------------------  */
  /* 탭폴더 바디 */
  /* grp-검색 */
  /* grp-UDC */
  /* .section영역 tabfolder정의  ----------------------------  */
  /* .section영역 tabfolder정의  ----------------------------  */
  /* // ----------------------------------- 메인 mdi 영역 정의  */
  /*  page-msg 영역 */
  /*  // page-msg 영역 */
  /*  num-area 영역 */
  /*  // num-area 영역   */
  /*  grid-footer-area 영역 */
  /*  // grid-footer-area 영역   */
  /*  grp-freeform 영역 */
  /*  // grp-freeform 영역 */
  /*  grp-progress 영역 */
  /*  grp-progress 영역 */
  /*  list-detail-area 영역 */
  /*  list-detail-area 영역 */
  /* 트리 */
  /* 트리 - disabled */
  /* // 트리  */
  /* 트리셀  - 아이콘 구분 설정 */
  /* 그리드 행 삭제 버튼 */
}
.main-contents input.cl-text,
.popup-style input.cl-text,
.main-contents .cl-preventinput.cl-text,
.popup-style .cl-preventinput.cl-text {
  padding: 0px 5px;
}
.main-contents textarea.cl-text,
.popup-style textarea.cl-text {
  padding: 3px 5px;
}
.main-contents .page-top-area,
.popup-style .page-top-area {
  background: var(--mdi-top-color);
}
.main-contents .page-top-area .top-page-title,
.popup-style .page-top-area .top-page-title {
  padding-left: 30px;
  background: url("../../images/bullet_bodytitle.png") no-repeat 10px 9px;
}
.main-contents .page-top-area .top-page-title span,
.popup-style .page-top-area .top-page-title span {
  font-size: 11px;
  font-weight: 700;
}
.main-contents .page-top-area .top-page-title span .fontblack,
.popup-style .page-top-area .top-page-title span .fontblack {
  color: #000000;
}
.main-contents .page-top-area .top-page-help-btn,
.popup-style .page-top-area .top-page-help-btn {
  cursor: help;
  background: url("../../images/help.png") no-repeat center;
}
.main-contents .page-topbtn-style01,
.popup-style .page-topbtn-style01 {
  height: var(--btn-area-height);
}
.main-contents .page-topbtn-style01 .add-btnline,
.popup-style .page-topbtn-style01 .add-btnline {
  background-color: #999999;
  width: 2px !important;
  height: var(--btn-area-height) !important;
}
.main-contents .page-topbtn-style01 .cl-button,
.popup-style .page-topbtn-style01 .cl-button {
  background-image: none;
  background-color: transparent;
  background-position: 5px center, left top;
  background-repeat: no-repeat;
  border: 0px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  color: var(--mdi-top-btn-font-color);
  border-radius: 0px;
  text-shadow: none;
  padding: 0px 10px;
  min-width: 55px;
  height: var(--btn-area-height) !important;
  font-weight: 700;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .page-topbtn-style01 .cl-button.cl-disabled,
.popup-style .page-topbtn-style01 .cl-button.cl-disabled {
  background-image: none;
  background-color: transparent;
  color: var(--disabled-text-color);
  opacity: 1;
}
.main-contents .page-topbtn-style01 .cl-button:not(.cl-disabled):hover,
.popup-style .page-topbtn-style01 .cl-button:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
.main-contents .page-topbtn-style01 .cl-button:focus,
.popup-style .page-topbtn-style01 .cl-button:focus,
.main-contents .page-topbtn-style01 .cl-button.cl-focus,
.popup-style .page-topbtn-style01 .cl-button.cl-focus {
  border: 0px;
}
.main-contents .page-topbtn-style01 .cl-button:not(.cl-disabled).cl-activated,
.popup-style .page-topbtn-style01 .cl-button:not(.cl-disabled).cl-activated,
.main-contents .page-topbtn-style01 .cl-button:not(.cl-disabled):active,
.popup-style .page-topbtn-style01 .cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
.main-contents .page-topbtn-style01 .close-btn.cl-button,
.popup-style .page-topbtn-style01 .close-btn.cl-button {
  background: url("../../images/btn_close2.png") no-repeat center center;
  background-color: transparent;
  border: 0px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  border-radius: 0px;
  padding: 0px 10px 0 10px;
  min-width: 33px;
}
.main-contents .page-topbtn-style01 .close-btn.cl-button:hover,
.popup-style .page-topbtn-style01 .close-btn.cl-button:hover {
  background: url("../../images/btn_close2_ov.png") no-repeat center center;
  background-color: var(--hover-button-bgcolor);
}
.main-contents .page-topbtn-style01 .refresh-btn.cl-button,
.popup-style .page-topbtn-style01 .refresh-btn.cl-button {
  background: url("../../images/btn_refresh.png") no-repeat center center;
  background-color: transparent;
  border: 0px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  border-radius: 0px;
  padding: 0px 10px 0 10px;
  min-width: 33px;
}
.main-contents .page-topbtn-style01 .refresh-btn.cl-button:hover,
.popup-style .page-topbtn-style01 .refresh-btn.cl-button:hover {
  background: url("../../images/btn_refresh_ov.png") no-repeat center center;
  background-color: var(--hover-button-bgcolor);
}
.main-contents .page-topbtn-style02,
.popup-style .page-topbtn-style02 {
  height: var(--btn-area-height);
  padding-right: 10px;
}
.main-contents .page-topbtn-style02 .cl-layout-wrap,
.popup-style .page-topbtn-style02 .cl-layout-wrap {
  margin-left: 5px !important;
}
.main-contents .page-topbtn-style02 .add-btnline,
.popup-style .page-topbtn-style02 .add-btnline {
  background-color: #999999;
  width: 2px !important;
  height: 15px !important;
  margin: 0 10px;
}
.main-contents .page-topbtn-style02 .cl-button,
.popup-style .page-topbtn-style02 .cl-button {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  background-position: 5px center, left top;
  background-repeat: no-repeat;
  border: 0px solid var(--default-border-color);
  color: #ffffff;
  border-radius: 3px;
  text-shadow: 0px 0px 0px white;
  padding: 5px 10px;
  min-width: 55px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .page-topbtn-style02 .cl-button.cl-disabled,
.popup-style .page-topbtn-style02 .cl-button.cl-disabled {
  background-image: none;
  background-color: var(--disabled-button-bgcolor);
  color: #ffffff;
  opacity: 1;
}
.main-contents .page-topbtn-style02 .cl-button:not(.cl-disabled):hover,
.popup-style .page-topbtn-style02 .cl-button:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
.main-contents .page-topbtn-style02 .cl-button:focus,
.popup-style .page-topbtn-style02 .cl-button:focus,
.main-contents .page-topbtn-style02 .cl-button.cl-focus,
.popup-style .page-topbtn-style02 .cl-button.cl-focus {
  border: 0px;
}
.main-contents .page-topbtn-style02 .cl-button:not(.cl-disabled).cl-activated,
.popup-style .page-topbtn-style02 .cl-button:not(.cl-disabled).cl-activated,
.main-contents .page-topbtn-style02 .cl-button:not(.cl-disabled):active,
.popup-style .page-topbtn-style02 .cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
.main-contents .page-topbtn-style02 .close-btn.cl-button,
.popup-style .page-topbtn-style02 .close-btn.cl-button {
  background: url("../../images/btn_close_s2.png") no-repeat center center;
  background-color: var(--default-button-bgcolor);
  border: 0px solid var(--default-border-color);
  border-radius: 3px;
  padding: 5px 10px;
  min-width: 22px;
  height: 22px !important;
}
.main-contents .page-topbtn-style02 .close-btn.cl-button:hover,
.popup-style .page-topbtn-style02 .close-btn.cl-button:hover {
  background: url("../../images/btn_close_s2.png") no-repeat center center;
  background-color: var(--hover-button-bgcolor);
}
.main-contents .page-topbtn-style02 .refresh-btn.cl-button,
.popup-style .page-topbtn-style02 .refresh-btn.cl-button {
  background: url("../../images/btn_refresh.png") no-repeat center center;
  background-color: var(--default-button-bgcolor);
  border: 0px solid var(--default-border-color);
  border-radius: 3px;
  padding: 5px 10px;
  min-width: 22px;
  height: 22px !important;
}
.main-contents .page-topbtn-style02 .refresh-btn.cl-button:hover,
.popup-style .page-topbtn-style02 .refresh-btn.cl-button:hover {
  background: url("../../images/btn_refresh_ov.png") no-repeat center center;
  background-color: var(--hover-button-bgcolor);
}
.main-contents .grpbtn-area,
.popup-style .grpbtn-area,
.main-contents .popup-grpbtn-area,
.popup-style .popup-grpbtn-area {
  background-color: #ffffff;
  border: var(--grid-border);
  padding: 10px 5px;
}
.main-contents .grpbtn-area .cl-button,
.popup-style .grpbtn-area .cl-button,
.main-contents .popup-grpbtn-area .cl-button,
.popup-style .popup-grpbtn-area .cl-button {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  border: none;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: none;
  padding: 5px 10px;
  min-width: 50px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .grpbtn-area .cl-button.cl-disabled,
.popup-style .grpbtn-area .cl-button.cl-disabled,
.main-contents .popup-grpbtn-area .cl-button.cl-disabled,
.popup-style .popup-grpbtn-area .cl-button.cl-disabled {
  background-image: none;
  background-color: var(--disabled-button-bgcolor2);
  color: var(--disabled-buttontext-color);
  opacity: 100%;
}
.main-contents .grpbtn-area .cl-button.highlight,
.popup-style .grpbtn-area .cl-button.highlight,
.main-contents .popup-grpbtn-area .cl-button.highlight,
.popup-style .popup-grpbtn-area .cl-button.highlight {
  background-color: transparent;
  border: none;
  color: #FFF;
  text-shadow: none;
}
.main-contents .grpbtn-area .cl-button:not(.cl-disabled):hover,
.popup-style .grpbtn-area .cl-button:not(.cl-disabled):hover,
.main-contents .popup-grpbtn-area .cl-button:not(.cl-disabled):hover,
.popup-style .popup-grpbtn-area .cl-button:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
.main-contents .grpbtn-area .cl-button:focus,
.popup-style .grpbtn-area .cl-button:focus,
.main-contents .popup-grpbtn-area .cl-button:focus,
.popup-style .popup-grpbtn-area .cl-button:focus,
.main-contents .grpbtn-area .cl-button.cl-focus,
.popup-style .grpbtn-area .cl-button.cl-focus,
.main-contents .popup-grpbtn-area .cl-button.cl-focus,
.popup-style .popup-grpbtn-area .cl-button.cl-focus {
  border: 0px;
}
.main-contents .grpbtn-area .cl-button:not(.cl-disabled).cl-activated,
.popup-style .grpbtn-area .cl-button:not(.cl-disabled).cl-activated,
.main-contents .popup-grpbtn-area .cl-button:not(.cl-disabled).cl-activated,
.popup-style .popup-grpbtn-area .cl-button:not(.cl-disabled).cl-activated,
.main-contents .grpbtn-area .cl-button:not(.cl-disabled):active,
.popup-style .grpbtn-area .cl-button:not(.cl-disabled):active,
.main-contents .popup-grpbtn-area .cl-button:not(.cl-disabled):active,
.popup-style .popup-grpbtn-area .cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
.main-contents .popup-grpbtn-area .cl-button,
.popup-style .popup-grpbtn-area .cl-button {
  background-color: #96c23f;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
}
.main-contents .popup-grpbtn-area .cl-button:not(.cl-disabled):hover,
.popup-style .popup-grpbtn-area .cl-button:not(.cl-disabled):hover {
  background-color: #7c9d3a;
}
.main-contents .sectionbtn-area,
.popup-style .sectionbtn-area {
  height: var(--btn-area-height);
  padding-right: 0px;
  /*  10px  */
  margin-top: 4px !important;
  /* 상세조회 버튼 */
}
.main-contents .sectionbtn-area .cl-layout-wrap,
.popup-style .sectionbtn-area .cl-layout-wrap {
  margin-left: 5px !important;
}
.main-contents .sectionbtn-area .cl-layout-content,
.popup-style .sectionbtn-area .cl-layout-content {
  text-align: right !important;
}
.main-contents .sectionbtn-area .cl-button,
.popup-style .sectionbtn-area .cl-button {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  border: none;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: 0px 0px 0px white;
  padding: 5px 10px;
  min-width: 50px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .sectionbtn-area .cl-button.cl-disabled,
.popup-style .sectionbtn-area .cl-button.cl-disabled {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  color: #ffffff;
}
.main-contents .sectionbtn-area .cl-button.highlight,
.popup-style .sectionbtn-area .cl-button.highlight {
  background-color: #ff0000;
  border: 1px solid var(--focus-border-color);
  color: #FFF;
  text-shadow: none;
}
.main-contents .sectionbtn-area .cl-button.highlight.cl-disabled,
.popup-style .sectionbtn-area .cl-button.highlight.cl-disabled {
  opacity: 0.5;
}
.main-contents .sectionbtn-area .cl-button:not(.cl-disabled):hover,
.popup-style .sectionbtn-area .cl-button:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
.main-contents .sectionbtn-area .cl-button:focus,
.popup-style .sectionbtn-area .cl-button:focus,
.main-contents .sectionbtn-area .cl-button.cl-focus,
.popup-style .sectionbtn-area .cl-button.cl-focus {
  border: 0px;
}
.main-contents .sectionbtn-area .cl-button:not(.cl-disabled).cl-activated,
.popup-style .sectionbtn-area .cl-button:not(.cl-disabled).cl-activated,
.main-contents .sectionbtn-area .cl-button:not(.cl-disabled):active,
.popup-style .sectionbtn-area .cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
.main-contents .sectionbtn-area .detail.cl-button,
.popup-style .sectionbtn-area .detail.cl-button {
  background: url("../../images/icon_add2_disable.png") no-repeat center center;
  background-color: transparent;
  border: none;
  padding: 5px 10px;
  min-width: 22px;
  height: 22px !important;
}
.main-contents .sectionbtn-area .detail.cl-button:hover,
.popup-style .sectionbtn-area .detail.cl-button:hover {
  background: url("../../images/icon_add2_disable.png") no-repeat center center;
  background-color: transparent;
}
.main-contents .field-btn .cl-layout-wrap,
.popup-style .field-btn .cl-layout-wrap {
  margin-left: 5px !important;
}
.main-contents .field-btn .cl-layout-content,
.popup-style .field-btn .cl-layout-content {
  text-align: right !important;
}
.main-contents .field-btn.cl-button,
.popup-style .field-btn.cl-button {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  border: none;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: 0px 0px 0px white;
  padding: 5px 10px;
  min-width: 50px;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .field-btn.cl-button.cl-disabled,
.popup-style .field-btn.cl-button.cl-disabled {
  background-image: none;
  background-color: var(--default-button-bgcolor);
  color: #ffffff;
}
.main-contents .field-btn.cl-button.highlight,
.popup-style .field-btn.cl-button.highlight {
  background-color: #ff0000;
  border: 1px solid var(--focus-border-color);
  color: #FFF;
  text-shadow: none;
}
.main-contents .field-btn.cl-button.highlight.cl-disabled,
.popup-style .field-btn.cl-button.highlight.cl-disabled {
  opacity: 0.5;
}
.main-contents .field-btn.cl-button:not(.cl-disabled):hover,
.popup-style .field-btn.cl-button:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
  color: #ffffff;
}
.main-contents .field-btn.cl-button:focus,
.popup-style .field-btn.cl-button:focus,
.main-contents .field-btn.cl-button.cl-focus,
.popup-style .field-btn.cl-button.cl-focus {
  border: 0px;
}
.main-contents .field-btn.cl-button:not(.cl-disabled).cl-activated,
.popup-style .field-btn.cl-button:not(.cl-disabled).cl-activated,
.main-contents .field-btn.cl-button:not(.cl-disabled):active,
.popup-style .field-btn.cl-button:not(.cl-disabled):active {
  background-image: linear-gradient(var(--hover-button-bgcolor), var(--hover-button-bgcolor), var(--hover-button-bgcolor));
}
.main-contents .page-middle-area,
.popup-style .page-middle-area {
  margin: 10px 0 10px 10px;
}
.main-contents .page-middle-area .grp-main,
.popup-style .page-middle-area .grp-main {
  margin-right: 10px;
  min-width: 1100px !important;
}
.main-contents .page-middle-area .grp-main.mg-right,
.popup-style .page-middle-area .grp-main.mg-right {
  margin-right: 0px;
}
.main-contents .date-style .grp-search .cl-text,
.popup-style .date-style .grp-search .cl-text {
  padding: 0px;
}
.main-contents .main-title,
.popup-style .main-title {
  background-image: url("../../images/bullet_mTitle.png");
  background-repeat: no-repeat;
  background-position: 3px 6px;
  color: var(--point-text-color);
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  padding-left: 22px;
}
.main-contents .sub-title,
.popup-style .sub-title {
  background: url("../../images/bullet_sTitle.png") no-repeat left bottom;
  background-size: 4px;
  color: var(--point-text-color);
  font-size: 13px;
  font-weight: 700;
  vertical-align: bottom;
  padding: 0 0 4px 10px;
}
.main-contents .sub-title.border-top-dashed,
.popup-style .sub-title.border-top-dashed {
  border-top: 1px dashed #cacaca;
  margin-top: 20px;
  padding-top: 20px;
}
.main-contents .sub-title.cl-first-row,
.popup-style .sub-title.cl-first-row {
  border-top: none;
  margin-top: 0px;
  padding-top: 0px;
}
.main-contents .main-detail-title,
.popup-style .main-detail-title {
  background-image: url("../../images/bullet_dTitle.png");
  background-repeat: no-repeat;
  background-position: 3px 6px;
  color: var(--point-text-color);
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  padding-left: 22px;
}
.main-contents .sub-detail-title,
.popup-style .sub-detail-title {
  background: url("../../images/bullet_sTitle.png") no-repeat left center;
  background-size: 3px 16px;
  color: var(--point-text-color-light);
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 3px 5px;
  text-align: left !important;
}
.main-contents .sub-detail-title2,
.popup-style .sub-detail-title2 {
  background: url("../../images/icon_right2_ov.png") no-repeat left 8px;
  color: var(--point-text-color-light);
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 3px 8px;
  text-align: left !important;
}
.main-contents .main-contents-header,
.popup-style .main-contents-header {
  /* 메인 탭버튼 영역 탭폴더 이전으로 스크롤 버튼 */
  /* 메인 탭버튼 영역 탭폴더 다음으로 스크롤 버튼 */
}
.main-contents .main-contents-header .cl-tabfolder-prev,
.popup-style .main-contents-header .cl-tabfolder-prev {
  border: none;
  background-image: url("../../images/icon_arr01_lt.png");
  background-color: transparent;
  margin-left: -10px;
  /* 이전으로 스크롤 버튼 - disabled */
}
.main-contents .main-contents-header .cl-tabfolder-prev.cl-disabled,
.popup-style .main-contents-header .cl-tabfolder-prev.cl-disabled {
  background-image: url("../../images/icon_arr01_lt_end.png");
}
.main-contents .main-contents-header .cl-tabfolder-prev:not(.cl-disabled):hover,
.popup-style .main-contents-header .cl-tabfolder-prev:not(.cl-disabled):hover {
  background-image: url("../../images/icon_arr01_lt_ov.png");
}
.main-contents .main-contents-header .cl-tabfolder-next,
.popup-style .main-contents-header .cl-tabfolder-next {
  border: 0;
  border-right: 1px solid #bbb;
  background-image: url("../../images/icon_arr01_rt.png");
  background-color: transparent;
  /* 다음으로 스크롤 버튼 - disabled */
}
.main-contents .main-contents-header .cl-tabfolder-next.cl-disabled,
.popup-style .main-contents-header .cl-tabfolder-next.cl-disabled {
  background-image: url("../../images/icon_arr01_rt_end.png");
}
.main-contents .main-contents-header .cl-tabfolder-next:not(.cl-disabled):hover,
.popup-style .main-contents-header .cl-tabfolder-next:not(.cl-disabled):hover {
  background-image: url("../../images/icon_arr01_rt_ov.png");
}
.main-contents .main-contents-header.cl-tabfolder-header,
.popup-style .main-contents-header.cl-tabfolder-header {
  background-color: #aaaaaa;
  height: 31px;
  padding-left: 10px;
  /* 탭 헤더 아이템  */
}
.main-contents .main-contents-header.cl-tabfolder-header .cl-tabfolder-item,
.popup-style .main-contents-header.cl-tabfolder-header .cl-tabfolder-item {
  background-color: #555555;
  border-radius: 3px;
  min-width: 40px;
  text-align: center;
  padding: 3px 5px 3px 5px;
  margin: 5px 5px 3px 0;
  color: #ffffff;
  text-decoration: none;
  /* 탭 헤더 아이템 닫기 버튼 */
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템 - 호버 */
}
.main-contents .main-contents-header.cl-tabfolder-header .cl-tabfolder-item .cl-tabfolder-button,
.popup-style .main-contents-header.cl-tabfolder-header .cl-tabfolder-item .cl-tabfolder-button {
  background: url("../../images/btn_close_s1.png") no-repeat 1px 2px;
}
.main-contents .main-contents-header.cl-tabfolder-header .cl-tabfolder-item.cl-selected,
.popup-style .main-contents-header.cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  background-color: #ffffff;
  color: #333333;
  font-weight: 700;
  /* 탭 헤더 아이템 닫기 버튼 - 선택 됨 */
}
.main-contents .main-contents-header.cl-tabfolder-header .cl-tabfolder-item.cl-selected .cl-tabfolder-button,
.popup-style .main-contents-header.cl-tabfolder-header .cl-tabfolder-item.cl-selected .cl-tabfolder-button {
  background: url("../../images/btn_close_s1_ov.png") no-repeat 1px 2px;
}
.main-contents .main-contents-header.cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover,
.popup-style .main-contents-header.cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #dddddd;
  color: #333333;
  /* 탭 헤더 아이템 닫기 버튼 - 선택 됨 */
}
.main-contents .main-contents-header.cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover .cl-tabfolder-button,
.popup-style .main-contents-header.cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover .cl-tabfolder-button {
  background: url("../../images/btn_close_s1_ov.png") no-repeat 1px 2px;
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat,
.popup-style .main-contents-header .main-tab-area .cl-button.flat {
  background-color: transparent;
  border: 0px;
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close {
  background-image: url("../../images/btn_close_other.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close:not(.cl-disabled):hover,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close:not(.cl-disabled):hover {
  background-image: url("../../images/btn_close_other_ov.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close:not(.cl-disabled).cl-activated,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close:not(.cl-disabled).cl-activated,
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close:not(.cl-disabled):active,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close:not(.cl-disabled):active {
  background-image: url("../../images/btn_close_other_ov.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close.highlight,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close.highlight {
  background-image: url("../../images/btn_close_other.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close.highlight:not(.cl-disabled).cl-activated,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close.highlight:not(.cl-disabled).cl-activated,
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close.highlight:not(.cl-disabled):active,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close.highlight:not(.cl-disabled):active {
  background-image: url("../../images/btn_close_other.png");
  background-color: #E6412D;
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2 {
  background-image: url("../../images/btn_close_all.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2:not(.cl-disabled):hover,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2:not(.cl-disabled):hover {
  background-image: url("../../images/btn_close_all_ov.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2:not(.cl-disabled).cl-activated,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2:not(.cl-disabled).cl-activated,
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2:not(.cl-disabled):active,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2:not(.cl-disabled):active {
  background-image: url("../../images/btn_close_all_ov.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2.highlight,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2.highlight {
  background-image: url("../../images/btn_close_all.png");
}
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2.highlight:not(.cl-disabled).cl-activated,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2.highlight:not(.cl-disabled).cl-activated,
.main-contents .main-contents-header .main-tab-area .cl-button.flat.close2.highlight:not(.cl-disabled):active,
.popup-style .main-contents-header .main-tab-area .cl-button.flat.close2.highlight:not(.cl-disabled):active {
  background-image: url("../../images/btn_close_all.png");
  background-color: #E6412D;
}
.main-contents .cl-tabfolder-body,
.popup-style .cl-tabfolder-body {
  background-color: transparent;
  color: var(--default-text-color);
}
.main-contents .grp-search,
.popup-style .grp-search {
  background-color: var(--grp-search-background-color);
  border: var(--grp-search-border);
  padding: 10px;
}
.main-contents .grp-search .cl-output.ctl-header,
.popup-style .grp-search .cl-output.ctl-header {
  background-color: transparent;
}
.main-contents .grp-search .cl-control.cl-embeddedapp.cl-disabled,
.popup-style .grp-search .cl-control.cl-embeddedapp.cl-disabled {
  background-color: transparent;
}
.main-contents .grp-udc-form-control,
.popup-style .grp-udc-form-control {
  background-color: transparent;
}
.main-contents .grp-udc-form-control .cl-output.ctl-header,
.popup-style .grp-udc-form-control .cl-output.ctl-header {
  background-color: transparent;
}
.main-contents .section-tabfolder.cl-tabfolder,
.popup-style .section-tabfolder.cl-tabfolder {
  /* 헤더 */
  /* 탭폴더 바디 */
  /* eims 에 탭으로 문서열기 시 탭메뉴 정의  */
}
.main-contents .section-tabfolder.cl-tabfolder .top-page-title-in-tab,
.popup-style .section-tabfolder.cl-tabfolder .top-page-title-in-tab {
  padding-left: 30px;
  background: url("../../images/bullet_bodytitle.png") no-repeat 10px 9px;
}
.main-contents .section-tabfolder.cl-tabfolder .cl-tabfolder-header,
.popup-style .section-tabfolder.cl-tabfolder .cl-tabfolder-header {
  /* 네비게이션 바 border 기본값은 1px로 사용안함으로 변경  */
  border: none;
  /* 네비게이션 바 배경 그라데이션 적용 */
  background-image: linear-gradient(var(--section-tabfolder-header-background), var(--section-tabfolder-header-background));
  background-position: 0px 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  margin-bottom: 5px;
  padding-left: 10px;
  /* 탭 헤더 아이템 */
}
.main-contents .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item,
.popup-style .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item {
  margin-right: 3px;
  border-top: var(--grid-border);
  border-right: var(--grid-border);
  border-left: var(--grid-border);
  border-bottom: solid 1px var(--section-tabfolder-header-background);
  background-color: #FFFFFF;
  color: var(--focus-text-color);
  border-radius: 5px 5px 0px 0px;
  padding: 6px 10px;
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템 - 호버 */
}
.main-contents .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected,
.popup-style .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  background-color: var(--section-tabfolder-header-background);
  border: solid 1px var(--section-tabfolder-header-background);
  color: #ffffff;
}
.main-contents .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover,
.popup-style .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #e6eff6;
}
.main-contents .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-checkbox,
.popup-style .section-tabfolder.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-checkbox {
  padding: 0;
}
.main-contents .section-tabfolder.cl-tabfolder .cl-tabfolder-body,
.popup-style .section-tabfolder.cl-tabfolder .cl-tabfolder-body {
  color: var(--default-text-color);
  border: solid 0px var(--default-border-color);
}
.main-contents .section-tabfolder.cl-tabfolder.open-tabfolder,
.popup-style .section-tabfolder.cl-tabfolder.open-tabfolder {
  /* 헤더 */
  /* 탭 헤더 아이템 */
}
.main-contents .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-header.open-tabfolder-header,
.popup-style .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-header.open-tabfolder-header {
  /* 네비게이션 바 배경 그라데이션 적용 */
  background-image: linear-gradient(var(--section-tabfolder-header-background), var(--section-tabfolder-header-background));
  margin-bottom: 0px;
}
.main-contents .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-item.open-tabfolder-item,
.popup-style .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-item.open-tabfolder-item {
  border-bottom: solid 1px var(--section-tabfolder-header-background);
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템 - 호버 */
}
.main-contents .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-item.open-tabfolder-item.cl-selected,
.popup-style .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-item.open-tabfolder-item.cl-selected {
  background-color: var(--section-tabfolder-header-background);
  border: solid 1px var(--section-tabfolder-header-background);
}
.main-contents .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-item.open-tabfolder-item:not(.cl-selected):hover,
.popup-style .section-tabfolder.cl-tabfolder.open-tabfolder .cl-tabfolder-item.open-tabfolder-item:not(.cl-selected):hover {
  background-color: #e6eff6;
}
.main-contents .page-msg,
.popup-style .page-msg {
  background-color: #dddddd;
  padding-left: 10px;
}
.main-contents .num-area,
.popup-style .num-area {
  border: 1px solid #c0c0c0;
  border-top: 0px;
  background-color: #f5f5f5;
  font-size: 10px !important;
  /* 페이지 인덱서 */
  /* // 페이지 인덱서 */
}
.main-contents .num-area .cl-pageindexer,
.popup-style .num-area .cl-pageindexer {
  font: var(--default-font);
  color: var(--default-text-color);
  vertical-align: middle;
  text-align: center;
  border: 0px solid #ff0000;
  /* 페이지 인덱서 버튼 공통 */
  /* 페이지 인덱서 처음으로 버튼 */
  /* 페이지 인덱서 이전 버튼 */
  /* 페이지 인덱서 다음 버튼 */
  /* 페이지 인덱서 마지막으로 버튼 */
  /* 페이지 인덱서 - disabled */
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-index-area,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-index-area,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-first,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-first,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-last,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-last,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-prev,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-prev,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-next,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-next,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-index,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-index,
.main-contents .num-area .cl-pageindexer .cl-text-wrapper,
.popup-style .num-area .cl-pageindexer .cl-text-wrapper {
  min-height: 16px;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-index-area,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-index-area {
  padding: 0 8px;
  border: 0px solid #0000ff;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-first,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-first,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-last,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-last,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-prev,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-prev,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-next,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-next,
.main-contents .num-area .cl-pageindexer .cl-pageindexer-index,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-index {
  width: 15px;
  border: 0px solid #ffff00;
  border-radius: 3px;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-first,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-first {
  background: #cccccc url("../../images/icon_first2.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-prev,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-prev {
  background: #cccccc url("../../images/icon_left2.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-next,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-next {
  background: #cccccc url("../../images/icon_right2.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-last,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-last {
  background: #cccccc url("../../images/icon_last2.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-index,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-index {
  border: 0px solid var(--default-border-color);
  background-color: #ffffff;
  width: 10px !important;
  margin: 0px 2px !important;
  /* 페이지 인덱서 선택된 페이지 */
}
.main-contents .num-area .cl-pageindexer .cl-pageindexer-index.cl-selected,
.popup-style .num-area .cl-pageindexer .cl-pageindexer-index.cl-selected {
  background-color: transparent;
  border: 0px !important;
  color: #0064b1;
}
.main-contents .num-area .cl-pageindexer.cl-disabled,
.popup-style .num-area .cl-pageindexer.cl-disabled {
  color: var(--disabled-text-color);
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled),
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) {
  /* 페이지 인덱서 처음으로 버튼 - 호버, 액티브 */
  /* 페이지 인덱서 이전 버튼 - 호버, 액티브 */
  /* 페이지 인덱서 다음 버튼 - 호버, 액티브 */
  /* 페이지 인덱서 마지막으로 버튼 - 호버, 액티브 */
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected),
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected),
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected),
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected),
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected),
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected),
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected),
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected) {
  /* 페이지 인덱서 버튼 공통 - 호버 */
  /* 페이지 인덱서 버튼 공통 - 액티브 */
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected).cl-hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected).cl-hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected).cl-hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected).cl-hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected).cl-hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected).cl-hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected).cl-hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected).cl-hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):hover {
  background-color: #cccccc;
  color: var(--default-text-color);
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):active,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):active,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):active,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):active {
  background-color: #cccccc;
  color: var(--default-text-color);
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected),
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected) {
  /* 페이지 인덱서 버튼 공통 - 호버 */
  /* 페이지 인덱서 버튼 공통 - 액티브 */
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected).cl-hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected).cl-hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):hover {
  background-color: #ffffff;
  color: var(--default-text-color);
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):active {
  background-color: #ffffff;
  color: var(--default-text-color);
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:active {
  background: #cccccc url("../../images/icon_first2_ov.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:active {
  background: #cccccc url("../../images/icon_left2_ov.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:active {
  background: #cccccc url("../../images/icon_right2_ov.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:hover,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:hover,
.main-contents .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:active,
.popup-style .num-area .cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:active {
  background: #cccccc url("../../images/icon_last2_ov.png") center center no-repeat;
}
.main-contents .num-area .cl-pageindexer.cl-disabled,
.popup-style .num-area .cl-pageindexer.cl-disabled {
  /* 페이지 인덱서 버튼 공통 - disabled */
  /* 페이지 인덱서 버튼 공통 - disabled, selected */
}
.main-contents .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-first,
.popup-style .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-first,
.main-contents .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-last,
.popup-style .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-last,
.main-contents .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-prev,
.popup-style .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-prev,
.main-contents .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-next,
.popup-style .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-next,
.main-contents .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-index,
.popup-style .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-index {
  background-color: #cccccc;
  border-color: transparent;
  border: 0px !important;
  color: var(--disabled-selection-foreground);
}
.main-contents .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-index.cl-selected,
.popup-style .num-area .cl-pageindexer.cl-disabled .cl-pageindexer-index.cl-selected {
  color: var(--disabled-text-color);
  border: 0px !important;
}
.main-contents .grid-footer-area,
.popup-style .grid-footer-area {
  border: 1px solid #c0c0c0;
  border-top: 0px;
  background-color: #f5f5f5;
  padding: 3px;
}
.main-contents .grid-footer-area .cl-output,
.popup-style .grid-footer-area .cl-output {
  text-align: right;
}
.main-contents .grp-freeform,
.popup-style .grp-freeform {
  background-color: var(--grp-background-color);
  border: var(--grp-border);
  padding: 10px;
}
.main-contents .grp-freeform.cl-control.cl-disabled,
.popup-style .grp-freeform.cl-control.cl-disabled {
  background-color: none;
  border: 1px solid var(--disabled-border-color);
}
.main-contents .grp-freeform .cl-output.ctl-header,
.popup-style .grp-freeform .cl-output.ctl-header {
  background-color: transparent;
}
.main-contents .grp-freeform .cl-output.ctl-grpheader,
.popup-style .grp-freeform .cl-output.ctl-grpheader {
  background-color: #b6e0ef;
}
.main-contents .grp-freeform .cl-control.cl-embeddedapp.cl-disabled,
.popup-style .grp-freeform .cl-control.cl-embeddedapp.cl-disabled {
  background-color: transparent;
}
.main-contents .grp-progress,
.popup-style .grp-progress {
  background-color: #ffffff;
  border: 1px solid #e2e2e2;
  padding: 10px;
}
.main-contents .grp-progress .cl-button,
.popup-style .grp-progress .cl-button {
  background-image: none;
  background-color: #FFFFFF;
  border: solid 1px #DDDDDD;
  color: #545454;
  border-radius: 3px;
  text-shadow: none;
  padding: 0px 10px;
  /* disabled 버튼 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .grp-progress .cl-button.cl-disabled,
.popup-style .grp-progress .cl-button.cl-disabled {
  background-image: none;
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  color: #CECECE;
}
.main-contents .grp-progress .cl-button:not(.cl-disabled):hover,
.popup-style .grp-progress .cl-button:not(.cl-disabled):hover {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  color: #333333;
}
.main-contents .grp-progress .cl-button:not(.cl-disabled).cl-activated,
.popup-style .grp-progress .cl-button:not(.cl-disabled).cl-activated,
.main-contents .grp-progress .cl-button:not(.cl-disabled):active,
.popup-style .grp-progress .cl-button:not(.cl-disabled):active {
  background-image: none;
  background-color: #FFFFFF;
  border: solid 1px #333333;
  color: #111111;
  font-weight: bold;
}
.main-contents .grp-progress .selected-button.cl-button,
.popup-style .grp-progress .selected-button.cl-button {
  background-image: none;
  background-color: #0064b1;
  border: none;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: none;
  padding: 0px 10px;
  /* disabled 버튼 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.main-contents .grp-progress .selected-button.cl-button.cl-disabled,
.popup-style .grp-progress .selected-button.cl-button.cl-disabled {
  background-image: none;
  background-color: #cccccc;
  border: none;
  color: #ffffff;
  opacity: 1;
}
.main-contents .grp-progress .selected-button.cl-button:not(.cl-disabled):hover,
.popup-style .grp-progress .selected-button.cl-button:not(.cl-disabled):hover {
  background-color: #478cc2;
  border: none;
  color: #ffffff;
}
.main-contents .grp-progress .selected-button.cl-button:not(.cl-disabled).cl-activated,
.popup-style .grp-progress .selected-button.cl-button:not(.cl-disabled).cl-activated,
.main-contents .grp-progress .selected-button.cl-button:not(.cl-disabled):active,
.popup-style .grp-progress .selected-button.cl-button:not(.cl-disabled):active {
  background-image: none;
  background-color: #478cc2;
  border: none;
  color: #ffffff;
  font-weight: bold;
}
.main-contents .list-detail-area,
.popup-style .list-detail-area {
  border: var(--grp-border);
  background-color: var(--grp-background-color);
  padding: 10px;
  padding-bottom: 10px;
}
.main-contents .list-detail-area .required-area,
.popup-style .list-detail-area .required-area {
  margin: 10px 0;
  height: 45px;
  border-bottom: 1px dashed #cacaca;
}
.main-contents .list-detail-area .required-area .cl-text,
.popup-style .list-detail-area .required-area .cl-text {
  font-weight: 700;
}
.main-contents .list-detail-area .grp-freeform,
.popup-style .list-detail-area .grp-freeform {
  background-color: var(--grpingrp-background-color);
  border: 1px solid var(--grpingrp-border);
  padding: 10px;
}
.main-contents .list-detail-area .sub-detail-cont,
.popup-style .list-detail-area .sub-detail-cont {
  border: 1px solid #cacaca;
  background-color: var(--grpingrp-background-color);
}
.main-contents .list-detail-area.bgcontol,
.popup-style .list-detail-area.bgcontol {
  background-color: transparent;
}
.main-contents .cl-tree,
.popup-style .cl-tree {
  border: var(--grid-border);
  background-color: transparent;
  padding: 5px;
  /* 트리 아이템 */
  /* 트리 - focus */
}
.main-contents .cl-tree .cl-tree-item,
.popup-style .cl-tree .cl-tree-item {
  border: none;
  height: 20px;
  /* 트리 아이템 아이콘 영역 */
  /* 트리 아이템의 펼치고 접혀지는 아이콘 영역*/
  /* 트리 아이템 - selected */
}
.main-contents .cl-tree .cl-tree-item .cl-tree-itemicon,
.popup-style .cl-tree .cl-tree-item .cl-tree-itemicon {
  background-image: url("../../images/icon_treeitem.png");
}
.main-contents .cl-tree .cl-tree-item.cl-folder,
.popup-style .cl-tree .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.main-contents .cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-itemicon,
.popup-style .cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-itemicon {
  background-image: url("../../images/icon_treefolder_open_gry01.png");
}
.main-contents .cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-itemicon,
.popup-style .cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-itemicon {
  background-image: url("../../images/icon_treefolder_close_gry01.png");
}
.main-contents .cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon,
.popup-style .cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("../../images/icon_tree_expended2.png");
}
.main-contents .cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon,
.popup-style .cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../../images/icon_tree_collapse2.png");
}
.main-contents .cl-tree .cl-tree-item.cl-selected,
.popup-style .cl-tree .cl-tree-item.cl-selected {
  background-color: #999999;
  color: var(--selection-foreground);
}
.main-contents .cl-tree .cl-tree-item.cl-selected.cl-folder,
.popup-style .cl-tree .cl-tree-item.cl-selected.cl-folder {
  /* 트리 아이템 폴더 펼쳐짐 아이콘 - selected */
  /* 트리 아이템 폴더 점힘 아이콘 - selected */
}
.main-contents .cl-tree .cl-tree-item.cl-selected.cl-folder.cl-expanded > .cl-tree-treeicon,
.popup-style .cl-tree .cl-tree-item.cl-selected.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("../../images/icon_tree_expended2.png");
}
.main-contents .cl-tree .cl-tree-item.cl-selected.cl-folder.cl-collapsed > .cl-tree-treeicon,
.popup-style .cl-tree .cl-tree-item.cl-selected.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../../images/icon_tree_collapse2.png");
}
.main-contents .cl-tree.cl-focus,
.popup-style .cl-tree.cl-focus {
  border-color: none;
}
.main-contents .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled),
.popup-style .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled) {
  /* 트리 아이템 - hover */
}
.main-contents .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.popup-style .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.main-contents .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover,
.popup-style .cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: #e2e2e2;
  color: #222222;
}
.main-contents .cl-tree.cl-disabled,
.popup-style .cl-tree.cl-disabled {
  color: var(--disabled-text-color);
  border-color: var(--disabled-border-color);
  background-color: var(--disabled-selection-background);
  /* 트리 아이템 - disabled, selected */
}
.main-contents .cl-tree.cl-disabled .cl-tree-item,
.popup-style .cl-tree.cl-disabled .cl-tree-item {
  color: var(--disabled-text-color);
}
.main-contents .cl-tree.cl-disabled .cl-tree-item.cl-selected,
.popup-style .cl-tree.cl-disabled .cl-tree-item.cl-selected {
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
}
.main-contents .cl-treecell,
.popup-style .cl-treecell {
  /* 트리셀 안에 트리 아이템 (트리셀에서 트리구조가 시작되는 영역) */
  /* 트리셀 안에 트리 아이템 (트리셀에서 트리구조가 시작되는 영역) */
}
.main-contents .cl-treecell .cl-treecell-item,
.popup-style .cl-treecell .cl-treecell-item {
  /* 트리 아이템의 아이콘 영역 */
  /* 폴더형 트리 아이템 */
}
.main-contents .cl-treecell .cl-treecell-item .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item .cl-treecell-itemicon {
  background-image: url("images/icon_file.png");
}
.main-contents .cl-treecell .cl-treecell-item.cl-folder,
.popup-style .cl-treecell .cl-treecell-item.cl-folder {
  /* 폴더형 트리 아이템의 아이콘 영역 */
  /* 폴더형 트리 아이템이 펼쳐졌을 때 펼치고 접혀지는 아이콘 영역 */
  /* 폴더형 트리 아이템이 접혀졌을 때 펼치고 접혀지는 아이콘 영역 */
}
.main-contents .cl-treecell .cl-treecell-item.cl-folder .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.cl-folder .cl-treecell-itemicon {
  background-image: url("images/icon_folder.png");
}
.main-contents .cl-treecell .cl-treecell-item.cl-folder.cl-expanded > .cl-treecell-treeicon,
.popup-style .cl-treecell .cl-treecell-item.cl-folder.cl-expanded > .cl-treecell-treeicon {
  background: url("../../images/icon_tree_expended2.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.cl-folder.cl-collapsed > .cl-treecell-treeicon,
.popup-style .cl-treecell .cl-treecell-item.cl-folder.cl-collapsed > .cl-treecell-treeicon {
  background: url("../../images/icon_tree_collapse2.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-folder.grid-cont .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-folder.grid-cont .cl-treecell-itemicon,
.main-contents .cl-treecell .cl-treecell-item.grid-cont .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-cont .cl-treecell-itemicon {
  background: url("../../images/icon_gridcont.png") center center no-repeat !important;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-field .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-field .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_field.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-html .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-html .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_html.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-img .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-img .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_img.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-table .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-table .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_table.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-chart .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-chart .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_chart.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-map .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-map .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_map.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-qr .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-qr .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_qr.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-word .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-word .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_word.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-page .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-page .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_page.png") center center no-repeat;
}
.main-contents .cl-treecell .cl-treecell-item.grid-list-line .cl-treecell-itemicon,
.popup-style .cl-treecell .cl-treecell-item.grid-list-line .cl-treecell-itemicon {
  background: url("../../images/icon_gridlist_line.png") center center no-repeat;
}
.main-contents .cl-grid-cell.grid-row-deletebtn,
.popup-style .cl-grid-cell.grid-row-deletebtn {
  padding: 0px;
}
.main-contents .cl-grid-cell.grid-row-deletebtn .cl-button,
.popup-style .cl-grid-cell.grid-row-deletebtn .cl-button {
  background: url("../../images/btn_close_s1_ov.png") no-repeat center center;
  background-color: transparent;
  border: 0px solid #d7d7d7;
  border-radius: 0px;
  padding: 0px;
  min-width: 20px;
}
.main-contents .cl-grid-cell.grid-row-deletebtn .cl-button:hover,
.popup-style .cl-grid-cell.grid-row-deletebtn .cl-button:hover {
  background: url("../../images/btn_close_s3_ov.png") no-repeat center center;
  background-color: transparent;
}
.right-area {
  border: 0px;
  background-color: #eeeeee;
}
.right-area .right-top {
  background-color: #e0e1e2;
}
.right-area .right-top .cl-output {
  font-weight: 700;
}
.right-area .cl-button.right-button-type-common {
  font-weight: 700;
  background-image: none;
  background-color: var(--default-button-bgcolor);
  border: none;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: none;
  /* disable 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.right-area .cl-button.right-button-type-common.cl-disabled {
  background-color: var(--disabled-button-bgcolor);
  color: var(--disabled-buttontext-color);
}
.right-area .cl-button.right-button-type-common:not(.cl-disabled):hover {
  background-color: var(--hover-button-bgcolor);
}
.right-area .cl-button.right-button-type-common:not(.cl-disabled).cl-activated,
.right-area .cl-button.right-button-type-common:not(.cl-disabled):active {
  background-color: var(--hover-button-bgcolor);
}
.footer-area {
  border: 0px;
  border-top: 1px solid #707070;
  background-color: #dddddd;
  padding-right: 10px;
}
.footer-area .cl-control {
  background-color: transparent;
}
/* ### SITE 별 CSS ### */
/* 오른쪽 영역 */
.right-area .cl-button.right-button-type-common {
  background-color: #ffffff;
  border: solid 1px #656567;
  color: #656567;
  /* selected 스타일 */
  /* disable 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.right-area .cl-button.right-button-type-common.right-button-selected {
  background-color: #0064b1;
  color: #ffffff;
}
.right-area .cl-button.right-button-type-common.cl-disabled {
  background-color: #ffffff;
  color: var(--disabled-buttontext-color);
}
.right-area .cl-button.right-button-type-common:not(.cl-disabled):hover {
  background-color: #0064b1;
  color: #ffffff;
}
.right-area .cl-button.right-button-type-common:not(.cl-disabled).cl-activated,
.right-area .cl-button.right-button-type-common:not(.cl-disabled):active {
  background-color: #0064b1;
}
.right-area .cl-button.right-button-type-asbe {
  font-weight: 700;
  background-image: none;
  background-color: #ffffff;
  border: solid 1px #656567;
  color: #656567;
  border-radius: 3px;
  text-shadow: none;
  /* selected 스타일 */
  /* disable 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.right-area .cl-button.right-button-type-asbe.right-button-selected {
  background-color: #FFCF59;
  color: #ffffff;
}
.right-area .cl-button.right-button-type-asbe.cl-disabled {
  background-color: #ffffff;
  color: var(--disabled-buttontext-color);
}
.right-area .cl-button.right-button-type-asbe:not(.cl-disabled):hover {
  background-color: #FFCF59;
  color: #ffffff;
}
.right-area .cl-button.right-button-type-asbe:not(.cl-disabled).cl-activated,
.right-area .cl-button.right-button-type-asbe:not(.cl-disabled):active {
  background-color: #FFCF59;
}
.right-area .cl-button.right-button-type-qmir {
  font-weight: 700;
  background-image: none;
  background-color: #ffffff;
  border: solid 1px #656567;
  color: #656567;
  border-radius: 3px;
  text-shadow: none;
  /* selected 스타일 */
  /* disable 스타일 */
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.right-area .cl-button.right-button-type-qmir.right-button-selected {
  background-color: #40B15D;
  color: #ffffff;
}
.right-area .cl-button.right-button-type-qmir.cl-disabled {
  background-color: #ffffff;
  color: var(--disabled-buttontext-color);
}
.right-area .cl-button.right-button-type-qmir:not(.cl-disabled):hover {
  background-color: #40B15D;
  color: #ffffff;
}
.right-area .cl-button.right-button-type-qmir:not(.cl-disabled).cl-activated,
.right-area .cl-button.right-button-type-qmir:not(.cl-disabled):active {
  background-color: #40B15D;
}
/**
 * 그리드 border 삭제 클래스
 */
.style-border-none-grid.cl-grid {
  font: var(--default-font);
  color: var(--default-text-color);
  border: none;
  /* cl-readonly일 때 viewing 스타일 적용 안 함 */
  /* 셀 */
  /* 그리드 헤더 */
}
.style-border-none-grid.cl-grid.cl-disabled {
  border: none;
}
.style-border-none-grid.cl-grid.cl-readonly .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo,
.style-border-none-grid.cl-grid.cl-disabled .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo {
  /* viewing 스타일 초기화 */
  font: inherit;
  color: inherit;
  border: none;
  background-color: transparent;
}
.style-border-none-grid.cl-grid.cl-readonly .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div,
.style-border-none-grid.cl-grid.cl-disabled .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div {
  display: table !important;
  grid-template-columns: none;
  grid-template-rows: none;
}
.style-border-none-grid.cl-grid.cl-readonly .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-text,
.style-border-none-grid.cl-grid.cl-disabled .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-text {
  display: table-cell !important;
  grid-area: auto;
  grid-template-columns: none;
  grid-template-rows: none;
  align-items: normal;
  text-align: center;
}
.style-border-none-grid.cl-grid.cl-readonly .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-text > div,
.style-border-none-grid.cl-grid.cl-disabled .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-text > div {
  align-self: auto;
  grid-area: auto;
}
.style-border-none-grid.cl-grid.cl-readonly .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-combobox-button,
.style-border-none-grid.cl-grid.cl-disabled .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-combobox-button,
.style-border-none-grid.cl-grid.cl-readonly .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div::after,
.style-border-none-grid.cl-grid.cl-disabled .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div::after {
  display: none !important;
}
.style-border-none-grid.cl-grid .cl-grid-cell {
  border-right: none;
  border-left: none;
  padding: 0px 5px;
  background-color: none;
}
.style-border-none-grid.cl-grid .cl-grid-row {
  /* 로우 */
  /* 선택된 로우 - 보기 모드 */
  /* 내부 cl-combobox에 cl-focus가 적용되는 경우 */
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-odd-row {
  background-color: transparent;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-even-row {
  background-color: transparent;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-selected {
  background-color: none;
  /* 포커스 셀 */
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-selected :focus,
.style-border-none-grid.cl-grid .cl-grid-row.cl-selected .cl-focus {
  background-color: none;
}
.style-border-none-grid.cl-grid .cl-grid-row:not(.cl-selected):hover {
  background-color: none;
}
.style-border-none-grid.cl-grid .cl-grid-row .cl-combobox.cl-focus {
  border: 2px solid red !important;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo {
  font: var(--default-font);
  color: var(--default-text-color);
  border: 1px solid var(--default-input-border-color);
  background-color: #fff;
  /* 내부 div를 grid로 변경 (table 구조 덮어쓰기) */
  /* 텍스트 영역 */
  /* 콤보 박스 펼침 버튼 */
  /* 버튼이 없을 경우 가상 요소로 버튼 추가 */
  /* 버튼이 있으면 가상 요소 숨기기 */
  /* 포커스 상태 */
  /* 콤보 박스 disabled 상태 */
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-text {
  display: grid !important;
  grid-area: 1/1/span 1/span 1;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center !important;
  height: 100%;
  text-align: left;
  padding-left: 5px;
  /* 텍스트 내부 div 중앙 정렬 */
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-text > div {
  align-self: center !important;
  grid-area: 1/1/span 1/span 1;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo .cl-combobox-button {
  background-image: url("images/arrow_down.png");
  background-size: 7px 5px;
  grid-area: 1/2/span 1/span 1;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div::after {
  content: '';
  background-image: url("images/arrow_down.png");
  background-size: 7px 5px;
  background-repeat: no-repeat;
  background-position: center center;
  grid-area: 1/2/span 1/span 1;
  min-width: 20px;
  cursor: pointer;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo > div:has(.cl-combobox-button)::after {
  display: none;
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo.cl-focus {
  border-color: var(--focus-border-color);
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo.cl-disabled {
  border-color: var(--disabled-input-border-color);
  background-color: var(--disabled-selection-background);
  color: var(--disabled-text-color);
}
.style-border-none-grid.cl-grid .cl-grid-row.cl-viewing .cl-grid-cell .viewing-custom-combo.cl-disabled .cl-combobox-button {
  background-image: url("images/arrow_down_w.png");
}
.style-border-none-grid.cl-grid .cl-grid-header {
  background-image: none;
  background-color: none;
  border-bottom: none;
  /* 그리드 헤더 셀 */
}
.style-border-none-grid.cl-grid .cl-grid-header .cl-grid-cell {
  border-right: none;
  border-left: none;
  /* 그리드 헤더 셀에 임베딩 된 컨트롤 */
}
.style-border-none-grid.cl-grid .cl-grid-header .cl-grid-cell *:hover,
.style-border-none-grid.cl-grid .cl-grid-header .cl-grid-cell *.cl-hovered {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.red-btn {
  background-color: red !important;
}
/* 그리드 Merge */
/* 타입별 그리드 */
.cl-grid {
  /* Merge 용 */
  /* BOTH LINE HIDE FIRST */
  /* BOTH LINE HIDE LAST */
}
.cl-grid.grid-type-merged-custom .cl-grid-detail {
  /* 로우 */
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row {
  background-color: transparent;
  /* 로우 font weight */
  /* 로우 사용자 배경색 */
  /* 선택된 로우 - 보기 모드 */
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-font-weight-bold {
  font-weight: bold;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-bg-color00 {
  background-color: transparent;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-bg-color01 {
  background-color: rgba(var(--grid-row-background-merged-color01-rgb), 0.5);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-bg-color02 {
  background-color: rgba(var(--grid-row-background-merged-color02-rgb), 0.5);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-bg-color03 {
  background-color: rgba(var(--grid-row-background-merged-color03-rgb), 0.5);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-bg-color04 {
  background-color: rgba(var(--grid-row-background-merged-color04-rgb), 0.5);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.row-bg-color05 {
  background-color: rgba(var(--grid-row-background-merged-color05-rgb), 0.5);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.cl-selected {
  background-color: rgba(var(--grid-row-selected-background-merged-color-rgb), 0.5);
  color: var(--grid-row-selected-color);
  /* 포커스 셀 */
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.cl-selected :focus,
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row.cl-selected .cl-focus {
  /*background-color: rgba(var(--grid-row-hover-background-merged-color-rgb), 0.5);*/
  background-color: transparent;
  color: var(--grid-row-hover-color);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected):hover {
  /*background-color: rgba(var(--grid-row-hover-background-merged-color-rgb), 0.5);*/
  background-color: transparent;
  color: var(--grid-row-hover-color);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected) {
  /* 로우 color */
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color01);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color01 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color02);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color02 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color03);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color03 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color04);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color04 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no) {
  color: var(--grid-row-color05);
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no):empty {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row:not(.cl-selected).row-color05 .cl-grid-cell:not(.grid-no).cl-merged {
  color: inherit;
}
.cl-grid.grid-type-merged-custom .cl-grid-detail .cl-grid-row .cl-grid-cell.cl-selected {
  background-color: transparent;
  color: #222222;
}
.cl-grid.grid-type-both-line-hide-first {
  border-right: none;
  border-left: none;
}
.cl-grid.grid-type-both-line-hide-first .cl-grid-cell:first-child {
  border-left: none;
}
.cl-grid.grid-type-both-line-hide-last {
  border-right: none;
  border-left: none;
}
.cl-grid.grid-type-both-line-hide-last .cl-grid-cell:last-child {
  border-right: none;
}
/* TextArea ReadOnly일 경우 배경색 White로 설정 */
.white-textarea.cl-readonly {
  background-color: #ffffff;
}
/* Toggle 버튼으로 사용할 버튼 */
.custom-toggle-btn {
  background-color: blue;
}
/* 체크박스 그룹 강조 */
.cl-checkboxgroup .cl-checkbox.chk-group-highlight .cl-text {
  font-weight: bold;
}
.cl-checkboxgroup .cl-checkbox.chk-group-highlight.cl-disabled .cl-text {
  font-weight: normal !important;
  color: grey;
}
/* 체크박스 그룹 취소선 설정 클래스 */
.cl-checkboxgroup .cl-checkbox.cancel .cl-text {
  color: red;
  text-decoration: line-through !important;
}
* {
  touch-action: manipulation;
}