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

@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Empty text */
.dbqkbc-clearfix {
	&:after {
		content: "";
		clear: both;
		display: table;
	}
}
textarea {
	&:focus {
		outline: none;
	}
}
input {
	&:focus {
		outline: none;
	}
}

.dbqkbc-container {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	@include scrollbar;
}

.dbqkbc-articles-container {
	.dbqkbc-articles {
		
	}

	// 1 = Show articles on the left and selected article on the right
	&[data-display-mode="1"] {
		.dbqkbc-article {
			display: none;
		}
	}
}

.dbqkbc-files-container {
	.dbqkbc-files {

	}

	// 1 = Show files on the left and selected file on the right
	&[data-display-mode="1"] {
		.dbqkbc-file {
			display: none;
		}
	}
}

.dbqkbfc-filter-button {
	line-height: 28px;

	svg {
		float: left;
		margin: 2px 10px 2px 0 !important;
		fill: white;
	}
}

.dbqkbc-filters-container {
	float: left;
	width: 100%;
	margin-bottom: 15px;
	.dbqkbfc-toolbar-container {
		width: 100%;
		.dbqkbfc-search-container {
			float: right;
			position: relative;
			padding: 20px 0;
			.dbqkbfc-input-search {
				float: left;
				height: 40px;
				border: 1px solid #E0E0E0;
				background: #FFFFFF;
				border-radius: 25px;
				padding: 0 15px 0 40px;
			}
			svg {
				position: absolute;
				left: 0;
				margin: 12px;
				fill: #707070;
			}
		}
		.dbqkbfc-filter-button {
			float: right;
			margin-right: 20px;
		}
	}
}

.dbqkba-article {
	width: 100%;
	height: 100%;
	cursor: pointer;
	//background: #FFFFFF;
	//box-shadow: 0px 0px 15px #00000026;
	//border-radius: 5px;
	position: relative;
	.dropdown {
		position: absolute;
		top: 0;
		right: 0;
		.dropdown-toggle {
			background: 0;
			border: 0;
			box-shadow: none;
		}
	}
	img {
		float: left;
		width: 100%;
		height: 200px;
		object-fit: cover;
		object-position: center;
		border-radius: 5px 5px 0 0;
	}
	h5 {
		float: left;
		width: 100%;
		color: #F9C016;
		font-size: 20px;
		font-weight: normal;
		line-height: 21px;
		padding: 20px 20px 0 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	h4 {
		float: left;
		width: 100%;
		color: #000000;
		font-size: 24px;
		font-weight: normal;
		line-height: 28px;
		font-style: normal;
		padding: 0 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	p {
		float: left;
		width: 100%;
		color: #000000;
		font-size: 16px;
		font-weight: normal;
		line-height: 28px;
		padding: 0 20px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		white-space: normal;
	}
}

.dbqkbpc-load-more-button {
	float: right;
	font-weight: 600;
}

.dbqkbc-loading-spinner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	.dbqkbc-loading-spinner {
		border: 1px solid $color-layer-12;
		border-radius: 50%;
		border-right-color: transparent;
		border-bottom-color: transparent;
		width: 80px;
		height: 80px;
		animation-name: loading;
		animation-duration: 700ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
}

.dbqkbc-loading-spinner-container {
	position: absolute;
	background: $background-color-translucent-default;
	z-index: 2;
	margin: 0;
	padding: $global-padding 0;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	//margin-left: 5px;
	//height: calc(100% - 10px);
	//width: calc(100% - 10px);

	&.dbqkbc-loading-spinner-opaque {
		position: unset;
		opacity: 1;
		background: none;
	}
}

.dbqkbc-empty-text {
	float: left;
	width: 100%;
}

.dbqkbc-active-item {
	//box-shadow: 0px 0px 0px 2px inset $color-primary !important;
	background-color: $render-engine-background-color !important;
	border-left: 5px solid $color-primary;

	.dbqkba-article-text-container {
		padding-left: 15px !important;
		width: calc(100% - 35px) !important;
		max-width: calc(100% - 35px) !important;
	}
}