.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.btn.btn-tiny {

    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: 0.375rem;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}

hr.expand-0 {
    margin: 0;
}

hr.expand-1 {
    margin: 0;
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
}

hr.expand-2 {
    margin: 0;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

hr.expand-3 {
    margin: 0;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
}

hr.expand-4 {
    margin: 0;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
}

hr.expand-5 {
    margin: 0;
    margin-left: -4rem !important;
    margin-right: -4rem !important;
}

.diagonal-cell {
    width: 100px;
    height: 50px;
    padding: 0;
    margin: 0;
}

.diagonal-cell .dc-line {
    width: 112px;
    height: 47px;
    border-bottom: 1px solid red;
    transform: translateY(-20px) translateX(5px) rotate(27deg);
    position: absolute;
    z-index: -1;
}

.diagonal-cell .dc-main {
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.diagonal-cell .dc-bottom {
    position: absolute;
    bottom: 1px;
    left: 1px;
}

.diagonal-cell .dc-top {
    position: absolute;
    top: 1px;
    right: 1px;
}