div.results-container {
  --primary-color: #00004D;
  --secondary-color: #F3B927;
  --tertiary-color: #0B8D94;
  --bg-color: #F7F7FA;
  --text-color: #000034;
  --font-family: Roboto;
  
  h3 {
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
  }

  /* main panel */
  div.results-cards {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    
    button {
      background-color: white;
      border: none;
      padding: 0;
      font-size: inherit;
      font-weight: 400;
      cursor: pointer;
      font-family: 'Roboto', sans-serif;
      margin-right: 0;
        
      &:hover {
        text-decoration: underline;
        background-color: white;
      }
          
      &.active {
        text-decoration: underline;
        background-color: white;
      }
    }
    
    #main-dot-plot {
      min-width: 47rem;
    }
    
    div.results-card.ui.card {
      width: 100%;
      box-shadow: none;
      padding: 1em;
      margin: 0;
      
      div.outer-dot-plot-container {
        display: flex;
        flex-direction: column;
        
        div.dot-plot-legend {
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 100%;
        }
        
        div.inner-dot-plot-container {
          display: flex;
          flex-direction: row;
          
          div.relationship-plot {
            display: flex;
            width: 8%;
          }
          div.dot-plot {
            display: flex;
            width: 92%;
          }
        }
      }
    }
  }
  
  div.tbl-help-text > p {
    font-size: .67rem;
    color: grey;
  }
  
  #results_pg-pred_table {
    height: 29rem;
  }
  
  /* control panel */
  div#control_panel_tabset {
    .item {
      width: 50%;
      justify-content: center;
      font-family: 'Roboto', Sans-Serif;
      text-transform: uppercase;
      border-top-width: 0;
      border-color: #ffffff;
      border-left: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      border-radius: 0!important;
      padding: 1.1em;
      background-color: var(--tertiary-color);
      color: rgba(255, 255, 255, 0.5);
      
      &:first-child {
        border-right: 1px solid #ffffff;
      }
      
      &.active {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  
  div.ui.attached {
    border: none;
  }
  
  /* outcomes */
  div.outcomes-ctrl{
    padding: 2rem;

    h4 {
      font-family: 'Roboto', Sans-Serif;
      font-size: 1.2rem;
      font-weight: 500;
      width: 100%;
      margin-bottom: 0.5rem;
    }
    
    div.selected-outcomes {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      gap: .5rem;
      padding: 0;
      font-size: 1.14rem;
      
      button.outcome-pill.ui.button.shiny-bound-input {
        font-family: 'Roboto', Sans-Serif;
        padding: .7rem;
        display: flex;
        flex-direction: row-reverse;
        margin-right: 0;
        font-weight: 400;
        color: #ffffff;
        background-color: var(--tertiary-color);
        text-align: start;
        align-items: center;
        font-size: 1.14rem;

        i {
          margin: 0 0 0 .5rem;
        }
      }
    }
    
    div.outcomes-list {
      margin-top: 2em;
      
      div.fluid.accordion {
        border-radius: 0;
        margin-top: 1rem;
        font-size: 1.14rem;
        
        div.title {
          font-family: 'Roboto', Sans-Serif;
          font-weight: 400;
          font-size: 1.14rem;
          line-height: 1.3;
          display: flex;
          align-items: baseline;
          padding: 0.75em 0;
          
          i.dropdown.icon {
            color: var(--tertiary-color);
            opacity: 0.4;
          }
        }
        
        div.title.active {
          i.dropdown.icon {
          opacity: 1;
          }
        }
        
        div.outcome-item {
          line-height: 100%;
          margin-bottom: 0.5em;
        }
        
        p.visible {
          height: 0;
          margin: 0;
        }
      }
    }
  }
  
  /* components */
  div.ui.grid > div.container-fluid > div.components-ctrl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    font-size: 1.14rem;
    
    div.select-components {
      label {
        color: var(--text-color);
        font-size: 1.2rem;
        font-weight: 500;
        margin-bottom: 0.5em;
      }
      
      div.selection.dropdown {
        margin: 1em 0;
        font-size: 1.14rem;
      }
      
      .ui.selection.dropdown > .dropdown.icon {
        color: var(--tertiary-color);
      }
      
      p.step-help-txt {
        margin: 1em 0;
      }
    }
    
    div.reset-btn {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      
      div {
        font-size: 1.2rem;
        font-weight: 500;
      }
      
      button.ui.button.shiny-bound-input {
        width: 5.75rem;
        padding: 0.5rem 1rem;
        margin: 0;
        font-weight: 400;
        background-color: unset;
        text-align: end;
        padding: 0.5rem 0;
        color: #4d4d4d;
        font-size: 1rem;
        text-decoration: underline;
      }
    }
    
    div.component-cat-inner {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: auto;
      margin-top: 1rem;
      align-items: baseline;
    
      div.component-cat-label {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        align-items: baseline;
        line-height: 1;
        gap: 3px;
      }
      
      div.component-status {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 2rem;
        width: 100%;
        height: 100%;
        align-items: center;
        
        div.component-status-text {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          width: 8rem;
          height: 100%;
          align-items: center;
          justify-content: end;
        }
        
        div.incrementers {
          display: flex;
          flex-direction: row;
          
          button.incrementer.btn.action-button.shiny-bound-input {
            display: flex;
            align-content: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 2rem;
            height: 2rem;
            border: 1px solid white;
            cursor: pointer;
            background-color: var(--tertiary-color);
            
            &:first-child {
              /*border-right: none;*/
              margin-right: -1px;
            }
            
            i.minus.icon, i.plus.icon {
              width: 1rem;
              height: 1rem;
              margin: 0;
              font-size: 0.7rem;
              line-height: 1rem;
              text-align: center;
              color: white;
            }
          }
        }
      }
    }
  }
  
  div.ctrl-footnote {
    font-size: .75rem;
  }
}


/* Tooltip styles */
.txt-hover-tooltip {
  i:hover {
    cursor: pointer;
  }
}

/* Important overrides */
/* Main Panel OR Side Panel */
div.results-container > div > div {
  box-shadow: none!important;
  border-radius: 0!important;
  background-color: white!important;
}
/* Main Panel */
div.results-container > div > div:nth-child(1) {
    min-width: 56rem!important;
}
/* Side Panel */
div.results-container > div > div:nth-child(2) {
    padding: 0!important;
    min-width: 21rem!important;
}