tr.pq-grid-oddRow.red-background, tr.red-background {
    background-color: #ff0000;
}
tr.pq-grid-oddRow.red-background td, tr.red-background td {
    color: white;
}


/* 레이어 팝업 배경 및 기본 스타일 */
.layerPopup {
    position: fixed; /* 스크롤 시 위치 고정 */
    top: 50%; /* 화면 중앙에서 시작 */
    left: 50%; /* 화면 중앙에서 시작 */
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    z-index: 99; /* 다른 요소보다 앞에 표시 */
    display: none; /* 기본적으로 숨김 */
    background-color: rgba(0, 0, 0, 0.7); /* 반투명한 배경 */
    width: 100%; /* 화면 전체 너비 */
    height: 100%; /* 화면 전체 높이 */
    overflow: auto; /* 콘텐츠가 넘칠 경우 스크롤 */
}

/* 팝업 내용 스타일 */
.popupContent {
    background-color: white;
    margin: auto;
    padding: 2px;
    border: 1px solid #888;
    width: 50%; /* 원하는 너비로 설정 */
    position: relative;
}

/* 닫기 버튼 스타일 */
.closeBtn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closeBtn:hover,
.closeBtn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.grid-table th.ico-essential .pq-td-div:before {
	display:inline-flex;content:"*";color:var(--bs-red);
}

.ui-dialog {
	min-width:300px;
}

.ui-tooltip {
	color: var(--bs-red);
	background-color:var(--bs-white);
	opacity: .9;
    font-weight: bold;
    z-index:99;
}
.ui-tooltip .ui-tooltip-content {
    padding: 0 3px 3px 3px;
}
span.pq-tooltip-icon { top:4px; }

.hide { display:none; }

.pl-5 { padding-left: 5px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.m-0 { margin:0; }
.mt-0 { margin-top: 0px; }
.mt-10 { margin-top: 10px; }
.mb-0 { margin-bottom: 0px; }
.mb-10 { margin-bottom: 10px; }

.bt-1 {
	border-top: 1px solid var(--bs-blue);
}
.grid-table table tbody td .btn:not(.m-0),
.table-view dd .btn:not(.m-0) {
	margin-top: -10px;
    margin-bottom: -10px;
}

.table-view dd input:not(.m-0),
.table-view dd select:not(.m-0) {
	margin-top: -10px;
    margin-bottom: -10px;
}
.grid-table table tr.pq-row-hidden { width: initial; }

.drag-drop-area {
    border: 2px dashed #ddd;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

input[type=text].datepicker, 
input[type=text].datepicker-start, 
input[type=text].datepicker-end {
	max-width:102px;
	text-align: center;
}
html,
body {
	font-variant-numeric: tabular-nums;
}

.flex-center {
	display: flex;
    justify-content: center;
    align-items: center;
}

.report-box {
	border: solid 3px #0587C1;
	width:730px;
	padding:15px;
}

@media (max-width: 800px) {
	#header, #layout-container { min-width:800px}
}