/* Container for the carousel and side buttons */
.jcarousel-wrapper {
    position: relative;
    margin: 20px auto;
    padding: 0 50px; /* Leave room for the buttons */
    background: #fff;
    border: 1px solid #ddd;

    height: auto !important; /* Overrides the 400px if it's coming from carousel.css */
    min-height: 250px;       /* Keeps it from looking tiny if empty */
    display: flex;
    flex-direction: column;
}

.jcarousel {
    height: auto !important;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Side Buttons: Full Height */
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    background: #f8f9fa;
    color: #0b5ca8;
    text-decoration: none;
    display: flex;
    align-items: center;    /* Vertical center */
    justify-content: center; /* Horizontal center */
    font-size: 2rem;
    transition: background 0.2s;
    border: none;
    z-index: 10;
}

.jcarousel-control-prev { left: 0; border-right: 1px solid #eee; }
.jcarousel-control-next { right: 0; border-left: 1px solid #eee; }

.jcarousel-control-prev:hover,
.jcarousel-control-next:hover {
    background: #e9ecef;
    color: #025AAB;
}

/* Inactive (greyed out) state */
.jcarousel-control-prev[data-jcarouselcontrol="true"].inactive,
.jcarousel-control-next[data-jcarouselcontrol="true"].inactive {
    color: #ccc;
    cursor: default;
    background: #fafafa;
}

.jcarousel ul {
    width: 20000em;    /* Give it plenty of horizontal room */
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;     /* Keep items in a single line */
}

.jcarousel li {
    flex-shrink: 0;    /* Prevent items from squishing */
    display: block;
    padding: 20px;
    box-sizing: border-box;
    float: left;       /* Fallback for older jCarousel logic */
}