
/* COLORS */
/*http://paletton.com/#uid=c2I5z3d0p0kq8uGgbGnlmydulqjwBkK*/
.color-green-svg { stroke: #92E772 }
.color-green-svg:hover { stroke: #37B309 }
.color-green-bg.active { background-color: #54D126 }
.color-green-bg:hover { background-color: #92E772 }
.color-green-bg.active { color: white }
.color-green-bg:hover { color: white }
.color-green-0 { fill: #54D126; color: #54D126 }
.color-green-1 { fill: #92E772; color: #92E772 }
.color-green-2 { fill: #71DC49; color: #71DC49 }
.color-green-3 { fill: #37B309; color: #37B309 }
.color-green-4 { fill: #268D00; color: #268D00 }

.color-blue-svg { stroke: #60C3B2 }
.color-blue-svg:hover { stroke: #078570 }
.color-blue-bg.active { background-color: #1C9B86 }
.color-blue-bg:hover { background-color: #60C3B2 }
.color-blue-bg.active { color: white }
.color-blue-bg:hover { color: white }
.color-blue-0 { fill: #1C9B86; color: #1C9B86 }
.color-blue-1 { fill: #60C3B2; color: #60C3B2 }
.color-blue-2 { fill: #38A895; color: #38A895 }
.color-blue-3 { fill: #078570; color: #078570 }
.color-blue-4 { fill: #006957; color: #006957 }

.color-orange-svg { stroke: #FFB27E }
.color-orange-svg:hover { stroke: #D25B0B }
.color-orange-bg.active { background-color: #F57E2D }
.color-orange-bg:hover { background-color: #FFB27E }
.color-orange-bg.active { color: white }
.color-orange-bg:hover { color: white }
.color-orange-0 { fill: #F57E2D; color: #F57E2D }
.color-orange-1 { fill: #FFB27E; color: #FFB27E }
.color-orange-2 { fill: #FF9A55; color: #FF9A55 }
.color-orange-3 { fill: #D25B0B; color: #D25B0B }
.color-orange-4 { fill: #A54300; color: #A54300 }

.color-red-svg { stroke: #F87B89 }
.color-red-svg:hover { stroke: #C90A21 }
.color-red-bg.active { background-color: #EA2B41 }
.color-red-bg:hover { background-color: #F87B89 }
.color-red-bg.active { color: white }
.color-red-bg:hover { color: white }
.color-red-0 { fill: #EA2B41; color: #EA2B41 }
.color-red-1 { fill: #F87B89; color: #F87B89 }
.color-red-2 { fill: #F55265; color: #F55265 }
.color-red-3 { fill: #C90A21; color: #C90A21 }
.color-red-4 { fill: #9E0013; color: #9E0013 }

/*https://paletton.com/#uid=c4H1T5a4e0kpBoyfPvZkOrysrjVyReM*/
.color-purple-svg { stroke: #8E5BAA }
.color-purple-svg:hover { stroke: #4A116A }
.color-purple-bg.active { background-color: #5F2083 }
.color-purple-bg:hover { background-color: #8E5BAA }
.color-purple-bg.active { color: white }
.color-purple-bg:hover { color: white }
.color-purple-0 { fill: #5F2083; color: #5F2083 }
.color-purple-1 { fill: #8E5BAA; color: #8E5BAA }
.color-purple-2 { fill: #723893; color: #723893 }
.color-purple-3 { fill: #4A116A; color: #4A116A }
.color-purple-4 { fill: #34044F; color: #34044F }

.color-yellow-svg { stroke: #FFFF81 }
.color-yellow-svg:hover { stroke: #9F9F12 }
.color-yellow-bg.active { background-color: #C4C427 }
.color-yellow-bg:hover { background-color: #FFFF81 }
.color-yellow-bg.active { color: white }
.color-yellow-bg:hover { color: white }
.color-yellow-0 { fill: #C4C427; color: #C4C427 }
.color-yellow-1 { fill: #FFFF81; color: #FFFF81 }
.color-yellow-2 { fill: #DBDB4D; color: #DBDB4D }
.color-yellow-3 { fill: #9F9F12; color: #9F9F12 }
.color-yellow-4 { fill: #767600; color: #767600 }

.color-pink-svg { stroke: #CC67A0 }
.color-pink-svg:hover { stroke: #7F0E4E }
.color-pink-bg.active { background-color: #9D1F66 }
.color-pink-bg:hover { background-color: #CC67A0 }
.color-pink-bg.active { color: white }
.color-pink-bg:hover { color: white }
.color-pink-0 { fill: #9D1F66; color: #9D1F66 }
.color-pink-1 { fill: #CC67A0; color: #CC67A0 }
.color-pink-2 { fill: #B03E7E; color: #B03E7E }
.color-pink-3 { fill: #7F0E4E; color: #7F0E4E }
.color-pink-4 { fill: #5E0035; color: #5E0035 }

.color-black-svg { stroke: #DDD }
.color-black-svg:hover { stroke: #444 }
.color-black-bg.active { background-color: #444 }
.color-black-bg:hover { background-color: #DDD }
.color-black-bg.active { color: white }
.color-black-bg:hover { color: white }
.color-black-0 { fill: #444; color: #444 }
.color-black-1 { fill: #DDD; color: #DDD }
.color-black-2 { fill: #888; color: #888 }
.color-black-3 { fill: #444; color: #444 }
.color-black-4 { fill: #000; color: #000 }