/**
 * =============================================================================
 * UTILITIES CSS
 * =============================================================================
 * Classes utilitárias customizadas
 * =============================================================================
 */

/* =============================================================================
   1. VARIÁVEIS CSS
   ============================================================================= */

:root {
    --util-carousel-icon-size: 30px;
    --util-carousel-icon-bg: rgba(0, 0, 0, 0.5);
    --util-truncate-width: 250px;
}

/* =============================================================================
   2. LARGURAS
   ============================================================================= */

.w-20 { width: 20% !important; }
.w-40 { width: 40% !important; }
.w-60 { width: 60% !important; }
.w-80 { width: 80% !important; }

/* =============================================================================
   3. CARROSSEL
   ============================================================================= */

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--util-carousel-icon-bg);
    border-radius: 50%;
    background-size: 100% 100%;
    width: var(--util-carousel-icon-size);
    height: var(--util-carousel-icon-size);
    box-shadow: 0 0 5px var(--util-carousel-icon-bg);
}

/* =============================================================================
   4. MODAIS
   ============================================================================= */

#modalConfirmacaoGenerico {
    z-index: 9999 !important;
}

/* =============================================================================
   5. TRUNCATE
   ============================================================================= */

.desc-truncate {
    max-width: var(--util-truncate-width);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    cursor: help;
}