@charset "utf-8";
/********************************
	jquery-ui-design-custom.css
	2025.04.08
********************************/

/********************************
	*datepicker 커스텀
********************************/
/* jquery ui datepicker custom */
.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-left: 0px; margin-right: 0px; padding: 8px; padding-bottom: 10px; width: 230px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); } 
.ui-datepicker .ui-datepicker-title {line-height: 16px; text-align: center; font-size: 14px; padding:0; font-weight: bold; color:#000;} 

.ui-datepicker table,
.ui-datepicker th,
.ui-datepicker td{font-family: 'Pretendard', 'Roboto', tahoma,  Arial, Helvetica, sans-serif !important;}

.ui-datepicker table{margin:0 0 0 0;}

.ui-datepicker .ui-widget-header { border: 0px solid #dddddd; background: #fff; } 
.ui-datepicker .ui-datepicker-header {position: relative; margin:5px 0 8px; }
.ui-datepicker .ui-datepicker-title select{height:20px;border:none !important; color:#111; font-size:13px; font-family: 'Pretendard', 'Roboto', tahoma,  Arial, Helvetica, sans-serif !important;}
.ui-datepicker .ui-datepicker-calendar > thead > tr > th { font-size: 14px !important; } 

.ui-datepicker .ui-datepicker-title,
.ui-datepicker span.ui-datepicker-year,
.ui-datepicker span.ui-datepicker-month,
.ui-datepicker-div > a{font-family:'Pretendard', 'Roboto', tahoma,  Arial, Helvetica, sans-serif !important;}

/* 상단 좌우 버튼*/
.ui-datepicker .ui-widget-header .ui-icon { background-image: url('../img/ico_datepicker_btns.png'); } 
.ui-datepicker .ui-icon-circle-triangle-e { background-position: -18px -4px; background-size: 36px; } 
.ui-datepicker .ui-icon-circle-triangle-w { background-position: -2px -4px; background-size: 36px; } 

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position: absolute; top: 2px; width: 1.8em;	height: 1.8em; cursor: pointer}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {border:none;}
.ui-datepicker .ui-datepicker-prev {left: 0px;}
.ui-datepicker .ui-datepicker-next {right: 0px;}
.ui-datepicker .ui-datepicker-prev-hover {left: 0px;}
.ui-datepicker .ui-datepicker-next-hover {right: 0px;}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default,
.ui-datepicker .ui-button,
html .ui-datepicker .ui-button.ui-state-disabled:hover,
html .ui-datepicker .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; }

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-state-focus{padding:5px 0; border-radius: 8px;}
/* 날짜 선택시 active 컬러 */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active:hover,
.ui-datepicker .ui-state-active:focus{border: 0; background: #2A54AB !important; color:#fff !important; }
/* 달력 today 하이라이트 컬러*/
.ui-datepicker .ui-state-highlight{border: 0; background: #eaf8ff !important; /*color: #2aafee;*/}

.ui-datepicker .ui-datepicker-today .ui-state-highlight{border: 0; background: #eaf8ff !important;color: #222 !important;}

/* 달력 hover시 배경색*/
.ui-datepicker .ui-state-hover{background:#f7f7f7;}

.ui-datepicker .ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1); } 

.ui-datepicker .ui-datepicker-calendar { width: 100%; } 
.ui-datepicker .ui-datepicker-calendar > thead > tr > th { padding: 5px; font-weight: 400; } 
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td > a { color: #000; font-size: 12px !important;  text-decoration: none;}
.ui-datepicker .ui-datepicker-calendar > tbody > tr > .ui-state-disabled:hover { cursor: auto; background-color: #fff; } 
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td { border-radius: 100%;  height:26px; text-align: center; font-size: 12px; cursor: pointer;} 
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td:hover { background-color: transparent; opacity: 0.8; } 

/* 토요일/일요일 색상 변경*/
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td:first-child a { color: #FF0000 !important; } 
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child a { color: #6597FE !important; } 
.ui-datepicker .ui-datepicker-calendar > thead > tr > th:first-child { color: #FF0000 !important; } 
.ui-datepicker .ui-datepicker-calendar > thead > tr > th:last-child { color: #6597FE !important; } 

/* 토요일 일요일 선택시 글자색변경 (240614) */
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td:first-child a.ui-state-default.ui-state-active { color: #fff !important; } 
.ui-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child a.ui-state-default.ui-state-active { color: #fff !important; } 


/* 월선택 datepicker 2024.01.30 추가 */
.mtz-monthpicker select.mtz-monthpicker-year{width:80% !important;}
.mtz-monthpicker .mtz-monthpicker-month:hover{background:#f7f7f7;}
.mtz-monthpicker td.mtz-monthpicker-month{border-radius: 4px; padding:5px;}
table.mtz-monthpicker {margin-bottom:5px;}


/***** 마이페이지 datepicker :: 2024.02.19 ******/
.myhome-datepicker{ width:100%; background: #ffffff; color: #333333; border-radius:3px; border: 1px solid #E1E1E1; box-shadow:none;}
.myhome-datepicker .datepicker-other-month a{color: rgba(0,0,0,0.5) !important;} 
.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td:first-child.datepicker-other-month a{color: rgba(255,0,0,0.5) !important;} 
.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child.datepicker-other-month a{color: rgba(101,151,254,0.5) !important;} 

.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td a:hover{padding:5px 0; border-radius: 8px; background:#f8f8f8;}

.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td > a{position:relative;}
.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td > a .ico-schedule{ position:absolute; display:block; bottom:0; left:50%; margin-left:-2px; width:3px; height:3px; background: #ff0000; border-radius:3px; box-sizing:border-box; z-index:999;}
.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td > a .ico-schedule2{ position:absolute; display:block; bottom:0; left:50%; margin-left:-2px; width:3px; height:3px; background: #0096ff; border-radius:3px; box-sizing:border-box; z-index:999;}
.myhome-datepicker .ui-datepicker-calendar > tbody > tr > td > a .ico-schedule3{ position:absolute; display:block; top:2px; right:2px; margin-left:-2px; width:4px; height:4px; background: #ff0000; border-radius:4px; box-sizing:border-box; z-index:999;}




/********************************
	*jqgrid 커스텀
********************************/
/* td 우측 라인 없앰 
.grid-wrap .ui-jqgrid .ui-jqgrid-bdiv tr.ui-row-ltr > td {
	text-align: left;
	border-left-width: 0;
	border-left-style: none;
	border-right-width: 0 ;
	border-right-style: none;
}*/

/* thead th 우측라인 없앰
.grid-wrap .ui-th-ltr, 
.grid-wrap .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
   	border-left: 0 none;
   	border-right: 0;
} */
	
/* header tr 컬러 */		
.grid-wrap .ui-state-default,
.grid-wrap .ui-widget-content .ui-state-default{
	/*border: 1px solid #ddd;*/
	/*border:none;*/
	background: #808CAA; /* 2024.06.11 important 삭제*/
	background-image:none !important;
	font-weight: bold;
	color: #fff !important;
	border-color:#cccccc;
}
.grid-wrap th.ui-state-default {border-color: #929aac !important;}

/* 2024.06.12 추가 table header th 오버시 배경색 */
.grid-wrap .ui-jqgrid-htable .ui-state-hover{
	background: #808CAA !important;
}

/* header tr 폰트 */
.grid-wrap .ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels th div {
    overflow: hidden;
    position: relative;
   /* height: auto;*/
   /* margin: 2px 2px;*/
    margin: 0 0;
	padding: 9px 2px 8px 2px !important; 
	height: auto; 
	font-size: 13px !important; 
	text-align:center; 
	box-sizing:border-box;
}

.grid-wrap .ui-jqgrid .ui-jqgrid-htable th{
	/*height: auto;
    padding: 0 2px 0 2px;*/
}

/* tr hover시 색상*/
.grid-wrap .ui-state-hover, 
.grid-wrap .ui-widget-content .ui-state-hover{
	background: #f9f9f9;
	border:1px solid #ddd;
}
/* tr 클릭시 하이라이트 컬러*/
.grid-wrap .ui-state-highlight, 
.grid-wrap .ui-widget-content .ui-state-highlight, 
.grid-wrap .ui-widget-header .ui-state-highlight {
    border:1px solid #ddd;
	background: #FFFCE2 !important;
	color: #000000;
}
/* td 폰트 및 설정*/
.grid-wrap .ui-jqgrid tr.jqgrow > td, 
.grid-wrap .ui-jqgrid tr.jqgroup > td, 
.grid-wrap .ui-jqgrid tr.jqfoot > td, 
.grid-wrap .ui-jqgrid tr.ui-subgrid > td, 
.grid-wrap .ui-jqgrid tr.ui-subtblcell > td {
	height:28px; 
	/*padding-top:6px;
	padding-bottom:5px;*/
	font-family:'Pretendard'; 
	font-weight: 400; 
	font-size: 12px !important; 
	color: var(--gray80-color);
	box-sizing:border-box;
	
    overflow: hidden;
    white-space: pre;
    vertical-align: middle;
    text-align: center;
    border-top: 0 none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.grid-wrap .ui-corner-all, 
.grid-wrap .ui-corner-bottom, 
.grid-wrap .ui-corner-right, 
.grid-wrap .ui-corner-br {
    border-bottom-right-radius: 0;
}

.grid-wrap .ui-corner-all, 
.grid-wrap .ui-corner-bottom, 
.grid-wrap .ui-corner-left, 
.grid-wrap .ui-corner-bl {
    border-bottom-left-radius: 0;
}

.grid-wrap .ui-corner-all, 
.grid-wrap .ui-corner-top, 
.grid-wrap .ui-corner-right, 
.grid-wrap .ui-corner-tr {
    border-top-right-radius: 0;
}

.grid-wrap .ui-corner-all, 
.grid-wrap .ui-corner-top, 
.grid-wrap .ui-corner-left, 
.grid-wrap .ui-corner-tl {
    border-top-left-radius: 0;
}

/* 그리드 박스 우측 라인잡히는거 삭제*/
.grid-wrap .ui-widget.ui-widget-content {
    border: 1px solid #dddddd;
    border-right: 0;
	border-bottom: 0;
}

/* input 체크박스 */
/*.grid-wrap .ui-jqgrid .ui-th-column .cbox {
	height: 14px;
	width: 14px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
}

.grid-wrap .ui-jqgrid .jqgrow > td > .cbox {
	height: 14px;
	width: 14px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
}*/

.grid-wrap .ui-jqgrid .ui-th-column .cbox {width:16px;height:16px; margin:-3px 0 0 0; border:1px solid #aaa; background:#fff; border-radius:2px; box-sizing:border-box; -webkit-appearance:none; -moz-appearance: none;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}
.grid-wrap .ui-jqgrid .ui-th-column .cbox:hover{border-color:#333; }
.grid-wrap .ui-jqgrid .ui-th-column .cbox:checked:before{content:"\e929"; font-family:xeicon; font-size:18px; position:absolute; top:-3px; left:-2px; width:16px; height:16px;}
.grid-wrap .ui-jqgrid .ui-th-column .cbox:checked { position:relative;color:#fff; border-color:var(--darkblue-color); background:var(--darkblue-color); 
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.grid-wrap .ui-jqgrid .ui-th-column .cbox:checked:hover,
.grid-wrap .ui-jqgrid .ui-th-column .cbox:checked:focus {color:#fff; background:var(--darkblue-color);}
.grid-wrap .ui-jqgrid .ui-th-column .cbox:disabled  { border-color:#d8d8d8; background:#eee; border-radius:2px; box-sizing:border-box;}
.grid-wrap .ui-jqgrid .ui-th-column .cbox:checked:disabled {color:#e9e9e9 !important; border-color:#d0d0d0 !important; background:#d0d0d0 !important; border-radius:2px; box-sizing:border-box;}



.grid-wrap .ui-jqgrid .jqgrow > td > .cbox {width:16px;height:16px; margin-top:-3px; border:1px solid #aaa; background:#fff; border-radius:2px; box-sizing:border-box; -webkit-appearance:none; -moz-appearance: none;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:hover{border-color:#333; }
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:checked:before{content:"\e929"; font-family:xeicon; font-size:18px; position:absolute; top:-3px; left:-2px; width:16px; height:16px;}
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:checked { position:relative;color:#fff; border-color:var(--darkblue-color); background:var(--darkblue-color); 
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:checked:hover,
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:checked:focus {color:#fff; background:var(--darkblue-color);}
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:disabled  { border-color:#d8d8d8; background:#eee; border-radius:2px; box-sizing:border-box;}
.grid-wrap .ui-jqgrid .jqgrow > td > .cbox:checked:disabled {color:#e9e9e9 !important; border-color:#d0d0d0 !important; background:#d0d0d0 !important; border-radius:2px; box-sizing:border-box;}


/* 20230201 그리드 th bg 색상 light*/
.grid-wrap.th-light .ui-state-default,
.grid-wrap.th-light .ui-widget-content .ui-state-default{
	/*border: 1px solid #ddd;*/
	/*border:none;*/
	background: #EAECF3 !important;
	background-image:none !important;
	font-weight: bold;
	color: #000 !important;
	border-color:#dddddd;
}
.grid-wrap.th-light th.ui-state-default {border-color: #ddd !important;}


/******* 2024.06.11 그리드 영역 헤더 색상 추가 / td 라인추가 ********/
/* 구분 라인 추가*/
.grid-bd-right-dark{border-right:3px double #b4b4b4 !important;}
.grid-wrap th.grid-bd-right-dark {border-right:3px double #9ea2ad !important;}

/* 헤더 색상 추가*/
.grid-wrap th.th-gray002 {border-color: #929aac !important; background: #6c7691 !important;}

/* 25.02.26 헤더색상 추가 - 미니arms */
.grid-wrap th.th-blue001 {background: #c1d3f5 !important;}
.grid-wrap th.th-blue002 {border-color: #c5d6e6 !important; background: #e3eafa !important;}
.grid-wrap th.th-red001 {background: #f0cccb !important;}
.grid-wrap th.th-red002 {border-color: #dbc8c4 !important; background: #f9e3df !important;}


/* jstree 상세검색 색상변경 2024.01.24 */
.jstree-default .jstree-search {
  font-style: italic; 
  color: var(--darkblue-color) !important;
  font-weight: bold;
}


/* tooltip 커스텀 css 2024.02.08 */
.ui-draggable, .ui-droppable {
	background-position: top;
}
.ui-tooltip, .arrow:after {
    background: #425570;
    border: 1px solid #425570;
}
.ui-tooltip {
	white-space: pre-wrap;
    padding: 8px 12px;
    color: white;
    border-radius: 10px;
    font:normal 13px "Pretendard", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.08);
	/*white-space: pre-wrap;*/
	background: #425570 !important;
    border: 1px solid #425570 !important;	
	max-width:360px;
	z-index:910000;
}
.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}

/* 2024.02.22 메뉴권한관리 툴팁 스타일 2 (배경흰색) / 화살표 없음 */
.ui-tooltip.tooltip-style2{
    white-space: pre-wrap;
	background: #fff !important;
    border: 1px solid #425570 !important;
}
.ui-tooltip.tooltip-style2 {
    padding: 8px 10px;
    color: #425570 !important;
	text-align:center;
    border-radius: 10px;
    font: bold 13px "Pretendard", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.08);
	max-width:360px;
	line-height:1.4;
	z-index:910000;
}

/* 2024.06.11 툴팁 스타일 3 (배경흰색) / 화살표 있음 :: 버튼 툴팁에 사용 */
.ui-tooltip.tooltip-style3{
    white-space: pre-wrap;
	background: #ffffff !important;
    border:none !important;
}
.ui-tooltip.tooltip-style3 {
    padding: 8px 12px;
    color: #425570 !important;
	text-align:left;
    border-radius: 10px;
    font: bold 13px "Pretendard", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.22);
	max-width:360px;
	line-height:1.4;
	font-weight:400;
	z-index:910000;
}
.ui-tooltip.tooltip-style3 .arrow:after {
    background: #ffffff !important;
    border:none !important;
	box-shadow: 6px 5px 9px -4px rgba(0, 0, 0, 0.22) !important;
}


/* 2024.06.17 툴팁 스타일 4 (배경흰색) / 화살표 있음 :: 버튼 툴팁에 사용
/* 지출결의서 - 내역불러오기버튼에만 사용 (아이프레임) */
.ui-tooltip.tooltip-style4{
    white-space: pre-wrap;
	background: #ffffff !important;
    border:none !important;
}
.ui-tooltip.tooltip-style4 {
    padding: 8px 12px;
    color: #425570 !important;
	text-align:left;
    border-radius: 10px;
    font: bold 13px "Pretendard", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.22);
	max-width:360px;
	line-height:1.4;
	font-weight:400;
	z-index:910000;
}
.ui-tooltip.tooltip-style4 .arrow:after {
    background: #ffffff !important;
    border:none !important;
	box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.22) !important;
}
.ui-tooltip.tooltip-style4 .arrow {
    right: 3% !important;
	left:auto !important;
    margin-right: 0 !important;
	margin-left: auto !important;
}




/* 2024.06.11 툴팁 스타일 3 (배경흰색) / 화살표 있음 :: 버튼 툴팁에 사용 
.ui-tooltip.tooltip-style3{
    white-space: pre-wrap;
	background: #fff !important;
	border: 1px solid #425570 !important;
}
.ui-tooltip.tooltip-style3 {
    padding: 12px 12px 8px;
    color: #425570 !important;
	text-align:left;
    border-radius: 10px;
    font: bold 13px "nanumBarunGothic", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.08);
	max-width:360px;
	line-height:1.4;
	font-weight:400;
	z-index:910000;
}
.ui-tooltip.tooltip-style3 .arrow:after {
    background: #fff !important;
    border: 1px solid #425570;
}*/



/* 20240425 그리드 input select 박스 추가*/
.grid-cm-input {background: transparent; border-radius:0; font-family: 'Pretendard' !important; border:1px solid var(--gray10-color) !important;}
.grid-cm-select {background: transparent; border-radius:0; font-family: 'Pretendard' !important; font-weight:400; padding:0 6px 0 6px; color: var(--gray80-color); border:none !important; 
    -webkit-appearance: auto;
	appearance: auto;
	-moz-appearance: auto;
}
.grid-pd-none{padding: 0 0 0 0 !important;}


/* jquery-ui css 폰트 수정 2025.02.21 */
.ui-widget {
	font-family: 'Pretendard' !important;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: 'Pretendard' !important;
}