#app {
	padding: 10px;
	max-width: 1280px;
	margin: 0px auto;
}

#app button {
	background: #F5F5F5;
	padding: 10px 30px;
	border: solid 1px #AAAAAA !important;
	border-radius: 2px;
	font-weight: normal;
}

#app textarea { height: 60px; }
#app input, 
#app select, 
#app textarea {
	box-sizing: border-box;
	padding: 5px; 
	border: solid 1px #DDDDDD;
	width: 100%;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 18px;
	border-radius: 5px;
}

#app div.head { background: #a1ed9d; }

.search-filter {
	padding: 20px 10px 0px 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.search-filter .row {
	width: 47%;
	display: flex;
	margin-bottom: 20px;
}

.search-filter label { width: 150px; }
.search-filter input, .search-filter select { flex-grow: 1; }

.search-filter input, .search-filter select {
	padding: 5px;
	height: 26px;
	box-sizing: border-box;
	border: solid 1px #AAAAAA;
	vertical-align: top;
	font-size: 11px;
	margin-right: 10px;
}

.shop-selection { padding: 15px; }

.shop-selection .row { 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}



.shop-selection input, .shop-selection select, .shop-selection button {
	box-sizing: border-box;
	width: 30%;
}

.shop-list { 
	margin-top: 20px;
	display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;
}

.shop-list div span { 
	font-weight: bold; 
	color: #990a0a;
	display: inline-block;
	padding: 0px 3px;
	margin-left: 10px;
	border: solid 1px #990a0a;
	background: #FFC3C3;
	font-size: 10px;
	border-radius: 3px;
	float: right;
}

.shop-list div {
	padding: 15px 10px;
	margin-bottom: 15px;
	box-sizing: border-box;
	background-color: #EFEFEF;
	border: solid 1px #DDDDDD;
	border-radius: 5px;
	width: 33%;
	cursor: pointer;
}

.shop-list div:hover {
	background-color: #DFDFDF;
}

.lines-table { background: #FFFFFF; }

.lines-table .header {
	color: #FFFFFF;
	background: #EEEEEE;
	font-weight: bold;
}

.lines-table tr { background: #FFFFFF !important; }

.lines-table .header span { color: #555555; }

.lines-table thead td { padding: 5px 10px; }

.lines-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

.line-data { 
	width: 49%;
	min-width: 300px;
	flex-wrap: wrap !important; 
	border: 1px solid #DDDDDD !important; 
	margin-top: 20px;
	border-radius: 10px;
	background: #FFFFFF !important;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);
	overflow: hidden;
	padding-bottom: 10px;
}

#new-request .line-data.edit {
	width: 100% !important;
}

#new-request .line-data {
	background: transparent !important;
	border: none !important;
	border-radius: 0px;
}

#new-request .lines {
	border-top: solid 1px #AAAAAA;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #FFFFFF;
}

#new-request .lines .line-data {
	width: 50%;
	margin-top: 0px;
	padding-top: 10px;
	box-sizing: border-box;
}

#new-request .lines .line-data:nth-child(odd) {
	border-right: solid 1px #dddddd !important;
}

.line-data label { 
	font-weight: bold; 
	width: 35%;
	max-width: 150px;
	min-width: 120px;
	padding: 0px; 
	margin-bottom: 5px; 
	overflow: hidden;
	text-overflow: ellipsis;
}

.line-data .row { 
	display: flex; 
	flex-wrap: wrap !important; 
	border-width: 0px; 
	padding: 0px 15px 5px 15px;
}
.line-data p { 
	flex-grow: 1;
	padding: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.line-data .header {
	display: block;
	padding: 15px;
	color: #555555;
	background: #EEEEEE;

	margin-bottom: 10px;
	cursor: pointer;
}

.line-data button { display: none; }

.line-data.edit button { 
	display: block !important; 
	margin-top: 15px;
	width: 100%;
	order: 99;
}

@media only screen and (max-width: 767px) {
	.line-data{
		width: 100% !important;
	}

	.search-filter .row {
		width: 100% !important;
	}
	
	.changeViewMode {
		display: none !important;
	}

	.shop-list div {
		width: 100%;
	}

	.shop-selection input, .shop-selection select, .shop-selection button {
		width: 100% !important;
		margin-bottom: 10px;
	}
}