:root {
    --primary-color: rgb(44, 62, 80);
    --primary-hover-color: #3c5268;
    --primary-light-color: rgb(80, 107, 133); /*rgb(156, 177, 197);*/
/*    --primary-hover-color: #32465A;*/
    --secondary-color: #FFFFFF;
    --secondary-light-color: #dee2e7;
}

* {
    /* scroll-behavior: smooth; */
}

.messages {
    height: 400px;
    overflow-y: auto;
}

.usi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.respondido {
    grid-column: 2;
}

.por-responder {
    grid-column: 1;
}

.usi-card {
    width: 350px;
}

.display-none-important {
    display: none !important;
}

.bg-union {
    background-color: var(--primary-color);
    color: #f5f5f5;
}

.bg-union-no-hover {
    background-color: var(--primary-color);
    color: #f5f5f5;
}

.bg-union-no-hover:hover {
    background-color: var(--primary-color);
    color: #f5f5f5;
}

.bg-union-light {
    background-color: var(--primary-light-color)
}

.text-union {
    color: var(--primary-color);
}

.card-union {
    background-color: var(--primary-color);
    color: #f5f5f5;
}

.card-union:hover {
    background-color: var(--primary-hover-color);
}

.list-group-item {
    border-color: var(--primary-hover-color);
}

.border-union {
    border-bottom-color: var(--primary-hover-color) !important;
}

.border-color-union {
    border-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-hover-color) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-hover-color) !important;
    --bs-btn-border-color: var(--primary-hover-color) !important;
    --bs-btn-hover-bg: var(--primary-hover-color) !important;
    --bs-btn-hover-border-color: var(--primary-hover-color) !important;
    --bs-btn-active-bg: var(--primary-hover-color) !important;
    --bs-btn-active-border-color: var(--primary-hover-color) !important;
    --bs-btn-disabled-color: var(--primary-hover-color) !important;
    --bs-btn-disabled-border-color: var(--primary-hover-color) !important;
}

.btn-light {
    color: #5C636A;
}

.caja-mensaje-chat {
    padding: 10px 30px 10px 15px;
    border-radius: 20px;
}

/* Tabla */
.tr-linea:hover {
    background: #E9ECEF;
    cursor: pointer;
}

thead > tr > th {
    resize: horizontal; /* Permite al usuario ajustar el ancho de la columna horizontalmente */
    overflow: hidden; /* Oculta el texto que desborda la celda */
    white-space: nowrap; /* Evita que el texto se envuelva */
    font-size: 14px;
}

td {
    white-space: nowrap; /* Evita que el texto se envuelva */
    text-overflow: ellipsis;
    overflow: hidden; /* Oculta el texto que desborda la celda */
    max-width: 100px; /* Ancho máximo de la celda */
    font-size: 14px;
}

/* Formularios */
form > ul > li {
    font-size: 14px;
    color: rgb(108,117,125)
}

ul.errorlist {
    list-style: none;
    padding: 10px;
    background-color: #F8D7DA;
    border-radius: 0.375rem;
}

ul.errorlist > li {
    font-size: inherit;
    color: #BB2D3B
}

.helptext {
    font-size: 14px;
    color: rgb(108,117,125)
}

.input-buscar:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

textarea {
    resize: none;
}

/* Animaciones */

.animacion-mensaje-citado-izquierda {
    background-color: #FFFFFF;
    animation: parpadear-izquierda 1s linear;
}

@keyframes parpadear-izquierda {
    0% {
        background-color: #FFFFFF
    }
    25% {
        background-color: var(--secondary-light-color)
    }
    50% {
        background-color: #FFFFFF
    }
    75% {
        background-color: var(--secondary-light-color)
    }
}

.animacion-mensaje-citado-derecha {
    background-color: var(--primary-color);
    color: #f5f5f5;
    animation: parpadear-derecha 1s linear;
}

@keyframes parpadear-derecha {
    0% {
        background-color: var(--primary-color);
    }
    25% {
        background-color: var(--primary-light-color)
    }
    50% {
        background-color: var(--primary-color);
    }
    75% {
        background-color: var(--primary-light-color)
    }
}

/* */
/* ===== Scrollbar CSS ===== */

/* Firefox */
.scroll-union > * {
/* scrollbar-width: auto;
scrollbar-color: #ccc #ffffff; */
}

/* Chrome, Edge, and Safari */
.scroll-union > *::-webkit-scrollbar {
width: 10px;
}

.scroll-union > *::-webkit-scrollbar-track {
background: var(--primary-color);
}

.scroll-union > *::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
border: 3px solid var(--primary-color);
}

/* */
/* ===== Scrollbar CSS ===== */

/* Firefox */
.scroll-white > * {
/* scrollbar-width: auto;
scrollbar-color: #ccc var(--primary-color); */
}

/* Chrome, Edge, and Safari */
.scroll-white > *::-webkit-scrollbar {
width: 10px;
}

.scroll-white > *::-webkit-scrollbar-track {
background: #fff;
border-radius: 10px;
}

.scroll-white > *::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
border: 3px solid #fff;
}