html,body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  margin: 0;
}

/* [v-cloak] {  display:none !important; } */
/* [v-cloak]::before { position: absolute; top: 10em; left: 10em; content: "loading..."; } */

a {
  text-decoration: underline;
}


#trainingApp {
  width: 100%;
  display: grid;
  /* grid-template-columns: 1fr 10fr 1fr; */
  grid-template-rows: auto;
  row-gap: .5em;
  grid-template-areas:
    "menuBar"
    "weeklyArrowInput"
    "weeklyScoreInput"
    "summaryDisplay";
}

.menuBar {
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: auto;
  background: lightGrey;
  /* margin: .1em 0; */
  padding: .25em;
}
.menuBar > div {
  margin: auto;
  /* border: 2px solid grey; */
  /* border-radius: .2em; */
  padding: 0 .5em;
  text-decoration: inherit;

}

.appGrid {
}

.appGrid > .menuBar { grid-area: menuBar; }
.appGrid > .weeklyArrowInput { grid-area: weeklyArrowInput; }
.appGrid > .weeklyScoreInput { grid-area: weeklyScoreInput; }
.appGrid > .summaryDisplay { grid-area: summaryDisplay; }

.goals {
  margin: 1em 0;
}

.weeklyInput {
  background: #eeec;
  border-radius: .25em;
  padding: .25em;
  margin: 0 1em;
}

.days {
  display: flex;
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1f; */
}

.day {
  display: inline;
  padding-left: .1em;
  margin: auto;
  text-align: center;
}

.weeklyInput .days {
  text-align: center;
  user-select: all;
}

.weeklyInput  span {
  margin: .25em
}

#chart {
  width: 100vw;  /* scroll */
  overflow-x: scroll;
  overflow-y:hidden;
  /* white-space: nowrap; */
}

.info {
  font-size: smaller;
  border: 2px solid grey;
  width: 20em;
  margin-left: 1em;
  padding-left: 1em;
}
#arrowInput {
  position: absolute;
  z-index: 10;
}


.loginGrid {
  display: grid;
  align-content: space-evenly;
  /* grid-template-columns: 1fr 1fr 2fr; */
  grid-template-areas:
    "welcome welcome welcome"
    "name  . loginButtons"
    "coach . loginButtons"
    "misc2 . loginButtons"
    ". . loginButtons"
    ". . loginButtons";

  width: 90%;
}

.loginGrid div {
}
.loginGrid > .loginButtons { grid-area: loginButtons; }
.loginGrid > .welcome  { grid-area: welcome; }
.loginGrid > .name  { grid-area: name; }
.loginGrid > .coach { grid-area: coach; }
.loginGrid > .misc2 { grid-area: misc2; }

.loginButtons > div {
  padding: 1em;
}

#settings {
  margin: auto;
}

.watermark {
  position: absolute;
  color: black;
  opacity: 20%;
  font-weight: bold;
  font-size: 20vw;
  transform: rotate(-45deg);
  top: 0;
  left: 15vw;
  z-index: -1;
}

.loading {
  width: 20vw;
  height: 20vw;
  position: absolute;
  top: 20vh;
  left: 40vw;
  z-index: 10;
  opacity: 60%;
  background: #FAEF00;
}


.teamView {
  display: table;
  padding: 1em;
  table-layout: auto;
}

.teamView td {
  border: 1px solid black;
  padding: 0 .5em;
  min-width: 2em;
  text-align: right;
}

.teamView th {
  text-align: center;
}

.editable {
  padding: .275em;
  padding-right: 1em;
  min-width: 8em;
  border: 1px solid gray;
  display: inline;
  overflow-wrap: break-word;
  hyphen: auto;
  background-color: white;
}

/* fake input="text" placeholder */
.editable[placeholder]:empty:before {
  content: attr(placeholder);
  color: #888;
}
.editable[placeholder]:empty:focus:before {
  content: "";
}

.scores {
  border: black solid 1px;
  margin: 0 1em;
  padding: 1em;
  width: fit-content;
}
.scores ul {
  padding-left: 0;
}
.scores li {
  list-style-position: inside;
  padding-inline-start: 1em;
}
.scores div {
  font-weight: bold;
  text-decoration: underline;
}
.scores span {
  font-size: smaller;
  color: gray;
}