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

																	 	Control
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@keyframes vb_rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.vb_options {
	--vb-name-width: 220px;
	--vb-name-font-size: 13px;
	--vb-input-height: 30px;
	--vb-input-font-size: 12px;
	--vb-between-padding: 17px;
}
.rtl .vb_options {
 	--vb-name-font-size: 14px;
 	--vb-input-font-size: 13px;
 }

.vb_options_side.vb_options .vb_options_content>*,
.vb_options_side.vb_options .vb_popover_content>*,
.vb_options_side.vb_options .vb_control_url_content>*,
.vb_options_side.vb_options .vb_tab_content>*,
.vb_options_side.vb_options .vb_list_content>*,
.vb_options_below.vb_options>*,
.vb_options_below.vb_options .vb_popover_content>*,
.vb_options_below.vb_options .vb_control_url_content>* .vb_options_below.vb_options .vb_tab_content>*,
.vb_options_below.vb_options .vb_list_content>* {
	--vb-name-width: 220px;
	--vb-name-font-size: 12px;
	--vb-input-height: 27px;
	--vb-input-font-size: 11px;
	--vb-between-padding: 12px;
}

.rtl .vb_options_side.vb_options .vb_options_content>*,
.rtl .vb_options_side.vb_options .vb_popover_content>*,
.rtl .vb_options_side.vb_options .vb_control_url_content>*,
.rtl .vb_options_side.vb_options .vb_tab_content>*,
.rtl .vb_options_side.vb_options .vb_list_content>*,
.rtl .vb_options_below.vb_options>*,
.rtl .vb_options_below.vb_options .vb_popover_content>*,
.rtl .vb_options_below.vb_options .vb_control_url_content>* .vb_options_below.vb_options .vb_tab_content>*,
.rtl .vb_options_below.vb_options .vb_list_content>* {
 	--vb-name-font-size: 13px;
 	--vb-input-font-size: 12px;
 }

@container vb_options_width (width <=900px) {

	.vb_options_content>*,
	.vb_popover_content>*,
	.vb_control_url_content>*,
	.vb_tab_content>*,
	.vb_list_content>* {
		--vb-name-width: 200px !important;
		--vb-name-font-size: 12px !important;
		--vb-input-height: 27px !important;
		--vb-input-font-size: 11px !important;
		--vb-between-padding: 12px !important;

	}
	
	.rtl .vb_options_content>*,
	.rtl .vb_popover_content>*,
	.rtl .vb_control_url_content>*,
	.rtl .vb_tab_content>*,
	.rtl .vb_list_content>* {
 		--vb-name-font-size: 13px !important;
 		--vb-input-font-size: 12px !important;
 
	}
}

@container vb_options_width (width <=500px) {

	.vb_options_content>*,
	.vb_popover_content>*,
	.vb_control_url_content>*,
	.vb_tab_content>*,
	.vb_list_content>* {
		--vb-name-width: 160px !important;

	}
}

@container vb_options_width (width <=400px) {

	.vb_options_content>*,
	.vb_popover_content>*,
	.vb_control_url_content>*,
	.vb_tab_content>*,
	.vb_list_content>* {
		--vb-name-width: auto !important;

	}

}


body .vb_options .vb_control[data-active="hide"] {
	display: none !important;
}

.vb_control {
	float: inline-start;
	width: 100%;
	padding: var(--vb-between-padding, 20px) 0px;
	position: relative;
	margin: 0;
	--vb-display: flex;
	display: var(--vb-display, flex);
	border-bottom: none;
	flex-wrap: wrap;
	--vb-setting-content: end;
	--vb-setting-gap: 10px;
	--vb-name-max-width: 100%;
}

.vb_control label {
	float: inline-start;
	margin-inline-end: 5px;
	line-height: var(--vb-input-height);
	color: var(--vb-link-color);
	font-size: var(--vb-input-font-size);
}

.vb_control span {
	line-height: var(--vb-input-height);
	color: var(--vb-text-color);
}

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

																	 	Control Name
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_name {
	width: var(--vb-name-width, 30%);
	font-size: var(--vb-name-font-size, 14px);
	font-weight: 700;
	color: var(--vb-name-color);
	float:inline-start;
	padding-inline-end: 8px;
}
.vb_control_name_bold .vb_control_name>label {
	font-weight:700 !important;
	font-size:1.05em !important;
	color: var(--vb-link-color)!important;
	
}
.vb_control_name>label {
	font-size: inherit !important;
	float: inline-start;
	width: auto;
	text-align:start;
	line-height: 20px;
	font-weight: 400;
	color: inherit !important;
}

.vb_control_description {
	font-size: 11px;
	float: inline-start;
	font-weight: 400;
	margin-top: 5px;
	line-height: 1.5em !important;
	color: var(--vb-text-color) !important;
}


.vb_control_hide_name>.vb_control_name {
	display: none !important
}

.vb_control_full_width>.vb_control_name,
.vb_options_side .vb_control_side_full_width>.vb_control_name {
	padding: 0px !important;
	width: 100% !important;
	padding-bottom: 10px !important;
}

.vb_options .vb_control:has(> .vb_control_setting > .vb_control_content)>.vb_control_name {
	width: var(--vb-name-width) !important;
}

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

																	 	Control Setting
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_control_setting .vb-input {
	height: 30px;
	padding: 0 2px;
	float: inline-end;
	margin: 0 2px;
	width: 100%;
}

.vb_control_setting {
	text-align: inherit !important;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow: 1;

	width: 0px;
	gap: 10px
}

.vb_control_setting:has(> .vb_control) {
	gap: 00px
}

.vb_control_hide_name>.vb_control_setting,
.vb_control_full_width>.vb_control_setting,
.vb_options_side .vb_control_side_full_width>.vb_control_setting {
	width: 100% !important;
}

.vb_control_full_width.vb_control>.vb_control_setting,
.vb_options_side .vb_control_side_full_width.vb_control>.vb_control_setting {
	display: contents !important;

}

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

																	 	Control Content
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_content {
	display: none !important;
}

.vb_control_content:has(img, input, .vb_loading, .vb_has_icon, .vb_control) {
	display: contents !important;
}

.vb_control_full_width.vb_control>.vb_control_setting>.vb_control_content:has(img, input, .vb_loading, .vb_has_icon, .vb_control),
.vb_options_side .vb_control_side_full_width.vb_control>.vb_control_setting>.vb_control_content:has(img, input, .vb_loading, .vb_has_icon, .vb_control) {
	display: flex !important;
	margin-top: 10px !important;
	justify-content: var(--vb-setting-content, end) !important;
	gap: var(--vb-setting-gap, 10px) !important;
	width: 100% !important;
	flex-wrap: wrap;
}

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

																	 	Control description
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_control input[type="text"],
.vb_control input[type="number"],
.vb_control select {
	max-width: 100%;
}

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

																	 	Control 400
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@container vb_options_width (width <=400px) {
	.vb_control {
		justify-content: space-between;
	}

	.vb_control>.vb_control_name {
		width: auto !important;
		max-width: var(--vb-name-max-width, 130px) !important;
	}

	.vb_control_full_width.vb_control>.vb_control_name,
	.vb_options_side .vb_control_side_full_width>.vb_control_name {
		max-width: var(--vb-name-max-width, 100%) !important;
	}

	.vb_control_full_width.vb_control:has(> .vb_control_setting > .vb_control_content)>.vb_control_name,
	.vb_options_side .vb_control_side_full_width(> .vb_control_setting > .vb_control_content)>.vb_control_name {
		max-width: var(--vb-name-max-width, 130px) !important;
	}

	.vb_control_setting {
		justify-content: end;
	}

	.vb_control_setting:has(> .vb_control_content) {
		display: contents !important;
	}

	.vb_control_setting>.vb_control_content:has(img, input, .vb_loading, .vb_has_icon, .vb_control),
	.vb_control_setting>.vb_control_content:has(img, input, .vb_loading, .vb_has_icon, .vb_control) {
		display: flex !important;
		margin-top: 10px !important;
		justify-content: var(--vb-setting-content, end) !important;
		gap: var(--vb-setting-gap, 10px) !important;
		width: 100% !important;
	}

	.vb_control_add {
		float: inline-end;
	}

	.vb_gradient_wrap,
	.vb_multi_control {
		justify-content: end;
	}
}

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

																	 	Control Button
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_btn {
	height: var(--vb-input-height) !important;
	line-height: var(--vb-input-height) !important;
	width: var(--vb-input-height) !important;
	background: var(--vb-input-color) !important;
	box-shadow: 0 0 0 1px var(--vb-border-color) inset !important;
	float: inline-start;
	color: var(--vb-text-color) !important;
	border-radius: 5px;
	margin-inline-end: 0px;
	cursor: pointer;
	text-align: center;
}

.vb_control_add {
	width: auto;
	height: 26px;
	line-height: 26px;
	font-size: 11px;
	border-radius: 5px;
	background: var(--vb-button-color);
	float: inline-start;
	position: relative;
	overflow: hidden;
	color: var(--vb-main-color);
	cursor: pointer;
	font-weight: 400 !important;
	margin-inline-end: 0px;
	margin-bottom: 00px;
	padding: 0 10px;
	box-shadow: 0 0 0 1px var(--vb-main-color);
}

.vb_control_btn:hover,
.vb_control_add:hover {
	background: var(--vb-background-hover-color) !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 1px var(--vb-background-hover-color);
}

.vb_control_add::before {
	vertical-align: top;
	font-style: normal;
	font-size: 1em;
	content: "\F023";
	width: auto !important;
	text-align: center;
	font-family: 'visualbuilder';
	position: relative;
	line-height: inherit;
	margin-inline-end: 5px;
	display: inline-block;
}

.vb_control_remove {
	width: var(--vb-input-height);
	height: var(--vb-input-height);
	line-height: var(--vb-input-height);
	font-size: calc(var(--vb-input-height) / 2);
	position: absolute;
	overflow: hidden;
	color: rgb(255, 0, 0) !important;
	inset-inline-end: 0px;
	top: 0px;
	cursor: pointer;
	z-index: 9;
	text-align: center;
}

.vb_control_remove::before {
	width: var(--vb-input-height);
	height: var(--vb-input-height);
	content: "\F005";
	font-family: 'visualbuilder';
	line-height: var(--vb-input-height);
	font-size: inherit !important;
	position: absolute;
	color: inherit;
	inset-inline-end: 0px;
	top: 0px;
	z-index: 9;
}

.vb_control_remove:hover {
	opacity: 0.5;
}

.vb_control_full_width[control-type="text"],
.vb_control_full_width[control-type="select"],
.vb_control_full_width[control-type="textarea"],
.vb_options_side .vb_control_side_full_width[control-type="text"],
.vb_options_side .vb_control_side_full_width[control-type="select"],
.vb_options_side .vb_control_side_full_width[control-type="textarea"] {
	--vb-input-width: 100%;

}


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

																	 	Control Child
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_multi_control>.vb_control {
	float: inline-start;
	margin-inline-end: 0px;
	margin-bottom: 0px;
	margin-bottom: 00px;
	display: var(--vb-display, flex);
	width: auto !important;
	padding: 0px !important;
	border-bottom: none !important;
}

.vb_multi_control>.vb_control>label {
	font-size: 11px;
	opacity: .5;
}


.vb_options_side .vb_control_side_full_width.vb_control_flex .vb_multi_control {
	display: flex !important;
	width: 100% !important;
}

.vb_options_side .vb_control_flex .vb_multi_control .vb_control:not(.vb_control_none_flex  ) {
	width: 0% !important;
	--vb-input-width: 100% !important;
	flex-grow: 1;
}

.vb_options_side .vb_control_flex .vb_multi_control:has(.vb_size_picker_input,.vb_color_picker_input)  .vb_control:not(.vb_control_none_flex){
	width:auto !important;
 	--vb-input-width: 80px !important;
	flex-grow: 0;
}
 

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

																	 	Control Color
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control .rang-field {
	width: var(--vb-input-height, 35px);
	height: var(--vb-input-height, 35px);
	border-radius: 5px;
	box-shadow: 0px 0px 0px 1px var(--vb-border-color);
}

.vb_control .rang-field button {
	width: var(--vb-input-height, 35px);
}

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

																	 	 Control Number
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_control:is([control-type=number], [control-type=size]) .vb_control_setting span,
.vb_control:is([control-type=number], [control-type=size])>span {
	line-height: var(--vb-input-height);
	margin-inline-start: 0px;
	font-weight: 500;
	font-size: var(--vb-input-font-size);
	color: var(--vb-text-color);
	float: inline-start;

}

.vb_control:is([control-type=number], [control-type=size]) .vb_number_wrap {
	float:inline-start;
	display: flex;
	gap: 5px;
}

.vb_control:is([control-type=number], [control-type=size]) .vb_control_setting {
	gap: 10px;
} 

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

																	 	 Control Size
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
[control-type="size"] .vb_form_range {
	display: none !important;
}

[control-type="size"] .vb_form_range.vb_show_range {
	display: inline-block !important;
}

[control-type="size"] .vb_control_setting {
	display: flex;

}

[control-type="size"] select {
	width: 45px !important;
	margin-inline-start: 5px !important;
}

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

																	 	 Control  gradient color
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_control[control-type='color'] {
	--vb-name-max-width: 220px;
}

.vb_gradient_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vb-control[control-type="gradient_color"] {
	--vb-setting-gap: 5px;
}

[control-type="gradient_color"] .rang-field,
[control-child-type="gradient_color"] .rang-field,
[control-type="gradient_color"] select,
[control-child-type="gradient_color"] select {
	float: none !important;
	margin-inline-end: 0px;
	margin-bottom: 0px;
	vertical-align: top;
	display: inline-block !important;
}

[control-type="gradient_color"] select {
	display: none !important;
	width: 45px;
	margin: 0px !important;
}

[control-type="gradient_color"].vb_has_gradient_color select {
	display: inline-block !important;

}

.vb_color_add {
	line-height: var(--vb-input-height);
	height: var(--vb-input-height);
	font-size: var(--vb-input-font-size);
	display: inline-block !important;
	width: var(--vb-input-height);
	background: var(--vb-input-color);
	color: rgb(64, 202, 92) !important;
	float: none !important;
	margin-inline-end: 0px !important;
	vertical-align: top;
	box-shadow: 0px 0px 0px 1px var(--vb-border-color) inset !important;
	margin-bottom: 0px !important;
	text-align: center;
	border-radius: 5px !important;
	cursor: pointer;
}

.vb_color_add::before {
	vertical-align: top;
	font-style: normal;
	font-size: 1em;
	color: inherit !important;
	content: "\F023";
	width: auto !important;
	text-align: center;
	font-family: 'visualbuilder';
	position: relative;
	line-height: inherit;
	display: inline-block;
}

.vb_color_remove {
	line-height: var(--vb-input-height);
	height: var(--vb-input-height);
	font-size: var(--vb-input-font-size);
	background: rgb(255, 0, 0) !important;
	border-radius: 0px 0px 0px 0px;
	width: 1.5em;
	text-align: center;
	cursor: pointer;
	color: #fff !important;
}

.vb_color_remove::before {
	vertical-align: top;
	font-style: normal;
	font-size: 1em;
	color: inherit !important;
	content: "\f005" !important;
	width: auto !important;
	text-align: center;
	font-family: 'visualbuilder';
	position: relative;
	line-height: inherit;
	display: inline-block;
}

.vb_color_remove:hover {
	opacity: 0.5 !important;
}

.vb_gradient_color {

	display: contents !important;
}

.vb_color_item {
	cursor: move;
	display: inline-grid !important;
	grid-template-columns: auto auto;
	margin-inline-end: 0px !important;
	margin-bottom: 0px !important;
	border-radius: 5px !important;
	overflow: hidden;
	box-shadow: 0px 0px 0px 1px var(--vb-border-color) !important;
}

.vb_color_item .rang-field {
	margin: 0px !important;
	border-radius: 0px 0px 0px 0px;
	box-shadow: none !important;
}

.vb_control[control-type="gradient_color"]:has(.vb_color_item) select {
	display: inline-block !important;
}

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

																	 	 Control Textarea
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_textarea textarea {
	min-height: 100px;
}

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

																	 	 Control Select
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_options_select select {
	width: auto;
	max-width: none !important;
}

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

																	 	Control checkbox
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_checkbox {
	float: inline-start;
	position: relative;
	width: var(--vb-input-height);
	height: var(--vb-input-height);
}

.vb_checkbox label {
	display: inline-block;
	position: relative;
	float: inline-start;
	padding-inline-start: 0px;
	cursor: pointer;
}

.vb_checkbox label::before {
	content: "";
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: var(--vb-input-height);
	height: var(--vb-input-height);
	border: 1px solid var(--vb-border-color);
	float:inline-start;
	border-radius: 5px;
	background: var(--vb-background-color);
	margin-inline-end: 5px;
}

.vb_checkbox:hover label::before {
	background-color: var(--vb-gray-color);
}

.vb_checkbox label::after {
	display: inline-block;
	position: absolute;
	width: var(--vb-input-height);
	height: var(--vb-input-height);
	inset-inline-start: 0px;
	font-size: var(--vb-input-height);
	line-height: var(--vb-input-height);
	text-align: center;
}

.vb_checkbox input[type="checkbox"] {
	display: none;
	opacity: 0;
}

.vb_checkbox input[type="checkbox"]:focus+label::before {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

.vb_checkbox input[type="checkbox"]:checked+label::after {
	font-family: dashicons;
	content: "\f147";
}

.vb_checkbox input[type="checkbox"]:disabled+label {
	opacity: 0.65;
}

.vb_checkbox input[type="checkbox"]:disabled+label::before {
	background-color: #eeeeee;
	cursor: not-allowed;
}

.vb_checkbox_primary input[type="checkbox"]:checked+label::before {
	background-color: #18AD29;
	border-color: #18AD29;
	border-radius: 5px;
}

.vb_checkbox_primary input[type="checkbox"]:checked+label::after {
	color: #fff;
	border-radius: 5px;
}

.vb_checkbox_primary:hover input[type="checkbox"]:checked+label::before {
	background-color: rgb(17, 128, 30);
}

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

																	 	Switcher
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_switcher input {
	display: none !important;
}

.vb_control_switcher {
	position: relative;
}

.vb_label_switch_off,
.vb_label_switch_on {
	position: relative;
	display: block;
	height: inherit;
	font-size: var(--vb-input-font-size);
	background: var(--vb-input-color);
	border-radius: inherit;
	transition: .15s ease-out;
	transition-property: all;
	transition-property: opacity, background;
	float: inline-start;
	height: var(--vb-input-height);
	line-height: var(--vb-input-height);
	border-radius: 5px;
	font-size: var(--vb-input-font-size);
	min-width: 80px;
	color: var(--vb-text-color);
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--vb-border-color);
	position: relative;
}

.vb_label_switch_off:hover,
.vb_label_switch_on:hover {
	opacity: .7;
}

.vb_control_switcher input[type="checkbox"]:checked~.vb_label_switch_on {
	display: inline-block !important;
}

.vb_label_switch_on {
	display: none !important;
}

.vb_control_switcher input[type="checkbox"]:checked~.vb_label_switch_off {
	display: none !important;
}

.vb_label_switch_off {
	text-align: start;
	padding-inline-start: 10px;
}

.vb_label_switch_on {
	text-align:end;
	background: var(--vb-main-color);
	color: #ffffff !important;
	padding-inline-end: 10px;
}

.vb_label_switch_off::before,
.vb_label_switch_on::after {
	background: var(--vb-background-color);
	content: "";
	border-radius: var(--vb-border-radius);
	height: var(--vb-input-height);
	width: var(--vb-input-height);
	display: inline-block;
	vertical-align: top;
	box-shadow: 0 0 0 1px var(--vb-border-color);
}

.vb_label_switch_off::before {
margin-inline-start: 10px;
  float: inline-end;
}

.vb_label_switch_on::after {
	margin-inline-end: 10px;
	float: inline-start;
}

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

																	 Multicheck
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_dropdown {
	min-width: 200px;

}

.vb_dropdown dd,
.vb_dropdown dt {
	margin: 0px;
	padding: 0px;
}

.vb_dropdown ul {
	margin: -1px 0 0 0;
}

.vb_dropdown dd {
	position: relative;
}

.vb_dropdown a,
.vb_dropdown a:visited {
	color: #fff;
	text-decoration: none;
	outline: none;
	font-size: 12px;
}

.vb_dropdown dt a {
	display: block;
	padding: 0 5px;
	min-height: var(--vb-input-height, 35px);
	line-height: var(--vb-input-height, 35px);
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: 5px;
	box-shadow: 0 0 0 1px var(--vb-border-color);
	cursor: pointer;
	background: var(--vb-input-color);
	color: var(--vb-text-color);
	text-align:start;
}

.vb_dropdown dt a::after {
	content: "\f347";
	font-family: dashicons;
	color: var(--vb-text-color);
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	height: 100%;
	line-height: var(--vb-input-height, 35px);
	padding: 0 3px;
	box-sizing: border-box;
}

.vb_multiSel {
	margin: 0;
	padding-inline-end: 15px;
}

.vb_hida {
	font-size: var(--vb-input-font-size);
}

.vb_dropdown:has(span) .vb_hida {
	display: none !important;

}

.vb_dropdown dt a span,
.vb_multiSel span {
	cursor: pointer;
	display: inline-block;
	color: var(--vb-text-color);
	padding: 0px 10px;
	font-size: var(--vb-input-font-size);
	background: rgba(118, 128, 138, 0.2);
	border-radius: 5px;
	line-height: calc(var(--vb-input-height) - 10px);
	margin: 5px;
	height: auto !important;
}

.vb_dropdown dd ul {
	background-color: var(--vb-input-color);
	border: 0;
	color: var(--vb-link-color);
	display: none;
	inset-inline-start: 0px;
	padding: 0 5px;
	position: absolute;
	top: 2px;
	width: calc(100% + 10px);
	list-style: none;
	max-height: 250px;
	overflow: auto;
	z-index: 1;
	border: solid 1px var(--vb-border-color);
	border-radius: 5px;
}
.vb_dropdown dd ul{
	scrollbar-width: thin;
	/* Firefox 64+ */
}

.vb_dropdown dd ul::-webkit-scrollbar {
	width: 5px;
}
.vb_dropdown span.value {
	display: none;
}

.vb_dropdown dd ul li a {
	padding: 5px;
	display: block;
}

.vb_dropdown dd ul li a:hover {
	background-color: #fff;
}

.vb_mutliSelect li {
	float: inline-start;
	width: 100%;
	margin: 0;
	padding: 5px;
	list-style: none !important;
	text-align: start;
	line-height: 20px;
	--vb-input-height: 20px;
	height: 30px;
	border-bottom: solid 1px rgba(118, 128, 138, 0.1);
}

.vb_mutliSelect li input,
.vb_mutliSelect li label {
	height: 20px;
	float: inline-start;
	margin: 0 0 0 2px;
	font-size: 12px;
	line-height: 20px;
	width: 100%;
}

.vb_control_full_width[control-type="multicheck"]>.vb_control_setting>.vb_dropdown,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="multicheck"]>.vb_control_setting>.vb_dropdown {
	width: 100% !important;
}

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

																	 	textarea
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
body .vb_code_textarea {
	position: relative;
	overflow: hidden;
	width: 100%;
}

body .vb_code_textarea textarea {
	border: none;
	outline: none;
	padding-inline-start: 40px !important;
	width: 100%;
}

body .vb_code_textarea .vb_line_number {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 30px;
	text-align: end;
	padding: 5px;
	pointer-events: none;
	color: var(--vb-text-color) !important;
	font-size: var(--vb-input-font-size, 14px);
	background: rgba(118, 128, 138, 0.1);
	line-height: 1.5em !important;
}

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

																	 	Radio
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_options input[type=radio] {
	display: none !important;
}

.vb_control input[type=radio]+label,
.vb_control .vb-input-hover label {
	width: 100%;
	padding: 0px 10px;
	text-align: center;
	margin: 0;
	display: inline-block;
	text-transform: capitalize;
	font-size: var(--vb-input-font-size, 14px);
	font-weight: 500;
	outline: none;
	position: relative;
	transition: all 0.3s;
	transition: none;
	cursor: pointer;
	background: var(--vb-input-color);
	color: var(--vb-text-color);
	box-shadow: 0 0 0 1px var(--vb-border-color) inset;
	border-radius: 5px;
	line-height: var(--vb-input-height, 35px);
	height: var(--vb-input-height, 35px);
}

.vb_options input[type=radio]:checked+label,
.vb_control .vb-input-hover[hover-active="active"] label {
	background: var(--vb-main-color) !important;
	color: white !important;
}

.vb_options input[type=radio][value=""]:checked+label,
.vb_options input[type=radio].vb_radio_label_none:checked+label {
	background: var(--vb-background-hover-color) !important;
	color: white !important;
}


.vb_control input[type=radio]+label:hover,
.vb_control .vb-input-hover label:hover {
	background: var(--vb-background-hover-color) !important;
	color: white !important;
}

.vb_control[control-type="radio"] .vb_multi_control {
	gap: 10px;

}

.vb_control_full_width.vb_control[control-type="radio"]>.vb_control_setting>.vb_multi_control>li,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="radio"]>.vb_control_setting>.vb_multi_control>li {
	flex-grow: 1;
}

.vb_control_full_width.vb_control[control-type="radio"] input[type=radio]+label,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="radio"] input[type=radio]+label {
	width: 100% !important;
}

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

																	 	 Control  Radio Image
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type=choose] {
	--vb-control-column-width: var(--vb-input-height);
}

.vb_control[control-type=choose] .vb_control_setting label {
	margin: 0px !important;
	width: 100% !important;

}

.vb_control[control-type=choose] .vb_control_setting label>i {
	text-align: center;
	height: var(--vb-input-height, 35px);
	width: 100% !important;
	line-height: var(--vb-input-height, 35px);
	text-align: center;
	float: inline-start;
	font-size: calc(var(--vb-input-height, 35px) * .65);
	box-shadow: 0px 0px 0px 1px var(--vb-border-color) !importantmargin: 0px !important;
	border-radius: 5px;
	background: var(--vb-input-color);
	box-shadow: 0 0 0 1px var(--vb-border-color);
	color: var(--vb-text-color);
}

.vb_control[control-type=choose] .vb_control_setting label>input+i:hover {
	background: var(--vb-background-hover-color) !important;
	color: white !important;
	box-shadow: 0px 0px 0px 1px var(--vb-background-hover-color) !important;
}

.vb_control[control-type=choose] .vb_control_setting label>input:checked+i {
	box-shadow: 0px 0px 0px 1px var(--vb-main-color);
	background: var(--vb-main-color) !important;
	color: #ffffff !important;
}

.vb_control[control-type=choose] .vb_control_setting label>input[value=""]:checked+i {
	background: var(--vb-background-hover-color) !important;
	color: white !important;
}

.vb_control[control-type="choose"] .vb_control_setting label>i::before {
	float: inline-start;
	height: var(--vb-input-height, 35px);
	width: 100%;
	text-align: center;
	position: relative;
	transition: transform 0.5s;
}


.vb_control_full_width.vb_control[control-type="choose"]>.vb_control_setting>.vb_multi_control>li,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="choose"]>.vb_control_setting>.vb_multi_control>li {
	flex-grow: 1;
}

.vb_control_full_width.vb_control[control-type="choose"] .vb_control_setting label,
.vb_control_full_width.vb_control[control-type="choose"] .vb_control_setting label i,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="choose"] .vb_control_setting label,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="choose"] .vb_control_setting label i {
	width: 100% !important;
}

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

																	 	 Control  Url
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_url {
	width: 100% !important;
}

.vb_control_url_title {
	display: grid;
	grid-template-columns: calc(100% - var(--vb-input-height)) auto;
}

.vb_control_url_title input {
	width: 100%;
}

.vb_url_toggle {
	width: var(--vb-input-height);
	height: var(--vb-input-height);
	line-height: var(--vb-input-height);
	float: inline-end;
	text-align: center;
	border-radius: 5px;
	background: var(--vb-border-color);
	color: var(--vb-link-color);
	cursor: pointer;

}

.vb_control_url_active .vb_control_url_content {
	display: inline-block !important;

}

.vb_url_toggle:hover,
.vb_control_url_active .vb_url_toggle {
	color: #ffffff !important;
	background: var(--vb-main-color) !important;

}

.vb_control_url_content {
	float: inline-start;
	width: 100%;
	display: none !important;
	position: relative;
	background: var(--vb-background-color);
	--vb-background-color: var(--vb-content-background-color);
	--vb-gray-color: var(--vb-content-gray-color);
	--vb-border-color: var(--vb-content-border-color);
	--vb-button-color: var(--vb-content-button-color);
	--vb-input-color: var(--vb-content-input-color);

	box-shadow: 0 0 20px 0px rgba(96, 112, 128, 0.4);
	border-radius: 5px;
}

.vb_control_url_content>.vb_control {

	padding: var(--vb-between-padding, 20px) 15px;
}

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

																	 	 Control  Radio Image
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type=radio_image] label>input,
.vb_control[control-type=choose] label>input {
	visibility: hidden;
	position: absolute;
}

.vb_control[control-type=radio_image] label>input+img,
.vb_control[control-type=choose] label>input+i {
	cursor: pointer;
	box-shadow: 0px 0px 0px 1px var(--vb-border-color);
	margin: 0px !important;
	border-radius: 5px;
}

.vb_control[control-type=radio_image] label>input+img:hover {
	box-shadow: 0px 0px 0px 3px var(--vb-background-hover-color);
}

.vb_control[control-type=radio_image] label>input:checked+img {
	box-shadow: 0px 0px 0px 3px var(--vb-main-color);
}

.vb_control[control-type=radio_image][control-value-set] label>input:checked+img {
	box-shadow: 0px 0px 0px 3px var(--vb-border-color) !important;
}

.vb_control[control-type=radio_image] li {
	float:inline-start;
	width: auto;
	padding-inline-end: 15px;
	padding-bottom: 15px;
	margin: 0px;
}
 

.vb_control[control-type=radio_image] li img {
	width: 100%;
	height: auto;
	padding: 5px;
}

.vb_control[control-type=radio_image] li label span {
	text-align: center;
	width: 100%;
	float: inline-start;
}

.vb_control_setting>.vb_multi_control {
	width: 100%;
	grid-template-columns: repeat(var(--vb-control-column, 6), 1fr) !important;
}

.vb_control_setting>.vb_multi_control>li {
	width: var(--vb-control-column-width, auto) !important;
}

.vb_control_column>.vb_control_setting>.vb_multi_control {
	display: grid !important;
	--vb-control-column-width: 100%;
}

.vb_control_column_width>.vb_control_setting>.vb_multi_control {
	display: flex !important;
	gap: 10px;
	flex-wrap: wrap;
}
.vb_control_column_width>.vb_control_setting>.vb_multi_control li label {
	width:100% !important;
}

.vb_control[control-type=radio_image] li {

	padding-inline-end: 00px;
	padding-bottom: 00px;
}

.vb_control[control-type=radio_image] li>label {
	margin: 0px !important;
}

.vb_control_column_height.vb_control[control-type=radio_image] .vb_multi_control li label{
  height: var(--vb-control-column-height, auto) !important;
 }
.vb_control_column_height.vb_control[control-type=radio_image] .vb_multi_control li label img{
	height:100% !important;
}

.vb_control_image_background.vb_control[control-type=radio_image] .vb_multi_control li label img{
  content-visibility: hidden;
  background-image:var(--vb-radio-image,none);
  background-position:none;
}
@container vb_options_width (width <=1200px) {

	.vb_control_column_1200 .vb_control_setting .vb_multi_control {
		display: grid !important;
		--vb-control-column: var(--vb-control-column-1200);
		--vb-control-column-width: 100%;
	}

	.vb_control_column_width_1200 .vb_control_setting .vb_multi_control {
		display: flex !important;
		--vb-control-column-width: var(--vb-control-column-width-1200);
	}


}

@container vb_options_width (width <=900px) {

	.vb_control_column_900 .vb_control_setting .vb_multi_control {
		display: grid !important;
		--vb-control-column: var(--vb-control-column-900);
		--vb-control-column-width: 100%;
	}

	.vb_control_column_width_900 .vb_control_setting .vb_multi_control {
		display: flex !important;
		--vb-control-column-width: var(--vb-control-column-width-900);
	}


}

@container vb_options_width (width <=700px) {

	.vb_control_column_700 .vb_control_setting .vb_multi_control {
		display: grid !important;
		--vb-control-column: var(--vb-control-column-700);
		--vb-control-column-width: 100%;
	}

	.vb_control_column_width_700 .vb_control_setting .vb_multi_control {
		display: flex !important;
		--vb-control-column-width: var(--vb-control-column-width-700);
	}

}

@container vb_options_width (width <=500px) {

	.vb_control_column_500 .vb_control_setting .vb_multi_control {
		display: grid !important;
		--vb-control-column: var(--vb-control-column-500);
		--vb-control-column-width: 100%;
	}

	.vb_control_column_width_500 .vb_control_setting .vb_multi_control {
		display: flex !important;
		--vb-control-column-width: var(--vb-control-column-width-500);
		--vb-control-column-width: 100%;

	}

}

@container vb_options_width (width <=400px) {
	.vb_multi_control {
		justify-content: end !important;
	}

	.vb_control_column_400 .vb_control_setting .vb_multi_control {
		display: grid !important;
		--vb-control-column: var(--vb-control-column-400);
		--vb-control-column-width: 100%;
	}

	.vb_control_column_width_400 .vb_control_setting .vb_multi_control {
		display: flex !important;
		--vb-control-column-width: var(--vb-control-column-width-400);
		--vb-control-column-width: 100%;

	}

}

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

																	 	 Hover
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type=hover]>.vb_control_setting>.vb_multi_control {
	display: grid !important;
	grid-template-columns: repeat(var(--vb-column, 2), 1fr) !important;
	overflow: hidden;
	border-radius: 5px;
	gap: 0px !important;
	box-shadow: 0 0 0 1px var(--vb-border-color);
}

.vb_control[control-type=hover]>.vb_control_setting>.vb_multi_control>li,
.vb_control[control-type=hover]>.vb_control_setting>.vb_multi_control>li label {
	width: 100%;
	border-radius: 0px !important;
	margin: 0px !important;
	box-shadow: -1px 0px 0px 0px var(--vb-border-color) !important;
}

.vb_multi_control {
	padding: 0px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}

.vb_multi_control>li {
	float: inline-start;
	margin-inline-end: 0px;
	margin-bottom: 00px;
	list-style: none !important;
}

.vb_control_name_bottom>.vb_control_setting>.vb_multi_control>.vb_control {
	display: var(--vb-display, flex);
	text-align: center;
	flex-direction:  column-reverse;
	gap:3px;
}

.vb_control_name_bottom>.vb_control_setting>.vb_multi_control>.vb_control label {
	margin-inline-end: 0px !important;
	line-height: 1em;
	margin-top: 5px;
}

.vb_control[control-type="hover"]>.vb_control_name {
	display: none !important;
}

.vb_control[control-type="hover"]>.vb_control_setting {
	width: 100% !important;
}

.vb_control[control-type="hover"] .vb_multi_control {
	display: flex !important;
}


.vb_control_full_width>.vb_control_setting>.vb_multi_control,
.vb_options_side .vb_control_side_full_width.vb_control>.vb_control_setting>.vb_multi_control {
	width: 100% !important;
}

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

																	 	 Image
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type=image] .vb_control_setting {
	display: flex;
}

.vb_image {
	max-width: 100%;
	width: auto !important;
	max-height: 300px;
	display: none !important;

	float:inline-start;
	position: relative;
	text-align: center;
	overflow: hidden;
	margin-inline-start: 0px;
}

.vb_image_remove {
	display: none !important;
}

.vb_image_id {
	display: none !important;
}

.vb_has_image .vb_image_remove {
	display: inline-block !important;
}

.vb_image img {
	position: relative;
	max-width: 100%;
	max-height:300px;
	height: auto;
	max-width: 100%;
	inset-inline-start: 0px;
	top: 0px;
	vertical-align: top;
	border: solid 3px var(--vb-border-color);
	border-radius: 5px;
}

.vb_image:has(img, .vb_loading) {
	display: inline-block !important;
}
 

.vb_image .vb_loading {
	width: 40px;
	margin: auto;
}
.vb_image:has(img) .vb_loading{
	position: absolute;
  	inset-inline-end: 5px;
   top: 5px;
  z-index: 99999;
}
.vb_image.vb_has_image .vb_loading{
	display:none !important;
}


.vb_control_full_width:is([control-type=image],
[control-type=gallery], [control-type=icon]) .vb_control_content,
.vb_options_side .vb_control_side_full_width.vb_control:is([control-type=image],
[control-type=gallery], [control-type=icon]) .vb_control_content {
	background: var(--vb-gray-color) !important;
	padding: 15px !important;
	--vb-setting-content: center;
	border: solid 1px var(--vb-border-color) !important;
}

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

																	  Gallery
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_gallery_list {
	width: 40px;
	float:inline-start;
	display: none;
	flex-wrap: wrap;
	gap: 10px;
}

.vb_gallery_item {
	--vb-input-height: 30px;
}

.vb_gallery_id {
	display: none !important;
}

.vb_gallery_item {
	width: 80px;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	cursor: move;
	margin-inline-end: 0px;
	max-height: 80px;
	float:inline-start;
	line-height: 80px;
}

.vb_gallery_item img {
	width: 100%;
	max-height: 100%;
	float:inline-start;
	border-radius: 5px;
	border: solid 2px var(--vb-border-color);
}

.vb_gallery_list:has(.vb_loading) {
	display: flex !important;
	width: 40px !important;
}

.vb_gallery_list:has(.vb_gallery_item) {
	display: flex !important;
	width: 100% !important;
}

.vb_gallery_list .vb_loading {
	width: 40px;
	margin: auto;
}

body .ui-sortable-placeholder.vb_gallery_item {
	height: auto !important;
	width: 80px;
	max-height: 80px !important;
	float:inline-start;
	position: relative !important;
	visibility: visible !important;
}

@container vb_options_width (width <=600px) {
	.vb_gallery_list {
		gap: 5px;
	}

	.vb_gallery_item {
		width: 60px;
		max-height: 60px !important;

	}

}

@container vb_options_width (width <=400px) {
	.vb_gallery_list {
		justify-content: end;
	}
	.vb_control_full_width:is([control-type=gallery]) .vb_gallery_list,
	 .vb_options_side .vb_control_side_full_width.vb_control:is([control-type=gallery]) .vb_gallery_list  {
				justify-content: start;
	}
	.vb_gallery_item {
		height: auto !important;
		width: 50px;
		max-height: 50px !important;

	}

}

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

																	 icon
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_icon {
	border-radius: 5px;
	float: inline-start;
	position: relative;
}

.vb_icon_remove {
	display: none !important;
}

.vb_has_icon .vb_icon_remove {
	display: inline-block !important;
	--vb-input-height: 30px;
}

.vb_icon.vb_has_icon i {
	pointer-events: none !important;
	width: 80px;
	height: 80px;
	line-height: 80px;
	position: relative;
	border: 3px solid var(--vb-border-color);
	color: var(--vb-link-color);
	inset-inline-start: 0px;
	top: 0px;
	font-size: 30px;
	cursor: pointer;
	float: inline-start;
	border-radius: 7px;
}

.vb_icon.vb_has_icon i::before {
	vertical-align: top;
	font-style: normal;
	line-height: inherit;
	height: 100% !important;
	width: 100% !important;
	font-size: 40px;
	text-align: center;
	position: absolute;
	line-height: inherit;
}

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

																	 font-family
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_control_full_width.vb_control[control-type=fontfamily] .vb-font-picker,
.vb_options_side .vb_control_side_full_width.vb_control[control-type=fontfamily] .vb-font-picker {
	width: 100% !important;
	text-align: center !important;
}

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

																	  wp_editor
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_editor {
	width: 100% !important;
}

.vb_control_editor .wp-switch-editor {
	height: auto !important;
}

.vb_control_editor textarea {
	--vb-input-color: #ffffff !important;
	box-shadow: none !important;
	border: none !important;
	padding: 10px !important;
	height:200px;
}

body .mce-btn.mce-active i,
.mce-btn.mce-active:hover i {
	color: #444444;
}
  .mce-floatpanel,
  .mce-menu {
    z-index: 99999999999999 !important;
}
/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	  Multi Options
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control_full_width.vb_control[control-type="multi_options"]>.vb_control_setting>.vb_multi_control,
.vb_options_side .vb_control_side_full_width.vb_control[control-type="multi_options"]>.vb_control_setting>.vb_multi_control {
	justify-content: start !important;
}

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

																	  vb_popover_content
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
  .vb_control[control-type="popover"].vb_control_full_width,
  .vb_options_side  .vb_control_side_full_width.vb_control[control-type="popover"]{
	 --vb-display:inline-block !important;
 }
 .vb_control[control-type="popover"].vb_control_full_width > div.vb_control_name,
  .vb_options_side .vb_control_side_full_width.vb_control[control-type="popover"] > div.vb_control_name {
  width: var(--vb-name-width) !important;
}
 .vb_control[control-type="popover"].vb_control_full_width > div.vb_control_setting,
  .vb_options_side   .vb_control_side_full_width.vb_control[control-type="popover"] > div.vb_control_setting{
  width:auto !important;
  float:none !important;
}*/
.vb_control[control-type='popover'] {
	--vb-name-max-width: 180px;
}

.vb_popover_button {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;

}

.vb_popover_content {
	position: relative;
	width: 100% !important;
	height: auto;
	z-index: 9999999999999999;
	inset-inline-start: 0px;
	top: 0px;
	margin-top: 0px !important;
	background: var(--vb-background-color);
	--vb-background-color: var(--vb-content-background-color);
	--vb-gray-color: var(--vb-content-gray-color);
	--vb-border-color: var(--vb-content-border-color);
	--vb-button-color: var(--vb-content-button-color);
	--vb-input-color: var(--vb-content-input-color);

	box-shadow: 0 0 20px 0px rgba(96, 112, 128, 0.4);
	border-radius: 5px;
	z-index: 99999;
	display: none;
	padding: 0px 0px;
	container: vb_options_width / inline-size;

}

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

body .vb_options .vb_options_wrap .vb_control[control-type="popover"]>.vb_control_setting>div.vb_control_content {
	display: none !important;
}

body .vb_options .vb_options_wrap .vb_popover_active.vb_control[control-type="popover"]>.vb_control_setting>div.vb_control_content {
	display: flex !important;
	width: 100%;
	flex-wrap: wrap;
}

.vb_popover_active>.vb_control_setting>.vb_control_content>.vb_popover_content {
	display: inline-block !important;
}


.vb_control:not(.vb_popover_show_reset)>.vb_control_setting>.vb_popover_button>.vb_popover_reset {
	display: none !important;

}

.vb_popover_reset::before {
	content: "\f010" !important;
}

.vb_popover_show_reset .vb_popover_toggle {
	background: var(--vb-main-color) !important;
	box-shadow: none !important;
	color: #ffffff !important;
}


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

																	 	 Options Tabs
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*
*/

.vb_options_data {
	display: none !important;
}

.vb_tab_list,
.vb_tab_content {
	float: inline-start !important;
	width: 100% !important;
	container: vb_options_width / inline-size;
}

.vb_tab_item {
	float: inline-start;
	width: 100%;
	padding: 10px 10px 0px;
	border-radius: 5px;
	grid-template-columns: auto 35px 35px;
	display: grid;
	align-items: center;
	box-shadow: 0 0 5px 5px rgba(0, 20, 40, 0.1);
	margin-top: 10px;
	background: var(--vb-background-color);
	--vb-background-color: var(--vb-content-background-color);
	--vb-gray-color: var(--vb-content-gray-color);
	--vb-border-color: var(--vb-content-border-color);
	--vb-button-color: var(--vb-content-button-color);
	--vb-input-color: var(--vb-content-input-color);
}

.vb_tab_duplicate,
.vb_tab_remove {
	align-content: end;
	float:inline-end;
	align-items: center;
	color: var(--vb-text-color);
	justify-content: end;
	text-align: center;
	line-height: var(--vb-input-height);
	cursor: pointer;
	font-size: 20px;
	height: auto;
	margin-top: -10px;
}

.vb_tab_duplicate:hover .vb_tab_remove:hover {
	opacity: 0.5;
	color: var(--vb-link-color) !important;
}

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

																	 	 List Tabs
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*
*/
.vb_list_title {
	line-height: var(--vb-input-height);
	height: var(--vb-input-height);
	width: 100%;
	float:inline-start;
	background: var(--vb-background-hover-color);
	color: #fff;
	border-radius: 5px;
	display:flex;

	cursor: pointer;
	padding: 0 15px;
}

.vb_list_title span {
	float: inline-start;
	flex-grow:1;
	line-height: inherit !important;
	color: inherit !important;
}

.vb_list_item {
	float:inline-start;
	width: 100%;
	padding: 0px;
	margin-top: 0px;
	border-radius: 5px;
	box-shadow: 0 0 5px 5px rgba(0, 20, 40, 0.1);

}

.vb_list_content {
	display: none;
	padding: 00px 0px;
	width: 100%;
	background: var(--vb-background-color);

	--vb-background-color: var(--vb-content-background-color);
	--vb-gray-color: var(--vb-content-gray-color);
	--vb-border-color: var(--vb-content-border-color);
	--vb-button-color: var(--vb-content-button-color);
	--vb-input-color: var(--vb-content-input-color);
	container: vb_options_width / inline-size;
}

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

.vb_list_add:hover {
	background: var(--vb-main-color);
	color: rgb(255, 255, 255) !important;
}

.vb_list_title a {
	color: inherit !important;
	height: var(--vb-input-height);
	padding: 0 0px;
	font-size: var(--vb-input-font-size);
	text-align: center;
	float: inline-end;
	cursor: pointer;
	padding-inline-start: 10px;
}

.vb_list_title a:hover {
	opacity: .5;
}

.vb_tab_remove::before,
.vb_list_title a::before {
	color: inherit !important;
	font-size: inherit !important;
	text-align: center;
	line-heigh: inherit !important;
	vertical-align: top;
	width: 100%;
	text-align: center;

}

.vb_list_active>.vb_list_content {
	display: inline-block;
	width: 100%;
}


.vb_list_active .vb_list_toggle::before {
	content: "\f029" !important;
}

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

																	 	Start End
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type="start"] {
	padding: 0px !important;
}

.vb_control[control-type="start"]>.vb_control_name {
	display: none !important;
}

.vb_control[control-type="start"]>.vb_control_setting {
	width: 100% !important;
	border-bottom: 0px !important;
}


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

																	 	According End
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type="according_start"] {
	padding: 0px !important;
}

.vb_control[control-type="according_start"]>.vb_control_name {
	width: 100% !important;
	max-width: 100% !important;
	height: calc(var(--vb-input-height) * 1.65) !important;
	background: var(--vb-according-color) !important;
	line-height: calc(var(--vb-input-height) * 1.65) !important;
	font-size: calc(var(--vb-name-font-size) * 1.25);
	font-weight: 900 !important;
	cursor: pointer !important;
	border-radius: 5px 5px 0px 0px;
	color: var(--vb-link-color) !important;
	position: relative;
	border-bottom: solid 1px var(--vb-background-color);
	padding: 0 15px !important;
}

.vb_control[control-type="according_start"]>.vb_control_name label {
	font-size: inherit !important;
	line-height: inherit !important;
	pointer-events: none !important;
	font-weight: 700;
}

.vb_control[control-type="according_start"]>.vb_control_name::before {
	vertical-align: top;
	font-style: normal;
	line-height: inherit;
	height: inherit !important;
	content: "\f030" !important;
	width: auto !important;
	text-align: center;
	font-family: 'visualbuilder';
	inset-inline-end: 15px;
	line-height: inherit !important;
	position: absolute;
	line-height: inherit;
	float: inline-end;
}

.vb_control[control-type="according_start"]>.vb_control_setting {
	width: 100% !important;
	display: none !important;
	border-bottom: 0px !important;
	padding: 0px !important;
	border-radius: 0px 0px 5px 5px;
}

div.vb_control:last-child {
	border-bottom: none !important;
}

.vb_control[control-type="according_start"].vb_according_active>.vb_control_name::before {
	content: "\f029" !important;
}

.vb_control[control-type="according_start"].vb_according_active>.vb_control_setting {
	display: inline-block !important;
}

[control-type="multi_control"] {
	padding: 0px !important;
}

[control-type="multi_control"]>.vb_control_name {
	display: none !important;
}

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

																	 	According End
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_control[control-type="heading"] {
	border-bottom: none !important;
	padding: 0px !important;
	margin-top: 00px !important;
}

div.vb_control[control-type="heading"]:first-child {
	margin-top: 0px !important;
}

.vb_control[control-type="heading"]>.vb_control_name {
	width: 100% !important;
	max-width: 100% !important;
	background: var(--vb-gray-color) !important;
	border-radius: 5px;
	color: var(--vb-link-color) !important;
	height: calc(var(--vb-input-height) * 1.5) !important;
	line-height: calc(var(--vb-input-height) * 1.5) !important;
	position: relative;
	padding: 0 15px !important;
	font-size: calc(var(--vb-name-font-size) * 1.05);

}

.vb_control[control-type="heading"]>.vb_control_name label {
	font-size: inherit !important;
	width: auto;
	font-weight: 700 !important;
	line-height: inherit !important;
	pointer-events: none !important;
	float: inline-start;
}

.vb_control_tablet.vb_control[control-type="heading"] .vb_control_name::before,
.vb_control_mobile.vb_control[control-type="heading"] .vb_control_name::before {
	font-size: calc(var(--vb-input-height) * 0.75) !important;
	width: auto;
	line-height: inherit !important;
	pointer-events: none !important;
	font-style: normal;
	float: inline-start;
	font-family: 'visualbuilder';
	margin-inline-end: 10px;
}

.vb_control_tablet.vb_control[control-type="heading"] .vb_control_name::before {
	content: "\f019" !important;
}

.vb_control_mobile.vb_control[control-type="heading"] .vb_control_name::before {
	content: "\f020" !important;
}


.vb_control_separator_before.vb_control {
	border-top: solid 1px var(--vb-border-color) !important;
}

.vb_control_separator_after.vb_control {
	border-bottom: solid 1px var(--vb-border-color) !important;
}

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

																	 	 Control Fold
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_options_fold,
.vb_control_css_preview,
.vb_control_html_preview{
	display: none;
}

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

																	 Resonsive
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.vb_control_responsive_wrap {
	float: inline-start;
	padding-inline-start: 5px;
}

.vb_control_responsive_item {

	text-align: center;
	border-radius: 5px;
	width: 1.5em !important;
	font-size: 11px !important;
	margin-inline-start: 0px;
	opacity: .7;
	line-height: inherit !important;
	cursor: pointer;
	font-weight: 400 !important;
	vertical-align: middle;
	display: inline-block;
}

body .vb_options .vb_control_responsive_item[data-responsive]:hover {
	color: var(--vb-main-color) !important;
	opacity: 1 !important;

}

body .vb_responsive_tablet .vb_control_responsive_item[data-responsive="desktop"],
body .vb_responsive_tablet .vb_control_responsive_item[data-responsive="mobile"],
body .vb_responsive_mobile .vb_control_responsive_item[data-responsive="desktop"],
body .vb_responsive_mobile .vb_control_responsive_item[data-responsive="tablet"],
.vb_control_responsive_item[data-responsive="tablet"],
.vb_control_responsive_item[data-responsive="mobile"] {
	opacity: .3;
	color: var(--vb-text-color);
}

body .vb_responsive_tablet .vb_control_responsive_item[data-responsive="tablet"],
body .vb_responsive_mobile .vb_control_responsive_item[data-responsive="mobile"],
.vb_control_responsive_item[data-responsive="desktop"] {
	opacity: 1;
	color: var(--vb-link-color);
}


body .vb_control.vb_control_mobile,
body .vb_control.vb_control_tablet {
	display: none;
}

body .vb_responsive_mobile .vb_control.vb_control_mobile,
body .vb_responsive_tablet .vb_control.vb_control_tablet {
	display: var(--vb-display, flex);
}


body .vb_responsive_tablet .vb_control.vb_control_desktop,
body .vb_responsive_tablet .vb_control.vb_control_mobile,
body .vb_responsive_mobile .vb_control.vb_control_desktop,
body .vb_responsive_mobile .vb_control.vb_control_tablet {
	display: none;
}

body .vb_options .vb_control_or_desktop.vb_control[data-active="hide"],
body .vb_control.vb_control_or_mobile[data-active="show"],
body .vb_control.vb_control_or_tablet[data-active="show"] {
	display: var(--vb-display, flex) !important;
}

body .vb_control.vb_control_or_mobile[data-active="hide"],
body .vb_control.vb_control_or_tablet[data-active="hide"] {
	display: none !important;
}

body .vb_responsive_mobile .vb_control.vb_control_or_mobile[data-active="show"],
body .vb_responsive_tablet .vb_control.vb_control_or_tablet[data-active="show"],
body .vb_responsive_mobile .vb_control.vb_control_or_mobile[data-active="hide"],
body .vb_responsive_tablet .vb_control.vb_control_or_tablet[data-active="hide"] {
	display: var(--vb-display, flex) !important;
}

body .vb_responsive_tablet .vb_control.vb_control_or_desktop[data-active="show"],
body .vb_responsive_tablet .vb_control.vb_control_or_mobile[data-active="show"],
body .vb_responsive_mobile .vb_control.vb_control_or_desktop[data-active="show"],
body .vb_responsive_mobile .vb_control.vb_control_or_tablet[data-active="show"] {
	display: var(--vb-display, flex) !important;
}

body .vb_responsive_tablet .vb_control.vb_control_or_desktop[data-active="hide"],
body .vb_responsive_tablet .vb_control.vb_control_or_mobile[data-active="hide"],
body .vb_responsive_mobile .vb_control.vb_control_or_desktop[data-active="hide"],
body .vb_responsive_mobile .vb_control.vb_control_or_tablet[data-active="hide"] {
	display: none !important;
}

.vb_control_or_fold,
.vb_control_and_fold,
.vb_control_or_unfold,
.vb_control_and_unfold,
.vb_control_child_or_fold,
.vb_control_child_and_fold,
.vb_control_child_or_unfold,
.vb_control_child_and_unfold {
	display: none !important;
}
/******************************************************************************************************************************************************
******************************************************************************************************************************************************

																	 Resonsive
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_size_picker_wrap {
  display:flex;
  flex-wrap: wrap;
  position:absolute;
   z-index: 999999999999;
  border-radius: 10px;
  background-color: #fff;
  justify-content: space-between;
  box-shadow: 0 0 5px #0000000d, 0 5px 20px #0000001a;
  -moz-user-select: none;
  -webkit-user-select: none;
 
  user-select: none;
  height: auto;
  top: 0px;
 box-sizing:border-box;
 flex-direction: column;
  flex-wrap: nowrap;
  width:250px !important;
  overflow:hidden;

}
.vb_size_picker_heading{
background: var(--vb-gray-color);
 	  width: 100%;
   float: inline-start;
	padding:10px 20px;
	box-sizing:border-box;
 
}
.vb_size_picker_heading span{
	width: auto;
	font-size:16px;
	line-height:1.5em;
 
	color: var(--vb-link-color);
	font-weight: 700 !important;
 }
.vb_size_picker_list{
 	height:100%;
	width:100%;
 		overflow-y: auto;
		flex-grow: 1;
		max-height: 100%;
}
.vb_size_picker_item{
	width:100%;
	box-sizing:border-box;
	height:auto;
	font-size:14px;
	font-weight:500;
	
	padding:5px 20px;
	color:var(--vb-text-color);
	cursor:pointer;
 
 
}
.vb_size_picker_item:hover{
	background-color:var(--vb-main-color);
	color:#ffffff;

}
 
.vb_size_picker_input{
  	float: inline-start;
	overflow:hidden;
	height: var(--vb-input-height);
	width:auto !important;
		
}
.vb_size_picker_input span{
		padding:0 8px;  float: inline-start;
}
.vb_size_picker_close{
  float: inline-start;
  height:100%;
  	width: 25px;
	color:var(--vb-link-color);
	cursor:pointer;
	background:var(--vb-content-gray-color);
 }
 .vb_size_picker_close:hover{
	 background: var(--vb-background-hover-color) !important;
  color: #fff !important;
 }
.vb_size_picker_input ~  .vb_number_wrap,
.vb_size_picker_input ~  .vb_control_content {
 	 
    display: none!important;
}