#primary_modal .modal-fullscreen {
    width    : calc(100vw - 40px) !important;
    min-width: unset !important;
    max-width: none;
    height   : 100%;
    margin   : 0 0 0 auto !important;
}

#secondary_modal .modal-fullscreen {
    width    : calc(100vw - 80px) !important;
    min-width: unset !important;
    max-width: none;
    height   : 100%;
    margin   : 0 0 0 auto !important;
}

#tertiary_modal .modal-fullscreen {
    width    : 600px !important;
    min-width: unset !important;
    max-width: none;
    height   : 100%;
    margin   : 0 0 0 auto !important;
}

@media (max-width: 640px) {
    #tertiary_modal .modal-fullscreen {
        width: calc(100vw - 40px) !important;
    }
}

#quinary_modal .modal-fullscreen {
    width    : 600px !important;
    min-width: unset !important;
    max-width: none;
    height   : 100%;
    margin   : 28px auto 28px auto !important;
}

@media (max-width: 600px) {
    #quinary_modal .modal-fullscreen {
        width: 100vw;
    }
}

#primary_modal .btn-close {
    z-index: 1056;
}

#secondary_modal .btn-close {
    z-index: 1084;
}

#tertiary_modal .btn-close {
    z-index: 1094;
}

#quinary_modal .btn-close {
    z-index: 1114;
}

#secondary_modal.modal {
    z-index: 1083 !important;
}

#tertiary_modal.modal {
    z-index: 1093 !important;
}

#quinary_modal.modal {
    z-index: 1113 !important;
}

.tooltip.show {
    z-index: 1100;
}

.modal-fullscreen {
    transition: margin 0.3s ease; /* Suaviza el cambio de margen */
}

.modal-fullscreen .modal-body {
    overflow-x: hidden;
}

.modal-backdrop.fade.show+.modal-backdrop.fade.show,
.modal-backdrop.fade.show+.ck-body-wrapper+.modal-backdrop.fade.show {
    z-index: 1082 !important;
}

.modal-backdrop.fade.show+.modal-backdrop.fade.show+.modal-backdrop.fade.show {
    z-index: 1092 !important;
}

.modal-backdrop.fade.show+.modal-backdrop.fade.show+.ck-body-wrapper+.modal-backdrop.fade.show {
    z-index: 1112 !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
/*
.swal2-popup.swal2-loading {
    background: unset !important;
    backdrop-filter: unset !important;
}

.swal2-popup.swal2-loading button:disabled {
    opacity: 1;
    background: var(--pc-header-background) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 0;
}
*/
/* ckeditor */
.ck.ck-balloon-panel {
    z-index: 1100 !important;
}
.ck.ck-toolbar .ck-dropdown__panel {
    z-index: 1101 !important;
}

/* sweet alert */
body .swal2-container {
    z-index: 1204 !important;
}

body .swal2-container.swal2-backdrop-show {
    background: rgb(255 255 255 / 0%) !important;
}

.swal2-input-label {
    text-align: center;
}

.swal2-popup {
    background             : var(--pc-header-background) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter        : blur(7px);
    overflow               : hidden;
    border-radius          : 12px;
}

/* Animación para abrir el modal */
@keyframes slideFromRight {
    from {
        transform: translateX(100%);
        /* Inicia desde fuera de la pantalla (derecha) */
        opacity  : 1;
    }

    to {
        transform: translateX(0);
        /* Se mueve a su posición original */
        opacity  : 1;
    }
}

/* Animación para cerrar el modal */
@keyframes slideToRight {
    from {
        transform: translateX(0);
        /* Inicia en su posición original */
        opacity  : 1;
    }

    to {
        transform: translateX(100%);
        /* Se mueve fuera de la pantalla (derecha) */
        opacity  : 1;
    }
}

/* Aplica la animación al modal al abrirlo */
.modal.fade.show {
    animation: slideFromRight 0.3s ease-out;
    /* Aplica la animación de deslizamiento */
}

/* Aplica la animación de deslizamiento al modal cuando se muestra */
.modal-dialog {
    transform: translateX(100%);
    /* Inicialmente el modal está fuera de la pantalla */
    animation: slideFromRight 0.3s forwards;
    /* Aplica la animación */
}
.modal-fullscreen .modal-body {
    overflow-x: hidden;
}

/* Aplica la animación para cerrar el modal */
.modal.fade {
    animation: slideToRight 0.5s forwards;
}

#primary_modal .btn-close,
#secondary_modal .btn-close,
#tertiary_modal .btn-close,
#quinary_modal .btn-close {
    --bs-btn-close-bg     : unset;
    --bs-btn-close-opacity: 1;
    box-sizing            : inherit;
    border                : 0;
    border-radius         : 0;
    color                 : #fff !important;
    right                 : auto;
    left                  : -1.5rem;
    top                   : 2.575rem;
    height                : 40px;
    font-weight           : 400;
    font-size             : 1.4rem;
    text-transform        : lowercase;
    position              : absolute;
    width                 : 40px;
    background-color      : #02478a !important;
    line-height           : 0px;
    font-family           : monospace;
    display               : flex;
    align-items           : center;
    justify-content       : center;
    cursor                : pointer;
}
#primary_modal .btn-close::before,
#secondary_modal .btn-close::before,
#tertiary_modal .btn-close::before,
#quinary_modal .btn-close::before {
    position    : absolute;
    content     : '';
    top         : 100%;
    left        : 0;
    border-style: solid;
    border-width: 0 24px 17px 0;
    border-color: transparent #002e5b transparent transparent;
}

#quinary_modal .btn-close {
    font-size: 1.1rem;
    text-transform: lowercase;
    cursor: pointer;
    color: transparent;
}