html, body {
    overscroll-behavior: contain; /* Evita que la cámara fuerce el scroll */
}

.mini-card {
    width: auto;
    color: white;
    border-radius:8px;
    padding: 13px 40px 4px 30px;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    box-shadow: 3px 5px 5px 0px rgba(24, 44, 97,1.0) !important;
}

.mini-card-bg-credits {
    background-color: #0894b4;
}

.mini-card-bg-docSign {
    background-color: #08bc64;
}

.mini-card-UnsignedDocuments {
    background-color: #fc944c;
}

.mini-card-TotalDocumentSignatures {
    background-color: #10c4dc;
}

.mini-card .money {
    color: white !important;
    text-shadow: none;
}

.value {
    font-size: 30px;
    font-weight: bold;
    margin-top: -9px;
}

.mini-label {
    font-size: 14px;
}
/*.mini-card i {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
        background-color: yellow;
    }*/
    /*.mini-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: white;
    display: flex;
    align-items: center;*/
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
    /*box-shadow: 3px 5px 5px 0px rgba(24, 44, 97,1.0) !important;
}*/
    /*.mini-icon-box {
    background-color: yellow;
    border-radius: 0.5rem;
    width: 36px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}*/
    /*.mini-number {
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
}

.mini-label {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}*/
    #tblDocumentsSignatures td {
    font-size: 13px;
}

/*#tblDocumentsSignatures t {
    font-size: 12px;
}*/
/*#thDoc{
    color: red !important;
    padding-right: 100px !important;
    border: solid 1px red;
}*/
/*video {
    transform: scaleX(-1);*/ /* Reflejar horizontalmente si es selfie */
/*}*/
#video {
    width: 300px; /* O un tamaño fijo como 300px */
    /*max-width: 100%;*/
    height: 280px; /* Mantiene la proporción */
    object-fit: cover; /* Asegura que el video se ajuste al contenedor */
}

/* Estilo del overlay */
#overla {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 999;
    display: none;
}

/* Contenedor del loader */
#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
}

/* Animación para la rotación */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Aplicar animación a la imagen */
#loader img {
    width: 70px; /* Tamaño de la imagen */
    height: 70px;
    animation: spin 1s linear infinite; /* Rotación continua */
}

/********* OVERLA **********/

.documentSignatureInfo .form-control {
    font-size: 13px;
}

#cardDocuments .form-check-input {
    font-size: 13px !important;
}

#containerUserGroups, #containerDocuments {
    margin-top: 2px !important;
}

.buttons-html5 {
    padding: 3px 10px;
    background-color: #10ac84;
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 14px;
}

.credits {
    font-size: 13px;
}

.fa-coins {
    font-size: 19px;
    color: gold; /* Color dorado para las monedas */
    text-shadow: 0 0 10px #ffd700, /* Sombra más cercana */
    0 0 20px #ffd700, /* Segunda capa de brillo */
    0 0 30px #ffa500, /* Tercera capa con un tono más oscuro */
    0 0 40px #ff8c00; /* Última capa de resplandor */
}

#overla {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    z-index: 9998; /* Asegúrate de que esté detrás del loader */
    display: none; /* Oculto por defecto */
}

#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Asegúrate de que el loader esté por encima del overlay */
    display: none;
}

/*Permisos*/
.true {
    color: #C4E538 !important;
    font-size: 19px !important;
}

.false {
    color: rgba(235,47,6,1.0) !important;
    font-size: 19px !important;
}

.card h6 {
    margin-top: -10px;
    font-size: 43px;
    font-weight: bold;
    color: #808e9b;
}

.card-text {
    margin-top: -13px;
    font-size: 15px;
    font-weight: 500;
    color: #808e9b;
}

.fa-3x {
    color: #dcdde1;
    opacity: 0.9 !important;
    margin-left: 10px;
}

.liUserGroups:hover {
    background-color: #dfe4ea;
}
/****** Recuperar contraseña ********/
.RecoverPasswordMessage {
    font-size: 12.5px;
    color: #718093;
}

.RecoverPasswordMessageError {
    font-size: 12px;
    color: red;
}

.viewBagMessage {
    font-size: 12.5px;
    color: forestgreen;
}

/**** Fin Recuperar contraseña *****/
#filePdf {
    margin-top: -15px !important;
}

/*Dashboard*/
.checkDashboard {
    font-size: 13.5px;
    margin-top: 4px;
    margin-right: -4px !important;
}

.dbCard {
    margin-top: 60px !important;
}

#dateRange {
    font-size: 12.5px !important;
    color: #747d8c;
}

h-100 {
    box-shadow: 3px 5px 5px 0px rgba(24, 44, 97,1.0) !important;
    height: 100px !important;
}

.dbHeader {
    background-color: #192a56 !important;
    color: white !important;
    box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.3);
}

.dbBody {
    box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.3);
}

.drop-zone {
    position: relative;
    border: 2px dashed #dfe4ea;
    background-size: cover;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.point {
    width: 50px;
    position: absolute;
    color: black;
    font-size: 16px;
    font-family: Arial;
    z-index: 200;
    border: 2px dashed #bdc3c7;
    padding: 0px 1px 0px 0px;
    line-height: .8;
    border-top-right-radius: 10px 10px;
}

.iconText {
    color: #7f8fa6;
    font-size: 18px;
    animation: blinker 4s linear infinite;
}

/**** Selct 2 *****/
/* Reducir el tamaño de los ítems en el dropdown */
.select2-container .select2-results__option {
    font-size: 12px !important; /* Ajusta el tamaño de la fuente */
}

/* Reducir el tamaño de los ítems seleccionados */
.select2-container .select2-selection__choice {
    font-size: 11px !important; /* Ajusta el tamaño de la fuente */
}

/* Reducir el tamaño del placeholder */
.select2-container--bootstrap-5 .select2-selection__placeholder {
    font-size: 12px;
}
/*.select2-search__field {
    height: 32px;
}

.select2-results__message {
    font-size: 14px !important;
    font-weight: 500 !important;
}*/
/**** Selct 2 *****/

.card-footer {
    position: fixed;
    bottom: 1px;
    z-index: 2;
    margin-top: 20px;
    background: white;
}

.prev-page {
    margin-right: 2px !important;
}

.next-page {
    margin-left: 1px !important;
}

/*Numero center el draggable*/
.new-span {
    font-size: 13px !important;
    margin-left: -8px;
}

.fa-list-ul {
    font-size: 20px;
    color: silver;
}

.tite {
    background-color: silver;
    color: #C4E538;
}
/*************** Paginacion ************/
.paginator {
    /*border: dotted 2px silver;*/
    top: 60px; /* Bajamos la barra 200px de arriba a abajo */
    width: 49px;
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    margin-left: 0px; /* Establecemos la barra en la izquierda */
    z-index: 100; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
    background-color: #dfe4ea;
}

    .paginator ul {
        list-style: none;
        margin-left: -32px;
    }

    .paginator .fa-circle-chevron-left, .paginator .fa-circle-chevron-right {
        font-size: 18px;
        color: #192a56;
    }

.fa-magnifying-glass-minus, .fa-magnifying-glass-plus {
    font-size: 20px;
    color: #192a56;
}

.page-info {
    font-size: 15px;
    color: red;
}

#page_direct {
    border: none;
}

.zoom {
    font-size: 12px;
}

/******** Fin de la Paginacion *********/

/************ Paginacion 2 ************/
.paginator2 .fa-circle-chevron-right, .paginator2 .fa-circle-chevron-left {
    font-size: 16px;
    color: #192a56;
}

.paginator2 button {
    color: #747d8c;
}
/********** Fin Paginacion 2 **********/

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/*Modal foto*/
/*#ModalPhoto{
    z-index: 2000;
}*/

#ModalAdjunts, #ModalPhoto, #ModalSing {
    z-index: 2000;
}

    #ModalSing small {
        font-size: 13px;
    }

/*.modal-header img {
    height: 30px;
    width: 30px;
    margin-top: 5px;
    margin-right: 5px;
}*/

/*Modal firma*/
/*#ModalSing {
    z-index: 2000;
}*/

.modal-header {
    height: 50px;
}

/* .modal-header img {
    height: 30px;
    width: 30px;
    margin-top: -5px;
    margin-right: 5px;
}
*/

::-webkit-scrollbar-thumb {
    background: red; /* Color del pulgar del scrollbar */
    border-radius: 100px; /* Bordes redondeados del pulgar del scrollbar */
}

    ::-webkit-scrollbar-thumb:hover {
        background: red; /* Color del pulgar del scrollbar al pasar el ratón */
    }

::-webkit-scrollbar-track {
    background: red; /* Color de la pista del scrollbar */
    border-radius: 10px; /* Bordes redondeados de la pista del scrollbar */
}

/* Firefox */
* {
    scrollbar-width: thin; /* Define el ancho del scrollbar como delgado */
    scrollbar-color: #192a56 #f1f1f1; /* Color del pulgar y de la pista del scrollbar */
}

/****** Fin Scroll  OFFCANVAS *******/
/*Este es el alto del contenedor de los campos antes que aparezca el scrooll*/
.fieldBody {
    max-height: 90vh !important; /* El contenedor no ocupará más del 70% del alto de la pantalla */
    overflow-y: auto; /* Activa el scroll cuando el contenido excede el tamaño */
}

/******** OFFCANVAS **********/
/************** offcanvas Diseñador ***************/

.offcanvasDesigner {
    padding: 0px;
    width: 20% !important;
}

.offcanvas {
    margin-top: 57px !important;
    padding: 0px;
    width: 17.2%;
}

/*Titulo del offcanvas*/
.panelControlTitle {
    margin-top: 10px;
    font-size: 19px;
    color: white;
    font-family: "Abel", sans-serif;
    font-weight: 500;
}

/*Boton que cierra offcanvas*/
.btnOffcanvasDocuments, .btnOffcanvasUserGroups {
    margin-top: 58px !important;
    margin-left: 3px;
    width: 48px;
    height: 30px;
}

.btnOffcanvas {
    top: 58px; /*Bajamos la barra 200px de arriba a abajo */
    width: 49px !important;
    position: fixed; /*Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    right: 3px !important; /*Establecemos la barra en la izquierda */
    z-index: 100; /*Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc*/
    background-color: red;
}

.badge {
    background-color: #192a56;
}

.list-group-item {
    cursor: pointer;
}

.pagText, .pag {
    font-size: 13px;
}

#alertFieldsMesagge {
    font-size: 14px;
}

/***************************************/

.offcanvas-header {
    background-color: #192a56;
    color: white;
    height: 45px;
    box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.3);
    border-left: solid 3px #535c68;
}

.offcanvas-body .card {
    border-radius: 0;
}

.offcanvas-body .card-header {
    border-radius: 0;
}

.offcanvas img {
    width: 130px;
    height: 29px;
}

.offcanvas .signature {
    margin-top: -23px;
    font-size: 24px;
}

/*offcanvas Diseñador*/

/* Limita la altura del dropdown de Select2 */
.select2-dropdown {
    max-height: 14em; /* Ajusta la altura según tus necesidades */
    overflow-y: auto; /* Agrega una barra de desplazamiento si es necesario */
}

.categoryTree {
    background-color: white;
    padding: 5px;
}

.spCategory {
    width: 33px;
    height: 19px;
    font-size: 11px;
    background-color: #192a56;
    margin-left: 21px;
}

.spSubCategory {
    width: 19px;
    height: 19px;
    padding-left: 6px;
    padding-top: 5px;
    font-size: 9px;
    background-color: silver;
    color: black;
    margin-left: 10px;
}

.liCategories {
    padding-bottom: 5px;
}

    .liCategories:hover {
        background-color: #dfe4ea;
    }

    .liCategories a {
        color: #2c3e50;
    }

        .liCategories a:hover {
            color: #2c3e50;
        }

.categoryTree ul {
    list-style-type: none !important;
    padding-left: 8px;
}

    .categoryTree ul a:hover {
        background-color: white;
        margin-right: 5px;
    }

/***fin offcanvas*/

/***** LOADING *****/
#overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 1);*/ /* Atenuado */
    background-color: #192a56 !important;
    z-index: 1000; /* Por encima del contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;
}

.navbar {
    z-index: 1050; /* Default Bootstrap z-index */
}

.offcanvas {
    z-index: 1040; /* Default Bootstrap z-index */
}

.svg-frame {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .svg-frame svg {
        position: absolute;
        transition: .5s;
        z-index: calc(1 - (0.2 * var(--j)));
        transform-origin: center;
        width: 344px;
        height: 344px;
        fill: none;
    }

    .svg-frame:hover svg {
        transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
    }

    .svg-frame svg #center {
        transition: .5s;
        transform-origin: center;
    }

    .svg-frame:hover svg #center {
        transform: rotate(-30deg) translateX(45px) translateY(-3px);
    }

#out2 {
    animation: rotate16 7s ease-in-out infinite alternate;
    transform-origin: center;
}

#out3 {
    animation: rotate16 3s ease-in-out infinite alternate;
    transform-origin: center;
    stroke: #ff0;
}

#inner3,
#inner1 {
    animation: rotate16 4s ease-in-out infinite alternate;
    transform-origin: center;
}

#center1 {
    fill: #ff0;
    animation: rotate16 2s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes rotate16 {
    to {
        transform: rotate(360deg);
    }
}

#loadingMessage {
    color: white;
    font-size: 20px;
    margin-top: 20px;
}

/**LOADING*/

/************ OTP *************/
.fa-shield-halved, .fa-camera {
    font-size: 70px;
    color: #dfe6e9;
}

.mailSignatureOtp, .phoneSignatureOtp {
    font-size: 15px;
    color: #bdc3c7;
    margin-top: 6px;
}

.otpEmail, .otpPhone {
    margin-top: 10px;
    font-size: 13px;
}

.inputOtp {
    width: 40px;
    text-align: center;
    height: 40px;
    border: none;
    border-bottom: 3px solid silver;
    font-size: 20px;
    outline: none;
    box-shadow: none;
}

.footer {
    border: solid 1px silver;
    padding: 10px 0px;
}

.otpMesagge {
    font-size: 13px;
}

.codOtp {
    background-color: #f1f2f6;
}
/*********** Fin OTP *************/

/**** Terminos y condiciones ****/
.termAndConditionHeader {
    padding: 17px 0px 9px 0px;
    background-color: #192a56;
    margin-bottom: 2px;
}

.termAndConditionTitle {
    color: white;
    margin-top: 0px;
    font-weight: 500;
}

.fa-file-lines {
    font-size: 45px;
    color: white;
    font-weight: 300;
}

/************** TinyMCE *****************/

.tox-menubar, .tox-toolbar__primary {
    background-color: silver !important;
}

/************* Fin TinyMCE **************/

/** Final terminos y condiciones **/

/************** Firma *************/
/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav-tabs {
    background-color: #192a56;
    border: none;
}

.nav-fill a {
    color: silver;
    font-weight: bold;
    border: none;
}

    .nav-fill a:hover {
        color: silver;
    }

.navTabProfile {
    background-color: #dcdde1;
    color: black;
}

    .navTabProfile a {
        background-color: red;
        color: black;
        border: none;
    }

        .navTabProfile a:hover {
            color: silver;
        }

/* Estilos para centrar verticalmente el modal */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.modal-content {
    width: 100%;
}

.bodyCanvas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.signature-container {
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 35px;
    background-color: #f1f2f6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .signature-container h1 {
        margin-bottom: 20px;
    }

#signatureCanvas {
    background-color: #f1f2f6;
    border-bottom: dashed 3px #ced6e0;
}

.canvasContainer {
    background-color: #f1f2f6;
}

.btnCamera {
    margin-top: -20px;
}

    .btnCamera button {
        font-size: 17px;
    }

.cameraTitle {
    margin-bottom: -20px;
}

.fa-signature {
    font-size: 60px;
    color: #dfe6e9;
}

.fa-circle-check {
    font-size: 80px;
    color: #A3CB38;
}

/************ Fin Firma ***********/

/***** Terminos y condiciones *****/
.list-group-item {
    background-color: #dfe6e;
}

.headerField, .cart-title {
    color: #57606f;
}

.handle {
    cursor: pointer;
}

    .handle:hover {
        color: black;
        font-size: 15px;
    }

/*Formularios*/
.help-block {
    font-size: 12px;
    color: red;
}

.btnColapDoc {
    font-size: 11px !important;
    padding: 3px 6px;
}

/**************************************************************************************/
/************************************* FIRMANTES **************************************/
/**************************************************************************************/
#formSignaturesAssi .list-group-item {
    background-color: #dfe4ea;
    border: dotted #a4b0be 1.5px;
}

#cardProgramSignature {
    margin-top: -15px;
}

    #cardProgramSignature .requirePhoto {
        font-size: 13px !important;
        margin-left: -37px;
    }

.selectedGroupsContainer {
    margin-top: 2px !important;
    margin-bottom: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 0px !important;
}

    .selectedGroupsContainer .form-check-input {
        font-size: 14px !important;
        margin-top: 7px;
    }

    .selectedGroupsContainer label {
        margin-top: -20px !important;
        color: #718093;
        margin-right: 7px;
    }

.fa-whatsapp {
    font-size: 19px;
    font-weight: 600;
}

.btnWhat {
    border-left: solid 1.5px white;
    background-color: #00A884;
    color: #dfe4ea;
    box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.3);
}

    .btnWhat:hover {
        color: white;
    }
/**************************************************************************************/
/*********************************** FIN FIRMANTES ************************************/
/**************************************************************************************/

.filter {
    font-size: 17px;
}

#checkDashboardFilter {
    /*font-size: 11px;*/
    /*padding-right: -5px !important;*/
}
/**************************************************************************************/
/*************************************** CAMPOS ***************************************/
/**************************************************************************************/
.error {
    color: red;
    font-size: 0.875em;
}

.labelFields {
    font-size: 12px;
    font-weight: 600;
    color: #273c75;
    margin-bottom: 0px;
}

.elementOut {
    display: none;
}

.adminDocHead {
    background-color: #dfe6e9;
    padding-right: 15px;
    border-radius: 2px;
}

/*#inputFileSection {
    height: 100%;
    border: 1px dashed #192a56;
    background-color: #dfe6e9;
    padding: 4px;
}
*/

.drop-zoner {
    margin-top: -10px;
    border: 2px dashed #ccc;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease-in-out;
}

    .drop-zoner:hover {
        background-color: #e9ecef;
    }

    .drop-zoner.dragover {
        background-color: #d1ecf1;
        border-color: #17a2b8;
    }

.fa-cloud-arrow-up {
    font-size: 24px;
}

.modalInputTipeField {
    padding: 10px 0px 2px 10px;
    border: #dfe6e9 solid 1px;
}

    .modalInputTipeField:hover {
        background-color: #dfe6e9;
    }

.form-check-input {
    cursor: pointer;
}

.modalInputTipeField .form-switch {
    font-size: 13px !important;
    cursor: pointer;
}

.modalInputTipeField label {
    font-size: 13px;
    color: #576574;
    cursor: pointer;
}

input[type="radio"]:checked {
    background-color: #192a56;
}

input[type="checkbox"]:checked {
    background-color: #192a56;
}

.fa-floppy-disk {
    color: #a4b0be;
    font-size: 22px;
}

.fa-pen-to-square {
    font-size: 21px;
    color: #a4b0be;
    font-weight: 200;
}

.headEditFields {
    padding: 0px 12px;
    background-color: #192a56;
    color: white;
    display: none;
}

.titleEditFields {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
}

.changeFields {
    font-size: 12px;
}

.fa-circle-exclamation {
    font-size: 26px;
    color: #57606f;
}

.alertFields {
    font-size: 14px;
    text-align: center;
    color: black;
    background-color: #f1f2f6;
    border: dashed 2px #ced6e0;
    margin-bottom: 0px;
}

.fa-hand, .fa-thumbs-up {
    font-size: 21px;
}

.toastMessage {
    font-size: 15px;
}

#tabContainer {
    background-color: #dfe6e9;
}

    #tabContainer .nav-link {
        color: #747d8c;
    }

        #tabContainer .nav-link:hover {
            color: #2f3542;
        }
/**************************************************************************************/
/*********************************** FIN CAMPOS ***************************************/
/**************************************************************************************/

/**************************************************************************************/
/*********************************** MEDIA QUERY **************************************/
/**************************************************************************************/
/* Estilos para dispositivos pequeños */

@media (min-width: 375px) and (max-width: 767.98px) { /* 768px - 1px */

    .offcanvas {
        width: 100%;
    }

    .paginator2 {
        display: none;
    }

    .btnViewDocument {
        display: block;
    }

    .offcanvasDesigner {
        margin-top: 56px;
        width: 80% !important;
    }

    #alertFieldsMesagge {
        font-size: 11px;
    }

    .drop-zone {
        margin-top: 35px;
        width: 100vw;
        height: 100%; /*Ajustado para pantallas más pequeñas */
    }

    .fieldBody {
        max-height: 62vh !important; /* El contenedor no ocupará más del 70% del alto de la pantalla */
    }

    /*Deshabilita el link de permisos del navbar*/
    .navLinkPermissions {
        display: none;
    }

    .fa-xmark {
        background-color: blue;
        color: white !important;
        font-size: 80px !important;
    }

    .paginator {
        top: 55px;
        left: 5px;
        width: 35px;
        font-size: 10px;
        padding-bottom: 23px !important;
    }

    .z {
        display: none;
    }

    .card-footer {
        border: none;
        right: 20px;
        width: 90%;
    }

    /**********************************************/
    /******************* MODAL OPT ****************/
    /**********************************************/

    .modalBodyOtp {
        padding-top: 10%;
        background-color: #dfe4ea;
    }

        .modalBodyOtp h5 {
            font-size: 15px;
        }

    /***** Logo escudo *****/
    .fa-shield-halved {
        font-size: 70px;
        color: #192a56;
        opacity: 87%;
    }

    /******* Inputs ********/
    .inputTipeField {
        padding-left: 5px;
        border: solid 1px silver;
        background-color: white;
        height: 33px;
    }

    .methodOtp {
        color: black;
        font-size: 14px;
    }

    .phoneSignatureOtp, .mailSignatureOtp {
        font-size: 14px;
        color: #808e9b;
    }

    /** mensaje tengo cod ***/
    .otpMesagge {
        font-size: 13px;
        color: black;
    }
    /**********************************************/
    /*************** FIN MODAL OPT ****************/
    /**********************************************/

    /**********************************************/
    /********* MODAL TERMINOS Y CONDICIONES *******/
    /**********************************************/

    .fa-file-lines {
        font-size: 29px;
    }

    .termAndConditionTitle {
        font-size: 14px;
    }

    /* Modo administrador */
    .editor-container-admi {
        height: 78vh;
    }

    /* Modo firmante */
    .modalBodyTerm {
        padding-top: 4%;
        background-color: #dfe4ea;
    }

    .editor-container-user {
        height: 65vh;
        overflow: hidden;
    }

    /* Permitir el scroll dentro del iframe de TinyMCE */
    .tox-edit-area__iframe {
        -webkit-overflow-scrolling: touch !important; /* Habilita el scroll en iPhone */
        overflow-y: auto !important; /* Permite el desplazamiento vertical */
        height: 100% !important; /* Ajustar al tamaño del contenedor */
    }

    .termMesagge {
        font-size: 12px;
    }

    #checkAceptTermAndCondition {
        font-size: 18px;
    }
    /**********************************************/
    /****** FIN MODAL TERMINOS Y CONDICIONES ******/
    /**********************************************/

    /**********************************************/
    /***************** MODAL FIRMA ****************/
    /**********************************************/
    .fa-signature {
        font-size: 50px;
    }

    .nav-fill {
        height: 38px;
        border: none;
    }

        .nav-fill li {
            height: 30px;
            border: none;
            /*background-color: red;*/
        }

    #ModalSing p {
        font-size: 13px;
        color: #353b48;
    }

    #ModalSing h6 {
        font-size: 14px;
        color: #353b48;
    }

    .canvasContainer {
        background-color: white;
    }

    /**********************************************/
    /**************** FIN MODAL FIRMA *************/
    /**********************************************/
}

/* Estilos para dispositivos Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* .offcanvas-body {
        background-color: blue !important;
    }
*/

    .drop-zone {
        width: 90vw; /* Usa un ancho más dinámico */
        /*height: 70vh;*/ /* Ajusta la altura para que no sobrepase la ventana */
    }

    .offcanvasDesigner {
        margin-top: 56px;
        width: 45% !important;
        /*background-color: red !important;*/
    }

    .offcanvas {
        width: 40% !important;
    }

    .fieldBody {
        max-height: 65vh !important; /* El contenedor no ocupará más del 70% del alto de la pantalla */
    }

    .btn-close {
        display: block !important;
    }

    .custom-btn-close {
        position: relative;
        display: inline-block;
        width: 1em;
        height: 1em;
        font-size: 20px;
        color: yellow; /*Color del icono */
        background: none;
        border: none;
        opacity: 1; /*Asegúrate de que la opacidad sea 1 */
    }

        .custom-btn-close::before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 0.1em;
            background-color: currentColor;
            content: '';
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .custom-btn-close::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 0.1em;
            background-color: currentColor;
            content: '';
            transform: translate(-50%, -50%) rotate(-45deg);
        }

    .canvasCol {
        /*width: 62vh;
        height: 87vh;*/
        background-color: blue;
    }

    .card-footer {
        border: none;
        right: 0px;
        width: 40%;
        border: red solid 1px;
    }

    /*paginador*/
    .paginator {
        top: 55px;
        left: 5px;
        width: 50px;
        font-size: 15px;
        padding-bottom: 23px !important;
    }

    .z {
        display: none;
    }

    input {
        font-size: 10px;
    }

        input::placeholder {
            font-size: 10px; /* Cambia esto al tamaño de fuente que prefieras */
        }

    /**********************************************/
    /******************* MODAL OPT ****************/
    /**********************************************/

    .modalBodyOtp {
        padding-top: 20%;
        background-color: #dfe4ea;
    }

        .modalBodyOtp h5 {
            font-size: 24px;
        }

    /***** Logo escudo *****/
    .fa-shield-halved {
        font-size: 100px;
        color: #192a56;
        opacity: 87%;
    }

    /******* Inputs ********/
    .inputTipeField {
        padding-left: 19px;
        border: solid 1px silver;
        background-color: white;
        height: 40px;
    }

    .methodOtp {
        color: black;
        font-size: 19px;
    }

    .phoneSignatureOtp, .mailSignatureOtp {
        font-size: 19px;
        color: #808e9b;
    }

    /******** Check ********/
    .otpEmail, .otpPhone {
        font-size: 15px !important;
    }

    /******** button ********/
    #btnSaveOTP, #submitCode, #next {
        font-size: 18px;
        padding: 5px 20px;
    }

    /*** check tengo cod ****/
    #checkReceivedOtp {
        font-size: 20px;
    }

    /** mensaje tengo cod ***/
    .otpMesagge {
        font-size: 18px;
        color: black;
    }

    /***** contendor OTP ****/
    .codOtp {
        background-color: white;
    }

    /******* input OTP ******/
    .inputOtp {
        width: 60px;
        height: 70px;
        font-size: 25px;
        font-weight: bold;
        color: black;
        border: solid 2px #dfe4ea;
    }
    /**********************************************/
    /*************** FIN MODAL OPT ****************/
    /**********************************************/

    /**********************************************/
    /********* MODAL TERMINOS Y CONDICIONES *******/
    /**********************************************/

    /* Modo administrador */
    .editor-container-admi {
        height: 78vh;
    }

    /* Modo firmante */
    .modalBodyTerm {
        padding-top: 9%;
        background-color: #dfe4ea;
    }

    .editor-container-user {
        height: 78vh;
    }

    #checkAceptTermAndCondition {
        font-size: 24px;
    }

    #btnAceptTermAndCondition {
        font-size: 17px;
        padding: 5px 20px;
    }

    /**********************************************/
    /****** FIN MODAL TERMINOS Y CONDICIONES ******/
    /**********************************************/
}

/* Estilos para dispositivos laptop */
@media (min-width: 992px) and (max-width: 1600px) {
    .offcanvasDesigner {
        width: 23% !important;
    }

    #cardFiels .fieldBody {
        max-height: 59.5vh !important;
    }

    .fieldBody {
        /*max-height: auto !important;*/ /* El contenedor no ocupará más del 70% del alto de la pantalla */
        max-height: 72vh !important; /* El contenedor no ocupará más del 70% del alto de la pantalla */
    }

    .alertFields {
        font-size: 12px;
    }

    .btnOffcanvas:hover {
        color: silver;
    }

    .btn-close {
        display: block !important;
    }

    .custom-btn-close {
        position: relative;
        display: inline-block;
        width: 1em;
        height: 1em;
        font-size: 20px;
        color: yellow; /*Color del icono */
        background: none;
        border: none;
        opacity: 1;
        Asegúrate de que la opacidad sea 1
    }

        .custom-btn-close::before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 0.1em;
            background-color: currentColor;
            content: '';
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .custom-btn-close::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 0.1em;
            background-color: currentColor;
            content: '';
            transform: translate(-50%, -50%) rotate(-45deg);
        }

    /**********************************************/
    /******************* MODAL OPT ****************/
    /**********************************************/
    .modalBodyOtp {
        padding-top: 4%;
        background-color: #dfe4ea;
    }

        .modalBodyOtp h5 {
            font-size: 16px;
        }

    /***** Logo escudo *****/
    .fa-shield-halved {
        font-size: 75px;
        color: #192a56;
        opacity: 87%;
    }

    /******* Inputs ********/
    .inputTipeField {
        padding-left: 19px;
        border: solid 1px silver;
        background-color: white;
        height: 35px;
    }

    /** mensaje tengo cod ***/
    .otpMesagge {
        font-size: 16px;
        color: black;
    }

    #btnSaveOTP, #submitCode, #next {
        margin: 15px 0px;
        padding: 5px 15px
    }

    /***** contendor OTP ****/
    .codOtp {
        background-color: white;
    }

    /**********************************************/
    /*************** FIN MODAL OPT ****************/
    /**********************************************/

    /**********************************************/
    /********* MODAL TERMINOS Y CONDICIONES *******/
    /**********************************************/

    /* Modo administrador */
    .editor-container-admi {
        height: 66vh; /* Altura por defecto */
    }

    /* Modo firmante */
    .modalBodyTerm {
        padding-top: 4%;
        background-color: #dfe4ea;
    }

    .editor-container-user {
        height: 69vh; /* Altura por defecto */
    }

    .fa-file-lines {
        font-size: 35px;
    }

    .termAndConditionTitle {
        font-size: 17px;
    }

    /**********************************************/
    /****** FIN MODAL TERMINOS Y CONDICIONES ******/
    /**********************************************/
}

/* Estilos para dispositivos extra grandes */
@media (min-width: 1600px) {
    /* .offcanvasDesigner {
        background-color: aqua !important;
    }*/
    .fieldBody {
        /*max-height: auto !important;*/ /* El contenedor no ocupará más del 70% del alto de la pantalla */
        max-height: 70vh !important; /* El contenedor no ocupará más del 70% del alto de la pantalla */
    }

    .btn-close {
        display: block !important;
        color: white;
    }

    .custom-btn-close {
        position: relative;
        display: inline-block;
        width: 1em;
        height: 1em;
        font-size: 20px;
        color: yellow; /*Color del icono */
        background: none;
        border: none;
        opacity: 1;
    }

        .custom-btn-close::before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 0.1em;
            background-color: currentColor;
            content: '';
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .custom-btn-close::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 0.1em;
            background-color: currentColor;
            content: '';
            transform: translate(-50%, -50%) rotate(-45deg);
        }

    /**********************************************/
    /******************* MODAL OPT ****************/
    /**********************************************/

    .modalBodyOtp {
        padding-top: 110px;
    }

        .modalBodyOtp h6 {
            font-size: 20px;
        }

    .fa-shield-halved {
        font-size: 100px;
    }

    #btnSaveOTP, #submitCode, #next {
        font-size: 16px;
        padding: 5px 15px
    }

    .otpMesagge {
        font-size: 15px;
        color: black;
    }

    #btnSaveOTP, #submitCode, #next {
        margin: 15px 0px;
        font-size: 17px;
        padding: 5px 15px
    }

    /**********************************************/
    /*************** FIN MODAL OPT ****************/
    /**********************************************/

    /*Modal Terminos y condiciones*/

    /* Modo administrador */
    .editor-container-admi {
        height: 73vh; /* Altura por defecto */
    }

    /* Modo firmante */
    .modalBodyTerm {
        padding-top: 4%;
        background-color: #dfe4ea;
    }

    .editor-container-user {
        height: 72vh; /* Altura por defecto */
    }
}