/* FORMULIEREN - Stylesheet - Gemeente Houten 05052026*/ 

:root {
  --font-size:                    18px;
  --line-height:                  1.6;
  --font-family:                  "Roboto", sans-serif;

  --color-yellow:                 #E9BF48;
  --color-yellow-light:           #FBF1DA;
  --color-blue-dark:              #090D62;
  --color-green:                  #64C97B;
  --color-cyan:                   #069EE0;
  --color-red:                    #D43246;
  --color-white:                  #FFFFFF;
  --color-black:                  #000000;

  --color-primary:                  var(--color-blue-dark);
  --color-secondary:                var(--color-yellow);

  --color-body:                     var(--color-black);
  --color-header-text:              var(--color-white);
  --color-header-background:        var(--color-primary);
  --color-header-background-shade:  var(--color-secondary);
  
  --color-button-text:              var(--color-white);
  --color-button-text-state:        var(--color-black);
  --color-button-background:        var(--color-primary);
  --color-button-background-state:  var(--color-secondary);
}

/* ------------- */

html,
body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

/* Titelbalk */
.orbeon .navbar-inverse .navbar-inner {
  background-color: var(--color-header-background);
  border-bottom: 3px solid var(--color-header-background-shade);
}

.orbeon .navbar-inverse .navbar-inner .container h1 {
  font-size: 18pt;
  color: var(--color-header-text);
}

/* Paginakoppen */
.orbeon h2 {
  font-size: 16pt;
}

.orbeon h2,
.orbeon h3,
.orbeon h4,
.orbeon h5,
.orbeon h6 {
  color : var(--color-primary); 
}

/* Knoppen */
.fr-formnavigation button, 
.orbeon .btn,
.orbeon .btn.fr-attachment-select {
  color: var(--color-button-text); 
  background-color: var(--color-button-background);
  border-color: var(--color-button-background);
  padding: 0 1.25rem;
}

.orbeon .btn:hover,
.orbeon .btn:focus,
.orbeon .btn.fr-attachment-select:hover,
.orbeon .btn.fr-attachment-select:focus,
.fr-formnavigation button:hover, 
.fr-formnavigation button:focus,
.fr-formnavigation span.button-active button,
.fr-formnavigation span.button-active button:hover,
.fr-formnavigation span.button-active button:focus {
  color: var(--color-button-text-state); 
  background-color: var(--color-button-background-state);
  border-color: var(--color-button-background-state);
}

.orbeon .btn:hover,
.orbeon .btn:focus,
.fr-formnavigation button:hover, 
.fr-formnavigation button:focus {
  cursor: pointer;
}

/* Verplichte velden: Achtergrondkleur blok */
.xforms-required  { 
  background-color: var(--color-yellow-light); 
}

/*icoontje voor de hint*/
span.xforms-hint::before {
  display: inline-block;
  text-align: center;
  content : "i";
  background:  var(--color-yellow);
  color : var(--color-black);
  width : 20px;
  font-family: Times, "Times New Roman", serif;
}

/* Verplichte velden: kleur van de asterisk '*' */

.orbeon .fr-mode-new .xforms-required .xforms-label::after {
  color: var(--color-red); 
}