.xyemotion {
    position: relative;
}

.xyemotion_curr_emotion, .xyemotion_popup {
    display: inline-block;
    padding: .2em;        
}

.xyemotion_curr_emotion i, .xyemotion_popup i {
    vertical-align: middle;
}    

.xyemotion_curr_emotion i {
    padding-right: .4em;
}

.xyemotion_popup {
    box-shadow: 2px 3px 3px #999;
    display: none;
    position: absolute;
    bottom: calc(90%);
    left: 2%;
    background-color: #eff5e6;
    padding: 1em;
}

.xyemotion_popup i {
    opacity: .5;
    --fa-animation-duration: 3s;          
}

.xyemotion_curr_emotion button.active,
.xyemotion_popup i.fa-flip,
.xyemotion_popup i.active {
    opacity: 1;      
}     

.xyemotions {
    padding-bottom: .5em;
}

.xyemotion button {
    min-width: 150px;
    padding: .5em;
}

.xyemotion_curr_emotion button, 
.xyemotion_curr_emotion button:hover {    
    background-color: white !important;
    border: 2px solid #3D4B24 !important;   
    color: #3D4B24;         
}    

.xyemotion_curr_emotion button:hover {
    background-color: #eff5e6 !important;           
}            

.xyemotion button.active {
    background-color: #3D4B24 !important;
    border-color: #3D4B24 !important;        
    color: white;        
}    

.xyemotion button.active i {
    color: white;
}