/* Definitionen zu Popupfunktion  */
.button{background-color:#383e41;border-radius:10px;box-shadow:0 2px 3px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:inline-block;padding:10px 20px;text-align:center;text-decoration:none}
.button.small{border-radius:15px;float:right;margin:22px 5px 0;padding:6px 15px}
.button:hover{background-color:#1e1e1e}
.button>span{font-size:84%}
.button.b-close,.button.bClose{border-radius:7px 7px 7px 7px;box-shadow:none;font:bold 131% sans-serif;padding:0 6px 2px;position:absolute;right:-7px;top:-7px}
.example{display:block;line-height:1.25;padding:30px 110px 15px 0}
.button{position:absolute;top:20px;right:25px}#share{position:absolute;right:18px;top:85px;width:205px}#share>div{display:inline-block}#page li{position:relative}#page ul+a{display:block;font-size:180%;margin:25px 0;text-align:center;text-decoration:none}
.note{color:#c0c0c0;font-size:80%}#popup,#popup2,.bMulti{background-color:#fff;border-radius:10px 10px 10px 10px;box-shadow:0 0 25px 5px #999;color:#111;display:none;min-width:250px;padding:25px}#popup
/* ENDE Definitionen zu Popupfunktion  */

.HinweisAuftrag{/* Adminvorgang Box mit Hinweisen zum Vorgang   */
position:absolute;
left:10px;
top:88px;
height:200px;
width:200px;
background-color: #ff9800;
padding:20px;
border:#C6C6C6 2px solid;
}

.HinweisKunde{/* Adminvorgang Box mit Hinweisen zum Kunden   */
position:absolute;
height:200px;
width:200px;
background-color: #ff9800;
padding:20px;
border:#C6C6C6 2px solid;
}
.HistorieAblauf{/* Adminvorgang Box mit Auflistung der verschiendenen Unterbelege   */
position:absolute;
height:auto;
width:275px;
background-color: #e6e6e6;
padding:20px;
border:#C6C6C6 2px solid;
}

.HistorieAblaufKunde{/* Adminvorgang Box mit Auflistung aller Vorgänge des Kunden   */
position:absolute;
right:30px;
padding-top:400px;
height:auto;
width:275px;
background-color: #e6e6e6;
padding:20px;
border:#C6C6C6 2px solid;
}

.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}







@media only screen and (max-width: 480px){

.Button_Popup{
margin-top:20px;
background: #383e41;
border-radius: 24px;
background-image: -webkit-linear-gradient(top, #383e41, #383e41);
background-image: -moz-linear-gradient(top, #383e41, #383e41);
background-image: -o-linear-gradient(top, #383e41, #383e41);
background-image: linear-gradient(to bottom, #383e41, #383e41);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 2px 10px #000000;
-webkit-box-shadow: 2px 2px 10px #000000;
box-shadow: 2px 2px 10px #000000;
z-index: 2;
width: 38px;
display: block;
color: #FFFFFF;
width:200px;
border: none;
font-size:24px;
padding-left: 20px;
padding-right: 20px;
padding-top:10px;
padding-bottom:10px;
text-transform:uppercase; 
font-weight: bold;
}
}


@media only screen and (min-width: 481px){

.Button_Popup{
margin-top:20px;
border-radius: 24px;
background: #383e41;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-moz-box-shadow: 2px 2px 10px #000000;
-webkit-box-shadow: 2px 2px 10px #000000;
box-shadow: 2px 2px 10px #000000;
z-index: 2;
width: 38px;
display: block;
color: #FFFFFF;
width:200px;
border: none;
font-size:24px;
padding-left: 20px;
padding-right: 20px;
padding-top:10px;
padding-bottom:10px;
text-transform:uppercase; 
font-weight: bold;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}
.Button_Codesuche:hover{
background-color: #4cc7fc;
  cursor: pointer;
}
}