/* Custom font */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/*
Youx 02.02.2018: variables for stock/change colors of website when documents rooting
*/

:root {
    /* Youx 08.02.2018: management of ALL the colors of the application */

    /* Header = (#D8232A)
       Used for the "center on my referenced ground" on the map (IM)*/
    --brand-color: #D8232A;
    
    /* Second colors */
    /* color of all the white parts, excluding the background (white) */
    --white-color: white;
    /* color of dismiss button (#888) */
    --dismiss-color: #868686;
    /* Title = (#1c333d) */
    --title-color: #1c333d;
    /* Font = black-blue-color (#011C26) */
    --font-color: #264553;
    /* color of the link (#5984AF) */
    --link-color: #004974;
    /* background color of the subAction Button (#0A6CA5)
       background color of the "arrow to the top" button of the news ("Actualités") list*/
    --subAction-color: #0A6CA5;
    /* color of all h5 titles (#666) */
    --h5-color: #666;
    /* this color seems to be not used; linked to #tabs (lightgrey) */
    --lightgrey: lightgrey;
    /* Small elements of style */
    /* color of underline title (nickname/firstname, teamName and groundName) in the cardHeader of the 3 main pages (player page, team page and ground page) (lightgrey) */
    --title-underline: lightgrey;
    /* color of box-navigation border in profile page (#eee) */
    --menuCard-box: #eee;
    /* color of the friendsHeader (#eee) */
    --friends-box: #eee;
    /* color of the small grey line under each singlePlayer elements (#eee) */
    --single-player-line: #eee;
    /* Styles of the 3 chapters categories */
    /* First category */
    /* blue (#84B6C1) */
    --cat1-color: #84B6C1;
    /* blue-pastel (#DCEDF1) */
    --cat1-pastel: #DCEDF1;
    /* Second category */
    /* red-color (#D8232A) */
    --cat2-color: #D8232A;
    /* red-pastel (#F7DADB) */
    --cat2-pastel: #F7DADB;
    /* Third category */
    /* grey (#666) */
    --cat3-color: #666;
    /* grey-pastel (#eee) */
    --cat3-pastel: #eee;
    /* Icons: at the bottom right of the Player profile picture and for the Yes/No action icons */
    /* For the "checked" icon at the bottom right of the Player profile picture and "Yes" icon : green (= rgb(0, 153, 0) ) */
    --fa-check-color: rgb(0, 153, 0);
    /* For the "?" icon at the bottom right of the Player profile picture : orange */
    --fa-question-color: orange;
    /* Only for the "No" icon on the right of the screen : red (#D8232A) */
    --fa-cross-color: #D8232A;
    /* Flash messages */
    /* flash message of success = rgb(127, 190, 127)*/
    --flash-success-color: rgb(127, 190, 127);
    /* flash message of warning = orangered */
    --flash-warning-color: rgb(255, 181, 44);
    /* flash message of danger = #D8232A */
    --flash-danger-color: #D8232A;
    /* flash message of info = #DCEDF1 */
    --flash-info-color: #DCEDF1;
    /* Selectize */
    /* background selectize on hover = rgba(216, 35, 42, 0.1) */
    --hover-selectize: rgba(216, 35, 42, 0.1);
    /* background selected letters on search = rgba(216, 35, 41, 0.2) */
    --highlight-selectize: rgba(216, 35, 41, 0.2);
    /* font-color for informations in selectize content = rgba(50, 50, 50, 0.6) */
    --info-selectize: rgba(50, 50, 50, 0.6);
    /*Position in ranking*/
    /*first position*/
    --first-position: goldenrod;
    /*second position*/
    --second-position: silver;
    /*third position*/
    --third-position: #cd7f32;
    /*background color of a single article in the articles (= news = "Actualités") list page = a light grey */
    --single-article:#f3f3f3;
    /*Ahcene 31.05.2018*/
    /*color of the map's button to center on the user's geoloc position (IM)*/
    /* Color of the user's position marker on the map which can't be changed by changing this variable
        It's fixed by an image "assets/img/ui/my_marker.png"*/
    --user-position: #4596fa;

    
}


/* 
Reset CSS
*/

table, caption, tbody, tfoot, thead, tr, th, td{
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
    font: inherit;
    border: inherit;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    overflow-y: scroll;
}

body {
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    /*Julien's color : #011C26, Cyril's color: #2C3E50 */
    color: var(--font-color, #011C26);
    /* Kevin 16.02.2018: background color proposal */
    /* background-color: rgba(230, 230, 230, .1); */
}

img {
    max-width: 100%;
}

hr {
    margin: 2rem;
}

li {
    list-style-type: none;
}

a,
.listData li a {
    text-decoration: none;
    color: var(--link-color, #004974);
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* a:focus {
    outline-style: none;
} */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
}

h1 {
    text-align: left;
    text-transform: uppercase;
    font-size: 1.7rem;
}

div#title {
    font-weight: bold;
    color: var(--white-color, white);
    text-align: left;
    text-transform: uppercase;
    font-size: 1.7rem;
}

h1.title {
    color: var(--white-color, white);
    font-size: 1.2rem;
    display: block;
    text-transform: initial;
    font-weight: initial;
}

/* Cyril F 14/09 : Uniformisation de la couleur de tous les textes avec le bleu noir de Julien #011C26 */

h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--title-color, #264553);
    margin-bottom: 2rem;
}

h3 {
    color: var(--title-color, #264553);
}

h4 {
    display: inline-block;
    font-weight: 300;
    /* font-weight: normal; En commentaire car interfere avec CSS Page CGU (='TOS') (Aurelie le 01/09) */
}

h5 {
    font-weight: normal;
    font-size: 1.5rem;
    color: var(--grey, #666);
    margin-top: 2rem;
}

.siteMaxWidth {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*header,*/ /* Robin 24.05.2018 commented balises who herited useless style properties */
main/*,
footer*/ {
    position: relative;
    z-index: 1;
}

.link {
    color: var(--link-color, #004974);
    font-weight: bold !important;
}


.linkSubAction {
    color: var(--subAction-color, #0A6CA5);
}

.font {
    color: var(--font-color, #264553);
}

.titleColor {
    color: var(--title-color, #1c333d) !important;
}

.selected {
    color: var(--brand-color, #D8232A);
}

/* Xuan 22/09 : Ceci permet de supprimer la mise en forme des call2action buttons */
.eraseStyle,
.eraseStyle:hover {
    border: none;
    background: none;
    color: var(--font-color, #011C26);
    text-transform: none !important;
}

/* Kevin 21.02.2018: Style pour les icônes Ajout et Suppresion */
/* Icônes Ajout/Suppression de la liste d'abonnement */
.blocAddOrRmv i.fa {
    line-height: 1;
}

.rmvFollower,
.addFollower {
    padding: .5rem .5rem 0 0;
    text-align: right;
    width: 2.5rem;
    height: 2.8rem;
    overflow: hidden;
}

.blocAddOrRmv{
    position: relative;
    margin-right: 1rem; 
    font-size: 2.3rem !important;
    color: var(--title-color, #264553) !important;
}

.blocAddOrRmv .backgroundAddTop {
    position: absolute;
    top: -1.2rem;
    left: 0.4rem;
    font-size: 2.8rem !important;
    transform: rotate(90deg);    
    color: var(--white-color, white);
}

.blocAddOrRmv .backgroundAddBottom {
    position: absolute;
    top: -1.1rem;
    left: 0.8rem;
    font-size: 3.3rem !important;
    color: var(--white-color, white);
}

.blocAddOrRmv .colorAdd {
    position: absolute;
    top: -0.3rem;
    left: 1rem;
    font-size: 1.65rem !important;
}

.backgroundAddTop:hover,
.backgroundAddBottom:hover {
    background: none !important;
    color: var(--white-color, white) !important;
}

.colorAdd {
    color: var(--fa-check-color, rgb(0, 153, 0));
}

.colorAdd:hover{
    background: none !important;
    color: var(--fa-check-color, rgb(0, 153, 0)) !important;
}

.backgroundRmvTop {
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    font-size: 2.5rem !important;
    transform: rotate(45deg);        
    color: var(--white-color, white);
}

.backgroundRmvBottom {
    position: absolute;
    top: -1.7rem;
    left: 0.5rem;
    font-size: 3.5rem !important;
    transform: rotate(135deg); 
    color: var(--white-color, white);
}

.blocAddOrRmv .colorRmv {
    position: absolute;
    top: -0.4rem;
    left: 0.9rem;
    font-size: 1.8rem !important;
}

.colorRmv {
    color: var(--fa-cross-color, #D8232A);
}

.backgroundRmvTop:hover,
.backgroundRmvBottom:hover {
    background: none !important;
    color: var(--white-color, white) !important;
}

.colorRmv:hover{
    background: none !important;
    color: var(--fa-cross-color, #D8232A) !important;
}

/**/


/*
Header
*/

/* Brian : Importation des icons et fonts (icomoon) pour que les icones en .svg puissent êtres afficher dans le site */

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot');
    src:  url('fonts/icomoon.eot') format('embedded-opentype'),
      url('fonts/icomoon.ttf') format('truetype'),
      url('fonts/icomoon.woff') format('woff'),
      url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-logo:before {
    content: "\e902";
    color: #fff;
  }
  .icon-ballonNoir2:before {
    content: "\e901";
  }
  .icon-ballonNoir:before {
    content: "\e900";
  }
  
  
  .icon-ballonNoir:before {
    content: "\e900";
    fill: black;
  }

  #play2:before {

    color: var(--title-color, #1c333d);
    margin: 0;
    padding: 0;
  }

  #play2:hover::before{
    color: var(--brand-color, #D8232A);

  }


/* Cyril F 09.11.2017: CSS deleteStripes class is for pages what don't need to have the "Julien's special white and grey diagonales stripes in the top background of the main"; for now, just one page is like this: this is the "home" page (all in black) */

body:not(.deleteStripes)::before,
body:not(.deleteStripes)::after {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    width: 100%;
}

body::before {
    top: 0;
    width: 100%;
    height: 20rem;
    opacity: .4;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQYV2NkQAOHDh36z4gsBhKws7NjhAvCBECKwILIAmBBdAGQIADQlhNLOxfRwgAAAABJRU5ErkJggg==) repeat;
}

body::after {
    top: 5rem;
    left: 0;
    height: 15rem;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}

header {
    color: var(--white-color, white);
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    /* Andrei 17.02.2018: Reduced the padding for a better view 
    Ca réduit le padding pour mieux afficher */
    padding: 0.6rem 0.6rem;
    background: var(--brand-color, #D8232A);
}

header section {
    position: relative;
}

header:after {
    content: '';
    display: block;
    clear: both;
}

header article,
header nav {
    display: inline-block;
    vertical-align: middle;
}

header nav {
    right: 0;
    position: absolute;
    height: 100%;
}

header nav li {
    display: none;
    height: 100%;
}

/* #menuOptions = 1st ul of the nav bar, where are the different options of the menu */
header nav #menuOptions {
    /* float: left; */
    display:  inline-block;
    text-align:  center;
    padding-top: 15px;
    height: 100%;
}

header nav #menuOptions li span {
    margin-left:5px;
}

header nav #menuOptions li .notify-icon {
    color: var(--link-color);
    font-size: 1rem;
    /* position: absolute; */
    position: relative;
    /* right: -15px; */
    top: -5px;
    padding-left: 5px;
}

/* #menuIcons = 2nd ul on the nav bar, where are icons search and burger menu + */
header nav #menuIcons li {
    display: inline-block;
    right: 0;
    margin-left: 1.5rem;
    /* margin-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important; */
}


/* Diego V 01.08.2019: media query used to place properly the menu icons on small screens and avoid icon overlapping */
@media all and (max-width: 375px) {
    header nav #menuIcons li {
        margin-left: .5px;
    }
}


header nav #menuIcons {
    margin-right: 20px;
    height: 100%;
    padding-top: 14px;
    float: right;
    /* display: inline-block;
    text-align:  center; */
}

/* Diego V 01.08.2019: media query used to place properly the menu icons on small screens and avoid icon overlapping */
@media all and (max-width: 335px) {
    header nav #menuIcons {
        margin-right: 10px;
    }
}

.iconTextNavbar {

    line-height: 2.1px;
    position: relative;
    top: -4px;
    font-size: 0.8em;
    margin-left: 0.5em;
}


#menuIcons > li > a > i {

    line-height: 0em;
    margin-bottom: 0.6em;
    margin-left: 0.5em;
}

#menuIcons > li:nth-child(1) > a > i {

    margin-left: 0.7em;
    /* Diego V 01.08.2019: following line added to better adjust menu icons between 'search' icon and 'burger menu plus' */
    padding-right: 5px;

}

#menuIcons > li:nth-child(2) > a > i {

    margin-left: 0.3em;
}

/* Robin 23.05.2018: Removed the media query */
/* Robin 22.05.2018: We need the media query here because otherwise it messes up the dektop display*/
/* @media screen and (max-width:849px) {
    header nav ul:last-child li{
        margin-top: 60% !important;
    }
} */

header nav #menuIcons a i{
    font-size: 2.5rem;
}

header article:nth-child(2) {
    padding-left: 1rem;
}


header img {
    padding: .1rem;
    height: 6rem;
    /* width: 15rem; optional */
}

#headerPage {
    /*Aurelie le 05/09: Reduction de la marge  */
    margin-bottom: 1rem;
}




/**/
/*
Main
*/

main {
    margin: 6.5rem auto 0 auto;
    padding: 0 1rem;
}


/* Nicolas 08/01/18 margin to be able to scroll the page all the way down */

main>section {
    margin-bottom: 15rem;
}


/**/


/*
Formulaire
*/

input,
select,
textarea,
label,
button,
.dismiss-button,
.button-home {
    display: block;
    width: 100%;
}

input,
textarea,
select,
button {
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    font-size: 1.3rem;
    padding: 1rem;
    background-color: #fafafa;
    border: none;
}

textarea {
    min-height: 15rem;
    border: .1rem solid var(--font-color, #011C26);
    color: var(--font-color, #011C26);
    /* Ajout d'une bordure noire (Aurelie le 25/08) */
    margin-top: .5rem;
    /*Ajout d'une marge exterieure vers le haut (Aurelie le 28/08) */
    resize: none/*Ajout style pour ne pas resizer le champs Textarea (Aurelie le 29/08*/
}
#priceField textarea{
    min-height: 5rem;
}

/*textarea {
    min-height: 15rem;
    border: .1rem solid var(--font-color, #011C26);
    margin-top: .5rem;
    resize: none;
}*/


/* Ajout d'une bordure noire (Aurelie le 25/08) */


/* Ajout d'une marge exterieure vers le haut (Aurelie le 28/08) */


/*Ajout style pour ne pas resizer le champs Textarea (Aurelie le 29/08) */

input[type="file"] {
    font-size: 1.1rem;
}


/* input+input {
    margin-top: 1rem;
} */

fieldset,
button {
    border: none;
}

fieldset:not(:first-of-type) {
    /*Suppression du style pour ne plus avoir de marge au dessus du titre (Page Inscription 2/2) (Aurelie le 01/09) */
    /* padding-top: 2rem; */
    margin-top: 2rem;
}

li a.link {
    margin: 2rem;
}

button,
.call2action,
.dismiss-button,
.unsubscribeAction {
    font-weight: 700;
    font-size: 1.3rem;
    display: block;
    max-width: 35rem;
    text-transform: uppercase;
    color: var(--white-color, #D8232A);
    border: .4rem solid var(--brand-color, #D8232A);
    border-radius: 0;
    cursor: pointer;
    padding: .5rem 0;
    margin: 1rem auto 0;
    background: var(--brand-color, #D8232A);
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: center;
}


/* button:hover,
button:focus,
.call2action:hover,
a.button-home:hover,
a.button-home:focus {
    color: var(--white-color, white);
    border-color: transparent;
    background-color: var(--brand-color, #D8232A);
} */

.styled-checkbox {
    position: absolute;
    opacity: 0;
}

.styled-checkbox+label {
    position: relative;
    cursor: pointer;
    padding: 0;
    font-weight:bold;
}

.styled-checkbox+label:after {
    content: '';
    margin-left: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: var(--white-color, white);
    border-radius: 10px;
    border: 1px solid #333;
    box-sizing: border-box;
}


/**/


/* 
Style Page formulaire
*/

.formPage #coverPicture {
    width: 15rem;
    height: 15rem;
    margin-bottom: 1.5rem;
    -webkit-border-radius: 0;
    border-radius: 50%;
    margin-left: 25%;
}

#headerPage h2 {
    font-size: 2rem;
    margin-bottom: .5rem;
}

#headerPage p {
    font-size: 1rem;
    text-transform: uppercase;
    padding-left: 3rem;
    /*margin-top: -1.8rem;*/
    margin-left: 1rem;
    margin-bottom: 1.5rem;
}

h2 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: end;
    align-items: end;
}

h2 .title_details{
    font-size: 1.5rem;
    font-weight: 550;
    font-style: italic;
}

h2 span:last-child {
    padding-top: .4rem;
    padding-left: .5rem;
}

h2 span .fa {
    font-size: .8em;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%, -50%);
}

.formField {
    margin-bottom: 1rem;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
   
}

#fieldset-informations div:first-child {
    /*Aurelie 24/01: ajout d'une marge entre la photo et le 1er champs*/
    margin-top: 2rem;
}

.formField input,
.formField select {
    -webkit-flex: 3;
    flex: 3;
}


/* 29/09 Quentin : La classe formField uniquement pour le style sur la page signup*/

.formField_2 {
    margin-bottom: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.formField_2 input,
.formField_2 select {
    -webkit-flex: 3;
    flex: 3;
}

.formField_input {
    margin-bottom: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.formField .imperial{
    -webkit-flex: 1;
    flex: 1;
}
label.imperial{
    margin-right: 2.5rem;
}
#inch{
    padding-left: 2rem;
}
.gender_1 {
    width: 5%;
}

.gender_2 {
    margin-left: 10px;
    width: 5%;
}

/* Kevin 27.02.2018: Style for form gameEdit */
/* Nathalie D 31.10.2018: reduce of the margin top in the groundEdit page */
form.gameEdit {
    margin-top: 2rem;
}

/* Kevin 27.02.2018: Style for form teamEdit */
form.teamEdit {
    margin-top: 2rem;
}

/*veiller a ce que le style ne gene pas d'autres pages (Aurelie le 29/08)*/

.formPage label:not(.toggle-label) {
    padding-right: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: none;
    -webkit-flex: 1;
    flex: 1;
}


/* Jordan 31/08: unset flex property off label#input-icon in order to move them closer to inputs */

.formPage label.input-icon {
    flex: 0;
    font-size: 2rem;
}

.formPage form>label {
    margin: 1.5rem auto .5rem auto;
}

.formPage .content img {
    width: 100%;
    margin-bottom: 1.5rem;
}


/* Kevin 12.02.2018: Style for form */

.formWithIcon {
    width: 100%;
    margin-bottom: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.iconForm {
    width: 2rem;
    text-align: center;
    font-size: 2rem;
}


/**/


/* Résultats de recherche | Search results */

#search-results p,
#search-results label {
    display: flex;
    justify-content: center;
}


/*
    Formulaires de connexion et d'inscription
*/

.login-form fieldset:not(:first-of-type),
.signup-form fieldset:not(:first-of-type) {
    display: none;
}

.login-form .facebook-login,
.signup-form .facebook-signup {
    margin-bottom: 3rem;
}

.home-form form:not(:first-of-type) {
    padding-top: 3rem;
}


/*
    Onglets du profil
*/

/* #tabs put in com, because it seems useless and never uses in other files.
#tabs {
    text-align: center;
    position: fixed;
    width: 100%;
    font-size: 1.2rem;
}

#tabs .ui-tabs-nav {
    display: flex;
    margin: 1rem 0;
}

#tabs .ui-tabs-nav ul,
.intitule-icon {
    display: block;
    width: 100%;
    height: auto;
}

#tabs .ui-tabs-nav li {
    display: inline-block;
    width: 25%;
    height: 65px;
    line-height: 40px;
    text-align: center;
    border: none;
    background: var(--lightgrey, lightgrey);
    padding: 0.4rem 0;
}
*/

.followedButton {
    margin-bottom: 1rem;
}


/*
    Call2action

*/

div.noteProposal{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

div.inputTeamScore{
    text-align: center;
    margin: 0 auto;
}

div.inputTeamScore{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem;
}

div.inputTeamScore input::-webkit-inner-spin-button,
div.inputTeamScore input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}

div.inputTeamScore input{   
    text-align: center;
    width: 40%;
    margin: .5rem auto;
    font-size: 2rem;
    background-color: #f0f0f0;
}

b.vsProposalScore{
    font-size: 1.6rem;
}

.action-button {
    font-weight: 700;
    font-size: 1.3rem;
    display: block;
    max-width: 35rem;
    text-transform: uppercase;
    color: var(--white-color, white);
    border: .4rem solid var(--brand-color, #D8232A);
    border-radius: 0;
    cursor: pointer;
    padding: .5rem 0;
    margin: 1rem auto 0;
    background: var(--brand-color, #D8232A);
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: center;
}


/*CSS unique pour la Page Modifier une equipe (Aurelie le 05/09)  */

#infos-access, .infos-toggle {
    font-size: 1.2rem;
    margin: 2rem 0;
}

#infos-mode {
    font-size: 1.2rem;
    margin: 2rem 0;
}

/* Andrei 17.03.2018  We added the class .info-sub-left and we modified the padding for a better view*/

.infos-sub-right{
    text-align: right;
    padding-left: 45%; 
}

.infos-sub-left {
    text-align: left;
    padding-right: 45%;
}

.infos-sub-comp{
    display: none;
    margin-bottom: .5rem;
}

.infos-sub {
    font-size: 1.2rem;
    margin: 1.5rem 0;
    padding-right: 30%;
}

.inscription {
    font-size: 1.2rem;
}

.logOutFooter {
    font-size: 1rem;
    text-align: center;
}


/* General structures */

.centeredChoices {
    text-align: left;
    margin: 2rem auto 0;
    display: table;
}

.list {
    overflow-y: auto;
}

/* Nathalie D 16.10.2018: modification in the position of the radio inputs in "structure" field in the ground register page (= 'groundNew.php') */

#radio1,.radioforGround{
    display: inline;
}

/* Flow rules */
/*Youx 15.03.2018: I think this is not used*/
/* #buttons-line {
    text-align: center;
} */

/*Youx 15.03.2018: I think this is not used*/
/* 
#buttons-line button {
    display: inline-block;
    width: 49%;
    margin: 0;
} */


/*
.centered>.fa {
    display: inline-block;
    width: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: 1rem;
    font-size: 2.5rem;
}
*/


/* Other elements (buttons, misc...) */


/* Aurelie 20/10: CSS only for the white/grey buttons */

.dismiss-button {
    color: var(--white-color, #666);
    border-color: var(--dismiss-color, #666);
    background-color: var(--dismiss-color, #666);
}
.archive-button {
    color: var(--white-color, rgb(235, 136, 23));
    border-color: var(--archived-color,rgb(235, 136, 23));
    background-color: var(--archived-color, rgb(235, 136, 23));
}

/*Aurélie le 05/09: Ajout d'une class not-first-button (Page "Map Mode Liste" et Page "Map Mode Filtres")
 pour gérer l'espacement moindre pour les boutons avec la class .dismiss-button, lorsque ce bouton gris n'est pas le premier des boutons */

.not-first-button {
    margin-top: 1rem;
}

.dismiss-button:hover,
.dismiss-button:focus {
    color: var(--white-color, white);
    background-color: var(--dismiss-color, #666);
}

.dismiss-button:hover:disabled {
    border-radius: 0;
    color: var(--dismiss-color, #666);
    background-color: transparent;
    border-color: var(--dismiss-color, #666);
    cursor: default;
}

.yes-no-button {
    border: none;
    background: none;
}


.respond-invitation,
.respond-team-invitation {
    border: 0;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

.listData li>#teamInvitationName {
    position: relative;
}

.packLastButton {
    margin-bottom: 1.5rem;
}

.lastElement {
    margin-bottom: 2.5rem;
}


/* FontAwesome */

.fa {
line-height: 0.7;
}

.fa-check-circle-o,
.fa-check {
    color: var(--fa-check-color, green) !important;
}

.fa-times {
    color: var(--main-color-darker);
}

.fa-question-circle-o {
    color: var(--fa-question-color, orange);
}

.fa-question-circle-o.singleQuestion:hover {
    color: var(--fa-question-color, orange) !important;
}


/* Filtres Carte Interactive */
#filters,
#moreFilters {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

#moreFilters {
    border-top: .1rem solid var(--title-color, #1c333d);
    top: 3rem;
    position: absolute;
    max-height: 3rem;
    background-color: white;
    width: 100%;
    overflow: hidden;
    z-index: 3;
}

#filters .filter,
#moreFilters .moreFilter {
    position: relative;
    width: 100%;
    height: 1.6rem;
    text-align: center;
    margin: auto;
    border-left: .3rem solid var(--brand-color, #D8232A);
    padding: 0 .3rem;
    margin-bottom: .7rem;
}

#moreFilters .moreFilter {
    margin-top: .8rem;
}

#filters .filter a,
#moreFilters .moreFilter a {
    position: relative;
    bottom: .1rem;
    box-sizing: border-box;
    width: 80%;
    margin: auto;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--title-color, #1c333d);
    padding: 1rem 0rem 0rem;
    margin: 1rem 0 1.5rem;
    font-size: 1.3rem;
}

#moreFilters .moreFilter a {
    font-size: 1.1rem;
}

#filters .filter a:hover,
#moreFilters .moreFilter a:hover{
    color: var(--brand-color, #D8232A);
    cursor: pointer;
}

div#filters .filter:first-child,
#moreFilters .moreFilter:first-child {
    border-left: none;
}

.filterActive {
    transition: none;
    color: var(--brand-color, #D8232A) !important;
    border-bottom: .2rem solid var(--brand-color, #D8232A);
}

/* Carte interactive */
/* #mapContentHome{
    height: calc(100vh - 55px - 51px);
}
@media (max-width: 150px){
    #mapContentHome{
        height: calc(91vh - 55px - 51px);
    }
} */
#map {
    /* height: 100%; */
    /* Standart */ /* 55px = height of header ; 51px = height of the footer */
    height: calc(100vh - 55px - 51px);
    /* Firefox */
    height: -moz-calc(100vh - 55px - 51px);
    /* WebKit */
    height: -webkit-calc(100vh - 55px - 51px);
    /* Opera */
    height: -o-calc(100vh - 55px - 51px);
}
#myMap{
    position: absolute;
    top: 0;
    width: 100%;
    height: 0;
    background-color: rgba(255, 255, 255, 1);
    overflow: auto;
    max-height: 100%;
    transition: 1s cubic-bezier(1, 0, 0.22, 1.01)
}
.dynamic-filters{
    position: absolute;
    max-height: 3rem;
    background-color: white;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 2;
    transition: 1s cubic-bezier(0.96, -0.12, 0, 1.16);
    box-shadow: 0px 4px 8px -1px rgba(0,0,0,0.13);
}
#listData2{
    overflow: auto;
    left: 10%;
    top: 15%;
    width: 80%;
    /* height: 70%; */
    max-height: 70%;
    box-shadow: 10px 14px 10px -1px rgba(0,0,0,0.23);
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: fixed;
    z-index: 999;
    padding-top: 0;
    background-color: white;
}
div#groundDetail li {
    padding-top: 10px;
}
.mapInfoCover,
.mapInfoAbout {
    margin-top: .5rem;
}
.infoPicture img{
    max-height:15rem;
    max-width:22rem;
    margin-bottom:-2.7px
}
 .infoPicture {
    text-align:center;
    max-height:15rem;
    max-width:22rem;
    margin:10px 0 10px 0;
}
.infoDetailsPicture {
    text-align:center;
    max-height:48rem;
    margin:10px 0 10px 0;
}

.infoWindow {
    margin-top: .7rem;
}

.infoWindowIcon {
    display: inline-block;
    width: 2rem;
    text-align: center;
    margin: 0 .3rem .1rem 0;
}

#myMap .listData ul{
    margin-bottom: 0;
    margin-top: 1rem;
}

.detailsMapList {
    display: block;
    margin-top: 1rem;    
    margin-bottom: 1rem;
}

.defaultListGround {
    padding-bottom: .5rem;
}

#modifyRadius {
    margin-top: 1rem;
}

.mapSeparator {
    border-top: .1rem solid var(--title-color, #1c333d);
    width: 100%;
    padding-top: 2rem;
}

.wallButtonPostsSeparator {
    border-top: .1rem solid var(--title-color, #1c333d);
    width: 100%;
    margin: 1.5rem 0;
}

a.listButton {
    margin: 2rem auto;
}

/* Profile page */

.soustitre {
    font-size: 1.6rem;
    text-align: left;
    margin-left: 5%;
}


/* Profile header (main data about the player */

.profile_photo {
    display: table-cell;
    padding: 1rem;
    width: 55%;
    height: auto;
    vertical-align: center;
}

.profile_photo>img {
    border-radius: 50%;
}

.profile_info {
    display: table-cell;
    padding: 1rem;
    width: 45%;
    height: auto;
    vertical-align: center;
}

.profile_info>ul {
    display: inline-block;
    width: 100%;
    text-align: left;
}

.profile_info>ul>li {
    display: block;
    width: 100%;
    font-size: 1.2rem;
}

.profile_info>ul>li:last-child {
    text-align: center;
    margin-top: 1rem;
}

#modify>a>i {
    color: var(--link-color, #004974);
    font-size: 1.8rem;
    margin: 0;
    text-align: left;
}


/* Matchs section */

.profile {
    color: var(--white-color, white);
}

.profile a {
    color: var(--white-color, white);
}

.test {
    color: #6B0C22 var(--brand-color, #D8232A) var(--font-color, #011C26) #101010 #C80000;
}


/*
Style infoCard
*/

#cardHeader,
#cardHeader ul,
#menuCard ul,
.innerTeam,
#friendsHeader,
.singlePlayer {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}



/* Cyril F & Aurélie, 25 09: reduction de l'espace entre le cartouche et les onglets */

#cardHeader {
    word-wrap: break-word;
    margin-bottom: .5rem;
}

#cardHeader article {
    -webkit-flex: .8;
    flex: .8;
}

#cardHeader li {
    -webkit-flex: 1;
    flex: 4 0 0;
    overflow: auto;
}

#cardHeader li:last-child {
    text-align: center;
    -webkit-flex: 1;
    flex: 1;
    font-size: 1.8rem;
}


/* Cyril F & Aurélie, 25 09: gap between the status "textarea to fill" and the "Submit input" */

#cardHeader li:last-child .call2action {
    font-size: 1rem;
    width: auto;
    padding: .2rem .3rem .1rem .3rem;
    margin-bottom: 2.5rem;
    margin-left: .3rem;
    border-width: .2rem;
    font-weight: lighter;
}

#cardHeader article:last-child {
    text-align: left;
    -webkit-flex: 2;
    flex: 2;
}

#playerProfile {
    max-width: 75%;
}


/* Julien, then Aurelie 28 09: add of the style for my Player profile in the CardHeader (Cartouche); Aurelie put the picture in a fixed position and with a top of 10rem */

#coverPicture {
    height: 8rem;
    width: 8rem;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    /* Jordan 10/10 These two lines break the display, we have to find an another method */
    /* position: fixed;
    top: 9.5rem; */
}

#cardHeader h2 {
    margin: .5rem 0 .2rem 0;
    font-size: 2rem;
    border-bottom: .1rem solid var(--lightgrey, lightgrey);
    padding-bottom: .2rem;
    margin-bottom: .5rem;
}

#menuCard ul {
    border: .5rem solid var(--menuCard-box, #eee);
    padding: 1rem 0 0.2rem;
    margin: 1rem auto;
}

#cardHeader li {
    font-size: 1.1rem;
    /*text-transform: uppercase;*/
}


/* Cyril F & Aurélie, 25 09: add of the moodStyle for the "p balise of cardHeader" */

#cardHeader form input,
#cardHeader form .moodStyle,
#cardHeader p.moodStyle {
    padding: 0;
    margin-top: 10px;
    font-size: 1.1rem;
    min-height: 100%;
    text-transform: none;
}

/* #cardHeader form .moodStyle {
    resize: none;
    display: inline-block;
    background: #fff;
    color: #011C26;
} */

#cardHeader form input[placeholder] {
    font-style: normal;
}


/* Cyril F, 25 09: creation of the moodStyle for the player's status textarea */

#cardHeader textarea.moodStyle {
    min-height: 0;
    border: none;
    display: inline-block;
    background: var(--white-color, white);
    color: var(--font-color, #011C26);
}

#viewStatus li {
    cursor: pointer;
}

#menuCard {
    text-align: center;
}

#menuCard li {
    -webkit-flex: 1;
    flex: 1;
    position: relative;
}

#menuCard .notify-icon{
    font-size: 1.8rem !important;
    color: var(--brand-color);
    position: absolute;
    top: -8px;
}

#menuCard .notify-icon number{
    position: absolute;
    color: white;
    font-family: arial;
    left: 3.5px;
    top: 1px;
    font-size: 1.5rem;
}

#menuCard .notify-icon number.tooBig{
    left: 1.5px;
    top: 2px;
    font-size: 1.2rem;
}

#menuCard li .fa,
.sidenav li .fa,
footer li .fa {
    font-size: 2.5rem;
    margin-bottom: .5rem;
}

#menuCard li a,
footer li a {
    color: var(--title-color, #1c333d);
    display: inline-block;
}

#menuCard li a {
    width: 90%;
}

#menuCard li a:hover,
#menuCard li a.active,
.sidenav li a:hover,
.sidenav li a.active,
.sidenav li a:hover .fa-question-circle-o,
.sidenav li a.active .fa-question-circle-o,
footer li a:hover,
footer li a.active {
    color: var(--brand-color, #D8232A);
}

footer li a.notActive {
    color: var(--title-color, #1c333d);
}

#menuHeader:hover,
#menuFooter:hover {
    cursor: pointer;
}

#menuCard li span,
footer li span {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

#editStatus li span {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    margin:0;
    padding: 0;
    text-align: left;
}
#editStatus li{
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/*
Lists of single items
*/

.listData {
    position: relative;
    padding: 1rem;
    transition: inherit;
}

.listData section {
    position: relative;
    width: 100%;
    display: none;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.listData section.activeCard {
    display: block;
    z-index: 1;
}

h3.subTitle {
    text-align: left;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-left: .3rem solid var(--brand-color, #D8232A);
    padding-left: .5rem;
    margin-top: 1.5rem;
}

h3.subTitle+p {
    margin-top: .5rem;
}

.menuDesktop{
    color: var(--white-color, #fff);
}

/* 
List of games
*/

.listData h3.pastGame+ul>li a:hover {
    border: .2rem solid var(--cat3-color, #666);
}

.listData h3.pastGame {
    border-color: var(--cat3-color, #666);
}

.listData h3.pastGame+ul>li {
    background: var(--cat3-pastel, #eee);
}

/*h3.subTitle+ul li>a:hover {
    border: .2rem solid rgb(132, 182, 193);
}*/

.listData li.dayList {
    display: block;
    padding: 0;
    max-width: 50rem;
    margin: auto;
}

li.dayList h4 {
    margin-top: .5rem;
}

.listData li.dayList>ul {
    margin: 0;
}

.listData li.game {
    align-items: baseline;
}

.listData li.teamStatLi{
    margin: 0;
    padding: 0 1rem;
}

li.game {
    max-width: 50rem;
    overflow: hidden;
    position: relative;
}

li.game div {
    display: flex;
}

li.game .gameDescription {
    margin-left: 1rem;
    flex-direction: column;
    flex-grow: 1;
}

li.game .gameDescription>div {
    margin-bottom: 1rem;
}

li.game .matchPlayground {
    font-style: italic;
}

li.game div.versusTeams {
    margin: 0;
    width: 100%;
    text-align: center;
    align-items: center;
    position: relative;
}

li.game .versus {
    display: block;
}

div.scoreBox{
    text-align: center;
    margin-bottom: 1rem;
}

.italicText{
    font-style: italic;
}

div.scoreBox span{
    font-size: 2.5rem;
}

div.score{
    margin: .7rem 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

b.vsScore{
    position: relative;
    bottom: .4rem;
    margin: 0 1rem;
}

#detailsCanceler{
    padding: .8rem;
}

.dateCancelProp{
    margin: .5rem;
    text-align: right;
    font-size: 1rem;
    font-style: italic;
    color: var(--info-selectize);
    line-height: 1rem;
}

a.TeamLittle{
    font-size: 1.6rem;
    display: block;
    margin-top: 1rem;
}

span.infoTeamLittle{
    font-size: 1.3rem;
    font-style: italic;
}

li.game .headbands {
    z-index: 2;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 1.3rem;
    right: -2rem;
    transform: rotate(55deg);
    color: var(--font-color, #264553);
    padding: .5rem 0;
    width: 12rem;
    border-top: .1rem solid var(--brand-color, #D8232A);
    border-bottom: .1rem solid var(--brand-color, #D8232A);
    background-color: var(--white-color, white);
    font-weight: bold;
}

li.game .blueBorder {
    border-top: .1rem solid var(--cat1-color, #84B6C1) !important;
    border-bottom: .1rem solid var(--cat1-color, #84B6C1) !important;
}

.listData span a:hover {
    color: var(--brand-color, #D8232A);
}

.listData li>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0rem solid rgba(216, 35, 42, 0);
}

.listData li.singlePlayer>a {
    display: flex;
    align-items: center;
    position: static;
}

.listData .blueList li span b {
    background-color: var(--cat1-color, #84B6C1);
    padding: .2rem .5rem;
    color: var(--white-color, white);
    font-weight: 500;
    margin-right: .2rem;
}


/* Jordan 09/10 Style for games for bold */

.listData .redList li b {
    background-color: var(--cat2-color, #D8232A);
    padding: .2rem .5rem;
    color: var(--white-color, white);
    font-weight: 500;
    margin-right: .2rem;
}


/* Aurelie 27/11: Style for games for bold */

.listData .greyList li span b {
    background-color: var(--cat3-color, #666);
    padding: .2rem .5rem;
    color: var(--white-color, white);
    font-weight: 500;
    margin-right: .2rem;
}

.listData .blueList li>a:hover {
    border: .2rem solid rgb(132, 182, 193);
}

.listData .redList li>a:hover {
    border: .2rem solid var(--cat2-color, #D8232A);
}

.listData .greyList li>a:hover {
    border: .2rem solid var(--cat3-color, #666);
}

h3.subTitle.subTitleBlue {
    border-color: var(--cat1-color, #84B6C1);
}

h3.subTitle.subTitleRed {
    border-color: var(--cat2-color, #D8232A);
}

h3.subTitle.subTitleGrey {
    border-color: var(--cat3-color, #666);
}

/* Youx and Cyril F 06.02.2018: gameMatesList is not anymore necessary/used, because the singlePlayer style is more precise and so take the step */


/* 
.gameMatesList .fa {
    font-size: 2rem;
    color: var(--grey, #666);
} */

.gameDetailList li,
.listData ul li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.gameDetailList li span {
    font-size: 1,3rem;
    font-weight: 700;
    -webkit-flex: 1;
    flex: 1;
}


/*Aurelie le 28/08: Ajout du CSS pour agrandir les icones*/

.gameDetailList li span .fa,
.formPage .input-icon {
    font-size: 2rem;
}

.listData ul li span.mateName {
    -webkit-flex: 15;
    flex: 15;
}


/*Aurelie 24/01 + nicolas 30.01.2018: ajout de style pour caler l'icone en dessous de l'image du joueur */

.listData ul li span.mateIcone {
    position: absolute;
    top: 3.2rem;
    left: 3.6rem;
    background: white;
    border-radius: 50%;
}

.listData ul li span.mateIcone button {
    margin: 0;
}

.listData .gameDetailList li span:first-child {
    transform: translateY(.1rem);
}

.listData .gameDetailList li span:last-child {
    -webkit-flex: 25;
    flex: 25;
    text-transform: none;
    font-size: 1.3rem;
}

.blueList li {
    background: var(--cat1-pastel, #DCEDF1);
}


/*CYRIL ?  */


/* Aurelie 29/09: changement du padding pour ajouter l'ensemble des icones et des textes  */

.colorBlue {
    background: var(--cat1-pastel, #DCEDF1);
    padding: .8rem 0 .8rem .3rem;
}

.redList li {
    background: var(--cat2-pastel, #F7DADB);
}

.greyList li {
    background: var(--cat3-pastel, #eee);
}

.listData li span {
    display: block;
}

.listData li.singleGround span {
    display: inline;
}

.listData li.singleGround a {
    position: static;
}

.listData li span:not(:first-of-type) {
    /* font-size: 1.1rem; */
    font-weight: 100;
    margin-left: 10px;
}

span.type,
span.versusTeams {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.3rem;
}

span.versusTeams {
    text-transform: none;
}

.listData ul {
    margin-bottom: 3rem;
}


/* Andrei 03.02.2018: I removed the padding so that the team results are 
aligned on the left and a bit more condensed */

.listData ul li {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    min-height: 2rem;
    text-align: left;
    line-height: 1.5rem;
    position: relative;
    color: var(--font-color, #011C26);
}

.listData ul li.game {
    margin: 0 0 1.5rem;
}

/* Cyril F and Aurélie 28 09: style of the descriptive information, for "Player profile, Player Content" and for "Ground profile, Ground Content" */

.userPersonalInfos {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.listData .userPersonalInfos li {
    width: 50%;
    font-size: 1.3rem;
    padding: .5rem 0;
    background: transparent;
    margin: 0;
}


/* Aurelie 29 09 17: mise en commentaire de la marge en haut, reduction de la marge en bas  */


/*Andrei 03.02.2018: removed the margin-bottom so that the italics are at the same level as the rest of the text*/

.innerTeam p {
    -webkit-flex: 7;
    flex: 7;
    text-align: left;
}

.innerTeam a {
    flex: 7 1 0;
    text-align: left;
}

.subAction {
    font-weight: 700;
    font-size: 1.3rem;
    display: block;
    max-width: 35rem;
    text-transform: uppercase;
    color: var(--white-color, white) !important;
    border: .4rem solid var(--subAction-color, #5984AF);
    border-radius: 0;
    cursor: pointer;
    padding: .5rem 0;
    margin: 1rem auto 0;
    background: var(--subAction-color, #5984AF);
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: center !important;
}

.firstButton {
    margin-top: 3rem;
}

.subAction i {
    font-size: 1.3rem !important;
}

a i.fa.fa-pencil-square-o.eraseStyle {
    cursor: pointer;
}

/*Aurelie 25/09: changement de l'alignement qui est maintenant a gauche (anciennement a droite), changement de la taille de police initialement 1.5rem  */

.innerTeam p:last-child {
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 1.3rem;
    color: var(--subAction-color, #5984AF);
    font-weight: 700;
}


/*Aurelie 25/09: ajout d'une marge a droite pour espacer l'icone et le texte, changement taille de police plus grosse pour le logo  */

.innerTeam i {
    margin-right: .5rem;
    font-size: 2rem;
}

.singleTeam {
    position: relative;
    max-width: 50rem;
    margin: 1rem auto!important;
    text-align: left;
    min-height: 4.5rem;
    padding: .7rem 0;
    border-bottom: .1rem solid var(--single-player-line, #eee);
}

li.singleTeam {
    display: block;
    padding: 1rem 0;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.singleTeam a.teamName {
    display: block;
    width: auto;
    align-items: center;
    height: 100%;
}

.singleTeam a.teamIcon {
    display: block;
    width: 4.5rem;
    text-align: center;
    align-items: center;
    height: 2rem;
}

a.teamIcon i {
    position: relative;
    top: .3rem;
    text-align: center;
    margin: 0;
}

.listData #friendsHeader li {
    background-color: transparent;
    flex: 1;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
}

.listData #friendsHeader li b {
    color: var(--brand-color, #D8232A);
}

#friendsHeader li>a {
    padding: .5rem;
    border: .1rem solid var(--friends-box, #eee);
    position: initial;
    width: 100%;
    display: inline-block;
}

#friendsHeader li>a:hover,
#friendsHeader li>a.active {
    border: .1rem solid var(--brand-color, #D8232A);
    color: var(--brand-color, #D8232A) !important;
}

#friendsHeader li:nth-child(2)>a {
    width: 100%;
}

ul#friendsHeader {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.singlePlayer {
    text-align: left;
}

.singlePlayer div:nth-child(2) {
    -webkit-flex: 7;
    flex: 7;
    text-align: left;
}

.singlePlayer div {
    font-size: 1.2rem;
    -webkit-flex: 1;
    flex: 1;
}


/* Nicolas 17.01.2018: to vertically align the buttons with the icons */

.singlePlayer button {
    margin: 0;
    width: 4.5rem;
}

/* Altan 25.04.2018: added this css for the display of the grounds status in the singleGround.php so it looks like "lastConnection" (just below) */
.singleGround .groundStatusLittle{
    font-size: 1.2rem;
    font-style: italic;
    color: var(--info-selectize);
    line-height: 1rem;
}

.singlePlayer .lastConnection{
    font-size: .9rem;
    font-style: italic;
    color: var(--info-selectize);
    line-height: 1rem;
}


/* Aurelie 15/09: Modification du style des icônes d'ajout d'amis : I put out the border and fixed the color as dark blue - "Julien's bleu noir" */

.singlePlayer .fa,
.singleGround .fa {
    font-size: 2rem;
    border-radius: 50%;
    /* padding: .5rem;
    border: none;
    color: var(--font-color, #011C26); */
    text-align: center;
}

/* Kevin 26.02.2018: Style for SINGLEGROUND */

ul#allSingleGround i.fa.fa-times {
    color: var(--fa-cross-color, #D8232A);
    padding: 0.5rem;    
}

ul#allSingleGround li.singleGround {
    text-align: left;
    min-height: 4.5rem;
    border-bottom: .1rem solid var(--single-player-line, #eee);
}

ul#allSingleGround li button {
    margin: 0;
    width: 4.5rem;
}

i.fa.fa-star.groundRef,
i.fa.fa-star-o.groundFav {
    color: var(--brand-color, #D8232A);
    padding: 0.5rem;
    align-items: center;
}

i.fas.fa-star-half-alt.favToRef {
    color: var(--brand-color, #D8232A);
    padding: 0.5rem;    
    font-size: 2rem;
}

/* Aurore F 19.11.2020: style optimization for the 'menuButtons.php' */

/* Footer icons size */
.menu-buttons-icons {
    font-size: 2.2rem;
}

/* Header */
/* header>body>section>nav>ul {
    font-size: 10rem;
} */

#favorite button {
    color: var(--brand-color, #D8232A);
}

.singleGroundName {
    position: relative;
    bottom: .2rem;
    margin-left: 0rem !important;
}

a:hover .singleGroundName {
    transition: .5s ease;
    color: var(--brand-color, #D8232A);
}

/* Aurélie et Cyril F 15 09: Creation of this style to personnalize the hover of buttons of the Members part */

.singlePlayer .fa:hover {
    background: var(--white-color, white);
    color: var(--brand-color, #D8232A);
}

p.playerName {
    font-weight: 800;
    font-size: 1.6rem;
}


/*Aurelie 15/09: Ajout d'une marge en haut */

.singlePlayer {
    text-align: left;
    border-bottom: .1rem solid var(--single-player-line, #eee);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    margin-top: .5rem
}

.friendsList {
    display: none;
}

.friendsList.activeList {
    display: block;
}

/* Nathalie D 02.11.2018: addition of a font weight to make the role subtitles be bold */
#followers.activeList{
    font-weight: bold;
}

ul.teamInvitations button.respond-invitation,
ul.gameMatesList button.respond-team-invitation {
    width: 4.5rem;
}

/* Youx 15.03.2018: I think it's not used */
/* 
#gameInvitationBox {
    margin-bottom: 3rem;
}

#gameInvitationBox div {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#gameInvitationBox div button {
    width: 14rem;
    display: inline-block;
} */

#playerPicture {
    height: 4rem;
    width: 4rem;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    margin-right: 1rem;
}

.hidden {
    display: none;
}


/* 
Ground profile
*/

span.groundAdress {
    display: block;
    margin-bottom: .5rem;
}

.titleGroundDetails {
    color: var(--font-color, #264553);
    font-weight: bold;
}

.infoGroundDetails {
    margin-left: 1rem;
}


/*
Team profile
*/

#teamPicture {
    min-height: 18rem;
    width: 100%;
    background-position: center;
    background-size: cover;
    display: flex;
}

#teamPicture div.interaction {
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
    align-self: flex-end;
    flex: 1;
    height: 3rem;
    padding: 0 1rem;
    font-size: 1.4rem;
}

#teamPicture div.interaction i {
    font-size: 2rem;
    margin-right: .5rem;
}

#teamPicture div.interaction button {
    padding: 0 1rem;
    margin: 0;
    height: 3rem;
    font-weight: lighter;
}

#waitingResponse {
    padding: .6rem 1rem;
    font-weight: lighter;
}

p.invitText {
    margin: 1.3rem 0;
}

/*
*   TABLEAU
*/

table.rankingTeamTable{
    width: 100%;
    margin: 1rem 0 3rem 0;
    border-collapse: collapse;
    text-align: center
}

table.rankingTeamTable th{
    font-size: 1.3rem;
    font-weight: bold;
    padding: 0 .5rem;
}

table.rankingTeamTable tr{
    
    border-bottom: 1px solid var(--title-underline, lightgrey);
}

table.rankingTeamTable td{
    padding: .5rem .5rem;
}

table.rankingTeamTable td:first-child{
    padding: 0;
}



/* 
*   $SELECTIZE
*/


/* Kevin 09.02.2018: CSS for select and option INFORMATION on selectize */

.infoSelectize {
    font-size: 1.1rem;
    color: var(--info-selectize);
    margin-left: 1rem;
}


/* Kevin 09.02.2018: CSS for select and option LOWER INFORMATION on selectize */

.lowerInfoSelectize {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--info-selectize);
    margin-left: 1rem;
}


/* Kevin 09.02.2018: CSS for select and option INFORMATION on selectize */

.selectize-dropdown .active {
    background-color: var(--hover-selectize) !important;
}


/* Kevin 13.02.2018: This class is enable on selectize SELECT where there is an icon on left */

.selectizeWithIcon {
    width: calc(100% - 3rem);
}


/* Kevin 09.02.2018: item selected ellipsis */

.selectize-input {
    padding-right: 3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Kevin 09.02.2018: drop-down ellipsis */

.blocSelectize {
    padding-right: 3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Kevin 09.02.2018: CSS for disable background on selectize when this text IS NOT search in database */

.noHighLightSelectize .highlight {
    background: none !important;
}


/* Kevin 09.02.2018: CSS for change background on selectize when this text IS search in database */

.highlight {
    background: var(--highlight-selectize) !important;
}


/* 
* END SELECTIZE
*/

/*
Game Profile
*/

#versusTeams {
    margin: .5rem 0;
    min-height: 3rem;
    font-weight: lighter;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

div.team {
    width: 50%;
    position: relative;
    font-weight: 700;
}

div.team a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.home.team {
    padding-right: 2rem;
    justify-content: flex-start;
}

div.ext.team {
    padding-left: 2rem;
}

div.versus {
    display: inline-block;
    position: absolute;
    left: 45%;
    right: 45%;
    top: 50%;
    transform: translateY(-50%);
}


/*
Ground Profile
Cyril F 11 and 28.09.2017: Addition of a style for title composed with "1 icon + 1 title"
*/


/* h3.iconSubTitle {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding-left: .5rem;
}

h3.iconSubTitle+ul {
    font-size: 1.1rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
} */

h3.iconSubTitle span:last-of-type {
    /* text-align: left; */
    font-size: 1.2rem;
    text-transform: uppercase;
    padding-left: .5rem;
    /* margin-top: 1.5rem; */
}

.photobasket {
    max-width: 9%;
}

#txtPosition {
    position: absolute;
    margin-top: 1rem;
}


/* Aurelie 29/09: Duplication du style de Julien, ajout d'une nouvelle class pour faire le style de l'onglet Terrain sur la page Terrain */

.groundInfos {
    margin-top: 1rem;
}

.listData .groundInfos li {
    /* width: 50%; */
    font-size: 1.3rem;
    padding: .5rem 0;
    background: transparent;
    margin: 0;
}


/*
Footer
*/
/* Note : there is 2 types of footers : footerMenu is the one with the "play" button, footerNoMenu is the one when you are disconnected */

footer::before {
    content: '';
    display: block;
    height: 1.5rem;
    width: 100%;
    position: absolute;
    opacity: .1;
    left: 0;
    bottom: 100%;
    z-index: -2;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000', GradientType=0);
}

footer {
    z-index: 1010;
    text-align: center;
    background-color: var(--white-color, white);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Andrei 17.02.2018: Reduced the padding for a better view 
    Ca réduit le padding pour mieux afficher */
    padding: 1.2rem 0.5rem 0.9rem;
    max-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brian : CSS du bouton Play dans le menu du bas en .SVG */

#play2{
    z-index: 2;
    width: 10rem;
    margin: 0 auto;
    margin-top: 4px;
    bottom: 3px;
    height: 8rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 4rem;
    
}

#play span{
    font-size: 2rem;
}

#play span.defier{
    font-size: 1.8rem;
}

footer .notify-icon{
    font-size: 1.2rem !important;
    color: var(--brand-color);
    position: absolute;
    top: 5px;
}

footer ul {
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

footer li,
.sidenav li {
    -webkit-flex: 1;
    flex: 1;
}

footer li a {
    /*padding-top: 25px;*/
    margin-top: 13px;
    padding-top: 12px;
    width: 100%;
    position: relative;
}

@media screen and (min-width:580px)
{
    footer li a {
        width: 80%;
    }
}

/*Robin 01.06.2018 If we ever need to change the button "play" to be able to click to the upper part of the square, we should use "margin-top: 13px; padding-top: 12px;" for the other <a></a> of the footer menu*/

/*footer li {
    padding-top: 25px;
}

footer li:nth-child(3) {
    padding-top: 0px;
}*/

/*
Footer toggle menu
*/

div.menuNav {
    background: var(--white-color, white);
    height: 100%;
    width: 80%;
    /*display: none*/
    ;
}

.menuToggle {
    color: var(--brand-color, #D8232A);
}


/*CSS pages menu (Aurelie) - CSS for menu*/


/* Paragraphe créé par Aurelie, 24/08 : style pour balises h4 subTitle qui reprend meme style h3 subTitle sans la bordure (page CGU ='TOS') */

h4.subTitle {
    text-align: left;
    font-size: 1.1rem;
    text-transform: uppercase;
    padding-left: 1.5rem;
    margin-top: .5rem;
}


/* Paragraphe créé par Aurelie, 05/09 */

h4.subTitle+p {
    font-size: 1.1rem;
    /* text-transform: uppercase; Aurelie(24/08): pas utile de mettre le texte en majuscule */
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: 1.5rem;
}


/* Aurelie(05/09): Ajout d'une class pour le CSS de la date d'un article */

.datePublish {
    display: block;
    font-size: 1.1rem;
    margin-top: .5rem;
    font-weight: normal;
    font-style: italic;
}


/*Aurelie(05/09): CSS pour le ToggleButton (cf: w3school) - CSS for ToggleButton */

.toggle-label {
    font-size: 1.3rem;
    margin-top: 1.5rem;
    font-weight: 700;
    display: block;
    width: 25%;
}


/* Aurelie 14/09: style CSS generaliste sur les toggleButton avec des textes courts  */

.toggle-label.pull-left {
    margin-left: 4rem;
    text-align: center;
}

.toggle-label.pull-right {
    margin-right: 3.5rem;
    text-align: center;
}


/* Aurelie 14/09: style CSS particulier sur les toggleButton avec des textes longs  */

.toggle-label.sentence {
    width: 30%;
}

.toggle-label.pull-left.sentence {
    margin-left: 2rem;
    text-align: center;
}

.toggle-label.pull-right.sentence {
    margin-right: 1rem;
    text-align: center;
}


/* The switch - the box around the slider */

.switch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 60px;
    height: 34px;
    margin-left: 2rem;
    margin-right: 2rem;
    margin: .9rem auto;
}


/* Hide default HTML checkbox */

.switch input {
    display: none;
}


/* Aurelie 14/09: style CSS sur la marge uniquement pour le toggleButton du choix entre "Tout les matchs" et "Uniquement les matchs ouverts" */

.switch.filterMatch {
    margin: 1.5rem auto;
}


/* The slider */

.slider {
    position: absolute;
    cursor: pointer;
    top: .2rem;
    left: 0;
    right: 0;
    bottom: .2rem;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 25px;
    width: 26px;
    left: .4rem;
    bottom: .3rem;
    background-color: var(--white-color, white);
    -webkit-transition: .4s;
    transition: .4s;
}


/* Jordan 05/10
When we create a game from the defyButton, we delete #accessButton from input[name="access"] below, when we cleak on the slider
we create a new id to pass to input[name="access"] in app.js to allow it to slide with a good display, idem for #compCheckbox */

#compCheckbox:checked+.slider,
#newAccessButton:checked+.slider {
    background-color: var(--brand-color, #D8232A);
}

#compCheckbox:focus+.slider,
#newAccessButton:focus+.slider {
    box-shadow: 0 0 1px var(--brand-color, #D8232A);
}

#compCheckbox:checked+.slider:before,
#newAccessButton:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* Julien September 2017: #accessButton will be placed on the right in red by default */


/* Jordan 03/10 .temCompCheckbox is added when we create a game from the team sheet */


/* The toggle button passed by default to "Competition" instead of "Loisir"*/

/* ALTAN TODO : changer # en . */
/* Changer dans TOUS les autres fichiers aussi */
/* Added class toggleButton, because it's better for it to be a class than an ID */
#accessButton+.slider,
.teamCompCheckbox+.slider,
.toggleButton+.slider {
    background-color: var(--brand-color, #D8232A);
}

#accessButton:checked+.slider,
.teamCompCheckbox:checked+.slider,
.toggleButton:checked+.slider {
    background-color: #ccc;
}

#accessButton:focus+.slider,
.teamCompCheckbox:focus+.slider,
.toggleButton:focus+.slider {
    box-shadow: 0 0 1px var(--brand-color, #D8232A);
}

#accessButton+.slider:before,
.teamCompCheckbox+.slider:before,
.toggleButton+.slider::before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

#accessButton:checked+.slider:before,
.teamCompCheckbox:checked+.slider:before,
.toggleButton:checked+.slider:before {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/*Aurelie le 31/08: CSS Page Inscription - CSS Signup Page*/


/* 
.formPage aside {
    margin: 3rem 0 1rem 0;
} */

#coverPicture label {
    margin-left: 2rem;
    margin-top: 47%;
}

#coverPicture i {
    margin-left: 45%;
    margin-top: 20%;
}

.styleCoverPicture {
    border: .1rem solid var(--font-color, #011C26);
}


/*Aurelie le 04/09: CSS Page teamEdit pour aligner le 2eme icone */

.styleSelect {
    margin-left: .5rem;
}


/*Aurelie le 05/09: ajout d'une class abstract pour les resumés d'article  */

.subTitle.abstract {
    text-transform: none;
}


/**************** Creation CSS FILTRES - Aurelie 13/09 ***********/


/* Aurélie 07/09: Solution intermédiaire pour les checkbox dans les filtres
A changer eventuellement en Flexbox */

input.checkboxMap,
input.radioMap {
    display: inline-block;
    width: 20px;
    margin-top: .5rem
}


/*Aurelie 11/09: CSS pour l'espacement entre les 2 valeurs d'input Femme/Homme (Filtres)  */

input.checkboxMap[value=female] {
    margin-right: 3rem;
}


/*Aurelie 11/09: CSS pour l'espacement entre les champs de type number  */

/* Altan 20.04.2018: added the scope "inputTeamScore" so it scops only the input on the score proposal page and not the other inputs in the other pages (i.e. "groudnNew.php") */
.inputTeamScore input[type=number] {
    margin: 1rem;
}


/* Aurelie 13/09: marge a gauche pour centrer le champ du genre */

#playerGender {
    margin-left: 6rem;
}


/*Aurelie 13/09: CSS pour aligner les checkbox et le nom du checkbox pour le champ "Niveau des joueurs"  */

label.labelMap {
    display: inline;
}

/* Brian : Nouveau logo .svg en icon #ballonMatch dans Player,Grounds et Teams View */


#ballonMatch:before {

    font-size: 2.5rem;
    text-align: center;


}




/* Aurelie 13/09: Ajout de la class pull-left pour l'aligement a gauche pour:
    - le nom 'Loisir" du toggleButton,
    - les boutons radios,
    - le titre du champ "Niveau des joueurs",
    - le nom Privé dans Match competition
*/

.pull-left {
    float: left !important;
}


/* Aurelie 13/09: Ajout de la class pull-right pour l'aligement a droite pour:
    - le nom 'Competition" du toggleButton,
    - les checkbox de "Niveau des joueurs",
    - le nom Ouvert dans Match competition
*/

.pull-right {
    float: right !important;
}


/* Aurélie 13 09 : Idée abandonnée pour le style des textes longs à gauche et à droite des ToggleButtons
.sentenceLeft{
    width: 30%;
    margin-left: 2rem;
}

.sentenceRight{
    width: 30%;
    margin-right: 1rem;
} */


/*Aurelie 13/09: Marge en haut entre le toggleBUtton et les boutons radios  */

#exhibitionFilters,
#competitionFilters {
    margin-top: 1rem;
}

/*Aurelie 13/09: CSS pour arreter le float des class pull-left et pull-right et passer a la ligne  */

.clear {
    clear: both;
}


/* Aurélie 20 10: */

[name="subject"] {
    margin-top: .5rem;
    margin-bottom: 2rem;
}

div.teammatesRequests {
    display: flex;
}


/* Jordan 22.09.2017: CSS for fa-times, color: our red */

i.fa.fa-times {
    color: var(--fa-cross-color, #D8232A);
}

/* Aurore F 17.11.2020: red color for the icon to change a favorite ground into a reference ground */
i.fas.fa-star-half-alt {
    color: var(--brand-color, #D8232A);
    font-size: 2rem;
}


/* Quentin 29.09.2017: ERROR-SIGN-UP DANS LA PAGE SIGN-UP & LOGIN */
.error {
    margin-top: 1rem;
    color: var(--brand-color, #D8232A);
    font-weight: bold;
}


/* 29/09 Quentin ERROR-SIGN-UP DANS LA PAGE SIGN-UP & LOGIN PARTIE 2*/

.error_2 {
    margin-top: 1rem;
    color: var(--brand-color, #D8232A);
    font-weight: bold;
}


/* 27/09 Quentin CSS pour TOS (= 'CGU' in French') modal 'signup' */


/* Cyril F 25 10: I delete this media query, because it's non useful
@media screen and (max-width:850px)
{ */  
/* James 05.03.2020: I create a class for the TOS in order to put a scrollbar inside de box */
.tosScrollBox {
    background-color: rgba(225, 225, 225, 0.692); 
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    margin: 0 0 5px 0;
    padding: 0px 5px 4px 4px;
}
.newTosScrollBox{
    background-color: rgba(225, 225, 225, 0.692); 
    width: 100%;
    height: 23rem;
    overflow-y: scroll;
    margin: 0 0 -20px 0;
    padding: 5px 5px 20px 4px;
}
.playerTosDialog{
    width: 100%;
    /* height: 75%; */
    position: relative;
    margin: -15px 0 -3rem 0;
    padding: 5px 5px 0px 5px;
}
.modalDialog, .discoverDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 250ms ease-in;
    -moz-transition: opacity 250ms ease-in;
    transition: opacity 250ms ease-in;
    pointer-events: none;
}
.modalDialog:target, .discoverDialog:target {
    opacity: 1;
    pointer-events: auto;
}
/* James 05.03.2020: I add a height to the div to allow a scroll mechanic in the div */
.modalDialog>div {
    width: 90%;
    height: 75%;
    position: relative;
    margin: 20% auto 30px auto;
    padding: 5px 5px 0px 5px;
    border-radius: 10px;
    background: var(--white-color, white);
    background: -o-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
    background: -moz-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
    background: -webkit-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
}


/* Diego V 22.08.2019: Creation of class below to implement new popup window when clicking on some icons and buttons without being logged-in */
.discoverDialog>div {
    width: 95%;
    max-width: 400px;
    position: relative;
    margin: 30% auto 25% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: var(--white-color, white);
    background: -o-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
    background: -moz-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
    background: -webkit-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
}


.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 5px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

/* } */

@media screen and (min-width:850px) {
    .modalDialog, .discoverDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 99999;
        opacity: 0;
        -webkit-transition: opacity 250ms ease-in;
        -moz-transition: opacity 250ms ease-in;
        transition: opacity 250ms ease-in;
        pointer-events: none;
        overflow: scroll;
    }
    .modalDialog:target , .discoverDialog:target{
        opacity: 1;
        pointer-events: auto;
    }
    .modalDialog>div, .discoverDialog>div {
        width: 80%;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: var(--white-color, white);
        background: -o-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
        background: -moz-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
        background: -webkit-linear-gradient(bottom, rgb(245, 245, 245) 25%, rgb(232, 232, 232) 63%);
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: 10px;
        text-align: center;
        top: 10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }
}


/* Fin CSS pour modal */

.close:hover {
    background: #57a2d1;
}


/* Desktop */

@media screen and (min-width:850px) {
    .siteMaxWidth {
        max-width: 75%;
    }
    footer ul {
        display: none;
    }
    header nav {
        position: absolute;
        right: 0;
        /* top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%); */
    }
    header nav li {
        display: inline-block;
        margin-left: 1.5rem;
    }
    #map {
        /* Standart */ /* 55px = height of header */
        height: calc(100vh - 55px);
        /* Firefox */
        height: -moz-calc(100vh - 55px);
        /* WebKit */
        height: -webkit-calc(100vh - 55px);
        /* Opera */
        height: -o-calc(100vh - 55px);
    }
}




#wrapper {
    background-color: black;
    width: 100%;
    overflow: hidden;
    position: absolute;
    position: absolute;
    height: 100%;
}

#carousel div {
    display: block;
    float: left;
}
#carousel-inner{
    width:410px;
    height:660px;
    margin-top:30px;
     opacity: 0.7;

}


#prev,
#next {
    background-color: rgba(255, 255, 255, 0.7);
    display: block;
    height: 450px;
    width: 50%;
    top: 0;
    position: absolute;
}

#prev:hover,
#next:hover {
    background-color: var(--white-color, white);
    background-color: rgba(255, 255, 255, 0.8);
}

#prev {
    left: -1000px;
}

#next {
    right: -1000px;
}

#pager a {
    border: 2px solid var(--white-color, white);
    border-radius: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
}

#pager a:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

#pager a span {
    display: none;
}

#pager a.selected {
    background-color: var(--white-color, white);
}


/* ////////////////////////////////////////////////////////////////////// HOMEPAGE //////////////////////////////////////////////////////////////////////////////*/
/* HOME HEADER */
.header_home {
    height: 5.6rem;
    padding: 0%;
    background-color: var(--brand-color, #D8232A);
    position:fixed;
}

.logo_home {
    display: block;
    padding: 0.5px;
    margin-left: auto;
    margin-right: auto;
}

.img_home {
    height: 4rem;
}

.homeBurgerMenuPlusIcon{
    float:right;
    margin:8px 10px 5px 0px;
}
.header_title {
    color: var(--white-color, white);
    font-size: 30px;
    height: 36.42px;
}

/* Aurore F and Cyril F 05.11.2020: class which is NO MORE used */
/* h1.title_home {
    position: relative;
    font-size: 3rem;
    text-transform: initial;
    font-weight: initial;
    display: inline;
    margin-left: 5px;
    top: -8px;
} */

#pager {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* END OF THE HEADER */
/* Class for the main div of the HOME view where all the elements in the body are*/
.homeBody {
    position: relative;
    top: 0;
    right: 20%;
    left: 0;
    bottom: 0;
    margin: 6rem auto 0 auto;
    padding: 5px auto 0 auto;
    /* we will change the width with the media query */
    width: 95%;
    overflow: hidden;
}

/* Aurore F and Cyril F 05.11.2020: style of all the h1 'titles' tags of the 'home.php' view */
div.homeBody h1 {
    text-align: center;
    font-size:2rem;
    margin-top: 10px;
}

div.homeBody p {
    text-align: center;
    font-size:  1.3rem;
    margin: 10px 10px;
}

/* This is for home page's first content ('rubrique' in French) */
.leftHomeFirstContentConcept{
    width: 100%;
    height: 23rem;
    margin: 10px 0 15px 0;
}

.homeTextConceptVideo {
    position: relative;
    top: 0;
    right: 0 ;
    bottom: 0;
    left:0 ;
    width: 43%;
    height: 100%;
    padding-top:10px;
    background-color: rgba(254,254,254, 0.9)
}
/* .homeTextConceptVideo>p{
    color: black;
    margin: 3px 3px;
} */

/* .homeTextConceptVideo>h1{
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
} */

.homeConceptVideo{
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 43%;
    width: 57%;
    height: 100%;
    background-color: black;
}

.homeConceptVideo>video{
    width: 100%;
    height: 100%;
}

/* This is for home page's second content */
.rightHomeSecondContentPostPhotos{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.homePostPhotos{
    width: 57%;
    height: 100%;
    /* color behind the image */
    background-color: black;
}
.homePostPhotos>div{
    max-width: 100%;
    max-height: 100%;
}

.homeTextPostPhotos{
    background-color: rgba(254,254,254, 0.9);
    width: 43%;
    height: 100%;
    position: relative;
    top: -100%;
    left : 57%;
    right: 0;
    bottom: 0;
    padding-top: 10px;
}

 /* .homeTextPostPhotos>p{
    text-align: center;
    margin: 10px 10px;
} */

/* .homeTextPostPhotos>h1{
    text-align: center;
    font-size: 20px;
} */

/* This is for home page's third content */
.leftHomeThirdContentPostVideos{
    margin: 10px 0 10px 0;
    height: 23rem;
    width:100%;
    margin-bottom: 15px;
}
.homeTextPostVideo{
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 10px;
}

/* .homeTextPostVideos>h1{
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
} */

.homeTextPostVideos>p {
    text-align: center;
    font-size: 1.3rem;
}

.homePostVideo{
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 43% ;
    width: 57%;
    height: 100%;
    background-color: black;
}

.homePostVideo>video{
    width: 100%;
    height: 100%;
}

/* This is for home page's Fourth content */
.rightHomeFourthContentGames{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.homeNextGames{
    width: 57%;
    height: 100%;
    background-color: chocolate;
    padding-top: 15px;
}

.homeNextGames>div{
    margin-left: 5px;
    margin-bottom: 15px;
    word-wrap: break-word;
    text-align: left;
}

.homeTextNextGames{
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 57% ;
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 15px;
}

/* .homeTextNextGames>h1{
    text-align: center;
    font-size: 20px;
} */
/* This is for home page's Fifth content when there is at least one match in coming*/
.leftHomeFifthContentGroundsVersionA{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.leftHomeTextGrounds{
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 15px;
}

/* .leftHomeTextGrounds>h1 {
    text-align: center;
    font-size: 20px;
} */

.leftHomeNewGrounds{
    width: 57%;
    height: 100%;
    top: -100%;
    position: relative;
    right: 0 ;
    bottom: 0;
    left: 43% ;
    /* color behind the image */
    background-color: black;
}
.leftHomeNewGrounds>img{
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    background-color: brown;
}

/* This is for home page's Sixth content when there is at least one match in coming*/
.rightHomeSixthContentArticlesVersionA{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.rightHomeTextArticles{
    position: relative;
    /* top: -100%; */
    right: 0;
    bottom: 230px;
    left: 57%;
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 15px;
}

/* .rightHomeTextArticles>h1 {
    text-align: center;
    font-size: 20px;
} */

/* .rightHomeTextArticles>p{
    font-size: 2rem;
} */

.rightHomeArticles{
    width: 57%;
    height: 100%;
    background-color: mediumvioletred;
    padding: 15px 5px 5px 5px;
}

.rightHomeArticles>div{
    margin-left: 5px;
    margin-bottom: 15px;
    word-wrap: break-word;
    text-align: left;
}
.rightHomeArticlesButton{
    position: relative;
    top: -28.3rem;
}
/* This is for home page's Seventh content when there is at least one future game */
.leftHomeSeventhContent{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.leftHomeTextEditions{
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 10px;
}

/* .leftHomeTextEditions>h1 {
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
} */

.leftHomeEditions{
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 43% ;
    width: 57%;
    height: 100%;
    background-color: darkblue;
    padding-top: 15px;
}

.leftHomeEditions>div{
    margin-left: 5px;
    margin-bottom: 15px;
    word-wrap: break-word;
    text-align: left;
}

/* This is for home page's fifth content when there is no future game */
.rightHomeFourthContentNewGrounds{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.homeNewGrounds{
    width: 57%;
    height: 100%;
    background-color: midnightblue;
    
}
.homeNewGrounds>img{
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    background-color: brown;
}

.homeTextNewGrounds{
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 57% ;
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 15px;
}

/* .homeTextNewGrounds>h1 {
    text-align: center;
    font-size: 2rem;
} */

/* This is for home page's sixth content when there is no future game */
.leftHomeFifthContentArticles{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.homeTextArticles{
    width: 43%;
    height: 100%;
    background-color: rgba(254,254,254, 0.9);
    padding-top: 10px;
}

/* .homeTextArticles>h1{
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
} */

/* .homeTextArticles>p{
    text-align: center;
    font-size: 2rem;
} */

.homeArticles{
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 43% ;
    width: 57%;
    height: 100%;
    background-color: antiquewhite;
    padding: 15px 5px 5px 5px;
}

.homeArticles>div{
    margin-left: 5px;
    margin-bottom: 15px;
    word-wrap: break-word;
    text-align: left;
}

/* This is for home page's seventh content when there is no future game */
.rightHomeSixthContentEditions{
    width: 100%;
    height: 23rem;
    margin-bottom: 15px;
}

.rightHomeEditions{
    width: 57%;
    height: 100%;
    background-color: darkcyan;
    padding-top: 10px;
}
.rightHomeEditions>div{
    margin-left: 5px;
    margin-bottom: 15px;
    word-wrap: break-word;
    text-align: left;
}

.rightHomeTextEditions {
    position: relative;
    top: -100%;
    right: 0 ;
    bottom: 0;
    left: 57% ;
    width: 43%;
    height: 100%;
    padding-top: 15px;
    background-color: rgba(254,254,254, 0.9);
}

/* .rightHomeTextEditions>h1 {
    text-align: center;
    font-size: 2rem;
} */

.homeLeftButton {
    position: relative;
    top: -118.5%;
    width: 43%;
}

.homeRightButton {
    position: relative;
    top: -118.5%;
    left: 57%;
    width: 43%;
}







/* James Z 16.04.2020: This is for the caroussels in the home page */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides1, .mySlides2 {
    display: none;
}

.mySlides1>img, .mySlides2>img{
    height: 23rem;
}

/* Next & previous buttons */
.prevPic, .nextPic{
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 3rem;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
}
.prevPic {
    left: 0%;
    padding: 16px 16px 16px 0;
    border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.nextPic {
    padding: 16px;
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevPic:hover, .nextPic:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption text */
/* .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
} */

/* Number text (1/3 etc) */
/* .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
} */

/* The dots/bullets/indicators */
.dots{
    text-align: center;
    padding: 8px 12px;
    position: relative;
    bottom: 48px;
    width: 100%;
}
.homeDot1, .homeDot2 {
    display: inline-block;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    transition: background-color 0.6s ease;
}

.dotActive, .dot:hover {
    background-color: #717171;
}
 /* Fade is not used anymore in the caroussels, we can still add them back by adding this class next to .mySlides1 and .mySlides2 (ex: class="mySlides1 fade") */
/* Fading animation
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
} */
/* James Z 24.04.2020: this class s for the red buttons in the Home's burger menu plus */
.homeRedSocialLinks{
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
.layout_home {
    position: absolute;
    bottom:9%;
    
    z-index: 3;
    /* à 50%/50% du parent référent */
    width: 100%;
    /*transform: translate(-50%, -50%);*/
}
/* James Z 14.04.2020: This style is same as the one just below. 'button-home' is also used in other pages so I just copy pasted the style and made something I could use for the 'Home' page */

.homePageButton {
    /* Aurore F 04.11.2020: if we want to avoid the line break, we can activate the line below */
    /* white-space: nowrap; */
    font-weight: 700;
    font-size: 1.3rem;
    width: 10em;
    margin: 0 auto;
    /* Cyril F 04.11.2020: to fix the uppercase / lowercase style of all (6 or 7; for a total of 10) the (red and rectangular) buttons */
    text-transform: uppercase;
    border: .4rem solid var(--brand-color, #D8232A);
    border-radius: 0;
    cursor: pointer;
    padding: 0.5rem 0;
    /* margin-top: 1rem; */
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: center;
    background-color: var(--brand-color, #D8232A);
    color: var(--white-color, white);
    display: block;
}

.button-home {
    font-weight: 700;
    font-size: 1.3rem;
    width: 19em;
    margin: 0 auto;
    text-transform: uppercase;
    border: .4rem solid var(--brand-color, #D8232A);
    border-radius: 0;
    cursor: pointer;
    padding: .5rem 0;
    margin-top: 1rem;
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: center;
    background-color: var(--brand-color, #D8232A);
    color: var(--white-color, white);
}

.button-home-grey {
    color: var(--white-color, #666);
    border-color: var(--dismiss-color, #666);
    background-color: var(--dismiss-color, #666);
}

/* FOR LARGE SCREENS AND DESKTOPS */

@media screen and (min-width: 550px) {
    .homeBody{
        width: 57rem;
    }
}

@media screen and (min-width: 1300px){
    .homeRedSocialLinks{
        width: 30rem;
    }
}
/* ////////////////////////////////////////////////////////////// END OF THE HOMEPAGE ////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 850px) {
    /* Cyril F and Aurélie 28 09: to keep the image size of the playground image in "Ground profile, Ground contentFour" */
    .photobasket {
        max-width: 4%;
    }
    #coverPicture {
        left: 8rem;
    }
}


/* Quentin 04/10 : TOGGLE MENU */


/* The side navigation menu */

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 2;
    /* Stay on top */
    top: 0;
    right: 0;
    background-color: var(--white-color, white);
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    padding-bottom: 20px;
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
    margin-top: 55px;
}


/* The navigation menu links */

/* This is the "Burger Menu Plus" */
.sidenav a {
    padding: 10px;
    text-decoration: none;
    font-size: 2rem;
    color: var(--title-color, #1c333d);
    display: block;
    transition: 0.3s;
    text-align: left;
    white-space: nowrap;
}


/* When you mouse over the close button, it change's the color */

.sidenav .closebtn:hover {
    color: var(--brand-color, #D8232A);
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


/* Robin 25.05.2018: Became useless due to recent changes */
/* Icônes for toogle menu header */
/* .marginIcone {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;   /*Robin 24.05.2018 Weird, when you change the margin top and/or bottom, the menu css beahvior change* /
    margin-bottom: 30px;
} */

.sidenav a i span {
    margin: 0.8rem 1rem 1rem 2rem;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
}

.changeLanguage{
    position: relative;
    top: 3rem;
}

.menuSelectLanguage {
    width: 60%;
    margin-left: 6%;
}

.menuSelectLanguage>option{
    width: 66%;
    overflow-x: hidden;
}

.formLanguage>button {
    position: relative;
    top: -4.5rem;
    left:   35%;
    width: 30%;
}
    
.toggleLink,
.toggleLink .fa-question-circle-o {
    color: var(--title-color, #1c333d);
}

a.toggleLink i.fa{
    line-height: 1;
}


/* Icônes for toogle menu Footer */

.toggleIcon {
    float: left;
    margin: 0rem 1rem 1rem 2rem;
    width: 3rem;
}


/* Survol en gris du background en Desktop*/

.backgroundDesktopHeader {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    opacity: 0;
    display: none;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    overflow-x: hidden;
    margin-top: 55px;
}


/* Survol en gris du background en Smartphone*/

.backgroundFooterToggle {
    height: calc(100% - 100px);
    width: 100%;
    position: fixed;
    display: none;
    opacity: 0;
    z-index: 2;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    overflow-x: hidden;
    padding-top: 60px;
    margin-top: 55px;
}

.flash_message {
    font-weight: 700;
    font-size: 1.5rem;
    width: 100%;
    max-width: 35rem;
    background-color: #1FDE10;
    color: var(--white-color, white);
    border: .4rem solid #1FDE10;
    text-align: center;
    margin: 10rem auto 0 auto;
    padding: 1rem 2rem 1rem 2rem;
}

@media screen and (min-width: 850px) {
    /* Quentin 17 10: flash message management */
    .flash_message {
        font-weight: 700;
        font-size: 1.5rem;
        width: 100%;
        max-width: 85rem;
        background-color: #1FDE10;
        color: var(--white-color, white);
        border: .4rem solid #1FDE10;
        text-align: center;
        margin: 10rem auto 0 auto;
        padding: 1rem 2rem 1rem 2rem;
    }
}


/* Jordan 16/10 flash message */

.danger,
.warning,
.success,
.info {
    color: var(--white-color, white);
    margin: 1rem;
    padding: 1rem;
}

.danger {
    background: var(--flash-danger-color, #D8232A);
}

.success {
    background: var( --flash-success-color, rgb(127, 190, 127));
}

.warning {
    background: var(--flash-warning-color, orange);
}

.info {
    background: var(--flash-info-color, #DCEDF1);
    color: var(--font-color, #011C26)
}

.gold{
    color: var(--first-position, goldenrod);
    font-size: 2.5rem;
    font-weight: bold;
}

.silver{
    color: var(--second-position, goldenrod);
    font-size: 2rem;
    font-weight: bold;
}

.bronze{
    color : var(--third-position, #cd7f32);
    font-size: 1.5rem;
    font-weight: bold;
}


/* Page Notation */


/* Aurélie and Cyril F 09.11.2017: we replace the Quentin CSS style puting the 3 gauges on a unique line, by Julien's "formField" style */


/* .notation{
    width: max-content; 
    margin-left: auto; 
    margin-right: auto;
    text-align:center;
} */


/* .notation div{
    float:left;
    margin:2rem;
} */

/* Diego V 20.09.2019: code used to insert social media icons inside the footer of 'footerMail.php' */
.mailIcons {
    display:flex;
    flex-direction: column;
    align-items:center;
}


/* Diego V 18.09.2019: CSS code for white icons on black background used in the 'home' page */
.homeSocialLinks{
    width:200px;
    margin: 0 auto 5px auto;
    position:relative;
    display:flex;
    justify-content: space-around;
}

/* Diego V 16.09.2019: size of each icon to social networks */
.homeSocialLinks img{
    height: 38px;
}


/* Diego V 16.09.2019: CSS code especially written white icons on red background for the pages: 'signup', 'login', 'TOS', 'FAQ', 'Contact us', 'legacy' */
.socialLinks {
    display:flex;
    justify-content: space-around;
}

.socialLinks img {
    height: 20px;
}

.footerNoMenu{
    display:flex;
	flex-direction: column;
    width:100%;
    margin-right: 15px;
    max-height: 68px;
}

.logOutFooter{
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

/* Diego V 17.09.2019: the 'width' of the element '.links' should be extended to '50%' or 60%', for example, in case five or six present icons instead of the currently existing four icons */
.links {
    width:130px;
    margin-right:5px;
}


/* Quentin 24/10 : Gauge Notation*/

.containerGauge {
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
}

.gauge {
    float: left;
}

.gaugeCenter {
    float: left;
}

.center {
    text-align: center;
    font-size: 1.3rem;
}



@media screen and (min-width:350px) {
    .gaugeCenter {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .footerNoMenu {
        display: flex !important;
    }
}

@media screen and (min-width:410px) {
    .gaugeCenter {
        margin-left: 5rem;
        margin-right: 5rem;
    }
    .sidenav {
        max-width: 70% !important;
    }

    
    .footerNoMenu {
        display: flex !important;
    }

    /* Diego V 17.09.2019: the 'width' of the element '.links' should be extended to '50%' for example, in case five or six present icons instead of the currently existing four icons */    
}

@media screen and (min-width:520px) {
    .gaugeCenter {
        margin-left: 10rem;
        margin-right: 10rem;
    }
    .sidenav {
        max-width: 60% !important;
    }
    .footerNoMenu {
        display: flex !important;
    }

}

@media screen and (min-width:710px) {
    .sidenav {
        max-width: 40% !important;
    }
    .footerNoMenu {
        display: flex !important;
        flex-direction:row;
        justify-content: space-around;
    }

    .footerLink{
        font-size: 1.1rem;
        position:relative;
        bottom:3px;
    }


    .logOutFooter a {
        margin-right: 4px;
        margin-left: 4px;
        margin-bottom: 10px;;
        margin-top:5px;
        }

    /* Diego V 17.09.2019: the 'width' of the element '.links' should be extended to '40%' for example, in case five or six present icons instead of the currently existing four icons */
}

@media screen and (min-width:850px) {
    .gaugeCenter {
        margin-left: 12rem;
        margin-right: 12rem;
    }
    footer {
        display: none;
    }
    .footerNoMenu {
        display: flex !important;
        display:flex;
        justify-content: space-around;
    }

    .sidenav {
        height: 100%;
    }
    .sidenav a {
        margin-left: 20px;
    }
    .sidenav a span {
        font-size: 2rem;
    }
}

@media (hover: none) {
    #menuCard li a:hover,
    .sidenav li a:hover,
    footer li a:hover {
        color: inherit;
    }
    #menuCard li a.active,
    .sidenav li a.active,
    footer li a.active {
        color: var(--red-color, #D8232A);
    }
}

/* Andrei 17.03.2018  We created the id's checkbox, label-checkbox and ckeckbox-label
in order to uniformize the style on the ground creation page*/
.checkbox{
    width: 50%;
    display:block;
}

/* Altan 16.04.2018: changed the name and the code of the 2 classes below
 * label-checkbox => checkbox-label, it's syntactically more correct
 * Fixed the style so it looks better
*/
.checkbox-label{
    display: inline;
}

.checkbox-label input[type="checkbox"]{
    margin-top: 1rem; /* Define the spacing between each row */
    margin-left: 22%; /* Used to align the checkbox and the other inputs */
    display: inline;
    width: 5rem; /* The space between the checkbox and it's label */
}

/* Altan 25.04.2018: added the class '.multipleGroundDetail' for the inputs on the singleGroundDetails.php the that will display multiple results. Now in multiple results display, it place the first occurence aligned with the label */
.multipleGroundDetail{
    width: 100%
}
.multipleGroundDetail .titleGroundDetails{
    height: 0;
}
.multipleGroundDetail .infoGroundDetails{
    padding-left: 17rem;
}

/*CAROUSEL */
/* Ahcene 25.04.2018*/
/* Carousel in English = Carrousel in French; Caroussel and Carroussel are unapropriate */
/* Ahcene 25.04.2018: The elements below are coming from the original owl carousel website (the original one) and have been modified by Ahcene, to correspond to our requirements book (= our needs) */
.owl-dot{
    width:35px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
}

/* Style for the 4 dots (which are indicating the position of the current picture in the set of the 4 pictures) */
#customDots{
    position: absolute;
    width: 100%;
    z-index: 4;
    bottom:36%;
    text-align: center;
}
  
.owl-carousel {
    display: none;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: absolute;
    z-index: 1;    
}
/*div that contains owl-stage*/
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    
    /*padding-left: 1;*/
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px);
}

/*style applied to the global div that contains all the "items"*/
.owl-carousel .owl-stage{
    height: 100%;
    width: 10em;
}
/*style applied to the different div (the "items") that contain the image and its associated text h1*/
.owl-carousel .owl-item{
    height: 100%;
    width: 100%;
}

.item{
    height: 100vh;
}

.owl-carousel .owl-item img{
    height: 100%;
    width: auto;
    max-width: 100vw;
    max-height: 100vh;
    margin:0 auto;
}

.owl-carousel .owl-item h1{
    color: rgba(255,255,255,0.9);
    position: absolute;
    z-index: 5;
    width: 100%;
    top:47%;
    padding-right:2em;
    padding-left:2em;
    text-transform: none;
    text-align: center;
    box-shadow: 0px 0px 35px 20px rgba(0,0,0,0.9);
    background-color: rgba(0, 0, 0, 0.9);    
}

@media (orientation: landscape) {
    .owl-carousel .owl-item img{
        height: auto;
        width: auto;
        max-width: 100vw;
        max-height: 100vh;
        margin:0 auto;
    }
}

/*Media query for small device*/
@media (max-height: 319px) and (orientation: landscape) {
    #customDots{
        bottom:42%;
    }
    .owl-carousel .owl-item h1{
        top:35%;
        box-shadow: 0px 0px 35px 20px rgba(0,0,0,0.8);
        background-color: rgba(0, 0, 0, 0.75); 
    }
}

.owl-dot:focus{
    outline: none!important;
}

#search_bar input, #search_bar form{
    display: inline-block;
}

.search_input {
    width: 59%;
    border: 1px solid black;
}

.search_button {
    /* Aurore F 04.11.2020: if we want to disable the 'uppercase', we can comment the ONLY line of code: 'text-transform' */
    text-transform: uppercase;
    text-align:center;
    cursor: pointer;
    color: var(--white-color, white);
    background-color:var(--brand-color, #D8232A);
    width: 38%;
    margin-left: 2%;
    margin-top: 8px;
    border: solid var(--brand-color, #D8232A) 1px;
}

/* Cyril F 03.11.2020: search view style, for a width under 500px */
@media all and (max-width: 500px) {
    .search_input {
        width: 58%;
        border: 1px solid black;
    }
    .search_button {
        width: 38%;
        margin-top: 5px;
    }
    footer li span {
        font-size: 0.9rem;
    }
}

/* Cyril F 03.11.2020: search view style, for a width under 400px */
@media all and (max-width: 400px) {
    #search_bar form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .search_input {
        width: 95%;
        border: 1px solid black;
    }

    .search_button {
        width: 40%;
        margin-top: 5px;
    }
    footer li span {
        font-size: 0.8rem;
    }
}
@media all and (max-width: 320px){
    footer li span {
        font-size: 0.7rem;
    }
    footer li .fa{
        font-size: 2.2rem;
    }
}

.upload-btn-wrapper {
  
    position: relative;
    overflow: hidden;
    display: inline-block;
}
  
.btn {
    margin:0px;  
    border: none;
    color: #011c26;
    background-color: #fefefe;
    padding-left : 1rem;
    font-weight: bold;
}
  
.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    padding-top: 18px;
    cursor : pointer;
}
#msgPost{
    margin:0;
    min-height: 0px;
    height: 4rem;
}
.shadowBox{
    border-radius: 6px;
    box-shadow:  4px 4px 8px #b9b9b9, 
                 -4px -4px 8px #ffffff;
}
.singleEdition{
    padding: 6px;   
    background-color: var(--single-article,#f3f3f3);
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom:1.5rem;
}
#ArticleNew .inputBorder{
    border:1px solid black;
}


.singleArticle {
    /* display: grid; */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 6fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    padding: 6px;
    background-color: var(--single-article,#f3f3f3);
    padding-bottom: 3rem;
    margin-bottom:-1px
}
.singleArticle > div {
    border: 1px;
    text-align: justify;
}
.singleArticle .item1 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 1;
}
.singleArticle .item1 h3{
    text-align: left;
    text-transform: uppercase;
    font-size: 1.7rem;
    color: var(--link-color, #004974);
}

.singleArticle .item3 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 6;
    text-overflow: ellipsis;
}
.singleArticle .item4 {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 6;
    text-align: center;
}
.singleArticle .item3bis {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 6;
    max-height: 1em;
}



.singleArticle .item3 p{
    max-height: 15rem;
    overflow: auto;
    text-overflow: ellipsis;
}
.singleArticle .item3bis p{
    max-height: 10.5rem;
    overflow: auto;
    text-overflow: ellipsis;
}


.article{
    margin:0 auto;
    font-size: 14px;
    padding-left: 10%;
    padding-right: 10%;
}
.article p{
    text-align: justify;
}

.article #articleSummary p{
    font-weight: bold;
}
.article #articleSummary a{
    text-decoration: underline;
}

.article #articleTitle h3{
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
    word-wrap: break-word;
    color: var(--link-color, #004974);
    text-transform: uppercase;
   
}
.article #articleContent a{
    text-decoration: underline;
    
   
}

.article > div{
    margin-top:1rem;
    margin-bottom:1rem;
}

.article #articlePhoto img{
    width:100%;
}

#ArticleNew label{
    color: var(--font-color, #264553);
    font-weight: bold;
}

.singleArticle:hover {
    cursor:pointer;

}
.singleArticle:hover h3{
    color:#D8232A;
    transition:ease;  
}

@media (min-width: 720px)  {
    .item1 h1{
        font-size: 25px;   
    }

    .item3 p{
        font-size: 17px; 
    } 
    .item3bis p{
        font-size: 17px; 
    }
}

#createArticle{
    font-size: 2rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
    color: var(--title-color, #264553);
}

.buttonUp{
    position: fixed;
    top: 88%;
    left: 88%;
    font-size: 46px;
    opacity: 1;
    color :var(--subAction-color, #5984AF);
}



@media (max-width: 450px)  {
    .article{
        padding-left: 5%;
        padding-right: 5%;
    } 

    .buttonUp{
        top: 81%;
        left: 81%; 
    }
}

.buttonUp:hover{
    cursor:pointer;
}
.item3 h6{
    font-size: .9rem;
    font-style: italic;
    color: var(--info-selectize);
    line-height: 1rem;
}
.item3bis h6{
    font-size: .9rem;
    font-style: italic;
    color: var(--info-selectize);
    line-height: 1rem;
}
.item3 #articleSummary{
    margin-bottom: 0.5rem;
}
.item3bis #articleSummary{
    margin-bottom: 0.5rem;
}
#articleInfo #Date{
    color: var(--info-selectize);
}

#ArticleNew > span{
    font-size: 1.2rem;
}

#posts{
    max-width:68rem;
    margin:0 auto;
    
}
video {
    max-width: 48rem;
    width : 100%;
    height: auto;
}
.media img, .infoDetailsPicture img{
    max-height:48rem;
    margin-bottom:-2.7px;
}
.media {
    max-height:48rem;
    text-align:center;
    background-color:rgb(243, 243, 243);
    margin-top:10px;
}
#mediaPreview {
    display: none;
    text-align: center; 
    background-color:white; 
    height: 100%;
    width: 100%;  
}
#mediaPreview video {
    display: none;
    text-align: center; 
    max-height:48rem;
    margin-bottom:-2.7px;
}
.singlePost img, .singlePost video{
    text-align: center; 
}
.singlePost{
    
    background-color:var(--single-article,#f3f3f3);
    padding:10px;
    margin-bottom:1.5rem;
    border-radius: 4px;
    box-shadow:  4px 4px 8px #b9b9b9, 
                 -4px -4px 8px #ffffff;
}
.singlePost .message{
    margin-top:5px;
}

.buttonModification{
    display: inline-block;
    width: 10%;
    height: 2rem;
    padding-top: 0;
}

#boNewGrounds, #boPosts{
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

.validateButton{
    border: .4rem solid rgb(0, 153, 0);
    background-color: rgb(0, 153, 0);
}

.bigButton{
    display: inline-block;
    width: 20%;
    height: 4rem;
    padding-top: 0;
}

.modifProposition{
   margin-top: -4rem;
   margin-bottom: -2rem;
}

.reportLink {
    float: right;
    position: relative;
    bottom: 3px;
}

.reportLink:hover, .boLink:hover{
    color: #D8232A;
}

.fbButton{
    background-color: transparent;
    border: none;
}

.fbShare{
    border: 2px solid rgb(66, 103, 178);
    border-radius: 3px;
    background-color: rgb(66, 103, 178);
    color: white;
}

.fbShare:hover{
    cursor: pointer;
}

.specialBigBlue{
    border: 2px solid rgb(66, 103, 178);
    border-radius: 3px;
    background-color: rgb(66, 103, 178);
    color: white;
}