body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 100vh;
    color: #1cbfff;
    background: #0b0c1b;
    cursor:default;
    font-family: Arial, Helvetica, sans-serif;
}
box-icon{
    cursor:pointer
}
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: #1cbfff; 
  border-radius: 15px;
}


::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


.top_bar{
    /* position: fixed; */
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    font: 15px 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #FFF;
    box-sizing: border-box;
    padding: 4px 1.2%;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    background: #0b0c1b;
    opacity: 0.9;
    text-align: center;
    align-items: center;
    border-bottom: 1px solid gray;
}
.top_left{
    display: flex;
}

.observer_holder{
    display: flex;
}
.tag_observer{
    width: 100%;
    background: none;
    border: 0;
    border-bottom: solid 1px #1cbfff;
    color: #FFF;
    font-size: 15px;
}
.tag_observer:focus{
    outline: none;
}
.observer_btn{
    font-weight: bold;
    font-size: 12px;
    border: 0;
    width: 12px;
    cursor: pointer;
    outline: none;
    border-radius: 999px;
    background: none;
    color: #1cbfff;
    padding: 5px;
    border: solid 1px #1cbfff;
}

.top_left_inner{
    display: flex;
}
.mark{
    width: 100%;
    height:50px;
    margin-top: 15px;
    cursor: pointer;
}

.top_mid{
    width: 100%;
}
.top_right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    margin-right: 25px;
}

.logout{
    margin-right: 20px;
}
.notifi{
    margin-right: 10px;
    margin-right: 20px;
}
.unread_notifis{
    color: #1cbfff;
    font-size: 15px;
}
.notifi_list{
    position: absolute;
    top: 50px;
    height: 0px;
    width: 340px;
    right:5px;
    background-color: #000;
    overflow: scroll;
}
.notifi_box{
    border-bottom: 1px solid gray;
}
.one_notify{
    padding: 10px;
    color: #1cbfff;
    font-size: 12px;

}

.signout_btn{
    height: 25px;
    font-weight: bold;
    border: 0;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border-radius: 999px;
    display: inline-block;
    background: #0b0c1b;
    color: #1cbfff;
    line-height: 1;
    border: solid 1px #1cbfff;
    margin-right: 10px;
}

.block_creator{
    display: flex;
    justify-content: space-between;
}
.block_creator .block_user{
    border-radius: 15px;
    padding: 15px;
    margin: 3px;
    display: flex;
    border-top: solid 1px #1cbfff;
    border-bottom: solid 1px #1cbfff;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}
.block_creator .blockor{
    width: 100%;
    background-color: #0b0c1b;
    border-radius: 15px;
    padding: 15px;
    margin: 0 auto;
}

.blockor_inner{
    display: flex;
    border-radius: 8px;
    background: none;
    overflow: hidden;
    border: solid 1px #1cbfff;
}

.blockor_content{
    background: none;
    border: 0;
    box-shadow: none;
    outline: none;
    padding: 0 2px;
    margin: 0;
    resize: none;
    border-radius: 7px;
    font-size: 25px;
    line-height: 37px;
    height: 37px;
    display: block;
    width: 100%;
    color:#1cbfff;
}

.block_submit_btn{
    font-weight: bold;
    font-size: 16px;
    border: 0;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    display: inline-block;
    font-weight: bold;
    background-color: #0b0c1b;
    color: #1cbfff;
    padding: 9px 13px;
}

.block_guard{
    text-align: center;
    color: gray;
    cursor: pointer;
}

.main_frame{
    /* display: flex;
    background-color: #0b0c1b;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
    background-size: cover;
    width: 20%;
    border-radius: 15px;
    margin: 4px;
    padding: 4px;
    display: flex;
    max-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;
    border-radius: 20px;
    margin: 4px;
    padding: 4px;
    height: 800px;
    overflow: scroll;
    overflow-x: auto;
    text-align: center;
    justify-content: space-around;
    width: 20%;
    overflow: scroll;
    border-radius: 20px;
    margin: 4px;
    padding: 4px;
    color: #FFF;
    height: 750px;
    overflow-x: hidden; */
    display: flex;
    justify-content: space-around;

}
.member_functions{
    width: 20%;
    border-radius: 15px;
    margin: 4px;
    padding: 4px;
    display: flex;
    height: 100%;
    flex-direction: column;

}

.m_f_mytags{
    margin: 2px;
    border-radius: 10px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    max-height: 50%;
}
.my_tags_search{
    border-bottom: #EEE 1px solid;
}

.tag_searcher{
    width: 95%;
    background: none;
    font-size: 18px;
    padding: 5px 7px;
    border: 0;
    text-align: left;
    color: #1cbfff;
}
.tag_searcher:focus{
    outline: none;
}
.tag_search_btn{
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    margin-top: 10px;
    border: 0;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border-radius: 999px;
    display: inline-block;
    background: none;
    color: #1cbfff;
    padding: 9px 13px;
    font-size: 13px;
    line-height: 1;
    border: solid 1px #1cbfff;
    transition: all 0.5s;
    letter-spacing: 2px;
}
.tag_search_btn:hover{
    border-color: #5fd0fd;
    color: #FFF;
    box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
}
.tag_search_btn:active{
    background-color: #FFF;
    color: #000;
}
.tag_box{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.a_tag{
    padding: 2px 2px;
    background: #0b0c1b;
    color: #1cbfff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 3px;
    margin-top: 3px;
    font-size: 6px;
    word-wrap: break-word;
}
.a_tag:hover{
    background-color: rgb(63, 63, 63);
}
.a_tag_name{
    text-decoration: none;
    color: #FFF;
}
.a_prime_name{
    text-decoration: none;
    color: rgb(226, 12, 252)
}
.del_tag{
    width: 8px;
    height: 8px;
    cursor: pointer;
    padding-left: 3px;
}
.m_f_hottags{
    border-radius: 10px;
    padding: 15px;
    border-top: solid 1px #1cbfff;
    border-bottom: solid 1px #1cbfff;
}
.m_f_me{
    padding: 20px 0 20px;
}
.bottom_inner{
    color: #666;
    overflow: visible;
    line-height: 15px;
}
.img_pre_box{
    display: none;
    justify-content: center;
    padding: 25px;
}
.upload_img_preview{
    width: 100px;
    border-radius: 5px;
}

.block_tools{
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: space-around;

}
.block_tools_inner{
    display: flex;
    justify-content: space-around;
    width: 90%;
    user-select: none;
}

.user_icon{
    width: 86px;
    height: 86px;
    border-radius: 999px;
}
.user_info{
    padding: 5px;
    color:#1cbfff;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.user_info_in{
   display: flex;
   align-items: center;
   margin-top: 3px;
}
.image-upload{
    opacity: 1;
}
.user_control{
    margin-top: 3px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    color: #1cbfff;
}
.status{
    cursor: pointer;
}

.skill{
    cursor: pointer;
    width: 50%;
    text-align: center;
}
.talent{
    cursor: pointer;
    width: 50%;
    text-align: center;
}
.hot_holder{
    display: flex;
    justify-content: center;
    padding-left: 25px;
    padding-right: 30px;
}
.hot_box{
    overflow: scroll;
    height: 90%;
    padding: 5px;;
    overflow-x: auto;
}
.a_hot_box{
    display: flex;
    justify-content: space-between;
    padding-left: 25px;
    padding-right: 25px;
    border-bottom: #666 1px solid;
    font-size: 6px;
    
}
.a_hot_box:hover{
    background-color: rgb(50, 50, 50);
}
.a_hot_tag{
    cursor: pointer;
}
.a_prime_tag{
    cursor: pointer;
    color: rgb(226, 12, 252);
}
.member_blocks{
    width: 45%;
    border-radius: 20px;
    margin: 4px;
    padding: 4px;
    height: calc(100vh - 100px);
    overflow: scroll;
    overflow-x: auto;
    text-align: center;
}
.block_box{
    display: flex;
    flex-direction: column;
}
.a_block{
    margin-top: 10px;
    border-top: solid #0f6689;
    transition: all 1s ease;
    overflow: hidden;
    padding: 25px;
}


.block_titler{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.block_avatar{
    border-radius: 999px;
    width: 50px;
    height: 50px;
}
.block_header{
    display: flex;
    align-items: center;
}
.block_counter{
    font-size: 15px;
    margin-right: 5px;
}
.block_typer{
    margin-left: 15px;
    text-align: left;
}
.block_anonymous{
    margin-left: 15px;
    color: rgb(226, 12, 252);
}
.block_content{
    overflow-wrap: break-word;
    margin-top: 25px;
    margin-bottom: 25px;
    color: #FFF;
    font-size: 21px;
    text-align: left;
}
.player{
    width: 100%;
}
.block_image{
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}
.a_block_tag{
    color: gray;
    font-size: 12px;
}
.block_time{
    font-size: 9px;
    text-align: end;
}
.vote_boss{
    display: flex;
}
.vote_display{
    border-left: 1px solid #1cbfff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    width: 49%;
}
.a_vote_box{
    display: flex;
    margin: 3px;
    justify-content: space-between;
}
.chart_holder{
    border-right: 1px solid #1cbfff;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    width: 49%;
}
.vote_btn{
    font-weight: bold;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border-radius: 999px;
    display: inline-block;
    background: none;
    color: #1cbfff;
    font-size: 13px;
    border: solid 1px #1cbfff;
}
.vote_btn:active{
    background-color: #FFF;
    color: #000;
}

.the_canvas{
    width: 100%;
    height: 100%;
}
.see_result{
    font-weight: bold;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border-radius: 999px;
    background: none;
    color: #1cbfff;
    font-size: 15px;
    border: solid 1px #1cbfff;
}
.see_result:active{
    background-color: #FFF;
    color: #000;
}
.good_box{
    display: flex;
    align-items: center;
    user-select: none;
}
.good{
    cursor: pointer;
    border-radius: 5px;
}
.bad{
    border-radius: 5px;
}
.good:active{
    background-color: gray;
}
.bad_box{
    margin-left: 15px;
    display: flex;
}
.bad:active{
    background-color: gray;
}
.share{
    margin-left: 15px;
}
.block_message_control{
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.guest_input_holder{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 15px;
    user-select: none;
}
.guest_input{
    align-self: flex-start;
    background: none;
    border: 0;
    border-bottom: solid 1px #595959;
    color: #FFF;
    width: 100%;
    font-size: 18px;
    transition: all 0.25s;
    
}
.guest_input:focus{
    outline: none;
    border-bottom: solid 1px #1cbfff;
    width: 100%;
}
.guest_input_btn{
    border: 0;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border-radius: 7px;
    display: inline-block;
    background: #0b0c1b;
    color: #1cbfff;
    line-height: 1;
    border: solid 1px #1cbfff;
    font-size: 18px;
    width: 20%;
    margin-right: 6px;
    
}

.guest_input_btn:hover{
    border-color: #5fd0fd;
    color: #FFF;
    box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
}
.guest_input_btn:active{
    background-color: #FFF;
    color: #000;
}

.message_box{
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    overflow-y: scroll;
    max-height: 180px;
}

.one_mess{
    display: flex;
    margin-top: 10px;
    align-items: center;

}
.mess_avatar{
    height: 25px;
    width: 25px;
    border-radius: 999px;
}
.message_who{
    margin-left: 5px;
}
.message_say{
    margin-left: 15px;
    color: #FFF;
    max-width: 50%;overflow-wrap: break-word;
    text-align: left;
}
.nice{
    margin-left: 5px;
    border-radius: 5px;
}
.nice:active{
    background-color: gray;
}
.message_time{
    margin-left: 15px;
    font-size: 12px;
}


.member_chats{
    width: 20%;
    overflow: scroll;
    border-radius: 20px;
    margin: 4px;
    padding: 4px;
    color: #FFF;
    height: 100%;
    overflow-x: hidden;
}

.member_list{
    border-top: 1px solid #1cbfff;
    padding: 15px;
    margin-top: 15px;
    border-radius: 15px;
    border-bottom: 1px solid #1cbfff;
}
.friend_list{
    margin: 2px;
    border-radius: 10px;

    background-color: none;

}
.friend_in{
    font-size: 15px;
    color: #1cbfff;
    text-align: center;
}
.friend_box{
    display: flex;
    margin-top: 7px;
    justify-content: space-between;
}

.friend_avatar{
    width: 20px;
    height: 20px;
    margin-right: 15px;
}
.mess_img{
    width: 25px;
    margin-left: 5px;
}
.request_list{
    margin: 2px;
    border-radius: 10px;
    margin-top: 20px;
    background-color: none;
    text-align: center;
}
.waiting_list{
    margin: 2px;
    border-radius: 10px;
    margin-top: 20px;
    background-color: none;
}
.a_wait{
    display: flex;
    margin: 5px;
    justify-content: space-around;
    align-items: center;
}

.check{
    background-color: #000;
}
.x{
    background-color: #000;
}

/* 聊天區域 */

footer{
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    position: absolute;
    bottom: 0px;
    width: 100%;
    
}
.chat_holder{
    position: absolute;
    bottom: 25px;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    max-height: 350px;
}

.chat_tag{
    border-bottom: solid 1px #1cbfff;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.tag_who{
    padding-left: 3px;
}
.tag_tool{
    display: flex;
    align-items: center;
}
.min_tag{
    width: 25px;
}
.plus_tag{
    width: 25px;
}
.close_tag{
    width: 25px;
    
}
.a_room{
    max-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 300px;
    border: solid 1px #1cbfff;
    background-color: rgba(11, 12, 27, 0.9);
    margin-left: 25px;
    border-radius: 5px;
}
.chat_input{
    background: none;
    border: 0;
    border-bottom: solid 1px #1cbfff;
    color: #FFF;
    font-size: 18px;
    padding: 3px;
}
.chat_input:focus{
    outline: none;
    
}
.bar_box{
    display: flex;
    flex-direction: column;
}
.sys_mess{
    text-align: center;
}
.world_of_words{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 0px;
}
.my_mess{
    font-size: 18px;
    color: #FFF;
    padding: 5px;
    text-align: left;
    margin-top: 5px;
    margin-left: 0px;
    border-top: 1px solid #3e7182;

}
.who_mess{
    text-align: right;
    font-size: 18px;
    color: #FFF;
    padding: 5px;
    margin-top: 5px;
    margin-right: 0px;
    border-top: 1px solid #3e7182;
}

.leveler{
    width: 100%;
    color: gold;
}
.level{
    width: 100%;
    background-color: #FFF;
}
.level_display{
    margin-left: 3px;
}
.level_bar{
    background-color: #1cbfff;
    height: 3px;
    width: 0%;
}

.voter{
    width: 75%;
    background: none;
    display: none;
    border-radius: 15px;
    border-left: 1px #1cbfff solid;
    border-right: 1px #1cbfff solid;
    padding: 25px;
    margin: 0 auto;
    margin-top: 15px;
}
.del_vote{
    width: 25px;
    cursor: pointer;
}
.vote_header{
    display: flex;
    justify-content: space-between;
}

.a_option{
    display: flex;
    margin-top: 2px;
}
.option_input{
    background: none;
    border: 0;
    border-bottom: solid 1px #1cbfff;
    color: #FFF;
    width: 100%;
    font-size: 18px;
}
.option_input:focus{
    outline: none;
}

.more_option{
    width: 25px;
    cursor: pointer;
}
.del_option{
    width: 25px;
    cursor: pointer;
}

.mask{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #000000;
    opacity: 0.25;
    display: none;
    z-index: 250;
}

.user_info_sq{
    position: fixed; /* positioning in center of page */
    top: 400px;
    left: 50vw;
    transform: translate(-50%,-50%);
    width: 33%;
    display: none;
    z-index: 500;
    border-radius: 6px;
    color: #FFF;
    padding: 25px;
    background: none;
    border: 1px solid #1cbfff;
    backdrop-filter: blur(8px); 
}
.popup_header{
    display: flex;
    justify-content: space-between;
}
.pop_account{
    margin-left: 15px;
}
.pop_close{
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.popup_header_inner{
    display: flex;
    align-items: center;
}
.popup_body{
    margin-top: 5px;
    padding: 5px;
}
.pop_title{
    color:#1cbfff;
    margin-right: 7px;
}
.pop_items{
    display: flex;
    margin-top: 5px;
}
.pop_interact{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.pop_friend{
    width: 45%;
    display: none;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    background: none;
    color: #1cbfff;
    padding: 5px;
    border: solid 1px #1cbfff;
    border-radius: 5px;
}
.pop_follow{
    width: 45%;
    display: none;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    background: none;
    color: #1cbfff;
    padding: 5px;
    border: solid 1px #1cbfff;
    border-radius: 5px;
}

.talent_sq{
    position: fixed; /* positioning in center of page */
    top: 250px;
    left: 50vw;
    transform: translate(-50%,-50%);
    width: 90%;
    display: none;
    z-index: 500;
    border-radius: 6px;
    color: #FFF;
    padding: 10px;
    background: none;
    border: 1px solid #1cbfff;
    backdrop-filter: blur(3px);
}
.talent_attack{
    width: 33%;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.talent_defence{
    width: 33%;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.talent_support{
    width: 33%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.mood_input{
    display: none;
    background: none;
    border: 0;
    border-bottom: solid 1px #1cbfff;
    color: #FFF;
    width: 100%;
}
.mood_input:focus{
    outline: none;
}


/* make .member_functions and  .member_chats disapear when width is less than 800px */
@media (max-width: 800px){
    .member_functions{
        display: none;
    }
    .member_chats{
        display: none;
    }
    .member_blocks{
        width: 100%;
    }
}