@import url("define.css");

html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
  font-family: "Merriweather Sans", sans-serif;
  background-color: var(--mbg);
  color: var(--mco2);
}

body *::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
  height: 5px;
  cursor: pointer;
}

body *::-webkit-scrollbar-track {
  background: var(--blur);        /* color of the tracking area */
  cursor: pointer;
}

body *::-webkit-scrollbar-thumb {
  background-color: grey;    /* color of the scroll thumb */
  border-radius: 10px;       /* roundness of the scroll thumb */
  border: 1px solid var(--mbg2);  /* creates padding around scroll thumb */
  cursor: pointer;
}

body * {
  scrollbar-width: thin;  /* Works on Firefox */
  scrollbar-color: grey var(--mbg2);
  cursor: pointer;
}

a {
  color: var(--mbg2);
}

a:hover {
  color: var(--mbg2);
  text-decoration: underline;
}

button, a[b] {
  display: inline-block;
  min-width: 200px;
  background-image: linear-gradient(var(--mbg2), var(--mbg3));
  padding: 15px;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mco);
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bolder;
  cursor: pointer;
  text-shadow: 0 0 3px var(--black);
}

button[disabled], a[disabled] {
  background-image: var(--mbg3);
  cursor: wait;
}

input, input[type="date"], select, textarea {
  display: block;
  margin: auto;
  margin-bottom: 5px;
  width: 98%;
  background: var(--grey);
  color: var(--mco);
  font-size: 20px;
  padding: 15px;
  border: none;
  border-radius: 5px;
}

input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
  display: inline;
  width: unset;
  min-width: unset;
  padding: unset;
  margin: unset;
  margin-right: 5px;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--mbg);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: inline-grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--red);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
  color: var(--red);
  cursor: not-allowed;
}

input:focus, textarea:focus, select:focus {
  border: none;
  border-bottom: 2px solid var(--mbg2);
}

input[ierr], textarea[ierr], select[ierr] {
  border: 3px solid red;
}

input[type="file"] {
  display: none;
}

input[disabled], input[readonly], select[disabled], textarea[disabled] {
  cursor: not-allowed;
  background: var(--mbg4);
}

input[disabled] {
  color: var(--red);
}

nav {
  position: fixed;
  width: 99%;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 10px;
  background-color: var(--mbg);
  /*background-color: red;*/
}

nav img {
  width: 20px;
  height: 20px;
  margin-bottom: -3px;
}

nav a {
  display: inline-block;
  max-width: 150px;
  padding: 10px;
  color: var(--black);
  text-decoration: none;
  text-align: center;
  font-weight: bolder;
}

nav label {
  display: none;
}

nav span {
  float: right;
}

nav a.n1 {
  float: left;
}

nav a.bal {
  color: var(--mbg3);
  font-weight: bolder;
}

nav a.bal b {
  color: var(--green);
}

nav a.bal:hover {
  text-decoration: none;
}

nav a.bal sup:hover {
  padding: 3px;
  border-radius: 5px;
  background: var(--mbg2);
}

nav span a:last-of-type {
  background-image: linear-gradient(var(--mbg2), var(--mbg3));
  color: var(--mbg);
  border-radius: 5px;
  margin-right: 10px;
}

nav span a:hover {
  text-decoration: underline;
}

nav span a:not(a:last-of-type):active {
  color: var(--mbg2);
}

footer {
  /*width: 100%;*/
  text-align: justify;
  padding: 10px;
  background-color: #faddad;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

div.pgloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background: var(--mbg);
}

div.pgloader>div {
  margin-top: 40vh;
  text-align: center;
  position: relative;
}

div.pgloader>div img {
  width: 150px;
  height: 150px;
  object-fit: fill;
  margin: auto;
  border-radius: 100%;
  z-index: -1;
}

div.pgloader>div div {
  position: absolute;
  background: transparent;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

div.history p {
  color: var(--red);
}

div.history div {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  display: none;
}

div.history div table {
  width: 100%;
  /*border-collapse: collapse;*/
    margin: auto;
    border-top: 1px solid var(--mbg2);
    border-bottom: 1px solid var(--mbg2);
}

div.history div table tr {
    width: 100%;
    background: var(--mbg3);
    color: var(--mco);
}

div.history div table tr:nth-child(odd) {
    background: var(--mbg4);
    color: var(--mco);
}

div.history div table tr:first-child {
    color: var(--mbg2);
    text-transform: uppercase;
}

div.history div table tr.nHis {
    background: var(--white);
    color: var(--black);
}

div.history div table tr th,  div.history div table tr td {
  white-space: nowrap;
  text-align: left;
  padding: 8px;
  min-width: 100px;
}

div.history div table tr th.act {
  text-align: center;
}

div.history div table tr td.act {
  text-align: center;
  min-width: 50px;
  cursor: pointer;
  color: var(--red);
}

div.history div table tr td[red] {
  color: var(--red);
}

div.history div table tr td[green] {
  color: var(--green);
}

div.history div table tr[s=""] td.act, div.history div table tr[s="null"] td.act {
  color: var(--red);
  cursor: pointer;
}

div.history button {
  margin-top: 10px;
}

div.tvwidget {
  position: relative;
  border: none;
}

div.tvwidget img {
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 25px;
  background: white;
  /*border: 1px solid black;*/
  border-radius: 10px;
}

section.ustats {
  text-align: center;
  white-space: nowrap;
  overflow: auto;
  margin: auto;
  width: 95%;
}

section.ustats h1 {
  display: inline-block;
  width: 18vw;
  min-width: 200px;
  background-image: linear-gradient(to top, var(--grey), var(--mbg3), var(--mbg4));
  color: var(--mco);
  border-radius: 5px;
  padding: 0;
  box-shadow: 5px 5px 5px 7px var(--blur);
  margin-bottom: 5px;
}


section.ustats h1 b {
  font-size: 10px;
  color: var(--mbg2);
}

b.sidebtn {
  position: fixed;
  right: 1%;
  bottom: 1%;
  padding: 10px;
  border-radius: 10px;
  font-size: 25px;
  font-weight: bolder;
  background: var(--mbg3);
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
  box-shadow: 0px 0px 20px var(--black);
}

b.sidebtn:hover {
  text-decoration: none;
  font-weight: normal;
  box-shadow: 0px 0px 20px var(--blur);
}

b.sidebtn span {
  display: none;
}

b.sidebtn span b:first-of-type {
  color: var(--green);
}

b.sidebtn span b:last-of-type {
  color: var(--red);
}

b.sidebtn>b {
  color: var(--red);
}

b.sidebtn>label {
  position: absolute;
  width: 210px;
  max-width: 80vw;
  background-color: var(--blur);
  text-align: justify;
  border-radius: 6px;
  border-bottom-right-radius: 0;
  padding: 10px;
  z-index: 2005;
  bottom: 140%;
  right: 15%;
  box-shadow: 0px 0px 20px var(--grey);
}

b.sidebtn>label::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 1%;
    margin-left: -5px;
    border-width: 10px;
    border-style: solid;
    /*border-color: var(--blur) transparent transparent transparent;*/
    border-color: var(--grey) transparent transparent transparent;

}

b.sidebtn>label>a {
  color: var(--mbg4);
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0.5);
  padding: 3px 10px;
  border-radius: 5px;
  margin: 3px;
  font-size: 22px;
}

b.sidebtn>label>a:hover {
  font-weight: bolder;
  box-shadow: 0px 0px 20px var(--mbg2);
}

@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

section.mstats {
  margin-top: 10px;
  height: calc(100vw/2.7);
  text-align: center;
}

section.mstats div[role="progressbar"] {
  --size: 100%;
  --fg: var(--mbg2);
  --bg: var(--blur);
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  /*font-size: calc(var(--size) / 5);*/
  font-size: calc(100vw/14);
  color: var(--fg);
  box-shadow: 10px 10px 20px var(--mbg4);
  margin: 10px auto;
}

section.mstats div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  /*content: counter(percentage);*/
}

section.mstats>div {
 display: inline-block;
 margin: auto 3% auto auto;
 width: 25vw;
 height: calc(100vw/4);
 max-width: 90%;
}

section.mstats>div:last-of-type {
  margin-right: auto;
}

section.mstats>div>h3 {
  position: relative;
  width: 100%;
  max-width: 90%;
  background-color: var(--mbg3);
  color: var(--mbg2);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  margin: auto auto 15px;
  box-shadow: 0 0 10px var(--mbg2);
  text-transform: uppercase;
  font-size: calc(100vw/48);
}

section.mstats>div>h3::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

section.mstats>div>h3 b {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--mco);
  font-size: calc(100vw/50);
}

section.mstats>div.orangestats>h3 {
  box-shadow: 0 0 10px orange;
  color: orange;
}

section.mstats>div.orangestats div[role="progressbar"] {
  color: orange;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(orange calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
}

section.mstats>div.redstats>h3 {
  box-shadow: 0 0 10px var(--red);
  color: var(--red);
}

section.mstats>div.redstats div[role="progressbar"] {
  color: var(--red);
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--red) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
}

@media only screen and (max-device-width: 1090px), only screen and (max-width: 1090px) {
  nav label {
    display: unset;
    font-weight: bolder;
    font-size: 25px;
    cursor: pointer;
    float: right;
    margin-right: 20px;
  }

  nav span {
    display: none;
    width: 100%;
    text-align: justify;
  }

  nav span.show {
    display: block;
  }

  nav span a {
    text-align: justify;
    display: block;
    width: 100%;
    min-width: unset;
    max-width: unset;
    margin: auto;
  }

  nav span a:last-of-type {
    background: unset;
    color: var(--mbg2);
    margin: auto;
    text-align: justify;
    width: 100%;
  }

  nav span a:last-of-type::after {
    content: ' ⇒';
  }
}

@media only screen and (max-device-width: 890px), only screen and (max-width: 890px) {
  b.sidebtn {
    right: 1.5%;
    bottom: 1%;
    padding: 7px;
    border-radius: 10px;
    font-size: 25px;
  }
}