html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

#form {
	padding: 10px;
	font-size: 1.3em;
}

#form select {
	width: 300px;
	font-size: 1em;
}
#form input[type=date],input[type=number],input[type=button] {
	width: 140px;
	font-size: 1em;
}

#form input[type=checkbox] {
	scale: 1.3;
}

#results {
	width: 100%;
}

#wait {
	font-weight: bold;
	color: red;
	animation: pulse 3s infinite;
}

@keyframes pulse {
  50% {opacity: 0.1;}
}

.sticky {
  position: sticky;
  top: 0;
  background: #ddd;
  z-index: 600;
  cursor: s-resize;
}

table.sortable tbody {
    counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
    content: "Lp.";
    display: table-cell;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
	font-size: 80%;
	text-align: right;
	vertical-align: middle;
	background-color: #eee;
	padding-right: 2px;
	width: 15px;
}

table.sortable tbody tr:nth-child(2n) td {
  background: #f0f0f0;
}
table.sortable tbody tr:nth-child(2n+1) td {
  background: #fafafa;
}

.page-container {
  width: 100%;
  height: 100%;
}

.header {
	padding: 0;
	height: 65px;
}


/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height: 100%;
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  width: 25%;
  max-width: 99%;
  min-height: 200px;
  white-space: nowrap;
  background: #6f8eb3;
  color: white;
  overflow: auto;
}

.splitter {
  flex: 0 0 auto;
  width: 10px;  
  background: url(vsizegrip.png) center center no-repeat #ccc;
  min-height: 200px;
  cursor: col-resize;  
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #fee;
}


/* vertical panel */

.panel-container-vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid silver;
  overflow: hidden;
}

.panel-top {
  flex: 0 0 auto;
  /* only manually resize */
  height: 70%;
  max-height: 98%;
  width: 100%;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter-horizontal {
  flex: 0 0 auto;
  height: 10px;
  background: url(hsizegrip.png) center center no-repeat #ccc;
  cursor: row-resize;
}

.panel-bottom {
  flex: 1 1 auto;
  /* resizable */
  min-height: 200px;
  background: #fff;
  overflow: auto;
}