.create-container{
  display: flex;
  flex-wrap: wrap;
}
.create-box-container {  flex-basis: 50%; }
.create_box { background: var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); padding: 1em;  }

#create_message { height:60px; }
#create_map { height:100px; }



#create_invite_div { display:none; }
.create_errors {display:none; border-radius:3px; margin-right:1px; margin-left:1px; padding-right:6px; padding-left:6px;}

#games_notfound { margin:0 auto; margin-top:50px; margin-bottom:50px; max-width:500px; padding:50px;  text-align:center;  border:1px solid #CCCCCC; border-radius:3px; }

.gamelist_waiting { margin:0 auto; margin-top:50px; width:500px; padding:50px;  text-align:center}

.player_color { display:inline-block; width:22px; height:22px; vertical-align:middle; border-radius:11px;}


.game-row {
  border-left: 4px solid var(--bs-border-color);
}
/* .game-row:hover .game-row__name {
  filter: brightness(120%);
} */
.game-row--state-0 {
  border-left-color: var(--state-0-color);
}
.game-row--state-1 {
  border-left-color: var(--state-1-color);
}
.game-row--state-2,
.game-row--state-3 {
  border-left-color: var(--state-2-color);
}
.game-row--your-turn {
  /* border-left-color: var(--np-magenta) !important; */
  /* rosa: #fff0f5 */ /* rosa chiarissimo: FFF9FA */ /* giallina; fffef2 */

  /* border-left-color: var(--state-1-color) !important; */
  background-color: #66bb6a12 !important;
}

.game-row__map {
  width:80px;
  height:48px;
  object-fit:cover;
}

.game-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-body-color);
}

.game-row__game-info {
  order: 1;
}
.game-row__alert-icons,
.game-row__options-container,
.game-row__num-players-container,
.game-row__map-container {
  order: 50;
}

/** Elementi che si nascondono su schermi piccoli, a meno che non sia la lista join */
.game-row__num-players-container,
.game-row__options-container,
.game-row__game-info__timeout {
  display: flex;
  align-items: center;
}

.game-row-flag-container {
  width:32px;
  height:32px;
}
.game-row-alert-container {
  width:40px;
  height:40px;
}


#lasteventsdiv > div { height: 3em; line-height: 3em; flex-shrink: 0; }
.lasteventscont {
  position: relative;
  flex: 1;
  margin-left: 1em;
  overflow: hidden;
  height: 3em;
}
.lasteventscont span {
  position: absolute;
  inset: 0;
  /* display: flex; */
  /* align-items: center; */
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  white-space: nowrap;
}
.lasteventscont span.active {
  opacity: 1;
  pointer-events: auto;
}


#please_donate { margin: 14px; border:1px solid #CCCCCC; padding:14px; font-size: large; border-radius:6px; background: #F4F4F4}



@media screen and (max-width: 767px) {
  .create-container{
    flex-direction: column;
  }
  .game-row__map {
    width:48px;
  }
  .game-row-alert-container {
    width:32px;
    height:32px;
  }

  /* Negli schermi piccoli, il numero di giocatori si vede nella lista join */
  .game-row__num-players-container,
  .game-row__options-container,
  .game-row__game-info__timeout {
    display: none;
  }
  .game-list--join .game-row__num-players-container,
  .game-list--join .game-row__options-container,
  .game-list--join .game-row__game-info__timeout {
    display: flex;
  }

  /** Metto il nome della partita a 100% e il container con flex-wrap, solo per la lista join */
  .game-list--join .game-row {
    flex-wrap: wrap;
    /* justify-content: end; */
  }
  .game-list--join .game-row__game-info {
    width: 100%;
  }
  .game-list--join .game-row__map-container {
    order: 10
  }
  .game-list--join .game-row__num-players-container {
    order: 20
  }
}


/* css mobile */
@media all and (max-width: 480px) {
    #gamelist .partita_item .gamelist_name { width:80%; }
    #gamelist .partita_item .gamelist_name .namename { font-size:1.1em;font-weight:normal; }
   #gamelist .gamelist_header { display:none}     
   .pezzi_extra { display:none }
}

@media all and (min-width: 480px) and (max-width: 959px) {
   #gamelist .partita_item .gamelist_name { width:340px; }
   #gamelist .gamelist_header { display:none}
   #gamelist .PIvuoto { border-left:0;}
   #gamelist .partita_item .gamelist_map { padding-top: 0.5em; }   
   .pezzi_extra { font-size:0.9em; }
   .pezzi_extra div { width:auto; border-top:1px solid #ddd; line-height: normal;  padding-top:0.5em; padding-bottom:0.5em;}     
}

@media all and (min-width: 480px) {
  .game-row__name {
    font-size: 1.25rem;
  }
}

@media all and (min-width: 959px) {
  .game-row__options-container {
    min-width: 175px;
  }
}