:root {
    --border-darker1: rgba(0, 0, 0, 0.125);
    --border-darker2: rgba(0, 0, 0, 0.25);
    --border-darker3: rgba(0, 0, 0, 0.5);
    --border-darker4: rgba(0, 0, 0, 0.75);
    --border-darker5: rgba(0, 0, 0, 0.90);

    --border-ligther1: rgba(255, 255, 255, 0.125);
    --border-ligther2: rgba(255, 255, 255, 0.25);
    --border-ligther3: rgba(255, 255, 255, 0.5);
    --border-ligther4: rgba(255, 255, 255, 0.75);
    --border-ligther5: rgba(255, 255, 255, 0.90);
}

/* ============================================================================ */

.border-darker1 {
    border: 1px solid var(--border-darker1) !important;
}
.border-darker1:hover {
    border: 1px solid var(--border-darker2) !important;
}

.border-darker2 {
    border: 1px solid var(--border-darker2) !important;
}
.border-darker2:hover {
    border: 1px solid var(--border-darker3) !important;
}

.border-darker3 {
    border: 1px solid var(--border-darker3) !important;
}
.border-darker3:hover {
    border: 1px solid var(--border-darker4) !important;
}

.border-darker4 {
    border: 1px solid var(--border-darker4) !important;
}
.border-darker4:hover {
    border: 1px solid var(--border-darker5) !important;
}

.border-lighter1 {
    border: 1px solid var(--border-lighter1) !important;
}
.border-lighter1:hover {
    border: 1px solid var(--border-lighter2) !important;
}

.border-lighter2 {
    border: 1px solid var(--border-lighter2) !important;
}
.border-lighter2:hover {
    border: 1px solid var(--border-lighter3) !important;
}

.border-lighter3 {
    border: 1px solid var(--border-lighter3) !important;
}
.border-lighter3:hover {
    border: 1px solid var(--border-lighter4) !important;
}

.border-lighter4 {
    border: 1px solid var(--border-lighter4) !important;
}
.border-lighter4:hover {
    border: 1px solid var(--border-lighter5) !important;
}