/* Set padding to keep content from hitting the edges */
.body-content {
    padding: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

body {
    font-family: arial, "Microsoft JhengHei", "微軟正黑體";
}

.top20 {
    margin-top: 20px;
}

.top50 {
    margin-top: 50px;
}

h1 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #6c757d;
    border-left: #ffc456 5px solid;
    padding-left: 5px;
}

h2 {
    font-size: 1.2em;
    font-weight: bold;
    color: #6c757d;
    padding-left: 5px;
}

h3 {
    font-size: 1em;
    font-weight: bold;
    color: #6c757d;
    padding-left: 15px;
}

.input-group-text {
    font-size: 0.9rem;
}

.form-control {
    font-size: 0.9rem;
}

.form-select {
    font-size: 0.9rem;
}

.text-ellipsis {
    white-space: nowrap; /* 禁止換行 */
    overflow: hidden; /* 隱藏超出部分 */
    text-overflow: ellipsis; /* 顯示省略號 */
}

/*Layout Start*/
.top-area {
    background: #d74040;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
    color: #fff;
    clear: both;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.2rem 1rem;
    border-top: #ffc456 3px solid;
}

    .top-area p {
        font-size: 0.8rem;
        opacity: 0.6;
        margin-bottom: 0rem;
        margin-top: 0.1rem;
    }

        .top-area p a {
            color: #ffffff;
        }

            .top-area p a:hover {
                color: #ffc456;
                text-decoration: none;
            }

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4rem;
    padding-top: 0.65rem;
}

.navbar-nav .nav-item {
    margin-right: 10px;
}

.logobar .container-xl {
    justify-content: flex-start;
}

.ntulogo {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    height: 60px;
}

.titleeng {
    font-size: 0.8rem;
    opacity: 0.5;
    padding-left: 5px;
}

.bg-light {
    background-color: antiquewhite;
}

.menubar {
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%);
    margin-top: 0.5rem;
}

@media (max-width: 991.98px) {
    .ntulogo {
        padding-right: 5px;
    }

    .logobar .container-xl {
        justify-content: center;
    }
}

.footer-list * {
    color: #808080;
    list-style-type: none;
}

.footer-list-title {
    color: #808080;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-list-items {
    font-size: 0.9em;
    padding-left: 0px;
}

    .footer-list-items li {
        margin-bottom: 15px;
    }

footer .row {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}

.news-text {
    color: #4b90c5;
    margin-bottom: 0px;
    padding: 0.5rem 0.1rem;
}

    .news-text a {
        color: #4b90c5;
        text-decoration: none;
    }

        .news-text a:hover {
            color: #1a5f94;
            text-decoration: none;
        }

    .news-text li {
        padding-bottom: 0.6rem;
    }

.Copyright {
    font-size: 0.8em;
    color: #2e627d;
}
/*Layout End*/

/*navbar*/
.navbar-custom .navbar-brand {
    color: #fff;
}

    .navbar-custom .navbar-brand:hover,
    .navbar-custom .navbar-brand:focus {
        color: #fff;
    }

.navbar-custom .navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
}

    .navbar-custom .navbar-nav .nav-link:hover,
    .navbar-custom .navbar-nav .nav-link:focus {
        color: #FFFFFF;
        font-weight: bold;
        content: "";
        display: block;
        background-color: #d74040;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
    }

    .navbar-custom .navbar-nav .nav-link.disabled {
        color: #d74040;
    }

    .navbar-custom .navbar-nav .show > .nav-link,
    .navbar-custom .navbar-nav .active > .nav-link,
    .navbar-custom .navbar-nav .nav-link.show,
    .navbar-custom .navbar-nav .nav-link.active {
        color: #ffc107;
        font-weight: 600;
    }

.navbar-custom .navbar-toggler {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-custom .navbar-text {
    color: #fff;
}

    .navbar-custom .navbar-text a {
        color: #fff;
    }

        .navbar-custom .navbar-text a:hover, .navbar-prussian .navbar-text a:focus {
            color: #fff;
        }
/*navbar end*/





/****** Override Bootstrap *******/
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

    .nav-link:hover, .nav-link:focus {
        text-decoration: none;
    }

    .nav-link.disabled {
        color: #6c757d;
        pointer-events: none;
        cursor: default;
    }

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

    .nav-tabs .nav-link {
        color: #6c757d;
        background-color: rgb(240, 240, 240);
        margin-bottom: -1px;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

        .nav-tabs .nav-link:hover,
        .nav-tabs .nav-link:focus {
            border-color: #e9ecef #e9ecef #dee2e6;
        }

        .nav-tabs .nav-link.disabled {
            color: #6c757d;
            background-color: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #fff;
            background-color: #ffc456;
            border-color: #ffc456 #ffc456 #fff;
        }

.input-group-text {
    color: #495057;
}

/* btn-warning*/
.btn-warning {
    color: #fff;
    background-color: #1ebb7f;
    border-color: #1ebb7f;
}

    .btn-warning:hover {
        color: #fff;
        background-color: #02a969;
        border-color: #018753;
    }

    .btn-warning:focus,
    .btn-warning.focus {
        color: #fff;
        background-color: #02a969;
        border-color: #018753;
        box-shadow: 0 0 0 0.2rem rgba(0, 72, 44, 0.5);
    }

    .btn-warning.disabled,
    .btn-warning:disabled {
        color: #fff;
        background-color: #1ebb7f;
        border-color: #1ebb7f;
    }

    .btn-warning:not(:disabled):not(.disabled):active,
    .btn-warning:not(:disabled):not(.disabled).active,
    .show > .btn-warning.dropdown-toggle {
        color: #fff;
        background-color: #018753;
        border-color: #00663f;
    }

        .btn-warning:not(:disabled):not(.disabled):active:focus,
        .btn-warning:not(:disabled):not(.disabled).active:focus,
        .show > .btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgb(0, 72, 44, 0.5);
        }

/* btn-warning end*/

/* btn-danger*/
.btn-danger {
    color: #fff;
    background-color: #de5c5c;
    border-color: #de5c5c;
}

    .btn-danger:hover {
        color: #fff;
        background-color: #D94C4F;
        border-color: #c63e3e;
    }

    .btn-danger:focus,
    .btn-danger.focus {
        color: #fff;
        background-color: #cc4e4e;
        border-color: #c63e3e;
        box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
    }

    .btn-danger.disabled,
    .btn-danger:disabled {
        color: #fff;
        background-color: #de5c5c;
        border-color: #de5c5c;
    }

    .btn-danger:not(:disabled):not(.disabled):active,
    .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
        color: #fff;
        background-color: #c63e3e;
        border-color: #b21f2d;
    }

        .btn-danger:not(:disabled):not(.disabled):active:focus,
        .btn-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgb(142, 46, 56, 0.5);
        }
/* btn-danger end*/
/****** End of Override Bootstrap *******/

.table th,
.table td {
    vertical-align: middle;
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 1px;
}

.table-striped tbody tr:nth-of-type(odd) {
    --bs-table-striped-bg: rgb(253,248,238,0.5);
}

.table-hover tbody tr:hover {
    --bs-table-hover-bg: #fdf6d680;
}

/*table custom-table-width*/
.custom-table-width {
    overflow-x: auto;
    margin-right: 15px;
    margin-left: 15px;
    padding-right: 0;
    padding-left: 0;
}

    .custom-table-width .table {
        table-layout: fixed;
        min-width: 1024px;
        font-size: 0.9rem;
    }

    .custom-table-width th {
        color: #6c757d;
        --bs-table-bg: rgb(245, 245, 245);
        /*text-align: center;*/
    }

    .custom-table-width caption {
        font-size: 1.2rem;
        font-weight: bold;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        color: #2e627d;
        /*text-align: left;*/
        caption-side: top;
    }

    .custom-table-width .btn {
        font-size: 0.9rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 0rem;
    }
/*custom-table-width end*/

/*table custom-table-vertical*/
.custom-table-vertical {
    overflow-x: auto;
    margin-right: 15px;
    margin-left: 15px;
    padding-right: 0;
    padding-left: 0;
}

    .custom-table-vertical .table {
        table-layout: fixed;
        /*min-width: 1024px;*/
        font-size: 0.9rem;
    }

    .custom-table-vertical th {
        color: #6c757d;
        /*--bs-table-bg: rgb(245, 245, 245);*/
        text-align: right;
    }

    .custom-table-vertical caption {
        font-size: 1.2rem;
        font-weight: bold;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        color: #2e627d;
        /*text-align: left;*/
        caption-side: top;
    }

    .custom-table-vertical .btn {
        font-size: 0.9rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 0rem;
    }
/*custom-table-vertical  end*/

/*modal*/
.modal-content {
    border-width: 0px;
}

.modal-header {
    background-color: #77b3e2;
    color: #fff;
}

.modal-body {
    background-color: #f8f9fa;
}

    .modal-body label {
        font-family: arial, "Microsoft JhengHei", "微軟正黑體";
        text-align: left;
    }

    .modal-body input {
        font-family: arial, "Microsoft JhengHei", "微軟正黑體";
    }

    .modal-body select {
        font-family: arial, "Microsoft JhengHei", "微軟正黑體";
    }

.modal-footer {
    background-color: rgb(253, 248, 238, 1);
    color: #fff;
}
/*modal end*/

/* color prussian*/
.bg-prussian {
    background-color: #e76262 !important;
}

a.bg-prussian:hover, a.bg-prussian:focus,
button.bg-prussian:hover,
button.bg-prussian:focus {
    background-color: #e48939 !important;
}

.navbar-prussian .navbar-brand {
    color: #fff;
}

    .navbar-prussian .navbar-brand:hover, .navbar-prussian .navbar-brand:focus {
        color: #fff;
    }

.navbar-prussian .navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
}

    .navbar-prussian .navbar-nav .nav-link:hover, .navbar-prussian .navbar-nav .nav-link:focus {
        color: #FFFFFF;
        font-weight: bold;
        content: "";
        display: block;
        background-color: #d74040;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
    }

    .navbar-prussian .navbar-nav .nav-link.disabled {
        color: #d74040;
    }

    .navbar-prussian .navbar-nav .show > .nav-link,
    .navbar-prussian .navbar-nav .active > .nav-link,
    .navbar-prussian .navbar-nav .nav-link.show,
    .navbar-prussian .navbar-nav .nav-link.active {
        color: #ffc107;
        font-weight: 600;
    }

.navbar-prussian .navbar-toggler {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-prussian .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-prussian .navbar-text {
    color: #fff;
}

    .navbar-prussian .navbar-text a {
        color: #fff;
    }

        .navbar-prussian .navbar-text a:hover, .navbar-prussian .navbar-text a:focus {
            color: #fff;
        }
/* color prussian end*/

/* color dark prussian*/
.bg-darkprussian {
    background-color: #5A91A3 !important;
}

.btn-darkprussian {
    color: #fff;
    background-color: #d74040;
    border-color: #d74040;
}

    .btn-darkprussian:hover {
        color: #fff;
        background-color: rgb(75, 144, 197);
        border-color: #d74040;
    }

    .btn-darkprussian:focus, .btn-darkprussian.focus {
        color: #fff;
        background-color: #d74040;
        border-color: #d74040;
        box-shadow: 0 0 0 0.2rem rgba(75, 144, 197, 0.5);
    }

    .btn-darkprussian.disabled, .btn-darkprussian:disabled {
        color: #fff;
        background-color: #d74040;
        border-color: #d74040;
    }

    .btn-darkprussian:not(:disabled):not(.disabled):active, .btn-darkprussian:not(:disabled):not(.disabled).active,
    .show > .btn-darkprussian.dropdown-toggle {
        color: #fff;
        background-color: #d74040;
        border-color: #d74040;
    }

        .btn-darkprussian:not(:disabled):not(.disabled):active:focus, .btn-darkprussian:not(:disabled):not(.disabled).active:focus,
        .show > .btn-darkprussian.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(75, 144, 197, 0.5);
        }
/* color dark  prussian end*/

/*color client*/
.bg-client {
    background-color: #f4a460 !important;
}

a.bg-client:hover,
a.bg-client:focus,
button.bg-client:hover,
button.bg-client:focus {
    background-color: #d77a40 !important;
}

.btn-client {
    color: #fff;
    background-color: #d77a40;
    border-color: #d77a40;
}

    .btn-client:hover {
        color: #fff;
        background-color: #bf6735;
        border-color: #aa582c;
    }

    .btn-client:focus,
    .btn-client.focus {
        color: #fff;
        background-color: #bf6735;
        border-color: #aa582c;
        box-shadow: 0 0 0 0.2rem rgb(170, 88, 44, 0.5);
    }

    .btn-client.disabled,
    .btn-client:disabled {
        color: #fff;
        background-color: #d77a40;
        border-color: #d77a40;
    }

    .btn-client:not(:disabled):not(.disabled):active,
    .btn-client:not(:disabled):not(.disabled).active,
    .show > .btn-client.dropdown-toggle {
        color: #fff;
        background-color: #aa582c;
        border-color: #934922;
    }

        .btn-client:not(:disabled):not(.disabled):active:focus,
        .btn-client:not(:disabled):not(.disabled).active:focus,
        .show > .btn-client.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgb(170, 88, 44, 0.5);
        }

.top-area-client {
    background: #d77a40;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
    color: #fff;
    clear: both;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.2rem 1rem;
    border-top: #ffc456 3px solid;
}

    .top-area-client p {
        font-size: 0.8rem;
        opacity: 0.6;
        margin-bottom: 0rem;
        margin-top: 0.1rem;
    }

        .top-area-client p a {
            color: #ffffff;
        }

            .top-area-client p a:hover {
                color: #ffc456;
                text-decoration: none;
            }
/*color client end*/

/*color staff*/
.bg-staff {
    background-color: #77b3e2 !important;
}

a.bg-staff:hover,
a.bg-staff:focus,
button.bg-staff:hover,
button.bg-staff:focus {
    background-color: #4b90c5 !important;
}

.btn-staff {
    color: #fff;
    background-color: #4b90c5;
    border-color: #4b90c5;
}

    .btn-staff:hover {
        color: #fff;
        background-color: #3b78a4;
        border-color: #33678d;
    }

    .btn-staff:focus,
    .btn-staff.focus {
        color: #fff;
        background-color: #3b78a4;
        border-color: #33678d;
        box-shadow: 0 0 0 0.2rem rgb(51, 103, 141, 0.5);
    }

    .btn-staff.disabled,
    .btn-staff:disabled {
        color: #fff;
        background-color: #4b90c5;
        border-color: #4b90c5;
    }

    .btn-staff:not(:disabled):not(.disabled):active,
    .btn-staff:not(:disabled):not(.disabled).active,
    .show > .btn-staff.dropdown-toggle {
        color: #fff;
        background-color: #33678d;
        border-color: #2a5677;
    }

        .btn-staff:not(:disabled):not(.disabled):active:focus,
        .btn-staff:not(:disabled):not(.disabled).active:focus,
        .show > .btn-staff.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgb(51, 103, 141, 0.5);
        }

.top-area-staff {
    background: #4b90c5;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
    color: #fff;
    clear: both;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.2rem 1rem;
    border-top: #ffc456 3px solid;
}

    .top-area-staff p {
        font-size: 0.8rem;
        opacity: 0.6;
        margin-bottom: 0rem;
        margin-top: 0.1rem;
    }

        .top-area-staff p a {
            color: #ffffff;
        }

            .top-area-staff p a:hover {
                color: #ffc456;
                text-decoration: none;
            }

/*.modal-content {
    border-width: 0px;
}

.modal-header {
    background-color: #77b3e2;
    color: #fff;
}

.modal-body {
    background-color: #f8f9fa;
}

    .modal-body label {
        font-family: arial, "Microsoft JhengHei", "微軟正黑體";
        text-align: left;
    }

    .modal-body input {
        font-family: arial, "Microsoft JhengHei", "微軟正黑體";
    }

    .modal-body select {
        font-family: arial, "Microsoft JhengHei", "微軟正黑體";
    }

.modal-footer {
    background-color: #77b3e2;
    color: #fff;
}*/
/*color staff end*/