@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

.retour {
  position: absolute;
  top:0px;
  left: 0px;
  margin: 0;
  padding: 1em;
}

.retour li.ligne {
  vertical-align:top;
}

h4 {
  margin: 0;
  margin-top: 0.7em;
  padding: 0;
  font-size: 0.8em;
}

#retour:hover{
  text-shadow: 0 0 0.1em black;
}

body {
  text-align: center;
  margin-top: 8em;
}

a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

div.boutton {
  width: 10em;
}

a {
  text-decoration: none;
  color: #111;
}

.boutton:hover a {
  color:  #666;
}

p {
  font-size: 0.8em;
  margin: 0;
  padding: 0;
  margin-left: 2em;
  line-height: 1.1em;
}

.box-form{
  background-color: #333;
  width: 25em;
  margin: auto;
  text-align: center;
  color: white;
  border-radius: 3em;
  padding: 1em;
  padding-top: 0.1em;
  padding-bottom: 0;
  box-shadow: 0px 0px 1em 1em rgba(0,0,0,0.25);
}

.deux {
  padding-bottom: 4em;
  width: 1em;
}

.prem {
  padding-bottom: 0.5em;
}

.petitelettre {
  text-transform: none;
}

.submit input,
.boutton {
  text-decoration: none;
  color: black;
  font-weight: bold;
  background-color: #666;
  padding: 0.5em;
  margin-left: 2em;
  box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0,0.25);
  font-size: 0.8em;
  border: none;
  border-style: none;
}

.boutton {
  text-transform: none;
}

.boutton:hover,
.submit input:hover {
  background-color:#D4D4D4;
  box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px;
  transform: translate3d(4px, -4px, 0);
  color:  #666;
  transition: 0.5s;
}

h2 {
  font-weight: normal;
  position: relative;
  font-size: 1.2em;
  text-transform: uppercase;
}

label {
  font-size: 0.9em;
  text-transform: uppercase;
}

table {
  width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

input.saisie {
  width: 100%;
  background-color: transparent;
  margin-bottom: 2em;
  appearance: unset;
  -moz-appearance: unset;
  -webkit-appearance: unset;
  -o-appearance: unset;
  -ms-appearance: unset;
  outline: none;
  -moz-outline: none;
  -webkit-outline: none;
  -o-outline: none;
  -ms-outline: none;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border:none;
  border-bottom: 0.12em solid #999;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 1em;
  color: white;
}
    
input.saisie:focus{
  border-bottom: 2px solid #2bb33e;
}

tr {
  text-align: left;
  font-weight: normal;
  font-size: 1em;
}

#roub{position:relative;margin-top: -6em;margin-right: -9em;}
#eni{position:relative;margin-top: -4.6em;margin-left: -6.5em;}
#cra{position:relative;margin-top: 15.8em;margin-right: -9em;margin-left: 2em;}
#enu{position:relative;margin-top: 18.5em;margin-left: -7em;}

.ligne{display: inline-block;}

.haut{vertical-align: top;}

.bas{vertical-align: bottom;}

li{list-style: none;}

.big{text-transform: uppercase;}

.customcheck .checkmark:after {
    left: 0.3em;
    bottom: 0.2em;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


div.nightdaymode {
  position: absolute;
  display: inline-block;
  margin: 0;
  margin-left: -110px;
  margin-top: 10px;
}

#time {
  display: none;
}

#time + label {
  --i: 0;
  --j: calc(1 - var(--i));
  display: grid;
  overflow: hidden;
  padding: 0.5em;
  height: 2px;
  width: 20px;
  border-radius: 1em;
  background: hsl(0, 100%, calc(var(--j)*100%));
  color: transparent;
  user-select: none;
  transition: .3s;
  cursor: pointer;
  border: solid 1px #dcddde;
}

#time + label:before, #time + label:after {
  width: 13px;
  height: 13px;
  transition: inherit;
  content: "";
  margin-top: -5px;
}
#time + label:before {
  transform-origin: 20% 20%;
  transform: translate(calc(var(--i)*(100% + 0.25em))) scale(calc(1 - var(--i)*.7));
  background: #F09800;
  --poly: polygon(44.13371% 12.96169%, 50% 0%, 55.86629% 12.96169%, 59.70571% 13.77778%, 63.4388% 14.99073%, 67.02464% 16.58726%, 79.38926% 9.54915%, 76.5165% 23.4835%, 79.14297% 26.40049%, 81.45015% 29.57604%, 83.41274% 32.97536%, 97.55283% 34.54915%, 87.03831% 44.13371%, 87.44861% 48.0374%, 87.44861% 51.9626%, 87.03831% 55.86629%, 97.55283% 65.45085%, 83.41274% 67.02464%, 81.45015% 70.42396%, 79.14297% 73.59951%, 76.5165% 76.5165%, 79.38926% 90.45085%, 67.02464% 83.41274%, 63.4388% 85.00927%, 59.70571% 86.22222%, 55.86629% 87.03831%, 50% 100%, 44.13371% 87.03831%, 40.29429% 86.22222%, 36.5612% 85.00927%, 32.97536% 83.41274%, 20.61074% 90.45085%, 23.4835% 76.5165%, 20.85703% 73.59951%, 18.54985% 70.42396%, 16.58726% 67.02464%, 2.44717% 65.45085%, 12.96169% 55.86629%, 12.55139% 51.9626%, 12.55139% 48.0374%, 12.96169% 44.13371%, 2.44717% 34.54915%, 16.58726% 32.97536%, 18.54985% 29.57604%, 20.85703% 26.40049%, 23.4835% 23.4835%, 20.61074% 9.54915%, 32.97536% 16.58726%, 36.5612% 14.99073%, 40.29429% 13.77778%);
  -webkit-clip-path: var(--poly);
  clip-path: var(--poly);
  margin-top: -6px;
  margin-left: -3px;
}
#time + label:after {
  grid-column: 2;
  border-radius: 50%;
  transform: translatey(calc(var(--i)*(-100% - 0.5em)));
  background: radial-gradient(circle at 19% 19%, rgba(0, 0, 0, 0) 41%, #ffffff 43%);
  margin-left: 3px;
}
#time:checked + label {
  --i: 1;
  border: solid 1px #000000;
}

#time:checked + label:before{ margin-left: -7px;}


html::-webkit-scrollbar {
      width: 13px;
    }

    html::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
      border-radius: 10px;
    }
     
    html::-webkit-scrollbar-thumb {
      background: #999; 
      border-radius: 10px;
    }

    html::-webkit-scrollbar-thumb:hover {
      background: #666; 
    }


    .logo {
    position: absolute;
    right: 20px;
    top: 20px;
}