body {
	font-size: 13px;
}

th {
	background-color: #eeeeee !important;
	font-weight: 900;
	padding: 5px 5px;
}

td {
	padding: 5px 5px;
}

.header-label {
	background-color: #eeeeee;
	padding: 1px 6px;
	border-radius: 5px;
	border: 1px solid #dddddd;
	font-weight: 900;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


#page {
	height: 100vh;
	background-color: #ffffff;
	display: grid;
}

#leftcol {
	overflow: auto;
	grid-area: leftcol;
}

#dragbar {
	background-color: #cccccc;
	grid-area: dragbar;
	cursor: ew-resize;
}

#rightcol {
	overflow: auto;
	grid-area: rightcol;
}

/* layout 1-2
	leftcol / dragbarH	/ rightcolT
	leftcol	/ dragbarH	/ dragbarV
	leftcol	/ dragbarH	/ rightcolB
*/

#dragbarH {
	background-color: #cccccc;
	grid-area: dragbarH;
	cursor: n-resize;
}

#dragbarV {
	background-color: #cccccc;
	grid-area: dragbarV;
	cursor: e-resize;
}

#rightcolT {
	overflow: auto;
	grid-area: rightcolT;
}

#rightcolB {
	overflow: auto;
	grid-area: rightcolB;
}

/* 신규 resizable panel */
.page {
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
}
/*
.dragBar[data-type="width"] {
	background-color: #cccccc;
	grid-area: dragbar;
	cursor: ew-resize;
	width: 5px;
	height: 100%;
}
.dragBar[data-type="height"] {
	background-color: #cccccc;
	grid-area: dragbar;
	cursor: ns-resize;
	width: 100%;
	height: 5px;
}
*/
.left{
	/* 중앙 정렬 */
	overflow: auto;
	align-items: center;
	display: flex;
	justify-content: center;
}
.right{
	/* left가 차지하고 남은 공간에 따라 유동적으로 변화 */
	flex: 1;
	/* 중앙 정렬 및 하위 요소 배치를 column 식으로 내려가듯이 배치*/
	overflow: auto;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.top {
	width: 100%;
	/* 중앙 정렬 */
	overflow: auto;
	align-items: center;
	justify-content: center;
}
.bottom {
	width: 100%;
	/* top이 차지하고 남은 공간에 따라 유동적으로 변화 */
	/* 중앙 정렬 */
	overflow: auto;
	align-items: center;
	justify-content: center;
}




/*
	동혁 수정
*/
.custom-container {
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	display: grid;
}
.custom-item {
	width: 100%;
	height: 100%;
	padding: 5px;
}
.dragBar[data-type="width"] {
	background-color: #cccccc;
	cursor: ns-resize;
	width: 100%;
	height: 100%;
}
.dragBar[data-type="height"] {
	background-color: #cccccc;
	cursor: ns-resize;
	width: 100%;
	height: 100%;
}
/*
*	sideBar 관련 css
*/
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #d2f4ea;
}

.btn-toggle2:hover,
.btn-toggle2:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 0.5em;
  line-height: 0;
  content: url("/resources/assets/vendor/fontawesome/svgs/solid/angle-right.svg");
  transition: transform .35s ease;
  margin-right: 5px;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #d2f4ea;
}






/* 별 toggle */
.custom-toggle-star {
	display: none;
}
.custom-toggle-star:checked ~ label {
	height: 15px;
	cursor: pointer;
	content: url('/resources/assets/vendor/fontawesome/svgs/solid/star-yellow.svg');
}
 	
.custom-toggle-star ~ label {
	height: 15px;
	cursor: pointer;
	content: url('/resources/assets/vendor/fontawesome/svgs/regular/star-yellow.svg');
}






/* 스크롤바 css */
*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
*::-webkit-scrollbar-thumb {
	background-color: #bbb;
	border-radius: 5px;
}
*::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.1);
}





/* 파일 존 css */
.fileZone {
	border: 1px solid #ffffff;
	background-repeat: no-repeat;
	background-image: url('/resources/assets/images/dragNDrop.png');
	background-position: center;
}




.rainbowButton {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, red);
    font-weight: 600;
    font-size: 20px;
    animation: animatedTextGradient 2.5s linear infinite;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
}

@keyframes animatedTextGradient {
    to {
        background-position: -200% center;
    }
}



/*
	datatable
*/
.dataTable th,
.dataTable td {
	padding: 5px 5px;
}



.image-container {
    width: 100%;
    overflow: hidden; /* 이미지가 밖으로 넘치지 않도록 */
}

.animated-image {
    width: 200px; /* 이미지 크기 */
    animation: moveAndFade 5s linear infinite; /* 5초 동안 애니메이션 반복 */
}

@keyframes moveAndFade {
    0% {
        transform: translateX(-100%); /* 화면 밖 왼쪽에서 시작 */
        opacity: 0; /* 완전히 투명 */
    }
    50% {
        transform: translateX(50%); /* 화면 중앙으로 이동 */
        opacity: 1; /* 완전히 나타남 */
    }
    100% {
        transform: translateX(100%); /* 화면 오른쪽으로 이동 */
        opacity: 0; /* 다시 투명 */
    }
}





/*
	bootstrap
*/
.btn {
	font-size: 13px !important;
}

input {
	font-size: 13px !important;
	padding: 1px 6px !important;
}

select {
	font-size: 13px !important;
	padding: 1px 21px 1px 6px!important;
}

textarea {
	font-size: 13px !important;
}

.btn-group .btn-outline-light {
	padding: 0 0.9rem !important;
	border: 1px solid #bbbbbb;
	height: 32px;
}

.btn-group .btn-outline-light:disabled {
	border: 1px solid #bbbbbb;
	opacity: 1;
	height: 32px;
}

.btn-group .btn-outline-danger {
	padding: 0 0.9rem !important;
	border: 1px solid #bbbbbb;
	height: 32px;
}

.btn-group .btn-outline-danger:disabled {
	border: 1px solid #bbbbbb;
	opacity: 1;
	height: 32px;
}

/*.btn-auth-red{
    --bs-btn-color:#ffffff;
    --bs-btn-bg:#dc3545;
}

.btn-auth-blue{
    --bs-btn-color:#ffffff;
    --bs-btn-bg:#318bcb;
}*/

div.dt-button-collection {
    max-height: 30vh;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.table-bordered .datatable {
  border: 1px solid #dee2e6;
}
.table-bordered th,
.table-bordered td {
	border: 1px solid #dee2e6;
	border-bottom-width: 0px;
	
}

.modal-body hr.my-2 {
	border-top: 1px solid #e0ecef;
	margin: 15px 0;
}

.loader {
  position: absolute;
  top: 0px;
  width: 100px;  /* 로딩바 크기 조절 */
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#ffffff 10%, #2F5597);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
  animation: spin 1.5s linear infinite;
}

/* 가운데 이미지 스타일 */
.loader-center {
  position: relative;
  width: 100px;  /* 로딩바 크기 조절 */
  height: 100px;
}

.loader-center img {
  width: 70px; /* 이미지 크기 */
  height: 20px;
}

/* 애니메이션 */
@keyframes spin {
  to { transform: rotate(1turn); }
}
/* rowsGroup 병합 테이블: 선택 행을 덮고 있는 병합 셀(그룹 첫 행 소속)에 선택 하이라이트를 함께 적용
   (색상은 datatables.css 의 tr.selected > * 규칙과 동일하게 유지) */
table.dataTable > tbody > tr > td.rowspan-selected {
  box-shadow: inset 0 0 0 9999px #0b52d7;
  color: white;
}
/* 기준 초과 수치(예: 공사관리 집행률 100% 초과) 강조 — 값 텍스트만 빨강 */
table.dataTable > tbody > tr > td.rate-over {
  color: #D32F2F;
  font-weight: 700;
}
/* 선택 행은 배경이 파랑(#0b52d7)으로 덮이므로 빨강은 안 읽힌다 → 노랑으로 전환 */
table.dataTable > tbody > tr.selected > td.rate-over,
table.dataTable > tbody > tr > td.rate-over.rowspan-selected {
  color: #FFEB3B;
}