#ajout {
  margin: auto;
  margin-top: 30px;
  width: fit-content;
  text-align: center;
}

.joueur {
  cursor: pointer;
  font-size: 10px;
  width: 14.28%;
  padding:0px;
}

.dotted {
  border-style: dashed;
  border-radius: 3px;
  border-color: black;
  box-shadow: 2px 2px 2px grey;
}

.hautbas {
  height: 90px;
  width: 240px;
  margin: auto;
}

.milieu {
  height: 180px;
  width: 240px;
  margin: auto;
}

#selectdiv {
  display: none;
  overflow: auto;
}

.actif {
  background-color: lightgreen;
}

.imgcarte {
  width: 120px;
  height: 180px;
  margin: 5px;
}

.imggrotte {
  width: 180px;
  height: 120px;
  margin: 5px;
}

.imgfamille {
  width: 50px;
  height: 50px;
  margin: 5px;
}

.imgbadge {
  width: 50px;
  height: 50px;
  margin: 5px;
}

.imggauche {
  width: 60px;
  height: 180px;
  margin: 5px;
}

.imgdroit {
  width: 60px;
  height: 180px;
  margin: 5px;
}

.imghaut {
  width: 120px;
  height: 90px;
  margin: 5px;
}

.imgbas {
  width: 120px;
  height: 90px;
  margin: 5px;
}

.imggauchesm {
  display: inline-block;
  width: 60px;
  height: 180px;
  margin: 0px;
  vertical-align: middle;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.imgdroitsm {
  display: inline-block;
  width: 60px;
  height: 180px;
  margin: 0px;
  vertical-align: middle;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.imghautsm {
  display: inline-block;
  width: 120px;
  height: 90px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.imgbassm {
  display: inline-block;
  width: 120px;
  height: 90px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.imgcartesm {
  width: 120px;
  height: 180px;
  margin: 0px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
  border-radius: 10px;
}

.ensemble {
  display: inline-block;
  margin: 10px;
  text-align: left !important;
  overflow-x: scroll;
  white-space: nowrap;
}

.ensemble:hover {
  background: rgb(167, 243, 159);
}

.grise {
  -webkit-filter: grayscale(100%);
  filter: greyscale(100%);
}

.grise :hover {
  background: rgb(67, 3, 3);

  -webkit-filter: grayscale(100%);
  filter: greyscale(100%);
}

#table {
  margin-top: 10px;
  width: fit-content;
  min-width: 100%;
  min-height: 180px;
  overflow-x: scroll;
  background-color: rgb(27, 112, 27);
  border-radius: 10px;
  border: 5px rgb(27, 112, 27) solid;
  box-shadow: 10px 5px 5px grey;
}

#main {
  margin-top: 10px;
  width: fit-content;
  min-width: 100%;
  min-height: 180px;
  overflow-x: scroll;
  background-color: rgb(180, 229, 180);
  border-radius: 10px;
  border: 5px forestgreen solid;
  box-shadow: 10px 5px 5px grey;
}

#piocheclairiere {
  display: flex;
  background-color: rgb(66, 112, 66);
  border-radius: 10px;
  border: 5px forestgreen solid;
  box-shadow: 10px 5px 5px grey;
  min-width: 100%;
}

#divhiver {
  display: flex;
  background-color: rgb(183, 246, 249);
  border-radius: 10px;
  border: 5px rgb(72, 87, 251) solid;
  box-shadow: 10px 5px 5px grey;
  min-width: 100%;
  margin-bottom: 10px;
}

#alertetroll {
  display: flex;
  background-color: rgb(168, 101, 57);
  border-radius: 10px;
  border: 5px rgb(43, 24, 2) solid;
  box-shadow: 10px 5px 5px grey;
  min-width: 100%;
  margin-bottom: 10px;
  color:white;
}

#pioche {
  display: inline-block;
  margin-top: 10px;
  width: 100px;
  min-height: 220px;
  position: absolute;
}

#clairiere {
  display: inline-block;
  margin-top: 10px;
  margin-left: 130px;
  width: fit-content;
  min-height: 220px;
  overflow-x: scroll;
}

#pagescore {
  top: 20px;
  width: fit-content;
  min-width: 80%;
  min-height: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: rgb(160, 243, 160);
  display: none;
  z-index: 100;
  position: relative;
  text-align: center;
  margin: auto;
  border-radius: 10px;
  border: 3px black dotted;
}

#tableauscore {
  background-color: rgb(160, 243, 160);
}

#nomjoueur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 300px;
  height: 200px;
  border: 2px solid black;
  border-radius: 10px;
  margin: auto;
  text-align: center;
  background-color: white;
  z-index: 100;
}

#nouvellepartie {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 300px;
  height: 500px;
  border: 2px solid black;
  border-radius: 10px;
  margin: auto;
  text-align: center;
  background-color: white;
  z-index: 100;
  display: none;
  overflow-y: scroll;
}

#grotte {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 300px;
  height: 300px;
  border: 2px solid black;
  border-radius: 10px;
  margin: auto;
  text-align: center;
  background-color: white;
  z-index: 100;
}

#masque {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  background-color: grey;
  display: none;
  z-index: 1;
  font-size: xx-large;
  font-weight: bold;
}

#nompartie {
  position: fixed;
  text-align: center;
  top: 10px;
  left: 0px;
  width: 100%;
  font-size: smaller;
  z-index: 1;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  border: 2px solid black;
  background-color: lightgreen;
  transition: all 0.2s ease-out;
}

#choixjoueur {
  position: fixed;
  text-align: center;
  top: 10px;
  left: 0px;
  width: 100%;
  font-size: smaller;
  z-index: 1;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  border: 2px solid black;
  background-color: lightgreen;
  transition: all 0.2s ease-out;
  display:none;
}

#choixgrotte {
  position: absolute;
  text-align: center;
  top: 10px;
  left: 0px;
  width: 100%;
  font-size: smaller;
  z-index: 1;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  border: 2px solid black;
  background-color: lightgreen;
  transition: all 0.2s ease-out;
  display:none;
  overflow:auto;
}

#error {
  position: fixed;
  top: -120px;
  transition: all 0.5s ease-out;
}

#success {
  position: fixed;
  top: -120px;
  transition: all 0.5s ease-out;
}

#menufm {
  position: fixed;
  top: -500px;
  transition: all 0.2s ease-out;
  text-align: left;
  background-color: white;
  border: 2px solid black;
  z-index: 100;
  margin: 5px;
  border-radius: 5px;
  padding: 5px;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
}

#aide {
  position: absolute;
  top: -5800px;
  transition: all 0.2s ease-out;
  text-align: left;
  background-color: white;
  border: 2px solid black;
  z-index: 100;
  margin: 5px;
  border-radius: 5px;
  padding: 5px;
  text-decoration: none;
  cursor: pointer;
  font-size: 12px;
  height: 80%;
  overflow-y: scroll;
}

.arbre {
  background-color: forestgreen;
  color: white;
  width: 100%;
  margin: 5px;
  font-weight: bold;
  border-radius: 4px;
}
.grotte {
  background-color: rgb(41, 49, 41);
  color: white;
  width: 100%;
  margin: 5px;
  font-weight: bold;
  border-radius: 4px;
}

.invisible {
  display:none;
}

.visible {
  display:block;
}

.cartemilieu {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 180px;
}

.moitiecarteHB {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 90px;
}

.moitiecarteGD {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 180px;
}

.iconearbre {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 15px;
  height: 15px;
}

.iconemulti {
  position: absolute;
  right: 13px;
  bottom: 5px;
  width: 15px;
  height: 15px;
}
.cartemain {
  width: 120px;
  height: 180px;

  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.cartemainzoom {
  width: 180px;
  height: 270px;

  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.info{
  display: inline-block;
}

.bulleinfo {
  position:fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: antiquewhite;
  border-radius: 10px;
  padding:30px;
}

.itemmenu {
  width:100%;
  padding:10px;
  margin:10px;
}

#aide {
  position:fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width:80%;
  z-index: 100;
  background-color: antiquewhite;
  border-radius: 10px;
  padding:5px;
}


.divcartemain {
  width: 120px;
  height: 180px;
  margin: 10px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
  display: inline-block;
}

.divcartemainpousse {
  width: 60px;
  height: 90px;
  margin: 10px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
  display: inline-block;
  z-index: 10;
}

.nonjouable {
  cursor: not-allowed;
}

.carteclairiere {
  width: 120px;
  height: 180px;
  margin: 10px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.cartepioche {
  width: 120px;
  height: 180px;
  margin: 10px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
  text-align: left;
}


.imghiver {
  height: 50px;
  margin:10px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

.imglog {
  height: 50px;
  margin:10px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
}

#info {
  background-color: white;
  max-height: 40vh !important;
  overflow-y: scroll;
  cursor: pointer;
}

.jouable {
  cursor: grab;
  border: dashed darkred;
}

.log {
  font-size: 10px;
  font-weight: normal;
}

.cartegauche {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 180px;
  cursor: grab;
  border: dashed darkred;
}

.cartegaucheimpossible {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 180px;
  cursor: not-allowed;
}

.cartedroit {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 180px;
  cursor: grab;
  border: dashed darkred;
  margin-left: 60px;
}

.cartedroitimpossible {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 180px;
  cursor: not-allowed;
  margin-left: 60px;
}
.cartehaut {
  position: absolute;
  display: inline-block;
  width: 120px;
  height: 90px;
  cursor: grab;
  border: dashed darkred;
}

.cartehautimpossible {
  position: absolute;
  display: inline-block;
  width: 120px;
  height: 90px;
}

.cartebas {
  position: absolute;
  display: inline-block;
  width: 120px;
  height: 90px;
  cursor: grab;
  border: dashed darkred;
  margin-top: 90px;
}

.cartebasimpossible {
  position: absolute;
  display: inline-block;
  width: 120px;
  height: 90px;
  cursor: not-allowed;
  margin-top:60px;
  z-index: 10;
}

.cartepousse {
  width: 60px;
  height: 90px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
  z-index: 0;
}

.cartemainpousse {
  width: 60px;
  height: 90px;
  box-shadow: 3px 3px 3px rgb(47, 47, 47);
  cursor: grab;
  border: dashed darkred;
  position: absolute;
  z-index: 10;
}

.paiement {
  cursor: grab;
  border: dashed rgb(90, 66, 224);
  border-radius: 10px;
}

.paiementplus {
  cursor: grab;
  border: dashed rgb(242, 39, 4);
  border-radius: 10px;
}

.nbpioche {
  position: absolute;
  top: 80px;
  left: 54px;
  font-size: 30px;
  font-weight: bold;
  margin: auto;
  cursor:grab;
}

#bug {
  cursor: pointer;
  color:red;
  font-weight: bold;
  display: inline-block;
}

.green {
  color : green;
}

.red {
  color : red;
}

#controls {
  margin-top: 20px;
}

#pauseButton {
  display:none;
}

#formats {
  display:none;
}