/*   
    Copyright (C) 2021-2024 Peter J. Davidson

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program, in the file LICENSE.txt.  If not, see <https://www.gnu.org/licenses/>.
*/


header {
  position: sticky;
  top:0;
  padding:10px;
  background: #B2D6FF;
  text-align: center;
}

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table.center {
	margin-left:auto; 
	margin-right:auto;
}

table.data {
  margin-left:auto; 
  margin-right:auto;
  width: 60%;
}


table.twocol {
	margin-left:auto; 
	margin-right:auto;
	width: 60%;
	border-collapse: collapse;
}

th, td {
  padding: 5px;
  text-align: left;
  vertical-align: top;
}

th.right, td.right {
  padding: 5px;
  text-align: right;
  vertical-align: top;
}

th.left, td.left {
  padding: 5px;
  text-align: left;
  vertical-align: top;
}

th.center, td.center {
  padding: 5px;
  text-align: center;
  vertical-align: top;
}
div {
	padding: 20px;
	text-align: center;
	margin: 20px auto; /* vertical horizontal */
}

textarea {
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
    -moz-box-sizing: border-box; /* FF1+ */
    box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

p.alright {text-align: "right";}

a.dead:link {text-decoration:line-through; font-style: italic;}

hr.hrsixty {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}


 /* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}


/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
} 




 /* Customize the label (the containerbox) */
.containerbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerbox:hover input ~ .checkmarkbox {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerbox input:checked ~ .checkmarkbox {
  background-color: #2196F3;
}

/* Create the checkmarkbox/indicator (hidden when not checked) */
.checkmarkbox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmarkbox when checked */
.containerbox input:checked ~ .checkmarkbox:after {
  display: block;
}

/* Style the checkmarkbox/indicator */
.containerbox .checkmarkbox:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 


/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {
    /* background-color: #F09A9D; /* Red */
     background-color: #B2D6FF; /* Blue */
       font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

 }
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
    /* background-color: #F5CF8E; /* Yellow */
    background-color: #B2D6FF; /* Blue */
      font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

  }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  body {
    background-color: #B2D6FF; /* Blue */
      font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

  }
}