@media screen and (min-width: 10em){
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=tel]:focus,
    input[type=number]:focus{
        border-color: #008cbe;
        outline: 0;
    }

    form div:after{
        content: "";
        display: table;
        clear: both;
    }

    fieldset{
        border: none;
        padding: 20px 0;
        border-radius: 4px;
        margin: 0;
        transition: border 0.1s;
    }

    fieldset label {
        display: inline-block;
    }

    legend {
        font-size: 1em;
        margin: 0 0 15px 0;
        padding: 0;
        float:left;
        width: 100%;;
    }

    fieldset > div{
        display: block;
        vertical-align: middle;
        margin-bottom: 10px;
        float: left;
    }

    fieldset > div:last-of-type{
        margin-bottom: 0;
    }

    fieldset > div label{
        float: right;
        margin-right: 15px;
    }

    .wrapper{
        margin: 0 auto;
        max-width: 50em;
    }

    form span[role=alert]{
        color: #e56c00;
        margin-top: 10px;
        margin-left: 0;
    }

    form span[data-alert=group] {
        margin-bottom: 10px;
    }

    form span[data-alert=datum] {
        margin-left: 10px;
        vertical-align: bottom;
        display: inline-block;
    }

    form span[data-alert=group] ~ div fieldset,
    form span[data-alert=recipients] + fieldset{
        border: 2px solid #ff0000;
    }

    form > div{
        margin-bottom: 15px;
    }

    form div{
        position:relative;
    }

    label,
    form p,
    .formcontainer .label {
        display: inline-block;
        font-weight: normal;
        margin: 0 0 7px 0;
        font-size: 0.92em;
        line-height: 24px;
        /*width:200px;*/
        color: #262626;
    }

    fieldset label {
        width: inherit;
    }

    label[class*=required]:not([class~=enhanced]):after,
    .label[class*=required]:after,
    fieldset[class*=required] legend:after,
    label[class*=required] .label:after{
        content: " *";
        color: #262626;
        font-size: 90%;
    }

    form button[id*=add],
    form button[id*=remove]{
        border: none;
        float:right;
        background: none;
        width: 45px;
        height: 45px;
        padding: 0;
        position: relative;
        vertical-align: top;
        cursor: pointer;
        margin-left: 5px;
    }

    form button[id*=remove]{
        float:right;
    }

    form div[id^=item]{
        border-bottom: 1px solid #E7E3E7;
        padding-left: 120px;
        opacity: 0;
        overflow: hidden;
    }

    form div[id^=item] span{
        float:left;
        display: block;
        line-height: 45px;
        vertical-align: middle;
        font-size: 1.125em;
    }

    form div[id^=item] span:first-of-type{
        min-width: 495px;
    }

    form button[id*=add]:before,
    form button[id*=remove]:before{
        display: block;
        content: "\f067";
        font-family: "fontawesome";
        color: #49af57;
        font-size: 2.875em;
        line-height: 1;
        font-weight: bold;
        position: relative;
        top: 0;
    }

    #form button .icon{
        color: #fff;
        position: absolute;
        right: 12px;
        top: 50%;
        text-align: center;
        margin-top: -10px;
    }

    #form button .icon:before {
        display: inline-block;
        width: 1em;
        line-height: 16px;
    }

    #form button .icon-arrow-right:before {
        content: '\e832';
    }

    #form [type=submit]{
        border: 1px solid #008cbe;
        padding: 6px 12px;
        background-color: #008cbe;
        color: rgb(255, 255, 255);
        font-size: 16px;
        line-height: 22.8571px;
        cursor:pointer;
        border-radius: 2px;
        position: relative;
        width: 100%;
        text-align: left;
    }

    #form [type=submit]:disabled{
        background-color: #7ec6e0;
        border: #7ec6e0;
    }

    .modal_contentBox .dropdown {
        width: 230px;
    }

    main button[role=button]{
        position:relative;
    }

    *::-ms-backdrop, [type=submit]:after{
        content: "\f138";
        left: 150px;
        right: 0;
    }

    form button[id*=remove]:before{
        content:"\f00d";
        font-family: "fontawesome";
        color: #ff0000;
        top: -5px;
    }

    form button[id*=add]:hover:before{
        color: #79cf87;
    }

    form button[id*=remove]:hover:before{
        color: #ff5555;
    }

    form div[id^=item] span{
        display: inline-block;
        vertical-align: middle;
    }

    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=number],
    textarea{
        padding: 6px 8px;
        font-size: 14px;
        width: 100%;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        height: 34px;
        color: #525151;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    input[type=text]::selection,
    input[type=email]::selection,
    input[type=tel]::selection,
    input[type=number]::selection,
    textarea::selection{
        background-color: #75b3d4;
        color: #fff;
        font-family: "Roboto", sans-serif;
    }

    input:-webkit-autofill {
        color: #2a2a2a !important;
    }

    textarea{
        width: 50%;
        display: inline-block;
        vertical-align: middle;
        height: 175px;
        resize: none;
    }

    [aria-hidden=true]{
        display: none;
    }

    .message {
        font-weight: bold;
        color: #641c68;
    }

    body > div[aria-role=alert]{
        position:absolute;
        box-shadow: 1px 1px 5px hsla(0,0%,0%,0.6);
        top:40%;
        left:40%;
        width:400px;
        padding:30px;
        z-index: 99;
        background-color: hsl(0,0%,0%);
    }

    body > div[aria-role=alert] span{
        display: block;
        text-align: center;
        margin-bottom:20px;
        color: hsl(0,0%,100%);
    }

    label span[role=alert]{
        font-size: 0.875em;
    }

    body > div[aria-role=alert] span b{
        color: hsl(40,100%,50%);
    }

    body > div[aria-role=alert] span:last-of-type{
        margin:0;
    }

    /** TIP MESSAGE **/
    .tip{
        position: absolute;
        z-index: 999;
        padding:10px;
        background-color:#fffbb8;
        color:#333;
        border: 1px solid #ffc20d;
        opacity:0;
        max-width: 300px;
        -webkit-filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,0.3));
    }

    /** INVALID **/
    input[type=text][aria-invalid=true],
    input[type=tel][aria-invalid=true],
    input[type=email][aria-invalid=true],
    input[type=checkbox][aria-invalid=true],
    textarea[aria-invalid=true]{
        border: 1px solid #e56c00;;
    }

    /** Errors **/
    fieldset > .error  label {
        color: #DF653E;
    }

    .serverError{
        display:block;
        color:hsl(0,100%,50%);
        padding:20px 0;
        font-weight:bold;
    }

    /** Loader **/
    .loader{
        position:absolute;
        z-index:9999;
        top:45%;
        left:35%;
        padding:20px;
        /*box-shadow: 0 0 5px hsla(0,0%,0%,0.5);
        background-color:#007BC8;*/
        background-color: rgba(255, 255, 255, 0.9);
        color:#00a984;
        font-weight:bold;
    }

    .loader .fa-cog,
    .loader .fa-circle-o-notch{
        width: 50px;
        display:block;
        margin: 0 auto;
        font-size:50px;
        margin-bottom: 10px;
    }

    .loader .fa-spin {
        animation: fa-spin 1s infinite linear;
        transform-origin: 50% 48.3%;
    }

    [data-group="geslacht"] > legend {
        border: none;
    }

    [data-group="geslacht"] input[type=radio] {
        margin: 4px 10px 0 0;
    }
}

@media screen and (min-width:30em){
    select,
    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=number]{
        width: calc(100% - 200px)
    }

    form span[role=alert]{
        margin-left: 200px;
    }

    #form [type=submit] {
        min-width: 168px;
        width: auto;
    }

    legend {
        width: 200px;
    }
}
@media screen and (min-width:75em){ }