blockquote {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 16px;
}

body {
    font-family: 'Century Gothic', 'OpenSans', 'Calibri', 'sans-serif';
    font-size: 0.75rem;
    margin-left: 2px;
    margin-top: 2px;
    background-color: #4c545d; 
    color: #2F2F38;            
}

input {
    margin: 0;
}

div#i-search-what-container, div#i-highlight-container, div#i-operators {
    margin-top: 4px;
    margin-bottom: 4px;
}

input#i-highlight {
    margin-right: 8px;
}

.i-search-highlight {
    background-color: #FFEB3B; 
    color: #2F2F38;
}

.i-snippet-centre {
    margin-bottom: 5px; 
    text-align: center;
}     

.i-search-title {
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 5px;
    color: #372E95;
}

.i-static-input-container {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Adjust this value to control the sticky position */
    z-index: 1000; /* Ensure it stays above other content */    
    padding: 10px; /* Optional: Add padding for better spacing */
    background-color: #4c545d;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.2);
}

.i-result-list {
    width: 100%;
    max-width: 100%; /* Ensure it does not extend beyond the viewport width */
    min-width: 300px; /* Ensure it does not shrink too much */

    /* Espace entre lignes pour effet "cartes" */
    border-collapse: separate;
    border-spacing: 0 10px;

    margin: 10px 0;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    table-layout: auto; /* Allow the table to adjust column widths based on content */
    word-wrap: break-word; /* Ensure long words break and wrap */
    overflow-wrap: break-word; /* Ensure long words break and wrap */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.i-result-list td, .i-result-list th {
    padding: 0;
    text-align: left; /* Align text to the left */
    vertical-align: top; /* Align text to the top */
    border-bottom: none;
    color: #2F2F38;
}

@media (max-width: 600px) {
    .i-result-list td, .i-result-list th {
        padding: 0;
    }

    .i-result-list {
        font-size: 0.75rem;
    }
}

.i-result-tr {
    padding: 0;
    border: none;
    background: transparent;
}

.i-result {
    background-color: #FFFFFF;
    border: 1px solid #D6DAE5;
    border-radius: 6px;       
    padding: 12px 14px;       
    box-sizing: border-box;
}

.i-result h3 {
    margin: 0;
    font-size: 1.2em;
    color: #372E95; 
}

.i-result-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 4px 0;
    padding: 0;
    color: #372E95; 
}

.i-result-link {
    color: #3B6FE2;
    text-decoration: none;
}

.i-result-link:hover {
    color: #2E54B8;
    text-decoration: underline;
}

.i-result-url {
    font-size: 0.9em;    
    margin: 5px 2px;
    color: #6B6F7A;
}

.i-result-snippet {
    margin-top: 5px;
    font-size: 0.9em;
    color: #2F2F38;
}

.i-result-keywords {    
    margin: 5px 0;
    font-size: 0.75rem;
    color: #6B6F7A;
    font-weight: lighter;
}

.i-keyword {
    padding: 2px 4px;
    border-radius: 3px;
}

.i-expander-icon {
    display: inline-block;
    width: 16px; /* Width of the icon */
    height: 16px; /* Height of the icon */
    background-image: url('../images/icons.png'); /* Path to the expand icon */
    background-repeat: no-repeat;
    background-position: -752px 0px; /* Adjusted position for the expand icon */
    margin-right: 5px; /* Space between icon and text */
}

.i-expander-icon.expanded {
    background-position: -770px 0px; /* Adjusted position for the collapse icon */
    background-image: url('../images/icons.png'); /* Path to the collapse icon */
}

.expander {
    cursor: pointer;
    border: 1px solid #D6DAE5;       
    border-left: 4px solid #372E95; 
    border-radius: 6px;           
    padding: 10px;                   /* Padding for better click area */
    margin-bottom: 5px;              /* Space below the expander */
    display: table;                  /* Ensure it fits within the table cell */
    width: 100%;                     /* Full width */
    text-align: left;                /* Align text to the left */
    box-sizing: border-box;          /* Include padding and border in the element's total width and height */
    background-color: #FFFFFF;     
    color: #2F2F38;
}

.expander:hover {
    background-color: #EEF2FF;
    border-color: #C7CDDA;  
    color: #2F2F38;
}

.expander-content {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: none; /* Initially hidden */
    margin-top: 5px;
    padding: 10px; /* Padding for the content */
    border-left: 4px solid #D6DAE5; 
    background-color: #FFFFFF;    
    border-radius: 6px;          
    color: #2F2F38;
}

#i-results-container {
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Adjust this value to control the maximum height */
    margin: 0;
    padding: 0;
}

#i-results, #divResults {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #D6DAE5; 
    border-radius: 6px 6px 0px 0px;  
    background-color: #F8F9FB;
    color: #2F2F38;      
}

/* Pagination controls */
.pagination {
    position: sticky;
    bottom: 0;
    padding: 10px 0;
    text-align: center;
	border-radius: 0px 0px 6px 6px;
    background-color: #F8F9FB;      
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.04);
}

.pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #D6DAE5;
    background-color: #FFFFFF;
    color: #2F2F38;     
    cursor: pointer;
    border-radius: 6px;  
}

.pagination button:disabled {
    background-color: #EEEFF3;
    cursor: not-allowed;
    color: #6B6F7A;       
}

.pagination button.active {
    background-color: #372E95; 
    color: #FFFFFF;
    border-color: #372E95;
}

.pagination button:hover {
    background-color: #EEF2FF;
}

.pagination-info {
    margin: 0 10px;
    font-size: 0.9em;
    color: #6B6F7A;
}

.pagination:empty {
    display: none;
}


.i-result-list td {
    padding: 0;
    font-size: 0.75rem;
}

.i-result-list td.i-inner-row {
    border-top: 1px dotted #D6DAE5;
}

.i-result-list a {
    text-decoration: none;
	color: #372E95;
	font-weight: normal;
    font-size: 0.7rem;
}

.i-result-list a:hover {
    color: #2E54B8;
    text-decoration: underline;
}

input#i-execute-search {
    float: right;
    width: 100px;
    background-repeat: no-repeat;
}

#i-search-input-container {
    padding: 0 10px 0 0;
    overflow: hidden;
}

#i-search-input-container input#i-search {
    width: 100%;
}

hr {
    height: 1px;
    border: 0;
    padding: 0;
    margin: 8px 0 3px 0;
    color: #D6DAE5;    
    background-color: #D6DAE5;
}

#i-search-container{
    color: #ffffff;
}