After furthering exploring this issue and relying on the configuration of the Address hub provided in the Address Data Management ArcGIS Solution, I was able to determine that the CSS style to overwrite the Row Class is in the site Footer HTML. I copied and pasted the <style>...</style> configuration from the Address hub Footer HTML section and pasted it into my own Hub site's Footer HTML and the Row CSS Class was successfully updated. Below is the <style>...</style> that I used.
<style>
/* Theme Color Variable */
:root {
--theme-color-dark:#292929;
}
.btn {
text-decoration: none !important;
}
.steps-wrapper a {
text-decoration: none !important
}
* Button and Text Styling */
.primary-color {
color: var(--theme-color-dark);
}
.primary-fill {
fill: var(--theme-color-dark);
}
/* Steps 1234 */
.steps-wrapper li::before {
color: var(--theme-color-dark);
border-color: var(--theme-color-dark);
}
.steps-wrapper li::after {
background-color: var(--theme-color-dark);
}
.steps-wrapper {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap; }
.steps-wrapper li {
counter-increment: pledge-counter;
position: relative;
flex-basis: 25%;
width: 25%;
margin-top: 40px;
padding-top: 40px; }
@media screen and (max-width: 800px) {
.steps-wrapper li {
flex-basis: 50%;
width: 50%; }
.steps-wrapper li::before {
transform: translate(-50%, -50%) !important; } }
@media screen and (max-width: 600px) {
.steps-wrapper li {
flex-basis: 100%;
width: 100%; } }
.steps-wrapper li::before {
box-sizing: border-box;
content: counter(pledge-counter);
display: inline-block;
line-height: 1;
text-align: center;
border-radius: 50%;
padding: 8px;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
z-index: 4;
font-size: 40px;
left: 50%;
height: 56px;
width: 56px;
border: 1px solid;
background-color: #fff; }
.steps-wrapper li::after {
content: '';
display: block;
border-radius: 0;
height: 10px;
width: 100%;
position: absolute;
top: 0;
transform: translateY(-50%);
z-index: 2; }
.steps-wrapper li:first-of-type::after {
border-radius: 10px 0 0 10px; }
.steps-wrapper li:last-of-type::after {
border-radius: 0 10px 10px 0; }
.step-content {
box-sizing: border-box;
margin-top: -18px;
padding: 0 24px;
text-align: center;
}
a.svg-links:hover {
filter:brightness(85%);
}
a.svg-links:focus {
outline:#ffffff solid 2px;
}
/* Edge to Edge picture and text */
.edgetoedge-imgdiv {
padding:0px;
margin-top:-15px;
margin-left:-15px;
}
.edgetoedge-img {
object-fit:cover;
width: calc(100% + 30px);
max-height:80vh
}
.edgetoedge-text {
padding-left: 5%;
}
/* Row CSS Classes: Overrides site Theme colors for links in Category Cards, Summary Statistic Cards, and Contact Cards.
Overrides <hr> color in Summary Statistic Cards, and email SVG in Contact Cards.
Allows Cards to be used on rows with dark theme backgrounds that are other wise the same color as the Theme's Links. */
.row-a-white hr.ss-title-spacer {
border-color: #ffffff
}
.row-a-white .category-panel .category-card, .row-a-white .backtotop, .row-a-white .contact-card, .row-a-white .contact-card .svgstore-image {
color: #ffffff;
text-decoration: none;
fill: #ffffff;
}
.row-a-white .summary-statistic-card a:link, .row-a-white .category-panel .category-card:link, .row-a-white .backtotop:link, .row-a-white .contact-card a:link {
color: #ffffff;
}
.row-a-white .summary-statistic-card a:visited, .row-a-white .category-panel .category-card:visited, .row-a-white .backtotop:visited, .row-a-white .contact-card a:visited {
color: #ffffff;
}
.row-a-white .summary-statistic-card a:hover, .row-a-white .category-panel .category-card:hover, .row-a-white .backtotop:hover, .row-a-white .contact-card a:hover {
color: #d0cacd;
outline-color: #ffffff;
}
.row-a-white .summary-statistic-card a:focus, .row-a-white .category-panel .category-card:focus, .row-a-white .backtotop:focus, .row-a-white .contact-card a:focus {
color: #d0cacd;
outline-color:#ffffff;
}
.row-a-white .category-panel .category-card:focus-visible {
color: #d0cacd;
outline: #ffffff solid 2px;
}
.row-a-white .category-panel a:focus {
outline: #ffffff solid 2px;
}
.row-a-white .summary-statistic-card a:active, .row-a-white .category-panel .category-card:active, .row-a-white .backtotop:active, .row-a-white .contact-card a:active {
color: #d0cacd;
}
/* Manual Statistic Summary Text Card */
@media (max-width: 412px){
.mobile-stats {font-size:15.4vw}
}
@media (min-width: 413px) and (max-width: 512px){
.mobile-stats {font-size:15.7vw}
}
@media (min-width: 513px) and (max-width: 767px){
.mobile-stats {font-size:80px}
}
@media (min-width: 768px) and (max-width: 991px){
.mobile-stats {font-size:36px}
}
@media (min-width: 992px) and (max-width: 1199px){
.mobile-stats {font-size:48px}
}
@media (min-width: 1200px){
.mobile-stats {font-size:60px}
}
/* HTML Bookmarks
--- fix for html bookmark focus on sites with fixed headers---
*/
:target::before {
height: 120px;
margin-top: -120px;
visibility: hidden;
content: '';
position:relative;
display:block;
z-index:-1;
}
.navbar-contents a {
position: relative;
z-index:0;
}
/*end fix*/
/* Footer */
.contact-info-alignment {
text-align: center;
}
.logo-title-alignment {
margin-left : auto;
margin-right: auto;
}
@media (min-width: 768px) {
.contact-info-alignment {
text-align: right;
}
.logo-title-alignment {
margin-left : initial;
margin-right: initial
}
}
/*accessibility*/
*:focus-visible:not(a.ember-view, .svg-links) {
border-style: solid;
border-width:3px;
text-decoration:none;
}
/* Honors user device preference for no animation */
@media (prefers-reduced-motion: no-preference) {
html,
body {
scroll-behavior: smooth; /*note - smooth scrolling not supported in Safari */
}
/*Bookmarked content subtle highlight */
:target {
animation: focused-anchor 6s ease-in-out 1;
text-shadow: none;
}
@keyframes focused-anchor {
0% {
text-shadow: none;
}
25% {
text-shadow: 0 0 1px black, 0 0 25px yellow, 0 0 10px yellow
}
50% {
text-shadow: none;
}
75% {
text-shadow: 0 0 1px black, 0 0 25px yellow, 0 0 10px yellow
}
100% {
text-shadow: none
}
}
}
p {
font-size:16px;
}
.backtotop {
position:relative;
float:right;
font-size:12px
}
mark {background-color:#fff3ab}
</style>
