@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html{
      font-family : 'Roboto Condensed';
}

.formation{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      background-color:#eceff1;
      min-width:320px;
      max-width:380px;
      border-style:solid;
      border-width: 1px;
      margin-top:15px;
      margin-bottom:10px;
}
.formationtitre
{
      width:100%;
      text-align:center;
      height:25px;
      background-color:#546e7a;
      color:white;
      font-size:larger;
}
.formationligne{
      height:63px;
      width:100%;
      display:flex;
      flex-wrap:nowrap;
      justify-content:center;
      align-items:center;
}
.formationjoueur{
      width:70px;
      text-align:center;
}
.formationinfos
{
      width:100%;
      text-align:left;
      font-size:small;
      background-color:white;
}





.tabresult td{
      padding-left:2px;
      text-align:left;
}

.am{
      margin-left:2px;margin-top:3px;float:left;display:block;height:9px;width:6px;background-color:#fbc02d;
}
.es{
      margin-left:2px;margin-top:3px;float:left;display:block;height:9px;width:6px;background-color:red;
}



.gradp {
      background:#ffe0b2; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(left, #ffe0b2  , white); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(right, #ffe0b2 , white); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(right, #ffe0b2 , white); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to right, #ffe0b2  , white); /* Standard syntax */
}
.gradd {
      background: dcedc8; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(left, #dcedc8  , white); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(right, #dcedc8 , white); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(right, #dcedc8 , white); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to right, #dcedc8  , white); /* Standard syntax */
}
.gradc {
      background: red; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(left, #bbdefb  , white); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(right, #bbdefb , white); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(right, #bbdefb , white); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to right, #bbdefb  , white); /* Standard syntax */
}
.grada {
      background: red; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(left, #ffcdd2  , white); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(right, #ffcdd2 , white); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(right, #ffcdd2 , white); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to right, #ffcdd2  , white); /* Standard syntax */
}

.role{
    min-width:13px;
    height:18px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
    font-family: Sans-Serif;
    color:white;
    font-size: small;
}
.rolep{
      background:#F9A825;
}
.roled{
      background:#2E7D32;
}
.rolec{
      background:#0277BD;
}
.rolea{
      background:#C62828;
}
.roler{
      background: grey;
}

td{
      padding-top:7px;
      padding-bottom:7px;
}

th{
      padding-top:7px;
      padding-bottom:7px;
}
   /* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid red;
     box-shadow: 0 1px 0 0 red;
   }

   .container-draft {
    width: 95% !important;        /* ou 100% */
    max-width: 1500px !important; /* plus large que la limite Materialize */
}