.emojionepicker2
{
    position:absolute;
    z-index:1000;
    max-width:90%;
    width:320px;
    height:250px;
    right:10px;
    background-color:#fff;
    box-shadow: 0 0 7px #d1d1d1;
    display:none;
}

.emojionepicker2 *
{
    box-sizing:border-box;
}

.emojionepicker2 nav
{
    position: relative;
    z-index: 0;
    background-color: #f2f2f2;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align:center;
}

.emojionepicker2 nav div.tab
{
    display: inline-block;
    margin: 0.2em 0.1em 0 0;
    padding: 0.2em ;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    width:2.2rem;
}

.emojionepicker2 nav div.tab img
{
    width:100%;
    height:auto;
}

.emojionepicker2 nav div.tab:hover, .emojionepicker2 section img:hover
{
    cursor: pointer;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.emojionepicker2 nav div.tab.active
{
    background-color: #fff;
    box-shadow: 0 0 3px #ccc;
}

.emojionepicker2 section
{
    overflow-y: scroll;
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 0.2rem;
    box-sizing: border-box;
    height: 200px;
    display:none;
    text-align:center;
}

.emojionepicker2 section img
{
    float:left;
    width:1.8em;
    height:1.8em;
    margin:0.2em;
}





.emojionepicker1
{
    position:absolute;
    z-index:1000;
    max-width:90%;
    width:320px;
    height:250px;
    right:10px;
    background-color:#fff;
    box-shadow: 0 0 7px #d1d1d1;
    display:none;
}

.emojionepicker1 *
{
    box-sizing:border-box;
}

.emojionepicker1 nav
{
    position: relative;
    z-index: 0;
    background-color: #f2f2f2;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align:center;
}

.emojionepicker1 nav div.tab
{
    display: inline-block;
    margin: 0.2em 0.1em 0 0;
    padding: 0.2em ;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    width:2.2rem;
}

.emojionepicker1 nav div.tab img
{
    width:100%;
    height:auto;
}

.emojionepicker1 nav div.tab:hover, .emojionepicker1 section img:hover
{
    cursor: pointer;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.emojionepicker1 nav div.tab.active
{
    background-color: #fff;
    box-shadow: 0 0 3px #ccc;
}

.emojionepicker1 section
{
    overflow-y: scroll;
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 0.2rem;
    box-sizing: border-box;
    height: 200px;
    display:none;
    text-align:center;
}

.emojionepicker1 section img
{
    float:left;
    width:1.8em;
    height:1.8em;
    margin:0.2em;
}
.emojionepicker-picker
{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACnAAAApwEPOh3cAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAHJQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwopa3AAAACV0Uk5TAAQHFhweISktMjhLW15hZn1/gIGHiZiorrGytcnK5uju8/f6/ifM2/IAAADVSURBVChTdZLbloIwDEU3okUtKoiOSOUieP7/F30oDF3MsJ+6kjSXk4AntnnVNFVuY0KibNDIkEWzPaklta4oXCupTib7qZdK49+mlPrTGN+rS+fvaac+AYhqdTsCdp3qCMikIB4glTKIB5Wwf1w3AJvrYw+lhhgrGXhJZ4Cz9AIjWXK1LB20yqnkWKbCqaJRwR8KNesOn2qBU+WLX34CLr64lQzHj375HH27fsD77LiPA46S3Cb7bZJkEvHwfEvv52EWcZZ9u4VA9vVFra92/Rj453y+QB8f2UeMscsAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    position: absolute;
    z-index: 2147483647;
    background-size: 100%;
    opacity: 0.4;
    display:none;
    cursor:pointer;
}

.emojionepicker-picker:hover
{
    opacity: 0.6;
}

.emojionepicker-picker:active
{
    opacity: 0.4;
}