.f-mask {
    opacity: .3;
    filter: alpha(opacity=30);
}

.f-ajax-loading {
    top: 3px;
    border: 1px solid #f3dd88;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    border-radius: 3px;
    padding: 7px 12px;
}

.f-region-split.ui-draggable {
    background-color: #0063B1;
}

.f-grid-checkbox.f-icon {
    cursor: pointer;
}

.f-pagingtoolbar {
    padding-top: 0;
    padding-bottom: 0;
}

    .f-pagingtoolbar .f-field-textbox {
        padding-top: 0;
        padding-bottom: 0;
        min-height: 22px;
    }

    .f-pagingtoolbar .f-grid-pager.f-btn {
        margin: 3px 6px;
        padding: 2px 4px;
    }

.f-grid-colheader-inner {
    padding: 3px 2px;
}

    .f-grid-colheader-inner .f-grid-colheader-textct {
        padding: 3px 3px;
    }

.f-grid-cell-inner {
    padding: 6px 4px;
}

/*自定義上邊線（少用，因自帶方法fix掉）*/
.f-top-line {
    border-top-width: 1px;
    border-top-color: #eee;
}


.f-grid-cell.f-grid-renderfield.f-grid-cell-editable {
    background-color: #ffc;
}

    .f-grid-cell.f-grid-renderfield.f-grid-cell-editable.f-grid-cell-uneditable {
        background-color: #fff;
    }

        .f-grid-cell.f-grid-renderfield.f-grid-cell-editable.f-grid-cell-uneditable > .f-grid-cell-inner {
            opacity: 1;
            filter: alpha(opacity=100);
        }

/*f-btn*/
.f-btn.f-state-default .f-icon,
.f-btn.f-state-active .f-icon,
.f-btn.f-state-hover .f-icon,
.f-btn.f-state-focus .f-icon {
    color: #fff !important;
}

.f-btn .f-btn-text {
    color: #fff;
}

.f-btn.f-state-default {
    background-color: #0079bf;
    border-color: #0079bf;
}

.f-btn.f-state-hover,
.f-btn.f-state-focus {
    background-color: #00599f;
    border-color: #00599f;
}

.f-btn.f-state-active {
    background-color: #00599f;
    border-color: #00599f;
}

.f-state-default .f-btn,
.f-state-default .f-btn .f-icon {
    color: #fff;
}

.f-btn.f-btn-gray.f-state-default {
    background-color: #abbac3;
    border-color: #abbac3;
}

.f-btn.f-btn-gray.f-state-hover,
.f-btn.f-btn-gray.f-state-focus {
    background-color: #8b9aa3;
    border-color: #abbac3;
}

.f-btn.f-btn-gray.f-state-active {
    background-color: #abbac3;
    border-color: #8b9aa3;
}

.f-btn.f-btn-info.f-state-default {
    background-color: #6fb3e0;
    border-color: #6fb3e0;
}

.f-btn.f-btn-info.f-state-hover,
.f-btn.f-btn-info.f-state-focus {
    background-color: #4f99c6;
    border-color: #6fb3e0;
}

.f-btn.f-btn-info.f-state-active {
    background-color: #6fb3e0;
    border-color: #4f99c6;
}

.f-btn.f-btn-success.f-state-default {
    background-color: #87b87f;
    border-color: #87b87f;
}

.f-btn.f-btn-success.f-state-hover,
.f-btn.f-btn-success.f-state-focus {
    background-color: #629b58;
    border-color: #87b87f;
}

.f-btn.f-btn-success.f-state-active {
    background-color: #87b87f;
    border-color: #629b58;
}

.f-btn.f-btn-warning.f-state-default {
    background-color: #ffb752;
    border-color: #ffb752;
}

.f-btn.f-btn-warning.f-state-hover,
.f-btn.f-btn-warning.f-state-focus {
    background-color: #e59729;
    border-color: #ffb752;
}

.f-btn.f-btn-warning.f-state-active {
    background-color: #ffb752;
    border-color: #e59729;
}

.f-btn.f-btn-danger.f-state-default {
    background-color: #d15b47;
    border-color: #d15b47;
}

.f-btn.f-btn-danger.f-state-hover,
.f-btn.f-btn-danger.f-state-focus {
    background-color: #b74635;
    border-color: #d15b47;
}

.f-btn.f-btn-danger.f-state-active {
    background-color: #d15b47;
    border-color: #b74635;
}

.f-btn.f-btn-inverse.f-state-default {
    background-color: #555;
    border-color: #555;
}

.f-btn.f-btn-inverse.f-state-hover,
.f-btn.f-btn-inverse.f-state-focus {
    background-color: #303030;
    border-color: #555;
}

.f-btn.f-btn-inverse.f-state-active {
    background-color: #555;
    border-color: #303030;
}

/*b2b-status 狀態 Icon */
.state-icon {
    display: inline-block;
    text-rendering: auto;
    font-size: inherit;
    width: 52px;
    height: 50px;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    background-image: url(b2b/icon.png?v=180717);
    background-repeat: no-repeat;
}

    .state-icon.xs {
        width: 32px;
        height: 30px;
        background-image: url(b2b/icon_xs.png?v=180717);
    }
/*只呈現單一圖示(無文字)時使用 */
.statae-icon-single {
    display: inline-block;
    padding: 3px;
    margin-right: -10px;
    margin-bottom: 0px;
}
/*急單*/
.state-icon-hurry, .state-icon-h {
    background-position: -30px -17px;
}

    .state-icon-hurry.xs, .state-icon-h.xs {
        background-position: -18px -10px;
    }
/*退貨*/
.state-icon-return, .state-icon-s {
    background-position: -127px -17px;
}

    .state-icon-return.xs, .state-icon-s.xs {
        background-position: -76px -10px;
    }
/*結單*/
.state-icon-finish, .state-icon-f {
    background-position: -224px -17px;
}

    .state-icon-finish.xs, .state-icon-f.xs {
        background-position: -134px -10px;
    }
/*未下單*/
.state-icon-release, .state-icon-a {
    background-position: -321px -17px;
}

    .state-icon-release.xs, .state-icon-a.xs {
        background-position: -193px -10px;
    }
/*已確認未下單 => 澳門未下單*/
.state-icon-moc-release, .state-icon-t {
    background-position: -418px -17px;
}

    .state-icon-moc-release.xs, .state-icon-t.xs {
        background-position: -251px -10px;
    }
/*已確認改單 => 改單->澳門->供應商*/
.state-icon-moc-rewrite, .state-icon-u {
    background-position: -516px -17px;
}

    .state-icon-moc-rewrite.xs, .state-icon-u.xs {
        background-position: -310px -10px;
    }
/*採購改單*/
.state-icon-buy-rewrite, .state-icon-i {
    background-position: -31px -114px;
}

    .state-icon-buy-rewrite.xs, .state-icon-i.xs {
        background-position: -19px -68px;
    }
/*生管改單*/
.state-icon-prc-rewrite, .state-icon-k {
    background-position: -128px -114px;
}

    .state-icon-prc-rewrite.xs, .state-icon-k.xs {
        background-position: -77px -68px;
    }
/*下單*/
.state-icon-order, .state-icon-b, .state-icon-fc-1 {
    background-position: -225px -114px;
}

    .state-icon-order.xs, .state-icon-b.xs, .state-icon-fc-1.xs {
        background-position: -135px -68px;
    }

/*改單*/
.state-icon-rewrite, .state-icon-c {
    background-position: -322px -114px;
}

    .state-icon-rewrite.xs, .state-icon-c.xs {
        background-position: -193px -68px;
    }
/*接單*/
.state-icon-accept, .state-icon-d, .state-icon-fc-2 {
    background-position: -419px -114px;
}

    .state-icon-accept.xs, .state-icon-d.xs, .state-icon-fc-2.xs {
        background-position: -251px -68px;
    }
/*拒絕*/
.state-icon-reject, .state-icon-e, .state-icon-fc-3 {
    background-position: -516px -114px;
}

    .state-icon-reject.xs, .state-icon-e.xs, .state-icon-fc-3.xs {
        background-position: -310px -68px;
    }
/*交期未至*/
.state-icon-duedate-far, .state-icon-x {
    background-position: -31px -210px;
}

    .state-icon-duedate-far.xs, .state-icon-x.xs {
        background-position: -18px -126px;
    }
/*交期將至*/
.state-icon-duedate-soon, .state-icon-y {
    background-position: -128px -210px;
}

    .state-icon-duedate-soon.xs, .state-icon-y.xs {
        background-position: -76px -126px;
    }
/*交期已至*/
.state-icon-duedate-arrive, .state-icon-z {
    background-position: -225px -210px;
}

    .state-icon-duedate-arrive.xs, .state-icon-z.xs {
        background-position: -135px -126px;
    }
/*未出貨*/
.state-icon-undelivery, .state-icon-l {
    background-position: -322px -210px;
}

    .state-icon-undelivery.xs, .state-icon-l.xs {
        background-position: -193px -126px;
    }
/*部份出貨*/
.state-icon-delivery-part, .state-icon-m {
    background-position: -419px -210px;
}

    .state-icon-delivery-part.xs, .state-icon-m.xs {
        background-position: -251px -126px;
    }
/*全部出貨*/
.state-icon-delivery-all, .state-icon-n {
    background-position: -516px -210px;
}

    .state-icon-delivery-all.xs, .state-icon-n.xs {
        background-position: -310px -126px;
    }
/*未入庫*/
.state-icon-unstock, .state-icon-o {
    background-position: -31px -302px;
}

    .state-icon-unstock.xs, .state-icon-o.xs {
        background-position: -18px -181px;
    }
/*部份入庫*/
.state-icon-stock-part, .state-icon-p {
    background-position: -128px -302px;
}

    .state-icon-stock-part.xs, .state-icon-p.xs {
        background-position: -76px -181px;
    }
/*全部入庫*/
.state-icon-stock-all, .state-icon-q {
    background-position: -225px -302px;
}

    .state-icon-stock-all.xs, .state-icon-q.xs {
        background-position: -135px -181px;
    }

/*已修改*/
.state-icon-modify {
    background-position: -322px -302px;
}

    .state-icon-modify.xs {
        background-position: -193px -181px;
    }
/*未確認*/
.state-icon-uncheck {
    background-position: -419px -302px;
}

    .state-icon-uncheck.xs {
        background-position: -251px -181px;
    }
/*已作廢*/
.state-icon-invalid, .state-icon-fc-4 {
    background-position: -515px -302px;
}

    .state-icon-invalid.xs, .state-icon-fc-4.xs {
        background-position: -308px -181px;
    }
/*已拒絕*/
.state-icon-deny {
    background-position: -30px -392px;
}

    .state-icon-deny.xs {
        background-position: -18px -235px;
    }
/*已確認*/
.state-icon-check {
    background-position: -128px -392px;
}

    .state-icon-check.xs {
        background-position: -76px -235px;
    }
/*所有狀態*/
.state-icon-all {
    background-position: -226px -392px;
}

    .state-icon-all.xs {
        background-position: -135px -235px;
    }
/*訊息告知*/
.state-icon-alert, .state-icon-fc-0 {
    background-position: -324px -392px;
}

    .state-icon-alert.xs, .state-icon-fc-0.xs {
        background-position: -194px -235px;
    }