/** DEMO MODE **/
#demo_banner {
  text-align:center;
  background-color: var(--bs-warning); /* Orange background */
  color: black;
  margin-top:-1px;
  /* may need to adjust for larger screens */
  margin-left:-12px;
  margin-right:-12px;
}

/*Shifting demo switch all the way to the right*/
#demo_wrapper .shiny-input-container {
  display: inline;
}
#demo_wrapper .bslib-input-switch{
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust spacing between switch and label */
}

#in_demo_mode {
  border-color: white;
  font-size: 1.8em;
  margin: 0;
}

#in_demo_mode:checked {
  background-color: var(--bs-warning);
}

.accordion .accordion-heading { 
  font-size: 24px;
}

.accordion-title {
  /* Formula used by bootstrap for h4 size*/ 
  font-size: calc(1.25625rem + .075vw);
}

.accordion {
  border-width: var(--bs-border-width);
  border-color: var(--bs-card-border-color, transparent);
  box-shadow: var(--bslib-card-box-shadow, 0px 0px 2px 0px RGBA(var(--bslib-box-shadow-color-rgb), 0.14), 0px 2px 4px 0px RGBA(var(--bslib-box-shadow-color-rgb), 0.16));
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

.accordion-item {
  border: var(--bs-accordion-border-width) solid var(--bs-card-border-color, transparent);
}

#accordion_home > div:nth-child(2) > div.accordion-header > button{
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}
.accordion-item[data-value="home_demo_instructions"] {
  border: 2px solid var(--bs-warning);
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}

/*Remove extra space below tables*/
.html-fill-container > .html-fill-item .datatables {
  flex-basis: auto !important;
}
/* Put border around form controls so they stand out on white-background cards*/
.form-group .bootstrap-select {
    margin-bottom: 0;
    border: 1px solid var(--brand-sky);
}

/* Remove extra vertical spacing within cards*/
.bslib-gap-spacing {
    gap: 0;
}

/* || BUTTONS */
.btn-default {
  color: white; /*text color*/
  background-color: var(--brand-coral); /*coral*/
  border-color: var(--brand-coral) /*coral*/
}

/*button hover and focus*/
.btn-default:hover, .btn-default:focus {
  color: var(--brand-coral); /*text color - coral*/
  background-color: white;
  border-color: var(--brand-coral); /*text color - coral*/
}

.form-control {
    border-radius: 0;
    box-shadow: none;
    border-color: black;
    color: black; /*text color*/
}

.btn:has(.disabled) {
  cursor: not-allowed;
}

/* move syso download buttons to the right*/
.syso_download_tab {
  margin-left: auto;
}

/*Center plots*/
.shiny-plot-output {
  margin: auto;
}

/* make sure download buttons don't span full width*/
.download-btn-container {
  display: block;
}

/* Make card headers look like Accordion headers*/
.bslib-card .card-header {
  font-weight: normal;
  font-size: 1rem;
}

/*otherwise, we get a 2nd scrollbar on sys overview page*/
#sys_comp_summary_ui_chart {
  height:100% !important; 
}

/* vertical bar and spacing of sys demographic selections, 
to group All + Grouped Race selections*/
#system_composition_selections label.checkbox-inline {
  padding-right: 10px;
}

#system_composition_selections label.checkbox-inline:nth-child(1),
#system_composition_selections label.checkbox-inline:nth-child(3) {
  border-right: 1px solid lightgray;
}

/*center Sys Comp/Demographics chart*/
#sys_comp_summary_ui_chart {
  display: flex;
}

#sys_comp_summary_ui_chart > img {
  margin: 0 auto;
}

#dateRangeCount > div, #dateRangeCount > div > span > span {
  height: 3rem;
}

#timeliness_metric {
  height: 3rem;
  max-width:220px;
}

#timeliness_metric-label {
  min-width: 220px;
}

/* MbM*/
/*reduce horizontal padding to better align datatable with chart*/
#sys_inflow_outflow_monthly_table  table.dataTable tbody td {
  padding: 8px 5px;
}

/* Inflow cell in MbM DT table */
#sys_inflow_outflow_monthly_table > div > table > tbody > tr:nth-child(2) > td:nth-child(1) {
    font-weight: bold;
    background-color: #CCC7C4;
    border: 2px solid black;
    background-image: linear-gradient(black 1px, transparent 1px), linear-gradient(to right, black 1px, transparent 1px);
    background-size: 10px 10px;
}

/* Outflow cell in MbM DT table */
#sys_inflow_outflow_monthly_table > div > table > tbody > tr:nth-child(3) > td:nth-child(1) {
  font-weight: bold;
  background-color: #CCC7C4;
  border: 2px solid black;
  background-image: repeating-linear-gradient(45deg, black 0, black 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
}

/* div within Inflow cell in MbM DT table */
#sys_inflow_outflow_monthly_table > div > table > tbody > tr:nth-child(2) > td:nth-child(1) > div {
  background-color: #CCC7C4;
  color: black;
  display: inline;
  font-weight: bold;
  border-color: black;
}

/* div within Outflow cell in MbM DT table */
#sys_inflow_outflow_monthly_table > div > table > tbody > tr:nth-child(3) > td:nth-child(1) > div {
  background-color: #CCC7C4;
  color: black;
  display: inline;
  font-weight: bold;
}

/* || CHART INFORMATION TABLES */
.sys_info_table {
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 0;
}

.sys_info_table th, 
.sys_info_table td {
  border: 1px solid black;
  padding: 15px;
}

.sys_info_table th {
  text-align: left;
}

.sys_info_table td {
  vertical-align: top;
}

#modal_demo_tour .modal-body {
  padding-bottom: 0.5rem;
}

#modal_demo_tour .modal-footer {
 padding: 0.5rem;
}

.treejs .treejs-node__checked > .treejs-checkbox:before {
  background-color: #16697A !important;
  border-color: #16697A !important;
}

.treejs .treejs-node__halfchecked > .treejs-checkbox:before {
  background-color: #16697A !important;
  border-color: #16697A !important;
}

/*Hide "Eva has crashed..." pop-up when timeout occurs*/
body.idle-timeout-occurred #ss-connect-dialog {
  display: none !important;
}

#notice {
  border: 3px solid #FCB248;
}