body { margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; background-color: #FFFFFF;}
h1{
    font-family:Verdana,Arial,Helvetica;
    font-size:18px;
    background-color:#008F4C;
    color:#ffffff;
    margin: 5px 0px 5px 0px;
}
h2{
    font-family:Verdana,Arial,Helvetica;
    font-size:14px;
    background-color:#008F4C;
    color:#ffffff;
    margin: 5px 0px 5px 0px;
}
h3{
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    font-weight:700;
    margin: 5px 0px 5px 0px;
}

a{
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    font-weight:700;
    font-style:italic;
}
/*CSS für Login-Seite*/
.loginbutton {
    background-color: #008F4C;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    /*border: none;*/
    /*cursor: pointer;*/
    width: 100%;
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
}

.loginbutton:hover {  
    box-shadow: 0 0 2px 1px rgba(0, 143, 76, 1);
}
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    margin: 8px 0;
    border: none;
    background-color: grey;
    color: white;
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
}
.cancelbtn:hover{
    box-shadow: 0 0 2px 1px rgba(0, 143, 76, 1);
}

.syshinweis {
    color:red;
    font-family:Verdana,Arial,Arial, Helvetica;
    font-size:10px;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}
img.logo {
    width: 25%; 
}
.container {
    padding: 16px;
}
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}


/*Button Systeme*/

.buttonsysteme {
    height:30px;
    background-color:#008F4C;
    color:#FFFFFF;
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
}

.buttonsysteme:hover {
    box-shadow: 0 0 2px 1px rgba(0, 143, 76, 1);
}

/*Bilder Systeme*/
.imgsysteme {
    display:block;
    max-width:100%;
    max-height:170px;
    /*height:auto;*/
    float:left;
    margin: 0px 0px 10px 10px;
}
.imgsysteme:hover {
    display:block;
    max-width:470px;
    max-height:353px;
    float:left;
    margin: 0px 0px 10px 10px;
}
.imgsyskalk:hover {
    box-shadow: 0 0 2px 1px rgba(0, 143, 76, 1);
}
.imgsyskalk {
    display: inline-block;
    margin: 10px 5px 0px 60px;
}
/*Linien Systeme*/

.hrsysteme {
     height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 143, 76, 0.5); 
}

.divsysteme {
    width:640px;
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
   
}

.divinfosysteme {
    width:350px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:12px;
   
}
.divsysheader {
    width:640px;
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    font-weight:700;
}

/*Attribute Bezeichnung*/
.spansysatrlabel {
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    font-style:italic;
}
.spansysatr {
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    font-weight:700;
}

.spansysatrfs {
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    color:darkred;
    font-weight:700;
}
.spansysatrss {
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    color:darkblue;
    font-weight:700;
}
.spansysatrws {
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    color:darkgreen;
    font-weight:700;
}
.spansysatrzeit {
    font-family:Verdana,Arial,Helvetica;
    font-size:12px;
    color:darkmagenta;
    font-weight:700;
}

.spansysattrname {
    font-family: Verdana,Arial,Helvetica;
    font-size: 12px;
    font-style: italic;
}

.spansysattrname::after {
    content: ": ";
}

.divattributes {
    width: 615px;
    height: 175px;
    overflow-y: visible;
    overflow-x: hidden;
}

.divattributeslong {
    width: 615px;
}
.divattributeslangtext {
    
}