/*https://material.io/resources/color*/

/*red*/
.c-r-0 { color: #ffebee }
.c-r-1 { color: #ffcdd2 }
.c-r-2 { color: #ef9a9a }
.c-r-3 { color: #e57373 }
.c-r-4 { color: #ef5350 }
.c-r-5 { color: #f44336 }
.c-r-6 { color: #e53935 }
.c-r-7 { color: #d32f2f }
.c-r-8 { color: #c62828 }
.c-r-9 { color: #b71c1c }

/*pink*/
.c-p-0 { color: #fce4ec }
.c-p-1 { color: #f8bbd0 }
.c-p-2 { color: #f48fb1 }
.c-p-3 { color: #f06292 }
.c-p-4 { color: #ec407a }
.c-p-5 { color: #e91e63 }
.c-p-6 { color: #d81b60 }
.c-p-7 { color: #c2185b }
.c-p-8 { color: #ad1457 }
.c-p-9 { color: #880e4f }

/*purple*/
.c-pp-0 { color: #f3e5f5 }
.c-pp-1 { color: #e1bee7 }
.c-pp-2 { color: #ce93d8 }
.c-pp-3 { color: #ba68c8 }
.c-pp-4 { color: #ab47bc }
.c-pp-5 { color: #9c27b0 }
.c-pp-6 { color: #8e24aa }
.c-pp-7 { color: #7b1fa2 }
.c-pp-8 { color: #6a1b9a }
.c-pp-9 { color: #4a148c }

/*deep purple*/
.c-dpp-0 { color: #ede7f6 }
.c-dpp-1 { color: #d1c4e9 }
.c-dpp-2 { color: #b39ddb }
.c-dpp-3 { color: #9575cd }
.c-dpp-4 { color: #7e57c2 }
.c-dpp-5 { color: #673ab7 }
.c-dpp-6 { color: #5e35b1 }
.c-dpp-7 { color: #512da8 }
.c-dpp-8 { color: #4527a0 }
.c-dpp-9 { color: #311b92 }

/*indigo*/
.c-i-0 { color: #e8eaf6 }
.c-i-1 { color: #c5cae9 }
.c-i-2 { color: #9fa8da }
.c-i-3 { color: #7986cb }
.c-i-4 { color: #5c6bc0 }
.c-i-5 { color: #3f51b5 }
.c-i-6 { color: #3949ab }
.c-i-7 { color: #303f9f }
.c-i-8 { color: #283593 }
.c-i-9 { color: #1a237e }

/*blue*/
.c-b-0 { color: #e3f2fd }
.c-b-1 { color: #bbdefb }
.c-b-2 { color: #90caf9 }
.c-b-3 { color: #64b5f6 }
.c-b-4 { color: #42a5f5 }
.c-b-5 { color: #2196f3 }
.c-b-6 { color: #1e88e5 }
.c-b-7 { color: #1976d2 }
.c-b-8 { color: #1565c0 }
.c-b-9 { color: #0d47a1 }


/*light blue*/
.c-lb-0 { color: #e1f5fe }
.c-lb-1 { color: #b3e5fc }
.c-lb-2 { color: #81d4fa }
.c-lb-3 { color: #4fc3f7 }
.c-lb-4 { color: #29b6f6 }
.c-lb-5 { color: #03a9f4 }
.c-lb-6 { color: #039be5 }
.c-lb-7 { color: #0288d1 }
.c-lb-8 { color: #0277bd }
.c-lb-9 { color: #01579b }

/*cyan: TODO*/

/*teal: TODO*/

/*green*/
.c-gre-0 { color: #e8f5e9 }
.c-gre-1 { color: #c8e6c9 }
.c-gre-2 { color: #a5d6a7 }
.c-gre-3 { color: #81c784 }
.c-gre-4 { color: #66bb6a }
.c-gre-5 { color: #66bb6a }
.c-gre-6 { color: #43a047 }
.c-gre-7 { color: #388e3c }
.c-gre-8 { color: #2e7d32 }
.c-gre-9 { color: #1b5e20 }





/* Background color */
/*red*/
.bc-r-0 { background-color: #ffebee }
.bc-r-1 { background-color: #ffcdd2 }
.bc-r-2 { background-color: #ef9a9a }
.bc-r-3 { background-color: #e57373 }
.bc-r-4 { background-color: #ef5350 }
.bc-r-5 { background-color: #f44336 }
.bc-r-6 { background-color: #e53935 }
.bc-r-7 { background-color: #d32f2f }
.bc-r-8 { background-color: #c62828 }
.bc-r-9 { background-color: #b71c1c }

/*pink*/
.bc-p-0 { background-color: #fce4ec }
.bc-p-1 { background-color: #f8bbd0 }
.bc-p-2 { background-color: #f48fb1 }
.bc-p-3 { background-color: #f06292 }
.bc-p-4 { background-color: #ec407a }
.bc-p-5 { background-color: #e91e63 }
.bc-p-6 { background-color: #d81b60 }
.bc-p-7 { background-color: #c2185b }
.bc-p-8 { background-color: #ad1457 }
.bc-p-9 { background-color: #880e4f }

/*purple*/
.bc-pp-0 { background-color: #f3e5f5 }
.bc-pp-1 { background-color: #e1bee7 }
.bc-pp-2 { background-color: #ce93d8 }
.bc-pp-3 { background-color: #ba68c8 }
.bc-pp-4 { background-color: #ab47bc }
.bc-pp-5 { background-color: #9c27b0 }
.bc-pp-6 { background-color: #8e24aa }
.bc-pp-7 { background-color: #7b1fa2 }
.bc-pp-8 { background-color: #6a1b9a }
.bc-pp-9 { background-color: #4a148c }

/*deep purple*/
.bc-dpp-0 { background-color: #ede7f6 }
.bc-dpp-1 { background-color: #d1c4e9 }
.bc-dpp-2 { background-color: #b39ddb }
.bc-dpp-3 { background-color: #9575cd }
.bc-dpp-4 { background-color: #7e57c2 }
.bc-dpp-5 { background-color: #673ab7 }
.bc-dpp-6 { background-color: #5e35b1 }
.bc-dpp-7 { background-color: #512da8 }
.bc-dpp-8 { background-color: #4527a0 }
.bc-dpp-9 { background-color: #311b92 }

/*indigo*/
.bc-i-0 { background-color: #e8eaf6 }
.bc-i-1 { background-color: #c5cae9 }
.bc-i-2 { background-color: #9fa8da }
.bc-i-3 { background-color: #7986cb }
.bc-i-4 { background-color: #5c6bc0 }
.bc-i-5 { background-color: #3f51b5 }
.bc-i-6 { background-color: #3949ab }
.bc-i-7 { background-color: #303f9f }
.bc-i-8 { background-color: #283593 }
.bc-i-9 { background-color: #1a237e }

/*blue*/
.bc-b-0 { background-color: #e3f2fd }
.bc-b-1 { background-color: #bbdefb }
.bc-b-2 { background-color: #90caf9 }
.bc-b-3 { background-color: #64b5f6 }
.bc-b-4 { background-color: #42a5f5 }
.bc-b-5 { background-color: #2196f3 }
.bc-b-6 { background-color: #1e88e5 }
.bc-b-7 { background-color: #1976d2 }
.bc-b-8 { background-color: #1565c0 }
.bc-b-9 { background-color: #0d47a1 }


/*light blue*/
.bc-lb-0 { background-color: #e1f5fe }
.bc-lb-1 { background-color: #b3e5fc }
.bc-lb-2 { background-color: #81d4fa }
.bc-lb-3 { background-color: #4fc3f7 }
.bc-lb-4 { background-color: #29b6f6 }
.bc-lb-6 { background-color: #03a9f4 }
.bc-lb-7 { background-color: #039be5 }
.bc-lb-8 { background-color: #0288d1 }
.bc-lb-9 { background-color: #0277bd }
.bc-lb-5 { background-color: #01579b }

/*cyan: TODO*/

/*teal: TODO*/

/*green*/
.bc-gre-0 { background-color: #e8f5e9 }
.bc-gre-1 { background-color: #c8e6c9 }
.bc-gre-2 { background-color: #a5d6a7 }
.bc-gre-3 { background-color: #81c784 }
.bc-gre-4 { background-color: #66bb6a }
.bc-gre-6 { background-color: #66bb6a }
.bc-gre-7 { background-color: #43a047 }
.bc-gre-8 { background-color: #388e3c }
.bc-gre-9 { background-color: #2e7d32 }
.bc-gre-5 { background-color: #1b5e20 }

/*gray*/
.bc-gray-0 { background-color: #fafafa }
.bc-gray-1 { background-color: #f5f5f5 }
.bc-gray-2 { background-color: #eeeeee }
.bc-gray-3 { background-color: #e0e0e0 }
.bc-gray-4 { background-color: #bdbdbd }
.bc-gray-6 { background-color: #9e9e9e }
.bc-gray-7 { background-color: #757575 }
.bc-gray-8 { background-color: #616161 }
.bc-gray-9 { background-color: #424242 }
.bc-gray-5 { background-color: #212121 }

.bc-gray-0-5 { background-color: #fafafa8f }
.bc-gray-1-5 { background-color: #f5f5f58f }
.bc-gray-2-5 { background-color: #eeeeee8f }
.bc-gray-3-5 { background-color: #e0e0e08f }
.bc-gray-4-5 { background-color: #bdbdbd8f }
.bc-gray-6-5 { background-color: #9e9e9e8f }
.bc-gray-7-5 { background-color: #7575758f }
.bc-gray-8-5 { background-color: #6161618f }
.bc-gray-9-5 { background-color: #4242428f }
.bc-gray-5-5 { background-color: #2121218f }