Elements with .form-control inside a .form-outline div do no

Expected behavior

That form fields would have outlines around them.

Actual behavior

Form fields do not have outlines.

Resources (screenshots, code snippets etc.)

This is with NodeJS 16 using the Pug templating engine. I tried the javascript given here, but no luck.

login.pug:

extends layout

block content
    main
        div(id='intro' class='bg-image shadow-2-strong' style='height: 100vh;')
            div(class='mask d-flex align-items-center h-100' style='background-color: rgba(0, 0, 0, 0.08);')
                div(class='container')
                    div(class='row justify-content-center')
                        div(class='col-xl-5 col-md-8')
                            form(class='bg-white rounded-5 shadow-5-strong p-5')
                                div(class='form-outline mb-4')
                                    input(type='email' id='loginUserID' class='form-control')
                                    label(class='form-label' for='loginUserID') User ID
                                div(class='form-outline mb-4')
                                    input(type='password' id='loginPassword' class='form-control')
                                    label(class='form-label' for='loginPassword') Password
                                div(class='row mb-4')
                                    div(class='col d-flex justify-content-center')
                                        div(class='form-check')
                                            input(class='form-check-input' type='checkbox' value='' id='loginRememberMe' checked)
                                            label(class='form-check-label' for='lognRememberMe') Remember me
                                    div(class='col text-center')
                                        a(href='/login/forgot-password') Forgot password?
                                button(class='btn btn-primary btn-block' type='sumbit') Sign in

layout.pug:

doctype html
html
  head
    title= title
    script(src='/external/jquery/jquery.min.js')
    script(src='/external/jquery-ui/jquery-ui.min.js')
    script(src='/external/bootstrap/js/bootstrap.min.js')
    script(src='/external/mdb-ui-kit/js/mdb.min.js')
    link(rel='stylesheet', href='/external/bootstrap/css/bootstrap.css')
    link(rel='stylesheet', href='/external/mdb-ui-kit/css/mdb.min.css')
    link(rel='stylesheet', href='/external/fontawesome/css/all.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    header
      nav(id='sidebarMenu' class='collapse d-lg-block sidebar collapse bg-white')
        div(class='position-sticky')
          div(class='list-group list-group-flush mx-3 mt-4')
            a(class='list-group-item list-group-item-action py-2 waves-effect waves-light active' href='#')
              i(class='fas fa-tachometer-alt fa-fw me-3')
              span Main Dashboard
            a(class='list-group-item list-group-item-action py-2 waves-effect waves-light' href='#')
              i(class='fas fa-toggle-on fa-fw me-3')
              span Devices
      nav(id='main-navbar' class='navbar navbar-expand-lg navbar-light bg-white fixed-top')
        div(class='container-fluid')
          button(class='navbar-toggler' type='button' data-mdb-toggle='collapse' data-mdb-target='#sidebarMenu')
            i(class='fas fa-bars')
          a(class='navbar-brand' href='#')
            i(class='fas fa-robot')
          form(class='d-none d-md-flex input-group w-auto my-auto')
            input(autocomplete='off' type='search' class='form-control rounded' placeholder='Search' style='min-width: 225px')
            span(class='input-group-text border-0')
              i(class='fas fa-search')
          ul(class='navbar-nav ms-auto d-flex flex-row')
            li(class='nav-item dropdown')
              a(class='nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow' href='#' id='navbarDropdownMenuLink' role='button')
                i(class='fas fa-bell text-primary')
    block content
  script.
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.form-outline').forEach((formOutline) => {
        new mdb.Input(formOutline).init();
      });
      document.querySelectorAll('.form-outline').forEach((formOutline) => {
        new mdb.Input(formOutline).update();
      });
    });