:root {
  --w: 100px;
  --h: 60px;
  --x: 1;

  --header-footer-color: #555;
  --title-color: rgb(87, 247, 14);
  --nice-red-color: #cc002c;

  --body-color: rgb(228, 226, 226);
  --player-view-color: rgb(232, 197, 194);

  --table-outer-color: green;
  --table-inner-color: var(--player-view-color);
  /* 
  --body-color: white;
  --player-view-color:white; 
*/
}

* {
  font-family: Arial, Helvetica, sans-serif;
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--body-color);
  /* display: flex; */
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 50vh;
  display: block;
  /*
   * To stop the unwanted horizontal scroll
   * - https://css-tricks.com/forums/topic/horizontal-scroll-bar-issue-with-web-site-cutting-off-when-you-scroll-right/
   *
   * overflow-x: hidden;
   */
}

#header {
  background-color: var(--header-footer-color);
  font-size: 1.1rem;
  /* letter-spacing: 0.05rem; */
  text-align: center;
  padding: 0.5em 0;
  position: absolute;
  top: 0;
  width: 100%;
  /* height: calc(var(--x) * 72px); */
  display: block;
  z-index: 100;
}
#header .left {
  float: left;
  font-size: 2rem;
  margin-left: 0.5rem;
}
#header .left .black,
#header .left .red {
  font-size: 3rem;
}
#header .left .black {
  color: black;
}
#header .left .red {
  color: red;
}
#header .left .title a {
  color: var(--title-color);
  text-decoration: none;
}
#header .left .title a:hover {
  /* background: #cc002c; A VERY NICE RED*/
  background: var(--nice-red-color);
}
#header .left > li {
  display: inline-block;
}

#header .right {
  float: right;
}
/* #header .right > li {
  display: inline-block;
  padding: 0.5rem;
} */

#footer {
  background-color: var(--header-footer-color);
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  padding: 1em 0;
  /*margin: 1em 0;*/
  z-index: -1;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
}

#pageContent {
  position: relative;
  /* IMPORTANT - knob to adjust height */
  top: calc(var(--x) * 110px);
  width: 100%;
}

#pageContent .Red {
  background: rgb(230, 226, 226);
}

#pageContent .Blue {
  background: rgb(103, 103, 243);
}

#pageContent #faq {
  text-align: left;
  margin-left: 2.5em;
}
#pageContent #faq li {
  margin-left: 1em;
}

.box1 {
  margin: auto;
  /* IMPORTANT - knob to adjust height */
  padding-bottom: calc(var(--x) * 145px);
}
.box2 {
  margin: auto;
}

.playerview {
  width: calc(var(--x) * 615px);
  height: calc(var(--x) * 143px);
  background: var(--player-view-color);
  border: calc(var(--x) * 2px) solid green;
  border-radius: calc(var(--x) * 20px);
  box-sizing: border-box;
  display: block;
  font-size: 80%;
  margin: auto;
  /*padding-left: calc(var(--x) * 5px);*/
}
.playerview h3 {
  display: inline-block;
}

.gameScore {
  font-size: 0.8rem;
}

.contract {
  padding: calc(var(--x) * 5px);
  color: black;
}
.contract.successful {
  color: green;
  animation: blinker 1s linear infinite;
}
.contract.failure {
  color: red;
  animation: blinker 1s linear infinite;
}

.message {
  padding: calc(var(--x) * 5px);
  line-height: 0.9;
}
.message.animate {
  padding: calc(var(--x) * 5px);
  line-height: 0.9;
  font-size: 1.5em;
  color: var(--title-color);
  border-radius: calc(var(--x) * 50px);
  background: var(--nice-red-color);
  animation: blinker 1s ease-out infinite;
}

.playerStatus {
  margin: calc(var(--x) * 8px) calc(var(--x) * 0px) calc(var(--x) * 8px)
    calc(var(--x) * 0px);
}

.setTrump {
  width: calc(var(--x) * 250px);
  min-height: 25vh;
  margin: auto;
  text-align: left;
  list-style-type: none;
}
.setTrump > ul {
  list-style-type: none;
}
.setTrump > label {
  font-size: 1.2rem;
}
.setTrump > h3,
.setTrump > input {
  allign: center;
}

.bidAnchor {
  text-decoration:none;
  color:inherit;
}
.bidContract {
  text-decoration: underline;
}
.trumpSign {
  font-size: 1.1rem;
}
.trumpSign.red {
  color: red;
}

img {
  width: calc(var(--x) * 70px);
  /*height:400px;*/
  object-fit: scale-down;
}

@media screen and (max-width: 800px) {
  html {
    font-size: 0.8rem;
  }
  :root {
    --x: 0.8;
  }
}

@media screen and (max-width: 640px) {
  html {
    font-size: 0.6rem;
  }
  :root {
    --x: 0.6;
  }
}

/* 
@media screen and (max-width: 400px) {
  html {
    font-size: 0.4rem;
  }
  :root {
    --x: 0.4;
  }
}
*/

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    background-color: rgb(2, 69, 136);
  }
  100% {
    background-color: #ff4136;
  }
}

.grid-container {
  display: grid;
  grid-template-columns:
    calc(var(--x) * var(--w))
    calc(var(--x) * var(--w))
    calc(var(--x) * var(--w))
    calc(var(--x) * var(--w))
    calc(var(--x) * var(--w));
  grid-template-rows: calc(var(--x) * var(--h));
  width: calc(5 * calc(var(--x) * var(--w)));

  margin: auto;
  margin-top: 3rem;

  border-radius: 50%;

  /* background: rgba(26, 230, 7, 0.274);
  border: calc(var(--x) * 2px) solid green;  */

  background-color: var(--table-outer-color);
  border: calc(var(--x) * 2px) solid red;

  /* font-size: calc(var(--x) * 100%); */
  vertical-align: middle;

  font-size: 75%;
  line-height: 50%;
}

.grid.TABLE {
  /*
              The grid-area CSS property is a shorthand property for
              grid-row-start, grid-column-start, grid-row-end and grid-column-end,
              specifying a grid item’s size and location within the grid 
            */
  grid-area: 2 / 2 / 5 / 5;

  width: calc(3 * calc(var(--x) * var(--w)));
  height: calc(3 * calc(var(--x) * var(--h)));
  border-radius: 50%;

  /* border: calc(var(--x) * 0.2px) solid rgba(241, 7, 7, 0.8);  */
  /* background-color: rgba(44, 42, 41, 0.623); */
  /* background-color: rgba(124, 190, 122, 0.623); */
  background-color: var(--table-inner-color);

  flex-direction: column;
  justify-content: center;
  display: flex;
}

.grid {
  /* background-color: rgba(255, 255, 255, 0.8); */
  text-align: center;
  width: calc(var(--x) * var(--w));
  height: calc(var(--x) * var(--h));
  /* UNCOMMECT THIS TO SEE THE MAGIC */
  /* border: 1px dotted grey; */
}

.grid.player {
  width: calc(var(--x) * var(--w));
  height: calc(var(--x) * var(--h));
  /* UNCOMMECT THIS TO SEE THE MAGIC */
  /* border: 1px dotted black; */
}

.grid .one {
  justify-content: center;
  font-weight: bold;
  /* overflow: hidden; */
}

.grid .pInfo div {
  overflow: hidden;
  padding: 0.2rem;
}

.grid .pInfo.red {
  color: red;
}
.grid .pInfo.blue {
  color: blue;
}

.grid .pInfo.nextPlayer {
  /* animation: pulse 1s ease-out infinite; */
  animation: blinker 1s ease-out infinite;
  /* animation: blinker 1s ease-in-out infinite; */
}

.grid .pCard img {
  position: relative;
  max-width: calc(var(--w) * var(--x) * 0.7);
  max-height: calc(var(--h) * var(--x) * 1.5);
}

/*********************** PLAYERS START ********************/
.grid {
  --baseHeight: calc(var(--x) * var(--h) / 100);
  --baseWidth: calc(var(--x) * var(--w) / 100);

  --top-pInfoHeight: calc(50 * var(--baseHeight));
  --top-pCardHeight: calc(11 * var(--baseHeight));

  --row1-pInfoHeight: calc(20 * var(--baseHeight));
  --row1-pInfoWidth: calc(50 * var(--baseWidth));
  --row1-pCardHeight: calc(51 * var(--baseHeight));
  --row1-pCardWidth: calc(67 * var(--baseWidth));

  --row2-pInfoHeight: calc(100 * var(--baseHeight));
  --row2-pInfoWidth: calc(50 * var(--baseWidth));
  --row2-pCardHeight: calc(51 * var(--baseHeight));
  --row2-pCardWidth: calc(67 * var(--baseWidth));

  --bottom-pInfoHeight: calc(120 * var(--baseHeight));
  --bottom-pCardHeight: calc(85 * var(--baseHeight));
}

/* real player-4 == OPPOSITE of r.player-1. ie. TOP */
.grid.p1 .pInfo {
  position: relative;
  top: calc(-1 * var(--top-pInfoHeight));
}
.grid.p1 .pCard {
  position: relative;
  top: calc(-1 * var(--top-pCardHeight));
}

/* real player-5 == OPPOSITE of r.player-3. ie. Row-1 */
.grid.p2 .pInfo {
  position: relative;
  top: calc(-1 * var(--row1-pInfoHeight));
  left: calc(-1 * var(--row1-pInfoWidth));
}
.grid.p2 .pCard {
  position: relative;
  top: calc(-1 * var(--row1-pCardHeight));
  left: calc(1 * var(--row1-pCardWidth));
}

/* real player-3 == OPPOSITE of r.player-5. ie Row-1 */
.grid.p3 .pInfo {
  position: relative;
  top: calc(-1 * var(--row1-pInfoHeight));
  left: calc(1 * var(--row1-pInfoWidth));
}
.grid.p3 .pCard {
  position: relative;
  top: calc(-1 * var(--row1-pCardHeight));
  left: calc(-1 * var(--row1-pCardWidth));
}

/* real player-6 == OPPOSITE of r.player-2. ie Row-2 */
.grid.p4 .pInfo {
  position: relative;
  top: calc(1 * var(--row2-pInfoHeight));
  left: calc(-1 * var(--row2-pInfoWidth));
}
.grid.p4 .pCard {
  position: relative;
  top: calc(-1 * var(--row2-pCardHeight));
  left: calc(1 * var(--row2-pCardWidth));
}

/* real player-2 == OPPOSITE of r.player-6. ie Row-2 */
.grid.p5 .pInfo {
  position: relative;
  top: calc(1 * var(--row2-pInfoHeight));
  left: calc(1 * var(--row2-pInfoWidth));
}
.grid.p5 .pCard {
  position: relative;
  top: calc(-1 * var(--row2-pCardHeight));
  left: calc(-1 * var(--row2-pCardWidth));
}

/* real player-1 == OPPOSITE of r.player-4. ie BOTTOM */
.grid.p6 .pInfo {
  position: relative;
  top: calc(1 * var(--bottom-pInfoHeight));
}
.grid.p6 .pCard {
  position: relative;
  top: calc(-1 * var(--bottom-pCardHeight));
}
/*********************** PLAYERS END ********************/

.fieldWrapper label {
  display: inline-block;
  width: calc(var(--x) * 180px);
  text-align: right;
}
.fieldWrapper table {
  margin: auto;
}

#pageContent.ejectPlayer,
#pageContent.approveViewer
{
  width: calc(var(--x) * 300px);
  margin: auto;
}
#pageContent.ejectPlayer ul,
#pageContent.approveViewer ul 
{
  list-style: none;
  text-align: left;
  /* margin: calc(var(--x) * 15px); */
}
#pageContent.ejectPlayer li,
#pageContent.approveViewer li
{
  margin-left: 35%;
}

#pageContent .gameSettings {
  width: calc(var(--x) * 350px);
  margin: auto;
  text-align: left;
}

#pageContent .gameSettings section {
	text-indent: 0em;
}

#pageContent .gameSettings #id_shuffle_algo {
  list-style-type: none;
}



input[type="radio"],
input[type="submit"],
select {
  font-size: 1em;
}

#chatView {
  width: calc(var(--x) * 600px);
  /* height: calc(var(--x) * 143px); */
  height: 3em;
  /* background: var(--player-view-color); */
  background: white;
  border: calc(var(--x) * 1px) solid grey;
  border-radius: calc(var(--x) * 5px);
  box-sizing: border-box;
  display: block;
  margin: auto;
  font-size: 80%;
  text-align: left;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;


  /* width: 3em;
  float: left; */
    /*Animation*/
    /* -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease; */
}
/* #chatView:hover  {
  width: 100%;
} */
#chatView .oneChatMsg {
  /* width: 50%; */
  font-size: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: black;
  text-align: left;
  white-space: nowrap;
  padding: 0 1em;
}
#chatInput {
  padding-bottom: 2em;
}
#chatInput input[type="text"] {
  font-size: 80%;
  width: calc(var(--x) * 555px);
}
#chatInput input[type="submit"] {
  font-size: 80%;
}

/* DELETE THIS */
/* 
.everyone {
  padding: calc(var(--x) * 5px);
  list-style-type: none;
  justify-content: start;
  justify-items: start;
  position: relative;
}

.everyone > li {
  display: inline-block;
  padding: calc(var(--x) * 5px);
  vertical-align: top;
}
.one {
  list-style-type: none;
  width: calc(var(--x) * 80px);
  height: calc(var(--x) * 160px);
  justify-content: start;
  justify-items: start;
  font-weight: bold;
}
.one > li {
  padding: calc(var(--x) * 5px);
  overflow: hidden;
}

.one .name {
  white-space: nowrap;
}
.playedCard {
  clear: both;
}
.trumpSuits {
  font-size: 200%;
}

.row {
  width: 100%;
}
.tablestate {
  padding: calc(var(--x) * 5px);
}
.tablestate.nextPlayer {
  font-weight: bold;
}

.tableview {
  width: calc(var(--x) * 650px);
  height: calc(var(--x) * 400px);

  box-sizing: border-box;
  margin-bottom: calc(var(--x) * 10px);
  padding: calc(var(--x) * 5px);
  font-size: 75%;
  line-height: 50%;
  margin: auto;
}
*/

/* USING METHOD#1 in  https://www.parthpatel.net/create-vertical-hover-expandable-menu/  */
/* NOTE: currently we are using METHOD#2, see below.
/* NOTE: To enable METHOD#1, change id=nav1 to id=nav inside base.html */
#nav {
  width: calc(var(--x) * 120px);
  float: right;
  margin-right: calc(var(--x) * 4px); /* to avoid bottom scroll bar */
  list-style-type: none;
}
#nav .menu-item {
  width: calc(var(--x) * 120px);
}
/*Menu Header Styles*/
#nav .menu-item h4 {
  text-align: right;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  padding: calc(var(--x) * 1px) calc(var(--x) * 4px);
  background: var(--header-footer-color);
  /* border-bottom: 1px solid white; */
  border-bottom: 1px solid var(--title-color);
}
#nav .menu-item h4 a {
  /* color: white; */
  color: var(--title-color);
  display: block;
  text-decoration: none;
  width: calc(var(--x) * 120px);
}
#nav .menu-item h4:hover {
  /* background: #cc002c; A VERY NICE RED*/
  background: var(--nice-red-color);
}
/*ul Styles*/
#nav .menu-item ul {
  background: #eee;
  font-size: 0.9rem;
  line-height: 120%;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding-left: calc(var(--x) * 4px);
  text-align: left;

  /*Animation*/
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  -ms-transition: height 1s ease;
  transition: height 1s ease;
}
#nav .menu-item:hover ul {
  /* max 5 submenus (5 + 1.5em) */
  height: 6.5em;
}
#nav .menu-item ul a {
  text-decoration: none;
  color: rgb(110, 108, 250);
  display: block;
  width: calc(var(--x) * 120px);
}
/*li Styles*/
#nav .menu-item li {
  border-bottom: 1px solid #eee;
}
#nav .menu-item li:hover {
  /* background:  rgb(131, 250, 116); */
  background: var(--title-color);
}

/* USING METHOD#2 in  https://www.parthpatel.net/create-vertical-hover-expandable-menu/  */
#nav1 {
  width: calc(var(--x) * 120px);
  float: right;
  margin-right: calc(var(--x) * 4px); /* to avoid bottom scroll bar */
}
#nav1 ul,
#nav1 li,
#nav1 a {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
#nav1 a {
  font-size: 0.9rem;
  font-weight: 500;
}
#nav1 li ul li a:hover {
  background-color: var(--title-color);
}
#nav1 > li > h4 > a {
  text-decoration: none;
  display: block;

  color: var(--title-color);
  font-size: 0.9em;
  font-weight: 500;
  padding: calc(var(--x) * 1px) calc(var(--x) * 4px);
  background: var(--header-footer-color);
  border-bottom: 1px solid var(--title-color);
  width: calc(var(--x) * 120px);
  text-align: right;
}
#nav1 > li > h4 > a:hover {
  background: #cc002c;
}
#nav1 li ul li a {
  display: block;

  background: #eee;
  font-size: 0.9rem;
  line-height: 120%;
  text-decoration: none;
  color: rgb(110, 108, 250);
  display: block;
  width: calc(var(--x) * 120px);
  padding-left: calc(var(--x) * 4px);
  text-align: left;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
  display: none;
}