.card {
	background-color: #fff;
	box-shadow: 1px 1px 5px fade-out($color-text-light, 0.9);

	.card {
		box-shadow: none;
	}

	margin-bottom: $card-margin-bottom;
	border-radius: 0;
	border: none;

	.card-header {
		background-image: none;
		background-color: #ffffff;
		align-items: center;
		display: flex;
		flex-direction: row;
		padding: 0;
		border-radius: 0;
		min-height: 50px;
		border: none;

		@include clearfix();

		&.bordered {
			border-bottom: 1px solid $color-divider;
		}

		&.card-header-sm {
			min-height: 40px;
		}

		&>span {
			vertical-align: middle;
		}

		.pull-right {
			margin-left: auto;
		}

		.header-block {
			padding: 0.5rem $card-padding-x;;


			@include media-up(xl) {
				padding: 0.5rem $card-padding-x-xl;
			}

			@include media-down(sm) {
				padding: 0.5rem $card-padding-x-sm;
			}
		}

		.title {
			color: $color-text;
			display: inline-flex;
		}

		.btn {
			margin: 0;
		}

		.nav-tabs {
			border-color: transparent;
			align-self: stretch;
			display: flex;
			position: relative;
			top: 1px;

            .nav-item {
            	margin-left: 0;
            	display: flex;
            	align-self: stretch;

                .nav-link {
                	display: flex;
                	align-self: stretch;
                	align-items: center;
                	color: $color-text;
                	opacity: 0.7;
                    padding-left: 10px;
                    padding-right: 10px;
                    border-radius: 0;
                    font-size: 14px;
                    border-top-width: 2px;
                    border-bottom: 1px solid $color-divider;
                    text-decoration: none;

                    &.active {
	                	border-top-color: $color-primary;
	                	border-bottom-color: transparent;
	                	opacity: 1;

	                	&:hover,
	                	&:focus {
	                		opacity: 1;
	                		background-color: $color-text-inverse;
	                		border-color: $color-divider $color-divider transparent;
	                		border-top-color: $color-primary;;
	                	}
	                }

	                &:hover,
	                &:focus {
	                	opacity: 1;
	                	background-color: transparent;
	                	border-color: transparent;
	                }
                }
            }
        }
	}

	&.card-default {

		& > .card-header {
			background-color: #fff;
			color: inherit;
		}
	}

	&.card-primary {
		border-color: $color-primary;
		& > .card-header {
			background-color: $color-primary;
			border-color: $color-primary;
		}
	}

	&.card-success {
		& > .card-header {
			background-color: $color-success;
		}
	}

	&.card-info {
		& > .card-header {
			background-color: $color-info;
		}
	}

	&.card-warning {
		& > .card-header {
			background-color: $color-warning;
		}
	}

	&.card-danger {
		& > .card-header {
			background-color: $color-danger;
		}
	}

	&.card-inverse {
		& > .card-header {
			background-color: $color-inverse;
		}
	}

	.title-block,
	.card-title-block {
		padding-bottom: 0;
		margin-bottom: 20px;
		border: none;

		@include clearfix();
	}

	.section {
		margin-bottom: 20px;
	}

	.example,
	.section.demo {
		margin-bottom: 20px;
	}
}


.card-block {
	padding: $card-padding-x;

	.tab-content {
		padding: 0;
		border-color: transparent;
	}

	@include media(xl) {
		padding: $card-padding-x-xl;
	}

	@include media-down(sm) {
		padding: $card-padding-x-sm;
	}
}

.card-footer {
	background-color: #fafafa;
}
