.mi-formulario-personalizado {
    width: 500px; /* Aumenta el ancho para diferenciarlo */
    margin: 30px auto; /* Aumenta el margen */
    padding: 30px; /* Aumenta el padding */
    border: 2px solid #00aaff; /* Cambia el color del borde */
    border-radius: 10px; /* Aumenta el radio del borde */
    font-family: 'Arial', sans-serif; /* Cambia la fuente */
    background-color: #f9f9f9; /* Cambia el color de fondo */
}

.mi-formulario-personalizado .form-group {
    margin-bottom: 20px; /* Aumenta el margen */
}

.mi-formulario-personalizado label {
    display: block;
    margin-bottom: 8px; /* Aumenta el margen */
    font-weight: bold; /* Hace la etiqueta en negrita */
    color: #333; /* Cambia el color de la etiqueta */
}

.mi-formulario-personalizado input[type="text"],
.mi-formulario-personalizado input[type="email"],
.mi-formulario-personalizado textarea {
    width: 100%;
    padding: 12px; /* Aumenta el padding */
    border: 1px solid #00aaff; /* Cambia el color del borde */
    border-radius: 5px; /* Aumenta el radio del borde */
    box-sizing: border-box;
    font-size: 16px; /* Aumenta el tamaño de la fuente */
}

.mi-formulario-personalizado textarea {
    resize: vertical;
}

.mi-formulario-personalizado .submit-button {
    background-color: #00aaff; /* Cambia el color del botón */
    color: white;
    padding: 12px 20px; /* Aumenta el padding */
    border: none;
    border-radius: 5px; /* Aumenta el radio del borde */
    cursor: pointer;
    font-size: 16px; /* Aumenta el tamaño de la fuente */
}

.mi-formulario-personalizado .submit-button:hover {
    background-color: #0088cc; /* Cambia el color del botón al pasar el mouse */
}

mi-formulario-personalizado .required {
    color: #ff0000; /* Cambia el color del asterisco */
}

mi-formulario-personalizado .form-message {
    width: 100%;
    padding: 15px; /* Aumenta el padding */
    margin-bottom: 15px; /* Aumenta el margen */
    border-radius: 8px; /* Aumenta el radio del borde */
}

mi-formulario-personalizado .form-message.success {
    background-color: #e2f7e2; /* Cambia el color de fondo del mensaje de éxito */
    color: #008000; /* Cambia el color del texto del mensaje de éxito */
    border: 1px solid #008000; /* Cambia el color del borde del mensaje de éxito */
}

mi-formulario-personalizado .form-message.error {
    background-color: #fbe3e3; /* Cambia el color de fondo del mensaje de error */
    color: #cc0000; /* Cambia el color del texto del mensaje de error */
    border: 1px solid #cc0000; /* Cambia el color del borde del mensaje de error */
}