/* Cell 2: Left, top, bottom borders */
.group-start {
    box-shadow: 
        5px 5px 8px -6px grey inset,
        5px -5px 8px -6px grey inset !important;
}

/* Cell 3: Top, bottom borders */
.group-middle {
    box-shadow: inset 0px 5px 8px -6px grey, inset 0px -5px 8px -6px grey !important;
}

/* Cell 4: Right, top, bottom borders */
.group-end {
    box-shadow: -5px 5px 8px -6px grey inset, -5px -5px 8px -6px grey inset !important;
}

.has-triangle {
    position: relative; /* Establishes positioning context for the triangle */
    padding: 10px; /* Add padding to prevent content from overlapping the triangle */
}

.triangle-corner-upper-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 7px solid grey; /* Color of the triangle */
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid goldenrod; /* Can also be transparent */
}
.triangle-corner-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 10;
    border-bottom: 7px solid grey;
    border-right: 7px solid transparent;
    border-top: 7px solid transparent; /* Color of the triangle */
    border-left: 7px solid goldenrod; /* Can also be transparent */
}
.triangle-corner-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    z-index: 10;
    border-bottom: 7px solid grey;
    border-right: 7px solid goldenrod;
    border-top: 7px solid transparent; /* Color of the triangle */
    border-left: 7px solid transparent; /* Can also be transparent */
}
.triangle-corner-top-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    z-index: 10;
    border-bottom: 7px solid transparent;
    border-right: 7px solid goldenrod;
    border-top: 7px solid grey; /* Color of the triangle */
    border-left: 7px solid transparent; /* Can also be transparent */
}
.left-side {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    z-index: 10;

    background-color: goldenrod
}
.right-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    z-index: 10;
    background-color: goldenrod
}
.top-side {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    z-index: 10;
    background-color: goldenrod
}
.bottom-side {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2px;
    z-index: 10;
    background-color: goldenrod
}
.top-side-bleed-wide {
    position: absolute;
    top: 0;
    right: -2px;
    left: -2px;
    height: 2px;
    z-index: 10;
    background-color: goldenrod
}

.bottom-side-bleed-wide {
    position: absolute;
    bottom: 0;
    right: -2px;
    left: -2px;
    height: 2px;
    z-index: 10;
    background-color: goldenrod
}