/* Add arrows to the left container (pointing right) */
.chip-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: var(--chip-left-pointer);
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.chip-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: var(--chip-right-pointer);
    border-color: transparent white transparent transparent;
}
 

.circle-left::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 70px;
    border-radius: 50%;
    z-index: 1;
}

.circle-right::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    left: -16px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 70px;
    border-radius: 50%;
    z-index: 1;
}

.chip-red::before {
    border-color: transparent transparent transparent var(--date-background-color);
}
@media screen and (max-width: 600px) {

    .chip-left::before {
        left: 60px;
        border: medium solid white;
        border-width: var(--chip-right-pointer);
        border-color: transparent white transparent transparent;
    }
    .chip-right::before {
        left: 60px;
        border: medium solid white;
        border-width: var(--chip-right-pointer);
        border-color: transparent white transparent transparent;
    }
    /* turn the chip red  */
    .chip-red::before {
        border-color: transparent var(--date-background-color) transparent transparent;
    }
    /* Fix the circle for containers on the right side */
    .circle-left::after,
    .circle-right::after {
        left:15px;
    }
}