/*---- RESPONSIVE ----*/

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1400px) {
/*  main { background-color: green; }*/
  .chart { width: 350px; }
  #search { width: 300px; min-width: 300px; }
  #list th:nth-child(5), #list td:nth-child(5) { display: none; }
}

@media screen and (max-width: 1200px) {
/*  main { background-color: cyan; }*/
  .chart { width: 300px; }
  #search { width: 250px; min-width: 250px; }
}

@media screen and (max-width: 1000px) {
/*  main { background-color: gold; }*/
  .chart { width: 250px; }
  #search { width: 200px; min-width: 200px; }
  .formBox { max-width: 100%; width: 100%; }
}

@media screen and (max-width: 900px) {
  form { width: 100%; }
  .formBox { max-width: 100%; width: 100%; }
  .formPage { max-width: 100%; width: 100%; padding: 40px; background-color: var(--back-primary); border-radius: 8px; box-shadow: 0 0 6px #00000044; }

  input { width: 100%; }
  input.w100 { width: 100%; max-width: 200px; }
  input.w150 { width: 100%; max-width: 150px; }
  input.w200 { width: 100%; max-width: 200px; }
  input.w300 { width: 100%; max-width: 300px; }
  input.w400 { width: 100%; max-width: 400px; }
  input.w500 { width: 100%; max-width: 500px; }
  input.w600 { width: 100%; max-width: 600px; }
  .htop { flex-direction: column; }
  li label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}

@media screen and (max-width:  800px) {
/*  main { background-color: pink; }*/
  .chart { width: 300px; margin-top: 40px; }
  panelTop { flex-direction: column; justify-content: flex-start; align-items: center; }
  panelMed { flex-direction: column; justify-content: flex-start; align-items: center; margin-top: 100px; }

  content { padding: 10px; overflow-y: initial; }
  toolbar { flex-direction: column; height: auto; }
  #search { width: 90%; min-width: 300px; }
  form { width: 100%; }
  form.login { padding: 20px; box-shadow: none; }
  form.formPage { padding: 40px 20px; }
  hbar.foot { flex-direction: column-reverse; align-items: flex-end; }
  hbar.doctop { flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; }
  .control { width: 100%; }
  #printButton { display: none; }
  .totals li label { width: 100px; }
  .notes { margin-right: 0; }
  #list th:nth-child(3), #list td:nth-child(3) { display: none; }
  table.listItems th:nth-child(6), table.listItems td:nth-child(6) { display: none; }
  table.listItems th:nth-child(7), table.listItems td:nth-child(7) { display: none; }
  .settings { display: block; }
  .settings options { margin: 0 auto; width: 100%; }
  .settings options.optionsRight { display: none; }
  .settings options li { width: 100%; }
  .settings options li a { width: 100%; text-align: center; }
  form.formPage { width: 100%; margin: 20px 0; border: none; box-shadow: none; }

}

@media screen and (max-width:  600px) {
/*  main { background-color: red; }*/
  .chart { width: 300px; margin-top: 40px; }
  panelTop { flex-direction: column; justify-content: flex-start; align-items: center; }
  panelMed { flex-direction: column; justify-content: flex-start; align-items: center; margin-top: 100px; }
  content { padding: 10px; }
  toolbar { flex-direction: column; height: auto; }
  #search { width: 90%; min-width: 300px; }
  #list th:nth-child(6), #list td:nth-child(6) { display: none; }
  form.formPage { width: 100%; margin: 20px 0; border: none; box-shadow: none; }
}

@media screen and (max-width: 400px) {
  #list th:nth-child(1), #list td:nth-child(1) { display: none; }
}