/* section 登入區塊 */
#section-admin-login{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-frame{
    width: 500px;
}

.login-title{
    color: white;
    text-align: center;
    padding: 30px;
    border-radius: 5px 5px 0px 0px;
    background-color: #00A8E088;
    border: 1px solid #00A8E088;
}

.login-container{
    border: 1px solid #CED4DA;
    border-top: 0;
    border-radius: 0px 0px 5px 5px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-input-frame{
    width: 300px;
    height: 30px;
    margin: 15px 0px;
}

.login-input{
    width: 100%;
    height: 20px;
    padding: 5px;
}

.login-hint{
    margin: 0px 5px;
}

.login-button{
    margin-top: 50px;
}

.button-group{
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 上傳圖片按紐 */
.file-btn{
    position: relative;
    color: white;
    background-color: #188CCC;
    border-radius: 5px;
    padding: 5px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-input-btn{
    cursor: pointer;
    position: absolute;
    width: 100%;
    opacity: 0;
}

.file-btn:hover,
.file-input-btn:hover{
    background-color: #004986;
}

/* section 內容區塊 */
.container-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.container-main-menu{
    display: flex;
    align-items: center;
    background-color: #DCEDF6;
}

.container-main-menu-active{
    color: white;
    background-color: #188CCC;
}

.container-main-menu li{
    cursor: pointer;
    padding: 15px;
}

.container-main-menu li:hover{
    color: white;
    background-color: #188CCC;
}

.container-sub-menu{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
    color: #373A3C;
}

.container-sub-menu-active{
    background-color: #E2EED8;
}

.container-sub-menu li{
    cursor: pointer;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #DDDDDD;
    border-bottom: 0px;
}

.container-sub-menu li:hover{
    background-color: #E2EED8;
}

.field-title{
    border-bottom-color: #56C0E0;
}

/* div 新增活動 & div 編輯活動*/
.ul-activity{
    display: flex;
}

.ul-activity li{
    width: 100%;
}

.upload-image-block{
    background-color: #F8F8F8;
    padding: 10px;
    width: 50%;
}

.upload-button-block{
    justify-content: space-between;
}

#add-activity-upload-img,
#edit-activity-upload-img{
    width: 100%;
    padding: 15px 0px;
}

.checkbox-distance{
    margin-bottom: 15px;
}

.checkbox-distance span{
    margin-left: 5px;
}

.remark-distance{
    margin-left: 20px;
}

.activity-button-group{
    text-align: center;
    margin-top: 50px;
}

#add-activity-name,
#edit-activity-name{
    width: 25%;
}

#add-activity-remark,
#edit-activity-remark,
#add-activity-place,
#edit-activity-place{
    width: 50%;
}

/* div 活動總覽 */
.search-condition-block{
    background-color: blanchedalmond;
    padding: 5px 15px;
    padding-bottom: 20px;
}

.search-condition-block .col-arrangement{
    margin-right: 30px;
}

.search-button-group{
    text-align: end;
}

.activity-list-title-group{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* div 報名者 */
.activity-state-infomation-block{
    background-color: #FCF7E4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-top: 15px;

}
.activity-state-infomation-block ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-state-infomation-block li{
    border-left: 10px solid #F0AD4E;
    padding: 5px;
    margin-right: 20px;
}

#applicant-list-ul > li{
    border-bottom:1px dashed #707070;
    padding: 20px 0px;
}

#applicant-list-ul > li:last-child{
    border-bottom:0;
}

.applicant-list-state-infomation{
    background-color: #EFF1F1;
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 15px 0px;
}

.applicant-list-state-infomation li{
    border-left: 10px solid #8E959B;
    padding: 5px;
    margin-right: 20px;
}


.applicant-title{
    color: #004986;
}

.history-title{
    color: #004986;
    display: flex;
    align-items: center;
}

#back-page-btn{
    margin-right: 10px;
}

/* div 代表人管理 */
.user-list-title-group{
    display: flex;
    align-items: center;
    justify-content: space-between;    
}

/* 序號排序 */
.dragging {
    opacity: 0.5;
  }
  
.td-border-right-none{
    border-right: 0px solid white !important;
}

.td-border-left-none {
    border-left: 0px solid white !important;
}

.sortable{
    cursor: pointer;
}

span.field-sort svg {
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.descending-order{
    top: 10px;
    position: relative;
    display: none;
}

.ascending-order{
    display: none;
}

/* div 代表人詳情 */
svg.drag-sort-svg {
    width: 25px;
    height: 25px;
}

.set-serial-num{
    width: 15%;
}

#applicant-detail-name,
#applicant-detail-phone{
    width: 30%;
}

#applicant-detail-address{
    width: 50%;
}

/* div 新增代表人 */

#add-new-applicant-serial-num{
    width: 15%;
}

#add-new-applicant-name,
#add-new-applicant-phone{
    width: 30%;
}

#section-admin-container,
#div-edit-activity-and-check-applicant,
#div-add-activity,
#div-edit-activity,
#div-user-management,
#div-applicant,
#div-applicant-detail,
#div-add-new-applicant,
#div-add-family,
#view-history-block{
    display: none; 
}

#confirm-user-info-detail-btn,
#add-new-applicant-family-submit,
#back-applicant{
    display: none;
}

#user-export-excel{
    margin-right: 10px;
}

/* 代表人資料詳情內選單 */
.applicant-sub-menu{
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.applicant-sub-menu-active{
    background-color: #DCEDF6;
}

.applicant-sub-menu li{
    cursor: pointer;
    padding: 15px;
    border: 1px solid #DCEDF6;
    margin-right: 20px;
}

.applicant-sub-menu li:hover{
    background-color: #DCEDF6;
}

/* 回上一頁按鈕 */
/* 回上一頁按鈕 */
.prepage-button-block {
    text-align: center;
}

.top-prepage-button-block {
    text-align: right;
    margin-right: 10px;
}

/* 查看報名者 - 回上一頁按鈕 */
#applicant-top-prepage-button-block{
    text-align: right;
    margin-right: 30px;
    margin-top: -40px;
}

/* 新增家人與協助報名 */
.div-user-family-list-table{
    margin-top: 10px;
}

.list-block-setting{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-block-setting div{
    display: flex;
    align-items: center;
}

.load-user-detail-block{
    margin-top: 20px;
    margin-bottom: 35px;
    color: #6a6b6c;
}

.load-user-detail-block li{
    margin-bottom: 20px;
}

.edit-frame{
    border: 1px solid #CED4DA;
}

.add-new-activity,
.cancle-help-btn{
    border: 1px solid mediumpurple;
    margin-left: 10px;
    display: none;
}

.add-new-activity{
    width: 175px;
}

#user-family-list-tbody .address{
    text-align: start;
    padding-bottom: 30px;
}

.confirm-btn,
.cancle-btn,
.activity-remark-block,
.confirm-registration-btn{
    display: none;
}

#ul-applicant-block > li{
    border: 1px solid #188CCC;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.applicant-no{
    background-color: #DCEDF6;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.applicant-clz{
    cursor: pointer;
    position: relative;
    width: 25px;
    height: 25px;
    top: 10px;
}

.applicant-clz::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: #004986;
    transform: rotate(45deg);
}

.applicant-clz::after{
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: #004986;
    transform: rotate(-45deg);
}

.ul-add-applicant-block{
    margin: 15px;
    margin-bottom: 30px;
}

.ul-add-applicant-block li{
    display: flex;
    margin-bottom: 30px;
}

.ul-add-applicant-block .applicant-name-set,
.ul-add-applicant-block .applicant-phone-set{
    width: 100%;
}

.applicant-phone-set .same-phone-block{
    margin: 0 10px;
}

#user-family-list-tbody .same-address-block{
    margin: 0px;
}

.datepicker-bottom{
    width: 100%;
}

@media (max-width:768px) {
    .container-head{
        flex-direction: column;
    }

    .container-head h1{
        margin: 20px 0;
    }

    .ul-activity {
        flex-direction: column;
    }

    .user-list-title-group{
        align-items: self-start;
        flex-direction: column;
    }

    .ul-add-applicant-block li{
        flex-direction: column;
    }

    #user-export-excel,
    #add-user-btn{
        margin-bottom: 20px;
    }

    #add-activity-name,
    #edit-activity-name,
    #add-activity-remark, 
    #edit-activity-remark, 
    #add-activity-place, 
    #edit-activity-place,
    #add-new-applicant-serial-num,
    #add-new-applicant-name,
    #add-new-applicant-birthday,
    #add-new-applicant-phone,
    #applicant-detail-serial-num,
    .set-serial-num,
    #applicant-detail-name,
    #applicant-detail-phone{
        width: -webkit-fill-available;
    }

    .serial-num-use{
        margin-left: 0px;
    }

    .activity-state-infomation-block ul,
    .applicant-list-state-infomation{
        align-items: flex-start;
        flex-direction: column;
    }

    .activity-state-infomation-block li,
    .applicant-list-state-infomation li{
        margin-bottom: 10px; 
    }

    .list-block-setting div{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .help-registration-btn,
    .add-new-activity,
    .cancle-help-btn {
        margin: 0;
        margin-left: unset;
        margin-bottom: 10px;
    }

    .history-title{
        flex-direction: column;
        align-items: start;
    }

    #back-page-btn{
        margin-bottom: 10px;
    }
}

@media (max-width:540px){
    .upload-image-block{
        width: -webkit-fill-available;
    }
}

.div-activtiy-list-table,
.div-user-list-table,
.div-family-list-table,
.div-applied-list-table,
.div-user-family-list-table{
    overflow: hidden;
    overflow-x: scroll;
    padding-bottom: 10px;
}

.div-activtiy-list-table::-webkit-scrollbar,
.div-user-list-table::-webkit-scrollbar,
.div-family-list-table::-webkit-scrollbar,
.div-applied-list-table::-webkit-scrollbar,
.div-user-family-list-table::-webkit-scrollbar{
    height: 8px;
}

.div-activtiy-list-table::-webkit-scrollbar-button,
.div-user-list-table::-webkit-scrollbar-button,
.div-family-list-table::-webkit-scrollbar-button,
.div-applied-list-table::-webkit-scrollbar-button,
.div-user-family-list-table::-webkit-scrollbar-button{
    background: transparent;
    border-radius: 5px;
}

.div-activtiy-list-table::-webkit-scrollbar-track-piece,
.div-user-list-table::-webkit-scrollbar-track-piece,
.div-family-list-table::-webkit-scrollbar-track-piece,
.div-applied-list-table::-webkit-scrollbar-track-piece,
.div-user-family-list-table::-webkit-scrollbar-track-piece{
    background: transparent;
}

.div-activtiy-list-table::-webkit-scrollbar-thumb,
.div-user-list-table::-webkit-scrollbar-thumb,
.div-family-list-table::-webkit-scrollbar-thumb,
.div-applied-list-table::-webkit-scrollbar-thumb,
.div-user-family-list-table::-webkit-scrollbar-thumb{
    border-radius: 25px;
    background-color: #DCEDF6;
}

.div-activtiy-list-table::-webkit-scrollbar-track,
.div-user-list-table::-webkit-scrollbar-track,
.div-family-list-table::-webkit-scrollbar-track,
.div-applied-list-table::-webkit-scrollbar-track,
.div-user-family-list-table::-webkit-scrollbar-track{
    box-shadow: transparent;
}

#dlink{
    display: none;
}

/* 序號是否重複 */
.serial-num-use{
    margin-left: 10px;
    display: none;
}

.usable{
    color: green;
}

.unusable{
    color: red;
}

/* 已報名活動 - 查看詳情 */
#registered-activities-detail{
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    display: none;
}

#registered-activities-detail .container{
    width: 350px;
    border: 1px solid #F68621;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media (max-width:540px){
    #registered-activities-detail .container{
        width: 95%;
    }
}

#registered-activities-detail .activtiy-detail-name{
    color: #56C0E0;
}

#registered-activities-detail button{
    position: relative;
    z-index: 1;
}

.title-block{
    background-color: #FFF9CB;
    border-radius: 5px 5px 0px 0px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.activtiy-detail-close{
    cursor: pointer;
    position: relative;
    width: 25px;
    height: 25px;
}


.activtiy-detail-close::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: #F68621;
    transform: rotate(45deg);
    top: 12.5px;
}

.activtiy-detail-close::after{
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: #F68621;
    transform: rotate(-45deg);
    top: 12.5px;
}

.content-block{
    height: 450px;
    padding: 15px;
    box-sizing: content-box;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: white;
}

.sub-project-title{
    color: #004986;
    margin-bottom: 15px;
}

.ul-my-activtiy-detail-block{
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px dashed black;
}

.ul-my-activtiy-detail-block li{
    border-left: 10px solid #8E959B;
    padding-left: 10px;
    margin: 10px 0;
}


.address-or-location {
    margin-bottom: 15px;
}

.g-sub-table,
.g-sub-table tbody,
.g-sub-table td,
.g-sub-table tr:not(:first-child) {
    display: block;
}

.g-sub-table{
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}

.g-sub-table td {
    border: 0;
    position: relative;
    padding: 10px;
    padding-left: 40%;
    text-align: left;
    word-break: break-all;
}

.g-sub-table td:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    font-weight: bold;
    color: #000000;
    padding: 10px;
    padding-right: 50%;
}

.g-sub-table td:nth-of-type(n):before {
    /*添加手機版列表標題*/
    content: attr(data-th);
}

.g-sub-table tbody tr{
    border: 1px solid #CCCCCC;
}

.g-sub-table tbody tr:nth-child(odd){ /*奇數*/
    background-color: #ECECEC;
}

.g-sub-table tbody tr:nth-child(even){ /*偶數*/
    background-color: #FFFFFF;
}

/* 存活選項 */
.pick-survive-block {
    margin: 0 10px;
    color: #56C0E0
}

/* 查看歷史紀錄 */
#view-history-block{
    margin-top: 20px;
}

.view-history-year{
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

.view-history-year li {
    margin-right: 10px;
}

.view-history-infomation{
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 15px 0px;
    background-color: #EFF1F1;
    display: none;
}

.view-history-infomation li {
    border-left: 10px solid #8E959B;
    padding: 5px;
    margin-right: 20px;
}

/* 家人列表移至先人列表 */
#move-to-ancestor-list{
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    display: none;
}

#move-to-ancestor-list .container{
    width: 350px;
    border: 1px solid #F68621;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media (max-width:540px){
    #move-to-ancestor-list .container{
        width: 95%;
    }
}

#move-to-ancestor-list .move-to-ancestor-list-caption{
    color: #56C0E0;
    font-weight: bolder;
}

#move-to-ancestor-list button{
    display: block; /* 使 margin 生效 */
    margin: 0 auto; /* 上下保持0，左右自動調整以居中 */
    padding: 10px;
    border-radius: 15px;
    margin-top: 80px;
}

.title-block{
    background-color: #FFF9CB;
    border-radius: 5px 5px 0px 0px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.move-to-ancestor-list-close{
    cursor: pointer;
    position: relative;
    width: 25px;
    height: 25px;
}


.move-to-ancestor-list-close::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: #F68621;
    transform: rotate(45deg);
    top: 12.5px;
}

.move-to-ancestor-list-close::after{
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: #F68621;
    transform: rotate(-45deg);
    top: 12.5px;
}

.content-block{
    height: 250px;
    padding: 10px;
    box-sizing: content-box;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: white;
}

.content-block-item{
    padding: 10px;
}

.content-block input{
    border: 1px solid gray;
    margin-top: 10px;
}

/* 加載圖示 */
.sigma_preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: .3s;
}

@-webkit-keyframes rot {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rot {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.sigma_preloader img {
    animation: rot 5s linear infinite;
    max-width: 100%;
    height: auto;
}

.sigma_preloader.hidden {
    opacity: 0;
    visibility: hidden;
}