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

.login-frame{
    width: 450px;
}

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

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

.login-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.login-hint{
    width: 100%;
    text-align: start;
}

#user-login-btn{
    margin-top: 50px;
}

#reverification-code-btn,
#verify-block,
#basic-verify-block,
#basic-reverification-code-btn{
    display: none;
}

#basic-reverification-code-btn,
#basic-confirm-btn{
    margin: 15px 0;
}


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

/* 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;
}


/* 基本資料 */
.basic-information-block li:first-child{
    display: flex;
}

.basic-information-block li:first-child div{
    width: 100%;
}

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

#add-family-btn,
#add-ancestor-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    margin: 20px 0;
}

.family-information-detail-block,
.add-family-block,
.ancestor-information-detail-block,
.add-ancestor-block{
    display: flex;
}

.family-information-detail-block li,
.add-family-block li,
.ancestor-information-detail-block li,
.add-ancestor-block li{
    width: 100%;
}

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

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

.register-activity{
    margin-bottom: 30px;
}

#section-user-container,
#div-family-information,
#div-family-information-detail,
#div-add-family,
#div-ancestor-information,
#div-ancestor-information-detail,
#div-add-ancestor,
#div-my-activtiy-detail,
#div-my-activtiy,
#div-register-detail,
.register-title,
.ul-register-detail-block,
#confirm-family-info-detail-btn,
#confirm-ancestor-info-detail-btn,
#confirm-basic-btn{
    display: none;
}

.set-add-margin{
    margin: 35px 0;
}

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

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

    .basic-information-block li:first-child,
    .family-information-detail-block,
    .add-family-block,
    .ancestor-information-detail-block,
    .add-ancestor-block{
        flex-direction: column;
        margin-bottom: 10px;
    }

    #contact-person-name,
    #contact-person-phone,
    #family-information-detail-name,
    #family-information-detail-birthday,
    #family-information-detail-phone,
    #add-family-name,
    #add-family-birthday,
    #add-family-phone,
    #ancestor-information-detail-name,
    #ancestor-information-detail-birthday,
    #ancestor-information-detail-phone,
    #add-ancestor-name,
    #add-ancestor-birthday,
    #add-ancestor-phone{
        width: -webkit-fill-available;
    }

    .set-add-margin{
        margin: 0;
    }

    .container-main-menu li span{
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
    }    
}

.div-activtiy-list-table,
.div-family-list-table,
.div-ancestor-list-table,
.div-applicant-list-table{
    overflow: hidden;
    overflow-x: scroll;
    width: 100%;
    padding-bottom: 10px;
}

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

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

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


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

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

.register-setting{
    position: absolute;
    bottom: 20px;
    color: black;
    text-decoration: none;
}

/* 家人列表移至先人列表 */
#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;
}