/* Estilos para máximo 480px */
@media (max-width: 480px) 
{
    body
    {
        background-color: rgb(0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #title 
    {
        width: 80%; /* Ajuste flexible para pantallas pequeñas */
    }
    #password 
    {
        width: 77%;
    }
    #container
    {
        width: 77%;
    }

}

@media (min-width: 481px) 
{
    body
    {
        background-color: rgb(0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #title, #password, #container 
    {
        width: 450px;
    }
}

#title
{
    display: flex;
    justify-content: center;
    align-items: center;
    color: gray;
    font-size: larger;
    height: 50px;
    /* border: 3px solid #ffffff; 3px de ancho, sólido, color negro */
}

#password
{
    position: absolute;
    top: 60px;
    height: 50px;
    color: #ebdbdb;
    background-color: rgb(82, 81, 81);
    display: flex;
    justify-content: space-between; /* Espacio entre los elementos, los coloca al inicio y al final */
    align-items: center; /* Centra verticalmente los elementos */
}

.pass
{
    position: relative;
    left: 10px;
}

.icono-copiar
{
    position: relative;
    right: 10px;
    cursor: pointer;
    color: #00ff00;
}

#container
{
    position: absolute;
    top: 130px;
    height: 400px;
    background-color: rgb(82, 81, 81);
}

#container-elements0
{
    display: flex;
    justify-content: space-between; /* Espacio entre los elementos, los coloca al inicio y al final */
    align-items: center; /* Centra verticalmente los elementos */
    height: 50px;
    /* border: 3px solid #ffffff; */
}

#characterLengthName
{
    position: relative;
    left: 10px;
    color: #ebdbdb;
}

#characterLength
{
    position: relative;
    right:10px;
    color: #45e345b8;
}

#containerSlider
{
    display: flex;
    justify-content: center;
    align-items: center;
}
#slider
{
    -webkit-appearance: none; /* Quita el estilo por defecto en navegadores WebKit */
    width: 250px;
    height: 10px;
    background: linear-gradient(to right, #45e345b8 0%, #000000 0%);
    outline: none;
    border-radius: 5px;
    overflow: hidden;
    transition: background 0.15s ease-in-out;
}

#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ebebeb;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    border: 2px solid #282c34;
}

#slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ebebeb;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    border: 2px solid #282c34;
}


#c1
{
    position: relative;
    top:25px;
    left: 5px;
}

#c1L
{
    position: relative;
    top:-10px;
    left: 30px;
    width: 400px;
}

#c2
{
    position: relative;
    top:-15px;
    left: 5px;
}

#c2L
{
    position: relative;
    top:-50px;
    left: 30px;
    width: 400px;
}

#c3
{
    position: relative;
    top:-55px;
    left: 5px;
}

#c3L
{
    position: relative;
    top:-90px;
    left: 30px;
    width: 400px;
}

#c4
{
    position: relative;
    top:-95px;
    left: 5px;
}

#c4L
{
    position: relative;
    top:-130px;
    left: 30px;
    width: 400px;
}

/* Estilo para los checkboxes */
input[type="checkbox"] {
    /* Eliminamos el estilo por defecto */
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #4CAF50; /* Color del borde verde */
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    outline: none;
    background-color: #FFFFFF; /* Fondo blanco por defecto */
}

/* Estilo cuando el checkbox está seleccionado */
input[type="checkbox"]:checked {
    background-color: #4CAF50; /* Fondo verde cuando está seleccionado */
}

input[type="checkbox"]:checked::after {
    content: "\2713"; /* Carácter del checkmark */
    color: #000000; /* Color negro para el checkmark */
    font-size: 16px; /* Tamaño del checkmark */
    position: absolute;
    top: 0;
    left: 4px;
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#strengthBox
{
    width: 400px;
    background-color: #0000007e;
    height: 50px;
    position: absolute;
    top: 250px;
    left: 25px;
}

#generatePassword
{
    width: 400px;
    background-color: #00ff00;
    height: 50px;
    position: absolute;
    top: 310px;
    left: 25px;
    font-family:  sans-serif;
    font-size: larger;
    border: none;
}

#generatePassword:active
{
    background-color: rgb(82, 81, 81);
    border: 2px solid #00ff00; /* Añade un borde */
    color: #00ff00;
}

#strengthText
{
    display: flex;
    align-items: center;
    color: rgb(77, 83, 95);
    font-family:  sans-serif;
    position: absolute;
    left: 20px;
}