/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Muli');
html {
          font-size: 1em;
}
body {
          display: block;
          color: #FFFFFF;
          background-color: #4B4F54;
          font-family: 'Muli', sans-serif;
}
input {
          padding: 12px 20px;
          border-radius: 5px;
          font-size: 1.2em;
}
textarea {
          font-size: 1.2em;
          border: 1px solid #888;
          resize: none;
          padding: 10px;
          border-radius: 5px;
          width: 500px;
          height: 70px;
}
select {
          font-size: 1.2em;
          border: 1px solid #888;
          resize: none;
          padding: 10px;
          border-radius: 5px;
}
ul li {
          margin-bottom: 5px;
}
/*================================================================*/
/*================================================================*/
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container2 {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark2:after {
  display: block;
}

/* Style the checkmark/indicator */
.container2 .checkmark2:after {
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*================================================================*/
/*================================================================*/
.spacer {
    min-height: 30px;
}
.indiv_pourcent {
          margin-left: 50px;
          font-size: 17px;
}
.cadre {
          width: auto;
          margin-left: 25px;
          margin-right: 25px;
          margin-top: 20px;
          border: 2px solid #eeab69;
}
.header {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          z-index: 1000;
}
.footer {
          position: fixed;
          left: 0;
          bottom: 0;
          width: 100%;
          background-color: #6C6054;
          color: white;
          text-align: center;
          border-top: solid 1px #75787B;
}
.lien {
          color: white;
          margin-right: 15px;
          margin-left: 15px;
          text-decoration: none;
}
.lien:hover {
          color: aquamarine;
}
.display_id {
          display: inline;
          padding-top: 2px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 2px;
          color: #DFD8CC;
          background-color: #746860;
          width: 200px;
          border: solid 1px white;
          font-size: 20px;
}
table {
          width: 50%;
          border: 1px solid white;
          border-collapse: collapse;
}
tr {
          height: 20px;
          border: 1px solid white;
}
td {
          border: 1px solid white;
          padding: 5px;
}
.pourcent {
          color: #218EAE;
          font-family: 'Dosis', sans-serif;
          font-size: 1.2em;
}
.encadrement {
          display: inline-block;
          padding-top: 2px;
          padding-bottom: 2px;
          padding-left: 10px;
          padding-right: 10px;
          background-color: #121212;
          border: solid 1px white;
}
.bouton {
          display: inline-block;
          padding-top: 2px;
          padding-bottom: 2px;
          padding-left: 10px;
          padding-right: 10px;
          background-color: #1A306B;
          border: solid 1px white;
          text-transform: uppercase;
          font-size: 1.3em;
}
.bouton_menu {
          display: block;
          width: 700px;
          padding-top: 2px;
          padding-bottom: 2px;
          padding-left: 10px;
          padding-right: 10px;
          background-color: #1A306B;
          border: solid 1px white;
          text-transform: uppercase;
          font-size: 1.3em;
          margin-bottom: 5px;
          color: white;
          text-decoration: none;
}
.bouton_menu:hover {
          background-color: darkred;
          cursor: pointer;
}
.bouton:hover {
          background-color: darkred;
          cursor: pointer;
}
.highlight {
          color: #959EE7;
          font-size: 1.2em;
}
#wrapper {
          margin-left: 50px;
}
.nopuce {
          list-style-type: none;
}
.spanli {
          width: 150px;
          display: block;
}
.h {
          text-decoration: underline;
          margin-bottom: 10px;
}
.ts.t {
          border-collapse: collapse !important;
          border: 1px solid white !important;
}
.ts {
          border: none;
          border-collapse: collapse;
}
.ts tr {
          border: none;
          border-collapse: collapse;
}
.ts td {
          border: none;
          border-collapse: collapse;
}