/*@charset "utf-8";*/
select[disabled]{background: #e9ecef !important; border-color: #bbb !important;}
/*로딩*/
#bowlG {
	/* position: absolute; */
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0);
	top: 40%;
	width: 600px;
	height: 100px;
	z-index: 99999;
}

.ballG {
	text-align: center;
}

body:has(#lnb-area.menu-open) #contents::before {
	background-color: #000 !important;
	opacity: 0.6 !important;
}
.mfp-bg {
    background-color: #000 !important;
	opacity: 0.6 !important;
}

#popup-bg-loading {
	/* position: absolute; */
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99998;
	background: #000;
	opacity: 0.5;
	filter: Alpha(opacity = 70);
}

/* 버튼 */
.btn-custom{padding:3px 12px 4px 12px;}
.btn-darkgray:not(:disabled):not(.disabled).active,
.btn-darkgray:not(:disabled):not(.disabled):active,
.btn-darkgray:not(:disabled) {
	color: #fff;
	background-color: #333;
}
.btn-darkgray:hover {
	color: #fff;
	background-color: #000;
}

.contents-inner {
	width: calc(100vw - 70px);
	height: calc(100svh - 65px);
}

.top-all-close {
	z-index: 1;
	position: absolute;
	right:5px;
	width:20px;
	height:32px;
	min-width: initial;
	margin-top: 10px;
	min-width: initial;
	border: 1px solid #bbb !important;
	border-radius: 6px;
}

.top-all-close .material-symbols-outlined{
	opacity: 0.8;
}

/* easyui Custom CSS */
.tabs-header {
    border-width: 0 !important;
    padding-top: 0 !important;
}

.tabs {
    width: 100% !important;
    height: 44px !important;
    padding-top: 10px !important;
	padding-left: 11px !important;
}

.tabs-inner {
    height: 34px !important;
    line-height: 34px !important;
    border-bottom: 0 !important;
}

.tabs-header,
.tabs-scroller-left,
.tabs-scroller-right,
.tabs-tool,
.tabs li a.tabs-inner {
    border-color: #ddd !important;
}

.tabs li a.tabs-inner {
    /*background-color: #fafafa !important;*/
    /*border-radius: 10px 10px 0 0 !important;*/
    padding: 0 30px 0 10px !important;
	border-color: #2c60d0 !important;
}
.tabs li.tabs-selected a.tabs-inner {
    /*background-color: #2c60d0 !important;*/
    background-color: #2c60d0 !important;

}

.tabs li.tabs-selected a.tabs-inner .tabs-title {
	color:#ffffff !important;
}

.tabs-closable {
    padding-right: 0 !important;
}

/*.tabs-header, .tabs-panels, .panel-htop, .panel-body, .aui-grid {
    width: 100% !important;
}*/

/*.tabs-header, .tabs-panels, .aui-grid {
    width: 100% !important;
}*/

/*.panel-htop.combo-p,
.panel-body.combo-panel {
    width: 240px !important;
}*/

.tabs-scroller-left,
.tabs-scroller-right {
    position: absolute;
    top: 10px;
    width: 24px;
    height: 32px !important;
    border-radius: 6px;
    z-index: 1;
    opacity: 0.8;
    border: 1px solid #bbb !important;
}

.tabs-scroller-left {
    left: 10px;
    background: #fff url('../easyui/themes/default/images/tabs_icons.png') no-repeat 3px center;
}

.tabs-scroller-right {
    right: 28px;
    background: #fff url('../easyui/themes/default/images/tabs_icons.png') no-repeat -13px center;
}

.tabs-scroller-over {
    opacity: 1;
    border: 1px solid #aaa !important;
}

.tabs li a.tabs-close {
    right: 6px;
    top: 18px;
}

.tabs li a.tabs-close:hover {
    background-color: transparent;
}

.easyui-tabs .tabs-header {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 44px;
}
.easyui-tabs .tabs-header .tabs-wrap {
    display: inline-block;
}

.easyui-tabs .tabs-header .tabs li {
    display: inline-block;
    float: none;
}

.easyui-tabs .tabs-header .tabs li.tabs-last {
	margin-right:32px;
}

.easyui-tabs .tabs-header .tabs li .tabs-close {	
	background:none;
	opacity:1;
}
.easyui-tabs .tabs-header .tabs li .tabs-close::before {	
	content: 'close';
	font-family: 'Material Symbols Outlined';
	font-size: 20px;
	color: #000;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.easyui-tabs .tabs-header .tabs li.tabs-selected .tabs-close::before {
	color:#fff;
}
.textbox.combo input[type=text],
.textbox.combo input[type=password],
.textbox.combo input[type=number],
.textbox.combo select,
.textbox.combo textarea {
    height: 24px !important;
}

.textbox.combo input[type=text]:focus,
.textbox.combo input[type=password]:focus,
.textbox.combo input[type=number]:focus,
.textbox.combo select :focus,
.textbox.combo textarea:focus {
    border: none !important;
}

.textbox-addon.textbox-addon-right a {
    width: 24px !important;
    height: 24px !important;
}

.textbox-focused {
    border-color: var(--primary);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.aui-grid-nodata-msg-layer {
    background: url("../AUIGrid/images/info.png") left center no-repeat;
    padding: 0 0 0 34px;
    height: 60px;
    line-height: 60px;
    background-size: 24px;
    font-size: 16px;
    font-weight: 400;
}

.img-165h {
	height:165px !important;
}

.img-141h {
	height:141px !important;
}

.img-433h {
	height:433px !important;
}

.img-100h {
	height:100px !important;
}

.blink {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.highlight {
    animation: background-change 1s linear infinite;
}
@keyframes background-change {
    0% { background-color: yellow; }
    50% { background-color: red; }
    100% { background-color: yellow; }
}


.page-content { height: calc(100vh - 10px); overflow: auto; }
.grid-area { height: inherit; }

/*easyui가 자동생성하는 panel 하얀색 수정*/
.panel-body {
	background-color: transparent;
	border-color: transparent;
	/* 패널 y 스크롤 삭제 */
	/* overflow-y: hidden; */
}

/* focus none*/
.no-focus:focus {
	outline: none;
	/* outline-style:none;
	box-shadow:none;
	border-color:transparent; */
}

/* 연관업무 마우스 hover */
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	max-height: 100px;
	left: auto;
	right: 0;
	width: 140px;
	display: none;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content li:hover {
	background-color: #ddd;
}

#tt>div>div>div {
	overflow-y: hidden !important;
}
/*layout-box 제거 후 컨텐츠 꺠짐 방지*/
body>.content-wrap {
	min-width: 1280px;
}
/*이중스크롤 제거*/
.layout-panel-center>.panel-body {
	overflow-y: hidden !important;
}
/*레프트메뉴 세로 스크롤 가능하지만, 스크롤바는 숨김*/
#left::-webkit-scrollbar {
	display: none;
}

/* 셀렉트박스 안에 체크박스 옵션 테스트*/
.multiselect-dev {
	width: 200px;
}

.selectBox {
	position: relative;
}

.selectBox select {
	width: 100%;
}

.overSelect {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.multiselect label {
	display: block;
	background-color: #fff;
}

.multiselect label:hover {
	background-color: #1e90ff;
}

.readonly {
	height: 24px;
	width: 100%;
	border-radius: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

/* 백그라운드 화이트(공통팝업 body) */
.bg-white {
	background-color: #fff;
}
/* 가로로 배열 */
.inline {
	display: inline-block !important;
}
/* placeholder 추가 */
[contenteditable=true]:empty:before {
	content: attr(placeholder);
	display: block; /* For Firefox */
}

.contenteditable {
	height: 362px;
	max-height: 362px;
	overflow-y: auto;
}

/* tabs-inner 마진때문에 따로 분리 */
.section-inner {
	display: none;
}

.section-inner.active {
	display: inherit;
}

/*.layerPopup>.mfp-container {
	width: 70% !important;
}*/

.bookmarkWarp {
	margin-left: 25%;
	margin-bottom: 5%;
	margin-top: 5%;
}

.section-inner-center {
	display: none;
}

.section-inner-center.active {
	display: inherit;
}

.section-inner-franc {
	display: none;
}

.section-inner-franc.active {
	display: inherit;
}
/* 콤보그리드 색깔 */
.datagrid-body {
	background: #fff;
	border: 1px solid #eee;
}
/* 콤보그리드 width 10000px 수정 ---> IE 이슈로 unset에서 auto로 수정*/ 
.datagrid-header-inner {
	float: left;
	width: auto;
}
/* 콤보그리드 높이1 */
.combo {
	height: 24px;
}
/* 콤보그리드 높이2 */
.combo > span {
	height: 24px;
}
/* 콤보그리드 높이3 */
.textbox-text {
	height: 20px;
	padding-left: 0 !important;
	padding-right: 0 !important;
	vertical-align: middle !important;
}
/* 콤보그리드 옆에 화살표랑 엑스표*/
.textbox-addon > a {
	height: 22px !important; 
}
/* 콤보그리드 테두리 색깔 */
.textbox {
	border-color: #bbb;
}
/*form 밑에 content-wrap 안깨지게 수정*/
form>.content-wrap {
	min-width: 1280px;
}

/* 콤보그리드 화살표 수정*/
.combo-arrow {opacity: 1;background-color: transparent !important;background: url(images/combo_arrow.png) no-repeat center center;}

/*콤보그리드 화살표 클릭 효과*/
.combo-arrow:focus {opacity: 0.7;}

/* 콤보그리드 input 포커스 border 제외*/
span.textbox.combo > input:focus {border: none;}

/* 콤보그리드 헤더 색깔 파란색으로 변경 및 그림자 추가 */
.combo-p {box-shadow: 3px 3px 7px rgba(0,0,0,0.4);border-radius: 5px;}
.datagrid-header-row {background-color: #015ea8; color: #fff; opacity: 0.9;} 
.datagrid-header-over {background-color: #004080!important; opacity: 1} .datagrid-header-over > div > span {color: #fffafa;}


/* 아래 class안에 있으면 달력 고정 취소 */
.input-group>.form-control, .input-group>.form-control-plaintext, .input-group>.custom-select, .input-group>.custom-file {
	width: 1% !important
}


#autocompleteMenu {
	position: absolute;
	background: white;
    width: 168px;
    border-radius: 4px;
    box-shadow: 1px 1px 5px darkgrey;
}
#autocompleteMenu > li > a:hover {
	color: hotpink;
}
#autocompleteMenu > li {
	padding: 3px;
}

.btn-remove-dev {
	width: 15px;
    font-weight: bold;
    padding: 0px;
}

.btn-darkgray:not(:disabled):not(.disabled).active,
.btn-darkgray:not(:disabled):not(.disabled):active,
.btn-darkgray:not(:disabled) {
	color: #fff; 
	background-color: #333; 
}
.btn-darkgray:hover {
	color: #fff; 
	background-color: #000; 
}
.show>.btn-deepdark.dropdown-toggle {color: #fff; background-color: #1c2128;}

.btn-lightgray {
	color: #fff; 
	border: 1px solid #fff; 
	background: #666; 
	opacity: 0.3; 
	filter: alpha(opacity=30); 
}

.btn-lightgray:hover {
	color: #fff; 
	border: 1px solid #fff; 
	background: #666; 
	opacity: 0.3; 
	filter: alpha(opacity=30); 
}

.ci, .ci[readonly], .ci:focus, .ci:focus-visible {
	border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bd {
	font-weight: bold !important;
}

.help-imgcon {text-align: center;}
.help-imgcon img {border: 1px solid #ddd; margin-top: 10px; width: 760px; height: 700px; object-fit: contain;}

/* th 색상변경 */
.essential-item {
	color: #cf0a2c !important;
}
.optional-item {
	color: #0000ff !important;
}
.essential-item:before {
	content: '★';
}

.checkline{position: relative;top: 2px;}

.dev_search_dt_type_cd_str_div {
	width: max-content;
	/*padding-right: 5px;*/
	/* margin-left: -5px; */
	height: 24px;
	overflow-y: hidden;
	/*padding-top: 1px;*/
	transform: translateX(-50%) translateY(-100%);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.dev_search_dt_type_cd_str_div {
		min-width : 320px;
		display: flex;
	}
}

/* 달력(calDate) 컴포넌트 input-group width */
.date-wrap {width: calc(148px - 28px);}

/* 달력 addon 버튼 크기 및 패딩 */
.ui-datepicker-trigger.btn.btn-primary-gra {width: 24px !important; max-width:24px !important; height: 24px !important;padding: 0 !important;}
.calDate{width: 76px !important; max-width: 76px !important}
/*#hp_no{width: 100px !important; max-width: 100px !important;}*/ /*250526 인사현황 기본정보 폼형식으로 주석처리*/

/* 달력 [센터변경] 위치 수정*/
.calendar-table .datail-list {padding: 40px 5px 10px 5px; clear: both; color: #cc0000; font-size: 11px;}

/* 달력 년도,월만 선택 */
.month-picker .ui-datepicker-calendar { display:none; }
.calDateMonth {max-width: 76px !important}

/* 쪽지함 select 위치 수정 */
.dev_search_dt_type_cd_str_wrap {position:relative;}
.dev_search_dt_type_cd_str_wrap .dev_search_dt_type_cd_str_div {left:0; top:28px;}

/* 파일업로드 팝업  관련 */
.img-view,
.img-view2,
.img-view3,
.img-view4,
.img-view5 {text-align: center;}
.img-view img {height: 700px;}
.img-view2 img {height: 576px; border: 1px solid #ddd; margin-top: 10px;}
.img-view3 img {height: 1024px;}
.img-view3 .photo-wrap {position: relative; width: 768px; margin: 0 auto;}
.img-view3 > .drag-comment {width: 768px; height: 1024px; margin-top: 5px;}
.img-view3 .photo-delete {position: absolute; right: 10px; top: 10px; border-radius: 50%; background: #cc0000; opacity: 0.6; filter: Alpha(opacity=60);}
.img-view3 > .photo-delete button i {font-size: 24px; margin-top: 0;}
.img-view4 img {height: 230px; margin-top: 5px;}
.img-view4 .photo-wrap {position: relative; width: 300px; margin: 0 auto;}
.img-view4 > .drag-comment {width: 100%; height: 230px; margin-top: 5px;}
.img-view4 .photo-delete {position: absolute; right: 10px; top: 10px; border-radius: 50%; background: #cc0000; opacity: 0.6; filter: Alpha(opacity=60);}
.img-view4 > .photo-delete button i {font-size: 24px; margin-top: 0;}
.img-view5 img {height: 700px;}
.img-view5 .photo-wrap {position: relative; width: 525px; margin: 0 auto;}
.img-view5 > .drag-comment {width: 525px; height: 700px; margin-top: 5px;}
.img-view5 .photo-delete {position: absolute; right: 10px; top: 10px; border-radius: 50%; background: #cc0000; opacity: 0.6; filter: Alpha(opacity=60);}
.img-view5 > .photo-delete button i {font-size: 24px; margin-top: 0;}

/* 2022-10-18 파일업로드(그룹다중) css 추가 */
.img-view6 img {height: 230px; margin-top: 5px;}
.img-view6 .photo-wrap {position: relative; width: 300px; margin: 0 auto;}
.img-view6 > .drag-comment {width: 100%; height: 100px; margin-top: 5px;}
.img-view6 .photo-delete {position: absolute; right: 10px; top: 10px; border-radius: 50%; background: #cc0000; opacity: 0.6; filter: Alpha(opacity=60);}
.img-view6 > .photo-delete button i {font-size: 24px; margin-top: 0;}

/* 리모트 리스트 템플릿에서 사용할 클래스*/
.myList-style {
	text-align : left;
	white-space : nowrap;
}
.myList-style .myList-col {
	overflow: visible;
	text-overflow: ellipsis;
	display:inline-block;
}

/* datetimepicker */
.ui-timepicker-select {
	height: auto !important;        /* 시간 선택 영역 높이 자동 조정 */
}