/*
 * Base structure
 */

@font-face {
  font-family: 'BowlByOne';
  src: url('../fonts/BowlbyOneSC-Regular.ttf') format('truetype')
}

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  font-family: Verdana, sans-serif;
  background:radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  font-size: 14px;
  width: 100%;
  height: 100%;
  margin:0;
}

a, a:visited{
  color: rgb(7 75 15);
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: rgb(13 112 25);
  text-decoration: none;
}

.table-organise-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px;
  padding: 3px 0;
}

.lancement-serveur-zone {
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(16 46 8 / 30%) 20%, rgb(20 55 11 / 36%) 57%, rgb(20 70 7 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.zone-session-joueur {
  padding-top:40px;
}

.zone-session-joueur-inner-lien {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  color:black;
}

.zone-session-joueur-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:bold;
  height: 26px;
  width:100%;
  cursor: pointer;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.zone-session-joueur-inner:hover {
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(16 46 8 / 30%) 20%, rgb(20 55 11 / 36%) 57%, rgb(20 70 7 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.zone-left-inner {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.zone-left-inner-logo {
  display:flex;
  margin-top:5px;
}

.inventaire-principale-ressource {
  display: flex;
  justify-content: center;
}

.inventaire-principale-ressource-inner {
  display: flex;
  align-items: center;
  width: 380px;
  padding: 2px 4px;
  margin-bottom: 5px;
  font-weight: bold;
  justify-content: space-evenly;
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
}

.inventaire-principale-ressource-ligne {
  display:flex;
}

.zone-left-inner-ressources {
  position:relative;
  height:261px;
  width:250px;
  background: url(../images/NAWimagesImportante/Cadre_Grand-2.png?1) no-repeat left bottom;
  background-size: cover !important;
  padding: 19px 28px 5px 28px;
  margin-top:5px;
  z-index: 2000;
}

.zone-left-inner-ressources-bottom {
  position:relative;
  height:246px;
  width:236px;
  background: url(../images/NAWimagesImportante/Cadre_Grand-2.png?1) no-repeat left bottom;
  background-size: cover !important;
  padding: 18px 28px 5px 28px;
  margin-top:5px;
  z-index: 2000;
}

.espace-ressources {
  position:relative;
  padding-top:2px;
}

.zone-stockage-ressource {
  position: absolute;
  top: -3px;
  left: -2px;
  z-index: -1;
  height: 10px;
  width: 174px;
}

.zone-stockage-ressource-bottom {
  position: absolute;
  bottom: -5px;
  left: -2px;
  z-index: -1;
  height: 10px;
  width: 174px;
}

.progress-bar-green {
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
}
.progress-bar-red {
  background: radial-gradient(ellipse at top, #e43535, #00000029), radial-gradient(ellipse at bottom, #4e0000, #00000082);
}
.progress-bar-orange {
  background: radial-gradient(ellipse at top, #f78948, #00000029), radial-gradient(ellipse at bottom, #f56420, #00000082);
}

.zone-mot-de-passe-oublie {
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 4px;
}

.zone-left-inner-ressources-titre {
  display:flex;
  align-items: center;
  justify-content: space-around;
  position:absolute;
  height:32px;
  width:136px;
  top: -10px;
  left: 51px;
  color:rgb(242, 232, 220);
  background: url(../images/NAWimagesImportante/Box_titre.png?1) no-repeat left bottom;
}

.zone-left-inner-info {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  height: 120px;
  width: 236px;
  background: url(../images/NAWimagesImportante/Cadre_S.png?1) no-repeat left bottom;
  background-size: cover !important;
  padding:5px 22px 7px 27px;
  margin-top:8px;
  z-index: 2000;
}
.zone-left-inner-info-bottom {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  height: 120px;
  width: 236px;
  background: url(../images/NAWimagesImportante/Cadre_S.png?1) no-repeat left bottom;
  background-size: cover !important;
  padding:5px 22px 7px 27px;
  margin-top:8px;
  z-index: 2000;
}

.zone-left-inner-info-fin-jeu {
  height: 120px;
  width: 236px;
  background: url(../images/NAWimagesImportante/Cadre_S.png?1) no-repeat left bottom;
  background-size: cover !important;
  padding:5px 22px 7px 27px;
  margin-top:15px;
  z-index: 2000;
  cursor: pointer;
}

.zone-left-inner-info-fin-jeu-bottom {
  height: 120px;
  width: 236px;
  background: url(../images/NAWimagesImportante/Cadre_S.png?1) no-repeat left bottom;
  background-size: cover !important;
  padding:5px 22px 7px 27px;
  margin-top:15px;
  z-index: 2000;
  cursor: pointer;
  left: 10px;
}

.zone-left-inner-info-content-fin-jeu {

}

.zone-left-inner-info-content {
}

.zone-menu-jeu {
  position: fixed;
  top: 0;
  background:url('../images/NAWimagesImportante/Menu_du_Haut.png?1') no-repeat left bottom !important;
  background-size: cover !important;
  width: 100%;
  height: 50px;
  z-index: 3000;
  box-shadow: 0px 2px 14px 5px rgb(53 30 16);
}

.table-map {
  max-height: 450px;
  overflow-y: scroll;
  max-width: 450px;
  overflow-x: scroll;
}

.zone-menu-jeu-bas {
  position: fixed;
  bottom: 0;
  background:url('../images/NAWimagesImportante/Menu_du_Haut.png?1') no-repeat left bottom !important;
  background-size: cover !important;
  width: 100%;
  height: 50px;
  z-index: 3000;
  box-shadow: 0px 2px 14px 5px rgb(53 30 16);
}

.zone-menu-jeu-mobile {
  width: 100%;
}

.link-title-normal-skin {
  text-decoration: none !important;
  color: #f2e8dc !important;
}


.link-title-normal-skin-ig {
  text-decoration: none;
  color: #f2e8dc;
  cursor: pointer;
}

.link-content-normal-skin {
  text-decoration: underline;
  color: #f2e8dc;
}

.link-title-normal-skin:hover, link-title-normal-skin:focus, link-title-normal-skin:active, link-title-normal-skin:visited {
  text-decoration: none !important;
  color: #c3a98a !important;
}

.link-title-normal-skin-ig:hover, link-title-normal-skin-ig:focus, link-title-normal-skin-ig:active, link-title-normal-skin-ig:visited {
  text-decoration: none !important;
  color: #c3a98a;
}

.link-content-normal-skin:hover, link-content-normal-skin:focus, link-content-normal-skin:active, link-content-normal-skin:visited {
  text-decoration: underline;
  color: #c3a98a;
}

.zone-menu-jeu-inner {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

.zone-menu-titre {
  font-family: 'BowlByOne', sans-serif;
  color: #f2e8dc;
  font-size: 22px;
}

.zone-prerequis-unite {
  height:100px;
  padding-top:5px;
  font-size:13px;
}

.zone-menu-ig-titre {
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:50px;
  width:180px;
  font-family: 'BowlByOne', sans-serif;
  color: #f2e8dc;
  font-size: 14px;
}

.zone-menu-ig-titre:hover, .zone-menu-ig-titre:active {
  background-color: #4c363663;
  z-index:1;
}

.zone-menu-ressource-open-mobile {
  display:flex;
}

.info-recolte-capacite-recolte {
  font-style: italic;
  font-size: 10px;
}
@media (min-width: 992px) {
  .zone-menu-ressource-open-mobile {
    display:none;
  }

  .info-recolte-capacite-recolte {
    font-style: italic;
    font-size: 12px;
  }
}

.logo-categorie {
  height: 25px;
}

.menu-categorie-main-inner-logo {
  position:relative;
}

.menu-categorie-main-inner-title {
}

.menu-sous-categorie-main {
  position:absolute;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height:180px;
  width:405px;
  /*background-color:rgb(242 223 195);*/
  background:url('../images/NAWimagesImportante/Menu_Deroulant_180_405.png?1') no-repeat left bottom;
  color: #000;
  font-size: 12px;
  font-weight:500;
  top: 50px;
  left: 50%;
  transform: translate(-50%);
  z-index:2000;
  font-family: Verdana, sans-serif;
}

.menu-sous-categorie-main-bas {
  position:absolute;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /*flex-direction: column-reverse;*/
  height:180px;
  width:405px;
  /*background-color:rgb(242 223 195);*/
  background:url('../images/NAWimagesImportante/Menu_Deroulant_180_405_inv.png?1') no-repeat left bottom;
  color: #000;
  font-size: 12px;
  font-weight:500;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%);
  z-index:2000;
  font-family: Verdana, sans-serif;
}

.menu-sous-categorie-main-xl {
  position:absolute;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height:240px;
  width:405px;
  /*background-color:rgb(242 223 195);*/
  background:url('../images/NAWimagesImportante/Menu_Deroulant_240_405.png?1') no-repeat left bottom;
  color: #000;
  font-size: 12px;
  font-weight:500;
  top: 50px;
  left: 50%;
  transform: translate(-50%);
  z-index:2000;
  font-family: Verdana, sans-serif;
}

.menu-sous-categorie-main-xl-bas {
  position:absolute;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /*flex-direction: column-reverse;*/
  height:240px;
  width:405px;
  /*background-color:rgb(242 223 195);*/
  background:url('../images/NAWimagesImportante/Menu_Deroulant_240_405_inv.png?1') no-repeat left bottom;
  color: #000;
  font-size: 12px;
  font-weight:500;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%);
  z-index:2000;
  font-family: Verdana, sans-serif;
}

.rc-titre-tres-grand {
  margin: 5px 0 10px 0;
  font-size: 15px;
  font-weight: bold;
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
}

.rc-titre-grand {
  font-size: 13px;
  font-weight: bold;
}

.logo-ressource-14 {
  height:14px;
}

.logo-ressource-16 {
  height:16px;
}

.logo-ressource-17 {
  height:17px;
}

.logo-ressource-18 {
  height:18px;
}

.logo-ressource-20 {
  height:20px;
}

.logo-ressource-22 {
  height:22px;
}

.logo-ressource-24 {
  height:24px;
}

.logo-ressource-26 {
  height:26px;
}

.logo-ressource-30 {
  height:30px;
}

.logo-ressource-60 {
  height:60px;
}

.logo-ressource-160 {
  height:160px;
}

.logo-ressource-250 {
  height:250px;
}

@media (max-width: 992px) {
  .logo-ressource-24 {
    height:16px;
  }

  .lancement-serveur-zone {
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-height: 940px) {
  .lancement-serveur-zone {
    margin-top: 60px;
  }
}

.mouvement-titre {
  background-color: rgb(214 182 140) !important;
  font-weight: bold;
}

.cadreModernMouvement {
  position:relative;
  width:100%;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 4px;
}

.cadre-plein-centre-base {
  display: flex;
  flex-direction: column;
  position:relative;
  background-size: cover !important;
}

.cadre-plein-centre-base-grand {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  height: 100%;
  width: 100%;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 4px;
  padding: 60px 25px 40px 25px;
  margin-top: 30px;
  border-radius: 4px;
}

.cadre-plein-centre-s-l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position:relative;
  background-size: cover !important;
  height: 500px;
  width: 900px;
  background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_900.png?1') no-repeat left bottom;
  padding: 60px 60px 40px 60px;
  margin-top: 30px;
}

.cadre-plein-centre-m-l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position:relative;
  background-size: cover !important;
  height: 650px;
  width: 900px;
  background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_650_900.png?1') no-repeat left bottom;
  padding: 60px 60px 40px 60px;
  margin-top: 30px;
}

.cadre-plein-centre-l-l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position:relative;
  background-size: cover !important;
  height: 800px;
  width: 900px;
  background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_800_900.png?1') no-repeat left bottom;
  padding: 60px 60px 40px 60px;
  margin-top: 30px;
}

.cadre-plein-centre-xxl-xxl {
  background:url('../images/NAWimagesImportante/Cadre_Centre_1400_1100.png?1') no-repeat left bottom;
  height:1400px;
  width:1100px;
  padding:60px 60px 40px 60px;
  margin-bottom: 20px;
  margin-top: 30px;
}

.cadre-plein-centre-titre, .cadre-demi-centre-titre {
  display: flex;
  justify-content: center;
  position:absolute;
  height:75px;
  width:280px;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  padding-top:18px;
  font-family: 'BowlByOne', sans-serif;
  color: #f2e8dc;
  font-size: 20px;
  background:url('../images/NAWimagesImportante/Bouton_Inscription_1.png?1') no-repeat left bottom;
  background-size: cover !important;
}

.input-modern-joueur {
  min-width: 120px !important;
  width: 120px !important;
}

.cadre-plein-centre-base-titre {
  display: flex;
  justify-content: center;
  position:absolute;
  height:75px;
  width:280px;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
  padding-top:18px;
  font-family: 'BowlByOne', sans-serif;
  color: #f2e8dc;
  font-size: 20px;
  background:url('../images/NAWimagesImportante/Bouton_Inscription_1.png?1') no-repeat left bottom;
  background-size: cover !important;
}

.cadre-demi-centre-petit {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
  background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_280_1100.png?1') no-repeat left bottom;
  background-size: cover !important;
  height:280px;
  width:1100px;
  padding:78px 40px 40px 45px;
  margin-bottom: 20px;
  margin-top: 30px;
}

.cadre-demi-centre-moyen {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
  background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_410_1100.png?1') no-repeat left bottom;
  background-size: cover !important;
  height:410px;
  width:1100px;
  padding:78px 40px 40px 45px;
  margin-bottom: 20px;
  margin-top: 30px;
}

.cadre-demi-centre-moyen-bis {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
  background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_Bis_310_1100.png?1') no-repeat left bottom;
  background-size: cover !important;
  height:310px;
  width:1100px;
  padding:78px 40px 40px 45px;
  margin-bottom: 20px;
  margin-top: 30px;
}

.cadre-demi-centre {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
  background:url('../images/NAWimagesImportante/Cadre_Reine_Plat.png?1') no-repeat left bottom;
  background-size: cover !important;
  height:400px;
  width:1100px;
  padding:78px 40px 40px 45px;
  margin-bottom: 20px;
}

.cadre-demi-centre-inner {
  overflow-y: auto;
  height:100%;
  width:100%;
}

.cadre-demi-centre-second {
  width:100%;
  /*display:flex;*/
}

.contour-modern {
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  padding: 5px 5px 5px 5px;
  margin-bottom: 15px;
}

.contour-modern-reine {
  position:relative;
  min-height:360px;
}

.contour-modern-batiment-ressource {
  position:relative;
  min-height:305px;
}

.contour-modern-batiment-installation {
  position:relative;
  min-height:310px;
}

.contour-modern-recherche {
  position:relative;
  min-height:370px;
}

.zones-boutons-outer {
  display:flex;
  justify-content: center;
  align-items: center;
}

.zones-boutons-outer-research {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.temps-evolution-titre {
  background-color: rgb(214 182 140) !important;
  font-weight: bold;
}

.info-supp-demi-centre {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top:20px;
  margin-bottom: 10px;
  font-size: 11px;
  font-style:italic;
}

.info-supp-demi-centre-autre {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin-top:20px;
  font-size: 11px;
  font-style:italic;
}

.info-supp-demi-centre-petit-autre {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin-top:8px;
  font-size: 11px;
  font-style:italic;
}

.cadre-demi-centre-proposition {
  justify-content: normal;
}

.buttons-propositions {
  padding:15px 5px 10px 5px;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mes-propositions-details {
  height:120px;
  overflow-y:auto;
}

.aligner-elements {
  display:flex;
  flex-direction: row;
  align-items: center;
}

.raccourci-messagerie-rapide {
  display: flex;
  position: fixed;
  top: 140px;
  right: 6px;
  height: 40px;
  width: 40px;
  border-color: #d5c9c2;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  z-index: 500;
  justify-content: center;
  background-color: #1c1e22bf;
  align-items: center;
  cursor: pointer;
}

.raccourci-messagerie-rapide-bottom {
  display: flex;
  position: fixed;
  bottom: 70px;
  right: 6px;
  height: 40px;
  width: 40px;
  border-color: #d5c9c2;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  z-index: 500;
  justify-content: center;
  background-color: #1c1e22bf;
  align-items: center;
  cursor: pointer;
}

.raccourci-messagerie-nombre-rapide {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position:absolute;
  top:-4px;
  right:-4px;
  height: 20px;
  width: 20px;
  color:white;
  background: radial-gradient(#d90000, #bf0000,#970000, #9b0000);
  border-color: #940000;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  z-index: 500;
  box-shadow: 0px 1px 3px 1px rgb(153 0 0 / 79%);
  font-size: 11px;
}

.raccourci-switch-colonie-rapide {
  display: flex;
  position: fixed;
  top: 190px;
  right: 6px;
  height: 40px;
  width: 40px;
  border-color: #d5c9c2;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  z-index: 500;
  justify-content: center;
  background-color: #1c1e22bf;
  align-items: center;
  cursor: pointer;
}

.raccourci-info-victoire {
  display: flex;
  position: fixed;
  top: 240px;
  right: 6px;
  height: 40px;
  width: 40px;
  border-color: #d5c9c2;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  z-index: 500;
  justify-content: center;
  background-color: #1c1e22bf;
  align-items: center;
  cursor: pointer;
}

.raccourci-switch-colonie-rapide-bottom {
  display: flex;
  position: fixed;
  bottom: 125px;
  right: 6px;
  height: 40px;
  width: 40px;
  border-color: #d5c9c2;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  z-index: 500;
  justify-content: center;
  background-color: #1c1e22bf;
  align-items: center;
  cursor: pointer;
}

.raccourci-switch-colonie-rapide-colonie-mere {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position:absolute;
  top:-4px;
  right:-4px;
  height: 20px;
  width: 20px;
  z-index: 500;
}

@media (min-width: 992px) {
  .raccourci-messagerie-rapide {
    display:none;
  }
  .raccourci-switch-colonie-rapide {
    display:none;
  }
  .raccourci-messagerie-rapide-bottom {
    display:none;
  }
  .raccourci-switch-colonie-rapide-bottom {
    display:none;
  }
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(153, 122, 82, 0.20) !important;
}

.table-striped>tbody>tr:nth-of-type(odd):first-child {
  background-color: rgba(153, 122, 82, 0.35) !important;
}

.cadreModernXS {
  margin:0 3% 0 3%;
  width:94%;
  background: radial-gradient(ellipse at top, #f3e2c6, #00000029), radial-gradient(ellipse at bottom, #e8cfb0, #00000082);
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreModernS {
  margin:0 3% 0 3%;
  width:94%;
  background: radial-gradient(ellipse at top, #f3e2c6, #00000029), radial-gradient(ellipse at bottom, #e8cfb0, #00000082);
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreModernM {
  margin:0 3% 0 3%;
  width:94%;
  background: radial-gradient(ellipse at top, #f3e2c6, #00000029), radial-gradient(ellipse at bottom, #e8cfb0, #00000082);
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreModernL {
  margin:0 3% 0 3%;
  width:94%;
  background: radial-gradient(ellipse at top, #f3e2c6, #00000029), radial-gradient(ellipse at bottom, #e8cfb0, #00000082);
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreModernXL {
  margin:0 3% 0 3%;
  width:94%;
  background: radial-gradient(ellipse at top, #f3e2c6, #00000029), radial-gradient(ellipse at bottom, #e8cfb0, #00000082);
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreModernXXL {
  margin:0 3% 0 3%;
  width:94%;
  background: radial-gradient(ellipse at top, #f3e2c6, #00000029), radial-gradient(ellipse at bottom, #e8cfb0, #00000082);
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.ecriture-warning {
  color: #d70000;
  font-weight:600;
}

.ecriture-success {
  color: #129000;
  font-weight:600;
}

.textarea-add-proposition {
  height:100px !important;
}

.left-side {
  position: fixed;
}

.zone-reine-ponte {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.zone-reine-prerequis {
  display: flex;
  justify-content: center;
}

.buttons-ponte-vert {
  display: flex;
  height: 44px;
  padding: 5px;
  margin: 6px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  box-shadow: 0px 1px 6px 2px rgba(120, 190, 128, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #274237;
  border-width: 2px;
}

.buttons-ponte-vert {
  display: flex;
  height: 44px;
  padding: 5px;
  margin: 6px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  box-shadow: 0px 1px 6px 2px rgba(120, 190, 128, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #274237;
  border-width: 2px;
}

.buttons-ponte-vert {
  display: flex;
  height: 44px;
  padding: 5px;
  margin: 6px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  box-shadow: 0px 1px 6px 2px rgba(120, 190, 128, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #274237;
  border-width: 2px;
}

.buttons-ponte-vert:hover {
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

.buttons-ponte-rouge {
  display: flex;
  height: 44px;
  padding: 5px;
  margin: 6px;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  box-shadow: 0px 1px 6px 2px rgba(228, 53, 53, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #e43535, #00000029), radial-gradient(ellipse at bottom, #4e0000, #00000082);
  border-color: #4b2323;
  border-width: 2px;
  cursor: not-allowed !important;
}

.buttons-ponte-rouge:hover {
  background-color: #4b2323e6 !important;
  border-color:#4b2323e6 !important;
}

.cadre-principale-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 6px;
}

.cadre-principale-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.display-none-select {
  display:none;
}

.cadre-principale-action-image {
  padding: 12px;
  margin: 5px 10px 2px 10px;
  border-radius: 3px;
}

.action-red {
  box-shadow: 0px 1px 6px 2px rgba(228, 53, 53, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #e43535, #00000029), radial-gradient(ellipse at bottom, #4e0000, #00000082);
  border-color: #4b2323;
  border-width: 2px;
}

.action-red-active {
  color: #f8f4f4 !important;
  background: #4b2323e6 !important;
  border-color: #ffcccc !important;
}

.action-red:hover,.action-red:active,.action-red:focus {
  color: #f8f4f4 !important;
  background-color: #4b2323e6 !important;
  border-color: #ffcccc !important;
}

.action-teal {
  box-shadow: 0px 1px 6px 2px rgba(82, 138, 142, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58acb8, #00000029), radial-gradient(ellipse at bottom, #143740, #00000082);
  border-color: #0a3e36;
  border-width: 2px;
}

.action-teal:hover, .action-teal:active, .action-teal:focus {
  color: #f8f4f4;
  background-color: #0a3e36e6;
  border-color:#c6fff6;
}

.action-teal-active {
  color: #f8f4f4 !important;
  background: #0a3e36e6 !important;
  border-color:#c6fff6 !important;
}

.action-green {
  box-shadow: 0px 1px 6px 2px rgba(120, 190, 128, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #274237;
  border-width: 2px;
}

.action-green:hover, .action-green:active, .action-green:focus {
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color:#adffde !important;
}

.action-green-active {
  color: #f8f4f4 !important;
  background: #375146e6 !important;
  border-color:#adffde !important;
}

.cadre-principale-titre {
  font-size: 10px;
  font-weight: bold;
}

.cadre-action-image {
  height: 16px;
  opacity: 0.87;
}

.lien-rc {
  color:#333 !important;
  cursor:pointer !important;
}

.lien-rc:hover {
  color: #3d3535b3 !important;
  cursor:pointer !important;
}

@media (min-width: 619px) {
  .cadre-action-image {
    height: 50px;
  }
}

.button-aide {
  display: flex;
  width: 150px;
  border-radius: 10px;
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  font-weight: bold;
  padding: 3px;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  margin-left: 5px;
}

.button-mouvement {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  width:500px!important;
  height:35px!important;
  font-size: 14px!important;
  font-weight: 700!important;
  color:rgb(242, 232, 220)!important;
}

.buttons-ponte-gris {
  display: flex;
  height: 44px;
  padding: 5px;
  margin: 6px;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  box-shadow: 0px 1px 6px 2px rgba(163, 147, 147, 0.89);
  border-style: solid;
  background: radial-gradient(ellipse at top, #a39393, #00000029), radial-gradient(ellipse at bottom, #3a2e2e, #00000082);
  border-color: #4f4242;
  border-width: 2px;
  cursor: not-allowed !important;
}

.buttons-ponte-gris:hover {
  background-color: #4f4242e6;
  border-color: #4f4242;
}

#information,
#gestion,
#actionPremium,
#infoCalendrier,
#classementkill,
#comptepremium,
#concoursparrainage,
#informationduel,
#aideJoueur,
#inventaireObjet,
#conseilQuete,
#informationDon,
#informationDon1,
#informationDon2,
#info-mouvement,
#infoCompte {
  position:absolute;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  min-width:350px;
  max-width:500px;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  padding: 12px 8px 3px 8px;
  color: black;
  text-align: left;
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
  z-index:2000;
}

.info-gain-xp-alliance-titre {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.info-gain-xp-alliance-ligne {
  display: flex;
  justify-content: space-between;
  font-size:12px;
}

.close-information, .close-information-right {
  position: fixed;
  display: flex;
  top: 4px;
  left: 5px;
  height: 32px;
  width: 32px;
  padding: 2px;
  margin: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgb(56 32 21 / 85%);
  box-shadow: 0 0 4px 1px rgb(20 24 20 / 79%);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 15;
}

.inner-aide-info {
  margin-top:30px;
  overflow-y: auto;
  max-height: 500px;
}

@media (max-width: 991px) {
  .left-side {
    position: relative;
  }

  .button-aide {
    display: flex;
    width: 125px;
  }
}

.zone-milieu-curseur {
  display: flex;
  height: 7px;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 1px;
  color: #ff0000;
  z-index: -5;
}

.close-sous-menu {
display: none;
}

.open-sous-menu {
display: flex;
}

.menu-sous-categorie-lien {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color:rgba(37, 23, 4, 1) !important;
}

.menu-sous-categorie-lien:hover {
  height:60px;
  width:135px;
  text-decoration: none;
  color: #f2e8dc !important;
  background:url('../images/NAWimagesImportante/Background_hover_sous_menu_60_135.png?1') no-repeat left bottom;
}

.menu-sous-categorie-main-inner {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 135px;
}

@media (min-width: 1200px) and (max-width: 1500px) {

  .input-modern-joueur {
    min-width: 120px !important;
    width: 120px !important;
  }

  .cadre-demi-centre-petit {
    background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_300_901.png?1') no-repeat left bottom;
    height:300px;
    width:901px;
    padding:78px 40px 40px 45px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-demi-centre-moyen {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_410_901.png?1') no-repeat left bottom;
    height:410px;
    width:901px;
    padding:78px 40px 40px 45px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-demi-centre-moyen-bis {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_Bis_340_901.png?1') no-repeat left bottom;
    height:340px;
    width:901px;
    padding:78px 40px 40px 45px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-plein-centre-xxl-xxl {
    background:url('../images/NAWimagesImportante/Cadre_Centre_1310_901.png?1') no-repeat left bottom;
    height:1310px;
    width:901px;
    padding:45px 60px 40px 60px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-plein-centre-s-l {
    height: 500px;
    width: 900px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_900.png?1') no-repeat left bottom;
    padding: 60px 30px 30px 30px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-plein-centre-m-l {
    height: 650px;
    width: 900px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_650_900.png?1') no-repeat left bottom;
    padding: 60px 30px 30px 30px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-plein-centre-l-l {
    height:800px;
    width:800px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_800_800.png?1') no-repeat left bottom;
    padding: 60px 30px 30px 30px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-plein-centre-base-grand {
    padding: 60px 25px 30px 25px;
    margin-bottom: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {

  .input-modern-joueur {
    min-width: 100px !important;
    width: 100px !important;
  }

  .zone-menu-ig-titre {
    font-size: 12px;
    font-weight: 600;
    font-family: Verdana, sans-serif;
  }

  .cadre-demi-centre-petit {
    background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_295_710.png?1') no-repeat left bottom;
    height:295px;
    width:710px;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_410_710.png?1') no-repeat left bottom;
    height:410px;
    width:710px;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen-bis {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_Bis_330_710.png?1') no-repeat left bottom;
    height:330px;
    width:710px;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-titre, .cadre-demi-centre-titre {
    height: 68px;
    width: 256px;
    top: -26px;
    padding-top: 17px;
    font-size: 18px;
  }

  .cadre-plein-centre-base-titre {
    height: 68px;
    width: 256px;
    top: -30px;
    padding-top: 17px;
    font-size: 18px;
  }

  .cadre-plein-centre-s-l {
    height: 500px;
    width: 700px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_700.png?1') no-repeat left bottom;
    padding: 60px 30px 30px 30px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .cadre-plein-centre-m-l {
    height: 650px;
    width: 700px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_650_700.png?1') no-repeat left bottom;
    padding: 60px 30px 30px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-l-l {
    height:880px;
    width:700px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_880_700.png?1') no-repeat left bottom;
    padding: 60px 30px 30px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-base-grand {
    padding: 60px 15px 30px 15px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-xxl-xxl {
    background:url('../images/NAWimagesImportante/Cadre_Centre_1300_710.png?1') no-repeat left bottom;
    height:1300px;
    width:710px;
    padding:30px 60px 40px 60px;
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .input-modern-joueur {
    min-width: 90px !important;
    width: 90px !important;
  }

  .zone-menu-ig-titre {
    font-size: 12px;
    font-weight: 600;
    font-family: Verdana, sans-serif;
  }

  .button-mouvement {
    font-size: 12px!important;
  }

  .cadre-demi-centre-petit {
    background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_290_710.png?1') no-repeat left bottom;
    height:290px;
    width:710px;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_410_710.png?1') no-repeat left bottom;
    height:410px;
    width:710px;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen-bis {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_Bis_330_710.png?1') no-repeat left bottom;
    height:330px;
    width:710px;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-titre, .cadre-demi-centre-titre {
    height: 68px;
    width: 256px;
    top: -26px;
    padding-top: 17px;
    font-size: 18px;
  }

  .cadre-plein-centre-base-titre {
    height: 68px;
    width: 256px;
    top: -30px;
    padding-top: 17px;
    font-size: 18px;
  }

  .cadre-plein-centre-s-l {
    height: 500px;
    width: 720px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_720.png?1') no-repeat left bottom;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-m-l {
    height: 650px;
    width: 720px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_650_720.png?1') no-repeat left bottom;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-l-l {
    height:800px;
    width:720px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_800_720.png?1') no-repeat left bottom;
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-base-grand {
    padding:60px 22px 30px 22px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-xxl-xxl {
    background:url('../images/NAWimagesImportante/Cadre_Centre_1300_710.png?1') no-repeat left bottom;
    height:1300px;
    width:710px;
    padding:30px 60px 40px 60px;
    margin-bottom: 20px;
    margin-right: 50px;
    margin-top: 6px;
  }
}

@media (min-width: 619px) and (max-width: 767px) {
  .input-modern-joueur {
    min-width: 90px !important;
    width: 90px !important;
  }

  .button-mouvement {
    font-size: 10px!important;
  }

  .buttons-ponte-vert, .buttons-ponte-rouge, .buttons-ponte-gris {
    display: flex;
    height: 38px;
    padding: 4px;
    margin: 4px;
  }

  .zone-menu-ig-titre {
    font-size: 10px;
    font-weight: 600;
    font-family: Verdana, sans-serif;
  }

  .button-mouvement {
    font-size: 10px!important;
  }

  .cadre-demi-centre-petit {
    background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_300_601.png?1')  no-repeat left bottom;
    height:300px;
    width:600px;
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_390_600.png?1') no-repeat left bottom;
    height:390px;
    width:600px;
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen-bis {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_Bis_355_600.png?1') no-repeat left bottom;
    height:355px;
    width:600px;
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-titre, .cadre-demi-centre-titre {
    height: 64px;
    width: 242px;
    top: -22px;
    padding-top: 16px;
    font-size: 18px;
  }

  .cadre-plein-centre-base-titre {
    height: 64px;
    width: 242px;
    top: -30px;
    padding-top: 16px;
    font-size: 18px;
  }

  .cadre-plein-centre-s-l {
    height: 500px;
    width: 600px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_600.png?1') no-repeat left bottom;
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-m-l {
    height: 650px;
    width: 600px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_650_600.png?1') no-repeat left bottom;
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-l-l {
    height:800px;
    width:600px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_800_600.png?1') no-repeat left bottom;
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-base-grand {
    padding:55px 30px 35px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-xxl-xxl {
    background:url('../images/NAWimagesImportante/Cadre_Centre_1400_600.png?1') no-repeat left bottom;
    height:1400px;
    width:600px;
    padding:25px 60px 40px 60px;
    margin-bottom: 20px;
    margin-top: 6px;
  }
}

@media (min-width: 451px) and (max-width: 618px) {
  .input-modern-joueur {
    min-width: 80px !important;
    width: 80px !important;
  }

  .button-mouvement {
    font-size: 10px!important;
    width:100%!important;
  }

  .button-choice-attack {
    width: 160px;
  }

  .slider.slider-horizontal {
    width:180px;
  }

  .buttons-ponte-vert, .buttons-ponte-rouge, .buttons-ponte-gris {
    display: flex;
    height: 38px;
    padding: 4px;
    margin: 4px;
  }

  .zone-menu-ig-titre {
    font-size: 10px;
    font-weight: 600;
    font-family: Verdana, sans-serif;
  }

  .cadre-demi-centre-petit {
    background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_280_440.png?1') no-repeat left bottom;
    height:280px;
    width:440px;
    padding:45px 18px 25px 25px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_430_440.png?1') no-repeat left bottom;
    height:430px;
    width:440px;
    padding:40px 18px 25px 25px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen-bis {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_Bis_400_440.png?1') no-repeat left bottom;
    height:400px;
    width:440px;
    padding:40px 18px 25px 25px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-titre, .cadre-demi-centre-titre {
    height: 53px;
    width: 200px;
    top: -18px;
    padding-top: 15px;
    font-size: 14px;
  }

  .cadre-plein-centre-base-titre {
    height: 53px;
    width: 200px;
    top: -26px;
    padding-top: 15px;
    font-size: 14px;
  }

  .cadre-plein-centre-s-l {
    height: 500px;
    width: 450px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_450.png?1') no-repeat left bottom;
    padding: 40px 18px 25px 25px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-m-l {
    height: 680px;
    width: 450px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_680_450.png?1') no-repeat left bottom;
    padding: 40px 18px 25px 25px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-l-l {
    height:800px;
    width:450px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_800_450.png?1') no-repeat left bottom;
    padding: 40px 18px 25px 25px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-base-grand {
    padding: 40px 10px 25px 10px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-xxl-xxl {
    background:url('../images/NAWimagesImportante/Cadre_Centre_1450_440.png?1') no-repeat left bottom;
    height:1450px;
    width:440px;
    padding:20px 30px 40px 30px;
    margin-bottom: 20px;
    margin-top: 2px;
  }
}

@media (max-width: 500px) {
  .buttons-ponte-vert, .buttons-ponte-rouge, .buttons-ponte-gris {
    display: flex;
    height: 38px;
    padding: 4px;
    margin: 4px;
  }

  .zone-menu-ig-titre {
    font-size: 10px;
    font-weight: 600;
    font-family: Verdana, sans-serif;
  }

  .menu-sous-categorie-main-xl, .menu-sous-categorie-main-xl-bas, .menu-sous-categorie-main, .menu-sous-categorie-main-bas {
    font-size: 10px;
  }

  .logo-categorie {
    height: 24px;
  }

  .logo-sous-categorie {
    height: 24px;
  }
}

@media (max-width: 370px) {
  .logo-categorie {
    height: 22px;
  }
  .zone-menu-ig-titre {
    font-size: 9px;
  }
}

@media (max-width: 992px) {
  .menu-sous-categorie-main {
    font-size: 10px;
    height: 150px;
    width: 345px;
    background:url('../images/NAWimagesImportante/Menu_Deroulant_150_345.png?1') no-repeat left bottom;
  }

  .menu-sous-categorie-main-bas {
    font-size: 10px;
    height: 150px;
    width: 345px;
    background:url('../images/NAWimagesImportante/Menu_Deroulant_150_345_inv.png?1') no-repeat left bottom;
  }

  .menu-sous-categorie-main-xl, .menu-sous-categorie-main-xl-bas {
    font-size: 10px;
    height: 200px;
    width: 345px;
    background:url('../images/NAWimagesImportante/Menu_Deroulant_200_345.png?1') no-repeat left bottom;
  }

  .menu-sous-categorie-main-xl-bas {
    font-size: 10px;
    height: 200px;
    width: 345px;
    background:url('../images/NAWimagesImportante/Menu_Deroulant_200_345_inv.png?1') no-repeat left bottom;
  }

  .menu-sous-categorie-main-inner {
    height: 50px;
    width: 115px;
  }

  .menu-sous-categorie-lien:hover {
    height: 50px;
    width: 115px;
    background:url('../images/NAWimagesImportante/Background_hover_sous_menu_50_115.png?1') no-repeat left bottom;
  }
}

@media (max-width: 450px) {

  .input-modern-joueur {
    min-width: 60px !important;
    width: 60px !important;
  }

  .button-mouvement {
    font-size: 9px !important;
    width: 100%!important;
    height: 28px!important;
  }

  .button-choice-attack {
    width: 136px;
  }

  .slider.slider-horizontal {
    width:180px;
  }

  .cadre-demi-centre-petit {
    background:url('../images/NAWimagesImportante/Petit_Cadre_Centre_280_380.png?1') no-repeat left bottom;
    height:280px;
    width:380px;
    padding:50px 12px 25px 30px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_420_380.png?1') no-repeat left bottom;
    height:420px;
    width:380px;
    padding:40px 12px 25px 30px;
    margin-bottom: 20px;
  }

  .cadre-demi-centre-moyen-bis {
    background:url('../images/NAWimagesImportante/Moyen_Cadre_Centre_420_380.png?1') no-repeat left bottom;
    height:420px;
    width:380px;
    padding:40px 12px 25px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-titre, .cadre-demi-centre-titre {
    height: 48px;
    width: 180px;
    top: -16px;
    padding-top: 15px;
    font-size: 12px;
    font-weight: 700;
    font-family: Verdana, sans-serif;
  }

  .cadre-plein-centre-base-titre {
    height: 48px;
    width: 180px;
    top: -26px;
    padding-top: 15px;
    font-size: 12px;
    font-weight: 700;
    font-family: Verdana, sans-serif;
  }

  .cadre-plein-centre-s-l {
    height: 500px;
    width: 450px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_500_450.png?1') no-repeat left bottom;
    padding: 40px 12px 25px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-m-l {
    height: 650px;
    width: 450px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_650_450.png?1') no-repeat left bottom;
    padding: 40px 12px 25px 30px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-l-l {
    height:800px;
    width:450px;
    background:url('../images/NAWimagesImportante/Cadre_Plein_Centre_800_450.png?1') no-repeat left bottom;
    padding: 40px 18px 25px 20px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-base-grand {
    padding: 35px 18px 25px 10px;
    margin-bottom: 20px;
  }

  .cadre-plein-centre-xxl-xxl {
    background:url('../images/NAWimagesImportante/Cadre_Centre_1500_380.png?1') no-repeat left bottom;
    height:1500px;
    width:380px;
    padding:15px 15px 15px 20px;
    margin-bottom: 20px;
    margin-top: 1px;
  }
}


@media (min-width: 1400px) and (max-width: 1600px) {
  #menu-sous-categorie-main-1 {
    left: -80px;
    transform: none;
    right: auto;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  #menu-sous-categorie-main-1 {
    left: -55px;
    transform: none;
    right: auto;
  }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  #menu-sous-categorie-main-1 {
    left: -31px;
    transform: none;
    right: auto;
  }
}
@media (min-width: 991px) and (max-width: 1099px) {
  #menu-sous-categorie-main-1 {
    left: -14px;
    transform: none;
    right: auto;
  }
}

@media (max-width: 1900px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -93px;
  }
}

@media (max-width: 1477px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -74px;
  }
}

@media (max-width: 1352px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -64px;
  }
}

@media (max-width: 1287px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -52px;
  }
}

@media (max-width: 1222px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -40px;
  }
}

@media (max-width: 1157px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -30px;
  }
}

@media (max-width: 1092px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: -20px;
  }
}

@media (max-width: 1027px) {
  #menu-sous-categorie-main-5 {
    left: auto;
    transform: none;
    right: 0px;
  }
}

@media (max-width: 962px) {
}

@media (max-width: 897px) {
}

@media (max-width: 832px) {
}

@media (max-width: 767px) {
  #menu-sous-categorie-main-1 {
    left: -105px;
    transform: none;
  }
  #menu-sous-categorie-main-4 {
    left: auto;
    transform: none;
    right: -100px;
  }
}

@media (max-width: 600px) {
  #menu-sous-categorie-main-1 {
    left: -64px;
    transform: none;
  }
  #menu-sous-categorie-main-2 {
    left: -120px;
    transform: none;
  }
  #menu-sous-categorie-main-3 {
    left: -140px;
    transform: none;
  }
  #menu-sous-categorie-main-4 {
    left: auto;
    transform: none;
    right: -66px;
  }
}

@media (max-width: 400px) {
  #menu-sous-categorie-main-1 {
    left: -72px;
    transform: none;
  }

  #menu-sous-categorie-main-3 {
    left: -172px;
    transform: none;
  }
}

.logo-sous-categorie {
  height: 30px;
}

.zone-central-accueil {
  width:100%;
  height: 100vh;
  min-height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.zone-central-accueil-inscription {
  display:flex;
  justify-content: center;
  position:relative;
  background:url('../images/NAWimagesImportante/Box_Inscription_1.png?1') no-repeat left bottom;
  width:584px;
  height:400px;
  background-size: cover !important;
  padding-top:56px;
}

.zone-central-accueil-inscription-zone-titre {
  display: flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  top:-18px;
  left: 50%;
  transform: translate(-50%);
  background:url('../images/NAWimagesImportante/Bouton_Inscription_1.png?1') no-repeat left bottom;
  width:225px;
  height:60px;
  background-size: cover !important;
  color: #fff;
  font-family: 'BowlByOne', sans-serif;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

.zone-central-accueil-inscription-zone-content {
  height:200px;
  width:252px;
  color: #fff;
}

.zone-central-accueil-inscription-zone-content-form {
  padding: 5px 0 5px 0;
}

.zone-central-accueil-inscription-zone-content-form-button {
  text-align: center;
}

.logonatureatwaraccueil {
  margin:0px auto;
  width:300px;
  padding-bottom: 10px
}

.zone-connexion {
  position:fixed;
  top: 58px;
  right: 190px;
  background: url(../images/NAWimagesImportante/Box_Connexion.png?1) no-repeat left bottom;
  width: 500px;
  height: 95px;
  background-size: cover !important;
  z-index: 500;
}

.zone-central-apropos {
  display:flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  width:100%;
  min-height:500px;
  background-color: rgba(34, 22, 5, 0.72);
  color: #f2e8dc;
  padding: 100px 60px 60px 60px;
  position:relative;
}

.zone-central-espece {
  display:flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  width:100%;
  min-height:500px;
  background-color: rgba(34, 22, 5, 0.42);
  color: #f2e8dc;
  padding: 115px 60px 60px 60px;
  position:relative;
}

.zone-info-connexion {
  color: #000000;
}

.zone-info-cgu {
  color: #000000;
  font-size: 12px;
}

.zone-central-apropos-inner-content {
  width: 730px;
  font-size: 16px;
  padding:0 15px 0 0;
}

.zone-central-espece-inner-content {
  font-size: 16px;
}

.zone-espece {
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 4px;
  width:320px;
}

.image-espece {
  display: flex;
  justify-content: center;
  margin-top: 35px;
  margin-bottom: 35px;
}

.titre-espece {
  display:flex;
  align-items: center;
  justify-content: center;
  background-color: #00000096;
  font-weight: bold;
  font-size:18px;
  padding: 5px;
}

.content-espece-avantage {
  background-color: #00000096;
  padding: 10px;
  height:110px;
}

.titre-zone-central-accueil {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  font-family: 'Verdana', sans-serif;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 15px;
  padding-right: 15px;
}

.titre-espece-avantage {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.inner-content-espece-avantage {
  font-size: 14px;
}

.zone-connexion-principale {
  position: relative;
  display:flex;
  align-items: center;
  flex-direction: column;
  height:100%;
  width:100%;
  padding-top: 10px;
}

.zone-connexion-principale-form {
  display: flex;
  height: 45px;
}

.zone-connexion-principale-passoublie {
  display: flex;
  width: 100%;
  padding-left: 25px;
  justify-content: flex-start;
}

.racourci-copiage-armee {
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 4px;
}

@media (max-width: 700px) {
  .titre-espece {
    font-size: 14px;
  }
  .titre-espece-avantage {
    font-size: 13px;
  }
  .logo-ressource-160 {
    height: 110px;
  }
  .zone-espece {
    width:170px;
  }
  .inner-content-espece-avantage {
    font-size: 10px;
  }
  .image-espece {
    margin-top: 22px;
    margin-bottom: 22px;
  }
  .content-espece-avantage {
    padding: 7px;
  }
}

.forgot-password-link {
  text-decoration: underline;
  color: #f2e8dc;
  font-size: 12px;
}

.forgot-password-link:visited, .forgot-password-link:visited, .forgot-password-link:active {
  color: #f2e8dc;
}

.forgot-password-link:hover, .forgot-password-link:focus, .forgot-password-link:active, .forgot-password-link:visited {
  text-decoration: underline;
  color: #c3a98a;
}

.zone-form-connexion-control {
  display: flex;
  align-items: center;
  width: 100px;
  padding: 0 3px 0 3px;
}

.zone-form-connexion-control-button {
  display: flex;
  align-items: center;
  width: 140px;
  height:45px;
  padding: 0 3px 0 3px;
}

.medium-button {
  width: 140px !important;
}

.zone-central-fonctionnalite {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
  width:100%;
  height:700px;
  background-color: rgba(34, 22, 5, 0.72);
  color: #f2e8dc;
  padding: 20px;
  position:relative;
}

.zone-contenu-explication-fonctionnalite {
  width:700px;
  font-size: 16px;
}

.zone-contenu-explication-visible {
  display:flex;
}
.zone-contenu-explication-invi {
  display:none;
}

.zone-central-remerciement {
  width:100%;
  background-color: rgba(34, 22, 5, 0.42);
  color: #f2e8dc;
  padding: 100px 60px 60px 60px;
  position:relative;
}

.zone-remerciement-bernard-werber {
  display:flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.zone-remerciement-autre {
  display:flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}

.espace-content {
  padding:5px 0 5px 0;
}

.zone-bernard-werber-inner-content {
  width:830px;
  font-size: 16px;
  padding-bottom: 10px;
}

.zone-bernard-werber-inner-image {
  width:400px;
}

.form-input-inside {
  padding-left: 5px !important;
}

.zone-bouton-fonctionnalite {
  padding-top:5px;
  padding-bottom: 5px;
}

.carousel-accueil {
  box-shadow: 0px 2px 14px 5px rgba(113, 52, 4, 0.79);
  width:550px;
}

.zone-fin-cadre-ressource {
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
}

.zone-milieu-cadre-ressource {
  display: flex;
  flex-direction: column;
  height: 175px;
  justify-content: space-around;
}

.menu-sous-categorie-main-inner-title {
  position:relative;
}

.puissance-total-joueur {
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.info-menu-notification {
  position: absolute;
  top: 10px;
  right: -26px;
  display: flex;
  align-items: center;
}

.info-sous-menu-notification {
  position: absolute;
  top: -22px;
  right: -13px;
  display: flex;
  align-items: center;
}


.info-menu-notification-principale {
  position: absolute;
  top: 8px;
  right: -16px;
  display: flex;
  align-items: center;
}

.zone-menu-gameplay {
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px) {
  .zone-connexion {
    position:fixed;
    top: 58px;
    left: 50%;
    transform: translate(-50%);
    background: url(../images/NAWimagesImportante/Box_Connexion.png?1) no-repeat left bottom;
    width: 500px;
    height: 95px;
    background-size: cover !important;
  }

  .zone-menu-gameplay {
    flex-wrap: wrap;
    justify-content: center;
    flex-direction:unset;
  }

  .zone-central-fonctionnalite {
    padding: 80px 40px 40px 40px;
  }

  .zone-central-apropos {
    padding: 115px 40px 40px 40px;
  }

  .zone-central-remerciement {
    padding:90px 40px 40px 40px;
  }
}

@media (max-width:600px) {

  .button-inscription {
    height: 28px;
    width: 190px;
  }

  .zone-info-connexion {
    position: absolute;
    bottom: 30px;
    left: 14px;
  }

  .zone-connexion {
    height:76px;
    width:400px;
  }

  .zone-connexion-principale {
    padding-top: 5px;
  }

  .zone-form-connexion-control {
    width: 80px;
    height:30px;
    margin: 0 2px 0 2px !important;
  }

  .zone-form-connexion-control-button {
    width: 116px;
    height: 30px;
  }

  .zone-connexion-principale {
    padding-top: 10px;
  }

  .button-connexion {
    width: 80px !important;
    height:30px !important;
  }

  .button-connexion-form {
    width: 110px !important;
    height: 32px !important;
    font-size: 14px;
  }

  .zone-connexion-principale-form {
    height: 34px;
  }

  .zone-central-fonctionnalite {
    height:100%;
  }

  .zone-bernard-werber-inner-image {
    display: flex;
    justify-content: center;
  }

  .cadre-formulaire {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .logonatureatwaraccueil {
    width:260px;
  }

  .zone-central-accueil-inscription-zone-titre {
    width:180px;
    height:48px;
    font-size: 18px;
  }

  .zone-central-accueil-inscription {
    width:400px;
    height:274px;
    padding-top:25px;
  }
}

@media (max-width:500px) {
  .zone-menu-titre {
    font-family: 'Verdana', sans-serif;
    font-size:13px;
  }
}

@media (min-width:501px) {
  .zone-menu-titre {
    font-family: 'Verdana', sans-serif;
    font-size:15px;
  }

  .titre-zone-central-accueil {
    font-size:20px;
    font-family: 'Verdana', sans-serif;
  }
}

@media (max-width:400px) {
  .logonatureatwaraccueil {
    width: 170px;
  }
}

@media (max-height:900px) {
  .logonatureatwaraccueil {
    width: 220px;
  }
}

@media (max-height:800px) {
  .logonatureatwaraccueil {
    width: 170px;
  }
}

@media (max-height:500px) {
  .logonatureatwaraccueil {
    width: 140px;
  }
}

@media (min-width:768px) {
  .zone-menu-titre {
    font-family: 'Verdana', sans-serif;
    font-size:16px;
  }

  .titre-zone-central-accueil {
    font-size:22px;
    font-family: 'Verdana', sans-serif;
  }
}

@media (min-width:992px) {
  .zone-menu-titre {
    font-size:18px;
    font-family: 'BowlByOne', sans-serif;
  }

  .titre-zone-central-accueil {
    font-size:24px;
    font-family: 'BowlByOne', sans-serif;
  }
}

@media (min-width:1200px) {
  .zone-menu-titre {
    font-size:26px;
    font-family: 'BowlByOne', sans-serif;
  }
}

.raccourci-info-victoire {
  display:none;
}

@media (max-width: 618px) {
  .zone-left-inner-info-fin-jeu {
    top: 326px;
    left: 10px;
  }

  .zone-left-inner-info-fin-jeu-bottom {
    bottom: 328px;
    left: 6px;
  }
}

@media (max-width: 991px) {

  .zone-left-inner-logo, .zone-left-inner-info, .zone-left-inner-info-bottom, .zone-left-inner-info-fin-jeu, .zone-left-inner-info-fin-jeu-bottom {
    display:none;
  }

  .raccourci-info-victoire {
    display:flex;
  }

  .zone-left-inner-ressources {
    display:none;
    position:fixed;
    top: 125px;
    left: 5px;
  }

  .zone-left-inner-info-fin-jeu {
    display: none;
    position: fixed;
    top: 386px;
    left: 10px;
  }

  .zone-left-inner-info-fin-jeu-bottom {
    bottom: 328px;
    left: 6px;
  }

  .zone-left-inner-info {
    top: 522px;
    left: 10px;
  }

  .zone-left-inner-info-bottom {
    position: fixed;
    bottom: 455px;
    left: 5px;
  }

  .zone-left-inner-ressources-bottom {
    display:none;
    position:fixed;
    bottom: 65px;
    left: 5px;
  }

  .afficher-zone-ressources {
    display:block;
    position:fixed;
    z-index:2600;
  }

  .afficher-zone-ressources-autre {
    display:flex;
    position:fixed;
    z-index:2600;
  }

  .non-afficher-zone-ressources {
    display:none;
  }
}

.aide-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  width:175px;
  cursor:pointer;
  background: radial-gradient(#f0dfc3, #f0ddbf, #f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  box-shadow: 1px 1px 8px 0px rgb(20 24 20 / 79%);
  margin: 10px 10px 12px 10px;
  border-radius: 3px;
  font-weight: 800;
  padding: 5px;
}

.aide-case:hover {
  box-shadow: 1px 1px 8px 5px rgb(20 24 20 / 79%);
}

.aide-case-icone {

}

.aide-case-titre {

}

@media (max-width: 618px) {
  .zone-left-inner-ressources {
    top: 65px;
  }

  .zone-left-inner-ressources-bottom {
    bottom: 65px;
  }

  .zone-left-inner-info-fin-jeu {
    top: 326px;
    left: 10px;
  }

  .zone-left-inner-info-fin-jeu-bottom {
    bottom: 328px;
  }

  .zone-left-inner-info {
    top: 464px;
    left: 10px;
  }
}

.flocon {
width:12px !important;
height:12px !important;
}

.menu-jeu-strategie{
padding:5px;
margin-bottom:3px;
cursor:pointer;
display:inline-block;
white-space: nowrap;
}

.cadre-manager-modo {
border-color: rgba(61, 38, 7, .8);
border-style: inset;
border-width: 1px;
padding-bottom: 18px;
}

.numero-calendrier-avent{
background-color: #00000075;
border-radius: 20px;
padding: 4px;
width: 34px;
height: 34px;
color: #e7e7e7;
display: flex;
justify-content: center;
align-items: center;
}

/* Event */

.cadre-special-event {
  display:flex;
  justify-content: center;
  height:350px;
  max-width: 908px;
  margin: 20px 10px 0 10px;
  /*background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;*/
}

.zone-info-partie-title-colonne {
  background-color: rgba(10, 10, 10, 0.35);
  padding: 10px 10px 10px 30px;
  height:40px;
  width: 170px;
}

.zone-info-partie-title-colonne-end {
  background-color: rgba(10, 10, 10, 0.35);
  padding: 10px 10px 10px 30px;
  height:40px;
  width: 180px;
}

.partie-joignable {
  display: flex;
  height: 40px;
  align-items: center;
}

.zone-bouton-rejoint {
  position: relative;
  background-color: rgba(10, 10, 10, 0.5);
  height: 40px;
  width: 180px;
  font-size: 12px;
  font-weight: 550;
  font-style: italic;
}

.zone-info-partie-content-colonne {
  position: relative;
  background-color: rgba(10, 10, 10, 0.5);
  padding: 10px 10px 10px 30px;
  height:40px;
  width: 170px;
  font-size: 13px;
  font-weight: 550;
}

.zone-info-classement-title-colonne-first {
  background-color: rgba(10, 10, 10, 0.35);
  padding: 10px 0 10px 12px;
  height: 40px;
  width: 40px;
}

.zone-info-classement-title-colonne-second {
  background-color: rgba(10, 10, 10, 0.35);
  padding: 10px 0 10px 12px;
  height: 40px;
  width: 110px;
}

.zone-info-classement-title-colonne {
  background-color: rgba(10, 10, 10, 0.35);
  padding: 10px 0 10px 12px;
  height: 40px;
  width: 98px;
}

.zone-info-classement-content-colonne-first {
  position: relative;
  background-color: rgba(10, 10, 10, 0.5);
  padding: 10px 0 10px 12px;
  height: 40px;
  width: 40px;
  font-size: 13px;
  font-weight: 550;
}

.zone-info-classement-content-colonne-second {
  position: relative;
  background-color: rgba(10, 10, 10, 0.5);
  padding: 10px 0 10px 12px;
  height: 40px;
  width: 112px;
  font-size: 13px;
  font-weight: 550;
}

.zone-info-classement-content-colonne {
  position: relative;
  background-color: rgba(10, 10, 10, 0.5);
  padding: 10px 0 10px 12px;
  height: 40px;
  width: 98px;
  font-size: 13px;
  font-weight: 550;
}

.title-tableau {
  display:flex;
  align-items: center;
  padding: 3px 0 3px 0;
}

.content-tableau {
  display:flex;
  align-items: center;
  padding: 5px 0 5px 0;
}

.content-tableau-classement-zone {
  overflow-y: auto;
  height: 225px;
}

.content-tableau-classement {
  display:flex;
  align-items: center;
  margin: 5px 0 5px 0;
}

.cadre-special-event-inner-title {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(10, 10, 10, 0.6);
  color: #f8f4f4;
  font-size: 20px;
  font-weight: 800;
}

.zone-evenement-attente {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.zone-menu-tuto {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  padding-bottom: 20px;
}

.zone-info-menu-tuto {
  display:flex;
  flex-direction: column;
  overflow-y: scroll;
}

.contenu-explanation-border-image {
  border-radius: 3px;
  border: solid rgb(0 0 0 / 36%);
  box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.79);
}

.zone-info-menu-tuto-invi {
  display:none;
}

.zone-inner-contenu-tutorial {
  display: flex;
  align-items: flex-start;
  padding: 5px;
}

.titre-tutorial-explanation {
  font-size: 15px;
  font-weight: 550;
}

.zone-inner-contenu-tutorial-explanation {
  width: 100%;
  height: 100%;
  margin: 0px 5px 5px 15px;
}

.image-tuto-s {
  width: 60px;
}

.image-tuto-l {
  width:90px;
}

.image-tuto-xl {
  width:120px;
}

.image-tuto-xxl {
  width:150px;
}

.image-tour {
  padding: 22px;
}

.zone-evenement-points {
  display:flex;
  justify-content: center;
}

.limit-zone-point {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  height:50px;
  width:180px;
  background-color: rgba(10, 10, 10, 0.5);
}

.inner-limit-zone-point {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.inner-recupere-zone-point {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recupere-zone-point {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(10, 10, 10, 0.5);
  height:50px;
  width:180px;
}

.inner-zone-evenement-points {
  display: flex;
  justify-content: space-evenly;
  height: 50px;
  width: 690px;
  margin: 20px 10px 0 10px;
  color: #f8f4f4;
  font-size: 14px;
  font-weight: 800;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgba(120, 190, 128, 0.79);
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
}

.zone-evenement-attente-recompense {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cadre-special-event-recompense {
  display: flex;
  justify-content: center;
  height: 370px;
  max-width: 908px;
  margin: 20px 10px 0 10px;
}

#cadre-recompense-event-inner {
  height: 100%;
  width:420px;
  color: #f8f4f4;
  font-size: 14px;
  font-weight: 800;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgba(120, 190, 128, 0.79);
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
}

#cadre-recompense-event-inner-title {
  position:relative;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(10, 10, 10, 0.6);
  color: #f8f4f4;
  font-size: 17px;
  font-weight: 800;
}

#cadre-recompense-event-inner-left {
  font-size: 13px;
  font-weight: 550;
}

.cadre-sous-menu-recompense {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:150px;
  height:34px;
  /*border: 1px solid black;*/
  background-color: rgba(10, 10, 10, 0.6);
  opacity: 0.8;
  padding: 10px 0 10px 12px;
  margin: 6px 0 6px 0;
  box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.79);
  cursor: pointer;
}

.contexte-recompense-selected {
  display: block;
}
.contexte-recompense-none-selected {
  display: none;
}

.cadre-sous-menu-recompense:hover {
  opacity:1;
  box-shadow: 0 0 3px 2px rgba(120, 190, 128, 0.79);
}

.aucune-partie {
  text-align: center;
  padding-top:10px;
}

.image-recompense {
  height:22px;
}

.image-recompense-grand {
  height:84px;
}

.cadre-contexte-recompense {
  font-size: 13px;
  font-weight: 600;
}

.cadre-image-grande {
  display: flex;
  justify-content: center;
}

.select-zone-recompense {
  display: flex;
  margin: 8px 0 5px 0;
  align-items: baseline;
}

.menu-recompense-selected {
  box-shadow: 0 0 3px 2px rgba(120, 190, 128, 0.79);
  opacity: 1;
}

.option-recompense {
  color: #f8f4f4;
  background-color: #0b6020;
  border-color: #375146;
}

.form-control-recompense {
  width: 50px;
  height: 26px;
  font-size: 13px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #375146;
  margin-left:5px;
  cursor: pointer;
}

.cadre-recompense-event-inner-right {
  position: relative;
  padding: 10px 0 10px 12px;
  width: 100%;
}

#cadre-point-recompense {
  position: absolute;
  top: 2px;
  right: 10px;
}

.cadre-button-recompense {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

#cadre-recompense-event-inner-content {
  display: flex;
}

.myClassement {
  box-shadow: 0 0 3px 2px rgb(120 190 128 / 79%);
}

.tooltip.fade.top.in {
  z-index:20000;
}

.tooltip-zone-principale-event {
  background-color: rgba(10, 10, 10, 0.95);
  color: #f8f4f4;
  font-size: 17px;
  font-weight: 650;
  border-radius: 3px;
  box-shadow: 0px 2px 4px 4px rgba(120, 190, 128, 0.79);
  padding:10px;
}

.titre-event-tooltip {
  font-weight: bold;
  font-size: 17px;
}

.general-event-tooltip + .tooltip > .tooltip-inner {

}

.tooltip.in{
  opacity:1!important;
}

.line-tooltip {
  display: flex;
  justify-content: space-between;
}

.tooltip-event-border-top {
  padding-top:5px;
  border-top: groove rgba(61, 38, 7, .8) 2px;
  font-size: 14px;
  font-weight: 500;
}

.general-event-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#e0aa63; }

.cadre-special-event-inner-content {

}

.cadre-special-event-inner {
  position:relative;
  height: 100%;
  color: #f8f4f4;
  font-size: 14px;
  font-weight: 800;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgb(120 190 128 / 79%);
  /*background-color: rgba(10, 10, 10, 0.6);*/
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
}

#cadre-classement-event {
  height: 370px;
  width: 250px;
  margin: 20px 10px 0 10px;
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
}

#cadre-classement-event-inner {
  height: 100%;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgb(120 190 128 / 79%);
  color: #f8f4f4;
  font-size: 14px;
  font-weight: 800;
}

#cadre-classement-event-inner-title {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(10, 10, 10, 0.6);
  color: #f8f4f4;
  font-size: 17px;
  font-weight: 650;
}

.title-tableau-classement {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 0;
}

#cadre-classement-event-inner-content {

}

.graph-sous-menu {
  width: 40px;
  height: 34px;
  margin: 4px;
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #00000094;
  box-shadow: 0px 2px 3px 3px rgb(0 0 0 / 79%);
}

#graph-sous-menu-1 {
  background-image: url("./public/images/evenementImage/menu/unitalive.png");
}
#graph-sous-menu-2 {
  background-image: url("./public/images/evenementImage/menu/killed.png");
}
#graph-sous-menu-3 {
  background-image: url("./public/images/evenementImage/menu/lost.png");
}
#graph-sous-menu-4 {
  background-image: url("./public/images/evenementImage/interfaceIcon/wood.png");
}
#graph-sous-menu-5 {
  background-image: url("./public/images/evenementImage/menu/woodused.png");
}
#graph-sous-menu-6 {
  background-image: url("./public/images/evenementImage/interfaceIcon/level-up-bat.png");
}
#graph-sous-menu-7 {
  background-image: url("./public/images/evenementImage/interfaceIcon/destroybuilding.png");
}

#container-sous-menu-stats {
  padding-top: 5px;
}

.interface-close-tutoriel {
  position: fixed;
  background-color: rgb(63 56 56);
  cursor: pointer;
  top: 10px;
  right: 10px;
  padding: 2px;
  border-radius: 3px;
}

#interface-partie-arriere-fond {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 13000;
  width: 100%;
  height: 100%;
  border: 3px;
  /*background: radial-gradient(ellipse at top, #94d59b, transparent), radial-gradient(ellipse at bottom, #33563c, #00000033);*/
  background: linear-gradient(-45deg,
  #94d59b8f 0%,
  rgba(121, 176, 127, 0.79) 13%,
  rgba(76, 121, 81, 0.89) 17%,
  rgba(52, 96, 59, 0.79) 21%,
  rgba(46, 71, 49, 0.72) 25%,
  #5ca5648f 38%,
  #3d8545c9 50%,
  rgba(38, 83, 44, 0.59) 53%,
  rgba(87, 183, 97, 0.69) 58%,
  #25732eb8 62%,
  rgba(113, 172, 119, 0.56) 75%,
  #33563cc9 100%);
  background-size: 400% 400%;
  animation:gradient 20s ease infinite;
  box-shadow: 0px 2px 14px 10px rgba(120, 190, 128, 0.79);
  /*box-shadow: inset 0 0 200px hsla(0,0%,0%,.4);*/
}

#interface-smoke-partie {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9500;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  opacity: 0.7;
}

#interface-smoke-partie:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(120, 190, 128, 0.79) , rgba(107, 181, 116, 0.79), rgba(93, 157, 100, 0.79), rgba(120, 190, 128, 0.79), rgba(120, 190, 128, 0.79));
  mix-blend-mode: color;
  pointer-events: none;
}

#interface-partie {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20000;
  width: 450px;
  min-height: 132px;
  color: #f8f4f4;
  font-size: 14px;
  font-weight: 800;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgba(120, 190, 128, 0.79);
  cursor: default;
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
}

#interface-partie-title {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 50px;
  background-color: rgba(10, 10, 10, 0.6);
  align-items: center;
}

#interface-partie-content {
  height: 90px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}

#video-interface-partie {
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: 9500;
}

#interface-partie-inner-bottom {
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.interface-close-tutoriel:hover {
  background-color: rgba(63, 56, 56, 0.8);
}

.closeTutorielInterface {
  height:25px;
  width:25px;
}

#zone-tutoriel {
  display: flex;
  flex-direction: column;
  height: 75vh;
  width: 750px;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgb(120 182 190 / 79%);
  /*background-color: rgba(10, 10, 10, 0.85);*/
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  color: #f8f4f4;
}

.sous-titre-tutoriel {
  background-color: rgba(10, 10, 10, 0.35);
  height: 40px;
  width:100%;
  margin-top: 3px;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px 10px 0;
}

.sous-contenu-tutoriel {
  padding: 5px 10px 5px 10px;
}

.target-icon {
  height:25px;
}

.zone-tuto-open {
  display: flex !important;
}

.zone-tuto-close {
  display: none !important;
}

.sous-titre-principale-rapport-espionnage {
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
  padding: 10px 20px;
  font-weight: bold;
}

.sous-titre-rapport-espionnage {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
  padding: 10px 20px;
  font-weight: bold;
}

.content-niveau-rapport-espionnage {
  display: flex;
  padding: 10px 20px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.content-niveau-inner-re {
  width:200px;
}

.lien-joueur-re {
  display: flex;
  padding-top: 5px;
  justify-content: center;
}

#bouton-tuto {
  position: absolute;
  bottom: 8px;
  display: flex;
  width: 100%;
  justify-content: center;
}

.btn-normal {
  color: #fff;
  background-color: #375146;
  border-color: #375146;
  font-size: 14px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal:hover {
  color: #fff;
  background-color: #375146e6;
  border-color: #375146e6;
}

.btn-normal-xl-teal {
  padding: 1px 2px;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  height: 46px;
  width: 180px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #58acb8, #00000029), radial-gradient(ellipse at bottom, #143740, #00000082);
  border-color: #0a3e36;;
  border-radius: 3px;
}

.btn-normal-xl-darkgreen {
  height: 40px;
  width: 180px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #2f6535, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #375146;
  font-size: 15px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal-xl-green {
  height: 40px;
  width: 180px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #375146;
  font-size: 15px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal-l-green {
  height: 32px;
  min-width: 120px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #375146;
  font-size: 13px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal-l-green.active {
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

select option {
  height: 32px;
  min-width: 120px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082) !important;
  border-color: #375146;
  font-size: 13px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal-l-teal {
  height: 32px;
  min-width: 120px;
  font-size: 13px;
  font-weight: 800;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #58acb8, #00000029), radial-gradient(ellipse at bottom, #143740, #00000082);
  border-color: #0a3e36;
  border-radius: 3px;
}

.btn-normal-l-grey {
  height: 32px;
  min-width: 120px;
  font-size: 13px;
  font-weight: 800;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #a39393, #00000029), radial-gradient(ellipse at bottom, #3a2e2e, #00000082);
  border-color: #4f4242;
  border-radius: 3px;
}

.btn-normal-l-red {
  height: 32px;
  min-width: 120px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #e43535, #00000029), radial-gradient(ellipse at bottom, #4e0000, #00000082);
  border-color: #4b2323;
  font-size: 13px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal-xl-red {
  height: 40px;
  width: 180px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #b53737, #00000029), radial-gradient(ellipse at bottom, #2c0c0c, #00000082);
  border-color: #4b2323;
  font-size: 15px;
  font-weight: 800;
  border-radius: 3px;
}

.btn-normal-xl-grey {
  height: 40px;
  width: 180px;
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #a39393, #00000029), radial-gradient(ellipse at bottom, #3a2e2e, #00000082);
  border-color: #4f4242;
  font-size: 15px;
  font-weight: 800;
  border-radius: 3px;
  cursor: not-allowed !important;
}

.btn-normal-xl-teal:hover {
  color: #f8f4f4;
  background-color: #0a3e36e6;
  border-color: #0a3e36e6;
}

.btn-normal-xl-darkgreen:hover {
  color: #f8f4f4;
  background-color: #375146e6;
  border-color: #375146e6;
}

.btn-normal-xl-green:hover {
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

.btn-normal-l-green:hover, .btn-normal-l-green:active, .btn-normal-l-green:focus {
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

.btn-normal-l-grey:hover, .btn-normal-l-grey:active, .btn-normal-l-grey:focus {
  color: #f8f4f4 !important;
}

.btn-normal-l-teal:hover, .btn-normal-l-teal:active, .btn-normal-l-teal:focus, .btn-normal-xl-teal:hover, .btn-normal-xl-teal:active, .btn-normal-xl-teal:focus {
  color: #f8f4f4;
  background-color: #0a3e36e6;
  border-color: #0a3e36e6;
}

.btn-normal-l-teal-activate {
  color: #f8f4f4;
  background: #0a3e36e6;
  border-color: #0a3e36e6;
}

.btn-normal-l-green-activate {
  color: #f8f4f4 !important;
  background: #375146e6 !important;
  border-color: #375146e6 !important;
}

.btn-normal-l-red-activate {
  color: #f8f4f4 !important;
  background: #4b2323e6 !important;
  border-color:#4b2323e6 !important;
}

.progressBarAide {
  background-color: #159515 !important;
}

.progressBarAideUsed {
  background-color: #739073 !important;
}

.gestion-information-zone {
  display: flex;
  justify-content: center;
  background-color: #00000045;
  padding: 10px 10px;
  border-radius: 5px;
  width:240px;
}

.gestion-information-zone-inner {
  width: 200px;
}

.gestion-information-alliance-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3px 0 3px 0;
  font-size: 15px;
}

.gestion-information-alliance-line-nomalliance {
  display: flex;
  justify-content: center;
  color: #049dd6;
  font-weight: bold;
  font-size: 16px;
}
.gestion-information-alliance-line-puissance {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.gestion-information-alliance-line-key {
  font-size: 12px;
}

.gestion-information-alliance-line-value {
  font-weight: bold;
  font-size: 13px;
}

.gestion-menu-alliance-parent:hover {
  font-weight: bold;
}

.gestion-menu-alliance-parent-line {
  display: flex;
  margin: 10px 5px;
}

.gestion-menu-alliance-parent {
  margin: 0 10px;
  width: 80px;
}

.gestion-zone-global {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.cout-energie-don-merveille {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 10px;
}

.affichage-recolte-duree-reste {
  position: absolute;
  font-size: 8px;
  font-weight: bold;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.profil-image-bordure-real-6 {
  display: flex;
  width: 100%;
  position: absolute;
  top: -10px;
  right: 3px;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.contourColonieImageRondProfil {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(61, 38, 7, .8);
  box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.5);
  -moz-border-radius: 10px 0;
  -webkit-border-radius: 10px 0;
  border-radius: 60px;
  max-width: 90px;
  margin: 0px auto;
}

.profil-image-real {
  display:flex;
  width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  align-items: center;
  justify-content: center;
  z-index:199;
}

.zone-icone-ressource-interface {
  position: absolute;
  top: 0;
  left: -10px;
  z-index: 1000;
}

.affichage-recolte-montant-reste {
  position: absolute;
  font-size: 8px;
  font-weight: bold;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.zone-display-none {
  display: none;
}

.gestion-merveille-zone-global {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 15px;
}

.notification-zone-alliance {
  position: absolute;
  top: -5px;
  right: -8px;
}


.notification-nombre {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 20px;
  width: 20px;
  color: white;
  background: radial-gradient(#d90000, #bf0000,#970000, #9b0000);
  border-color: #940000;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  z-index: 500;
  box-shadow: 0px 1px 3px 1px rgb(153 0 0 / 79%);
  font-size: 11px;
  font-family: Verdana, sans-serif;
}

.gestion-menu-merveille {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gestion-menu-merveille:hover {
  border-radius: 10px;
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 1px 1px 8px 5px rgb(20 24 20 / 79%);
  font-size: 15px;
}

.gestion-menu-merveille-active {
  border-radius: 10px;
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 1px 1px 8px 5px rgb(20 24 20 / 79%);
  font-size: 15px;
}

.gestion-menu-alliance {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gestion-logo-alliance {
  height: 56px;
}

.gestion-menu-alliance-logo {
  position:relative;
}

.gestion-menu-alliance-title {
  display:flex;
  color: rgba(37, 23, 4, 1);
  text-decoration: none;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  margin-top: 5px;
}

.rc-action-image-interface-top {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%);
  width: 38px;
}

.rc-zone-info-cible {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-style: italic;
  padding-top: 10px;
  margin: 0 10px 0 10px;
  border-bottom: solid 1px #00000021;
}

.rc-effet-guerre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 20px;
  width: 13px;
  z-index: -1;
  background: radial-gradient(#630000, #810000,#c40000, #840101);
  border-radius: 25px;
  box-shadow: 0 0 16px 8px rgb(212 10 10);
}

.rc-rapport-detail-principale {
  position:relative;
}

.rc-information-joueur-principale {
  display: flex;
  flex-direction: row;
}

.rc-information-joueur-principale-attaquant {
  width: 50%;
  margin: 10px;
  max-height: 300px;
  overflow-y: auto;
  direction:rtl;
}

.rc-information-joueur-principale-defenseur {
  width: 50%;
  margin: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.rc-information-joueur-pseudo {
  padding: 10px 10px 1px 50px;
  font-weight: bold;
}

.rc-information-joueur-pseudo-def {
  display: flex;
  justify-content: flex-end;
  padding: 10px 50px 1px 10px;
  font-weight: bold;
}

.rc-profil-zone-legion {
  position: absolute;
  top: 20px;
  left: 6px;
  border-radius: 20px;
  height: 40px;
  width: 40px;
}

.rc-profil-zone-legion-def {
  position: absolute;
  top: 20px;
  right: 6px;
  border-radius: 20px;
  height: 40px;
  width: 40px;
}

.rc-profil-zone-farm-green {
  border: 1px solid #58b863;
}
.rc-profil-zone-farm-blue {
  border: 1px solid #165ac0;
}
.rc-profil-zone-farm-red {
  border: 1px solid #d90000;
}

.rc-profil-zone-farm-inner-green {
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
}

.rc-profil-zone-farm-inner-blue {
  background: radial-gradient(ellipse at top, #165ac0, #00000029), radial-gradient(ellipse at bottom, #091526, #00000082);
}

.rc-profil-zone-farm-inner-red {
  background: radial-gradient(ellipse at top, #d90000, #00000029), radial-gradient(ellipse at bottom, #160404, #00000082);
}

.image-icone-action-30 {
  height: 30px;
}

.image-icone-action-guerre-30 {
  height: 30px;
}

.rc-profil-zone-legion-action-inner {
  display: flex;
  border: 1px solid rgb(197 197 197);
  border-radius: 19px;
  height: 38px;
  width: 38px;
  align-items: center;
  justify-content: center;
}

.rc-profil-zone-legion-action-guerre-inner {
  display: flex;
  border: 1px solid rgb(197 197 197);
  border-radius: 19px;
  height: 38px;
  width: 38px;
  align-items: center;
  justify-content: center;
}

.rc-profil-zone-legion-action-inner-autre {
  display: flex;
  border: 1px solid rgb(197 197 197);
  border-radius: 19px;
  height: 38px;
  width: 38px;
  padding: 6px;
  align-items: center;
  justify-content: center;
}

.rc-information-joueur-zone-info-profil {

}

.rc-information-joueur-zone-info-profil-def {

}

.rc-information-joueur-zone-info {
  border-radius: 3px;
}

.rc-information-joueur-zone-info-red {
  background: linear-gradient(180deg, rgb(143 10 10 / 4%) 0%, rgb(143 10 10 / 12%) 20%, rgb(143 10 10 / 18%) 57%, rgb(143 10 10 / 12%) 80%, rgb(143 10 10 / 4%) 100%);
}

.rc-information-joueur-zone-info-green {
  background: linear-gradient(180deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 12%) 20%, rgb(37 143 10 / 18%) 57%, rgb(37 143 10 / 12%) 80%, rgb(37 143 10 / 4%) 100%);
}

.rc-information-joueur-zone-info-blue {
  background: linear-gradient(180deg, rgb(10 97 143 / 4%) 0%, rgb(10 97 143 / 12%) 20%, rgb(10 97 143 / 18%) 57%, rgb(10 97 143 / 12%) 80%, rgb(10 97 143 / 4%) 100%);
}

.rc-information-joueur-zone-info-colonie {
  padding: 1px 10px 2px 50px;
  font-style: italic;
  font-size: 12px;
}

.rc-information-joueur-zone-info-colonie-def {
  display: flex;
  justify-content: flex-end;
  padding: 1px 50px 2px 10px;
  font-style: italic;
  font-size: 12px;
}

.specialisation-contenu-principale {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}

.specialisation-contenu-principale-inner {
  width: 200px;
  position: relative;
  margin-top: 50px;
}

.specialisation-contenu {
  padding-top: 30px;
}

.specialisation-contenu-guerre {
  background: linear-gradient(180deg, rgb(143 10 10 / 4%) 0%, rgb(143 10 10 / 30%) 20%, rgb(143 10 10 / 36%) 57%, rgb(143 10 10 / 30%) 80%, rgb(143 10 10 / 4%) 100%);
}
.specialisation-contenu-pillage {
  background: linear-gradient(180deg, rgb(37 143 10 / 4%) 0%, #d27b094d 20%, #d27b094d 57%, #d27b094d 80%, rgb(37 143 10 / 4%) 100%);
}
.specialisation-contenu-espionnage {
  background: linear-gradient(180deg, rgb(10 97 143 / 4%) 0%, rgb(10 97 143 / 30%) 20%, rgb(10 97 143 / 36%) 57%, rgb(10 97 143 / 30%) 80%, rgb(10 97 143 / 4%) 100%);
}
.specialisation-contenu-recolte {
  background: linear-gradient(180deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.specialisation-contenu-image {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
}

.specialisation-contenu-image-elem {
  height: 64px;
}

.specialisation-titre {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  z-index: 100;
  font-size: 16px;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.specialisation-description {
  display: flex;
  padding: 5px 8px;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  height: 94px;
}

.specialisation-titre-bonus {
  display: flex;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
}

.specialisation-titre-bonus-guerre {
  color: #cd9381;
}

.specialisation-titre-bonus-pillage {
  color: #e8c089;
}

.specialisation-titre-bonus-espionnage {
  color: #9eafab;
}

.specialisation-titre-bonus-recolte {
  color: #aabf7d;
}

.specialisation-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
}

.specialisation-contenu-bonus {
  display: flex;
  height: 58px;
  padding: 5px 8px;
  flex-direction: column;
  justify-content: center;
}

.specialisation-contenu-bonus-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.specialisation-zone-centre {
  position: relative;
  display: flex;
  height: 200px;
  width: 40px;
  align-items: center;
  justify-content: center;
}

.specialisation-zone-droite {
  height: 46px;
  font-style: italic;
  font-weight: bold;
  font-size: 12px;
}

.specialisation-zone-gauche {
  display: flex;
  justify-content: flex-end;
  height: 46px;
  font-weight: bold;
}

.specialisation-zone-droite {
  color: green;
  font-weight: bold;
}

.input-regroupement-pourcent {
  display: flex;
  height:20px;
  width: 38px;
  justify-content: center;
  font-weight: bold;
  background-color: #e3cdae;
  text-align: center;
  vertical-align: middle;
  border-width: 2px;
  border-style: none;
}

.buttons-temps-regroupement-vert {
  display: flex;
  height: 25px;
  padding: 2px;
  margin: 6px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  box-shadow: 0px 1px 6px 2px rgba(120, 190, 128, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #274237;
  border-width: 2px;
}

.specialisation-zone-gauche-rang-actuel {
  color: #14d514;
  font-weight: bold;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.specialisation-contenu-bonus-line-inner-bonus {
  color:green;
  font-weight: bold;
}

.specialisation-contenu-bonus-line-inner-titre-bonus {
  font-size: 12px;
  font-weight: bold;
}

.specialisation-contenu-principale-line {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.effet-sang {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 20px;
  width: 30px;
  z-index: -1;
  background: radial-gradient(#630000, #810000,#c40000, #840101);
  border-radius: 25px;
  box-shadow: 0 0 16px 8px rgb(212 10 10);
}

.effet-bleu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 20px;
  width: 30px;
  z-index: -1;
  background: radial-gradient(#005263, #006081,#00bcc4, #018484);
  border-radius: 25px;
  box-shadow: 0 0 16px 8px rgb(48 189 208);
}

.effet-vert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 20px;
  width: 30px;
  z-index: -1;
  background: radial-gradient(#076300, #12a406,#24dc15, #39ff28);
  border-radius: 25px;
  box-shadow: 0 0 16px 8px #39ff28;
}

.effet-orange {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 53px;
  width: 54px;
  z-index: -1;
  background: radial-gradient(#c65b00, #d96d11,#ff9b45, #f9ae6e);
  border-radius: 25px;
  box-shadow: 0 0 16px 8px #ff9b45;
}

.titre-rc-hopital {
  font-style: italic;
  font-weight: bold;
  font-size: 12px;
  padding-top: 10px;
}

.zone-nombre-unite {
  padding-top: 1px;position:relative;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(44 79 36 / 18%) 20%, rgb(34 44 32 / 62%) 57%, rgb(44 61 39 / 86%) 80%, rgb(27 43 24 / 88%) 100%);
  width:100%;
  height: 20px;
  margin-top: -20px;
  z-index:2;
  text-align: right;
}

.contourImageSpecial {
  border-color: rgba(61, 38, 7, .8);
  box-shadow: 0px 1px 7px 1px rgba(0,0,0,0.5);
  border-radius: 2px;
}

@media (max-width: 600px) {
  .rc-action-image-interface-top {
    width: 30px;
  }

  .rc-effet-guerre {
    height: 10px;
    width: 6px;
  }

  .rc-profil-zone-legion-def {
    border-radius: 15px;
    height: 30px;
    width: 30px;
  }

  .rc-profil-zone-legion {
    border-radius: 15px;
    height: 30px;
    width: 30px;
  }

  .rc-profil-zone-legion-action-inner {
    border-radius: 14px;
    height: 28px;
    width: 28px;
  }

  .image-icone-action-30 {
    height: 30px;
  }

  .image-icone-action-30 {
    height: 20px;
  }

  .rc-information-joueur-zone-info-colonie {
    font-size: 10px;
    height: 38px;
    padding: 1px 10px 2px 40px;
  }

  .rc-information-joueur-zone-info-colonie-def {
    font-size: 10px;
    height: 38px;
    padding: 1px 40px 2px 10px;
  }

  .rc-information-joueur-pseudo {
    padding: 10px 10px 1px 40px;
  }

  .rc-information-joueur-pseudo-def {
    padding: 10px 40px 1px 10px;
  }

  .rc-titre-tres-grand {
    font-size: 11px;
  }

  .rc-titre-grand {
    font-size: 9px;
  }

  .titre-rc-hopital {
    font-size: 11px;
  }
}

.zone-contour-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.titre-special-colonne {
  display: flex;
  margin-top: 25px;
  height: 20px;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
  align-items: center;
  justify-content: center;
}

.titre-special-colonne-autre {
  display: flex;
  height: 20px;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
  align-items: center;
  justify-content: center;
}

.rc-information-joueur-zone-info-puissance {
  display: flex;
  justify-content: space-around;
  padding: 5px 10px 5px 50px;
}

.rc-information-joueur-zone-info-puissance-def {
  display: flex;
  justify-content: space-around;
  padding: 5px 50px 5px 10px;
}

.rc-information-joueur-zone-info-puissance-montant-positif {
  padding-left: 10px;
  color: #1f9228;
  font-weight: bold;
}

.rc-information-joueur-zone-info-puissance-montant-negatif {
  padding-left: 10px;
  color: #9e0000;
  font-weight: bold;
}

.rc-information-joueur-zone-info-puissance-montant {
  padding-left: 10px;
  font-weight: bold;
}

.rc-information-joueur-zone-info-blesser {
  padding: 5px;
  border-top: solid 1px #00000021;
}

.detail-blesser {
  font-weight: bold;
  font-size: 14px;
  padding-left: 8px;
}

.rc-information-joueur-zone-info-blesser-inner {
  display: flex;
  justify-content: space-between;
}

.rc-information-joueur-zone-info-troupe-montant {
  font-weight: bold;
}

.rc-information-joueur-zone-info-mort-montant {
  color: #9e0000;
  font-weight: bold;
  cursor: pointer;
}

.rc-information-joueur-zone-info-blesser-grave-montant {
  color: #9e0000;
  font-weight: bold;
  cursor: pointer;
}

.rc-information-joueur-zone-info-blesser-leger-montant {
  font-weight: bold;
  cursor: pointer;
}

.rc-information-zone-pillage {
  padding: 2px 10px 2px 10px;
}

.rc-information-zone-pillage-inner {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.rc-information-zone-pillage-inner-montant {
  margin: 0 10px 0 10px;
}

.zone-detail-bataille {
  margin: 5px 25px 25px;
  padding: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 12%) 20%, rgb(98 44 13 / 18%) 57%, rgb(98 44 13 / 12%) 80%, rgb(98 44 13 / 4%) 100%);
}

.image-recompense-message {
  height: 100%;
  padding:14px 1px 1px 1px;
}

.image-trophee-message {
  height: 100%;
  padding:14px 1px 1px 1px;
}

.nombre-pack-message {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #e4d4d4;
  font-size: 11px;
  font-weight: bold;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.quantite-recompense-message {
  position: absolute;
  display: flex;
  width: 100%;
  height: 11px;
  top: 0;
  font-size: 9px;
  justify-content: center;
  align-items: center;
  background-color: #0000005e;
  color: #e4d4d4;
}

.zone-detail-recompense-inventaire {
  display: flex;
  width: 200px;
  height: 350px;
  padding: 5px;
  background-color: #00000045;
  border-radius: 5px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.zone-recompense-rarete {
  display: flex;
  color: white;
  padding: 0 6px 0 6px;
  font-weight: bold;
  border-radius: 2px;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-size:12px;
}

.zone-detail-recompense-inventaire-titre {
  font-weight: bold;
}

.zone-detail-recompense-inventaire-description {
  color: #f7f4f4;
  margin: 0 10px;
  font-size: 11px;
  padding: 5px;
  background-color: #00000045;
  border-radius: 5px;
}

.zone-detail-recompense-inventaire-input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.zone-detail-recompense-inventaire-nbpack {
  font-size: 12px;
}

.zone-detail-recompense-inventaire-button {

}

.zone-recompense-selected {
  box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 79%);
}

.zone-recompense-message {
  position: relative;
  height: 70px;
  width: 70px;
  margin: 5px 5px 5px 5px;
  border-radius: 4px;
  border: 2px solid rgb(141 110 96 / 85%);
  cursor: pointer;
}

.zone-trophee-message {
  position: relative;
  height: 48px;
  width: 48px;
  margin: 5px 5px 5px 5px;
  border-radius: 28px;
  border: 2px solid rgb(141 110 96 / 85%);
  cursor: pointer;
}

.titre-accomplissement {
  min-width:300px;display: flex;justify-content: center;font-weight: bold;font-size: 16px;
}

.rarete-accomplissement {
  width:80px;display: flex;justify-content: center;font-weight: bold;font-size: 16px;
}

.zone-trophee-lane-color {
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
}

.rallier-rc-profil-zone-legion {
  top: 20px;
  left: 6px;
  border-radius: 20px;
  height: 40px;
  width: 40px;
}

.rallier-zone-parent {
  display: flex;
  background-color: #00000045;
  padding: 2px 4px;
  border-radius: 5px;
  margin: 8px 0 0 0;
}

.rallier-zone-parent:hover {
  background-color: #00000069;
}

#sous-menu-renfort-content-1, #sous-menu-renfort-content-2, #sous-menu-renfort-content-3 {
  display: flex;
  width: 400px;
  flex-direction: column;
  align-items: center;
}

.retour-arriere {
  display: flex;
  height: 40px;
  width: 40px;
  background-color: #0000004d;
  position: absolute;
  top: 34px;
  left: -75px;
  transform: rotate(90deg);
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  box-shadow: 1px 1px 8px 0px rgb(20 24 20 / 79%);
  cursor: pointer;
}


.retour-arriere:hover {
  background-color: #00000069;
}

.position-groupement-cible {
  position: absolute;
  font-size: 10px;
  top: -14px;
  left: 0px;
  font-weight: 600;
  font-style: italic;
  color: #e1e1e1;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.position-groupement-cible-merveille {
  position: absolute;
  font-size: 10px;
  top: -14px;
  left: -7px;
  font-weight: 600;
  font-style: italic;
  color: #e1e1e1;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.contenu-guerre-inside {
  display:flex;
  flex-direction: row;
  width:100%;
}

#contenu-guerre-1, #contenu-guerre-2 {
  display: flex;
  width:600px;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 991px) {
  #contenu-guerre-1, #contenu-guerre-2 {
    width: 400px;
  }

  .contenu-guerre-inside {
    flex-wrap: wrap;
  }
}

.affichage-heure-retour {
  position: absolute;
  font-size: 11px;
  height:100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.affichage-heure-retour-carte {
  position: absolute;
  font-size: 8px;
  height:100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.rallier-zone-gauche, .rallier-zone-droite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.rallier-zone-milieu {
  margin: 0 5px 0 5px;
}

.rallier-zone-milieu-haut {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  height:25px;
  font-size:12px;
}

.renfort-zone-milieu-haut {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:25px;
  font-size:12px;
}

.pointer {
  cursor: pointer;
}

.rallier-zone-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.renfort-zone-milieu-milieu {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.rallier-zone-milieu-milieu {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.detail-troupe-ralliement {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 6px 0;
  font-weight: bold;
}

.detail-troupe-ralliement-info {
  background-color: #00000045;
  padding: 2px 4px;
  border-radius: 5px;
  font-size: 10px;
}

.detail-troupe-ralliement-attaquant-info {
  background-color: #00000045;
  padding: 2px 4px;
  border-radius: 5px;
  margin: 8px 0 0 0;
  display:flex;
  align-items: center;
  justify-content: space-between;
  cursor:pointer;
}

.leader-attaque-grouper {
  position: absolute;
  top: -2px;
  left: -2px;
}

.detail-troupe-ralliement-attaquant-info:hover {
  background-color: #00000069;
}

.detail-troupe-ralliement-attaquant-info-box {
  background-color: #00000026;
  padding: 2px 4px;
  border-radius: 5px;
}

.selectAllTroupeGuerre {
  position: absolute;
  right: 34px;
  top: -10px;
}

#contenu-guerre-1 {
  display: flex;
  width:400px;
  flex-direction: column;
  align-items: center;
}

.zone-information-rallier {
  position: fixed;
  background: radial-gradient(rgb(240, 223, 195), rgb(240, 221, 191), rgb(240, 221, 191), rgb(210, 183, 150));
  max-height: 600px;
  width: 395px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  padding: 8px 8px 3px;
  color: black;
  text-align: left;
  border-color: rgb(159, 134, 94);
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
  z-index: 501;
}

.zone-rallier-interface-unites {
  position: relative;
  display: flex;
  min-height: 100px;
  max-height: 230px;
  width: 100%;
  padding: 10px 5px 5px 12px;
  margin-top: 10px;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
}

.rallier-zone-milieu-milieu-gauche {
  margin: 0 5px 0 5px;
}

.rallier-zone-milieu-milieu-milieu {
  width:300px;
  padding: 2px 6px;
  border-radius: 5px;
  background-color: #00000033;
  margin: 2px 5px 2px 5px;
}

.renfort-zone-milieu-milieu-milieu {

}

.rallier-zone-milieu-milieu-milieu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rallier-zone-milieu-milieu-milieu-inner-nombre-uniter {
  color: white;
  font-weight: bold;
  font-size: 13px;
}

.rallier-zone-milieu-milieu-droite {

}

.rallier-zone-milieu-milieu-bas {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.rallier-coordonner {
  position:relative;
  font-size: 11px;
}

.zone-recompense-1 {
  background: radial-gradient(ellipse at top, #b3b2b2, #00000029), radial-gradient(ellipse at bottom, #363736, #00000082);
}

.zone-recompense-2 {
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
}

.zone-recompense-3 {
  background: radial-gradient(ellipse at top, #165ac0, #00000029), radial-gradient(ellipse at bottom, #091526, #00000082);
}

.zone-recompense-4 {
  background: radial-gradient(ellipse at top, #8a3cd2, #00000029), radial-gradient(ellipse at bottom, #0b030f, #00000082);
}

.zone-recompense-5 {
  background: radial-gradient(ellipse at top, #fa8d0b, #00000029), radial-gradient(ellipse at bottom, #180f00, #00000082);
}

.zone-recompense-6 {
  background: radial-gradient(ellipse at top, #d90000, #00000029), radial-gradient(ellipse at bottom, #160404, #00000082);
}

.btn-normal-aide {
  display: flex;
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 15px;
  right: 50%;
  transform: translate(-50%);
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  box-shadow: 0px 1px 6px 2px rgba(120, 190, 128, 0.79);
  border-style: solid;
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
  border-color: #274237;
  border-width: 2px;
  z-index: 1000;
  cursor: pointer;
}

.colorClass {
  color: #e4d4d4 !important;
}

.level-up-hero {
  display: flex;
  height: 26px;
  width: 26px;
  padding: 5px;
  margin: 2px;
  background-color: #d1bb99;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 2px solid rgb(141 110 96 / 85%);
  cursor: pointer;
}

.zone-statut {
  position: relative;
  border-radius: 9px;
  height: 18px;
  width: 18px;
}


.zone-statut-green {
  border: 1px solid #58b863;
}

.zone-statut-blue {
  border: 1px solid #165ac0;
}

.zone-statut-orange {
  border: 1px solid #fa8d0b;
}

.zone-statut-grey {
  border: 1px solid #d3d3d3;
}

.zone-statut-yellow {
  border: 1px solid #b49b00;;
}

.zone-statut-purple {
  border: 1px solid #8f0bfa;
}

.zone-statut-red {
  border: 1px solid #d90000;
}

.zone-statut-black {
  border: 1px solid #574343;
}

.zone-statut-inner-green {
  background: radial-gradient(ellipse at top, #58b863, #00000029), radial-gradient(ellipse at bottom, #14401f, #00000082);
}

.zone-statut-inner-blue {
  background: radial-gradient(ellipse at top, #165ac0, #00000029), radial-gradient(ellipse at bottom, #091526, #00000082);
}

.zone-statut-inner-orange {
  background: radial-gradient(ellipse at top, #fa8d0b, #00000029), radial-gradient(ellipse at bottom, #180f00, #00000082);
}

.zone-statut-inner-yellow {
  background: radial-gradient(ellipse at top, #fad90b, #00000029), radial-gradient(ellipse at bottom, #181700, #00000082);
}

.zone-statut-inner-grey {
  background: radial-gradient(ellipse at top, #d3d3d3, #00000029), radial-gradient(ellipse at bottom, #181700, #00000082);
}

.zone-statut-inner-purple {
  background: radial-gradient(ellipse at top, #8f0bfa, #00000029), radial-gradient(ellipse at bottom, #0f0018, #00000082);
}

.zone-statut-inner-red {
  background: radial-gradient(ellipse at top, #d90000, #00000029), radial-gradient(ellipse at bottom, #160404, #00000082);
}

.zone-statut-inner-black {
  background: radial-gradient(ellipse at top, #5b4444, #00000029), radial-gradient(ellipse at bottom, #160404, #00000082);
}

.image-icone-statut {
  height: 10px;
}

.image-icone-statut-petit {
  height: 8px;
}

.zone-statut-inner {
  display: flex;
  border: 1px solid rgb(197 197 197);
  border-radius: 9px;
  height: 16px;
  width: 16px;
  align-items: center;
  justify-content: center;
}

.triomphes-info-titre {
  margin-top: 5px;
  background: linear-gradient(90deg, rgb(98 44 13 / 4%) 0%, rgb(98 44 13 / 30%) 20%, rgb(98 44 13 / 36%) 57%, rgb(98 44 13 / 30%) 80%, rgb(98 44 13 / 4%) 100%);
  display: flex;
  color: #f0ddbf;
  font-weight: bold;
  justify-content: center;
}

.triomphes-ligne {
  display: flex;
  height: 28px;
  width: 350px;
  justify-content: space-between;
  align-items: center;
}

.triomphes-ligne-1, .triomphes-ligne-2, .triomphes-ligne-3 {
  height: 34px;
}

.medaille-classement {
  position:absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e4d4d4;
  font-size: 12px;
  font-weight: bold;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.input-action {
  display: flex;width: 90px;
  justify-content: center;
  font-weight: bold;
  background-color: #e3cdae;
  text-align: center;
  vertical-align: middle;
  margin-left: 10px;
  border-width: 2px;
  border-style: none;
}

.input-action-form {
  display: flex;width: 90px;
  justify-content: center;
  font-weight: bold;
  background-color: #e3cdae;
  text-align: center;
  vertical-align: middle;
  margin-left: 10px;
  border-width: 2px;
  border-style: none;
}

.image-close {
  height:24px;
}

.bouton-close {
  position: absolute;
  display: flex;
  top: 4px;
  right: 4px;
  height: 32px;
  width: 32px;
  padding: 2px;
  border-radius: 3px;
  border: 1px solid rgb(56 32 21 / 85%);
  box-shadow: 0 0 4px 1px rgb(20 24 20 / 79%);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
}

.titre-aide {
  font-weight: bold;
  color: rgb(106, 24, 45);
  display: flex;
  height: 30px;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
  align-items: center;
  justify-content: center;
}

.point-context-aide {
  margin-bottom: 5px;
  font-style: italic;
  font-size: 12px;
}

@media (max-width: 600px) {
  .zone-recompense-message {
    height: 50px;
    width: 50px;
  }

  .zone-trophee-message {
    height: 26px;
    width: 26px;
  }

  .image-trophee-message {
    padding:5px 1px 1px 1px;
  }

  .titre-accomplissement {
    font-size: 13px;
  }

  .rarete-accomplissement {
    font-size: 13px;
  }

  .quantite-recompense-message {
    font-size:7px;
    height: 9px;
  }

  .nombre-pack-message {
    font-size:8px;
  }
}

.zone-lien-coordonnee {
  display: flex;
  width: 100%;
  font-size: 11px;
  align-items: center;
  justify-content: center;
}

.zone-triomphe-niveau {
  display: flex;
  width: 40px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translate(-50%);
  z-index:10;
  color: #e4d4d4;
  font-size: 11px;
  font-weight: bold;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.zone-triomphe-tagalliance {
  display: flex;
  width: 50px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%);
  z-index:10;
  color: #e4d4d4 !important;
  font-size: 12px;
  font-weight: bold;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.blue-class-tag-alliance {
  color: #049dd6 !important;
}

.white-class-tag-alliance {
  color: #e4d4d4 !important;
}

.zone-grotte {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85px;
}

.zone-grotte-cadrillage {
  display: flex;
  max-height: 200px;
  overflow-y: auto;
  width: 190px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.triomphes-ligne:hover {
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.triomphes-ligne-alliance {
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.btn-normal-aide:hover {
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

@media (max-width: 991px) {
  .btn-normal-aide {
    bottom: 180px;
    right: 6px;
  }

  .puissance-total-joueur {
    font-size: 13px;
  }
}

.btn-normal-xl-darkgreen:active {
  color: #f8f4f4;
}
.btn-normal-xl-darkgreen:focus {
  color: #f8f4f4;
}

.btn-normal-xl-green:active {
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}
.btn-normal-xl-green:focus {
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

.btn-normal-l-red:active {
  color: #f8f4f4 !important;
  background-color: #4b2323e6 !important;
  border-color:#4b2323e6 !important;
}
.btn-normal-l-red:focus {
  color: #f8f4f4 !important;
  background-color: #4b2323e6 !important;
  border-color:#4b2323e6 !important;
}

.btn-normal-l-red:hover {
  color: #f8f4f4 !important;
  background-color: #4b2323e6 !important;
  border-color:#4b2323e6 !important;
}

.btn-normal-xl-red:active {
  color: #f8f4f4;
}
.btn-normal-xl-red:focus {
  color: #f8f4f4;
}

.btn-normal-xl-red:hover {
  color: #f8f4f4;
  background-color: #4b2323e6;
  border-color:#4b2323e6;
}

.btn-normal-xl-grey:active {
  color: #f8f4f4;
}
.btn-normal-xl-grey:focus {
  color: #f8f4f4;
}

.btn-normal-xl-grey:hover {
  color: #f8f4f4;
  background: radial-gradient(ellipse at top, #a39393, #00000029), radial-gradient(ellipse at bottom, #3a2e2e, #00000082);
  border-color: #4f4242;
}


.button-select {
  height:32px;
  font-size: 14px;
  font-weight: 700;
  color: #f8f4f4 !important;
  background-color: #375146e6 !important;
  border-color: #375146e6 !important;
}

@media (max-width: 767px) {
  .btn-normal-l-green {
    font-size: 11px;
  }

  .button-select {
    font-size: 12px;
  }

  .btn-normal-l-teal {
    font-size: 10px;
  }
}

.bord-cadre-horizontale {
  height:40px;
  width:100%;
}

.bord-cadre-verticale {
  width:40px;
}

#interface-smoke-fin-partie {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9500;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  opacity: 0.7;
}

#interface-smoke-fin-partie:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(120, 190, 128, 0.79) , rgba(107, 181, 116, 0.79), rgba(93, 157, 100, 0.79), rgba(120, 190, 128, 0.79), rgba(120, 190, 128, 0.79));
  mix-blend-mode: color;
  pointer-events: none;
}

#video-interface-fin-partie {
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index:9500;
}

#interface-fin-partie {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 450px;
  min-height: 132px;
  color: #f8f4f4;
  font-size: 14px;
  font-weight: 800;
  border-radius: 3px;
  box-shadow: 0px 2px 14px 5px rgba(120, 190, 128, 0.79);
  cursor:default;

  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
  /*background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom, rgba(10, 10, 10, 0.5);*/
  /*background: url(../images/evenementImage/marbe-noir.jpg) no-repeat left bottom, rgba(10, 10, 10, 0.5);*/
}

.interface-carre-joueur {
  background-color: rgba(10, 10, 10, 0.5);
  height:40px;
  width:40px;
  margin-left: 5px;
  margin-right: 5px;
}

.interface-carre-joueur-ready {
  background-color: rgba(10, 10, 10, 0.5);
  height:40px;
  width:40px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0px 1px 5px 2px rgba(75, 218, 101, 0.84);
  background: linear-gradient(0deg,
  rgb(75 218 101 / 77%) 0%,  rgb(65 180 85 / 84%) 4%, rgb(60 176 81 / 84%) 8%, rgb(56 172 77 / 84%) 13%,  rgb(37 144 57 / 84%) 17%,  rgb(37 120 51 / 84%) 21%,  rgb(30 95 41 / 84%) 25%,  rgb(26 100 39 / 84%) 38%,  rgb(17 66 26 / 84%) 50%,  rgb(14 55 21 / 84%) 53%,  rgb(9 42 15 / 84%) 58%,  #0000001f 62%,  rgb(0 0 0 / 83%) 75%,  #000000 100%);
}

.interface-carre-joueur-not-ready {
  background-color: rgba(10, 10, 10, 0.5);
  height:40px;
  width:40px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0px 1px 5px 2px rgb(225 23 23 / 84%);
  background: linear-gradient(0deg, rgb(194 29 29 / 77%) 0%, rgb(192 26 26 / 84%) 4%, rgb(172 24 24 / 84%) 8%, rgb(127 19 19 / 84%) 13%, rgb(101 22 22 / 84%) 17%, rgb(99 25 25 / 84%) 21%, rgb(95 30 30 / 84%) 25%, rgb(100 26 26 / 84%) 38%, rgb(66 17 17 / 84%) 50%, rgb(55 14 14 / 84%) 53%, rgb(42 9 9 / 84%) 58%, #0000001f 62%, rgb(0 0 0 / 83%) 75%, #000000 100%);
}

.image-interface-carre-joueur {
  background-image: url("../images/evenementImage/user.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:5px;
  height:30px;
  width:30px;
}

#interface-ligne-joueurs {
  display: flex;
}

.image-interface-carre-joueur-ready {
  background-image: url("../images/evenementImage/user-ready.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:5px;
  height:30px;
  width:30px;
}

#interface-fin-partie-arriere-fond {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 100%;
  height: 100%;
  border: 3px;
  /*background: radial-gradient(ellipse at top, #94d59b, transparent), radial-gradient(ellipse at bottom, #33563c, #00000033);*/
  background: linear-gradient(-45deg,
  #94d59b8f 0%,
  rgba(121, 176, 127, 0.79) 13%,
  rgba(76, 121, 81, 0.89) 17%,
  rgba(52, 96, 59, 0.79) 21%,
  rgba(46, 71, 49, 0.72) 25%,
  #5ca5648f 38%,
  #3d8545c9 50%,
  rgba(38, 83, 44, 0.59) 53%,
  rgba(87, 183, 97, 0.69) 58%,
  #25732eb8 62%,
  rgba(113, 172, 119, 0.56) 75%,
  #33563cc9 100%);
  background-size: 400% 400%;
  animation:gradient 20s ease infinite;
  box-shadow: 0px 2px 14px 10px rgba(120, 190, 128, 0.79);
  /*box-shadow: inset 0 0 200px hsla(0,0%,0%,.4);*/
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

#interface-title {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 50px;
  background-color: rgba(10, 10, 10, 0.6);
  align-items: center;
}

#interface-content {
  height: 90px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}

#interface-nombre-joueur-ready {
  font-size: 12px;
  color:rgba(220,218,218,0.9);
  font-weight: 700;
}

#interface-fin-partie-inner {
}

#interface-fin-partie-inner-bottom {
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.closeEndGameInterface {
  height:30px;
  width:30px;
  background-color: rgba(10, 10, 10, 0.5);
  cursor:pointer;
  padding:4px;
  border-radius: 3px;
}

.closeEndGameInterface:hover {
  background-color: rgba(10, 10, 10, 0.3);
}

.closeEndGameImage {
  height:100%;
}

.actived-zone {
  display: block !important;
}

.desactived-zone {
  display: none !important;
}

/* Loader*/
.lds-roller {
  position: absolute;
  top: 3px;
  right: -42px;
  width: 80px;
  height: 80px;
  transform-origin: 0px 0px;
  transform: scale(0.4);
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dfc;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/* END event */


.ecriturepetitmessage {
  font-size: 7px;
}
@media (min-width: 767px) {
  .ecriturepetitmessage {
    font-size: 13px;
  }
}

.go-to-top {
  cursor: pointer;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #999;
  font-size: 20px;
  text-align: center;
  position: fixed;
  bottom: 10px;
  z-index: 10;
  line-height: 1.4;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  right: 10px;
  right: -ms-calc(-594.5%);
  -webkit-transform: translateY(-60%);
  -moz-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  -o-transform: translateY(-60%);
  visibility: hidden;
  opacity: 0;
  scroll-behavior: smooth;
}

.go-to-top.active {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  visibility: visible;
  opacity: 1;
  z-index: 1001;
}

.container-flex {
  display: inline-flex;
  align-items: center;
  width:100%;
}

.child-flex-title-candidature-nomalliance {
  width: 33%;
  margin: 0px 3px 0px 2px;
}

.child-flex-title-candidature-puissance {
  width: 35%;
  margin: 0px 3px 0px 2px;
}

.child-flex-title-candidature-typealliance {
  width: 16%;
  margin: 0px 3px 0px 2px;
}

.child-flex-title-candidature-membre {
  width: 16%;
  margin: 0px 3px 0px 2px;
}

.child-flex-title-message-checkbox {
  width: 20px;
  margin-left: 10px;
}
.child-flex-title-message-pseudo {
  width: 70px;
  min-width: 55px;
  margin: 0px 1px 0px 1px;
}
@media (min-width: 767px) {
  .child-flex-title-message-pseudo {
    width: 120px;
    min-width: 120px;
    margin: 0px 3px 0px 2px;
  }
}
.child-flex-title-conv-pseudo {
  width: 70px;
  margin: 0px 1px 0px 1px;
}
@media (min-width: 450px) {
  .child-flex-title-conv-pseudo {
    width: 120px;
    margin: 0px 3px 0px 2px;
  }
}
@media (min-width: 1000px) {
  .child-flex-title-conv-pseudo {
    width: 170px;
    margin: 0px 3px 0px 2px;
  }
}
.child-flex-title-message-info {
  width: 22px;
}
.child-flex-title-message-content {
  margin-right: auto;
}
.child-flex-title-message-date {
  margin-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
  float: right;
}

.panel-default>.panel-heading {
  background: radial-gradient(#f0dfc3, #f0ddbf,#e3c8aa, #d2b796) !important;
}

.panel-group .panel+.panel {
  margin-top: 0px;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: #b0151500 !important;
  background: radial-gradient(#f0ddc0, #d2b796) !important;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  border-top: 1px solid #caa370;
  background: radial-gradient(#f0ddc0, #d2b796);
}

.table-chat>tbody>tr>td, .table-chat>tbody>tr>th, .table-chat>tfoot>tr>td, .table-chat>tfoot>tr>th, .table-chat>thead>tr>td, .table-chat>thead>tr>th {
  border: none !important;
  background: none !important;
}

.panel-group .panel {
  border-radius: 0px 0px 0px 0px !important;
  border: 1px solid rgb(56 32 21) !important;
}

.panel {
  margin-bottom: 20px;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
}

.panel-heading {
  padding: 0px 0px !important;
}

.image-calendrier-avent {
  background: url(../images/sapinnoel.png) no-repeat left bottom;
  height: 512px;
  width: 758px;
  z-index: -1;
  -o-background-size: cover !important;
  -moz-background-size: cover !important;
  -webkit-background-size: cover !important;
  background-size: cover !important;
}

.case-calendrier {
  width:50px;
  height:50px;
}

.case-jour-calendrier {
  text-align: center;
  font-weight:Bold;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 1px;
  -webkit-box-shadow:  0px 0px 0px 0px #000;
  box-shadow:  0px 0px 0px 0px #000;
}

.case-jour-calendrier:hover {
  border-color: rgba(16, 105, 20, 0.8);
  color: #07730d;
  background-color: rgba(187, 150, 100, 0.8);
  border-style: inset;
  border-width: 1px;
  -webkit-box-shadow:  0px 0px 0px 0px #000;
  box-shadow:  0px 0px 0px 0px #000;
  padding: 0px 0px 0px 0px;
}

.lien-calendrier {
  color:#250909;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lien-calendrier:focus,
.lien-calendrier:hover,
.lien-calendrier:active {
  text-decoration: none;
}

.case-ouverte {
  background-color: rgb(165 11 14);
  color:#fbdb78 !important;
  font-weight:Bold;
  font-style:italic;
}

.legendMembre{
  background:radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  padding: 1px;
  margin: 10px;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 1px;
}

fieldset.scheduler-border {
  border: 1px groove #d9c5ac !important;
  padding: 0 0.4em 0.4em 0.4em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow:  0px 0px 0px 0px #000;
  box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width:auto;
  padding:0 10px;
  border-bottom:none;
}

.recompense {
  color: #419641;
}

.no-recompense {
  color: #828080;
}

.titre-rgpd {
  font-weight: bold;
}

#container {
  height: 400px;
}

#container-stat-1,#container-stat-2,#container-stat-3,#container-stat-4,#container-stat-5 {
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-radius: 4px;
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.ul-liste-rgpd{
  padding-left:20px;
}
.color-nord-proche-on,
.color-nord-est-proche-on,
.color-est-proche-on,
.color-sud-est-proche-on,
.color-sud-proche-on,
.color-sud-ouest-proche-on,
.color-ouest-proche-on,
.color-nord-ouest-proche-on,
.color-nord-loin-on,
.color-nord-est-loin-on,
.color-est-loin-on,
.color-sud-est-loin-on,
.color-sud-loin-on,
.color-sud-ouest-loin-on,
.color-ouest-loin-on,
.color-nord-ouest-loin-on {
  background-color:#9d5b2e;
}

.tile-square{
  height:30px;
  width:30px;
  text-align:center;
  font-weight: bold;
}

.icone-success{
  color:#0a8f13;
}

.icone-fail{
  color:red;
}

.menu-insectes{
  color:white;
}

#zone-evenement {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 220px;
  height: 78px;
  z-index: 10000;
  color: #f8f4f4;
  box-shadow: 0px 2px 14px 5px rgb(120 190 128 / 79%);
  background: url(../images/evenementImage/image-background.jpg) no-repeat left bottom;
}

#zone-evenement-titre {
  background-color: rgba(10, 10, 10, 0.6);
  width: 100%;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  justify-content: center;
}

#zone-evenement-contenu {
  padding: 7px;
  font-size: 14px;
}

#arrierefond-jeu{
  background:url('../images/NAWimagesImportante/artwork_with logo_11revised-sanstitle.jpg') no-repeat center bottom;
  height:100%;
  position:fixed;
  width:100%;
  z-index:-1;
  top:0;
  -o-background-size: cover !important;
  -moz-background-size: cover !important;
  -webkit-background-size: cover !important;
  background-size: cover !important;
  min-height:120vh;
}

#arrierefond-event{
  background:url('../images/evenementImage/image-background.jpg') repeat left bottom;
  height:100%;
  position:fixed;
  width:100%;
  z-index:-1;
  top:0;
  min-height:120vh;
}

.article-image{
  width:70%;
  margin-right:15%;
  margin-left:15%;
  padding-top:40px;
  padding-bottom:10px;
}

.mapTiles{
  height:34px;
  width:34px;
  border:1px solid rgb(172, 163, 163);
}

.cadreExterieur{
  margin: 0 0.2% 0 0.2%;
  width: 99.6%;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  padding: 3%;
  border-color: #9f865e;
  border-style: solid;
  border-width: 1px;
}

.eclaireTile{
  border-color: rgba(61, 38, 7, .8);
  border-style: solid;
  border-width: 1px;
}

.form-control{
  text-align: center;
  vertical-align: middle;
  padding: 0px 0px;
}

.click-cursor {
  cursor: pointer;
}

.svg-icone-max-width{
  cursor: pointer;
  margin:0px auto;
  max-height:150px;
  max-width:100%;
}

.svg-icone-44{
  cursor: pointer;
  margin:0px auto;
  height:44px;
}

.svg-icone-36{
  cursor: pointer;
  margin:0px auto;
  height:36px;
}

.svg-icone-32{
  cursor: pointer;
  margin:0px auto;
  height:32px;
}

.svg-icone-28{
  cursor: pointer;
  margin:0px auto;
  height:28px;
}

.svg-icone-24{
  cursor: pointer;
  margin:0px auto;
  height:24px;
}

.svg-icone-20{
  cursor: pointer;
  margin:0px auto;
  height:20px;
}

.svg-icone-17{
  cursor: pointer;
  margin:0px auto;
  height:17px;
}

.svg-icone-16{
  cursor: pointer;
  margin:0px auto;
  height:16px;
}

.svg-icone-15{
  cursor: pointer;
  margin:0px auto;
  height:15px;
}

.svg-icone-14{
  cursor: pointer;
  margin:0px auto;
  height:14px;
}

.svg-icone-12{
  cursor: pointer;
  margin:0px auto;
  height:12px;
}

@media (min-width: 577px) and (max-width: 991px) {
  .svg-icone-16{
    cursor: pointer;
    margin:0px auto;
    height:14px;
  }
}

.autoscroll{
  overflow-x: auto; 
}

.text-align-left{
  text-align: left !important;
}

.text-align-center{
  text-align: center !important;
}

.text-align-right{
  text-align: right !important;
}

#slider12a .slider-track-high, #slider12c .slider-track-high {
	background: blue;
}

#slider12b .slider-track-low, #slider12c .slider-track-low {
	background: red;
}

#slider12c .slider-selection {
	background: brown;
}

.boutonspecial{
}

.compass-overflow{
  margin-left: 0px;
  margin-top: 2px;
  position: absolute;
}

.overflow-table-border{
  border: 1px solid #8c4319!important;
}

.centerAligne{
  text-align: center;
  vertical-align: middle;
}

.center-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputcentre{
  text-align: center;
  vertical-align: middle;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.inputtaille{
  max-height:28px;
  max-width:170px;
}

.activeBorder{
  border-style: solid;
  border-width: 1px;
}

table-striped>tbody>tr:nth-of-type(odd){
  background:radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  line-height: 1.42857143;
  text-align: left;
  vertical-align: middle;
  /*border-top: 1px solid #ddd;*/
  padding: 0px;
}

.cadreCentral{
  margin:0 12% 0 12%;
  width:76%;
  background-color:#f5be75;;
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreDevEnCours{
  margin:0 5% 0 5%;
  width:90%;
  background-color:#f5be75;;
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreDescription{
  margin:0 3% 0 3%;
  width:94%;
  background-color:#f5be75;;
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreGrand{
  margin:0 3% 0 3%;
  width:94%;
  background-color:#f5be75;;
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreTresGrand{
  margin:0 0.2% 0 0.2%;
  width:99.6%;
  background-color:#f5be75;;
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreProposition{
  margin:0 3% 0 3%;
  width:94%;
  background-color:#f5be75;;
  padding:3%;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 4px;
}

.cadreChat{
  background-color:#f5be75;
  border-color: rgba(61, 38, 7, .8);
  border-style: inset;
  border-width: 1px;
}
.clickme:hover {
  cursor: pointer;
  border-style:inset;
  border-width: 1px;
  border-color: #3a2911de;
}

.button-categorie-compte {
  padding:5px;
  margin-bottom:3px;
  cursor:pointer;
  display:inline-block;
  color:rgb(51, 51, 51);
  border:solid;
  border-width:1px;
  white-space: nowrap;
  font-weight: bold;
}

@media (max-width: 1111px) {
  .menu-messagerie{
    display:none;
  }
}
.vu-mobile{
  display:none;
}
.display-zone-mouvement-mobile {
  display:none;
}
.display-zone-mouvement-pc {
}
.vu-pc{
  display:block;
}

.vu-mobile-mouvement{
  display:none;
}
.vu-pc-mouvement{
  display:inline-block;
}
@media (max-width: 770px) {
  .vu-mobile{
    display:block;
  }
  .vu-pc{
    display:none;
  }
  .display-zone-mouvement-mobile {
    display: table-cell;
    vertical-align: middle;
  }
  .display-zone-mouvement-pc {
    display:none;
  }
  .vu-mobile-mouvement{
    display:inline-block;
  }
  .vu-pc-mouvement{
    display:none;
  }
}
@media (max-width: 360px) {
  .boutonPrerequis{
    width:100%;
    padding-left:1px;
  }
}
@media (max-width: 500px) {
  body{
    background-image: url(../images/backgroundv3mobile.jpg);
    background-position: left bottom;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .cadreCentral{
    margin:0px 1px 0px 1px;
    width:98%;
    background-color:#f5be75;;
    padding:3%;
    border-color: rgba(61, 38, 7, .8);
    border-style: inset;
    border-width: 4px;
  }

  .cadreDevEnCours{
    margin:0px 1px 0px 1px;
    width:98%;
    background-color:#f5be75;;
    padding:3%;
    border-color: rgba(61, 38, 7, .8);
    border-style: inset;
    border-width: 4px;
  }
}

.flecheDroite {
  background:url(../images/flechedroite.png);
  cursor: pointer;
  height: 16px;
  width: 16px;
}

.flecheGauche {
    background:url(../images/flechegauche.png);
    cursor: pointer;
    height: 16px;
    width: 16px;
}

.boutonspecialactive {
  color: #f8f4f4 !important;
  background: #375146e6 !important;
  border-color: #375146e6 !important;
}

.navbarmargin{
  margin-left:150px;
}

@media (min-width: 577px) and (max-width: 991px) {
  body {
    font-family: Verdana;
    background:radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
    font-size: 12px;
  }
  .navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 13px;
    line-height: 20px;
  }
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
  padding: 0px;
  /*text-align: center;*/
}

@media (max-width: 1200px) {
  .navbarmargin{
    margin-left:60px;
  }
}

@media (max-width: 1000px) {
  .navbarmargin{
    margin-left:50px;
  }
}

@media (max-width: 900px) {
  .navbarmargin{
    margin-left:37px;
  }
}

@media (max-width: 840px) {
  .navbarmargin{
    margin-left:68px;
  }
}

@media (max-width: 700px) {
  .navbarmargin{
    margin-left:53px;
  }
}

@media (max-width: 600px) {
  .navbarmargin{
    margin-left:42px;
  }
}

@media (max-width: 550px) {
  .navbarmargin{
    margin-left:31px;
  }
}

@media (max-width: 500px) {
  .navbarmargin{
    margin-left:22px;
  }
}

@media (max-width: 450px) {
  .navbarmargin{
    margin-left:12px;
  }
}

@media (max-width: 420px) {
  .navbarmargin{
    margin-left:6px;
  }
}

@media (max-width: 380px) {
  .navbarmargin{
    margin-left:2px;
  }
}

@media (max-width: 350px) {
  .navbarmargin{
    margin-left:2px;
  }
}

@media (max-width: 320px) {
  .navbarmargin{
    margin-left:1px;
  }
}

@media (max-width: 300px) {
  .navbarmargin{
    margin-left:0px;
  }
}


@media (max-width: 1200px) {
  .navbarmarginsimple{
    margin-left:60px;
  }
}

@media (max-width: 1000px) {
  .navbarmarginsimple{
    margin-left:50px;
  }
}

@media (max-width: 900px) {
  .navbarmarginsimple{
    margin-left:37px;
  }
}

@media (max-width: 840px) {
  .navbarmarginsimple{
    margin-left:98px;
  }
}

@media (max-width: 768px) {
  .cadrelogin{
    margin: 10px 3% 10px 3%;width: 94%;
    border-color: #9f865e;
    border-style: inset;
    border-width: 4px;
    padding: 20px 20px 10px 20px;
    background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  }
}

@media (max-width: 700px) {
  .navbarmarginsimple{
    margin-left:84px;
  }
}

@media (max-width: 600px) {
  .navbarmarginsimple{
    margin-left:70px;
  }
}

@media (max-width: 550px) {
  .navbarmarginsimple{
    margin-left:58px;
  }
}

@media (max-width: 500px) {
  .navbarmarginsimple{
    margin-left:45px;
  }
}

@media (max-width: 450px) {
  .navbarmarginsimple{
    margin-left:35px;
  }
}

@media (max-width: 420px) {
  .navbarmarginsimple{
    margin-left:29px;
  }
}

@media (max-width: 380px) {
  .navbarmarginsimple{
    margin-left:22px;
  }
}

@media (max-width: 350px) {
  .navbarmarginsimple{
    margin-left:17px;
  }
}

@media (max-width: 320px) {
  .navbarmarginsimple{
    margin-left:12px;
  }
}

@media (max-width: 300px) {
  .navbarmarginsimple{
    margin-left:9px;
  }
}



/*
@media (max-width: 576px) {
  body {
    font-family: Verdana;
    padding-top: 15%;
    background-color:rgb(224, 170, 99);
    
  }
}*/

#loader {
  bottom: 0;
  height: 175px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 175px;
}
#loader {
  bottom: 0;
  height: 175px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 175px;
}
#loader .dot {
  bottom: 0;
  height: 100%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 87.5px;
}
#loader .dot::before {
  border-radius: 100%;
  content: "";
  height: 87.5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(0);
  width: 87.5px;
}
#loader .dot:nth-child(7n+1) {
  transform: rotate(45deg);
}
#loader .dot:nth-child(7n+1)::before {
  animation: 0.8s linear 0.1s normal none infinite running load;
  background: #00ff80 none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+2) {
  transform: rotate(90deg);
}
#loader .dot:nth-child(7n+2)::before {
  animation: 0.8s linear 0.2s normal none infinite running load;
  background: #00ffea none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+3) {
  transform: rotate(135deg);
}
#loader .dot:nth-child(7n+3)::before {
  animation: 0.8s linear 0.3s normal none infinite running load;
  background: #00aaff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+4) {
  transform: rotate(180deg);
}
#loader .dot:nth-child(7n+4)::before {
  animation: 0.8s linear 0.4s normal none infinite running load;
  background: #0040ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+5) {
  transform: rotate(225deg);
}
#loader .dot:nth-child(7n+5)::before {
  animation: 0.8s linear 0.5s normal none infinite running load;
  background: #2a00ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+6) {
  transform: rotate(270deg);
}
#loader .dot:nth-child(7n+6)::before {
  animation: 0.8s linear 0.6s normal none infinite running load;
  background: #9500ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+7) {
  transform: rotate(315deg);
}
#loader .dot:nth-child(7n+7)::before {
  animation: 0.8s linear 0.7s normal none infinite running load;
  background: magenta none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+8) {
  transform: rotate(360deg);
}
#loader .dot:nth-child(7n+8)::before {
  animation: 0.8s linear 0.8s normal none infinite running load;
  background: #ff0095 none repeat scroll 0 0;
}
@keyframes load {
100% {
  opacity: 0;
  transform: scale(1);
}
}
@keyframes load {
100% {
  opacity: 0;
  transform: scale(1);
}
}

.categorieSelectionne{
  background:radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  font-weight: bold;
  box-shadow: 1px 1px 8px 5px rgb(20 24 20 / 79%);
}

.bold{
  font-weight: bold;
}

.green{
  color: rgb(130, 197, 87);
  font-weight: bold;
}

.blue{
  color: #337ab7 !important;
  font-weight: bold !important;
}

.black{
  color: black !important;
}

.normal{
  font-weight: normal;
}

.titreUnite{
  color:rgb(106, 24, 45);
  font-size:13px;
}

.titreUniteCaserne{
  position: absolute;
  top: -10px;
  left: 50%;transform: translate(-50%);
  font-family: 'BowlByOne', sans-serif;
  color: #f2e8dc;
  font-size: 14px;
  text-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.selectAllTroupeGuerreCarte{
  position: absolute;
  right: 57px;
  top: 0px;
}

@media (min-width: 992px) {
  .selectAllTroupeGuerreCarte{
    position: absolute;
    right: 62px;
    top: 0px;
  }
}

.navbar-inverse .navbar-brand .menuprincipale{
  color: rgb(130, 197, 87);
  background-color:rgba(39, 30, 24, 0);
  font-size: 14px;
}

a .menuprincipale{
  color: rgb(130, 197, 87);
  background-color:rgba(39, 30, 24, 0);
  font-size: 14px;
}

.carousel-control{
  color: gray;
}

.quete-not-selected{
  background: radial-gradient(ellipse at top, #e49e4c, #00000029), radial-gradient(ellipse at bottom, #403014, #00000082);
  border-color:#76582fe0;
}

.quete-selected, .quete-not-selected:hover{
  background: radial-gradient(ellipse at top, #9f6f2cde, #00000029), radial-gradient(ellipse at bottom, #403014, #00000082);
  border-color:#3a2911de;
  font-weight: bold;
}

.page-header{

}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
  background-color:transparent;
}

.cadre-quete img {
  position: absolute;
  top: 2px;
  left: 1px;
  height: 18px;
}

.color-nombre-recompense {
  color: green;
}

.titreNombreUnite{
  color:rgb(92, 184, 92);
  margin-right: 10px;
  font-size: 11px;
}

@media (min-width: 768px) {
  /* Survol d'image */
  .img-survol:active {
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -ms-transform: scale(5);
    -o-transform: scale(5);
    transform: scale(5);
    z-index: 500;
    box-shadow: 0 0 10px black;
  }

  .titreNombreUnite{
    color:rgb(92, 184, 92);
    margin-right: 10px;
  }

  .tile-square{
    height:50px;
    width:50px;
    text-align:center;
    font-weight: bold;
  }

  .compass-overflow{
    margin-left: 11px;
    margin-top: 11px;
    position: absolute;
  }
}

.taille-carte-inscription {

}

.img-survol {
  cursor: pointer;
  -webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
  -moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
  -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
  -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
  transition: all .5s cubic-bezier( .6, 2, .4, 1);
}


.quete-base {
  top:10px;
  left:2px;
  z-index:5;
}

.quete-bounce{
  -webkit-animation: bounce .43s ease infinite alternate;
  -moz-animation: bounce .43s ease infinite alternate;
  -o-animation: bounce .43s ease infinite alternate;
  animation: bounce .43s ease infinite alternate;
}

.message-bounce{
  -webkit-animation: bounce .43s ease infinite alternate;
  -moz-animation: bounce .43s ease infinite alternate;
  -o-animation: bounce .43s ease infinite alternate;
  animation: bounce .43s ease infinite alternate;
}

@keyframes bounce{
  from {transform: translateY(0);}
  to   {transform: translateY(-4px);}
}

@media (min-width: 768px) {
  .color-nombre-recompense {
    color: green;
  }

  .quete-base{
    top: 0px;
    left:12px;
  }

  @keyframes bounce{
    from {transform: translateY(0);}
    to   {transform: translateY(-4px);}
  }
}


.carousel-page{
    width:100%;
    height:100%;
    background-color: rgba(255, 255, 255, .4);
    opacity: 0.9;
}

.background-cadre{
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
}

.navbar-inverse .navbar-nav>li>a {
    color: rgb(130, 197, 87);
    background-color:rgba(39, 30, 24, 0);
}

.navbar-inverse .navbar-brand{
  background-color:rgba(39, 30, 24, 0);
  color: rgb(255, 205, 140);
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 1px 1px;
}

.navbar-nav>li>a {
  padding-bottom: 1px;
  padding-top: 12px;
}

@media (min-width: 1101px) and (max-width: 1200px) {
  .nav>li>a {
    position: relative;
    display: block;
    /*padding: 15px 15px;*/
  }
}

@media (min-width: 1201px) and (max-width: 1300px) {
  .nav>li>a {
    position: relative;
    display: block;
    /*padding: 15px 25px;*/
  }
}

@media (min-width: 1301px) and (max-width: 1500px) {
  .nav>li>a {
    position: relative;
    display: block;
    /*padding: 15px 35px;*/
  }
}

@media (min-width: 1501px) and (max-width: 1900px) {
  .nav>li>a {
    position: relative;
    display: block;
    /*padding: 15px 45px;*/
  }
}

.ecriture{
  font-size:95%;
}

.ponte{
  height: 20%;
  width:60px;
  border-radius: 50%;
  border-color: white;
  background-color: rgba(61, 38, 7, .8);
  text-align:center;
}

.construction{
  height: 20%;
  width:60px;
  border-radius: 50%;
  border-color: white;
  background-color: rgba(61, 38, 7, .8);
  text-align:center;
}

.ecrituretitre{
  font-size:105%;
  font-weight : bold;
}

.ecriturepagetitre{
  text-align: center;
  font-size:1.4em;
  font-weight : bold;
  margin-top: 0px;
}

@media (min-width: 768px) {
  .chatzone{
    padding:0px 6px;
    margin-left:20%;
    margin-bottom:20px;
    margin-top:10px;
  }
}

@media (min-width: 768px) {
  .chatzonepremier{
    padding:0px 6px;
    margin-left:20%;
    margin-bottom:20px;
    margin-top:10px;
  }
}

.ecrituremessage{
  font-size:8px;
}



@media (min-width: 768px) {
  .ecrituremessage{
    font-size:15px;
  }
}

.pseudomessage{
  font-size:8px;
}

@media (min-width: 768px) {
  .pseudomessage{
    font-size:15px;
  }
}

.imageponte{
  margin-top:70%;
  margin-bottom:5%;
  width: 40%;
}

.imagecss{
  width: 100%;
  min-width: 70px;
  padding-top:20px;
}

@media (min-width: 768px) {
  .imagecss{
    width: 100%;
    min-width: 70px;
    padding-top:5%;
  }
}

.iconecss2{
  width:10px;
}

@media (min-width: 768px) {
  .iconecss2{
    width:20px;
  }
}

.iconecss{
  width: 15px;
}

@media (min-width: 768px) {
  .iconecss{
    width: 17px;
  }
}

.emotic{
  height: 15px;
  width: 15px;
}

.emotic2{
  height: 22px;
  width: 22px;
}

.emotic3{
  max-height: 22px;
  max-width: 22px;
}

@media (min-width: 768px) {
  .emotic{
    min-height: 20px;
    min-width: 20px;
  }
  .emotic2{
    height: 28px;
    width: 28px;
  }
  .emotic3{
    max-height: 28px;
    max-width: 28px;
  }
}


@media (min-width: 768px) {
  .encadrementnavleft{
    height: 40%;
    width: 100%;
    padding-top:5px;
  }
}

.contenunavleft{
  background-image:url(../images/encadrementnavleft.png);
  margin: 0px 2% 0px 5%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top:17px;
}

.contenusousnavleft{
  background-image:url(../images/sousencadrementnavleft.png);
  margin: 0px 4.2% 0px 8%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top:17px;
}

.interieur{
  padding:0% 10% 5% 12%;
  width:100%;
}

.encadrement {
    height: 100%;
    width: 100%;
    margin:0% 0% 0% 0%;
    padding: 10px 0px 10% 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top:20px;
}

.background-eclairer {
  background-color: #0000008c;
}

.background-non-eclairer {
  background-color: #2d1b042b;;
}

.contour{
  border: 2px solid;
  border-color: #9f865e;
  padding : 5px 5px 5px 5px;
  margin-bottom:15px;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
}

.contourImage{
  border-style: inset;
  border-width: 1px;
  border-color: rgba(61, 38, 7, .8);
}

.contourColonieImage{
  border-style: inset;
  border-width: 1px;
  border-color: rgba(61, 38, 7, .8);
  box-shadow:0px 1px 7px 1px rgba(0,0,0,0.5);
  -moz-border-radius: 10px 0;
  -webkit-border-radius: 10px 0;
  border-radius: 2px;
  max-width: 145px;
  margin: 0px auto;
}

.contourColonieImageRond{
  border-style: solid;
  border-width: 1px;
  border-color: rgba(61, 38, 7, .8);
  box-shadow:0px 1px 7px 1px rgba(0,0,0,0.5);
  -moz-border-radius: 10px 0;
  -webkit-border-radius: 10px 0;
  border-radius: 60px;
  max-width: 120px;
  margin: 0px auto;
}

.menu-ouvert-border-left{
  border: 0!important;
  border-left: inset 2px rgba(195, 158, 108, .95)!important;
}

.imagecsscontour{
  /*width: 100%;*/
  min-width: 55px;
  z-index: 200;
  /*height: 130px;*/
  width: 100%;
}

.contenue{
   padding : 2px 10px 0px 10px;
}

.resumeJeu{
  margin-top:40px;
  font-size: 15px;
  padding:0px;
  background-color: rgba(244,164,96, .8);
  height:600px;
  border-color: rgba(244,164,96, .3);
  border-style: solid;
  border-width: 18px;
  text-align:justify;
   z-index: 1;
}

.logonatureatwar {
  margin:0px auto;
  width:170px;
}

.logomignaturenatureatwar {
  margin:0px auto;
  width:94px;
}

.margin-cadre-logo {
  margin-top: -50px;
}

@media (min-width: 768px) {
  .logonatureatwar {
    width:280px;
  }

  .margin-cadre-logo {
    margin-top:-200px
  }

  .encadrement {
    width: 100%;
    background-image:url(../images/encadrementfinal.png);
    z-index: -1;
    padding: 105px 10% 10% 10%;
    margin-top: 120px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
/*.margin-top-menu {
  padding-top:15px;
}*/
@media (max-width: 768px) {
  .hauteur-sous-menu{
    margin-bottom:6px;
    margin-top:6px;
  }

  .margin-top-menu {
    padding-top:1px;
  }
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  background-color:rgba(39, 30, 24, 0);
}

.navbar-collapse {
    /*padding-right: 150px;*/
    /*margin-right: 100px;*/
}
/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
  background-color: rgba(39, 30, 24, 0);
}

/*
 * Sidebar
 */



/* Hide for mobile, show later */
.sidebar {
  display: none;
  position: fixed;
  top: 60px;
  left: -12px;
  z-index: 2000;
}


@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    /*background-color: rgb(255, 205, 140);*/
    font-weight : bold;
    min-height: 620px;
    min-width: 280px;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  height: 100%;

}
.sideLeft{
  /*background-color:#a18d84;
  background-color: rgb(255, 205, 140);
  background-image:url(../images/backgroundv4opti5.jpg);*/
  /*background-attachment:fixed;*/
  /*background-size: 110%;*/
  min-width: 30px;
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 620px;
  background-repeat: no-repeat;
  font-size: 15px;
}

.colorMenu{
  color: rgb(130, 197, 87);
}
@media (min-width: 768px){
  .dropdown-menu.sub-menu.dropmenu{
    left: 0;
    right: auto;
  }
}

.nav-sidebar > li > a {
}


.sideRight{
  padding-top:180px;
  padding-right: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 620px;
  font-size: 15px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-top :1000px;
  padding-left: 50px;
  color: rgb(61, 38, 7);
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

@media (min-width: 767px){
  .espace{
    padding-bottom:5px;
  }
}

@media (min-width: 767px){
  .nondisplay{
    display: none;
  }
}

.conv-display-none {
  display: none;
}

.block-display-none {
  display: none;
}

.invisible {
  visibility: visible;
}

@media (min-width: 767px){
  .invisible {
    visibility: hidden;
  }
}

@media (max-width: 767px){
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: rgb(130, 197, 87);
  }

  .carousel{
    border-color:rgba(61, 38, 7, .8);
    border-style: inset;
  }

  /*.contenue{
    border-color:rgba(61, 38, 7, .8);
    border-style: inset;
  }*/
}


/*
 * Main content
 */

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 12px 12px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 70px;
  }
}

@media (min-width: 1600px) {
  .main {
    padding-right: 266px;
    padding-left: 70px;
  }
}
.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}


.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}
@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
      display: block;
  }
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}
.zoneAdapter{
  height: 150px;
}

.zoneAdapterHero{
  height: 110px;
}

.cadreDefault{
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 10px 10px;
}

@media (min-width: 768px) {
  .cadreDefault{
    padding: 10px 10px 10px 10px;
    margin: 10px 0px 10px 0px;
  }
}

.couleurCadre{
  background-color:#e0aa63;
}

.zoneBatiment{
  height: 160px;
}

@media (max-width: 576px) {
  body {
    font-family: Verdana;
    background:radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
    font-size: 11px;
  }

  .surligner-joueur {
    font-size: 13px;
  }

  .zoneAdapter{
    height: 110px;
  }

  .zoneAdapterHero{
    height: 80px;
  }

  .zoneBatiment{
    height: 135px;
  }

  .titreUnite{
    color:rgb(106, 24, 45);
    font-size:11px;
  }

  .navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 12px;
    line-height: 20px;
  }
}

@media (max-width: 576px) {
  .titreUnite{
    color:rgb(106, 24, 45);
    font-size:10px;
  }
}

.center{
  display: block;
  text-align: -webkit-center;
  text-align:center;
}


/* Proposition */
.grey_like{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
}

.ajouterLike, .ajouterDisLike{
  cursor: pointer;
}
@media (max-width: 450px) {
  .col-xss-6{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 50%;
    float: left;
  }
}

.pagination > li > a
{
  background-color: white !Important;
  color: #449d44 !Important;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
  color: #5cb85c !Important;
  background-color: #eee !Important;
  border-color: #ddd !Important;
}

.pagination > .active > a
{
  color: white !Important;
  background-color: #449d44 !Important;
  border: solid 1px #449d44 !Important;
}

.pagination > .active > a:hover
{
  background-color: #449d44 !Important;
  border: solid 1px #449d44 !Important;
}

.pagination {
  margin: 1px 0 !Important;
}



/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com

<div class="hero">
	<hgroup>
		<h1>We are amazing</h1>
		<h3>Get start your next awesome project</h3>
	</hgroup>
	<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>


*/

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
  position: relative;
  height: 300px;
}
.fade-carousel .carousel-inner .item {
  height: 300px;
}
.fade-carousel .carousel-indicators > li {
  margin: 0 2px;
  background-color: #f39c12;
  border-color: #f39c12;
  opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,.75);
  -webkit-transform: translate3d(-50%,-50%,0);
  -moz-transform: translate3d(-50%,-50%,0);
  -ms-transform: translate3d(-50%,-50%,0);
  -o-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
}
.hero h1 {
  font-size: 6em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
  opacity: 0;
  -webkit-transition: 2s all ease-in-out .1s;
  -moz-transition: 2s all ease-in-out .1s;
  -ms-transition: 2s all ease-in-out .1s;
  -o-transition: 2s all ease-in-out .1s;
  transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
  opacity: 1;
  -webkit-transition: 2s all ease-in-out .1s;
  -moz-transition: 2s all ease-in-out .1s;
  -ms-transition: 2s all ease-in-out .1s;
  -o-transition: 2s all ease-in-out .1s;
  transition: 2s all ease-in-out .1s;
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  /*z-index: 2;
  background-color: #080d15;
  opacity: .7;*/
}

/********************************/
/*          Custom Buttons      */
/********************************/
/*.btn.btn-lg {padding: 10px 40px;}*/
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
  color: #f5f5f5;
  background-color: #1abc9c;
  border-color: #1abc9c;
  outline: none;
  margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3,
.fade-carousel .slides .slide-4,
.fade-carousel .slides .slide-5,
.fade-carousel .slides .slide-6{
  height: 300px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
  background-image: url(../images/carousel/natureatwar-carte.JPG);
}
.fade-carousel .slides .slide-2 {
  background-image: url(../images/carousel/natureatwar-reine.JPG);
}
.fade-carousel .slides .slide-3 {
  background-image: url(../images/carousel/natureatwar-attaque.JPG);
}
.fade-carousel .slides .slide-4 {
  background-image: url(../images/carousel/natureatwar-quete.JPG);
}
.fade-carousel .slides .slide-5 {
  background-image: url(../images/carousel/natureatwar-objectif.JPG);
}
.fade-carousel .slides .slide-6 {
  background-image: url(../images/carousel/natureatwar-specialisation.JPG);
}
/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
  .hero { width: 980px; }
}
@media screen and (max-width: 640px){
  .hero h1 { font-size: 4em; }
}

.borderless td, .borderless th {
  border: none!important;
}

.borderless {
  margin-bottom:0px!important;
}

.greenNaw {
  color:rgb(0, 128, 0);
}

.redNaw {
  color:red;
}

.titre-tooltip {
  font-weight: bold;
  font-size: 13px;
}

.general-tooltip + .tooltip > .tooltip-inner {
  background-color: #e0aa63!important;
  text-align: left!important;
  border: inset rgba(61, 38, 7, .8) 1px!important;
  color:black!important;
  font-size: 12px!important;
}

.tooltip.in{
  opacity:1!important;
}

.tooltip-border-top {
  border-top: groove rgba(61, 38, 7, .8) 2px!important;
}

.general-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#e0aa63; }

.tooltip-zone-principale-general {
  max-width: 300px;
  padding: 3px 8px;
  color: black;
  text-align: left;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
}

.selectAllSoin {
  position: absolute;
  right: 38px;
  top: 0;
}

.anim-colonie-active {
  background-image: url("./public/images/carte/anim-fourmi.gif");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 100;
}

.zone-interface-unites {
  position:relative;
  display: flex;
  min-height: 100px;
  max-height: 200px;
  width: 100%;
  padding: 10px 5px 5px 12px;
  margin-top: 10px;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
}

.sous-titre-soin {
  display: flex;
  height: 40px;
  color: #000000d4;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-weight: 800;
  font-size: 15px;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  box-shadow: 1px 1px 8px 0px rgb(20 24 20 / 79%);
  margin: 10px 10px 12px 10px;
  cursor: pointer;
}

.sous-titre-soin-active {
  box-shadow: 1px 1px 8px 5px rgb(20 24 20 / 79%);
}

.sous-titre-triomphe {
  display: flex;
  height: 40px;
  color: #000000d4;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-weight: 800;
  font-size: 15px;
  background: radial-gradient(#f0dfc3, #f0ddbf,#f0ddbf, #d2b796);
  border-color: #9f865e;
  border-style: solid;
  border-width: 2px;
  box-shadow: 1px 1px 8px 0px rgb(20 24 20 / 79%);
  margin: 10px 10px 12px 10px;
  cursor: pointer;
}

.sous-titre-triomphe-active {
  box-shadow: 1px 1px 8px 5px rgb(20 24 20 / 79%);
}

@media (max-width: 620px) {
  .sous-titre-triomphe {
    font-size: 12px;
  }
}

#contenu-soin-1, #contenu-soin-2 {
  display: flex;
  width:400px;
  flex-direction: column;
  align-items: center;
}

.contenu-display-none {
  display: none !important;
}

.button-carte-action {
  min-width: 140px ! important;
  width: 140px !important;
  height: 40px;
  font-size: 12px;
}

.button-carte-soin {
  min-width: 140px ! important;
  width: 140px !important;
  height: 50px;
  font-size: 13px;
}

.zone-information-global {
  position: fixed;
  background: radial-gradient(rgb(240, 223, 195), rgb(240, 221, 191), rgb(240, 221, 191), rgb(210, 183, 150));
  height: 600px;
  width: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  padding: 8px 8px 3px;
  color: black;
  text-align: left;
  border-color: rgb(159, 134, 94);
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
  z-index: 10;
}


.titre-information-global {
  display: flex;
  width: 100%;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.description-information-global {
  padding-top: 10px;
  max-height: 110px;
  overflow-y: auto;
}

.stat-information-global {
  padding-top: 15px;
  height: 460px;
  overflow-y: auto;
}

.titre-stat-ig {
  font-size: 15px;
  height: 40px;
  font-weight: bold;
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(16 46 8 / 30%) 20%, rgb(20 55 11 / 36%) 57%, rgb(20 70 7 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.ligne-stat-ig-defaut {
  height: 30px;
  border-top: 1px solid #dfc9c9b5;
  border-bottom: 1px solid #dfc9c9b5;
}

.ligne-stat-ig-defaut:hover {
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.ligne-stat-ig-surligner {
  background: linear-gradient(90deg, rgb(37 143 10 / 4%) 0%, rgb(37 143 10 / 30%) 20%, rgb(37 143 10 / 36%) 57%, rgb(37 143 10 / 30%) 80%, rgb(37 143 10 / 4%) 100%);
}

.table-information-global {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.def-carac-stat {
  width: 135px;
  display: flex;
  justify-content: flex-end;
  padding-right: 8px;
}

.niv-carac-stat {
  padding-left: 8px;
  font-weight: bold;
}

.statutCible {
  display: flex;
}

@media (max-width: 370px) {

  .zone-reglage-information {
    height: 495px;
    width: 100%;
  }

  .zone-information-global {
    height: 495px;
    width: 100%;
  }

  .titre-information-global {
    font-size: 14px;
  }

  .stat-information-global {
    padding-top: 10px;
    height: 360px;
  }

  .table-information-global {
    font-size: 9px;
  }

  .titre-stat-ig {
    font-size: 10px;
  }
}

@media (max-height: 740px) {
  .zone-information-global {
    margin-top: 25px;
    height: 86%;
  }

  .stat-information-global {
    height: 360px;
  }
}

@media (max-width: 730px) {
  .zone-information-global {
    height: 495px;
    width: 100%;
  }

  .titre-information-global {
    font-size: 14px;
  }

  .stat-information-global {
    padding-top: 10px;
    height: 360px;
  }

  .table-information-global {
    font-size: 9px;
  }

  .titre-stat-ig {
    font-size: 10px;
  }
}

@media (max-width: 600px) {
  .button-responsive {
    font-size: 10px !important;
    height: 28px !important;
    min-width: 86px !important;
  }
}

.progress-bar-special-success {
  background-color: #5cb85c !important;
  height: 20px !important;
}

.progress-bar-special-warning {
  background-color: #f0ad4e !important;
  height: 20px !important;
}

input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
}

/* The custom range slider bar */
.progress-bar {
  width: 100%;
  height: 14px;
  background-color: rgba(0,0,0,0.2);
  border-radius: 0.25em;
  overflow: hidden;
}

/* The "thumb" (draggable) */
.progress-bar::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  background-color: green;
  border-radius: 0;
  background-image: url('../images/carte/diamond.png?1');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  /* This property adds the "tail" on the left of the thumb, remove it and test to see how it works */
  box-shadow: -100vw 0 0 100vw green;
}

/* Mozilla compatibility has to be written separately from the Chrome/Safari version above, for some reason. If you require it, be sure to include this rule, updating it to match the rule above */
.progress-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background-color: green;
  border-radius: 0;
  background-image: url('../images/carte/diamond.png?1');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /* This property adds the "tail" on the left of the thumb, remove it and test to see how it works */
  box-shadow: -100vw 0 0 100vw green;
  cursor: pointer;
  /* Note: firefox adds a border to the thumb, so this is required to remove it */
  border: none;
}

.progress-slide {
  height: 14px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar-danger {
  background-color: #d9534f !important;
}
.progress-bar-warning {
  background-color: #f0ad4e !important;
}

.progress-bar-success {
  background-color: #5cb85c !important;
}
.progress-bar-info {
  background-color: #5bc0de !important;
}

.surligner-joueur {
  font-weight: bold;
  font-size: 16px;
}

.message-red {
  color: red;
  Font-Weight: Bold;
  font-style: italic;
  font-size: 12px;
  padding-top: 2px;
  padding-left: 4px;
  background: linear-gradient(90deg, rgb(0 0 0 / 4%) 0%, rgb(0 0 0 / 30%) 20%, rgb(0 0 0 / 36%) 57%, rgb(0 0 0 / 30%) 80%, rgb(0 0 0 / 4%) 100%);
}

/*input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
}*/

/* The custom range slider bar */
/*.progress-bar {
  width: 100%;
  height: 14px;
  background-color: rgba(0,0,0,0.2);
  border-radius: 0.25em;
  overflow: hidden;
  cursor: pointer;
}*/

/* The "thumb" (draggable) */
/*.progress-bar::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  background-color: green;
  border-radius: 0;
  background-image: url('../images/carte/diamond.png?1');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  box-shadow: -100vw 0 0 100vw green;
}

.progress-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background-color: green;
  border-radius: 0;
  background-image: url('../images/carte/diamond.png?1');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: -100vw 0 0 100vw green;
  cursor: pointer;
  border: none;
}*/

/*.progress-slide {
  height: 14px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}*/