:root {
    --back-color: #f8f9fa;
    --red: #b43737;
    --blue: #1E3A8A;

    --back-colorhovered: #e9ecef;
    --redhovered: #a52a2a;
    --bluehovered: #1a2e6e;

    --green: #28a745;
    --greenhovered: #218838;

    --gray: #6c757d;
    --grayhovered: #5a6268;

}

/* RED */

.bg-red {
    background-color: var(--red);
    color: #fff;
}

.border-red {
    border-color: var(--red);
}

.text-red {
    color: var(--red);
}

i.text-red:hover {
    color: var(--redhovered);
    transition: color .15s ease-in-out;
}

.btn.bg-red:hover {
    background-color: var(--redhovered);
    color: #fff;
}

.border-left-accent {
    border-left: 8px solid var(--red);
}

/* BLUE */

.bg-blue {
    background-color: var(--blue);
    color: #fff;
}

.border-blue {
    border-color: var(--blue);
}

.text-blue {
    color: var(--blue);
}

.btn.bg-blue:hover {
    background-color: var(--bluehovered);
    color: #fff;
}

/* ORANGE */

.bg-orange {
    background-color: var(--orange);
    color: #fff;
}

.border-orange {
    border-color: var(--orange);
}

.text-orange {
    color: var(--orange);
}

.btn.bg-orange:hover {
    background-color: var(--orangehovered);
    color: #fff;
}

/* GREEN */

.bg-green {
    background-color: var(--green);
    color: #fff;
}

.border-green {
    border-color: var(--green);
}

.text-green {
    color: var(--green);
}

.btn.bg-green:hover {
    background-color: var(--greenhovered);
    color: #fff;
}

/* GRAY */

.bg-gray {
    background-color: var(--gray);
    color: #fff;
}

.border-gray {
    border-color: var(--gray);
}

.text-gray {
    color: var(--gray);
}

.btn.bg-gray:hover {
    background-color: var(--grayhovered);
    color: #fff;
}

.btn.border-gray:hover {
    border-color: var(--grayhovered);
}

/* EXCEL */

.bg-excel {
    background-color: #217346;
    color: #fff;
}

.btn.bg-excel:hover {
    background-color: #1a5d3f;
    color: #fff;
}