#vala-popup-box {
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(var(--vala_main_theme_body_bg),calc({theme="vala_popup_container_bg_opacity"} / 100));
  width:100%;
  height:100vh;
  overflow:hidden;
  z-index:149000!important; 
  visibility:hidden;
  opacity:0;
  transition:all 0.3s linear;
}

.vala-theme-show-popup-show {
 	opacity:1!important;
    visibility: visible!important; 
}

.vala-theme-show-popup-hide {
 	opacity:0!important;
    visibility: hidden!important; 
}

#vala-popup-container {  
  width:{{if theme.vala_popup_custom_size}}{theme="vala_popup_custom_width"}{{else}}40{{endif}}%;
  height:{{if theme.vala_popup_custom_size}}{theme="vala_popup_custom_height"}{{else}}40{{endif}}%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background-color: {theme="vala_popup_bgcolor"};
}
@media screen and (max-width: 979px) {
  #vala-popup-container {
      width:{{if theme.vala_popup_custom_size}}{theme="vala_popup_custom_width_m"}{{else}}75{{endif}}%;
  	  height:{{if theme.vala_popup_custom_size}}{theme="vala_popup_custom_height_m"}{{else}}40{{endif}}%;
  }
}
#vala-popup-container div {
  width:100%;
  height:100%;
  {{if theme.vala_popup_type=="e"}}
  	overflow-y:auto;
  {{endif}}
}

#vala-popup-image{
  object-fit:{theme="vala_popup_image_cover_type"};
  width:100%;
  height:100%;
  display:block;
  margin:auto;
}

#vala-popup-close-btn {
  background-color: rgb(var(--vala_main_theme_color));
  color: rgb(var(--vala_main_theme_color_font));
  font-size:1.1rem;
  line-height:1.9rem;
  width:1.9rem;
  height:1.9rem;
  position:absolute;
  top:-.95rem;
  right:-.95rem;
  border-radius:50%;
  text-align:center;
  cursor: pointer;
}