@import url('https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy');

:root {
  /* --txtBody: white; */
  --txtBody: rgba(240,241,244,1);
  --txtTitle: white;
  /* --txtHeaders: white; */
  --txtHeaders: rgba(210,228,249,1);
  --txtLiSelected: rgba(240,241,244,1);

  --bgDesk: #0d0e18;
  /* --bgContainer: rgba(139,143,193,.5); */
  --bgContainer: rgba(76,83,103,1);
  --bgCard: #1c1e2c;
  --bgCardDark: #151825;
  /* --bgCardHover: rgba(100, 100, 255, 0.5); */
  --bgCardHover: rgba(102, 102, 204, 0.5);
  --bgCardTitle: rgba(150, 0, 0, 0.2);
  --bgCardTitleHover: rgba(150, 0, 0, 0.5);
  --bgDiaBlock: rgba(60, 60, 60, 0.5);
  --bgLiSelected: rgba(150, 0, 0, 0.5);

  --borderCard: rgba(240,241,244,.75);
  /* --borderContainer: rgba(76,83,103,1); */
  --borderContainer: rgba(139,143,193,.75);

  /* --scaleGreen: rgba(166, 255, 77, 1);
  --scaleRed: rgba(255, 106, 0, 1); */
  --scaleGreen: rgba(122, 172, 57, 1);
  --scaleGreen6: rgba(122, 172, 75, 0.66);
  --scaleRed: rgba(204, 155, 51, 1);
  --scaleRed6: rgba(204, 155, 51, 0.66);

  --buttonBG: #336;
  --buttonText: ;
  --buttonBorder: white;
}

@keyframes votePulseAni {
  0% {
    margin-bottom: 0em;
    margin-top: 0em;
  }
  30% {
    margin-bottom: .25ex;
    margin-top: .25ex;
    box-shadow: .25ex .25ex .25ex .5ex var(--scaleGreen);
    filter: brightness(1.5);
  }
  70% {
    margin-bottom: .25ex;
    margin-top: .25ex;
    box-shadow: .25ex .25ex .25ex .5ex var(--scaleGreen);
    filter: brightness(1.5);
  }
  100% {
    margin-bottom: 0em;
    margin-top: 0em;
  }
}

@keyframes messageFade {
  0% {
    /* display: none; */
    filter: opacity(0);
  }
  100% {
    filter: opacity(100%);
  }
}

.messageFadeIn {
  animation-name: messageFade;
  animation-duration: .4s;
  animation-iteration-count: 1;
}
.messageFadeOut {
  animation-name: messageFade;
  animation-duration: .4s;
  animation-iteration-count: 1;
  animation-direction: reverse;
}

.votePulse {
  animation-name: votePulseAni;
  animation-duration: .4s;
  animation-iteration-count: 2;
  /* animation-timing-function: ease-in-out; */
}

Body {
  /* background-color: #0d0e18;
  color: white; */
  background-color: var(--bgDesk);
  color: var(--txtBody);
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 13pt;
}
main {
  /* width: 70vw; */
  width: calc(100vw - 10em);
  left: 8em;

  position: absolute;
  top: 1em;
}

header {
  margin-top: 1em;
  margin-bottom: .5ex;
  /* line-height: 1em; */

  width: 6em;

  padding-left: .5em;
  padding-top: 1ex;

  text-align: center;

  position: fixed;

  transition: .2s;
}
header h1 {
  margin: 0ex;
  display: inline-block;
  font-size: 20pt;
}
header h2 {
  /* margin-top: -.5ex; */
  /* margin-left: 1em; */
  /* display: inline-block; */
  font-size: 16pt;
}

nav {
  width: 100%;
  margin-top: 1ex;
}
#voteCount {
  margin-top: .25ex;
  margin-bottom: 1ex;
}
#voteCount::before {
  content: "Current Vote #";
}
#voteTotal {
  margin-bottom: .25ex;
}
#voteTotal::before {
  content: "Votes Cast ";
}
button {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 14pt;

  display: inline-block;

  padding-left: .5em;
  padding-right: .5em;

  /* color: white; */
  color: var(--buttonText);

  /* background-color: #336; */
  background-color: var(--buttonBG);
  border-radius: .5em;

  border-style: solid;
  border-width: .1ex;
  /* border-color: white; */
  border-color: var(--buttonBorder);

  cursor: pointer;

  float: right;

  user-select: auto;

  margin-left: .5ex;
  margin-right: .5ex;
}
button:hover {
  filter: saturate(150%);
  filter: brightness(150%);
}
button:disabled {
  filter: grayscale(50%);
  border-color: var(--borderContainer);
  color: var(--borderContainer);
}
.mainButton {
  float: none;
  width: 5em;

  padding-top: 1ex;
  padding-bottom: 1ex;

  margin-top: 1ex;
  margin-bottom: 1ex;
}
.smallButton {
  font-size: 10pt;
  float: none;
  margin-top: 2px;
  margin-bottom: 2px;
}

.container {
  min-height: 100%;

  display: table;
  width: 100%;

  background-color: var(--bgContainer);

  border-style: solid;
  border-width: .3ex;
  border-color: var(--borderContainer);
  border-radius: 1em;
}
.scale {
  /* background-color: blue; */
  position: relative;
  /* max-width: 20em; */
  width: 10em;
  /* min-width: 5em; */
  min-width: 14ex;

  display: table-cell;

  background-image: linear-gradient(var(--scaleGreen), var(--scaleRed));

  border-radius: 1em 0em 0em 1em;

  transition: .2s;
}
.scale div {
  padding: 1em;
  /* padding-right: 2ex; */

  text-align: center;
  /* min-width: 14ex; */
  /* font-size: 120%; */

  /* transition: .2s; */
}
.scale div:first-child {
  /* margin-bottom: 100%; */
  padding-bottom: 0px;
  width: calc(100% - 2em);

  position: absolute;
  top: 0%;
  left: 0%
}
.scale div:nth-child(3) {
  /* background-color: blue; */
  /* height: calc(100% - 4em); */
  position: absolute;
  bottom: 4em;
  top: 4em;

  vertical-align: middle;

  min-width: calc(100% - 3em);
  overflow: hidden;
}
.scale div:nth-child(3) P {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  overflow: hidden;
}
.scale div:last-child {
  /* margin-top: 100%; */
  padding-top: 0px;
  position: absolute;
  bottom: 1em;
  width: calc(100% - 2em);
}

.scale .hidden div {
  display: none;
}

/* ---- Game Card Styling ---- */

ul {
  list-style: none;
  padding: 0px;

  /* position: absolute; */
  left: 20%;
  top: 0px;

  margin: 0px;

  display: table-cell;
  /* float: right; */
  padding-bottom: 1px;
}

.dropTarget {
  box-sizing: border-box;
  /* padding-bottom: .75em; */
  height: 1em;
  /* background-color: blue; */

  transition: .2s ease-out;
  border-radius: 1em;

  background-image: radial-gradient(cyan 15%, rgba(0,0,0,0) 80%, rgba(0,0,0,0));
  background-repeat: no-repeat;

  border-style: solid;
  border-color: rgba(0,0,0,0);
  border-width: .5em;

  margin-left: -.75ex;
  width: calc(100% + 1.75ex);
}
 .dropTarget.over {
  /* padding-bottom: 2em; */
  height: 2em;
  /* padding-top: 3em; */
  /* margin-top: .5ex;
  margin-bottom: .5ex; */

  /* background-color: rgba(0,160,160,.5); */
  /* background-image: radial-gradient(cyan 80%, rgba(0,0,0,0)); */
  background-image: radial-gradient(#0ff 15%, rgba(0,0,0,0) 80%, rgba(0,0,0,0));
  border-radius: 1em;

  border-style: solid;
  border-color: clear;
  border-width: .25ex;
}

.gameCards {
  padding: 1ex;
  padding-top: 0ex;
  padding-bottom: 0ex;
  margin: 0px;
  list-style: none;

  /* width: 20%; */
  min-width: 90%;
  max-width: ;

  /* background-color: lightgrey; */
}

.gameCards table {
  background-color: var(--bgCard);
  border-radius: .5em;
  transition: .2s;


  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  min-height: 4em;
  border-width: .3ex;
  /* border-color: white; */
  border-color: var(--borderCard);
  border-style: solid;
  border-radius: .5em;

  /* padding-right: 1ex;
  padding-left: 0ex;
  padding-top: 0ex;
  padding-bottom: 0ex; */
  padding: 0ex;

  border-collapse: collapse;

}
.gameCards table:last-child {
  margin-bottom: 0em;
}
.gameCards table tbody {
  width: 100%;
}
[rowspan] {
  width: 100%;
}
.gameCards td {
  padding: 0ex;
}
.gameCards ul {
  /* background-color: #eee; */
  /* background-color: #1c1e2c; */
  background-color: var(--bgCard);
  border-radius: .5em;
  transition: .2s;

  margin-bottom: -.25ex;
  margin-top: -.25ex;
  margin-left: -.25ex;

  padding-right: 1ex;

  /* display: block; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  min-height: 4em;
  border-width: .3ex;
  /* border-color: white; */
  border-color: var(--borderCard);
  border-style: solid;
  border-radius: .5em;

  padding: .5ex;

  /* margin-bottom: .5ex; */

  user-select: none;

}
.gameCards ul:last-child {

}

.gameCards ul:hover {
  transition: .2s;
  /* filter: brightness(150%); */
  background-color: var(--bgCardHover);
}
.gameCards ul:hover li:nth-child(1) {
  background-color: var(--bgCardTitleHover);
}
.gameCards ul .over {
  background-color: red;
}

.gameCards ul li br {
  margin-bottom: 1ex;
}

.gameCards ul li::before {
  text-align: right;

  display: inline-block;

  min-width: 6em;
  padding-right: 1ex;

  font-weight: bold;
  /* color: #377abf; */
  color: var(--txtHeaders);
}
.gameCards ul li {
  /* width: 48%; */

  /* display: inline-block;
  float: left; */

  width: 50%;

  display: inline-block;
}

/* Game Name */
.gameCards ul li:nth-child(1)::before {
  /* content: "Game Name:"; */
}
.gameCards ul li:nth-child(1) {
  margin: 0px;
  margin-top: -.5ex;
  margin-left: -.5ex;
  margin-right: -.5ex;
  margin-bottom: .25ex;

  padding-left: 2ex;
  padding-right: ;
  padding-top: .75ex;
  padding-bottom: .25ex;

  background-color: rgba(150, 0, 0, 0.2);

  border-style: solid;
  border-color: white;
  border-width: 0px;
  border-bottom-width: .1ex;
  border-radius: .5em .5em 0em 0em;

  font-size: 120%;
  font-weight: bold;

  /* display: block;
  float: none; */

  width: 100%;
  /* width: inherit; */
}
.gameCards ul li:nth-child(1) .cardTitle {
  display: inline-block;
}
.gameCards ul li:nth-child(1) .pts {
  float: right;
  display: inline-block;
  padding-right: .5em;
}
.gameCards ul li:nth-child(1) .cardCollapser {
  display: inline-block;
  position: relative;
  float: inline-start;

  margin-right: -4em;
  top: -.8ex;

  width: 4em;
  height: 75%;
  left: calc(50% - 4em);

  background: var(--bgCardTitleHover);

  border-style: solid;
  border-width: .3ex;
  border-color: var(--borderCard);
  border-radius: 0 0 .25em .25em;

  cursor: pointer;
}
.gameCards ul li:nth-child(1) .cardCollapser:hover {
  filter: brightness(1.3);
}

/* GM Name */
.gameCards ul li:nth-child(2)::before {
  content: "GM Name:";
}
.gameCards ul li:nth-child(2) {
  /* width: 48%; */
  /* float: left; */
}

/* Game System */
.gameCards ul li:nth-child(3)::before {
  content: "Game Sysem:";
  }
.gameCards ul li:nth-child(3) {
  /* width: 48%;
  float: left; */
}

.gameCards ul hr {
  border: .2ex solid var(--borderContainer);
  margin-top: .5ex;
  /* padding-top: .5ex; */

  width: 100%;
  height: 0ex;
  display: block;

  float: inline-end;
}

/* Pitch */
.gameCards ul li:nth-child(5)::before {
  content: "Story:";
}
.gameCards ul li:nth-child(5) {
  line-height: 120%;
  margin-left: 6em;
  text-indent: -6.5em;
  width: calc(50% - 6.5em);

}
.gameCards ul li:nth-child(6)::before {
  content: "Style:";
}
.gameCards ul li:nth-child(6) {
  line-height: 120%;
  margin-left: 6em;
  text-indent: -6.5em;
  width: calc(50% - 6.5em);
}

.gameCardsCollapsed {
  height: 2em;
  /* margin-bottom: 1em; */
  /* transition: .25s; */
}
.gameCardsCollapsed ul {
  min-height: initial;
  padding-bottom: 0;
}
.gameCardsCollapsed ul hr {
  margin: 0px;
}
.gameCardsCollapsed ul li:nth-child(5) {
  /* display: none; */
  height: .1ex;
  overflow: hidden;
}
.gameCardsCollapsed ul li:nth-child(6) {
  /* display: none; */
  height: .1ex;
  overflow: hidden;
}

/* .cardCollapseControl {
  position: absolute;
  width: 10em;
  z-index: 10;
  text-align: center;
  top: 15vh;
}
.cardCollapseControl button {
  float: none;
  width: 75%;
  background-color: var(--bgContainer);

  margin-bottom: 1ex;
} */

.scale .cardCollapseControl {
  position: relative;
  top: -2em;
  width: 100%;
  /* z-index: 10; */
  text-align: center;
  padding: 0;
  padding-bottom: 1ex;
}
.scale .cardCollapseControl button {
  float: none;
  width: 75%;
  background-color: var(--bgContainer);

  margin-bottom: 1ex;
}


/* .gameCards ul .UpArrow {
  display: block;
  content: "up";
  background-color: red;
  width: 1em;
  height: 1em;
}
.gameCards ul .DownArrow {
  display: block;
  content: "up";
  background-color: red;
  width: 1em;
  height: 1em;
} */
/* .gameCards ul::after {
  display: block;
  position: relative;
  content: "Arrows Here";
  top: 0%;
  left: 100%;

  width: 2em;
} */
/* .ArrowContainer {
  display: block;
  height: 100%;
  width: 1em;
  position: relative;
  top: 0;
} */
.gameCards .UpArrow {
  background-color: var(--scaleGreen6);
  /* opacity: .66; */
  width: 2em;
  min-width: 2em;
  border-radius: 0em .4em 0 0;

  text-align: center;
  cursor: pointer;
  transition: .2s;
}
.gameCards .UpArrow:hover {
  /* opacity: 1; */
  background-color: var(--scaleGreen);
}
.gameCards .UpArrow span {
  transform: rotate(-90deg);
  display: inline-block;
}

.gameCards .DownArrow {
  background-color: var(--scaleRed6);
  /* opacity: .66; */
  width: 2em;
  min-width: 2em;
  border-radius: 0 0 .4em 0;

  text-align: center;
  cursor: pointer;
  transition: .2s;
}
.gameCards .DownArrow:hover {
  /* opacity: 1; */
  background-color: var(--scaleRed);
}
.gameCards .DownArrow span {
  transform: rotate(90deg);
  display: inline-block;
  opacity: 1;
}

/* li.over {
  border: .5ex dashed cyan;
} */

[draggable] {
  user-select: none;
  cursor: move;
}

/*
-------------------
---- Dialogues ----
-------------------
*/

.dialogueContainer {
  z-index: 1000;
  position: fixed;
  left: 0vw;
  top: 0vh;

  width: 100vw;
  height: 100vh;

  /* background-color: rgba(60, 60, 60, 0.5); */
  background-color: var(--bgDiaBlock);
}
.dialogue {
  /* background-color: #0d0e18; */
  background-color: var(--bgContainer);
/*
  margin-left: calc(50vw - 20em);
  margin-top: 35vh;
  padding: 1em;
*/
  border-radius: 2em;
/*
  width: 40em;

  display: flow-root;
*/
  position: fixed;
  top: 50%;
  left: 50%;
  /* width: 200px; */
  margin-left: -100px;
  /* height: 50px; */
  margin-top: -25px;

}
.dialogue h1 {
  font-size: 20pt;
  margin: 0ex;
}
.dialogue h2 {
  font-size: 16pt;
}
.dialogue h3 {
  font-size: 14pt;
}

#dialgueConfirm .dialogue {
  margin-top: -40vh;
  margin-left: calc(-60vw/2);

  width: 60vw;
  padding: 1em;
}
#voteTable {
  margin: 0px;
  margin-bottom: 1em;
  margin-top: 1em;
  padding: 0px;
  /* padding-left: 13ex; */
  /* width: 30em; */
}
.vtLine {
  /* margin-bottom: 1em; */
  /* background-color: green; */
  display: grid;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 60% 40%;
}
.vtGameInfo {
  background-color: var(--bgCard);
  /* width: 60%; */
  border-radius: 1em 0 0 1em;

  text-align: center;
  /* display: inline-block; */

  display: grid;
  grid-row: 3;
  grid-column: 1;
}
.vtGameInfo div:first-child {
  background-color: var(--bgCardTitle);
  border-radius: 1em 0 0 0;

  display: inherit;
  grid-row: 1;
}
.vtGameInfo div:last-child {
  display: inherit;
  grid-row: 2;
}
.vtGameInfo div:last-child span {
  display: inline-block;
}
.vtGameInfo div:last-child span:nth-child(1) {
  /* color: red; */
  width: 15%;
}
.vtGameInfo div:last-child span:nth-child(2) {
  /* color: orange; */
  width: 85%;
}
.vtGameInfo div:last-child span:nth-child(2) span {
  /* color: orange; */
  width: 115%;
  position: relative;
  left: -15%;
}

.vtPointsContainer {
  /* width: 40%;
  display: inline-block; */
  position: relative;
  /* top: -0.8em; */

  display: inherit;
  grid-row: 3;
  grid-column: 2;
}

.vtPointsBar {
  /* background-color: var(--scaleGreen); */
  background-image: linear-gradient(to right, var(--scaleRed), var(--scaleGreen));
  text-align: right;
  /* width: 30%; */
  /* max-width: 30%; */

  /* position: relative; */
  /* left: 60%; */
  /* top: -2.9em; */
  /* height: 2.9em; */

  /* margin-bottom: -2.9em; */

  border-radius: 0 1em 1em 0;
  display: inherit;
}
.vtPointsBar span {
  /* position: absolute;
  top: 50%;
  left: calc(100% - 7ex);
  transform: translate(0, -50%);

  width: 6ex;

  padding-left: 6ex; */
  /* line-height: 2.9em; */
  /* background-color: lightblue; */
  padding-right: 1ex;

  display: inherit;
  grid-row: 2;
}

.diaInfoBox {
  z-index: 2000;

  margin-top: -38vh;
  margin-left: calc(-46vw/2);

  width: 46vw;
  height: 33vh;
  padding: 1em;

  border-width: 2ex;
  border-style: solid;

  background-color: var(--bgCardDark);
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}
.diaInfoBox > div {
  text-align: center;
  /* position: relative; */
  /* top: calc(50% - 1em); */
}
.diaClickIntercept {
  position: fixed;
  /* z-index: 1001; */
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;

  /* background-color: var(--bgDiaBlock); */
}

.infoGood {
  border-color: var(--borderCard);
  filter: drop-shadow(0,0,10em var(--scaleGreen6));
}
.infoGood > div > span {
  font-size: 200%;
}

.infoBad {
  border-color: var(--scaleRed);
}
.infoBad > div {

}
.infoBad > div > span {
  font-size: 200%;
}

.hidden {
  display: none;
}

.points {
  /* position: relative;
  left: 100%;
  top: -5em; */
  float: right;
  display: inline-block;
  font-size: 120%;

  top: 0em;
  padding-right: .5em;
}

#dialogueResults .dialogue {
  margin-top: -40vh;
  /* margin-left: -20em; */
  margin-left: calc(-60vw/2);

  width: 60vw;
  padding: 1em;
}

#resultContainer {
  margin: 0px;
  margin-bottom: 1em;
  margin-top: 1em;
}
/* #resultContainer span:first-child {
  display: inline-block;
  text-align: right;
  width: 15em;
  padding-right: 1ex;
}
#resultContainer span:last-child {
  display: inline-block;
  background-color: blue;
} */


/*
  ----------------------------
  ---- Dialogue Game Edit ----
  ----------------------------
*/

#dialogueEditGames .dialogue {
  /* margin-top: 15vh;
  margin-left: 25vw; */
  width: 75vw;

  margin-top: -40vh;
  margin-left: calc(-72vw/2);

  /* width: 40em; */
  padding: 1em;
}
#dialogueEditGames h2 {
  width: 100%;
  margin-top: -.4ex;
  margin-bottom: 1ex;
  background-color: var(--bgCardTitle);

  border-bottom: .25ex var(--borderCard) solid;
  padding-left: 1ex;
  padding-top: .75ex;
  margin-right: -.4ex;
  margin-left: -.4ex;

}
.diaBound {
  display: table;
  /* background-color: red; */
}
#diaGameList {
  display: table-cell;
  box-sizing: border-box;
  background-color: var(--bgCardDark);
  /* width: calc(100% / 3); */
  width: 25%;
  /* float: left; */

  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
  border-radius: 1em 0em 0em 1em;

  /* padding: .5ex; */

  height: 100%;
}
#diaGameList h2 {
  border-radius: 1em 0 0 0;
  /* padding-left: .5ex; */
  margin-left: .05ex;
}
#diaGameList .noSelect {
  cursor: not-allowed;
}
#diaGameList .noSelect:hover {
  filter: brightness(100%);
}
#diaGameList ul {
  width: 100%;
  display: block;
}
#diaGameList ul li {
  /* width: 100%; */
  padding-top: .5ex;
  padding-bottom: .5ex;
  padding-left: .75ex;
  padding-right: .5ex;
  /* margin-right: .5ex; */

  border-style: solid;
  border-color: var(--borderContainer);
  border-width: 0ex;
  border-bottom-width: .25ex;

  background-color: var(--bgCard);
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
}
#diaGameList ul li:first-child {
  border-top-width: .25ex;
}
#diaGameList ul li:nth-child(odd) {
  background-color: var(--bgDiaBlock);
  user-select: none;
}
#diaGameList ul li:hover {
  filter: brightness(140%);
}
.liSelected {
  background-color: var(--bgLiSelected) !important;
  color: var(--txtLiSelected);
  /* font-weight: bold; */
}
#diaGameDetails {
  box-sizing: border-box;
  /* float: left; */
  background-color: var(--bgCardDark);
  /* width: calc((100% / 3) * 2); */
  width: 100%;
  display: table-cell;

  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
  border-radius: 0em 1em 1em 0em;

  margin-bottom: 1em;
  padding: .5ex;

  height: 100%;
}
#diaGameDetails div {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;

}
#diaGameDetails h2 {
  border-radius: 0em 1em 0 0;
}
#diaGameDetails div div {
  margin: 1ex;
  width: calc(50% - 2ex);
}
#diaGameDetails div div h3 {
  /* font-size: 14pt; */
  margin: 0ex;
}
#diaGameDetails div div textarea {
  width: calc(100% - 1ex);

  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
  border-radius: 1ex;

  padding: .25ex;

  background-color: var(--bgCard);
  color: var(--txtBody);

  font-family: 'Sorts Mill Goudy', serif;
  font-size: 13pt;
}
#diaGameDetails div div:nth-child(2) {
  width: 100%;
}
#diaGameDetails div div:nth-child(5) {
  width: 100%;
}
#diaGameDetails div div:nth-child(5) textarea {
  height: 8em
}
#diaGameDetails div div:nth-child(6) {
  width: 100%;
}
#diaGameDetails div div:nth-child(6) textarea {
  /* width: 100%; */
  height: 8em;
}
textarea {
  transition: .4s ease-in-out;
}
textarea:focus {
  filter: contrast(120%);
  border-width: 150%;
}
textarea:required {
  /* box-shadow: .25ex .25ex 0ex .5ex var(--borderContainer); */
  box-shadow: .25ex .25ex 0ex .5ex var(--scaleGreen);
  /* transition: .4s; */
}
textarea:required:placeholder-shown {
  /* box-shadow: .25ex .25ex 0ex .5ex var(--scaleGreen); */
  box-shadow: .25ex .25ex 0ex .5ex var(--borderContainer);
}

input {
  transition: .4s ease-in-out;
}
input:focus {
  filter: contrast(150%);
}
input:required {
  box-shadow: .25ex .25ex 0ex .5ex var(--scaleGreen);
  /* transition: .4s; */
}
input:required:placeholder-shown {
  box-shadow: .25ex .25ex 0ex .5ex var(--borderContainer);
}
.diaGE_Footer {
  margin-top: 1ex;
  margin-bottom: 1ex;
  padding-bottom: 1em;
}
.diaGE_Footer span {
  float: right;
  margin-left: 1ex;
  margin-right: 1ex;
}
.diaGE_Footer span h4 {
  margin: 0ex;
  padding-right: 1ex;

  display: inline-block;
}

.diaCodeField {
  display: inline-block;

  /* padding: .5ex; */
  padding-left: .5ex;
  padding-right: .5ex;
  margin-right: 1ex;


  text-align: center;

  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
  border-radius: 1ex;

  background-color: var(--bgDesk);
  color: var(--txtBody);
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 13pt;
}

/*
  ---------------------
  ---- Diagnostics ----
  ---------------------
*/

#devDiagnostics {
  /* This is all part of .sideBar now! */
  /* border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
  border-radius: .5em;
  background-color: var(--bgCard);

  padding: .5ex;*/

  font-size: 10pt;
}
#devDiagnostics h3 {
  font-size: 12pt;
  margin-top: .5ex;
  margin-bottom: 1ex;

}
#devDiagnostics ul {
}
#devDiagnostics ul li::before {
  font-size: 8pt;
  width: 5.5em;
  text-align: right;
  display: inline-block;
  padding-right: .5ex;
}
#devDiagnostics ul li:nth-child(1)::before {
  content: "Screen W:";
}
#devDiagnostics ul li:nth-child(2)::before {
  content: "Screen H:";
}
#devDiagnostics ul li:nth-child(3)::before {
  content: "Window W:";
}
#devDiagnostics ul li:nth-child(4)::before {
  content: "Window H:";
}

.currentStyle::before {
  content: "Normal View";

}
.currentStyle {
  margin-bottom: .5ex;
  border-bottom-style: solid;
  border-bottom-color: var(--bgCard);
  border-bottom-width: .25ex;
}

/*
  -------------------------------
  ---- Results Visualisation ----
  -------------------------------
*/

.pieChart {
  height: 25ex;
  width: 25ex;
  border-radius: 50%;
  /* transform: rotate(-0.25turn); */
  background-color: lightgrey;
}
.pieChart #pieHere {
  transform: rotate(-90deg) translateX(-100%);
}
.pieChart g circle {
  /* fill: lightgrey; */
  fill: rgba(0,0,0,0);

  /* stroke: rgba(0,0,255,0.25); */
  stroke-width: 32;
  /* stroke-dasharray: 50 100; */

  transition: .4s;
}
.pieChart g circle:hover {
  filter: brightness(120%);
}
.pieChart g circle:nth-child(even) {
  stroke: var(--scaleGreen);
}
.pieChart g circle:nth-child(odd) {
  stroke: var(--scaleRed);
}
.pieChart g circle:nth-child(1) {
  stroke: rgba(0,0,255,0.5);
}
.pieChart g circle:nth-child(2) {
  stroke: rgba(0, 255, 0, 0.5);
}
.pieChart g circle:nth-child(3) {
  stroke: rgba(255, 0, 0, 0.5);
}
.pieChart g circle:nth-child(4) {
  stroke: rgba(0, 255, 255, 0.5);
}
.pieChart #pieLabels {
  font-size: 7pt;
  text-align: center;
  /* transform: translateX(50%) translateY(50%); */
}
.pieChart g text {
  /* transform: rotate(90deg); */
  stroke: black;
  stroke-width: .25%;
  font-weight: bold;
}
.pieChart g text:nth-child(even) {
  fill: var(--scaleGreen);
}
.pieChart g text:nth-child(odd) {
  fill: var(--scaleRed);
}
.pieChart g text:nth-child(1) {
  fill: rgba(0,0,255,0.5);
}
.pieChart g text:nth-child(2) {
  fill: rgba(0, 255, 0, 0.5);
}
.pieChart g text:nth-child(3) {
  fill: rgba(255, 0, 0, 0.5);
}
.pieChart g text:nth-child(4) {
  fill: rgba(0, 255, 255, 0.5);
}

.pieLabel {
  font-size: 7pt;
}


/*
  --------------------------
  ---- Participants Bar ----
  --------------------------
*/

.sideBar {
  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
  border-radius: .5em;
  background-color: var(--bgCard);

  padding: .5ex;

  /* font-size: 10pt; */
}
.sideBar h3 {
  font-size: 12pt;
  margin-top: .5ex;
  margin-bottom: 1ex;
}

#popParticipants {
  box-sizing: border-box;
  font-size: 12pt;
}
#popParticipants div {
  max-height: 2em;
}
#popParticipants div > span {
  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;

  margin: 0em;
  display: inline-block;

}
#popParticipants div > span:first-child {
  width: calc(100% - 2em);
  border-radius: .5ex 0 0 .5ex;
  margin-right: -1ex;
}
#popParticipants div > span:last-child {
  width: 1.5em;
  border-radius: 0 .5ex .5ex 0;
}


#popParticipants table {
  max-height: 2em;
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
  border-radius: .5ex;

  margin-top: 1ex;
}
#popParticipants table > tbody {
  /* border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex; */

  margin: 0em;
  /* display: inline-block; */

}
#popParticipants table > tbody > tr > td {
  border-style: solid;
  border-color: var(--borderCard);
  border-width: .25ex;
}
#popParticipants table > tbody > tr > td:first-child {
  width: calc(100% - 2em);
  border-radius: .5ex 0 0 .5ex;
  margin-right: -1ex;
}
#popParticipants table > tbody > tr > td:last-child {
  width: 1.5em;
  border-radius: 0 .5ex .5ex 0;
}

.VoteConfirmed {
  color: var(--borderContainer);
}

/*
  -----------------------------------
  ---- Dialogue Pop Registration ----
  -----------------------------------
*/
#dialoguePopRegister .dialogue{
  margin-top: -40vh;
  margin-left: calc(-33vw/2);

  width: 33vw;
  padding: 1em;
}
#dialoguePopRegister .dialogue div div{
  display: flex;
  align-content: center;
  justify-content: center;
}
#diaPop_NewName {
  min-width: 66%;
  max-width: 90%;
  margin-bottom: 1em;

  font-size: 14pt;

}