.mx_RoomStatusBar {
    margin-top: 5px;
    margin-left: 65px;
    min-height: 24px;
}

/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_RoomStatusBar_indicator {
    padding-left: 18px;
    padding-right: 12px;
    margin-left: -73px;
    float: left;
    width: 24px;
    text-align: center;
}

.mx_RoomStatusBar_placeholderIndicator span {
    color: #333;
    opacity: 0.5;
    position: relative;
    animation-duration: 1s;
    animation-name: bounce;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
    animation-delay: 0.3s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
    animation-delay: 0.6s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes bounce {
    from {
        opacity: 0.5;
        top: 0;
    }

    to {
        opacity: 1;
        top: -6px;
    }
}

.mx_RoomStatusBar_scrollDownIndicator {
    cursor: pointer;
}

.mx_RoomStatusBar_unreadMessagesBar {
    color: #ff0064;
    cursor: pointer;
}

.mx_RoomStatusBar_connectionLostBar {
    margin-top: 19px;
    height: 58px;
}

.mx_RoomStatusBar_connectionLostBar img {
    padding-left: 10px;
    padding-right: 22px;
    vertical-align: middle;
    float: left;
}

.mx_RoomStatusBar_connectionLostBar_title {
    color: #ff0064;
}

.mx_RoomStatusBar_connectionLostBar_desc {
    color: #454545;
    font-size: 13px;
    opacity: 0.5;
}

.mx_RoomStatusBar_resend_link {
    color: #454545 ! important;
    text-decoration: underline ! important;
    cursor: pointer;
}

.mx_RoomStatusBar_tabCompleteBar {
    color: #4a4a4a;
}

.mx_RoomStatusBar_typingBar {
    color: #4a4a4a;
    opacity: 0.5;
    overflow-y: hidden;
    display: block;
}

.mx_RoomStatusBar_tabCompleteWrapper {
    display: flex;
    display: -webkit-flex;
    height: 24px;
}

.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}

.mx_RoomStatusBar_tabCompleteEol {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    color: #76CFA6;
}

.mx_RoomStatusBar_tabCompleteEol object {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -2px;
}