@font-face {
    font-family: "Roboto";
    src: url('/fonts/roboto-regular.ttf');
    }
@font-face {
  font-family : "arima madurai";
  src: url('/fonts/oswald-light.ttf');
}

body{
  position : relative;
}

div a:hover{
  text-decoration: none;
}

a.back{
  color : rgba(255,64,64);
  font-weight : 400;
}

a.user{
  color : rgba(255,64,64);
  font-weight : 400;
  font-size : 1.1em;
}

a.croix{
  width : 100%;
  height : 100%;
  display : block;
}

a.deconnexion{
  color : rgba(255,255,255);
  font-weight : 700;
  font-size : 1.1em;
}

input{
  border : 1px solid rgba(255,64,64);
}

input[type=text], input[type=password]{
padding-left : 8px;
}

input[type=date]{
border : 2px solid grey;
padding-left : 8px;
border-radius : 0px;
}

input[type=file] {
border : none;
}

input[type=submit] {
  background-color :rgba(255,64,64) ;
  color : white;
  padding : 8px;
  border : 1px solid  rgba(255,64,64);
  box-shadow: 2px 1px 3px #000;
}

button{
  background-color :rgba(255,64,64) ;
  color : white;
  padding : 8px;
  border : 2px solid rgba(255,64,64);
  box-shadow: 2px 1px 3px #000;
  border-radius : 15px;
}


body, div {
  font-family: arial;
  color : #000;
}

.right {
  text-align : right;
}

.left{
  text-align : left;
}

label{
  color : #0f7474;
  width : 165px;
}

.filess label {
  width : 390px;
}

header{
  background :#0f7474 no-repeat url("/images/header.jpg");
  background-position : right;
  min-height : 90px;
  max-height : 90px;
}

.center {
  margin : 0 auto;
}

.liste{
  color : #443529;
  font-size : 1.2em;
}

.liste p {
  color : #2c6b66;
  margin : 1px;
}

.center2{
  text-align : center;
}

h1 {
  font-family : "arima madurai";
  color :  #072926;
}

h2 {
  font-family : "arima madurai";
  color :  #072926;
  font-size : 1.2em;
}

h3 {
  font-size : 1.3em !important;
  text-align : left;
  padding : 20px 0px 10px 10px;
  color : rgba(255,64,64);
  margin : 10px 10px 10px 0px;
}



.titre1{
  font-size : 1.4em;
  color : rgba(255,64,64);
  font-weight : bold;
}

.margeHaut {
  margin-top : 8vh;
}

.margeHaut2 {
  margin-top : 4vh;
}

.margeHaut3 {
  margin-top : 2vh;
}

.gen {
  padding : 10px;
}

.gen td {
  padding : 5px;
  vertical-align: top;
}

.colore td {
  background : #eee;
  border : 1px solid grey;
  padding : 10px;
}

.gen3 {
  padding : 10px;
}

.gen3 td {
  padding : 1px 10px;
  vertical-align: bottom;
}

.gen2 {
  padding : 10px;
}

.gen2 td {
  padding : 5px;
  vertical-align: top;
  border : 1px solid #000;
}

.gen2 th {
  padding : 5px;
  vertical-align: top;
  border : 1px solid #000;
  background : #eee;
}

.gen4 {
  padding : 17px;
  width : 78%;
  border-collapse:separate;
               border-spacing:0 15px;
}

.gen4 td {
  padding : 5px;
  vertical-align: top;
  border : 1px solid #000;
}

.gen4 th {
  padding : 5px;
  vertical-align: top;
  border : 1px solid #000;
  background : #eee;
}

.numero {
font-size : 1.3em;
font-family : "Roboto";
color : #2c6b66;
}

.notation {
  border-radius: 5px;
  padding : 8px;
  position : relative;
  background :red;
  height : 125px;
  vertical-align: top;
}

.orange {
  background : orange;
}

.jaune {
  background : yellow;
}

.vertclair {
  background : #abf0e3;
}

.vert {
  background : #41c679;
}

.barreNotation {
  background-image : linear-gradient(#9198e5, #9198e5);
  background-size: 4px 100%;
  position : absolute;
  top : 100%;
  width : 96%;
  height: 4px;
  left : 2%;
}

.notationDeb {
  position : absolute;
  top : 103%;
  left : 0px;
}

.notationFin {
  position : absolute;
  top : 103%;
  left : 101%;
}

.alignement {
  display : inline-block;
}

.logo:hover {
cursor:pointer;
}

.utilisateur{
  position : absolute;
  top : 87px;
  right : 25px;
  padding : 10px;
  background : rgba(255,64,64);
}

.utilisateur div{
    color : #fff;
}

#chart-container{
  width : 900px;
  height : 600px;
  margin : 0 auto;
}

#menu{
  display : none;
  width : 310px;
  background : #2c4e52;
  position : absolute;
  top : 0px;
  left : -100px;
  z-index : 15000;
  padding : 15px 0px;
}

#menu ul {
  list-style : none;
}

#menu li {
  padding : 10px 5px 10px 20px;
  width : 240px;
  background : url(/images/arrow-cal-right.png) right center no-repeat;
}

#menu li a {
  color :white;
}

#x {
  position : absolute;
  z-index : 20000;
  left : 2px;
  top : 10px;
  display : none;
}


@keyframes voirMenu2 {
  from { left: -295px}
  to   { left : 7px;}
}

@keyframes cacherMenu {
  from { left: 0px}
  to   { left : -330px;}
}

@keyframes voirMenu {
  from { left: -330px}
  to   { left : 0px;}
}

.stats{
  color : rgba(255,64,64);
  font-size : 1.3em;
}

.aide {
  display : none;
}

.none{
  display : none;
}

.flottant {
  position : fixed;
  top : 89%;
  left : 94%;
  width : 6%;
  height : auto;
}

.img-fluid {
  width : 94%;
  height : auto;
}

.cadre{
  border : 1px solid grey;
  padding : 15px;
  width : 50%;
  margin : 15px auto;
}

.listImage li {
  list-style-image: url("../images/list_image.png");
}

footer a {
  color : white;
}

footer  {
  text-align : center;
  padding : 15px;
  min-height : 20vh;
}


.container-fluid {
  min-height : 70vh !important;
}