// Card
.card {}

.card-border {
    background-color: $white;
    border: solid 1px $gray-200;
}

.card-shadow {
    background-color: $white;
    box-shadow: $box-shadow-sm;
}

.card-hover-shadow {
    transition: all .3s;

    &:hover {
        border-color: #fff;
        box-shadow: $box-shadow;
    }
}

.card-progress {
    height: .25rem;

    &:last-child {
        border-radius: 0 0 2px 2px;
    }

    &:first-child {
        border-radius: 2px 2px 0 0;
    }
}

.card-overlay {
    position: relative;
    display: block;
    overflow: hidden;

    &:before {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        content: "";

    }

        &.card-overlay-gradient:before {
            background: linear-gradient(220deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
        }
    .card-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
    }

    &:hover {
        &:before {}
    }
}