@font-face {
  font-family: 'InterVariable';
  src: url('/assets/Inter-VariableFont_slnt,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'InterVariable', sans-serif;
 }


/* prevent interference between data_table and bootstrap table */
.dash-table-container .row {
  display: block;
  margin: 0;
}

.dash-graph-districts {
    height: 600px;
}

/* condition for screen size lower than XYZpx */
@media (max-width:600px) {
  /* your conditional / responsive CSS inside this condition */
  body {
    //zoom: 200%;
    //font-size: 200%;
    //scale(2);
  }

  .dash-graph-districts {
    height: 400px;
  }
}

/* set data_table height */
.dash-spreadsheet-inner.dash-spreadsheet.dash-freeze-top.dash-no-filter.dash-fill-width {
  max-height: 600px;
}

/* dcc.Loading component with transparent background */
/* this defines a style for a component with id='loading-wrapper' */
.loading_wrapper > div {
    visibility: visible !important;
}
/* assets/custom.css */
.nav-link.active {
  /* background-color: black !important; */
  background-color: #1e2d9a !important;
  color: white;


}


/* Style for non-active NavLinks */
.nav-link {
  color: black ; /* Set text color to black */
}

/* Base styles for groups */
/* Blue */
/* Red */
/* Green */
/* Purple */
/* .text-group5 { color: #040305; } Black */
/* Black */

/* .text-group1 { color: #0000ff; } 
.text-group2 { color: #c20017; } 
.text-group3 { color: #009245; } 
.text-group4 { color: #ff00ff; } 
.text-group5 { color: #f15a24; } */

/* Responsive Font Sizes */
@media (max-width:5000px) { /* Large devices (large desktops, less than 1200px) */
  body, .text-responsive {
    font-size: 20px; /* Larger font size */
  }
  .text-group1 { font-size: 28px; }
  .text-group2 { font-size: 22px; }
  .text-group3 { font-size: 20px; }
  .text-group4 { font-size: 16px; }
  .text-group5 { font-size: 14px; }
  .nav-link-spacing {
    margin-right: 0px; /* Adjust the margin as needed */
  }

}


/* Responsive Font Sizes */
@media (max-width:1600px) { /* Large devices (large desktops, less than 1200px) */
  body, .text-responsive {
    font-size: 20px; /* Larger font size */
  }
  .text-group1 { font-size: 24px; }
  .text-group2 { font-size: 18px; }
  .text-group3 { font-size: 14px; }
  .text-group4 { font-size: 12px; }
  .text-group5 { font-size: 10px; }
  .nav-link-spacing {
    margin-right: 5px; /* Adjust the margin as needed */
  }

}


/* Responsive Font Sizes */
@media (max-width: 1300px) { /* Large devices (large desktops, less than 1200px) */
  body, .text-responsive {
    font-size:18px; /* Larger font size */
  }
  .text-group1 { font-size: 22px; }
  .text-group2 { font-size: 17px; }
  .text-group3 { font-size: 13px; }
  .text-group4 { font-size: 11px; }
  .text-group5 { font-size: 8px; }
  .nav-link-spacing {
    margin-right: 8px; /* Adjust the margin as needed */
  }
}

@media (max-width: 992px) { /* Medium devices (tablets, less than 992px) */
  body, .text-responsive {
    font-size: 16px; /* Medium font size */
  }
  .text-group1 { font-size: 20px; }
  .text-group2 { font-size: 16px; }
  .text-group3 { font-size: 12px; }
  .text-group4 { font-size: 10px; }
  .text-group5 { font-size: 7px; }
  .nav-link-spacing {
    margin-right: 8px; /* Adjust the margin as needed */
  }
}

@media (max-width: 768px) { /* Small devices (landscape phones, less than 768px) */
  body, .text-responsive {
    font-size: 14px; /* Small font size */
  }
  .text-group1 { font-size: 18px; }
  .text-group2 { font-size: 15px; }
  .text-group3 { font-size: 11px; }
  .text-group4 { font-size: 9px; }
  .text-group5 { font-size: 6px; }
  .nav-link-spacing {
    margin-right: 8px; /* Adjust the margin as needed */
  }
}

@media (max-width: 576px) { /* Extra small devices (portrait phones, less than 576px) */
  body, .text-responsive {
    font-size: 12px; /* Extra small font size */
  }
  .dash-graph-districts {
    height: 400px;
  }
  .text-group1 { font-size: 16px; }
  .text-group2 { font-size: 14px; }
  .text-group3 { font-size: 10px; }
  .text-group4 { font-size: 8px; }
  .text-group5 { font-size: 6px; }
  .nav-link-spacing {
    margin-right: 5px; /* Adjust the margin as needed */
  }
}