/***********************************************************
* Additional CSS for streamlit builtin components          *
************************************************************/

/* Tab name (e.g. Text-to-Image) */
button[data-baseweb="tab"] {
  font-size: 25px; //improve legibility
}

/* Image Container (only appear after run finished) */
.css-du1fp8 {
  justify-content: center; //center the image, especially better looks in wide screen
}

/* Streamlit header */
.css-1avcm0n {
  background-color: transparent;
}

/* Main streamlit container (below header) */
.css-18e3th9 {
  padding-top: 2rem; //reduce the empty spaces
}

/* @media only for widescreen, to ensure enough space to see all */
@media (min-width: 1024px) {
  /* Main streamlit container (below header) */
  .css-18e3th9 {
    padding-top: 0px; //reduce the empty spaces, can go fully to the top on widescreen devices
  }
}

/***********************************************************
* Additional CSS for streamlit custom/3rd party components *
************************************************************/
/* For stream_on_hover */
section[data-testid="stSidebar"] > div:nth-of-type(1) {
  background-color: #111;
}

button[kind="header"] {
  background-color: transparent;
  color: rgb(180, 167, 141);
}

@media (hover) {
  /* header element */
  header[data-testid="stHeader"] {
    /* display: none;*/ /*suggested behavior by streamlit hover components*/
    pointer-events: none; /* disable interaction of the transparent background */
  }

  /* The button on the streamlit navigation menu  */
  button[kind="header"] {
    /* display: none;*/ /*suggested behavior by streamlit hover components*/
    pointer-events: auto; /* enable interaction of the button even if parents intereaction disabled */
  }

  /* The navigation menu specs and size */
  section[data-testid="stSidebar"] > div {
    height: 100%;
    width: 95px !important;
    min-width: 95px !important;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s ease;
    padding-top: 60px;
    white-space: nowrap;
  }

  /* The navigation menu open and close on hover and size */
  section[data-testid="stSidebar"] > div:hover {
    width: 300px !important;
  }

  /* added to avoid main sectors (all element to the right of sidebar from) moving */
  section[data-testid="stSidebar"] {
    width: 95px !important;
    min-width: 95px !important;
  }
}

@media (max-width: 272px) {
  section[data-testid="stSidebar"] > div {
    width: 15rem;
  }
}

/***********************************************************
*  Additional CSS for other elements                    
************************************************************/