body,
input,
select,
textarea {
    color: #202020;
    font-family: 'Noto Sans TC', sans-serif, Arial, Microsoft JhengHei !important;
    line-height: 1 !important;
}

a {
    background-color: transparent !important;
}

a,
button,
input,
select,
#menu.navbar-nav>li a,
.report-btn .list-inline-item .report::before,
.report-btn .list-inline-item a,
a.btn {
    transition: all 0.3s;
    text-decoration: none !important;
}

a.btn.btn-dark.btn-lg {
    color: #fff !important;
    background-color: #027d87 !important;
    border-color: #343a40;
}

a:hover:not(.report-btn .list-inline-item a:hover),
a:focus,
a:active:not(.report-btn .list-inline-item a:active),
button:hover,
button:focus,
input:focus,
select:focus,
a.btn:hover,
a.btn:active,
.report-btn .list-inline-item .report:hover::before {
    background-color: #ffe100 !important;
    color: #121212 !important;
}

a:hover .report span,
a:active .report span {
    background-color: #ffe100 !important;
    color: #121212 !important;
}

.report-btn .list-inline-item .report:hover {
    color: #121212 !important;

}

#menu.navbar-nav>li a:hover,
#menu.navbar-nav>li a:focus,
#menu.navbar-nav>li a:active {
    background-color: #027D87 !important;
    color: white !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

.text-dark {
    color: #252A2F !important;
}

.bg-success {
    background-color: #027D87 !important;
}

.bg-warning {
    background-color: #FFD600 !important;
}

.bg-dark {
    background-color: #252A2F !important;
}

.border-success {
    background-color: #027D87 !important;
}

.text-success {
    color: #027D87;
}

.text-justify {
    text-align: justify;
}

.lh-lg {
    line-height: 2 !important;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-24 {
    font-size: 1.5rem;
}

/* ------------------------------- */
.key-mark {
    z-index: 200;
    left: 0;
    top: 0;
}

.top-line-h {
    height: 22px;
}

.top-left-line .top-line,
.top-right-line .top-line {
    border: 12px solid transparent;
}

.top-left-line .top-line {
    border-top-color: #027D87;
    border-left-color: #027D87;
}

.top-right-line .top-line {
    border-bottom-color: #027D87;
    border-right-color: #027D87;
}

/* ------------------------------- */

.navbar button[aria-controls="menu"] {
    right: 0
}

.navbar button[aria-expanded="true"] {
    background-color: #ffc107;
}

.report::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #027D87;
    transform: skew(-20deg);
}

header .col-md-7 ul li:nth-of-type(3) .report::before {
    background: #FF0000;
}

.error-page .display-1 {
    font-weight: 700;
}

.error-page .card-body h4 {
    line-height: 1.7;
    font-weight: 700;
}


/* angular form validation */
/* refer to: https://angular.io/guide/form-validation#control-status-css-classes for detail. */
.ng-valid[required],
.ng-valid.required {
    border-left: 5px solid #42A948;
    /* green */
}

input.ng-invalid,
select.ng-invalid,
textarea.ng-invalid {
    border-left: 5px solid #a94442 !important;
    /* red */
}

input[type='radio'].ng-invalid,
input[type='checkbox'].ng-invalid {
    border: 2px solid #a94442 !important;
}

/* validation errors */
*[ngxError] {
    color: firebrick;
}

/* Radio style */
input[type='radio'] {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: none;
    border: 2px solid gray;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

input[type='radio']:checked {
    border-color: gray !important;
}

input[type='radio']:checked:before {
    background: gray;
}

/* Checkbox style */
input[type='checkbox'] {
    appearance: none;
    width: 15px;
    height: 15px;
    outline: none;
    border: 1px solid gray;
}

input[type='checkbox']:before {
    content: '';
    font-family: 'Font Awesome 5 Free';
    display: block;
    font-size: 13px;
    margin-top: -50%;
    color: gray;
}

input[type='checkbox']:checked {
    border-color: gray !important;
}

input[type='checkbox']:checked:before {
    content: '\f00c';
}

/* --------------------20230831 玥 */

.btn-warning {
    background-color: #FFD600 !important;
}

footer ul li {
    display: block;
    text-align: left;
    width: auto;
    line-height: 1.7;
}

.noscript {
    text-align: center;
    display: block;
    padding: 1rem 0;
    color: darkred;
    font-size: 1.3rem;
}

.focusable {
    transition: top 0.3s;
    z-index: 1100;
    outline-offset: -3px;
    color: transparent !important;
}

.focusable:focus {
    color: inherit
}

.px-change:hover {
    padding: 0.1rem 1rem;
}

.col-lg-6 .frame h3 a,
.btn-outline-primary {
    color: #006CE0 !important;
}

.red,
.org {
    color: #BB0000 !important;
}

.articleCon div[_ngcontent-fjj-c9=""] span span {
    color: #202020 !important;
    padding: 0.5rem 1rem
}

.ConF.basic h3,
.ConF.case h3 {
    color: #C14D1F !important;
}

.fs-6 {
    font-size: 1rem;
}

.fw-normal {
    font-weight: normal
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    border: 3px solid #ff9307 !important;
    background-color: #fffb00 !important
}

.topBtn {
    background: #ebebeb;
}

.addBtn,
.deletBtn {
    background: transparent !important;
}

.title.blue {
    background-color: #bdd7ee !important;
}

.title.orange {
    background-color: #f4b184 !important;
}

.title.green {
    background-color: #74e0dd !important;
}

.title.pink {
    background-color: #ffa1b4 !important;
}


.title.blue,
.title.orange,
.title.green,
.title.pink {
    position: relative;
    font-weight: 500 !important;
}

.title.blue::after,
.title.orange::after,
.title.green::after,
.title.pink::after {
    content: "\F229";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 47%;
    top: 92%;
}

.title.blue::after {
    color: #bdd7ee !important;
}

.title.orange::after {
    color: #f4b184 !important;
}

.title.green::after {
    color: #74e0dd !important;
}

.title.pink::after {
    color: #ffa1b4 !important;
}

.title a {
    color: #4d4444 !important;
}

/* -----------20240105 網站導覽*/
.heading-icon {
    top: calc(-25px - 1.5rem);
    left: calc(50% - 25px - 1.5rem);
}

.lh-base {
    line-height: 1.5;
}

.colon::after {
    content: "：";
}


body {
    overflow-x: hidden;
}

@media (max-width:767px) {
    .heading-icon {
        position: static !important;
    }

    .heading-icon svg {
        width: 30px;
    }
}


footer .bg-dark .col-lg-2.col-md-3.order-lg-3.order-md-2 .btn {
    padding: 0 !important;
}

footer .bg-dark .col-lg-2.col-md-3.order-lg-3.order-md-2 .px-1.text-center:nth-of-type(1) .btn img {
    width: 50px !important;
}

footer .bg-dark .col-lg-2.col-md-3.order-lg-3.order-md-2 .px-1.text-center:nth-of-type(2) .btn img {
    width: 120px !important;
}