Customize styles of Contact Form 7

In my last project I had the need of customize the messages success and fail of Contact Form 7 and after using this usel post of Isabel Castillo (Style The Response Messages For Contact Form 7) I could make it it.
Now, I want to share some changes that I made to the Isabel’s solution like a class for the email send error and another one for the inputs hints.

/**
 * @author: Wilhelm
 * WP iconset https://developer.wordpress.org/resource/dashicons/#analytics
 */

/* Input hint */
.wpcf7-form .wpcf7-not-valid-tip {
  padding-left: 2rem;
}

/* Error */
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
    color: #d8000c;
    background-color: #ffbaba;
    border: 0;
    padding: 10px;
}

/* Success */
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #dff2bf;
    border: 0;
    padding: 10px;
}

/* icons properties */
div.wpcf7-mail-sent-ok:before,
div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;
    margin-right: 16px;
    vertical-align: middle;
}

/* WP Dashicon check icon for success */
div.wpcf7-mail-sent-ok:before {
    content: '\f147';
}

/* WP Dashicon no icon for errors */
div.wpcf7-validation-errors:before {
    content: '\f158';
}

To load the Dashicons of WordPress icons in our theme I don’t use the Isabel’s solution of load the icons using the function wp_enqueue_style( ‘dashicons’ ), instead I load the Dashicons like I explained in my previous post How to use dashicons in your wordpress theme

<?php 
/* function.php */
//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );