/********************* CSS File created by KRISTOF VERSPILLE - Firstthings.be for my Rudi from Flashygolf.be 
 * 
 * Huisstijlkleuren:
 * Groen: 

 * */

#Datum { width:350px; height:40px; font-size:22px; }

body { font-family: 'Roboto', sans-serif; font-size: 16px; background-color: #fefefb; }

.ondernoot { font-size:14px; text-align:left; }
.form-label { margin-bottom:0px; font-size:20px;  }


.btn-primary { width: 100%; background-color: #79A637; border: #79A637; text-transform:uppercase; }
.btn-primary:hover { background-color: #A0D94A; border: #A0D94A; }

#GoBackBTN:hover { background-color: #555; }


/********************* Header ***********************/
header { margin-top: 60px; margin-bottom: 5px; }

#Logo { width:200px; display: block; margin:auto; }

h1#TopBAR { width: 100%; display: block; position: absolute; top: 0px; padding: 15px 0px;
  font-size: 22px; color: white; text-align: center; background-color: #F2B705; }

p.GoBackStyle a { font-size: 14px; text-align: center; text-transform: uppercase; color: #aaaaaa; width: 100%; display: inline-block; }


/********************* Formulier input ***********************/


main p { text-align: center; color: #404040; font-size: 26px; }
main p.left { text-align: left; }




/********************* Footer ***********************/


footer .text-muted { color: #777; }
footer { text-align: center; margin-top: 15px; font-size: 12px; color: #777; }
footer a { color: #777; }
footer a:hover { color: black; }

h6 { font-size: 12px; color: #777; text-transform: uppercase; }


.red { color: red !important; }
.wrapper-350 { display: block; width: 350px; margin: auto; }
.wrapper-450 { display: block; width: 450px; margin: auto; }

.ondernootklein { text-align: left;
    font-size: 11px; margin-bottom: 0; }

label { font-weight: bold; color: #262626; }



label.center { text-align: center; width: 100%; }
input.center { display: block; margin: auto; }

h1 { font-size: 16px; text-align: center; text-transform: uppercase; color: #073251; position: absolute; top: 0; background-color: black; }


.form-check-label { font-size: .875em; color: #404040; }
.form-check-label a, .form-check-label a:hover { color: #404040; }


#Steps { text-align: center; margin-bottom: 15px; }

.step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; }
.step.active { background-color: #333333; }
.step.done { background-color: #77a9bc; }


.btn-grey { width: 100%; background-color: #666666; border: #666666; color: white; }
.btn-grey:hover { background-color: #666666; border: #666666; color: white; }

#SuccesBericht { text-align: center; color: #6c757d; }
#SuccesBericht h2 { color: #333333; }


#GoBackBTN {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #77a9bc;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}