:root {
    --bg-opacity: 1;
}

.bg-opacity-10 {
    --bg-opacity: 0.1;
}

.bg-opacity-20 {
    --bg-opacity: 0.2;
}

.bg-opacity-30 {
    --bg-opacity: 0.3;
}

.bg-opacity-40 {
    --bg-opacity: 0.4;
}

.bg-opacity-50 {
    --bg-opacity: 0.5;
}

.bg-opacity-60 {
    --bg-opacity: 0.6;
}

.bg-opacity-70 {
    --bg-opacity: 0.7;
}

.bg-opacity-80 {
    --bg-opacity: 0.8;
}

.bg-opacity-90 {
    --bg-opacity: 0.9;
}

.bg-opacity-100 {
    --bg-opacity: 1;
}


/*BASE BACKGROUND*/
.base-bg.base-bg-solid {
    background: rgba(var(--base-bg-color1), var(--bg-opacity));
}

.base-bg-bg.base-bg-bg-linear {
    background: linear-gradient(var(--base-bg-angle), rgba(var(--base-bg-color1), var(--bg-opacity)) 0%, rgba(var(--base-bg-color2), var(--bg-opacity)) 100%) !important;
}

/*C1 BACKGROUND*/
.c1-bg.c1-bg-solid {
    background: rgba(var(--c1-bg-color1), var(--bg-opacity));
}

.c1-bg.c1-bg-linear {
    background: linear-gradient(var(--c1-bg-angle), rgba(var(--c1-bg-color1), var(--bg-opacity)) 0%, rgba(var(--c1-bg-color2), var(--bg-opacity)) 100%) !important;
}

/*C2 BACKGROUND*/
.c2-bg.c2-bg-solid {
    background: rgba(var(--c2-bg-color1), var(--bg-opacity));
}

.c2-bg.c2-bg-linear {
    background: linear-gradient(var(--c2-bg-angle), rgba(var(--c2-bg-color1), var(--bg-opacity)) 0%, rgba(var(--c2-bg-color2), var(--bg-opacity)) 100%) !important;
}

/*C3 BACKGROUND*/
.c3-bg.c3-bg-solid {
    background: rgba(var(--c3-bg-color1), var(--bg-opacity));
}

.c3-bg.c3-bg-linear {
    background: linear-gradient(var(--c3-bg-angle), rgba(var(--c3-bg-color1), var(--bg-opacity)) 0%, rgba(var(--c3-bg-color2), var(--bg-opacity)) 100%) !important;
}

/*C4 BACKGROUND*/
.c4-bg.c4-bg-solid {
    background: rgba(var(--c4-bg-color1), var(--bg-opacity));
}

.c4-bg.c4-bg-linear {
    background: linear-gradient(var(--c4-bg-angle), rgba(var(--c4-bg-color1), var(--bg-opacity)) 0%, rgba(var(--c4-bg-color2), var(--bg-opacity)) 100%) !important;
}

/*C5 BACKGROUND*/
.c5-bg.c5-bg-solid {
    background: rgba(var(--c5-bg-color1), var(--bg-opacity));
}

.c5-bg.c5-bg-linear {
    background: linear-gradient(var(--c5-bg-angle), rgba(var(--c5-bg-color1), var(--bg-opacity)) 0%, rgba(var(--c5-bg-color2), var(--bg-opacity)) 100%) !important;
}

/*C6 BACKGROUND*/
.c6-bg.c6-bg-solid {
    background: rgba(var(--c6-bg-color1), var(--bg-opacity));
}

.c6-bg.c6-bg-linear {
    background: linear-gradient(var(--c6-bg-angle), rgba(var(--c6-bg-color1), var(--bg-opacity)) 0%, rgba(var(--c6-bg-color2), var(--bg-opacity)) 100%) !important;
}