.Reactions {
    position: relative;
    font-size: 11px;
    line-height: 18px;
    margin: 15px 0 0 0;
}

.React {
    position: relative;
    top: auto;
    right: auto;
}

.ReactButton {
    display: inline-block;
    margin: 0 5px;
    line-height: 18px;
    vertical-align: top;
    position: relative;
}

/* The viewing user's current reaction. */
.ReactButton-active {
    font-weight: bold;
}

/* Loading feedback while a reaction request is in flight. */
.ReactMenu-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Rank progress on the profile. */
.Yaga.RankProgress {
    margin-top: 15px;
}
.RankProgress-bar {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin: 6px 0;
}
.RankProgress-fill {
    display: block;
    height: 100%;
    background: #37ade3;
    border-radius: 4px;
}
.RankProgress-next {
    font-size: 0.85em;
    opacity: 0.8;
}

.UserReactionWrap {
    position: relative;
    line-height: 1;
    display: inline-block;
    margin-right: 3px;
}

.UserReactionWrap .PhotoWrapSmall {
    height: 24px;
    width: 24px;
}

.UserReactionWrap .YagaReactSprite,
.UserReactionWrap .YagaReactPhoto,
.UserReactionWrap .YagaReactEmoji {
    position: absolute;
    right: -2px;
    bottom: -2px;
}

.UserReactionWrap .YagaReactSprite {
    background-image: url("images/action-sprites-bordered.png");
}

.Item:hover .Reactions a {
    width: inherit;
}

.DataCounts {
    margin: 5px 0;
    text-align: center;
}

.CountTotal {
    display: block;
    line-height: 100%;
    font-size: 28px;
}

.CountItemWrap {
    width: auto;
    display: inline-block;
}

.CountItem {
    display: block;
    text-align: center;
    border: solid 2px transparent;
    padding: 4px;
    margin: 0 4px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: visible;
}

.CountItem.Selected {
    background: rgba(55, 173, 227, 0.1);
    border: solid 2px rgba(55, 173, 227, 0.2);
    padding: 4px;
}

.RecordReactions {
    margin-top: 15px;
}

.RecordReactions + .Reactions {
    margin-top: 0;
}

.Reactions .Count {
    background: #555;
    color: white;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: top;
    padding: 1px 0.8ex;
}

.Item .Reactions > * {
    visibility: hidden;
}

.Item .Reactions > *.Visible {
    visibility: visible;
}

.Item.Open .Reactions > *,
.Item:hover .Reactions > *,
.Item .Reactions > .FlagMenu {
    visibility: visible;
}

.Reactions > a.React > .YagaReactSprite,
.Reactions > a.React > .YagaReactPhoto,
.Reactions > a.React > .YagaReactEmoji {
    margin-right: 2px;
}

/* iPad/iPhone */
@media only screen and (device-width: 768px),
    only screen and (max-device-width: 480px) {
    .Item .Reactions > * {
        visibility: visible;
    }
}

.YagaReactSprite,
.YagaReactPhoto,
.YagaReactEmoji {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    font-size: 16px;
    vertical-align: bottom;
}

.YagaReactPhoto > .YagaReactionImage {
    max-width: 16px;
    max-height: 16px;
}

.YagaReactSprite {
    background-image: url("images/action-sprites.png");
    background-position: 16px 16px;
    background-repeat: no-repeat;
}

input + .YagaReactSprite {
    vertical-align: middle;
}

.ReactHappy {
    background-position: -4px -4px;
}
.ReactHappy2 {
    background-position: -28px -4px;
}
.ReactSmiley {
    background-position: -52px -4px;
}
.ReactSmiley2 {
    background-position: -76px -4px;
}
.ReactTongue {
    background-position: -100px -4px;
}
.ReactTongue2 {
    background-position: -124px -4px;
}
.ReactSad {
    background-position: -148px -4px;
}
.ReactSad2 {
    background-position: -172px -4px;
}
.ReactWink {
    background-position: -196px -5px;
}
.ReactWink2 {
    background-position: -220px -4px;
}
.ReactGrin {
    background-position: -244px -4px;
}
.ReactShocked {
    background-position: -268px -4px;
}
.ReactConfused {
    background-position: -292px -4px;
}
.ReactConfused2 {
    background-position: -316px -4px;
}
.ReactNeutral {
    background-position: -340px -4px;
}
.ReactNeutral2 {
    background-position: -364px -4px;
}
.ReactWondering {
    background-position: -4px -28px;
}
.ReactWondering2 {
    background-position: -28px -28px;
}
.ReactPointUp {
    background-position: -52px -28px;
}
.ReactPointRight {
    background-position: -76px -28px;
}
.ReactPointDown {
    background-position: -100px -28px;
}
.ReactPointLeft {
    background-position: -124px -28px;
}
.ReactThumbsUp {
    background-position: -148px -28px;
}
.ReactThumbsUp2 {
    background-position: -172px -28px;
}
.ReactShocked2 {
    background-position: -196px -28px;
}
.ReactEvil {
    background-position: -220px -28px;
}
.ReactEvil2 {
    background-position: -244px -28px;
}
.ReactAngry {
    background-position: -268px -28px;
}
.ReactAngry2 {
    background-position: -292px -28px;
}
.ReactHeart {
    background-position: -316px -28px;
}
.ReactHeart2 {
    background-position: -340px -28px;
}
.ReactHeartBroken {
    background-position: -364px -28px;
}
.ReactStar {
    background-position: -4px -52px;
}
.ReactStar2 {
    background-position: -28px -52px;
}
.ReactGrin2 {
    background-position: -52px -52px;
}
.ReactCool {
    background-position: -76px -52px;
}
.ReactCool2 {
    background-position: -100px -52px;
}
.ReactQuestion {
    background-position: -124px -52px;
}
.ReactNotification {
    background-position: -148px -52px;
}
.ReactWarning {
    background-position: -172px -52px;
}
.ReactSpam {
    background-position: -196px -52px;
}
.ReactBlocked {
    background-position: -220px -52px;
}
.ReactEye {
    background-position: -244px -52px;
}
.ReactEye2 {
    background-position: -268px -52px;
}
.ReactEyeBlocked {
    background-position: -292px -52px;
}
.ReactFlag {
    background-position: -316px -52px;
}
.ReactBrightnessMedium {
    background-position: -340px -52px;
}
.ReactQuotesLeft,
.ReactQuote {
    background-position: -364px -52px;
}
.ReactMusic {
    background-position: -4px -76px;
}
.ReactPacman {
    background-position: -28px -76px;
}
.ReactBullhorn {
    background-position: -52px -76px;
}
.ReactRocket {
    background-position: -76px -76px;
}
.ReactFire {
    background-position: -100px -76px;
}
.ReactHammer {
    background-position: -124px -76px;
}
.ReactTarget {
    background-position: -148px -76px;
}
.ReactLightning {
    background-position: -172px -76px;
}
.ReactShield {
    background-position: -196px -76px;
}
.ReactCheckmarkCircle {
    background-position: -220px -76px;
}
.ReactLab {
    background-position: -244px -76px;
}
.ReactLeaf {
    background-position: -268px -76px;
}
.ReactDashboard {
    background-position: -292px -76px;
}
.ReactDroplet {
    background-position: -316px -76px;
}
.ReactFeed {
    background-position: -340px -76px;
}
.ReactSupport {
    background-position: -364px -76px;
}
.ReactHammer2 {
    background-position: -4px -100px;
}
.ReactWand {
    background-position: -28px -100px;
}
.ReactCog {
    background-position: -52px -100px;
}
.ReactGift {
    background-position: -76px -100px;
}
.ReactTrophy {
    background-position: -100px -100px;
}
.ReactMagnet {
    background-position: -124px -100px;
}
.ReactSwitch {
    background-position: -148px -100px;
}
.ReactGlobe {
    background-position: -172px -100px;
}
.ReactBookmark {
    background-position: -196px -100px;
}
.ReactBookmarks {
    background-position: -220px -100px;
}
.ReactStar3 {
    background-position: -244px -100px;
}
.ReactInfo {
    background-position: -268px -100px;
}
.ReactInfo2 {
    background-position: -292px -100px;
}
.ReactCancelCircle {
    background-position: -316px -100px;
}
.ReactCheckmark {
    background-position: -340px -100px;
}
.ReactClose {
    background-position: -364px -100px;
}

.MenuItems a:hover .YagaReactSprite {
    background-image: url("images/action-sprites-white.png");
}

#ActionIcons {
    margin-top: 10px;
}

#ActionIcons img.Selected {
    background: rgba(0, 0, 0, 0.15);
}

#Content .BoxFilter.BoxBestFilter {
    display: block;
}

/* Missing sprite background offsets */
.Sprite.SpBestOf {
    background-position: -246px -5px;
}

.Sprite.SpBadge {
    background-position: -245px -52px;
}