/* Defines FontAwesome fonts  */
@import "/fontawesome-v6/css/regular.css"; /* Font Awesome 6 Free */
@import "/fontawesome-v6/css/solid.css";   /* Font Awesome 6 Free Solid */

:root {
  --sitetop-color-background: #2A2A2A;
  --sitetop-color-h1:         #FFA500;
  --sitetop-color-h2:         #C0C0C0;
  --sitetop-color-border:     #E22D30;
  --siteback:                 #777;
  --navmenu-color-text:       #FFF;
  --navmenu-color-text-hover: #FFA500;

  --svg-invert:               0;
  --color-background:         #F9F9F9;
  --color-text:               #000;
  --color-text-alt:           #FFF;
  --color-text-link:          #00F;
  --color-border:             #777;
  --color-table-row-even:     #DDD;
  --color-table-row-odd:      #FFF;
  --color-input:              #FAFAFA;
  --color-input-readonly:     #EEE;
  --color-button:             linear-gradient(#EEE, #DDD);
  --color-button-disabled:    #DDD;
  --color-button-accept:      linear-gradient(#3C3, #3A3);
  --color-button-deny:        linear-gradient(#F00, #A00);
  --color-diff-text:          #D11;
  --color-diff-background:    #FEE;
}

html{
  background: var(--siteback);
  height: 100%;
}

body{
  background-color: var(--color-background);
  color: var(--color-text);
  max-width: 1024px;
  min-height: 100%;
  margin: auto;
  overflow-y: scroll;
  font-size: 14px;
  font-family: sans-serif;
}

/* Default pagecontent div size,
can be overriden on a per-page basis */
div.pagecontent {
  max-width: 768px;
  margin: auto;
  padding: 8px;
}

/***************
Text Styles
***************/

a, a:visited{
  color: var(--color-text-link);
}

a:focus{
  outline-style: dotted;
  outline-width: 1px;
}

header {
  font-weight: bold;
  text-align: center;
	margin: 16px 0 16px 0;
}

mono {
  font-family: monospace;
}

.center, center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/*********************
Text styles with icons
*********************/

.link-new-window::after {
  font-family: 'Font Awesome 6 Free';
  content: "\00a0\f2d2";
  display: inline-block;
}

.fa-checked::before {
  font-family: 'Font Awesome 6 Free Solid';
  content: "\f00c";
}

.fa-minus::before {
  font-family: 'Font Awesome 6 Free Solid';
  content: "\f068";
}

.fa-xmark::before {
  font-family: 'Font Awesome 6 Free Solid';
  content: "\f00d";
}

.fa-circle::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f111";
}

.fa-circle-solid::before {
  font-family: 'Font Awesome 6 Free Solid';
  content: "\f111";
}

.fa-circle-check::before {
  font-family: 'Font Awesome 6 Free Solid';
  content: "\f058";
}

.fa-circle-dot::before {
  font-family: 'Font Awesome 6 Free Solid';
  content: "\f192";
}

.fa-calendar::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f133";
}

.fa-clock::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f017";
}

/***************
Hints
***************/
hint::before {
  content: '?';
  display: inline-block;
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  vertical-align: super;
  width: 1.8ex;
  height: 1.8ex;
  font-size: 1.4ex;
  line-height: 1.8ex;
  border-radius: 1.2ex;
  padding: 1px;
  color: white;
  background: black;
  border: 1px solid black;
  text-decoration: none;
}

/***************
Info & Warning Banners
***************/

info {
  display: block;
  color: var(--color-text);
  text-align: left;
  border-radius: 4px;
  padding: 8px;
}

info::before{
  content:"i";
  display: inline-block;
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  width: 1.8ex;
  height: 1.8ex;
  font-size: 1.4ex;
  line-height: 1.8ex;
  border-radius: 1.2ex;
  padding: 1px;
  color: var(--color-background);
  background: var(--color-text);
  border: 1px solid black;
  text-decoration: none;
}

banner {
  display: block;
  color: white;
  text-align: left;
  text-shadow: 1px 1px #7b7a7a;
  border-radius: 4px;
  padding: 8px;
  background: #757575;
}

banner::before{
  content:"🛈 ";
}

banner.green{
  background: #008c09;
}

banner.green::before{
  content: "✅ ";
  text-shadow: #000 1px 1px;
}

banner.red{
  background: #8c0009;
}

banner.red::before{
  content:"❌ ";
  text-shadow: #000 1px 1px;
}

/***************
Navigation Menu
***************/

sitetop {
  background-color: var(--sitetop-color-background);
  margin: 0px;
  display: block;
  border-bottom: 5px solid var(--sitetop-color-border);
}

sitebranding {
  padding: 8px;
  display: inline-block;
}

sitetop a {
  text-decoration: none;
}

sitetop-h1, sitetop-h2 {
  font-style: italic;
  margin-left: 16px;
}

sitetop-h1 {
  color: var(--sitetop-color-h1);
  font-size: 20px;
}

sitetop-h2 {
  color: var(--sitetop-color-h2);
  font-size: 16px;
}

navmenu {
  display: inline-block;
  width: 100%;
}

/* Generic rules for navigation divs */
navmenu > div {
  margin: 10px 0 10px 24px;
  text-align: center;
  display: inline-block;
}

div.accordion > div {
  margin: 8px 0 8px 0;
  display: inline-block;
  width: 100%;
}

navmenu > div > a,
navmenu > div > a:visited,
div.accordion > div > a,
div.accordion > div > a:visited {
  color: var(--navmenu-color-text);
  text-decoration: none;
}

navmenu > div > a:hover,
navmenu > div > a:visited:hover,
div.accordion > div > a:hover,
div.accordion > div > a:visited:hover {
  color: var(--navmenu-color-text-hover);
}

navmenu > div > checkbox:hover,
navmenu > div > checkbox:checked {
  color: var(--navmenu-color-text-hover);
}

/* rules applying to accordion menus */
navmenu > div > .accordion {
  width: 196px;
  text-align: left;
  text-transform: uppercase;
}

/* rules applying to last navigation div (the user's menu) */
navmenu > div:last-of-type, #usermenu {
  width: 196px;
  text-transform: uppercase;
  margin-right: 24px;
  float: right;
  text-align: right;
}

/* Hide the contents of accordion menus by default */
div.navmenu > div {
  display: none;
}

/* And display them on click */
div.navmenu>input[type="checkbox"]:checked ~ div {
  display: block;
  position: absolute;
  background-color: var(--sitetop-color-background);
}

div.accordion {
  padding: 0;
  margin: 0;
  z-index: 9;
}

div.accordion > div > * {
  margin-left: 4px;
  margin-right: 4px;
}

.nav:after{
  content:"▾";
  font-family: monospace;
}

/* Navigaton Menu End */

fieldset{
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-border);
}

/***************
Keyvalue editor styles
***************/

.kv-editor-table, .kv-editor-subtable {
  width: 100%;
}

.kv-editor-table > tbody > tr > td:nth-of-type(3) {
  width: 4ch;
}

.kv-editor-table > tbody > tr > td:nth-of-type(4) {
  width: 4ch;
}

.kv-editor-table > tbody > tr > td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.kv-editor-table > tbody > tr > td, .kv-editor-subtable {
  vertical-align: top;
}

.kv-editor-table > tbody > tr > td > info {
  display: unset;
}

.kv-table-col-button {
  width: 2em;
}

.kv-editor-squarebutton {
  width: 2em;
  height: 2em;
  float: right;
}

.kv-editor-comments {
  margin-left: 4px;
  font-weight: bold;
}

.kv-editor-comments-none {
  margin-left: 4px;
  opacity: 0.75;
}

.kv-editor-comment-row:has(td>input:checked) {
  display: table-row !important;
}

.kv-editor-comment-row > td > input {
  margin-bottom: 0.5em;
}

/***************
Input styles
***************/

/* middle-align inputs and their labels,
preventing these elements from being unaligned */
label, input{
  vertical-align: middle;
}

/* style input boxes */

input[type="text"], input[type="number"], input[type="date"], input[type="time"] {
  color: var(--color-text);
  background: var(--color-input);
  height: 2em;
}

input, select{
  background: var(--color-input);
  color: var(--color-text);
  padding: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-border);
  border-radius: 4px;

  /* Keep html inputs from overflowing their parent elements */
  box-sizing: border-box;
}

input[readonly], select[readonly]{
  background: var(--color-input-readonly);
  color: var(--color-text);
  border-color: rgb(200,200,200);
}

select:hover, select:active {
  filter: brightness(0.90);
}

textarea {
  color: var(--color-text);
  background-color: var(--color-input);
  border: 1px solid var(--color-border);
}

textarea[readonly] {
  color: var(--color-text);
  background-color: var(--color-input-readonly);
}

/*Force text boxes to be 100% width of parent fieldset or table by default*/
fieldset > input[type=text], th > input[type=text], td > input[type=text] {
  width:100%;
}

/*
  style buttons,
  and style links with the "button" class to look like buttons
*/

button, input[type=submit], .button, a.button:visited {
  display: inline-block;
  font-family: sans-serif;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-button);
  padding: 3px 8px 2px 8px;
  cursor: default;
  border: none;
  border-top: 1px solid rgb(200,200,200);
  border-left: 1px solid rgb(200,200,200);
  border-right: 1px solid rgb(150,150,150);
  border-bottom: 1px solid rgb(125,125,125);
  border-radius: 4px;

/* Prevent user selection of button text */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
/*User select end */
}

button:enabled:hover, input[type=submit]:enabled:hover, .button:hover{
  filter: brightness(0.9);
}

button:enabled:active, input[type=submit]:enabled:active, .button:active{
  filter: brightness(0.75);
}

a.disabled, button:disabled, input[type=submit]:disabled, .button:disabled, .accept:disabled, .deny:disabled {
  background: var(--color-button-disabled) !important;
}

/* color classes intended to be used with buttons */

.accept, .deny {
  text-shadow: 1px 1px #7b7a7a;
}

.accept {
  color: var(--color-text-alt) !important;
  background: var(--color-button-accept) !important;
}

.deny {
  color: var(--color-text-alt) !important;
  background: var(--color-button-deny) !important;
}

.accept:hover, .deny:hover {
  filter: brightness(1.10) !important;
}

.accept:active, .deny:active {
  filter: brightness(0.9) !important;
}

/* Enlarge controls for mobile devices  */
@media (max-width:480px) {

  .pagecontent {
    zoom:1.15;
  }

}

/***************
Animation for <ephemerial>
Text that disappears 5s after page load
***************/

ephemerial, .ephemerial {
  animation: ephemerial 5s;
  opacity: 0;
  pointer-events: none;
  visiblity: hidden;
}

@keyframes ephemerial {
  0%  {opacity: 1; visibility: visible;}
  80% {opacity: 1;}
  100%{opacity: 0;}
}