html {
    font-size: 13px;
}

.avatar-xlw {
    width: 11rem!important;
}

.ns-logo-image-light .ns-logo-image-dark {
    width: 11rem;
    object-fit: contain!important;
}

.ns-icon-image-light .ns-icon-image-dark {
    object-fit: contain!important;
}

.form-select.disabled {
    background-color: #2f3235;
    opacity: 1
}

.tom-select-custom .ts-wrapper.form-select .ts-control,.tom-select-custom .ts-wrapper.multi .ts-control.has-items.hs-select-single-multiple {
    padding: .3125rem 1rem .3125rem 1rem!important;
}

.input-group-sm > .ts-wrapper.multi.has-items .ts-control, .ts-wrapper.form-select-sm.multi.has-items .ts-control, .ts-wrapper.form-control-sm.multi.has-items .ts-control {
    padding-top: calc((calc(2.5em + 0.5rem + 2px) - (1.5 * 0.875rem) - 4px) / 2) !important;
}

.form-control[readonly] {
    background-color: #2f3235!important;
    opacity: 1
}

span.tagify__input {
    color: var(--bs-body-color)!important;
}

span.tagify__input::before {
    line-height: 1.5rem!important;
    color: var(--bs-body-color)!important;
}

span.tagify__input::after {
    color: var(--bs-body-color)!important;
}


span.tagify__input:focus:empty::before {
    color: var(--bs-body-color)!important;
    opacity: .5!important;
}

.tagify {
    padding: 0 0!important;
}

.table-lg>:not(caption)>*>* {
    padding: 0.55rem!important;
}

.avatar-4by3 {
    border-radius: 0!important;
}

/* zTree Customization */
.node_name {
    font-size: 0.875rem;
    padding-left: 0.25rem;
}

.ztree li {
    list-style: none;
    font-size: 0.875rem;
}

.ztree li span {
    margin-right: 0.875rem;
}

.ztree li a {
    padding: 0.25rem 0.125rem;
    margin:0;
    cursor:pointer;
    height:1.6rem;
    color:var(--bs-body-color);
    background-color: transparent;
    text-decoration:none;
    vertical-align:top;
    display: inline-block;
    border:1px transparent solid;
}

.ztree li a.curSelectedNode {
    padding: 0.25rem 0.125rem;
    font-weight: 600;
    background-color: rgba(255,255,255,.075);
    color: white;
    height:1.6rem;
    border:none;
    border-radius: 0.2rem;
}

.ztree li span.button.switch {
    margin-top: 0.12rem;
    width:18px;
    height:18px
}

.ztree li span.button.ico_docu {
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.user_ico_docu {
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.system_ico_docu {
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.board_ico_docu {
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.ico_open{
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.user_ico_open{
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.ico_close{
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.user_ico_close{
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
}

.ztree li span.button.edit {
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
    color:var(--bs-body-color);
}

.ztree li span.button.remove {
    padding: 0.55rem 0.2rem;
    font-family: bootstrap-icons !important;
    background-image: none;
    background-position : 0px 0px;
    font-weight: 300;
    margin-right: 0.1rem;
    color: #ed4c78;
}

.ztree li span.button.ico_close:before {
    content: "\f3d1";
}

.ztree li span.button.ico_open:before {
    content: "\f3d8";
}

.ztree li span.button.user_ico_open:before {
    content: "\f4de";
}

.ztree li span.button.user_ico_close:before {
    content: "\f4de";
}

.ztree li span.button.remove:before {
    content: "\f659";
}

.ztree li span.button.edit:before {
    content: "\f4ca";
}

.ztree li span.button.ico_docu:before {
    content: "\f3d1";
}

.ztree li span.button.user_ico_docu:before {
    content: "\f4de";
}

.ztree li span.button.system_ico_docu:before {
    content: "\f6a6";
}

.ztree li span.button.board_ico_docu:before {
    content: "\f477";
}

.ztree li a input.rename {
    min-height: calc(1.4285714286em + calc(1px * 2));
    border-radius: 0.2rem;
    margin: -0.2rem -0.25rem;
    color:var(--bs-body-color);
    background-color: #25282a;
}

.ztree li a input.rename:focus {
    border-width: 0;
}

table.dataTable {
    border-collapse: collapse;
}

table.dataTable.no-footer {
    border-bottom: var(--bs-card-border-color);
}

.thead-light th {
    background-color: #25282a!important;
}

.table-responsive {
    border: .0625rem solid #2f3235;
}

table.dataTable tbody tr {
    background-color: var(--bs-body-bg);
}

table.dataTable tbody a {
    text-decoration: underline;
}

table.dataTable tbody tr.selected {
    color: rgba(255,255,255,.7);
    background-color: rgba(255,255,255,.075)
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td,
table.dataTable.cell-border thead th,
table.dataTable.cell-border thead td{
    border: .0625rem solid #2f3235;
}

table.dataTable.cell-border tbody th>:not(:first-child),
table.dataTable.cell-border tbody td>:not(:first-child){
    padding-right: 1rem!important;
}

table.dataTable.cell-border tbody td .badge {
    padding-right: 0.65rem !important;
}

table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
    border-left: .0625rem solid #2f3235;
}

table.dataTable.cell-border tbody tr td:last-child {
    border-right: .0625rem solid #2f3235;
}

table.dataTables_empty {
    border : none!important;
}

.dataTables_wrapper .dataTables_processing {
    color: rgba(255,255,255,.7);
    background-color: transparent!important;
    background: none;
    text-align: center !important;
}

.tom-select-custom .ts-wrapper.form-select.single .ts-control,.tom-select-custom .ts-control.has-items.hs-select-single-multiple {
    padding: .6125rem 1rem!important;
}

.tom-select-custom .ts-wrapper.form-select.multi .ts-control,.tom-select-custom .ts-control.has-items.hs-select-single-multiple {
    padding: .3125rem 1rem .2125rem 1rem!important;
}

.ts-wrapper.is-valid.single,
.was-validated .valid.single,
.was-validated :valid + .ts-wrapper.single {
    background-image: none!important;
}

.ts-wrapper.is-invalid.single,
.was-validated .invalid.single,
.was-validated :invalid + .ts-wrapper.single {
    background-image: none!important;
}

.ts-wrapper.is-valid,
.was-validated .valid,
.was-validated :valid + .ts-wrapper {
    border-color: #00c9a7!important;
}

.w-1 {
    width: 1% !important;
}

.dropzone {
    min-height: 8rem;
    border: 0.0625rem solid rgba(231,234,243,.7);
    border-radius: 0.2rem;
    padding: 0.875rem 0.875rem;
    background-color: #25282a;
}

.dropzone .dz-message {
    text-align: center;
    color: #8c98a4 !important;
    margin: 0;
    width: 100%;
}

.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    min-height: 6.153rem;
    background-color: var(--bs-body-bg);
}

.dropzone .dz-preview .dz-image {
    border-radius: 0.2rem;
    overflow: hidden;
    width: 6.153rem;
    height: 6.153rem;
    position: relative;
    display: block;
    z-index: 10;
    background-color: var(--bs-body-bg);
}

.dropzone .dz-preview.dz-image-preview {
    background-color: var(--bs-body-bg);
}

.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 0.875rem;
    min-width: 100%;
    max-width: 100%;
    padding: 1em 1em;
    text-align: center;
    color: rgba(0, 0, 0, .9);
    line-height: 150%;
    cursor: pointer;
}

.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 1em;
    font-size: 0.875rem;
    cursor: pointer;
}

.dropzone .dz-preview .dz-remove {
    font-size: 1rem;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none;
    background-color: var(--bs-body-bg);
}

.dropzone .dz-preview .dz-success-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -35%;
    margin-top: -50%;
    background-color: rgba(var(--bs-success-rgb), 1) !important;
    border-radius: 50%;
    cursor: pointer;
}

.dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -35%;
    margin-top: -50%;
    background-color: rgba(var(--bs-danger-rgb),1)!important;
    border-radius: 50%;
    cursor: pointer;
}
.dropzone .dz-preview .dz-image img {
    display: block;
    width: 6.153rem;
    height: 6.153rem;
}

.tox-tinymce {
    border: 0.0625rem solid rgba(231, 234, 243, 0.7)!important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: var(--bs-body-bg);
}

.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary {
    background-color: var(--bs-body-bg);
}

.tox .tox-tbtn--bespoke {
    background: var(--bs-body-bg)
}

.tox .tox-menu {
    background: var(--bs-body-bg)
}

.tox .tox-edit-area__iframe {
    background: var(--bs-body-bg)
}

table.dataTable thead .sorting {
    background-size: 1rem 1rem;
}

table.dataTable thead .sorting_asc {
    background-size: 1rem 1rem;
}

table.dataTable thead .sorting_desc {
    background-size: 1rem 1rem;
}

.ts-wrapper.multi .ts-control > div {
    margin: 0 0.2rem 0 0
}

.daterangepicker select.ampmselect option,
.daterangepicker select.hourselect option,
.daterangepicker select.minuteselect option,
.daterangepicker select.secondselect option {
    background: var(--bs-body-bg)
}

.loader {
    width: 8rem;
    height: 4.5rem;
    color: #ffffff;
    --c: radial-gradient(farthest-side,currentColor 96%,#0000);
    background:
            var(--c) 100% 100% /30% 60%,
            var(--c) 70%  0    /50% 100%,
            var(--c) 0    100% /36% 68%,
            var(--c) 27%  18%  /26% 40%,
            linear-gradient(currentColor 0 0) bottom/67% 58%;
    background-repeat: no-repeat;
    position: relative;
}
.loader:after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0.4;
    animation: l7 1s infinite;
}
@keyframes l7 {
    to {transform:scale(1.8);opacity:0}
}


.table-responsive {
    overflow-x: inherit!important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: inherit;
}

.bootstrap-select > .dropdown-toggle {
    background: #25282a;
}

.bootstrap-select .btn:focus,
.bootstrap-select .btn:focus-visible,
.bootstrap-select.show .btn {
    outline: none !important;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #28a745 !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #b94a48 !important;
}

.external-user {
    background-color: #8f51a6 !important;
}

/* bootstrap-select active 상태의 small 태그 스타일 (다크모드) */
/* theme-dark.min.css보다 나중에 적용되도록 더 구체적인 셀렉터 사용 */
html body.dark-mode .bootstrap-select .dropdown-menu li.active small,
html body.dark-mode > .bootstrap-select .dropdown-menu li.active small,
html body.dark-mode > div[class*="bs-select"] li.active small,
html body.dark-mode .bootstrap-select .dropdown-menu .dropdown-item.active small,
html body.dark-mode > .bootstrap-select .dropdown-menu .dropdown-item.active small {
    color: rgba(248, 242, 242, 0.5) !important;
}

/* bootstrap-select 검색 결과 없음 메시지 스타일 (다크모드) */
html body.dark-mode .bootstrap-select .dropdown-menu .no-results,
html body.dark-mode > .bootstrap-select .dropdown-menu .no-results,
html body.dark-mode > div[class*="bs-select"] .no-results {
    color: var(--bs-secondary) !important;
    padding: 0.5rem 0.75rem !important;
}

/* 다크 모드 - 외주관리 날짜 아이템 기본 스타일 */
body.dark-mode .list-group-item.contractor-date-item,
body.dark-mode .contractor-date-item {
    color: #E5E7EB !important;
}

/* 다크 모드 - 외주관리 활성화된 날짜 아이템 색상 */
body.dark-mode #contractorDateList a.list-group-item.list-group-item-action.contractor-date-item.active,
body.dark-mode #contractorDateList .list-group-item.list-group-item-action.contractor-date-item.active,
body.dark-mode #contractorDateList .list-group-item.contractor-date-item.active,
body.dark-mode #contractorDateList .list-group-item-action.contractor-date-item.active,
body.dark-mode #contractorDateList .contractor-date-item.active {
    color: #F3F4F6 !important;
}

/* 다크 모드 - 외주관리 날짜 목록의 요일 텍스트 색상 */
body.dark-mode #contractorDateList .contractor-date-item .text-muted,
body.dark-mode #contractorDateList .contractor-date-item small.text-muted {
    color: #D1D5DB !important;
}

/* 다크 모드 - 외주관리 활성화된 날짜 아이템의 fw-semibold 텍스트 색상 (custom.css 오버라이드) */
body.dark-mode .contractor-date-item.active .fw-semibold,
body.dark-mode #contractorDateList .contractor-date-item.active .fw-semibold {
    color: #F3F4F6 !important;
}

/* 다크 모드 - 헤더 네비게이션 그룹 스타일 */
body.dark-mode .nav-item-group:not(:last-child)::after {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 다크 모드 - 글자 크기 조절 컨트롤 그룹 스타일 */
body.dark-mode .font-size-control-group {
    background-color: rgba(55, 125, 255, 0.1);
    border-color: rgba(55, 125, 255, 0.2);
}

body.dark-mode .font-size-control .btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 다크 모드 - 배율 표시 스타일 */
body.dark-mode .font-size-value {
    color: #8ab4f8;
}


/* 글자 크기 조절 컨트롤 그룹 스타일 */
.font-size-control-group {
    padding: 0.25rem;
    background-color: rgba(55, 125, 255, 0.05);
    border-radius: 0.5rem;
    border: 1px solid rgba(55, 125, 255, 0.1);
}

.font-size-control {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.font-size-control .btn {
    padding: 0.375rem 0.5rem;
    min-width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.font-size-control .btn i {
    font-size: 0.875rem;
}

.font-size-control .btn:hover {
    background-color: rgba(55, 125, 255, 0.15);
    color: #377dff;
    transform: translateY(-1px);
}

.font-size-control .btn:active {
    transform: translateY(0) scale(0.95);
}

/* 배율 표시 스타일 */
.font-size-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0 0.5rem;
    margin: 0 0.125rem;
}

.font-size-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: #377dff;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .nav-item-group {
        margin-right: 0.375rem;
    }

    .nav-item-group:not(:last-child)::after {
        right: -0.5rem;
        height: 1.25rem;
    }

    .nav-group-wrapper {
        gap: 0.375rem;
    }

    .font-size-control-group {
        padding: 0.125rem;
    }

    .font-size-control {
        gap: 0.25rem;
    }

    .font-size-control .btn {
        padding: 0.25rem 0.375rem;
        min-width: 1.75rem;
        height: 1.75rem;
    }

    .font-size-control .btn i {
        font-size: 0.75rem;
    }

    .font-size-display {
        min-width: 2.5rem;
        padding: 0 0.375rem;
        margin: 0 0.0625rem;
    }

    .font-size-value {
        font-size: 0.6875rem;
    }
}

.tooltip {
    position: fixed !important;

}