/* Styles for desktop view (800px and above) */
.upsell-image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.upsell-image-container a {
    flex: 0 0 calc(25% - 10px); /* 4 links in a row with some spacing */
    margin-bottom: 20px;
    text-decoration: none;
}

.upsell-image-container img {
width:100%;
    }


@media (max-width: 9000px) {
    .upsell-image-container a {
        flex: 0 0 calc(50% - 10px); /* 2 links in a row with some spacing */
    }
}

.dixbreadcrumb {
    display: flex;
    list-style: none; /* Remove bullets/numbers */
    padding: 0;
    justify-content: center;
    align-items: center;
}

    .dixbreadcrumb ol {
        display: flex;
        flex-wrap: wrap; /* Prevent items from wrapping to the next line */
        margin: 0;
        padding: 0;
        list-style-type: none;
        justify-content: center;
    }

    .dixbreadcrumb-delimiter {
        margin-left:1rem;
        margin-right:1rem;
    }

    .dixbreadcrumb a {
        text-decoration: none;
        color:#151515;
        white-space:nowrap;
    }

.dixbreadcrumb.hidden {
    display:none;
}

.material-symbols-outlined {
    font-size:32px;
}

.material-symbols-outlined.delete-button {
    color: red;
}

.material-symbols-outlined.white {
    color: white;
}

.rixButton.disabled {
    color:grey;
    cursor:default;
    background:#ccc;
}

.warning {
    background: #fad9b6; 
}
.warning p {
    margin-bottom:0px;
}

.are-you-sure {
    background: #fbb196;
    height: 16rem;
    padding: 1rem;
    margin-top: 1rem;
    display: none;
}

@media (max-width: 640px) {
    .dixbreadcrumb a {
        font-size:small;
        font-weight:600;
    }
}

.warningsection {
    padding:2rem;
}
.warningsparagraph {
    margin-top:2rem;
}
.warningscheck {
    padding: 2rem;
    font-weight:800;
    font-size: 1.3rem;
}
.warningsmain {
    background: #ffd8b2;
}
.warningscheck input[type="checkbox"] {
    margin-right: 10px; /* Adjust the value as needed */
}
.warninginnersparagraph {
    padding-left: 3rem;
    padding-right: 3rem;
}

.carousel-hidden {
    display: block; /* Ensures the <a> takes up space */
    width: 300px; /* Set to the image's width */
    height: 200px; /* Set to the image's height */
    overflow: hidden; /* Prevents any unexpected overflow */
}

.icon svg {
    fill: #fff; /* Set fill color to your desired color */
    vertical-align:top;
    width: 32px;
    height: 32px;
}
.icon .fade {

}