body,h1,h2,h3,h4,h5,h6,p,span,a,button{
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Arial;
}
.main-container{
    flex: 1;
    position: relative;
}
/* -------------------- 整體樣式 -------------------- */
a{ 
    text-decoration: none; 
    transition: all 0.2s linear 0s;
}
.hidden{ display: none;}
.img-cover{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.wrap-block{
    white-space: pre-wrap;
    word-break: break-all;
}
.rounded-4{ border-radius: 0.4rem;}
.rounded-5{ border-radius: 0.5rem;}
.opacity-0{ opacity: 0;}
.opacity-5{ opacity: 0.5;}
.opacity-7{ opacity: 0.7;}
.opacity-8{ opacity: 0.8;}
.fs-22px{ font-size: 22px;}
.fs-20px{ font-size: 20px;}
.fs-19px{ font-size: 19px;}
.fs-18px{ font-size: 18px;}
.fs-17px{ font-size: 17px;}
.fs-15px{ font-size: 15px;}
.fs-14px{ font-size: 14px;}
.fs-13px{ font-size: 13px;}
.fs-12px{ font-size: 12px;}
.ls-2{ letter-spacing: 2px; text-indent: 2px;}
.ls-4{ letter-spacing: 4px; text-indent: 4px;}
.lh-175{ line-height:1.75;}
.text-justify{ text-align: justify;}

.bg-main{ background-color: #8A1C3A;}
.bg-lightgray{ background-color: #F0F0F0;}
.bg-darkgray{ background-color: #363636;}
.bg-paleyellow{ background-color: #EFDAD7;}
.bg-lightpink{ background-color: #EFDAD7;}

.text-main{ color: #8A1C3A;}
.text-gray{ color: #4d4d4d;}
.text-lightgray{ color: #8a8a8a;}

.form-control,
.form-select,
.form-label,
.form-check{
    font-size: 15px;
}
.form-check-input:checked{
    background-color: #00B0A5;
    border-color: #00B0A5;
}
input.form-check-input[disabled]:checked{
    opacity: 0.8;
}
button,
.btn:focus,
.btn:active,
.btn:focus,
.navbar-toggler:focus,
a:focus,
.btn-close:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.page-link:focus{
    outline: none;
    box-shadow: none;
}
input[readonly],
textarea[readonly]{
    background-color: transparent!important;
    cursor: default;
}
.form-select[disabled]{
    background-color: #ffffff!important;
    cursor: default;
    background-image: none!important;
}
.link-main{ color: #1C1D1F;}
.link-main:hover{ color: #E15B2C;}
.link-green{ color: #00BFA5;}
.link-green:hover{ color: #00B0A5;}
.link-wine{ color: #C37B89;}
.link-wine:hover{ color: #830B00;}
.link-accent{ color: #304FFE;}
.link-accent:hover{ color: #0B5ED7;}
.btn-main{
    background-color: #00BFA5;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}
.btn-main:hover{
    background-color: #00B0A5;
    color: #ffffff;
}
.btn-accent{
    background-color: #304FFE;
    color: #ffffff;
}
.btn-accent:hover{
    background-color: #0B5ED7;
    color: #ffffff;
}
.btn-shockpink{
    background-color: #C37B89;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}
.btn-shockpink:hover{
    background-color: #830B00;
    color: #ffffff;
}
.btn-circle{
    width: 24px;
    height: 24px;
    padding: 0px;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
}
/* 分頁 */
.page-item:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.page-item:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.page-item .page-link{
    color: #8a8a8a;
    font-size: 14px;
    padding: 0px;
    border: 1px solid #8a8a8a;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #ffffff;
    margin: 0 8px;
}
.page-item.disabled .page-link{
    color: #cccccc;
    pointer-events: none;
    background-color: #ffffff;
    border: 1px solid rgba(138,138,138,0.25);
}
.page-item.active .page-link{
    color: #ffffff;
    background-color: #00BFA5;
    border: 1px solid #00BFA5;
}
/* scrollbar */
::-webkit-scrollbar-track{
  background-color: rgba(255,255,255,0);
}
::-webkit-scrollbar{
  width: 6px;
  height: 6px;
  background-color: rgba(255,255,255,0);
}
::-webkit-scrollbar-thumb{
  border-radius: 6px;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
}
@media screen and (max-width: 1199.9px){
    .lg-fs-22px{ font-size: 22px;}
    .lg-fs-20px{ font-size: 20px;}
    .lg-fs-18px{ font-size: 18px;}
    .lg-fs-17px{ font-size: 17px;}
}
@media screen and (max-width: 575.9px) {
    .sm-fs-24px{ font-size: 24px;}
    .sm-fs-20px{ font-size: 20px;}
    .sm-fs-18px{ font-size: 18px;}
    .sm-fs-17px{ font-size: 17px;}
    .sm-fs-16px{ font-size: 16px;}
    .sm-fs-15px{ font-size: 15px;}
    .sm-fs-14px{ font-size: 14px;}
}
/* --------------------- 登入 -------------------- */
.login-container{
    min-height: 100vh;
    background-image: url(../images/login-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*
.login-container .login-logo{
    width: 240px;
    -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}
.login-header{
    position: relative;
    height: 160px;
}
.login-header img{
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}
.login-header:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}
.login-header .login-title{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    z-index: 2;
}*/
.login-card{ background: #ffffff;}
.login-card .login-body{ padding: 15% 12%;}
.login-card .login-logo{ margin-bottom: 20%;}
.login-body .login-items{
    flex: 0 0 80px;
    color: #4d4d4d;
    font-size: 1.2rem;
    margin-bottom: 8px;
}
.login-body .form-check-input{
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border-color: #484848;
    margin-top: 3px;
}
.login-body .form-check-input:checked {
    background-color: #304FFE;
    border-color: #304FFE;
}
.login-body .form-control,
.login-body .form-select{
    border: 1px #D6D6D6 solid;
    border-radius: 0px;
    line-height: 1.75;
    font-size: 16px;
}
.login-body .form-control{
    padding: 0.6rem 1.25rem;
}
.login-body .form-select{
    padding: 0.6rem 2.25rem 0.6rem 1.25rem;
}
.login-body .form-control::placeholder{
    color: #8D9DA3;
}
.login-body .form-control:focus,
.login-body .form-select:focus{
    border-color: #00BFA5;
}
@media screen and (max-width: 575.9px) {
    .login-body .form-control,
    .login-body .form-select,
    .login-body .login-items{
        font-size: 15px;
    }
}
/* --------------------- Error -------------------- */
.error-container{ min-height: 100vh;}
.error-title{
    font-size: 10rem;
    font-family: maven pro, sans-serif, Arial;
}
@media screen and (max-width: 991.9px) {
    .error-container{ min-height: calc(100vh - 106px);}
}
/* --------------------- menu header footer -------------------- */
.site-container{
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}
.leftSide{
    flex: 0 0 220px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 9;
    box-shadow: rgba(104,12,40, 0.5) 1px 0px 2px 0px;
}
.leftSide .logout{
    opacity: 0.6;
}
.leftSide .logout:hover{
    opacity: 0.9;
}
.rightSide{
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.leftSide .navbar-nav .nav-link{
    padding: 12px 16px;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    transition: all 0.2s linear 0s;
    position: relative;
}
.offcanvas-body .nav-link{
    padding: 12px 0px;
    color: #222222;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    position: relative;
}
.leftSide .navbar-nav .nav-link:hover,
.leftSide .navbar-nav .nav-link:focus,
.leftSide .navbar-nav .nav-link.active{
    color: rgba(255,255,255,1);
    background-color: #680C28;
}
.leftSide .navbar-nav .nav-link.active{
    pointer-events: none;
}
.leftSide .navbar-nav .nav-link:after,
.offcanvas-body .nav-link:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    content: "\f054";
    transition: all 0.2s linear 0s;
}
.offcanvas-body .nav-link:after{ right: 12px;}
.offcanvas-body .nav-link:hover{ color: #000000;}
.leftSide .navbar-nav .nav-link:hover:after,
.offcanvas-body .nav-link:hover:after{
    right: 8px;
}

/* logo */
.logo-container{
    position: relative;
    z-index: 2;
    box-shadow: rgba(34, 34, 34, 0.2) 0px 2px 2px 0px;
}
.logo-container img{ width: 150px;}
@media screen and (max-width: 1399.99px) { /*20230526 add*/
    .leftSide{ flex: 0 0 180px;}
}
/* --------------------- 表格總樣式 -------------------- */
.table-style,
.table-noaction{
    border: 1px solid #dfdfdf;
}
.table-style thead tr th,
.table-noaction thead tr th{
    border-bottom-width: 1px;
    border-color: #dfdfdf!important;
    padding: 10px 8px;
    font-size: 14px;
}
.table-noaction thead tr th{
    font-size: 14px;
}
.table-style tbody tr td,
.table-noaction tbody tr td{
    font-size: 14px;
    word-break: break-all;
    color: #4d4d4d;
    border-bottom-width: 0px;
    padding: 10px 8px;
}
.table-style tbody tr:nth-child(odd) td,
.table-noaction tbody tr:nth-child(odd) td{
    background: #ffffff;
}
.table-style tbody tr:nth-child(even) td,
.table-noaction tbody tr:nth-child(even) td{
    background: #f3f3f3;
}
.table-style .row-hide{
    flex: 0 0 100%;
    padding: 4px 0px;
    font-size: 13px;
}
.table-style .mobile-title{
    flex: 0 0 64px;
    color: #a1a1a1;
}
.table-style .mobile-content{
    flex-grow: 1;
    color: #5a5a5a;
}
/*編輯資料樣式*/
.edit-card .editLabel{
    background-color: #EFDAD7;
    border-bottom: 1px solid #dddddd;
    font-size: 15px;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}
.edit-card .form-control{
    border-radius: 0px;
    border: 1px solid #dfdfdf;
}
.edit-card .editInput{ position: relative;}
.edit-card .editInput.editable:after{
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    content: "\f303";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #cacaca;
}
.edit-card .input-group .input-group-text{
    font-size: 15px;
    background-color: #C37B89;
    border-color: #C37B89;
    color: #ffffff;
    width: 86px;
    display: block;
    text-align: center;
}
.search-card .input-group .input-group-text{
    font-size: 15px;
    background-color: #C37B89;
    border-color: #C37B89;
    color: #ffffff;
    width: 86px;
    display: block;
    text-align: center;
}
.search-card .input-group.input-scan{ /*20230324 add*/
    position: relative;
}
.search-card .input-group.input-scan .form-control{ /*20230324 add*/
    padding: 0.375rem 2.25rem 0.375rem 0.375rem;
}
.icon-scan{ /*20230324 add*/
    display: block;
    padding: 4px;
    margin: 0px;
    background: transparent;
    border-width: 0px;
    position: absolute;
    width: 34px;
    height: 34px;
    top: 1px;
    right: 3px;
    color: #0d6efd;
    z-index: 9;
}
.icon-scan:hover{ /*20230324 add*/
    color: #0a58ca;
}
/* 掃描樣式 */
.scan-block{ /*20230324 add*/
    width: 100%;
    height: 360px;
    max-width: 360px;
    margin: 0px auto;
    position: relative;
}
.scan-block .scan-border{ /*20230324 add*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
    max-width: 360px;
}
@media screen and (max-width: 991.9px) {
    .table-style thead tr th{
        padding: 12px 12px;
    }
    .table-style tbody tr td{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom-width: 0px;
        padding: 12px 12px;
    }
    .table-style tbody tr td a.edit-link{
        flex: 0 0 calc(100% - 37px);
    }
    .view-container .table-style tbody tr td a.edit-link{
        flex: 0 0 100%;
    }
    .table-style tbody tr td button.btn-delete{
        flex: 0 0 37px;
    }
    .table-style .row-mobile,
    .table-style .th-mobile{
        display: none;
    }
}
@media screen and (max-width: 767.9px) {
    .table-noaction thead{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-noaction tbody tr td{
        display: flex;
        flex-wrap: nowrap;
        border-bottom-width: 0px;
        padding: 4px 12px;
        color: #5a5a5a;
    }
    .table-noaction tbody tr td:first-child{
        padding: 16px 12px 4px 12px;
    }
    .table-noaction tbody tr td:last-child{
        padding: 4px 12px 16px 12px;
    }
    .table-noaction td:before{
        content: attr(data-label);
        display: flex;
        flex: 0 0 85px;
        color: #a1a1a1;
        font-weight: bold;
    }
}
@media screen and (max-width: 575.9px) {
    .search-card .input-group .input-group-text{
        font-size: 14px;
    }
    .form-control, .form-select, .form-label, .form-check {
        font-size: 14px;
    }
    .edit-card .editLabel{
        font-size: 14px;
    }
}
/* --------------------- 酒窖管理 -------------------- */
/*RightHeader*/
.main-content{
    background-color: #ffffff;
}
.search-container .input-group{
    flex: 0 0 55%;
}
.search-container .input-group .form-control{
    padding: 0.375rem 2.5rem 0.375rem 1rem;
    font-size: 15px;
    border-color: transparent;
}
.search-container .input-group .btn-search{
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 4;
}
.search-container .input-group.input-scan .icon-scan{/*20230324 add*/
    right: 52px;
}
.search-container .input-group.input-scan .form-control{ /*20230324 add*/
    padding: 0.375rem 5rem 0.375rem 1rem;
}
.search-container .input-group.input-scan .btn-search{/*20230324 add*/
    padding: 0.375rem 4px;
    right: 16px;
}
/* CellarTable */
.cellar-container .table-cellar .th-name{
    min-width: 80px;
}
.cellar-container .table-cellar .th-phone,
.cellar-container .table-cellar .th-number,
.cellar-container .table-cellar .th-address{
    min-width: 120px;
}
.cellar-container .table-cellar .th-celsius,
.cellar-container .table-cellar .th-humidity{
    width: 60px;
}
.cellar-container .table-cellar .th-delete{
    width: 40px;
}
.table-style.table-cellar .mobile-title{
    flex: 0 0 44px;
}
/* 酒窖單一編輯頁 */
.edit-card .cellar-system{
    flex: 0 0 220px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #BEA36B;
}
.cellar-container .table-wine .th-time{
    width: 148px;
}
.cellar-container .table-wine .th-place{
    width: 160px;
}
.cellar-tab{
    background-color: #8A1C3A;
}
.cellar-tab .nav-link{
    color: rgba(255,255,255,0.45);
    border-width: 0px;
    padding: 8px 12px 8px 24px;
    font-size: 1rem;
    margin-bottom: 0px;
    position: relative;
}
.cellar-tab .nav-link:hover{
    border-width: 0px;
    color: rgba(255,255,255,1);
}
.cellar-tab .nav-link.active{
    background-color: #8A1C3A;
    color: rgba(255,255,255,1);
    border-width: 0px;
}
.cellar-tab .nav-link.active:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    content: "\f0da";
    transition: all 0.2s linear 0s;
}
.cellar-container .table-style.table-wine .th-owner{
    min-width: 64px;
}
.cellar-container .table-style.table-wine .th-time{
    width: 100px;
}
.cellar-container .table-style.table-wine .th-place,
.cellar-container .table-style.table-wine .th-note,
.cellar-container .table-noaction.table-record .th-note,
.cellar-container .table-noaction.table-record .th-place{
    width: 148px;
}
/* 溫度濕度表格 */
.table-norwd{
    border: 1px solid #dfdfdf;
}
.table-norwd thead tr th{
    border-bottom-width: 1px;
    border-color: #dfdfdf!important;
    padding: 10px 8px;
    font-size: 14px;
}
.table-norwd tbody tr td{
    font-size: 14px;
    word-break: break-all;
    color: #4d4d4d;
    border-bottom-width: 0px;
    padding: 10px 8px;
}
.table-norwd tbody tr:nth-child(odd) td{
    background: #ffffff;
}
.table-norwd tbody tr:nth-child(even) td{
    background: #f3f3f3;
}
@media screen and (max-width: 1299.9px) {
    .cellar-container .table-noaction.table-record .th-time{
        width: 100px;
    }
}
@media screen and (max-width: 1199.9px) { /*20230531 add*/
    .cellar-container .table-style.table-wine thead tr th{
        padding: 12px 12px;
    }
    .cellar-container .table-style.table-wine tbody tr td{
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom-width: 0px;
        padding: 12px 12px;
    }
    .cellar-container .table-style.table-wine .row-mobile,
    .cellar-container .table-style.table-wine .th-mobile{
        display: none;
    }
    .cellar-container .table-style.table-wine tbody tr td div.edit-link {
        font-weight: bold;
        color: #8A1C3A;
        font-size: 15px;
    }
    .cellar-container .table-style.table-wine .mobile-title {
        flex: 0 0 64px;
    }
    .cellar-container .table-noaction.table-record thead{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .cellar-container .table-noaction.table-record tbody tr td{
        display: flex;
        flex-wrap: nowrap;
        border-bottom-width: 0px;
        padding: 4px 12px;
        color: #5a5a5a;
    }
    .cellar-container .table-noaction.table-record tbody tr td:first-child{
        padding: 16px 12px 4px 12px;
    }
    .cellar-container .table-noaction.table-record tbody tr td:last-child{
        padding: 4px 12px 16px 12px;
    }
    .cellar-container .table-noaction.table-record td:before{
        content: attr(data-label);
        display: flex;
        flex: 0 0 85px;
        color: #a1a1a1;
        font-weight: bold;
    }
}
@media screen and (max-width: 991.9px) {
    .search-container .input-group{
        flex: 0 0 45%;
    }
}
@media screen and (max-width: 767.9px) {
    .edit-card .cellar-system{
        flex: 0 0 100%;
        margin-top: 28px;
    }
    .cellar-container .table-noaction.table-wine td:before{
        flex: 0 0 56px;
    }
}
@media screen and (max-width: 575.9px) {
    .search-container .input-group{
        flex: 0 0 100%;
    }
    .cellar-tab .nav-link{
        padding: 8px 4px 8px 16px;
    }
    .cellar-tab .nav-link.active:after{
        left: 8px;
    }
}
/* --------------------- 酒品人員管理 -------------------- */
.owner-container .table-owner .th-name{
    min-width: 80px;
}
.owner-container .table-owner .th-phone,
.owner-container .table-owner .th-number{
    min-width: 110px;
}
.owner-container .table-owner .th-wine,
.owner-container .table-owner .th-cellarQuantity{
    width: 76px;
}
.owner-container .table-owner .th-delete{
    width: 40px;
}
.owner-container .table-owner .th-accessor{
    width: 140px;
}
.owner-container .table-owner .th-cellar{
    width: 172px;
}
.owner-container .table-noaction.table-wine th{
    min-width: 110px;
}
.owner-container .table-noaction.table-record th{
    min-width: 80px
}
.owner-container .table-noaction .th-place,
.owner-container .table-noaction .th-cellar,
.owner-container .table-noaction .th-note{
    width: 160px;
}
.row-cellar,
.row-accessor{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.items-data:after{
    content: "、";
}
.items-data:last-child:after{
    content: "";
}
/*編輯擁有者頁*/
.owner-container .table-record .th-time{
    width: 152px;
}
.owner-container .table-record .th-action{
    width: 100px;
}
.owner-container .table-accessible .th-action,
.owner-container .table-accessible .th-delete{
    width: 40px;
}
.owner-container .table-accessible .row-note{
    white-space: pre-wrap;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
@media screen and (max-width: 1299.9px) {
    .owner-container .table-noaction.table-record .th-time{
        width: 100px;
    }
}
@media screen and (max-width: 1199.9px) {
    .table-style.table-owner thead tr th{
        padding: 12px 12px;
    }
    .table-style.table-owner tbody tr td{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom-width: 0px;
        padding: 12px 12px;
    }
    .table-style.table-owner tbody tr td a.edit-link{
        flex: 0 0 calc(100% - 37px);
    }
    .table-style.table-owner tbody tr td button.btn-delete{
        flex: 0 0 37px;
    }
    .table-style.table-owner .row-mobile,
    .table-style.table-owner .th-mobile{
        display: none;
    }
    .owner-container .table-style .th-time{
        width: 100px;
    }
    .owner-container .table-noaction thead{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .owner-container .table-noaction tbody tr td{
        display: flex;
        flex-wrap: nowrap;
        border-bottom-width: 0px;
        padding: 4px 12px;
        color: #5a5a5a;
    }
    .owner-container .table-noaction tbody tr td:first-child{
        padding: 16px 12px 4px 12px;
    }
    .owner-container .table-noaction tbody tr td:last-child{
        padding: 4px 12px 16px 12px;
    }
    .owner-container .table-noaction td:before{
        content: attr(data-label);
        display: flex;
        flex: 0 0 68px;
        color: #a1a1a1;
        font-weight: bold;
    }
}
@media screen and (max-width: 991.9px) {
    .owner-container .table-accessible .row-name .btn-shockpink{
        width: 32px;
        height: 32px;
    }
    .owner-container .table-accessible .row-name .btn-delete{
        width: 40px;
    }
    .owner-container .table-accessible .row-name .row-name-text{
        flex: 0 0 calc(100% - 72px);
        padding: 0px 8px;
    }
    .owner-container .table-accessible .row-hide{
        padding-left: 42px;
    }
    .owner-container .table-accessible .mobile-title{
        flex: 0 0 40px;
    }

}
/* --------------------- 酒品種類管理 -------------------- */
.category-container .table-category .th-wine,
.category-container .table-category .th-cellar{
    width: 88px;
}
.category-container .table-category .th-delete{
    width: 40px;
}
/* --------------------- 酒品資料管理 & 進出紀錄 -------------------- */
.gtin-box select.form-select{ /*20231127add*/
    flex: 0 0 calc(50% - 8px);
}
.table-wine .th-capacity,
.table-record .th-capacity{
    width: 80px;
}
.table-wine .th-Gtin,
.table-wine .th-owner,
.table-wine .th-cellar{
    min-width: 80px;
}
.table-record .th-cellar,
.table-record .th-note{ /*20230530 add*/
    width: 170px;
}
.table-record .row-place{ /*20230530 add*/
    -webkit-line-clamp: 6;
}
.table-wine .th-year,
.table-wine .th-img,
.table-record .th-year,
.table-record .th-img,
.wine-container .table-wine .th-action{
    width: 60px;
}
.record-container .table-record .th-action{ width: 80px;}
.wine-container .table-wine .th-delete{
    width: 40px;
}
.record-container .table-record .th-owner,
.record-container .table-record .th-mover{
    min-width: 60px;
}
.record-container .table-record .th-time{
    width: 148px;
}
.table-wine .list-img,
.table-record .list-img{
    width: 40px;
    height: 40px;
    position: relative;
}
.table-wine .list-img img,
.table-record .list-img img{
    width: 38px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    background-color: #ffffff;
}
.table-wine .img-zoom,
.table-record .img-zoom{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0px;
    width: 40px;
    height: 40px;
    font-size: 23px;
    color: #ffffff;
    opacity: 0.75;
    z-index: 2;
    transition: all 0.2s linear 0s;
}
.table-wine .img-zoom:hover,
.table-record .img-zoom:hover{
    opacity: 1;
}
.table-wine .list-img:after,
.table-record .list-img:after{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(0,0,0,0.3);
    z-index: 1;
}
.table-style.table-wine .mobile-title {
    flex: 0 0 52px;
}
/* 移動與新增酒品 */
.table-wine .btn-move i{
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    background-color: #C37B89;
    color: #ffffff;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
    transition: all 0.2s linear 0s;
}
.table-wine .btn-move:hover i{
    color: #ffffff;
    background-color: #830B00;
}
.form-control.input-select{
    padding: 0.275rem 0.35rem 0.275rem 0.75rem;
    min-height: 36.5px;
    line-height: 1.2;
}
.form-control.input-select .input-select-text{
    flex: 0 0 clac(100% - 94px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-control.input-select .input-select-clear{
    flex: 0 0 24px;
    text-align: right;
}
.form-control.input-select .input-select-btn{
    flex: 0 0 70px;
    text-align: right;
}
.form-control.input-select .input-select-btn button{ /*20230313修改*/
    padding: 1px 8px;
}
.uploadImg{
    max-width: 160px;
}
.inputGtin .form-control{
    padding: 0.375rem 1.75rem;
}
.inputGtin .inputGtin-prefix{
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 15px;
    color: #7a7a7a;
}
.inputGtin .inputGtin-suffix{
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 15px;
    color: #7a7a7a;
}
.editInput.inputGtin .form-control{
    padding: 0.375rem 2.75rem 0.375rem 1.75rem;
}
.editInput.inputGtin .inputGtin-prefix{ left: 20px;}
.editInput.inputGtin .inputGtin-suffix{ right: 36px;}
/* 編輯酒品頁 */
.selectedCategory{
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 4px;
    margin-right: 4px;
    width: calc(100% - 8px);
}
.wineImg{
    flex: 0 0 160px;
    padding: 0px 12px;
}
.wineImg img{ max-width: 200px;}
/*編輯酒品-產出條碼紀錄*/
.wine-container .table-qrcode .th-date{ min-width: 160px;}
.wine-container .table-qrcode .th-batchNum{ min-width: 120px;}
.wine-container .table-qrcode .th-quantity{ width: 68px;}
.wine-container .table-qrcode .th-download{ width: 240px;}/*20230614修改*/
.wine-container .table-qrcode .mobile-download{ /*20230614修改*/
    flex: 0 0 200px;
}
@media screen and (max-width: 1299.9px) {
    .record-container .table-style.table-record .th-time{ width: 100px;}
}
@media screen and (max-width: 1199.9px) {
    .record-container .table-style.table-record thead tr th{
        padding: 12px 12px;
    }
    .record-container .table-style.table-record tbody tr td{
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom-width: 0px;
        padding: 12px 12px;
    }
    .record-container .table-style.table-record .row-mobile,
    .record-container .table-style.table-record .th-mobile{
        display: none;
    }
    .record-container .table-style.table-record  tbody tr td div.edit-link {
        font-weight: bold;
        color: #8A1C3A;
        font-size: 15px;
    }
}
@media screen and (max-width: 991.9px) {
    .table-style tbody tr td div.edit-link{
        font-weight: bold;
        color: #8A1C3A;
        font-size: 15px;
    }
    .wine-container .table-style.table-wine tbody tr td .btn-action{ /*20230315add*/
        margin-right: 8px;
    }
    .wine-container .table-style.table-wine tbody tr td a.edit-link{ /*20230315add*/
        flex: 0 0 calc(100% - 80px);
    }
    .view-container .wine-container .table-style.table-wine tbody tr td a.edit-link{ /*20230315add*/
        flex: 0 0 calc(100% - 60px);
    }
    .wine-container .table-qrcode .mobile-download{
        flex: 0 0 100%;
    }
}
@media screen and (max-width: 767.9px) {
    .wineImg{ flex: 0 0 100%;}
}
@media screen and (max-width: 575.9px) {
    .table-wine .mobile-wine{
        flex-wrap: wrap;
    }
    .table-wine .mobile-wine .flex-grow-1{
        flex: 0 0 calc(100% - 56px);
    }
    .table-wine .mobile-wine .mobile-action{
        flex: 0 0 100%;
        margin-top: 8px;
    }
    .form-control.input-select .input-select-btn{
        flex: 0 0 64px;
    }
    .gtin-box select.form-select{ /*20231127add*/
        flex: 0 0 100%;
    }

}
/* --------------------- 入庫資料：以酒排序 -------------------- */
.entry-container .table-entryWine .form-check-input{
    border-radius: 0px;
}
.entry-container .table-entryWine .th-select{ width: 32px;}
.entry-container .table-entryWine .th-status{ width: 88px;}
.entry-container .table-entryWine .th-date{ width: 100px;}
.entry-container .table-entryWine .th-action{ width: 100px;}/*20230526改*/
.entry-container .table-entryWine .th-id{ min-width: 80px;}
.entry-container .table-entryWine .th-name{ min-width: 140px;}
.entry-container .table-entryWine .th-source,
.entry-container .table-entryWine .th-owner,
.entry-container .table-entryWine .th-cellar,
.entry-container .table-entryWine .th-accessible{
    min-width: 60px;
}
.entry-container .table-entryWine .th-cellar{
    width: 160px;
}
.entry-container .table-entryWine .th-place{ /*20230526 add*/
    width: 160px;
}
.row-place{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.accessible-item:last-child .symbol{ display: none;}
.btn-action i{
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    background-color: #C37B89;
    color: #ffffff;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
    transition: all 0.2s linear 0s;
}
.btn-action:hover i{
    color: #ffffff;
    background-color: #830B00;
}
.table-style.table-entryWine .row-hide{
    flex: 0 0 100%;
    padding: 0px 0px 4px 0px;
    font-size: 14px;
}
.mobile-entry-title{ flex: 0 0 calc(100% - 40px);}
.mobile-entry .btn-dropdown:hover{ opacity: 0.8;}
.mobile-entry .dropdown-item{ font-size: 15px;}
.mobile-entry .dropdown-item i{
    width: 24px;
    text-align: center;
}
.editModal .mobile-title{ flex: 0 0 120px;}
.editModal .form-control.input-select .input-select-btn{
    flex: 0 0 40px;
}
/* 掃描入庫出庫*/
.scan-items{ /*20230315新增*/
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-bottom: 12px;
}
.scan-items .scan-action{ /*20230315新增*/
    flex: 0 0 30px;
    margin-right: 4px;
}
.scan-items .scan-quantity{ /*20230315新增*/
    flex: 0 0 70px;
    margin-left: 8px;
}
.scan-items .scan-quantity .form-control{ /*20230315新增*/
    padding: 0.375rem 0.5rem;
}
.entry-scan{ /*20230324 add*/
    position: relative;
}
@media screen and (max-width: 1199.9px) {
    .table-style.table-entryWine thead tr th{
        padding: 12px 12px;
    }
    .table-style.table-entryWine tbody tr td{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom-width: 0px;
        padding: 12px 12px;
    }
    .table-entry .table-style.table-entryWine tbody tr td{
        border-top: 1px dashed #dedede;
    }
    .table-style.table-entryWine tbody tr td a.edit-link{
        flex: 0 0 calc(100% - 60px);
    }
    .table-style.table-entryWine tbody tr td button.btn-record{
        flex: 0 0 60px;
    }
    .table-style.table-entryWine .row-mobile,
    .table-style.table-entryWine .th-mobile{
        display: none;
    }
    .table-style.table-entryWine tbody tr{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .table-style.table-entryWine tbody tr td.mobile-select{
        padding-top: 22px;
    }
    .mobile-select{ flex: 0 0 38px;}
    .mobile-entry{ flex: 0 0 calc(100% - 40px);}/*20230526改*/
}
@media screen and (max-width: 575.9px) {
    .scan-items{
        font-size: 14px;
        margin-bottom: 16px;
    }
}
/* --------------------- 入庫資料：入庫排序 -------------------- */
.table-entry{
    border: 1px solid #dfdfdf;
}
.row-header{
    display: flex;
    align-items:center;
    font-size: 15px;
    border-bottom: 1px solid #dfdfdf;
    font-size: 14px;
    font-weight: bold;
}
.row-entry{
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    font-size: 14px;
}
.table-entry .row-entry:nth-child(odd){
    background: #ffffff;
}
.table-entry .row-entry:nth-child(even){
    background: #f3f3f3;
}
.row-header .th-edit,
.row-entry .th-edit{
    flex: 0 0 52px;
    padding: 10px 8px;
}
.row-header .th-check,
.row-entry .th-check{
    flex: 0 0 30px;
    padding: 10px 4px;
}
.row-header .th-check .form-check-input,
.row-entry .th-check .form-check-input,
.table-entryWine .form-check-input{
    width: 16px;
    height: 16px;
}
.row-header .th-date,
.row-entry .th-date{
    flex: 0 0 170px;
    padding: 10px 8px;
}
.row-header .th-source,
.row-entry .th-source{
    flex: 0 0 calc(100% - 798px);
    padding: 10px 8px;
}
.row-header .th-quantity,
.row-entry .th-quantity{
    flex: 0 0 72px;
    padding: 10px 8px;
}
.row-header .th-recordNum,
.row-entry .th-recordNum{
    flex: 0 0 140px;
    padding: 10px 8px;
    word-break: break-all;
}
.row-header .th-note,
.row-entry .th-note{
    flex: 0 0 240px;
    padding: 10px 8px;
}
.entry-note-title{
    flex: 0 0 40px;
}
.entry-note{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}
/*20230526 刪.row-header .th-download,
.row-entry .th-download{
    flex: 0 0 40px;
}*/
.row-header .th-action,
.row-entry .th-action{
    flex: 0 0 52px;
}
.row-entry .th-expanded{
    flex: 0 0 100%;
}
.table-entry .table-style.table-entryWine{
    border-width: 0px;
}
.table-entry .table-style.table-entryWine thead tr th{
    height: 1px;
    border-width: 0px;
    padding: 0px;
}
.table-entry .table-style.table-entryWine tbody tr:nth-child(odd) td{
    background: transparent;
}
.table-entry .table-style.table-entryWine tbody tr:nth-child(even) td{
    background: transparent;
}
.entry-tab .nav-link{
    color: rgba(255,255,255,0.45);
    border-width: 0px;
    padding: 8px 12px 8px 24px;
    font-size: 1rem;
    margin-bottom: 0px;
    position: relative;
}
.entry-tab .nav-link:hover{
    border-width: 0px;
    color: rgba(255,255,255,1);
}
.entry-tab .nav-link.active{
    background-color: #8A1C3A;
    color: rgba(255,255,255,1);
    border-width: 0px;
}
.entry-tab .nav-link.active:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    content: "\f0da";
    transition: all 0.2s linear 0s;
}
.btn[aria-expanded="false"] .fa-chevron-up{
    display: none;
}
.btn[aria-expanded="true"] .fa-chevron-down{
    display: none;
}
.action-box{
    background-color: #ffffff;
    position: sticky;
    top:0;
}
.entry-container .table-style.table-entryWine .mobile-title {
    flex: 0 0 84px;
}
@media screen and (max-width: 1199.9px) {
    .row-entry .th-edit .btn-shockpink{
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
    }
    .row-header .th-edit,
    .row-entry .th-edit{
        flex: 0 0 40px;
        padding: 10px 4px;
    }
    .row-header .th-source,
    .row-entry .th-source{
        flex: 0 0 calc(100% - 152px);
    }
    .row-entry .th-action .btn{
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
    }
    .row-header .th-action,
    .row-entry .th-action{
        flex: 0 0 30px;
        padding: 10px 2px;
    }
}
/* --------------------- 20230328 條碼管理 -------------------- */
.table-barcode .th-edit,
.table-barcode .th-delete{
    width: 48px;
    text-align: center;
}
/* --------------------- 20230915 修改新增 RFID管理 -------------------- */
.form-rfid{ position: relative;}
.form-rfid .form-control{
    padding: 0.375rem 4rem 0.375rem 0.75rem;
}
.clear-text{
    position: absolute;
    bottom: 8px;
    right: 14px;
    background-color: #555555;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    padding: 0px;
    color: #ffffff;
    border-radius: 50%;
    font-size: 13px;
}
.clear-text:hover{
    color: #ffffff;
    background-color: #333333;
}
.form-rfid .form-control:required:valid:focus + .clear-text {
    display: inline-block;
}
.form-rfid .form-control:required:invalid + .clear-text {
    display: none;
}
.form-rfid .form-control:required:valid ~ button.icon-scan,
.form-rfid .form-control:required:valid:focus ~ button.icon-scan{
    right: 40px;
    bottom: 2px;
    top: unset;
}
.form-rfid .form-control:required:valid ~ button.icon-rfid,
.form-rfid .form-control:required:valid:focus ~ button.icon-rfid{
    right: 46px;
    bottom: 8px;
    top: unset;
}
.form-rfid .form-control:required:invalid ~ button.icon-scan{
    right: 12px;
    bottom: 2px;
    top: unset;
}
.form-rfid .form-control:required:invalid ~ button.icon-rfid{
    right: 18px;
    bottom: 8px;
    top: unset;
}

/*rfid table*/
.table-rfid .th-delete{ width: 60px;}
.table-rfid .th-download{ width: 60px;}
.table-rfid .th-time{ min-width: 160px;}
.icon-rfid{
    position: absolute;
    display: none;
    padding: 4px;
    margin: 0px;
    background: transparent;
    border-width: 0px;
    width: 20px;
    height: 20px;
    top: 8px;
    right: 96px;
    color: #0d6efd;
    z-index: 10;
    background-image: url('../images/icon-rfid.svg');
    background-size: contain;
}
.icon-rfid:hover{
    background-image: url('../images/icon-rfid-hover.svg');
}
@media screen and (max-width: 991.9px){
    .table-norwd.table-barcode tbody tr td{
        font-size: 13px;
    }
    .table-style.table-rfid .mobile-title {
        flex: 0 0 88px;
        color: #222222;
    }
    .search-container .input-group.input-scan.input-rfid .form-control{
        padding: 0.375rem 8rem 0.375rem 1rem;
    }
    .icon-rfid{ display: block;}
}


/* --------------------- 酒品資料匯入 -------------------- */
.table-excel .row-header{
    display: flex;
    align-items: center;
    color: #4d4d4d;
    border: 1px solid #dfdfdf;
}
.table-excel .row-body{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #4d4d4d;
    font-size: 14px;
    border-style: solid;
    border-color: #dfdfdf;
    border-width: 0px 1px 1px 1px;
}
.table-excel .row-body:nth-child(odd){
    background: #ffffff;
}
.table-excel .row-body:nth-child(even){
    background: #f3f3f3;
}
.table-excel .th-date{
    flex: 0 0 160px;
    padding: 10px 8px;
}
.table-excel .th-quantity{
    flex: 0 0 calc(100% - 340px);
    padding: 10px 8px;
}
.table-excel .th-action{
    flex: 0 0 180px;
    padding: 10px 8px;
}
.table-excel .th-expanded{
    flex: 0 0 100%;
    width: 0;
}
.table-excel .th-expanded .table-data{
    background-color: #ffffff;
}
.table-excel .th-expanded .table-data thead th{
    background-color: #FFF2D7;
}
@media screen and (max-width: 1199.9px){
    .table-excel .th-expanded .table-data{
        width: 1200px;
        overflow-x: auto;
    }
}
@media screen and (max-width: 768.9px){
    .table-excel .th-expanded .table-data{
        width: 900px;
    }
}
@media screen and (max-width: 575.9px){
    .table-excel .row-header{ display: none;}
    .table-excel .row-body{
        flex-wrap: wrap;
        padding: 8px 0px;
        border-width: 1px 1px 0px 1px;
    }
    .table-excel .row-body:last-child{ border-bottom-width: 1px;}
    .table-excel .th-date,
    .table-excel .th-quantity,
    .table-excel .th-action{
        display: flex;
        flex:  0 0 100%;
        padding: 6px 8px;
    }
    .table-excel .th-date:before,
    .table-excel .th-quantity:before,
    .table-excel .th-action:before{
        content: attr(data-label);
        flex: 0 0 85px;
        color: #a1a1a1;
        font-weight: bold;
    }
}
.div-reader {
    width: 300px;
    margin: 0 auto;
}
.white-space {
    white-space: pre-wrap;
}
.btn-select-cellar {
    margin-left: 0;
}
.select-cellar {
    margin-left:0;
}
.white-space{
    white-space:pre-wrap;
}
.infoModalStr{
    top:30%;height:30px;
}