/* CSS Document */

/* ENKEL CONTACT VERWIJST NAAR DIT CSS DOCUMENT */

.blauw{
color: #0000ff;
font-size: 11pt;
}

.zilvergrijs{
background-color: #d0c9d0;
}

.insprong_links{
margin-left: 1%;
}

#hoger{
padding-top: 0.5%;
}

/* ruimte tussen velden aanpassen */
input {
margin-top: 2%;
}

#voornaam{
margin-top: 0%;
}

/* info knop verkleinen */
.info {
  width: 44px;
  height: 44px;
  display: inline-block; /* of block, afhankelijk van je layout */
   cursor: pointer; /* geeft altijd duidelijk aan dat het klikbaar is */
  vertical-align: middle;
}
/* VAK OPMERKINGEN dynamisch */

fieldset.veld{
    width: 100%;
    /* max-width: 1300px;   deze weg voor volledige breedte */
    padding: 12px;
    border: 2px solid #999;
    border-radius: 10px;
    box-sizing: border-box;
}

.marge{
margin-right: 4%;
}

/* ELKE UL KRIJGT MOOIE PIJL */
/* PIJL HEEFT GRIJZE ACHTERGROND */

ul.grijs{
list-style-image: url(Pijl_rechts1.png);
}

h3:lang(nl){
color: #0000ff;
font-size: 8pt;
	}

.aanpassen{
max-width: 80%;
}

input[type="text"]{
font-size: 1.15rem;
min-height: 1.55rem;
min-width: 16rem;
margin-bottom: 0.5rem; /* ruimte tussen rijen vergroten */
}

/* Basisstijlen voor de i-icoon in .invoer */
.invoer {
  position: relative;  /* Zorgt ervoor dat het icoon goed gepositioneerd kan worden */
 /*  width: 25%; */
}


/* Standaard instelling voor het icoon op grotere schermen */
.invoer .i-icoon {
  width: 6.5%;  /* Standaard breedte van het icoon */
  height: auto; 
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.3s, fill 0.3s;
}


/* Hover-effecten voor het icoon */
.i-icoon:hover .cirkel {
   fill: #4a4a4a; /* Donkergrijze kleur voor de cirkel bij hover */
    cursor: pointer;
}

.i-icoon:hover .letter {
  fill: #f5ee27;  /* Gele kleur voor de letter 'i' bij hover */
   cursor: pointer;
}


.opmerking1{
    min-width: 100%;            /* Hierdoor wordt het echt responsive */
    min-height: 120px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    font-size: 1rem;
    resize: vertical;       /* hoogte aanpassen toegestaan */
    box-sizing: border-box; /* voorkomt dat padding het breder maakt */
}

/* input[type="submit"]{
font-size: 1.1rem;
} */

input[type="submit"] {
    display: inline-block; /* expliciet */
    cursor: pointer; /* geeft altijd duidelijk aan dat het klikbaar is */
    font-size: 1.1rem;
    border-radius: 4px;
}


input[type="submit"]:hover {
    background-color: #4b545f;
    border-color: #00f;
    border-radius: 4px;
    color: #ff0;
}

@media screen and (max-width: 459px){
.vast_breed{
max-width: 90%;
}
/* ruimte tussen velden aanpassen */
input {
margin-top: 3%;
} 

.rood {
display: none;
}

/* verbergen van info icoon bij smartphone */
/* merkte dat i-icoon bij deze toestellen flow kan verbreken */
/* wat te maken heeft met de beperkte ruimte */
.invoer .i-icoon {
  display: none !important;
}
}