/*個人資料頁面樣式*/

/************************RWD-手機優先(479.99px以下)**********************/
body{
    overflow-y: hidden;
}

/*主容器-header*/
#profile_header_container{
    box-sizing: border-box;
    position: absolute;
    overflow-y: hidden;

    left: 0;
    top: 0;
    width: 100%;
    height: 45vh;
    min-height: 250px;
}
#profile_header_container > .fun_sub_container{
    overflow-y: auto;
}

/*主容器-content*/
#profile_content_container{
    box-sizing: border-box;
    position: absolute;
    /* position: relative; */
    overflow-y: auto;

    left: 0;
    top: max(45vh,250px);
    width: 100%;
    height: calc(100vh - max(45vh,250px) - max(12.32vh,100px)); /*去掉header、navbar */

    padding: 0 1rem 2rem 1rem;
}
#profile_content_container > .fun_sub_container{
    height: unset;
}

/*設定容器*/
#profile_setting_container, #personal_info_container, #profile_friend_list_container,
#my_profile_list_container, #friend_filter_container, #profile_add_friend_container,
#friend_info_container, #profile_add_group_container, #profile_group_list_container,
#add_friend_to_group_container{
    box-sizing: border-box;
    position: absolute;
    overflow-y: auto;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    background-color: #FFF;

    /* display: none; */
}

/*資料容器*/
#finish_data, #all_score_data, #rank_lv_data, #rank_data, #friends_data, #day_data,
#personal_name, #personal_username, #personal_email,
#personal_birthday, #personal_gender, #personal_id{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0.5rem 2.3rem 0.5rem 1rem;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

#user_group{
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 0.5rem 2.3rem 0.5rem 1rem;
    margin-bottom: 2rem;
}

#user_group .user_group_title{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 0.5rem;
}

#user_group .user_group_list{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-left: 5%;
}

#friend_finish_data, #friend_all_score_data, #friend_rank_lv_data,
#friend_rank_data, #friend_day_data{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0.5rem 2.3rem 0.5rem 1rem;
    gap: 0.5rem;
}

#all_score_data, #rank_lv_data, #rank_data, #friends_data, #day_data, #user_group{
    margin-top: 1rem;
}

/*資料排版*/
#finish_data > P, #all_score_data > p, #rank_lv_data > p,
#rank_data > p, #friends_data > p, #day_data > p, #user_group .user_group_title > p,
#friend_finish_data > p, #friend_all_score_data > p,
#friend_rank_lv_data > p, #friend_rank_data > p, #friend_day_data > p,
#personal_name > p, #personal_username > p, #personal_email > p,
#personal_birthday > p, #personal_gender > p, #personal_id > p{
    margin-left: auto;
}

#user_group .user_group_list h3{
    margin-right: auto;
}

/*已完成單元*/
#finish_data, #friend_finish_data, #personal_name{
    border: 1px solid #50B5B9;
    border-radius: 10px;
    background-color: #50B5B9;
}

#finish_data > h2, #finish_data > p,
#friend_finish_data > h2, #friend_finish_data > p,
#personal_name > h2, #personal_name > p{
    color: #FFF;
}

/*總分數*/
#all_score_data, #friend_all_score_data, #personal_username{
    border: 1px solid #F9C26B;
    border-radius: 10px;
    background-color: #F9C26B;
}

#all_score_data> h2, #all_score_data> p,
#friend_all_score_data > h2, #friend_all_score_data > p,
#personal_username > h2, #personal_username > p{
    color: #FFF;
}

/*牌位等級*/
#rank_lv_data, #friend_rank_lv_data, #personal_email{
    border: 1px solid #EC494C;
    border-radius: 10px;
    background-color: #EC494C;
}

#rank_lv_data > h2, #rank_lv_data > p,
#friend_rank_lv_data > h2,#friend_rank_lv_data > p,
#personal_email > h2, #personal_email > p{
    color: #FFF;
}

/*排行榜*/
#rank_data, #friend_rank_data, #personal_birthday{
    border: 1px solid #62CD72;
    border-radius: 10px;
    background-color: #62CD72;
}

#rank_data > h2, #rank_data > p,
#friend_rank_data > h2, #friend_rank_data > p,
#personal_birthday > h2, #personal_birthday > p{
    color: #FFF;
}

/*好友數*/
#friends_data, #personal_gender{
    border: 1px solid #A188D3;
    border-radius: 10px;
    background-color: #A188D3;
}

#friends_data > h2, #friends_data > p,
#personal_gender > h2, #personal_gender > p{
    color: #FFF;
}

/*連續學習天數*/
#day_data, #friend_day_data, #personal_id{
    border: 1px solid #C5AA8F;
    border-radius: 10px;
    background-color: #C5AA8F;
}

#day_data > h2, #day_data > p,
#friend_day_data > h2, #friend_day_data > p,
#personal_id > h2, #personal_id > p{
    color: #FFFFFF;
}

/*學習群組*/
#user_group{
    border: 1px solid #50B5B9;
    border-radius: 10px;
    background-color: #50B5B9;
}

#user_group h2, #user_group h3, #user_group p{
    color: #FFFFFF;
}

/*個人資料*/
#personal_name{
    margin-top: 3.5rem;
}

.personal_sub_container{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/*用戶照片*/
#profile_user_img{
    width: 100%;
    height: 67%;
    border-bottom-left-radius: 50% 8%;
    border-bottom-right-radius: 50% 8%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#profile_accent_text{
    margin-top: 1.4rem;
    margin-left: 1.25rem;
}

/*帳號、好友按鈕容器*/
#profile_info_container{
    margin-left: 1.25rem;
    margin-right: 1.25rem;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;

    overflow-x: hidden;
    overflow-y: hidden;
    gap: 1rem;

    padding: 0.5rem 1rem 0.5rem 0rem;
}

/*好友按鈕*/
#profile_friends{
    background-color: #50B5B9;
    border-radius: 15px;

    display: inline-flex;
    align-items: center;

    padding: 6px 12px;
    gap: 8px;

    white-space: nowrap;
    overflow: hidden;
    width: auto;

    color: #FFF;
}

/*好友按鈕-icon*/
#profile_friends img{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/*選單按鈕樣式*/
.profile_option_btn{
    background-color: unset;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding: 1rem 0;

    color: #BDBDBD;
    font-size: 0.875rem;
    font-weight: 600;
}

/*好友名單篩選按鈕*/
#friend_list_filter{
    position: absolute;
    top: 46.46%;
    right: 5.6%;
}

#friend_list_filter:active{
    transform: scale(0.95);
    cursor: pointer;
    transition: transform 0.1s ease;
}

/*好友清單項目*/
.profile_friend_list_item{
    display: flex;
    gap: 5vw;
    align-items: center;

}

/*好友清單圖片*/
.profile_friend_list_item img{
    width: 6.5%;
    max-width: 1.875rem;
}

/*show friend data btn*/
.friend_item_btn, .add_group_item_btn{
    background-color: #BDBDBD;
    color: #FFF;
    border-radius: 15px;
    
    border: unset;
}

.friend_item_btn{
    margin-left: auto;
}

.friend_item_btn:active, .add_group_item_btn:active{
    transform: scale(0.95);
    cursor: pointer;
    transition: transform 0.1s ease;
}

/*好友資料圖片*/
.friend_info_user_img{
    width: 25%;
    max-width: 180px;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

/*好友資料腔調*/
.friend_info_accent{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: fit-content;
    padding: 0;

    font-size: 0.875rem;
    font-weight: 500;
    color: #828282;
}

/*好友資料帳號*/
.friend_info_user{
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: fit-content;
    padding: 0;

    font-size: 1.125rem;
    font-weight: 700;
    color: #545454;
}

/*好友資料容器*/
#friend_info_content_container{
    overflow-y: auto;
}

/*搜尋好友標題*/
.profile_add_friend_title{
    font-size: 0.875rem;
    font-weight: 700;

    color: #828282;;
}

/*搜尋好友框*/
#profile_add_friend_input, #profile_add_group_input{
    border-radius: 10px;
    background-color: #DADADA;
    border: 1px solid #F0F0F0;
    height: 2.5rem;
    width: 80%;
}

.profile_add_friend_input_container{
    display: flex;
    width: 100%;
}

#profile_add_friend_search, #profile_add_group_submit{
    width: 10%;
    margin-left: auto;
    background-color: #50B5B9;
    color: #FFF;

    border-radius: 10px;
    border: unset;
}
#profile_add_friend_search:active, #profile_add_group_submit:active{
    transform: scale(0.95);
    cursor: pointer;
    transition: transform 0.1s ease;
}

#profile_add_friend_result_img{
    width: 40%;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
}

#add_new_friend{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    border: 1px solid #BDBDBD;

    color: #BDBDBD;
    background-color: unset;
    padding: 1rem 0;

    display: block;
    margin-top: 2.5rem;
}
#add_new_friend:active{
    background-color: #50B5B9;
    color: #FFF;
    cursor: pointer;
}

#add_new_friend_message, #add_new_group_message{
    color: #EC494C;
    font-size: 1rem;
    font-weight: 600;
}

.profile_btn:active{
    transform: scale(0.95);
    cursor: pointer;
    transition: transform 0.1s ease;
}

/*設定按鈕icon*/
#profile_setting{
    position: absolute;
    top: 5vh;
    right: 5%;
}

/*選單按鈕效果*/
.option_btn:active{
    background: #50B5B9;
    color: #FFF;
    cursor: pointer;
}

/*個人資料照片*/
#personal_info_picture{
    width: 30vw;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;

    border-radius: 100%;
}

/*搜尋用戶照片*/
#profile_add_friend_result_img{
    margin-left: auto;
    margin-right: auto;
    width: 30vw;
    display: block;
    max-width: 250px;
}

/*好友關係訊息*/
#is_friend_message{
    text-align: center;
    margin-top: 2rem;
    color: red;
}

/*個人資料內容*/
#personal_info_content_container{
    overflow-y: auto;
}
#personal_info_content_container > .fun_sub_container{
    height: unset;
}

/*設定紐說明區塊*/
#profile_setting_message{
    box-sizing: border-box;
    position: absolute;
    overflow-y: auto;
    padding: 1.23vh 2.5vw;
    background-color: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    display: none;
    z-index: 99;

    top: 12vh;
    right: 5%;
    height: auto;
}

/*群組清單-群組名稱*/
.group_list_item h3{
    font-weight: 700;
    color: #399DA0;
}

.group_list_item .group_owner{
    color: red;
    font-size: 600;
}

/*添加好友到群組列表*/
#add_friend_to_group_content_sub_container h3{
    margin-top: 30px;
    font-weight: 700;
    color: #399DA0;
}

#add_friend_to_group_can ul{
    list-style-type: none;
}

#add_friend_to_group_can li{
    display: flex;
    align-items: center;
    gap: 10px;
}

#add_friend_to_group_can button{
    background-color: #BDBDBD;
    color: #FFF;
    border-radius: 15px;
    border: unset;
    font-size: 0.875rem;
}

/************************RWD-小平板(480px~767.99px)*********************/
@media (min-width: 480px){}

/************************RWD-大平板、小電腦(768px~1199.99px)*************/
@media (min-width: 768px){
    /*主容器-header*/
    #profile_header_container{
        left: unset;
        right: 0;
        width: 30vw;
        height: 100vh;
        min-width: 150px;
    }

    /*主容器-content*/
    #profile_content_container{
        left: max(20vw, 130px);
        top: 0;
        width: calc(100vw - max(20vw, 130px) - max(30vw, 150px));
        height: 100vh;

        padding: 3rem 2rem 2rem 2rem;
    }

    #all_score_data, #rank_lv_data, #rank_data, #friends_data, #day_data, #user_group{
        margin-top: 1.5rem;
    }

    /*用戶照片*/
    #profile_user_img{
        width: 50%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5rem;
        border-radius: 100%;
    }

    #profile_accent_text{
        margin-top: 1.4rem;
        text-align: center;
        margin-left: unset;
    }

    /*帳號、好友按鈕容器*/
    #profile_info_container{
        margin-left: unset;
        margin-right: unset;
        text-align: center;
        justify-content: center;

        flex-direction: column;
        align-items: center;

        padding: 0rem 0rem 1rem 0rem;
        margin-bottom: 5rem;
    }

    #my_profile_list_content_sub_container, #profile_group_list_content_sub_container, #add_friend_to_group_content_sub_container{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .personal_sub_container{
        width: 50%;
    }

    /*設定按鈕icon*/
    #profile_setting{
        transform: scale(1.8);
    }

    #profile_setting:active{
        transform: scale(1.71);
    }

    /*設定紐說明區塊*/
    #profile_setting_message{
        overflow-y: auto;
        padding: 2vh 2.5vw;
        background-color: #FFF;
        border: 1px solid #DADADA;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 15px;

        top: 15vh;
        right: 5%;
        height: auto;
    }
}

/************************RWD-大螢幕(1200px以上)**************************/
@media (min-width: 1200px){}

/************************RWD-手機、小平板橫置處理(寬768以內、高600.01以內)******************************/
@media (orientation: landscape) and (max-height: 600px){
    /*主容器-header*/
    #profile_header_container{
        left: unset;
        right: 0;
        width: 30vw;
        height: 100vh;
        min-width: 150px;
    }

    /*主容器-content*/
    #profile_content_container{
        left: max(20vw, 130px);
        top: 0;
        width: calc(100vw - max(20vw, 130px) - max(30vw, 150px));
        height: 100vh;

        padding: 3rem 2rem 2rem 2rem;
    }

    /*用戶照片*/
    #profile_user_img{
        width: 50%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5rem;
        border-radius: 100%;
    }

    #profile_info_container{
        padding: 0rem 0rem 1rem 0rem;
        margin-bottom: 3rem;
    }

    /*設定按鈕icon*/
    #profile_setting{
        transform: scale(1.5);
    }

    #profile_setting:active{
        transform: scale(1.425);
    }

    /*設定紐說明區塊*/
    #profile_setting_message{
        overflow-y: auto;
        padding: 1.5vh 2.5vw;
        background-color: #FFF;
        border: 1px solid #DADADA;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 10px;

        top: 22vh;
        right: 4%;
        height: auto;
    }

}

/************************hover偽類處理***********************************/
@media (hover: hover) and (pointer: fine){
    .profile_btn:active{
        transform: scale(0.95);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
    .profile_btn:hover{
        transform: scale(1.1);
        cursor: pointer;
        transition: transform 0.1s ease;
    }

    /*選單按鈕效果*/
    .option_btn:active{
        background: #50B5B9;
        color: #FFF;
        cursor: pointer;
    }
    /*選單按鈕效果*/
    .option_btn:hover{
        background: #50B5B9;
        color: #FFF;
        cursor: pointer;
    }

    #add_new_friend:active{
        background-color: #50B5B9;
        color: #FFF;
        cursor: pointer;
    }
    #add_new_friend:hover{
        background-color: #50B5B9;
        color: #FFF;
        cursor: pointer;
    }

    #profile_add_friend_search:active, #profile_add_group_submit:active{
        transform: scale(0.95);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
    #profile_add_friend_search:hover, #profile_add_group_submit:hover{
        transform: scale(1.1);
        cursor: pointer;
        transition: transform 0.1s ease;
    }

    #friend_list_filter:active, .friend_item_btn:active, .add_group_item_btn:active{
        transform: scale(0.95);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
    #friend_list_filter:hover, .friend_item_btn:hover, .add_group_item_btn:hover{
        transform: scale(1.1);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px){
    #profile_setting:active{
        transform: scale(1.71);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
    #profile_setting:hover{
        transform: scale(2);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
}

@media (hover: hover) and (pointer: fine) and (orientation: landscape) and (max-height: 600px){
    #profile_setting:active{
        transform: scale(1.425);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
    #profile_setting:hover{
        transform: scale(1.65);
        cursor: pointer;
        transition: transform 0.1s ease;
    }
}