﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 
for details on configuring this project to bundle and minify static web assets. */
/*for details on configuring this project to bundle and minify static web assets. */

body {
    width: 100%;
    height: 100%;
    background-size: cover;
    margin: inherit;
    margin-left: 0px;
    margin-right: 0px;
}

.body-content {
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
}

.particlesBody {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -100;
}



.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.circular-button {
    background-color: white;
    color: black;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 5.25vw; 
    max-width: 42px; 
    min-width: 21px; 
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    border: 2px solid black;
}

    .circular-button:hover {
        background-color: white;
        transform: scale(1.1);
    }

    .circular-button:active {
        transform: scale(1.05);
    }


#detalletableNotificaciones {
    width: 100%;
    border-collapse: collapse;
}

    #detalletableNotificaciones th,
    #detalletableNotificaciones td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
        vertical-align: top; 
    }

    #detalletableNotificaciones td {
        word-break: break-word; /* Permite el corte de palabras largas */
        max-width: 5000px; /* Define un ancho máximo para que el contenido crezca hacia abajo */
    }

/*   Colocando el modal de notificaciones un poco mas grande */
#detalleNotificacionModal.modal{
    width: 69% !important;
    max-height: 84%;
}
    .cerrar:hover {
        background-color: gray;
    }

.loading {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0.6;
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}