:root {
  --frame_top_height: 60px;
  --frame_side_panel_width: 240px;
  --frame_bgcolor_top: /*#234164*/#fff;
  --frame_bgcolor_sidebar: #FFFFFF;
  --frame_bgcolor_contents: #EFEFEF;

  --bgcolor_frame      : #ffffff; /* 프레임 배경색 */
  --bgcolor_body       : #EFEFEF; /* 페이지 기본 배경색 */
  --bgcolor_leftmenu   : #FFFFFF; /* 좌측메뉴 배경색 */
  --bgcolor_main_title : #234164; /* 페이지 메인 타이틀 */
  --bgcolor_sub_title  : #F5F5F5; /* 페이지 서브 타이틀 */
  --bgcolor_impt_title : #D9D9D9; /* 페이지 서브 타이틀 */

  --bdcolor_base       : #DEDEDE; /* 기본 Border 색상 */
  --radius_base        : 8px;

  --width_leftmenu     : 220px; /* 좌측메뉴 넓이 */
  --small_leftmenu     : 75px; /*축소된 메뉴 넓이*/
  --height_main_title  : 60px; /* 페이지 메인 타이틀 높이 */
  --height_sub_title   : 60px; /* 페이지 서브 타이틀 높이 */
  --padding_base       : 20px; /* main padding */
  --margin_base        : 24px; /* main margin */
  --margin_sub         : 3px; /* sub margin */
  --height_logo_block  : 60px; /* 로고 영역 높이 */
  --height_menu_block  : 65px; /* 메뉴 / 기능 영역 높이 */

  --color_font_base    : #545454; /* 기본폰트 색상 */
  --color_font_impt    : #E5E5E5; /* 강조폰트 색상 */
  --color_font_impt2   : #F7941D; /* 강조폰트 색상2 */
  --color_font_impt3   : #2bbfd4; /* 강조폰트 색상2 */
  --color_font_impt4   : #125bbb; /* 강조폰트 색상2 */
  --color_font_red     : #FF0000; /* 강조폰트 색상 */
  --color_font_orange  : #d2801b; /* 강조폰트 색상 */
  --color_logo_text    : #126E91; /* 로고 색상 */

  --color_icon_main    : #1770e3; /* 메인 아이콘 Color */
  --color_icon_sub     : #528cec; /* 서브 아이콘 Color */
  --color_bg_icon      : #6292cf; /* 서브 아이콘 Color */

  --color_text_main    : #545454; /* 문자 기본 Color */
  --color_text_title   : #3782e5; /* 문자 타이틀 Color */
  --color_text_impt    : #413C31; /* 문자 강조 Color */
  --color_text_sub     : #666666; /* 문자 보조 Color */
  --color_text_dsub    : #555555; /* 문자 보조 Color */
  --color_text_tsub    : #7fa5f8; /* 문자 보조 Color */
  --color_text_bsub    : #ECF1FC; /* 문자 보조 Color */
  --color_text_del     : #bac5d7; /* 문자 보조 Color */
  --color_text_link    : #294C95; /* 문자 보조 Color */

  /* 테이블 Color */
  --color_border_table_top       : #a0a0a0; /* 메인테이블 상단선 Color */
  --color_border_table_bottom    : #959595; /* 메인테이블 하단선 Color */
  --color_border_table_bline     : #e8e8e8; /* 테이블 전체 구분선(하단) Color */
  --color_border_table_rline     : #e8e8e8; /* 테이블 전체 구분선(오른쪽) Color */
  --color_border_table_selbline  : #e8e8e8; /* 테이블 선택 Row 구분선(하단) Color */
  --color_bg_table_main          : #fff; /*테이블 전체 배경 Color*/
  --color_border_main            : #3660d5; /* 메인테이블 임시 Color */
  --color_border_table_hbottom   : #a0a0a0; /* 메인테이블 타이틀 구분선(하단) Color */
  --color_border_table_hright    : #DEDEDE; /* 메인테이블 타이틀 구분선(오른쪽) Color */
  --color_bg_table_title         : #FFFFFF; /* 메인테이블 타이틀 배경색 */
  --color_check_table_label      : #2D7EE8; /* 메인테이블 토글Label 색상 */
  --color_sort_table_asc         : #090; /* 메인테이블 정렬아이콘 (ASC) */
  --color_sort_table_desc        : #f00; /* 메인테이블 정렬아이콘 (DESC) */
  --color_text_table_next        : #999999; /* 메인테이블 설명 */
  --color_bg_table_hover         : white; /* 메인테이블 Row hover 배경 */
  --color_bg_table_selected      : #d6e59a; /* 메인테이블 선택Row 배경 */
  --color_bg_table_hselected     : #eef9cd; /* 메인테이블 선택 hover Row 배경 */
  --color_bg_table_selected_sub  : #EEFAFC; /*#ffca8e; /* 메인테이블 선택Row 배경 */
  --color_bg_table_hselected_sub : #EEFAFC; /* 메인테이블 선택 hover Row 배경 */
  --color_bg_table_checked       : #ffe8b7; /* 메인테이블 checked Row 배경 */
  --color_bg_table_hchecked      : #e8c58d; /* 메인테이블 checked hover Row 배경 */
  --color_bg_table_checked_u     : #ddeeff; /* 메인테이블 사용자 checked Row 배경 */
  --color_bg_table_checked_usub  : #ccddee; /* 메인테이블 사용자 checked Row 배경 */
  /*스크롤 Color*/
  --color_bg_scroll_main         : #eee; /* 스크롤바 배경*/
  --color_bg_scroll_float        : var(--frame_bgcolor_sidebar); /* 스크롤바 float thumb */
  --color_bg_scroll_smain        : #eee; /*#eee;*/ /* 스크롤바 배경*/
  --color_bg_scroll_sfloat       : #71a1ee; /* 스크롤바 float thumb */
  --color_bg_select_block        : #f5f5f5; /* 선택 Block  배경 */
  --btn_bd_main : #c0c0c0; /* 메인 버튼 Border Color */

}

body {
  padding:0;
  margin:0;
  color: var(--color_text_main);
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

table {
  border-spacing:0;
  box-sizing: border-box;
}

.w20  { width: 20px  !important; }
.w30  { width: 30px  !important; }
.w50  { width: 50px  !important; }
.w80  { width: 80px  !important; }
.w100 { width: 100px !important; }
.w120 { width: 120px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }
.w400 { width: 400px !important; }
.w500 { width: 500px !important; }
.w600 { width: 600px !important; }
.w700 { width: 700px !important; }
.w800 { width: 800px !important; }
.w900 { width: 900px !important; }

.h20  { height: 20px  !important; }
.h30  { height: 30px  !important; }
.h50  { height: 50px  !important; }
.h80  { height: 80px  !important; }
.h100 { height: 100px !important; }
.h120 { height: 120px !important; }
.h150 { height: 150px !important; }
.h200 { height: 200px !important; }
.h250 { height: 250px !important; }
.h300 { height: 300px !important; }
.h400 { height: 400px !important; }
.h500 { height: 500px !important; }
.h600 { height: 600px !important; }
.h700 { height: 700px !important; }
.h800 { height: 800px !important; }
.h900 { height: 900px !important; }


/** 상단 Badge 용 tippy **/
.tippy-box {
  background-color: #ffffff;
  color: initial;
  border-radius: 8px;
  box-shadow: 0px 1px 6px #00000029;
}
.tippy-arrow {
  color: #ffffff;
}

.alarm_box {
  width: 410px;
  max-height: 300px;
  padding: 10px;
  overflow-y: auto;
}

.alarm_box .alarm_title {
  width: 100%;
  font-weight: bold;
}

.alarm_box .alarm_cont {
  position: relative;
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid #efefef;
  justify-content: space-between;
  align-items: center;
}

.alarm_box .alarm_cont:last-child {
  border-bottom: 0;
}

.alarm_box .alarm_cont .alarm_txt .alarm_type,
.alarm_box .alarm_cont .alarm_txt .alarm_msg {
  font-size: 0.9rem;
  color: #666;
}

.alarm_box .alarm_cont .alarm_txt .alarm_sec {
  font-size: 0.9rem;
  font-weight: bold;
  color: #3d76e8;
  padding-top: 5px;
  margin: 0;
}

.alarm_box .btnAlarmClose {
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 1.8rem;
  width: 24px;
  height: 24px;
  background-image: url(/ksvc/inc/img/x.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

/* Checkbox && Radio && Toggle */
label.form_checkbox, label.form_radio, label.form_toggle {
  position: relative;
  margin-bottom: 0;
  cursor: pointer;
}
label.form_checkbox > input,
label.form_radio > input,
label.form_toggle > input {
  position: absolute;
  top: -1000px;
  left: -1000px;
}
label.form_checkbox::after,
label.form_radio::after {
  font-size: 1.2em;
  line-height: 100%;
  font-weight: 100 !important;
  vertical-align: middle;
  margin-left:3px;
  font-family: bootstrap-icons !important;
}
label.form_toggle::after {
  font-size: 1.8em;
  font-weight: 100 !important;
  line-height: 100%;
  vertical-align: middle;
  margin-left:3px;
  font-family: bootstrap-icons !important;
}

/* Checkbox */
label.form_checkbox::after {
  content:'\F584';
}
label.form_checkbox:has(input:checked)::after {
  content:'\F26C';
  color: #1770e3;
  font-weight: 900;
}
/* Radio */
label.form_radio::after {
  content:'\F28A';
}
label.form_radio:has(input:checked)::after {
  content:'\F26A';
  color: #1770e3;
  font-weight: 900;
}
/* Toggle */
label.form_toggle::after {
  content:'\F5D5';
}
label.form_toggle:has(input:checked)::after {
  content:'\F5D6';
  color: #1770e3;
}