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

																	 	Template
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.vb_options_template>.vb_options_middle {
	width: 100% !important;
}

.vb_mytemplate_add {
	width: 100% !important;
	float: inline-start;
}

.vb_mytemplate_massage {
	text-align: center;
	font-size: 25px;
	width: 100%;
	margin-bottom: 10px;
	margin: 20px 0px;
}

.vb_options_template .vb_options_scroll {
	padding: 20px !important;
}

.vb_template_import .vb_mytemplate_add {
	display: none !important;
}

.vb_template_export .vb_mytemplate_import {
	display: none !important;
}

#vb_mytemplate_name {
	height: 50px !important;
	line-height: 50px !important;
}

.vb_mytemplate_content .vb_control_item {
	max-width: 600px;
	margin: auto;
	display: grid;
	grid-template-columns: auto 100px;
}

.vb_mytemplate_save {
	background: rgb(7, 114, 206);
	width: 100%;
	height: 50px !important;
	line-height: 50px !important;
	border-radius: 7px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
}

.vb_mytemplate_save:hover {
	background: #222528;
	color: #ffffff !important;
}

.vb_mytemplate_content .vb_mytemplate_list {
	width: 100%;
	margin-top: 20px;
	text-align: center;
	margin-bottom: 10px;
	float:inline-start;
}

.vb_mytemplate_item {
	width: 180px;
	margin: 5px;
	height: auto;
	box-shadow: 0 0 7px 0px rgba(0, 10, 20, 0.15);
	border-radius: 7px;
	display: inline-block;
	padding: 5px;
	position: relative;
}

.vb_mytemplate_name {
	font-size: 13px;
	text-align: center;
	width: 100%;
	padding: 5px;
}

.vb_mytemplate_item a {
	float: inline-end;
	height: 25px;
	margin: 5px 5px;
	width: calc(50% - 10px);
	text-align: center;
	border-radius: 7px;
	line-height: 25px;
	font-size: 11px !important;
	cursor: pointer;
}

.vb_template_export .vb_mytemplate_item a {
	width: calc(100% - 10px);
}

.vb_mytemplate_item a:hover {
	background: var(--vb-background-hover-color) !important;
	color: #ffffff !important;
}

.vb_mytemplate_import {
	background: rgb(9, 196, 108);
	color: rgb(255, 255, 255);
}

.vb_mytemplate_delete {
	background: rgb(251, 57, 60);
	color: rgb(255, 255, 255);
}

.vb_code_import,
.vb_options_save,
.vb_menu_update ,
.vb_widget_update {
	--vb-el-background: #10b596 !important;
}

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

																	 	library
																		
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.vb_options_template {
	--vb-library-column: 6;
}

.vb_options_template .vb_options_wrap.vb_layout_group_active .vb_library_wrap {
	display: var(--vb-library-display, grid) !important;
	flex-wrap: wrap;
	gap: 20px;
	width: 100% !important;
	grid-template-columns: repeat(var(--vb-library-column, 6), 1fr);
}

.vb_options_template[data-id="column"] .vb_options_wrap.vb_layout_group_active .vb_library_wrap {

	grid-template-columns: repeat(var(--vb-template-column, 10), 1fr) !important;
}

.vb_library_item {
	float: inline-start;
	padding: 10px;
	margin: 0px;
	width: var(--vb-library-width, 100%);

	text-align: center;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	cursor: pointer;

	box-shadow: 0 0 10px 0px var(--vb-border-color);
	display:flex;
	flex-direction: column;
  justify-content: space-between;
}

.vb_library_item span {
	font-size: 18px;
	line-height: 1.5em;
	text-align: center;
	width: 100%;
	margin-top: 10px !important;
	display: inline-block;
	vertical-align: top;
}

.vb_library_item img {
	margin: 0px !important;
}

.vb_library_item:hover::after {
	background: rgba(0, 0, 0, 0.75);
	position: absolute;
	width: 100%;
	inline-start: 0px;
	top: 0px;
	content: '';
	height: 100%;
}

.vb_library_item:hover::before {
	content: "\F023";
	color: rgb(255, 255, 255);
	font-size: 40px;
	position: absolute;
	z-index: 9;
	font-family: 'visualbuilder';
	transform: translate(-50%, -50%);
	inset-inline-start: 50%;
	top: 50%;
}
.rtl .vb_library_item:hover::before {
	transform: translate(50%, -50%);
}