/**
 * CSS for the SimpleContactForm Module (v. 1.0.7), ProcessWire CMS
 *
 * You may create a div in which to render SCF, with class="border",
 * in order to put a border around the contact form.
 *
 * This example only has 3 input fields: Name, Email, Message.
 * If you have more, you will need to include them in the style sheet.
 *
 */

.border {
   border: 1px solid #88B7C8;
   margin: 2rem 1.25rem;
   padding: 1.25rem;
   border-radius: 1.5rem;
}

.border p {
   margin-top: 0;
   font-size: 0.9rem;
   color: #3786BC;
}

.form {
   font-size: 0.9rem;
}

.form__item--label {
   font-weight: bold;
   display: block;
}

#Inputfield_scf_Name,
#Inputfield_scf_Email {
   width: 80%;
   min-width: 210px;
   padding: 0.25rem;
   margin: 0 0 1rem 0;
   font-family: 'Tahoma', Helvetica, Arial, sans-serif;
}

#Inputfield_scf_Message {
   width: 100%;
   min-width: 210px;
   padding: 0.25rem;
   margin: 0 0 1rem 0;
   font-family: 'Tahoma', Helvetica, Arial, sans-serif;
}

.hidden,
input[type="hidden"],
.form__item--scf-website {
   /* to hide "website" form__item */
    display: none;
    visibility: hidden;
}

.button {
   background-color: #EBF5F8;
   padding: 0.25rem 1rem;
   font-size: 0.85rem;
   border-radius: 0.5rem;
   border: 1px solid #88B7C8;
   margin-bottom: 1rem;
}

.button:hover {
   -moz-box-shadow: 2px 2px 4px #888888;
   -webkit-box-shadow: 2px 2px 4px #888888;
   box-shadow: 2px 2px 4px #888888;
   border: 1px solid #37687B;
}