/* peptides.css v.1.1 */



@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;500;900&family=Fira+Sans:wght@300;500;700&display=swap');



:root {
--base-color: hsla(187, 95%, 23%, 1);
--light-color: hsl(from var(--base-color) h calc(s - 50) calc(l + 70));

}

header{
z-index: 20;

}

.peptide-headline{
color: var(--orange);
  font-size: 3em;
  letter-spacing: -3.5px;
  margin: 1em 0 0 0
}




/*CSS for the actual sales table*/

.scroll {
  font-family: var(--f-family);
  font-weight: 300;
  font-size: .85em;

  height: 550px;
  overflow-x: hidden;
  overflow-y: auto;
  border: solid 2px var(--base-color);
  border-radius: 8px;
  margin-top: 3em;
  position: relative;
  
  scrollbar-color: var(--base-color) #fff;



}

.top-line {
  position: sticky;
  top: 0;
  background-color: var(--base-color);
  color: #fff;
  z-index: 10;

}

#sales-table td:nth-child(1) {
  width: 8vw;
}

#sales-table td {
  width: 1vw;
  text-align: center;
}

#sales-table th {
  padding: 1em;
  text-align: center;
  vertical-align: top;

}

#sales-table tr td {
  padding: .5em;
  vertical-align: top;
}



#sales-table td:nth-child(1),
#sales-table th:nth-child(1) {
  text-align: left;
  font-weight: 500;
}

#sales-table th:nth-child(1),
#sales-table td:nth-child(1) {
  padding-left: 1em;
}

#sales-table th:nth-child(6),
#sales-table td:nth-child(6) {
  width: 18vw;
  padding-left: 0;
  text-align: center;

}


#sales-table tr:nth-child(even) {
  background-color: var(--light-color);
  border: 0;
  margin: 0;
  padding: 0
}

/* #sales-table tr:hover:not(:first-child) {
  background-color: hsla(12, 10%, 80%, 1);
} */

/* the tooltip */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  /* Adjust position as needed */
  top: 120%;
  left: 10%;
  transform: translateX(-50%);
  display: none;

  /* Basic tooltip styling */
  padding: 8px 12px;
  width: 24vw;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  z-index: 1;
  margin-bottom: 3em;
}


[data-tooltip]:hover {
  cursor: pointer;
}


[data-tooltip]:hover::after {
  display: inline-block;
}




.fine-print{
  font-size: .85em;
  margin-top: 3em;
  
}

.fine-print strong{
  margin-bottom: .5em;
  display:block;
  
}

.fine-print ul{
    margin: 0 0 1em 2em;
  
}


/* Responsive adjustment */

@media (width < 780px) {

  [data-tooltip]::after {
    font-size: .85em;
  }

  [data-tooltip]:hover::after {
    white-space: normal;
    width: 20vw;

  }

}

@media (width < 620px) {
  
  .scroll {
  height: 100%;
  overflow-x: none;

}

  body {
    font-size: .65em;
  }

  #sales-table td {
    width: 5%;
  }

  #sales-table th:nth-child(6),
  #sales-table td:nth-child(6) {
    display: none;
  }


}