.offcanvas .btn-close {
    padding: 1rem !important; 
    transform: scale(1.5); 
}


@media (max-width: 1024px) {
    .btn-close {
        /* 버튼 크기 증가 */
        width: 44px;
        height: 44px;
        /* 배경 이미지가 커지지 않을 경우를 대비해 설정 */
        background-size: 50%;
        /* 패딩을 통해 클릭 가능한 여백 확보 */
        padding: 20px !important;
        margin: -10px !important;
    }
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #22c55e;
    --danger: #ef4444;
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --nav-width: 250px; /* ← 이 줄 추가 */
}


@media (max-width: 1024px) {
    .app-header {
        left: 0 !important;
        width: 100% !important;
    }
    
    .app-footer {
        
        left: 0 !important;
        width: 100% !important;
    }
}

body {
    overflow: hidden !important;
  
}

/* 1. 컨텐츠를 감싸는 본문 영역 설정 */
#topCanvas .canvas-body {
  /* 세로 스크롤은 기존대로 유지하거나 자동 설정 */
  overflow-y: auto !important; 
  
  /* 가로 스크롤 강제 활성화 (컨텐츠가 넘칠 때만 스크롤바 생성) */
  overflow-x: auto !important; 
  
  /* 안드로이드/태블릿 터치 스크롤을 부드럽게 만들기 */
  -webkit-overflow-scrolling: touch; 
}

/* 2. [중요] 내부 컨텐츠가 가로로 찌그러지지 않고 원래 크기를 유지하도록 설정 */
#topCanvas .canvas-body > * {
  /* 내부의 직계 자식 요소(테이블이나 div 등)가 부모 크기에 맞춰 줄어들지 않도록 방지 */
  min-width: max-content; 
}


@media screen and (max-width: 1024px) {
  
  /* 1. body의 스크롤 제어는 풀고 원래 구조 유지 */
  body {
    overflow: unset !important;
  }

  /* 2. 실제 테이블과 컨텐츠를 감싸는 내부 스크롤 컨테이너 타겟팅 */
  /* (솔루션 구조상 주로 사용하는 클래스명들을 매핑해 두었습니다) */
  .main-content, 
  .content-wrapper, 
  #content,
  .main-body-area {
    /*padding-bottom: 200px !important;*/ /* 하단에 시원하게 200px 여백 확보 */
    overflow-y: auto !important;       /* 내부 스크롤 강제 활성화 */
  }
}



.tablet-container {
    /* 핵심: 가로 중앙 정렬 */
    margin-left: auto !important;
    margin-right: auto !important;
    /* 화면을 줄여도 양옆에 최소한의 간격을 유지 */
    width: 92%;
    /* 너무 커지지 않도록 제한 */
    max-width: 1000px;
    /* 위아래 여백 */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
}



.content-wrapper {
    /* 1. 핵심: 부모와 상관없이 화면 높이에서 헤더 등을 뺀 만큼만 키를 가집니다. */
    /* 100vh(전체) - 56px(헤더) - 40px(기타 여백) = 약 90vh */
    height: 90vh !important;
    max-height: 90vh !important;
    /* 2. 내부 스크롤 활성화 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* 3. 레이아웃 고정 */
    display: block !important; /* 또는 flex; flex-direction: column; */
    position: relative !important;
    /* 4. 박스 모델 정리 */
    box-sizing: border-box !important;
    /*padding-bottom: 20px !important;*/
}


/* 사이드바 + 메인 영역을 감싸는 중간 래퍼 */
/*
.main-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden; 
    min-height: 0;
}
*/





/* HEY와 MES 사이의 노란색 동그라미 */
.dot-yellow {
    width: 5px;
    height: 5px;
    position:relative;
    top : -1px;
    background-color: #FACC15; /* 로고의 노란색과 유사한 코드 */
    border-radius: 50%; /* 동그랗게 만들기 */
    margin: 0 0px; /* 양옆 간격 */
    display: inline-block;
}

/* WORKS 색깔의 MES */
.text-mes {
    
    font-weight: 600;
    color: #583FCF; /* 이미지의 보라색 톤 추출값 */
    letter-spacing: -1px;
}



/* ==========================================================================
   1. 최상위 헤더 바 고정
   ========================================================================== */
.app-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;    
    position: fixed !important;
    top: 0;
    left: 0 !important;
    width: 100% !important;
    height: 56px;
    z-index: 888;
    
    padding: 0 20px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
    transition: left 0.3s ease, width 0.3s ease;
}



/* 헤더 내부 아이콘 간격 */
/*
.app-header > div,
.app-header > button,
.app-header > a {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}
*/

/* 1. 우측 아이콘 전용 컨테이너를 가로 정렬(Flex) 박스로 만듭니다 */
.header-right-container {

    display: flex !important;
    flex-direction: row !important; /* 무조건 가로로 나란히 */
    align-items: center !important;  /* 위아래 가운데 정렬 */
    justify-content: flex-end !important; /* 오른쪽 끝으로 밀착 */
    gap: 4px !important;            /* 아이콘들 사이의 고른 간격(10px) 제공 */
position: relative !important;         /* right 속성이 먹히도록 기준을 잡음 */
    right: -13px !important;
}

/* 2. 컨테이너 내부의 PHP 분기용 div 태그들도 가로 흐름을 깨지 않도록 설정 */
.header-right-container > div {
    display: flex !important;
    align-items: center !important;
}



.app-header {
    position: fixed !important;
    z-index: 100 !important;
}

.app-sidebar {
    position: fixed !important;
    z-index: 200 !important;
}

#navihidden {
    position: fixed !important;
    z-index: 9999 !important;
}





/* 헤더 높이만큼 본문 내려주기 */
.app-main {
    margin-top: 0;
    min-height: 100dvh; /* 최소한 화면 전체를 채우되, */
    height: auto; /* 콘텐츠가 많아지면 자연스럽게 늘어남 */
}




.app-sidebar {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    height: 100vh;
    overflow: visible; /* ← hidden → visible 로 변경 */
    display: flex;
    flex-direction: column;
}

.app-sidebar-content {
    /* height: 100%; <- 이 줄을 삭제하거나 아래처럼 변경하세요 */
    flex: 1; /* 부모의 남은 공간을 꽉 채움 */
    overflow-y: auto !important; /* 내부 스크롤 활성화 */
    padding-bottom: 200px !important; /* 이제 이 패딩이 제대로 작동합니다 */
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* 이게 있으면 제거 or auto로 변경 */
}


.app-footer {
    
    position: fixed;
    bottom: 0;
    left: 250px; /* margin-left 대신 left 사용 */
    width: calc(100% - 250px);
    height: 60px;
    z-index: 10;
    transition: left 0.01s ease; /* 애니메이션 속도 동기화 */
}


/* 네비 줄었을 때 로고 텍스트 숨기고 가운데 정렬 */
.set-nav-minified .app-logo span {
    display: none;
}

.set-nav-minified .app-logo {
    justify-content: center;
    padding: 0;
    width: 100%;
}

/* html 태그에 붙으므로 앞에 html 추가 */
html.set-nav-minified #navihidden {
    left: 240px;
}

html.set-nav-minified {
    --nav-width: 60px;
}

/* 1. 네비가 줄어들었을 때 (Mini 모드) */
html.set-nav-minified #navihidden {
    /* 고정 수치(70px 등)를 절대 쓰지 마세요! */
    left: 100%; 
    /* 줄어든 네비 끝에 딱 붙도록 마진만 살짝 조절 */
    margin-left: -5px; 
}

/* 1. 버튼의 기준점이 되는 부모 요소 설정 */
.primary-nav {
    /* 기존 높이 설정을 유지하면서 스크롤 가능하게 변경 */
    overflow-y: auto !important; 
    display: flex;
    flex-direction: column;
}

/* 2. 버튼 위치 설정 */
#navihidden {
    position: absolute; 
    left: 100%; /* 부모(.primary-nav) 너비가 얼마든 그 오른쪽 끝에 붙음 */
    margin-left: -5px; /* 네비 뒤에 살짝 겹치게 배치 */
    
    top: 18px;
    z-index: 889; 
    display: inline-flex;
    
    /* 네비가 마우스 오버로 커질 때 버튼도 같이 부드럽게 이동 */
    transition: left 0.3s ease; 
}




/* 네비 줄었을 때 로고+버튼 감싸는 div */
.set-nav-minified .app-logo-wrap {
    justify-content: center;
}


/* 네비 줄었을 때 헤더와 본문 위치 동시 조정 */
.set-nav-minified .app-header {
    /* 1. 띄어쓰기 주의: - 60px (앞뒤 공백 필수) */
    left: 60px !important;
    width: calc(100% - 60px) !important;
    transition: left 0.3s ease, width 0.3s ease;
}

/* 네비 줄었을 때 헤더와 본문 위치 동시 조정 */
.set-nav-minified .panel-mes {
    /* 1. 띄어쓰기 주의: - 60px (앞뒤 공백 필수) */
    left: -10px !important;
    width: calc(100% - 5px) !important;
    transition: left 0.3s ease, width 0.3s ease;
}



.app-logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important; /* ← 가로 가운데 */
    gap: 6px !important;
    padding: 0 12px !important;
    flex-shrink: 0 !important;
    min-height: 64px !important;
    max-height: 64px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

    .app-logo img {
        width: 60px !important;
        display: inline-block !important;
    }

    .app-logo span {
        color: pink !important;
        font-size: 1.6em !important;
        position: relative !important;
        left: 1px !important;
    }






/* js-nav-menu는 유일한 ID이므로 우선순위가 높습니다 */
#js-nav-menu {
    display: block !important; /* flex면 padding이 씹힐 수 있음 */
    padding-bottom: 100px !important;
    margin-bottom: 50px !important;

}

.control-panel {
    text-align: center;
    margin: 0px 0;
}

.btn-toggle {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #dfe6e9;
    background: #fff;
    border-radius: 8px;
    margin: 0 5px;
    transition: 0.3s;
}

    .btn-toggle.active {
        background-color: #0984e3;
        color: white;
        border-color: #0984e3;
    }

.approval-wrapper {
    background-color: #f4f7fa;
    padding: 0px;
    overflow-x: auto;
    border-radius: 15px;
    min-height: 200px;
}

.tree-container {
    display: inline-block;
    min-width: 100%;
    text-align: center;
}

    .tree-container ul {
        padding-top: 25px;
        position: relative;
        display: flex;
        justify-content: center;
        padding-left: 0;
    }

    .tree-container li {
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 15px 10px 0 5px;
    }

        /* 연결선 스타일 */
        .tree-container li::before, .tree-container li::after {
            content: '';
            position: absolute;
            top: 0;
            right: 50%;
            border-top: 2px solid #b2bec3;
            width: 50%;
            height: 25px;
        }

        .tree-container li::after {
            right: auto;
            left: 50%;
            border-left: 2px solid #b2bec3;
        }

        .tree-container li:only-child::after, .tree-container li:only-child::before {
            display: none;
        }

        .tree-container li:only-child {
            padding-top: 0;
        }

        .tree-container li:first-child::before, .tree-container li:last-child::after {
            border: 0 none;
        }

        .tree-container li:last-child::before {
            border-right: 2px solid #b2bec3;
            border-radius: 0 5px 0 0;
        }

        .tree-container li:first-child::after {
            border-radius: 5px 0 0 0;
        }

    .tree-container ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 2px solid #b2bec3;
        width: 0;
        height: 25px;
    }

/* 카드 디자인 */
.user-card {
    background: #fff;
    border: 1px solid #dfe6e9;
    border-radius: 12px;
    padding: 15px;
    min-width: 150px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: inline-block;
    transition: 0.3s;
    position: relative;
    z-index: 10;
}

    .user-card:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

/* 상태 및 역할 스타일 */
.card-draft {
    border-left: 5px solid #636e72;
}

.card-agree {
    border-left: 5px solid #fdcb6e;
}

.card-review {
    border-left: 5px solid #0984e3;
}

.card-final {
    border-left: 5px solid #00b894;
}

.card-reject {
    border: 2px solid #e74c3c;
    border-top: 4px solid #e74c3c;
}

.role-tag {
    font-size: 10px;
    font-weight: 800;
    color: #95a5a6;
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
}

.name-text {
    font-size: 14px;
    font-weight: 600;
    color: #2d3436;
}

.status-text {
    font-size: 11px;
    margin-top: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.status-done {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-wait {
    background: #fff3e0;
    color: #ef6c00;
}

.status-none {
    background: #f5f5f5;
    color: #cecece;
}

.status-reject {
    background: #ffe2e2;
    color: #e74c3c;
}



.offcanvas-top-end {
    top: 0px !important; /* 천장에서 살짝 띄움 */
    right: 0px !important; /* 오른쪽벽에서 살짝 띄움 */
    height: 300px !important; /* 전체 높이가 아닌 원하는 높이 지정 */
    border-radius: 15px; /* 모서리를 둥글게 하면 더 예쁩니다 */
    /*border: 1px solid #dee2e6;*/
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

    /* 나타날 때 애니메이션 위치 조정 (오른쪽에서 들어오게 유지) */
    .offcanvas-top-end.show {
        transform: none !important; /* 위 CSS에서 정한 top, right 위치에 고정 */
       
    }



.offcanvas {
    /*transition: transform 0.3s ease-in-out, z-index 0s !important;*/
    transition: transform 0.3s ease-in-out !important;
    border: none !important; /* 기존 border 제거 */
    outline: 1px solid #aaa; /* outline 사용 */
}

.offcanvas.top-priority {
    z-index: 1090 !important; /* 기본 1050보다 높게 */
    box-shadow: 0 0 20px rgba(0,0,0,0.5) !important; /* 위로 올라온 느낌 강조 */
    /*transition: transform 0.3s ease-in-out, z-index 0s !important;*/
}

/* 아이콘 자체에도 커서 모양 강제 적용 */
.drag-handle-icon {
    cursor: move;
    color: #adb5bd;
    margin-right: 10px;
    font-size: 1.2rem;
}

#threedOffcanvas .offcanvas-header,
#mrpOffcanvas .offcanvas-header,
#detailOffcanvas .offcanvas-header,
#imgOffcanvas .offcanvas-header {
    cursor: move !important;
    background-color: #f8f9fa; /* 드래그 영역 구분 */
    border-bottom: 1px solid #eee;
}

#mrpOffcanvas,
#detailOffcanvas {
    height: auto !important; /* 꽉 차는 높이 해제 */
    min-height: 600px; /* 너무 짧아 보이지 않게 최소값 설정 */
    max-height: 85vh; /* 화면을 넘어가면 스크롤이 생기도록 제한 */
    bottom: auto !important; /* 아래쪽 고정 해제 */
    display: flex;
    flex-direction: column;
}

#threedOffcanvas,

#imgOffcanvas {
    height: auto !important; /* 꽉 차는 높이 해제 */
    min-height: 300px; /* 너무 짧아 보이지 않게 최소값 설정 */
    max-height: 85vh; /* 화면을 넘어가면 스크롤이 생기도록 제한 */
    bottom: auto !important; /* 아래쪽 고정 해제 */
    display: flex;
    flex-direction: column;
}
    #threedOffcanvas,
 
    #imgOffcanvas .offcanvas-body {
        flex: 0 1 auto; /* 바디가 부모 높이를 다 차지하지 않게 조절 */
        overflow-y: auto; /* 내용이 많아지면 내부 스크롤 발생 */
        padding-bottom: 30px !important;
    }

#comboOffcanvas .offcanvas-header,
#approvalOffcanvas .offcanvas-header,
#mrpOffcanvas .offcanvas-header,
#plusOffcanvas .offcanvas-header {
    cursor: move !important;
    background-color: #f8f9fa; /* 드래그 영역 구분 */
    border-bottom: 1px solid #eee;
}

#comboOffcanvas,
#approvalOffcanvas,
#plusOffcanvas {
    height: auto !important; /* 꽉 차는 높이 해제 */
    min-height: 300px; /* 너무 짧아 보이지 않게 최소값 설정 */
    max-height: 85vh; /* 화면을 넘어가면 스크롤이 생기도록 제한 */
    bottom: auto !important; /* 아래쪽 고정 해제 */
    display: flex;
    flex-direction: column;
}
    #comboOffcanvas .offcanvas-body,
    #approvalOffcanvas .offcanvas-body,
    #plusOffcanvas .offcanvas-body {
        flex: 0 1 auto; /* 바디가 부모 높이를 다 차지하지 않게 조절 */
        overflow-y: auto; /* 내용이 많아지면 내부 스크롤 발생 */
        padding-bottom: 30px !important;
    }

        .mode-auto-blur {
            opacity: 0.95;
        }

	#btnArea {
		
		display: flex;
		justify-content: center;  /* 센터 기준 */
		gap: 10px;
		margin-top: 20px;
		width: 100%;
	}

	#btnArea button {
		margin: 0 !important;
		min-width: 40px;        /* 작은 기본 사이즈 */
		padding: 6px 20px;
	}


        .offcanvas-edit-btn ,
        .offcanvas-init-btn ,
        .offcanvas-add-btn {
    /*display: block;
    margin-left: auto;
    margin-right: auto;*/
    /* 1. 너비를 줄임 (15% 또는 고정 px 추천) */
    width: 100px;
    min-width: 120px; /* 너무 작아지는 것 방지 */

    background: #3498db;
    color: white;
    border: none;
    /* 2. 패딩을 줄여서 버튼 높이를 슬림하게 */
    padding: 10px 20px;
    /* 3. 글자 크기를 살짝 조절 */
    font-size: 0.9rem;
    border-radius: 10px;
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.2s; /* 부드러운 효과 추가 */
}

    /* 마우스 올렸을 때: 색상을 약간 밝게 하고 그림자 추가 */
    .offcanvas-init-btn:hover ,
    .offcanvas-edit-btn:hover ,
    .offcanvas-add-btn:hover {
    /*
        background: var(--primary-dark); 
        */
        filter: brightness(1.1); 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* 눌렀을 때 (클릭 순간): 크기를 줄이고 투명도 조절 */
    .offcanvas-add-btn:active {
        transform: scale(0.96); /* 4% 정도 크기 축소 */
        opacity: 0.8; /* 살짝 투명하게 */
        box-shadow: none; /* 그림자 제거로 눌린 느낌 강조 */
        transition: transform 0.1s ease; /* 빠른 반응 속도 */
    }


/* 오프캔버스 내의 닫기 버튼 스타일링 */
.btn-close {
    transition: transform 0.3s ease-in-out; /* 부드러운 회전 효과 */
}

    /* 마우스 호버 시 90도 회전 */
    .btn-close:hover {
        transform: rotate(90deg);
        /* 선택 사항: 호버 시 빨간색 느낌을 주고 싶다면 아래 필터 사용 */
        /* filter: invert(21%) sepia(100%) saturate(7414%) hue-rotate(354deg) brightness(92%) contrast(123%); */
    }

    /* 버튼 클릭 시 미세하게 커지는 효과 (선택 사항) */
    .btn-close:active {
        transform: rotate(90deg) scale(0.9);
    }




/* 초기화 버튼 스타일 */
#btn_routing_clear_canvas ,
#btn_parent_clear {
    background: transparent !important;
    border: none !important;
    color: #dc3545 !important; /* 빨간색 (Bootstrap danger 색상) */
    font-size: 16px;
    padding: 0 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
    #btn_routing_clear_canvas:hover,
    #btn_parent_clear:hover {
        transform: scale(1.2); /* 마우스 올리면 살짝 커짐 */
        color: #ff0000 !important;
    }

/* 둥근 테두리 적용 시 버튼 정렬 보정 */

.input-group {
    overflow: hidden; /* 테두리 밖으로 버튼이 나가지 않게 함 */
    
}

/* 1. 팝업창 본체 둥글게 */
.swal2-popup {
    border-radius: 25px !important;
}

/* 2. 확인/취소 버튼 둥글게 (캡슐형) */
.swal2-styled {
    border-radius: 10px !important;
    padding: 10px 25px !important; /* 버튼 여백 정돈 */
}

/* 3. 아이콘 상단 여백 조절 */
.swal2-icon {
    margin-top: 30px !important;
}




.factory-header,
.modal-header {
    cursor: move !important; /* 동서남북 커서 강제 적용 */
}

#list-modal {
    overflow: hidden !important;
}

    /* [1] 모달 컨텐츠 전체 스타일 */
    #list-modal .modal-content {
        border-radius: 24px;
        border: none;
        box-shadow: 0 30px 60px rgba(0,0,0,0.12);
        font-family: 'Pretendard', sans-serif;
        overflow: hidden;
    }

    /* [2] 헤더 부분 */
    #list-modal .modal-header {
        background: #ffffff !important;
        padding: 30px 20px 30px 20px;
        border-bottom: none;
        display: flex;
        align-items: center;
        /* 정렬을 왼쪽 시작으로 변경 */
        justify-content: flex-start !important;
        position: relative;
    }

    #list-modal .modal-title {
        font-size: 24px;
        font-weight: 800;
        color: #1a1a1a;
        letter-spacing: -1px;
        /*border-left: 6px solid #3498db;*/
        padding-left: 15px;
        margin: 0;
        position: static !important;
    }

    /* [3] 닫기 버튼 스타일 - 영역 최적화 완료 */
    #list-modal .btn-close {
        width: 40px !important;
        height: 40px !important;
        background-size: 12px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        /* ⭐ 중요: 왼쪽 마진을 auto로 설정하여 오른쪽 끝에 붙도록 강제 */
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        opacity: 0.5;
        transition: all 0.2s ease-in-out !important;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 1051 !important;
        border: 1px solid #eee;
        background-color: #f8f9fa;
    }

        #list-modal .btn-close:hover {
            opacity: 1 !important;
            background-color: #ff4757 !important;
            transform: rotate(90deg);
            border-color: #ff4757 ;
            /* 흰색 X 아이콘 강제 주입 */
            
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
                
        }

    /* [4] 바디 및 입력창 스타일 */
    #list-modal .modal-body {
        padding: 10px 14px 0px 14px !important; /* 좌우 40px -> 24px */
    }




/* 1. 상단 필터 기본 스타일 (하늘색 테두리 + 캡슐형) */

#filter .input-group {
    background: #f8fbff !important; /* 기본은 연한 회색/하늘색 */
    border: 1px solid #cecece !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 1px !important;
    display: flex;
    align-items: center;
    height: 42px !important; /* 높이를 하나로 고정하여 통일감 부여 */
    display: flex;
    align-items: center;
    margin-bottom: 5px !important;
}


/* 2. 라벨 영역 스타일 (공장 명, 유효 등) */


    #filter .input-group-text {
    background: #f0f7ff !important; /* 왼쪽 라벨에만 아주 연한 배경색 부여 (선택사항) */
    border: none !important;
    border-right: 1px solid #d6eaff !important; /* 내부 경계선 */
    color: #3498db !important;
    font-weight: 700;
    font-size: 13px;
    height: 100% !important;
    min-width: 70px;
    justify-content: center;
}



/* 3. 입력창 및 셀렉트 박스 내부 여백 통일 */
#filter .form-control,
#filter .form-select {
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    font-size: 14px;
    padding: 0 15px !important;
    color: #2c3e50 !important;
    box-shadow: none !important;
    
}

/* 5. 노란색 점선(bg-yellow-soft) 적용 시 스타일 유지 */
#filter .input-group.bg-yellow-soft {
    background-color: #feff87 !important;
    border: 1.5px dashed #856404 !important;
}




/* ⭐ 2. bg-yellow-soft가 적용된 경우에만 노란색 배경 강제 적용 */
#filter .input-group.bg-yellow-soft {
    background-color: #feff87 !important; /* 노란색 배경 */
    border: 1.5px dashed #856404 !important; /* 테두리도 노란색 계열로 변경 (선택 사항) */
}

#list-modal .input-group.bg-yellow-soft {
    background-color: #feff87 !important; /* 노란색 배경 */
    border: 1.5px dashed #856404 !important; /* 테두리도 노란색 계열로 변경 (선택 사항) */
}
/* 3. 라벨 스타일 (회사, 아이디 등) */
#filter .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #3498db !important; /* 기본 파란색 글자 */
    font-weight: 700;
    font-size: 13px;
    padding-left: 20px;
    min-width: 70px;
    justify-content: center;
}

/* 노란색 배경일 때 라벨 글자색이 어색하면 아래 코드 추가 (선택) */
#filter .input-group.bg-yellow-soft .input-group-text {
    color: #777 !important; /* 진한 갈색/황금색 */
}

/* 4. 화살표 크기 및 위치 고정 (거대 화살표 방지) */
#filter .form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233498db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px !important; /* 화살표 크기를 작게 고정 */
    padding-right: 35px !important;
    border: none !important;
    background-color: transparent !important;
}

/* 노란색 배경일 때 화살표 색상도 맞추고 싶다면 */
#filter .input-group.bg-yellow-soft .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23856404' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.input-group:focus-within .input-group-text,
#filter .input-group:focus-within .input-group-text {
    color: #2d3748 !important; /* 포커스 시 글자 진하게 고정 */
}


.offcanvas .input-group:focus-within ,
    #filter .input-group:focus-within {
    /* 1. 전체 테두리 색상을 빨간색(또는 원하는 색)으로 변경 */
    border-color: #3498db !important;
    /* 2. 테두리 두께를 살짝 두껍게 하여 강조 (선택 사항) */
    border-width: 1.5px !important;
    /* 3. 이미지처럼 부드러운 광채 효과 추가 
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;*/
    /* 4. 배경색을 흰색으로 변경하여 더 선명하게 */
    background-color: #ffffff !important;
}



    #filter .input-group-text {
    color: #aaa !important; /* 포커스 시 글자 진하게 고정 */
}

/*****************************************************************************************/

/*****************************************************************************************/


.offcanvas .input-group:has(select[disabled], input[disabled]),
#filter .input-group:has(select[disabled], input[disabled]),
#list-modal .input-group:has(select[disabled], input[disabled]),
#enterprise_id .input-group:has(select[disabled], input[disabled]) {
    background-color: #eeeeee !important; /* 더 연한 회색으로 변경 */
    border-color: #d1d9e0 !important;
    cursor: not-allowed;
}


.offcanvas .input-group,
#list-modal .input-group,
#enterprise_id .input-group {
    margin-bottom: 5px;
    /*background: #f8f9fb;*/
    background: #f8fbff;
    border-radius: 12px;
    border: 1px solid #cecece;
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

    #list-modal .input-group:focus-within {
        border-color: #3498db;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }
.offcanvas .input-group-text,
#list-modal .input-group-text {
    background: transparent !important;
    border: none;
    color: #718096 !important;
    font-weight: 600;
    font-size: 14px;
    min-width: 80px;
    padding-left: 15px;
}

.offcanvas .input-group:focus-within .input-group-text,
    #list-modal .input-group:focus-within .input-group-text {
    color: #2d3748 !important; /* 포커스 시 글자 진하게 고정 */
}

/* [5] 입력창 및 셀렉트 박스 공통 + 화살표 추가 */
.offcanvas .form-control,
.offcanvas .form-select,
#list-modal .form-control,
#list-modal .form-select {
    border: none !important;
    background: transparent;
    padding: 12px 15px;
    font-weight: 500;
    color: #2d3748 !important;
    appearance: none;
    -webkit-appearance: none; /* 크롬, 사파리 화살표 제거 */
}

.offcanvas .form-select ,
    #list-modal .form-select {
    /* 커스텀 화살표 SVG 주입 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23718096' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 14px !important;
    padding-right: 40px !important; /* 화살표 영역 확보 */
    cursor: pointer;
}

    #list-modal .form-control:focus,
    #list-modal .form-select:focus {
        box-shadow: none;
        background-color: transparent !important;
    }

/* [6] 푸터 및 버튼 */
#list-modal .modal-footer-mes {
    padding: 20px 40px 30px 40px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#list-modal .btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.2s;
}

#list-modal .btn-primary {
    background: #3498db;
    border: none;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

#list-modal .btn-default {
    background: #f1f3f5;
    border: 1px solid #e9ecef;
    color: #495057;
}































.bg-yellow-soft {
    background-color: #feff87 !important;
    border: 1px dashed !important;
}

/* 1. 부모 칸(th, td)의 정렬 방식을 테이블 정중앙으로 강제 */
/*
table.dataTable thead th.select-checkbox,
table.dataTable tbody td.select-checkbox {
    */
table.dataTable thead th.select-checkbox {
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 0 !important; 
    padding-right: 0 !important;
}


    /* 5. 날짜 칸 크기 아주 작게 조정 */
    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        width: 34px !important;
        height: 26px !important;
        min-width: 24px !important;
        line-height: 20px !important;
        font-size: 11px !important;
        padding: 0 !important;
    }



/*

.daterangepicker {
    z-index: 40000 !important;
}*/


/* 1. 검색창 전체 영역 (검색창을 오른쪽 정렬하거나 간격을 줄 때) */
.dataTables_filter {
    margin-bottom: 0; /* 테이블과의 간격 */
    text-align: right; /* 우측 정렬 */
}

    /* 2. 실제 입력창(Input Box) 스타일링 */
#datatable_list_wrapper .dataTables_filter input {
    display: inline-block !important; /* 요소를 강제로 표시 */
    width: 250px !important;
    height: 35px !important;
    padding: 5px 10px !important; /* padding 0은 글자가 테두리에 붙으므로 약간 주는 것이 좋습니다 */
    border: 1px solid #d1d1d1 !important; /* #eee는 너무 연해서 안 보일 수 있으니 조금 더 진한 색 권장 */
    border-radius: 6px !important;
    background-color: #ffffff !important; /* #f0000(오류)를 #ffffff(흰색)로 수정 */
    outline: none !important;
    transition: all 0.3s ease;
    -webkit-appearance: none; /* 브라우저 기본 스타일 방지 */
}


        /* 3. 입력창에 마우스를 올리거나 클릭했을 때 효과 */
        .dataTables_filter input:focus {
            border-color: #007bff; /* 파란색 테두리 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 은은한 광채 효과 */
            background-color: #fff; /* 흰색 배경으로 변경 */
        }


:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #22c55e;
    --danger: #ef4444;
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --text-main: #1e293b;
    --text-sub: #64748b;
}

.btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

.table_2 {
    width: 100%;
    /* 1. 선 겹침(separate)을 collapse로 바꿔야 이중선이 사라집니다 */
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: none;
    font-size: 13px;
}

    .table_2 thead th {
        /* 기존 보라색 배경 유지 */
        background: #777;
        color: #ffffff;
        font-weight: 500;
        text-align: center;
        padding: 10px 6px;
        /* 2. 핵심: 헤더 밑의 진한 선과 흰색 틈을 아예 없앱니다 */
        border-bottom: none !important;
        white-space: nowrap;
    }

    .table_2 tbody td {
        padding: 4px 6px;
        color: #0f172a;
        /* 3. 바디의 모든 선을 아주 연한 회색으로 통일 */
        border: 1px solid #e2e8f0;
        vertical-align: middle;
    }

    /* 4. 헤더 바로 아래 첫 번째 바디 셀의 윗선을 연하게 설정 */
    .table_2 tbody tr:first-child td {
        border-top: 1px solid #e2e8f0;
    }

    /* Hover */
.table_2 tbody tr:hover {
    background: #e0f2fe;
    transition: background 0.15s ease-in-out;
}

    /* 마지막 row border 제거 */
.table_2 tbody tr:last-child td {
    border-bottom: none;
}

    /* 체크 / 아이콘 컬럼 */
.table_2 th:first-child,
.table_2 td:first-child {
    width: 40px;
    text-align: center;
}

    /* 정렬 아이콘 */
    .table_2 th i {
        opacity: 0.8;
        font-size: 12px;
    }








/* 전체 카드 내 패딩 조정 */
.info-card {
    padding: 1.5rem;
    overflow: hidden; /* 자식 요소의 넘침 제어 */
}

/* 공정 타이틀 위치 고정 */
.label-caps {
    font-weight: 700;
    margin-bottom: 1.5rem !important;
}

/* 스크롤 컨테이너: 핵심 수정 부분 */
.stepper-scroll-viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 가로 스크롤 시 자석 효과 */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
}

    /* 스크롤바 세련되게 디자인 */
    .stepper-scroll-viewport::-webkit-scrollbar {
        height: 5px;
    }

    .stepper-scroll-viewport::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .stepper-scroll-viewport::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 10px;
    }

.stepper-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* 왼쪽부터 차례대로 배치 */
    min-width: max-content;
    gap: 0; /* 기본 간격을 0으로 하고 item의 width로 조절 */
    padding: 20px 10px;
}

.step-item {
    flex: 0 0 80px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* after의 기준점 */
}

    /* 연결선 수정: 고정 px 대신 %와 calc 사용 */
    .step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 16px; /* 아이콘 중앙 높이 */
        /* 아이콘 중심(50%)에서 오른쪽으로 16px(아이콘 반지름) 지점부터 시작 */
        left: calc(50% + 16px);
        /* 다음 아이콘 직전까지만 가도록 설정 (전체 100% - 아이콘 지름 32px) */
        width: calc(100% - 32px);
        height: 2px;
        background-color: #e2e8f0;
        z-index: 1;
    }

    /* 완료된 공정 선 색상 */
    .step-item.done:not(:last-child)::after {
        background-color: #3182ce;
    }

    /* 마지막 요소는 명시적으로 선을 그리지 않음 */
    .step-item:last-child::after {
        display: none !important;
    }

.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    z-index: 2;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.step-item.done .step-icon {
    background-color: #ebf8ff;
    border-color: #3182ce;
    color: #3182ce;
}

.step-item.current .step-icon {
    background-color: #3182ce;
    border-color: #3182ce;
    color: white;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

/* 글씨 밀림 방지 속성 */
.step-label {
    font-size: 12px;
    color: #4a5568;
    text-align: center;
    white-space: nowrap; /* 줄바꿈 방지 */
    word-break: keep-all;
}

.step-item.current .step-label {
    color: #2b6cb0;
    font-weight: 600;
}














/* 전체 폰트 정돈 */
.offcanvas-body {
    font-family: 'Pretendard', sans-serif;
    color: #333;
}

/* 상태 배지 */
.status-badge-pill {
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.bg-running {
    background: #e6ffed;
    color: #28a745;
}

/* 새로운 심플 스테퍼 */
.new-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.n-step {
    font-size: 0.75rem;
    color: #ccc;
    text-align: center;
    flex: 1;
    position: relative;
    padding-top: 25px;
}

    .n-step::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #eee;
        z-index: 2;
    }

    .n-step.active {
        color: #0d6efd;
        font-weight: 700;
    }

        .n-step.active::before {
            background: #0d6efd;
            box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
        }

    .n-step.done {
        color: #333;
    }

        .n-step.done::before {
            background: #333;
        }

/* 성능 보드 */
.performance-board {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
}











/* 스테퍼 컨테이너 */
.stepper-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0;
    margin: 10px 0;
}

    /* 배경 연결선 */
    .stepper-container::before {
        content: '';
        position: absolute;
        top: 15px; /* 아이콘의 중앙 높이 */
        left: 5%;
        right: 5%;
        height: 2px;
        background: #e0e0e0;
        z-index: 0;
    }

/* 각 스텝 아이템 */

.step-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px; /* 각 단계의 최소 너비를 설정 (이 값을 키울수록 간격이 멀어짐) */
}

/* 숫자/아이콘 원형 */
.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #adb5bd;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

/* 텍스트 라벨 */
.step-label {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
}

/* 완료된 상태 (Done) */
.step-item.done .step-icon {
    background: #e7f1ff;
    border-color: #0d6efd;
    color: #0d6efd;
}

.step-item.done .step-label {
    color: #212529;
}

/* 현재 진행 상태 (Current) */
.step-item.current .step-icon {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    transform: scale(1.1);
}

.step-item.current .step-label {
    color: #0d6efd;
    font-weight: 700;
}

/* 가동 중 애니메이션 (선택사항) */
.step-item.current .step-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #0d6efd;
    animation: pulse-blue 1.5s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}


/* 공정 스테퍼 커스텀 */
.process-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 10px 0;
}

.step {
    font-size: 0.7rem;
    color: #adb5bd;
    position: relative;
    flex: 1;
    text-align: center;
}

    /* 단계 사이 연결선 */
    .step:not(:last-child):after {
        content: '';
        position: absolute;
        top: 50%;
        left: 60%;
        width: 80%;
        height: 2px;
        background: #e9ecef;
        z-index: 1;
    }

    /* 완료된 단계 */
    .step.completed {
        color: #212529;
        font-weight: 600;
    }

        .step.completed:before {
            content: '\f00c';
            font-family: "Font Awesome 5 Pro";
            display: block;
            margin: 0 auto 5px;
            width: 20px;
            height: 20px;
            background: #007bff;
            color: white;
            border-radius: 50%;
            line-height: 20px;
        }

    /* 현재 활성 단계 */
    .step.active {
        color: #007bff;
        font-weight: 700;
        scale: 1.1;
    }

        .step.active:before {
            content: '';
            display: block;
            margin: 0 auto 5px;
            width: 20px;
            height: 20px;
            border: 4px solid #007bff;
            background: white;
            border-radius: 50%;
        }

/* 가동 상태 인디케이터 */
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bg-primary-soft {
    background-color: rgba(0, 123, 255, 0.1);
}

/* 애니메이션 점 */
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #007bff;
    border-radius: 50%;
    margin-left: 4px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 하이테크 오프캔버스 스타일 */
.offcanvas-end {
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px); /* 글래스 효과 */
    box-shadow: -15px 0 35px rgba(0, 0, 0, 0.08);
    width: 500px !important;
}

/* 헤더 디자인: 그라데이션 포인트 */
.offcanvas-header {
    background: #fff;
    padding: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

/* 데이터 카드 스타일 */
.info-card {
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .info-card:hover {
        border-color: #007bff;
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05);
    }

/* 라벨 & 값 디자인 */
.label-caps {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0a0a0;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.value-main {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

/* 커스텀 스크롤바 */
.offcanvas-body::-webkit-scrollbar {
    width: 6px;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 10px;
}

/* Offcanvas 스타일 업그레이드 
.offcanvas-end {
    border-left: none !important;
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.offcanvas-header {
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-bottom: 2px solid #007bff; 
    padding: 1.25rem;
}

.detail-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.detail-value {
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}
*/

/* 1. 선택된 결과 값(현재 보여지는 값) 왼쪽 정렬 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left !important;
    padding-left: 10px !important; /* 왼쪽 여백이 필요할 경우 조절 */
}

/* 2. 검색창 입력 텍스트 왼쪽 정렬 */
.select2-search__field {
    text-align: left !important;
}

/* 3. 드롭다운 리스트의 결과 항목들 왼쪽 정렬 */
.select2-results__option {
    text-align: left !important;
}



/* 기본 화살표 제거 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* V 모양 화살표 */
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transition: transform 0.2s ease;
}

/* 드롭다운 열렸을 때 위로 (^) */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    top: 55%;
    transform: translate(-50%, -50%) rotate(-135deg);
}

/* 호버 효과 */
.select2-container--default .select2-selection--single:hover .select2-selection__arrow::after {
    border-color: #495057;
}



/* 1. Select2를 input-group 내부의 한 칸으로 강제 고정 */
.input-group > .select2-container--default {
    flex: 1 1 auto;
    width: 1% !important;
    margin: 0;
}

/* 2. 기존 디자인과 높이 및 테두리 맞추기 */
.select2-container--default .select2-selection--single {
    height: 41px !important;
    line-height: 43px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0 !important; /* ⭐ 직각 */
    /* border-left: 0 !important; ← 이 줄 삭제 또는 주석 처리 */
    border-radius: 0 0.25rem 0.25rem 0 !important;
    display: flex;
    align-items: center;
}

/* 3. 리스트의 점(•) 제거 및 배경색 겹침 방지 */
.select2-results__options {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: white; /* 보라색 바 위로 보일 때 배경색 보장 */
}

.select2-results__option {
    list-style: none !important;
    padding: 8px 12px !important;
}

/* 4. 드롭다운이 보라색 바(헤더/테이블) 뒤로 숨지 않게 설정 */
.select2-container--open {
    z-index: 9999 !important;
}





/*
#datatable_list,
.dataTables_scrollHead table,
.dataTables_scrollBody table {
    table-layout: fixed !important;
}
   

    #datatable_list th:nth-child(2),
    #datatable_list td:nth-child(2) {
        width: 20px !important;
        max-width: 20px;
        min-width: 20px;
        text-align: right;
    }
*/

/* Switch Flat
==========================*/

.rect-bottom.saas-3 {

   
    margin-top: -20px;
    position: relative;
    display: flex;
    gap: 1px;
    padding: 6px;
    background: #ffff; 
    border-radius: 10px;
   
}

/* 버튼 */
.nav-btn {
    position: relative;
    z-index: 2;
    border: 0;
    background: transparent;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 450; /* ← 미묘하지만 고급 */
    color: #666;
    cursor: pointer;
    transition: color .18s ease-out;
}

    .nav-btn:hover {
        color: #111;
    }

    .nav-btn.active {
        color: #111;
        font-weight: 500;
    }

/* 인디케이터 (고급의 핵심) */
.indicator {
    position: absolute;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: 0;
    background: linear-gradient( 180deg, #f6f7f9 0%, #fbfbfc 100% );
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.04);
    transition: left .32s cubic-bezier(.22,1,.36,1), width .32s cubic-bezier(.22,1,.36,1);
}






    /*******************************************************************/
    /*******************************************************************/
    /*******************************************************************/
    /*******************************************************************/


.rect-bottom {
    position: relative;
    display: flex;
    gap: 40px;
    padding: 10px 0;
}

.bottom-btn {
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .bottom-btn:hover span {
        text-decoration: underline;
    }



.modal-footer-mes {
    float: right;
    /*margin-top: 10px;*/
}

.mb-manual {
    margin-top: 120px;
}

.switch-flat {
    padding: 0;
    background: #FFF;
    background-image: none;
}

    .switch-flat .switch-label {
        background: #FFF;
        border: solid 1px #eceeef;
        box-shadow: none;
    }

        .switch-flat .switch-label:after {
            color: #666; /* #7a59ad;*/
        }

    .switch-flat .switch-handle {
        top: 5px;
        left: 6px;
        background: #dadada;
        width: 20px;
        height: 20px;
        box-shadow: none;
    }

        .switch-flat .switch-handle:before {
            background: #eceeef;
        }

    .switch-flat .switch-input:checked ~ .switch-label {
        background: #FFF;
        border-color: #666; /* #7a59ad;*/
    }

    .switch-flat .switch-input:checked ~ .switch-handle {
        left: 41px;
        background: #666; /*#7a59ad*/
        box-shadow: none;
    }

/* Switch Flat
==========================*/

.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 62px;
    height: 22px;
    padding: 3px;
    margin: 0 0px 10px 0;
    /*background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);*/
    border-radius: 10px;
    /*box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
    cursor: pointer;
    box-sizing: content-box;
}

.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    box-sizing: content-box;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 12px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    box-sizing: content-box;
}

    .switch-label:before, .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
        box-sizing: content-box;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 11px;
        color: #aaaaaa;
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }

    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

.switch-input:checked ~ .switch-label {
    background: #E1B42B;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

    .switch-input:checked ~ .switch-label:before {
        opacity: 0;
    }

    .switch-input:checked ~ .switch-label:after {
        opacity: 1;
    }

.switch-handle {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }

.switch-input:checked ~ .switch-handle {
    left: 40px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}


/* Transition
========================== */

.switch-label, .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}



/*
.select2-container  .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec;
}


.select2-search {
    background-color: #e9fdec;
}

.select2-choice {
    background-color: #e9fdec !important;
}

.select2-search input {
    background-color: #e9fdec;
}

.select2-search__field {
    background-color: #e9fdec;
}

.select2-container--default {
    background-color: #e9fdec;
}


.select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #28a745;
    border-color: #3d9970;
}



.select2-search {
    background-color: #e9fdec;
}

.select2-choice {
    background-color: #e9fdec !important;
}

.select2-search input {
    background-color: #e9fdec;
}

.select2-search__field {
    background-color: #e9fdec;
}


.no-drag {
	-webkit-app-region: no-drag;
}
Swal.fire({
  customClass: {
    closeButton: 'no-drag',
    confirmButton: 'no-drag',
    cancelButton: 'no-drag',
    input: 'no-drag'
  }
})
	*/
/*.select2-container .select2-selection--single .select2-selection__rendered {
.select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec;
}

.select2-container .select2-selection__rendered {
    width:30px;
    background-color: #00ff00;

}*/
/*
.select2-container--default .select2-selection--single {
   
    background-color: #fff;
}*/
/*
.select2-results {
    background-color: #fff;
}*/
/*
.select2-search--dropdown .select2-selection__rendered  {
    background-color: #fff; 
}
.select2-results .select2-selection__rendered  {
    background-color: #fff; 
}*/
.datatable_info {
    background: LightSalmon;
    color: darkblue;
}


.stripe_green {
    background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b );
}

.stripe_green2 {
    background: repeating-linear-gradient( to right, #9cfb58, #9cfb58 10px, #8def48 10px, #8def48 20px );
}

.stripe_gray {
    background: repeating-linear-gradient( to right, #f2f2f2, #f2f2f2 10px, #fefefe 10px, #fefefe 20px );
}


.stripe_grey2 {
    background: repeating-linear-gradient( to right, #f1f1f1, #f1f1f1 10px, #fff 10px, #fff 20px );
}

.stripe_blue {
    background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}

.stripe_grey {
    background:
    /* On "top" */
    repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px ),
    /* on "bottom" */
    linear-gradient( to bottom, #eee, #999 );
}

.stripe_orange {
    background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px );
}


#float_pda {
    position: fixed;
    /*position: sticky;*/
    /*width: 175px;*/
    /*display: inline-block;*/
    left: 5%;
    bottom: 5%;
    background-color: transparent;
    margin: 0;
    z-index: 1000;
}

#float2_pda {
    position: fixed;
    /*position: sticky;*/
    /*width: 175px;*/
    /*display: inline-block;*/
    right: 1%;
    bottom: 5%;
    background-color: transparent;
    margin: 0;
    z-index: 1000;
}

#floatdiv {
    position: fixed;
    /*width: 175px;*/
    display: inline-block;
    left: 13.5%;
    bottom: 6.52%;
    background-color: transparent;
    margin: 0;
    z-index: 9999;
}


#floatdiv2 {
    position: fixed;
    /*width: 175px;*/
    display: inline-block;
    left: 11.8%;
    bottom: 6.52%;
    background-color: transparent;
    margin: 0;
    z-index: 9999;
}


.border_red {
    border: 1px solid #ff0000;
}

.v-line {
    border-left: 1px solid #ff0000; /*thick*/
    border-right: 0px; /*thick*/
    border-style: dashed;
    height: 100%;
    left: 50%;
    /*position: relative absolute;*/
    position: absolute;
    z-index: 9999;
}

hr.vertical {
    width: 0px;
    height: 100%;
    /* or height in PX */
}


.result_sticky {
    position: sticky;
    top: 50px;
    z-index: 100;
}

.result2_sticky {
    position: sticky;
    top: 0px;
    z-index: 100;
}

.manual_sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
}


.manual_all_sticky {
    /*-webkit-tap-highlight-color: rgba(255,0,0,.8);*/
    font-weight: 800;
    opacity: 0.9;
    position: sticky;
    top: *95px;
    z-index: 99;
}

.extend_updown {
    font-size: 1.2em;
    font-weight: 800
}

.rect2Bottom {
    background: white;
    height: 30px;
    width: 100px;
    color: black;
    /*-moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
        */
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    /*border: 1px solid #ddd;*/
}

.rect3Bottom {
    background: white;
    height: 20px;
    width: 240px;
    color: black;
    /*-moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
        */
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    /*border: 1px solid #ddd;*/
}

.rectBottom {
    background: white;
    height: 20px;
    width: 70px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;

    border: 1px solid #ccc;
}

.rectBottom_orange {
    background: white;
    height: 20px;
    width: 70px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    border: 1px solid orange;
}

.rectBottom_Y {
    background: yellow;
    height: 20px;
    width: 70px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    border: 1px solid #ccc;
}


.rectBottom_O {
    background: orange;
    height: 20px;
    width: 70px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    border: 1px solid #ccc;
}

/* PDA/모바일 화면에서 하단 버튼 바 가로 스크롤 처리 */
#rectbottom.rect-bottom {
    /*display: none;*/
    /*display: flex !important; */      /* 버튼들을 가로로 나란히 배치 */
    flex-wrap: nowrap !important;   /* 줄바꿈 금지 (무조건 한 줄로) */
    overflow-x: auto !important;    /* 화면 넘어가면 가로 스크롤 생성 */
    overflow-y: hidden !important;  /* 세로 스크롤은 숨김 */
    white-space: nowrap !important; /* 텍스트 줄바꿈 절대 금지 */
    -webkit-overflow-scrolling: touch; /* 아이폰/패드에서 부드러운 스크롤 지원 */
    padding: 5px 10px !important;   /* 내부에 약간의 여백 제공 */
    gap: 8px !important;            /* 버튼과 버튼 사이 간격 격리 */
    align-items: center !important; /* 버튼들 세로 중앙 정렬 */
}

/* 하단 바 내부 버튼 스타일 보정 */
#rectbottom.rect-bottom .nav-btn {
    flex: 0 0 auto !important;      /* 버튼 크기가 찌그러지지 않도록 고정 */
    display: inline-block !important;
    min-width: 60px !important;     /* 버튼 최소 너비 보장 (글자 안 깨지게) */
    padding: 6px 12px !important;   /* 터치하기 편하게 패딩 조정 */
    text-align: center !important;
}

/* 스크롤바 디자인 (선택: 모바일에서 스크롤바를 숨기거나 깔끔하게 보이게 설정) */
#rectbottom.rect-bottom::-webkit-scrollbar {
    height: 4px; /* 아주 얇은 스크롤바 */
}
#rectbottom.rect-bottom::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#rectbottom.rect-bottom .nav-btn.hidden,
#rectbottom.rect-bottom .nav-btn.d-none {
    display: none !important;
}

.rectBottom2 {
    background: white;
    height: 20px;
    width: 80px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
}

.rectBottom3 {
    background: white;
    height: 20px;
    width: 160px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    /*border: 1px solid #ddd;*/
}


.rectBottom4 {
    background: white;
    height: 20px;
    width: 120px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    /*border: 1px solid #ddd;*/
}




.circleTop {
    background: #fd4b9f; /*Gainsboro; */
    height: 70px;
    width: 100vw;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 70px 70px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.6);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.6);
    border: 1px solid #ccc;
}

/*
.circleBottom {
    background: white;
    height: 20px;
    width: 40px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    border: 1px solid #ccc;
}
*/

.cBottom {
    width: 40px; /* 가로 크기 조절 */
    height: 20px; /* 세로 크기 조절 */
    background: white; /* 예시용 info 파란색 */
    border-top: 1px solid #ccc;
    border-top-left-radius: 0; /* 좌상 모서리 평평하게 */
    border-top-right-radius: 0; /* 우상 모서리 평평하게 */
    border-bottom-left-radius: 100px 100px; /* 좌하 타원 라운드(가로,세로) */
    border-bottom-right-radius: 100px 100px; /* 우하 타원 라운드(가로,세로) */
    box-shadow: 0 4px 10px rgba(0,0,0,.2); /* 그림자, 선택사항 */
}

.cBottom2_20251229 {
    width: 76px; /* 가로 크기 조절 */
    height: 20px; /* 세로 크기 조절 */
    background: white; /* 예시용 info 파란색 */
    border-top: 1px solid #ccc;
    border-top-left-radius: 0; /* 좌상 모서리 평평하게 */
    border-top-right-radius: 0; /* 우상 모서리 평평하게 */
    border-bottom-left-radius: 100px 100px; /* 좌하 타원 라운드(가로,세로) */
    border-bottom-right-radius: 100px 100px; /* 우하 타원 라운드(가로,세로) */
    box-shadow: 0 4px 10px rgba(0,0,0,.2); /* 그림자, 선택사항 */
}


.circleBottomLot {
    background: LemonChiffon;
    height: 50px;
    width: 40px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    border: 1px solid orange;
}


.circlePdaBottom {
    background: white;
    height: 30px;
    width: 60px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    /*border: 1px solid #ddd;*/
}

.circleBottom_180 {
    background: #717D89;
    height: 20px;
    width: 40px;
    -moz-border-radius: 90px 90px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
    border-radius: 90px 90px 0 0;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    /*border: 1px solid #ddd;*/
}


.subheader {
    height: 25px;
    position: relative;
    top: -10px;
}

.subheader-title {
    font-size: 2em;
}

.panel-mes {
    background: white;
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
    position: relative;
    border: 1px solid #ccc;
    /* ✅ 추가 및 수정된 부분 */
    height: auto !important; /* 고정 높이 해제 */
    min-height: 0 !important; /* 설정된 최소 높이 강제 초기화 */
    display: block; /* 또는 inline-block */
    overflow: hidden; /* 내부 여백 삐져나옴 방지 */
    margin-left: 10px;
}

    .panel-mes .subheader {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important; /* ✅ subheader 자체에 잡힌 최소 높이도 제거 */
        line-height: 1.2; /* 줄 간격 조절 */
    }

    /* ✅ 혹시 subheader-title에 여백이 있다면 제거 */
    .panel-mes .subheader-title {
        margin: 0 !important;
        padding: 0 !important;
    }

.dashboard {
    padding: 14px;
}

.btn-circle.btn-xl {
    width: 50px;
    height: 50px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 35px;
}

.cover-bar {
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: all .5s;
    opacity: 1;
    background-color: #fff;
}

.manual_container1:hover .cover-bar {
    opacity: 0;
    -webkit-transition: all .5s;
}

.manual_container2 {
    height: 740px;
    overflow: auto;
}

    .manual_container2::-webkit-scrollbar {
        width: 10px;
    }

    .manual_container2::-webkit-scrollbar-thumb {
        background-color: #aaa;
        border-radius: 10px;
        background-clip: padding-box;
        border: 1px solid transparent;
    }

    .manual_container2::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: inset 0px 0px 5px white;
    }



#half_product_item_name_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}

#half_product_item_type_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}



/*
#half_product_standard_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}
    */



#item_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}





#lot_popup + .select2-container .select2-selection--single ,
#purchase_order_popup + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#lot_popup + .select2-container--default.select2-container--focus .select2-selection--single ,
#purchase_order_popup + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}



#parent_canvas_div + .select2-container .select2-selection--single,
#parent_div + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#parent_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single ,
    #parent_div + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}

#product_div + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#product_div + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}


#material_div + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#material_div + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}

#product_condition + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#product_condition + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}

#material_condition + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#material_condition + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}



#name_condition + .select2-container .select2-selection--single ,
#vendor_condition + .select2-container .select2-selection--single ,
#company_condition + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#name_condition + .select2-container--default.select2-container--focus .select2-selection--single ,
#vendor_condition + .select2-container--default.select2-container--focus .select2-selection--single ,
#company_condition + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}



#sales_order_canvas_popup + .select2-container .select2-selection--single,
#sales_order_request_canvas + .select2-container .select2-selection--single,
#product_lot_canvas_popup + .select2-container .select2-selection--single,
#product_by_company_canvas_popup + .select2-container .select2-selection--single,
#company_canvas_popup + .select2-container .select2-selection--single,
#company_popup + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#sales_order_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#sales_order_request_canvas + .select2-container--default.select2-container--focus .select2-selection--single,
#product_lot_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#product_by_company_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#company_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#company_popup + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}
#buyer_popup + .select2-container .select2-selection--single,
#purchase_order_id_canvas_div + .select2-container .select2-selection--single,
#material_canvas_popup + .select2-container .select2-selection--single,
#product_canvas_popup + .select2-container .select2-selection--single,
#vendor_canvas_div + .select2-container .select2-selection--single,
#material_canvas_div + .select2-container .select2-selection--single,
#select_parent_canvas_div + .select2-container .select2-selection--single,
#work_order_id_canvas_div + .select2-container .select2-selection--single,
#sales_order_id_canvas_div + .select2-container .select2-selection--single,
#buyer_canvas_popup + .select2-container .select2-selection--single,
#product_canvas_div + .select2-container .select2-selection--single,
#process_canvas_popup + .select2-container .select2-selection--single,
#product_popup + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#buyer_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#purchase_order_id_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#material_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#product_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#vendor_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#material_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#select_parent_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#work_order_id_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#sales_order_id_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#product_cbuyer_canvas_popupanvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#product_canvas_div + .select2-container--default.select2-container--focus .select2-selection--single,
#process_canvas_popup + .select2-container--default.select2-container--focus .select2-selection--single,
#product_popup + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}

#material_popup + .select2-container .select2-selection--single {
    border: none !important;
    box-shadow: none !important; /* 그림자까지 제거해야 완벽합니다 */
    background-color: transparent !important; /* 필요시 배경도 투명하게 */
}

/* 2. 클릭(포커스) 되었을 때 나타나는 파란색 테두리도 제거 */
#material_popup + .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    outline: none !important;
}



/*
#company_popup + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
}

#product_popup + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
}
#material_popup + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
}
*/
#product_div {
    background-color: #e9fdec !important;
}

#half_product_div + .select2-container .select2-selection--single .select2-selection__rendered {
    /*background-color: #e9fdec !important;*/
    background-color: #fdf5e6 !important;
    height: 35px;
}



#customer_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}

#item_product_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}

#order_site_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #e9fdec !important;
    height: 35px;
}



#shipment_site_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}

#lot_condition + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}

#customer_condition + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}


#item_product_condition + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}

#item_product_condition_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}

#order_site_condition + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}

#order_site_condition_div + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}

#billet_condition + .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 35px;
}



/*
.select2_white .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #fff !important;
    height: 36px;
}*/
.swal2-popup {
    font-size: 1rem !important;
    font-family: Georgia, serif;
    -webkit-border-radius: 40px;
    /*width: 120px;
    height: 120px;*/
}

.swal-wide {
    width: 300px !important;
}

.swal-wide-megaphone {
    width: 200px !important;
}

.swal-wide-middle {
    width: 400px !important;
}

.swal-wide-obtain {
    width: 600px !important;
}

.mes_fp {
    font-size: 1.2em;
    padding-top: 0px
}

.select2-dropdown {
    z-index: 10060 !important; /*1051;*/
}

table.dataTable td {
    font-size: 1em;
}




.tb_normal {
    border: 1px solid #000;
    background: #fff
}


.bly {
    color: black;
    background-color: #e9fdec
}



.bly2 {
    color: black;
    background: #e9f1fd
}

.bly3 {
    /*padding: 0px;*/
    /*background: #b3f1c0;*/
    background: #e9fdec;
    background-clip: content-box;
}

.bly4 {
    color: black;
    background: #66ffd9 /*#e0fb00*/
}

.bly5 {
    color: black;
    background: LightYellow
}


.bly6 {
    color: black;
    background: OldLace
}


.hidden {
    display: none;
}

.hidden_bottom_title {
    display: none
}

/*
.swal2-overflow {
   overflow-x: visible;
		overflow-y: visible;
		display: -webkit-box;
		display: flex;
		position: fixed;
		z-index: 350000 ;
}

.swal2-container {
    display: -webkit-box;
    display: flex;
    position: fixed;
    z-index: 300000 ;
}
*/


.swal2-container {
    z-index: 3600 !important;
}


.timepicker {
    z-index: 50000 !important;
}

.ui-timepicker-container {
    z-index: 50010 !important;
}


.table th {
    font-size: 13px;
}

.table th {
    font-size: 13px;
}


.w-30 {
    width: 30px !important;
}

.bld {
    font-weight: 700;
}

.z_contaier {
    position: relative;
}

.z_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.up {
    text-transform: uppercase;
}

.plus {
    /*padding: 0px;*/
    /*background: #fff2cc;*/
    background: #e9fdec;
    border-top: 0px;
    border: 0px solid;
    outline: 0;
}

.tdr {
    background: #ff0000;
    color: white;
}


.blh {
    background: #dfdfdf;
    color: black;
}

.blh2 {
    background: #fdfdfd;
    color: black;
}



.ptlr10 {
    padding-left: 10px;
    padding-right: 10px;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.tar {
    text-align: right;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.clr {
    color: red;
}

.clb {
    color: blue;
}

.fit_box50 {
    width: 50px;
}

.fit_box60 {
    width: 60px;
}

.fit_box65 {
    width: 65px;
}

.fit_box70 {
    width: 70px;
}

.fit_box80 {
    width: 80px;
}

.fit_box90 {
    width: 90px;
}

.fit_box100 {
    width: 100px;
}

.fit_box110 {
    width: 110px;
}

.fit_box120 {
    width: 120px;
}

.fit_box130 {
    width: 130px;
}

.fit_box140 {
    width: 140px;
}

.fit_box150 {
    width: 150px;
}

.fit_box160 {
    width: 160px;
}

.fit_box220 {
    width: 220px;
}

.modal-full20 {
    min-width: 20%;
    margin: 10;
}

.modal-full25 {
    min-width: 25%;
    margin: 10;
}

.modal-full30 {
    min-width: 30%;
    margin: 10;
}

.modal-full35 {
    min-width: 35%;
    margin: 10;
}

.modal-full40 {
    min-width: 40%;
    margin: 10;
}

.modal-full45 {
    min-width: 45%;
    margin: 10;
}

.modal-full50 {
    min-width: 50%;
    margin: 10;
}

.modal-full50vw {
    min-width: 50vw;
    margin: 0;
}

.modal-full55 {
    min-width: 55%;
    margin: 10;
}

.modal-full60 {
    min-width: 60%;
    margin: 10;
}


.modal-full65 {
    min-width: 65%;
    margin: 10
}

.modal-full70 {
    min-width: 70%;
    margin: 10;
}

.modal-full75 {
    min-width: 75%;
    /*margin-left:8%;*/
    /*margin-top:1%;*/
    margin: 10;
}

.modal-full80 {
    min-width: 80%;
    margin-left: 4%;
}

.modal-full90 {
    min-width: 90%;
    margin: 10;
}

.modal-full {
    min-width: 99%;
    margin: 10;
}

/*    .modal-full .modal-content {
			min-height: 50vh;
		}*/


.modal.modal-center {
    text-align: center;
}


.modal-dialog.modal-center {
    display: inline-block;
    text-align: left;
    vertical-align: top; /*middle;*/
}



.clg {
    background: #27b462;
    color: white;
}

.chart_01 {
    padding: 2rem !important;
}

.slash {
    background: url('./resource/img/slash.png');
    background-size: 100% 100%;
}

.bg_gray {
    background: #dedede;
}


table {
    border-collapse: collapse;
    border: 1px solid black; /* 테이블 외곽선 */
}

th, td {
    border: 1px solid #999; /* 각 셀 테두리 */
}



/* ===== Modern Table ===== */

.dataTables_wrapper .dataTables_filter input {
    border-radius: 6px;
    border: 1px solid #cbd5f5;
    padding: 4px 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px;
}

.table_2_20260207 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    font-size: 13px;
}


    .table_2_20260207 thead th {
        background: #1e293b; /* slate-800 */
        color: #f8fafc;
        font-weight: 500;
        text-align: center;
        padding: 6px 6px;
        border-bottom: 1px solid #334155;
        white-space: nowrap;
    }

    /* Body */
    .table_2_20260207 tbody td {
        padding: 4px 6px;
        color: #0f172a;
        border-bottom: 1px solid #e5e7eb;
        vertical-align: middle;
    }

    /* Zebra */
    .table_2_20260207 tbody tr:nth-child(even) {
        background: #f9fafb;
    }

    /* Hover */
    .table_2_20260207 tbody tr:hover {
        background: #e0f2fe;
        transition: background 0.15s ease-in-out;
    }

    /* 마지막 row border 제거 */
    .table_2_20260207 tbody tr:last-child td {
        border-bottom: none;
    }

    /* 체크 / 아이콘 컬럼 */
    .table_2_20260207 th:first-child,
    .table_2_20260207 td:first-child {
        width: 40px;
        text-align: center;
    }

    /* 정렬 아이콘 */
    .table_2_20260207 th i {
        opacity: 0.8;
        font-size: 12px;
    }


.table_2_20260109 {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #999;
}

    .table_2_20260109 thead {
        /*background:#b4c6e7;*/
        border: 1px solid #999;
    }

    .table_2_20260109 th {
        /*border: thin solid #aaa;*/
        border-collapse: collapse;
        padding-top: 5px;
        padding-bottom: 5px;
        border: 1px solid #999;
    }

    .table_2_20260109 td {
        border: 1px solid #aaa;
        padding: 3px;
        color: black;
    }


.table_1 {
    width: 100%;
    border-collapse: collapse;
}

    .table_1 th.fb {
        font-weight: bold;
        color: black
    }

    .table_1 th.fbw {
        font-weight: bold;
        color: white
    }

    .table_1 th.bct {
        background-color: #fbc5c5
    }

    .table_1 th.bcsum {
        background-color: #c7f5dc
    }


    .table_1 td.b2lr {
        border-left: 2px solid #000;
        border-right: 2px solid #000;
    }

    .table_1 td.b2lbr {
        border-left: 2px solid #000;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .table_1 th.tar {
        text-align: right;
    }

    .table_1 th.tal {
        text-align: left;
    }

    .table_1 td.tar {
        text-align: right;
    }

    .table_1 td.tal {
        text-align: left;
    }

    .table_1 th.b2 {
        border: 2px solid #000;
    }


    .table_1 th.b2lt {
        border-left: 2px solid #000;
        border-top: 2px solid #000;
    }

    .table_1 th.b2l {
        border-left: 2px solid #000;
    }

    .table_1 th.b2r {
        border-right: 2px solid #000;
    }

    .table_1 th.b2llt {
        border-left: 1px solid #000;
        border-top: 2px solid #000;
    }

    .table_1 th.b2lrt {
        border-left: 2px solid #000;
        border-right: 2px solid #000;
        border-top: 2px solid #000;
    }

    .table_1 th.b2t {
        border-top: 2px solid #000;
    }


    .table_1 th.b2lb {
        border-bottom: 2px solid #000;
        border-left: 2px solid #000;
    }

    .table_1 td.b2tr {
        border-top: 2px solid #000;
        border-right: 2px solid #000;
    }

    .table_1 td.b2t {
        border-top: 2px solid #000;
    }

    .table_1 td.b2tb {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .table_1 th.b2r {
        border-right: 2px solid #000;
    }

    .table_1 th.b2rt {
        border-right: 2px solid #000;
        border-top: 2px solid #000;
    }

    .table_1 th.b2ltb {
        border-left: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .table_1 th.b2rb {
        border-bottom: 2px solid #000;
        border-right: 2px solid #000;
    }


    .table_1 td.b2lt {
        border-left: 2px solid #000;
        border-top: 2px solid #000;
    }

    .table_1 td.b2ltb {
        border-left: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .table_1 td.b2rtb {
        border-right: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .table_1 td.b2l {
        border-left: 2px solid #000;
    }

    .table_1 td.b2r {
        border-right: 2px solid #000;
    }

    .table_1 td.b2lb {
        border-bottom: 2px solid #000;
        border-left: 2px solid #000;
    }



    .table_1 th.b2b {
        border-bottom: 2px solid #000;
    }

    .table_1 td.b2b {
        border-bottom: 2px solid #000;
    }

    .table_1 td.b2rb {
        border-bottom: 2px solid #000;
        border-right: 2px solid #000;
    }

    .table_1 td.f15cb {
        font-size: 15px;
        color: blue;
    }

    .table_1 td.h30 {
        height: 30px;
    }

    /*.table_1 tr ,*/
    .table_1 th,
    .table_1 td {
        border: 1px solid black;
        text-align: center;
        padding: 3px;
    }

    .table_1 h1 {
        margin: 0;
    }


.modal-header {
    height: 30px;
    background-color: #ddd; /*#18456b;*/
    color: black;
}

.modal-title {
    margin-top: -10px;
    font-size: 16px;
}

.modal-title2 {
    margin-top: -10px;
    font-size: 16px;
}

.modal-header button {
    margin-top: -30px !important;
    color: white;
}


a.no-uline {
    text-decoration: none
}



.modal[data-modal-color="bluegray"] .modal-content {
    background: #607d8b;
}