File: public/jbox/css/playground-avatars.css

.AvatarsModal .jBox-footer {
  display: flex;
}

.AvatarsModal .jBox-footer button {
  width: 50%;
  flex-shrink: 0;
  height: 50px;
  border: 0;
  padding: 0;
  display: block;
  float: left;
  background: center center no-repeat;
  transition: background-color .2s;
}

.AvatarsModal .jBox-footer button:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

#AvatarsComplete.AvatarsModal .jBox-footer button {
  width: 100%;
  float: none;
}

.AvatarsModal .jBox-footer .button-cross {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTUwNy4zLDQxMS4zQzUwNy4zLDQxMS4zLDUwNy4zLDQxMS4zLDUwNy4zLDQxMS4zTDM1MiwyNTZsMTU1LjMtMTU1LjNjMCwwLDAsMCwwLDBDNTA5LDk5LDUxMC4yLDk3LDUxMSw5NQpjMi4xLTUuNywwLjktMTIuMy0zLjctMTYuOUw0MzQsNC43QzQyOS40LDAuMSw0MjIuNy0xLjEsNDE3LDFjLTIuMSwwLjgtNCwyLTUuNywzLjdjMCwwLDAsMCwwLDBMMjU2LDE2MEwxMDAuNyw0LjdjMCwwLDAsMCwwLDAKQzk5LDMsOTcsMS44LDk1LDFjLTUuNy0yLjEtMTIuMy0wLjktMTYuOSwzLjdMNC43LDc4QzAuMSw4Mi42LTEuMSw4OS4zLDEsOTVjMC44LDIuMSwyLDQsMy43LDUuN2MwLDAsMCwwLDAsMEwxNjAsMjU2TDQuNyw0MTEuMwpjMCwwLDAsMCwwLDBDMyw0MTMsMS44LDQxNSwxLDQxN2MtMi4xLDUuNy0wLjksMTIuMywzLjcsMTYuOWw3My40LDczLjRjNC42LDQuNiwxMS4yLDUuOCwxNi45LDMuN2MyLjEtMC44LDQtMiw1LjctMy43YzAsMCwwLDAsMCwwCkwyNTYsMzUybDE1NS4zLDE1NS4zYzAsMCwwLDAsMCwwYzEuNywxLjcsMy42LDIuOSw1LjcsMy43YzUuNywyLjEsMTIuMywwLjksMTYuOS0zLjdsNzMuNC03My40YzQuNi00LjYsNS44LTExLjIsMy43LTE2LjkKQzUxMC4yLDQxNSw1MDksNDEzLDUwNy4zLDQxMS4zTDUwNy4zLDQxMS4zeiIvPgo8L3N2Zz4K);
  background-color: #e33;
  background-size: 24px auto;
  border-radius: 0 0 0 4px;
}

.AvatarsModal .jBox-footer .button-cross:hover {
  background-color: #f33;
}

.AvatarsModal .jBox-footer .button-cross:active {
  background-color: #e33;
}

.AvatarsModal .jBox-footer .button-heart {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggMzg0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTIyNCwzODRjLTQsMC04LTEuNS0xMS00LjVMNTcsMjI5Yy0yLTEuOC01Ny01Mi01Ny0xMTJDMCw0My44LDQ0LjgsMCwxMTkuNSwwYzQzLjgsMCw4NC44LDM0LjUsMTA0LjUsNTQKYzE5LjgtMTkuNSw2MC44LTU0LDEwNC41LTU0QzQwMy4yLDAsNDQ4LDQzLjgsNDQ4LDExN2MwLDYwLTU1LDExMC4yLTU3LjIsMTEyLjVMMjM1LDM3OS41QzIzMiwzODIuNSwyMjgsMzg0LDIyNCwzODR6Ii8+Cjwvc3ZnPg==);
  background-color: #7d0;
  background-size: 30px auto;
  border-radius: 0 0 4px 0;
}

.AvatarsModal .jBox-footer .button-heart:hover {
  background-color: #8e0;
}

.AvatarsModal .jBox-footer .button-heart:active {
  background-color: #7d0;
}

.AvatarsModal .jBox-footer .button-close {
  background-color: #ddd;
  border-radius: 0 0 4px 4px;
}

.AvatarsModal .jBox-footer .button-close:hover {
  background-color: #eee;
}

.AvatarsModal .jBox-footer .button-close:active {
  background-color: #ddd;
}

.AvatarsModal .jBox-content {
  padding: 0;
  background: center -10px no-repeat;
}

#AvatarsComplete.AvatarsModal .jBox-content {
  font-style: italic;
  text-align: center;
  color: #999;
}

#AvatarsComplete.AvatarsModal .jBox-content>div {
  position: absolute;
  top: calc(50% - 23px);
  left: 25px;
  right: 25px;
}

.AvatarsModal .jBox-title {
  font-size: 26px;
  color: #000;
  font-weight: 300;
  text-align: center;
  padding: 0;
  line-height: 60px;
}

.AvatarsModal .jBox-footer {
  border-top: 0;
  background: none;
  padding: 0;
}

.AvatarsTooltip .jBox-content {
  color: #fff;
  text-align: center;
}

.AvatarsTooltip .jBox-container,
.AvatarsTooltip .jBox-pointer:after {
  background: #000;
  box-shadow: none;
}

.AvatarsTooltipLike .jBox-container,
.AvatarsTooltipLike .jBox-pointer:after {
  border-color: #7d0;
}

.AvatarsTooltipDislike .jBox-container,
.AvatarsTooltipDislike .jBox-pointer:after {
  border-color: #e33;
}

.AvatarsCollection {
  width: 50%;
  position: fixed;
  bottom: 5px;
  z-index: 11000;
}

.AvatarsCollection#DislikedAvatars {
  left: 4px;
}

.AvatarsCollection#LikedAvatars {
  right: 4px;
}

.AvatarsCollection>div {
  width: 47px;
  height: 45px;
  padding: 0 1px;
}

.AvatarsCollection#DislikedAvatars>div {
  float: left;
}

.AvatarsCollection#LikedAvatars>div {
  float: right;
}

.AvatarsCollection>div>div {
  position: relative;
  overflow: hidden;
  width: 45px;
  height: 45px;
  border: 2px solid;
  border-radius: 50%;
  background: #000;
}

.AvatarsCollection#DislikedAvatars>div>div {
  border-color: #e33;
}

.AvatarsCollection#LikedAvatars>div>div {
  border-color: #7d0;
}

.AvatarsCollection>div>div>img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -27px;
  margin-left: -30px;
}