.emotions {
	display: flex;
	flex-wrap: wrap;
}

.emotions .item {
    display: flex;
	position: relative;
    box-sizing: border-box;
    background-color: #f6f7f8;
    border-radius: 2.5px;
    padding: 4px 6px;
    margin: 4px 6px 4px 3px;
    cursor: pointer;
    max-height: 36px;
}

.emotions .item:first-child {
    margin-left: 0;
}

.emotions .item.active {
    background-color: rgb(41 134 195 / 20%) !important;
}

.emotions .item img {
	margin-right: 4px;
}

.emotions .item .count {
    align-self: center;
    font-weight: bold;
    color: #333;
}

.emotions .item .describedby {
    display: none;
    position: absolute;
    z-index: 1000;
    bottom: 36px;
    left: 0px;
    border-radius: 2.5px;
    padding: 6px 6px !important;
    background-color: #2986c3;
    min-width: 228px;
}

.emotions .item .describedby .top {
    color: #fff;
    margin-bottom: 4px;
}

.emotions .item .describedby .top .emotion-desc {
    font-weight: bold;
}

.emotions .item .describedby .top .user-count {
    float: right;
}

.emotions .item .describedby .user-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.emotions .item .describedby .user-list .user-item {
    display: inline-block;
    margin: 2px;
}

.emotions .item .describedby .user-list .user-item img {
    width: 34px;
    border-radius: 50%;
    height: 34px;
}

.dropdown-emotions {
	position: absolute;
    z-index: 1000;
    display: none;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    -webkit-border-radius: 2.5px;
    -moz-border-radius: 2.5px;
    border-radius: 2.5px;
    -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
	top: unset !important;
    right: 0 !important;
    left: unset !important;
    bottom: 36px !important;
    min-width: 360px !important;
	height: 186px;
	overflow: auto;
    padding: 10px !important;
    border: none !important;
}

.dropdown-emotions .d-emot-item {
    display: inline-block;
    padding: 4px;
    cursor: pointer;
    text-align: center;
    width: 33px;
}


.dropdown-emotions .d-emot-item:hover {
    background: #edeef0;
    border-radius: 6px;
}

.dropdown-emotions::-webkit-scrollbar {
	width: 5px;
    background: inherit;
}

.dropdown-emotions::-webkit-scrollbar-thumb {
  background-color: #282828;    /* color of the scroll thumb */
  border-radius: 8px;       /* roundness of the scroll thumb */
}