.order-table {
	display:flex;
	justify-content:flex-start;
}

.order-table div {
	margin: 10px 20px;
}
.nowrap {
	white-space:nowrap;
}

.xp-input-field {
	display:flex;
	align-items:center;
	overflow:hidden;
}
.xp-input-field.wrap-input {
	flex-wrap:wrap;
}
span.xp-label {
	position:relative;
	display:inline-block;
	min-width: 100px;
	width:100%;
	font-weight:bold;
}
span.xp-label span{
	display:inline-block;
	position:absolute;
	right:0px;
	top:0px;
	cursor:pointer;
}
span.xp-label span:hover{
}
.popup-button {
    height: 16px;
    width: 20px;
    text-align: center;
    margin: 0px;
    font-size: 11px;
    padding: 0px;
}
.popup-button:hover {
	color:red;
}
span.xp-input {
	width:100%;
}
span.xp-input span {
	white-space:nowrap;
}
span.xp-input input[type="text"], span.xp-input textarea {
	width:100%;
}
span.currency {
	font-weight:bold;
}
.currency input[type="text"] {
	text-align:right;
	width:100px !important;
}
.currency input[type="number"] {
	text-align:left;
	max-width:100% !important;
	width:100px;
}

#order_form {
	max-width:1000px;
	display:grid;
	grid-gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
}

.input-entry {
	border:0px solid red;
	min-height:32px;
}

.item1x {
  grid-column: 1/ span 6;
  grid-row: 1;
  border: solid;
  color: tomato;
}
.item2 {
	grid-column: 2 /span 2
}
.item2x {
  grid-row: 2 /span 3;
  grid-column: 1 /span 2;
  border: solid;
  color: turquoise;
}

.item3x {
  grid-row: 2;
  grid-column: 3/span 4;
  border: solid;
  color: green;
}

.item4x {
  grid-row: 3;
  grid-column: 3 /span 2;
  border: solid;
}

.item5x {
  grid-row: 3;
  grid-column: 5 / span 2;
  border: solid;
  color: brown;
}

.item6x {
  grid-row: 4;
  grid-column: 3 / span 4;
  border: solid;
  color: purple;
}
.save-order-button {
	background-color:#26a326;
	color:white;
	font-weight:bold;
	padding:10px;
	border-radius:10px;
	width:150px;
	margin-top:10px;
}
.save-order-button:hover {
	color:black;
}


.changed {
	background-color:#ffa07a2b !important;
}





















/*  Start of modal windows */
/* Modal, content and close (below) are HTML elements created by script during the popup process. You will not see them in any page or template, but they are just empty DIV tags
into which the popup text 'content' is inserted. These DIVs are all hidden until the popup is activated */
#modal {
  position:absolute;
  background:grey;
  padding:2px;
  z-index:9999;
}

#modalcontent {
 /* background:#EBF8FA; */
  background-color: #E9F3F2;
  padding:10px;
  overflow: auto;
  min-width:400px;
}

#close {
  position:absolute;
  background:url(../images/close.png);
  width:24px;
  height:27px;
  top:-7px;
  right:-7px;
}

#submodal {
  position:absolute;
  background:grey;
  padding:2px;
  z-index:9999;
}

#submodalcontent {
  background:#E9F3F2;
  padding:10px;
  overflow: auto;
  min-width:400px;
}

#subclose {
  position:absolute;
  background:url(../images/close.png);
  width:24px;
  height:27px;
  top:-7px;
  right:-7px;
}

/* end of modal windows */




/* table style */

.Table-row.hide-table-row {
	display:none;
}


.Table-row {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;
	display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

	width:100% !important;
	padding-bottom:5px;
	padding-top:5px;
}

.Table-header {
	display:none;  
	font-weight:bold;
}
.Table-row-item:before{
	content:attr(data-header);
	width:35%;
	font-weight:700
}
.Table-row-item.tri-wider:before{
	content:attr(data-header);
	width:50%;
	font-weight:700
}
.Table-row-item {
	word-wrap:break-word;overflow-wrap:break-word;padding:0.5em;
	margin-bottom:0px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;
	display: flex;
	justify-content:flex-start;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
	flex-direction: row;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    -webkit-flex: 1 0 10%;
	-moz-flex: 1 0 10%;
    -ms-flex: 1 0 10%;
    flex: 1 1 10%;

	width:100%;

/*	flex-grow: 1; */
	/*border-left:0px solid red; */

	-webkit-align-items: flex-start;
     align-items: flex-start;

}

.Table-header .Table-row-item {
	-webkit-align-items: center;
     align-items: center;
}

/*
.Table-row-item a  {
	display:flex;
	flex-direction: row;
	align-items:center;
} */

.Table-row-item a span.sorting-indicator {
	display:none;
	visibility:hidden;
	border:0px solid red;
	margin-top:20px;
}

.Table-row-item:hover a span.sorting-indicator {
	visibility:visible !important;
}
.Table-row-item:hover .row-actions {
	left:0px;
}

.list-even-row {
	background-color: #f4f4f4;
}
.list-odd-row {
	background-color: #fdfdfd;
}
.list-even-row:hover {
	background-color: #e6dada;;
	color:red;
}
.list-odd-row:hover {
	background-color: #e6dada;;
	color:red;
}

.Table-row-item.date{
	max-width:80px;
}
.Table-row-item.customer_ref{
	max-width:80px;
}

.Table-row-item.id {
	max-width:40px;
}
.Table-row-item.costs {
	max-width:70px;
}
.Table-row-item.custref, .Table-row-item.orderref {
	max-width:80px;
}
.Table-row-item.customer {
	max-width:200px;
}
.Table-row-item.customerinv {
	max-width:180px;
}
.Table-row-item.address {
	max-width:200px;
}
.Table-row-item.boolean {
	max-width:40px;
}
@media (min-width: 676px) {

.Table-header {
	display:flex;
}

.Table-row {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
	flex-direction: row;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
	justify-content:center;
}
.Table-row-item:hover {
	cursor:pointer;
}
.Table-row-item:before {
	content:none; 
	margin-left:50px;
}
.Table-row-item.tri-wider:before {
	content:none; 
	margin-left:50px;
}

.Table-row-item {
	width: 10%;
}
.Table-row-item.tri-wider {
	width: 20%;
}
.Table-row-item {
	padding: 0.2em;
	border:0px solid blue;
}
.Table-header .Table-row-item {
	background: #ffffff;
	color: #0073aa;
}

}