Gravity form boostrap 4. Updating credit card fields

_plugin.scss

/* stylelint-disable */
.gform_fields {
  @extend .list-unstyled;
  @extend .row;

  input, select, textarea {
    @extend .form-control;
  }

  textarea {
    height: auto;
  }

}
.gfield{
  margin-bottom: 10px;
}
.validation_error {
  @extend .alert;
  @extend .alert-danger;
}

.validation_message {
  @extend .invalid-feedback;
  display: block;
}
.gfield_error{
  input[aria-invalid='true']{
    border-color: $danger;
  }
}
.gform_button {
  @extend .btn;
}

.gfield_required {
  color: $orange;
}

.gform_wrapper ul.gfield_radio li, .gform_wrapper ul.gfield_checkbox li {
  @extend .form-check;
  input{
    @extend .form-check-input;
  }
  label{
    @extend .form-check-label;
  }
}

.gform_validation_container {
  display: none;
}

.gfield_error .ginput_container {
  margin-bottom: 10px;
}
.gfield_label{
  margin-bottom: 0;
}
.hidden_label{
  label{
    display: none !important;
  }
}
.gf_page_steps{
  @extend .navbar;
  @extend .bg-light;
  border-bottom: 2px solid $orange;
  margin-bottom: 15px;
  .gf_step{
    @extend .nav-item;
  }
  .gf_step_active{
    @extend .active;
    color: $orange;
    font-weight: 700;
  }
}
.gfield_total{
  display: flex;
  label{
    font-weight: 700;
    padding-right: 10px;
  }
  .ginput_total{
    font-weight: 700;
    color: $orange;
  }
}
//Credit card field
.gform_wrapper .gform_card_icon_container {
  margin: 8px 0 6px;
  height: 32px;
  &.gform_card_icon_style1 {
    div.gform_card_icon{
      &.gform_card_icon_amex {
        background-position: -72px 0;
        &.gform_card_icon_selected{
          background-position: -72px -32px;
        }
      }
      &.gform_card_icon_discover {
        background-position: -108px 0;
        &.gform_card_icon_selected{
          background-position: -108px -32px;
        }
      }
      &.gform_card_icon_mastercard {
        background-position: -36px 0;
        &.gform_card_icon_selected{
          background-position: -36px -32px;
        }
      }
      &.gform_card_icon_visa {
        background-position: 0 0;
        &.gform_card_icon_selected{
          background-position: 0 -32px;
        }
      }
      &.gform_card_icon_inactive{
        &.gform_card_icon_amex {
          background-position: -72px -64px;
        }
        &.gform_card_icon_discover {
          background-position: -108px -64px;
        }
        &.gform_card_icon_mastercard {
          background-position: -36px -64px;
        }
        &.gform_card_icon_visa {
          background-position: 0 -64px;
        }
      }
    }
  }
}
  .gform_wrapper div.gform_card_icon {
    margin-right: 4px;
    text-indent: -9000px;
    background-image: url("../images/gf-creditcard-icons.png");
    background-repeat: no-repeat;
    width: 36px;
    height: 32px;
    float: left;
  }
.ginput_cardextras{
  @extend .row;
  .ginput_cardinfo_left{
    @extend .col-md-6;
    .ginput_card_expiration_container{
      @extend .row;
      margin-left: 0;
      margin-right: 0;
      .ginput_card_expiration_month,.ginput_card_expiration_year{
        @extend .col-5;
      }
      .ginput_card_expiration_month{
        margin-right: 15px;
      }
    }
  }
  .ginput_cardinfo_right{
    @extend .col-md-6;
  }
}

.gform_wrapper .ginput_complex .ginput_cardinfo_right span.ginput_card_security_code_icon {
  width: 32px;
  height: 23px;
  background-image: url("../images/gf-creditcard-icons.png");
  background-repeat: no-repeat;
  background-position: 0 -128px;
  position: relative;
  top: 2px;
  left: 0;
  display: -moz-inline-stack;
  display: inline-block;
}

//Date Picker
.ui-datepicker{
  background-color: #fff;
  border: 1px solid $orange;
  padding: 0 10px 10px;
  border-radius: 5px;
  .ui-datepicker-header{
    background: $orange;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    .ui-datepicker-prev{
      float: left;
    }
    .ui-datepicker-next{
      float: right;
    }
    a{
      display: inline-block;
      border: 1px solid #fff;
      border-radius: 5px;
      padding: 0 5px;
      font-size: 12px;
      margin-bottom: 10px;
      &:hover, &:focus{
        cursor: pointer;
      }
      span{
        color: #fff;
      }
    }
  }
}

//Calendar overides
.timely {
  .ai1ec-btn-primary{
    background-color: $orange;
    border-color: $orange;
  }
}
.ai1ec-agenda-widget-view .ai1ec-month, .ai1ec-agenda-view .ai1ec-month {
  background: $orange;
}
.ai1ec-agenda-view .ai1ec-event .ai1ec-event-title {
  color: $orange;
}
//Calendar Widget
.ai1ec-agenda-widget-view {
  padding-bottom: 15px;
  .ai1ec-date{
    background: none;
    .ai1ec-date-title{
      margin-left: 0;
    }
  }
  .ai1ec-event > a{
    border: 0;
  }
}