/*=========== Start 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.page_breadcrumb {
			display: none;

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

	&.single-docs.ezd-theme-docly {
		.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: 10px;
		}
	}
}

.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 =========*/
.doc_documentation_area.body_fixed {
	.doc_rightsidebar,
	.doc_left_sidebarlist {
		&.one-page-docs-sidebar-wrap {
			padding-top: 70px;
		}
	}
}

.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;
	}

	&.one-page-docs-sidebar-wrap {
		&:before {
			background: transparent;
			border-right: none;
		}

		img {
			max-width: 150px;
		}
	}

	.ezd-scroll:not(.op-docs-sidebar) {
		max-height: 650px;
		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;

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

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

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

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

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

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

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

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

				i.icon_plus {
					display: none;
				}
			}
		}

		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;
		}

		.docs-progress-bar {
			position: absolute;
			background: #ebf0f1;
			bottom: 0;
			left: 0;
			top: 0;
			max-height: 60px;
		}

		.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 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: brand_color_rgba(0.1);

					&:hover {
						background: brand_color_rgba(0.2);

						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);

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

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

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

.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;
}

.shortcode_title {
	.btn {
		display: inline-block;
		padding: 0 9.5px;
		background: brand_color_rgba(0.5);
		color: #fff;
		text-transform: uppercase;
		line-height: 20px;
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 10px;
		border-radius: 3px;
		outline: none;
		box-shadow: none;
		letter-spacing: 0.5px;
		padding-top: 1px;
	}
}

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

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

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

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

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

.doc_documentation_area {
	background: #fff;
	&.onepage_doc_area {
		@media (min-width: 992px) {
			padding-top: 120px;
		}

		.doc_left_sidebarlist {
			&:after {
				display: none;
			}
		}
	}

	.doc_left_sidebarlist {
		&.one-page-docs-sidebar-wrap {
			padding-top: 0;
		}
	}
}

.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: brand_color_rgba(0.9);
		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: 60px;
	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 {
		margin-bottom: 20px;
		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 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: 800px;
		overflow-y: auto;
		width: calc(100% + 35px);
		padding-right: 10px;
	}
}

.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;
		}
	}

	h6 {
		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 {
	ul {
		padding: 0;
		margin: 0;

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

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

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

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

		&.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;
		margin-bottom: 10px;
		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) {
	.left-column {
		.doc_left_sidebarlist,
		.single-docs .doc_rightsidebar {
			margin-top: 15px;
		}
	}
	.doc-middle-content {
		margin-top: 50px;
	}
}

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

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

	.nav-link {
		&::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 {
	color: var(--p_color);
	font-size: 18px;
	text-decoration: none;
	z-index: 0;
}

/* 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: 70px;
	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: brand_color_rgba(0.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 brand_color_rgba(0.3);
		background: brand_color_rgba(0.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;
		}

		.navbar-nav {
			padding: 0;
			margin: 0;

			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;
			}
		}
	}
}

.d-items {
	display: grid;
	padding-top: 25px;
	grid-template-columns: auto auto;
	gap: 30px 20px;

	@media (max-width: 768px) {
		grid-template-columns: auto;
	}

	.documentation_item {
		display: flex;

		.icon {
			border-radius: 50%;
			background-color: var(--bs-white);
			box-shadow: 0 10px 30px 0 rgba(76, 76, 241, 0.12);
			text-align: center;
			margin-right: 22px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: content-box;
			line-height: 1.4;
			width: 70px;
			height: 70px;

			img {
				max-width: 35px !important;
				height: auto !important;
			}
		}

		.media-body {
			flex: 1;

			.title {
				font-weight: 500;
				margin: 0 0 8px;
				transition: color 0.2s linear;
				display: block;
				color: var(--black_900);
				text-decoration: none;
				font-size: 18px;
				line-height: 1.5;

				&:hover {
					text-decoration: underline;
					text-decoration-color: var(--ezd_brand_color);
					text-decoration-thickness: 2px;
					text-underline-offset: 3px;
					color: var(--ezd_brand_color);
				}
			}

			p {
				margin-bottom: 0 !important;
				font-size: 16px;
			}
		}
	}
}

.single-docs #post .d-items .documentation_item .icon img {
  max-width: 35px !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.sep::before {
	content: "•";
	margin: 0 5px;
}

.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;
	}
}

.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%;
		}
	}
}

.one-page-docs-tag-list {
	li {
		a {
			&:before {
				content: none !important;
			}
		}
	}
}

.onepage_doc_area {
	.documentation_body {
		footer {
			.border_bottom {
				margin-top: 100px;
			}
		}
	}

	.middle-content {
		padding: 0 25px 0 40px;
	}

	@media (min-width: 1441px) {
		.doc_left_sidebarlist {
			padding-right: 40px;
		}
		.middle-content {
			padding-left: 0;
		}
	}
}

// Eazydocs password protected form
.single-docs #post {
	.doc-scrollable.editor-content {
		.ezd-password-wrap {
			p.ezd-password-title {
				color: #fff;
				font-weight: 500;
				margin-bottom: 5px;
			}

			p.ezd-password-subtitle {
				color: #a4abc5;
				line-height: 1.6;
			}
		}
	}
}

.ezd-password-wrap {
	border: 1px solid #0c213a;
	border-radius: 5px;
	padding-bottom: 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;
		}

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

	.ezd-password-body {
		form {
			margin-bottom: 0;
			padding-bottom: 0;

			label {
				margin-bottom: 0.5rem;
				color: #656d9a;
				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;
				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: brand_color_rgba(0.8);
				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%;
	}
}

.nav-sidebar {
	&.default-layout-onepage-sidebar {
		.nav-item {
			.dropdown_nav {
				.nav-item {
					.dropdown_nav {
						&.doc-last-depth {
							display: block !important;
							padding-left: 4px !important;

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

							.nav-item::before {
								left: 0 !important;
							}
						}
					}
				}
			}
		}
	}
}

/** === 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) {
							> i {
								color: rgb(29, 161, 242);
							}
						}
					}
				}

				> 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;
		}
	}
}