.builder-form-container {

}

.builder-form {

}

.builder-form .form-title {

}

.builder-form .form-group {
    position: relative;
    margin-bottom: 0;
    padding: 5px;
    height: 100%;
    border: 1px solid transparent;
}

/* eventueel met :not(.form-group-1) */
.builder-form .form-group {
    margin-top:20px;
}

.builder-form .control-label {
    font-weight: normal;
    cursor: pointer;
}

.builder-form .form-control {
    border-radius: 0px;
    box-shadow: none;
    padding:20px;
}

.builder-form .form-control::placeholder {
    background-color: inherit;
}

.builder-form .form-control[disabled], .builder-form .form-control[readonly], .builder-form fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #FFFFFF;
}

.builder-form .form-control :after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
}

.builder-form textarea {
    resize: vertical;
}

.builder-form .btn.dropdown-toggle {
    border-radius: 0px;
    box-shadow: none;
}

.builder-form .btn.dropdown-toggle.btn-default:hover {
    background-color: inherit;
    border-color:#ccc;
    box-shadow: none;
}

.builder-form .btn-group.open .dropdown-toggle {
    box-shadow: none;
    background-color: inherit;
    border-color:#ccc;
}

.builder-form .bootstrap-select > .dropdown-toggle {
    border-radius: 0px;
    box-shadow: none;
    padding:10px;
}

.builder-form .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    padding-left:10px;
}

.builder-form .bootstrap-select.open .dropdown-menu {
    margin-top:7px;
    border-radius:0px;
}

.builder-form .dropdown-menu > li > a {
    padding-top:8px;
    padding-bottom:8px;
}

.builder-form .field-required {
    color: red;
}

.builder-form .btn-file {
    padding: 10px 24px;
}

.builder-form .filename {
    z-index:0;
}

.builder-form .checkbox-group, .builder-form .radio-group {
    margin-bottom:-8px;
}

.builder-form .form-group-checkbox-container {
    padding-top:15px;
}

.builder-form .static-html {
    padding-top:15px;
    padding-bottom:20px;
}

.builder-form .form-group-agreement {
    padding-top:20px;
}

.builder-form .btn-form-submit {
    text-transform:uppercase;
    padding: 12px 24px;
    border-radius: 0px;
}

.builder-form-error-below {
    margin-top:25px;
}

.builder-form-error, .builder-form-send-error, .builder-form-send-success {
    border-radius:0px;
}

/* gestylde checkbox */

/* Customize the label (the container) */
.builder-form .checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /*font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight:normal;
}

/* Hide the browser's default checkbox */
.builder-form .checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.builder-form .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #FFFFFF; /* default achtergrondkleur */
    border: solid #ccc 1px; /* default hoverkleur */
}

/* On mouse-over, add a grey background color */
.builder-form .checkbox-container:hover input ~ .checkmark {
    background-color: #ccc; /* de achtergrondkleur bij hover */
}

/* When the checkbox is checked, add a blue background */
.builder-form .checkbox-container input:checked ~ .checkmark {
    background-color: #FFFFFF; /* de achtergrondkleur bij checked */
}

/* Create the checkmark/indicator (hidden when not checked) */
.builder-form .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.builder-form .checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.builder-form .checkbox-container .checkmark:after {
    left: 8px;
    top: 4px;
    width: 7px;
    height: 13px; /* hoogte rechterhals van de v */
    border: solid #000000; /* de kleur van de v */
    border-width: 0 2px 2px 0; /* de dikte van de v */
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* gestylde radio */

/* The container */
.builder-form .radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /*font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight:normal;
}

/* Hide the browser's default radio button */
.builder-form .radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.builder-form .radio-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.builder-form .radio-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.builder-form .radio-container input:checked ~ .checkmark {
    background-color: #FFFFFF; /* de achtergrondkleur van de radio bij checked */
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.builder-form .radio-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.builder-form .radio-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.builder-form .radio-container .checkmark:after {
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000000; /* de kleur van de stip */
}