change marker color in carousel

[upcamogie]

I altered the markers in my hosted app and now I need to figure out what I am leaving out of my overriding CSS in the index.html that would allow the change of color.

In the maptour-config file, Instead of adding a new color marker set, I changed the red one to reference a new folder called 'bike' because I did not have luck just adding some of the extended markers available for download. I am using the non src download version since all of my changes seem to be 'cosmetic'

around line 79 in the maptour-config.js, I altered the red color
PIN_CFG: {
r: {
iconPath: 'resources/markers/bike/Bike',
// A css class that define the color to be used for the Desktop carousel and builder organize popup
cssClass: 'number-red'
},

So I figured I need to change the 'number-red' class in my index.html to a new color. I added this code to my index.html where the 'custom CSS rules' text is located. Got this idea from this geonet post https://geonet.esri.com/thread/80582 but not modifying the 'min' file as it says there

around line 203...

<style> /* CUSTOM CSS RULES */ #organizePopup .number-red { background-color: #004F7C; } </style>

My new icons show on the map but the carousal still has the red markers. What am I missing? thx

[upcamogie]

I think I got it- experimented some more and also added these lines to my index.html
.carouselScroller span.number-red:before {
background-color:#bae352;
/* background-image: url('media/bikesign.jpg'); */
}

the commented out is to see if I can use an image instead of the color (it works)
Hopefully this thread may help someone else