body {
    background-color:#e9ecef;
}

/*********** Common parts : Header **************/

body > header {
    background-image: linear-gradient(to bottom, rgba(0,40,255,1), rgba(0,40,255,0.65));
}
.dropdown-item:hover {
    background-color: #4821f7;
}
.dropdown-item:focus {
    background-color: unset;
}
.dropdownHeader[aria-expanded="true"] .fa-angle-up {
    display: none;
}
.dropdownHeader[aria-expanded="false"] .fa-angle-down {
    display: none;
}


/*********** 5 Columns Layout **************/

.container.p0m0 {
    padding: 0;
}
.container.p0m0 .row {
    margin: 0;
}
.container.p0m0 .col, .container.p0m0 [class^="col-"] {
    padding: 0;
}
#sideBar > a + a {
    margin-top: 30px;
}
#sideBar > a > div {
    padding: 15px 10px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    text-align: center;
    color: #212529;
}
#sideBar > a > div.currentPage {
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(0,40,255,1), rgba(0,40,255,0.65));
}
@media (min-width:576px) {
    .row.fiveCols > .col-sm-1 {
        flex: 0 0 20%;
        max-width:  20%;
    }
    .row.fiveCols > .col-sm-2 {
        flex: 0 0 40%;
        max-width:  40%;
    }
    .row.fiveCols > .col-sm-3 {
        flex: 0 0 60%;
        max-width:  60%;
    }
    .row.fiveCols > .col-sm-4 {
        flex: 0 0 80%;
        max-width:  80%;
    }
    .row.fiveCols > .col-sm-5 {
        flex: 0 0 100%;
        max-width:  100%;
    }
}


/*********** Index page & Players Page> Result Circles **************/
.result-circle {
    height: 80px;
    width: 80px;
    border-radius: 50px;
    border-style: solid;
    border-width: 10px;
    font-size: 2.2rem;
    font-weight: bold;
    color:#5e5e5e;
}


/*********** Stats page > Array **************/
.table-borderless thead tr th {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}
.table-borderless tbody tr th {
    color:#4821f7;
}
.table-borderless tbody tr:nth-child(odd) {
    background-color:#cfe1f3;
}
.table-borderless tr th:first-child {
    border-right: 1px solid #bbb;
}
.table-borderless tr th, .table-borderless tr td {
    text-align: center;
}
.table-borderless tr > *:nth-child(3) {
    color: #9e319e;
    font-weight: bold;
}

/*********** Stats page > Modal > 3 Choices > "Défenseur/MilieuDeTerrain/Attaquant" **************/
input[name^=modalPlayerPositionType]:checked + label{
    background-color: rgb(0,40,255);
    color: white;
}
input[name^=modalPlayerPositionType] + label{
    background-color: unset;
    color: unset;
}

/*********** Matchs page > Modal > 3 Choices > "Victoire/Défaite/Nul" **************/
input[name^=matchResult]:checked + label{
    background-color: rgb(0,40,255);
    color: white;
}
input[name^=matchResult] + label{
    background-color: unset;
    color: unset;
}


/*********** Players page **************/
#playerTable{
    border-collapse: separate;
}
#playerTable tr > *{
    height: 5rem;
    text-align: center;
    vertical-align: middle;
}
#playerTable tr > th{
    background-color: rgb(149, 199, 236);
    color: #4821f7;
}


/* #playerTable tr > th:first-child{
    background-color: unset;
} */
#playerTable tr > td{
    background-color: rgb(202, 227, 245);
}


.arrow-left{
    border: solid black;
    border-width: 0 0 3px 3px;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}


.font-size-larger{
    font-size: larger;
}


.table-hover tbody tr:hover td{
    background-color: #1400ffba;
    color: #fff;
    /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); */
}
.table-hover tbody tr:hover td:first-child{
    border-top-left-radius: 10rem;
    border-bottom-left-radius: 10rem;
}
.table-hover tbody tr:hover td:last-child{
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
}


.result-circle2 {
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    border-style: solid;
    border-width: 14px;
    font-size: 2.2rem;
    font-weight: bold;
    color:#5e5e5e;
}
.result-circle3 {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    border-style: solid;
    border-width: 12px;
    /* font-size: 2.2rem; */
    font-size: 2em;
    font-weight: bold;
    color:#5e5e5e;
}


/*********** Training page **************/
input[name=matchPrograming]:checked + label{
    background-color: rgb(0,40,255);
    color: white;
}
input[name=matchPrograming] + label{
    background-color: unset;
    color: unset;
}


.player {
    position:absolute;
    min-width: 50px;
    /*width:50px;*/
    height: 60px;
    border-radius:50%;
    /*background-color: #aaa;*/
    /*background: no-repeat url("../imgs/tooltip4a.png");*/
    background-size: cover;
    z-index: 700;
}
.player::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat url("../imgs/tooltip5a.png");
    background-size: cover;
}
/*.player::after {
    content: "";
    position:absolute;
    top:90%;
    left:50%;
    margin-left:-10px;
    border-width:10px;
    border-top-width:20px;
    border-style: solid;
    border-color: #aaa transparent transparent transparent;
}*/
.player.goalkeeper {
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
}
.player.captain {
    margin: auto;
    bottom: 30px;
    right: 0;
    left: 0;
}
.player > span {
    color:white;
    background-color:#4949dd;
    font-size: 0.77em;
    border: 1px solid;
    position: absolute;
    /*top: 25%;*/
    white-space: nowrap;
    padding: 1px 15px;
    /*z-index: -1;*/
    display: none;

    top:70%; left:50%; transform:translateX(-50%);
}
.player > img {
    border-radius:50%;
    max-width:2.5rem;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

/* LE CODE CI-DESSOUS NE MARCHAIT PAS JUSQU'A INSERTION DIRECT DANS <style></style>, 
C'était LE NAVIGATEUR QUI DECONNAIT, A PARTIR DU REDEMARRAGE, TOUT EST OK */
input[name^=modalPlayers]:checked + label{
    background-color: rgb(0,40,255);
    color: white;
    border-radius: inherit;
}
input[name^=modalPlayers] + label{
    background-color: unset;
    color: unset;
    border-radius: inherit;
}

/* input[name^=modalPlayers]:checked ~ p{
    display: block;
}
input[name^=modalPlayers]:not(:checked) ~ p{
    display: none;
} */