@import url('view.css');

:root {
  --yes-color: hsl(0, 0%, 20%);
  --yes-bgcolor: lightgreen;
  --no-color: hsl(0, 0%, 90%);
  --no-bgcolor: hsl(1, 80%, 50%);
  --border-color: hsl(0, 0%, 5%);

  --color-upiid: fuchsia;
  --color-view-table-score-border: hsl(200, 50%, 50%);
  --color-view-table-score-bg: hsl(200, 80%, 97%);
  --color-winner-bg: lightgreen;
  --color-winner: black;
  --action-needed-bg: hsl(167, 40%, 70%);
  --action-needed-border: hsl(0, 0%, 50%);
  --action-needed-color: hsl(0, 0%, 80%);
  /* button colors in light-theme */
  --btn-color-bg: hsl(200.67,58.05%, 80%);
  --btn-color: hsl(1, 0%, 20%);
  --btn-color-disabled: hsl(0, 0%, 90%);
  --table-background-color: hsl(0, 0%, 95%);
  --color-select-bg: white;
  --color-select: black;
  --theme-hover-color: hsl(240, 50%, 50%);
  /* light-theme */
  --input-color-bg: hsl(29.23,66.1%,88.43%);
  --input-color: hsl(0, 0%, 30%);
  --theme-choose-border-color: hsl(1, 0%, 30%);
  --theme-choose-background-color: hsl(335.02,100%,40.98%);
  --theme-choose-color: hsl(0,100%,10.98%);
  --status-color: black;
  --status-border-color; black;
  --powered-by-color: hsl(90, 80%, 12%);
  --powered-by-background-color: hsl(0, 0%, 60%);
  --popup-background-color: hsl(0, 0%, 80%);
  --popup-color: hsl(0, 0%, 20%);
  --popup-border-color: hsl(324, 100%, 50%);
  --game-done-bg: coral;

  /* light-theme */
  --div-help-bgcolor: hsl(333,0%, 90%);
  --div-help-color: hsl(333, 20%, 50%);
  --div-help-border-color: hsl(333, 30%, 70%);
  --view-border-color-1: hsl(1, 30%, 80%);
  --serve-position-bgcolor: hsl(220, 100%, 85%);
  --serve-position: black;
  --receive-position-bgcolor: hsl(66, 59%, 56%);
  --receive-position: black;

  /* We are in light theme, but dark theme's bgcolor is the same. */
  --dark-theme-bgcolor: hsl(0, 0%, 25%);
} /* .light-theme */

@media (min-width: 300px) {
  :root {
    --slide-text-size: 1.2em;
  }
}

@media (min-width: 1000px) {
  :root {
    --slide-text-size: 1.2em;
  }

  #good-h1-title {
    font-size: 3em;
  }
}

html {
  width: 100vw;
  background-color: hsl(0, 0%, 85%);
}

body {
 margin: 0px;
 font-family: monospace;
 width: 100vw;
 color: black;
}

h1 {
  font-family: monospace;
  font-size: 1.5em;
  padding: 7px 5px;
  color: black;
}

h2 {
  font-family: monospace;
  font-size: 1.3em;
  padding: 4px 4px;
}

label {
  padding: 5px;
  font-weight: bold;
  color: black;
  font-size: 1.1em;
}

input {
  padding: 5px;
  background-color: hsl(120, 30%, 80%);
  color: black;
  border: 1px solid hsl(90, 50% 70%);
  width: 40ch;
  max-width: 90%;
}

input:focus {
  border: 1px solid blue;
  background-color: gold;
}

input[readonly] {
  padding: 5px;
  background-color: silver;
  color: black;
}

blockquote {
  font-style: italic;
  padding: 5px;
  margin; 5px;
  font-size: 0.85em;
  text-align: center;
}

button {
  padding: 5px;
  background-color: hsl(0, 0%, 75%);
  color: var(--btn-color);
  border-color: hsl(0, 0%, 50%);
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  font-style: normal;
  font-family: monospace;
}

button:disabled {
  background-color: slategrey;
  color: white;
}

select {
  background-color: var(--color-select-bg);
  color: var(--color-select);
}

table {
  border-radius: 4px;
  border: 0px solid blue;
  border-spacing: 0;
  border-collapse: collapse;
}

table tr:hover {
  background-color: greenyellow;
}

tr {
  background-color: var(--table-background-color);
}

th {
  background-color: palegreen;
  border: 1px solid seagreen;
  padding: 3px;
  font-weight: bold;
}

td {
  border: 1px solid seagreen;
  padding: 5px;
}

button.ViewCreateMarathon {
  margin-top: 10px;
}

div {
  margin: 0;
  border: none;
}

/* div BEGIN div */
div.upload {
  margin: 7px;
  padding: 4px;
  width: 90%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
}

div.help {
  border-width: 1px;
  border-style: solid;
  border-color: var(--div-help-border-color);
  margin: 5px;
  padding: 5px;
  background-color: var(--div-help-bgcolor);
  color: var(--div-help-color);
  display: flex;
}

div.poolteam {
  margin: 10px;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  float: left;
}

div#topnav {
  display: flex;
  margin-top: 0;
  margin-left: 0;
  padding: 10px 10px;
  align: center;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* div END div */

#div-title {
  display: flex;
  justify-content: center;
  align-items:center;
}

#div-user-game-counter {
  width: 8ch;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  padding: 3px;
}

p#user-game-counter {
  font-family: monospace;
  font-weight: normal;
  font-size: 1.1em;
}

.score {
  font-family: monospace;
}

#div-top-right-corner {
  display: none;
  justify-content: center;
  align-items:center;
  vertical-align: middle;
  /* margin-left: auto; */
  gap: 5px;
}

.icon {
  display: flex;
  justify-content: center;
  align-items:center;
  vertical-align: middle;
  height: 30px;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: hsl(0, 0%, 40%);
  background-color: hsl(120, 15%, 60%);
  color: hsl(120, 10%, 20%);
  padding: 4px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

#div-user-icon {
  display: none;
  justify-content: center;
  align-items:center;
  vertical-align: middle;
  width: 9ch;
  height: 30px;
  border-style: solid;
}

#user-icon-content {
  vertical-align: middle;
}

header {
  top: 0px;
  left: 0px;
  margin: 0px;
  margin-bottom: 0;
  padding: 10px 10px;
  color: var(--header-color);
  font-size: 11pt;
  display: flex;
  border-bottom: 2px solid hsl(120, 22%, 50%);
  background-color: hsl(120, 12%, 60%);
  /* box-shadow: offset-x offset-y blur-radius color; */
}

footer {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  border: none;
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
}

main {
  margin-left: 0px;
  margin-top: 0px;
  padding: 0px;
}

div#page-container {
  width: 100vw;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}


#good-h1-title {
  font-weight: bold;
  font-family: monospace;
  font-size: 15pt;
}

/* The side navigation menu */
#side-menu {
  visibility: hidden;
  height: 100%; /* 100% Full-height */
  width: auto; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: grey;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  padding: 5px;
  margin: 0px;
}

.ul-menu {
 list-style-type: none;
 margin: 2px;
 padding: 2px;
}

ul.li.li-menu {
 margin: 2px;
 padding: 2px;
}

.btn-menu {
 width: 100%;
 padding: 10px;
 margin: 3px;
 font-size: 16px;
}

.btn-menu:hover {
  background-color: yellow;
}

div.view {
  display: flex;
  flex-direction: column;
}

div.casualevent {
  margin: 5px;
  padding: 5px;
}

div.view-assign-referee {
}

div.assign-referee-game {
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  /* border-style: groove; */
  border-color: hsl(184, 51%, 57%);
  border-radius: 5px;
  background-color: hsl(71, 60%, 94%);
}

tr.assign-referee-game {
  margin: 5px;
  padding: 5px;
}

.pooltitle {
  text-align: center;
  font-size: 12pt;
  margin: 10px;
}

.flexrow {
  display: flex;
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.inline-block {
  display: inline-block;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

#div-latest-update {
  margin: 7px;
  padding: 7px;
  background-color: hsl(170, 100%, 80%);
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: hsl(170, 70%, 50%);
}

#div-action-needed {
  margin: 7px;
  padding: 7px;
  background-color: var(--action-needed-bg);
  border-color: var(--action-needed-border);
  color: var(--color-action-needed);
  text-align: center;
  border-width: 1px;
  border-style: solid;
  display: none;
}

ul.update-dob {
  padding: 10px;
  list-style-type: none;
}

li.update-dob {
  padding: 10px;
}

div.warning {
  margin: 10px;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  background-color: hsl(0, 100%, 100%);
  border-color: hsl(300, 40%, 50%);
  color: hsl(0, 100%, 50%);
  text-align: center;
  font-size: 0.7em;
  font-style: italic;
}

.pass {
  background-color: green;
  color: white;
}

.fail {
  color: hsl(1, 100%, 30%);
  background-color: red;
  color: white;
}

/* ------------------------------------------------------------------------- */
/* BUSY */

/* The Modal (background) */
#modal {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: hsl(0, 0%, 30%, 0.8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Modal Content/Box */
#div-busy {
  background-color: hsl(0, 0%, 10%, 0.6);
  width: 200px;
  height: 200px;
  padding: 20px;
  border-width: 0px;
  border-radius: 50%;
  border-style: solid;
  z-index: 10;
  position: absolute;
}
/* ------------------------------------------------------------------------- */

#div-pop {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: hsl(0, 0%, 30%, 0.8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#last-status {
  background-color: hsl(0, 0%, 80%);
  color: hsl(0, 0%, 30%);
  border: 0px solid green;
  display: none;
}

#div-status {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin-top: auto;
  margin: 0px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--status-border-color);
}

div.container-for-menuitems {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  justify-content: center;
  align-items:center;
}

div.pop-content {
 display: none;
 padding: 7px;
 margin: 7px;
 flex-direction: column;
 justify-content: center;
 align-items:center;
 background-color: var(--popup-background-color);
 color: var(--popup-color);
 border: 1px solid var(--popup-border-color);
}

.flex-column-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flex-container {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* The type1 flex container */
.flex-container-type1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
}

.more-space-above {
  margin-top: 10px;
}

/* For top level view of a page, we give this margin */
.page-margin {
  margin: 5px 10px;
  max-width: 100%;
}

.part-of-list {
  border-width: 1px;
  border-style: solid;
  border-color: var(--good-color-div-border);
  padding: 20px 20px;
  border-radius: 4px;
}

.small-margin {
  margin: 5px 5px;
}

.small-padding {
  padding: 5px 5px;
}

.medium-padding {
  padding: 10px 10px;
}

.medium-margin {
  margin: 10px 10px;
}

.medium-margin-top {
  margin-top: 10px;
}

.small-gap {
 gap: 5px;
}

.medium-gap {
 gap: 10px;
}

.more-gap {
  gap: 20px;
}

.winner {
  background-color: var(--color-winner-bg);
  color: var(--color-winner);
}

.slide-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-color: hsl(2, 0%, 2%); */
  border-color: lime;
  border-color: hsla(120, 100%, 50%, 0.5);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 98%;
  aspect-ratio: 16/9;
  background-color: hsl(1, 0%, 15%);
  margin-top: 10px;
  margin-bottom: 10px;
/*
  box-shadow: 0px 0px 4px black;
  background-image: url('images/tmp.png');
  background-size: cover;
  background-position: center;
*/
}

.show-slide {
  display: block;
}

.hide-slide {
  display: none;
}

.hide {
  display: none;
}

@keyframes fadeInOut {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

.slide {
  display: none;
  animation-name: fadeInOut;
  animation-duration: 5s;
}

.slide-content {
  color: lime;
  font-weight: 400;
  font-size: var(--slide-text-size);
  text-align: center;
  font-family: "Knewave", serif;
  font-style: normal;
}

.slide.active {
  display: block;
}

.loading {
  display: flex;
}

.align-center {
  justify-content: center;
  align-items: center;
}

.align-right {
  align-items: right;
}

.flex-end {
  justify-content: flex-end;
}

.loading-container {
  position: relative;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  justify-content: center;
  align-items: center;
}

.yes {
  background-color: var(--yes-bgcolor);
  color: var(--yes-color);
}

.no {
  background-color: var(--no-bgcolor);
  color: var(--no-color);
}

.readable-line {
  max-width: 80ch;
}

.width-80-column-limit {
  width: 80ch;
}

.upiid {
  color: var(--color-upiid);
}

.goodminton-id {
  color: var(--color-goodminton-id);
}

.neon-pink {
  color: var(--color-neon-pink);
}

.neon-blue {
  color: var(--color-neon-blue);
}

.neon-green {
  color: var(--color-neon-green);
}

.neon-orange {
  color: var(--color-neon-orange);
}

.neon-yellow {
  color: var(--color-neon-yellow);
}

.white {
  color: white;
}

.terms-ofuse:hover {
  color: hsl(333, 100%, 50%);
}

div.hello {
  width: 20ch;
  height: auto;
  padding: 5px;
  margin: 5px;
  border-width: 2px;
  border-style: double;
  border-color: var(--hello-border-color);
  background-color: var(--hello-background);
  text-align: center;
}

#div-theme-selector {
  display: flex;
  padding: 3px 3px;
  margin-top: auto;
  margin: 4px 4px;
  justify-content: right;
  align-items: right;
}

.powered-by {
  color: var(--powered-by-color);
  background-color: var(--powered-by-background-color);
  text-align: center;
  font-family: monospace;
  font-size: 1em;
}

.done {
  background-color: var(--game-done-bg);
}

.advice {
  font-style: italic;
}

.italic {
  font-style: italic;
}

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

#goodleave-version {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 10px 10px;
}

.position-serve {
  background-color: var(--serve-position-bgcolor);
  color: var(--serve-position);
}

.position-receive {
  background-color: var(--receive-position-bgcolor);
  color: var(--receive-position);
}

hr {
  margin: 20px auto;
  border: none;
  height: 1px;
  margin-top: 5px;
  margin-bottom: 5px;
}

div#good-name-border {
 display: inline-block;
 border: 1px solid black;
 border-radius: 10px;
}

span#good-name {
 display: inline-block;
  font-size: 20pt;
  color: hsl(120, 50%, 50%);
  background-color: hsl(120, 10%, 16%);
  border: 2px solid hsl(120, 50%, 50%);
  margin: 0;
  padding: 7px 7px;
  border-radius: 10px;
  letter-spacing: 3px;
}

#whoami {
  color: hsl(120, 20%, 10%);
  text-align: center;
}

.even-pool {
  background-color: hsl(45, 50%, 90%);
}

.odd-pool {
  background-color: hsl(145, 50%, 90%);
}

tr.shuttle-account-owner {
  background-color: Turquoise;
}

div#ViewInvite {
  border-width: 1px;
  border-style: solid;
  border-color: hsl(170, 20%, 70%);
  background-color: hsl(170, 20%, 90%);
  padding: 10px;
  width: 90%;
  margin: 5px 5px;
  border-radius: 7px;
}

div#shuttle-account-view-charge {
  border-width: 1px;
  border-style: solid;
  border-color: hsl(5, 20%, 70%);
  background-color: hsl(5, 20%, 90%);
  padding: 10px;
  width: 90%;
  margin: 5px 5px;
  border-radius: 7px;
}

div#view-0 {
  border-width: 1px;
  border-style: solid;
  border-color: hsl(46, 20%, 70%);
  background-color: hsl(46, 20%, 85%);
  padding: 10px;
  width: 90%;
  margin: 5px 5px;
  border-radius: 7px;
}

div.View {
  border-width: 1px;
  border-style: solid;
  padding: 10px;
  width: 90%;
  margin: 5px 5px;
  border-radius: 7px;
}

div.ViewIncreaseBuyingPrice {
  border-color: hsl(100, 10%, 80%);
  background-color: hsl(100, 10%, 90%);
}

div.ViewDecreaseBuyingPrice {
  border-color: hsl(200, 10%, 80%);
  background-color: hsl(200, 10%, 90%);
}

div.ViewIncreaseSellingPrice {
  border-color: hsl(20, 10%, 80%);
  background-color: hsl(20, 10%, 90%);
}

div.ViewDecreaseSellingPrice {
  border-color: hsl(280, 10%, 80%);
  background-color: hsl(280, 10%, 90%);
}

div.ViewCoinsPriceHistory {
  border-color: hsl(13, 40%, 80%);
  background-color: hsl(13, 40%, 90%);
}

.shiny-button {
  background: linear-gradient(to bottom, #66ccff, #3399ff);
  border: none;
  border-radius: 10px;
  padding: 5px 7px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

/* Ticket update */
div.div-ticket-update {
  border: 1px solid hsl(160, 80%, 40%);
  border-radius: 7px;
  padding: 10px 10px;
  width: 90%;
  background-color: hsl(160, 30%, 90%);
  overflow-x: auto;
}

tr.row-ticket-title {
  background-color: hsl(90, 50%, 80%);
}

tr.row-ticket-done {
  background-color: hsl(210, 50%, 85%);
}

div.menuitem {
  width: 120px;
  height: 180px;
  background-color: hsl(120, 7%, 80%);
  border-color: hsl(120, 22%, 55%);
  color: hsl(120, 50%, 11%);
  text-align: center;
  padding: 5px;
  margin: 5px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  font-family: monospace;
  /* box-shadow: offset-x offset-y blur-radius color; */
  box-shadow: 0px 0px 3px hsl(0, 0%, 40%);
}

.margin-top-medium {
  margin-top: 10px;
}

div#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align: center;
  align-items: center;
  max-width: 100%;
}