.password-generator {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: #f9f9f9;
}
.password-generator h2 {
color: #0693E3!important;
}
.password-generator label {
margin-bottom: 10px;
}
.password-generator input[type="range"] {
width: 100%;
}
.password-options {
display: flex;
flex-direction: column;
margin-top: 15px;
}
.option-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
}
#custom-symbols {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 10px;
width: 150px;
}
#generated-password {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}
button.button-primary {
background-color: #0693E3;
text-transform: uppercase;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
button.button-primary:hover {
background-color: var(--wp-admin-theme-color-darker, #006799); }