#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:80%;}
#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: 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:nth-child(odd){background-color: #FFFFFF;}
#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:nth-child(odd){background-color: #FFFFFF;}
#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:nth-child(odd){background-color: #FFFFFF;}
.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:nth-child(odd){background-color: #FFFFFF;}
#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:nth-child(odd){background-color: #FFFFFF;}
/*#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:nth-child(odd){background-color: #FFFFFF;}
.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; border-radius: 5px; background-color:antiquewhite;}
.logininput[type=password] { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; border: none; border-radius: 5px; background-color:antiquewhite;}
.logininput[type=submit] { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; border-radius: 5px; background-color:#CCC}
.logininput[type=button] { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; border-radius: 5px; background-color:#CCC}
.logininput select { width: 250px; font-size:14px; padding: 15px 12px; margin: 2px 0; box-sizing: border-box; border-radius: 5px; background-color:antiquewhite}
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:#B6E3DB}
/*----- 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:antiquewhite; height:50px; width:150px; border: 1px solid green; border-radius: 5px; 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: 125px;
  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);
}

.biztext {
    position: relative;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 2.5em;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 1px red,
        1px 2px 1px blue,
        1px 3px 1px blue,
        1px 4px 1px blue,
        1px 5px 1px blue,
        1px 6px 1px blue,
        1px 7px 1px blue,
        1px 8px 1px blue,
        1px 9px 1px blue,
        1px 10px 1px blue,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}