@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

.loading-container {
    position: fixed; /* Fija el contenedor en la pantalla */
    top: 0;
    left: 0;
    width: 100%; /* Ocupar el 100% del ancho de la pantalla */
    height: 100%; /* Ocupar el 100% de la altura de la pantalla */
    display: flex; /* Usar Flexbox para centrar */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con opacidad (opcional) */
    z-index: 1000; /* Asegurarte de que esté encima de otros elementos */
}

.loading-image {
    width: 33px; /* Ajusta el tamaño según necesites */
    height: 33px;
    animation: spin 1s linear infinite; /* Añade la animación */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.combo-dropdown-body .dropdown-item {
    background: none !important;
    color: inherit !important;
}

/* Estilos para las imágenes de los thumbnails */
.directory-navigator {
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 1rem;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 576px) {
    .directory-navigator {
        width: 100%; /* 100% de ancho para pantallas pequeñas */
        height: 100%; /* 100% de ancho para pantallas pequeñas */
    }
}

/* Estilos para pantallas medianas */
@media (min-width: 577px) and (max-width: 768px) {
    .directory-navigator {
        width: 70%; /* 70% de ancho para pantallas medianas */
        height: 70%; /* 70% de ancho para pantallas medianas */
    }
}

.breadcrumb {
    --bs-breadcrumb-divider: '>'; /* Cambia '/' por '>' */
}

.breadcrumb-item button {
    font-size: 1rem; /* Ajusta el tamaño de fuente según tus necesidades */
    padding: 0; /* Elimina el padding para que los botones se ajusten al breadcrumb */
    color: #0d6efd; /* Color azul de Bootstrap */
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

    .breadcrumb-item button:hover {
        text-decoration: underline;
    }

/* Container for elements using Flexbox */
.elements-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espacio entre elementos */
}

/* Each element card with fixed width */
.element-card {
    width: 200px; /* Ancho fijo */
    flex: 0 0 auto; /* No crecer ni encoger */
}

/* Thumbnail image inside the button */
.thumbnail {
    text-align: center;
    width: 150px;
    height: 150px;
    object-fit: contain; /* Mantiene la proporción y muestra todo el contenido */
    border: 1px solid #ddd; /* Opcional: agrega un borde suave */
    border-radius: 4px; /* Opcional: bordes redondeados */
    background-color: #f8f9fa; /* Opcional: color de fondo para imágenes transparentes */
    margin: 0 auto 0rem auto; /* Espaciado derecho */
}

.btn-thumbnail {
    width: 40px; /* Ajusta el tamaño según tus necesidades */
    height: 40px;
    object-fit: contain; /* Mantiene la proporción y muestra todo el contenido */
    border: 1px solid #ddd; /* Opcional: agrega un borde suave */
    border-radius: 4px; /* Opcional: bordes redondeados */
    background-color: #f8f9fa; /* Opcional: color de fondo para imágenes transparentes */
}

/* Botones de Directorios y Elementos */
.btn-directory,
.btn-element {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
    .btn-thumbnail {
        width: 30px;
        height: 30px;
    }

    .element-card {
        width: 100%; /* Ajusta a 100% en pantallas pequeñas */
    }
}

.responsive-window-directories {
    /*justify-content: center;*/ /* Centra horizontalmente */
    /*align-items: center;*/ /* Centra verticalmente */
    width: 90vw !important; /*Se asegura de que la ventana use el 90% del ancho de la pantalla*/
    height: 90vh !important; /*80% de la altura de la pantalla*/
    max-width: 90vw !important;
    max-height: 90vh !important;
    min-width: 300px !important; /*Ajusta el mínimo a un tamaño más pequeño para pantallas pequeñas*/
    min-height: 300px !important; /*Ajusta el mínimo para pantallas pequeñas*/
    /*box-sizing: border-box;*/
    padding: 0px !important;
    margin: 0px !important; /* Centra la ventana horizontalmente*/
}

/* Estilos generales para DxWindow */
.responsive-window {
    /*justify-content: center;*/ /* Centra horizontalmente */
    /*align-items: center;*/ /* Centra verticalmente */
    width: 100vw !important; /*Se asegura de que la ventana use el 90% del ancho de la pantalla*/
    height: 100vh !important; /*80% de la altura de la pantalla*/
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 300px !important; /*Ajusta el mínimo a un tamaño más pequeño para pantallas pequeñas*/
    min-height: 300px !important; /*Ajusta el mínimo para pantallas pequeñas*/
    /*box-sizing: border-box;*/
    padding: 0px !important;
    margin: 0px !important; /* Centra la ventana horizontalmente*/
}

/* Media Queries para dispositivos pequeños (smartphones) */
/*@media (max-width: 576px) {
    .responsive-window {
        width: 100vw !important;
        height: 100vh !important;
        min-width: 350px !important;
        min-height: 300px !important;
    }
}*/

.container-fluid, .row {
    /*flex: 0 0 30%;*/ /* Ocupa el 30% del ancho del contenedor */
    /*height: 100vh;*/ /* O cualquier otro valor que se adapte a tu diseño */
    /*display: flex;*/
    /*flex-wrap: nowrap;*/ /* Evita que los elementos hijos se envuelvan */
}

.sidebar {
    height: calc(100vh - 150px);
    /*background-color: #ffffff;*/
    padding: 10px;
}

.view-button-container {
    z-index: 99; /* Asegurarte de que el botón esté visible y por encima de otros elementos */
    pointer-events: none; /* Evita que interfiera con otros elementos interactuables */
}

    .view-button-container > * {
        pointer-events: auto; /* Habilita el click solo en el botón */
    }

.reload-button-container {
    z-index: 100; /* Asegurarse de que el botón esté encima de otros elementos */
}

.button-container {
    margin-bottom: 0 !important;
    /* border-top: 1px solid #ddd; */ /* Línea superior separadora */
}

.container-fluid-configurator {
    /*display: flex;*/
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 97.5vw;
    height: 92.3vh;
    max-width: 100vw;
    max-height: 100vh;
    /*overflow: hidden;*/ /* Evita desbordamientos */
    padding: 0px;
    overflow-y: auto; /* Solo permitir scroll vertical */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 576px) {
    .container-fluid-configurator {
        width: 91.4vw;
        /*height: 89vh;*/
    }
}

/* Estilos para pantallas medianas */
@media (min-width: 577px) and (max-width: 768px) {
    .container-fluid-configurator {
        width: 96.5vw;
        /*height: 89vh;*/
    }
}

.sidebar-configurator, .right-side-configurator {
    /*flex: 1 1 0;*/ /* Asegura que ambos elementos crezcan en proporción a su flex-basis */
    /*max-width: 100%;*/ /* Limitar el ancho de la sidebar-configurator a un tercio de la pantalla */
    /*flex-grow: 0;*/ /* Evita que se estiren innecesariamente */
    /*flex-basis: 100%;*/ /* Ocupa todo el ancho cuando la columna se contrae */
}

.sidebar-configurator {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.right-side-configurator {
    height: 100%;
    max-width: 100%;
    background-color: whitesmoke;
    padding: 50px;
    box-sizing: border-box;
    display: flex;*/*/*/
    flex-direction: column;
    flex-grow: 1; /*/* Permite que ocupe el espacio disponible */
    overflow: hidden; /* Evita desbordamientos */
    margin: auto;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

/* Añade esta clase a tu CSS */
.responsive-preview-image {
    /*padding:20px;*/
    max-width: 90% !important; /* Evita que la imagen sobresalga del contenedor */
    max-height: 90% !important; /* Evita que la imagen sea más alta que el contenedor */
    /*object-fit: contain !important;*/ /* Ajusta la imagen para que quepa sin distorsión */
    /*margin: auto !important;*/ /* Margen automático para centrar */
}

.preview-container {
    /*padding:20px;*/
    display: flex;
    background-color: whitesmoke;
    width: 100% !important;
    height: 100% !important;
    /*    max-height: 100% !important;
    max-width: 100% !important;*/
    justify-content: center;
    align-items: center;
}

.dx-window {
    width: 100% !important;
    min-width: 250px !important;
    max-width: 600px !important;
}

@media (max-width: 600px) {
    .dx-window {
        width: 100% !important; 
        min-width: 250px !important; 
    }
}

@media (min-width: 601px) {
    .dx-window {
        width: 600px !important;
    }
}

.container-border {
    border: 2px solid whitesmoke; /* Color del borde */
    padding: 10px;
    /*border-radius: 5px;*/ /* Opcional, para bordes redondeados */
}

.form-container {
    max-height: 100%; /* Ajusta la altura del contenedor */
    overflow-y: auto; /* Solo permitir scroll vertical */
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.line-separator {
    border-top: 1px solid #ccc;
    margin: 5px 0;
    width: 100%;
}

.tab-page-bordered {
    border-left: 1px solid #ccc; /* Define un borde gris claro */
    border-right: 1px solid #ccc; /* Define un borde gris claro */
    border-bottom: 1px solid #ccc; /* Define un borde gris claro */
    padding: 0px !important; /* Espacio interno opcional */
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.menu-separator {
    display: block; /* Asegura que se muestre como un bloque */
    height: 1px;
    background-color: #ccc !important; /* Color de la línea */
    margin: 0px 30px 0px 30px; /* Espaciado superior e inferior */
    border: none;
    pointer-events: none; /* Para que no sea seleccionable */
}

.center-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 90vh;
    /*padding: 20px;*/ /* Añade un poco de espacio alrededor */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
    border-width: 1px; /* Ancho del borde */
    border-style: solid; /* Estilo del borde */
    border-color: #ccc; /* Color del borde */
    flex-direction: column; /* Coloca los elementos verticalmente */
}

.grid-container {
    display: grid;
    grid-template-rows: auto auto auto;
    /* gap: 1rem;  */ /* Espacio entre filas */
    height: 100%; /* Hace que el contenedor abarque toda la altura de la página */
    width: 95%;
    padding-top: 0; /* Remover padding top si existe */
}

/* ===========================
   Inicio login
   =========================== */

.login-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 95vh;
    /*padding: 20px;*/ /* Añade un poco de espacio alrededor */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.login-container-II {
    max-width: 400px !important;
    /*background-color:whitesmoke;*/
}

/* ===========================
   Fin login
   =========================== */

/* ===========================
   Inicio menús superiores carteras
   =========================== */

.top-row {
    /*display: flex;*/
    justify-content: center; /* Centra los botones horizontalmente */
    align-items: center;
    /*width: 100%;*/
    /*padding: 5px 0px 5px 0px;*/ /* Añade algo de espacio alrededor de los botones */
    border: 1px solid #ccc; /* Opcional: añadir una línea debajo de los botones */
    background-color: whitesmoke; /* Opcional: color de fondo para la fila de botones */
    /* position: fixed; */ /* Fija la fila de botones en la parte superior */
    /* top: 0; */
    /* left: 0; */
    /* z-index: 1000; */ /* Asegura que esté por encima de otros elementos */
}

.left-align,
.middle-align,
.right-align {
    /*display: flex;*/
    /* width: 150px; */ /* Ancho fijo para todos los botones */
    align-items: center; /* Alinea el texto y el icono en el centro del botón */
}

.left-align {
    /* margin-left: 10px; */ /* Botón a la izquierda del todo */
    /* flex: 1; */ /* Toma el espacio disponible hacia la izquierda */
    text-align: center;
    width: 100px;
}

.center-align {
    /* margin: auto auto; */ /* Botón centrado */
    /* flex: 1; */ /* Centra el botón en el contenedor */
    /* text-align: center; */
    width: 100px;
    text-align: center;
}

.right-align {
    margin-right: 10px; /* Botón a la derecha del todo */
    /*flex: 1;*/ /* Toma el espacio disponible hacia la derecha */
    /* text-align: right; */
    width: 100px;
    text-align: center;
}

.separator-horizontal {
    flex: 1; /* Toma el espacio disponible hacia la derecha */
    width: 1px; /* Ancho del separador */
    height: 20px; /* Altura del separador (puede ajustarse o eliminarse si se usa un separador de línea vertical) */
    background-color: transparent; /* Hacer transparente o cambiar el color según sea necesario */
    margin: 0px 20px 0px 20px;
}

/* ===========================
   Fin menús superiores carteras
   =========================== */

/* ===========================
   Inicio iconos
   =========================== */

.icon {
    width: 1rem;
    height: 1rem;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block; /* Asegura que el elemento se muestre en línea */
}

.user-settings-icon {
    -webkit-mask-image: url("/images/menu lateral/userSettings.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/userSettings.svg");
}

.settings-icon {
    -webkit-mask-image: url("/images/menu lateral/settings.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/settings.svg");
}

.dashboards-icon {
    -webkit-mask-image: url("/images/menu lateral/dashboards.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/dashboards.svg");
}

.calendar-icon {
    -webkit-mask-image: url("/images/menu lateral/Calendar.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/Calendar.svg");
}

.home-icon {
    -webkit-mask-image: url("/images/menu lateral/home.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/home.svg");
}

.projects-icon {
    -webkit-mask-image: url("/images/menu lateral/projects.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/projects.svg");
}

.sales-icon {
    -webkit-mask-image: url("/images/menu lateral/sales.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/sales.svg");
}

.customers-icon {
    -webkit-mask-image: url("/images/menu lateral/customers.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/menu lateral/customers.svg");
}

.btn-icon-reload {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/reload.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/acciones/reload.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block; /* Asegura que el elemento se muestre en línea */
}

.btn-icon-next {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/arrow-right.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/acciones/arrow-right.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block; /* Asegura que el elemento se muestre en línea */
}

.btn-icon-previous {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/arrow-left.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/acciones/arrow-left.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block; /* Asegura que el elemento se muestre en línea */
}

.btn-icon-save-and-close {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/save-and-exit.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/acciones/save-and-exit.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block; /* Asegura que el elemento se muestre en línea */
}

.btn-icon-save {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/save.svg"); /* Verifica que la ruta comience con '/' */
    mask-image: url("/images/acciones/save.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block; /* Asegura que el elemento se muestre en línea */
}

.btn-icon-delete {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/delete.svg");
    mask-image: url("/images/acciones/delete.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-delete-red-16x {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/delete.svg");
    mask-image: url("/images/acciones/delete.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: red;
    display: inline-block;
}

.btn-icon-delete-rex-21x {
    width: 21px;
    height: 21px;
    -webkit-mask-image: url("/images/acciones/delete.svg");
    mask-image: url("/images/acciones/delete.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: red;
    display: inline-block;
}

.btn-icon-cancel {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/cancel.svg");
    mask-image: url("/images/acciones/cancel.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-ok {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/ok.svg");
    mask-image: url("/images/acciones/ok.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-undo {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/undo.svg");
    mask-image: url("/images/acciones/undo.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-add {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/add.svg");
    mask-image: url("/images/acciones/add.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: green;
    display: inline-block;
}

.btn-icon-add-directory-navigator {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("/images/acciones/ok.svg");
    mask-image: url("/images/acciones/ok.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: white;
    display: inline-block;
}

.btn-icon-logikal {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/Orgadata_Flecha_16x16.png");
    mask-image: url("/images/Orgadata_Flecha_16x16.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: orange;
    display: inline-block;
}

.btn-icon-enCAD {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/enCAD_16x16.ico");
    mask-image: url("/images/enCAD_16x16.ico");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #ed3237;
    display: inline-block;
}

.btn-icon-edit {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/edit.svg");
    mask-image: url("/images/acciones/edit.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-edit-grid {
    width: 21px;
    height: 21px;
    -webkit-mask-image: url("/images/acciones/edit.svg");
    mask-image: url("/images/acciones/edit.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: black;
    display: inline-block;
}

.btn-icon-copy {
    width: 21px;
    height: 21px;
    -webkit-mask-image: url("/images/acciones/copy.svg");
    mask-image: url("/images/acciones/copy.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: black;
    display: inline-block;
}

.btn-icon-settings {
    width: 21px;
    height: 21px;
    -webkit-mask-image: url("/images/acciones/settings.svg");
    mask-image: url("/images/acciones/settings.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: black;
    display: inline-block;
}

.btn-icon-choose-columns {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/choose-columns.svg");
    mask-image: url("/images/acciones/choose-columns.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.show-print-preview {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/show-print-preview.svg");
    mask-image: url("/images/acciones/show-print-preview.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.print-icon {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/print.svg");
    mask-image: url("/images/acciones/print.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.print-folder-close {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/folder-close.svg");
    mask-image: url("/images/acciones/folder-close.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #f8d775;
    display: inline-block;
}

.btn-icon-up {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/up.svg");
    mask-image: url("/images/acciones/up.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-down {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/down.svg");
    mask-image: url("/images/acciones/down.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-currency-euro {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("/images/acciones/currency-euro.svg");
    mask-image: url("/images/acciones/currency-euro.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.btn-icon-only {
    padding: 0.25rem; /* Ajusta el padding según sea necesario */
}

.flex-grow-1 {
    flex-grow: 1;
}

/* ===========================
   Fin iconos
   =========================== */

/* ===========================
   Inicio tabs
   =========================== */

/* ===========================
   Fin tabs
   =========================== */

/* ===========================
   Inicio index
   =========================== */

/* Estilos generales para la imagen */
.responsive-image {
    width: 100%;
    max-width: 500px; /* Tamaño máximo para ordenadores */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilos específicos para dispositivos móviles */
@media only screen and (max-width: 768px) {
    .responsive-image {
        max-width: 300px; /* Reduzco el tamaño máximo para dispositivos móviles */
    }
}

/* ===========================
   Fin index
   =========================== */

/* ===========================
   Inicio popup si, no y cancelar
   =========================== */

/* Estilo para el popup */
.popup-class {
    background-color: #f9f9f9; /* Color de fondo */
    border-radius: 10px; /* Bordes redondeados */
    font-size: 15px; /* Tamaño de texto general */
    padding: 20px; /* Espacio interno */
}

/* Estilo para el título */
.title-class {
    color: #333; /* Color del texto del título */
    font-weight: bold; /* Peso del texto */
    font-size: 18px; /* Tamaño del texto del título */
}

/* Estilo para el icono */
.icon-class {
    color: #f0ad4e; /* Color del icono */
}

/* Estilo para el contenido del texto */
.content-class {
    font-size: 16px; /* Tamaño del texto del contenido */
}

/* Estilo para el botón de confirmación */
.confirm-button-class {
    background-color: #3085d6; /* Color de fondo del botón de confirmación */
    color: white; /* Color del texto del botón */
    width: 100px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    font-size: 14px; /* Tamaño del texto del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    margin: 5px; /* Espacio entre botones */
}

/* Estilo para el botón de denegación */
.deny-button-class {
    background-color: #d33; /* Color de fondo del botón de denegación */
    color: white; /* Color del texto del botón */
    width: 100px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    font-size: 14px; /* Tamaño del texto del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    margin: 5px; /* Espacio entre botones */
}

/* Estilo para el botón de cancelación */
.cancel-button-class {
    background-color: #aaa; /* Color de fondo del botón de cancelación */
    color: white; /* Color del texto del botón */
    width: 100px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    font-size: 14px; /* Tamaño del texto del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    margin: 5px; /* Espacio entre botones */
}


/* ===========================
   Fin si, no y cancelar
   =========================== */

/* ===========================
   Inicio grid
   =========================== */

.dataRowClass:hover {
/*    background-color: red !important;
    border-color: red !important;
    opacity: 20%;
    color: blue !important;
    cursor: pointer;*/
}

/* ===========================
   Fin grid
   =========================== */

/* ===========================
   Inicio richedit
   =========================== */

.rich-style {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ===========================
   Fin richedit
   =========================== */

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que ocupe todo el ancho de la pantalla */
    padding: 10px 0;
    background-color: #f8f9fa; /* Fondo opcional para diferenciar la fila superior */
    position: sticky; /* Fija la fila superior en la parte superior */
    top: 0; /* Asegura que esté en la parte superior */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.main-content {
    /*display: flex;*/
    /*flex-direction: column;*/ /* Alinea verticalmente los elementos del contenido principal */
    align-items: center; /* Centra horizontalmente los elementos del contenido principal */
    padding-top: 10px; /* Añade espacio alrededor del contenido principal */
    /*flex-grow: 1;*/ /* Permite que el contenido principal crezca y ocupe el espacio disponible */
    overflow-y: auto; /* Añade scroll si el contenido es demasiado grande */
    overflow-x: hidden; /* Añade scroll si el contenido es demasiado grande */
    /*width: 100%;*/
}