.field-reactions:checked:focus ~ .text-desc, .field-reactions, [class*=reaction-], .text-desc {clip: rect(1px, 1px, 1px, 1px);overflow: hidden;position: absolute;top: 0;left: 0;}

.field-reactions:checked ~ [class*=reaction-], .box:hover [class*=reaction-], .field-reactions:focus ~ .text-desc {clip: auto;overflow: visible;opacity: 1;}
.main-title {  background: #3a5795;padding: 10px;color: #fff;text-align: center;font-size: 16px;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);}
.text-desc {font-weight: normal;text-align: center;transform: translateY(-50px);white-space: nowrap;font-size: 13px;width: 100%;}
[class*=reaction-] {
  border: none;
  background-image: url(../images/emoji-reactions.png);
  background-color: transparent;display: block;cursor: pointer;height: 48px;position: absolute;width: 48px;z-index: 11;top: -20px;transform-origin: 50% 100%;transform: scale(0.1);transition: all 0.3s;outline: none;will-change: transform;opacity: 0;}

.box {position: relative;width: auto;z-index: 1;}
.overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;visibility: hidden;}
.field-reactions:focus ~ .label-reactions {border-color: rgba(88, 144, 255, 0.3);}
.field-reactions:checked:focus ~ .label-reactions {border-color: transparent;}
.label-reactions { margin: 0 auto;cursor: pointer;text-align: left;}
.label-reactions i {color:#30A6A6;font-size: 20px;}
.toolbox {background: #fff;height: 52px;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.15);width: 300px;border-radius: 40px;top: -50px; 
  left: 0px;position: absolute;visibility: hidden;opacity: 0;transition: opacity 0.15s;}

.legend-reaction {background: rgba(0, 0, 0, 0.75);border-radius: 10px;box-sizing: border-box;color: #fff;display: inline-block;font-size: 11px;text-overflow: ellipsis;font-weight: bold;line-height: 20px;max-width: 100%;opacity: 0;overflow: hidden;padding: 0 6px;transition: opacity 50ms ease;left: 50%;position: absolute;text-align: center;top: -21px;transform: translateX(-50%);}

.box:hover [class*=reaction-] {
  transform: scale(0.8) translateY(-40px);
}
.box:hover [class*=reaction-]:hover, .box:hover [class*=reaction-]:focus {transition: all 0.2s ease-in;transform: scale(1) translateY(-35px);}
.box:hover [class*=reaction-]:hover .legend-reaction, .box:hover [class*=reaction-]:focus .legend-reaction {opacity: 1;}
.box:hover .toolbox {opacity: 1;}
.box:hover .toolbox {visibility: visible;}
.box:hover .reaction-love {transition-delay: 0.06s;}
.box:hover .reaction-haha {transition-delay: 0.09s;}
.box:hover .reaction-wow {transition-delay: 0.12s;}
.box:hover .reaction-sad {transition-delay: 0.15s;}
.box:hover .reaction-angry {transition-delay: 0.18s;}

.field-reactions:checked ~ [class*=reaction-] {transform: scale(0.8) translateY(-40px);}
.field-reactions:checked ~ [class*=reaction-]:hover, .field-reactions:checked ~ [class*=reaction-]:focus {transition: all 0.2s ease-in;transform: scale(1) translateY(-35px);}
.field-reactions:checked ~ [class*=reaction-]:hover .legend-reaction, .field-reactions:checked ~ [class*=reaction-]:focus .legend-reaction {opacity: 1;}
.field-reactions:checked ~ .toolbox {
  opacity: 1;
}
.field-reactions:checked ~ .toolbox,
.field-reactions:checked ~ .overlay {
  visibility: visible;
}
.field-reactions:checked ~ .reaction-love {
  transition-delay: 0.03s;
}
.field-reactions:checked ~ .reaction-haha {
  transition-delay: 0.09s;
}
.field-reactions:checked ~ .reaction-wow {
  transition-delay: 0.12s;
}
.field-reactions:checked ~ .reaction-sad {
  transition-delay: 0.15s;
}
.field-reactions:checked ~ .reaction-angry {
  transition-delay: 0.18s;
}

.reaction-like {
  left: 0;
  background-position: 0 -144px;
}

.reaction-love {
  background-position: -48px 0;
  left: 50px;
}

.reaction-haha {
  background-position: -96px 0;
  left: 100px;
}

.reaction-wow {
  background-position: -144px 0;
  left: 150px;
}

.reaction-sad {
  background-position: -192px 0;
  left: 200px;
}

.reaction-angry {
  background-position: -240px 0;
  left: 250px;
}
.staticLabel {padding-top:5px;padding-left: 30px}
.staticReaction-like {position: absolute;left: -16px;right: unset;width: 48px;height: 48px;display: inline-block;font-size: 16px;opacity: 1;transform: scale(0.8) translateY(-40px);top: 20px;background-image: url(../images/emoji-reactions.png)}
.staticReaction-like.like {background-position:0 -144px;}
.staticReaction-like.love {background-position: -48px 0;}
.staticReaction-like.haha {background-position: -96px 0;}
.staticReaction-like.wow {background-position: -144px 0;}
.staticReaction-like.sad {background-position: -192px 0;}
.staticReaction-like.angry {background-position: -240px 0;}
.staticReaction-like.static {background-image: url(../images/emoji-reactions-static.png);}

.customProfileWall {position: relative;}
.customProfileWall .staticLabel {width: 95px;padding-left: 40px;}
.customProfileWall .staticReaction-like {position: absolute;left: 0px;right: unset;width: 48px;height: 48px;display: inline-block;font-size: 16px;opacity: 1;transform: scale(0.5) translateY(-63px);top: 20px;background-image: url(../images/emoji-reactions.png)}
.customProfileWall .staticReaction-like.like {background-position:0 -144px;}
.customProfileWall .staticReaction-like.love {background-position: -48px 0;}
.customProfileWall .staticReaction-like.haha {background-position: -96px 0;}
.customProfileWall .staticReaction-like.wow {background-position: -144px 0;}
.customProfileWall .staticReaction-like.sad {background-position: -192px 0;}
.customProfileWall .staticReaction-like.angry {background-position: -240px 0;}
.customProfileWall .staticReaction-like.static {background-image: url(../images/emoji-reactions-static.png);}

.box2 {margin-bottom:0px !important;height:unset !important;}