@charset "utf-8";
.modalContainer {
    padding: 0 !important;
    /*position: fixed;*/
}

/* jquery.ui.modal override */
.modalContainer.ui-widget {
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    box-shadow: 3px 3px 6px #aaa
}

.modalContainer.ui-widget-content {
    background: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
}

.modalContainer .ui-widget-content.modal a {
    color: rgb(51, 51, 51);
}

.modalContainer .ui-widget-header {
    color: #fff;
    border: 0;
    background: #2c3e50;
    font-weight: bold;
    border-radius: 0;
}

.modalContainer .ui-dialog-title {
    font-size: 15px;
    color: #fff;
    font-family: 'Noto Sans Korean';
    font-weight: 600;
}

.modalContainer .ui-dialog-content {
    overflow: auto;
}

.modalContainer .ui-dialog-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
}

.modalContainer .ui-dialog-buttonpane {
    padding: 0 0 0 0
}


.modalContainer .ui-dialog-titlebar-buttonpane {
    margin-right: 15px;
}

/*button*/
.modalContainer .ui-dialog-buttonpane button {
    border-radius: 5px;
    background: #172277;
    color: #fff;
    border: 0;
}

.modalContainer .ui-widget-header .ui-icon {
    background-image: url(images/jquery-ui-1.12.1.custom/ui-icons_ffffff_256x240.png) !important;
}

.modalContainer .ui-state-default, .modalContainer .ui-state-default, .modalContainer .ui-widget-header .ui-state-default {
    border: 0 !important;
    background: transparent !important;
}

.modalContainer .ui-dialog-titlebar-close {
    border: 0;
    background: url(images/BSCommon/modal/ico_btn_close.png) no-repeat 50% 50% !important;
    background-size: 90% !important;
    right: .6em;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    overflow: hidden;
}

.modalContainer .ui-dialog-titlebar-close .ui-icon,
.modalContainer .ui-dialog-titlebar-close .ui-button-icon,
.modalContainer .ui-dialog-titlebar-close .ui-button-icon-space,
.modalContainer .ui-dialog-titlebar-close span {
    display: none !important;
}

.modalContainer .ui-dialog-titlebar > button.ui-dialog-titlebar-close {
    display: none !important;
}


.modalContainer .modal-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #5b5b5b url(images/BSCommon/modal/loading_auto.gif?ver=200116) 50% 25% no-repeat;
    z-index: 9999;
    opacity: 0.6;
    background-size: 65px
}

.modalContainer .modal-loader .txt-area {
    margin-top: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -98px;
    text-align: center
}

.modalContainer .modal-loader .txt-area > .big-text {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Noto Sans Korean';
}

.modalContainer .modal-loader .txt-area > .small-text {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    font-family: 'Noto Sans Korean';
}

table tbody tr td .ellipsis_td {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

table tbody tr td .ellipsis_td > * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jBox-Tooltip .jBox-container {
    border: 2px solid #49d;
    border-radius: 4px;
    background: #fff;
    color: #000;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.jBox-Tooltip .jBox-content {
    padding: 0 10px;
    line-height: 28px;
}

.jBox-Tooltip .jBox-pointer:after {
    border: 2px solid #49d;
    background: #fff;
    width: 15px;
    height: 20px;
}

.jBox-Tooltip .jBox-pointer-top, .jBox-Tooltip .jBox-pointer-bottom {
    width: 22px;
    height: 8px;
}

.jBox-Tooltip .jBox-pointer-right, .jBox-Tooltip .jBox-pointer-left {
    width: 8px;
    height: 22px;
}

.jBox-Tooltip .jBox-pointer-top:after {
    left: 1px;
    top: 6px;
}

.jBox-Tooltip .jBox-pointer-right:after {
    top: 1px;
    right: 6px;
}

.jBox-Tooltip .jBox-pointer-bottom:after {
    left: 1px;
    bottom: 6px;
}

.jBox-Tooltip .jBox-pointer-left:after {
    top: 1px;
    left: 6px;
}


.jBox-Modal .jBox-container {
    border: 2px solid #49d;
}

.jBox-Modal .jBox-title {
     padding: 0 10px;
     line-height: 28px;
 }

.jBox-Modal.jBox-closeButton-box:before {
    width: 28px;
    height: 28px;
    background: #49d;
}

.jBox-Modal .jBox-closeButton {
    background: #ddd;
}

.jBox-Modal.jBox-closeButton-box:before {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.jBox-Modal.jBox-closeButton-box .jBox-closeButton path {
    fill: #000;
}

.jBox-Modal.jBox-closeButton-box .jBox-closeButton:hover path {
    fill: #000;
}

.jBox-Modal.jBox-closeButton-box .jBox-closeButton:active path {
    fill: #bbb;
}
.jBox-Modal .jBox-footer button{
    display: block;
    cursor: pointer;
    text-align: center;
    line-height: 2.3rem;
    height: 2.3rem;
    overflow: hidden;
    padding: 0 0.5rem;
    transition: color .2s, background-color .2s;
    box-sizing: border-box;
    font-size: 1rem;
    border:none;
    text-align:center;
    width:100%;
}
.jBox-Modal .jBox-footer .button-close button {
    color:#fff;
    background:#4a90d9;
}
.jBox-footer .button-close button:hover, .jBox-footer .button-close button:active {
    background:#357abd;
}
/* confirmUI 버튼 스타일 */
.jBox-Confirm-button-submit {
    background: #4a90d9;
    color: #fff;
}
.jBox-Confirm-button-submit:hover,
.jBox-Confirm-button-submit:active {
    background: #357abd;
}
.jBox-Confirm-button-cancel {
    background: #e0e0e0;
    color: #333;
}
.jBox-Confirm-button-cancel button {
    background: transparent;
    color: #333;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.jBox-Confirm-button-cancel:hover,
.jBox-Confirm-button-cancel:active {
    background: #ccc;
    color: #222;
}
.btn-box.margin-auto {
    margin:3px auto;
}

/* ============================================================
   FlexFileManager (ffm-*) 스타일
   ffm-{카테고리}-{요소}-{상태} 네이밍 규칙
   카테고리: layout, input, btn, progress, file, result, error, dropzone, state
   ============================================================ */

/* ── layout: 레이아웃 ── */

/* 최상위 컨테이너 — 파일 업로드 UI 전체를 감싸는 영역 */
.ffm-layout-container { position: relative; }

/* 옵션 패널 — 업로드 설정 UI 영역 */
.ffm-option-panel { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background: #f9f9f9; }
.ffm-option-panel h3 { margin-top: 0; }
.ffm-option-row { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── input: 파일 입력 ── */

/* 파일 입력 래퍼 — file input을 감싸는 영역 */
.ffm-input-wrap { margin-bottom: 15px; }

/* 파일 입력 요소 — 실제 <input type="file"> 요소 */
.ffm-input-file { /* 기본 스타일 없음 — 필요 시 커스터마이징 */ }

/* ── btn: 버튼 ── */

/* 버튼 그룹 — 업로드/중단 등 버튼을 묶는 영역 */
.ffm-btn-group { margin-bottom: 15px; display: flex; gap: 10px; }

/* 중단 버튼 스타일 */
.ffm-btn-abort { background: #dc3545; }

/* 재개 버튼 스타일 */
.ffm-btn-resume { background: #28a745; }

/* 다운로드 버튼 스타일 */
.ffm-btn-download { background: #17a2b8; margin-top: 10px; }

/* 전체 업로드 시작 버튼 */
.ffm-btn-start-all { /* 기본 스타일 없음 — btn-execute 클래스와 함께 사용 */ }

/* 전체 업로드 중단 버튼 */
.ffm-btn-cancel-all { /* 기본 스타일 없음 — btn-execute + ffm-btn-abort 클래스와 함께 사용 */ }

/* ── progress: 진행률 ── */

/* 진행률 영역 — 개별 파일 진행률 표시 컨테이너 */
.ffm-progress-area { display: none; margin-bottom: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }

/* 진행률 정보 텍스트 — 백분율, 전송 속도 등 */
.ffm-progress-info { margin-bottom: 8px; }
.ffm-progress-info span + span { margin-left: 20px; }

/* 진행률 트랙 — 진행률 바의 배경 */
.ffm-progress-track { background: #e9ecef; border-radius: 4px; height: 24px; margin-bottom: 8px; }

/* 진행률 바 — 실제 진행 상태를 표시하는 채워지는 영역 */
.ffm-progress-bar { background: #007bff; height: 100%; border-radius: 4px; width: 0%; transition: width 0.3s; text-align: center; color: #fff; line-height: 24px; font-size: 12px; }
.ffm-progress-bar.ffm-state-complete { background: #28a745; }
.ffm-progress-bar.ffm-state-fail { background: #dc3545; }

/* 진행률 메타 정보 — 전송 속도, 남은 시간 등 부가 정보 */
.ffm-progress-meta { font-size: 13px; color: #666; }
.ffm-progress-meta span + span { margin-left: 20px; }

/* 전체 진행률 영역 — 멀티 업로드 시 전체 파일의 진행률 컨테이너 */
.ffm-progress-total { display: none; margin-bottom: 15px; padding: 12px; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; }

/* 전체 진행률 정보 텍스트 */
.ffm-progress-total-info { margin-bottom: 6px; font-size: 13px; }

/* 전체 진행률 트랙 */
.ffm-progress-total-track { background: #e9ecef; border-radius: 4px; height: 12px; margin-bottom: 4px; }

/* 전체 진행률 바 */
.ffm-progress-total-bar { background: #007bff; height: 100%; border-radius: 4px; width: 0%; transition: width 0.3s; }

/* 전체 진행률 상세 — 전송 속도, 남은 시간, 전송량 등 */
.ffm-progress-total-detail { font-size: 11px; color: #999; }

/* 전체 진행률 라벨 — "0 %" 등 백분율 텍스트 */
.ffm-progress-total-label { /* 기본 스타일 없음 — <strong> 태그 내부에서 사용 */ }

/* 전체 전송 속도 라벨 — Bitrate 텍스트 */
.ffm-progress-total-bitrate { /* 기본 스타일 없음 — <strong> 태그 내부에서 사용 */ }

/* ── result: 결과 ── */

/* 결과 영역 — 업로드 완료 결과를 표시하는 컨테이너 */
.ffm-result-area { display: none; margin-bottom: 15px; padding: 15px; border: 1px solid #28a745; border-radius: 4px; background: #f0fff0; }
.ffm-result-area h4 { margin-top: 0; color: #28a745; }

/* 결과 내용 — 업로드 완료 후 FileId, 파일명, 크기 등을 표시하는 영역 */
.ffm-result-content { /* 기본 스타일 없음 — 내부에 테이블 등이 삽입됨 */ }

/* ── error: 오류 ── */

/* 오류 영역 — 업로드 실패/검증 실패 메시지를 표시하는 컨테이너 */
.ffm-error-area { display: none; margin-bottom: 15px; padding: 15px; border: 1px solid #dc3545; border-radius: 4px; background: #fff5f5; }
.ffm-error-area h4 { margin-top: 0; color: #dc3545; }

/* 오류 내용 — 오류 메시지 텍스트가 삽입되는 영역 */
.ffm-error-content { /* 기본 스타일 없음 — 내부에 <p> 등이 삽입됨 */ }

/* ── dropzone: Drag & Drop ── */

/* 드롭존 영역 — 파일을 드래그하여 놓을 수 있는 영역 */
.ffm-dropzone-area { margin-bottom: 15px; padding: 40px; border: 2px dashed #ccc; border-radius: 8px; text-align: center; color: #999; cursor: pointer; transition: all 0.3s; }

/* 드래그 오버 상태 — 파일이 드롭존 위에 있을 때 시각적 피드백 */
.ffm-dropzone-area.ffm-dropzone-dragover { border-color: #007bff; background: #f0f7ff; }

/* ── file: 파일 목록/행 ── */

/* 파일 목록 컨테이너 — 멀티 업로드 시 파일 행들을 담는 영역 */
.ffm-file-list { margin-bottom: 15px; }

/* 파일 행 — 개별 파일의 정보, 진행률, 버튼을 표시하는 행 */
.ffm-file-row { padding: 12px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start; }

/* 파일 미리보기 — 이미지 파일의 썸네일 캔버스 */
.ffm-file-preview { width: 48px; height: 48px; border-radius: 4px; border: 1px solid #e9ecef; flex-shrink: 0; object-fit: cover; }

/* 파일 본문 — 파일명, 진행률, 버튼 등을 포함하는 영역 */
.ffm-file-body { flex: 1; min-width: 0; }

/* 파일 행 헤더 — 파일명과 상태를 표시하는 상단 영역 */
.ffm-file-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

/* 파일명 — 클릭 시 편집 모드로 전환 (kebab-case 통일) */
.ffm-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; display: inline-block; cursor: pointer; }
.ffm-file-name:hover { text-decoration: underline; color: #007bff; }

/* 파일 크기 — 파일 용량 표시 (kebab-case 통일) */
.ffm-file-size { font-size: 12px; color: #888; margin-left: 6px; }

/* 파일명 변경 래퍼 — 편집 모드 시 input + 저장/취소 버튼을 감싸는 영역 */
.ffm-file-rename-wrap { display: inline-flex; gap: 4px; align-items: center; }
.ffm-file-rename-wrap input { font-size: 13px; padding: 1px 6px; border: 1px solid #007bff; border-radius: 3px; width: 200px; }
.ffm-file-rename-wrap button { font-size: 11px; padding: 1px 8px; }

/* 파일 상태 텍스트 — "대기", "업로드 중", "완료", "실패" 등 */
.ffm-file-status { font-size: 12px; color: #666; font-weight: 500; }
.ffm-file-status.ffm-state-complete { color: #28a745; }
.ffm-file-status.ffm-state-fail { color: #dc3545; }
.ffm-file-status.ffm-state-aborted { color: #ffc107; }

/* 파일별 진행률 트랙 */
.ffm-file-progress-track { background: #e9ecef; border-radius: 4px; height: 8px; margin-bottom: 4px; }

/* 파일별 진행률 바 */
.ffm-file-progress-bar { background: #007bff; height: 100%; border-radius: 4px; width: 0%; transition: width 0.3s; }
.ffm-file-progress-bar.ffm-state-complete { background: #28a745; }
.ffm-file-progress-bar.ffm-state-fail { background: #dc3545; }

/* 파일별 진행률 상세 — 전송 속도, 남은 시간, 백분율, 전송량 */
.ffm-file-progress-detail { font-size: 11px; color: #999; margin-bottom: 6px; }

/* 파일 액션 버튼 그룹 — 업로드/중단/삭제/다운로드 버튼 영역 */
.ffm-file-actions { display: flex; gap: 6px; align-items: center; }
.ffm-file-actions button { font-size: 12px; padding: 2px 10px; }

/* 개별 업로드 시작 버튼 */
.ffm-file-actions .ffm-file-btn-start { background: #007bff; }

/* 개별 업로드 중단 버튼 */
.ffm-file-actions .ffm-file-btn-cancel { background: #dc3545; display: none; }

/* 개별 파일 삭제 버튼 */
.ffm-file-actions .ffm-file-btn-delete { background: #6c757d; }

/* 개별 다운로드 링크 */
.ffm-file-actions .ffm-file-download-link { display: none; font-size: 12px; padding: 2px 10px; background: #17a2b8; color: #fff; text-decoration: none; border-radius: 3px; }

/* 개별 다운로드 버튼 */
.ffm-file-actions .ffm-file-btn-download { display: none; background: #17a2b8; }

/* 다운로드 중단 버튼 */
.ffm-file-actions .ffm-file-btn-download-abort { display: none; }

/* 파일별 오류 메시지 */
.ffm-file-error { font-size: 12px; color: #dc3545; margin-top: 4px; }

/* ── state: 상태 ── */

/* 완료 상태 */
.ffm-state-complete { /* 각 요소별 스타일에서 적용 */ }

/* 실패 상태 */
.ffm-state-fail { /* 각 요소별 스타일에서 적용 */ }

/* 중단 상태 */
.ffm-state-aborted { /* 각 요소별 스타일에서 적용 */ }


/* ============================================================
   COM.pager (jquery.paging.js) 스타일
   ============================================================ */

/* 페이저 컨테이너 */
.pager-wrap {
    margin-top: 20px;
    text-align: center;
}

.pager-wrap .pagination {
    display: inline-flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.pager-wrap .pagination li {
    display: flex;
}

/* 페이지 링크 공통 */
.pager-wrap .pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1e1e1e;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.pager-wrap .pagination .page-link:hover {
    background: #f5f5f5;
}

/* 현재 페이지 강조 */
.pager-wrap .pagination .page-item.active .page-link {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
    font-weight: 600;
}

/* 네비게이션 버튼 (처음/이전/다음/마지막) */
.pager-wrap .pagination .pagination-sm .page-link {
    min-width: 32px;
    font-size: 13px;
    color: #666;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .pager-wrap .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}