.container-body { margin: 0 auto; width: 80%; padding: 0; display: flex; align-content: center;}
.container-body * { font-size: 13px !important; }
.container-body .main_container { width: 100%; padding: 10px; }

/* .flexArea { display: flex; align-items: center; width: 100%; } */
/* .flexArea > * {height: 35px;} */
/* .flexArea > label { font-weight: bold; width: 25%; text-align: left; flex-shrink: 0; } */
form label {
    align-items: center;
    text-align: left;
    height: 100%;
    width: 75px;
    flex-shrink: 0;
    font-weight: bold;
    display: flex;
    margin-top: 10px;
}

form input[type="text"] {
    padding: 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    text-align: center;
}

form input[type="number"] {
    padding: 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    text-align: center;
}

form input[readonly] {
    background-color: white;
    color: #ccc;
}

form select {
    padding: 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    text-align: center;
}

form input[type="date"] {
    padding: 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    text-align: center;
}

.oneGroup {
    display: flex;
    align-items: center;
    gap: 10px; 
}

.twoGroup {
    display: flex;
    align-items: center;
    gap: 10px;
}

.twoGroup > input[type="text"] {
    padding: 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    text-align: center;
}

.twoGroup .oneArea  {
    width: 30%; 
    text-align: center;
}

.twoGroup .twoArea  {
    width: 50%; 
    text-align: center;
    padding-left: 10px;
}

.threeGroup {
    display: flex;
    align-items: center;
    gap: 10px; 
}

.threeGroup .treeArea  {
    width: 30%; 
    text-align: center;
    padding-left: 10px;
}

.rowArea { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 10px;
}

.rowArea label {
    align-items: center;
    text-align: left;
    height: 100%;
    width: 75px;
    flex-shrink: 0;
    font-weight: bold;
}

/* 기본 파일 입력은 숨기기 */
.fileDiv {
    width: 100%;
}
.fileDiv > input[type="file"] {display: none;}
.fileDiv > input[type="button"] {display: none;}
.fileDiv > input[type="text"] {
    padding: 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    text-align: left;
    width: 100%;
}
.fileDiv > input[readonly] {
    background-color: white;
    color: #ccc;
}

.fileDiv > label:not([for^="file-upload"]) {
    align-items: center;
    text-align: left;
    height: 100%;
    width: 75px;
    flex-shrink: 0;
    font-weight: bold;
}

/* 파일 선택 버튼 스타일 */
/* .custom-file-upload {
    background-color: #DAE3F3;
    color: black;
    padding: 0px 35px; 
    align-items: center;
    text-align: left;
    height: 100%;
    border-width: 100%;
} */
 
.custom-file-upload {
    display: block;
    width: 100%;
    text-align: center; 
    padding: 8px;     
    background-color: white; 
    color: #007bff;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box; 
    border: 1px solid #007bff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.custom-file-upload:hover {
    background-color: #007bff;
    color: white;
}

/* 미리보기*/
.fileDiv > img {
    width: 100px;
    height: auto;
    border: 1px solid #ccc;
    padding: 6px;
    box-sizing: border-box;
    text-align: center;
    display: none;
    
}

.fileDiv > .uploaded-image-preview {
    display: none;
}
.fileDiv > img:not([src=""]) + .uploaded-image-preview {
    display: block;
}

#fileStrForm label[for="carPass"] {
    align-items: center;
    text-align: left;
    height: 100%;
    width: 75px;
    flex-shrink: 0;
    font-weight: bold;
}

/* 모달팝업 */
#empTable > thead { 
  background-color: hsl(215, 30%, 74%); 
  color: white; 
  position: sticky;
  top:  0;
  /* z-index: 2000; */
}

#empGridPopup {
  font-size: 14px;
  padding: 8px;
  text-align: center;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ccc;
  pointer-events: auto;
  cursor: pointer;
  height: 590px !important;
}

#popempTable {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    overflow-y: auto;
    display: block;
    max-height: 480px; 
}

#deptTable > thead { 
  background-color: hsl(215, 30%, 74%); 
  color: white; 
  position: sticky;
  top:  0;
  /* z-index: 2000; */
}

#deptGridPopup {
  font-size: 14px;
  padding: 8px;
  text-align: center;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ccc;
  pointer-events: auto;
  cursor: pointer;
  height: 590px !important;
}

#popDeptTable {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    overflow-y: auto;
    display: block;
    max-height: 480px; 
}

.ui-dialog {
  position: fixed;
  top: 300px  !important; /* 원하는 위치로 조정 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.ui-dialog-buttonset {
  text-align: center;
  float: none !important;
  display: block;
}

.ui-dialog .ui-dialog-titlebar-close {
  top: 10% !important;
}

.ui-dialog .ui-dialog-content {
    text-align: center;
}

/* 미리보기 */
#uploaded-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
#uploaded-image-preview img {
    border: 1px solid #ccc;
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}

/* 미리보기 */
#uploaded-image-preview2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
#uploaded-image-preview2 img {
    border: 1px solid #ccc;
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}