.card {
    background-color: $card-background-color;
    border: 1px solid $card-border-color;
    color: $color-text-dark;

    .item-title {
        line-height: $card-text-height-larger;
        padding-left: $card-title-indent;
        padding-right: $card-title-right-padding;
        text-indent: -$card-title-indent;

        .item-number {
            @include font-size-base-light();

            vertical-align: text-bottom;
        }

        .name {
            @include font-size-large();
        }
    }

    .related-title {
        @include font-size-base-light();

        font-style: italic;
        line-height: $card-text-height-larger;
        margin-top: $title-separator-spacing;
        padding-right: $card-title-right-padding;
    }

    .status {
        @include font-size-base();
        border-color: $card-status-transparent-border-color;
        border-style: solid;
        border-width: $card-status-border-width;
        line-height: $card-text-height-large;
    }

    .status.circle {
        border-radius: 50%;
    }

    .status.bar {
        border-radius: $card-status-bar-border-radius;
        margin-top: $card-status-bar-top-margin;
        padding: $card-status-bar-padding;
    }

    .status.overdue {
        background-color: $card-status-overdue-background-color;
        border-color: $card-status-overdue-border-color;
    }

    .status.notstarted {
        background-color: $card-status-notstarted-background-color;
        border-color: $card-status-notstarted-border-color;
    }

    .status.inprogress {
        background-color: $card-status-inprogress-background-color;
        border-color: $card-status-inprogress-border-color;
    }

    .status.onhold {
        background-color: $card-status-onhold-background-color;
        border-color: $card-status-onhold-border-color;
    }

    .status.complete {
        background-color: $card-status-complete-background-color;
        border-color: $card-status-complete-border-color;
    }

    .end {
        text-align: right;
    }

    .flag {
        @include tap-highlight-color(transparent);
        align-self: flex-start;
        color: $flag-on-fill-color;
        flex-shrink: 0;

        &:hover {
            cursor: pointer;
        }

        &.on {
            @include icon-block-with-size($fa-var-flag, $icon-size-medium);

            &:after {
                vertical-align: top;
            }
        }

        &.off {
            @include icon-block-with-size($fa-var-flag-o, $icon-size-medium);

            &:after {
                vertical-align: top;
            }
        }
    }
}