@charset "UTF-8";
/* ==========================
 * Mixin-變數
 * ResetOther-相關外掛既有樣式調整
 * Layout-共同樣式
 * Componment-元件
 * ==========================
 * */
/*=========mixin start=========*/
*
* /*width class setting*/
.width_5 {
    width: 5%;
}

.width_10 {
    width: 10%;
}

.width_15 {
    width: 15%;
}

.width_20 {
    width: 20%;
}

.width_30 {
    width: 30%;
}

.width_40 {
    width: 40%;
}

.width_50 {
    width: 50%;
}

.width_60 {
    width: 60%;
}

.width_70 {
    width: 70%;
}

.width_80 {
    width: 80%;
}

.width_90 {
    width: 90%;
}

.width_100 {
    width: 100%;
}

.width_100px {
    width: 100px;
}

/*margin class setting*/
.mr_1 {
    margin-right: 0.1rem;
}

.ml_1 {
    margin-left: 0.1rem;
}

.mr_3 {
    margin-right: 0.3rem;
}

.ml_3 {
    margin-left: 0.3rem;
}

.mr_5 {
    margin-right: 0.5rem;
}

.ml_5 {
    margin-left: 0.5rem;
}

.mr_8 {
    margin-right: 0.8rem;
}

.ml_8 {
    margin-left: 0.8rem;
}

.mr_10 {
    margin-right: 1rem;
}

.ml_10 {
    margin-left: 1rem;
}

.mr_15 {
    margin-right: 1.5rem;
}

.ml_15 {
    margin-left: 1.5rem;
}

.mr_20 {
    margin-right: 2rem;
}

.ml_20 {
    margin-left: 2rem;
}

.mr_30 {
    margin-right: 3rem;
}

.ml_30 {
    margin-left: 3rem;
}

/*font-content class setting*/
.t_gray1 {
    color: #717171;
}

.t_gray2 {
    color: #606060;
}

.t_gray3 {
    color: #525252;
}

.scroll_bar_h, .basic_wood_photos, .scroll_bar {
    overflow-y: auto;
}

    .scroll_bar_h::-webkit-scrollbar, .basic_wood_photos::-webkit-scrollbar, .scroll_bar::-webkit-scrollbar {
        width: 5px;
    }

    .scroll_bar_h::-webkit-scrollbar-track, .basic_wood_photos::-webkit-scrollbar-track, .scroll_bar::-webkit-scrollbar-track {
        background: #fff;
    }

    .scroll_bar_h::-webkit-scrollbar-thumb, .basic_wood_photos::-webkit-scrollbar-thumb, .scroll_bar::-webkit-scrollbar-thumb {
        background: #ddd;
    }

        .scroll_bar_h::-webkit-scrollbar-thumb:hover, .basic_wood_photos::-webkit-scrollbar-thumb:hover, .scroll_bar::-webkit-scrollbar-thumb:hover {
            background: #ccc;
        }

/*=========mixin end=========*/
/*=========reset other plugin start=========*/
*
* /*bootstrap 頁數選擇 pagination*/
.page-link {
    color: #606060;
    border: none;
}

.page-link:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.page-link:hover {
    background-color: #e9e9e9;
    color: #5C4F46;
}

.page-link .ti {
    font-size: 1.5rem;
}

.page-item.active .page-link {
    background-color: #5C4F46;
    border-radius: 5px;
}

/*bootstrap css*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #F5A122;
}

.nav-link {
    padding: 0.2rem 1rem;
}

/*click button box shadow*/
.btn-check:focus + .btn, .btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*select margin bottom*/
.form-select, .form-control {
    min-width: 85px;
}

    .form-control:focus, .form-select:focus {
        border-color: #5C4F46;
        -webkit-box-shadow: 0 0 0 0.25rem rgba(245, 161, 34, 0.25);
        box-shadow: 0 0 0 0.25rem rgba(245, 161, 34, 0.25);
    }

.dropdown-item.active, .dropdown-item:active {
    background-color: #F5A122;
}

.nav-pills {
    padding: 0.2rem;
    border-radius: 5px;
}

.bs-tooltip-bottom.show {
    display: none !important;
}

/*table*/
.table-dark {
    --bs-table-bg: #646464 !important;
}

.bootstrap-table .card-views {
    padding: 0.5rem;
}

.bootstrap-table .card-view {
    margin-bottom: 0.5rem;
}

    .bootstrap-table .card-view .card-view-title {
        color: #5C4F46;
        margin-right: 1rem;
    }

    .bootstrap-table .card-view .card-view-value {
        float: right;
    }

/*hide bootstrap-table toolbar button*/
.fixed-table-loading, .fixed-table-toolbar {
    display: none;
}

/*accordion active background*/
.accordion-button:not(.collapsed) {
    background-color: #eafbff;
}

.accordion-button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*accordion active arrow down icon*/
.accordion-button:not(.collapsed)::after {
    background-image: url("../img/icon/icon_down.svg");
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/*dialog style*/
.modal .modal-header {
    background-color: #866A5F;
}

    .modal .modal-header.sub_bgc {
        background-color: #CF6C48;
    }

.modal .modal-title {
    color: #fff;
}

.modal .btn-close {
    color: #fff;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
}

.form-switch .form-check-input {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    margin-right: 1.5rem;
}

.form-check-input:checked {
    background-color: #F5A122;
    border-color: #F5A122;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-check-input:focus {
    border-color: rgba(245, 161, 34, 0.5);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(245, 161, 34, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(245, 161, 34, 0.25);
}

.bootstrap-table .fixed-table-pagination {
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 576px) {
    .bootstrap-table .fixed-table-pagination {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.bootstrap-table .fixed-table-pagination .pagination-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bootstrap-table .fixed-table-pagination .pagination {
    margin: 0;
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: #fdf7ea;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #CF6C48;
    border: none;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: #CF6C48;
        color: #fff;
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff9ed;
    border-color: #cecece;
}

.select2-container .select2-selection--multiple {
    min-height: 38px;
}

.select2-container .select2-search--inline .select2-search__field {
    height: 20px;
}

/*=========reset other plugin end=========*/
/*=========layout start=========*/
/*text color setting*/
.t_main {
    color: #5C4F46;
}

.t_sub {
    color: #866A5F;
}

.t_third {
    color: #CF6C48;
}

.t_ye {
    color: #F5A122;
}

.t_og {
    color: #F5A122;
}

.t_rd {
    color: #c62f18;
}

.t_rd_brick {
    color: #CF6C48;
}

.t_bu {
    color: #567C8E;
}

.t_lightbu {
    color: #EBDFD9;
}

.t_gn {
    color: #4C969E;
}

.t_gy {
    color: #606060;
}

.t_wh {
    color: #fff;
}

.clr_save {
    color: #5C4F46;
}

.clr_check {
    color: #F5A122;
}

.clr_cancel {
    color: #717171;
}

.clr_remind {
    color: #5C4F46;
}

.bgc_main {
    background-color: #5C4F46;
}

.bgc_third {
    background-color: #EBDFD9;
}

.bgc_save {
    background-color: #5C4F46;
}

.bgc_check {
    background-color: #F5A122;
}

.bgc_cancel {
    background-color: #717171;
}

.bgc_remind {
    background-color: #5C4F46;
}

.bgc_lightyellow {
    background-color: #FCF8F2;
}

.bgc_white {
    background-color: #fff;
}

.bgc_lightgray {
    background-color: #e1e1e1;
}

.bgc_rd_brick {
    background-color: #CF6C48 !important;
}

/* 資料狀態 列管中mange/解除列管unmanage/部分減帳part_reduct/全部減帳all_reduct */
.state_manage {
    color: #c62f18;
    font-weight: 900;
}

.state_unmanage {
    color: #567C8E;
    font-weight: 900;
}

.state_part_reduct {
    color: #F5A122;
    font-weight: 900;
}

.state_all_reduct {
    color: #866A5F;
    font-weight: 900;
}

/*custom settings*/
body, html {
    width: 100%;
    font-family: "Hind Siliguri", "Noto Sans TC", sans-serif;
    margin: 0;
    padding: 0;
    color: #585858;
    letter-spacing: 1px;
    counter-reset: num_mark img_num;
}

.form-select {
    color: #585858;
}

@media (max-width: 576px) {
    .form-select.max-width-150 {
        max-width: 110px;
    }
}

.form-control {
    color: #585858;
}

input::-webkit-input-placeholder {
    color: #aaa !important;
}

input::-moz-placeholder {
    color: #aaa !important;
}

input:-ms-input-placeholder {
    color: #aaa !important;
}

input::-ms-input-placeholder {
    color: #aaa !important;
}

input::placeholder {
    color: #aaa !important;
}

img {
    max-width: 100%;
    height: auto;
}

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

a {
    text-decoration: none !important;
    color: #F5A122;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

    a:hover {
        color: #F5A122;
    }

/* font-size setting */
h1, h2, h3, h4, h5, h6, p {
    margin: 0px;
    padding: 0px;
    color: #606060;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.6rem;
}

h5 {
    font-size: 1.4rem;
}

h6 {
    font-size: 1.2rem;
}

p {
    font-size: 1rem;
}

/* 無障礙外框標示設定鍵盤focus on */
/*gap setting*/
.m_0 {
    margin: 0;
}

.p_0 {
    padding: 0;
}

.mb_0 {
    margin-bottom: 0 !important;
}

.w-sm {
    max-width: 400px;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.h_100 {
    height: 100%;
}

.radius-50 {
    border-radius: 50px;
}

.max-width-85 {
    max-width: 85px;
}

.max-width-100 {
    max-width: 100px;
}

.max-width-150 {
    max-width: 150px;
}

.fw-600 {
    font-weight: 600;
}

.font-sm {
    font-size: 0.9rem;
}

.min-width-auto {
    min-width: auto !important;
}

.min-width-100 {
    min-width: 100px !important;
}

/*align setting*/
.no_wrap {
    white-space: nowrap;
}

.wrap {
    white-space: wrap !important;
}

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

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

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

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.flex_center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex_start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}

.flex_between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex_end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

@media (max-width: 576px) {
    .flex-wrap-sm {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media (max-width: 992px) {
    .flex-wrap-md {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.cols-align-center .col-lg-4, .cols-align-center .col-lg-3, .cols-align-center .col-lg-0, .cols-align-center .col-lg-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 576px) {
    .col-sm-6 {
        width: 50%;
    }
}

.vertial_center {
    vertical-align: middle !important;
}

/*RWD setting*/
.pc_hide {
    display: none;
}

@media (max-width: 992px) {
    .pc_hide {
        display: block;
    }
}

@media (max-width: 1550px) {
    .pc_lg_hide {
        display: none;
    }
}

@media (max-width: 576px) {
    .desktop_show {
        display: none;
    }
}

@media (max-width: 992px) {
    .tablet_hide {
        display: none;
    }
}

.tablet_show {
    display: none;
}

@media (max-width: 992px) {
    .tablet_show {
        display: block;
    }
}

@media (max-width: 992px) {
    .tablet_show.d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

.mobile_show {
    display: none;
}

@media (max-width: 576px) {
    .mobile_show {
        display: block;
    }
}

@media (max-width: 576px) {
    .mobile_hide {
        display: none;
    }
}

.mobile-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

/*RWD setting end*/
/*table*/
.thead_sticky {
    position: sticky !important;
    top: 0 !important;
}

.tb_pagination_sticky .fixed-table-pagination {
    position: sticky;
    bottom: 0;
    background-color: #f6f6f6;
}

.tb_pagination_sticky .page-link {
    background-color: transparent;
}

.table_main_bgc {
    --bs-table-bg: #5C4F46;
    --bs-table-color: #fff;
}

.table_sub_bgc {
    background-color: #fff3e2;
    color: #666;
}

.table_third_bgc {
    background-color: #866A5F;
    color: #fff;
}

.table_gray_bgc {
    background-color: #bbbbbb;
    color: #727272;
}

table i {
    font-size: 2rem;
}

table td {
    vertical-align: middle;
}

/*border-line*/
.line {
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    margin: 1rem 0;
}

.vertical_line {
    width: 1px;
    height: 100%;
    background: #bbbbbb;
    margin-right: 1.5rem;
}

.bg_blur {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.bg_gray {
    background-color: #F6F6F6;
}

.bg_lightbrown {
    background-color: #EBDFD9;
}

.bg_dotted {
    border-radius: 5px;
    border: 2px dotted #bbbbbb;
}

.data_content_bg {
    background-color: #f6f6f6;
    border-radius: 10px;
    padding: 0.5rem 0;
}

.fuild {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-width: 100vw;
}

.none-scroll {
    overflow: hidden;
    max-height: 0;
}

.pc_scroll {
    max-height: 450px;
}

@media (max-width: 576px) {
    .pc_scroll {
        max-height: 600px;
    }
}

.bor_bottom {
    border-bottom: 1px solid #d8d8d8;
}

.bor_radius_1 {
    border-radius: 15px;
}

.bor_brown {
    border: 1px solid rgba(134, 106, 95, 0.4784313725);
    border-radius: 5px;
}

.mark_data::before {
    content: "";
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #F5A122;
    border-radius: 100%;
    margin-right: 0.2rem;
}

/* ----------------------- share content layout */
/*page loading*/
#loading {
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    color: #fff;
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    -webkit-box-shadow: 2px 2px 10px;
    box-shadow: 2px 2px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    #loading .v-progress-circular {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

/*需覆蓋底層資料可使用 no data / data loading */
.cover_wrapper {
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
    min-height: 100px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
}

    .cover_wrapper .no_data_content {
        z-index: 2;
    }

.nav-link {
    color: #717171;
}

    .nav-link:focus, .nav-link:hover {
        color: #866A5F;
    }

.badge {
    width: 20px;
    height: 20px;
    background-color: #5C4F46;
    padding: 4px 0 0 0;
    margin: 0.1rem 0.3rem 0 0;
    border-radius: 100%;
    font-size: 14px;
    -webkit-transform: translate(-50%, -20%) !important;
    transform: translate(-50%, -20%) !important;
}

/* ----------------------- header */
header {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    top: 0;
    background-color: #866A5F;
    z-index: 5;
}

    header nav li.nav-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 0.5rem;
    }

    header .logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        header .logo .img_outer {
            width: 30px;
            height: 30px;
        }

        header .logo h1 {
            color: #fff;
            font-size: 1.5rem;
        }

@media (max-width: 576px) {
    header .logo h1 {
        font-size: 1rem;
    }
}

header .dropdown-toggle:hover {
    color: #fff;
}

header .navbar {
    padding: 0;
}

/* ----------------------- footer */
footer {
    background: #aaa;
    width: 100%;
    height: auto;
    z-index: 1;
}

/*------------------------ tableRwd*/
/* 表格 RWD 設定*/
@media (max-width: 576px) {
    .table td {
        padding: 0.5px;
    }

    .tableRwd {
        display: block;
        width: auto;
        overflow-x: auto;
    }

        .tableRwd tr {
            display: inline-block;
            width: 100%;
            margin-bottom: 0.5rem;
            padding: 0.5rem;
            border: 1px solid #5C4F46;
            border-radius: 5px;
        }

            .tableRwd tr:nth-child(odd) {
                background-color: #ab9b90;
            }

            .tableRwd tr:hover {
                -webkit-transition: 0.3s;
                transition: 0.3s;
                background-color: rgba(238, 238, 238, 0.8);
            }

        .tableRwd thead {
            display: none;
        }

        .tableRwd tbody {
            display: block;
            width: 100%;
        }

        .tableRwd td {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: top;
            -ms-flex-align: top;
            align-items: top;
            text-align: left;
            position: relative;
            border: none;
        }

            .tableRwd td::before {
                min-width: 130px;
                content: attr(data-label);
                font-weight: bold;
                float: left;
                color: #3f3630;
            }
}
/* ----------------------- content */
.modal label {
    min-width: 95px;
}

@media (max-width: 576px) {
    .modal-body {
        padding: 1rem 0.5rem;
    }
}

.data-item {
    color: #666;
}

    .data-item .t_main {
        font-weight: 700;
    }

.page_show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #717171;
}

@media (max-width: 576px) {
    .page_show {
        margin-bottom: 1rem;
    }
}

.page_show select {
    min-width: 55px;
    margin-right: 0.5rem;
}

.page_show .text-nowrap {
    min-width: auto !important;
}

.img_outer {
    position: relative;
}

    .img_outer .img_icon {
        margin-left: 0.5rem;
        color: #c62f18;
    }

    .img_outer.scene {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }

        .img_outer.scene img {
            width: 100%;
            height: 100%;
            max-height: 130px;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .img_outer.scene .img_info {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: #EBDFD9;
            padding: 0.2rem;
        }

            .img_outer.scene .img_info p {
                color: #5C4F46;
            }

.bg1 {
    background-image: url("../images/login-bg.jpg");
}

.opacity_block {
    width: 100%;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    -webkit-box-shadow: 0 0px 0px 5px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0px 0px 5px rgba(255, 255, 255, 0.2);
}

.function_item {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 5px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1rem;
    opacity: 0.8;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

    .function_item:hover {
        opacity: 1;
        -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }

    .function_item .icon img {
        max-width: 110px;
    }

/*tab+行動裝置功能*/
.function_outer {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #eee;
    padding: 0.5rem 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width: 992px) {
    .function_outer {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .function_outer {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0.5rem;
    }
}

.function_outer.bg_lightbrown {
    background-color: #EBDFD9;
}

.main_tab {
    background-color: #fff;
    border-radius: 50px;
}

    .main_tab .nav-item button {
        border-radius: 50px;
    }

@media (max-width: 576px) {
    .main_tab .nav-item button {
        padding: 0.3rem 0.8rem;
    }
}

@media (max-width: 576px) {
    .main_tab {
        width: 100%;
    }
}

.main_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 75vh;
}

    .main_wrapper .search_bar {
        min-height: calc(100vh - 107.5px);
        background-color: #FCF8F2;
        max-width: 250px;
        min-width: 250px;
        padding: 1rem;
    }

        .main_wrapper .search_bar.tablet {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            max-width: none;
            z-index: 99;
        }

@media (max-width: 576px) {
    .main_wrapper .search_bar.tablet {
        height: auto;
        min-height: calc(100% + 55px);
    }
}

.main_wrapper .search_bar.tablet .action_btn_group {
    margin-top: 2rem;
}

@media (max-width: 992px) {
    .main_wrapper.sub {
        display: block !important;
    }
}

.main_wrapper .search_content {
    padding: 1rem;
}

@media (max-width: 576px) {
    .main_wrapper .search_content {
        padding: 1rem 0.3rem;
    }
}

.main_wrapper .search_content .tag {
    text-align: center;
}

.main_wrapper .search_content .action_btn_group {
    min-height: 35px;
}

@media (max-width: 992px) {
    .main_wrapper .search_content .action_btn_group button, .main_wrapper .search_content .action_btn_group a.btn_solid {
        margin-bottom: 0.5rem;
    }
}

.main_wrapper .search_content .bor_bottom:nth-child(2) {
    border-top: 1px dotted #ddd;
}

.search_content.add_patrol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 80vh;
}

    .search_content.add_patrol .container {
        background-color: #FCF8F2;
    }

    .search_content.add_patrol .data-item {
        max-width: 85px;
        min-width: 85px;
    }

    .search_content.add_patrol .img_outer {
        background-color: #eee;
        max-width: 100px;
    }

.tablet_filter {
    background-color: #FCF8F2;
    padding: 1rem;
    display: none;
}

@media (max-width: 576px) {
    .tablet_filter {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .tablet_filter .search_bar {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .tablet_filter .search_bar {
        display: none !important;
    }
}

/*行動裝置顯示功能*/
.mobile_device {
    background-color: #EBDFD9;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* 手機篩選按鈕 */
    /* 手機功能按鈕  */
}

@media (max-width: 992px) {
    .mobile_device {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media (max-width: 576px) {
    .mobile_device {
        margin-top: 0.5rem;
        width: 100%;
        text-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.mobile_device button, .mobile_device a {
    font-size: 2.5rem;
    color: #866A5F;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 1rem;
}

    .mobile_device button.svg_icon, .mobile_device a.svg_icon {
        margin-right: 0.8rem;
    }

    .mobile_device button:last-child, .mobile_device a:last-child {
        margin-right: 0;
    }

@media (max-width: 576px) {
    .mobile_device button, .mobile_device a {
        font-size: 2.5rem;
    }
}

.mobile_device button img, .mobile_device a img {
    width: 2rem;
}

@media (max-width: 576px) {
    .mobile_device button img, .mobile_device a img {
        width: 2.2rem;
    }
}

.mobile_device .filter_btn {
    display: none;
}

.mobile_device .mb_function_btn {
    display: none;
}

@media (max-width: 576px) {
    .mobile_device .mb_function_btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

/*Modal內 上傳圖片區塊*/
.upload_outer {
    height: 100%;
    background-color: #eee;
    /*min-height: 150px;*/
    padding: 0.5rem;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .upload_outer button {
        color: #5C4F46;
    }

    .upload_outer .upload_btn_outer {
        position: relative;
        text-align: center;
        width: 100%;
        margin: 0.5rem 0;
        color: #866A5F;
    }

        .upload_outer .upload_btn_outer span {
            cursor: pointer;
        }

        .upload_outer .upload_btn_outer .file-input {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            opacity: 0;
        }

    .upload_outer .upload_img img {
        padding: 1rem 0.5rem;
        display: none;
        width: 100%;
        max-width: 500px;
    }

.modal-dialog {
    padding: 0 0.5rem;
}

    .modal-dialog .text-nowrap {
        min-width: 90px;
        text-align: right;
    }

        .modal-dialog .text-nowrap.min-width-auto {
            min-width: auto;
        }

@media (max-width: 576px) {
    .modal-dialog .text-nowrap {
        margin-right: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .modal-dialog .bg_gray.p-3 {
        padding: 1rem 0.3rem !important;
    }
}

.modal-dialog .action_btn_group .btn_solid {
    margin-bottom: 0.5rem;
}

.modal-dialog .t-sm {
    min-width: 70px;
}

.paint_outer {
    padding: 1rem 0;
    display: inline-block;
    width: 120px;
    background-color: #eee;
    border-radius: 10px;
}

    .paint_outer button {
        border-radius: 10px;
    }

.paint_wrapper {
    border-radius: 10px;
    background-color: #eee;
    width: 100%;
    height: 450px;
}

.border_block {
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 1rem;
}

@media (max-width: 992px) {
    .view .data_info {
        padding: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .view .data_info {
        padding: 1rem !important;
    }
}

.basic_wood_photos {
    max-height: 600px;
}

.wood_group_title {
    margin-top: 1rem;
}

    .wood_group_title h5 {
        color: #5C4F46;
    }

/* QRcode標籤產製 */
.serial_no_outer .serial_no_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .serial_no_outer .serial_no_inner .btn_solid {
        min-width: auto;
        border-radius: 5px;
        font-size: 1.3rem;
        padding: 0.2rem 0.5rem;
    }

.serial_no_outer .serial_no_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 576px) {
    .serial_no_outer .serial_no_item span.mx-2 {
        margin: 0 0.3rem;
    }
}

@media (max-width: 576px) {
    .serial_no_outer .serial_no_item .form-select {
        min-width: auto;
    }
}

@media (max-width: 576px) {
    .serial_no_outer .serial_no_item .form-select.max-width-85 {
        max-width: 70px;
    }
}

/* 盤點/查核人員 QRcode */
.code_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* 贓木資料Qrcode */
.qr_item {
    border-radius: 5px;
    border: 1px solid #bbb;
    padding: 0.5rem;
    text-align: center;
}

    .qr_item .btn_icon {
        font-size: 1.5rem;
    }

.popover-qr {
    max-width: 120px;
}

/*=========layout end=========*/
/*=========componment start=========*/
/*卷軸樣式修改 mixin*/
/*button*/
button {
    border: none;
    color: #fff;
    background: none;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    cursor: pointer;
}

a.btn_solid {
    border-radius: 50px;
    display: inline-block;
    text-align: center;
}

    a.btn_solid:hover {
        color: #fff;
    }

a.btn_bor {
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    margin-left: 0.5rem;
}

.btn_lg {
    width: 100%;
}

/*按鈕樣式 外框*/
.btn_bor {
    padding: 0.2rem 1rem;
    border: 1px solid #5C4F46;
    color: #5C4F46;
    white-space: nowrap;
    min-width: 80px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.btn.btn-outline-wood {
    border-color: #F5A122;
    color: #F5A122;
}

    .btn.btn-outline-wood:hover {
        border-color: #F5A122;
        color: #F5A122;
    }

.btn-check:checked + .btn {
    border-color: #F5A122;
    background-color: #F5A122;
    color: #fff;
}

@media (max-width: 576px) {
    .btn_bor {
        padding: 0.2rem 1rem;
        min-width: auto;
    }
}

.btn_bor:hover {
    background-color: #6a5b51;
    color: white;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.btn_bor.default {
    color: #d4d4d4;
    border: 1px solid #afafaf;
    cursor: auto;
}

    .btn_bor.default:hover {
        background-color: rgba(170, 170, 170, 0);
        color: #d4d4d4;
    }

.btn_bor.clr_main, .btn_bor.btn_edit {
    border-color: #CF6C48;
    color: #CF6C48;
}

    .btn_bor.clr_main:hover, .btn_bor.btn_edit:hover {
        background-color: #CF6C48;
        color: #fff;
    }

.btn_bor.clr_sub {
    border-color: #866A5F;
    color: #866A5F;
}

    .btn_bor.clr_sub:hover {
        color: #fff;
    }

.btn_bor.clr_third, .btn_bor.btn_upload {
    border-color: #567C8E;
    color: #567C8E;
}

    .btn_bor.clr_third:hover, .btn_bor.btn_upload:hover {
        background-color: #567C8E;
        color: #fff;
    }

.btn_bor.btn_add {
    border-color: #F5A122;
    color: #F5A122;
}

    .btn_bor.btn_add:hover {
        background-color: #F5A122;
        color: #fff;
    }

.btn_bor.btn_add2 {
    border-color: #5C4F46;
}

.btn_bor.btn_alert {
    border-color: #CF6C48;
    color: #CF6C48;
}

    .btn_bor.btn_alert:hover {
        background-color: #f9eeea;
    }

.btn_bor.btn_collapse {
    border-color: #a2a2a2;
    color: #959595;
    min-width: 80px;
}

@media (max-width: 992px) {
    .btn_bor.btn_collapse {
        font-size: 0.9rem;
    }
}

.btn_bor.btn_collapse:hover {
    background-color: transparent;
    border-color: #626262;
    color: #626262;
}

.btn_bor.btn_collapse.close {
    border-color: #626262;
    color: #626262;
}

/*按鈕樣式 實心*/
.btn_solid {
    padding: 0.2rem 1rem;
    background-color: #5C4F46;
    color: #fff;
    white-space: nowrap;
    min-width: 90px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

@media (max-width: 576px) {
    .btn_solid {
        min-width: 80px;
    }
}

.btn_solid:hover {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: #3f3630;
}

.btn_solid.default {
    color: #d4d4d4;
    background: #afafaf;
}

    .btn_solid.default:hover {
        color: #d4d4d4;
        cursor: auto;
    }

.btn_solid.clr_main, .btn_solid.btn_bor.btn_edit {
    background-color: #866A5F;
}

.btn_solid.btn_check {
    background-color: #5C4F46;
}

    .btn_solid.btn_check:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #79685c;
    }

.btn_solid.btn_check2 {
    background-color: #866A5F;
}

    .btn_solid.btn_check2:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #a08378;
    }

.btn_solid.btn_check3 {
    background-color: #CF6C48;
}

    .btn_solid.btn_check3:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #da8c70;
    }

.btn_solid.btn_save, .btn_solid.btn_add {
    background-color: #F5A122;
}

    .btn_solid.btn_save:hover, .btn_solid.btn_add:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #da870a;
    }

.btn_solid.btn_print {
    background-color: #866A5F;
}

    .btn_solid.btn_print:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #68524a;
    }

.btn_solid.btn_upload {
    background-color: #567C8E;
}

    .btn_solid.btn_upload:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #39525e;
    }

.btn_solid.btn_cancel {
    background-color: #bbbbbb;
}

    .btn_solid.btn_cancel:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #959595;
    }

.btn_solid.btn_clean {
    background-color: #959595;
}

    .btn_solid.btn_clean:hover {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        background-color: #626262;
    }

/*按鈕樣式 有icon*/
.btn_icon {
    font-size: 1.8rem;
    display: inline-block;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 0.5rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

    .btn_icon:hover {
        color: #F5A122;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

.remind_icon {
    margin: 1rem 0 2rem 0;
}

    .remind_icon i {
        font-size: 5rem;
    }

table .btn_icon {
    font-size: 1rem;
}

.tag, .print_option {
    background-color: #EBDFD9;
    color: #866A5F;
    border-radius: 50px;
    cursor: default;
}

@media (max-width: 576px) {
    .tag, .print_option {
        margin-bottom: 0.5rem;
    }
}

.tag:hover, .print_option:hover {
    background-color: #EBDFD9;
}

.tag.checked, .print_option.checked {
    background-color: #866A5F;
    color: #fff;
}

.tag.error, .print_option.error {
    background: #f6bdb4;
    color: #c62f18;
}

.print_option {
    cursor: pointer;
}

    .print_option.checked {
        background-color: #866A5F;
        color: #fff;
    }

.btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.875rem;
}

/*上傳檔案區塊按鈕*/
button.file {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
}

    button.file .upload_input {
        cursor: pointer;
        position: absolute;
        font-size: 50px;
        opacity: 0;
        right: 0;
        top: 0;
    }

/*文字btn*/
.text_primary {
    color: #5C4F46;
}

    .text_primary:hover {
        color: #3f3630;
    }

.text_brown {
    color: #567C8E;
}

    .text_brown:hover {
        color: #43606e;
    }

/*提示文字*/
.tip_outer {
    position: relative;
}

    .tip_outer .tip_content {
        display: none;
        padding: 1rem;
        background: #666;
        position: absolute;
        bottom: 120%;
        left: 0;
    }

/*選單漢堡設定*/
#nav-icon {
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

    #nav-icon span {
        display: block;
        position: absolute;
        height: 6px;
        width: 100%;
        background: #F5A122;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }

        #nav-icon span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            transform-origin: left center;
        }

        #nav-icon span:nth-child(2) {
            top: 15px;
            -webkit-transform-origin: left center;
            transform-origin: left center;
        }

        #nav-icon span:nth-child(3) {
            top: 30px;
            -webkit-transform-origin: left center;
            transform-origin: left center;
        }

    #nav-icon.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -3px;
        left: 8px;
    }

    #nav-icon.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    #nav-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 25px;
        left: 8px;
    }

/*移到頂端button*/
.btn-back-outer {
    position: fixed;
    bottom: 10%;
    right: 15px;
    display: inline-block;
    padding: 1rem;
    z-index: 99;
}

    .btn-back-outer #btn-back-to-top, .btn-back-outer #btn-back-to-down {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-transition: 0.3s;
        transition: 0.3s;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .btn-back-outer #btn-back-to-top:hover, .btn-back-outer #btn-back-to-down:hover {
            background-color: rgba(0, 0, 0, 0.4);
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

        .btn-back-outer #btn-back-to-top i, .btn-back-outer #btn-back-to-down i {
            color: #fff;
        }

    .btn-back-outer #btn-back-to-top {
        position: relative;
        min-width: 50px;
        height: 50px;
        border-radius: 50px;
        display: none;
    }

    .btn-back-outer #btn-back-to-down {
        position: relative;
        min-width: 50px;
        height: 50px;
        border-radius: 50px;
        display: block;
    }

.mobile_function {
    position: relative;
    min-width: 50px;
    height: 50px;
    border-radius: 50px;
    display: none;
    color: #fff;
    background-color: #5C4F46;
}

@media (max-width: 576px) {
    .mobile_function {
        display: block;
    }
}

.accordion_title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    white-space: nowrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

    .accordion_title .fa-chevron-down {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

        .accordion_title .fa-chevron-down.collaspe_show {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: 0.1s;
            transition: 0.1s;
        }

    .accordion_title .fa-chevron-up {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

        .accordion_title .fa-chevron-up.collaspe_show {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
            -webkit-transition: 0.1s;
            transition: 0.1s;
        }

@media (max-width: 576px) {
    .accordion_title h4 {
        font-size: 1.4rem;
    }
}

.accordion_title .time {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #666;
}

.slide_show {
    margin-top: 0.5rem;
    -webkit-animation: slide_down 3s forwards;
    animation: slide_down 3s forwards;
}

.slide_hide {
    -webkit-animation: slide_up 3s forwards;
    animation: slide_up 3s forwards;
}

@-webkit-keyframes slide_down {
    from {
        max-height: 0px;
    }

    to {
        max-height: 3500px;
    }
}

@keyframes slide_down {
    from {
        max-height: 0px;
    }

    to {
        max-height: 3500px;
    }
}

@-webkit-keyframes slide_up {
    0% {
        max-height: 3500px;
    }

    100% {
        max-height: 0px;
    }
}

@keyframes slide_up {
    0% {
        max-height: 3500px;
    }

    100% {
        max-height: 0px;
    }
}

.accordion_content {
    max-height: none;
}

    .accordion_content.close {
        max-height: 0;
        overflow: hidden;
    }

.input-icon .form-control {
    border-right: 1px solid #fff;
}

.input-icon .input-group-text {
    border: none;
    border-top: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    background-color: #fff;
}

    .input-icon .input-group-text i {
        color: #aaa;
        font-size: 1.1rem;
    }

/*=========componment end=========*/
/*=========pages start=========*/
/*text color setting*/
/* ----------------------- $$ page */
@media (max-width: 992px) {
    .login {
        padding: 0.5rem 1rem;
    }
}

.login .opacity_block {
    max-width: 1200px;
}

.login .login-block {
    max-width: 600px;
}

.login_form {
    padding: 2rem;
}

@media (max-width: 576px) {
    .login_form h2 {
        font-size: 1.5rem;
    }
}

.logo_outer {
    padding: 0.5rem 1rem;
    border-bottom: 1.5px solid #9c9c9c;
}

@media (max-width: 576px) {
    .logo {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.logo .img_outer {
    margin-right: 0.5rem;
    width: 30px;
    height: 30px;
}

.required::before {
    content: "*";
    color: #c62f18;
    font-size: 1.3rem;
}

.confirm_outer {
    border: 1px solid #aaa;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    max-width: 100px;
    min-height: 38px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 0.5rem;
    background-color: #EBDFD9;
}

@media (max-width: 576px) {
    .login_modal .function_item .icon img {
        width: 80%;
    }
}

@media (max-width: 576px) {
    .login_modal h1, .login_modal h4 {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .login_modal .row.p-5 {
        padding: 0.5rem 0 !important;
    }
}

.login_modal .col-sm-6 {
    max-width: 1200px;
    position: relative;
}

@media (max-width: 576px) {
    .login_modal .col-sm-6 {
        width: 50%;
        padding: 0.2rem;
    }
}

.login_modal .modal_outer {
    padding: 5rem;
}

@media (max-width: 992px) {
    .login_modal .modal_outer {
        padding: 3rem;
    }
}

@media (max-width: 576px) {
    .login_modal .modal_outer {
        padding: 1rem;
    }
}

@media (max-width: 992px) {
    .login_modal .modal_outer .p-5 {
        padding: 1rem !important;
    }
}

@media (max-width: 576px) {
    .login_modal .modal_outer .p-5 {
        padding: 0.5rem 0 !important;
    }
}

@media (max-width: 576px) {
    .login_modal .modal_outer .flex_mobile {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .login_modal .modal_outer .flex_mobile .btn-group {
        width: 100%;
    }
}

.bg-point {
    background-color: rgba(55, 55, 55, 0.568627451);
    width: 15px;
    height: 15px;
    border-radius: 100%;
}

    .bg-point:nth-child(1) {
        position: absolute;
        top: 15px;
        bottom: 0;
        left: 15px;
    }

    .bg-point:nth-child(2) {
        position: absolute;
        top: 15px;
        right: 15px;
        bottom: 0;
    }

    .bg-point:nth-child(3) {
        position: absolute;
        bottom: 15px;
        left: 15px;
    }

    .bg-point:nth-child(4) {
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

.remind_info .info_box {
    text-align: center;
    border-radius: 5px;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    background-color: #eee;
    width: 100%;
}

.remind_info .inside .info_box {
    background-color: #FFEBD3;
}

.remind_info .outside .info_box {
    background-color: #F8EAE4;
}

.upload_box {
    background-color: #ededed;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 1.5rem 1rem 0;
}

@media (max-width: 576px) {
    .upload_box {
        margin-right: 0.5rem;
    }
}

.upload_box .action_btn_group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .upload_box .action_btn_group a.btn, .upload_box .action_btn_group button.btn {
        background-color: #eee;
        width: 100%;
        border-radius: 0;
        font-size: 0.9rem;
    }

        .upload_box .action_btn_group a.btn.delete, .upload_box .action_btn_group button.btn.delete {
            color: #666;
            background-color: #ccc;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

            .upload_box .action_btn_group a.btn.delete:hover, .upload_box .action_btn_group button.btn.delete:hover {
                -webkit-transition: 0.3s;
                transition: 0.3s;
                background-color: #aeaeae;
                color: #444;
            }

        .upload_box .action_btn_group a.btn.download, .upload_box .action_btn_group button.btn.download {
            background-color: #a08378;
            color: #fff;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

            .upload_box .action_btn_group a.btn.download:hover, .upload_box .action_btn_group button.btn.download:hover {
                -webkit-transition: 0.3s;
                transition: 0.3s;
                background-color: #68524a;
            }

.upload_box .file_name {
    font-size: 0.8rem;
    padding: 0 1rem;
    min-width: 190px;
    max-width: 190px;
    min-height: 65px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .upload_box .file_name {
        min-width: 150px;
        max-width: 150px;
        padding: 0 0.5rem;
    }
}

.upload_box .upload_inner {
    text-align: center;
}

    .upload_box .upload_inner .icon.file_pdf::before {
        content: "﬐";
        font-family: "tabler-icons";
        display: inline-block;
        font-size: 50px;
        height: 30px;
        color: #c62f18;
    }

    .upload_box .upload_inner .icon.file_odf::before {
        content: "";
        background-image: url("../images/icon/file-type-odf.svg");
        width: 45px;
        height: 45px;
        display: inline-block;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    .upload_box .upload_inner .icon.file_word::before {
        content: "﬋";
        font-family: "tabler-icons";
        display: inline-block;
        font-size: 50px;
        height: 30px;
        color: #567C8E;
    }

    .upload_box .upload_inner .icon.file_custom::before {
        content: "\eaa2";
        font-family: "tabler-icons";
        display: inline-block;
        font-size: 50px;
        height: 30px;
        color: #717171;
    }

    .upload_box .upload_inner .icon.file_image::before {
        content: "\eb0a";
        font-family: "tabler-icons";
        display: inline-block;
        font-size: 50px;
        height: 30px;
        color: #5C4F46;
    }

    .upload_box .upload_inner .icon.file_loading::before {
        content: "\eca3";
        font-family: "tabler-icons";
        display: inline-block;
        font-size: 50px;
        height: 30px;
        color: #5C4F46;
        -webkit-animation: loading 2s infinite ease-in-out;
        animation: loading 2s infinite ease-in-out;
    }

/*檔案上傳中的loading動畫*/
@-webkit-keyframes loading {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loading {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .dt-column-title {
        width: 500px !important;
    }

    .dt_nowrap .dt-column-title {
        width: auto !important;
    }

    .dtr-details li {
        padding: 0.5rem !important;
    }

    .dtr-details {
        width: 100% !important;
    }

    table .dtr-data {
        float: right !important;
    }

    table .child li {
        text-align: left !important;
    }
}
/*=========pages end=========*/