/* Background colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-light { background-color: rgba(var(--color-primary-rgb), 0.08) !important; }

.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-dark { background-color: var(--color-secondary-dark) !important; }
.bg-secondary-light { background-color: rgba(var(--color-secondary-rgb), 0.08) !important; }

.bg-color3 { background-color: var(--color-color3) !important; }
.bg-color3-dark { background-color: var(--color-color3-dark) !important; }
.bg-color3-light { background-color: rgba(var(--color-color3-rgb), 0.08) !important; }

.bg-color4 { background-color: var(--color-color4) !important; }
.bg-color4-dark { background-color: var(--color-color4-dark) !important; }
.bg-color4-light { background-color: rgba(var(--color-color4-rgb), 0.08) !important; }

.bg-color5 { background-color: var(--color-color5) !important; }
.bg-color5-dark { background-color: var(--color-color5-dark) !important; }
.bg-color5-light { background-color: rgba(var(--color-color5-rgb), 0.08) !important; }

.bg-color6 { background-color: var(--color-color6) !important; }
.bg-color6-dark { background-color: var(--color-color6-dark) !important; }
.bg-color6-light { background-color: rgba(var(--color-color6-rgb), 0.08) !important; }

.bg-light { background-color: var(--color-light) !important; }
.bg-light-dark { background-color: var(--color-light-dark) !important; }

.bg-white { background-color: var(--color-white) !important; }
.bg-white-light { background-color: rgba(var(--color-white-rgb), 0.08) !important; }

.bg-dark { background-color: var(--color-dark) !important; }
.bg-dark-dark { background-color: var(--color-dark-dark) !important; }
.bg-dark-light { background-color: rgba(var(--color-dark-rgb), 0.08) !important; }


html[data-theme="dark"] .bg-dark.cover-slide { background-color: var(--color-light) !important; }
html[data-theme="dark"] .bg-dark.columnbox { background-color: var(--color-light) !important; }
html[data-theme="dark"] .bg-dark.columnbox-section { background-color: var(--color-light) !important; }
html[data-theme="dark"] .bg-dark.in-cover { background-color: var(--color-light) !important; }
html[data-theme="dark"] .with-bg-image.bg-dark { background-color: var(--color-light) !important; }

/* Text Colors */
.c-primary { color: var(--color-primary) !important; }
.c-primary-dark { color: var(--color-primary-dark) !important; }
.c-primary-light { color: rgba(var(--color-primary-rgb), 0.1) !important; }

.c-secondary { color: var(--color-secondary) !important; }
.c-secondary-dark { color: var(--color-secondary-dark) !important; }
.c-secondary-light { color: rgba(var(--color-secondary-rgb), 0.1) !important; }

.c-color3 { color: var(--color-color3) !important; }
.c-color3-dark { color: var(--color-color3-dark) !important; }
.c-color3-light { color: rgba(var(--color-color3-rgb), 0.1) !important; }

.c-color4 { color: var(--color-color4) !important; }
.c-color4-dark { color: var(--color-color4-dark) !important; }
.c-color4-light { color: rgba(var(--color-color4-rgb), 0.1) !important; }

.c-color5 { color: var(--color-color5) !important; }
.c-color5-dark { color: var(--color-color5-dark) !important; }
.c-color5-light { color: rgba(var(--color-color5-rgb), 0.1) !important; }

.c-color6 { color: var(--color-color6) !important; }
.c-color6-dark { color: var(--color-color6-dark) !important; }
.c-color6-light { color: rgba(var(--color-color6-rgb), 0.1) !important; }

.c-light { color: var(--color-light) !important; }
.c-light-dark { color: var(--color-light-dark) !important; }

.c-white { color: var(--color-white) !important; }
.c-dark { color: var(--color-dark) !important; }
.c-dark-dark { color: var(--color-dark-dark) !important; }

/* Border Colors */
.border-primary { border-color: var(--color-primary) !important; }
.border-primary-dark { border-color: var(--color-primary-dark) !important; }
.border-primary-light { border-color: rgba(var(--color-primary-rgb), 0.08) !important; }

.border-secondary { border-color: var(--color-secondary) !important; }
.border-secondary-dark { border-color: var(--color-secondary-dark) !important; }
.border-secondary-light { border-color: rgba(var(--color-secondary-rgb), 0.08) !important; }

.border-color3 { border-color: var(--color-color3) !important; }
.border-color3-dark { border-color: var(--color-color3-dark) !important; }
.border-color3-light { border-color: rgba(var(--color-color3-rgb), 0.08) !important; }

.border-color4 { border-color: var(--color-color4) !important; }
.border-color4-dark { border-color: var(--color-color4-dark) !important; }
.border-color4-light { border-color: rgba(var(--color-color4-rgb), 0.08) !important; }

.border-color5 { border-color: var(--color-color5) !important; }
.border-color5-dark { border-color: var(--color-color5-dark) !important; }
.border-color5-light { border-color: rgba(var(--color-color5-rgb), 0.08) !important; }

.border-color6 { border-color: var(--color-color6) !important; }
.border-color6-dark { border-color: var(--color-color6-dark) !important; }
.border-color6-light { border-color: rgba(var(--color-color6-rgb), 0.08) !important; }

.border-light { border-color: var(--color-light) !important; }
.border-light-dark { border-color: var(--color-light-dark) !important; }

.border-white { border-color: var(--color-white) !important; }
.border-white-light { border-color: rgba(var(--color-white-rgb), 0.08) !important; }

.border-dark { border-color: var(--color-dark) !important; }
.border-dark-dark { border-color: var(--color-dark-dark) !important; }
.border-dark-light { border-color: rgba(var(--color-dark-rgb), 0.08) !important; }

/* Fill Colors */
.fill-primary { fill: var(--color-primary); }
.fill-primary-dark { fill: var(--color-primary-dark); }
.fill-primary-light { fill: rgba(var(--color-primary-rgb), 0.1); }

.fill-secondary { fill: var(--color-secondary); }
.fill-secondary-dark { fill: var(--color-secondary-dark); }
.fill-secondary-light { fill: rgba(var(--color-secondary-rgb), 0.1); }

.fill-color3 { fill: var(--color-color3); }
.fill-color3-dark { fill: var(--color-color3-dark); }
.fill-color3-light { fill: rgba(var(--color-color3-rgb), 0.1); }

.fill-color4 { fill: var(--color-color4); }
.fill-color4-dark { fill: var(--color-color4-dark); }
.fill-color4-light { fill: rgba(var(--color-color4-rgb), 0.1); }

.fill-color5 { fill: var(--color-color5); }
.fill-color5-dark { fill: var(--color-color5-dark); }
.fill-color5-light { fill: rgba(var(--color-color5-rgb), 0.1); }

.fill-color6 { fill: var(--color-color6); }
.fill-color6-dark { fill: var(--color-color6-dark); }
.fill-color6-light { fill: rgba(var(--color-color6-rgb), 0.1); }

.fill-light { fill: var(--color-light); }
.fill-light-dark { fill: var(--color-light-dark); }

.fill-white { fill: var(--color-white); }

.fill-dark { fill: var(--color-dark); }
.fill-dark-dark { fill: var(--color-dark-dark); }
.fill-dark-light { fill: rgba(var(--color-dark-rgb), 0.1); }


/* Base button */
.button {
  background-color: var(--color-primary);
}

.button:hover {
  background-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5);
}

/* PRIMARY */
.button.primary {
  background-color: var(--color-primary);
}

.button.primary:hover {
  background-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5);
}

.button.primary-dark {
  background-color: var(--color-primary-dark);
}

.button.primary-dark:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 0 30px rgba(var(--color-primary-dark-rgb), 0.5);
}

.button.primary-light {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-white) !important;
}

.button.primary-light:hover {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
}

/* SECONDARY */
.button.secondary {
  background-color: var(--color-secondary);
}

.button.secondary:hover {
  background-color: var(--color-secondary);
  box-shadow: 0 0 30px rgba(var(--color-secondary-rgb), 0.5);
}

.button.secondary-dark {
  background-color: var(--color-secondary-dark);
}

.button.secondary-dark:hover {
  background-color: var(--color-secondary-dark);
  box-shadow: 0 0 30px rgba(var(--color-secondary-dark-rgb), 0.5);
}

.button.secondary-light {
  background-color: rgba(var(--color-secondary-rgb), 0.1);
  color: var(--color-secondary) !important;
}

.button.secondary-light:hover {
  background-color: var(--color-secondary);
  color: var(--color-white) !important;
  box-shadow: 0 0 30px rgba(var(--color-secondary-rgb), 0.5);
}

/* COLOR3 */
.button.color3 {
  background-color: var(--color-color3);
}

.button.color3:hover {
  background-color: var(--color-color3);
  box-shadow: 0 0 30px rgba(var(--color-color3-rgb), 0.5);
}

.button.color3-dark {
  background-color: var(--color-color3-dark);
}

.button.color3-dark:hover {
  background-color: var(--color-color3-dark);
  box-shadow: 0 0 30px rgba(var(--color-color3-dark-rgb), 0.5);
}

.button.color3-light {
  background-color: rgba(var(--color-color3-rgb), 0.1);
  color: var(--color-color3) !important;
}

.button.color3-light:hover {
  background-color: var(--color-color3);
  color: var(--color-white) !important;
  box-shadow: 0 0 30px rgba(var(--color-color3-rgb), 0.5);
}

/* COLOR4 */
.button.color4 {
  background-color: var(--color-color4);
}

.button.color4:hover {
  background-color: var(--color-color4);
  box-shadow: 0 0 30px rgba(var(--color-color4-rgb), 0.5);
}

.button.color4-dark {
  background-color: var(--color-color4-dark);
}

.button.color4-dark:hover {
  background-color: var(--color-color4-dark);
  box-shadow: 0 0 30px rgba(var(--color-color4-dark-rgb), 0.5);
}

.button.color4-light {
  background-color: rgba(var(--color-color4-rgb), 0.1);
  color: var(--color-color4) !important;
}

.button.color4-light:hover {
  background-color: var(--color-color4);
  color: var(--color-white) !important;
  box-shadow: 0 0 30px rgba(var(--color-color4-rgb), 0.5);
}

/* COLOR5 */
.button.color5 {
  background-color: var(--color-color5);
}

.button.color5:hover {
  background-color: var(--color-color5);
  box-shadow: 0 0 30px rgba(var(--color-color5-rgb), 0.5);
}

.button.color5-dark {
  background-color: var(--color-color5-dark);
}

.button.color5-dark:hover {
  background-color: var(--color-color5-dark);
  box-shadow: 0 0 30px rgba(var(--color-color5-dark-rgb), 0.5);
}

.button.color5-light {
  background-color: rgba(var(--color-color5-rgb), 0.1);
  color: var(--color-color5) !important;
}

/* COLOR6 */
.button.color6 {
  background-color: var(--color-color6);
}

.button.color6:hover {
  background-color: var(--color-color6);
  box-shadow: 0 0 30px rgba(var(--color-color6-rgb), 0.5);
}

.button.color6-dark {
  background-color: var(--color-color6-dark);
}

.button.color6-dark:hover {
  background-color: var(--color-color6-dark);
  box-shadow: 0 0 30px rgba(var(--color-color6-dark-rgb), 0.5);
}

.button.color6-light {
  background-color: rgba(var(--color-color6-rgb), 0.1);
  color: var(--color-color6) !important;
}

/* LIGHT */
.button.light {
  background-color: var(--color-light);
  color: var(--color-primary) !important;
}

.button.light:hover {
  background-color: rgba(var(--color-light-rgb), 0.8);
  color: var(--color-primary) !important;
}

/* WHITE */
.button.white {
  background-color: var(--color-white);
  color: var(--color-dark) !important;
}

.button.white:hover {
  background-color: rgba(var(--color-white-rgb), 0.8);
  color: var(--color-dark) !important;
  box-shadow: 0 0 30px rgba(var(--color-white-rgb), 0.5);
}

/* DARK */
.button.dark {
  background-color: var(--color-dark);
}

.button.dark:hover {
  background-color: rgba(var(--color-dark-rgb), 0.8);
}

.button.dark-dark {
  background-color: var(--color-dark-dark);
}

.button.dark-dark:hover {
  background-color: var(--color-dark-dark);
}

.button.dark-light {
  background-color: rgba(var(--color-dark-rgb), 0.1);
  color: var(--color-dark) !important;
}

.button.dark-light:hover {
  background-color: rgba(var(--color-dark-rgb), 0.8);
  color: var(--color-dark) !important;
  box-shadow: 0 0 30px rgba(var(--color-dark-rgb), 0.5);
}

/* HOLLOW */
.button.hollow {
  border-width: 2px !important;
  border-color: rgba(var(--color-dark-rgb), 0.1) !important;
  color: var(--color-dark);
  box-shadow: none;
}

.button.hollow:hover {
  border-color: var(--color-dark) !important;
  color: var(--color-dark);
  box-shadow: none;
}

.button.hollow i {
  color: var(--color-dark);
}

.button.text {
  color: var(--color-dark);
}

/* Shade Colors */
.shade-primary {
  background: linear-gradient(
    to right,
    rgba(var(--color-primary-rgb), 1) 10%,
    rgba(var(--color-primary-rgb), 0.8) 40%,
    rgba(var(--color-primary-rgb), 0) 100%
  ) !important;
}

.shade-primary-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-primary-dark-rgb), 1) 10%,
    rgba(var(--color-primary-dark-rgb), 0.8) 40%,
    rgba(var(--color-primary-dark-rgb), 0) 100%
  ) !important;
}

.shade-secondary {
  background: linear-gradient(
    to right,
    rgba(var(--color-secondary-rgb), 1) 10%,
    rgba(var(--color-secondary-rgb), 0.8) 40%,
    rgba(var(--color-secondary-rgb), 0) 100%
  ) !important;
}

.shade-secondary-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-secondary-dark-rgb), 1) 10%,
    rgba(var(--color-secondary-dark-rgb), 0.8) 40%,
    rgba(var(--color-secondary-dark-rgb), 0) 100%
  ) !important;
}

.shade-color3 {
  background: linear-gradient(
    to right,
    rgba(var(--color-color3-rgb), 1) 10%,
    rgba(var(--color-color3-rgb), 0.8) 40%,
    rgba(var(--color-color3-rgb), 0) 100%
  ) !important;
}

.shade-color3-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-color3-dark-rgb), 1) 10%,
    rgba(var(--color-color3-dark-rgb), 0.8) 40%,
    rgba(var(--color-color3-dark-rgb), 0) 100%
  ) !important;
}

.shade-color4 {
  background: linear-gradient(
    to right,
    rgba(var(--color-color4-rgb), 1) 10%,
    rgba(var(--color-color4-rgb), 0.8) 40%,
    rgba(var(--color-color4-rgb), 0) 100%
  ) !important;
}

.shade-color4-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-color4-dark-rgb), 1) 10%,
    rgba(var(--color-color4-dark-rgb), 0.8) 40%,
    rgba(var(--color-color4-dark-rgb), 0) 100%
  ) !important;
}

.shade-color5 {
  background: linear-gradient(
    to right,
    rgba(var(--color-color5-rgb), 1) 10%,
    rgba(var(--color-color5-rgb), 0.8) 40%,
    rgba(var(--color-color5-rgb), 0) 100%
  ) !important;
}

.shade-color5-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-color5-dark-rgb), 1) 10%,
    rgba(var(--color-color5-dark-rgb), 0.8) 40%,
    rgba(var(--color-color5-dark-rgb), 0) 100%
  ) !important;
}

.shade-color6 {
  background: linear-gradient(
    to right,
    rgba(var(--color-color6-rgb), 1) 10%,
    rgba(var(--color-color6-rgb), 0.8) 40%,
    rgba(var(--color-color6-rgb), 0) 100%
  ) !important;
}

.shade-color6-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-color6-dark-rgb), 1) 10%,
    rgba(var(--color-color6-dark-rgb), 0.8) 40%,
    rgba(var(--color-color6-dark-rgb), 0) 100%
  ) !important;
}

.shade-light {
  background: linear-gradient(
    to right,
    rgba(var(--color-light-rgb), 1) 10%,
    rgba(var(--color-light-rgb), 0.8) 40%,
    rgba(var(--color-light-rgb), 0) 100%
  ) !important;
}

.shade-white {
  background: linear-gradient(
    to right,
    rgba(var(--color-white-rgb), 1) 10%,
    rgba(var(--color-white-rgb), 0.8) 40%,
    rgba(var(--color-white-rgb), 0) 100%
  ) !important;
}

.shade-dark {
  background: linear-gradient(
    to right,
    rgba(var(--color-dark-rgb), 1) 10%,
    rgba(var(--color-dark-rgb), 0.8) 40%,
    rgba(var(--color-dark-rgb), 0) 100%
  ) !important;
}
html[data-theme="dark"] .shade-dark {
	background: linear-gradient(
    to right,
    rgba(var(--color-white-rgb), 1) 10%,
    rgba(var(--color-white-rgb), 0.8) 40%,
    rgba(var(--color-white-rgb), 0) 100%
  ) !important;
}