#protein-page > .row {
  margin: 0;
}
#protein-page > .row > .col-sm-3 {
  position: fixed;
  width: 20%;
  padding: 0;
  max-height: calc(100% - 50px);
  overflow-y: auto;
  border-radius: 3px;
  padding-bottom: 50px;
}
#protein-page > .row > .col-sm-9 {
  width: -webkit-fill-available;
  margin-left: 25%;
  margin-top: 60px;
  padding: 0;
}

#nav_sidebar #back_to_search_button {
    margin-bottom: 10px;
    background-color: var(--green-85);
    color: #fff;
    font-weight: bold;
}

#nav_sidebar #back_to_search_button:hover {
  background-color: #99d0a3;
  color: #fff;
  font-weight: bold;
}

#protein-page #nav_sidebar.nav:not(.nav-hidden).nav-stacked.nav-pills {
  height: auto;
  background-color: var(--blue-dark);
  border-radius: 3px;
}
#nav_sidebar #sidebar-header {
  background-color: #fff;
}
#nav_sidebar #species-name, #nav_sidebar #protein-name  {
  text-align: left;
}
#nav_sidebar #species-name-container {
  color: var(--gray-45);
  background-color: var(--blue-dark);
  padding-bottom: 5px;
  padding-top: 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#nav_sidebar #species-name {
  font-style: italic;
  padding-left: 25px;
}
#nav_sidebar #species-name img {
  filter: sepia(2%) saturate(661%) hue-rotate(290deg) brightness(115%) contrast(87%);
  width: 24px;
  height: 24px;
}
#nav_sidebar #protein-name {
  color: #fff;
  background-color: var(--blue-dark);
  font-weight: bold;
  padding-left: 25px;
}
#nav_sidebar #protein-species-name-space {
  background-color: #fff;
}

#nav_sidebar > li:first-child {
  background-color: #fff;
}
#nav_sidebar > li:not(:first-child):not(:nth-child(2)) {
  margin-left: 15px;
  margin-right: 15px;
}

#nav_sidebar > li:nth-child(2) hr {
  margin-left: 10px;
  margin-right: 10px;
}


#nav_sidebar > li:last-child {
  margin-bottom: 15px;
}
#nav_sidebar #only-hs-text {
  margin-top: 10px;
  color: #fff;
  font-weight: bold;
}

#nav_sidebar hr {
  margin: 1rem 0;
}

#nav_sidebar > li > .nav-link {
  height: 40px;
  padding: 8px 10px;
  color: #fff;
}
#nav_sidebar > li > .nav-link.active {
  background-color: var(--cyan);
}
#protein-page.no-rbp #nav_sidebar li > a[data-value = "RBP Studies"] {
  color: var(--gray)
}
#protein-page.no-human #nav_sidebar li > a[data-value ='R-DeeP'],
#protein-page.no-human #nav_sidebar li > a[data-value ='Disease Ontology'],
#protein-page.no-human #nav_sidebar li > a[data-value ='ENCODE (eCLIP/iCLIP)'] {
  color: var(--gray)
}
#protein-page.no-human #nav_sidebar #only-hs-text {
  color: var(--gray);
}
#protein-page.no-human #nav_sidebar li > a[data-value ='R-DeeP'] > .sidebar-image-container > img,
#protein-page.no-human #nav_sidebar li > a[data-value ='Disease Ontology'] > .sidebar-image-container > img
/*#protein-page.no-human #nav_sidebar li > a[data-value ='ENCODE (eCLIP, iCLIP)'] > .sidebar-image-container > img#ENCODE_DNA */ {
  filter: brightness(60%);
}


#protein-page .nav-pills li > a > .sidebar-image-container {
  display: inline;
}
#protein-page .nav-pills li > a > .sidebar-image-container > img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
#protein-page .nav-pills li > a > .sidebar-image-container_noENCODE {
  display: inline;
  filter: brightness(60%);
}
#protein-page .nav-pills li > a > .sidebar-image-container_noENCODE > img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
#protein-page .tab-pane h2 {
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: var(--cyan);
}

#resources-row {
  display: flex;
}
#resources-row > .resource-link:not(:last-child) {
  margin-right: 40px;
}

.forward-back-buttons-container {
  display: flex;
  justify-content: center;
}
.forward-back-buttons-container > div {
  width: 70px;
}

.forward-back-buttons-container .btn {
  border-color: #fff;
  color: #fff;
  margin-left: 10px;
}

.forward-back-buttons-container .btn:not(:disabled):hover, #up-down-buttons-container .btn:not(:disabled):hover {
  background-color: #fff;
  color: #000;
}
.forward-back-buttons-container .btn:not(:disabled):active, #up-down-buttons-container .btn:not(:disabled):active {
  background-color: #fff;
  color: #000;
}

.forward-back-buttons-container .btn:disabled, #up-down-buttons-container .btn:disabled  {
  border-color: var(--gray);
  color: var(--gray);
}
.forward-back-buttons-container .space-right {
  margin-right: 10px;
}
.forward-back-buttons-container .forward-back-buttons-text {
  color: #fff;
  text-align: center;
}
.forward-back-buttons-container > div:has(.btn:disabled) .forward-back-buttons-text {
  color: var(--gray);
}
#forward-back-buttons-title, #up-down-buttons-title {
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--gray-45);
  white-space: wrap;
}
#up-down-buttons-container > bslib-tooltip {
  display: flex;
  justify-content: center;
}
#up-down-buttons-container .btn {
  color: #fff;
  border-color: #fff;
  white-space: nowrap;
  overflow: clip;
  width: 150px;
  padding: 5px 5px;
}
#up-down-buttons-container .btn.space-down {
  margin-bottom: 10px;
}

/* ROWS FOR DISPLAYING DATA */
.grid-rows, .grid-row {
  width: 100%;
  grid-template-columns: max-content auto;
  display: grid;
  column-gap: 40px;
  row-gap: 1.5rem;
}

.grid-rows:has(.content3), .grid-row:has(.content3) {
  grid-template-columns: max-content auto auto;
}

.grid-rows .content1, .grid-row .content1 {
  grid-column-start: 1;
}
.grid-rows .content2, .grid-row .content2 {
  grid-column-start: 2;
  overflow: hidden;
}
.grid-rows .content3, .grid-row .content3 {
  grid-column-start: 3;
  overflow: hidden;
}
.grid-rows .span-columns {
  grid-column: 1 / 2;
}

/* VIOLIN PLOTS */
.violin-container {
  display: flex;
  white-space: nowrap;
  height: 50px;
}
.violin-container > .violin-text {
  width: 100px;
}
.violin-container .ss-main {
  line-height: 32px;
}
.violin-container .shiny-input-container {
  margin-top: 5px;
  margin-left: 10px;
  width: 150px;
}


/* PEPTIDE & DOMAIN VIEW */
#peptide-protein {
  height: 30px;
  margin-bottom: 0;
}
#selected-protein-visual-protein-image {
  height: 30px;
  background-color: var(--primary);
  border-radius: 8px;
}
#selected-protein-visual-protein-text {
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
}

#selected-protein-visual-accordion {
  margin-top: -1.5rem;
}

#selected-protein-visual-accordion .accordion-item {
  border: none;
}

#selected-protein-visual-accordion .accordion-header .accordion-button {
  padding-left: 0;
}

#selected-protein-visual-accordion .accordion-body {
  padding: 0;
}

.selected-protein-visual-legend {
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 14.4px;
  color: #444;
}
.selected-protein-visual-legend > div {
  display: inline-flex;
}
.selected-protein-visual-legend > div:not(:last-child) {
  margin-right: 20px;
}
.selected-protein-visual-legend-colors, .selected-protein-visual-legend-gray {
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  border-radius: 3px;
  margin: auto 5px auto 0;
}
.selected-protein-visual-legend-gray {
  background-color: var(--gray);
}
.selected-protein-visual-legend-colors {
  position: relative;
}
.selected-protein-visual-legend-colors > div {
  position: absolute;
  width: 5px;
  height: 5px;
}
.selected-protein-visual-legend-colors > div:first-child {
  border-top-left-radius: 3px;
  background-color: var(--cyan);
  top: 0;
  left: 0;
}
.selected-protein-visual-legend-colors > div:nth-child(2) {
  border-top-right-radius: 3px;
  background-color: var(--green);
  top: 0;
  left: 5px;
}
.selected-protein-visual-legend-colors > div:nth-child(3) {
  border-bottom-left-radius: 3px;
  background-color: var(--yellow);
  top: 5px;
  left: 0;
}
.selected-protein-visual-legend-colors > div:last-child {
  border-bottom-right-radius: 3px;
  background-color: var(--magenta);
  top: 5px;
  left: 5px;
}

#selected_protein_visual_idr > .peptide-row > bslib-tooltip > .idr-image{
  background-color: var(--primary) !important;
}
#selected_protein_visual_features, #selected_protein_peptides {
  display: grid;
}
#selected_protein_visual_features > div:not(.selected-protein-visual-legend):not(:last-child) {
  margin-bottom: 1.5rem;
}
#selected_protein_peptides > div:not(:last-child) {
  margin-bottom: 10px;
}
.peptide-row {
  height: 20px;
  position: relative;
  border-radius: 3px;
  overflow: clip;
  background-color: var(--gray-45);
  margin-top: 5px;
}
.peptide-row > bslib-tooltip > .idr-image, .peptide-row > bslib-tooltip > .feature-image, .peptide-row > bslib-tooltip > .peptide-image {
  position: absolute;
  top: 0;
  height: 20px;
  transition: all 0.15s ease-in-out;
  border-width: 2px;
  border-style: dashed;
  border-color: transparent;
}
.peptide-row > bslib-tooltip > .feature-image.selected, .peptide-row > bslib-tooltip > .peptide-image.selected {
  border-color: #000;
}
.peptide-row > bslib-tooltip > .feature-image > .feature-image {
  position: absolute;
  height: 20px;
  top: -2px;
  background-color: inherit;
}
.peptide-row > bslib-tooltip > .feature-image.selected > .feature-image {
  height: 16px;
  top: 0;
}
.authors-row {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}

#selected-feature-information-container, #selected-peptide-information-container {
  margin-left: 10px;
}
#selected-feature-information-container, #selected-peptide-information-container {
  padding: 10px;
  border: 2px dashed var(--gray-45);
  border-radius: 3px;
  width: 100%;
}
#selected-peptide-overlap > div {
  margin-bottom: 3rem;
  display: block;
}

#selected-protein-download-peptides-container {
  display: flex;
  justify-content: end;
}

/* GENE ONTOLOGY */
#selected_protein_download_go {
  margin-top: 10px;
}

/* R-DeeP */
#selected-protein-rdeep .tab-content {
  min-height: 800px;
}
#selected-protein-rdeep-plots .tab-content > .tab-pane img {
  width: 60%;
}
#selected-protein-rdeep-plots .tab-content > .tab-pane:last-child img {
  width: 80%;
}