/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 2%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 23%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
font-family: 'Open Sans', sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2; }
h2 { font-size: 3.6rem; line-height: 1.25;  }
h3 { font-size: 3.0rem; line-height: 1.3; }
h4 { font-size: 2.4rem; line-height: 1.35; }
h5 { font-size: 1.8rem; line-height: 1.5; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 3.0rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 2.0rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.2rem; }
  h6 { font-size: 1.1rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; 
          }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 7px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }
.rowfilter{
 clear: both;
 display:block;
 
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
header{
background:#efefef;
height:90px;
z-index:999;
display:block;
position:relative;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
td {
font-size:14px;
font-family: 'Open Sans', sans-serif;
color:#222;
}

.edittable td {
padding: 5px 0;
  border-bottom: 1px solid #fff; 
}
.notdline td , .notdline tr{
  border:0 !important; 
}
.stockin td {
padding: 3px 0;
  border-bottom: 1px solid #eee; 
}
.stockin input, .stockin textarea,.stockin  select,.stockin  fieldset {

    margin-bottom: 0;
vertical-align:top;
}
.stocksumarry tr:nth-child(even) {background: #efefef}
.stocksumarry tr:nth-child(odd) {background: #FFF}
.stocktable tr:nth-child(even) {background: #efefef}
.stocktable tr:nth-child(odd) {background: #FFF}
.divtab {
  padding: 10px;
  background: #fff;
}

.divtab section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}

.divtab > input {
  display: none;
}

.divtab label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

.divtab label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}


.divtab label:hover {
  color: #789;
  cursor: pointer;
}

.divtab input:checked + label {
  color: #0af;
  border: 1px solid #abc;
  border-top: 2px solid #0af;
  border-bottom: 1px solid #fff;
}

.divtab #tab1:checked ~ #content1,
.divtab #tab2:checked ~ #content2,
.divtab #tab3:checked ~ #content3,
.divtab #tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 800px) {
  .divtab label {
    font-size: 0;
  }
  .divtab label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 500px) {
  .divtab label {
    padding: 15px;
  }
}


/* Style the form */
#regForm {
  background-color: #ffffff;
  margin: 30px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

/* Style the input fields */
input {
  padding: 10px;
  width: 100%;
  font-size: 14px;
font-family: 'Open Sans', sans-serif;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none; 
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
.qtyminus, .qtyplus{
display:inline-block;
width:40px;
font-size:30px!important;
padding:0!important;
}
.stockqtyinput{
display:inline-block;
width:60px!important;
}



.middle {
  width: 100%;
  text-align: center;
  /* Made by */
}
.middle label{
display:inline-block;
}
.middle h1 {
  font-family: "Dax", sans-serif;
  color: #fff;
}
.middle input[type="radio"] {
  display: none;
}
.middle input[type="radio"]:checked + .box {
  background-color: #4cb6ea;
}
.middle input[type="radio"]:checked + .box span {
  color: white;
  transform: translateY(70px);
}
.middle input[type="radio"]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}
.middle .box {
  width: 200px;
  height: 200px;
  background-color: #eee;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-family: "Dax", sans-serif;
  font-weight: 900;
}
.middle .box:active {
  transform: translateY(10px);
}
.middle .box span {
  position: absolute;
  transform: translate(0, 60px);
  left: 0;
  right: 0;
  transition: all 300ms ease;
  font-size: 1.5em;
  user-select: none;
  color: #888;
}
a:hover{
text-decoration:none;
}
.middle .box span:before {
  font-size: 1.2em;
  font-family: FontAwesome;
  display: block;
  transform: translateY(-80px);
  opacity: 0;
  transition: all 300ms ease-in-out;
  font-weight: normal;
  color: white;
}
.middle .front-end span:before {
  content: '';
}
.middle .back-end span:before {
  content: '';
}
.middle p {
  color: #fff;
  font-family: "Dax", sans-serif;
  font-weight: 400;
}
.middle p span:after {
  content: '\f0e7';
  font-family: FontAwesome;
  color: yellow;
}

.menu_710{
background:#4cb6ea;
height:43px;
}
.menu_720{
background:#FCBB17;
height:43px;
}


#cssmenu {
  background: #4cb6ea;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
}
.menu_720 #cssmenu {
  background: #FCBB17;
}
.headerrow form{
display:inline-block;
margin-top:-5px;
margin-left:10px;
margin-bottom:0;
height:10px;
}
.headerrow form select {

    height: 35px;
    padding: 5px;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 1;
  top: 13px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 2;
  top: 15px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 190px;
  padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: #4cb6ea;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #4cb6ea;
}
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}
#cssmenu > ul > li:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 0;
  background: #ffffff;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  display: block;
  content: "";
  background: #ffffff;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 13px;
  right: 9px;
  top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
  display: block;
  content: "";
  border: 4px solid transparent;
  border-top-color: #333;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 11px;
  top: 21px;
}
#cssmenu > ul > li > a {
  color: #ffffff;
  padding: 15px 13px;
  text-transform: uppercase;
  font-size: 13px;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block;
}
#cssmenu > ul > li {
  width: auto;
}
#cssmenu > ul > li > ul {
  width: 200px;
  display: block;
  background:#eee;
}
#cssmenu > ul > li > ul > li {
  width: 200px;
  display: block;
    background:#eee;

}
#report_data td{
border:0px;
padding:2px;
}
.smallertxt td{
font-size:12px;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  #cssmenu > ul > li > ul {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }
  #cssmenu ul li ul li a {
    width: 100%;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu.align-center > ul > li {
    display: block;
  }
  #cssmenu > ul.open {
    max-height: 1000px;
    border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
    width: 100%;
  }
  #cssmenu ul > li {
    float: none;
    width: 100%;
  }
  #cssmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
  }
  #cssmenu ul > li:after {
    display: none;
  }
  #cssmenu ul li.has-sub > a:after,
  #cssmenu ul li.has-sub > a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
    display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  #cssmenu ul li ul li a {
    padding: 8px 20px 8px 35px;
    color: #ffffff;
  }
  #cssmenu ul li ul ul li a {
    padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover > a {
    color: #000000;
  }
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
  }
  #cssmenu #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }
  #cssmenu #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }
}

.headerrow{
height:50px;
padding:10px 0 0;
}
.alignright{
text-align:right;
}
.contentsection{
padding:2em 0;
}
.logoimg{
width:280px;
height:auto;
}
.footerrow{
padding:10px 0;
border-top:1px solid #eee;
text-align:center;
font-size:12px;
}
a.logutbtn{
padding:5px 15px;
background:#000;
color:#fff;
text-decoration:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.smallertxt{
font-size:12px;
}
.stocktable h3{
padding:0;
margin:0;

}
.stocktable tr th{
background:#333;
color:#fff;
}
.stocktable th, .stocktable td{
padding: 7px 10px;
}
.loginsec{
max-width:350px;
width:350px;
margin:2em auto 0;

}
.pendingspan{
padding:3px 10px;
background:#F2BE3B;
color:#fff;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.processspan{
padding:3px 10px;
background:#F9E70D;
color:#000;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

input[type="submit"]{
padding:5px 15px;
background:#ccc;
color:#fff;
outline:none;
border:0;
font-family: 'Open Sans', sans-serif;
line-height:1;
color:#000;
max-width:120px;
}
.boldtxt{
font-weight:600!important;
}
.mobilectr{
max-width: 1200px;

margin: 0 auto;
}
.stockintab, .stockintab:hover{
display:inline-block;
padding: 10px 20px;
background:#efefef;
color:#ccc;
text-decoration:none;
}
#ccustomtab{
padding-top:20px;
}
.detailstab input{

    margin-bottom: 0;

}
.activetab, .activetab:hover{
background:#4cb6ea!important;
color:#fff!important;
text-decoration:none!important;
border:0!important;
outline:none!important;
}
.stockqtyinput{
margin:0 5px !important;}

#ccustomtab h5{
padding:0;
margin:0;
font-size:22px;
font-weight:600;
}
.searchdate *{
display:inline-block;

}
.searchdate input[type="text"]{
width:120px;
display:inline-block;

}
.editbtn{
padding:3px 10px;
background:#ccc;
color:#000;
outline:none;
border:0;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.showallbtn, .showallbtn:hover{
padding:3px 10px;
background:#ccc;
margin: 0 5px;
color:#fff;
font-size:12px;
outline:none;
border:0;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.btnctr{
display:block;
margin:10px 0;
}
.onlymobile{
display:none;
}
.openPopup, .openPopup:hover{
padding:3px 10px;
background:#ccc;
color:#000;
outline:none;
border:0;
font-size:11px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.editbtn:hover{
padding:3px 10px;
background:#333;
color:#fff;
}
.approvestatus{
padding:3px 10px;
background:#67BF21;
color:#fff;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.signdoc,.signdoc:hover{
   padding:3px 10px;
background:#67BF21;
color:#fff;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; 
}
.delivernow, .delivernow:hover{
padding:3px 10px;
background:#F2BF1C;
color:#000;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.deliver{
padding:3px 10px;
background:#F2BF1C;
color:#000;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.cancel{
padding:3px 10px;
background:#FCC159;
color:#fff;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.reject{
padding:3px 10px;
background:#F90B0B;
color:#fff;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.aprrovenow, .rejectnow, .cancelbtn{
background:#ccc;
color:#fff;
padding:3px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size:12px;
margin-top:10px;
    transition: all 0.2s ease;
}
.aprrovenow:hover{
background:#67BF21;
color:#fff;
}
.rejectnow:hover{
background:#F90B0B;
color:#fff;
}

.cancelbtn:hover{
    background:#6B6B6B;
    color:#fff;
}
.errordiv{
background:#F7C6C6;
color:#EA1111;
padding:5px 10px;
}
.pendingstatus{
padding:3px 10px;
background:#ccc;
color:#000;
font-size:12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom:5px;
}
#ui-datepicker-div{
background:#fff!important;
}

select.invalid {

    background-color: #ffdddd;

}
.warehouseselect{
display:inline-block;
padding:2em 1.2em;
color:#fff;
background:#eee;
font-weight:600;
text-align:center;
line-height:1.1;
font-size:2em;
margin:5px;
text-decoration:none!important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.wr710{
background:#4cb6ea;
}
.wr720{
background:#FCBB17;
}
.warehouseselect:hover{
color:#333;
}

.subtable td{
padding:2px 10px;
}
.tablestockin td{
font-size:12px;
}

.titletr td{
font-weight:600;
}
.paymentinputrow{
position:relative;
}
.paymentinputrow:before{
content:"RM";
position:absolute;
top:32px;
left:10px;
}
.smallertxt{
font-size:12px;

}
.stockinlist td{
font-size:13px;
}
.attachimg img{
width:50px;
height:auto;
}
.exportexcel, .exportexcel:hover{
padding: 3px 10px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #67BF21;
}
.filterinput input, .filterinput select, .filterinput form{
height:30px;
padding:3px 5px;
font-size:14px;
margin-bottom:10px;
}
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color:rgba(0, 0, 0, 0.8);
  display: none;
}
.incasenovalue{
display:none;
}

#boxes .window, #boxesalert .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}


#boxes #dialog, #boxesalert #dialogalert {
  width: 750px;
  height: auto;
  padding: 10px;
  background-color:transparent;
  font-size: 15pt;
}
#note {
    position: absolute;
    z-index: 101;
    top: -150px;
    height:100px;
    left: 0;
    right: 0;
    background: #F40808;
    color:#fff;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}
#popupfoot {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 250px;
}
.reporttable td{
padding:2px 10px;
font-size:12px;
}
.reporttable tr td:nth-child(2),.reporttable tr td:nth-child(3), .reporttable tr td:nth-child(4){
text-align:center!important;
}
#paymentinput{
padding-left:40px;
}
.stockoutprice{
padding:6px 4px;
width:100%!important;
}
.bt{
display:block;border-left:1px solid #333;border-bottom:1px solid #333;width:10px;height:25px;
}
.bb{
display:block;border-left:0px solid #333;width:10px;height:25px;
}

input[type="button"].cancelbtn{
padding: 5px 15px!important;

background: #ccc!important;


color: #fff;

outline: none;

border: 0;

font-family: 'Open Sans', sans-serif;

line-height: 1;

color: #000;

max-width: 120px!important;
}

/* Larger than mobile */
@media (max-width: 400px) {
.loginsec {

    max-width: 250px;
    width: 350px;
    margin: 2em auto 0;

}
.nomobile{
display:none;
}
.headerrow{
padding : 10px 20px;
}
.headerrow .nine{
width:70%;
display:inline-block;
}
.headerrow .three{
width:30%;
display:inline-block;
}
#regForm {

    min-width:200px;
    margin: 10px auto;

padding: 20px 0;

width: 100%;
}
.stockqtyinput{
width:40px!important;
padding:6px 2px!important;
margin:0 3px !important;
text-align:center!important;
}
.qtyminus, .qtyplus {

    display: inline-block;
    width: 25px;
    font-size: 30px !important;
    padding: 0 !important;

}
.stockintab, .stockintab:hover {

    display: inline-block;
    padding: 8px 5px;
}
#ccustomtab h5{
padding:0;
margin:0;
font-size:16px;
line-height:1;
margin-bottom:2px;
font-weight:600;
}
header {

    background: #efefef;
    height: 100px;
}
.headerrow {

    height: 100px;
    padding: 10px;

}
.headerrow .five{
width:50%;
}
.headerrow .one{
width:50%;
}
.padding10{
padding:60px 10px 10px;
}
.onlymobile{
display:block;
text-align:center;
margin-bottom:20px;
}
h2 {

    font-size: 2rem;
    line-height: 1.25;

}
.bobiletopbtn,.bobiletopbtn:hover{
width:40%;
display:inline-block;
padding:10px 25px ;
font-size:18px;
color:#fff;
background:#4cb6ea;
margin:5px;
text-decoration:none;
text-align:center;
}
#boxes #dialog {
  width: 260px;
  height: auto;
  padding: 10px;
  background-color:transparent;
  font-size: 15pt;
  top:70px!important;
}
.headerrow form {

    display: inline-block;
    margin-top: 10px;
    margin-left: 60px;
    margin-bottom: 0;
    height: 10px;

}
.warehouseselect {

    display: inline-block;
    padding:1.5em 1em;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    font-size: 1.4em;
    widtH:100%;
}
#cssmenu ul li ul li {

  
    background: #eee !important;
}
.headerrow .one {

    width: 40%;
float:right;
}
.row {

    margin-right: 5px;
    margin-left: 5px;

}
#stockoutform{
width:130%;
}
}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}