.searchBoxDiv .searchIcon {
fill: #8c8c8e;
float: left;
height: 17px;
width: 17px;
}

.emojiList .searchBoxDiv > input {
float: left;
height: 25px;
margin: 3px 0 0;
overflow: hidden;
width: 80%;
font-size: 0.9rem;
line-height: 1.25rem;
}

.searchBoxDiv > input {
border-width: 0;
color: #757584;
float: left;
font-size: 0.875rem;
margin: 0;
padding: 0 0 1px;
transition: all 0.2s linear 0s;
width: 165px;
}

.emojiList {
position: relative;
height: 380px;
width: 100%;
background: #ffffff;
border: 1px solid #dddddd;
z-index: 99999;
border-radius: 3px;
overflow: hidden;
top: 0;
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
float: left;
}

.emojiCatListing li{
float: left;
height: 11.1%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.emojiCatListing {
float: left;
height: 380px;
width: 40px;
position: relative;
margin:0px!important;
padding:0px!important;
}
ul.emojiCatListing:after{
content: "";
height: 369px;
width: 1px;
background: #eeeeee;
position: absolute;
right: -1px;
top: 0;
z-index: -1;
}
.emojiCatListing li.active:after,.emojiCatListing li:hover:after{
content: "";
width: 2px;
height: 100%;
background: #0978f6;
position: absolute;
transition: all .2s linear;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
top: 0;
right: -1px;
}
.emojiCatListing li.active,.emojiCatListing li:hover{
background: #f7f7f7;
position: relative;
}
.emojiCatListing li img,.emojiCatListing li img{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity: 0.5;

}
.emojiCatListing li.active img,.emojiCatListing li:hover img{
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
opacity: 1;
}
.emojiCatListing li svg{
fill: #ccc7c7;
}
.emojiList .searchBoxDiv{
float: left;
border: 1px solid #dddddd;
width: calc(100% - 32px);
margin: 10px 16px 10px;
border-radius: 3px;
height:33px;
display:block;
}
.emojiList .searchBoxDiv .iconDiv{
margin: 6px;
float: left;
}
.emojiContainer {
width: 100%;
height: 252px;
float: left;
position:relative;
}

.emojiContainer .emojiCatHead{
font-size: 0.9rem;
font-weight: 600;
/*padding: 0px 0 4px 14px;*/
padding-left: 5px;
float: left;
width: 100%;
position: relative;
}
.emojiContainer .emojiCatHead:after{
content: "";
width: 90%;
height: 1px;
position: absolute;
background: #f7f4f4;
left: 1px;
bottom: -3px;
}
ul.emojiCat{
width: 100%;
float: left;
/*padding: 7px 14px;*/
padding-left: 5px;
margin-bottom:10px;
position:relative;
}
ul.emojiCat li {
border-radius: 3px;
float: left;
height: 26px;
margin: 4px;
transform: scale(0.3);
-ms-transform: scale(0.3);
-webkit-transform: scale(0.3);
transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
-webkit-transform-origin:0 0 0;
width: 26px;
}

ul.emojiCat li:hover{
/*background: #efefef;*/
}

ul.emojiCat li img{
width: 20px;
height: 20px;
text-align: center;
}

.emojiList ul li{
cursor: pointer;
list-style-type: none
}

ul.emojiCat li span{
float: left;
height: 74px;
overflow: hidden;
width: 74px;
background:url("../images/emoji.png") no-repeat 0px 0px;
}

.ps-scrollbar-x-rail{
display: none !important;
}
.emojiTop .smileColor{
display: none;
}

.smileBW{
fill: #ffffff;
}

.emojiTop:hover .smileBW{
fill:#FCFF00;
}
.emojiTop:hover .editIcon {
fill: #0978f6;
}

.emojiList .emojiShowUp {
background: var(--secondary-color) none repeat scroll 0 0;
float: right;
/*height: 63px;*/
padding: 10px 0 7px;
width: 99.6%;
}
	

/*.emojiList .emojiShowUp img{
vertical-align: middle;
width: 47px;
height: 47px;
border-radius: 4px;
padding: 4px;
margin: 0 0 0 7px;
}*/

.emojiList .emojiShowUp .emojiOuter{
border-radius: 3px;
float: left;
height: 46px;
width: 46px;
margin: 4px;
}

.drop-down .options .dd2-opt {

	max-height: 220px;

	overflow-y: auto;

	overflow-x: hidden;

}

.drop-down svg, .drop-down img {
    padding: 0px 8px;
    cursor: pointer;
    height: 18px;
    width: auto;
}

.emojiList .emojiShowUp .emojiOuter .emoji{
float: left;
height: 76px;
overflow: hidden;
width: 76px;
background:url("../images/emoji.png") no-repeat -836px -0px;
transform: scale(0.6);
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
}

.emojiList .emojiShowUp span.meaning{
vertical-align: middle;
margin: 5px 0px;
font-size: 0.8rem;
font-style:italic;
/*width:56%;*/
float:left;
text-transform: capitalize;
}
.loadEmojis {
position: fixed;
z-index: 99999;
}

.emojiList .emojiShowUp .skinTone{
width: 88px;
float:right;
}

.emojiList .emojiShowUp .skinTone img{
width: 22px;
height: 22px;
padding: 0;
background: none;
margin: 1px 0px;
cursor: pointer;
}
.emojiList .emojiShowUp .skinTone img:hover, .emojiList .emojiShowUp .skinTone img.active{
transform: scale(1.2);
-moz-transform: scale(1.2);	
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
}

.emojiList .searchBoxDiv > input {
margin: 3px 0 0;
width: 87%;
float:left;
overflow:hidden;
height:25px;
}

.suggestionDropDn > i {
font-size: 0.75rem;
margin: 0 0 0 10px;
}

.emojiShowUp .alignLeft {
float: left;
width: calc(100% - 88px);
display: flex;
align-items: center;
}
.emojiBoxConstruct{
float: left;
width: calc(100% - 40px);
position:relative;
display: inline-block;
}

.emojidropdown

{

    min-width: auto;

    background: none;

    margin: 0px;

}
.drop-down {
    position: relative;
    margin: 5px 0px 8px;
    /*min-width: 200px;*/
    border:none!important;
    background: #ffffff;
}




.emojidropdown .emojiList 

{

     min-width: 347px!important;

     border: none!important;

}



.emojiul

{

  margin: 0px!important;

  padding: 0px!important;

}

.arrow-up

{

    height: 0!important;

    border-left: 10px solid transparent!important;

    border-right: 10px solid transparent!important;

    border-bottom: 10px solid #ffff!important;

    left: 9px;

    position: absolute;

    top: 26px;



  }



.emojidropdown .status-box

{

  display: none!important;

}

.emojidropdown .statusEmojiDD

{

  display: block!important;

}

.drop-down .option {

	position: relative;

}



.drop-down>.options>ul {

	background: none;

	display: none;

	padding: 10px 0px;

	right: 180px;

	position: absolute;

	top: 26px;

	width: -webkit-fill-available;

	width: -moz-available;

	border: none;

	border-radius: 3px;

	/*max-height: 230px;*/

	/*  z-index: 1;*/

	z-index: 999;

	border-top: transparent;

	transition: all .2s cubic-bezier(.2, .3, .25, .9);

	transition-property: all;

	transition-duration: .2s;

	transition-timing-function: cubic-bezier(.2, .3, .25, .9);

	transition-delay: initial;

	-webkit-animation-duration: .3s;

	animation-duration: .3s;

	-webkit-animation-fill-mode: both;

	animation-fill-mode: both;

	animation-name: dropDownAnimDown;

	box-shadow: none;

	margin: 1em 0;

}