.quest-completed {
    .modal-body {
        overflow-y: visible;
    }
}
.quest-completed-bar {
    position: relative;
    > header {
        display: inline-block;
        color: $dark-grey;
        min-width: 72px;
    }
    ._bar {
        display: inline-block;
        background-color: lighten($blue-color, 20%);
        border: 1px solid darken($blue-color, 0%);
        text-align: right;
        line-height: 24px;
        width: 0;
        min-width: 40px;
        padding-right: 5px;
    }
    margin-bottom: 12px;
}
.quest-completed-bar-animated {
    ._bar {
        background-color: $mat;
        overflow: visible !important; // hacking jquery's overflow: hidden behavior
    }
}

.quest-completed-congratulations, .quest-completed-total {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    > header {
        color: $dark-grey;
        line-height: 34px;
        font-size: 18px;
        font-weight: 200;
        margin-right: 5px;
    }
}
.quest-completed-congratulations {
    margin-bottom: 2px;
}
.quest-completed-total {
    margin-bottom: 15px;
}

.quest-completed-share {
    @include clearfix;
}
.quest-completed-share-text {
    font-size: 12px;
    color: $dark-grey;
    @include breakpoint(A) {
        float: left;
        margin-right: 30px;
    }
}

.quest-completed-share-button {
    @include breakpoint(A) {
        float: left;
    }
}
