@charset "UTF-8";

:root {
	color-scheme: light only;
}

body{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.dataTables_scrollBody {
    border-left: 0!important;
    border-left-width: 0px !important;
    border-left-style: initial !important;
    border-left-color: initial !important;
}
.td-data,.td-map,.td-img{
	cursor: pointer;
}
.sorting_disabled{
	cursor: unset !important;
}
.dz-progress{display:none;}

.margin-zero-auto{
	margin: 0 auto !important;
}
.border-bottom-none{
	border-bottom: none !important;
}
.cursor-pointer{
	cursor: pointer !important;
}
.z-index-999{
	z-index: 999 !important;
}
.position-relative{
	position: relative !important;
}
.t-m-16px{
	top: -16px !important;
}
.l-m-6px{
	left: -6px !important;
}
.w-26px{
	width: 26px !important;
}
.fs-3-8r{
	font-size: 3.8rem!important;
}
.fs-2-2r{
	font-size: 2.2rem!important;
}
.bb-none{
	border-bottom: none;
}

@media (max-width: 1200px){
	.p-0-max-1200{
		padding: 0 !important;
	}
	.d-none-max1200{
		display: none;
	}
}
@media (max-width: 991.98px) {
	.p-18-max-991{
		padding: 18px !important;
	}
	.p-16-max-991{
		padding: 16px !important;
	}
	.fs-30-max-991{
		font-size: 30px !important;
	}
	.fs-18-max-991{
		font-size: 18px !important;
	}
	.fs-16-max-991{
		font-size: 16px !important;
	}
	.me-10-max-991{
		margin-right: 10px !important;
	}
	.me-5-max-991{
		margin-right: 5px !important;
	}
	.d-mwl-none {
        display: none
    }
    .fs-1-max-991{
    	font-size: calc(1.3rem + .6vw)!important
    }
}
@media (max-width: 575.98px) {
	.fs-1-max-557{
    	font-size: calc(1.3rem + .6vw)!important
    }
	.d-none-sm {
		display:none !important;
	}
}

@media (min-width: 1200px){
	.min-w-150px-min1200 {
		min-width: 150px !important;
	}
	.w-150px-min1200 {
		width: 150px !important;
	}
	.mw-150px-min1200 {
		max-width: 150px !important;
	}
	.min-w-120px-min1200 {
		min-width: 120px !important;
	}
	.w-120px-min1200 {
		width: 120px !important;
	}
	.mw-120px-min1200 {
		max-width: 120px !important;
	}
	.w-12_5percent-min1200{
		width: 12.5%;
	}
	.mb-minus-50px-min1200{
		margin-bottom: -50px !important;
	}
}
@media (min-width: 992px) {
	.width-xl-10percent {
		width: 10% !important;
	}
	.width-xl-13percent {
		width: 13% !important;
	}
}
@media (min-width: 576px){
	.display-flex{
		display: flex !important;
	}
}

.width-36-percent {
    flex: 0 0 auto;
    width: 36%
}
.width-32-percent {
    flex: 0 0 auto;
    width: 32%
}
.word-keep-all {
	word-break: keep-all;
}
.text-transform-none {
	text-transform: none !important;
}
.dataTables_scroll > .dataTables_scrollHead .border-bottom-1em-solid {
	border-bottom: .1em solid !important;
}
.border-right-1em-dashed {
	border-right: .1em dashed !important;
}
.border-left-1em-solid {
	border-left: .1em solid !important;
}
.border-right-1em-solid {
	border-right: .1em solid !important;
}
.border-top-1em-solid {
	border-top: .1em solid !important;
}

.border-right-light-1em-solid {
	border-right: #cccccc .1em solid !important;
}
.border-top-light-1em-solid {
	border-top: #cccccc .1em solid !important;
}
.border-bottom-light-1em-solid {
	border-bottom: #cccccc .1em solid !important;
}

[data-bs-theme='light'] .bold-color{
	color: #071437 !important;
}
[data-bs-theme='dark'] .bold-color{
	color: #f5f8fa !important;
}
[data-bs-theme='light'] .bg-color-light-gray{
	background-color: #f5f8fa !important;
}
[data-bs-theme='dark'] .bg-color-light-gray{
	background-color: #1b1b29 !important;
}
[data-bs-theme="light"] .dataTables_scrollHead {
	background-color: #f5f8fa;
}
[data-bs-theme="dark"] .dataTables_scrollHead {
	background-color: #1b1b29;
}
[data-bs-theme="light"] .notice-bell {
	background-color: #aedef9;
}
[data-bs-theme="dark"] .notice-bell {
	background-color: #0f3f62;
}
.transform-864-m36{
	transform: translate(864px, -36px) !important;
}

.fs-15px{
	font-size: 15px !important;
}
.w-0 {
	width: 0px !important;
}
.min-w-120px {
	min-width: 120px !important;
}
.w-120px {
	width: 120px !important;
}
.max-w-120px {
	max-width: 120px !important;
}

.h-0 {
	height: 0px !important;
}

.vertical-align-middle{
	vertical-align: middle;
}
	
.height-87vh {
	height: 87vh;
}

.width-50percent {
	width: 50%;
}
.width-90percent {
	width: 90%;
}
.width-80percent {
	width: 80%;
}
.width-83percent {
	width: 83.33333333%;
}
.width-77percent {
	width: 77%;
}
.width-73percent {
	width: 73.33333333%;
}
.width-30percent {
	width: 30%;
}
.width-20percent {
	width: 20%;
}
.width-13percent {
	width: 13%;
}
.width-10percent {
	width: 10%;
}
.width-12_5percent {
	width: 12.5%;
}
.width-7percent {
	width: 6.66666667%;
}
.flex-auto {
	flex: 0 0 auto;
}

/* [VOLTEND] 검색 카드 수직 정렬 보정 — 검색 버튼(#btn_search)을 포함한 검색영역에서
   입력창과 검색 버튼의 높이/여백을 맞춰 한 줄로 정렬(출입승인 페이지와 동일 결과).
   중첩 구조(col-xl-10 + col-xl-2 버튼) 페이지들의 어긋남 보정. :has 미지원 브라우저는 무시(기존 유지). */
@media (min-width: 1200px) {
	.card-body > .row.align-items-center:has(#btn_search) > .col-xl-10 .mb-3 {
		margin-bottom: 0 !important;
	}
	.card-body > .row.align-items-center:has(#btn_search) > .col-xl-10 > .row {
		row-gap: 0.75rem;
	}
}

/* =====================================================================
   [VOLTEND 브랜드 테마 · 네이비] 시안 B(네이비) 반영
   - 메인 컬러: 앱 네이비 #262A3F · #3D4263 (버튼/링크/활성)
   - 화이트 사이드바 + 네이비 로고, 밝은 회색 콘텐츠 배경, 흰 카드(라운드+소프트섀도우)
   ===================================================================== */
:root,
[data-bs-theme="light"] {
	--bs-primary: #2E3350;
	--bs-primary-active: #1F2336;
	--bs-primary-light: #EAF1FF;
	--bs-primary-inverse: #ffffff;
	--bs-primary-rgb: 46, 51, 80;
	--bs-primary-clarity: rgba(38, 42, 63, 0.2);
	--bs-primary-text-emphasis: #1F2336;
	--bs-primary-bg-subtle: #EDEEF3;
	--bs-primary-border-subtle: #BFC3D0;
	--bs-link-color: #2E3350;
	--bs-link-color-rgb: 46, 51, 80;
	--bs-link-hover-color: #1F2336;
	--bs-link-hover-color-rgb: 31, 35, 54;
	--bs-app-bg-color: #EBEEF3;
	--bs-body-bg: #EBEEF3;
	/* 입력창·드롭다운은 흰색(바탕 회색과 구분) — 기본값 var(--bs-body-bg) 회색 상속 해제 */
	--bs-input-bg: #ffffff;
	--bs-input-bg-solid: #ffffff;
	--bs-dropdown-bg: #ffffff;
	/* 모달 배경 흰색(기본값 var(--bs-body-bg) 회색 상속 해제) */
	--bs-modal-bg: #ffffff;
}

/* 모달 콘텐츠 흰 배경 */
.modal-content { background-color: #ffffff !important; }

/* ───── 검색/조회 버튼: 연한 파랑(hover 시 진한 파랑) ───── */
.btn.btn-light-primary {
	--bs-btn-color: #125EF2;
	--bs-btn-bg: #EAF1FF;
	--bs-btn-border-color: #EAF1FF;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #125EF2;
	--bs-btn-hover-border-color: #125EF2;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #0B4FD1;
	--bs-btn-active-border-color: #0B4FD1;
}

/* ───── 검색/폼 입력창 + 드롭다운 패널: 흰 배경 ───── */
.form-control,
.form-select,
.select2-container .select2-selection {
	background-color: #ffffff !important;
}
/* 드롭다운/셀렉트 패널 바탕 흰색 */
.dropdown-menu,
.select2-dropdown,
.select2-container .select2-dropdown,
.select2-results,
.select2-results__options {
	background-color: #ffffff !important;
}

/* ───── 선택(select2)·드롭다운 hover: 연한 파랑 ───── */
.select2-container .select2-selection:hover,
.form-select:hover {
	background-color: #EAF1FF !important;
}
.select2-container .select2-results__option--highlighted,
.select2-results__option--highlighted,
.select2-results__option:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background-color: #EAF1FF !important;
	color: #15181F !important;
}

/* 콘텐츠 영역 배경 — 흰 카드가 또렷이 구분되도록 회색 */
body.app-default,
.app-default .wrapper,
.app-default .content,
.app-default #kt_content,
.app-default #kt_wrapper {
	background-color: #EBEEF3 !important;
}

/* ───── 사이드바: 시안 B 화이트 사이드바 ───── */
.aside {
	background: #ffffff !important;
	border-right: 1px solid #EEF0F4 !important;
	box-shadow: 1px 0 10px rgba(38, 42, 63, 0.04);
}
/* 로고 헤더 영역: 흰 배경(Metronic 기본 다크 배경 제거) + 실선 없음 */
.aside .aside-logo {
	background: #ffffff !important;
	border-bottom: 0 !important;
	border-top: 0 !important;
}
/* 네이비 로고(aside.html 에서 logo-navy.png 지정) 폭 보정 */
.aside .aside-logo .logo { width: 84px !important; height: auto !important; }
/* 최상위 레일 메뉴: 회색 글자/아이콘 */
.aside .menu > .menu-item > .menu-link .menu-title { color: #6B7280 !important; }
.aside .menu > .menu-item > .menu-link .menu-icon i,
.aside .menu > .menu-item > .menu-link .menu-icon .ki-outline { color: #9499A6 !important; }

/* ───── 시안 B: 와이드 라벨형 사이드바(데스크톱 lg+) — 시안과 동일한 콤팩트 비율 ───── */
@media (min-width: 992px) {
	.aside { width: 236px !important; }
	/* 로고: 좌측 정렬 + 시안 비율(높이 26px) */
	.aside .aside-logo { justify-content: flex-start !important; padding: 22px 0 16px 22px !important; }
	.aside .aside-logo > a { justify-content: flex-start !important; }
	.aside .aside-logo .logo { height: 26px !important; width: auto !important; }
	/* 메뉴 래퍼: 상하 큰 여백(my-lg-5) 축소 */
	.aside #kt_aside_menu_wrapper { margin-top: 6px !important; margin-bottom: 6px !important; }
	/* 메뉴 아이템: py-2 제거해 행 간격 좁힘 */
	.aside .menu > .menu-item { padding: 0 !important; margin: 1px 10px !important; }
	/* 아이콘+라벨 가로 배치(좌측 정렬) + 콤팩트 패딩 */
	.aside .menu > .menu-item > .menu-link.menu-center {
		flex-direction: row !important;
		justify-content: flex-start !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 10px 12px !important;
		border-radius: 10px;
	}
	/* 아이콘 하단 여백(세로 레이아웃 잔재) 제거 */
	.aside .menu > .menu-item > .menu-link.menu-center .menu-icon { margin-bottom: 0 !important; }
	.aside .menu > .menu-item > .menu-link .menu-icon {
		margin-right: 11px !important;
		width: 20px !important;
		justify-content: center !important;
	}
	.aside .menu > .menu-item > .menu-link .menu-title {
		display: inline-flex !important;
		font-size: 14px !important;
		font-weight: 600 !important;
	}
	/* 아이콘 크기 과대(fs-2x) 보정 → 20px */
	.aside .menu > .menu-item > .menu-link .menu-icon i { font-size: 1.2rem !important; }
	/* 하단 아이콘 바: 가로 균등 */
	.aside .aside-footer .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-around !important; align-items: center; padding: 10px 14px 0; border-top: 1px solid #F0F2F6; margin: 0; }
	.aside .aside-footer .row > div { flex: 0 0 auto !important; width: auto !important; }
	.aside .aside-footer .btn { width: 36px !important; height: 36px !important; }
	/* 섹션 헤더(관제/운영) — 콤팩트 */
	.aside .menu .vt-section { padding: 0 !important; margin: 0 !important; }
	.aside .menu .vt-section .menu-content { padding: 12px 22px 3px !important; }
	.aside .menu .vt-section .menu-section {
		font-size: 11px; font-weight: 700; letter-spacing: .4px;
		color: #C2C7D2; text-transform: uppercase;
	}
}
/* 슬림(모바일 드로어)에서는 섹션 헤더 숨김 — d-lg-block 로 처리되나 보강 */
.aside .menu .vt-section { display: none; }
@media (min-width: 992px) { .aside .menu .vt-section { display: block; } }

/* ───── 상태 배지: 메인(네이비)과 분리해 브랜드 블루 유지(시안의 잠금해제 블루) ───── */
.badge.badge-light-primary { background-color: #EAF1FF !important; color: #125EF2 !important; }
.badge.badge-primary { background: #125EF2 !important; color: #ffffff !important; border-color: #125EF2 !important; }

/* 하위 탭(플라이아웃 드롭다운): 흰 배경 + 진한 글자 */
.aside .menu-sub.menu-sub-dropdown {
	background: #ffffff !important;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(38, 42, 63, 0.18);
}
.aside .menu-sub .menu-item .menu-link .menu-title { color: #2B2F42 !important; font-weight: 600; }
.aside .menu-sub .menu-item .menu-link .menu-bullet .bullet { background-color: #B0B5C1; }
.aside .menu-sub .menu-item .menu-link:hover,
.aside .menu-sub .menu-item .menu-link.active,
.aside .menu-sub .menu-item.here > .menu-link {
	background-color: #EAF1FF !important;
	border-radius: 8px;
}
.aside .menu-sub .menu-item .menu-link:hover .menu-title,
.aside .menu-sub .menu-item .menu-link.active .menu-title {
	color: #262A3F !important;
}
.aside .menu-sub .menu-item .menu-link:hover .menu-bullet .bullet,
.aside .menu-sub .menu-item .menu-link.active .menu-bullet .bullet { background-color: #262A3F; }
/* 활성/호버: 네이비 틴트 + 네이비 글자 */
.aside .menu > .menu-item > .menu-link {
	border-radius: 12px;
	transition: background-color .15s ease;
}
/* 선택(활성) 탭: 연한 파랑(로그인 입력창 배경과 동일) */
.aside .menu > .menu-item > .menu-link.active,
.aside .menu > .menu-item.here > .menu-link,
.aside .menu > .menu-item.show > .menu-link {
	background-color: #EAF1FF !important;
}
/* 호버: 은은한 회색 */
.aside .menu > .menu-item > .menu-link:hover {
	background-color: #F2F5FB !important;
}
.aside .menu > .menu-item > .menu-link.active .menu-title,
.aside .menu > .menu-item > .menu-link:hover .menu-title,
.aside .menu > .menu-item > .menu-link.active .menu-icon i,
.aside .menu > .menu-item > .menu-link:hover .menu-icon i {
	color: #262A3F !important;
}
/* 사이드바 하단 아이콘 버튼 */
.aside .aside-footer .btn i,
.aside .aside-footer .btn .ki-outline { color: #9499A6 !important; }
.aside .aside-footer .btn:hover i { color: #262A3F !important; }

/* ───── 카드: 회색 바탕 위 또렷한 흰색 패널(시안처럼 구분) ───── */
.card,
.card.card-custom,
.card.card-flush {
	background-color: #ffffff !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 24px rgba(38, 42, 63, 0.08) !important;
	border: 1px solid #E8EBF1 !important;
}

/* ───── 버튼: 네이비 그라데이션(시안 B) ───── */
.btn.btn-primary {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: #2E3350;
	--bs-btn-border-color: #2E3350;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #1F2336;
	--bs-btn-hover-border-color: #1F2336;
	--bs-btn-active-bg: #1F2336;
	--bs-btn-active-border-color: #1F2336;
	background: linear-gradient(135deg, #262A3F, #3D4263);
	border: none;
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
	background: linear-gradient(135deg, #20233a, #343a5a);
}

/* ───── 로그인 배경 ───── */
.app-blank { background: #ffffff !important; }

/* ───── 테이블 가독성: 헤더(text-muted) 흐림 보정 + 본문 약간 진하게 ───── */
.table > thead > tr > th,
.table thead th {
	color: #3F4254 !important;   /* 기존 text-muted(#99A1B7) → 진한 회색 */
	font-weight: 700;
}
/* 본문 셀(기존 text-gray-600) 가독성 소폭 상향 */
.table > tbody > tr > td {
	color: #2B2F42;
}