SP Widget CSS is not showing up for certain portals/themes

[yundlu316]

Our team built a table widget for Service Portal and defined our own CSS instead of using bootstrap classes.  Our widget looks great with the ootb HRJ theme:

Our CSS is pretty normal, but we chose to not use bootstrap classes for a bit more flexibility:

.red, .yellow, .green {
  text-align: center;
}

.red {
  background: rgba($overdue,0.5);
}

.yellow {
  background: rgba($due-today,0.5);
}

.green {
  background: rgba($due-later,0.5);
}

.empty-state-content {
  color: $danger;
  text-align: center;
  margin-bottom:0;
}

.flex {
  display: flex;
  align-items: center;
  //justify-content: space-between;
}

.table {
  display: table;
  padding:10px;
}

.table-header {
  font-weight: bold;
}

.table-row {
  display: table-row;
}

.table-row:not(:first-child):hover {
  background: $color-row-hover;
  //font-weight:bold;
}

.table-row:not(:last-child) .table-cell, .table-row .table-header {
	border-bottom: 1px solid $color-light;
}

.table-cell, .table-header {
  display: table-cell;
  padding: 10px;
}

When we switch the portal to something other than hrportal (for example, sp), all of our table styles disappear:

Any thoughts on why this happens and how to fix it?  Thanks!

[Allen Andreas]

Glad you got this resolved. This was what I said in the very first post, a week ago....lol...so yea....but anyways.

Glad you got it...

[yundlu316]

lol my bad Allen, thanks for your help!