* {
  box-sizing: border-box;
}
body {
  font-size: 20px;
/*
    margin: 0 1rem;
    width: 100%;
*/
}

div {
  margin: 2px 0px 2px 0px;
/*  border: 1px solid blue;
*/
}
div.link, a.link {
    width: 96%; 
    background-color: SteelBlue;
    color: white;
/*    padding: 2%; /* 10px 5px 10px; */
    margin: 2px 2%;
}
div.link a, a.link {
  font-size: 1.1rem;
  color:white;
  text-decoration: none;
}
div.page {
        page-break-after: always;
        page-break-inside: avoid;
      }

div.main {
  margin-bottom: 24px;
}
h1 {
  font-size: 1.5rem;
  margin: 2px;
  padding: 4px 0px;
  font-weight: bold;
  width: 100%;
  clear: both;
}
h2 {
  font-size: 1.2rem;
  margin: 2px;
  padding: 0px;
  width: 100%;
  clear: both;
  margin-top: 6px;
}
p {
  font-size: 1em;
  margin: 0px;
  padding: 0px 0px 4px 0px;
}
.centre {
  text-align: center;
}
div.right {
  text-align: right;
}
div.left {
  text-align: left;
}
div.m2ch {
  margin-left: 2ch;
}
div.m-2ch {
  margin-left: -2ch;
  margin-right: 2ch;
}
div.mr-2ch {
  margin-right: -2ch;
}
div.clear {
  clear: both;
}
span.right {
  float: right;
}
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
a small, h1 small {
  font-size: 80%;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}

/*----------------------------------------- Responsive Layout*/
* {
  box-sizing: border-box;
}
[class*="col-"] {
  float: left;
  padding: 2px 8px;
}
[class*="cm"], [class*="px"], [class*="in"] {
  float: left;
  text-align:center;
  font-size: 0.8rem;
}
[class*="w-"] {
  float: left;
  margin-top: -2px;
}
[class*="w-"] {
  width: 100%;
  margin: 0 0 4px 0;
}
[class*="wi-"] {
  float: left;
  margin: -2px 1% 4px 0;
}
[class*="wc-"] {
  float: left;
  margin-top: -2px;
}

.cm1:nth-child(odd) {
    background-color:LightGrey;
}
.cm1:nth-child(even) {
    background-color:Moccasin;
}
.in1:nth-child(odd) {
    background-color:LightGrey;
}
.in1:nth-child(even) {
    background-color:Moccasin;
}
.px10:nth-child(odd) {
    background-color:LightGrey;
}
.px10:nth-child(even) {
    background-color:Moccasin;
}
.px100:nth-child(odd) {
    background-color:pink;
}
.px100:nth-child(even) {
    background-color:GreenYellow;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
.w-100 {width:100%}

/*For mobile phones:*/
[class*="wi-"] {
  width: 100%;
}
[class*="wc-"] {
  width: 100%;
}
  p {
    font-size: 1em;
/*   line-height: 1rem; */
  }
[class*="col-"] {
  width: 100%;
}

body { font-size: 16px;}
.r {
  float:right;
}
p {
  font-size: 16px;
/* line-height: 1rem; */
  border: 0;
/*     color: green; !!! */
}

@media only screen and (min-width: 600px) { /* 780px) { */
  /*For tablets:*/
  body { font-size: 16px;}
  p {
    font-size: 16px;
  }
  .wc-1 {width: 16.33%;}
  .wc-2 {width: 32.66%;}
  .wc-3 {width: 50%;}
  .wc-4 {width: 66.33%;}
  .wc-5 {width: 82.33%;}
  .wc-6 {width: 100%;}

  .wi-1 {width: 10ex;}
  .wi-2 {width: 20ex;}
  .wi-3 {width: 30ex;}
  .wi-4 {width: 40ex;}
  .wi-5 {width: 50ex;}
  .wi-6 {width: 60ex;}
  .wi-7 {width: 70ex;}
  .wi-8 {width: 80ex;}
  .wi-9 {width: 90ex;}

  .wi-10 {width: 10ex;}
  .wi-15 {width: 15ex;}
  .wi-20 {width: 20ex;}
  .wi-25 {width: 25ex;}
  .wi-30 {width: 30ex;}
  .wi-35 {width: 35ex;}
  .wi-40 {width: 40ex;}
  .wi-45 {width: 45ex;}
  .wi-50 {width: 50ex;}
  .wi-55 {width: 55ex;}
  .wi-60 {width: 60ex;}
  .wi-70 {width: 70ex;}
  .wi-80 {width: 80ex;}
  .wi-90 {width: 90ex;}
  .wi-100 {width: 100ex;}
  
  .w-1  {width:  6%;}
  .w-2  {width: 12%;}
  .w-3  {width: 18%;}
  .w-4  {width: 24%;}
  .w-5  {width: 30%;}
  .w-6  {width: 36%;}
  .w-7  {width: 42%;}
  .w-8  {width: 50%;}
  .w-9  {width: 58%;}
  .w-10 {width: 64%;}
  .w-11 {width: 70%;}
  .w-12 {width: 76%;}
  .w-13 {width: 82%;}
  .w-14 {width: 88%;}
  .w-15 {width: 94%;}
  .w-16 {width: 100%; margin-top: 4px; clear: both;}

  .c-d10 {width: 10%;}
  .c-d20 {width: 20%;}
  .c-d30 {width: 30%;}
  .c-d40 {width: 40%;}
  .c-d50 {width: 50%;}
  .c-d60 {width: 60%;}
  .c-d70 {width: 70%;}
  .c-d100 {width: 100%;}
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%; margin-top: 6px;}
}
@media only screen and (min-width: 910px) { /* 780px) { */
  /*For tablets:*/
  body { font-size: 17px;}
  p {
    font-size: 17px;
/*   line-height: 1rem; 
    color: maroon; /* !!! */
  }
  .col1 {width: 33%; float: left;}
  .col2 {width: 67%; float: left;}
  .wc-1 {width: 16.33%;}
  .wc-2 {width: 32.66%;}
  .wc-3 {width: 50%;}
  .wc-4 {width: 66.33%;}
  .wc-5 {width: 82.33%;}
  .wc-6 {width: 100%;}

  .wi-1 {width: 10ex;}
  .wi-2 {width: 20ex;}
  .wi-3 {width: 30ex;}
  .wi-4 {width: 40ex;}
  .wi-5 {width: 50ex;}
  .wi-6 {width: 60ex;}
  .wi-7 {width: 70ex;}
  .wi-8 {width: 80ex;}
  .wi-9 {width: 90ex;}
  .wi-10 {width: 100ex;}
  
  .w-1  {width:  6%;}
  .w-2  {width: 12%;}
  .w-3  {width: 18%;}
  .w-4  {width: 24%;}
  .w-5  {width: 30%;}
  .w-6  {width: 36%;}
  .w-7  {width: 42%;}
  .w-8  {width: 50%;}
  .w-9  {width: 58%;}
  .w-10 {width: 64%;}
  .w-11 {width: 70%;}
  .w-12 {width: 76%;}
  .w-13 {width: 82%;}
  .w-14 {width: 88%;}
  .w-15 {width: 94%;}
  .w-16 {width: 100%; margin-top: 4px; clear: both;}

  .c-d10 {width: 10%;}
  .c-d20 {width: 20%;}
  .c-d30 {width: 30%;}
  .c-d40 {width: 40%;}
  .c-d50 {width: 50%;}
  .c-d60 {width: 60%;}
  .c-d70 {width: 70%;}
  .c-d100 {width: 100%;}
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%; margin-top: 6px;}
/*  .row {max-width: 1120px;} // only for this web app */
}

@media only screen and (min-width: 1000px) { /* 780px) { */
  /*For desktop:*/
  body { font-size: 20px;}
  div {
    max-width: 1200px; 
  }
  p {
    font-size: 20px;
 /*   line-height: 1rem; 
    color: blue; /* !!! */
  }
  .wi-1 {width: 10ex;}
  .wi-2 {width: 20ex;}
  .wi-3 {width: 30ex;}
  .wi-4 {width: 40ex;}
  .wi-5 {width: 50ex;}
  .wi-6 {width: 60ex;}
  .wi-7 {width: 70ex;}
  .wi-8 {width: 80ex;}
  .wi-9 {width: 90ex;}
  .wi-10 {width: 100ex;}

  .c-d10 {width: 10%;}
  .c-d20 {width: 20%;}
  .c-d30 {width: 30%;}
  .c-d40 {width: 40%;}
  .c-d50 {width: 50%;}
  .c-d60 {width: 60%;}
  .c-d70 {width: 70%;}
  .c-d100 {width: 100%;}
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%; margin-top: 6px;}
/*  .row {max-width: 1120px;} // only for this web app */
}

@media print {
  body { font-size: 18px; width: 92ex;}
  div {
    break-inside: avoid;
  }  
  div.xxx {break-after: page;}
  div.wc-6 {break-after: page;}
*/
  .wc-1 {width: 16.33%;}
  .wc-2 {width: 32.66%;}
  .wc-3 {width: 50%;}
  .wc-4 {width: 66.33%;}
  .wc-5 {width: 82.33%;}
  .wc-6 {width: 100%;}

  .wi-1 {width: 10ex;}
  .wi-2 {width: 20ex;}
  .wi-3 {width: 30ex;}
  .wi-4 {width: 40ex;}
  .wi-5 {width: 50ex;}
  .wi-6 {width: 60ex;}
  .wi-7 {width: 70ex;}
  .wi-8 {width: 80ex;}
  .wi-9 {width: 90ex;}

  .wi-10 {width: 10ex;}
  .wi-20 {width: 20ex;}
  .wi-30 {width: 30ex;}
  .wi-40 {width: 40ex;}
  .wi-50 {width: 50ex;}
  .wi-60 {width: 60ex;}
  .wi-70 {width: 70ex;}
  .wi-80 {width: 80ex;}
  .wi-90 {width: 90ex;}
  .wi-100 {width: 100ex;}
  
  
  .r {
    float:right;
    }
}
/* p {
    font-size: 1em;
   line-height: 1rem; 
  }
} */
}
/* End of Responsive Layout */
/* 
body {
  background-color: Bisque  ;
}

@media screen and (min-width: 701px) {
  body {
    background-color: LightBlue;
    
  }
}
@media screen and (min-width: 830px) {
  body {
    background-color: LightGrey;
    
  }
}

@media screen and (min-width: 1000px) {
  body {
    background-color: Gold;
  }
}
@media screen and (min-width: 1275px) {
  body {
    background-color: GreenYellow;
  }
}
@media screen and (min-width: 1490px) {
  body {
    background-color: Moccasin;
  }
}
*/