.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.casnr-list {
    position: relative;
    border: 1px solid #ccc; /* Borde del rectángulo */
    padding: 5px; /* Menor espaciado interno */
    margin: 10px 0; /* Margen superior e inferior */
    background-color: #f9f9f9; /* Color de fondo */
    border-radius: 5px; /* Bordes redondeados */
    /*display: inline-block; /* Ajustar tamaño al contenido */
}

.casnr-title {
    margin-bottom: 5px; /* Espacio entre el título y el contenido */
    font-weight: bold; /* Negrita */
    color: #333; /* Color del texto */
    background-color: white; /* Fondo blanco para el título */
    padding: 2px 5px; /* Espaciado alrededor del texto */
    border-radius: 3px; /* Bordes redondeados para el título */
}

.casnr-content {
    margin-top: 20px; /* Margen para separar el contenido del título */
}

.row {
    margin-top: 15px; /* Ajusta el valor según sea necesario */
}

.hidden-container {
    /* display: block !important; */
   display:none;
}

/* ziyad pagination work */
.pagination {
  list-style: none;
  display: flex;
  gap: 5px;
}

.page-item.active .page-link {
  background-color: #375b9a !important;
  color: white !important;
  border: 1px solid #375b9a !important;
}

.page-link {
  padding: 8px 12px;
  text-decoration: none;
  color: #375b9a !important;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.page-link:hover {
  background-color: #f0f0f0;
}

/* ziyad pagination work ends here */

a:link {
	     COLOR: #375b9a !important; 
	 }

	 a:link {
	     COLOR: #375b9a; 
	 }
	 a:visited {
	     COLOR: #375b9a; 
	 }
	 a:active {
	     COLOR: #375b9a; 
	 }
	 a:hover {
	     COLOR: #375b9a; 
	 }
 .categoryFilterBtn {
	     text-align: left;
	     font-weight: bold;
	     font-size: 0.9em;
	     font-family: 'Tablet Gothic Narrow', sans-serif ;
	     color: rgb(75, 75, 77);
	     border: none;
	     background-color: transparent;
 }
 
.MAK-buttonlist {
    grid-area: head;
    grid-column: span 4;
    margin-left: 1em;
    margin-bottom: 2em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    font-weight: bold;
    border: none;
    
}
.container.mt-4 {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column; /* Asegúrate de que los elementos estén apilados verticalmente */

}

img {
    margin-bottom: 0; /* Elimina el margen inferior del logo */
}
        body {
            margin: 10; /* Elimina el margen del body */
            font-family: 'Tablet Gothic Narrow', sans-serif !important;
        }
.input-group {
    width: 100%; /* Usa el ancho completo */
    margin-top: 20px; /* Ajusta según necesites */
}

#suggestionsContainer {
    max-width: 600px; /* Ajusta según lo que necesites */
    text-align: left; /* Alinea el texto a la izquierda */
    margin: 0 auto; /* Alinea el contenedor de sugerencias al mismo ancho que el input */
    position: absolute; /* Cambia a absolute para que se posicione respecto al contenedor */
    left: 0; /* Alinea a la izquierda */
    right: 0; /* Asegura que no se extienda más allá del contenedor */
    background-color: white; /* Fondo para las sugerencias */
    border: 0px solid #ccc; /* Borde opcional */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

.MAK-buttonlist_empty {
    grid-area: head;
    grid-column: span 4;
    margin-left: 1em;
    background-color: transparent;
    border: none; /* Elimina el borde del botón */
    outline: none; /* Elimina el contorno del botón al recibir foco */
    cursor: not-allowed; /* Cambia el cursor a 'no permitido' */
    pointer-events: none; /* Desactiva los eventos de puntero */
    opacity: 0.6; /* Reduce la opacidad para indicar que está deshabilitado */
}

.MAK-AZ-List {
	     display: inline-grid ;
	     grid-area: main ;
	     grid-column: 2 / span 2;
	     display: grid ;
	     grid-gap: 1.2em;
}

.MAK-rubriques {
    grid-area: nav;
    grid-auto-rows: min-content;
    text-align: left; text-align: top; color: #375b9a;
    align-self: baseline;
    position: sticky;
    max-width: 300px;
    border: none;
    background-color: transparent ;
}
.MAK-rubriques-lang {
    grid-area: nav;
    grid-auto-rows: min-content;
    text-align: left; text-align: top; color: #375b9a;
    align-self: baseline;
    position: sticky;
    max-width: 300px;
    border: none;
    background-color: transparent ;
    margin-top: 10px;
}
/* Estilo para el checkbox */
.MAK-rubriques input[type="checkbox"] {
    /* Estilo para el checkbox */
 order: 2; 
}

/* Estilo para la etiqueta del checkbox */
.MAK-rubriques label {
    margin-right: 5px; /* Ajusta el margen izquierdo según necesites */
     order: 1; 
}
.MAK-substances {
    grid-area: aside;
    grid-gap: 0.1em;
    margin-top: 2em; padding: 0.5em; 
    text-align: left; text-align: top; 
    color: #375b9a; background-color: #F5F5F5;
    align-self: start;
    font-family: 'Tablet Gothic Narrow', sans-serif ;  
    font-style: normal;  
    font-weight: 400; 
    color: rgb(75, 75, 77); 
    font-size: 14px;  
    line-height: 23px
}

.MAK-crosshead_substances {
    max-width: 100%;
    font-family: 'Tablet Gothic Narrow', sans-serif ; 
    text-align: top;
    font-weight: bold;
    color: #375b9a; 
}
.facets {
    display: block;
    font-family: 'Tablet Gothic Narrow', sans-serif ; 
    font-style: normal ;  
    font-weight: 400;
    font-size: 16px; 
    line-height: 23px;
    background-color: #F5F5F5;
}

.article{
    margin-top:25px;
}
.articletitle {
    display: block;
    font-family: 'Tablet Gothic Narrow', sans-serif ; 
    font-style: italic;  
    font-weight: 700;
    font-size: 14px; 
    line-height: 23px; 
}

.article_detail_rubric {
    display: inline-grid ; 
    font-family: 'Tablet Gothic Narrow', sans-serif ; 
    font-style: normal;  
    font-weight: 400;  
    color: rgb(75, 75, 77);
    font-size: 12px; 
    line-height: 1em; 
}

.article_detail_DOI {
    font-family: 'Tablet Gothic Narrow', sans-serif ;  
    font-style: normal;  
    font-weight: 400; 
    color: rgb(75, 75, 77); 
    font-size: 12px;  
    line-height: 1em;
    text-align: bottom;
    margin-right: 10em;
}


.article_detail_date {
    font-family: 'Tablet Gothic Narrow', sans-serif ;  
    font-style: normal;  
    font-weight: 400; 
    color: rgb(75, 75, 77); 
    font-size: 12px;  
    line-height: 23px;
    text-align: bottom;
}
.language-switch {
    cursor: pointer;
    margin-right: 10px;
    padding: 5px 10px;
    border: none; /* Elimina el borde */
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    background-color: #f0f4f8; /* Color gris suave azulado */
    display: inline-block; /* Asegura que se comporten como botones */
}

.language-switch.active {
    background-color: #6c757d !important; /* Color gris más suave para el estado activo */
    color: #fff !important; /* Asegura que el texto sea blanco */
}

/* Alineación a la derecha */
.col-12 {
    text-align: right; /* Alinea el contenido a la derecha */
}


/* Alineación a la derecha */
.col-12 {
    text-align: right; /* Alinea el contenido a la derecha */
}

  .word-cloud {
	  font-family: 'Tablet Gothic Narrow', sans-serif ;
	  text-align: center;
	  line-height: 2;
      }

      .word {
	  display: inline-block;
	  margin-right: 5px;
	  margin-bottom: 5px;
	  padding: 5px 10px;
	  background-color: #0668ae;
	  color: #fff;
	  cursor: pointer;
      }

      .word:hover {
	  background-color: #375b9a;
      }

        .input-group {
            display: flex;
            align-items: center; /* Alinea verticalmente el ícono y el campo de entrada */
        }

        #searchInput {
            /* flex: 1;  */
	    flex: 1 auto; /* No crecerá, pero puede encogerse automáticamente */
	    max-width: 80%; /* Establece un ancho máximo */
	    
            padding: 8px; /* Ajusta el padding según sea necesario */
            border: 1px solid #ccc; /* Ajusta el borde según sea necesario */
            border-radius: 4px; /* Ajusta el radio del borde según sea necesario */
        }
.input-group-text {
            display: flex;
            align-items: center;
            padding: 8px;
            background-color: #f0f0f0; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            margin-left: 2px; 
        }

        .input-group-text i {
            margin-left: 8px; /* Espacio entre los íconos */
            cursor: pointer;
        }