/* Style par défaut (écran de bureau) - Résolution 1400x1050 */

@media only screen and (max-width: 1280px) {

body, html {
width: 100%;
color: #ffffff;
background-color: #000000;
background-image: url(../images/bg.png);
font-size: 100%;
}

.container-fluid {
max-width: 1000px;
padding: 0;
margin: 0 auto;
}

.boxShadow {
-moz-box-shadow: inset 0px 0px 5px 2px #FF4500;
-webkit-box-shadow: inset 0px 0px 5px 2px #FF4500;
-o-box-shadow: inset 0px 0px 5px 2px #FF4500;
box-shadow: inset 0px 0px 5px 2px #FF4500;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#FF4500, Direction=NaN, Strength=5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.boxShadowGrey {
-moz-box-shadow: inset 0px 0px 5px 2px #D3D3D3;
-webkit-box-shadow: inset 0px 0px 5px 2px##D3D3D3;
-o-box-shadow: inset 0px 0px 5px 2px #D3D3D3;
box-shadow: inset 0px 0px 5px 2px #D3D3D3;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#D3D3D3, Direction=NaN, Strength=5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#footer {
position: fixed;
max-width: 1000px;
position: absolute; 
bottom: 0;
text-align: center;
margin: 0;
padding: 0;
}

#footer2 {
position: fixed;
bottom: 0;
max-width: 1000px;
text-align: center;
margin: 0;
padding: 0;
}	

.vertical-align {
min-height: 100%;
display: table-cell;
vertical-align: middle;
}

/* Header */

#header {
max-width: 1000px;
justify-content: center;
margin-left: -5px;
z-index: 1;
}

.top-fixed {
position: fixed;
top: 0;
}

.flex-container-header {
max-width: 100%;
display: flex;
margin-bottom: 0;
}

.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
}

.level-box {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 100%;
padding: 5px 5px 5px 5px;
overflow: hidden;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
color: rgba(0,0,0,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(255,69,0,1);
-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
}

.orangered {
color: orangered;
}

.infoBoxLevel {
padding: 5px;
font-size: 100%;
text-align: left;
margin-bottom: 0;
}

.dollar-box {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 100%;
padding: 5px 5px 5px 5px;
overflow: hidden;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
color: rgba(0,0,0,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(124,252,0,1);
-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
}

.lawngreen {
color: lawngreen;
}

.infoBoxDollar {
padding: 5px;
font-size: 100%;
text-align: center;
margin-bottom: 0;
}

.token-box {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 100%;
padding: 5px 5px 5px 5px;
overflow: hidden;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
color: rgba(0,0,0,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: yellow;
-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
}

.gold {
color: gold;
}

.infoBoxToken {
padding: 5px;
font-size: 100%;
text-align: right;
margin-bottom: 0;
}

.text-70 {
font-size: 100%;
}

.boxText-70 {
font-size: 100%;
margin-bottom; 0;
}

/* Propriété du joueur */

#proprieteJoueur {
width: 100%;
margin-top: 45px;
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 0;
}

.modal-Propriete {
position: relative;
top: 12px;
color: white;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5);
text-decoration: none;
}

.modal-ProprieteNo {
position: relative;
top: 15px;
color: lightgrey;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5);
text-decoration: none;
}

.imgModalProprieteCup {
height: 30px;
width: 30px;
}

.imgModalProprieteCupNo {
height: 30px;
width: 30px;
filter: grayscale(100%);
}

.imgModalProprieteFlags {
position: relative;
top: 6px;
height: 55px;
width: 55px;
}

.imgModalAgendaFlags {
position: relative;
top: 0;
height: 45px;
width: 45px;
}

.imgModalEvent1Flags {
position: relative;
top: 0;
height: 90px;
width: 90px;
}

.imgModalProprieteFlagsNo {
position: relative;
top: 12px;
height: 30px;
width: 30px;
filter: grayscale(100%);
}

.modal-ProprietePlace {
margin-left: 20px;
padding: 10px;
border: 2px solid orangered;
border-radius: 5px;
position: relative;
top: 12px;
color: white;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
}

.modal-ProprietePlaceNo {
margin-left: 20px;
padding: 10px;
border: 2px solid orangered;
border-radius: 5px;
position: relative;
top: 12px;
color: lightgrey;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
}

.modal-ProprietePlaceGrey {
margin-left: 20px;
padding: 10px;
border: 2px solid lightgrey;
border-radius: 5px;
position: relative;
top: 12px;
color: lightgrey;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
}

.flex-container-playerPropriety {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-playerPropriety > a {
border: 1px solid orangered;
border-radius: 5px;
color: white;
height: 80px;
margin: 3px;
text-align: center;
font-size: 100%;
}

.flex-container-playerPropriety > span {
border: 1px solid LightGray;
border-radius: 5px;
color: LightGray;
height: 100px;
margin: 3px;
text-align: center;
font-size: 100%;
}

.flex-container-playerPropriety > a:hover {
text-decoration: none;
}

.imgAvatar {
max-height: 100%;
width: auto;
}

.imgAvatarNo {
max-height: 100%;
width: auto;
filter: grayscale(100%);
}

.imgFlag {
position: relative;
float: left;
top: 5px;
left: 5px;
max-height: 50%;
width: auto;
}

.imgCup {
position: relative;
float: right;
top: 30px;
right: 8px;
max-height: 40%;
width: auto;
}

.imgParametre {
max-height: 100%;
width: auto;
}

.imgParametreNo {
max-height: 100%;
width: auto;
filter: grayscale(100%);
}

.text-50 {
position: relative;
float: left;
top: 10px;
left: 5px;
font-size: 100%;
font-weight: bold;
}

.number {
position: relative;
background-color: orangered;
padding: 5px;
border-radius: 5px;
float: right;
top: 30px;
right: 8px;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnNiveauImg {
position: relative;
border-right: 1px solid black;
border-radius: 5px 0 0 5px;
margin: 0;
padding: 0;
width: 15%;
background-color: red;
text-align: center;
}

.columnNiveauTexte {
position: relative;
padding-top: 6px;
padding-left: 10px;
width: 60%;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnNiveauNumber {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 25%;
text-align: center;
color: white;
background-color: red;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnActionTexte {
position: relative;
padding-top: 6px;
padding-left: 10px;
width: 70%;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnClassementTexte {
position: relative;
padding-top: 5px;
padding-left: 10px;
width: 60%;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnActionNumber {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 30%;
text-align: center;
color: white;
background-color: darkred;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnGameNumber {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 30%;
text-align: center;
color: white;
background-color: darkturquoise;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.flex-container-Niveau-Header {
display: flex;
margin-top: 5px;
height: 160px;
}

.PF-Number-box {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 100%;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
color: orangered;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;		
}

.PF-Team-box {
background-color: black;
padding: 10px;
width: 60%;
margin-top: 22px;
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
overflow: hidden;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
color: #ffffff;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;		
}

.PF-Level-box {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
overflow: hidden;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
color: #000000;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;		
}

.imgModalLevel {
position: relative;
text-align: center;
z-index: 1;
}

.imgModalLevelImg {
height: 150px;
}

.Level-Number-box {
position: relative;
z-index: 2;
top: -50px;
width: 100%;
font: normal 250%/1 "bangers", Helvetica, sans-serif;
color: orangered;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;		
}

.column1 {
width: 100%;
text-align: center;
}

.column2 {
width: 50%;
text-align: center;
}

/* Team et Goodies */

#teamGoodies {
width: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 0;
}

.flex-container-teamGoodies {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-teamGoodies > a {
border: 1px solid orangered;
border-radius: 5px;
color: white;
height: 60px;
margin: 3px;
text-align: center;
font-size: 100%;
}

.flex-container-teamGoodies > span {
border: 1px solid LightGray;
border-radius: 5px;
color: LightGray;
height: 60px;
margin: 3px;
text-align: center;
font-size: 100%;
}

.lex-container-teamGoodies > a:hover {
text-decoration: none;
}

.textTitle {
position: relative;
top: 13px;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5);
}

/* Expérience */

#experience {
width: 50%;
margin-top: 35px;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
}

.textXP {
position: relative;
top: 13px;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
}	

.textInfoNewUser {
position: relative;
padding: 3px;
font: normal 110%/1 "bangers", Helvetica, sans-serif;
}

.flex-container-experience {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-experience > a {
border: 1px solid darkred;
background-color: darkred;
border-radius: 5px;
color: white;
height: 60px;
text-align: center;
font-size: 100%;
}

.flex-container-experience > span {
border: 1px solid LightGray;
border-radius: 5px;
color: LightGray;
height: 60px;
text-align: center;
font-size: 100%;
}

.darkred {
-moz-box-shadow: inset 0px 0px 10px 5px #8B0000;
-webkit-box-shadow: inset 0px 0px 10px 5px #8B0000;
-o-box-shadow: inset 0px 0px 10px 5px #8B0000;
box-shadow: inset 0px 0px 10px 5px #8B0000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#8B0000, Direction=NaN, Strength=10);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;	
}

.darkredText {
color: darkred;
}

.black {
color: black;
}

/* Lieu événement */

#localisation {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
}

.flex-container, .localisation > div  {
border: none;
}

.textEvent {
position: relative;
top: 13px;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
}	

.flex-container-localisation {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-localisation > a {
border-radius: 5px;
color: white;
min-height: 100%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 100%;
}

.flex-container-localisation > span {
border-radius: 5px;
color: orangered;
min-height: 100%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}

.flex-container-localisation2 {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-localisation2 > a {
border-radius: 5px;
color: white;
height: 120px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 100%;
}

.flex-container-localisation2 > span {
border-radius: 5px;
color: orangered;
height: 120px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}

.imgLocalisation {
max-height: 100%;
width: auto;
}

.imgCup2 {
position: relative;
top: 5px;
max-height: 90%;
width: auto;
border: 1px solid orangered;
border-radius: 5px;
}	

.imgCup2Grey {
position: relative;
top: 20px;
max-height: 60%;
width: auto;
border: 1px solid LightGray;
border-radius: 5px;
padding: 5px;
}	

/* Evénement */

#event {
width: 50%;
bottom: 0;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
}

.textEvent {
position: relative;
top: 13px;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
}	

.flex-container-event {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-event > a {
border: 1px solid darkturquoise;
background-color: darkturquoise;
border-radius: 5px;
color: white;
height: 60px;
margin: 3px;
text-align: center;
font-size: 100%;
}

.flex-container-event > span {
border: 1px solid LightGray;
border-radius: 5px;
color: LightGray;
height: 60px;
margin: 3px;
text-align: center;
font-size: 100%;
font-size: 100%;
}

.darkturquoise {
-moz-box-shadow: inset 0px 0px 10px 5px #00CED1;
-webkit-box-shadow: inset 0px 0px 10px 5px #00CED1;
-o-box-shadow: inset 0px 0px 10px 5px #00CED1;
box-shadow: inset 0px 0px 10px 5px #00CED1;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#00CED1, Direction=NaN, Strength=10);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;		
}

.darkturquoiseText {
color: darkturquoise;
}

/* News */

#news {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
position: relative;
bottom: 15px;
}

.flex-container-news {
display: flex;
align-items: stretch;
padding: 0;
}

.flex-container-news > a {
border: 1px solid DodgerBlue;
background-color: white;
border-radius: 5px;
color: white;
height: 120px;
margin: 3px;
text-align: center;
font-size: 100%;
padding: 0:
}

.flex-container-news > span {
border: 1px solid lightgrey;
background-color: lightgrey;
border-radius: 5px;
color: lightgrey;
height: 120px;
margin: 3px;
text-align: center;
font-size: 100%;
padding: 0:
}

.DodgerBlue {
background-color: DodgerBlue;
}

.LightGrey {
background-color: lightgrey;
}

.DodgerBlue1 {
-moz-box-shadow: inset 0px 0px 10px 5px #1E90FF;
-webkit-box-shadow: inset 0px 0px 10px 5px #1E90FF;
-o-box-shadow: inset 0px 0px 10px 5px #1E90FF;
box-shadow: inset 0px 0px 10px 5px #1E90FF;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#1E90FF, Direction=NaN, Strength=10);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.newsTitle {
position: relative;
top: 0;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
color: white;
}

.imgNews {
max-height: 95px;
width: auto;
}

.imgNewsNo {
max-height: 95px;
width: auto;
filter: grayscale(100%);
}

/* Menu */

#dock-container {
height: 70px;
padding: 0;
margin: 0;
bottom: 0;
background-color: orangered;
border: none;
border-top: 4px solid darkred;
}

#dock-container li#active img {
-webkit-transform: scale(1.65);
margin: 0 0.5em;
}

#dock-container li {
width: 17%;
padding: 0;
margin: 0;
list-style-type: none;
display: inline-block;
position: relative;
padding-top: 10px;
}

#dock-container ul {
width: 100%;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 0;
}

#dock-container li img {
width: 48px;
height: 48px;
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}

#dock-container li:hover img { 
-webkit-transform: scale(1.65);
margin: 0 0.5em;
}
	
#dock-container li:hover + li img, #dock-container li.prev img {
-webkit-transform: scale(1);
margin: 0 0;
}

#dock-container li span {
display: none;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 5px;
}

#dock-container li#active span {
display: none;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 5px;
}

#dock-container li#active span {
display: block;
color: #fff;
}

#dock-container li#active .textMenu {
font: normal 120%/1 "bangers", Helvetica, sans-serif;
padding: 2px;
}
	
#dock-container li:hover span {
display: block;
color: #fff;
}

#dock-container .textMenu {
font: normal 120%/1 "bangers", Helvetica, sans-serif;
padding: 2px;
}

/* Modal Avatar */

.modal-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: LightSlateGray;
background-clip: padding-box;
border: 2px solid black;
border-radius: .3rem;
outline: 0;
padding: 5px;
}

.modal-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 2px;
padding-bottom: 5px;
padding-left: 2px;
border: none;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
}	

.modal-title {
position: relative;
height: 30px;
top: 2px;
color: #ffffff;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
}

.modal-title-Sub {
position: relative;
height: 30px;
color: #ffffff;
font: normal 60%/1 "bangers", Helvetica, sans-serif;
}

.modal-header .close {
padding-top: 18px;
padding-right: 3px;
margin: -1rem -1rem -1rem auto;
}

button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}

.modal-dialog.modal-notify .close {
opacity: 1;
}	

.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #ffffff;
text-shadow: 0 1px 0 #ffffff;
opacity: 1;
}

.modal-body {
width: 100%;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 5px;
padding: 5px;
background-color: WHITESMOKE;
border-radius: 5px;
}

#modalBox {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
}

#modalBoxContent {
max-width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
}

#modalBoxContentProfil{
max-width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-right: 5px;
padding-left: 5px;
}

.flex-container-modalAvatar {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-modalAvatar > div {
border: 1px solid darkred;
border-radius: 5px;
color: white;
height: 100%;
margin: 3px;
text-align: center;
font-size: 70%;
}

.flex-container-modalAvatar > div.infoBoxGoodies {
border: none;
border-radius: 5px;
color: black;
margin-left: 10px;
margin-right: 10px;
text-align: center;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.imgModalAvatar {
position: relative;
height: auto;
max-width: 100%;
border-radius: 5px;
}

.flex-container-BoxGoodies {
display: flex;
align-items: stretch;
padding: 2px;
height: 400px;
}

.flex-container-BoxGoodies > div {
border-radius: 5px;
margin: 3px;
text-align: center;
}

.imgModalBoxGoodies {
position: relative;
height: 100%;
border: 2px solid MediumSlateBlue;
border-radius: 5px;
}

.imgModalBoxXPAction {
position: relative;
height: 100%;
border: 2px solid darkred;
border-radius: 5px;
}

.imgModalBoxEvent {
position: relative;
height: 100%;
border: 2px solid darkturquoise;
border-radius: 5px;
}

.imgModalBoxNews {
position: relative;
height: 100%;
border: 2px solid orangered;
border-radius: 5px;
}

.flex-container-BoxMesGoodies {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-BoxMesGoodies > div {
border-radius: 5px;
margin: 3px;
text-align: center;
}

.imgModalBoxMesGoodies {
position: relative;
height: 100%;
border: 2px solid orangered;
border-radius: 5px;
}

.MediumSlateBlue {
color: MediumSlateBlue;
}

.flex-container-modalMenuAvatar {
display: flex;
align-items: stretch;
padding: 2px;
}

.flex-container-modalMenuAvatar > div {
border: 1px solid darkred;
background-color: black;
border-radius: 5px;
color: white;
height: 30px;
margin: 3px;
text-align: center;
padding-top: 2px;
}

.flex-container-modalAvatarImg {
display: flex;
flex-wrap: wrap;
align-content: stretch;
justify-content: center;
padding: 2px;
}

.flex-container-modalAvatarImg > div {
border: 1px solid darkred;
max-width: 16%;
margin: 2px;
border-radius: 5px;
color: white;
height: 100%;
text-align: center;
font-size: 100%;
}

.imgModalMenuAvatar {
position: relative;
height: auto;
width: 100%;
}

.textModalMenuAvatar {
position: relative;
top: 0;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

/* Modal Mon profil */

#modalProfil {
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-right: auto;
padding-left: auto;
}

#modalTitle {
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 0;
padding-left: 0;
}

.modal-body-compet {
position: relative;
background-color: WHITESMOKE;
border-radius: 5px;
}

.modal-bodyProfil {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
margin: 5px;
padding: 0.5rem;
background-color: WHITESMOKE;
border-radius: 5px;
}

.modal-bodyOtherTeam {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
margin: 5px;
padding: 0;
height: 92px;
background-color: WHITESMOKE;
border-radius: 5px;
}

.flex-container-modal-compet {
width: 300px;
display: flex;
}

.flex-container-modal-compet > div {
padding: 10px;
}

.flex-container-modal-Title {
max-width: 100%;
display: flex;
margin-bottom: 0;
}

.columnProfil {
margin: 5px;
flex-grow: 1;
flex-shrink: 1;
}

.flex-container-modalProfil > div {
top: 10px;
}

.flex-container-modal-Title > div {
top: 10px;
}

.imgModalFlags {
margin-right: 10px;
height: 80px;
width: 80px;
}

.imgModalFlagsRight {
margin-left: 10px;
height: 80px;
width: 80px;
}

.imgModalCup {
height: 50px;
width: 50px;
}

.modal-Profil {
position: relative;
top: 8px;
color: #000000;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.modal-Place {
position: relative;
top: 8px;
color: orangered;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;
}

.modal-Age {
position: relative;
top: 4px;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.imgModalAvatarProfil {
margin-left: 10px;
height: 80px;
width: 80px;
}

.flex-container-modal-Niveau {
max-width: 100%;
display: flex;
margin-bottom: 0;
}

.flex-container-modal-Niveau-Classement {
position: relative;
background-color: black;
border-radius: 5px;
padding: 5px;
margin-bottom: 0;
}

.modal-Niveau-Title {
position: relative;
margin-top: 0;
background-color: orangered;
padding: 5px;
color: #000000;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.flex-container-modal-Niveau-PF {
margin-top: 5px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-Niveau-PF > div {
border: 1px solid black;
width: 46%;
border-radius: 5px;
height: 30px;
margin: 3px;
}

.flex-container-modal-Action {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 5px;
margin-bottom: 5px;
}

.flex-container-modal-Action > div {
border: 1px solid black;
width: 100%;
border-radius: 5px;
height: 30px;
margin: 3px;
}	

.imgModalNiveau {
position: relative;
top: 0;
left: 0;
height: 25px;
width: 25px;
}

/* Banner */
div h2 {
background: #08b;
background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
border: 0 solid rgba(0,0,0,0.2);
color: #ffffff;
font: normal 140%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
position: relative;
}

div.banner-yellow h2 {
background-color: yellow;
color: #000000;
}	

div.banner-green h2 {
background-color: lime;
color: #000000;
}	

div.banner-darkred h2 {
background-color: darkred;
color: #ffffff;
}	

div.banner-darkturquoise h2 {
background-color: darkturquoise;
color: #ffffff;
}	

div.banner {
z-index: -1;
}
div.banner h2 {
width: 100%;
border-width: 0 1px 1px 1px;
border-color: rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.3);
display: inline-block;
margin: auto;
padding: 4px 28px;
}
div.banner h2:before, div.banner h2:after {
bottom: 4px;
box-shadow: 0 6px 5px rgba(0,0,0,0.4);
content: "";
height: 10px;
position: absolute;
width: 47%;
z-index: -1;
}
div.banner h2::before {
left: 3%;
transform: rotate(-3.5deg);
}
div.banner h2::after {
right: 3%;
transform: rotate(3.5deg);
}

/* Modal footer */

.modal-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: center;
padding: 10px;
border: none;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
}

.btn {
font: normal 140%/1 "bangers", Helvetica, sans-serif;
}

/* Paramètres */

.flex-container-modal-Parametre {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-Parametre > div {
border: 1px solid black;
width: 100%;
border-radius: 5px;
height: 30px;
margin: 3px;
}

.columnParametreTexte {
position: relative;
padding-top: 6px;
padding-left: 10px;
width: 60%;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnParametreButtonYes {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 40%;
text-align: center;
color: white;
background-color: green;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnParametreButtonNo {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 40%;
text-align: center;
color: white;
background-color: red;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnParametreButton {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 40%;
text-align: center;
color: white;
background-color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

a:hover {
text-decoration: none;
color: #ffffff;
}

.columnParametreButtonGd {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 100%;
text-align: center;
color: white;
background-color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

/* Langues */

.small {
top: 32px;
}

.columnParametreButtonLangue {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 3px;
width: 100%;
text-align: center;
color: #ffffff;
background-color: orangered;
font: normal 140%/1 "bangers", Helvetica, sans-serif;
}

/* Birth */

.columnParametreButtonBirth {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 100%;
text-align: center;
color: #ffffff;
background-color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.flex-container-modal-Birth {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-Birth > div {
border: 1px solid black;
width: 30%;
border-radius: 5px;
height: 30px;
margin: 3px;
}

/* Pseudo */

.loginmodal-container {
width: 100%;
margin: 0 auto;
text-align: center;
}

.loginmodal-container h1 {
text-align: center;
color: #000000;
font: normal 160%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.loginmodal-container input[type=text] {
width: 90%;
margin-top: 10px;
height: 44px;
color: #000000;
font: normal 160%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
text-align: center;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal {
text-align: center;
font: normal 160%/1 "bangers", Helvetica, sans-serif;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}

.flex-container-modal-Pseudo {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-Pseudo > div {
border: 1px solid black;
width: 80%;
border-radius: 5px;
margin: 3px;
}

.columnParametreButtonPseudo {
padding: 10px;
border-left: 1px solid black;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ffffff;
background-color: orangered;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
}

/* Country */

.columnParametreButtonCountry {
position: relative;
width: 100%;
text-align: center;
}

.flex-container-modal-Country {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-Country > div {
width: 14%;
padding: 0;
}

.imgModalFlagsCountry {
height: auto;
width: 100%;
}

/* Player Team */

.flex-container-modal-MyTeam h1 {
text-align: center;
color: #000000;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
margin-top: 5px;
}

.flex-container-modal-BigTitle h1 {
text-align: center;
color: #000000;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
margin-top: 10px;
}

.flex-container-modal-OtherTeam h1 {
text-align: center;
color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;
}

.flex-container-modal-TextXPAction h1 {
text-align: center;
color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
padding: 10px;
margin-top: 10px;
}

.table td, .table th {
padding: .75rem;
vertical-align: top;
}

.flex-container-modal-OtherTeam h5 {
margin-top: 10px;
text-align: center;
color: orangered;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
padding: 5px;
}

.flex-container-modal-OtherTeam h6 {
margin-top: 15px;
text-align: center;
color: orangered;
font: normal 110%/1 "bangers", Helvetica, sans-serif;
}

.flex-container-modal-OtherTeam-Img {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 5px;
margin-bottom: 10px;
}

.flex-container-modal-OtherTeam-Img > div {
border: 1px solid SteelBlue;
width: 16%;
border-radius: 5px;
color: white;
text-align: center;
padding: 0;
margin: 2px;
}

.flex-container-modal-OtherTeam-Img > a:hover {
text-decoration: none;
}

.OtherTeam {
position: relative;
width: 50%;
max-width: 300px;
}

.OtherTeam2 {
position: relative;
width: 100%;
max-width: 300px;
}

.flex-container-modal-Goodies-Img {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-Goodies-Img > span {
border: 1px solid orangered;
width: 31%;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-Goodies-Img > a:hover {
text-decoration: none;
}

.borderMatchAgenda {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 15px;
margin-bottom: 15px;
}

.borderMatchAgenda > span {
width: 40%;
border-radius: 5px;
color: white;
text-align: center;
padding: 5px;
margin: 5px;
}

.borderMatchAgenda > a:hover {
text-decoration: none;
}

.flex-container-modal-XPAction-Img {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-XPAction-Img {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-XPAction-Img > span {
border: 1px solid darkred;
width: 23%;
max-width: 120px;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-XPAction-Img > a:hover {
text-decoration: none;
}

.flex-container-modal-Event4 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}

.flex-container-modal-Event4 > span {
border: 1px solid darkturquoise;
width: 23%;
max-width: 120px;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-Event4 > a:hover {
text-decoration: none;
}

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
background-color: orangered;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.overlayGoodies {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: orangered;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.overlay2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: orangered;
width: 100%;
height: 100%;
padding: 0;
}

.overlayXP {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: darkred;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.overlayXPNo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: Gainsboro;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.overlayOtherTeam {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: SteelBlue;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.overlayEvent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: darkturquoise;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.overlayEventNo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: Gainsboro;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .1s ease;
padding: 0;
}

.OtherTeam:hover .overlay {
transform: scale(1)
}

.OtherTeam2:hover .overlay {
transform: scale(1)
}

.OtherTeam2:hover .overlayXP {
transform: scale(1)
}

.OtherTeam2:hover .overlayXPNo {
transform: scale(1)
}

.OtherTeam2:hover .overlayEvent {
transform: scale(1)
}

.OtherTeam2:hover .overlayEventNo {
transform: scale(1)
}

.OtherTeam:hover .overlayOtherTeam {
transform: scale(1)
}

.OtherTeam2:hover .overlayGoodies {
transform: scale(1)
}

.actionXPHover:hover .overlay {
transform: scale(1)
}

.columnParametreButtonCountry:hover .overlay {
transform: scale(1)
}

.textInfo {
color: #ffffff;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textInfoAmi {
color: #ffffff;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textEventCountry {
color: #ffffff;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textEventCountry2 {
color: #ffffff;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textActivity {
color: #ffffff;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
margin: 0;
}

.textAction {
color: #ffffff;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textActivityXP {
color: #ffffff;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textEvent3 {
color: #ffffff;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textActivityGoodies {
color: #ffffff;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textActivityGoodiesSmall {
color: #ffffff;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textActivityXPNo {
color: #ffffff;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textInfoXP {
color: #ffffff;
font: normal 70%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textInfoGoodiesHover {
color: #ffffff;
font: normal 75%/1 "bangers", Helvetica, sans-serif;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.textInfoGoodies {
color: #ffffff;
font: normal 60%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.modal-Team-Title {
justify-content: center;
position: relative;
top: 0;
color: #000000;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.modal-Team-Compet {
justify-content: center;
position: relative;
color: #000000;
font: normal 140%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.modal-Team-Activity {
position: relative;
top: -40px;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}	

.modal-Team-Competition {
position: relative;
top: 0;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}	

.yellow {
background-color: yellow;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.red {
background-color: red;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.flamDown {
position: relative;
color: red;
margin-left: 8px;
top: 8px;
}	

.flamUp {
position: relative;
color: green;
margin-left: 8px;
top: 8px;
}

/* Résultats */

#resultatHeader {
min-height: 150px;
margin: 0;
padding: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: SteelBlue; /* Old browsers */
}

#resultatBoxFlags {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-right: 0;
padding-left: 0;
}

.resultatBody {
width: 100%;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 3px;
padding: 5px;
}

.flex-container-Resultat {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-ResultatMesEquipes {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-ResultatMesEquipes > div {
border: 1px solid orangered;
width: 16%;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-ResultatMesEquipes > a:hover {
text-decoration: none;
}

.flex-container-MesEquipes {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-MesEquipes > div {
border: 1px solid orangered;
width: 16%;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
margin-top: 10px;
}

.flex-container-MesEquipes > a:hover {
text-decoration: none;
}

.flex-container-mesAmis {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-mesAmis > div {
border: 1px solid orangered;
width: 16%;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-mesAmis > a:hover {
text-decoration: none;
}

.imgTitle {
position: relative;
width: 100%;
bottom: 0;
}

.resultatTitle {
position: relative;
top: 75px;
color: #ffffff;
font: normal 200%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
}

/* Banner2 */
div.banner2 h2 {
background: orangered;
background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
border: 0 solid rgba(0,0,0,0.2);
color: #ffffff;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
position: relative;
}	

div.banner2 {
z-index: -1;
}
div.banner2 h2 {
width: 100%;
border-width: 0 1px 1px 1px;
border-color: rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.3);
display: inline-block;
margin: auto;
padding: 4px 28px;
}
div.banner2 h2:before, div.banner2 h2:after {
bottom: 4px;
box-shadow: 0 6px 5px rgba(0,0,0,0.4);
content: "";
height: 10px;
position: absolute;
width: 47%;
z-index: -1;
}
div.banner2 h2::before {
left: 3%;
transform: rotate(-3.5deg);
}
div.banner2 h2::after {
right: 3%;
transform: rotate(3.5deg);
}

/* Menu2 */

#dock-container2 {
height: 60px;
padding: 0;
margin: 0;
bottom: 0;
background-color: orangered;
border: none;
border-top: 3px solid darkred;
}

#dock-container2 li#active img {
-webkit-transform: scale(1.65);
margin: 0 0.5em;
}

#dock-container2 li {
width: 17%;
padding: 0;
margin: 0;
list-style-type: none;
display: inline-block;
position: relative;
padding-top: 3px;
}

#dock-container2 ul {
width: 100%;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 0;
}

#dock-container2 li img {
width: 48px;
height: 48px;
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}

#dock-container2 li:hover img { 
-webkit-transform: scale(1.65);
margin: 0 0.5em;
}
	
#dock-container2 li:hover + li img, #dock-container2 li.prev img {
-webkit-transform: scale(1);
margin: 0 0;
}

#dock-container2 li span {
display: none;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 5px;
}

#dock-container2 li#active span {
display: none;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 5px;
}

#dock-container2 li#active span {
display: block;
color: #fff;
}

#dock-container2 li#active .textMenu {
font: normal 100%/1 "bangers", Helvetica, sans-serif;
padding-bottom: 5px;
}
	
#dock-container2 li:hover span {
display: block;
color: #fff;
}

#dock-container2 .textMenu {
font: normal 100%/1 "bangers", Helvetica, sans-serif;
padding-bottom: 5px;
}

.pxBottom {
margin-bottom: 70px;
}

.modal-content-resultats {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: SteelBlue;
background-clip: padding-box;
border: 2px solid black;
border-radius: .3rem;
outline: 0;
padding: 5px;
}

.columnGameNumber2 {
border-left: 1px solid black;
position: relative;
border-radius: 0 5px 5px 0;
padding-top: 6px;
width: 30%;
text-align: center;
color: white;
background-color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnClassementNumber2 {
border-left: 1px solid black;
position: relative;
padding-top: 5px;
width: 25%;
text-align: center;
color: white;
background-color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

.columnClassement2 {
border-left: 1px solid black;
position: relative;
padding-top: 5px;
width: 15%;
text-align: center;
color: white;
background-color: orangered;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
}

table .thTif, table .tdTif {
padding: 5px;
margin: 0;
font-weight: normal;
}

table .tdTif1 {
padding-top: 21px;
font-weight: normal;
}

table .tdMatch {
padding: 0;
margin: 0;
font-weight: normal;
}

.trResultat:nth-child(even) {
background-color: LightSteelBlue;
}

.trResultat1:nth-child(even) {
background-color: Coral;
}

table .thTif, table .tdResultatDate {
border-top: none;
}

tbody {
border-top: none;
}

.tableText {
color: #000000;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
}

.tableTextEvent {
color: #000000;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
}

.tableTextClassement {
color: #000000;
font: normal 140%/1 "bangers", Helvetica, sans-serif;
}

table .tdEvent {
padding-left: 10px;
padding-right: 10px;
padding-top: 8px;
padding-bottom: 5px;
margin: 0;
font-weight: normal;
width: 28%;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
border: none;
}

table .tdEvent1 {
padding-left: 10px;
padding-right: 10px;
padding-top: 14px;
padding-bottom: 5px;
margin: 0;
font-weight: normal;
width: 8%;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
border: none;
}	

table .tdEvent2 {
padding-left: 10px;
padding-right: 10px;
padding-top: 14px;
padding-bottom: 5px;
margin: 0;
font-weight: normal;
width: 28%;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
border: none;
}

.col1 {
width: 5%;
}

.col2 {
width: 65%;
}

.col3 {
width: 10%;
}

.col4 {
width: 6%;
}

.flex-container-modalMenuResultats {
display: flex;
align-items: stretch;
padding: 2px;
margin-bottom: 3px;
}

.flex-container-modalMenuResultats > a {
background-color: orangered;
border-radius: 5px;
color: white;
height: 100%;
margin: 3px;
text-align: center;
padding: 5px;
}

.textModalMenuResultats {
position: relative;
top: 3px;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.table {
margin-top: 0;
margin-bottom: 0;
}

table .borderMatchAgenda {
border: none;
}

table .matchAgenda {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
font-weight: normal;
width: 50%;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
border-left: 1px solid lightgray;
border-top: none;
}

table .matchEvent1 {
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
font-weight: normal;
width: 50%;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
border-top: none;
}

table .borderResultat {
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}

table .tdResultat {
padding-left: 10px;
padding-right: 10px;
margin: 0;
font-weight: normal;
width: 20%;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
border: none;
}

table .tdResultat1 {
width: 40%;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
margin: 0;
font-weight: normal;
color: #000000;
font: normal 150%/1 "bangers", Helvetica, sans-serif;
border: none;
}

table .tdResultat2 {
width: 40%;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
margin: 0;
font-weight: normal;
color: #000000;
font: normal 110%/1 "bangers", Helvetica, sans-serif;
border: none;
}

table .tdResultatDate {
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
padding-bottom: 3px;
margin: 0;
font-weight: normal;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
background-color: black;
border: none;
}

.linkEvent {
color: black;
}

.linkEvent:hover {
color: orangered;
}

.green {
color: green;
}

.boxGreen {
background-color: green;
padding: 20px;
text-align: center;
margin: 5px;
}

.boxOrangered {
background-color: orangered;
padding: 20px;
text-align: center;
color: white;
}

.modal-footer-event {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: center;
border: none;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
}

/* Match */

#modalTitle {
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
}

.flex-container-modal-Match {
margin-top: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-Match > div {
border: 1px solid black;
width: 100%;
border-radius: 5px;
height: 30px;
margin: 3px;
}	

.match {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-clip: padding-box;
outline: 0;
padding: 0;
margin: 0;
}

.matchBox {
width: 100%;
height: 100%;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 0;
padding: 0;
background-image: url(../images/stade_gd.jpg);
background-repeat: no-repeat;
background-position: center;
}

.resumeMatch {
width: 100%;
margin: 0;
padding: 0;
color: #ffffff;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,255,255,0.25) ;
}

.imgModalMatchFlags {
position: relative;
height: 50px;
width: 50px;
}	

.flex-container-match {
display: flex;
width: 100%;
flex: row;
align-items: center;
margin: 0;
padding: 5px;
background: rgba(1,1,1,0.5) !important;
color: #fff;
}

.flex-container-match > div {
display: flex;
flex: row;
align-items: center;
width: 31%;
}

.flex-container-match-flagMatch {
display: flex;
flex: row;
height: 50px;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 30px;
margin-bottom: 10px;
}

.flagMatch {
flex-grow: 1;
text-align: center;
}

.scorePF {
background-color: white;
width: 100%;
height: 30px;
flex-grow: 1;
text-align: center;
color: #000000;
font: normal 110%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
padding: 5px;
padding-top: 8px;
margin: 5px;
}

.statutMatch {
background-color: green;
border-radius: 3px;
width: 70%;
margin: 3px;
padding: 3px;
flex-grow: 2;
text-align: center;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}

.statutMatchBientot {
background-color: orange;
border-radius: 3px;
width: 70%;
margin: 3px;
padding: 3px;
flex-grow: 2;
text-align: center;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}

.statutMatchTermine {
background-color: red;
border-radius: 3px;
width: 70%;
margin: 3px;
padding: 6px;
flex-grow: 2;
text-align: center;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}

.flex-container-teamMatch {
display: flex;
flex: row;
height: 50px;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}

.teamMatch {
flex-grow: 2;
width: 100%;
height: 30px;
flex-grow: 1;
text-align: center;
color: #000000;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
padding: 5px;
padding-top: 7px;
margin: 5px;
background: rgba(1,1,1,0.5) !important;
color: #fff;
}

.scoreReal {
border-radius: 3px;
width: 50%;
margin: 3px;
padding: 3px;
flex-grow: 1;
text-align: center;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
background: rgba(1,1,1,0.5) !important;
color: #fff;
}

.flex-container-match-tonScore {
display: flex;
flex: row;
width: 100%;
align-items: center;
justify-content: center;
}

.tonScore {
background-color: white;
width: 30%;
border-radius: 5px;
text-align: center;
color: #000000;
font: normal 130%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
padding: 10px;
margin: 5px;
}

.flex-container-match-barreProgression {
display: flex;
flex: row;
height: 30px;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20px;
margin-bottom: 10px;
}

.barreProgression {
width: 100%;
text-align: center;
margin: 5px;
font: normal 90%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}

.left {
justify-content: left;
}

.right {
justify-content: right;
text-align: right;
}

.center {
justify-content: center;
}

.modal-body-match {
width: 100%;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
background-color: WHITESMOKE;
}

.flex-container-modal-matchStats {
max-width: 100%;
display: flex;
}

/* Social */


#socialHeader {
min-height: 150px;
margin: 0;
padding: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: Coral; /* Old browsers */
}

.flex-container-Social {
display: flex;
align-items: stretch;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-Social > a {
background-color: orangered;
border-radius: 5px;
color: white;
height: 30px;
margin: 3px;
text-align: center;
padding-top: 3px;
}

.textModalSocial {
position: relative;
top: 0;
font: normal 120%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

/* Fan Shop */

#fanShopHeader {
min-height: 150px;
margin: 0;
padding: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: MediumSlateBlue; /* Old browsers */
}

.textBoxFanshop {
color: lime;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
}

.textBoxFanshop2 {
color: black;
background-color: lime;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
padding: 3px;
border-radius: 5px;
}

.textBoxGoodies {
color: orangered;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 7px;
}

.textBoxGoodiesNiveau {
color: white;
background-color: orangered;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.textBoxGoodiesNiveauNo {
color: white;
background-color: MediumSlateBlue;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.textBoxGoodiesTeam {
color: orangered;
font: normal 70%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.textBoxGoodiesTeamNo {
color: MediumSlateBlue;
font: normal 70%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.textBoxGoodiesNo {
color: MediumSlateBlue;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
}

.textBoxGoodiesDollar {
color: white;
background-color: lime;
border-radius: 5px;
padding-right: 8px;
padding-left: 8px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
}

.textBoxFanshopToken {
color: yellow;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
}

.textBoxFanshopAction {
color: darkred;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
}

.textBoxFanshopGoodies {
color: orangered;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-top: 5px;
}

.textBoxFanshopGoodiesNo {
color: MediumSlateBlue;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-top: 5px;
}

.flex-container-modal-FanShop-Action {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-FanShop-Action > a {
border: 1px solid darkred;
background-color: Gainsboro;
width: 16%;
border-radius: 5px;
text-align: center;
padding: 2px;
padding-bottom: 5px;
margin: 2px;
}

.flex-container-modal-FanShop-Goodies {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-FanShop-Goodies > a {
border: 1px solid orangered;
background-color: Gainsboro;
width: 16%;
border-radius: 5px;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-FanShop-Goodies-small {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-FanShop-Goodies-small > div {
width: 16%;
text-align: center;
padding: 0;
margin: 2px;
}


.flex-container-modal-FanShop-Goodies-No {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-FanShop-Goodies-No > a {
border: 1px solid MediumSlateBlue;
background-color: Gainsboro;
width: 31%;
border-radius: 5px;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-FanShop-Dollar {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-FanShop-Dollar > a {
border: 1px solid lime;
width: 16%;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-FanShop-Token {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-FanShop-Token > a {
border: 1px solid yellow;
width: 16%;
border-radius: 5px;
color: white;
text-align: center;
padding: 2px;
margin: 2px;
margin-bottom: 20px;
}

.imgModalAction {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid darkred;
background-color: white;
margin-top: 5px;
}

.imgModalGoodies {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid orangered;
}

.imgModalGoodiesNo {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid MediumSlateBlue;
background-color: white;
}

.arrow {
position: relative;
top: 0;
}

.darkredProgress {
background-color: darkred;
border: 1px solid darkred;
}

.MediumSlateBlueProgress {
background-color: MediumSlateBlue;
border: 1px solid MediumSlateBlue;
}

.orangeredProgress {
background-color: orangered;
border: 1px solid orangered;
}

.goodiesNoProgress {
background-color: MediumSlateBlue;
border: 1px solid MediumSlateBlue;
}

.progress {
text-align: center;
margin-bottom: 5px;
height: 20px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
}

.progress-value {
position: absolute;
margin-top: 0;
right: 0;
left: 0;
color: white;
text-decoration: none;
}

.infoTesEquipesTooltip, .infoTesBonnesAffairesTooltip, .infoPorteMonnaieTooltip, .infoTesTokensTooltip, .infoNivCompPf, .infoInventaire, .infoInventaireFringe, .infoInventaireDeco, .infoAgenda, .infoEvent, .infoOtherEvent {
position: absolute;
top: 5px;
right: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
}

.modal-content-fanShop {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: MediumSlateBlue;
background-clip: padding-box;
border: 2px solid black;
border-radius: .3rem;
outline: 0;
padding: 5px;
}

/* Mes amis */

.modal-content-Social {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: Coral;
background-clip: padding-box;
border: 2px solid black;
border-radius: .3rem;
outline: 0;
padding: 5px;
}

/* Collection */

#collectionHeader {
min-height: 150px;
margin: 0;
padding: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: orange; /* Old browsers */
}

.flex-container-modal-action-xp {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-action-xp > a {
border: 2px solid darkred;
background-color: Gainsboro;
width: 31%;
border-radius: 5px;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-action-xp-small {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-action-xp-small > div {
width: 16%;
text-align: center;
padding: 0;
margin: 2px;
}

.flex-container-modal-event3 {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-event3 > div {
width: 31%;
text-align: center;
padding: 0;
margin: 2px;
}

.flex-container-modal-action-xp-No {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-action-xp-No > div {
border: 1px solid MediumSlateBlue;
background-color: Gainsboro;
width: 31%;
border-radius: 5px;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-action-xp-small-No {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 10px;
}

.flex-container-modal-action-xp-small-No > div {
width: 16%;
text-align: center;
padding: 0;
margin: 2px;
}

.textBoxActionXP {
color: darkred;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
padding-top: 5px;
}

.textBoxActionXPNo {
color: Gainsboro;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-top: 5px;
}

.textBoxActionXPBox {
color: white;
background-color: darkred;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 0;
}

.textBoxEvent3 {
color: white;
background-color: orangered;
border-radius: 5px;
padding: 5px;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.textBoxEvent3-1 {
color: white;
background-color: orangered;
border-radius: 5px;
padding: 5px;
font: normal 80%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
}

.textBoxActionXPBoxNo {
color: white;
background-color: Gainsboro;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.darkturquoiseProgress {
background-color: darkred;
border: 1px solid darkred;
}

.GainsboroProgress {
background-color: Gainsboro;
border: 1px solid Gainsboro;
}

.imgModalActionXP {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid darkred;
padding: 7px;
}

.imgModalEvent3 {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid orangered;
padding: 7px;
}

.imgModalActionXPNo {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid Gainsboro;
padding: 7px;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);	
}

.textBoxActionXP2 {
color: darkred;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 7px;
}

.flex-container-modal-action-event {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}

.flex-container-modal-action-event > a {
border: 2px solid darkturquoise;
background-color: Gainsboro;
width: 31%;
border-radius: 5px;
text-align: center;
padding: 2px;
margin: 2px;
}

.flex-container-modal-action-event-small {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-action-event-small > div {
width: 16%;
text-align: center;
padding: 0;
margin: 2px;
}

.flex-container-modal-action-event-No {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.flex-container-modal-action-event-No > div {
width: 22%;
text-align: center;
padding: 0;
margin: 2px;
}

.textBoxActionEvent {
color: darkturquoise;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-top: 5px;
}

.textBoxActionXPNo {
color: Gainsboro;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-top: 5px;
}

.textBoxActionEventBox {
color: white;
background-color: darkturquoise;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.textBoxActionGoodies {
color: white;
background-color: orangered;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}


.textBoxActionEventBoxNo {
color: white;
background-color: MediumSlateBlue;
border-radius: 5px;
padding: 5px;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
}

.darkturquoiseProgress {
background-color: darkturquoise;
border: 1px solid darkturquoise;
}

.imgModalActionEvent {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid darkturquoise;
padding: 7px;
}

.imgModalActionGoodies {
position: relative;
height: auto;
width: 100%;
border-radius: 5px;
border: 2px solid orangered;
padding: 7px;
}

.textBoxActionEvent2 {
color: darkturquoise;
font: normal 100%/1 "bangers", Helvetica, sans-serif;
text-align: center;
margin-bottom: 7px;
}

.modal-content-collection {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: orange;
background-clip: padding-box;
border: 2px solid black;
border-radius: .3rem;
outline: 0;
padding: 5px;
}

.actionCard {
position: relative;
width: 50%;
max-width: 300px;
}

.actionCard2 {
position: relative;
width: 100%;
padding-left: 4px;
padding-right: 4px;
margin-top: 10px;
}

/* Tooltip */

.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: "bangers", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: normal;
font-weight: normal;
line-height: 1;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
filter: alpha(opacity=0);
opacity: 0;

line-break: auto;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 180px;
padding: 5px;
color: #ffffff;
text-align: left;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}

}