#container1 {border-collapse: collapse; width:700px;}
#container1 th {padding: 3px;text-align: center;border-bottom: 1px solid #ddd;}
#container1 td {padding: 3px;text-align: left;border-bottom: 1px solid #ddd;}
#container12 {border-collapse: collapse; width:90%;}
#container12 th {padding: 3px;text-align: center;border-bottom: 1px solid #ddd;}
#container12 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: left; border-bottom: 1px solid #ddd; background-color:#77C9FF;}
#container_vendor td { padding: 3px; text-align: left; 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;}}

#container9 {border-collapse: collapse; width: 80%;}
#container9 th {padding: 3px; text-align: center; border-bottom: 1px solid #ddd; background-color:#77C9FF;}
#container9 td { padding: 3px; text-align: center; border-bottom: 1px solid #ddd;}
#container9 tr:nth-child(even){background-color: #f2f2f2;}
/*#container9 tr:hover {background-color: #ddd;}*/

.container90 {border-collapse: collapse; width: 80%;}
.container90 th {padding: 3px; text-align: center; border: 1px solid #ddd; background-color:#77C9FF;}
.container90 td { padding: 3px; text-align: center; border: 1px solid #ddd;}
.container90 tr:nth-child(even){background-color: #f2f2f2;}
.container90 tr:hover {background-color: #ddd;}

.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[type=button] { 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],[type=password] {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;}
.componentinput[type=text] { width:150px; border: none; background-color:#CCC;}

.loader1 {border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid blue; border-bottom: 16px solid blue; width: 120px; height: 120px;  -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}


.cont{position:absolute; left:50%; top:50%; transform:Translate(-50%, -50%);}
#button{background-color:#ff4757; color:#6b0f0f; border-bottom:6px solid #6b0f0f; border-top:5px solid #576574; width:180px; font-size:28px; padding:15px 0px 15px 35px; border-radius:0px 0px 15px 15px; box-shadow:0px 0px 15px 1px rgba(214, 48, 49,.6); position:relative; font-family: 'Montserrat', sans-serif;}
#button:after{content:""; width:100%; height:1px; background-color:#c8d6e5; top:-3px; left:0; position:absolute;}
.loader{position:absolute; top:30px; left:34px;}
#button .loader div{width:5px; height:5px; border-radius:50%; background-color:#6b0f0f; position:absolute; transform-origin: -8px; animation: light 3s linear infinite;}
#button .loader div:nth-child(1){transform:rotate(0deg); animation-delay:0s;}
#button .loader div:nth-child(2){transform:rotate(60deg); animation-delay:.5s;}
#button .loader div:nth-child(3){transform:rotate(120deg); animation-delay:1s;}
#button .loader div:nth-child(4){transform:rotate(180deg); animation-delay:1.5s;}
#button .loader div:nth-child(5){transform:rotate(240deg); animation-delay:2s;}
#button .loader div:nth-child(6){transform:rotate(300deg); animation-delay:2.5s;}
@keyframes light{0%{background-color:#6b0f0f;} 40%{background-color:#6b0f0f;} 50%{background-color:white;} 60%{background-color:#6b0f0f;} 100%{background-color:#6b0f0f;}}
.paper{width:150px; height:160px; box-shadow:0px 0px 10px 1px rgba(55,55,55,.3); left:0; right:0; margin: auto; animation: paper 4s ease infinite; position:absolute; transform-origin:top; transform:translateY(0px) rotate(180deg); background-color:#fff;}
.g-cont{margin:0 auto; width:150px; text-align:center; position:absolute; top:73px; left:10px; right:0; z-index:10;}
.garbage{height:160px; width:6px; box-shadow:0px 0px 10px 1px rgba(55,55,55,.3); display:inline-block; vertical-align:top; margin-right:9px; animation: garbage 4s ease infinite; background-color:#fff;}
@keyframes garbage{0%{height:0px;transform:translateY(0px);opacity:0;} 20%{height:0px;transform:translateY(0px);opacity:1;} 70%{height:160px;transform:translateY(0px);opacity:1;} 90.1%{height:160px;transform:translateY(100px);opacity:0;} 100%{height:0px;opacity:0;}}
@keyframes paper{0%{height:160px;opacity:0;transform:translateY(-100px) rotate(180deg);} 20%{height:160px;opacity:1;transform:translateY(0px) rotate(180deg);} 70%{height:0px;opacity:1;transform:translateY(0px) rotate(180deg);} 70.1%{height:0px;opacity:0;transform:translateY(0px) rotate(180deg);} 100%{height:160px;opacity:0;transform:translateY(-100px) rotate(180deg);}}

.boxe {background-color:#DFFFFF; height:65px; width:125px; border: 2px solid green; text-align:center;}

.mybutton {
  display:inline;
  overflow: hidden;

  margin: 1px;
  padding: 5px 5px;

  cursor: pointer;
  user-select: none;
  transition: all 150ms linear;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none;
  text-transform: capitalize;

  background-color: wheat;
  border: 0 none;
  border-radius: 15px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;

  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
 
  justify-content: center;
  align-items: center;
  flex: 0 0 160px;
  
  box-shadow: 2px 5px 10px var(--color-smoke);

}

#printdiv a {text-decoration: none;}
#printdivexp a {text-decoration: none;}
#btndiv a {text-decoration: none;}
.mybutton:hover{
    background-color:dodgerblue;
    color: white;
    text-decoration-line: none;
}

.dropdon {
  position: relative;
  display: inline-block;
}

.dropdon-content {
  display: none;
  position: absolute;
  background-color: wheat;
  min-width: 140px;
  z-index: 1;
  border-radius: 15px;
}

.dropdon-content a {
  color: black;
  padding: 6px 20px;
  text-decoration: none;
  display: block;
  border-radius: 15px;
}

.dropdon-content a:hover {background-color: dodgerblue; color: white;}

.dropdon:hover .dropdon-content {
  display: block;
}

.mybtn:hover, .dropdon:hover .btn {
  background-color: #0b7dda;
}

.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}

/*.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
*/
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}