.d-none {
    display: none;
}

.underline a {
    text-decoration: underline;
}

.view_history {
    margin-left: 16px;
} 

/* 取消預設小箭頭 */
.hide-arrows::-webkit-outer-spin-button,
.hide-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hide-arrows {
    -moz-appearance: textfield;
}



/* ---------- new radio 單選 --------- */
.radio_container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio_container input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.radio_container .checkmark {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 20px;
    width: 20px;
    border: 2px solid #285EE4;
    border-radius: 50%;
}

/* 點擊時的狀態 */
.radio_container .outter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: .3s;
}

.radio_container .outter:hover {
    background: #d2e0e4;
}

.radio_container .outter:active {
    background: #a7cdd0;
}

/* 選取圓點 */
.radio_container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #048080;
}

.radio_container input:checked~.outter .checkmark:after {
    display: block;
}

.warn_note {
    color: rgb(255, 0, 0);
    font-size: 24px;
    margin-left: 16px;
}

.i_info {
    color: #285ee4;
}

.invoice_issue {
    width: 100%;
    margin-bottom: 16px;
}

.invoice_issue .main_title {
    flex-wrap: wrap;
}

.invoice_issue .action {
    /* margin-top: 24px; */
    display: flex;
    justify-content: end;
}

.invoice_issue .action .btn {
    width: 150px;
    height: 40px;
    /* line-height: 40px; */
    font-size: 18px;
    letter-spacing: 1.8px;
    font-weight: 800;
    text-align: center;
    box-sizing: border-box;
}

.invoice_issue .action .btn+.btn {
    margin-left: 8px;
}

.action .reset_btn {
    background: #fff;
    color: #285ee4;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.action .reset_btn:hover {
    background: #fff;
}

.invoice_add_content .item_header {
    width: 100%;
    height: 40px;
    background: #285EE4;
    border-radius: 15px 15px 0 0;
    box-sizing: border-box;
}

.invoice_add_content .item_body {
    width: 100%;
    background: #fff;
    padding: 24px 16px;
    margin-bottom: 24px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
}

.annotation-title {
    margin-bottom: 16px;
    display: flex;
}
.catch_title {
    margin-right: 8px;
}
.small {
    color: red;
}


/* ================== type_area ================== */
.type_select {
    width: 100%;
    display: flex;
    margin-bottom: 40px;
}

.type_select .tab_btn {
    flex: 1;
    border: 2px solid #bebebe;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.type_select .tab_btn.active {
    border: 2px solid #285EE4;
}

.type_select .tab_btn+.tab_btn {
    margin-left: 16px;
}

.tab_btn input[name="invoice_get_type"] {
    position: absolute;
    opacity: 0;
}

.tab_btn .check {
    position: absolute;
    top: 4px;
    left: 4px;
    display: none;
}

.tab_btn.active .check {
    display: block;
}

.tab_btn .tab_btn_img {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}


.tab_btn .tab_btn_img img {
    margin-bottom: 8px;
}

.tab_btn .tab_btn_img span {
    color: #bebebe;
}

.tab_btn.active .tab_btn_img span {
    color: #285ee4;
}


/* ================== input_area ================== */
.input_control {
    width: 100%;
    display: flex;
}

.input_group {
    width: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 24px;
    text-align-last: left;
}

.input_control .input_group:first-child {
    margin-right: 16px;
}

.input_group label {
    margin-bottom: 8px;
}

.input_group input {
    width: 100%;
    height: 36px;
    padding: 4px 12px;
    box-sizing: border-box;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    text-align: left;
    color: #3d3d3d;
    outline: none;
}

.input_group.error input {
    border: 1px solid red;
}

.input_group input[type=text]:focus,
.input_group input[type=number]:focus,
.input_group textarea:focus {
    border: 1px solid #359b9b;
}

.input_group.error input[type=text]:focus,
.input_group.error input[type=number]:focus,
.input_group.error textarea:focus {
    border: 1px solid red;
}

.input_group input[type=number]::placeholder,
.input_group input[type=text]::placeholder,
.input_group input[type=email]::placeholder {
    color: #b4b4b4;
}

.input_group input[type=number]::-webkit-input-placeholder,
.input_group input[type=text]::-webkit-input-placeholder,
.input_group input[type=email]::-webkit-input-placeholder {
    color: #b4b4b4;
}

.input_group input[type=number]:-ms-input-placeholder,
.input_group input[type=text]:-ms-input-placeholder,
.input_group input[type=email]:-ms-input-placeholder {
    color: #b4b4b4;
}

.input_group .valid_msg {
    position: absolute;
    bottom: -14px;
    right: 8px;
    font-size: 13px;
    color: red;
    display: none;
}

.input_group.error .valid_msg {
    display: block;
}

.input_group textarea {
    width: 100%;
    min-height: 36px;
    max-height: 180px;
    padding: 4px 12px;
    box-sizing: border-box;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    text-align: left;
    color: #3d3d3d;
    outline: none;
    overflow-y: auto;
}

.tab-link .tabs ul {
    display: flex;
    /* margin-bottom: 16px; */
}

.tab-link .tabs ul li+li {
    margin-left: 8px;
}

.tab-link .tabs .tab-item ul {
    margin-bottom: 0;
}

.tab-link .tabs .tab-item {
    margin-top: 16px;
    display: none;
}

.tab-link .tabs .tab-item.active{
    display: block;
}

.tab-content {
    position: relative;
}

/* --------- invoice_B2B --------- */
.invoice_b2b .input_group .used_list {
    position: absolute;
    right: 0;
    /* text-decoration: underline; */
}

/* --------- invoice_B2C -------- */
/* 載具類型 carrier_area  */
.carrier_area {
    margin-bottom: 16px;
}

.carrier_area .tab_triggers {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.carrier_area .tab_triggers li {
    width: calc(50% - 8px);

}

.carrier_area .tab_triggers li:nth-child(odd) {
    margin-right: 16px;
}

.carrier_area .tab_triggers li .input_group {
    width: 100%;
}

.carrier_area .radio_container {
    justify-content: start;
}

.carrier_area .tab-link .tabs ul li+li {
    margin-left: 0;
}

/* ================== taxcatg_area ================== */
.taxcatg_area {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 26px;
}

.taxcatg_area .tab-content .tax-rate {
    display: none;
    position: absolute;
    bottom: -78px;
    right: 36%;
    z-index: 1;
}

.taxcatg_area .tab-content .tax-rate.active {
    display: block;
}

.tax-rate .table_select .select-selected {
    border-radius: 20px;
    color: #285ee4;
    border: 2px solid #285EE4;
    width: 72px;
    padding: 8px 16px 8px 8px;
}

.tax-rate .table_select .select-selected.select-arrow-active {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.taxcatg_area .tab-content .tax-free {
    line-height: 1.5;
}


/* ================== invoice_area ================== */
.invoice_area {
    margin-bottom: 24px;
}

/* --------- table --------- */
.item_table {
    width: 100%;
    position: relative;
    margin-bottom: 16px;
    top: -16px;
}

.item_table thead td,
.item_table tbody td {
    height: 44px;
    vertical-align: middle;
    padding-left: 4px;
    box-sizing: border-box;
}

.item_table td:not(:last-child) {
    padding-right: 8px;
}

.item_table .tfoot {
    position: relative;
    top: -4px;
    line-height: 1.5;
}

.item_table tbody td>input {
    width: 100%;
    height: 36px;
    padding: 4px 12px;
    outline: none;
    color: 048080;
    background: #fff;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    font-size: 18px;
    text-align: left;
    box-sizing: border-box;
}

.item_table tbody td.error>input {
    border: 1px solid red;
}

.item_table .tb-item {
    width: 100px;
}

.item_table .tb-count {
    width: 62px;
}

.item_table .tb-price {
    width: 132px;
}

.item_table .tb-amount {
    width: 125px;
    text-align: right;
}

.item_table .tb-amount .amount {
    position: relative;
}

.item_table .tb-amount .amount::before {
    content: "$ ";
}

.tb-delete {
    width: 40px;
    text-align: right;
}

.tb-delete>img {
    cursor: pointer;
}

.fila_addrow .tb_addrow {
    width: 100%;
}

.tb_addrow .addRow {
    font-size: 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #287bdb;
    cursor: pointer;
    position: relative;
    /* left: 50%;
    transform: translateX(-50%); */
}

.tb_addrow .addRow:hover {
    color: #285ee4;
}

/* .dataimport_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
} */

.dataimport_content a {
    font-size: 28px;
    color: #285ee4;
}

.lottie-dataimport {
    width: 280px;
}

@media screen and (max-width:742px) {
    .warn_note {
        margin-left: 0px;
        margin-top: 8px;
    }

    .type_select {
        flex-direction: column;
    }

    .type_select .tab_btn+.tab_btn {
        margin-left: 0;
        margin-top: 8px;
    }

    .input_control {
        flex-direction: column;
    }

    .input_control .input_group:first-child {
        margin-right: 0;
    }

    .input_group {
        width: 100%;
    }
    
    .carrier_area .tab_triggers {
        flex-direction: column;
    }

    .carrier_area .tab_triggers li {
        width: 100%;
    }

    .carrier_area .tab_triggers li:nth-child(odd) {
        margin-right: 0;
    }

    .taxcatg_area .tab-content .tax-rate {
        bottom: -44px;
        right: 0;
    }

    /* table */
    .item_table {
        margin-top: 40px;
    }

    .item_table tbody,
    .item_table tbody td,
    .item_table tbody tr {
        display: block;

    }

    .item_table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .item_table tbody {
        position: relative;
    }

    .item_table tbody::before {
        content: "";
        border-top: 2px dashed #c6c6c6;
        position: absolute;
        top: -16px;
        left: 0;
        right: 0;
    }

    .item_table tbody td:not(.no_star) {
        border: none;
        position: relative;
        white-space: normal;
        width: 100%;
        height: 80px;
        box-sizing: border-box;
    }


    .item_table tbody td.tb-amount {
        height: 36px;
        text-align: right;
        display: flex;
        justify-content: end;
        align-items: end;
    }

    .item_table tbody td:not(.no_star)::before {
        position: absolute;
        top: 6px;
        left: 6px;
        font-weight: bold;
    }

    .item_table tbody td:before {
        content: attr(data-title);
        margin-right: 8px;
    }

    .item_table tbody td:not(.no_star)::after {
        position: absolute;
        top: 6px;
        left: 40px;
    }


    .item_table tbody td:not(.no_star)::after {
        content: "*";
        color: red;
    }

    .item_table tbody td>input {
        position: relative;
        top: 32px;
        width: 100%;
    }

    .item_table tbody .fila {
        width: 100%;
        min-width: 311px;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 8px;
        border: solid 1px #c6c6c6;
        position: relative;
        box-sizing: border-box;
    }


    .item_table td.tb-item,
    .item_table td.tb-count,
    .item_table td.tb-price,
    .item_table td.tb-amount {
        width: 100%;
    }

    .item_table tbody td {
        padding-left: 0px;
    }

    .item_table tbody td:not(:last-child) {
        padding-right: 0;
    }

    .tb-delete {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    .tb-delete>img {
        width: 80%;
    }

    .note_issue .item_table .tfoot,
    .issue_record .item_table .tfoot {
        top: 0px;
    }

    .item_table .tfoot tr {
        width: 100%;
        display: flex;
    }

    .item_table .tfoot .fila_addrow {
        position: relative;
        margin-bottom: 24px;
    }

    .item_table .tfoot .fila_addrow::after {
        content: "";
        border-bottom: 2px dashed #c6c6c6;
        position: absolute;
        bottom: -16px;
        left: 0;
        right: 0;
    }

    .item_table .tfoot .tb-item,
    .item_table .tfoot .tb-count,
    .item_table .tfoot .tb-delete {
        display: none;
    }
}

@media screen and (max-width:600px) {

    .tab-link .tabs ul li {
        margin-left: 0;
    }
}

@media screen and (max-width:450px) {
    .invoice_issue .action {
       justify-content: center;
    }
}


/* ============= 發票明細 issue_record ============= */
.note_issue .input_group input[readonly][type="text"],
.note_issue .input_group input[readonly][type="number"]{
    background: #E7E6E6;
    cursor: not-allowed;
}

.note_issue .item_table tbody td>input[readonly]{
    background-color: #e7e6e6;
    color: #000;
    cursor: not-allowed;
}
.issue_record .main_title {
    justify-content: space-between;
}

.issue_record .main_title h3 .title {
    flex-wrap: wrap;
}


.issue_record .record_area {
    max-width: 638px;
    margin-top: 40px;
    border: 1px solid #c6c6c6;
    padding: 16px;
}

.issue_record .record {
    width: 100%;
    display: flex;
    margin-top: 16px;
    line-height: 1.3;
}

.issue_record .record_statu {
    min-width: 70px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.issue_record .record_date {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
}

.issue_record .small,
.issue_record .i_info,
.issue_record .action {
    display: none;
}


.issue_record .main_title .btn {
    display: block;
    width: 150px;
    height: 40px;
    /* line-height: 36px; */
    font-size: 18px;
    letter-spacing: 1.8px;
    font-weight: 800;
    text-align: center;
    box-sizing: border-box;
}

.issue_record .main_title .btn.tip_btn {
    background: #fff;
    border: 2px solid #285EE4;
    border-radius: 20px;
    color: #285ee4;
}

.issue_record .tax-rate.active.d-none {
    display: none;
}


.issue_record .input_group input[readonly] {
    background-color: #e7e6e6;
    /* color: #000; */
}

.issue_record .item_table tbody td>input[readonly] {
    background-color: #e7e6e6;
    /* color: #000; */
    cursor: not-allowed;
}

.issue_record .input_group input[readonly][type="text"],
.issue_record .input_group textarea {
    background: #E7E6E6;
    cursor: not-allowed;
}

.note_issue .input_group input[readonly][type=text]:focus,
.note_issue .input_group input[readonly][type=number]:focus,
.issue_record .input_group input[readonly][type=text]:focus,
.issue_record .input_group input[readonly][type=number]:focus,
.issue_record .input_group textarea:focus {
    border: 1px solid #c6c6c6;
}

.issue_record .type_select .tab_btn.active {
    border: 2px solid #000000;
}

.issue_record .tab_btn.active .tab_btn_img span {
    color: #000000;
}

.issue_record .radio_container .checkmark {
    border: 2px solid #C6C6C6;
}

.issue_record .radio_container .checkmark:after {
    background: #000000;
}

.issue_record .tab-link .tabs ul {
    pointer-events: none;
    cursor: not-allowed;
}

.issue_record .item_table tbody td>input {
    background: #E7E6E6;
    color: #000000;
}

.note_issue .item_table .tfoot,
.issue_record .item_table .tfoot {
    top: 8px;
    /* line-height: 1.8; */
}

@media screen and (max-width:742px) {
    .issue_record .main_title .btn_block {
        width: 100%;
        margin-top: 16px;
    }

    .note_issue .item_table .tfoot,
    .issue_record .item_table .tfoot {
        top: -12px;
    }
}

@media screen and (max-width:500px) {

    .issue_record .main_title .btn_block .btn {
        width: 100%;
    }
}



/* ========= ex8_modal ========= */
.blocker {
    padding: 16px;
    min-width: 343px;
}

#ex8_modal.ex8_type3 {
    width: 100%;
    max-width: 343px;
    padding: 0 0 24px;
    border-radius: 20px;
}

#ex8_modal.modal .main_title {
    padding: 16px 16px 0;
    display: flex;
    margin-bottom: 24px;
    color: #285ee4;
    justify-content: center;
}

#ex8_modal .title {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#ex8_modal.modal .main_title h3 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    position: relative;
}

#ex8_modal.modal .message{
    text-align: left;
}

#ex8_modal.modal .input_group{
    width: 100%;
}

#ex8_modal.modal .input_group .delete-button {
    position: absolute;
    top: 48px;
    right: 8px;
    /* display: none; */
}


.sc-search_content {
    width: 100%;
    display: flex;
    align-items: baseline;
    position: relative;
    margin-top: 16px;
}

.sc-search_content .record_search {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    /* margin-left: 16px; */
    background: #fff;
    padding: 8px 36px 8px 8px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.sc-search_content .record_search input[type=number],
.sc-search_content .record_search input[type=text] {
    border: 0;
    color: #767676;
    outline: none;
    height: 24px;
    font-size: 18px;
    overflow: hidden;
    padding-left: 8px;
    width: 100%;
}

.sc-search_content .record_search button {
    border: 0;
    right: 5px;
    top: 8px;
    position: absolute;
    background-color: transparent;
    z-index: 0;
    margin: 2px;
    cursor: pointer;
}

/* modal table */
#ex8_modal.ex8_type3 .tableFixHead {
    height: 100%;
    min-height: 354px;
    max-height: 354px;
    overflow-y: auto;
    position: relative;
}

#ex8_modal.ex8_type3 table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

#ex8_modal.ex8_type3 table tr td {
    height: 44px;
}

#ex8_modal.ex8_type3 .tb_container {
    width: 40px !important;
}

#ex8_modal table.data-table tr th.all-check,
#ex8_modal table.data-table tr td.tb-checkbox {
    width: 32px;
    padding-left: 4;
}

#ex8_modal.ex8_type3 table .tb-idnum {
    width: 26%;
    min-width: 104px;
}

#ex8_modal.ex8_type3 table .tb-name {
    width: 60%;
    max-width: 159px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 4px;
}

#ex8_modal.ex8_type3 .tb_container .outter {
    left: 0;
}

#ex8_modal.ex8_type3 .action {
    margin-top: 16px;
}

#ex8_modal.ex8_type3 .action .btn {
    width: 120px;
}

#ex9_modal.modal {
    height: calc(50vh);
    width: 90%;
    min-width: 312px;
    padding: 0 0;
    border-radius: 20px;
}

/* 商品下拉選單 - 新增商品 選項樣式 */
.select-items div.select-item-add-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    text-align: left;
    background-color: #eef3fd;
}

.select-items div.select-item-add-product:hover {
    background-color: #dce6fb;
}

.select-item-add-product-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #285ee4;
    font-weight: 700;
}

.select-item-add-product .select-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #285ee4;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.select-item-add-product .select-item-add-product-hint {
    font-size: 13px;
    font-weight: 400;
    color: #999;
}

.item-name-hint {
    font-size: 12px;
    font-weight: 400;
    margin-left: 4px;
}

/* 商品下拉選單 - 搜尋欄位樣式，比照訂單頁的搜尋欄位 */
.custom-select .select-items .search-items_content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 8px;
}

.custom-select .select-items .search-items_content input.search-items {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 36px;
    margin: 0;
    padding: 4px 16px;
    font-size: 16px;
    border: 1px solid #767676 !important;
    border-radius: 20px;
    box-sizing: border-box;
}