/* This is the css style sheet for the ProteomeHD Quarto website */

/* Position the search container in the navbar with spacing from the right */
.navbar #quarto-search.type-overlay {
    margin-left: auto;
    margin-right: 20px; /* Space from right edge */
}

/* Style the search button in the navbar: set width, colors, borders, and alignment */
.navbar .aa-DetachedSearchButton {
    width: 250px; 
    background-color: #f8f9fa;
    border: 2px solid #ced4da;
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
}

/* Style the search icon and its placeholder in the navbar */
.navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon {
    color: #495057;
    display: flex;
    align-items: center;
}

/* Add placeholder text inside the search button */
.navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon::after {
    content: "Search proteins";
    margin-left: 10px;
    color: #6c757d;
    font-size: 13px;
}

/* Ensure the autocomplete dropdown aligns with the search button */
.navbar #quarto-search.type-overlay .aa-Autocomplete {
    width: 100%; /* Match the button width */
}

/* Center the title block and move it down */
.quarto-title-block .quarto-title-banner,
h1.title, 
p.subtitle {
  text-align: center;
}

/* Adjust margin for the title */
.quarto-title {
  margin-top: 40px;  /* Space above title */
}

/* Center logo and adjust positioning */
.logo-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 80px;
  margin-bottom: 20px;
}

/* Ensure logo image scales appropriately */
.logo-image {
  max-width: 600px;
  height: auto;
}

/* Format display of search hits on index page (adjust spacing) */
#hits .hit {
  margin: 0px 0;
  padding: 0px;
  line-height: 0;
}

/* Gene / protein name value box - three levels of text size */
.large-text-valuebox .value-box-value {
  font-size: 1.4rem !important; 
}

.medium-text-valuebox .value-box-value {
  font-size: 1.3rem !important; 
}

.small-text-valuebox .value-box-value {
  font-size: 1.1rem !important; 
}

/* Removes the border from dashboard cells */
.no-border-cell {
  border: none !important;
}