.vb-side {
	--side-wt: var(--vb-sub-box-wt,350px);
	--side-sp: 0px;
	--side-pd: var(--vb-sub-box-pd,8px 00px);
	--side-bg: var(--vb-sub-box-bg,var(--vb-global-box-bg));
	--side-br-wt: var(--vb-sub-box-br-wt,0px);
	--side-br-st: var(--vb-sub-box-br-st,solid);
	--side-br-cr: var(--vb-sub-box-br-cr,rgba(138,148,158,0.15));
	--side-sd: var(--vb-sub-box-st,0px 0px 15px 0px rgba(0,0,0,0.50));
	--side-rd: var(--vb-sub-box-rd,var(--vb-global-rd));
	--side-in-st: 0px;
	--side-in-en: 0px;
	--side-op: 1;
	position: fixed;
	width: 100%;
	height: 100%;
	inset-inline-start: 0px;
	top: 0px;
	overflow: hidden;
 	transition: all 0.0s;
	transition-delay: 300ms;
	z-index: 999999999;
	display: flex;
	transition: background 300ms;
}

.vb-side.vb-side-active {
	background: rgba(0, 5, 10, 0.7);
	inset-inline-start: 00%;
	transition-delay: 0ms;
}

.vb-side-wrapper {
	display: flex;
	flex-direction: row-reverse;
}

.vb-side.vb-side-active > .vb-side-middle {
	transform: translateX(0%);
}

.vb-side > .vb-side-middle {
	transform: translateX(-100%);
	width: min(var(--side-wt),100vw);
	height: 100%;
	position: relative;
	padding: 00px;
	z-index: 0;
	margin-top: 0px;
	inset-inline-start: 0;
	transition: transform 300ms;
	padding: 0px !important;
	background: var(--side-bg) !important;
	border-width: var(--side-br-wt)!important;
	border-color: var(--side-br-cr)!important;
	border-style: var(--side-br-st)!important;
	box-shadow: var(--side-sd)!important;
	display: flex;
	flex-direction: column;
}
.rtl .vb-side > .vb-side-middle {
		transform: translateX(100%);
}

.vb-side.vb-side-active .vb-side-close,
 .vb-side.vb-side-active .vb-side-wrap {
	transition: all 0.3s;
}

.vb-side-wrap {
	width: 100% !important;
	float: inline-start;
	padding: var(--side-pd) !important;
}

.vb-side .vb-side-wrap > .vb-drop {
	width: 100% !important;
	position: relative !important;
	transform: none !important;
	opacity: 1 !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0px  !important;
	margin: 0px !important;
	float: inline-start;
}

.vb-side .vb-side-wrap .vb-drop.vb-menu {
	--menu-item-pd-bl-st: var(--vb-sub-item-pd-bl-st,12px)  !important;
	--menu-item-pd-bl-en: var(--vb-sub-item-pd-bl-en,12px)  !important;
	--menu-item-pd-in-st: var(--vb-sub-item-pd-in-st,20px)  !important;
	--menu-item-pd-in-en: var(--vb-sub-item-pd-in-en,20px)  !important;
	--menu-gap: var(--vb-sub-gap,00px)  !important;
	--menu-bw-br-cr: var(--vb-sub-bw-br-cr,rgba(138,148,158,0.15))!important;
	--menu-bw-br-st: var(--vb-sub-bw-br-st,solid)!important;
	--menu-bw-br-wt: var(--vb-sub-bw-br-wt,1px)!important;
	--menu-bw-gap: 1;
}

.vb-side .vb-side-heading {
	--txt-sp: 0px;
	--txt-pd: var(--vb-sub-head-pd,20px);
	--txt-ht: var(--vb-sub-head-ht,60px);
	--txt-wt: 100%;
	--txt-cr: var(--vb-sub-head-cr,var(--vb-global-primary-cr));
	--txt-bg-img: initial;
	--txt-bg-clip: initial;
	--txt-txt-fl: initial;
	--txt-txt-st: none;
	--txt-txt-sd: none;
	--txt-fn-fm: var(--vb-sub-head-fn-fm,inherit);
	--txt-fn-sz: var(--vb-sub-head-fn-sz,16px);
	--txt-fn-wt: var(--vb-sub-head-fn-wt,500);
	--txt-li-ht: var(--vb-sub-head-li-ht,1.1em);
	--txt-txt-dec: var(--vb-sub-head-txt-dec,none);
	--txt-txt-tf: var(--vb-sub-head-txt-tf,none);
	--txt-lt-sp: var(--vb-sub-head-lt-sp,none);
	--txt-wd-sp: var(--vb-sub-head-wd-sp,none);
	--txt-fn-st: var(--vb-sub-head-fn-st,none);
	--txt-icn-cr: var(--vb-sub-head-icn-cr,var(--txt-cr));
	--txt-icn-sz: var(--vb-sub-head-icn-sz,1.25em);
	--txt-icn-sp: 7px;
	--txt-close-sz: var(--vb-sub-head-close-sz,1.25em);
	--txt-close-cr: var(--vb-sub-head-close-cr,var(--txt-cr));
	--txt-box: '';
	--txt-bg: var(--vb-sub-head-bg,var(--vb-global-primary-bg));
	--txt-br-wt: transparent;
	--txt-br-cr: none;
	--txt-br-st: none;
	--txt-sd: none;
	--txt-rd: 0px;
	padding-inline-start: var(--txt-pd) !important;
	padding-inline-end: 0px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	display:inline-flex !important;
}

.vb-side .vb-side-heading span {
	flex-grow: 1;
	width: 0px;
}

.vb-side  .vb-side-close {
	align-items: center!important;
	justify-content: center!important;
	cursor: pointer !important;
	display: flex!important;
	align-self: end!important;
	height: var(--txt-ht)!important;
	width: var(--txt-ht)!important;
	font-size: var(--txt-close-sz)!important;
	color: var(--txt-close-cr)!important;
}

.vb-side  .vb-side-close::before {
	width: 1.25em!important;
	height: 1.25em!important;
	line-height: 1.25em!important;
}

.vb-side  .vb-side-close:hover {
	opacity: 0.6 !important;
}

.vb-side .vb-side-wrap > .vb-drop {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0px !important;
	padding: 0px !important;
}

.vb-side .vb-side-wrap > .vb-drop::before {
	content: none!important;
}

body .vb-side .vb-drop.vb-menu:is(.vb-flex-center) {
	--menu-item-pd-bl-st: var(--vb-sub-item-pd-bl-st,8px) !important;
	--menu-item-pd-bl-en: var(--vb-sub-item-pd-bl-en,8px) !important;
	--menu-item-pd-in-st: var(--vb-sub-item-pd-in-st,20px) !important;
	--menu-item-pd-in-en: var(--vb-sub-item-pd-in-en,20px) !important;
}

@media (min-width: 1024px) {

	.vb-side .vb-side-wrap > .vb-drop.vb-menu > li > .vb-drop,
	.vb-side .vb-side-wrap > .vb-drop.vb-menu > li > .vb-drop:before {
		border-top-left-radius: 0px!important;
		border-bottom-left-radius: 0px!important;
	}
}

@media (max-width: 1024px) {
	.vb-side {
		--vb-menu-box-wt: 450px;
		--vb-menu-box-pd: 10px 00px;
		--vb-menu-box-sd: 0px 0px 0px 0px;
	}

	.vb-side .vb-side-wrap {
		float: inline-start;
		overflow-y: auto;
		flex-grow: 1;
		max-height: 100%;
	}
}