html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}
.click{
  cursor: pointer;
}
td.cambio_dia{
  cursor:pointer!important;
}
.row.vh60 {
  max-height: 60vh;
  overflow-y: auto;
}
.row.vh90 {
  max-height: 90vh;
  overflow-y: auto;
}
.row.vh70 {
  max-height: 70vh;
  overflow-y: auto;
}
.row.vh80 {
  max-height: 80vh;
  overflow-y: auto;
}
img.checker {
  max-width: 20px;
}
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.menu-item {
  padding: 10px;
  border-left: 4px solid transparent;
  transition: 0.3s;
  font-weight: bold;
}
.menu-item:hover {
  background-color: #e9ecef;
  border-left-color: #007bff;
  cursor: pointer;
}
body {
  display: flex;
  flex-direction: column;
}
td.nombre_receta{
  min-width: 100px;
    max-width: 100px;
    font-size: 11px;
  overflow: hidden;         /* Oculta el texto que excede el ancho */
    text-overflow: ellipsis;  /* Muestra "..." cuando el texto es truncado */
    white-space: nowrap; 
    cursor: pointer;
}
.content {
  flex: 1;
}
/* Estilos para el contenedor y el botón */
.dropdown {
  position: relative;
  display: inline-block;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  max-width: 100%;
  white-space: normal;
}
.select2-selection__rendered {
  max-height: 100px; /* Ajusta según necesidad */
  overflow-y: auto;
}
.select2-selection__rendered {
  white-space: normal !important;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.dropbtn:hover {
  background-color: #45a049;
}

/* Estilos para el contenido desplegable */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown.right {
  z-index: 9 !important;
}
.marcar3 * {
  background: black !important;
  color: white !important;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Mostrar el contenido cuando se pasa el ratón por encima del botón */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

#flash {
  position: fixed; /* Lo hacemos fijo para que ocupe toda la pantalla */
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* Lo ocultamos por defecto */
  z-index: 1000; /* Aseguramos que esté por encima de otros elementos */
}

/* Animación para el destello */
@keyframes flashAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1; /* Aparece */
  }
  100% {
    opacity: 0;
  }
}
.footer {
  background: #f8f9fa; /* Ajusta el color de fondo del footer */
  padding: 20px;
  text-align: center;
  width: 100%;
}
.marcar, .marcar *{background:#031a61!important;background-color:#031a61!important; color:white!important;}
.marcar *{
  color:white!important;
}.marcar4{
  background: chartreuse!important;
  color:black;
}
.marcar_rojo{
  background: #fadbd8!important;
  color:black;
}
.marcar_naranja
{
  background:#f0b27a!important;
  color:black;
}
.marcar_azul
{
  background: #fadbd8!important;
  color:black;
}
.marcar_verde
{
  background: #7dcea0!important;
  color:black;
}
.marcar4 *{
  color: black;
}
   .dataTable span.select2, .dataTable span.selection, .dataTable span.select2-selection {
    /* max-height: 26px !important;   */
}
/* styles.css */
.select2-selection__choice__display {
  color: black;
}
/* Estilo para el overlay del loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.logo_ocrovi_cabecera_pdf
{
    max-width: 70px!important;
}
.f-11, .f-11 *
{
    font-size: 11px;
}
th.codigo_version
{
    font-weight: 200px!important;
    font-size: 9px!important;
    text-transform: uppercase!important;
}
.justificar{
  text-align: justify;
}
th.formato
{
    font-weight: bold!important;
    font-size: 15px!important;
    text-align: center!important;
    text-transform: uppercase!important;
    vertical-align: middle;
}
button.btn.btn-danger.eliminar_componente {
    position: sticky;
    margin-left: -15px;
    padding: 0px 3px 0px 3px !important;
    height: 20px;
    border-radius: 8px !important;
    background: white;
    color: red;
    border: 0px;
}
span#prefijoFactura, span#consecutivoFactura {
  font-size: 25px;
}
.accion_principal{
    font-size: 15px !important;
    text-transform: capitalize!important;
}
canvas {
  border: 1px solid black;
  width: 100%;
  height: 200px;
}
img.firma
{
  max-width: 200px;
}
#firmaCanvas {
  border: 1px solid black;
  width: 400px;
  height: 200px;
}
body, html {
    height: 100%;
    overflow-y:hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .center{
    text-align: center;
    vertical-align: middle;
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
  @media (min-width: 992px) {
    .navbar-header {
        height: 38px!important;
    }
}

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f8f9fa;
    padding: 2px!important;
    text-align: center;
    text-transform: capitalize;
  }
  span.adicionales_documentos.url_publico {
    position: absolute;
    left: 0;
    font-size: 19px;
    color: black;
    font-weight: 500;
}
#accion_cargando{
    color:orange;
}
/* Estilo del loader (circulo animado) */
.loader {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

/* Animación para el loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
button.right {
    z-index: 9 !important;
    position: sticky;
margin-left: 4px;
}
.right{
float:right
}

.dt button {
    height: 19px;
    font-size: 13px;
    padding: 0px 10px !important;
    vertical-align: middle;
}
.modal button.close {
    background: transparent!important;
    border: transparent!important;
}
button {
    border-radius: 0 !important;
    height: 35px;
    padding: 0px 10px 0px 10px !important;
}
            td.persona_dia.bloqueado {
    box-shadow: inset 0px 0px 6px -1px rgba(0, 0, 0, 1);
}
            .dataTable input, .dataTable select {
    padding: 0;
    height: 28px;
    text-align: center;
}
table.dt thead tr:first-child, table.dt thead tr:first-child th {
  
background: #031a61 !important;
    color: white!important;
}
.center
{
vertical-align:middle;
text-align:center;
}
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}
.navbar-menu{
	max-width:100%!important;
}
.abrir_agrupacion
{
  margin-right: 3px;
}
span.cantidad_componente {
  float: right;
  background: #d1d1d1;
  padding: 2px 10px;
  color: black;
  border-radius: 8px;
  font-weight: 500;
}
.col-sm-6.ck_contenedor {
  min-height: 60vh;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
  min-height: 50vh !important;
}
.marcar2 {
  background: lightskyblue!important;
}
@keyframes sombra-movimiento {
  0% { box-shadow: 0 0 5px red; }
  50% { box-shadow: 0 0 20px red; }
  100% { box-shadow: 0 0 5px red; }
}

/* Botones */
#add-experience {
  margin-top: 20px;
  display: block;
  width: 100%;
  text-align: center;
}
.experiencia {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #ddd;
}

/* Agregar un borde superior e inferior para destacar las experiencias */
.experiencia:not(:last-child) {
  border-bottom: 3px solid #007bff;
}

/* Separador visual entre las experiencias */
fieldset {
  border: none;
  padding: 0;
}

legend {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #5c5c5c;
}
/* Animaciones para la eliminación de experiencias */
.btn-remove-experience {
  display: block;
  margin-top: 10px;
  background-color: #e74c3c;
  width: 100%;
  color: white;
}

.resaltar {
  animation: sombra-movimiento 1s infinite alternate;
}
.maximo_largo{
  max-height: 80vh!important;
  overflow-y: auto!important;
}
.menu-item.activo {
  background-color: #d1e7ff;
  border-left-color: #0056b3;
  color: #0056b3;
}
span.select2-selection.select2-selection--single
{
  min-height: 38px;
  background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #c0ccda;
}
/* Estilos generales para el contenedor */
.sidebar {
  padding: 10px;
}

/* Estilo para los items del menú */
.menu-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f9f9f9; /* Fondo suave */
  border-radius: 8px; /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave al pasar el cursor */
}

/* Estilo para el hover en cada item */
.menu-item:hover {
  background-color: #e0e0e0; /* Color más oscuro al pasar el cursor */
}

/* Separación entre items con una línea */
.menu-item + .menu-item {
  border-top: 1px solid #ddd; /* Línea sutil de separación */
}

/* Estilos para la información dentro de cada item */
.menu-item .info {
  font-size: 14px;
  color: #333; /* Color de texto para la info */
}

/* Estilos para los títulos dentro de la info */
.menu-item .info p {
  margin: 5px 0; /* Margen entre las líneas de información */
}

.menu-item .info strong {
  color: #007bff; /* Color para los títulos */
}

/* Estilos para las fechas y el nombre de quien cargó */
.menu-item .fecha-carga,
.menu-item .fecha-vencimiento,
.menu-item .cargado-por {
  font-weight: normal;
  color: #555; /* Color de texto más suave */
}

/* Estilo para la separación general de cada ítem */
.sidebar .menu-item:last-child {
  margin-bottom: 0; /* El último item no tiene margen inferior */
}

iframe#documento_preview {
  min-width: 80%;
  min-height: 153px;
}
/* Estilo para la clase .modal_reducida */
.modal_reducida .modal-dialog {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.modal_reducida .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}

.modal_reducida .modal-body {
  flex-grow: 1; /* Hace que el cuerpo ocupe todo el espacio disponible */
  overflow-y: auto; /* Permite el desplazamiento si el contenido es muy grande */
  overflow-x: hidden!important;
  padding: 10px; /* Espaciado interno */
  min-height: 90vh;
}

.modal_reducida .modal-footer {
  padding: 5px 10px; /* Reducido espacio para el footer */
  background-color: #f1f1f1; /* Color de fondo para el footer */
  border-top: 1px solid #ddd; /* Línea sutil de separación */
  text-align: center;
}

.modal_reducida .modal-footer button {
  padding: 5px 10px; /* Botón pequeño */
}

/* Estilos para el botón de opciones */
.menu-item {
  position: relative;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.btn-options {
  background: none;
  border: none;
  font-size: 20px;
  color: #333;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* Estilos para el menú de opciones */
.options-menu {
  display: none; /* Ocultar el menú inicialmente */
  position: absolute;
  top: 35px;
  right: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.options-menu button {
  width: 120px;
  padding: 8px;
  text-align: left;
  background-color: #fff;
  border: none;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.options-menu button:hover {
  background-color: #f1f1f1;
}

/* Estilos para el menú cuando está visible */
.menu-item.show-options .options-menu {
  display: block;
}
.options-menu button {
  width: 100%!important;
}
.table-scroll, .table-fixed {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}