/*
@font-face {
    font-family: 'Titillium Web';
    src: url('pub/3rd/TitilliumWeb/TitilliumWeb-Regular.ttf');
}
*/

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

:root {
  --c00: #000;
  --c01: #111;
  --c02: #333;
  --c03: #555;
  --c04: #777;
  --c05: #999;
  --c06: #AAA;
  --c07: #BBB;
  --c08: #CCC;
  --c09: #DDD;
  --c10: #EEE;
  --c11: #E8E8E8;
  --c12: #F1F1F1;
  --c13: #FFF;

  --blue: #00F;
  --white: #FFF;
  --orange: #FA0;
  --pitm: #900;
  --red: #F00;
  --black: #000;

  --lite-gray: #EEE;
  --just-gray: #CCC;
  --deep-gray: #AAA;
  --dark-gray: #555;

  --gradient1: #AAAAAA, #555555;
  --gradient1h: #2E7CFF, #0045B8;
  --gradient1a: #2ECDFF, #0081B8;
  --gradient2: #0099FF, #090979;
  --gradient2h: #090979, #0099FF;
  --gradient3: 180deg,rgba(255, 215, 98, 0.25) 0%, rgba(255, 100, 0, 0.50) 100%;
  --gradient3h: 180deg,rgba(255, 215, 98, 0.55) 0%, rgba(255, 100, 0, 0.80) 100%;
  --gradient3a: 180deg,rgba(255, 215, 98, 0.80) 0%, rgba(255, 100, 0, 0.95) 100%;
  --gradient4: #FF0, #CC0;
  --gradient4h: #CC0, #FF0;
  --gradient5: #DD7EFC, #7C009E;
  --gradient5h: #7C009E, #DD7EFC;
  --gradient6: #FF0, #F00;
  --gradient6h: #F00, #FF0;
  --gradient7: #1F0, #3A0;
  --gradient7h: #3A0, #1F0;
  --gradient7a: #00B20A, #008106;
  --gradient8: #F00, #900;
  --gradient8h: #900, #F00;
  --gradient9: #F09, #A05;
  --gradient9h: #A05, #F09;

  --glass: #000, #888;
  --glass2: rgba(255,255,255,0.8), rgba(255,255,255,0.2);

  --vision: 0.8;

  --a-link: #00A10A;
  --a-visit: #00BB0B;
  --a-hover: #71FF78;
}

html, body {
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: Impact, Charcoal, sans-serif;
  font-weight: normal;
}

html {
  background: url('/pub/background.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

a { color: var(--a-link); text-decoration: none; }
a:visited { color: var(--a-visit); }
a:hover { color: var(--a-hover); }

input,
textarea,
select{
  font-size: 1rem;
  font-weight: bold;
  line-height: 2rem;
  padding: 0 1rem;
  border-radius: 1rem;
  color: var(--c13);
  border: 1px solid var(--c06);
  background-color: var(--c02);
}

input,
select {
  height: 2.2rem;
}

option {
  font-size: 1rem;
  line-height: 2rem;
  color: #000000;
  background-color: var(--c01);
}

/* */
/*

#master-control-program {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.grid-container {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  height: 100vh;
}

.grid-header {
  display: grid;
  gap: 0.50rem;
  grid-template-columns: 1fr repeat(3, auto);

  padding: 0.25rem;
  background-color: var(--c01);
  color: var(--c10);
}



.grid-content {
  overflow: auto;
  padding: 0.25rem;
  color: var(--c10);
}

.grid-footer-menu {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  border-bottom: 1px solid var(--c02);
  padding: 0.25rem;
}

.grid-footer {
  display: grid;
  gap: 1.50rem;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;

  padding: 0.50rem;
  background-color: var(--c01);
  color: var(--c10);
}
*/

.grid-header-menu {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  border-top: 1px solid var(--c02);
  border-bottom: 1px solid var(--c02);
  padding: 0.25rem;
}

/* */

#page {
  position: relative;
  padding: 1rem;
  border-radius: 0.50rem;
}

#page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--c01);
  opacity: var(--vision);
  border-radius: 0.50rem;
  z-index: -1; /* To place it behind the child */
}

/* */

.glass-bg {
  position: relative;
  background-color: var(--c00);
  background: linear-gradient(var(--glass));
  z-index: 0;
}

.glass-bg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(var(--glass2));
  z-index: 1;
}

.zen-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.medallion {
  padding: 0.50rem;
/*
  background: rgb(195,195,195);
*/
  background: linear-gradient(0deg, rgba(195,195,195,1) 0%, rgba(215,215,215,1) 50%, rgba(242,242,242,1) 100%);
  margin-bottom: 0.25rem;
  border-radius: 0.50rem;
  color: var(--c02);
  width: 720px;
}

.zen-header {

}

#title {
  text-align: left;
  font-size: 2.60rem;
  color: var(--a-link);
}

#logo {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  float: left;
  height: 50px;
  border-radius: 7px;
  border: 1px solid transparent;
}

.zen-footer {
  text-align: center;
}


@media only screen and (max-width: 760px) {

  #title {
    font-size: 1.60rem;
  }

  .medallion {
    width: 100%;
    min-width: 240px;
    margin: auto 1rem;
  }
}

/* */

.page-homr {

}

.page-about {

}

.page-e404 {
  text-align: center;
}

.page-lander {
  text-align: center;
}

.page-lander img {
  border-radius: 1rem;
}

/* */
.zbtn, button.xbtn {
  font-size: 1rem;
  line-height: 2;
  font-weight: bold;
  text-align: center;
  padding: 0 0.60rem 0.10rem 0.60rem;
  border: 0;
  text-decoration: none;
  border-radius: 1rem;
  color: var(--c10);
  cursor: pointer;
  opacity: 1;
  z-index: 2;
}

.zbtn {
  background: linear-gradient(var(--gradient1));
  color: var(--white);
}
/*
.zbtn:hover:not(.active) {
  background: linear-gradient(var(--gradient1h));
}
*/
.zbtn:hover {
  background: linear-gradient(var(--gradient1h));
}

.zbtn.zleft {
  margin-left: auto;
}

.zbtn.zlink {
  background: linear-gradient(var(--gradient5));
  color: var(--white);
}
.zbtn.zlink:hover {
  background: linear-gradient(var(--gradient5h));
}
.zbtn.zpops {
  background: linear-gradient(var(--gradient6));
  color: var(--pitm);
}
.zbtn.zpops:hover {
  background: linear-gradient(var(--gradient6h));
}
.zbtn.zbops {
  background: linear-gradient(var(--gradient7));
  color: var(--c00);
}
.zbtn.zbops:hover {
  background: linear-gradient(var(--gradient7h));
}
.zbtn.zpitm {
  background: linear-gradient(var(--gradient8));
  color: var(--c13);
}
.zbtn.zpitm:hover {
  background: linear-gradient(var(--gradient8h));
}
.zbtn.zpink {
  background: linear-gradient(var(--gradient9));
  color: var(--c13);
}
.zbtn.zpink:hover {
  background: linear-gradient(var(--gradient9h));
}
.zbtn.zjunk {
  background: linear-gradient(var(--gradient2));
  color: var(--c13);
}
.zbtn.zjunk:hover {
  background: linear-gradient(var(--gradient2h));
}
.zbtn.zblip {
  background: linear-gradient(var(--gradient4));
  color: var(--black);
}
.zbtn.zblip:hover {
  background: linear-gradient(var(--gradient4h));
}

.zbtn.active {
  background: linear-gradient(var(--gradient7a));
  color: var(--c13);
}
.zbtn.inactive {
  color: var(--white);
}
.zbtn:active {
  background: linear-gradient(var(--gradient7a));
  color: var(--c13);
}

button.zbtn, button.xbtn {
  border: 0;
}
button.xbtn {
  background: linear-gradient(var(--gradient3));
}
button.xbtn:hover {
  background: linear-gradient(var(--gradient3h));
}
button.xbtn:active {
  background: linear-gradient(var(--gradient3a));
  color: var(--c01);
}

/* */

.z-table {
  display: grid;
  gap: 0;
/* style="grid-template-columns: 1fr auto;" */
  border: 1px solid var(--c00);
}

.z-table div.z-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.z-table a.z-link {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;

  cursor: pointer;
  background-color: var(--c13);
  color: var(--blue);
}
.z-table a.z-link:hover {
  background-color: var(--c10);
  color: var(--red);
}

.z-table div.z-head {
  font-weight: bold;
  border: 1px solid #000;
  padding: 0.50rem;
  background-color: var(--deep-gray);
}

.z-table div.z-item {
  border: 1px solid #000;
  padding: 0.50rem;
  background-color: var(--white);
}

/* */

#the-dialog {
  border: 1px solid var(--c01);
  border-radius: 1rem;
  max-width: 48rem;
  background-color: var(--c00);
  color: var(--c12);
  padding: 0;
}
#the-dialog h2 {
  font-size: 1.60rem;
  border-bottom: 1px solid var(--c12);
  margin-bottom: 0.50rem;
  background-color: var(--333);
  padding: 0.35rem 0.65rem;
}
#the-dialog .diag-content {
  padding: 0.35rem 0.65rem;
}
#the-dialog .diag-content div.diag-text {
  font-size: 1.10rem;
  text-align: justify;
}
#the-dialog .diag-content div.diag-bttn {
  text-align: right;
}

#the-dialog button.xbtn:active, #the-dialog button.xbtn:focus {
  outline: none;
}

#the-dialog::backdrop {
  background: linear-gradient(in hsl longer hue 45deg, red 0 100%);
  opacity: 0.75;
}

/* */