/* Seitenbreite */
@media (min-width: 200px) and (max-width: 576px) {
    body { font-size: 1rem; }
    .page { width: calc(100vw); font-size: 1rem; }
}

@media (min-width: 576px) and (max-width: 768px) {
    body { font-size: 1rem; }
    .page { width: calc(100vw); font-size: 1rem; }
}
@media (min-width: 768px) and (max-width: 992px) {
    body { font-size: 1rem; }
    .page { width: calc(100vw); font-size: 1rem; }
}



/* Eingabefelder */

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

.page { border-top: 0px solid green; }
.page h1,h2,h3,h4 { font-size: 1rem;}
.page { font-size: 1rem;}



.data_right { border: 0px solid red;}
.data_left { border: 0px solid red;}
.fieldset1 { padding-right: 0px; padding-left: 0px; border: none;}
#vsform td { padding: 0px; padding-top: 0rem; padding-bottom: 1rem;}

#vsform select   {  width: calc(100vw - 80px); }
#vsform input    {   width: calc(100vw - 80px); }
#vsform textarea {   width: calc(100vw - 80px); }

#vsform select   {  font-size: 1rem; font-weight: 300; }
#vsform input    {  font-size: 1rem; font-weight: 300; }
#vsform textarea {  font-size: 1rem; font-weight: 300; }


}


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

.page { border-top: 0px solid blue; }
/*#vsform select   {  min-width: 300px; width: 300px; }
#vsform input    {  min-width: 300px; width: 300px; }
#vsform textarea {  min-width: 300px; width: 300px; }*/

#vsform select   {  font-size: 1rem; }
#vsform input    {  font-size: 1rem; }
#vsform textarea {  font-size: 1rem; }

}






@media (min-width: 768px) and (max-width: 992px) {

.page { border: 1px solid red; border-top: 0px solid orange; }

.desc_left { width: 200px; border: 0px solid red; }
.data_right { width: calc(100vw  - 200px - 40px); width: 100%; border: 0px solid orange;}
#vsform .data_right {
display:inline-block;
overflow-x:visible;
width: calc(100vw  - 200px - 40px);
}

#vsform select   { width: calc(100vw  - 200px - 80px); }
#vsform input    { width: calc(100vw  - 200px - 80px); }
#vsform textarea { width: calc(100vw  - 200px - 80px); }


#vsform select   {  font-size: 1rem; }
#vsform input    {  font-size: 1rem; }
#vsform textarea {  font-size: 1rem; }

}







@media (min-width: 992px) and (max-width: 1200px) {

.page { border-top: 0px solid black; width: calc(100vw); }
.page { font-size: 1rem;}
.desc_left { width: 100% ;border: 0px solid red; }
.data_right { width: calc(66vw - 40px);}
#vsform .data_right {
display:inline-block;
overflow-x:visible;
width: calc(100vw  - 200px - 40px);
}

#vsform select   { width: calc(992px - 200px - 120px);}
#vsform input    { width: calc(992px - 200px - 120px);}
#vsform textarea { width: calc(992px - 200px - 120px);}


#vsform select   {  font-size: 1rem; }
#vsform input    {  font-size: 1rem; }
#vsform textarea {  font-size: 1rem; }

}


@media (min-width: 1200px)  {

.page { border-top: 0px solid olivedrab; width: calc(100vw); max-width:1200px; }
.page { font-size: 1rem;}
.desc_left { width: 100% ;border: 0px solid red; }
.data_right { width: 100%; border: 0px solid green;}
#vsform .data_right {display:inline-block;overflow-x:visible;width: calc(100vw  - 200px - 40px);max-width: 960px;}

#vsform select   {width: calc(66vw); max-width: 40rem;}
#vsform input    {width: calc(66vw); max-width: 40rem;}
#vsform textarea {width: calc(66vw); max-width: 40rem;}


#vsform select   {  font-size: 1rem; }
#vsform input    {  font-size: 1rem; }
#vsform textarea {  font-size: 1rem; }

}




/* PLACE HOLDER */
@media (min-width: 768px) {
    input::-moz-placeholder {
color:#999
}

input::placeholder { font-style: italic; }

textrea::placeholder { color: #999; font-weight: 300; text-align: left; margin-left: 1em;}
input::placeholder { color: #999; font-weight: 300; text-align: left; margin-left: 1em;}

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



}




/* generelle Einstellungen für die Farbe */

@media (min-width:200px) and (max-width:1920px) {
    
    .btn-outline-info {
    color: rgb(2, 109, 187);
    border-color: rgb(2, 109, 187);
    
    }
   
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        min-width: 420px;
    }
    
    /* Hintergrundfarbe des Dropdown */
    .dropdown-menu {
        background: #fff;
    }
    
    /* Selektierte Farbe einer Option */
    .dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
    }   

    
   .dropdown-header {
    display: block;
    padding: .5rem 1.5rem;
    margin-bottom: 0;
    font-size: .875rem;
    color: #6c757d;
    white-space: nowrap;
    }
    
    .bootstrap-select .dropdown-menu.inner {
       
    }

#vsform .error {
color:#e33;
float:none;;
margin-right:2em;
}
    
}


/* Größe der Überschriften */
.fieldset1 { margin:auto; padding-left: 0px;}
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;}

/* Abstände der Überschrift */
h2,h3,h4 { margin-top: 3rem;margin-bottom: 1rem;}



/* FARBEN DEN EINGABE FElder */
input::placeholder { font-style: italic; color: rgb(2, 109, 187); }
select { font-style: italic; color: rgb(2, 109, 187); }
.seltime { font-style: normal; font-weight: 300; color: rgb(2, 109, 187); }
.filter-option-inner { font-style: normal; font-weight: 300; color: rgb(2, 109, 187); }
.btn { font-style: normal; font-weight: 300; color: rgb(2, 109, 187); }



/* Seitenbreite */
@media (min-width: 200px) and (max-width: 576px) {
    body {  }
    .page { width: calc(100vw); }
    td { width: 100%;}
    .desc_left { width: 100%; display: block;}
    .data_right { width: 100%; max-width: 100%;}
    
}

@media (min-width: 576px) and (max-width: 768px) {
    body { }
    .page { width: calc(100vw); }
}
@media (min-width: 768px) and (max-width: 992px) {
    body {  }
    .page { width: calc(100vw);  }
}