/*Websit Banner*/
.div-banner {
    /*background-image: url(../images/banner_background.png);*/
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100px;
}

.bg-light {
    /*background-color: #FFFFFF !important;*/
}

.BannerShadow {
    width: auto;
    box-shadow: 0 0rem 1rem rgb(0 0 0 / 15%) !important;
}

/*.BreadcrumbSetting {
    margin-top: 10px;
    margin-bottom: 20px;
}

.div-breadcrumb {
    color: #777777;
    font-family: Microsoft JhengHei;
    font-size: 1rem;
    padding: 15px;
}*/
/*
.q-block {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #FFFFFF;
    background-clip: border-box;
    border-radius: 0.25rem;
}

.q-header {
    padding: 0.5rem 1.25rem;
    margin-bottom: 3px;
    background-color: #2187e7;
    border: 1px solid #2187e7;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 900;
}

.q-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    border: 1px solid #2187e7;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.q-label {
    padding-top: calc(0.375rem + 1px);
    padding-right: 0;
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 900;
    line-height: 1.5;
    text-align: left;
}

.r-body {
    border: 1px solid #2187e7;
    border-radius: 0.5rem;
    margin-top: 10px;
    padding: 1.25rem;
}

@media (min-width: 576px) {
    .q-label {
        text-align: right;
    }
}

@media (min-width: 768px) {
}

@media (min-width: 768px) and (max-width: 896px) {
    .q-label {
        padding-left: 0;
    }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}
*/
/*按鈕共用設定*/
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/*登出按鈕*/
.btn-logout {
    background-color: #2187e7;
    border: solid;
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
}

    .btn-logout::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f2f5";
    }

    .btn-logout:active {
        background-color: #6bb0f1;
    }

/*查詢按鈕*/
.btn-search {
    background-color: rgb(23 42 136);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-search::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f002";
        margin-right: 5px;
    }

    .btn-search:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*清除按鈕*/
.btn-reset {
    background-color: rgb(101 95 95);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-reset::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0e2";
        margin-right: 5px;
    }

    .btn-reset:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*新增按鈕*/
.btn-insert {
    background-color: rgb(0 155 133);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-insert::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f067";
        margin-right: 5px;
    }

    .btn-insert:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*編輯按鈕*/
.btn-edit {
    background-color: rgb(45 185 235);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-edit::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f044";
        margin-right: 5px;
    }

    .btn-edit:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*刪除按鈕*/
.btn-delete {
    background-color: rgb(230 0 0);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-delete::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f2ed";
        margin-right: 5px;
    }

    .btn-delete:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*儲存按鈕*/
.btn-save {
    background-color: rgb(0 95 190);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-save::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0c7";
        margin-right: 5px;
    }

    .btn-save:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*取消按鈕*/
.btn-cancel {
    background-color: rgb(101 95 95);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-cancel::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f00d";
        margin-right: 5px;
    }

    .btn-cancel:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*匯出按鈕*/
.btn-export {
    background-color: rgb(85 0 170);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-export::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f56e";
        margin-right: 5px;
    }

    .btn-export:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

.btn-WaterStyle {
    background-color: #2187e7;
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: 200px;
}

    .btn-WaterStyle:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

.btn-RegStyle {
    background-color: #2187e7;
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: 100px;
}

    .btn-RegStyle:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*歸戶按鈕*/
.btn-invoice {
    background-color: rgb(85 0 170);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-invoice::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f022";
        margin-right: 5px;
    }

    .btn-invoice:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*列印按鈕*/
.btn-print {
    background-color: rgb(255 125 0);
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 22px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-print::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f02f";
        margin-right: 5px;
    }

    .btn-print:active {
        border-color: rgb(255 165 0) !important;
        color: rgb(255 165 0) !important;
    }

    .btn-print:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

.btn-ValidSend {
    background-color: #2187e7;
    border: solid;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 20px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: fit-content;
}

    .btn-ValidSend::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f1d8";
        margin-right: 5px;
    }

    .btn-ValidSend:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 999px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        background: red;
        cursor: inherit;
        display: block;
    }

/*Table內編輯按鈕*/
.btn-gedit {
    background-color: rgb(45 185 235);
    border: none;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 16px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
}

    .btn-gedit::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f304";
    }

    .btn-gedit:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*Table內刪除按鈕*/
.btn-gdel {
    background-color: rgb(230 0 0);
    border: none;
    border-radius: 10px;
    color: rgb(255 255 255);
    font-size: 16px;
    font-weight: 900;
    padding: 3px 10px 3px 10px;
}

    .btn-gdel::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f2ed";
    }

    .btn-gdel:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*Modal內新增按鈕*/
.btn-minsert {
    background-color: rgb(0 155 133);
    border: solid;
    border-radius: 8px;
    color: rgb(255 255 255);
    font-size: 18px;
    font-weight: 900;
    padding: 3px 8px 3px 8px;
    text-align: center;
    width: fit-content;
}

    .btn-minsert::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f067";
        margin-right: 5px;
    }

    .btn-minsert:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

/*Modal內修改按鈕*/
.btn-medit {
    background-color: rgb(45 185 235);
    border: solid;
    border-radius: 8px;
    color: rgb(255 255 255);
    font-size: 18px;
    font-weight: 900;
    padding: 3px 8px 3px 8px;
    text-align: center;
    width: fit-content;
}

    .btn-medit::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f304";
        margin-right: 5px;
    }

    .btn-medit:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

.btn-mcustom {
    background-color: #337ab7;
    border: solid;
    border-radius: 8px;
    color: rgb(255 255 255);
    font-size: 18px;
    font-weight: 900;
    padding: 3px 8px 3px 8px;
    text-align: center;
    width: fit-content;
}

    .btn-mcustom:hover {
        color: rgb(255 255 255);
        opacity: 0.9;
    }

.echarts-default {
    width: 100%;
    height: 300px;
}

/*必填欄位*/
.label-require {
    /*color: #a94442;*/
    /*color: #ea3d3d;*/
}

    .label-require:before {
        content: '＊';
        color: #ea3d3d;
    }

.require-msg {
    color: red !important;
}

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

/*Table 標題列*/
th {
    /*background-color: #2187e7;*/ /*#def7f4;*/
    /*color: #ffffff;*/
    /*font-family: 'Noto Sans TC', Helvetica, sans-serif;*/
    /*font-size: large;*/
}

.load-mask {
    background-color: #fff;
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    opacity: 0.4;
    overflow: hidden;
}

/*loading mask ball-pulse-sync*/
@-webkit-keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

    .ball-pulse-sync.fixed {
        position: fixed;
    }

    .ball-pulse-sync > div > div:nth-child(1) {
        -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
        animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
    }

    .ball-pulse-sync > div > div:nth-child(2) {
        -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
        animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
    }

    .ball-pulse-sync > div > div:nth-child(3) {
        -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
        animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
    }

    .ball-pulse-sync > div > div {
        background-color: black;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
    }

    .ball-pulse-sync > div {
        position: absolute;
        top: 50%;
        left: 47%;
    }

#waternoTable tr > *:nth-child(5),
#waternoTable tr > *:nth-child(6),
#waternoTable tr .card-views > *:nth-child(5),
#waternoTable tr .card-views > *:nth-child(6) {
    display: none
}

.th-style {
    width: 30%;
    background-color: #def7f4;
    color: #0081a8;
    font-family: Microsoft JhengHei;
    font-size: large;
    border-right: 2px solid #dee2e6;
    padding: 0.75rem;
    margin: 0;
    font-weight: bold;
}

.td-style {
    width: 70%;
    padding: 0.75rem;
    margin: 0;
}

.address-body {
    position: relative;
    padding: 15px;
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

.radio, .checkbox {
    box-sizing: border-box;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative !important;
    display: inline-block !important;
    margin: 8px 8px 8px 8px;
    padding: 12px 12px 12px 12px;
    border-radius: 8px;
    background-color: #f6f7f8;
    vertical-align: middle;
    cursor: pointer;
}

/* 20240717 新增*/
.flow-tag {
    background-color: #c82333;
    color: white;
}

.flow-chart .row-h {
    height: 80px;
}

.flow-chart .row-hh {
    height: 110px;
}

.flow-chart .row-l {
    height: 40px;
}

.flow-chart .flow-area {
    border: 1px dotted #777777;
}

.flow-chart i {
    font-size: 2em
}

.things > .content {
    position: absolute;
}

.subject-size {
    font-size: 0.9em;
    font-weight: 600;
}

.arrow {
    position: relative;
    margin: 0 auto;
    width: 100px;
    left: 890px;
}

    .arrow .curve {
        border: 6px solid #000000;
        border-color: transparent #000000 transparent transparent;
        height: 423px;
        width: 103px;
        border-radius: 0 435px 117px 0;
    }

    .arrow .point {
        position: absolute;
        left: 0px;
        top: 0px;
    }

        .arrow .point:before, .arrow .point:after {
            border: 3px solid #000000;
            height: 25px;
            content: "";
            position: absolute;
        }

        .arrow .point:before {
            top: 24px;
            left: 81px;
            transform: rotate(-74deg);
            -webkit-transform: rotate(-74deg);
            -moz-transform: rotate(-74deg);
            -ms-transform: rotate(-74deg);
        }

        .arrow .point:after {
            top: 33px;
            left: 67px;
            transform: rotate(12deg);
            -webkit-transform: rotate(12deg);
            -moz-transform: rotate(12deg);
            -ms-transform: rotate(12deg);
        }