Snippet not activated due to a syntax error

I have pasted the code below to Code Snippets to try to center my fields and buttons of the WP Forms plugin. I have added the CSS Classes respectively and followed the steps defined in the WP Forms developer documentation found in this link:

https://wpforms.com/developers/how-to-center-a-form/#:~:text=In%20the%20form%20builder%2C%20you,step%20won’t%20be%20applied.

For some strange reason I keep getting the error :

Snippet automatically deactivated due to an error on line 2:

Syntax error, unexpected token “.”, expecting end of file.

/* This styles the form elements only */
.wpforms-container.wpf-center {
    margin: 0 auto !important;
/* Adjust the width in the next 2 lines as your site needs */
    max-width: 500px !important;
    width: 500px !important;
}
 
/* This styles the submit button */
.wpf-center .wpforms-submit-container  {
    display: inline-block;
    text-align: center;
    width: 100% !important;
}
 
/* This styles all pagebreak elements */
.wpf-center .wpforms-field-pagebreak  {
    display: inline-block;
    text-align: center;
    width: 100% !important;
}
 
.wpf-center .wpforms-pagebreak-left .wpforms-page-button:before,.wpf-center .wpforms-pagebreak-left .wpforms-page-button:after {
    content: none;
} 
 
/* This styles all labels, field descriptions, form titles, and form descriptions */
.wpf-center .wpforms-title, 
.wpf-center .wpforms-description,
.wpf-center .wpforms-field-label,
.wpf-center .wpforms-field-sublabel, 
.wpf-center .wpforms-field-description {
    text-align: center;
}
 
/* Readjust the form width for smaller devices */
@media only screen and (max-width: 600px) {
 
    .wpforms-container.wpf-center {
    /* Reset the width for devices under 600px */
        max-width: unset !important;
        width: auto !important;
}
     
}

The page I need help with: [log in to see the link]