/**********************************^ General Component Settings **********************************************/
/** Accordion Stylings **/
.quarter-buttons, .quarter-buttons:hover{
  background-color:var(--accordion-button-color);
  color:var(--tertiary-text-color);
}

.accordion-button{
  --bs-accordion-btn-focus-box-shadow:0 0 0 3px var(--accordion-border-focus-color);
}
.accordion-styling{
    /* Standard Button Colors */
    --bs-accordion-btn-bg:var(--accordion-button-color);
    --bs-accordion-btn-color:var(--tertiary-text-color);
    /*Active Button Colors */
    --bs-accordion-active-bg:var(--accordion-button-color);
    --bs-accordion-active-color:var(--tertiary-text-color);
    
      /*Accordion Body */
    --bs-accordion-bg:var(--content-background-color);
    --bs-accordion-color:var(--secondary-text-color);
  }
  /*Accordion Header Text*/
  .accordion-header{
    width:100%;
    text-justify: auto;
  }

  /* Accordion button and expanded Accordion Button Border Color*/
  .accordion-button, .accordion-button:after{
    border-color: var(--accordion-button-color);
    font-size:x-large;
  }
  /* Accordion Button Image after it's been clicked */
  .accordion-button::after{
    background-image: var(--accordion-arrow) !important;
  }
  /* Centering the text in the accordion button on Mobile M and smaller */
  @media (max-width: 375px){
    .accordion-button{
      text-align: center;
    }
  }
  .accordion-collapse{
    width:100%;
  }
  
  /* Accordion text - Span Container*/
  .accordion-text{
    width: 95%;
  }
  
  /* DBC Dropdown menu color styling */
  .dropdown-menu{
    background-color: var(--dropdown-menu);
    }
  
  /* DCC Dropdowns */
  /* Margin Settings */
  .dropdown{
    margin: 2%;
  }
  
  /* Sets the Dropdown text overflow settings */
  .dropdown .Select-placeholder,
  .dropdown .Select-value-label,
  .dropdown .VirtualizedSelectOption{
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Sets the dropdown selection text color */
  .dropdown .Select-placeholder,
  .dropdown .Select-input input,
  .dropdown .Select-value-label,
  .dropdown .VirtualizedSelectOption{
    color:var(--secondary-text-color) !important;
  }
  
  /* Sets the colors of the dropdown selection box */
  .dropdown .Select-control{
    background-color: rgba(0,0,0,0) !important;
    border: 2px solid var(--dropdown-border);
  }
  
  /* Sets the background color of options */
  .dropdown .VirtualizedSelectOption {
    background-color:var(--content-background-color);
  }
  
  /* Sets the colors of selected options and the font-size*/
  .dropdown .VirtualizedSelectFocusedOption {
    background-color: var(--dropdown-selectors) !important;
    color:#071D49 !important;
    font-weight: bold;
  }
  
  /* Sets the program dropdown font-size and line-height */
  .program-dropdown {
    font-size: 20px;
    line-height:normal;
  }
  /* Sets the program dropdown font-size on mobile screens */
  /* @media (max-width: 500px){
    .program-dropdown{
      font-size: 20px;
    }
  } */
  
  /* Sets the display style, text wrapping, height, and line height of the options in the program dropdown*/
  .program-dropdown .VirtualizedSelectOption {
    display: block;             /* Keep block display for ellipsis */
    white-space: nowrap;        /* Prevent text wrapping */
    height: 48px;               /* Set the height of the dropdown option */
    line-height: 48px;          /* Match line-height to height for vertical centering */
  }


  /** Tables **/
#age-table{
    font-size:large;
    font-family: Arial, Helvetica, sans-serif;
    
}
@media (max-width: 500px){
  #age-table{
    font-size:15px;
    justify-content: center;
  }
}
@media (max-width:320px){
  #age-table{
    font-size:13px;
    transform:translateX(-0.25rem);
  }
}
#age-table .table :is(th, td){
    vertical-align: middle !important;
    
}
#age-table td{
  border:1px solid var(--sankey-node-text-color) !important;
}

#age-table .table th{
    background-color:var(--accordion-button-color) !important;
    color:var(--tertiary-text-color) !important; 
}
#age-table .table td{
    background-color:var(--content-background-color) !important;
    color:var(--secondary-text-color) !important;
}

.form-check-input:checked{
  background-color: var(--accordion-button-color) !important;
}


/* Modal Settings */
.modal-content{
  background-color: var(--content-background-color) !important;
  color:var(--secondary-text-color) !important;
}