form[id^="kontaktformular"] > div,
form[id^="kontaktformular"] > .form-group > .input,
form[id^="kontaktformular"] > .form-group div[id^="kontaktformular"] .form-group {
    display: flex;
    margin-bottom: 10px;
}

form[id^="kontaktformular"] > .form-group input[id^="kontaktformular"],
form[id^="kontaktformular"] > .form-group select[id^="kontaktformular"] {
    padding: 5px 10px;
    border: 1px solid rgb(177, 187, 196);
    border-radius: 3px;
}

/* Select Button entfernen */
form[id^="kontaktformular"] > .form-group select[id^="kontaktformular"],
form[id^="kontaktformular"] > .form-group select[id^="kontaktformular"] option {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    cursor: pointer;
    z-index: 9;
    background: none;
    padding-left: 5px;
}
/* Standard-Pfeil beim IE entfernen */
form[id^="kontaktformular"] > .form-group select[id^="kontaktformular"]::-ms-expand {
    display: none;
}

form[id^="kontaktformular"] > .form-group label[for*="singleselect"] + div.input {
    position: relative;
    background: #fff;
    border-radius: 3px;
}
form[id^="kontaktformular"] > .form-group label[for*="singleselect"] + div.input::after {
    position: absolute;
    right: 10px;
    font-family: FontAwesome;
    content: "\f078";
    font-size: 16px;
    color: rgb(0, 67, 83);
    top: 5px;
    cursor: pointer;
}



form[id^="kontaktformular"] > .form-group label,
form[id^="kontaktformular"] > .form-group label span {
    font-family: Arial;
}
/*
.requiredLabel:after {
    content:"*";
    color: rgb(255, 72, 12);
    margin-left: 2px;
}
*/
form[id^="kontaktformular"] > .form-group > .input,
form[id^="kontaktformular"] > .form-group > .input > *,
form[id^="kontaktformular"] nav.form-navigation {
    width: 100%;
}

form[id^="kontaktformular"] > .form-group label,
form[id^="kontaktformular"] > .form-group .control-label,
form[id^="kontaktformular"] .actions .placeholder {
    width: 300px;
    padding-right: 10px;
}
form[id^="kontaktformular"] .form-group .radio label {
    width: auto;
}

form[id^="kontaktformular"] .form-group .radio {
    margin-right: 50px;
}
form[id^="kontaktformular"] .form-group .radio:last-child {
    margin-right: 0;
}


/* Custom Style - Radio Button */
/* The container */
form[id^="kontaktformular"] label[for*="radiobutton"] {
    display: block;
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

form[id^="kontaktformular"] label[for*="radiobutton"] input[type="radio"] {
    cursor: pointer;
    margin-right: 10px;
}


/* Create a custom radio button */
form[id^="kontaktformular"] label[for*="radiobutton"] .checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid rgb(177, 187, 196);
}

/* On mouse-over, add a grey background color */
form[id^="kontaktformular"] label[for*="radiobutton"]:hover input[type="radio"] ~ .checkmark {
    background-color: #fff;
}

/* When the radio button is checked, add a blue background */
form[id^="kontaktformular"] label[for*="radiobutton"] input[type="radio"]:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
form[id^="kontaktformular"] label[for*="radiobutton"] input[type="radio"] ~ .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
form[id^="kontaktformular"] label[for*="radiobutton"] input[type="radio"]:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
form[id^="kontaktformular"] label[for*="radiobutton"] .checkmark:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(0, 67, 83);
}


/************/
/* TEXTAREA */
/************/

form[id^="kontaktformular"] .input textarea[id$="message"] {
    border: 1px solid rgb(177, 187, 196);
    border-radius: 3px;
    min-height: 150px;
}



/***********/
/* BUTTON */
/**********/
form[id^="kontaktformular"] .btn-toolbar .btn-primary {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    font-family: Arial;
    padding: 10px 50px;
    border-radius: 3px;
    margin-top: 15px;
    transition: 0.3s;
    color: #004352 !important;
    background: transparent;
    border: 2px solid #004352;
    text-shadow: none;
}
form[id^="kontaktformular"] .btn-toolbar .btn-primary:hover {
    transition: 0.3s;
    color: white !important;
    background-color: #004352;
    border: 2px solid #004352;
}

/* HINWEIS TEXT */
form[id^="kontaktformular"] .clearfix {
    margin-top: 50px;
}

.starSymbol {
    color: rgb(255, 72, 12);
}


/* ERROR Meldungen */
form[id^="kontaktformular"] .error.help-block {
    color: red;
}

form[id^="kontaktformular"] > div.has-error > .input  {
    flex-direction: column;
}

form[id^="kontaktformular"] > div.has-error input  {
    box-shadow: 0 0 0.05em 0.1em #ff0b0b;
}


/* Datenschutzerklärung */
form[id^="kontaktformular"] .form-group .input.checkbox .form-check-label {
    width: auto;
}



@media (max-width: 640px) {

    form[id^="kontaktformular"] div[id*="radiobutton"] .form-group {
        flex-direction: column;
    }
    form[id^="kontaktformular"] div[id*="radiobutton"] .form-group .radio {
        margin-bottom: 7px;
    }
    form[id^="kontaktformular"] div[id*="radiobutton"] .form-group .radio:last-child {
        margin-bottom: 0;
    }

}