/* =====================================================
   lists.css  -  Lists: reset, myList, thumbnail grid, categories
   Split from gpnotesv4.css (original lines 1142-1338)
   ===================================================== */

* {
  -webkit-tap-highlight-color: transparent;
}

#removeAdsMenuItem {
  /* display: none; */
}

.myList {
  /* cursor: pointer; */
  display: flex;
  flex-direction: column;
  list-style-type: none;
  color: var(--color1);
  align-items: center;
  margin: 0px auto;
  padding: 0px;


}


#tiDiv {
  margin-top: 20px;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
}

.tiClass {

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 150px;
}

.tiClass:hover {

  /* translateY effect */
  transform: translateY(-5px);
  transition: transform 0.2s ease;
}

.tiClass>img {
  height: auto;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top left;
  border-radius: 8px;

}

.tiClass>span {
  font-size: 12px;
  padding-top: 10px;
  text-align: center;
}


.myList>li {

  width: 90%;

  cursor: pointer;
  transition: background-color 0s, transform 0s;

}

.myList>li:hover {
  background-color: rgba(255, 255, 255, 0.15);
  /* transform: scale(1.01); */
  /* Optional shrinking effect */

}

.myList>li:active {
  background-color: rgba(255, 255, 255, 0.46);
  /* transform: scale(1.01); */
  /* Optional shrinking effect */

}



#ncd li {
  border-left: 3px solid var(--first-layer);
}

#cd li {
  border-left: 3px solid var(--seventh-layer);
}

#mch li {
  border-left: 3px solid var(--second-layer);
}

#paeds li {
  border-left: 3px solid var(--third-layer);
}


#emerge li {
  border-left: 3px solid var(--forth-layer);
}

#pharma li {
  border-left: 3px solid var(--fifth-layer);
}

#proc li {
  border-left: 3px solid var(--sixth-layer);
}


.myList li:not(.listHeader) {
  display: flex;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  margin-top: 0;
  margin-bottom: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.myList.list-open li:not(.listHeader),
.myList li.list-open {
  max-height: 80px;
  opacity: 1;
  padding: 10px 10px;
  margin-bottom: 3px;
  border-bottom: 1px solid grey;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.myList.list-open li:not(.listHeader)::after,
.myList li.list-open::after {
  content: '›';
  font-size: 20px;
  flex-shrink: 0;
  opacity: 0.5;
  padding-right: 4px;
}




.listHeader {
  font-size: 14px;
  width: 95%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid grey;
  border-left: none;
  padding: 10px;
  margin-bottom: 3px;
  font-weight: bold;
}

#ncd .listHeader {
  color: var(--first-layer);
}

#cd .listHeader {
  color: var(--seventh-layer);
}

#mch .listHeader {
  color: var(--second-layer);
}

#paeds .listHeader {
  color: var(--third-layer);
}

#emerge .listHeader {
  color: var(--forth-layer);
}

#pharma .listHeader {
  color: var(--fifth-layer);
}

#proc .listHeader {
  color: var(--sixth-layer);
}