/* CSS Document GENERAL STYLES */

html {
overflow: scroll;
overflow-x: hidden;
}

body{ 
	font:16px Trebuchet MS, Arial, Helvetica, Sans-Serif;
	color:#333;
	line-height:160%;
	margin:0;
	padding:0;
	text-align:center;
	background-color: white;
}

h1{
	font-size:180%;
	font-weight:normal;
	}		
h2, h3, h4, h5, h6{
	font-weight:normal;
	margin:1em 0;
	}	
h2{            
	font-size:160%;
	}	
h3{          
	font-size:130%;
	}
h4{          
	font-size:120%;
	}

.hidden{
	display:none;
}

#container{

		color:#222222;
		width: 100%; /* customize width, this form have fluid layout */
		background-color: white;
		font-size: 1.6em;
		font-family: Trebuchet MS, Arial, Helvetica, Sans-Serif; 
		margin-bottom: 30em;
}

		

	#container .logo {
		margin: 0;
		display:block;
		padding:55px 15px;
		background:url(../images/skpident6.png) no-repeat 98% 50%;
		vertical-align: middle;
		}				
		
	#container legend{display:none;}	
	#container p{margin: 5px 10px;font-size:30px;line-height:100%;}	
	#container label{display:inline;}	
	
	#container input.w180{
		width: 256px;
	}
	
	#container input{		
		width:95%;
		border:1px solid #111;
		background-color:#E3E3E3;/* url(../images/form_input.gif) repeat-x;*/
		color:#222;
		outline:none;
		padding: 5px;
	}
	
	#container select{
		width:95%;
		border:1px solid #111;
		background-color:#686868;/* url(../images/form_input.gif) repeat-x;*/
		color:#fff;
		outline:none;
		padding: 1px;
	}

	#container select:disabled, input:disabled {
		color: bisque;
		background-color: darkgray;
	}
	
	#container .rfid{
		width: 70%;
		height: 100px;
		background-color: #686868;
		color: #fff;
		font-size: 0.7em;
		margin-top: 1em;
		position: relative;
		z-index: 0;
	}
			
	#container input:focus{
		border: 2px solid #95c11f;
	}
	
	#container textarea:focus{
		border: none;
	}
	
	
	

	#container button{
		padding: 0 20px;
		margin: 25px 0 0 0;
		height:90px;
		line-height:32px;
		width: 400px;		
		background-color: #95c11f;
		border-radius: 10px;
		color:#fff;
		cursor:pointer;		
		text-align:center;	
		font-size: 1.4em;
		border: 0px;
	}

	#container button.half{
		margin-top: 50px;
		width: 210px;
	}
		
	#container .nopadding{
		padding: 0 2px;
		margin: 30px 30px 15px 35px;
		height:100px;
		line-height:32px;
		/*width: 220px;*/
		float:left;	
		color:#fff;
		cursor:pointer;		
		text-align:center;	
	}	

	#container button.alone {
		padding: 0 2px;
		margin: 30px 30px 15px 35px;
		height:100px;
		line-height:32px;
		color:#fff;
		cursor:pointer;		
		text-align:center;	
	}	
	
	#container .red{
	  border: 1px solid #e35d5b;	
	  background: #DF221F;
	  
	  /*linear-gradient(0deg, #e53935 10%, #e35d5b 90%)*/
	}
	
	#container .yellow{
		  border: 1px solid #D1913C;	
		  background: #FFB909;
		  /*background: linear-gradient(0deg, #D1913C 10%, #FFB95E 90%);  /* W3C */
		  cursor:default;    
	}
	

	#container .header {
		margin:0;
		/*background:#57a700 url(../images/form_heading.gif) repeat-x;*/	
		background-color: #95c11f;
		color:#fff;
		font-size:1em;
		border-bottom:none;

	}	

	#container .mainCont {
		width: 50%;
		float: left;
	}

	#container .mainCont .lagerinput {    
		width: 70%;
	}

	#container .mainCont .imgWrapper {
		width: 20%;
		display: inline-block;
		height: 100%;
		cursor: pointer;
	}

	#container .mainCont .sideImage {
		padding: 5px;
		vertical-align: middle;
		margin-left: 0.1em;
		width: 50%;
	}

#container .mainCont .bcenter{
		width: 100%
	}


#successSaveMsg {
	margin: 0 auto;
	display: block;	
}

.rfidResultsTable tr>td {
	padding-bottom: 1em;
}


.rfidResultsTable tr td:nth-child(1)  {
	min-width: 80px;
}

.elementtr {
	border-bottom: 1pt solid black;
}

.maschineResultsTable tr>td {
	padding-bottom: 1em;
	border-bottom: 1pt solid black;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 35px;
  left: 30px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  max-width: 70%;
}

#menuToggle input
{
  display: flex;
  height: 40px;
  margin-top: -4px; 
	margin-left: -7px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 40px;
  height: 5px;
  margin-bottom: 7px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: white;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: auto;
  height: auto;
  border: 1px solid #686868;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 5px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: #95c11f; /* #3A96FC */
  font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
    padding: 20px 0;
    transition-delay: 1s;
	text-align: left;
    font-size: 2em;
	letter-spacing: 2px;
	border-bottom: 1px solid rgba(205,237,172,0.5);
	cursor: pointer;
	margin-bottom: 10px;
}
	
	#menu li.nobottom{
		border-bottom: none;
	}

#menu li.flags a {
	padding-right: 20px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}




				

a{
	text-decoration:none;
	color: black;
	}
a:hover{
	color:#222222;
	}		
a:visited{
	color: black;
}	
table, input, textarea, select, li{
	font:100% Trebuchet MS, Arial, Helvetica, Sans-Serif;
	line-height:140%;
}
				
p, blockquote, ul, ol, form{
	margin:1em 0;
	}
blockquote{
	}
img{
	border:none;
	}			
hr{
	display:none;
	}

table{
	margin: 5px 10px;
	width: 98%;
	border-collapse:collapse;
	}

th, td{	
	padding:10px 10px;
	}	
th{	
	text-align:center;
	}

li{
	display:list-item;
	}	
	
	
span.click{
		cursor: pointer;
		right: 3px;
		position: absolute;
}

#tentinfo{
 padding: 4px;
}



/* Tag Cover */
	div.contentContainer{	
		top: 10px;
		position:relative;
		color: #000;
		background-color: #e1e6db;
	}
	
	div.mainCont{
		display: inline-block;
	}

div .rfidResults{
	
}

table.rfidResultsTable {
	
	color: #222;
	border: 1px solid black;
	background-color: #e1e6db;

}
table.maschineResultsTable {
	
	color: #222;
	border: 1px solid black;
	background-color: #e1e6db;

}
	.rfidResultsTable td {
		font-size: 1.2em;
	}
.maschine td {
		font-size: 1.2em;
	}

div .deposit {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 30px;
}
	
div #tagContentInner td a {
	display: inline-block;
}

	div.newWindow{
		
		position: absolute;
		left: 0px;
		width: 100%;
		height: 10000px;
		background-color: #e1e6db;
		z-index: 100;
		color: #000;
		display: none;
		font-size: 1.6em;
		
	}
	
		div.newWindow h1{
			margin:0;
			background-color:#686868;		
			color:#fff;
			font-size:40px;
			border-bottom:none;
			width: 100%;
			height: 1.8em;
			padding-top: 20px;
			
		}

.newWindow img{
	margin-top: -5px;
	margin-right: 20px;
	width: 60px;
	height: 60px;
}
		
		.newWindow input, select, textarea{
			padding: 0;
			margin: 0;
		}

		
		.newWindow table{
			text-align: left;
		}
	
		.newWindow td{
			color: #222;
			border: 1px solid;
		}
		
		.newWindow tr{
			padding: 5px	;
		}

/* Used in NewWindow normally but defined for whole page */
span.greenbutton{
		padding: 0 1px;
		margin: 0px 0 0 0;
		width: 40px;		
		border:1px solid #70ad2e;
		background-color:#95c11f;
		color:#fff;
		cursor:pointer;		
		text-align:center;	
}

span.yellowbutton{
		padding: 0 1px;
		margin: 0px 0 0 0;
		width: 20px;		
		border: 1px solid #D1913C;	
		 background: linear-gradient(0deg, #D1913C 10%, #FFB95E 90%); /* W3C */
		cursor:default;   
		color:#fff;	
		text-align:center;	
}

span.redbutton{
		padding: 0 1px;
		margin: 0px 0 0 0;
		width: 20px;		
		border: 1px solid #e35d5b;
		background: #7B0103;	
		background: linear-gradient(0deg, #e53935 10%, #e35d5b 90%); /* W3C */    
		color:#fff;
		cursor:pointer;		
		text-align:center;	
}

/* Progressbar */
#progressBar {
	width: 400px;
	height: 40px;
	border: 1px solid #111;
	background-color: #e1e6db;
	margin: 10px auto;
	display: block;
}

#progressBar div {
	height: 100%;
	color: #fff;
	text-align: right;
	line-height: 22px; /* same as #progressBar height if we want text middle aligned */
	width: 0;
	background-color: #95c11f;
}

/* Alert Box Sync */

.alertRed {
	display: none;
	padding: 20px;
	background-color: #f44336; /* Red */
	color: white;
	margin-bottom: 15px;
  }

  /* The close button */
.closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
  }
  
  /* When moving the mouse over the close button */
  .closebtn:hover {
	color: black;
  }

/* MOBILE MENU */

nav {

  height: 90px;
}

nav ul {
  padding: 0;
  list-style-type: none;
}

nav a {
	color: white;
}

nav a:visited {
	color: white;
}


.palletImg {

}

.depositImage {
	margin-bottom: 8px;
}

.actionButtons{
	display: flex;
}

.actionIconLeft {
	flex: 1;
	
	float:left;
	display: inline;
}

.actionIcon {
	flex: 1;
	
	display: inline;
}

.actionIconRight {
	flex: 1;
	
	float: right;
}



/* CHECKBOX */
/* Customize the label (the container) */
.checkBoxContainer{
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkBoxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
span.checkmark {
  position: absolute;
  top: -2em;
  left: -1.5em;
  height: 140px;
  width: 100px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkBoxContainer input:hover ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkBoxContainer input:checked ~ .checkmark {
  background-color: #95c11f;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkBoxContainer input:checked ~ .checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */
.checkBoxContainer .checkmark:after {
  left: 42px;
  top: 48px;
  width: 16px;
  height: 33px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.syncTimeContainer {
	float: right;
	margin-right: 0.5em;
	margin-top: 0.5em;
	font-size: 80%;
}

a.btn-dark {
	color: #fff;
    background-color: #343a40;
    border-color: #343a40;
	display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s
}

#ck-button {
    margin:20px;
    background-color:#fff;
    border-radius:4px;
    border:0px solid #D0D0D0;
    overflow:inherit;
	width: 400px;
	height: 20px
	
    
}

#ck-button label {
   
    width:200px;
    padding: 2px;
}

#ck-button label span {
    text-align:center;
    border-radius:4px;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}
#ck-button input:checked + span {
    background-color:#95c11f;
    color: #000;
    }

#rfidPuffer{
	width: 100%;
    margin: 20px;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}