:root {
    font-family: "Microsoft JhengHei", Poppins, Helvetica, Calibri, Arial, "sans-serif";
    font-size: 14px !important;
}

/* body */
/**, body, html {
    font-family: $font-family;
    font-size: $root-font-size !important;
}*/
body {
    background-color: #FFFAF9;
}
i {
    color: #000000;
}
#kt_aside {
    background-color: #fff;
}

/* Metronic */
#kt_header {
    background-color: #fff;
    /*    height: 45px;
  */
}

#kt_toolbar {
    /*    top: 45px;
  */
}

.breadcrumb {
    background-color: transparent;
}

.content {
    padding: 10px 0;
}

.brand-logo-title {
    color: #ffffff;
    font-size: 2rem;
}

/* Bootstrap 5*/
.form-floating > label {
    font-size: 1rem;
}

/* font , color */
.font-weight-700 {
    font-weight: 700;
}

.font-weight-800 {
    font-weight: 800;
}

.text-blue {
    color: #3699FF;
}

/* Card */
.card.card-custom {
    border: 0;
}

    .card.card-custom > .card-body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

.card-custom > .card-footer {
    /*    padding: 1rem 2.25rem;
      background-color: #fff;
      border-top: 1px solid #ebedf3;
  */
}

/* form */
.form-group {
    margin-bottom: 0.5rem;
}

    .form-group .col-form-label {
        font-weight: 700;
        /*    text-align: right;
  */
    }

.form-control-plaintext {
    background-color: #fafafa;
}

.form-control[readonly] {
    /*background-color: #F9F7F5;
    border-color: #F9F7F5;
    color: #3F67A1;
    transition: color 0.2s ease, background-color 0.2s ease;*/
}

.input-group-text {
    border: none;
}

label[required]:before {
    content: "*";
    color: red;
}

label[optional]:before {
    content: "[]";
    color: blue;
}

.optional:before {
    content: "[";
    position: relative;
    font-size: inherit;
    color: cornflowerblue;
    padding-left: 0.25rem;
    font-weight: bold;
}
.optional:after {
    content: "]";
    position: relative;
    font-size: inherit;
    color: cornflowerblue;
    padding-left: 0.25rem;
    font-weight: bold;
}

.align-center {
    align-items: center !important;
}

/* KTDatatable - datatable-umall */
.datatable.datatable-umall > .datatable-table > .datatable-head {
    background-color: #f8f8f8;
}

    .datatable.datatable-umall > .datatable-table > .datatable-head > .datatable-row > .datatable-cell > span {
        font-size: 0.8rem;
        text-transform: none;
        font-weight: 700;
    }

.datatable.datatable-umall > .datatable-table > .datatable-body .datatable-row > .datatable-cell {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.8rem;
}

.datatable.datatable-umall > .datatable-table > .datatable-foot .datatable-row > .datatable-cell {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.8rem;
}

.datatable-pager-size {
    font-size: 0.9rem !important;
    width: 90px !important;
}

/* modal */
.modal-max {
    max-width: 90%;
}

/* FLOAT LABEL */
.float-right {
    float: right;
}

.float-left {
    float: left;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.form-title-md-right {
    text-align: left;
}
@media (min-width: 768px) {
    .form-title-md-right {
        text-align: right;
    }
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(53,149,246, 0.4);
}

::-webkit-scrollbar {
    height: 0.6rem;
    width: 0.6rem;
}

::-webkit-scrollbar-thumb {
    background-color: #838383;
    border-radius: 10px;
}

.CheckItemDiv {
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow-y: auto;
    height: 200px;
    padding: 10px 10px;
}

/*************************************************************************************按鈕樣式***********************************************************************************/
.btn-brown {
    color: #ffffff;
    background-color: #B69B7D;
    border-color: #B69B7D;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .btn-brown:hover {
        color: #ffffff;
        background-color: #c79d6d;
        border-color: #cea97f;
    }

    .btn-brown:focus, .btn-brown.focus {
        color: #ffffff;
        background-color: #c79d6d;
        border-color: #cea97f;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
        box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
    }

    .btn-brown.disabled, .btn-brown:disabled {
        color: #ffffff;
        background-color: #B69B7D;
        border-color: #B69B7D;
    }

    .btn-brown:not(:disabled):not(.disabled):active, .btn-brown:not(:disabled):not(.disabled).active, .show > .btn-brown.dropdown-toggle {
        color: #ffffff;
        background-color: #eeebe6;
        border-color: #eeebe6;
    }

        .btn-brown:not(:disabled):not(.disabled):active:focus, .btn-brown:not(:disabled):not(.disabled).active:focus, .show > .btn-brown.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
        }




.btn.btn-brown {
    color: #ffffff;
    background-color: #B69B7D;
    border-color: #B69B7D;
}

    .btn.btn-brown i {
        color: #ffffff;
    }

    .btn.btn-brown .svg-icon svg g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
        fill: #ffffff;
    }

    .btn.btn-brown .svg-icon svg:hover g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
    }

    .btn.btn-brown.dropdown-toggle:after {
        color: #ffffff;
    }

    .btn.btn-brown:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-brown:focus:not(.btn-text), .btn.btn-brown.focus:not(.btn-text) {
        color: #ffffff;
        background-color: #c79d6d;
        border-color: #c79d6d;
    }

        .btn.btn-brown:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-brown:focus:not(.btn-text) i, .btn.btn-brown.focus:not(.btn-text) i {
            color: #ffffff;
        }

        .btn.btn-brown:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-brown:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-brown.focus:not(.btn-text) .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-brown:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg:hover g [fill], .btn.btn-brown:focus:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-brown.focus:not(.btn-text) .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-brown:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-brown:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-brown.focus:not(.btn-text).dropdown-toggle:after {
            color: #ffffff;
        }

    .btn.btn-brown.disabled, .btn.btn-brown:disabled {
        color: #ffffff;
        background-color: #B69B7D;
        border-color: #B69B7D;
    }

        .btn.btn-brown.disabled i, .btn.btn-brown:disabled i {
            color: #ffffff;
        }

        .btn.btn-brown.disabled .svg-icon svg g [fill], .btn.btn-brown:disabled .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-brown.disabled .svg-icon svg:hover g [fill], .btn.btn-brown:disabled .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-brown.disabled.dropdown-toggle:after, .btn.btn-brown:disabled.dropdown-toggle:after {
            color: #ffffff;
        }

    .btn.btn-brown:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-brown:not(:disabled):not(.disabled).active, .show > .btn.btn-brown.dropdown-toggle, .show .btn.btn-brown.btn-dropdown {
        color: #ffffff;
        background-color: #c79d6d;
        border-color: #c79d6d;
    }

        .btn.btn-brown:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-brown:not(:disabled):not(.disabled).active i, .show > .btn.btn-brown.dropdown-toggle i, .show .btn.btn-brown.btn-dropdown i {
            color: #ffffff;
        }

        .btn.btn-brown:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-brown:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-brown.dropdown-toggle .svg-icon svg g [fill], .show .btn.btn-brown.btn-dropdown .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-brown:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-brown:not(:disabled):not(.disabled).active .svg-icon svg:hover g [fill], .show > .btn.btn-brown.dropdown-toggle .svg-icon svg:hover g [fill], .show .btn.btn-brown.btn-dropdown .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-brown:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-brown:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-brown.dropdown-toggle.dropdown-toggle:after, .show .btn.btn-brown.btn-dropdown.dropdown-toggle:after {
            color: #ffffff;
        }

.btn.btn-light-brown {
    color: #B69B7D;
    background-color: #f7f5f2;
    border-color: transparent;
}

    .btn.btn-light-brown i {
        color: #B69B7D;
    }

    .btn.btn-light-brown .svg-icon svg g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
        fill: #B69B7D;
    }

    .btn.btn-light-brown .svg-icon svg:hover g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
    }

    .btn.btn-light-brown.dropdown-toggle:after {
        color: #B69B7D;
    }

    .btn.btn-light-brown:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-brown:focus:not(.btn-text), .btn.btn-light-brown.focus:not(.btn-text) {
        color: #ffffff;
        background-color: #B69B7D;
        border-color: transparent;
    }

        .btn.btn-light-brown:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-light-brown:focus:not(.btn-text) i, .btn.btn-light-brown.focus:not(.btn-text) i {
            color: #ffffff;
        }

        .btn.btn-light-brown:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-light-brown:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-light-brown.focus:not(.btn-text) .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-light-brown:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg:hover g [fill], .btn.btn-light-brown:focus:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-light-brown.focus:not(.btn-text) .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-light-brown:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-light-brown:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-light-brown.focus:not(.btn-text).dropdown-toggle:after {
            color: #ffffff;
        }

    .btn.btn-light-brown.disabled, .btn.btn-light-brown:disabled {
        color: #B69B7D;
        background-color: #FFE2E5;
        border-color: transparent;
    }

        .btn.btn-light-brown.disabled i, .btn.btn-light-brown:disabled i {
            color: #B69B7D;
        }

        .btn.btn-light-brown.disabled .svg-icon svg g [fill], .btn.btn-light-brown:disabled .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #B69B7D;
        }

        .btn.btn-light-brown.disabled .svg-icon svg:hover g [fill], .btn.btn-light-brown:disabled .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-light-brown.disabled.dropdown-toggle:after, .btn.btn-light-brown:disabled.dropdown-toggle:after {
            color: #B69B7D;
        }

    .btn.btn-light-brown:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-brown:not(:disabled):not(.disabled).active, .show > .btn.btn-light-brown.dropdown-toggle, .show .btn.btn-light-brown.btn-dropdown {
        color: #ffffff;
        background-color: #B69B7D;
        border-color: transparent;
    }

        .btn.btn-light-brown:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-light-brown:not(:disabled):not(.disabled).active i, .show > .btn.btn-light-brown.dropdown-toggle i, .show .btn.btn-light-brown.btn-dropdown i {
            color: #ffffff;
        }

        .btn.btn-light-brown:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-light-brown:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-light-brown.dropdown-toggle .svg-icon svg g [fill], .show .btn.btn-light-brown.btn-dropdown .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-light-brown:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-light-brown:not(:disabled):not(.disabled).active .svg-icon svg:hover g [fill], .show > .btn.btn-light-brown.dropdown-toggle .svg-icon svg:hover g [fill], .show .btn.btn-light-brown.btn-dropdown .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-light-brown:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-light-brown:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-light-brown.dropdown-toggle.dropdown-toggle:after, .show .btn.btn-light-brown.btn-dropdown.dropdown-toggle:after {
            color: #ffffff;
        }

.btn-outline-brown {
    color: #B69B7D;
    border-color: #B69B7D;
}

.btn.btn-active-light-brown.btn-outline:not(.btn-outline-default) {
    border-color: #B69B7D !important;
}

.btn-check:checked + .btn.btn-active-light-brown, .btn-check:active + .btn.btn-active-light-brown, .btn.btn-active-light-brown:focus:not(.btn-active), .btn.btn-active-light-brown:hover:not(.btn-active), .btn.btn-active-light-brown:active:not(.btn-active), .btn.btn-active-light-brown.active, .btn.btn-active-light-brown.show, .show > .btn.btn-active-light-brown {
    color: #B69B7D;
    border-color: #F9F7F5;
    background-color: #F9F7F5 !important;
}
/*************************************************************************************按鈕樣式***********************************************************************************/
.text-active-brown {
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .text-active-brown i {
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .text-active-brown.active {
        transition: color 0.2s ease, background-color 0.2s ease;
        color: #B69B7D !important;
    }

        .text-active-brown.active i {
            transition: color 0.2s ease, background-color 0.2s ease;
            color: #B69B7D !important;
        }

        .text-active-brown.active .svg-icon svg [fill]:not(.permanent):not(g) {
            transition: fill 0.3s ease;
            fill: #B69B7D;
        }

        .text-active-brown.active .svg-icon svg:hover [fill]:not(.permanent):not(g) {
            transition: fill 0.3s ease;
        }




.badge-brown {
    color: #FFFFFF;
    background-color: #B69B7D;
}

.badge-light-brown {
    color: #B69B7D;
    background-color: #f7f5f2;
}


.text-brown {
    color: #B69B7D !important;
}

.gift4-content {
    position: relative;
}

    .gift4-content:hover .gift4-hover {
        display: block;
        position: absolute;
        /*top: -45px;*/
        left: 0;
        color: #fff;
        font-size: .8em;
        background: #0095E8;
        padding: 5px;
        border-radius: 5px;
    }

.gift4-hover {
    display: none;
    width: max-content;
}

/*************************************************************************************王品按鈕樣式***********************************************************************************/
.btn-wpred {
    color: #ffffff;
    background-color: #E31C3B;
    border-color: #E31C3B;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .btn-wpred:hover {
        color: #ffffff;
        background-color: #E31C3B;
        border-color: #E31C3B;
    }

    .btn-wpred:focus, .btn-wpred.focus {
        color: #ffffff;
        background-color: #E31C3B;
        border-color: #E31C3B;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
        box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
    }

    .btn-wpred.disabled, .btn-wpred:disabled {
        color: #ffffff;
        background-color: #E31C3B;
        border-color: #E31C3B;
    }

    .btn-wpred:not(:disabled):not(.disabled):active, .btn-wpred:not(:disabled):not(.disabled).active, .show > .btn-wpred.dropdown-toggle {
        color: #ffffff;
        background-color: #eeebe6;
        border-color: #eeebe6;
    }

        .btn-wpred:not(:disabled):not(.disabled):active:focus, .btn-wpred:not(:disabled):not(.disabled).active:focus, .show > .btn-wpred.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(206, 169, 127, 0.5);
        }


.btn.btn-light-wpred {
    color: #E31C3B;
    background-color: #F8E1E5;
    border: solid;
    border-width: medium;
    border-color: #E31C3B;
}

    .btn.btn-light-wpred i {
        color: #E31C3B;
    }

    .btn.btn-light-wpred .svg-icon svg g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
        fill: #E31C3B;
    }

    .btn.btn-light-wpred .svg-icon svg:hover g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
    }

    .btn.btn-light-wpred.dropdown-toggle:after {
        color: #E31C3B;
    }

    .btn.btn-light-wpred:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-wpred:focus:not(.btn-text), .btn.btn-light-wpred.focus:not(.btn-text) {
        color: #ffffff;
        background-color: #E31C3B;
        border-color: #E31C3B;
    }

        .btn.btn-light-wpred:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-light-wpred:focus:not(.btn-text) i, .btn.btn-light-wpred.focus:not(.btn-text) i {
            color: #ffffff;
        }

        .btn.btn-light-wpred:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-light-wpred:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-light-wpred.focus:not(.btn-text) .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-light-wpred:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg:hover g [fill], .btn.btn-light-wpred:focus:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-light-wpred.focus:not(.btn-text) .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-light-wpred:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-light-wpred:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-light-wpred.focus:not(.btn-text).dropdown-toggle:after {
            color: #ffffff;
        }

    .btn.btn-light-wpred.disabled, .btn.btn-light-wpred:disabled {
        color: #E31C3B;
        background-color: #FFE2E5;
        border-color: #E31C3B;
    }

        .btn.btn-light-wpred.disabled i, .btn.btn-light-wpred:disabled i {
            color: #E31C3B;
        }

        .btn.btn-light-wpred.disabled .svg-icon svg g [fill], .btn.btn-light-wpred:disabled .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #E31C3B;
        }

        .btn.btn-light-wpred.disabled .svg-icon svg:hover g [fill], .btn.btn-light-wpred:disabled .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-light-wpred.disabled.dropdown-toggle:after, .btn.btn-light-wpred:disabled.dropdown-toggle:after {
            color: #E31C3B;
        }

    .btn.btn-light-wpred:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-wpred:not(:disabled):not(.disabled).active, .show > .btn.btn-light-wpred.dropdown-toggle, .show .btn.btn-light-wpred.btn-dropdown {
        color: #ffffff;
        background-color: #E31C3B;
        border-color: #E31C3B;
    }

        .btn.btn-light-wpred:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-light-wpred:not(:disabled):not(.disabled).active i, .show > .btn.btn-light-wpred.dropdown-toggle i, .show .btn.btn-light-wpred.btn-dropdown i {
            color: #ffffff;
        }

        .btn.btn-light-wpred:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-light-wpred:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-light-wpred.dropdown-toggle .svg-icon svg g [fill], .show .btn.btn-light-wpred.btn-dropdown .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #ffffff;
        }

        .btn.btn-light-wpred:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-light-wpred:not(:disabled):not(.disabled).active .svg-icon svg:hover g [fill], .show > .btn.btn-light-wpred.dropdown-toggle .svg-icon svg:hover g [fill], .show .btn.btn-light-wpred.btn-dropdown .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-light-wpred:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-light-wpred:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-light-wpred.dropdown-toggle.dropdown-toggle:after, .show .btn.btn-light-wpred.btn-dropdown.dropdown-toggle:after {
            color: #ffffff;
        }
/*btn-active-light-wpred*/
.btn-check:checked + .btn.btn-active-light-wpred, .btn-check:active + .btn.btn-active-light-wpred, .btn.btn-active-light-wpred:focus:not(.btn-active), .btn.btn-active-light-wpred:hover:not(.btn-active), .btn.btn-active-light-wpred:active:not(.btn-active), .btn.btn-active-light-wpred.active, .btn.btn-active-light-wpred.show, .show > .btn.btn-active-light-wpred {
    color: #E31C3B;
}

    .btn-check:checked + .btn.btn-active-light-wpred i, .btn-check:active + .btn.btn-active-light-wpred i, .btn.btn-active-light-wpred:focus:not(.btn-active) i, .btn.btn-active-light-wpred:hover:not(.btn-active) i, .btn.btn-active-light-wpred:active:not(.btn-active) i, .btn.btn-active-light-wpred.active i, .btn.btn-active-light-wpred.show i, .show > .btn.btn-active-light-wpred i {
        color: #E31C3B;
    }

    .btn-check:checked + .btn.btn-active-light-wpred .svg-icon svg [fill]:not(.permanent):not(g), .btn-check:active + .btn.btn-active-light-wpred .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred:active:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred.active .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred.show .svg-icon svg [fill]:not(.permanent):not(g), .show > .btn.btn-active-light-wpred .svg-icon svg [fill]:not(.permanent):not(g) {
        transition: fill 0.3s ease;
        fill: #E31C3B;
    }

    .btn-check:checked + .btn.btn-active-light-wpred .svg-icon svg:hover [fill]:not(.permanent):not(g), .btn-check:active + .btn.btn-active-light-wpred .svg-icon svg:hover [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred:focus:not(.btn-active) .svg-icon svg:hover [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred:hover:not(.btn-active) .svg-icon svg:hover [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred:active:not(.btn-active) .svg-icon svg:hover [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred.active .svg-icon svg:hover [fill]:not(.permanent):not(g), .btn.btn-active-light-wpred.show .svg-icon svg:hover [fill]:not(.permanent):not(g), .show > .btn.btn-active-light-wpred .svg-icon svg:hover [fill]:not(.permanent):not(g) {
        transition: fill 0.3s ease;
    }

    .btn-check:checked + .btn.btn-active-light-wpred.dropdown-toggle:after, .btn-check:active + .btn.btn-active-light-wpred.dropdown-toggle:after, .btn.btn-active-light-wpred:focus:not(.btn-active).dropdown-toggle:after, .btn.btn-active-light-wpred:hover:not(.btn-active).dropdown-toggle:after, .btn.btn-active-light-wpred:active:not(.btn-active).dropdown-toggle:after, .btn.btn-active-light-wpred.active.dropdown-toggle:after, .btn.btn-active-light-wpred.show.dropdown-toggle:after, .show > .btn.btn-active-light-wpred.dropdown-toggle:after {
        color: #E31C3B;
    }

.btn.btn-active-light-wpred.btn-outline:not(.btn-outline-default) {
    border-color: #E31C3B !important;
}

.badge-wpred {
    color: #FFFFFF;
    background-color: #E31C3B;
}

.badge-light-wpred {
    color: #E31C3B;
    background-color: rgba(235,158,170,0.3);
}

.badge-wpstart{
    color: #2DC974;
    background-color: #EFFCF5;
}

.badge-wpstop{
    color: #7A7A7A;
    background-color: #F8F8F8;
}

.badge-wptxissue {
    color: #A93790;
    background-color: #FBF1F9;
}
.badge-wptxredeem {
    color: #1FD0BF;
    background-color: #E9FAF8;
}
.badge-wptxredeemcancel {
    color: #F87718;
    background-color: #FFF0E5;
}
.badge-wptxtrash {
    color: #F23653;
    background-color: #FFE8E8;
}
.badge-wptxgift {
    color: #2F8DFA;
    background-color: #E8F3FF;
}
.badge-wptxwarning {
    color: #7A7A7A;
    background-color: #ECECEC;
}

/*紙本券狀態*/
/*設定*/
.badge-wppcc3set {
    color: #F87718;
    background-color: #FFF0E5;
}
/*審核*/
.badge-wppcc3review {
    color: #2F8DFA;
    background-color: #E8F3FF;
}
/*產券*/
.badge-wppcc3issue {
    color: #A93790;
    background-color: #FBF1F9;
}
/*失敗*/
.badge-wppcc3fault {
    color: #F23653;
    background-color: #FFE8E8;
}
/*完成類*/
.badge-wppcc3finish {
    color: #2DC974;
    background-color: #EFFCF5;
}



    /*.badge-wpwait {
    color: #F29004;
    background-color: #FBDDB3;
}*/


    .text-active-wpred {
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .text-active-wpred i {
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .text-active-wpred.active {
        transition: color 0.2s ease, background-color 0.2s ease;
        color: #E31C3B !important;
    }

        .text-active-wpred.active i {
            transition: color 0.2s ease, background-color 0.2s ease;
            color: #E31C3B !important;
        }

        .text-active-wpred.active .svg-icon svg [fill]:not(.permanent):not(g) {
            transition: fill 0.3s ease;
            fill: #E31C3B;
        }

        .text-active-wpred.active .svg-icon svg:hover [fill]:not(.permanent):not(g) {
            transition: fill 0.3s ease;
        }

.text-active-inverse-wpred {
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .text-active-inverse-wpred i {
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .text-active-inverse-wpred.active {
        transition: color 0.2s ease, background-color 0.2s ease;
        color: #FFFFFF !important;
    }

        .text-active-inverse-wpred.active i {
            transition: color 0.2s ease, background-color 0.2s ease;
            color: #FFFFFF !important;
        }

        .text-active-inverse-wpred.active .svg-icon svg [fill]:not(.permanent):not(g) {
            transition: fill 0.3s ease;
            fill: #FFFFFF;
        }

        .text-active-inverse-wpred.active .svg-icon svg:hover [fill]:not(.permanent):not(g) {
            transition: fill 0.3s ease;
        }
.selected {
    display: block;
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    -moz-padding-start: calc(1rem - 3px);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #181C32;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    border: 1px;
    border-radius: 0.475rem;
    /*box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);*/
    /*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance:none;
}

.merchant {
    position: relative;
}

.mer-contect {
    display: none;
}

.merchant:hover .mer-contect {
    display: block;
    position: absolute;
    right: -150px;
    color: #fff;
    /*font-size: .8em;*/
    background: #346e7a;
    padding: 5px;
    border-radius: 5px;
}

.detailMode {
    border: 0px;
}

.classDiv {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    max-height: 0; /* 初始狀態為閉合，不顯示內容 */
}

.wp-bar {
    background-color: #E31C3B;
    color: #0e0e0e;
    font-weight: bold;
}