.h5-show{
    display: none;
}

@media screen and (max-width: 767px) {
    .single_btn {
        max-width: 100%;
    }
    .loginBody {
        background: url(../../imgs/bg-login.png) center/cover no-repeat;
    }
    .loginBody form.layui-form{
        /* background: rgba(255, 255, 255, 0.8); */
        background: none;
    }
    .login-btn{
        background: linear-gradient( 90deg, #009AFF 0%, #09CF8A 100%);
        border-radius: 20px;
    }
    .loginBody .layui-input{
        /* border-radius: 5px; */

    }

    .login-input-item{
        position: relative;
        padding-left: 38px;
        background: #fff;
        border-radius: 10px;
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        color: #333333;
        overflow: hidden;
    }
    .login-input-item input{
        height: 48px;
        line-height: 48px;
        border: 0;
        border-radius: 0px;
    }
    .login-input-item.user::before{
        content: '';
        position: absolute;
        left: 14px;
        top: 14px;
        width: 20px;
        height: 20px;
        background: url(../../imgs/login-user.png) center/cover no-repeat;
    }
    .login-input-item.pwd::before{
        content: '';
        position: absolute;
        left: 14px;
        top: 14px;
        width: 20px;
        height: 20px;
        background: url(../../imgs/icon-lock.png) center/cover no-repeat;
    }
    .login-input-item.code::before{
        content: '';
        position: absolute;
        left: 14px;
        top: 14px;
        width: 20px;
        height: 20px;
        background: url(../../imgs/login-code.png) center/cover no-repeat;
    }
    .login-input-item .intl-tel-input .selected-flag{
        width: 60px !important;
        padding-left: 0px !important;
        background: #fff;
    }
    .login-input-item  .intl-tel-input .selected-dial-code{
        padding-left: 24px;
    }
    .login-input-item  .intl-tel-input .flag-container{
        right: 0;
        left: auto;
    }
    .login-input-item  .intl-tel-input input{
        padding-right: 84px !important;
        padding-left: 10px !important;
    }
    .login-input-item .iti-flag{
        display: none;
    }
    .login-input-item .intl-tel-input .selected-flag .iti-arrow{
        left: 10px;
        right: auto;
        border:0;
        width: 8px;
        height: 4px;
        background: url(../../imgs/icon-arrow-down.png) center/cover no-repeat;
    }
    .login-input-item .selected-flag::before{
        content: '';
        position: absolute;
        left: 0;
        top: 16px;
        width: 1px;
        height: 16px;
        background: #ccc;
    }
    .checkcode-warp .get-check-code{
        top: 14px;
    }
    .img-code img{
        top: 7px;
    }

    .coolchat_data_panel_head{
        background : url(../../imgs/bg-head.png) center/cover no-repeat;
        color: #333333;
        border-color: #bbddf9;
    }
    .message_panel_head{
        background:  url(../../imgs/bg-head.png) center/cover no-repeat;
        color: #333333;
        border-color: #bbddf9;
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        height: 50px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .group_details_panel > .head{
        border-bottom: 1px solid #bbddf9;
    }
    .message_panel_head .name{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .coolchat_message_panel .user_nickname{
        margin-top: 0;
    }
    .message .nickname{
        max-width: 200px;
    }
    .head-content-box{
        display: flex;
        flex: 1;
        padding-top: 0px;
    }
    .headContent{
        margin-left: 0;
    }
    .fActive{
        background-color: transparent;
        color: #333;
    }
    .fActive::before{
        background-color: transparent;
    }
    .fActive .chat_item .info .msg{
        color: #999;
    }
    .fActive .chat_item .timeStr{
        color: #7E7979;
    }
    .fActive .chat_item .info{
        border-color: #F0F7FF;
    }

    .back, .left_title{
        background-color: transparent;
    }
    .nav-title:hover{
        background-color: transparent;
    }

    .coolchat_left_nav{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 62px;
        z-index: 1000;
        display: flex;
        background-color: #fff;
        border-top: 1px solid #f9f9f9;
    }
    .coolchat_left_nav dl{
        width: 25%;
    }
    .coolchat_left_nav dl dt{
        height: 100%;
    }
    .coolchat_left_nav dl dt p, .coolchat_left_nav dl dt img{
        line-height: normal;
    }
    .coolchat_left_nav p{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        font-size: 12px;
    }
    .coolchat_left_nav dl dt img{
        width: 28px !important;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 4px;
    }
    .messageNum{
        right: 24px;
        top: 4px;
    }
    .main{
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }
    .main_inner{
        min-width: 100%;
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
        border:0;
        padding-bottom: 62px;
    }
    .layui-fluid{
        padding: 0;
        width: 100% !important;
        height: 100vh;
        overflow: hidden;
    }
    .coolchat_data_panel{
        width: 100%;
    }
    .coolchat_data_panel .tab-content{
        height: 100vh !important;
        padding-bottom: 62px;
    }
    .tab-content .tab-pane.active{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .coolchat_data_panel_body{
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .fWarp{
        height: 100%;
        overflow-y: auto !important;
    }

    #messageDisplayArea{
        height: calc(100vh - 62px) !important;
    }
    .coolchat_message_panel_1{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .coolchat_message_panel_1 .tab-content{
        flex: 1;
    }
    .coolchat_message_show_area{
        background:url(../../imgs/bg-chat.png) center/cover no-repeat;
        border-bottom: 0;
    }
    .new_friend_list{
        height: 100%;
        overflow-y: auto;
    }

    .coolchat_message_panel_div{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100vh;
        margin-left: 0;
        border:0;
        z-index: 1001;
        opacity: 1;
    }
    .coolchat_message_panel_div.hide{
        opacity: 0;
    }
    .coolchat_message_panel{
        border:0;
    }

    .tooltip{
        display: none !important;
    }
    .emoji-panel{
        width: 372px;
        left:2px;
    }
    .emoji-panel:after{
        left: 14px;
    }
    .gif-panel:after{
        left: 62px;
    }
    .coolchat_message_panel_div .panel-body{
        display: flex;
        width: 100%;
        height: calc(100vh - 50px) !important;
        flex-direction: column;
    }
    .panel-body #messagePanel{
        height: 100% !important;
    }
    .btn-detail-back,
    .back-to-list{
        position: absolute;
        left: 0;
        top: 0;
        padding-right: 18px;
    }
    .btn-detail-back img,
    .back-to-list img{
        width: 12px;
        margin-left: 18px;
    }
    .group_details_panel{
        width:100% !important;
    }
    .groupDetailSettingRow{
        height: 46px;
        padding: 0 15px;
    }
    .groupSettingSwitchDiv{
        height: 46px;
        padding: 5px 15px;
    }
    .groupSettingSwitchDiv .groupSettingItem_p{
        width: 80% !important; 
        margin-top: 8px;
    }
    .groupDetailSettingImg{
        margin-right: 0px;
    }
    .groupDetailText{
        margin-left: 40px;
    }
    #groupDetails{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #gnotice {
        width: 174px;
    }

    .box{
        padding:0;
    }
    .bubble{
        max-width: 208px;
    }
    .newFriend_body{
        width: auto;
    }
    .newFriend_nickname{
        width: 170px;
    }
    .newFriend_msgContent{
        max-width: 170px;
    }
    .newFriend_option{
        float:right;
    }
    .newFriend_option .newFriend_button{
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        width: auto;
    }


    #switchReadDelDiv{
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding-right: 15px;
    }
    #switchReadDelDiv .layui-form-label{
        width: auto;
        padding: 0;
        margin-bottom: 0;
        margin-left: 0px;
        font-size: 12px;
    }
    #switchReadDelDiv .layui-input-block{
        margin-left: 0;
        line-height: 22px;
        min-height: 22px;
    }
    #switchReadDelDiv .layui-input-block > div{
        margin-top: 0;
    }
    #switchReadDelDiv .layui-form-switch{
        border-color: transparent;
    }

    #sendMsgScopeDiv{
        display: flex;
        flex-direction: column-reverse;
        height: auto !important;
        background-color: #f9f9f9;
    }
    .emoji-panel{
        position: static;
        border : 0;
        box-shadow: none;
        width: 100%;
        background-color: #f9f9f9;
    }
    .chat-fn-list{
        border-top: 1px solid #e8e8e8;
    }

    .voice-container{
        height: 300px !important;
    }
    .chat-input-container{
        display: flex;
        align-items: center;
        padding-left: 10px;
    }
    .btnEndChat{
        position: static !important;
    }
    .btn-container{
        display: flex;
        flex-direction: column;
    }
    .btn-container button{
        outline: none;
    }
    .Input_text{
        margin: 0px;
        height: 36px;
        padding: 8px 10px 2px;
    }


    /* #btn-send{
        position: absolute;
        bottom: 62px;
        right: 0;
    } */

    #tabCon_0{
        display: none;
    }

    #tabCon_2{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 1002;

    }
    #personalTab{

    }
    
    .chat-icon img{
        width: 12px;
        height: 11px;
    }
    .addGroup-friends-list{
        height: 300px;
    }
    .memberManagerDialog-list{
        height: 400px;
    }
    .password_set_panel .panel_container_body{
        margin: 16px;
        padding: 18px;
        border-radius: 10px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
    }
    

    .my_profile_panel, .privacy_set_panel, .password_set_panel {
        /* position: absolute; */
        top: 0;
        width: 100%;
        margin-top: 0;
        z-index: 9999;
        background-color: #f9f9f9;
        border-radius: 0px;
    }

    .h5-hide{
        display: none !important;
    }
    .h5-show{
        display: block;
    }

    .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
        outline: none;
    }
}