styles for Contact Forms 7

style.css

/* 
** Contact Form 7 Styles 
*/
.wpcf7-form input[type="text"], 
.wpcf7-form input[type="email"], 
.wpcf7-form input[type="url"], 
.wpcf7-form input[type="password"], 
.wpcf7-form input[type="search"], 
.wpcf7-form input[type="number"], 
.wpcf7-form input[type="tel"], 
.wpcf7-form textarea {
    color: #1f252b;
    width: 100%;
    padding: 12px 16px;
    border-radius: 3px;
    border: 0;
}
.wpcf7-form p {
    margin: 0 0 28px;
}
.wpcf7-text:focus, 
.wpcf7-textarea:focus {
    outline: 1px solid var(--accent);
    outline-offset: 0;
}
div.wpcf7-mail-sent-ok {
    border: 0;
    background: #5471de;
    color: #fff;
    padding: 18px;
}

.wpcf7 form .wpcf7-response-output {
	  margin: 0;
    padding: 15px;
	  font-size: 15px;
    border: none;
    border-radius: 3px;	
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    background-color: #eee9ce;
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: #cae899;
}

div.wpcf7-acceptance-missing,
div.wpcf7-validation-errors {
    border: 0;
    background: #f9443b;
    color: #fff;
    padding: 18px;
}
span.wpcf7-not-valid-tip {
    color: #f9443b;
}
/* 
** Button Styles 
*/
.wpcf7-form .button {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    color: #ffffff;
    font-family: inherit;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
}
.wpcf7-form .button:hover {
    cursor: pointer;
    background-color: var(--contrast-2);
    color: var(--base-3);
}