body {
  background-color: #333333;
  font-family: Sans-serif;
  color: white;
  }
  
h1 {
  font-size: 3.5em;
}
  
p{
  margin: 10px;
}
  
table {
  width: 100%;
  cellspacing: 50;
  cellpadding: 0;
  border: 0;
}
  
td {
  height: 40px;
  /*width: 100px;*/
  margin: 10px;
  background-color: #333333;
}

.tdbutton{
  height: 60px;
  text-align: center;
}

.tdtitre {
  font-weight: bold;
  width: 200px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #eeab69;
  opacity: 0.75; /* Firefox */
}
  
.bouton {
  width: 180px;
  height: 38px;
  cursor: pointer;
  text-transform: capitalize;
  border: none;
  padding: 10px 0 10px 0;
  border-radius: 8px;
  background: #d34836;
  font-weight: bold;
  color: #fff;
}

.upload-btn-wrapper {
  position: relative;
  width: 180px;
  height: 38px;
  /*overflow: hidden;*/
  display: inline-block;
}

.upload-btn {
  position: absolute;
  width: 180px;
  height: 38px;
  cursor: pointer !important;
  pointer-events: auto;
  border: 0px solid gray;
  color: #ffffff;
  text-transform: capitalize;
  background-color: #d34836;
  padding: 10px 0 10px 0;
  border-radius: 8px;
  font-weight: bold;
}

.upload-label {
  position: relative;
  width: 180px;
  height: 38px;
  overflow: hidden;
  float: right;
  clear: left;
}

.upload-btn-wrapper input[type=file] {
  position: absolute;
  cursor: pointer !important;
  pointer-events: auto;
  font-size: 1px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.cadre {
  background-color: #333333;
  /*width: 100%;*/
  margin: 0px 0px 0px 10px;
  padding: 10px 10px 0px 10px;
  border: 2px solid #eeab69;
  min-width: 550px;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  behavior: url(border-radius.htc);

  background-image: -moz-linear-gradient(top, #333333, #333333);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#333333));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#f4f4f4);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#f4f4f4)";
}

legend {
  color: #eeab69;
  font-size: 18px;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
  display: block;
}

input[type=text] {
  padding: 5px 5px;
  border: 2px solid #eeab69;
  border-radius: 4px;
  background-color: grey;
  color: white;
}

select {
  width: 120px;
  padding: 5px 5px;
  border: 2px solid #eeab69;
  border-radius: 4px;
  background-color: grey;
  color: #ffffff;
}

/* Modification des cases à cocher */
/* Cacher la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
/* Préparer le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative; /* permet de positionner les pseudo-éléments */
  padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
  cursor: pointer;    /* affiche un curseur adapté */
}
/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 15px; height: 15px; /* dim. de la case */
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px; /* angles arrondis */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */
}
/* Aspect général de la coche */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 1px; left: 3px;
  font-size: 14px;
  color: #09ad7e;
  transition: all .2s; /* on prévoit une animation */
}
/* Aspect si "pas cochée" */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
[type="checkbox"]:checked + label:after {
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}
/* Aspect désactivée */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
/* Styles de la coche (si cochée/désactivée) */
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
/* Style du label quand désactivé */
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* Aspect au focus de l'élément */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

/* Dynamic JS elements */
.pdb-select-box {
  width: 100%;
}