* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}

@media (max-width: 778px) {
	#submenu,
	#purchase_detail,
	#purchase_order_search,
	#sales_detail,
	#sales_order_search,
	#product_add_search,
	#product_add_detail{
		width:100% !important;
		margin:0 auto !important;
	}

}

body {

	width:100%;
	/* max-width: 1080px; */
	margin:0 auto;
	font-family: verdana,arial,sans-serif;
	-webkit-font-smoothing: antialiased;
	/* overflow-x: hidden; */
}
main{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	
	
}
img {
	
	max-width: 100% ;
	height:auto;
	
}

a {
    color: #000000;
    text-decoration: none
}
a:hover {
    color: #f40;
    text-decoration: none;
    cursor: pointer;
}
li:hover,.text_button:hover {
  	color: #f40;
    text-decoration: none;
    cursor: pointer;
}

table,td {
	font-size: 0.8rem;
	word-break: break-all;
	word-wrap:break-word;
	
}
label {
	font-size: 0.8rem;
	color:#222;
}
dialog {
	border:0;
}
dialog table {
	border-collapse:collapse;
	width:100%;
	height:auto;
	background-color:#ccc;
}

dialog table td {
	word-break: break-all;
	word-wrap:break-word;
	line-height: 1.3rem;
	border:thin solid #641888;

}
dialog table th{
	background:#641888;
	color:#fff;
	border:thin solid #641888;
}
dialog input{
	min-height: 1rem;
	
}

.tr_ground {
      background-color:#FF88CC;
}
.alink a:link {
	color:#fff;
}
.alink a:visited {
	color:#fff;
}
.alink a:hover{
	color: #f40;
    text-decoration: none;
    cursor: pointer;
}
.error_information {
	color:red;
	text-align:center;
}
header {
	margin:0 auto;
	width:100%;
	height:auto;

	height:1.5rem;
	/* font-size:1.1rem; */
	color:#641888;
}
	
nav {
	
	position:fixed;
	width:100%;
	height:auto;
	/* height:1.5rem;
	color:white;
	z-index: 100;
	overflow:hidden;
	background-color: #0b0248;
	display:inline-block;
	vertical-align:middle; */
	outline: 0;
				/* padding: .7em 1em; */
				/* padding:.3em 0.5em; */
				text-decoration: none;
				color: #FFF;
				text-shadow: #111 0 -1px;
				/* font-weight: bold; */
				background: #333;
				background: -webkit-linear-gradient(#444, #333);
				border-bottom: 1px solid #222;
				box-shadow: inset 0 1px 0 0 rgba(250,250,250,0.1);
				background: -webkit-linear-gradient(#444, #333);
				background:    -moz-linear-gradient(#444, #333);
				background:      -o-linear-gradient(#444, #333);
				background:     -ms-linear-gradient(#444, #333);
				background:         linear-gradient(#444, #333);
				filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#444", EndColorStr="#333");

}
ul {

	list-style-type: none;
	
}
#nav-item li{

	float:left;
	padding-left:30px;
	line-height: 2.5rem;
}
#nav_right li {
	float:right;
	padding-right:30px;
	line-height: 2.5rem;
}

#section1 {
	margin-top: 1.5rem;
	/*min-width: 1280px;
	min-height: 800px;
	background-image: url(../Data/ocean.jpg);*/
}
article {
	width:100%;
	/* flex-grow:2;
	flex-shrink:0;
	flex-basis:200px; */
	float:left;
	height:auto;
	
}
/* aside {
	width:20%;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:200px;
	float:right;
	height:100%;
	
} */
footer {
	display:inline-block;
	width:100%;
	height:80px;
	line-height: 80px;
	text-align:center;
	vertical-align: middle;
	color: #666;
    font-weight: 400;
    
    font-family: "Segoe UI", Segoe, Tahoma, Arial, Verdana, sans-serif;
    font-size: small;
    
}

#container {
	/*position:relative;*/
	position: absolute;
	display: flex;
	clear:both;
	width:100%;
	flex-grow:2;
	flex-shrink:0;
	justify-content:center;
	align-items: center;
	z-index: 1000;
	margin-top: 44px;
	
}
.hidden {
	display:none;
}

#signIn {
	flex-grow:2;
	flex-shrink:0;
	justify-content:center;
	align-items: center;


}
#signIn input {
	margin:10px 0 5px 0px;
	line-height: 28px;
	width:230px;
}
#signIn p {
	margin:0 auto;
	width:230px;
	padding:10px;
}
#signIn input,#signIn img{
	display:block;
	margin:0 auto;
	margin-bottom:5px;
}
input[type^="submit"],input[type^=button]{
	background-color:#55B0AB;
	color:#fff;
	border-radius:6px;
}
.text_button {
	padding:3px;
	margin:0 3px 0 3px; 
	background-color:#55B0AB;
	color:#fff;
	font-size: 0.7rem;
	border-radius:6px;"
}

 .p_input {
 		margin:0 auto;
        margin-top: 10px;
        font-size: 0.8em;
        font-weight: bold;
        color: #55B0AB;
        /* width:252px; */
        text-align:left;
        
        
}
#register {
	margin:0 auto;
	width:100%;
	text-align:center;
}

#register input {
	
 	line-height: 28px;
	width:252px;
	
 }
#register_p{
	text-align:center;
	color:#55B0AB;
}
#register_p:hover{
 	color: #f40;
    
    cursor: pointer;
 }

 .tabcontent {
	/* padding:10px 10px 10px 10px; */
	margin:auto 0;
	text-align:center;
	
}

#forum_table,#forum_content_table {
	display:inline-flex;
	border-collapse:collapse;
	margin:0 auto;
}

#forum_table th {
	background-color: #641888;
	color:#fff;
	border: thin solid #641888; 
}

#forum_table tr td p,#forum_content_table tr td p{
	color:gray;
	font-style: italic;
}
#forum_table td,#forum_content_table td{
	word-break: break-all;
	word-wrap:break-word;
	line-height: 28px;
	border: thin solid #641888;
	padding:5px;
	/* border: thin solid #BC45EE; */ 

}
#forum_table td:first-child,#forum_content_table td:nth-child(2) {
	text-align:left;
}

/* ############business */


#Business {
	width:100%;
	height:auto;
	
	background-color:#ccc;
}
#purchase_item,#sales_item{
	width:100%;
	height:auto;
	display:inline-table;
}
#submenu {

	float:left;
}

.dashboard {
	margin:auto 0;
	text-align:center;
}
.dashboard_li{
	margin:20px 10px 0 10px;
	float:left;
	color:#fff;
}
.dashboard_center {
	color:#fff;
	margin:20px 0px 10px 0px;"
}


#form_purchases,#form_sales {
	width:100%;
	height:auto;

	display:inline-grid;
	border:thin solid #641888;
	
}
#form {
	width:100%;
	height:auto;
	display:inline-grid;
	padding:6px;
	justify-content:center;
	margin:0 auto;
}
#form div{
	display:inline-flex;
	flex-wrap: wrap;
	/* flex-direction:row; */
	justify-content:space-between;
	margin-bottom: 6px;

	
}

.div_container {
	flex-wrap: wrap;
	float:left;
	flex-direction:row; 
	/* justify-content:flex-end;  */
	

}
#purchase_detail,#sales_detail {
	float:right;
	background-color:#ccc;
	/* justify-content:flex-end; */
	
	
}
#purchase_order_search,#sales_order_search {

	flex-wrap: wrap;
	flex-direction:row; 
	/* display:flex; */
	float:left; 
	
	border:thin solid #641888;
}
.purchase_float_div,.sales_float_div {
	display:flex;

	border:thin solid #641888;


}



.input_btn {
	 clear:both;
	 
	 margin:0 auto;
	 width:200px;"
}

#subtotal_table{
	justify-content:flex-end;
}

.search_table, #order_purchases_table,#paid_list_table,#order_sales_table {
	width:100%;
	height:auto; 
	border-collapse:collapse;
	display:inline-table;
	flex-wrap: wrap;
	justify-content:space-between;
}
.search_table th, #order_purchases_table th ,#paid_list_table th,#order_sales_table th{
	background-color: #641888;
	color:#fff;
	border: thin solid #641888; 
	padding:5px;
}
.search_table td {
	padding:5px;
	border: thin solid #641888; 
	cursor: pointer;
	font-size: 12px;
}
#order_purchases_table td ,#paid_list_table td,#order_sales_table td{
	padding:5px;
	border: thin solid #641888;
	height: 18px;
	overflow:hidden;
}
.search_p {
	display:inline-flex; 
	text-align: left;
	margin:5px 0 5px 0;
	color:#707070;
}
.search_div{
	display:flex;
	width:100%;
	height:auto;
}
.search_input {
	
	display:inline-flex;
	width:100%;
	height:auto;
}

.paytd {
	min-width: 30px;
	border:thin solid #641888;
	text-align:right;
}


/* product_add.html */
#product_add {
	
	/* display:flex;
	flex-direction:row; */
	/* justify-content:space-around; */
}
.product_float {
	
	width:100%;
	height:auto;

	
}
#product_add_detail {
	flex-wrap: wrap;
	float:left;
	/* width:100%;
	height:auto;  */
	padding:5px;
	background-color:#ccc;
	border:thin solid #641888;
	
	
}
#product_add_search {
	/* width:100%;
	height:auto;  */
	display:inline-grid; 
	flex-wrap: wrap; 
	
	float:right;
	background-color:#ccc;
	border:thin solid #641888;
	
}

.recommend_ul {
	display:flex;
	flex-wrap: wrap;
	
	
}

.recommend_li{
	width:320px;
	height:auto;
	float:left;
	margin:0 auto;
	
	border:thin solid #A9C8DF;
	border-radius: 6px;
	margin-bottom: 10px;
}
.recommend_li p{
	padding:8px;
	margin-top:10px;
	word-wrap: break-word;
	word-break: break-all; 
	text-align:center;
	font-size: 0.8rem;
}
.product_detail_li{
	width:320px;
	height:auto;
	float:left;
	margin:0 auto;
	word-wrap: break-word;
	word-break: break-all; 
	
	margin-bottom: 10px;
}
.products_list_table{
	align-self:center;
	display:inline-flex;
	padding:10px;
	border-collapse:collapse;
	margin:0 auto;

}
.products_list_table th{
	background-color: #641888;
	color:#fff;
	border: thin solid #641888; 
}

.products_list_table td{
	
	word-break: break-all;
	word-wrap:break-word;
	line-height: 28px; 
	border: thin solid #641888;
	padding:5px; 
}




/* dropdown menu begin */

			html {
				overflow-y: scroll; 
			}
			#submenu {
				/* font: normal normal 100% sans-serif; */
				max-width: 200px;
				/* margin: 100px auto 50px auto; */
				/* background: #1f1f1f; */
				text-align: center;
			}

			ul {
				list-style: none;
				margin: 0; padding: 0;
				text-align: left;
			}
			#submenu > ul {
				border: 1px solid #222;
				/* box-shadow: 0 0 8px #000; */
				/* margin-bottom: 300px; */
			}
			#submenu > ul > li {
				position: relative;
			}
			#submenu > ul > li > a {
				display: block;
				outline: 0;
				/* padding: .7em 1em; */
				padding:.3em 0.5em;
				text-decoration: none;
				color: #FFF;
				text-shadow: #111 0 -1px;
				/* font-weight: bold; */
				background: #333;
				background: -webkit-linear-gradient(#444, #333);
				border-bottom: 1px solid #222;
				box-shadow: inset 0 1px 0 0 rgba(250,250,250,0.1);
				background: -webkit-linear-gradient(#444, #333);
				background:    -moz-linear-gradient(#444, #333);
				background:      -o-linear-gradient(#444, #333);
				background:     -ms-linear-gradient(#444, #333);
				background:         linear-gradient(#444, #333);
				filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#444", EndColorStr="#333");
			}
			#submenu > ul > li > ul {
				counter-reset: items;
				height: 0;
				overflow: hidden;
				background: #eee;
				color: #777;
				font-size: .75em;
				box-shadow: inset 0 0 50px #BBB;
			}
			#submenu > ul > li > ul > li {
				counter-increment: items;
				padding: .5em 1.3em;
				border-bottom: 1px dotted #DDD;
			}
			#submenu > ul > li > ul:after {
				content: counter(items);
				font-size: 0.857em;
				display: inline-block;
				position: absolute;
				right: 10px;
				top: 15px;
				background: #333;
				line-height: 1em;
				height: 1em;
				/* padding: .7em .8em; */
				margin: -.8em 0 0 0;
				color: white;
				text-indent: 0;
				text-align: center;
				text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
				/* font-weight: 500; */
				-webkit-border-radius: .769em;
				   -moz-border-radius: .769em;
						border-radius: .769em;
				-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 
									0px 1px 0px 0px rgba(255, 255, 255, .15);
				   -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 
									0px 1px 0px 0px rgba(255, 255, 255, .15);
						box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 
									0px 1px 0px 0px rgba(255, 255, 255, .15);
			}
/* end */