table { border-collapse: collapse; }
th, td { border: #cccccc 1px solid; padding: 3px 5px; white-space: nowrap; }
tr.last td { border-bottom: #666666 3px solid; }

div#content > div.fieldsetcontainer
{
  column-count: 1;
  max-width: none;
}


fieldset
{
  width: calc(100vw - 20px);
  display: inline-block;
  margin: 0 0 20px 0;
  padding: 8px;
  border-radius: 6px;
  border: #3e2e99 2px solid;
}



legend
{
  padding: 2px 4px;
  /* For better legibility against the box-shadow */
}

fieldset > div
{
  max-width: calc(100vw - 36px);
  overflow: auto;
  height: 330px;
}

fieldset.fixed600 > div
{
  height: 600px;
}

fieldset.autoheight > div
{
  height: auto;
}


fieldset.fixed300 > div
{
  height: 300px;
}

fieldset > div > img
{
  width: calc(100vw - 36px);
}

fieldset > div > table
{
  width: 100%;
}

@media only screen and (min-width: 1024px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 2;
    column-gap: 20px;
    width: 1000px;
  }

  fieldset
  {
    width: 480px;
  }

  fieldset > div
  {
    max-width: calc(490px - 30px);
  }

  fieldset > div > img
  {
    width: 460px;
  }


  fieldset > div > table
  {
    width: 100%;
  }

}

@media only screen and (min-width: 1524px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 3;
    width: 1500px;
  }
}

@media only screen and (min-width: 2024px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 4;
    width: 2000px;
  }
}

@media only screen and (min-width: 2524px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 5;
    width: 2500px;
  }
}

@media only screen and (min-width: 3024px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 6;
    width: 3000px;
  }
}

@media only screen and (min-width: 3524px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 7;
    width: 3500px;
  }
}

@media only screen and (min-width: 4024px)
{
  div#content > div.fieldsetcontainer
  {
    column-count: 8;
    width: 4000px;
  }
}