@charset "utf-8";

.material-transfer-top {
    padding: 10px 0;
}

.material-transfer-panel-wrap {
    border: 0;
}

.material-transfer-panel-box {
    height: calc(100vh);
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 5px;
}

.material-transfer-prep-title {
    float: left;
}

.material-transfer-prep-actions {
    float: right;
}

.material-shipping-top {
    padding: 5px 0 1px;
}

.material-shipping-inline-form {
    display: inline-block;
}

.material-shipping-bol-row {
    cursor: pointer;
}

.material-shipping-selected-row td {
    background: #e6f2ff;
}

.material-shipping-bol-input {
    width: 100%;
    height: 24px;
    border: 1px solid #d6d6d6;
    padding: 0 4px;
}

.material-shipping-bol-no-input {
    min-width: 120px;
}

.material-shipping-bol-code-input {
    min-width: 48px;
}

.material-shipping-bol-wgt-input {
    min-width: 60px;
}

@page material-transfer-sheet-page {
    margin: 12mm;
}

.material-transfer-sheet-body,
.material-transfer-sheet-body * {
    box-sizing: border-box;
}

.material-transfer-sheet-body {
    page: material-transfer-sheet-page;
    margin: 0;
    padding: 20px;
    background: #fff;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
}

.material-transfer-print-toolbar {
    text-align: right;
    margin-bottom: 14px;
}

.material-transfer-print-toolbar button {
    border: 0;
    background: #2777e4;
    color: #fff;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
}

.material-transfer-sheet {
    width: 100%;
    min-height: 560px;
    border: 1px solid #111;
    padding: 0 0 20px;
}

.material-transfer-sheet-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 48px 18px 16px;
    font-size: 14px;
    font-weight: 700;
}

.material-transfer-sheet-barcode {
    width: 150px;
    height: 24px;
}

.material-transfer-sheet-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.material-transfer-sheet-table th {
    position: static;
    top: auto;
    height: 26px;
    background: #000;
    color: #fff;
    font-weight: 700;
    border-right: 1px solid #fff;
}

.material-transfer-sheet-table th:last-child {
    border-right: 0;
}

.material-transfer-sheet-table td {
    height: 30px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 4px 6px;
}

.material-transfer-sheet-table .arLeft {
    text-align: left;
}

.material-transfer-sheet-col-no {
    width: 8%;
}

.material-transfer-sheet-col-pallet {
    width: 16%;
}

.material-transfer-sheet-col-destination {
    width: 22%;
}

.material-transfer-sheet-col-part {
    width: 20%;
}

.material-transfer-sheet-col-type {
    width: 24%;
}

.material-transfer-sheet-col-qty {
    width: 10%;
}

.material-transfer-popup-body,
.material-transfer-popup-body * {
    box-sizing: border-box;
}

.material-transfer-popup-body {
    margin: 0;
    padding: 16px;
    background: #fff;
    color: #111;
}

.material-transfer-popup {
    width: 100%;
}

.material-transfer-popup-title {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}

.material-transfer-popup-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.material-transfer-popup-table th {
    position: static;
    top: auto;
    height: 28px;
    background: #f3f3f3;
    border: 1px solid #d6d6d6;
    font-weight: 700;
}

.material-transfer-popup-table td {
    height: 30px;
    border: 1px solid #e0e0e0;
    padding: 4px 6px;
}

@media print {
    .material-transfer-sheet-body {
        padding: 0;
    }

    .material-transfer-print-toolbar {
        display: none;
    }

    .material-transfer-sheet {
        min-height: 100vh;
    }
}

html, body {height:100%; position:relative;}
.wrap {display:block; height:auto; overflow:hidden;}

/* login */
body.bgGray {background:#333;}
.loginTop {position:relative; height:400px; background:#a1b304;}
.loginTop .loginLogo {position:absolute; bottom:50px; left:0; width:100%; text-align:center;}
.loginTop .loginLogo img {max-width:200px;}
.loginCon {width:400px; margin:0 auto; overflow:hidden;}
.loginCon h1 {margin-top:44px; color:#bebebe; font-size:16px; font-weight:300; text-align:center;}
.loginCon .loginBox {margin-top:30px;}
.loginCon .loginInput { background:transparent; overflow:hidden; border-bottom: 1px solid #999; box-sizing: border-box;}
.loginCon .loginInput.on { border-bottom: 1px solid #fff; }
.loginCon .loginInput input::placeholder{color:#999;}
.loginCon .loginInput.on { border-bottom: 1px solid #fff; }
.loginCon .loginInput.on input::placeholder{color:#fff;}
.loginCon .loginInput .text {width:100%; height:58px; border:none; padding:0 0 0 72px; margin:0; border-radius:0; outline:none; color:#fff; font-size:16px; font-weight:400;}
.loginCon .loginInput .id {background:url('../img/ico_user01_w.png') no-repeat 26px center;}
.loginCon .loginInput .pw {background:url('../img/ico_lock01_w.png') no-repeat 25px center;}
.loginCon .loginBox button {display:block; width:100%; height:58px; margin-top:26px; background:#8c9c02; color:#fff; font-size:18px; font-weight:700;}
.loginCon .loginBox .loginChk {margin-top:22px;}
.loginCon .loginBox .loginChk input[type="checkbox"] {display: none; width:18px; height:18px;}
.loginCon .loginBox .loginChk label {color:#fff; font-size:16px; vertical-align:middle;}
.loginCon .loginBox .loginChk label::before {content:""; display: inline-block; margin-right: 10px; width: 18px; height: 18px; vertical-align: -3px; background:#fff url("../img/check_off.png") no-repeat 50% 50%; -webkit-background-size: contain; background-size: contain; box-sizing: border-box;}
.loginCon .loginBox .loginChk input:checked + label::before {background:#fff url("../img/check_on.png") no-repeat 50% 50%; -webkit-background-size: contain; background-size: contain;}

/* layout */
.comnWrap {display:block; height:100%; overflow:hidden; overflow-x:auto; position:relative; padding:0 0px 0 230px; background:#FFF; min-width:1360px; min-height:1000px;}
.comnWrap.full {padding:0; min-width:100%; min-height:auto;}
.comnWrap .leftSec {position:absolute; left:0; top:0; width:230px; height:100%; background:#555; overflow:hidden; overflow-y:auto;}
.comnWrap .leftSec::-webkit-scrollbar,
.comnWrap .leftSec::-webkit-scrollbar {width: 5px;background:#252424;}
.comnWrap .leftSec::-webkit-scrollbar-thumb,
.comnWrap .leftSec::-webkit-scrollbar-thumb {background: #4f4f4f;border-radius:50px;}
.comnWrap .leftSec::-webkit-scrollbar-track,
.comnWrap .leftSec::-webkit-scrollbar-track {background: none;}
.comnWrap .leftSec .logo {display:block; height:auto; overflow:hidden; padding:10px 10px; text-align:center;}
.comnWrap .leftSec .logo img {width:100px;}
.comnWrap .leftSec .mngUtilSec {display:block; padding:15px; background:#444;}
.comnWrap .leftSec .mngUtilSec .mngName {color:#ccc; font-size:14px; font-weight:300; margin-bottom:8px;}
.comnWrap .leftSec .mngUtilSec .mngName em {color:#FFF; font-weight:500; font-size:16px; margin-right:4px;}
.comnWrap .leftSec .mngUtilSec .mngPart {color:#ccc; font-size:14px; font-weight:300; margin-bottom:15px;}
.comnWrap .leftSec .lnbSec {display:block; height:auto; padding:20px; position:relative;}
.comnWrap .leftSec .lnbSec:after {content:''; position:absolute; left:20px; top:-3px; width:40%; height:6px; background:#0e7bed;}
.comnWrap .leftSec .lnbSec li {display:block; height:auto; overflow:hidden; position:relative; opacity:0.6; transition:.2s all;}
.comnWrap .leftSec .lnbSec li:hover {opacity:1.0;}
.comnWrap .leftSec .lnbSec li.on {opacity:1.0;}
.comnWrap .leftSec .lnbSec li .lnb {display:block; height:auto; position:relative; font-size:15px; border-bottom:1px solid #666;}
.comnWrap .leftSec .lnbSec li .lnb a {display:block; color:#FFF; padding:10px 10px 10px 5px;}
.comnWrap .leftSec .lnbSec li .lnb .ar {position:absolute; right:5px; top:15px; width:20px; height:11px; background:url(../img/ar_menu.png) no-repeat 50% 50%; background-size:15px 8px; transition:.2s all;}
.comnWrap .leftSec .lnbSec li .lnb .ar.on {transform: rotate( -180deg ); top:15px;}
.comnWrap .leftSec .lnbSec li dl {display:none; height:auto; overflow:hidden; padding:8px 15px; background:#666; border-radius:0 0 5px 5px;}
.comnWrap .leftSec .lnbSec li dl.on {display:block;}
.comnWrap .leftSec .lnbSec li dl dd {display:block; height:auto; font-size:14px; position:relative;}
.comnWrap .leftSec .lnbSec li dl dd a {display:block; color:#ccc; transition:.2s all; padding:3px 0 3px 10px;}
.comnWrap .leftSec .lnbSec li dl dd a:hover {color:#FFF;}
.comnWrap .leftSec .lnbSec li dl dd.on a {color:#FFF;}
.comnWrap .leftSec .lnbSec li dl dd:after {content:''; position:absolute; left:0; top:50%; transform:translate(0, -50%); width:4px; height:1px; background:#ccc;}
.comnWrap .leftSec .lnbSec li.on dl {display:block !important;}

.comnWrap .container {display:block; height:auto; overflow:hidden;}
.comnWrap .content {clear:both; display:block; height:auto; overflow:hidden; padding:0 20px 10px 20px;}
.comnWrap .content.clean {padding:0; background:none; border:0; border-radius:0;}
.gnbSec {display:block; height:auto; overflow:hidden; padding:0 0 0 20px; border-bottom:1px solid #666; margin-bottom:10px; background:#ccc;}
.gnbSec .gnbMenu {float:left; width:160px; height:40px; line-height:40px; background:#54a0f0; text-align:center; font-size:14px; border-right:1px solid #ccc; box-sizing:border-box;}
.gnbSec .gnbMenu a {display:block; color:#FFF; font-weight:400;}
.gnbSec .gnbMenu a:hover {background:#555;}
.gnbSec .gnbMenu.on a {background:#0e7bed;}

/* page Element */
.pageTitle {display:block; height:auto; overflow:hidden; padding:1px 0 1px 20px; font-size:18px; color:#333; letter-spacing:0; position:relative;}
.pageTitle:after {content:''; position:absolute; left:5px; top:50%; transform:translate(0, -50%); width:7px; height:2px; background:#0e7bed;}
.highTitle {display:block; height:auto; overflow:hidden; padding:5px 0 10px 0; margin-bottom:0; font-size:20px; color:#666; letter-spacing:0; position:relative; font-weight:500; border-bottom:1px solid #c5c5c5; }
.highTitle span {display:inline-block; margin-right:10px; padding-right:13px; position:relative;}
.highTitle span:after {content:''; position:absolute; right:0; top:50%; transform:translate(0, -50%); width:1px; height:15px; background:#c5c5c5;}
.highTitle span:last-child:after {background:none;}
.highTitle span em {display:inline-block; margin-left:10px; font-weight:300; color:#f15d2b;}
.midTitle {display:block; height:auto; overflow:hidden; padding:5px 0 1px 15px; margin-bottom:5px; font-size:16px; color:#333; letter-spacing:0px; position:relative; font-weight:400;}
.midTitle:after {content:''; position:absolute; left:5px; top:50%; transform:translate(0, -50%); width:3px; height:3px; background:#333; border-radius:50%;}

.conBlock {clear:both; display:block; height:auto; overflow:hidden; padding:3px 0; position:relative;}
.conBlock .halfCon {float:left; width:49.5%; margin-right:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .halfCon.clean {border:0; border-radius:0; background:none; padding:0;}
.conBlock .halfCon:last-child {margin-right:0;}
.conBlock .thirdCon {float:left; width:32.666%; margin-right:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .thirdCon:last-child {margin-right:0;}
.conBlock .left30Con {float:left; width:29%; margin-right:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .left70Con {float:left; width:70%; margin-right:0%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .right70Con {float:left; width:70%; margin-right:0%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .right30Con {float:left; width:29%; margin-left:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .left25Con {float:left; width:25%; margin-right:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .left35Con {float:left; width:35%; margin-right:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .left45Con {float:left; width:45%; margin-right:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .left50Con {float:left; width:49%; margin-right:0%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .right55Con {float:right; width:54%; margin-right:0%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .right65Con {float:right; width:64%; margin-right:0%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .right50Con {float:right; width:50%; margin-right:0%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .right25Con {float:left; width:25%; margin-left:1%; height:auto; overflow:hidden; border:1px solid #eee; background:#FFF; padding:20px;}
.conBlock .fullCon {clear:both; display:block; height:auto; overflow:hidden; border-top:1px solid #ccc; background:#FFF; padding:20px 0;}
.conBlock .fullCon.marMinus {margin-top:-1px;}

.conBlock .left30Con.clean,
.conBlock .left70Con.clean,
.conBlock .right70Con.clean,
.conBlock .right30Con.clean,
.conBlock .fullCon.clean,
.conBlock .left25Con.clean,
.conBlock .left50Con.clean,
.conBlock .right25Con.clean {border:0; border-radius:0; background:none; padding:0;}

.conBlock select {display:inline-block; width:auto; height:28px; line-height:26px; border:1px solid #ccc; border-radius:3px; -webkit-appearance: none; -moz-appearance:none; appearance: none; background:#f9f9f9 url(../img/ar_select.png) no-repeat 92% 50%; background-size:15px 9px; padding:0 50px 0 10px; font-size:13px;}
.conBlock select::-ms-expand {display: none;}
.conBlock select.small {height:30px; line-height:28px; margin:0 5px;}

.conBlock input[type="text"], .conBlock input[type="password"], .conBlock input[type="number"], .conBlock input[type="date"], .conBlock input[type="file"] {display:inline-block; width:100%; height:28px; line-height:26px; background:#f9f9f9; border:1px solid #ccc; padding:0 10px; box-sizing:border-box; font-size:14px; color:#333; border-radius:3px; box-sizing:border-box;}
.conBlock input.w {background:#FFF;}

.tabMenu {display:block; height:auto; overflow:hidden; position:relative; z-index:10;}
.tabMenu .cauTxt {position:absolute; right:0; top:50%; transform:translate(0, -50%); text-align:right; font-size:14px; color:#999;}
.tabMenu li {float:left; width:160px; font-size:13px; border:1px solid #ccc; margin-left:-1px; text-align:center; background:#f0f0f0;}
.tabMenu li a {display:block; color:#666; padding:8px 20px;}
.tabMenu li.on {background:#FFF; border-bottom:1px solid #FFF;}
.tabMenu li:first-child {margin-left:0;}
.tabMenu.faq li {width:auto;}

.allChk {clear:both; padding:10px 0;}
.desc {clear:both; display:block; height:auto; overflow:hidden; padding:10px 0; position:relative; font-size:14px; font-weight:300;}
.desc .schWording {float:left; height:auto; overflow:hidden;}
.desc .schWording i {display:inline-block; padding-right:12px; margin-right:8px; color:#e26637; position:relative; font-weight:400;}
.desc .schWording i a {color:#e26637;}
.desc .schWording i a:hover {text-decoration:underline; text-underline-position: under;}
.desc .schWording i:after {content:''; position:absolute; right:0; top:50%; transform:translate(0, -50%); width:1px; height:10px; background:#ccc;}
.desc .schWording i:last-child {padding-right:0; margin-right:0;}
.desc .schWording i:last-child:after {background:none;}
.desc .totalCount {position:absolute; right:0; top:50%; transform:translate(0, -50%); text-align:right;}
.desc .totalCount em {font-weight:400; color:#e26637;}

.listTable {clear:both; display:block; height:auto; overflow:hidden;}
.listTable .chkN input + span {padding:0 0 0 19px; vertical-align:top;}
.listTable table {padding:0; margin:0; width:100%; table-layout:fixed;}
.listTable th, .listTable td {border:1px solid #ddd; padding:8px; font-size:14px; text-align:center;}
.listTable th {font-weight:400; background:#f8fdf4; text-align:center; border-top:1px solid #999; border-bottom:1px solid #999;}
.listTable th:first-child, .listTable td:first-child {border-left:0;}
.listTable th:last-child, .listTable td:last-child {border-right:0;}
.listTable td {font-weight:300;}
.listTable td.link a {color:#3574dd; text-decoration:underline; font-weight:500;}
.listTable tr.hr, .listTable th.hr, .listTable td.hr {border-bottom:1px solid #aaa;}
.listTable tr:hover {background:#f8f8f8;}
.listTable textarea {display:inline-block; width:100%; height:100px; padding:15px; font-size:14px; color:#333; border:1px solid #ddd; background:#FFF; box-sizing:border-box;}

.itemTable {clear:both; display:block; height:auto; overflow:hidden;}
.itemTable table {padding:0; margin:0; width:100%; table-layout:fixed;}
.itemTable th, .itemTable td {padding:8px; font-size:14px;}
.itemTable th {font-weight:400; background:#fff6f3; text-align:left; border-right:1px solid #ddd;}
.itemTable td {font-weight:300; text-align:left;}
.itemTable td a:hover {color:#e26637;}
.itemTable tr:hover {background:#f8f8f8;}
.itemTable tr:first-child {border-top:1px solid #999;}
.itemTable tr {border-bottom:1px solid #ddd;}
.itemTable tr.devide {border-bottom:1px solid #999;}

.inputTable {clear:both; display:block; height:auto; overflow-x: auto}
.inputTable .cauTxt {display:block; height:auto; overflow:hidden; text-align:right; font-size:14px; color:#999; margin-bottom:10px;}
.inputTable table {padding:0; margin:0; width:100%; table-layout:fixed;}
.inputTable th, .inputTable td {border:1px solid #ddd; padding:8px; font-size:14px;}
.inputTable th {font-weight:400; background:#f8f8f8; text-align:left; padding:8px 15px;}
.inputTable th:first-child, .inputTable td:first-child {border-left:0;}
.inputTable th:last-child, .inputTable td:last-child {border-right:0;}
.inputTable td {font-weight:300; text-align:left;}
.inputTable tr.quest {background:#f0f0f0;}
.inputTable tr.quest th {background:#f0f0f0;}

.inputTable input[type="text"], .inputTable input[type="password"], .inputTable input[type="number"], .inputTable input[type="date"] {background:#f9f9f9; vertical-align:middle; margin-right:5px;}
.inputTable textarea {display:inline-block; width:100%; height:200px; line-height:24px; background:#FFF; border:1px solid #ccc; padding:10px; box-sizing:border-box; font-size:14px; color:#333; border-radius:5px; box-sizing:border-box;}
.inputTable select {margin-right:5px;}
.inputTable label {margin-right:20px;}
.inputTable label.radioN, .inputTable label.chkN {margin-right:0;}
.inputTable label:last-child {margin-right:0px;}

.inputTable .listTable th, .inputTable .listTable td {border:1px solid #ddd; padding:8px; font-size:14px; text-align:center;}
.inputTable .listTable th {font-weight:400; background:#f8fdf4; text-align:center; border-bottom:1px solid #999;}

.inputTable .itemTable th, .itemTable td {padding:8px; border:1px solid #ddd !important;}

/* page specific */
.item-stock-popup {background:#f7f7f7;}
.popup-wrap {padding:10px;}
.popup-title {font-size:18px; font-weight:bold; margin:5px 0 10px;}

#pl-list-table tbody tr.is-selected {background:#eef5ff;}
#pl-panel-table .panel-input {width:100%; min-width:60px;}
#pl-panel-table .panel-input[readonly] {background:#ebedeb;}
#pl-panel-table tbody tr.dup-serial td {background:#fff1b8;}

.material-search-panel {padding:5px 0 1px 0;}
.material-search-area {float:left;}
.material-search-form {display:inline-block;}
.material-upload-area {float:right;}
.material-list-table {padding:3px; max-height:calc(100vh - 200px);}
.material-list-actions {display:flex; justify-content:flex-start;}
.material-stat-open {color:#1f4fd6; font-weight:bold;}
.material-stat-partial {color:#2ca24c; font-weight:bold;}
.material-stat-close,
.material-closed-label {color:#dc3545; font-weight:bold;}
.material-rcv-input {width:90px;}
.material-remarks-input {width:100%; min-width:160px;}

#pre-list-table tbody tr.is-selected {background:#eef5ff;}
#pre-pallet-table tbody tr.is-scanned td {background:#eef8ef;}
.pre-summary-wrap {display:flex; gap:10px; margin-top:8px; margin-bottom:8px;}
.pre-summary-box {width: 300px; border:1px solid #ddd; background:#f3f5f8; padding:10px 12px; font-size:14px; font-weight:500;}
.pre-summary-box .num {float:right; font-weight:700;}
.pre-summary-box .num.scanned {color:#4169e1;}
.pre-summary-box .num.unscanned {color:#d14b4b;}
.pre-scan-table input[type="text"] {width:100%;}
#pre-pallet-table .pre-panel-qty-toggle {color:#4169e1; cursor:pointer; font-weight:600; text-decoration:underline;}
#pre-pallet-table .pre-panel-detail-row td {background:#fafafa; padding:0;}
#pre-pallet-table .pre-panel-detail {display:none; padding:8px 10px;}
#pre-pallet-table .pre-panel-detail-table {width:100%; border-collapse:collapse;}
#pre-pallet-table .pre-panel-detail-table th,
#pre-pallet-table .pre-panel-detail-table td {border:1px solid #ddd; padding:5px 6px;}
#pre-pallet-table .pre-panel-detail-table th {background:#eef1f5;}

#actual-list-table tbody tr.is-selected td,
#actual-pallet-table tbody tr.is-selected td {background:#eef8ef;}
#actual-pallet-table tbody tr.is-completed td,
#actual-panel-table tbody tr.is-received td {background:#eef8ef;}
#actual-panel-table tbody tr.is-selected td {background:#eef5ff;}
#actual-panel-table tbody tr.selection-locked td {background:#f5f5f5; color:#999; opacity:.65; cursor:not-allowed;}
.actual-status-received {color:#4169e1; font-weight:600;}
.actual-status-pending {color:#d14b4b; font-weight:600;}
.actual-summary-wrap {display:flex; gap:10px; margin-top:8px; margin-bottom:8px;}
.actual-summary-box {flex:1; border:1px solid #ddd; background:#f3f5f8; padding:10px 12px; font-size:14px; font-weight:500;}
.actual-summary-box .num {float:right; font-weight:700;}
.actual-scan-table input[type="text"] {width:100%;}

.goods-search-table select,
.goods-search-table input[type="text"] {margin-right:5px;}
.goods-search-table .goods-date-label {display:inline-block; margin:0 6px 0 8px;}
.goods-search-table .goods-date-sep {display:inline-block; margin:0 4px;}
#goods-list-table tbody tr.is-defective td {background:#fff5ef;}
#goods-list-table tbody tr.is-picked td {background:#eef3ff;}
.goods-status-good {color:#41733c; font-weight:600;}
.goods-status-defective {color:#d14b4b; font-weight:600;}
.goods-status-picked {color:#4169e1; font-weight:600;}
.goods-panel-stat-select {width:100%; margin-right:0 !important;}

.oqc-status-1 {color:#4169e1; font-weight: bold;}
.oqc-status-2 {color:#d14b4b; font-weight: bold;}
.oqc-check-all-wrap {display:inline-block; vertical-align:middle;}
.oqc-check-all-wrap input + span {padding-left:18px;}
.oqc-editor {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.oqc-reason-input {display:inline-block;}
.oqc-file-input {max-width:200px;}
.oqc-attachment-list {display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:24px;}
.oqc-attachment-btn {display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;}
.oqc-attachment-btn img {display:block; width:20px; height:20px;}
.oqc-attachment-modal {position:fixed; inset:0; z-index:2000;}
.oqc-attachment-backdrop {position:absolute; inset:0; background:rgba(0, 0, 0, 0.65);}
.oqc-attachment-dialog {position:relative; z-index:1; width:min(92vw, 980px); height:min(88vh, 820px); margin:4vh auto 0; background:#fff; border-radius:6px; overflow:hidden; display:flex; flex-direction:column;}
.oqc-attachment-toolbar {display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid #ddd;}
.oqc-attachment-filename {font-size:14px; color:#222; word-break:break-all;}
.oqc-attachment-actions {display:flex; align-items:center; gap:8px;}
.oqc-attachment-actions button {border:1px solid #bbb; background:#fff; color:#222; padding:6px 12px; border-radius:4px; cursor:pointer;}
.oqc-attachment-actions .oqc-attachment-delete {border-color:#d14b4b; color:#d14b4b;}
.oqc-attachment-stage {flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px; background:#f4f4f4;}
.oqc-attachment-preview {max-width:100%; max-height:100%; object-fit:contain;}

#palletizing-bol-table tbody tr.is-selected td,
#palletizing-pallet-table tbody tr.is-selected td {background:#eef8ef;}
#palletizing-bol-table tbody tr td,
#palletizing-pallet-table tbody tr td,
#palletizing-assigned-panel-table tbody tr td,
#palletizing-available-panel-table tbody tr td {cursor:pointer;}
#palletizing-assigned-panel-table tbody tr:hover td,
#palletizing-available-panel-table tbody tr:hover td,
#palletizing-bol-table tbody tr:hover td,
#palletizing-pallet-table tbody tr:hover td {background:#f8fbff;}
.palletizing-filter-meta {float:right; font-size:13px; font-weight:400; color:#666;}

.panel-picking-search-wrap select,
.panel-picking-search-wrap input[type="text"],
.panel-picking-search-wrap input[type="file"] {margin-right:5px;}
.panel-picking-toolbar {display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.panel-picking-toolbar-left,
.panel-picking-toolbar-right {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.panel-picking-inline-form,
.panel-picking-upload-form {display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.panel-picking-label {display:inline-block; font-size:13px; color:#444;}
.panel-picking-warning-wrap {padding:8px 0;}
.panel-picking-warning {padding:8px 12px; margin-bottom:6px; border:1px solid #f0d6c1; background:#fff5ef; color:#b05829; font-size:13px;}
.panel-picking-warning:last-child {margin-bottom:0;}
.panel-picking-head {display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.panel-picking-head-right {display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap;}
.panel-picking-order-meta {font-size:13px; color:#666;}
.panel-picking-order-meta em {color:#e26637; font-weight:700;}
.panel-picking-action-row {display:flex; justify-content:flex-start; align-items:center; gap:8px; margin-bottom:8px;}
.panel-picking-empty-state {padding:22px 15px; border:1px dashed #ccc; background:#fafafa; color:#666; text-align:center;}
.panel-picking-rdd-aging {display:inline-block; margin-left:2px; color:#d14b4b; font-weight:700;}
.panel-picking-chk {display:inline-block; vertical-align:middle;}
.panel-picking-chk input + span {padding-left:18px;}
.panel-picking-panel-list-content {position:relative; z-index:1;}
#panel-picking-panel-list-section {position:relative;}
#panel-picking-panel-list-section .panel-picking-panel-list-empty {display:none;}
#panel-picking-panel-list-section.is-empty .panel-picking-panel-list-empty {display:block;}
#panel-picking-panel-list-section.is-empty.has-content .panel-picking-panel-list-empty {position:absolute; inset:0; z-index:2; padding:0 0 12px; background:rgba(255,255,255,.74);}
#panel-picking-panel-list-section.is-empty.has-content .panel-picking-panel-list-content {opacity:.14; pointer-events:none; user-select:none;}
#panel-picking-panel-list-section.is-empty:not(.has-content) .panel-picking-panel-list-content {display:none;}
.panel-picking-row-toggle {display:inline-block; min-width:20px; height:20px; line-height:18px; border:1px solid #bbb; border-radius:2px; background:#fff; text-align:center; font-weight:700;}
.panel-picking-detail-row td {background:#fafafa; padding:0;}
.panel-picking-detail-wrap {padding:10px 12px; border-top:1px dashed #d6d6d6;}
.panel-picking-detail-actions {display:flex; justify-content:flex-start; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.panel-picking-detail-table-wrap {background:#fff;}
#panel-picking-order-table tbody tr.is-selected td {background:#eef5ff;}
.panel-picking-order-scroll {height:40vh; min-height:260px; max-height:40vh;}
.panel-picking-candidate-scroll {height:40vh; min-height:260px; max-height:40vh;}

.scan-hit {background:#dff0d8;}
.dock-received {background:#e8f4ff;}


.summary { }
.summary table{ text-align: right; width: 100%; }
.summary th {border:1px solid #ddd; padding:8px; font-size:14px; background-color: #f7dfbc}
.summary td {border:1px solid #ddd; padding:8px; font-size:14px;}


.innerTd {display:block; height:auto; overflow:hidden; position:relative; text-align:left;}
.invoiceTxt {color:#000; margin-right:10px; font-weight:400;}
.bar {display:inline-block; padding-left:15px; margin-right:15px; position:relative; vertical-align:12px;}
.bar:after {content:''; position:absolute; right:0; top:0; width:1px; height:14px; background:#aaa;}

.cmtInput {display:block; height:auto; overflow:hidden; margin-bottom:15px; position:relative; padding-right:100px;}
.cmtInput textarea {display:inline-block; width:100%; height:100px; padding:15px; font-size:14px; color:#333; border:1px solid #ddd; background:#f0f0f0; box-sizing:border-box;}
.cmtInput button.btnCmt {position:absolute; right:0; top:0; width:100px; height:100px; background:#333; color:#FFF; font-weight:500; font-size:16px; text-align:center;}

.contSearch {display:block; height:auto; overflow:hidden; padding-bottom:15px; margin-bottom:10px; border-bottom:1px dashed #ccc;}
.contSearch .schOption {display:block; height:auto; overflow:hidden; padding-bottom:8px;}
.contSearch .schOption select, .contSearch .schOption input[type="text"] {margin-right:5px;}
.contSearch .schOption.inline {display:inline-block; width:auto; vertical-align:middle; padding-bottom:0;}
.periodSec {display:block; height:auto; overflow:hidden;}
.periodSec.inline {display:inline-block; width:auto; vertical-align:middle; margin-left:10px;}
.periodSec .calendar {width:130px !important; background:#FFF url(../img/ico_cal.png) no-repeat 100px 50% !important;}

.setPeriod {display:inline-block; height:auto; vertical-align:middle; margin-left:10px;}
.setPeriod .setBtn a {float:left; height:28px; line-height:26px; font-size:12px; padding:0 15px; color:#666; background:#f0f0f0; border:1px solid #eee; box-sizing:border-box; margin-right:2px;}
.setPeriod .setBtn.on a {background:#666; color:#FFF;}

.resultGuideSec {display:block; height:auto; overflow:hidden; padding:10px 0;}
.resultGuideSec .halfGuide {float:left; width:50%; height:auto; font-size:14px; color:#666;}
.resultGuideSec .halfGuide b {color:#333; font-weight:500;}

.itemFuncSec {display:block; height:auto; overflow:hidden; padding:10px 0;}
.itemFuncSec .half {float:left; width:50%; height:auto;}

.photoList {display:block; height:auto; overflow:hidden;}
.photoList li {float:left; width:200px; height:200px; overflow:hidden; margin:0 10px 10px 0;}
.photoList li img {width:200px; height:200px;}

.caseList {display:block; height:auto;}
.caseList li {display:block; position:relative; line-height:28px; margin-bottom:10px;}
.caseList li:last-child {margin-bottom:0;}
.caseList li dl {display:block; height:auto; overflow:hidden;}
.caseList li dl dd {display:block; height:auto; position:relative; margin-bottom:10px;}
.caseList li dl dd:last-child {margin-bottom:0;}
.caseList.device li {float:left; width:16.66667%;}
.noMar {margin:0 !important;}
img.prdImg {width:60px; height:60px;}
.tdInner {display:block; height:auto; overflow:hidden; position:relative;}
.cateDepth {position:absolute; right:0; top:50%; transform:translate(0, -50%); text-align:right; font-size:15px; color:#666;}
.cateDepth b {color:#333;}
.cateCount {display:inline-block; padding:0 15px; font-size:16px; font-weight:500; color:#333; vertical-align:middle;}

.sortBy a {display:inline-block; padding:0 5px; color:#999;}
.sortBy a:hover {color:#333;}
.sortBy.on a {color:#333; font-weight:500;}

.statsModify {display:inline-block; vertical-align:middle; margin-left:20px; padding-left:20px; position:relative;}
.statsModify:after {content:''; position:absolute; left:0; top:50%; transform:translate(0, -50%); width:1px; height:18px; background:#666;}
.statsModify.noLine {margin-left:0; padding-left:0;}
.statsModify.noLine:after {background:none;}

.itemList {display:block; height:auto; overflow:hidden; padding:10px 0;}
.itemList li {display:block; height:auto; overflow:hidden; padding:3px 0 3px 15px; position:relative; font-size:14px;}
.itemList li:after {content:''; position:absolute; left:5px; top:12px; width:3px; height:3px; background:#666;}

.platList {display:block; height:auto; overflow:hidden; padding:0;}
.platList li {display:block; height:auto; overflow:hidden; padding:5px 0; position:relative;}

.ordCh {display:inline-block; padding:1px 0px; color:#FFF; border-radius:2px; margin-right:5px; background:#555; font-size:11px; width:30px; text-align:center;}
.ordCh.pc {background:#205fbc;}
.ordCh.mo {background:#6abc20;}
.ordCh.ap {background:#bc3320;}

.prdStats {display:inline-block; font-size:14px; padding-right:15px; margin-right:10px; position:relative;}
.prdStats:after {content:''; position:absolute; right:0; top:50%; transform:translate(0, -50%); width:1px; height:14px; background:#ccc;}
.prdStats:last-child {padding-right:0; margin-right:0;}
.prdStats:last-child:after {background:none;}
.prdStats a:hover {text-decoration:underline;}

.reasonList {display:block; height:auto; overflow:hidden; border:1px solid #ddd; background:#f0f0f0; padding:10px;}
.reasonList li {display:block; height:auto; overflow:hidden; padding:3px 0 3px 15px; position:relative; line-height:20px; font-size:14px; color:#333; text-align:left !important;}
.reasonList li:after {content:''; position:absolute; left:0; top:13px; width:3px; height:3px; background:#333;}

.listTable .reasonList {background:none; border:0; padding:0 0 0 20px;}
.listTable .reasonList li {padding-left:10px;}
.listTable .reasonList li:after {content:''; position:absolute; left:0px; width:4px; height:1px;}

.exOptSel {clear:both; display:block; height:auto; overflow:hidden; margin-top:10px;}
.exOptSel dt, .exOptSel dd {float:left; padding:5px; box-sizing:border-box; text-align:left; border:1px solid #ccc;}
.exOptSel dt {width:12%; height:40px; line-height:40px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:0 10px; background:#eee; border-left:0; border-right:0;}
.exOptSel dd {width:21.33333%; border-right:0;}
.exOptSel dd select {width:100%;}

.resPhoto {clear:both; display:block; height:auto; overflow:hidden; margin-top:10px;}
.resPhoto li {display:block; height:auto; overflow:hidden; text-align:center; margin-bottom:10px;}
.resPhoto li img {max-width:100%;}

.bnrBox {display:block; height:auto; overflow:hidden; padding:10px 100px 20px 10px; margin-bottom:20px; border-bottom:1px dashed #666; position:relative;}
.bnrBox .titleSec {clear:both; display:block; height:auto; overflow:hidden; margin-bottom:10px;}
.bnrBox .titleSec .title {float:left; width:100px;}
.bnrBox .deviceTarget {float:left; width:48%; height:auto; overflow:hidden; position:relative; margin-right:4%;}
.bnrBox .deviceTarget.end {margin-right:0;}
.bnrBox .tScreen {color:#000; font-size:16px; font-weight:900; margin-bottom:5px;}
.bnrBox:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
.bnrBox button {position:absolute; right:0; top:50%; transform:translate(0, -50%); width:80px; height:80px; border:0; text-align:center; font-size:16px; font-weight:500; border-radius:5px; cursor:pointer;}
.bnrBox button.btnAdd {background:#333; color:#FFF;}
.bnrBox button.btnDel {background:#f0f0f0; border:1px solid #d0d0d0; color:#666;}
.bnrBox .deviceTarget li {display:block; height:auto; overflow:hidden; padding:5px 0 5px 100px; position:relative;}
.bnrBox .deviceTarget li .title {position:absolute; left:0; top:8px; font-size:14px; color:#333;}
.bnrBox .deviceTarget li input[type="text"], .bnrBox li input[type="file"] {float:left;}
.bnrBox .deviceTarget li .target {clear:both; display:block; height:auto; overflow:hidden; padding:10px 0 0 0px;}
.bnrBox .deviceTarget li img {max-width:100%;}
/*
.bnrBox .direction {position:absolute; left:10px; top:50%; transform:translate(0, -50%); width:110px; height:auto; font-weight:900;}
*/
.bnrBox .direction {display:block; height:auto; overflow:hidden; font-weight:900; margin-bottom:15px; font-size:18px;}

.tPrice {display:block; text-align:right; font-size:24px;}
.tDesc {clear:both; display:block; height:auto; overflow:hidden; margin-top:10px; padding:0 5px;}
.tDesc dt, .tDesc dd {float:left; width:50%; height:auto; overflow:hidden; line-height:24px; letter-spacing:0;}
.tDesc dt {text-align:left;}
.tDesc dd {text-align:right;}
.bold {font-weight:500;}

/* pagination */
.pagingWrap {display:block; height:40px; overflow:hidden; position:relative; width:480px; box-sizing:border-box; padding:0 79px; margin:15px auto;}
.pagingWrap .prevGroup {position:absolute; left:0; top:0;}
.pagingWrap .prevGroup .btnBackword a {float:left; width:40px; height:40px; border:1px solid #e2e2e2; background:url(../img/btn_backword.png) no-repeat 50% 50%; box-sizing:border-box;}
.pagingWrap .prevGroup .btnPrev a {float:left; width:40px; height:40px; border:1px solid #e2e2e2; background:url(../img/btn_prev.png) no-repeat 50% 50%; box-sizing:border-box; margin-left:-1px;}
.pagingWrap .nextGroup {position:absolute; right:0; top:0;}
.pagingWrap .nextGroup .btnForword a {float:right; width:40px; height:40px; border:1px solid #e2e2e2; background:url(../img/btn_forword.png) no-repeat 50% 50%; box-sizing:border-box;}
.pagingWrap .nextGroup .btnNext a {float:right; width:40px; height:40px; border:1px solid #e2e2e2; background:url(../img/btn_next.png) no-repeat 50% 50%; box-sizing:border-box; margin-right:-1px;}
.pagingWrap .paging {display:block; height:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;}
.pagingWrap .paging .num a {display:inline-block; width:30px; height:40px; line-height:40px; text-align:center; font-size:14px; color:#999; position:relative;}
.pagingWrap .paging .num.on a {color:#0e7bed; font-weight:700;}
.pagingWrap .paging .num.on a:after {content:''; position:absolute; left:50%; bottom:5px; transform:translate(-50%, 0); width:15px; height:2px; background:#0e7bed;}
.pagingWrap .paging .num a:hover {color:#0e7bed; font-weight:700;}
.pagingWrap .paging .num a:hover:after {content:''; position:absolute; left:50%; bottom:5px; transform:translate(-50%, 0); width:15px; height:2px; background:#0e7bed;}

/* btn */
.btnAbs {position:absolute; right:0; top:50%; transform:translate(0, -50%);}
.btnArea {clear:both; display:block; height:auto; overflow:hidden;}
.absBtns {position:absolute; right:0; top:50%; transform:translate(0, -50%); text-align:right;}
.btn a {display:inline-block; height:40px; line-height:40px; text-align:center; font-size:14px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0 15px; vertical-align:middle;}
.btnS a {display:inline-block; height:auto; text-align:center; font-size:13px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:5px 15px; vertical-align:middle;}
.btnB a {display:inline-block; width:100%; height:60px; line-height:60px; text-align:center; font-size:16px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; vertical-align:middle;}
.btnLine a {display:inline-block; height:40px; line-height:38px; text-align:center; font-size:14px; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0 15px; vertical-align:middle; background:#FFF;}
.orange a {background:#e26637;}
.green a {background:#3ca865;}
.gray a {background:#666;}
.yellow a {background:#f0b000;}
.red a {background:#e23737;}
.blue a {background:#2777e4;}
.dGray a {background:#444;}
.black a {background:#000;}
.blue a {background:#2777e4;}
.lineO a {border:1px solid #e26637; color:#e26637;}
.lineG a {background:#f0f0f0; border:1px solid #d0d0d0; color:#666;}

button.btnSmall {display:inline-block; height:22px; line-height:22px; text-align:center; font-size:13px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0 8px; background:#555; margin:0 5px;}
button.btnSch {display:inline-block; height:28px; line-height:28px; text-align:center; font-size:14px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0 8px; background:#555; margin:0 5px;}
input.btnSch {display:inline-block; height:28px; line-height:28px; text-align:center; font-size:14px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0 8px; background:#555; margin:0 5px;}
button.lineBtn {display:inline-block; height:28px; font-size:13px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0px 15px; vertical-align:middle; background:#555; border:1px solid #444; cursor:pointer;}
input[type="submit"] {display:inline-block; height:40px; text-align:center; font-size:14px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0 20px; vertical-align:middle; background:#666; border:0; cursor:pointer;}
input[type="submit"].del {display:inline-block; height:auto; font-size:13px; color:#666; font-weight:400; border-radius:4px; letter-spacing:0px; padding:3px 10px; vertical-align:middle; background:#f0f0f0; border:1px solid #d0d0d0; cursor:pointer;}
input[type="submit"].delBig {display:inline-block; height:28px; font-size:13px; color:#666; font-weight:400; border-radius:4px; letter-spacing:0px; padding:0px 15px; vertical-align:middle; background:#f0f0f0; border:1px solid #d0d0d0; cursor:pointer;}
input[type="submit"].add {display:inline-block; height:auto; font-size:13px; color:#FFF; font-weight:400; border-radius:4px; letter-spacing:0px; padding:3px 10px; vertical-align:middle; background:#666; border:1px solid #666; cursor:pointer;}

button.green {background:#3ca865;}
button.orange {background:#e26637;}
button.gray {background:#666;}
button.dGray {background:#444;}
button.black {background:#000;}

/* bbsSearch */
.bbsSearch {display:inline-block; height:auto; overflow:hidden; border:1px solid #ccc; background:#FFF; border-radius:5px; vertical-align:middle; margin-right:20px;}
.bbsSearch select {border:0; background-position:90% 50%;}
.bbsSearch .schCate {float:left;}
.bbsSearch .bbsSchInput {float:left; position:relative; padding-right:60px;}
.bbsSearch .bbsSchInput:after {content:''; position:absolute; left:0; top:0; width:1px; height:100%; background:#eee;}
.bbsSearch .bbsSchInput input[type="text"], .bbsSearch .bbsSchInput input[type="number"], .bbsSearch .bbsSchInput input[type="date"] {background:#FFF; border:0;}
.bbsSearch .bbsSchInput button.bbsSch {position:absolute; right:0; top:0; width:60px; height:28px; border:0; background:#0e7bed; color:#FFF; font-size:14px;}

/* device List */
.comnWrap {min-height:100vh;}
.comnWrap .content.fullHeight {min-height:calc(100vh - 80px); padding-bottom:0;}
.devicePer50 {max-height:calc(50vh - 120px); overflow:hidden; overflow-y:auto; margin-bottom:20px; box-sizing:border-box;}
.devicePer70 {max-height:calc(70vh - 120px); overflow:hidden; overflow-y:auto; margin-bottom:20px; box-sizing:border-box;}
.devicePer80 {max-height:calc(80vh - 120px); overflow:hidden; overflow-y:auto; margin-bottom:20px; box-sizing:border-box;}
.devicePer90 {max-height:calc(90vh - 120px); overflow:hidden; overflow-y:auto; margin-bottom:20px; box-sizing:border-box;}

.xyScroll {max-height:calc(95vh - 120px); overflow:hidden; overflow-y:auto; overflow-x: auto; margin-bottom:20px; box-sizing:border-box;}

.stickyHeader {
    position: sticky;
    top: 0;
    background-color: #000000;
    z-index: 100;
}




.conBlock.tyFlex {display:flex; flex-flow: row wrap; justify-content: space-between; position:relative;}
.conBlock.tyFlex .midTitle {color:#333; font-weight:600; font-size:14px; margin-bottom:1px; position:relative;}

.conLeft50 {width:49.5%; position:relative;}
.conRight50 {width:49.5%; position:relative;}
.conLeft50.tight {width:50%; position:relative;}
.conRight50.tight {width:50%; position:relative;}
.conLeft45 {width:45%; position:relative;}
.conLeft55 {width:54%; position:relative;}
.conLeft40 {width:40%; position:relative;}
.conLeft60 {width:59%; position:relative;}
.conRight40 {width:40%; position:relative;}
.conRight60 {width:59%; position:relative;}
.conLeft30 {width:30%; position:relative;}
.conLeft70 {width:69%; position:relative;}
.conRight30 {width:30%; position:relative;}
.conRight70 {width:69%; position:relative;}
.conLeft20 {width:20%; position:relative;}
.conLeft80 {width:79%; position:relative;}
.conRight20 {width:20%; position:relative;}
.conRight80 {width:79%; position:relative;}
.conRight80.tight {width:80%; position:relative;}
.conLeft23 {width:25%; position:relative;}
.conRight77 {width:74%; position:relative;}
.conRight77.tight {width:75%; position:relative;}
.conLeft10 {width:10%; position:relative;}
.conRight90 {width:90%; position:relative;}
.conThree15 {width:14%; position:relative;}
.conThree20 {width:19%; position:relative;}
.conThree25 {width:24%; position:relative;}
.conThree30 {width:29%; position:relative;}
.conThree50 {width:50%; position:relative;}
.conThree55 {width:55%; position:relative;}
.conThree60 {width:60%; position:relative;}

.perCenterSec {display:block; height:calc(100vh - 180px); overflow:hidden; overflow-y:auto;}
.perCenterSec .listTable thead th {background:#f0f0f0; border-top:1px solid #333;}
.perCenterSec .listTable tr:hover {background:#f7faff;}
.perCenterView {display:block; height:calc(100vh - 180px); overflow:hidden; overflow-y:auto;}
.perCenterView .listTable th {border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.perCenterView .listTable td {text-align:left;}
.perCenterView .btnArea {padding-right:10px;}

.popupView {display:block; height:calc(100vh - 50px); overflow:hidden; overflow-y:auto;}
.popupView .listTable th {border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.popupView .listTable td {text-align:left;}
.popupView .btnArea {padding-right:10px;}

.btnArea.flexBetween {display:flex; justify-content:space-between; align-items:center; }

.flexBetween2 {display:flex; justify-content:space-between; align-items:center; }


.text-danger { color: #bc3320; font-weight: bold;}

.table-container {
    max-height: 80vh; /* 화면 높이의 80% */
    overflow-y: auto;
    display: block;
}

table {
    border-collapse: collapse;
}

thead th {
    position: sticky;
    top: 0;
    background-color: #f9f9f9;
    z-index: 1;
}


.tabWrap {position:relative;}
.tabWrap .halfCon {width:50%; margin-right:0; border:0; padding:0 0; position:relative;}

.pTabMenu {position:relative; display:flex; justify-content:flex-start; align-items:flex-end; padding-left:20px;}
.pTabMenu:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#ccc;}
.pTabMenu span {position:relative; margin-left:-1px; flex:0 1 auto;}
.pTabMenu span:first-child {margin-left:0;}
.pTabMenu span a {display:block; padding:8px 20px; position:relative; background:#f0f0f0;}
.pTabMenu span a:after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ccc; box-sizing:border-box;}
.pTabMenu span a.on {padding:12px 20px; background:#FFF; color:#15234d; font-weight:700;}
.pTabMenu span a.on:before {content:''; position:absolute; left:1px; bottom:-2px; width:100%; height:4px; background:#FFF; z-index:10;}

.deviceSec {display:block; position:relative; padding-right:220px; min-height:calc(100vh - 140px);}
.deviceSec:after {content:''; position:absolute; right:0; top:0; width:200px; height:100%; background:#f1f1f1;}


.conBlock.noPad .halfCon {padding-top:0;}

.red a {background:#e42727;}
.blue a {background:#2777e4;}

.scrollTable {position:relative;}
.scrollTable ul {display:flex; justify-content:flex-start; align-items:stretch; text-align:center; border:1px solid #ededed; background:#5b68c9;}
.scrollTable ul.tHead {border-bottom:0; padding-right:5px;}
.scrollTable ul.tHead li {color:#FFF;}
.scrollTable ul.total li {background:#f0d4b4; font-weight:700;}
.scrollTable .tBody {background:#f8f8f8; height:400px; overflow-y:scroll;}
.scrollTable .tBody li {color:#333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; background:#FFF;}
.scrollTable li {display:block; padding:6px; border-right:1px solid #ededed; color:#333; flex:1 0 auto;}
.scrollTable li:last-child {border-right:0;}
.scrollTable li.item01 {width:50px;}
.scrollTable li.item02 {width:12%;}
.scrollTable li.item03 {width:68px;}
.scrollTable li.item04 {width:80px;}
.scrollTable li.item05 {width:80px;}
.scrollTable li.item06 {width:16%;}

.scrollTable.hblInfo .tBody {height:100px;}
.scrollTable.arItems .tHead {background:#e9f5ff;}
.scrollTable.arItems .tHead li {color:#333;}
.scrollTable.arItems .tBody {height:320px;}
.scrollTable.apItems .tHead {background:#ffe9ef;}
.scrollTable.apItems .tHead li {color:#333;}
.scrollTable.apItems .tBody {height:313px;}

.scrollTable.apItems .tHead {background:red;}
.scrollTable.apItems .tHead li {color:#333;}
.scrollTable.apItems .tBody {height:320px;}
.scrollTable.apItems .tHead {background:#ffe9ef;}
.scrollTable.apItems .tHead li {color:#333;}
.scrollTable.apItems .tBody {height:313px;}


.scrollTable *::-webkit-scrollbar,
.scrollTable *::-webkit-scrollbar {width: 5px;background:#252424;}
.scrollTable *::-webkit-scrollbar-thumb {background: #aaa;border-radius:50px;}
.scrollTable *::-webkit-scrollbar-track {background: #f8f8f8;}


#arap-summary {
    font-size: 18px;
    font-family: Arial, sans-serif; /* 폰트 설정 */
    color: #333; /* 기본 텍스트 색상 */
    background-color: #f0f0f0; /* 배경 색상 */
    padding: 10px; /* 안쪽 여백 */
    border-radius: 8px; /* 테두리 둥글기 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 그림자 효과 */
    margin: 5px auto; /* 중앙 정렬 */
    text-align: center;
}


#customer-ar {
    color: #28a745; /* 고객 A/R 색상 */
}

#agent-debit, #agent-credit {
    color: #dc3545; /* 대리점 데빗/크레딧 색상 */
}

#vendor-ap {
    color: #ffc107; /* 공급업체 A/P 색상 */
}

#net-pl {
    color: #17a2b8; /* 순이익/손실 색상 */
}

.cursor { cursor: pointer }

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

.context-menu {
    position: absolute;
    display: none;
    background-color: #eee;
    border: 1px solid #999;
    padding: 5px;
    min-width: 100px;
}
.context-menu li { padding: 5px; }


#loading, #loading2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.spinner {
    width: 250px;
    height: 250px;
    animation: spin 2s linear infinite;
}

.toast {
    opacity: 1 !important; /* 기본 투명도 제거 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.bermuda-card{
    transform: translate(-50%, -100%); /* 마커 상단에 뜨게 */
    background:#fff; border:1px solid #ddd; border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    padding:10px 12px; font:13px/1.4 Arial, sans-serif;
    z-index: 9999; pointer-events:auto; /* 내부 클릭 가능 */
}
.bermuda-card table{ border-collapse:collapse; }
.bermuda-card th, .bermuda-card td{ padding:4px 8px; border-bottom:1px solid #eee; white-space:nowrap; }
.bermuda-card .title{ font-weight:700; margin-bottom:6px; }

.status-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    text-align: center;
}

.status-table thead {
    color: #000000;
    font-size: 13px;
}

.status-table th{
    border: 1px solid #e0e0e0;
    padding: 6px 10px;
}
.status-table td {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 6px 10px;
}



.status-table tr:hover {
    background: #e6f2ff;   /* hover 시 약간 파란 배경 */
}