/* Format der Placeholder */
input:focus::-webkit-input-placeholder { color:#999; font-weight: 300; text-align: right; padding-right: 4em; }
input:focus:-moz-placeholder { color:#999; font-weight: 300; text-align: right; padding-right: 4em; }
input:focus::-moz-placeholder { color:#999; font-weight: 300; text-align: right; padding-right: 4em; }
input:focus:-ms-input-placeholder { color:#999; font-weight: 300; text-align: right; padding-right: 4em; }

input::-webkit-input-placeholder { color:#999; font-weight: 300;  padding-right: 2em; }
input:-moz-placeholder { color:#999; font-weight: 300;  padding-right: 2em; }
input::-moz-placeholder { color:#999; font-weight: 300;  padding-right: 2em; }
input:-ms-input-placeholder { color:#999; font-weight: 300;  padding-right: 2em; }



/*
input[type="text"]
input[type="button"]
input[type="password"]
input[type="number"]
input[type="email"]
*/
.container .pull-right { float: right;}

h1,h2,h3,h4 {font-size: 1.5rem;font-weight: 300; margin-top: 1rem; margin-bottom: 1rem;}
h1,h2,h3,h4  {background-color: rgb(2, 109, 187);padding: 1rem;color: white;margin: auto;}


/* Abstand derder Ãœberschriften  */
h1,h2,h3,h4 { margin-top: 0rem;margin-top: 2rem;}


.background-primary {
    background-color: rgb(2, 109, 187);
    padding: 1rem;
    color: white;
    
}


/* Ãœberschriften positionieren */
@media (max-width: 576px) {

}

@media (min-width: 576px) and (max-width: 768px) {
    h1,h2,h3,h4 { padding-left: calc((100vw - 520px)/2);}
}

@media (min-width: 768px) and (max-width: 992px) {
    h1,h2,h3,h4 { padding-left: calc((100vw - 720px)/2);}
}

@media (min-width: 992px) and (max-width: 1200px) {
    h1,h2,h3,h4 { padding-left: calc((100vw - 960px)/2);}
}

@media (min-width: 1200px)                        {

    h1,h2,h3,h4 { padding-left: calc((100vw - 1140px)/2);}
}







/* org-name */

.head-form-name  {
    margin-top: 0rem;margin-top: 0rem;
}
.head-form-name h1 {
    margin-top: 0rem;margin-top: 0rem;
}

.spacer { margin-top: 1rem; margin-bottom: 1rem;}


.container input {
    color: rgb(2, 109, 187);
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.submit input {
     background: rgb(2, 109, 187);
    color: white;
}


.container input[type="text"] {
    width: 90%;
}

.container textarea {
    width: 90%;
}

/* Anmerkung */
#FACH_ZUSATZ1 textarea {
    height: 4rem;
    outline: none;
}


.container input[type="text"] {
    font-size: 1rem;
    padding: .25rem;
    padding-left: 1rem;
    border: 1px transparent;
    border-radius: .25rem;
    outline: none;
}

.container textarea {
    font-size: 1rem;
    padding: .25rem;
    padding-left: 1rem;
    border: 1px transparent;
    border-radius: .25rem;
    outline: none;
    height: 8rem;
    max-heignt: 8rem;
}
.container .fielderror {
    color: rgb(2, 109, 187);
    background-color: rgba(10,10,150,.1);
    border-color: #f8f9fa;
}
.container .error {
    color: rgb(255, 30, 30);
    
}
.container textarea {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.container .conditionalMandatory {display: inline-flex;padding-left: .5rem;}

/* Abstand Text input */
 .container {padding-top: .5rem;}
/* Beschreibung links */
.container .desc_left { width: 100%;   font-weight: 600; }



/* test */
@media (min-width: 200px) and (max-width: 576px) {
    .container .desc_left {
/*        background: #efefef;
        border-bottom: 1px solid black;
        padding: .2rem;
        padding-left: .5rem;*/
    }
    /* placeholder text kleiner */
    input::-webkit-input-placeholder {font-weight: 300;  padding-right: 1em; }
    input:-moz-placeholder { font-weight: 300;  padding-right: 1em; }
    input::-moz-placeholder { font-weight: 300;  padding-right: 1em; }
    input:-ms-input-placeholder { font-weight: 300;  padding-right: 1em; }
    
    input::-webkit-input-placeholder {font-weight: 300; }
    input:-moz-placeholder  {font-weight: 300; }
    input::-moz-placeholder  {font-weight: 300; }
    input:-ms-input-placeholder  {font-weight: 300;}
    
    /* mobile bootstrap-select */
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
     max-width: 90%;
    }
    
    /* Smartfone breite der bootstrap-select */
    .bootstrap-select>.dropdown-toggle {    width: calc(100vw - 30px - 30px);}

    /* Smartfone alles größer */
    body { font-size: 1.1rem;}
    .container input[type="text"] {
        font-size: 1.1rem;
    }
    
}



/* bootstrap */

@media (min-width:200px) and (max-width: 576px) {

    /* Smartfone Beschreibung 100% */
    .container {/* padding-left: 20px; */}
    
    .container .desc_left  { border: 0px solid red; }
    .container .data_right { border: 0px solid orangered; }

}
@media (min-width:576px) and (max-width: 768px) {
    .container {   }
    .container .desc_left  {   }
    .container .data_right { width: calc( 560px - 80px); }
    
    .container .desc_left  { border: 0px solid red; }
    .container .data_right { border: 0px solid orangered; }


}

@media (min-width:768px) and (max-width: 992px) {
    .container { display: flex; }
    .container .desc_left  { width: 200px; }
    .container .data_right { width: calc( 700px - 200px - 80px); }
    
   

}


@media (min-width:992px) and (max-width: 1200px) {
    
    .container { display: flex; }
    .container .desc_left  { width: 200px; }
    .container .data_right { width: calc( 920px - 200px - 80px); }
    
    
}

@media (min-width:1200px)  {
    
    .container { display: flex; }
    .container .desc_left  { width: 200px; }
    .container .data_right { width: calc( 1140px - 200px - 80px); }
    
}




/* FELHER ANZEIGE */
@media (min-width: 200px) {
    
    .container .error {
    color: rgb(255, 30, 30);
    display: inline-block;
    /* position: absolute; */
    background: rgba(240,12,12,.8);
    color: white;
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: .875rem;
    font-variant: all-small-caps;
}

}

@media (min-width: 576px) {
    
    .container .error {
    color: rgb(255, 30, 30);
    display: inline-block;
    /* position: absolute; */
    background: rgba(240,12,12,.8);
    color: white;
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: 1rem;
    font-variant: all-small-caps;
}

}

@media (min-width: 768px) {
    
    .container .error {
    color: rgb(255, 30, 30);
    display: inline-block;
    /* position: absolute; */
    background: rgba(240,12,12,.8);
    color: white;
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: 1rem;
    font-variant: all-small-caps;
}

}
@media (min-width: 992px) {
    
    .container .error {
    color: rgb(255, 30, 30);
    display: inline-block;
    /* position: absolute; */
    background: rgba(240,12,12,.8);
    color: white;
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: 1rem;
    font-variant: all-small-caps;
   
}

}
.container .error {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;

}


@media (min-width: 1200px) {
    
    .container .error {
    color: rgb(255, 30, 30);
    display: inline-block;
    /* position: absolute; */
    background: rgba(240,12,12,.8);
    color: white;
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: 1rem;
    font-variant: all-small-caps;
    


}

}



/* Footer knopf anmelden */
@media (min-width: 768px) {
    .footer.container .row {
        width: 100%;
    }
    .footer.container .row .col-weiter {
        border: 0px solid red;
       
    }
    .footer.container .row .col-weiter .submit {
    width: 100%;
    background-color: rgb(2, 129, 197);
    color:white;
       
    }
     .footer.container .row .col-weiter .submit:hover {
    width: 100%;
    background-color: rgb(2, 129, 197);
    color:white;
       
    }



}



@media (min-width: 1200px) {
    .tooltip { 
    max-width: 350px;
    width: 350px;  

}

div.tooltip-inner {
    text-align: center;
    text-align: left;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #000;
    font-size: .875rem;
    margin-left: 60px;
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

}




.optional_required {
    color: red;
    display: none;
    margin-top: .5rem;
}

#livecheck_geburtsdatum {
    opacity: 0;
    /*border: 1px solid red;*/
    height: 2rem;
    display: block;
}

.flex     { display: flex; }
.opt_flex { display: flex; }
.flex_row { flex-direction: row; }
.flex_col { flex-direction: column; }