body{
    /* background-color: var(--body);
    background: var(--body-gradient) ; */
    background-image: linear-gradient(to bottom,#9a1b73 , #54baa7);
    height: 100vh;
    font-family: 'Ubuntu Sans', sans-serif;
}
.cont{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
    height: 100vh;
}
.general{
    background-color: #ffffff00;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    border-radius: 20px;
    
}

.form_div {
    background-color: #ffffff; /* Fondo blanco para el formulario */
    /* Establece un ancho del 50% del contenedor principal */
    max-width: 600px; /* Ancho máximo del formulario */                     
    width: 50%; /* El formulario ocupa el 50% del ancho del contenedor */ /* Establece un ancho máximo para el formulario */
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); /* Sombra alrededor del formulario */
}

.form{
    width: 100%;
    height: 100%;
    display: flex; /* Equivalente a flex en Tailwind */
    flex-direction: column; /* Equivalente a flex-col en Tailwind */
    align-items: center; /* Equivalente a items-center en Tailwind */
    justify-content: center;
    background-position: left; /* Equivalente a bg-left en Tailwind */
}
.email{
    margin-bottom: 10px;
    width: 60%; /* Equivalente a w-11/12 en Tailwind */
    padding-left: 0.5rem; /* Equivalente a px-2 en Tailwind */
    padding-right: 0.5rem; /* Equivalente a px-2 en Tailwind */
    border-width: 1px; /* Equivalente a border en Tailwind */
    border-style: solid; /* Equivalente a border en Tailwind */
    border-color: #7e22ce; /* Cambiar el color según el color border-purple-600 de Tailwind */
    border-radius: 0.5rem; /* Equivalente a rounded-lg en Tailwind */
}

.imagen{
    background-image: url('/img/loginimg.jpg'); /* Ruta a tu imagen de fondo */
    background-size: cover; /* La imagen de fondo cubrirá todo el contenedor */
    background-repeat: no-repeat;
    width: 50%;
    height: 100%; /* La imagen ocupa el 50% del ancho del contenedor */
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

.hidden{
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
@media (max-width: 1060px) {
    #imagen {
        display: none;
    }

    .form_div {
        width: 100%;
    }
    
}

@media (max-width:768px){
    .general{
        width: 80%;
    }
    .email{
        width: 80%;
    }
}