/* 여기에 클래스 추가해서 마음대로 사용하세요 */

.cursor-pointer {
  cursor: pointer;
}

.oblique {
  transform: skewX(-10deg);
  overflow: hidden;
  width: 160%;
  left: -25rem;
  border-bottom-left-radius: 0.75rem;
  position: absolute;
  display: block;
  height: 100%;
}
.oblique .oblique-image {
  background-image: url(../images/login/demand_Response.gif);
  height: 100%;
  width: 80%;
}
.bg-cover {
  background-size: cover;
}

.tui-datepicker {
  z-index: 100 !important;
}

/*toast grid custom*/
.darkmode .tui-grid-container table thead th {
  opacity: 1 !important;
  color: #fff !important;
  background-color: #11111a;
}

.darkmode .tui-grid-container table tbody th {
  opacity: 1 !important;
  color: #fff !important;
  background-color: #11111a;
}

.darkmode .tui-grid-container table tbody td {
  opacity: 1 !important;
  color: #fff !important;
  background-color: #22242f;
}

/*toast grid custom*/

/*toast datepicker custom*/
.darkmode .tui-datepicker table thead th {
  opacity: 1 !important;
  color: #777 !important;
  background-color: #fefefe !important;
}
.darkmode .tui-datepicker table tbody th {
  opacity: 1 !important;
  color: #999 !important;
  background-color: #fefefe !important;
}
.darkmode .tui-datepicker table tbody td {
  opacity: 1 !important;
  color: #999 !important;
  background-color: #fefefe !important;
}
.darkmode .tui-datepicker .tui-is-selectable.tui-is-selected,
.darkmode .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
  background-color: #4b96e6 !important;
  color: #fff !important;
}
/*toast datepicker custom*/

/*toast tree custom*/
.tui-tree-content-wrapper {
  width: 100% !important;
}
.tui-tree-drop {
  height: 30px !important;
  left: 15% !important;
}
.tui-tree-line {
  width: 95% !important;
}
.tui-tree-wrap {
  width: 100% !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: 10px;
}
.darkmode .tui-tree-wrap {
  background-color: #212529 !important;
}
.darkmode .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-text {
  color: #fff !important;
}
.darkmode .tui-tree-text {
  color: #b3b3b3 !important;
}
/*toast tree custom*/

/**
 @author 최백성
 사용 URL: /res/management/, /res/customer/
 토스트UI 그리드, 선택된 줄의 색 변경
 */
td.penguin-tui-grid-row-focus {
  background-color: #ddf;
}
.darkmode td.penguin-tui-grid-row-focus {
  background-color: #027;
}
/**
 @author 최백성
 사용 URL: /res/management/ 포트폴리오 관리 탭, 추가
 그리드 버튼 회전
 */
penguins {
  display: none;
}
#penguin-grid--cgrid .btn i {
  transition: transform 0.2s;
}
#penguin-grid--cgrid .btn.active i {
  transform: rotate(180deg);
}
/**
 @author 최백성
 사용 URL: /res/management/
 라디오 버튼을 선택하게 만드는 태그
 */
p-select-radio {
  display: none;
}
p-radio-inline {
  display: none;
}
/**
 @author 최백성
 사용 URL: /res/management/
 화면 내 오류 표시, .hepi-* 요소 배치가 잘못됐을 경우
 */
.penguin-error {
  color: red;
  font-weight: bold;
  border: 1px solid red;
}

/**
 @author 최백성
 사용 URL: /components/
 예제용 스타일
 */
div.hepi-example {
  word-break: keep-all;
}
hepi-example {
  display: block;
  margin: 5px;
  padding: 10px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 800px;
}
div.hepi-example textarea {
  width: 800px;
  height: 150px;
  border: 1px solid #888;
  border-radius: 10px;
  margin: 5px;
}

/**
 @author 최백성
 버튼이 focus일때 보더때문에 밀리는 문제 해결
 투명보더를 미리 만듬
 */
button:not(:focus) {
  border: 2px solid transparent;
}

/**
 @author 최백성
 송수신현황 테이블 json 값
 */
wattage-data {
  display: none;
}

/**
 @author 최백성
 실패
*/
.penguin-error {
  color: red;
  display: block;
}

/**
 @author 최백성
 필수 항목 왼쪽 별
*/
.redstar::before {
  color: red;
  content: "* ";
}

/**
 @author 최백성
 사용 URL: /res/management/
 자원정보, 포트폴리오관리 숫자 테이블용 스타일
 */
td.stat-table-number {
  border-left: 6px solid;
  padding-left: 10px;
  font-weight: bold;
  font-size: 24px;
}
td.stat-table-title {
  border-left: 6px solid;
  padding-left: 10px;
}
td.pb-cyan {
  border-color: #4dd;
}
td.pb-red {
  border-color: #e44;
}
td.pb-blue {
  border-color: #44d;
}
td.pb-purple {
  border-color: #d4d;
}

/**
 @author 최백성
 토글 스위치 사이즈 지정
 */
.form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

.notoSans {
  font-weight: bold;
  font-family: "Noto Sans KR", sans-serif;
}

.notoSans_light {
  font-family: "Noto Sans KR", sans-serif;
}

/**
@author 김성겸
테이블 td 패딩 제거
 */
.table_no_padding > :not(caption) > * > * {
  padding: 0.2rem 0.2rem;
}
.bg-cbl-result {
  background-color: #d4ffb0 !important;
}

.tui-grid-container {
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 0.75rem !important;
}

/**
* @author 최백성
* TUI Grid 필터 버튼 제거
* 필터 버튼 없이 검색이 안되서 스타일을 통한 제거
*/
.penguin-grid .tui-grid-btn-filter {
  display: none !important;
}