/* *************************************************** mField *************************************************** */
.section-mfield 
{
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto 90px auto;
}
.section-mfield h2
{
  color: var(--color-h);
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin-bottom: 30px;
}
.section-mfield p
{
  padding: 10px 0;
}
.section-mfield p a, .section-mfield p a strong
{
  color: var(--color-link);
  font-weight: 700;
}
.mfield-container
{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
  row-gap: 10px;
  margin: 50px 0px;
}
.mfield-sub-container 
{
  display: grid;
  grid-template-columns: 20px 60px auto;
  grid-template-rows: 300px repeat(2, 20px);
}
.mfield-canvas
{
  grid-area: 1 / 3 / 2 / 4;
  width: 100%;
  height: 300px;
}
.mfield-values-x-container
{
  grid-area: 2 / 3 / 3 / 4;
  display: grid;
  grid-template-columns: 0.5fr repeat(7, 1fr) 0.5fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: start;
}
.mfield-values-x-container span
{
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
}
.mfield-values-x-container span:first-of-type
{
  justify-self: start;
}
.mfield-values-x-container span:last-of-type
{
  justify-self: end;
}
.mfield-unit-x-container
{   
  grid-area: 3 / 3 / 4 / 4;
  justify-self: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
  text-align: center;
}
.mfield-values-y-container 
{
  position: relative;
  grid-area: 1 / 2 / 2 / 3;
  display: grid;
  justify-items: end;
  align-items: center;
  padding-right: 6px;
}
.mfield-values-y-container span
{
  position: absolute;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
  right: 4px;
}
.mfield-unit-y-container
{   
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
  text-align: center;
  text-orientation: revert;
  writing-mode: sideways-lr;
}


/* ******************************************* Table ******************************************* */
.table-container
{  
  max-width: 1200px;
  margin: 30px auto;
  overflow-x: auto;
}
table
{
  width: 100%;
  border-collapse: collapse;
}
table:first-of-type
{
  margin-top: 0;
}
tbody tr:nth-child(even)
{
  background-color: #eee;
}
th
{
  background-color: var(--color-table-head);
  color: #222;
  font-weight: 700;
  text-align: left;
  padding: 5px 10px;
}
td
{
  text-align: center;
  padding: 5px 10px;
}
td:first-of-type
{
  text-align: left;
}


/* ************************************************************************************************************ */
/* ********************************************** RESPONSIVENESS ********************************************** */
/* ************************************************************************************************************ */
@media (hover: hover)
{
  /* mField */
  .section-mfield p a:hover
  {
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }
}
@media only screen and (max-width: 768px) 
{
  /* mField */
  .mfield-container
  {   
    margin-left: -10px;
  }
  .mfield-values-x-container
  {
    grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
  }
}
@media only screen and (max-width: 480px) 
{
  /* mField */
  .section-mfield h2
  {
    font-size: 1.5rem;
    line-height: 2.0rem;
  }
}