/*********************** Add Layerr ********************/

.vs_add_layer *{
		font-family: vs-rubik,rubik,vs-iransans,tahoma !important; 
transition:all 350ms;
box-sizing:border-box;
}

.vs_add_layer {
	display: none;
	position: fixed;
	pointer-events: all;
	background: rgba(0,0,0,0.70);
	top: 0;
 z-index:999999999999999999;
	cursor: initial;
	height: 100%;
	width: 100%;
	font-family:vs-rubik,rubik,vs-iransans,tahoma;

	right: 0;
 
	vertical-align: middle
}
.vs_add_layer.vs_add_layer_active{
	display:table;
}
.vs_add_layer_middle {
	margin: auto;
	width: 600px;
	height: auto;box-shadow: 0 0 50px 0px rgba(0, 0, 0, 1);
	text-align: center;
	display: inline-block;
	position: absolute;
	padding: 0 0;
 	overflow:none;background: #fff;
 top:50%;right:50%;
 border-radius: 7px;

overflow: hidden;
  transform:translate(50%,-50%)
  }
 
.vs_add_layer_title {
	padding: 00px;
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	position:relative;
	background: #f2f5f8;
	box-sizing: border-box;
	float: right;
	width: 100%;
	z-index: 1;
	height:50px;
	top: 0;
 }
.vs_add_layer_title h3{
	margin:0px !important;
	float: left;line-height: 50px !important;
	color:rgb(48, 56, 63);
	line-height:1 !important;
	padding:0 20px !important;
	line-height:50px !important;
	font-size:18px !important;
	
}
 
.vs_add_layer_cancel {
	cursor: pointer;
	height:50px;
	line-height:50px;
	padding:0 20px;
	background: rgb(240, 71, 71);
 	color:#ffffff;
	float:right;
 } 
 .vs_add_layer_cancel:hover{
	 background: rgb(185, 25, 25);
 }

.vs_add_layer_add{
    cursor: pointer;
    background: rgb(6, 208, 142);
    color: rgb(255, 255, 255);
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    float: right;
    padding: 0 20px;
}
.vs_add_layer_add:hover{
	    background: rgb(0, 142, 96);
}
.vs_add_layer_save:before,
.vs_add_layer_cancel:before,
.vs_add_layer_add:before{
width: 20px;
content:"";
background-size:20px;
height: 20px;
margin-right: 10px;
margin-top: 15px;
float: left;
}

.vs_add_layer_cancel:before{
	background-image:url(../image/template_cancel.png)
}
.vs_add_layer_add:before{
	background-image:url(../image/template_add.png);
}
 	
.vs_add_layer_content {
	overflow-y: auto;
	float: right;
	background: #fff;
	padding: 0;
	margin: 0;
	width: 100%;
 	position:relative;
	padding:  20px;
	height:calc(100% - 50px);
	display:grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
} 
.vs_add_layer_item {
padding: 20px;
cursor:pointer;
 
margin: 10px;
list-style: none;
box-shadow: 0 0 0 3px rgb(242, 245, 248);
margin: 10px;
width: auto;
border-radius: 7px;
 ;
}
.vs_add_layer_item span{
	    width: 100%;
    display: inline-block;
    font-size: 16px;
    color: #20282f;
    margin-top: 10px;
}

.vs_add_layer_item img{
	width:60%;
	text-align:center;
}
.vs_add_layer_item.selected,
.vs_add_layer_item:hover{
	box-shadow:0 0 0 3px rgb(42, 155, 216) inset;
	border-radius:7px;
	background: #f8fafc
}
 
/***************************** layer add*********/
 


.vs_module_layer_warp{
 	width: 100%;
display: inline-block;
margin:0px;
text-align: left;
border-top: solid 3px rgb(226, 229, 232);
padding-top: 20px;
margin-top: 20px;
}
.vs_module_layer_add::before{
	background-image:url(../image/addlayer.png);
	
}
.vs_module_layer_template_add::before {
	background-image:url(../image/library_add.png);
	
}
.vs_module_all_layer_template_save::before {
    background-image: url(../image/library_save.png);
}

.vs_module_layer_list{
		display: inline-block;
		width:100%;
vertical-align: top;
margin:0px;
margin-bottom: 20px;
}
.vs_module_layer_item {
    width: 100%;
    margin: 0px 20px 5px 00px;
    height: auto;
    background: rgb(128, 136, 143);
    position: relative;
    display: inline-block;
    border-radius: 7px;
    overflow: hidden;
    float: left;
    box-shadow: 5px 5px 5px 0px rgb(226, 229, 232);
    vertical-align: top;
    height: 30px;
}
 .vs_module_layer_item.vs_module_side_options_active{
	 background:rgb(42, 155, 216);
 }
 .vs_module_layer_top{
	 width:100%;
 height: 30px;
position: relative;
width: 120px;
float: right;
}
.vs_module_layer_top a{
	width:25%;
	width: 25%;
	text-align:center;
      position: relative;
    top: 0;
    display: inline-block;
 }
.vs_module_layer_top a:hover{
	background:rgba(59,179,255,1.00);
}
.vs_module_layer_top a:before{
	cursor: pointer;
	
	line-height:30px;
	font-size:15px;
	width:100%;
	text-decoration: none;
	float: left;
	vertical-align: middle;	
	font-style: normal;
	color: #ffffff;
}
.vs_module_layer_options::before{
 
 	font-family: dashicons;
 	content: "\f111";
 
 }
 
 .vs_module_layer_duplicate::before{
 
 	font-family: dashicons;
 	content: "\f105";
 
 }

 .vs_module_layer_template_save::before{
 
 	font-family: FontAwesome;
 	content: "\f0c7";
 
 }
 
.vs_module_layer_list .ui-sortable-placeholder{
	  background:rgba(34, 113, 177, 0.1);width: 100%;
	  visibility:visible !important;
 height: 40px;
	border:dashed 1px rgba(34, 113, 177, 0.6);
	  
  }
 .vs_module_layer_bottom{
background: rgb(240, 243, 246);
height: 25px;
bottom: 0;
position: absolute;
width: 100%;
text-align: center;
 }
.vs_module_layer_title {
    line-height: 30px;
    cursor: move;
    height: 30px;
    text-align: left;
    width: 100%;
}
 
 
 
.vs_module_add_warp{
	display: inline-block;
vertical-align: top;
padding:  0px 0px 0;
margin: 20px 0px 0;
width: 100%;
}
 
 
.vs_module_add_bottom{
	width: 100%;
 text-align: center;
background: rgb(224, 232, 239);
color: #506070;
position: absolute;
bottom: 0; 

line-height: 25px;
font-size: 13px;
 	
}
.vs_layer_options  .vs_options_middle{
	height:auto !important;
	position:relative !important;
}
.vs_layer_options  .vs_options_content{
	height:auto !important;
}


.vs_module_layer_options::before {
	cursor: pointer;
	line-height: 40px;
	text-decoration: none;
	float: right;
	vertical-align: middle;
	font-size: 20px;
	font-family: dashicons;
 	content: "\f111";
	font-style: normal;
	color: #ffffff;
	width: 40px;
}
.vs_module_layer_remove::before {
	width: 40px;
	cursor: pointer;
	line-height: 40px;
	text-decoration: none;
	float: right;
	vertical-align: middle;
	font-size: 20px;
	font-family: dashicons;
 		color: #ffffff;

	content: "\f182";
	font-style: normal;
}
.vs_module_layer_duplicate::before {
	width: 40px;
	cursor: pointer;
	line-height: 40px;
	text-decoration: none;
	float: right;
	vertical-align: middle;
	font-size: 20px;
	font-family: dashicons;
 		color: #ffffff;

	content: "\f105";
	font-style: normal;
}
.vs_module_layer_template_save::before {
width: 40px;
	cursor: pointer;
	line-height: 40px;
	text-decoration: none;
	float: left;
	vertical-align: middle;
	font-size:20px;
 	font-family: 'FontAwesome';
 	content: "\f0c7";
	color: #ffffff;
 	font-style: normal;
}
.vs_module_layer_name{
	float:left;
	color:#fff;
height: 30px;
overflow: hidden;
float: left;
text-align: left;
color: rgb(255, 255, 255);
line-height: 30px;
padding: 0 10px;
font-size: 12px;
font-weight: 700;width: calc(100% - 120px) !important;
}
.vs_module_layer_name span,
.vs_module_layer_name span *{
    font-weight: 400 !important;
	color:#ffffff !important;
	margin:0px !important;
	padding:0px !important;
	border:none !important;
	 
}
.vs_module_layer_name span{
	opacity:.8;
}.vs_module_layer_name span i::before{
     font-size: 1.5em !important;
    vertical-align: middle !important;
}
.vs_module_layer_name span img{
max-height: 35px !important;
vertical-align: middle !important;
}
.vs_module_layer_options,
 .vs_module_layer_duplicate,
  .vs_module_layer_template_save,
    .vs_module_layer_remove{
		float:right;
	}
 
 
.vs_module_layer_item .vs_module_layer_name::before {
content: "";
background-position: left;
background-repeat: no-repeat;
float: left;
width: 20px;
height: 100%;
background-size: 20px;
margin-right: 5px;
}
.vs_module_layer_item[data-id="icon"] .vs_module_layer_name::before {
    background-image: url(../image/layer_icon_mini.png);
}
.vs_module_layer_item[data-id="button"] .vs_module_layer_name::before {
    background-image: url(../image/layer_button_mini.png);
}
.vs_module_layer_item[data-id="text"] .vs_module_layer_name::before {
    background-image: url(../image/layer_text_mini.png);
}
.vs_module_layer_item[data-id="box"] .vs_module_layer_name::before {
    background-image: url(../image/layer_box_mini.png);
}
.vs_module_layer_item[data-id="image"] .vs_module_layer_name::before {
    background-image: url(../image/layer_image_mini.png);
}
    
 
/************************ Layout options *********************************/
.vs_side_options{
position: fixed;
width:0px;
display:none;
width:0px;
height: 1;
height: calc(100% - 90px);
z-index: 99999999999999;
 left: 0;
margin: 20px;
top: 50px;
 
background: #ffffff;
border-right: solid 3px #e0e4e8;
}
 .vs_module_side_options_active .vs_side_options{
	width:400px;
 	display:inline-block;
	
	
}
.vs_panel_options_active .vs_panel_content{
	width: calc(100% - 400px);
	float:right;
 
}
.vs_module_side_options_title{
	background:#20282f;
height: 50px;
width:100%;
text-align:left;
line-height:50px;
padding:0  0 0 20px ;
margin:0px;
}
.vs_module_side_options_title span{
	font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 50px;
}
.vs_module_side_options_close{
	float:right;
	width:50px;
	height:50px;
}
.vs_module_side_options_close::before{
content: "\f335";
font-family: dashicons;
font-size: 40px;
font-style: normal;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
float: right;
text-align: center;
}
.vs_module_side_options_close:hover{
	cursor:pointer;
 
	
}

.vs_module_side_options_close:hover::before{
	color:rgb(59, 179, 255);
}
 
 
.vs_side_options_content{
overflow-y: auto;
height: calc(100% - 50px);
position: relative;
  scrollbar-width: thin;
}

.vs_side_options_content .vs_title_tabs{
	display:grid;
	grid-template-columns: 25% 25% 25% 25%;
	width:100%;
	background:#60686f;
	padding:8px 0px;
}
  
.vs_side_options_content .vs_title_tabs a{
 padding: 8px 10px;
background: none !important;
font-size: 12px;
 font-weight: 500 !important;
border: none;
text-align: center;
 
display: inline-block;
float: left;
vertical-align: top;
border: none;
margin: 0px;
border-radius: 7px !important;
}
.vs_side_options_content .vs_title_tabs a:hover,
.vs_side_options_content .vs_title_tabs a.vs_layout_active{
 border: none !important;
background: rgb(255, 255, 255) !important;
color: rgb(0, 0, 0) !important;
font-weight: 500 !important;
border-radius: 7px !important;
 }
 
  
.vs_side_options_content .vs_options_item{
 	padding: 15px 10px;
	position:relative;
	margin: 0;
	border-bottom:none !important;
	box-shadow:none !important;
}

.vs_side_options_content  .vs_multi_options_item label{
	font-weight:700;
}
.vs_side_options_content  .vs_options_name{
	width:40%;
}
.vs_side_options_content .vs_options_setting{
	width:60%;
}
 
.vs_side_options_content .vs_options_name label{
float: left;
width: 100%;
text-align: left;
line-height: 20px;
margin-bottom:8px;
font-size: 14px;
font-weight: 700;
}
.vs_side_options_content .vs_multi_options_item{
	padding-right:5px;
}

.vs_side_options_content .vs_number_slider .vs_options_name{
	width:100% !important;
}
.vs_side_options_content .vs_number_slider .vs_options_setting{
	width:100% !important;
}
.vs_side_options_content .vs_number_slider .vs_form_range{
	width:260px !important;
}
.vs_side_options_content .vs_number_slider .vs_form_number {
	width:40px !important;
}

.vs_side_options_content .vs_options_number span{
	padding-right:5px !important;
	margin-right:0px !important;
	
}

 .vs_live_layer_align .vs_options_name,
  .vs_live_layer_position .vs_options_name,
   .vs_live_layer_size .vs_options_name,
    .vs_live_layer_tablet_align .vs_options_name,
  .vs_live_layer_tablet_position .vs_options_name,
   .vs_live_layer_tablet_size .vs_options_name,
       .vs_live_layer_mobile_align .vs_options_name,
  .vs_live_layer_mobile_position .vs_options_name,
   .vs_live_layer_mobile_size .vs_options_name{
	display:none !important;
}
.vs_live_layer_align img,
.vs_live_layer_tablet_align img,
.vs_live_layer_mobile_align img {
     height: auto;
    border-radius: 5px;
    display: block;
    text-align: center;
    margin: 10px auto;
    padding: 5px;
 	opacity:0.6;
	box-shadow:none !important;
}
.vs_live_layer_align  input:checked + img,
.vs_live_layer_tablet_align  input:checked + img,
.vs_live_layer_mobile_align  input:checked + img {
    box-shadow: none;
 background: #e2e5e8 !important;
 opacity: 0.9;
}
 
 
   


.vs_mobile_hide .vs_layer_content{
	opacity:0.5;
}

.vs_perview_mobile .vs_mobile_hide::before ,
.vs_perview_tablet .vs_tablet_hide::before {
    border: dashed 1px rgba(0, 0, 0, 0.45) !important;
    position: absolute;
    content: "";
    height: 100%;
background-image: url('../image/hide.png');
width: 100%;
z-index: 1;
top: 0px;
right: 0;
box-sizing: content-box;
margin: -1px;
background-color: rgba(120,128,136,0.4);
}


 .vs_side_options_content .vs_options_image .vs_options_setting input{
	 width:100%;
	 margin:10px 0px 0px 0px;
  }
  

.rtl .vs_add_layer_save:before,
.rtl .vs_add_layer_cancel:before,
.rtl .vs_add_layer_add:before,
.rtl .vs_module_layer_item,
.rtl .vs_module_layer_top a:before,
.rtl  .vs_module_layer_name,
.rtl .vs_add_layer_title h3,
.rtl .vs_module_layer_item .vs_module_layer_name::before,
.rtl .vs_side_options_content .vs_title_tabs a,
.rtl .vs_side_options_content .vs_options_name label{
float:right

}

.rtl .vs_add_layer_title,
.rtl .vs_add_layer_cancel,
.rtl .vs_add_layer_add,
.rtl .vs_add_layer_content ,
.rtl  .vs_module_layer_top,
.rtl .vs_module_layer_options::before,
.rtl .vs_module_layer_remove::before ,
.rtl .vs_module_layer_duplicate::before,
.rtl .vs_module_layer_template_save::before,
.rtl .vs_module_layer_options,
.rtl  .vs_module_layer_duplicate,
.rtl   .vs_module_layer_template_save,
.rtl    .vs_module_layer_remove,
.rtl  .vs_panel_options_active .vs_panel_content,
.rtl .vs_module_side_options_close,
.rtl .vs_module_side_options_close::before{
 
float:left
}

.rtl .vs_add_layer_save:before,
.rtl .vs_add_layer_cancel:before,
.rtl .vs_add_layer_add:before{
margin-right: 0px;
margin-left: 10px;
}

.rtl .vs_module_layer_item{
    margin: 0px 00px 5px 20px;
}

.rtl .vs_side_options {
 
  right: 0;
  left:auto;
 
  border-right:0px;
  border-left: solid 3px #e0e4e8;
}
.rtl .vs_module_side_options_title span,
.rtl .vs_side_options_content .vs_options_name label,
.rtl  .vs_module_layer_name,
.rtl  .vs_module_side_options_title{
	text-align:right;
}
.rtl  .vs_side_options_content .vs_multi_options_item{
	padding-left: 5px;
	padding-right: 0px;
}
.rtl .vs_module_side_options_title{
padding: 0 20px 0 00px;	
}
.rtl .vs_module_layer_item .vs_module_layer_name::before{
	margin-right: 0px;
	margin-left: 5px;
}