.chevron-icon {
    transition: transform 0.3s ease-in-out;
}

@keyframes rotateChevron {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}

@keyframes rotateChevronBack {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.rotate-chevron {
    animation: rotateChevron 0.3s ease-in-out forwards;
}

.rotate-chevron-back {
    animation: rotateChevronBack 0.3s ease-in-out forwards;
}

.btn-theme {
    color: #fff;
    background-color: #EB6100;
    border: 1px solid transparent
}
  
.btn-theme:hover {
    color: #fff;
    background-color: #EB6100e6;
    border-color: #EB6100e6;
}

.text-theme {
    color: #024C9F;
}

.QA_section .QA_table .table thead th {
    color: #024C9F;
}

.action_btn {
    color: #024C9F;
}

.action_btn:hover {
    background: #024C9F;
    color: #fff;
    box-shadow: 0 5px 10px rgba(136, 79, 251, 0.26);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 1px solid #EB6100;
    background-color: #EB6100 !important;
}

.dataTables_paginate a:hover {
    background: #EB6100 !important;
    color: #fff !important;
}

.bg-theme-orange {
    background: #EB6100 !important;
}

.bg-theme-blue {
    background: #024C9F;
}
  
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #dc3545 !important;
}

.filtering-label {
    font-weight: bold;
    color: #024C9F;
}
  
.toggle-password {
    position: absolute;
    right: 18px;
    height: 100%;
    background-color: transparent !important;
    border: 0px !important;
    cursor: pointer;
    z-index: 1000;
}

.cs_modal .modal-body .nice_Select, .cs_modal .modal-body input, .cs_modal .modal-body textarea {
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border: 1px solid #F1F3E7;
    padding: 10px 20px;
    color: #707070;
    font-weight: 500;
    margin-bottom: 0;
    font-size: 14px;
    width: 100%;
    display: block;
    font-weight: 500;
    border-radius: 3px;
}

.lms_checkbox_1 .slider-check {
    background-color: #BFBFBF;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}
  
.lms_checkbox_1 .slider-check::before {
    background-color: #F6F7FB;
    bottom: 5px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 20px;
}
  
.lms_checkbox_1 input:checked + .slider-check {
    background-color: #F45B0F;
    color: #fff;
    content: "oui";
}
  
.lms_checkbox_1 input:checked + .slider-check:before {
    transform: translateX(20px);
    background: #F6F7FB;
}



/*================*/

.w100{
    width: 100%;
}

/*上方篩選區*/
.top_card_box{
    padding: 2rem 2rem;
}

.top_card_body{
    padding: 5px 0px 20px 0px;
}

.top_card_body.pb5{
    padding-bottom: 5px;
}

.top_card_bd_list{
    display: flex;
    gap: 20px 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.top_card_bd_list.between{
    justify-content: space-between;
}



.top_card_bd_list .input_box{
    width: 330px;
    max-width: calc(25% - 15px);
    display: flex;
    gap: 10px;
    align-items: center;
}

.top_card_bd_list .input_box.none{
    display: none;

}


.top_card_bd_list .text_box{
    width: calc(25% - 15px);
    display: flex;
    gap: 10px;
    align-items: center;
}



/*換行用 or 特殊排版*/
.top_card_bd_list .input_box.w50{
    max-width: calc(50% - 30px);
    width: 540px;
}

.top_card_bd_list .text_box.w75{
    width: calc(75% - 5px);
}

.top_card_bd_list .text_box.w100{
    width: 100%;
}

.top_card_bd_list .text_box.align_top{
    align-items: flex-start;
}
/*----*/


.top_card_bd_list .input_box>label{
    color: #004EA2;
    font-size: 14px;
    font-weight: 600;
/*    width: 70px;*/
}

.top_card_bd_list .text_box p{
    color: #333;
    line-height: 20px;
}

.top_card_bd_list .input_box input,
.top_card_bd_list .input_box select,
.top_card_bd_list .input_box .choices,
.top_card_bd_list .input_box .all_filter_box,
.top_card_bd_list .text_box p{
    width: calc(100% - 80px);
}



/*----------------*/

.top_card_bd_list .input_box.style_2{
    max-width: calc(50% - 0px);
    width: 350px;
}

.top_card_bd_list .input_box.style_2 input,
.top_card_bd_list .input_box.style_2 select,
.top_card_bd_list .input_box.style_2 .choices{
    width: calc(100% - 110px);
}

/*----------------*/

.top_card_bd_list .input_box.style_3{

}

.top_card_bd_list .input_box.style_3 input,
.top_card_bd_list .input_box.style_3 select,
.top_card_bd_list .input_box.style_3 .choices{
    width: calc(100% - 110px);
}

/*----------------*/


.top_card_bd_list .left{
    width: 60%;
    display: flex;
    gap: 10px 20px;
}



.top_card_bd_list .bd_list_02{
    display: flex;
    justify-content: space-between;
    width: 100%;
}


/*=====================================*/


/*上傳檔案*/

.upload_box{
    gap: 10px 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.upload_list{
    display: flex;
    gap: 0 10px;
    padding: 10px 10px;
    background-color: #fcfcfc;
    align-items: center;

}

.upload_list .title{
    width: calc(100% - 50px);
    color: #666;
    display: flex;
    gap: 0 10px;
}

.upload_list .title a{
    color: #666;
}

.upload_list .icon{
    
}


/*-----------------------------*/




/*table.dataTable tbody tr.open_bg{
    background-color: #f9f9f9;
    border-bottom: 1px #ececec solid;
    border-top: 1px #ececec solid;

}*/


table.dataTable tbody tr.table_open,
table.dataTable tbody tr.collapse{

    background-color:#f9f9f9 ;
}


.QA_section .QA_table tbody tr.table_open:hover,
.QA_section .QA_table tbody tr.collapse:hover  {
    background: #f5f5f5;
}


/*展開table的上下border =============*/

/*第一層往下 最接近的.show 上方+border*/
.tr_top + tr.collapse.show td{
    border-top: 1px #ececec solid!important;
}

/*第二層往下 最接近的 第一層 上方+border*/
tr.collapse.show + tr.tr_top td {
    border-top: 1px #ececec solid!important;
}


/*因為最後一筆 底下無第一層，單獨上下方+border*/
tr.collapse.show:nth-last-child(1) td{
    border-bottom: 1px #ececec solid!important;
}

/*===========================*/





.title_hover td{
    position: relative;
}

.title_hover td[name]:hover:after {
    content: attr(name);
    position: absolute;
    bottom: calc(100% + -10px);
    left: 10px;
    background-color: #333333d1;
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    width: auto;
    min-width: 18px;
    min-height: 24px;
    white-space: nowrap;
    z-index: 1;

}

.title_hover td[name]:hover:before {
    content: "";
    position: absolute;
    bottom: calc(100% + -16px);
    left: 14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #333333d1 transparent transparent transparent;
    z-index: 1;
}




/*==================*/

/*複選*/

.all_filter_box{
    position: relative;
}


.filter_b1{
    cursor: pointer;
    background-color: #ffffff;
    border: 1px #BBC1C9 solid;
    display: flex;
    padding: 6px 10px;
    font-size: 18px;
    align-items: center;
    border-radius: 5px;
}

.filter_b1 p{
    width: calc(100% - 10px);
    overflow: hidden;
    /* display: -webkit-box; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: auto;
}

.filter_b1 img{
    width: 10px;
}





.all_filter_box {
    position: relative;
    z-index: 10;
}

.all_filter_list {
    position: absolute;
    top: 100%;
    z-index: 2;
    background-color: #fff;
    box-shadow: 0px 2px 30px rgb(0 0 0 / 10%);
    width: 100%;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* ✅ 新增 */
    max-height: 200px;
    overflow-y: auto;
}

.all_filter_list.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.all_filter_list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.all_filter_list ul::-webkit-scrollbar {
    width: 6px;
    background-color: #E2E2E2;
}

.all_filter_list ul::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #E2E2E2;
    background-color: #E2E2E2;
}

.all_filter_list ul::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 5px;
}

.all_filter_list ul li label {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    cursor: pointer;
}

.all_filter_list input[type=checkbox] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.all_filter_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.all_filter_bg.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



/*==================================*/

.card .btn.delete-button{
    position: absolute;
    right: 5px;
    top: 5px;
}