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

.dbqkbc-articles-container {
	display: flex;
	//margin: $global-margin;
	//background-color: $render-engine-background-color;
	//box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
	//width: calc(100% - 30px);
	//min-height: 90px;
	//border-radius: $global-border-radius;

	.dbqkbc-article,
	.dbqkbc-article-content {
		//padding: 0px 30px;

		.dbq-document {
			float: left;
			width: 100%;
			//@include border-radius;
			//box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);

			.dbqdb-header {
				//background: color(default-background);
				background: transparent;
				border-top-left-radius: $border-radius-default;
				border-top-right-radius: $border-radius-default;
			}
		
			//#document-topics { // Commented out because it's difficult to override (e.g., for the alert content container).
				.topic {
					//@include border-radius;
					//box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
					//margin-top: 30px;
					//margin-bottom: 30px;
					padding: 0px;
					font-size: $font-size-base;
					line-height: 24px;
					font-weight: 400;
					//max-width: 900px;
					margin-left: auto;
					margin-right: auto;
					//background-color: color(default-background) !important;
					background-color: transparent !important;

					header, footer {
						.document-header, .document-footer {
							margin: 0px;

							h1 {
								color: $color-white;
							}

							.col-xs-12, 
							.col-sm-12, 
							.col-md-12 {
								padding: 0 !important;
							}
						}

						.document-header {
							padding: 45px 60px !important;
							background: $color-primary;
							border-top-left-radius: $border-radius-default;
							border-top-right-radius: $border-radius-default;
							color: #fff;
						}

						.document-footer {
							padding: 15px 60px !important;
						}

						display: block;

						.topic_progress {
							display: none !important;
						}
					}

					section {
						//padding: 45px 60px;
						//border-radius: 0px;

						h1 {
							margin: 0px;
							margin-bottom: 15px;
							color: color(knowledgebase-h1-color);
							font-size: 24px;
							line-height: 36px;
						}
						h2 {
							margin: 0px;
							color: color(knowledgebase-h2-color);
							margin-bottom: 15px;
							font-size: 20px;
							line-height: 30px;

						}
						h3,
						h4 {
							margin: 0px;
							padding: 0;
							color: color(knowledgebase-h3-color);
							margin-bottom: 15px;
							font-size: 16px;
							line-height: 24px;
						}

						p {
							margin-bottom: 15px;
						}
						li {
							color: color(text-color-p);
						}
						.action-button.raised {
							margin-bottom: 15px;

							a {
								margin: 0px;

								span {
									background: color(primary);
									color: color(white);
								}
							}
						}
						ol[class*="dbq-list-type-"],
						ul[class*="dbq-list-type-"] {
							ul,
							ol {
								margin: 0px 0px 15px 18px;
							}
						}

						ul {
							li {
								line-height: 24px !important;
							}
						}

						ol {
							counter-reset: list-item-index;

							&::before {
								position: absolute;
							}

							> li {
								counter-increment: list-item-index;
								list-style-type: none;
								position: relative;
								padding-left: 15px;
								padding-top: 2px;
								margin-top: 0px;
								margin-bottom: 15px;
								&:before {
									content: counter(list-item-index);
									background: color(primary);
									width: 28px;
									height: 28px;
									border-radius: 50%;
									line-height: 28px;
									color: white;
									text-align: center;
									position: absolute;
									top: 0;
									left: -28px;
								}
							}

							ul, ol {
								> div:first-child {
									li {
										margin-top: 0 !important;
										padding-top: 0 !important;
									}
								}
							}
						}

						// Styling for bullet lists in ordered lists (disable counter increment and styling)
						ol.dbq-list-type-number ul.dbq-list-type-bullet,
						ul.dbq-list-type-bullet {
							li {
								list-style-type: disc;
								counter-increment: none;
								margin-top: 5px;
								margin-bottom: 5px;

								&:before {
									content: "";
									background: transparent;
								}
							}
						}

						ul.dbq-list-type-arrow {
							li {
								list-style-type: none;
								position: relative;
								padding-left: 15px;
								&:before {
									content: "\25BA \0020";
									font-size: 8px;
									position: absolute;
									top: 0px;
									left: -10px;
								}
							}
						}
						img {
							margin: 5px 0 15px 0;
						}
						.article-table-view {
							.table {
								margin-top: 5px;
								margin-bottom: 30px;
								> div {
									&:first-of-type {
										background: #ddd;
									}
								}
							}
							.container {
								display: block;
								padding: 0px;
							}
							.flex-container {
								> div {
									border: 1px solid #ddd;
									padding: 5px;
									p {
										margin: 0px;
									}
								}
							}
						}

						.knowledgebase-reference-container {
							border-radius: $border-radius-default;
							//border: $border-default;
							background-color: color(gray-7) !important;
							margin-top: 30px;
							padding: $padding-default !important;
							//padding-bottom: 0 !important; // Commented out because the 'last-visible-element'-class should deal with the spacing.

							[data-element-type="Button"] {
								float: left;
								width: initial;
								margin: 0 $margin-default $margin-default 0;

								.action-button.raised {
									margin: 0px;

									a {
										margin: 0px;

										span {
											background-color: color(text-color-inverse);
											color: color(text-color-default);
										}

										&:hover {
											span {
												color: color(text-color-a-hover);
												box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
											}
										}
									}
								}

								&:last-of-type {
									margin-right: 0px;
								}
							}
						}

						.row.element {
							&:after {
								content: "";
								display: block;
								clear: both;
							}
						}
					}

					.knowledgebase-info,
					.knowledgebase-warning {
						padding: $padding-default !important;
						border-radius: $border-radius-default;
						position: relative;
						padding-left: 60px !important;
						min-height: 60px;
						margin: 15px 0 30px 0;
						display: inline-block;
						width: initial;

						&::before {
							font-size: 24px;
							display: block;
							text-align: center;
							border-radius: 15px;
							line-height: 30px;
							width: 30px;
							height: 30px;
							position: absolute;
							top: 15px;
							left: 15px;
						}
					}

					// .dbqdb-alert {
					// 	margin: 0 0 30px 0 !important;
					// 	border-radius: $border-radius-default;
					// 	padding: $padding-default;

					// 	p {
					// 		margin: 0px;
					// 	}
					// }

					// To-do move warning/alert/success boxes to Document builder _dbq-form
					// .alert-warning {
					// 	border: 1px solid color(knowledgebase-warning-container-color);
					// 	background-color: color(knowledgebase-warning-container-background);

					// 	p {
					// 		color: color(knowledgebase-warning-container-color);
					// 	}

					// 	.dbqdb-alert-icon-container .dbqdb-alert-icon[data-alert-block-type="1"] {
					// 		fill: color(knowledgebase-warning-container-color);
					// 	}
					// }

					// .alert-info {
					// 	border: 1px solid color(knowledgebase-info-container-color);
					// 	background-color: color(knowledgebase-info-container-background);

					// 	p {
					// 		color: color(knowledgebase-info-container-color);
					// 	}

					// 	.dbqdb-alert-icon-container .dbqdb-alert-icon[data-alert-block-type="2"] {
					// 		fill: color(knowledgebase-info-container-color);
					// 	}
					// }

					// .alert-success {
					// 	border: 1px solid color(knowledgebase-success-container-color);
					// 	background-color: color(knowledgebase-success-container-background);

					// 	p {
					// 		color: color(knowledgebase-success-container-color);
					// 	}

					// 	.dbqdb-alert-icon-container .dbqdb-alert-icon[data-alert-block-type="3"] {
					// 		fill: color(knowledgebase-success-container-color);
					// 	}
					// }

					p {
						font-size: $font-size-base;
						line-height: 24px;
						font-weight: 400;
						margin-bottom: 15px;
						//color: color(text-color-p); // disabled because of conflict with alerts
					}

					.dbq-element-header-5 {
						font-size: $font-size-base;
						//color: color(text-color-p); // disabled because of conflict with alerts
						line-height: 24px;
						font-weight: 800;
						white-space: normal;
						//margin-top: 5px;
						margin-bottom: 15px;
						//color: #ff6655;
					}
				}

				.btn-default {
					display: inline-block;
					background: color(button-background-color);
					color: $color-white;
					padding: 10px 15px;
					text-decoration: none;
					border: none;
					text-align: center;
					margin: 4px 2px;
					margin-bottom: 30px;
					cursor: pointer;
					height: initial;

					&:hover {
						background: color(button-hover-background-color);
					}
				}
			//}
		}
		.dbqdb-document-tags {
			//margin-left: auto;
			//margin-right: auto;
			//max-width: 900px;
			margin-top: $margin-default;
			margin-bottom: $margin-default;
			padding-left: 60px;
			padding-right: 60px;
			width: 100%;
			text-align: center;
			float: left;
		}
	}
}

// Styling for a knowledge base where the article is displayed next to the articles
.dbqkbc-articles-container {
	.dbqkbc-article-content {
		//#document-topics { // Commented out because it's difficult to override (e.g., for the alert content container).
			.topic {
				float: left;
				margin: 0;
				max-width: initial;
				width: 100%;
				padding: 30px;
				
				section {
					float: left;
					width: 100%;
				}

				.col-xs-12,
				.col-sm-12,
				.col-md-12 {
					padding: 0 !important;
				}
			}
		//}
	}
}

.dbqkbc-articles-container {
	.dbqkbc-article {
		//#document-topics { // Commented out because it's difficult to override (e.g., for the alert content container).
			.topic {
				.col {
					padding: 0px !important;
				}
				.col-xs-12 {
					padding: 0px !important;
				}
				.col-md-6 {
					padding: 0px !important;
				}
				.col-lg-4 {
					padding: 0px !important;
				}
			}
		//}
	}
}

.dbqkbf-folder p {
	padding: 0;
	display: -webkit-box; 
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 2; 
	overflow: hidden; 
	text-overflow: ellipsis; 
}

.dbqkba-article p {
	overflow: hidden;
	padding: 0;
	max-height: 20px;
}

.dbqkbf-folder p::before,
.dbqkba-article p::before {
	position: absolute;
	border-top: 0px solid transparent;
	border-bottom: 0px solid transparent;
	width: 16px;
	height: 16px;
	float: right;
	padding: 0;
	bottom: 0;
	right: 0;
}

.dbqkbf-folder p::before,
.dbqkba-article p::before::after {
	content: "";
	position: absolute;
	right: 0;
	width: 1rem;
	height: 1rem;
	background: white;
	background: white;
}