#container1 {border-collapse: collapse;width:50%;}
#container1 th {padding: 3px;text-align: center;border-bottom: 1px solid #ddd;}
#container1 td {padding: 3px;text-align: left;border-bottom: 1px solid #ddd;}
#container_vendor {border-collapse: collapse; width: 100%;}
#container_vendor th {padding: 3px; text-align: center; border-bottom: 1px solid #ddd; background-color:#77C9FF;}
#container_vendor td { padding: 3px; text-align: center; border-bottom: 1px solid #ddd;}
#container_vendor tr:nth-child(even){background-color: #f2f2f2;}
#container_vendor tr:hover {background-color: #ddd;}
@media Print {#container_vendor { font-size:12px;}}

#container_cust {border-collapse: collapse; width: 100%;}
#container_cust th {padding: 3px; text-align: left; border-bottom: 1px solid #ddd; background-color:#77C9FF;}
#container_cust td { padding: 3px; text-align: left; border-bottom: 1px solid #ddd;}
#container_cust tr:nth-child(even){background-color: #f2f2f2;}
#container_cust tr:hover {background-color: #ddd;}
@media Print {#container_cust {padding:1px; font-size:10px;}}

.containermain {border-collapse: collapse; width: 100%;}
.containermain th {padding: 3px; text-align: left; border-bottom: 1px solid #ddd; background-color:#77C9FF;}
.containermain td { padding: 3px; text-align: left; border-bottom: 1px solid #ddd;}
.containermain tr:nth-child(even){background-color: #f2f2f2;}
.containermain tr:hover {background-color: #ddd;}
@media Print {#containermain { font-size:12px;}}


#container80 {border-collapse: collapse; width: 80%;}
#container80 th {padding: 3px; text-align: left; border-bottom: 1px solid #ddd; background-color:#77C9FF;}
#container80 td { padding: 3px; text-align: left; border-bottom: 1px solid #ddd;}
#container80 tr:nth-child(even){background-color: #f2f2f2;}
#container80 tr:hover {background-color: #ddd;}
@media Print {#container_cust { font-size:12px;}}

.logininput[type=text] { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; border: none; background-color:#CCC;}
.logininput[type=password] { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; border: none; background-color:#CCC;}
.logininput[type=submit] { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; background-color:#CCC}
.logininput select { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; background-color:#CCC}
input[type=text],[type=date] {width:400px;border-color:#0CF; color:#00F; font-weight:600; font-family:Cambria;font-size:14px; padding: 5px 12px;margin: 2px 0;box-sizing: border-box;border: none;background-color:#E9E9E9;}
textarea, select {width: 400px; color:#00F; font-weight:600; font-family:Cambria;font-size:14px;border-color:#0CF;padding: 5px 12px;margin: 2px 0;box-sizing: border-box;border: none;background-color:#E9E9E9;}
.invform input[type=text],[type=date] {width:100%;border-color:#0CF; color:#00F; font-weight:600; font-family:Cambria;font-size:14px; padding: 5px 7px;margin: 2px 0;box-sizing: border-box;border: none;background-color:#E9E9E9;}
.invform textarea {width:100%; color:#00F; font-weight:600; font-family:Cambria;font-size:14px;border-color:#0CF;padding: 5px 12px;margin: 2px 0;box-sizing: border-box;border: none;background-color:#E9E9E9;}
.invform select {width:100%; color:#00F; font-weight:600; font-family:Cambria;font-size:14px;border-color:#0CF;padding: 5px 12px;margin: 2px 0;box-sizing: border-box;border: none;background-color:#E9E9E9;}
.gst,
.button {font-size: 12px;}
.message {opacity: 0; transition: 0.5s;}
.message.active {opacity: 1;}
.logintable {border: 1px solid black; border-radius:10px; border-color:#50F; background-color:#BAF2F5}
/*----- Toggle Button -----*/
.toggle-nav {display:none;}
/*----- Menu -----*/
@media screen and (min-width: 860px) {
	.menu {width:100%;padding:10px 18px;box-shadow:0px 1px 1px rgba(0,0,0,0.15);border-radius:3px;background:#303030;}
}
.menu ul {display:inline-block;}
.menu li {margin:0px 50px 0px 0px;float:left;list-style:none;font-size:17px;}
.menu li:last-child {margin-right:0px;}
.menu a {text-shadow:0px 1px 0px rgba(0,0,0,0.5);color:#777;transition:color linear 0.15s;}
.menu a:hover, .menu .current-item a {text-decoration:none;color:#66a992;}

/*----- Search -----*/
.search-form {float:right;display:inline-block;}
.search-form input {width:200px;height:30px;padding:0px 8px;float:left;border-radius:2px 0px 0px 2px;font-size:13px;}
.search-form button {height:30px;padding:0px 7px;float:right;border-radius:0px 2px 2px 0px;background:#66a992;font-size:13px;font-weight:600;text-shadow:0px 1px 0px rgba(0,0,0,0.3);color:#fff;}
/*----- Responsive -----*/
@media screen and (max-width: 1150px) {.wrap {width:90%;}}
@media screen and (max-width: 970px) {.search-form input {width:120px;}}
@media screen and (max-width: 860px) {.menu {position:relative;display:inline-block;}
.menu ul.active {display:none;}
.menu ul {width:100%;position:absolute;top:120%;left:0px;padding:10px 18px;box-shadow:0px 1px 1px rgba(0,0,0,0.15);border-radius:3px;background:#303030;}
.menu ul:after {width:0px;height:0px;position:absolute;top:0%;left:22px;content:'';transform:translate(0%, -100%);border-left:7px solid transparent;		border-right:7px solid transparent;border-bottom:7px solid #303030;}
.menu li {margin:5px 0px 5px 0px;float:none;display:block;}
.menu a {display:block;}
.toggle-nav {padding:20px;float:left;display:inline-block;box-shadow:0px 1px 1px rgba(0,0,0,0.15);border-radius:3px;background:#303030;text-shadow:0px 1px 0px rgba(0,0,0,0.5);color:#777;font-size:20px;transition:color linear 0.15s;}
.toggle-nav:hover, .toggle-nav.active {text-decoration:none;color:#66a992;}
.search-form {margin:12px 0px 0px 20px;float:left;}
.search-form input {box-shadow:-1px 1px 2px rgba(0,0,0,0.1);}
}
input[type=text]:focus, [type=username]:focus, [type=password]:focus { background-color: #6FF;}
textarea:focus { background-color: #6FF;}
input[type=button]:focus { border-color: #666;}
input[type=submit]:focus { border-color: #666;}
select:focus { border-color: blue;border-width:thin;background-color: #6FF;}


.square_btn { position:relative;display: inline-block;font-weight: bold;padding: 8px 10px 5px 10px;text-decoration: none;color: #00F;background: #77C9FF;border-bottom: solid 4px #00F;border-radius: 15px 15px 0 0;transition: .4s;}
.square_btn:hover {background: #09F;color: #FFF;}

.productinput[type=text] { border: none; background-color:#CCC;}
.productinput select { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; background-color:#CCC}
.totalinput[type=text] { border: none; background-color:#FF6;}
.totalinput select { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; background-color:#FF6}
.welcome {background-color: #FFFCD9; border: 1px solid #EEDE9C; padding: 10px;}
.tooltip {  position: relative; display: inline-block; border-bottom: 1px dotted black;}
.tooltip .tooltiptext {visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0;
/* Position the tooltip */ position: absolute; z-index: 1; top: -5px; right: 100%;}
.tooltip:hover .tooltiptext {visibility: visible;}

.input-icon {position: relative;}
.input-icon > i {position: absolute; display: block; transform: translate(0, -50%); top: 50%; pointer-events: none; width: 15px; text-align: center; font-style: normal;}
.input-icon > input {padding-left: 25px; padding-right: 0;}
.input-icon-right > i {right: 0;}
.input-icon-right > input {padding-left: 0; padding-right: 15px; text-align: left;}