:root {
  --elegant-color: #2e2e2e;
  --elegant-color-dark: #212121;
  --red: #f44336;
  --red-lighten-1: #ef5350;
  --red-lighten-2: #e57373;
  --red-lighten-3: #ef9a9a;
  --red-lighten-4: #ffcdd2;
  --red-lighten-5: #ffebee;
  --red-darken-1: #e53935;
  --red-darken-2: #d32f2f;
  --red-darken-3: #c62828;
  --red-darken-4: #b71c1c;
  --red-accent-1: #ff8a80;
  --red-accent-2: #ff5252;
  --red-accent-3: #ff1744;
  --red-accent-4: #d50000;
  --pink-accent-1: #ff80ab;
  --pink-accent-2: #ff4081;
  --pink-accent-3: #f50057;
  --pink-accent-4: #c51162;
  --deep-purple-lighten-5 : #ede7f6;
  --deep-purple-lighten-4 : #d1c4e9;
  --deep-purple-lighten-3 : #b39ddb;
  --deep-purple-lighten-2 : #9575cd;
  --deep-purple-lighten-1 : #7e57c2;
  --deep-purple : #673ab7;
  --blue: #2196f3;
  --blue-darken-1: #1e88e5;
  --blue-darken-2: #1976d2;
  --blue-darken-3: #1565c0;
  --blue-darken-4: #0d47a1;
  --blue-lighten-1: #42a5f5;
  --blue-lighten-2: #64b5f6;
  --blue-lighten-3: #90caf9;
  --blue-lighten-4: #bbdefb;
  --blue-lighten-5: #e3f2fd;
  --light-blue-lighten-5: #e1f5fe;
  --light-blue-lighten-4: #b3e5fc;
  --light-blue-lighten-3: #81d4fa;
  --light-blue-lighten-2: #4fc3f7;
  --light-blue-lighten-1: #29b6f6;
  --light-blue: #03a9f4;
  --cyan-accent-1: #84ffff; 
  --cyan-accent-2: #18ffff; 
  --cyan-accent-3: #00e5ff; 
  --cyan-accent-4: #00b8d4; 
  --teal-accent-1: #a7ffeb; 
  --teal-accent-2: #64ffda; 
  --teal-accent-3: #1de9b6; 
  --teal-accent-4: #00bfa5; 
  --light-green-accent-1: #ccff90;
  --light-green-accent-2: #b2ff59;
  --light-green-accent-3: #76ff03;
  --light-green-accent-4: #64dd17;
  --grey: #9e9e9e;
  --grey-lighten-1: #bdbdbd;
  --grey-lighten-2: #e0e0e0;
  --grey-lighten-3: #eeeeee;
  --grey-lighten-4: #f5f5f5;
  --grey-lighten-5: #fafafa;
  --grey-darken-1: #757575;
  --grey-darken-2: #616161;
  --grey-darken-3: #424242;
  --grey-darken-4: #212121;  
}

/* Dark Theme */
.bg-elegant-color {background-color: var(--elegant-color) !important; color: #fff !important; }
.bg-elegant-color-dark {background-color: var(--elegant-color-dark) !important; color: #fff !important; }

/* Red */
.bg-red-lighten-5 { background-color: var(--red-lighten-5) !important; }
.bg-red-lighten-4 { background-color: var(--red-lighten-4) !important; }
.bg-red-lighten-3 { background-color: var(--red-lighten-3) !important; }
.bg-red-lighten-2 { background-color: var(--red-lighten-2) !important; }
.bg-red-lighten-1 { background-color: var(--red-lighten-1) !important; color: #fff !important; }
.bg-red { background-color: var(--red) !important; color: #fff !important; }
.bg-red-darken-1 { background-color: var(--red-darken-1) !important; color: #fff !important; }
.bg-red-darken-2 { background-color: var(--red-darken-2) !important; color: #fff !important; }
.bg-red-darken-3 { background-color: var(--red-darken-3) !important; color: #fff !important; }
.bg-red-darken-4 { background-color: var(--red-darken-4) !important; color: #fff !important; }
.bg-red-accent-1 { background-color: var(--red-accent-1) !important; }
.bg-red-accent-2 { background-color: var(--red-accent-2) !important; }
.bg-red-accent-3 { background-color: var(--red-accent-3) !important; }
.bg-red-accent-4 { background-color: var(--red-accent-4) !important; color: #fff !important; }

/* Pink */
.bg-pink-accent-1 { background-color: var(--pink-accent-1) !important; }
.bg-pink-accent-2 { background-color: var(--pink-accent-2) !important; }
.bg-pink-accent-3 { background-color: var(--pink-accent-3) !important; }
.bg-pink-accent-4 { background-color: var(--pink-accent-4) !important; color: #fff !important; }

.bg-deep-purple-lighten-5 { background-color: var(--deep-purple-lighten-5) !important; }
.bg-deep-purple-lighten-4 { background-color: var(--deep-purple-lighten-4) !important; }
.bg-deep-purple-lighten-3 { background-color: var(--deep-purple-lighten-3) !important; }
.bg-deep-purple-lighten-2 { background-color: var(--deep-purple-lighten-2) !important; }
.bg-deep-purple-lighten-1 { background-color: var(--deep-purple-lighten-1) !important; color: #fff !important; }
.bg-deep-purple { background-color: var(--deep-purple) !important; }

.bg-blue { background-color: var(--blue) !important; }
.bg-blue-darken-1 { background-color: var(--blue-darken-1) !important; }
.bg-blue-darken-2 { background-color: var(--blue-darken-2) !important; }
.bg-blue-darken-3 { background-color: var(--blue-darken-3) !important; }
.bg-blue-darken-4 { background-color: var(--blue-darken-4) !important; }
.bg-blue-lighten-1 { background-color: var(--blue-lighten-1) !important; }
.bg-blue-lighten-2 { background-color: var(--blue-lighten-2) !important; }
.bg-blue-lighten-3 { background-color: var(--blue-lighten-3) !important; }
.bg-blue-lighten-4 { background-color: var(--blue-lighten-4) !important; }
.bg-blue-lighten-5 { background-color: var(--blue-lighten-5) !important; }

.bg-light-blue-lighten-5 { background-color: var(--light-blue-lighten-5) !important; }
.bg-light-blue-lighten-4 { background-color: var(--light-blue-lighten-4) !important; }
.bg-light-blue-lighten-3 { background-color: var(--light-blue-lighten-3) !important; }
.bg-light-blue-lighten-2 { background-color: var(--light-blue-lighten-2) !important; }
.bg-light-blue-lighten-1 { background-color: var(--light-blue-lighten-1) !important; }
.bg-light-blue { background-color: var(--light-blue) !important; }

.bg-cyan-accent-1 { background-color: var(--cyan-accent-1) !important; }
.bg-cyan-accent-2 { background-color: var(--cyan-accent-2) !important; }
.bg-cyan-accent-3 { background-color: var(--cyan-accent-3) !important; }
.bg-cyan-accent-4 { background-color: var(--cyan-accent-4) !important; }

.bg-teal-accent-1 { background-color: var(--teal-accent-1) !important; }
.bg-teal-accent-2 { background-color: var(--teal-accent-2) !important; }
.bg-teal-accent-3 { background-color: var(--teal-accent-3) !important; }
.bg-teal-accent-4 { background-color: var(--teal-accent-4) !important; }

.bg-light-green-accent-1 { background-color: var(--light-green-accent-1) !important; }
.bg-light-green-accent-2 { background-color: var(--light-green-accent-2) !important; }
.bg-light-green-accent-3 { background-color: var(--light-green-accent-3) !important; }
.bg-light-green-accent-4 { background-color: var(--light-green-accent-4) !important; }

.bg-grey { background-color: var(--grey) !important; }
.bg-grey-lighten-1 { background-color: var(--grey-lighten-1) !important; }
.bg-grey-lighten-2 { background-color: var(--grey-lighten-2) !important; }
.bg-grey-lighten-3 { background-color: var(--grey-lighten-3) !important; }
.bg-grey-lighten-4 { background-color: var(--grey-lighten-4) !important; }
.bg-grey-lighten-5 { background-color: var(--grey-lighten-5) !important; }
.bg-grey-darken-1 { background-color: var(--grey-darken-1) !important; }
.bg-grey-darken-2 { background-color: var(--grey-darken-2) !important; }
.bg-grey-darken-3 { background-color: var(--grey-darken-3) !important; }
.bg-grey-darken-4 { background-color: var(--grey-darken-4) !important; }