/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .error-message {
    color: red;
    font-size: 0.9em;
    margin-left: 5px;
}

label.error {
    color: red;
    font-size: 0.9em;
}
.my_btn, .my_btn:hover{
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-03b520d) !important;
    border:none !important;
}

form#custom-form, form#contactBookForm {
    min-width: 300px;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}



#formMessage {
    margin-top: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
}

#formMessage.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#formMessage.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#custom-form input, #contactBookForm input,
#custom-form select, #contactBookForm select,
#custom-form textarea, #contactBookForm textarea {
    border: 1px solid black;
    border-radius: 4px; /* Optional: Add rounded corners */
    padding: 8px; /* Optional: Add padding for better appearance */
    width: 100%; /* Optional: Make fields responsive */
    box-sizing: border-box; /* Ensure padding doesn't affect field width */
}

/* Optional: Add focus effect for better user experience */
#custom-form input:focus,#contactBookForm input:focus,
#custom-form select:focus,#contactBookForm input:focus,
#custom-form textarea:focus,#contactBookForm input:focus {
    outline: none;
    border-color: #460e00; /* Change border color on focus (blue) */
    box-shadow: 0 0 5px #460e00; /* Add shadow effect */
}