i.fas.fa-upload::before,
label[id^=bfGroupLabel10],
label[id^=bfGroupLabel279],
label[id^=bfGroupLabel509]  {
    background-color: #fff;
    border: 1px solid var(--grey);
}

i.fas.fa-upload::before {
    float: left;
    width: 30px;
    height: 30px;
    font-family: visualfieldicons;
    content: " \f02f";
    font-style: normal;
    font-size: 20px;
    border-radius: 5px;
    padding: 5px;
    color: #000;
    text-align: center;
    line-height: 1.5
}

.bfQuickMode fieldset .bfbs5-row,
.bfQuickMode fieldset .row,
.bfQuickMode section .bfbs5-row,
.bfQuickMode section .row {
    margin: 0 !important; 
    padding: 0
}

.bfFileQueueItem {
    border: 0 !important;
    background-color: var(--lightgrey) !important;
    margin: 5px 0 !important;
    padding: 10px;
    border-radius: 5px;
    font-family: Roboto;
    font-size: 14px
}

i.fas.fa-question-circle {
    display: none
}

label[id^=bfGroupLabel10],
label[id^=bfGroupLabel279],
label[id^=bfGroupLabel509] {
    width: 100px;
    height: 100px;
    min-width: unset !important;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center 20px;
    color: #000;
    border-radius: 5px;
    text-align: center;
    position: relative;
    padding-top: 60px;
    font-size: 12px !important;
    font-weight: 500;
    margin-bottom: 10px
}

label[id^=bfGroupLabel10] input,
label[id^=bfGroupLabel279] input,
label[id^=bfGroupLabel509] input {
    position: absolute !important;
    left: 10px;
    top: 10px;
    margin: 0 !important
}

label#bfGroupLabel10 {
    background-image: url(../img/tab-website.svg)
}

label#bfGroupLabel10_1 {
    background-image: url(../img/tab-webshop.svg)
}

label#bfGroupLabel10_2 {
    background-image: url(../img/tab-bedrijfsite.svg)
}

label#bfGroupLabel10_3 {
    background-image: url(../img/tab-donatiesite.svg)
}

label#bfGroupLabel10_4 {
    background-image: url(../img/tab-forum.svg)
}

label#bfGroupLabel10_5 {
    background-image: url(../img/tab-nieuws.svg)
}

label#bfGroupLabel10_6 {
    background-image: url(../img/tab-blog.svg)
}

label#bfGroupLabel10_7 {
    background-image: url(../img/tab-project.svg)
}

label#bfGroupLabel10_8 {
    background-image: url(../img/tab-portfolio.svg)
}

label#bfGroupLabel10_9 {
    background-image: url(../img/tab-intranet.svg)
}

label#bfGroupLabel279 {
    background-image: url(../img/tab-visitekaartje.svg)
}

label#bfGroupLabel279_1 {
    background-image: url(../img/tab-briefpapier.svg)
}

label#bfGroupLabel279_2 {
    background-image: url(../img/tab-folder.svg)
}

label#bfGroupLabel279_3 {
    background-image: url(../img/tab-flyer.svg)
}

label#bfGroupLabel279_4 {
    background-image: url(../img/tab-brochure.svg)
}

label#bfGroupLabel279_5,
label#bfGroupLabel509_3 {
    background-image: url(../img/tab-banner.svg)
}

label#bfGroupLabel279_6 {
    background-image: url(../img/tab-reclamebord.svg)
}

label#bfGroupLabel279_7 {
    background-image: url(../img/tab-belettering.svg)
}

label#bfGroupLabel509 {
    background-image: url(../img/tab-grafiek.svg)
}

label#bfGroupLabel509_1 {
    background-image: url(../img/tab-illustratie.svg)
}

label#bfGroupLabel509_2 {
    background-image: url(../img/tab-kaart-active.svg)
}

label#bfGroupLabel509_4 {
    background-image: url(../img/tab-advertentie.svg)
}

label#bfGroupLabel509_5 {
    background-image: url(../img/tab-animatie.svg)
}

#bfElemWrap508,
#bfElemWrap9,
#bfElemWrap95 {
    position: relative;
    padding-left: 30px;
    height: 20px
}

#bfElemWrap508 input,
#bfElemWrap9 input,
#bfElemWrap95 input {
    position: absolute;
    left: 0;
    top: 0
}

.bfPage section {
    border: 1px solid var(--lightgrey);
    width: 100%;
    float: left;
    padding: 20px 40px !important;
    margin: 10px 0;
    border-radius: 10px
}

.bfPage label {
    font-family: Roboto;
    font-size: 14px
}

.bfPage input[type=text],
.bfPage textarea {
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--grey);
    width: 400px
}

.bfPage textarea {
    width: 100%
}

.bfPage h2 {
    font-family: 'Bree Serif', serif !important;
    margin: 20px 0 !important;
    font-size: 30px;
}

.bfQuickMode .bfElemWrap {
    margin: 15px 0 !important
}

label#bfLabel508,
label#bfLabel9,
label#bfLabel95 {
    font-size: 18px;
    font-weight: 700;
    width: 100% !important
}

.radio-form-group .radio-inline {
    float: left;
    clear: left;
    margin: 5px 0
}

.bfPage select {
    border: 1px solid var(--lightgrey);
    border-radius: 5px;
    padding: 10px;
    font-size: 14px
}

.form-label {
    width: 300px !important
}

label[id^=bfGroupLabel216],
label[id^=bfGroupLabel534] {
    position: relative;
    margin: 5px 0;
    width: 100%
}

label[id^=bfGroupLabel216] input {
    position: absolute !important;
    top: 5px;
    left: 0
}

label[id^=bfGroupLabel216]::after {
    padding-left: 25px;
    width: 20px;
    height: 20px;
    float: left;
    font-family: fontello;
    font-style: normal
}

label#bfGroupLabel216::after {
    content: " \e80b"
}

label#bfGroupLabel216_1::after {
    content: " \e896"
}

label#bfGroupLabel216_2::after {
    content: " \e924"
}

label#bfGroupLabel216_3::after {
    content: " \229f"
}

label#bfGroupLabel216_4::after {
    content: " \f1e0"
}

label#bfGroupLabel216_5::after {
    content: " \f1d8"
}

label#bfGroupLabel216_6::after {
    font-family: visualfieldicons;
    content: " \f088"
}

label#bfGroupLabel216_7::after {
    content: " \f27b"
}

label#bfGroupLabel216_8::after {
    content: " \f27a"
}

label#bfGroupLabel216_9::after {
    font-family: visualfieldicons;
    content: " \f020"
}

label#bfGroupLabel216_10::after {
    content: " \f298"
}

label#bfGroupLabel216_11::after {
    content: " \f278"
}

label#bfGroupLabel216_12::after {
    font-family: visualfieldicons;
    content: " \e81c"
}

label#bfGroupLabel216_13::after {
    font-family: visualfieldicons;
    content: " \e802"
}

.bfPage button {
    background: var(--aqua);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 10px 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 30px;
}

input#ff_elem3 {
    border: 1px solid var(--darkgrey);
    border-radius: 5px;
    padding: 10px 15px;
    width: 400px;
    font-size: 14px
}

@media screen and (max-width:1680px) {
    .form-label {
        width: 100px !important
    }
}

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

    .bfQuickMode .bfbs5-nonform-control,
    .bfQuickMode .nonform-control,
    .form-label {
        width: 100% !important
    }

    .form-label {
        margin-bottom: 10px
    }

    label#bfLabel508,
    label#bfLabel9,
    label#bfLabel95 {
        margin-bottom: 0
    }

    .bfPage input[type=text],
    .bfPage textarea,
    input#ff_elem3 {
        width: 100%;
        max-width: 100% !important
    }

    section#grafischevormgeving,
    section#sectiebeeldproductie,
    section#sectiewebsite {
        padding: 0 20px !important
    }

    .bfPage label {
        font-size: 12px
    }
}

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

    label[id^=bfGroupLabel10],
    label[id^=bfGroupLabel279],
    label[id^=bfGroupLabel509] {
        width: calc(100% / 2 - 5px) !important
    }

    label[id^=bfGroupLabel10]:nth-child(odd),
    label[id^=bfGroupLabel279]:nth-child(odd),
    label[id^=bfGroupLabel509]:nth-child(odd) {
        margin-right: 5px !important
    }

    label[id^=bfGroupLabel10]:nth-child(2n),
    label[id^=bfGroupLabel279]:nth-child(2n),
    label[id^=bfGroupLabel509]:nth-child(2n) {
        margin-right: 0 !important;
        margin-left: 5px !important
    }
}