*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    /* overflow: hidden; */
    overflow-x: hidden;
    position: relative;
    left: 0px;
    top: 0px;
    font-family: sans-serif, serif, "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti;
    letter-spacing: .05rem;
    color: #333;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    flex: 0 0 auto;
    box-shadow: #aaaaaa 1px 0px 3px;
}

.main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
    width: 100%;
    background-color: #aaaaaa;
    color: white;
    padding: 1rem;
    text-align: center;
    font-size: small;
}

footer p {
    margin-bottom: 0%;
}

/* 初始設定 end */

/* 頁面共同設定 start */
.material-icons {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    transform: translateY(-.1em);
}

.content {
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 10rem;
    width: 90%;
    max-width: 1920px;
}

a {
    text-decoration: none;
    color: #575757;
}

.page-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2E5FB5;
}

.table>:not(caption)>*>* {
    padding: .25rem .5rem;
}


/* 頁面共同設定 end */

/* vis-box start */
#network {
    /* 圖形 */
    width: 100%;
    height: 300px;
    border: 1px solid lightgray;
    /* margin: 0px auto; */
    border-radius: .5rem;

}

#mynetwork {
    width: 100%;
    /* width: 1200px;*/
    height: 220px;
    border: 1px solid lightgray;
    /* margin: 0px auto; */
    border-radius: .5rem;

}

/* vis-box end */

/* btn */
.btn {
    padding: .375rem 1.25rem;
}

.btn-w6 {
    width: 6rem;
}

.btn-disabled,
.btn-disabled:hover,
.btn-disabled:active {
    background-color: #b3b3b3;
    border: 1px solid #b3b3b3;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
    cursor: text;
}

.btn-blue {
    background-color: #4AA5FA;
    border: 1px solid #4AA5FA;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-blue-outlined {
    background-color: #fff;
    border: 1px solid #4AA5FA;
    color: #4AA5FA;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-blue:hover,
.btn-blue-outlined:hover {
    background-color: #1c8ffa;
    border: 1px solid #1c8ffa;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-blue:active,
.btn-blue-.btn-blue-outlined {
    background-color: #0e7adf;
    border: 1px solid #0e7adf;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-yellow {
    background-color: #ffa826;
    border: 1px solid #ffa826;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-yellow:hover {
    background-color: #FF9900;
    border: 1px solid #FF9900;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-yellow:active {
    background-color: #f78c00;
    border: 1px solid #f78c00;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-cancel {
    background-color: #fff;
    border: 1px solid #C4C4C4;
    color: #575757;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-cancel:hover {
    background-color: #C4C4C4;
    border: 1px solid #C4C4C4;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

.btn-cancel:active {
    background-color: #a7a7a7;
    border: 1px solid #a7a7a7;
    color: #fff;
    border-radius: .25rem;
    font-size: 14px;
}

/* fc_step1 start */
.card-header {
    background-color: #fff;
    padding: 1rem 0;
    font-weight: bold;
}

.table {
    font-size: 14px;
}

.td-name {
    text-align: end;
    font-weight: bold;
    color: #575757;
}

.td-name-sm {
    text-align: end;
    width: 3rem;
    font-weight: bold;
    color: #575757;
}

.td-content {
    text-align: start;
    width: 12rem;
}

.td-content-8 {
    text-align: start;
    width: 8rem;
}

/* fc_step2 end */

/* count-number start*/
.p-num1,
.p-num2 {
    width: 100%;
    margin: .5rem 0 .5rem 0;
}

.decrement,
.increment {
    float: left;
    border: 1px solid #cacbcb;
    height: 2.5rem;
    line-height: 30px;
    padding: .25rem;
    width: 20%;
    text-align: center;
    color: #666;
    margin: 0;
    background: #fff;
    margin-left: -1px;
}

.itxt {
    float: left;
    border: 1px solid #cacbcb;
    border-radius: 0;
    width: 60%;
    height: 2.5rem;
    line-height: 18px;
    text-align: center;
    padding: 1px;
    margin: 0;
    margin-left: -1px;
    font-size: .75rem;
    color: #333;
    -webkit-appearance: none;
}

.p-sum {
    font-weight: 700;
    width: 145px;
}

.p-num {
    display: flex;
    flex-direction: column;
}

.carousel-item img {
    border: solid #e2e2e2 1px;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain;
}

/* count-number end*/

/* 提醒字體 */
.tips-red {
    color: red;
    font-weight: bold;
    line-height: 1.25rem;
}

.bold-blue {
    font-weight: bold;
    color: #2E5FB5;
    line-height: 1.25rem;
}

.tips-yellow-14 {
    color: #FF9900;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.25rem;
}

.tips-blue-14 {
    color: #4AA5FA;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.25rem;
}

.bold {
    font-weight: bold;
    line-height: 120%;
}

/* 頁籤樣式 */
.nav-tabs .nav-link.active {
    color: #1F6ECF;
    font-weight: bold;
}

.nav-link {
    color: #575757;
}

.nav-link:hover {
    color: #0a58ca;
}

.tab-content {
    border: 1px solid lightgray;
    border-top: 1px lightgray;
    border-radius: 0 0 .5rem .5rem;
}

.nav-tabs button {
    font-size: 14px;
}

/* 虛線邊框-top start */
.dash-bt {
    border-top: 1px dashed lightgray;
    margin-top: 1rem;
}

/* 虛線底線-top end */

/* 虛線邊框-bottmo start */
.dash-bb {
    border-bottom: 1px dashed lightgray;
    margin-bottom: 1rem;
}

/* 虛線底線-bottmo end */

/* input 樣式 start */
.form-text {
    font-size: 14px;
    text-align: center;
}

/* input 樣式 end */

/* 標籤內圖 start */
.function-img {
    width: 100%;
    border: 1px solid lightgray;
    max-width: 350px;
}

/* 標籤內圖 end */

/* rule-base start */
#ruleBase li {
    cursor: pointer;
    position: relative;
    padding: .5rem .5rem;
    font-size: 14px;
    transition: 0.2s;
    border-bottom: 1px solid lightgray;
    line-height: 1.25rem;
    font-weight: bold;
    margin: 0;
}

#ruleBase li:hover {
    background: #DEF3FF;
}

#ruleBase li.checked {
    background: #ffe5ea;
    color: #AD235B;
}

li {
    margin-bottom: 1rem;
}

/* rule-base end */

/* 規則庫區域-定高可滾動 start */
.rule-base-box {
    border: 1px solid lightgray;
    height: 18rem;
    border-radius: .25rem;
    overflow: auto;
}

/* 規則庫區域-定高可滾動 end */

/* 邊框區域 start */
.border-box {
    border: 1px solid lightgray;
    border-radius: .5rem;
}

/* 邊框 end */

/* 彈跳視窗文字 start */
.modal-body-text {
    color: #575757;
    font-size: 14px;
}

/* 彈跳視窗文字 end */

/* 進度條 start */
.progress-container {
    width: 100%;
    height: 1.5rem;
    position: relative;
    background-color: #fff;
    border: 1px solid #AFADAD
}

.progressbar {
    height: 100%;
    position: absolute;
    line-height: inherit;
}

.bar-blue {
    color: #fff;
    background-color: #4AA5FA;
}

/* 進度條 end */

/* member-page start */
.user-photo {
    background-color: #c0c0c0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 100%;
    margin: .5rem;
}

h4 {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2rem;
}

h5 {
    font-size: 1.25rem;
    font-weight: bold;
}

h6 {
    font-size: 1rem;
    font-weight: bold;
}

.f-sm {
    font-size: small;
    line-height: 1.25rem;
}

.fs-14 {
    font-size: 14px;
}

.t-pink {
    color: #FF84BF;
}

.t-blue {
    color: #2E5FB5;
}

.t-lightblue {
    color: #1F6ECF;
}

.t-orange {
    color: #FF9900;
}

.w-80p {
    width: 80%;
}

.mw-10r {
    max-width: 10rem;
}

.mw-40r {
    max-width: 40rem;
}

.mw-50r {
    max-width: 50rem;
}

.mw-60r {
    max-width: 60rem;
}

.member-button-box {
    border-radius: .5rem;
    margin: 1rem 0;
    padding: 1.75rem;
    line-height: 0;
    border: 1px solid lightgray;
    text-align: center;
    background-color: #fff;
}

.member-button-box:hover {
    border-radius: .5rem;
    margin: 1rem 0;
    padding: 1.75rem;
    line-height: 0;
    border: 1px solid #1F6ECF;
    text-align: center;
    background-color: #fff;
}

.member-button-box:active {
    border-radius: .5rem;
    margin: 1rem 0;
    padding: 1.75rem;
    line-height: 0;
    border: 1px solid #14519c;
    color: #14519c;
    text-align: center;
    background-color: #fff;
}

.input-box label {
    font-size: small;
    margin-bottom: .5rem;
    font-weight: bold;
}

.form-group {
    max-width: 20rem;
    margin: 0 auto;
}

.bg-white {
    background-color: #fff;
}

.bg-gradient-blue {
    background: linear-gradient(to bottom, rgb(255, 255, 255, 0) 0%, #DEF3FF 100%);
}

/* member-page end */

/* login start */
.login-box {
    border: 1px solid #eaeaea;
    border-radius: .25rem;
    width: 400px;
    margin: 2rem 1rem;
}

.login-tab {
    border: none;
}

/* login end */

/* dataTable start */
.dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    margin-top: 5rem;
}

table.dataTable td {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px dashed lightgray;
}

table.dataTable tbody tr:hover {
    background-color: #DEF3FF;
}

table.dataTable.no-footer {
    border-bottom: none;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid lightgray;
}

table.dataTable thead th,
table.dataTable tbody td {
    padding: .5rem .5rem;
    line-height: 1.75rem;
}

.th-label {
    display: none;
}

table {
    font-size: 14px;
    width: 100%;
    padding: .75rem .5rem;
}


@media screen and (max-width: 768px) {
    table.mb-table {
        border: 0;
    }

    table.mb-table thead {
        display: none;
    }

    table.mb-table tr {
        margin-bottom: 1rem;
        display: block;
        border-radius: .5rem;
        padding: .5rem;
        text-align: start;
    }

    table.mb-table thead tr {
        padding: 0;
        margin-bottom: 0;
    }

    table.mb-table tbody tr {
        background-color: #f0f9ff;
    }

    table.mb-table tbody tr:hover {
        background-color: #f0f9ff;
    }

    table.mb-table td {
        display: block;
        font-size: 16px;
        border-bottom: 1px dotted #c9c0c0;
    }

    table.mb-table td:last-child {
        border-bottom: 0;
        text-align: center;
    }

    .th-label {
        font-size: .75rem;
        color: #4AA5FA;
        display: block;
        margin: .25rem 0;
        font-weight: bold;
    }

    table.riverside thead tr:last-child {
        display: none;
    }
}

/* dataTable end */
/* project purchase start */
a .border-box:hover {
    box-shadow: #aaaaaa 1px 0px 3px;
}

li {
    line-height: 120%;
}

.project-select-box {
    display: table-cell;
    border: 1px solid lightgray;
    border-radius: .5rem;
    background-color: #fff;
    text-align: center;
}

.project-select-box:hover {
    box-shadow: 3px 3px 3px #aaaaaa;
}

.project-select-box[data-active="active"] {
    border: 3px solid #4AA5FA;
    box-shadow: 3px 3px 3px #aaaaaa;
}

.project-select-box ul {
    list-style-type: disc;
    line-height: 150%;
}

.border-box-in {
    border: 1px solid lightgray;
    border-radius: .25rem;
    margin: 0 1rem;
    padding: 1rem;
}

/* project purchase end */