.emoji_search input{
    height: 1.75rem;
    line-height: 1.75rem;
    width: calc(100% - 3rem);
    border: 1px solid #4cd9aa;
    padding-left: 0.5rem;
    float: left;
    border-radius: 3px 0 0 3px;
}

.emoji_search span{
    width: 3rem;
    height: 1.75rem;
    line-height: 1.75rem;
    display: inline-block;
    background-color: #00b277;
    color: #fff;
    text-align: center;
    font-size:0.7rem;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    float: left;
    border-radius: 0 3px 3px 0;
}

/**************************************************************/

.emoji ul{
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 0.5rem;
}

.emoji ul li{
    border: solid 1px #eee;
    height: 2.4rem;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    font-size: .2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.emoji ul li span{
    display: block;
    font-size:1.2rem;
    height: 2.4rem;
    line-height: 2.4rem;
    font-family: "Twemoji Country Flags", "Helvetica", "Arial", sans-serif;
}

.night .emoji ul li{
    border: 1px solid #444;
}

.emoji .resdata fieldset{
    margin-top: 0.9rem !important;
}

.emoji .emoji_searchtip{
    padding: 1rem;
    text-align: center;
    margin-top: 0.9rem;
    color: #08a3ba;
    background-color: #e1f8fb;
    border-color: #a6e9f3;
}

/**************************************************************/

@media screen and (max-width: 1700px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(18, 1fr);
    }
}

@media screen and (max-width: 1500px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(16, 1fr);
    }
}

@media screen and (max-width: 1400px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(14, 1fr);
    }
}

@media screen and (max-width: 1200px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
}

@media screen and (max-width: 1100px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
}

@media screen and (max-width: 1000px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
}

@media screen and (max-width: 886px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
}

@media screen and (max-width: 700px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
}

@media screen and (max-width: 590px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
}

@media screen and (max-width: 390px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 360px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 300px){
    .emoji ul{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}