html,
body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #CEE7FF;
    /*overflow-y: hidden;*/
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
height: 100% !important;
}

/* Estilo específico para el modal con la clase personalizada */
.custom-alert-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
    height: auto !important; /* Ajusta la altura según sea necesario */
}

#BarraSuperior {
    margin-bottom: 0px;
    z-index: 4;
    background-color: white;
    top: 0;
    position: sticky;
}

#TabOptions{
    margin-bottom: 0px;
    z-index: 4;
    background-color: lightgrey;
    position: sticky;
}

#winVP {
    position: fixed;
    /* Posición fija en la ventana del navegador */
    height: 100%;
    width: 100%;
    background-color: transparent;
    z-index: 5;
    /* Capa superior */
    pointer-events: none;
    /* deja pasar el clic a la capa inferior que es el calendario*/
}



.dhxwin_active,
.dhxwin_inactive {
    pointer-events: auto;
    /* captura el clic nuevamente en la capa inferior*/
}

#calendar {
    /*width: 4000px;*/ /* <-- CONTROL DEL ANCHO PARA VISTA SEMANAL*/
    overflow-x: scroll;
    /* aqui es donde actua el slider de cambio de tamaño horizontal*/
}

/* la hora que va arribita de cada evento de agenda */
.mini-hora {
    font-size: 11px;
}

/* el pequeño tooltip personalizado que emerge y flota al señalar cada evento de agenda*/
.tooltipevent {
    width: auto;
    height: auto;
    vertical-align: middle;
    background: white;
    position: absolute;
    z-index: 10001;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    /* Modificación */
    left: -100%;
}

.tooltipMensajeInterno {
    /*Para que el texto del tooltip emergente no quede tan pegado a los bordes*/
    margin: 8px;
}

/* necesario porque si no sale el renglon azul y si se va a imprimir se gasta mucha tinta en la vista de tareas -HJ*/
.fc-list-event {
    color: #000;
    background-color: #fff;
    border: transparent;
}

/* necesario porque si no sale el renglon azul y si se va a imprimir se gasta mucha tinta en la vista de tareas -HJ*/
.fc-list-event:hover {
    color: #000;
    cursor: default;
}

/* Para que ajuste las listas de botones en columnas sin problemas */
.div-columna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Estilos adicionales para adaptar a dispositivos móviles */
@media (max-width: 768px) {
    .dhx_popup_dhx_terrace {
        /* Puedes ajustar estos valores según sea necesario */
      left: 166px !important;
      top: 390px !important;
      visibility: visible !important;
      z-index: 105 !important;
      display: flex !important;
    }

}

/* para que la barra superior se reordene en vista movil */
.barra-responsive {
    margin-right: 10px;
    margin-left: 10px;
}

.fc-scroller {
    max-height: 100000px;
    overflow: scroll;
}

@keyframes parpadeo-rojo {
    0% {
        border-color: red;
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: red;
    }
}

/* Aplicar la animación al borde */
.borde-parpadeante-rojo {
    border: 8px solid red;
    animation: parpadeo-rojo 1s linear infinite;
}

.card-body {
    background-color: white;
}

.arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: arrow-oscillate 2s ease-in-out infinite;
}

@keyframes arrow-oscillate {
    0% {
        transform: translateX(-50%) translateY(0%);
    }

    50% {
        transform: translateX(-50%) translateY(-20%);
    }

    100% {
        transform: translateX(-50%) translateY(0%);
    }
}

/* botones de trazabilidad*/
.btn-alto {
    height: 50px;
}

.fc-event-main {
    overflow: auto;
    overflow-x: hidden;
}

/* icono de las pseudoventanas */
.dhxwin_icon,
.dhxwins_vp_dhx_terrace div.dhxwin_hdr div.dhxwin_icon {
    background-image: url('/Assets/images/PNG_16x16_CalendarEventIcon.png');
}

/* espacio entre los elementos de la pseudoventana*/
.contenidoVentanaEvento {
    font-size: 12px;
}

.contenidoVentanaEvento br {
    content: "";
    display: block;
    height: 1px;
}

.big-br {
    height: 4px;
    content: "";
    display: block;
}

/* para ordenar los tabs*/
.tabs {
    margin-top: 8px;
    margin-bottom: 0px;
    margin-left: 60px;
    padding: 0;
    list-style: none;
    position: relative;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
}

.tabs .active-tab {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: none;
    position: relative;
    color: black;
    background-color: white;
}

.tabs .active-tab:after {
    width: 100%;
    height: 2px;
    position: absolute;
    content: "";
    bottom: -0.1em;
    left: 0;
}

.tabs li {
    display: inline-block;
    cursor: pointer;
    color: black;
    padding: 5px 10px;
}

.tabs li:first-child {
    margin-left: 10px;
}

.tabs-content {
    list-style: none;
    background-color: white;
    right: 4px;
    margin-left: -36px;
    /* necesario, si no deja mucho margen derecho y es problema en vista movil -HJ*/
}

.tabs-content li {
    display: none;
}

/* checkbox estilo slider */
.switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 40px;
    padding-left: 40px;
    font-size: 12px;
}

.switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 16px;
}

input:checked+.slider {
    background-color: #007bff;
}

input:checked+.slider:before {
    transform: translateX(16px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* formato de largo de botones de ventana de evento */
.obj_largo {
    width: 152px;
}

.tagify {
    font-size: 12px;
}

.tagify__input,
.customsel {
    width: 314px;
}

/* Media query para dispositivos con un ancho máximo de 768px (típicamente dispositivos móviles) */
@media screen and (max-width: 768px) {
    .tagify__input {
        width:270px !important; /* Cambia el ancho al 100% para dispositivos móviles */
    }
}

.form-check-label {
    font-size: 12px;
}

.mitaymita {
    min-width: 360px;
    max-width: 360px;
}

/* para que el texto de saldos haga un efecto sirena */
.color-changing-saldo {
    animation: colorChangeSaldo 1s infinite;
}

@keyframes colorChangeSaldo {
    0% {
        color: red;
    }

    50% {
        color: white;
    }

    100% {
        color: red;
    }
}

/* para que el texto de saldos haga un efecto sirena */
.color-changing-presupuesto {
    animation: colorChangePresupuesto 1s infinite;
}

@keyframes colorChangePresupuesto {
    0% {
        color: green;
    }

    50% {
        color: white;
    }

    100% {
        color: green;
    }
}

/* para que el contenido de las ventanas tengan desplazamiento vertical ya sea que esten en desktop o mobile */
.dhx_cell_cont_wins {
    overflow-y: scroll !important;
}

/* boton volver */
#btn_volver {
    left: 8px;
    font-size: 12px;
    position: absolute;
    z-index: 1000;
    background: white;
    color: black;
}

#btn_volver:hover{
    background: #3f6ad8 !important;
    color: #fff !;  
}

/* botones de la ventana */
.botonesVentana {
    text-align: right;
}
/* botones de la ventana */
.botonesVentanaBloclear {
    text-align: right;
}

/* botones de la ventana */
.botonesVentanaAgregarRapido {
    text-align: right;
}


/* Media query para dispositivos con un ancho máximo de 768px (típicamente dispositivos móviles) */
@media screen and (max-width: 768px) {
    /* botones de la ventana */
    .botonesVentana {
        text-align: right;
        width: 90% !important;
    }
    /* botones de la ventana */
    .botonesVentanaBloclear {
        text-align: right;
        width: 90% !important;
    }
    .botonesVentanaAgregarRapido {
        text-align: right;
        width: 90% !important;
    }
}

.floating-bar {
    font-size: 10px;
    background-color: #CEE7FF;
    color: #000;
    padding: 10px;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    /* Asegura que la barra flotante se muestre por encima de otros elementos */
}

.infonote {
    display: inline-block;
    color: #007bff;
    font-size: 9px;
}

.fc-content {
    top: -10px
}

.caution-tape {
    background: linear-gradient(90deg, #FFF 50%, #CCC 50%); /* Rayas gris y blanco */
    background-size: 20px 100%; /* Ancho y altura de las rayas */
    padding: 10px;
    width: 100%;
    text-align: center;
    animation: stripeMove 2s linear infinite; /* Animación para mover las rayas */
}

@keyframes stripeMove {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.fc-scrollgrid{
    background-color: white;
}

.fc-view-resourceTimelineWeek .fc-slats td {
    display: flex;
    flex-direction: row-reverse; /* Invierte el orden de los elementos dentro de cada celda */
}

.fc-view-resourceTimeGridWeek .fc-slats td {
    display: flex;
    flex-direction: row-reverse; /* Invierte el orden de los elementos dentro de cada celda */
}

.pseudoGrid{
    display: grid;
}

.FlexDiv{
    display: flex;
}

.TextAreas{
    resize: none;
}