/* Voorinstellingen */

/* Forceert alle tekstlabels en div's binnen het formulier naar oranje */
#fbuilder label, 
#fbuilder .dfield, 
#fbuilder .fform, 
#fbuilder div {
    color: #ff7221 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* Specifiek voor de labels bij telefoon- en adresvelden */
#fbuilder .label label, 
#fbuilder .field label {
    color: #ff7221 !important;
}

/* De hoofdtitels boven de invulvelden */
#fbuilder .fform label, 
#fbuilder .label,
#fbuilder .lbel {
    color: #ff7221 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* Instructietekst of kleine uitleg onder/boven het veld */
#fbuilder .instructions {
    color: #ff7221 !important;
    font-style: italic !important;
}

/* De asteriks (*) bij verplichte velden */
#fbuilder .r {
    color: #ffffff !important; /* Wit valt goed op voor verplichte velden */
}

/* De invoervelden (tekstvakken, e-mail, telefoon) */
#fbuilder input[type="text"], 
#fbuilder input[type="email"], 
#fbuilder input[type="tel"], 
#fbuilder textarea, 
#fbuilder select {
    background-color: #2c2e36 !important;
    color: #ff7221 !important;
    border: 1px solid #ffffff !important;
    font-weight: bold !important;
    padding: 10px !important;
    border-radius: 4px !important;
}


/* De kleur van de tekst terwijl je typt (voor de zekerheid) */
#fbuilder input:focus, 
#fbuilder textarea:focus {
    outline: none !important;
    border-color: #ff7221 !important; /* Rand wordt oranje als je erin klikt */
}

/* De labels (de tekst BOVEN de vakjes, zoals "Naam") */
#fbuilder .label {
    color: #ff7221 !important;
    font-weight: bold !important;
}

/* Verwijdert de dubbele tekst/schaduw effecten */
#fbuilder .ui-datepicker *, 
#fbuilder .ui-datepicker-header *, 
#fbuilder .ui-datepicker td a, 
#fbuilder .ui-datepicker th {
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Forceert een strakke oranje kleur zonder gloed */
#fbuilder .ui-datepicker td a, 
#fbuilder .ui-datepicker th,
#fbuilder .ui-datepicker-title {
    color: #ff7221 !important;
    -webkit-text-fill-color: #ff7221 !important; /* Voor extra dekking in sommige browsers */
}

/* De volledige achtergrond van de kalender */
#fbuilder .ui-datepicker-inline, 
#fbuilder .ui-datepicker {
    background-color: #2c2e36 !important;
    border: 1px solid #ffffff !important;
}

/* De bovenkant (maand/jaar gedeelte en titel) */
#fbuilder .ui-datepicker-header,
#fbuilder .ui-datepicker-title {
    background-color: #2c2e36 !important;
    color: #ff7221 !important;
    border-bottom: 1px solid #ffffff !important;
}

/* De namen van de weekdagen (ma, di, etc.) */
#fbuilder .ui-datepicker th {
    background-color: #2c2e36 !important;
    color: #ff7221 !important; /* Aangepast van wit naar oranje */
}

/* 1. Wis alle oude resten van de zwarte pijlen */
#fbuilder .ui-datepicker-prev, 
#fbuilder .ui-datepicker-next,
#fbuilder .ui-datepicker-prev span, 
#fbuilder .ui-datepicker-next span {
    background: none !important;
    background-image: none !important;
    border: none !important;
    transform: none !important;
}

#fbuilder .ui-datepicker-prev span, 
#fbuilder .ui-datepicker-next span {
    display: none !important;
}

/* 2. De witte pijlen op de juiste plek forceren */
#fbuilder .ui-datepicker-prev::before,
#fbuilder .ui-datepicker-next::before {
    color: #ffffff !important;
    font-size: 28px !important; /* Iets kleiner voor een betere balans */
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    position: absolute !important;
    display: block !important;
    transform: none !important;
    line-height: 1 !important;
    cursor: pointer !important;

    /* Aangepast naar 4px om ze precies in het midden te hangen */
    top: 4px !important; 
}

/* De linker pijl */
#fbuilder .ui-datepicker-prev::before {
    content: '❮' !important;
    left: 15px !important;
}

/* De rechter pijl */
#fbuilder .ui-datepicker-next::before {
    content: '❯' !important;
    right: 15px !important;
}

/* 3. Kleur verandert naar oranje bij aanwijzen */
#fbuilder .ui-datepicker-prev:hover::before, 
#fbuilder .ui-datepicker-next:hover::before {
    color: #ff6600 !important;
}