.slope-selector-module {
  padding: 1em;
  height: calc(100vh - 150px);
  max-height: calc(100vh - 150px);

  .sw-dropdown {
    float: right;
  }

  .sw-dropdown-content {
    width: 50em;

    h1 {
      text-align: center;
    }

    p {
      text-align: justify;
    }

    .gif-grid {
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 2em;
      row-gap: 2em;
    }
  }

  .reactable {
    padding: 1em;
    margin-bottom: 2em;
  }
  
  .slope-widgets-container {
    display: flex;
    align-items: left;
    justify-content: space-around;
    gap: 1rem;
    width: 100%;
    max-width: 100vw;
  }
  
  .plot-widgets-container {
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    wrap: nowrap;
    gap: 1rem;
    width: 100%;
    max-width: 100vw;
  }
  
  .plot-widgets-container-2 {
    position: fixed; 
    bottom: 0;
    width: 75%;
    background: $anca-white;
    padding: 10px;
    z-index: 1000;
    border-top: 1px solid $grey-5;
    display: flex;
    justify-content: space-around;
    align-items: center; 
  }
  
  /* Style each group of widgets */
  .plot-widget-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; 
    flex: 1; 
    min-width: 12rem; 
  }

  .inline-select-input > div {
    width: 5em !important;
    text-align: left !important;
  }

  .slope-plots-container {
    margin-top: 2em;
    height: calc(100vh - 220px);
    margin-bottom: 2em;
  }

  .slope-plots-container.multiple {
    margin-top: 2em;
    margin-bottom: 2em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(33em, 1fr));
    height: calc(100vh - 220px);
    gap: 1rem;
  }
}
