@keyframes vb_opacity {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes vb_transform {
	from {
		transform: scale(0.5);
	}

	to {
		transform: scale(1);
	}
}
/*
*:has(.vb_options:not(.vb_options_static)){
  z-index: 140000   !important;
}*/
body:has(.vb_options:not(.vb_options_static))  #querylist{
	  z-index: 1400000   !important;
}
.vb_options {
	position: fixed;
	background: rgba(0, 0, 0, 0.70);
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	display: flex;
	z-index: 150000;
	position: fixed;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 300ms !important;
}

.vb_options * {
	pointer-events: all;
	box-sizing: border-box;
}

.vb_options.vb_active {
	animation: vb_opacity 300ms;
	pointer-events: all;
	opacity: 1;
	transition: opacity 300ms !important;
}

.vb_options.vb_deactive {
	display: none !important;
}

.vb_options_middle {
	width: 980px;
	flex: 0 1 auto;
	margin: 20px;
	display: flex;
	position: relative;
	background: var(--vb-background-color) !important;
	max-height: 90vh;
	flex-direction: column;
	background: #fff;
	border-radius: 5px;
	transform: scale(0.5);
	overflow: hidden;
	transition: transform 300ms, height 300ms !important;
	container: vb_options_width / inline-size;

}

.vb_options.vb_active .vb_options_middle {
	animation: vb_transform 300ms;
	transform: scale(1);
	transition: transform 300ms, height 300ms !important;
}

.vb_options.vb_deactive .vb_options_middle {
	transition: none !important;
}

.vb_options_scroll {
	padding: 20px;
	overflow-y: auto;
	margin: 0px !important;
	position: relative;
	overflow-x: hidden;
	scrollbar-width: thin;
	/* Firefox 64+ */
}

.vb_options_scroll::-webkit-scrollbar {
	width: 5px;
}

.vb_options_title {
	font-size: 16px;
	--vb-title-ht: 50px;
	padding: 0;
	height: auto;
	background: rgb(10, 20, 30);
	color: #ffffff;
}

.vb_options_title h3 {
	padding: 0 20px;
	line-height: var(--vb-title-ht);
	float: inline-start;
	margin: 0px;
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	  margin: 0px !important;
}

.vb_options_title>i,
.vb_options_title>.vb_dock_wrap>i {
	float: inline-end;
	position: relative;
	width: var(--vb-title-ht);
	cursor: pointer;
	height: var(--vb-title-ht);
}

.vb_options_title>i:hover,
.vb_options_title>.vb_dock_wrap>i:hover {
	opacity: 0.5 !important;
}

.vb_options_title>i::before,
.vb_options_title>.vb_dock_wrap>i::before {
	position: relative;
	float:  inline-end;
	line-height: var(--vb-title-ht);
	width: 100%;
	text-align: center;
	font-size: 20px;
}

.vb_options_massage {
	float:inline-start;
	color: rgb(255, 0, 0);
}

.vb_options * {
	pointer-events: all !important;
}

.vb_title_tabs {
	float:inline-start;
	padding: 0px 0px 0px;
	padding-inline-start:20px;
	width: 100%;
	text-align: inline-start;
	margin-top: 10px;
	min-height: 40px;
	border-top: 0px !important;
	  position: relative;
}

.vb_title_tabs a {
	padding: 0px 20px;
	float: inline-start;
	background: rgb(30, 40, 50);

	font-size: 14px;
	color: rgb(255, 255, 255);

	font-weight: 700 !important;
	border-style: solid;
	border-bottom-style: solid;
	line-height: 40px;
	margin-top: 1px !important;

	border-width: 0px;
	cursor: pointer;
	border-radius: 5px 5px 0px 0px;
	margin-inline-end: 1px;
}

.vb_title_tabs a[data-active="hide"] {
	display: none !important;
}

.vb_title_tabs a:hover {
	background: rgb(255, 255, 255) !important;
	color: var(--vb-link-color) !important;
}

.vb_layout_active {
	background: rgb(255, 255, 255) !important;
	color: var(--vb-link-color) !important;
	box-shadow: none !important;
}

@container vb_options_width (width <=900px) {
	.vb_title_tabs a {
		padding: 0px 15px !important;
		font-size: 12px !important;
		font-weight: 500 !important;

	}

}

@container vb_options_width (width <=500px) {
	.vb_title_tabs a {
		padding: 0px 12px !important;
		font-size: 11px !important;
	}

}

.vb_options_wrap {
	float:inline-start;
	width: 100%;
	display: none;
}

.vb_options_wrap.vb_layout_group_active {
	display: contents !important;
}

.vb_options_content {
	float: inline-start;
	width: 100%;
}

.vb_options_loading {
	height: 300px !important;
}

.vb_options_wrap.vb_layout_group_active.vb_options_loading {
	display: inline-block !important;
}

.vb_options_loading::before {
	transition: transform 300s, background .3s, color .3s, border .3s, box-shadow .3s, opacity .3s;
	opacity: 1;
	animation: vb_opacity 300ms;
	position: absolute;
	z-index: 999;
	height: 100%;
	inset-inline-start: 0px;
	top: 0px;
	content: "";
	width: 100%;
	background: url(../image/loading.svg) rgba(255, 255, 255, 0.80) no-repeat center center;
}

.vb_options_add {
	float: inline-end;
	position: relative;
}

.vb_options_name label {
	float: inline-start;
}

.vb_active_loading .vb_options_scroll {
	height: 200px;
}
 
 
 .vb_active_loading .vb_options_content::before {
	content: "";
	position: absolute;
	z-index: 1500000;
 	width: 100%;
	height: 100%;
	inset-inline-start: 0;
	top: 0px;
	background: #FFF;
}

.vb_active_loading .vb_options_content::after {
	content: "\F031";
	-webkit-animation: vb_rotate 1.4s infinite linear;
	animation: vb_rotate 1.4s infinite linear;
	font-family: 'visualbuilder';
	position: absolute;
	width: 40px;
	inset-inline-start: calc(50% - 20px);
	color: var(--vb-text-color);
	z-index: 1500001;
	font-size: 40px;
	top: calc(50%);
}

.vb_options_content li img {
	max-width: 100%;
	height: auto;
	display: block;
	text-align: center;
	margin: 10px auto;
}

.vb_options_bottom {
	float:inline-end;
	padding: 15px;
	position: relative;
	bottom: 0;
	z-index: 9999;
	background: #f2f5f8;
	text-align: end;
	width: 100%;
}

.vb_options_bottom .vb_btn {
	--vb-el-width: auto;
	--vb-el-background: rgb(100,110,120);
	--vb-el-color: #ffffff;
	margin: 10px;
	padding: 0 20px;
	font-weight: 500;
	--vb-el-height: 40px;
	--vb-el-line-height: 40px;
	position: relative;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: background 300ms, color 300ms;
}

.vb_options_bottom .vb_btn {
	--vb-el-hover-background: #304050 !important;
}

.vb_options_bottom a::before {
	content: inherit;
}

.vb_options_list .vb_options_setting {
	width: 100%;
	float: inline-end;
}

.vb-active-icon .vb-mouse-wait {
	background: rgba(0, 0, 0, 0.70);
}

.vb_options_start li {
	float:inline-start;
}

.vb_options_start {
	float: inline-end;
}

.vb_options_description {
	width: 100%;
	float: inline-start;
	font-size: 12px;
	font-weight: 400;
	text-align: start;
	margin-top: 3px;
	color: #888;
}

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

																	 	Dock
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_dock_wrap {
	float: inline-end;
	position: relative;
}

.vb_dock_drop {
	width: 250px;
	top: var(--vb-title-ht);
	position: absolute;
	background: rgb(10, 20, 30);
	inset-inline-end: 0;
	margin: 0px;
	box-shadow: 0 0 0px 1px rgb(00, 10, 20);
	display: none;
	padding: 10px 15px;
	border-radius: 5px;
}

.vb_dock_wrap.vb_dock_active .vb_dock_drop {
	display: inline-block;
	z-index: 999999999;

}

.vb_dock_wrap .vb_dock_drop span {
	line-height: 40px !important;
}

.vb_dock_wrap .vb_dock_drop i {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	float: inline-end;
	cursor: pointer;
	text-align: center;

}

.vb_dock_wrap .vb_dock_drop i::before {
	font-size: 23px;

}

.vb_dock_wrap .vb_dock_drop i:hover {
	background: var(--vb-main-color);
}

.vb_options_side .vb_dock_side {
	background: var(--vb-main-color);
}

.vb_options_below .vb_dock_below {
	background: var(--vb-main-color);
}

.vb_options_center .vb_dock_center {
	background: var(--vb-main-color);
}

/************************************************************************************************************************************************************************************************************************************************************************************************************HTML Tag////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_options select,
.vb_options input[type=text],
.vb_options input[type=number],
.vb_options .vb_size_picker_input,
.vb_options .vb_color_picker_input,
.vb_options textarea {
	border: none !important;
	background: var(--vb-input-color) !important;
	color: var(--vb-text-color) !important;
	box-shadow: 0px 0px 0px 1px var(--vb-border-color) inset !important;
	border-radius: 5px !important;
	min-height: 20px !important;
	    font-family: 'vb-font' !important;
}
.vb_options input[type=text]::placeholder,
.vb_options input[type=number]::placeholder,
.vb_options textarea::placeholder{
		color: var(--vb-placeholder-color) !important;
}

.vb_options select:focus,
.vb_options input[type=text]:focus,
.vb_options input[type=number]:focus,
.vb_options textarea:focus {
	box-shadow: 0px 0px 0px 1px var(--vb-border-focus-color) inset !important;
}

.vb_options input[type="number"],
.vb_options .vb_size_picker_input,
.vb_options .vb_color_picker_input{
	width: 100%;
	float: inline-start;
 	text-align: center;
	line-height: var(--vb-input-height);
	font-size: var(--vb-input-font-size);
	min-height: 0px;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}


.vb_options select option {
	font-size: 15px;
	line-height: 20px;
    font-family: 'vb-font',Tahoma, Arial, sans-serif !important;
}
.vb_options  select:focus {
	    font-family: 'vb-font' !important;
}
.vb_options select {
	cursor: pointer;
	    font-family: 'vb-font' !important;
}

.vb_options select,
.vb_options input[type=text] {
	-moz-appearance: textfield;
	float: inline-start;
	border: none !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	height: var(--vb-input-height);
	line-height: var(--vb-input-height);
	width: var(--vb-input-width, auto);
	font-size: var(--vb-input-font-size);
}

.vb_options input[type="range"] {
	width: 0;
	height: var(--vb-input-height);
	margin-inline-start: 0px !important;
	flex-grow: 1;
	background: none;

}

.vb_options input[type="range"]::-moz-range-track {
	background-color: var(--vb-gray-color);
	height: 7px;
	border-radius: 50px;
}

.vb_options input[type="range"]::-moz-range-thumb,
.vb_options input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--vb-input-color);
	cursor: pointer;
	border: none !important;
	box-shadow: 0px 3px 5px 2px var(--vb-border-color);
	border-radius: 50%;
}

.vb_options .vb_number {
	container: vb_number_width / inline-size;
	float: inline-start;
	height: var(--vb-input-height);
	width: var(--vb-input-width, 75px) !important;
}

@container vb_number_width (max-width: 60px) {

	.vb_options input[type="number"]::-webkit-outer-spin-button,
	.vb_options input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.vb_options input[type="number"] {
		-moz-appearance: textfield;
	}
}

.vb_options textarea {
	width: 100%;
	height: 100px;
	font-size: var(--vb-input-font-size);
	padding: 5px !important;
}