body {
	font-family: arial;
	margin: 0px;
}

/* make drag container visible */
#redips-drag {
	border: 2px dashed LightBlue;
	/*width: 580px;*/
	padding: 10px;
	margin: 0px auto;
}

/* set border-collapse */
div#redips-drag table {
	/*border-collapse: collapse;*/
	/*width: 541px;*/
}
	/* define margin below first table */
	.tbl1 {
		margin-bottom: 17px;
	}

/* set table row height */
div#redips-drag table tr {
	height: 32px;
}

/* table cells */
div#redips-drag td {
	/* IE8 BUG - applying alpha filter on TD will overwrite TD border - thank you MicroSoft for tearing my hair :P */
	/* I also tried with outline and that was fine, but Opera11 place high zIndex to outline grid and that looks wierd */
	/* so, I paint TR to white with JavaScript and applying aplha filter to table content (DIV elements) */
	  border: 2px dashed LightBlue;
  border-radius: 10px;
}

/* table titles */
div#redips-drag th {
	font-size: 14pt;
}

.groove {border-style: groove;}

.tab {
    display: inline-block;
    margin-left: 4em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

/* drag object (DIV inside table cell) */
.redips-drag {
	margin: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	/*text-align: center;*/
	font-size: 10pt;
	width: 70px;
	height: 20px;
	line-height: 20px;
	border-width: 2px;
	border-style: solid;
	background-color: white;
	/* round corners 
	border-radius: 4px; /* Opera, Chrome */
	-moz-border-radius: 4px;  FF */
}

.selected {
	outline : 1px solid red;	
}

/* blue DIV elements */
.blue {
	border-color: SteelBlue;
}

/* orange DIV elements */
.orange {
	border-color: #FF8A58;
}

/* DIV row handlers (blue left column) */
.redips-row {
	width: 20px;
	margin: 2px;
	border-color: SteelBlue;
	background-color: SteelBlue;
	/* round corners */
	border-radius: 14px; /* Opera, Chrome */
	-moz-border-radius: 14px; /* FF */
}

/* row handler TD background color */
.redips-rowhandler {
	background-color: #76ACDA;
	height: 23xp;
}

/* marked cells (forbidden access for header and message line) */
.redips-mark {
	color: white;
	background-color: #aaa;
	/*text-align: center;*/
}

/* per levering velden */
.straat {
	width: 300px;
}
.bedrijf {
	width: 600px;
}
.stad {
	width: 150px;
}
.postcode {
	width: 70px;
}
.aantal {
	width: 10px;
}
.gewicht {
	width: 10px;
}
.verpakking {
	width: 50px;
}
.naam {
	width: 100px;

}
.handtek {
	width: 200px;
	height: 100px;
  border: 2px solid black;
  border-radius: 10px;
}

/* row dark */
.rd {
	background-color: #ddd;
}

/* row light */
.rl {
	background-color: #eee;
}

/* cell dark */
.cdark {
	background-color: #C6C8CB;
}

.veld {
  visibility: hidden;
  pointer-events:none;
}

#veld {
  visibility: hidden;
  pointer-events:none;
}

td.veld { display: none; }

.view {
		visibility: visible;
	}

/* inner tables */
table#main table {
	border: 2px solid lime;
	border-radius: 10px;
}

 @media print {

	.controls {
		display: none;
	}
	
	.redips-rowhandler {
		display: none;
	}
	
	.pagebreak { page-break-before: always; } /* page-break-after works, as well */

	.view {
		visibility: hidden;
	}
	td.view {
		visibility: hidden;
		display: none;
	}
	#view {
		visibility: hidden;
	}
	
	td.veld {
		border: 2px solid black;
		border-radius: 10px;
		visibility: visible;
		display: inline;
	}
	.veld {
		border: 2px solid black;
		border-radius: 10px;
		visibility: visible;
	}
	#veld {
		border: 2px solid black;
		border-radius: 10px;
		visibility: visible;
	}	
}

.alignleft {
	float: left;
}
.alignright {
	float: right;
}

.gg-trash {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 10px;
    height: 12px;
    border: 2px solid transparent;
    box-shadow:
        0 0 0 2px,
        inset -2px 0 0,
        inset 2px 0 0;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    margin-top: 4px
}

/*  Modal dingen */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.history {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* trash cell */
.redips-trash {
	color: white;
	background-color: steelBlue;
	text-align: center;
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}