@charset "UTF-8";
/* 모든 컨트롤에 적용될 기본 폰트 */
/* 기본 텍스트 색상 */
/* disable 상태를 나타내는 텍스트 색상 */
/* 기본 보더 색상 */
/* 포커스 보더 색상 */
/* Disable 상태의 보더 색상. */
/* 내부에 아이템을 같는 컨트롤의 경우, 각 아이템에 마우스 호버시의 텍스트 색상 */
/* 내부에 아이템을 같는 컨트롤의 경우, 각 아이템에 마우스 호버시의 배경 색상 */
/* 내부에 아이템을 같는 컨트롤의 경우, 각 아이템에 선택된 경우 텍스트 색상 */
/* 내부에 아이템을 같는 컨트롤의 경우, 각 아이템이 선택된 경우 배경 색상 */
/* * 내부에 아이템을 같는 컨트롤이 Disabled된 경우, 각 아이템에 선택된 경우 텍스트 색상 */
/* 내부에 아이템을 같는 컨트롤의 Disabled된 경우, 각 아이템이 선택된 경우 배경 색상 */
/* 버튼 배경 색상 */
/* 커밋 버튼 배경 색상 */
/* 그리드(Grid) 관련 색상 */
/* 그리드 헤더 필수입력 컬럼 폰트 색상 */
/* 그리드 헤더 입력 컬럼 폰트 색상 */
/* 그리드 헤더 Readonly 컬럼 폰트 색상 */
/* 그리드 디테일 행 선택 배경 색상 */
/* 그리드 편집모드 행 선택 배경 색상 */
/* 그리드 행추가 배경 색상 */
/* 그리드 행수정 배경 색상 */
/* 그리드 삭제행 배경 색상 */
/* tab border 색상 */
/* input border 색상 */
/* 모든 UIControl 공통 스타일 */
.cl-control {
  font: 10pt Gulim;
  color: #000000;
}
/* 넘버 에디터  */
.cl-numbereditor {
  font: 10pt Gulim;
  border: 1px solid #D5D5D5;
  color: #000000;
  background-image: none;
  /* 넘버 에디터 disabled 상태  */
}
.cl-numbereditor .cl-text {
  padding-left: 3px;
  padding-right: 3px;
}
.cl-numbereditor .cl-numbereditor-buttons {
  width: 15px;
  border-left: none;
  padding-left: 2px;
  /* 넘버 에디터 스핀 업 버튼 */
  /* 넘버 에디터 스핀 다운 버튼 */
}
.cl-numbereditor .cl-numbereditor-buttons .cl-numbereditor-increase {
  background-image: url("controls/images/button/btn_spin_up.png");
  background-size: auto;
}
.cl-numbereditor .cl-numbereditor-buttons .cl-numbereditor-decrease {
  background-image: url("controls/images/button/btn_spin_down.png");
  background-size: auto;
}
.cl-numbereditor:not(.cl-disabled) {
  /* 넘버 에디터 스핀 업 버튼 호버 */
  /* 넘버 에디터 스핀 업 버튼 액티브  */
  /* 넘버 에디터 스핀 다운 버튼 호버 */
  /* 넘버 에디터 스핀 다운 버튼 액티브 */
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:hover {
  background-image: url("controls/images/button/btn_spin_up.png");
  background-color: transparent;
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:active {
  background-image: url("controls/images/button/btn_spin_up.png");
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:hover {
  background-image: url("controls/images/button/btn_spin_down.png");
  background-color: transparent;
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:active {
  background-image: url("controls/images/button/btn_spin_down.png");
}
.cl-numbereditor.cl-readonly {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-numbereditor.cl-readonly .cl-numbereditor-buttons {
  width: 0px;
}
.cl-numbereditor.cl-disabled {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-numbereditor.cl-disabled .cl-numbereditor-buttons {
  width: 0px;
}
/* 넘버 에디터 focus 상태 */
.cl-numbereditor.cl-focus {
  border-color: #62a8ea;
  /* 넘버 에디터 focus 상태 스핀 버튼 영역*/
}
.cl-numbereditor.cl-focus .cl-numbereditor-buttons {
  border-left: none;
}
/* 데이트 인풋 */
.cl-dateinput {
  font: 10pt Gulim;
  color: #000000;
  border: 1px solid #D5D5D5;
  text-align: left;
  /* 데이트 인풋 텍스트 */
  /* 데이트 인풋 버튼 */
}
.cl-dateinput .cl-dateinput-button {
  width: 24px;
  background-image: url("images/icon/ico_calendar.png");
}
.cl-dateinput.cl-readonly {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-dateinput.cl-readonly .cl-dateinput-button {
  width: 0px;
}
.cl-dateinput.cl-disabled {
  /* 데이트 인풋 disabled 상태 버튼 */
}
.cl-dateinput.cl-disabled .cl-dateinput-button {
  width: 0px;
  background-image: url("images/icon/ico_calendar.png");
}
/* 데이트 인풋 disabled 상태 */
.cl-dateinput.cl-disabled {
  color: #666;
  background-color: rgba(230, 230, 230, 0.4);
  border-color: #D5D5D5;
  /* 데이트 인풋 disabled 상태 텍스트*/
}
.cl-dateinput.cl-disabled input[disabled] {
  color: #000000;
}
/* 데이트 인풋 포커스 상태 */
.cl-dateinput.cl-focus {
  border: #62a8ea solid 1px;
}
/* 캘린더 */
.cl-calendar {
  font: 10pt Gulim;
  color: #000000;
  border: 1px solid #383838;
  border-radius: 0;
  background-color: #fff;
  padding: 3px 3px 3px;
  /* 데이트인풋 등에 팝업으로 나타날때 스타일 */
  /* 캘린더 컨텐츠의 일, 월, 년 스타일*/
  /* 캘린더 컨텐츠 스타일*/
  /* 캘린더 푸터 */
  /* 캘린더 포커스 상태 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-before:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-before.cl-hover {
  /* 캘린더 이전 년도 버튼 호버 상태 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-after:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-after.cl-hover {
  /* 캘린더 이후 년도 버튼 호버 상태 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev.cl-hover {
  /* 캘린더 이전 달 버튼 호버 상태 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next.cl-hover {
  /* 캘린더 다음 달 버튼 호버 상태 */
}
.cl-calendar .cl-calendar-header {
  /* 캘린더 헤더 */
}
.cl-calendar .cl-calendar-header .cl-calendar-header-before {
  /* 캘린더 이전 년도 버튼 */
  background-image: url("images/icon/ico-arrow5.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-after {
  /* 캘린더 이후 년도 버튼 */
  background-image: url("images/icon/ico-arrow8.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-prev {
  /* 캘린더 이전 달 버튼 */
  background-image: url("images/icon/ico-arrow6.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-next {
  /* 캘린더 다음 달 버튼 */
  background-image: url("images/icon/ico-arrow7.png");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text:not(.cl-disabled):hover,
.cl-calendar .cl-calendar-header .cl-calendar-header-text:not(.cl-disabled).cl-hover {
  color: #000000;
  cursor: pointer;
}
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-before:hover,
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-before.cl-hover {
  /* 캘린더 이전 년도 버튼 호버 상태 */
  background-image: url("images/icon/ico-arrow5.png");
}
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-after:hover,
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-after.cl-hover {
  /* 캘린더 이후 년도 버튼 호버 상태 */
  background-image: url("images/icon/ico-arrow8.png");
}
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-prev:hover,
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-prev.cl-hover {
  /* 캘린더 이전 달 버튼 호버 상태 */
  background-image: url("images/icon/ico-arrow6.png");
}
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-next:hover,
.cl-calendar .cl-calendar-header:not(.cl-disabled) .cl-calendar-header-next.cl-hover {
  /* 캘린더 다음 달 버튼 호버 상태 */
  background-image: url("images/icon/ico-arrow7.png");
}
.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: #F2F2F2;
  color: #000000;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected {
  /* 선택된 날짜 셀 */
}
.cl-calendar .cl-calendar-content {
  /*날짜 달력의 헤더 스타일*/
  /* 날짜 선택 모드시 날짜 스타일 */
}
.cl-calendar .cl-calendar-content .cl-calendar-content-week {
  /* week of year의 스타일 */
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sun {
  /* 일요일 셀 */
  color: #e56c45;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sat {
  /* 토요일 셀 */
  color: #5687d4;
}
.cl-calendar .cl-calendar-content .cl-other-month {
  /* 이전 달 또는 다음 달의 날짜 */
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day,
.cl-calendar .cl-calendar-content .cl-calendar-content-month,
.cl-calendar .cl-calendar-content .cl-calendar-content-year {
  /* 기본 날짜 - 오늘 날짜 셀*/
}
.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 {
  background-color: #fff;
  border-bottom: 1px solid #1c66b1;
  border-radius: 0;
  color: #1c66b1;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day:not(.cl-disabled):hover,
.cl-calendar .cl-calendar-content .cl-calendar-content-month:not(.cl-disabled):hover,
.cl-calendar .cl-calendar-content .cl-calendar-content-year:not(.cl-disabled):hover,
.cl-calendar .cl-calendar-content .cl-calendar-content-day:not(.cl-calendar-current):hover,
.cl-calendar .cl-calendar-content .cl-calendar-content-month:not(.cl-calendar-current):hover,
.cl-calendar .cl-calendar-content .cl-calendar-content-year:not(.cl-calendar-current):hover {
  /* 셀 호버 스타일 */
  background-color: #F2F2F2;
  color: #000000;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-footer-text:hover {
  /* 캘린더 푸터 날짜 호버 스타일 */
}
.cl-calendar.cl-focus {
  border-color: #62a8ea;
}
/* 캘린더 disabled 상태 */
/* 리스트 박스 */
.cl-listbox {
  font: 10pt Gulim;
  background-color: #fff;
  border: 1px solid #D5D5D5;
  color: #000000;
  /* 리스트 박스 내 아이템 목록 박스 */
}
.cl-listbox .cl-listbox-list {
  /* 아이템 목록 박스 내 각 아이템 */
}
.cl-listbox .cl-listbox-list .cl-listbox-item {
  /* 선탹된 아이템 */
  /* 아이템 텍스트 */
}
.cl-listbox .cl-listbox-list .cl-listbox-item.cl-selected {
  color: #000000;
  background-color: #F7F7F7;
}
.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: #666;
  background-color: #F7F7F7;
}
/* disabled 상태 */
.cl-listbox.cl-disabled {
  color: #666;
  /* disabled 상태에서 선택된 아이템들 */
}
.cl-listbox.cl-disabled .cl-listbox-item.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
/* 포커스 상태 */
.cl-listbox.cl-focus {
  border: 1px solid #62a8ea;
}
/* 링크드 리스트 박스 루트 */
.cl-linkedlistbox {
  font: 10pt Gulim;
  color: #000000;
  /* 리스트 박스 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox {
  /* 리스트 박스 헤더 */
  /* 리스트 박스 리스트 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-header {
  border: 1px solid #D5D5D5;
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list {
  border: 1px solid #D5D5D5;
  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: #666;
  /* 리스트 박스 리스트 아이템 - 선택됨, disabled 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-disabled.cl-selected {
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-linkedlistbox.cl-focus {
  /* 리스트 박스 헤더 - 포커스 상태 */
  /* 리스트 박스 리스트 - 포커스 상태 */
}
.cl-linkedlistbox.cl-focus .cl-linkedlistbox-header {
  border-color: #62a8ea;
}
.cl-linkedlistbox.cl-focus .cl-linkedlistbox-list {
  border-color: #62a8ea;
}
.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: #666;
  background-color: #F7F7F7;
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled).cl-selected {
  color: #000000;
  background-color: #F7F7F7;
  /* 선택된 아이템 드릴 다운 아이콘 */
}
.cl-menu {
  font: 10pt Gulim;
  /* 메뉴 리스트 */
}
.cl-menu .cl-menu-list {
  border: 1px solid #D5D5D5;
  /* 메뉴 아이템 */
}
.cl-menu .cl-menu-list .cl-menu-item {
  color: #000000;
  /* 메뉴 아이템 아이콘 */
  /* 메뉴 아이템 텍스트 */
  /* 메뉴 아이템 단축키 */
  /* 서브 메뉴 */
  /* 메뉴 아이템 - 호버 */
  /* 메뉴 아이템 - 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 #D5D5D5;
}
.cl-menu .cl-menu-list .cl-menu-item.cl-hover {
  background-color: #F7F7F7;
  color: #666;
}
.cl-menu .cl-menu-list .cl-menu-item.cl-disabled {
  color: #666;
  /* 메뉴 아이템 - 선택됨, disabled */
}
.cl-menu .cl-menu-list .cl-menu-item.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-menu .cl-menu-list .cl-menu-item.cl-selected {
  background-color: #F7F7F7;
  color: #000000;
  /* 메뉴 아이템 드릴다운 아이콘 - 선택됨 */
}
.cl-menu.cl-focus {
  /* 메뉴 리스트 - 포커스 */
}
.cl-menu.cl-focus .cl-menu-list {
  border-color: #62a8ea;
}
.cl-menu.cl-disabled {
  /* 메뉴 아이템 - disabled */
}
.cl-menu.cl-disabled .cl-menu-item {
  color: #666;
  /* 메뉴 아이템 - disabled, 선택됨 */
}
.cl-menu.cl-disabled .cl-menu-item.cl-selected {
  background-color: rgba(230, 230, 230, 0.4);
  color: #777;
  /* 메뉴 아이템 드릴다운 아이콘 - disabled */
}
/* 파일 업로드 루트 */
.cl-fileupload {
  font: 10pt Gulim;
  color: #000000;
  border: 1px solid #D5D5D5;
  background-color: #fff;
  /* 파일 업로드 내 텍스트 */
  /* 파일 업로드 디테일 영역 */
  /* 푸터 */
  /* 파일 업로드 체크 박스 */
}
.cl-fileupload .cl-fileupload-header {
  /* 헤더 */
  /* 헤더내 체크 박스 */
  /* 파일명 헤더 컬럼 */
  /* 파일 크기 헤더 컬럼 */
}
.cl-fileupload .cl-fileupload-detail {
  /* 각 파일 행 */
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file {
  /* 체크 박스 컬럼 */
  /* 파일 아이콘 */
  /* 피일 이름 */
  /* 파일 크기 */
}
.cl-fileupload .cl-fileupload-footer {
  /* 푸터 텍스트 */
  /* 푸터 내 버튼 영역 */
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons {
  /* 푸터 내 버튼 */
}
.cl-fileupload .cl-fileupload-checkbox {
  /* 선택된 파일 업로드 체크 박스 */
}
.cl-fileupload:not(.cl-disabled) {
  /* 파일 - 호버 상태 */
  /* 파일 업로드 버튼 - 호버 상태 */
}
/* 버튼 */
.cl-button {
  font: 10pt Gulim;
  color: #2263b3;
  background-image: none;
  background-color: #e7eef7;
  border-radius: 4px;
  border: solid 1px #a7c1e1;
  text-shadow: none !important;
  cursor: pointer;
  /* 버튼위에 마우스를 올렸을 때의 스타일 */
  /* 버튼이 포커스를 가졌을 때의 스타일 */
  /* 버튼을 클릭했을 때의 스타일 */
}
.cl-button:not(.cl-disabled):hover {
  font-weight: bold;
}
.cl-button:focus,
.cl-button.cl-focus {
  border: solid 1px #62a8ea;
}
.cl-button:not(.cl-disabled).cl-activated,
.cl-button:not(.cl-disabled):active {
  background-image: none;
  opacity: 0.3;
}
/* Disable 상태의 버튼 */
.cl-button.cl-disabled {
  color: #666;
  background-image: linear-gradient(#ededed, #e7e7e7);
}
/* 아코디언 */
.cl-accordion {
  border: 1px solid #D5D5D5;
  background-color: #fff;
  color: #000000;
  font: 10pt Gulim;
  /** 아코디언의 각 헤더 */
}
.cl-accordion .cl-accordion-header {
  background-color: #ebebeb;
  color: #000000;
  border: solid 1px #B7B8BA;
  line-height: 22px !important;
  /** 아코디언 펼침 버튼 */
  /* 아코디언 헤더에 마우스가 호버되었을 떄의 스타일 */
  /* 아코디언 헤더를 클릭했을 때의 스타일 */
}
.cl-accordion .cl-accordion-header:hover {
  background-color: #f7f7f7;
}
.cl-accordion .cl-accordion-header.cl-activated {
  background-color: #62a8ea;
  border-color: #62a8ea;
  color: #ffffff;
  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 #F7F7F7;
}
.cl-accordion .cl-accordion-section+.cl-accordion-header {
  /* 아코디언 섹션간의 간격 */
  margin-top: 4px;
}
/* Disabled 상태의 아코디언 */
.cl-accordion.cl-disabled {
  /* 선택된 헤더 */
}
.cl-accordion.cl-disabled .cl-accordion-header.cl-activated {
  background-color: rgba(230, 230, 230, 0.4);
  border-color: rgba(230, 230, 230, 0.4);
  color: #777;
}
.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: rgba(230, 230, 230, 0.4);
}
/* 인풋 박스 루트 */
.cl-inputbox {
  font: 10pt Gulim;
  color: #000000;
  border: 1px solid #D5D5D5;
  background-color: #fff;
  background-image: none;
  /* 인풋 박스 텍스트 */
  /* 인풋 박스 - 포커스 상태 */
  /* 인풋 박스 - disabled 상태 */
}
.cl-inputbox .cl-text {
  padding-left: 3px;
  padding-right: 3px;
}
.cl-inputbox.cl-focus {
  border-color: #62a8ea;
}
.cl-inputbox.cl-readonly {
  border-color: #D5D5D5;
  background-image: none;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-inputbox.cl-disabled {
  border-color: #D5D5D5;
  background-image: none;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
/* 슬라이더 */
.cl-slider {
  font: 10pt Gulim;
  /* 슬라이더 바 */
}
.cl-slider .cl-slider-bar {
  background-color: #fff;
  border: 1px solid #D5D5D5;
  /* 슬라이더 가로 바 */
  /* 슬라이더 세로 바*/
  /* 슬라이더 핸들 */
  /* 슬라이더 선택 영역 표시 바 */
}
.cl-slider .cl-slider-bar.cl-horizontal {
  background-image: linear-gradient(#ddd, white 3px);
}
.cl-slider .cl-slider-bar.cl-vertical {
  background-image: linear-gradient(to right, #ddd, white 3px);
}
.cl-slider .cl-slider-bar .cl-slider-handle {
  /* 슬라이더 가로바 핸들 */
  /* 슬라이더 세로바 핸들 */
}
.cl-slider .cl-slider-bar .cl-slider-range {
  background-color: #ffffff;
}
.cl-slider.cl-focus {
  /* 슬라이더 바 - focus */
}
.cl-slider.cl-focus .cl-slider-bar {
  border-color: #62a8ea;
}
.cl-slider.cl-disabled {
  /* 슬라이더 바 핸들 - disabled */
  /* 슬라이더 바 선택 영역 - disabled */
}
.cl-slider.cl-disabled .cl-slider-range {
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle {
  /* 슬라이더 바 핸들 - hover */
}
/* 아웃풋 */
.cl-output {
  font: 10pt Gulim;
  color: #000000;
}
.cl-output.cl-disabled {
  color: #666;
}
.cl-output.require {
  background-image: url("controls/images/icon/ico_star.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 8px;
}
/* 텍스트 에리어 */
.cl-textarea {
  font: 10pt Gulim;
  border: 1px solid #D5D5D5;
  color: #000000;
  /* 텍스트 에리어 텍스트 */
  /* 텍스트 에리어 - disabled */
  /* 텍스트 에리어 - focus*/
}
.cl-textarea .cl-text {
  padding-top: 3px;
  padding-left: 3px;
  padding-right: 3px;
}
.cl-textarea.cl-readonly {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  background-image: none;
  color: #666;
}
.cl-textarea.cl-disabled {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-textarea.cl-focus {
  border-color: #62a8ea;
}
/* 라디오 버튼 */
.cl-radiobutton {
  font: 10pt Gulim;
  color: #000000;
  /* 라디오 버튼 아이템 */
  /* 라디오 버튼 - disabled */
}
.cl-radiobutton .cl-radiobutton-item {
  padding: 0px;
  /* 라디오 버튼 아이템 텍스트 */
}
.cl-radiobutton .cl-radiobutton-item.cl-selected {
  /* 라디오 버튼 아이템 아이콘 - 선택됨 */
}
.cl-radiobutton.cl-focus .cl-radiobutton-item.cl-selected {
  /* 라디오 버튼 아이템 아이콘 - focus */
}
.cl-radiobutton.cl-disabled .cl-text {
  color: #666;
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected {
  /* 라디오 버튼 아이템 아이콘 - disabled, selected */
}
.cl-radiobutton:not(.cl-disabled) .cl-radiobutton-item:not(.cl-selected):not(.cl-disabled) {
  /* 라디오 버튼 아이템 아이콘 - hover */
}
/* 체크 박스 스타일 */
.cl-checkbox {
  /* 체크 박스 아이콘 - 기본 상태 */
  /* 체크 박스 텍스트 */
  /* 체크 박스 disabled 상태 */
}
.cl-checkbox.cl-checked {
  /* 체크 박스 아이콘 - 선택된 상태 */
}
.cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("images/icon/ico_chk_selected.png");
}
.cl-checkbox.cl-partialchecked {
  /* 체크 박스 아이콘 - 일부 선택 상태 (grid header에서 사용) */
}
.cl-checkbox.cl-disabled.cl-checked {
  /* 체크 박스 disabled 상태에서 선택된 체크박스 아이콘 */
}
.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).cl-checked {
  /* 체크 박스 아이콘 - 선택된 상태 */
}
.cl-checkbox:not(.cl-disabled).cl-checked .cl-checkbox-icon {
  background-image: url("images/icon/ico_chk_selected.png");
}
/* 체크박스 그룹 */
.cl-checkboxgroup {
  font: 10pt Gulim;
  color: #000000;
  /* 그룹 내 체크 박스 */
  /* disabled 상태 */
}
.cl-checkboxgroup .cl-checkbox.cl-checked {
  /* 체크 박스 아이콘 - 선택된 상태 */
}
.cl-checkboxgroup .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("images/icon/ico_chk_selected.png");
}
.cl-checkboxgroup.cl-disabled {
  color: #666;
}
.cl-checkboxgroup.cl-disabled .cl-checkbox {
  /* disabled 상태에서 선택된 체크 박스 아이템 텍스트 */
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-text {
  color: #666;
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-checked {
  /* disabled 상태에서 선택된 체크 박스 아이콘 */
}
.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-checkboxgroup:not(.cl-disabled) .cl-checkbox.cl-checked {
  /* 체크 박스 아이콘 - 선택된 상태 */
}
.cl-checkboxgroup:not(.cl-disabled) .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("images/icon/ico_chk_selected.png");
}
/* 마스크 에디터 루트 */
.cl-maskeditor {
  font: 10pt Gulim;
  border: 1px solid #D5D5D5;
  background-color: #fff;
  color: #000000;
  background-image: none;
  /* 마스크 에디터 텍스트 */
  /* 마스크 에디터 - 포커스 */
  /* 마스크 에디터 - disabled */
}
.cl-maskeditor.cl-focus {
  border-color: #62a8ea;
}
.cl-maskeditor.cl-readonly {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-maskeditor.cl-disabled {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
/* 콤보 박스 루트 */
.cl-combobox {
  font: 10pt Gulim;
  color: #000000;
  border: 1px solid #D5D5D5;
  background-color: #fff;
  /*선택된 아이템의 아이콘*/
  /* 콤보 박스 펼침 버튼 */
  /* 포커스 상태 */
  /* 콤보 박스 disabled 상태 */
}
.cl-combobox .cl-icon {
  display: none;
}
.cl-combobox .cl-text {
  padding-top: 2px;
}
.cl-combobox .cl-combobox-button {
  width: 18px;
  background-image: url("images/icon/ico-arrow4.png");
  background-position: center center;
  background-size: auto;
}
.cl-combobox.cl-focus {
  border-color: #62a8ea;
}
.cl-combobox.cl-readonly {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-combobox.cl-readonly .cl-combobox-button {
  width: 0px;
}
.cl-combobox.cl-disabled {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #666;
}
.cl-combobox.cl-disabled .cl-combobox-button {
  width: 0px;
}
/* 콤보 박스 리스트 박스 */
.cl-combobox-list {
  z-index: 999;
  font: 10pt Gulim;
  border: 1px solid #62a8ea;
  color: #000000;
  /*리스트박스의 쉐도우*/
  /* 리스박스의 최대 높이*/
  /* 콤보 박스 리스트 아이템 */
}
.cl-combobox-list .cl-viewport {
  max-height: 500px;
}
.cl-combobox-list .cl-combobox-item {
  padding-left: 0px;
  /* 콤보 박스 리스트 아이템 체크박스 */
  /* 콤보 박스 리스트 아이템 텍스트 */
  /* 콤보 박스 리스트 아이템 - 선택 됨 */
  /* disabled 상태 콤보 박스 리스트 아이템 */
}
.cl-combobox-list .cl-combobox-item.cl-selected {
  background-color: #D8EAFA;
  color: #000000;
}
.cl-combobox-list .cl-combobox-item.cl-disabled {
  /* color: @disabled-text-color;*/
  color: #666;
  /* disabled 상태에서 선택된 콤보 박스 리스트 아이템 */
}
.cl-combobox-list .cl-combobox-item.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.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: #666;
  background-color: #F7F7F7;
}
/* 링크드 콤보 박스 루트 */
.cl-linkedcombobox {
  font: 10pt Gulim;
  color: #000000;
  /* 콤보 박스 */
  /* 콤보 박스 - 포커스 상태 */
  /* 콤보 박스 - disabled 상태 */
}
.cl-linkedcombobox .cl-linkedcombobox-combo {
  border: 1px solid #D5D5D5;
  background-color: #fff;
  width: 150px;
  /* 콤보 박스 인풋 텍스트 */
  /* 콤보 박스 펼침 버튼 */
}
.cl-linkedcombobox.cl-focus .cl-linkedcombobox-combo {
  border-color: #62a8ea;
}
.cl-linkedcombobox.cl-disabled {
  /* 콤보 박스 펼침 버튼 - disabled 상태 */
}
.cl-linkedcombobox.cl-disabled .cl-linkedcombobox-combo {
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  color: #000000;
}
/* 콤보 박스 리스트 박스 */
.cl-linkedcombobox-list {
  font: 10pt Gulim;
  color: #000000;
  border: 1px solid #62a8ea;
  background-color: white;
  /*리스트박스의 쉐도우*/
  /* 콤보 박스 아이템 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item {
  /* 콤보 박스 아이템 텍스트 */
  /* 콤보 박스 아이템 드릴다운 아이콘 */
  /* 콤보 박스 아이템 리프 아이콘 */
  /* 콤보 박스 아이템 - 선택됨 */
  /* 콤보 박스 아이템 - disabled 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-selected {
  background-color: #F7F7F7;
  color: #000000;
  /* 콤보 박스 아이템 드릴 다운 아이콘 - 선택됨 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-disabled {
  color: #666;
  /* 콤보 박스 아이템 - 선택됨, disabled 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.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: #666;
  background-color: #F7F7F7;
}
/* 다이얼로그 루트 */
.cl-dialog {
  border: solid 1px #62a8ea;
  box-shadow: 0px 2px 5px darkgray;
  /* 다이얼로그 헤더 */
}
.cl-dialog .cl-dialog-header {
  background-image: none;
  background-color: #003D91;
  padding-left: 20px;
  cursor: move;
  /* 다이얼로그 헤더 텍스트 */
  /* 다이얼로그 닫기 버튼 */
  /* 다이얼로그 닫기 버튼 - 호버 */
  /* 다이얼로그 닫기 버튼 - 액티브 */
}
.cl-dialog .cl-dialog-header .cl-text {
  color: #ffffff;
  font-weight: bold;
}
.cl-dialog .cl-dialog-header .cl-text:focus {
  outline: none;
}
.cl-dialog .cl-dialog-header .cl-dialog-close {
  background-position: left center;
  opacity: 0.8;
}
.cl-dialog .cl-dialog-header .cl-dialog-close:hover {
  opacity: 1;
  background-color: transparent;
}
.cl-dialog .cl-dialog-body {
  padding-top: 5px;
  background-color: #FFFFFF;
}
/* 트리 */
.cl-tree {
  border: 1px solid #D5D5D5;
  font: 10pt Gulim;
  color: #000000;
  background-color: #fff;
  /* 트리 아이템 */
  /* 트리 - focus */
}
.cl-tree .cl-tree-item {
  /* 트리 아이템 체크박스 아이콘 */
  /* 트리 아이템 아이콘 영역 */
  /* 트리 아이템의 펼치고 접혀지는 아이콘 영역*/
  /* 트리 아이템 텍스트 */
  /* 트리 아이템 - disabled */
  /* 트리 아이템 - selected */
}
.cl-tree .cl-tree-item .cl-tree-itemicon {
  background-image: url("controls/images/icon/icon_file.png");
}
.cl-tree .cl-tree-item.cl-checked {
  /* 트리 아이템 체크박스 아이콘 - 선택됨*/
}
.cl-tree .cl-tree-item.cl-partialchecked {
  /* 트리 아이템 체크박스 아이콘 - 부분 선택됨 */
}
.cl-tree .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.cl-tree .cl-tree-item.cl-folder .cl-tree-itemicon {
  background-image: url("controls/images/icon/icon_folder.png");
}
.cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("controls/images/icon/icon_minus.png");
}
.cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("controls/images/icon/icon_plus.png");
}
.cl-tree .cl-tree-item.cl-disabled {
  color: #666;
  /* 트리 아이템 - disabled, selected */
}
.cl-tree .cl-tree-item.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-tree .cl-tree-item.cl-selected {
  background-color: #dce5f3;
  color: #000000;
}
.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("controls/images/icon/icon_minus.png");
}
.cl-tree .cl-tree-item.cl-selected.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("controls/images/icon/icon_plus.png");
}
.cl-tree.cl-focus {
  border-color: #62a8ea;
}
.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: #F7F7F7;
  color: #666;
}
/* 트리 - disabled */
.cl-tree.cl-disabled {
  color: #666;
  border-color: #D5D5D5;
  background-color: rgba(230, 230, 230, 0.4);
  /* 트리 아이템 - disabled, selected */
}
.cl-tree.cl-disabled .cl-tree-item.cl-selected {
  background-color: rgba(230, 230, 230, 0.4);
  color: #777;
}
/* 그리드 */
.cl-grid {
  font: 10pt Gulim;
  color: #000000;
  border: solid 1px #D5D5D5;
  /* 셀 */
  /* 그리드 헤더 */
  /* 그리드 디테일 */
  /* 그리드 푸터 */
  /* 그리드 헤더 외곽 영역 */
  /* 그리드 헤더 외곽 영역 */
  /* 그리드 헤더 외곽 영역 */
  /* 스플릿 시 좌측 그리드 래퍼 */
  /* 스플릿 시 우측 그리드 래퍼 */
  /* 스플릿 상단 그리드 래퍼 */
  /* 스플릿 하단 그리드 래퍼 */
  /* noDataMessage 보여질 때 해당 텍스트영역 스타일 */
}
.cl-grid .cl-grid-cell {
  border-right: solid 1px #D5D5D5;
  border-bottom: solid 1px #D5D5D5;
  /* 셀에 포함된 컨트롤 */
  /* 그룹 펼침/접힘 버튼 */
}
.cl-grid .cl-grid-cell .cl-control {
  overflow: visible !important;
}
.cl-grid .cl-grid-cell .cl-expander {
  /* 그룹 접혀짐 버튼 */
  /* 그룹 펼쳐짐 버튼 */
}
.cl-grid .cl-grid-cell .cl-text {
  padding-left: 2px;
  padding-right: 2px;
}
.cl-grid .cl-grid-cell .cl-default-cell.cl-disabled {
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-grid .cl-grid-row {
  /* 보기 모드의 로우 */
  /* 홀수 로우 */
  /* 짝수 로우 */
  /* 추가된 로우 */
  /* 수정된 로우 */
  /* 삭제된 로우 */
  /* 선택된 로우 - 보기 모드 */
  /* 편집중인 로우 */
  /* 행 그룹시 그룹의 헤더 */
  /* 행 그룹시 그룹의 푸터 */
}
.cl-grid .cl-grid-row.cl-odd-row {
  background-color: #fbfdfd;
}
.cl-grid .cl-grid-row.cl-even-row {
  background-color: #ffffff;
}
.cl-grid .cl-grid-row.cl-inserted {
  background-color: #E8E8F7;
}
.cl-grid .cl-grid-row.cl-modified {
  background-color: #F3FBFF;
}
.cl-grid .cl-grid-row.cl-deleted {
  background-color: #E7E7E7;
}
.cl-grid .cl-grid-row.cl-selected {
  background-color: #dce5f3 !important;
  color: #000000;
  /* 포커스 셀 */
}
.cl-grid .cl-grid-row.cl-editing {
  background-color: #e5f2ff;
}
.cl-grid .cl-grid-row.cl-rowgroup-footer {
  background-color: #cad1da;
}
.cl-grid .cl-grid-header {
  background-image: none;
  background-color: #f2f6fa;
  font-weight: bold;
  /* 그리드 헤더 셀 */
  /* 그리드 헤더 셀 필터 인디케이터 */
  /* 그리드 헤더 셀이 소트가능 한 셀일 때 스타일 */
}
.cl-grid .cl-grid-header .cl-grid-cell {
  /* 그리드 헤더 셀에 임베딩 된 컨트롤 */
}
.cl-grid .cl-grid-header .cl-grid-cell.require {
  color: #308DFF;
}
.cl-grid .cl-grid-header .cl-grid-cell.inputable {
  color: #000000;
  background-color: #e6faf1;
}
.cl-grid .cl-grid-header .cl-grid-cell.readonly {
  color: #959495;
}
.cl-grid .cl-grid-header .cl-filter {
  /* 그리드 헤더 셀 필터 인디케이터에 마우스가 호버되었을 때 스타일 */
  /* 그리드 헤더 셀 필터 인디케이터 - 필터되었을 때 스타일 */
}
.cl-grid .cl-grid-header .cl-sortable-cell {
  /* 그리드 헤더 셀 소트 인디케이터 */
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 정렬됨  */
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 정렬됨  */
}
.cl-grid .cl-grid-header .cl-sortable-cell .cl-sort {
  width: 0px;
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 가능한 아이콘 */
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 우선 순위 영역*/
}
.cl-grid .cl-grid-header .cl-sortable-cell .cl-sort .cl-sort-icon:before {
  content: "";
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc {
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 아이콘 */
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc .cl-sort {
  width: 20px;
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc .cl-sort-icon:before {
  content: "▲";
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-desc {
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 아이콘 */
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-desc .cl-sort {
  width: 20px;
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-desc .cl-sort-icon:before {
  content: "▼";
}
.cl-grid .cl-grid-detail .cl-grid-cell {
  text-align: left;
}
.cl-grid .cl-grid-detail .cl-grid-cell .cl-button {
  font: 10pt Gulim;
  border-radius: 4px;
  border: solid 1px #959697;
  text-shadow: 0px 1px 0px white;
  cursor: pointer;
}
.cl-grid .cl-grid-detail .cl-grid-cell .cl-button .cl-disabled {
  color: #666;
}
.cl-grid .cl-grid-detail .cl-grid-cell .cl-button.border-none {
  border-radius: 0px;
  border: none;
}
.cl-grid .cl-grid-footer {
  border-top: solid 1px #D5D5D5;
  background-color: #cad1da;
}
.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: double 3px #333;
}
.cl-grid .cl-grid-bottomsplit {
  border-top: double 3px #333;
}
.cl-grid .cl-nodatamsg {
  padding-top: 10px;
}
/* 그리드 필터 사용시 필터 다이얼로그가 펼쳐지는 영역 스타일*/
.cl-gridfilter {
  /* 필터 다이얼로그 뒤에 비활성화 영역을 표현하기 위해 덮히는 막 */
  /* 필터 다이얼로그 */
}
.cl-gridfilter .cl-filterdlg {
  /* 필터 다이얼로그 - 타이틀 영역 */
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역 */
  /* 필터 다이얼로그 - 하단에 버튼 영역 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header {
  /* 필터 다이얼로그 - 타이틀 영역의 글자 스타일 */
  /* 필터 다이얼로그 - 타이틀 영역의 닫기 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist {
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역의 아이템 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item {
  /* 필터 다이얼로그 - 아이템 체크박스 스타일 */
  /* 필터 다이얼로그 - 아이템 체크박스가 체크되었을 때의 스타일 */
  /* 필터 다이얼로그 - 아이템 글자 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons {
  /* 필터 다이얼로그 - 하단에 버튼 영역의 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button {
  /* 필터 다이얼로그 - 버튼 영역의 확인 버튼 스타일 */
  /* 필터 다이얼로그 - 버튼 영역의 취소 버튼 스타일 */
}
/* 네비게이션 바 */
.cl-navigationbar {
  font-size: 14px;
  font-weight: bold;
  background-color: #444;
  color: #fff;
  /* 상단 바 */
  /* 네비게이션 바 - 포커스 */
}
.cl-navigationbar .cl-navigationbar-bar {
  /* 네비게이션 바 아이템 */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
  padding: 5px 22px;
  /* 네비게이션 바 아이템 아이콘 */
  /* 네비게이션 바 아이템 텍스트 */
  /* 네비게이션 바 아이템 단축키*/
  /* 네비게이션 바 아이템 드랍다운 아이콘 */
  /* 네비게이션 바 아이템 - 호버 */
  /* 네비게이션 바 아이템 - disabled */
  /* 네비게이션 바 아이템 - 선택됨 */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item .cl-text {
  border-bottom: 1px solid #444;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover {
  border: none;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover .cl-text {
  color: #1a1a1a;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-disabled {
  color: #666;
  /* 네비게이션 바 아이템 - 선택됨, disabled */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
  background-color: #444;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected .cl-text {
  border-bottom: 1px solid #fff;
}
.cl-navigationbar.cl-focus {
  border-color: none;
}
/* 네비게이션 바 드랍다운 메뉴 */
.cl-navigationbar-list {
  border: solid 1px #D5D5D5;
  font: 10pt Gulim;
  /* megamenu 타입의 카테고리 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 */
}
.cl-navigationbar-list .cl-navigationbar-category {
  /* 카테고리의 아이템 영역 */
}
.cl-navigationbar-list .cl-navigationbar-category .sub-items {
  /* 카테고리의 목록 아이템*/
}
.cl-navigationbar-list .cl-navigationbar-listitem {
  color: #000000;
  /* 네비게이션 바 드랍다운 메뉴 아이템 텍스트 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - 호버 */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - disabled */
  /* 네비게이션 바 드랍다운 메뉴 아이템 - 선택됨 */
}
.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: #F7F7F7;
  color: #666;
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-disabled {
  color: #666;
  /* 네비게이션 바 드랍다운 메뉴 아이템 - disabled, 선택됨 */
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-selected {
  background-color: #F7F7F7;
  color: #000000;
}
/* 탭 폴더 - disabled */
/* 탭 폴더 */
.cl-tabfolder {
  color: #000000;
  font: 10pt Gulim;
  /* 헤더 */
  /* 탭폴더 바디 */
}
.cl-tabfolder .cl-tabfolder-header {
  margin-left: 0px;
  padding-top: 2px;
  line-height: 18px;
  /* 이전으로 스크롤 버튼 */
  /* 다음으로 스크롤 버튼 */
  /* 탭 헤더 아이템 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-prev {
  border: solid 1px #D5D5D5;
  /* 이전으로 스크롤 버튼 - disabled */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-next {
  border: solid 1px #D5D5D5;
  /* 다음으로 스크롤 버튼 - disabled */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item {
  padding: 5px 10px;
  background-color: #FFFFFF;
  border-color: #d3d4d5;
  color: #000000;
  font-size: 13px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  /* 탭 아이템 체크 박스 */
  /* 탭 헤더 아이템 닫기 버튼 */
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템 - 호버 */
  /* 비활성 탭 아이템 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-text:focus {
  text-decoration: none;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  border-color: #3b5586;
  color: white;
  background-color: #3b5586;
  border-left: none;
  border-right: none;
  /* 탭 헤더 아이템 닫기 버튼 - 선택 됨 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:focus,
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-focus {
  text-decoration: none;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #F7F7F7;
}
.cl-tabfolder .cl-tabfolder-header-viewport {
  border-collapse: collapse;
  border-spacing: 2px;
  background-color: transparent;
}
.cl-tabfolder .cl-tabfolder-body {
  background-color: white;
  color: #000000;
  border: solid 1px #D5D5D5;
}
.mdifolder {
  color: #000000;
  font: 10pt Gulim;
  border-style: none;
}
.mdifolder > .cl-tabfolder-header {
  padding-top: 2px;
  line-height: 22px;
  vertical-align: bottom;
  /* 탭 헤더 아이템 */
}
.mdifolder > .cl-tabfolder-header .cl-tabfolder-item {
  padding: 5px 10px;
  background-color: #FFFFFF;
  border-color: #dddddd;
  color: #000000;
  font-size: 13px;
  border-bottom: 1px solid #dddddd !important;
  /* 탭 헤더 아이템 - 선택됨 */
  /* 탭 헤더 아이템 - 호버 */
}
.mdifolder > .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  border-color: #344055;
  color: white;
  background-color: #344055;
  border-left: none;
  border-right: none;
}
.mdifolder > .cl-tabfolder-header .cl-tabfolder-item:focus,
.mdifolder > .cl-tabfolder-header .cl-tabfolder-item.cl-focus {
  text-decoration: none;
}
.mdifolder > .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #E8EAEB;
}
.mdifolder > .cl-tabfolder-body {
  background-color: #FFFFFF;
  color: #000000;
  padding-top: 5px;
}
/* 페이지 인덱서 */
.cl-pageindexer {
  font: 10pt Gulim;
  color: #000000;
  /* 페이지 인덱서 버튼 공통 */
  /* 페이지 인덱서 처음으로 버튼 */
  /* 페이지 인덱서 이전 버튼 */
  /* 페이지 인덱서 다음 버튼 */
  /* 페이지 인덱서 마지막으로 버튼 */
  /* 페이지 인덱서 - 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 #D5D5D5;
}
.cl-pageindexer .cl-pageindexer-index {
  /* 페이지 인덱서 선택된 페이지 */
}
.cl-pageindexer .cl-pageindexer-index.cl-selected {
  background-color: #F7F7F7;
  color: #000000;
  border-color: #62a8ea;
}
.cl-pageindexer.cl-disabled {
  color: #666;
}
.cl-pageindexer:not(.cl-disabled) {
  /* 페이지 인덱서 처음으로 버튼 - 액티브 */
  /* 페이지 인덱서 이전 버튼 - 액티브 */
  /* 페이지 인덱서 다음 버튼 - 액티브 */
  /* 페이지 인덱서 마지막으로 버튼 - 액티브 */
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected),
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected),
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected),
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected),
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected) {
  /* 페이지 인덱서 버튼 공통 - 호버 */
  /* 페이지 인덱서 버튼 공통 - 액티브 */
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):hover {
  background-color: #F7F7F7;
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):active {
  background-color: #F7F7F7;
  color: #000000;
}
.cl-pageindexer.cl-disabled {
  /* 페이지 인덱서 버튼 공통 - disabled */
  /* 페이지 인덱서 버튼 공통 - disabled, selected */
}
.cl-pageindexer.cl-disabled .cl-pageindexer-index.cl-selected {
  background-color: rgba(230, 230, 230, 0.4);
  color: #777;
}
/* 노티파이어 아이템 */
.cl-notifier-item {
  font: 10pt Gulim;
  /* 노티파이어 아이템 텍스트 */
  /* 노티파이어 아이템 아이콘 */
  /* 노티파이어 아이템 닫기 버튼 */
  /* 노티파이어 아이템 기본 스타일 */
  /* 노티파이어 아이템 success 스타일 */
  /* 노티파이어 아이템 info 스타일 */
  /* 노티파이어 아이템 warning 스타일 */
  /* 노티파이어 아이템 danger 스타일 */
}
.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 {
  font: 10pt Gulim;
  background-image: none;
  background-color: #ededed;
  border: none;
  border-radius: 4px;
  color: #000000;
  /* 진행 바 */
}
.cl-progress .cl-progress-bar {
  border: none;
  border-radius: 4px 0 0 4px;
  background-image: none;
  background-color: #266bb2;
}
/* 프로그레스 바 - disabled */
.cl-progress.cl-disabled {
  border-color: #D5D5D5;
  background-image: linear-gradient(#ccc, #eee 4px);
  /* 진행 바 - disabled */
}
.cl-progress.cl-disabled .cl-progress-bar {
  border-color: #999;
  background-image: linear-gradient(#eee, #aaa, #ddd);
}
/* 파일 인풋 루트 */
.cl-fileinput {
  font: 10pt Gulim;
  color: #000000;
  border: solid 1px #D5D5D5;
  background-color: #fff;
  /* 파일 인풋 내 텍스트 */
  /* 포커스 상태 */
}
.cl-fileinput:focus {
  border: solid 1px #62a8ea;
}
/* 드래그 호버 상태 */
.cl-fileinput-draghover {
  border-color: red;
}
/**********************************
 폼 레이아웃
 **********************************/
.cl-formlayout-column-shade {
  /* 컬럼 음역 스타일 */
}
.cl-formlayout-vertical-separator,
.cl-formlayout-horizontal-separator {
  /* 구분 선 스타일 */
}
.cl-form-group {
  border: solid 1px #cccccc;
}
.cl-audio {
  border: 1px solid #D5D5D5;
}
.cl-audio.cl-focus {
  border: solid 1px #62a8ea;
}
.cl-video {
  border: 1px solid #D5D5D5;
}
.cl-video.cl-focus {
  border: solid 1px #62a8ea;
}
/* 트리셀 */
.cl-treecell {
  /* 트리셀 안에 트리 아이템 (트리셀에서 트리구조가 시작되는 영역) */
  /* 트리셀 - focus */
  /* 트리셀간 라인 */
}
.cl-treecell .cl-treecell-item {
  /* 트리 아이템이 펼치고 접혀지는 아이콘 영역 */
  /* 트리 아이템의 아이콘 영역 */
  /* 트리 아이템의 텍스트 */
  /* 폴더형 트리 아이템 */
  /* 트리 아이템 - disabled */
}
.cl-treecell .cl-treecell-item .cl-text {
  /* 트리 아이템의 인풋 영역 */
}
.cl-treecell .cl-treecell-item.cl-folder {
  /* 폴더형 트리 아이템의 아이콘 영역 */
  /* 폴더형 트리 아이템이 펼쳐졌을 때 펼치고 접혀지는 아이콘 영역 */
  /* 폴더형 트리 아이템이 접혀졌을 때 펼치고 접혀지는 아이콘 영역 */
}
.cl-treecell.cl-treecell-lines {
  /* 트리셀라인 적용시 트리셀 아이템 */
}
.cl-treecell.cl-treecell-lines .cl-treecell-item {
  /* 트리라인의 확장/축소 아이콘 */
  /* 형제노드에 의해 라인만 있는 영역 */
  /* 현재 트리셀의 라인 영역 */
}
/* 트리셀이 enabled이고, 트리 아이템이 enabled일때 스타일 */
/* 트리셀 - disabled */
.cl-treecell.cl-disabled {
  /* 트리셀 - disabled 의 트리 아이템 - selected */
}
/******************************************************************* 
 * layout
 *******************************************************************/
.cl-container.cl-main {
  background-color: #f7f7f7;
}
.cl-image {
  border: 1px solid #D5D5D5;
}
.cl-htmlsnippet {
  overflow: auto !important;
}
/* header */
.contents-header {
  font-family: Malgun Gothic;
}
.contents-header .cl-container {
  background-color: #444;
}
.contents-header .cl-container .user-name .cl-text {
  position: relative;
}
.contents-header .cl-container .user-name .cl-text:after {
  content: '';
  position: absolute;
  top: 5px;
  right: 0;
  width: 1px;
  height: 11px;
  background-color: #c8c8c8;
}
.cl-navigationbar.menu-bar {
  background-color: #011435;
  border-style: none;
  color: #ffffff;
  font-family: Malgun Gothic;
  background-image: none;
  text-decoration: none;
  /* 상단 바 */
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar {
  /* 네비게이션 바 아이템 */
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar .cl-navigationbar-item {
  padding: 5px 15px;
  /* 선탹된 아이템 */
  /* 아이템 텍스트 */
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
  color: #ffffff;
  background-color: #011435;
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar .cl-navigationbar-item .cl-text {
  font-size: 15px;
  white-space: pre-wrap;
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover {
  background-color: #1A2962;
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover .cl-text {
  color: #ffffff;
}
.cl-navigationbar.menu-bar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover {
  color: #ffffff;
  background-color: #1A2962;
}
/******************************************************************* 
 * 메뉴 트리
 *******************************************************************/
.cl-tree.menu-tree {
  border: 1px solid #313C42;
  background-color: #313C42;
  color: #ffffff;
  font-size: 14px;
  font-family: Malgun Gothic;
  float: left;
  /* 트리 아이템 */
}
.cl-tree.menu-tree .cl-tree-item {
  border-bottom: 1px solid #374248;
  height: 32px;
  /* 트리 아이템 체크박스 아이콘 */
  /* 트리 아이템 아이콘 영역 */
  /* 트리 아이템 텍스트 */
  /* 트리 아이템 - disabled */
  /* 트리 아이템 - selected */
}
.cl-tree.menu-tree .cl-tree-item .cl-tree-checkbox {
  display: none;
  width: 0px;
}
.cl-tree.menu-tree .cl-tree-item .cl-tree-treeicon {
  display: none;
  width: 0px;
}
.cl-tree.menu-tree .cl-tree-item .cl-tree-itemicon {
  display: none;
  width: 0px;
}
.cl-tree.menu-tree .cl-tree-item .cl-text {
  float: left;
  padding-left: 15px;
}
.cl-tree.menu-tree .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 ">" */
}
.cl-tree.menu-tree .cl-tree-item.cl-folder .cl-tree-itemicon {
  background-image: none;
  width: 0px;
}
.cl-tree.menu-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: none;
}
.cl-tree.menu-tree .cl-tree-item.cl-folder.cl-expanded .cl-text {
  background-image: url("images/icon/ico-arrow2.png");
  background-position: right center;
  background-repeat: no-repeat;
}
.cl-tree.menu-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: none;
}
.cl-tree.menu-tree .cl-tree-item.cl-folder.cl-collapsed .cl-text {
  background-image: url("images/icon/ico-arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
}
.cl-tree.menu-tree .cl-tree-item.cl-disabled {
  color: #666;
  /* 트리 아이템 - disabled, selected */
}
.cl-tree.menu-tree .cl-tree-item.cl-disabled.cl-selected {
  color: #777;
  background-color: rgba(230, 230, 230, 0.4);
}
.cl-tree.menu-tree .cl-tree-item.cl-selected {
  background-color: transparent;
  color: #ffffff;
}
.cl-tree.menu-tree .cl-tree-item:not(.cl-disabled) {
  /* 트리 아이템 - hover */
}
.cl-tree.menu-tree .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-tree.menu-tree .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: transparent;
  color: #ffffff;
}
.cl-tree.menu-tree .cl-tree-item:not(.cl-disabled).cl-selected {
  color: #ffffff;
}
.cl-tree.menu-tree .sub-items .cl-tree-item {
  background-color: #273035;
  border-style: none;
  border-left: 3px solid #1d7dd8;
  /* 최하위*/
}
.cl-tree.menu-tree .sub-items .cl-tree-item .cl-text {
  color: #ffffff;
  font-size: 13px;
  padding-left: 10px;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘*/
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐*/
  /* 트리 아이템 폴더 아이콘 - 접힘 ">" */
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-folder .cl-tree-itemicon {
  background-image: none;
  width: 0px;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: none;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-folder.cl-expanded .cl-text {
  background-image: url("images/icon/ico-arrow2.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 9px 9px;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: none;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-folder.cl-collapsed .cl-text {
  background-image: url("images/icon/ico-arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 9px 9px;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-leaf {
  background-image: none;
  background-color: #1D7DD8;
  border-bottom-style: none;
  padding-left: 0px;
  height: 22px;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-leaf .cl-text {
  color: #ffffff;
  float: left;
  font-weight: normal;
  font-size: 12px;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-leaf.cl-selected {
  background-color: #8EBEEC;
  text-decoration: underline;
}
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-leaf.cl-hover,
.cl-tree.menu-tree .sub-items .cl-tree-item.cl-leaf:hover {
  background-color: #8EBEEC;
}
.notEditGridRow .cl-grid-row {
  /* 편집중인 로우 */
}
.notEditGridRow .cl-grid-row.cl-editing {
  background-color: transparent;
}
.menu-navi-text {
  color: #BBBFD0;
  text-align: left;
  text-overflow: ellipsis;
}
.menu-navi-text:hover {
  text-decoration: underline;
  cursor: pointer;
}
.menu-navi-text-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* 메뉴 오픈 버튼 */
.cl-button.btn-menu-open,
.cl-button.btn-menu-open:hover,
.cl-button.btn-menu-open.cl-hover,
.cl-button.btn-menu-open:active,
.cl-button.btn-menu-open.cl-active {
  border-radius: 0px;
  background-image: url("images/button/left_menu_open.png");
  background-position: center center;
  background-repeat: no-repeat;
}
/* 메뉴 오픈 버튼 */
.cl-button.btn-menu-close,
.cl-button.btn-menu-close:hover,
.cl-button.btn-menu-close.cl-hover,
.cl-button.btn-menu-close:active,
.cl-button.btn-menu-close.cl-active {
  border-radius: 0px;
  background-image: url("images/button/left_menu_close.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.cl-button.btn-menu-open-mobile,
.cl-button.btn-menu-open-mobile:hover,
.cl-button.btn-menu-open-mobile.cl-hover,
.cl-button.btn-menu-open-mobile:active,
.cl-button.btn-menu-open-mobile.cl-active {
  border-radius: 0px;
  background-image: url("images/menu/menu.png");
  background-position: center center;
  background-repeat: no-repeat;
}
/* 메뉴 오픈 버튼 */
.cl-button.btn-menu-close-mobile,
.cl-button.btn-menu-close-mobile:hover,
.cl-button.btn-menu-close-mobile.cl-hover,
.cl-button.btn-menu-close-mobile:active,
.cl-button.btn-menu-close-mobile.cl-active {
  border-radius: 0px;
  background-image: url("images/menu/menu-close.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.btn-search-box-expand {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/******************************************************************* 
 * common
 *******************************************************************/
/* 조회조건 영역 스타일 */
.cl-container.search-box {
  background-color: #edf1f8;
  border: 1px solid #9cadca;
}
.cl-container.search-box .cl-output {
  color: 10pt Gulim;
  text-align: right;
  background-repeat: no-repeat;
  padding-right: 5px;
}
.cl-container.search-box .cl-output.require {
  background-image: url("images/icon/ico_star.png");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 8px;
}
/* 조회조건 영역 스타일(모바일) */
.cl-container.search-box-mobile {
  background-color: #f3f7f9;
  border-style: none;
}
.cl-container.search-box-mobile .cl-output {
  color: 10pt Gulim;
  text-align: left;
  background-repeat: no-repeat;
  padding-right: 5px;
}
.cl-container.search-box-mobile .cl-output.require {
  padding-right: 8px;
}
/* 프리폼 영역 스타일 */
.cl-container.form-box {
  border: 1px solid #D5D5D5;
}
.cl-container.form-box .cl-output {
  color: 10pt Gulim;
  text-align: right;
  background-image: none;
  background-color: #ECEFEF;
  border: 1px solid #ECEFEF;
  padding-right: 5px;
}
.cl-container.form-box .cl-output.require {
  background-image: url("images/icon/ico_star.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #E6F0FA;
  padding-right: 8px;
  color: #0000FF;
}
.cl-container.form-box .cl-output.data-title-sub {
  background-color: transparent;
  text-align: left;
  background-image: url("images/icon/bu02.png");
  background-position: left center;
  background-repeat: no-repeat;
}
/* 프리폼 영역 스타일(모바일) */
.cl-container.form-box-mobile {
  border: 1px solid #D5D5D5;
}
.cl-container.form-box-mobile .cl-output {
  color: 10pt Gulim;
  text-align: left;
  background-image: none;
  background-color: #ECEFEF;
  border: 1px solid #ECEFEF;
  padding-right: 5px;
}
.cl-container.form-box-mobile .cl-output.require {
  background-image: url("images/icon/ico_star.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #E6F0FA;
  padding-right: 8px;
  color: #0000FF;
}
.cl-container.form-box-mobile .cl-output.data-title-sub {
  background-color: transparent;
  text-align: left;
  background-image: url("images/icon/bu02.png");
  background-position: left center;
  background-repeat: no-repeat;
}
.cl-container.data-box.cl-disabled {
  background-image: none;
  background-color: #E7E7E7;
}
/* 조회조건 접기/펼치기 스타일*/
.header-box {
  background-color: #f3f7f9;
  border: 1px solid #ccd5db;
  border-radius: 3px 3px;
}
/* 조회조건 접기/펼치기 플러스 버튼 */
.cl-button.btn-header-plus,
.cl-button.btn-header-plus:hover,
.cl-button.btn-header-plus.cl-hover,
.cl-button.btn-header-plus:active,
.cl-button.btn-header-plus.cl-active {
  border-style: none;
  background-color: transparent;
  background-image: url("images/icon/ico-plus.png");
  background-position: center center;
  background-repeat: no-repeat;
}
/* 조회조건 접기/펼치기 마이너스 버튼 */
.cl-button.btn-header-minus,
.cl-button.btn-header-minus:hover,
.cl-button.btn-header-minus.cl-hover,
.cl-button.btn-header-minus:active,
.cl-button.btn-header-minus.cl-active {
  border-style: none;
  background-color: transparent;
  background-image: url("images/icon/ico-minus.png");
  background-position: center center;
  background-repeat: no-repeat;
}
/* MDI 즐겨찾기 버튼 */
.cl-button.btn-mdi-favor,
.cl-button.btn-mdi-favor:hover,
.cl-button.btn-mdi-favor.cl-hover,
.cl-button.btn-mdi-favor:active,
.cl-button.btn-mdi-favor.cl-active {
  border-color: #DDDDDD;
  border-radius: 1px;
  background-color: #ffffff;
  background-image: url("images/menu/ico-bookmark.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.cl-button.btn-mdi-favor:hover,
.cl-button.btn-mdi-favor:hover:hover,
.cl-button.btn-mdi-favor.cl-hover:hover,
.cl-button.btn-mdi-favor:active:hover,
.cl-button.btn-mdi-favor.cl-active:hover {
  background-color: #E8EAEB;
}
/* MDI 화면Refresh 버튼 */
.cl-button.btn-mdi-refresh,
.cl-button.btn-mdi-refresh:hover,
.cl-button.btn-mdi-refresh.cl-hover,
.cl-button.btn-mdi-refresh:active,
.cl-button.btn-mdi-refresh.cl-active {
  border-color: #DDDDDD;
  border-radius: 1px;
  background-color: #ffffff;
  background-image: url("images/menu/ico-refresh.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.cl-button.btn-mdi-refresh:hover,
.cl-button.btn-mdi-refresh:hover:hover,
.cl-button.btn-mdi-refresh.cl-hover:hover,
.cl-button.btn-mdi-refresh:active:hover,
.cl-button.btn-mdi-refresh.cl-active:hover {
  background-color: #E8EAEB;
}
/* MDI 전체닫기 버튼 */
.cl-button.btn-mdi-closeall,
.cl-button.btn-mdi-closeall:hover,
.cl-button.btn-mdi-closeall.cl-hover,
.cl-button.btn-mdi-closeall:active,
.cl-button.btn-mdi-closeall.cl-active {
  border-color: #DDDDDD;
  border-radius: 1px;
  background-color: #ffffff;
  background-image: url("images/menu/ico-close.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.cl-button.btn-mdi-closeall:hover,
.cl-button.btn-mdi-closeall:hover:hover,
.cl-button.btn-mdi-closeall.cl-hover:hover,
.cl-button.btn-mdi-closeall:active:hover,
.cl-button.btn-mdi-closeall.cl-active:hover {
  background-color: #E8EAEB;
}
/* 그룹 타이틀 */
.data-title {
  color: #263238;
  background-image: url("images/icon/bul-title.png");
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 10px;
  font-weight: bold;
  font-size: 13px;
}
/* 그룹 타이틀 */
.data-title-sub {
  padding-left: 15px;
  font-weight: bold;
  font-size: 13px;
  text-align: left;
}
/* 링크 텍스트 */
.text-link {
  color: #0000FF !important;
  text-decoration: underline;
  cursor: pointer;
}
/* 신규 버튼 스타일 */
.cl-button.btn-new,
.cl-button.btn-new:hover,
.cl-button.btn-new.cl-hover,
.cl-button.btn-new:active,
.cl-button.btn-new.cl-active {
  color: #ffffff;
  text-shadow: none;
  background-position: 4px center, left top;
  background-repeat: no-repeat;
  text-align: left;
  border-color: #57c7d4;
  border-radius: 2px;
  padding-left: 20px;
  padding-top: 2px;
  background-image: url("images/icon/ico-edit.png");
  background-color: #57c7d4;
}
.cl-button.btn-new:hover,
.cl-button.btn-new:hover:hover,
.cl-button.btn-new.cl-hover:hover,
.cl-button.btn-new:active:hover,
.cl-button.btn-new.cl-active:hover {
  color: #FFFFFF;
  background-color: #77D6E1;
}
.cl-button.btn-new.cl-disabled,
.cl-button.btn-new:hover.cl-disabled,
.cl-button.btn-new.cl-hover.cl-disabled,
.cl-button.btn-new:active.cl-disabled,
.cl-button.btn-new.cl-active.cl-disabled {
  border: solid 1px #BDEBF1;
  background-color: #BDEBF1;
}
/* 삭제 버튼 스타일 */
.cl-button.btn-delete,
.cl-button.btn-delete:hover,
.cl-button.btn-delete.cl-hover,
.cl-button.btn-delete:active,
.cl-button.btn-delete.cl-active {
  color: #ffffff;
  text-shadow: none;
  background-position: 4px center, left top;
  background-repeat: no-repeat;
  text-align: left;
  border-color: #f96868;
  border-radius: 2px;
  padding-left: 20px;
  padding-top: 2px;
  background-image: url("images/icon/ico-delete.png");
  background-color: #f96868;
}
.cl-button.btn-delete:hover,
.cl-button.btn-delete:hover:hover,
.cl-button.btn-delete.cl-hover:hover,
.cl-button.btn-delete:active:hover,
.cl-button.btn-delete.cl-active:hover {
  color: #FFFFFF;
  background-color: #FA7A7A;
}
.cl-button.btn-delete.cl-disabled,
.cl-button.btn-delete:hover.cl-disabled,
.cl-button.btn-delete.cl-hover.cl-disabled,
.cl-button.btn-delete:active.cl-disabled,
.cl-button.btn-delete.cl-active.cl-disabled {
  border: solid 1px #FCBCBC;
  background-color: #FCBCBC;
}
/* 삭제 저장버튼 스타일 */
.cl-button.btn-delete-save,
.cl-button.btn-delete-save:hover,
.cl-button.btn-delete-save.cl-hover,
.cl-button.btn-delete-save:active,
.cl-button.btn-delete-save.cl-active {
  color: #ffffff;
  text-shadow: none;
  background-position: 4px center, left top;
  background-repeat: no-repeat;
  text-align: left;
  border-color: #f96868;
  border-radius: 2px;
  padding-left: 20px;
  padding-top: 2px;
  background-image: url("images/icon/ico-save.png");
  background-color: #f96868;
}
.cl-button.btn-delete-save:hover,
.cl-button.btn-delete-save:hover:hover,
.cl-button.btn-delete-save.cl-hover:hover,
.cl-button.btn-delete-save:active:hover,
.cl-button.btn-delete-save.cl-active:hover {
  color: #FFFFFF;
  background-color: #FA7A7A;
}
.cl-button.btn-delete-save.cl-disabled,
.cl-button.btn-delete-save:hover.cl-disabled,
.cl-button.btn-delete-save.cl-hover.cl-disabled,
.cl-button.btn-delete-save:active.cl-disabled,
.cl-button.btn-delete-save.cl-active.cl-disabled {
  border: solid 1px #FCBCBC;
  background-color: #FCBCBC;
}
/* 저장 버튼 스타일 */
.cl-button.btn-save,
.cl-button.btn-save:hover,
.cl-button.btn-save.cl-hover,
.cl-button.btn-save:active,
.cl-button.btn-save.cl-active {
  color: #ffffff;
  text-shadow: none;
  background-position: 4px center, left top;
  background-repeat: no-repeat;
  text-align: left;
  border-color: #62a8ea;
  border-radius: 2px;
  padding-top: 2px;
  padding-left: 20px;
  background-image: url("images/icon/ico-save.png");
  background-color: #62a8ea;
}
.cl-button.btn-save:hover,
.cl-button.btn-save:hover:hover,
.cl-button.btn-save.cl-hover:hover,
.cl-button.btn-save:active:hover,
.cl-button.btn-save.cl-active:hover {
  color: #FFFFFF;
  background-color: #89BCEB;
}
.cl-button.btn-save.cl-disabled,
.cl-button.btn-save:hover.cl-disabled,
.cl-button.btn-save.cl-hover.cl-disabled,
.cl-button.btn-save:active.cl-disabled,
.cl-button.btn-save.cl-active.cl-disabled {
  border: solid 1px #C3DDF4;
  background-color: #C3DDF4;
}
/* 저장취소 버튼 스타일 */
.cl-button.btn-save-cncl,
.cl-button.btn-save-cncl:hover,
.cl-button.btn-save-cncl.cl-hover,
.cl-button.btn-save-cncl:active,
.cl-button.btn-save-cncl.cl-active {
  color: #ffffff;
  text-shadow: none;
  background-position: 4px center, left top;
  background-repeat: no-repeat;
  text-align: left;
  border-color: #62a8ea;
  border-radius: 2px;
  padding-top: 2px;
  padding-left: 20px;
  background-image: url("images/icon/ico-delete.png");
  background-color: #62a8ea;
}
.cl-button.btn-save-cncl:hover,
.cl-button.btn-save-cncl:hover:hover,
.cl-button.btn-save-cncl.cl-hover:hover,
.cl-button.btn-save-cncl:active:hover,
.cl-button.btn-save-cncl.cl-active:hover {
  color: #FFFFFF;
  background-color: #89BCEB;
}
.cl-button.btn-save-cncl.cl-disabled,
.cl-button.btn-save-cncl:hover.cl-disabled,
.cl-button.btn-save-cncl.cl-hover.cl-disabled,
.cl-button.btn-save-cncl:active.cl-disabled,
.cl-button.btn-save-cncl.cl-active.cl-disabled {
  border: solid 1px #C3DDF4;
  background-color: #C3DDF4;
}
/* 커밋 버튼 스타일 */
.cl-button.btn-commit,
.cl-button.btn-commit:hover,
.cl-button.btn-commit.cl-hover,
.cl-button.btn-commit:active,
.cl-button.btn-commit.cl-active {
  color: #ffffff !important;
  text-shadow: none;
  text-align: center;
  background-color: #3b5586;
  background-image: none;
  border-color: #3b5586;
  border-radius: 2px;
}
.cl-button.btn-commit:hover,
.cl-button.btn-commit:hover:hover,
.cl-button.btn-commit.cl-hover:hover,
.cl-button.btn-commit:active:hover,
.cl-button.btn-commit.cl-active:hover {
  color: #FFFFFF;
  background-color: #6C80A4;
}
.cl-button.btn-commit.cl-disabled,
.cl-button.btn-commit:hover.cl-disabled,
.cl-button.btn-commit.cl-hover.cl-disabled,
.cl-button.btn-commit:active.cl-disabled,
.cl-button.btn-commit.cl-active.cl-disabled {
  border-color: #9DAAC2;
  background-color: #BDC1C8;
}
/* 팝업호출 버튼 스타일 */
.cl-button.btn-pop,
.cl-button.btn-pop:hover,
.cl-button.btn-pop.cl-hover,
.cl-button.btn-pop:active,
.cl-button.btn-pop.cl-active {
  color: #ffffff !important;
  text-shadow: none;
  text-align: center;
  background-color: #344055;
  background-image: none;
  border-color: #242D3E;
  border-radius: 2px;
}
.cl-button.btn-pop:hover,
.cl-button.btn-pop:hover:hover,
.cl-button.btn-pop.cl-hover:hover,
.cl-button.btn-pop:active:hover,
.cl-button.btn-pop.cl-active:hover {
  color: #FFFFFF;
  background-color: #242D3E;
}
.cl-button.btn-pop.cl-disabled,
.cl-button.btn-pop:hover.cl-disabled,
.cl-button.btn-pop.cl-hover.cl-disabled,
.cl-button.btn-pop:active.cl-disabled,
.cl-button.btn-pop.cl-active.cl-disabled {
  border-color: #7B8390;
  background-color: #7B8390;
}
/* 전자결재 팝업호출 버튼 스타일 */
.cl-button.btn-pop-aprv,
.cl-button.btn-pop-aprv:hover,
.cl-button.btn-pop-aprv.cl-hover,
.cl-button.btn-pop-aprv:active,
.cl-button.btn-pop-aprv.cl-active {
  color: #ffffff !important;
  text-shadow: none;
  text-align: center;
  background-color: #F2A654;
  background-image: none;
  border-color: #F2A654;
  border-radius: 3px;
}
.cl-button.btn-pop-aprv:hover,
.cl-button.btn-pop-aprv:hover:hover,
.cl-button.btn-pop-aprv.cl-hover:hover,
.cl-button.btn-pop-aprv:active:hover,
.cl-button.btn-pop-aprv.cl-active:hover {
  color: #FFFFFF;
  background-color: #F4B066;
}
.cl-button.btn-pop-aprv.cl-disabled,
.cl-button.btn-pop-aprv:hover.cl-disabled,
.cl-button.btn-pop-aprv.cl-hover.cl-disabled,
.cl-button.btn-pop-aprv:active.cl-disabled,
.cl-button.btn-pop-aprv.cl-active.cl-disabled {
  border-color: #CCB8A2;
  background-color: #CCB8A2;
}
/* 조회 버튼 스타일 */
.cl-button.btn-search,
.cl-button.btn-search:hover,
.cl-button.btn-search.cl-hover,
.cl-button.btn-search:active,
.cl-button.btn-search.cl-active {
  background-color: #344055;
  background-image: none;
  text-align: center;
  padding-top: 2px;
  color: white;
  text-shadow: none;
  border-color: #242D3E;
  border-radius: 2px;
}
.cl-button.btn-search:hover,
.cl-button.btn-search:hover:hover,
.cl-button.btn-search.cl-hover:hover,
.cl-button.btn-search:active:hover,
.cl-button.btn-search.cl-active:hover {
  color: #FFFFFF;
  background-color: #242D3E;
}
.cl-button.btn-search:active .cl-text,
.cl-button.btn-search.cl-active .cl-text {
  transform: translateY(1px);
  opacity: 0.2;
}
/* button 돋보기 검색 */
.cl-button.btn-pop-search,
.cl-button.btn-pop-search:hover,
.cl-button.btn-pop-search.cl-hover,
.cl-button.btn-pop-search:active,
.cl-button.btn-pop-search.cl-active {
  background: url("images/icon/ico_search_btn.png") no-repeat;
  background-position: center;
  background-color: #3B5586;
  border-style: none;
  border-radius: 1px;
}
.cl-button.btn-pop-search:hover,
.cl-button.btn-pop-search:hover:hover,
.cl-button.btn-pop-search.cl-hover:hover,
.cl-button.btn-pop-search:active:hover,
.cl-button.btn-pop-search.cl-active:hover {
  background-color: #6C80A4;
}
.cl-button.btn-pop-search.cl-disabled,
.cl-button.btn-pop-search:hover.cl-disabled,
.cl-button.btn-pop-search.cl-hover.cl-disabled,
.cl-button.btn-pop-search:active.cl-disabled,
.cl-button.btn-pop-search.cl-active.cl-disabled {
  background-color: #BDC1C8;
}
/* 팝업화면 닫기 버튼 */
.cl-button.btn-pop-close,
.cl-button.btn-pop-close:hover,
.cl-button.btn-pop-close.cl-hover,
.cl-button.btn-pop-close:active,
.cl-button.btn-pop-close.cl-active {
  text-shadow: none;
  background-image: linear-gradient(#D6E3F0, #ACC7E0);
  border-color: #2070b8;
}
/* Move-Up 버튼 스타일 */
.cl-button.btn-moveup,
.cl-button.btn-moveup:hover,
.cl-button.btn-moveup.cl-hover,
.cl-button.btn-moveup:active,
.cl-button.btn-moveup.cl-active {
  text-shadow: none;
  background-repeat: no-repeat;
  border-style: none;
  background-image: url("images/button/btn_up.png");
  background-color: #62A8EA;
}
.cl-button.btn-moveup:hover,
.cl-button.btn-moveup:hover:hover,
.cl-button.btn-moveup.cl-hover:hover,
.cl-button.btn-moveup:active:hover,
.cl-button.btn-moveup.cl-active:hover {
  color: #FFFFFF;
  background-color: #89BCEB;
}
.cl-button.btn-moveup.cl-disabled,
.cl-button.btn-moveup:hover.cl-disabled,
.cl-button.btn-moveup.cl-hover.cl-disabled,
.cl-button.btn-moveup:active.cl-disabled,
.cl-button.btn-moveup.cl-active.cl-disabled {
  border: solid 1px #C3DDF4;
  background-color: #C3DDF4;
}
/* Move-Down 버튼 스타일 */
.cl-button.btn-movedown,
.cl-button.btn-movedown:hover,
.cl-button.btn-movedown.cl-hover,
.cl-button.btn-movedown:active,
.cl-button.btn-movedown.cl-active {
  text-shadow: none;
  background-repeat: no-repeat;
  border-style: none;
  background-image: url("images/button/btn_down.png");
  background-color: #62A8EA;
}
.cl-button.btn-movedown:hover,
.cl-button.btn-movedown:hover:hover,
.cl-button.btn-movedown.cl-hover:hover,
.cl-button.btn-movedown:active:hover,
.cl-button.btn-movedown.cl-active:hover {
  color: #FFFFFF;
  background-color: #89BCEB;
}
.cl-button.btn-movedown.cl-disabled,
.cl-button.btn-movedown:hover.cl-disabled,
.cl-button.btn-movedown.cl-hover.cl-disabled,
.cl-button.btn-movedown:active.cl-disabled,
.cl-button.btn-movedown.cl-active.cl-disabled {
  border: solid 1px #C3DDF4;
  background-color: #C3DDF4;
}
/* Move-Next 버튼 스타일 */
.cl-button.btn-movenext,
.cl-button.btn-movenext:hover,
.cl-button.btn-movenext.cl-hover,
.cl-button.btn-movenext:active,
.cl-button.btn-movenext.cl-active {
  text-shadow: none;
  background-repeat: no-repeat;
  border-style: none;
  background-image: url("images/button/btn_next.png");
  background-color: #62A8EA;
}
.cl-button.btn-movenext:hover,
.cl-button.btn-movenext:hover:hover,
.cl-button.btn-movenext.cl-hover:hover,
.cl-button.btn-movenext:active:hover,
.cl-button.btn-movenext.cl-active:hover {
  color: #FFFFFF;
  background-color: #89BCEB;
}
.cl-button.btn-movenext.cl-disabled,
.cl-button.btn-movenext:hover.cl-disabled,
.cl-button.btn-movenext.cl-hover.cl-disabled,
.cl-button.btn-movenext:active.cl-disabled,
.cl-button.btn-movenext.cl-active.cl-disabled {
  border: solid 1px #C3DDF4;
  background-color: #C3DDF4;
}
/* Move-Prev 버튼 스타일 */
.cl-button.btn-moveprev,
.cl-button.btn-moveprev:hover,
.cl-button.btn-moveprev.cl-hover,
.cl-button.btn-moveprev:active,
.cl-button.btn-moveprev.cl-active {
  text-shadow: none;
  background-repeat: no-repeat;
  border-style: none;
  background-image: url("images/button/btn_prev.png");
  background-color: #62A8EA;
}
.cl-button.btn-moveprev:hover,
.cl-button.btn-moveprev:hover:hover,
.cl-button.btn-moveprev.cl-hover:hover,
.cl-button.btn-moveprev:active:hover,
.cl-button.btn-moveprev.cl-active:hover {
  color: #FFFFFF;
  background-color: #89BCEB;
}
.cl-button.btn-moveprev.cl-disabled,
.cl-button.btn-moveprev:hover.cl-disabled,
.cl-button.btn-moveprev.cl-hover.cl-disabled,
.cl-button.btn-moveprev:active.cl-disabled,
.cl-button.btn-moveprev.cl-active.cl-disabled {
  border: solid 1px #C3DDF4;
  background-color: #C3DDF4;
}
/* 엑셀 내려받기 */
.cl-button.btn-excel,
.cl-button.btn-excel:hover,
.cl-button.btn-excel.cl-hover,
.cl-button.btn-excel:active,
.cl-button.btn-excel.cl-active {
  color: #ffffff !important;
  text-shadow: none;
  text-align: center;
  background-color: #344055;
  background-image: none;
  border-color: #242D3E;
  border-radius: 2px;
}
.cl-button.btn-excel:hover,
.cl-button.btn-excel:hover:hover,
.cl-button.btn-excel.cl-hover:hover,
.cl-button.btn-excel:active:hover,
.cl-button.btn-excel.cl-active:hover {
  color: #FFFFFF;
  background-color: #242D3E;
}
.cl-button.btn-excel.cl-disabled,
.cl-button.btn-excel:hover.cl-disabled,
.cl-button.btn-excel.cl-hover.cl-disabled,
.cl-button.btn-excel:active.cl-disabled,
.cl-button.btn-excel.cl-active.cl-disabled {
  border-color: #7B8390;
  background-color: #7B8390;
}
/* grp-search 상세조회 버튼 */
.cl-button.btn-search-collapse {
  padding: 0 5px;
  text-align: left;
  background: url("images/icon/ico_search_detail.png") center right no-repeat;
}
.cl-button.btn-search-expand {
  padding: 0 5px;
  text-align: left;
  background: url("images/icon/ico_search_detail_open.png") center right no-repeat;
}
/** 한줄짜리 코멘트 스타일 */
.opt-comment {
  color: #0000FF;
}
/** 다중 라인 코멘트 스타일 */
.grp-comment {
  color: #0000FF;
  vertical-align: top;
  background-color: #E9EFF7;
  border-top: solid 2px #ADCEF1;
  border-left: none 2px #ADCEF1;
  border-right: none 2px #ADCEF1;
  border-bottom: solid 1px #F1F3F7;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
/* output 수업,수강 사용 */
.cl-output.opt-desc {
  color: #FF1493;
  font-size: 13px;
}