.alto_svg{
    display:none;
}
.ancho_svg{
    display:none;
}

.canvaContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#000000bd; /* Fondo semitransparente */
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0; /* Inicialmente completamente transparente */
    transition: opacity 0.5s, transform 0.5s; /* Agrega una transición suave a la opacidad y la transformación */
    pointer-events: none; /* Desactiva la interacción con el "pop-up" oculto */
    display: flex;
    transform: scale(0.8); /* Inicialmente reducido de tamaño */
    overflow:hidden;

    

}

.canvaContainer.active {
    opacity: 1; 
    transform: scale(1); 
    pointer-events: auto; 
}


.closeCanvaContainer{
    position: absolute;
    top: 1%;
   /* right:20%;*/
}


/* Estilos del botón de cierre con la clase .closeCanvasContainer */
.closeCanvaContainer.close-button {
    background: #e73b81;
    border: none;
    cursor: pointer;
    padding: 6px;
    font-size: 15px;
    position: absolute;
    top: 7%;
  /*  right: 22%;*/
    border-radius: 8px;
}

/* Estilos del icono de la cruz (blanco por defecto) */
.closeCanvaContainer .icon {
    color: white;
}

/* Estilos del texto "Cerrar" (oculto por defecto) */
.closeCanvaContainer .text {
  
    color: white;
    font-size: 15px;
    margin-left: 5px;
}

/* Cambia el color del icono y muestra el texto al pasar el cursor sobre el botón */
.closeCanvaContainer:hover .icon {
    color: black; /* Cambia el color de la cruz cuando se coloca el cursor sobre el botón */
}

.closeCanvaContainer:hover .text {
    color: black; /* Cambia el color de la cruz cuando se coloca el cursor sobre el botón */
}


.canvaContainerIzda{
    position: relative;
    width: 38%;
    background: #1b1b1b;
    height: 80vh;
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: 2%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.canvaContainerDcha{
    position: relative;
    width: 16%;
    background: #2d2d2dc9;
    height: 80vh;
   /* margin-top: 10%;
    margin-bottom: 10%;
    margin-left: 2%;*/
   
   
   /* padding-top: 1%;*/
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}

#topDcha{
position: relative;
/*overflow: hidden;*/


box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
padding: 4%;
background: #252222;
padding-bottom:12%;
}

#medidas{
    width: 100%;
    float: left;
}

#bodyDcha{
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    height: 50vh;
    float: left;
    padding: 4%;

    background: #323232;
  
   
}

#bottomDcha{
   background: #1e1d1d;
    padding: 5%;
    display: block;
    float: left;
    width: 100%;
    bottom: 0;
    position: absolute;
  
}

li.optionsSvg.attribute_radiosvg{
  
    color: #fff; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Esquinas redondeadas */
    cursor: pointer; /* Cambiar el cursor al pasar el mouse */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombreado */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transi */
    border:none !important;
    margin-right: 5px;
}

#canvaheight{
    height: auto !important;
    width:100% !important;
}


label.attribute_label {
    color: whitesmoke;
    font-weight: 100;
    
}

button.exclusive2.svgPriceBut.cartblack{
    background: #db1d7d;
}

#zoomButton{
    background: #db1d7d;
    border: none;
    width: 50%;
    padding: 1%;
    border-radius: 5px;
    color: white;
    margin-left: 10px;
}


/* Ocultar los input radio */
.tipoSvg {
    display: none;
}

/* Estilos para las pestañas */


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

.tab-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #696969;
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .tab-label:hover {
    background-color: #e0e0e0;
  }

  /* Estilos para las pestañas activas */
  .tab-label.active {
    background-color:#242222;
    color: #fff;
    border-bottom: 0;
  }

  /* Estilos para el contenido de las pestañas */
  .tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #f9f9f9;
  }

  /* Mostrar el contenido de la pestaña activa */
  .tab-label.active + .tab-content {
    display: block;
  }
  .canvapop{
    padding-left: 0 !important;
  }
  div.uploader{
    margin-top:20px !important;
  }

  #lucchetto{
    display: block;

    z-index: 9999999;
    right: 2px !important;
  }

  #coloresneon{
    height: 5vh;
  }

  .tab-label.active.fondolabelactive{
    background-color:rgb(38 38 38);
    color: white;
  }
  .tab-label.fondolabel{
    background-color:#acabab;
    color:#333;
  }

  #leftProduct.contenedorcrea{
    height: 210px ;
  }
  .mvadapt{
    height: 340px ;
    overflow: hidden;
    border-radius: 0;
  }
  .col-md-4.minh.font-select > span{
border-radius: 0px;
  }

  #svgPrice2.priceneon {
    top: 220px;
  }
  .form-group.col-lg-6.neoncart{
    top: 265px;

  }
  .inputNeon.form-group{
    border-radius: 0px;
  }
  .font-select > span{
    border-radius: 0 !important;
    height: 31px !important;
  }


  .canvaContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgb(0 0 0 / 72%); /* Fondo semitransparente */
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0; /* Inicialmente completamente transparente */
    transition: opacity 0.5s, transform 0.5s; /* Agrega una transición suave a la opacidad y la transformación */
    pointer-events: none; /* Desactiva la interacción con el "pop-up" oculto */
    display: flex;
    transform: scale(0.8); /* Inicialmente reducido de tamaño */
  }

 .cotasalto{
   
  width: 20% !important;
    left: 0;
    margin-bottom: 10px;

 }

 .cotasancho{
  width: 20% !important;
  z-index: 1;
  right: 0;
 }

 #cotasneon{
  position: absolute;
  bottom: 21vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;


}

#infolineas{
  position: absolute;
  width: 90%;
  bottom: 0vh;
  height: 8vh;
  background: #343232;
  margin-left: 5%;
  margin-bottom: 3.5%;
  padding: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:2px 2px 4px rgba(0, 0, 0, 0.5)
}

#infolineasIzda, #infolineasDcha {
width: 50%;
float: left;
height: 6vh;
}

#imgif, #imgifDcha{
  width: 30%;
  float: left;
  background: #444040;
  height: 6vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#imgif img, #imgifDcha img{
  max-height: 5vh;
}
#textimg, #textimgDcha{
  width: 70%;
  float: left;
 padding: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6vh;
}

#titgig{
  font-size: 1.6rem;
  color: #c1bebe;
  padding:5%;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2;
  transition: opacity 0.5s ease-in-out;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
}

.clearfix.CL1{
display: none !important;
}

label.attribute_label[for="Colores"] {
  display: none;
}

.testocanva{
  float: left;
}
#fuentecanva{
  float: left;
}
#altoresponsive{
  width: 101px;float: left;
}

.ia3d{
  background-color: #0f0f0f;
}


.colorSel {
  width: 100% !important;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  background: #0e0e0ede !important;
  padding: 2%;
  margin-top: 0 !important;
}

.mvadapt{
  background-color: #101010e8 !important;
  border-radius: 0 !important;
}
.crea.mvadapt{
  height: 230px;
}
.footmv{
  background-color: #2c2c2c !important;
  border-top: 0 !important;
  height: 96px;
}
.row .footmv{
  height: 89px;
}
#svgPrice2{
  color: white !important;
  font-weight: 100 !important;
}


.exclusive2.svgPriceBut.aplicaradapt{
 float: left;
 width: 40%;
 background: #db1d7d;
border-radius: 0;
}

#topDcha .exclusive2.svgPriceBut.aplicaradapt{
  width: 100%;
}

.exclusive2.svgPriceBut.cartblack{
  width: 100%;
  border-radius: 0;
  background: #db1d7d;
}
#svgPrice2.priceneon{
  width:176px;
}
.form-group.col-lg-6.neoncart{
  width: 28%;
}
#comercial{
  border: none;position: absolute;bottom: 0;background: #2c2c2c;left: 15px;z-index: 1;color:white;
}
#thumbs_list_frame{
max-width: 750px !important;
}

#restart{
  display: none;
}
div.uploader span.action{
      width: 150px !important;
    background: #db1d7c !important;
}

label[for="fileSvg"].active + #restart {
  display: none; /* Ocultar cuando la etiqueta tiene el atributo "for" igual a "fileSvg" y la clase "active" */
}

.color_pick:hover{
  color: rgb(215, 215, 215);
}



  /* Móviles */

  @media (max-width:480px){

    .closeCanvaContainer.close-button{
      right: 1%;
      z-index: 2;
    }
    .canvaContainer{
      justify-content: unset;
      align-items: unset;
      display: unset;
      z-index: 2;
    }

    .canvaContainerIzda{
      width: 100%;
      height: 40vh;
      margin-bottom: 0;
    }
    .canvaContainerDcha{
      width: 100%;
      height: 60vh;
      overflow: scroll;
    }
    #bottomDcha{
      position: fixed;
      padding: 2%;
    }

  }

  
  @media (max-width:767px){

    .primary_block #leftProduct{
      width: 97%;
    }
    
    .crea.mvadapt {
      height: 280px;
    }
    #leftProduct .contenedorcrea{
      height: 280px;
    }

    .crea.mvadapt #atributoscanva{
      margin-top: 0;
    } 
    .contenedorcrea #getPng{
      margin-left: 10px;
      margin-right: 0;
      float: left;
      width: 40%;

    }

    .contenedorcrea #getPng button.exclusive2.svgPriceBut.aplicaradapt{
     width: 100%;
    }
    .form-group.col-lg-6.neoncart{
      width: 50%;
    }
  
    #svgPrice2{
      right: 0 !important;
    }
    #restart{display: none !important;}

    li.optionsSvg.attribute_radiosvg {
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
      transition: background-color 0.3s, box-shadow 0.3s;
    }

    .alto_svg, .ancho_svg{
      width: 40%;float: left;
    }

  }
  /* Tablets y portátiles*/

  @media (max-width: 1199px ) and (min-width: 768px){
  
    
    .closeCanvaContainer.close-button{
     /* right: 22%;*/
      z-index: 1;
    }
 
    .canvaContainer{
      justify-content: center;
      align-items: center;
      display: flex;
      z-index: 1;
    }
    .canvaContainerIzda{
      width: 50%;
      height: 80vh;
      margin-bottom: 10%;
    }
    .canvaContainerDcha{
      width: 40%;
      height: 80vh;
      overflow: hidden;
    }
    #bottomDcha{
      position: absolute;
      padding: 10%;
    }
    .crea.mvadapt{
      height: 270px;
    }
    #leftProduct .contenedorcrea{
      height: 340px;
    }

    .row .footmv{
      height: 100px;
    }
    .contenedorcrea #getPng{
      margin-left: 10px;
      margin-right: 0;
      float: left;
      width: 40%;

    }

    .contenedorcrea #getPng button.exclusive2.svgPriceBut.aplicaradapt{
      width: 100%;
     }

     .form-group.col-lg-6.neoncart{
      width: 55%;
     }
     #restart{display: none !important;}
   /*  #svgPrice2{
      right: 0 !important;
    }*/

  }

  /*Escritorios*/

  @media (max-width: 1199px){
  
  #svgPrice2 {
    right: 10px !important;
  }
}

  @media (min-width: 1200px){
    #svgPrice2.priceneon{
      top: 140px;
    }
    .form-group.col-lg-6.neoncart{
      top: 180px;
    }
    #leftProduct .contenedorcrea{
      height: 230px;
    }
    .contenedorcrea #getPng{
      top:180px;
    }

    
    .closeCanvaContainer.close-button{
    /*  right: 22%;*/
      z-index: 1;
    }
    .canvaContainer{
      justify-content: center;
      align-items: center;
      display: flex;
      z-index: 1;
    }

    .canvaContainerIzda{
      width: 38%;
      height: 80vh;
      margin-bottom: 10%;
      max-width: 900px;
      min-width: 700px;
    }
    .canvaContainerDcha{
      width: 16%;
      height: 80vh;
      overflow: hidden;
      max-width: 400px;
      min-width: 300px;
    }

    #bottomDcha{
      position: absolute;
      padding: 5%;
    }

  }

  input#size , input#anchoSVG{
    background: #353333 !important;
    border: none;
    color: #b9b3b3;
  }
    #restart{display: none ;}