html {
    font-size: 10px;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Arial', '微軟正黑體', sans-serif;
}

/* start of overriding layouts/layout/css/layout.css */
.page-header-fixed .page-container {
    margin-top: 70px;
}

.page-header.navbar {
    height: 70px;
    min-height: 70px;
    padding: 6px;
    background-color: #fff;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #fff;
    font-size: var(--font-size-base);
    font-weight: 700;
    width: 100%;
    margin: 0;
    filter: none;
    background-image: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.page-header.navbar .page-logo {
    float: left;
    display: block;
    width: 620px;
    height: 50px;
    padding-left: 0px;
    padding-right: 20px;
}

.page-header.navbar .page-logo .logo-default {
    margin: 5px 0 0 0;
}

.page-header.navbar .page-logo .logo-mobile {
    margin: 5px 0 0 0;
    display: none;
}

@media (max-width: 991px) {
    .page-header.navbar .page-logo .logo-default {
        display: none;
    }

    .page-header.navbar .page-logo .logo-mobile {
        display: block;
    }
}

.page-header.navbar .top-menu .navbar-nav {
    padding-top: 15px;
    margin-right: 20px;
    display: block;
}

.page-sidebar .page-sidebar-menu > li.heading + li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.heading + li > a {
    border-top: 0 !important;
}

.page-sidebar .page-sidebar-menu .sub-menu li,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li {
    margin-top: 0px !important;
}

.page-sidebar .page-sidebar-menu .sub-menu li:last-child > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a {
    border-bottom: 0;
}

.page-sidebar .page-sidebar-menu .sub-menu li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a {
    padding: 6px 15px 6px 25px;
    border-bottom: var(--grid-border);
    background-color: #ffffff;
}

.page-sidebar .page-sidebar-menu li > a > .arrow:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow:before {
    content: '\f107';
}

.page-sidebar .page-sidebar-menu li > a > .arrow.open:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow.open:before {
    content: '\f106';
}

@media (min-width: 992px) {
    .page-sidebar {
        width: 275px;
        float: left;
        position: relative;
        margin-right: -100%;
    }

    .page-content-wrapper .page-content {
        margin-left: 275px;
        margin-top: 0;
        min-height: 600px;
        padding: 5px 20px 10px;
    }

    .page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .page-logo .logo-default {
        display: block;
    }

    .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li.nav-item {
        width: 256px !important;
        position: relative !important;
        z-index: 10000;
        display: none !important;
        cursor: auto;
    }

    .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > a,
    .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li.open > a {
        background: transparent;
        color: #fff;
    }
}

/* end of overriding layouts/layout/css/layout.css -------------------- */

/* start of page-content */
.page-content {
    background-color: #f3f3f3;
}

.page-content .page-content-footer {
    text-align: center;
    font-weight: 700;
}

/* end of page-content -------------------- */

/* start of sidebar */
.page-sidebar .page-sidebar-menu a {
    font-size: var(--font-size-base) !important;
}

.page-sidebar .page-sidebar-menu .sub-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu {
    padding: 0;
    margin: 0;
}

.page-sidebar .page-sidebar-menu li.heading {
    background: #ebf1e1;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li .sub-menu li > a,
.page-sidebar .page-sidebar-menu li .sub-menu li:hover > a,
.page-sidebar .page-sidebar-menu li .sub-menu li:hover > a > i {
    background-color: var(--submenu-hover-bgcolor) !important;
    color: #212529;
}

.page-sidebar .sidebar-toggler2 {
    cursor: pointer;
}

/* end of sidebar -------------------- */

/* start of portlet */
.portlet {
    background-color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px 0 rgb(58 52 82 / 15%), 0 2px 6px 0 rgb(58 52 82 / 4%);
}

.portlet.box > .portlet-title {
    background-color: #9fc674;
    padding: 0 20px;
    min-height: unset;
}

.portlet > .portlet-title > .caption {
    float: left;
    font-size: var(--font-size-lg);
    font-weight: 700;
    padding: 10px 0;
}

.portlet.box > .portlet-body {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
}

.portlet-title .btn:last-child {
    margin-right: 20px;
}

/* end of portlet -------------------- */

/* start of tablebox */

.tablebox {
    border: var(--grid-border);
    border-collapse: collapse;
}

.tablebox .tablebox-title {
    border-bottom: var(--grid-border);
    padding: 1px 10px 0px 6px;
    background-color: #ebf1e1;
}

.tablebox .tablebox-title .caption {
    display: inline-block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    padding: 10px 10px 6px;
}

.tablebox .tablebox-title .ribbon_icon {
    background-repeat: no-repeat;
    margin-top: 0px;
}

.tablebox .tablebox-title > .tools {
    float: right;
    padding: 12px 0 8px;
}

.tablebox .tablebox-title > .tools > a.collapse {
    background-image: url(/backweb/skin/assets_ext/extends/img/portlet-collapse-icon-white-215fff02791c8a1c7315e6ffd20de7d9.png);
}

.tablebox .tablebox-title > .tools > a.collapse {
    background-image: url(/backweb/skin/assets_ext/extends/img/portlet-collapse-icon-76a1b78abd203bef212be4e4339b0382.png);
    width: 14px;
    visibility: visible;
}

.tablebox .tablebox-title > .tools > a.expand {
    background-image: url(/backweb/skin/assets_ext/extends/img/portlet-expand-icon-white-979e05ef18b6b7ad3c93bffa5f62028a.png);
}

.tablebox .tablebox-title > .tools > a.expand {
    background-image: url(/backweb/skin/assets_ext/extends/img/portlet-expand-icon-b5803063628e06fc852a151885f36201.png);
    width: 14px;
    visibility: visible;
}

.tablebox .tablebox-title > .tools > a {
    display: inline-block;
    height: 16px;
    margin-left: 5px;
    opacity: 1;
    filter: alpha(opacity = 100);
}

.tablebox .tablebox-body {
    padding: 10px;
}

/* end of tablebox -------------------- */

/* start of datatable */
table.table tr th,
table.table tr td {
    padding: 4px;
    font-size: var(--font-size-base);
    vertical-align: middle;
    text-align: var(--grid-cell-text-align);
}

table.dataTable {
    width: calc(100% - 2px);
}

table.dataTable thead tr th,
table.dataTable thead tr td,
table.dataTable tbody tr th,
table.dataTable tbody tr td {
    padding: 4px;
    font-size: var(--font-size-base);
    vertical-align: middle;
    text-align: var(--grid-cell-text-align);
}

table.dataTable tr.heading > th {
    background: var(--grid-head-bgcolor);
}

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

table.dataTable > tbody > tr:first-child > * {
    border-top: var(--grid-border);
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: none;
}

table.table-bordered,
table.table-bordered > tbody > tr > td,
table.table-bordered > tbody > tr > th,
table.table-bordered > tfoot > tr > td,
table.table-bordered > tfoot > tr > th,
table.table-bordered > thead > tr > td,
table.table-bordered > thead > tr > th {
    border: var(--grid-border);
}

table.dataTable .tbody-cell-left td {
    text-align: left;
}

table.dataTable .tbody-cell-center td {
    text-align: center;
}

table.dataTable .tbody-cell-right td {
    text-align: right;
}

table.dataTable .heading-center th {
    text-align: center;
}

table.dataTable .heading th.left {
    text-align: left;
}

table.dataTable .heading th.center {
    text-align: center;
}

table.dataTable .heading th.right {
    text-align: right;
}

table.dataTable tr.nowrap th,
table.dataTable tr.nowrap td {
    white-space: nowrap;
}

table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}

table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--grid-row-even-bgcolor);
}

table.table-hover > tbody > tr:hover,
table.table-hover > tbody > tr:hover > td {
    background: var(--grid-row-hover-bgcolor) !important;
}

/* end of datatable -------------------- */

/* start of tabs */
ul.nav.nav-tabs {
    background: #fff;
    border-bottom: 3px solid #82a55c;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 0px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a {
    color: #cd0707;
    background-color: #fff;
    border: 3px solid #ddd;
    border-bottom-color: transparent;
    cursor: default;
    font-size: var(--font-size-lg);
    padding-right: 40px;
    padding-left: 40px;
}

.nav-pills > li > a,
.nav-tabs > li > a {
    font-size: var(--font-size-sm);
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #081c15;
    padding-right: 40px;
    padding-left: 40px;
    border: 2px solid transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #900;
    background-color: #fff;
}

.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover {
    color: #000;
    font-weight: 700;
    border: 3px solid #82a55c;
    margin-bottom: -2px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a {
    color: #fff;
    background-color: #82a55c;
    border: 3px solid #82a55c;
    margin-bottom: -2px;
    cursor: default;
    font-size: var(--font-size-lg);
}

/* end of tabs -------------------- */

/* start of funcbar */
.funcbar {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

.funcbar .caption {
    color: #21252a;
    float: left;
    margin: 5px;
    font-size: var(--font-size-funcbar);
    font-weight: 700;
}

.funcbar .action {
    float: right;
}

/* end of funcbar -------------------- */

/* start of modal dialog */
.modal-content {
    border-radius: 13px;
    border: none;
}

.modal .modal-header {
    background-color: #9fc674;
    border-radius: 10px 10px 0 0;
}

.modal .portlet.box {
    margin: 20px;
}

.modal-content {
    background-color: #fafaff;
}

.modal-title {
    color: #fff;
    font-weight: bold;
}

.modal-footer {
    background-color: #9fc674;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 0 0 10px 10px;
}

.modal-footer .btn {
    margin: 0px;
}

/* end of modal dialog -------------------- */

/* start of compact form (based on tf-flexform) */
.form-wrapper .aa-table.compact {
    margin-bottom: 0;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #e7d3f1;
    border-left-color: #e7d3f1;
}

.form-wrapper .aa-table.compact .aa-th,
.form-wrapper .aa-table.compact .aa-td {
    padding: 2px 10px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #e7d3f1;
    border-bottom-color: #e7d3f1;
}

.form-wrapper .aa-table.compact .tf-label {
    padding-top: 4px;
    background-color: #fff5ff;
}

.form-wrapper .aa-table.compact .tf-text {
    padding-top: 4px;
}

.form-wrapper .aa-table.compact input.tf-control,
.table-responsive .table.compact input.tf-control {
    margin: 1px 0px;
}

.form-wrapper .aa-table.compact .tf-control.plaintext:disabled,
.form-wrapper .aa-table.compact input[readonly].tf-control.plaintext {
    padding: 1px 0;
}

.form-wrapper .aa-table.compact ul {
    padding-left: 18px;
    margin-bottom: 0px;
}

/* end of compact form -------------------- */

.mb-4 {
    margin-bottom: 1.5rem !important;
}

@media (min-width: 1200px) {
    .action-group.fixed-colno-4 button.btn {
        width: calc(100% / 4 - 14px);
    }
}

/* start of aa-section -------------------- */
.aa-section-title .tf-bhead .tools > a {
    display: inline-block;
    height: 16px;
    margin-left: 5px;
    opacity: 1;
    filter: alpha(opacity=100);
}

.aa-section-title .tf-bhead .tools > a.collapse {
    background-image: url(/backweb/skin/assets_ext/extends/img/portlet-collapse-icon-76a1b78abd203bef212be4e4339b0382.png);
    width: 14px;
    visibility: visible;
    vertical-align: middle;
    background-position: 0px 1px;
}

.aa-section-title .tf-bhead .tools > a.expand {
    background-image: url(/backweb/skin/assets_ext/extends/img/portlet-expand-icon-b5803063628e06fc852a151885f36201.png);
    width: 14px;
    vertical-align: middle;
    background-position: 0px 1px;
}

.aa-section-title .tf-bhead .bhead-caption {
    padding: 3px 10px 0px 6px;
}

.aa-section-title .ribbon_icon {
    background-repeat: no-repeat;
    margin-top: 0px;
}

.aa-section-title .ribbon_icon.bhead-caption {
    padding-left: 0px;
}

/* end of aa-section -------------------- */

/* begin of tippy  -------------------- */
i[data-tippy-content],
i[data-tippy-template] {
    margin-left: 2px;
}

.tippy-box ul,
.tippy-box ol {
    margin: 0;
    padding: 0 5px 0 20px;
}

/* end of tippy  -------------------- */

/* begin of sweetalert2 */
div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: var(--font-size-base);
    font-weight: 700;
}

div:where(.swal2-container) .swal2-html-container {
    font-size: var(--font-size-base);
}

div:where(.swal2-container) div:where(.swal2-actions) {
    width: 80%;
    margin: 3em auto 0;
}

.swal2-actions.fixed-colno-2 button.btn {
    width: calc(100% / 2 - 20px);
}

div:where(.swal2-container) {
    z-index: 10099; /* cover bootstrap modal class */
}

/* end of sweetalert2 */

/* begin of caption-switcher */
.portlet > .portlet-title.caption-switcher > .selector {
    position: relative;
    display: inline-block;
}

.portlet > .portlet-title.caption-switcher > .selector select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #c0bbcd;
    border: 0px solid #9fa5e3;
    padding: 10px;
    font-size: var(--font-size-lg);
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    /*outline: none;  去掉點擊時的外框線 */
}

.portlet > .portlet-title.caption-switcher > .selector::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: var(--font-size-lg);
    color: #fff;
}

.portlet > .portlet-title.caption-switcher > .selector option {
    background-color: #faf7ff;
    color: #000;
}

.portlet > .portlet-title.caption-switcher > .selector option:hover {
    background-color: #d0d0d0;
}

.portlet > .portlet-title.caption-switcher > .hidden-selected-text {
    visibility: hidden;
    white-space: nowrap;
    font-size: var(--font-size-lg);
    font-weight: bold;
    padding: 10px;
    position: absolute;
}

/* end of caption-switcher */

/* begin of misc */
.captcha-img {
    cursor: pointer;
}

span.input-group-addon:has(> .fa-calendar) {
    cursor: pointer;
}

.font-green-meadow {
    color: #adb5bd !important;
}

.font-blue-steel {
    color: #ced4da !important;
}
/* end of misc */