body {
    margin: 0;
    height: 100vh;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    font-family: 'SUIT', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
    overflow-y: hidden;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

/* 텍스트만 드래그 허용하고 싶을 때 allow-to-drag-text 클래스 넣기! */
.allow-to-drag-text {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text
}

/* 크기 조절 */
.mh-46-custom {
    max-height: calc(100vh - 11rem);
}
.mh-15-custom {
    max-height: calc(100vh - 15rem);
}
.mh-calc-1704rem {
    max-height: calc(100vh - 17.04rem);
}
.mh-calc-22rem {
    max-height: calc(100vh - 22rem);
}
.mw-33 {
    min-width: 33rem;
}
.mw-52 {
    min-width: 52rem;
}
.mw-55 {
    min-width: 55rem;
}
.mw-67 {
    min-width: 67rem;
}
.mw-70 {
    min-width: 70rem;
}
.mw-71 {
    min-width: 71rem;
}
.mw-80 {
    min-width: 80rem;
}
.min-width-100 {
    min-width: 100rem;
}

/* 너비 길이 조절 */
.w-custom-25 { width: 3rem; }
.w-custom-41 { width: 4.1rem !important; }
.w-custom-43 { width: 4.3rem; }
.w-custom-56 { width: 5.6rem; }

/* 라벨 색상 변경 */
.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: rgb(114 114 114 / 46%);
}

/*  */
.txt_darkblue> a, .txt_darkblue {
    color: #405472;
}
.txt_bold {
    font-weight: 600 !important;
}

/* 모달 CSS */
.modal-title-custom {
    font-weight: bold;
    color: #2a2b6b;
}

/* 알림창 CSS */
.swal2-title-custom {
    font-size: 1.4rem; /* 제목 글씨 크기 */
}
.swal2-text-custom {
    font-size: 1rem; /* 텍스트 글씨 크기 */
    color: #212529bf;
}
.swal2-confirm-custom, .swal2-cancel-custom {
    border-radius: 99999px;
    padding: 12px 10px;
}
.swal2-confirm-custom {
    background-color: #c92f3ef2;
    color: #ffffff;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.swal2-confirm-custom:hover {
    background-color: #c03535;
}
.swal2-confirm-custom:active {
    background-color: #a62e2e;
}
.swal2-cancel-custom {
    background-color: #fff;
    color: #929292;
    border: 1px solid #c8c8c8;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.swal2-cancel-custom:hover {
    background-color: #837979;
    color: #fff;
}
/* 리스트 그룹 활성화 배경색 지정 */
.list-group-item.active {
    background-color: #414a58 !important;
    border-color: #414a58 !important;
}

/* 특정 너비 이하일 때, 회사 목록과 부서 목록 숨김 */
@media (max-width: 768px) {
    .dept-list, .company-list {
        display: none;
    }
}

/* 포커스 효과 제거 */
.form-control:focus, .form-select:focus {
    border-color: #dee2e6;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0);
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.no_result {
    height: 100px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 1.1em;
}

/* 수정하기 삭제하기 모달창 */
.custom-popup {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #f6f6f6;
    border-radius: 10px;
    padding: 30px 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* 검색창 */
.search-container {
    display: flex;
    align-items: center;
    position: relative;
    width: auto;
    border: 1px solid #ccc; /* 전체 컨테이너에 테두리 적용 */
    border-radius: 5px;
    transition: border 0.3s ease, width 0.3s ease, padding 0.3s ease; /* 테두리와 너비 전환 애니메이션 */
    box-sizing: border-box;
    overflow: hidden; /* 내부 요소가 넘치지 않도록 설정 */
}
.search-btn {
    background-color: #ffffff;
    color: #232020;
    border: none; /* 버튼의 테두리 제거 */
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 0; /* 버튼의 둥근 테두리 제거 */
    transition: transform 0.3s ease; /* 부드러운 이동 */
    z-index: 10; /* 버튼이 위에 위치 */
}
.search__input {
    position: relative;
    padding: 5px 0;
    width: 0;
    border: none; /* input의 테두리 제거 */
    box-sizing: border-box;
    transition: width 0.5s ease, padding 0.3s ease; /* 너비 전환 */
    outline: none; /* 클릭 시 외곽선 제거 */
}
/* 열릴 때 스타일 */
.search-container.open .search__input {
    width: 300px; /* 검색창이 넓어짐 */
    margin-right: 4px;
}
.search-container.open {
    border: 1px solid #ccc; /* 열렸을 때 테두리 스타일 유지 */
}

/* border */
.box-border {
    box-sizing: border-box;
}

/* paging */
.pagination a {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    font-size: 1.1em;
    line-height: 30px;
    color: #666;
    vertical-align: top;
    padding-top: 1px;
    text-decoration: none;
    cursor: pointer;
}

.pagination a.active:after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 8px;
    height: 1px;
    background: #4453e4;
}

.pagination a.active {
    font-weight: 700;
    color: #4453e4;
}

.pagination a:hover {
    color: #222;
}

.pagination a:hover:after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 8px;
    height: 1px;
    background: #000;
}

.pagination-btn {
    background-color: #fff;
    border-color: transparent !important;
    box-sizing: border-box;
    border: none;
}

.pagination-btn.disabled {
    cursor: not-allowed;
}

/* 체크박스 */
.form-check-input[type=checkbox] {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}
.form-check-input[type=checkbox]:disabled, .form-switch .form-check-input[type=checkbox]:disabled, .form-check-input[type=checkbox]:disabled + .form-check-label {
    pointer-events: auto;
    cursor: not-allowed;
}
.form-switch .form-check-input[type=checkbox] {
    cursor: pointer;
    width: 2em;
    height: 1em;
}

/* 부서 목록 액티브 효과 */
.data-list-container.active {
    background-color: #f7f7f7; /* 밝은 블루 */
    font-weight: bold;
    border-color: #f7f7f7;
}
/* 버튼 액티브 스타일 없애기 */
#data-tree button.btn:active, button.btn.bg-cool-100:active {
    color: var(--bs-btn-active-color);
    background-color: #f7f7f7;
    border-color: #f7f7f7;
}

.btn.hover\:\!bg-error-50:active {
    border-color: rgb(255 241 234/var(--tw-bg-opacity))
}

.btn.hover\:bg-choco-400:active {
    border-color: rgb(140 131 122 / var(--tw-bg-opacity));
    background-color: rgb(140 131 122 / var(--tw-bg-opacity));
}

.border_line {
    height: 1px;
    width: 100%;
    margin: 1em 0;
    --tw-bg-opacity: 1;
    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
}

.border_line_bottom {
    --tw-bg-opacity: 1;
    border-bottom: 1px solid rgb(233 233 233/var(--tw-bg-opacity));
}

.border_line_top {
    --tw-bg-opacity: 1;
    border-top: 1px solid rgb(233 233 233/var(--tw-bg-opacity));
}

.border_line_vertical {
    min-height: 1.2em;
    width: 1px;
    margin: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
}

.border_table_line_top {
    height: 1px;
    width: 100%;
    margin-top: 1em;
    --tw-bg-opacity: 1;
    background-color: #f2f2f2;
}

/* 기본적으로 아이콘 숨김 */
.data-list-container .hover-icon {
    opacity: 0; /* 투명하게 숨김 */
    transition: opacity 0.1s ease-in-out; /* 부드러운 애니메이션 */
}

/* 부모 요소에 hover하면 아이콘이 나타남 */
.data-list-container:hover .hover-icon {
    opacity: 1; /* 완전히 표시 */
}

.user_perm_role_list {
    grid-template-columns: 5fr 5fr;
    gap: 20px;
}

.dropdown-menu.dropdown-align-right {
    text-align: right;
}

.pg-header {
    height: 71px;
}