@import url("common.css");
body {
  font-size: 1rem;
  text-align: left;
  background-color: white;
  color: black;
  margin-top: 5px;
  margin-right: 20px;
  margin-bottom: 2px;
  margin-left: 20px;
}
h1 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #000099;
  text-align: center;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 0.5rem;
  padding-left: 0px;
  border-bottom: 3px solid #ffcc00;
}
h2 {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  background-color: #ceefff;
  margin-top: 0px;
  margin-bottom: 1rem;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 0.5rem;
  padding-left: 0px;
}
h3 {
  font-size: 1.2rem;
  font-weight: bold;
  font-style: italic;
  text-align: left;
  margin: 0 0 0.5rem 0;
}
p {
  font-size: 1rem;
  margin-bottom: 1rem;
}
ul {
  list-style-type: square;
  list-style-position: outside;
  margin-left: 1.5rem;
}
ol {
  list-style-type: decimal;
}
li {
  margin-bottom: 1rem;
}
a {
  text-decoration: none;
}
form {
  margin-bottom: 0px;
  margin-right: 2px;
  width: max-content;
  max-width: 100%;
  overflow-wrap: break-word;
}
.login_title {
  grid-area: login_title;
  text-align: center;
  font-weight: bold;
  background-color: #ceefff;
}
.login_email_prompt {
  grid-area: login_email_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.login_email_input {
  grid-area: login_email_input;
  text-align: left;
}
.login_password_prompt {
  grid-area: login_password_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.login_password_input {
  grid-area: login_password_input;
  text-align: left;
}
.login_button {
  grid-area: login_button;
  text-align: left;
  padding-left: 3px;
}
.loginbox {
  display: grid;
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid;
  margin: 0 auto;
  grid-template-rows: max-content max-content max-content max-content;
  grid-template-columns: 20ch 45ch;
  grid-template-areas:
    "login_title login_title"
    "login_email_prompt login_email_input"
    "login_password_prompt login_password_input"
    "login_button login_button";
  grid-row-gap: 20px;
  grid-column-gap: 5px;
}
.register_title {
  grid-area: register_title;
  text-align: center;
  font-weight: bold;
  background-color: #ceefff;
}
.register_email_prompt {
  grid-area: register_email_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.register_email_input {
  grid-area: register_email_input;
  text-align: left;
  max-width: 60ch;
}
.register_last_name_prompt {
  grid-area: register_last_name_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.register_last_name_input {
  grid-area: register_last_name_input;
  text-align: left;
  max-width: 60ch;
}
.register_first_name_prompt {
  grid-area: register_first_name_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.register_first_name_input {
  grid-area: register_first_name_input;
  text-align: left;
  max-width: 60ch;
}
.register_group_name_prompt {
  grid-area: register_group_name_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.register_group_name_input {
  grid-area: register_group_name_input;
  text-align: left;
  max-width: 60ch;
}
.register_button {
  grid-area: register_button;
  text-align: left;
  padding-left: 3px;
}
.registerbox {
  display: grid;
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid;
  margin: 0 auto;
  grid-template-rows: max-content max-content max-content max-content max-content max-content;
  grid-template-columns: 20ch 45ch;
  grid-template-areas:
    "register_title register_title"
    "register_email_prompt register_email_input"
    "register_last_name_prompt register_last_name_input"
    "register_first_name_prompt register_first_name_input"
    "register_group_name_prompt register_group_name_input"
    "register_button register_button";
  grid-row-gap: 20px;
  grid-column-gap: 5px;
}
.old_email_prompt {
  grid-area: old_email_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.old_email_input {
  grid-area: old_email_input;
  text-align: left;
  max-width: 60ch;
}
.new_email_prompt {
  grid-area: new_email_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.new_email_input {
  grid-area: new_email_input;
  text-align: left;
  max-width: 60ch;
}
.password_prompt {
  grid-area: password_prompt;
  text-align: left;
  width: auto;
  padding-left: 3px;
}
.password_input {
  grid-area: password_input;
  text-align: left;
  max-width: 60ch;
}
.change_email_button {
  grid-area: change_email_button;
  text-align: left;
  padding-left: 3px;
}
.change_email_box {
  display: grid;
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid;
  margin: 0 auto;
  grid-template-rows: max-content max-content max-content max-content;
  grid-template-columns: 20ch 45ch;
  grid-template-areas:
    "old_email_prompt old_email_input" "new_email_prompt new_email_input"
    "password_prompt password_input"
    "change_email_button change_email_button";
  grid-row-gap: 20px;
  grid-column-gap: 5px;
}
table {
  background-color: #cccccc;
  border: none;
}
table th {
  background-color: #ceefff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border: none;
}
table td {
  background-color: white;
  font-size: 1rem;
  padding: 0px 0px 2px 2px;
  border: none;
}
table.lefttbl td {
  vertical-align: top;
}
table.centeredtbl {
  margin: 0 auto;
}
table.centeredtbl th {
  vertical-align: top;
  padding: 0 10px;
}
table.centeredtbl td {
  vertical-align: top;
  padding: 0 10px;
}
/*https://www.w3schools.com/howto/howto_custom_select.asp*/
.custom_select {
  font-size: 1rem;
}
.text {
  font-size: 1.2rem;
}
.smallbutton {
  font-size: 1rem;
  margin-right: 2px;
}
.smallinp {
  font-size: 0.8rem;
}
textarea.smallinp {
  font-family: "MS Sans Serif", "Verdana", sans-serif;
  font-size: 1rem;
}
input.smallinp {
  font-size: 1rem;
}
.redsmallinp {
  font-size: 1rem;
  background-color: #ff9966;
}
textarea.redsmallinp {
  font-size: 1rem;
  background-color: #ff9966;
}
input.redsmallinp {
  font-size: 1rem;
  background-color: #ff9966;
}
.admin_message {
  border-style: solid;
  border-color: #cccccc;
  border-width: 1px;
  width: 100%;
  overflow-wrap: break-word;
  margin: 0 auto;
}
.toplinks {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.toplinks a {
  padding-left: 3rem;
  word-wrap: normal;
  display: inline-block;
}
.admin_top_left,
.admin_top_right {
  display: inline-block;
  margin: 0px;
  padding: 0 1rem;
  border: 1px solid #cccccc;
  vertical-align: top;
  max-width: 70%; /*Don't go above 70%. Does not work on low resolutions. If Admin menu text becomes too wide, adjust it. Very painful to fix this. If you allow very wide, then the form inside the div gets too wide and wraps inot next line.*/
}
.admin_top_right form {
  display: inline-block;
}