/* Set Desktop Masonry Columns */
@include media-breakpoint-up(sm) {
	.card-columns {
		column-count: 2;
	}
}

.card {
	margin-bottom: $grid-gutter-width;
	box-shadow: 0 2px 3px rgba(0, 0, 0, .05);

	&-primary, &-info, &-success, &-warning, &-red {
		color: #fff;
	}

	.card-header + .list-group {
		.list-group-item:first-child { border-top: 0;} 
	}

	.card-header + .table {
		margin-bottom: 0;
		thead th { border-top: 0; } 
		tr:first-child td { border-top: 0 !important;}
		&.table-bordered {
			border: 0 !important;
			th, td {
				&:first-child {
					border-left: 0 !important;
				}
				&:last-child {
					border-right: 0 !important;
				}
			}
		}
	}
	&, > .card-block {
		> *:last-child {
			margin-bottom: 0 !important;
		}
	}
}

.card-pagination {
	line-height: 0;
	.pagination {
		margin:0;
	}
}
.card-pager {
	.pager {
		margin:0;
	}
}

.card-block-half {
	padding: .625rem;
}

.card {
	.card-header,
	.card-footer {
		padding: .625rem;
		color: rgba(0,0,0, .84);
		.media {
			line-height: inherit; 
		} 
	} 
	
	.card-title {
		font-size: 1.25rem;
		margin-bottom: .625rem;
	} 

	.card-subtitle {
		color: $text-muted;
	}
	
	.card-title + .card-subtitle {
		margin-top: -.625rem;
	}
	.card-header { 
		.card-title, .card-subtitle {
			margin:0 !important;
		}
		.media-body {
			line-height: 1.5;
		}
	} 
}

// CARD STYLES
.card-red {
	@include card-variant($red-500, $red-500);
}

.card-success {
	.progress {
		@include progress-variant(darken($brand-success, 12%));
		&[value]::-webkit-progress-bar {
			background-color: lighten($brand-success, 20%);
		}
	}
}

.card {
	&.card-stats {
		&-primary {
			border-left: 3px solid $brand-primary;
		}
		&-success {
			border-left: 3px solid $brand-success;
		}
		&-warning {
			border-left: 3px solid $brand-warning;
		}
		&-danger {
			border-left: 3px solid $brand-danger;
		}
	}
	.card-button-wrapper {
		position: absolute;
		right: $grid-gutter-width;
		top: $grid-gutter-width;

		.card-button {
			color: $text-muted;
			&:hover {
				color: $brand-primary;
			}
		}
	}
}

// TABS IN CARD
.card > .nav-tabs {
	margin-bottom: -1px;
	background: $body-bg;
	.nav-link {
		border-radius: 0;
		color: $card-nav-link;
		&:hover, &.active {
			border-color: transparent;
			color:  $card-nav-link-hover;
		}
	}
}

.card-group {
	margin-bottom: $grid-gutter-width;
}