*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
 
/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}
 
/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button { 
	-o-appearance: none;
	margin:0
}


a:visited{
    color:black;
}

body{
    font-size: 22px;
    background-color:cornflowerblue;
}
input{
    font-family: 'Quicksand', sans-serif;
    outline: none;
}

.main-container{
    width:100%;
    font-family: 'Quicksand', sans-serif;
    margin-top:5px;
}
.update{
    margin-top:5px;
    font-size:12px;
    text-align: center;
}
.labels input{
    color:white;
    background-color:black;
}

        
        .labels>.row>input,
        .labels>.row>input:last-of-type{
            border-color:black;
        }
        .labels>.row>input,
        .labels>.row>input:last-of-type{
            border-left-color:white;
        }
        .labels>.row>input:first-of-type{
            border-left-color:black;
        }
        
        



.season,
.season_team,
.matchs,
.rank,
.teams,
.ffbb_link,
.otherECM_link,
.score{
    text-align:center;
}
.update{
    font-size:12px;
}
.otherECM_link{
    font-size:15px;
}

.season,
.matchs,
.rank,
.teams{
    font-size:24px;
    margin-bottom:10px;
}

.season_team span{
    font-weight:bold;
}
.matchs,
.rank,
.teams{
    margin-top:30px;
}
.ffbb_link,
.otherECM_link{
    margin-top:30px;
}
#button_admin,
#button_disconnect{
    position: absolute;
    top:5px;
    left:5px;
}

.matchsListElement input:hover,
.rankElement input:hover{
    cursor:pointer;
}


#button_admin,
#button_disconnect,
#button_save_teams,
#button_save_matchs,
#button_save_rank{
    border-radius: 5px;
    width:90px;
    font-family: 'Quicksand', sans-serif;
    cursor:pointer;
    height: 40px;
    margin-bottom:20px;
}

#button_admin:hover,
#button_disconnect:hover,
#button_save_teams:hover,
#button_save_matchs:hover,
#button_save_rank:hover{
    color:white;
    background-color:black;
}
#button_admin:active,
#button_disconnect:active,
#button_save_teams:active,
#button_save_matchs:active,
#button_save_rank:active{
    color:white;
    background-color:darkslategrey;
}


.button{
    display:flex;
    justify-content: center;
    margin-top:5px;
}
.otherECM_link{
    text-decoration: none;
    border-radius:20px;
    border: solid black 1px;
    background-color:aquamarine;
    width:300px;
    margin:20px auto 0;
}

        .otherECM_link a{
            text-decoration: none;
        }

.teams-container{
    width:800px;
    margin:5px auto 0;
}
        .teams-container .row{
            width:100%;
            margin:0 auto;
        }
        input[name="team_full_name"]{
            width:65%;
        }
        input[name="team_short_name"]{
            width:35%;
        }
        

.matchs-container{
    width:900px;
    margin:5px auto 0;
}
        .matchs-container .row{
            width:100%;
            margin:0 auto;
            display:flex;  /*  Afin de laisser la div .score sur la même ligne  */
        }
        input[name="matchs_number"]{
            width:50px;
        }
        input[name="matchs_date"]{
            width:200px;
        }
        input[name="matchs_hour"]{
            width:150px;
        }
        input[name="matchs_home"]{
            width:150px;
        }
        input[name="matchs_score"]{
            width:120px;
        }
        input[name="matchs_visitors"]{
            width:150px;
        }
        input[name="matchs_ffbb"]{
            width:80px;
        }

.rank-container{
    width:720px;
    margin:5px auto 0;
    
}
        .rank-container .row{
            width:100%;
            margin:0 auto;
        }
        input[name="rank_number"]{
            width:50px;
        }
        input[name="rank_team"]{
            width:200px;
        }
        input[name="rank_points"]{
            width:50px;
        }
        input[name="rank_played"]{
            width:50px;
        }
        input[name="rank_victory"]{
            width:50px;
        }
        input[name="rank_defeat"]{
            width:50px;
        }
        input[name="rank_draw"]{
            width:50px;
        }
        input[name="rank_for"]{
            width:75px;
        }
        input[name="rank_against"]{
            width:75px;
        }
        input[name="rank_diff"]{
            width:70px;
        }

.score{
    width:120px;
    display:flex;
    height:37px;
    border-left:solid 1px black;
    border-top:solid 1px black;
}
        .scoreSpacer{
            width:22px;
            background-color: white;
            text-align:center;
            line-height:37px;
        }
        input[name=scoreHome],
        input[name=scoreVisitors]{
            height:100%;    
            outline:none;
            width:49px;
        }
        input[name=scoreHome]{
            text-align: end;
        }
        input[name=scoreVisitors]{
            text-align: start;
        }
input[name=matchs_closed]{
    display:none;
}

.matchsList-options{
    display:flex;
    justify-content:space-around;
    padding:10px 0;
    border-width:1px;
    border: solid;
    border-top:none;
    border-color: black;
}
.matchsList-options span{
    cursor:pointer;
}

.match_closed{
    background-color:#C0C0C0;
    color: black;
}
.selected_match{
    color:#C0C0C0;
    background-color: black;
}

input{
    border:none;
    background-color:white;
    text-align:center;
    color:black;
}
.row>input{
    border-left:solid;
    border-top:solid;
    border-width:1px;
    padding:10px 5px;
}
.row>input:last-of-type{
    border-right:solid;
    border-width:1px;
}



.teams-container>.row:last-of-type,
.matchs-container>.row:last-of-type,
.rank-container>.row:last-of-type,
#rank-item_14{
    border-bottom:solid;
    border-width:1px;
}

.row{
    position:relative;
}
    .teamsList-delete,
    .teamsList-add{
        position:absolute;
        right:0px;
        top:3px;
        cursor:pointer;
        z-index:5;
    }



@media screen and (max-width: 1280px)
    {
        /*  Agrandir la police  */
        body,
        .season,
        .matchs,
        .rank,
        .teams{
            font-size:40px;
        }
        input[type=text],
        input[name=scoreHome],
        input[name=scoreVisitors]{
            font-size:23px;
        }
        .update{
            font-size:8px;
        }
        .otherECM_link{
            font-size:25px;
            padding:5px;
        }

        /*  Comme la police augmente, la hauteur de ligne aussi et donc on modifie ça dans le bricolage du score  */
        .score{height:52px;}
        .scoreSpacer{line-height:52px;}

        /*  Elargir le champ "HORAIRE" et masquer le champ "Réf" pour avoir la place de mettre la date en entier avec la taille de police augmentée  */        
        input[name="matchs_date"]{
            width:280px;
        }
        input[name="matchs_ffbb"]{
            display:none;
        }
        /*  Mettre une bordure à droite de l'avant dernier champ input sur la liste des matchs étant donné que l'on masque le dernier champ (voir juste au-dessus)  */
        .matchs-container>.row>input:nth-last-child(2){
                    border-right:solid;
                    border-width:1px;
                }

        

        /*  Augmenter la taille des boutons pour mes gros doigts  */
        #button_admin,
        #button_disconnect,
        #button_save_teams,
        #button_save_matchs,
        #button_save_rank{
            width:200px;
            height: 60px;
            font-size:25px;
        }

        /*  modifier le centrage vertical de ➖ et ➕ parce que je suis maniaque  */
        .teamsList-delete,
        .teamsList-add{
            top:-2px;
        }


        





















    }