@use 'single-docs_widget' as single_docs_widget;
@use "variables";


/*=========== Start ezd-page_breadcrumb css ============*/
.ezd-breadcrumb {
	background: var(--black_50);
	padding: 12px 0;
	position: relative;
	z-index: 1;
	margin-top: -2px;

	.row {
		align-items: center;
	}

	.date {
		color: var(--black_500);
		float: right;
		font-size: 13px;

		i {
			padding-right: 5px;
		}
	}
}

body {
	&.disable-docly-header {

		section.breadcrumb_area,
		section.ezd-page_breadcrumb {
			display: none;

			&.ezd-breadcrumb {
				display: block;
			}
		}
	}

	&.single-docs.ezd-theme-docly {
		.ezd-page_breadcrumb:not(.ezd-breadcrumb) {
			display: none;
		}
	}
}

.single-docs {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 0;
		font-weight: 700;
	}

	.ezd-meta {
		color: var(--black_500);
		font-size: 15px;
		font-weight: 400;
		display: flex;
		flex-wrap: wrap;
		gap: 2px;

		@media (max-width: 767px) {
			gap: 5px;
		}
	}
}

.doc_documentation_area {
	z-index: 0;
	margin-top: 0;
	margin-bottom: 0;

	@media (max-width: 1440px) {
		min-height: 1000px;
	}

	.doc-scrollable a:focus {
		background: transparent !important;
	}

	.overlay_bg {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: var(--black_700);
		opacity: 0;
		z-index: 0;
		visibility: hidden;
		transition: all 0.4s linear;
	}

	&.overlay {
		.overlay_bg {
			opacity: 0.5;
			visibility: visible;
		}
	}
}

/*============ doc_left_sidebarlist css =========*/
.ezd-body-docs {
	>.modal-backdrop {
		position: unset;
	}
}

.doc_left_sidebarlist {
	padding-top: 60px;
	padding-bottom: 30px;
	z-index: 1;
	height: 100vh;
	position: relative;

	a {
		text-decoration: none;
	}

	&:before {
		content: '';
		width: 400%;
		right: 0;
		height: 100%;
		background: rgba(245, 247, 249, 1);
		position: absolute;
		border-right: 1px solid var(--border_on_white);
		top: 0;
		z-index: -1;
	}

	.ezd-scroll:not(.op-docs-sidebar) {
		overflow-y: auto;
		padding-right: 20px;
		margin-left: -10px;

		@media (max-height: 630px) {
			padding-bottom: 0;
			max-height: 450px;
		}
	}

	h2 {
		margin-bottom: 25px;
	}
}

/** === Left Sidebar / Docs Tree === **/
.nav-sidebar {
	margin: 0;

	&.ezd-list-unstyled {
		margin-bottom: 40px;
	}

	>.nav-item {
		>.doc-link {
			padding: 10px;
			border-radius: 5px;

			&:hover {
				background: rgba(208, 215, 222, 0.32);

				a {
					color: var(--black_900);
				}
			}

			mark {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
	}

	.nav-item {
		padding-right: 0;
		margin: 0 0 5px;
		position: relative;
		cursor: pointer;

		span.ezd-doc-lock {
			margin-left: 8px;
		}

		&.current_page_item {
			>.doc-link {
				color: var(--ezd_brand_color);
				background: var(--bs-white);
				border: 1px solid var(--black_50);

				a {
					color: var(--ezd_brand_color);
				}
			}
		}

		&.current_page_ancestor,
		&.current_page_parent {
			>.doc-link .nav-link {
				color: var(--ezd_brand_color);
			}
		}

		&.active {
			>.doc-link .icon {
				transform: rotate(-180deg);

				i.icon_minus-06 {
					display: inline-block;
				}

				i.icon_plus {
					display: none;
				}
			}

			img {
				&.open {
					display: block;
				}

				&.closed {
					display: none;
				}
			}
		}

		img {
			&.open {
				display: none;
			}

			&.closed {
				display: block;
			}
		}

		mark {
			background-color: var(--ezd_brand_color);
		}

		>a {
			display: flex;
		}

		&.has_child .doc-link {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;
		}

		.nav-link {
			padding: 0;
			display: flex;
			font-size: 14px;
			line-height: 20px;
			font-weight: 500;
			color: var(--black_600);
			align-items: start;
			flex: 1;
			text-decoration: none;

			img {
				margin-right: 15px;
				padding-right: 0;
				max-width: 18px !important;
				height: auto;
			}

			svg {
				margin-right: 15px;
				position: relative;
				top: -1px;

				path {
					@include variables.transition;
				}
			}

			&+.icon {
				font-size: 20px;
				color: var(--p_color);
				display: flex;
				transition: all 0.3s linear;
			}
		}

		&:hover,
		&.active {
			>.nav-link {
				color: var(--black_900);
			}

			svg {
				path {
					fill: #5cbbe5;
				}
			}
		}

		.icon i.icon_minus-06 {
			display: none;
		}

		i.icon_plus {
			display: inline-block;
		}

		.dropdown_nav {
			margin: 0;
			padding: 0 0 0 34px;
			width: 100% !important;
			display: none;
			list-style: none;

			li:not(.has_child) {
				line-height: 1.5;
				padding: 6px 10px;
				margin: 0 0 3px;
				border-radius: 5px;

				&.current_page_item {
					background: var(--bs-white);

					&:hover {
						background: var(--ezd_brand_color_20);

						a {
							color: var(--ezd_brand_color);
						}
					}
				}

				&.current_page_item.has_child .doc-link a {
					color: var(--black_800);
				}

				a {
					font-size: 14px;
					font-weight: 400;
					color: var(--black_600);
					padding: 0;
					text-decoration: none;

					&.active {
						color: var(--ezd_brand_color);

						i {
							color: var(--ezd_brand_color);
						}
					}
				}

				&.active {
					a {
						color: var(--ezd_brand_color);

						i {
							color: var(--ezd_brand_color);
						}
					}
				}

				.dropdown_nav li {
					margin-right: 0;
					margin-left: -10px;
				}
			}

			li.has_child {
				.doc-link {
					line-height: 1.5;
					padding: 6px 10px;
					margin: 0 0 5px;
					border-radius: 5px;

					&:hover {
						background: rgba(208, 215, 222, 0.32);
					}
				}
			}
		}

		span.icon {
			transform: rotate(0deg);
		}
	}

	&+.nav-sidebar {
		border-top: 1px solid #e5e9eb;
		padding-top: 20px;
	}
}

span.ezd-doc-lock {
	margin-left: 4px;
	font-size: 12px;
	height: 18px;

	&.ezd-lock-private i {
		color: #e74c3c;
	}

	&.ezd-lock-role i {
		color: #f39c12;
	}
}

.nav-sidebar .nav-item .dropdown_nav li:not(.has_child):hover {
	background: rgba(208, 215, 222, 0.32);

	>a {
		color: var(--black_800);
	}
}

#content_elements {
	margin-top: 50px;
}

// Scrollbar
.scroll {
	&::-webkit-scrollbar {
		width: 8px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--black_200);
		border-radius: 30px;
	}
}

.bottom_nav {
	.nav-item .nav-link {
		i {
			position: relative;
			color: var(--black_700);
			padding-left: 4px;
			transition: all 0.2s linear;
		}

		&:hover {
			i {
				transform: translateX(5px);
			}
		}
	}
}

/*============ doc_left_sidebarlist css =========*/
.documentation_info {
	.c_head {
		font-weight: 500;
		margin-bottom: 12px;

		.anchorjs-link {
			font-size: 22px !important;
			text-decoration: none;
		}
	}

	.slideshow {
		width: auto;
		height: 600px;

		.slide {
			width: inherit;
			height: inherit;

			.item--horse {
				top: 124px;
				left: 78px;
			}
		}

		.nav {
			display: none;
		}

		.title {
			color: var(--ezd_brand_color);
		}
	}
}

.anchorjs-link {
	text-decoration: none !important;
}

.sticky-nav-doc #documentation {
	padding-top: 174px;
}

.doc_rightsidebar.sroll {
	.mCSB_container {
		overflow: visible;
	}
}

.single-docs .shortcode_title {
	margin-bottom: 40px;
	position: relative;
	z-index: 1;

	.ezd-doc-badge {
		display: inline-table;
		padding: 5px 12px;
		text-decoration: none !important;
		background: var(--ezd_brand_color_60);
		text-transform: uppercase;
		font-size: 12px;
		margin: 0 0 10px;
		border-radius: 3px;
		color: #fff;

		&:hover {
			background: var(--ezd_brand_color_70);
			color: #fff;
		}

		a {
			color: #fff;
		}
	}

	h1 {
		margin-bottom: 10px;
		font-size: 2.6em;
		color: var(--black_900);
		line-height: 1.3;

		@media (max-width: 767px) {
			font-size: 2em;
		}
	}

	p {
		span {
			font-weight: 500;
		}
	}

	&+ul {
		margin-top: -0.8rem;
	}
}

.doc_documentation_area {
	background: #fff;
}

.link {
	background: #f1fdf3;
	padding: 14px 10px 14px 30px;
	border-radius: 4px;

	p {
		position: relative;
		margin-bottom: 0;
		padding-left: 40px;

		&:before {
			content: '\52';
			position: absolute;
			font-family: eleganticons;
			left: 0;
			top: 4px;
			font-size: 24px;
			color: #10d631;
		}
	}
}

.help_text {
	padding: 0 0 0;

	.border_bottom {
		margin-top: 30px;
	}

	.help_info {
		display: flex;
		flex-wrap: wrap;
		padding-top: 16px;
		margin-left: -30px;
		margin-right: -30px;

		.help_item {
			width: 33.33%;
			margin-bottom: 15px;
			padding: 0 30px;

			h4 {
				font-size: 16px;
				margin-bottom: 15px;
				transition: color 0.2s linear;

				i {
					font-size: 18px;
					top: 2px;
					position: relative;
				}

				&:hover {
					color: var(--ezd_brand_color);
				}
			}
		}
	}
}

.feedback_link {
	align-items: center;
	padding-top: 30px;

	.eazydocs-feedback-wrap {
		justify-content: end;
		display: flex;
	}

	p.left,
	p.right {
		font-weight: 500;
		font-size: 14px !important;
		color: var(--p_color);
		margin-bottom: 0 !important;

		@media (max-width: 767px) {
			text-align: center;
		}

		i {
			padding-right: 5px;
		}
	}

	p.left {
		a {
			color: var(--ezd_brand_color);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	p.right {
		margin: 0;
		text-align: right;
	}

	.vote-link-wrap {
		margin-left: 10px;
	}

	.h_btn {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		display: inline-block;
		padding: 5px 15px;
		background-color: var(--green_color);
		transition: all 0.2s linear;
		margin-left: 5px;
		border-radius: 15px;
		text-decoration: none !important;
		line-height: 1;

		&:hover,
		&:focus {
			background: #1f9852 !important;
		}

		&.red {
			background: #e74c3c;

			&:hover,
			&:focus {
				background: #d84334 !important;
			}
		}

		span {
			height: 17px;
			display: inline-block;
			border-radius: 50%;
			text-align: center;
			line-height: 17px;
			font-size: 10px;
			background: rgba(255, 255, 255, 0.7);
			font-weight: 400;
			color: #101010;
			margin-left: 5px;
			padding: 0 5px;
		}

		&:hover {
			color: #fff;
		}
	}
}

.eazydocs-alert {
	font-size: 14px;
	padding: 6px 10px;
	border-radius: 2px;
}

/** === Help Contact Form === **/
#eazydocs_feedback {
	background: rgb(0 0 0 / 60%);

	.action_btn {
		border: 0;
		padding: 15px 40px;
		box-shadow: none;
		font-weight: 500;
		background: var(--ezd_brand_color_90);
		color: #fff;
		border-radius: 5px;

		&:hover {
			background: var(--ezd_brand_color);
			color: #fff;
		}
	}

	.close {
		font-size: 26px;
		opacity: 1;
		color: #fff;
		position: absolute;
		right: -40px;
		top: -40px;
		padding: 5px 8px 7px;
		z-index: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--black_350);
		border-radius: 3px;
		transition: all 0.3s;
		border: none;

		@media (max-width: 991px) {
			right: -10px;
			top: -25px;
		}

		&:hover {
			background: #cd2653;
			border: none;
			box-shadow: none;
			text-decoration: none;
		}
	}
}

.help_form {
	max-width: 730px;
	display: flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 0;
	padding: 45px;
	background: var(--black_50);
	top: 50%;
	transform: translateY(-50%) !important;
	border-radius: 10px;
	z-index: 999;

	@media (max-width: 991px) {
		max-width: 600px;
		padding: 40px 30px;
	}

	.modal-content {
		border: 0;
		background: transparent;

		.title {
			margin-top: 0;
			padding-top: 0;

			@media (max-width: 991px) {
				font-size: 20px;
			}
		}
	}
}

.contact_form {
	.form-group {
		padding: 0;

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

		&.submit-area {
			margin-bottom: 0;
			margin-top: 10px;
		}

		.form-control,
		textarea {
			border: 1px solid var(--black_50);
			height: 52px;
			border-radius: 5px;
			background-color: var(--bs-white);
			color: var(--black_800) !important;
			font-weight: 400;
			padding-left: 25px;
			box-shadow: none;
			width: 100%;
			box-sizing: border-box;

			@include variables.placeholder {
				color: #878b99;
			}

			&:focus {
				border-color: var(--black_100);

				&::placeholder {
					color: var(--black_800);
				}
			}

			&:disabled {
				color: var(--black_500);
				background: var(--black_25);

				&:hover {
					cursor: not-allowed;
				}
			}
		}

		textarea {
			width: 100%;
			height: 160px;
			padding-top: 15px;
			display: block;
		}
	}
}

/*========== doc right sidebar css ============*/
.ezd-widgets {
	margin-top: 30px;

	.widget .title {
		font-size: 22px;
		font-weight: 500;
	}
}

.open_icon {
	width: 25px;
	height: 35px;
	background: #e8eeff;
	font-size: 20px;
	text-align: center;
	position: absolute;
	left: -40px;
	color: var(--ezd_brand_color);
	display: none;
	top: 0;
	line-height: 35px;

	&:hover {
		background: var(--ezd_brand_color);
		color: #fff;
	}

	&#mobile-right-toggle {
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	&#mobile-left-toggle {
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	@media (max-width: 767px) {
		display: block;
	}

	i {
		display: inline-block;

		&+i {
			display: none;
		}
	}

	&.overlay {
		i {
			display: none;

			&+i {
				display: inline-block;
			}
		}
	}
}

.full-width-doc {
	.doc_rightsidebar {
		padding-right: 15px;
	}
}

.single-docs {
	.doc_rightsidebar {
		max-height: 100%;
		width: calc(100% + 35px);
		padding-right: 10px;

		.ezd-subscription-btn {
			margin-bottom: 20px;
		}
	}
}

.doc_rightsidebar {
	padding-top: 70px;
	height: 100%;
	position: relative;

	@media (max-width: 767px) {
		padding-top: 0;
	}

	.pageSideSection {
		padding-left: 20px;
		position: relative;

		.dropdown.bootstrap-select {
			width: 100% !important;
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			width: 1px;
			height: 100%;
			background: var(--border_on_white);
			left: 0;
		}
	}

	&.ezd-scroll {
		.mCSB_inside>.mCSB_container {
			margin-right: 0;
		}
	}

	.toc-heading {
		font-size: 12px;
		font-weight: 600;
		color: #9daab6;
		margin-bottom: 15px;

		i {
			margin-right: 6px;
			font-size: 16px;
			position: relative;
			top: 3px;
		}
	}

	.doc_right_link {
		li {
			margin-bottom: 10px;
			padding-left: 25px;
			position: relative;

			a {
				font-size: 14px;
				font-weight: 500;
				color: var(--p_color);

				i {
					padding-right: 12px;
					position: absolute;
					left: 0;
					font-size: 12px;
					top: 5px;
				}
			}
		}
	}

	.pageSideSection {
		&.open {
			&:hover {
				.dropdown-menu.open {
					opacity: 1;
					visibility: visible;
				}
			}
		}

		.ezd_btn_select {
			background: var(--black_25);
			border: 1px solid var(--black_50);
			border-radius: 5px;
			font-size: 16px;
			color: #6b707f;
			padding: 5px 20px 3px;
			box-shadow: none;
			margin: 0;
			width: 100%;
			text-align: left;
			position: relative;

			&::after {
				content: '\33';
				border: 0;
				font-family: 'ElegantIcons';
				top: 3px;
				right: 5px;
				position: absolute;
				color: #6b707f;
			}

			li {
				list-style: none;
				color: var(--black_500);
			}

			i {
				padding-right: 8px;
			}

			&:focus {
				outline: none !important;
				box-shadow: none !important;
				background: var(--bs-white);
			}

			&:hover {
				color: #6b707f !important;
			}

			.bs-caret {
				display: none;
			}
		}

		.lang-select {
			position: relative;
			margin-bottom: 20px;
		}

		.ezd_b {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
			background: var(--bs-white);
			z-index: 2;
			border: 0;

			&.ezd_show {
				display: block;
			}

			ul {
				margin-bottom: 0;

				li {
					color: var(--p_color);
					position: relative;
					font-size: 14px;
					display: block;
					width: 100%;
					padding: 0.25rem 1rem;
					line-height: 30px;
					cursor: pointer;

					i {
						margin-right: 5px;
					}

					&:hover,
					&.active {
						background: var(--black_25);
						color: var(--ezd_brand_color);
					}

					&.active {
						border-left: 1px solid;
					}
				}
			}
		}

		&:hover {
			.dropdown-menu.open {
				opacity: 0;
				visibility: hidden;
			}
		}
	}

	.bootstrap-select {
		margin-bottom: 20px;
		position: relative;

		>.dropdown-menu {
			box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
			background: #fff;
			border: 0;
			position: absolute;
			z-index: 1000;

			.inner {
				.dropdown-menu {
					border: 0;
					visibility: visible;
					opacity: 1;

					li {
						a {
							color: var(--p_color);
							position: relative;
							font-size: 14px;
							display: block;
							width: 100%;
							padding: 0.25rem 1rem;
							line-height: 30px;

							&:before {
								content: '';
								width: 2px;
								height: 0;
								position: absolute;
								left: 0;
								top: 0;
								background: var(--ezd_brand_color);
								transition: all 0.2s linear;
							}

							i {
								padding-right: 8px;
							}

							&.active {
								background: #f6f6f6;
								color: var(--ezd_brand_color);

								&:before {
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	#font-switcher {
		margin-bottom: 30px;
	}
}

.toc_right {
	overflow-y: auto;

	ul {
		padding: 0;
		margin: 0;

		li {
			margin: 0 0 10px;
			display: block;
			width: 100%;

			ul li:last-child {
				margin-bottom: 0;
			}
		}

		ul {
			padding-left: 15px;
			position: relative !important;
			background: transparent !important;
			border: 0 !important;
			opacity: 1 !important;
			visibility: visible !important;
			width: 100% !important;
			box-shadow: none !important;
			padding-top: 10px;

			li {
				a {
					&:before {
						display: none;
					}
				}
			}
		}
	}

	li {
		&:not(.active) {
			.nav-link {
				color: var(--black_500);
			}
		}

		a.nav-link {
			font-size: 14px;
			padding: 0;
		}

		&.active {
			>.nav-link {
				color: var(--ezd_brand_color);
				background: transparent;
				opacity: 1;

				&::before {
					left: -20px;
					height: 100%;
					content: ' ';
					position: absolute;
					border-left: 2px solid;
					color: var(--ezd_brand_color);
					top: 0;
				}
			}

			.nav .active {
				.nav-link {
					&:before {
						display: none;
					}
				}
			}
		}
	}

	.nav-link {
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		padding: 0;
		position: relative;
		text-decoration: none;

		&:not(.active) {
			color: var(--black_500);
		}

		&:focus {
			background-color: transparent !important;
		}

		&.active {
			font-weight: 500;
			color: var(--ezd_brand_color);

			+.nav .active::before {
				display: none;
			}

			&::before {
				left: -20px;
				height: 100%;
				content: ' ';
				position: absolute;
				border-left: 2px solid;
				color: var(--ezd_brand_color);
			}
		}
	}

	li:last-child .nav-link {
		margin-bottom: 0;
	}
}

//  TOC numbering
@media (max-width: 991px) {
	.doc-middle-content {
		margin-top: 50px;
	}

	.doc_documentation_area {
		position: relative;
		overflow: hidden !important;
	}

	.left-column .doc_left_sidebarlist {
		max-width: 330px;
		width: 330px;
		height: 100vh;
		left: -330px;
		position: absolute;
		top: 0;
		z-index: 2;
		padding: 30px 20px;
		box-sizing: border-box;

		&.opened {
			z-index: 3;
		}
	}

	.doc_right_mobile_menu .doc_rightsidebar {
		max-width: 290px;
		width: 100%;
		height: 100vh;
		right: -290px;
		position: absolute;
		top: 0;
		z-index: 2;
		background: #fff;
		padding: 30px 15px 30px 0;
		box-sizing: border-box;

		&.opened {
			z-index: 3;
		}
	}

	.open_icon {
		display: block;
		left: -25px;
		right: auto;
	}

	.doc_left_sidebarlist .open_icon {
		right: -25px;
		left: auto;
	}

	.doc_right_mobile_menu .doc_rightsidebar,
	.left-column .doc_left_sidebarlist {
		&.sticky {
			position: fixed;
			top: 55px;
			margin-top: 0;
		}
	}
}

@media (max-width: 360px) {
	.left-column .doc_left_sidebarlist {
		max-width: 280px;
		width: 280px;
		left: -280px;
		padding: 30px 10px;
	}
}

//  TOC numbering
@media (max-width: 591px) {

	.doc_right_mobile_menu .doc_rightsidebar,
	.left-column .doc_left_sidebarlist {
		&.sticky {
			top: 65px;
		}
	}
}

.toc_auto_numbering {
	ul {
		counter-reset: item;
		flex-wrap: wrap;
		display: block;

		li {
			counter-increment: item;
			white-space: normal;

			&.active {
				>.nav-link {
					padding-left: 16px;
					letter-spacing: 0.5px;

					&::before {
						content: counters(item, '.') '. ';
						padding-left: 18px;
					}
				}

				.active {
					>.nav-link {
						padding-left: unset;
					}
				}
			}
		}
	}

	.nav-link {
		letter-spacing: 0.5px;

		&::before {
			content: counters(item, '.') '. ';
		}

		&.active {
			&::before {
				content: counters(item, '.') '. ';
				left: 0;
				height: auto;
				position: relative;
				border: none;
				color: inherit;
			}
		}
	}
}

.mobile_menu {
	width: 300px;
	position: fixed;
	height: 100vh;
	max-height: 100vh !important;
	top: 0;
	background: #fff;
	right: -300px;
	z-index: 1050;
	transition: all 0.4s linear;

	.doc_left_sidebarlist {
		padding-left: 20px;

		&:before {
			display: none;
		}
	}

	&.open {
		right: 0;
	}

	.close_nav {
		padding-top: 20px;
		padding-left: 30px;
		font-size: 28px;
	}
}

/*=============== doc_documentation_full_area css =========*/
.full-width-doc {
	.doc_left_sidebarlist {
		margin-right: 0;
		padding-left: 0;
	}

	&.body_fixed {
		.doc_left_sidebarlist {
			width: 287px;
		}
	}

	.doc_rightsidebar {
		margin-left: 0;
	}
}

body.doc-no-banner {
	.doc_left_sidebarlist {
		padding-top: 0;
		margin-top: 70px;

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

body:not(.onepage-doc) .sticky_menu {
	.doc_documentation_area {
		&.body_fixed {

			.doc_left_sidebarlist,
			.doc_rightsidebar {
				top: 60px;
			}
		}
	}
}

.resource {
	.c_head {
		margin-bottom: 5px;
	}

	.tag_list {
		padding-top: 0;

		li {
			margin-top: 4px;

			a {
				display: inline-block;
				font-weight: 500;
			}
		}
	}
}

/*========== typography_content css ========*/
.doc {
	.code-preview {
		border: 1px solid #e5ebef;
		padding: 20px;
		box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.02);
		position: relative;

		#header-name {
			margin-bottom: 0;
		}

		img {
			max-width: 100%;
		}

		&.video_img {
			display: inline-block;
		}
	}

	.code-toolbar {
		.snippets {
			margin-bottom: 0;

			code {
				margin-bottom: 20px;
			}
		}
	}

	.code_item {
		padding-top: 15px;

		p {
			a {
				color: var(--ezd_brand_color);
			}
		}
	}
}

.vjs-iframe-blocker {
	display: none;
}

.video-js {
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	height: 360px;

	.mfp-close {
		right: -55px;
		top: -10px;
	}
}

/*============ Sticky Nav doc css ================*/
.sticky-nav-doc {

	&:not(.onepage-doc) .body_fixed .doc_rightsidebar,
	&:not(.onepage-doc) .body_fixed .doc_left_sidebarlist {
		padding-top: 100px;
	}
}

.fontsize-controllers {
	.btn-group {
		box-shadow:
			0 1px 0 0 rgba(3, 13, 37, 0.2),
			inset 0 -8px 14px 0 rgba(3, 13, 37, 0.1);
		border-radius: 4px;
		display: flex;
		align-items: center;

		button {
			height: 36px;
			font-size: 16px;
			font-weight: 400;
			color: var(--black_700) !important;
			border: 0;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
			background-color: transparent !important;
			padding: 5px 12px;
			border-radius: 0.25rem;
			transition:
				color 0.15s ease-in-out,
				background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out,
				box-shadow 0.15s ease-in-out;
			margin: 0px;
			box-shadow: none;

			&:focus,
			&:hover {
				outline: none;
				box-shadow: none;
				background: rgba(0, 0, 0, 0.2) !important;
			}

			&.rvfs-reset {
				border-left: 1px solid var(--black_50);
				border-right: 1px solid var(--black_50);
				padding: 5px 14px;
			}
		}
	}
}

.print {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--p_color);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--black_50);
	border-radius: 4px;
	cursor: pointer;
	transition:
		color 0.15s ease-in-out,
		background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;

	&:hover {
		color: var(--ezd_brand_color);
		background: rgba(0, 0, 0, 0.04);
		border-color: var(--black_100);
	}

	&:focus-visible {
		outline: 2px solid var(--ezd_brand_color);
		outline-offset: 2px;
	}

	i {
		pointer-events: none;
	}

	/* Busy state while the print dialog is being prepared. */
	&.is-printing {
		pointer-events: none;
		opacity: 0.6;

		i {
			width: 16px;
			height: 16px;
			border: 2px solid currentColor;
			border-top-color: transparent;
			border-radius: 50%;
			animation: ezd-print-spin 0.6s linear infinite;

			&::before {
				content: none;
			}
		}
	}
}

@keyframes ezd-print-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Collaps Tabs Area css
============================================================================================ */
.collaps_tabs {
	margin-bottom: 70px;

	.collaps_tab_inner {
		.shortcode_title {
			margin-bottom: 25px;

			h4 {
				a {
					color: var(--black_700);
				}
			}
		}
	}
}

.doc-btm {
	margin-top: 60px;
	clear: both;

	ul.card_tagged {
		padding-left: 0;
		margin: 0;
		display: flex;
		list-style: none;
		flex-wrap: wrap;

		li {
			font-size: 14px;
			font-weight: 500;
			color: var(--black_500);
			margin: 0 8px 5px 0;

			a {
				background: rgba(175, 184, 193, 0.2);
				color: var(--black_700);
				line-height: 25px;
				padding: 0 14px;
				display: inline-block;
				border-radius: 12.5px;
				font-size: 14px;
				font-weight: 400;
				text-decoration: none;

				&:hover {
					color: var(--ezd_brand_color);
					background: var(--ezd_brand_color_15);
				}
			}
		}
	}
}

/** === Dark Mode Switcher === **/
.doc_switch {
	margin-bottom: 30px;

	.tab-btn {
		font-size: 16px;
		margin-bottom: 0;
		cursor: pointer;
		transition: color 0.2s linear;

		&.active svg {
			color: var(--ezd_brand_color);
		}

		&:hover {
			color: var(--ezd_brand_color);
		}

		&.dark-mode {
			&.active {
				svg {
					path {
						fill: #fff;
					}
				}
			}
		}
	}

	svg {
		color: var(--black_700);
	}

	input[type='checkbox'] {
		width: 50px;
		height: 22px;
		border: 1px solid var(--ezd_brand_color_30);
		background: var(--ezd_brand_color_25);
		display: block;
		border-radius: 25px;
		margin: 0 10px 0 12px;
		position: relative;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: content-box;
		padding: 0;

		+.tab-btn {
			color: var(--black_500);
		}

		&::before {
			content: '';
			width: 16px;
			height: 16px;
			background: var(--ezd_brand_color);
			position: absolute;
			border-radius: 50%;
			top: 50%;
			transform: translateY(-50%);
			transition: all 0.2s linear;
			left: 3px;
		}

		&:checked::before {
			left: calc(100% - 19px);
		}

		&:checked+.tab-btn {
			color: var(--ezd_brand_color);
		}
	}
}

.doc-middle-content .topic_item_tabs {
	margin-top: 60px;
	overflow: hidden;

	.topic_list_item {
		background: transparent;
		border: 1px solid var(--black_50);
		border-radius: 15px;
		padding: 37px 35px 35px;
		box-shadow: none !important;

		@media (max-width: 1440px) {
			padding: 30px 30px 20px;
		}

		h4 {
			font-weight: 500;
			font-size: 16px;
			margin: 0 0 20px;
			color: var(--black_800);
		}

		.navbar-nav {
			padding: 0;
			margin: 0;
			list-style: none;

			li {
				margin: 0 0 10px;
				font-size: 16px;

				a {
					color: var(--black_600);
					font-size: 16px;
					transition: all 300ms linear 0s;
					text-decoration: none;

					&:focus {
						background-color: transparent !important;
						outline: none !important;
					}

					i {
						color: var(--ezd_brand_color);
						padding-right: 12px;
					}
				}

				&:hover {
					a {
						color: var(--ezd_brand_color);

						i {
							color: var(--ezd_brand_color);
						}
					}
				}
			}
		}
	}
}

.search {
	.searchbar-tabs {
		border-bottom: 1px solid var(--black_50);
		padding-bottom: 5px;
	}

	.search-post-item {
		margin-bottom: 25px;

		.title {
			margin-bottom: 10px;
			font-weight: 500;
		}

		.breadcrumb {
			margin-bottom: 3px;

			.breadcrumb-item {
				&:last-child {
					display: none;
				}
			}
		}

		.b_top_post_content {
			p {
				margin-bottom: 5px;
				line-height: 1.6;
				font-size: 15px;
			}
		}
	}
}

.single-docs #post .d-items .documentation_item .icon img {
	max-width: 30px !important;
}

/*============== End doc_categories_guide_area css =============*/

.eazydocs-footer {
	overflow-x: hidden;
	padding-top: 26px;
	margin-top: 0 !important;
	background: var(--bs-white);
}

.doc-middle-content {
	padding: 60px 50px 0;
	position: relative;

	@media (max-width: 768px) {
		padding: 10px;
	}
}

.full-width-doc .doc-middle-content {
	padding-left: 50px;
	padding-right: 50px;
}

.dot-sep span:nth-child(2) {
	position: relative;
}

.dot-sep span.ezd-sep {
	&:before {
		content: '•';
		margin: 0 5px;
	}

	&:first-child {
		&::before {
			display: none;
		}
	}
}

.credit-text-container::after {
	display: block;
	clear: both;
	content: '';
	width: 300%;
	right: 1px;
	background: #f5f7f9;
	position: absolute;
	bottom: -75px;
	z-index: -1;
	height: 75px;
}

.eazydocs-comments-wrap {
	.comments-area {
		max-width: 100%;
		margin-left: unset;
		margin-right: unset;
	}

	form {
		input[type="submit"] {
			height: auto;
		}
	}
}

#comments {
	background: var(--bs-white);
	border-radius: 15px;

	h2,
	h3 {
		color: var(--black_800);
	}

	label {
		color: var(--black_600);
	}
}

.doc-post-content {
	.doc-scrollable {
		section {
			padding: 0;
		}

		.page-links {
			display: block;
			width: 100%;
			margin: 20px 0;

			span,
			a {
				background: var(--ezd_brand_color);
				color: white;
				padding: 4px 13px;
				text-decoration: none;
				border-radius: 3px;
				margin: 0 2px;
				text-align: center;
				min-height: unset;
				min-width: unset;
			}
		}
	}
}

.doc-post-content {
	.doc-scrollable {
		figure {
			max-width: 100%;
		}
	}
}

// Eazydocs password protected form
.single-docs #post {
	.doc-scrollable.editor-content {
		.anchorjs-link {
			padding-left: 5px;
		}
	}
}

.doc-content-wrap .ezd-password-wrap {
	border: 1px solid var(--black_75);
	border-radius: 5px;
	margin-bottom: 40px;

	.ezd-password-head {
		background-color: #0c213a;
		flex: 1 1 auto;
		border-radius: 5px 5px 0 0;
		padding: 22px 10px 10px;

		img.pw-logo {
			display: block;
			margin: 10px auto !important;
			width: 55px;
			height: auto;
		}

		p.ezd-password-title {
			font-size: 18px;
			color: #fff !important;
			font-weight: 500;
			margin: 0;
		}

		p.ezd-password-subtitle {
			color: #a4abc5;
			line-height: 1.6;
			font-size: 14px;
			font-weight: 400;
		}
	}

	.ezd-password-body {
		background: var(--black_50);
		padding: 30px;

		form {
			margin-bottom: 0;
			padding-bottom: 0;

			label {
				margin-bottom: 0.5rem;
				color: var(--black_600);
				font-weight: 500;
				font-size: 13px;
			}

			.form-group {
				margin-left: 0;
				margin-right: 0;
				margin-bottom: 0;

				.col-12 {
					padding: 0;
				}

				.input-group {
					width: 100%;
				}
			}

			input {
				border: 1px solid #e3ebf6;
				box-shadow: none;
				outline: none;
				padding: 10px 15px;
				font-size: 12px;
				font-weight: 400;
				line-height: 1.5;
				border-radius: 3px;
				width: 100%;
				height: 40px;
				margin-bottom: 0px;
				background: #fff;

				&:focus {
					color: #303e67;
					background-color: #fff;
					border-color: #8bb0fe;
				}
			}

			button {
				font-size: 14px;
				border: none;
				background-color: var(--ezd_brand_color_80);
				color: #fff;
				box-shadow: none;
				padding: 0.4em 1em;

				&:hover {
					background-color: var(--ezd_brand_color);
				}

				&:focus {
					box-shadow: none;
				}
			}
		}
	}

	@media (max-width: 1199px) {
		max-width: 100%;
	}

	@media (max-width: 991px) {
		max-width: 515px;
	}

	@media (max-width: 580px) {
		max-width: 100%;
	}
}

/** === Share Button === **/
.ezd-share-btn {
	color: var(--black_600);
	margin: 00px 0 20px;
	align-items: baseline;
	display: flex;
	gap: 8px;
	text-decoration: none !important;
	cursor: pointer;
	font-size: 16px;

	&:hover {
		color: var(--ezd_brand_color);
	}

	&:focus {
		background-color: transparent !important;
	}
}

div#eazydocs_share {
	background: #00000066;

	>.ezd-modal-dialog {
		max-width: 500px;
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		display: block;
		height: fit-content;
		z-index: 999;

		>.ezd-modal-content {
			padding: 30px 30px 35px;
			background-color: var(--bs-white);

			>.close {
				position: absolute;
				right: 10px;
				top: 10px;
				font-size: 34px;
				line-height: 0;
				cursor: pointer;
				color: var(--black_600);
				text-decoration: none;

				&:hover {
					color: #cd2653;
				}
			}

			>.eazydocs-share-wrap {
				>h2 {
					font-size: 24px;
					font-weight: 700;
					line-height: 1.3;
					margin: 0 10px 20px 0;
				}

				>.social-links {
					a {
						width: 56px;
						height: 56px;
						background-color: var(--black_50);
						display: inline-block;
						border-radius: 30px;
						text-align: center;
						padding-top: 15px;
						font-size: 20px;
						line-height: 0;
						color: var(--black_600);
						margin-right: 10px;
						text-decoration: none;
						transition: all 0.2s linear;
						box-sizing: border-box;

						&:hover {
							background-color: var(--black_25);
						}

						i {
							font-size: 24px;
							line-height: 24px;
						}

						&:nth-child(2) {
							>i {
								color: rgb(66, 103, 178);
							}
						}

						&:nth-child(3) {
							>i {
								color: rgb(0, 114, 177);
							}
						}

						&:nth-child(4) {
							>svg {
								vertical-align: baseline;
							}
						}
					}
				}

				>p {
					font-size: 14px;
					margin: 20px 0 2px;
					color: var(--black_600);
				}

				>.copy-url-wrap {
					position: relative;
					padding-bottom: 0px;
					margin-bottom: 0px;

					input {
						width: 100%;
						background: var(--black_25);
						opacity: 1;
						height: 37px;
						padding: 16px 48px 16px 10px;
						font-size: 15px;
						font-weight: 400;
						line-height: 1.5;
						color: var(--black_700);
						border: 1px solid var(--black_50);
						border-radius: 4px;
						margin-bottom: 0;
						box-sizing: border-box;

						&:focus {
							outline: 2px solid #0044c0;
							outline-offset: -1px;
						}
					}

					>.share-this-doc {
						width: 20px;
						position: absolute;
						right: 11px;
						top: 0;
						font-size: 20px;
						bottom: 0;
						margin: auto;
						display: block;
						line-height: 0;
						height: 100%;
						display: flex;
						align-items: center;

						&:hover {
							cursor: pointer;
						}

						>img {
							vertical-align: text-top;
							max-height: 23px;
							max-width: 25px;
						}
					}
				}
			}
		}
	}
}

.ezd-link-copied-wrap {
	display: none;
	font-size: 16px;

	&.copied {
		display: block;
		cursor: pointer;
		position: fixed;
		right: 10px;
		top: 10px;
		background: var(--ezd_brand_color);
		width: 300px;
		padding: 12px 30px 12px 47px;
		color: white;
		border-radius: 5px;
		z-index: 9999;

		&::before {
			content: '\e052';
			font-family: 'ElegantIcons';
			position: absolute;
			left: 15px;
			color: white;
			font-size: 23px;
			line-height: 28px;
		}

		&::after {
			content: 'M';
			font-family: 'ElegantIcons';
			position: absolute;
			right: 15px;
			color: white;
			font-size: 30px;
			line-height: 25px;
			font-weight: normal;
		}
	}

	&.copied-hide {
		display: none;
	}
}

body.admin-bar {
	.ezd-link-copied-wrap {
		top: 42px;
	}
}

/** === Sidebar === **/
.ezd-widgets {
	h2 {
		font-size: 2rem;
		margin-bottom: 15px;
	}
}

/** === Next/Prev Button === **/
.eazydocs-next-prev-wrap {
	column-count: 2;
	display: flex;
	gap: 20px;
	margin-top: 20px;

	@media (max-width: 580px) {
		flex-direction: column;
	}

	a {
		display: block;
		box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
		border: 1px solid var(--black_50);
		padding: 15px 20px;
		border-radius: 5px;
		text-decoration: none !important;
	}

	.next-prev-pager {
		color: var(--black_800);
		font-size: 17px;
		text-decoration: none;
		font-weight: 500;
		background: var(--black_25);
		flex: 1;
		line-height: 1.4;

		span {
			display: block;
			font-size: 12px;
			line-height: 18px;
			color: var(--black_500);
			font-weight: 400;
			margin-bottom: 6px;
		}

		&:hover {
			&::before {
				border-color: var(--ezd_brand_color);
				color: var(--ezd_brand_color);
			}

			border-color: var(--ezd_brand_color);
			color: var(--ezd_brand_color);
		}
	}

	.next-prev-pager.first {
		text-align: right;
		padding-left: 50px;
		position: relative;
		line-height: 1.6;

		&::before {
			content: '\23';
			display: block;
			clear: both;
			position: absolute;
			left: 20px;
			top: 0;
			bottom: 0;
			height: 0;
			line-height: 0;
			margin: auto;
			font-family: 'ElegantIcons';
			font-size: 26px;
			color: rgba(136, 153, 168, 1);
		}
	}

	.next-prev-pager.second {
		padding-right: 50px;
		position: relative;

		&::before {
			display: block;
			clear: both;
			position: absolute;
			top: 0;
			bottom: 0;
			height: 0;
			line-height: 0;
			margin: auto;
			font-family: 'ElegantIcons';
			font-size: 26px;
			color: rgba(136, 153, 168, 1);
			content: '\24';
			left: unset;
			right: 20px;
		}
	}
}

// RTL
body.rtl {
	.contact_form .form-group textarea {
		padding-top: 10px;
		padding-right: 14px;
	}

	.doc_left_sidebarlist .scroll:not(.op-docs-sidebar) {
		margin-left: 27px;
	}

	.ezd-link-copied-wrap.copied {
		padding: 12px 45px 12px 47px;
	}
}

.single-docs.ezd-theme-twenty.twenty-three #page hr,
.single-docs.ezd-theme-twenty.twenty-three #header,
.single-docs.ezd-theme-twenty.twenty-three #footer {
	display: none;
}

.single-docs .wp-block-group.alignwide.is-content-justification-space-between.is-layout-flex.wp-container-3 {
	max-width: 1460px;
}

body.single-docs.ezd-theme-twenty.twenty-three .is-layout-constrained>.alignwide {
	justify-content: space-between;
}

.ezd-password-body {
	padding: 20px;

	.auth-form {
		.form-group {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

.mb-3 {
	margin-bottom: 20px;
}

.is-layout-flex {
	justify-content: space-between;
}

.wp-block-group.is-vertical.is-layout-flex.wp-block-group-is-layout-flex {
	align-items: start;
	display: grid;
	gap: 16px;
}

.ezd-doc-warning-wrap {
	padding: 65px 0px;
	display: grid;
	text-align: center;
	margin-top: 30px;

	i {
		font-size: 100px;
		color: #b9b9b9;
	}

	span {
		font-size: 20px;
		color: #b9b9b9;
		margin-top: 10px;
		font-weight: bold;
	}
}

form {
	&.ezd-password-form {
		p {
			display: none;
		}
	}
}

body.body_dark {

	.doc_left_sidebarlist .ezd-scroll:not(.op-docs-sidebar),
	.doc_rightsidebar .toc_right {
		&::-webkit-scrollbar-track {
			border-radius: 10px;
			background-color: #2c2c2c;
		}

		&::-webkit-scrollbar {
			width: 7px;
			background-color: #1e1f26;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background-color: #666666;
		}
	}
}

// Private lock - Amber/Orange
.ezd-lock-private {
	svg {
		color: #e65100;
		stroke: #e65100;
	}
}

// Role-restricted lock - Purple
.ezd-lock-role {
	svg {
		color: #7b1fa2;
		stroke: #7b1fa2;
	}
}

// Password protected lock - Blue
.ezd-lock-protected {
	svg {
		color: #1565c0;
		stroke: #1565c0;
	}
}

// Dark mode adjustments
body.body_dark {
	.ezd-lock-private svg {
		color: #ffb74d;
		stroke: #ffb74d;
	}

	.ezd-lock-role svg {
		color: #ce93d8;
		stroke: #ce93d8;
	}

	.ezd-lock-protected svg {
		color: #64b5f6;
		stroke: #64b5f6;
	}
}