:root {
  --gray: linear-gradient(90deg, #b5b5b5 0%, #5c5c5c 100%);
  --gray2: linear-gradient(0deg, #5c5c5c 0%, #b5b5b5 100%);
  --gray3:linear-gradient(90deg, #8a8c8a 0%, #5c5c5c 100%);
  --gray4: linear-gradient(0deg, #b5b5b5 0%, #5c5c5c 100%);
  --green: linear-gradient(90deg, #54ff69 0%, #00870a 100%);
  --red: linear-gradient(90deg, #ff3131 0%, #cb0000 100%);
  
}



body {
	font-family : Arial, Helvetica, sans-serif;
	margin : 0px;
 	text-align : left;
	text-decoration : none;
	color : #000000;
	overflow : auto;
}
#body {
	background-color: #EEE;
}
#main {
	background: #FFF;
	margin: 0 auto;
	margin-top: 50px;
	padding: 15px;
	width: 80%;
	height: 80%;	

}
#header {
	 content: "";
        position: absolute;
	top:2%;
	left:2%;
	height:10%;
	 width: 96%;
}

#user_info {
	content: "";
	position: absolute;
        height:100%;
        width: 20%;
	right:0%;
}
#form_logout{
	content: "";
        position: absolute;
        height:100%;
        width: 100%;
        bottom:13%;
}

#work{
	content: "";
        position: absolute;
	height:96%;
	width: 96%;
	top:13%;
	left:2%;
	border-style: solid;
	border-color: #92a8d1; 
}
#Edit{
	content:"";
	position: absolute;
	top:5%;
	height:10%;
	width: 96%;
	left:2%;
	border: 1px solid #5e5e5e;
}
#Search_Option{
	content:"";
 	position: absolute;
	top:13%;
        height:100%;
        width: 50%;
        left:0%;
}
#S_Option{
 	content:"";
        position: absolute;
  	top:0%;
        height:60%;
        width: 20%;
        left:2%;


}
#searchInput{
	 content:"";
        position: absolute;
        top:0%;
        height:51%;
        width: 57%;
        left:23%;

}
#search_button{
	 content:"";
        position: absolute;
        top:0%;
        height:60%;
        width: 20%;
        left:82%;

}
#buttons{
	content:"";
 	position: absolute;
	top:13%;
        height:100%;
        width: 50%;
	left:50%;
        left:50%;

}
#new_machine{
	 content:"";
        position: absolute;
        top:0%;
        height:60%;
        width: 20%;
        left:57%;

}
#new_user{
      content:"";
        position: absolute;
        top:0%;
        height:60%;
        width: 20%;
        left:78%;

}

#Anlagen{
	content:"";
        position: absolute;
	top:20%;
        height:77%;
        width: 96%;
        left:2%;
        border: 1px solid #5e5e5e;
}
#Tabelle{
	content:"";
        position: absolute;
	top:0.5%;
	height:99%;
        width:99%;
        left:0.5%;
        /*border: 1px solid #5e5e5e;*/

}

table {
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

table th {
    background-color: #f2f2f2;
}

.online {
            color: #00bf00;
        }

.offline {
            color: #bf0000;
        }


#sprache{
	content:"";
	position: absolute;
	height:10%;
	bottom:1%;
	width:100%;
	right: 0%;
	/*border: 1px solid #5e5e5e;*/
}

.logo {
	content:"";
	position: absolute; 
	width:20%;
	height:90%;
	
/*    padding-bottom: 10px;*/
    text-align: left;
    float: left;
}
.logo img {height: 100%; width: auto}


input.user_input {
	background: linear-gradient(180deg, #ccc, #fff);
}

.input_number {
	width: 100px !important;
	color: #fff !important;
	background: blue !important;
    margin: auto 5px auto 0 !important;
	padding: 5px !important;
    border: 1px solid #bbb !important;
    float: right !important;
	text-align: center;
}
.message_box {
    width: -webkit-fill-available;
    min-height: 5%;
    border-radius: 5px;
    border-color: #92a8d1;
    background: red;
    margin: 5px 5px;
    padding: 5px;
	overflow: hidden;
	height:3%;

}
#messageField{
		color: white;
        bottom: 0px;
		
}
    .scrollText {
       display: inline-block;
	    padding-left: 100%;
		white-space: nowrap; 
       animation: marquee 15s linear infinite;
       
    }
    /* Make it move */

    @keyframes marquee {
        0% {transform: translate(0%, 0);}
        100% { transform: translate(-100%, 0);}
    }