@media (min-width: 100px) and (max-width: 400px) {
	
	#div_btn_container {
		width:100%;
	}
}

@media (min-width: 401px) and (max-width: 800px) {

	
	#div_btn_container {
		width:100%;
	}
}

@media (min-width: 801px) {

	
	#div_btn_container {
		width:40%;
	}	
}



html, body {
	font-family: Arial, Helvetica, sans-serif;
	margin: auto;
	font-size:18px;	
	width: auto !important;
}


.english_div {
	direction: ltr;
}

.sub_menu_form {
	text-align:center;
}

#deletebutton {
	background-color:#b71c1c;	
}

#editbutton {
	background-color:#cc8a56;	
	color:black;
}

#addbutton {
	background-color:#deeaee;	
	color:black;
}

#editbutton:hover, #deletebutton:hover, #addbutton:hover {
	background-color:#282e73;	
	color:white;
}

.warn75{
	border:2px solid #f10909;
	margin:auto;
	padding:0;
	font-family:arial;
	font-size:175%;
	font-weight:bold;
}



.sub_menu_form input[type=submit]{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color:white;
	border:1px solid yellow; 
	vertical-align:top;
	background-color:#2a6339;	
	margin:1px;
	border-radius:5px;
	display:inline-block;
	text-align:center;
	width:auto;
}



.sub_menu_form input[type=text] {
	background-color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color:black;
	border:3px solid grey; 
	vertical-align:top;
	margin:1px;
	border-radius:5px;
	display:inline-block;
	text-align:center;
	width:auto;
}


.sub_menu_form input[type=submit]:hover{
	background-color:#282e73;
}

.to_date_select {
	height:50px;
	border: 4px solid black;
	width:30%;
	padding:10px;
	margin:10px auto auto auto;
	text-align:center;
	background-color:#dfdaed;
}

.form_date_select {
	height:50px;
	border: 4px solid black;
	width:30%;
	padding:10px;
	margin:10px auto auto auto;
	text-align:center;
}

.form_date_select select, .to_date_select select{
	font-family:arial;
	font-size:110%;
	font-weight:bold;
	margin:10px auto;
	border: 1px solid black;
	border-radius: 5px;
}

.form_date_select input[type=submit], .to_date_select input[type=submit] {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color:black;
	border:1px solid yellow; 
	vertical-align:top;	
	margin:10px;
	border-radius:5px;
	display:inline-block;
	text-align:center;
}

.form_branch_select {
	height:80px;
	border: 4px solid black;
	width:50%;
	margin:10px auto auto auto;
	text-align:center;
}

.form_branch_select select{
	width:300px;
	font-family:arial;
	font-size:125%;
	font-weight:bold;
	margin:10px auto;
	border: 4px solid black;
	border-radius: 5px;
}

.form_branch_select input[type=submit]{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color:white;
	border:1px solid yellow; 
	vertical-align:top;
	background-color:#543f04;	
	margin:10px;
	height:35px;
	border-radius:5px;
	display:inline-block;
	text-align:center;
	
}

.form75{
	border:2px solid #0359ae;
	margin:10px auto;
	padding:0;
	font-family:arial;
	font-size:125%;
	font-weight:bold;
}

.form_title{
	background-color:#cc8a56;
	text-align:center;
	font-size:125%;
	font-weight:bold;
}

.form75 input[type=text], input[type=number]{
	font-family:arial;
	font-size:110%;
	font-weight:bold;
	width: 100%;
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	resize: vertical;
}

#acno {
	width:80%;
}

#customer_details{
	background-color:#ebe5d9;
	border:2px solid #0359ae;
	margin:10px auto;
	padding:0;
	width:40%;
}

#customer_details input[type=text]{
	font-family:arial;
	font-size:125%;
	font-weight:bold;
	width: 100%;
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	resize: vertical;
}

#customer_details_title{
	background-color:#cc8a56;
	text-align:center;
	font-size:125%;
	font-weight:bold;
}

#mainmenu_div{
	width: 95%;
	margin: auto;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

.counter_row{
	text-align:center;
}

.counter_id{
	width:15%;
	background-color: light_yellow;
	display:inline-block;
	text-align:center;
	border: 2px solid #ccc;
	border-radius: 4px;
	margin:5px;
	font-size:110%;
	background-color:#BAB9B933;
}

.submit_form {
	display:inline-block;
	width:25%;
	margin:10px;
}

.mainmenu_submit {
	font-family:arial;
	background-color: #cc8a56;
	color: black;
	padding: 12px 20px;
	border: none;
	width:100%;
	border-radius: 4px;
	cursor: pointer;
	text-align:center;
	font-size:125%;
	font-weight:bold;
	display:inline-block;
} 

.mainmenu_submit:hover {
	background-color:green;
}




/* Style the submit button */
.dataentry_submit {
	font-family:arial;
	background-color: #cc8a56;
	color: black;
	margin:10px auto auto 10px;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-align:center;
	font-size:110%;
	font-weight:bold;
} 

.search_submit {
	font-family:arial;
	background-color: #cc8a56;
	color: black;
	margin:5px 10px auto 10px;
	padding: 2px 2px;
	width:7%;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-align:center;
	font-size:110%;
	font-weight:bold;
} 

#form_select {
	font-family:arial;
	height:35px;
	font-size:110%;
	font-weight:bold;
}

/* Floating column for labels: 10% width */
.col-10 {
  float: right;
  width: 10%;
  margin-top: 5px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: right;
  width: 25%;
  margin-top: 5px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 5px;
}

/* Floating column for inputs: 90% width */
.col-90 {
  float: left;
  width: 90%;
  margin-top: 5px;
}

.col-95 {
  width: 100%;
  margin-top: 5px;
}

.row{
	margin:0 20px 0 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

tr:nth-child(even){
	background-color:#17630d33;
}

/* Style the label to display next to the inputs */
label {
  padding: 2px 2px 2px 0;
  display: inline-block;
}

#div_header_container {
	border-bottom:10px solid #143D55;
	text-align:center;
	width:100%;
}

#tawlogo {
	height:16%;
	width:7.5%;
	min-width:50px;
	display:inline-block; 
}

#masthead {
	text-align: center;
	vertical-align:top;
	width:50%;
	display:inline-block;
}

#div_btn_container {
	display:inline-block;
	vertical-align:top;
	height:100px;
}

#div_contact_us {
	width:100%;
	margin:auto;
	background-color: #143D55;
}

#divitem {
	width:50%;
	margin: auto auto;
	text-align:center;
	font-weight:bold;
	font-size: 25px;
}

#red {
  
  animation-duration: 700ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}







#div_contact_us a {
	text-decoration:none;
	display:block;
	color:white;
}


#div_menu_button {
	border:1px solid yellow; 
	vertical-align:top;
	background-color:#365899;	
	margin:5px;
	
	height:25px;
	border-radius:5px;
	display:inline-block;
	text-align:center;
}

#div_menu_button a {
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-size:1.2em;
}

#div_menu_button:hover {
	background-color:green;
}

#divgensearch {
	padding-top:4%;
	padding-left:10px;
	text-align: center;
	font-size: 100%;
}


#main_login {
		text-align:center;		
		width:100%;
		margin:20px auto;
		font-family:Arial, Helvetica, sans-serif;		
	}

#main_login h1 {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	border-radius: 10px 10px 0 0;
	padding: 15px
}

#login {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	border: 2px solid #ccc;
	padding: 10px 40px 25px;
	margin-top: 20px;
	color: blue;
}

#login {
	font-family: Arial, Helvetica, sans-serif;
}

#login input[type=text], input[type=password]  {
	width:99.5%;
	padding:10px;
	margin-top:8px;
	border:1px solid #ccc;
	text-align:center;
	padding-left:5px;
	font-size:25px;
	font-family:Arial, Helvetica, sans-serif;
}
	
#login input[type=submit] {
	margin-left:auto;
	margin-right:auto;
	width:70%;
	background-color:#FFBC00;
	color:#fff;
	border:2px solid #FFCB00;
	padding:10px;
	font-size:30px;
	cursor:pointer;
	border-radius:5px;
	margin-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
}

#div_error{
	color:red;
	text-align:center;
	font-size:26px;
	animation-duration: 700ms;
	animation-name: blink;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
	
#profile {
	padding:50px;
	border:1px dashed grey;
	font-size:20px;
	background-color:#DCE6F7
}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}

#divsearchitem {
	width: 70%;
	text-align: center;
	margin: auto;
}

#divsearchitem input[type="text"]{
	font-family: Arial, Helvetica, sans-serif;
	width:50%;
	text-align:center;
	font-size: 150%;
	border: 3px solid #e3e300; 
	background-color:#ffffe5;
}








#divitem hover {
	background-color:red;
}

#tditem {
	background-color:#e5f2ff;
	border: 3px solid #b3d9ff; 
}



#tditem a {
	display: block;
	color: #003e80;
	text-decoration: none;
}

#tditem a:hover {
	background-color:white;
}





#prg_no {
	background-color: #9F0;




	
}



#divprice_container {
	/*vertical-align: middle;
	color: green; */
	padding: 1em;
	position: absolute;						
	top: 11%;
	left: 42%;	
	/*border: 3px solid #8AC007; 
	/*background: orange; */
	width: 55%; 
	height: 40%; 
	margin-right: -50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#products_container {
	font-size: 30px;
	color: blue;
	top: 0;
	left: 0;
	width: 99.5%;
	height: 99%;
}

#divitemdetails {
	min-height: 60%;
	width: 940px;
	height: 400px;
	display: inline;
	float: right;
	/*margin-left: -4.75%;*/
}

#divitemno {
	padding-bottom: 10px;
	text-align: center;
}
#divdesc {
	min-width: 400px;
	display: flex;
	justify-content: left;
	padding-bottom: 10px;
}

#divmodel {
	min-width: 400px;
	padding-bottom: 10px;
}

#divbarcode {
	min-width: 400px;
	padding-bottom: 10px;
}

#divprice {
	min-width: 400px;
}

#divphoto {
	/*left: 59%;
	border: 3px solid;
	background: white;
	width: 40%;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 13.5%;*/
	float: left;
	width: 630px;
	height: 400px;
	/*left: 550px;
	position: absolute;*/
}


#divlongdesc {
	overflow-y: auto;
	overflow-x: auto;
	color: #550055;
	position: relative;
	font-size: 120%;
	width: 99%;
	height: 40%;
	min-width: 900px;
	padding-top: 1%;
}

#divcatview {
	vertical-align: center;
	margin:10px 20px 0 10px;
	border-radius:4px;
	display: inline;
	float: left;
	background: #234393;
	height: 10%;
	width: 20%;
	text-align: center;
}

#divcatview a {
	text-decoration: none;	
}

#addtocart {
	width:50%;	
	font-size:30px;
	margin:10px 20px 0 10px;
	background: #234393;
	color:white;
	width:20%;
	height:10%;
	font-family:"Times New Roman";
	border-radius:4px;
}

.inline_button{
	display: inline-block;
	margin:0.25%;
}

.btn_container{
	text-align:center;
	padding:0;
}

.div_button:hover, .div_flex_button:hover{
	background-color:green;
}

.next_button{
	margin:5px auto;
}

.div_flex_button{
	height: 30px;
	width: auto;
	background-color: #658aed;
	border: 2px solid green;
	border-radius:5px;
	font-weight: bold;
	font-size: 125%;
	display:inline-block;
}

.div_button{
	height: 30px;
	width: 300px;
	background-color: #658aed;
	border: 2px solid green;
	border-radius:5px;
	font-weight: bold;
	font-size: 125%;
	display:inline-block;
}

.blockhref{
	display:block;
	height:30px;
	color: white;
	text-align:center;
	text-decoration:none;
}

#divorderbutton {
	vertical-align: center;
	text-align: center;
	width: 60%;
	float: right;
	background: #ffb3b3;
}

#divorderbutton a {
	text-decoration: none;	
}

#divrequestform{
	margin-left:auto;
	margin-right:auto;
	width:50%;
	border: 3px solid blue; 
	font-family: sans-serif;
	font-size: 18px;
}

#divrequestform input[type="text"] {
	margin:auto;
	display: block;
	color:blue;
	border: 3px solid #33bbff;
	width: 98%;
}

#remarks{
	display: block;
    margin-left: auto;
    margin-right: auto;
	color:blue;
	border: 3px solid #33bbff;
	width:98%;
	height:225px;
	word-wrap:normal;
	font-family: sans-serif;
	font-size: 18px;
}

#thankyou{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	color:red;
	width:50%;
	border: 3px solid blue; 
	font-family: sans-serif;
	font-size: 18px;
}

/*td {
	color: green;
}*/

#info_message{
	text-align: center;
	margin:20px auto;
	padding:0;
	width:50%;
	font-size:1.2em;
	font-weight:bold;
	border:2px solid #632a7e;
	color:red;
}

#show_process{
	text-align: center;
	margin:5px auto;
	padding:0;
	width:99.5%;
	font-size:1.2em;
	font-weight:bold;
	border:2px solid #632a7e;
	color:blue;
}

#divupdatecontainer{
	text-align: center;
	width: 70%;
	margin: auto;
}

.small-widget-box {
	margin: 1px auto auto 1px;
	padding: 0px 0px 0px 0px;
	width:99%;
	resize: both;
	overflow: auto;
	border: 4px solid black;
	border-radius: 5px;

}

.table-widget{
	width:100%;
	border:2px solid black;
	outline-offset: -1px;
	border-collapse: collapse;
	color:black;
}

.th-widget {
	border:3px solid black;
	background-color:#ecfb05;
	font-size: 125%;
	position: sticky; 
	top: 23px;
}


.table-widget td{
	border:2px solid black;
	font-size: 21px;
}


.table_grands {
	width:99.5%;
	height:60px;
	margin:5px auto;
} 

#grand_total{
	background-color:#ebe5d9;
	border: 4px solid black;
	border-radius: 5px;
	padding:0;
	font-size: 125%;
	width:12%;
	text-align:center;
}

.td_int{
	text-align:center;
}

.table_caption {
	background-color:#658aed;
	color:white;
	text-align:center;
	font-weight:bold;
	font-size:125%;
	position: sticky; 
	top: -1px;
}

.float_left{
	text-align:left;
}

input#update    {
background-image:url(edit.png);
background-repeat: no-repeat;
float:left;
width:40px;
height:20px;
border: 0;
}

input#preview    {
background-image:url(preview.png);
background-repeat: no-repeat;
float:left;
width:20px;
height:20px;
border: 0;
}

input#delete    {
background-image:url(delete.png);
background-repeat: no-repeat;
float:left;
margin-right:5%;
width:40px;
height:20px;
border: 0;
}

input#toleft    {
float:left;
height:20px;
border: 0;
}

input#toright    {
float:right;
height:20px;
border: 0;
}

.searchfield {
	width:50%;
	font-family:arial;
	font-size:100%;
	font-weight:bold;
}

.formcontainer{
	background-color:#f5e2d4;
	border:2px solid #0359ae;
	border-radius:5px;
	width:50%;
	margin:10px auto;
	font-size:125%;
	font-weight:bold;
}

.form_title{
	text-align:center;
}

.form_fields{
	display:inline-block;
	border:2px solid #0359ae;
	border-radius:5px;
	width:96%;
	margin:10px;
}

.form_fields input[type=text], textarea{
	font-family:arial;
	font-size:100%;
	font-weight:bold;
	width:100%;
}

.form_fields label{
	text-align:right;
}

.center_element {
	text-align:center;
}

#divitemcontainer input[type="text"] {
	display: block;
	border: 3px solid #33bbff;
	width: 100%;
	background-color: #D8FCFE;
}

#tdmenuid a	{
		width:100%;
		display:block;
	}
	
#tdmenuid {
	width: 5%;
	text-align: center;
}

#tdmenudesc {
	width: 90%;
	text-align: center;
	border: 3px solid #e3e300;
	background-color: #ffffe5;
}


#inp_menu_desc {
	display: block;
	margin: 0;
	height:auto;
	width: 99.5%;
	text-align:center;
	word-wrap: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight:bold;
}

.row{
	margin:0 20px 0 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: right;
  width: 25%;
  margin-top: 5px;
}

.col-r {
  float: right;
  margin-top: 5px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 5px;
}

.col-60 {
  float: right;
  width: 60%;
  margin-top: 5px;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
} 


.submit_button {
    padding:5px 15px; 
    background:#99cdff; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
	margin-top:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:100%;
}

#divinsertcontainer{
	width: 48%;
	text-align: center;
	font-size: 150%;
	margin: auto;
	height: 100px;
}

#tdmenunewdesc {	
	width:50%;
	text-align:center;
	border: 3px solid #e3e300; 
	background-color:#ffffe5;
}

#menunewdesc {	
	margin:auto;
	border: 3px solid brown; 
	width:95%;
	font-family: sans-serif;
	font-size: 18px;
}

#addnewproducts {
	width: 35%;
	text-align: center;
	border: 3px solid blue;
	background-color: #ffffe5;
	font-family: sans-serif;
	font-size: 18px;
	margin: auto;
}

#divcatalog{
	margin:auto;
	top: auto;
	left: 51%;
	width: 48%;
	text-align: center;
	font-size: 150%;
}

#divcatalogin{
	position: relative;
	width: 99%;
	text-align: center;
	font-size: 140%;
	border: 3px solid green;
	background-color: #00e600;
}

#divcatalogin a {
	display: block;
	top: auto;
	text-decoration: none;
}

#divcatalogresults{
	margin:auto;
	top: 30%;
	width: 99%;
	text-align: center;
	font-size: 150%;
}

#inputmulti{
	border: 3px solid #33bbff;
	width: 100%;
	height: 100px;
	word-wrap: normal;
	font-family: sans-serif;
	font-size: 18px;
	background-color: #D8FCFE;
}

#divcatalogupdate{
	margin:auto;
	width:90%;
	text-align:center;
	font-family: sans-serif;
	font-size: 18px;
}

#divcatalogupdate input[type="text"] {
	margin:auto;
	display: block;
	border: 3px solid #0000ff;
	width: 98%;
}

#longcat{
	display: block;
    margin-left: auto;
    margin-right: auto;
	border: 3px solid #0000ff;
	width:98%;
	height:200px;
	word-wrap:normal;
	font-family: sans-serif;
	font-size: 18px;
}

#centerbutton {
	display: block;
    margin-left: auto;
    margin-right: auto;
}


#popup {
	color: red;
	text-decoration: blink;
	font-size: 1.5em;
	text-align: center;
}



#divgensearch input[type="text"]{
	background-color:#e6f2ff;
	border-radius: 5px 5px 5px 5px;
}

#copyright a{
	text-decoration:none;
	color:#f2f2f2;
	bottom:0;
}