.difSignIn{
    visibility:hidden;
}

.darkcss {
    background-color: var(--colorThem1);
    color: var(--colorThem2);
}

.c-primary {
    background-color: var(--color1);
    color: white;
}

    .c-primary:hover {
        background-color: var(--color1);
        color: white;
        border-color: white;
    }

    .c-secondary {
    background-color: var(--color2);
    color: white;
}

    .c-secondary:hover {
        background-color: var(--color2);
        color: white;
        border-color: white;
    }


.c-btn-p {
    background-color: var(--color2);
    color: white;
}

    .c-btn-p:hover {
        background-color: var(--color3);
        color: white;
        border-color: var(--color3);
    }

.c-btn-s {
    background-color: var(--color1);
    color: white;
}

    .c-btn-s:hover {
        background-color: var(--color3);
        color: white;
        border-color: var(--color3);
    }




#TableEnrrol {
    font-size: 13px;
}

td {
    font-size: 11px;
    
}


toast {
    z-index: 7000;
}
/* Estilos para el overlay y el spinner */
.loading-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    z-index: 9999; /* Asegúrate de que esté por encima de todo el contenido */
    display: flex; /* Usar flexbox para centrar */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}



.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    position: relative;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100px;
}

.step-counter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

.step-name {
    font-size: 11px;
    margin-top: 8px;
}

.completed .step-counter {
    background-color: #198754; /* Bootstrap success color */
    color: white;
}

.active .step-counter {
    background-color: #0d6efd; /* Bootstrap primary color */
    color: white;
}

/* Line between steps */
.stepper-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100px;
    height: 4px;
    background-color: #e9ecef;
    z-index: -1;
}

.completed::after {
    background-color: #198754; /* Success color for completed steps */
}

.stepper-item:last-child::after {
    display: none;
}

/* Error marker */
.stepper-error {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 120px;
    margin-top: -30px;
}

.error-name {
    color: red;
    font-size: 10px;
    font-weight: bold;
    margin-top: -5px;
}


.icon-small {
    font-size: 10px; /* Ajusta el tamaño deseado */
}

.icon-medium {
    font-size: 16px; /* Ajusta el tamaño deseado */
}



.fa-brands {
    font-size: 24px; /* Ajusta el tamaño según lo necesites */
    vertical-align: middle;
}



/*desbacene logo*/
.text-fade {
    display: inline-block;
    font-weight: bold;
    transition: opacity 1.2s ease-in-out, transform 0.8s ease-in-out;
    font-weight: normal;
    font-size: 1.3rem;
}

.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.visible {
    opacity: 1;
}

/* Estilo más destacado para el nuevo nombre */
.highlight {
    font-weight: bold;
    font-size: 1.3rem;
    color: white; /* amarillo Bootstrap */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}


.spinner {
    animation: spin-reverse 1s linear infinite;
}

@keyframes spin-reverse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}
.table-hover > tbody > tr:hover {
    background-color: #98a5e18a ;
}
table tbody tr.selected {
    background-color: #a2a8c18a !important;
}
















/* checa internet*/
#offlineBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: red;
    color: floralwhite;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

#slowConnectionBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff4d4;
    color: #000;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
/* checa internet*/