body, html {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover; /* Ajusta el tamaño de la imagen de fondo */
    overflow-x: hidden; /* Puede ser útil para evitar desplazamientos horizontales */
  }


  .purchase-interface {
    background: linear-gradient(120deg, #000000, #091b25, #202020);
    border-radius: 25px;
    width: 410px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.value, .indicator {
    color: rgb(255, 255, 255); /* Texto negro */
    font-family: 'Plus Jakarta Sans', sans-serif; /* Fuente personalizada */
}

/* Estilos de la tarjeta de tiempo */
.time-card {
    display: flex; /* Usar display flex */
    flex-direction: column; /* Apilar los elementos uno encima del otro */
    align-items: center; /* Centrar los elementos horizontalmente */
    width: 50px;
    height: 30px;
    background-color: #2ecf84;
}

.value {
    font-size: 2em; /* Tamaño grande para el número */
    font-weight: bold; /* Texto en negrita */
    font-size: 10px;
}

.indicator {
    font-size: 1em; /* Tamaño normal para el texto */
    font-weight: bold; /* Texto en negrita */
    font-size: 10px;
}

.progress { 
    width: 100%; 
    height: 8px; 
    background-color: #5a5a5a; 
    margin-top: 15px; 
    position: relative; 
}

.bar { 
    background-color: #2ecf84; 
    height: 22px;
}

/* Estilos para los campos de cantidad */
.amountField {
    position: relative;
}

.amountType {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px; /* Ajusta este valor según tu preferencia */
}

/* MODAL */


.iconmodal-container {
    display: flex; /* Establece flexbox para alinear los elementos en línea */
    justify-content: center; /* Centra los elementos horizontalmente */
}

.iconmodal-container .btn {
    margin-right: 10px; /* Espacio entre los botones (ajusta según sea necesario) */
    color: rgb(255, 255, 255); /* Cambia el color del texto a blanco */
}



.container {
    display: flex; /* Usamos flexbox para alinear elementos */
    align-items: center; /* Centramos verticalmente los elementos */
    text-align: center; /* Para centrar el contenido horizontalmente */
}

.copy-icon {
    cursor: pointer; /* Cambiamos el cursor para indicar que es clickeable */
    margin-left: 2px; /* Espacio a la izquierda del texto "Copied" */
    margin-top: -16px; /* Espacio a la izquierda del texto "Copied" */
}
.copied-text {
    display: none; /* Inicialmente ocultamos el texto "Copied" */
    margin-left: 5px; /* Espacio a la izquierda del texto "Copied" */
    text-align: center; /* Centrar el texto horizontalmente */
}


#direccion-1,
#direccion-2,
#direccion-3,
#direccion-4,
#direccion-5,
#direccion-6 {
    font-size: 11px;
    color: rgb(255, 255, 255);
    text-align: center; /* Para centrar el contenido horizontalmente */
}


/* Estilos para el modal */

.hidden-container {
    display: none;
}

.descripcion {
    font-size: 13px;
    color: rgb(255, 255, 255);
    text-align: center; /* Para centrar el contenido horizontalmente */
}

.qr-code {
    display: block;
    margin: 0 auto; /* Centrar imagen */
  }


  .titleone {
    display: flex;
    align-items: flex-start; /* Alinea verticalmente hacia arriba */
}

.titleoneicon {
    margin-left: 5px; /* Espacio entre el icono y el texto */
    margin-top: -3px; /* Ajuste para mover el icono hacia arriba */
}



.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Ajusta el ancho mínimo y máximo */
    gap: 10px; /* Espacio entre botones */
    padding: 10px; /* Espacio interior para los botones */
    max-height: 250px; /* Altura máxima para permitir el desplazamiento vertical */
    overflow-y: auto; /* Permitir desplazamiento vertical si hay más botones */
    overflow-x: hidden; /* Ocultar el desplazamiento horizontal */
}


.button-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: none;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.button-grid button:hover {
    background-color: #ffffff; /* Cambia a gris oscuro al pasar el cursor */
}

.button-grid img {
    height: 35px;
    margin-bottom: 5px;
    
}

.btn span.textwallet {
    font-size: 10px;

    /* Otros estilos según sea necesario */
}

.search-container {
    text-align: center; /* Centrar contenido */
    margin-bottom: 10px; /* Espacio hacia abajo */
}

#searchInput {
    display: block;
    width: 100%; /* Opcional: ancho completo del contenedor */
    margin: 0 auto; /* Centrar horizontalmente */
    padding: 8px 12px; /* Ajustar relleno */
    font-size: 14px; /* Tamaño de fuente */
    border: 1px solid #ffffff; /* Borde */
    border-radius: 50px; /* Borde redondeado */
    box-sizing: border-box; /* Incluir borde y relleno en el tamaño total */
}















.qr-code {
    position: relative;
}

#qrImage {
    display: none; /* Ocultar la imagen QR por defecto */
}

#iconImage {
    height: 17%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Ocultar la imagen del icono por defecto */
}








.modal-min {
    margin: 1rem auto; /* Centra el modal horizontalmente */
    max-height: calc(78vh - 1rem); /* Limita la altura máxima al 100% de la altura de la ventana menos un margen de 2rem */
    overflow-y: auto; /* Agrega scroll vertical si el contenido es demasiado largo */
}









.side-image {
    float: left;
    margin-right: 800px;
    width: 300px; /* Cambia el tamaño de la imagen a 300px de ancho */  
    position: absolute;


}




.tradingtext {
    font-size: 11px;
    color: white;
    text-align: center; /* Para centrar el contenido horizontalmente */
}