@charset "UTF-8";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/******************************************** Variables ********************************************/
/*:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --border-primary-color: #28a745;
    --text-primary-color: #333333;
}*/

/********************************************* Layout **********************************************/
/* 하단 패딩 조정 */
.app-content {
    padding-bottom: 0.1rem !important;
}

/* 부트스트랩 폰트 적용 */
.dx-widget,
.dx-datagrid,
.dx-datagrid-headers .dx-header-row > td,
.dx-datagrid-headers .dx-header-row > td,
.dx-row.dx-data-row.dx-row-lines.dx-column-lines > td,
.dx-datagrid-rowsview .dx-row > td,
.dx-texteditor-input,
.dx-pager,
.dx-datagrid-total-footer,
.dx-datagrid-total-footer .dx-datagrid-content,
.dx-datagrid-summary-item,
.dx-datagrid-text-content,
.dx-treeList-text-content {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
}

/* 데이터 그리드 기본 칼럼, 헤더, 풋터 보더 제거 */
.dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer,
.dx-treelist-headers.dx-treelist-nowrap.dx-bordered-top-view.dx-state-focused,
.dx-bordered-bottom-view.dx-treelist-rowsview.dx-treelist-nowrap.dx-scrollable.dx-visibility-change-handler.dx-scrollable-both.dx-scrollable-simulated,
.dx-treelist-headers.dx-treelist-nowrap.dx-bordered-top-view {
    border: none !important;
}
/* 풋터 하단 고정 */
.table-reponsive .dx-datagrid {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 450px);
}

.table-reponsive .dx-datagrid-rowsview {
    flex: 0;
}

.table-reponsive .dx-widget.dx-datagrid-pager.dx-pager.dx-light-mode {
    margin-top: auto; /* footer를 하단으로 밀어냄 */
}
.dx-datagrid-borders > .dx-datagrid-rowsview.dx-last-row-border tbody:last-child > .dx-data-row:nth-last-child(2) > td {
    border-bottom-width: 1px;
}
/****************************************** 데이터그리드 *******************************************/
/* 통합된 노데이터 스타일 */
.dx-datagrid-nodata {
    font-size: 14px;
    font-weight: 900 !important;
}

/* 하단 pageInfo 스타일링 */
.dx-widget.dx-datagrid-pager.dx-pager.dx-light-mode {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: -15px;
    padding: 0px;
    background-color: white;
}

/* 체크 박스 색 변경 */
.dx-checkbox-checked .dx-checkbox-icon {
    color: white !important;
}

/*체크박스 컨테이너에는 border 제거 */
.dx-checkbox-container {
    border: none !important;
}

.dx-command-select.dx-editor-cell.dx-editor-inline-block,
.dx-command-select.dx-editor-cell.dx-editor-inline-block.dx-cell-focus-disabled {
    border-bottom: 1px solid #ddd;
}

/*선택된 상태에서도 border 유지 */
.dx-command-select.dx-editor-cell.dx-editor-inline-block[aria-selected="true"],
.dx-command-select.dx-editor-cell.dx-editor-inline-block.dx-cell-focus-disabled[aria-selected="true"] {
    border-bottom: 1px solid #ddd !important;
}

/* 호버 상태에서도 border 유지 */
.dx-command-select.dx-editor-cell.dx-editor-inline-block:hover,
.dx-command-select.dx-editor-cell.dx-editor-inline-block.dx-cell-focus-disabled:hover {
    border-bottom: 1px solid #ddd !important;
}

/*포커스 상태에서도 border 유지 */
.dx-command-select.dx-editor-cell.dx-editor-inline-block:focus,
.dx-command-select.dx-editor-cell.dx-editor-inline-block.dx-cell-focus-disabled:focus {
    border-bottom: 1px solid #ddd !important;
}

/* 페이지 네이션 인풋 사이즈 조정 */
[aria-label="Page number"] .dx-texteditor-input,
[aria-label="Page number"] {
    height: 20px !important;
    padding-top: 0px !important;
}

.dx-datagrid-headers [role="presentation"] > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border: none !important;
}

div[role="presentation"] {
    padding: 0 !important;
}

.dx-scrollable-wrapper {
    padding: 0 !important;
}

/*폰트 사이즈 조정*/
div.dx-label span {
    font-size: 12px !important;
}

/* 내보내기 버튼 숨기기 */
/*div[role="toolbar"] {
    display: none;
}*/

/* 헤더랑 풋터 색깔 셀럭트 포함 */
.dx-datagrid-headers [role="presentation"],
.dx-treelist-headers.dx-treelist-nowrap.dx-bordered-top-view,
.dx-row.dx-footer-row.dx-cell-focus-disabled td[role="gridcell"],
td[role="columnheader"] {
    background-color: rgb(235, 238, 244);
}

/* 헤더 폰트 조정 */
.dx-datagrid-text-content,
.dx-treelist-text-content {
    font-size: 12px !important;
    color: black;
}

td[role="columnheader"] {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    text-align: center !important;
    font-weight: 900 !important;
    border-bottom: none !important;
}

/*Summary 넓이 조정*/
.dx-datagrid-total-footer > .dx-datagrid-content .dx-row > td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* 테이블 보더 */
.dx-datagrid-scrollable-simulated.dx-datagrid-content.dx-datagrid-scroll-container,
.dx-treelist-scrollable-simulated.dx-treelist-content.dx-treelist-scroll-container {
    /*border-top: 1.5px solid rgba(0, 0, 0, 0.21);*/
    border-top: 2px solid rgba(0, 0, 0, 0.21);
}

/* 칼럼하단 얇게 조정할 때 참고 */
.dx-row.dx-column-lines.dx-header-row {
    border-bottom: 2.5px solid rgba(0, 0, 0, 0.21);
    /* border-bottom: 2.5px solid rgba(0, 0, 0, 0.21);*/
}

/* 페이저 상단 보더 */
.dx-widget.dx-datagrid-pager.dx-pager.dx-light-mode {
    border-top: 2px solid rgba(0, 0, 0, 0.21);
    /* border-top: 2px solid rgba(0, 0, 0, 0.21);*/
    margin-top: 1.5px; /* 합계 영역의 border와 중첩되는 것을 피하기 위해 margin 조정 */
}

/* footer 보더 */
.dx-row.dx-footer-row.dx-cell-focus-disabled {
    /*border-bottom: 2px solid rgba(0, 0, 0, 0.21);*/
    border-bottom: 2px solid rgba(0, 0, 0, 0.21);
}

.dx-bordered-bottom-view.dx-datagrid-rowsview.dx-datagrid-nowrap.dx-scrollable.dx-visibility-change-handler.dx-scrollable-both.dx-scrollable-simulated.dx-last-row-border {
    /*  border-bottom: 2px solid rgba(0, 0, 0, 0.21);*/
    border-bottom: 2px solid yellow;
    margin-bottom: 0px
}

/*페이지네이션 인풋줄이기*/
.dx-light-pages div {
    height: 27px !important;
}

.dx-light-pages input[class="dx-texteditor-input"] {
    padding: 0rem 0rem 0rem 0rem !important;
    text-align: center;
    height: 27px !important;
    min-height: 27px;
}
/******************************************** Tree List ********************************************/
.dx-treelist-content {
    padding: 0px !important;
}

.dx-row.dx-freespace-row.dx-column-lines td {
    border: none;
    /*  border-bottom: 2px solid rgba(0, 0, 0, 0.21); */
}

.dx-treelist-empty-space {
    height: 18px !important;
    width: 18px !important;
}

/* 플립박스 스타일링 */
.dx-treelist-expanded span::before,
.dx-treelist-collapsed span::before {
    font-family: "Font Awesome 5 Free" !important;
    font-size: 16px !important;
    color: var(--bs-primary);
    padding-left: 2px;
    padding-top: 2px;
    position: absolute;
}

.dx-treelist-expanded span::before {
    content: "\f146" !important; /* minus-square */
}

.dx-treelist-collapsed span::before {
    content: "\f0fe" !important; /* plus-square */
}

.dx-treelist-select-all .dx-select-checkbox {
    display: none !important;
}

tr[aria-level="1"] .dx-treelist-collapsed,
tr[aria-level="1"] .dx-treelist-expanded {
    visibility: hidden !important;
}

.dx-treelist-rowsview .dx-row.dx-row-focused > td {
    border-bottom: none !important;
}

/* 일반 행의 기본 border 유지 */
.dx-treelist-rowsview .dx-row {
    border-bottom: 1px solid #d1d9e7;
}
/******************************************** Text Box *********************************************/
/* 인풋박스 아이콘 스타일링 */
.dx-dropdowneditor-button .dx-dropdowneditor-icon,
.dx-dropdowneditor-button:hover .dx-dropdowneditor-icon,
.dx-dropdowneditor-button:focus .dx-dropdowneditor-icon,
.dx-dropdowneditor-button:active .dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-focused .dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon {
    background-color: transparent !important;
}

.dx-dropdowneditor-button {
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 100% !important;
}

.dx-dropdowneditor-button .dx-button-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dx-dropdowneditor-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}

.dx-dropdowneditor-button:hover .dx-dropdowneditor-icon,
.dx-dropdowneditor-button:focus .dx-dropdowneditor-icon {
    color: #1f6bff !important;
    transform: none !important;
    background-color: transparent;
}

/* 인풋, 셀렉트, 데이트, 넘버박스 */
.dx-texteditor-input,
.dx-textbox,
.dx-selectbox .dx-texteditor-input {
    height: 36px !important;
}

/* 인풋, 셀렉트, 데이트, 넘버박스 */
.dx-texteditor-input {
    padding-top: 20px !important;
    padding-left: 10px !important;
    font-size: 12px !important;
}

/* 구매발주 품목 인풋 스타일링 */
/* 통합된 overflow: visible 스타일 */
/*.dx-datagrid-headers [role="presentation"],
.dx-scrollable-wrapper,
.dx-row.dx-footer-row.dx-cell-focus-disabled td[role="gridcell"] {
    overflow: visible !important;
}*/

/* 셀렉트박스 내부 텍스트 크기 조정 */
.dx-dropdowneditor-input-wrapper input,
.dx-selectbox-popup .dx-list .dx-list-item,
.dx-selectbox-container .dx-texteditor-input {
    font-size: 12px !important;
}

/* 셀렉트박스 드롭다운 메뉴 아이템 */
.dx-list-item-content {
    font-size: 12px !important;
}

/* 셀렉트박스 플레이스홀더 */
.dx-placeholder {
    font-size: 12px !important;
    transform : translateY(-2px) !important;
}

/* 값이 없을 때 row에 border 제거 */
.dx-datagrid-content .dx-datagrid-table .dx-row > td:empty {
    border: none !important;
}

/* row 패딩 제거 */
.detail-grid-container .dx-datagrid-rowsview td {
    overflow: visible !important;
    padding: 0 !important;
}
/* Floating Label 폰트 사이즈 */
.dx-widget.dx-texteditor:not(.dx-texteditor-empty) .dx-texteditor-label .dx-label span[data-mark],
.dx-widget.dx-texteditor.dx-state-focused .dx-texteditor-label .dx-label span[data-mark] {
    font-size: 11px !important;
}

 /* DateBox아이콘 변경*/
.dx-datebox .dx-dropdowneditor-icon {
    display: none;
}

/* FontAwesome 달력 아이콘 추가 */
.dx-datebox .dx-dropdowneditor-button .dx-button-content::after {
    content: '\f133';
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-size: 16px;
    color: #333;
    display: inline-block;
    padding: 8px;
}
.dx-datebox .dx-dropdowneditor-button:hover .dx-button-content::after {
    color: #1f6bff;
}

.dx-tag-remove-button::before,
.dx-tag-remove-button::after,
.dx-tag-remove-button:hover::before,
.dx-tag-remove-button:hover::after,
.dx-tag-remove-button:active::before,
.dx-tag-remove-button:active::after {
    background-color: transparent;
}

.dx-tag-remove-button::after {
    content: "\f057" !important;
    font-family: "FontAwesome" !important;
    transform: rotate(90deg) !important;
    color: red;
}

.dx-tag-remove-button {
    width: 14px !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    margin: 0px !important;
}

#txtKeyWBox.dx-tagbox,
#txtKeyWBox .dx-texteditor-container {
    height: 36px !important;
    min-height: 36px !important;
}

#txtKeyWBox .dx-texteditor-input-container.dx-tag-container {
    background-color: transparent;
    height: auto !important;
    min-height: 36px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 2px 2px 2px 10px !important;
    border-radius: 0.25rem !important;
}

#txtKeyWBox .dx-tag div {
    background-color: #f3f6f4 !important;
    display: flex;
    border-radius: 0.25rem !important;
}

.dx-tag-content {
    font-size: 12px !important;
    border: 0.5px solid #9ec5fe;
    margin-top: 6px !important;
    color: #0a58ca;
}

#txtKeyWBox .dx-texteditor-input {
    padding-top: 4px !important;
    padding-left: 2px !important;
}

#txtKeyWBox .dx-placeholder {
    padding-top: 0px !important;
}

.dx-tag-remove-button:hover {
    background-color: transparent !important;
}

.dx-tag {
    padding-right: 4px !important;
}
/* 버튼 스타일 조정 */
/*.dx-datebox .dx-dropdowneditor-button {
    display: flex;
    align-items: center;
    justify-content: center;
}*/
/******************************************* Custom CSS ********************************************/

/*입력 필드 disabled처리*/
input:disabled,
textarea:disabled {
    background-color: #f5f5f5 !important;
    cursor: default;
}
/* 콤보박스 disabled처리 */
.cbbDisabled {
    background-color: rgb(245, 245, 245) !important;
    pointer-events: none;
}
/* 검색인풋 글자들 버튼과 겹치지 않게 */
.srchInput {
    padding-right: 50px !important;
}

/* 텍스트 넘어가면 ... 처리 */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 통합된 아이콘 색상 변경 스타일 */
.srchIconBox:focus .dx-icon,
.srchIconBox:hover .dx-icon,
.btn:hover i.fa-search {
    color: #1f6bff;
}

/* 하위 요소 radius제거 텍스트 박스용 */
.rounded-zero div:not(.dx-widget.dx-datagrid-pager.dx-pager.dx-light-mode div),
.rounded-zero select:not(.dx-widget.dx-datagrid-pager.dx-pager.dx-light-mode) {
    border-radius: 0 !important;
}

/* 상태 컨테이너: 상태 라벨과 스위치를 감싸는 컨테이너 */
.status-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bs-body-bg);
    padding: 8px 10px;
}

/* 상태 라벨: "상태", "사용 유무" 등의 텍스트 스타일 */
.status-label {
    font-size: 12px;
    margin-bottom: 0;
    margin-right: 1rem;
}

/* 상태 스위치: 토글 스위치 컨테이너 */
.status-switch {
    display: flex;
    justify-content: flex-end;
}

/* 골뱅이 가운데 정렬 */
.addon-wrapping {
    text-align: center;
    padding-top: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
}

/* ---------- 닫기 버튼 스타일링 ---------- */
/* 크기 및 여백 설정 */
.closeIconBox.dx-button {
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 0;
   
}

/* 내부 여백 제거 */
    .closeIconBox.dx-button .dx-button-content {
        padding: 0;
        margin-right: -5px;
    }

/* 아이콘 크기 및 색상 */
.closeIconBox.dx-button i {
    font-size: 14px;
    color: #999;
}

/* ---------- 텍스트 영역 스타일링 ---------- */
/* 높이 설정 */
#txtRemkArea .dx-texteditor-input,
#txtRemkArea {
    height: 100px !important;
}

    /* placeholder 위치 조정 */
    #txtRemkArea .dx-placeholder {
        padding-top: 8px !important;
    }

/* 카테고리 css */
.category-select {
    height: 190px !important;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    text-align: center;
}

    .category-select::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .category-select option {
        padding: 6px 12px;
        margin: 2px 0;
        font-size: 12px;
        text-align: center;
        border-bottom: 1px solid #f8f9fa;
    }

        .category-select option:hover {
            background-color: #e9ecef;
        }

        .category-select option:checked {
            background-color: #e7f1ff !important;
            color: #0d6efd;
            font-weight: 500;
        }

.category-select {
    text-align-last: left;
}

    .category-select option {
        text-align: left;
    }

/* 라디오버튼 크기 */
.form-check-input:not(.form-switch .form-check-input) {
    width: 0.8rem;
    height: 0.8rem;
}

/* 로그인 화면 이미지 RESPONSIVE */
@media (max-width: 600px) {
    .responsive-img {
        width: 100px;
    }
}

@media (max-width: 992px) {
    .responsive-img {
        width: 200px;
    }
}
/******************************************* Modal Popup *******************************************/

.modal div[class="dx-widget dx-datagrid-pager dx-pager dx-light-mode"] {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.modal .dx-texteditor-input-container input:hover,
.modal .dx-texteditor-input-container input:focus,
.modal .dx-texteditor-input-container input:active,
.modal .dx-state-hover,
.modal .dx-state-active,
.modal .dx-state-focused {
    border: 0.2px !important;
}

.modal .dx-state-hover::after {
    border-bottom-width: 0.1px !important;
}

.modal .dx-textbox.dx-editor-underlined:hover::before {
    border-bottom-width: 0.1px !important;
}

/* 모달 텍스트박스 인풋 스타일링 */
.srchMd .modal .dx-textbox .dx-texteditor-input {
    height: 36px !important;
    line-height: 36px !important;
    margin-left: 5px;
    transform: translateY(5px) !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 3px !important;
    text-align: left !important;
    font-size: 14px !important;
}

/* 모달 텍스트박스 플레이스홀더 위치 조정 */
.srchMd .modal .dx-textbox .dx-placeholder {
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    padding-left: 5px !important;
    padding-bottom: 10px !important;
    color: #999 !important;
}

/* 모달 텍스트박스 컨테이너 높이 통일 */
.srchMd .modal .dx-texteditor-container {
    height: 36px !important;
}

/* 모달 텍스트박스 인풋 컨테이너 높이 통일 */
.srchMd .modal .dx-texteditor-input-container {
    height: 36px !important;
}

/* 입력값이 있을 때 플레이스홀더 숨김 처리 */
.modal .dx-textbox:not(.dx-texteditor-empty) .dx-placeholder {
    display: none;
}

.modal:not(.multi) .dx-command-select input[type="checkbox"].dx-select-checkbox,
.modal:not(.multi) .dx-command-select .dx-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    background-color: white;
    position: relative;
    vertical-align: middle;
    margin: 0 auto;
    padding: 0;
}

/* 체크박스 선택됐을 때 스타일링 */
.modal:not(.multi) .dx-command-select input[type="checkbox"].dx-select-checkbox:checked,
.modal:not(.multi) .dx-command-select .dx-checkbox-checked {
    background-color: #03a9f4;
    border-color: #348fe2;
}

/*체크박스 컨테이너에는 border 제거 */
.modal:not(.multi) .dx-command-select.dx-editor-cell.dx-editor-inline-block {
    border: none !important;
    border-bottom: 1px solid #ddd !important;
}

.modal .dx-command-select.dx-cell-focus-disabled.dx-editor-cell.dx-editor-inline-block[aria-colindex="1"] {
    border: none !important;
}
/* 체크박스 선택됐을 때 가운데 동그라미 */
.modal:not(.multi) .dx-command-select input[type="checkbox"].dx-select-checkbox:checked:after,
.modal:not(.multi) .dx-command-select .dx-checkbox-checked:after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 호버 효과 */
.modal:not(.multi) .dx-command-select input[type="checkbox"].dx-select-checkbox:hover,
.modal:not(.multi) .dx-command-select .dx-checkbox:hover {
    border: 1px #03a9f4 solid !important;
}

/* 체크박스 컨테이너 정렬 */
.modal:not(.multi) .dx-command-select {
    text-align: center;
    border-bottom: 1px solid #ddd !important;
    border-right: none;
}

/* 체크박스 아이콘 숨기기 */
.modal:not(.multi) .dx-checkbox-icon {
    display: none;
}

#srchMd .modal .dx-texteditor-input {
    padding: 0 !important;
    text-align: center;
}

.dx-widget .table table-hover .dx-visibility-change-handler {
    margin: 0 !important;
}

.modal .dx-datagrid-pager .dx-pages .dx-page-indexes {
    display: flex;
    align-items: center;
}

.modal-body {
    padding-bottom: 0;
}

.dx-texteditor.dx-state-active::before,
.dx-texteditor.dx-state-focused::before {
    all: unset !important;
}

.modal .dx-pager {
    padding-top: 4px !important;
}

.modal-footer {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.modal-header {
    padding: 12px 16px;
}