CSS - I found the attribute I need to edit in F12 inspect elements, but I cant change it in the code

Question

I am using https://element.eleme.io/#/en-US/component/radio and I am trying to change the font-size.

Below is my radio button. I want to change the font fize from the default 14px to 20px.

<el-radio-group class="radio-buttons" v-model="choiceOfDelivery" @change="getSelectedItem">
  <el-radio-button label="Delivery" name="delivery_choice">
    <br>
    &emsp;&emsp;&emsp;&emsp;{{ $t("Delivery") }}&emsp;&emsp;&emsp;&emsp;
    <br><br>
  </el-radio-button>
  <el-radio-button label="Pick up" name="delivery_choice">
    <br>
    &emsp;&emsp;&emsp;&emsp;{{ $t("Pick Up") }}&emsp;&emsp;&emsp;&emsp;
    <br><br>
  </el-radio-button>
</el-radio-group>

Below is the section that can change the font size while inspecting elements in Google Chrome.

.el-radio-button__inner {
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    background: #FFF;
    border: 1px solid #DCDFE6;
    font-weight: 500;
    border-left: 0;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    padding: 12px 20px;
    font-size: 20px;
    border-radius: 0;
}

However, when I do the same thing in my code, and refresh the page, the css style did not take place.

<style lang="scss" scoped>
.el-radio-button__inner {
  font-size: 20px !important!
}
</style>

I am guessing if I am referring to the class correctly, but I couldn't find any examples specifically related to element UI.

Any suggestions? Thank you!