/* Knowledge Base styles
----------------------------------------------------------------- */

@import "../../../../css/_mixins.scss";
@import "../../../../css/_theme-vars.scss";
@import "../../css/_skin-vars.scss";


/* Buttons
--------------------------------------------- */
.eckb-kb-template #epkb-main-page-container.epkb-tabs-template .epkb-search .epkb-search-box .epkb-search-box_button-wrap button {
	@include theme_button_filled;
	padding: var(--theme-var-btn_padding) var(--theme-var-btn_padding2) !important; 
	text-shadow: none;

	&:hover,
	&:focus {
		@include theme_button_colors_hover;
	}
}

/* Link 2 */
.eckb-kb-template #epkb-main-page-container.epkb-tabs-template .epkb-search .epkb-search-box .epkb-search-box_button-wrap button {
	@include theme_button_colors_style_link2;

	&:hover,
	&:focus {
		@include theme_button_colors_hover_style_link2;
	}
}


/* Inputs & Forms
--------------------------------------------- */
.eckb-kb-template #epkb-main-page-container.epkb-tabs-template .epkb-search .epkb-search-box input[type="text"] {
	@include theme_field_template;
	@include theme_field_colors;
	@include border-radius(var(--theme-var-rad) !important);

	&:hover,
	&:focus {
		@include theme_field_colors_hover;
	}
}


/* Main Page
--------------------------------------------- */
.eckb-kb-template {
	opacity: 0
}
.eckb-kb-template #epkb-main-page-container.epkb-tabs-template {
	/* Search */
	.epkb-doc-search-container {
		text-align: inherit;
		padding: 0;

		/* Title */
		.epkb-doc-search-container__title {
			text-align: inherit;
			margin-bottom: 0;

			&:after {
			    content: '';
			    display: block;
			    width: 100%;
			    height: 1px;
			    margin-top: 20px;    
			    margin-bottom: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 3px ) ); // replace 33px
			    background-color: var(--theme-color-bd_color);
			}
		}

		/* Search form */
		.epkb-search {
			width: auto;
			padding: 15px;
			background-color: var(--theme-color-bg_color);
			@include border-radius(6px);

			.epkb-search-box {
				display: flex !important;

				&:before {
					content: '\E9A1';
					font-family: $theme_icons;
					@include abs-lc(17px);
					font-size: 17px;
					color: var(--theme-color-text_light);
				}
				input[type="text"] {
					padding: var(--theme-var-input_padding) 20px var(--theme-var-input_padding) 3.153em !important; 
					height: auto;
				}
				.epkb-search-box_button-wrap {
					margin-left: 15px;

					button {
						padding-left: 4em !important;
						padding-right: 4em !important;
					}
				}
			}

			/* Search results */
			#epkb_search_results {
			    background-color: var(--theme-color-input_bg_color);
			    border: none;
			    padding: 13px 16px;
			    margin-top: 15px;
				@include border-radius(6px);


				.ep_font_icon_document::before {
					content: '\E9D8';
					font-family: $theme_icons;
				}
				.epkb-search-results-message {
				    font-size: var(--theme-font-h4_font-size);
				    font-weight: 600;
				    padding: 0;
				    margin-bottom: 0.85em;
				    color: var(--theme-color-text_dark);
				}
				ul {
					li + li {
					    margin-top: 0.83em;
					}
					li {
						padding: 0;
						line-height: inherit;

						a {
							color: var(--theme-color-text);
							position: relative;
							padding-left: 1.4em; 
							display: block;

							&:hover,
							&:focus {
								color: var(--theme-color-accent_link);
							}

							.epkb_search_results__article-title {
								color: inherit;
								position: initial;

								.epkb_search_results__article-title__icon {
								    font-size: 15px !important;
									margin: 0;
									@include abs-lt(-1px, 1px);
								}
								.epkb_search_results__article-title__text {
									font-size: 14px;
									line-height: 1.6em;
									margin: 0;
								}
							}
						}
					}
				}
			}

			/* Search loading */
			.loading-spinner {
			    top: 12px;
			    left: 13px;
			    background-color: var(--theme-color-input_bg_color);
			    z-index: 1;
			}
		}
	}

	/* Content */
	#epkb-content-container {
		max-width: unset;
		margin: 0;
		text-align: inherit;

		/* Filters */ 
		.epkb-main-nav {
			float: none;
			z-index: 2;
			position: relative;
			padding-top: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 6px ) ); // replace 26px

			&:after {
			    content: '';
			    width: 100%;
			    height: 1px;
			    display: block;
			    margin-top: -1px;
			    background-color: var(--theme-color-bd_color);
			}
			
			ul {
				float: none;
				overflow: hidden;

				li:last-child {
					padding-right: 0;
				} 
				li {
					width: auto;
					padding-right: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 17px ) ); // replace 47px
					border-bottom: 1px solid var(--theme-color-bd_color);
					background-color: transparent !important;
					@include transition-colors;

					&:before,
					&:after {
						display: none;
					}
					div {
						@include font(13px, 13px, 500);
						color: var(--theme-color-text_dark);
						background-color: transparent;
						padding: 0 0 19px;
						margin: 0 0 -1px;
						border-bottom: 1px solid var(--theme-color-bd_color);
						@include transition-colors;

						h2 {
							line-height: inherit;
						}
					}
				}
				li.active div,
				li div:hover,
				li div:focus {					
					color: var(--theme-color-accent_link2) !important;
					border-color: var(--theme-color-accent_link2);
				}
			}
		}

		/* Panels */
		.epkb-panel-container {
			text-align: inherit;
			margin-top: var(--theme-var-grid_gap);

			.epkb_top_panel {
				text-align: inherit;
				margin: 0 calc(-1 * var(--theme-var-grid_gap)) calc(-1 * var(--theme-var-grid_gap)) 0;

				&.active {
					display: flex !important;
		  			flex-wrap: wrap;
				}
				.epkb-top-category-box {
					padding: 0 var(--theme-var-grid_gap) var(--theme-var-grid_gap) 0;
					margin: 0;
					width: 33.3%;
					box-shadow: none;
					position: relative;

					&:before {
						content: '';
						display: block;
						@include abs-pos(0,  var(--theme-var-grid_gap),  var(--theme-var-grid_gap), 0);
						@include border-radius(var(--theme-var-content_rad));
						background-color: var(--theme-color-content_bg);
					}

					/* Icons */
					.ep_font_icon_gears:before {
						content: '\E9DF';
						font-family: $theme_icons;
					}
					.ep_font_icon_question:before {
						content: '\E9DE';
						font-family: $theme_icons;
					}
					.ep_font_icon_folder:before {
						content: '\E9DD';
						font-family: $theme_icons;
					}
					.epkbfa-briefcase:before {
						content: '\E9DC';
						font-family: $theme_icons;
						font-size: 0.9em;
					}
					.epkbfa-sliders:before {
						content: '\E9DB';
						font-family: $theme_icons;
						font-size: 0.7em;
					}
					.ep_font_icon_money:before {
						content: '\E9D9';
						font-family: $theme_icons;
					}
					.ep_font_icon_document:before {
						content: '\E9D8';
						font-family: $theme_icons;
					}
					.epkbfa-calendar:before {
						content: '\e9af';
						font-family: $theme_icons;
						font-size: 0.9em;
					} 
					.ep_font_icon_shopping_cart:before {
						content: '\e9b0';
						font-family: $theme_icons;
						font-size: 0.9em;
					}

					/* Head */
					.section-head {
						z-index: 2;
						position: relative;
						padding: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 8px ) ) calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 11px ) ) 0; // replace 38px 41px 0
						border: none;

						& > div {
							.epkb-cat-icon {
								font-size: 35px;
								margin-right: 14px;
								color: var(--theme-color-accent_link);
								width: 35px;
								height: 38px;
							}
							 .epkb-cat-name {
							    margin-top: 5px;
							}
						}
				
					}

					/* Body */
					.epkb-section-body {
						z-index: 2;
						position: relative;
						padding: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 9px ) ) calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 11px ) ) calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 5px ) ); // replace 29px 41px 35px

						ul {
							li + li {
							    margin-top: 0.83em;
							}
							li {
								line-height: inherit;

								a {
									color: var(--theme-color-text);
									position: relative;
									padding-left: 0; 
									display: block;

									&:hover,
									&:focus {
										color: var(--theme-color-accent_link);
									}

									.eckb-article-title__icon {
									    font-size: 15px !important;
										margin: 0;
										@include abs-lt(-1px, 1px);
									}
									 .eckb-article-title__text {
									 	line-height: 1.6em;
									 }
									.article_underline_effect span:hover {
									    text-decoration: none;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}


/* Single Post
--------------------------------------------- */
.eckb-kb-template > #eckb-article-page-container-v2 {
	/* Header */ 
	#eckb-article-header {
		display: none;
	}

	/* Body */
	#eckb-article-body {
		display: block;
		width: auto;
 
		/* Sidebar */
		#eckb-article-right-sidebar {
			display: none;
		}

		/* Article content */
		#eckb-article-content {
			padding: 0;
			background-color: transparent;

			/* Header */
			#eckb-article-content-header-v2 {
				display: block;
				box-sizing: border-box;

				/* Breadcrumbs */
				#eckb-article-content-header-row-1 {
					display: none;
				}

				/* Title */
				#eckb-article-content-title-container {
					display: block;
					margin: 0 0 16px;

					.eckb-article-title {
					    margin: 0.05em 0 0 0;
					}
				}

				/* Meta */
				#eckb-article-content-header-row-3 {
				    margin-bottom: 0;

					.eckb-article-content-header-row-left-group {
						margin-right: 0;

						& > div {
							@include font(13px !important, inherit, 500);
							color: var(--theme-color-text_light);
							background-color: transparent;
							padding: 0;
							margin-right: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 1px ) ); // replace 21px

							.eckb-meta-data-feature-icon {
								font-size: 16px;
								margin-right: 9px;
								display: inline-block;
								vertical-align: bottom;

								&:before  {
									font-family: $theme_icons; 
								}
								&[class*="calendar"]:before  {
									content: '\E9AF';
								}
								&[class*="pencil"]:before  {
									content: '\E9B8';				
								}
								&[class*="user"]:before  {
									content: '\E9BE';				
								}
							}
						}			
					}	
				}		

				/* Article toc */	
				.eckb-article-toc {
					float: none;
					margin: var(--theme-var-grid_gap) 0 0;

					.eckb-article-toc__inner {
						border-color: var(--theme-color-accent_link4);
						background-color:  var(--theme-color-navigate_bg);
						padding: 20px;
						@include border-radius(5px);

						.eckb-article-toc__title {
							margin-bottom: 15px;
							padding-bottom: 15px;
							border-color:  var(--theme-color-bd_color);
						}
						ul li {
							text-indent: 0;
						}
						ul a  {
							color: inherit;
						}
						ul a.active,
						ul a:hover {
							background-color: var(--theme-color-accent_link4);
							color: var(--theme-color-accent_text);
						}
					}
				}	
			}

			/* Body */
			#eckb-article-content-body {
				border-top: 1px solid var(--theme-color-bd_color);
				margin-top: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 1px ) ); // replace 31px
				padding-top: 6px;
				box-sizing: border-box;

				& > p:last-child {
					margin-bottom: 0;
				}
			}

			/* Footer */
			#eckb-article-content-footer {
				display: none;
			}
		}
	}
}