Hello how can I edit/override the default theme settings for the contact form 7?

here is the CSS 

/* Contact Form 7 container and background color */
.wpcf7 {
    background-color: transparent;
}
/* Contact Form 7 field label */
.wpcf7 .wpcf7-form-control-wrap > label {
    font-family: "Roboto", sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: block !important;
    margin-bottom: 20px !important; /* Adjust the gap between label and field */
}
/* Contact Form 7 input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 input[type="password"],
.wpcf7 input[type="tel"] {
background-color: #EDEDED;
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: normal;
    border-radius: 33px;
    border: 2px solid #EDEDED; /* Reduced thickness */
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
}
/* Contact Form 7 input fields hover state */
.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 textarea:hover,
.wpcf7 input[type="password"]:hover,
.wpcf7 input[type="tel"]:hover {
    background-color: #EDEDED; /* Slightly darker color on hover */
    color: #000000;
}
/* Contact Form 7 input fields error state */
.wpcf7-not-valid {
    border-color: #E04562;
}
/* Contact Form 7 submit button */
.wpcf7 input[type="submit"] {
    background-color: #17A8E3; /* Default background color */
    color: #FFFFFF; /* Default text color */
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: 33px;
    height: 35px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
/* Contact Form 7 submit button hover state */
.wpcf7 input[type="submit"]:hover {
    background-color: #008FCA; /* Hover background color */
    color: #FFFFFF; /* Hover text color */
}
/* Spacing between form fields */
.wpcf7 .wpcf7-form-control-wrap {
    margin-bottom: 2rem;
}
/* Add asterisk to required fields */
.wpcf7 .wpcf7-required {
    color: #E04562;
    margin-left: 4px;
}

The gap between the label and the field doesnt apply

/* Contact Form 7 field label */
.wpcf7 .wpcf7-form-control-wrap > label {    font-family: "Roboto", sans-serif !important;    font-size: 12px !important;    font-weight: bold !important;    color: #ffffff !important;    display: block !important;    margin-bottom: 20px !important; /* Adjust the gap between label and field */
}

And the button is in the theme style but I want it to be like the CSS

/* Contact Form 7 submit button */
.wpcf7 input[type="submit"] {    background-color: #17A8E3; /* Default background color */    color: #FFFFFF; /* Default text color */    font-family: "Roboto", sans-serif;    font-size: 14px;    font-weight: 500;    border-radius: 33px;    height: 35px;    border: none;    cursor: pointer;    transition: all 0.3s ease-in-out;
}
/* Contact Form 7 submit button hover state */
.wpcf7 input[type="submit"]:hover {    background-color: #008FCA; /* Hover background color */    color: #FFFFFF; /* Hover text color */
}

Hello, 

the labels now work but the button and the asterisk dont 

ASTERISK

body .wpcf7 .wpcf7-form-control-wrap > label.wpcf7-required:after {
    content: "*";
    color: #E04562;
    margin-left: 4px;
}

BUTTON

body .wpcf7 input[type="submit"] {
    background-color: #17A8E3;
    color: #FFFFFF;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: 33px;
    height: 35px;
    width:  15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Contact Form 7 submit button hover state */
body .wpcf7 input[type="submit"]:hover {
    background-color: #008FCA;
    color: #FFFFFF;
}

Hello,

the button text isnt centered, its like the text position is fixed and the button just cuts it out 

/* Contact Form 7 submit button */
body .wpcf7 input[type="submit"] {
    background-color: #17A8E3 !important;
    color: #FFFFFF !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    border-radius: 33px !important;
    height: 40px !important;
    width: 120px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    line-height: 40px !important; /* updated to match the height value */
    margin-top: 10px !important;
    margin-right: 30px !important;
    padding-right: 20px !important; /* added 20px right padding */
}

/* Contact Form 7 submit button hover state */
body .wpcf7 input[type="submit"]:hover {
    background-color: #008FCA !important;
    color: #FFFFFF !important;
}

Thank you, 

It works now!