.bg_eclipse_004 {
    --ct-bg-opacity:1;
    background-color:rgba(160, 203, 217,var(--ct-bg-opacity))!important;
}

.display-7 {
    font-size: 2rem;
}
.display-8 {
    font-size: 1.5rem;
}

/* INPUT PROMPT */
.auto-expand {
    min-height: 38px; /* altura inicial */
    max-height: 200px; /* limite para evitar crescer infinito */
    line-height: 1.5;
}


/* HOVE/ACTIVE - Escolha de Agentes */
.agents_avatar:hover {
    background-color: #464f5b;
    color: #aab8c5;
    cursor: pointer;
}
.agents_avatar.active {
    background-color: #464f5b;
    color: #aab8c5;
    cursor: pointer;
}

/* HOVE/ACTIVE - Escolha de Conversas */
.listChats.active, .listChats:hover, .listAgents.active, .listAgents:hover {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-light-rgb), var(--ct-bg-opacity)) !important;  
    color: rgba(var(--ct-body-color-rgb), var(--ct-text-opacity)) !important;     
}

/* CHAT */
.typing-dots span {
    animation: blink 1.4s infinite;
    font-weight: bold;
    font-size: 18px;
    margin-right: 2px;
}
.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes blink {
    0%   { opacity: 0.2; }
    20%  { opacity: 1; }
    100% { opacity: 0.2; }
}


/* DATATABLES */
table.fixTableResponsive tbody td {
    vertical-align: middle;
}
table.fixTableResponsive td {
    overflow: visible;
}
div.dt-processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(255,255,255,0.9);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
/* DATATABLES */

/* Ajusta altura e padding do select2 para parecer um form-floating */
.select2-container--bootstrap5 .select2-selection--single {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem 0 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}

.select2-container--bootstrap5 .select2-selection__rendered {
    padding-top: 0.2rem;
    color: #212529;
    line-height: 1.25rem;
}

/* Ajusta posição da flecha original do select2 */
.select2-container--bootstrap5 .select2-selection__arrow {
    display: none; /* oculta a seta do select2 */
}

/* Limita a altura da lista de opções do dropdown */
.select2-results__options {
    max-height: 250px; /* ou o valor que preferir */
    overflow-y: auto;
}


.optionsRightMobile {
    float: right;
    margin-top: 20px;
}

/*** TIMELINE ***/
.timeline {
    position: relative;
    list-style: none;
    padding: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 4px;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    padding: 20px 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-item-content {
    position: relative;
    padding: 20px 30px;
    border-radius: 5px;
}

.timeline-item-content.right {
    margin-left: 60px;
}

.timeline-item-content.left {
    margin-right: 60px;
}

/*** WBS (EAP) ***/
.eap-box {
    border-radius: 8px;
    padding: 10px 15px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    margin: 10px;
    min-width: 200px;
}
.nivel-1 { background-color: #0d6efd; }  /* Azul */
.nivel-2 { background-color: #dc3545; }  /* Vermelho */
.nivel-3 { background-color: #198754; }  /* Verde */

.connector-line {
    height: 20px;
    border-left: 2px solid #999;
    margin: 0 auto;
}
.branch-group {
    display: flex;
    flex-wrap: nowrap; /* Alterado de 'wrap' para 'nowrap' */
    justify-content: flex-start; /* Alterado para alinhar à esquerda */
    overflow-x: auto; /* Adicionado para permitir rolagem horizontal */
    padding-bottom: 15px; /* Adicionado para dar espaço para a barra de rolagem */
}
.branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
    flex-shrink: 0; /* Impede que os itens encolham */
}

/** LIGHTBOX **/
.lightbox-thumbnail:hover {
    transform: scale(1.1);
    cursor: pointer;
}

#lightbox {
    display: none;
    position: fixed;
    z-index: 1100;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}
#lightbox.show {
    display: block !important; /* classe que forçará visibilidade */
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 9999;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/** LIGHTBOX VIDEO RESPONSIVO **/
.lightbox-video {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    height: 0;
    padding-bottom: 56.25%; /* proporção 16:9 */
    position: relative;
}

.lightbox-video iframe {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    border: none;
}




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


/*
* CSS QUERIES
*/

/* Small devices (portrait phones, 576px and down)*/
@media (max-width: 575.98px) {
    .w-xs-100 {
        width:100%!important;
    }
    .w-xs-75 {
        width:75%!important;
    }
    .w-xs-50 {
        width:50%!important;
    }
    .w-xs-25 {
        width:25%!important;
    }
    .h-xs-100 {
        height:100%!important;
    }
    .h-xs-75 {
        height:75%!important;
    }
    .h-xs-50 {
        height:50%!important;
    }
    .h-xs-25 {
        height:25%!important;
    }

    .mt-xs-5 {
        margin-bottom: 3rem!important;
    }
    .mb-xs-3 { margin-bottom: 2rem!important; }

    .mb-xs-6 {
        margin-bottom: 4rem!important;
    }
    .mb-xs-7 {
        margin-bottom: 5rem!important;
    }
    .mb-xs-8 {
        margin-bottom: 6rem!important;
    }
    .mb-xs-9 {
        margin-bottom: 7rem!important;
    }
    .mb-xs-10 {
        margin-bottom: 8rem!important;
    }    

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .w-sm-100 {
        width:100%!important;
    }
    .w-sm-75 {
        width:75%!important;
    }
    .w-sm-50 {
        width:50%!important;
    }
    .w-sm-25 {
        width:25%!important;
    }
    .h-sm-100 {
        height:100%!important;
    }
    .h-sm-75 {
        height:75%!important;
    }
    .h-sm-50 {
        height:50%!important;
    }
    .h-sm-25 {
        height:25%!important;
    }

    .mb-sm-6 {
        margin-bottom: 4rem!important;
    }
    .mb-sm-7 {
        margin-bottom: 5rem!important;
    }
    .mb-sm-8 {
        margin-bottom: 6rem!important;
    }
    .mb-sm-9 {
        margin-bottom: 7rem!important;
    }
    .mb-sm-10 {
        margin-bottom: 8rem!important;
    }      

}
    
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .w-md-100 {
        width:100%!important;
    }
    .w-md-75 {
        width:75%!important;
    }
    .w-md-50 {
        width:50%!important;
    }
    .w-md-25 {
        width:25%!important;
    }
    .w-md-20 {
        height:20%!important;
    }      
    .w-md-15 {
        height:15%!important;
    }     
    .w-md-10 {
        height:10%!important;
    }    
    .h-md-100 {
        height:100%!important;
    }
    .h-md-75 {
        height:75%!important;
    }
    .h-md-50 {
        height:50%!important;
    }
    .h-md-25 {
        height:25%!important;
    }   

    .mb-md-6 {
        margin-bottom: 4rem!important;
    }
    .mb-md-7 {
        margin-bottom: 5rem!important;
    }
    .mb-md-8 {
        margin-bottom: 6rem!important;
    }
    .mb-md-9 {
        margin-bottom: 7rem!important;
    }
    .mb-md-10 {
        margin-bottom: 8rem!important;
    }     

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-lg-100 {
        width:100%!important;
    }
    .w-lg-75 {
        width:75%!important;
    }
    .w-lg-50 {
        width:50%!important;
    }
    .w-lg-25 {
        width:25%!important;
    }
    .h-lg-100 {
        height:100%!important;
    }
    .h-lg-75 {
        height:75%!important;
    }
    .h-lg-50 {
        height:50%!important;
    }
    .h-lg-25 {
        height:25%!important;
    }

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .w-xl-100 {
        width:100%!important;
    }
    .w-xl-75 {
        width:75%!important;
    }
    .w-xl-50 {
        width:50%!important;
    }
    .w-xl-40 {
        width:40%!important;
    }    
    .w-xl-30 {
        width:30%!important;
    }    
    .w-xl-25 {
        width:25%!important;
    }
    .w-xl-20 {
        width:20%!important;
    }
    .w-xl-15 {
        width:15%!important;
    }        
    .h-xl-100 {
        height:100%!important;
    }
    .h-xl-75 {
        height:75%!important;
    }
    .h-xl-50 {
        height:50%!important;
    }
    .h-xl-25 {
        height:25%!important;
    }
    .h-xl-20 {
        height:20%!important;
    }  
    .h-xl-15 {
        height:15%!important;
    }        

}