html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Noto Sans TC', Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
}

footer {
    border-top: 1px solid #cccccc;
}

.bg-cover {
    background-color: #f0f4ff;
}

.mobile {
    display:none;
}
.pc {
    display:inline-block;
}

.container-fluid2 {
    width: 100%;
    position: absolute;
    left: 0;
}

@media (max-width: 768px) {
    .mobile {
        display: block;
    }

    .pc {
        display: none;
    }
}

    /* Common usage */
    .main-container {
        margin-top: 90px;
        width: 100%;
        /*min-height: 75vh;*/
        min-height: 55vh;
    }
    .bg-white {
        background-color: #fff;
    }

    .main-container-test {
        margin-top: 120px;
    }

    .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;
    }

    .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 #bdd0e3;
        margin-top: 10px;
        padding: 1.25rem;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }


    .dashboard-item {
        position: relative;
        /*max-width: 1200px;*/
        /*width: 100%;*/
        border: 2px solid #bdd0e3;
        border-radius: 0.4rem;

    }
    .dashboard-icon i {
        font-size: 2.5em;
    }

    .dashboard-item .dashboard-bg {
        color: #f0f4f8;
        display: block;
        font-size: 3em;
        font-weight: 900;
        bottom: 0px;
        position: absolute;
    }
    .dashboard-item .dashboard-icon {
        position: absolute;
        color: #bdd0e3;
        top: 0.5em;
        left: 0.5em;
    }

    .dashboard-item .dashboard-icon div:nth-child(2) {
        margin-left: 70px;
    }

    .dashboard-item-title {
        position: relative;
        padding: 5px;
    }
        .dashboard-item-title .date {
            font-size: 2.3em;
            font-weight: 900;
            color: #707070;
        }
        .dashboard-item-title div {
            width: 100%;
            text-align: end;
        }

    .dashboard-item-button {
        position: relative;
        padding: 5px;
        min-height: 80px;
        color: white;
        border-radius: 0.4rem;
        cursor: pointer;
        z-index: 99;
    }
        .dashboard-item-button .dashboard-icon {
            color: white;
        }

        .dashboard-item-button .dashboard-content {
            position: absolute;
            bottom: 0;
            right: 0.5em;
            
        }
        .dashboard-item-button .unit {
            color: #f0f4f8;
        }
        .dashboard-item-button .text {
            font-size: 2.5em;
            font-weight: 700;
        }

    .btnToTop {
        position: fixed;
        bottom: 30px;
        right: 40px;
    }
    .btnToTop button i {
        font-size: 1.5em;
    }

    .t1 {
        position: absolute;
        width: 5px;
        top: 7px;
        left: 22px;
        z-index: 5;
        transform-origin: 50% 100%;
    }
.t2 {
    position: absolute;
    z-index: 3;
    width: 50px;
}
.t3 {
    position: absolute;
    width: 18px;
    left: 17px;
}

.tri-alarm .dashboard-icon i {
    transition: transform .7s ease-in-out;
}
.tri-alarm:hover .dashboard-icon i {
    -webkit-animation: alarm 1s infinite linear;
    animation: alarm 1s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes alarm {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(-30deg);
    }
    60% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes alarm {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-30deg);
    }

    60% {
        transform: rotate(30deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.tri-degree .dashboard-icon .t1 {
    transition: transform .7s ease-in-out;
}
.tri-degree:hover .dashboard-icon .t1 {
    -webkit-animation: degree 1s infinite linear;
    animation: degree 1s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes degree {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(100deg);
    }

    70% {
        transform: rotate(-50deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes degree {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(100deg);
    }

    70% {
        transform: rotate(-50deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.tri-money .dashboard-icon .t3 {
    transition: transform .7s linear;
}
.tri-money:hover .dashboard-icon .t3 {
    -webkit-animation: money 2s infinite linear;
    animation: money 2s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


@-webkit-keyframes money {
    0% {
        top: -5px;
        left: 10px;
    }

    30% {
        top: 16px;
        left: 10px;
        opacity: 1;
    }

    50% {
        top: 25px;
        left: -6px;
    }

    60%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes money {
    0% {
        top: -5px;
        left: 10px;
    }

    30% {
        top: 16px;
        left: 10px;
        opacity:1;
    }

    50% {
        top: 25px;
        left: -6px;
    }

    60%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

    .w-sm-50, .w-sm-100 {
        width: auto;
    }

    .maxw-90 {
        max-width: 90%;
    }

    .maxw-80 {
        max-width: 80%;
    }

    .maxw-70 {
        max-width: 70%;
    }


    @media (max-width: 768px) {

        .w-sm-50 {
            width: 49%;
        }

        .w-sm-100 {
            width: 100%;
        }

        .maxw-90, .maxw-80, .maxw-70 {
            max-width: 100%;
        }

        .q-body {
            padding: 0.5rem;
        }

        .r-body {
            padding: 0.5rem;
        }

        .dashboard-item {
            padding: 5px;
        }

        .dashboard-item-title .dashboard-bg {
            display: none;
        }

        .dashboard-item-button {
            margin: 0px;
            margin-top:10px;
        }
        .dashboard-item-title {
            justify-content: end;
        }
        .dashboard-item-title div {
            width: auto;
        }
        
    }

#ChartDiv {
    height: 800px;
}

@media (max-width: 1200px) {
    #ChartDiv {
        height: 1200px;
    }
}


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

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

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

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


    .bootstrap-table .fixed-table-container .table tbody tr .card-view {
    }
    .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
        font-weight: 600;
        padding: 5px 2px;
        margin: 5px 0px;
        min-width: 35%;

    }
    .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
        display: flex;
        align-items: center;
        overflow: auto;
        padding-left: 2%;
        flex-wrap: wrap;
    }



/* Override Bootstrap style */
.btn-floating.btn-lg, .btn-group-lg > .btn-floating.btn {
    width: 3.2rem;
    height: 3.2rem;
}
.table-sm > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
}

.address-td-style {
    width:20%;
    text-align:center;
}

/* Color Config */
.bgn-primary {
    background-color: #2187e7;
}
    .bg-info {
        color: #fff;
        background-color: #39c0ed;
    }

.ft-primary {
    color: #2187e7;
}

.ft-info {
    color:#39c0ed ;
}

.ft-danger {
    color: #ea3d3d;
}


    /* Override style  */
    .jconfirm .jconfirm-box .jconfirm-buttons button {
        padding: 0.625rem 1.5rem 0.5rem;
    }

    /* Override Bootstrap Select  */
    .bootstrap-select > .dropdown-toggle,
    .bootstrap-select > .dropdown-toggle:active,
    .bootstrap-select > .dropdown-toggle:focus,
    .bootstrap-select > .dropdown-toggle:hover {
        color: #4f4f4f;
        background-color: white;
        border: 1px solid #bdbdbd;
        padding: 0.375rem 0.75rem;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
    

/* Override MDB style */
    dl, ol, ul {
        margin-top: 0;
        margin-bottom: 0rem;
    }
    .navbar {
        box-shadow: none;
        /*outline: 3px solid #2187e7;*/
        border-bottom: 3px solid #2187e7;
    }

    .navbar-light .navbar-nav .nav-link:hover {
        color: #2187e7;
    }

    .navbar-nav .dropdown-menu {
        border: 1px solid #8c8c8c;
    }

    .dropdown-item:hover {
        color: #2187e7;
    }

    .btn {
        font-size: 1rem;
    }
        .btn,
        .btn-check:focus + .btn, .btn:focus,
        .btn.active, .btn.active:focus, .btn.focus, .btn:active, .btn:active:focus, .btn:focus, .btn:hover,
        .btn-check:focus + .btn-primary, .btn-primary:focus {
            box-shadow: none;
        }

    .btn-primary {
        background-color: #2187e7;
    }

    .btn-outline-primary {
        color: #2187e7;
        border-color: #2187e7;
    }

    .btn-danger {
        color: #fff;
        background-color: #ea3d3d;
    }

    .btn.disabled, .btn:disabled, fieldset:disabled .btn {
        box-shadow: none;
    }

    .alert {
        position: fixed;
        bottom: 10%;
        border-radius: 0.25rem;
        padding: 1rem 3.5rem;
        text-align: center;
        width: 80%;
        z-index: 99;
        opacity: 0.85;
    }

    .table {
        font-size: 1rem;
    }

        .table th {
            background-color: #2187e7; /*#def7f4;*/
            color: #ffffff;
        }
        .table-sub th {
            background-color: #16b5ea;
            color: #ffffff;
        }

    .btn-group, .btn-group-vertical, .btn-group-vertical.active, .btn-group-vertical.active:focus, .btn-group-vertical.focus, .btn-group-vertical:active, .btn-group-vertical:active:focus, .btn-group-vertical:focus, .btn-group-vertical:hover, .btn-group.active, .btn-group.active:focus, .btn-group.focus, .btn-group:active, .btn-group:active:focus, .btn-group:focus, .btn-group:hover {
        box-shadow: none;
    }

    .input-group > .form-control {
        height: auto;
    }

    .accordion-button:not(.collapsed) {
        color: #000000;
        background-color: #e6e6e6;
        /*background-color: #fed500;*/
    }

    .accordion-button:hover {
        /*color: aquamarine;*/
    }
    .accordion-button span {
        /*border-right: 1px solid #c3c3c3;*/
        text-align: left;
        /*background-color: antiquewhite;*/
    }

    @media (max-width: 768px) {
        .accordion-button {
            padding: 0.4rem 0.5rem;
        }
    }

    @media (max-width: 768px) {
        .table > :not(caption) > * > * {
            padding: 0.1rem 0.5rem;
        }
    }


        .nav-tabs .nav-link {
            font-size: 1em;
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            background-color: #f0f4ff;
            color: #616161;
        }


    /* Bootstrap Table */
    .page-list .btn-group button {
        padding: 0.375rem 0.75rem;
        margin-left: 10px;
        margin-right: 10px;
    }

    .pagination .page-jump-to button {
        padding: 0.29rem 1rem;
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
        margin-left: 0px;
        border: 1px solid#cdcdcd;
    }

    .pagination .input-group {
        width: auto;
    }

    .page-item.active .page-link {
        box-shadow: none;
        background-color: #2187e7;
    }

    .bootstrap-table .fixed-table-container .table thead th .both {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
        background-size: 1.1875rem, 1.1875rem;
    }

    .bootstrap-table .fixed-table-container .table thead th .asc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
        background-size: 1.1875rem, 1.1875rem;
    }

    .bootstrap-table .fixed-table-container .table thead th .desc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
        background-size: 1.1875rem, 1.1875rem;
    }
    /* IE10 & 11 want URL encoded open and close characters */


/* -----------------Custom----------------- */

/* 註冊 */

.register-item {

}

.register-item img {
    width: 100%;
}
.register-item .r-title {

}
.register-item .r-list {
    height: 140px;
}
/* 頁面服務說明 */
.page-description-wrapper {

    border-top: 2px dashed #2187e7;

    background-color: #fafafa;
    background-image: radial-gradient(#c2c2c2 0.9500000000000001px, transparent 0.9500000000000001px), radial-gradient(#c2c2c2 0.9500000000000001px, #fafafa 0.9500000000000001px);
    background-size: 38px 38px;
    background-position: 0 0,19px 19px;
}
.page-description {
    
}
.page-description-item {
    /*background-color:transparent;*/
    border-radius: 5px;
    border: 1px solid #cccccc;
    width: 32%;
    margin-right: 10px;
    margin-bottom: 10px;
}
.page-description-item .title {
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
}
    .page-description-item .content {
        padding: 10px 0px;
    }

@media (max-width: 768px) {
    .page-description-item {
        width: 100%;
        margin-right: 0px;
    }
}

/* 帳單明細 */
.accordion-bill-title {
    font-size: 1em;
    font-weight: 600;
    color: #707070;
}

.accordion-button .badge {
    font-size: 1em;
}

@media (max-width: 768px) {
    .accordion-button .badge {
        font-size: 0.8em;
    }

    .accordion-bill-title {
        font-size: 1em;
        font-weight: 600;
        color: #707070;
    }
}

.quote {
    /*background-color: #fef8ef;*/
    padding: 1em;
    border-top: 2px dashed #bdd0e3;
    border-bottom: 2px dashed #bdd0e3;
    border-right: 2px dashed #bdd0e3;
    border-left: 8px solid #2187e7;
    width: 92%;
}

/* 以row 排版form文字欄位 */
.formflex div {
    border: 1px dotted #39C0ED;
    padding: 5px 5px;
}
.formflex-nobd div {
    padding: 5px 5px;
}
@media (max-width: 768px) {
    .formflex div {
        padding: 2px 3px;
    }
}

.padding-5px5px {
    padding: 5px 5px;
}

/*避免影響Barcode*/
.formflexdiv {
    border: 1px dotted #39C0ED;
    padding: 10px 5px;
}

#barcodePay, #payTaipei, #twPayQRCode, #twParUrl {
    padding: 1.5rem;
}
.tw-pay-style {
    /*background-color: #ea4c97;*/
}
.tw-pay-style img {
    width: 45%;
}

.tw-pay-style canvas {
    margin: 10px;
}

#divTwPayQrCode {
    background-color: white;
    width: fit-content;
}
/* User Login Page*/
.login-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    /*border-radius: 5px;*/
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}

.field-icon {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.3);
    margin-right: 10px;
}

#forgetPwd, #dReg {
    width: 49%
}

.btn.btn-tpp {
    background: #2eb6c7 !important;
    border: 1px solid #2eb6c7 !important;
    color: #fff !important;
}

.btn.btn-isso {
    background: #f7e26d !important;
    color: #364250 !important;
}

@media (min-width: 768px) {
    .login-left {
        width: 70%;
    }

    .login-right {
        width: 30%;
    }
}

/* 系統公告 */
.attachment-wrapper {

}
.attachment-item {
    cursor:pointer;
}

/*導覽列特效*/
.navbar-toggler .icon-bar {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #2187E7;
    border-radius: 1px;
    margin: 3px;
}

.navbar-toggler .icon-bar {
    position: relative;
    transition: all 450ms ease-in-out;
}

.navbar-toggler.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggler.active .icon-bar:nth-of-type(2) {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.navbar-toggler.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}


@media print {
    body * {
        line-height: 1rem;
    }

    .no-print *, .BreadcrumbSetting * {
        display: none;
    }

    .q-body row label {
        width: 100%;
    }

    .fixed-top {
        position: initial;
    }
    .main-container {
        margin-top: 10px;
    }

    .main-container-test {
        margin-top: 10px;
    }
}

input[type="date"], input[type="month"] {
    display: inline-block;
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.btn-store {
    min-width: 220px;
    padding: 6px 20px !important;
    cursor: pointer;
    height: 5rem;
    margin-top: 5px;
}

.btn-store .btn-label,
.btn-store .btn-caption {
    display: block;
    text-align: left;
    line-height: 1.2;
}

.btn-store .btn-caption {
    font-size: 24px;
}

.fixed-width {
    width: 150px; 
    display: inline-block; 
}

.ml-5px {
    margin-left:5px;
}

.mr-5px {
    margin-right: 5px;
}

.mr-30px-i {
    margin-right: 30px !important; 
}

.width-6em {
    width: 6em;
}

.width-7em {
    width:7em;
}

.width-10em {
    width: 10em;
}

.bootstrap-select .filter-option {
    text-transform: none !important;
}

.badge-font {
    font-size: 0.85em;
    font-weight: 400;
}

.notice-button-container {
    gap: 10px;
}