#content .container {
    max-width: 90%;
}


/*頁簽*/
#content .container-tab {
    background: rgba(235, 235, 235, 1);
}
    #content .container-tab ul.nav {
        border-bottom: none;
    }
        #content .container-tab ul.nav li a {
            margin-bottom: 0;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            background: transparent;
            border: none;
            border-radius: 0;
        }
            #content .container-tab ul.nav li a:hover {
                color: rgba(255, 255, 255, 1);
                background: rgb(128, 128, 128);
            }

/*路徑*/
#content .path {
    padding: 1rem 0;
}
    #content .path ul.nav li+li:before {
        content: ">";
        display: inline;
        padding: 0 0.5rem;
    }
    #content .path ul.nav li a,
    #content .path ul.nav li span {
        font-size: 0.9rem;
        text-decoration: none;
        color: rgba(0, 0, 0, 1);
    }
        #content .path ul.nav li a:hover,
        #content .path ul.nav li span {
            opacity: 0.8;
        }

/*標題*/
#content .title h2 {
    font-size: calc(1rem + 0.5vw);
    font-weight: bold;
}
#content .title h2:before {
    content: "";
    display: inline-block;
    margin-right: 0.5rem;
    position: relative;
    top: 0.5rem;
    height: 2rem;
    width: 2rem;
}

/*主內容*/
#content .main {
    padding: 1rem 0;
}

    #content .main ul.nav-pills {
        flex-wrap: nowrap;
    }
        #content .main ul.nav-pills li a {
            border: 1px solid;
            border-radius: 0;
        }
        #content .main ul.nav-pills li:not(:nth-last-child(1)) a {
            border-right: none;
        }
        #content .main ul.nav-pills li a:hover,
        #content .main ul.nav-pills li a.active {
            background: rgba(255, 255, 255, 1);
        }
        #content .main ul.nav-pills li a.active {
            border-bottom: 1px solid transparent;
        }

    #content .main .tab-content {
        padding: 1rem 0;
    }
        #content .main .tab-content p {
            text-indent: 2rem;
        }
        #content .main .tab-content p.remark {
            text-align: center;
            text-indent: 0;
        }

        #content .main .tab-content table {
            margin: auto;
            width: auto;
            text-align: center;
            vertical-align: middle;
            border-collapse: collapse!important;

        }
            #content .main .tab-content table ul {
                margin: 0;
            }

        #content .main .tab-content img {
            display: block;
            margin: auto;
            max-width: 100%;
        }

        #content .main .tab-content ul p {
            text-indent: 0;
        }
        

    
/*DataTable*/
    div.dataTables_wrapper table th:focus,
    div.dataTables_wrapper table td:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
        z-index: 1;
    }

    div.dataTables_wrapper table.dataTable.no-footer {
         border: none; 
    }
    div.dataTables_wrapper table.dataTable td.dataTables_empty {
        font-size: 1rem!important;
        font-weight: bold;
        text-align: center;
    }

    /*資訊、分頁*/
    div.dataTables_wrapper .row:nth-last-child(1) > div {
        padding: 0!important;
        width: 100%;
    }
        /*資訊*/
        div.dataTables_wrapper .row:nth-last-child(1) > div:nth-child(1) {
            /*margin-top: 40px;*/
            font-size: 0.9rem;
            text-align: center;
        }
        div.dataTables_wrapper div.dataTables_info {
            float: none;
        }
        /*分頁*/
        div.dataTables_wrapper .row:nth-last-child(1) > div:nth-child(2) {
            /*margin-top: -85px;*/
        }
        div.dataTables_wrapper div.dataTables_paginate {
            display: table;
            margin: 1rem auto 0;
            padding: 0;
            width: 100%;
            text-align: center;
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination {
            display: flex;
            flex-wrap: wrap;
            justify-content: center!important;
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item {
            margin: 0 0.125rem;
            padding: 0;
            border: none;
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item:hover {
            background: transparent;
            border: none;
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item .page-link {
            color: rgba(127, 127, 127, 1);
            border-color: rgba(127, 127, 127, 1);
            border-radius: 0.25rem;
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover {
            color: rgba(255, 255, 255, 1);
            background-color: rgba(127, 127, 127, 1);
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.disabled .page-link {
            cursor: not-allowed;
            pointer-events: all;
        }
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.disabled .page-link:hover {
        background-color: rgba(127, 127, 127, 0.2);
    }


/*日期*/
#content .date .form-floating {
    width: 100%;
}
#content .date .form-control {
    padding-left: calc(46px + 0.75rem);
}
#content .date .form-control[readonly] {
    background-color: transparent;
}
#content .date label {
    left: 46px;
}
#content .date .input-group-addon {
    position: absolute;
    padding: 1rem 0.75rem;
    width: 46px;
    background: var(--maincolor);
    border: 1px solid var(--maincolor);
    cursor: pointer;
}
    #content .date .input-group-addon svg {
        fill: #fff;
    }

            
/*datepicker*/
    .ui-datepicker-trigger {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        color: transparent;
        background: transparent;
        border: 0;
    }

    .ui-widget.ui-widget-content {
        left: calc(5% + 0.5rem)!important;
        padding: 0;
        width: calc(90% - 1rem);
        min-width: 300px;
        border: 1px solid var(--maincolor);
        border-radius: 0;
    }
    .ui-datepicker .ui-datepicker-header {
        background: var(--lightcolor);
        border: 1px solid var(--lightcolor);
        border-radius: 0;
    }
    .ui-datepicker select.ui-datepicker-month, 
    .ui-datepicker select.ui-datepicker-year {
        width: 35%;
    }
    .ui-datepicker .ui-datepicker-title select {
        margin: 0 0.25rem;
        padding: 0.25rem;
        font-size: 0.9em;
        background: rgba(255, 255, 255, 1);
        border: 1px solid var(--lightcolor);
    }
    .ui-datepicker .ui-state-hover:not(.ui-state-highlight) {
        background: var(--lightcolor)!important;
        border: 1px solid var(--lightcolor)!important;
        border-radius: 0!important;
        cursor: pointer;
    }
    .ui-datepicker .ui-datepicker-prev {
        top: 2px;
        left: 2px;
    }
    .ui-datepicker .ui-datepicker-next {
        top: 2px;
        right: 2px;
    }

    .ui-datepicker table {
        margin: 0 0.5rem 0.5rem;
        width: calc( 100% - 1rem);
    }
    .ui-state-active, 
    .ui-widget-content .ui-state-active, 
    .ui-widget-header .ui-state-active, 
    a.ui-button:active, 
    .ui-button:active, 
    .ui-button.ui-state-active:hover {
        color: rgba(255, 255, 255, 1);
        background: var(--maincolor);
        border: 1px solid var(--maincolor);
    }
    
    .ui-datepicker .ui-datepicker-buttonpane button {
        margin: 0.5em 1em;
        padding: 0.35em 0.75em;
        font-weight: bold;
        color: #444;
        background: var(--lightcolor);
        border: 1px solid var(--lightcolor);
        opacity: 1;
    }
    .ui-datepicker .ui-datepicker-buttonpane button:hover {
        background: var(--hovercolor)!important;
        border: 1px solid var(--hovercolor)!important;
    }

    
/*timepicker*/
    .ui-datepicker .ui-timepicker-div .ui-widget-header {
        background: var(--lightcolor);
        border: 1px solid var(--lightcolor);
        border-radius: 0;
    }

    .ui-datepicker .ui-timepicker-div button,
    .ui-datepicker .ui-datepicker-buttonpane button {
        font-weight: bold;
        color: #444;
        background: var(--lightcolor);
        border: 1px solid var(--lightcolor);
        opacity: 1;
    }
    .ui-datepicker .ui-timepicker-div button:hover,
    .ui-datepicker .ui-datepicker-buttonpane button:hover {
        background: var(--hovercolor)!important;
        border: 1px solid var(--hovercolor)!important;
    }

    .ui-datepicker .ui-timepicker-div dl dt {
        padding: 0.25rem 0 0 1.25rem;
    }
        .ui-datepicker .ui-timepicker-div dl dt.ui_tpicker_time_label {
            padding: 0.25rem 0 0 0.625rem;
        }
        .ui-datepicker .ui-timepicker-div dl dd.ui_tpicker_time input  {
            text-align: right;
            border: 0;
        }
    .ui-datepicker .ui-timepicker-div dl dd:not(.ui_tpicker_unit_hide) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1rem 0;
    }
        .ui-datepicker .ui-timepicker-div dl dd .ui-slider-access {
            margin: 0 1rem!important;
        }
            .ui-datepicker .ui-timepicker-div dl dd .ui-slider-access button {
                width: 3rem;
                height: 2rem;
            }
    .ui-datepicker .ui-timepicker-div .ui-widget.ui-widget-content {
        left: 1rem!important;
        width: calc(100% - 9rem)!important;
    }
    .ui-datepicker .ui-datepicker-buttonpane button {
        margin: 0.5em 1em;
        padding: 0.35em 0.75em;
    }
    
    .ui-datepicker .ui-timepicker-div dl dt {
        padding: 0.25rem 1rem;
    }
    .ui-datepicker .ui-timepicker-div dl dd:not(.ui_tpicker_unit_hide) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1rem 2rem;
    }
    .ui-datepicker .ui-timepicker-div dl dd:not(.ui_tpicker_unit_hide) div {
        width: 100%;
    }
    .ui-datepicker .ui-timepicker-div dl dd:not(.ui_tpicker_unit_hide) div select {
        width: 100%;
        height: 2rem;
        background: rgba(255, 255, 255, 1);
        border: 1px solid var(--maincolor);
        border-radius: 0;
    }



/*validated*/
    /*驗證成功不顯示*/
    .form-control.is-valid, 
    .was-validated .form-control:valid,
    .form-select.is-valid:not([multiple]):not([size]), 
    .form-select.is-valid:not([multiple])[size="1"], 
    .was-validated .form-select:valid:not([multiple]):not([size]), 
    .was-validated .form-select:valid:not([multiple])[size="1"] {
        padding-right: 0.75rem;
        background-image: none;
    }
    .form-select.is-valid:not([multiple]):not([size]), 
    .form-select.is-valid:not([multiple])[size="1"], 
    .was-validated .form-select:valid:not([multiple]):not([size]), 
    .was-validated .form-select:valid:not([multiple])[size="1"] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
    .form-check-input.is-valid ~ 
    .form-check-label, 
    .was-validated .form-check-input:valid ~ .form-check-label {
        color: inherit;
    }

    /*日期時間*/
    .was-validated .form-control.date.invalid,
    .was-validated .form-control.time.invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + .75rem);
        background-image:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
    .was-validated .form-control.date.valid:focus,
    .was-validated .form-control.time.valid:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    }
    .was-validated .form-control.date.invalid:focus,
    .was-validated .form-control.time.invalid:focus {
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    /*驗證失敗顯示*/
    .invalid-feedback {
        margin: 0.5rem 0.75rem 0;
        font-size: 0.975rem;
        font-weight: bold;
    }
/*Knowledge*/
#qa h3{ font-weight: bold; margin: 3em 0 0.8em  0;}
.QAmain{background: #d0e5e6; margin: 1em 0;}
.QAmain h4{     color: #024a5a;    font-weight: bold;    font-size: 1em;    padding: 18px 10px 10px 17px;    margin: 0;}
.QAmain .QAU{ background: #FFF;   border: 4px solid #d0e5e6;     padding: 1em 2em;}
.QAU table{ margin: 1em auto 2em auto;}
.QAU table th {    background: #d0e6df;}

.QAU table th, .QAU table td {
    padding: 0.25rem;
    border: 1px solid #62aaad;
}
.QAU caption{    text-align: center;    font-weight: bold;    color: #000;    width: 100%;    display: table-caption;}


@media (max-width: 992px) {
    #content .container {
        max-width: 95%;
    }

    /*datepicker*/
    .ui-widget.ui-widget-content {
        left: calc(2.5% + 0.5rem)!important;
        width: calc(95% - 1rem);
    }
}
@media (max-width: 768px) {
    #content .container {
        max-width: 100%; 
    }

    /*datepicker*/
    .ui-widget.ui-widget-content {
        left: calc(0% + 0.5rem)!important;
        width: calc(100% - 1rem);
    }

}