Change color elements of quantity selector on product pages

Example:

Code for Pipeline 5:

/* -- code start -- */
/* background color and text color */
.js-qty .js-qty__num { background-color: #333333; color:#ffffff;}

/* border around the quantity selector box */
.js-qty .js-qty__num {border-color: #333333;}

/* color for the  + and - options */
.js-qty .js-qty__adjust { color: #ffffff;}

/* hover color for the + and - options */
.js-qty .js-qty__adjust:hover {color: #cc0000;}

/* - end - */

Code for earlier theme versions:

/* -- code start -- */
// background color and text color
.js-qty input[type="text"] { background-color: #333333; color:#ffffff;}

// color for the  + and - options
.js-qty button { color: #ffffff;}

// border around the quantity selector box
.js-qty input {border-color: #333333;}

// hover color for the + and - options
.js-qty__adjust:hover {color: #cc0000;}

/* - end - */

For a bolder version of the text and selectors:

Use this version instead for Pipeline 5:

/* -- code start -- */
/* background color and text color */
.js-qty .js-qty__num { background-color: #333333; color:#ffffff; font-weight: bold;}

/* border around the quantity selector box */
.js-qty .js-qty__num {border-color: #333333;}

/* color for the  + and - options */
.js-qty .js-qty__adjust { color: #ffffff;}

/* hover color for the + and - options */
.js-qty .js-qty__adjust:hover {color: #cc0000;}

/* - end - */

Use this version instead for earlier theme versions:

/* -- code start quantity -- */
.js-qty input[type="text"] { background-color: #333333; color:#ffffff; font-weight: bold;}
.js-qty button { color: #ffffff; font-weight: bold;}
.js-qty input {border-color: #333333;}
.js-qty__adjust:hover {color: #cc0000;}
/* - end - */

hex color code references:

http://www.colorhexa.com/web-safe-colors

https://picular.co/

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code