/* Compiled from cssd_alerts.less — keep in sync. */

div.cssd_alerts label.required::before {
    content: "*";
    color: red;
    position: relative;
    padding-right: 5px;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
}

/* Dashboard — alerts list table */
.cssd-alerts-table {
    table-layout: fixed;
}
.cssd-alerts-table td,
.cssd-alerts-table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dashboard — drag-and-drop reorder */
.cssd-alerts-drag-handle {
    user-select: none;
}
.cssd-alerts-drag-handle i {
    opacity: 0.6;
}
.cssd-alerts-drag-handle:hover i {
    opacity: 1;
}

tr.ui-sortable-helper {
    display: table;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cssd-alerts-sortable-placeholder {
    background-color: var(--bs-tertiary-bg, #f1f3f5);
    outline: 1px dashed var(--bs-border-color, #ced4da);
}

#alert-banner .alert-carousel,
#alert-popup .alert-carousel {
    position: relative;
}

#alert-banner .carousel-item,
#alert-popup .carousel-item {
    transition: transform 0.6s ease-in-out;
}

/* Carousel control buttons — make sure <button>s look just like the <a> defaults */
#alert-banner .carousel-control-prev,
#alert-banner .carousel-control-next,
#alert-popup  .carousel-control-prev,
#alert-popup  .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    text-align: center;
    background: transparent;
    opacity: 0.8;
    z-index: 6;
    transition: opacity 0.15s ease;
}
#alert-banner .carousel-control-prev:hover,
#alert-banner .carousel-control-next:hover,
#alert-popup  .carousel-control-prev:hover,
#alert-popup  .carousel-control-next:hover {
    opacity: 1;
}

#alert-banner .carousel-control-prev-icon,
#alert-banner .carousel-control-next-icon,
#alert-popup  .carousel-control-prev-icon,
#alert-popup  .carousel-control-next-icon {
    width: 24px;
    height: 24px;
}

#alert-banner .carousel-indicators,
#alert-popup .carousel-indicators {
    margin: 0 auto;
    bottom: 2px;
    z-index: 5;
}
#alert-banner .carousel-indicators li,
#alert-popup .carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.6);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 3px;
}
#alert-banner .carousel-indicators li.active,
#alert-popup .carousel-indicators li.active {
    background-color: #fff;
}

#alert-banner .carousel-control-prev,
#alert-banner .carousel-control-next {
    width: 40px;
}
#alert-banner .carousel-control-prev { left: 0; }
#alert-banner .carousel-control-next { right: 0; }

#alert-popup .carousel-control-prev,
#alert-popup .carousel-control-next {
    width: 30px;
}
#alert-popup .carousel-control-prev { left: 0; }
#alert-popup .carousel-control-next { right: 0; }

/* Close button sits on top of the next-arrow in the overlap zone */
#alert-banner > button.close,
#alert-popup  > button.close {
    z-index: 10;
}

/* Two-layer carousel padding:
   - *-multi: always when there are 2+ slides — bottom space for indicator dots.
   - *-with-arrows: additionally when arrow controls are rendered — side + top space.
   The *-with-arrows class is only added when $alertsShowArrows is true.
   High-specificity selectors beat the theme's
   `div.ccm-page div.alert div.boxChange { padding: 0 15px }` rule. */
#alert-banner.alert-banner-multi .carousel-item .boxChange,
#alert-popup.alert-popup-multi .carousel-item .boxChange {
    padding-bottom: 30px;
}
#alert-banner.alert-banner-with-arrows .carousel-item .boxChange {
    padding-top: 10px;
    padding-left: 60px;
    padding-right: 60px;
}
#alert-popup.alert-popup-with-arrows .carousel-item .boxChange {
    padding-top: 10px;
    padding-left: 50px;
    padding-right: 50px;
}