html {
    font-family: "Lucida Sans", sans-serif;
  }
  
  .header {
    background-color: #99c455;
    color: #ffffff;
    padding: 15px;
  }
  
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  .menu li:hover {
    background-color: #0099cc;
  }


* {
    /* This makes sure that the padding and border are included in the total width and height of the elements.*/
    box-sizing: border-box;
  }

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    float: left;
    padding: 15px;
    border: 1px solid #365504;/*red;*/
  }
  
  [class*="col-"] {

  }

  @media only screen and (max-width: 768px) and (orientation: portrait) {
    /* For little screen:
    cacher div si vertical gsm
    66% 33 %
    */
    .col-v-1 {width: 8.33%;}
    .col-v-2 {width: 16.66%;}
    .col-v-3 {width: 25%;}
    .col-v-4 {width: 33.33%;}
    .col-v-5 {width: 41.66%;}
    .col-v-6 {width: 50%;}
    .col-v-7 {width: 58.33%;}
    .col-v-8 {width: 66.66%;}
    .col-v-9 {width: 75%;}
    .col-v-10 {width: 83.33%;}
    .col-v-11 {width: 91.66%;}
    .col-v-12 {width: 100%;}
    .col-v-hide {display: none;}
  }

  @media only screen and (max-width: 768px) and (orientation: landscape) {
    /* For little screen:
    cacher div si vertical gsm
    66% 33 %
    */
    .col-h-1 {width: 8.33%;}
    .col-h-2 {width: 16.66%;}
    .col-h-3 {width: 25%;}
    .col-h-4 {width: 33.33%;}
    .col-h-5 {width: 41.66%;}
    .col-h-6 {width: 50%;}
    .col-h-7 {width: 58.33%;}
    .col-h-8 {width: 66.66%;}
    .col-h-9 {width: 75%;}
    .col-h-10 {width: 83.33%;}
    .col-h-11 {width: 91.66%;}
    .col-h-12 {width: 100%;}
    .col-h-hide {display: none;}
  }
  
  @media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .col-hide {display: none;}    
  }
/*
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
  }

 The columns inside a row are all floating to the left, and are therefore taken out of the flow 
of the page, and other elements will be placed as if the columns do not exist. 
To prevent this, we will add a style that clears the flow  */
.row::after {
    content: "";
    clear: both;
    display: table;
}
input[type=submit] {
  background-color: #365504;
  color: #fff;
}
input[type=button] {
  background-color: #365504;
  color: #fff;
}

input[type=radio]{
  display: inline-block;
}

.encoded_ta { 
  background-color: #fff;
  border: none;
  width: 100%; }

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
 /* padding: 10px;
  font-size: 16px;*/
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=number] {
  background-color: #f1f1f1;
  width: 100%;
}
select{
  border: 1px solid transparent;
  background-color: #f1f1f1;
  /*padding: 10px;
  font-size: 16px;*/
}

.record {
  background-color: rgb(241, 241, 166);
}
.white {
  color: white;
}

.guest {
  background-color: #e3e3f5;
}

.flottant {
    position: relative;
    top: 0px;
    right: 5%;
    z-index: 99;
}