Form elements types misbehaving in my theme looks con't

Oh ya, I forgot about an extra modification that I did, all the Multiselect form elements where configured bold, following the same above pattern, the bootstrap css is showing in my theme:

This is what the bootstrap.min.css is configured with for label

label {
  ...
  font-weight: 700;
}

This is what the participants-database.css is configured with for the following for labels:

.selectother label, .multicheckbox label, .file-delete label, .csv-export label, .radio-group label, .radio-subgroup label, .othercontrol {
  margin: 0px 12px 0px 0px;
  width: auto;
  white-space: nowrap;
  display: inline-block;
}

I added the following to my child theme:

.selectother label, .multicheckbox label, .file-delete label, .csv-export label, .radio-group label, .radio-subgroup label, .othercontrol {
  font-weight: normal;
}

I think I now have the theme that I am using more or less under control. I should provide some feedback from my learning experiences.

The theme that I am working with is called Sparkling and made by Colorlib. The below configuration is specifically tuned for the following pdb templates:

• pdb-signup-default.php
• pdb-record-default.php
• pdb-retrieve-default.php

The above templates where copied/renamed into the child theme that I created and slightly adjusted for my needs. The pdb-retrieve-default.php template was modified to make use of a set of composite fields to do its retrieval, hence similar table format to the signup and record templates.

The top <div> tag of the templates was adjusted to include a unique identifier: ‘myapp-signup’ The purpose of the unique identifier is to allow the use of pdb for a specific web application context, at the same time prepares the use of pdb form elements for different context. I suggest that you rename ‘myapp-signup’ to a name of your choice.

Templates:

<div class=”wrap <?php echo $this->wrap_class ?> myapp-signup”>

The Custom css was added to pdb Custom Plugin Stylesheet in Participants Database Settings.

.myapp-signup tr.checkbox, .myapp-signup tr.radio {
/* Table cell alignment */
display: table-row;
}

.myapp-signup tr.checkbox input[type=checkbox], .myapp-signup tr.checkbox-inline input[type=checkbox], .myapp-signup tr.radio input[type=radio], .myapp-signup tr.radio-inline input[type=radio] {
/* Vertical alignment */
position:static;
}

.myapp-signup .selectother label, .myapp-signup .multicheckbox label, .myapp-signup .file-delete label, .myapp-signup .csv-export label, .myapp-signup .radio-group label, .myapp-signup .myapp-signup .radio-subgroup label, .myapp-signup .othercontrol {
/* Remove bold from all the above form elements */
font-weight: normal;
}

.myapp-signup tr.checkbox th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.checkbox:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.date th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.date:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.dropdown th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.dropdown:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.dropdown-other th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.dropdown-other:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.multi-checkbox th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.multi-checkbox:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.multi-dropdown th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.multi-dropdown:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.multi-select-other th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.multi-select-other:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.radio th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.radio:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.select-other th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.select-other:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.text-line th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.text-line:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.text-area th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.text-area:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}
.myapp-signup tr.captcha th, td {
/* Provides some space inside within the boxes */
padding: 5px;
/* Grey */
border: 1px solid #D3D3D3;
}
.myapp-signup tr.captcha:hover td {
/* Highlight table rows on mouse over */
background-color: #f5f5f5;
}

.myapp-signup p.reqd-footer {
margin-top: 15px;
}

/* Note: this is the same color as the hover */
/* If the above hover color is changed you will have to add a hover background-color of: #f5f5f5 to the readonly elements */
.myapp-signup tr.readonly-element td, .myapp-signup tr.readonly-element input {
/* Light Grey */
background-color: #f5f5f5;
}

/* The Captha class is a read-only element? I have to undo the above tr.readonly-element changes */
.myapp-signup tr.captcha td, .myapp-signup tr.captcha input {
/* White */
background-color: white;
}