@import "chembl_base";

/**
* Scroll spy
* ----------------------------------------------------------------------------------------------------------------------
*/

.scrollspy-wrapper {
  position: relative;

  &.pin-top {
    margin-top: 40px;
  }

  &.pinned {
    top: 40px;
  }
}

.table-of-contents a.active {
  border-left: 2px solid $h3-color;
}

.table-of-contents a:hover {
  border-left: 1px solid $h3-color;
}


/**
* Compound report card
* ----------------------------------------------------------------------------------------------------------------------
*/

div#CompoundNameAndClassification .row {
  margin-bottom: 0;
}

.comp-img-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .compound-img{
    width: 100%;
    max-height: 250px;
    background-color: white;

    @media #{$large-and-up} {
      max-height: 300px;
    }

  }

  .sssearch-button-container{
    margin-top: 15px;
    margin-bottom: 15px;
  }
}

.td-oneline {
  white-space: nowrap;
}

.p-oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

div#CompoundNameAndClassification .CNC-table td {
  padding: 2px;
  font-size: 80%;
}

.fixed-width-column-12 {
  width: 12em;
}

.fixed-width-column-11 {
  width: 11em;
}

div#CompoundNameAndClassification .card-panel {
  padding: 5px;
  position: relative;
}

div#CompoundNameAndClassification .comp-phase-0,
div#CompoundNameAndClassification .comp-phase-1,
div#CompoundNameAndClassification .comp-phase-2,
div#CompoundNameAndClassification .comp-phase-3,
div#CompoundNameAndClassification .comp-phase-4 {
  color: #ffffff;
  padding: 1px 3px 1px 3px;
  display: inline-block;
  border-radius: 2px;
}

div#CompoundNameAndClassification .comp-phase-4 {
  background-color: #43a047;
}

div#CompoundNameAndClassification .comp-phase-3 {
  color: #000000;
  background-color: #ffeb3b;
}

div#CompoundNameAndClassification .comp-phase-2 {
  background-color: #ff9800;
}

div#CompoundNameAndClassification .comp-phase-1 {
  background-color: #f44336;
}

div#CompoundNameAndClassification .comp-phase-0 {
  background-color: #9e9e9e;
}

.chip-ptc,
.chip-tn,
.chip-syn {
  font-size: 100%;
  margin: 1px 0;
  line-height: 10px;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  padding: 5px;
  font-weight: 500;
  display: inline-block;
  word-break: break-all;
  line-height: normal;
}

.chip-syn {
  background-color: $synonyms-color;
}

.chip-tn {
  background-color: $tradenames-color;
}

.chip-ptc {
  background-color: $prot-target-class-color;
}

.CNC-btn {
  padding: 0 5px;
}

.cropped {
  overflow: hidden;
  max-height: 88px;
  max-width: 80%;
}

.expanded {
  overflow: visible;
  max-height: none;
  max-width: 100%;
}

.cropped-container {
  position: relative;

  .toggle-more-less {
    padding: 4px;
  }

}

.position-relative {
  position: relative;
}

.embed-btn {
  position: absolute;
  color: white;
  padding: 0 4px;
  top: -3px;
  right: 0;

  &.inverted {
    color: $primary-color-dark
  }
}

.embed-preview {
  height: 80vh;
}

.code-container {
  border: 1px solid $primary-color;
  padding: 10px;
  overflow: scroll;
}


.responsive-height-img {
  max-height: 100%;
  max-width: 100%;
}


.modal-close-icon {
  position: absolute;
  top: 5px;
  right: 0;
}


/**
* Indications
* ----------------------------------------------------------------------------------------------------------------------
*/

.chembl-paginated-table .pagination {
  padding-bottom: 15px;
}

.chembl-paginated-table .pagination li {
  font-size: 1rem;
}

.chembl-paginated-table .pagination li.active {
  background-color: $chembl-teal;
}

.inications-dowload {
  margin-top: 14px;
}

/**
* Report card section
* ----------------------------------------------------------------------------------------------------------------------
*/

.section {

  .max-height-col {

    .card-content {
      max-height: 500px;
    }
  }
}

/**
* References
* ----------------------------------------------------------------------------------------------------------------------
*/
.ref-source-link {
  color: $grey-dark;
}

/**
* Report Cards
* ----------------------------------------------------------------------------------------------------------------------
*/

.report-card-header-table {
  .collapser-button-cell {
    text-align: right;
  }
}

.report-card-container {
  max-width: 1480px;

}


.withdrawn-info {
  padding: 10px;

  .icon {
    font-size: 150%;
  }
}



/**
* Alternate Forms
* ----------------------------------------------------------------------------------------------------------------------
*/

.card .card-image .chembl-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  width: 100%;
  text-align: center;
}

.card.horizontal {

  .card-image {
    display: table;
    height: 100%;

    .image-container {
      display: table-cell;
      vertical-align: middle;
    }
  }

  .embed-btn-in-card {
    position: absolute;
    bottom: 18px;
    right: 0;
  }
}

.card {

  &.vertical {

    .embed-btn-in-card {
      position: absolute;
      left: 20px;
    }
  }
}

/**
* Compound Representations
* ----------------------------------------------------------------------------------------------------------------------
*/

.inline-block {
  display: inline-block;
  margin-top: 2px;
}

.inline {
  display: inline;
  margin-top: 2px;
}

.compact-table {
  display: table;
  overflow-x: inherit;

  &.scrollable {
    overflow-x: auto;
  }

  &.scrolling {
    display: block;
  }

  [type="checkbox"] + label {
    left: 10px;
    top: 5px;
  }

  .headers-table {
    border-collapse: separate;

    &.sort {

      .name-to-show {
        cursor: pointer;
      }

      &:hover {

        .sort-icon {
          color: $chembl-teal !important;
        }
      }
    }

    .sort-icon {
      font-size: 1.3em;
      cursor: pointer;
    }
  }
  td {

    font-size: 80%;
    padding: 5px;

    &.number-cell {
      text-align: right;
    }

    &.number-cell-center {
      text-align: center;
    }

    .vis-container {
      width: 150px;
      padding: 5px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  th {
    font-size: 0.9em;
  }

}

.table-header-menu {

  &.row {
    margin-bottom: 0;
  }

  .buttons-container {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}

.table-top-scroller-container {
  overflow-x: auto;
}

/**
* Clinical Data
* ----------------------------------------------------------------------------------------------------------------------
*/

.ebi-links {

  a {
    border-bottom: 0 none;
    color: $chembl-teal;
  }

  a:hover {

    color: $lighter-teal;
  }

  span {
    border-bottom: 0 none;
    color: $chembl-teal;
    font-size: 70%;
  }

  .chembl-breadcrumbs {
    width: fit-content;
    display: inline;
  }

}

.cropped-text-field {
  position: relative;
}

.cropped-text-field-input {
  position: relative;
}

.cropped-text-field-input {
  font-family: $roboto-mono;
}

.cropped-text-field-btns {
  max-height: 32px;
}

.cropped-text-field-btns .btn-mini {
  float: right;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.cropped-text-field td {
  padding: 0;
}

.cropped-text-field-btns-cell {
  &.one-button{
    width: 37.5px;
  }
  width: 75px;
}

