/*****************************************^ Progress Page Settings ***********************************************/
.nav-tabs .nav-link{
  border:1px solid var(--domains-tabs-border-color);
}
.slider-container{
  max-width: none;
  width:30rem;
}
.indirect-slider-container{
  max-width: 500px;
  margin-top: 15px;
  width:100%;
}
#outcomes-quarter-slider .rc-slider-mark-text,
#indirect-quarter-slider .rc-slider-mark-text{
  font-size: x-large !important;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--secondary-text-color) !important;
}
.rc-slider-step{
  height: 7px !important;
}
#outcomes-quarter-slider .rc-slider-track,
#outcomes-quarter-slider .rc-slider-rail,
#indirect-quarter-slider .rc-slider-track,
#indirect-quarter-slider .rc-slider-rail{
  height:10px !important;
}
#outcomes-quarter-slider .rc-slider-track,
#indirect-quarter-slider .rc-slider-track{
  background-color:var(--accordion-button-color) !important;
}
#outcomes-quarter-slider .rc-slider-rail,
#indirect-quarter-slider .rc-slider-rail{
  background-color: var(--quarter-slider-rail-color) !important;
}
.tab-labels{
  font-size: large;
  --bs-nav-tabs-link-hover-border-color:var(--domains-tabs-border-color);
}
.tab-labels, .tab-labels:focus{
  color:var(--domains-tabs-text-color);
}
.progress-modal-body-min-height{
  min-height: 300px !important;
}

/** Program Link **/
/* Sets the font-size and text color */
#program-description-modal-footer{
    font-size: xx-large;
    fill:var(--program-link-color);
  }
  /* Sets the link color and makes the link text italic */
  #program-description-modal-footer a{
    color:var(--program-link-color);
    font-style: italic;
  }
  /* Sets the color text color of the link */
  #program-description-modal-footer a:hover{
    color:var(--program-link-hover-color);
  }
  
  /** Organization Images **/
  /* Sets the dimensions of the organization images */
  #org-image {
    height: 100%;
    max-width:55%;
  }
  /** Program Images **/
  /* Sets the content justification and the height of the program images on large screens */
  #program-imgs {
    height: 12rem;
  }
  /** Organization Name and Program Name**/
  /* Sets the font-weight and font-size of the 
     organization name and program name*/
  #org-name, #program-name {
    font-weight: bold;
    font-size: xx-large;
  }
  
  /** Program Coin **/
  /* Sets the left margin and the height of the program coins */
  #program-coin {
    height: 55%;
    margin-left: 2%; /* Maybe change to ms-md-4 */
  }
  
  /* For screens smaller than a tablet */
  @media (max-width: 992px) {
    /* Necessary to center and align program description content on medium screens and below */
    /* Organization image dimensions */
    #org-image {
      max-width: 100%;
      width: 100%;
      height: 50%;
    }
    /* Program image justification and height */
    #program-imgs {
      height: 20rem;
    }
    /* Program coin width, height, and left margin */
    #program-coin {
      width: 50%;
      height: 40%;
      margin-left: 0%; /* Maybe change to ms-0 */
    }
  }
    
  /************************************************** General Modal Settings **********************************/
/*Modal background and text colors switch between light and dark mode*/
.custom-modal .modal-content {
    background-color:var(--content-background-color) !important;
    color:var(--secondary-text-color) !important;
}
.program-content {
  font-size: x-large;
  font-family: Arial, Helvetica, sans-serif;
}

/************************************************** Program Description Tabs Settings **********************************/
/*Settings for active tab*/
#program-description-modal-header .nav-tabs .nav-item.show .nav-link, 
#program-description-modal-header .nav-tabs .nav-link.active{
  font-size:large;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--tertiary-text-color) !important;
  background-color:var(--accordion-button-color) !important;
  border-color:var(--tertiary-text-color) !important;
}
/*Settings for non active tab*/
#program-description-modal-header .nav-tabs .nav-link{
  border:1px solid var(--domains-tabs-border-color);
  color:var(--secondary-text-color) !important;
  font-size:large;
  font-family:Arial, Helvetica, sans-serif;
}

/************************************************** Domain Colors Settings **********************************/
/*Set domain color for grid header and icons, listgroup items when clicked and hovered*/
.domain-color-1 .ag-header-cell,
.domain-color-1 .ag-header-cell .ag-icon,
.domain-color-1.list-group-item.active,
.domain-color-1.list-group-item:hover{
  background-color: #C6015D !important;
  color:white !important;
}
.domain-color-2 .ag-header-cell,
.domain-color-2 .ag-header-cell .ag-icon,
.domain-color-2.list-group-item.active,
.domain-color-2.list-group-item:hover{
  background-color: #3C1C59 !important;
  color:white !important;
}
.domain-color-3 .ag-header-cell,
.domain-color-3 .ag-header-cell .ag-icon,
.domain-color-3.list-group-item.active,
.domain-color-3.list-group-item:hover{
  background-color: #0E518B !important;
  color:white !important;
}
.domain-color-4 .ag-header-cell,
.domain-color-4 .ag-header-cell .ag-icon,
.domain-color-4.list-group-item.active,
.domain-color-4.list-group-item:hover{
  background-color:#173706 !important;
  color:white !important;
}
.domain-color-5 .ag-header-cell,
.domain-color-5 .ag-header-cell .ag-icon,
.domain-color-5.list-group-item.active,
.domain-color-5.list-group-item:hover{
  background-color: #BCA438 !important;
  color:black !important;
}
.domain-color-6 .ag-header-cell,
.domain-color-6 .ag-header-cell .ag-icon,
.domain-color-6.list-group-item.active,
.domain-color-6.list-group-item:hover{
  background-color: #9D5B0B !important;
  color:white !important;
}
.domain-color-7 .ag-header-cell,
.domain-color-7 .ag-header-cell .ag-icon,
.domain-color-7.list-group-item.active,
.domain-color-7.list-group-item:hover{
  background-color: #821246 !important;
  color:white !important;
}
.domain-color-8 .ag-header-cell,
.domain-color-8 .ag-header-cell .ag-icon,
.domain-color-8.list-group-item.active,
.domain-color-8.list-group-item:hover{
  background-color: #652FB6 !important;
  color:white !important;
}
.domain-color-9 .ag-header-cell,
.domain-color-9 .ag-header-cell .ag-icon,
.domain-color-9.list-group-item.active,
.domain-color-9.list-group-item:hover{
  background-color: #033154 !important;
  color:white !important;
}
.domain-color-10 .ag-header-cell,
.domain-color-10 .ag-header-cell .ag-icon,
.domain-color-10.list-group-item.active,
.domain-color-10.list-group-item:hover{
  background-color: #147629 !important;
  color:white !important;
}
.domain-color-11 .ag-header-cell,
.domain-color-11 .ag-header-cell .ag-icon,
.domain-color-11.list-group-item.active,
.domain-color-11.list-group-item:hover{
  background-color: #E48007 !important;
  color:black !important;
}
.domain-color-12 .ag-header-cell,
.domain-color-12 .ag-header-cell .ag-icon,
.domain-color-12.list-group-item.active,
.domain-color-12.list-group-item:hover{
  background-color: #907114 !important;
  color:white !important;
}

/************************************************** AG Grid Settings **********************************/
/*Settings for entire grid*/
#domain-table .ag-root,
#domain-table .ag-header-cell-label,
#domain-table .ag-cell {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: left;
}
/*Settings for cells of grid*/
#domain-table .ag-cell{
    background-color:var(--content-background-color) !important;
    color:var(--secondary-text-color) !important;
    border:1px solid var(--secondary-text-color) !important;
}
/*Settings for background of grid*/
#domain-table .ag-paging-panel,
#domain-table .ag-paging-panel .ag-icon,
#domain-table .ag-body-viewport,
#domain-table .ag-root-wrapper,
#domain-table .ag-header-viewport{
    background-color:var(--content-background-color) !important;
    color:var(--secondary-text-color) !important;
}
/*Get rid of extra blank space under grid*/
.ag-center-cols-viewport {
    min-height: unset !important;
}
/*Settings for grid tooltips*/
.ag-tooltip {
  font-family:Arial, Helvetica, sans-serif;
  background-color:var(--secondary-background-color) !important;
  color:var(--secondary-text-color) !important;
}

/************************************************** Domain ListGroup Settings **********************************/
#domain-definitions-modal .list-group-item.active,
#domain-definitions-modal .list-group-item{
  border:1px var(--secondary-text-color) solid !important;
  font-weight:bold;
  background-color:var(--content-background-color);
  color:var(--secondary-text-color);
}

/************************************************** Domain Dropdown Settings **********************************/
/*Settings for dropdown list of items*/
#domain-definitions-dropdown .dropdown-item{
  color:var(--secondary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*Settings for dropdown button when item selected*/
#domain-definitions-dropdown .btn-primary{
  border-color:var(--secondary-text-color) !important;
  font-weight:bold;
  width:100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 2rem;
}
/*Set height of dropdown list to scroll*/
#domain-definitions-dropdown .dropdown-menu{
  max-height:200px;
  overflow-y:auto;
  width:100%;
}
/*Make sure the dropdown arrow is always visible*/
#domain-definitions-dropdown .dropdown-toggle::after {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}