/*
 * Globals
 */
@font-face {
    font-family: "Noto Sans TC";
    src: url("/fonts/Noto_Sans_TC/NotoSansTC-Medium.otf");
}

.text-dark2 {
    color: #1F1F1F;
}

.text-dark {
    color: #000000 !important;
}

.text-light {
    color: #C9946E !important;
}

.text-success {
    color: #36A80E !important;
}

.text-danger {
    color: #EB1818 !important;
}

.text-warning {
    color: #BDAC11 !important;
}

.table td, .table th {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 0px solid #dee2e6;
}
.table2 {
    width: 100%;
    border: 2px solid black;
}
.table2 td, .table-bordered th {
    border: 2px solid black;
}
.table2 > tbody > tr > td{
    padding: 0.75rem;
    vertical-align: middle;
    border: 2px solid black;
}
/* Links */
a,
a:focus,
a:hover {
    color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
    background-color: #fff;
    border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
    height: 100%;
    background-color: #FFF9FE;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

body {
    display: -ms-flexbox;
    display: flex;
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;

    /*text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);*/
}

.body-bg {
    background-image: url('/images/body-bg.png');
}


/*
 * Header
 */
.masthead {
    margin-bottom: 1rem;
}

/*
 * main
 */
.menuBtn {
    margin-top: 30px;
}

.logoNameIndex {
    font-weight: 500;
    font-size: 40px;
    line-height: 58px;
    color: #9A7878;
}

.view {
    
}

.page3, .page4 {
    overflow-y: auto;
    padding-bottom: 80px;
    height: 75vh;
}

.page5 {
    overflow-y: auto;
    padding-bottom: 80px;
    height: 95vh;
}
@media (max-width: 767px) {
    .logoName {
        font-weight: 500;
        color: #9A7878;
        font-weight: 500;
        font-size: 16px;
    }

    .subTitle {
        font-weight: 500;
        font-size: 24px;
    }
    /**系列**/
    .catena {
        width: 100%;
        margin-top: 35px;
    }

    /**庫存系列分類**/
    .page-number {
        width: 100%;
    }

        .page-number button {
            padding-left: 3.4rem;
            padding-right: 3.4rem;
        }

    /**
**  庫存內頁 
**/
    .inventory {
        width: 90%;
        border: 1px solid #000000 !important;
        border-spacing: 0px;
    }

        .inventory tr {
            width: 100%;
            border-bottom: 1px solid #000000 !important;
        }

        .inventory tr td{
            vertical-align:middle;
        }
    .timeStampArea{
        padding:0 0 0 9%;
    }
}

@media (min-width: 768px) {
    .logoName {
        font-weight: 500;
        color: #9A7878;
        font-weight: 500;
        line-height: 46px;
        font-size: 32px;
    }

    .subTitle {
        font-weight: 500;
        font-size: 36px;
        line-height: 38px;
    }

    /**系列**/
    .catena {
        width: 70%;
        margin-top: 100px;
    }

    /**庫存系列分類**/
    .page-number {
        width: 60%;
        margin: 0 auto ; 
    }

        .page-number button {
            padding-left: 3.4rem;
            padding-right: 3.4rem;
        }

/**
**  庫存內頁 
**/
    .inventory {
        width: 45%;
        border: 1px solid #000000 !important;
        border-spacing: 0px;
    }

        .inventory tr {
            width: 100%;
            border-bottom: 1px solid #000000 !important;
        }
        .inventory tr td {
           vertical-align:middle ; 
        }
}
@media (min-width: 1200px) {
    .inventory {
        width: 30%;
        border: 1px solid #000000 !important;
        border-spacing: 0px;
    }
    .timeStampArea {
        padding: 0 0 0 5%;
    }
}




/**
*   Button 
**/
    /*橘底白字按鈕*/
.btn-primary {
    color: #FFFFFF;
    background: #C9946E;
    line-height: 40px;
}

    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .show > .btn-primary.dropdown-toggle {
        background-color: #A15E2D !important;
        color: #FFFFFF !important;
        border: 0px solid #CD7F54 !important;
    }


    .btn-primary.focus, .btn-primary:focus {
        color: #FFFFFF;
        background-color: #A15E2D;
        border: 0px ; 
        border-color: #0062cc;
        box-shadow: 0 0 0 0rem rgb(38 143 255 / 50%);
    }

    .btn-primary:hover {
        background-color: #EA9457 !important;
        color: #FFFFFF !important;
        border: 0px solid #C9946E !important;
    }

    .border-primary {
        border: 0px solid #C9946E !important;
    }

    /**白底橘線按鈕**/
.btn-outline-primary {
    color: #C9946E;
    background: rgba(255, 255, 255, 0.8);
    line-height: 40px;
}

    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .show > .btn-outline-primary.dropdown-toggle {
        background-color: rgba(221, 221, 221, 0.8) !important;
        color: #A15E2D !important;
        border: 2px solid #A15E2D !important;
    }

    .btn-outline-primary:hover {
        background-color: #FFFFFF !important;
        color: #EA9457 !important;
        border: 2px solid #EA9457 !important;
    }

    .border-outline-primary {
        border: 2px solid #C9946E !important;
    }

/** for 2025 */

.btn-primary-2025 {
    color: #8698a8;
    background: #ffffff;
    line-height: 40px;
}

    .btn-primary-2025:not(:disabled):not(.disabled).active,
    .btn-primary-2025:not(:disabled):not(.disabled):active,
    .show > .btn-primary-2025.dropdown-toggle {
        background-color: #5882a7 !important;
        color: #FFFFFF !important;
        border: 0px solid #cccccc !important;
    }


    .btn-primary-2025.focus, .btn-primary-2025:focus {
        color: #FFFFFF;
        background-color: #5882a7;
        border: 0px;
        border-color: #cccccc;
        box-shadow: 0 0 0 0rem rgb(38 143 255 / 50%);
    }

    .btn-primary-2025:hover {
        background-color: #5882a7 !important;
        color: #FFFFFF !important;
        border: 0px solid #cccccc !important;
    }

.border-primary-2025 {
    border: 0px solid #cccccc !important;
}




    /**
 *  footer 
 **/
.footer {
    /*position: fixed;*/
    width: 100%;
    bottom: 0px;
    height: 72px;
    background: #FFFFFF;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.25);
    _position: expression(fixed);
}





    .checkbox-outline-secondary:not(:disabled):not(.disabled).active,
    .checkbox-outline-secondary:not(:disabled):not(.disabled):active {
        background-color: transparent;
        color: #FFFFFF;
    }

    .checkbox-outline-secondary .custom-checkbox .custom-control-input ~ .custom-control-label::after {
        position: absolute;
        top: .25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        border: #C9946E !important;
    }

    .checkbox-outline-secondary.active .custom-checkbox .custom-control-input ~ .custom-control-label::after {
        position: absolute;
        top: .25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        border: #C9946E !important;
    }

    .checkbox-outline-secondary .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #C9946E;
    }

    .checkbox-outline-secondary .custom-control-input:checked ~ .custom-control-label::before {
       
    }

    .checkbox-outline-secondary .checkbox-lable {
        padding-top: 0px;
    }










.table3 {
    position: relative;
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

    .table3 caption {
        font-size: 1.5em;
        margin: .25em 0 .75em;
    }

    .table3 tr {
        background: #f8f8f8;
        border: 1px solid #ddd;
        padding: .35em;
    }

    .table3 th, .table3 td {
        padding: .625em;
        text-align: center;
    }

    .table3 th {
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
        position: sticky;
        top: -1px;
        background: #FFF9FE;
        vertical-align: middle;
        z-index: 2;
    }

    .table3 td img {
        text-align: center;
    }

@media screen and (min-width: 768px) {
    .table3 tr td:nth-child(6) {
        display: none;
    }
    .hide-on-desktop {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .table3 {
        border: 0;
    }

        .table3 thead {
            display: none;
        }

        .table3 tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
        }

        .table3 td,
        .table3 th {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: 1.1rem;
            text-align: left;
        }

            .table3 td::before,
            .table3 th::before {
                content: attr(data-label);
                float: left;
                font-weight: normal;
                text-transform: uppercase;
            }

            .table3 td::after,
            .table3 th::after {
                content: attr(data-label2);
                float: right;
                font-weight: normal;
                text-transform: uppercase;
            }

            .table3 td:last-child,
            .table3 th:last-child {
                border-bottom: 0;
            }

        .table3 th,
        .table3 td {
            width: 100%; /* 每個標題/內容佔據一半寬度 */
        }


        .table3 tr td:nth-child(even) {
            display: none;
        }
        .table3 tr td:last-child {
            display: none;
        }

        /*.table3 tr td:nth-child(even) {
           display:none ; 
        }*/

        .table3 tr:nth-child(even) {
            background-color: #f8f8f8; /* 調整偶數行的背景色 */
        }

        
        .table3 tr td img {
            margin-top:-6px;
            position: relative;
        }
}

.purchase-status {
    margin-left: 0px;
    font-size: 13px;
   
    width: 110px;
}


    .checkbox-outline-danger:not(:disabled):not(.disabled).active,
    .checkbox-outline-danger:not(:disabled):not(.disabled):active {
        background-color: transparent;
        color: #FFFFFF;
    }

.checkbox-outline-danger .custom-checkbox .custom-control-input ~ .custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    border: #000000 !important;
}

.checkbox-outline-danger.active .custom-checkbox .custom-control-input ~ .custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    border: #000000 !important;
}

.checkbox-outline-danger .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #C9946E;
}

.checkbox-outline-danger .custom-control-input:checked ~ .custom-control-label::before {

}

.checkbox-outline-danger .checkbox-lable {
    padding-top: 0px;
    font-size: 13px !important;
   
}

.text-danger2 {
    
}

.table_sticky_wrapper {
    width: 100%;
    height: 30vh!important;
    padding-bottom: 30px;
    overflow: auto;
    border-top: 1px solid #cccccc !important;
    border-bottom: 1px solid #cccccc !important;
}