body {
  /* background: rgba(0, 0, 0, 0.1); */
  line-height: 1.45rem;
  color: #444;
}
body.freeze {
  pointer-events: none;
}
#cds h2 {
  text-align: center;
}
.section {
  max-width: 1000px;
  padding: 2rem;
  margin: 5vh auto 5vh auto;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* -------------------------- START FORM PROGRESS ------------------------- */
#cds .form-progress {
  position: relative;
  display: block;
  margin: 3rem auto;
  width: 100%;
  max-width: 600px;
}
#cds progress {
  display: block;
  position: relative;
  top: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 70%;
  height: 5px;
  transition: 1s;
  will-change: contents;
  margin: 0 auto;
  background-color: rgba(128, 128, 128, 0.356);
  color: green;
}
#cds progress::-webkit-progress-bar {
  background-color: rgba(128, 128, 128, 0.356);
}

#cds progress::-webkit-progress-value {
  background-color: green;
} 
#cds progress::-moz-progress-bar {
  background-color: green;
}


#form-id{
  width:auto;
  margin:50px auto;
  position: relative;
}
#form-id fieldset:not(:first-of-type){
  display:none;
}
#form-id .form-instructions {
  text-align: center;
}
#form-id form {
  margin: 2rem auto;
  width: 100%;
  max-width: 800px;
}
#form-id input[type=text], input[type=email], select {
  width: 100%;
  padding: 3px 6px;
  margin:3px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
/*Progressbar*/
#form-id .progress {
  margin-bottom: 30px;
  overflow: hidden;
 /*CSS counters to number the steps*/
  counter-reset: step;
  background-color: white;
  height: 100%;
  text-align: center;
}
#form-id .progress li {
  list-style-type: none;
  text-transform: uppercase;
  font-size: 12px;
  width: 100%;
  float: left;
  position: relative;
  margin: 0 0 0 auto;
}
#form-id .progress li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 25px;
  display: block;
  font-size: 16px;
  color: white;
  background: rgb(104, 104, 104);
  border-radius: 3px;
  margin: 0 auto 5px auto;
  ;
}
#form-id .progress li:first-child:after {
 /*connector not needed before the first step*/
  content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#form-id .progress li.active:before, .progress li.active:after{
  background: green;
  color: white;
}
/* -------------------------- END FORM PROGRESS ------------------------- */
/* -------------------------- START BUTTON NEXT ------------------------- */
/*Desktop view*/
@media (min-width: 812px) {
 /* back button */
  #cds .bottomleft {
      bottom: 8px;
      left: 16px;
 }
  #cds .bottomleft:hover{
      background: green;
      color:white;
 }
  #cds .nextSmall {
      bottom: 8px;
      right: 16px;
 }
}
/*Phone view*/
@media (max-width: 812px) {
 /* back button */
  #cds .bottomleft {
      position: absolute;
      bottom: 8px;
      left: 16px;
 }
  #cds .bottomleft:hover{
      background: green;
      color:white;
 }
  #cds .nextSmall {
      position: absolute;
      bottom: 8px;
      right: 16px;
 }
}
/*Desktop view*/
@media (min-width: 812px) {
  #cds .br {
      padding-top:20px;
 }
}
/*Desktop view*/
@media (max-width: 812px) {
  #image .up {
      display: none !important;
 }
}
/*Phone view*/
@media (min-width: 812px) {
  #image .down {
      display: none !important;
 }
}
/* -------------------------- END BUTTON NEXT ------------------------- */
/* -------------------------- START HOVER IMAGE ------------------------- */
#cds .upload img:hover {
  -webkit-filter: drop-shadow(0 1px 8px black );
  filter: drop-shadow(0 1px 8px black);
}
/* -------------------------- END HOVER IMAGE ------------------------- */

/* Override Popover */
.popover{
  max-width: 500px !important; 
  /* max-height: 450px !important; */
}