:root {
    /* kpmg標準色 */
    --kpmgblue-color: #00338d;
    --cobaltblue-color: #1e49e2;
    --pacificblue-color: #00B8F5;
    --lightblue-color: #ACFFFF;
    --darkblue-color: #0C233C;
    --pink-color: #FD349C;
    --puple-color: #7213EA;
    --grey-1: rgb(221, 221, 221);
    --grey-2: rgb(102, 102, 102);

    /* 滑鼠移過顏色 */
    --kpmgblue-color-hove: #0c419d;
    --cobaltblue-color-hove: #2647BA;
    --pacificblue-color-hove: #0DA0D1;
    --lightblue-color-hove: #8AE3E3;
    --darkblue-color-hove: #000000;
    --pink-color-hove: #D32981;
    --puple-color-hove: #552098;

    /*--紅黃綠--------*/
    --red-color: #ED2124;
    --yellow-color: #F1C44D;
    --green-color: #269924;
    /*--紅黃綠 暗色--------*/
    --red-color-dark: #970a0c;
    --yellow-color-dark: #E0B239;
    --green-color-dark: #178915;

    /* 漸層色 */
    --gradients1: linear-gradient(to right, var(--cobaltblue-color), var(--puple-color));
    --gradients2: linear-gradient(to right, var(--pacificblue-color), var(--lightblue-color));
    --gradients2-1: linear-gradient(to right, #0f6cbd, #3c45ab);
    --gradients3: linear-gradient(to right, #ED2124, #C60D0F);


    /* 框框灰色背景 */
    --f-box-bg: #ffffffb6;

    /* 選單背景色 */
    --navbr: var(--gradients1);
}

.bg-kpmg-blue {
    background-image: var(--gradients1);
}

.dropdown-menu {
    z-index: 10000;
    border-radius: 0.6rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.247) !important;
}


body {
    background-color: #b9b2cb;

}

.kpmg-bg {
    background: linear-gradient(49deg, #ffffff 0%, #ffffff4f 90%);
    height: 100%;
    /* background: inherit; */
}


/* modal--------------------------- */
.modal-w-100 {
    max-width: 95% !important;
}

.breadcrumb {
    padding: 0.4rem 0.65rem;
    background-color: #00000014;
}


body:has(.index-bgimg) {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/cc.png");
}

body:has(.no-bgimg) {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: initial;
}

main.container-fluid {
    padding-top: 10px;
}

main.container-fluid:has(.bg) {
    padding-top: 0px;
}

/* body:has(.index-bgimg) {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/aa.png");
} */

/* .index-bgimg{
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/aa.png");
} */

body .kpmh-bgimg h3 {
    margin-top: 18px;
}

body {
    font-size: .89rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    white-space:nowrap;
    margin-bottom: .5rem;
    font-weight: 650;
    text-shadow: 0px 1px #ffffff73;
    color: #1e1059ec;
    /* background: -webkit-linear-gradient(bottom, #0003ab00 0, #0003ab5e 26%, #0003ab 50%, #0003ab 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */

}

h1,
.h1 {
    font-size: 42px;
    line-height: 1.3;

}


h2,
.h2 {
    /* background: -webkit-linear-gradient(#c000b0, #2d058b); */
    /* background: -webkit-linear-gradient(-90deg, #00338d 0%, #600798 80%, #c57ef1 100%); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    text-shadow: initial;
    font-size: 38px;
    line-height: 1.3;
    color: var(--kpmgblue-color);
    text-shadow: 1px 1px #ffffff2e;
}

.h3,
h3 {

    font-size: 24px;

}

.h4,
h4 {
    font-size: 22px;
    line-height: 1.3;
}

h5,
.h5 {

    font-size: 20px;
    line-height: 1.3;
}

h6,
.h6 {

    font-size: 18px;
    line-height: 1.3;
}

p {

    font-size: 16px;
    line-height: 1.5;
    text-shadow: 1px 1px #ffffff25;
}

.color-purple {
    color: var(--puple-color);
}

.color-b1 {
    color: var(--kpmgblue-color) !important;
}



.text-light {
    text-shadow: 1px -1px #000000a6 !important;
}

.footer {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: inherit;
    text-shadow: 1px 1px #ffffff18;
}

.footer p {
    margin: 0;
    font-size: 13px;
}


a {
    color: rgb(0, 94, 184);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}


@media (min-width: 1200px) {

    /* .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 900px;
    } */

}

.btn[disabled] {
    cursor: not-allowed !important;
}

/* loading 頁面 */
.loading {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100000;
    color: white;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    background-color: #175bb4c5 !important;
    backdrop-filter: saturate(100%) blur(5px);
    -webkit-backdrop-filter: saturate(100%)
}

.loading .box {
    text-align: center;
    width: 120px;
    height: 200px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.rounded-xl {
    border-radius: 0.8rem !important;
}

/* ------------------- NAV ------------------------ */
nav.navbar-kpmg .nav-item {
    padding: 0 15px;
}

@media (min-width: 768px) {
    nav.navbar-kpmg .nav-item {
        padding: 0;
    }
}

nav.navbar-kpmg .dropdown-toggle::after {
    display: none !important;
}

nav.navbar-kpmg .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.864);
    text-shadow: -1px -1px #00000073;
}

nav.navbar-kpmg .dropdown-menu p,
nav.navbar-kpmg .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.864);
    text-shadow: -1px -1px #0000006c;
}

@media (min-width: 768px) {

    nav.navbar-kpmg .dropdown-menu p,
    nav.navbar-kpmg .dropdown-menu .dropdown-item {
        color: #0000009f;
        text-shadow: 1px 1px #ffffff27;
    }
}

nav.navbar-kpmg .dropdown-user .dropdown-menu {
    width: 100%;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

}



nav.navbar-kpmg .navbar-collapse .navbar-collapse {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: #ffffff69;
}

@media (min-width: 768px) {
    nav.navbar-kpmg .dropdown-user .dropdown-menu {
        width: inherit;
        position: absolute;
        background-color: #e6e6e6 !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    nav.navbar-kpmg .navbar-collapse .navbar-collapse {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}


/* nav.navbar-kpmg .dropdown-user .nav-link.dropdown-toggle img.avatar, */
nav.navbar-kpmg .dropdown-user .nav-link.dropdown-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: large;
    background: var(--gradients1);
    color: #ffffff;
    width: 36px;
    /* 你想要的按鈕大小 */
    height: 36px;
    border-radius: 50%;
    /* 正圓形 */
    object-fit: cover;
    /* 保持比例，超出部分裁切 */
    border: 0px solid #fff;
    /* 可選，外框 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* 可選，陰影 */
    margin-left: auto;
    margin-right: 0;

}

nav.navbar-kpmg .dropdown-user .nav-link.dropdown-toggle img.avatar {
    display: none;
}

nav.navbar-kpmg .navbar-nav {
    font-size: medium;
}

nav.navbar-kpmg .navbar-nav li.nav-item a:hover {
    text-shadow: 1px 1px 15px #ffffffa2;
}

nav.navbar-kpmg .navbar-nav li.nav-item.active a {
    text-shadow: 1px 1px 10px #ffffffa2;
}



.accordion .collapse-end-border {
    border-bottom: 1px solid #c1c1c1 !important;
    width: 100%;
    display: block;
    padding: 0;
}


.navbar>.navbar-brand {
    padding-top: .78rem;
    padding-bottom: .76rem;
    font-size: 1.3rem;
    background-image: url(../img/kpmg_logo_w.png);
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: 0.8em center;
    padding-left: 5.3em;
    color: white;
}

.sidebarMenu-ul li a {
    padding: 5px 0px 0px 10px;
}


.sidebar .nav-link {
    font-weight: 500;
    color: #00000086;
      font-size: small;
}

.sidebar .nav-link.active {
    color: #050e55;
    position: relative;
    text-shadow: 0px 1px #ffffffda;
  
}

.sidebar .nav-link.active::before {
    font-family: "Font Awesome 6 Free";
    content: "\f054";
    font-weight: 900;
    margin-right: 6px;
    position: absolute;
    font-size: 10px;
    left: -3px;
    top: 8px;
    animation: chevron-move 0.6s infinite ease-in-out;
    text-shadow: 0px 1px #ffffff29;
}

@keyframes chevron-move {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}



.navbar-toggler {
    padding: 15px;
}

/*----------------kpmg標準色 背景 按鈕--------------------*/

.oc-80 {
    opacity: 0.8;
}

.oc-70 {
    opacity: 0.7;
}

.oc-60 {
    opacity: 0.6;
}

.oc-40 {
    opacity: 0.4;
}

a {
    color: var(--kpmgblue-color);
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}




.table {
    white-space: nowrap;
}

.table tr th {
    background-color: white;
    opacity: 0.7;
}

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


.table.table-hover tbody tr {
    cursor: pointer !important;
}



.supertext {
    font-size: 2.25rem;
}

/* -------checkbox 樣式 ----------*/
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--kpmgblue-color);
    background-color: var(--kpmgblue-color);
}

/* ------- 調整checkbox 右邊間距  ----------*/
.custom-control.p-0 .custom-control-label::before,
.custom-control.p-0 .custom-control-label::after {
    left: initial;
}

.custom-control.p-0 {
    width: 1rem;
    height: 1rem;
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: rgb(46 46 46 / 50%);
    border-color: rgba(175, 175, 175, 0.5);
}


/* -------checkbox 按鈕化樣式 ----------*/
/* --checkbox 警告樣式 -----*/



.form-check-group.is-invalid>.invalid-feedback {
    display: block;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border: 1px solid #dc3545 !important;
}




.form-control:disabled,
.form-control[readonly] {
    background-color: #0000001c !important;
    opacity: 0.8;
    cursor: not-allowed;
    border: 0px solid #ffffff !important;
    /* 導致列印的form-control全部消失 */    
    /* backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px); */
}


.kpmg.form-check-inline {
    margin-right: initial;
}

.form-check-group.is-invalid .kpmg .form-check-label {
    border: 1px solid #dc3545;
    background-color: #ffffff;
    color: #dc3545;
}

.form-check.kpmg {
    padding-left: 0px !important;
    display: inline-block;
}

.form-check.kpmg input[type="radio"],
.form-check.kpmg input[type="checkbox"] {
    display: none;
}

.form-check.kpmg input[type="radio"]~label,
.form-check.kpmg input[type="checkbox"]~label {
    cursor: pointer;
    padding: 3px 8px;
    margin-bottom: 8px;
    border-radius: 20px;
    border: 1px solid #ced4da;
    height: auto;
    text-align: center;
    color: #676767;
    background-color: #ffffff;
    transition: all 0.18s;
    -webkit-transition: all 0.18s;
    font-size: 16px;
    text-shadow: 0px -1px #ffffff43;
    box-shadow: 4px 4px 8px #00000023, -4px -4px 8px #ffffff;
}

.form-check.kpmg input[type="radio"]:disabled~label,
.form-check.kpmg input[type="checkbox"]:disabled~label {
    opacity: 0.5;
    pointer-events: none;
    opacity: 0.5;
    /* 可以添加這個屬性來顯示按鈕的禁用狀態 */
    cursor: not-allowed;
    /* 可以添加這個屬性來改變滑鼠指針的樣式 */
}


.form-check.kpmg input[type="radio"]:checked~label,
.form-check.kpmg input[type="checkbox"]:checked~label {
    background-color: #57239f !important;
    color: rgb(255, 255, 255);
    border: 1px solid var(--kpmgblue-color);
    box-shadow: inset 2px 2px 4px #00000047, inset -2px -2px 4px #e8e8e85b;
}



.form-check.kpmg input[type="radio"]:checked:disabled~label,
.form-check.kpmg input[type="checkbox"]:checked:disabled~label {
    pointer-events: none;
    cursor: not-allowed;
    /* 可以添加這個屬性來改變滑鼠指針的樣式 */
    opacity: 1;
    border: 1px solid #ced4da;
    color: #ffffff;
}



/* 紅色按鈕 －－－－－－－－－*/
.form-check.kpmg.danger input[type="radio"]~label,
.form-check.kpmg.danger input[type="checkbox"]~label {
    border: 1px solid #b8000f;
    background-color: #ffffff;
    color: #b8000f;
}

.form-check.kpmg.danger input[type="radio"]~label:hover,
.form-check.kpmg.danger input[type="checkbox"]~label:hover {
    background-color: #fcdde0;
    border: 1px solid #fcdde0;
}

.form-check.kpmg.danger input[type="radio"]:checked~label,
.form-check.kpmg.danger input[type="checkbox"]:checked~label {
    border: 1px solid #b8000f;
    background: var(--gradients3);
    color: rgb(255, 255, 255);
}

/* 綠色按鈕 －－－－－－－－－*/
.form-check.kpmg.success input[type="radio"]~label,
.form-check.kpmg.success input[type="checkbox"]~label {
    border: 1px solid #0fb800;
    background-color: #ffffff;
    color: #0fb800;
}

.form-check.kpmg.success input[type="radio"]~label:hover,
.form-check.kpmg.success input[type="checkbox"]~label:hover {
    background-color: #b0e7ab;
    border: 1px solid #b0e7ab;
}

.form-check.kpmg.success input[type="radio"]:checked~label,
.form-check.kpmg.success input[type="checkbox"]:checked~label {
    border: 1px solid #0fb800;
    background: var(--green-color);
    color: rgb(255, 255, 255);
}

.form-check.kpmg input[type="radio"]~label:before,
.form-check.kpmg input[type="checkbox"]~label:before {
    font-family: "Font Awesome 6 Free";
    content: "\f111";
    display: inline-block;
    vertical-align: revert;
    font-size: 16px;
}

.form-check.kpmg input[type="checkbox"]:checked~label:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f058";
    display: inline-block;
    vertical-align: revert;
}

.form-check.kpmg input[type="radio"]:checked~label:before {
    content: "\f192";
}

/* -------超純 checkbox 按鈕化樣式 ----------*/
.form-check.check-btn {
    padding: 0;
}

.form-check.check-btn input[type="radio"],
.form-check.check-btn input[type="checkbox"] {
    display: none;
}

.form-check.check-btn input[type="radio"]~label,
.form-check.check-btn input[type="checkbox"]~label {
    cursor: pointer;
    border-radius: 4px;
    height: auto;
    color: var(--kpmgblue-color);
    transition: all 0.18s;
    -webkit-transition: all 0.18s;
    font-size: large;

}

.form-check.check-btn input[type="radio"]~label:before,
.form-check.check-btn input[type="checkbox"]~label:before {
    font-family: "Font Awesome 6 Free";
    content: "\f111";
    display: inline-block;
    vertical-align: revert;
}

.form-check.check-btn input[type="checkbox"]:checked~label:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f058";
    display: inline-block;
    vertical-align: revert;
}





/* --check 小尺寸-----*/
.form-check.kpmg.sm input[type="radio"]~label,
.form-check.kpmg.sm input[type="checkbox"]~label {
    padding: 2px 6px;
    font-size: 14px;
}

.form-check.kpmg.sm input[type="radio"]~label:before,
.form-check.kpmg.sm input[type="checkbox"]~label:before {
    font-size: 14px;
}

.form-check-label.none {
    pointer-events: none;
    opacity: 0.4;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

.form-check.kpmg:has(.none) {
    cursor: not-allowed !important;
}






/* --------stepper-wrapper 步驟----------- */

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 17px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 17px;
    left: 50%;
    z-index: 2;
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
}

.stepper-item.active {
    font-weight: bold;
    color: var(--kpmgblue-color);
}

.stepper-item.active .step-counter {
    border: 4px solid var(--kpmgblue-color);
    background-color: white;
    /* ----- 動畫 ----------------------- */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-name: shadow;
}


@-webkit-keyframes shadow {
    0% {
        border: 4px solid #005eb8;
        background-color: #ffffff;
        color: #005eb8;
    }

    100% {
        border: 4px solid #8fbae2;
        background-color: #ffffff;
        color: #005eb8;
    }
}

.read_shadow {

    /* ----- 動畫 ----------------------- */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-name: read_shadow;
}


/*------- 呼吸動畫 ---------*/
@-webkit-keyframes read_shadow {
    0% {

        box-shadow: 0 0 0px rgba(219, 52, 52, 0.7);
    }

    100% {

        box-shadow: 0 0 10px rgba(219, 52, 52, 0.803);
    }
}

.oo_shadow {
    /* ----- 動畫 ----------------------- */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-name: oo_shadow;
}


/*------- 呼吸動畫 ---------*/
@-webkit-keyframes oo_shadow {
    0% {

        box-shadow: 0 0 2px rgba(0, 0, 0, 0.277);
    }

    100% {

        box-shadow: 0 0 20px rgba(0, 0, 0, 0.277);
    }
}


.stepper-item.completed {
    color: var(--kpmgblue-color);
}

.stepper-item.stop .step-counter {
    color: var(--kpmgblue-color);
    background: white;
    border: 4px solid var(--kpmgblue-color);
}

.stepper-item.stop .step-name {
    color: var(--kpmgblue-color);
    /* font-weight: bold; */
}

.stepper-item.stop::before {
    border-bottom: 2px solid var(--kpmgblue-color);
}


.stepper-item.completed .step-counter {
    background-color: var(--kpmgblue-color);
    color: white;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--kpmgblue-color);
    width: 100%;
    top: 17px;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}

.stepper-item:last-child::after {
    content: none;
}

/* ----AA KPMG 變色框框 ------------------------------------ */

.f-box {
    background-color: #ececec82;
    margin: 18px -31px;
    padding: 18px;
    /* border-radius: 0rem !important; */
    border-left: 10px solid transparent;
}

.f-box .close a {
    top: -18px;
    left: -27px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}


.f-box h5,
.f-box .h5 {
    margin-top: -18px;
    margin-left: -18px;
    margin-right: -18px;
    margin-bottom: 18px;
    border-top-right-radius: 0rem !important;
    padding: 15px;
    font-weight: 600;
}

@media (min-width: 768px) {
    .f-box {
        margin: 18px 0px;
        border-radius: .4rem !important;
    }

    .f-box h5,
    .f-box .h5 {
        border-top-right-radius: .3rem !important;
    }

}

.box-b {
    color: #383d41;
    border-color: var(--cobaltblue-color);
}


/* 首頁按鈕 －－－－－－－－－－－－－－－ */


.f-box-btn {
    background-color: rgba(163, 163, 163, 0.142);
    /* background-image: linear-gradient(to right, #ebebeb, #ebebeb); */
    /* margin: 0 -15px 10px -15px; */
    margin: 0 0 15px 0;
    border-radius: 0.6rem !important;
    padding: 10px 12px;
    /* border-left: 10px solid; */
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -webkit-backdrop-filter: saturate(180%) blur(9px);
    backdrop-filter: saturate(180%) blur(9px);
}

@media (min-width: 768px) {
    .f-box-btn {
        margin: 0 0 15px 0;
        border-radius: 0.6rem !important;
    }
}

.f-box-btn:hover {
    color: rgb(247, 247, 247);
    cursor: pointer;
    background: var(--grey-2);
}

.f-box-btn.bg-b {
    border-color: #0f6cbd;
    color: #0f6cbd;
}

.f-box-btn.bg-b:hover {
    background: var(--gradients2-1);
    color: #ffffff !important;
}

.f-box-btn.bg-b .text-danger {
    color: #ff0000 !important;
}

.f-box-btn.bg-b:hover .text-danger {
    color: #ffffff !important;
}


.f-box-btn.bg-pink {
    border-color: var(--pink-color);
    color: var(--pink-color);
}

.f-box-btn.bg-pink:hover {
    background: var(--pink-color);
    color: #ffffff;
}

.f-box-btn.bg-danger {
    background: var(--red-color);
    border-color: var(--red-color);
    color: white;
}

.f-box-btn.bg-danger:hover {
    background: var(--red-color-dark) !important;
    border-color: var(--red-color-dark) !important;
    color: white;
}



.f-box-btn.bg-b-2 {
    border-color: var(--kpmgblue-color);
    color: var(--kpmgblue-color);
}

.f-box-btn.bg-b-2:hover {
    /* background-color: #005eb8; */
    /* background-image: linear-gradient(to right, #005eb8, #7213EA); */
    background: var(--gradients1);
    border-color: var(--cobaltblue-color);
}

.f-box-btn.bg-g {
    border-color: var(--green-color);
    color: var(--green-color);

}

.f-box-btn.bg-g:hover {
    color: #ffffff;
    /* background-image: linear-gradient(to right, #005eb8, #7213EA); */
    background: var(--green-color);
    border-color: var(--green-color);
}




/* ----------------- 編筐 -------------------------*/

.box-group .label {
    padding-bottom: 6px;

}

.box-border {
    background-image: linear-gradient(to right, var(--kpmgblue-color), var(--puple-color));
    padding: 10px 18px;
    border-radius: 0.5rem;
    margin: 15px 0;
    border-color: var(--kpmgblue-color);
}

@media (min-width: 768px) {
    .box-border {
        /* background-color: #ebebeb;
        background-color: var(--f-box-bg); */
        background-image: linear-gradient(to right, var(--kpmgblue-color), var(--puple-color));
        margin: 0 -15px 10px -15px;
        padding: 18px;
        border-left: 10px solid;
        border-color: var(--kpmgblue-color);
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        color: white !important;
    }

}

/* .box-group .box {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    word-break: break-all;
} */


.box.box-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #bfddfd;
}

.box.box-warning {
    color: #856404;
    background-color: #fffae6;
    border-color: #ffeeba;
}


/* 首頁公司案件按鈕群組 */
.box-border.company a.h6,
.box-border.company p.h6 {
    color: whitesmoke !important;
}

.box-border.company .collapse a {
    color: var(--cobaltblue-color);
    color: white;
}

.box-border.company .collapse a:hover {
    color: rgb(195, 195, 195);
    cursor: pointer;
}



/* [data-toggle="collapse"] .fas:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f07b";
    display: inline-block;  
    vertical-align: revert;
}

[data-toggle="collapse"].collapsed .fas:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f07c";
    display: inline-block;
    vertical-align: revert;
} */



/*---------手機尺寸避免 input 黏在一起--------*/
.form-row input {
    margin-bottom: 4px;
}

@media (min-width: 769px) {
    .form-row input {
        margin-bottom: 0px;
    }
}

.z-100 {
    z-index: 100;
}


/* --------- row內所有的col都有線 ------------*/
.left-lien>div {
    border-left: 3px solid #00000051;

    margin-bottom: 5px;
    padding-left: 5px;
    /* 加上 padding，讓文字不要跟線貼太近 */
}

.left-lien div strong {
    color: var(--kpmgblue-color);
}

.left-lien.text-light>div {
    border-left: 3px solid #ffffff74;
    color: white;
}

.left-lien.text-light div strong {
    color: white;
}

/* --------- 上傳下載最上面的狀態 progress ------------*/

.header-progress {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    display: contents;
}

.progress-box .progress {
    background-color: #00000000;
    border-radius: 0rem;
    height: 3px;
}

.progress-box {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 10000;
}

/* --------- 文字漸層 ------------*/
.tocolor {
    background: linear-gradient(to top, var(--puple-color), var(--cobaltblue-color), var(--pacificblue-color));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* --------- 版面最尾端上面下面的按鈕 ------------*/
.footer-button-box {
    height: 140px;
}

.footer-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    margin-left: 0;
    margin-right: 0;
    padding: 15px 0;
    background-color: #ffffff68 !important;
    backdrop-filter: saturate(100%) blur(10px);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
}


.top-button {
    width: 100%;
    position: fixed;
    top: 45px;
    left: 0;
    z-index: 100;
    padding: 12px 0px;
    background-color: #ffffff68 !important;
    backdrop-filter: saturate(100%) blur(10px);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
}

.top-button-box {
    margin-top: -10px;
}

@media (min-width: 769px) {
    .footer-button-box {
        height: initial;
    }

    .footer-button {
        width: 100%;
        position: initial;
        bottom: initial;
        left: initial;
        margin-left: 5px;
        margin-right: 5px;
        margin: 30px 5px;
        padding: initial;
        background-color: initial;
        backdrop-filter: initial;
        -webkit-backdrop-filter: initial;
    }

    .top-button {
        top: 45px;
    }

}



/*------ 上傳區 -------*/
body #dropzone {
    border: 2px dashed #ccc;
    padding: 6px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 5px;
    transition: all 0.2s ease-in-out;
    border-radius: 0.25rem;
    border-style: dashed;
    background-color: #f3f3f3;
}

/* #dropzone.is-dragover {
    border-color: #888;
    background-color: #f0f0f0;
} */

#dropzone.highlight,
#dropzone:hover,
#dropzone.is-dragover {
    background-color: #ffffff;
    transform: scale(0.98);
    border-style: solid;
    border-width: 4px;
    border-radius: 0.25rem;
    border-color: var(--kpmgblue-color);
    opacity: 0.8;
}

#dropzone:hover p {
    color: white;
}

/*------ 歡迎頁文字漸層 -------*/

.Hello {
    background: linear-gradient(to top, var(--puple-color), var(--cobaltblue-color), var(--pacificblue-color));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/*------ OOPS -------*/
.OOPS {
    background: linear-gradient(to top, #ffecb8, var(--yellow-color-dark));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/*------ sticky 滑動可以黏著top的 -------*/

.sticky-box {
    position: sticky;
    top: 60px;
    z-index: 1000;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

.Apply_btn,
.sticky {
    position: fixed;
    /* top: 45px; */
    bottom: 0;
    width: 100%;
    z-index: 1000;
    right: 0;
    padding: 15px 15px;
    backdrop-filter: saturate(100%) blur(10px);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
}

@media (min-width: 769px) {

    .Apply_btn,
    .sticky {
        position: relative;
        top: 0px;
        width: 100%;
        right: 0;
        padding: 0;
    }
}


.list-group a svg {
    color: var(--red-color);
}

.list-group a.active svg {
    color: white;
}

.list-group a.list-group-item.active {
    background-color: var(--kpmgblue-color);
    border-color: var(--kpmgblue-color);

}

.list-group a.list-group-item.active:hover {
    background-color: var(--kpmgblue-color-hove);
    border-color: var(--kpmgblue-color-hove);

}

.accordion .card .card-header {
    color: var(--kpmgblue-color);
}

.accordion .card .card-header.interview {
    color: rgb(204, 123, 17);
}

.list-group a.list-group-item.interview.active {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000000;
}


.accordion .card .card-header:hover,
.sideBar .list-group .list-group-item:hover {
    background-color: #efefef;
}



/*------ 把卡片的上邊緣線去掉 ----------*/
.card:nth-child(1) {
    border-top: 1px solid rgba(0, 0, 0, .125);
}


/* user-photo 照片上傳 */

.user-photo {
    cursor: pointer;
    opacity: 1;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

.user-photo:hover {
    opacity: 0.8;
}

.user-photo .fa-upload {
    opacity: 0;
    margin: auto;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

.user-photo:hover .fa-upload {
    opacity: 1;
    cursor: pointer;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


.copybady {
    margin-bottom: 5px;
}

.copybady.nb {
    counter-increment: item;
    margin-bottom: 5px;
}

.copybady.nb>.col-1:before {
    content: counter(item);
    font-weight: bold;
    /* 粗體 */
    color: var(--cobaltblue-color);
    font-size: x-large;
    padding: 0 4px;
    text-align: center;
}

/* ----------把table 所有參數都歸0 -----------*/
table.table-clean {
    border-collapse: collapse;
    border-spacing: 0;
}

table.table-clean,
table.table-clean th,
table.table-clean td {
    border: none;
    padding: 0;
    margin: 0;
}

/* -------上傳input icon -------*/
.custom-file-input:lang(en)~.custom-file-label::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f093";
    display: inline-block;
    vertical-align: revert;

}



/* -------呼吸效果-------*/
@keyframes breathing {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.breathing-effect {
    animation: breathing 1.8s infinite;
}

/* -------左邊選單 隱藏-------*/


.sidebarMenu {
    background-color: #ffae00 !important;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;

}



.sidebarMenu.open {
    background-color: #dedede !important;
    padding: 0 6px;
}

.sidebarMenu.off {
    max-width: 50px;
    width: 50px;
}

.sidebarMenu.off .sidebarMenu.off .accordion,
.sidebarMenu.off .accordion {
    display: none;
}

.sidebarMenu.off .sidebar-sticky {
    overflow: inherit;
}

.togglebtn {
    padding: 4px 15px;
    position: relative;
    right: 0px;
    z-index: 1000;
}

@media (max-width: 769px) {

    .sidebarMenu {
        background-color: #ffffff !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .sidebarMenu.off .accordion,
    .sidebarMenu.off .accordion {
        display: inline;
    }

    .togglebtn {
        display: none;
    }

}


@media (min-width: 768px) {
  /* 強制覆蓋 Bootstrap 的 col-md 寬度 */
  .sidebarMenu {
    flex: 0 0 180px !important;
    max-width: 180px !important;
  }
  
  .main {
    flex: 0 0 calc(100% - 180px) !important;
    max-width: calc(100% - 180px) !important;
  }
}


/* -------左邊選單 小icon-------*/

.icon-btn {
    padding-top: 0px;
}

.icon-btn.off {
    display: none !important;

}

.icon-btn .icon-btn-a {
    padding: 8px 10px;
    color: white;
    text-align: center;
    width: 100%;
    display: block;
}

.icon-btn .icon-btn-a:hover {
    background-color: #f1a400;
}

@media (max-width: 769px) {

    .icon-btn {
        display: none !important;

    }
}


/* 右側內容------------------- */
.main {
    /* transition: all 0.4s;
    -webkit-transition: all 0.4s; */
    padding: 0;
    position: relative;
    /* background-color: #f5f5f5; */
    width: 100%;
    height: 100%;

}



.main .bodydiv {
    padding: 55px 15px 0 15px;
    width: 100%;
    top: 0;
    right: 0;
    /* z-index: 2; */
    margin-top: 70px;
}

@media (max-width: 769px) {
    .main .bodydiv {
        padding: 70px 15px 0 15px;

    }
}

.main.off {
    width: 100%;
    max-width: 100%;
    margin-left: 50px;
    /* padding: 0 15px; */
    padding: 0;
    flex: 0 100%;
    margin-right: 0 !important;
}

@media (max-width: 769px) {

    .main.off {
        width: 100%;
        max-width: 100%;
        margin-left: 0px;
        padding: 0 15px;

    }

}

/* 自定義 CSS: 滑鼠滑過時展開 */
.dropdown-hover:hover .dropdown-menu {
    display: block;
}

/* 毛玻璃-------------------------------------------------*/

.navbar-kpmg {
        background: linear-gradient(to right, #00338d 0%, #7213eab0 31%, rgba(114, 19, 234, 0) 100%) !important; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.226) !important;
    /* backdrop-filter: blur(4px); */
    -webkit-backdrop-filter: blur(4px);

    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 20px 73px rgb(0 0 0 / 41%);
    border-bottom: 1px #ffffff5e solid;

}

.navbar-kpmg-bg {
    position: fixed;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

}

/* 超重要的div~~!!!!! */
.div-glass-box,
.breadcrumb {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 1rem;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 5px 5px 30px rgba(0, 0, 0, 0.173);
    border-bottom: 1px #ffffffa1 solid;
    border-right: 2px #ffffff28 solid;
    border-top: 1px #ffffffba solid;
    border-left: 2px #ffffff2b solid;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    position: relative;
    /* background: #ffffff; */
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 120%); */
}

/* 下拉選單------ */
.div-glass-box .dropdown-menu {
    background-color: #ffffff !important;
}

/* 新增按鈕 */
.div-glass-box.div-glass-box-add {
    border: dotted 3px #ffffffa0;
    position: relative;
    color: #0000007a;
    cursor: pointer;
    text-shadow: 1px 1px #ffffffa0;
}

.div-glass-box.div-glass-box-add>.box {
    width: 100%;
    height: 100%;
    margin: 0px;
    border-radius: 1rem;
    z-index: 200;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-responsive {
    min-height: 160px;
}

.div-glass-box:hover,
.breadcrumb:hover {
    box-shadow: 0 0 20px #edd4ffd1, 5px 5px 40px rgba(255, 255, 255, 0.326);

}

.breadcrumb {
    border-radius: 1.5rem;
    padding: 8px 20px;
    text-shadow: 0px 1px #ffffff34;
    border-top: 2px #ffffff28 solid;
    margin-bottom: 0;
    /* border-bottom: 1px #ffffff49 solid;
    border-right: 2px #ffffff1a solid;
    border-top: 1px #0000001a solid;
    border-left: 2px #00000008 solid; */
}

.div-glass-box.bg-kpmg {
    background: linear-gradient(0deg, rgba(0, 52, 141, 0.624) 0%, rgba(94, 0, 141, 0.575) 100%);
    color: #ffffff !important;
    text-shadow: 0px -1px #000000e4;
}

.div-glass-box.bg-kpmg div {
    color: #ffffff !important;
}

.div-glass-box.bg-kpmg .h1,
.div-glass-box.bg-kpmg .h2,
.div-glass-box.bg-kpmg .h3,
.div-glass-box.bg-kpmg .h4,
.div-glass-box.bg-kpmg .h5,
.div-glass-box.bg-kpmg .h6,
.div-glass-box.bg-kpmg h1,
.div-glass-box.bg-kpmg h2,
.div-glass-box.bg-kpmg h3,
.div-glass-box.bg-kpmg h4,
.div-glass-box.bg-kpmg h5,
.div-glass-box.bg-kpmg h6,
.div-glass-box.bg-kpmg p {
    color: #ffffffe6 !important;
    text-shadow: 0px 1px #000000a6;
}

/* 毛玻璃 選單------------------------背景效果 */


.div-glass-box.menu .list-unstyled li a {
    color: #000000;
}

/*  警告毛玻璃－－－－－－－－－ */
.div-glass-box.danger {
    background: #ffc4c441;
    border-color: #ffffff00;
    /* background-color: #ffffff00 !important; */
    animation: div-glass-box-danger 1.8s infinite !important;
}

@keyframes div-glass-box-danger {

    0%,
    100% {
        border-color: #ffbdbde5;
        box-shadow: 0 0 60px #e92d2d57;
    }

    50% {
        border-color: #ff7c7c5f;
        box-shadow: 0 0 60px #e92d2d1b;
    }
}

/* 警告毛玻璃 當有danger 裡面的Corrected就會顯示 如：待更正  */
.div-glass-box .switch-box {
    display: none;
}

.div-glass-box.danger .switch-box {
    display: block;
}


/* 毛玻璃 如果有右箭頭 變按鈕－－－－－－－－－－－－－*/
.div-glass-box:has(.fa-chevron-right) {
    cursor: pointer;
}

/* 毛玻璃 蓋台按鈕  －－－－－－－－－－－－－*/
.div-glass-box .covering {
    position: absolute;
    background: #dddddde1;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 3;
    left: 0px;
    right: 0px;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* 不攔截滑鼠事件 */
    opacity: 0;

}

.div-glass-box .covering.show {
    opacity: 1;
    pointer-events: auto;
    /* 出現時才可擋 */
}

.div-glass-box .covering .closeCovering {
    position: absolute;
    z-index: 10;
    right: 10px;
    top: 10px;
}



/* 毛玻璃------------------------背景效果 */

.glass-background {
    border-top: 1px solid #ffffff44 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.24) -20%, rgba(255, 255, 255, 0.69))20%;
    /* background: linear-gradient(180deg, rgba(0, 98, 255, 0.531) -20%, rgba(161, 224, 255, 0.664))20% ; */
    border: 0px solid transparent;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6), 0px -10px 60px rgba(0, 0, 0, 0.337);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    place-items: center;
    cursor: pointer;
}


/* 毛玻璃按鈕------------------------ */

.btn.btn-glass {
    text-shadow: 1px 1px #ffffff26;
    color: rgba(8, 10, 102, 0.754);
    margin: 0 2px;
    border-radius: 1.5em;
    cursor: pointer;
    border: 1px solid #ffffff3b;
    box-shadow: 4px 4px 8px #00000023, -4px -4px 8px #ffffff67;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding-left: 1em;
    padding-right: 1em;
    font-weight: bold;
    transition: all 0s;
    -webkit-transition: all 0s;
}

.btn.btn-glass .badge {
    text-shadow: -1px -1px #0303039f;
}

.btn-group .btn-glass {
    box-shadow: 0px 4px 8px #0000003d, 0px -4px 8px #ffffff7f;
}

.btn.btn-glass:has(.fa-fw) {
    padding-left: 9px;
    padding-right: 9px;
}

.btn.btn-glass.btn-sm:has(.fa-fw) {
    padding: 2px 6px;
}

.btn.btn-glass:hover {
    box-shadow: 2px 2px 2px #00000038, -2px -2px 2px #ffffff7b;
    text-shadow: 1px 1px #ffffffe4;
    /* color: rgba(5, 7, 141, 0.754); */
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.btn.btn-glass.active,
.btn.btn-glass:active {
    color: rgba(255, 255, 255, 0.859);
    text-shadow: 1px 1px #000000b0;
    box-shadow: inset 2px 2px 4px #00000045, inset -2px -2px 4px #e8e8e87b !important;
    background-color: #27058fa6;
    /* background: linear-gradient(180deg, #bba4fff8 0%, #bba4ffc0 100%); */

}

.btn.btn-glass.text-danger.active,
.btn.btn-glass.text-danger:active {
    color: rgba(255, 255, 255, 0.859) !important;
    background-color: #820606a6;
}


/* svg:not(:host).svg-inline--fa.white,
svg:not(:root).svg-inline--fa.white  */

.btn.btn-glass.active svg,
.btn.btn-glass:active svg {
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.9));
}

.btn.btn-glass:disabled {
    text-shadow: 0px 1px #ffffffe4;
    color: rgba(8, 10, 102, 0.754);
    margin: 0 2px;
    border-radius: 1.5em;
    cursor: pointer;
    border: 1px solid #ffffff3b;
    transition: all 0.3s;
    box-shadow: 4px 4px 8px #00000056, -4px -4px 8px #ffffff67;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-left: 1em;
    padding-right: 1em;
    background-color: #00000019;
    opacity: 0.8;
}

/* 改台選單需要的按鈕樣式 */

.btn.btn-glass.btn-link {
    color: rgba(8, 10, 102, 0.754);
    text-shadow: 0px 1px #ffffffa2;
    border: 0px !important;
    border-bottom: 0px solid #ffffff4d !important;
    border-right: 0px solid #ffffff5e !important;
    background: initial !important;
    box-shadow: inherit !important;
    text-decoration: none !important;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
}

.btn.btn-glass.btn-link.btn-link-2:hover {
    box-shadow: 2px 2px 2px #00000038, -2px -2px 2px #ffffff7b !important;
    color: #000000d2;
    background-color: #ffffff3d !important;
}


.btn.btn-glass.btn-link.btn-link-2:active {
    color: rgba(109, 109, 109, 0.859);
    box-shadow: inset 2px 2px 4px #00000047, inset -2px -2px 4px #e8e8e85b !important;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}


.btn.btn-glass.btn-link:hover {
    color: #000000;
    border: 0px !important;
    border-bottom: 0px solid #ffffff4d !important;
    border-right: 0px solid #ffffff5e !important;
    background: initial !important;
    box-shadow: inherit !important;
    text-decoration: none !important;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
}

.btn.btn-glass:has(.fa-ellipsis-vertical).dropdown-toggle::after,
.btn.btn-glass:has(.fa-ellipsis-vertical).dropdown-toggle::before {
    display: none;
}

.dropdown:has(.fa-ellipsis-vertical) .dropdown-menu {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.874) 0%, rgb(221, 221, 221) 100%) !important;
    box-shadow: inset 1px 1px 5px rgb(255, 255, 255);
    border-bottom: 1px #ffffff28 solid !important;
}

.multiselect,
.form-control,
.form-group .form-control,
.custom-file .custom-file-input,
.custom-file .custom-file-label {
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #ffffff55;
    /* box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.966); */
    transition: 300ms ease-in-out;
    border: solid 1px #00000022;
}

.custom-select:focus,
.form-control:focus,
.form-group .form-control:focus,
.custom-file .custom-file-input:focus~.custom-file-label {
    background-color: white;
    transform: scale(1.01);
    box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.232),
        -8px -8px 30px #ffffff56 !important;
    border: solid 1px #00000006;
}

.btn-glass.text-light,
.btn-glass.btn-link.text-light {
    text-shadow: 0px -1px #000000e4;
}

/* 顏色按鈕 --------------------------------------------------------------*/

.btn.btn-glass.btn-primary {
    background: linear-gradient(0deg, #5748ad 0%, #9483f0 100%);
    border: 0px solid #ffffff00 !important;
    color: #ffffff;
    text-shadow: 0px -1px #000000e6 !important;
    box-shadow: 4px 4px 8px #0000004d, -4px -4px 8px #ffffffcf;

}

.btn.btn-glass.btn-primary svg:not(:host).svg-inline--fa,
.btn.btn-glass.btn-primary svg:not(:root).svg-inline--fa {
    filter: drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.611));
}


.btn.btn-glass.btn-primary:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(0deg, #5748ad 0%, #5748ad 100%);
    box-shadow: 2px 2px 3px #1811436d, -2px -2px 3px #ffffffcf;
}

.btn.btn-glass.btn-primary:disabled,
.btn.btn-glass.btn-primary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* pointer-events: none; */
}

.btn.btn-glass.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn.btn-glass.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.btn-glass.btn-primary:not(:disabled):not(.disabled).active,
.btn.btn-glass.btn-primary:not(:disabled):not(.disabled):active {
    box-shadow: inset 2px 2px 2px 0rem #00000087;
}


/* --- */

.btn.btn-glass.btn-warning {
    background: linear-gradient(0deg, #eab801 0%, #ffe0a5 100%);
    border: 0px solid #ffffff00 !important;
    color: #000000;
    text-shadow: 0px 1px #ffffffe6;
    box-shadow: 4px 4px 8px #0000004d, -4px -4px 8px #ffffffcf;
}

.btn.btn-glass.btn-warning:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(0deg, #eab801 0%, #eab801 100%);
    box-shadow: 2px 2px 3px #1811436d, -2px -2px 3px #ffffffcf;
}

.btn.btn-glass.btn-warning:disabled,
.btn.btn-glass.btn-warning.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* pointer-events: none; */
}

.btn.btn-glass.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn.btn-glass.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn.btn-glass.btn-warning:not(:disabled):not(.disabled).active,
.btn.btn-glass.btn-warning:not(:disabled):not(.disabled):active {
    box-shadow: inset 2px 2px 2px 0rem #00000087;
}

/* --- */

.btn.btn-glass.btn-success {
    background: linear-gradient(0deg, #136606 0%, #269b14 100%);
    border: none;
    color: #fff;
    text-shadow: 0px -1px #000000e6;
    box-shadow: 4px 4px 8px #0000004d, -4px -4px 8px #ffffffcf;
}

.btn.btn-glass.btn-success:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(0deg, #136606 0%, #136606 100%);
    box-shadow: 2px 2px 3px #1811436d, -2px -2px 3px #ffffffcf;
}

.btn.btn-glass.btn-success:disabled,
.btn.btn-glass.btn-success.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* pointer-events: none; */
}

.btn.btn-glass.btn-success:not(:disabled):not(.disabled).active:focus,
.btn.btn-glass.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-glass.btn-success:not(:disabled):not(.disabled).active,
.btn.btn-glass.btn-success:not(:disabled):not(.disabled):active {
    box-shadow: inset 2px 2px 2px 0rem #00000087;
}


.btn.btn-glass.btn-danger,
.btn.btn-glass.btn-danger {
    color: #fff;
    background-color: var(--red-color);
}


/* 毛玻璃.modal ---------------------------------------*/

.modal {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    backdrop-filter: initial !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6), 0px 0px 10px rgba(0, 0, 0, 0.337);
}

.modal-dialog {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

.modal-header,
.modal-footer,
.modal-content {
    border: 0px solid #dee2e6 !important;
}

.modal-header {
    padding-bottom: 0px;
}

.modal-footer {
    padding-top: 0px;
}

.modal-content {
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
}


.modal-content .loading_end {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #ffffffba;
    z-index: 1500;
    border: 1px;
    border-radius: 1rem;
    border-color: #ffffff7f;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: breathing-3-2 1.8s infinite;
    opacity: 0;
    pointer-events: none;
    /* 不攔截滑鼠事件 */
    transition: opacity .3s ease;
}

.modal-dialog.danger .loading_end {
    background-color: #ecb0b0ba;
}

.modal-content .loading_end.show {
    opacity: 1;
    pointer-events: auto;
    /* 出現時才可擋 */
}

/* modal背景背景 */
.modal-backdrop {
    /* background-color: initial !important; */
    background-color: #55555569 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-content,
.modal-header,
.modal-title,
.modal-body,
.modal-footer {
    background-image: initial !important;
    background-color: initial !important;
    backdrop-filter: saturate(100%) blur(0px);
}

.modal-dialog {
    border-radius: 1.5rem;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 20px 80px rgba(0, 0, 0, 0.287);
    /* border-bottom: 1px #ffffff64 solid;
    border-right: 2px #ffffff90 solid;
    border-top: 1px #ffffffba solid;
    border-left: 2px #ffffff25 solid; */
    border: 1px solid #ffffffc5;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    /* animation: breathing-3 1.8s infinite; */

}

.modal-content {
    border: 0px;
    border-radius: 1rem;
    border-color: #ffffff7f;
    background-color: #d7d7d7bd !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* animation: breathing-3-2 1.8s infinite; */
}

.modal-dialog.danger {
    border: 1px #ffd7d74a solid;
    animation: breathing-2 1.8s infinite;
}

.modal-dialog.danger .modal-content .btn-glass {
    color: #2f0000;
    text-shadow: 1px 1px #ffffff9e;
}

.modal-dialog.danger .modal-content {
    border-color: #920d0d6c;
    /* background-color: #ffffff00 !important; */
    animation: breathing-2-2 1.8s infinite;
}

/* 沒框框的modal --------------------------------*/
.modal-dialog.modal-nobg,
.modal-dialog.modal-nobg .modal-body,
.modal-dialog.modal-nobg .modal-content {
    background-image: initial !important;
    background-color: initial !important;
    backdrop-filter: initial !important;
    border: 0px solid #ffffffc5;
    animation: initial !important;
    box-shadow: initial !important;
    /* background-color: #000!important; */
}




/* -------呼吸效果-------*/
@keyframes breathing-2 {

    0%,
    100% {
        border-color: #ffbdbde5;
        box-shadow: 0 0 200px rgba(219, 52, 52, 0.361);
    }

    50% {
        border-color: #ff7c7c5f;
        box-shadow: 0 0 200px rgba(219, 52, 52, 0.044);
    }
}


@keyframes breathing-2-2 {

    0%,
    100% {
        box-shadow: inset 0 0px 180px #ff8888bd;
    }

    50% {
        box-shadow: inset 0 0px 150px #ff8888bd;
    }
}

@keyframes breathing-3 {

    0%,
    100% {
        border-color: #ffffffc7;
        box-shadow: 0 0 200px rgba(255, 255, 255, 0.745);
    }

    50% {
        border-color: #ffffff70;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.441);
    }
}

/* .modal-content */
@keyframes breathing-3-2 {

    0%,
    100% {
        box-shadow: inset 0 0px 180px rgba(255, 255, 255, 0.502);
    }

    50% {
        box-shadow: inset 0 0px 160px rgba(255, 255, 255, 0.529);
    }
}



.modal-header {
    border-bottom: 0px solid #dee2e652;
    text-shadow: 0px 1px #ffffffe4;
}

.modal-header h5 {
    color: rgba(0, 0, 0, 0.719) !important;
}

.modal-footer {
    border-top: 1px solid #dee2e652;
}

/* 架構.modal ---------------------------------------*/
html,
body {
    height: 100%;
}

/* body,
.sidebarMenu.open {
    background: #d6d6d6 !important;
} */


.bg-motion {
    padding: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(circle,
            /* rgba(247, 164, 255, 0.053) 0%,
    rgba(247, 164, 255, 0.202) 5%,
    rgba(115, 6, 183, 0.136) 40%,
    rgba(17, 96, 192, 0.251) 100%) !important; */
            rgba(255, 255, 255, 0.053) 0%,
            rgba(144, 144, 144, 0.202) 5%,
            rgba(134, 134, 134, 0.136) 40%,
            rgba(140, 140, 140, 0.251) 100%) !important;
}

#bg {
    text-align: right;
    margin-right: 0;
    opacity: 0.4;
    margin-left: 0;
    padding: 0;
    right: 0;
    left: 0;
    top: 15px;
}

.sidebarMenu {
    top: 53px;
    background: #ffffffe0 !important;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 30px rgba(0, 0, 0, 0.205);
    border-right: 1px #ffffffd1 solid;
    /* backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); */
    z-index: 10;
}

.sidebarMenu.open {
    border-right: 0px #ffffffc3 solid;
    background: #ffffffe0 !important;
    /* box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 0px rgba(0, 0, 0, 0.205); */
}


@media (min-width: 769px) {

    .sidebarMenu {
        position: fixed;

        /* background: #ffae00 !important; */
        background: linear-gradient(90deg, #ffae00 10%, #ffae0057 100%) !important;
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 30px rgba(0, 0, 0, 0.205);
        border-right: 1px #ffffffc5 solid;
        /* backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); */

    }


    .sidebarMenu.open {
        position: fixed;
        border-right: 0px #ffffffc8 solid;
        background: linear-gradient(180deg, rgba(238, 238, 238, 0) 90%, rgba(255, 255, 255, 0) 100%) !important;
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 0px rgba(0, 0, 0, 0.205);
        backdrop-filter: inherit;
        -webkit-backdrop-filter: inherit;


    }

}



.table th {
    background: #ffffff7e !important;
}


.dropdown-menu {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 20px 73px rgba(0, 0, 0, 0.232);
    border-bottom: 2px #ffffff28 solid !important;
    border-right: 2px #ffffff28 solid !important;
    border-top: 1px #ffffffba solid !important;
    border-left: 2px #ffffff2b solid !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    background: #ffffff12 !important;
}


@media (min-width: 992px) {
    .nav_user_name.dropdown-menu.show {
        position: absolute;
        margin-top: 0.75rem;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
}

.dropdown-item>a {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: #ffffff00 !important;
}

.dropdown-item>a:hover {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: #ffffff00 !important;
}

.dropdown-item:hover {
    background: #ffffff4f !important;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 20px rgba(0, 0, 0, 0.232);


}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background: #ffffff00 !important;
}

.togglebtn::before {
    font: var(--fa-font-solid);
    content: "\f550";
    /* ← face-smile icon */
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    animation: breathing 1.8s infinite;
    vertical-align: revert;
}

.togglebtn.open {
    text-shadow: 0px 1px #ffffffe4;
    color: #090909b6;
    box-shadow: 4px 4px 8px #00000023, -4px -4px 8px #ffffff67;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: block;
    padding-left: 10px;
    padding-top: 6px;
}

.togglebtn.open:hover {
    box-shadow: 2px 2px 2px #00000038, -2px -2px 2px #ffffff7b;
}

.togglebtn.open:active {
    color: #666;
    box-shadow: inset 2px 2px 4px #00000047, inset -2px -2px 4px #e8e8e85b;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}



.togglebtn.open::before {
    all: initial;
    font: var(--fa-font-solid);
    content: "\f053";
    /* ← angle-left icon */
    display: inline-block;
    font-size: 15px;
    color: #ffae00 !important;
    text-shadow: 0px 1px #ffffffe4;
    vertical-align: revert;
}

/* 選單 */
/* 初始化樣式 */
.menu-block {
    margin: 5px 0px 5px 8px;
    border-radius: 1.5rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-block>h6 {
    margin-bottom: 0px;
    padding: 10px 0px 8px 0px;
    text-shadow: 0px 1px #ffffffe4;
    color: #000000ae;
    font-size: medium;
}
.sidebar-sticky{
    padding-bottom: .5rem;;
}

/* .menu-block:hover .collapse {
  display: block;
} */
/* hover 在整塊區域上觸發淺背景 */

.menu-block:hover {
    border-bottom: 1px solid #ffffff !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.503));
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4), 0px 4px 15px rgba(0, 0, 0, 0.224);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}



/* 展開時：用 h6 判斷 aria-expanded="true" 狀態，對父層作用 */
.menu-block:has(.sidebar-heading[aria-expanded="true"]) {
    border-bottom: 1px #ffffffa1 solid;
    border-right: 2px #ffffff28 solid;
    border-top: 1px #ffffffba solid;
    border-left: 2px #ffffff2b solid;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.233) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4), 0px 4px 15px rgba(0, 0, 0, 0.224);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 加強展開狀態的圓角與統一感 */
.menu-block:has(.sidebar-heading[aria-expanded="true"]) {
    border-radius: 0.9rem;
    padding-bottom: 0.9rem;
}

.menu-block .nav-item {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4), 0px 0px 0px rgba(0, 0, 0, 0.181);
    border-bottom: 1px #ffffff00 solid;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.menu-block .nav-item:hover {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4), 0px 0px 10px rgba(0, 0, 0, 0.181);
    border-bottom: 1px #ffffffa1 solid;
}

.progress:has(.bg-glass) {
    border-radius: 1.5em;
    height: 12px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.189);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: #ffffff21;
}

.progress-bar.bg-glass {
    background-color: #57239f !important;
    box-shadow: inset 0px 0 6px rgba(255, 255, 255, 0.915);
}



/* 圓圖霸 ---------------------*/
.circle-wrapper {
    width: 150px;
    height: 150px;
    position: relative;

}

.circle-box {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.256);
}

.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#57239f calc(var(--percent) * 1%), #b0b0b04a 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0px 0 10px rgba(255, 255, 255, 0.793);
}

.inside-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #dbdbdb;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    box-shadow: 0px 0 10px rgba(255, 255, 255, 0.735);
}

.inside-circle .shadow-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0px 0 10px rgba(0, 0, 0, 0.385);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------datepicker_ui */
.datepicker {
    padding: 1rem;
}

.datepicker th.next {
    text-align: right;
}

.datepicker th.dow,
.datepicker .datepicker-switch {
    text-align: center;
}

.datepicker .day {
    padding: .35rem;
    color: rgba(5, 7, 141, 0.754);
    text-align: center;
    border-radius: 5px;
    text-shadow: 0px 1px #ffffffe4;
}

.datepicker .day:hover {
    color: rgba(248, 248, 248, 0.859) !important;
    box-shadow: inset 2px 2px 4px #00000047, inset -2px -2px 4px #e8e8e85b;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    cursor: pointer;
    background-color: #4b008d;
    text-shadow: 0px 1px #000000e4;
}


.datepicker .day:hover {
    color: rgba(6, 8, 85, 0.859);
    box-shadow: inset 2px 2px 4px #00000047, inset -2px -2px 4px #e8e8e85b;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

/* table 編輯按鈕 ”更多“*/
.table-ellipsis a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
}

hr {
    box-shadow: 0px 1px 0px #ffffff21;
    border-top: 1px solid rgba(0, 0, 0, 0.288);
}


.input-group .form-control {
    background-color: #ffffff55;
    /* box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.966); */
    transition: 300ms ease-in-out;
    border: solid 1px #00000022;
}

.input-group .form-control:focus {
    background-color: white;
    transform: scale(1.01);
    box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.232), -8px -8px 30px #ffffff56 !important;
}

/* 白底的文字陰影 */
.text-shadow-light {
    text-shadow: 1px 1px #ffffff12;
}

/* 黑底的文字陰影 */
.text-shadow {
    text-shadow: 0px -1px #000000a6;
}


.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    backdrop-filter: blur(150px);
    -webkit-backdrop-filter: blur(150px);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    padding: 40px 70px;
    width: 100%;
    padding-bottom: 0;
}

.overlay-content>div {
    padding: 15px 10px;
}

.overlay-content a {
    font-size: medium;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}



/* 轉角度 */
.rotate-3 {
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

.rotate-3:hover {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* 上下來回滑動動畫 20px */
.move-up-down {
    animation: upDown 2s ease-in-out infinite;
}

@keyframes upDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

.nav-breadcrumb {
    position: absolute;
    width: 100%;
    z-index: 9;
    padding: 0 15px;
    left: 0;
    right: 0;
    top: 75px;
}

/* 對話匡－－－－－－－－－－－－－－－－ */
.bubble-box {
    padding-bottom: 75px;
}

.bubble {

    position: relative;
    font-family: sans-serif;
    line-height: 24px;
    background: #dcdcdce3;
    border-radius: 10px;
    padding: 24px;
    color: #000;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 5px 5px 30px rgba(0, 0, 0, 0.173);
}

.bubble-bottom-left:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 15px solid #dcdcdcf0;
    border-right: 12px solid transparent;
    border-top: 12px solid #dcdcdcf0;
    border-bottom: 14px solid transparent;
    left: 32px;
    bottom: -26px;

}

.bubble-bottom-left:after {
    content: "\f2bd";
    /* FA 的 unicode */
    font-family: "Font Awesome 6 Free";
    /* 如果是 v5 用 "Font Awesome 5 Free" */
    font-weight: 900;
    /* solid icon */
    position: absolute;
    bottom: -50px;
    /* 距離 bubble 下方 */
    left: 10px;
    /* 跟箭頭對齊 */
    font-size: 25px;
    /* icon大小 */
    color: #ffffff;
    /* icon顏色 */
}

.btn-back {
    margin: 0 13px 0 7px !important;
}

/* 借還超大按鈕 */
.btn.btn-glass.xxl {
    width: 135px;
    height: 130px;
    font-size: 40px;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5.5em;
}

.btn.btn-glass.xxl.active {
    background-color: var(--kpmgblue-color);
    color: white;
    text-shadow: -1px -1px #000000e4;
}

.text-shadow {
    /* text-shadow: 1px 1px #ffffffe4; */
}


/* －－日曆－－－－－－－－－－－－－－－－－－－－－－－ */
table.calendar {
    table-layout: fixed;
    /* 關鍵：固定表格布局 */
    width: 100%;
}

table.calendar th,
table.calendar td {
    padding-top: .0rem;
    width: 14%;

}

table.calendar th {
    font-size: 25px;
    color: #000000c2;
    vertical-align: top;
    /* text-shadow: 1px 1px #ffffffc2; */
    padding: 10px 16px;
}


table.calendar td {
    cursor: pointer;
    padding-top: .2rem;
    height: 100px;
    vertical-align: top;
    /* box-shadow: 0px 0px 0px #0000002a, 0px -4px 10px #ffffff7f; */
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 避免自動換行 */
}

table.calendar td.disabled {
    pointer-events: none;
    opacity: 0.3 !important;

}

table.calendar td.today {
    font-size: 25px;
    background-color: #e9a8ff80;

}

table.calendar td:hover {
    box-shadow: 0px 4px 10px #0000002a, 0px -4px 10px #ffffff7f;
    background-color: #00000009;
}

table.calendar td.today:hover {
    box-shadow: 0px 4px 10px #0000002a, 0px -4px 10px #ffffff7f;
    background-color: #e9a8ff60;
}

table.calendar td:active,
table.calendar td.today:active {
    box-shadow: inset 2px 2px 4px #00000047, inset -2px -2px 4px #e8e8e85b;
}

table.calendar td .day {
    font-size: 25px;
    opacity: 0.8;
    color: #00000097;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

table.calendar td:hover .day {
    font-size: 25px;
    opacity: 0.8;
    color: #000000e5;
}

table.calendar td.not {
    opacity: 0.7;
}

table.calendar td p {
    margin-bottom: 0;
}



table.calendar td .badge {
    display: block;
    /* 讓 width:100% 生效 */
    width: 100%;
    /* 撐滿 td */
    text-align: left;
    font-size: 15px;
    color: #00000093;
    background-color: #00000023;
    border: 1px solid #ffffff;
    margin-bottom: 5px;

    /* ellipsis 關鍵 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.calendar td .badge.active {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 15px;
    color: #fffffff6;
    background-color: #000;
    border: 1px solid #000000;
    margin-bottom: 5px;
}

table.calendar .search_day {
    animation: breathing-search_day 1s infinite;

}

@keyframes breathing-search_day {

    0%,
    100% {
        background-color: #00000019;
    }

    50% {
        background-color: #00000000;
    }
}


/* *---------時間線 -------------------------*/
#timeline ol {
    position: relative;
    display: block;
    margin-top: 20px;
    margin-bottom: 80px;
    height: 1px;
    padding-inline-start: 0;
}

#timeline li {

    position: relative;
    display: inline-block;
    float: left;
    width: calc(99% / 3);
    height: 2px;
    background: rgb(135, 135, 135);
    color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 5px 5px 30px rgba(0, 0, 0, 0.173);
}

#timeline li p {
    display: block;
    white-space: normal;
    /* 允許自動換行 */
    word-break: break-word;
    /* 長字串必要時斷行 */
    overflow-wrap: break-word;
    /* 現代瀏覽器斷行保護 */
    margin-bottom: 0;
    font-weight: bold;
    text-align: right;
}

#timeline li .diplome {

    margin-top: 20px;
}

#timeline li .point {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgb(135, 135, 135);
    background: rgb(135, 135, 135);
    position: absolute;
    top: -9px;
    box-shadow: 0px 2px 0 0 hsla(0, 0%, 100%, 0.523), 5px 5px 30px rgba(0, 0, 0, 0.173);
    left: calc(100% - 8px);
    /* left: calc(50% - 8px); */
    z-index: 1;

}

#timeline li .timestamp {
    font-size: 12px;
    opacity: 0.6;
}

#timeline li.active {
    background: var(--kpmgblue-color);
}

/* #timeline li.active:last-child {
    background: #00000049;
} */


#timeline li.active>.point {
    border: 5px solid var(--kpmgblue-color);
    background-color: var(--kpmgblue-color);
    box-shadow: 0 0 20px rgb(255, 255, 255);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-name: aa_shadow;
}

/*------- 呼吸動畫 ---------*/
@-webkit-keyframes aa_shadow {
    0% {

        box-shadow: 0 0 2px #00338d;
    }

    100% {

        box-shadow: 0 0 15px #00338d;
    }
}


#timeline li.active>.diplome,
#timeline li.active>.timestamp {
    color: var(--kpmgblue-color);

}


/* *---------時間線 垂直-------------------------*/
#timeline-2 ol {
    position: relative;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

#timeline-2 li {
    position: relative;
    display: flex;
    /* ← 關鍵 */
    align-items: flex-start;
    gap: 16px;
    /* 點與內容間距 */
}

/* #timeline-2 li.active {
    background: var(--kpmgblue-color);
} */



#timeline-2 li::before {
    /* 垂直線條 */
    content: "";
    position: absolute;
    left: 9px;
    /* 線在點的中間 */
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(135, 135, 135);
    z-index: 0;
}

#timeline-2 li.active::before {
    background: var(--kpmgblue-color);
}

/* 點 */
#timeline-2 li .point {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgb(135, 135, 135);
    background: rgb(135, 135, 135);
    z-index: 2;
    box-shadow: 0px 2px 0 0 hsla(0, 0%, 100%, 0.523),
        5px 5px 30px rgba(0, 0, 0, 0.173);
}

#timeline-2 li.active .point {
    background: var(--kpmgblue-color);
    border: 3px solid var(--kpmgblue-color);
}

#timeline-2 li.danger .point {
    background: var(--red-color);
    border: 3px solid var(--red-color);
    box-shadow: 0 0 5px var(--red-color);
    animation: danger-glow 1.2s ease-in-out infinite alternate;
}

#timeline-2 li.now .point {
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 0 5px #ffffff;
    animation: new-glow 1.2s ease-in-out infinite alternate;
}

#timeline-2 li.active p.h4 {
    color: var(--kpmgblue-color) !important;
}

#timeline-2 li.danger p.h4 {
    color: var(--red-color) !important;
    ;
}





/*------- 紅光呼吸動畫 ---------*/
@keyframes danger-glow {

    0%,
    100% {
        box-shadow: 0 0 10px 2px var(--red-color);
    }

    50% {
        box-shadow: 0 0 4px 0px var(--red-color);
    }
}

/*------- 白光呼吸動畫 ---------*/
@keyframes new-glow {

    0%,
    100% {
        box-shadow: 0 0 20px 5px #ffffff;
    }

    50% {
        box-shadow: 0 0 4px 0px #ffffff;
    }
}


/* 右邊的內容 */
#timeline-2 li .date {
    flex: 1;
    width: calc(100% - 41px);
    z-index: 1;
}

/* 讓 RWD 時文字不被壓縮 */
#timeline-2 li .date .form-group {
    width: 100%;
}


/* 複選下拉選單multiselect-container 隱藏原生 checkbox 樣式 */
.multiselect-container.dropdown-menu {
    width: 100% !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    left: 0 !important;
    top: 6px !important;

}

.multiselect-container .multiselect-option:hover,
.multiselect-container .multiselect-group:hover,
.multiselect-container .multiselect-all:hover,
.multiselect-container .multiselect-option:focus,
.multiselect-container .multiselect-group:focus,
.multiselect-container .multiselect-all:focus {
    background-color: #ffffff !important;
}

.multiselect-container input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-color: transparent;
    border: 1.5px solid #999;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* hover 效果 */
.multiselect-container input[type="checkbox"]:hover {
    border-color: var(--kpmgblue-color, #00338d);
}

/* 勾選後的背景與邊框 */
.multiselect-container input[type="checkbox"]:checked {
    background-color: var(--kpmgblue-color, #00338d);
    border-color: var(--kpmgblue-color, #00338d);
}

/*  用 Font Awesome 當勾勾 */
.multiselect-container input[type="checkbox"]:checked::after {
    content: "\f00c";
    /* ← Font Awesome ✔ (fa-check) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
    position: absolute;
    font-size: 10px;
    top: 0px;
    left: 2px;
}

/* multiselect-container 搜尋微調 */
.multiselect-filter {
    padding: 10px;
    position: relative;
    width: 100%;
}

.multiselect-filter>.svg-inline--fa {
    z-index: 10;
    position: absolute;
    top: 22px;
    left: 18px;
    display: block;

}

.multiselect-filter>.multiselect-search {
    margin-left: 0 !important;

    border-radius: 4px !important;
}

.multiselect-container .multiselect-filter>input.multiselect-search {
    border: solid 1px #0000001f;
}

.multiselect-container .multiselect-filter>input.multiselect-search:focus {
    border: solid 0px #00000011;
}

/* 新增員編的預覽名稱------------ */
.vew-name {
    font-weight: bold;
    border-radius: 25rem;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 5px 5px 30px rgba(0, 0, 0, 0.173);
    border-bottom: solid 1px rgba(255, 255, 255, 0.631);
    border-right: solid 2px rgba(255, 255, 255, 0.157);
    border-top: solid 1px #ffffffba;
    border-left: solid 2px #ffffff2b;
    backdrop-filter: blur(8px);
    color: #0000008f;
    -webkit-backdrop-filter: blur(8px);
    /* text-shadow: -1px 1px #ffffff7f; */
    margin-bottom: 8px;
    padding: 0.2em 0.6em 0.2em 1em;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
}

.vew-name.color {
    background: linear-gradient(180deg, #00b7ff00 0%, #ffffffd7 100%);
    border-bottom: 1px #ffffff47 solid;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 5px 5px 30px rgba(140, 0, 255, 0.182);
}

.vew-name a.text-dark {
    margin-left: 1em;
}

.vew-name.plus {
    justify-content: center;
    align-items: center !important;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 20px #8c00ff49;
    background: #0040ff;
    background: linear-gradient(180deg, rgba(0, 64, 255, 0) 0%, rgba(144, 0, 255, 0.1) 100%);
}

.vew-name.plus:active,
.vew-name.plus.active {
    box-shadow: inset 2px 2px 4px #00000045, inset -2px -2px 4px #e8e8e87b !important;

}


.vew-name.plus:hover {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    background: #0040ff;
    background: linear-gradient(180deg, rgba(144, 0, 255, 0.1) 20%, rgba(144, 0, 255, 0.2) 100%);
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%), 0px 0px 10px rgba(0, 0, 0, 0.173);
}


.badge-puple {
    background-color: #6000a9;
    color: #ffffff;
}





/* icon陰影 */
/* svg:not(:host).svg-inline--fa,
svg:not(:root).svg-inline--fa {
    filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 0.1));
} */

/* 在 .text-light 裡時改成黑色陰影 */
.text-light svg:not(:host).svg-inline--fa,
.text-light svg:not(:root).svg-inline--fa {
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.9));
}


/* ui-autocomplete 搜尋分類------ */
.ui-widget ul {
    margin: 0;
    padding: 0;
}

.ui-widget li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-widget.ui-widget-content {
    border: 1px solid #ffffff;
    z-index: 10000;
    border-radius: 4px;
    padding-left: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: #ffffff67;
    margin-right: 0;
    padding-right: 0;
}

.ui-widget {
    display: inline-block;
    /* 讓它跟著內容寬度走 */
}

/* 讓 autocomplete 跟 Bootstrap 配合良好 */
.ui-autocomplete {
    z-index: 1051;
    /* 比 modal 高，避免被蓋住 */
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/*  ui-autocomplete 顏色圓點樣式 */
.color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.dot-red {
    background-color: #e74c3c;
}

.dot-yellow {
    background-color: #f1c40f;
}

.dot-green {
    background-color: #2ecc71;
}

.txt-dot-red {
    color: #e74c3c;
}

.txt-dot-yellow {
    color: #f1c40f;
}

.txt-dot-green {
    color: #2ecc71;
}

/* 讓 form-control 與 autocomplete 完美對齊 */
.ui-widget input.form-control {
    width: 100%;
}


.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 {
    border: 1px solid #e3e3e300;
    background: #00000015;
    font-weight: normal;
    color: #222222;
    padding: 0 5px;
    border-radius: 50px 0 0px 50px;
    text-shadow: 0px 1px #ffffff73;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
    border: #003eff;
    background-color: #ffffff;
}

label {
    text-shadow: 0px 1px #ffffff73;
}

/* icon 的內白色陰影（預設）*/
/* svg:not(:host).svg-inline--fa,
svg:not(:root).svg-inline--fa {
    filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 0.96));
} */

/* 如果 icon 是白色，改為黑色陰影 */
svg:not(:host).svg-inline--fa.white,
svg:not(:root).svg-inline--fa.white {
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.9));
}

/* 放大 20% */
/* @media (max-width: 768px) {
    body {
        zoom: 1.2;
    }
} */



.style-btn {
    display: flex;
    gap: 10px;
    /* 三顆按鈕的間距，可調 */
    align-items: center;
    justify-content: center;
}

.style-btn a {
    width: 30px;
    height: 30px;
    display: inline-block;
    background: #ccc;
    /* 可換成你要的顏色 */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin-bottom: 0px;
}

.style-btn a:hover {
    transform: scale(1.15);
    /* hover 放大效果，可移除 */
    background: #999;
}



.scroller,
.sidebar-sticky,
.table-responsive {
   --scrollbar-color-thumb: rgb(93 92 92);
    --scrollbar-color-track: rgb(168 168 168);
    --scrollbar-width: 0.5em;
    --scrollbar-width-legacy: 0.5em;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {

    .scroller,
    .sidebar-sticky,
    .table-responsive {
        scrollbar-width: var(--scrollbar-width);
        /* scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track); */

    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {

    .scroller::-webkit-scrollbar-thumb,
    .sidebar-sticky::-webkit-scrollbar-thumb,
    .table-responsive::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }

    .scroller::-webkit-scrollbar-track,
    .sidebar-sticky::-webkit-scrollbar-track,
    .table-responsive::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }

    /* 修正了這裡，確保是針對整個 ::-webkit-scrollbar 元素 */
    .scroller::-webkit-scrollbar,
    .sidebar-sticky::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}


/* --- 分頁基礎樣式 --- */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    align-items: center;
}

.page-item {
    padding: 0;
    margin: 0;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0;
    color: rgba(8, 10, 102, 0.754);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    margin-right: 0px;
    transition: all 0.1s;
    cursor: pointer;
    border: 1px solid #dee2e6;
    box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0.25) !important;
}

/* --- 圓角控制 --- */
.page-item:first-child .page-link {
    border-top-left-radius: 1.2rem !important;
    border-bottom-left-radius: 1.2rem !important;
}

.page-item:last-child .page-link {
    border-top-right-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
}

/* --- 狀態控制：Hover --- */
.page-item .page-link:hover {
    box-shadow: inherit;
    color: rgba(5, 7, 141, 1);
}

/* --- 狀態控制：選中頁面 (Active) --- */
/* 移除 .page-link:active 以免誤傷一般按鈕 */
.page-item.active .page-link {
    z-index: 3;
    color: rgb(255 255 255 / 86%) !important;
    background-color: #000000 !important;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.28), inset -2px -2px 4px rgba(232, 232, 232, 0.36) !important;
    border: none !important;
    pointer-events: none; /* 選中頁面不需再點擊 */
}

/* --- 狀態控制：點擊回饋 (僅限非選中按鈕) --- */
.page-link:not(.active):active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.96); /* 增加輕微點擊下壓感 */
}

/* --- 狀態控制：禁用 (Disabled) --- */
.page-item.disabled .page-link {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* 強制無法點擊 */
    box-shadow: none !important;
    background-color: transparent !important;
}

/* --- 獨立導航按鈕樣式 (第一頁/上一頁/下一頁/最後一頁) --- */
.page-item.first .page-link,
.page-item.previous .page-link,
.page-item.next .page-link,
.page-item.last .page-link,
.page-link.first,
.page-link.previous,
.page-link.next,
.page-link.last {
    font-size: 0 !important;
    width: 38px;
}

.page-item.first .page-link::before,
.page-item.previous .page-link::before,
.page-item.next .page-link::before,
.page-item.last .page-link::before,
.page-link.first::before,
.page-link.previous::before,
.page-link.next::before,
.page-link.last::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: small;
    display: inline-block;
    transform: translateY(0.5px);
}

.page-item.first .page-link::before, .page-link.first::before { content: "\f100"; }
.page-item.previous .page-link::before, .page-link.previous::before { content: "\f104"; }
.page-item.next .page-link::before, .page-link.next::before { content: "\f105"; }
.page-item.last .page-link::before, .page-link.last::before { content: "\f101"; }