/* Define classes for different image sizes */
.img-small {
  /* width: 50px; */
  height: 60px;
  margin-top: 10px;
}

.img-medium {
  /* width: 80px; */
  height: 60px;
  margin-top: 10px;
}

.img-large {
  /* width: 60px; */
  height: 40px;
  margin-top: 25px;
}

.landscape-img {
  width: 75%;
}

.topSubButRow {
  margin-bottom: 15px;
  margin-top: 15px;
}

.subButRow {
  margin-bottom: 15px;
}
/* Add some spacing between the buttons and their explanations */
.btn-explanation {
  margin-bottom: 15px;
}

/* Style the explanation text */
.btn-explanation p {
  font-size: 16px;
  color: #555;
  margin-left: 10px;
}

/*Gene Sets Buttons and Sub buttons*/
.sub-buttons {
  display: none;
}

/* Style for highlighted parent button */
.parent-button.active {
  background-color: rgb(
    81,
    150,
    255
  ) !important; /* Change to your desired highlight color */
}

/* Style for highlighted parent button */
.nested.active {
  background-color: rgb(
    81,
    150,
    255
  ) !important; /* Change to your desired highlight color */
}

/* Hide the "x" button on selected items */
.select2-selection__choice__remove {
  display: none !important;
}

/* Apply btn-sm class only on screens with max-width 767px (mobile screens) */
@media (max-width: 767px) {
  .parent-button,
  .nested {
    font-size: 16px; /* Adjust the font size as needed */
    padding: 0.25rem 0.5rem; /* Adjust the padding as needed */
  }

  .img-small {
    width: 25px;
    height: 30px;
  }

  .img-medium {
    width: 40px;
    height: 30px;
    margin-top: 10px;
  }

  .img-large {
    width: 30px;
    height: 20px;
    margin-top: 20px;
  }

  .landscape-img {
    width: 100%;
  }

  .footer-placeholder {
    margin-top: 150px;
  }
}

@media (max-width: 400px) {
  .btn {
    font-size: 12px !important;
  }
}