.cib-myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.cib-myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.cib-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 11; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.cib-modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
}

/* Caption of Modal Image */
#clever-img-box-caption {
  margin: auto;
  display: block;
  max-width: 80%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.cib-modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.cib-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.cib-close:hover,
.cib-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .cib-modal-content {
    width: 100%;
  }
}

/* INICIO Estilo para la modal preview */
.modal-preview {
	display: none; /* Oculta la modal por defecto */
	position: fixed; /* Posici�n fija para que cubra toda la ventana */
	z-index: 100; /* Se asegura de que est� en la parte superior */
	left: 0;
	top: 0;
	width: 100%; /* Ocupa todo el ancho de la ventana */
	height: 100%; /* Ocupa toda la altura de la ventana */
	background-color: rgba(0, 0, 0, 0.2); /* Fondo semi-transparente */
}

/* Encabezado de la modal */
.modal-preview-content-header {
    cursor: move; /* Muestra el cursor de movimiento */
    user-select: none; /* Evita la selección de texto mientras se arrastra */
}

/* Estilo para el contenido de la modal */
.modal-preview-content {
	position: relative;
	/* Posicion relativa para poder usar posiciones absolutas dentro */
	background-color: #fefefe;
	margin: 1% auto;
	width: 90%; /* Ancho de la modal */
	height: 90%; /* Altura de la modal */
	max-height: 90%; /* Altura m�xima de la modal */
	display: flex; /* Usamos Flexbox para centrar la imagen */
	flex-direction: column;
    overflow: auto; /* Permite el desplazamiento si el contenido es más grande */
    resize: both; /* Permite redimensionar tanto horizontal como verticalmente */	
    scrollbar-width: none; /* Oculta el scroll en Firefox */    
}

.modal-content-preview::-webkit-scrollbar {
    display: none; /* Oculta el scroll en Chrome, Safari, Edge */
}

/* Evita que el contenido de la modal se salga al redimensionar */
.modal-preview-content:after {
    content: '';
    display: block;
    clear: both;
}

.modal-preview-content-image {
	overflow: auto;
	width: 100%; 
	height: 100%; 	
	display: flex;
	flex-direction: column;
}

/* Contenedor para la imagen */
.modal-preview-image-container {
	display: grid; 
	align-items: center; 
	justify-content: center; 
}

/* Estilo para el boton de cerrar */
.close-modal-preview {
	color: #aaa;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	top: 9px;
	right: 9px;
}

.close-modal-preview:hover, .close-modal-preview:focus {
	color: black;
	text-decoration: none;
}

.modal-preview-pdf {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Estilo para los iconos de zoom */
.zoom-in-preview, .zoom-out-preview {
	cursor: pointer;
	position: absolute;
	top: 12px;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	color: #aaa;
}

.zoom-out-preview {
	margin-left: 30px;
}

.zoom-in-preview {
	margin-right: 30px;
}

.zoom-in-preview:hover, .zoom-in-preview:focus, .zoom-out-preview:hover,
	.zoom-out-preview:focus {
	color: black;
	text-decoration: none;
}

/* FIN Estilo para la modal preview */