/* TIPOS DE FUENTES */
/********
@font-face {
    font-family: 'Acme';
    src: url('/wp-content/plugins/extend-dokan/fonts/Acme-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Bangers';
    src: url('/wp-content/plugins/extend-dokan/fonts/Bangers-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Barrio';
    src: url('/wp-content/plugins/extend-dokan/fonts/Barrio-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Alba';
    src: url('/wp-content/plugins/extend-dokan/fonts/Alba.ttf') format('truetype');
}

@font-face {
    font-family: 'Arcade';
    src: url('/wp-content/plugins/extend-dokan/fonts/Arcade.ttf') format('truetype');
}

@font-face {
    font-family: 'Artist';
    src: url('/wp-content/plugins/extend-dokan/fonts/Artist-Modern.ttf') format('truetype');
}

@font-face {
    font-family: 'Blazed';
    src: url('/wp-content/plugins/extend-dokan/fonts/Blazed.ttf') format('truetype');
}

@font-face {
    font-family: 'BrokenGlass';
    src: url('/wp-content/plugins/extend-dokan/fonts/BrokenGlass.ttf') format('truetype');
}

@font-face {
    font-family: 'Cirkus';
    src: url('/wp-content/plugins/extend-dokan/fonts/Cirkus.ttf') format('truetype');
}

@font-face {
    font-family: 'Fantasy';
    src: url('/wp-content/plugins/extend-dokan/fonts/Fantasy.ttf') format('truetype');
}

@font-face {
    font-family: 'Graffiti';
    src: url('/wp-content/plugins/extend-dokan/fonts/Graffiti.ttf') format('truetype');
}

@font-face {
    font-family: 'Monoton';
    src: url('/wp-content/plugins/extend-dokan/fonts/Monoton-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Nasalization';
    src: url('/wp-content/plugins/extend-dokan/fonts/Nasalization.otf') format('opentype');
}

@font-face {
    font-family: 'Slackey';
    src: url('/wp-content/plugins/extend-dokan/fonts/Slackey-Regular.ttf') format('truetype');
}
/******************************************************************/
input#cantidad-producto {
    max-width: 57px;
}
.container-buttons-undo-redo,
.container-buttons-undo-redo-back{
	width: max-content;
    height: max-content;
    position: absolute;
    left: 129px;
    top: 150px;
}

.container-buttons-undo-redo-back{
	display:none;
}
.border-selected {
    border: 2px solid #09c6b8;
    border-radius:7px;
}
div#button-front img,
div#button-back img{
    box-shadow: 1px 1px 10px 1px #c2c2c2;
    border-radius:7px;
    min-height: 123px;
    
}
div#button-front,
div#button-back {
    margin-bottom: 10px;
    cursor:pointer;
}

#sizeRange{
    display:none;
}

/* PRODUCT GRID CAMBIAR PRODUCTO */

.productos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap:30px;
}

#modal-shortcode-content .grid_mart_content > a {
    display: none;
}

#modal-shortcode-content .grid_mart_content {
    max-height: 31px;
}


/* ESTILOS HEADER */
form.search-form.product-search-form input[type="text"] {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border: 2px solid #09c6b8;
}
.nice-select.rh_woo_drop_cat.rhhidden.rhniceselect.hideonmobile {
    border-top: 2px solid #09c6b8;
    border-bottom: 2px solid #09c6b8;
    border-left: 0px;
}

form [type="submit"] {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border: 2px solid #09c6b8 !important;
    border-left: 0px !important;
}

header#main_header{
    position:fixed;
    z-index:9999999999;
    background:#fff;
}

.header_top_wrap.white_style {
    display: none;
}


/* BACK STAGE CANVAS */
#product-canvas-back{
    padding-top: 145px;
    justify-content: center;
}

.div-change-front-back {
    justify-content: center;
    position: absolute;
    top: 150px;
    right: 220px;
    display: flex;
    flex-direction: column;
    width: 100px;    
}

/* ESTILOS MODAL CAMBIAR PRODUCTOS*/

.categoria-link.active {
    border-right: 4px solid #09c6b8;
    color:#09c6b8;
}

p.precio-cambiar-producto{
    font-size:20px;
    font-weight:500;
}
.div-descripcion-producto-cambiar {
    font-size: 14px;
    font-weight: 700;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

.div-container-btn-cambiar {
    width: calc(399 / 1920 *100vw);
    display: flex;
    justify-content: center;
    background: #fff;
    padding-top: 11px;
    box-shadow: 1px 0px 10px 1px #c2c2c2;
    padding-bottom: 12px;
    margin-top: -23px;
    background-color: #ffffff;
    z-index: 999999999999;
    position: absolute;
    bottom:0;
}
a.btn-elegir-producto {
    width: 360px;
    display: block;
    justify-content: center;
    position: relative;
    bottom: 0;
    text-align: center;
    background: #09c6b8;
    color: #fff;
    padding: 10px;
}
.contenido-producto-a-cambiar h3 {
    margin-bottom: 10px;
    margin-top: 19px;
    font-weight: 400;
    font-size: 20px;
}

#modal-datos-producto .variation-display .color-display{
    border: 1px solid;
    background-color: #313f65;
    box-shadow: 1px 1px 10px 1px #c2c2c2;
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

#modal-datos-producto .product-attributes{
    justify-content:left !important;
    padding-left:0px !important;
    padding-top:0px;
}
div#modal-datos-producto img {
    border-radius: 0px !important;
    height: 360px;
    max-width: calc(399 / 1920 *100vw);
    width: 100%;
    max-height: calc(360 / 1920 *100vw);
}

.modal-productos ul li span{
    text-align: left;
    font-size: 16px !important;
    font-weight: 500;
    color: #545454;
}
.modal-productos h2 {
    text-align: left;
    padding-left: 15px;
    text-align: left;
    padding-left: 15px;
    font-weight: 400;
    font-size: 20px;
    color: #545454;    
}
.modal-productos ul li a{
    display: flex;
    flex-direction: column;
    
}
.contenido-producto-a-cambiar{
    height:369px;
    overflow-y:scroll;
    padding-bottom:50px;
    padding-left:15px;
}

#modal-datos-producto{
    border-top: 1px solid #c2c2c259;
    text-align:left;
    position:relative;
    top: -60px;
}
.modal-productos{
    border-top: 1px solid #c2c2c259;
    padding-top: 10px;
    padding-left: 10px;
    overflow-y:scroll;
    height:710px;
}

.modal-productos ul li a img{
    width:170px;
    border-radius:5px !important;
}
.modal-productos ul li a span{
    font-size:13px;
}

li{
    list-style:none !important;
}
.modal-categorias ul{
    text-align:left;
}
.modal-categorias ul li{
    border: 1px solid #c2c2c259;
    margin: 0px !important;
    padding: 0px 0px 0px 20px;
    align-items: center;
    display: flex;    
    height:62px;
 }
.modal-categorias ul li a{
    display:block;
    width:100%;
    color:#545454;
    height: 62px;
    display: flex;
    align-items: center;    
}    
.modal-categorias ul li a:hover{
    color:#09c6b8;
}    
.modal-productos ul{
    display:flex;
    gap:20px;
    margin-bottom:50px !important;
    flex-wrap:wrap;
}
/* Primer div - 10% del ancho */
.container-modal-cambiar-productos > div:first-child {
    flex: 0 0 15%;
}

/* Segundo div - 50% del ancho */
.container-modal-cambiar-productos > div:nth-child(2) {
    flex: 0 0 55%;
}

/* Tercer div - 40% del ancho */
.container-modal-cambiar-productos > div:last-child {
    flex: 0 0 30%;
}


.container-modal-cambiar-productos {
    display: flex;
    height:776px;
}

/* ESTILOS GRID PRODUCTOS MODAL CAMBIAR PRODUCTOS */
.modal-content-cambiar-producto .producto-item {
    flex-basis: calc(23.333% - 20px);
}
.modal-content-cambiar-producto .button_action.pt5.pb5, 
.modal-content-cambiar-producto .h3.text-clamp.text-clamp-2.font95.fontnormal.lineheight20.mb15,
.modal-content-cambiar-producto .fontnormal.mb5.rehub-btn-font.rh-flex-columns.pricevariable,
.modal-content-cambiar-producto .rh_woo_star,
.modal-content-cambiar-producto small.wcvendors_sold_by_in_loop,
.modal-content-cambiar-producto .rh-flex-columns.rh-flex-nowrap,
.modal-content-cambiar-producto .fontnormal.mb5.rehub-btn-font.rh-flex-columns,
.modal-content-cambiar-producto .abposbot.pb10.pl15.pr15.pt10.woo_grid_compact
{
    display:none;
}
.modal-content-cambiar-producto h3.text-clamp.text-clamp-2.font95.fontnormal.lineheight20.mb15 a {
    font-weight: 500;
}
.modal-content-cambiar-producto a.button.personalizar-producto{
    border-radius:30px;
    background: #09c6b8;
    margin-top:-7px;
}
.modal-content-cambiar-producto img{
    border-radius:17px !important;
}
.modal-content-cambiar-producto a.img-centered-flex.rh-flex-justify-center.rh-flex-center-align {
    pointer-events: none;
}



/* SWAL2 */
.swal2-show{
}
[class^=swal2]{
    z-index:999999999999999999 !important;
}

/* MODAL CAMBIAR PRODUCTO*/
.modal-cambiar-producto {
    position: fixed;
    z-index: 1000000000000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* Fondo semi-transparente */
}

.modal-content-cambiar-producto h2 {
    margin-bottom: 14px;
    text-align: left;
    padding-left: 16px;
    font-size: 20px;
    font-weight: 400;
    color: #545454;    
}

.modal-content-cambiar-producto {
    background-color: #fefefe;
    margin: 3% 15% 5% 15%;
    padding: 5px 0px 0px 0px;
    border: 1px solid #888;
    width:calc(1334 / 1920 *100vw);
    text-align: center;
    max-height: 780px;
    height:780px;
    border-radius:5px;
}


.close-modal-cambiar-producto {
    color: #aaa;
    float: right;
    font-size: 28px;
    z-index: 99999999999;
    position: relative;
    font-weight: bold;
    padding-right: 14px;
}

.close-modal-cambiar-producto:hover,
.close-modal-cambiar-producto:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

div#btn-modify-current-design{
    background: #09c6b8;
    color: #fff;
    border-radius: 30px;
    padding: 5px 14px 6px 22px;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
}

div#btn-modify-current-design svg{

    margin-bottom: -6px;
    margin-left: 2px;
    width: 22px;
    height: 22px;
}

/* MODAL OVERLAY */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo negro semi-transparente */
    z-index: 1000000; 
}


/* SUCCESS MODAL */

#successModal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px 20px;
    z-index: 10000000;
    width: 450px;
    box-shadow: 1px 1px 10px 1px #c2c2c273;
    border-radius: 5px;
    text-align: center;
}

img.img-check-successfull {
    padding-top: 14px;
    padding-bottom: 15px;
}

#successModal p{
    font-family: monospace;
    font-size: 26px;
    margin-bottom: 0px !important;
    font-weight:bold;
    
}

button#continueEditing,
button#goBack{
    background: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

/* MENSAJE ERROR TALLE */
span#error-mensaje {
    position: absolute;
    top: -36px;
    width: max-content;
    right: 49px;
    background: #fff;
    padding: 10px 50px;
    border-radius: 30px;
}
/* ESTILOS LOADER */

@keyframes ldio-9xuar6zcgkf {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.5,1.5);
  } 100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1,1);
  }
}
.ldio-9xuar6zcgkf div > div {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #000;
  animation: ldio-9xuar6zcgkf 2s linear infinite;
}.ldio-9xuar6zcgkf div:nth-child(1) > div {
  left: 148px;
  top: 88px;
  animation-delay: -1.75s;
}
.ldio-9xuar6zcgkf > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 160px 100px;
}.ldio-9xuar6zcgkf div:nth-child(2) > div {
  left: 130px;
  top: 130px;
  animation-delay: -1.5s;
}
.ldio-9xuar6zcgkf > div:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: 142px 142px;
}.ldio-9xuar6zcgkf div:nth-child(3) > div {
  left: 88px;
  top: 148px;
  animation-delay: -1.25s;
}
.ldio-9xuar6zcgkf > div:nth-child(3) {
  transform: rotate(90deg);
  transform-origin: 100px 160px;
}.ldio-9xuar6zcgkf div:nth-child(4) > div {
  left: 46px;
  top: 130px;
  animation-delay: -1s;
}
.ldio-9xuar6zcgkf > div:nth-child(4) {
  transform: rotate(135deg);
  transform-origin: 58px 142px;
}.ldio-9xuar6zcgkf div:nth-child(5) > div {
  left: 28px;
  top: 88px;
  animation-delay: -0.75s;
}
.ldio-9xuar6zcgkf > div:nth-child(5) {
  transform: rotate(180deg);
  transform-origin: 40px 100px;
}.ldio-9xuar6zcgkf div:nth-child(6) > div {
  left: 46px;
  top: 46px;
  animation-delay: -0.5s;
}
.ldio-9xuar6zcgkf > div:nth-child(6) {
  transform: rotate(225deg);
  transform-origin: 58px 58px;
}.ldio-9xuar6zcgkf div:nth-child(7) > div {
  left: 88px;
  top: 28px;
  animation-delay: -0.25s;
}
.ldio-9xuar6zcgkf > div:nth-child(7) {
  transform: rotate(270deg);
  transform-origin: 100px 40px;
}.ldio-9xuar6zcgkf div:nth-child(8) > div {
  left: 130px;
  top: 46px;
  animation-delay: 0s;
}
.ldio-9xuar6zcgkf > div:nth-child(8) {
  transform: rotate(315deg);
  transform-origin: 142px 58px;
}
.loadingio-spinner-spin-o2vk5wajsek {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff78;
    position: fixed;
    z-index: 99999999999;
    top: 0;
    left: 0;
    justify-content: center;
    display: grid;
    padding-top: 300px;
}
.ldio-9xuar6zcgkf {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-9xuar6zcgkf div { box-sizing: content-box; }



/* ESTILOS SELECT TIPO DE FUENTE */
div#font-selector {
    display: flex;
    flex-direction: column;
}

select#font-family {
    background: #fff;
    border: 1px solid #ccc;
}

.contenedor-precio-base,
.contenedor-ganancia 
{
    display:flex;
    align-items:center;
}
input#nuevo-precio {
    max-width: 100px;
}

/* ESTILO BOTON SAVE AND PUBLISH PRODUCT */
button#save-publish-modify-product {
    background: #09c6b8;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor:pointer;
    border-radius:30px;
}



/* ESTILOS MODAL CARGAR IMAGEN*/
.div-header-modal-cargar-imagen {
    width: 100%;
    position: relative;
    text-align: center;
}
button#close-modal-cargar-imagen,
button#close-modal-usar-imagen{
    position: absolute;
    top: 7px;
    right: 8px;
    color: #000;
    background: transparent;
    border: none;
    font-size: 23px;
    cursor:pointer;
}

.modal-cargar-imagen div h2 {
    margin-bottom: 0px;
    margin-top: 18px;
}
.modal-cargar-imagen{
    display: none; 
    position: fixed; 
    top: 200px;
    left: 40%;
    width: 480px;
    height: 378px;
    background: #fff; 
    z-index: 1000; 
    justify-content: center; 
    align-items: center; 
    z-index:999999999;
    box-shadow: 1px 1px 10px 1px #c2c2c261;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 15px;
}

.contenido-modal-vista-previa-imagen {
    padding-left: 20px;
    padding-right: 20px;
}
img#imagen-previa{
    padding-top:10px;
    padding-bottom:10px;
    max-height:500px;
}

#modal-vista-previa-imagen{
    padding-top:20px;
    padding-bottom:20px;
    display: none; 
    position: fixed; 
    top: 150px;
    left: 40%;
    width: 580px;
    max-height:600px;
    background: #fff; 
    z-index: 1000; 
    justify-content: center; 
    align-items: center; 
    z-index:999999999;
    box-shadow:1px 1px 10px 1px #c2c2c24d;
    border-radius:15px;
    flex-direction: column;
    justify-content: space-between;
}
.vista-previa-titulo h2 {
    margin: 0px;
}

/* Contenido del modal */
.contenido-modal-cargar-imagen {
    background: #fff;
    margin: 20px 20px 0 20px;
    border-radius: 5px;
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #c2c2c2;
}

/* Footer del modal */
.footer-modal {
    width: 100%;
    padding: 15px 10px 15px 26px;
    text-align: left;
    background: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.footer-modal p {
    margin-bottom:0;
}


/* BOTON ELIMINAR TEXTO */
.div-options-text {
    display: flex;
    align-items: center;
    margin-top: 17px;
    margin-bottom: 14px;
    justify-content: space-between;
}

button#delete-text-btn svg {
    margin-left: 6px;
}
#delete-text-btn {
    flex-direction: column;
    border: none;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    width: max-content;
    color: #000;
    background: transparent;
    gap: 4px;
}


/* COLOR PICKER */
.div-color-picker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
img.colorpick-eyedropper-input-trigger{
    display:none;
}

div#contenedor-editor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
	display:flex;
	height:100vh;
    background-color: rgba(242, 242, 242);

}

.sidebar-editor-bar{
    width: 110px;
    height: auto;
    display: flex;
    flex-direction: column;
    padding-top: 126px;
    background-color: #fff;
    border-right: 2px solid #d7d7d7;
}
.content-img-editor{
    width: 100vw;
    height: 100%;
    background: #fff;
    background-color: rgba(242, 242, 242);
}
.search-form-inheader.main-nav.mob-logo-enabled.white_style {
    border-bottom: 2px solid #d7d7d7;
}
.footer-bar {
    width: 100%;
    height: 80px;
    background: #fff;
    z-index: 9999999999;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 2%;
    padding-left: 2%;
    border: 2px solid #d7d7d7;
}
.contenedor-variaciones-btn-footer {
    display: flex;
    gap: 20px;
}

.mostrar-atributos select {
    background: #fff;
    border-radius: 4px;
    margin-left: 5px;
    border: 2px solid #d7d7d7;
}

.footer-bar div p{
    margin:0px;
}

.contenedor-precios {
    display: flex;
    gap: 20px;
}

/* HEADER BAR */
div#product-canvas {
    padding-top: 145px;
    display:flex;
    justify-content:center;
}
.header-bar {
    position: fixed;
    background: #fff;
    box-shadow: 1px 1px 10px 1px #c2c2c2;
    width: 100vw;
    min-height: 60px;
    z-index: 9;
    display: flex;
    padding-left: 1%;
    align-items: center;
    
}
.logo-header-bar img {
    width: 270px;
}


/* ESTILOS BOTONES SIDEBAR */

.title-panel h2 {
    font-size: 24px;
    font-family: 'Roboto';
    margin-bottom: 15px;
    font-weight: bold;
}


button#btn-add-text {
    background: #000;
    margin-top: 21px;
    border: none;
    border-radius: 4px;
    padding: 10px;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    color:#fff;
}

#open-text-editor svg,
#btn-cargar-imagen svg,
#btn-cambiar-producto svg{
    width: 25px;
    height: 25px;
    margin-bottom: 8px;
}


button#usar-imagen {
    background: #09c6b8;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 15px;
    cursor:pointer;
    color:#fff;
}

button#open-text-editor,
button#btn-cargar-imagen,
button#btn-cambiar-producto{
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-direction: column;
    margin-right: auto;
    font-size: 12px;
    color: #545454;
    align-items: center;
    background: #fff;
    height: 104px;
    justify-content: center;
    border: none;
}



/* OFF CANVAS IMAGEN DESIGN*/

button#btn-cambiar-imagen,
button#btn-quitar-imagen{
    background: #000;
    border: 0px;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    cursor:pointer;
    color:#fff;
}
.off-canvas-panel-image-design
{
    position: fixed;
    top: 0;
    left: -100%; 
    width: 350px; 
    height: 100%;
    background: white;
    transition: right 0.5s;
    padding: 15px 20px;
    transition: left 0.5s ease;
}

.off-canvas-panel-image-design.open{
    left: 130px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    height: max-content;
    margin-top: 146px;
    border-radius: 20px;
    border: 2px solid #cfcfcf;
}

/* OFF CANCVAS */
button#close-text-editor,
button#close-image-panel{
    border-radius: 30px;
    color: black;
    background: #fff;
}

.off-canvas-panel {
    position: fixed;
    top: 0;
    left: -100%; 
    width: 350px; 
    height: 100%;
    background: white;
    transition: right 0.5s;
    padding: 15px 20px;
    transition: left 0.5s ease;
    
}

/* Estilos para mostrar el panel off-canvas */
.off-canvas-panel.open {
    left: 130px;
    display: flex;
    flex-direction: column;
    z-index: 9;
    height: 570px;
    margin-top: 2px;
    margin-top: 141px;
    border-radius: 20px;
    border: 2px solid #cfcfcf;
}

button#open-text-editor:hover,button#open-text-editor:focus,button#open-text-editor:active,
button#btn-cargar-imagen:hover, button#btn-cargar-imagen:focus, button#btn-cargar-imagen:active,
button#btn-cambiar-producto:hover, button#btn-cambiar-producto:focus, button#btn-cambiar-producto:active{
    background: #c2c2c2;
}

/* Tooltip Nueco Precio */
#nuevo-precio:focus + .tooltip {
    visibility: visible;
    opacity: 1;
}

.tooltip {
    position: absolute;
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    margin-top:-80px;
    font-size:18px;
}

.tooltip::after {
    content: "ASdASD";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}


/* Atributos sidebar editor */
.product-attributes {
    display: flex;
    gap: 10px;
    padding-left: 20px;
    padding-top: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

span.attribute-tag {
    color: transparent;
    width: 30px;
    height:30px;
    border-radius: 30px;
    display: flex;
    border: 1px solid #00000054;
    cursor:pointer;
}

/* Estilos para el botón de cierre 'X' */
.close-off-canvas {
    position: absolute;
    top: 17px;
    right: 17px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}


.rh-container {
    max-width: 1687px;
    width: 100%;
}

li#menu-item-45 a {
    padding-left: 0px;
}

button#add-personalize-product {
    background: #09c6b8;
    border: none;
    border-radius: 30px;
    padding: 9px 30px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor:pointer;
}

.page-id-7582{
    overflow-y:hidden;
}


@media (max-width:1350px){
    .product-attributes {
    max-width: 600px;
}
    div#product-canvas{
        padding-top:150px !important;
        margin-left:30px;
        justify-content:left;
    } 
    #product-canvas-back{
        padding-top:150px !important;
        margin-left:30px;
        justify-content:left;
        
    }
}

@media (max-width:1100px){
    #modal-vista-previa-imagen{
        max-width: 500px;
        width: 90%;
        left: 0;
        margin-left: 20px;
    }
    .modal-categorias {
        display: none;
    }   
    .modal-content-cambiar-producto{
        margin:0px;
        width: calc(1100 / 1100 *100vw);
    }
    .container-modal-cambiar-productos > div:nth-child(2)
    {
        flex:1;
        padding-right:10px;
    }
    
    .modal-productos ul li a {
        width:100px;
    }
    .modal-productos ul {
    display: flex;
    gap: 20px;
    margin-bottom: 20px !important;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    padding-bottom: 20px;
}

#modal-datos-producto{
    visibility:hidden;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    
}

    
}



@media (max-width:1024px){
       div#product-canvas{
        padding-top:75px !important;
   
    } 
    #product-canvas-back{
        padding-top:75px !important;
        
    }
    
        .div-change-front-back{
        top:80px;
    }
    .rh-outer-wrap{
        width:auto !important;
    }
 
    .sidebar-editor-bar{
        padding-top:56px;
    }
}




.hide-select-nodes,
.hide-btn-modificar-elements{
    display:none;
}
.show-select-nodes,
.show-btn-modificar-elements{
    display:flex;
}

.buttons-mobile-modify-design {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top:25px;
}
.container-move-nodes{
    text-align:center;
    width:100%;
}

button#prevNode,
button#nextNode,
#modifyElementButton
{
    border: none;
    color: white;
    background: #09c6b8;
    padding: 9px 20px;
    border-radius: 30px;
    font-weight: bold;
}

button#moveLeft,button#moveRight,button#moveDown,button#moveUp {
    border:none;
}
button#moveLeft svg,
button#moveRight svg,
button#moveDown svg,
button#moveUp svg{
    width:30px;
}

.off-canvas-container {
    position: fixed;
    bottom: -100%; /* Inicialmente oculto */
    left: 0;
    width: 100%;
    background: white;
    transition: bottom 0.3s;
    z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
}

.off-canvas-container.active {
    bottom: 0; /* Cambia para mostrar */
}

button#closeOffCanvas {
    border: none;
    background: transparent;
}
.off-canvas-content {
    padding: 20px;
    border-top:1px solid #c2c2c2;
}
.off-canvas-header {
    padding: 10px;
    background: transparent;
    border: none;
    position: absolute;
    right: -10px;
    top: -15px;
    padding: 5px 10px;
    align-items: center;
}

button#closeOffCanvas svg {
    width: 25px;
}

.container-range-tamaño {
    text-align: center;
    width: 100%;
    display: flex;
    margin-top: 10px;
    flex-direction: column;
}
.container-range-tamaño h6 {

    margin:0px !important;
}

.arrow-back-modal{
    display:none;
}
.container-range-tamaño-imagen {
    display: none;
}

@media (max-width:800px){
   button#aplicar-tamaño {
    border: none;
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
    background: black;
    color: #fff;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
    .container-range-tamaño-imagen h6 {
            margin: 0;
        }
    .container-range-tamaño-imagen {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    button#moveDown,
    button#moveRight,
    button#moveUp,
    button#moveLeft
    {
      background: transparent;
   }
    .modal-productos ul li span{
        line-height: 20px;
        padding-top: 10px;
        text-wrap: pretty;
    }
    .div-container-btn-cambiar {
        width: 100%;
    }
    button.arrow-back {
        border: none;
        background: #fff;
        border-radius: 100%;
        padding: 10px 10px;    
        box-shadow:1px 1px 10px 1px #c2c2c2;
    }
    
    button.arrow-back svg{
        width:30px;
        height:30px;
    }
    
    .arrow-back-modal{
        display:block;
    }
    .footer-bar{
        justify-content:space-around;
    }
    .close-modal-cambiar-producto{
        z-index:0 !important;
    }
    div#modal-datos-producto img{
        max-width:100%;
        max-height:100%;
        display:flex;
        width:100%;
    }
    .arrow-back-modal {
        position: fixed;
        top: 15px;
        left: 15px;
    }
    #product-canvas-back{
        margin:0px !important;
        justify-content:center;
    }
    .off-canvas-panel-image-design.open{
        left:auto !important;
    }
    #sizeRange{
        display:block;
    }
    .border-selected{
        border-color:transparent !important;
    }
    
    div#product-canvas{
        justify-content:center !important;
        margin-left:0px !important;
    }
    
    div#contenedor-editor{
        height:900px;
    }
    .btn-sidebar-image {
        margin-right: 7%;
        margin-left: 7%;
    }
    
    div#rhNavToolWrap{
        display:none !important;
    }
    .footer-bar{
        top:0px !important;
    }
    .btn-sidebar-texto{
        border-right:1px solid #c2c2c2;
    }
    .btn-sidebar-cambiar-producto{
        border-left:1px solid #c2c2c2;
    }
    .btn-sidebar-texto,
    .btn-sidebar-image,
    .btn-sidebar-cambiar-producto{
    }
    button#open-text-editor,
    button#btn-cargar-imagen,
    button#btn-cambiar-producto{
        width: calc(200 / 800 *100vw);
        height: 92px;
    }
    .sidebar-editor-bar{
        z-index:9;   
        border-top:1px solid #c2c2c2;
        padding:0px !important;
        display: flex;
        position: fixed;
        bottom: 0px;
        width: calc(800 / 800 *100vw);
        flex-direction: row;
        background: #fff;
        justify-content: center;
        border-right: 0px;

    }

    div#button-front img, div#button-back img{
        box-shadow:none;
        border:none;
        width:40px;
        min-height:60px !important;
    }
    
    #product-canvas-back{
        padding-top:75px;
    }
.div-change-front-back {
    justify-content: space-between;
    position: absolute;
    top: 30%;
    left: 10px;
    display: flex;
    flex-direction: row;
    z-index: 2;
    gap: 10px;
    width:95%;
}    
    
.modal-cargar-imagen{
    margin-left: 20px;
    left: 0;
    width: 92%;
    top: 200px;
    border-radius: 20px;
    margin-right: 20px;
}    
    
.product-attributes{
    justify-content:center;
}    
 .konvajs-content,
 .konvajs-content canvas{
     width:400px !important;
     height:400px !important;
 }
 .off-canvas-panel.open{
    z-index: 99999999999999999999999;
    margin-top: 70px;
    width: 100%;
    height:100%;
    left: 0;
    bottom: 10px;
    position: fixed;
    padding-inline: 12%;
 }
}

header .logo-section{
	padding:25px 0 !important;
}