/*color*/
/* BG */
/*
Cssclass = array(
"light-bluejeans",
"dark-bluejeans",
"light-bluesky",
"dark-bluesky",
"aqua",
"blue",
"cyan",
"indigo",
"purple",
"deep-purple",
"teal",
"pale-blue",
"light-blue",
"green", 
"light-green",
"pale-green",
"grass",
"orange",
"deep-orange",
"yellow",
"pale-yellow",
"pink",
"rose",
"dark-rose",
"lavender",
"dark-lavender",
"red",
"light-red",
"pale-red",
"grapefruit",
"dark-grapefruit",
"white",
"black",
"grey",
"light-grey",
"dark-grey",
"blue-grey",
"black-grey",
"brown",
"gradient-blue",
"gradient-black",
"gradient-green",
"gradient-azure",
"gradient-orange",
"gradient-red")
*/
.aqua {color:#000!important;background-color:#00ffff!important}
.blue {color:#fff!important;background-color:#2196F3!important}
.cyan {color:#000!important;background-color:#00bcd4!important}
.indigo {color:#fff!important;background-color:#3f51b5!important}
.purple {color:#fff!important;background-color:#9c27b0!important}
.deep-purple {color:#fff!important;background-color:#673ab7!important}
.teal {color:#fff!important;background-color:#009688!important}
.light-blue {color:#000!important;background-color:#87CEEB!important}
.pale-blue {color:#000!important;background-color:#ddffff!important}
.light-bluejeans{background-color: #5D9CEC!important; color:#fff!important}
.dark-bluejeans{background-color: #4A89DC!important; color:#fff!important}
.light-bluesky{background-color: #4FC1E9!important; color:#fff!important}
.dark-bluesky{background-color: #3BAFDA!important; color:#fff!important}

.green {color:#fff!important;background-color:#4CAF50!important}
.light-green {color:#000!important;background-color:#8bc34a!important}
.pale-green {color:#000!important;background-color:#ddffdd!important}
.grass {color:#000!important;background-color:#8CC152!important}

.orange {color:#000!important;background-color:#ff9800!important}
.deep-orange {color:#fff!important;background-color:#ff5722!important}
.yellow {color:#000!important;background-color:#ffeb3b!important}
.pale-yellow {color:#000!important;background-color:#ffffcc!important}

.pink {color:#fff!important;background-color:#e91e63!important}
.rose{color:#fff!important;background-color:#EC87C0!important}
.dark-rose{color:#fff!important;background-color:#D770AD!important}
.lavender {color:#fff!important;background-color:#AC92EC!important}
.dark-lavender {color:#fff!important;background-color:#967ADC!important}
.red {color:#fff!important;background-color:#f44336!important}
.light-red {color:#fff!important;background-color:#FC6E51!important}
.pale-red {color:#000!important;background-color:#ffdddd!important}
.grapefruit {color:#fff!important;background-color:#ED5565!important}
.dark-grapefruit {color:#fff!important;background-color:#DA4453!important}

.white {color:#000!important;background-color:#fff!important}
.black {color:#fff!important;background-color:#000!important}
.grey {color:#000!important;background-color:#AAB2BD!important}
.light-grey {color:#000!important;background-color:#E6E9ED!important}
.blue-grey {color:#fff!important;background-color:#607d8b!important}
.dark-grey {color:#fff!important;background-color:#656D78!important}
.black-grey {color:#fff!important;background-color:#434A54!important}
.brown {color:#fff!important;background-color:#795548!important}

/* greadient */
.gradient-blue {
  background: #4087ea;
  background: radial-gradient(ellipse at center, #533ce1 0%, #4087ea 100%);
  background-size: 250% 250%;
}
.gradient-azure {
  background: #45c0fd;
  background: radial-gradient(ellipse at center, #4091ff 0%, #45c0fd 100%);
  background-size: 250% 250%;
}
.gradient-green {
  background: #a1eb3a;
  background: radial-gradient(ellipse at center, #53A319 0%, #a1eb3a 100%);
  background-size: 250% 250%;
}
.gradient-orange {
  background: #ffb33b;
  background: radial-gradient(ellipse at center, #ff5221 0%, #ffb33b 100%);
  background-size: 250% 250%;
}
.gradient-red {
  background: #ff3b30;
  background: radial-gradient(ellipse at center, #bb0502 0%, #ff3b30 100%);
  background-size: 250% 250%;
}
.gradient-black {
  background: #787878;
  background: radial-gradient(ellipse at center, #343434 0%, #787878 100%);
  background-size: 250% 250%;
}

/*style the demo*/
#colors { text-align: center; font-size: 24px;}
#colors div {float: left; width: 20%; padding: 64px 0px;}