/* 
 * Define Custom variables
 * Template Name : hira-nonepay-ui
 * Author : Da-eun Ryu
 * File : less
 */
/************************************************
 * Color System
 ************************************************/
/************************************************
 * Body
 ************************************************/
/************************************************
 * Font
 ************************************************/
/************************************************
 * Components
 ************************************************/
/************************************************
 * Input
 ************************************************/
/************************************************
 * Selection
 ************************************************/
/************************************************
 * Button
 ************************************************/
/************************************************
 * Form
 ************************************************/
/************************************************
 * Table
 ************************************************/
/************************************************
 * Tab
 ************************************************/
/************************************************
* Modal
************************************************/
/************************************************
 * Calendar
 ************************************************/
/* Calendar Root */
/* Header */
/* Content header */
/* Other month */
/* Dates */
/* Footer */
.cl-control.cl-focus,
.cl-control:focus,
.cl-linkedcombobox-combo.cl-focus,
.cl-linkedcombobox-combo:focus,
.cl-grid-cell:focus,
.cl-navigationbar-item:hover,
.cl-navigationbar-item.cl-hover {
  /* 웹 접근성 개선 목적으로 포커스 링을 표시하려면 아래 주석을 해제 하십시오. */
  outline: auto;
  outline-color: black;
}
.cl-radiobutton.filter {
  /* 라디오버튼 focus 스타일 */
}
.cl-radiobutton.filter:focus .cl-radiobutton-item.cl-selected,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item.cl-selected,
.cl-radiobutton.filter:focus .cl-radiobutton-item.cl-selected,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item.cl-selected,
.cl-radiobutton.filter:focus .cl-radiobutton-item:not(.cl-disabled):hover,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item:not(.cl-disabled):hover,
.cl-radiobutton.filter:focus .cl-radiobutton-item:focus,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item:focus,
.cl-radiobutton.filter:focus .cl-radiobutton-item.cl-focus,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item.cl-focus,
.cl-radiobutton.filter:focus .cl-radiobutton-item.focus,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item.focus,
.cl-radiobutton.filter:focus .cl-radiobutton-item:not(.cl-disabled).cl-activated,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item:not(.cl-disabled).cl-activated,
.cl-radiobutton.filter:focus .cl-radiobutton-item:not(.cl-disabled):active,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item:not(.cl-disabled):active {
  outline: auto;
  outline-color: black;
}
.cl-tree.filter-result {
  outline: none;
}
.cl-tree.filter-result:focus .cl-tree-item.cl-selected,
.cl-tree.filter-result.cl-focus .cl-tree-item.cl-selected,
.cl-tree.filter-result:focus .cl-tree-item.cl-selected,
.cl-tree.filter-result.cl-focus .cl-tree-item.cl-selected,
.cl-tree.filter-result:focus .cl-tree-item:not(.cl-disabled):hover,
.cl-tree.filter-result.cl-focus .cl-tree-item:not(.cl-disabled):hover,
.cl-tree.filter-result:focus .cl-tree-item:focus,
.cl-tree.filter-result.cl-focus .cl-tree-item:focus,
.cl-tree.filter-result:focus .cl-tree-item.cl-focus,
.cl-tree.filter-result.cl-focus .cl-tree-item.cl-focus,
.cl-tree.filter-result:focus .cl-tree-item.focus,
.cl-tree.filter-result.cl-focus .cl-tree-item.focus,
.cl-tree.filter-result:focus .cl-tree-item:not(.cl-disabled).cl-activated,
.cl-tree.filter-result.cl-focus .cl-tree-item:not(.cl-disabled).cl-activated,
.cl-tree.filter-result:focus .cl-tree-item:not(.cl-disabled):active,
.cl-tree.filter-result.cl-focus .cl-tree-item:not(.cl-disabled):active {
  outline: auto;
  outline-color: black;
}
.cl-pageindexer {
  font: 400 14px "NanumBarunGothic", "Noto Sans KR", "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
  color: #555555;
  outline: none !important;
  /* 페이지 인덱서 버튼 공통 */
}
.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 #e4e5e7;
  border-radius: 13px;
  width: 38px;
}
.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,
.cl-pageindexer .cl-pageindexer-first.cl-focus,
.cl-pageindexer .cl-pageindexer-last.cl-focus,
.cl-pageindexer .cl-pageindexer-prev.cl-focus,
.cl-pageindexer .cl-pageindexer-next.cl-focus,
.cl-pageindexer .cl-pageindexer-index.cl-focus {
  outline: auto;
  outline-color: black;
}
.cl-checkboxgroup.check-button .cl-checkbox {
  height: 35px !important;
  border-radius: 5px;
  background-color: #f8f8f8;
  text-align: center !important;
}
.cl-checkboxgroup.check-button .cl-checkbox.cl-checked {
  background-color: #e6effe;
}
.cl-checkboxgroup.check-button .cl-checkbox .cl-checkbox-field .cl-text:focus {
  outline: auto;
  outline-color: -webkit-focus-ring-color;
}