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

  --color_text_title  : #3782e5; /* 문자 타이틀 Color */
  --color_text_impt   : #0d4194; /* 문자 강조 Color */
  --color_text_sub    : #666666; /* 문자 보조 Color */
  --color_text_dsub   : #555555; /* 문자 보조 Color */
  --color_text_tsub   : #f00; /* 문자 보조 Color */
  --color_text_del    : #bac5d7; /* 문자 보조 Color */


  --color_border_table_top       : #629dfe; /* 메인테이블 상단선 Color */
  --color_border_table_bottom    : #959595; /* 메인테이블 하단선 Color */
  --color_border_table_bline     : #dee2e6; /* 테이블 전체 구분선(하단) Color */
  --color_border_table_rline     : #c8c8c8; /* 테이블 전체 구분선(오른쪽) Color */
  --color_border_table_selbline  : #b1b1b1; /* 테이블 선택 Row 구분선(하단) Color */
  --color_bg_table_main          : #fff; /*테이블 전체 배경 Color*/
  --color_border_main            : #3660d5; /* 메인테이블 임시 Color */
  --color_border_table_hbottom   : #bdc3c7; /* 메인테이블 타이틀 구분선(하단) Color */
  --color_border_table_hright    : #b5d1ff; /* 메인테이블 타이틀 구분선(오른쪽) Color */
  --color_bg_table_title         : #eef4fe; /* 메인테이블 타이틀 배경색 */
  --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         : #EFEFEF; /* 메인테이블 Row hover 배경 */
  --color_bg_table_selected      : #d6e59a; /* 메인테이블 선택Row 배경 */
  --color_bg_table_hselected     : #eef9cd; /* 메인테이블 선택 hover Row 배경 */
  --color_bg_table_selected_sub  : #eee; /*#ffca8e; /* 메인테이블 선택Row 배경 */
  --color_bg_table_hselected_sub : #ffe08e; /* 메인테이블 선택 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_bg_editable_column     : #fff5e277; /* 텍스트필드 수정 색상 */
  --color_bg_editable_column     : #ffe29354; /*#dfff9377; /*#f0ffcd77; /* 텍스트필드 수정 색상 */

  --color_bg_menu_main           : #ffffff44; /* 사이드메뉴 기본 배경 */
  --color_bg_menu_smain          : #00000011; /* 사이드메뉴 기본 배경 */
  --color_bg_menu_ssmain         : #ededed; /* 사이드메뉴 기본 배경 */
  --color_bg_menu_block          : #ffffff66; /* 사이드메뉴 Block Select 배경 */
  --color_bg_menu_impt           : #255198; /* 사이드메뉴 Item Select 배경 */
  --color_bg_menu_simpt          : #4c7fd7; /* 사이드메뉴 Item Select 배경w */
  --color_text_main              : #5094ce; /* 사이드메뉴 기본 텍스트 */
  --color_text_menu_impt         : #fff; /* 사이드메뉴 Item Select 텍스트 */
  --color_select_impt            : #1b7be9; /* 사이드메뉴 강조색상 */
  --color_bg_del                 : #fff4f4; /* 삭제 배경 */
  --color_bg_select_block        : #f5f5f5; /* 선택 Block  배경 */
  --color_bg_sunday              : #fbf1f1; /* 선택 Block  배경 */
  --color_bg_saturday            : #f2f6fd; /* 선택 Block  배경 */

  --btn_bg_main : #979797; /* 메인 버튼 Color */
  --btn_bd_main : #6c6c6c; /* 메인 버튼 Border Color */
  --btn_bg_prim : #1770e3;
  --btn_bd_prim : #3564af;
  --btn_bg_numG : #35af7a;
  --btn_bd_numG : #32a181;
  --btn_bg_numR : #e53737; /* RED 버튼 Color */
  --btn_bd_numR : #ad2b2b; /* RED 버튼 Border Color */
  --btn_bg_numO : #ff821b; /* Orange 버튼 Color */
  --btn_bd_numO : #f17a03; /* Orange 버튼 Border Color */
  --btn_bg_numB : #3782e5; /* BLUE 버튼 Color */
  --btn_bd_numB : #3660d5; /* BLUE 버튼 Border Color */
  --btn_bg_numS : #4db5ef; /* Sky BLUE 버튼 Color */
  --btn_bd_numS : #0387d2; /* Sky BLUE 버튼 Color */

  --head_logo_height: 120px; /* 사이드 로고 박스 높이 */
  --head_logo_sheight: 80px; /* 사이드 로고 박스 높이2 */


  --main_title_height: 70px; /* 콘텐츠 title 박스 높이 */
  --main_search_height: 60px; /* 콘텐츠 search 박스 높이 */

  --color_bg_scroll_main:  #eee; /* 스크롤바 배경*/
  --color_bg_scroll_float: #bbb; /* 스크롤바 float thumb */
  --color_bg_scroll_smain: var(--frame_bgcolor_sidebar); /*#eee;*/ /* 스크롤바 배경*/
  --color_bg_scroll_sfloat: #71a1ee; /* 스크롤바 float thumb */
}

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; }
.w60  { width: 50px  !important; }
.w70  { 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: var(--color_text_sub);
}

.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;
}


.s_icon {
  vertical-align: baseline;
  font-size: 0.8em;
}

.st_icon {
  color: var(--color_icon_main);
  vertical-align: middle;
}
.frame_topmode .st_icon {
  color: var(--color_text_menu_impt);
  vertical-align: middle;
}
.frame_topmode .member_info a:hover {
  color: var(--color_text_menu_impt);
}

.font05 {
  font-size:0.5em;
}
.font06 {
  font-size:0.6em;
}
.font07 {
  font-size:0.7em;
}
.font08 {
  font-size:0.8em;
}
.font09 {
  font-size:0.9em;
}
.font10 {
  font-size:1em;
}
.font11 {
  font-size:1.1em;
}
.font12 {
  font-size:1.2em;
}
.font13 {
  font-size:1.3em;
}
.font14 {
  font-size:1.4em;
}
.font15 {
  font-size:1.5em;
}

/* Checkbox && Radio && Toggle */
label.form_checkbox, label.form_radio, label.form_toggle,
label.form_checkbox_before, label.form_radio_before, label.form_toggle_before {
  position: relative;
  margin-bottom: 0;
  cursor: pointer;
}
label.form_checkbox > input,
label.form_radio > input,
label.form_toggle > input,
label.form_checkbox_before > input,
label.form_radio_before > input,
label.form_toggle_before > input {
  position: absolute;
  top: -1000px;
  left: -1000px;
}
label.form_checkbox::after,
label.form_radio::after,
label.form_checkbox_before::before,
label.form_radio_before::before {
  font-size: 1.2em;
  line-height: 100%;
  font-weight: 100 !important;
  vertical-align: text-bottom;
  margin-left:3px;
  font-family: bootstrap-icons !important;
}
label.form_toggle::after,
label.form_toggle_before::before {
  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,
label.form_checkbox_before::before {
  content:'\F584';
}
label.form_checkbox:has(input:checked)::after,
label.form_checkbox_before:has(input:checked)::before {
  content:'\F26C';
  color: var(--color_icon_main);
  font-weight: 900;
}
label.rev.form_checkbox:has(input:checked)::after,
label.rev.form_checkbox_before:has(input:checked)::before {
  content:'\F26C';
  color: var(--color_text_tsub);
  font-weight: 900;
}
label.green.form_checkbox:has(input:checked)::after,
label.green.form_checkbox_before:has(input:checked)::before {
  content:'\F26C';
  color: var(--btn_bg_numG);
  font-weight: 900;
}
/* Radio */
label.form_radio::after,
label.form_radio_before::before {
  content:'\F28A';
}
label.form_radio:has(input:checked)::after,
label.form_radio_before:has(input:checked)::before {
  content:'\F26A';
  color: var(--color_icon_main);
  font-weight: 900;
}
label.rev.form_radio:has(input:checked)::after,
label.rev.form_radio_before:has(input:checked)::before {
  content:'\F26A';
  color: var(--color_text_tsub);
  font-weight: 900;
}
label.green.form_radio:has(input:checked)::after,
label.green.form_radio_before:has(input:checked)::before {
  content:'\F26A';
  color: var(--btn_bg_numG);
  font-weight: 900;
}
/* Toggle */
label.form_toggle::after,
label.form_toggle_before::before {
  content:'\F5D5';
}
label.form_toggle:has(input:checked)::after,
label.form_toggle_before:has(input:checked)::before {
  content:'\F5D6';
  color: var(--color_icon_main);
}
label.rev.form_toggle:has(input:checked)::after,
label.rev.form_toggle_before:has(input:checked)::before {
  content:'\F5D6';
  color: var(--color_text_tsub);
}
label.green.form_toggle:has(input:checked)::after,
label.green.form_toggle_before:has(input:checked)::before {
  content:'\F5D6';
  color: var(--btn_bg_numG);
}

.opacity-30 {
  opacity: .30!important;
}
.opacity-35 {
  opacity: .35!important;
}
.opacity-40 {
  opacity: .40!important;
}
.opacity-45 {
  opacity: .45!important;
}
.opacity-55 {
  opacity: .55!important;
}
.opacity-60 {
  opacity: .65!important;
}


.just_table {

}
.just_table th,
.just_table .th,
.sg-gantt .sg-table-header-cell,
.sg-gantt .sg-table-cell .sg-cell-inner {
  text-align: justify;
  padding: 10px 10px 0 10px;
  line-height: 0;
  vertical-align: top;
  color: #666;
}
.sg-gantt .sg-table-header-cell {
  white-space: initial;
  display: inline;
  padding: 26px 30px 0 30px;
  font-weight: bold !important;
}
.sg-gantt .sg-table-cell {
  display: block;
  white-space: initial;
}
.sg-gantt .sg-table-cell .sg-cell-inner {
  padding: 10% 24px !important;
  display: block;
  text-align: center;
}
.just_table th:after,
.just_table th:before,
.just_table .th:after,
.just_table .th:before,
.sg-gantt .sg-table-header-cell:after,
.sg-gantt .sg-table-header-cell:before,
.sg-gantt .sg-table-cell .sg-cell-inner:after,
.sg-gantt .sg-table-cell .sg-cell-inner:before {
  content: "";
  display: inline-block;
  width: 100%;
}

.sg-gantt .sg-task.cell-dragging-disabled {
  opacity: .50!important;
}
.sg-gantt .sg-task.cell-dragging-disabled.svelte-6l5eiz:hover::before,
.sg-gantt .sg-task.cell-dragging-disabled.svelte-6l5eiz:hover::after {
  top: -10000px;
}
.sg-gantt .sg-task.cell-dragging-disabled:hover,
.sg-gantt .sg-task.cell-dragging-disabled .sg-task-content.svelte-6l5eiz {
  cursor: default;
}

.btn {

}

.btn_main {
  min-width: 86px;
  padding: 4px;
  background-color: var(--btn_bg_main);
  border: 1px solid var(--btn_bd_main);
  color: var(--color_text_menu_impt);
}
.btn_main:hover {
  color: var(--color_text_menu_impt) !important;
  background-color: var(--btn_bd_main) !important;
}
.btn:first-child:hover, :not(.btn-check)+.btn:hover {
  border: 1px solid var(--btn_bd_main);
}
.btn_main_sm {
  min-width: 40px;
}

.btn_prim {
  /*min-width: 86px;*/
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--btn_bg_prim);
  border: 1px solid var(--btn_bd_prim);
  color: var(--color_text_menu_impt);
}
.btn_prim:hover {
  color: var(--color_icon_main);
  background-color: #fff !important;
}
.btn_prim_sm {
  min-width: 40px;
}

.btn_prim:hover, :not(.btn-check)+.btn_prim:hover {
  border: 1px solid var(--color_border_table_top);
}

.btn_sucs {
  /*min-width: 86px;*/
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--btn_bg_numG);
  border: 1px solid var(--btn_bd_numG);
  color: var(--color_text_menu_impt);
}
.btn_sucs:hover {
  color: var(--btn_bd_numG);
  background-color: #fff !important;
}
.btn_sucs_sm {
  min-width: 40px;
}

.btn_info {
  /*min-width: 86px;*/
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--btn_bg_numS);
  border: 1px solid var(--btn_bd_numS);
  color: var(--color_text_menu_impt);
}
.btn_info:hover {
  color: var(--btn_bd_numS);
  background-color: #fff !important;
}
.btn_info_sm {
  min-width: 40px;
}

.btn_warn {
  /*min-width: 86px;*/
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--btn_bg_numO);
  border: 1px solid var(--btn_bd_numO);
  color: var(--color_text_menu_impt);
}
.btn_warn:hover {
  color: var(--btn_bd_numO);
  background-color: #fff !important;
}
.btn_warn_sm {
  min-width: 40px;
}

.btn_pcolor {
  width: 20px;
  height: 20px;
  background-color: #eceff1;
  border: 1px solid silver;
}

.form-control-xs {
  height: calc(1.3em + 0.4rem + 2px);
  padding: 0.1rem 0.3rem;
  font-size: .74375rem;
  line-height: 1.3;
  border-radius: 0.2rem;
  min-height: calc(1.3em + 0.4rem + 2px);
}

.btn.btn-nobd {
  border: 1px solid var(--color_border_table_top);
  color: var(--color_icon_main);
  font-weight: bold;
}
.btn.btn-nobd:disabled {
  border: 1px solid var(--color_text_dsub);
  color: var(--color_text_sub);
  font-weight: bold;
}
.btn.btn-nobd:hover {
  color: var(--color_text_menu_impt);
  background-color: var(--color_icon_main);
}

.btn.btn-nobd2 {
  border: 1px solid var(--btn_bd_numR);
  color: var(--btn_bg_numR);
  font-weight: bold;
}
.btn.btn-nobd2:disabled {
  border: 1px solid var(--color_text_dsub);
  color: var(--color_text_sub);
  font-weight: bold;
}
.btn.btn-nobd2:hover {
  border: 1px solid var(--btn_bg_numR);
  color: var(--color_text_menu_impt);
  background-color: var(--btn_bg_numR);
}




/*********** login ************/
#login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /*background-color: #F4F5F7;*/
}

#login-box {
  display: flex;
  flex-direction: row;
  /*padding: 20px;*/
  width: 66%;
  height: 80%;
  min-width: 600px;
  border-radius: 6px;
}

#login-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex:1;
  height: 75vh;
  min-height: 360px;
  border-radius: 30px;
  margin-right: 10px;

  background-image: url("/inc/img/login_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 1px 1px 10px #666;
}

#login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex:1;
  height: 100%;
  min-height: 360px;
  margin-left: 10px;
  font-family: Montserrat;
}

#login-form .login_title {
  font-family: Montserrat;
  font-size: 20px;
}

#login-form input[type=text],
#login-form input[type=password] {
  background-color: #f2f2f2;
  border:none;
  outline: none;
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  margin: 20px 0;
  padding-left: 60px;
}
#login-form input[type=text]:focus-visible,
#login-form input[type=password]:focus-visible {
  border:none;
  outline: none;
}

#login-form .loginBox {
  width: 80%;
}

#login-form .loginBox .login-put-field {
  position: relative;
}

#login-form .loginBox .login-put-field i {
  position: absolute;
  font-size: 1.6em;
  color: #1770e3;
  left: 15px;
  top: 30px;
  background: #fff;
  padding: 6px;
  border-radius: 6px;
}
#login-form .loginBox .login_button {
  height: 50px;
  background-color: #1770e3 !important;
}

#scalendar .selDiv {
  text-align: center;
  margin-bottom: 0.5em;
}
#scalendar .selDiv a i {
  display: inline-block;
  font-size: 1.6em;
  margin: 0 0.5em;
  vertical-align: middle;
}

#awn-popup-wrapper {
  z-index: 1001;
}

.xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button {
  background-image: url('/inc/img/dpicker_icon.png');
}

ul.pagination {
  margin-bottom: 2px;
}
.pagination .npage {
  margin-left: 5px;
}

@media (max-width: 640px) {
  #login-box {
    display: block;
    padding: 20px;
    width: 90%;
    min-width: 90%;
    border-radius: 6px;
  }

  #login-info {
    height: 10vh;
    min-height: 10vh;
  }

  #login-form {
    border:none;
    border-top: solid 1px #BAC5D7;
  }
}