//@import "../../../abstracts/abstracts";

.dbqkbfc-document-tags-container {
	display: none;
	.dbqkbfc-document-tag-filters-container {
		float: left;
		width: 100%;
		height: 260px;
		background: #f1f1f1;
		.dbqkbfc-document-tag-filter-categories-container {
			float: left;
			margin: 15px;
			width: calc(50% - 30px);
			height: calc(100% - 30px);
			background: #f1f1f1;
			overflow-y: auto;
			.dbqkbfc-document-tag-category {
				padding: 10px 30px;
				color: #000000de;
				background: #fff;
				cursor: pointer;
				margin-bottom: 2px;
				font-size: 14px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				&:last-of-type {
					margin-bottom: 0px;
				}
			}
			.dbqkbfc-document-tag-category.active {
				background: #3588cc;
				color: #fff;
			}
		}
		.dbqkbfc-document-tag-filter-tags-container {
			float: left;
			margin: 15px;
			width: calc(50% - 30px);
			height: calc(100% - 30px);
			background: #fff;
			overflow-y: auto;
			.dbqkbfc-document-tag {
				label {
					display: block;
					padding: 20px 20px 10px 20px;
					float: left;
					width: 100%;
					margin-bottom: 0;
					padding: 0 20px 20px 20px;
					span {
						float: left;
						font-size: 16px;
						line-height: 20px;
						padding: 0 0 0 10px;
					}
				}
				input {
					float: left;
					width: 20px;
					height: 20px;
				}
				&:first-of-type {
					label {
						padding-top: 20px;
					}
				}
			}
		}
	}
	.dbqkbfc-document-tag-selected-container {
		float: left;
		margin-top: 30px;
		.dbqkbfc-selected-document-tag-button {
			border-color: #e4e4e4;
			color: #000000de;
			border-radius: 15px;
			height: 30px;
			line-height: 15px;
			font-size: 14px;
			margin-right: 15px;
			margin-bottom: 15px;
			&:last-of-type {
				margin-right: 0px;
			}
			svg {
				fill: #666666;
				width: 14px;
				height: 14px;
				margin: 0 0 0 5px;
				float: right;
			}
		}
	}
}
.dbqkbfc-document-tags-container.show {
	display: block;
}
.dbqkbfc-document-tag {
	float: left;
	width: 100%;
}

@media screen and (max-width: 991px) {
	.dbqkbfc-document-tags-container {
		.dbqkbfc-document-tag-filters-container {
			height: auto;
			.dbqkbfc-document-tag-filter-categories-container {
				width: calc(100% - 30px);
				height: auto;
			}
			.dbqkbfc-document-tag-filter-tags-container {
				width: calc(100% - 30px);
				height: auto;
			}
		}
	}
}