.kv-hotsheets-grid {
	$g: &;

	@extend .kv-row;

	.kv-content-box-container {
		@extend %kv-col-12, %kv-col-md-6, %kv-col-xl-3;

		margin-bottom: $grid-gutter-width;

		.kv-content-box {
			height: 100%;
			background-color: white;
			border-color: #ddd;

			&-heading, &-content {
				@extend .kv-py-3;
				border-color: #ddd;
			}

			&-heading {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	&-filter {
		@extend .kv-row, .kv-mb-2;

		position: relative;

		&:hover {
			& #{$g}-remove-filter {
				display: flex;
			}
		}

		label, &-label {
			@extend %kv-col-12, %kv-col-md-4;

			display: flex;
			align-items: center;
		}

		&-input {
			@extend %kv-col-12, %kv-col-md-7;

			& > * {
				width: 100%;
			}
		}

		#{$g}-remove-container {
			@extend %kv-col-12, %kv-col-md-1, .kv-p-0;

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	&-remove {
		text-align: center;
		width: 22px;
		height: 22px;
		line-height: 22px;
		border: 1px solid #ddd;
		border-radius: 3px;
		cursor: pointer;

		&-filter {
			display: none;
			justify-content: center;
			transition: kv-transition(flex);
		}

		i {
			font-size: 18px;
			color: #f44336;
		}
	}
}