/* START - Contact form 7 formatting to make it look like DIVI form */
 
/*General contact form 7 styling and border*/
.wpcf7
{
 background-color: #ffffff00;           /*Form background colour. Example: White smoke colour #F0F0F0 for none. Can also remove this line for none */
 border: 1px solid #ffffff00;           /*Form border colour. Example: Dim grey colour #666666 or blue like text #0c71c3 or #ffffff00 for none. Can also remove this line for none*/
 border-radius: 5px;                    /*How rounded the edges of the form border is, 3px to 50px is nice */
 color: #0c71c3 !important;        /*Font colour of form entry field label i.e. text above the entry box. Example: Navy Blue #0c71c3 */
 font-size: 16px;                       /*Font size of form entry field label i.e. text above the entry box. Example: 16px*/
}
/*Adding margins around contact form 7 content and the border*/
.wpcf7-form {
 margin-left: 25px;                     /*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want left margin around box */
 margin-right: 25px;                    /*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want right margin around box */
 margin-top: 25px;                      /*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want top margin around box */
 margin-bottom: 25px;                   /*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want bottom margin around box */
}
/*Text area font size and colour*/
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;      /*Text box background colour, best to use something that contrast the text colour. Example: Very light shade of grey #eee */
border: none !important;           /*Recommended leave none, but can have a border i.e.: border: 1px solid #A9A9A9; */
width: 100% !important;                 /*Width of the text box in the allocated portion, recommended 100% */
-moz-border-radius: 0 !important;  
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 16px;                        /*Text font size, example 16px inside the text area. */
color: #696969 !important;              /*Text colour, example: Dim grey #696969 or dark grey #A9A9A9 try with red #666*/
padding: 16px !important;               /*Text padding inside the text area, suggested maximum the same as the font size */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;                 /* Can leave this! box-sizing: border-box; on an element, padding and border are included in the width and height:*/
}
/*Submit button font size and colour*/
.wpcf7-submit {
color: #f0853b! important;         /*Text colour of submit button, example: Light orange/brown #f0853b or red #FF0000*/
margin: 8px auto 0;                /*Margin below the last form entry box, small amount is good */
margin-bottom: 8px;                /*Margin below the submit button box */
cursor: pointer;                   /*Pointer is the hand, default is the arrow, best to use the pointer (hand) as it shows interaction */
font-size: 20px;                   /*Submit button font size, Slightly larger than the text size is good i.e. 20px */
font-weight: 500;                  /*Submit button weight i.e. normal, semi-bold, super bold etc. 500 is good starting point*/
-moz-border-radius: 3px;      /*CSS - How rounded the edges of the submit button are, 3px to 50px is nice */
-webkit-border-radius: 3px;        /*CSS - How rounded the edges of the submit button are, 3px to 50px is nice */
border-radius: 3px;                /*How rounded the edges of the submit button are, 3px to 50px is nice */
padding: 6px 20px;                 /*Padding around the submit button */
line-height: 1.7em;                /*Submit button line height text */
background: transparent;      /*Submit button background colour, can use transparent but yellowgreen etc is also good depending upon font colour */
border: 2px solid;                 /*Thickness of the border around the submit button */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;              /*Time for the button hover effect to change */
}
/*Submit button styling*/
.wpcf7-submit:hover { 
background-color: yellow;          /* Submit button hover background color, can be: yellow or green or a shade of green etc, such as (#90EE90) or whatever you want*/
border-color:#f0853b;              /* Submit button hover border color, set to above colour for no border, #f0853b to keep the light orange/brown*/
padding: 6px 20px !important;      /* Padding around the submit button hover */
}
/*Drop down menu styling*/
.wpcf7 .wpcf7-form .wpcf7-select {
background-color: #eeeeee !important;   /*Drop down menu background colour of submit button, example: Very light shade of grey #eeeeee or red #FF0000 or transparent*/
border: 1px solid #A9A9A9 !important;   /*Drop down menu border, for a small border add something like: 1px solid #A9A9A9 if no border wanted: border: none !important;*/
border-radius: 0 !important;            /*How rounded the edges of the drop down menu are, square edges look good so: border-radius: 0 !important; */
box-sizing: border-box;                      /*Can leave this! box-sizing: border-box; on an element, padding and border are included in the width and height:*/
color: #999999 !important;                   /*Text colour of submit button, example: medium light shade of grey #999999*/
font-size: 16px;                             /*Text font size, example 16px inside the drop down box. */
padding: 16px !important;                    /*Text padding inside drop-down box, suggested maximum the same as the font size */
width: 100% !important;                      /*Width of the text box in the allocated portion, recommended 100% */
box-shadow: none !important;            /*Box shadow, can look dated, example: box-shadow: 5px 10px #888888;!important;  else for none use: box-shadow: none !important; */
}
 
/*Validation customisation - Not needed but can make some nice changes. The above code will make the form look like a DIVI contact form*/
 
/* div.wpcf7-response-output, div.wpcf7-validation-errors { display: none !important; }  /*Can remove the bottom validation error, see below for stlying*/
span.wpcf7-not-valid-tip { display: none; }  /*Remove the "required field" from under each missin box, not needed is already red background and red border! */
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: red; background-color: rgba(153,0,0,0.3) !important; } /*Style the inside of the box with missing fields */
span.wpcf7-form-control-wrap {display:block !important;} /*keeps forms from jumping on render*/
span .wpcf7-not-valid {color: #666 !important; border: 2px solid #ff0000 !important;} /*Add a border and colour to required fields missing information */
 
/*Start - If you need validation tip */ /*short example:/*span.wpcf7-not-valid-tip {color: #666 !important; border: 0px solid #FF0000;}*/ /*
body span.wpcf7-not-valid-tip {
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}
/*End - If you need validation tip */
 
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #D8000C;                          /*Validation response text colour */
    background-color: #FFBABA;               /*Validation response background colour */
    border: 0;                               /*Validation response border size */
    padding: 10px;                           /*Validation response padding */
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;                          /*Validation text colour  */
    background-color: #DFF2BF;               /*Validation response background colour  */
    border: 0;                               /*Validation response border size n */
    padding: 10px;                           /*Validation response padding */
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;               /*Validation response customisation */
    margin-right: 16px;                      /*Validation response customisation */
    vertical-align: middle;                  /*Validation response customisation */
}
div.wpcf7-mail-sent-ok:before {
    content: "\f147";                        /*Validation response customisation */
}
div.wpcf7-validation-errors:before {
    content: "\f158";                        /*Validation response customisation */
}
 
 
 
/* FINISH - Contact form 7 formatting to make it look like DIVI form */