/* adding font */
@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
/* giving style */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;

	}

*, *:before, *:after {
	box-sizing:border-box;
}


body {
	padding:$base-spacing-unit;
	font-family:'Source Sans Pro', sans-serif;
	margin:0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}


body {
margin:0;
padding:0;
background-color:#222;
}
body {
	background-color: #1e1f23;
	padding-top: 8rem;
}

	body.is-loading:after {
		visibility: hidden;
		opacity: 0;
	}

	body:after {
		-moz-pointer-events: none;
		-webkit-pointer-events: none;
		-ms-pointer-events: none;
		pointer-events: none;
		-moz-transition: opacity 1.5s ease-in-out, visibility 1.5s;
		-webkit-transition: opacity 1.5s ease-in-out, visibility 1.5s;
		-ms-transition: opacity 1.5s ease-in-out, visibility 1.5s;
		transition: opacity 1.5s ease-in-out, visibility 1.5s;
		content: '';
		background-image: url(../../images/bg.jpg);
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: fixed;
		display: block;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		visibility: visible;
		opacity: 1;
	}

	@media screen and (max-width: 980px) {

		body:after {
			background-attachment: scroll;
			background-position: top;
			background-size: 100%;
		}

	}

	/*main display for order table */

.table_container {
	max-width: 1000px;
	margin-right:auto;
	margin-left:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:25vh;
}

.table {
	width:100%;
	border:1px solid $color-form-highlight;
}

.table-header {
	display:flex;
	width:100%;
	background:#000;
	padding:($half-spacing-unit * 1.5) 0;
}

.table-row {
	color: white;
	display:flex;
	width:100%;
	padding:($half-spacing-unit * 1.5) 0;

	&:nth-of-type(odd) {
		background:$color-form-highlight;
	}
}

.table-data, .header__item {
	flex: 1 1 20%;
	text-align:center;
}

.header__item {
	text-transform:uppercase;
}

.filter__link {
	color:white;
	text-decoration: none;
	position:relative;
	display:inline-block;
	padding-left:$base-spacing-unit;
	padding-right:$base-spacing-unit;

	&::after {
		content:'';
		position:absolute;
		right:-($half-spacing-unit * 1.5);
		color:white;
		font-size:$half-spacing-unit;
		top: 50%;
		transform: translateY(-50%);
	}

	&.desc::after {
		content: '(desc)';
	}

	&.asc::after {
		content: '(asc)';
	}

}

/* end */

/*animation*/
* {
	-webkit-transition-property: all;
	-webkit-transition-duration: .5s;
	-moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
	-moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
/*menu*/
.btn{
	position: relative;
	color:#999;
	background:rgba(0, 0, 0, 0.5);
	padding:10px 20px;
	font-size:12px;
	text-decoration:none;
	letter-spacing:2px;
	text-transform:uppercase;
}

.btn:hover{
	border:none;
	background:rgba(0, 0, 0, 0.4);
	background:#fff;
	padding:20px 20px; #000;
	color:#1b1b1b;
}

#header {
	color: #a6a6a6;
	cursor: default;
	position: relative;
	text-align: center;
	z-index: 10001;
	padding: 20px;
}

	#header > .logo {
		margin: 0 0 4rem 0;
		padding: 0;
	}

		#header > .logo a {
			font-size: 3rem;
			font-weight: 700;
			color: #FFF;
			text-decoration: none;
			line-height: 1rem;
		}

		#header > .logo span {
			font-weight: 300;
			font-size: 1rem;
			display: block;
			color: rgba(255, 255, 255, 0.65);
			padding: 20px;
		}

		/* Basic */

			@-ms-viewport {
				width: device-width;
			}

			body {
				-ms-overflow-style: scrollbar;
			}

			@media screen and (max-width: 480px) {

				html, body {
					min-width: 320px;
				}

			}

			body {
				background: #fff;
			}

				body.is-loading *, body.is-loading *:before, body.is-loading *:after {
					-moz-animation: none !important;
					-webkit-animation: none !important;
					-ms-animation: none !important;
					animation: none !important;
					-moz-transition: none !important;
					-webkit-transition: none !important;
					-ms-transition: none !important;
					transition: none !important;
				}

		/* Type */

			html {
				font-size: 13pt;
			}

				@media screen and (max-width: 1680px) {

					html {
						font-size: 11pt;
					}

				}

				@media screen and (max-width: 1280px) {

					html {
						font-size: 11pt;
					}

				}

				@media screen and (max-width: 980px) {

					html {
						font-size: 12pt;
					}

				}

				@media screen and (max-width: 736px) {

					html {
						font-size: 12pt;
					}

				}

				@media screen and (max-width: 480px) {

					html {
						font-size: 12pt;
					}

				}

			body {
				background-color: #fff;
				color: rgba(0, 0, 0, 0.5);
			}

			body, input, select, textarea {
				font-family: "Poppins", sans-serif;
				font-weight: 300;
				font-size: 1rem;
				line-height: 1.65;
			}

			a {
				text-decoration: underline;
			}

				a:hover {
					text-decoration: none;
				}

			strong, b {
				font-weight: 600;
			}

			em, i {
				font-style: italic;
			}

			p {
				margin: 0 0 2rem 0;
			}

				p:last-child {
					margin: 0;
				}

				p.special {
					text-transform: uppercase;
					font-size: .75rem;
					font-weight: 300;
					margin: 0 0 .5rem 0;
					padding: 0 0 1rem 0;
					letter-spacing: .25rem;
				}

					p.special:after {
						content: '';
						position: absolute;
						margin: auto;
						right: 0;
						bottom: 0;
						left: 0;
						width: 50%;
						height: 1px;
						background-color: rgba(0, 0, 0, 0.125);
					}

			h1, h2, h3, h4, h5, h6 {
				font-weight: 700;
				line-height: 1.5;
				margin: 0 0 1rem 0;
			}

				h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
					color: inherit;
					text-decoration: none;
				}

			h2 {
				font-size: 1.75rem;
			}

			h3 {
				font-size: 1.35rem;
			}

			h4 {
				font-size: 1.1rem;
			}

			h5 {
				font-size: 0.9rem;
			}

			h6 {
				font-size: 0.7rem;
			}

			sub {
				font-size: 0.8rem;
				position: relative;
				top: 0.5rem;
			}

			sup {
				font-size: 0.8rem;
				position: relative;
				top: -0.5rem;
			}

			blockquote {
				border-left: solid 4px;
				font-style: italic;
				margin: 0 0 2rem 0;
				padding: 0.5rem 0 0.5rem 2rem;
			}

			code {
				border-radius: 4px;
				border: solid 1px;
				font-family: "Courier New", monospace;
				font-size: 0.9rem;
				margin: 0 0.25rem;
				padding: 0.25rem 0.65rem;
			}

			pre {
				-webkit-overflow-scrolling: touch;
				font-family: "Courier New", monospace;
				font-size: 0.9rem;
				margin: 0 0 2rem 0;
			}

				pre code {
					display: block;
					line-height: 1.75;
					padding: 1rem 1.5rem;
					overflow-x: auto;
				}

			hr {
				border: 0;
				border-bottom: solid 1px;
				margin: 2rem 0;
			}

				hr.major {
					margin: 3rem 0;
				}

			.align-left {
				text-align: left;
			}

			.align-center {
				text-align: center;
			}

			.align-right {
				text-align: right;
			}

			input, select, textarea {
				color: white;
			}

			a {
				color: 	#000000;
			}

			strong, b {
				color: #1e1f23;
			}

			h1, h2, h3, h4, h5, h6 {
				color: #1e1f23;
			}

			blockquote {
				border-left-color: rgba(144, 144, 144, 0.25);
			}

			code {
				background: rgba(144, 144, 144, 0.075);
				border-color: rgba(144, 144, 144, 0.25);
			}

			hr {
				border-bottom-color: rgba(144, 144, 144, 0.25);
			}

			/* Footer */

				#footer {
					padding: 2rem 0 0.1rem 0 ;
					text-align: center;
				}

					#footer a {
						color: rgba(255, 255, 255, 0.75);
					}

						#footer a:hover {
							color: #FFF;
						}

					#footer .undertext {
						color: #bbb;
						font-size: 0.9rem;
						margin: 0 0 2rem 0;
						padding: 0 1rem;
						text-align: center;
					}

					@media screen and (max-width: 736px) {

						#footer {
							padding: 1rem 0 0.1rem 0 ;
						}

					}


					/* Containers */

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

						.container.\31 25\25 {
							width: 100%;
							max-width: 100rem;
							min-width: 80rem;
						}

						.container.\37 5\25 {
							width: 60rem;
						}

						.container.\35 0\25 {
							width: 40rem;
						}

						.container.\32 5\25 {
							width: 20rem;
						}

						.container {
							width: 80rem;
						}

						@media screen and (max-width: 1680=px) {

							.container.\31 25\25 {
								width: 100%;
								max-width: 100rem;
								min-width: 80rem;
							}

							.container.\37 5\25 {
								width: 60rem;
							}

							.container.\35 0\25 {
								width: 40rem;
							}

							.container.\32 5\25 {
								width: 20rem;
							}

							.container {
								width: 80rem;
							}

						}

						@media screen and (max-width: 1280px) {

							.container.\31 25\25 {
								width: 100%;
								max-width: 81.25rem;
								min-width: 65rem;
							}

							.container.\37 5\25 {
								width: 48.75rem;
							}

							.container.\35 0\25 {
								width: 32.5rem;
							}

							.container.\32 5\25 {
								width: 16.25rem;
							}

							.container {
								width: 65rem;
							}

						}

						@media screen and (max-width: 980px) {

							.container.\31 25\25 {
								width: 100%;
								max-width: 112.5%;
								min-width: 90%;
							}

							.container.\37 5\25 {
								width: 67.5%;
							}

							.container.\35 0\25 {
								width: 45%;
							}

							.container.\32 5\25 {
								width: 22.5%;
							}

							.container {
								width: 90%;
							}

						}

						@media screen and (max-width: 736px) {

							.container.\31 25\25 {
								width: 100%;
								max-width: 112.5%;
								min-width: 90%;
							}

							.container.\37 5\25 {
								width: 67.5%;
							}

							.container.\35 0\25 {
								width: 45%;
							}

							.container.\32 5\25 {
								width: 22.5%;
							}

							.container {
								width: 90% !important;
							}

						}

						@media screen and (max-width: 480px) {

							.container.\31 25\25 {
								width: 100%;
								max-width: 112.5%;
								min-width: 90%;
							}

							.container.\37 5\25 {
								width: 67.5%;
							}

							.container.\35 0\25 {
								width: 45%;
							}

							.container.\32 5\25 {
								width: 22.5%;
							}

							.container {
								width: 90% !important;
							}

						}

				ul.icons {
							cursor: default;
							list-style: none;
							padding-left: 0;
						}

					ul.icons li {
								display: inline-block;
								padding: 0 2rem 0 0;
							}

					ul.icons li:last-child {
									padding-right: 0;
								}

					ul.icons li .icon:before {
									font-size: 2rem;
							}

							ul li {
								padding-left: 0.5rem;
							}

						.icon:before {
									-moz-osx-font-smoothing: grayscale;
									-webkit-font-smoothing: antialiased;
									font-family: FontAwesome;
									font-style: normal;
									font-weight: normal;
									text-transform: none !important;
							}

							/* Box Model */

								*, *:before, *:after {
									-moz-box-sizing: border-box;
									-webkit-box-sizing: border-box;
									box-sizing: border-box;
								}

								/* Icons */

									.icon {
										text-decoration: none;
										border-bottom: none;
										position: relative;
									}

										.icon:before {
											-moz-osx-font-smoothing: grayscale;
											-webkit-font-smoothing: antialiased;
											font-family: FontAwesome;
											font-style: normal;
											font-weight: normal;
											text-transform: none !important;
										}

										.icon > .label {
											display: none;
										}


												/*colors for status bar */

									.Pending{
												background-color: #621313;
										}

									.Completed{
												background-color: #3E6213;
										}

									.Refunded{
										background-color: #C18F24;
									}

									.table-data, .header__item {
										flex: 1 1 20%;
										text-align:center;
									}
