/*Hier vind je de code die nodig is om de layout van de enquete lokale lasten aan te passen
De code is meestal gemaaktmet behulp van ChatGPT
Omdat het vrij veel code is is deze genummerd, dan is ten minste zichtbaar waar iets nieuws begint. Nummering is in volgorde waarin is geprogrammeerd en dus willekeurig*/
/*Een deel van de CSS-code waarnaar wordt verwezen onder class in het excelbestand  is niet hier te vinden, maar is beschikbaar via Formr. 
Dit zijn over het algemene engelse woorden. Leftmet cijfer geeft bijvoorbeeld weer hoe breed de linker kolom (met de vragen) moet worden (default is 300)*/
/*Algemeen !important betekent slechts dat de regels hier FORMR overrulen*/


/*Code 1 Code om gegevens vorig jaar kleiner weer te geven*/
/*Het is het mooist om antwoorden van vorig jaar in een kleiner lettertype weer te geven zodat in één oogopslag zichtbaar is dat het om iets anders gaat dan tarief dit jaar*/
/*De marge tussen de vraag deze en de vorig vraag wordt iets verkleind zodat zichtbaar is dat het bij elkaar hoort*/
/*Gebruik in excel het woord klein onder class om gebruik te maken van deze code*/
/* ========== Klein formaat vragen ========== */

/* Algemene tekst kleiner */
.klein,
.klein input,
.klein textarea,
.klein select,
input.klein,
textarea.klein,
select.klein {
    font-size: 0.80em !important;       /* zorgt ervoor dat letters kleiner worden */
    margin-top: 0.1em !important;       /* zorgt ervoor dat gegevens voorgaande jaar hoger worden weergegeven dan standaard */
    margin-bottom: 0.5em !important;
   /* display: block; */
}
/* Labeltekst iets kleiner houden */
.klein label {
    font-size: 0.8em !important;
    line-height: 0.8em; /* voorkomt dat bij meerkeuzevragen de rondjes en tekst elkaar raken */
}
/* Invulvakken kleiner maken (lager) */
.klein input[type="number"],
.klein input[type="text"],
input.klein[type="number"],
input.klein[type="text"] {
    font-size: 0.80em !important;       /* tekst in vak kleiner houden */
    padding-top: 0.15em !important;     /* minder binnenruimte boven */
    padding-bottom: 0.15em !important;  /* minder binnenruimte onder */
    line-height: 1.1em !important;      /* compacte tekstregel */
    height: 3.5em !important;           /* expliciet lagere hoogte van het vak */
    width: 8em !important;              /* expliciet minder breed vak */
    margin-top: 0.1em !important;
    margin-bottom: 0.5em !important;
}

/*Code1a*/
/* ========== Half grijze vragen ========== */
.grijs,
.grijs label,
.grijs input,
.grijs textarea,
.grijs select {
    color: #666 !important;               /* grijze tekstkleur */
}
/* Grijze invulvakken met subtiele rand */
.grijs input[type="number"],
.grijs input[type="text"],
.grijs textarea,
.grijs select {
    border: 1px solid #ccc !important;
    background-color: #ebebeb !important;
    color: #555 !important;
}
/* Iets transparanter geheel voor subtiel effect */
.grijs {
    opacity: 0.85;
}
/* Label iets lichter dan tekstvelden */
.grijs label {
    color: #777 !important;
}


/*Code 2*/
/*Zorg ervoor dat de standaard invulvakken  minder breed worden, rechts worden uitgelijnd, maar niet over de spinner heen gaan*/
/*Gebruik in excel het woord smal_rechts onder class om gebruik te maken van deze code*/
.smal_rechts input {
  width: 80px;               /* Breedte van het invoerveld */
  text-align: right;         /* Cijfers rechts uitlijnen */
  padding-right: 5px;       /* Beetje ruimte tot rechter zijlijn (eventueel om spinner in te voegen*/
  box-sizing: border-box;    /* Zorgt dat padding binnen de breedte valt */
}

/*Code 3 */
/*De vragen staan heel dicht op elkaar. Met deze code kun je meer ruimte boven een vraag maken.  */
/*Gebruik in excel het woord ruimte_boven onder class om gebruik te maken van deze code*/
.ruimte_boven {
    margin-top: 50px;
}



/*Code 4 */
/*Commentaarvak breder maken */
/*Gebruik in excel het woord bredebox onder class om gebruik te maken van deze code*/

/* Container breder en flexibel, hoog vak */
.bredebox {
  width: 90% !important;          /* percentage van breedte van de kolom die wordt gebruikt */
  max-width: none !important;
  flex: 1 1 auto !important;
  margin-left: 0 !important;       /* veld tegen de linkerrand van de kolom */
  margin-right: 0 !important;
  overflow: visible !important;
  display: block !important;
}

/* Stijl en gedrag van het tekstvak (standaard) */
.bredebox textarea.form-control {
  width: 100% !important;          /* vult de container volledig */
  resize: both !important;         /* horizontaal én verticaal schalen */
  max-width: none !important;
  min-width: 200px !important;
  min-height: 80px !important;     /* iets ruimer voor gebruiksgemak */
  box-sizing: border-box !important;
  overflow: auto !important;
}


/*Code 5 */
/* Container breder en flexibel, halfhoog vak */
.halfbredebox {
  width: 90% !important;          /* percentage van breedte van de kolom die wordt gebruikt */
  max-width: none !important;
  flex: 1 1 auto !important;
  margin-left: 0 !important;       /* veld tegen de linkerrand van de kolom */
  margin-right: 0 !important;
  overflow: visible !important;
  display: block !important;
}
/* Stijl en gedrag van het tekstvak (half zo hoog) */
/* De respondent kan in dit geval de hoogte niet aanpassen */
/* Height overruled resize */
/* Aanpassen kan alleen met code in Javascript en daar is het niet belangrijk genoeg voor*/
.halfbredebox textarea.form-control {
  width: 100% !important;          /* vult de container volledig */
  resize: both !important;         /* horizontaal én verticaal schalen */
  max-width: none !important;
  min-width: 200px !important;
  height: 80px !important;     /* half zo hoog als de standaardversie */
  min-height: 80px !important;     /* half zo hoog als de standaardversie */
  box-sizing: border-box !important;
  overflow: auto !important;
}


/*Code 6 */
/*Spinnetjers verwijderen (spinnetjes mag ook) */
/*Bron: Chat GPT */
/* Verberg spinners in alle browsers */
/* Verberg formr's spinner-knoppen */
span.input-buttons.number-input-buttons,
span.input-buttons.number-input-buttons .step-controls,
span.input-buttons.number-input-buttons .step-control {
  display: none !important;
  visibility: hidden !important;
}


/*Code 7 */
/*Checkbox bij afrondingsvraag groter weergeven */
/*Bron: Chat GPT */
input[type="checkbox"] {
    width: 15px;
    height: 15px;
    transform: scale(1.3);  /* eenvoudigste manier om hem groter te maken */
    margin-right: 6px;
}