:root{
  --bs-primary:#0d6efd;
  --bs-secondary:#6c757d;
  --bs-success:#198754;
  --bs-info:#0dcaf0;
  --bs-warning:#ffc107;
  --bs-danger:#dc3545;
  --bs-light:#f8f9fa;
  --bs-dark:#212529;
}

.ep-extras-hide {display: none;}

/**********************/
/* DISPLAY block type */
/**********************/
.ep-display-selector img {
    width: 80px; /* Adjust size as needed */
    object-fit: cover;
    margin: 5px;
    border: 3px solid transparent; /* Transparent border by default */
    border-radius: 5px;
    transition: border-color 0.5s ease;
}

.ep-display-selector img.selected {
    border-color: red;             /* Change border color when selected */
}

/* DISPLAY block type - SCROLL BAR*/

/* For Firefox */
.ep-display-scroll {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #888 #F5F5F5; /* thumb and track color */
}

/* Scrollbar container */
    .ep-display-scroll::-webkit-scrollbar {
        height: 10px; /* Height of horizontal scrollbar */
        background-color: #F5F5F5; /* Color of the scrollbar container */
    }
/* Scrollbar handle */
    .ep-display-scroll::-webkit-scrollbar-thumb {
        background-color: #888; /* Color of the scrollbar handle */
        border-radius: 6px; /* Roundness of the scrollbar handle */
        border: 3px solid #F5F505; /* Creates padding around the scrollbar handle */
    }
    /* Scrollbar handle on hover */
        .ep-display-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Color of the scrollbar handle on hover */
        }

/**********************/
/* --- Restore the base .badge styles (if you also need to support BS3) --- */
.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%; /* 0.75rem / base font size */
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
/* Make badge work in Bootstrap 5 */
.badge-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

.badge-secondary {
    background-color: var(--bs-secondary);
    color: #fff;
}

.badge-success {
    background-color: var(--bs-success);
    color: #fff;
}

.badge-info {
    background-color: var(--bs-info);
    color: #fff;
}

.badge-warning {
    background-color: var(--bs-warning);
    color: #000;
}

.badge-danger {
    background-color: var(--bs-danger);
    color: #fff;
}

.badge-light {
    background-color: var(--bs-light);
    color: #000;
}

.badge-dark {
    background-color: var(--bs-dark);
    color: #fff;
}

/* EXTRAS */
/* Date Label */
.ep-extra-date-label {
    width: 25%;
    max-width: 25%;
}
.ep-extras .input-group {
    width: 100%;
}

/* Images in Block Pages */
img[data-blocktype="image"] {
    border: 2px solid lightgray;
    border-radius: 10px;
    /*
    width: 250px;
    max-width: auto;
    */


    width: 250px;
    height: 250px;
    object-fit: contain;
    padding: 5px;
}