/* ==================================================
   CERADOS AFSPRAAKFORMULIER – SCHONE CSS
================================================== */

selector {
    font-family: "Roboto", Sans-serif !important;
}

#fbuilder,
#fbuilder *,
#fbuilder *::before,
#fbuilder *::after {
    box-sizing: border-box !important;
}

#fbuilder {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    font-family: "Roboto", Sans-serif !important;
    text-align: left !important;
}


/* ==================================================
   OUDE FLOATS EN BREEDTES RESETTEN
================================================== */

#fbuilder .fields,
#fbuilder .dfield,
#fbuilder .pbreak,
#fbuilder .ui-datepicker-inline,
#fbuilder .slots {
    float: none !important;
    clear: both !important;
}

#fbuilder .fields,
#fbuilder .dfield,
#fbuilder .pbreak {
    width: 100% !important;
    max-width: 100% !important;
}


/* ==================================================
   DIENSTENKEUZE VERBERGEN
================================================== */

#fbuilder .ahbfield_service,
#fbuilder .ahbfield_service *,
.ahbfield_service {
    display: none !important;
}


/* ==================================================
   LABELS EN LOSSE STERRETJES VERBERGEN
================================================== */

#fbuilder .fields > label,
#fbuilder .top_aligned .fields > label,
#fbuilder label .r,
#fbuilder .r {
    display: none !important;
}


/* ==================================================
   KALENDER LINKS UITLIJNEN EN COMPACT MAKEN
================================================== */

.ahb_m #fbuilder .ui-datepicker-inline,
#fbuilder .ui-datepicker-inline {
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.ahb_m #fbuilder .ui-datepicker,
#fbuilder .ui-datepicker {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}


/* Kalenderkop */

.ahb_m #fbuilder .ui-datepicker-header {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 42px !important;
    border: 0 !important;
    background: transparent !important;
}

.ahb_m #fbuilder .ui-datepicker-title {
    margin: 0 !important;
    color: #111111 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 42px !important;
    text-align: left !important;
}


/* Vorige en volgende maand */

.ahb_m #fbuilder .ui-datepicker-prev,
.ahb_m #fbuilder .ui-datepicker-next {
    top: 3px !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

.ahb_m #fbuilder .ui-datepicker-prev {
    left: 0 !important;
}

.ahb_m #fbuilder .ui-datepicker-next {
    right: 0 !important;
}


/* Kalendertabel */

.ahb_m #fbuilder .ui-datepicker table {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.ahb_m #fbuilder .ui-datepicker table,
.ahb_m #fbuilder .ui-datepicker thead,
.ahb_m #fbuilder .ui-datepicker tbody,
.ahb_m #fbuilder .ui-datepicker tr,
.ahb_m #fbuilder .ui-datepicker th,
.ahb_m #fbuilder .ui-datepicker td {
    border: 0 !important;
    background: transparent !important;
}

.ahb_m #fbuilder .ui-datepicker th {
    height: 30px !important;
    padding: 0 !important;
    color: #555555 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

.ahb_m #fbuilder .ui-datepicker td {
    height: 35px !important;
    padding: 1px !important;
    text-align: center !important;
}

.ahb_m #fbuilder .ui-datepicker-calendar .ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #444444 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.ahb_m #fbuilder .ui-datepicker-calendar .ui-state-default:hover {
    background: #eef3ec !important;
    color: #111111 !important;
}

.ahb_m #fbuilder .ui-datepicker-calendar .ui-state-active,
.ahb_m #fbuilder .ui-datepicker-calendar .ui-state-highlight {
    background: #8AAF7A !important;
    color: #ffffff !important;
}

.ahb_m #fbuilder .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
    color: #bcbcbc !important;
    background: transparent !important;
}


/* ==================================================
   TIJDSLOTEN LINKS UITLIJNEN
================================================== */

#fbuilder .slots {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

#fbuilder .slots::before {
    display: none !important;
    content: none !important;
}


/* Datum of tekst boven de tijdsloten verbergen */

#fbuilder .slots > span,
#fbuilder .slots > p,
#fbuilder .slots > strong,
#fbuilder .slots > h2,
#fbuilder .slots > h3,
#fbuilder .slots > h4,
#fbuilder .slots .date,
#fbuilder .slots .slot-date,
#fbuilder .slots .selected-date {
    display: none !important;
}

#fbuilder .slots > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#fbuilder .slots > div a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    border: 1px solid #dedede !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#fbuilder .slots > div a:hover {
    border-color: #8AAF7A !important;
    background: #eef3ec !important;
}

#fbuilder .slots > div.htmlUsed a,
#fbuilder .slots > div.currentSelection a,
#fbuilder .slots .htmlUsed.currentSelection a {
    border-color: #8AAF7A !important;
    background: #8AAF7A !important;
    color: #ffffff !important;
}


/* ==================================================
   GESELECTEERDE AFSPRAAK EN ANNULEREN VERBERGEN
================================================== */

#fbuilder .ahb_list,
#fbuilder .ahb_list_service,
#fbuilder .ahb_list_wrapper,
#fbuilder .ahb_list_container,
#fbuilder .ahb_list_service_container {
    display: none !important;
}


/* ==================================================
   FORMULIER VELDEN
================================================== */

#fbuilder .pbreak {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#fbuilder .fields {
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

#fbuilder .dfield {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#fbuilder input[type="text"],
#fbuilder input[type="email"],
#fbuilder input[type="tel"],
#fbuilder input[type="number"],
#fbuilder input[type="date"],
#fbuilder input[type="search"],
#fbuilder input[type="url"],
#fbuilder select,
#fbuilder textarea,
#fbuilder .large,
#fbuilder .medium,
#fbuilder .small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 11px 15px !important;
    border: 1px solid #dedede !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-family: "Roboto", Sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

#fbuilder input::placeholder,
#fbuilder textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

#fbuilder input:focus,
#fbuilder select:focus,
#fbuilder textarea:focus {
    border-color: #12697a !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ==================================================
   BLAUWE KNOP
================================================== */

#fbuilder .pbSubmit,
#fbuilder .pbreak .pbNext,
#fbuilder .pbreak .pbPrevious {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    margin: 4px 0 0 0 !important;
    padding: 15px 65px 15px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #12697a !important;
    color: #ffffff !important;
    font-family: "Roboto", Sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#fbuilder .pbSubmit {
    background-image:
        linear-gradient(45deg, transparent 43%, #ffffff 44%, #ffffff 57%, transparent 58%),
        linear-gradient(-45deg, transparent 43%, #ffffff 44%, #ffffff 57%, transparent 58%),
        linear-gradient(#ffffff, #ffffff) !important;

    background-size:
        14px 14px,
        14px 14px,
        26px 2px !important;

    background-position:
        calc(100% - 25px) calc(50% - 5px),
        calc(100% - 25px) calc(50% + 5px),
        calc(100% - 30px) 50% !important;

    background-repeat: no-repeat !important;
}

#fbuilder .pbSubmit:hover,
#fbuilder .pbreak .pbNext:hover,
#fbuilder .pbreak .pbPrevious:hover {
    background-color: #0d5664 !important;
}


/* ==================================================
   MOBIEL
================================================== */

@media only screen and (max-width: 767px) {

    .ahb_m #fbuilder .ui-datepicker-inline,
    #fbuilder .slots {
        max-width: 100% !important;
    }

    .ahb_m #fbuilder .ui-datepicker-title {
        font-size: 22px !important;
    }

    .ahb_m #fbuilder .ui-datepicker th {
        font-size: 12px !important;
    }

    .ahb_m #fbuilder .ui-datepicker td {
        height: 33px !important;
    }

    .ahb_m #fbuilder .ui-datepicker-calendar .ui-state-default {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    #fbuilder .slots {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #fbuilder .slots > div a {
        min-height: 36px !important;
        font-size: 13px !important;
    }
}
/* Hele kalender links uitlijnen */

#fbuilder .ui-datepicker,
#fbuilder .ui-datepicker-inline {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Maandtitel verbergen */

#fbuilder .ui-datepicker-title {
    display: none !important;
}

/* Header kleiner maken zodat er geen lege ruimte overblijft */

#fbuilder .ui-datepicker-header {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 35px !important;
    margin-bottom: 8px !important;
}

/* Pijlen bovenaan laten staan */

#fbuilder .ui-datepicker-prev,
#fbuilder .ui-datepicker-next {
    top: -4px !important;
}