/* KundenspezifischeÄnderungen an Farbe und Design */

:root {
    
    --var-primary: rgb(2, 109, 187); 
    --var-background-h1: white;
    --var-link-primary:rgb(2, 109, 187); 
    --var-link-primary-hover: var(--var-primary);
    --var-color-h1: var(--var-primary);
    --var-input-text-color: rgb(2, 109, 187); 
    
    --var-input-background-color: #f9f9f9;
    --var-input-border-color: transparent;
    
    --var-input-placeholder-color: #999;
    --var-select-color: var(--var-primary);
    --var-select-background: #fbfbfb;
    --var-font-family: "Mulish", Helvetica, Arial, Verdana, sans-serif;
}

/* Eingabefelder Farbe und border */
:root {
    
    --var-input-background-color: #white;
    --var-input-border-color: #999;
    
    --var-input-placeholder-color: #999;
    --var-select-color: var(--var-primary);
    --var-select-background: white;
    --var-font-family: "Mulish", Helvetica, Arial, Verdana, sans-serif;
}




.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--var-primary);
}

/* Formatierung der Texteingabefelder */
.container input[type="text"] {
    background-color: var(--var-input-background-color);
    border: 1px solid var(--var-input-border-color);
}

.container textarea {
    font-size: 1rem;
    padding: .25rem;
    padding-left: 1rem;
    border: 1px transparent;
    border-radius: .25rem;
    outline: none;
    height: 8rem;
    max-heignt: 8rem;
    background-color: var(--var-input-background-color);
    border: 1px solid var(--var-input-border-color);
}

.container input {
    color: #1155cc; font-weight: 600;
    color: var(--var-input-text-color);
}

.container textarea {
    color: #1155cc; font-weight: 600;
    color: var(--var-input-text-color);
    
}
input {
    border-radius: 6px;
    height: 2.8em;
    padding-left: 1em;
    border: none;
    outline: none;
}


.container .error {
    display: inline-block;
    /* position: absolute; */
    background: white;
    color: rgba(240,12,12,.8);
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: 1rem;
    font-variant: all-small-caps;
    border: 1px solid rgba(240,12,12,.8);
}

body {
    font-family:  var(--var-font-family);
}

h1,h2,h3,h4 {font-size: 1.25rem;font-weight: 300; margin-top: 1rem; margin-bottom: 1rem;}
h1,h2,h3,h4 {
    background-color: var(--var-background-h1);
    font-weight: 600;
    color: var(--var-color-h1);
    /*margin: auto;*/
}
.head-form-name { 
    background-color: transparent; 
}
.head-form-name h1 {
    background-color: var(--var-background-h1);
    font-weight: 600;
    color: var(--var-color-h1);
    
}
a {
    color: var(--var-link-primary);
    font-weight: normal;
    text-decoration: none;
}
a:hover {
    color: var(--var-link-primary-hover);
    text-decoration: underline;
}

.footer.container .col-weiter input {
        width: 10rem;
        float: right;
        color: white;
        background: var(--var-color-h1);
}


.alert-fachinfo {
    background: rgba(200,200,200,.1);
}
.alert-fachinfo-null {
    background: rgba(200,200,200,.2);
    border: 1px dashed darkgreen;
}
.alert-fachinfo-edit {
    background: rgba(200,200,200,.2);
    border: 1px dashed darkgreen;
}
.alert p { margin-bottom: 0rem;}


.mark-editable {
    border: .5px dashed darkgreen;
}

.form-edit-control-group {
    position: absolute;
    left: calc(100vw - 300px);
}
/* Seitenbreite */
@media (min-width: 200px) and (max-width: 576px) {
    body { font-size: 1rem; font-weight: 400;}
    .page {/* width: calc(100vw);*/ font-size: 1rem; font-weight: 400;}
}

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



/* Anmeldung Benachrichtung Check */

.w100 { width: 100%;}
.w100 p { width: 100%; margin-top: .25rem; margin-bottom: .25rem; padding-top: .25rem; padding-bottom: .25rem;}
.w100 btn-secondary { border: none;}
.w100 btn-danger { border: none;}

/* Anmelden Knopf */
.footer.container .col-weiter input {
        width: 10rem;
        float: right;
        color: white;
        background: var(--var-primary);
}
@media (max-width:768px) {
    .footer.container .col-weiter input {
        width: 100%;
        color: white;
        background: rgb(2, 109, 187);
    }
}




.btn-light {
    color: var(--var-select-color);   
   /* color: rgb(2, 109, 187);*/
}

/* Link Farbe */
a {
    color: blue; font-weight: 600;
    color: var(--var-link-primary);
    text-decoration: none;
    background-color: transparent;
}
a :hover {
    color: blue; font-weight: 600;
    color: var(--var-link-primary-hover);
    text-decoration: none;
    background-color: transparent;
}

/* bootstrap-select wenn nichts ausgewählt ist */
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #1155cc;   
    color: rgb(2, 109, 187);
}

/* Beschreobung links, fett oder nicht */
@media (max-width:768px) {
    .container .desc_left {    font-weight: 600; }
}
@media (min-width:768px) {
    .container .desc_left {    font-weight: 400; }
}



/* Format der Placeholder */
input:focus::-webkit-input-placeholder { color: var(--var-input-placeholder-color); font-weight: 400;text-align: right; }
input:focus:-moz-placeholder {  color: var(--var-input-placeholder-color); font-weight: 400;text-align: right;}
input:focus::-moz-placeholder { color: var(--var-input-placeholder-color); font-weight: 400;text-align: right; }
input:focus:-ms-input-placeholder { color:var(--var-input-placeholder-color); font-weight: 400; text-align: right; }

input::-webkit-input-placeholder { color: var(--var-input-placeholder-color); font-weight: 400; }
input:-moz-placeholder {  color: var(--var-input-placeholder-color); font-weight: 400;}
input::-moz-placeholder {  color: var(--var-input-placeholder-color); font-weight: 400;}
input:-ms-input-placeholder {  color: var(--var-input-placeholder-color); font-weight: 400;}

input:focus::-webkit-input-placeholder { font-style: italic; }
input:focus:-moz-placeholder {  font-style: italic; }
input:focus::-moz-placeholder { font-style: italic; }
input:focus:-ms-input-placeholder { font-style: italic; }

input::-webkit-input-placeholder { font-style: italic; }
input:-moz-placeholder {  font-style: italic; }
input::-moz-placeholder {  font-style: italic; }
input:-ms-input-placeholder {  font-style: italic; }

/* textarea */
textarea::-webkit-input-placeholder { color: var(--var-input-placeholder-color); font-weight: 100;font-style: italic; }
textarea::-moz-placeholder {  color: var(--var-input-placeholder-color); font-weight: 100;font-style: italic;}
textarea::-moz-placeholder {  color: var(--var-input-placeholder-color); font-weight: 100;font-style: italic;}
textarea::-ms-input-placeholder {  color: var(--var-input-placeholder-color); font-weight: 100;font-style: italic;}


/* checkboxen */
.checkAccept {display: flex;flex-direction: row;align-items: center;border: 0px solid orangered;}
.checkAccept .col-check {min-width: 2rem;border: 0px solid red;}
.checkAccept .col-text { width: auto; border: 0px solid red; padding-left: .5rem; padding-right: 1rem; } 
.checkAccept .col-sign { width: 2rem; border: 0px solid red; }

.checkAccept .col-text a { /*padding-left: .5rem; padding-right: .5rem;*/ }

/* check bei mobil besser sichtbar machen */
@media (max-width: 1992px) {
  .checkAccept  { 
  padding-top: .85rem;
  padding-bottom: .85rem;
  min-width: 2rem; 
  border: 0px solid red; 
  
  }
  .checkAccept .col-check  {
  padding-left: .5rem;
  padding-right: .5rem;
  min-width: 3rem;
  top: 0;
  }
  .checkRadio  { 
  font-size: 1.5rem;
  
  }
  
}


/* Pfeile an die Informationsboxen */
.arrow-up {
  width: 0;
  height: 0;
  margin-left: .5rem;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid red;
  margin-top: -8px;
 
}
/* Pfeile aus */
/*.arrow-up {  display: none; }*/
.error { /*border-radius: 4px;*/}

/* Farbliches Feld bei Fehler */
.container .fielderror {
    color: rgb(2, 109, 187);
    background-color: rgba(190,10,10,.1);
    /*background-color: rgba(10,10,100,.1);*/
    border-color: #f8f9fa;
}


.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  
  border-top: 40px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}


.alert-info .col-text {
    margin-top: .25rem;
    margin-bottom: .25rem;
    /*border-bottom: 1px solid silver;*/
}
.alert-info .checkAccept {
/*    margin-top: .25rem;
    margin-bottom: .25rem;*/
    /*border-bottom: 1px solid silver;*/
}



/* FEHLER VArIANTE 2 */
/*
@media (min-width: 1200px) {
    .arrow-up { background-color: rgba(250,250,250,.9);;}
    .container .error {
    color: rgb(255, 30, 30);
    display: inline-block;
    background: rgba(250,250,250,.9);
    color: black;
    padding: .25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    right: 245px;
    font-size: 1rem;
    font-variant: all-small-caps;
    border: 1px solid #ddd;
}
}
*/


/* #2021-09-29 Anpassung der Dropdowns in der breite */

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    min-width: 160px;
    width: auto;
    max-width: 100%;
}
.dropdown-toggle .filter-option {
    padding-right: 1rem;
    
}


.OPTIONSLISTE3 {
    display: flex;
    flex-wrap: wrap;
}