@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@100;400;700;900&display=swap');

:root {
    --input-padding-x: .85rem;
    --input-padding-y: .85rem;
}

/* go top */
#go-top {
    position: fixed;
    right: 20px;
    bottom: 0;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    opacity: 0;
    z-index: 1031;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

    #go-top.show {
        bottom: 20px;
        opacity: 1;
    }

    #go-top::after {
        content: "\f062";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        top: 3px;
        left: 8px;
    }

/* custom bootstrap spinner  */
.spinner-border {
    animation-name: spinner-loading-rotation;
}

/* loading lightbox */
#loading {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    color: #fff;
    z-index: 9999;
}

    #loading .st-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

        #loading .st-content .st-message {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 0;
            width: 200px;
            border-radius: 10px;
            background-color: #fff;
        }

            #loading .st-content .st-message > p {
                margin-bottom: 0.5rem;
                color: #6c757d;
                font-size: 1rem;
                font-weight: bold;
            }

/* button overlay */
#button-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    z-index: 9998;
    color: #fff;
    display: none;
}

@-webkit-keyframes spinner-loading-rotation {
    0% {
        border-color: #ccc;
        border-left-color: #e45a2c;
    }

    25% {
        border-color: #ccc;
        border-top-color: #e45a2c;
    }

    50% {
        border-color: #ccc;
        border-right-color: #e45a2c;
    }

    75% {
        border-color: #ccc;
        border-bottom-color: #e45a2c;
    }

    100% {
        border-color: #ccc;
        border-left-color: #e45a2c;
    }
}

@keyframes spinner-loading-rotation {
    0% {
        border-color: #ccc;
        border-left-color: #e45a2c;
    }

    25% {
        border-color: #ccc;
        border-top-color: #e45a2c;
    }

    50% {
        border-color: #ccc;
        border-right-color: #e45a2c;
    }

    75% {
        border-color: #ccc;
        border-bottom-color: #e45a2c;
    }

    100% {
        border-color: #ccc;
        border-left-color: #e45a2c;
    }
}

/* floating label */
.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

    .form-label-group .form-control {
        height: auto;
    }

    .form-label-group.input-group > .form-control:focus {
        z-index: 0;
    }

    .form-label-group > input,
    .form-label-group > textarea,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
    }

    .form-label-group > select {
        padding-top: 1.625rem;
    }

        .form-label-group > select[multiple][size="2"] {
            height: 2.75rem;
        }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0;
        line-height: 1.5;
        color: #999;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }

    .form-label-group > select ~ label {
        font-size: 14px;
        pointer-events: none;
        transform: translateY(-0.5rem) translateX(0.15rem);
    }

    .form-label-group.input-group > label {
        width: 88%;
    }

    .form-label-group input::-webkit-input-placeholder,
    .form-label-group textarea::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder,
    .form-label-group textarea:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-ms-input-placeholder,
    .form-label-group textarea::-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder,
    .form-label-group textarea::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder,
    .form-label-group textarea::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
    }

        .form-label-group input:not(:placeholder-shown) ~ label {
            padding-top: calc(var(--input-padding-y) / 3);
            padding-bottom: calc(var(--input-padding-y) / 3);
            font-size: 12px;
            color: #1a73e8;
        }

    .form-label-group .input-group-message {
        width: 100%;
    }

    .form-label-group textarea:not(:placeholder-shown) ~ label {
        padding: 0 3px;
        width: inherit;
        background: #fff;
        color: #1a73e8;
        font-size: 14px;
        transform: translateX(10px) translateY(-10px);
    }

    .form-label-group .form-control ~ .input-group-append {
        border: 1px solid #ced4da;
        border-left: 0;
        border-top-right-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
        transition: border-color .15s ease-in-out;
    }

        .form-label-group .form-control ~ .input-group-append .input-group-text {
            border: 0;
            border-radius: 0.25rem;
        }

    .form-label-group .form-control:focus ~ .input-group-append {
        border: 1px solid #80bdff;
        border-left: 0;
    }

    .form-label-group .form-control.input-validation-error ~ .input-group-append {
        border: 1px solid #dc3545;
        border-left: 0;
    }

    .form-label-group input.input-validation-error:not(:placeholder-shown) ~ label {
        color: #dc3545;
    }

    .form-label-group textarea.input-validation-error:not(:placeholder-shown) ~ label {
        color: #dc3545;
    }

    /* for control-xs */
    .form-label-group.control-xs > input {
        padding: 0.75rem 0.75rem 0.375rem;
        line-height: 1;
    }

    .form-label-group.control-xs > select {
        padding-top: 0.75rem;
        line-height: 1;
    }

    .form-label-group.control-xs > a {
        display: block;
        width: 100%;
        padding: 0.75rem 0.75rem 0.375rem;
        font-size: 1rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    .form-label-group.control-xs > label {
        margin-left: 0.5rem;
        padding: 0 5px;
        width: auto;
        background-color: #fff;
        font-size: 14px;
        transform: translateY(-0.6rem) translateX(0.15rem);
    }

    .form-label-group.control-xs input:not(:placeholder-shown) ~ label {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 14px;
    }

    .form-label-group.control-xs > select.has-val ~ label,
    .form-label-group.control-xs > a ~ label {
        color: #1a73e8;
    }

    .form-label-group.control-xs > input[type="number"]:not(.input-validation-error):not(.has-val) ~ label,
    .form-label-group.control-xs > input[type="time"]:not(.input-validation-error):not(.has-val) ~ label,
    .form-label-group.control-xs > input[type="date"]:not(.input-validation-error):not(.has-val) ~ label,
    .form-label-group.control-xs > input[type="datetime-local"]:not(.input-validation-error):not(.has-val) ~ label,
    .form-label-group.control-xs > input[type="file"]:not(.input-validation-error):not(.has-val) ~ label {
        color: #999;
    }

    .form-label-group.control-xs input.input-validation-error ~ label,
    .form-label-group.control-xs select.input-validation-error ~ label {
        color: #dc3545;
    }

    .form-label-group .form-control[readonly],
    .form-label-group .form-control:disabled,
    .form-label-group .form-select[readonly],
    .form-label-group .form-select:disabled {
        background-color: #fff;
        cursor: not-allowed;
    }

    .form-label-group.control-xs .form-control[type=file] {
        font-size: 15px;
    }

        .form-label-group.control-xs .form-control[type=file]::-webkit-file-upload-button {
            margin-top: -0.75rem;
            height: 40px;
            background-color: #fff;
        }

        .form-label-group.control-xs .form-control[type=file]:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
            background-color: #fff;
        }

body.bg-color .form-label-group textarea:not(:placeholder-shown) ~ label {
    border-top: 1px solid var(--background-color);
    border-bottom: none;
    background: linear-gradient(var(--background-color), var(--background-color) 9px, #fff 9px);
}

/* for control-xs */
body.bg-color .form-label-group.control-xs > label {
    border-top: 1px solid var(--background-color);
    border-bottom: none;
    background: linear-gradient(var(--background-color), var(--background-color) 9px, #fff 9px);
}

/* HTML 5 date */
.form-label-group.control-xs input::-webkit-calendar-picker-indicator {
    padding-top: 0;
    padding-bottom: 0;
}

/* custom bootstrap modal */
.alert-modal .modal-header {
    flex-direction: column;
    align-items: center;
    border-bottom: 0;
}

    .alert-modal .modal-header .modal-icon {
        font-weight: 700;
    }

    .alert-modal .modal-header .modal-title {
        margin-top: 10px;
        font-size: 1.375rem;
        font-weight: 700;
    }

.alert-modal .modal-body {
    display: flex;
    justify-content: center;
    color: #777;
}

    .alert-modal .modal-body .content {
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;
    }

.alert-modal .modal-footer {
    justify-content: center;
    border-top: 0;
}

    .alert-modal .modal-footer .btn-ok {
        width: 60%;
    }

.confirm-modal .modal-header {
    justify-content: center;
    align-items: center;
    border-bottom: 0;
}

    .confirm-modal .modal-header .modal-icon {
        margin-bottom: 0;
    }

.confirm-modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .confirm-modal .modal-body .modal-title {
        margin-bottom: 1rem;
        font-size: 1.375rem;
        font-weight: 700;
    }

    .confirm-modal .modal-body .content {
        margin-left: 15px;
        margin-right: 15px;
        color: #777;
    }

.confirm-modal .modal-footer {
    justify-content: center;
    border-top: 0;
}

    .confirm-modal .modal-footer .btn {
        flex: 1;
    }

/* custom bootstrap alert  */
#inline-alert.alert-warning {
    border: 1px solid rgb(0 0 0 / 16%);
    border-left: 4px solid #e45b2c;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #777;
    background-color: #fff;
    -webkit-box-shadow: rgb(0 0 0 / 35%) 0px 2px 4px;
    -moz-box-shadow: rgb(0 0 0 / 35%) 0px 2px 4px;
    box-shadow: rgb(0 0 0 / 35%) 0px 2px 4px;
}

#inline-alert .wrapper {
    display: flex;
    align-items: center;
}

    #inline-alert .wrapper .icon {
        margin-right: 1rem;
        color: #e45a2c;
    }

/* iframe modal */
.iframe-modal .modal-header {
    justify-content: center;
}

    .iframe-modal .modal-header h5 {
        color: #dc3545;
        font-weight: 700;
    }

    .iframe-modal .modal-header .btn-close {
        position: absolute;
        right: 16px;
        margin: 0;
    }

.iframe-modal .modal-body {
    padding: 1rem 0;
}

    .iframe-modal .modal-body iframe {
        width: 100%;
    }

/* iframe-wrapper */
.iframe-wrapper {
    padding: 10px 5px;
}

    .iframe-wrapper .input-group .form-control {
        border-right: 0;
    }

    .iframe-wrapper .form-label-group label {
        font-size: 16px;
    }

    .iframe-wrapper .form-label-group.control-xs label {
        font-size: 14px;
    }

    .iframe-wrapper .input-group .input-group-append .input-group-text {
        background-color: #fff;
    }

/* note */
.note {
    position: relative;
    margin-top: 2rem;
    border-top: 1px solid #ccc;
}

    .note .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -12px;
        left: 12px;
        width: auto;
        background-color: #fff;
    }

body.bg-color .note .icon {
    background-color: var(--background-color);
}

.note .icon .material-icons {
    margin-left: 6px;
    color: #e45a2c;
}

.note .icon .icon-caption {
    margin-right: 6px;
    color: #777;
    font-size: 1rem;
    font-weight: 700;
}

.note .statement {
    margin-top: 1.5rem;
    padding-inline-start: 20px;
    font-size: 14px;
}

.note ol.statement {
    counter-reset: note;
    display: table;
}

    .note ol.statement > li {
        counter-increment: note;
        display: table-row;
    }

        .note ol.statement > li:before {
            content: counter(note) '. ';
            display: table-cell;
            text-align: right;
            padding: 0 3px 0 0;
        }

/* button area  */
.btn-area {
    display: flex;
    align-items: center;
}

    .btn-area .btn.w-100 {
        margin: 0;
    }

    .btn-area .btn:not(:last-child) {
        margin-right: .25rem;
    }

/* jquery ui */
.ui-widget {
    font-family: Arial,"Microsoft JhengHei","\5FAE\8EDF\6B63\9ED1\9AD4",sans-serif;
}

.ui-widget-content a {
    color: #06c;
}

    .ui-widget-content a:hover,
    .ui-widget-content a:visited {
        color: #06c;
        text-decoration: underline;
    }

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #06c;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a {
    color: #06c;
}

/* jqgrid */
.ui-jqgrid .ui-jqgrid-view {
    font-size: 15px;
}

/* jqgrid header */
.ui-jqgrid .ui-jqgrid-htable th {
    height: 40px;
    background-color: #006989;
    color: #fff;
}

.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
    height: auto !important;
    margin: 0;
    font-weight: 700;
}

.ui-jqgrid .ui-icon-asc {
    margin-top: 0px;
}

.ui-jqgrid .ui-icon-desc {
    margin-top: 6px;
    margin-left: 0;
}

/* jqgrid row */
.ui-jqgrid tr.jqgrow {
    border-top: 0 none;
    border-left: 0 none;
}

    .ui-jqgrid tr.jqgrow:not(.ui-state-hover):not(.ui-state-highlight):nth-child(odd) {
        background: #f9f9f9;
    }

    .ui-jqgrid tr.jqgrow td {
        height: 50px;
        color: #000;
        font-weight: 700;
    }

        .ui-jqgrid tr.jqgrow td.fn-buttons > * {
            margin: 0.25rem;
        }

/* grid pager */
.ui-jqgrid .ui-jqgrid-pager {
    font-size: 14px;
}

.ui-jqgrid .ui-pg-input {
    height: 22px;
}

@keyframes glow-red {
    0%, 100% {
        box-shadow: 0 0 0 rgba(40, 167, 69, 0);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.7);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

@keyframes spin-360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}