/*
PALETTE
white: FDFEFF
cream: F5EEE8
orange: D97344
dark: 31333E
dark lighter: 43444D
dark lightest: 56565E // 585865
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

body {
  color: #FDFEFF;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.001em;
  /* min-height: 100%; */
  padding-top: .1rem;
  overflow-x: hidden;
}

.hide {
  display: none;
}

table, th, td {
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

.Absolute-Center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align:middle;
  width: 100%;
  height: 200px;
}

.game {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align:top;
  min-width: 1000px;
  min-height: 500px;
}


.game-board{
 display: grid;
 justify-content: center;
 background: url("/img/map/Mars_2_0.jpg");
 background-size: cover;

 grid-template-columns:
      minmax(calc(calc(100% - 980px) / 2), 10px)
      20px repeat(24,  40px)
      minmax(calc(calc(100% - 980px) / 2), 10px);

 grid-template-rows: 30px repeat(12,40px) 10px;
}

.game-cards{
 display: grid;
 justify-content: center;
 grid-template-columns:
      minmax(calc(calc(100% - 980px) / 2), 10px)
      repeat(5,  150px)
      30px
      200px
      minmax(calc(calc(100% - 980px) / 2), 10px);

 grid-template-rows: 10px 200px 10px;

}

.wall{
  background-color:gray;
}
.twall{
  background-color:gray;
  text-align: center;
  font-weight: bold;
  color: white;
  padding-top: 30%;
}
.side{
  background-color:gray;
  text-align: right;
  padding-right: 2px;
  padding-top: 50%;
  font-weight: bold;
  color: white
}

.box {
/* background-color: #d9d9d920; */
 border: 1px solid gray;
}


.i1, .i2, .i3, .i4, .i5, .i6, .i7, .i8, .i9{
/*    content:url("/img/icons/1.png");   */
    background-repeat: no-repeat;
    background-size:70%;
    background-position: center;
}

.i1{   background-image:url('/img/icons/1.svg');}
.i2{   background-image:url('/img/icons/2.svg');}
.i3{   background-image:url('/img/icons/3.svg');}
.i4{   background-image:url('/img/icons/4.svg');}
.i5{   background-image:url('/img/icons/5.svg');}
.i6{   background-image:url('/img/icons/6.svg');}
.i7{   background-image:url('/img/icons/7.svg');}
.i8{   background-image:url('/img/icons/8.svg');}
.i9{   background-image:url('/img/icons/9.svg');}

.Welcome{
    /*background: #ffffb050;*/
    background-color: #fdfeff50;
    width: 320px;
    padding: 10px 10px 10px 10px;
    /*border: 5px solid #ae5546;*/
    border-radius: 25px;
}

#chatBig{
    text-align: left;
}

.chat{

    background: #ffffb050;
    height: 350px;
    width: 320px;
    padding: 20px 10px 10px 10px;
    border: 5px solid #ae5546;
    border-radius: 25px;
    min-width: 280px;
    margin: 10px;

}

#ChatMessages{
    padding-top: 10px;
    text-align: left;
    /*

    position: absolute;
	left: 250px;
	top: 120px;	    */

}


.prev-avatarsel, .next-avatarsel {
    background-color: #703f44;
    border: none;
    border-radius: 50%;
    color: #FFF;
    position: absolute;
    top: calc(50% - 20px);
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prev-avatarsel {
    left: 20px;
}
.next-avatarsel {
    right: 20px;
}


.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #703f43;
  border: none;
  color: #FFFFFF;
  position: relative;
  text-align: center;
  font-size: 16px;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}




.NewGame{
    width: 100%;
    height: 100px;
    display: none;
}





#AvailablePlayers{font-size:19px;font-weight:normal;}


.UserNameS{color:#703f43;}
.UserNameS:hover{text-decoration: underline;cursor: pointer;}