.table-fixed {
    overflow-y: auto;
    height: 25rem;
    width: 100%;
}

    .table-fixed table {
        border-collapse: collapse;
    }

        .table-fixed table tbody td, .table-fixed table tbody th {
            vertical-align: middle;
            text-align: center;
        }

/*480x800, 480x854, 540x960, 720x1280, 1080x1920*/
@media screen and (min-width: 320px) and (max-width: 480px) {
    .table-style {
        overflow-y: auto;
        height: 10rem;
        width: 100%;
    }
}


/* 854 ~ 1280 */
@media only screen and (min-width: 481px) and (max-width: 1280px) {
    .table-style {
        overflow-y: auto;
        height: 25rem;
        width: 100%;
    }
}

/* 1920px 至更大 */
@media only screen and (min-width: 1281px) {
    .table-style {
        overflow-y: auto;
        height: 45rem;
        width: 100%;
    }
}

/* 豎屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {
}

/* 橫屏 */
@media screen and (orientation:landscape) {
}

/*.table-style {
    overflow-y: auto;
    max-height: 30rem;
    height: auto;
    min-height: 25rem;
    width: 100%;
}*/

.table-scroll {
    overflow-y: auto;
    height: 25rem;
    width: 100%;
}

table.table-style {
    height: auto;
}

    table.table-style tbody th,
    table.table-style tbody td {
        vertical-align: middle;
        text-align: center;
    }

    /* Table 標題 */
    .table-style table thead th,
    table.table-style thead th {
        position: sticky;
        top: -1px;
        /* 若無 z-index，儲存格內的原生 input/select 會蓋住捲動中的標題列 */
        z-index: 2;
        padding: .25rem 0;
        border: 1px solid #ccc;
        color: #000;
        background-color: #fff;
        background-image: linear-gradient(to top, #eee, #fff);
        font-size: .85rem;
        font-weight: normal;
        vertical-align: middle;
        text-align: center;
    }

    .table-style table tbody td,
    .table-style table tbody th,
    table.table-style tbody th,
    table.table-style tbody td {
        margin: 0;
        padding: 0 .5rem;
        font-size: .85rem;
        font-weight: normal;
    }

    .table-style.thin table tbody th,
    .table-style.thin table tbody td,
    table.table-style.thin tbody th,
    table.table-style.thin tbody td {
        margin: 0;
        padding: 0;
        text-align: left;
    }

        .table-style.thin table tbody td input,
        .table-style.thin table tbody td select,
        .table-style.thin table tbody td textarea,
        table.table-style.thin tbody td input,
        table.table-style.thin tbody td select,
        table.table-style.thin tbody td textarea {
            margin: 0;
            padding: 0 .5rem;
            height: 100%;
            max-width: 100%;
            width: 100%;
            border-style: hidden;
            vertical-align: middle;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .table-style.thin table tbody td input:focus,
            .table-style.thin table tbody td select:focus,
            .table-style.thin table tbody td textarea:focus,
            table.table-style.thin tbody td input:focus,
            table.table-style.thin tbody td select:focus,
            table.table-style.thin tbody td textarea:focus {
                outline: none;
            }


.table-style .form-control {
    height: calc(1em + 0.75rem + 2px) !important;
    font-size: inherit;
    border-radius: 0;
}

.table-stylee-modal .input-group {
    margin: 0;
    padding: 0;
}

.table-style .input-group > .input-group-append > a {
    /*padding-top: .675rem !important;*/
    height: calc(1em + 0.75rem + 2px) !important;
    padding: .375rem;
    background-color: #d3d9df !important;
    color: #fff;
    font-size: inherit;
    text-decoration: none;
    border-radius: 0;
}

/* ========== ========== ========== ========== */
/* 定義table-style 中的th, td */
.table-style th,
.table-style td {
    white-space: nowrap;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 通用最小寬度(rem) min-X */
.width-min-2 {
    min-width: 2rem;
}

.width-min-3 {
    min-width: 3rem;
}

.width-min-4 {
    min-width: 4rem;
}

.width-min-5 {
    min-width: 5rem;
}

.width-min-6 {
    min-width: 6rem;
}

.width-min-8 {
    min-width: 8rem;
}

.width-min-10 {
    min-width: 10rem;
}

.width-min-12 {
    min-width: 12rem;
}

/* 固定寬度(rem) width-X */
.width-2 {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
}

.width-3 {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
}

.width-4 {
    width: 4rem;
    min-width: 4rem;
    max-width: 4rem;
}

.width-5 {
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
}

.width-6 {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
}

.width-8 {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
}

.width-10 {
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
}

.width-12 {
    width: 12rem;
    min-width: 12rem;
    max-width: 12rem;
}

.width-15 {
    width: 15rem;
    min-width: 15rem;
    max-width: 15rem;
}

.width-20 {
    width: 20rem;
    min-width: 20rem;
    max-width: 20rem;
}

.width-25 {
    width: 25rem;
    min-width: 25rem;
    max-width: 25rem;
}

.width-30 {
    width: 30rem;
    min-width: 30rem;
    max-width: 30rem;
}

.width-35 {
    width: 35rem;
    min-width: 35rem;
    max-width: 35rem;
}

.width-40 {
    width: 40rem;
    min-width: 40rem;
    max-width: 40rem;
}

.width-45 {
    width: 45rem;
    min-width: 45rem;
    max-width: 45rem;
}

.width-50 {
    width: 50rem;
    min-width: 50rem;
    max-width: 50rem;
}

.width-55 {
    width: 55rem;
    min-width: 55rem;
    max-width: 55rem;
}

.width-60 {
    width: 60rem;
    min-width: 60rem;
    max-width: 60rem;
}

.width-65 {
    width: 65rem;
    min-width: 65rem;
    max-width: 65rem;
}

.width-70 {
    width: 70rem;
    min-width: 70rem;
    max-width: 70rem;
}
/* ========== ========== */
/* 通用最小寬度(百分比) width-pX */
.width-min-p10 {
    min-width: 10%;
}

.width-min-p20 {
    min-width: 20%;
}

.width-min-p25 {
    min-width: 25%;
}

.width-min-p30 {
    min-width: 30%;
}

.width-min-p40 {
    min-width: 40%;
}

.width-min-p50 {
    min-width: 50%;
}

.width-min-p60 {
    min-width: 60%;
}

.width-min-p70 {
    min-width: 70%;
}

.width-min-p75 {
    min-width: 75%;
}

.width-min-p80 {
    min-width: 80%;
}

.width-min-p90 {
    min-width: 90%;
}
/* 固定寬度(百分比) width-pX */
.width-p10 {
    width: 10%;
}

.width-p20 {
    width: 20%;
}

.width-p25 {
    width: 25%;
}

.width-p30 {
    width: 30%;
}

.width-p40 {
    width: 40%;
}

.width-p50 {
    width: 50%;
}

.width-p60 {
    width: 60%;
}

.width-p70 {
    width: 70%;
}

.width-p75 {
    width: 75%;
}

.width-p80 {
    width: 80%;
}

.width-p90 {
    width: 90%;
}

.width-p100 {
    width: 100%;
}
/* ========== ==========*/
/* 通用最小寬度(col) width-pX */
.width-min-col-1 {
    min-width: 8.3333%;
}

.width-min-col-2 {
    min-width: 16.6667%;
}

.width-min-col-3 {
    min-width: 25%;
}

.width-min-col-4 {
    min-width: 33.3333%;
}

.width-min-col-5 {
    min-width: 41.6667%;
}

.width-min-col-6 {
    min-width: 50%;
}

.width-min-col-7 {
    min-width: 58.3333%;
}

.width-min-col-8 {
    min-width: 66.6667%;
}

.width-min-col-9 {
    min-width: 75%;
}

.width-min-col-10 {
    min-width: 83.3333%;
}

.width-min-col-11 {
    min-width: 91.6667%;
}

.width-min-col-12 {
    min-width: 100%;
}
/* 固定寬度(col) width-pX */
.width-col-1 {
    width: 8.3333%;
    min-width: 8.3333%;
    max-width: 8.3333%;
}

.width-col-2 {
    width: 16.6667%;
    min-width: 16.6667%;
    max-width: 16.6667%;
}

.width-col-3 {
    width: 25%;
    min-width: 25%;
    max-width: 25%;
}

.width-col-4 {
    width: 33.3333%;
    min-width: 33.3333%;
    max-width: 33.3333%;
}

.width-col-5 {
    width: 41.6667%;
    min-width: 41.6667%;
    max-width: 41.6667%;
}

.width-col-6 {
    width: 50%;
    min-width: 50%;
    max-width: 50%;
}

.width-col-7 {
    width: 58.3333%;
    min-width: 58.3333%;
    max-width: 58.3333%;
}

.width-col-8 {
    width: 66.6667%;
    min-width: 66.6667%;
    max-width: 66.6667%;
}

.width-col-9 {
    width: 75%;
    min-width: 75%;
    max-width: 75%;
}

.width-col-10 {
    width: 83.3333%;
    min-width: 83.3333%;
    max-width: 83.3333%;
}

.width-col-11 {
    width: 91.6667%;
    min-width: 91.6667%;
    max-width: 91.6667%;
}

.width-col-12 {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

/* ========== ========== ========== ========== */
.table-style table tbody td a[name=staff],
.table-style table tbody td a[name=edit],
.table-style table tbody td a[name=del],
.table-style table tbody td a[name=cog],
.table-style table tbody td a[name=ie],
.table-style table tbody td a[name=card],
.table-style table tbody td a[name=add],
.table-style table tbody td a[name=select],
.table-style table tbody td a[name=call],
table.table-style tbody td a.btn {
    margin: .25rem .1rem;
    padding: 0 .1rem;
    height: 1.2rem;
    width: 1.2rem;
    color: #fff;
    font-size: .7625rem;
}

    .table-style table tbody td a[name=edit],
    table.table-style tbody td a.btn.green {
        border: 1px solid #3e8e41;
        background-color: #4CAF50;
    }

        .table-style table tbody td a[name=edit]:hover,
        table.table-style tbody td a.btn.green:hover {
            background-color: #367c39;
        }

    .table-style table tbody td a[name=del],
    table.table-style tbody td a.btn.red {
        border: 1px solid #c00;
        background-color: #f00;
    }

        .table-style table tbody td a[name=del]:hover,
        table.table-style tbody td a.btn.red:hover {
            background-color: #b30000;
        }

    .table-style table tbody td a[name=cog],
    table.table-style tbody td a.btn.brown {
        border: 1px solid #ac7339;
        background-color: #cc9966;
    }

        .table-style table tbody td a[name=cog]:hover,
        table.table-style tbody td a.btn.brown:hover {
            background-color: #ac7339;
        }

.table-style table tbody td a[name=call] {
    border: 1px solid var(--themeBorder);
    background-color: var(--themeColor);
}

    .table-style table tbody td a[name=call]:hover {
        background-color: var(--themeHover);
    }

.table-style table tbody td a[name=staff],
.table-style table tbody td a[name=ie],
.table-style table tbody td a[name=card],
.table-style table tbody td a[name=add],
.table-style table tbody td a[name=select],
table.table-style tbody td a.btn.blue {
    border: 1px solid #005ce6;
    background-color: #3385ff;
}

    .table-style table tbody td a[name=staff]:hover,
    .table-style table tbody td a[name=ie]:hover,
    .table-style table tbody td a[name=card]:hover,
    .table-style table tbody td a[name=add]:hover,
    .table-style table tbody td a[name=select]:hover,
    table.table-style tbody td a.btn.blue:hover {
        background-color: #005ce6;
    }

    .table-style table tbody td a[name=staff]:hover,
    .table-style table tbody td a[name=edit]:hover,
    .table-style table tbody td a[name=del]:hover,
    .table-style table tbody td a[name=cog]:hover,
    .table-style table tbody td a[name=ie]:hover,
    .table-style table tbody td a[name=card]:hover,
    .table-style table tbody td a[name=add]:hover,
    .table-style table tbody td a[name=select]:hover,
    .table-style table tbody td a[name=call]:hover,
    table.table-style tbody td a.btn.blue:hover,
    table.table-style tbody td a.btn.red:hover,
    table.table-style tbody td a.btn.green:hover,
    table.table-style tbody td a.btn.brown:hover {
        color: #fff;
    }

.table-style table tbody td a[name=file],
table.table-style tbody td a.file {
    border: none;
    margin: .25rem .1rem;
    padding: 0 .1rem;
    height: 1.2rem;
    width: 1.2rem;
    color: #f00;
    font-size: .7625rem;
    background-color: transparent;
}

    table.table-style tbody td a.file:hover {
        color: #f00;
        background-color: transparent;
    }

a[name="number-key"] {
    margin: 0 .25rem;
    width: 4rem;
    color: #888;
    background-color: #fff;
    border: 1px solid #888;
    text-decoration: none;
}

    a[name="number-key"]:active {
        color: #fff;
        background-color: #00cc99;
    }

    a[name="number-key"]:disabled,
    a[name="number-key"][disabled] {
        color: #fff;
        background-color: #b3b3b3;
        cursor: not-allowed;
    }