/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Main FrontEnd
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_iframe_wrap {
	width: 100% !important;
}

#wpcontent,
#wpfooter {
	margin-inline-start: 0px !important;
}

#wpcontent {
	margin: 0px !important;
	padding: 0px !important;
}

body {


	background: #ffffff;
	font-size: 13px;
	line-height: 1.4em;

}

body * {
	box-sizing: border-box
}

body,
html {
	height: 100%;
	margin: 0;
	padding: 0;
}

.vb_frontend {
	position: fixed;
	float: inline-start;
	width: 100%;
	height: calc(100% - var(--vb-admin-bar, 0px));
	z-index: 13;
	display: grid;
	grid-template-columns: 100%;
	--vb-admin-bar: 0px;
	top: var(--vb-admin-bar, 0px);
	--vb-options-width: 500px;
 
}
 .vb_frontend  .vb_builder{
	background:rgb(10, 20, 30) !important;
 }

.vb_frontend .vb_builder_heading {
	position: relative;
	box-shadow: 0 0 20px rgba(0, 20, 40, 0.5);
	z-index: 99;
	min-height: 55px;
	height: auto;
	z-index: 100001;
	padding: 0px;
}

.vb_iframe {
	width: 100%;
	height: 800px !important;
	overflow: scroll;
}

body.vb_frontend_full_load.vb_frontend_active::before,
body.vb_frontend_full_load.vb_frontend_active::after {
	content: none !important;

}

body::before,
body::after {
	content: none !important;
	opacity: 0;
	animation: vb_opacity 300ms;
}

.vb_frontend .vb_builder {
	height: 100% !important;
	display: flex;
	flex-direction: column;
}

.vb_frontend .vb_builder_wrap {
	flex-direction: row-reverse;
	flex-grow: 1;
	height: 0px;
	position: relative;
	display: flex;
}

.vb_preview_wrap,
.vb_builder_content_wrap {
	margin: 00px;
	margin-inline-start: 0px;
	background: #ffffff;
	z-index: 111;
	position: absolute;
	bottom: 0px;
	overflow: visible;
	width: 100% !important;
	height: 100% !important;
	display: none;
	inset-inline-start: 0px;
	margin-top: 0px !important;
	transition: margin 300ms, width 300ms !important;
}

.vb_backend_active .vb_builder_content_wrap {
	overflow: auto !important;
	display: inline-block;
}

.vb_backend_active .vb_preview_wrap {
	display: none !important;
}

.vb_preview_wrap {
	display: flex;
	background: rgb(10, 20, 30);
	align-content: center;
	align-items: center;
	justify-content: center;
} 
 
.vb_preview_resizable {
	position: relative;
	width: 100%  !important;
	height: 100%;
	inset-inline-start: 0px !important;
	display: flex; 
	inset-inline-end: 0px !important;
	top: 0px !important;
	scrollbar-color: #cdcdcd #f0f0f0;

}
.vb_builder:not(.vb_responsive_mobile,.vb_responsive_tablet) .vb_preview_resizable{
	overflow:auto;
}

.vb_preview_resizable.ui-resizable-resizing .vb_preview_content{
  pointer-events: none!important;
}

body::-webkit-scrollbar {
	width: 1em;
	background-color: #f0f0f0;
}

body::-webkit-scrollbar-track {
	background-color: #f0f0f0;

	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
	background-color: darkgrey;
	outline: 1px solid slategrey;
}


.vb_responsive_mobile .vb_preview_resizable {
	max-width: 750px !important;
	padding: 20px 0px;
	width: var(--vb-preview-mobile, 499px) !important;
	min-width: 319px !important;
}

.vb_header.vb_responsive_mobile .vb_preview_resizable {
	max-width: 1024px !important;
	padding: 20px 0px;
	width: var(--vb-preview-mobile, 1024px) !important;
	min-width: 319px !important;
}

.vb_responsive_tablet .vb_preview_resizable {
	max-width: 1024px !important;
	padding: 20px 0;
	width: var(--vb-preview-tablet, 800px) !important;
	min-width: 751px !important;
}

.vb_responsive_tablet .vb_preview {
	min-width: 751px !important;

}

.vb_responsive_mobile .vb_preview {
	min-width: 320px !important;
}

 
.vb_preview_content{
	width:100%;
	height:100%;
	position:absolute;
	inset-inline-start:0px;
	overflow-x:auto;
	overflow-y:hidden;
 	top:0px;	
}
.vb_responsive_tablet .vb_preview_content,
.vb_responsive_mobile .vb_preview_content{
	height:calc(100% - 20px) !important;
	margin:10px 0 !important;
}
.vb_preview {
	height: 100%;
	min-width: 1042px;
	width: 100%;
	border-radius: 5px !important;
	position: relative !important;
}

.vb_preview_wrap .ui-resizable-handle {
	position: absolute;
	width: 10px !important;
	height: 100% !important;
	pointer-events: all;
	z-index: 9999 !important;
	display: flex;
	align-content: center;
	align-items: center;
}
.vb_preview_wrap .ui-resizable-resizing .vb_preview_content,
.vb_preview_wrap .ui-resizable-resizing .vb_preview{
	  pointer-events: none!important; 
 }
.vb_preview_wrap .ui-resizable-w {
	inset-inline-end: -20px !important;
	cursor: w-resize;
	  inset-inline-start: auto;
	  inset-inline-end: auto;
}

.vb_preview_wrap .ui-resizable-e {
	inset-inline-start: -20px !important;
	cursor: e-resize;
	  inset-inline-end: auto;
}

.vb_preview_wrap .ui-resizable-handle:hover::before {
	height: 100px;
	background-color: rgba(255, 255, 255, 0.5);
}

.vb_preview_wrap .ui-resizable-handle::before {
	content: "";
	display: block;
	background-color: rgba(255, 255, 255, 0.2);
	width: 10px;
	height: 50px;
	border-radius: 3px;
	transition: all .2s ease-in-out;
}

/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Main FrontEnd Options
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.vb_frontend_side_hide_active {
	--vb-side-hide-size: 0px;
}

 
.vb_frontend .vb_options_side.vb_options {
	min-width: 300px !important;
	max-height: min(100%, 1000px) !important;

	width: var(--vb-options-width, 300px) !important;
	background: none !important;
	z-index: 333;
	animation: none !important;
	position: absolute;
	opacity: 1 !important;
	height: 100% !important;
	margin-top: 00px !important;
	box-shadow: 0 5px 10px rgba(0, 10, 20, 0.4);
	transform: translateX(calc(-100% - var(--vb-side-hide-size, 30px))) !important;
	transition: transform 0ms !important;
}
.rtl .vb_frontend .vb_options_side.vb_options{
	transform: translateX(calc(100% + var(--vb-side-hide-size, 30px))) !important;
}
.vb_frontend .vb_options_side.vb_options .vb_options_scroll {
	padding: 0px !important;
	height: 0px;
	flex-grow: 1;

}

.vb_frontend .vb_options_side.vb_options .vb_options_middle {
	margin: 0px !important;
	border-radius: 0px !important;
	min-height: 100%;
	max-height: 100% !important;
	width: 100% !important;
	opacity: 1 !important;
	transition: none !important;
	transform: translateX(0) !important;
}


.vb_frontend.vb_frontend_side .vb_options_side {
	transform: translateX(-100%) !important;
	transition: transform 300ms !important;
}
.rtl .vb_frontend.vb_frontend_side .vb_options_side{
		transform: translateX(100%) !important;
}
.vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_options_side {
	transform: translateX(0) !important;
	transition: transform 300ms !important;
}
 

 

.vb_frontend.vb_frontend_side .vb_preview_wrap,
.vb_frontend.vb_frontend_side .vb_builder_content_wrap {
	width: 100% !important;
	transition: width 000ms !important;
}


.vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_preview_wrap,
.vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_builder_content_wrap {
	width: calc(100% - var(--vb-options-width, 0px)) !important;
	transition: width 00ms ease 200ms !important;
}
.vb_has_resizable .vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_preview_wrap,
.vb_has_resizable .vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_builder_content_wrap {
	width: calc(100% - var(--vb-options-start-width, 0px)) !important;
	transition: width 00ms !important;
}
 
.vb_options_side  .vb_frontend_options_hide {
	width: 30px;
	height: 80px;
	background: var(--vb-input-color);
	inset-inline-end: -30px;
	position: absolute;
	top: calc(50% - 30px);
	box-shadow: 0 5px 10px rgba(0, 10, 20, 0.4),1px 0px 0 0 var(--vb-border-color) inset;
	z-index: -1;
	border-radius: 0 5px 5px 0px;
	cursor: pointer;
}

.rtl .vb_options_side  .vb_frontend_options_hide{
 border-radius: 5px 0px 0px 5px;
}
.vb_options_side  .vb_frontend_options_hide::before {
	content: "\F052";
	font-family: 'visualbuilder';
	width: 100%;
	text-align: center;
	height: 80px;
	line-height: 80px;
	float: inline-end;
	font-size: 15px;
}
 
.vb_frontend_side_hide_active .vb_frontend_options_hide::before {
	content: "\F053";
}

.rtl .vb_options_side  .vb_frontend_options_hide::before {
	content: "\F053";
 
}
 
.rtl .vb_frontend_side_hide_active .vb_frontend_options_hide::before {
	content: "\F052";
}

/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Below FrontEnd Options
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_frontend .vb_options_below.vb_options.vb_module .vb_options_scroll {
	padding: 15px !important;
}

.vb_frontend_below_hide_active {
	--vb-below-hide-size: 0px;
}

.vb_frontend_below_hide_active .vb_frontend_below_hide::before {
	content: "\f053" !important;
}

.vb_frontend .vb_options_below.vb_options {
	min-height: 200px !important;

	max-height: min(100%, 600px) !important;
	height: var(--vb-options-height, 200px) !important;
	background: none !important;
	z-index: 333;
	animation: none !important;
	position: absolute;
	opacity: 1 !important;
	width: 100% !important;
	margin-inline-start: 00px !important;
	bottom: 0px;
	top: auto !important;
	box-shadow: 0 00px   5px 10px rgba(0, 10, 20, 0.4);
	transform: translateY(calc(100% - var(--vb-below-hide-size, 30px))) !important;
	transition: transform 0ms !important;
}

.vb_frontend .vb_options_below.vb_options .vb_options_scroll {
	padding: 0px !important;
	height: 0px;
	flex-grow: 1;

}

.vb_frontend .vb_options_below.vb_options .vb_options_middle {
	margin: 0px !important;
	border-radius: 0px !important;
	min-height: 100%;
	max-height: 100% !important;
	width: 100% !important;
	opacity: 1 !important;
	transition: none !important;
	transform: translateY(0) !important;
}


.vb_frontend.vb_frontend_below .vb_options_below {
	transform: translateY(100%) !important;
	transition: transform 300ms !important;
}

.vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_options_below {
	transform: translateY(0) !important;
	transition: transform 300ms !important;
}

.vb_frontend.vb_frontend_below .vb_preview_wrap,
.vb_frontend.vb_frontend_below .vb_builder_content_wrap {
	height: 100% !important;
	transition: height 000ms !important;
	top: 0;
}

.vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_preview_wrap,
.vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_builder_content_wrap {
	height: calc(100% - var(--vb-options-height, 0px)) !important;
	transition: height 00ms !important;
}

.vb_has_resizable .vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_preview_wrap,
.vb_has_resizable .vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_builder_content_wrap {
	height: calc(100% - var(--vb-options-start-height, 0px)) !important;
	transition: height 00ms !important;
}
 
 

.vb_options_below  .vb_frontend_options_hide {
	width: 80px;
	height: 30px;
	background: var(--vb-input-color);
	top: -30px;
	position: absolute;
	inset-inline-start: calc(50% - 40px);
	box-shadow: 0 00px  5px 10px rgba(0, 10, 20, 0.4);
	z-index: -1;
	border-radius: 5px 5px 0px 0px;
	cursor: pointer;
}

.vb_options_below  .vb_frontend_options_hide::before {
	content: "\F053";
	font-family: 'visualbuilder';
	height: 100%;
	text-align: center;
	width: 80px;
	line-height: 30px;
	float: inline-end;
	font-size: 15px;
	transform: rotate(90deg) !important;
}

 
.vb_frontend_below_hide_active .vb_frontend_options_hide::before {
	content: "\F052";
}

/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Side Title Box
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.vb_frontend .vb_options_side.vb_options .vb_options_title {
	--vb-title-ht: 40px;
}

.vb_frontend .vb_options_side .vb_options_title h3 {
	font-size: 18px;
}

.vb_frontend .vb_options_side .vb_title_tabs {
	height: auto;
	padding: 00px;
	margin-top: 0px;
}


/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Below Title Box
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_frontend .vb_options_below .vb_options_title {
	--vb-title-ht: 40px;
}

.vb_frontend .vb_options_below .vb_options_title h3 {
	font-size: 18px;
}

.vb_frontend .vb_options_below .vb_title_tabs {
	width: auto !important;
	margin: 0px;
}

.vb_frontend .vb_options_below .vb_title_tabs a {
	font-size: 13px;
	border-radius: 0px;
}

.vb_frontend .vb_options_below .vb_title_search {
	width: auto !important;
	float: inline-end !important;
	margin: 5px 20px !important;

}

.vb_frontend .vb_options_below .vb_title_search>input {
	height: 30px !important;
	line-height: 30px !important;
}
.vb_has_resizable .vb_preview{
	pointer-events: none !important;
}
.vb_has_resizable .vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_preview_wrap,
.vb_has_resizable .vb_frontend.vb_frontend_side.vb_frontend_side_active .vb_builder_content_wrap,
.vb_has_resizable .vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_preview_wrap,
.vb_has_resizable .vb_frontend.vb_frontend_below.vb_frontend_below_active .vb_builder_content_wrap {
	transition: 00ms !important;
	pointer-events: none;
}

.vb_frontend .vb_preview_wrap,
.vb_frontend .vb_builder_content_wrap {
	width: 100% !important;
	inset-inline-end: 0px !important;
	transition: none !important;
	flex-wrap: 1 !important;
	inset-inline-start: auto;
	height: 100% !important;
}

body.vb_has_resizable .vb_frontend .vb_preview_wrap,
body.vb_has_resizable .vb_frontend .vb_options_side,
body.vb_has_resizable .vb_frontend .vb_options_below,
body.vb_has_resizable .vb_frontend .vb_builder_content_wrap {
	transition: none !important;
}

.vb_options_side .ui-resizable-handle.ui-resizable-e,
.vb_options_side .ui-resizable-handle.ui-resizable-w {
	height: 100%;
	width: 10px;
	z-index: 9999999999999 !important;
	pointer-events: all !important;
	position: absolute !important;
	inset-inline-end: 0;
	top: 0;
	cursor: ew-resize;
	  inset-inline-start: auto;
}


/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Side Options Box
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_options_side.vb_options .vb_control {
	padding: var(--vb-between-padding) 15px;
}

.vb_frontend .vb_options_side.vb_options .vb_control[control-type="heading"],
.vb_frontend .vb_options_side.vb_options .vb_control[control-type="start"],
.vb_frontend .vb_options_side.vb_options .vb_control[control-type="multi_control"] {
	padding: 0px;
}


/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 	Below Options Box
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_options_below .ui-resizable-handle.ui-resizable-n {
	width: 100%;
	height: 10px;
	z-index: 9999999999999 !important;
	pointer-events: all !important;
	position: absolute !important;
	inset-inline-end: 0;
	top: 0;
	cursor: n-resize;
}


.vb_options_below.vb_options .vb_control {
	padding: var(--vb-between-padding, 15px) 15px;
}